/* ==========================================================================
LUBRY — design.css
Design-System für den Neubau (lubry.com + Angebotsgenerator).
Dependency-frei, kein WordPress / Blocksy / Divi. Reines CSS.
Tokens 1:1 aus der LIVE-Seite extrahiert (Stand 2026-06-04), danach
verdichtet (Diktat 727: enger + diszipliniertere Typo). Single source of
truth für das AUSSEHEN. Farben/Fonts/Spacing als :root-Variablen, dann
schlanke Komponenten-Klassen. KEINE border-radius irgendwo (eckig = LUBRY).
TYPO-DISZIPLIN: nur 2 Display-Fonts (Fraunces=Headings, Manrope=Rest),
JetBrains Mono NUR für kleine numerische Labels. Type-Skala = 5 Stufen
(display/heading/subhead/body/small) + 1 Label. Keine Inline-Zwischen-
größen erfinden — Tokens nutzen. Konzept: 00 PLAN/TYPKONZEPT.md.
--------------------------------------------------------------------------
GOOGLE FONTS — diese zwei -Tags in den JEDER Seite einsetzen
(Manrope = Body/UI, Fraunces = Headings variabel opsz/SOFT/WONK, JetBrains
Mono = Nummerierungen):
Hinweis: Fraunces wird variabel geladen; die Achsen opsz (optical size),
SOFT und WONK werden über font-variation-settings gesteuert (siehe h1–h4).
========================================================================== */
/* ==========================================================================
1) TOKENS (:root)
========================================================================== */
:root {
/* --- Farben (verbatim aus der Live-Seite) --------------------------- */
--c-primary: #0B2948; /* Marineblau: Hero-bg, CTA, Headings, Buttons-auf-Hell */
--c-midnight: #061a32; /* tiefe Sektionen (trust / footer-dunkel) */
--c-text: #0A1628; /* Fließtext */
--c-bg: #FBF8F1; /* Seitenhintergrund creme */
--c-cream: #F5F1E8; /* warmes Creme: Alt-Sektionen, Primary-Button-bg, helle Schrift auf dunkel */
--c-gold: #EBCF9A; /* Gold-Akzent: Eyebrow-Linie/Hover/Active, em-Akzente */
--c-gold-dark: #B8964E; /* Gold dunkel (Verläufe/Hover-Tiefe) */
--c-muted: #3a4f66; /* gedämpftes Blaugrau */
--c-placeholder: #7A869A; /* Platzhaltertext */
--c-surface: #FFFFFF; /* Header / Footer / Cards */
/* Abgeleitete Linien-/Schatten-Töne (aus den Original-rgba-Werten) */
--c-border: rgba(11, 41, 72, 0.10); /* Card-Rand auf hell */
--c-border-hover: var(--c-gold);
--c-line-dark: #0A1628; /* trennende Linien auf hell */
--c-on-dark-border: rgba(245, 241, 232, 0.4); /* Secondary-Button-Rand */
--c-on-dark-soft: rgba(245, 241, 232, 0.25);/* Trennlinien auf dunkel */
--c-shadow-card: 0 20px 40px -20px rgba(11, 41, 72, 0.15);
--c-shadow-image: 0 30px 60px -20px rgba(11, 41, 72, 0.25);
--c-hero-shimmer: radial-gradient(ellipse at 85% 15%, rgba(235, 207, 154, 0.10) 0%, transparent 55%);
/* --- Schrift -------------------------------------------------------- */
/* DISZIPLIN: nur ZWEI Display-Fonts. Fraunces = Headings, Manrope = ALLES
andere (Body, Buttons, Eyebrow, UI). JetBrains Mono NUR für kleine
numerische Labels (.mono, .card__num). Keine vierte Schrift. */
--font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
/* --- TYPE-SCALE (tight) --------------------------------------------
EINE Treppe, 5 Stufen + 1 Label. Keine Zwischengrößen mehr erfinden —
im Markup IMMER auf diese Tokens / Element-Defaults zurückgreifen, damit
die Skala nicht wieder driftet (siehe 00 PLAN/TYPKONZEPT.md).
display (h1) → 56 / heading (h2) → 36 / subhead (h3) → 22
body → 17 / small → 14.5 / label (mono/eyebrow) → 13
*/
--fs-display: 56px; --lh-display: 1.12; --fs-display-mobile: 34px;
--fs-heading: 36px; --lh-heading: 1.2; --fs-heading-mobile: 28px;
--fs-subhead: 22px; --lh-subhead: 1.3;
--fs-lead: 19px; /* optionaler Vorlauf-/Intro-Text (Hero-Lead) — KEINE
eigene Heading-Stufe, nur größerer Body */
--fs-body: 17px; --lh-body: 1.55;
--fs-small: 14.5px; --lh-small: 1.55;
--fs-label: 13px; /* Eyebrow, Mono-Nummern, UI-Labels (uppercase) */
/* Alias-Tokens für h1–h3 (Abwärtskompatibilität alter Aufrufe) */
--fs-h1: var(--fs-display); --lh-h1: var(--lh-display); --fs-h1-mobile: var(--fs-display-mobile);
--fs-h2: var(--fs-heading); --lh-h2: var(--lh-heading);
--fs-h3: var(--fs-subhead); --lh-h3: var(--lh-subhead);
--fs-eyebrow: var(--fs-label);
/* --- Layout / Spacing ----------------------------------------------
SPACING-SKALA (4er-Raster, benannt). Padding/Margin daraus ziehen,
keine krummen Einzelwerte. Vertikaler Rhythmus bewusst enger als zuvor
(70 → 48), damit die Seiten gefüllter wirken (Diktat 727). */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--container-max: 1380px;
--content-width: 1196px; /* Inhaltsbreite, aus der section padding-Formel */
--gutter-min: 24px; /* Mindest-Seitenrand auf schmalen Viewports */
--section-pad-x: max(24px, calc((100vw - 1196px) / 2));
--section-rhythm: 48px; /* vertikaler Sektions-Rhythmus (vorher 70px) */
/* Button-Geometrie (kompakter: 22/48 → 18/40) */
--btn-pad: 18px 40px;
--btn-fs: 15px;
--btn-tracking: 0.06em;
/* Card (vorher 48px → 36px) */
--card-pad: 36px;
/* Header / Footer */
--logo-height: 64px; /* vorher 72px */
--header-pad-x: 32px;
/* Bewegung */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--t-fast: 0.2s var(--ease);
--t-card: 0.3s ease;
}
/* ==========================================================================
2) MINIMALER MODERNER RESET
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--c-text);
background: var(--c-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden; /* Schutz gegen Full-Bleed-Scroll */
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
/* KEINE abgerundeten Ecken irgendwo */
* { border-radius: 0; }
/* ==========================================================================
3) TYPOGRAFIE
========================================================================== */
h1, h2, h3, h4 {
font-family: var(--font-serif);
font-weight: 400;
font-variation-settings: 'opsz' 30, 'SOFT' 30, 'WONK' 0;
letter-spacing: -0.02em;
color: var(--c-primary);
}
h1 { font-size: var(--fs-display); line-height: var(--lh-display); }
h2 { font-size: var(--fs-heading); line-height: var(--lh-heading); }
h3 { font-size: var(--fs-subhead); line-height: var(--lh-subhead); }
/* h4 ist KEINE eigene Stufe mehr — teilt sich die Subhead-Stufe mit h3
(eine Zwischengröße weniger). Wer kleiner braucht, nimmt .text-small. */
h4 { font-size: var(--fs-subhead); line-height: var(--lh-subhead); }
/* kursive Akzente in Headings — Fraunces 400 italic, gold */
h1 em, h2 em, h3 em, h4 em,
.accent {
font-style: italic;
font-weight: 400;
color: var(--c-gold);
font-variation-settings: 'opsz' 30, 'SOFT' 30, 'WONK' 0;
}
p { color: var(--c-text); }
/* --- DEFAULT-ABSTAND UNTER ÜBERSCHRIFTEN -----------------------------------
Der Reset (h1..h6 { margin: 0 }) nimmt jeder Überschrift den Durchschuss →
Text/Buttons kleben direkt darunter („rangeklatscht", Diktat 728). Default-
margin-bottom AUF der Überschrift selbst (nicht auf dem Folge-Element), damit
Komponenten, die ihren Heading-Abstand bereits explizit setzen, sauber
gewinnen: .card h3, .kb-tile h3, .kb-intro h1/h2, .timeline__step h3/h4,
.proof__panel h3 usw. setzen margin direkt auf das gleiche Element und
überschreiben diesen Default (gleiche Spezifität bzw. höher, spätere Quelle).
So bekommt jede „freie" Überschrift verlässlich Luft, ohne doppelte Abstände
in den Spezial-Layouts. */
h1, h2 { margin-bottom: var(--sp-4); }
h3, h4 { margin-bottom: var(--sp-3); }
/* Absätze auf dunklem Grund erben Creme (sonst überschreibt die p-Regel oben
den Hero/Dark-Kontrast und der Untertitel wird unlesbar dunkel) */
.hero p, .hero__lead,
.section--dark p, .section--midnight p { color: var(--c-cream); }
strong { font-weight: 600; }
::placeholder { color: var(--c-placeholder); opacity: 1; }
/* Größen-Hilfsklassen — statt inline font-size im Markup. Halten die Skala
stabil: body = Default, small = eine Stufe kleiner, lead = etwas größer. */
.text-small { font-size: var(--fs-small); line-height: var(--lh-small); }
.text-lead { font-size: var(--fs-lead); line-height: 1.5; } /* Hero/Intro-Vorlauf */
/* Mono-Hilfsklasse (Nummerierungen, kleine numerische Labels) */
.mono {
font-family: var(--font-mono);
font-size: var(--fs-label);
font-variant-numeric: tabular-nums;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* ==========================================================================
4) LAYOUT-PRIMITIVE
========================================================================== */
/* Zentrierter Inhaltscontainer */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
}
/* Sektion: vertikaler Rhythmus + horizontale Content-Ränder */
.section {
padding-block: var(--section-rhythm);
padding-inline: var(--section-pad-x);
}
.section--cream { background: var(--c-cream); }
.section--dark { background: var(--c-primary); color: var(--c-cream); }
.section--midnight { background: var(--c-midnight); color: var(--c-cream); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.section--midnight h1, .section--midnight h2, .section--midnight h3, .section--midnight h4 {
color: var(--c-cream);
}
/* Full-Bleed-Helfer: sprengt jeden Container randlos über die volle Breite */
.full-bleed {
margin-inline: calc(50% - 50vw);
width: 100vw;
max-width: 100vw;
}
/* ==========================================================================
5) EYEBROW (Manrope 14/600 uppercase, mit 32px-Linie davor)
========================================================================== */
.eyebrow {
display: flex;
align-items: center;
gap: var(--sp-4);
font-family: var(--font-sans);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--c-primary);
margin-bottom: var(--sp-4); /* vorher 24px → 16px */
}
.eyebrow::before {
content: "";
width: 32px;
height: 1px;
background: var(--c-primary);
flex: 0 0 auto;
}
/* Auf dunklem Grund: Eyebrow-Text + Linie in Gold */
.section--dark .eyebrow,
.section--midnight .eyebrow,
.hero .eyebrow { color: var(--c-gold); }
.section--dark .eyebrow::before,
.section--midnight .eyebrow::before,
.hero .eyebrow::before { background: var(--c-gold); }
/* ==========================================================================
6) BUTTONS
========================================================================== */
.btn {
display: inline-block;
padding: var(--btn-pad);
font-family: var(--font-sans);
font-size: var(--btn-fs);
font-weight: 500;
letter-spacing: var(--btn-tracking);
text-transform: uppercase;
text-align: center;
border: 1px solid transparent;
transition: background var(--t-fast), color var(--t-fast),
border-color var(--t-fast), transform var(--t-fast);
}
/* Primary — Creme-bg, blaue Schrift; Hover -> Gold */
.btn-primary {
background: var(--c-cream);
color: var(--c-primary);
}
.btn-primary:hover {
background: var(--c-gold);
color: var(--c-primary);
transform: translateY(-2px);
}
/* Secondary — Default jetzt für HELLEN Grund: sichtbarer Navy-Rand + Navy-
Schrift. So ist ein gefüllter Primär-Button (Creme/Navy) und ein umrandeter
Sekundär-Button auf hellem Grund immer klar zu unterscheiden (Diktat 728:
Button-Paare optisch trennbar). Der frühere Creme-Rand (--c-on-dark-border)
war auf hellem Grund praktisch unsichtbar. */
.btn-secondary {
background: transparent;
color: var(--c-primary);
border-color: var(--c-primary);
}
.btn-secondary:hover {
border-color: var(--c-gold);
color: var(--c-gold-dark);
}
/* Auf DUNKLEM Grund (hero / section--dark / section--midnight): zurück auf
Creme-Schrift + transluzenter Creme-Rand, Hover → Gold. Höhere Spezifität
durch den Kontext-Selektor, überschreibt den hellen Default sauber. */
.section--dark .btn-secondary,
.section--midnight .btn-secondary,
.hero .btn-secondary {
color: var(--c-cream);
border-color: var(--c-on-dark-border);
}
.section--dark .btn-secondary:hover,
.section--midnight .btn-secondary:hover,
.hero .btn-secondary:hover {
border-color: var(--c-gold);
color: var(--c-gold);
}
/* Solid-Variante (Marineblau) — z.B. „Über uns"-Button auf hellem Grund */
.btn-solid {
background: var(--c-primary);
color: var(--c-cream);
border-color: var(--c-primary);
}
.btn-solid:hover {
background: var(--c-gold);
color: var(--c-primary);
border-color: var(--c-gold);
}
/* --- BUTTON-GRUPPE (.btn-group) ------------------------------------------
Zwei (oder mehr) nebeneinanderstehende Buttons mit konsistentem Abstand
ZWISCHEN den Buttons UND verlässlichem Abstand DAVOR — damit eine Button-
Reihe nie direkt unter einer Überschrift/Text klebt (Diktat 728). Markup:
(Der .hero__cta-Block bringt seinen eigenen gap bereits mit — diese Klasse
ist für alle Button-Paare AUSSERHALB des Hero gedacht.) */
.btn-group {
display: flex;
flex-wrap: wrap;
gap: var(--sp-4);
margin-top: var(--sp-6);
}
/* ==========================================================================
6b) ADRESS-BLOCK (.address)
--------------------------------------------------------------------------
Einheitliche 4-Zeilen-Anschrift (Diktat 728, globale Regel 1): jede Zeile
eigene Zeile, kein „D-" vor der PLZ, „Deutschland" als eigene Zeile.
Funktioniert mit +
ODER mit Zeilen-Spans:
LUBRY GmbH
Rudolf-Diesel-Straße 2
23611 Bad Schwartau
Deutschland
wird normalerweise kursiv gerendert — hier zurückgesetzt. */
.address {
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: 1.6;
font-style: normal; /* -Default-Kursiv aufheben */
color: var(--c-text);
}
.address strong,
.address .address__name { font-weight: 600; }
/* auf dunklem Grund Creme erben (analog zu den p-Regeln oben) */
.section--dark .address,
.section--midnight .address,
.hero .address { color: var(--c-cream); }
/* ==========================================================================
7) CARDS
========================================================================== */
.card {
background: var(--c-surface);
border: 1px solid var(--c-border);
padding: var(--card-pad);
transition: border-color var(--t-card), transform var(--t-card),
box-shadow var(--t-card);
}
.card:hover {
border-color: var(--c-border-hover);
transform: translateY(-4px);
box-shadow: var(--c-shadow-card);
}
.card__num {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--c-primary);
opacity: 0.7;
}
.card h3 { margin: var(--sp-3) 0 var(--sp-3); }
.card p { color: var(--c-text); opacity: 0.75; font-size: var(--fs-small); line-height: 1.6; }
/* --- Karten-Bild (robust) -----------------------------------------------
Stellt sicher, dass Bilder IN einer Card nie an Kante/Oberkante kleben,
sondern zentriert sitzen. Greift für jedes ![]()
direkt in .card sowie
für die Media-Wrapper-Varianten (.card__media / .card__img). Unterstützt
die Start-Seiten-„Produktbereiche"-Karten. */
.card > img,
.card__img,
.card__media img {
display: block;
margin-inline: auto; /* horizontal zentriert, klebt nie an der Kante */
max-width: 100%;
}
/* Bare-Image direkt in der Card: bekommt Luft nach unten zur Textspalte */
.card > img { margin-bottom: var(--sp-5); }
/* Media-Wrapper: fester Bildbereich, Bild zentriert eingepasst. .card behält
sein Padding für den Text; der Media-Block sitzt sauber zentriert darin.
object-fit:contain = ganzes Bild sichtbar, nie angeschnitten/oben klebend. */
.card__media {
display: flex;
align-items: center;
justify-content: center;
background: var(--c-cream);
overflow: hidden;
margin-bottom: var(--sp-5);
}
.card__media img {
width: 100%;
height: 100%;
object-fit: contain; /* zentriert, nichts wird abgeschnitten */
object-position: center;
}
/* ==========================================================================
7b) KUNDENBEREICH-KACHELN (.kb-grid + .kb-tile)
--------------------------------------------------------------------------
Dashboard-Kacheln im Händlerbereich. .kb-tile wird MIT .card kombiniert
(), erbt also Rahmen/Padding/Hover der Card
und legt nur die Kachel-Anordnung darüber.
Markup-Erwartung:
01
Titel
Kurze Zeile …
In Vorbereitung
… …
========================================================================== */
.kb-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--sp-5);
}
.kb-tile {
display: flex;
flex-direction: column;
/* zusätzliches Hover-Lift über das Card-Lift hinaus kommt von .card:hover;
hier nur Klickbarkeit signalisieren */
cursor: pointer;
}
.kb-tile .card__num { margin-bottom: var(--sp-4); }
/* Titel: feste Zwei-Zeilen-Höhe, damit ein- und zweizeilige Kachel-Titel gleich
viel Platz belegen (Diktat 734: Kacheln „stehen nicht auf einer Flucht, weil
mal ein-, mal zweizeilig"). So starten Fließtext, Status und „… öffnen ›" in
ALLEN Kacheln auf derselben Höhe. 2 × line-height der Subhead-Stufe. */
.kb-tile h3 {
margin: 0 0 var(--sp-3);
min-height: calc(var(--fs-subhead) * var(--lh-subhead) * 2);
}
.kb-tile p { flex: 1; } /* drückt Status/Link ans untere Ende */
.kb-tile__status {
margin-top: var(--sp-4);
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--c-placeholder);
}
.kb-tile__link {
display: inline-block;
margin-top: var(--sp-4);
font-family: var(--font-sans);
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-primary);
border-bottom: 1px solid var(--c-gold);
padding-bottom: 2px;
transition: color var(--t-fast);
}
.kb-tile__link:hover { color: var(--c-gold-dark); }
/* „Live"-Kachel: Gold-Rahmen + goldener Status, hebt die aktive Funktion hervor */
.kb-tile--live { border-color: var(--c-gold); }
.kb-tile--live .kb-tile__status { color: var(--c-gold-dark); }
/* ==========================================================================
8) HERO
========================================================================== */
.hero {
position: relative;
overflow: hidden;
background: var(--c-primary);
color: var(--c-cream);
min-height: 68vh; /* vorher 80vh — weniger Leerraum */
display: flex;
align-items: center;
padding-block: 56px 48px; /* vorher 70/60 */
padding-inline: var(--section-pad-x);
}
/* Voll-deckendes Video im Hintergrund, dezent */
.hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.22;
z-index: 1;
pointer-events: none;
}
/* Goldener Schimmer-Overlay (radial) */
.hero::before {
content: "";
position: absolute;
inset: 0;
background: var(--c-hero-shimmer);
pointer-events: none;
z-index: 2;
}
.hero__inner {
position: relative;
z-index: 3;
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
}
.hero h1 {
color: var(--c-cream);
margin: var(--sp-5) 0 var(--sp-5); /* vorher 28/32 → 24/24 */
}
.hero h1 em { color: var(--c-gold); }
.hero__lead {
font-size: var(--fs-lead); /* = .text-lead */
line-height: 1.5;
max-width: 520px;
opacity: 0.85;
margin-bottom: var(--sp-6); /* vorher 40px → 32px */
}
.hero__cta {
display: flex;
gap: var(--sp-4);
flex-wrap: wrap;
}
/* --- HERO KOMPAKT (.hero--compact) ---------------------------------------
Einheitlicher, schlanker blauer Seitenkopf für ALLE Unterseiten (Diktat 734:
die volle .hero-Höhe von 68vh lässt auf großen Monitoren 3/4 leer, bevor man
ein Bedienfeld sieht). Nur die Startseite behält den großen Video-Hero.
Höhe wird über padding-block aus der --sp-Leiter bestimmt (kein vh), damit
jede Unterseite GLEICH hoch ist — egal ob ein oder drei Zeilen Lead-Text.
statt . */
.hero--compact {
min-height: 0;
align-items: flex-start;
padding-block: var(--sp-7) var(--sp-7); /* 48/48 — kompakt, einheitlich */
}
.hero--compact h1 {
margin: var(--sp-4) 0 var(--sp-4); /* etwas enger als der große Hero */
}
.hero--compact .hero__lead {
margin-bottom: var(--sp-5);
max-width: 640px;
}
/* ==========================================================================
9) SITE-HEADER
========================================================================== */
.site-header {
position: relative;
z-index: 50;
background: var(--c-surface);
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: var(--header-pad-x);
padding-block: 8px;
}
.site-header__logo img,
.site-header__logo svg {
height: var(--logo-height);
width: auto;
}
/* Rechte Seite: Suche + Drawer-Trigger + Sprachschalter (keine Inline-Navi) */
.site-header__actions {
display: flex;
align-items: center;
gap: 20px;
}
.header-search,
.drawer-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--c-primary);
width: 40px;
height: 40px;
transition: color var(--t-fast);
}
.header-search:hover,
.drawer-trigger:hover { color: var(--c-gold); }
.header-search svg,
.drawer-trigger svg { width: 22px; height: 22px; }
/* ==========================================================================
10) SPRACHSCHALTER
========================================================================== */
.lang-switcher {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-family: var(--font-sans);
font-size: var(--fs-label);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.lang-switcher a {
color: var(--c-muted);
padding: 4px 6px;
transition: color var(--t-fast);
}
.lang-switcher a:hover,
.lang-switcher a[aria-current="true"],
.lang-switcher a.is-active { color: var(--c-primary); }
.lang-switcher .lang-sep { color: var(--c-border); }
/* --- .lang-dropdown — Sprach-Auswahl als geschmackvolles Dropdown ----------
Zwei Markup-Wege, beide hier gestylt:
A) (reines HTML, kein JS)
DE
B) (nativ, mobil ok)
Geschlossen: aktuelle Sprache + Chevron. Offen: scrollbare Liste.
Eckig, Manrope, Gold-Hover — LUBRY-konform. */
.lang-dropdown {
position: relative;
font-family: var(--font-sans);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* der geschlossene Auslöser (summary) */
.lang-dropdown > summary {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
color: var(--c-primary);
border: 1px solid var(--c-border);
background: var(--c-surface);
cursor: pointer;
list-style: none; /* kein Default-Dreieck */
transition: border-color var(--t-fast), color var(--t-fast);
}
.lang-dropdown > summary::-webkit-details-marker { display: none; }
.lang-dropdown > summary:hover { border-color: var(--c-gold); color: var(--c-gold-dark); }
/* Chevron, dreht sich beim Öffnen */
.lang-dropdown__chevron {
width: 12px;
height: 12px;
flex: 0 0 auto;
transition: transform var(--t-fast);
}
.lang-dropdown[open] > summary { border-color: var(--c-gold); }
.lang-dropdown[open] .lang-dropdown__chevron { transform: rotate(180deg); }
/* die offene Liste — scrollbar (24 EU-Sprachen passen rein) */
.lang-dropdown__list {
position: absolute;
top: calc(100% + 4px);
right: 0;
z-index: 60;
min-width: 180px;
max-height: 280px;
overflow-y: auto;
background: var(--c-surface);
border: 1px solid var(--c-border);
box-shadow: var(--c-shadow-card);
padding: var(--sp-1) 0;
}
.lang-dropdown__list a {
display: block;
padding: var(--sp-2) var(--sp-4);
color: var(--c-muted);
text-transform: none;
letter-spacing: 0;
transition: background var(--t-fast), color var(--t-fast);
}
.lang-dropdown__list a:hover { background: var(--c-cream); color: var(--c-primary); }
.lang-dropdown__list a[aria-current="true"],
.lang-dropdown__list a.is-active { color: var(--c-primary); font-weight: 600; }
/* Native-Select-Variante (gleiches Aussehen, mobil bequem) */
.lang-dropdown__select {
appearance: none;
-webkit-appearance: none;
font-family: var(--font-sans);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--c-primary);
background: var(--c-surface);
border: 1px solid var(--c-border);
padding: var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3);
cursor: pointer;
/* eingebetteter Chevron als SVG-Hintergrund (Gold-Strich) */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B8964E' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--sp-3) center;
transition: border-color var(--t-fast);
}
.lang-dropdown__select:hover { border-color: var(--c-gold); }
/* ==========================================================================
11) OFFCANVAS-DRAWER / NAVIGATION
--------------------------------------------------------------------------
Markup-Erwartung:
Reines CSS, kein JS nötig (Checkbox-Hack). JS-Variante: .is-open auf .drawer
und .drawer-backdrop togglen.
========================================================================== */
.drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(6, 26, 50, 0.55);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
z-index: 90;
}
.drawer {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: min(440px, 90vw);
background: var(--c-surface);
z-index: 100;
transform: translateX(100%);
transition: transform 0.35s var(--ease);
display: flex;
flex-direction: column;
padding: var(--sp-7); /* vorher 48px (= sp-7, unverändert) */
overflow-y: auto;
box-shadow: -30px 0 60px -30px rgba(11, 41, 72, 0.25);
}
.drawer__close {
align-self: flex-end;
color: var(--c-primary);
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color var(--t-fast);
}
.drawer__close:hover { color: var(--c-gold); }
.drawer__nav {
display: flex;
flex-direction: column;
gap: var(--sp-1);
margin-top: var(--sp-6);
}
.drawer__nav a {
font-family: var(--font-serif);
font-weight: 400;
font-variation-settings: 'opsz' 30, 'SOFT' 30, 'WONK' 0;
font-size: var(--fs-heading-mobile); /* 28px = Heading-Stufe (mobil) */
line-height: 1.25;
color: var(--c-primary);
padding: 10px 0;
border-bottom: 1px solid var(--c-border);
transition: color var(--t-fast);
}
.drawer__nav a:hover,
.drawer__nav a[aria-current="page"] { color: var(--c-gold); }
/* offen-Zustände */
.drawer-toggle:checked ~ .drawer,
.drawer.is-open { transform: translateX(0); }
.drawer-toggle:checked ~ .drawer-backdrop,
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }
body.drawer-open { overflow: hidden; }
/* ==========================================================================
12) SITE-FOOTER (weiß, einzeilig)
========================================================================== */
.site-footer {
background: var(--c-surface);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--sp-4);
padding-inline: var(--header-pad-x);
padding-block: var(--sp-6);
font-family: var(--font-sans);
font-size: var(--fs-small);
color: var(--c-primary);
border-top: 1px solid var(--c-border);
}
.site-footer a {
color: var(--c-primary);
transition: color var(--t-fast);
}
.site-footer a:hover { color: var(--c-gold); }
.site-footer__nav {
display: flex;
align-items: center;
gap: var(--sp-6);
}
.site-footer__copyright { font-size: var(--fs-small); color: var(--c-primary); }
/* ==========================================================================
13) RESPONSIVE
========================================================================== */
@media (max-width: 900px) {
:root {
--section-rhythm: 40px; /* vorher 56px — mobil noch dichter */
}
h1 { font-size: var(--fs-display-mobile); line-height: 1.1; }
h2 { font-size: var(--fs-heading-mobile); }
.hero {
min-height: auto;
padding-block: var(--sp-7) var(--sp-7); /* 48/48, vorher 64/56 */
}
.hero__lead { font-size: var(--fs-body); }
.site-footer { flex-direction: column; align-items: flex-start; }
.site-footer__nav { gap: var(--sp-5); flex-wrap: wrap; }
}
@media (max-width: 560px) {
.card { padding: var(--sp-5); } /* 24px statt 32px */
.drawer { padding: var(--sp-6); } /* 32px */
.drawer__nav a { font-size: var(--fs-subhead); } /* 22px */
}
/* ==========================================================================
15) KUNDENBEREICH-KOMPONENTEN (Sub-Pages: Angebote, Bestellungen, Chat …)
--------------------------------------------------------------------------
Angehängt 2026-06-04. Erweitert das Design-System um die Bausteine, die der
eingeloggte Kundenbereich (Händler-Login) auf seinen Unterseiten braucht.
Alles token-getrieben (--c-*, --sp-*, --fs-*), eckig, Fraunces/Manrope,
Navy/Creme/Gold — exakt wie der Rest. KEINE neuen Farb-/Größen-Werte erfunden.
========================================================================== */
/* --- 15.1 Sprach-Select (bare) ------------------------------------------
Der Header rendert die Sprachwahl als nacktes