/* ==========================================================================
Phönix Koordinatenmesstechnik e.K. — Ghost Theme
--------------------------------------------------------------------------
Gestaltungsprinzipien
· Gemischte Schreibweise durchgehend — keine Versalien, keine Sperrung
· Große, eng laufende Überschriften; ruhiger Fließtext in 17 px
· Weiche Radien, Pillen-Buttons, Flächen statt Rahmenlinien
· Viel Weißraum, wenige Trennlinien
========================================================================== */
/* --------------------------------------------------------------- 1. Tokens */
:root {
/* Hausfarben (identisch zu den Elementor Global Colors der Altseite) */
--e-global-color-primary: #F2F2F2;
--e-global-color-secondary: #033E8C;
--brand: var(--e-global-color-secondary);
--brand-lift: #0A5FCC; /* heller für Links auf Weiß */
--brand-soft: #E8EFF9;
/* Flächen und Text — Light */
--bg: #FFFFFF;
--bg-alt: var(--e-global-color-primary);
--bg-card: #FFFFFF;
--bg-dark: #0B0B0D;
--bg-tint: rgba(0, 0, 0, .045);
--ink: #1A1A1C;
--ink-2: #6B6B73;
--ink-3: #8E8E96;
--on-dark: #F5F5F7;
--on-dark-2: #A8A8B0;
--link: var(--brand-lift);
--hairline: rgba(0, 0, 0, .10);
--shadow-card: 0 2px 8px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.06);
--shadow-lift: 0 4px 12px rgba(0,0,0,.06), 0 24px 56px rgba(0,0,0,.11);
/* Schrift — SF Pro auf Apple-Geräten, sonst passende Systemgrotesk */
--ff: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
"Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue",
Arial, sans-serif;
--fs-hero: clamp(2.625rem, 6.2vw, 5.25rem);
--fs-h1: clamp(2.25rem, 5vw, 4rem);
--fs-h2: clamp(1.875rem, 3.9vw, 3.25rem);
--fs-h3: clamp(1.3125rem, 1.9vw, 1.625rem);
--fs-lead: clamp(1.125rem, 1.65vw, 1.4375rem);
--fs-body: 1.0625rem;
--fs-sm: 0.9375rem;
--fs-cap: 0.8125rem;
/* Radien */
--r-sm: 10px;
--r-card: 18px;
--r-lg: 26px;
--r-pill: 980px;
/* Maße */
--pad: clamp(1.25rem, 4.5vw, 2.5rem);
--w-wide: 1360px;
--w-content: 1040px;
--w-text: 43rem;
--sec-y: clamp(4.5rem, 9vw, 8.5rem);
--ease: cubic-bezier(.32, .72, 0, 1);
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #000000;
--bg-alt: #0C0C0E;
--bg-card: #151517;
--bg-dark: #0C0C0E;
--bg-tint: rgba(255, 255, 255, .07);
--ink: #F5F5F7;
--ink-2: #A8A8B0;
--ink-3: #86868B;
--link: #4E9BFF;
--brand-soft: #10233F;
--hairline: rgba(255, 255, 255, .14);
--shadow-card: 0 2px 8px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.4);
--shadow-lift: 0 4px 12px rgba(0,0,0,.5), 0 24px 56px rgba(0,0,0,.55);
}
}
:root[data-theme="dark"] {
--bg: #000000; --bg-alt: #0C0C0E; --bg-card: #151517; --bg-dark: #0C0C0E;
--bg-tint: rgba(255,255,255,.07);
--ink: #F5F5F7; --ink-2: #A8A8B0; --ink-3: #86868B;
--link: #4E9BFF; --brand-soft: #10233F; --hairline: rgba(255,255,255,.14);
--shadow-card: 0 2px 8px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.4);
--shadow-lift: 0 4px 12px rgba(0,0,0,.5), 0 24px 56px rgba(0,0,0,.55);
}
:root[data-theme="light"] {
--bg: #FFFFFF; --bg-alt: var(--e-global-color-primary); --bg-card: #FFFFFF;
--bg-dark: #0B0B0D; --bg-tint: rgba(0,0,0,.045);
--ink: #1A1A1C; --ink-2: #6B6B73; --ink-3: #8E8E96;
--link: var(--brand-lift); --brand-soft: #E8EFF9; --hairline: rgba(0,0,0,.10);
--shadow-card: 0 2px 8px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.06);
--shadow-lift: 0 4px 12px rgba(0,0,0,.06), 0 24px 56px rgba(0,0,0,.11);
}
/* ---------------------------------------------------------------- 2. Basis */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.pk {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--ff);
font-size: var(--fs-body);
line-height: 1.53;
letter-spacing: -0.011em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Notnagel gegen seitliches Wegziehen auf dem Handy. „hidden“ lässt sich
auf iOS trotzdem noch anfassen, „clip“ nicht — ältere Safari-Versionen
ignorieren die zweite Zeile und behalten „hidden“. */
overflow-x: hidden;
overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4 {
margin: 0;
font-weight: 600;
line-height: 1.07;
letter-spacing: -0.028em;
text-wrap: balance;
/* Deutsche Komposita — „Berufshaftpflichtversicherung“ — sind auf dem
Handy breiter als die Textspalte und würden die Seite seitlich
aufziehen. Greift nur, wenn das Wort sonst nicht passt. */
hyphens: auto;
overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.022em; line-height: 1.2; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible {
outline: 3px solid var(--link);
outline-offset: 3px;
border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
transition-duration: .001ms !important;
}
}
/* --------------------------------------------------------------- 3. Layout */
.wrap { width: 100%; max-width: var(--w-wide); margin-inline: auto; padding-inline: var(--pad); }
.wrap--content { max-width: var(--w-content); }
.section { padding-block: var(--sec-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--bg-dark); color: var(--on-dark); }
.section--dark { --ink: var(--on-dark); --ink-2: var(--on-dark-2); --link: #6BAAFF;
--hairline: rgba(255,255,255,.14); --bg-card: #17171A;
--bg-tint: rgba(255,255,255,.08); }
/* Band in der Hausfarbe. Sparsam einsetzen — es ist das lauteste Mittel im
Baukasten und verliert sofort an Wirkung, wenn es zweimal auf einer Seite
vorkommt. Gedacht für genau eine Aussage pro Seite, die hängen bleiben
soll. Der Kicker darf hier nicht blau bleiben, er stünde sonst auf Blau. */
.section--brand { background: var(--brand); color: #fff; }
.section--brand { --ink: #fff; --ink-2: rgba(255,255,255,.82); --ink-3: rgba(255,255,255,.66);
--link: #fff; --hairline: rgba(255,255,255,.22);
--bg-card: rgba(255,255,255,.10); --bg-tint: rgba(255,255,255,.13);
--shadow-card: none; }
.section--brand .kicker { color: rgba(255,255,255,.72); }
.section--brand .checks svg { color: #fff; }
.lead {
max-width: var(--w-text);
font-size: var(--fs-lead);
line-height: 1.42;
letter-spacing: -0.017em;
color: var(--ink-2);
}
.center { text-align: center; margin-inline: auto; }
/* Sektionskopf */
.head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.head--center { margin-inline: auto; text-align: center; }
.head .lead { margin-top: 1.125rem; }
.head--center .lead { margin-inline: auto; }
/* Kleine Auszeichnung über der Überschrift — bewusst gemischt geschrieben */
.kicker {
margin-bottom: .75rem;
font-size: var(--fs-sm);
font-weight: 600;
letter-spacing: -0.008em;
color: var(--brand-lift);
}
.section--dark .kicker { color: #6BAAFF; }
/* -------------------------------------------------------------- 4. Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .4em;
padding: .8rem 1.5rem;
border: 0;
border-radius: var(--r-pill);
font-family: inherit;
font-size: var(--fs-body);
font-weight: 500;
letter-spacing: -0.012em;
line-height: 1.2;
cursor: pointer;
transition: background-color .25s var(--ease), color .25s var(--ease),
transform .25s var(--ease), opacity .25s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-lift); }
.btn--tinted { background: var(--bg-tint); color: var(--ink); }
.btn--tinted:hover { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.btn--glass {
background: rgba(255,255,255,.16);
color: #fff;
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
}
.btn--glass:hover { background: rgba(255,255,255,.26); }
.btn--white { background: #fff; color: #111; }
.btn--white:hover { background: #e9e9ec; }
.btn--lg { padding: .95rem 1.9rem; font-size: 1.125rem; }
/* Textlink mit Chevron */
.arrow {
display: inline-flex;
align-items: center;
gap: .28em;
color: var(--link);
font-size: var(--fs-body);
font-weight: 500;
letter-spacing: -0.012em;
}
.arrow::after {
content: "›";
font-size: 1.25em;
line-height: 0;
transform: translateY(-.045em);
transition: transform .25s var(--ease);
}
.arrow:hover::after { transform: translate(3px, -.045em); }
/* --------------------------------------------------------------- 5. Header */
.nav {
position: sticky;
top: 0;
z-index: 100;
background: color-mix(in srgb, var(--bg) 78%, transparent);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid transparent;
transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.nav[data-scrolled="true"] { border-bottom-color: var(--hairline); }
.nav__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
height: 60px;
}
@media (min-width: 640px) { .nav__bar { height: 82px; } }
/* Links die Wortmarke, auf Markenseiten dahinter die Partnerschaft
„Phönix × Aberlink“ */
.nav__lockup { display: flex; align-items: center; gap: clamp(.55rem, 2.4vw, .85rem); flex: none; }
.nav__brand { display: flex; align-items: center; flex: none; }
/* Die Wortmarke ist ein breites Rechteck (160 × 32) und wird deshalb über
die Breite bemessen. Sie liegt einfarbig vor, currentColor genügt: hier
das Hausblau, im Dunkelmodus Weiß. Das vollständige Logo mit seinen zwei
Farben steht in der Fußzeile, siehe .foot__logo. */
.nav__logo { width: 118px; height: auto; color: var(--brand); }
@media (min-width: 640px) { .nav__logo { width: 138px; } }
:root[data-theme="dark"] .nav__logo { color: #fff; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .nav__logo { color: #fff; }
}
/* Verbindungszeichen der Partnerschaft. Ein echtes Malzeichen, kein
kleines x — das x einer Systemschrift steht auf der Grundlinie und sitzt
neben zwei Logos sichtbar zu tief. */
.nav__co {
font-size: clamp(.75rem, 2.6vw, .875rem);
font-weight: 400;
line-height: 1;
color: var(--ink-3);
}
.nav__comark { opacity: .92; transition: opacity .2s var(--ease); }
.nav__comark:hover { opacity: 1; }
/* Bei Aberlink ohne den Untertitel „Innovative Metrology“ — der wäre auf
dieser Höhe nur noch ein grauer Strich. Die beschnittene Fassung liegt als
eigene Datei vor, siehe assets/img/logos/aberlink-wortmarke.svg.
Mitwachsend statt an einer Schwelle eingeblendet: Rechts in der Leiste
steht unterhalb von 1140 px nur der Menüknopf, Platz ist also auch auf dem
Handy da — er wird nur knapper. Bei 360 px bleiben neben Wortmarke,
Malzeichen und Knopf noch knapp 100 px, das entspricht rund 15 px Höhe. */
.nav__comark img { height: clamp(15px, 4.3vw, 22px); width: auto; }
/* Fast quadratische Marken dürfen höher stehen — dieselbe Überlegung wie bei
.mhero__logo--hoch, nur eine Etage kleiner: Bei gleicher Höhe wie eine
breite Wortmarke wäre die Schrift im Baty-Logo halb so groß wie die
daneben, weil sie nur einen Teil der Bildhöhe einnimmt. Die 32 px oben
sind das Maß, das die 82 px hohe Leiste noch verträgt. */
.nav__comark--hoch img { height: clamp(22px, 6.4vw, 32px); }
/* Alle drei Marken liegen einfarbig vor — Aberlink im Hausblau, Baty und
Trimos in der Textfarbe des Themes, als *-wortmarke.* unter img/logos/.
Im Dunkelmodus dreht der Filter sie auf Weiß, billiger als eine zweite
Datei je Marke, und sie bleiben deckungsgleich. Der Filter setzt die
Einfarbigkeit voraus: Auf einer Vorlage in Hausfarben — etwa dem roten
Punkt im Baty-Logo — würde er die Farbe schlucken statt sie zu erhalten. */
:root[data-theme="dark"] .nav__comark img { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .nav__comark img { filter: brightness(0) invert(1); }
}
/* Unterhalb von 360 px reicht es nicht mehr: Die Marke käme unter 15 px
Höhe, und die feine Linienführung des Kastens wird dann zu Matsch.
Betrifft in der Praxis nur noch das iPhone SE der ersten Bauart. */
@media (max-width: 359px) {
.nav__co, .nav__comark { display: none; }
}
.nav__links { display: none; align-items: center; gap: 1.5rem; }
.nav__links a {
font-size: var(--fs-sm);
font-weight: 400;
color: var(--ink);
opacity: .82;
transition: opacity .2s var(--ease);
/* „Vor-Ort-Service“ und „Über uns“ brechen sonst am Bindestrich bzw. am
Leerzeichen um und ziehen die Leiste auf zwei bis drei Zeilen. */
white-space: nowrap;
}
.nav__links a:hover { opacity: 1; }
/* Aufklappmenü „Unsere Leistungen“.
Geöffnet wird über drei Wege, damit es ohne JavaScript und ohne Maus
funktioniert: Zeigen (:hover), Tastatur (:focus-within) und Tippen (der
Knopf setzt aria-expanded, siehe pkmt.js). Deshalb steht der Zustand nicht
in einer Klasse, sondern in aria-expanded — dasselbe Attribut, das die
Sprachausgabe vorliest. */
.nav__drop { position: relative; }
.nav__drop-btn {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: var(--fs-sm);
font-weight: 400;
color: var(--ink);
opacity: .82;
white-space: nowrap;
cursor: pointer;
transition: opacity .2s var(--ease);
}
.nav__drop:hover .nav__drop-btn,
.nav__drop-btn:focus-visible { opacity: 1; }
/* Chevron aus zwei Kanten statt aus einem Zeichen: Ein „›“ einer Systemschrift
sitzt je nach Schrift unterschiedlich hoch. */
.nav__drop-btn::after {
content: "";
width: .38em;
height: .38em;
margin-top: -.22em;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform .25s var(--ease), margin-top .25s var(--ease);
}
.nav__drop-btn[aria-expanded="true"]::after { margin-top: .12em; transform: rotate(-135deg); }
.nav__drop-panel {
position: absolute;
top: calc(100% + .9rem);
left: -.75rem;
z-index: 1;
display: grid;
gap: .125rem;
width: max-content;
max-width: min(24rem, 80vw);
padding: .5rem;
background: var(--bg-card);
border: 1px solid var(--hairline);
border-radius: var(--r-card);
box-shadow: var(--shadow-lift);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
/* Unsichtbare Brücke über den Abstand zwischen Knopf und Feld — ohne sie
klappt das Feld zu, sobald der Zeiger die Lücke überquert. */
.nav__drop-panel::before {
content: "";
position: absolute;
inset: -1rem 0 100% 0;
}
.nav__drop:hover .nav__drop-panel,
.nav__drop:focus-within .nav__drop-panel,
.nav__drop-btn[aria-expanded="true"] + .nav__drop-panel {
opacity: 1;
visibility: visible;
transform: none;
}
.nav__drop-panel a {
display: grid;
gap: .15rem;
padding: .7rem .85rem;
border-radius: var(--r-sm);
font-weight: 500;
opacity: 1;
transition: background-color .2s var(--ease);
}
.nav__drop-panel a:hover { background: var(--bg-tint); }
.nav__drop-panel span {
font-size: var(--fs-cap);
font-weight: 400;
line-height: 1.35;
color: var(--ink-2);
}
/* Zwischenüberschrift im Klappfeld. Der Trenner steht als Linie über der
zweiten Überschrift und nicht als eigenes Element: ein
zwischen zwei
Rasterzellen bekommt sonst denselben Abstand wie ein Menüpunkt. */
.nav__drop-titel {
padding: .5rem .85rem .35rem;
font-size: var(--fs-cap);
font-weight: 600;
letter-spacing: -0.004em;
color: var(--ink-3);
}
.nav__drop-titel--trenner {
margin-top: .5rem;
padding-top: .85rem;
border-top: 1px solid var(--hairline);
}
.nav__right { display: flex; align-items: center; gap: 1rem; }
/* nowrap: Auf Markenseiten steht neben dem Logo noch die Herstellermarke.
Wird es dadurch eng, brach die Rufnummer bisher hinter dem Bindestrich um
und stand zweizeilig neben der Schaltfläche. */
.nav__tel { display: none; font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }
.nav__tel:hover { color: var(--link); }
.nav__cta { display: none; padding: .5rem 1.05rem; font-size: var(--fs-sm); }
/* Seit die vier Leistungen im Aufklappmenü stecken, stehen in der Leiste nur
noch drei Punkte statt sechs. Die Grenzen sind deshalb nach unten gezogen:
Die volle Leiste beginnt jetzt bei 940 statt 1140 px, die Rufnummer bei
1120 statt 1320 — beides an der breitesten Fassung gemessen, der
Markenseite mit „Phönix × Aberlink“ daneben. Kommt ein Punkt dazu, müssen
die Werte wieder nach oben. */
@media (min-width: 940px) {
.nav__links, .nav__cta { display: flex; }
}
@media (min-width: 1120px) {
.nav__links { gap: 2rem; }
.nav__tel { display: flex; }
}
.nav__burger {
display: grid;
place-content: center;
gap: 5px;
width: 40px; height: 40px;
margin-right: -8px;
background: none; border: 0; cursor: pointer;
}
.nav__burger i {
display: block; width: 18px; height: 1.5px; border-radius: 2px;
background: var(--ink);
transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav__burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }
@media (min-width: 940px) { .nav__burger { display: none; } }
.nav__panel {
display: grid;
grid-template-rows: 0fr;
border-top: 1px solid transparent;
transition: grid-template-rows .4s var(--ease), border-color .3s;
}
.nav__panel[data-open="true"] { grid-template-rows: 1fr; border-top-color: var(--hairline); }
.nav__panel > div { overflow: hidden; }
.nav__panel a {
display: block;
padding: 1rem 0;
border-bottom: 1px solid var(--hairline);
font-size: 1.375rem;
font-weight: 500;
letter-spacing: -0.02em;
}
.nav__panel .btn { margin: 1.5rem 0 2rem; width: 100%; }
/* ----------------------------------------------------------------- 6. Hero */
.hero {
position: relative;
display: grid;
place-items: center;
min-height: min(92svh, 860px);
padding-block: clamp(5rem, 12vw, 9rem);
overflow: hidden;
background: #0B0B0D;
isolation: isolate;
}
.hero__media {
position: absolute;
inset: 0;
z-index: -2;
}
.hero__media video,
.hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 42%;
}
/* Abdunklung, damit die Typografie sicher trägt */
.hero__scrim {
position: absolute;
inset: 0;
z-index: -1;
/* Die Verläufe sind auf die Textbänder abgestimmt: Fließtext und
Kennwerte liegen über der hellen Fassade und brauchen dort mehr
Abdunklung als die Überschrift über dem Himmel. */
background:
linear-gradient(to bottom,
rgba(0,0,0,.52) 0%,
rgba(0,0,0,.28) 24%,
rgba(0,0,0,.50) 56%,
rgba(0,0,0,.74) 100%),
radial-gradient(120% 90% at 50% 45%, transparent 26%, rgba(0,0,0,.38) 100%);
}
.hero__inner { position: relative; text-align: center; color: #fff; }
.hero__title {
font-size: var(--fs-hero);
font-weight: 600;
line-height: 1.04;
letter-spacing: -0.033em;
text-shadow: 0 2px 40px rgba(0,0,0,.35);
max-width: 16ch;
margin-inline: auto;
}
.hero__lead {
margin: clamp(1.25rem, 2.4vw, 1.75rem) auto 0;
max-width: 40rem;
font-size: var(--fs-lead);
line-height: 1.4;
letter-spacing: -0.016em;
color: rgba(255,255,255,.9);
text-shadow: 0 1px 24px rgba(0,0,0,.4);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .875rem;
margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
/* Kennwerte unter dem Hero */
.hero__facts {
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.5rem, 3vw, 2.5rem);
width: 100%;
max-width: var(--w-content);
margin: clamp(3rem, 6vw, 4.5rem) auto 0;
padding-inline: var(--pad);
text-align: center;
color: #fff;
}
@media (min-width: 760px) { .hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hero__facts b {
display: block;
font-size: clamp(1.375rem, 2.1vw, 1.75rem);
font-weight: 600;
letter-spacing: -0.028em;
line-height: 1.15;
text-wrap: balance;
}
.hero__facts span {
display: block;
margin-top: .35rem;
font-size: var(--fs-sm);
color: rgba(255,255,255,.72);
}
.hero__cue {
position: absolute;
left: 50%; bottom: 1.75rem;
translate: -50% 0;
width: 22px; height: 34px;
border: 1.5px solid rgba(255,255,255,.45);
border-radius: var(--r-pill);
}
.hero__cue::after {
content: "";
position: absolute;
left: 50%; top: 7px;
translate: -50% 0;
width: 3px; height: 6px;
border-radius: 2px;
background: rgba(255,255,255,.85);
animation: cue 2s var(--ease) infinite;
}
@keyframes cue {
0%, 18% { transform: translateY(0); opacity: 1; }
55% { transform: translateY(11px); opacity: 0; }
56%,100% { transform: translateY(0); opacity: 0; }
}
@media (max-width: 759px) { .hero__cue { display: none; } }
/* -------------------------------------------------- 7. Karten und Raster */
.tiles { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); }
@media (min-width: 700px) { .tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 700px) { .tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 620px) { .tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card {
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--bg-card);
border-radius: var(--r-card);
box-shadow: var(--shadow-card);
transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card__media {
position: relative;
aspect-ratio: 3 / 2;
overflow: hidden;
background: var(--bg-tint);
}
.card__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .7s var(--ease);
}
a.card:hover .card__media img { transform: scale(1.035); }
/* Freisteller statt Foto. Die Aberlink-Renderings sind auf Transparenz
ausgeschnitten und unterschiedlich proportioniert — vom flachen Tischgerät
bis zur zweieinhalb Meter hohen Delta-Säule. „cover“ würde da mal den Kopf
und mal den Sockel abschneiden, deshalb „contain“ mit etwas Luft ringsum.
Die Kachel bekommt einen eigenen hellen Grund: Die Maschinen sind dunkel
lackiert und verschwinden im Dunkelmodus sonst in der Karte. */
.card__media--frei {
aspect-ratio: 4 / 3;
background: linear-gradient(160deg, #F7F8FA 0%, #E7EBF1 100%);
}
/* Alle Renderings unter img/aberlink/ sind freigestellt und haben einen
echten Alphakanal. Hier ist deshalb kein Blendmodus nötig. Ein neues Motiv
muss vor dem Ablegen ebenso freigestellt werden, sonst steht es als weißer
Kasten auf dem hellen Grund. */
.card__media--frei img {
object-fit: contain;
padding: clamp(1rem, 2.4vw, 1.75rem);
}
a.card:hover .card__media--frei img { transform: scale(1.045); }
.card__body {
display: flex;
flex-direction: column;
gap: .5rem;
padding: clamp(1.375rem, 2.2vw, 1.75rem);
}
.card__body p { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }
.card__body .arrow { margin-top: .75rem; font-size: var(--fs-sm); }
/* Große Bildkachel mit Text im Bild */
.showcase {
position: relative;
display: grid;
align-items: end;
min-height: clamp(340px, 44vw, 520px);
padding: clamp(1.75rem, 3.4vw, 3rem);
overflow: hidden;
border-radius: var(--r-lg);
color: #fff;
isolation: isolate;
}
.showcase img {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%; object-fit: cover;
transition: transform .8s var(--ease);
}
.showcase::before {
content: "";
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,.08) 100%);
}
a.showcase:hover img { transform: scale(1.03); }
.showcase h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.showcase p { margin-top: .5rem; max-width: 34rem; color: rgba(255,255,255,.86); font-size: var(--fs-sm); }
.showcase .arrow { margin-top: 1rem; color: #fff; }
/* Schlichte Listenkachel ohne Bild */
.plate {
display: flex;
flex-direction: column;
gap: .5rem;
padding: clamp(1.5rem, 2.4vw, 2rem);
background: var(--bg-card);
border-radius: var(--r-card);
box-shadow: var(--shadow-card);
}
.plate p { color: var(--ink-2); font-size: var(--fs-sm); }
/* Leistungsübersicht der Startseite. Kompakte Bildkacheln auf Basis von
.card — flacheres Bild, engere Innenmaße, kleinere Überschrift und eine
kurze Positionsliste je Bereich.
Fünf Kacheln in einem Raster mit doppelt so vielen Spalten, wie Kacheln
in eine Reihe passen: jede Kachel spannt zwei Spalten, die letzte,
unvollständige Reihe wird über eine Spalte Vorlauf mittig gesetzt. Ohne
das steht sie linksbündig unter der Reihe darüber und sieht nach
Versehen aus. Die Regeln gelten für genau fünf Kacheln. */
.svcs { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); }
@media (min-width: 620px) {
/* zwei Kacheln je Reihe, Reihe 3 trägt nur die fünfte */
.svcs { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.svcs > * { grid-column: span 2; }
}
@media (min-width: 620px) and (max-width: 1099px) {
.svcs > :nth-child(5) { grid-column: 2 / span 2; }
}
@media (min-width: 1100px) {
/* drei Kacheln je Reihe, Reihe 2 trägt die vierte und fünfte */
.svcs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.svcs > :nth-child(4) { grid-column: 2 / span 2; }
}
/* grid-auto-rows: 1fr macht alle Reihen und damit alle Kacheln gleich hoch.
Der überschüssige Platz landet unten im Textteil — deshalb wächst der
Textteil mit und der Link wird an den Kartenboden geschoben, damit die
Links aller Kacheln auf einer Linie liegen. */
.card--svc { height: 100%; }
.card--svc .card__media { aspect-ratio: 16 / 9; }
.card--svc .card__body {
flex: 1;
gap: .4rem;
padding: clamp(1.125rem, 1.7vw, 1.5rem);
}
.card--svc .card__body h3 { font-size: 1.125rem; }
.card--svc .card__body .arrow { margin-top: auto; padding-top: .625rem; }
/* Kurze Positionsliste in der Kachel. Der vorangestellte Begriff trägt die
Aussage und soll beim Überfliegen hängen bleiben. */
.card__list { display: grid; gap: .375rem; margin: .125rem 0 0; padding: 0; list-style: none; }
.card__list li {
position: relative;
padding-left: 1rem;
font-size: var(--fs-sm);
line-height: 1.4;
color: var(--ink-2);
/* „Drehmomentschlüssel“ und Verwandte in einer schmalen Kachelspalte */
overflow-wrap: break-word;
}
.card__list li::before {
content: "";
position: absolute;
left: 0; top: .5em;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--brand-lift);
opacity: .55;
}
.card__list b { color: var(--ink); font-weight: 600; }
/* Marken-Kachel */
.brandtile {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.375rem 1.5rem;
background: var(--bg-tint);
border-radius: var(--r-card);
font-size: 1.0625rem;
font-weight: 500;
letter-spacing: -0.015em;
transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.brandtile:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); transform: translateY(-2px); }
.brandtile::after { content: "›"; color: var(--ink-3); font-size: 1.25em; line-height: 0; }
/* Merkmalsliste mit Häkchen */
.checks { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.checks li { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .875rem; }
.checks svg { width: 21px; height: 21px; margin-top: .1rem; color: var(--brand-lift); }
.section--dark .checks svg { color: #6BAAFF; }
.checks strong { display: block; font-weight: 600; letter-spacing: -0.018em; }
.checks span { display: block; margin-top: .2rem; color: var(--ink-2); font-size: var(--fs-sm); }
/* Ablauf in nummerierten Schritten.
Bewusst einspaltig als Zeitstrahl statt als Kachelreihe: Ein Ablauf hat
eine Richtung, und fünf nebeneinanderliegende Kacheln zeigen die nicht.
Am Handy sieht die Darstellung genauso aus wie am Rechner — es gibt keinen
zweiten Zustand, der schiefgehen könnte.
Gedacht für .wrap--content: über die volle Seitenbreite würden die
Beschreibungen zu lang laufen. */
.steps {
position: relative;
display: grid;
gap: clamp(1.5rem, 2.6vw, 2.25rem);
margin: 0;
padding: 0;
list-style: none;
}
/* Die Linie verbindet die Ziffern und läuft nach unten aus — der letzte
Schritt soll nicht so wirken, als ginge es dahinter weiter. Sie sitzt auf
der Mitte der 32 px breiten Ziffernspalte. */
.steps::before {
content: "";
position: absolute;
left: 15px;
top: .75rem;
bottom: 1.5rem;
width: 2px;
background: linear-gradient(to bottom,
var(--brand-lift) 0%,
var(--brand-lift) 62%,
transparent 100%);
opacity: .3;
}
.step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 1.125rem; }
/* Deckender Hintergrund, damit die Ziffer die Linie sauber unterbricht. */
.step__no {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--brand-soft);
color: var(--brand-lift);
font-size: var(--fs-sm);
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: 0;
}
.step h3 { font-size: 1.125rem; margin-top: .3rem; }
.step p { margin-top: .4rem; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; }
/* Kennzahlen */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(2rem,4vw,3rem); }
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.stats b {
display: block;
font-size: clamp(1.75rem, 5vw, 4rem);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.04em;
/* Kennwerte sind nicht immer Zahlen — lange Komposita wie
„Deutschlandweit“ passen in der zweispaltigen Ansicht sonst nicht in
ihre Spalte und schieben das ganze Dokument breiter als das Display.
Erst Silbentrennung, im Notfall harter Umbruch. */
hyphens: auto;
overflow-wrap: break-word;
}
.stats span { display: block; margin-top: .6rem; color: var(--ink-2); font-size: var(--fs-sm); }
/* --------------------------------------------------------------- 8. Split */
.split { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 940px) { .split { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* margin: 0 gegen den Vorgabeabstand von — 40 px links und rechts,
die die Abbildung sonst schmaler machen als ihre Spalte.
height: auto ist nicht überflüssig: Stehen width und height als Attribute
im Markup (und das sollen sie, gegen den Umbruch beim Nachladen), wirken
beide als Präsentationsangabe. Das width-Attribut wird hier überschrieben,
das height-Attribut bliebe stehen — die Abbildung würde auf ihre
Pixelhöhe gezerrt, statt das Seitenverhältnis zu behalten. */
.split__media { margin: 0; }
.split__media img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
/* ------------------------------------------------------------ 9. Formular */
.contact { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 980px) { .contact { grid-template-columns: minmax(0,.78fr) minmax(0,1fr); } }
.contact__list { display: grid; gap: 1.5rem; margin-top: 2rem; }
.contact__list dt { font-size: var(--fs-sm); color: var(--ink-3); }
.contact__list dd { margin: .2rem 0 0; font-size: 1.0625rem; line-height: 1.5; }
.contact__list a:hover { color: var(--link); }
.form { display: grid; gap: 1rem; }
.form__row { display: grid; gap: 1rem; }
@media (min-width: 620px) { .form__row { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.field { display: grid; gap: .4rem; }
.field label { font-size: var(--fs-sm); color: var(--ink-2); }
.field input, .field textarea {
width: 100%;
padding: .875rem 1rem;
font-family: inherit;
font-size: var(--fs-body);
color: var(--ink);
background: var(--bg-tint);
border: 1px solid transparent;
border-radius: var(--r-sm);
transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
/* Beim Hineinklicken wird das Feld heller, nicht weiß: var(--bg) war hier
falsch. Das Formular steht in einem dunklen Band, in dem .section--dark die
Textfarbe auf Weiß dreht — aber nicht --bg. Im hellen Erscheinungsbild kam
damit weiße Schrift auf weißem Grund heraus, sobald jemand ein Feld
auswählte. Ein Tonwert aus der Schriftfarbe passt sich dagegen jedem
Untergrund an: auf Dunkel wird er heller, auf Hell dunkler. */
.field input:focus, .field textarea:focus {
outline: none;
border-color: var(--link);
background: color-mix(in srgb, var(--ink) 14%, transparent);
}
.form__foot {
display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: 1rem;
margin-top: .5rem;
}
.form__note { font-size: var(--fs-cap); color: var(--ink-3); max-width: 30rem; }
.form__note a { color: var(--link); }
/* Honigtopf gegen Bots: ein Feld, das nur ausfüllt, wer das Formular nicht
sieht. display:none wäre der naheliegende Weg — genau darauf prüfen Bots
aber, um solche Fallen zu überspringen. Aus dem Bild geschoben wirkt es
für sie wie ein normales Feld. Für die Sprachausgabe erledigt das
aria-hidden im Markup den Rest. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Rot und Grün tragen die Aussage hier nicht allein — es steht immer ein
Text daneben. Die Töne sind auf den dunklen Grund des Kontaktbandes
abgestimmt und bleiben auch auf Weiß über der Kontrastschwelle. */
.form { --fehler: #FF7A70; --erfolg: #5FD08A; }
.field__fehler { font-size: var(--fs-cap); color: var(--fehler); }
.field__fehler:empty { display: none; }
.field[data-fehler] input,
.field[data-fehler] textarea { border-color: var(--fehler); }
.form__status { font-size: var(--fs-sm); line-height: 1.5; }
.form__status:empty { display: none; }
.form__status.is-fehler { color: var(--fehler); }
.form__status.is-erfolg { color: var(--erfolg); }
.form__status a { color: inherit; text-decoration: underline; }
.form button[disabled] { opacity: .55; cursor: progress; }
/* Nach dem Absenden bleibt allein die Bestätigung stehen. Ein weiterhin
ausgefülltes Formular verleitet zum zweiten Klick, und die Anfrage käme
doppelt an. */
.form[data-gesendet] > *:not(.form__status) { display: none; }
/* Ohne align-content klebte die Bestätigung oben in der Spalte, während
daneben der Text in voller Höhe steht — sie wirkt dort verloren. */
.form[data-gesendet] { gap: 0; align-content: center; }
.form[data-gesendet] .form__status { font-size: var(--fs-lead); line-height: 1.4; max-width: 26rem; }
/* -------------------------------------------------------------- 10. Footer */
.foot {
background: var(--bg-alt);
padding-block: clamp(3rem, 5vw, 4rem) 2rem;
font-size: var(--fs-sm);
}
.foot__grid { display: grid; gap: 2.5rem; }
@media (min-width: 800px) {
.foot__grid { grid-template-columns: minmax(0,1.5fr) repeat(3, minmax(0,1fr)); gap: 3rem; }
}
/* In der Fußzeile ist Platz — hier steht das Logo groß genug, dass auch
„Koordinaten Messtechnik“ im Kreis lesbar bleibt. Farbsteuerung wie in
der Kopfzeile. */
.foot__logo { width: 224px; height: auto; color: var(--ink); }
:root[data-theme="dark"] .foot__logo { color: #fff; --logo-blau: #8093EA; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .foot__logo { color: #fff; --logo-blau: #8093EA; }
}
.foot__about { margin-top: 1rem; max-width: 26rem; color: var(--ink-2); }
.foot h4 { font-size: var(--fs-sm); font-weight: 600; letter-spacing: -0.01em; }
.foot ul { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.foot ul a { color: var(--ink-2); transition: color .2s var(--ease); }
.foot ul a:hover { color: var(--ink); }
.foot__bar {
display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between;
margin-top: clamp(2.5rem, 4vw, 3.5rem); padding-top: 1.5rem;
border-top: 1px solid var(--hairline);
font-size: var(--fs-cap); color: var(--ink-3);
}
/* ------------------------------------- 11. Redaktioneller Inhalt (Koenig) */
.page-head {
max-width: var(--w-text);
margin-inline: auto; /* bündig zur zentrierten Textspalte von .prose */
margin-bottom: clamp(2.5rem, 4.5vw, 3.5rem);
}
.page-head .lead { margin-top: 1.125rem; }
.page-figure { margin: 0 0 clamp(2.5rem, 4.5vw, 3.5rem); }
.page-figure img { width: 100%; border-radius: var(--r-lg); }
.page-figure figcaption { margin-top: .875rem; font-size: var(--fs-cap); color: var(--ink-3); }
/* Zentrierte Lesespalte; breite Karten dürfen beidseitig ausbrechen. */
.prose {
display: grid;
grid-template-columns:
[full-start] minmax(0, 1fr)
[wide-start] minmax(0, 3rem)
[text-start] min(var(--w-text), 100%) [text-end]
minmax(0, 3rem) [wide-end]
minmax(0, 1fr) [full-end];
/* Redaktioneller Text kommt aus Ghost — lange URLs und Aktenzeichen
dürfen die Spalte nicht sprengen. */
overflow-wrap: break-word;
}
.prose > * { grid-column: text; margin-block: 0; }
.prose > * + * { margin-top: 1.25rem; }
.prose > h2, .prose > h3, .prose > h4 { margin-top: clamp(2.5rem, 4vw, 3.25rem); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.prose h3 { font-size: 1.3125rem; }
.prose h4 { font-size: 1.0625rem; }
.prose p, .prose li { color: var(--ink-2); line-height: 1.6; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--link); }
.prose a:hover { text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li + li { margin-top: .55rem; }
.prose li::marker { color: var(--ink-3); }
.prose blockquote {
margin: 0;
padding-left: 1.5rem;
border-left: 3px solid var(--brand);
font-size: 1.25rem;
line-height: 1.45;
letter-spacing: -0.02em;
color: var(--ink);
}
.prose hr { border: 0; height: 1px; background: var(--hairline); margin-block: clamp(2.5rem,4vw,3.25rem); }
.prose code {
padding: .12em .38em;
background: var(--bg-tint);
border-radius: 5px;
font-size: .88em;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.prose pre {
grid-column: wide;
overflow-x: auto;
padding: 1.25rem 1.5rem;
background: var(--bg-dark);
color: var(--on-dark);
border-radius: var(--r-card);
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: var(--fs-sm);
line-height: 1.6;
}
.prose pre code { padding: 0; background: none; }
.prose figure { margin: 0; }
.prose img { width: 100%; border-radius: var(--r-card); }
.prose figcaption { margin-top: .75rem; font-size: var(--fs-cap); color: var(--ink-3); text-align: center; }
.prose table {
grid-column: wide;
display: block; overflow-x: auto;
width: 100%; border-collapse: collapse;
font-size: var(--fs-sm);
}
.prose th, .prose td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.prose th { font-weight: 600; }
.prose .kg-width-wide { grid-column: wide; }
.prose .kg-width-full { grid-column: full; }
.prose .kg-card { margin-top: clamp(2rem, 3.5vw, 2.75rem); }
.prose .kg-gallery-row { display: grid; grid-auto-flow: column; gap: .75rem; }
.prose .kg-callout-card {
display: flex; gap: 1rem;
padding: 1.25rem 1.5rem;
background: var(--bg-tint);
border-radius: var(--r-card);
}
.prose .kg-callout-text { color: var(--ink-2); }
.prose .kg-bookmark-card a {
display: block; padding: 1.25rem 1.5rem;
background: var(--bg-tint); border-radius: var(--r-card);
}
.prose .kg-bookmark-card a:hover { text-decoration: none; }
.prose .kg-bookmark-title { font-weight: 600; color: var(--ink); }
.prose .kg-bookmark-description { margin-top: .35rem; color: var(--ink-2); font-size: var(--fs-sm); }
.prose .kg-bookmark-metadata { margin-top: .75rem; font-size: var(--fs-cap); color: var(--ink-3); }
.prose .kg-bookmark-thumbnail { display: none; }
.prose .kg-button-card { display: flex; }
.prose .kg-btn {
display: inline-flex; align-items: center;
padding: .8rem 1.5rem;
background: var(--brand); color: #fff;
border-radius: var(--r-pill);
font-weight: 500;
}
.prose .kg-btn:hover { background: var(--brand-lift); text-decoration: none; }
.prose .kg-toggle-card { padding-top: 1.25rem; border-top: 1px solid var(--hairline); }
.prose .kg-toggle-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.prose .kg-toggle-content { margin-top: .75rem; color: var(--ink-2); }
/* Variante für schmale Spalten (z. B. in .split): normaler Blockfluss statt
zentrierter Lesespalte, damit der Text die Spaltenbreite nutzt. */
.prose--flow { display: block; }
.prose--flow > * { margin-block: 0; }
.prose--flow > * + * { margin-top: 1.125rem; }
.prose--flow > h2, .prose--flow > h3 { margin-top: 2rem; }
/* --------------------------------------------------------- 12. Markenseiten */
/* Kopf einer Markenseite. Flacher als der Start-Hero, links ausgerichtet,
mit dem Herstellerlogo auf weißer Plakette. */
.mhero {
position: relative;
padding-block: clamp(3.5rem, 8vw, 6.5rem);
overflow: hidden;
background: var(--bg-dark);
color: #fff;
isolation: isolate;
}
.mhero__media { position: absolute; inset: 0; z-index: -2; }
.mhero__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 45%;
}
/* Deutlich dunkler als beim Start-Hero — die weiße Plakette soll tragen. */
.mhero__scrim {
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(to right, rgba(0,0,0,.86) 0%, rgba(0,0,0,.62) 55%, rgba(0,0,0,.42) 100%),
linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 100%);
}
/* Helle Variante für Studioaufnahmen: Die Deckung sitzt links unter der
Schrift und läuft nach rechts fast auf null aus, statt gleichmäßig über
dem ganzen Bild zu liegen. Der Farbstich geht ins Marineblau statt ins
Neutralgraue — reines Schwarz über einem hellen Bild wirkt schmutzig.
Die zusätzliche Abdunklung von unten fällt weg, sie hat hier nichts zu
tragen: Über der unteren Bildhälfte stehen nur die Buttons, und die
bringen ihren eigenen Hintergrund mit. */
.mhero--hell .mhero__scrim {
background:
linear-gradient(100deg,
rgba(4,16,38,.80) 0%,
rgba(4,16,38,.58) 38%,
rgba(4,16,38,.26) 68%,
rgba(4,16,38,.10) 100%);
}
/* Am Handy steht die Schrift über der vollen Bildbreite, das seitliche
Gefälle greift dort nicht. Deshalb wieder eine flächige Deckung. */
@media (max-width: 700px) {
.mhero--hell .mhero__scrim { background: rgba(4,16,38,.66); }
}
.mhero__inner { position: relative; max-width: 46rem; }
/* Vertriebsstatus über dem Logo. Bewusst als Pille und nicht als weitere
Zeile Fließtext — die Aussage soll vor der Überschrift gelesen werden. */
/* flex statt inline-flex mit fit-content: Die Plakette darunter ist selbst
inline-flex — als inline-level Element würde die Auszeichnung sonst neben
dem Logo landen statt darüber. */
.mhero__badge {
display: flex;
width: fit-content;
max-width: 100%;
align-items: center;
gap: .5em;
margin: 0 0 1.125rem;
padding: .45rem 1rem .45rem .85rem;
background: rgba(255,255,255,.16);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border-radius: var(--r-pill);
font-size: var(--fs-sm);
font-weight: 600;
letter-spacing: -0.012em;
color: #fff;
}
.mhero__badge::before {
content: "";
width: 7px; height: 7px;
border-radius: 50%;
background: #5CD07A;
box-shadow: 0 0 0 3px rgba(92,208,122,.28);
}
/* Bleibt im Dunkelmodus bewusst weiß: die Logos liegen als dunkle Marke vor,
und die Hausfarben der Hersteller sollen unverfälscht bleiben. */
.mhero__plate {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
padding: clamp(1rem, 2vw, 1.375rem) clamp(1.375rem, 2.6vw, 1.875rem);
background: #fff;
border-radius: var(--r-card);
box-shadow: 0 2px 10px rgba(0,0,0,.18), 0 18px 44px rgba(0,0,0,.28);
}
/* Maß ist die Höhe, nicht die Breite: so wirken die Logos der Hersteller
untereinander gleich groß, obwohl die Seitenverhältnisse weit auseinander
liegen (Trimos 4,5:1, Aberlink 4:1, Baty 1,5:1). */
.mhero__logo {
width: auto;
height: clamp(30px, 5.2vw, 46px);
max-width: min(280px, 62vw);
object-fit: contain;
}
/* Hochformatige und fast quadratische Marken dürfen höher stehen, sonst
wirken sie neben den breiten Wortmarken verloren. */
.mhero__logo--hoch { height: clamp(52px, 7.5vw, 76px); max-width: min(200px, 50vw); }
.mhero .kicker { color: #6BAAFF; }
.mhero__title {
font-size: var(--fs-h1);
max-width: 20ch;
text-shadow: 0 2px 36px rgba(0,0,0,.3);
}
/* Variante, bei der die Wortmarke des Herstellers die Überschrift ersetzt.
line-height: 0 nimmt der Überschrift den Zeilendurchschuss — bei einem Bild
als einzigem Inhalt entstünde darunter sonst ein Streifen Luft, der die
Abstände zum Lead zerschießt. */
.mhero__title--logo { line-height: 0; }
/* Maß ist die Höhe: Die Marke soll etwa so hoch stehen wie eine Zeile der
Textüberschrift, die sie ersetzt, darf aber etwas mehr Raum nehmen — ein
Logo trägt weniger weit als Buchstaben gleicher Höhe. Der Schlagschatten
ist weicher als bei der Textfassung, sonst franst die feine Linienführung
der Marke aus. */
.mhero__wortmarke {
height: clamp(52px, 8.4vw, 112px);
width: auto;
max-width: min(520px, 92%);
filter: drop-shadow(0 2px 28px rgba(0,0,0,.34));
}
/* Fast quadratische Marken (Baty) höher, sonst stehen sie neben den breiten
Wortmarken von Aberlink und Trimos wie ein Nachtrag da. Faktor 1,5 statt
des vollen Ausgleichs auf gleiche Breite: Ein 1,5:1-Logo auf 448 px Breite
wäre 300 px hoch und würde den Kopf sprengen. Die Breite bleibt damit
deutlich unter der der Wortmarken — das ist richtig so, quadratische
Marken tragen bei gleicher Fläche weiter. */
.mhero__wortmarke--hoch {
height: clamp(78px, 12.6vw, 168px);
max-width: min(340px, 74%);
}
.mhero__lead {
margin-top: clamp(1.125rem, 2vw, 1.5rem);
max-width: 38rem;
font-size: var(--fs-lead);
line-height: 1.42;
letter-spacing: -0.017em;
color: rgba(255,255,255,.88);
}
.mhero__actions {
display: flex;
flex-wrap: wrap;
gap: .875rem;
margin-top: clamp(1.75rem, 3vw, 2.25rem);
}
/* Systemliste: gleich hohe Zeilen, Baureihe groß, Bauart als Auszeichnung. */
.specs { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); }
@media (min-width: 620px) { .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .specs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.spec {
display: flex;
flex-direction: column;
gap: .45rem;
padding: clamp(1.375rem, 2.2vw, 1.75rem);
background: var(--bg-card);
border-radius: var(--r-card);
box-shadow: var(--shadow-card);
}
.spec__tag {
font-size: var(--fs-cap);
font-weight: 600;
letter-spacing: -0.004em;
color: var(--ink-3);
}
.spec p:not(.spec__tag) { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }
.spec--cta { background: var(--brand-soft); box-shadow: none; }
.spec--cta .arrow { margin-top: .5rem; }
/* ------------------------------------------- 12b. Produktseiten einer Marke */
/* Rückweg zur Markenseite. Steht über der Überschrift statt darunter — auf
einer Unterseite ist die erste Frage „wo bin ich“, nicht „was ist das“. */
/* flex mit fit-content statt inline-flex: Die Bauart-Pille darunter ist
inline-level, der Rückweg stünde sonst in derselben Zeile. */
.crumb {
display: flex;
width: fit-content;
align-items: center;
gap: .3em;
margin-bottom: 1rem;
font-size: var(--fs-sm);
font-weight: 500;
color: var(--ink-2);
transition: color .2s var(--ease);
}
.crumb::before { content: "‹"; font-size: 1.25em; line-height: 0; transform: translateY(-.045em); }
.crumb:hover { color: var(--ink); }
/* Produktkopf: links die Aussage, rechts die Maschine. Kein Vollbild-Hero —
ein freigestelltes Rendering hinter Text wird zu Tapete, und die Baureihe
ist genau das, was der Besucher hier sehen will. */
.phero { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3.5rem, 7vw, 5.5rem); }
.phero .split { align-items: center; }
/* Standfläche für das Rendering. Der Verlauf ersetzt den Schlagschatten, den
die Freisteller nicht mitbringen — ohne ihn schwebt die Maschine im Nichts. */
.figplate {
display: grid;
place-items: center;
margin: 0;
padding: clamp(1.5rem, 3vw, 2.75rem);
min-height: clamp(280px, 34vw, 420px);
background: radial-gradient(120% 80% at 50% 22%, #FFFFFF 0%, #EDF1F6 55%, #DFE5EE 100%);
border-radius: var(--r-lg);
}
.figplate img { width: auto; max-height: clamp(240px, 30vw, 380px); object-fit: contain; }
/* Kleines Bildmaterial (Horizon liegt nur mit 507 px vor) nicht hochrechnen —
eine weichgezeichnete Maschine wirkt schlechter als eine kleinere scharfe. */
.figplate img[width] { max-width: 100%; }
/* Eckdaten als Chips unter dem Fließtext. Die vollständige Tabelle steht
weiter unten im redaktionellen Teil; hier stehen die drei Zahlen, nach
denen tatsächlich vorausgewählt wird. */
.keyfacts { display: grid; gap: .875rem; margin: clamp(1.75rem, 3vw, 2.25rem) 0 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .keyfacts { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.keyfacts dt { font-size: var(--fs-cap); color: var(--ink-3); }
.keyfacts dd { margin: .25rem 0 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.018em; line-height: 1.3; }
/* Auszeichnung der Bauart über der Überschrift, gleiche Rolle wie .spec__tag */
.ptag {
display: inline-block;
margin-bottom: .75rem;
padding: .35rem .8rem;
background: var(--brand-soft);
border-radius: var(--r-pill);
font-size: var(--fs-cap);
font-weight: 600;
letter-spacing: -0.004em;
color: var(--brand-lift);
}
/* ---------------------------------------------------------- 12c. Marktplatz */
/* Preis. Größer als Fließtext, kleiner als eine Überschrift — er soll ins
Auge fallen, ohne die Maschine zu überschreien. Die Zeile darunter trägt
die Bedingung („netto ab Mönchengladbach“); sie gehört zum Preis und darf
nicht als eigener Absatz durch die Karte rutschen. */
.preis {
font-size: clamp(1.25rem, 2vw, 1.625rem);
font-weight: 600;
letter-spacing: -0.025em;
color: var(--ink);
}
.preis small {
display: block;
margin-top: .25rem;
font-size: var(--fs-cap);
font-weight: 400;
letter-spacing: 0;
color: var(--ink-3);
}
/* Zustand einer Anzeige, als Plakette über dem Bild. Verkaufte Geräte bleiben
bewusst stehen: Sie zeigen, was durch das Haus geht, und wer zu spät kommt,
fragt nach dem nächsten. */
.status {
position: absolute;
top: .75rem;
left: .75rem;
z-index: 1;
padding: .3rem .75rem;
border-radius: var(--r-pill);
font-size: var(--fs-cap);
font-weight: 600;
letter-spacing: -0.004em;
color: #fff;
background: rgba(0, 0, 0, .72);
backdrop-filter: saturate(140%) blur(8px);
-webkit-backdrop-filter: saturate(140%) blur(8px);
}
.status--reserviert { background: var(--brand); }
/* Vergebene Geräte treten zurück, verschwinden aber nicht. Nur das Bild wird
entsättigt — Text bleibt lesbar, sonst wäre die Karte Dekoration. */
.card--vergeben .card__media img { filter: grayscale(1); opacity: .5; }
/* Karte einer Anzeige. Die Fußzeile mit Preis wird an den Kartenboden
gedrückt, damit die Preise aller Karten einer Reihe auf einer Linie
stehen — dieselbe Überlegung wie bei .card--svc. */
.card--mp { height: 100%; }
.card--mp .card__body { flex: 1; }
.card__preis {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: .5rem 1rem;
margin-top: auto;
padding-top: .875rem;
}
/* Hinweiskasten, wenn gerade nichts im Bestand ist. Eine leere Seite wirkt
kaputt; dieser Kasten sagt, was stattdessen zu tun ist. */
.leerstand {
padding: clamp(2rem, 4vw, 3rem);
border: 1px dashed var(--hairline);
border-radius: var(--r-card);
text-align: center;
}
.leerstand p { margin-top: .75rem; color: var(--ink-2); }
/* ------------------------------------------------------------ 13. Über uns */
/* .split zentriert seine Spalten senkrecht. Das passt, solange beide Seiten
ähnlich hoch sind — neben einem redaktionellen Text unbekannter Länge
schwimmt die kürzere Spalte sonst in der Mitte. Diese Variante hängt beide
Spalten oben ein. */
@media (min-width: 940px) { .split--oben { align-items: start; } }
/* Kennzahlen in einer .split-Spalte. Die Grundfassung geht bei 860 px auf
vier Spalten — im halben Satzspiegel stünde dann eine Zahl je 8 rem.
Diese Variante bleibt zweispaltig und nimmt die Zahlen etwas zurück. */
@media (min-width: 860px) {
.stats--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 3vw, 2.5rem); }
.stats--zwei b { font-size: clamp(1.75rem, 3.2vw, 2.75rem); }
}
/* Zeitleiste der Firmengeschichte.
Aufbau: links das Jahr, in der Mitte die Schiene, rechts der Eintrag.
Bewusst nicht abwechselnd links und rechts — das sieht auf Bildschirm-
breite hübsch aus, zwingt beim Lesen aber ins Zickzack und bricht auf dem
Handy ohnehin auf eine Spalte zusammen.
Die Schiene ist bewusst nicht eine durchgehende Linie hinter der Liste,
sondern je Eintrag ein Stück vom eigenen Punkt bis zum nächsten. Das
erspart den Trick, das überstehende Ende unter dem letzten Eintrag mit
einem Rechteck in Hintergrundfarbe abzudecken — und damit die stille
Bedingung, dass die Chronik immer auf demselben Grund steht.
--jahr Schriftgrad der Jahreszahl. Steht als Variable da, weil sich die
senkrechte Lage von Schiene und Punkten daraus errechnet: Der
Punkt sitzt auf der optischen Mitte der ersten Jahreszeile.
--rail x-Position der Schiene, zugleich Ankerpunkt der Punkte
--luft Abstand zwischen zwei Einträgen. Muss mit gap übereinstimmen: Das
Schienenstück eines Eintrags reicht über diesen Abstand hinweg
bis an den Punkt des nächsten. */
.chron {
--jahr: clamp(1.5rem, 2.2vw, 2rem);
--rail: 7px;
--luft: clamp(2rem, 3.4vw, 2.75rem);
display: grid;
gap: var(--luft);
margin: 0;
padding: 0;
list-style: none;
}
.chron__item {
position: relative;
display: grid;
gap: .5rem;
padding-left: calc(var(--rail) + 1.75rem);
}
.chron__item::before {
content: "";
position: absolute;
top: calc(var(--jahr) * .55);
left: var(--rail);
translate: -50% -50%;
width: 13px; height: 13px;
border-radius: 50%;
background: var(--brand-lift);
}
/* Schienenstück vom eigenen Punkt bis zum Punkt des nächsten Eintrags. Der
Überstand nach unten überbrückt den Abstand zwischen den Einträgen und die
Strecke, die der nächste Punkt unter dessen Oberkante sitzt. Beim letzten
Eintrag entfällt das Stück — dort endet die Zeitleiste. */
.chron__item:not(:last-child)::after {
content: "";
position: absolute;
top: calc(var(--jahr) * .55 + 6.5px);
bottom: calc(-1 * (var(--luft) + var(--jahr) * .55 - 6.5px));
left: var(--rail);
translate: -50% 0;
width: 1.5px;
background: var(--hairline);
}
.chron__year {
font-size: var(--jahr);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.03em;
color: var(--brand-lift);
/* Gleiche Ziffernbreite, damit die Jahre in der rechtsbündigen Spalte
untereinander stehen und nicht zu tanzen anfangen. */
font-variant-numeric: tabular-nums;
}
.chron__body p { margin-top: .5rem; color: var(--ink-2); }
.chron__body p + p { margin-top: .75rem; }
.chron__more { margin-top: .875rem; }
@media (min-width: 860px) {
/* Jahresspalte 9,5 rem, Abstand 5,5 rem — die Schiene läuft mittig
dazwischen, also bei 12,25 rem. */
.chron { --rail: 12.25rem; }
.chron__item {
grid-template-columns: 9.5rem minmax(0, 1fr);
column-gap: 5.5rem;
padding-left: 0;
}
.chron__year { text-align: right; }
}
/* Team. Drei Gruppen (Verwaltung, Vertrieb, Labor) mit je einem Raster. */
.team__group + .team__group { margin-top: clamp(2.5rem, 4.5vw, 3.5rem); }
.team__title {
margin-bottom: 1.25rem;
padding-bottom: .75rem;
border-bottom: 1px solid var(--hairline);
font-size: var(--fs-sm);
font-weight: 600;
letter-spacing: -0.008em;
color: var(--ink-3);
}
.team { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
@media (min-width: 620px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.person {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 1.125rem;
align-items: start;
padding: clamp(1.25rem, 2vw, 1.625rem);
background: var(--bg-card);
border-radius: var(--r-card);
box-shadow: var(--shadow-card);
}
.person h3 { font-size: 1.0625rem; }
.person__role { margin-top: .15rem; font-size: var(--fs-sm); color: var(--ink-2); }
.person__links { display: grid; gap: .3rem; margin-top: .875rem; font-size: var(--fs-sm); }
.person__links a {
color: var(--ink-2);
/* vorname.nachname@pkmt.de passt in der dreispaltigen Ansicht nicht in
eine Zeile und würde die Karte sonst breiter ziehen als ihre Spalte */
overflow-wrap: anywhere;
transition: color .2s var(--ease);
}
.person__links a:hover { color: var(--link); }
/* Monogramm statt Porträt — siehe partials/person.hbs. Die Schriftfarbe ist
bewusst --link und nicht --brand-lift: Im Dunkelmodus steht das Kürzel
sonst in Dunkelblau auf Dunkelblau. */
.person__mono {
display: grid;
place-items: center;
width: 52px; height: 52px;
border-radius: 50%;
background: var(--brand-soft);
color: var(--link);
font-size: .9375rem;
font-weight: 600;
letter-spacing: .01em;
}
/* Porträt, sobald in Ghost ein Beitragsbild gesetzt ist. Gleiche Maße wie
das Monogramm, deshalb springt beim Wechsel nichts. */
.person__mono--foto { object-fit: cover; background: var(--bg-tint); }
/* Durchwahl und E-Mail kommen als Liste aus dem Seiteninhalt — Ghost hat
für Seiten keine eigenen Felder, siehe partials/person.hbs. Die Liste
wird auf dieselbe Optik gebracht wie die früheren losen Verweise. */
.person__links ul,
.person__links ol { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.person__links p { margin: 0; }
.person__links > :first-child { margin-top: 0; }
/* Schlagwortpillen, z. B. die Branchenliste. Reine Auszeichnung, keine
Links — deshalb ohne Hover-Zustand. */
.tags { display: flex; flex-wrap: wrap; gap: .625rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.tags li {
padding: .5rem 1.05rem;
background: var(--bg-tint);
border-radius: var(--r-pill);
font-size: var(--fs-sm);
font-weight: 500;
letter-spacing: -0.012em;
}
/* --------------------------------------------------- 14. Beitragsübersicht */
/* Datum und Verfasser — auf der Kachel in der Übersicht und im Kopf des
Beitrags. Das ist kein Kursivsatz, sondern nur der Trennpunkt: Er
steht schwächer als die Angaben links und rechts davon, sonst zerhackt er
die Zeile optisch in zwei Hälften. */
.card__meta,
.page-head .kicker {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .45em;
}
.card__meta {
margin-bottom: .3rem;
font-size: var(--fs-cap);
color: var(--ink-3);
}
.card__meta i,
.page-head .kicker i { font-style: normal; opacity: .5; }
/* Blätterleiste. Drei Spalten statt space-between, damit die Seitenzahl
mittig bleibt, auch wenn nur eine der beiden Schaltflächen da ist — das
ist auf der ersten und der letzten Seite der Normalfall. */
.pager {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1rem;
margin-top: clamp(2.5rem, 5vw, 4rem);
padding-top: clamp(1.5rem, 3vw, 2rem);
border-top: 1px solid var(--hairline);
}
.pager__aelter { justify-self: end; }
.pager__zaehler {
margin: 0;
font-size: var(--fs-sm);
color: var(--ink-3);
text-align: center;
font-variant-numeric: tabular-nums;
}
/* Schmal wird gestapelt: Zwei Schaltflächen und die Zählung nebeneinander
ergeben unter rund 560 px entweder Umbrüche mitten im Beschriftungstext
oder eine Zählung, die an einer der beiden Flächen klebt. */
@media (max-width: 560px) {
.pager { grid-template-columns: 1fr 1fr; row-gap: 1.25rem; }
.pager__zaehler { grid-column: 1 / -1; order: -1; }
.pager .btn { width: 100%; padding-inline: 1rem; }
/* Siehe partials/pagination.hbs: Nebeneinander bleibt hier zu wenig
Breite für die volle Beschriftung. */
.pager__wort { display: none; }
}
/* ------------------------------------------------------- 14b. Kontaktseite */
/* Anschriftenkarte im Seitenkopf, siehe page-kontakt.hbs. Sie sitzt auf
.plate; hier kommt nur dazu, was die Karte von einer Textkachel
unterscheidet — die Trennlinie über den Angaben und die zweispaltige
Aufteilung, sobald Platz dafür da ist.
Warum das Raster erst ab 420 px greift: Telefon, Telefax und E-Mail
stehen darunter einspaltig. Zwei Spalten würden die längste Angabe
(die E-Mail-Adresse) auf dem Handy umbrechen — mitten in der Adresse,
und das liest niemand gern. */
.kontaktkarte { gap: 1.25rem; }
.kontaktkarte .kicker { margin-bottom: 0; }
/* Zwei Klassen tief, weil .plate p (Klasse + Typ) sonst gewinnt und Anschrift
wie Ziele auf Kleinschrift in Grau zieht. */
.kontaktkarte .kontaktkarte__adr { color: var(--ink); font-size: 1.0625rem; line-height: 1.5; }
.kontaktkarte__list {
display: grid;
gap: 1.125rem;
margin: 0;
padding-top: 1.25rem;
border-top: 1px solid var(--hairline);
}
@media (min-width: 420px) { .kontaktkarte__list { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.kontaktkarte__list dt { font-size: var(--fs-cap); color: var(--ink-3); }
.kontaktkarte__list dd { margin: .2rem 0 0; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.015em; }
/* Auf dieser Seite ist der Klick auf die Nummer die eigentliche Handlung —
sie muss deshalb als Verweis erkennbar sein und nicht erst beim
Darüberfahren. Der Telefax steht bewusst ohne Verweis: Es gibt kein
Ziel, das ein Browser damit anfangen könnte. */
.kontaktkarte__list a { color: var(--link); }
.kontaktkarte__list a:hover { text-decoration: underline; }
/* Kachel „Wohin mit welchem Anliegen“. Die Ziele stehen über margin-top:auto
am Fuß der Kachel, damit sie in einer Reihe auf einer Linie liegen — die
Beschreibungen darüber sind unterschiedlich lang. */
.weg h3 { font-size: 1.1875rem; }
.weg .weg__ziel {
display: grid;
justify-items: start;
gap: .35rem;
margin-top: auto;
padding-top: 1.125rem;
font-size: var(--fs-body);
font-weight: 500;
}
.weg__ziel a { color: var(--link); }
.weg__ziel a:not(.arrow):hover { text-decoration: underline; }
/* ------------------------------------------------------- 15. Scroll-Reveal */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }