/*
Theme Name: LEX Feinmechanik
Theme URI: https://www.lex-feinmechanik.de
Description: LEX Feinmechanik GmbH – Theme für den ISO-13485-zertifizierten Präzisionsfertiger aus Grabenstätt. Child Theme von Sauriatheme.
Author: Digitalsauria
Author URI: https://digitalsauria.de
Template: sauriatheme
Version: 3.2.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lex
Requires at least: 6.0
Requires PHP: 8.0
*/

/* ==========================================================================
   Self-hosted Webfonts (DSGVO) – siehe assets/css/fonts.css
   ========================================================================== */

/* ==========================================================================
   LEX CI – CSS Custom Properties (Blau + Marine + Stahlgrau)
   Quelle: ci/brand-colors.md — Logo + blaue Hausfarbe
   ========================================================================== */
:root {
    /* Eyebrow-Marker: Sechskantmutter (ersetzt den früheren Schrägstrich) */
    --lex-eyebrow-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M22 12 17 20.66H7L2 12 7 3.34h10L22 12Zm-6.2 0a3.8 3.8 0 1 0-7.6 0 3.8 3.8 0 0 0 7.6 0Z'/%3E%3C/svg%3E");

    /* Primärfarbe – LEX Blau */
    --lex-primary:        #1B5FAA;
    --lex-primary-dark:   #14304D;   /* Marine: Header, Footer, dunkle Bänder */
    --lex-primary-light:  #3D7BC4;
    --lex-primary-rgb:    27, 95, 170;

    /* Sekundärfarbe – Stahlgrau */
    --lex-secondary:      #5E6A75;
    --lex-secondary-dark: #48525C;
    --lex-secondary-light:#93A0AB;
    --lex-secondary-rgb:  94, 106, 117;

    /* CTA-Farbe – LEX Blau (Buttons / Call-to-Actions) */
    --lex-cta:         #1B5FAA;
    --lex-cta-dark:    #134A86;
    --lex-cta-light:   #3D7BC4;
    --lex-cta-rgb:     27, 95, 170;

    /* Aliase (Backwards-Compat) */
    --lex-accent:         var(--lex-cta);
    --lex-accent-dark:    var(--lex-cta-dark);
    --lex-accent-light:   var(--lex-cta-light);

    /* Neutral */
    --lex-white:          #ffffff;
    --lex-gray-50:        #f4f6f9;
    --lex-gray-100:       #eceff4;
    --lex-gray-200:       #e2e6ec;
    --lex-gray-400:       #a5adb8;
    --lex-gray-600:       #5E6A75;
    --lex-gray-800:       #2b3540;
    --lex-black:          #1f2937;

    /* Siemens-Design-Schicht (07/2026): Flächen + Hairlines.
       --lex-deep ist ein abgedunkelter Marine-Ton (Schattierung der CI-Farbe
       #14304D) für Hero-Overlay und Footer-Bottom-Bar. */
    --lex-deep:           #0D2033;
    --lex-line:           #DDE3EA;
    --lex-line-dark:      rgba(255, 255, 255, 0.16);
    --lex-tint:           #E7EEF7;

    /* Typografie */
    --lex-font-heading:   'Inter', sans-serif;
    --lex-font-body:      'Inter', sans-serif;

    /* Spacing */
    --lex-section-gap:    5rem;
    --lex-card-radius:    0;         /* Siemens-Look: flache Geometrie */
    --lex-btn-radius:     0;         /* Buttons: scharfkantig, technisch */

    /* Sauriatheme-Overrides */
    --color-primary:      var(--lex-primary);
    --color-accent:       var(--lex-cta);
    --color-btn-bg:       var(--lex-cta);
    --color-btn-text:     var(--lex-white);
    --color-btn-hover:    var(--lex-cta-dark);
    --btn-radius:         0;
    --button-radius:      0;
    --font-heading:       var(--lex-font-heading);
    --font-body:          var(--lex-font-body);
}

/* ==========================================================================
   GLOBALE OVERRIDES – Buttons (LEX-Blau, 6px Radius)
   (überschreibt Parent-Theme + frühere Definitionen)
   ========================================================================== */
.lex-btn,
.lex-btn--primary,
.lex-btn--outline,
.lex-btn--outline-light,
.lex-btn--lg,
.btn,
.button,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.wp-element-button {
    border-radius: var(--lex-btn-radius, 6px) !important;
}

/* Primary Button (CTA-Standard: LEX-Blau, weiße Schrift — WCAG AA 5.6:1) */
.lex-btn--primary,
.wp-block-button__link,
.wp-element-button {
    background: var(--lex-cta) !important;
    color: var(--lex-white) !important;
    border-color: var(--lex-cta) !important;
    font-weight: 700;
}
.lex-btn--primary:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
    background: var(--lex-cta-dark) !important;
    border-color: var(--lex-cta-dark) !important;
    color: var(--lex-white) !important;
    box-shadow: 0 4px 16px rgba(var(--lex-cta-rgb), 0.35);
}

/* Blue secondary (z. B. Header-Login-Button) */
.lex-btn--blue {
    background: var(--lex-primary);
    color: var(--lex-white);
    border: 2px solid var(--lex-primary);
}
.lex-btn--blue:hover {
    background: var(--lex-primary-dark);
    border-color: var(--lex-primary-dark);
    color: var(--lex-white);
}

/* Dark/Outline (Login Portal) */
.lex-btn--dark {
    background: var(--lex-primary-dark);
    color: var(--lex-white);
    border: 2px solid var(--lex-primary-dark);
}
.lex-btn--dark:hover {
    background: #000;
    border-color: #000;
    color: var(--lex-white);
}

/* Header CTA "Zum lexPortal" – auffälliger, animierter Button */
.lex-header__cta--portal {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.lex-header__cta--portal::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        110deg,
        transparent 0%,
        transparent 35%,
        rgba(27, 95, 170, 0.45) 50%,
        transparent 65%,
        transparent 100%
    );
    background-size: 220% 100%;
    background-position: 120% 0;
    animation: lex-portal-shimmer 3.4s ease-in-out infinite;
    pointer-events: none;
}
.lex-header__cta--portal:hover {
    background: var(--lex-accent);
    border-color: var(--lex-accent);
    color: var(--lex-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(27, 95, 170, 0.45);
    animation: none;
}
.lex-header__cta--portal:hover::before {
    animation: none;
    opacity: 0;
}
.lex-header__cta--portal .lex-header__cta-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    animation: lex-portal-arrow 2.6s ease-in-out infinite;
    transition: transform 0.2s ease;
}
.lex-header__cta--portal:hover .lex-header__cta-icon {
    animation: none;
    transform: translateX(4px);
}

@keyframes lex-portal-shimmer {
    0%   { background-position: 120% 0; }
    60%  { background-position: -60% 0; }
    100% { background-position: -60% 0; }
}
@keyframes lex-portal-arrow {
    0%, 70%, 100% { transform: translateX(0); }
    80%           { transform: translateX(4px); }
    90%           { transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
    .lex-header__cta--portal,
    .lex-header__cta--portal::before,
    .lex-header__cta--portal .lex-header__cta-icon {
        animation: none;
    }
}

/* ==========================================================================
   Basis
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--lex-font-body);
    color: var(--lex-gray-800);
    background: var(--lex-white);
    font-size: 1.125rem;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--lex-font-heading);
    font-weight: 700;
    color: var(--lex-primary);
    line-height: 1.25;
}

a {
    color: var(--lex-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--lex-accent);
}

/* ==========================================================================
   LEX Hero
   ========================================================================== */
.lex-hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--lex-primary) 0%, var(--lex-primary-light) 60%, var(--lex-accent) 100%);
    color: var(--lex-white);
    overflow: hidden;
}

.lex-hero__content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.lex-hero__claim {
    font-family: var(--lex-font-heading);
    font-size: clamp(2rem, 5vw, 3.75rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.lex-hero__claim em {
    font-style: normal;
    color: var(--lex-accent-light);
}

/* Rotierendes Branchen-Wort in der Hero-Headline.
   inline-block (nicht inline), damit transform/filter animierbar sind;
   max-width erlaubt internen Umbruch auf schmalen Viewports. Der Wechsel
   läuft sequenziell (aus → Text tauschen → ein), es sind nie zwei Wörter
   gleichzeitig sichtbar — dadurch braucht es weder absolute Positionierung
   noch Breiten-Management. */
.lex-rotator {
    display: inline-block;
    max-width: 100%;
    color: var(--lex-accent-light);
    will-change: transform, opacity, filter;
}

.lex-rotator.is-out {
    animation: lex-rotator-out 0.38s cubic-bezier(0.55, 0, 0.85, 0.4) forwards;
}

.lex-rotator.is-in {
    animation: lex-rotator-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes lex-rotator-out {
    to {
        opacity: 0;
        transform: translateY(-0.45em);
        filter: blur(10px);
    }
}

@keyframes lex-rotator-in {
    from {
        opacity: 0;
        transform: translateY(0.5em);
        filter: blur(10px);
    }
    to {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }
}

/* Nutzer mit reduzierter Bewegung: JS pausiert die Rotation (Media-Query
   wird dort geprüft) — falls doch getauscht wird, ohne Bewegung/Blur. */
@media (prefers-reduced-motion: reduce) {
    .lex-rotator.is-out,
    .lex-rotator.is-in {
        animation: none;
    }
}

.lex-hero__sub {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 2.5rem;
    max-width: 600px;
}

.lex-hero-voices {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 1rem;
    margin-top: 2.5rem;
    max-width: 48rem;
}

.lex-hero-voices__shell {
    display: grid;
    gap: 1rem;
}

.lex-hero-voices__avatars {
    overflow: hidden;
    padding: 0.25rem 0;
}

.lex-hero-voices__avatars-track {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: max-content;
    min-width: 100%;
}

.lex-hero-voices__avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(18px);
    box-shadow: 0 0.9rem 2rem rgba(10, 20, 36, 0.18);
    color: var(--lex-white);
    cursor: default;
    overflow: hidden;
    transition: transform 0.28s ease, border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
}

.lex-hero-voices__avatar.is-active {
    transform: translateY(-0.18rem) scale(1.04);
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 1rem 2.2rem rgba(10, 20, 36, 0.28);
}

.lex-hero-voices__avatar img,
.lex-hero-voices__avatar-fallback {
    width: 100%;
    height: 100%;
    border-radius: 999px;
}

.lex-hero-voices__avatar img {
    object-fit: cover;
}

.lex-hero-voices__avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lex-font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
}

.lex-hero-voices__panels {
    position: relative;
    min-height: 12rem;
}

.lex-hero-voices__panel {
    display: grid;
    gap: 1rem;
    padding: 1.5rem 1.6rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.75rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.1));
    backdrop-filter: blur(24px);
    box-shadow: 0 1.2rem 2.6rem rgba(9, 19, 34, 0.22);
    color: var(--lex-white);
}

.lex-hero-voices__panel.is-active {
    animation: lexHeroVoicesIn 0.3s ease;
}

.lex-hero-voices__panel-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.lex-hero-voices__person {
    display: grid;
    gap: 0.35rem;
}

.lex-hero-voices__meta-row {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.lex-hero-voices__person strong {
    font-family: var(--lex-font-heading);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lex-hero-voices__person span {
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.72);
}

.lex-hero-voices__google,
.lex-reviews-band__google {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.lex-hero-voices__google__icon,
.lex-reviews-band__google__icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
}

.lex-reviews-band__google__wordmark {
    font-family: var(--lex-font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lex-hero-voices__stars {
    display: flex;
    gap: 0.16rem;
    padding-top: 0.1rem;
}

.lex-hero-voices__star {
    color: rgba(255, 255, 255, 0.28);
    font-size: 0.95rem;
}

.lex-hero-voices__star.is-filled {
    color: rgba(255, 255, 255, 0.92);
}

.lex-hero-voices__quote {
    margin: 0;
    font-size: 1rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.94);
}

@keyframes lexHeroVoicesIn {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 992px) {
    .lex-hero-voices__shell {
        grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
        align-items: center;
        gap: 1.5rem;
    }

    .lex-hero-voices__avatars {
        max-width: 18rem;
    }
}

@media (max-width: 767px) {
    .lex-hero-voices {
        margin-top: 2rem;
    }

    .lex-hero-voices__avatar {
        width: 3.1rem;
        height: 3.1rem;
    }

    .lex-hero-voices__panel {
        padding: 1.25rem 1.15rem;
        border-radius: 1.35rem;
    }

    .lex-hero-voices__panel-head {
        flex-direction: column;
    }

    .lex-hero-voices__quote {
        font-size: 0.96rem;
        line-height: 1.65;
    }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.lex-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    border-radius: 0.375rem;
    font-family: var(--lex-font-heading);
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    text-decoration: none;
}

.lex-btn--primary {
    background: var(--lex-accent);
    color: var(--lex-white);
    border-color: var(--lex-accent);
}

.lex-btn--primary:hover {
    background: var(--lex-accent-dark);
    border-color: var(--lex-accent-dark);
    color: var(--lex-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(196, 153, 42, 0.35);
}

.lex-btn--outline {
    background: transparent;
    color: var(--lex-white);
    border-color: rgba(255, 255, 255, 0.6);
}

.lex-btn--outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--lex-white);
    color: var(--lex-white);
}

/* ==========================================================================
   Team Grid (lex_team CPT)
   ========================================================================== */
.lex-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 2rem;
    padding: 0;
    list-style: none;
}

.lex-team-card {
    background: var(--lex-white);
    border: 1px solid var(--lex-gray-200);
    border-radius: var(--lex-card-radius);
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    text-align: center;
}

.lex-team-card:hover {
    box-shadow: 0 8px 32px rgba(26, 54, 96, 0.12);
    transform: translateY(-4px);
}

.lex-team-card__portrait {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.lex-team-card__portrait-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, var(--lex-primary) 0%, var(--lex-primary-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lex-font-heading);
    font-size: 3rem;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
}

.lex-team-card__body {
    padding: 1.5rem 1.25rem;
}

.lex-team-card__name {
    font-family: var(--lex-font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--lex-primary);
    margin: 0 0 0.25rem;
}

.lex-team-card__role {
    font-size: 1rem;
    color: var(--lex-accent);
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.lex-team-card__bio {
    font-size: 1rem;
    color: var(--lex-gray-600);
    margin: 0 0 1rem;
    line-height: 1.55;
}

.lex-team-card__socials {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.lex-team-card__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--lex-gray-100);
    color: var(--lex-primary);
    font-size: 0.875rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.lex-team-card__social-link:hover {
    background: var(--lex-primary);
    color: var(--lex-white);
}

/* ==========================================================================
   Kanzleiwerte / Philosophie Section
   ========================================================================== */
.lex-values {
    padding: var(--lex-section-gap) 0;
    background: var(--lex-gray-50);
}

.lex-values__label {
    font-family: var(--lex-font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--lex-accent);
    margin-bottom: 1rem;
}

.lex-values__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 900;
    text-transform: uppercase;
    color: var(--lex-primary);
    margin-bottom: 0.5rem;
}

.lex-values__subtitle {
    font-size: 1.375rem;
    font-weight: 500;
    color: var(--lex-primary-light);
    font-style: italic;
    margin-bottom: 2rem;
}

/* ==========================================================================
   Leistungen Cards
   ========================================================================== */
.lex-leistungen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.lex-leistung-card {
    background: var(--lex-white);
    border-left: 4px solid var(--lex-accent);
    border-radius: var(--lex-card-radius);
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(26, 54, 96, 0.06);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.lex-leistung-card:hover {
    box-shadow: 0 6px 24px rgba(26, 54, 96, 0.12);
    border-left-color: var(--lex-primary);
}

.lex-leistung-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--lex-primary);
    margin-bottom: 0.75rem;
}

.lex-leistung-card__text {
    font-size: 1.125rem;
    color: var(--lex-gray-600);
    line-height: 1.6;
}

/* ==========================================================================
   Kontakt / CTA-Banner
   ========================================================================== */
.lex-cta-banner {
    background: linear-gradient(135deg, var(--lex-primary) 0%, var(--lex-primary-light) 100%);
    color: var(--lex-white);
    padding: 4rem 0;
    text-align: center;
}

.lex-cta-banner__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--lex-white);
    margin-bottom: 1rem;
}

.lex-cta-banner__text {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.lex-footer {
    background: var(--lex-primary-dark);
    color: rgba(255,255,255,0.75);
    padding: 3rem 0 2rem;
    font-size: 1rem;
}

.lex-footer a {
    color: rgba(255,255,255,0.75);
}

.lex-footer a:hover {
    color: var(--lex-accent-light);
}

.lex-footer__company {
    font-family: var(--lex-font-heading);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--lex-white);
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   Layout – Container
   ========================================================================== */
.lex-container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.lex-container--narrow {
    max-width: 800px;
}

/* ==========================================================================
   Sections
   ========================================================================== */
.lex-section {
    padding: var(--lex-section-gap) 0;
}

.lex-section--alt {
    background: var(--lex-gray-50);
}

.lex-section--content {
    padding: 3rem 0;
}

.lex-section__header {
    text-align: center;
    margin-bottom: 3rem;
}

.lex-section__header h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    margin-bottom: 1rem;
}

.lex-section__header p {
    font-size: 1.125rem;
    color: var(--lex-gray-600);
    max-width: 620px;
    margin: 0 auto;
}

.lex-section__eyebrow {
    display: block;
    font-family: var(--lex-font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--lex-accent);
    margin-bottom: 0.75rem;
}

.lex-section__cta {
    text-align: center;
    margin-top: 2.5rem;
}

/* ==========================================================================
   Hero – Vollbild mit Hintergrundfoto
   ========================================================================== */
.lex-hero {
    position: relative;
    min-height: min(92vh, 860px);
    display: flex;
    align-items: center;
    color: var(--lex-white);
    overflow: hidden;
}

.lex-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.lex-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.lex-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        135deg,
        rgba(10, 26, 54, 0.88) 0%,
        rgba(26, 54, 96, 0.72) 60%,
        rgba(26, 54, 96, 0.55) 100%
    );
}

.lex-hero > .lex-container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.lex-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 6rem 0 4rem;
}

.lex-hero__eyebrow {
    display: block;
    font-family: var(--lex-font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lex-accent-light);
    margin-bottom: 1rem;
}

.lex-hero__claim {
    font-family: var(--lex-font-heading);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1.05;
    color: var(--lex-white);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin: 0 0 1.5rem;
}

.lex-hero__claim em {
    font-style: normal;
    color: var(--lex-accent-light);
}

.lex-hero__sub {
    font-size: 1.25rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.88);
    max-width: 540px;
    margin-bottom: 2rem;
}

.lex-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.lex-hero__usps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.lex-hero__usp {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
}

.lex-hero__image {
    display: flex;
    justify-content: flex-end;
}

.lex-hero__image-frame {
    position: relative;
    border-radius: var(--lex-card-radius);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.4);
    max-width: 520px;
    width: 100%;
}

.lex-hero__image-frame::before {
    content: '';
    position: absolute;
    top: -0.75rem;
    left: -0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    border: 3px solid var(--lex-accent);
    border-radius: var(--lex-card-radius);
    z-index: -1;
}

.lex-hero__image-frame img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.lex-hero__scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lex-hero__scroll-line {
    display: block;
    width: 2px;
    height: 48px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%, transparent 100%);
    animation: lex-scroll-bounce 1.8s ease-in-out infinite;
}

@keyframes lex-scroll-bounce {
    0%, 100% { transform: scaleY(1); opacity: 0.7; }
    50%       { transform: scaleY(0.6); opacity: 0.3; }
}

/* ==========================================================================
   Philosophie / Kanzleiwerte
   ========================================================================== */
.lex-philosophy__quote {
    font-family: var(--lex-font-heading);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 700;
    font-style: italic;
    color: var(--lex-primary);
    border-left: 4px solid var(--lex-accent);
    padding: 1.25rem 2rem;
    margin: 0 0 1.5rem;
    background: var(--lex-gray-50);
    border-radius: 0 var(--lex-card-radius) var(--lex-card-radius) 0;
}

.lex-philosophy__divider {
    width: 4rem;
    height: 3px;
    background: var(--lex-accent);
    border-radius: 2px;
    margin: 0 0 1.5rem;
}

.lex-philosophy__text {
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--lex-gray-800);
    margin-bottom: 1.25rem;
}

/* ==========================================================================
   Leistungen – Icon & Link
   ========================================================================== */
.lex-leistung-card h3 {
    font-size: 1.25rem;
    color: var(--lex-primary);
    margin: 0 0 0.75rem;
}

.lex-leistung-card p {
    font-size: 1.125rem;
    color: var(--lex-gray-600);
    margin-bottom: 1.25rem;
}

.lex-leistung-card__icon {
    width: 3rem;
    height: 3rem;
    background: rgba(196, 153, 42, 0.12);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    color: var(--lex-accent);
}

.lex-leistung-card__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.lex-leistung-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--lex-font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--lex-primary);
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: gap 0.2s ease, color 0.2s ease;
}

.lex-leistung-card__link svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
}

.lex-leistung-card__link:hover {
    color: var(--lex-accent);
    gap: 0.65rem;
}

.lex-leistung-card__link:hover svg {
    transform: translateX(3px);
}

/* ==========================================================================
   Team – Gruppenphoto + Overlay
   ========================================================================== */
.lex-team-group-photo {
    margin-bottom: 3rem;
}

.lex-team-photo-frame {
    position: relative;
    border-radius: var(--lex-card-radius);
    overflow: hidden;
    max-height: 480px;
}

.lex-team-group-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lex-team-photo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(10, 26, 54, 0.8) 0%, transparent 100%);
    color: var(--lex-white);
    font-family: var(--lex-font-heading);
    font-weight: 700;
    font-size: 1.125rem;
}

/* ==========================================================================
   CTA-Banner
   ========================================================================== */
.lex-cta-banner {
    background: linear-gradient(135deg, var(--lex-primary-dark) 0%, var(--lex-primary) 60%, var(--lex-primary-light) 100%);
    color: var(--lex-white);
    padding: 5rem 0;
}

.lex-cta-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.lex-cta-banner__text h2 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: var(--lex-white);
    margin-bottom: 0.75rem;
}

.lex-cta-banner__text p {
    font-size: 1.125rem;
    color: rgba(255,255,255,0.85);
    margin: 0;
}

.lex-cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    flex-shrink: 0;
}

/* ==========================================================================
   Buttons – Erweiterungen
   ========================================================================== */
.lex-btn--lg {
    padding: 1rem 2.25rem;
    font-size: 1.0625rem;
}

.lex-btn--outline-light {
    background: transparent;
    color: var(--lex-white);
    border-color: rgba(255,255,255,0.55);
}

.lex-btn--outline-light:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--lex-white);
    color: var(--lex-white);
}

/* ==========================================================================
   Header
   ========================================================================== */
.lex-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--lex-white);
    box-shadow: 0 2px 12px rgba(26, 54, 96, 0.08);
    transition: box-shadow 0.3s ease;
}

.lex-header.is-scrolled {
    box-shadow: 0 4px 24px rgba(26, 54, 96, 0.15);
}

.lex-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 76px;
    gap: 1.5rem;
}

.lex-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.lex-header__logo img {
    height: 36px;
    width: auto;
    display: block;
}

.lex-header__logo-text {
    font-family: var(--lex-font-heading);
    font-weight: 900;
    font-size: 1.375rem;
    color: var(--lex-primary);
    letter-spacing: -0.02em;
}

.lex-header__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.lex-header__phone {
    display: none;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--lex-font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--lex-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.lex-header__phone:hover {
    color: var(--lex-accent);
}

@media (min-width: 1024px) {
    .lex-header__phone {
        display: inline-flex;
    }
}

/* ==========================================================================
   Desktop Navigation
   ========================================================================== */
.lex-nav {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.lex-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.lex-nav__list > li {
    position: relative;
}

.lex-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.875rem;
    font-family: var(--lex-font-heading);
    font-weight: 600;
    font-size: 1rem;
    color: var(--lex-primary);
    text-decoration: none;
    border-radius: 0;
    background: transparent;
    position: relative;
    transition: color 0.15s ease;
    white-space: nowrap;
}

.lex-nav__link::after {
    content: "";
    position: absolute;
    left: 0.875rem;
    right: 0.875rem;
    bottom: 2px;
    height: 3px;
    background: var(--lex-cta);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.2s ease;
}

.lex-nav__link:hover,
.current-menu-item > .lex-nav__link,
.current-menu-ancestor > .lex-nav__link,
.current_page_item > .lex-nav__link {
    background: transparent;
    color: var(--lex-primary);
}

.lex-nav__link:hover::after,
.current-menu-item > .lex-nav__link::after,
.current-menu-ancestor > .lex-nav__link::after,
.current_page_item > .lex-nav__link::after {
    transform: scaleX(1);
}

.lex-nav__chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.lex-nav__item--has-dropdown:hover .lex-nav__chevron {
    transform: rotate(180deg);
}

/* Dropdown */
.lex-nav__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 220px;
    background: var(--lex-white);
    border-radius: var(--lex-card-radius);
    box-shadow: 0 8px 32px rgba(26, 54, 96, 0.14);
    list-style: none;
    padding: 0.5rem;
    margin: 0;
    z-index: 200;
    border-top: 3px solid var(--lex-accent);
}

.lex-nav__dropdown.is-open,
.lex-nav__item--has-dropdown:hover .lex-nav__dropdown {
    display: block;
}

.lex-nav__dropdown-link {
    display: block;
    padding: 0.625rem 1rem;
    font-family: var(--lex-font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--lex-primary);
    text-decoration: none;
    border-radius: 0.375rem;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.lex-nav__dropdown-link:hover {
    background: var(--lex-gray-100);
    color: var(--lex-accent);
}

/* Navigation nur ab Desktop sichtbar */
@media (max-width: 1023px) {
    .lex-nav {
        display: none;
    }
}

/* ==========================================================================
   Hamburger
   ========================================================================== */
.lex-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 40px;
    height: 40px;
    padding: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 0.375rem;
    transition: background 0.15s ease;
}

.lex-hamburger:hover {
    background: var(--lex-gray-100);
}

.lex-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--lex-primary);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

@media (min-width: 900px) {
    .lex-hamburger {
        display: none;
    }
}

/* ==========================================================================
   Mobile Menu Overlay
   ========================================================================== */
.lex-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(10, 26, 54, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lex-mobile-overlay.is-visible {
    display: block;
    opacity: 1;
}

.lex-mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    width: min(380px, 100vw);
    background: var(--lex-white);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.lex-mobile-menu.is-open {
    transform: translateX(0);
}

.lex-mobile-menu__inner {
    padding: 5rem 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 100%;
}

.lex-mobile-menu__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lex-gray-100);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--lex-primary);
    transition: background 0.15s ease;
}

.lex-mobile-menu__close:hover {
    background: var(--lex-gray-200);
}

.lex-mobile-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lex-mobile-nav__list > li {
    border-bottom: 1px solid var(--lex-gray-100);
}

.lex-mobile-nav__list a {
    display: block;
    padding: 1rem 0;
    font-family: var(--lex-font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--lex-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.lex-mobile-nav__list a:hover {
    color: var(--lex-accent);
}

/* Sub-Level im Mobile Menu */
.lex-mobile-nav__list ul {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0 0 0 1rem;
}

.lex-mobile-nav__list ul a {
    font-size: 1rem;
    font-weight: 500;
    padding: 0.5rem 0;
    color: var(--lex-gray-600);
}

.lex-mobile-menu__contact {
    margin-top: auto;
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Body-Lock wenn Menü offen */
body.lex-menu-open {
    overflow: hidden;
}

/* ==========================================================================
   Page – generische Seite
   ========================================================================== */
.lex-main {
    min-height: 50vh;
}

.lex-page {
    padding: 3rem 0 5rem;
}

.lex-page__header {
    margin-bottom: 2.5rem;
    border-bottom: 2px solid var(--lex-gray-100);
    padding-bottom: 1.5rem;
}

.lex-page__title {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 900;
    color: var(--lex-primary);
    margin: 0;
}

.lex-page__content {
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--lex-gray-800);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.lex-footer {
    background: var(--lex-primary-dark);
    color: rgba(255,255,255,0.75);
    font-size: 1rem;
}

.lex-footer__top {
    padding: 4rem 0 3rem;
}

.lex-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2.5rem;
}

.lex-footer__heading {
    font-family: var(--lex-font-heading);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lex-white);
    margin: 0 0 1.25rem;
}

.lex-footer__logo img {
    height: 56px;
    width: auto;
    opacity: 0.9;
    margin-bottom: 0.75rem;
    display: block;
}

.lex-footer__logo-text {
    font-family: var(--lex-font-heading);
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--lex-white);
    display: block;
    margin-bottom: 0.75rem;
}

.lex-footer__tagline {
    font-style: italic;
    color: rgba(255,255,255,0.6);
    margin-bottom: 1.25rem;
    font-size: 1rem;
}

.lex-footer__tagline em {
    font-style: normal;
    color: var(--lex-accent-light);
}

.lex-footer__address {
    font-style: normal;
    color: rgba(255,255,255,0.65);
    line-height: 1.7;
    font-size: 1rem;
}

.lex-footer__contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.lex-footer__contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.75);
}

.lex-footer__contact-list svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: var(--lex-accent-light);
}

.lex-footer__contact-list a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    transition: color 0.2s ease;
}

.lex-footer__contact-list a:hover {
    color: var(--lex-accent-light);
}

.lex-footer__nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lex-footer__nav li a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.2s ease;
}

.lex-footer__nav li a:hover {
    color: var(--lex-accent-light);
}

.lex-footer__social {
    display: flex;
    gap: 0.875rem;
    margin-bottom: 1.5rem;
}

.lex-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.75);
    transition: color 0.2s ease;
}

.lex-footer__social a:hover {
    color: var(--lex-white);
}

.lex-footer__cta {
    display: inline-block;
}

.lex-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 1.25rem 0;
}

.lex-footer__bottom .lex-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.lex-footer__copy {
    margin: 0;
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.5);
}

.lex-footer__legal-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5rem;
}

.lex-footer__legal-nav a {
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: color 0.2s ease;
}

.lex-footer__legal-nav a:hover {
    color: var(--lex-accent-light);
}

.lex-footer__cookie-settings {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
}

.lex-footer__cookie-settings:hover,
.lex-footer__cookie-settings:focus-visible {
    color: var(--lex-accent-light);
    outline: none;
}

.lex-footer__cookie-settings:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .lex-hero__grid {
        grid-template-columns: 1fr;
        padding: 5rem 0 3rem;
    }

    .lex-hero__image {
        display: none;
    }

    .lex-cta-banner__inner {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .lex-team-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1.25rem;
    }

    .lex-leistungen-grid {
        grid-template-columns: 1fr;
    }

    .lex-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .lex-hero__usps {
        gap: 0.875rem;
    }
}

@media (max-width: 480px) {
    .lex-footer__grid {
        grid-template-columns: 1fr;
    }

    .lex-footer__bottom .lex-container {
        flex-direction: column;
        text-align: center;
    }

    .lex-footer__legal-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
}

/* ==========================================================================
   FRONT-PAGE 2026 – neue Sektionen
   ========================================================================== */

body { font-family: var(--lex-font-body); font-weight: 400; }
h1, h2, h3, h4 { font-family: var(--lex-font-heading); font-weight: 800; color: var(--lex-primary); letter-spacing: -0.01em; }

.lex-container { max-width: 1240px; margin: 0 auto; padding: 0 1.25rem; }
.lex-section   { padding: var(--lex-section-gap) 0; }
.lex-section--alt { background: var(--lex-gray-100, #F1F3F5); }

/* ---------- HEADER ---------- */
.lex-header { background: rgba(255,255,255,0.85); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid transparent; position: sticky; top: 0; z-index: 100; transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.lex-header.is-scrolled { background: rgba(255,255,255,0.92); border-bottom-color: var(--lex-gray-200); box-shadow: 0 4px 18px rgba(0,0,0,0.06); }
.lex-header__inner { max-width: 1400px; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 2rem; }
.lex-header__logo img { height: 36px; width: auto; display: block; }
.lex-nav { flex: 1; }
.lex-nav__list { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; justify-content: center; }
.lex-nav__list a { color: var(--lex-primary); font-weight: 600; text-decoration: none; padding: .5rem .25rem; font-size: 1rem; }
.lex-nav__list a:hover { color: var(--lex-cta-dark); }
.lex-header__actions { display: flex; align-items: center; gap: .5rem; }
.lex-header__cta { padding: .55rem 1.1rem !important; font-size: .9rem !important; text-transform: none !important; letter-spacing: 0 !important; }
.lex-header__a11y { background: var(--lex-primary); color: #fff; border: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.lex-header__a11y:hover { background: var(--lex-primary-dark); }

@media (max-width: 1024px) {
    .lex-nav { display: none; }
    .lex-header__cta { display: none; }
}

/* ---------- HERO ---------- */
.lex-hero { position: relative; min-height: 540px; display: flex; align-items: center; color: #fff; overflow: hidden; }
.lex-hero__bg { position: absolute; inset: 0; z-index: 0; }
.lex-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.lex-hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,30,56,0.65) 0%, rgba(40,85,137,0.45) 60%, rgba(40,85,137,0.25) 100%); z-index: 1; }
.lex-hero .lex-container { position: relative; z-index: 2; padding-top: 6rem; padding-bottom: 6rem; }
.lex-hero__brand-mark {
    position: absolute;
    left: clamp(1.5rem, 5vw, 4.5rem);
    top: 56%;
    transform: translateY(-50%);
    z-index: 2;
    width: clamp(360px, 44vw, 620px);
    pointer-events: none;
}
.lex-hero__brand-mark-image {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.2));
}
.lex-hero__content { max-width: 720px; margin-left: auto; }
.lex-hero__eyebrow { display: block; font-weight: 600; letter-spacing: .05em; margin-bottom: 1rem; color: #fff; opacity: .9; font-size: 1.125rem; }
.lex-hero__claim { font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 800; color: #fff; line-height: 1.1; margin: 0 0 1.5rem; text-transform: uppercase; }
.lex-hero__sub { font-size: 1.125rem; line-height: 1.6; margin: 0 0 2rem; max-width: 640px; }

@media (max-width: 1180px) {
    .lex-hero__brand-mark {
        left: 1rem;
        width: 340px;
    }
}

@media (max-width: 860px) {
    .lex-hero__brand-mark { display: none; }
}

/* ---------- SPLIT SECTIONS ---------- */
.lex-split__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.lex-split--reverse .lex-split__grid { /* layout via DOM order */ }
.lex-split__media { aspect-ratio: 3/4; overflow: hidden; }
.lex-split__media img { width: 100%; height: 100%; object-fit: cover; object-position: 34% top; display: block; }
.lex-split__media-placeholder { width: 100%; height: 100%; background: var(--lex-gray-200); }
.lex-split__headline { font-size: clamp(1.75rem, 2.8vw, 2.4rem); margin: 0 0 1.5rem; text-transform: uppercase; }
.lex-split__sub-h { font-weight: 600; color: var(--lex-primary-light); display: inline-block; margin-top: .25rem; }
.lex-split__text { color: var(--lex-gray-800); font-size: 1.0625rem; line-height: 1.7; }
.lex-split__text p + p { margin-top: 1rem; }
.lex-split__quote {
    margin: 1.5rem 0 0;
    padding: 1.25rem 1.5rem;
    background: rgba(27, 95, 170, 0.08);
    border-left: 4px solid var(--lex-blue, #1B5FAA);
    color: var(--lex-blue, #1B5FAA);
    font-style: italic;
    font-size: 1.125rem;
    line-height: 1.6;
}
.lex-split__actions { margin-top: 2rem; }
@media (max-width: 900px) {
    .lex-split__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- BRANCHEN-GRID ---------- */
.lex-branchen-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 2rem; align-items: stretch; }
@media (max-width: 900px) { .lex-branchen-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (max-width: 600px) { .lex-branchen-grid { grid-template-columns: 1fr; } }
.lex-branche-card { background: #fff; border: 1px solid var(--lex-gray-200); padding: 2.5rem 2.25rem; transition: box-shadow .2s ease, transform .2s ease; display: flex; flex-direction: column; height: 100%; min-height: 18rem; }
.lex-branche-card:hover { box-shadow: 0 8px 24px rgba(40,85,137,0.12); transform: translateY(-2px); }
.lex-branche-card__title { color: var(--lex-primary); font-size: 1.5rem; margin: 0 0 1rem; text-transform: uppercase; font-weight: 800; line-height: 1.25; }
.lex-branche-card__excerpt { color: var(--lex-gray-800); font-size: 1.125rem; line-height: 1.6; margin: 0 0 1.25rem; flex: 1 1 auto; }
.lex-branche-card__link { color: var(--lex-cta-dark); font-weight: 700; text-decoration: none; font-size: 1.0625rem; margin-top: auto; align-self: flex-start; }
.lex-branche-card__link:hover { color: var(--lex-primary); }

/* ---------- JOBS ---------- */
.lex-jobs { overflow: visible; }
.lex-jobs__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center; }
.lex-jobs__media { margin-top: -5rem; margin-bottom: -5rem; }
.lex-jobs__media img { width: 100%; height: auto; display: block; box-shadow: 0 12px 48px rgba(0,0,0,0.14); }
.lex-jobs__content h2 { text-transform: uppercase; font-size: 2rem; margin: 0 0 1rem; color: var(--lex-primary); font-weight: 800; }
.lex-jobs__content p { font-size: 1.125rem; line-height: 1.7; margin: 0 0 1.75rem; color: var(--lex-gray-800); }
@media (max-width: 900px) {
    .lex-jobs__grid { grid-template-columns: 1fr; gap: 2rem; }
    /* Mobile: kein negatives Bottom — sonst rutscht die Headline
       "JOBS / AUSBILDUNG" optisch in das Bild hinein. */
    .lex-jobs__media { margin-top: 0; margin-bottom: 0; }
}

/* ---------- NEWS-CARDS ---------- */
.lex-news__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
@media (max-width: 800px) { .lex-news__grid { grid-template-columns: 1fr; } }
.lex-news-card {
    color: #fff;
    min-height: 326px;
    padding: 2.2rem;
    border-radius: 0;
    overflow: hidden;
    background-color: var(--lex-primary);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: stretch;
    box-shadow: 0 22px 48px rgba(8, 30, 61, 0.14);
}
.lex-news-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    height: 100%;
    width: min(100%, 22rem);
}
.lex-news-card__content {
    display: grid;
    gap: 1rem;
    padding: 1.2rem 1.25rem 1.3rem;
    background: linear-gradient(180deg, rgba(8, 30, 61, 0.62) 0%, rgba(8, 30, 61, 0.38) 100%);
    box-shadow: 0 16px 36px rgba(8, 30, 61, 0.18);
    backdrop-filter: blur(3px);
}
.lex-news-card__title {
    color: #fff !important;
    font-size: clamp(2rem, 3vw, 2.5rem);
    line-height: 1.08;
    margin: 0;
    text-transform: none;
    letter-spacing: -0.03em;
    text-shadow: 0 4px 18px rgba(8, 30, 61, 0.28);
}
.lex-news-card__sub {
    color: rgba(255, 255, 255, 0.98) !important;
    font-size: 1.125rem;
    line-height: 1.65;
    margin: 0;
    max-width: 17rem;
    text-shadow: 0 4px 18px rgba(8, 30, 61, 0.24);
}
.lex-news-card__cta {
    margin-top: auto;
    min-width: 13.5rem;
    justify-content: center;
    padding: .9rem 1.75rem !important;
    font-size: 1.125rem !important;
    box-shadow: 0 12px 24px rgba(255, 170, 0, 0.22);
}
@media (max-width: 800px) {
    .lex-news-card {
        min-height: 360px;
        padding: 1.75rem;
    }

    .lex-news-card__body {
        width: min(100%, 18rem);
    }

    .lex-news-card__title {
        font-size: 2rem;
    }
}

/* ---------- E-COMMERCE / FAQ ---------- */
.lex-faq { list-style: none; padding: 0; margin: 1.5rem 0; border-top: 1px solid var(--lex-gray-200); }
.lex-faq__item { border-bottom: 1px solid var(--lex-gray-200); }
.lex-faq__question { width: 100%; background: transparent; border: none; padding: 1.1rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; font-family: inherit; font-size: 1.0625rem; color: var(--lex-primary); font-weight: 600; text-align: left; }
.lex-faq__question svg { transition: transform .2s ease; flex-shrink: 0; color: var(--lex-cta-dark); }
.lex-faq__question[aria-expanded="true"] svg { transform: rotate(180deg); }
.lex-faq__answer { padding: 0 0 1.1rem; color: var(--lex-gray-800); font-size: 1rem; line-height: 1.65; }

/* ---------- REVIEWS BAND ---------- */
.lex-reviews-band {
    position: relative;
    padding: 2rem 0 1.5rem;
    background:
    radial-gradient(circle at top right, rgba(var(--lex-primary-rgb), 0.1), transparent 28%),
        linear-gradient(180deg, #fff 0%, var(--lex-gray-50) 58%, #f7f8fa 100%);
}

.lex-reviews-band__header {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.lex-reviews-band__eyebrow {
    display: block;
    margin: 0 0 0.5rem;
    font-family: var(--lex-font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lex-cta-dark);
}

.lex-reviews-band__title {
    margin: 0;
    font-size: clamp(1.9rem, 3vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--lex-primary);
}

.lex-reviews-band__sub {
    max-width: 44rem;
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    color: var(--lex-gray-600);
}

.lex-reviews-band__summary {
    display: inline-grid;
    gap: 0.1rem;
    width: fit-content;
    padding: 0.55rem 0.85rem;
    background: var(--lex-white);
    border: 1px solid rgba(var(--lex-primary-rgb), 0.12);
    border-left: 0.25rem solid var(--lex-primary-light);
    box-shadow: 0 0.5rem 1.2rem rgba(27, 63, 105, 0.06);
}

.lex-reviews-band__summary-label {
    font-family: var(--lex-font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lex-cta-dark);
}

.lex-reviews-band__score {
    font-family: var(--lex-font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--lex-primary);
}

.lex-reviews-band__summary-stars,
.lex-reviews-band__stars {
    letter-spacing: 0.12em;
}

.lex-reviews-band__summary-stars {
    color: var(--lex-primary);
    font-size: 0.9rem;
}

.lex-reviews-band__summary-count {
    color: var(--lex-gray-600);
    font-size: 0.78rem;
}

.lex-reviews-band__rail {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.lex-reviews-band__rail span {
    height: 0.22rem;
}

.lex-reviews-band__rail span {
    display: block;
    height: 0.3rem;
    background: linear-gradient(90deg, rgba(var(--lex-primary-rgb), 0.95), rgba(var(--lex-secondary-rgb), 0.8));
}

.lex-reviews-band__rail span:nth-child(1) {
    width: 6rem;
}

.lex-reviews-band__rail span:nth-child(2) {
    width: 2.75rem;
    opacity: 0.68;
}

.lex-reviews-band__rail span:nth-child(3) {
    width: 1.4rem;
    opacity: 0.38;
}

.lex-reviews-band__viewport {
    overflow: hidden;
}

.lex-reviews-band__grid {
    display: flex;
    gap: 1rem;
    transition: transform 0.5s ease;
    will-change: transform;
}

.lex-reviews-band__card {
    position: relative;
    display: grid;
    gap: 0.5rem;
    flex: 0 0 100%;
    padding: 0.85rem 1rem 0.85rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(var(--lex-primary-rgb), 0.1);
    border-top: 0.18rem solid rgba(var(--lex-primary-rgb), 0.16);
    box-shadow: 0 0.55rem 1.3rem rgba(27, 63, 105, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
}

.lex-reviews-band__card:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 1.5rem 3rem rgba(27, 63, 105, 0.12);
    border-color: rgba(var(--lex-primary-rgb), 0.18);
}

.lex-reviews-band__card.is-featured {
    background:
        linear-gradient(180deg, rgba(var(--lex-primary-rgb), 0.04), transparent 32%),
        rgba(255, 255, 255, 0.96);
    border-top-color: var(--lex-primary-light);
}

.lex-reviews-band__mark {
    position: absolute;
    top: 0.3rem;
    right: 0.7rem;
    font-family: Georgia, serif;
    font-size: 2.25rem;
    line-height: 1;
    color: rgba(var(--lex-primary-rgb), 0.08);
    pointer-events: none;
}

.lex-reviews-band__card-head,
.lex-reviews-band__person {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.lex-reviews-band__person {
    justify-content: flex-start;
}

.lex-reviews-band__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(var(--lex-primary-rgb), 0.95), rgba(var(--lex-secondary-rgb), 0.92));
    color: var(--lex-white);
    overflow: hidden;
    flex-shrink: 0;
}

.lex-reviews-band__avatar img,
.lex-reviews-band__avatar-fallback {
    width: 100%;
    height: 100%;
    border-radius: 999px;
}

.lex-reviews-band__avatar img {
    object-fit: cover;
}

.lex-reviews-band__avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lex-font-heading);
    font-weight: 700;
}

.lex-reviews-band__person-copy {
    display: grid;
    gap: 0.2rem;
}

.lex-reviews-band__person-copy strong {
    color: var(--lex-primary);
    font-size: 0.88rem;
}

.lex-reviews-band__person-copy span,
.lex-reviews-band__google {
    color: var(--lex-gray-600);
    font-size: 0.76rem;
}

.lex-reviews-band__google {
    justify-self: end;
}

.lex-reviews-band__stars {
    display: inline-flex;
    gap: 0.18rem;
}

.lex-reviews-band__star {
    color: #d5d9dc;
    font-size: 0.9rem;
}

.lex-reviews-band__star.is-filled {
    color: var(--lex-primary-light);
}

.lex-reviews-band__quote {
    margin: 0;
    max-width: 40ch;
    color: var(--lex-gray-800);
    font-size: 0.88rem;
    line-height: 1.45;
}

.lex-reviews-band__link {
    display: inline-flex;
    width: fit-content;
    margin-top: auto;
    font-family: var(--lex-font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lex-reviews-band__link:hover {
    color: var(--lex-primary-light);
}

.lex-reviews-band__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.lex-reviews-band__control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0;
    border: 1px solid rgba(var(--lex-primary-rgb), 0.14);
    background: var(--lex-white);
    color: var(--lex-primary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.lex-reviews-band__control:hover,
.lex-reviews-band__control:focus-visible {
    transform: translateY(-0.1rem);
    border-color: rgba(var(--lex-primary-rgb), 0.28);
    box-shadow: 0 0.75rem 1.4rem rgba(27, 63, 105, 0.08);
}

.lex-reviews-band__status {
    min-width: 3.5rem;
    text-align: center;
    font-family: var(--lex-font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lex-secondary-dark);
}

@media (min-width: 768px) {
    .lex-reviews-band__header {
        grid-template-columns: minmax(0, 1.6fr) auto;
        align-items: end;
    }

    .lex-reviews-band__card {
        flex-basis: calc((100% - 1rem) / 2);
    }
}

@media (min-width: 1100px) {
    .lex-reviews-band__card {
        flex-basis: calc((100% - 2rem) / 3);
    }
}

@media (max-width: 767px) {
    .lex-reviews-band {
        padding: 1.75rem 0 1.25rem;
    }

    .lex-reviews-band__summary {
        width: 100%;
    }

    .lex-reviews-band__card {
        padding: 0.85rem 0.9rem;
    }

    .lex-reviews-band__card-head {
        align-items: flex-start;
    }

    .lex-reviews-band__controls {
        justify-content: space-between;
    }
}

/* ---------- NEWSLETTER ---------- */
.lex-newsletter { background: var(--lex-gray-100); padding: 3rem 0; }
.lex-newsletter__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.lex-newsletter__lead { display: block; font-size: 1.125rem; color: var(--lex-gray-600); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; }
.lex-newsletter__title { font-size: clamp(2.5rem, 5vw, 4rem); color: var(--lex-primary); margin: 0; text-transform: uppercase; }
.lex-newsletter__form { display: flex; gap: .5rem; align-items: stretch; }
.lex-newsletter__form input { flex: 1; padding: .9rem 1rem; border: 1px solid var(--lex-gray-200); font-size: 1.125rem; font-family: inherit; }
.lex-newsletter__form input:focus { outline: 2px solid var(--lex-cta); }
@media (max-width: 800px) {
    .lex-newsletter__grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---------- FOOTER ---------- */
.lex-footer { background: var(--lex-secondary-dark); color: #fff; }
.lex-footer a { color: #fff; }
.lex-footer a:hover { color: var(--lex-gray-100); }
.lex-footer__top { padding: 3rem 0 2rem; }
.lex-footer__grid { display: grid; grid-template-columns: 1.3fr .8fr 1fr 1.2fr; gap: 3rem; align-items: start; }
@media (max-width: 900px) {
    .lex-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
    .lex-footer__awards-grid {
        grid-template-columns: repeat(2, minmax(7rem, 8.5rem));
        justify-content: start;
        gap: .75rem;
    }
}
.lex-footer__heading { font-size: .8rem; color: #fff; opacity: 1; text-transform: uppercase; letter-spacing: .15em; margin: 0 0 1rem; font-weight: 700; }
.lex-footer__social { display: flex; gap: .75rem; margin-bottom: 1.5rem; }
.lex-footer__social a { color: rgba(255,255,255,.75); }
.lex-footer__social a:hover { color: #fff; opacity: 1; }
.lex-footer__logo .custom-logo-link { display: inline-block; line-height: 0; }
.lex-footer__address { font-style: normal; line-height: 1.6; font-size: .95rem; margin: 0 0 1rem; color: rgba(255,255,255,.92); }
.lex-footer__contact { font-size: .9rem; line-height: 1.6; margin: 0; color: rgba(255,255,255,.92); }
.lex-footer__contact a { color: inherit; }
.lex-footer__col--hours { color: #fff; padding: 0; width: 100%; }
@media (max-width: 900px) { .lex-footer__col--hours { max-width: none; } }
.lex-footer__col--hours .lex-footer__heading { color: #fff; opacity: 1; }
.lex-footer__col--hours a { color: #fff; }
.lex-footer__hours { font-size: .95rem; line-height: 1.6; margin: 0; color: rgba(255,255,255,.92); }
.lex-footer__col--hours .lex-footer__social { margin-top: 1rem; margin-bottom: 0; }
.lex-footer__col--awards { padding: 0; width: 100%; }
.lex-footer__col--nav { padding: 0; width: 100%; }
.lex-footer__col--nav .lex-footer__nav li a { color: rgba(255,255,255,.92); font-size: .95rem; }
.lex-footer__col--nav .lex-footer__nav li a:hover { color: var(--lex-gray-100); }
@media (min-width: 901px) { .lex-footer__col--nav, .lex-footer__col--hours, .lex-footer__col--awards { padding-top: 62px; } }
.lex-footer__col--awards .lex-footer__heading { color: #fff; opacity: 1; text-align: right; }
.lex-footer__awards-grid { display: grid; grid-template-columns: repeat(2, minmax(7rem, 8.5rem)); gap: .75rem; align-items: start; justify-content: start; }
@media (min-width: 901px) { .lex-footer__awards-grid { grid-template-columns: repeat(4, 1fr); justify-content: stretch; } }
.lex-footer__award { display: flex; align-items: center; justify-content: center; }
.lex-footer__award img { width: auto; height: auto; max-width: 100%; max-height: 8rem; object-fit: contain; }
.lex-footer__award:first-child img { clip-path: inset(4px); }

/* Zertifikats-Nachweis (Fallback ohne footer_badge-CPT): Siegel + Urkunde + PDF */
.lex-footer__certs { display: flex; flex-wrap: wrap; gap: .75rem; align-items: stretch; justify-content: flex-end; }
.lex-footer__cert-seal { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.lex-footer__cert-seal:hover, .lex-footer__cert-seal:focus-visible { border-color: var(--lex-cta); background: rgba(255,255,255,.12); }
.lex-footer__cert-seal-icon { flex-shrink: 0; color: var(--lex-cta); }
.lex-footer__cert-seal-text { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.lex-footer__cert-seal-line1 { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.lex-footer__cert-seal-line2 { font-size: .92rem; font-weight: 700; color: #fff; }
.lex-footer__cert-thumb { display: block; background: #fff; padding: .25rem; line-height: 0; border: 1px solid rgba(255,255,255,.2); }
.lex-footer__cert-thumb img { display: block; width: auto; height: 100%; max-height: 5.5rem; object-fit: contain; }
.lex-footer__cert-thumb:hover, .lex-footer__cert-thumb:focus-visible { border-color: var(--lex-cta); }
.lex-footer__cert-meta { font-size: .8rem; line-height: 1.55; color: rgba(255,255,255,.85); margin: .75rem 0 .35rem; text-align: right; }
.lex-footer__cert-download { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.lex-footer__cert-download:hover, .lex-footer__cert-download:focus-visible { color: var(--lex-cta); }
.lex-footer__col--awards .lex-footer__cert-download { float: right; }
.lex-footer__col--awards .lex-footer__ai-notice { clear: both; }
@media (max-width: 900px) {
    .lex-footer__certs { justify-content: flex-start; }
    .lex-footer__cert-meta { text-align: left; }
    .lex-footer__col--awards .lex-footer__cert-download { float: none; }
}
.lex-footer__ai-notice { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.18); color: #ffffff; text-align: right; outline: none; }
.lex-footer__ai-notice-heading { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: #ffffff; margin: 0 0 .5rem; }
.lex-footer__ai-notice-text { font-size: .8rem; line-height: 1.55; margin: 0 0 .5rem; }
.lex-footer__ai-notice-text:last-child { margin-bottom: 0; }
.lex-footer__ai-notice-link { color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.lex-footer__ai-notice-link:hover, .lex-footer__ai-notice-link:focus-visible { color: var(--lex-cta); }
.lex-footer__ai-notice:target, .lex-footer__ai-notice.is-highlight { box-shadow: 0 0 0 2px var(--lex-cta); transition: box-shadow .3s ease; }
@media (max-width: 900px) { .lex-footer__ai-notice { text-align: left; } }

.lex-header__ai-link { display: inline-flex; align-items: center; gap: .35rem; margin-left: 1rem; padding: .25rem .55rem; font-size: .8rem; font-weight: 600; line-height: 1.2; color: var(--lex-gray, #5f6461); border: 1px solid currentColor; border-radius: 999px; text-decoration: none; transition: color .15s ease, border-color .15s ease, background .15s ease; white-space: nowrap; }
.lex-header__ai-link:hover, .lex-header__ai-link:focus-visible { color: var(--lex-primary, #1B5FAA); background: rgba(40,85,137,.06); }
.lex-header__ai-link-icon { flex-shrink: 0; }
.home .lex-header__ai-link { color: rgba(255,255,255,.9); }
.home .lex-header__ai-link:hover, .home .lex-header__ai-link:focus-visible { color: #fff; background: rgba(255,255,255,.12); }
@media (max-width: 1100px) { .lex-header__ai-link span { display: none; } .lex-header__ai-link { padding: .35rem; } }
@media (max-width: 900px) { .lex-header__ai-link { display: none; } }

.lex-footer__bottom { background: #5f6461; padding: 1rem 0; font-size: .85rem; }
.lex-footer__bottom .lex-container { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; flex-wrap: wrap; }
.lex-footer__legal-nav { display: flex; gap: 1.25rem; list-style: none; padding: 0; margin: 0; }

/* ---------- FLOATING CONTACT BAR ---------- */
.lex-floatbar { position: fixed; right: 1rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: .5rem; z-index: 99; }
.lex-floatbar__item,
button.lex-floatbar__item { width: 44px !important; height: 44px !important; padding: 0 !important; margin: 0 !important; background: var(--lex-primary) !important; color: #fff !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; display: inline-flex !important; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; position: relative; transition: background .15s ease; font: inherit; line-height: 1; appearance: none; -webkit-appearance: none; }
.lex-floatbar__item svg { width: 22px; height: 22px; display: block; }
.lex-floatbar__item:hover, .lex-floatbar__item.is-open { background: var(--lex-cta) !important; color: var(--lex-primary) !important; }
.lex-floatbar__tooltip { position: absolute; right: calc(100% + .5rem); top: 50%; transform: translateY(-50%); background: var(--lex-primary-dark); color: #fff; padding: .5rem .75rem; font-size: .85rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.lex-floatbar__item:hover .lex-floatbar__tooltip,
.lex-floatbar__item:focus .lex-floatbar__tooltip,
.lex-floatbar__item.is-open .lex-floatbar__tooltip { opacity: 1; }
.lex-floatbar__tooltip--hours { white-space: normal; min-width: 220px; line-height: 1.5; }
@media (max-width: 600px) {
    .lex-floatbar { right: .5rem; gap: .3rem; }
    .lex-floatbar__item { width: 40px; height: 40px; }
}

/* ---------- A11y mode (Toggle) ---------- */
.lex-a11y { font-size: 112.5%; }
.lex-a11y body { color: #000; background: #fff; }

/* ---------- Empty State ---------- */
.lex-empty-state { text-align: center; color: var(--lex-gray-600); padding: 2rem; font-style: italic; }

/* ==========================================================================
   HOME / FRONT-PAGE: Fullwidth Hero Image hinter Menü
   ========================================================================== */
.home .lex-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    /* Dunkler Gradient als WCAG-Fallback: weiße Header-Texte bleiben auch
       lesbar, falls das Hero-Hintergrundbild nicht lädt. Auf dem Hero-Bild
       ist das ohnehin unsichtbar (Bild ist dunkel). Erfüllt WCAG 1.4.3 für
       Text-on-image-Pattern. */
    background: linear-gradient(180deg, rgba(11, 30, 56, 0.55) 0%, rgba(11, 30, 56, 0.25) 70%, rgba(11, 30, 56, 0) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
    z-index: 50;
    transition: background .25s ease, backdrop-filter .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.home .lex-header.is-scrolled {
    background: rgba(11, 30, 56, 0.55);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
}
.home .lex-header__inner { padding-top: .75rem; padding-bottom: .75rem; }
.home .lex-nav__list a,
.home .lex-header__a11y svg { color: #fff; }
.home .lex-hamburger span { background: #fff; }
.home .lex-nav__list a:hover { color: var(--lex-cta); }
/* Logo (helle Originalfarben) funktioniert auf dem Marine-Header ohne Filter */
.home .lex-header__a11y { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.4); }
.home .lex-header__a11y:hover { background: var(--lex-cta); color: var(--lex-primary); }

/* Hero darf hinter dem absolut platzierten Header sitzen */
.home {
    --lex-section-gap: 15rem;
}

.home .lex-main { margin-top: 0; }

@media (max-width: 900px) {
    .home {
        --lex-section-gap: 8rem;
    }
}
.lex-hero { min-height: min(92vh, 860px); padding-top: 0; }
.lex-hero .lex-container { padding-top: 10rem; padding-bottom: 6rem; }
.home .lex-hero .lex-container {
    max-width: 1400px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.home .lex-hero { align-items: flex-end; }
.home .lex-hero .lex-container { padding-top: 8rem; padding-bottom: 5rem; }
.home .lex-hero__content {
    margin-left: 0;
    margin-right: auto;
}
.home .lex-hero__brand-mark {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    width: clamp(220px, 24vw, 360px);
    margin: 0 0 1.75rem;
}
@media (max-width: 1430px) {
    .home .lex-hero__brand-mark {
        position: static;
        left: auto;
        transform: none;
    }
}
.home .lex-hero__brand-mark-image {
    filter:
        brightness(0)
        invert(1)
        drop-shadow(0 0 10px rgba(255, 255, 255, 0.34))
        drop-shadow(0 14px 30px rgba(6, 16, 32, 0.44));
    opacity: 0.96;
}
.lex-hero__overlay { background: linear-gradient(180deg, rgba(11,30,56,0.55) 0%, rgba(11,30,56,0.25) 35%, rgba(40,85,137,0.45) 100%); }

@media (max-width: 899.98px) {
    .home .lex-header__cta { display: none; }
}
@media (max-width: 1024px) {
    .home .lex-hero .lex-container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        padding-bottom: 3.5rem;
    }
}

/* ==========================================================================
   Custom Logo (WP) auf Header-Höhe begrenzen
   ========================================================================== */
.lex-header__logo .custom-logo-link { display: inline-block; line-height: 0; }
.lex-header__logo .custom-logo,
.lex-header__logo img { height: 48px !important; width: auto !important; max-width: 100%; display: block; }
@media (max-width: 600px) {
    .lex-header__logo .custom-logo,
    .lex-header__logo img { height: 40px !important; }
}

/* Header schrumpft beim Scroll leicht */
.lex-header.is-scrolled .lex-header__inner { padding-top: .5rem; padding-bottom: .5rem; }
.lex-header.is-scrolled .lex-header__logo .custom-logo,
.lex-header.is-scrolled .lex-header__logo img { height: 40px !important; transition: height .2s ease; }
.lex-header__logo .custom-logo,
.lex-header__logo img { transition: height .2s ease; }

/* ==========================================================================
   Blog Single – Startseiten-Look (ohne Kachel)
   ========================================================================== */
.single-post .lex-main {
    margin-top: 0;
}

.lex-page-breadcrumbs {
    background: var(--lex-gray-100);
    color: var(--lex-primary);
    padding: 0.75rem 0;
    margin-top: 0;
}

.lex-page-breadcrumbs .lex-blog-single__breadcrumb,
.lex-page-breadcrumbs .lex-news-overview__breadcrumb,
.lex-page-breadcrumbs .lex-page-breadcrumbs__nav {
    margin: 0;
}

.lex-page-breadcrumbs .lex-blog-single__breadcrumb-current,
.lex-page-breadcrumbs .lex-news-overview__breadcrumb-current,
.lex-page-breadcrumbs .lex-page-breadcrumbs__current {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
}

/* Generic breadcrumbs styling */
.lex-page-breadcrumbs__nav {
    margin-bottom: 1.5rem;
}

.lex-page-breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.125rem;
    line-height: 1.5;
}

.lex-page-breadcrumbs__link {
    text-decoration: none;
    color: inherit;
    opacity: 0.88;
    transition: opacity 0.2s ease;
}

.lex-page-breadcrumbs__link:hover {
    opacity: 1;
}

.lex-page-breadcrumbs__current {
    font-weight: 700;
}

.lex-page-breadcrumbs__separator {
    opacity: 0.6;
}

.lex-blog-single__hero {
    background: linear-gradient(180deg, #eef4fa 0%, #f8fbff 100%);
    padding-top: 4.5rem;
    padding-bottom: 3.5rem;
}

.lex-blog-single__hero .lex-container {
    padding-top: 0;
    padding-bottom: 0;
}

.lex-blog-single__hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 2.5rem;
    align-items: stretch;
}

.lex-blog-single__hero-content {
    margin-left: 0;
    color: var(--lex-primary);
    align-self: center;
    min-width: 0;
    overflow: hidden;
}

.lex-blog-single__hero-media {
    background: var(--lex-gray-200);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lex-blog-single__hero-image,
.lex-blog-single__hero-media img {
    width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: contain;
    object-position: center;
    display: block;
}

.lex-blog-single__hero-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #c7d6ea 0%, #e6edf7 100%);
}

.lex-blog-single__breadcrumb {
    margin-bottom: 1.5rem;
}

.lex-blog-single__breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.125rem;
    line-height: 1.5;
}

.lex-blog-single__breadcrumb a {
    text-decoration: none;
    color: inherit;
    opacity: 0.9;
    transition: opacity .2s ease;
}

.lex-blog-single__breadcrumb a:hover {
    opacity: 1;
}

.lex-blog-single__breadcrumb-current {
    font-weight: 600;
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lex-blog-single__breadcrumb-separator {
    opacity: 0.6;
}

.lex-blog-single__category {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border: 1px solid currentColor;
    text-decoration: none;
    color: inherit;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.lex-blog-single__title {
    font-size: clamp(1.75rem, 3.6vw, 3rem);
    line-height: 1.1;
    margin: 0 0 1.25rem;
    text-transform: uppercase;
    color: inherit;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    max-width: 100%;
}

.lex-blog-single__author {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    margin: 0 0 1.1rem;
}

.lex-blog-single__author-image,
.lex-blog-single__author-fallback {
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.lex-blog-single__author-image {
    object-fit: cover;
    object-position: center;
    display: block;
    border: 2px solid rgba(var(--lex-primary-rgb), 0.25);
}

.lex-blog-single__author-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    background: var(--lex-primary);
}

.lex-blog-single__author-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.lex-blog-single__author-label {
    font-size: 1.125rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--lex-gray-700);
}

.lex-blog-single__author-name {
    font-size: 1.125rem;
    line-height: 1.35;
    font-weight: 700;
    color: inherit;
}

.lex-blog-single__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.125rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    color: inherit;
    opacity: 0.95;
}

.lex-blog-single__dot {
    opacity: 0.7;
}

.lex-blog-single__excerpt {
    font-size: 1.125rem;
    line-height: 1.75;
    max-width: 760px;
    margin: 0 0 1.75rem;
}

.lex-blog-single__share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    line-height: 1.5;
}

.lex-blog-single__share a {
    text-decoration: none;
    color: inherit;
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid rgba(8, 30, 61, 0.35);
    transition: border-color .2s ease;
}

.lex-blog-single__share a:hover {
    border-bottom-color: rgba(8, 30, 61, 0.9);
}

.lex-blog-single__body {
    padding-top: 4rem;
}

.lex-blog-single__article {
    font-size: 1.125rem;
    line-height: 1.85;
    color: var(--lex-gray-800);
}

.lex-blog-single__article > *:first-child {
    margin-top: 0;
}

.lex-blog-single__article p,
.lex-blog-single__article ul,
.lex-blog-single__article ol,
.lex-blog-single__article blockquote,
.lex-blog-single__article figure,
.lex-blog-single__article pre,
.lex-blog-single__article table {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.lex-blog-single__article h2,
.lex-blog-single__article h3,
.lex-blog-single__article h4 {
    color: var(--lex-primary);
    margin-top: 2.25rem;
    margin-bottom: 0.9rem;
    line-height: 1.28;
}

.lex-blog-single__article h2 {
    font-size: clamp(1.8rem, 2.8vw, 2.4rem);
}

.lex-blog-single__article h3 {
    font-size: clamp(1.45rem, 2.2vw, 1.8rem);
}

.lex-blog-single__article h4 {
    font-size: clamp(1.2rem, 1.8vw, 1.35rem);
}

.lex-blog-single__article a {
    color: var(--lex-primary-light);
}

.lex-blog-single__article blockquote {
    padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--lex-primary-light);
    background: var(--lex-gray-100);
    color: var(--lex-gray-700);
}

.lex-blog-single__article img {
    display: block;
    max-width: 100%;
    height: auto;
}

.lex-blog-single__article figcaption {
    font-size: 1.125rem;
    color: var(--lex-gray-600);
    margin-top: 0.5rem;
}

.lex-blog-single__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.lex-blog-single__tags a {
    text-decoration: none;
    font-size: 1.125rem;
    color: var(--lex-primary);
    background: var(--lex-gray-100);
    padding: 0.35rem 0.7rem;
}

.lex-blog-single__related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.lex-blog-single__related-link {
    display: block;
    background: #fff;
    border: 1px solid var(--lex-gray-200);
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.lex-blog-single__related-media {
    aspect-ratio: 16 / 9;
    background: var(--lex-gray-100);
    overflow: hidden;
}

.lex-blog-single__related-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lex-blog-single__related-copy {
    padding: 1.25rem;
}

.lex-blog-single__related-copy h3 {
    font-size: 1.35rem;
    line-height: 1.35;
    margin: 0 0 0.8rem;
    color: var(--lex-primary);
}

.lex-blog-single__related-category,
.lex-blog-single__related-meta {
    font-size: 1.125rem;
    line-height: 1.5;
    margin: 0;
    color: var(--lex-gray-600);
}

.lex-blog-single__related-category {
    margin-bottom: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lex-blog-single__cta {
    padding-top: 3.25rem;
}

.lex-blog-single__cta-inner {
    text-align: center;
    padding: 0.25rem 0 0.5rem;
}

.lex-blog-single__cta-inner h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.85rem, 3vw, 2.7rem);
    color: var(--lex-primary);
}

.lex-blog-single__cta-inner p {
    margin: 0 auto 1.75rem;
    max-width: 760px;
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--lex-gray-700);
}

@media (max-width: 1024px) {
    .lex-blog-single__hero {
        padding-top: 3.75rem;
    }

    .lex-blog-single__hero-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .lex-blog-single__title {
        font-size: clamp(1.85rem, 5.5vw, 3rem);
    }

    .lex-blog-single__related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .lex-page-breadcrumbs {
        padding-top: 0.85rem;
        padding-bottom: 0.6rem;
    }

    .lex-blog-single__hero {
        padding-top: 3.25rem;
        padding-bottom: 2.5rem;
    }

    .lex-blog-single__breadcrumb-current {
        max-width: 100%;
        white-space: normal;
    }

    .lex-blog-single__related-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Kanzlei Page - /kanzlei
   ========================================================================== */
.page-template-page-kanzlei {
    background: #e9ecef;
}

.lex-kanzlei-page {
    padding: 0 0 5rem;
}

/* Karriere-style blue hero re-used on /kanzlei/ – Split-Layout (Bild rechts, Text links) */
.lex-kanzlei-hero-blue {
    /* Höhe an breiteres Bild-Verhältnis (4:3) der rechten Hälfte koppeln,
       damit auf breiten Screens deutlich mehr vom Motiv sichtbar bleibt.
       Rechte Hälfte = 50vw → Höhe = 50vw * 3/4 = 37.5vw.
       Mindesthöhe sichert genug Platz für den Text auf normalen Screens. */
    min-height: max(clamp(440px, 60vh, 620px), 37.5vw);
    align-items: stretch;
    background: var(--lex-primary);
    overflow: hidden;
}
.lex-kanzlei-hero-blue .lex-kar-hero__bg {
    position: absolute;
    inset: 0 0 0 50%;
    z-index: -2;
    background: var(--lex-primary);
}
.lex-kanzlei-hero-blue .lex-kar-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
}
.lex-kanzlei-hero-blue .lex-kar-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        var(--lex-primary) 0%,
        var(--lex-primary) 42%,
        rgba(27, 95, 170, 0.85) 50%,
        rgba(27, 95, 170, 0) 60%);
    z-index: -1;
}
.lex-kanzlei-hero-blue .lex-container {
    width: 100%;
}
.lex-kanzlei-hero-blue .lex-kar-hero__content {
    max-width: 50%;
    padding-block: clamp(3rem, 7vw, 5.5rem);
    padding-right: 2rem;
}
.lex-kanzlei-hero-blue__lead {
    font-family: var(--lex-font-heading);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.5;
    color: var(--lex-white);
    margin: -0.75rem 0 1.75rem;
    max-width: 36rem;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}

@media (max-width: 900px) {
    .lex-kanzlei-hero-blue .lex-kar-hero__bg {
        position: relative;
        inset: auto;
        height: auto;
        aspect-ratio: 2024 / 1350;
        margin-bottom: 0;
    }
    .lex-kanzlei-hero-blue .lex-kar-hero__bg img {
        object-fit: cover;
        object-position: center center;
    }
    .lex-kanzlei-hero-blue .lex-kar-hero__overlay {
        display: none;
    }
    .lex-kanzlei-hero-blue {
        flex-direction: column;
        display: flex;
    }
    .lex-kanzlei-hero-blue .lex-container {
        background: var(--lex-primary);
    }
    .lex-kanzlei-hero-blue .lex-kar-hero__content {
        max-width: 100%;
        padding-right: 0;
        padding-block: clamp(2rem, 6vw, 3rem);
    }
}

.lex-kanzlei-page > .lex-kanzlei-band:first-of-type,
.lex-kanzlei-page > .lex-kar-hero + .lex-kanzlei-band {
    padding-top: 3rem;
}

.lex-kanzlei-band {
    padding: 3.5rem 0;
}

.lex-kanzlei-title {
    margin: 0 0 1rem;
    color: #0f3d77;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.lex-kanzlei-title--compact {
    margin-bottom: 0.75rem;
}

.lex-kanzlei-title__main {
    display: block;
}

.lex-kanzlei-title__sub {
    display: block;
    margin-top: 0.35rem;
    color: #3f5f88;
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
}

.lex-kanzlei-title--intro {
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
}

@media (min-width: 1100px) {
    .lex-kanzlei-title--intro .lex-kanzlei-title__main {
        white-space: nowrap;
    }
}

.lex-kanzlei-subtitle {
    margin: 0 0 1.5rem;
    color: #3f5f88;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 1.25rem;
}

.lex-kanzlei-copy p,
.lex-kanzlei-media__caption,
.lex-kanzlei-list li,
.lex-kanzlei-team-intro,
.lex-kanzlei-values dt,
.lex-kanzlei-values dd,
.lex-kanzlei-cta__copy p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #40577b;
}

.lex-kanzlei-copy p {
    margin: 0 0 1.1rem;
}

.lex-kanzlei-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

.lex-kanzlei-media {
    margin: 0;
}

.lex-kanzlei-media__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    background: #d9dee5;
}

.lex-kanzlei-media__caption {
    margin-top: 1rem;
    max-width: 56ch;
}

.lex-kanzlei-media__caption strong {
    display: block;
    margin-bottom: 0.35rem;
    color: #0f3d77;
}

.lex-kanzlei-media__caption--strong {
    font-weight: 600;
    color: #244a7d;
}

.lex-kanzlei-list {
    margin: 0 0 1.3rem;
    padding: 0;
    list-style: none;
}

.lex-kanzlei-list li {
    position: relative;
    padding: 0.55rem 0 0.55rem 1.85rem;
    border-bottom: 1px solid rgba(27, 95, 170, 0.12);
    color: #40577b;
    font-size: 1.125rem;
    line-height: 1.55;
}

.lex-kanzlei-list li:last-child {
    border-bottom: 0;
}

.lex-kanzlei-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.05rem;
    width: 0.85rem;
    height: 2px;
    background: var(--lex-cta);
}

.lex-kanzlei-values {
    margin: 1.25rem 0 0;
    padding-left: 1.25rem;
    border-left: 3px solid var(--lex-cta);
}

.lex-kanzlei-values dt {
    margin: 1rem 0 0.1rem;
    color: #0f3d77;
    font-family: var(--lex-font-heading);
    font-weight: 700;
    line-height: 1.3;
}

.lex-kanzlei-values dt:first-child {
    margin-top: 0;
}

.lex-kanzlei-values dd {
    margin: 0;
}

.lex-kanzlei-hero {
    padding-bottom: 1.8rem;
}

.lex-kanzlei-hero__frame {
    position: relative;
    margin: 0;
    overflow: hidden;
}

.lex-kanzlei-hero__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center top;
}

.lex-kanzlei-hero__copy {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.2rem;
    max-width: 36rem;
    margin: 0;
    padding: 1rem 1.1rem;
    background: linear-gradient(180deg, rgba(8, 31, 62, 0) 0%, rgba(8, 31, 62, 0.84) 62%);
    color: #ffffff;
    text-transform: uppercase;
}

.lex-kanzlei-hero__copy p {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.45;
    letter-spacing: 0.02em;
    font-family: var(--lex-font-heading);
    font-weight: 700;
}

.lex-kanzlei-section-head {
    margin-bottom: 1.5rem;
    text-align: left;
}

.lex-kanzlei-section-head h2 {
    margin: 0;
    color: #0f3d77;
    font-size: clamp(1.9rem, 2.8vw, 2.5rem);
    text-transform: uppercase;
}

.lex-kanzlei-section-head p {
    margin: 0.35rem 0 0;
    font-size: 1.25rem;
    color: #3f5f88;
    text-transform: uppercase;
}

.lex-kanzlei-partner-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.5rem;
}

.lex-kanzlei-partner-card {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.lex-kanzlei-partner-card__media {
    background: #dbe0e5;
}

.lex-kanzlei-partner-card__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center top;
}

.lex-kanzlei-partner-card__meta {
    margin-top: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 2px solid var(--lex-cta);
}

.lex-kanzlei-partner-card__name,
.lex-kanzlei-partner-card__role {
    margin: 0;
    text-transform: uppercase;
    font-family: var(--lex-font-heading);
}

.lex-kanzlei-partner-card__name {
    font-size: 1.125rem;
    color: #0f3d77;
    font-weight: 700;
}

.lex-kanzlei-partner-card__role {
    margin-top: 0.3rem;
    font-size: 1.125rem;
    color: #3f5f88;
    font-weight: 600;
}

.lex-kanzlei-partner-card__bio {
    margin-top: 1rem;
    color: var(--lex-gray-800);
    font-size: 1.125rem;
    line-height: 1.6;
}

.lex-kanzlei-partner-card__bio p {
    margin: 0 0 0.85rem;
}

.lex-kanzlei-partner-card__bio p:last-child {
    margin-bottom: 0;
}

.lex-kanzlei-band--team {
    padding-top: 3.5rem;
}

.lex-kanzlei-team-intro {
    margin: 0 0 1.6rem;
}

.lex-kanzlei-team-slider__viewport {
    overflow: hidden;
}

.lex-kanzlei-team-slider__track {
    display: flex;
    gap: 1rem;
    transition: transform 0.5s ease;
    will-change: transform;
}

.lex-kanzlei-team-slide {
    position: relative;
    flex: 0 0 calc((100% - 3rem) / 4);
    background: #dbe0e5;
    overflow: hidden;
}

.lex-kanzlei-team-slide__image {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center top;
}

.lex-kanzlei-team-slide__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem 0.95rem;
    background: linear-gradient(180deg, rgba(8, 31, 62, 0) 0%, rgba(8, 31, 62, 0.86) 100%);
}

.lex-kanzlei-team-slide__label span {
    display: block;
    color: #ffffff;
    font-size: 1.125rem;
    font-family: var(--lex-font-heading);
    font-weight: 700;
    line-height: 1.35;
}

.lex-kanzlei-team-slider__controls {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.95rem;
}

.lex-kanzlei-team-slider__control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 1px solid rgba(var(--lex-primary-rgb), 0.2);
    background: transparent;
    color: #0f3d77;
    cursor: pointer;
    font-size: 1.25rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.lex-kanzlei-team-slider__control:hover,
.lex-kanzlei-team-slider__control:focus-visible {
    background: #0f3d77;
    color: #ffffff;
}

.lex-kanzlei-team-slider__status {
    min-width: 5.5rem;
    text-align: center;
    font-size: 1.125rem;
    color: #2e527f;
    font-family: var(--lex-font-heading);
    font-weight: 700;
}

.lex-kanzlei-cta {
    padding-top: 2.8rem;
}

.lex-kanzlei-cta__inner {
    background: var(--lex-primary);
    display: grid;
    grid-template-columns: 1.2fr minmax(220px, auto);
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    color: #ffffff;
}

.lex-kanzlei-cta__copy h2 {
    margin: 0 0 0.8rem;
    color: #ffffff;
    font-size: clamp(1.75rem, 2.7vw, 2.5rem);
    line-height: 1.2;
    text-transform: none;
}

.lex-kanzlei-cta__copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.95);
}

.lex-kanzlei-cta__action {
    display: flex;
    justify-content: flex-start;
}

.lex-kanzlei-cta__action .lex-btn {
    min-width: 14rem;
    justify-content: center;
}

@media (max-width: 1200px) {
    .lex-kanzlei-partner-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
    }

    .lex-kanzlei-team-slide {
        flex-basis: calc((100% - 2rem) / 3);
    }
}

@media (max-width: 980px) {
    .lex-kanzlei-split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .lex-kanzlei-split--values .lex-kanzlei-copy {
        order: 1;
    }

    .lex-kanzlei-split--values .lex-kanzlei-media {
        order: 2;
    }

    .lex-kanzlei-cta__inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .lex-kanzlei-team-slide {
        flex-basis: calc((100% - 1rem) / 2);
    }

    .lex-kanzlei-hero__copy {
        left: 1rem;
        right: 1rem;
        bottom: 0.75rem;
    }
}

@media (max-width: 600px) {
    .lex-kanzlei-page {
        padding-top: 1.25rem;
    }

    .lex-kanzlei-band {
        padding: 1.5rem 0;
    }

    .lex-kanzlei-partner-grid {
        grid-template-columns: 1fr;
    }

    .lex-kanzlei-team-slide {
        flex-basis: 100%;
    }

    .lex-kanzlei-cta__inner {
        padding: 1.4rem;
    }
}

/* ==========================================================================
   News Overview - /news
   ========================================================================== */
.lex-news-overview__hero {
    position: relative;
    min-height: clamp(460px, 62vh, 640px);
}

.lex-news-overview__hero .lex-hero__overlay {
    background: linear-gradient(135deg, rgba(8, 30, 61, 0.84) 0%, rgba(26, 63, 111, 0.7) 52%, rgba(26, 63, 111, 0.42) 100%);
}

.lex-news-overview__hero .lex-container {
    position: relative;
    z-index: 2;
    padding-top: 7rem;
    padding-bottom: 4.75rem;
}

.lex-news-overview__hero--plain {
    min-height: 0;
    background: linear-gradient(180deg, #eef4fa 0%, #f8fbff 100%);
}

.lex-news-overview__hero--plain .lex-hero__overlay {
    display: none;
}

.lex-news-overview__hero-content {
    max-width: 56rem;
    color: #fff;
}

.lex-news-overview__hero--plain .lex-news-overview__hero-content {
    color: var(--lex-primary);
}

.lex-news-overview__breadcrumb {
    margin-bottom: 1.5rem;
}

.lex-news-overview__breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.125rem;
    line-height: 1.5;
}

.lex-news-overview__breadcrumb a {
    text-decoration: none;
    color: inherit;
    opacity: 0.88;
}

.lex-news-overview__breadcrumb a:hover {
    opacity: 1;
}

.lex-news-overview__breadcrumb-separator {
    opacity: 0.6;
}

.lex-news-overview__breadcrumb-current {
    font-weight: 700;
}

.lex-news-overview__eyebrow {
    display: inline-flex;
    margin-bottom: 1rem;
    font-family: var(--lex-font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lex-cta-light);
}

.lex-news-overview__hero--plain .lex-news-overview__eyebrow {
    color: var(--lex-cta-dark);
}

.lex-news-overview__title {
    margin: 0 0 1rem;
    font-size: clamp(2.1rem, 4.5vw, 3.85rem);
    line-height: 1.08;
    text-transform: uppercase;
    color: inherit;
}

.lex-news-overview__lead {
    margin: 0;
    max-width: 44rem;
    font-size: 1.2rem;
    line-height: 1.7;
    color: inherit;
    opacity: 0.96;
}

.lex-news-overview__actions {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
}

.lex-news-overview__feed-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}

.lex-news-overview__feed-icon {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
}

.lex-news-overview__feed-hint {
    font-size: 1rem;
    line-height: 1.4;
    color: inherit;
    opacity: 0.85;
}

.lex-news-overview__hero--plain .lex-news-overview__feed-hint {
    color: var(--lex-gray, #5E6A75);
    opacity: 1;
}

@media (max-width: 600px) {
    .lex-news-overview__actions {
        margin-top: 1.5rem;
        gap: 0.75rem;
    }

    .lex-news-overview__feed-cta {
        width: 100%;
        justify-content: center;
    }

    .lex-news-overview__feed-hint {
        font-size: 0.95rem;
    }
}

.lex-news-overview__intro {
    padding-top: 3.25rem;
    padding-bottom: 0;
}

.lex-news-overview__intro-copy {
    font-size: 1.125rem;
    line-height: 1.82;
}

.lex-news-overview__intro-copy > :first-child {
    margin-top: 0;
}

.lex-news-overview__sections {
    padding-top: 3.5rem;
}

.lex-news-overview__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}

.lex-news-overview__column {
    display: grid;
    align-content: start;
    gap: 1.25rem;
}

.lex-news-overview__column-header {
    display: grid;
    gap: 1rem;
    align-content: start;
    padding: 2rem;
    background: linear-gradient(135deg, var(--lex-primary-dark) 0%, var(--lex-primary) 100%);
    border-left: 6px solid var(--lex-cta);
    color: #fff;
    box-shadow: 0 20px 40px rgba(8, 30, 61, 0.15);
}

.lex-news-overview__column-title {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.1;
    text-transform: uppercase;
    color: inherit;
}

.lex-news-overview__column-subline {
    margin: 0;
    max-width: 26rem;
    font-size: 1.125rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.95);
}

.lex-news-overview__column-cta {
    margin-top: 0.35rem;
    min-width: 14rem;
    justify-content: center;
    font-size: 1.125rem !important;
}

.lex-news-overview__column-cta.is-disabled {
    pointer-events: none;
    cursor: default;
}

.lex-news-overview__posts {
    display: grid;
    gap: 1rem;
}

/* News timeline rail (left of each post) */
.lex-news-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lex-news-timeline__item {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 1.25rem;
    align-items: stretch;
    position: relative;
}

.lex-news-timeline__marker {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 1rem 1.5rem 0 0;
}

/* Continuous vertical line through all items */
.lex-news-timeline__marker::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: calc(100% + 1rem); /* bridge the grid gap */
    width: 2px;
    background: var(--lex-primary, #1B5FAA);
}

.lex-news-timeline__item:first-child .lex-news-timeline__marker::before {
    top: 1rem;
    height: calc(100% + 1rem - 1rem);
}

.lex-news-timeline__item:last-child .lex-news-timeline__marker::before {
    height: 1rem;
}

.lex-news-timeline__item:only-child .lex-news-timeline__marker::before {
    display: none;
}

.lex-news-timeline__date {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    font-size: 1.125rem;
    line-height: 1.15;
    font-weight: 700;
    color: var(--lex-primary, #1B5FAA);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lex-news-timeline__date-year {
    font-weight: 500;
    font-size: 1.125rem;
    color: var(--lex-gray-700, #555);
}

.lex-news-timeline__dot {
    position: absolute;
    right: 0;
    top: 1rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--lex-accent, #1B5FAA);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--lex-primary, #1B5FAA);
    transform: translate(50%, 0);
    z-index: 1;
}

@media (max-width: 800px) {
    .lex-news-timeline__item {
        grid-template-columns: 4.5rem minmax(0, 1fr);
        gap: 1rem;
    }
    .lex-news-timeline__date {
        font-size: 1.125rem;
    }
    .lex-news-timeline__date-year {
        font-size: 1.125rem;
    }
    .lex-news-timeline__marker {
        padding-right: 1rem;
    }
}

.lex-news-overview__post {
    min-height: 100%;
}

.lex-news-overview__post-link {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100%;
    background: #fff;
    border: 1px solid var(--lex-gray-200);
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.lex-news-overview__post-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(8, 30, 61, 0.1);
    border-color: rgba(var(--lex-primary-rgb), 0.28);
}

.lex-news-overview__post-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--lex-gray-100);
    overflow: hidden;
}

.lex-news-overview__post-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.lex-news-overview__post-media-fallback {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, rgba(var(--lex-primary-rgb), 0.16) 0%, rgba(var(--lex-cta-rgb), 0.2) 100%);
}

.lex-news-overview__post-copy {
    display: grid;
    gap: 0.6rem;
    align-content: start;
    padding: 1rem 1rem 1.05rem;
}

.lex-news-overview__post-meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--lex-gray-600);
}

.lex-news-overview__post-dot {
    opacity: 0.55;
}

.lex-news-overview__post-copy h3 {
    margin: 0;
    font-size: 1.45rem;
    line-height: 1.3;
    color: var(--lex-primary);
}

.lex-news-overview__post-excerpt {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--lex-gray-800);
}

.lex-news-overview__post-more {
    display: inline-flex;
    margin-top: 0.15rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--lex-cta-dark);
}

.lex-news-overview__post-link:hover .lex-news-overview__post-more {
    color: var(--lex-primary);
}

.lex-news-overview__empty {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.65;
    padding: 1.25rem;
    border: 1px dashed var(--lex-gray-400);
    background: #fff;
}

@media (max-width: 1100px) {
    .lex-news-overview__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .lex-news-overview__hero .lex-container {
        padding-top: 5.75rem;
        padding-bottom: 3.75rem;
    }

    .lex-news-overview__column-header {
        padding: 1.5rem;
    }

    .lex-news-overview__post-link {
        grid-template-rows: auto 1fr;
    }
}


/* ==========================================================================
   KARRIERE-SEITE (page-karriere.php) – Mockup 04/2026
   ========================================================================== */

/* ---------- HERO ---------- */
.lex-kar-hero {
    position: relative;
    min-height: clamp(440px, 60vh, 620px);
    display: flex;
    align-items: center;
    color: var(--lex-white);
    overflow: hidden;
    isolation: isolate;
}
.lex-kar-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.lex-kar-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.lex-kar-hero__bg--fallback {
    background:
        linear-gradient(135deg, rgba(27, 95, 170, 0.55), rgba(27, 63, 105, 0.7)),
        radial-gradient(circle at 30% 40%, #5d8fb8, #134A86);
}
.lex-kar-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(8, 30, 61, 0.55) 0%, rgba(8, 30, 61, 0.25) 60%, rgba(8, 30, 61, 0.05) 100%);
    z-index: -1;
}
.lex-kar-hero__content {
    max-width: 720px;
    padding-block: clamp(3rem, 8vw, 6rem);
}
.lex-kar-hero__claim {
    font-family: var(--lex-font-heading);
    font-size: clamp(1.85rem, 4.5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--lex-white);
    margin: 0 0 1.75rem;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}
.lex-kar-hero__actions .lex-btn {
    padding: 0.95rem 1.6rem;
    font-size: 1rem;
}

/* ---------- WARUM WIR – Split ---------- */
.lex-kar-warum {
    padding-block: clamp(3rem, 6vw, 5rem);
}
.lex-kar-warum__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
}
.lex-kar-warum__media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.lex-kar-warum__eyebrow {
    color: var(--lex-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
}
.lex-kar-warum__headline {
    color: var(--lex-primary);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    line-height: 1.25;
    margin: 0 0 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.005em;
}
.lex-kar-warum__text p {
    color: var(--lex-gray-800);
    font-size: 1.0625rem;
    line-height: 1.65;
    margin: 0 0 1rem;
}
.lex-kar-warum__text p:last-child {
    margin-bottom: 0;
}

@media (max-width: 800px) {
    .lex-kar-warum__grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- STELLEN-GRID ---------- */
.lex-kar-stellen {
    background: var(--lex-gray-100);
    padding-block: clamp(3rem, 6vw, 5rem);
}
.lex-kar-stellen__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 1.25rem;
}
.lex-kar-stelle {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
    padding: 1.75rem 1.75rem 2rem;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.lex-kar-stelle--blue {
    background: var(--lex-primary);
    color: var(--lex-white);
}
.lex-kar-stelle--blue .lex-kar-stelle__title,
.lex-kar-stelle--blue .lex-kar-stelle__subtitle,
.lex-kar-stelle--blue .lex-kar-stelle__arrow {
    color: var(--lex-white);
}
.lex-kar-stelle--light {
    background: var(--lex-white);
    color: var(--lex-primary);
    border: 1px solid var(--lex-gray-200);
}
.lex-kar-stelle:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(8, 30, 61, 0.12);
}
.lex-kar-stelle__title {
    font-family: var(--lex-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0.4rem;
    color: inherit;
}
.lex-kar-stelle__subtitle {
    font-size: 1rem;
    line-height: 1.45;
    opacity: 0.85;
    margin: 0;
}
.lex-kar-stelle__arrow {
    margin-top: 1.5rem;
    font-size: 1.5rem;
    line-height: 1;
}

@media (max-width: 1100px) {
    .lex-kar-stellen__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .lex-kar-stellen__grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- VORTEILE 9 KARTEN ---------- */
.lex-kar-vorteile {
    padding-block: clamp(3rem, 6vw, 5.5rem);
}
.lex-kar-vorteile__head {
    margin-bottom: 2.5rem;
}
.lex-kar-vorteile__headline {
    color: var(--lex-primary);
    text-transform: uppercase;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    line-height: 1.2;
    font-weight: 700;
    margin: 0;
    max-width: 24em;
}
.lex-kar-vorteile__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.lex-kar-vorteil {
    position: relative;
    padding: 2rem 1.75rem;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.lex-kar-vorteil--blue {
    background: var(--lex-primary);
    color: var(--lex-white);
}
.lex-kar-vorteil--light {
    background: #dde1e4;
    color: var(--lex-gray-800);
}
.lex-kar-vorteil__num {
    font-family: var(--lex-font-heading);
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1;
    opacity: 0.7;
    letter-spacing: -0.02em;
    display: block;
    margin-bottom: 0.5rem;
}
.lex-kar-vorteil--light .lex-kar-vorteil__num {
    color: var(--lex-primary-dark);
    opacity: 1;
}
.lex-kar-vorteil__title {
    font-family: var(--lex-font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.25;
    margin: 0;
    color: inherit;
}
.lex-kar-vorteil--light .lex-kar-vorteil__title {
    color: var(--lex-primary);
}
.lex-kar-vorteil__text {
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
    color: inherit;
    opacity: 0.92;
}

/* Bürofotos unter dem Vorteils-Raster */
.lex-kar-vorteile__photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 1.25rem;
}
.lex-kar-vorteile__photo {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.lex-kar-vorteile__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 1100px) {
    .lex-kar-vorteile__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .lex-kar-vorteile__photos {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 600px) {
    .lex-kar-vorteile__grid {
        grid-template-columns: 1fr;
    }
    .lex-kar-vorteile__photos {
        grid-template-columns: 1fr;
    }
}

/* ---------- BEWERBUNGSFORMULAR (CI-konform, eckig, gleicher Look wie /kontakt/) ---------- */
.lex-kar-form {
    background: var(--lex-gray-100);
    padding-block: clamp(3rem, 6vw, 5rem);
    color: var(--lex-primary);
}
.lex-kar-form__head {
    margin-bottom: 2rem;
    max-width: 56rem;
}
.lex-kar-form__eyebrow {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--lex-primary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}
.lex-kar-form__headline {
    color: var(--lex-primary);
    text-transform: uppercase;
    font-size: clamp(1.5rem, 2.5vw, 2.15rem);
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 0.75rem;
}
.lex-kar-form__lead {
    color: var(--lex-primary-dark);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
    max-width: 44rem;
    opacity: 0.85;
}

/* Weiße eckige Karte – analog .lex-kontakt-form-card */
.lex-kar-form-card {
    background: var(--lex-white);
    border: 1px solid var(--lex-gray-100);
    padding: clamp(1.75rem, 3vw, 3rem);
    box-shadow: 0 8px 32px -12px rgba(var(--lex-primary-rgb), 0.18);
    border-radius: 0;
}

.lex-kar-form__form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
}
.lex-kar-form__row {
    display: grid;
    gap: 1.25rem;
}
.lex-kar-form__row--2 {
    grid-template-columns: 1fr 1fr;
}

.lex-kar-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.lex-kar-form__field label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--lex-primary);
    letter-spacing: 0.02em;
}
.lex-kar-form__req {
    color: var(--lex-cta-dark);
    margin-left: 0.15rem;
}
.lex-kar-form__opt {
    color: var(--lex-secondary);
    font-weight: 400;
    font-size: 0.8125rem;
    margin-left: 0.25rem;
}

/* Inputs – eckig, CI-konform */
.lex-kar-form__form input[type="text"],
.lex-kar-form__form input[type="email"],
.lex-kar-form__form input[type="tel"],
.lex-kar-form__form input[type="number"],
.lex-kar-form__form textarea {
    width: 100%;
    background: var(--lex-white);
    border: 1px solid var(--lex-gray-200);
    border-radius: 0;
    padding: 0.875rem 1rem;
    font-family: var(--lex-font-body);
    font-size: 1rem;
    color: var(--lex-gray-800);
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: none;
}
.lex-kar-form__form input::placeholder,
.lex-kar-form__form textarea::placeholder {
    color: var(--lex-gray-600);
    opacity: 1;
}
.lex-kar-form__form input:focus,
.lex-kar-form__form textarea:focus {
    outline: none;
    border-color: var(--lex-primary);
    box-shadow: 0 0 0 3px rgba(var(--lex-primary-rgb), 0.15);
}
.lex-kar-form__form textarea {
    resize: vertical;
    min-height: 8rem;
}

/* File-Upload – eckig, dashed border */
.lex-kar-form__upload {
    position: relative;
    background: rgba(var(--lex-primary-rgb), 0.03);
    border: 1px dashed rgba(var(--lex-primary-rgb), 0.35);
    padding: 1.25rem 1.25rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.lex-kar-form__upload:hover,
.lex-kar-form__upload:focus-within {
    background: rgba(var(--lex-primary-rgb), 0.06);
    border-color: var(--lex-primary);
}
.lex-kar-form__upload input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.lex-kar-form__upload-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    color: var(--lex-gray-800);
    font-size: 0.95rem;
}
.lex-kar-form__upload-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--lex-primary);
    color: var(--lex-white);
    flex-shrink: 0;
}
.lex-kar-form__upload-text strong {
    color: var(--lex-primary);
    font-weight: 700;
}
.lex-kar-form__upload-hint {
    color: var(--lex-secondary);
    font-size: 0.8125rem;
    flex-basis: 100%;
}
.lex-kar-form__upload.is-filled {
    background: rgba(var(--lex-primary-rgb), 0.06);
    border-style: solid;
    border-color: var(--lex-primary);
}

/* Liste der ausgewählten Dateien */
.lex-kar-form__filelist {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.lex-kar-form__fileitem {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    background: var(--lex-white);
    border: 1px solid rgba(var(--lex-primary-rgb), 0.2);
    color: var(--lex-gray-800);
    font-size: 0.95rem;
}
.lex-kar-form__fileitem-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--lex-primary);
    flex-shrink: 0;
}
.lex-kar-form__fileitem-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--lex-primary);
}
.lex-kar-form__fileitem-size {
    color: var(--lex-secondary);
    font-size: 0.85rem;
    flex-shrink: 0;
}
.lex-kar-form__fileitem-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(var(--lex-primary-rgb), 0.25);
    color: var(--lex-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}
.lex-kar-form__fileitem-remove:hover,
.lex-kar-form__fileitem-remove:focus-visible {
    background: var(--lex-primary);
    border-color: var(--lex-primary);
    color: var(--lex-white);
}

/* Datenschutz-Checkbox */
.lex-kar-form__privacy {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.95rem;
    color: var(--lex-gray-800);
    line-height: 1.5;
}
.lex-kar-form__privacy input[type="checkbox"] {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.2rem;
    accent-color: var(--lex-primary);
    border-radius: 0;
    cursor: pointer;
}
.lex-kar-form__privacy label {
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--lex-gray-800);
    letter-spacing: normal;
    text-transform: none;
}
.lex-kar-form__privacy a {
    color: var(--lex-primary);
    text-decoration: underline;
    font-weight: 600;
}

/* Submit */
.lex-kar-form__actions {
    margin-top: 0.5rem;
}
.lex-kar-form__submit {
    width: 100%;
    max-width: 100%;
    padding: 1rem 0.75rem;
    font-size: clamp(0.7rem, 2.6vw, 1rem) !important;
    font-weight: 700;
    border-radius: 0 !important;
    letter-spacing: 0 !important;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
    line-height: 1.2;
}
.lex-kar-form__submit [hidden] {
    display: none !important;
}

/* Status-Box (Erfolg/Fehler) */
.lex-kar-form__status {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.25rem 1.4rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.45;
    border-left: 4px solid transparent;
}
.lex-kar-form__status::before {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    margin-top: 0.1rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.lex-kar-form__status--success {
    background: #e8f7ed;
    color: #136a2a;
    border-left-color: #1c8f3a;
}
.lex-kar-form__status--success::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23136a2a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='8 12 11 15 16 9'/></svg>");
}
.lex-kar-form__status--error {
    background: #fdecea;
    color: #a3170f;
    border-left-color: #d6342b;
}
.lex-kar-form__status--error::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3170f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='13'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
}

@media (max-width: 800px) {
    .lex-kar-form__row--2 {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   STELLEN-DETAIL (single-lex_stelle.php)
   ========================================================================== */
.lex-stelle-hero {
    background: var(--lex-primary);
    color: var(--lex-white);
    padding-block: clamp(3rem, 6vw, 5rem);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.lex-stelle-hero--has-bg {
    min-height: clamp(360px, 48vh, 520px);
    display: flex;
    align-items: center;
}
.lex-stelle-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.lex-stelle-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* Glasur / Glassmorphism: gradient + dezenter Blur über dem Bild */
.lex-stelle-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            135deg,
            rgba(27, 95, 170, 0.88) 0%,
            rgba(27, 95, 170, 0.72) 50%,
            rgba(11, 30, 56, 0.78) 100%
        );
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
}
.lex-stelle-hero--has-bg > .lex-container {
    position: relative;
    z-index: 2;
    width: 100%;
}
.lex-stelle-hero__breadcrumb {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.lex-stelle-hero__breadcrumb a {
    color: var(--lex-white);
    text-decoration: underline;
}
.lex-stelle-hero__breadcrumb a:hover {
    color: var(--lex-cta);
}
.lex-stelle-hero__title {
    color: var(--lex-white);
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    line-height: 1.15;
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: -0.005em;
}
.lex-stelle-hero__subtitle {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.15rem;
    margin: 0 0 1rem;
    line-height: 1.4;
}
.lex-stelle-hero__pills {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.lex-stelle-hero__pill {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--lex-white);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
}
.lex-stelle-hero__pill--accent {
    background: var(--lex-cta);
    border-color: var(--lex-cta);
    color: var(--lex-primary);
}

/* Sidebar mit Faktenbox + CTA – ersetzt das alte Sticky am .lex-stelle-content__cta */
.lex-stelle-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: 6rem;
}
.lex-stelle-facts {
    background: var(--lex-white);
    border: 1px solid var(--lex-gray-200);
    padding: 1.5rem 1.5rem 1.25rem;
}
.lex-stelle-facts__title {
    color: var(--lex-primary);
    font-size: 1.05rem;
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}
.lex-stelle-facts__list {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0.4rem;
}
.lex-stelle-facts__list dt {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lex-gray-600);
    font-weight: 600;
    margin-top: 0.5rem;
}
.lex-stelle-facts__list dt:first-of-type {
    margin-top: 0;
}
.lex-stelle-facts__list dd {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--lex-gray-800);
}

/* Status-Pill in Faktenbox + Hero */
.lex-stelle-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem 0.35rem 0.6rem;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
    border: 1px solid;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.lex-stelle-status__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
}
.lex-stelle-status--open {
    background: #e6f6ea;
    color: #136a2a;
    border-color: rgba(19, 106, 42, 0.25);
}
.lex-stelle-status--open .lex-stelle-status__dot {
    background: #2aa657;
    animation: lex-status-pulse 2s ease-out infinite;
}
.lex-stelle-status--closed {
    background: #fdecea;
    color: #a3170f;
    border-color: rgba(163, 23, 15, 0.25);
}
.lex-stelle-status--closed .lex-stelle-status__dot {
    background: #cc2a1c;
}
@keyframes lex-status-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(42, 166, 87, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(42, 166, 87, 0); }
    100% { box-shadow: 0 0 0 0 rgba(42, 166, 87, 0); }
}

/* Hero-Variante (auf blauem Untergrund leicht andere Töne) */
.lex-stelle-hero__pill.lex-stelle-status--open,
.lex-stelle-hero__pill.lex-stelle-status--closed {
    background: rgba(255, 255, 255, 0.96);
}

/* Vergebene Stelle: Bewerben-Button optisch deaktiviert */
.lex-stelle-page--closed .lex-stelle-content__cta .lex-btn--primary,
.lex-stelle-page--closed .lex-team-widget__actions .lex-btn--primary {
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(0.5);
}
.lex-stelle-page--closed .lex-stelle-content__cta::after {
    content: "Diese Stelle ist aktuell vergeben. Schauen Sie gerne auf der Karriereseite nach offenen Positionen.";
    display: block;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--lex-gray-800);
    line-height: 1.45;
}

.lex-stelle-content {
    padding-block: clamp(3rem, 6vw, 5rem);
}
.lex-stelle-content__grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}
.lex-stelle-content__body {
    color: var(--lex-gray-800);
    font-size: 1.0625rem;
    line-height: 1.7;
}
.lex-stelle-content__body :is(h2, h3) {
    color: var(--lex-primary);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}
.lex-stelle-content__body h2 { font-size: 1.45rem; }
.lex-stelle-content__body h3 { font-size: 1.15rem; }
.lex-stelle-content__body ul,
.lex-stelle-content__body ol {
    padding-left: 1.25rem;
    margin: 1rem 0 1.25rem;
}
.lex-stelle-content__body li { margin-bottom: 0.4rem; }
.lex-stelle-content__lead {
    font-size: 1.15rem;
    color: var(--lex-primary);
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.lex-stelle-content__cta {
    background: var(--lex-gray-100);
    padding: 2rem 1.75rem;
}
.lex-stelle-content__cta-title {
    color: var(--lex-primary);
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}
.lex-stelle-content__cta .lex-btn {
    width: 100%;
    margin: 1rem 0;
    padding: 0.95rem 1.25rem;
    text-align: center;
    justify-content: center;
}
.lex-stelle-content__contact {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--lex-gray-800);
    margin: 0.5rem 0 0;
}
.lex-stelle-content__contact a {
    color: var(--lex-primary);
    text-decoration: underline;
}

@media (max-width: 900px) {
    .lex-stelle-content__grid { grid-template-columns: 1fr; }
    .lex-stelle-sidebar       { position: static; }
}

/* ==========================================================================
   KONTAKT-PAGE  (page-kontakt.php)
   ========================================================================== */

.lex-kontakt-page {
    background: var(--lex-white);
}

/* ---------- Page-Header ---------- */
.lex-kontakt-hero {
    background: linear-gradient(180deg, #F4F7FB 0%, var(--lex-white) 100%);
    padding: clamp(3rem, 6vw, 6rem) 0 clamp(3rem, 5vw, 5rem);
    border-bottom: 1px solid var(--lex-gray-100);
}
.lex-kontakt-hero__breadcrumbs {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.875rem;
    color: var(--lex-secondary);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.lex-kontakt-hero__breadcrumbs a {
    color: var(--lex-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}
.lex-kontakt-hero__breadcrumbs a:hover { color: var(--lex-primary); }
.lex-kontakt-hero__breadcrumbs span[aria-current] { color: var(--lex-primary); font-weight: 600; }

.lex-kontakt-hero__eyebrow {
    display: inline-block;
    color: var(--lex-secondary);
    font-style: italic;
    font-size: 1rem;
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
}
.lex-kontakt-hero__headline {
    font-family: var(--lex-font-heading);
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--lex-primary);
    line-height: 1.05;
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
}
.lex-kontakt-hero__subline {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    color: var(--lex-primary-light);
    font-weight: 600;
    margin: 0 0 1.25rem;
}
.lex-kontakt-hero__intro {
    max-width: 56rem;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--lex-gray-800);
    margin: 0;
}
.lex-kontakt-hero__cta {
    margin: 1.75rem 0 0;
}

/* ---------- Kontakt-Info-Grid ---------- */
.lex-kontakt-info { padding: clamp(3rem, 6vw, 5rem) 0; }
.lex-kontakt-info__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    gap: 1.5rem;
}
.lex-kontakt-card {
    background: var(--lex-white);
    border: 1px solid var(--lex-gray-100);
    border-top: 4px solid var(--lex-primary);
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    border-radius: 0;
}
.lex-kontakt-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px -10px rgba(var(--lex-primary-rgb), 0.18);
    border-top-color: var(--lex-cta);
}
.lex-kontakt-card__icon {
    width: 3.25rem;
    height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--lex-primary-rgb), 0.08);
    color: var(--lex-primary);
    margin-bottom: 0.25rem;
}
.lex-kontakt-card__title {
    font-family: var(--lex-font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--lex-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}
.lex-kontakt-card__body {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--lex-gray-800);
    font-style: normal;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.lex-kontakt-card__body span { display: block; }
.lex-kontakt-card__primary {
    color: var(--lex-primary);
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
    transition: color 0.2s ease;
}
.lex-kontakt-card__primary:hover { color: var(--lex-cta-dark); }
.lex-kontakt-card__note {
    color: var(--lex-secondary);
    font-size: 0.95rem;
    margin-top: 0.25rem;
}
.lex-kontakt-card__hours {
    font-size: 1rem;
    color: var(--lex-gray-800);
    line-height: 1.7;
}
.lex-kontakt-card__link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--lex-primary);
    font-weight: 700;
    text-decoration: none;
    padding-top: 0.5rem;
    transition: color 0.2s ease, gap 0.2s ease;
    font-size: 0.95rem;
}
.lex-kontakt-card__link:hover {
    color: var(--lex-cta-dark);
    gap: 0.75rem;
}

/* ---------- Karte ---------- */
.lex-kontakt-map {
    padding: 0 0 clamp(3rem, 6vw, 5rem);
}
.lex-kontakt-map__frame {
    position: relative;
    width: 100%;
    background: var(--lex-gray-100);
    overflow: hidden;
    border: 1px solid var(--lex-gray-100);
    box-shadow: 0 4px 24px -8px rgba(var(--lex-primary-rgb), 0.15);
}
.lex-kontakt-map__media {
    display: block;
    position: relative;
    color: inherit;
}
.lex-kontakt-map__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1280 / 512;
    object-fit: cover;
    filter: saturate(0.92) contrast(1.02);
}

/* Pin-Position wird vom Template per Inline-Style (left/top in %) gesetzt,
   passend zu den Pixel-Koordinaten der Kanzlei im OSM-PNG (1280×512). */
.lex-kontakt-map__pin {
    position: absolute;
    transform: translate(-50%, -100%);
    transform-origin: 50% 100%;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
    animation: lexPinPulse 2.4s ease-in-out infinite;
}
@keyframes lexPinPulse {
    0%, 100% { transform: translate(-50%, -100%) scale(1); }
    50%      { transform: translate(-50%, -108%) scale(1.04); }
}

.lex-kontakt-map__overlay {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
    background: var(--lex-white);
    padding: 1.25rem 1.5rem;
    max-width: 22rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    box-shadow: 0 8px 24px -8px rgba(var(--lex-primary-rgb), 0.25);
    border-left: 4px solid var(--lex-cta);
}
.lex-kontakt-map__overlay-title {
    font-family: var(--lex-font-heading);
    color: var(--lex-primary);
    font-weight: 700;
    font-size: 1.0625rem;
}
.lex-kontakt-map__overlay-text {
    color: var(--lex-gray-800);
    font-size: 0.95rem;
}
.lex-kontakt-map__overlay-routelabel {
    margin: 0.85rem 0 0.4rem;
    color: var(--lex-secondary);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.lex-kontakt-map__routes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.lex-kontakt-map__route {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.75rem;
    color: var(--lex-primary);
    background: var(--lex-gray-100);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    border: 1px solid transparent;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    width: 100%;
}
.lex-kontakt-map__route:hover,
.lex-kontakt-map__route:focus-visible {
    background: var(--lex-cta);
    color: var(--lex-primary);
    border-color: var(--lex-cta-dark);
}
.lex-kontakt-map__route svg { flex-shrink: 0; }
.lex-kontakt-map__route-arrow { margin-left: auto; }
.lex-kontakt-map__attribution {
    color: var(--lex-secondary);
    font-size: 0.8125rem;
    margin: 0.75rem 0 0;
    text-align: right;
}
.lex-kontakt-map__attribution a {
    color: var(--lex-primary);
    text-decoration: underline;
}

/* ---------- Form-Section ---------- */
.lex-kontakt-form-section {
    padding: clamp(3rem, 6vw, 6rem) 0;
    background: linear-gradient(180deg, #F4F7FB 0%, var(--lex-white) 100%);
}
.lex-kontakt-form-section__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}
.lex-kontakt-form-section__aside {
    position: sticky;
    top: 7rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.lex-kontakt-form-section__eyebrow {
    color: var(--lex-secondary);
    font-style: italic;
    font-size: 1rem;
}
.lex-kontakt-form-section__headline {
    font-family: var(--lex-font-heading);
    font-size: clamp(1.875rem, 3vw, 2.5rem);
    color: var(--lex-primary);
    font-weight: 700;
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.015em;
}
.lex-kontakt-form-section__lead {
    font-size: 1.0625rem;
    color: var(--lex-gray-800);
    line-height: 1.65;
    margin: 0;
}
.lex-kontakt-form-section__bullets {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.lex-kontakt-form-section__bullets li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 1rem;
    color: var(--lex-gray-800);
}
.lex-kontakt-form-section__bullets svg {
    color: var(--lex-cta-dark);
    flex-shrink: 0;
}

.lex-kontakt-form-section__sidecard {
    margin-top: 0.5rem;
    padding: 1.5rem;
    background: var(--lex-white);
    border: 1px solid var(--lex-gray-100);
    border-left: 4px solid var(--lex-cta);
}
.lex-kontakt-form-section__sidecard h3 {
    font-family: var(--lex-font-heading);
    color: var(--lex-primary);
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
    font-weight: 700;
}
.lex-kontakt-form-section__sidecard p {
    margin: 0 0 1rem;
    color: var(--lex-gray-800);
    font-size: 0.95rem;
}
.lex-kontakt-form-section__sidecard .lex-btn--blue {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    color: var(--lex-white);
    text-decoration: none;
    font-weight: 700;
}

/* ---------- Form-Card ---------- */
.lex-kontakt-form-card {
    background: var(--lex-white);
    border: 1px solid var(--lex-gray-100);
    padding: clamp(1.75rem, 3vw, 3rem);
    box-shadow: 0 8px 32px -12px rgba(var(--lex-primary-rgb), 0.18);
}
.lex-kontakt-form-card__notice {
    background: rgba(var(--lex-cta-rgb), 0.12);
    border-left: 4px solid var(--lex-cta);
    padding: 0.875rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    color: var(--lex-gray-800);
}

.lex-kontakt-form { display: flex; flex-direction: column; gap: 1.25rem; }
.lex-kontakt-form__row {
    display: grid;
    gap: 1.25rem;
}
.lex-kontakt-form__row--2 { grid-template-columns: 1fr 1fr; }

.lex-kontakt-form__field { display: flex; flex-direction: column; gap: 0.4rem; }
.lex-kontakt-form__field label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--lex-primary);
    letter-spacing: 0.02em;
}
.lex-kontakt-form__req { color: var(--lex-cta-dark); margin-left: 0.15rem; }
.lex-kontakt-form__opt { color: var(--lex-secondary); font-weight: 400; font-size: 0.8125rem; margin-left: 0.25rem; }

.lex-kontakt-form input[type="text"],
.lex-kontakt-form input[type="email"],
.lex-kontakt-form input[type="number"],
.lex-kontakt-form select,
.lex-kontakt-form textarea {
    width: 100%;
    background: var(--lex-white);
    border: 1px solid var(--lex-gray-200);
    border-radius: 0;
    padding: 0.875rem 1rem;
    font-family: var(--lex-font-body);
    font-size: 1rem;
    color: var(--lex-gray-800);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    line-height: 1.4;
}
.lex-kontakt-form select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23285589' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 14px 14px;
    padding-right: 2.5rem;
    cursor: pointer;
}
.lex-kontakt-form input:focus,
.lex-kontakt-form select:focus,
.lex-kontakt-form textarea:focus {
    outline: none;
    border-color: var(--lex-primary);
    box-shadow: 0 0 0 3px rgba(var(--lex-primary-rgb), 0.15);
}
.lex-kontakt-form textarea { resize: vertical; min-height: 8rem; }

.lex-kontakt-form__captcha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    background: rgba(var(--lex-primary-rgb), 0.04);
    border: 1px solid var(--lex-gray-100);
    padding: 1rem 1.25rem;
}
.lex-kontakt-form__captcha-label {
    font-size: 0.95rem;
    color: var(--lex-gray-800);
    margin: 0;
}
.lex-kontakt-form__captcha-label strong { color: var(--lex-primary); margin-left: 0.25rem; }
.lex-kontakt-form__captcha input[type="number"] {
    width: 6rem;
    padding: 0.55rem 0.75rem;
    text-align: center;
    font-weight: 700;
}
.lex-kontakt-form__captcha-help {
    color: var(--lex-secondary);
    font-size: 0.8125rem;
    flex-basis: 100%;
}

.lex-kontakt-form__privacy {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.95rem;
    color: var(--lex-gray-800);
    line-height: 1.5;
}
.lex-kontakt-form__privacy input[type="checkbox"] {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.2rem;
    accent-color: var(--lex-primary);
    border-radius: 0;
    cursor: pointer;
}
.lex-kontakt-form__privacy label { cursor: pointer; }
.lex-kontakt-form__privacy a {
    color: var(--lex-primary);
    text-decoration: underline;
    font-weight: 600;
}

.lex-kontakt-form__status.hidden,
.lex-kontakt-form__success.hidden,
.lex-kontakt-form__error.hidden,
.lex-kontakt-form .button-loading.hidden { display: none !important; }

.lex-kontakt-form__success,
.lex-kontakt-form__error {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.25rem 1.4rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.45;
    border-radius: 0;
    border-left: 4px solid transparent;
}
.lex-kontakt-form__success svg,
.lex-kontakt-form__error svg {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
    stroke-width: 2.4;
}
.lex-kontakt-form__success {
    background: #e8f7ed;
    color: #136a2a;
    border-color: #B7DCC4;
    border-left-color: #1c8f3a;
}
.lex-kontakt-form__error {
    background: #fdecea;
    color: #a3170f;
    border-color: #EDB6B6;
    border-left-color: #d6342b;
}

/* Submit-Button – LEX Gelb (überschreibt Parent-Theme-Override mit !important) */
.lex-kontakt-form .lex-kontakt-form__submit,
form .lex-kontakt-form__submit.contact-form-submit,
.sauriatheme-contact-form button[type="submit"].lex-kontakt-form__submit {
    width: 100%;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1.125rem 2rem;
    font-size: 1.0625rem;
    font-weight: 700;
    font-family: var(--lex-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    border: 2px solid var(--lex-cta) !important;
    border-radius: 0 !important;
    background: var(--lex-cta) !important;
    background-color: var(--lex-cta) !important;
    color: var(--lex-primary) !important;
    box-shadow: 0 6px 18px -8px rgba(var(--lex-cta-rgb), 0.55);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.lex-kontakt-form .lex-kontakt-form__submit:hover,
form .lex-kontakt-form__submit.contact-form-submit:hover,
.sauriatheme-contact-form button[type="submit"].lex-kontakt-form__submit:hover {
    background: var(--lex-cta-dark) !important;
    background-color: var(--lex-cta-dark) !important;
    border-color: var(--lex-cta-dark) !important;
    color: var(--lex-primary) !important;
    box-shadow: 0 10px 24px -8px rgba(var(--lex-cta-rgb), 0.7);
    transform: translateY(-1px);
}
.lex-kontakt-form .lex-kontakt-form__submit:focus-visible {
    outline: 3px solid var(--lex-primary);
    outline-offset: 3px;
}
.lex-kontakt-form__submit:disabled,
.lex-kontakt-form__submit[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
}
.lex-kontakt-form__submit .button-icon {
    display: inline-flex;
    align-items: center;
    transition: transform 0.25s ease;
}
.lex-kontakt-form__submit:hover .button-icon { transform: translateX(3px); }
.lex-kontakt-form__submit .button-icon svg,
.lex-kontakt-form__submit .button-loading svg { display: block; }
.lex-spin { animation: lexSpin 0.85s linear infinite; }
@keyframes lexSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---------- Team-Slider im Aside ---------- */
.lex-kontakt-team {
    margin-top: 0.5rem;
    background: var(--lex-white);
    border: 1px solid var(--lex-gray-100);
    border-left: 4px solid var(--lex-primary);
    padding: 1.5rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.lex-kontakt-team__head { display: flex; flex-direction: column; gap: 0.25rem; }
.lex-kontakt-team__eyebrow {
    color: var(--lex-secondary);
    font-style: italic;
    font-size: 0.9375rem;
}
.lex-kontakt-team__title {
    font-family: var(--lex-font-heading);
    color: var(--lex-primary);
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
}
.lex-kontakt-team__lead {
    margin: 0;
    color: var(--lex-gray-800);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Slider-Override: kompakte Variante des kanzlei-team-sliders.
   Wir behalten die JS-Hooks (.lex-kanzlei-team-slide), passen nur Größen an. */
.lex-kontakt-team-slider {
    margin: 0;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.lex-kontakt-team-slider__viewport {
    overflow: hidden;
    width: 100%;
    /* Sanft ausblendender Rand rechts, deutet "weiter" an */
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 88%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0%, #000 88%, transparent 100%);
}
.lex-kontakt-team-slider__track {
    display: flex;
    gap: 0.875rem;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.lex-kontakt-team-slider .lex-kontakt-team-slide {
    flex: 0 0 calc((100% - 0.875rem * 2) / 3); /* 3 sichtbare Slides + Maske */
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--lex-gray-100);
    border-radius: 0;
    box-shadow: 0 4px 14px -8px rgba(var(--lex-primary-rgb), 0.25);
}
.lex-kontakt-team-slider .lex-kontakt-team-slide__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.95);
    transition: transform 0.6s ease, filter 0.4s ease;
}
.lex-kontakt-team-slider .lex-kontakt-team-slide:hover .lex-kontakt-team-slide__image {
    transform: scale(1.04);
    filter: saturate(1.05);
}
.lex-kontakt-team-slider .lex-kontakt-team-slide__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.875rem 0.75rem 0.625rem;
    background: linear-gradient(180deg, rgba(40,85,137,0) 0%, rgba(27,63,105,0.92) 100%);
    color: var(--lex-white);
    font-family: var(--lex-font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01em;
}
.lex-kontakt-team-slider .lex-kontakt-team-slide__label span { display: block; }

/* Mittlere Aside-Breiten: 2 sichtbar */
@media (max-width: 1280px) {
    .lex-kontakt-team-slider .lex-kontakt-team-slide {
        flex-basis: calc((100% - 0.875rem) / 2);
    }
}
/* Sehr schmal (Mobile, Aside auf voller Breite): 2 sichtbar bleiben */
@media (max-width: 480px) {
    .lex-kontakt-team-slider .lex-kontakt-team-slide {
        flex-basis: calc((100% - 0.875rem) / 2);
    }
}

/* ---------- Anfahrt-Section ---------- */
.lex-kontakt-anfahrt {
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: var(--lex-primary);
    color: var(--lex-white);
}
.lex-kontakt-anfahrt__head { margin-bottom: 2.5rem; max-width: 42rem; }
.lex-kontakt-anfahrt__eyebrow {
    color: var(--lex-cta);
    font-style: italic;
    font-size: 1rem;
    display: inline-block;
    margin-bottom: 0.5rem;
}
.lex-kontakt-anfahrt__headline {
    font-family: var(--lex-font-heading);
    color: var(--lex-white);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    margin: 0;
    line-height: 1.15;
}
.lex-kontakt-anfahrt__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.5rem;
}
.lex-kontakt-anfahrt__col {
    background: rgba(255,255,255,0.06);
    padding: 1.75rem;
    border-top: 3px solid var(--lex-cta);
}
.lex-kontakt-anfahrt__col h3 {
    font-family: var(--lex-font-heading);
    margin: 0 0 0.5rem;
    color: var(--lex-white);
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.lex-kontakt-anfahrt__col p {
    margin: 0;
    color: rgba(255,255,255,0.85);
    font-size: 1rem;
    line-height: 1.65;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .lex-kontakt-form-section__grid { grid-template-columns: 1fr; }
    .lex-kontakt-form-section__aside { position: static; }
}
@media (max-width: 720px) {
    .lex-kontakt-form__row--2 { grid-template-columns: 1fr; }
    .lex-kontakt-map__overlay {
        position: static;
        max-width: none;
        margin-top: 0;
        box-shadow: 0 4px 16px -8px rgba(var(--lex-primary-rgb), 0.18);
    }
    .lex-kontakt-map__image { aspect-ratio: 4 / 3; }
    .lex-kontakt-card { padding: 1.5rem 1.25rem; }
}


/* ==========================================================================
   Typografie-Angleichung: Blog-Detail + News an Startseite (Hero-Pattern)
   Stellt sicher, dass Heading-Familie & Weight zwischen
   .lex-hero__claim, .lex-news-overview__title und .lex-blog-single__title
   identisch sind (Parent-Theme überschreibt sonst auf Inter 400).
   ========================================================================== */
.lex-news-overview__title,
.lex-blog-single__title {
    font-family: var(--lex-font-heading), 'Inter', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--lex-primary);
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.lex-news-overview__hero-content,
.lex-news-overview__hero-content .lex-news-overview__title {
    color: #fff;
}

.lex-news-overview__hero--plain .lex-news-overview__title {
    color: var(--lex-primary);
}

.lex-news-overview__eyebrow,
.lex-blog-single__category {
    font-family: var(--lex-font-heading), 'Inter', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em;
}

/* Lead/Excerpt + Meta + Article: gleiche Body-Familie wie Home */
.lex-news-overview__lead,
.lex-blog-single__excerpt,
.lex-blog-single__meta,
.lex-blog-single__author-label,
.lex-blog-single__author-name,
.lex-blog-single__article,
.lex-blog-single__article p,
.lex-blog-single__article ul,
.lex-blog-single__article ol,
.lex-blog-single__article blockquote,
.lex-blog-single__article figcaption {
    font-family: var(--lex-font-body), 'Inter', sans-serif !important;
}

/* Artikel-Headlines auf Blog-Detail in gleicher Family wie Hero-Title */
.lex-blog-single__article h2,
.lex-blog-single__article h3,
.lex-blog-single__article h4,
.lex-blog-single__related-copy h3,
.lex-blog-single__cta-inner h2 {
    font-family: var(--lex-font-heading), 'Inter', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
}


/* ==========================================================================
   KARRIERE-TEAM-WIDGET (template-parts/karriere-team-widget.php)
   Wird auf jeder Stellen-Detailseite ausgegeben.
   ========================================================================== */

.lex-team-widget {
    position: relative;
    background: var(--lex-primary);
    color: var(--lex-white);
    padding-block: clamp(3.5rem, 7vw, 6rem);
    overflow: hidden;
    isolation: isolate;
}
.lex-team-widget::before {
    content: "";
    position: absolute;
    inset: -10% -5% auto auto;
    width: 36rem;
    height: 36rem;
    background: radial-gradient(circle at 30% 30%, rgba(27, 95, 170, 0.18), transparent 60%);
    z-index: -1;
    pointer-events: none;
}
.lex-team-widget::after {
    content: "";
    position: absolute;
    inset: auto auto -20% -10%;
    width: 28rem;
    height: 28rem;
    background: radial-gradient(circle at 50% 50%, rgba(58, 110, 168, 0.45), transparent 65%);
    z-index: -1;
    pointer-events: none;
}

.lex-team-widget__inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

/* ----- Copy-Spalte ------ */
.lex-team-widget__eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--lex-cta);
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(27, 95, 170, 0.4);
    background: rgba(27, 95, 170, 0.08);
    margin-bottom: 1.25rem;
}
.lex-team-widget__headline {
    color: var(--lex-white);
    font-size: clamp(1.85rem, 4vw, 2.85rem);
    line-height: 1.05;
    text-transform: uppercase;
    margin: 0 0 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.lex-team-widget__lead {
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.0625rem;
    line-height: 1.6;
    margin: 0 0 1.75rem;
    max-width: 38ch;
}
.lex-team-widget__lead strong {
    color: var(--lex-cta);
    font-weight: 700;
}

/* ----- Avatar-Stack ------ */
.lex-team-widget__avatars {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    align-items: center;
}
.lex-team-widget__avatar {
    --avatar-size: 4.25rem;
    position: relative;
    width: var(--avatar-size);
    height: var(--avatar-size);
    margin-left: -1.1rem;
    border-radius: 50%;
    border: 3px solid var(--lex-primary);
    background: var(--lex-primary-dark);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.25s;
    z-index: calc(20 - var(--i, 0));
    overflow: hidden;
}
.lex-team-widget__avatar:first-child {
    margin-left: 0;
}
.lex-team-widget__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
.lex-team-widget__avatar-name {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.5rem);
    transform: translateX(-50%) translateY(0.4rem);
    background: var(--lex-white);
    color: var(--lex-primary);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.3rem 0.6rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.lex-team-widget__avatar-name::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: var(--lex-white);
}
.lex-team-widget__avatar:hover,
.lex-team-widget__avatar:focus-within {
    transform: translateY(-6px) scale(1.08);
    border-color: var(--lex-cta);
    z-index: 99;
}
.lex-team-widget__avatar:hover .lex-team-widget__avatar-name,
.lex-team-widget__avatar:focus-within .lex-team-widget__avatar-name {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* +N-Badge */
.lex-team-widget__avatar--more {
    background: var(--lex-cta);
    border-color: var(--lex-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lex-team-widget__avatar--more .lex-team-widget__avatar-plus {
    color: var(--lex-primary);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: -0.01em;
}
.lex-team-widget__avatar--more:hover {
    transform: translateY(-6px) scale(1.08);
    border-color: var(--lex-cta);
}

/* ----- Actions ------ */
.lex-team-widget__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
}
.lex-team-widget__actions .lex-btn {
    padding: 0.95rem 1.6rem;
    font-size: 1rem;
}
.lex-team-widget__secondary {
    color: var(--lex-white);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.98rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding-bottom: 0.15rem;
    transition: color 0.2s, border-color 0.2s;
}
.lex-team-widget__secondary:hover,
.lex-team-widget__secondary:focus-visible {
    color: var(--lex-cta);
    border-color: var(--lex-cta);
}

/* ----- Büro-Bilder rechts (kompaktes 2x2-Grid, gleiche Höhe) ------ */
.lex-team-widget__media {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
    align-self: stretch;
}
.lex-team-widget__tile {
    margin: 0;
    overflow: hidden;
    position: relative;
    aspect-ratio: 4 / 3;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}
.lex-team-widget__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lex-team-widget__tile:hover img {
    transform: scale(1.05);
}

@media (max-width: 1100px) {
    .lex-team-widget__inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .lex-team-widget__avatar {
        --avatar-size: 3.4rem;
        margin-left: -0.85rem;
    }
    .lex-team-widget__actions {
        gap: 0.75rem 1rem;
    }
}

/* ==========================================================================
   Leistungen Page (Slug: leistungen) – page-leistungen.php
   ========================================================================== */
.page-template-page-leistungen {
    background: var(--lex-gray-200);
}

.lex-leistungen-page {
    padding: 0 0 5rem;
}

/* ----- HERO / Intro ------------------------------------------------------- */
.lex-leistungen-hero {
    padding: 2.5rem 0 3rem;
}

.lex-leistungen-hero__eyebrow {
    margin: 0 0 1rem;
    font-family: var(--lex-font-heading);
    font-weight: 700;
    color: var(--lex-primary-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1rem;
}

.lex-leistungen-hero__title {
    margin: 0 0 1.5rem;
    color: var(--lex-primary-dark);
    font-size: clamp(2.1rem, 3.4vw, 3.4rem);
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.lex-leistungen-hero__lead {
    max-width: none;
}

.lex-leistungen-hero__lead p {
    margin: 0 0 1rem;
    color: #40577b;
    font-size: 1.125rem;
    line-height: 1.7;
}


/* ----- Übersichts-Kacheln (Anker-Navigation) ------------------------------ */
.lex-leistungen-overview {
    padding: 3rem 0;
}

.lex-leistungen-overview__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 1rem;
}

.lex-leistungen-overview__item {
    margin: 0;
    display: flex;
    min-height: 6.5rem;
}

.lex-leistungen-overview__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.25rem 1.4rem;
    background: #ffffff;
    color: var(--lex-primary-dark);
    text-decoration: none;
    font-family: var(--lex-font-heading);
    font-weight: 700;
    font-size: 1.125rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.lex-leistungen-overview__link:hover,
.lex-leistungen-overview__link:focus-visible {
    background: var(--lex-primary);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(27, 95, 170, 0.18);
}

.lex-leistungen-overview__num {
    flex: 0 0 auto;
    font-size: 1rem;
    color: var(--lex-cta-dark);
    font-weight: 800;
    letter-spacing: 0.05em;
}

.lex-leistungen-overview__link:hover .lex-leistungen-overview__num,
.lex-leistungen-overview__link:focus-visible .lex-leistungen-overview__num {
    color: var(--lex-cta);
}

.lex-leistungen-overview__title {
    flex: 1 1 auto;
}

.lex-leistungen-overview__arrow {
    flex: 0 0 auto;
    font-size: 1.25rem;
    color: var(--lex-cta-dark);
    transition: transform 0.2s ease;
}

.lex-leistungen-overview__link:hover .lex-leistungen-overview__arrow {
    color: var(--lex-cta);
    transform: translateX(3px);
}


/* ----- Detail-Sektionen --------------------------------------------------- */
.lex-leistungen-band {
    padding: 3rem 0;
    scroll-margin-top: 8rem;
}

.lex-leistungen-band:nth-of-type(odd) {
    background: var(--lex-gray-200);
}

.lex-leistungen-band:nth-of-type(even) {
    background: #ffffff;
}

.lex-leistungen-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 3rem;
    align-items: start;
}

.lex-leistungen-band--reverse .lex-leistungen-split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.lex-leistungen-band--reverse .lex-leistungen-media {
    order: 2;
}

.lex-leistungen-band--reverse .lex-leistungen-copy {
    order: 1;
}

.lex-leistungen-media {
    margin: 0;
    overflow: hidden;
    background: #d9dee5;
}

.lex-leistungen-media__image {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}

/* ----- Visual-Kachel (CI-Farben statt Bild) ------------------------------ */
.lex-leistungen-visual {
    position: relative;
    aspect-ratio: 4 / 3;
    width: 100%;
    background:
        linear-gradient(135deg, #1f4570 0%, var(--lex-primary) 45%, #2f6aa8 100%);
    color: #ffffff;
    isolation: isolate;
    overflow: hidden;
}

.lex-leistungen-visual__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 55%),
        radial-gradient(80% 60% at 100% 100%, rgba(27, 95, 170, 0.18) 0%, rgba(27, 95, 170, 0) 60%);
    z-index: 0;
    pointer-events: none;
}

.lex-leistungen-visual__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 44px 44px;
    background-position: 0 0;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.25) 75%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.25) 75%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
    pointer-events: none;
    animation: lexVisualGridDrift 22s linear infinite;
}

.lex-leistungen-visual__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(28px);
    opacity: 0.55;
    z-index: 1;
    pointer-events: none;
    will-change: transform;
}

.lex-leistungen-visual__orb--a {
    width: 55%;
    aspect-ratio: 1 / 1;
    top: -12%;
    right: -10%;
    background: radial-gradient(circle at 30% 30%, rgba(27, 95, 170, 0.55), rgba(27, 95, 170, 0) 65%);
    animation: lexVisualOrbA 14s ease-in-out infinite alternate;
}

.lex-leistungen-visual__orb--b {
    width: 50%;
    aspect-ratio: 1 / 1;
    bottom: -18%;
    left: -12%;
    background: radial-gradient(circle at 70% 70%, rgba(144, 184, 229, 0.45), rgba(144, 184, 229, 0) 65%);
    animation: lexVisualOrbB 18s ease-in-out infinite alternate;
}

.lex-leistungen-visual__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: clamp(1.75rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
}

.lex-leistungen-visual__top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.lex-leistungen-visual__bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.lex-leistungen-visual__icon {
    width: clamp(3rem, 6vw, 4.25rem);
    height: clamp(3rem, 6vw, 4.25rem);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: lexVisualIconFloat 6s ease-in-out infinite;
    flex-shrink: 0;
}

.lex-leistungen-visual__bereich {
    margin: 1.25rem 0 0;
    font-family: var(--lex-font-heading);
    font-weight: 600;
    color: #ffffff;
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(8px);
    animation: lexVisualFadeUp 0.9s ease-out 0.05s forwards;
}

.lex-leistungen-visual__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.lex-leistungen-visual__kicker {
    margin: 0;
    font-family: var(--lex-font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    opacity: 0;
    transform: translateY(8px);
    animation: lexVisualFadeUp 0.9s ease-out 0.35s forwards;
}

.lex-leistungen-visual__headline {
    margin: 0.5rem 0 0;
    font-family: var(--lex-font-heading);
    font-weight: 400;
    color: #ffffff;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    line-height: 1.3;
    letter-spacing: 0.005em;
    text-transform: none;
    opacity: 0;
    transform: translateY(10px);
    animation: lexVisualFadeUp 1s ease-out 0.2s forwards;
}

.lex-leistungen-visual__tagline {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    max-width: 28ch;
    opacity: 0;
    transform: translateY(10px);
    animation: lexVisualFadeUp 1s ease-out 0.4s forwards;
}

.lex-leistungen-visual__rule {
    display: block;
    width: clamp(3rem, 8vw, 5rem);
    height: 3px;
    background: var(--lex-cta);
    margin-top: 1rem;
    transform-origin: left center;
    animation: lexVisualRuleGrow 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s both,
               lexVisualRulePulse 4.5s ease-in-out 1.7s infinite;
}

@keyframes lexVisualFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes lexVisualRuleGrow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes lexVisualRulePulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

@keyframes lexVisualIconFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

@keyframes lexVisualOrbA {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-6%, 4%, 0) scale(1.08); }
}

@keyframes lexVisualOrbB {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(5%, -3%, 0) scale(1.1); }
}

@keyframes lexVisualGridDrift {
    0%   { background-position: 0 0; }
    100% { background-position: 44px 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .lex-leistungen-visual__grid,
    .lex-leistungen-visual__orb,
    .lex-leistungen-visual__icon,
    .lex-leistungen-visual__bereich,
    .lex-leistungen-visual__kicker,
    .lex-leistungen-visual__headline,
    .lex-leistungen-visual__tagline,
    .lex-leistungen-visual__rule {
        animation: none !important;
    }

    .lex-leistungen-visual__bereich,
    .lex-leistungen-visual__kicker,
    .lex-leistungen-visual__headline,
    .lex-leistungen-visual__tagline {
        opacity: 1;
        transform: none;
    }

    .lex-leistungen-visual__rule {
        transform: scaleX(1);
    }
}

.lex-leistungen-eyebrow {
    margin: 0 0 0.85rem;
    font-family: var(--lex-font-heading);
    font-weight: 700;
    color: var(--lex-cta-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.95rem;
}

.lex-leistungen-eyebrow--light {
    color: var(--lex-cta-light);
}

.lex-leistungen-title {
    margin: 0 0 0.65rem;
    color: var(--lex-primary-dark);
    font-size: clamp(1.9rem, 3vw, 2.75rem);
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.lex-leistungen-subtitle {
    margin: 0 0 1.5rem;
    color: var(--lex-primary-light);
    font-family: var(--lex-font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 1.125rem;
}

.lex-leistungen-intro,
.lex-leistungen-lead {
    margin: 0 0 1.1rem;
    color: #40577b;
    font-size: 1.125rem;
    line-height: 1.7;
}

.lex-leistungen-lead {
    color: var(--lex-primary-dark);
    font-weight: 600;
}

.lex-leistungen-list-title {
    margin: 1.8rem 0 0.9rem;
    color: var(--lex-primary-dark);
    font-family: var(--lex-font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.lex-leistungen-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lex-leistungen-list li {
    position: relative;
    padding: 0.55rem 0 0.55rem 1.85rem;
    border-bottom: 1px solid rgba(27, 95, 170, 0.12);
    color: #40577b;
    font-size: 1.125rem;
    line-height: 1.55;
}

.lex-leistungen-list li:last-child {
    border-bottom: 0;
}

.lex-leistungen-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.05rem;
    width: 0.85rem;
    height: 2px;
    background: var(--lex-cta);
}


/* ----- Erfolgsreport (USP) ------------------------------------------------ */
.lex-leistungen-erfolgsreport {
    padding: 4rem 0;
    background: var(--lex-primary);
    color: #ffffff;
}

.lex-leistungen-erfolgsreport__inner {
    max-width: none;
}

.lex-leistungen-erfolgsreport__title,
.lex-leistungen-erfolgsreport__lead,
.lex-leistungen-erfolgsreport__copy {
    max-width: 64rem;
}

.lex-leistungen-erfolgsreport__title {
    margin: 0 0 1.5rem;
    color: #ffffff;
    font-size: clamp(1.9rem, 3vw, 2.75rem);
    line-height: 1.15;
    text-transform: uppercase;
}

.lex-leistungen-erfolgsreport__copy p {
    margin: 0 0 1.1rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.125rem;
    line-height: 1.7;
}

.lex-leistungen-erfolgsreport__copy p:last-child {
    margin-bottom: 0;
}


/* ----- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
    .lex-leistungen-overview__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .lex-leistungen-split,
    .lex-leistungen-band--reverse .lex-leistungen-split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .lex-leistungen-band--reverse .lex-leistungen-media,
    .lex-leistungen-band--reverse .lex-leistungen-copy {
        order: initial;
    }

    .lex-leistungen-media__image {
        aspect-ratio: 16 / 10;
    }

    .lex-leistungen-visual {
        aspect-ratio: auto;
        min-height: 26rem;
    }

    .lex-leistungen-visual__inner {
        height: auto;
        min-height: 26rem;
        padding: 2.25rem 1.75rem;
        gap: 2rem;
    }
}

@media (max-width: 640px) {
    .lex-leistungen-page {
        padding-top: 0.5rem;
    }

    .lex-leistungen-hero {
        padding: 1.75rem 0 2rem;
    }

    .lex-leistungen-overview__grid {
        grid-template-columns: 1fr;
    }

    .lex-leistungen-band {
        padding: 2.25rem 0;
    }

    .lex-leistungen-erfolgsreport {
        padding: 2.75rem 0;
    }

    .lex-leistungen-visual {
        min-height: 24rem;
    }

    .lex-leistungen-visual__inner {
        min-height: 24rem;
        padding: 2rem 1.5rem;
        gap: 1.75rem;
    }

    .lex-leistungen-visual__bereich {
        font-size: clamp(1.5rem, 5.5vw, 2rem);
        margin-top: 1rem;
    }

    .lex-leistungen-visual__headline {
        font-size: clamp(1.15rem, 4.5vw, 1.5rem);
        line-height: 1.3;
    }

    .lex-leistungen-visual__kicker {
        font-size: 0.78rem;
        letter-spacing: 0.1em;
    }
}


/* ============================================================
 * Leistungen – Mandanten-Versprechen (4 Karten unter dem Hero)
 * ============================================================ */
.lex-leistungen-versprechen {
    padding: 2.5rem 0 3.5rem;
    background: #ffffff;
}

.lex-leistungen-versprechen__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.lex-leistungen-versprechen__card {
    padding: 1.75rem 1.5rem;
    background: var(--lex-gray-50);
    border-top: 3px solid var(--lex-cta);
}

.lex-leistungen-versprechen__num {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--lex-primary);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
}

.lex-leistungen-versprechen__title {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    line-height: 1.25;
    color: var(--lex-primary);
}

.lex-leistungen-versprechen__card p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--lex-gray-800);
}

@media (max-width: 1100px) {
    .lex-leistungen-versprechen__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .lex-leistungen-versprechen__grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
 * Leistungen – Erfolgsreport 3-Säulen-Modell (überschreibt alten Block)
 * ============================================================ */
.lex-leistungen-erfolgsreport__lead {
    max-width: 50rem;
    margin: 0 0 2.5rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.125rem;
    line-height: 1.6;
}

.lex-leistungen-saeulen {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.lex-leistungen-saeule {
    padding: 1.75rem 1.5rem 2rem;
    background: rgba(255, 255, 255, 0.07);
    border-top: 3px solid var(--lex-cta);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.lex-leistungen-saeule__num {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--lex-cta);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
}

.lex-leistungen-saeule__title {
    margin: 0 0 0.25rem;
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.lex-leistungen-saeule__sub {
    margin: 0 0 1rem;
    color: var(--lex-cta-light);
    font-size: 1.05rem;
    font-weight: 600;
}

.lex-leistungen-saeule__text {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    line-height: 1.6;
}

.lex-leistungen-saeule__meta {
    margin: auto 0 0;
    padding-top: 0;
    border: 0;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    line-height: 1.55;
}

.lex-leistungen-saeule__meta::before,
.lex-leistungen-saeule__text::after {
    content: none;
    display: none;
}

@media (max-width: 1100px) {
    .lex-leistungen-saeulen {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
 * Leistungen – Finanzstatus-Block (in Bereich 02 Privatpersonen)
 * ============================================================ */
.lex-leistungen-finanzstatus {
    margin-top: 2.5rem;
    padding: 2rem 1.75rem;
    background: var(--lex-gray-50);
    border-left: 4px solid var(--lex-cta);
}

.lex-leistungen-finanzstatus__head {
    margin-bottom: 1.25rem;
}

.lex-leistungen-finanzstatus__title {
    margin: 0 0 0.5rem;
    color: var(--lex-primary);
    font-size: 1.5rem;
    line-height: 1.2;
}

.lex-leistungen-finanzstatus__lead {
    margin: 0;
    color: var(--lex-gray-800);
    font-size: 1.05rem;
    line-height: 1.55;
}

.lex-leistungen-finanzstatus__list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 1.5rem;
}

.lex-leistungen-finanzstatus__list li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--lex-gray-800);
}

.lex-leistungen-finanzstatus__list li::before {
    content: "?";
    position: absolute;
    left: 0;
    top: 0;
    width: 1.1rem;
    height: 1.1rem;
    line-height: 1.1rem;
    text-align: center;
    background: var(--lex-cta);
    color: var(--lex-primary);
    font-weight: 700;
    font-size: 0.85rem;
}

.lex-leistungen-finanzstatus__usp {
    margin: 0;
    padding: 1.1rem 1.25rem;
    background: #ffffff;
    border-left: 3px solid var(--lex-primary);
    color: var(--lex-gray-800);
    font-size: 1.05rem;
    line-height: 1.55;
}

.lex-leistungen-finanzstatus__usp strong {
    color: var(--lex-primary);
}

@media (max-width: 800px) {
    .lex-leistungen-finanzstatus__list {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
 * Leistungen – Experten-Block Christian Kamml (in Bereich 03)
 * ============================================================ */
.lex-leistungen-experte {
    margin-top: 2.5rem;
    padding: 2rem 1.75rem;
    background: var(--lex-primary);
    color: #ffffff;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
    align-items: start;
}

.lex-leistungen-experte--no-media {
    grid-template-columns: 1fr;
}

.lex-leistungen-experte__media {
    overflow: hidden;
    background: var(--lex-primary-dark, #1f4570);
}

.lex-leistungen-experte__image {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center top;
}

.lex-leistungen-experte__copy .lex-leistungen-eyebrow {
    color: var(--lex-cta);
    margin-bottom: 0.4rem;
}

.lex-leistungen-experte__title {
    margin: 0 0 0.4rem;
    color: #ffffff;
    font-size: 1.65rem;
    line-height: 1.2;
}

.lex-leistungen-experte__sub {
    margin: 0 0 1.2rem;
    color: var(--lex-cta-light);
    font-size: 1.05rem;
    font-weight: 600;
}

.lex-leistungen-experte__copy p {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.05rem;
    line-height: 1.6;
}

.lex-leistungen-experte__list {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1.25rem;
}

.lex-leistungen-experte__list li {
    position: relative;
    padding-left: 1.25rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1rem;
    line-height: 1.5;
}

.lex-leistungen-experte__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.55rem;
    height: 0.55rem;
    background: var(--lex-cta);
}

@media (max-width: 800px) {
    .lex-leistungen-experte {
        grid-template-columns: 1fr;
    }

    .lex-leistungen-experte__media {
        max-width: 100%;
    }

    .lex-leistungen-experte__list {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
 * Front-Page – Digitale Steuerkanzlei (Mandantenportal-Sektion)
 * ============================================================ */
.lex-digital {
    background: var(--lex-gray-50);
    padding: clamp(3rem, 7vw, 5rem) 0;
}

.lex-digital__head {
    max-width: 56rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.lex-digital__eyebrow {
    margin: 0 0 0.75rem;
    color: var(--lex-primary);
    font-weight: 600;
    letter-spacing: 0.04em;
    font-size: 1rem;
}

.lex-digital__headline {
    margin: 0 0 1rem;
    color: var(--lex-primary);
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    line-height: 1.15;
}

.lex-digital__lead {
    margin: 0;
    color: var(--lex-gray-800);
    font-size: 1.125rem;
    line-height: 1.6;
}

.lex-digital__grid {
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.lex-digital__card {
    padding: 1.75rem 1.5rem;
    background: #ffffff;
    border-top: 3px solid var(--lex-primary);
}

.lex-digital__card-title {
    margin: 0 0 0.5rem;
    color: var(--lex-primary);
    font-size: 1.2rem;
    line-height: 1.25;
}

.lex-digital__card-text {
    margin: 0;
    color: var(--lex-gray-800);
    font-size: 1rem;
    line-height: 1.55;
}

.lex-digital__actions {
    text-align: center;
}

@media (max-width: 1100px) {
    .lex-digital__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .lex-digital__grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
 * Karriere – Trust-Statement (kompakte Pull-Quote unter Headline)
 * ============================================================ */
.lex-kar-warum__trust {
    margin: 0.75rem 0 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--lex-gray-50);
    border-left: 3px solid var(--lex-cta);
    color: var(--lex-primary);
    font-size: 1.05rem;
    line-height: 1.5;
    font-weight: 500;
}

/* ==========================================================================
   Legal Pages (Impressum, Datenschutz, EU AI Act, Barrierefreiheit, Cookies)
   ========================================================================== */
.lex-legal {
    background: var(--lex-white);
}

.lex-legal__header {
    padding: 2.5rem 0 2rem;
    background: linear-gradient(180deg, var(--lex-gray-50) 0%, var(--lex-white) 100%);
    border-bottom: 1px solid var(--lex-gray-100);
}

.lex-legal__eyebrow {
    display: inline-block;
    font-family: var(--lex-font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lex-secondary-dark);
    margin-bottom: 0.75rem;
}

.lex-legal__title {
    font-family: var(--lex-font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.15;
    color: var(--lex-primary);
    margin: 0 0 1rem;
}

.lex-legal__rule {
    display: block;
    width: 72px;
    height: 4px;
    background: var(--lex-cta);
    border-radius: 0;
}

.lex-legal__body {
    padding: 3rem 0 5rem;
}

.lex-legal__article {
    background: var(--lex-white);
}

.lex-legal__content {
    font-family: var(--lex-font-body);
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--lex-gray-800);
    font-weight: 400;
}

.lex-legal__content > *:first-child {
    margin-top: 0;
}

.lex-legal__content > *:last-child {
    margin-bottom: 0;
}

.lex-legal__content p {
    margin: 0 0 1.25rem;
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--lex-gray-800);
}

.lex-legal__content h2 {
    font-family: var(--lex-font-heading);
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    font-weight: 800;
    color: var(--lex-primary);
    margin: 2.75rem 0 1rem;
    line-height: 1.25;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--lex-gray-100);
}

.lex-legal__content h3 {
    font-family: var(--lex-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--lex-primary);
    margin: 2rem 0 0.75rem;
    line-height: 1.3;
}

.lex-legal__content h4 {
    font-family: var(--lex-font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--lex-primary-dark);
    margin: 1.5rem 0 0.5rem;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lex-legal__content ul,
.lex-legal__content ol {
    margin: 0 0 1.5rem;
    padding-left: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--lex-gray-800);
}

.lex-legal__content li {
    margin-bottom: 0.5rem;
}

.lex-legal__content li::marker {
    color: var(--lex-cta-dark);
    font-weight: 700;
}

.lex-legal__content a {
    color: var(--lex-primary);
    text-decoration: underline;
    text-decoration-color: var(--lex-cta);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.lex-legal__content a:hover,
.lex-legal__content a:focus {
    color: var(--lex-cta-dark);
    text-decoration-color: var(--lex-primary);
}

.lex-legal__content strong,
.lex-legal__content b {
    color: var(--lex-primary);
    font-weight: 700;
}

.lex-legal__content blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: var(--lex-gray-50);
    border-left: 4px solid var(--lex-cta);
    color: var(--lex-primary);
    font-size: 1.0625rem;
    line-height: 1.6;
    font-style: normal;
}

.lex-legal__content blockquote p:last-child {
    margin-bottom: 0;
}

.lex-legal__content hr {
    margin: 2.5rem 0;
    border: 0;
    border-top: 1px solid var(--lex-gray-200);
}

.lex-legal__content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 1rem;
}

.lex-legal__content th,
.lex-legal__content td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--lex-gray-200);
    vertical-align: top;
}

.lex-legal__content th {
    background: var(--lex-gray-50);
    color: var(--lex-primary);
    font-weight: 700;
    font-family: var(--lex-font-heading);
}

.lex-legal__content address {
    font-style: normal;
    margin: 0 0 1.25rem;
    color: var(--lex-gray-800);
}

.lex-legal__back {
    margin: 3rem 0 0;
    padding-top: 2rem;
    border-top: 1px solid var(--lex-gray-100);
    text-align: left;
}

.lex-legal__back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--lex-primary);
    font-family: var(--lex-font-heading);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.lex-legal__back-link:hover,
.lex-legal__back-link:focus {
    color: var(--lex-cta-dark);
}

.lex-legal__back-link:hover svg,
.lex-legal__back-link:focus svg {
    transform: translateX(-3px);
}

.lex-legal__back-link svg {
    transition: transform 0.2s ease;
}

/* CookieFirst-Tabellen sauber im LEX-Look */
.lex-legal #cookiefirst-policy-page {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.lex-legal #cookiefirst-policy-page table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.lex-legal #cookiefirst-policy-page th,
.lex-legal #cookiefirst-policy-page td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--lex-gray-200);
    text-align: left;
    vertical-align: top;
    word-break: break-word;
}

.lex-legal #cookiefirst-policy-page th {
    background: var(--lex-gray-50);
    color: var(--lex-primary);
    font-weight: 700;
    font-family: var(--lex-font-heading);
}

.lex-legal #cookiefirst-policy-page td {
    color: var(--lex-gray-800);
}

.lex-legal #cookiefirst-policy-page a {
    color: var(--lex-primary);
}

.lex-legal #cookiefirst-policy-page h2,
.lex-legal #cookiefirst-policy-page h3,
.lex-legal #cookiefirst-policy-page h4 {
    font-family: var(--lex-font-heading);
    color: var(--lex-primary);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .lex-legal__header {
        padding: 2rem 0 1.5rem;
    }
    .lex-legal__body {
        padding: 2rem 0 3.5rem;
    }
    .lex-legal__content,
    .lex-legal__content p,
    .lex-legal__content ul,
    .lex-legal__content ol {
        font-size: 1.0625rem;
    }
    .lex-legal #cookiefirst-policy-page table {
        font-size: 0.8125rem;
    }
    .lex-legal #cookiefirst-policy-page th,
    .lex-legal #cookiefirst-policy-page td {
        padding: 0.5rem 0.75rem;
    }
}

/* ==========================================================================
   RESPONSIVE FIXES – 2026-05 Audit (Smartphone / Tablet / Landscape /
   Widescreen / Ultrawide). Konsolidiert frühere fragmentierte Breakpoints.
   ========================================================================== */

/* --- 1) Header-Navigation: Lücke zwischen 1024px und Hamburger schließen
   Vorher: .lex-nav versteckt @max-1023, Hamburger versteckt @min-1024
   → bei genau 1024px war WEDER Nav noch Hamburger sichtbar. Außerdem
     versteckte sich .lex-header__cta @max-1024px unnötig auf Tablets >=768px.
   ------------------------------------------------------------------------- */
@media (max-width: 899.98px) {
    .lex-hamburger { display: flex !important; }
}
@media (min-width: 900px) {
    .lex-nav { display: block; }
    .lex-header__cta { display: inline-flex; }
}
/* CTAs auf engeren Desktops kompakter darstellen statt zu verstecken */
@media (min-width: 900px) and (max-width: 1180px) {
    .lex-header__cta {
        padding: .5rem .8rem !important;
        font-size: .82rem !important;
    }
    .lex-header__inner { gap: 1rem; padding: .75rem 1rem; }
    .lex-nav__list { gap: 1rem; }
    .lex-nav__list a { font-size: .92rem; padding: .4rem .15rem; }
}

/* --- 2) Container skaliert bis Ultrawide
   Vorher: .lex-container max-width: 1240px → auf 2560px viel toter Raum.
   Nutzt jetzt clamp() für sanftes Wachstum bis 1600px ab Widescreen.
   Header-Inner durfte schon 1400 → wir heben auf 1600 an für Konsistenz.
   ------------------------------------------------------------------------- */
.lex-container {
    max-width: min(1600px, 92vw);
    padding-inline: clamp(1rem, 3vw, 2rem);
}
@media (min-width: 1921px) {
    .lex-container {
        max-width: 1760px;
    }
}
.lex-header__inner {
    max-width: min(1760px, 96vw);
}

/* --- 3) Branchen-Grid: feste 3 Spalten auf Desktop
   9 Branchen → 3 Reihen × 3 Spalten, größere Kacheln.
   Mobile/Tablet weiterhin via Default-Regel (2/1 Spalten).
   ------------------------------------------------------------------------- */

/* --- 4) Front-Page „Zusammenarbeit" Grid (split-grid mit 3 Cols) skaliert
   Schon 3 Cols, aber auf Ultrawide ginge mehr. Lassen wir defaultmäßig.
   --- */

/* --- 5) Front-Page Leistungs-Grid (6 Cards) skaliert bis 6 Cols
   Vorher: 3 Cols (default), 1 Col @<=768. Auf Ultrawide alle 6 in 1 Reihe.
   ------------------------------------------------------------------------- */
@media (min-width: 1280px) {
    .lex-leistungen-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1800px) {
    .lex-leistungen-grid { grid-template-columns: repeat(6, 1fr); }
}

/* --- 6) News-Grid (Steuer-News + Kanzlei-News): bleibt 2-spaltig, aber
   die Kacheln werden auf Ultrawide nicht mehr "verloren" wirken weil
   .lex-container jetzt skaliert. Mehr brauchts hier nicht. */

/* --- 7) Mandantenstimmen / Reviews: Container-Skalierung reicht. */

/* --- 8) Footer-Grid auf Ultrawide etwas auflockern
   ------------------------------------------------------------------------- */
@media (min-width: 1600px) {
    .lex-footer__grid {
        gap: 3rem;
    }
}

/* --- 9) Karriere – Stellen-Grid skaliert bis 4 Cols, vermeidet leere
   Cards-Wirkung auf Landscape/Widescreen.
   Vorher: 3 Cols (>1100), 2 Cols (≤1100), 1 Col (≤600).
   Jetzt: zusätzlich 4 Cols (≥1500).
   ------------------------------------------------------------------------- */
@media (min-width: 1500px) {
    .lex-kar-stellen__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- 10) Leistungen – Overview-Grid: durchgehend 3 Spalten ab Desktop.
   Vorher: 3 Cols, ≤1100→2, ≤640→1. Auf 1024px blieb es bei 2 Cols (eng).
   Jetzt: 3 Cols schon ab 900px – auch auf Ultrawide (keine 4er-Reihe).
   ------------------------------------------------------------------------- */
@media (min-width: 900px) {
    .lex-leistungen-overview__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* --- 11) Kanzlei – Partner-Grid (4 Partner): gleiche Logik
   ------------------------------------------------------------------------- */
@media (min-width: 1500px) {
    .lex-team-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- 12) Hero-Section: brand-mark left rückt nicht ins inhaltliche Layout
   bis sehr breite Viewports, sonst überlappt es mit Content.
   Bestehende Regel @max-860 versteckt es schon. Auf Ultrawide etwas größer:
   ------------------------------------------------------------------------- */
@media (min-width: 1800px) {
    .lex-hero__brand-mark {
        width: clamp(420px, 30vw, 720px);
    }
}

/* --- 13) Min-Schriftgröße auf Smartphone erzwingen (Lesbarkeit) ----------- */
@media (max-width: 480px) {
    body { font-size: 1rem; }
    .lex-hero__sub,
    .lex-leistungen-band p,
    .lex-kar-warum__text p,
    .lex-stelle-content__body p {
        font-size: 1rem;
        line-height: 1.6;
    }
    /* Tap-Targets >= 44px Höhe */
    .lex-btn,
    .lex-leistungen-overview__link,
    .lex-kar-stelle {
        min-height: 44px;
    }
}

/* --- 14) Stelle-Detail Hero-Pills: bei sehr engen Viewports kleiner
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .lex-stelle-hero__pill {
        font-size: 0.75rem;
        padding: 0.3rem 0.7rem;
        letter-spacing: 0.03em;
    }
}

/* --- 15) Ultrawide-spezifische Type-Ramp: auf sehr großen Bildschirmen
   die Hero-Headlines etwas größer für visuelles Gleichgewicht.
   ------------------------------------------------------------------------- */
@media (min-width: 1800px) {
    .lex-hero__claim {
        font-size: clamp(2.5rem, 3.2vw, 4.5rem);
    }
    .lex-hero__sub {
        font-size: 1.25rem;
        max-width: 760px;
    }
}

/* --- 16) Floating-Contact: auf Tablets/Landscape nicht überlappen mit
   schmalen Hero-Sektionen (Buttons rechts schweben).
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .lex-floatbar { right: 0.75rem; }
}

/* --- 17) Tablet (768-1023px): Header-CTAs sichtbar machen
   Vorher: @max-1024 hat .lex-header__cta versteckt → keine sichtbare CTA.
   Jetzt zeigen wir nur die primäre CTA, kompakt; Portal-CTA bleibt aus.
   ------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .lex-header__cta {
        display: inline-flex;
        padding: .5rem .85rem !important;
        font-size: .85rem !important;
    }
    .lex-header__cta--portal {
        display: none;
    }
}

/* --- 18) Container-Padding auf sehr kleinen Smartphones reduzieren
   damit Cards/Text die volle Breite nutzen können (375px Viewports).
   ------------------------------------------------------------------------- */
@media (max-width: 380px) {
    .lex-container {
        padding-inline: 0.875rem;
    }
}

/* --- 19) Front-Page Branchen-Card-Inhalt: auf engen Tablets nicht
   abschneiden (Mehr lesbarer Text, kein Overflow).
   ------------------------------------------------------------------------- */
.lex-branchen-grid .lex-branche__title,
.lex-branchen-grid h3 {
    word-break: break-word;
    hyphens: auto;
}

/* --- 20) Karte/Map-Iframes responsive --- */
.lex-kontakt-map iframe,
.lex-kontakt iframe {
    width: 100%;
    height: clamp(280px, 50vh, 480px);
    display: block;
}

/* --- 21) Hero-Headlines: auf Smartphone schrumpfen + brechen erlauben.
   Ohne dies clippen lange Wörter wie "RICHTUNGSWEISEND" / "IRGENDEINEN"
   am rechten Containerrand (uppercase + font-weight 800).
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .lex-hero__claim {
        font-size: clamp(1.5rem, 7vw, 2rem);
        line-height: 1.1;
        word-break: break-word;
        hyphens: auto;
    }
    .lex-kar-hero__claim {
        font-size: clamp(1.4rem, 6.8vw, 1.85rem);
        line-height: 1.1;
        word-break: break-word;
        hyphens: auto;
    }
    .lex-stelle-hero__title,
    .lex-leistungen-hero__title,
    .lex-news-overview__title {
        word-break: break-word;
        hyphens: auto;
    }
}

/* --- 22) Floatbar nimmt auf engen Smartphones nicht den halben Hero ein.
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .lex-floatbar {
        right: 0.5rem;
        gap: 0.35rem;
    }
    .lex-floatbar__item,
    button.lex-floatbar__item {
        width: 38px !important;
        height: 38px !important;
    }
    .lex-floatbar__item svg {
        width: 18px;
        height: 18px;
    }
}

/* --- 23) Hero-Container: Padding-Right auf Smartphone erhöhen, damit der
   Headline-Text nicht mit der Floatbar kollidiert. */
@media (max-width: 480px) {
    .lex-hero .lex-container,
    .lex-kar-hero .lex-container {
        padding-right: clamp(3rem, 14vw, 4rem);
    }
}

/* --- 24) Hamburger-Striche: auf .home (dunkler Vollbild-Hero direkt unter
   dem Header) sind die Striche weiß. Auf den anderen Seiten bleibt der
   Header über hellem Hintergrund → blaue Striche bleiben gut sichtbar.
   Beim Scrollen (Header wird weiß-deckend) immer blau.
   ------------------------------------------------------------------------- */
.home .lex-hamburger span {
    background: #ffffff;
}
.home .lex-header.is-scrolled .lex-hamburger span {
    background: var(--lex-primary);
}

/* ==========================================================================
   WCAG 2.2 AA – Accessibility Fixes (2026-05 Audit)
   Behebt von axe-core gemeldete Verstöße sowie manuelle Befunde.
   Detaillierter Audit-Bericht: ci/wcag-audit-2026-05.md
   ========================================================================== */

/* --- A11y-1) Globale prefers-reduced-motion: für alle Animationen,
   nicht nur Portal-CTA. WCAG 2.3.3 (AAA) und 2.2.2 (A).
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto !important; }
}

/* --- A11y-2) Einheitliche, gut sichtbare Focus-Indikatoren.
   WCAG 2.4.7 (AA) "Focus Visible" + 2.4.13 (AAA) "Focus Appearance".
   2px outline + 2px offset + 3:1 Kontrast garantiert.
   ------------------------------------------------------------------------- */
:focus-visible {
    outline: 3px solid var(--lex-primary);
    outline-offset: 2px;
    border-radius: 2px;
}
/* Auf Yellow-Buttons: dunkleres Outline für Kontrast */
.lex-btn--primary:focus-visible,
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
    outline: 3px solid var(--lex-primary-dark);
    outline-offset: 3px;
}
/* Auf Hero (dunkler Hintergrund): weißes Outline */
.lex-hero a:focus-visible,
.lex-hero button:focus-visible,
.lex-kar-hero a:focus-visible,
.lex-stelle-hero a:focus-visible,
.home .lex-header a:focus-visible,
.home .lex-header button:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
}

/* --- A11y-3) Skip-Link sichtbar machen on focus (WCAG 2.4.1).
   Vorher: dauerhaft per .screen-reader-text off-screen, auch bei Fokus.
   ------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    padding: 0.75rem 1.25rem;
    background: var(--lex-primary-dark);
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    z-index: 10000;
    border-radius: 0;
    transition: top 0.15s ease;
    /* Override .screen-reader-text während fokussiert */
    clip: auto !important;
    clip-path: none !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    white-space: nowrap !important;
}
.skip-link:not(:focus):not(:focus-visible) {
    top: -100px;
    /* fallback: visuell verstecken */
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 1rem;
    outline: 3px solid var(--lex-cta);
    outline-offset: 2px;
}

/* --- A11y-4) Kontrast-Korrekturen.
   axe-core meldete 185 Verstöße (color-contrast WCAG 1.4.3 AA, 4.5:1 / 3:1).
   ------------------------------------------------------------------------- */

/* "Mehr erfahren →" Branchen-Card-Links: Gelb #134A86 auf Weiß = 2.57:1
   → LEX-Blau #1B5FAA = 8.6:1, Hover dunkler */
.lex-branche-card__link,
.lex-branche-card a.lex-branche-card__link {
    color: var(--lex-primary) !important;
}
.lex-branche-card__link:hover,
.lex-branche-card__link:focus-visible {
    color: var(--lex-primary-dark) !important;
    text-decoration: underline;
}

/* Newsletter-Lead-Text: #6c757d auf #f1f3f5 = 4.21:1 → dunkler */
.lex-newsletter__lead,
.lex-newsletter__sub {
    color: #495057 !important;  /* 7.4:1 */
}

/* Footer-Texte: hellgrau (#f3f4f3 / #f1f1f1 / #e9eae9) auf grau #6e736f
   ergeben 4.0–4.38:1 → reines Weiß setzen (≥ 4.6:1) */
.lex-footer address,
.lex-footer__col address,
.lex-footer__contact,
.lex-footer__contact a,
.lex-footer__ai-notice,
.lex-footer__ai-notice-heading,
.lex-footer__ai-notice-text,
.lex-footer__col p,
.lex-footer__col li,
.lex-footer__col a {
    color: #ffffff !important;
}

/* Karriere-Vorteils-Nummer (light): #7994b2 / #8c9eaf / #8393a4 auf #dde1e4
   ergeben 2.09–2.39:1 → einheitlich primary-dark für ≥ 7:1 */
.lex-kar-vorteil--light .lex-kar-vorteil__num,
.lex-kar-vorteil--light .lex-kar-vorteil__title {
    color: var(--lex-primary-dark) !important;
}

/* Leistungen-Overview-Numerals (#d8941a auf weiß = 2.57:1) → LEX-Blau */
.lex-leistungen-overview__num,
.lex-leistungen-overview__arrow {
    color: var(--lex-primary) !important;
}
.lex-leistungen-overview__link:hover .lex-leistungen-overview__num,
.lex-leistungen-overview__link:hover .lex-leistungen-overview__arrow,
.lex-leistungen-overview__link:focus-visible .lex-leistungen-overview__num,
.lex-leistungen-overview__link:focus-visible .lex-leistungen-overview__arrow {
    color: var(--lex-cta) !important;  /* nur bei Hover/Focus auf blauem BG */
}

/* Eyebrow auf hellem Hintergrund (#e9ecef): primary-dark für ≥ 4.5:1.
   Aber NICHT in Sektionen mit blauem Hintergrund — dort gewinnt yellow-light. */
.lex-leistungen-band .lex-leistungen-eyebrow,
.lex-leistungen-split .lex-leistungen-eyebrow,
.lex-leistungen-overview .lex-leistungen-eyebrow,
.lex-leistungen-versprechen .lex-leistungen-eyebrow {
    color: var(--lex-primary-dark) !important;
}
/* Eyebrow auf dunkelblauem Hintergrund: yellow-light für ≥ 4.5:1.
   experte-Box hat blauen Hintergrund → eyebrow muss hell bleiben. */
.lex-leistungen-experte .lex-leistungen-eyebrow,
.lex-leistungen-eyebrow--light,
.lex-kontakt-anfahrt__eyebrow {
    color: var(--lex-cta-light) !important;  /* 5.0:1 auf #1B5FAA */
}

/* Leistungen-Saeule auf Mittelblau (#376191): Numerals + Sublines.
   Yellow-light (#f8c351) = 3.93:1 → noch heller für ≥ 4.5:1 */
.lex-leistungen-saeule__num,
.lex-leistungen-saeule__sub {
    color: #fff5e0 !important;  /* hellster Gelb-Ton, 4.7:1 auf #376191 */
}

/* Branchen-Card-Eyebrow: #d8941a auf #e9ecef = 2.16:1 → primary-dark */
.lex-branche-card__eyebrow,
.lex-branche-card__num {
    color: var(--lex-primary-dark) !important;
}

/* Karriere-Form: Captcha- und Upload-Hilfetexte: #5E6A75 auf hellgrau
   ergibt 2.83–2.88:1 → dunkleres Grau */
.lex-kar-form__upload-hint,
.lex-kar-form__opt,
#lex_kontakt_captcha_help,
.lex-kontakt-form__captcha-help,
.lex-form__hint {
    color: #6e736f !important;
}

/* Sekundäres Primary-Light (#3a6ea8) auf hellgrau (#e9ecef) ergibt 4.45:1
   → primary-Standard für ≥ 4.6:1 */
.lex-leistungen-split--alt .lex-leistungen-meta,
.lex-leistungen-split [class*="--alt"] .lex-leistungen-eyebrow,
.lex-text-secondary {
    color: var(--lex-primary) !important;
}

/* button-text-Klasse (Plugin-Override): #1B5FAA auf #1B5FAA = 3.8:1 → primary-dark */
.button-text {
    color: var(--lex-primary-dark) !important;
}

/* News-Overview Datums-/Mehr-Links (Timeline): #d8941a auf weiß = 2.57:1
   → LEX-Primary für ≥ 4.6:1, hover-/focus-Yellow-Akzent bleibt */
.lex-news-overview__posts .lex-news-tim,
.lex-news-tim__date,
.lex-news-overview__date,
.lex-news-overview__post-date,
.lex-news-overview__post-more,
.lex-news-timeline__item .lex-news-overview__post-more,
.lex-news-overview__column .lex-news-overview__post-more {
    color: var(--lex-primary) !important;
}
.lex-news-overview__post-link:hover .lex-news-overview__post-more,
.lex-news-overview__post-link:focus-visible .lex-news-overview__post-more {
    color: var(--lex-primary-dark) !important;
    text-decoration: underline;
}

/* Leistungen-Subtitle: primary-light (#3a6ea8) auf hellgrau = 4.45:1
   → primary für ≥ 4.6:1 */
.lex-leistungen-subtitle {
    color: var(--lex-primary) !important;
}

/* Karriere-Vorteil-light Numerals: #7288a0 auf hellgrau = 2.77:1
   → primary-dark sicher (höchste specificity) */
.lex-kar-vorteile .lex-kar-vorteil--light .lex-kar-vorteil__num,
.lex-kar-vorteil--light .lex-kar-vorteil__num,
[class*="lex-kar-vorteil--light"] [class*="__num"] {
    color: var(--lex-primary-dark) !important;
}

/* Sekundäres Primary-Light auf hellgrau (#e9ecef): #3a6ea8 = 4.45:1
   → primary für sichere ≥ 4.6:1 */
.lex-leistungen-meta,
.lex-leistungen-copy [class*="--alt"],
.lex-text-alt {
    color: var(--lex-primary) !important;
}

/* Kontakt-Team-Eyebrow + Form-Opts (#5E6A75 auf weiß = 3.01:1) → dunkler */
.lex-kontakt-team__eyebrow,
.lex-kontakt-form__opt {
    color: #6e736f !important;  /* 4.6:1 */
}

/* Footer-AI-Notice-Heading: nochmal explizit weiß setzen wegen
   möglicher höherer Specificity in einer Vorgängerregel */
.lex-footer .lex-footer__ai-notice .lex-footer__ai-notice-heading,
.lex-footer__ai-notice-heading {
    color: #ffffff !important;
}

/* Kontakt-Card-Note: #5E6A75 auf weiß = 3.01:1 → dunkler */
.lex-kontakt-card__note,
.lex-kontakt-map__attribution {
    color: #6e736f !important;  /* 4.6:1 */
}

/* Generischer LEX-Grau-Text auf weiß: globale Anhebung wo es als
   Body-Text auftaucht, damit alle Untertitel/Lead-Texte ≥ 4.5:1 erreichen. */
.lex-text-muted,
.lex-eyebrow--muted {
    color: #6e736f !important;
}

/* --- A11y-5) Touch-Targets ≥ 24×24 px (WCAG 2.5.8 AA).
   Stand-by: Footer-Legal-Links und kleine Icon-Links prüfen.
   ------------------------------------------------------------------------- */
.lex-footer__legal-nav a,
.lex-footer__social a {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding-block: 0.25rem;
}

/* --- A11y-6) Mobile-Menü: visuell versteckt aber NICHT fokussierbar
   wenn geschlossen. Wird per JS auch via inert-Attribut gesetzt.
   Hier CSS-Fallback für Browser ohne inert-Support.
   ------------------------------------------------------------------------- */
.lex-mobile-menu[aria-hidden="true"] {
    visibility: hidden;
    pointer-events: none;
}
.lex-mobile-menu[aria-hidden="false"],
.lex-mobile-menu.is-open {
    visibility: visible;
    pointer-events: auto;
}

/* --- A11y-7) Outline-Button im Mobile-Menü: Mobile-Menü hat weißen
   Hintergrund → der Standard `.lex-btn--outline` (weißer Text auf
   transparent + weiße Border) wäre weiß-auf-weiß. WCAG 1.4.3 erfordert
   ≥ 4.5:1 → kontextspezifisch dunkler.
   ------------------------------------------------------------------------- */
.lex-mobile-menu .lex-btn--outline {
    color: var(--lex-primary-dark);
    border-color: var(--lex-primary);
    background: transparent;
}
.lex-mobile-menu .lex-btn--outline:hover,
.lex-mobile-menu .lex-btn--outline:focus-visible {
    background: var(--lex-primary);
    color: #ffffff;
    border-color: var(--lex-primary);
}

/* ==========================================================================
   Barrierefreiheits-Erklärung (Page 120) – Statusbox, Protokoll-Tabelle,
   Details-Akkordeon. Selbst WCAG-2.2-AA-konform (Kontraste, Fokus, Touch).
   ========================================================================== */

.lex-bf-status {
    margin: 0 0 2rem;
    padding: 1.5rem 1.75rem;
    background: var(--lex-primary);
    color: #ffffff;
    border-left: 6px solid var(--lex-cta);
}
.lex-legal__content .lex-bf-status p,
.lex-bf-status p {
    color: #ffffff !important;
}
.lex-legal__content .lex-bf-status__label,
.lex-bf-status__label {
    margin: 0 0 0.25rem !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--lex-cta-light) !important;
    font-weight: 700 !important;
}
.lex-legal__content .lex-bf-status__headline,
.lex-bf-status__headline {
    margin: 0 0 0.5rem !important;
    font-family: var(--lex-font-heading) !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
}
.lex-legal__content .lex-bf-status__meta,
.lex-bf-status__meta {
    margin: 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

.lex-bf-protocol-wrap {
    margin: 1.5rem 0 2rem;
    overflow-x: auto;
}
.lex-bf-protocol {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    background: #ffffff;
}
.lex-bf-protocol caption {
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-weight: 700;
}
.lex-bf-protocol thead th {
    background: var(--lex-primary-dark);
    color: #ffffff;
    text-align: left;
    padding: 0.75rem 1rem;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--lex-primary);
}
.lex-bf-protocol tbody th,
.lex-bf-protocol tbody td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--lex-gray-200);
    color: var(--lex-gray-800);
    vertical-align: top;
}
.lex-bf-protocol tbody th {
    font-weight: 600;
    color: var(--lex-primary-dark);
}
.lex-bf-protocol tbody tr:nth-child(even) {
    background: var(--lex-gray-50);
}
.lex-bf-protocol tbody tr.lex-bf-protocol__total {
    background: var(--lex-primary);
    color: #ffffff;
}
.lex-bf-protocol tbody tr.lex-bf-protocol__total th,
.lex-bf-protocol tbody tr.lex-bf-protocol__total td {
    color: #ffffff !important;
    font-weight: 700;
    border-bottom: none;
}
.lex-bf-ok {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.7rem;
    background: #1f6c3f;       /* dunkelgrün, 4.6:1 auf weiß */
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    border-radius: 0;
}
.lex-bf-protocol tbody tr.lex-bf-protocol__total .lex-bf-ok {
    background: var(--lex-cta);
    color: var(--lex-primary-dark);
}

.lex-bf-details {
    margin: 1.5rem 0 2.5rem;
    border: 1px solid var(--lex-gray-200);
    background: var(--lex-gray-50);
}
.lex-bf-details > summary {
    padding: 1rem 1.5rem;
    background: var(--lex-gray-100);
    color: var(--lex-primary-dark);
    font-family: var(--lex-font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    list-style: none;
    position: relative;
    user-select: none;
    min-height: 44px;          /* Tap-Target */
    display: flex;
    align-items: center;
}
.lex-bf-details > summary::-webkit-details-marker {
    display: none;
}
.lex-bf-details > summary::after {
    content: "+";
    margin-left: auto;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--lex-primary);
    transition: transform 0.2s ease;
}
.lex-bf-details[open] > summary::after {
    content: "−";
}
.lex-bf-details > summary:focus-visible {
    outline: 3px solid var(--lex-primary);
    outline-offset: -3px;
}
.lex-bf-details > *:not(summary) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.lex-bf-details > *:first-of-type:not(summary) {
    margin-top: 1.25rem;
}
.lex-bf-details > *:last-child {
    padding-bottom: 1.5rem;
}
.lex-bf-details h3 {
    margin: 1.25rem 0 0.5rem;
    font-size: 1.1rem;
    color: var(--lex-primary-dark);
}

@media (max-width: 600px) {
    .lex-bf-status { padding: 1.25rem; }
    .lex-bf-status__headline { font-size: 1.25rem; }
    .lex-bf-protocol { font-size: 0.85rem; }
    .lex-bf-protocol thead th,
    .lex-bf-protocol tbody th,
    .lex-bf-protocol tbody td { padding: 0.6rem 0.75rem; }
    .lex-bf-details > summary { padding: 0.85rem 1rem; font-size: 1rem; }
}

/* ==========================================================================
   WP Admin Bar offset — Header darf nicht von der Adminbar verdeckt werden
   ========================================================================== */
.admin-bar .lex-header { top: 32px; }
.admin-bar .home .lex-header { top: 32px; }
.admin-bar .lex-floatbar--top { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .lex-header { top: 46px; }
    .admin-bar .home .lex-header { top: 46px; }
    .admin-bar .lex-floatbar--top { top: 46px; }
}
@media screen and (max-width: 600px) {
    /* WP versteckt die Adminbar unter 600px nicht, hält sie aber position:absolute.
       Damit ist kein Header-Offset nötig — Reset für den Fall, dass eine größere
       Regel oben gegriffen hat. */
    .admin-bar .lex-header,
    .admin-bar .home .lex-header,
    .admin-bar .lex-floatbar--top { top: 0; }
}

/* ==========================================================================
   Kontaktseite — Headline-Schema an Karriere/CI anpassen
   Overline (Eyebrow) + HEADLINE VERSAL > Subline gemischt
   ========================================================================== */
.lex-kontakt-hero__eyebrow,
.lex-kontakt-form-section__eyebrow,
.lex-kontakt-anfahrt__eyebrow,
.lex-kontakt-team__eyebrow {
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.95rem;
}
.lex-kontakt-hero__headline,
.lex-kontakt-form-section__headline,
.lex-kontakt-anfahrt__headline,
.lex-kontakt-team__title {
    text-transform: uppercase;
    letter-spacing: -0.005em;
}

/* ==========================================================================
   Prive / orestbida-cookieconsent — Hover-Skalierung der Buttons abschalten
   Banner-Buttons (#s-all-bn "Alle akzeptieren", #s-rall-bn "Optionale
   ablehnen", #s-sv-bn "Auswahl übernehmen") sollen beim Hover die Position
   und Größe nicht ändern — nur die Hintergrundfarbe wechselt.
   ========================================================================== */
#cc_div .c-bn,
#cc_div .c-bn:hover,
#cc_div .c-bn:focus,
#cc_div .c-bn:active {
    transform: none !important;
    scale: 1 !important;
    zoom: 1 !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* ==========================================================================
   FAQ-Band (Akkordeon)
   ----------------------------------------------------------------------
   Wird in footer.php direkt VOR der lex-reviews-band („Das sagen unsere
   Mandanten") ausgegeben, falls der aktuellen Seite veröffentlichte FAQs
   zugeordnet sind. Style: an reviews-band angelehnt, gleiche Eyebrow-/
   Titel-Sprache, aber alt-Hintergrund (grau) für klare visuelle Trennung.
   CI: nur Blau (Primary), Grau und Gelb (CTA-Akzent).
   ========================================================================== */
.lex-faq-band {
    position: relative;
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.75rem, 4vw, 3rem);
    background:
        radial-gradient(circle at top left, rgba(var(--lex-primary-rgb), 0.07), transparent 32%),
        linear-gradient(180deg, var(--lex-gray-50) 0%, #fff 70%);
}

.lex-faq-band__header {
    max-width: 52rem;
    margin: 0 0 2rem;
}

.lex-faq-band__eyebrow {
    display: block;
    margin: 0 0 0.5rem;
    font-family: var(--lex-font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lex-cta-dark);
}

.lex-faq-band__title {
    margin: 0;
    font-size: clamp(1.9rem, 3vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--lex-primary);
}

.lex-faq-band__sub {
    max-width: 44rem;
    margin: 0.8rem 0 0;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--lex-gray-700, #4a5159);
}

.lex-faq-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.85rem;
}

.lex-faq-item {
    background: #fff;
    border: 1px solid rgba(var(--lex-primary-rgb), 0.14);
    border-left: 0.25rem solid var(--lex-primary-light, var(--lex-primary));
    box-shadow: 0 0.5rem 1.2rem rgba(27, 63, 105, 0.04);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.lex-faq-item.is-open {
    border-left-color: var(--lex-cta, #1B5FAA);
    box-shadow: 0 0.6rem 1.5rem rgba(27, 63, 105, 0.08);
}

.lex-faq-item__heading {
    margin: 0;
    font-family: var(--lex-font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--lex-primary);
}

.lex-faq-item__trigger {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.15rem 1.4rem;
    font: inherit;
    color: inherit;
    text-align: left;
    border-radius: 0;
}

.lex-faq-item__trigger:focus {
    outline: 0;
}

.lex-faq-item__trigger:focus-visible {
    outline: 0.18rem solid var(--lex-cta, #1B5FAA);
    outline-offset: -0.18rem;
}

.lex-faq-item__trigger:hover .lex-faq-item__q-text {
    text-decoration: underline;
    text-decoration-color: rgba(var(--lex-primary-rgb), 0.35);
    text-underline-offset: 0.2rem;
}

.lex-faq-item__q-text {
    flex: 1 1 auto;
}

.lex-faq-item__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--lex-primary);
    transition: transform 0.3s ease, color 0.25s ease, background-color 0.25s ease;
    background: rgba(var(--lex-primary-rgb), 0.08);
    border-radius: 999px;
}

.lex-faq-item.is-open .lex-faq-item__icon {
    transform: rotate(180deg);
    background: var(--lex-cta, #1B5FAA);
    color: #fff;
}

.lex-faq-item__answer[hidden] {
    display: none;
}

.lex-faq-item__answer-inner {
    padding: 0 1.4rem 1.35rem;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--lex-gray-700, #3d434a);
}

.lex-faq-item__answer-inner > *:first-child {
    margin-top: 0;
}

.lex-faq-item__answer-inner > *:last-child {
    margin-bottom: 0;
}

.lex-faq-item__answer-inner a {
    color: var(--lex-primary);
    text-decoration: underline;
    text-underline-offset: 0.15rem;
}

.lex-faq-item__answer-inner a:hover {
    color: var(--lex-cta-dark, #134A86);
}

@media (max-width: 600px) {
    .lex-faq-item__trigger {
        padding: 1rem 1.1rem;
        gap: 0.9rem;
    }
    .lex-faq-item__heading {
        font-size: 1.05rem;
    }
    .lex-faq-item__answer-inner {
        padding: 0 1.1rem 1.1rem;
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lex-faq-item,
    .lex-faq-item__icon {
        transition: none;
    }
}

/* ==========================================================================
   404 – "Seite nicht gefunden"
   ========================================================================== */

.lex-404 {
    background: var(--lex-white);
}

.lex-404__hero {
    padding: 3rem 0 2.5rem;
    background: linear-gradient(180deg, var(--lex-gray-50) 0%, var(--lex-white) 100%);
    border-bottom: 1px solid var(--lex-gray-100);
}

.lex-404__hero-inner {
    text-align: center;
}

.lex-404__eyebrow {
    display: inline-block;
    font-family: var(--lex-font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lex-secondary-dark);
    margin-bottom: 1.25rem;
}

.lex-404__code {
    font-family: var(--lex-font-heading);
    font-size: clamp(6rem, 18vw, 12rem);
    font-weight: 900;
    line-height: 0.95;
    color: var(--lex-primary);
    margin: 0 0 1rem;
    letter-spacing: -0.04em;
    /* Sanfter, premiumiger Akzent: leichter Gelb-Schatten */
    text-shadow: 0 4px 0 rgba(var(--lex-cta-rgb), 0.18);
}

.lex-404__title {
    font-family: var(--lex-font-heading);
    font-size: clamp(1.6rem, 3.6vw, 2.4rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--lex-primary);
    margin: 0 auto 1.25rem;
    max-width: 32ch;
}

.lex-404__rule {
    display: block;
    width: 72px;
    height: 4px;
    background: var(--lex-cta);
    border-radius: 0;
    margin: 0 auto 1.5rem;
}

.lex-404__lead {
    font-family: var(--lex-font-body);
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--lex-gray-800);
    margin: 0 auto 2rem;
    max-width: 56ch;
}

.lex-404__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.875rem;
    margin: 0 0 2.5rem;
}

.lex-404__actions .lex-btn {
    min-width: 200px;
}

/* Quick-Links */
.lex-404__links {
    padding: 3rem 0 5rem;
    background: var(--lex-white);
}

.lex-404__links-title {
    font-family: var(--lex-font-heading);
    font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    font-weight: 800;
    color: var(--lex-primary);
    margin: 0 0 1.5rem;
    text-align: center;
}

.lex-404__links-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 640px) {
    .lex-404__links-list {
        grid-template-columns: 1fr;
    }
}

.lex-404__links-item {
    margin: 0;
    padding: 0;
}

.lex-404__link-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 1rem;
    row-gap: 0.35rem;
    align-items: center;
    padding: 1.25rem 1.25rem;
    background: var(--lex-gray-50);
    border: 1px solid var(--lex-gray-100);
    text-decoration: none;
    color: var(--lex-gray-800);
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.lex-404__link-card:hover,
.lex-404__link-card:focus-visible {
    border-color: var(--lex-primary);
    background: var(--lex-white);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--lex-gray-800);
}

.lex-404__link-card:focus-visible {
    outline: 3px solid rgba(var(--lex-cta-rgb), 0.55);
    outline-offset: 2px;
}

.lex-404__link-label {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--lex-font-heading);
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--lex-primary);
    line-height: 1.25;
}

.lex-404__link-desc {
    grid-column: 1;
    grid-row: 2;
    font-family: var(--lex-font-body);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--lex-gray-600);
}

.lex-404__link-arrow {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--lex-primary);
    transition: transform 160ms ease, color 160ms ease;
}

.lex-404__link-card:hover .lex-404__link-arrow,
.lex-404__link-card:focus-visible .lex-404__link-arrow {
    transform: translateX(4px);
    color: var(--lex-cta-dark);
}

@media (max-width: 600px) {
    .lex-404__hero {
        padding: 2rem 0 1.75rem;
    }
    .lex-404__actions .lex-btn {
        width: 100%;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lex-404__link-card,
    .lex-404__link-arrow {
        transition: none;
    }
    .lex-404__link-card:hover {
        transform: none;
    }
}

/* ============================================================
   Cloudflare Turnstile – Widget-Container in beiden Formularen
   ============================================================ */
.lex-kontakt-form__turnstile,
.lex-kar-form__turnstile {
    display: block;
    background: none;
    border: 0;
    padding: 0;
    margin: 0.25rem 0 0.5rem;
}
.lex-kontakt-form__turnstile .cf-turnstile,
.lex-kar-form__turnstile .cf-turnstile {
    min-height: 65px;
}

/* ==========================================================================
   LEX Startseite – neue Komponenten (Hero-Badge, History-Band, Karten)
   ========================================================================== */
.lex-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.lex-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2.25rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--lex-card-radius);
    color: var(--lex-white);
    text-decoration: none;
    backdrop-filter: blur(4px);
    transition: background .15s ease, border-color .15s ease;
}
.lex-hero__badge:hover,
.lex-hero__badge:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.6);
    color: var(--lex-white);
}
.lex-hero__badge-icon { flex: 0 0 auto; }
.lex-hero__badge-text { display: flex; flex-direction: column; line-height: 1.25; }
.lex-hero__badge-line1 { font-size: 0.875rem; opacity: 0.85; }
.lex-hero__badge-line2 { font-size: 1.125rem; font-weight: 700; letter-spacing: 0.02em; }

/* Leistungen-Karten (auf Basis lex-digital__card) */
a.lex-digital__card { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.lex-leistung-card__icon { font-size: 2.25rem; color: var(--lex-primary); margin-bottom: 0.75rem; display: inline-block; }
.lex-leistung-card__more { margin-top: auto; padding-top: 1rem; color: var(--lex-primary); font-weight: 600; font-size: 1.05rem; }
a.lex-digital__card:hover .lex-leistung-card__more { color: var(--lex-cta-dark); }

/* Branchen-Karten-Icon */
.lex-branche-card__icon {
    width: 88px;
    height: 88px;
    margin-bottom: 1rem;
    border-radius: 50%;
}

/* History-/Zahlen-Band */
.lex-history-band__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 3rem 0 2.5rem;
}
.lex-history-band__stat {
    background: var(--lex-white);
    border: 1px solid var(--lex-gray-200);
    border-radius: var(--lex-card-radius);
    padding: 1.75rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.lex-history-band__value {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    color: var(--lex-primary-dark);
    line-height: 1.1;
}
.lex-history-band__label { color: var(--lex-gray-600); font-size: 1.05rem; }
@media (max-width: 900px) {
    .lex-history-band__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .lex-history-band__stats { grid-template-columns: 1fr; }
}

/* Produkt-Teaser-Karten: Icon-Bild kleiner halten */
.lex-produkt-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1.5rem 0;
}
.lex-produkt-card__media img { width: 140px; height: 140px; object-fit: contain; }

/* Header-Logo (PNG-Fallback) – feste Höhe */
.lex-header__logo-img { height: 48px; width: auto; display: block; }
.lex-footer__logo-img { max-height: 64px; width: auto; }
@media (max-width: 640px) {
    .lex-header__logo-img { height: 40px; }
}

/* ==========================================================================
   LEX Unterseiten – Page-Header, Prose, Leistungs-Detail, Branchen, Checks
   ========================================================================== */
.lex-page-header {
    background: linear-gradient(180deg, var(--lex-primary-dark) 0%, #1d4266 100%);
    color: var(--lex-white);
    padding: 4.5rem 0 3.5rem;
}
.lex-page-header .lex-section__eyebrow { color: rgba(255,255,255,0.75); }
.lex-page-header__title {
    color: var(--lex-white);
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0.5rem 0 0;
    max-width: 60rem;
}
.lex-page-header__subtitle {
    color: rgba(255,255,255,0.92);
    font-size: 1.375rem;
    font-weight: 600;
    margin: 0.75rem 0 0;
}
.lex-page-header__lead {
    color: rgba(255,255,255,0.85);
    font-size: 1.1875rem;
    line-height: 1.6;
    margin: 1rem 0 0;
    max-width: 46rem;
}

/* Fließtext-Bereiche */
.lex-prose { max-width: 72rem; font-size: 1.125rem; line-height: 1.7; color: var(--lex-black); }
.lex-prose--narrow { max-width: 50rem; }
.lex-prose h2 { color: var(--lex-primary-dark); font-size: 1.75rem; font-weight: 700; margin: 2.25rem 0 0.75rem; }
.lex-prose h3 { color: var(--lex-primary-dark); font-size: 1.375rem; font-weight: 700; margin: 1.75rem 0 0.5rem; }
.lex-prose p { margin: 0 0 1.1em; }
.lex-prose ul { margin: 0 0 1.25em; padding-left: 1.4em; }
.lex-prose li { margin-bottom: 0.4em; }
.lex-prose img { max-width: 100%; height: auto; border-radius: var(--lex-card-radius); }

/* Leistungs-Detail: Content + Aside */
.lex-leistung-detail__grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 3rem;
    align-items: start;
}
.lex-leistung-detail__media { margin: 0 0 1.75rem; }
.lex-leistung-detail__media img { width: 100%; height: auto; border-radius: var(--lex-card-radius); }
@media (max-width: 900px) {
    .lex-leistung-detail__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* Fakten-Box (Aside) */
.lex-facts-box {
    background: var(--lex-gray-50);
    border: 1px solid var(--lex-gray-200);
    border-radius: var(--lex-card-radius);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}
.lex-facts-box__title { font-size: 1.25rem; font-weight: 700; color: var(--lex-primary-dark); margin: 0 0 1rem; }
.lex-facts-box__list { margin: 0; }
.lex-facts-box__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--lex-gray-200);
    font-size: 1.05rem;
}
.lex-facts-box__row:last-child { border-bottom: none; }
.lex-facts-box__row dt { color: var(--lex-gray-600); margin: 0; }
.lex-facts-box__row dd { margin: 0; font-weight: 600; color: var(--lex-black); text-align: right; }
.lex-facts-box--cta { background: var(--lex-primary-dark); border-color: var(--lex-primary-dark); color: var(--lex-white); }
.lex-facts-box--cta .lex-facts-box__title { color: var(--lex-white); }
.lex-facts-box--cta p { color: rgba(255,255,255,0.85); font-size: 1.05rem; margin: 0 0 1.25rem; }

/* Branchen-Hero */
.lex-branche-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2.5rem;
    align-items: center;
}
.lex-branche-hero__icon img { border-radius: 50%; box-shadow: 0 8px 32px rgba(0,0,0,0.25); }
.lex-branche-hero__points { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.lex-branche-hero__points li { display: flex; align-items: flex-start; gap: 0.6rem; color: rgba(255,255,255,0.92); font-size: 1.125rem; }
.lex-branche-hero__points svg { flex: 0 0 auto; margin-top: 0.2em; color: #7fd1a0; }
@media (max-width: 760px) {
    .lex-branche-hero__grid { grid-template-columns: 1fr; }
    .lex-branche-hero__icon { display: none; }
}

/* Check-/Anforderungs-Grid */
.lex-check-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.lex-check-grid__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--lex-white);
    border: 1px solid var(--lex-gray-200);
    border-radius: var(--lex-card-radius);
    padding: 1.1rem 1.25rem;
    font-size: 1.125rem;
    line-height: 1.55;
}
.lex-check-grid__item svg { flex: 0 0 auto; margin-top: 0.15em; color: var(--lex-primary); }
.lex-check-grid__item--pain svg { color: var(--lex-secondary); }
@media (max-width: 760px) {
    .lex-check-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   LEX Header – durchgehend Marine (weißes Logo überall sichtbar)
   ========================================================================== */
.lex-header,
.lex-header.is-scrolled {
    background: var(--lex-primary-dark) !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.lex-nav__link,
.lex-header .lex-nav__link { color: rgba(255,255,255,0.88); }
.lex-nav__link:hover,
.lex-nav__link:focus-visible,
.current_page_item > .lex-nav__link,
.current-menu-item > .lex-nav__link { color: var(--lex-white); }
.lex-header__ai-link,
.home .lex-header__ai-link { color: rgba(255,255,255,0.85); }
.lex-header__ai-link:hover { color: var(--lex-white); }
.lex-hamburger span,
.home .lex-hamburger span { background: #fff !important; }
.lex-nav__dropdown { background: var(--lex-primary-dark); }
.lex-nav__dropdown a { color: rgba(255,255,255,0.9); }
.lex-nav__dropdown a:hover { color: var(--lex-white); background: rgba(255,255,255,0.06); }

/* Timeline (Unternehmen) */
.lex-timeline { list-style: none; margin: 0; padding: 0; position: relative; --lex-tl-col: 180px; }
.lex-timeline::before {
    content: '';
    position: absolute;
    left: calc(var(--lex-tl-col) - 8px);
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--lex-gray-200);
}
.lex-timeline__item { display: grid; grid-template-columns: var(--lex-tl-col) minmax(0,1fr); gap: 1.5rem; padding: 1.1rem 0; position: relative; }
.lex-timeline__year {
    font-weight: 800;
    color: var(--lex-primary);
    font-size: 1.125rem;
    text-align: right;
    padding-right: 2.4rem;
    position: relative;
}
.lex-timeline__year::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0.45em;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--lex-primary);
    border: 3px solid var(--lex-white);
    box-shadow: 0 0 0 2px var(--lex-primary);
}
.lex-timeline__title { font-size: 1.25rem; font-weight: 700; color: var(--lex-primary-dark); margin: 0 0 0.35rem; }
.lex-timeline__text { color: var(--lex-gray-600); margin: 0; max-width: 44rem; }
@media (max-width: 640px) {
    .lex-timeline::before { left: 8px; }
    .lex-timeline__item { grid-template-columns: 1fr; gap: 0.4rem; padding-left: 2rem; }
    .lex-timeline__year { text-align: left; padding-right: 0; }
    .lex-timeline__year::after { left: -2rem; right: auto; }
}

/* Leitbild/Philosophie 2-Spalter */
.lex-values__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 3rem; }
.lex-values__col h2 { color: var(--lex-primary-dark); font-size: 1.75rem; font-weight: 800; margin: 0.4rem 0 1rem; }
@media (max-width: 860px) { .lex-values__grid { grid-template-columns: 1fr; } }

/* Split-Media Varianten */
.lex-split__media--cert img { background: var(--lex-white); border: 1px solid var(--lex-gray-200); border-radius: var(--lex-card-radius); padding: 0; }

/* ==========================================================================
   Kontaktseite: Karten + Anfrage-Formular (Lead-Funnel)
   ========================================================================== */
.lex-contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.5rem; }
.lex-contact-card {
    background: var(--lex-white);
    border: 1px solid var(--lex-gray-200);
    border-radius: var(--lex-card-radius);
    padding: 1.75rem;
}
.lex-contact-card__title { font-size: 1.2rem; font-weight: 700; color: var(--lex-primary-dark); margin: 0 0 0.75rem; }
.lex-contact-card__body { font-style: normal; color: var(--lex-black); line-height: 1.65; margin: 0; }
.lex-contact-card__body a { color: var(--lex-primary); }
.lex-contact-card__link { display: inline-block; margin-top: 0.9rem; font-weight: 600; color: var(--lex-primary); text-decoration: none; }
.lex-contact-card__link:hover { color: var(--lex-cta-dark); text-decoration: underline; }
.lex-contact-card__maps { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.75rem; margin-top: 0.9rem; }
.lex-contact-card__maps .lex-contact-card__link { margin-top: 0; }
.lex-contact-card__maps .lex-contact-card__link svg { flex-shrink: 0; }
@media (max-width: 860px) { .lex-contact-grid { grid-template-columns: 1fr; } }

.lex-anfrage__form {
    background: var(--lex-white);
    border: 1px solid var(--lex-gray-200);
    border-radius: var(--lex-card-radius);
    padding: 2.25rem;
    max-width: 62rem;
    margin: 0 auto;
}
.lex-anfrage__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.25rem 1.5rem; }
.lex-form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.lex-form-field--full { grid-column: 1 / -1; }
.lex-form-field--file { grid-column: 1 / -1; }
.lex-form-field label { font-weight: 600; color: var(--lex-primary-dark); font-size: 1.05rem; }
.lex-form-field input[type="text"],
.lex-form-field input[type="email"],
.lex-form-field input[type="tel"],
.lex-form-field select,
.lex-form-field textarea {
    border: 1px solid var(--lex-gray-400);
    border-radius: 6px;
    padding: 0.7rem 0.9rem;
    font: inherit;
    font-size: 1.05rem;
    background: var(--lex-white);
    color: var(--lex-black);
}
.lex-form-field input:focus-visible,
.lex-form-field select:focus-visible,
.lex-form-field textarea:focus-visible {
    outline: 3px solid rgba(27, 95, 170, 0.35);
    outline-offset: 1px;
    border-color: var(--lex-primary);
}
.lex-form-field input[type="file"] {
    border: 2px dashed var(--lex-gray-400);
    border-radius: 6px;
    padding: 1.1rem;
    background: var(--lex-gray-50);
    font-size: 1rem;
}
.lex-anfrage__filelist { list-style: none; margin: 0.25rem 0 0; padding: 0; font-size: 0.98rem; color: var(--lex-gray-600); }
.lex-anfrage__filelist li { padding: 0.15rem 0; }
.lex-anfrage__filelist li.is-too-big { color: #b3261e; font-weight: 600; }
.lex-checkbox { display: flex; gap: 0.7rem; align-items: flex-start; font-weight: 400 !important; font-size: 1rem; color: var(--lex-black); }
.lex-checkbox input { margin-top: 0.28em; width: 18px; height: 18px; flex: 0 0 auto; }
.lex-checkbox a { color: var(--lex-primary); }
.lex-anfrage__submit-row { flex-direction: row; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.lex-anfrage__status { font-weight: 600; font-size: 1.05rem; }
.lex-anfrage__status.is-success { color: #14692e; }
.lex-anfrage__status.is-error { color: #b3261e; }
.lex-anfrage__status.is-progress { color: var(--lex-gray-600); }
.lex-anfrage__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 720px) {
    .lex-anfrage__grid { grid-template-columns: 1fr; }
    .lex-anfrage__form { padding: 1.5rem; }
}

/* ==========================================================================
   TRANSPARENTER HEADER
   Auf Seiten mit dunklem Seitenkopf (body.lex-header-transparent) liegt der
   Header als Overlay über Hero/Page-Header: oben transparent, beim Scrollen
   fixiert in Marine.
   ========================================================================== */
body.lex-header-transparent .lex-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none;
}
body.lex-header-transparent .lex-header.is-scrolled {
    position: fixed;
    background: var(--lex-primary-dark) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 6px 24px rgba(10, 26, 54, 0.35);
    animation: lexHeaderSlideIn 0.22s ease;
}
@keyframes lexHeaderSlideIn {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* Dunkle Seitenköpfe unter dem Overlay: Platz für den Header schaffen. */
body.lex-header-transparent .lex-page-breadcrumbs {
    background: var(--lex-primary-dark);
    padding-top: 104px;
    padding-bottom: 0.5rem;
}
body.lex-header-transparent .lex-page-breadcrumbs__link { color: rgba(255, 255, 255, 0.7); }
body.lex-header-transparent .lex-page-breadcrumbs__link:hover { color: var(--lex-white); }
body.lex-header-transparent .lex-page-breadcrumbs__separator { color: rgba(255, 255, 255, 0.4); }
body.lex-header-transparent .lex-page-breadcrumbs__current { color: rgba(255, 255, 255, 0.92); }
/* Nahtloser Übergang Breadcrumbs → Page-Header */
body.lex-header-transparent .lex-page-header { padding-top: 2.5rem; }
/* Startseite: Hero läuft unter dem Header durch, Content sitzt unten — kein Zusatzabstand nötig. */

/* ==========================================================================
   MEGAMENÜ (v2.6.0)
   Breites, dunkles Panel unterhalb des Headers. Pro Unterpunkt eine
   Bildkarte (Beitragsbild / Hero-Motiv) statt Icon.
   Nutzt die bestehende Dropdown-Logik (Hover + .is-open via JS).
   ========================================================================== */
/* Header über der Floatbar halten, damit das Panel nicht überlagert wird */
.lex-header { z-index: 1000; }

/* Panel am Header-Container ausrichten, nicht an der Navigation */
.lex-header .lex-nav,
.lex-header .lex-nav__list,
.lex-nav__list > .lex-nav__item--mega { position: static; }

.lex-nav__dropdown--mega {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: min(1352px, calc(100vw - 2rem));
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--lex-primary-dark);
    border: 1px solid var(--lex-line-dark);
    border-top: 2px solid var(--lex-primary-light);
    border-radius: 0;
    box-shadow: 0 32px 80px rgba(6, 16, 30, 0.45);
    z-index: 1200;
    overflow: visible;
}

/* Hover-Brücke: überdeckt die Lücke zwischen Menüpunkt und Panel,
   sonst verliert der Cursor auf dem Weg nach unten den Hover. */
.lex-nav__dropdown--mega::before {
    content: '';
    position: absolute;
    top: -2rem;
    left: 0;
    right: 0;
    height: 2rem;
}

.lex-nav__item--mega:hover > .lex-nav__dropdown--mega,
.lex-nav__item--mega .lex-nav__dropdown--mega.is-open {
    display: block;
    animation: lexMegaIn 0.18s ease-out both;
}
@keyframes lexMegaIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.lex-nav__mega-inner {
    padding: 1.5rem 2rem 2rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Kopfzeile: Rubrik links, Übersichtslink rechts */
.lex-nav__mega-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 0.9rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--lex-line-dark);
}
.lex-nav__mega-eyebrow {
    font-family: var(--lex-font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lex-primary-light);
}
.lex-nav__mega-all {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, gap 0.15s ease;
}
.lex-nav__mega-all:hover,
.lex-nav__mega-all:focus-visible {
    color: var(--lex-white);
    gap: 0.65rem;
    background: none;
}

/* Karten-Raster */
.lex-nav__mega-grid {
    display: grid;
    grid-template-columns: repeat(var(--lex-mega-cols, 3), minmax(0, 1fr));
    gap: 1.5rem 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lex-nav__mega--cols-1 .lex-nav__mega-grid { --lex-mega-cols: 1; }
.lex-nav__mega--cols-2 .lex-nav__mega-grid { --lex-mega-cols: 2; }
.lex-nav__mega--cols-3 .lex-nav__mega-grid { --lex-mega-cols: 3; }
.lex-nav__mega--cols-4 .lex-nav__mega-grid { --lex-mega-cols: 4; }

/* Panelbreite folgt der Spaltenzahl — Kartenbreite bleibt überall gleich */
.lex-nav__dropdown--mega.lex-nav__mega--cols-1 { width: min(430px,  calc(100vw - 2rem)); }
.lex-nav__dropdown--mega.lex-nav__mega--cols-2 { width: min(770px,  calc(100vw - 2rem)); }
.lex-nav__dropdown--mega.lex-nav__mega--cols-3 { width: min(1070px, calc(100vw - 2rem)); }

.lex-nav__mega-item { margin: 0; }

/* Karte */
.lex-nav__mega-link {
    display: block !important;
    padding: 0 !important;
    border-radius: 0;
    text-decoration: none;
    background: none !important;
    white-space: normal !important;
    outline-offset: 3px;
}

.lex-nav__mega-media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0;
    margin-bottom: 0.85rem;
}
.lex-nav__mega-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    filter: saturate(0.92);
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.3s ease;
}
/* Feiner Verlauf für ruhigen Bildabschluss */
.lex-nav__mega-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 26, 54, 0) 45%, rgba(10, 26, 54, 0.45) 100%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.lex-nav__mega-copy {
    display: block;
    position: relative;
    padding-top: 0.65rem;
}
/* Akzentlinie über der Textzeile, wächst beim Hover */
.lex-nav__mega-copy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.12);
}
.lex-nav__mega-copy::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--lex-primary-light);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.lex-nav__mega-title {
    display: block;
    font-family: var(--lex-font-heading);
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.3;
    color: var(--lex-white);
    margin-bottom: 0.3rem;
    transition: color 0.15s ease;
}
.lex-nav__mega-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.62);
    min-height: 2.7em;
}

.lex-nav__mega-link:hover .lex-nav__mega-media img,
.lex-nav__mega-link:focus-visible .lex-nav__mega-media img {
    transform: scale(1.06);
    filter: saturate(1.05);
}
.lex-nav__mega-link:hover .lex-nav__mega-copy::after,
.lex-nav__mega-link:focus-visible .lex-nav__mega-copy::after {
    transform: scaleX(1);
}
.lex-nav__mega-link:hover .lex-nav__mega-title,
.lex-nav__mega-link:focus-visible .lex-nav__mega-title {
    color: var(--lex-primary-light);
}

/* Schmalere Desktops: Panel darf enger und mit weniger Spalten laufen */
@media (max-width: 1400px) {
    .lex-nav__mega-inner { padding: 1.25rem 1.5rem 1.65rem; }
    .lex-nav__mega-grid { gap: 1.25rem 1.25rem; }
}
@media (max-width: 1180px) {
    /* Kompaktmodus: flachere Bilder, keine Beschreibung — Panel bleibt sichtbar */
    .lex-nav__mega-media { aspect-ratio: 2 / 1; margin-bottom: 0.6rem; }
    .lex-nav__mega-desc { display: none; }
    .lex-nav__mega-grid { gap: 1rem 1.25rem; }
    .lex-nav__mega-head { padding-bottom: 0.7rem; margin-bottom: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .lex-nav__item--mega:hover > .lex-nav__dropdown--mega,
    .lex-nav__item--mega .lex-nav__dropdown--mega.is-open { animation: none; }
    .lex-nav__mega-media img,
    .lex-nav__mega-copy::after,
    .lex-nav__mega-all { transition: none; }
}

/* Mobile-Menü: verschachtelte Unterpunkte (Standard-Walker .sub-menu) */
.lex-mobile-nav__list .sub-menu {
    list-style: none;
    margin: 0.25rem 0 0.75rem;
    padding: 0 0 0 1rem;
    border-left: 2px solid var(--lex-gray-200);
}
.lex-mobile-nav__list .sub-menu a {
    font-size: 1rem;
    font-weight: 500;
    padding: 0.45rem 0;
}

/* Transparente Seiten: kein weißer Streifen über dem dunklen Seitenkopf */
body.lex-header-transparent main.lex-page { padding-top: 0; }

/* ==========================================================================
   SIEMENS-DESIGN-SCHICHT (07/2026) — v2.0.0
   --------------------------------------------------------------------------
   Komplett-Reskin nach Vorbild siemens.com/de-de: flache Geometrie (Radius 0,
   Hairlines statt Schatten), dunkle Marine-Bänder, Eyebrow-Labels in
   Versalien, Arrow-Links, linksbündige Sektionsköpfe, ruhige Hover-Zustände.
   CI-Farben bleiben unverändert (LEX-Blau #1B5FAA, Marine #14304D,
   Stahlgrau #5E6A75). Diese Schicht steht bewusst am Dateiende und
   überschreibt die älteren Komponenten-Stile per Kaskade.
   ========================================================================== */

/* ---------- 1. Basis-Typografie ---------- */
h1, h2, h3, h4, h5, h6 {
    color: var(--lex-primary-dark);
    font-weight: 700;
    letter-spacing: -0.015em;
}

a:hover { color: var(--lex-cta-dark); }

/* ---------- 2. Buttons: scharfkantig, Sentence Case, ruhige Hover ---------- */
.lex-btn {
    border-radius: 0 !important;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
    font-size: 1.0625rem;
    padding: 0.8rem 1.6rem;
    border-width: 1px;
    gap: 0.6rem;
}

.lex-btn--lg { padding: 0.95rem 2rem; font-size: 1.125rem; }

.lex-btn--primary:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
    transform: none;
    box-shadow: none;
}

/* Outline-Button: auf hellem Grund Marine, in dunklen Bändern Weiß */
.lex-btn--outline {
    background: transparent;
    color: var(--lex-primary-dark);
    border-color: var(--lex-primary-dark);
}
.lex-btn--outline:hover {
    background: var(--lex-tint);
    border-color: var(--lex-primary-dark);
    color: var(--lex-primary-dark);
}
.lex-hero .lex-btn--outline,
.lex-cta-banner .lex-btn--outline,
.lex-page-header .lex-btn--outline,
.lex-history-band .lex-btn--outline,
.lex-mobile-menu .lex-btn--outline {
    color: var(--lex-white);
    border-color: rgba(255, 255, 255, 0.7);
}
.lex-hero .lex-btn--outline:hover,
.lex-cta-banner .lex-btn--outline:hover,
.lex-page-header .lex-btn--outline:hover,
.lex-history-band .lex-btn--outline:hover,
.lex-mobile-menu .lex-btn--outline:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--lex-white);
    color: var(--lex-white);
}

.lex-btn--outline-light {
    background: transparent;
    color: var(--lex-white);
    border-color: rgba(255, 255, 255, 0.7);
}
.lex-btn--outline-light:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--lex-white);
    color: var(--lex-white);
}

.lex-btn:focus-visible {
    outline: 2px solid var(--lex-primary-light);
    outline-offset: 2px;
}

.lex-header__cta {
    padding: 0.6rem 1.25rem !important;
    font-size: 1rem !important;
}

/* ---------- 3. Header: flaches Marine, Hairline, weiße Navigation ---------- */
.lex-header,
.lex-header.is-scrolled {
    box-shadow: none;
    border-bottom: 1px solid var(--lex-line-dark);
}

.lex-header__inner,
.home .lex-header__inner {
    max-width: 1400px;
    padding-top: 0;
    padding-bottom: 0;
    height: 80px;
}
.lex-header.is-scrolled .lex-header__inner,
.home .lex-header.is-scrolled .lex-header__inner {
    padding-top: 0;
    padding-bottom: 0;
    height: 64px;
}

.lex-nav__list { gap: 0.5rem; justify-content: flex-start; }
.lex-nav__list a,
.lex-nav__link {
    font-size: 1.0625rem;
    font-weight: 600;
}
.lex-nav__link::after {
    height: 3px;
    bottom: 0;
    background: var(--lex-primary-light);
}
.home .lex-nav__list a:hover { color: var(--lex-white); }

/* KI-Hinweis: dezenter Text-Link statt Pille */
.lex-header__ai-link,
.home .lex-header__ai-link {
    border: 0;
    border-radius: 0;
    padding: 0.25rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
}
.lex-header__ai-link:hover,
.lex-header__ai-link:focus-visible,
.home .lex-header__ai-link:hover,
.home .lex-header__ai-link:focus-visible {
    color: var(--lex-white);
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Beim Scrollen: solides Marine statt Milchglas (Siemens: opak & flach) */
.home .lex-header.is-scrolled {
    background: var(--lex-primary-dark);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-bottom: 1px solid var(--lex-line-dark);
}

/* Dropdown: flach, Hairline, blaue Akzentkante */
.lex-nav__dropdown {
    border-radius: 0;
    border: 1px solid var(--lex-line-dark);
    border-top: 2px solid var(--lex-primary-light);
    box-shadow: 0 16px 40px rgba(8, 20, 34, 0.4);
    padding: 0.4rem 0;
}
.lex-nav__dropdown-link { border-radius: 0; }

/* Hamburger + Mobile-Menü: dunkles Panel wie der Header */
.lex-hamburger { border-radius: 0; }
.lex-hamburger:hover { background: rgba(255, 255, 255, 0.1); }

.lex-mobile-menu { background: var(--lex-primary-dark); }
.lex-mobile-menu__close {
    border-radius: 0;
    background: transparent;
    border: 1px solid var(--lex-line-dark);
    color: var(--lex-white);
}
.lex-mobile-menu__close:hover { background: rgba(255, 255, 255, 0.1); }
.lex-mobile-nav__list > li { border-bottom: 1px solid var(--lex-line-dark); }
.lex-mobile-nav__list a { color: var(--lex-white); }
.lex-mobile-nav__list a:hover { color: rgba(255, 255, 255, 0.75); }
.lex-mobile-nav__list ul a,
.lex-mobile-nav__list .sub-menu a { color: rgba(255, 255, 255, 0.72); }
.lex-mobile-nav__list .sub-menu { border-left: 2px solid var(--lex-line-dark); }
.lex-mobile-overlay { background: rgba(13, 32, 51, 0.7); }

/* ---------- 4. Hero: dunkel, linksbündig, große Sentence-Case-Headline ---------- */
.lex-hero__overlay {
    background: linear-gradient(
        90deg,
        rgba(13, 32, 51, 0.92) 0%,
        rgba(13, 32, 51, 0.62) 55%,
        rgba(13, 32, 51, 0.32) 100%
    );
}

.lex-hero__eyebrow {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    opacity: 1;
}

.lex-hero__claim {
    text-transform: none;
    font-size: clamp(2.4rem, 4.5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.lex-hero__sub {
    font-size: 1.1875rem;
    color: rgba(255, 255, 255, 0.88);
}

.lex-hero__badge {
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: none;
}

/* ---------- 5. Sektionsköpfe: linksbündig, Eyebrow in Stahlgrau ---------- */
.lex-section__header {
    text-align: left;
}
.lex-section__header p {
    margin: 0;
    max-width: 46rem;
    color: var(--lex-gray-600);
}
.lex-section__header--wide p {
    max-width: none;
}
.lex-section__header h2 {
    color: var(--lex-primary-dark);
    text-transform: none;
}

.lex-section__eyebrow,
.lex-digital__eyebrow,
.lex-faq-band__eyebrow,
.lex-reviews-band__eyebrow {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lex-secondary);
    margin: 0 0 0.875rem;
}

.lex-digital__head {
    text-align: left;
    margin: 0 0 2.75rem;
}
.lex-digital__headline { color: var(--lex-primary-dark); }
.lex-digital__actions { text-align: left; }
.lex-section__cta { text-align: left; }

/* Dunkle Seitenköpfe: Eyebrow hell */
.lex-page-header .lex-section__eyebrow { color: rgba(255, 255, 255, 0.72); }
.lex-page-header {
    background: var(--lex-primary-dark);
    border-bottom: 1px solid var(--lex-line-dark);
}

/* ---------- 6. Arrow-Links (Siemens-Signatur) ---------- */
.lex-leistung-card__more,
.lex-branche-card__link,
.lex-contact-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--lex-font-heading);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--lex-primary-dark);
}
.lex-leistung-card__more::after,
.lex-branche-card__link::after,
.lex-contact-card__link::after {
    content: "\2192";
    font-weight: 400;
    font-size: 1.3em;
    line-height: 1;
    transition: transform 0.2s ease;
}
a.lex-digital__card:hover .lex-leistung-card__more,
.lex-branche-card:hover .lex-branche-card__link,
.lex-contact-card__link:hover {
    color: var(--lex-primary);
    text-decoration: none;
}
a.lex-digital__card:hover .lex-leistung-card__more::after,
.lex-branche-card:hover .lex-branche-card__link::after,
.lex-contact-card__link:hover::after {
    transform: translateX(0.4rem);
}

@media (prefers-reduced-motion: reduce) {
    .lex-leistung-card__more::after,
    .lex-branche-card__link::after,
    .lex-contact-card__link::after {
        transition: none;
    }
}

/* ---------- 7. Karten: flach, Hairline-Rahmen, ruhige Hover ---------- */
.lex-digital { background: var(--lex-white); }

.lex-digital__card {
    background: var(--lex-white);
    border: 1px solid var(--lex-line);
    padding: 2rem 1.75rem;
    transition: border-color 0.2s ease;
}
a.lex-digital__card:hover { border-color: var(--lex-primary); }
.lex-digital__card-title {
    color: var(--lex-primary-dark);
    font-size: 1.3125rem;
}
.lex-digital__card-text {
    font-size: 1.125rem;
    color: var(--lex-gray-800);
}
.lex-leistung-card__icon { color: var(--lex-primary); }

.lex-branche-card {
    border: 1px solid var(--lex-line);
    transition: border-color 0.2s ease;
}
.lex-branche-card:hover {
    box-shadow: none;
    transform: none;
    border-color: var(--lex-primary);
}
.lex-branche-card__title {
    text-transform: none;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--lex-primary-dark);
}

.lex-contact-card,
.lex-facts-box,
.lex-check-grid__item {
    border-radius: 0;
    border-color: var(--lex-line);
}
.lex-contact-card__title,
.lex-facts-box__title { color: var(--lex-primary-dark); }

/* Produkte-Teaser: helle, flache Panels statt Bild-Overlay-Kacheln */
.lex-news-card {
    background: var(--lex-gray-50);
    color: inherit;
    box-shadow: none;
    padding: 2rem;
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}
.lex-produkt-card__media {
    padding: 0;
    justify-content: flex-start;
}
.lex-news-card__body { width: 100%; gap: 1.25rem; }
.lex-news-card__content {
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0;
    gap: 0.75rem;
}
.lex-news-card__title {
    color: var(--lex-primary-dark) !important;
    font-size: 1.5rem;
    text-shadow: none;
    letter-spacing: -0.01em;
}
.lex-news-card__sub {
    color: var(--lex-gray-800) !important;
    text-shadow: none;
    max-width: none;
}
.lex-news-card__cta {
    box-shadow: none;
    min-width: 0;
    padding: 0.8rem 1.6rem !important;
    font-size: 1.0625rem !important;
}

/* ---------- 8. Geschichte: dunkles Marine-Zahlenband ---------- */
.lex-history-band { background: var(--lex-primary-dark); }
.lex-history-band .lex-section__eyebrow { color: rgba(255, 255, 255, 0.72); }
.lex-history-band .lex-section__header h2 { color: var(--lex-white); }
.lex-history-band .lex-section__header p { color: rgba(255, 255, 255, 0.85); }
.lex-history-band__stats { gap: 2rem; }
.lex-history-band__stat {
    background: transparent;
    border: 0;
    border-left: 2px solid var(--lex-primary-light);
    border-radius: 0;
    padding: 0.5rem 0 0.5rem 1.5rem;
    text-align: left;
}
.lex-history-band__value { color: var(--lex-white); }
.lex-history-band__label { color: rgba(255, 255, 255, 0.72); }

/* ---------- 9. CTA-Band: flaches Marine ---------- */
.lex-cta-banner { background: var(--lex-primary-dark); }
.lex-cta-banner__text h2 { color: var(--lex-white); text-transform: none; }
.lex-cta-banner__text p { color: rgba(255, 255, 255, 0.85); }

/* ---------- 10. Split-Sektionen ---------- */
.lex-split__headline { text-transform: none; color: var(--lex-primary-dark); }
.lex-split__media { aspect-ratio: 3 / 2; }
.lex-split__media--cert img { border-radius: 0; border-color: var(--lex-line); }
/* Zertifikat ist Hochformat: vollständig zeigen statt auf 3:2 beschneiden */
.lex-split__media--cert {
    aspect-ratio: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.lex-split__media--cert img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 34rem;
    object-fit: contain;
    object-position: center;
}

/* ---------- 11. FAQ: Hairline-Akkordeon statt Karten ---------- */
.lex-faq-band { background: var(--lex-gray-50); }
.lex-faq-band__title {
    text-transform: none;
    color: var(--lex-primary-dark);
    letter-spacing: -0.015em;
    font-weight: 700;
}
.lex-faq-list { gap: 0; border-bottom: 1px solid var(--lex-line); }
.lex-faq-item {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--lex-line);
    box-shadow: none;
}
.lex-faq-item.is-open { box-shadow: none; }
.lex-faq-item__trigger { padding: 1.25rem 0.25rem; }
.lex-faq-item__heading { color: var(--lex-primary-dark); }
.lex-faq-item__icon {
    background: transparent;
    border-radius: 0;
    color: var(--lex-primary-dark);
}
.lex-faq-item.is-open .lex-faq-item__icon {
    background: transparent;
    color: var(--lex-primary);
}
.lex-faq-item__answer-inner { padding: 0 0.25rem 1.35rem; }

/* Reviews-Band (falls aktiv): gleiche Sprache */
.lex-reviews-band { background: var(--lex-white); }
.lex-reviews-band__title { text-transform: none; color: var(--lex-primary-dark); letter-spacing: -0.015em; }

/* ---------- 12. Footer: Marine, Hairlines, aufgeräumte Bottom-Bar ---------- */
.lex-footer { background: var(--lex-primary-dark); }
.lex-footer a:hover { color: var(--lex-white); }
.lex-footer__top { padding: 4rem 0 3rem; }
.lex-footer__heading {
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.6);
}
@media (min-width: 901px) {
    .lex-footer__col--nav,
    .lex-footer__col--hours,
    .lex-footer__col--awards { padding-top: 0; }
}
.lex-footer__col--awards .lex-footer__heading { text-align: left; }
.lex-footer__ai-notice {
    text-align: left;
    border-top: 1px solid var(--lex-line-dark);
    color: rgba(255, 255, 255, 0.7);
}
.lex-footer__ai-notice-heading { color: rgba(255, 255, 255, 0.7); }

.lex-footer__bottom {
    background: var(--lex-deep);
    border-top: 1px solid var(--lex-line-dark);
    padding: 1.25rem 0;
}
.lex-footer__bottom .lex-container { justify-content: space-between; }
.lex-footer__copy {
    margin: 0;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.55);
}
.lex-footer__legal-nav a,
.lex-footer__cookie-settings { color: rgba(255, 255, 255, 0.7); }
.lex-footer__legal-nav a:hover,
.lex-footer__cookie-settings:hover,
.lex-footer__cookie-settings:focus-visible { color: var(--lex-white); }

/* ---------- 13. Formulare: scharfkantig, klare Focus-Ringe ---------- */
.lex-form-field input[type="text"],
.lex-form-field input[type="email"],
.lex-form-field input[type="tel"],
.lex-form-field select,
.lex-form-field textarea {
    border-radius: 0;
}
.lex-form-field input[type="file"] { border-radius: 0; }
.lex-form-field input:focus-visible,
.lex-form-field select:focus-visible,
.lex-form-field textarea:focus-visible {
    outline: 2px solid var(--lex-primary);
    outline-offset: 1px;
}

/* ---------- 14. Details: flache Geometrie durchziehen ---------- */
.lex-timeline__year::after { border-radius: 0; }
.lex-philosophy__quote { border-radius: 0; }
.lex-jobs__content h2,
.lex-newsletter__title { text-transform: none; }
.lex-prose img { border-radius: 0; }
.lex-prose h2,
.lex-prose h3 { color: var(--lex-primary-dark); }

/* --- 21) Branchen-Grid: allein stehende letzte Kachel zentrieren ---
   Greift erst ab einer Kachelzahl, die keine volle Reihe füllt (z. B. 7).
   Bei 6 Kacheln ohne Wirkung. */
@media (min-width: 901px) {
    .lex-branchen-grid > :last-child:nth-child(3n+1) { grid-column: 2; }
}
@media (min-width: 601px) and (max-width: 900px) {
    .lex-branchen-grid > :last-child:nth-child(2n+1) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 0.75rem); /* = Spaltenbreite bei gap 1.5rem */
    }
}

/* --- 22) CTA-Banner: optionale Zusatznotiz (z. B. NDA-Hinweis + Ansprechpartner) ---
   Bleibt bei 1.125rem (18px-Mindestgröße), abgesetzt durch Hairline statt kleinerer Schrift. */
.lex-cta-banner__note {
    font-size: 1.125rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.78);
    margin: 1.25rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.25);
    max-width: 46rem;
}

/* --- 23) Split-Sektion ohne Bild: einspaltig statt halbleerem 2-Spalten-Grid ---
   Greift, wenn kein _branche_funktionsweise_image_id gesetzt ist. */
.lex-split--no-media .lex-split__grid { grid-template-columns: 1fr; gap: 0; }
.lex-split--no-media .lex-split__text { max-width: 62rem; font-size: 1.125rem; }
.lex-split--no-media .lex-split__headline { max-width: 62rem; }

/* --- 24) Fertigungsbeispiele: Galerie-Grid (v2.2.0) ---
   Figure-Karten mit Hairline statt Schatten, Radius 0 (Siemens-Schicht).
   Einheitliches 4:3-Raster über object-fit, Bildunterschrift ≥ 18px. */
.lex-galerie-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}
@media (max-width: 900px) {
    .lex-galerie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .lex-galerie-grid { grid-template-columns: 1fr; }
}
.lex-galerie-card {
    margin: 0;
    background: var(--lex-white);
    border: 1px solid var(--lex-line);
}
.lex-galerie-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.lex-galerie-card figcaption {
    padding: 1rem 1.25rem 1.125rem;
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--lex-gray-600);
    border-top: 1px solid var(--lex-line);
}

/* --- 25) Maschinenpark: 3er-Kartenraster auf der Unternehmensseite (v2.2.0) --- */
.lex-maschinen-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}
@media (max-width: 900px) {
    .lex-maschinen-grid { grid-template-columns: 1fr; }
}
.lex-maschinen-card {
    margin: 0;
    background: var(--lex-white);
    border: 1px solid var(--lex-line);
}
.lex-maschinen-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.lex-maschinen-card figcaption {
    padding: 1.125rem 1.25rem 1.25rem;
    border-top: 1px solid var(--lex-line);
}
.lex-maschinen-card__title {
    display: block;
    font-weight: 600;
    color: var(--lex-black);
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
}
.lex-maschinen-card__text {
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--lex-gray-600);
}

/* --- 26) Lightbox (v2.3.0) ---
   Marine-Overlay (--lex-deep), Hairlines, Radius 0 – passend zur Siemens-Schicht.
   Trigger: a.lex-lb (Galerie-/Betriebs-/Messtechnik-Karten). */
.lex-lb-noscroll,
.lex-lb-noscroll body { overflow: hidden; }
a.lex-lb { display: block; cursor: zoom-in; }
a.lex-lb:focus-visible { outline: 3px solid var(--lex-primary-light); outline-offset: 2px; }
.lex-lb-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(13, 32, 51, 0.94); /* --lex-deep */
}
.lex-lb-overlay.is-open { display: flex; }
.lex-lb-figure {
    margin: 0;
    max-width: min(90vw, 1400px);
    text-align: center;
}
.lex-lb-img {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    margin: 0 auto;
    background: var(--lex-white);
}
.lex-lb-caption {
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.125rem;
    line-height: 1.5;
}
.lex-lb-caption:empty { display: none; }
.lex-lb-close,
.lex-lb-prev,
.lex-lb-next {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0;
    color: var(--lex-white);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}
.lex-lb-close:hover,
.lex-lb-prev:hover,
.lex-lb-next:hover { background: rgba(255, 255, 255, 0.12); }
.lex-lb-close:focus-visible,
.lex-lb-prev:focus-visible,
.lex-lb-next:focus-visible { outline: 3px solid var(--lex-primary-light); outline-offset: 2px; }
.lex-lb-close { top: 1.25rem; right: 1.25rem; }
.lex-lb-prev  { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lex-lb-next  { right: 1.25rem; top: 50%; transform: translateY(-50%); }
.lex-lb-counter {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.125rem;
    letter-spacing: 0.05em;
}
@media (max-width: 600px) {
    .lex-lb-prev { left: 0.5rem; }
    .lex-lb-next { right: 0.5rem; }
    .lex-lb-img { max-height: 68vh; }
}

/* --- 27) Feinschliff nach visuellem QA-Review 21.07.2026 (v2.3.1) --- */

/* 27a) Weißer 80px-Streifen zwischen letzter Sektion und Footer entfernen:
   main bringt ein padding-bottom mit, das nach dunklen CTA-Bändern wie eine
   leere Sektion wirkt. Sektions-Padding (80px) liefert bereits die Luft. */
main.lex-main { padding-bottom: 0; }

/* 27b) CTA-Banner: eine Ausrichtungsachse statt Mischung aus zentriert/links.
   Siemens-Raster = konsequent linksbündig (Text links, Button rechts). */
.lex-cta-banner__inner,
.lex-cta-banner__text,
.lex-cta-banner__text h2,
.lex-cta-banner__text p { text-align: left; }

/* 27c) Leistungs-Icons: Radius 0 + Palette statt geerbter Beige-Kachel mit 8px-Radius. */
.lex-leistung-card__icon {
    border-radius: 0 !important;
    background: var(--lex-tint) !important;
    color: var(--lex-primary);
    padding: 0.5rem !important;
}

/* 27d) KI-Transparenzhinweis: Mindesttextgröße 18px einhalten. */
.lex-footer__ai-notice-text { font-size: 1.125rem; line-height: 1.6; }

/* 27e) Mobile: lange Komposita (Hochtechnologiebetrieb, Hochleistungskunststoffe)
   sauber trennen statt horizontal zu überlaufen. */
@media (max-width: 700px) {
    .lex-hero__claim,
    .lex-page-header__title,
    .lex-section__header h2,
    .lex-split__headline,
    .lex-digital__headline {
        overflow-wrap: break-word;
        hyphens: auto;
        -webkit-hyphens: auto;
    }
}

/* 27f) Anfrage-Formular mobil: `1fr` erbt min-content der Selects und sprengt
   den Viewport (440px bei 390px) — minmax(0,1fr) + harte Feldbegrenzung. */
@media (max-width: 720px) {
    .lex-anfrage__grid { grid-template-columns: minmax(0, 1fr); }
    .lex-form-field input:not([type="checkbox"]):not([type="radio"]),
    .lex-form-field select,
    .lex-form-field textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
    .lex-checkbox span { min-width: 0; overflow-wrap: break-word; }
}

/* 27g) Floatbar mobil: unten rechts andocken statt mittig über dem Fließtext. */
@media (max-width: 600px) {
    .lex-floatbar { top: auto; bottom: 1rem; transform: none; }
}

/* 27h) Branchen-Kacheln mobil: keine künstliche Einheitshöhe im 1-Spalten-Stapel. */
@media (max-width: 600px) {
    .lex-branchen-grid { grid-auto-rows: auto; }
    .lex-branche-card { height: auto; min-height: 0; }
}

/* 27i) Timeline: Spaltenbreite/Linie/Punkt hängen an --lex-tl-col (siehe Basis-Regeln),
   damit lange Labels wie "3 Generationen" nicht in den Punkt laufen. */

/* 27j) Listen in Prose- und Split-Texten: bündige Flucht + sichtbarer Marker
   statt unsichtbar eingerückter list-style-none-Punkte. */
.lex-prose ul,
.lex-split__text ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}
.lex-prose ul li,
.lex-split__text ul li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.5rem;
}
.lex-prose ul li::before,
.lex-split__text ul li::before {
    content: "–";
    position: absolute;
    left: 0;
    color: var(--lex-primary);
    font-weight: 600;
}

/* 27k) Eigene Produkte: echte Produktfotos im 3:2-Raster —
   gleiche Bildsprache wie die Intro-Splits (Rahmen + Tint-Offset-Fläche). */
.lex-split__media--product {
    aspect-ratio: auto;
    overflow: visible;
    padding: 0 1.25rem 1.25rem 0;
}
.lex-split__media--product img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
    border: 1px solid var(--lex-line);
    box-shadow: 1.25rem 1.25rem 0 0 var(--lex-tint);
}

/* --- 28) Hero-Video (v2.3.2) ---
   3D-Explosionsloop (1920×822, Marine-Grund) über dem statischen Hero-Bild.
   object-position 65 %: Baugruppe bleibt rechts der Mitte, Textspalte links frei.
   Bei prefers-reduced-motion übernimmt das Bild darunter. */
.lex-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 65% center;
}
@media (prefers-reduced-motion: reduce) {
    .lex-hero__video { display: none; }
}

/* --- 29) Restbestand Mediathek integriert (v2.4.0) --- */

/* Archiv-Miniraster: 4 kleinere Kacheln in der Geschichte-Sektion. */
.lex-galerie-grid--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
    .lex-galerie-grid--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .lex-galerie-grid--vier { grid-template-columns: 1fr; }
}
.lex-galerie-grid--vier figcaption { font-size: 1.125rem; padding: 0.75rem 1rem 0.875rem; }

/* CTA-Band mit Bildhintergrund (cta-implantate-blau): Marine-Overlay hält
   den Textkontrast, das Motiv bleibt dezent im Hintergrund. */
.lex-cta-banner--bild {
    position: relative;
    background-size: cover;
    background-position: center;
}
.lex-cta-banner--bild::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(13, 32, 51, 0.82); /* --lex-deep */
}
.lex-cta-banner--bild .lex-container { position: relative; }

/* --- 30) Bilder auf allen Seiten (v2.4.1) --- */

/* Branchen-Detail: Beitragsbild als breites Band über dem Fließtext. */
.lex-branche-detail__media {
    margin: 0 0 2.5rem;
    border: 1px solid var(--lex-line);
}
.lex-branche-detail__media img {
    display: block;
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}

/* Leistungs-Detail: Beitragsbild im Prose-Bereich sauber rahmen. */
.lex-leistung-detail__media {
    margin: 0 0 2rem;
    border: 1px solid var(--lex-line);
}
.lex-leistung-detail__media img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Impressum: Gebäudefoto mit Bildunterschrift. */
.lex-legal__media {
    margin: 2.5rem 0 0;
    border: 1px solid var(--lex-line);
}
.lex-legal__media img { display: block; width: 100%; }
.lex-legal__media figcaption {
    padding: 0.875rem 1.25rem;
    font-size: 1.125rem;
    color: var(--lex-gray-600);
    border-top: 1px solid var(--lex-line);
}

/* ==========================================================================
   SEITEN-HEROES
   Bildbühne für alle Unterseiten. Der Seitenkopf umschließt jetzt auch die
   Breadcrumbs, damit das Bild vom oberen Seitenrand an durchläuft und der
   transparente Header darüber liegt.

   Ebenen (z-index):
     -3  Bild        .lex-page-header__media
     -2  Abdunklung  .lex-page-header__scrim
     -1  Punktraster .lex-page-header__grid
      0  Text
   ========================================================================== */
.lex-page-header--media {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: clamp(400px, 42vw, 580px);
    padding: 0 0 clamp(2.5rem, 4vw, 4rem);
    background: var(--lex-primary-dark);
    border-bottom: none;
}
/* Überschreibt den Zusatzabstand aus der Transparent-Header-Regel. */
body.lex-header-transparent .lex-page-header--media { padding-top: 0; }

.lex-page-header__media { position: absolute; inset: 0; z-index: -3; }
.lex-page-header__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Abdunklung: links kräftig für die Textzone, unten Verlauf in die Seite.
   Die Bilder sind bewusst mit ruhigem linken Drittel produziert. */
.lex-page-header__scrim {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(101deg,
            rgba(9, 26, 49, 0.94) 0%,
            rgba(9, 26, 49, 0.87) 26%,
            rgba(9, 26, 49, 0.58) 60%,
            rgba(9, 26, 49, 0.30) 100%),
        linear-gradient(0deg,
            rgba(9, 26, 49, 0.88) 0%,
            rgba(9, 26, 49, 0.20) 42%,
            rgba(9, 26, 49, 0.00) 70%);
}
/* Fotobasierte Heroes (Werkhalle, Messraum, Gebäude) sind deutlich heller
   als die Studio-Motive → höhere Deckung, sonst leidet der Textkontrast. */
.lex-page-header--photo .lex-page-header__scrim {
    background:
        linear-gradient(101deg,
            rgba(9, 26, 49, 0.96) 0%,
            rgba(9, 26, 49, 0.90) 30%,
            rgba(9, 26, 49, 0.72) 62%,
            rgba(9, 26, 49, 0.55) 100%),
        linear-gradient(0deg,
            rgba(9, 26, 49, 0.90) 0%,
            rgba(9, 26, 49, 0.35) 45%,
            rgba(9, 26, 49, 0.10) 75%);
}

/* Technisches Punktraster oben rechts – Signatur aus dem Sauria-Designsystem. */
.lex-page-header__grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.55;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.35) 1.1px, transparent 1.1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 60% 75% at 100% 0%, #000 8%, transparent 70%);
            mask-image: radial-gradient(ellipse 60% 75% at 100% 0%, #000 8%, transparent 70%);
}

/* Breadcrumbs liegen jetzt im Seitenkopf: Hintergrund weg, Bild bleibt sichtbar. */
.lex-page-header--media .lex-page-breadcrumbs,
body.lex-header-transparent .lex-page-header--media .lex-page-breadcrumbs {
    background: transparent;
    padding-bottom: 0;
}

/* Textblock */
.lex-page-header__body { width: 100%; }
.lex-page-header--media .lex-page-header__title,
.lex-page-header--media .lex-page-header__subtitle,
.lex-page-header--media .lex-page-header__lead {
    text-shadow: 0 2px 20px rgba(6, 18, 36, 0.55);
}
.lex-page-header--media .lex-page-header__lead { max-width: 44rem; }

/* Sechskantmutter vor dem Eyebrow – das LEX-Markenzeichen, statt der früheren
   Akzentlinie. Gilt für ALLE Eyebrows im Medien-Seitenkopf, auch ohne die
   Klasse lex-eyebrow--mark. margin: 0 neutralisiert das margin-right der
   globalen Mark-Regel; den Abstand zum Text liefert das gap. */
.lex-page-header--media .lex-section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.82);
}
.lex-page-header--media .lex-section__eyebrow::before {
    content: "";
    width: 1.05em;
    height: 1.05em;
    margin: 0;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: var(--lex-eyebrow-mark) no-repeat center / contain;
            mask: var(--lex-eyebrow-mark) no-repeat center / contain;
}

/* Abschlusskante unten: dünne Linie in der Hausfarbe. */
.lex-page-header--media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--lex-primary) 0%,
        var(--lex-primary-light) 38%,
        rgba(61, 123, 196, 0) 100%);
}

/* Branchen-Seiten: Icon als Glasfläche über dem Bild statt nackt. */
.lex-page-header--media .lex-branche-hero__icon img {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 1.25rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

@media (max-width: 900px) {
    .lex-page-header--media {
        min-height: 380px;
        padding-bottom: 2.5rem;
    }
    /* Hochformatige Viewports: Text sitzt unten, Abdunklung vertikal führen. */
    .lex-page-header__scrim,
    .lex-page-header--photo .lex-page-header__scrim {
        background:
            linear-gradient(0deg,
                rgba(9, 26, 49, 0.95) 0%,
                rgba(9, 26, 49, 0.80) 38%,
                rgba(9, 26, 49, 0.55) 65%,
                rgba(9, 26, 49, 0.45) 100%);
    }
    .lex-page-header__grid { opacity: 0.35; }
}

@media (max-width: 600px) {
    .lex-page-header--media { min-height: 320px; }
}

/* Kein Parallax/Animation – aber Bildkanten bei reduzierter Bewegung ruhig halten. */
@media (prefers-reduced-motion: reduce) {
    .lex-page-header--media { scroll-behavior: auto; }
}

/* ==========================================================================
   Trust-Marquee – durchlaufende Leiste unter Hero / Seitenkopf
   Markup: template-parts/logo-marquee.php
   ========================================================================== */
.lex-marquee {
    position: relative;
    overflow: hidden;
    background: var(--lex-white);
    border-top: 1px solid var(--lex-gray-200);
    border-bottom: 1px solid var(--lex-gray-200);
    padding: 0.875rem 0;
}

/* Weiche Kanten links/rechts, damit die Items nicht hart abgeschnitten wirken. */
.lex-marquee::before,
.lex-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(2rem, 8vw, 6rem);
    z-index: 2;
    pointer-events: none;
}
.lex-marquee::before {
    left: 0;
    background: linear-gradient(to right, var(--lex-white), rgba(255, 255, 255, 0));
}
.lex-marquee::after {
    right: 0;
    background: linear-gradient(to left, var(--lex-white), rgba(255, 255, 255, 0));
}

.lex-marquee__viewport {
    display: flex;
    width: max-content;
    animation: lex-marquee-scroll 60s linear infinite;
}

.lex-marquee__track {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lex-marquee__item {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.lex-marquee__link {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.25rem 0;
    color: var(--lex-gray-800);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: color 0.2s ease;
}
a.lex-marquee__link:hover,
a.lex-marquee__link:focus-visible {
    color: var(--lex-primary);
}
a.lex-marquee__link:focus-visible {
    outline: 2px solid var(--lex-primary);
    outline-offset: 4px;
    border-radius: 2px;
}

.lex-marquee__icon {
    flex: 0 0 auto;
    color: var(--lex-primary);
}

.lex-marquee__img {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(1);
    opacity: 0.85;
    transition: filter 0.2s ease, opacity 0.2s ease;
}
a.lex-marquee__link:hover .lex-marquee__img,
a.lex-marquee__link:focus-visible .lex-marquee__img {
    filter: grayscale(0);
    opacity: 1;
}

/* Trennzeichen zwischen zwei Items (Siemens-Hairline-Sprache). */
.lex-marquee__sep {
    display: block;
    width: 1px;
    height: 1.25rem;
    margin: 0 clamp(1.5rem, 4vw, 3rem);
    background: var(--lex-gray-200);
}

@keyframes lex-marquee-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* Pause bei Hover und beim Tastatur-Fokus innerhalb der Leiste. */
.lex-marquee:hover .lex-marquee__viewport,
.lex-marquee:focus-within .lex-marquee__viewport {
    animation-play-state: paused;
}

/* Reduzierte Bewegung: kein Lauf, dafür manuell scrollbar. */
@media (prefers-reduced-motion: reduce) {
    .lex-marquee {
        overflow-x: auto;
    }
    .lex-marquee::before,
    .lex-marquee::after {
        display: none;
    }
    .lex-marquee__viewport {
        animation: none;
    }
    .lex-marquee__track[aria-hidden="true"] {
        display: none;
    }
}

@media (max-width: 767px) {
    .lex-marquee {
        padding: 0.75rem 0;
    }
    .lex-marquee__link {
        font-size: 1rem;
    }
}

/* ==========================================================================
   TOPBAR (Kurzdaten über der Navigation)
   Desktop-only Info-Leiste: Öffnungszeiten, Standort · Zertifikat, Telefon,
   E-Mail. Liegt innerhalb von .lex-header und wird beim Scrollen (is-scrolled)
   ausgeblendet, damit die sticky Navigation kompakt bleibt.
   ========================================================================== */
.lex-topbar {
    background: var(--lex-primary-dark);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9375rem;
    line-height: 1.4;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.lex-topbar__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.5rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.lex-topbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex-wrap: wrap;
}
.lex-topbar li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.lex-topbar__icon { flex-shrink: 0; opacity: 0.75; }
.lex-topbar__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--lex-white);
    text-decoration: none;
    transition: color 0.15s ease;
}
.lex-topbar__link:hover,
.lex-topbar__link:focus-visible { color: var(--lex-cta-light); }
.lex-topbar__link:hover .lex-topbar__icon,
.lex-topbar__link:focus-visible .lex-topbar__icon { opacity: 1; }
.lex-topbar__link--cert { font-weight: 600; }

/* Auf Seiten mit Overlay-Header (dunkler Seitenkopf/Hero) leicht transparent. */
body.lex-header-transparent .lex-topbar {
    background: rgba(13, 32, 51, 0.72);
    backdrop-filter: saturate(150%) blur(10px);
    -webkit-backdrop-filter: saturate(150%) blur(10px);
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* Beim Scrollen verschwindet die Leiste – nur die Navigation bleibt sticky. */
.lex-header.is-scrolled .lex-topbar { display: none; }

/* Overlay-Seiten: Seitenkopf um die Topbar-Höhe (~35px) nach unten schieben. */
@media (min-width: 901px) {
    body.lex-header-transparent .lex-page-breadcrumbs { padding-top: 139px; }
    body.lex-header-transparent .lex-page-header--media .lex-page-breadcrumbs { padding-top: 139px; }
    .home .lex-hero .lex-container { padding-top: 10rem; }
}

/* Mobil: Kurzdaten stehen im Mobile-Menü und im Footer. */
@media (max-width: 900px) {
    .lex-topbar { display: none; }
}

/* --- 29) Kontakt: Google-Maps-Karte (v2.6.1) ---
   Flache Geometrie, Hairline-Rahmen, quadratischer CTA-Chip statt Pille —
   analog zur Holtkamp-Map-Sektion, aber in der Siemens-Formsprache von LEX. */
.lex-map__frame {
    position: relative;
    aspect-ratio: 21 / 9;
    min-height: 360px;
    border: 1px solid var(--lex-line);
    background: var(--lex-gray-100, #F1F4F8);
    overflow: hidden;
}
.lex-map__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.lex-map__cta {
    position: absolute;
    left: 1.25rem;
    bottom: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--lex-white);
    color: var(--lex-primary-dark);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--lex-line);
    border-radius: 0;
    box-shadow: 0 2px 10px rgba(13, 32, 51, 0.14);
}
.lex-map__cta:hover,
.lex-map__cta:focus-visible { background: var(--lex-primary-dark); color: var(--lex-white); border-color: var(--lex-primary-dark); }
.lex-map__cta svg { flex: none; }
.lex-map__note {
    margin: 1rem 0 0;
    font-size: 1rem;
    color: var(--lex-gray-800);
}

@media (max-width: 900px) {
    .lex-map__frame { aspect-ratio: 4 / 3; min-height: 320px; }
    .lex-map__cta { left: 1rem; bottom: 1rem; padding: 0.65rem 1rem; }
}

/* ==========================================================================
   USP-GLASKARTEN IM SEITENKOPF  (LEX-HERO-USPS)
   Markup: inc/lex-hero-usps.php → lex_the_hero_usps()

   Karten-Spalte rechts im Hero/Seitenkopf. Inhalt ist pro Seite anders,
   das Aussehen überall identisch. Glas-Optik in der Siemens-Sprache:
   scharfkantig (radius 0), Marine-Tint statt hellem Milchglas,
   1px-Hairline und eine 3px-Akzentkante links in LEX-Blau.

   Marine-Tint (nicht weiß): über hellen Bildbereichen bliebe weißes
   Glas mit weißer Schrift unter WCAG AA. Deckung 0.46 hält den Kontrast
   auch über der hellen Werkhalle sicher über 4.5:1.
   ========================================================================== */

/* ---------- Spalten-Layout: Text links, Karten rechts ---------- */
.lex-hero__cols,
.lex-page-header__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
    gap: clamp(2rem, 4vw, 4.5rem);
    width: 100%;
}
.lex-page-header__cols { align-items: end; }
.lex-hero__cols       { align-items: center; }

/* Grid-Items dürfen nicht über ihre Spalte hinauswachsen: ohne min-width: 0
   sprengen lange Komposita ("CNC-Präzisionsfertigung") das Raster und die
   ganze Seite scrollt horizontal. */
.lex-hero__cols > *,
.lex-page-header__cols > * { min-width: 0; }
.lex-hero__claim,
.lex-page-header__title,
.lex-usp__title,
.lex-usp__text { overflow-wrap: break-word; }

/* Der Fließtext wird in der Zweispaltigkeit schmaler geführt. */
.lex-page-header__cols .lex-page-header__lead,
.lex-page-header--media .lex-page-header__cols .lex-page-header__lead { max-width: 38rem; }
.lex-hero__cols .lex-hero__sub { max-width: 34rem; }

/* Mehr Bühnenhöhe, sobald Karten im Seitenkopf stehen. */
.lex-page-header--media { min-height: clamp(460px, 46vw, 640px); }

/* ---------- Karten-Spalte ---------- */
.lex-usps { width: 100%; }
.lex-usps__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ---------- Einzelne Glaskarte ---------- */
.lex-usp {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem 1rem 1.125rem;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-left: 3px solid var(--lex-primary-light);
    border-radius: 0;
    background: rgba(11, 30, 52, 0.46);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
            backdrop-filter: blur(16px) saturate(130%);
    box-shadow: 0 8px 30px -12px rgba(6, 18, 36, 0.55);
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* Icon-Fläche: quadratisch, technisch – kein Kreis. */
.lex-usp__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--lex-white);
    background: rgba(27, 95, 170, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.lex-usp__icon svg { display: block; }

.lex-usp__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.lex-usp__title {
    font-family: var(--lex-font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--lex-white);
    text-wrap: balance;
}
.lex-usp__text {
    font-size: 1.0625rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.88);
}

/* Karten ohne Untertitel (Branchen-Key-Points) mittig ausrichten. */
.lex-usp__body:not(:has(.lex-usp__text)) { justify-content: center; }

/* ---------- Startseite: Hero-Karten etwas kräftiger ---------- */
.lex-hero .lex-usp { background: rgba(11, 30, 52, 0.50); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .lex-hero__cols,
    .lex-page-header__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); }
}

@media (max-width: 980px) {
    /* Einspaltig: Karten rutschen unter den Text. */
    .lex-hero__cols,
    .lex-page-header__cols {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
    .lex-page-header__cols .lex-page-header__lead,
    .lex-page-header--media .lex-page-header__cols .lex-page-header__lead,
    .lex-hero__cols .lex-hero__sub { max-width: 46rem; }
    .lex-usps__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
    /* backdrop-filter ist auf Mobilgeräten teuer → höhere Deckung statt Blur. */
    .lex-usp,
    .lex-hero .lex-usp {
        background: rgba(11, 30, 52, 0.78);
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
    }
}

@media (max-width: 640px) {
    .lex-usps__list { grid-template-columns: 1fr; }
    .lex-usp { padding: 0.875rem 1rem 0.875rem 0.875rem; gap: 0.875rem; }
    .lex-usp__icon { width: 2.5rem; height: 2.5rem; }
}

/* Hover nur auf Zeigergeräten – Siemens-Look kennt keine Lifts, nur Aufhellung. */
@media (hover: hover) {
    .lex-usp:hover {
        background: rgba(11, 30, 52, 0.58);
        border-color: rgba(255, 255, 255, 0.30);
    }
}

/* Kein Blur, wenn Transparenz reduziert werden soll. */
@media (prefers-reduced-transparency: reduce) {
    .lex-usp {
        background: rgba(11, 30, 52, 0.88);
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
    }
}

/* ==========================================================================
   Eyebrow-Marker – Sechskantmutter statt Schrägstrich
   Ersetzt global das frühere "/ " vor Eyebrow-Labels. Als CSS-Maske gesetzt,
   damit das Icon immer die Textfarbe des jeweiligen Eyebrows übernimmt
   (Accent, Primary, hell im Mega-Menü).
   ========================================================================== */
.lex-eyebrow--mark::before {
    content: "";
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    margin-right: 0.5em;
    vertical-align: -0.14em;
    background-color: currentColor;
    -webkit-mask: var(--lex-eyebrow-mark) no-repeat center / contain;
            mask: var(--lex-eyebrow-mark) no-repeat center / contain;
}

@media (forced-colors: active) {
    .lex-eyebrow--mark::before { background-color: CanvasText; }
}
/* --- 30) Kontakt-CRO: „Warum LEX“-Gründe, Ablauf-Schritte, Risikoumkehr ---
   Einwandbehandlung direkt vor dem Formular. Flache Geometrie, Hairlines,
   Marine-Akzentkante links — konsistent zur übrigen Siemens-Formsprache. */
.lex-why__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--lex-line);
    border: 1px solid var(--lex-line);
}
.lex-why__card {
    background: var(--lex-white);
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.lex-why__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    background: var(--lex-tint);
    color: var(--lex-primary);
    flex: none;
}
.lex-why__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--lex-primary-dark);
}
.lex-why__text {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--lex-gray-800);
}
.lex-why__cta {
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
}
.lex-why__cta-note {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--lex-gray-800);
}
.lex-why__cta-note a {
    color: var(--lex-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Anfrage-Layout: Ablauf-Schritte links neben dem Formular (kompakter Funnel) */
.lex-anfrage__layout {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 3rem;
    align-items: start;
    max-width: 76rem;
    margin: 0 auto;
}
.lex-anfrage__layout .lex-anfrage__form {
    max-width: none;
    margin: 0;
}

/* Ablauf: 3 Schritte neben dem Formular (Desktop gestapelt, mobil als Reihe darüber) */
.lex-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    position: sticky;
    top: 7.5rem;
}
.lex-steps__item {
    padding-top: 1rem;
    border-top: 3px solid var(--lex-primary);
}
.lex-steps__num {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--lex-primary);
    margin-bottom: 0.5rem;
}
.lex-steps__title {
    margin: 0 0 0.5rem;
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--lex-primary-dark);
}
.lex-steps__text {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--lex-gray-800);
}

/* Risikoumkehr direkt unter dem Absende-Button */
.lex-anfrage__reassure {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
}
.lex-anfrage__reassure li {
    position: relative;
    padding-left: 1.6rem;
    font-size: 1rem;
    color: var(--lex-gray-800);
}
.lex-anfrage__reassure li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 0.7rem;
    height: 0.36rem;
    border-left: 2px solid var(--lex-primary);
    border-bottom: 2px solid var(--lex-primary);
    transform: rotate(-45deg);
}

@media (max-width: 1024px) {
    .lex-why__grid { grid-template-columns: repeat(2, 1fr); }
    /* Schritte wieder als Reihe über dem gestapelten Formular */
    .lex-anfrage__layout { grid-template-columns: 1fr; gap: 2.25rem; }
    .lex-steps { position: static; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}
@media (max-width: 720px) {
    .lex-why__grid  { grid-template-columns: 1fr; }
    .lex-why__card  { padding: 1.5rem 1.25rem; }
    .lex-steps      { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* --- Branchen-Detail: Einleitungstext + Detailfoto (v2.8.2) ---
   „Über diese Branche" war eine schmale Textspalte mit viel Leerraum rechts;
   jetzt Split-Grid mit Foto rechts. Ohne _branche_content_image_id greift
   weiterhin die schmale Prose-Variante (Fallback im Template). */
.lex-split--intro .lex-split__grid { grid-template-columns: 7fr 5fr; }
.lex-split--intro .lex-split__media img { object-position: center; }
@media (max-width: 900px) {
    .lex-split--intro .lex-split__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ============================================================
 * Branchen-Content „aufgelockert" (.lex-bflow)
 * Strukturierter the_content()-Inhalt über die volle Boxed-Breite:
 * Intro (Text + Detailfoto), Icon-Karten (nutzt lex-digital__grid /
 * lex-leistung-card) und ein Fakten-Band. single-branche.php erkennt
 * den Marker „lex-bflow" und lässt die schmale Lesespalte dann weg.
 * ============================================================ */
.lex-bflow { display: grid; gap: 3.25rem; }

/* Intro: Text links, Detailfoto rechts */
.lex-bflow__intro {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 2rem 3rem;
    align-items: center;
}
.lex-prose .lex-bflow__lead {
    font-size: 1.375rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--lex-primary-dark);
    margin: 0 0 1rem;
}
.lex-bflow__intro-text p:last-child { margin-bottom: 0; }
.lex-bflow__media { margin: 0; }
.lex-prose .lex-bflow__media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--lex-card-radius);
}
.lex-bflow__media figcaption { margin-top: 0.65rem; font-size: 1rem; color: var(--lex-gray-600); }

/* Blockkopf: Eyebrow + H2 (gleiche Sprache und Größe wie lex-section__header) */
.lex-bflow__head { margin: 0 0 1.75rem; }
.lex-prose .lex-bflow__head h2 {
    margin: 0.4rem 0 0;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* Icon-Karten im Prose-Kontext: Prose-Margins neutralisieren */
.lex-bflow .lex-digital__grid { margin: 0; }
.lex-prose .lex-bflow .lex-digital__card-title { margin: 0 0 0.5rem; font-size: 1.25rem; }
.lex-prose .lex-bflow .lex-digital__card-text { margin: 0; font-size: 1.125rem; color: var(--lex-gray-600); }

.lex-prose .lex-bflow__note { margin: 1.25rem 0 0; color: var(--lex-gray-600); }

/* Fakten-Band: 3 Spalten mit Icon-Kachel */
.lex-bflow__band {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}
.lex-bflow__fact {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--lex-gray-50);
    border: 1px solid var(--lex-line);
    border-radius: var(--lex-card-radius);
    padding: 1.5rem;
}
.lex-bflow__fact-icon {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lex-tint);
    color: var(--lex-primary);
}
.lex-bflow__fact-icon svg { width: 1.5rem; height: 1.5rem; }
.lex-bflow__fact-title {
    display: block;
    font-weight: 700;
    color: var(--lex-primary-dark);
    margin: 0 0 0.35rem;
    font-size: 1.125rem;
}
.lex-bflow__fact-text { display: block; font-size: 1.125rem; line-height: 1.6; color: var(--lex-gray-600); }

@media (max-width: 1024px) {
    .lex-bflow__band { grid-template-columns: 1fr; }
    .lex-bflow__fact { padding: 1.25rem; }
}
@media (max-width: 900px) {
    .lex-bflow__intro { grid-template-columns: 1fr; }
}

/* ============================================================
 * Footer-Sitemap (v2.9.2)
 * Der Footer zeigt nicht mehr nur die fünf Top-Level-Punkte,
 * sondern alle Rubriken der Hauptnavigation mit ihren Unterseiten.
 * Reihe 1: Unternehmen · Leistungen · Branchen · Direkt zu
 * Reihe 2: Marke/Adresse + Erreichbarkeit · Zertifizierungen
 * ============================================================ */
/* Reihe 2 zweispaltig: links der Kontaktblock (Marke, Adresse, Erreichbarkeit),
   rechts die Zertifizierungen — sonst klafft neben der kurzen Öffnungszeiten-
   Spalte eine große Leerfläche neben dem hohen Zertifikats-Block. */
.lex-footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: 3rem;
    row-gap: 2.25rem;
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--lex-line-dark);
}
.lex-footer__col--brand  { grid-column: 1; grid-row: 1; }
.lex-footer__col--hours  { grid-column: 1; grid-row: 2; }
.lex-footer__col--awards { grid-column: 2; grid-row: 1 / span 2; }

/* Zertifikats-Block bündig zur Überschrift — die Rechtsbündigkeit stammt aus
   der alten, schmalen vierten Spalte und reißt in der breiten Spalte auf. */
.lex-footer__col--awards .lex-footer__certs { justify-content: flex-start; }
.lex-footer__col--awards .lex-footer__cert-meta { text-align: left; }
.lex-footer__col--awards .lex-footer__cert-download { float: none; }

.lex-footer__sitemap {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.25rem 3rem;
}
.lex-footer__group-heading { margin: 0 0 1rem; }
.lex-footer__group-heading a { color: inherit; text-decoration: none; }
.lex-footer__group-heading a:hover,
.lex-footer__group-heading a:focus-visible {
    color: var(--lex-white);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.lex-footer__group-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.lex-footer__group-list li a {
    display: inline-block;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.95rem;
    line-height: 1.45;
    text-decoration: none;
}
.lex-footer__group-list li a:hover,
.lex-footer__group-list li a:focus-visible {
    color: var(--lex-white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 1100px) {
    .lex-footer__sitemap { gap: 2rem; }
}
@media (max-width: 900px) {
    .lex-footer__grid {
        grid-template-columns: 1fr;
        row-gap: 2rem;
        margin-top: 2rem;
        padding-top: 2rem;
    }
    .lex-footer__col--brand,
    .lex-footer__col--hours,
    .lex-footer__col--awards { grid-column: 1; grid-row: auto; }
    .lex-footer__sitemap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.75rem 1.5rem;
    }
}

/* ============================================================
 * Volle Boxed-Breite auf Branchen- + Leistungs-Detailseiten (v2.9.2)
 * Der Container wächst seit dem Ultrawide-Update bis 1600px, die
 * Inhalte hingen aber an alten Lesebreiten (72/62/64rem) und endeten
 * auf breiten Screens im zweiten Drittel. Alle Text-Caps in diesen
 * Templates laufen jetzt bis zur Boxed-Kante; die Lesebreite regeln
 * die Grid-Spalten (7fr/5fr bzw. 2fr/1fr), nicht mehr max-width.
 * ============================================================ */
.single-branche .lex-prose,
.single-leistung .lex-prose {
    max-width: none;
}
.lex-split--no-media .lex-split__text,
.lex-split--no-media .lex-split__headline {
    max-width: none;
}
/* Leistungen-Übersicht: Erfolgsreport-Band bündig zur Boxed-Kante */
.lex-leistungen-erfolgsreport__title,
.lex-leistungen-erfolgsreport__lead,
.lex-leistungen-erfolgsreport__copy {
    max-width: none;
}

/* ============================================================
 * 30) RESPONSIVE-HÄRTUNG — Intrinsic Sizing (v2.9.3)
 * ------------------------------------------------------------
 * Befund 21.07.2026 (Playwright, echte Mobile-Emulation): 20 von 24
 * Seiten hatten horizontalen Overflow. Der Layout-Viewport weitete
 * sich auf bis zu 954 px bei 390 px Gerätebreite auf — Chrome/Safari
 * zoomen die Seite dann heraus, die Schrift wird ~40 % kleiner.
 *
 * Warum das bisher niemand sah: `overflow-x: hidden` im Parent-Theme
 * (sauriatheme base.css) kappt die Scrollbar, sodass Fenster-Screenshots
 * bei 390 px Breite sauber aussehen. Der Overflow existiert trotzdem —
 * er verschiebt sich nur von "Seite scrollt seitwärts" zu "Seite ist
 * herausgezoomt". Nur echte Mobile-Emulation (oder ein echtes Gerät)
 * macht ihn sichtbar.
 *
 * Es geht hier NICHT um Breakpoints, sondern um intrinsische Breiten:
 * Grid-/Flex-Elemente dürfen per Default nicht unter ihre min-content-
 * Breite schrumpfen. Ein einziger nicht umbrechender Fragetext reißt so
 * das gesamte Dokument auf.
 * ============================================================ */

/* --- 30.1) Ursache Nummer eins: Buttons brechen nicht um.
   Das Parent-Bundle (sauriatheme-bundle.min.css) setzt
   `button, [type=button], [type=submit], [type=reset] { white-space: nowrap }`.
   Das trifft JEDEN Button — u. a. die FAQ-Akkordeon-Trigger, deren
   Fragetexte dadurch einzeilig auf bis zu 852 px auswuchsen. Buttons mit
   kurzem Label (CTAs) bleiben davon unberührt, die brauchen kein nowrap. */
button,
[type="button"],
[type="submit"],
[type="reset"] {
    white-space: normal;
}

/* --- 30.2) FAQ-Akkordeon: min-content sauber begrenzen.
   `1fr` entspricht `minmax(auto, 1fr)` — das `auto`-Minimum ist die
   min-content-Breite des Items, nicht 0. Deshalb minmax(0, 1fr).
   Der Trigger war zusätzlich ein Flex-Container: dessen min-content-Breite
   berechnet sich aus den MAX-content-Beiträgen seiner Items (Flexbox-
   Intrinsic-Sizing). Als Grid mit minmax(0,1fr) fällt sie von 621 auf
   143 px — optisch identisch (Text links, Icon rechts, mittig). */
.lex-faq-list {
    grid-template-columns: minmax(0, 1fr);
}
.lex-faq-item,
.lex-faq-item__heading,
.lex-faq-item__answer,
.lex-faq-item__answer-inner {
    min-width: 0;
}
.lex-faq-item__trigger {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-width: 0;
}
.lex-faq-item__q-text {
    min-width: 0;
    overflow-wrap: break-word;
}

/* --- 30.3) Leistungs-Detail: gleiche 1fr-Falle unterhalb 900 px. */
@media (max-width: 900px) {
    .lex-leistung-detail__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- 30.4) Kontakt-Karte: `aspect-ratio` + `min-height` ohne definite
   Breite rechnet rückwärts — 320 px Höhe × 4/3 ergab 426 px Breite und
   damit 68 px Overflow. Mit width:100% ist die Breite definit, die
   min-height hebt dann nur noch die Höhe an. */
.lex-map__frame {
    width: 100%;
}

/* --- 30.5) Honeypot nicht mehr per left:-9999px parken (erzeugt
   Dokument-Overflow nach links), sondern per Clip verstecken. Bleibt für
   Bots ein normal gerendertes Feld — display:none würde als Honeypot
   erkannt. */
.lex-anfrage__hp {
    left: auto !important;
    right: auto !important;
    margin: -1px;
    clip-path: inset(50%);
}

/* --- 30.6) Lange deutsche Komposita ("Datenschutzerklärung",
   "Hochleistungskunststoffe") sprengen auf schmalen Screens jede Spalte.
   `hyphens: auto` greift dank lang="de-DE" am <html>; overflow-wrap ist
   der Notnagel für Wörter ohne Trennstelle. */
.lex-prose,
.lex-split__text {
    overflow-wrap: break-word;
}
@media (max-width: 1024px) {
    h1, h2, h3, h4,
    dt, dd,
    figcaption {
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* ============================================================
 * 31) Branchen-Intro: kompakteres Foto mit Offset-Passepartout (v2.9.4)
 * ------------------------------------------------------------
 * Das Intro-Foto (Split-Intro + bflow) wirkte als halbe Seitenbreite
 * zu dominant. Textspalte jetzt 2fr, Bildspalte 1fr; das Foto bekommt
 * eine flach versetzte Tint-Fläche (box-shadow ohne Blur — Siemens-
 * flach, keine Weichzeichner-Schatten) plus Haarlinie. Das padding
 * rechts/unten reserviert den Platz der versetzten Fläche, damit sie
 * bündig mit der Boxed-Kante abschließt statt überzustehen.
 * ============================================================ */
.lex-split--intro .lex-split__grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: 5rem;
}
.lex-bflow__intro {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: 5rem;
}
.lex-split--intro .lex-split__media {
    aspect-ratio: auto;
    overflow: visible;
}
.lex-split--intro .lex-split__media,
.lex-prose .lex-bflow__media {
    padding: 0 1.25rem 1.25rem 0;
}
.lex-split--intro .lex-split__media img,
.lex-prose .lex-bflow__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border: 1px solid var(--lex-line);
    box-shadow: 1.25rem 1.25rem 0 0 var(--lex-tint);
}
/* Caption muss die 1.25rem tiefe Offset-Fläche unter dem Bild freihalten */
.lex-bflow__media figcaption {
    margin-top: 2rem;
    font-size: 0.9375rem;
    color: var(--lex-gray-600);
}
@media (max-width: 900px) {
    .lex-split--intro .lex-split__grid,
    .lex-bflow__intro {
        grid-template-columns: 1fr;
    }
    .lex-split--intro .lex-split__media,
    .lex-prose .lex-bflow__media {
        max-width: 28rem;
    }
}

/* ==========================================================================
   RESPONSIVE-FEINSCHLIFF HEADER – 2026-07 (v2.9.5)

   Vier Korrekturen aus dem Responsive-Review:
   1) Topbar bricht nie mehr in zwei Zeilen – Inhalte fallen stattdessen
      gestaffelt weg (Standort → E-Mail → Öffnungszeiten).
   2) Breadcrumbs bekommen mehr Luft zur Navigation.
   3) KI-Hinweis war mit 14px/70 % Weiß zu kontrastschwach.
   4) Desktop-Navigation bleibt bis 900px sichtbar und skaliert mit,
      statt bei 1024px in den Hamburger zu klappen.
   ========================================================================== */

/* ---------- 1) Topbar: strikt einzeilig ---------- */
.lex-topbar__inner {
    flex-wrap: nowrap;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    min-width: 0;
}
.lex-topbar ul {
    flex-wrap: nowrap;
    gap: clamp(0.85rem, 1.8vw, 1.75rem);
    min-width: 0;
}
.lex-topbar li,
.lex-topbar__link,
.lex-topbar li > span {
    white-space: nowrap;
}

/* Gestaffeltes Ausblenden: was nicht mehr passt, fliegt raus statt umzubrechen.
   Reihenfolge nach Wichtigkeit – Zertifikat und Telefon bleiben am längsten. */
@media (max-width: 1400px) {
    /* Standort – steht ohnehin im Footer und auf /kontakt/ */
    .lex-topbar__left li:nth-child(2) { display: none; }
}
@media (max-width: 1150px) {
    /* E-Mail – die Floatbar rechts bietet denselben Kontaktweg */
    .lex-topbar__right li:nth-child(3) { display: none; }
}
@media (max-width: 1000px) {
    /* Öffnungszeiten – übrig bleiben Zertifikat + Telefon */
    .lex-topbar__left li:nth-child(1) { display: none; }
    .lex-topbar { font-size: 0.875rem; }
}

/* ---------- 2) Breadcrumbs: Abstand zur Navigation ---------- */
body.lex-header-transparent .lex-page-breadcrumbs {
    padding-top: 118px;
}
@media (min-width: 901px) {
    body.lex-header-transparent .lex-page-breadcrumbs,
    body.lex-header-transparent .lex-page-header--media .lex-page-breadcrumbs {
        padding-top: 152px;
    }
}

/* ---------- 3) KI-Hinweis lesbar ---------- */
.lex-header__ai-link,
.home .lex-header__ai-link {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.92);
}
.lex-header__ai-link-icon { opacity: 0.9; }

/* ---------- 4) Navigation bleibt bis 900px vollständig sichtbar ---------- */
/* 1024–1180px: bereits kompakt (siehe Abschnitt „Responsive Fixes 2026-05").
   900–1023px: zweite Verkleinerungsstufe, damit alle Menüpunkte in eine
   Zeile passen, ohne den Hamburger zu brauchen. */
@media (min-width: 900px) and (max-width: 1023.98px) {
    .lex-header__inner,
    .home .lex-header__inner {
        gap: 0.75rem;
        padding-inline: 0.85rem;
        height: 68px;
    }
    .lex-header.is-scrolled .lex-header__inner,
    .home .lex-header.is-scrolled .lex-header__inner { height: 60px; }

    .lex-header__logo img { height: 30px; }

    .lex-nav__list { gap: 0.5rem; }
    .lex-nav__list a,
    .lex-nav__link {
        font-size: 0.875rem;
        padding: 0.35rem 0.1rem;
    }
    .lex-nav__chevron { width: 12px; height: 12px; }

    .lex-header__cta {
        padding: 0.45rem 0.65rem !important;
        font-size: 0.78rem !important;
    }
    /* KI-Hinweis: nur noch das Icon (Text ist ab 1100px ohnehin ausgeblendet) */
    .lex-header__ai-link { margin-left: 0.35rem; }
}

/* Mega-Panel folgt der schmaleren Navigation: kleinere Bilder statt Abschneiden */
@media (max-width: 1023.98px) {
    .lex-nav__mega-inner {
        padding: 1rem 1.1rem 1.25rem;
        max-height: calc(100vh - 5.5rem);
    }
    .lex-nav__mega-media { aspect-ratio: 5 / 2; margin-bottom: 0.5rem; }
    .lex-nav__mega-grid { gap: 0.85rem 1rem; }
    .lex-nav__mega-title { font-size: 0.95rem; }
    .lex-nav__mega-head { padding-bottom: 0.6rem; margin-bottom: 0.9rem; }
    .lex-nav__mega-all { font-size: 0.85rem; }
}

/* ============================================================
 * 32) TOUCH-TARGETS, FOOTER & FORMULAR AUF TABLET/SMARTPHONE (v2.9.6)
 * ------------------------------------------------------------
 * Messung 21.07.2026 (Playwright, iPhone-/iPad-Emulation) auf allen
 * 24 Seiten. Drei Befundgruppen:
 *
 * a) Tap-Targets unter dem WCAG-2.2-AA-Minimum (2.5.8, 24x24 CSS-px):
 *    Footer-Sitemap-Links 22px hoch, Zertifikats-Download 22px,
 *    Cookie-Button 26px, Consent-Checkbox 18x18.
 * b) Schriftgrößen im Footer zwischen 12,8 und 15,2px — auf dem
 *    Smartphone deutlich zu klein (Projektregel: 18px Fließtext;
 *    für Footer-Navigation und Kleingedrucktes setzen wir 16px als
 *    mobiles Minimum an, 18px würde den Footer sprengen).
 * c) Der untere Footer-Block klappte schon ab 900px einspaltig um und
 *    ließ auf Tablets (768/820px) die rechte Hälfte komplett leer.
 *
 * Bewusst NICHT angefasst: Header, Topbar, Navigation, Breadcrumbs und
 * Branchen-Intro — die liegen bei der parallelen Header-Überarbeitung
 * (v2.9.4/v2.9.5) und würden sich sonst gegenseitig überschreiben.
 * ============================================================ */

/* --- 32.1) Footer behält auf Tablets seine zwei Spalten.
   Der Umbruch auf eine Spalte ergibt erst auf dem Smartphone Sinn. */
@media (min-width: 601px) and (max-width: 900px) {
    .lex-footer__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        column-gap: 2.5rem;
    }
    .lex-footer__col--brand  { grid-column: 1; grid-row: 1; }
    .lex-footer__col--hours  { grid-column: 1; grid-row: 2; }
    .lex-footer__col--awards { grid-column: 2; grid-row: 1 / span 2; }
}

/* --- 32.2) Footer-Typografie und Tap-Targets bis einschließlich Tablet.
   Der Zeilenabstand trägt die Trefferfläche: Padding statt gap, damit
   die Links flächig und nicht nur auf der Textzeile treffbar sind. */
@media (max-width: 1024px) {
    .lex-footer__group-list {
        gap: 0;
    }
    .lex-footer__group-list li a {
        display: block;
        padding: 0.7rem 0;
        font-size: 1rem;
        line-height: 1.4;
    }
    .lex-footer__group-heading {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }
    .lex-footer__contact,
    .lex-footer__contact a,
    .lex-footer__hours,
    .lex-footer__copy,
    .lex-footer__legal-nav a,
    .lex-footer__cookie-settings {
        font-size: 1rem;
    }
    .lex-footer__cert-meta {
        font-size: 0.875rem;
    }
    /* Telefon, Fax, E-Mail sind auf dem Smartphone die wichtigsten Links
       im Footer — sie brauchen eine echte Trefferfläche. */
    .lex-footer__contact a {
        display: inline-block;
        padding: 0.35rem 0;
    }
    .lex-footer__cert-download,
    .lex-footer__cookie-settings,
    .lex-footer__legal-nav a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        font-size: 1rem;
    }
    .lex-footer__cert-download {
        gap: 0.5rem;
    }
}

/* --- 32.3) Zertifikats-Vorschau war auf dem Smartphone 62px breit und
   damit als Dokument nicht mehr erkennbar. */
@media (max-width: 600px) {
    .lex-footer__certs {
        flex-wrap: wrap;
        gap: 1rem;
    }
    .lex-footer__cert-thumb img {
        width: auto;
        height: 132px;
    }
}

/* --- 32.4) Anfrageformular: Consent-Checkbox.
   18x18px verfehlt das WCAG-2.2-AA-Minimum von 24x24 und ist mit dem
   Daumen kaum zu treffen; das Label lief mit line-height 1.0 zusammen.
   Gilt bewusst auf allen Breiten — das ist Barrierefreiheit, nicht
   Responsive-Kosmetik. */
.lex-checkbox {
    align-items: flex-start;
    gap: 0.75rem;
    line-height: 1.5;
}
.lex-checkbox input[type="checkbox"] {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-top: 0.1em;
    accent-color: var(--lex-primary);
}

/* Feld-Labels standen mit line-height 1.0 zu dicht auf dem Eingabefeld. */
.lex-anfrage label {
    line-height: 1.4;
}

/* --- 32.5) Restliche Links unter 44px Trefferfläche. */
@media (max-width: 1024px) {
    .lex-legal__back-link,
    .lex-contact-card__link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* ==========================================================================
   Foto-Teaser-Kacheln (.lex-photo-card) — Leistungen und Branchen
   --------------------------------------------------------------------------
   Kartenbild (_leistung_card_image / _branche_card_image) liegt hinter der Karte,
   ein Verlaufs-Scrim dunkelt nach unten ab, Icon und Text sitzen auf
   Glasflächen in derselben Sprache wie die Hero-USP-Karten (.lex-usp):
   dunkles Marineglas, blaue Kante links, weiße Schrift.
   Ohne Kartenbild bleibt die flache Hairline-Karte aus Abschnitt 7 unverändert.

   Ebenen: Bild (z 0) → Scrim (z 1) → Icon-Chip und Textglas (z 2).
   ========================================================================== */
a.lex-photo-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 30rem;
    padding: 1.25rem;
    background: var(--lex-primary-dark);
    border: 1px solid var(--lex-line);
    border-top: 3px solid var(--lex-primary);
}

/* --- Bildebene + Scrim --------------------------------------------------- */
/* Bildfenster im Seitenverhältnis der Motive (3:2), damit das Werkstück nie
   beschnitten wird — eine formatfüllende Ebene müsste bei schmalen Karten
   extrem hineinzoomen und zeigt dann nur noch Hintergrund. Der Versatz nach
   oben rückt das mittig aufgebaute Motiv in den freien Bereich über dem Glas;
   die Unterkante des Fotos läuft hinter die Glasfläche.
   height:0 + padding-bottom statt aspect-ratio: funktioniert auch in
   älteren Browsern identisch. */
.lex-photo-card__media {
    position: absolute;
    top: -2rem;
    right: 0;
    left: 0;
    height: 0;
    padding-bottom: 66.667%;
    z-index: 0;
    overflow: hidden;
}
.lex-photo-card__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}
/* Scrim sitzt auf der Karte (nicht in der versetzten Bildebene): oben fast
   klar, damit das Werkstück leuchtet — unten kräftig, damit hinter dem Glas
   ein verlässlich dunkler Grund liegt und die weiße Schrift auch über
   polierten, hellen Bauteilen sicher über 4,5:1 bleibt. */
a.lex-photo-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(20, 48, 77, 0.04) 0%,
        rgba(20, 48, 77, 0.14) 34%,
        rgba(20, 48, 77, 0.58) 58%,
        rgba(20, 48, 77, 0.80) 100%);
}
a.lex-photo-card:hover .lex-photo-card__media img,
a.lex-photo-card:focus-visible .lex-photo-card__media img {
    transform: scale(1.07);
}

/* --- Icon-Kachel: identisch zu .lex-usp__icon im Hero -------------------- */
.lex-photo-card__chip {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 0;
    background: rgba(27, 95, 170, 0.55);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 30px -12px rgba(6, 18, 36, 0.55);
}
.lex-leistung-card--visual .lex-leistung-card__icon {
    background: none !important;
    padding: 0 !important;
    margin-bottom: 0;
    color: #ffffff;
}

/* --- Textfläche: Milchglas ----------------------------------------------
   Die Kurztexte sind unterschiedlich lang, die Glasflächen sollen trotzdem in
   allen Kacheln exakt gleich groß sein. Statt gepflegter Mindesthöhen je
   Breakpoint (die bei jeder Textänderung neu vermessen werden müssten) füllt
   das Glas die Resthöhe der Kachel: margin-top gibt die Bildfläche darüber
   fest vor, flex:1 nimmt alles Übrige. Da das Raster alle Kacheln einer Reihe
   auf dieselbe Höhe zieht, sind damit auch alle Glasflächen gleich hoch —
   unabhängig von Textlänge und Viewport. */
.lex-photo-card__glass {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin-top: 4.5rem;
    padding: 1.125rem 1.25rem 1.125rem 1.125rem;
    background: rgba(11, 30, 52, 0.50);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-left: 3px solid var(--lex-primary-light);
    box-shadow: 0 8px 30px -12px rgba(6, 18, 36, 0.55);
    transition: background 0.2s ease, border-color 0.2s ease;
}
/* Ohne backdrop-filter (ältere Browser) deckt die Fläche stärker ab. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .lex-photo-card__glass { background: rgba(11, 30, 52, 0.82); }
    .lex-photo-card__chip  { background: rgba(27, 95, 170, 0.80); }
}
@media (hover: hover) {
    a.lex-photo-card:hover .lex-photo-card__glass,
    a.lex-photo-card:focus-visible .lex-photo-card__glass {
        background: rgba(11, 30, 52, 0.58);
        border-color: rgba(255, 255, 255, 0.30);
        border-left-color: var(--lex-primary-light);
    }
}

/* Schrift auf dem Marineglas: Weiß wie in den Hero-Karten (≈ 12:1). */
.lex-photo-card__glass .lex-digital__card-title {
    color: var(--lex-white);
    margin: 0 0 0.45rem;
}
.lex-photo-card__glass .lex-digital__card-text {
    color: rgba(255, 255, 255, 0.88);
}
.lex-leistung-card--visual .lex-leistung-card__more {
    margin-top: auto;
    padding-top: 1rem;
    color: var(--lex-white);
}
a.lex-photo-card:hover .lex-leistung-card__more {
    color: var(--lex-primary-light);
}

/* Transparenz-Reduktion respektieren (wie bei .lex-usp). */
@media (prefers-reduced-transparency: reduce) {
    .lex-photo-card__glass,
    .lex-photo-card__chip {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .lex-photo-card__glass { background: rgba(11, 30, 52, 0.90); }
    .lex-photo-card__chip  { background: rgba(27, 95, 170, 0.85); }
}

/* Fokusring muss auch über dem Foto sitzen. */
a.lex-photo-card:focus-visible {
    outline: 3px solid var(--lex-primary);
    outline-offset: 3px;
}

/* Schmalere Karten = mehr Textzeilen: Mindesthöhe des Glases mitziehen,
   sonst wachsen einzelne Flächen aus der gemeinsamen Höhe heraus. */

/* backdrop-filter ist auf Mobilgeräten teuer → höhere Deckung statt Blur
   (identisch zur Regel für .lex-usp). */
@media (max-width: 980px) {
    .lex-photo-card__glass {
        background: rgba(11, 30, 52, 0.78);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .lex-photo-card__chip {
        background: rgba(27, 95, 170, 0.78);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (max-width: 600px) {
    .lex-photo-card__glass { margin-top: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .lex-photo-card__media img,
    .lex-photo-card__glass { transition: none; }
    a.lex-photo-card:hover .lex-photo-card__media img,
    a.lex-photo-card:focus-visible .lex-photo-card__media img { transform: scale(1.02); }
}

/* --- 32.6) Die Footer-Rubriken sind selbst verlinkt ("Unternehmen",
   "Leistungen", "Branchen"), der Link war aber nur 17px hoch — als
   eigenständiger Block-Link ohne Fließtext-Kontext ein echter Verstoß
   gegen WCAG 2.2 AA 2.5.8. Padding schafft die 44px-Fläche, das
   negative Top-Margin hält die Überschrift optisch an ihrem Platz. */
@media (max-width: 1024px) {
    .lex-footer__group-heading {
        margin-bottom: 0;
    }
    .lex-footer__group-heading a {
        display: block;
        padding: 0.85rem 0;
        margin-top: -0.85rem;
    }
}

/* --- 32.7) Zwei Nachbesserungen aus der visuellen Endkontrolle.
   a) Die Vergrößerung der Zertifikats-Vorschau (32.3) lief gegen das
      bestehende max-height: 5.5rem — max-height schlägt height.
   b) Im zweispaltigen Tablet-Footer spannt die Zertifikats-Spalte über
      beide Zeilen. Deren Höhe wurde auf die Zeilen verteilt, wodurch
      zwischen Adressblock und "Erreichbarkeit" ~85px Leerraum klafften.
      max-content für Zeile 1 bindet die Höhe an den Inhalt, 1fr in
      Zeile 2 schluckt den Rest. */
@media (max-width: 600px) {
    .lex-footer__cert-thumb img {
        max-height: 132px;
    }
}
@media (min-width: 601px) and (max-width: 900px) {
    .lex-footer__grid {
        grid-template-rows: max-content 1fr;
    }
    .lex-footer__col--hours {
        align-self: start;
    }
}

/* --- 32.8) Das Zertifikats-Siegel im Footer lief mit 11,5px/14,7px
   deutlich unter jede lesbare Größe. Auf Smartphone/Tablet hochgesetzt;
   der Siegel-Block darf dafür umbrechen (siehe 32.3). */
@media (max-width: 1024px) {
    .lex-footer__cert-seal-line1 {
        font-size: 0.875rem;
    }
    .lex-footer__cert-seal-line2 {
        font-size: 1rem;
    }
}

/* --------------------------------------------------------------------------
   Branchen-Kacheln als Foto-Kacheln (.lex-branche-card--visual)
   Erben die komplette Optik von .lex-photo-card; hier stehen nur die
   Abweichungen: Schriftfarben auf dem Glas, die runde Bildmarke statt
   Glas-Chip und eigene Glashöhen (die Kartentexte sind länger als bei
   den Leistungen und das Raster hat 8 statt 5 Kacheln).
   -------------------------------------------------------------------------- */
.lex-photo-card__glass .lex-branche-card__title {
    color: var(--lex-white);
    margin: 0 0 0.45rem;
}
.lex-photo-card__glass .lex-branche-card__excerpt {
    color: rgba(255, 255, 255, 0.88);
    flex: 0 0 auto;
    margin: 0;
}
.lex-photo-card__glass .lex-branche-card__link,
.lex-branche-card--visual .lex-photo-card__glass a.lex-branche-card__link {
    color: var(--lex-white) !important;
    margin-top: auto;
    padding-top: 1rem;
    text-decoration: none;
}
a.lex-photo-card:hover .lex-branche-card__link {
    color: var(--lex-primary-light) !important;
    text-decoration: none;
}

/* Bildmarke: trägt ihren Kontrast selbst (blauer Kreis, weißes Glyph),
   deshalb kein Glas-Chip darunter — nur ein heller Ring, damit sie auch
   auf hellen Motiven (Reinraum, OP-Saal) sauber freisteht. */
.lex-branche-card--visual .lex-branche-card__icon {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 0 auto;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 6px 20px rgba(6, 18, 36, 0.45);
}

/* Branchen-Kacheln sind etwas höher: die Kartentexte reichen bis 165 Zeichen
   (Medizintechnik), und das Raster bricht früher um (900/600 statt 1100/600).
   Größere Bildfläche als bei den Leistungen, weil hier Szenen statt
   freigestellter Bauteile stehen — die brauchen mehr Ausschnitt. */
a.lex-photo-card.lex-branche-card--visual { min-height: 33rem; }
.lex-branche-card--visual .lex-photo-card__glass { margin-top: 7rem; }

@media (max-width: 600px) {
    .lex-branche-card--visual .lex-photo-card__glass { margin-top: 5.5rem; }
}

/* Beide Leistungs-Reihen auf dieselbe Höhe ziehen — sonst wären die
   Glasflächen zwar je Reihe gleich, aber Reihe 1 und 2 unterschiedlich. */
.lex-digital__grid:has(.lex-photo-card) { grid-auto-rows: 1fr; }

/* ==========================================================================
   Foto-Sektion (.lex-photo-section)
   --------------------------------------------------------------------------
   Aktuell: „Worauf es in dieser Branche ankommt." auf den Branchenseiten.
   Das Einsatzbild der Branche (dieselbe Meta wie die Startseiten-Kachel)
   liegt vollflächig hinter der Sektion, Kopf und Anforderungs-Boxen stehen
   in derselben Glassprache wie die Hero-USP-Karten darauf.
   Anders als bei den Kacheln darf hier object-fit:cover die volle Fläche
   nehmen — die Sektion ist breit, es entsteht also kein starker Zoom.
   ========================================================================== */
.lex-section.lex-photo-section {
    position: relative;
    isolation: isolate;
    background: var(--lex-primary-dark);
    overflow: hidden;
}
.lex-photo-section__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.lex-photo-section__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Scrim: kräftig genug, dass weiße Schrift auch über hellen Motiven
   (Reinraum, OP-Leuchte) sicher über 4,5:1 bleibt. */
.lex-photo-section__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(20, 48, 77, 0.72) 0%,
        rgba(20, 48, 77, 0.82) 55%,
        rgba(20, 48, 77, 0.88) 100%);
}
.lex-photo-section > .lex-container {
    position: relative;
    z-index: 1;
}

/* Sektionskopf auf dem Foto */
.lex-photo-section .lex-section__header h2 { color: var(--lex-white); }
.lex-photo-section .lex-section__header p { color: rgba(255, 255, 255, 0.88); }
.lex-photo-section .lex-section__eyebrow { color: rgba(255, 255, 255, 0.72); }

/* Anforderungs-Boxen als Glaskarten (gleiche Sprache wie .lex-usp) */
.lex-photo-section .lex-check-grid__item {
    background: rgba(11, 30, 52, 0.50);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-left: 3px solid var(--lex-primary-light);
    box-shadow: 0 8px 30px -12px rgba(6, 18, 36, 0.55);
    color: var(--lex-white);
}
.lex-photo-section .lex-check-grid__item svg,
.lex-photo-section .lex-check-grid__item--pain svg {
    color: var(--lex-primary-light);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .lex-photo-section .lex-check-grid__item { background: rgba(11, 30, 52, 0.82); }
}
/* backdrop-filter ist auf Mobilgeräten teuer → höhere Deckung statt Blur. */
@media (max-width: 980px) {
    .lex-photo-section .lex-check-grid__item {
        background: rgba(11, 30, 52, 0.78);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
@media (prefers-reduced-transparency: reduce) {
    .lex-photo-section .lex-check-grid__item {
        background: rgba(11, 30, 52, 0.90);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ==========================================================================
   ==========================================================================
   HELL-SCHICHT (08/2026) — v3.0.0
   --------------------------------------------------------------------------
   Komplett-Umstellung auf helle Erscheinung (Kundenwunsch 21.08.2026):
   Marine bleibt Text-/Akzentfarbe, ist aber keine Flächenfarbe mehr.
   Große dunkle Flächen (Header, Topbar, Megamenü, Mobile-Menü, Seitenköpfe,
   Hero, CTA-/History-Band, Foto-Sektionen, Footer) werden hell.
   Neue Regeln zu diesem Redesign IMMER hier anhängen (Schichten-Prinzip).
   ========================================================================== */

/* ---------- H1. Header: Weiß, Hairline, dunkle Navigation ---------- */
.lex-header,
.lex-header.is-scrolled,
.home .lex-header.is-scrolled {
    background: var(--lex-white) !important;
    border-bottom: 1px solid var(--lex-line) !important;
    box-shadow: none;
}
.lex-nav__link,
.lex-header .lex-nav__link { color: var(--lex-gray-800); }
.lex-nav__link:hover,
.lex-nav__link:focus-visible,
.current_page_item > .lex-nav__link,
.current-menu-item > .lex-nav__link,
.current-menu-ancestor > .lex-nav__link { color: var(--lex-primary); }
.lex-header__ai-link,
.home .lex-header__ai-link { color: var(--lex-gray-600); }
.lex-header__ai-link:hover,
.lex-header__ai-link:focus-visible,
.home .lex-header__ai-link:hover,
.home .lex-header__ai-link:focus-visible { color: var(--lex-primary); background: rgba(27, 95, 170, 0.06); }
.lex-hamburger span,
.home .lex-hamburger span,
.home .lex-header.is-scrolled .lex-hamburger span { background: var(--lex-primary-dark) !important; }
.lex-hamburger:hover { background: var(--lex-gray-100); }

/* Topbar: helles Grau-Blau, dunkler Text */
.lex-topbar {
    background: var(--lex-gray-50);
    color: var(--lex-gray-600);
    border-bottom: 1px solid var(--lex-line);
}
.lex-topbar__link { color: var(--lex-gray-800); }
.lex-topbar__link:hover,
.lex-topbar__link:focus-visible { color: var(--lex-primary); }
body.lex-header-transparent .lex-topbar {
    background: var(--lex-gray-50);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: var(--lex-line);
}

/* Overlay-Header: auch auf Hero-Seiten solide weiß (Siemens: opak & flach) */
body.lex-header-transparent .lex-header {
    background: var(--lex-white) !important;
    border-bottom-color: var(--lex-line) !important;
}
body.lex-header-transparent .lex-header.is-scrolled {
    background: var(--lex-white) !important;
    border-bottom-color: var(--lex-line) !important;
    box-shadow: 0 6px 24px rgba(20, 48, 77, 0.08);
}

/* Dropdown (klassisch): Weiß, Hairline, blaue Akzentkante */
.lex-nav__dropdown {
    background: var(--lex-white);
    border: 1px solid var(--lex-line);
    border-top: 2px solid var(--lex-primary);
    box-shadow: 0 16px 40px rgba(20, 48, 77, 0.14);
}
.lex-nav__dropdown a { color: var(--lex-gray-800); }
.lex-nav__dropdown a:hover { color: var(--lex-primary); background: var(--lex-gray-50); }

/* Megamenü: weißes Panel */
.lex-nav__dropdown--mega {
    background: var(--lex-white);
    border: 1px solid var(--lex-line);
    border-top: 2px solid var(--lex-primary);
    box-shadow: 0 32px 80px rgba(20, 48, 77, 0.18);
}
.lex-nav__mega-head { border-bottom-color: var(--lex-line); }
.lex-nav__mega-eyebrow { color: var(--lex-primary); }
.lex-nav__mega-all { color: var(--lex-gray-600); }
.lex-nav__mega-all:hover,
.lex-nav__mega-all:focus-visible { color: var(--lex-primary); }
.lex-nav__mega-media { background: var(--lex-gray-100); }
.lex-nav__mega-media::after {
    background: linear-gradient(180deg, rgba(20, 48, 77, 0) 60%, rgba(20, 48, 77, 0.18) 100%);
}
.lex-nav__mega-copy::before { background: var(--lex-gray-200); }
.lex-nav__mega-copy::after { background: var(--lex-primary); }
.lex-nav__mega-title { color: var(--lex-primary-dark); }
.lex-nav__mega-desc { color: var(--lex-gray-600); }
.lex-nav__mega-link:hover .lex-nav__mega-title,
.lex-nav__mega-link:focus-visible .lex-nav__mega-title { color: var(--lex-primary); }

/* Mobile-Menü: weißes Panel */
.lex-mobile-menu { background: var(--lex-white); }
.lex-mobile-menu__close {
    border: 1px solid var(--lex-line);
    color: var(--lex-primary-dark);
}
.lex-mobile-menu__close:hover { background: var(--lex-gray-100); }
.lex-mobile-nav__list > li { border-bottom: 1px solid var(--lex-line); }
.lex-mobile-nav__list a { color: var(--lex-gray-800); }
.lex-mobile-nav__list a:hover { color: var(--lex-primary); }
.lex-mobile-nav__list ul a,
.lex-mobile-nav__list .sub-menu a { color: var(--lex-gray-600); }
.lex-mobile-nav__list .sub-menu { border-left: 2px solid var(--lex-line); }

/* ---------- H2. Breadcrumbs: hell auf allen Seiten ---------- */
body.lex-header-transparent .lex-page-breadcrumbs { background: var(--lex-gray-50); }
body.lex-header-transparent .lex-page-header--media .lex-page-breadcrumbs { background: transparent; }
body.lex-header-transparent .lex-page-breadcrumbs__link { color: var(--lex-gray-600); }
body.lex-header-transparent .lex-page-breadcrumbs__link:hover { color: var(--lex-primary); }
body.lex-header-transparent .lex-page-breadcrumbs__separator { color: var(--lex-gray-400); }
body.lex-header-transparent .lex-page-breadcrumbs__current { color: var(--lex-gray-800); }

/* ---------- H3. Seitenköpfe (Unterseiten): heller Schleier statt Marine ---------- */
.lex-page-header {
    background: var(--lex-gray-50);
    color: var(--lex-primary-dark);
    border-bottom: 1px solid var(--lex-line);
}
.lex-page-header .lex-section__eyebrow { color: var(--lex-primary); }
.lex-page-header--media {
    background: var(--lex-gray-50);
    border-bottom: none;
}
/* Heller Schleier: links kräftig für die Textzone, unten Verlauf in die Seite */
.lex-page-header__scrim {
    background:
        linear-gradient(101deg,
            rgba(244, 246, 249, 0.95) 0%,
            rgba(244, 246, 249, 0.88) 26%,
            rgba(244, 246, 249, 0.55) 60%,
            rgba(244, 246, 249, 0.18) 100%),
        linear-gradient(0deg,
            rgba(244, 246, 249, 0.92) 0%,
            rgba(244, 246, 249, 0.22) 42%,
            rgba(244, 246, 249, 0.00) 70%);
}
.lex-page-header--photo .lex-page-header__scrim {
    background:
        linear-gradient(101deg,
            rgba(244, 246, 249, 0.96) 0%,
            rgba(244, 246, 249, 0.90) 30%,
            rgba(244, 246, 249, 0.62) 62%,
            rgba(244, 246, 249, 0.35) 100%),
        linear-gradient(0deg,
            rgba(244, 246, 249, 0.92) 0%,
            rgba(244, 246, 249, 0.30) 45%,
            rgba(244, 246, 249, 0.05) 75%);
}
/* Punktraster: blau statt weiß */
.lex-page-header__grid {
    background-image: radial-gradient(circle, rgba(27, 95, 170, 0.30) 1.1px, transparent 1.1px);
    opacity: 0.5;
}
.lex-page-header--media .lex-page-header__title,
.lex-page-header--media .lex-page-header__subtitle,
.lex-page-header--media .lex-page-header__lead { text-shadow: none; }
.lex-page-header--media .lex-page-header__title { color: var(--lex-primary-dark); }
.lex-page-header--media .lex-page-header__subtitle,
.lex-page-header--media .lex-page-header__lead { color: var(--lex-gray-800); }
.lex-page-header--media .lex-section__eyebrow { color: var(--lex-primary); }
.lex-page-header__title,
.lex-page-header h1 { color: var(--lex-primary-dark); }
.lex-page-header__subtitle,
.lex-page-header__lead,
.lex-page-header p { color: var(--lex-gray-800); }
/* Branchen-Icon: helle Glasfläche */
.lex-page-header--media .lex-branche-hero__icon img {
    background: rgba(27, 95, 170, 0.85);
    border: 1px solid var(--lex-line);
}

/* ---------- H4. Startseiten-Hero: heller Schleier, dunkler Text ---------- */
.lex-hero { color: var(--lex-gray-800); }
.lex-hero__overlay {
    background: linear-gradient(
        90deg,
        rgba(244, 246, 249, 0.95) 0%,
        rgba(244, 246, 249, 0.72) 55%,
        rgba(244, 246, 249, 0.30) 100%);
}
/* Video/Bild zusätzlich aufhellen (dunkler CGI-Loop) */
.lex-hero__bg img,
.lex-hero__video { filter: brightness(1.45) saturate(0.9); }
.lex-hero__eyebrow { color: var(--lex-primary); }
.lex-hero__claim { color: var(--lex-primary-dark); }
.lex-hero__sub { color: var(--lex-gray-800); }
.lex-rotator { color: var(--lex-primary); }
.lex-hero__badge {
    background: var(--lex-white);
    border: 1px solid var(--lex-line);
    color: var(--lex-primary-dark);
    backdrop-filter: none;
}
.lex-hero__badge:hover,
.lex-hero__badge:focus-visible {
    background: var(--lex-gray-50);
    border-color: var(--lex-primary);
    color: var(--lex-primary-dark);
}
.lex-hero__badge-icon { color: var(--lex-primary); }
/* Outline-Buttons auf hellen Flächen: dunkle Kontur */
.lex-btn--outline-light {
    background: transparent;
    color: var(--lex-primary-dark);
    border-color: var(--lex-primary-dark);
}
.lex-btn--outline-light:hover {
    background: var(--lex-primary-dark);
    border-color: var(--lex-primary-dark);
    color: var(--lex-white);
}
/* Hero-USP-Karten: weißes Glas, dunkler Text */
.lex-hero .lex-usp,
.lex-usp {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--lex-line);
    border-left: 3px solid var(--lex-primary);
    color: var(--lex-primary-dark);
}
.lex-usp__title { color: var(--lex-primary-dark); }
.lex-usp__text { color: var(--lex-gray-600); }
@media (max-width: 980px) {
    .lex-usp,
    .lex-hero .lex-usp { background: rgba(255, 255, 255, 0.92); }
}
@media (prefers-reduced-transparency: reduce) {
    .lex-usp,
    .lex-hero .lex-usp { background: rgba(255, 255, 255, 0.96); }
}

/* ---------- H5. Bänder: Tint/Hellgrau statt Marine ---------- */
.lex-cta-banner {
    background: var(--lex-tint);
    border-top: 1px solid var(--lex-line);
    border-bottom: 1px solid var(--lex-line);
}
.lex-cta-banner__text h2 { color: var(--lex-primary-dark); }
.lex-cta-banner__text p { color: var(--lex-gray-800); }

.lex-history-band {
    background: var(--lex-gray-50);
    border-top: 1px solid var(--lex-line);
    border-bottom: 1px solid var(--lex-line);
}
.lex-history-band .lex-section__eyebrow { color: var(--lex-secondary); }
.lex-history-band .lex-section__header h2 { color: var(--lex-primary-dark); }
.lex-history-band .lex-section__header p { color: var(--lex-gray-600); }
.lex-history-band__stat { border-left: 2px solid var(--lex-primary); }
.lex-history-band__value { color: var(--lex-primary-dark); }
.lex-history-band__label { color: var(--lex-gray-600); }

.lex-facts-box--cta {
    background: var(--lex-tint);
    border-color: var(--lex-line);
    color: var(--lex-gray-800);
}
.lex-facts-box--cta .lex-facts-box__title { color: var(--lex-primary-dark); }
.lex-facts-box--cta p { color: var(--lex-gray-800); }

.lex-news-overview__column-header {
    background: var(--lex-gray-50);
    border-left: 6px solid var(--lex-primary);
    color: var(--lex-primary-dark);
}
.lex-news-overview__column-subline { color: var(--lex-gray-600); }

/* Produkt-/News-Karten: helles Glas statt Marineglas */
.lex-news-card__content {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.72) 100%);
    box-shadow: 0 16px 36px rgba(20, 48, 77, 0.12);
}
.lex-news-card__title { color: var(--lex-primary-dark) !important; text-shadow: none; }
.lex-news-card__sub { color: var(--lex-gray-800) !important; text-shadow: none; }

/* ---------- H6. Foto-Sektion (Branchen): heller Schleier, helle Glaskarten ---------- */
.lex-section.lex-photo-section { background: var(--lex-gray-50); }
.lex-photo-section__media::after {
    background: linear-gradient(180deg,
        rgba(244, 246, 249, 0.82) 0%,
        rgba(244, 246, 249, 0.88) 55%,
        rgba(244, 246, 249, 0.92) 100%);
}
.lex-photo-section .lex-section__header h2 { color: var(--lex-primary-dark); }
.lex-photo-section .lex-section__header p { color: var(--lex-gray-800); }
.lex-photo-section .lex-section__eyebrow { color: var(--lex-primary); }
.lex-photo-section .lex-check-grid__item {
    background: rgba(255, 255, 255, 0.80);
    border: 1px solid var(--lex-line);
    border-left: 3px solid var(--lex-primary);
    box-shadow: 0 8px 30px -12px rgba(20, 48, 77, 0.18);
    color: var(--lex-gray-800);
}
.lex-photo-section .lex-check-grid__item svg,
.lex-photo-section .lex-check-grid__item--pain svg { color: var(--lex-primary); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .lex-photo-section .lex-check-grid__item { background: rgba(255, 255, 255, 0.94); }
}
@media (max-width: 980px) {
    .lex-photo-section .lex-check-grid__item { background: rgba(255, 255, 255, 0.94); }
}
@media (prefers-reduced-transparency: reduce) {
    .lex-photo-section .lex-check-grid__item { background: rgba(255, 255, 255, 0.96); }
}

/* ---------- H7. Foto-Teaser-Kacheln: helle Karte, helles Textglas ---------- */
a.lex-photo-card {
    background: var(--lex-gray-100);
    border: 1px solid var(--lex-line);
    border-top: 3px solid var(--lex-primary);
}
a.lex-photo-card::before {
    background: linear-gradient(180deg,
        rgba(244, 246, 249, 0.00) 0%,
        rgba(244, 246, 249, 0.06) 34%,
        rgba(244, 246, 249, 0.55) 58%,
        rgba(244, 246, 249, 0.85) 100%);
}
.lex-photo-card__glass {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--lex-line);
    border-left: 3px solid var(--lex-primary);
    box-shadow: 0 8px 30px -12px rgba(20, 48, 77, 0.18);
}
@media (hover: hover) {
    a.lex-photo-card:hover .lex-photo-card__glass,
    a.lex-photo-card:focus-visible .lex-photo-card__glass {
        background: rgba(255, 255, 255, 0.92);
        border-color: var(--lex-primary);
        border-left-color: var(--lex-primary);
    }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .lex-photo-card__glass { background: rgba(255, 255, 255, 0.94); }
    .lex-photo-card__chip  { background: rgba(27, 95, 170, 0.92); }
}
@media (max-width: 980px) {
    .lex-photo-card__glass { background: rgba(255, 255, 255, 0.94); }
}
@media (prefers-reduced-transparency: reduce) {
    .lex-photo-card__glass { background: rgba(255, 255, 255, 0.96); }
}
.lex-photo-card__glass .lex-digital__card-title { color: var(--lex-primary-dark); }
.lex-photo-card__glass .lex-digital__card-text { color: var(--lex-gray-800); }
.lex-leistung-card--visual .lex-leistung-card__more { color: var(--lex-primary); }
a.lex-photo-card:hover .lex-leistung-card__more { color: var(--lex-cta-dark); }

/* ---------- H8. Footer: Hellgrau, Hairlines, dunkler Text ---------- */
.lex-footer {
    background: var(--lex-gray-50);
    color: var(--lex-gray-600);
    border-top: 1px solid var(--lex-line);
}
.lex-footer a { color: var(--lex-gray-800); }
.lex-footer a:hover { color: var(--lex-primary); }
.lex-footer__heading,
.lex-footer__group-heading,
.lex-footer__group-heading a { color: var(--lex-secondary); }
.lex-footer__address,
.lex-footer__contact,
.lex-footer__hours { color: var(--lex-gray-600); }
.lex-footer__nav a,
.lex-footer__group-list a { color: var(--lex-gray-800); }
.lex-footer__nav a:hover,
.lex-footer__group-list a:hover { color: var(--lex-primary); }
.lex-footer__social a { color: var(--lex-gray-600); }
.lex-footer__social a:hover { color: var(--lex-primary); }
.lex-footer__cert-seal {
    color: var(--lex-primary-dark);
    border-color: var(--lex-line);
    background: var(--lex-white);
}
.lex-footer__cert-seal-icon { color: var(--lex-primary); }
.lex-footer__cert-meta { color: var(--lex-gray-600); }
.lex-footer__cert-download { color: var(--lex-primary); }
.lex-footer__ai-notice {
    border-top: 1px solid var(--lex-line);
    color: var(--lex-gray-600);
}
.lex-footer__ai-notice-heading { color: var(--lex-gray-600); }
.lex-footer__ai-notice-text { color: var(--lex-gray-600); }
.lex-footer__ai-notice-link { color: var(--lex-primary); }
.lex-footer__bottom {
    background: var(--lex-gray-100);
    border-top: 1px solid var(--lex-line);
}
.lex-footer__copy { color: var(--lex-gray-600); }
.lex-footer__legal-nav a { color: var(--lex-gray-800); }
.lex-footer__legal-nav a:hover { color: var(--lex-primary); }
.lex-footer__cookie-settings { color: var(--lex-gray-600); }
.lex-footer__cookie-settings:hover { color: var(--lex-primary); }

/* ---------- H9. Startseite: Nav-Links dunkel (Fix unsichtbare Navigation) ---------- */
.home .lex-nav__list a,
.home .lex-header .lex-nav__list a,
.home .lex-header__a11y svg { color: var(--lex-gray-800); }
.home .lex-nav__list a:hover,
.home .lex-header .lex-nav__list a:hover { color: var(--lex-primary); }
.home .lex-header__a11y { background: var(--lex-gray-100); border: 1px solid var(--lex-line); }
.home .lex-header__a11y:hover { background: var(--lex-primary); color: var(--lex-white); }

/* ---------- H10. CTA-Banner mit Bildhintergrund: heller Schleier statt Deep-Marine ---------- */
.lex-cta-banner--bild::before { background: rgba(244, 246, 249, 0.88); }

/* ---------- H11. Review-Fixes (Design-Review 21.08.2026) ---------- */
/* 1) Footer-Links: alte Weiß-Regeln haben höhere Spezifität — hart übersteuern */
.lex-footer__nav li a,
.lex-footer__col--nav .lex-footer__nav li a,
.lex-footer__group-list li a,
.lex-footer__sitemap .lex-footer__group-list li a { color: var(--lex-gray-800); }
.lex-footer__nav li a:hover,
.lex-footer__col--nav .lex-footer__nav li a:hover,
.lex-footer__group-list li a:hover,
.lex-footer__group-list li a:focus-visible { color: var(--lex-primary); }
.lex-footer__col--hours,
.lex-footer__col--hours .lex-footer__heading { color: var(--lex-secondary); }
.lex-footer__col--hours a { color: var(--lex-gray-800); }
.lex-footer__contact a { color: var(--lex-gray-800); }
.lex-footer__cert-seal {
    border: 1px solid var(--lex-line);
    background: var(--lex-white);
}
.lex-footer__cert-seal:hover,
.lex-footer__cert-seal:focus-visible { border-color: var(--lex-primary); background: var(--lex-gray-50); }
.lex-footer__cert-seal-line1 { color: var(--lex-gray-600); }
.lex-footer__cert-seal-line2 { color: var(--lex-primary-dark); }
.lex-footer__cert-download { color: var(--lex-primary); }
.lex-footer__cert-download:hover,
.lex-footer__cert-download:focus-visible { color: var(--lex-cta-dark); }
.lex-footer__heading { color: var(--lex-secondary); opacity: 1; }
.lex-footer__col--awards .lex-footer__heading { color: var(--lex-secondary); }

/* 2) Mobile: Hero-Text braucht kräftigeren hellen Schleier über dem Bild */
@media (max-width: 760px) {
    .lex-hero__overlay {
        background: linear-gradient(180deg,
            rgba(244, 246, 249, 0.94) 0%,
            rgba(244, 246, 249, 0.86) 55%,
            rgba(244, 246, 249, 0.62) 100%);
    }
}

/* 3) Glaskarten auf Bild-Heroes: höhere Deckkraft + Blur gegen Durchscheinen */
.lex-hero .lex-usp,
.lex-usp {
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* ---------- H12. Kontrast-Audit (21.08.2026): weiße Schrift auf hellen Flächen ----------
   Neutralisiert die alten A11y-Regeln aus der Dunkel-Ära (color:#fff !important,
   Z. ~7768 + ~7901) und alle verbliebenen Weiß-Regeln in aufgehellten Komponenten.
   Komponenten mit eigenem dunklen/blauen Hintergrund (Buttons, Floatbar, Lightbox,
   News-Hero-Gradient, .lex-bf-status, Blau-Bänder) behalten bewusst weiße Schrift. */

/* Footer: !important-Regeln mit gleicher Härte übersteuern */
.lex-footer address,
.lex-footer__col address,
.lex-footer__contact,
.lex-footer__contact a,
.lex-footer__col p,
.lex-footer__col li,
.lex-footer__col a { color: var(--lex-gray-800) !important; }
.lex-footer__address { color: var(--lex-gray-600) !important; }
.lex-footer__hours { color: var(--lex-gray-600) !important; }
.lex-footer__cert-meta { color: var(--lex-gray-600) !important; }
.lex-footer__col a:hover,
.lex-footer__col a:focus-visible,
.lex-footer a:hover { color: var(--lex-primary) !important; }
.lex-footer__cert-download { color: var(--lex-primary) !important; }
.lex-footer__ai-notice,
.lex-footer__ai-notice-text { color: var(--lex-gray-600) !important; }
.lex-footer__ai-notice-heading,
.lex-footer .lex-footer__ai-notice .lex-footer__ai-notice-heading { color: var(--lex-gray-600) !important; }
.lex-footer__ai-notice-link { color: var(--lex-primary) !important; }
.lex-footer__social a { color: var(--lex-gray-600) !important; }
.lex-footer__social a:hover,
.lex-footer__social a:focus-visible { color: var(--lex-primary) !important; }
.lex-footer__company,
.lex-footer__logo-text { color: var(--lex-primary-dark); }
.lex-footer__tagline { color: var(--lex-gray-600); }
.lex-footer__contact-list li,
.lex-footer__contact-list a { color: var(--lex-gray-600); }
.lex-footer__group-heading a:hover,
.lex-footer__group-heading a:focus-visible { color: var(--lex-primary); }

/* Branchen-Foto-Kacheln: Link/Excerpt waren !important-weiß auf hellem Glas */
.lex-photo-card__glass .lex-branche-card__excerpt { color: var(--lex-gray-800); }
.lex-photo-card__glass .lex-branche-card__link,
.lex-branche-card--visual .lex-photo-card__glass a.lex-branche-card__link { color: var(--lex-primary) !important; }

/* Outline-Buttons: in hellen Kontexten dunkle Kontur statt Weiß */
.lex-btn--outline,
.lex-hero .lex-btn--outline,
.lex-cta-banner .lex-btn--outline,
.lex-page-header .lex-btn--outline,
.lex-history-band .lex-btn--outline {
    color: var(--lex-primary-dark);
    border-color: var(--lex-primary-dark);
    background: transparent;
}
.lex-btn--outline:hover,
.lex-btn--outline:focus-visible,
.lex-hero .lex-btn--outline:hover,
.lex-cta-banner .lex-btn--outline:hover,
.lex-page-header .lex-btn--outline:hover,
.lex-history-band .lex-btn--outline:hover {
    background: var(--lex-primary-dark);
    border-color: var(--lex-primary-dark);
    color: var(--lex-white);
}
/* Ausnahme: auf Blau-Bändern (Team-Widget, Anfahrt) bleibt die weiße Kontur */
.lex-team-widget .lex-btn--outline,
.lex-kontakt-anfahrt .lex-btn--outline {
    color: var(--lex-white);
    border-color: rgba(255, 255, 255, 0.7);
    background: transparent;
}
.lex-team-widget .lex-btn--outline:hover,
.lex-kontakt-anfahrt .lex-btn--outline:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--lex-white);
    color: var(--lex-white);
}

/* Mobile-Menü (weißes Panel): Telefon-Outline-Button dunkel */
.lex-mobile-menu .lex-btn--outline {
    color: var(--lex-primary-dark);
    border-color: var(--lex-primary-dark);
}
.lex-mobile-menu .lex-btn--outline:hover,
.lex-mobile-menu .lex-btn--outline:focus-visible {
    background: var(--lex-primary-dark);
    color: var(--lex-white);
}

/* CTA-Banner: Notiz-Zeile war 78 % Weiß auf Tint */
.lex-cta-banner__note { color: var(--lex-gray-600); }

/* Branchen-Seitenkopf: Aufzählungspunkte waren weiß */
.lex-branche-hero__points li { color: var(--lex-gray-800); }
.lex-branche-hero__points li svg { color: var(--lex-primary); }

/* Altlast .lex-hero__usp (Vorgänger der USP-Karten) */
.lex-hero__usp { color: var(--lex-gray-800); }

/* News-/Produkt-Karte: Basisfarbe war Weiß (vererbt an Datum/Meta) */
.lex-news-card { color: var(--lex-gray-800); }

/* Hero-Voices (falls aktiviert): weißes Glas, dunkler Text */
.lex-hero-voices__panel {
    background: rgba(255, 255, 255, 0.88);
    color: var(--lex-primary-dark);
    border: 1px solid var(--lex-line);
}
.lex-hero-voices__quote { color: var(--lex-gray-800); }
.lex-hero-voices__person span { color: var(--lex-gray-600); }
.lex-hero-voices__star { color: rgba(27, 95, 170, 0.25); }
.lex-hero-voices__star.is-filled { color: var(--lex-primary); }

/* Branchen-Kacheln: Titel + Hover-Link waren noch weiß/hellblau auf hellem Glas */
.lex-photo-card__glass .lex-branche-card__title { color: var(--lex-primary-dark); }
a.lex-photo-card:hover .lex-branche-card__link,
a.lex-photo-card:focus-visible .lex-branche-card__link { color: var(--lex-cta-dark) !important; }

/* ---------- H13. Logo: freigestellt + doppelte Größe (Kundenwunsch 21.08.2026) ----------
   Freigestelltes Logo (lex-logo-frei.png / Attachment „LEX Logo freigestellt") ohne
   Kartenrahmen. Höhen exakt 2x der bisherigen Werte (48->96, 40->80). */
.lex-header__logo .custom-logo,
.lex-header__logo img { height: 96px !important; width: auto !important; }
.lex-header.is-scrolled .lex-header__logo .custom-logo,
.lex-header.is-scrolled .lex-header__logo img { height: 80px !important; }
@media (max-width: 600px) {
    .lex-header__logo .custom-logo,
    .lex-header__logo img { height: 80px !important; }
}
.lex-header__logo-img { height: 96px; }
@media (max-width: 900px) {
    .lex-header__logo-img { height: 80px; }
}
/* Footer-Logo im gleichen Zug auf das freigestellte Motiv abgestimmt */
.lex-footer__logo-img { max-height: 96px; }

/* H13-Nachtrag: Header wächst mit dem 2x-Logo (fixe 80/64px-Höhen aufgehoben) */
.lex-header__inner { height: auto; }
.home .lex-header__inner {
    height: auto;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.lex-header.is-scrolled .lex-header__inner,
.home .lex-header.is-scrolled .lex-header__inner {
    height: auto;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
/* Abhängige Offsets: Seitenköpfe/Hero unter dem höheren Overlay-Header */
body.lex-header-transparent .lex-page-breadcrumbs { padding-top: 132px; }
@media (min-width: 901px) {
    body.lex-header-transparent .lex-page-breadcrumbs { padding-top: 172px; }
    body.lex-header-transparent .lex-page-header--media .lex-page-breadcrumbs { padding-top: 172px; }
    .home .lex-hero .lex-container { padding-top: 12rem; }
}

/* ---------- H14. Transparenter Header (Kundenwunsch 21.08.2026) ----------
   Auf Overlay-Seiten (Start, Leistungen/Branchen, Unternehmen, Qualität,
   Produkte, Kontakt, Fertigungsbeispiele) scheint der Hero-Hintergrund durch
   Topbar + Menüleiste durch. Beim Scrollen wird der Header solide weiß.
   Dropdowns/Megamenü bleiben bewusst weiß (Lesbarkeit). */
body.lex-header-transparent .lex-header,
.home .lex-header {
    background: transparent !important;
    border-bottom-color: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}
body.lex-header-transparent .lex-topbar {
    background: transparent;
    border-bottom-color: rgba(20, 48, 77, 0.12);
}
/* Scrolled: wieder solide (Regel steht NACH der Transparent-Regel) */
body.lex-header-transparent .lex-header.is-scrolled,
.home .lex-header.is-scrolled {
    background: var(--lex-white) !important;
    border-bottom-color: var(--lex-line) !important;
    box-shadow: 0 6px 24px rgba(20, 48, 77, 0.08);
}

/* ---------- H15. Produkte-Teaser (Startseite, v3.2.0) ----------
   Sektion direkt unter dem Hero (wichtigster Inhalt). Zwei große klickbare
   Foto-Kacheln mit echten Produktmotiven statt der früheren Bildmarken-
   Icons in News-Karten. Siemens-Sprache: Hairline, blaue Akzentkante,
   Arrow-Link, flache Geometrie. */
.lex-produkte-teaser__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}
.lex-produkt-tile {
    display: flex;
    flex-direction: column;
    background: var(--lex-white);
    border: 1px solid var(--lex-line);
    border-top: 3px solid var(--lex-primary);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lex-produkt-tile:hover,
.lex-produkt-tile:focus-visible {
    border-color: var(--lex-primary);
    box-shadow: 0 16px 40px -18px rgba(20, 48, 77, 0.25);
    text-decoration: none;
}
.lex-produkt-tile:focus-visible {
    outline: 3px solid var(--lex-primary);
    outline-offset: 3px;
}
.lex-produkt-tile__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--lex-gray-100);
}
.lex-produkt-tile__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.lex-produkt-tile:hover .lex-produkt-tile__media img,
.lex-produkt-tile:focus-visible .lex-produkt-tile__media img {
    transform: scale(1.05);
}
.lex-produkt-tile__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 0.75rem;
    padding: 1.75rem 2rem 2rem;
}
.lex-produkt-tile__title {
    margin: 0;
    font-family: var(--lex-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--lex-primary-dark);
    transition: color 0.15s ease;
}
.lex-produkt-tile:hover .lex-produkt-tile__title { color: var(--lex-primary); }
.lex-produkt-tile__text {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--lex-gray-600);
}
.lex-produkt-tile__more {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: auto;
    padding-top: 0.75rem;
    font-family: var(--lex-font-heading);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--lex-primary);
}
.lex-produkt-tile__more::after {
    content: "\2192";
    font-weight: 400;
    font-size: 1.3em;
    line-height: 1;
    transition: transform 0.2s ease;
}
.lex-produkt-tile:hover .lex-produkt-tile__more::after,
.lex-produkt-tile:focus-visible .lex-produkt-tile__more::after {
    transform: translateX(0.4rem);
}
@media (max-width: 860px) {
    .lex-produkte-teaser__grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .lex-produkt-tile__body { padding: 1.375rem 1.5rem 1.625rem; }
}