/* ==========================================================================
BEWEI LONGEVITY — Design-System
Richtung: Entwurf 2 „dezent" — Anthrazit + Signal-Grün als gezielter Akzent.
Reines CSS, kein Build. Selbst gehostete Schriften (DSGVO-konform).
========================================================================== */
/* ---------- Schriften (selbst gehostet) ---------------------------------- */
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
src: url("../fonts/inter-500.woff2") format("woff2");
}
@font-face {
font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
src: url("../fonts/inter-600.woff2") format("woff2");
}
@font-face {
font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap;
src: url("../fonts/archivo-700.woff2") format("woff2");
}
@font-face {
font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap;
src: url("../fonts/archivo-800.woff2") format("woff2");
}
@font-face {
font-family: "Playfair Display"; font-style: normal; font-weight: 500; font-display: swap;
src: url("../fonts/playfair-500.woff2") format("woff2");
}
@font-face {
font-family: "Playfair Display"; font-style: normal; font-weight: 600; font-display: swap;
src: url("../fonts/playfair-600.woff2") format("woff2");
}
@font-face {
font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap;
src: url("../fonts/montserrat-400.woff2") format("woff2");
}
@font-face {
font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap;
src: url("../fonts/montserrat-500.woff2") format("woff2");
}
/* Headline-Schrift lt. Meeting 19.07.: Special Gothic Expanded One (Zalando/Google, OFL) */
@font-face {
font-family: "Special Gothic Expanded One"; font-style: normal; font-weight: 400; font-display: swap;
src: url("../fonts/special-gothic-expanded-one.ttf") format("truetype");
}
/* Meeting 22.07.: Headline-Schrift „zu fett/brutal" — Interim: die leichte Schwester
aus demselben gelieferten Paket. Finale Schrift kommt per Mail vom Designer. */
@font-face {
font-family: "Zalando Sans Expanded"; font-style: normal; font-weight: 300; font-display: swap;
src: url("../fonts/zalando-sans-expanded-300.ttf") format("truetype");
}
@font-face {
font-family: "Zalando Sans Expanded"; font-style: normal; font-weight: 400; font-display: swap;
src: url("../fonts/zalando-sans-expanded-400.ttf") format("truetype");
}
/* ---------- Design-Tokens ------------------------------------------------- */
:root {
/* Farben (CI: kein Schwarz — dunkle Flächen sind tiefes Olivgrün der Markenfamilie) */
--paper: #F5F4EF; /* warmes Off-White, Grundfläche */
--paper-2: #ECEAE2; /* zarte Abstufung */
--ink: #31372A; /* tiefes Olivgrün: Text & dunkle Sektionen (statt Schwarz) */
--ink-2: #4A4F3F;
/* Kontrast-Korrektur 25.07. (Kundenhinweis „kaum lesbar"): Sekundärtext war mit
#767B6A auf Papier nur 3,96:1 und auf dem hellen Salbei-Band sogar 2,85:1 — beides
unter dem Lesbarkeits-Mindestwert 4,5:1. Neuer Ton bleibt in der Olivfamilie der
Marke und erreicht Papier 6,3:1, Papier2 5,7:1, Salbei-Band 4,5:1. */
--muted: #575C4D; /* Sekundärtext */
--muted-2: #9EA292;
--line: rgba(49, 55, 42, .16);
--line-soft: rgba(49, 55, 42, .09);
--accent: #E9F906; /* CI-Neongelb (Corporate Colors 18.07.) — nur als Akzent */
/* Akzent-System nach Layout 12.07. + Farbkarte 18.07.: Neongelb nur als Fläche
oder auf dunklem Grund. Text-Akzente auf hellem Grund laufen in Marineblau
(Laufband-Typo im Layout), Deko-Marker in Salbei. Kein Gelb auf Hell. */
--accent-deep: var(--ci-navy); /* Alt-Alias — zeigt jetzt auf CI-Marineblau */
--on-dark: #F5F4EF;
--on-dark-mut:#C2C6B4;
--line-dark: rgba(245, 244, 239, .16);
/* Offizielle Corporate Colors (PDF 18.07.2026) */
--ci-grey: #DCDDDC;
--ci-navy: #082A54;
--ci-sage: #82A594;
--ci-gold: #9C8354;
--ci-neon: #E9F906;
/* Typo */
--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-display: "Zalando Sans Expanded", "Montserrat", "Inter", system-ui, sans-serif; /* Meeting 22.07.: leichter */
--font-mark: "Archivo", var(--font-body);
/* Fließende Typo-Skala — Meeting 19.07.: insgesamt größer, Relationen erhalten */
--fs-eyebrow: .8rem;
--fs-body: 1.125rem;
--fs-lead: clamp(1.2rem, 1.05rem + .7vw, 1.5rem);
--fs-h3: clamp(1.15rem, 1rem + .6vw, 1.5rem);
--fs-h2: clamp(1.5rem, 1.1rem + 1.8vw, 2.45rem); /* Designer 24.07.: etwas kleiner */
--fs-h1: clamp(1.95rem, 1.3rem + 2.9vw, 3.55rem); /* Designer 24.07.: etwas kleiner */
--fs-display: clamp(2.8rem, 1.5rem + 6vw, 5.8rem);
/* Abstände / Layout — Container breiter, Abschnittsabstände etwas kompakter */
--space-section: clamp(4rem, 2.6rem + 4.8vw, 7rem);
--container: 1400px;
--container-narrow: 820px;
--gutter: clamp(1.25rem, .8rem + 2.5vw, 3rem);
--radius: 3px;
/* Motion */
--ease: cubic-bezier(.22, 1, .36, 1);
--dur: .7s;
}
/* ---------- Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.65;
color: var(--ink);
background: var(--paper);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }
/* Sichtbarer Tastatur-Fokus (Barrierefreiheit) */
:focus-visible {
outline: 2px solid var(--accent-deep);
outline-offset: 3px;
border-radius: 2px;
}
::selection { background: var(--accent); color: var(--ink); }
.visually-hidden {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: 1rem; top: -3rem;
background: var(--ink); color: var(--on-dark);
padding: .6rem 1rem; border-radius: var(--radius); z-index: 200;
transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }
/* ---------- Layout-Helfer ------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--space-section); }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
/* Designer 24.07.: NO BLACK — alle dunklen Fonds auf helle CI-Toene umgestellt */
.section--dark { background: var(--band-mint); color: var(--ink); }
.section--paper2 { background: var(--paper-2); }
/* ---------- Typografie ---------------------------------------------------- */
.eyebrow {
font-family: var(--font-body);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--muted);
display: inline-flex;
align-items: center;
gap: .7rem;
}
.eyebrow::before {
content: ""; width: 2rem; height: 1px; background: var(--ci-sage);
}
.section--dark .eyebrow { color: var(--ink-2); }
.section--dark .eyebrow::before { background: var(--ci-sage); }
.eyebrow--center { justify-content: center; }
.eyebrow--plain::before { display: none; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1.18; letter-spacing: .01em; }
.h-display, .h1, .h2, .h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; font-weight: 300; }
/* Meeting 22.07.: Hurenkinder/unschöne Umbrüche vermeiden */
.h1, .h2, .statement, .lead { text-wrap: balance; }
.h-display { font-size: var(--fs-display); line-height: .95; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); font-weight: 400; }
.lead {
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--ink-2);
max-width: 60ch;
}
.section--dark .lead { color: var(--ink-2); }
.muted { color: var(--muted); }
.prose p + p { margin-top: 1.1em; }
.prose p { max-width: 68ch; }
.center { text-align: center; }
.center .lead, .center .eyebrow { margin-inline: auto; }
/* Bild-Logo (Meeting 22.07.: neues Logo aus dem Layout, einheitlich weiß ODER
anthrazit — nie gemischt; Zustandswechsel mit dem Header) ---------------- */
.logo-img { height: clamp(2.1rem, 1.7rem + 1.3vw, 3rem); width: auto; display: block; }
.site-header--solid .logo-img--light { display: none; }
.site-header--over .logo-img--dark { display: none; }
/* Offenes Menü ist hell -> anthrazitfarbenes Logo, unabhängig vom Header-Zustand */
body.nav-open .logo-img--light { display: none; }
body.nav-open .logo-img--dark { display: block; }
.site-footer .logo-img { height: 2.1rem; }
/* Wortmarke -------------------------------------------------------------- */
.wordmark { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.wordmark__name {
font-family: var(--font-mark);
font-weight: 800;
letter-spacing: .06em;
font-size: 1.55rem;
text-transform: uppercase;
transition: font-size .45s var(--ease), letter-spacing .45s var(--ease);
}
.wordmark__sub {
font-family: var(--font-body);
font-weight: 500;
letter-spacing: .42em;
font-size: .52rem;
text-transform: uppercase;
color: var(--muted);
margin-top: .28em;
padding-left: .1em;
transition: font-size .45s var(--ease), letter-spacing .45s var(--ease);
}
.site-header--over .wordmark__sub { color: var(--on-dark-mut); }
/* ---------- Buttons / Links ---------------------------------------------- */
.btn {
display: inline-flex; align-items: center; gap: .7rem;
font-family: var(--font-body); font-weight: 600;
font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
padding: .7rem 1.35rem;
border: 1px solid var(--ink);
border-radius: var(--radius);
background: var(--ink); color: var(--on-dark);
transition: background .35s var(--ease), color .35s var(--ease),
border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover { background: transparent; color: var(--ink); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--on-dark); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn--accent:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--on-dark { border-color: var(--on-dark); background: transparent; color: var(--on-dark); }
.btn--on-dark:hover { background: var(--on-dark); color: var(--ink); }
.link-arrow {
display: inline-flex; align-items: center; gap: .55rem;
font-weight: 600; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
padding-bottom: .3rem;
border-bottom: 1px solid var(--line);
transition: gap .3s var(--ease), border-color .3s var(--ease);
}
.link-arrow::after { content: "\2192"; transition: transform .3s var(--ease); }
.link-arrow:hover { border-color: var(--ink); }
.link-arrow:hover::after { transform: translateX(4px); }
.section--dark .link-arrow { border-color: var(--line); }
.section--dark .btn--on-dark { border-color: var(--ink); color: var(--ink); }
.section--dark .btn--on-dark:hover { background: var(--ink); color: var(--on-dark); }
.section--dark .link-arrow:hover { border-color: var(--ink); }
/* ==========================================================================
Header / Navigation
========================================================================== */
.site-header {
position: fixed; inset: 0 0 auto 0; z-index: 100;
display: flex; align-items: center;
/* Designer 23.07.: Logo „klebte" zu sehr am oberen Rand — oben eine Idee mehr Luft */
padding-block: 1.7rem 1.15rem;
transition: background .4s var(--ease), box-shadow .4s var(--ease),
padding .4s var(--ease), color .4s var(--ease);
}
/* Zentrierte Wortmarke, Menü-Button rechts (auf allen Geräten). */
.site-header .container {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
/* Meeting 22.07.: Logo unantastbar — für Lesbarkeit wird der Hintergrund abgedunkelt */
.site-header--over { color: var(--on-dark); background: transparent; text-shadow: 0 1px 14px rgba(43,48,36,.55); }
.site-header--over::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 175%; pointer-events: none; z-index: -1;
background: linear-gradient(180deg, rgba(43,48,36,.55), rgba(43,48,36,0));
}
/* WICHTIG: backdrop-filter darf NICHT auf .site-header liegen. Ein Element mit
backdrop-filter wird zum Bezugsrahmen für fest positionierte Nachfahren — das
Overlay-Menü (.site-nav, position:fixed) wurde dadurch auf Headerhöhe geschrumpft
(auf Unterseiten immer, auf der Startseite nach dem Scrollen). Der Weichzeichner
liegt deshalb auf einer eigenen Ebene hinter dem Headerinhalt. */
.site-header--solid {
background: transparent;
box-shadow: 0 1px 0 var(--line-soft);
color: var(--ink);
padding-block: .8rem;
}
.site-header--solid::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: rgba(245, 244, 239, .88);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
/* Bei offenem Menü liegt das Overlay über der Seite — die Kopfleiste tritt zurück */
body.nav-open .site-header--solid::after { opacity: 0; }
body.nav-open .site-header { box-shadow: none; }
.site-header--solid .wordmark__sub { color: var(--muted); }
/* Große Wortmarke im Kopf-Zustand (über Hero/Seitenkopf, heutiger Standard ~30–42px);
schrumpft beim Scrollen sanft auf die kompakte Größe zurück. */
.site-header--over .wordmark__name {
font-size: clamp(2.45rem, 1.8rem + 1.9vw, 3.5rem);
letter-spacing: .07em;
}
/* (Sonderregel „Longevity dunkler" vom 19.07. entfällt — Meeting 22.07.:
Logo nie zweifarbig; stattdessen dunkelt der Header-Verlauf das Foto ab.) */
.site-header--over .wordmark__sub {
font-size: clamp(.62rem, .5rem + .4vw, .82rem);
letter-spacing: .5em;
margin-top: .36em;
}
.brand { grid-column: 2; justify-self: center; display: inline-flex; position: relative; z-index: 120; }
.brand .wordmark { align-items: center; }
/* Offenes Menü ist hell — Marke und Burger wechseln auf Anthrazit, ohne Schatten */
body.nav-open .site-header { text-shadow: none; }
body.nav-open .brand .wordmark__name { color: var(--ink); }
body.nav-open .brand .wordmark__sub { color: var(--muted); }
/* Menü-Button (Burger) — immer sichtbar */
.nav-toggle {
grid-column: 3; justify-self: end;
display: block; width: 44px; height: 44px; border: none; background: none;
position: relative; z-index: 120;
}
.nav-toggle span {
position: absolute; left: 9px; right: 9px; height: 1.5px; background: currentColor;
transition: transform .35s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 28px; }
body.nav-open .nav-toggle span { background: var(--ink); }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* Vollbild-Overlay-Menü — Meeting 22.07.: hell (weiß) mit Anthrazit-Schrift,
Punkte kleiner, mehr Luft zwischen Logo und erster Zeile */
.site-nav {
position: fixed; inset: 0; z-index: 110;
background: var(--paper); color: var(--ink);
/* Kein geerbter Foto-Textschatten im hellen Menü („Graustrich", 22.07.) */
text-shadow: none;
display: flex; flex-direction: column; align-items: center;
padding: clamp(7.5rem, 19svh, 11rem) 1.5rem 2.5rem; overflow-y: auto;
opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s;
}
body.nav-open .site-nav { opacity: 1; visibility: visible; }
/* margin-block auto: zentriert nur, wenn Platz ist — sonst beginnt die Liste
sicher unterhalb des Logos und scrollt (kein Überlappen mehr). */
/* Meeting 19.07.: Burgerpage komplett in Versalien, großzügigerer Zeilenabstand */
.nav-list { display: flex; flex-direction: column; align-items: center; gap: 1.35rem; text-align: center; margin-block: auto; }
/* Das Menü ist auf drei Gruppen gewachsen. Damit es auf üblichen Notebooks ohne
Scrollen vollständig sichtbar bleibt, wird der Zeilenabstand gestaffelt enger. */
@media (max-height: 980px) {
/* 25.07.: nach Aufnahme der Rechtliches-Zeile nochmals enger gestaffelt, damit das
Menü auf üblichen Notebooks bis zur letzten Zeile sichtbar bleibt. */
.site-nav { padding: clamp(3.6rem, 8.5svh, 5.4rem) 1.5rem 1.2rem; }
.nav-list { gap: .5rem; }
.nav-label { margin-top: .55rem; }
.nav-sub { margin-top: .25rem; gap: .9rem; }
}
@media (max-height: 880px) {
.nav-list { gap: .4rem; }
.nav-list > li > a { font-size: .95rem; }
.nav-label { margin-top: .42rem; }
.site-nav { padding-top: clamp(3.2rem, 7.5svh, 4.6rem); }
}
@media (max-height: 700px) {
/* Sehr flache Fenster: Menü ist hier zwangsläufig länger als der Bildschirm und
wird gescrollt (die Fläche ist dafür scrollbar). Abstände auf das Minimum. */
.nav-list { gap: .3rem; }
.nav-label { margin-top: .32rem; }
}
/* Rechtliches als kompakte Schlusszeile im Menü (25.07.) — zwei kleine Links
nebeneinander, dezent abgesetzt, damit das Menü nicht drei Zeilen länger wird. */
.nav-legal {
display: flex; justify-content: center; gap: 1.4rem;
margin-top: 1.1rem; padding-top: .9rem;
border-top: 1px solid var(--line);
width: min(15rem, 60vw);
}
.nav-legal a {
font-family: var(--font-body); font-size: .72rem; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
transition: color .3s var(--ease);
}
.nav-legal a:hover, .nav-legal a[aria-current="page"] { color: var(--ci-navy); }
.nav-list > li > a {
font-family: var(--font-body); font-weight: 500;
font-size: clamp(.92rem, .84rem + .4vw, 1.08rem); letter-spacing: .16em; text-transform: uppercase;
color: var(--ink); transition: color .3s var(--ease);
}
.nav-list a.nav-soon { color: var(--muted-2); cursor: default; }
.nav-list a.nav-soon:hover { color: var(--muted-2); }
.nav-soon small { font-size: .62em; letter-spacing: .2em; color: var(--muted-2); margin-left: .5em; }
.nav-list > li > a:hover { color: var(--ci-navy); }
.nav-list a[aria-current="page"] { color: var(--ci-navy); }
.nav-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem; margin-top: .55rem; }
.nav-sub a {
font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
color: var(--muted); transition: color .3s var(--ease);
}
.nav-sub a:hover { color: var(--ci-navy); }
/* Menue-Gruppierung: gruene Zwischenueberschrift (bleibt lt. Meeting 22.07.) */
.nav-label {
font-size: .68rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
color: var(--ci-sage); margin-top: 1.3rem;
}
/* ==========================================================================
Hero
========================================================================== */
.hero {
position: relative; min-height: 100svh;
display: flex; align-items: flex-end;
color: var(--on-dark); overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img, .hero__media video {
width: 100%; height: 100%; object-fit: cover;
}
/* Stärkerer Abdunkler unten: hält die Hero-UI lesbar, ohne den Video-Text
in der Bildmitte zu überdecken. */
.hero__media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(43,48,36,.28) 0%, rgba(43,48,36,0) 34%, rgba(43,48,36,.72) 100%);
z-index: -1;
}
.hero__inner { padding-block: 0 clamp(3rem, 2rem + 4vw, 5.5rem); max-width: 52rem; width: 100%; }
.hero__lead { color: rgba(245,244,239,.9); font-size: var(--fs-lead); max-width: 38ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }
/* Hero-Variante: abstrakter, lizenzsicherer Hintergrund (Livegang-Standard).
Text darf hier verankert sein, da kein eingebrannter Video-Text kollidiert. */
/* Meeting 19.07.: Headline tiefer — sitzt jetzt im unteren Bilddrittel
(Höhe der inneren Schulterblätter des Key-Visuals). */
.hero--abstract { align-items: flex-end; }
/* Designer 23.07.: Die kompakte 52rem-Begrenzung des früheren linksbündigen Heros
zwang die Headline in den Umbruch („blockig") — der zentrierte Hero läuft breit,
damit jeder Satz eine Zeile bildet („von Schulter zu Schulter") */
.hero--abstract .hero__inner { padding-block: 8rem clamp(4.5rem, 3rem + 11vh, 10rem); max-width: none; }
/* Meeting 22.07.: jeder Satz eine Zeile, Breite orientiert sich am Foto */
.hero--abstract .hero__title {
font-family: var(--font-display); font-weight: 300; text-transform: uppercase;
font-size: clamp(1.4rem, .6rem + 2.4vw, 3.05rem); line-height: 1.22;
letter-spacing: .02em; margin-block: .5rem .9rem; max-width: none;
/* Designer 23.07.: je Satz genau EINE Zeile („von Schulter zu Schulter") —
das globale text-wrap:balance würde die
-Zeilen sonst zusätzlich umbrechen */
text-wrap: wrap;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden;
background:
radial-gradient(120% 90% at 70% 20%, rgba(233,249,6,.10), transparent 55%),
linear-gradient(158deg, #1C2114 0%, #2A2F1E 46%, #1E2316 100%);
}
.hero__bg::before {
content: ""; position: absolute; top: 50%; left: 62%;
width: min(120vh, 92vw); aspect-ratio: 1; transform: translate(-50%, -50%);
background: url("../img/hero-rings.svg") center / contain no-repeat;
animation: heroPulse 14s var(--ease) infinite;
}
.hero__bg::after {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(70% 60% at 60% 45%, transparent 40%, rgba(38,43,30,.55) 100%),
linear-gradient(180deg, rgba(38,43,30,.35), rgba(38,43,30,0) 30%);
}
@keyframes heroPulse {
0%, 100% { transform: translate(-50%, -50%) scale(.94); opacity: .8; }
50% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.hero__bg::before { animation: none; }
}
.hero__scroll {
position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%);
font-size: .68rem; letter-spacing: .24em; text-transform: uppercase;
color: rgba(245,244,239,.7); display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.hero__scroll span { width: 1px; height: 2.4rem; background: rgba(245,244,239,.5); animation: scrollpulse 2.4s var(--ease) infinite; }
@keyframes scrollpulse { 0%,100% { transform: scaleY(.4); opacity:.4;} 50% { transform: scaleY(1); opacity:1; } }
/* ==========================================================================
Karten / Kacheln / Grids
========================================================================== */
.grid { display: grid; gap: clamp(1rem, .4rem + 1.6vw, 1.6rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 780px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }
/* Themen-Kachel mit Bild + Label (Radiofrequenz / Wirkung / Body/Face/Hands) */
.tile {
position: relative; display: block; overflow: hidden;
border-radius: var(--radius); background: var(--ink);
aspect-ratio: 1 / 1;
}
.tile--wide { aspect-ratio: 16 / 11; }
.tile img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 1.2s var(--ease), filter 1.2s var(--ease);
filter: saturate(.9);
}
.tile::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(43,48,36,0) 35%, rgba(43,48,36,.72) 100%);
}
.tile:hover img { transform: scale(1.05); filter: saturate(1.05); }
.tile__body {
position: absolute; inset: auto 0 0 0; z-index: 2;
padding: clamp(1.2rem, 1rem + 1vw, 2rem); color: var(--on-dark);
}
.tile__eyebrow {
font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
color: var(--accent); font-weight: 600;
}
.tile__title {
font-family: var(--font-mark); font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; font-size: clamp(1.2rem, 1rem + .9vw, 1.9rem); margin-top: .3rem;
}
.tile__meta { color: var(--on-dark-mut); font-size: 1rem; margin-top: .4rem; }
/* Meeting 19.07.: Kacheltitel auf gleicher Höhe — Meta-Zeile reserviert 2 Zeilen */
.tile__meta--even { min-height: 3.3em; }
@media (max-width: 780px) { .tile__meta--even { min-height: 0; } }
/* Gesichter-Band (Partnerprogramm, Kundenwunsch 28.07.).
Die Bildunterschrift steht bewusst UNTER dem Motiv und nicht darin: Der Abdunkler der
Kacheln (.tile::after) verlaeuft von oben nach unten und ist auf hohe Kacheln ausgelegt.
Auf einem flachen 4:1-Band liegt der Text im noch transparenten Teil und kam auf der
hellen Gesichter-Montage (mittlere Helligkeit 179) nur auf 1,2:1. Ein Abdunkler, der
hier traegt, wuerde genau die Gesichter zudecken, um die es geht — und zwei Textzeilen
passen auf einem so flachen Band bei schmalen Fenstern nicht zuverlaessig. */
/* Breite bewusst begrenzt. Vorgeschichte: Das erste gelieferte Motiv war nur 640 Pixel
breit und wirkte ueber die volle Inhaltsbreite (rund 1190 Pixel) grob. Am 29.07. kam
eine echte 1280-Pixel-Fassung (nachgemessen: 68 Prozent mehr Bildzeichnung, also
wirklich mehr Aufloesung und keine Hochrechnung). Bei 820 Pixeln Darstellung ist sie
auf einfachen und 1,5-fach aufloesenden Bildschirmen gestochen scharf. Fuer die volle
Breite braeuchte es rund 2400 Pixel — liegt die vor, kann diese Zeile entfallen. */
.menschen-band { margin-inline: auto; margin-block: 0; max-width: var(--container-narrow); }
.menschen-band img {
display: block; width: 100%; aspect-ratio: 4 / 1;
object-fit: cover; border-radius: var(--radius);
}
/* schmale Fenster: Band etwas hoeher, sonst werden die Gesichter zu klein */
@media (max-width: 640px) { .menschen-band img { aspect-ratio: 5 / 2; } }
.menschen-band figcaption { margin-top: 1rem; }
.menschen-band figcaption p { color: var(--ink-2); max-width: 60ch; }
/* Media-Text-Split (Bild neben Text).
Meeting 19.07.: Fotos beginnen bündig mit der Headline (align start statt center). */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(2rem, 1rem + 4vw, 5rem); }
.split--center { align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 5 / 4; background: var(--paper-2); }
.split__media img, .split__media video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) {
.split { grid-template-columns: 1fr; gap: 1.8rem; }
.split--reverse .split__media { order: 0; }
}
/* Versprechen / Feature-Liste */
.feature-list { display: grid; gap: 1.4rem; }
.feature {
display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start;
padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.section--dark .feature { border-color: var(--line); }
.feature__num {
font-family: var(--font-display); font-size: 1.1rem; color: var(--accent-deep);
}
.section--dark .feature__num { color: var(--accent-deep); }
.feature h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; margin-bottom: .3rem; }
.feature p { color: var(--muted); font-size: .98rem; max-width: 46ch; }
/* Runde 24.07.: Kategorien im Partnerbereich sind verlinkte Kacheln */
a.feature { color: inherit; }
a.feature:hover h3 { color: var(--accent-deep); }
.section--dark .feature p { color: var(--muted); }
/* Aufzählung mit Akzent-Marker.
Kein Grid im : Bei Einträgen wie „Label: Fließtext" würde der
Text hinter dem Label zu einer eigenen Grid-Zelle und in die nächste Zeile rutschen.
Der Marker hängt daher absolut im Einzug, der Inhalt bleibt normaler Textfluss. */
.ticks { display: grid; gap: .85rem; }
.ticks li { position: relative; padding-left: 1.55rem; color: var(--ink-2); }
.ticks li::before {
content: ""; position: absolute; left: 0; top: .52em;
width: .7rem; height: .7rem;
border: 1.5px solid var(--ci-sage); border-radius: 50%;
}
.ticks strong { font-weight: 600; color: var(--ink); }
.section--dark .ticks li { color: var(--ink-2); }
.section--dark .ticks li::before { border-color: var(--ci-sage); }
/* Partnerlogos */
.logo-row {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: clamp(2rem, 1rem + 4vw, 5rem);
}
.logo-row span {
font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .04em;
color: var(--muted); opacity: .8; transition: opacity .3s var(--ease), color .3s var(--ease);
}
.logo-row span:hover { opacity: 1; color: var(--ink); }
/* Statement / großes Zitat */
/* Meeting 22.07.: Headlines nie zweifarbig — Statements komplett im CI-Blauton */
.statement { font-family: var(--font-display); font-weight: 300; text-transform: uppercase;
font-size: clamp(1.2rem, .95rem + 1.3vw, 1.9rem); line-height: 1.3; letter-spacing: .02em;
max-width: 24ch; color: var(--ci-navy); }
.statement em { color: inherit; font-style: normal; }
.section--dark .statement { color: var(--ci-navy); }
/* CTA-Band */
.cta-band { text-align: center; }
.cta-band .h2 { margin-bottom: 1.4rem; }
.cta-band .btn { margin-top: .6rem; }
/* Unendlichkeits-Textur (Longevity-Motiv) */
.infinity-band { position: relative; }
.infinity-band::before {
content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
background-image: url("../img/infinity.svg");
background-size: 88px auto;
}
/* ==========================================================================
Seiten-Kopf (Unterseiten ohne Full-Hero)
========================================================================== */
.page-head {
padding-top: clamp(9rem, 7rem + 6vw, 13rem);
padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
background: var(--ink); color: var(--on-dark);
/* Designer 23.07.: einheitliche Kopfhöhe auf allen Seiten — Referenz ist der
höchste Kopf (zweizeilige Headline + Lead); kürzere Inhalte sitzen unten bündig */
display: flex; align-items: flex-end;
min-height: clamp(24rem, 10rem + 43vw, 44.6rem);
}
.page-head > .container { width: 100%; }
.page-head .h1 { max-width: 18ch; margin-top: .6rem; }
.page-head .lead { color: var(--on-dark-mut); margin-top: 1.2rem; }
.breadcrumb { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-mut); }
.breadcrumb a:hover { color: var(--accent); }
/* ==========================================================================
Formular
========================================================================== */
.form { display: grid; gap: 1.3rem; }
.form__row { display: grid; gap: 1.3rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: .5rem; }
.field label { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .field select {
font: inherit; font-size: 1rem; color: var(--ink);
padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius);
background: #fff; transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(8,42,84,.20);
}
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: .8rem; }
.field--check input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; }
.field--check label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .92rem; color: var(--muted); }
.form__note { font-size: .85rem; color: var(--muted); }
/* ==========================================================================
„Nach oben" am Seitenende (Wunsch der IT, 28.07.)
Bewusst ein echter Anker auf den Seitenkopf statt eines schwebenden Knopfes:
funktioniert auch ohne JavaScript, verdeckt keine Inhalte und ist auf dem
Handy nicht im Weg. Das sanfte Scrollen kommt von der globalen Regel in
html{scroll-behavior:smooth} und ist bei reduzierter Bewegung abgeschaltet.
========================================================================== */
.nach-oben-band {
display: flex; justify-content: center;
padding-block: clamp(1.6rem, 1.2rem + 1.4vw, 2.8rem);
border-top: 1px solid var(--line);
}
.nach-oben {
display: inline-flex; align-items: center; gap: .6rem;
font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
color: var(--ink-2); border: 1px solid var(--line);
border-radius: 999px; padding: .75rem 1.5rem;
transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.nach-oben::before { content: "\2191"; font-size: .95rem; line-height: 1; }
.nach-oben:hover, .nach-oben:focus-visible {
color: var(--accent-deep); border-color: var(--accent-deep); background: var(--paper2);
}
/* ==========================================================================
Newsletter-Anmeldung (29.07.)
Der Versand laeuft ueber einen externen Anbieter (CleverReach). Eine rein
statische Website kann das doppelte Bestaetigungsverfahren, die Abmeldung und
den Einwilligungsnachweis nicht selbst leisten — sie hat keine Datenbank.
Das Formular sendet deshalb direkt an den Anbieter; von dort kommt die
Bestaetigungsmail. Der Hinweistext unter dem Feld ist Pflicht und darf nicht
entfallen: Er nennt die Bestaetigungsmail, die jederzeitige Abmeldung und
verlinkt die Datenschutzerklaerung.
========================================================================== */
.nl-form__zeile { display: flex; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; }
.nl-form input[type="email"] {
/* Mindestbreite, damit eine E-Mail-Adresse lesbar hineinpasst. Reicht der Platz
in der Fusszeilenspalte nicht, rutscht der Knopf darunter — besser als ein
Feld, in dem man die eigene Adresse nicht mehr sieht (gemessen: sonst 109 px). */
flex: 1; min-width: 11rem; font: inherit; font-size: .95rem;
background: transparent; border: 1px solid var(--line-dark);
color: var(--on-dark); padding: .6rem .8rem; border-radius: 3px;
}
.nl-form input[type="email"]::placeholder { color: var(--on-dark-mut); opacity: 1; }
.nl-form button { padding: .65rem 1.1rem; font-size: .72rem; }
.nl-hinweis { margin-top: .7rem; font-size: .78rem; line-height: 1.5; color: var(--on-dark-mut); }
.nl-hinweis a { text-decoration: underline; }
/* Helle Variante fuer den Inhaltsbereich (Info/Aktuelles) */
.nl-form--hell .nl-form__zeile { justify-content: center; gap: .6rem; margin-top: 1.4rem; }
.nl-form--hell input[type="email"] {
flex: 0 1 auto; min-width: min(320px, 80vw); font-size: 1rem;
background: #fff; border-color: var(--line); color: var(--ink);
padding: .8rem 1rem; border-radius: var(--radius);
}
.nl-form--hell input[type="email"]::placeholder { color: var(--muted); }
.nl-form--hell button { padding: .8rem 1.4rem; font-size: .78rem; }
.nl-form--hell .nl-hinweis { color: var(--ink-2); text-align: center; margin-top: 1rem; }
/* ==========================================================================
Footer
========================================================================== */
/* Kontrast-Korrektur 28.07.: --on-dark-mut (#C2C6B4) ist fuer das dunkle CI-Gruen
entworfen (dort 7,0:1). Auf dem helleren Designer-Grau des Footers kam es nur auf
3,26:1 — 24 kleine Textstellen (Navigation, Newsletter, Copyright, Social) lagen
damit unter dem lesbaren Grenzwert. Der gedaempfte Ton wird deshalb NUR hier
angehoben; Designer-Grau und alle uebrigen Seitenbereiche bleiben unveraendert. */
.site-footer { --on-dark-mut: #E9EBE0; background: var(--footer-grey); color: var(--on-dark); padding-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.site-footer a { color: var(--on-dark-mut); transition: color .25s var(--ease); }
.site-footer a:hover { color: var(--accent); }
.footer-grid {
display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 2.5rem;
padding-bottom: 3rem; border-bottom: 1px solid var(--line-dark);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col h4 {
font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-mut);
font-weight: 600; margin-bottom: 1.1rem;
}
.footer-col ul { display: grid; gap: .7rem; font-size: .95rem; }
.footer-intro p { color: var(--on-dark-mut); font-size: .95rem; margin-top: 1rem; max-width: 34ch; }
.footer-bottom {
display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
padding-block: 1.6rem; font-size: .82rem; color: var(--on-dark-mut);
}
.footer-bottom nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
/* ==========================================================================
Cookie-Banner (DSGVO Opt-in)
========================================================================== */
/* Sperrschicht hinter dem Cookie-Hinweis (Kundenwunsch 29.07.): Solange keine
Auswahl getroffen wurde, darf auf der Seite nichts anklickbar sein — auch das
Aktionsfenster darf sich nicht davor schieben. Die Schicht liegt UNTER dem
Hinweis (390) und ueber allem anderen, auch ueber dem Menue (100) und dem
Aktionsfenster (300). Gescrollt und gelesen werden darf weiterhin. */
.cookie-sperre {
position: fixed; inset: 0; z-index: 390;
background: rgba(43, 48, 36, .55);
opacity: 0; visibility: hidden;
transition: opacity .4s var(--ease), visibility .4s var(--ease);
}
.cookie-sperre[data-an="true"] { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .cookie-sperre { transition: none; } }
.cookie {
position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%) translateY(140%);
width: min(680px, calc(100vw - 2rem)); z-index: 400;
background: var(--ink); color: var(--on-dark);
border: 1px solid var(--line-dark); border-radius: var(--radius);
padding: 1.6rem 1.7rem; box-shadow: 0 20px 60px rgba(43,48,36,.45);
transition: transform .5s var(--ease);
}
.cookie[data-open="true"] { transform: translateX(-50%) translateY(0); }
.cookie h4 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; margin-bottom: .5rem; }
.cookie p { color: var(--on-dark-mut); font-size: .92rem; }
.cookie p a { color: var(--accent); text-decoration: underline; }
.cookie__options { display: grid; gap: .6rem; margin: 1.1rem 0; }
.cookie__opt { display: flex; align-items: center; gap: .7rem; font-size: .9rem; color: var(--on-dark-mut); }
.cookie__opt input { width: 1.1rem; height: 1.1rem; }
.cookie__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.cookie__actions .btn { font-size: .74rem; padding: .8rem 1.3rem; }
/* ==========================================================================
Schwebender Knopf zur Sommeraktion (Kundenwunsch 29.07.)
Wer das Aktionsfenster wegklickt, soll die Aktion trotzdem jederzeit wieder
aufrufen koennen. Der Knopf erscheint erst nach etwas Scrollen — damit er den
ersten Bildeindruck nicht stoert — und sitzt am rechten Rand auf halber Hoehe,
wo er weder die Kopfzeile noch den „Nach oben"-Knopf am Seitenende verdeckt.
Solange der Cookie-Hinweis offen ist, bleibt er ausgeblendet.
========================================================================== */
.aktion-tab {
position: fixed; right: 0; top: 50%; transform: translate(110%, -50%);
z-index: 120; display: inline-flex; align-items: center; gap: .5rem;
padding: .85rem 1.1rem; border: 0; cursor: pointer;
background: var(--accent); color: var(--ci-navy);
border-radius: var(--radius) 0 0 var(--radius);
font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
box-shadow: 0 10px 30px rgba(43, 48, 36, .28);
transition: transform .45s var(--ease), background-color .25s var(--ease);
}
.aktion-tab[data-sichtbar="true"] { transform: translate(0, -50%); }
.aktion-tab:hover, .aktion-tab:focus-visible { background: var(--ci-neon, var(--accent)); }
.aktion-tab::before { content: "\2726"; font-size: .95rem; line-height: 1; }
@media (max-width: 560px) {
.aktion-tab { padding: .7rem .85rem; font-size: .66rem; letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) { .aktion-tab { transition: none; } }
/* ==========================================================================
Gesperrtes Formular (Partner-Registrierung, Kundenwunsch 29.07.)
Die Felder bleiben sichtbar, damit erkennbar ist, was spaeter abgefragt wird —
sie sind aber ausgegraut und nicht ausfuellbar. Ein Hinweis darueber erklaert
warum; ohne ihn wirkt ein totes Formular wie ein Fehler.
========================================================================== */
/* fieldset traegt in Browsern eigene Raender und Abstaende — hier zuruecksetzen,
damit die Sperre am Layout des Formulars nichts aendert. */
.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form--gesperrt { opacity: .55; filter: grayscale(.35); }
.form--gesperrt input, .form--gesperrt select, .form--gesperrt textarea, .form--gesperrt button {
cursor: not-allowed;
}
.form-sperrhinweis {
border: 1px solid var(--line); border-left: 3px solid var(--accent-deep);
background: var(--paper2); border-radius: var(--radius);
padding: 1rem 1.2rem; margin-top: 1rem;
font-size: .92rem; color: var(--ink-2);
}
.form-sperrhinweis strong { color: var(--ink); }
/* ==========================================================================
Scroll-Reveal (dezent, orchestriert)
========================================================================== */
[data-reveal] {
opacity: 0; transform: translateY(24px);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
transition-delay: var(--reveal-delay, 0ms);
will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
.hero__scroll span { animation: none; }
* { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}
/* ---------- Utility ------------------------------------------------------- */
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; }
.stack > * + * { margin-top: 1.4rem; }
.maxw-narrow { max-width: 60ch; }
.placeholder-note {
display: inline-block; font-size: .78rem; letter-spacing: .04em;
color: var(--ink-2); background: rgba(233,249,6,.16);
border: 1px dashed var(--ci-sage); border-radius: var(--radius);
padding: .15rem .55rem; margin-left: .4rem; vertical-align: middle;
}
/* ==========================================================================
v2 — Ergänzungen (Entwurf 12.07.26): Goldspirale, warme Sektionsfarbe
========================================================================== */
:root {
--paper-gold: #E9E1D0; --gold-line: var(--ci-gold);
/* Bänder jetzt auf offizielle Corporate Colors (18.07.) gemappt */
/* Meeting 22.07.: grüne Flächen aufgehellt (Lesbarkeit); zartes Gelb für Referenzband */
--band-lime: var(--ci-neon); --band-blue: #D2F0EC; --band-mint: #C3D5CA; --band-lime-soft: #F7FAD2; --footer-grey: #67666B;
}
.section--lime { background: var(--band-lime); }
.section--blue { background: var(--band-blue); }
.section--mint { background: var(--band-mint); }
.section--lime-soft { background: var(--band-lime-soft); }
.section--gold { background: var(--paper-gold); }
/* Kontrast-Korrektur 25.07.: #8a7f5c auf dem Goldpapier ergab nur 3,06:1 —
der dunklere CI-Goldton bleibt in der Farbfamilie und erreicht 4,8:1. */
.section--gold .eyebrow { color: #6E6244; }
.section--gold .eyebrow::before { background: var(--gold-line); }
/* Goldene-Schnitt-Spirale als Hero-Motiv (dezent) */
.hero__spiral {
position: absolute; right: -8%; top: 50%; transform: translateY(-50%);
width: min(80vh, 64vw); aspect-ratio: 1; z-index: -1; opacity: .5; pointer-events: none;
}
@media (max-width: 820px) { .hero__spiral { right: -28%; opacity: .3; } }
/* „Longevity-Konzept" Laufschrift-Label (dezent, statt echtes Marquee) */
.konzept-label {
font-family: var(--font-display); font-weight: 400;
font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem); letter-spacing: .01em;
color: var(--accent-deep); text-align: center;
}
/* Werte */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
@media (max-width: 820px) { .values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .values { grid-template-columns: 1fr; } }
.value { border-top: 1px solid var(--line); padding-top: 1rem; }
.value h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; color: var(--accent-deep); margin-bottom: .4rem; }
.value p { color: var(--muted); font-size: .95rem; }
/* Team */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
@media (max-width: 820px) { .team { grid-template-columns: 1fr 1fr; } }
.team figure { margin: 0; }
.team img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); filter: grayscale(1); background: var(--paper-2); }
.team figcaption { margin-top: .7rem; }
.team .name { font-weight: 600; letter-spacing: .02em; }
.team .role { color: var(--muted); font-size: .9rem; }
/* Meilensteine */
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 720px) { .timeline { grid-template-columns: 1fr; } }
/* Kontrast-Korrektur 25.07.: Diese Bausteine liegen in .section--dark, die seit der
NO-BLACK-Umstellung HELL ist (CI-Mint). Farben daher auf die Hell-Varianten:
Text im dunklen Oliv, Zahlen im CI-Marineblau (Neongelb auf Hell ist unlesbar). */
.milestone { border-top: 1px solid var(--line); padding-top: 1rem; }
.milestone .year { font-family: var(--font-display); font-size: clamp(1.8rem, 1.2rem + 1.5vw, 2.4rem); color: var(--accent-deep); }
.milestone p { color: var(--ink-2); margin-top: .3rem; font-size: .95rem; }
/* ==========================================================================
Zeitstrahl der Meilensteine — einfaches Raster (28.07., dritte Fassung)
Vorgeschichte: Zuerst ein Dreierraster, dann eine seitlich blaetterbare
Strecke mit Pfeilen, Ziehen und Fortschrittsbalken. Der Kunde konnte sie
zweimal nicht bedienen. Konsequenz: KEINE Bedienung mehr. Alle elf Stationen
stehen sichtbar untereinander — kein Scrollen, keine Knoepfe, kein
JavaScript, nichts, das ausfallen kann. Die ganze Geschichte auf einen Blick
traegt die Aussage „mehr als zwanzig Jahre" ohnehin besser als eine
Darstellung, die acht von elf Stationen versteckt.
Die alten Bausteine (.zeitstrahl__spur, __pfeil, __buehne, __steuerung) sind
entfernt; die zugehoerige Bedienung in main.js ebenfalls.
========================================================================== */
.zeitstrahl-raster {
list-style: none; margin: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem) 0 0; padding: 0;
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(1.4rem, 1.1rem + 1.2vw, 2.4rem);
}
@media (max-width: 900px) { .zeitstrahl-raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .zeitstrahl-raster { grid-template-columns: 1fr; } }
/* ==========================================================================
ALT — seitlich blaetterbare Strecke, seit 28.07. nicht mehr im Einsatz.
Die Regeln bleiben vorerst stehen, falls die Darstellung spaeter doch
wieder gewuenscht wird; sie greifen ohne die zugehoerigen Klassen nicht.
========================================================================== */
.zeitstrahl { margin-top: clamp(1.4rem, 1rem + 1.4vw, 2.4rem); }
/* Buehne = Rahmen um die Strecke; traegt den weichen Auslauf am rechten Rand, der
ohne Worte zeigt, dass es weitergeht. Er verschwindet am Ende der Strecke. */
.zeitstrahl__buehne { position: relative; }
.zeitstrahl__buehne::after {
content: ""; position: absolute; inset-block: 0; right: 0;
width: clamp(2.5rem, 7vw, 6rem); pointer-events: none;
background: linear-gradient(90deg, rgba(195, 213, 202, 0), var(--band-mint));
opacity: 1; transition: opacity .3s var(--ease);
}
.zeitstrahl__buehne.ist-am-ende::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .zeitstrahl__buehne::after { transition: none; } }
/* Bedienzeile unter der Strecke: Pfeile und Fortschritt als eine Einheit */
.zeitstrahl__steuerung { display: flex; align-items: center; gap: .7rem; margin-top: 1.2rem; }
.zeitstrahl__steuerung .zeitstrahl__fortschritt { flex: 1; margin-left: .6rem; }
.zeitstrahl__pfeil {
width: 2.75rem; height: 2.75rem; border-radius: 999px;
border: 1px solid var(--line); background: transparent; color: var(--ink-2);
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.05rem; line-height: 1; cursor: pointer;
transition: color .25s var(--ease), border-color .25s var(--ease);
}
.zeitstrahl__pfeil:hover:not(:disabled), .zeitstrahl__pfeil:focus-visible { color: var(--accent-deep); border-color: var(--accent-deep); }
.zeitstrahl__pfeil:disabled { opacity: .3; cursor: default; }
/* Die Strecke laeuft ueber die volle Breite, beginnt aber buendig am Textrand
und laeuft nach rechts aus dem Bild — das zeigt ohne Worte, dass es weitergeht. */
.zeitstrahl__spur {
display: flex; gap: clamp(1.2rem, 1rem + 1vw, 2rem);
list-style: none; margin: 0;
padding-block: 0 1.5rem;
/* Buendig zum Textrand: NICHT mit 100vw rechnen — das schliesst die Bildlaufleiste
mit ein, der Textrand aber nicht, wodurch die Strecke auf breiten Bildschirmen
um die Leistenbreite verrutscht (gemessen 8 px bei 1600 px Fensterbreite).
100% loest gegen die tatsaechliche Inhaltsbreite auf und stimmt dadurch exakt. */
padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline-start: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
scrollbar-width: none; -ms-overflow-style: none;
/* Mit der Maus laesst sich die Strecke ziehen — der Greifhand-Zeiger sagt das
ohne Beschriftung. Am Handy und am Trackpad wischt man wie gewohnt. */
cursor: grab;
}
.zeitstrahl__spur.zieht { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.zeitstrahl__spur::-webkit-scrollbar { display: none; }
.zeitstrahl__spur > .milestone { flex: 0 0 clamp(14rem, 11rem + 12vw, 19rem); scroll-snap-align: start; }
.zeitstrahl__fortschritt { height: 2px; background: var(--line); position: relative; }
.zeitstrahl__fortschritt span {
position: absolute; inset-block: 0; left: 0; width: 0;
background: var(--accent-deep); transition: width .12s linear;
}
@media (prefers-reduced-motion: reduce) { .zeitstrahl__fortschritt span { transition: none; } }
/* Stat-Band (Platzhalter für Zahlen-Slider) */
.stat-band { background: var(--accent); color: var(--ci-navy); text-align: center; }
.stat-band .num { font-family: var(--font-display); font-weight: 400; font-size: clamp(3rem, 2rem + 7vw, 6.5rem); line-height: .95; }
.stat-band .label { letter-spacing: .22em; text-transform: uppercase; font-weight: 600; font-size: .82rem; margin-top: .4rem; }
/* Haut-Diagramm */
.diagram { border-radius: var(--radius); overflow: hidden; background: #eef3f6; }
.diagram img { width: 100%; height: auto; display: block; }
/* FAQ — Antwort per Klick (barrierefrei; Mouse-over-Wunsch des Designers via :hover ergänzt) */
.faq details { border-top: 1px solid var(--line); padding: 1.05rem 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-deep); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details > p { color: var(--muted); margin-top: .7rem; max-width: 72ch; }
@media (hover: hover) { .faq details:hover > p { } }
/* Produkt-Detailzeile */
.product { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); border-top: 1px solid var(--line); }
.product:first-of-type { border-top: none; }
/* Kundenwunsch 22.07.: Produktbilder neben den Aufzählungen quadratisch,
angelehnt an die Kacheln unter „Drei Anwendungen" */
.product .split__media { aspect-ratio: 1 / 1; }
/* Body-Motiv wie in der Kachel dämpfen — das reine Mint wirkte zu grell */
.product .split__media img[src*="tile-body"] { filter: saturate(.7) brightness(.94); }
.spec { display: grid; gap: .55rem; margin-top: 1.1rem; }
.spec li { display: grid; grid-template-columns: max-content 1fr; gap: .8rem; font-size: .95rem; }
.spec .k { color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .74rem; padding-top: .15rem; }
/* Prozess-Schritte (nummeriert) */
.steps { display: grid; gap: 1.2rem; counter-reset: step; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-display); color: var(--accent-deep); font-size: 1.3rem; }
.step h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; margin-bottom: .3rem; }
.step p { color: var(--ink-2); font-size: .95rem; }
/* Zwei-Spalten-Textblock */
.split-text { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
@media (max-width: 760px) { .split-text { grid-template-columns: 1fr; gap: 1.2rem; } }
.split-text .label { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); }
.split-text .label.accent { color: var(--accent-deep); }
/* v2.1 — Audit-Korrekturen (Erfahren-Sie-mehr-Seite, Stat-Panel) */
/* Schrift auf dem Neongelb-Band: Layout zeigt Weiß bzw. helles Graublau (Kontrast
unter 1,6:1 — am Bildschirm unlesbar). Nach Kundenauftrag „Lesbarkeit" stattdessen
CI-Marineblau auf CI-Neongelb (12,6:1). Abweichung im Fragenkatalog dokumentiert. */
.stat-panel {
background: var(--accent); color: var(--ci-navy); border-radius: var(--radius);
padding: clamp(2.5rem, 2rem + 3vw, 4rem) 2rem;
display: flex; flex-direction: column; justify-content: center; text-align: center; gap: .4rem; height: 100%;
}
.stat-panel .num { font-family: var(--font-display); font-weight: 400; font-size: clamp(3rem, 2rem + 5vw, 5.5rem); line-height: .95; }
.stat-panel .label { letter-spacing: .22em; text-transform: uppercase; font-weight: 600; font-size: .8rem; }
/* Runde 24.07.: vier Kennzahlen im Panel — Countup plus gestaffelt wachsende Akzentlinien */
.stat-panel--grid { gap: 1.4rem; }
.stat-panel--grid .stat-titel {
letter-spacing: .26em; text-transform: uppercase; font-weight: 600; font-size: .74rem;
}
.stat-zellen { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.2rem; }
.stat-zelle .num { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.9rem); }
.stat-zelle .label { letter-spacing: .14em; font-size: .68rem; margin-top: .4rem; }
.stat-balken {
display: block; height: 3px; width: 0; border-radius: 2px;
background: var(--ci-navy); opacity: .8; margin: .75rem auto 0;
transition: width 1.1s var(--ease);
}
.stat-panel--grid.is-visible .stat-zelle:nth-child(1) .stat-balken { width: 70%; transition-delay: .25s; }
.stat-panel--grid.is-visible .stat-zelle:nth-child(2) .stat-balken { width: 70%; transition-delay: .45s; }
.stat-panel--grid.is-visible .stat-zelle:nth-child(3) .stat-balken { width: 70%; transition-delay: .65s; }
.stat-panel--grid.is-visible .stat-zelle:nth-child(4) .stat-balken { width: 70%; transition-delay: .85s; }
@media (prefers-reduced-motion: reduce) {
.stat-balken { transition: none; width: 70%; }
}
@media (max-width: 480px) { .stat-zellen { grid-template-columns: 1fr; } }
.stat-panel--grid .stat-stand { font-size: .72rem; opacity: .65; }
/* Sommeraktion-Hinweis (Kundenwunsch 24.07.) — ruhiges Modal im CI:
Papier-Karte mit Goldlinie, sanftes Einblenden, Overlay im Marken-Olivton */
.aktion-overlay {
position: fixed; inset: 0; z-index: 300;
display: flex; align-items: center; justify-content: center;
padding: 1.2rem;
background: rgba(49, 55, 42, .48);
opacity: 0; transition: opacity .35s var(--ease);
}
/* WICHTIG (Fix 24.07.): display:flex würde das hidden-Attribut übersteuern —
das unsichtbare Overlay fing dann alle Klicks der Seite ab (Burger tot).
Versteckt heißt wirklich weg; solange nicht offen, keine Klick-Annahme. */
.aktion-overlay[hidden] { display: none; }
.aktion-overlay:not(.is-offen) { pointer-events: none; }
.aktion-overlay.is-offen { opacity: 1; }
.aktion-karte {
position: relative;
max-width: 34rem; width: 100%;
background: var(--paper);
border-top: 3px solid var(--ci-gold);
border-radius: var(--radius);
box-shadow: 0 24px 70px rgba(49, 55, 42, .35);
padding: clamp(1.8rem, 1.4rem + 2vw, 2.8rem);
text-align: center;
transform: translateY(14px); transition: transform .35s var(--ease);
}
.aktion-overlay.is-offen .aktion-karte { transform: translateY(0); }
.aktion-karte .eyebrow { justify-content: center; color: var(--ci-gold); }
.aktion-karte .eyebrow::before { background: var(--ci-gold); }
.aktion-karte h2 { color: var(--ci-navy); max-width: 26ch; margin-inline: auto; }
.aktion-frist {
margin-top: .9rem; font-size: .86rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--muted);
}
.aktion-zu {
position: absolute; top: .6rem; right: .8rem;
background: none; border: 0; font-size: 1.7rem; line-height: 1;
color: var(--muted); padding: .3rem;
}
.aktion-zu:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
.aktion-overlay, .aktion-karte { transition: none; }
}
/* Runde 24.07.: Downloadbereich Partnerprogramm (Karten; Dateien folgen) */
.dl-karte {
display: flex; gap: 1rem; align-items: flex-start;
border: 1px solid var(--line); border-radius: var(--radius);
padding: 1.2rem 1.3rem; background: var(--paper);
}
.dl-karte svg { flex: none; margin-top: .15rem; }
.dl-karte h3 { font-size: 1rem; }
.dl-karte p { font-size: .88rem; color: var(--muted); margin-top: .3rem; }
.section--tint { background: var(--band-mint); }
.band-links { display: grid; gap: .9rem; justify-items: center; }
.band-links a {
font-family: var(--font-mark); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
font-size: clamp(1.1rem, .9rem + 1vw, 1.6rem); color: var(--ink-2);
transition: color .3s var(--ease), letter-spacing .3s var(--ease);
}
.band-links a:hover { color: var(--accent-deep); letter-spacing: .12em; }
.dual-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.dual-links .sep { color: var(--muted-2); }
/* ==========================================================================
Standorte (Store-Locator-Liste, Daten: BEWEI Standorte 04/2026)
========================================================================== */
.loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem 2rem; }
@media (max-width: 1020px) { .loc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .loc-grid { grid-template-columns: 1fr; } }
.loc { border-top: 1px solid var(--line); padding-top: 1.1rem; }
.loc h3 {
font-family: var(--font-mark); font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; font-size: .95rem; line-height: 1.4;
}
.loc__tags { display: block; color: var(--accent-deep); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; margin-top: .3rem; }
.loc p { font-size: .9rem; color: var(--muted); margin-top: .45rem; line-height: 1.55; }
.loc .loc__biz { color: var(--ink-2); }
.loc__contact a { color: inherit; }
.loc__contact a:hover { color: var(--accent-deep); }
.loc .maps {
display: inline-block; margin-top: .7rem;
font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
border-bottom: 1px solid var(--line); padding-bottom: .2rem;
transition: border-color .3s var(--ease), color .3s var(--ease);
}
.loc .maps:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
.region + .region { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
/* Anker-Sprünge: Ziel nicht unter dem fixierten Header verstecken
(gilt für Standort-Regionen wie für die Produktanker der Landing) */
main [id] { scroll-margin-top: 5.5rem; }
/* ==========================================================================
Landing-Key-Visual: Foto aus Entwurf S.1 mit Gelbstich + Ken-Burns
========================================================================== */
.hero__media .hero__photo {
width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%;
animation: heroKenBurns 26s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes heroKenBurns {
from { transform: scale(1.08) translate3d(-1.6%, -1%, 0); }
to { transform: scale(1.16) translate3d(1.6%, 1.2%, 0); }
}
/* Gelbstich wie im Entwurf: Akzent-Schimmer über der Schulterpartie */
.hero__tint {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(58% 50% at 50% 58%, rgba(233,249,6,.5), rgba(233,249,6,0) 72%),
linear-gradient(180deg, rgba(233,249,6,.10), rgba(233,249,6,0) 55%);
mix-blend-mode: hard-light;
}
@media (prefers-reduced-motion: reduce) {
.hero__media .hero__photo { animation: none; }
}
/* ==========================================================================
Film-Sektion (Trailer, Click-to-play)
========================================================================== */
.film-frame {
position: relative; max-width: 960px; margin-inline: auto;
border-radius: var(--radius); overflow: hidden; background: #252B1C;
box-shadow: 0 24px 70px rgba(43,48,36,.45);
}
.film-frame video { display: block; width: 100%; height: auto; }
/* Video-Seitenkopf (Designer 15.07.: Film als Header im B2C-Bereich Über BEWEI) */
.page-head--video { position: relative; overflow: hidden; }
.page-head--video .ph-video {
position: absolute; inset: 0; z-index: 0;
}
.page-head--video .ph-video video { width: 100%; height: 100%; object-fit: cover; }
.page-head--video .ph-video::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(43,48,36,.28), rgba(43,48,36,.55));
}
.page-head--video .container { position: relative; z-index: 1; }
/* ==========================================================================
Meeting 19.07. — neue Komponenten
========================================================================== */
/* Goldener Schnitt als Haarlinien-Overlay (Meeting 22.07.: Startseite + ausgewählte Köpfe).
Designer-Vorgabe 22.07. abends: Die Zeichnung läuft IMMER quer über die volle
Bildbreite — nie hochkant, nie verzerrt. Ist der Rahmen flacher als die Grafik (2:1),
zeigt er einen mittigen Ausschnitt (oben/unten beschnitten); ist er höher, bleibt Luft.
Umsetzung: volle Breite + auto-Höhe statt object-fit — so bestimmt allein die
Container-Breite die Größe, das Seitenverhältnis der Zeichnung bleibt exakt erhalten. */
.gs-overlay {
position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 100%; height: auto;
pointer-events: none; color: #fff; opacity: .85;
}
/* Auf Foto-Köpfen: Overlay über dem Abdunkelungs-Scrim. Achtung Spezifität —
„.ph-media img" (height:100%, cover) würde die Quer-Geometrie sonst übersteuern,
deshalb hier width/height explizit erneut setzen (bekannte Falle vom 22.07.). */
.page-head--photo .ph-media .gs-overlay,
.page-head--photo .gs-overlay {
z-index: 1;
width: 100%; height: auto;
top: 50%; transform: translateY(-50%);
}
/* Foto-Seitenkopf: Headerbilder aus der Grundlagen-PDF (Entwurf 2, ab S. 4) */
.page-head--photo { position: relative; overflow: hidden; }
.page-head--photo .ph-media { position: absolute; inset: 0; z-index: 0; }
.page-head--photo .ph-media img { width: 100%; height: 100%; object-fit: cover; }
.page-head--photo .ph-media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(43,48,36,.38), rgba(43,48,36,.62));
}
.page-head--photo .container { position: relative; z-index: 1; }
/* Graues Logo-Laufband — Meeting 22.07.: Titel außerhalb des Balkens, Logos
transparent/einheitlich grau, größer, Laufrichtung links -> rechts */
.logo-marquee {
background: var(--ci-grey);
padding-block: clamp(1.9rem, 1.4rem + 2vw, 3.2rem);
overflow: hidden;
}
.logo-marquee__head {
text-align: center; font-size: .74rem; letter-spacing: .26em; text-transform: uppercase;
font-weight: 600; color: var(--muted); padding-block: 1.2rem .9rem;
}
.logo-marquee__track {
display: flex; align-items: center; width: max-content;
gap: clamp(4rem, 2.5rem + 6vw, 8rem); padding-right: clamp(4rem, 2.5rem + 6vw, 8rem);
animation: marquee 34s linear infinite;
}
.logo-marquee__track img {
/* Designer 24.07.: Logos „deutlich größer" (vorher 3–4.6rem) */
height: clamp(4rem, 2.9rem + 3.6vw, 6.4rem); width: auto; opacity: .95;
}
@keyframes marquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
.logo-marquee__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
}
/* Passepartout: Fotos mit zuordenbarer CI-Farbe hinterlegt (dezente Tints, New-Luxus) */
.media-mat { padding: clamp(1rem, .8rem + 1.6vw, 2.1rem); }
.media-mat--gold { background: #EAE2D1; } /* CI-Gold, aufgehellt */
.media-mat--grey { background: var(--ci-grey); }
.media-mat--navy { background: #DEE4EC; } /* CI-Marineblau, aufgehellt */
.media-mat--sage { background: #DFE9E4; } /* CI-Salbeigrün, aufgehellt */
/* Film im Originalformat (Designer 19.07.: Trailer ist 1200x554 = 2,17:1 und wurde
vom 5:4-Rahmen gestaucht bzw. seitlich beschnitten). */
.split__media--film { aspect-ratio: 1200 / 554; background: var(--ink); border-radius: var(--radius); }
.split__media--film video { object-fit: contain; }
/* Beschluss 20.07.: Trailer läuft auf „Über BEWEI" über die volle Seitenbreite */
.film-full { background: var(--ink); line-height: 0; }
.film-full video { width: 100%; height: auto; display: block; }
/* Bildwechsler (Exzellenz-Orte; seit 22.07. abends auch die Produkt-Slides
Body/Face/Hands: Stimmungsbild -> Gerät im Einsatz -> Behandlungsdokumentation) */
.split__media--fader { position: relative; }
.split__media--fader img {
position: absolute; inset: 0; opacity: 0;
transition: opacity 1.2s var(--ease);
}
.split__media--fader img.is-on { opacity: 1; }
/* Bildergalerie (News: Making-of Flagship Store, 22.07.) — Inhalts-Grid bewusst ohne reveal */
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.7rem, .5rem + 1vw, 1.2rem); }
.photo-grid img {
width: 100%; height: 100%; object-fit: cover;
aspect-ratio: 3 / 4; border-radius: var(--radius); display: block;
}
@media (max-width: 760px) { .photo-grid { grid-template-columns: 1fr 1fr; } }
/* Marineblau-Band (CI) — klar abgesetzter Partner-Einstieg */
.section--navy { background: var(--ci-navy); color: var(--on-dark); }
.section--navy .eyebrow { color: rgba(245, 244, 239, .72); }
.section--navy .eyebrow::before { background: var(--accent); }
.section--navy .lead { color: rgba(245, 244, 239, .86); }
/* Spam-Schutz Kontaktformular (23.07.): Honeypot unsichtbar (nicht display:none,
damit simple Bots es weiterhin „sehen" und ausfüllen), Fehlertext zur Rechenfrage */
.hp-feld {
position: absolute; left: -9999px; top: auto;
width: 1px; height: 1px; overflow: hidden;
}
.captcha-fehler { margin-top: .5rem; font-size: .85rem; color: #9C3D2E; }
/* Trennlinie zwischen Abschnitten + kompakter Anschluss-Abschnitt */
.section--rule { border-top: 1px solid var(--line); }
.section--flush-top { padding-top: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); }
/* Salbei-Band: Schrift auf dunklerem CI-Grün hell genug halten */
.section--mint .lead, .section--tint .lead { color: var(--ink); }