/* _colors.css */
/* ==========================================================================
HOLDER OFT COLOR TOKENS
Mechanik aus breuning-irco-child übernommen (Leitern und Kontrast),
Palette und heller Holder-Standard.
========================================================================== */
:root {
/* Palette & Rollen — Werte identisch mit dem Bricks-Design-System
der Sandbox (Palette „Holder", Light-Werte).
blue = Brand / Akzent → Primary-Actions, Links, Akzente
dark-blue = dunkle Bänder → Claim-Sektionen, Footer, Hero-Fond
die übrigen Blues = Flächen-/Stützwerte von hell nach dunkel */
--palette-white: #ffffff;
--palette-black: #000000;
--palette-charcoal: #14293a;
/* Holder-Blau — harmonische sechsstufige Markenpalette. */
--palette-blue-600: #0070b8;
--palette-blue-500: #2e8ac5;
--palette-blue-400: #529ecf;
--palette-blue-300: #85badd;
--palette-blue-200: #b2d4ea;
--palette-blue-100: #f0f4f6;
--palette-blue: var(--palette-blue-600); /* primary-blue */
--palette-dark-blue: #002137;
--palette-medium-blue: #3b6c94;
--palette-steel-blue: #404f6e;
--palette-muted-blue: var(--palette-blue-300);
--palette-soft-blue: var(--palette-blue-200);
--palette-pale-blue: #dbebf5;
--palette-highlight-blue: #cfdde5;
--palette-light-gray-blue: var(--palette-blue-100);
--palette-soft-gray-blue: #eef2f5;
--palette-muted-gray: #f4f6f7;
/* KEINE Neutral-Skala einführen — Abstufungen laufen über die Leitern
(--fg-N / --accent-N / --overlay-N), Flächen über --surface-raised-*.
--palette-muted-gray ist ein einzelner Holder-Flächenwert, keine Skala.
(Learning aus der Breuning-Farbtoken-Migration.) */
/* ------------------------------------------------------------------
SEMANTISCHE BASIS — Holder: Light als Default.
Komponenten greifen NIE direkt auf die Palette zu, sondern auf
--fg / --accent / --surface-page / --overlay-base bzw. die Leitern.
------------------------------------------------------------------ */
--fg: var(--palette-black);
--surface-page: var(--palette-white);
--accent: var(--palette-blue);
--overlay-base: var(--palette-black);
/* Wie stark --accent-readable Richtung Vordergrund gezogen wird.
Eigener Token, weil die Leiter auf `*` liegt (siehe unten). */
--accent-readable-mix: 70%;
/* Akzent-Leiter (Eyebrow-Fonds, Glows, Tints) */
--accent-10: color-mix(in srgb, var(--accent) 10%, transparent);
--accent-20: color-mix(in srgb, var(--accent) 20%, transparent);
--accent-30: color-mix(in srgb, var(--accent) 30%, transparent);
--accent-40: color-mix(in srgb, var(--accent) 40%, transparent);
--accent-50: color-mix(in srgb, var(--accent) 50%, transparent);
--accent-60: color-mix(in srgb, var(--accent) 60%, transparent);
--accent-70: color-mix(in srgb, var(--accent) 70%, transparent);
--accent-80: color-mix(in srgb, var(--accent) 80%, transparent);
--accent-90: color-mix(in srgb, var(--accent) 90%, transparent);
/* Overlay-Leiter (Overlays, Backdrops, Panel-Fonds) */
--overlay-10: color-mix(in srgb, var(--overlay-base) 10%, transparent);
--overlay-20: color-mix(in srgb, var(--overlay-base) 20%, transparent);
--overlay-30: color-mix(in srgb, var(--overlay-base) 30%, transparent);
--overlay-40: color-mix(in srgb, var(--overlay-base) 40%, transparent);
--overlay-50: color-mix(in srgb, var(--overlay-base) 50%, transparent);
--overlay-60: color-mix(in srgb, var(--overlay-base) 60%, transparent);
--overlay-70: color-mix(in srgb, var(--overlay-base) 70%, transparent);
--overlay-80: color-mix(in srgb, var(--overlay-base) 80%, transparent);
--overlay-90: color-mix(in srgb, var(--overlay-base) 90%, transparent);
/* Angehobene Flächen — Panels, Dialoge, Karten über dem Seitengrund.
Auf hellem Grund heißt das: minimal abgedunkelte Flächen. */
--surface-raised-soft: color-mix(in srgb, var(--fg) 3%, var(--surface-page));
--surface-raised: color-mix(in srgb, var(--fg) 6%, var(--surface-page));
--surface-raised-strong: color-mix(in srgb, var(--fg) 9%, var(--surface-page));
/* Helle Flächen und Trennlinien, die IMMER hell bleiben (Formulare,
helle Bänder). Theme-fest, deshalb Palette statt --fg. */
--surface-muted-light: var(--palette-light-gray-blue);
--divider-on-light: color-mix(in srgb, var(--palette-black) 11%, var(--palette-white));
/* Fremdlogos monochrom auf hellem Grund: schwarz, kein Invertieren. */
--logo-filter: brightness(0);
/* Backgrounds and content contrast */
--bg-dark: var(--palette-dark-blue);
--bg-light: var(--palette-white);
--bg-accent: var(--palette-blue);
--bg-muted: var(--palette-muted-gray);
--on-bg-dark: var(--palette-white);
--on-bg-light: var(--palette-black);
--on-bg-accent: var(--palette-white);
--on-bg-footer: var(--palette-white);
--on-bg-image: var(--palette-white);
--on-bg-image-light-title: var(--palette-charcoal);
--on-bg-image-title-shadow:
0 2px 12px color-mix(in srgb, var(--palette-charcoal) 46%, transparent),
0 8px 38px color-mix(in srgb, var(--palette-charcoal) 30%, transparent);
--on-bg-image-light-title-shadow:
0 2px 12px color-mix(in srgb, var(--palette-charcoal) 34%, transparent),
0 8px 34px color-mix(in srgb, var(--palette-charcoal) 22%, transparent),
0 0 8px rgb(255 255 255 / 0.9),
0 0 42px rgb(255 255 255 / 0.85);
--on-bg-image-highlight: #264e68;
--hero-overlay-block-start: rgb(0 0 0 / 0.15);
--hero-overlay-block-end: rgb(0 0 0 / 0.65);
/* Actions */
--action-primary: var(--palette-blue);
--on-action-primary: var(--palette-white);
--action-secondary: var(--palette-dark-blue);
--btn-primary-bg: var(--action-primary);
--btn-primary-color: var(--on-action-primary);
/* Interface */
--ui-divider: var(--divider-on-light);
--ui-divider-light: var(--accent-20);
--ui-eyebrow-bg: var(--accent-30);
--link-underline: var(--palette-blue);
--text-highlight: var(--palette-highlight-blue);
/* Native FAQ-/Accordion-Komponente aus dem Breuning-Framework. */
--faq-icon-color: var(--accent);
--faq-question-hover-color: var(--faq-icon-color);
--faq-link-color: var(--link-underline);
--faq-focus-color: var(--faq-icon-color);
--nav-bg: var(--palette-white);
--nav-link: var(--palette-dark-blue);
--nav-link-hover: var(--palette-blue);
--nav-indicator: var(--palette-blue);
--ui-surface-glass-blur: 10px;
--on-ui-surface-glass: var(--palette-blue);
}
/* ==========================================================================
VORDERGRUND-LEITER — bewusst auf `*`, nicht auf :root
==========================================================================
Custom Properties werden dort ausgerechnet, wo sie DEKLARIERT sind.
Stünde --fg-70 in :root, würde es einmal mit dem dortigen --fg
substituiert; ein Bereich, der --fg lokal pinnt (dunkles Band, Hero,
Footer), erbte trotzdem den fertig gerechneten Root-Wert. Auf `*`
deklariert, rechnet JEDES Element die Leiter mit dem --fg, das bei ihm
gilt. Deshalb stehen hier nur die --fg-ABHÄNGIGEN Tokens; --accent-N
und --overlay-N werden nie pro Bereich gepinnt und bleiben in :root.
========================================================================== */
*,
::before,
::after {
--fg-10: color-mix(in srgb, var(--fg) 10%, transparent);
--fg-20: color-mix(in srgb, var(--fg) 20%, transparent);
--fg-30: color-mix(in srgb, var(--fg) 30%, transparent);
--fg-40: color-mix(in srgb, var(--fg) 40%, transparent);
--fg-50: color-mix(in srgb, var(--fg) 50%, transparent);
--fg-60: color-mix(in srgb, var(--fg) 60%, transparent);
--fg-70: color-mix(in srgb, var(--fg) 70%, transparent);
--fg-80: color-mix(in srgb, var(--fg) 80%, transparent);
--fg-90: color-mix(in srgb, var(--fg) 90%, transparent);
/* Hängt ebenfalls an --fg (Akzent Richtung Vordergrund gezogen). */
--accent-readable: color-mix(in srgb, var(--accent) var(--accent-readable-mix), var(--fg));
/* Semantische Kurznamen — müssen mitwandern, sie lesen die Leiter. */
--divider: var(--fg-10);
--border: var(--fg-20);
--fg-soft: var(--fg-50);
--fg-muted: var(--fg-60);
--surface-tint: var(--fg-10);
--surface-border: var(--fg-10);
--ui-border: var(--fg-10);
--ui-divider-dark: var(--fg-20);
/* Glas-Staffelung: base < bg < border. Base bleibt bewusst unterhalb
der Leiter (4%), als benannter Sonderwert statt als 5er-Stufe. */
--ui-surface-glass-base: color-mix(in srgb, var(--fg) 4%, transparent);
--ui-surface-glass-bg: var(--fg-10);
--ui-surface-glass-border: var(--fg-20);
}
/* ==========================================================================
HIGH CONTRAST — [data-contrast="high"], Umschalter siehe functions.php
==========================================================================
Der Standardmodus bleibt gestalterisch frei. Diese Ebene macht relevante
Abstufungen deckend und Seitengrund/Vordergrund eindeutig. Volle
WCAG-Konformität umfasst darüber hinaus Semantik, Fokus, Tastatur,
Formulare — separat auditieren.
Komponentenspezifische Kontrast-Overrides (Overlays, Scrims, Karten)
werden hier ergänzt, sobald die jeweilige Komponente portiert/gebaut
ist — Muster siehe breuning-irco-child/css/_colors.css ab Zeile 325.
========================================================================== */
:root[data-contrast="high"] {
--surface-page: var(--palette-white);
/* Niedrige Akzentstufen bleiben helle, deckende Flächen. Würden auch sie
vollflächig Markenblau, kollidierte schwarzer Inhaltstext mit nur rund
4:1 Kontrast. Ab Stufe 40 bleibt die kräftige Signalfarbe erhalten. */
--accent-10: color-mix(in srgb, var(--accent) 12%, var(--surface-page));
--accent-20: color-mix(in srgb, var(--accent) 20%, var(--surface-page));
--accent-30: color-mix(in srgb, var(--accent) 30%, var(--surface-page));
--accent-40: var(--accent);
--accent-50: var(--accent);
--accent-60: var(--accent);
--accent-70: var(--accent);
--accent-80: var(--accent);
--accent-90: var(--accent);
--surface-raised-soft: var(--surface-page);
--surface-raised: var(--surface-page);
--surface-raised-strong: var(--surface-page);
--ui-divider: var(--fg);
--ui-divider-light: var(--accent);
--ui-eyebrow-bg: var(--accent);
--text-highlight: var(--accent);
--on-bg-image-highlight: var(--accent);
}
:root[data-contrast="high"] *,
:root[data-contrast="high"] ::before,
:root[data-contrast="high"] ::after {
--fg-10: var(--fg);
--fg-20: var(--fg);
--fg-30: var(--fg);
--fg-40: var(--fg);
--fg-50: var(--fg);
--fg-60: var(--fg);
--fg-70: var(--fg);
--fg-80: var(--fg);
--fg-90: var(--fg);
--accent-readable: var(--fg);
--divider: var(--fg);
--border: var(--fg);
--fg-soft: var(--fg);
--fg-muted: var(--fg);
--surface-tint: transparent;
--surface-border: var(--fg);
--ui-border: var(--fg);
--ui-divider-dark: var(--fg);
--ui-surface-glass-base: var(--surface-page);
--ui-surface-glass-bg: var(--surface-page);
--ui-surface-glass-border: var(--fg);
}
:root[data-contrast="high"] :focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}
/* Die flächige Holder-Unterlegung dient im Standardmodus als dekorativer
Akzent. Im Hochkontrastmodus bleibt starke Betonung ausschließlich fett. */
:root[data-contrast="high"] strong {
box-shadow: none;
}
/* Über Bildern bleibt im Kontrastmodus eine ruhige, einfarbige
Dunkelfläche für die Textlesbarkeit; reine Dekoration wird entfernt.
Echte Hintergrundbilder werden bewusst nicht global entfernt. */
:root[data-contrast="high"] a:not([class*="btn"]):not([class*="card"]) {
text-decoration-thickness: max(2px, 0.12em);
text-underline-offset: 0.18em;
}
/* ==========================================================================
ÜBERGANGS-ALIASE — Altbestand der Bricks-Sandbox. DEPRECATED.
==========================================================================
Die Sandbox-Klassen (ep-*, alte Globalklassen) referenzieren noch die
Bricks-Variablennamen. Diese Aliase halten sie am Leben, damit die
Bricks-Globalvariablen gelöscht werden können (Ziel: kein Inline-CSS).
In NEUEM Code ausschließlich die Framework-Tokens verwenden
(--palette-*, --fg/--accent, --heading-* und --text-*). Block entfernen,
sobald die Altklassen migriert sind.
Font-Size-Werte: alte Sandbox-Werte, rem ×1.6 auf 10px-Root
umgerechnet; defekte Originale als effektive Konstanten
(font-size-s hatte max < min und renderte konstant 0.8rem@16px).
========================================================================== */
:root {
--primary-blue: var(--palette-blue);
--dark-blue: var(--palette-dark-blue);
--medium-blue: var(--palette-medium-blue);
--steel-blue: var(--palette-steel-blue);
--muted-blue: var(--palette-muted-blue);
--soft-blue: var(--palette-soft-blue);
--pale-blue: var(--palette-pale-blue);
--light-gray-blue: var(--palette-light-gray-blue);
--soft-gray-blue: var(--palette-soft-gray-blue);
--muted-gray: var(--palette-muted-gray);
--white: var(--palette-white);
--black: var(--palette-black);
--font-size-s: 1.28rem;
--font-size-base: clamp(12px, 0.6vw, 15px);
--font-size-m: clamp(2.176rem, calc(1.05vi + 1.76rem), 3.088rem);
--font-size-ml: clamp(2.256rem, calc(1.5vi + 1.664rem), 3.568rem);
--font-size-l: clamp(2.496rem, calc(2.02vi + 1.696rem), 4.272rem);
--font-size-2l: clamp(3.088rem, calc(2.662vi + 1.8304rem), 5.8784rem);
--font-size-xl: clamp(3.12rem, calc(3.74vi + 1.632rem), 6.416rem);
--font-size-2xl: clamp(3.904rem, calc(6.49vi + 1.312rem), 9.616rem);
--font-size-3xl: clamp(4.88rem, calc(10.85vi + 0.544rem), 14.432rem);
}
/* _settings.css */
:root {
/* --------------------------------------------------------------------------
1. SECTION PADDING
-------------------------------------------------------------------------- */
--section-padding-top-none: 0;
--section-padding-bottom-none: 0;
--section-padding-top-xs: clamp(0.75rem, 2vw, 2.25rem);
--section-padding-bottom-xs: clamp(0.9rem, 2.5vw, 3rem);
--section-padding-top-s: clamp(1.5rem, 3.75vw, 4.5rem);
--section-padding-bottom-s: clamp(1.85rem, 4.5vw, 6rem);
--section-padding-top-m: clamp(2.25rem, 5.5vw, 6.75rem);
--section-padding-bottom-m: clamp(2.8rem, 7vw, 9rem);
--section-padding-top-l: clamp(3rem, 7.5vw, 9rem);
--section-padding-bottom-l: clamp(3.75rem, 9vw, 12rem);
--section-padding-top-xl: clamp(4rem, 10vw, 12rem);
--section-padding-bottom-xl: clamp(5rem, 12vw, 16rem);
/* --------------------------------------------------------------------------
2. SPACING SCALE
-------------------------------------------------------------------------- */
/* Fluid spacing for layout rhythm and responsive component padding.
Stufen 3xs–3xl: aus den Bricks-Globalvariablen der Holder-Sandbox
übernommen (2026-07-22), rem-Anteile ×1.6 auf 10px-Root umgerechnet —
das gerenderte Ergebnis entspricht der alten Site. Defekte Originale
als effektive Konstanten portiert (3xs war konstant; 2xl hatte
min > max und renderte konstant 6rem@16px = 9.6rem@10px).
ACHTUNG Altbestand: die Skala ist ab 2xl nicht monoton (3xl kann
unter 2xl fallen) — bewusst so übernommen, Design-Cleanup separat.
Stufen 5xs/4xs/4xl/5xl: Framework-Ergänzungen (Breuning-Werte),
kein Holder-Pendant. */
--gap-5xs: clamp(0.35rem, calc(0.32rem + 0.10vw), 0.45rem);
--gap-4xs: clamp(0.45rem, calc(0.40rem + 0.15vw), 0.60rem);
--gap-3xs: 0.5rem;
--gap-2xs: clamp(0.9rem, calc(0.8653rem + 0.1087vi), 1rem);
--gap-xs: clamp(1.4rem, calc(1.3653rem + 0.1087vi), 1.5rem);
--gap-s: clamp(1.8rem, calc(1.7304rem + 0.2174vi), 2rem);
--gap-m: clamp(2.7rem, calc(2.5957rem + 0.3261vi), 3rem);
--gap-l: clamp(3.6rem, calc(3.4608rem + 0.4348vi), 4rem);
--gap-xl: clamp(5.4rem, calc(5.1914rem + 0.6522vi), 6rem);
--gap-2xl: 9.6rem;
--gap-3xl: clamp(3.6rem, calc(6vw + 1.2rem), 21.648rem);
--gap-3xl-alt: clamp(5.4rem, calc(5.16305vw + 0.8098vi), 14.824rem);
--gap-4xl: clamp(5.50rem, calc(3.70rem + 5.40vw), 10.00rem);
--gap-5xl: clamp(6.80rem, calc(4.45rem + 7.20vw), 13.00rem);
/* Fixed spacing for controls and dimensions that should not grow. */
--space-5xs: 0.375rem;
--space-4xs: 0.5rem;
--space-3xs: 0.625rem;
--text-highlight-thickness: 0.4rem;
--space-2xs: 0.75rem;
--space-xs: 1rem;
--space-s: 1.25rem;
--space-m: 1.5rem;
--space-l: 2rem;
--space-xl: 3rem;
--space-2xl: 4rem;
--space-3xl: 5rem;
--space-4xl: 6rem;
--space-5xl: 8rem;
/* --------------------------------------------------------------------------
3. BORDER RADIUS
-------------------------------------------------------------------------- */
--radius-none: 0;
--radius-xs: 0.25rem;
--radius-s: 0.375rem;
--radius-m: 0.5rem;
--radius-l: 0.75rem;
--radius-xl: 1rem;
--radius-full: 999px;
/* Semantische Radii aus den Bricks-Globalvariablen der Holder-Sandbox
(px-basiert, keine Root-Umrechnung nötig). Von ep-card & Co.
referenziert. */
--radius-btn: clamp(4px, calc(0.5vw + 3px), 8px);
--radius-card: clamp(6px, calc(1vw + 5px), 12px);
--radius-img: clamp(16px, calc(2vw + 12px), 24px);
--radius-section: clamp(52px, calc(4vw + 40px), 88px);
/* --------------------------------------------------------------------------
4. Z-INDEX SCALE
-------------------------------------------------------------------------- */
--z-base: 1;
--z-raised: 10;
--z-overlay: 100;
--z-fixed: 900;
--z-modal: 1000;
/* --------------------------------------------------------------------------
5. CONTAINER
-------------------------------------------------------------------------- */
--container-width-narrow: 800px;
--container-width-medium: 1140px;
--container-width: 1600px;
--container-width-frame: 1680px;
--container-width-wide: 1800px;
--container-width-xwide: 1920px;
--container-gutter: clamp(3rem, 5vw, 8rem);
--container-gutter-mobile: clamp(2rem, 4vw, 3rem);
--text-width-s: 52ch;
--text-width-m: 64ch;
--text-width-l: 76ch;
--text-width-xl: 88ch;
/* --------------------------------------------------------------------------
7. HEADER
-------------------------------------------------------------------------- */
/* Fallback vor JS-Messung (header.js misst die echte gerenderte Hoehe und
setzt --header-height als Inline-Custom-Property auf :root). Nur fuer
Content-Offset (#brx-content padding-top) — NICHT fuer die Hoehe von
.nav-wrapper selbst, dafuer --mainbar-height (sonst Zirkelbezug: die
Hoehe, die man misst, waere von sich selbst abhaengig). */
--header-height: 120px;
--mainbar-height: 80px;
/* --------------------------------------------------------------------------
6. HERO DIMENSIONS
-------------------------------------------------------------------------- */
--ratio-wide: calc(12 / 5);
--ratio-cinematic: calc(21 / 9);
--ratio-panorama: calc(2 / 1);
--ratio-standard: calc(16 / 9);
--ratio-classic: calc(4 / 3);
--ratio-square: 1;
--ratio-portrait: calc(4 / 5);
--hero-h-large: clamp(450px, min(90vh, 100vw / var(--ratio-wide)), 800px);
--hero-h-medium: clamp(350px, min(60vh, 100vw / calc(16 / 7)), 550px);
--hero-h-small: clamp(250px, min(40vh, 100vw / calc(16 / 5)), 400px);
--hero-intro-height: var(--hero-h-large);
--hero-subpage-height: var(--hero-h-medium);
--archive-height: var(--hero-h-small);
}
/* _fonts.css */
/* ==========================================================================
FONTS — Montserrat (Holder-Hausschrift)
Quelle: Kunden-Fontpaket (Montserrat v12, Subset latin — deckt Umlaute
und ß ab). Gewichte entsprechen den Tokens in _typography.css.
========================================================================== */
@font-face {
font-family: "Montserrat";
src: url("../assets/fonts/montserrat-v12-latin-300.woff2") format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src: url("../assets/fonts/montserrat-v12-latin-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src: url("../assets/fonts/montserrat-v12-latin-500.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src: url("../assets/fonts/montserrat-v12-latin-600.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src: url("../assets/fonts/montserrat-v12-latin-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* _typography.css */
/* ==========================================================================
TYPOGRAPHY
========================================================================== */
:root {
/* 1. Fonts & Weights
-------------------------------------------------------------------------- */
--font-primary: "Montserrat", "Helvetica Neue", Arial, sans-serif;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* 2. Headline Scale (Fluid)
-------------------------------------------------------------------------- */
--heading-5xl: clamp(3.2rem, calc(2.1rem + 3.7vw), 8.6rem);
--heading-4xl: clamp(2.9rem, calc(1.8rem + 3.4vw), 7.8rem);
--heading-3xl: clamp(2.6rem, calc(1.5rem + 3.1vw), 7rem);
--heading-2xl: clamp(2.3rem, calc(1.2rem + 2.8vw), 6.3rem);
--heading-xl: clamp(2.0rem, calc(1.0rem + 2.6vw), 5.7rem);
--heading-l: clamp(1.7rem, calc(0.8rem + 2.2vw), 4.7rem);
--heading-m: clamp(1.45rem, calc(0.6rem + 1.9vw), 3.9rem);
--heading-s: clamp(1.25rem, calc(0.3rem + 1.8vw), 3.1rem);
--heading-xs: clamp(1.1rem, calc(0.3rem + 1.4vw), 2.5rem);
--heading-2xs: clamp(1rem, calc(0.3rem + 1.0vw), 2rem);
--heading-3xs: clamp(0.85rem, calc(0.3rem + 0.7vw), 1.5rem);
/* 3. Body & UI Text Scale (Fluid)
-------------------------------------------------------------------------- */
--text-3xs: clamp(0.9rem, calc(0.85rem + 0.15vw), 1rem);
--text-2xs: clamp(1rem, calc(0.95rem + 0.2vw), 1.15rem);
--text-xs: clamp(1.2rem, calc(1.1rem + 0.25vw), 1.4rem);
--text-s: clamp(1.4rem, calc(1.3rem + 0.3vw), 1.6rem);
--text-m: clamp(1.6rem, calc(1.45rem + 0.5vw), 1.8rem);
--text-l: clamp(1.7rem, calc(1.4rem + 0.8vw), 2.0rem);
/* 4. Line Heights
-------------------------------------------------------------------------- */
--line-height-compressed: calc(4px + 1.65ex);
--line-height-heading: 1.05;
--line-height-body: calc(8px + 2.13ex);
--line-height-base: 1.6;
/* 5. Letter Spacing
-------------------------------------------------------------------------- */
--ls-body: 0.012em;
--ls-s: 0;
--ls-m: 0.05em;
--ls-l: 0.1em;
--ls-xl: 0.2em;
/* 6. Hyphenation
-------------------------------------------------------------------------- */
--hyphens-none: none; /* Buttons, Labels, Overlines */
--hyphens-manual: manual; /* Headings – nur wo gesetzt */
--hyphens-auto: auto; /* Fließtext, Body */
}
@media (max-width: 767px) {
:root {
--line-height-heading: 1.05;
--line-height-body: calc(4px + 2.13ex);
--line-height-base: 1.55;
}
}
/* ==========================================================================
RESET
========================================================================== */
body {
font-family: var(--font-primary);
line-height: var(--line-height-base);
letter-spacing: var(--ls-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: var(--font-display, var(--font-primary));
line-height: var(--line-height-heading);
hyphens: var(--hyphens-manual);
overflow-wrap: break-word;
text-wrap: balance;
}
h1,
h2 {
font-style: normal;
font-weight: var(--font-weight-regular);
text-transform: uppercase;
}
h3,
.c-content__title:is(h3) {
font-weight: var(--font-weight-bold);
}
a {
word-break: keep-all;
overflow-wrap: normal;
hyphens: none;
}
p {
hyphens: auto;
hyphenate-limit-chars: 6 3 3;
hyphenate-limit-lines: 2;
hyphenate-limit-last: always;
overflow-wrap: break-word;
}
ul li {
hyphens: auto;
hyphenate-limit-chars: 10 4 4;
hyphenate-limit-lines: 1;
hyphenate-limit-last: always;
overflow-wrap: break-word;
}
/* _elements.css */
/* ==========================================================================
BASE ELEMENTS
========================================================================== */
/**
* 1. Globaler Reset & Box-Sizing
* Sorgt dafür, dass Padding die Breite nicht vergrößert.
*/
*, *::before, *::after {
box-sizing: border-box;
}
/**
* 2. Body & HTML
* Grundstimmung der Seite.
*/
html {
/* 10px-Root wie bei Breuning: 1rem = 10px. Die alte Holder-Site wollte
das auch, hatte aber "62,5%" MIT KOMMA (ungültig) und lief faktisch
auf 16px — alle aus der Sandbox portierten rem-Werte sind deshalb
×1.6 umgerechnet (siehe _settings.css). */
font-size: 62.5%;
scroll-behavior: smooth;
hyphens: auto;
-webkit-hyphens: auto;
overflow-x: clip; /* verhindert horizontales Scrolling ohne sticky zu brechen */
}
body {
/* Seitengrund — hängt an der semantischen Basis, nicht an der Palette. */
background: var(--surface-page) !important;
color: var(--fg);
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/**
* 3. Bricks Container-Reset
* Bricks setzt width: 1100px via @layer — unser unlayertes CSS schlägt das.
* .brxe-container verhält sich damit wie .l-container (zentrales CSS-System).
*/
.brxe-container {
width: 85%;
max-width: var(--container-width);
margin-inline: auto;
padding-inline: 0;
}
/**
* 4. Content-Wrapper
*/
#brx-content {
background: var(--surface-page) !important;
min-height: 100vh;
display: flex;
flex-direction: column;
padding-block-end: var(--section-padding-bottom-xl);
}
/**
* 5. Typografie-Basics (HTML-Tags)
* Vertikaler Rhythmus läuft über die Gap-Variablen (u-paragraph-spacing etc.).
*/
p, ul, ol, blockquote {
margin-top: 0;
margin-bottom: 0;
}
/* Holder-Auszeichnung: ruhige Unterlegung statt Markerfläche. */
strong {
box-shadow: 0 calc(-1 * var(--text-highlight-thickness)) 0 var(--text-highlight) inset;
}
/**
* 6. Medien-Elemente
* Verhindert, dass Bilder das Layout sprengen.
*/
img, video, svg {
max-width: 100%;
height: auto;
display: block; /* Verhindert kleine Lücken unter Bildern */
}
/**
* 7. Links
* Basis-Styling für Textlinks.
*/
a {
color: inherit;
text-decoration: none;
text-underline-offset: 2px;
}
/**
* 8. Formular-Basics
* Damit Inputs nicht die Standard-Browser-Fonts nutzen.
*/
input, button, textarea, select {
font: inherit;
}
/**
* 9. Bricks-Container-Reset innerhalb von Framework-Layouts
* Bricks setzt width:1100px + margin:auto auf .brxe-container.
* In Framework-Layouts muss das zurückgesetzt werden, damit Grid- und
* Flex-Kinder ihre volle flexible Breite bekommen.
*/
.l-grid > .brxe-container,
.l-split > .brxe-container,
.l-flex > .brxe-container,
.l-stack > .brxe-container,
.l-cluster > .brxe-container {
width: 100%;
margin-left: 0;
margin-right: 0;
}
/**
* 10. Bricks Query-Trail-Marker
* Leeres Anker-Element, das Bricks nach jedem Query Loop rendert
* (Load-More/AJAX-Filter). Als erzeugt es sonst leere
* Listeneinträge (Screenreader-Zählung, verwaiste Bullets).
*/
.brx-query-trail {
display: none !important;
}
/* _layout.css */
/* ==========================================================================
LAYOUT (_layout.css)
Utility-Klassen für Grid, Flexbox und Layout-Patterns
Breakpoints: md 767px | lg 1023px
========================================================================== */
/* ==========================================================================
1. CONTAINER
========================================================================== */
.l-container {
width: 85%;
margin-inline: auto;
padding-inline: 0;
max-width: var(--container-width);
}
.l-container--narrow { max-width: var(--container-width-narrow); }
.l-container--medium { max-width: var(--container-width-medium); }
.l-container--wide { max-width: var(--container-width-wide); }
.l-container--xwide { max-width: var(--container-width-xwide); }
.l-container--full {
width: 100%;
max-width: none;
padding-inline: 0;
}
.l-frame {
--frame-width: var(--container-width-frame);
--frame-gutter: var(--container-gutter-mobile);
width: min(100% - (var(--frame-gutter) * 2), var(--frame-width));
margin-inline: auto;
}
@media (min-width: 768px) {
.l-frame {
--frame-gutter: var(--container-gutter);
}
}
.l-frame--narrow { --frame-width: var(--container-width-narrow); }
.l-frame--medium { --frame-width: var(--container-width-medium); }
.l-frame--wide { --frame-width: var(--container-width-wide); }
.l-frame--bleed { --frame-width: calc(100vw - (var(--frame-gutter) * 2)); }
/* ==========================================================================
2. GRID
========================================================================== */
.l-grid {
display: grid;
align-items: start;
--grid-min-col-width: 300px;
--grid-gap: 0;
--grid-gap-x: var(--grid-gap);
--grid-gap-y: var(--grid-gap);
gap: var(--grid-gap-y) var(--grid-gap-x);
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min-col-width)), 1fr));
}
/* Gap-Modifier
Setzt --grid-gap einheitlich für beide Achsen. --grid-gap-x/--grid-gap-y
sind Aliase darauf und lassen sich einzeln überschreiben (s. u.), z. B.
für ein Bildraster ohne horizontalen, aber mit vertikalem Abstand.
-------------------------------------------------------------------------- */
.l-grid--5xs { --grid-gap: var(--gap-5xs); }
.l-grid--4xs { --grid-gap: var(--gap-4xs); }
.l-grid--3xs { --grid-gap: var(--gap-3xs); }
.l-grid--2xs { --grid-gap: var(--gap-2xs); }
.l-grid--xs { --grid-gap: var(--gap-xs); }
.l-grid--s { --grid-gap: var(--gap-s); }
.l-grid--m { --grid-gap: var(--gap-m); }
.l-grid--l { --grid-gap: var(--gap-l); }
.l-grid--xl { --grid-gap: var(--gap-xl); }
.l-grid--2xl { --grid-gap: var(--gap-2xl); }
.l-grid--3xl { --grid-gap: var(--gap-3xl); }
.l-grid--4xl { --grid-gap: var(--gap-4xl); }
.l-grid--5xl { --grid-gap: var(--gap-5xl); }
/* Achsen-Override: mit einem Gap-Modifier oben kombinieren, z. B.
`l-grid l-grid--cols-2 l-grid--l l-grid--gap-x-0` → Bilder stoßen
horizontal aneinander, vertikaler Abstand bleibt --gap-l. */
.l-grid--gap-x-0 { --grid-gap-x: 0; }
.l-grid--gap-y-0 { --grid-gap-y: 0; }
/* Fixed-Column-Modifier
-------------------------------------------------------------------------- */
.l-grid--cols-1 { grid-template-columns: 1fr; }
.l-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.l-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.l-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.l-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
.l-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }
/* Gleich-Höhe: Items strecken (überschreibt .l-grid align-items:start).
Jeder Wrapper zwischen Grid und Karte (Bricks Block/Shortcode — egal welche
Klasse, erkannt via :has) wird flex-column und wächst; die Karte selbst wächst
mit. flex-grow statt percentage-height → robust in Chrome UND Firefox. */
.l-grid--stretch { align-items: stretch; }
.l-grid--stretch *:has(.c-card--stretch),
.l-grid--stretch .c-card--stretch {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
/* Responsive Fallbacks für Fixed-Column-Modifier
Größere Grids falten kontrolliert zusammen.
-------------------------------------------------------------------------- */
@media (max-width: 1023px) {
.l-grid--cols-4,
.l-grid--cols-5,
.l-grid--cols-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.l-grid--cols-2 { grid-template-columns: 1fr; }
.l-grid--cols-3,
.l-grid--cols-4,
.l-grid--cols-5,
.l-grid--cols-6 { grid-template-columns: 1fr; }
}
/**
* Opt-out: Spaltenanzahl bleibt auf allen Screens erhalten.
* Beispiel: 4-Spalten-Icon-Grid, das auf Mobile bei 2 bleiben soll.
* Verwendung: .l-grid.l-grid--cols-4.l-grid--keep-cols
*/
@media (max-width: 1023px) {
.l-grid--cols-4.l-grid--keep-cols,
.l-grid--cols-5.l-grid--keep-cols,
.l-grid--cols-6.l-grid--keep-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.l-grid--cols-2.l-grid--keep-cols { grid-template-columns: repeat(2, 1fr); }
.l-grid--cols-3.l-grid--keep-cols,
.l-grid--cols-4.l-grid--keep-cols,
.l-grid--cols-5.l-grid--keep-cols,
.l-grid--cols-6.l-grid--keep-cols { grid-template-columns: repeat(2, 1fr); }
}
/* ==========================================================================
3. FLEXBOX
========================================================================== */
.l-flex {
display: flex;
flex-wrap: wrap;
--flex-gap: 0;
gap: var(--flex-gap);
}
/* Gap-Modifier
-------------------------------------------------------------------------- */
.l-flex--5xs { --flex-gap: var(--gap-5xs); }
.l-flex--4xs { --flex-gap: var(--gap-4xs); }
.l-flex--3xs { --flex-gap: var(--gap-3xs); }
.l-flex--2xs { --flex-gap: var(--gap-2xs); }
.l-flex--xs { --flex-gap: var(--gap-xs); }
.l-flex--s { --flex-gap: var(--gap-s); }
.l-flex--m { --flex-gap: var(--gap-m); }
.l-flex--l { --flex-gap: var(--gap-l); }
.l-flex--xl { --flex-gap: var(--gap-xl); }
.l-flex--2xl { --flex-gap: var(--gap-2xl); }
.l-flex--3xl { --flex-gap: var(--gap-3xl); }
.l-flex--4xl { --flex-gap: var(--gap-4xl); }
.l-flex--5xl { --flex-gap: var(--gap-5xl); }
/* Direction
-------------------------------------------------------------------------- */
.l-flex--row { flex-direction: row; }
.l-flex--col { flex-direction: column; }
.l-flex--row-r { flex-direction: row-reverse; }
.l-flex--col-r { flex-direction: column-reverse; }
/* Wrap
-------------------------------------------------------------------------- */
.l-flex--wrap { flex-wrap: wrap; }
.l-flex--nowrap { flex-wrap: nowrap; }
/* Justify Content
-------------------------------------------------------------------------- */
.l-flex--justify-start { justify-content: flex-start; }
.l-flex--justify-center { justify-content: center; }
.l-flex--justify-end { justify-content: flex-end; }
.l-flex--justify-between { justify-content: space-between; }
.l-flex--justify-around { justify-content: space-around; }
.l-flex--justify-even { justify-content: space-evenly; }
/* Align Items
-------------------------------------------------------------------------- */
.l-flex--align-start { align-items: flex-start; }
.l-flex--align-center { align-items: center; }
.l-flex--align-end { align-items: flex-end; }
.l-flex--align-stretch { align-items: stretch; }
.l-flex--align-baseline { align-items: baseline; }
/* ==========================================================================
4. PATTERN: SPLIT
Zweispaltiges Layout, das auf Mobile einspaltig wird.
Typisch: Text + Bild, Formular + Info
========================================================================== */
.l-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: flex-start;
--split-gap: 0;
--split-content-padding-block: var(--space-xl);
--split-content-padding-inline: var(--space-xl);
gap: var(--split-gap);
}
.l-split--reverse > :first-child { order: 2; }
.l-split--reverse > :last-child { order: 1; }
.l-split--align-start { align-items: flex-start; }
.l-split--align-center { align-items: center; }
.l-split--align-end { align-items: flex-end; }
.l-split--align-stretch { align-items: stretch; }
.l-split--none { --split-gap: 0; }
.l-split--5xs { --split-gap: var(--gap-5xs); }
.l-split--4xs { --split-gap: var(--gap-4xs); }
.l-split--3xs { --split-gap: var(--gap-3xs); }
.l-split--2xs { --split-gap: var(--gap-2xs); }
.l-split--xs { --split-gap: var(--gap-xs); }
.l-split--s { --split-gap: var(--gap-s); }
.l-split--m { --split-gap: var(--gap-m); }
.l-split--l { --split-gap: var(--gap-l); }
.l-split--xl { --split-gap: var(--gap-xl); }
.l-split--2xl { --split-gap: var(--gap-2xl); }
.l-split--3xl { --split-gap: var(--gap-3xl); }
.l-split--4xl { --split-gap: var(--gap-4xl); }
.l-split--5xl { --split-gap: var(--gap-5xl); }
.l-split__item,
.l-split__item--1-3,
.l-split__item--2-3,
.l-split__item--1-4,
.l-split__item--3-4 {
min-width: 0;
}
.l-split:has(> .l-split__item--1-3, > .l-split__item--2-3) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.l-split__item--1-3 { grid-column: span 1; }
.l-split__item--2-3 { grid-column: span 2; }
.l-split:has(> .l-split__item--1-4, > .l-split__item--3-4) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.l-split__item--1-4 { grid-column: span 1; }
.l-split__item--3-4 { grid-column: span 3; }
.l-split__item--bleed {
padding: 0;
overflow: hidden;
}
.l-split__item--bleed :where(picture, img, video) {
display: block;
width: 100%;
height: 100%;
}
.l-split__item--bleed :where(img, video) {
object-fit: cover;
}
.l-split__item--inset {
padding-block: var(--split-content-padding-block);
}
.l-split:not(.l-split--reverse) > .l-split__item--inset {
padding-inline-start: var(--split-content-padding-inline);
}
.l-split--reverse > .l-split__item--inset {
padding-inline-end: var(--split-content-padding-inline);
}
@media (max-width: 767px) {
.l-split,
.l-split--reverse,
.l-split:has(> .l-split__item--1-3, > .l-split__item--2-3),
.l-split:has(> .l-split__item--1-4, > .l-split__item--3-4) {
grid-template-columns: 1fr;
}
.l-split > .l-split__item--1-3,
.l-split > .l-split__item--2-3,
.l-split > .l-split__item--1-4,
.l-split > .l-split__item--3-4 {
grid-column: auto;
}
.l-split--reverse > :first-child,
.l-split--reverse > :last-child {
order: initial;
}
.l-split:not(.l-split--reverse) > .l-split__item--inset,
.l-split--reverse > .l-split__item--inset {
padding-inline: 0;
}
}
/* ==========================================================================
5. PATTERN: STACK
Stapelt Elemente vertikal mit einheitlichem Abstand.
Typisch: Textblöcke, Formularfelder, vertikale Navigationen
========================================================================== */
.l-stack {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch; /* Kinder vollbreit; ueberschreibt Bricks .brxe-section align-items:center */
--stack-gap: 0;
gap: var(--stack-gap);
}
/* Modifier: Abstände */
.l-stack--5xs { --stack-gap: var(--gap-5xs); }
.l-stack--4xs { --stack-gap: var(--gap-4xs); }
.l-stack--3xs { --stack-gap: var(--gap-3xs); }
.l-stack--2xs { --stack-gap: var(--gap-2xs); }
.l-stack--xs { --stack-gap: var(--gap-xs); }
.l-stack--s { --stack-gap: var(--gap-s); }
.l-stack--m { --stack-gap: var(--gap-m); }
.l-stack--l { --stack-gap: var(--gap-l); }
.l-stack--xl { --stack-gap: var(--gap-xl); }
.l-stack--2xl { --stack-gap: var(--gap-2xl); }
.l-stack--3xl { --stack-gap: var(--gap-3xl); }
.l-stack--4xl { --stack-gap: var(--gap-4xl); }
.l-stack--5xl { --stack-gap: var(--gap-5xl); }
/* Modifier: Ausrichtung */
.l-stack--center { align-items: center; }
.l-stack--end { align-items: flex-end; }
/* ==========================================================================
6. PATTERN: CLUSTER
Wrappende Flex-Zeile für kleine Elemente.
Typisch: Tags, Chips, Badge-Gruppen, Button-Reihen, Icon-Links
========================================================================== */
.l-cluster {
display: flex;
flex-wrap: wrap;
--cluster-gap: 0;
gap: var(--cluster-gap);
align-items: center;
}
/* Modifier: Abstände */
.l-cluster--5xs { --cluster-gap: var(--gap-5xs); }
.l-cluster--4xs { --cluster-gap: var(--gap-4xs); }
.l-cluster--3xs { --cluster-gap: var(--gap-3xs); }
.l-cluster--2xs { --cluster-gap: var(--gap-2xs); }
.l-cluster--xs { --cluster-gap: var(--gap-xs); }
.l-cluster--s { --cluster-gap: var(--gap-s); }
.l-cluster--m { --cluster-gap: var(--gap-m); }
.l-cluster--l { --cluster-gap: var(--gap-l); }
.l-cluster--xl { --cluster-gap: var(--gap-xl); }
.l-cluster--2xl { --cluster-gap: var(--gap-2xl); }
.l-cluster--3xl { --cluster-gap: var(--gap-3xl); }
.l-cluster--4xl { --cluster-gap: var(--gap-4xl); }
.l-cluster--5xl { --cluster-gap: var(--gap-5xl); }
/* Modifier: Ausrichtung */
.l-cluster--center { justify-content: center; }
.l-cluster--end { justify-content: flex-end; }
.l-cluster--between { justify-content: space-between; }
/* ==========================================================================
7. PATTERN: DIVIDER
Trennlinie mit weichem Ein-/Ausblenden an den Rändern.
Verwendung:
oder
========================================================================== */
.l-divider {
--divider-color: var(--ui-divider, currentColor);
--divider-bg: linear-gradient(
to right,
transparent 0%,
transparent 3%,
var(--divider-color) 15%,
var(--divider-color) 85%,
transparent 97%,
transparent 100%
);
border: none;
width: 100%;
height: 1px;
background: var(--divider-bg);
}
:root[data-contrast="high"] .l-divider {
--divider-bg: var(--divider-color);
}
.l-divider .line {
width: 100%;
height: 1px;
border: 0;
box-shadow: none;
background-color: transparent;
background-image: var(--divider-bg);
}
.c-section--light .l-divider,
.c-content--light .l-divider,
.c-card--light .l-divider,
.c-section--alternate .l-divider,
.c-content--alternate .l-divider,
.c-section--muted .l-divider,
.c-content--muted .l-divider,
.c-section--forms .l-divider,
.c-content--forms .l-divider {
--divider-color: var(--ui-divider-light, var(--ui-divider));
}
.c-section--dark .l-divider,
.c-content--dark .l-divider,
.c-card--dark .l-divider,
.c-section--action .l-divider,
.c-content--action .l-divider,
.c-card--action .l-divider,
.c-section--accent .l-divider,
.c-content--accent .l-divider,
.c-card--accent .l-divider,
.c-section--footer .l-divider,
.c-content--footer .l-divider,
.c-section--image .l-divider,
.c-section--image-overlay .l-divider,
.c-content--image .l-divider,
.c-section--video .l-divider {
--divider-color: var(--ui-divider-dark, var(--ui-divider));
}
/* _header.css */
/* ==========================================================================
HEADER & NAVIGATION
Zweistufige Struktur nach dem Breuning-IRCO-Prinzip:
Utility-Leiste oben, Logo und Fachnavigation in der Hauptleiste.
Theme- und Kontrastschalter sitzen gemeinsam in der Utility-Leiste.
========================================================================== */
/* ==========================================================================
1. HEADER CHROME
========================================================================== */
#brx-header {
background: var(--bg-light);
overflow-anchor: none;
transition: box-shadow 0.35s ease;
}
#brx-header.scrolling {
box-shadow: 0 2px 24px rgb(0 0 0 / 0.12);
}
.main-header {
--fg: var(--palette-black);
width: 100%;
padding: 0;
background: var(--bg-light);
}
/* ==========================================================================
2. UTILITY-LEISTE
Kontakt, Karriere, Sprache und Darstellung sind vom fachlichen Hauptmenue
getrennt.
========================================================================== */
.header-topbar {
--fg: var(--palette-white);
position: relative;
z-index: 2;
display: flex;
width: 100%;
height: 4.2rem;
overflow: visible;
color: var(--fg);
background: var(--palette-dark-blue);
border-bottom: 1px solid rgb(255 255 255 / 0.14);
opacity: 1;
visibility: visible;
transition:
height 0.3s ease,
opacity 0.2s ease,
border-color 0.2s ease,
visibility 0s linear 0s;
}
.header-topbar > .l-container {
position: relative;
display: flex;
flex-direction: row !important;
align-items: center;
justify-content: flex-end;
gap: var(--gap-m);
}
.c-topbar-tagline {
color: var(--fg-70);
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--ls-l);
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
}
.header-topbar__right {
position: relative;
display: flex;
flex-direction: row !important;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: 0;
width: 100% !important;
margin-left: 0;
list-style: none;
padding: 0;
}
.header-topbar__right > li {
display: flex;
flex: 0 0 auto;
align-items: center;
width: auto !important;
height: 100%;
margin: 0;
padding-inline: var(--space-xs);
border-inline: 0;
}
.header-topbar__right > li:has(.c-lang-nav) {
order: -2;
padding-inline: 0;
border-inline: 0;
}
.header-topbar__right > li:has(.c-display-controls) {
order: -1;
margin-inline-end: auto;
border-inline: 0;
}
.header-topbar__right > li:has(.header-utility-link:not([href="/kontakt/"]):not(.header-utility-link--accent))
+ li:has(.header-utility-link:not([href="/kontakt/"]):not(.header-utility-link--accent)) {
border-inline-start: 1px solid rgb(255 255 255 / 0.16);
}
.header-topbar__right > li:has(.header-utility-link[href="/kontakt/"]) {
padding-inline-end: var(--space-5xs);
}
.header-topbar__right > li:has(.header-utility-link--accent) {
padding-inline-start: var(--space-5xs);
}
@media (min-width: 1160px) {
.header-topbar__right > li:has(.header-utility-link[href*="/unternehmen/qualitaet-und-umwelt/"]),
.header-topbar__right > li:has(.header-utility-link[href*="/kompetenzzentrum/zertifikate/"]),
.header-topbar__right > li:has(.header-utility-link[href="/kontakt/ansprechpartner/"]) {
padding-inline: var(--space-m);
}
}
.c-lang-nav {
display: inline-flex;
align-items: center;
color: var(--fg-50);
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--ls-m);
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
}
.c-lang-nav__item {
display: inline-flex;
align-items: center;
min-block-size: 2.4rem;
padding-inline: var(--gap-3xs);
}
.c-lang-nav__item + .c-lang-nav__item {
border-left: 1px solid var(--fg-50);
}
.c-lang-nav__item.is-current {
color: var(--fg);
}
.c-lang-nav__link {
color: var(--fg-70);
text-decoration: none;
transition: color 0.2s ease;
}
.c-lang-nav__link:hover,
.c-lang-nav__link:focus-visible {
color: var(--palette-white);
}
.c-lang-nav__link--disabled {
color: var(--fg-30);
cursor: default;
}
.header-utility-link {
position: relative;
display: inline-flex;
align-items: center;
height: 4.2rem;
color: var(--fg-80);
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--ls-l);
line-height: 1;
text-decoration: none;
text-transform: uppercase;
transition: color 0.2s ease, background-color 0.2s ease;
}
.header-utility-link:hover,
.header-utility-link:focus-visible {
color: var(--palette-white);
}
.header-topbar .header-utility-link[href="/kontakt/"] {
height: 2.8rem;
padding-inline: var(--gap-xs);
color: var(--palette-dark-blue);
background: var(--palette-soft-blue);
}
.header-topbar .header-utility-link[href="/kontakt/"]::after {
display: none;
}
.header-topbar .header-utility-link[href="/kontakt/"]:hover,
.header-topbar .header-utility-link[href="/kontakt/"]:focus-visible {
color: var(--palette-dark-blue);
background: var(--palette-muted-blue);
}
.header-contact-menu {
position: relative;
}
.header-contact-submenu {
--fg: var(--on-bg-light);
position: absolute;
z-index: 3;
inset-block-start: 100%;
inset-inline-end: 0;
display: grid;
min-width: 22rem;
margin: 0;
padding: 0;
overflow: hidden;
color: var(--fg-80);
list-style: none;
background: var(--surface-page);
border: 1px solid var(--border);
box-shadow: 0 1rem 2.4rem var(--overlay-20);
opacity: 0;
visibility: hidden;
transform: translateY(-0.4rem);
pointer-events: none;
transition:
opacity 160ms ease,
transform 160ms ease,
visibility 0s linear 160ms;
}
.header-contact-submenu > li {
display: block;
width: 100%;
}
.header-contact-submenu > li + li {
border-block-start: 1px solid var(--border);
}
.header-contact-submenu__link {
display: flex;
align-items: center;
min-height: 5rem;
padding: var(--space-xs) var(--space-s);
color: var(--fg-70);
font-size: var(--text-s);
font-weight: var(--font-weight-regular);
letter-spacing: 0;
line-height: var(--line-height-base);
text-decoration: none;
text-transform: none;
background: var(--surface-raised-soft);
transition: color 160ms ease, background-color 160ms ease;
}
.header-contact-submenu__link:hover,
.header-contact-submenu__link:focus-visible {
color: var(--fg);
background: var(--accent-10);
}
.header-contact-menu:hover > .header-contact-submenu,
.header-contact-menu:focus-within > .header-contact-submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition-delay: 0s;
}
:root[data-contrast="high"] .header-contact-submenu {
border-color: var(--fg);
box-shadow: none;
}
.header-utility-link::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: 0;
height: 2px;
background: var(--palette-blue);
transform: scaleX(0);
transform-origin: right;
transition: transform 250ms ease-in;
}
.header-utility-link:hover::after,
.header-utility-link:focus-visible::after {
transform: scaleX(1);
transform-origin: left;
}
.header-utility-link--accent {
height: 2.8rem;
padding-inline: var(--gap-xs);
color: var(--palette-white);
background: var(--palette-blue);
}
.header-utility-link--accent::after {
display: none;
}
.header-utility-link--accent:hover,
.header-utility-link--accent:focus-visible {
background: var(--palette-medium-blue);
}
.header-topbar__right > li > .brxe-shortcode {
width: auto !important;
flex: 0 0 auto;
}
.header-topbar .c-display-controls {
display: inline-flex;
align-items: center;
gap: 0.4rem;
height: 3rem;
padding: 0.25rem 0.65rem;
background: var(--accent-20);
border-radius: var(--radius-full);
}
.header-topbar .c-contrast-toggle {
width: 4rem;
height: 2.4rem;
}
.header-topbar .c-contrast-toggle:hover,
.header-topbar .c-contrast-toggle:focus-visible {
background: var(--accent-10);
}
.header-topbar .c-contrast-toggle[aria-checked="true"] {
background: var(--accent);
}
#brx-header.is-topbar-hidden .header-topbar {
height: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
border-color: transparent;
transition-delay: 0s, 0s, 0s, 0.3s;
}
#brx-header.is-topbar-hidden .header-contact-submenu {
pointer-events: none;
}
/* ==========================================================================
3. HAUPTLEISTE UND NAV-WRAPPER
========================================================================== */
.header-mainbar {
width: 85%;
max-width: var(--container-width);
margin-inline: auto;
padding-inline: 0;
}
.header-mainbar > .brxe-nav-nested,
.header-mainbar > .brxe-block,
.header-mainbar > nav {
width: 100%;
}
.nav-wrapper {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: var(--gap-m);
width: 100%;
min-height: var(--mainbar-height);
}
.nav-wrapper > .header-logo {
grid-column: 1;
grid-row: 1;
justify-self: start;
}
.nav-wrapper > .nav-list,
.nav-wrapper > .header-nav {
grid-column: 2;
grid-row: 1;
justify-self: end;
min-width: 0;
max-width: 100%;
}
.header-nav {
width: 100%;
}
/* Kontakt wird als hervorgehobener Topbar-Einstieg geführt. */
.header-nav .menu-item-993 {
display: none !important;
}
/* ==========================================================================
4. LOGO
========================================================================== */
.header-logo {
display: flex;
align-items: center;
flex: 0 0 auto;
padding-block: var(--gap-3xs);
}
.header-logo img {
height: min(calc(var(--mainbar-height) - var(--gap-2xs) * 2), 4.4rem);
width: auto;
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
#brx-header.scrolling .header-logo img {
transform: scale(0.85);
}
/* ==========================================================================
5. NAV-LISTE UND LINKS
========================================================================== */
.nav-list,
.header-nav .bricks-nav-menu {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: var(--gap-3xs);
height: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.nav-list .nav-link,
.header-nav .bricks-nav-menu > li > a,
.header-nav .bricks-nav-menu > li > .brx-submenu-toggle > a {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
height: 100%;
color: var(--fg);
font-family: var(--font-primary);
font-size: var(--text-s);
font-weight: var(--font-weight-medium);
letter-spacing: var(--ls-m);
line-height: var(--line-height-base);
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
transition: color 0.2s ease;
}
.header-nav .bricks-nav-menu > li,
.header-nav .bricks-nav-menu > li > .brx-submenu-toggle {
height: 100%;
}
.header-nav .bricks-nav-menu {
gap: 0;
}
.header-nav .bricks-nav-menu > li {
margin-inline: 0;
padding-inline: calc(var(--gap-xs) + 0.2rem);
}
.header-nav .bricks-nav-menu > li:not(:first-child) {
border-inline-start: 1px solid var(--divider-on-light);
}
.header-nav .bricks-nav-menu > li > .brx-submenu-toggle {
display: flex;
align-items: center;
}
/* Bricks setzt Dropdown-Elemente als Flex-Spalte. Ohne diese Regel bleibt
der innere Trigger trotz zentriertem am oberen Rand der Mainbar. */
.nav-list > .brxe-dropdown > .brx-submenu-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.nav-list .nav-link:hover,
.header-nav .bricks-nav-menu > li > a:hover,
.header-nav .bricks-nav-menu > li > .brx-submenu-toggle > a:hover {
color: var(--accent);
}
.nav-list .nav-link::after,
.header-nav .bricks-nav-menu > li > a::after,
.header-nav .bricks-nav-menu > li > .brx-submenu-toggle > a::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: 0;
height: 2px;
background-color: var(--accent);
transform: scaleX(0);
transform-origin: right;
transition: transform 250ms ease-in;
}
.nav-list .nav-link:hover::after,
.nav-list .nav-link[aria-expanded="true"]::after,
.header-nav .bricks-nav-menu > li > a:hover::after,
.header-nav .bricks-nav-menu > li > .brx-submenu-toggle:hover > a::after,
.header-nav .bricks-nav-menu > .current-menu-item > a::after,
.header-nav .bricks-nav-menu > .current-menu-ancestor > .brx-submenu-toggle > a::after {
transform: scaleX(1);
transform-origin: left;
}
.nav-list .nav-link svg,
.nav-list .nav-link i {
margin-left: var(--gap-3xs);
font-size: 0.7em;
opacity: 0.6;
transition: transform 180ms ease, opacity 180ms ease;
}
.nav-list .nav-link:hover svg,
.nav-list .nav-link:hover i {
opacity: 1;
transform: rotate(180deg);
}
.header-nav .bricks-nav-menu > li:not(.megamenu-template-enable):not(.megamenu-enable) .sub-menu {
min-width: 28rem;
padding: 0;
background: var(--surface-muted-light);
border: 1px solid var(--divider-on-light);
border-top: 0;
box-shadow: none;
}
.header-nav .bricks-nav-menu li:focus-within > .sub-menu {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.header-nav .bricks-nav-menu > li:not(.megamenu-template-enable):not(.megamenu-enable) .sub-menu > li + li {
border-top: 1px solid var(--divider-on-light);
}
.header-nav .bricks-nav-menu > li:not(.megamenu-template-enable):not(.megamenu-enable) .sub-menu a {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-s) var(--space-l);
color: var(--palette-steel-blue);
font-size: var(--text-s);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-body);
text-decoration: none;
transition: color 0.2s ease, background-color 0.2s ease;
}
.header-nav .bricks-nav-menu > li:not(.megamenu-template-enable):not(.megamenu-enable) .sub-menu a:hover,
.header-nav .bricks-nav-menu > li:not(.megamenu-template-enable):not(.megamenu-enable) .sub-menu a:focus-visible {
color: var(--accent);
background: var(--accent-10);
}
/* Mega-Menu: Die erste Unterebene bildet die Spalten, die zweite Ebene
bleibt als sichtbare Linkliste innerhalb ihrer Spalte stehen. */
@media (min-width: 1024px) {
.header-nav .bricks-nav-menu {
position: relative;
}
.header-nav .bricks-nav-menu > li.megamenu-enable.megamenu-style-grid {
position: static;
}
.header-nav .bricks-nav-menu > li.megamenu-enable.megamenu-style-grid > .sub-menu {
--mega-menu-gap: var(--space-s);
left: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--gap-xl);
width: 100%;
min-width: 0;
margin-top: var(--mega-menu-gap);
padding: var(--space-l);
background: var(--surface-muted-light);
border: 1px solid var(--divider-on-light);
border-top: 0;
box-shadow: none;
pointer-events: none;
}
/* Unsichtbare Bruecke: Der Abstand darf den Hover-Pfad nicht unterbrechen. */
.header-nav .bricks-nav-menu > li.megamenu-enable.megamenu-style-grid > .sub-menu::before {
content: "";
position: absolute;
inset-inline: 0;
bottom: 100%;
height: var(--mega-menu-gap);
}
/* Die sichtbar vorbereiteten Linklisten der zweiten Ebene duerfen im
geschlossenen Zustand keine unsichtbare Hover-Flaeche bilden. */
.header-nav .bricks-nav-menu > li.megamenu-enable.megamenu-style-grid > .sub-menu > li > .sub-menu {
pointer-events: none;
}
.header-nav .bricks-nav-menu > li.megamenu-enable.megamenu-style-grid:hover > .sub-menu,
.header-nav .bricks-nav-menu > li.megamenu-enable.megamenu-style-grid:focus-within > .sub-menu,
.header-nav .bricks-nav-menu > li.megamenu-enable.megamenu-style-grid:hover > .sub-menu > li > .sub-menu,
.header-nav .bricks-nav-menu > li.megamenu-enable.megamenu-style-grid:focus-within > .sub-menu > li > .sub-menu {
pointer-events: auto;
}
.header-nav .bricks-nav-menu > li.megamenu-enable.megamenu-style-grid > .sub-menu > li {
display: block;
min-width: 0;
}
.header-nav .bricks-nav-menu > li.megamenu-enable.megamenu-style-grid > .sub-menu > li > a,
.header-nav .bricks-nav-menu > li.megamenu-enable.megamenu-style-grid > .sub-menu > li > .brx-submenu-toggle > a {
display: block;
margin: 0 0 var(--space-xs);
padding: 0;
color: var(--accent);
font-size: var(--text-s);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-heading);
text-decoration: none;
text-transform: uppercase;
}
.header-nav .bricks-nav-menu > li.megamenu-enable.megamenu-style-grid > .sub-menu > li > .brx-submenu-toggle {
display: block;
}
.header-nav .bricks-nav-menu > li.megamenu-enable.megamenu-style-grid > .sub-menu > li > .brx-submenu-toggle > button {
display: none;
}
.header-nav .bricks-nav-menu > li.megamenu-enable.megamenu-style-grid > .sub-menu > li > .sub-menu {
position: static;
inset: auto;
display: block;
visibility: visible;
width: auto;
min-width: 0;
padding: 0;
opacity: 1;
background: transparent;
border: 0;
box-shadow: none;
transform: none;
}
.header-nav .bricks-nav-menu > li.megamenu-enable.megamenu-style-grid > .sub-menu > li > .sub-menu > li {
display: block;
}
.header-nav .bricks-nav-menu > li.megamenu-enable.megamenu-style-grid > .sub-menu > li > .sub-menu a {
display: flex;
align-items: center;
gap: var(--space-s);
padding: var(--space-xs) 0;
color: var(--palette-steel-blue);
font-size: var(--text-s);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-body);
text-decoration: none;
transition: color 0.2s ease;
}
.header-nav .bricks-nav-menu > li.megamenu-enable.megamenu-style-grid > .sub-menu > li > .sub-menu a::before {
content: "";
flex: 0 0 1.6rem;
inline-size: 1.6rem;
block-size: 1.6rem;
background: currentColor;
opacity: 0.78;
-webkit-mask: url("../assets/icons/chevron-right.svg") center / contain no-repeat;
mask: url("../assets/icons/chevron-right.svg") center / contain no-repeat;
transform: translateY(0.08em);
transition: opacity 180ms ease, transform 180ms ease;
}
.header-nav .bricks-nav-menu > li.megamenu-enable.megamenu-style-grid > .sub-menu > li > .sub-menu a:hover,
.header-nav .bricks-nav-menu > li.megamenu-enable.megamenu-style-grid > .sub-menu > li > .sub-menu a:focus-visible {
color: var(--accent);
}
.header-nav .bricks-nav-menu > li.megamenu-enable.megamenu-style-grid > .sub-menu > li > .sub-menu a:hover::before,
.header-nav .bricks-nav-menu > li.megamenu-enable.megamenu-style-grid > .sub-menu > li > .sub-menu a:focus-visible::before {
opacity: 1;
transform: translate(0.25rem, 0.08em);
}
}
/* Die Utility-Ziele bleiben fuer das mobile Menue im Nav-Nested erhalten,
sind auf Desktop aber ausschliesslich in der Topbar sichtbar. */
@media (min-width: 1024px) {
.nav-list > li:has(> .nav-utility-mobile) {
display: none;
}
}
.nav-list .nav-cta {
padding-inline: var(--gap-s);
transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-list .nav-cta::after {
display: none;
}
.nav-list .nav-cta--soft {
background: var(--accent-20);
}
.nav-list .nav-cta--soft:hover {
color: var(--fg);
background: var(--accent-30);
}
.nav-list .nav-cta--solid {
color: var(--palette-white);
background: var(--accent);
}
.nav-list .nav-cta--solid:hover {
color: var(--palette-white);
background: var(--palette-dark-blue);
}
/* ==========================================================================
6. DROPDOWN-PANEL
========================================================================== */
.nav-dropdown-panel {
background: var(--surface-muted-light);
border-top: 1px solid var(--divider-on-light);
}
.nav-dropdown-list {
padding: var(--gap-s) var(--gap-m);
}
.nav-dropdown-header {
margin-bottom: var(--gap-2xs);
color: var(--accent);
font-size: var(--text-xs);
font-weight: var(--font-weight-bold);
letter-spacing: var(--ls-m);
text-transform: uppercase;
}
.nav-dropdown-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gap-2xs);
padding-block: var(--gap-3xs);
color: var(--fg);
font-weight: var(--font-weight-regular);
text-decoration: none;
transition: color 0.2s ease;
}
.nav-dropdown-link:hover {
color: var(--accent);
}
/* ==========================================================================
7. RESPONSIVE
========================================================================== */
/* Auf mittleren Desktopbreiten bleibt das vollstaendige Fachmenue sichtbar,
wird aber gezielt verdichtet. Die grosszuegige Desktopdarstellung oberhalb
dieses Korridors bleibt unveraendert. */
@media (min-width: 1400px) and (max-width: 1599px) {
.nav-wrapper {
column-gap: var(--gap-xs);
}
.header-logo img {
height: min(calc(var(--mainbar-height) - var(--gap-2xs) * 2), 3.4rem);
}
.header-nav .bricks-nav-menu > li {
padding-inline: var(--space-3xs);
}
.header-nav .bricks-nav-menu > li > a,
.header-nav .bricks-nav-menu > li > .brx-submenu-toggle > a {
font-size: var(--text-xs);
letter-spacing: var(--ls-s);
}
}
@media (min-width: 1024px) and (max-width: 1119px) {
.header-topbar__right > li {
padding-inline: var(--space-4xs);
}
}
/* Chevron für Menüpunkte mit Submenu, strukturell wie breuning-irco-child
(.nav-list .brx-submenu-toggle > button dort): holder-blau statt
verstecktem Toggle-Button. */
.header-nav .bricks-nav-menu > li > .brx-submenu-toggle > button {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 2.4rem;
block-size: 2.4rem;
margin-inline-start: var(--gap-4xs);
padding: 0;
color: var(--accent-readable);
background: none;
border: 0;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.header-nav .bricks-nav-menu > li > .brx-submenu-toggle > button {
inline-size: 2.4rem;
block-size: 2.4rem;
margin-inline-start: var(--gap-5xs);
}
}
/* Bricks' nativer Wechselpunkt bei 991 px ist fuer sechs Fachlinks zu spaet.
Ab hier wird deshalb das bereits vorhandene mobile Menue verwendet. */
@media (max-width: 1399px) {
.nav-wrapper {
grid-template-columns: auto auto;
}
.header-nav .bricks-nav-menu-wrapper {
display: none;
}
.header-nav .bricks-mobile-menu-toggle {
display: grid;
place-items: center;
inline-size: 4.4rem;
block-size: 4.4rem;
padding: 0;
margin-inline-start: auto;
}
.header-nav .bricks-mobile-menu-wrapper {
color: var(--fg);
background: var(--surface-page);
}
.header-nav .bricks-mobile-menu a {
color: var(--fg);
}
}
@media (max-width: 1023px) {
.header-topbar {
display: none;
}
.nav-list .nav-utility-mobile {
display: flex;
}
}
@media (prefers-reduced-motion: reduce) {
.header-topbar,
.header-logo img,
.nav-list .nav-link::after,
.header-utility-link::after {
transition: none;
}
}
/* _nav-badge.css */
/* ==========================================================================
COMPONENT: NAV-BADGE
Kleines Zaehler-Badge am Hauptmenuepunkt "News" (siehe
inc/news-nav-badge.php). Rein dekorativ (aria-hidden), der eigentliche
Linktext bleibt unveraendert zugaenglich.
========================================================================== */
/* Eigener rechter Innenabstand, damit die Zahl echten Raum bekommt statt
ueber den Trenner zum naechsten Menuepunkt zu ragen (Vorbild: Holzapfel
"Mehrwert"-Badge). */
#menu-item-981 {
position: relative;
padding-inline-end: calc(var(--gap-xs) + 0.2rem + 1.3em);
}
/* Chevron (Untermenue-Toggle) nur bei diesem Menuepunkt entfernt, damit
die Zahl nicht mit dem Pfeil kollidiert. Der Link selbst bleibt
klickbar (fuehrt zu /aktuelles/), Hover oeffnet das Untermenue wie
gehabt; nur die zusaetzliche Klick-/Tastatur-Oeffnung ueber den Button
entfaellt fuer "News" bewusst. */
#menu-item-981 > .brx-submenu-toggle > button {
display: none;
}
.c-nav-badge {
position: absolute;
inset-block-start: -0.7em;
inset-inline-end: 0.65em;
display: inline-flex;
align-items: center;
justify-content: center;
min-inline-size: 1.6em;
block-size: 1.6em;
padding-inline: 0.3em;
border: thin solid var(--divider-on-light);
border-radius: var(--space-4xs);
background: var(--surface-page);
color: var(--accent);
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
line-height: 1;
pointer-events: none;
}
/* _footer.css */
/* ==========================================================================
SITE FOOTER
========================================================================== */
.c-footer {
--fg: var(--on-bg-footer);
padding-block: var(--gap-xl) var(--gap-2xl);
color: var(--fg);
background: var(--bg-dark);
}
.c-footer__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: start;
gap: var(--gap-3xl);
}
.c-footer__column {
display: flex;
flex-direction: column;
min-width: 0;
color: var(--fg);
}
.c-footer__heading {
margin: 0 0 var(--gap-s);
color: var(--fg);
font-size: var(--text-l);
font-weight: var(--font-weight-bold);
letter-spacing: var(--ls-m);
line-height: var(--line-height-heading);
text-transform: uppercase;
}
/* DE/EN-Umschaltung: beide Sprachfassungen stehen im Markup, CSS blendet
je nach Dokumentsprache die falsche aus (gleiches Muster wie
.c-job-posting__label-title--de/--en in css/_job-posting.css). */
html[lang^="de"] .c-footer__heading--en,
html[lang^="en"] .c-footer__heading--de,
html[lang^="de"] .c-footer-contact__label--en,
html[lang^="en"] .c-footer-contact__label--de,
html[lang^="de"] .c-footer__legal-link--en,
html[lang^="en"] .c-footer__legal-link--de {
display: none;
}
.c-footer__logo {
display: block;
width: min(100%, 24rem);
margin-bottom: var(--gap-s);
}
.c-footer__logo img {
display: block;
width: 100%;
height: auto;
}
.c-footer__address,
.c-footer-contact__row,
.c-footer__copyright,
.c-footer__legal {
margin: 0;
font-size: var(--text-s);
line-height: var(--line-height-body);
}
.c-footer__address {
margin-bottom: var(--gap-s);
}
.c-footer-contact {
display: grid;
gap: var(--gap-3xs);
}
.c-footer-contact__row {
display: grid;
grid-template-columns: minmax(8rem, 0.7fr) minmax(0, 1fr);
gap: var(--gap-xs);
}
.c-footer-contact__row a,
.c-footer__legal a {
color: inherit;
text-decoration: none;
}
.c-footer-contact__row a:hover,
.c-footer__legal a:hover,
.c-footer-contact__row a:focus-visible,
.c-footer__legal a:focus-visible {
color: var(--accent-readable);
}
.c-footer__copyright,
.c-footer__legal {
width: 100%;
padding-block: var(--gap-xs);
border-top: 1px solid var(--ui-divider-dark);
}
.c-footer__copyright {
margin-top: var(--gap-xs);
}
:root[data-contrast="high"] .c-footer__copyright,
:root[data-contrast="high"] .c-footer__legal {
border-top: 0;
}
.c-footer__legal {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
font-size: var(--text-xs);
}
.c-footer__legal::after {
order: 2;
flex-basis: 100%;
height: 0;
content: '';
}
.c-footer__legal > a {
display: flex;
align-items: center;
min-block-size: 2.4rem;
padding: 0 var(--gap-xs);
white-space: nowrap;
}
.c-footer__legal > a:nth-child(odd) {
padding-inline-start: 0;
}
.c-footer__legal > a:nth-child(-n + 2) {
order: 1;
}
.c-footer__legal > a:nth-child(n + 3) {
order: 3;
}
.c-footer__legal > a:nth-child(even) {
position: relative;
padding-inline-end: 0;
}
.c-footer__legal > a:nth-child(even)::before {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 0;
width: 1px;
height: 1em;
background: var(--ui-divider-dark);
content: '';
transform: translateY(-50%);
}
:root[data-contrast="high"] .c-footer__legal > a:nth-child(even)::before {
content: none;
}
.c-footer-news {
display: flex;
flex-direction: row;
gap: var(--gap-s);
margin-bottom: var(--gap-xs);
padding-bottom: var(--gap-xs);
border-bottom: 1px solid var(--ui-divider-dark);
}
:root[data-contrast="high"] .c-footer-news {
border-bottom: 0;
}
.c-footer-news__image {
--footer-news-image-size: 7.2rem;
display: block;
flex: 0 0 var(--footer-news-image-size);
width: var(--footer-news-image-size);
height: var(--footer-news-image-size);
overflow: hidden;
border-radius: 50%;
object-fit: cover;
}
.c-footer-news__body {
display: flex;
flex-direction: column;
justify-content: center;
align-self: center;
min-width: 0;
}
.c-footer-news__title {
margin: 0;
color: var(--fg);
font-size: var(--text-s);
font-style: normal;
font-weight: var(--font-weight-medium);
line-height: var(--line-height-heading);
text-transform: none;
}
.c-footer-news__title a {
display: inline-flex;
align-items: center;
min-block-size: 2.4rem;
}
.c-footer-news__date {
margin: var(--gap-3xs) 0 0;
color: var(--accent-readable);
font-size: var(--text-xs);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-body);
}
.c-footer-nav {
width: 100%;
}
.c-footer-nav .bricks-nav-menu-wrapper {
display: block;
}
.c-footer-nav .bricks-nav-menu {
display: block;
margin: 0;
padding: 0;
}
.c-footer-nav .bricks-nav-menu > li {
display: block;
margin: 0;
border-bottom: 1px solid var(--ui-divider-dark);
}
/* Die Zeilen sind bereits durch Abstand und Pfeil eindeutig gegliedert.
Im Hochkontrastmodus würden aufgehellte Trenner unnötig dominieren. */
:root[data-contrast="high"] .c-footer-nav .bricks-nav-menu > li {
border-bottom: 0;
}
.c-footer-nav .bricks-nav-menu > li > a,
.c-footer-nav .bricks-nav-menu > li > .brx-submenu-toggle > a {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: var(--gap-xs);
padding-block: var(--gap-3xs);
color: var(--fg);
font-size: var(--text-s);
font-weight: var(--font-weight-bold);
letter-spacing: var(--ls-s);
line-height: var(--line-height-heading);
text-decoration: none;
text-transform: uppercase;
}
.c-footer-nav .bricks-nav-menu > li > a::after,
.c-footer-nav .bricks-nav-menu > li > .brx-submenu-toggle > a::after {
content: "›";
flex: none;
color: var(--accent-readable);
font-size: var(--text-l);
font-weight: var(--font-weight-regular);
}
.c-footer-nav .bricks-nav-menu > li > a:hover,
.c-footer-nav .bricks-nav-menu > li > a:focus-visible,
.c-footer-nav .bricks-nav-menu > li > .brx-submenu-toggle > a:hover,
.c-footer-nav .bricks-nav-menu > li > .brx-submenu-toggle > a:focus-visible {
color: var(--accent-readable);
}
.c-footer-nav .bricks-nav-menu .sub-menu,
.c-footer-nav .brx-submenu-toggle > button,
.c-footer-nav .bricks-mobile-menu-toggle {
display: none;
}
@media (max-width: 1023px) {
.c-footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gap-xl);
}
.c-footer__navigation {
grid-column: 1 / -1;
}
}
@media (max-width: 767px) {
.c-footer {
padding-block: var(--gap-xl);
}
.c-footer__grid {
grid-template-columns: 1fr;
gap: var(--gap-xl);
}
.c-footer__navigation {
grid-column: auto;
}
}
/* _buttons.css */
/* ==========================================================================
BUTTONS — generischer Kern aus breuning-irco-child.
Breuning-Spezifika entfernt: FA-Pfeil-Reste, breuning_icon()-Kopplung,
.btn-fixed-Icon (calendar-check.svg), Signal-Rot im Focus-Ring.
========================================================================== */
.btn-sharp { --btn-radius: var(--radius-none); }
.btn-soft { --btn-radius: var(--radius-s); }
.btn-rounded { --btn-radius: var(--radius-m); }
.btn-pill { --btn-radius: var(--radius-full); }
.btn {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--gap-4xs);
padding: var(--gap-2xs) var(--gap-xs);
font-family: var(--font-primary);
font-size: var(--text-s);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--ls-m);
text-transform: uppercase;
text-decoration: none;
border: none;
cursor: pointer;
user-select: none;
touch-action: manipulation;
border-radius: var(--btn-radius);
background: var(--btn-primary-bg);
color: var(--btn-primary-color);
line-height: var(--line-height-compressed);
width: fit-content;
}
.btn:focus-visible {
outline: 2px solid var(--accent-readable);
outline-offset: 3px;
}
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
.btn:active {
transform: scale(0.97);
}
/* ==========================================================================
BUTTON MODIFIERS
========================================================================== */
/* Outline-Button, der die Ink des Grundes übernimmt (--fg).
Auf theme-festen Gründen (Foto-Overlays, dunkle Bänder) muss der
Kontext selbst --fg auf --palette-white pinnen.
Die Füllung läuft über zwei lokale Tokens, damit die Varianten unten
nur Werte setzen und nicht die Mechanik wiederholen. */
.btn-outline {
--btn-fill: transparent;
--btn-fill-hover: var(--accent-20);
background: var(--btn-fill);
color: var(--accent-readable);
box-shadow: inset 0 0 0 1px var(--accent-readable);
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.btn-outline:hover,
.btn-outline:focus-visible {
background: var(--accent-readable);
color: var(--btn-primary-color);
box-shadow: inset 0 0 0 1px var(--accent-readable);
}
/* Füllstufen für den DEFAULT-Zustand. Jede Stufe ist eine Sprosse der
Akzent-Leiter, der Hover geht genau eine Sprosse weiter — der Zuwachs
beim Überfahren bleibt überall gleich groß. Kombination:
"btn btn-outline btn-fill-2". Ohne Stufe = transparent. */
.btn-outline.btn-fill-1 {
--btn-fill: var(--accent-20);
--btn-fill-hover: var(--accent-30);
}
.btn-outline.btn-fill-2 {
--btn-fill: var(--accent-30);
--btn-fill-hover: var(--accent-40);
}
.btn-outline.btn-fill-3 {
--btn-fill: var(--accent-40);
--btn-fill-hover: var(--accent-50);
}
@media (prefers-reduced-motion: reduce) {
.btn-outline {
transition: none;
}
}
.btn-compact {
font-size: var(--text-xs);
padding: var(--gap-5xs) var(--gap-4xs);
}
/* ==========================================================================
SEITLICH FIXIERTER CTA-BUTTON
Icon bei Bedarf per Inline-SVG im Markup ergänzen (kein ::before-Mask
mehr — das Breuning-Icon-Asset wurde nicht mitportiert).
========================================================================== */
.btn-fixed {
position: fixed;
z-index: var(--z-fixed);
top: 50%;
right: 0;
transform: rotate(-90deg) translate(50%, 0);
transform-origin: right center;
gap: var(--gap-3xs);
padding: var(--gap-3xs) var(--gap-s);
background: var(--btn-primary-bg);
color: var(--btn-primary-color);
font-weight: var(--font-weight-bold);
box-shadow: -2px 0 15px rgb(0 0 0 / 0.2);
white-space: nowrap;
}
/* ==========================================================================
BUTTON-ICON — Inline-SVG im Markup.
========================================================================== */
.btn__icon {
--icon-stroke-width: 2.05;
order: 2;
width: 1em;
height: 1em;
flex: none;
/* Icon folgt der Textfarbe des Buttons. */
color: currentColor;
opacity: 1;
transform: none;
transform-origin: 50% 50%;
transition: transform 180ms ease;
}
.btn:is(:hover, :focus-visible) .btn__icon {
transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
.btn .btn__icon {
transition: none;
}
.btn:is(:hover, :focus-visible) .btn__icon {
transform: none;
}
}
/* _icons.css */
/* Lokale Inline-SVG-Icons aus assets/icons/ via holder_icon() / [icon]. */
.c-icon {
inline-size: var(--icon-size, 1em);
block-size: var(--icon-size, 1em);
display: inline-block;
vertical-align: -0.125em;
flex: none;
color: inherit;
fill: none;
stroke: currentColor;
stroke-width: var(--icon-stroke-width, 1.85);
stroke-linecap: round;
stroke-linejoin: round;
overflow: visible;
}
.c-icon--flip-x {
transform: scaleX(-1);
}
/* _tables.css */
/* ==========================================================================
COMPONENT: RESPONSIVE TABLE
Aus dem Breuning-IRCO-Muster .c-compare__scroll/.c-compare__table
portiert: auf kleinen Viewports horizontal scrollen statt Spalten zu
quetschen. Die Darstellung bleibt vollständig tokenbasiert.
========================================================================== */
.c-table-scroll {
max-inline-size: 100%;
overflow-x: auto;
scrollbar-width: thin;
overscroll-behavior-inline: contain;
}
.c-table {
inline-size: 100%;
min-inline-size: var(--container-width-narrow);
border-collapse: collapse;
font-size: var(--text-s);
}
.c-table :is(th, td) {
padding: var(--gap-m);
text-align: start;
vertical-align: top;
border: thin solid var(--divider-on-light);
}
.c-table thead th {
color: var(--content-body);
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-base);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.c-table tbody tr:nth-child(even) {
background: var(--surface-raised-soft);
}
.c-table a {
color: var(--accent);
font-weight: var(--font-weight-bold);
}
/* Zweispaltige technische Daten benötigen keine Mindestbreite für Vergleiche. */
.c-table--key-value {
min-inline-size: 0;
}
.c-table--key-value :is(th, td) {
padding: var(--gap-s);
}
.c-table--key-value tbody th {
font-weight: var(--font-weight-semibold);
}
/* _faq.css */
/* ==========================================================================
COMPONENT: FAQ / ACCORDION
Aus dem Breuning-IRCO-Framework portiert. Native details/summary,
keine JavaScript-Abhängigkeit.
========================================================================== */
.c-faq {
display: flex;
flex-direction: column;
gap: var(--gap-m);
}
.c-faq__list {
display: flex;
flex-direction: column;
}
.c-faq__item {
position: relative;
}
.c-faq__item + .c-faq__item::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline: 0;
block-size: thin;
background: linear-gradient(
to right,
color-mix(in srgb, var(--content-body) 30%, transparent),
transparent
);
}
:root[data-contrast="high"] .c-faq__item + .c-faq__item::before {
background: var(--content-body);
}
.c-faq__question {
display: flex;
align-items: center;
padding-block: var(--space-2xs);
color: var(--faq-question-color, var(--content-title));
font-size: var(--text-l);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-base);
list-style: none;
cursor: pointer;
transition: color 0.2s ease;
}
.c-faq:not(.c-faq--problem) .c-faq__question {
display: grid;
grid-template-columns: calc(var(--space-l) + var(--gap-3xs)) minmax(0, 1fr);
}
.c-faq__question::-webkit-details-marker {
display: none;
}
.c-faq__question::marker {
content: "";
}
.c-faq__question-icon {
flex: 0 0 auto;
inline-size: 0.7em;
block-size: 0.7em;
margin-inline-end: var(--gap-3xs);
color: var(--accent);
transform: rotate(90deg);
transition: transform 0.2s ease;
}
.c-faq:not(.c-faq--problem) .c-faq__question-icon {
margin-inline-end: 0;
}
.c-faq--native .c-faq__question::before {
inline-size: 0.7em;
block-size: 0.7em;
background-color: var(--accent);
content: "";
-webkit-mask: url("../assets/icons/chevron-right.svg") center / contain no-repeat;
mask: url("../assets/icons/chevron-right.svg") center / contain no-repeat;
transform: rotate(90deg);
transition: transform 0.2s ease;
}
.c-faq--native .c-faq__item[open] > .c-faq__question::before {
transform: rotate(-90deg);
}
.c-faq__item[open] > .c-faq__question .c-faq__question-icon {
transform: rotate(-90deg);
}
.c-faq__question:hover {
color: var(--faq-question-hover-color);
}
.c-faq__question:focus-visible {
outline: thin solid var(--faq-focus-color);
outline-offset: var(--space-4xs);
}
.c-faq__question-text {
flex: 1;
color: inherit;
font-weight: inherit;
background: none;
line-height: var(--faq-question-line-height, 1.25);
}
.c-product-tabs__panel .c-faq__question-text {
font-weight: var(--font-weight-regular);
}
.c-faq__answer {
display: grid;
grid-template-rows: 0fr;
padding-block-end: var(--space-xs);
font-size: var(--text-s);
line-height: var(--line-height-base);
opacity: 0;
transition: grid-template-rows 0.4s ease-out, opacity 0.25s ease;
}
.c-faq:not(.c-faq--problem) .c-faq__answer {
padding-inline-start: calc(var(--space-l) + var(--gap-3xs));
}
.c-faq__item[open] .c-faq__answer {
grid-template-rows: 1fr;
opacity: 1;
}
.c-faq__answer-text {
overflow: hidden;
color: var(--faq-answer-color, var(--content-body));
}
.c-faq__answer-text :first-child {
margin-block-start: 0;
}
.c-faq__answer-text :last-child {
margin-block-end: 0;
}
.c-faq__answer-text p + p {
margin-block-start: var(--gap-xs);
}
.c-faq__answer-text strong {
color: var(--accent);
font-weight: var(--font-weight-bold);
}
.c-faq__solution a {
color: var(--accent-readable);
font-weight: var(--font-weight-semibold);
text-decoration: underline;
text-decoration-thickness: from-font;
text-underline-offset: var(--space-4xs);
}
.c-faq__solution a:hover,
.c-faq__solution a:focus-visible {
color: var(--fg);
}
@media (prefers-reduced-motion: reduce) {
.c-faq__question,
.c-faq__answer {
transition: none;
}
}
/* --------------------------------------------------------------------------
MODIFIER: PROBLEM-LÖSUNGS-AKKORDEON
Kompakte dreispaltige Aufgabenliste nach dem Muster der alten Holder-Seite.
Kein FAQ-Schema: Inhaltlich handelt es sich um Anwendungsfälle.
-------------------------------------------------------------------------- */
.c-faq--problem .c-faq__list {
gap: var(--space-4xs);
}
.c-faq--problem .c-faq__item {
background: var(--surface-raised-soft);
}
.c-faq--problem .c-faq__item + .c-faq__item::before {
content: none;
}
.c-faq--problem .c-faq__question {
min-block-size: var(--space-5xl);
padding: var(--gap-s) var(--gap-m);
color: var(--palette-dark-blue);
font-size: var(--text-s);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--ls-m);
line-height: var(--line-height-heading);
text-transform: uppercase;
}
.c-faq--problem .c-faq__question::before {
content: "";
display: inline-block;
inline-size: 1.75em;
block-size: 1.75em;
margin-inline-end: var(--gap-xs);
flex: 0 0 auto;
background-color: var(--accent);
-webkit-mask: url("../assets/icons/circle-plus.svg") center / contain no-repeat;
mask: url("../assets/icons/circle-plus.svg") center / contain no-repeat;
transform: none;
}
.c-faq--problem .c-faq__question-icon {
display: none;
}
.c-faq--problem .c-faq__item[open] > .c-faq__question::before {
transform: rotate(45deg);
}
.c-faq--problem .c-faq__answer {
padding: 0 var(--gap-m) var(--gap-m);
}
/* Optionale Schriftstufe für kompakte FAQ-Varianten. */
.c-faq--question-m .c-faq__question-text {
font-size: var(--text-m);
}
.c-faq--hyphens-restrained .c-faq__question-text {
-webkit-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: 10 4 4;
hyphenate-limit-lines: 1;
hyphenate-limit-last: always;
word-break: normal;
overflow-wrap: normal;
}
/* _hotspot.css */
/* ==========================================================================
COMPONENT: HOTSPOT
Bildbasierte Infografik mit frei positionierten Markern.
Position je Marker: style="--x: 50%; --y: 50%;"
Optionales Bildformat: style="--hotspot-image-ratio: 16 / 9;"
========================================================================== */
.c-hotspot {
/* 30 % Holder-Blau auf Weiß entspricht dem hellen Blue-200-Palettenton. */
--hotspot-color: color-mix(in srgb, var(--accent) 30%, var(--surface-page));
--hotspot-on-color: var(--on-bg-light);
--hotspot-ring: color-mix(in srgb, var(--hotspot-color) 45%, transparent);
--hotspot-offset: var(--space-2xs);
--hotspot-popover-width: 24rem;
--hotspot-popover-bg: var(--bg-light);
--hotspot-popover-color: var(--accent);
--hotspot-shadow: 0 1.2rem 4rem var(--overlay-30);
position: relative;
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
contain: layout;
}
.c-hotspot__image {
display: block;
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: var(--hotspot-image-ratio, auto);
object-fit: contain;
}
.c-hotspot__marker {
position: absolute;
top: var(--y, 50%);
left: var(--x, 50%);
z-index: var(--z-raised, 10);
transform: translate(-50%, -50%);
}
.c-hotspot__trigger {
position: relative;
z-index: 1;
display: inline-flex;
min-height: 3.6rem;
align-items: center;
justify-content: center;
gap: var(--space-5xs);
padding: 0.5em 1em;
border: 0;
border-radius: var(--radius-full);
background: var(--hotspot-color);
color: var(--hotspot-on-color);
font: inherit;
font-family: var(--font-primary);
font-size: var(--text-s);
font-weight: var(--font-weight-bold);
line-height: 1;
letter-spacing: var(--ls-m);
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.c-hotspot__trigger--icon {
min-width: 4.2rem;
min-height: 4.2rem;
font-size: calc(var(--text-s) * 1.15);
letter-spacing: 0;
}
.c-hotspot__trigger:hover {
transform: scale(1.04);
box-shadow: 0 0 0 4px var(--hotspot-ring);
}
.c-hotspot__trigger:focus-visible {
outline: 2px solid var(--accent-readable);
outline-offset: 3px;
}
.c-hotspot__trigger[aria-expanded="true"] {
transform: scale(1.06);
box-shadow: 0 0 0 4px var(--hotspot-ring);
}
.c-hotspot__trigger-icon {
display: inline-flex;
width: 1em;
height: 1em;
align-items: center;
justify-content: center;
line-height: 1;
pointer-events: none;
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.c-hotspot__trigger-icon :is(svg, img) {
display: block;
width: 100%;
height: 100%;
}
.c-hotspot__trigger[aria-expanded="true"] .c-hotspot__trigger-icon {
transform: rotate(45deg);
}
.c-hotspot__trigger::before,
.c-hotspot__trigger::after {
content: "";
position: absolute;
inset: 0;
border: 2px solid var(--hotspot-color);
border-radius: inherit;
animation: holder-hotspot-pulse 2.4s ease-out infinite;
pointer-events: none;
}
.c-hotspot__trigger::after {
animation-delay: 900ms;
}
.c-hotspot__trigger[aria-expanded="true"]::before,
.c-hotspot__trigger[aria-expanded="true"]::after {
animation: none;
opacity: 0;
}
@keyframes holder-hotspot-pulse {
0% {
transform: scale(1);
opacity: 0.65;
}
100% {
transform: scale(1.7);
opacity: 0;
}
}
.c-hotspot__popover {
position: absolute;
bottom: calc(100% + var(--hotspot-offset));
left: 50%;
width: min(var(--hotspot-popover-width), calc(100vw - 2 * var(--space-xs)));
padding: var(--space-s);
transform: translateX(calc(-50% + var(--pop-shift, 0px))) translateY(var(--space-4xs));
border: 1px solid var(--accent-30);
border-radius: var(--radius-none);
background: var(--hotspot-popover-bg);
box-shadow: var(--hotspot-shadow);
color: var(--hotspot-popover-color);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
white-space: normal;
}
.c-hotspot__popover::after {
content: "";
position: absolute;
top: 100%;
left: calc(50% - var(--pop-shift, 0px));
transform: translateX(-50%);
border: 7px solid transparent;
border-top-color: var(--hotspot-popover-bg);
pointer-events: none;
}
.c-hotspot__marker.is-open .c-hotspot__popover {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(calc(-50% + var(--pop-shift, 0px))) translateY(0);
transition: opacity 200ms ease, transform 200ms ease;
}
.c-hotspot__marker.is-bottom .c-hotspot__popover {
top: calc(100% + var(--hotspot-offset));
bottom: auto;
transform: translateX(calc(-50% + var(--pop-shift, 0px))) translateY(calc(-1 * var(--space-4xs)));
}
.c-hotspot__marker.is-bottom.is-open .c-hotspot__popover {
transform: translateX(calc(-50% + var(--pop-shift, 0px))) translateY(0);
}
.c-hotspot__marker.is-bottom .c-hotspot__popover::after {
top: auto;
bottom: 100%;
border-top-color: transparent;
border-bottom-color: var(--hotspot-popover-bg);
}
.c-hotspot__popover .c-hotspot__popover-title {
display: block;
margin: 0 0 var(--space-5xs);
background: none;
box-shadow: none;
color: var(--hotspot-popover-color);
font-size: var(--text-s);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-heading);
letter-spacing: var(--ls-s);
text-transform: uppercase;
text-decoration: none;
}
.c-hotspot__popover-body {
margin: 0;
color: var(--hotspot-popover-color);
font-size: var(--text-xs);
line-height: var(--line-height-base);
opacity: 0.82;
}
@media (max-width: 767px) {
.c-hotspot {
--hotspot-popover-width: 20rem;
}
}
@media (hover: hover) {
.c-hotspot--on-hover .c-hotspot__marker:hover .c-hotspot__popover {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(calc(-50% + var(--pop-shift, 0px))) translateY(0);
transition: opacity 200ms ease, transform 200ms ease;
}
.c-hotspot--on-hover .c-hotspot__marker:hover .c-hotspot__trigger {
transform: scale(1.06);
box-shadow: 0 0 0 4px var(--hotspot-ring);
}
.c-hotspot--on-hover .c-hotspot__marker:hover .c-hotspot__trigger::before,
.c-hotspot--on-hover .c-hotspot__marker:hover .c-hotspot__trigger::after {
animation: none;
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.c-hotspot__trigger,
.c-hotspot__trigger-icon,
.c-hotspot__popover {
transition-duration: 0.01ms;
}
.c-hotspot__trigger::before,
.c-hotspot__trigger::after {
animation: none;
opacity: 0;
}
}
/* _hero.css */
/* ==========================================================================
HERO — Kachel-Reveal (RevSlider-Ersatz, ohne JS)
==========================================================================
Das gemeinsame Bild liegt proportional als Cover auf dem Kachel-Grid.
Die 25 Kacheln dienen ausschließlich als Reveal-Maske. Dadurch bleiben
auch Hero-Quellen mit unterschiedlichen Seitenverhältnissen unverzerrt.
Timings wie das alte rev_slider_92: Kacheln 0-0.48s, Button ab 0.4s,
H1 ab 0.9s.
========================================================================== */
.c-hero {
--hero-h: clamp(292px, 29.6875vw, 570px);
--hero-img: url("/wp-content/uploads/holder-slider_universal_01-min.jpg");
--hero-inline-space: var(--space-2xl);
position: relative;
overflow: hidden;
container-type: inline-size;
background: var(--surface-page);
height: var(--hero-h);
margin-block-start: var(--space-s);
padding-inline: var(--hero-inline-space);
padding-block: 0;
/* Theme-fester dunkler Grund: Ink pinnen, Leitern rechnen mit. */
--fg: var(--palette-white);
color: var(--fg);
}
/* Branchenübersicht, direkte Branchen-Landingpages und das Glossar teilen
sich ein neutrales, verfahrensübergreifendes Hero-Motiv. */
.page-id-1871 .c-hero,
.parent-pageid-1871 .c-hero,
.page-id-1394 .c-hero {
--hero-img: url("../assets/images/hero/holder-hero-universal.webp");
}
/* Testweise: eigene Motive für einzelne Branchen statt des gemeinsamen
Branchen-Hero-Bilds. Bei Bedarf einfach den jeweiligen Block entfernen,
die allgemeine Regel oben greift dann wieder. */
.page-id-1864 .c-hero,
.page-id-1987 .c-hero {
--hero-img: url("../assets/images/industries/holder-branchen_medizintechnik_01.jpg");
}
/* Post 1986 = EN-Sprachpartner "Automotive & Mobility" (sprachpartner von
1895) — teilt sich bewusst dasselbe Hero-Motiv, da CSS-Selektoren an die
Post-ID gebunden sind und der Sprachpartner sonst leer ausginge. */
.page-id-1895 .c-hero,
.page-id-1986 .c-hero {
--hero-img: url("../assets/images/industries/holder-branchen_automotive-mobilitaet_neu.png");
/* Das Original bleibt vollbreit; auf Ultrawide wächst die Motivhöhe mit. */
--hero-h: max(292px, 29.6875vw);
}
.page-id-1895 .c-hero__tiles,
.page-id-1986 .c-hero__tiles {
background-size: 100% auto;
background-position: center 55%;
background-color: var(--bg-dark);
}
.page-id-1900 .c-hero,
.page-id-1988 .c-hero {
--hero-img: url("../assets/images/industries/holder-branchen_luft-raumfahrt_01.jpg");
}
.page-id-1963 .c-hero,
.page-id-1997 .c-hero {
--hero-img: url("../assets/images/industries/holder-branchen_chemie-kunststoff_01.jpg");
}
.page-id-2000 .c-hero,
.page-id-2003 .c-hero {
--hero-img: url("../assets/images/industries/lebensmittel.webp");
}
/* Langes Branchenwort auf schmalen Ansichten an Silben statt mitten im Wort. */
.page-id-2000 :is(.c-hero__title, .c-content__title) {
hyphens: auto;
hyphenate-limit-chars: 6 4 4;
}
.page-id-1966 .c-hero,
.page-id-1998 .c-hero {
--hero-img: url("../assets/images/industries/holder-branchen_ruestungsindustrie_01.jpg");
}
.page-id-1969 .c-hero,
.page-id-1999 .c-hero {
--hero-img: url("../assets/images/industries/holder-branchen_bergbau_01.jpg");
}
.page-id-1909 .c-hero,
.page-id-1990 .c-hero {
--hero-img: url("../assets/images/industries/holder-branchen_elektrotechnik-elektronik_01.jpg");
}
.page-id-1902 .c-hero,
.page-id-1989 .c-hero {
--hero-img: url("../assets/images/industries/holder-branchen_energie-infrastruktur_01.jpg");
}
.page-id-1913 .c-hero,
.page-id-1991 .c-hero {
--hero-img: url("../assets/images/industries/holder-branchen_maschinen-anlagenbau_01.jpg");
}
.page-id-1946 .c-hero,
.page-id-1992 .c-hero {
--hero-img: url("../assets/images/industries/holder-branchen_hydraulik_01.jpg");
}
.page-id-1947 .c-hero,
.page-id-1993 .c-hero {
--hero-img: url("../assets/images/industries/holder-branchen_offshore_01.jpg");
}
.page-id-1949 .c-hero,
.page-id-1994 .c-hero {
--hero-img: url("../assets/images/industries/holder-branchen_papier-textil-druck_01.jpg");
}
.page-id-1951 .c-hero,
.page-id-1995 .c-hero {
--hero-img: url("../assets/images/industries/holder-branchen_bau-beschlag-metallbau_01.jpg");
}
.page-id-1953 .c-hero,
.page-id-1996 .c-hero {
--hero-img: url("../assets/images/industries/holder-branchen_zweirad-geraete-konsumgueter_hero.webp");
--hero-h: max(292px, 34vw);
}
.page-id-1953 .c-hero__tiles,
.page-id-1996 .c-hero__tiles {
background-size: 100% auto;
background-position: center 60%;
background-color: var(--bg-dark);
}
.c-hero__tiles {
position: absolute;
inset-block: 0;
inset-inline: var(--hero-inline-space);
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
background-image: var(--hero-img);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
pointer-events: none;
}
/* Testweise: dezenter Holder-blauer Farbfilter über den Branchen-Heros,
damit unterschiedliche Bildquellen (Fotos statt Panorama-Motiv) optisch
näher an die übrigen Heros der Seite heranrücken. Reiner Versuch — bei
Bedarf einfach diesen Block entfernen. */
.page-id-1871 .c-hero__tiles::after,
.parent-pageid-1871 .c-hero__tiles::after,
.parent-pageid-1985 .c-hero__tiles::after {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--palette-blue) 30%, transparent);
content: "";
pointer-events: none;
}
/* Wie beim Startseiten-Slider: Im Hochkontrastmodus liegt eine ruhige,
gleichmäßige Dunkelfläche zwischen Bild und weißer Hero-Schrift. */
:root[data-contrast="high"] .c-hero__tiles::after {
position: absolute;
inset: 0;
background: var(--overlay-70);
content: "";
pointer-events: none;
}
.c-hero__tile {
background: var(--bg-dark);
opacity: 0;
animation: hero-tile-reveal 0.9s ease-out backwards;
}
/* Gewürfelte Reveal-Verzögerungen */
.c-hero__tile:nth-child(1) { animation-delay: 0.32s; }
.c-hero__tile:nth-child(2) { animation-delay: 0.04s; }
.c-hero__tile:nth-child(3) { animation-delay: 0.44s; }
.c-hero__tile:nth-child(4) { animation-delay: 0.16s; }
.c-hero__tile:nth-child(5) { animation-delay: 0.28s; }
.c-hero__tile:nth-child(6) { animation-delay: 0.48s; }
.c-hero__tile:nth-child(7) { animation-delay: 0.12s; }
.c-hero__tile:nth-child(8) { animation-delay: 0.36s; }
.c-hero__tile:nth-child(9) { animation-delay: 0s; }
.c-hero__tile:nth-child(10) { animation-delay: 0.24s; }
.c-hero__tile:nth-child(11) { animation-delay: 0.08s; }
.c-hero__tile:nth-child(12) { animation-delay: 0.40s; }
.c-hero__tile:nth-child(13) { animation-delay: 0.20s; }
.c-hero__tile:nth-child(14) { animation-delay: 0.46s; }
.c-hero__tile:nth-child(15) { animation-delay: 0.02s; }
.c-hero__tile:nth-child(16) { animation-delay: 0.30s; }
.c-hero__tile:nth-child(17) { animation-delay: 0.14s; }
.c-hero__tile:nth-child(18) { animation-delay: 0.38s; }
.c-hero__tile:nth-child(19) { animation-delay: 0.06s; }
.c-hero__tile:nth-child(20) { animation-delay: 0.26s; }
.c-hero__tile:nth-child(21) { animation-delay: 0.42s; }
.c-hero__tile:nth-child(22) { animation-delay: 0.18s; }
.c-hero__tile:nth-child(23) { animation-delay: 0.34s; }
.c-hero__tile:nth-child(24) { animation-delay: 0.10s; }
.c-hero__tile:nth-child(25) { animation-delay: 0.22s; }
.c-hero__content {
position: relative;
z-index: var(--z-base);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--gap-m);
height: 100%;
text-align: center;
}
.c-hero__eyebrow,
.c-hero__subline {
display: inline-block;
padding: var(--space-5xs) var(--space-xl);
font-size: var(--text-s);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--ls-l);
text-transform: uppercase;
border-radius: var(--radius-xs);
}
.c-hero__eyebrow {
background: color-mix(in srgb, var(--palette-blue) 55%, transparent);
color: var(--palette-white);
animation: hero-btn-in 0.6s ease-out 0.4s backwards;
}
.c-hero__title {
color: var(--hero-title-color, var(--fg));
text-shadow: var(--hero-title-shadow, var(--on-bg-image-title-shadow));
font-weight: var(--font-weight-bold);
font-size: var(--heading-5xl);
line-height: 1;
text-align: center;
animation: hero-rise 0.6s ease-out 0.9s backwards;
}
.c-hero__subline {
background: color-mix(in srgb, var(--palette-white) 75%, transparent);
color: var(--hero-title-color, var(--fg));
text-align: center;
animation: hero-rise 0.6s ease-out 1.1s backwards;
}
.c-hero__btn {
padding: 12px 40px;
color: var(--fg);
font-weight: var(--font-weight-semibold);
font-size: 16px;
letter-spacing: 1px;
text-align: center;
background-color: color-mix(in srgb, var(--accent) 50%, transparent);
border-radius: 3px;
transition: background-color 0.2s ease, color 0.2s ease;
animation: hero-btn-in 0.6s ease-out 0.4s backwards;
}
.c-hero__btn:hover,
.c-hero__btn:focus-visible {
background-color: var(--palette-white);
color: var(--palette-black);
}
@keyframes hero-tile-reveal {
from { opacity: 1; transform: scale(1.1); }
to { opacity: 0; transform: scale(1); }
}
@keyframes hero-rise {
from { opacity: 0; translate: 0 -50px; }
to { opacity: 1; translate: 0 0; }
}
@keyframes hero-btn-in {
from { opacity: 0; translate: 0 24px; }
to { opacity: 1; translate: 0 0; }
}
@keyframes hero-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.c-hero__title,
.c-hero__subline,
.c-hero__eyebrow,
.c-hero__btn {
animation-name: hero-fade !important;
}
.c-hero__tile {
animation: none;
}
}
/* _components.css */
/* ==========================================================================
COMPONENTS
Migriert aus den ep-*-Bricks-Globalklassen der Testseite (2026-07-22).
Werte hängen an Framework-Tokens, nie direkt an der Palette — Ausnahme:
theme-feste Zusagen (Karte bleibt weiß, Band bleibt dunkel).
========================================================================== */
/* ==========================================================================
COMPONENT: SECTION
Semantische Schicht über dem Layout-System:
c-section > l-container > c-content
========================================================================== */
.c-section {
--section-bg: transparent;
--section-pt: var(--section-padding-top-m);
--section-pb: var(--section-padding-bottom-m);
position: relative;
width: 100%;
overflow: clip;
padding-block: var(--section-pt) var(--section-pb);
background: var(--section-bg);
}
.c-section--dark {
--section-bg: var(--bg-dark);
}
.c-section--light {
--section-bg: var(--bg-light);
}
.c-section--action,
.c-section--accent {
--section-bg: var(--bg-accent);
}
.c-section--muted {
--section-bg: var(--bg-muted);
}
.c-section--alternate {
--section-bg: var(--surface-raised-soft);
}
.c-section--forms {
--section-bg: var(--surface-muted-light);
}
.c-section--footer {
--section-bg: var(--bg-dark);
}
.c-section--image,
.c-section--image-overlay {
--section-bg: transparent;
}
.c-section--adaptive {
--section-bg: var(--surface-page);
--content-overline: var(--accent);
--content-title: var(--fg);
--content-heading: var(--accent-readable);
--content-subline: var(--fg-80);
--content-intro: var(--fg-90);
--content-body: var(--fg-80);
--content-strong-bg: var(--accent-10);
--content-strong-text: var(--fg);
color: var(--fg);
}
.c-section--divided {
border-block-end: 1px solid var(--ui-divider-dark);
}
.c-section--none {
--section-pt: var(--section-padding-top-none);
--section-pb: var(--section-padding-bottom-none);
}
.c-section--xs {
--section-pt: var(--section-padding-top-xs);
--section-pb: var(--section-padding-bottom-xs);
}
.c-section--s {
--section-pt: var(--section-padding-top-s);
--section-pb: var(--section-padding-bottom-s);
}
.c-section--m {
--section-pt: var(--section-padding-top-m);
--section-pb: var(--section-padding-bottom-m);
}
.c-section--l {
--section-pt: var(--section-padding-top-l);
--section-pb: var(--section-padding-bottom-l);
}
.c-section--xl {
--section-pt: var(--section-padding-top-xl);
--section-pb: var(--section-padding-bottom-xl);
}
.c-section--pt-none {
--section-pt: var(--section-padding-top-none);
}
.c-section--pb-none {
--section-pb: var(--section-padding-bottom-none);
}
/* ==========================================================================
COMPONENT: CONTENT
========================================================================== */
.c-content {
--content-overline: var(--accent);
--content-title: var(--fg);
--content-heading: var(--accent-readable);
--content-subline: var(--fg-80);
--content-intro: var(--fg-90);
--content-body: var(--fg-80);
--content-strong-bg: var(--accent-10);
--content-strong-text: var(--fg);
color: var(--content-body);
}
.c-content > * {
margin: 0;
}
.c-content--dark,
.c-content--action,
.c-content--accent,
.c-content--footer,
.c-content--image,
.c-card--dark,
.c-card--action,
.c-card--accent,
.c-card--footer,
.c-card--image {
--fg: var(--palette-white);
--content-overline: var(--accent-readable);
--content-title: var(--palette-white);
--content-heading: var(--accent-readable);
--content-subline: var(--fg-80);
--content-intro: var(--fg-90);
--content-body: var(--fg-80);
--content-strong-bg: var(--accent-20);
--content-strong-text: var(--palette-white);
}
.c-content--image,
.c-card--image {
--text-highlight: var(--on-bg-image-highlight);
}
.c-content--light,
.c-content--alternate,
.c-content--muted,
.c-content--forms,
.c-card--light,
.c-card--alternate,
.c-card--muted,
.c-card--forms {
--fg: var(--palette-black);
--content-overline: var(--accent);
--content-title: var(--palette-black);
--content-heading: var(--accent);
--content-subline: var(--fg-80);
--content-intro: var(--fg-90);
--content-body: var(--fg-80);
--content-strong-bg: var(--accent-10);
--content-strong-text: var(--palette-black);
}
.c-content__overline {
display: block;
width: fit-content;
padding: 0;
color: var(--content-overline);
font-size: calc(16px + (24 - 16) * ((50vw - 300px) / (1600 - 300)));
font-weight: var(--font-weight-regular);
letter-spacing: var(--ls-m);
line-height: var(--line-height-heading);
text-transform: uppercase;
}
.c-content__title {
color: var(--content-title);
font-style: normal;
font-weight: var(--font-weight-regular);
line-height: var(--line-height-heading);
text-transform: uppercase;
letter-spacing: var(--ls-m);
}
/* Icon und Text bleiben eine gemeinsame Zeile. Nur der Text innerhalb des
zweiten Flex-Kinds darf umbrechen; das Icon springt dadurch nicht darüber. */
.c-content__title.l-cluster {
flex-wrap: nowrap;
align-items: flex-start;
}
.c-content__title.l-cluster > .brxe-text-basic {
flex: 1 1 auto;
min-inline-size: 0;
}
.c-content__subline {
color: var(--content-subline);
font-size: var(--text-l);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-base);
}
/* Holder-Blau statt der gedämpften Standardfarbe — z. B. News-Intro-Zeile
über dem Haupttext. */
.c-content__subline--accent {
color: var(--content-heading);
}
.c-content__intro {
color: var(--content-intro);
font-size: var(--text-s);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-base);
}
.c-content__intro--rule {
max-inline-size: 80ch;
padding-inline-start: var(--gap-m);
border-inline-start: 4px solid var(--accent-40);
}
/* Praxis-Hinweis: kurzer Anwendungsfall, z. B. bei Normen/Spezifikationen
im Glossar. Kursiv statt Farbe/Rahmen, um sich von __intro abzusetzen,
ohne einen weiteren Akzentfarb-Block einzufuehren. */
.c-content__practice {
margin-top: var(--gap-3xs);
color: var(--content-intro);
font-size: var(--text-s);
font-style: italic;
line-height: var(--line-height-base);
}
.c-content__body {
color: var(--content-body);
font-size: var(--text-s);
line-height: var(--line-height-base);
}
/* Framework-Basis für redaktionellen Fließtext. Ohne diese Regel besitzen
aufeinanderfolgende Absätze wegen des globalen Margin-Resets keinen Abstand.
In einem Stack übernimmt dagegen ausschließlich dessen Gap den Rhythmus. */
.c-content__body p + p {
margin-block-start: var(--content-paragraph-gap, var(--gap-2xs));
}
.c-content__body.l-stack > p + p {
margin-block-start: 0;
}
.c-content__body--small {
font-size: var(--text-xs);
}
/* Ruhiger redaktioneller Hinweis am Ende eines Inhaltsbereichs.
Die industrielle Anmutung bleibt bewusst flach und präzise: keine
Warnfarbe, kein Karten-Schatten und keine dekorative Rundung. */
.c-info-box {
display: grid;
grid-template-columns: 4rem minmax(0, 1fr);
align-items: start;
gap: var(--gap-s);
inline-size: 100%;
padding: var(--space-m);
border: 1px solid var(--ui-divider);
border-inline-start: 3px solid var(--accent-40);
background: color-mix(in srgb, var(--bg-muted) 82%, var(--bg-light));
color: var(--content-body);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-base);
}
.c-info-box::before {
content: "";
inline-size: 4rem;
block-size: 4rem;
margin-block-start: 0;
background-color: var(--accent);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 47.99rem) {
.c-info-box {
gap: var(--gap-xs);
padding: var(--space-s);
}
}
/* :not(.btn) hält das Button-System raus: Ohne diese Ausnahme gewinnt die
Textlink-Box-Shadow gegen `.btn-outline` (gleiche Spezifität, aber Klasse
+ Element schlägt reine Klasse), z. B. beim News-Link-Baustein innerhalb
des `.c-content__body`-post-content-Elements. */
.c-content__body a:not(.btn),
.c-content__intro a:not(.btn),
.c-card__body a:not(.btn) {
color: inherit;
font-weight: var(--font-weight-semibold);
word-break: normal;
overflow-wrap: break-word;
hyphens: auto;
text-decoration: none;
box-shadow: 0 calc(-1 * var(--text-highlight-thickness)) 0 var(--text-highlight) inset;
transition: box-shadow 0.2s ease;
}
.c-content__body a:not(.btn):hover,
.c-content__body a:not(.btn):focus-visible,
.c-content__intro a:not(.btn):hover,
.c-content__intro a:not(.btn):focus-visible,
.c-card__body a:not(.btn):hover,
.c-card__body a:not(.btn):focus-visible {
box-shadow: 0 -0.4em 0 var(--text-highlight) inset;
}
.c-content__body strong,
.c-content__intro strong,
.c-card__body strong {
color: inherit;
font-weight: var(--font-weight-semibold);
background: none;
box-shadow: 0 calc(-1 * var(--text-highlight-thickness)) 0 var(--text-highlight) inset;
}
.c-content__title--gradient {
width: fit-content;
max-width: 100%;
color: var(--fg);
background: linear-gradient(
to right,
var(--fg) 0%,
var(--accent) 73%,
var(--accent) 100%
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Einheitlicher H2-Auftritt in regulären Seiteninhalten. Der Scope auf
#brx-content und .c-content__title schützt komponenteneigene H2 wie Karten,
Dialogtitel, Tabs und zugängliche Hilfsüberschriften. */
#brx-content h2.c-content__title {
width: fit-content;
max-width: 100%;
color: var(--fg);
background: linear-gradient(
to right,
var(--fg) 0%,
var(--accent) 73%,
var(--accent) 100%
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--content-title-size, var(--heading-3xl));
}
.c-content__title--on-image,
#brx-content h2.c-content__title--on-image {
color: var(--on-bg-image);
background: none;
background-clip: border-box;
-webkit-background-clip: border-box;
-webkit-text-fill-color: currentColor;
}
.c-content__title--5xl { --content-title-size: var(--heading-5xl); font-size: var(--content-title-size); }
.c-content__title--4xl { --content-title-size: var(--heading-4xl); font-size: var(--content-title-size); }
.c-content__title--3xl { --content-title-size: var(--heading-3xl); font-size: var(--content-title-size); }
.c-content__title--2xl { --content-title-size: var(--heading-2xl); font-size: var(--content-title-size); }
.c-content__title--xl { --content-title-size: var(--heading-xl); font-size: var(--content-title-size); }
.c-content__title--l { --content-title-size: var(--heading-l); font-size: var(--content-title-size); }
.c-content__title--m { --content-title-size: var(--heading-m); font-size: var(--content-title-size); }
.c-content__title--s { --content-title-size: var(--heading-s); font-size: var(--content-title-size); }
.c-content__title--xs { --content-title-size: var(--heading-xs); font-size: var(--content-title-size); }
.c-content__title--2xs { --content-title-size: var(--heading-2xs); font-size: var(--content-title-size); }
.c-content__title--3xs { --content-title-size: var(--heading-3xs); font-size: var(--content-title-size); }
/* Eyebrow — kleine Vorzeile über Headlines (war ep-prehead) */
.c-eyebrow {
margin: 0 0 0.25em;
padding-top: 0;
color: var(--accent);
font-size: calc(16px + (24 - 16) * ((50vw - 300px) / (1600 - 300)));
font-weight: var(--font-weight-regular);
letter-spacing: var(--ls-m);
text-transform: uppercase;
}
/* Große Headlines auf hellen Flächen. Bewusst als Klasse statt globalem
h1/h2-Reset, damit Headlines auf dunklen Flächen ihren Kontext behalten. */
.c-heading-gradient {
color: var(--palette-black);
background: linear-gradient(
to right,
var(--palette-black),
var(--palette-blue)
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Im Hochkontrastmodus zählt eindeutige Zeichenfarbe statt dekorativer
Farbübergänge. Die Regeln erfassen sowohl explizite Verlaufs-Headlines
als auch den globalen H2-Auftritt in regulären Inhaltsbereichen. */
:root[data-contrast="high"] .c-content__title--gradient,
:root[data-contrast="high"] #brx-content h2.c-content__title,
:root[data-contrast="high"] .c-heading-gradient {
color: var(--fg);
background: none;
background-clip: border-box;
-webkit-background-clip: border-box;
-webkit-text-fill-color: currentColor;
}
:root[data-contrast="high"] .c-content__body a:not(.btn),
:root[data-contrast="high"] .c-content__intro a:not(.btn),
:root[data-contrast="high"] .c-card__body a:not(.btn) {
color: var(--fg);
text-decoration-line: underline;
text-decoration-color: currentColor;
text-decoration-thickness: 1px;
text-underline-offset: 0.24em;
box-shadow: none;
}
/* Service-Kacheln auf bildgestütztem, dunklem Hintergrund */
.c-service-card__layout {
display: flex;
flex-direction: column;
align-items: flex-end;
min-width: 0;
height: 100%;
gap: var(--gap-m);
}
.c-service-card {
display: flex;
flex-direction: row;
align-items: flex-start;
min-width: 0;
width: 100%;
gap: var(--gap-xs);
}
.c-service-card__icon {
display: block;
flex: none;
margin-top: var(--gap-3xs);
width: var(--heading-xs);
height: auto;
filter: brightness(0) invert(1);
}
.c-service-card__body {
min-width: 0;
color: var(--palette-white);
font-size: var(--text-s);
}
.c-service-card__body .c-content__body {
color: inherit;
}
.c-service-card__title {
margin: 0 0 var(--gap-2xs);
color: var(--on-bg-image);
font-size: var(--heading-xs);
font-style: normal;
font-weight: var(--font-weight-bold);
line-height: var(--line-height-heading);
text-transform: uppercase;
}
.c-service-card__title a {
color: inherit;
word-break: normal;
hyphens: manual;
}
.c-service-card__button {
--btn-primary-bg: var(--on-bg-image);
--btn-primary-color: var(--palette-blue);
--btn-radius: 0.3rem;
padding: 0 var(--gap-5xs) 0 var(--gap-2xs);
font-size: 1.1rem;
font-weight: var(--font-weight-bold);
letter-spacing: 0;
line-height: 2;
}
/* Pfeil rein per CSS: Das Bricks-Icon bleibt im Markup, Font Awesome wird nicht geladen. */
.c-service-card__button > i {
flex: none;
width: 0.5em;
height: 0.72em;
background: currentColor;
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* Dunkles Claim-Band: pinnt die Ink auf Weiß, Leitern rechnen mit
(war ep-claim-section) */
.c-band-dark {
--fg: var(--palette-white);
background: var(--bg-dark);
color: var(--fg);
}
/* Zentrierter Claim-Satz im Band (war ep-claim) */
.c-claim {
color: var(--fg);
font-size: var(--heading-m);
text-align: center;
max-width: 60ch;
margin-inline: auto;
}
/* Generischer Mediencontainer. Flächenfarbe, Rahmen und Bildverhalten werden
nicht erzwungen; die Komponente definiert nur Clipping und Format. */
.c-media {
position: relative;
overflow: hidden;
}
.c-media--landscape {
aspect-ratio: 8 / 5;
}
.c-blur-image {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.c-blur-image__placeholder,
.c-blur-image__full {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.c-blur-image__placeholder {
z-index: 1;
scale: 1.06;
filter: blur(12px);
transition: opacity 300ms linear;
}
.c-blur-image__full {
z-index: 2;
opacity: 0;
transition: opacity 300ms linear;
}
.c-blur-image.is-loaded .c-blur-image__placeholder {
opacity: 0;
}
.c-blur-image.is-loaded .c-blur-image__full {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.c-blur-image__placeholder,
.c-blur-image__full {
transition: none;
}
}
/* Karte (war ep-card) — theme-fest weiß, auch auf getönten Bändern */
.c-card {
--fg: var(--palette-black);
background: var(--bg-light);
color: var(--fg);
padding: var(--gap-m);
}
.c-card__title {
color: var(--accent);
margin-bottom: var(--gap-xs);
}
/* Dekorative Lucide-Symbole: Überschrift bleibt nativ/editierbar, ohne Badge.
Wie bei c-list--checks werden die lokalen SVGs als Farbmaske eingebunden. */
.c-card__heading--icon {
--card-heading-icon-size: 2.8rem;
position: relative;
padding-inline-start: calc(var(--card-heading-icon-size) + var(--gap-xs));
min-block-size: var(--card-heading-icon-size);
}
.c-card__heading--icon::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block-start: 0;
inline-size: var(--card-heading-icon-size);
block-size: var(--card-heading-icon-size);
background: var(--accent);
-webkit-mask: var(--card-heading-icon) center / contain no-repeat;
mask: var(--card-heading-icon) center / contain no-repeat;
}
.c-card__heading--drafting-compass { --card-heading-icon: url('../assets/icons/drafting-compass.svg'); }
.c-card__heading--puzzle { --card-heading-icon: url('../assets/icons/puzzle.svg'); }
.c-card__heading--clipboard-check { --card-heading-icon: url('../assets/icons/clipboard-check.svg'); }
.c-card__heading--workflow { --card-heading-icon: url('../assets/icons/workflow.svg'); }
/* Aufzählungsliste in Karten (war ep-list) */
.c-list {
display: flex;
flex-direction: column;
gap: var(--gap-3xs);
padding-left: 1.2em;
margin: 0;
}
.c-list--checks {
padding-inline-start: 0;
list-style: none;
}
.c-list--checks > li {
position: relative;
padding-inline-start: 1.55em;
}
.c-list--checks > li::before {
position: absolute;
inset-block-start: 0.25em;
inset-inline-start: 0;
width: 1em;
height: 1em;
content: "";
background: var(--accent);
-webkit-mask: url("../assets/icons/check.svg") center / contain no-repeat;
mask: url("../assets/icons/check.svg") center / contain no-repeat;
}
/* Dezente Variante ohne Haken-Konnotation, z. B. für neutrale Datenaufzählungen */
.c-list--squares {
padding-inline-start: 0;
list-style: none;
}
.c-list--squares > li {
position: relative;
padding-inline-start: 1.1em;
}
.c-list--squares > li::before {
position: absolute;
inset-block-start: 0.55em;
inset-inline-start: 0.05em;
width: 0.4em;
height: 0.4em;
content: "";
background: var(--accent);
}
/* Gerahmte Box mit dezentem grauem Rand, z. B. um hervorgehobene Adress-/Kontaktblöcke */
.c-highlight-box {
padding: var(--space-l);
border: 1px solid var(--border);
}
/* Adressblock mit Kontakt-Icon-Zeilen, z. B. Datenschutz-Verantwortlicher, Impressum */
.c-address-block {
display: flex;
flex-direction: column;
gap: var(--gap-xs);
font-style: normal;
}
.c-address-block__name {
margin: 0;
font-weight: var(--font-weight-semibold);
}
.c-address-block__lines {
margin: 0;
}
.c-address-block__contact {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-3xs);
margin: 0;
}
.c-address-block__contact a {
display: inline-flex;
align-items: center;
gap: var(--gap-3xs);
color: inherit;
text-decoration: none;
}
.c-address-block__contact a:hover,
.c-address-block__contact a:focus-visible {
color: var(--accent-readable);
}
.c-address-block__contact .c-icon {
--icon-size: 1em;
color: var(--accent);
}
/* Nummern-/Initial-Kreis (war ep-dropcap) */
.c-dropcap {
--dropcap-size: 6.2rem;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--dropcap-size);
height: var(--dropcap-size);
overflow: hidden;
color: var(--palette-white);
background: var(--accent);
border-radius: var(--radius-none);
font-size: calc(var(--text-l) * 2);
font-weight: var(--font-weight-bold);
line-height: 1;
text-align: center;
}
/* Variante: als Initial in den Fließtext gefloatet */
.c-dropcap--float {
float: left;
margin-top: var(--space-2xs);
margin-right: var(--space-m);
}
/* Kontrast-Umschalter (Shortcode [holder_contrast_toggle], Header-Nav).
Semantischer Switch mit Track und weich verschiebbarem Icon-Knopf. */
.c-display-controls {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.c-contrast-toggle {
position: relative;
display: inline-block;
width: 4rem;
height: 2.4rem;
padding: 0;
color: var(--fg);
background: var(--fg-10);
border: 1px solid var(--fg-20);
border-radius: var(--radius-full);
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.c-contrast-toggle:hover {
border-color: var(--accent);
}
.c-contrast-toggle:focus-visible {
outline: 2px solid var(--accent-readable);
outline-offset: 2px;
}
.c-contrast-toggle[aria-checked="true"] {
background: var(--accent);
border-color: var(--accent);
}
.c-contrast-toggle__check {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 0.2rem;
display: grid;
place-items: center;
width: 1.4rem;
height: 1.4rem;
color: var(--surface-page);
background: transparent;
border-radius: var(--radius-full);
transform: translateY(-50%);
transition: transform 0.25s ease, color 0.2s ease, background-color 0.2s ease;
}
.c-contrast-toggle[aria-checked="true"] .c-contrast-toggle__check {
color: var(--on-bg-accent);
background: transparent;
transform: translate(2rem, -50%);
}
.c-contrast-toggle__icon {
display: grid;
place-items: center;
width: 1.4rem;
height: 1.4rem;
}
.c-contrast-toggle__icon svg {
width: 100%;
height: 100%;
}
/* _home-slider.css */
/* ==========================================================================
STARTSEITE: HISTORISCHER HOLDER-SLIDER
Eigenständiger, pluginfreier Ersatz für Slider Revolution.
========================================================================== */
.c-home-slider {
--home-slider-crossfade-duration: 1400ms;
--home-slider-crossfade-ease: cubic-bezier(0.45, 0, 0.2, 1);
position: relative;
overflow: hidden;
padding-block-end: var(--space-5xl);
background: var(--surface-page);
}
.c-home-slider__stage {
position: relative;
height: clamp(48rem, 37.5vw, 67.5rem);
min-height: 48rem;
overflow: hidden;
background: var(--bg-dark);
}
.c-home-slider__slides,
.c-home-slider__slide,
.c-home-slider__media,
.c-home-slider__scrim {
position: absolute;
inset: 0;
}
.c-home-slider__slide {
--fg: var(--on-bg-image);
z-index: 1;
color: var(--fg);
opacity: 0;
visibility: hidden;
transition:
opacity var(--home-slider-crossfade-duration) var(--home-slider-crossfade-ease),
visibility 0s linear var(--home-slider-crossfade-duration);
}
.c-home-slider__slide.is-before {
opacity: 0;
}
.c-home-slider__slide.is-active {
z-index: 2;
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.c-home-slider__slide--light {
--fg: var(--on-bg-image-light-title);
}
.c-home-slider__media {
background: var(--surface-page);
transform: scale(1.035);
transform-origin: center;
transition: transform var(--home-slider-crossfade-duration) var(--home-slider-crossfade-ease);
will-change: transform;
}
.c-home-slider__slide.is-active .c-home-slider__media {
transform: scale(1);
transition-duration: 8500ms;
transition-timing-function: cubic-bezier(0.18, 0.7, 0.22, 1);
}
.c-home-slider__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.c-home-slider__slide--light .c-home-slider__image {
--chassis-start: -28rem;
--chassis-start-y: 0rem;
--chassis-end: -1rem;
--chassis-end-y: 0rem;
position: absolute;
inset-block: 0;
inset-inline-start: 0;
width: 54%;
object-fit: contain;
object-position: left center;
transform: translate(var(--chassis-end), var(--chassis-end-y));
will-change: transform;
}
.c-home-slider__slide--light .c-home-slider__image--secondary {
inset-inline: auto 0;
width: 50%;
object-position: right center;
opacity: 1;
--chassis-start: 28rem;
--chassis-start-y: 10rem;
--chassis-end: -2.6rem;
--chassis-end-y: 10rem;
}
.c-home-slider__slide--light.is-active .c-home-slider__image {
animation: home-slider-chassis-in 1300ms cubic-bezier(0.4, 0, 0.2, 1) 300ms both;
}
@keyframes home-slider-chassis-in {
from { transform: translate(var(--chassis-start), var(--chassis-start-y)); }
to { transform: translate(var(--chassis-end), var(--chassis-end-y)); }
}
.c-home-slider__scrim {
background: linear-gradient(90deg, var(--overlay-20), var(--overlay-10) 50%, var(--overlay-20));
}
.c-home-slider__slide--light .c-home-slider__scrim {
background: radial-gradient(circle at center, transparent 0 22%, var(--accent-10) 100%);
}
.c-home-slider__content {
position: relative;
z-index: 1;
display: grid;
place-items: center;
height: 100%;
padding-block: var(--space-3xl) calc(var(--space-5xl) + var(--space-l));
}
.c-home-slider__copy {
width: 100%;
opacity: 0;
text-align: center;
transform: translateY(1.2rem) scale(0.992);
transition:
opacity 650ms ease,
transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.c-home-slider__slide.is-active .c-home-slider__copy {
opacity: 1;
transform: translateY(0) scale(1);
transition-delay: 260ms;
}
.c-home-slider__eyebrow {
margin: 0;
font-size: clamp(1.35rem, 1.55vw, 2.3rem);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--ls-xl);
line-height: var(--line-height-compressed);
text-transform: uppercase;
text-shadow: 0 1px 14px var(--overlay-60);
}
.c-home-slider__title {
max-width: 26ch;
color: inherit;
font-size: var(--heading-4xl);
font-weight: var(--font-weight-bold);
letter-spacing: var(--ls-l);
line-height: 1.04;
text-shadow: 0 2px 20px var(--overlay-70);
text-wrap: balance;
}
.c-home-slider__title span {
display: block;
}
.c-home-slider__slide--light .c-home-slider__eyebrow {
text-shadow: var(--on-bg-image-light-title-shadow);
}
.c-home-slider__slide--light .c-home-slider__title {
text-shadow:
0 0.4rem 1.4rem var(--overlay-50),
0 0 3rem var(--overlay-20);
}
.c-home-slider__cta {
color: var(--on-bg-image);
background: var(--accent-60);
transition: background-color 180ms ease;
}
.c-home-slider__cta:is(:hover, :focus-visible) {
color: var(--on-bg-image);
background: var(--accent-80);
}
.c-home-slider__arrow {
position: absolute;
z-index: 5;
display: grid;
place-items: center;
padding: 0;
border: 0;
color: var(--on-bg-image);
background: var(--overlay-20);
cursor: pointer;
transition: background-color 180ms ease;
}
.c-home-slider__arrow {
top: 50%;
width: 5.6rem;
height: 7.2rem;
transform: translateY(-50%);
}
.c-home-slider__arrow--prev { left: 0; }
.c-home-slider__arrow--next { right: 0; }
.c-home-slider__arrow:is(:hover, :focus-visible) {
background: var(--accent-80);
}
.c-home-slider__arrow:focus-visible {
outline: 2px solid var(--on-bg-image);
outline-offset: 3px;
}
.c-home-slider__arrow-icon {
width: 3.2rem;
height: 3.2rem;
stroke-width: 1.5;
}
.c-home-slider__pause {
display: none;
}
:root[data-contrast="high"] .c-home-slider__pause {
position: absolute;
z-index: 6;
inset-block-start: var(--space-m);
inset-inline-end: var(--space-m);
display: grid;
place-items: center;
width: 4.8rem;
height: 4.8rem;
padding: 0;
border: 2px solid var(--on-bg-image);
color: var(--on-bg-image);
background: var(--bg-dark);
cursor: pointer;
}
:root[data-contrast="high"] .c-home-slider__pause:focus-visible {
outline: 3px solid var(--accent-readable);
outline-offset: 3px;
}
.c-home-slider__pause-icon {
grid-area: 1 / 1;
display: grid;
place-items: center;
}
.c-home-slider__pause-icon .c-icon {
width: 2.4rem;
height: 2.4rem;
}
.c-home-slider__pause-icon--play,
.c-home-slider__pause.is-paused .c-home-slider__pause-icon--pause {
display: none;
}
.c-home-slider__pause.is-paused .c-home-slider__pause-icon--play {
display: grid;
}
.c-home-slider__tabs-wrap {
position: relative;
z-index: 6;
margin-block-start: calc(var(--space-xl) * -1);
}
.c-home-slider__tabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
box-shadow: 0 1.4rem 3.6rem var(--overlay-10);
}
.c-home-slider__tab {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
min-width: 0;
padding: var(--space-xl) var(--space-s) var(--space-l);
border: 0;
border-inline-end: 1px solid var(--ui-divider);
color: var(--fg);
background: var(--surface-page);
font-family: var(--font-primary);
text-align: left;
cursor: pointer;
transition: background-color 180ms ease;
}
.c-home-slider__tab:last-child {
border-inline-end: 0;
}
.c-home-slider__tab::before {
position: absolute;
inset: 0 0 auto;
height: var(--space-s);
background: var(--accent-30);
content: "";
transition: background-color 180ms ease;
}
.c-home-slider__tab:is(:hover, :focus-visible),
.c-home-slider__tab.is-active {
background: var(--surface-muted-light);
}
.c-home-slider__tab:is(:hover, :focus-visible)::before,
.c-home-slider__tab.is-active::before {
background: var(--accent-70);
}
.c-home-slider__tab:focus-visible {
z-index: 1;
outline: 2px solid var(--accent-readable);
outline-offset: -2px;
}
.c-home-slider__tab-title,
.c-home-slider__tab-text {
display: block;
}
.c-home-slider__tab-title {
min-height: 2.1em;
hyphens: none;
overflow-wrap: break-word;
word-break: normal;
}
.c-home-slider__tab-text {
margin-block-start: var(--space-xs);
font-size: var(--text-s);
line-height: var(--line-height-body);
hyphens: auto;
hyphenate-limit-chars: 6 3 3;
hyphenate-limit-lines: 2;
hyphenate-limit-last: always;
overflow-wrap: break-word;
word-break: normal;
}
@media (max-width: 1023px) {
.c-home-slider {
padding-block-end: var(--space-3xl);
}
.c-home-slider__stage {
height: clamp(48rem, 64vw, 60rem);
}
.c-home-slider__tabs-wrap {
max-width: none;
padding-inline-end: 0;
}
.c-home-slider__tabs {
grid-auto-flow: column;
grid-auto-columns: minmax(28rem, 42vw);
grid-template-columns: none;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: inline mandatory;
scrollbar-width: thin;
box-shadow: none;
}
.c-home-slider__tab {
scroll-snap-align: start;
box-shadow: inset -1px 0 var(--ui-divider);
}
}
@media (max-width: 767px) {
.c-home-slider__stage {
height: clamp(50rem, 74svh, 62rem);
}
.c-home-slider__content {
padding-block: var(--space-4xl) var(--space-5xl);
}
.c-home-slider__title {
max-width: 100%;
font-size: var(--heading-2xl);
letter-spacing: var(--ls-m);
}
.c-home-slider__eyebrow {
max-width: 26ch;
font-size: var(--text-s);
}
.c-home-slider__cta {
max-width: calc(100vw - (var(--container-gutter-mobile) * 2));
}
.c-home-slider__arrow {
top: auto;
bottom: var(--space-l);
width: 4.8rem;
height: 5.2rem;
transform: none;
}
:root[data-contrast="high"] .c-home-slider__pause {
inset-block-start: var(--space-s);
inset-inline-end: var(--space-s);
}
.c-home-slider__slide--light .c-home-slider__image {
--chassis-start: -14rem;
--chassis-start-y: 0rem;
--chassis-end: 0rem;
--chassis-end-y: 0rem;
width: 75%;
object-position: left bottom;
}
.c-home-slider__slide--light .c-home-slider__image--secondary {
width: 68%;
object-position: right top;
--chassis-start: 14rem;
--chassis-start-y: 0rem;
--chassis-end: -13.5rem;
--chassis-end-y: 0rem;
}
.c-home-slider__tabs {
grid-auto-columns: minmax(27rem, 82vw);
}
.c-home-slider__tab-title {
font-size: var(--heading-l);
}
}
@media (prefers-reduced-motion: reduce) {
.c-home-slider__slide,
.c-home-slider__media,
.c-home-slider__copy,
.c-home-slider__slide--light .c-home-slider__image,
.c-home-slider__cta,
.c-home-slider__arrow,
.c-home-slider__tab,
.c-home-slider__tab::before {
transition: none;
}
.c-home-slider__media,
.c-home-slider__copy {
opacity: 1;
transform: none;
}
.c-home-slider__slide--light.is-active .c-home-slider__image {
animation: none;
transform: translateX(var(--chassis-end));
}
}
:root[data-contrast="high"] .c-home-slider__scrim {
background: var(--overlay-70);
}
:root[data-contrast="high"] .c-home-slider__slide--light .c-home-slider__scrim {
background: color-mix(in srgb, var(--surface-page) 82%, transparent);
}
/* Hintergrund erst nach load, Bricks setzt ihn per ID-Regel (siehe home-slider.js). */
.c-section--image.is-bg-deferred {
background-color: var(--bg-dark);
background-image: none !important;
}
/* _home-intro.css */
/* ==========================================================================
STARTSEITE: VIDEO-INTRO
Framework-Aufbau: c-section > l-container--full > c-content.l-split.
Beide Split-Flächen laufen bis an den Viewportrand. Der Inhalt der rechten
Spalte endet weiterhin an der inneren Kante des Xwide-Containers.
========================================================================== */
.c-home-intro__split {
width: 100%;
max-width: 100%;
min-height: clamp(46rem, 30.75vw, 54rem);
margin-inline: 0;
}
.c-home-intro__media {
position: relative;
width: 100%;
max-width: none;
min-height: 100%;
padding: 0;
margin-block: 0;
margin-inline: 0;
}
.c-home-intro__media .bricks-background-video-wrapper {
position: absolute;
inset: 0;
width: 100%;
overflow: hidden;
background: var(--surface-raised-soft);
}
.c-home-intro__media .bricks-background-video-wrapper video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.c-home-intro__copy {
position: relative;
justify-content: center;
min-height: 100%;
gap: var(--gap-s);
padding-block: var(--space-xl);
/* Der Abstand zum Video entsteht innerhalb der grauen Fläche. */
padding-inline: var(--gap-l) max(7.5vw, calc((100vw - var(--container-width-xwide)) / 2));
background: var(--surface-muted-light);
}
/* Die globale Seiten-H2-Regel liest --heading-3xl. Das lokale Umbinden hält
den komponenteneigenen Titel auf der passenden Stufe, ohne ID-Selektor. */
.c-home-intro__title {
--heading-3xl: var(--heading-l);
font-weight: var(--font-weight-light);
text-wrap: wrap;
text-transform: uppercase;
}
@media (max-width: 767px) {
.c-home-intro__split {
min-height: 0;
}
.c-home-intro__media {
min-height: clamp(26rem, 62vw, 38rem);
}
.c-home-intro__copy {
padding-block: var(--space-xl);
padding-inline: var(--container-gutter-mobile);
}
}
/* _home-competence.css */
/* ==========================================================================
STARTSEITE: KOMPETENZ-TEASER
Vier Karten unter "In der Oberflaechenbeschichtung" (Bild, Titel,
Flietext mit inline Links). Bislang war nur das jeweils erste verlinkte
Wort im Flietext klickbar, Bild und Titel nicht. Die Karte verlinkt jetzt
komplett (inkl. Bild) auf das Ziel dieses ersten Textlinks.
========================================================================== */
.c-home-competence-card {
position: relative;
}
.c-home-competence-card .c-content__body a:first-of-type::before {
position: absolute;
z-index: 1;
inset: 0;
content: "";
}
/* Im Hochkontrastmodus ersetzt klarer, WCAG-tauglicher Linktext den
flächigen Akzent-Unterstrich. Eine feine Linklinie erscheint erst bei
Interaktion; reine Hervorhebungen regelt die globale Kontrast-Ebene. */
:root[data-contrast="high"] .c-home-competence-card .c-content__body a:not(.btn) {
color: var(--accent);
text-decoration-line: none;
box-shadow: none;
}
:root[data-contrast="high"] .c-home-competence-card .c-content__body a:not(.btn):hover,
:root[data-contrast="high"] .c-home-competence-card .c-content__body a:not(.btn):focus-visible {
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.24em;
}
/* _procedures.css */
/* ==========================================================================
PROCEDURES
Wiederverwendbare Komponenten der Verfahrensuebersicht.
Der normale Section-Abstand kommt aus dem Bricks-Globalstyle.
========================================================================== */
.c-hero--procedures {
--hero-img: url("/wp-content/uploads/holder-slider_universal_04-min.jpg");
}
/* Der Split selbst läuft über die volle Viewportbreite. Regulär teilen sich
Text und Fahrwerksgrafik den Raum 1/2 zu 1/2; erst auf sehr großen
Bildschirmen wird die Grafik auf 1/3 reduziert. */
.c-procedures-intro__split {
width: 100%;
max-width: 100%;
}
.c-procedures-intro__copy {
justify-content: center;
padding-inline: max(7.5vw, calc((100vw - var(--container-width)) / 2)) var(--gap-xl);
}
.c-procedures-intro__media {
display: flex;
min-width: 0;
align-items: center;
padding: 0;
}
.c-procedures-intro__media .c-hotspot {
width: 100%;
}
@media (min-width: 1920px) {
.c-procedures-intro__split {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.c-procedures-intro__copy {
grid-column: span 2;
}
.c-procedures-intro__media {
grid-column: span 1;
}
}
/* Zwei zur Mitte weiß auslaufende Karosserieansichten rahmen den Text.
Eigene Grid-Anordnung; der bisherige Intro-Split auf anderen Seiten bleibt. */
.c-procedures-intro .c-content:has(> .c-procedures-showcase) {
/* Der Flex-Container darf den Inhalt nicht auf die intrinsischen
Bildbreiten plus Textspalte begrenzen. */
width: 100%;
}
.c-procedures-showcase {
grid-template-columns: minmax(0, 1fr) minmax(0, 56rem) minmax(0, 1fr);
grid-template-areas: "left copy right";
align-items: center;
width: 100%;
max-width: 100%;
}
.c-procedures-showcase__copy {
grid-area: copy;
min-width: 0;
padding-inline: var(--gap-m);
}
.c-procedures-showcase__media {
position: relative;
min-width: 0;
width: 100%;
padding: 0;
}
.c-procedures-showcase__media--left { grid-area: left; }
.c-procedures-showcase__media--right { grid-area: right; }
/* Ein geöffneter Hinweis liegt auch über dem benachbarten Grid-Element. */
.c-procedures-showcase__media:has(.is-open) {
z-index: var(--z-raised);
}
.c-procedures-showcase .c-hotspot__marker.is-open {
z-index: calc(var(--z-raised) + 1);
}
.c-procedures-showcase__note {
align-self: flex-start;
width: fit-content;
max-width: 100%;
padding: var(--space-xs) var(--space-s);
background: var(--bg-muted);
color: var(--fg-70);
font-size: var(--text-xs);
line-height: var(--line-height-base);
}
@media (max-width: 991px) {
.c-procedures-showcase {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "copy copy" "left right";
row-gap: var(--gap-m);
}
.c-procedures-showcase__copy {
justify-self: center;
width: 85%;
max-width: var(--text-width-m);
padding-inline: 0;
}
}
@media (max-width: 478px) {
.c-procedures-showcase {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "copy" "left" "right";
row-gap: var(--gap-s);
}
.c-procedures-showcase__copy {
width: 100%;
padding-inline: var(--container-gutter-mobile);
}
}
.c-procedure-group__copy {
max-width: var(--text-width-s);
}
.c-procedure-group__cards {
align-self: start;
}
.c-procedure-card {
position: relative;
min-width: 0;
}
.c-procedure-card__image,
.c-procedure-card__image.brxe-image {
width: 100%;
height: 100%;
}
.c-procedure-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: scale 450ms ease;
}
.c-procedure-card:hover .c-procedure-card__image img,
.c-procedure-card:focus-within .c-procedure-card__image img {
scale: 1.035;
}
.c-procedure-card__link {
display: block;
align-self: flex-start;
width: fit-content;
max-width: 100%;
color: var(--accent);
font-size: var(--heading-s);
font-weight: var(--font-weight-light);
letter-spacing: var(--ls-m);
line-height: var(--line-height-heading);
text-transform: uppercase;
}
.c-procedure-card__link::before {
/* z-index 3: muss ueber c-blur-image__full (z-index 2) liegen, sonst faengt
das geladene Bild Klicks ab statt sie an den Kartenlink durchzureichen. */
position: absolute;
z-index: 3;
inset: 0;
content: "";
}
.c-procedure-card__link::after {
display: inline-block;
margin-inline-start: 0;
/* Das geschützte Leerzeichen bindet den Pfeil an das letzte Titelwort. */
content: "\00a0\2192";
transform: translate3d(0, 0, 0);
white-space: nowrap;
will-change: transform;
transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.c-procedure-card__link:hover::after,
.c-procedure-card__link:focus-visible::after {
transform: translate3d(0.25em, 0, 0);
}
/* Bei erklärenden Karten bleibt der Pfeil Teil der letzten Textzeile. Das
geschützte Leerzeichen im Linktext verhindert einen verwaisten Pfeil. */
.c-procedure-card__link--textflow {
display: block;
width: fit-content;
max-width: 100%;
}
.c-procedure-card__link--textflow::after {
display: none;
}
.c-procedure-card__last-word {
display: inline-block;
white-space: nowrap;
}
.c-procedure-card__inline-arrow {
display: inline-block;
transform: translate3d(0, 0, 0);
will-change: transform;
transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.c-procedure-card__link--textflow:hover .c-procedure-card__inline-arrow,
.c-procedure-card__link--textflow:focus-visible .c-procedure-card__inline-arrow {
transform: translate3d(0.25em, 0, 0);
}
.c-standards-band {
--fg: var(--palette-white);
padding-block: 3px;
color: var(--fg);
background: var(--bg-accent);
}
.c-standards-band__inner {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
align-items: stretch;
gap: 0;
width: 85%;
max-width: var(--container-width);
margin-inline: auto;
padding-inline: 0;
}
.c-standards-band__title {
display: flex;
align-items: center;
min-height: 4rem;
padding-inline: 0 var(--gap-s);
color: var(--fg);
font-size: var(--text-s);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--ls-m);
line-height: var(--line-height-heading);
text-transform: uppercase;
}
.c-standards-band__inner > .brxe-shortcode {
min-width: 0;
width: 100%;
}
.c-standards-ticker {
--standards-ticker-duration: 48s;
width: 100%;
height: 100%;
overflow: hidden;
color: var(--palette-blue);
background: var(--palette-white);
}
.c-standards-ticker__track {
display: flex;
width: max-content;
min-width: 100%;
height: 100%;
will-change: transform;
animation: standards-ticker-scroll var(--standards-ticker-duration) linear infinite;
}
.c-standards-ticker__group {
display: flex;
flex: none;
align-items: stretch;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.c-standards-ticker__item {
display: flex;
align-items: center;
flex: none;
min-height: 4rem;
padding-inline: var(--gap-s);
font-size: var(--text-s);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
white-space: nowrap;
letter-spacing: var(--ls-m);
}
@keyframes standards-ticker-scroll {
to {
transform: translate3d(-50%, 0, 0);
}
}
@media (max-width: 1023px) {
.c-standards-band__inner {
grid-template-columns: 1fr;
}
.c-standards-band__title {
justify-content: center;
text-align: center;
}
}
@media (max-width: 767px) {
.c-procedures-intro__copy {
padding-inline: var(--container-gutter-mobile);
padding-block-end: var(--space-l);
}
.c-standards-ticker__item {
min-height: 4rem;
padding-inline: var(--gap-s);
}
}
@media (prefers-reduced-motion: reduce) {
.c-procedure-card__image img {
transition: none;
}
.c-standards-ticker {
overflow-x: auto;
}
.c-standards-ticker__track {
animation: none;
}
.c-standards-ticker__group[aria-hidden="true"] {
display: none;
}
}
/* _procedure-detail.css */
/* Verfahrensdetail: gemeinsames Muster für die neun Oberflächenverfahren. */
.c-procedure-detail__header {
max-width: var(--container-width-medium);
}
.c-procedure-detail__header .c-content__title--3xl {
--content-title-size: var(--heading-2xl);
}
/* Ruhiger Absatzrhythmus innerhalb der gesamten Verfahrensseite. */
.c-procedure-detail .c-content__body {
--procedure-paragraph-gap: var(--gap-2xs);
}
.c-procedure-detail .c-content__body p + p {
margin-block-start: var(--procedure-paragraph-gap);
}
/* Bei Bricks-Textblöcken erzeugt l-stack den Abstand statt der p-Marge. */
.c-procedure-detail .c-content__body.l-stack {
--stack-gap: var(--procedure-paragraph-gap);
}
.c-procedure-detail .c-content__body.l-stack > p + p {
margin-block-start: 0;
}
.c-procedure-detail__layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.c-procedure-detail__layout--cta:has(.c-procedure-cta) {
grid-template-columns: minmax(0, 1fr) minmax(26rem, 32rem);
gap: var(--gap-xl);
}
.c-procedure-detail__cta-slot:has(.c-procedure-cta) {
position: sticky;
top: calc(var(--header-height) + var(--space-m));
min-width: 0;
}
.c-procedure-detail__layout.has-contact-sidebar {
grid-template-columns: minmax(0, 1fr) minmax(26rem, 32rem);
gap: var(--gap-xl);
transition:
grid-template-columns 300ms cubic-bezier(0.22, 1, 0.36, 1),
gap 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.c-procedure-detail__layout.has-contact-sidebar.is-contact-sidebar-collapsed {
grid-template-columns: minmax(0, 1fr) minmax(var(--space-4xl), var(--space-4xl));
gap: var(--gap-m);
}
.c-procedure-detail__main {
min-width: 0;
contain: layout paint;
}
.c-procedure-carousel {
position: relative;
width: min(100%, var(--container-width-medium));
margin-inline-start: 0;
margin-inline-end: auto;
}
.c-procedure-carousel__viewport {
overflow: hidden;
}
.c-procedure-carousel__track {
display: flex;
transition: transform 320ms ease;
will-change: transform;
}
.c-procedure-carousel__slide {
flex: 0 0 100%;
margin: 0;
}
.c-procedure-carousel__slide img {
display: block;
width: 100%;
aspect-ratio: 1170 / 540;
object-fit: cover;
}
.c-procedure-carousel__control {
position: absolute;
top: 50%;
display: grid;
place-items: center;
width: var(--space-xl);
aspect-ratio: 1;
padding: 0;
border: 0;
background: var(--bg-accent);
color: var(--on-bg-accent);
font-size: var(--text-2xl);
line-height: 1;
transform: translateY(-50%);
cursor: pointer;
}
.c-procedure-carousel__control--prev { left: 0; }
.c-procedure-carousel__control--next { right: 0; }
.c-procedure-carousel__dots {
display: flex;
justify-content: center;
gap: var(--gap-xs);
padding-top: var(--space-s);
}
.c-procedure-carousel__dots button {
width: var(--space-xs);
aspect-ratio: 1;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--divider-on-light);
cursor: pointer;
}
.c-procedure-carousel__dots button.is-active {
background: var(--bg-accent);
}
.c-product-tabs--procedures .c-product-tabs__nav {
display: flex;
flex-wrap: wrap;
gap: var(--gap-xs);
}
.c-product-tabs--procedures .c-product-tabs__tab {
padding: var(--space-5xs) var(--space-s);
border: 0;
border-radius: var(--radius-s);
background: var(--accent-40);
color: var(--on-bg-accent);
font: inherit;
font-size: var(--text-m);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-compressed);
text-transform: uppercase;
cursor: pointer;
}
.c-product-tabs--procedures .c-product-tabs__tab.is-active,
.c-product-tabs--procedures .c-product-tabs__tab.brx-open {
background: var(--bg-accent);
}
.c-product-tabs--procedures .c-product-tabs__panel {
min-height: var(--space-5xl);
margin-top: var(--space-s);
padding: var(--space-l);
padding-bottom: var(--space-2xl);
border-radius: var(--radius-s);
background: var(--bg-muted);
}
.c-product-tabs--procedures .c-product-tabs__panel > :first-child {
margin-top: 0;
}
.c-product-tabs--procedures .c-product-tabs__panel > :last-child {
margin-bottom: 0;
}
.c-procedure-data-group > p {
margin: 0;
}
.c-procedure-data-group + .c-procedure-data-group {
margin-top: var(--gap-m);
}
.c-procedure-anchor-nav {
overflow-x: auto;
padding-block: var(--space-xs);
border-block: 1px solid var(--divider-on-light);
scrollbar-width: thin;
}
.c-procedure-anchor-nav__list {
display: flex;
flex-wrap: wrap;
gap: var(--gap-2xs) var(--gap-m);
width: max-content;
min-width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.c-procedure-anchor-nav a {
color: var(--accent-readable);
font-size: var(--text-s);
font-weight: var(--font-weight-semibold);
text-decoration: none;
}
.c-procedure-anchor-nav a:hover,
.c-procedure-anchor-nav a:focus-visible {
text-decoration: underline;
text-underline-offset: var(--space-4xs);
}
.c-procedure-seo-section {
scroll-margin-top: calc(var(--header-height) + var(--space-l));
}
.c-procedure-fact {
min-width: 0;
padding: var(--space-m);
border-inline-start: var(--space-4xs) solid var(--accent);
background: var(--bg-muted);
}
.c-procedure-seo-section > .l-grid:has(> .c-procedure-fact) {
align-items: stretch;
grid-auto-rows: 1fr;
}
.c-procedure-fact__value,
.c-procedure-fact__label,
.c-procedure-fact__description {
margin: 0;
}
.c-procedure-fact__value {
color: var(--accent-readable);
font-size: calc(var(--heading-s) * 0.5 + var(--heading-m) * 0.5);
font-weight: var(--font-weight-light);
line-height: var(--line-height-heading);
}
.c-procedure-fact__label {
font-size: calc(var(--text-xs) * 0.5 + var(--heading-xs) * 0.5);
font-weight: var(--font-weight-medium);
}
.c-procedure-fact__description {
color: var(--fg-70);
font-size: calc(var(--text-xs) * 0.5 + var(--text-s) * 0.5);
}
.c-procedure-standards {
display: flex;
flex-wrap: wrap;
gap: var(--gap-xs);
margin: 0;
padding: 0 0 var(--space-xs);
list-style: none;
}
.c-procedure-standards li {
position: relative;
isolation: isolate;
padding: var(--space-5xs) var(--space-xs);
border: 1px solid var(--divider-on-light);
background: transparent;
color: var(--fg);
font-size: var(--text-s);
font-weight: var(--font-weight-semibold);
}
.c-procedure-standards li::before {
position: absolute;
z-index: -1;
inset: 0;
background: var(--surface-page);
content: "";
}
.c-procedure-standards li::after {
position: absolute;
z-index: -2;
right: 9%;
bottom: calc(var(--space-5xs) * -1);
left: 9%;
height: var(--space-xs);
border-radius: 50%;
background: color-mix(in srgb, var(--accent) 28%, transparent);
content: "";
filter: blur(var(--space-3xs));
pointer-events: none;
}
:root[data-contrast="high"] .c-procedure-standards li::after {
content: none;
}
.c-procedure-standards__link {
color: inherit;
text-decoration-color: var(--accent);
text-underline-offset: 0.18em;
}
.c-procedure-standards__link:hover,
.c-procedure-standards__link:focus-visible {
color: var(--accent-readable);
}
.c-procedure-benefits ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gap-xs) var(--gap-l);
margin: 0;
padding: 0;
list-style: none;
}
.c-procedure-benefits li {
display: flex;
align-items: flex-start;
gap: var(--gap-xs);
font-size: var(--text-m);
font-weight: var(--font-weight-medium);
}
.c-procedure-benefits li::before {
width: var(--text-m);
height: var(--text-m);
flex: 0 0 auto;
background-color: var(--accent);
content: "";
-webkit-mask: url("../assets/icons/tag.svg") center / contain no-repeat;
mask: url("../assets/icons/tag.svg") center / contain no-repeat;
transform: translateY(var(--space-3xs)) scaleX(-1);
}
.c-procedure-cta {
position: relative;
isolation: isolate;
align-items: flex-start;
padding: var(--space-l);
border-inline-start: 2px solid var(--accent-40);
background: transparent;
padding-top: 0;
}
.c-procedure-cta::before {
position: absolute;
z-index: -1;
inset: 0;
background: var(--surface-page);
content: "";
}
.c-procedure-cta::after {
position: absolute;
z-index: -2;
right: 10%;
bottom: calc(var(--space-l) * -1);
left: 10%;
height: var(--space-2xl);
border-radius: 50%;
background: color-mix(in srgb, var(--accent) 32%, transparent);
content: "";
filter: blur(var(--space-l));
pointer-events: none;
}
:root[data-contrast="high"] .c-procedure-cta::after {
content: none;
}
.c-procedure-cta > :where(h2, h3, p) {
margin: 0;
}
.c-product-tabs--procedures .c-product-tabs__panel ul {
display: flex;
flex-direction: column;
gap: var(--gap-2xs);
margin: 0;
padding: 0;
list-style: none;
}
.c-product-tabs--procedures .c-product-tabs__panel--benefits li,
.c-product-tabs--procedures .c-product-tabs__panel--technical li {
display: flex;
align-items: flex-start;
gap: var(--gap-xs);
}
.c-product-tabs--procedures[data-holder-procedure-tabs] .c-product-tabs__panel--technical li::before {
width: var(--text-m);
height: var(--text-m);
flex: 0 0 auto;
background-color: var(--accent);
content: "";
-webkit-mask: url("../assets/icons/tag.svg") center / contain no-repeat;
mask: url("../assets/icons/tag.svg") center / contain no-repeat;
transform: translateY(calc(var(--space-3xs) * 0.5)) scaleX(-1);
}
.c-product-tabs--procedures .c-product-tabs__list-icon {
--icon-size: var(--text-m);
color: var(--accent);
transform: translateY(var(--space-3xs));
}
.c-product-tabs--procedures .c-product-tabs__list-icon.c-icon--flip-x {
transform: translateY(var(--space-3xs)) scaleX(-1);
}
.c-contact-sidebar {
--sidebar-ease: 300ms cubic-bezier(0.22, 1, 0.36, 1);
min-width: 0;
overflow: hidden;
contain: layout paint;
padding: var(--space-l);
border-radius: var(--radius-s);
background: var(--bg-dark);
color: var(--on-bg-dark);
}
.c-contact-sidebar--sticky {
position: sticky;
top: calc(var(--header-height) + var(--space-m));
}
.c-contact-sidebar__header {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--gap-s);
}
.c-contact-sidebar__title {
flex: 1 1 auto;
min-width: 0;
max-width: 26rem;
overflow: hidden;
margin: 0;
color: inherit;
font-size: var(--heading-xs);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-compressed);
opacity: 1;
transform: translateX(0);
transition:
max-width var(--sidebar-ease),
opacity var(--sidebar-ease),
transform var(--sidebar-ease);
}
.c-contact-sidebar__toggle {
display: grid;
flex: 0 0 auto;
place-items: center;
width: var(--space-2xl);
aspect-ratio: 1;
margin: calc(-1 * var(--space-xs)) calc(-1 * var(--space-xs)) 0 0;
padding: 0;
border: 0;
border-radius: var(--radius-s);
background: transparent;
color: var(--on-bg-dark);
cursor: pointer;
transition: background-color 180ms ease;
}
.c-contact-sidebar__toggle:hover,
.c-contact-sidebar__toggle:focus-visible {
background: var(--overlay-20);
}
.c-contact-sidebar__toggle:focus-visible,
.c-contact-sidebar__mobile-trigger:focus-visible {
outline: 2px solid currentcolor;
outline-offset: var(--space-5xs);
}
.c-contact-sidebar__icon {
grid-area: 1 / 1;
transition:
opacity var(--sidebar-ease),
transform var(--sidebar-ease);
}
.c-contact-sidebar__icon .c-icon,
.c-contact-sidebar__trigger-icon,
.c-contact-sidebar__details .c-icon {
--icon-size: var(--text-l);
}
.c-contact-sidebar__icon--open,
.c-contact-sidebar.is-collapsed .c-contact-sidebar__icon--close {
opacity: 0;
transform: scale(0.75);
}
.c-contact-sidebar.is-collapsed .c-contact-sidebar__icon--open {
opacity: 1;
transform: scale(1);
}
.c-contact-sidebar__content {
display: grid;
grid-template-rows: 1fr;
margin-top: var(--space-xl);
opacity: 1;
transition:
grid-template-rows var(--sidebar-ease),
margin-top var(--sidebar-ease),
opacity var(--sidebar-ease);
}
.c-contact-sidebar__content > .c-contact-sidebar__list {
overflow: hidden;
min-height: 0;
}
.c-contact-sidebar__list {
display: flex;
flex-direction: column;
gap: var(--gap-l);
margin: 0;
padding: 0;
list-style: none;
}
.c-contact-sidebar__person {
display: flex;
flex-direction: column;
gap: var(--gap-m);
}
.c-contact-sidebar__person + .c-contact-sidebar__person {
padding-top: var(--space-l);
border-top: 1px solid var(--overlay-30);
}
.c-contact-sidebar__identity {
display: flex;
flex-direction: column;
gap: var(--gap-4xs);
}
.c-contact-sidebar__name,
.c-contact-sidebar__role {
margin: 0;
}
.c-contact-sidebar__name {
color: inherit;
font-size: var(--text-l);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-compressed);
}
.c-contact-sidebar__role {
color: var(--palette-soft-blue);
font-size: var(--text-s);
line-height: var(--line-height-base);
}
.c-contact-sidebar__details {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-xs);
font-style: normal;
}
.c-contact-sidebar__details a {
display: inline-flex;
align-items: center;
gap: var(--gap-xs);
color: inherit;
font-size: var(--text-s);
text-decoration: none;
}
.c-contact-sidebar__details a:hover,
.c-contact-sidebar__details a:focus-visible {
color: var(--palette-soft-blue);
}
.c-contact-sidebar__action {
align-self: flex-start;
}
.c-contact-sidebar.is-collapsed {
padding-inline: var(--space-xs);
}
.c-contact-sidebar.is-collapsed .c-contact-sidebar__header {
justify-content: center;
gap: 0;
}
.c-contact-sidebar.is-collapsed .c-contact-sidebar__title {
max-width: 0;
opacity: 0;
transform: translateX(var(--space-xs));
pointer-events: none;
}
.c-contact-sidebar.is-collapsed .c-contact-sidebar__content {
grid-template-rows: 0fr;
margin-top: 0;
opacity: 0;
pointer-events: none;
}
.c-contact-sidebar.is-collapsed .c-contact-sidebar__toggle {
margin-inline: 0;
}
.c-contact-sidebar__mobile-trigger,
.c-contact-sidebar__backdrop {
display: none;
}
.c-page-swipe-nav {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gap-m);
padding-block-start: var(--space-m);
border-block-start: 1px solid var(--divider-on-light);
}
.c-page-swipe-nav__link {
display: flex;
flex-direction: column;
gap: var(--gap-4xs);
color: var(--fg);
text-decoration: none;
}
.c-page-swipe-nav__link--next {
grid-column: 2;
text-align: end;
}
.c-page-swipe-nav__direction {
color: var(--accent-readable);
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--ls-m);
text-transform: uppercase;
}
.c-page-swipe-nav__title {
font-size: var(--text-l);
font-weight: var(--font-weight-semibold);
}
.c-page-swipe-nav__link:hover .c-page-swipe-nav__title,
.c-page-swipe-nav__link:focus-visible .c-page-swipe-nav__title {
color: var(--accent-readable);
}
@media (max-width: 767px) {
.c-procedure-anchor-nav__list {
flex-wrap: nowrap;
padding-inline-end: var(--space-m);
}
.c-procedure-benefits ul {
grid-template-columns: 1fr;
}
.c-product-tabs--procedures .c-product-tabs__nav {
display: grid;
grid-template-columns: 1fr;
}
.c-product-tabs--procedures .c-product-tabs__tab {
width: 100%;
text-align: left;
}
}
@media (max-width: 1023px) {
.c-procedure-detail__layout--cta:has(.c-procedure-cta),
.c-procedure-detail__layout.has-contact-sidebar,
.c-procedure-detail__layout.has-contact-sidebar.is-contact-sidebar-collapsed {
grid-template-columns: minmax(0, 1fr);
}
.c-procedure-detail__cta-slot:has(.c-procedure-cta) {
position: static;
}
.c-contact-sidebar {
position: fixed;
z-index: var(--z-modal);
top: 0;
right: 0;
width: min(90vw, 40rem);
height: 100dvh;
overflow-y: auto;
border-radius: 0;
transform: translateX(100%);
transition: transform 280ms ease;
}
.is-contact-sidebar-open .c-contact-sidebar {
transform: translateX(0);
}
.c-contact-sidebar__mobile-trigger {
position: fixed;
z-index: var(--z-fixed);
right: var(--space-m);
bottom: var(--space-m);
display: inline-flex;
align-items: center;
gap: var(--gap-xs);
padding: var(--space-xs) var(--space-m);
border: 0;
border-radius: var(--radius-s);
background: var(--bg-dark);
color: var(--on-bg-dark);
font-size: var(--text-s);
font-weight: var(--font-weight-semibold);
box-shadow: 0 var(--space-4xs) var(--space-l) var(--overlay-30);
cursor: pointer;
}
.c-contact-sidebar__backdrop {
position: fixed;
z-index: calc(var(--z-modal) - 1);
inset: 0;
display: block;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: var(--overlay-50);
}
.c-contact-sidebar__backdrop[hidden] {
display: none;
}
.c-contact-sidebar .c-contact-sidebar__title,
.c-contact-sidebar .c-contact-sidebar__content {
opacity: 1;
transform: none;
}
.c-contact-sidebar .c-contact-sidebar__content {
grid-template-rows: 1fr;
margin-top: var(--space-xl);
}
html.has-contact-sidebar-open {
overflow: hidden;
}
}
@media (max-width: 478px) {
.c-page-swipe-nav {
grid-template-columns: 1fr;
}
.c-page-swipe-nav__link--next {
grid-column: 1;
text-align: start;
}
}
@media (prefers-reduced-motion: reduce) {
.c-procedure-carousel__track,
.c-procedure-detail__layout.has-contact-sidebar,
.c-contact-sidebar,
.c-contact-sidebar__title,
.c-contact-sidebar__content,
.c-contact-sidebar__icon {
transition: none;
}
}
/* _related-nav.css */
/* ==========================================================================
VERWANDTE INHALTE — kompakter Navigator unter dem Hero
========================================================================== */
.c-related-nav-section {
z-index: 5;
overflow: visible;
padding-block: var(--space-m);
background: var(--bg-light);
}
.c-related-nav {
min-width: 0;
}
.c-related-nav__panel {
min-width: 0;
padding: var(--space-xs) var(--space-m);
border-radius: var(--radius-l);
background: var(--palette-muted-gray);
}
.c-related-nav__header {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: var(--gap-m);
}
.c-related-nav__context {
display: flex;
align-items: center;
margin: 0;
color: var(--fg);
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--ls-l);
line-height: var(--line-height-compressed);
text-transform: uppercase;
}
.c-related-nav__groups {
display: none;
position: absolute;
right: 0;
}
.c-related-nav__groups summary {
display: inline-flex;
align-items: center;
gap: var(--gap-2xs);
color: var(--fg-70);
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--ls-m);
line-height: var(--line-height-compressed);
list-style: none;
text-transform: uppercase;
cursor: pointer;
}
.c-related-nav__groups summary::-webkit-details-marker {
display: none;
}
.c-related-nav__groups summary::after {
content: "";
inline-size: 0.65em;
block-size: 0.65em;
border-inline-end: 1px solid currentcolor;
border-block-end: 1px solid currentcolor;
transform: translateY(-0.15em) rotate(45deg);
transition: transform 180ms ease;
}
.c-related-nav__groups[open] summary::after {
transform: translateY(0.15em) rotate(225deg);
}
.c-related-nav__groups summary:hover,
.c-related-nav__groups summary:focus-visible {
color: var(--accent-readable);
}
.c-related-nav__group-list {
position: absolute;
z-index: 8;
top: calc(100% + var(--space-xs));
right: 0;
width: max-content;
min-width: 24rem;
margin: 0;
padding: var(--space-xs);
border: 1px solid var(--divider-on-light);
border-radius: var(--radius-s);
background: var(--surface-page);
box-shadow: 0 var(--space-xs) var(--space-xl) color-mix(in srgb, var(--fg) 12%, transparent);
list-style: none;
}
.c-related-nav__group-list a {
display: block;
padding: var(--space-xs) var(--space-s);
color: var(--fg);
font-size: var(--text-s);
font-weight: var(--font-weight-semibold);
text-decoration: none;
}
.c-related-nav__group-list a:hover,
.c-related-nav__group-list a:focus-visible,
.c-related-nav__group-list a[aria-current="true"] {
background: var(--accent-10);
color: var(--accent-readable);
}
.c-related-nav__rail {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--gap-xs);
min-width: 0;
}
.c-related-nav__viewport {
min-width: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-behavior: smooth;
scrollbar-width: none;
}
.c-related-nav__viewport::-webkit-scrollbar {
display: none;
}
.c-related-nav__list {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-5xs);
width: max-content;
min-width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.c-related-nav__link {
display: block;
padding: var(--space-4xs) var(--space-xs);
border-radius: var(--radius-none);
background: var(--palette-white);
color: var(--fg-80);
font-size: var(--text-s);
font-weight: var(--font-weight-regular);
letter-spacing: var(--ls-s);
line-height: var(--line-height-compressed);
text-decoration: none;
white-space: nowrap;
transition: color 180ms ease, background-color 180ms ease;
}
.c-related-nav__link:hover,
.c-related-nav__link:focus-visible {
background: var(--palette-white);
color: var(--accent-readable);
}
.c-related-nav__link[aria-current="page"] {
background: var(--accent-readable);
color: var(--palette-white);
}
.c-related-nav__control {
display: grid;
place-items: center;
inline-size: var(--space-2xl);
block-size: var(--space-2xl);
padding: 0;
border: 0;
border-radius: var(--radius-full);
background: var(--palette-medium-blue);
color: var(--palette-white);
cursor: pointer;
text-decoration: none;
transition: color 180ms ease, background-color 180ms ease, opacity 180ms ease;
}
.c-related-nav__control:hover,
.c-related-nav__control:focus-visible {
background: var(--accent-readable);
color: var(--palette-white);
}
.c-related-nav__control .c-icon {
--icon-size: var(--text-xl);
stroke-width: 3;
}
.c-related-nav__control--prev .c-icon {
transform: rotate(180deg);
}
@media (max-width: 767px) {
.c-related-nav-section {
padding-block: var(--space-s);
}
.c-related-nav__header {
align-items: flex-start;
justify-content: flex-start;
}
.c-related-nav__groups {
position: relative;
margin-inline-start: auto;
}
.c-related-nav__group-list {
min-width: min(28rem, calc(100vw - (2 * var(--container-gutter))));
}
.c-related-nav__rail {
gap: var(--gap-2xs);
}
.c-related-nav__control {
inline-size: var(--space-xl);
block-size: var(--space-xl);
}
}
@media (prefers-reduced-motion: reduce) {
.c-related-nav__viewport {
scroll-behavior: auto;
}
.c-related-nav__groups summary::after,
.c-related-nav__link,
.c-related-nav__control {
transition: none;
}
}
/* _emobility.css */
/* ==========================================================================
E-MOBILITÄT
Nur die seitenspezifische Präsentation. Abschnitt, Breite, Aufteilung,
Abstände und Textstruktur kommen aus c-section, l-* und c-content.
========================================================================== */
.c-emobility {
overflow: hidden;
}
.c-emobility__intro-title {
max-width: 7ch;
}
.c-emobility__media {
margin: 0;
}
.c-emobility__media img,
.c-emobility-material__image {
display: block;
width: 100%;
height: auto;
}
.c-emobility-material__label {
width: fit-content;
margin: 0;
padding: var(--space-3xs) var(--space-xs);
color: var(--palette-white);
background: var(--accent);
font-size: var(--heading-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--ls-s);
line-height: var(--line-height-heading);
text-transform: uppercase;
}
.c-emobility-material__copy {
min-width: 0;
}
.c-emobility-material__body {
padding-inline-end: var(--split-content-padding-inline);
}
.c-emobility .c-emobility-facts {
display: flex;
flex-direction: column;
align-self: stretch;
gap: 0;
row-gap: 0;
min-width: 0;
overflow: hidden;
}
.c-emobility .c-emobility-facts__panel {
flex: 0 0 auto;
padding: var(--space-l);
}
.c-emobility .c-emobility-facts__panel:last-child {
flex: 1 1 auto;
}
.c-emobility-facts__panel--light {
--fg: var(--palette-dark-blue);
color: var(--fg);
background: var(--accent-20);
}
.c-emobility-facts__panel--dark {
--fg: var(--palette-white);
color: var(--fg);
background: var(--palette-steel-blue);
}
.c-emobility-facts__panel .c-content__title {
color: var(--fg);
}
.c-emobility-facts__panel .c-list {
margin: 0;
padding: 0;
list-style: none;
}
.c-emobility-facts__panel .c-list > li {
position: relative;
margin: 0;
padding-inline-start: 1.8em;
color: currentcolor;
}
.c-emobility-facts__panel .c-list > li::before {
content: "✓";
position: absolute;
inset-inline-start: 0;
color: var(--accent);
font-weight: var(--font-weight-bold);
}
.c-emobility-facts__panel--dark .c-list > li::before {
color: var(--palette-soft-blue);
}
@media (max-width: 767px) {
.c-emobility__intro-title {
max-width: 12ch;
}
.c-emobility-material__body {
padding-inline-end: 0;
}
.c-emobility .c-emobility-facts__panel {
padding: var(--space-s);
}
}
/* _philosophy.css */
/* ==========================================================================
PHILOSOPHIE UND WERTE
Seitenspezifische Präsentation auf Basis von c-section, c-content und l-*.
========================================================================== */
.c-philosophy {
--philosophy-page-inset:
max(
var(--container-gutter),
calc((100vw - var(--container-width-wide)) / 2)
);
}
.c-philosophy > .c-section > .l-container--full {
padding-inline: 0;
}
.c-philosophy__copy {
padding-block: var(--space-2xl);
padding-inline-start: var(--philosophy-page-inset);
padding-inline-end: var(--gap-xl);
}
.c-philosophy__copy--right {
padding-inline-start: var(--space-2xl);
padding-inline-end: var(--philosophy-page-inset);
}
.c-philosophy__title span {
color: var(--palette-soft-blue);
}
.c-philosophy__media {
min-height: 100%;
margin: 0;
}
.c-philosophy__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.c-philosophy__dropcap {
border-radius: var(--radius-none);
}
@media (max-width: 767px) {
.c-philosophy__copy,
.c-philosophy__copy--right {
padding-block: var(--space-xl);
padding-inline: var(--container-gutter-mobile);
}
.c-philosophy__media {
min-height: 32rem;
}
}
/* _history.css */
/* ==========================================================================
COMPONENT: HISTORIE
Alternierende Zeitleiste der Unternehmensgeschichte.
Struktur und Abstände bleiben im Framework:
c-section > l-container > c-content; Einträge verwenden l-stack.
========================================================================== */
.c-history__timeline {
--history-axis-gap: var(--gap-3xl-alt);
--history-marker-size: var(--space-l);
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--history-axis-gap);
row-gap: var(--gap-2xl);
align-items: start;
}
.c-history__timeline::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 50%;
inline-size: 0;
border-inline-start: thin solid var(--divider-on-light);
translate: -50% 0;
}
.c-history__item {
position: relative;
inline-size: 100%;
}
.c-history__item:nth-child(odd) {
justify-self: end;
}
.c-history__item:nth-child(even) {
justify-self: start;
}
.c-history__item::before {
content: "";
position: absolute;
inset-block-start: var(--gap-m);
inline-size: var(--history-marker-size);
aspect-ratio: var(--ratio-square);
border: thin solid var(--divider-on-light);
border-radius: var(--radius-full);
background: var(--bg-light);
z-index: var(--z-raised);
}
.c-history__item:nth-child(odd)::before {
inset-inline-end:
calc((var(--history-axis-gap) / -2) - (var(--history-marker-size) / 2));
}
.c-history__item:nth-child(even)::before {
inset-inline-start:
calc((var(--history-axis-gap) / -2) - (var(--history-marker-size) / 2));
}
.c-history__year {
color: var(--accent);
font-size: var(--heading-4xl);
font-variant-numeric: tabular-nums;
line-height: var(--line-height-heading);
}
.c-history__media {
margin: 0;
overflow: hidden;
aspect-ratio: var(--ratio-standard);
}
.c-history__media img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.c-history__heading {
color: var(--content-title);
font-size: var(--heading-xs);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-heading);
text-transform: uppercase;
}
.c-history__text {
color: var(--content-body);
font-size: var(--text-m);
line-height: var(--line-height-base);
}
.c-history__list {
margin: 0;
padding-inline-start: var(--space-l);
}
@media (max-width: 767px) {
.c-history__timeline {
--history-axis-gap: var(--gap-l);
grid-template-columns: 1fr;
padding-inline-start: var(--history-axis-gap);
row-gap: var(--gap-xl);
}
.c-history__timeline::before {
inset-inline-start: calc(var(--history-marker-size) / 2);
translate: 0 0;
}
.c-history__item,
.c-history__item:nth-child(odd),
.c-history__item:nth-child(even) {
grid-column: 1;
justify-self: stretch;
inline-size: 100%;
}
.c-history__item:nth-child(odd)::before,
.c-history__item:nth-child(even)::before {
inset-inline-start:
calc((var(--history-axis-gap) * -1) + (var(--history-marker-size) / 2));
inset-inline-end: auto;
}
}
/* _company.css */
/* ==========================================================================
UNTERNEHMEN — redaktioneller Hub für Profil und Unternehmensbereiche.
========================================================================== */
.c-company-intro {
background: var(--surface-raised-soft);
}
.c-company-intro__split {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
.c-company-intro__media {
min-height: 52rem;
}
.c-company-intro__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.c-company-intro__copy {
align-self: center;
}
.c-company-facts {
border-block: 1px solid var(--divider);
}
.c-company-facts__item {
padding-block: var(--space-m);
}
.c-company-facts__item + .c-company-facts__item {
padding-inline-start: var(--space-m);
border-inline-start: 1px solid var(--divider);
}
.c-company-facts__value {
display: block;
color: var(--accent-readable);
font-size: var(--text-m);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-compressed);
hyphens: none;
overflow-wrap: normal;
word-break: normal;
}
.c-company-facts__label {
display: block;
margin-top: var(--space-4xs);
color: var(--fg-muted);
font-size: var(--text-xs);
line-height: var(--line-height-base);
}
.c-company-overview__grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-auto-flow: dense;
align-items: stretch;
}
.c-company-card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
background: var(--surface-raised-soft);
}
.c-company-card--feature {
grid-column: span 7;
grid-row: span 2;
}
.c-company-card--side {
grid-column: span 5;
}
.c-company-card--wide {
grid-column: span 7;
}
.c-company-card__media {
min-height: 21rem;
}
.c-company-card--feature .c-company-card__media {
flex: 1 1 auto;
min-height: 46rem;
}
.c-company-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms cubic-bezier(0.2, 0.65, 0.25, 1);
}
.c-company-card__body {
padding: var(--gap-m);
}
.c-company-card__group {
color: var(--accent-readable);
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--ls-m);
text-transform: uppercase;
}
.c-company-card__title {
margin: 0;
}
.c-company-card__title a {
color: var(--fg);
text-decoration: none;
}
.c-company-card__title a::after {
position: absolute;
inset: 0;
content: "";
}
.c-company-card__title a:is(:hover, :focus-visible) {
color: var(--accent-readable);
}
.c-company-card:has(.c-company-card__title a:is(:hover, :focus-visible)) .c-company-card__media img {
transform: scale(1.035);
}
.c-company-card__text {
color: var(--fg-muted);
}
.c-company-card:focus-within {
outline: 2px solid var(--accent-readable);
outline-offset: 3px;
}
.c-company-career {
--fg: var(--palette-white);
--accent-readable-mix: 20%;
background: var(--bg-dark);
color: var(--fg);
}
.c-company-career__split {
align-items: stretch;
}
.c-company-career__media {
min-height: 48rem;
}
.c-company-career__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.c-company-career__copy {
align-self: center;
padding: var(--gap-xl);
}
.c-company-career .c-content__overline {
color: var(--palette-soft-blue);
}
.c-company-career .c-content__title {
color: var(--palette-white);
}
.c-company-contact {
background: var(--palette-pale-blue);
}
.c-company-contact__actions {
justify-content: flex-end;
}
@media (max-width: 1023px) {
.c-company-overview__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.c-company-card--feature,
.c-company-card--wide {
grid-column: span 2;
grid-row: auto;
}
.c-company-card--side {
grid-column: span 1;
}
.c-company-card--feature .c-company-card__media {
min-height: 38rem;
}
}
@media (max-width: 767px) {
.c-company-intro__split,
.c-company-overview__grid {
grid-template-columns: 1fr;
}
.c-company-intro__media,
.c-company-career__media {
min-height: 32rem;
}
.c-company-facts {
grid-template-columns: 1fr;
}
.c-company-facts__item + .c-company-facts__item {
padding-inline-start: 0;
border-block-start: 1px solid var(--divider);
border-inline-start: 0;
}
.c-company-card--feature,
.c-company-card--side,
.c-company-card--wide {
grid-column: span 1;
}
.c-company-card--feature .c-company-card__media,
.c-company-card__media {
min-height: 24rem;
}
.c-company-career__copy {
padding: var(--gap-l) 0;
}
.c-company-contact__actions {
justify-content: flex-start;
}
}
@media (prefers-reduced-motion: reduce) {
.c-company-card__media img {
transition: none;
}
}
/* _quality.css */
/* ==========================================================================
COMPONENT: QUALITÄT UND UMWELT
Seitenkomponente auf Basis von c-section, c-content, l-grid und l-stack.
========================================================================== */
.c-quality__intro {
--grid-gap: var(--gap-s);
}
.c-quality__intro > article {
position: relative;
z-index: 2;
}
.c-quality__media {
position: relative;
z-index: 1;
align-self: center;
margin: 0;
}
.c-quality__media img {
display: block;
inline-size: calc(100% + (3 * var(--space-2xl)));
max-inline-size: none;
block-size: auto;
margin-inline-start: calc(-2 * var(--space-2xl));
}
@media (max-width: 767px) {
.c-quality__media img {
inline-size: 100%;
max-inline-size: 100%;
margin-inline-start: 0;
}
}
.c-quality__list {
margin: 0;
padding-inline-start: var(--space-l);
}
.c-quality__list > li::marker {
color: var(--accent);
font-weight: var(--font-weight-bold);
}
.c-quality__downloads a {
color: var(--accent);
font-size: var(--text-s);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-base);
text-decoration-thickness: from-font;
text-underline-offset: var(--space-4xs);
}
.c-quality__downloads a:hover,
.c-quality__downloads a:focus-visible {
color: var(--accent-readable);
}
/* _references.css */
/* ==========================================================================
COMPONENT: REFERENZEN UND BRANCHEN
Kundenlisten, Kundenlogos und branchenübergreifende Zielgruppen.
========================================================================== */
.c-references__media {
align-self: start;
margin: 0;
}
.c-references__media img {
display: block;
inline-size: 100%;
block-size: auto;
}
.c-references__panel {
padding: var(--gap-m);
background: var(--accent-20);
}
.c-references__panel--industries {
background: var(--accent-10);
}
.c-references__list {
list-style: none;
margin: 0;
padding: 0;
font-size: var(--text-s);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-base);
text-transform: uppercase;
}
.c-references__list > li {
position: relative;
padding-inline-start: var(--space-l);
}
.c-references__list > li::before {
content: "✓";
position: absolute;
inset-inline-start: 0;
color: var(--accent);
font-weight: var(--font-weight-bold);
}
.c-references__customers-section {
background: var(--bg-muted);
}
.c-references__logos-intro {
max-inline-size: none;
}
.c-references__logo-filters {
position: absolute;
overflow: hidden;
inline-size: 0;
block-size: 0;
pointer-events: none;
}
.c-references__logo-grid {
--logo-unit-size: 13rem;
--logo-media-height: 6.2rem;
display: grid;
grid-template-columns: repeat(7, var(--logo-unit-size));
justify-content: space-between;
column-gap: 0;
row-gap: clamp(var(--gap-s), 2.5vw, var(--gap-m));
align-items: start;
}
.c-references__logo {
position: relative;
display: grid;
grid-template-rows: var(--logo-media-height) auto;
gap: var(--gap-2xs);
min-inline-size: 0;
margin: 0;
text-align: center;
}
.c-references__logo-link {
position: absolute;
z-index: 1;
inset: 0;
}
.c-references__logo-link:focus-visible {
outline: 2px solid var(--accent-readable);
outline-offset: var(--space-3xs);
}
.c-references__logo img {
display: block;
align-self: center;
justify-self: center;
inline-size: 100%;
block-size: var(--logo-media-height);
margin-inline: auto;
object-fit: contain;
/* Testweise deaktiviert; Reaktivierung: Kommentarzeichen der folgenden Zeile entfernen. */
/* filter: url("#holder-logo-monochrome"); */
}
.c-references__logo img[src*="bentley-logo.svg"] {
scale: 1.8;
}
.c-references__logo img[src*="land-rover-logo.svg"] {
scale: 1.65;
}
.c-references__logo img[src*="jaguar-logo.svg"] {
scale: 2;
}
.c-references__logo img[src*="porsche-logo.svg"] {
inline-size: 14.4rem;
max-inline-size: none;
block-size: 6.8rem;
scale: 1.6;
}
.c-references__logo img[src*="opel-logo.svg"] {
scale: 1.7;
}
.c-references__logo img:is(
[src*="bosch-logo.svg"],
[src*="lucid-motors-logo.svg"],
[src*="voestalpine-logo.svg"]
) {
scale: 1.25;
}
.c-references__logo img[src*="skoda-logo.svg"] {
scale: 1.3;
}
.c-references__logo figcaption {
justify-self: center;
inline-size: fit-content;
max-inline-size: 100%;
margin-inline: auto;
padding: var(--space-5xs) var(--space-3xs);
color: var(--content-title);
font-size: var(--text-xs);
font-weight: var(--font-weight-medium);
hyphens: none;
line-height: var(--line-height-compressed);
background: color-mix(in srgb, var(--surface-page) 50%, transparent);
}
/* ==========================================================================
BRANCHEN-TABS
========================================================================== */
.c-industry-tabs__intro > .c-content__intro {
max-width: 56rem;
}
.c-industry-tabs__layout {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: clamp(var(--gap-l), 5vw, var(--gap-2xl));
background: var(--surface-page);
}
.c-industry-tabs__chooser {
min-width: 0;
}
.c-industry-tabs__nav-wrap {
min-width: 0;
background: var(--surface-page);
}
.c-industry-tabs__nav {
display: flex;
flex-wrap: wrap;
gap: var(--gap-s);
}
.c-industry-tabs__tab {
position: relative;
isolation: isolate;
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
flex: 0 1 auto;
width: auto;
min-height: 5.4rem;
padding: var(--gap-2xs) var(--gap-xs);
color: var(--accent-readable);
font-family: var(--font-primary);
font-size: var(--text-s);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--ls-m);
line-height: var(--line-height-compressed);
text-align: center;
text-transform: uppercase;
background: transparent;
border: 0;
box-shadow: inset 0 0 0 1px var(--accent-readable);
cursor: pointer;
transition: color 0.2s ease, background-color 0.2s ease;
}
.c-industry-tabs__tab::before {
position: absolute;
z-index: -1;
inset: 0;
background: var(--surface-page);
box-shadow: inset 0 0 0 1px var(--accent-readable);
content: "";
transition: background-color 0.2s ease;
}
.c-industry-tabs__tab::after {
position: absolute;
z-index: -2;
right: 9%;
bottom: calc(var(--space-5xs) * -1);
left: 9%;
height: var(--space-xs);
border-radius: 50%;
background: color-mix(in srgb, var(--accent) 28%, transparent);
content: "";
filter: blur(var(--space-3xs));
pointer-events: none;
}
.c-industry-tabs__tab:hover {
color: var(--btn-primary-color);
background: var(--accent-readable);
box-shadow: inset 0 0 0 1px var(--accent-readable);
}
.c-industry-tabs__tab.is-active {
color: var(--btn-primary-color);
background: var(--accent-readable);
box-shadow: inset 0 0 0 1px var(--accent-readable);
}
.c-industry-tabs__tab:hover::before,
.c-industry-tabs__tab:focus-visible::before,
.c-industry-tabs__tab.is-active::before {
background: var(--accent-readable);
}
.c-industry-tabs__tab:focus-visible {
position: relative;
z-index: 1;
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.c-industry-tabs__stage {
display: flex;
flex-direction: column;
min-width: 0;
color: var(--fg);
background: var(--surface-page);
border: 0;
border-inline-start: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.c-industry-tabs__panels {
display: grid;
flex: 1 1 auto;
}
.c-industry-tabs__panel {
grid-area: 1 / 1;
align-content: center;
min-width: 0;
min-height: 34rem;
padding: clamp(var(--gap-l), 5vw, var(--gap-2xl));
}
.c-industry-tabs__panel[hidden] {
display: none;
}
.c-industry-tabs__panel .c-content__title {
color: var(--accent-readable);
}
.c-industry-tabs__panel .c-content__body {
max-width: 66ch;
color: var(--fg-70);
}
.c-industry-tabs__panel-highlight {
position: relative;
}
.c-industry-tabs__panel-highlight:hover .c-industry-tabs__panel-title,
.c-industry-tabs__panel-highlight:focus-within .c-industry-tabs__panel-title {
text-decoration: underline;
text-underline-offset: 0.2em;
}
.c-industry-tabs__panel-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: scale 450ms ease;
}
.c-industry-tabs__panel-link {
position: absolute;
inset: 0;
z-index: var(--z-base);
display: block;
}
.c-industry-tabs__panel-highlight:hover .c-industry-tabs__panel-media img,
.c-industry-tabs__panel-highlight:focus-within .c-industry-tabs__panel-media img {
scale: 1.035;
}
.c-industry-tabs__panel-link:focus-visible {
outline: 2px solid var(--accent-readable);
outline-offset: -2px;
}
.c-industry-tabs__panel-title {
display: flex;
align-items: baseline;
gap: var(--gap-s);
}
.c-industry-tabs__index {
flex: 0 0 auto;
color: var(--accent-readable);
font-size: 0.72em;
font-weight: var(--font-weight-medium);
letter-spacing: var(--ls-l);
line-height: 1;
}
.c-industry-tabs__strengths {
align-items: center;
}
.c-industry-tabs__strength-link {
display: inline-flex;
align-items: center;
gap: var(--gap-3xs);
text-decoration: none;
}
.c-industry-tabs__strength-icon {
width: 0.9em;
height: 0.9em;
opacity: 0.62;
transition: opacity 180ms ease, transform 180ms ease;
}
.c-industry-tabs__strength-link:is(:hover, :focus-visible) .c-industry-tabs__strength-icon {
opacity: 1;
transform: translateX(var(--space-5xs));
}
.c-industry-tabs__controls {
display: grid;
grid-template-columns: repeat(2, 6rem);
align-items: center;
align-self: flex-end;
min-height: 6rem;
}
.c-industry-tabs__control {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 100%;
block-size: 100%;
min-height: 6rem;
padding: 0;
color: var(--accent);
background: transparent;
border: 0;
cursor: pointer;
transition: color 0.2s ease, background-color 0.2s ease;
}
.c-industry-tabs__control:last-child {
border-inline-start: 1px solid var(--divider-on-light);
}
.c-industry-tabs__control:hover,
.c-industry-tabs__control:focus-visible {
color: var(--palette-white);
background: var(--accent);
}
.c-industry-tabs__control:focus-visible {
outline: 2px solid var(--accent-readable);
outline-offset: 3px;
}
@media (max-width: 1199px) {
.c-references__logo-grid {
grid-template-columns: repeat(5, var(--logo-unit-size));
}
}
@media (max-width: 991px) {
.c-references__logo-grid {
grid-template-columns: repeat(4, var(--logo-unit-size));
}
.c-industry-tabs__layout {
grid-template-columns: 1fr;
}
.c-industry-tabs__tab {
flex: 1 1 calc(50% - var(--gap-s));
}
.c-industry-tabs__panel {
min-height: 36rem;
}
}
@media (max-width: 640px) {
.c-references__logo-grid {
grid-template-columns: repeat(2, var(--logo-unit-size));
row-gap: var(--gap-s);
}
.c-industry-tabs__tab {
flex-basis: 100%;
}
.c-industry-tabs__panel {
min-height: 38rem;
padding: var(--gap-l) var(--gap-m);
}
.c-industry-tabs__controls {
grid-template-columns: 5.4rem minmax(0, 1fr) 5.4rem;
}
}
@media (min-width: 768px) {
.c-references__logos-intro .c-content__title {
white-space: nowrap;
}
}
@media (prefers-reduced-motion: reduce) {
.c-industry-tabs__tab,
.c-industry-tabs__control,
.c-industry-tabs__panel-media img {
transition: none;
}
}
/* _standards.css */
/* ==========================================================================
COMPONENT: NORMENTABELLE
Fachliche Ausprägung der generischen .c-table-Komponente.
========================================================================== */
.c-standards__table thead th:nth-child(1) {
background: var(--accent-30);
}
.c-standards__table thead th:nth-child(2) {
background: var(--accent-20);
}
.c-standards__table thead th:nth-child(3) {
background: var(--accent-10);
}
.c-standards__table thead small {
display: block;
margin-block-start: var(--space-4xs);
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
}
.c-standards__procedure {
color: var(--accent);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
}
.c-standards__procedure small {
display: block;
color: var(--content-body);
font-size: var(--text-xs);
text-transform: none;
}
.c-standards__tag {
display: inline-block;
margin: 0 var(--space-4xs) var(--space-4xs) 0;
padding: var(--space-4xs) var(--space-2xs);
color: var(--palette-white);
background: var(--accent);
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-compressed);
text-transform: uppercase;
}
.c-standards__tag--product {
background: var(--accent-60);
}
/* Verlinkte Tags (Normen/Produkte mit Glossareintrag, öffnen in neuem Tab)
bleiben optisch identisch zu unverlinkten Tags, ohne Unterstreichung.
Höhere Spezifität nötig, um die generische .c-table-a-Regel (blauer
Text) zu schlagen — sonst verschwindet der weiße Tag-Text auf dem
farbigen Hintergrund. */
.c-standards__table a.c-standards__tag {
color: var(--palette-white);
font-weight: var(--font-weight-semibold);
text-decoration: none;
}
/* _locations.css */
/* ==========================================================================
COMPONENT: STANDORTE
Drei gleichwertige Standortspalten auf Basis des Layout-Systems.
========================================================================== */
.c-locations__heading {
padding-block-end: var(--space-s);
border-block-end: thin solid var(--accent);
}
.c-location {
min-inline-size: 0;
}
.c-location__media,
.c-location__map {
margin: 0;
}
.c-location__media img,
.c-location__map img {
display: block;
inline-size: 100%;
block-size: auto;
}
.c-location__title {
color: var(--fg);
font-size: var(--heading-s);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-heading);
text-transform: uppercase;
}
.c-location__subtitle {
color: var(--accent);
font-size: var(--text-m);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-heading);
text-transform: uppercase;
}
.c-location__services {
padding: 0;
list-style: none;
}
.c-location__services > li {
position: relative;
padding-inline-start: var(--space-m);
}
.c-location__services > li::before {
content: "›";
position: absolute;
inset-inline-start: 0;
color: var(--accent);
font-weight: var(--font-weight-bold);
}
.c-location__hours-title {
color: var(--fg);
font-size: var(--text-m);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-heading);
text-transform: uppercase;
}
.c-location__address {
font-style: normal;
}
.c-location__contact {
padding: 0;
list-style: none;
}
.c-location__contact a,
.c-location__map-link {
color: var(--accent);
text-decoration-thickness: from-font;
text-underline-offset: var(--space-4xs);
}
.c-location__contact a:hover,
.c-location__contact a:focus-visible,
.c-location__map-link:hover,
.c-location__map-link:focus-visible {
color: var(--accent-readable);
}
.c-location__map-link {
display: inline-block;
font-size: var(--text-s);
}
/* _job-posting.css */
/* ==========================================================================
COMPONENT: STELLENANZEIGE
Gekoppelte Zeilen aus nummerierter Farbfläche und Inhaltsbereich.
Die Inhalte können später unverändert durch ACF-Felder ersetzt werden.
========================================================================== */
.c-job-posting__steps {
display: grid;
gap: 0;
}
.c-job-posting__step {
display: grid;
grid-template-columns: minmax(16rem, 27%) minmax(0, 1fr);
min-block-size: calc(2 * var(--space-5xl));
}
.c-job-posting__step--training {
min-block-size: calc(4 * var(--space-5xl));
}
.c-job-posting__step--requirements {
min-block-size: calc(3 * var(--space-5xl));
}
.c-job-posting__step--documents {
min-block-size: calc(2 * var(--space-5xl));
}
.c-job-posting__step--benefits {
min-block-size: calc(2 * var(--space-5xl));
}
.c-job-posting__label {
padding: var(--space-xl);
}
.c-job-posting__content {
padding: 0 var(--space-xl) var(--space-5xl);
}
.c-job-posting__label {
--fg: var(--action-secondary);
color: var(--fg);
background: var(--accent);
}
.c-job-posting__step--requirements .c-job-posting__label {
background: color-mix(in srgb, var(--accent) 82%, var(--surface-page));
}
.c-job-posting__step--documents .c-job-posting__label {
background: color-mix(in srgb, var(--accent) 68%, var(--surface-page));
}
.c-job-posting__step--benefits .c-job-posting__label {
background: color-mix(in srgb, var(--accent) 56%, var(--surface-page));
}
.c-job-posting__number {
color: inherit;
font-size: var(--heading-l);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-heading);
}
.c-job-posting__label-title {
color: inherit;
font-size: var(--heading-xs);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-heading);
text-transform: uppercase;
}
html[lang^="de"] .c-job-posting__label-title--en,
html[lang^="en"] .c-job-posting__label-title--de {
display: none;
}
.c-job-posting__content {
color: var(--fg);
background: var(--surface-page);
}
.c-job-posting__content-title {
color: var(--accent);
font-size: var(--heading-xs);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-heading);
text-transform: uppercase;
}
.c-job-posting__content-title--primary {
color: var(--fg);
font-size: var(--heading-s);
}
.c-job-posting__content > .c-content__body h3,
.c-job-posting__content > .c-content__body h4 {
color: var(--accent);
font-size: var(--heading-xs);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-heading);
text-transform: uppercase;
}
.c-job-posting__content > .c-content__body ul {
display: flex;
flex-direction: column;
gap: var(--gap-5xs);
margin: 0;
padding: 0;
list-style: none;
}
.c-job-posting__content > .c-content__body li {
position: relative;
padding-inline-start: var(--space-m);
}
.c-job-posting__content > .c-content__body li::before {
content: "";
position: absolute;
inset-block-start: 0.65em;
inset-inline-start: 0;
inline-size: var(--space-4xs);
block-size: var(--space-4xs);
background: var(--accent);
}
.c-job-posting__content > .c-content__body address {
font-style: normal;
}
.c-job-posting__content > .c-content__body address a {
color: var(--fg);
font-weight: var(--font-weight-bold);
}
.c-job-posting__list {
margin: 0;
padding: 0;
list-style: none;
}
.c-job-posting__list > li {
position: relative;
padding-inline-start: var(--space-m);
}
.c-job-posting__list > li::before {
content: "";
position: absolute;
inset-block-start: 0.65em;
inset-inline-start: 0;
inline-size: var(--space-2xs);
block-size: var(--space-2xs);
background: var(--accent);
}
.c-job-posting__contact {
font-style: normal;
}
.c-job-posting__contact a {
color: var(--fg);
font-weight: var(--font-weight-bold);
text-decoration-thickness: from-font;
text-underline-offset: var(--space-4xs);
}
.c-job-posting__apply-button {
margin-block-start: var(--space-m);
}
/* Der Bewerbungsblock im Aside stammt vollständig aus dem ACF-WYSIWYG-Feld.
Seine Typografie wird deshalb hier auf das bisherige, ruhige CTA-Niveau
normalisiert, ohne die redaktionellen Inhalte umzuschreiben. */
.c-procedure-detail__layout--cta:has(.c-job-posting__steps) .c-procedure-cta > h3 {
color: var(--fg);
font-size: var(--heading-2xs);
font-style: normal;
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-heading);
text-transform: uppercase;
}
.c-procedure-detail__layout--cta:has(.c-job-posting__steps) .c-procedure-cta > h4 {
margin: 0;
color: var(--accent-readable);
font-size: var(--text-s);
font-style: normal;
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-heading);
text-transform: uppercase;
}
.c-procedure-detail__layout--cta:has(.c-job-posting__steps) .c-procedure-cta address {
margin: 0;
font-style: normal;
font-weight: var(--font-weight-regular);
}
.c-procedure-detail__layout--cta:has(.c-job-posting__steps) .c-procedure-cta address a {
font-weight: var(--font-weight-semibold);
}
@media (max-width: 767px) {
.c-job-posting__step {
grid-template-columns: 1fr;
min-block-size: 0;
}
.c-job-posting__label {
padding: var(--space-l);
}
.c-job-posting__content {
padding: 0 var(--space-l) var(--space-2xl);
}
}
/* _jobs.css */
/* ==========================================================================
JOBS UND KARRIERE (Seite 949)
Semantik: c-section > l-container > c-content.c-jobs-overview.
Zwei Gruppen mit flachen Linklisten – bewusst ohne Karten und Bilder.
========================================================================== */
.c-jobs-overview {
width: 100%;
}
/* Werk-Filter (clientseitig, siehe assets/js/job-filter.js). Buttons
nutzen bewusst das bestehende .btn/.btn-outline-System statt eigener
Button-Optik. */
.c-job-filter {
display: flex;
flex-wrap: wrap;
gap: var(--gap-2xs);
margin-bottom: var(--space-l);
}
.c-job-filter__btn[aria-pressed="true"] {
background: var(--accent-readable);
color: var(--btn-primary-color);
box-shadow: inset 0 0 0 1px var(--accent-readable);
}
.c-job-item[hidden] {
display: none;
}
.c-jobs-overview__group[hidden] {
display: none;
}
.c-jobs-overview__intro {
max-width: var(--text-width-xl);
color: var(--accent-readable);
font-size: var(--text-l);
font-weight: var(--font-weight-regular);
letter-spacing: var(--ls-m);
line-height: var(--line-height-heading);
text-transform: uppercase;
}
.c-jobs-content-wrapper {
padding: var(--space-3xl);
border-radius: var(--radius-s);
background: var(--bg-muted);
}
.c-jobs-overview__group {
width: 100%;
}
.c-jobs-overview__title {
color: var(--fg);
font-size: var(--heading-m);
font-weight: var(--font-weight-regular);
letter-spacing: var(--ls-s);
line-height: var(--line-height-heading);
text-transform: uppercase;
}
.c-jobs-overview__list {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.c-job-item {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: var(--gap-m);
padding-block: var(--space-l);
border-block-end: 1px solid var(--fg-10);
}
/* Ein ruhiges Kategoriesymbol je Zeile statt berufsspezifischer,
wechselnder Piktogramme. Die Lucide-Datei dient als Maske, sodass die
Farbe weiterhin vollständig über das Holder-Token gesteuert wird. */
.c-job-item::before {
content: "";
flex: 0 0 auto;
inline-size: 2.25rem;
block-size: 2.25rem;
background-color: var(--accent-readable);
-webkit-mask: center / contain no-repeat;
mask: center / contain no-repeat;
opacity: 0.78;
transition: opacity 180ms ease, transform 180ms ease;
}
/* An die brxe-{id}-Klasse des jeweiligen Loop-Elements gebunden statt an
die Geschwister-Position: die Positions-Selektoren (:first-child/
:nth-child) brachen, sobald die Werk-Filter-Leiste (2026-08-21) als
neues erstes Kind vor die drei Gruppen trat und die Zählung verschob.
Bricks gibt in Query-Loops kein id-Attribut aus (Duplikate je
Wiederholung), nur die Klasse — deshalb .brxe-{id} statt #brxe-{id}. */
.c-jobs-overview__group:has(.brxe-jobalo) .c-job-item::before {
-webkit-mask-image: url("../assets/icons/graduation-cap.svg");
mask-image: url("../assets/icons/graduation-cap.svg");
}
.c-jobs-overview__group:has(.brxe-jobflo) .c-job-item::before {
-webkit-mask-image: url("../assets/icons/user-round.svg");
mask-image: url("../assets/icons/user-round.svg");
}
.c-jobs-overview__group:has(.brxe-jobfer) .c-job-item::before {
-webkit-mask-image: url("../assets/icons/biceps-flexed.svg");
mask-image: url("../assets/icons/biceps-flexed.svg");
}
.c-job-item:has(.c-job-link a:hover)::before,
.c-job-item:has(.c-job-link a:focus-visible)::before {
opacity: 1;
transform: translateY(-0.1em);
}
.c-jobs-overview__list > .c-job-item:last-child {
border-block-end: 0;
}
.c-job-werk-badge {
display: inline-flex;
align-items: center;
flex: none;
order: 2;
margin-inline-start: auto;
padding: var(--space-4xs) var(--space-xs);
background: var(--accent-10);
color: var(--accent-readable);
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--ls-s);
line-height: 1;
text-transform: uppercase;
border-radius: var(--radius-s);
white-space: nowrap;
}
.c-job-werk-badge--all {
background: var(--fg-10);
color: var(--fg-70);
}
:root[data-contrast="high"] .c-job-werk-badge {
color: var(--fg);
background: var(--accent-20);
border: 1px solid var(--fg);
}
:root[data-contrast="high"] .c-job-werk-badge--all {
color: var(--fg);
background: var(--surface-page);
}
/* .c-job-link sitzt jetzt am h3 (Heading-Element mit Link-Setting),
nicht mehr direkt am — Klasse also auf die Überschrift, Link-Optik
auf das verschachtelte weitergereicht. */
.c-job-link {
display: inline-block;
flex: 1 1 auto;
min-width: 0;
order: 1;
margin: 0;
font-size: var(--heading-2xs);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-heading);
}
.c-job-link a {
color: var(--accent-readable);
text-decoration: none;
transition: color 0.2s ease;
}
.c-job-link a:hover,
.c-job-link a:focus-visible {
color: var(--fg);
}
.c-job-link a:focus-visible {
outline: 2px solid var(--accent-readable);
outline-offset: var(--space-3xs);
}
@media (max-width: 767px) {
.c-jobs-overview__intro {
max-width: none;
}
.c-job-link {
font-size: var(--text-l);
}
.c-job-item {
align-items: flex-start;
}
.c-job-item::before {
inline-size: 2rem;
block-size: 2rem;
margin-block-start: 0.15em;
}
}
@media (prefers-reduced-motion: reduce) {
.c-job-item::before {
transition: none;
}
}
/* _downloads.css */
/* ==========================================================================
DOWNLOADS (Seite 950)
Pflege per ACF-Repeater, visuell verwandt mit der Jobs-Übersicht.
========================================================================== */
.c-downloads {
width: 100%;
max-width: calc(100vw - (2 * var(--container-gutter-mobile)));
min-width: 0;
}
.c-downloads__intro {
max-width: var(--text-width-xl);
}
.c-downloads-panel {
width: 100%;
min-width: 0;
padding: var(--space-3xl);
background: var(--bg-muted);
}
.c-downloads > .brxe-shortcode {
width: 100%;
min-width: 0;
}
.c-downloads-group {
width: 100%;
}
.c-downloads-group[id],
.c-download-item[id] {
scroll-margin-top: calc(var(--header-height) + var(--space-l));
}
.c-downloads-group__title {
color: var(--fg);
font-size: var(--heading-m);
font-weight: var(--font-weight-regular);
letter-spacing: var(--ls-s);
line-height: var(--line-height-heading);
text-transform: uppercase;
}
.c-downloads-list {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.c-download-item {
display: flex;
align-items: center;
gap: var(--gap-m);
min-width: 0;
padding-block: var(--space-l);
border-block-end: 1px solid var(--fg-10);
}
.c-downloads-list > .c-download-item:last-child {
border-block-end: 0;
}
.c-download-item__icon {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 2.25rem;
height: 2.25rem;
color: var(--accent-readable);
opacity: 0.78;
}
.c-download-item__icon svg {
width: 100%;
height: 100%;
}
.c-download-item__preview {
flex: 0 0 auto;
width: auto;
background: var(--surface-page);
}
.c-download-item__preview img {
display: block;
width: auto;
height: var(--space-5xl);
max-width: none;
object-fit: contain;
}
.c-download-item__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gap-s);
flex: 1 1 auto;
min-width: 0;
color: var(--accent-readable);
font-size: var(--heading-xs);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-heading);
text-decoration: none;
transition: color 180ms ease;
}
.c-download-item__link > span {
min-width: 0;
overflow-wrap: anywhere;
}
.c-download-item__link:hover,
.c-download-item__link:focus-visible {
color: var(--fg);
}
.c-download-item__link:focus-visible {
outline: 2px solid var(--accent-readable);
outline-offset: var(--space-3xs);
}
.c-download-item__link-icon {
flex: 0 0 auto;
width: 1.25em;
height: 1.25em;
}
@media (max-width: 767px) {
.c-downloads-panel {
padding: var(--space-xl);
}
.c-download-item {
align-items: flex-start;
}
.c-download-item__link {
font-size: var(--text-l);
}
.c-download-item__preview img {
height: var(--space-4xl);
}
}
@media (prefers-reduced-motion: reduce) {
.c-download-item__link {
transition: none;
}
}
/* _privacy.css */
/* ==========================================================================
DATENSCHUTZ — Rechtstext-Bereich: weniger krasse Zwischenüberschriften,
hervorgehobener Verantwortlicher-Block
========================================================================== */
.c-legal-content .c-content__title {
font-weight: var(--font-weight-regular);
}
/* _contacts.css */
/* Pflegbares Ansprechpartner-Verzeichnis. */
.c-contact-directory__filters {
display: grid;
grid-template-columns: minmax(16rem, 2fr) minmax(12rem, 1fr) auto;
align-items: end;
gap: var(--gap-m);
padding: var(--space-m);
border-radius: 0;
background: var(--bg-muted);
}
.c-contact-directory [hidden] {
display: none;
}
.c-contact-tabs__nav {
display: flex;
flex-wrap: wrap;
gap: var(--gap-3xs);
}
.c-contact-tabs__tab {
padding: var(--space-2xs) var(--space-l);
border: 0;
border-radius: 0;
background: var(--surface-raised-strong);
color: var(--fg-60);
font: inherit;
font-size: var(--text-s);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--ls-m);
line-height: var(--line-height-compressed);
text-transform: uppercase;
cursor: pointer;
}
.c-contact-tabs__tab.is-active {
background: var(--bg-muted);
color: var(--fg-70);
}
.c-contact-tabs__tab:focus-visible {
outline: 2px solid var(--fg);
outline-offset: var(--space-5xs);
}
.c-contact-directory__field {
display: flex;
flex-direction: column;
gap: var(--gap-4xs);
min-width: 0;
}
.c-contact-directory__field label {
color: var(--fg-70);
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
}
.c-contact-directory__field input,
.c-contact-directory__field select {
width: 100%;
min-height: var(--space-2xl);
padding-inline: var(--space-xs);
border: 1px solid var(--fg-20);
border-radius: 0;
background: var(--surface-page);
color: var(--fg);
font: inherit;
}
.c-contact-directory__field input:focus-visible,
.c-contact-directory__field select:focus-visible {
outline: 2px solid var(--accent-readable);
outline-offset: var(--space-5xs);
}
.c-contact-directory__reset {
justify-self: start;
width: auto;
min-height: 0;
padding: var(--space-xs);
border: 0;
background: transparent;
color: var(--fg-70);
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-compressed);
white-space: nowrap;
}
.c-contact-directory__reset:hover,
.c-contact-directory__reset:focus-visible {
background: var(--accent-10);
color: var(--accent-readable);
}
.c-contact-directory__reset:focus-visible {
outline: 2px solid var(--accent-readable);
outline-offset: var(--space-5xs);
}
.c-contact-group {
padding: var(--space-xl);
border-radius: 0;
background: var(--bg-muted);
}
.c-contact-columns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--gap-xl);
}
.c-contact-column,
.c-contact-role-group,
.c-contact-list,
.c-contact-card,
.c-contact-card__contact {
display: flex;
flex-direction: column;
}
.c-contact-column {
min-width: 0;
gap: var(--gap-xl);
}
.c-contact-role-group {
gap: var(--gap-m);
}
/* Zusammengefasste Gruppen (mehrere Werke unter einer Funktion): Abstände
wie bei Einzelgruppen, damit Standortzeile und erster Name auf derselben
Höhe stehen wie in den Nachbarspalten. */
.c-contact-role-group__site {
display: flex;
flex-direction: column;
gap: var(--gap-m);
}
/* Erster sichtbarer Standort rückt an die Überschrift heran; jeder weitere
(auch wenn der Standortfilter vorherige ausgeblendet hat) bekommt Luft. */
.c-contact-role-group__site {
margin-block-start: calc(var(--gap-4xs) - var(--gap-m));
}
.c-contact-role-group__site:not([hidden]) ~ .c-contact-role-group__site {
margin-block-start: var(--gap-s);
}
.c-contact-role-group__header {
display: flex;
flex-direction: column;
gap: var(--gap-4xs);
}
.c-contact-role-group__title,
.c-contact-role-group__location,
.c-contact-role-group__details,
.c-contact-card__name {
margin: 0;
}
.c-contact-role-group__title {
color: var(--accent-readable);
font-size: var(--text-l);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-compressed);
letter-spacing: var(--ls-m);
text-transform: uppercase;
}
.c-contact-role-group__location {
color: var(--fg-70);
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--ls-s);
text-transform: uppercase;
}
.c-contact-role-group__details {
color: var(--fg-70);
font-size: var(--text-s);
}
.c-contact-list {
gap: var(--gap-m);
padding: 0;
margin: 0;
list-style: none;
}
.c-contact-card {
gap: var(--gap-5xs);
}
.c-contact-card__name {
color: var(--fg);
font-size: var(--text-m);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-base);
}
.c-contact-card__contact {
align-items: flex-start;
gap: var(--gap-5xs);
font-style: normal;
text-align: start;
}
.c-contact-card__contact a {
color: var(--fg);
text-decoration: none;
}
.c-contact-card__contact .c-contact-card__email {
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-compressed);
box-shadow: 0 calc(-1 * var(--text-highlight-thickness)) 0 var(--text-highlight) inset;
}
.c-contact-card__contact a:hover,
.c-contact-card__contact a:focus-visible {
color: var(--accent-readable);
}
.c-contact-card__contact .c-contact-card__email:hover,
.c-contact-card__contact .c-contact-card__email:focus-visible {
box-shadow: 0 -0.4em 0 var(--text-highlight) inset;
}
.c-contact-card__contact a:focus-visible {
outline: 2px solid var(--accent-readable);
outline-offset: var(--space-3xs);
}
.c-contact-directory__empty {
margin: 0;
padding: var(--space-l);
border-radius: 0;
background: var(--bg-muted);
color: var(--fg-70);
text-align: center;
}
@media (max-width: 991px) {
.c-contact-directory__filters {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.c-contact-directory__field--search {
grid-column: 1 / -1;
}
.c-contact-columns {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.c-contact-directory__filters,
.c-contact-columns {
grid-template-columns: 1fr;
}
.c-contact-tabs__nav {
display: grid;
grid-template-columns: 1fr;
}
.c-contact-tabs__tab {
width: 100%;
text-align: start;
}
.c-contact-directory__reset {
width: auto;
}
}
/* _contact-form.css */
/* Wiederverwendbares Kontaktformular mit serverseitigem Spam-Schutz. */
.c-contact-form {
position: relative;
}
.c-contact-form__trap {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.c-contact-form__fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gap-3xs);
}
.c-contact-form__field {
display: flex;
flex-direction: column;
gap: var(--gap-4xs);
min-width: 0;
}
.c-contact-form__field--wide {
grid-column: 1 / -1;
}
.c-contact-form__field label {
margin: 0;
padding-bottom: 0;
color: var(--fg-70);
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
}
.c-contact-form__field input,
.c-contact-form__field textarea {
width: 100%;
min-width: 0;
margin: 0;
padding: var(--space-xs) var(--space-m);
border: 1px solid var(--border);
border-radius: 0;
background: var(--surface-page);
color: var(--fg);
font: inherit;
font-size: var(--text-s);
}
.c-contact-form__field input {
min-height: 4.6rem;
}
.c-contact-form__field textarea {
min-height: 12rem;
resize: vertical;
}
.c-contact-form:not(.c-contact-form--compact) .c-contact-form__field input::placeholder,
.c-contact-form:not(.c-contact-form--compact) .c-contact-form__field textarea::placeholder {
color: transparent;
}
.c-contact-form__field input:focus-visible,
.c-contact-form__field textarea:focus-visible,
.c-contact-form__consent input:focus-visible {
outline: 2px solid var(--accent-readable);
outline-offset: var(--space-5xs);
}
.c-contact-form__consent {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: var(--gap-2xs);
color: var(--fg-70);
font-size: var(--text-xs);
line-height: var(--line-height-default);
cursor: pointer;
}
.c-contact-form__consent input {
inline-size: 1.7rem;
block-size: 1.7rem;
margin-top: 0.15em;
accent-color: var(--accent);
}
.c-contact-form__consent a {
color: var(--accent-readable);
text-underline-offset: 0.2em;
}
.c-contact-form__footer {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--gap-s);
}
.c-contact-form__status {
flex: 1 1 22rem;
margin: 0;
color: var(--fg-70);
font-size: var(--text-xs);
}
.c-contact-form__status.is-success {
color: var(--accent-readable);
font-weight: var(--font-weight-semibold);
}
.c-contact-form__status.is-error {
color: var(--fg);
font-weight: var(--font-weight-semibold);
}
.c-contact-form--compact .c-contact-form__fields {
grid-template-columns: minmax(0, 1fr);
}
.c-contact-form--compact {
--stack-gap: var(--gap-2xs);
}
.c-contact-form--compact .c-contact-form__fields {
gap: var(--gap-4xs);
}
.c-contact-form--compact .c-contact-form__field label {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.c-contact-form--compact .c-contact-form__field input::placeholder,
.c-contact-form--compact .c-contact-form__field textarea::placeholder {
color: var(--fg-60);
opacity: 1;
}
.c-contact-form--compact .c-contact-form__field input,
.c-contact-form--compact .c-contact-form__field textarea {
padding: var(--space-2xs) var(--space-xs);
font-size: var(--text-xs);
}
.c-contact-form--compact .c-contact-form__field input {
min-height: 3.4rem;
}
.c-contact-form--compact .c-contact-form__field--wide {
grid-column: auto;
}
.c-contact-form--compact .c-contact-form__field textarea {
min-height: 7rem;
}
.c-contact-form--compact .c-contact-form__consent {
gap: var(--gap-3xs);
font-size: var(--text-2xs);
}
.c-contact-form--compact .c-contact-form__consent input {
inline-size: 1.4rem;
block-size: 1.4rem;
}
.c-contact-form--compact .c-contact-form__footer {
gap: var(--gap-xs);
}
@media (max-width: 767px) {
.c-contact-form__fields {
grid-template-columns: minmax(0, 1fr);
}
.c-contact-form__field--wide {
grid-column: auto;
}
}
/* _contact-panel.css */
/* Globale Kontakt-Schublade mit Schnellkontakten. */
.c-contact-panel {
width: min(100%, 58rem);
max-width: 100%;
height: 100dvh;
max-height: none;
margin: 0 0 0 auto;
padding: 0;
overflow: visible;
border: 0;
border-inline-start: 1px solid var(--border);
border-radius: 0;
background: var(--surface-page);
color: var(--fg);
box-shadow: -1.5rem 0 5rem var(--overlay-20);
opacity: 0;
transform: translateX(100%);
transition: opacity 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.c-contact-panel.is-visible {
opacity: 1;
transform: translateX(0);
}
.c-contact-panel::backdrop {
background: var(--overlay-60);
backdrop-filter: blur(0.45rem);
opacity: 0;
transition: opacity 220ms ease;
}
.c-contact-panel.is-visible::backdrop {
opacity: 1;
}
.c-contact-panel__inner {
height: 100%;
overflow-y: auto;
overscroll-behavior: contain;
}
.c-contact-panel__content {
min-height: 100%;
padding: var(--space-5xl) calc(var(--space-3xl) + 4rem) var(--space-3xl) var(--space-3xl);
}
.c-contact-panel__close {
position: absolute;
z-index: 2;
inset-block-start: var(--space-xl);
inset-inline-end: var(--space-xl);
display: grid;
place-items: center;
inline-size: 4rem;
block-size: 4rem;
padding: 0;
border: 1px solid var(--border);
border-radius: 0;
background: var(--surface-page);
color: var(--accent-readable);
cursor: pointer;
transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}
.c-contact-panel__close:hover,
.c-contact-panel__close:focus-visible {
border-color: var(--accent-readable);
background: var(--accent-10);
}
.c-contact-panel__close:focus-visible,
.c-contact-panel__actions a:focus-visible {
outline: 2px solid var(--accent-readable);
outline-offset: var(--space-5xs);
}
.c-contact-panel__close-icon {
--icon-size: 2rem;
}
.c-contact-panel__area-list,
.c-contact-panel__direct-list {
padding: 0;
margin: 0;
list-style: none;
}
.c-contact-panel__area-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
padding: 1px;
background: var(--border);
}
.c-contact-panel__area-list a {
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--gap-s);
min-height: 6.5rem;
padding: var(--space-m);
background: var(--surface-page);
color: var(--accent-readable);
font-size: var(--text-s);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--ls-m);
line-height: var(--line-height-compressed);
text-decoration: none;
text-transform: uppercase;
}
.c-contact-panel__area-list a:hover,
.c-contact-panel__area-list a:focus-visible {
background: var(--accent-10);
}
.c-contact-panel__area-list a:focus-visible,
.c-contact-panel__search-form input:focus-visible,
.c-contact-panel__search-form button:focus-visible {
position: relative;
z-index: 1;
outline: 2px solid var(--accent-readable);
outline-offset: var(--space-5xs);
}
.c-contact-panel__section-title,
.c-contact-panel__name,
.c-contact-panel__role {
margin: 0;
}
.c-contact-panel__section-title {
color: var(--accent-readable);
font-size: var(--text-l);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--ls-l);
line-height: var(--line-height-compressed);
text-transform: uppercase;
}
.c-contact-panel__form .c-contact-panel__section-title {
font-size: var(--text-s);
}
.c-contact-panel__direct-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
padding: 1px;
background: var(--border);
}
.c-contact-panel__direct-contact {
min-width: 0;
padding: var(--space-l);
background: var(--surface-page);
}
.c-contact-panel__name {
font-size: var(--text-m);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-compressed);
}
.c-contact-panel__role {
margin-top: var(--space-4xs);
color: var(--fg-70);
font-size: var(--text-s);
}
.c-contact-panel__actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-4xs);
margin-top: var(--space-m);
}
.c-contact-panel__actions a {
display: inline-flex;
align-items: center;
gap: var(--gap-3xs);
max-width: 100%;
color: var(--accent-readable);
font-size: var(--text-xs);
text-decoration: none;
}
.c-contact-panel__actions a:hover {
text-decoration: underline;
text-underline-offset: 0.2em;
}
.c-contact-panel__actions .c-icon {
--icon-size: 1.45rem;
flex: 0 0 auto;
}
.c-contact-panel__actions span {
overflow-wrap: anywhere;
}
.c-contact-panel__search {
margin-top: auto;
}
.c-contact-panel__search-form {
display: grid;
grid-template-columns: minmax(0, 1fr) 4.6rem;
border: 1px solid var(--border);
background: var(--surface-page);
}
.c-contact-panel__search-form input {
min-width: 0;
min-height: 4.6rem;
padding: var(--space-xs) var(--space-m);
border: 0;
background: transparent;
color: var(--fg);
font: inherit;
font-size: var(--text-s);
}
.c-contact-panel__search-form button {
display: grid;
place-items: center;
padding: 0;
border: 0;
border-inline-start: 1px solid var(--border);
background: var(--accent);
color: var(--surface-page);
cursor: pointer;
}
.c-contact-panel__search-form button:hover {
background: var(--accent-readable);
}
.c-contact-panel__search-form button .c-icon {
--icon-size: 1.8rem;
}
.c-contact-panel__overview {
align-self: flex-start;
}
@media (max-width: 767px) {
.c-contact-panel {
width: 100%;
}
.c-contact-panel__content {
padding: var(--space-5xl) calc(var(--container-gutter-mobile) + 4rem) var(--space-2xl) var(--container-gutter-mobile);
}
.c-contact-panel__close {
inset-block-start: var(--space-m);
inset-inline-end: var(--container-gutter-mobile);
}
.c-contact-panel__area-list,
.c-contact-panel__direct-list {
grid-template-columns: minmax(0, 1fr);
}
}
@media (prefers-reduced-motion: reduce) {
.c-contact-panel,
.c-contact-panel::backdrop {
transition-duration: 1ms;
}
}
/* _search.css */
/* ==========================================================================
WEBSITE-SUCHE — Header-Trigger, Dialog und priorisierte Live-Ergebnisse
========================================================================== */
.c-search-trigger {
display: inline-grid;
place-items: center;
inline-size: 3.25rem;
block-size: 3.25rem;
padding: 0;
border: 0;
border-radius: var(--radius-full);
background: transparent;
color: var(--fg);
cursor: pointer;
line-height: 0;
transition: color 180ms ease, background-color 180ms ease;
}
.c-search-trigger:hover,
.c-search-trigger:focus-visible {
background: var(--accent-20);
color: var(--accent-readable);
}
.c-search-trigger__icon {
--icon-size: 1.75rem;
}
.c-search-popup {
width: min(calc(100% - (var(--container-gutter) * 2)), 82rem);
max-height: min(94vh, 76rem);
margin: auto;
padding: 0;
overflow: visible;
border: 1px solid var(--overlay-20);
border-radius: var(--radius-s);
background: transparent;
color: var(--on-bg-dark);
box-shadow: 0 2rem 6rem color-mix(in srgb, var(--palette-black) 70%, transparent);
opacity: 0;
transform: translateY(1.5rem) scale(0.985);
transition: opacity 240ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.c-search-popup.is-visible {
opacity: 1;
transform: none;
}
.c-search-popup::backdrop {
background: color-mix(in srgb, var(--palette-dark-blue) 72%, transparent);
backdrop-filter: blur(0.65rem);
opacity: 0;
transition: opacity 240ms ease;
}
.c-search-popup.is-visible::backdrop {
opacity: 1;
}
.c-search-popup__inner {
max-height: min(94vh, 76rem);
overflow: auto;
border-radius: var(--radius-s);
}
.c-search-popup__close {
position: absolute;
z-index: 2;
inset-block-start: var(--gap-s);
inset-inline-end: var(--gap-s);
display: grid;
place-items: center;
inline-size: 3.25rem;
block-size: 3.25rem;
padding: 0;
border: 1px solid var(--overlay-30);
border-radius: var(--radius-full);
background: transparent;
color: var(--on-bg-dark);
cursor: pointer;
font: inherit;
font-size: var(--heading-2xs);
line-height: 1;
transition: border-color 180ms ease, background-color 180ms ease, transform 240ms ease;
}
.c-search-popup__close:hover,
.c-search-popup__close:focus-visible {
border-color: var(--accent);
background: var(--overlay-10);
transform: rotate(90deg);
}
.c-search-panel {
min-height: min(82vh, 66rem);
padding: var(--space-xl);
border-radius: var(--radius-s);
background:
radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 26rem),
var(--bg-dark);
}
:root[data-contrast="high"] .c-search-panel {
background: var(--bg-dark);
}
.c-search-form {
display: flex;
align-items: center;
gap: var(--gap-2xs);
}
.c-search-form__input {
flex: 1 1 auto;
min-width: 0;
min-height: 4.75rem;
padding: var(--space-xs) var(--space-m);
border: 1px solid var(--overlay-30);
border-radius: var(--radius-s);
background: color-mix(in srgb, var(--palette-black) 30%, transparent);
color: var(--on-bg-dark);
font: inherit;
font-size: var(--text-m);
transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.c-search-form__input::placeholder {
color: var(--on-bg-dark);
opacity: 1;
}
.c-search-form__input:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.c-search-form__submit {
display: grid;
place-items: center;
flex: 0 0 auto;
inline-size: 4.75rem;
block-size: 4.75rem;
padding: 0;
border: 0;
border-radius: var(--radius-s);
background: var(--accent);
color: var(--palette-white);
cursor: pointer;
}
.c-search-form__icon {
--icon-size: 1.8rem;
}
.c-search-status {
min-height: 1lh;
margin: calc(var(--gap-2xs) * -1) 0 0;
color: var(--overlay-60);
font-size: var(--text-xs);
}
.c-search-results {
display: grid;
gap: var(--gap-l);
}
.c-search-results[hidden] {
display: none;
}
.c-search-results[aria-busy="true"] {
min-height: 8rem;
opacity: 0.55;
}
.c-search-results__group {
display: grid;
gap: var(--gap-xs);
padding-top: var(--gap-m);
border-top: 1px solid var(--overlay-20);
}
.c-search-results__heading {
margin: 0;
color: var(--overlay-70);
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--ls-xl);
line-height: var(--line-height-compressed);
text-transform: uppercase;
}
.c-search-results__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
border: 1px solid var(--overlay-20);
border-radius: var(--radius-s);
background: var(--overlay-20);
}
.c-search-result {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--gap-s);
min-width: 0;
padding: var(--gap-s);
background: color-mix(in srgb, var(--bg-dark) 90%, var(--palette-white));
color: var(--on-bg-dark);
text-decoration: none;
transition: background-color 180ms ease;
}
.c-search-result:hover,
.c-search-result:focus-visible {
outline: 0;
background: color-mix(in srgb, var(--accent) 18%, var(--bg-dark));
}
.c-search-result:focus-visible {
box-shadow: inset 0 0 0 1px var(--accent);
}
.c-search-result__copy {
display: grid;
gap: var(--gap-4xs);
min-width: 0;
}
.c-search-result__title {
font-size: var(--text-m);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-heading);
}
.c-search-result__excerpt {
display: -webkit-box;
overflow: hidden;
color: var(--overlay-70);
font-size: var(--text-xs);
line-height: var(--line-height-body);
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
/* innerhalb des , erbt sonst dessen
`hyphens: none` aus _typography.css. */
hyphens: auto;
overflow-wrap: break-word;
}
.c-search-result__arrow {
color: var(--accent);
font-size: var(--text-m);
transition: transform 180ms ease;
}
.c-search-result:hover .c-search-result__arrow,
.c-search-result:focus-visible .c-search-result__arrow {
transform: translateX(0.25em);
}
.c-search-results__empty {
margin: 0;
padding-block: var(--gap-l);
border-top: 1px solid var(--overlay-20);
color: var(--overlay-70);
}
.c-search-results__footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--gap-s);
padding-top: var(--gap-m);
border-top: 1px solid var(--overlay-20);
}
.c-search-results__all,
.c-search-results__glossary {
color: var(--on-bg-dark);
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--ls-l);
text-decoration: none;
text-transform: uppercase;
}
.c-search-results__all:hover,
.c-search-results__all:focus-visible,
.c-search-results__glossary:hover,
.c-search-results__glossary:focus-visible {
color: var(--accent);
}
@media (max-width: 767px) {
.c-search-popup {
width: min(calc(100% - var(--gap-s)), 42rem);
}
.c-search-panel {
min-height: 86vh;
padding: var(--space-xl) var(--space-m);
}
.c-search-results__list {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.c-search-popup,
.c-search-popup::backdrop,
.c-search-popup__close,
.c-search-result,
.c-search-result__arrow {
transition: none;
}
}
/* _scroll-top.css */
/* ==========================================================================
SCROLL TOP — globale Rückkehr zum Seitenanfang.
========================================================================== */
.c-scroll-top-anchor {
position: absolute;
inset: 0 auto auto 0;
inline-size: 1px;
block-size: 1px;
pointer-events: none;
}
.scroll-top-button {
--icon-size: var(--space-l);
--icon-stroke-width: 1.8;
position: fixed;
z-index: var(--z-fixed);
inset-inline-end: var(--space-xl);
inset-block-end: var(--space-xl);
display: inline-grid;
isolation: isolate;
place-items: center;
inline-size: var(--space-3xl);
block-size: var(--space-3xl);
background: transparent;
color: #000 !important;
text-decoration: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(var(--space-s));
transition:
opacity 180ms ease,
visibility 180ms ease,
transform 180ms ease,
color 180ms ease;
}
.scroll-top-button::before {
position: absolute;
z-index: -1;
inset: 0;
background-color: rgba(172, 208, 232, 0.85);
color: #000 !important;
content: "";
transition: background-color 180ms ease;
}
.scroll-top-button.visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
box-shadow: 0 0 4rem 2rem rgb(255 255 255 / 0.3);
}
:root[data-contrast="high"] .scroll-top-button.visible {
box-shadow: none;
}
.scroll-top-button:is(:hover, :focus-visible) {
color: #000 !important;
}
.scroll-top-button:is(:hover, :focus-visible)::before {
background-color: rgb(172 208 232);
}
.scroll-top-button:focus-visible {
outline: 2px solid var(--accent-readable);
outline-offset: 3px;
}
.scroll-top-button__icon {
color: currentColor;
}
@media (max-width: 767px) {
.scroll-top-button {
inset-inline-end: var(--space-m);
inset-block-end: var(--space-m);
}
}
@media (prefers-reduced-motion: reduce) {
.scroll-top-button {
transition: none;
}
.scroll-top-button::before {
transition: none;
}
}
/* _glossary.css */
/* ==========================================================================
GALVANIK-GLOSSAR — A–Z-Navigation und Begriffslisten
========================================================================== */
.c-glossary__clusters {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
gap: var(--gap-l);
margin-block-start: var(--space-l);
}
.c-glossary__cluster {
display: flex;
flex-direction: column;
gap: var(--gap-2xs);
padding: var(--space-l);
border-radius: var(--radius-s);
background: var(--bg-muted);
display: none;
}
.c-glossary__cluster-title {
margin: 0;
color: var(--fg);
font-size: var(--heading-2xs);
font-weight: var(--font-weight-bold);
}
.c-glossary__cluster-desc {
margin: 0;
color: var(--fg-70);
font-size: var(--text-s);
}
.c-glossary__cluster-terms {
display: flex;
flex-wrap: wrap;
gap: var(--gap-3xs);
margin: var(--gap-2xs) 0 0;
padding: 0;
list-style: none;
}
.c-glossary__cluster-terms li {
display: contents;
}
.c-glossary__cluster-terms a {
display: inline-block;
padding: var(--gap-4xs) var(--gap-xs);
border-radius: var(--radius-s);
background: var(--accent-20);
color: var(--accent-readable);
font-size: var(--text-xs);
line-height: var(--line-height-compressed);
text-decoration: none;
transition: background-color 180ms ease, color 180ms ease;
}
.c-glossary__cluster-terms a:hover,
.c-glossary__cluster-terms a:focus-visible {
background: var(--accent);
color: var(--palette-white);
}
.c-glossary__cluster-pillar {
margin-top: var(--gap-2xs);
color: var(--accent-readable);
font-size: var(--text-s);
font-weight: var(--font-weight-semibold);
text-decoration: none;
}
.c-glossary__cluster-pillar:hover,
.c-glossary__cluster-pillar:focus-visible {
text-decoration: underline;
}
.c-glossary {
display: grid;
grid-template-columns: minmax(14rem, 18rem) 1fr;
align-items: start;
gap: var(--gap-xl);
margin-block-start: var(--space-xl);
}
.c-glossary__nav {
position: sticky;
top: calc(var(--header-height) + var(--gap-l));
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gap-3xs);
}
.c-glossary__nav-item {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
border-radius: var(--radius-s);
background: var(--accent-20);
color: var(--fg);
font-size: var(--text-s);
font-weight: var(--font-weight-bold);
text-decoration: none;
transition: background-color 180ms ease, color 180ms ease;
}
a.c-glossary__nav-item:hover,
a.c-glossary__nav-item:focus-visible {
background: var(--accent);
color: var(--palette-white);
}
.c-glossary__nav-item.is-disabled {
background: var(--fg-10);
color: var(--fg-30);
}
:root[data-contrast="high"] .c-glossary__nav-item {
color: var(--fg);
background: var(--accent-20);
border: 1px solid var(--fg);
}
:root[data-contrast="high"] .c-glossary__nav-item.is-disabled {
color: var(--fg);
background: var(--surface-page);
border-style: dashed;
}
.c-glossary__list {
display: flex;
flex-direction: column;
gap: var(--gap-l);
}
.c-glossary__group {
scroll-margin-top: calc(var(--header-height) + var(--gap-m));
}
.c-glossary__group-title {
margin: 0 0 var(--gap-2xs);
color: var(--fg);
font-size: var(--heading-2xs);
font-weight: var(--font-weight-bold);
}
.c-glossary__term {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gap-s);
padding: var(--gap-2xs) 0;
border-top: 1px solid var(--divider-on-light);
color: var(--accent-readable);
font-size: var(--text-m);
text-decoration: none;
transition: color 180ms ease, gap 180ms ease;
}
.c-glossary__term:hover,
.c-glossary__term:focus-visible {
color: var(--accent);
gap: var(--gap-m);
}
.c-glossary__term-icon {
--icon-size: 1.1em;
flex: none;
}
.c-glossary__empty {
margin: 0;
padding: var(--space-m);
border-radius: var(--radius-s);
background: var(--bg-muted);
}
@media (max-width: 767px) {
.c-glossary {
grid-template-columns: 1fr;
}
.c-glossary__nav {
position: static;
grid-template-columns: repeat(7, 1fr);
}
}
/* _news.css */
/* ==========================================================================
NEWS / AKTUELLES
Single-Post-Template (News-Beitrag, Content-Template ID 11) und
Übersichtsseite „Aktuelles" (Page ID 940). Panels bleiben ohne
Border-Radius — Framework-Konvention.
========================================================================== */
/* ---- Meta-Zeile: Kategorie-Badge + Datum (Single + Card) ---- */
.c-news-category {
display: inline-flex;
align-items: center;
padding: var(--space-4xs) var(--space-xs);
color: var(--accent-readable);
background: var(--accent-10);
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--ls-s);
line-height: var(--line-height-heading);
text-transform: uppercase;
}
.c-news-category a {
color: inherit;
text-decoration: none;
}
:root[data-contrast="high"] .c-news-category {
color: var(--fg);
background: var(--surface-page);
border: 1px solid var(--fg);
}
.c-news-date {
flex-basis: 100%;
width: 100%;
margin: 0;
color: var(--fg-70);
font-size: var(--text-s);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-body);
text-transform: uppercase;
}
/* Kompaktes Datums-Badge für Single-Beitrag und News-Karten. */
.c-news-date--badge {
display: inline-flex;
align-items: center;
flex-basis: auto;
width: auto;
padding: var(--space-4xs) var(--space-xs);
color: var(--palette-white);
background: var(--palette-dark-blue);
font-size: var(--text-xs);
letter-spacing: var(--ls-s);
line-height: var(--line-height-heading);
}
/* ---- Single-Beitrag: Bildergalerie im Fließtext
(bereits als .c-news-gallery im importierten post_content vorhanden) ---- */
.c-news-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--gap-s);
margin-block: var(--gap-l);
}
.c-news-gallery img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
/* ---- Zurück-Button im Single-Metabereich ---- */
.c-news-back-button {
margin-inline-start: auto;
white-space: nowrap;
}
.c-news-back-button .icon {
display: inline-flex;
align-items: center;
}
/* ---- Übersicht „Aktuelles": Karten-Grid ---- */
.c-news-grid {
align-items: stretch;
}
.c-news-card {
--content-title: var(--palette-charcoal);
display: flex;
flex-direction: column;
height: 100%;
background: var(--muted-gray);
}
/* Masonry-Variante (Bricks natives Masonry-Layout, Div-Control
"_useMasonry"): Karten sollen unterschiedlich hoch bleiben statt
sich auf Zeilenhöhe zu strecken — sonst wirkt das Raster wieder
starr wie das vorherige CSS-Grid. */
.c-news-grid--masonry .c-news-card {
height: auto;
}
/* Bilder behalten ihr natürliches Seitenverhältnis statt des
einheitlichen 1,5:1-Crops — sonst verzerrt/beschneidet das starre
Seitenverhältnis Bilder, die eigentlich zur unterschiedlichen
Kartenhöhe im Masonry-Raster beitragen sollen. */
.c-news-grid--masonry .c-news-card__image {
aspect-ratio: auto;
}
.c-news-grid--masonry .c-news-card__image img {
height: auto;
}
/* An den Preview-Bildern orientiert (500×330 px), gleiches Verhältnis wie
der Startseiten-Newscarousel (_home-news.css). */
.c-news-card__image {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
}
.c-news-card__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.c-news-card__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: var(--gap-2xs);
padding-block: var(--space-xl);
padding-inline: var(--space-l);
}
.c-news-card__title {
margin: 0;
color: var(--content-title);
font-size: var(--heading-xs);
font-style: normal;
font-weight: var(--font-weight-bold);
line-height: var(--line-height-heading);
text-transform: uppercase;
}
.c-news-card__title a {
color: inherit;
text-decoration: none;
word-break: normal;
overflow-wrap: break-word;
hyphens: manual;
}
.c-news-card__title a:hover,
.c-news-card__title a:focus-visible {
color: var(--accent-readable);
}
.c-news-card__excerpt {
margin: 0;
color: var(--fg-80);
font-size: var(--text-s);
line-height: var(--line-height-body);
/* Element ist trotz tag:"p" ein (Bricks' link-Setting), erbt sonst
die site-weite `a { hyphens: none }`-Regel aus _typography.css. */
hyphens: auto;
overflow-wrap: break-word;
}
/* ---- Pressemeldungen-Variante innerhalb des Karten-Rasters
(Aktuelles + generisches Archiv-Template): rundes Bild + Datum/Zeit
statt Vollbild + Kategorie-Badge. Titel/Auszug bleiben dieselben
Elemente wie im Standard-Kartenlayout, werden aber per :has() anders
eingefärbt, sobald die Press-Meta-Zeile im Baum sichtbar ist (Konvention
bereits in _layout.css bei .l-grid--stretch verwendet). ---- */
.c-news-card__press-meta {
display: flex;
align-items: center;
gap: var(--gap-2xs);
margin-bottom: var(--gap-3xs);
}
.c-news-card__press-avatar {
width: 4.8rem;
height: 4.8rem;
flex: 0 0 auto;
overflow: hidden;
border-radius: 50%;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.c-news-card__press-avatar img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.c-news-card__press-date-col {
display: flex;
flex-direction: column;
}
.c-news-card__press-date {
margin: 0;
color: var(--fg-60);
font-size: var(--text-xs);
}
.c-news-card__press-time {
margin: 0;
color: var(--fg-90);
font-size: var(--text-s);
font-weight: var(--font-weight-bold);
}
.c-news-card:has(.c-news-card__press-meta) .c-news-card__title {
color: var(--accent-readable);
font-weight: var(--font-weight-regular);
}
.c-news-card:has(.c-news-card__press-meta) .c-news-card__excerpt {
font-style: italic;
}
/* ---- Redaktionelle Inhaltsbausteine (inc/news-editor.php) ----
Ersetzen bei gepflegten Bausteinen den nativen Fließtext im
Single-Post-Template. Absatz/Zwischenüberschrift nutzen bewusst die
bestehenden Content-Klassen (.c-content__body/.c-content__title) statt
eigener Typografie-Regeln. */
.c-news-blocks {
margin-block: var(--gap-m) var(--gap-l);
}
/* Ruhiger Absatzrhythmus, analog _procedure-detail.css: p+p federt mehrere
Absätze innerhalb eines Bausteins ab (globaler p-Reset in _elements.css
setzt margin sonst auf 0). Der Abstand zwischen den Bausteinen selbst
kommt über die vorhandene Modifier-Klasse l-stack--m im Markup
(inc/news-editor.php), nicht über eine eigene --stack-gap-Regel hier. */
.c-news-blocks .c-content__body p + p {
margin-block-start: var(--gap-2xs);
}
.c-news-block-image {
margin: 0;
}
.c-news-block-image img,
.c-news-block-image video {
display: block;
width: 100%;
height: auto;
}
/* Default-Split (Inhaltstext + Bild-/Galerie-Bausteine, inc/news-editor.php):
Bild(er) behalten bewusst ihr natürliches Seitenverhältnis — kein
erzwungenes object-fit:cover/height:100%. Bei mehreren Bild-/Galerie-
Bausteinen (l-stack als zusätzliche Klasse auf demselben Wrapper wie
l-split__item--bleed) stapeln sie sich einfach in natürlicher Höhe statt
sich eine vorgegebene Spaltenhöhe zu teilen. */
.c-news-block-image__caption {
margin-top: var(--space-2xs);
color: var(--fg-70);
font-size: var(--text-s);
}
/* Hinweis-Ribbon (z. B. "Wir sind dabei!") über der unteren rechten
Bildecke — angelehnt an die Messeankündigungs-Vorlage. Bewusst als
flache Fläche statt mit spitzem Zipfel wie beim
Pressemeldungen-Sprechblasenzipfel in _press.css, da hier kein
Kreisbild-Bezug besteht. */
.c-news-block-image--badge {
position: relative;
}
.c-news-block-image__badge {
position: absolute;
right: var(--space-l);
bottom: var(--space-l);
display: flex;
flex-direction: column;
gap: var(--space-4xs);
max-width: min(80%, 32rem);
padding: var(--space-s) var(--space-l);
background: var(--accent-readable);
color: var(--btn-primary-color);
font-size: var(--text-s);
line-height: var(--line-height-heading);
}
.c-news-block-image__badge strong {
font-size: var(--text-m);
font-weight: var(--font-weight-bold);
/* Die globale Auszeichnungsleiste unter strong (_elements.css) ist für
Fließtext auf hellem Grund gedacht; auf dem farbigen Ribbon wirkt sie
nur wie ein zufälliger Unterstrich. */
box-shadow: none;
}
/* ---- Fakten-Liste (z. B. Ort/Termin/Öffnungszeiten) ---- */
.c-news-facts {
display: flex;
flex-direction: column;
gap: var(--gap-3xs);
margin: 0;
}
.c-news-facts__row {
display: grid;
grid-template-columns: minmax(10rem, 16rem) 1fr;
gap: var(--gap-3xs) var(--gap-2xs);
}
.c-news-facts__row dt {
color: var(--fg);
font-weight: var(--font-weight-semibold);
}
.c-news-facts__row dd {
margin: 0;
color: var(--fg-80);
}
@media (max-width: 767px) {
.c-news-facts__row {
grid-template-columns: 1fr;
}
}
/* ---- Archiv-Template: Seitennummerierung ---- */
.c-news-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.4em;
height: 2.4em;
padding-inline: var(--space-3xs);
color: var(--fg);
box-shadow: inset 0 0 0 1px var(--fg-50);
font-size: var(--text-s);
text-decoration: none;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.c-news-pagination a.page-numbers:hover,
.c-news-pagination a.page-numbers:focus-visible {
background: var(--accent-20);
box-shadow: inset 0 0 0 1px var(--fg);
}
.c-news-pagination .page-numbers.current {
background: var(--accent-readable);
color: var(--btn-primary-color);
box-shadow: none;
}
.c-news-pagination .page-numbers.dots {
box-shadow: none;
}
/* _home-news.css */
/* ==========================================================================
STARTSEITE: NEWS-CAROUSEL
Historische Holder-Bildstrecke, technisch ohne externes Slider-Plugin.
========================================================================== */
.c-home-news .c-content__title {
max-width: none;
}
.c-home-news .c-content__title a {
color: inherit;
text-decoration: none;
}
.c-home-news__carousel {
min-width: 0;
}
.c-home-news__viewport {
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-behavior: smooth;
scroll-snap-type: inline mandatory;
scrollbar-width: none;
}
.c-home-news__viewport::-webkit-scrollbar {
display: none;
}
.c-home-news__viewport:focus-visible {
outline: 2px solid var(--accent-readable);
outline-offset: var(--space-3xs);
}
.c-home-news__track {
display: flex;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.c-home-news__slide {
flex: 0 0 calc(100% / 3);
min-width: 0;
scroll-snap-align: start;
}
.c-home-news-card {
height: 100%;
}
.c-home-news-card__image {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
}
.c-home-news-card__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.c-home-news-card:has(.c-home-news-card__title a:hover) .c-home-news-card__image img,
.c-home-news-card:has(.c-home-news-card__title a:focus-visible) .c-home-news-card__image img {
transform: scale(1.025);
}
.c-home-news-card__body {
padding-block-start: var(--space-xs);
padding-inline-end: var(--space-m);
}
.c-home-news-card__title {
margin: 0;
color: var(--accent-readable);
font-size: var(--heading-xs);
font-weight: var(--font-weight-regular);
letter-spacing: var(--ls-s);
line-height: var(--line-height-heading);
text-transform: uppercase;
}
.c-home-news-card__title a {
color: inherit;
text-decoration: none;
}
.c-home-news-card__title a:hover,
.c-home-news-card__title a:focus-visible {
color: var(--fg);
}
.c-home-news-card__date {
display: block;
margin-block-start: var(--space-4xs);
color: var(--accent-readable);
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-compressed);
text-transform: uppercase;
}
.c-home-news__pagination {
display: flex;
justify-content: center;
gap: var(--gap-xs);
margin-block-start: var(--space-l);
}
.c-home-news__pagination[hidden] {
display: none;
}
.c-home-news__dot {
display: grid;
place-items: center;
inline-size: 2.4rem;
block-size: 2.4rem;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.c-home-news__dot::before {
inline-size: 1.35rem;
block-size: 1.35rem;
border-radius: var(--radius-full);
background: var(--accent-30);
content: "";
transition: background-color 180ms ease, transform 180ms ease;
}
.c-home-news__dot:hover::before,
.c-home-news__dot:focus-visible::before,
.c-home-news__dot.is-active::before {
background: var(--accent-readable);
}
.c-home-news__dot:focus-visible {
outline: 2px solid var(--accent-readable);
outline-offset: var(--space-3xs);
}
.c-home-news__dot.is-active::before {
transform: scale(1.15);
}
@media (max-width: 991px) {
.c-home-news__slide {
flex-basis: 50%;
}
}
@media (max-width: 767px) {
.c-home-news__slide {
flex-basis: 100%;
}
.c-home-news-card__body {
padding-inline-end: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.c-home-news__viewport {
scroll-behavior: auto;
}
.c-home-news-card__image img,
.c-home-news__dot::before {
transition: none;
}
}
/* _service.css */
/* ==========================================================================
KOMPETENZZENTRUM: SERVICE
Seitenspezifisch bleiben nur Kartenfläche und Bildformat; Struktur,
Typografie, Abstände und Tabs stammen vollständig aus dem Framework.
========================================================================== */
.c-service-page__heading-icon {
--icon-size: clamp(3rem, 3vw, 4.8rem);
--icon-stroke-width: 1.7;
}
.c-service-page__cards {
align-items: stretch;
}
.c-service-page__cards .c-service-card {
min-width: 0;
overflow: hidden;
background: var(--surface-muted-light);
}
.c-service-page__cards .c-service-card:nth-child(3n + 2) {
background: color-mix(in srgb, var(--surface-muted-light) 82%, var(--surface-page));
}
.c-service-page__cards .c-service-card:nth-child(3n + 3) {
background: color-mix(in srgb, var(--surface-muted-light) 68%, var(--surface-page));
}
.c-service-card__content {
min-inline-size: 0;
height: 100%;
padding: var(--space-m);
}
.c-service-card__media {
width: 100%;
max-width: 100%;
min-width: 0;
flex: 0 0 auto;
aspect-ratio: 1;
background: var(--surface-page);
}
.c-service-card__media--landscape {
aspect-ratio: 9 / 4;
}
.c-service-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.c-service-page__tabs .c-product-tabs__nav {
gap: var(--gap-2xs);
}
.c-service-page__tabs .c-product-tabs__panel > .c-content__title {
margin-block-end: var(--gap-xs);
}
.c-service-page__tabs .c-product-tabs__panel {
min-height: clamp(16rem, 18vw, 24rem);
padding-inline-start: 0;
}
@media (max-width: 767px) {
.c-service-card__content {
padding: var(--space-s);
}
.c-service-page__tabs .c-product-tabs__nav {
flex-wrap: nowrap;
overflow-x: auto;
padding-block-end: var(--space-3xs);
scroll-snap-type: inline mandatory;
scrollbar-width: thin;
}
.c-service-page__tabs .c-product-tabs__tab {
flex: 0 0 auto;
scroll-snap-align: start;
}
}
@media (prefers-reduced-motion: reduce) {
.c-service-page__tabs .c-product-tabs__nav {
scroll-behavior: auto;
}
}
/* _press.css */
/* ==========================================================================
PRESSEMELDUNGEN (Seite 941, Pfad /aktuelles/pressemeldungen/, plus
Archiv-Template für die Kategorie-Archiv-URL)
Sprechblasen-Liste nach Vorbild der Altseite (thegem-Theme): rundes
Bild + Datum/Uhrzeit links, verbundene Karte mit Titel/Auszug rechts.
Bewusste Ausnahme von der Border-Radius-losen Panel-Konvention — hier
ist die Rundung Teil des gewünschten Wiedererkennungswerts.
========================================================================== */
.c-press-item {
display: flex;
align-items: flex-start;
gap: var(--gap-m);
}
.c-press-item + .c-press-item {
margin-top: var(--gap-l);
}
.c-press-item__meta-col {
display: flex;
flex: 0 0 auto;
flex-direction: column;
align-items: center;
width: 9.6rem;
padding-top: var(--space-3xs);
text-align: center;
}
.c-press-item__avatar {
width: 8.4rem;
height: 8.4rem;
overflow: hidden;
border-radius: 50%;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.c-press-item__avatar img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.c-press-item__date {
margin-top: var(--space-2xs);
color: var(--fg-60);
font-size: var(--text-xs);
}
.c-press-item__time {
color: var(--fg-90);
font-size: var(--text-s);
font-weight: var(--font-weight-bold);
}
.c-press-item__panel {
position: relative;
flex: 1 1 auto;
background: var(--bg-muted);
border-radius: 2.2rem;
padding: var(--space-l) var(--space-xl);
}
.c-press-item__panel::before {
content: "";
position: absolute;
top: 3.4rem;
left: -1rem;
width: 2rem;
height: 2rem;
background: var(--bg-muted);
border-radius: var(--radius-xs);
transform: rotate(45deg);
}
.c-press-item__title {
margin: 0 0 var(--space-2xs);
color: var(--accent-readable);
font-size: var(--heading-s);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-heading);
text-transform: uppercase;
}
.c-press-item__title a {
color: inherit;
text-decoration: none;
}
.c-press-item__title a:hover,
.c-press-item__title a:focus-visible {
color: var(--fg);
}
.c-press-item__excerpt {
margin: 0;
color: var(--fg-70);
font-size: var(--text-s);
font-style: italic;
line-height: var(--line-height-body);
}
@media (max-width: 767px) {
.c-press-item {
gap: var(--gap-s);
}
.c-press-item__meta-col {
width: 7rem;
}
.c-press-item__avatar {
width: 6rem;
height: 6rem;
}
.c-press-item__panel {
padding: var(--space-m) var(--space-l);
}
.c-press-item__panel::before {
top: 2.6rem;
}
}
/* ---- Archiv-Template: Seitennummerierung (identisch zu .c-news-pagination) ---- */
.c-press-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.4em;
height: 2.4em;
padding-inline: var(--space-3xs);
color: var(--fg);
box-shadow: inset 0 0 0 1px var(--fg-50);
font-size: var(--text-s);
text-decoration: none;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.c-press-pagination a.page-numbers:hover,
.c-press-pagination a.page-numbers:focus-visible {
background: var(--accent-20);
box-shadow: inset 0 0 0 1px var(--fg);
}
.c-press-pagination .page-numbers.current {
background: var(--accent-readable);
color: var(--btn-primary-color);
box-shadow: none;
}
.c-press-pagination .page-numbers.dots {
box-shadow: none;
}
/* _certificates.css */
/* ==========================================================================
ZERTIFIKATE — scanbare Downloadmatrix und Verweis auf die Normen
========================================================================== */
.c-certificates__intro {
max-inline-size: var(--content-width-wide);
}
.c-certificates__grid {
align-items: stretch;
}
.c-certificate-card {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(11rem, 1fr);
align-items: center;
gap: var(--gap-s);
min-block-size: 100%;
padding-block: var(--space-s);
}
.c-certificate-card__media {
aspect-ratio: 820 / 630;
background: var(--surface-raised-soft);
}
.c-certificate-card__image,
.c-certificate-card__image img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center top;
}
.c-certificate-card__content {
align-self: stretch;
justify-content: center;
}
.c-certificate-card__title {
color: var(--content-title);
font-size: var(--heading-2xs);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-heading);
}
.c-certificate-card__action {
margin-block-start: auto;
}
@media (max-width: 767px) {
.c-certificate-card {
grid-template-columns: 1fr;
}
.c-certificate-card__content {
align-self: auto;
}
}
/* _cert-mockup.css */
/* ==========================================================================
ZERTIFIKAT-MOCKUP — 3D-Papierstapel-Optik ohne Photoshop
Ersetzt die bisherige manuelle Verzerrung: Eckpunkte wurden aus der
Referenz-PSD (Zertifikat-Vorlage.psd, 820x630) exakt vermessen und die
projektive Transformation (matrix3d) daraus berechnet — nicht geschätzt.
Referenzmaße: Stage 820x630px, Seite 600x848.5px (A4-Verhaeltnis).
Skalierung per JS (assets/js/cert-mockup.js), NICHT per cqw/calc() wie
beim Hero: `transform: scale(calc(100cqw / 820px))` rendert in Chrome
korrekt, bleibt aber in Firefox und Safari bei nativen 820x630 stehen —
`overflow: hidden` am Wrapper schneidet dann den rechten/unteren Teil
der Stage ab (vom User in drei Browsern gegengeprüft, 2026-07-31). Ein
ResizeObserver setzt stattdessen die CSS-Variable --cert-mockup-scale
auf der Wrapper-Breite / 820; die matrix3d-Transformationswerte bleiben
davon unberührt, nur der Skalierungsmechanismus ist ausgetauscht.
Der Papierstapel selbst ist seit 2026-07-31 ein Foto
(assets/images/certificates/zertifikat-papierstapel.jpg), keine drei
CSS-Flaechen mehr. Das Foto wurde exakt auf die Stage 820x630
zugeschnitten. Der --front-Wert wurde dafuer NEU berechnet: Der
urspruengliche, aus der PSD abgeleitete Wert passte geometrisch nicht
auf die oberste Seite dieses Fotos (vom User in Photoshop verifiziert).
Die vier Eckpunkte der obersten Seite wurden vom User pixelgenau in
Photoshop ausgemessen (oben-links 488/9, oben-rechts 807/260,
unten-rechts 328/601, unten-links 13/324) und per Direct Linear
Transform (cv2.findHomography) in die matrix3d-Werte umgerechnet.
========================================================================== */
.c-cert-mockup {
position: relative;
width: 100%;
aspect-ratio: 820 / 630;
overflow: hidden;
}
.c-cert-mockup__stage {
position: absolute;
top: 0;
left: 0;
width: 820px;
height: 630px;
transform: scale(var(--cert-mockup-scale, 1));
transform-origin: top left;
background-image: url('../assets/images/certificates/zertifikat-papierstapel.jpg');
background-size: 820px 630px;
background-repeat: no-repeat;
}
.c-cert-mockup__page {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 848.5px;
transform-origin: 0 0;
}
.c-cert-mockup__page--front {
transform: matrix3d(0.479580, 0.401552, 0, -0.000065, -0.560519, 0.353606, 0, -0.000054, 0, 0, 1, 0, 488, 9, 0, 1);
}
.c-cert-mockup__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* _utilities.css */
/* ==========================================================================
UTILITIES (_utilities.css)
Einzel-Zweck-Klassen — immer mit !important wo nötig
========================================================================== */
/* ==========================================================================
1. TEXT — FARBE
========================================================================== */
.u-text-on-light { color: var(--on-bg-light) !important; }
.u-text-on-dark { color: var(--on-bg-dark) !important; }
.u-text-blue { color: var(--palette-blue) !important; }
.u-text-dark-blue { color: var(--palette-dark-blue) !important; }
/* Theme-fest: der Klassenname ist die Zusage. Wer sich mitdrehen soll,
nimmt .u-text-on-light / .u-text-on-dark oder gleich --fg. */
.u-text-white { color: var(--palette-white) !important; }
.u-text-black { color: var(--palette-black) !important; }
/* ==========================================================================
2. TEXT — MARKENFARBEN
========================================================================== */
.u-icon-blue,
.u-icon-blue::before { color: var(--palette-blue) !important; }
/* ==========================================================================
3. TEXT — TYPOGRAFIE
========================================================================== */
.u-text-uppercase { text-transform: uppercase; }
.u-text-center { text-align: center; }
.u-text-left { text-align: left; }
.u-text-right { text-align: right; }
.u-fw-light { font-weight: var(--font-weight-light) !important; }
.u-fw-regular { font-weight: var(--font-weight-regular) !important; }
.u-fw-medium { font-weight: var(--font-weight-medium) !important; }
.u-fw-semibold { font-weight: var(--font-weight-semibold) !important; }
.u-fw-bold { font-weight: var(--font-weight-bold) !important; }
.u-ls-s { letter-spacing: var(--ls-s); }
.u-ls-m { letter-spacing: var(--ls-m); }
.u-ls-l { letter-spacing: var(--ls-l); }
.u-ls-xl { letter-spacing: var(--ls-xl); }
.u-hyphens-auto {
hyphens: auto !important;
-webkit-hyphens: auto !important;
hyphenate-limit-chars: 6 3 3;
hyphenate-limit-lines: 2;
hyphenate-limit-last: always;
overflow-wrap: break-word;
}
/* ==========================================================================
4. TEXT — PARAGRAPH SPACING & INLINE-EFFEKTE
========================================================================== */
.u-paragraph-spacing p + p {
margin-top: var(--gap-xs);
}
/* Fliesstext mit Zwischentiteln (post_content, Langbeschreibung):
h3 setzt sich vom vorherigen Absatz ab, der Folgeabsatz rueckt an sein h3. */
.u-paragraph-spacing * + h3 {
margin-top: var(--gap-m);
}
.u-paragraph-spacing h3 + p {
margin-top: var(--gap-2xs);
}
/* wpautop hinterlaesst leere Absaetze am Blockende */
.u-paragraph-spacing p:empty {
display: none;
}
.u-paragraph-spacing strong {
font-weight: var(--font-weight-semibold);
padding: 0.05em 0.25em;
border-radius: var(--radius-s);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.u-link-inline a {
font-weight: var(--font-weight-semibold) !important;
color: inherit !important;
text-decoration: none !important;
box-shadow: 0 calc(-1 * var(--text-highlight-thickness)) 0 var(--text-highlight) inset;
transition: box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
}
.u-link-inline a:hover {
box-shadow: 0 -0.4em 0 var(--text-highlight) inset;
}
/* ==========================================================================
5. TEXT — TRUNCATION
========================================================================== */
[class*="u-line-clamp-"] {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.u-line-clamp-3 { -webkit-line-clamp: 3; }
.u-line-clamp-5 { -webkit-line-clamp: 5; }
.u-line-clamp-8 { -webkit-line-clamp: 8; }
/* ==========================================================================
6. SICHTBARKEIT & DISPLAY
========================================================================== */
.u-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.u-hidden { display: none !important; }
.u-visible { visibility: visible !important; }
/* ==========================================================================
7. HINTERGRÜNDE
========================================================================== */
.u-bg-dark { background: var(--bg-dark) !important; }
.u-bg-light { --fg: var(--palette-black); background: var(--bg-light) !important; color: var(--fg); }
.u-bg-muted { --fg: var(--palette-black); background: var(--bg-muted) !important; color: var(--fg); }
.u-bg-accent { background: var(--bg-accent) !important; }
/* ==========================================================================
8. SPACING — MARGIN
========================================================================== */
.u-mt-0 { margin-top: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-mt-3xs { margin-top: var(--gap-3xs) !important; }
.u-mb-3xs { margin-bottom: var(--gap-3xs) !important; }
.u-mt-2xs { margin-top: var(--gap-2xs) !important; }
.u-mb-2xs { margin-bottom: var(--gap-2xs) !important; }
.u-mt-xs { margin-top: var(--gap-xs) !important; }
.u-mb-xs { margin-bottom: var(--gap-xs) !important; }
.u-mt-s { margin-top: var(--gap-s) !important; }
.u-mb-s { margin-bottom: var(--gap-s) !important; }
.u-mt-m { margin-top: var(--gap-m) !important; }
.u-mb-m { margin-bottom: var(--gap-m) !important; }
.u-mt-l { margin-top: var(--gap-l) !important; }
.u-mb-l { margin-bottom: var(--gap-l) !important; }
.u-mt-xl { margin-top: var(--gap-xl) !important; }
.u-mb-xl { margin-bottom: var(--gap-xl) !important; }
.u-mt-2xl { margin-top: var(--gap-2xl) !important; }
.u-mb-2xl { margin-bottom: var(--gap-2xl) !important; }
.u-mt-3xl { margin-top: var(--gap-3xl) !important; }
.u-mb-3xl { margin-bottom: var(--gap-3xl) !important; }
/* ==========================================================================
9. SPACING — PADDING (Section Scale)
========================================================================== */
.u-pt-none { padding-top: 0 !important; }
.u-pb-none { padding-bottom: 0 !important; }
.u-pi-start-none { padding-inline-start: 0 !important; }
.u-pi-end-none { padding-inline-end: 0 !important; }
.u-pi-none { padding-inline: 0 !important; }
.u-pt-xs { padding-top: var(--section-padding-top-xs) !important; }
.u-pb-xs { padding-bottom: var(--section-padding-bottom-xs) !important; }
.u-pt-s { padding-top: var(--section-padding-top-s) !important; }
.u-pb-s { padding-bottom: var(--section-padding-bottom-s) !important; }
.u-pt-m { padding-top: var(--section-padding-top-m) !important; }
.u-pb-m { padding-bottom: var(--section-padding-bottom-m) !important; }
.u-pt-l { padding-top: var(--section-padding-top-l) !important; }
.u-pb-l { padding-bottom: var(--section-padding-bottom-l) !important; }
.u-pt-xl { padding-top: var(--section-padding-top-xl) !important; }
.u-pb-xl { padding-bottom: var(--section-padding-bottom-xl) !important; }
.u-pi-start-xs { padding-inline-start: var(--section-padding-top-xs) !important; }
.u-pi-end-xs { padding-inline-end: var(--section-padding-top-xs) !important; }
.u-pi-start-s { padding-inline-start: var(--section-padding-top-s) !important; }
.u-pi-end-s { padding-inline-end: var(--section-padding-top-s) !important; }
.u-pi-start-m { padding-inline-start: var(--section-padding-top-m) !important; }
.u-pi-end-m { padding-inline-end: var(--section-padding-top-m) !important; }
.u-pi-start-l { padding-inline-start: var(--section-padding-top-l) !important; }
.u-pi-end-l { padding-inline-end: var(--section-padding-top-l) !important; }
.u-pi-start-xl { padding-inline-start: var(--section-padding-top-xl) !important; }
.u-pi-end-xl { padding-inline-end: var(--section-padding-top-xl) !important; }
/* ==========================================================================
10. Z-INDEX
========================================================================== */
[class*="u-z-"] {
position: relative;
}
.u-z-base { z-index: var(--z-base); }
.u-z-raised { z-index: var(--z-raised); }
.u-z-overlay { z-index: var(--z-overlay); }
.u-z-fixed { z-index: var(--z-fixed); }
.u-z-modal { z-index: var(--z-modal); }
/* ==========================================================================
11. BREITE & SELBST-AUSRICHTUNG
========================================================================== */
.u-w-full { width: 100% !important; }
.u-w-screen {
width: 100vw !important;
max-width: none !important;
height: auto !important;
margin-inline: calc(50% - 50vw) !important;
}
.u-w-1-4 { width: 25%; }
.u-w-1-3 { width: 33.333%; }
.u-w-1-2 { width: 50%; }
.u-w-3-5 { width: 60%; }
.u-w-2-3 { width: 66.667%; }
.u-w-3-4 { width: 75%; }
.u-text-width-s { max-width: var(--text-width-s); }
.u-text-width-m { max-width: var(--text-width-m); }
.u-text-width-l { max-width: var(--text-width-l); }
.u-text-width-xl { max-width: var(--text-width-xl); }
.u-self-start { align-self: flex-start; }
.u-self-center { align-self: center; }
.u-self-end { align-self: flex-end; }
/* ==========================================================================
12. ASPECT RATIOS
========================================================================== */
.u-ratio-wide { aspect-ratio: var(--ratio-wide); }
.u-ratio-cinematic { aspect-ratio: var(--ratio-cinematic); }
.u-ratio-panorama { aspect-ratio: var(--ratio-panorama); }
.u-ratio-standard { aspect-ratio: var(--ratio-standard); }
.u-ratio-classic { aspect-ratio: var(--ratio-classic); }
.u-ratio-square { aspect-ratio: var(--ratio-square); }
.u-ratio-portrait { aspect-ratio: var(--ratio-portrait); }
/* ==========================================================================
13. VISIBILITY
========================================================================== */
.u-visually-hidden-trigger {
position: absolute !important;
inline-size: 1px !important;
block-size: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ==========================================================================
14. SECTION SEPARATORS — SCHATTEN
========================================================================== */
.u-sep-shadow-top {
box-shadow: 0 -30px 50px -20px rgb(0 0 0 / 0.75) !important;
z-index: var(--z-raised);
}
.u-sep-shadow-bottom {
box-shadow: 0 30px 50px -20px rgb(0 0 0 / 0.75) !important;
z-index: var(--z-raised);
}
.u-sep-border-top {
border-top: 1px solid var(--fg-10) !important;
}
/* ==========================================================================
15. SECTION SEPARATORS — VERTIEFT (INSET)
========================================================================== */
.u-sep-inset-top {
box-shadow: inset 0 30px 40px -20px rgb(0 0 0 / 0.4) !important;
}
.u-sep-inset-bottom {
box-shadow: inset 0 -30px 40px -20px rgb(0 0 0 / 0.4) !important;
}
.u-sep-inset-both {
box-shadow:
inset 0 30px 40px -20px rgb(0 0 0 / 0.4),
inset 0 -30px 40px -20px rgb(0 0 0 / 0.4) !important;
}
.u-shadow-pop {
box-shadow: 0 20px 50px rgb(0 0 0 / 0.5) !important;
border-top: 1px solid var(--fg-10);
}
/* ==========================================================================
TEXT — GRÖSSEN
========================================================================== */
.u-text-5xl { font-size: var(--heading-5xl) !important; }
.u-text-4xl { font-size: var(--heading-4xl) !important; }
.u-text-3xl { font-size: var(--heading-3xl) !important; }
.u-text-2xl { font-size: var(--heading-2xl) !important; }
.u-text-xl { font-size: var(--heading-xl) !important; }
.u-text-l { font-size: var(--heading-l) !important; }
.u-text-m { font-size: var(--heading-m) !important; }
.u-text-s { font-size: var(--heading-s) !important; }
.u-text-xs { font-size: var(--heading-xs) !important; }
.u-text-2xs { font-size: var(--heading-2xs) !important; }
.u-text-3xs { font-size: var(--heading-3xs) !important; }
/* Body-Schriftgrade (Fliesstext, kleiner als Standard-Body --text-m).
NICHT die Heading-Skala oben verwenden — die skaliert auf Desktop nach oben. */
.u-text-body-s { font-size: var(--text-s) !important; }
.u-text-body-xs { font-size: var(--text-xs) !important; }
.u-text-body-2xs { font-size: var(--text-2xs) !important; }
.u-text-body-3xs { font-size: var(--text-3xs) !important; }
/* _print.css */
/* ==========================================================================
PRINT — Druck-/PDF-Ausgabe
Bewusst OHNE das Token-System: Print ist ein geschlossener Kontext ohne
Zustände, daher klassischer Holzhammer: alles schwarz auf weiß, Chrome
raus, feine graue Linien. Komponentenspezifische Print-Regeln (Karten,
Tabellen) werden ergänzt, sobald die Komponenten existieren.
========================================================================== */
/* Print-only-Inhalte (z. B. Quellzeile) im Screen verstecken */
.u-print-only {
display: none;
}
@media print {
@page {
margin: 14mm;
}
* {
color: #000 !important;
background: #fff !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* Der *-Selektor erfasst KEINE Pseudo-Elemente — dunkle Fonds/Scrims
aus ::before/::after müssen separat weg. */
*::before,
*::after {
background: none !important;
box-shadow: none !important;
}
/* _elements.css setzt die Seitenfonds selbst mit !important + höherer
Spezifität (#brx-content) — der *-Reset verliert dort. Gleiche
Selektoren hier, _print.css lädt zuletzt → gewinnt. */
html,
body,
#brx-content {
background: #fff !important;
}
/* Chrome & Interaktion raus. */
#brx-header,
#brx-footer,
dialog,
video {
display: none !important;
}
#brx-content {
padding-top: 0 !important;
padding-block-end: 0 !important;
}
a {
text-decoration: none !important;
}
.u-print-only {
display: block !important;
margin-block-start: var(--gap-m);
font-size: var(--text-xs);
color: #666 !important;
}
}
/* _procedure-print.css */
/* ==========================================================================
VERFAHRENS-DRUCKANSICHT — eigenstaendige helle HTML-Dokumentansicht
Adaptiert aus breuning-irco-child/css/_print.css, aber ohne Theme-Flip
(Holder ist ohnehin durchgehend hell) und ohne Details-Umbau (native
Bricks-Tabs statt -Akkordeons).
?ausgabe=druck setzt die Body-Klasse .is-procedure-print-view.
Bewusst OHNE das semantische Token-System ergaenzt, wo die Akzentfarbe
fest im Dokument stehen soll (Breuning-Praezedenzfall: Print ist ein
geschlossener Kontext ohne Zustaende).
Der Border-Radius-0-Grundsatz aus AGENTS.md gilt fuer normale Panels;
die Dokumentkarte hier ist bewusster Sonderfall (Print-Kontext), analog
zur bestehenden Ausnahme fuer das Pressemeldungen-Archiv-Template.
========================================================================== */
.u-procedure-print-only {
display: none;
}
html[data-procedure-print-view] {
min-height: 100%;
background: var(--fg-10, #e7ebee);
}
body.is-procedure-print-view {
width: min(210mm, calc(100% - 2rem));
min-height: 297mm;
margin: 1.5rem auto;
color: var(--fg);
background: var(--surface-page);
box-shadow: 0 1.5rem 5rem rgb(24 24 26 / 0.18);
}
body.is-procedure-print-view :is(
#brx-header,
#brx-footer,
.c-hero,
#brxe-hstdsec,
#brxe-pt000n,
#brxe-pt000b,
#brxe-pt000i,
#brxe-pt000g,
#brxe-8ldd69,
#brxe-ntmenu,
dialog,
video
) {
display: none !important;
}
body.is-procedure-print-view .u-procedure-print-only {
display: flex;
}
body.is-procedure-print-view #brx-content {
padding-block-start: 0 !important;
background: var(--surface-page) !important;
}
body.is-procedure-print-view #brx-content > .brxe-section {
padding: 0 16mm 14mm !important;
background: var(--surface-page) !important;
}
/* Die CTA-Sidebar-Spalte wird ausgeblendet, aber ihr Grid-Track bleibt
sonst reserviert (display:none am Kind loest die Track-Definition des
Grid-Containers nicht auf) — Hauptspalte bekommt sonst nur den Rest
neben einer leeren, aber weiterhin reservierten Sidebar-Spalte. */
body.is-procedure-print-view #brxe-pt000j {
display: block !important;
}
body.is-procedure-print-view #brxe-pt000h {
width: 100% !important;
max-width: none !important;
}
/* Ohne Hero fehlt der grosse Seitentitel — die verbleibende Inhalts-
ueberschrift uebernimmt diese Rolle, braucht dafuer aber nicht mehr
die volle Bildschirm-Groesse (63px), die auf der schmalen Dokument-
breite in einzelne Silben umbricht. */
body.is-procedure-print-view #brxe-pt0002 {
font-size: 22pt !important;
}
/* FAQ-Antworten sind normalerweise per Klick aufklappbar (natives
details/summary, [open] treibt die grid-template-rows-Transition in
_faq.css) — im Dokument sollen alle Antworten von Anfang an sichtbar
sein; das Oeffnen selbst erledigt procedure-print.js (details.open =
true). Ohne Interaktionszweck braucht der FAQ-Block ausserdem deutlich
weniger Prominenz als auf der normalen Seite. */
body.is-procedure-print-view #brxe-ntp003 .c-faq__question {
padding-block: 0.25em;
font-size: 10pt;
transition: none;
}
body.is-procedure-print-view #brxe-ntp003 .c-faq__answer {
font-size: 9pt;
transition: none;
}
/* Alle drei Tab-Panels gleichzeitig sichtbar zu machen, unabhaengig davon,
welcher Tab zuletzt aktiv war, erledigt procedure-print.js per Inline-
Style (showAllTabPanels()). Bricks' eigenes Tabs-CSS liegt in einem
benannten @layer und versteckt inaktive Panels per "display:none
!important" — eine ungelayerte Stylesheet-Regel hier kann das unter CSS
Cascade Layers nicht schlagen, egal wie spezifisch sie ist. */
body.is-procedure-print-view #brxe-ntp001::before {
content: "Technische Daten";
display: block;
margin-block-end: 0.5em;
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
}
body.is-procedure-print-view #brxe-ntp002::before {
content: "Einsatzmöglichkeiten";
display: block;
margin-block-end: 0.5em;
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
}
body.is-procedure-print-view #brxe-ntp003::before {
content: "FAQ";
display: block;
margin-block-end: 0.5em;
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
}
body.is-procedure-print-view #brxe-ntp001 + #brxe-ntp002,
body.is-procedure-print-view #brxe-ntp002 + #brxe-ntp003 {
margin-block-start: var(--gap-l, 2rem);
}
.c-procedure-print__masthead {
align-items: flex-end;
justify-content: space-between;
gap: 10mm;
margin: 0 16mm;
padding-block: 12mm 5mm;
border-block-end: 0.25mm solid var(--fg-20, #ccd5da);
}
.c-procedure-print__brand,
.c-procedure-print__logo {
display: block;
width: 56mm;
max-width: 100%;
}
.c-procedure-print__doctype {
color: var(--fg);
font-size: 7.5pt;
font-weight: var(--font-weight-semibold);
letter-spacing: 0.1em;
text-align: end;
text-transform: uppercase;
}
.c-procedure-print__document-footer {
flex-direction: column;
gap: 1mm;
margin: 0 16mm;
padding-block: 5mm 9mm;
color: var(--fg-60, #657078);
border-block-start: 0.25mm solid var(--fg-20, #ccd5da);
font-size: 7.5pt;
line-height: 1.4;
}
.c-procedure-print__document-footer p {
margin: 0;
}
@media print {
@page {
size: A4 portrait;
margin: 12mm 14mm 16mm;
}
/* Print ist ein geschlossener Kontext ohne Zustaende — Holzhammer-Reset
wie bei Breuning, da hier keine Theme-Zustaende zu bewahren sind. */
* {
color: #000 !important;
background: #fff !important;
box-shadow: none !important;
text-shadow: none !important;
}
*::before,
*::after {
background: none !important;
box-shadow: none !important;
}
html[data-procedure-print-view],
html[data-procedure-print-view] body,
body.is-procedure-print-view {
width: auto !important;
min-height: 0 !important;
margin: 0 !important;
background: #fff !important;
box-shadow: none !important;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
a {
color: inherit !important;
text-decoration: none !important;
}
body.is-procedure-print-view .c-procedure-print__doctype {
color: #000 !important;
}
body.is-procedure-print-view :is(#brxe-cpxpl7, #brxe-9hy7np, #brxe-pt000a, #brxe-sqhntu) {
break-inside: avoid-page;
}
body.is-procedure-print-view :is(h2, h3, h4) {
break-after: avoid-page;
}
}