/* ═══════════════════════════════════════════
   SECTIONS — Section-spezifisches Styling
   ═══════════════════════════════════════════ */

/* ── Accessibility Utility — visuell versteckt, Screen-Reader-lesbar ──
   WordPress-Standard-Konvention. Genutzt z.B. für Pixel-Icons mit
   semantischem Text-Fallback (aria-hidden SVG + screen-reader-text). */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* ── Hero ───────────────────────────────── */

.l7-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: flex-start;
    background: var(--l7-bg-dark);
    color: var(--l7-text-light);
    padding: 0;
    /* Kompensiert den body padding-top (kompakte Nav 40px) */
    margin-top: -40px;
}

/* Hero mit Topbar: auch Topbar-Höhe kompensieren (kein extra Gap) */
.has-topbar .l7-hero {
    margin-top: calc((var(--l7-section-px-top, 10px) + var(--l7-topbar-h, 36px) + var(--l7-nav-h)) * -1);
}


/* Hero Image Frame — Bild direkt unter kompakter Nav (ohne Topbar, ohne transparent)
   +5px Gap zwischen Nav-Unterkante und Hero-Bild */
.l7-hero__frame {
    position: absolute;
    top: calc(40px + 5px);
    left: var(--l7-section-px);
    right: var(--l7-section-px);
    bottom: var(--l7-section-px);
    border-radius: var(--l7-radius);
    overflow: hidden;
}

.has-topbar .l7-hero__frame {
    top: calc(var(--l7-section-px-top, 10px) + var(--l7-topbar-h, 36px) + var(--l7-nav-h) + 5px);
}

/* Transparent Nav ohne Topbar: Hero Section startet ganz oben */
.has-transparent-nav .l7-hero {
    margin-top: 0;
    min-height: calc(100vh - var(--l7-section-px-top, 10px));
    min-height: calc(100svh - var(--l7-section-px-top, 10px));
}

/* Transparent Nav mit Topbar: Höhe abzüglich Topbar + Gap */
.has-transparent-nav.has-topbar .l7-hero {
    min-height: calc(100vh - var(--l7-section-px-top, 10px) - var(--l7-topbar-h, 36px) - var(--l7-section-px-top, 10px));
    min-height: calc(100svh - var(--l7-section-px-top, 10px) - var(--l7-topbar-h, 36px) - var(--l7-section-px-top, 10px));
}

.has-transparent-nav .l7-hero__frame {
    top: 0;
}

.has-transparent-nav.has-topbar .l7-hero__frame {
    top: 0;
}

.l7-hero__frame-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
@media (max-width: 720px) {
    .l7-hero__frame-img {
        object-position: left center;
    }
}

.l7-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 100%);
    z-index: 1;
}

.l7-hero .l7-container {
    position: relative;
    z-index: 2;
    padding-top: calc(40px + 5px + var(--l7-gap-lg));
}

.has-topbar .l7-hero .l7-container {
    padding-top: calc(var(--l7-section-px-top, 10px) + var(--l7-topbar-h, 36px) + var(--l7-nav-h) + 5px + var(--l7-gap-lg));
}

.l7-hero__content {
    max-width: 730px;
}

.l7-hero__title {
    /* Display-Statement — explizite H1-Tokens, da das Element jetzt <p> ist
       (semantischer H1 wanderte runter zu .l7-hero__text) */
    font-size: var(--l7-h1);
    font-weight: var(--l7-h1-weight, 700);
    line-height: var(--l7-h1-lh, 1.1);
    letter-spacing: -0.02em;
    margin: 0 0 var(--l7-gap-sm) 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Word-Split CSS lebt jetzt in base.css unter .l7-word-reveal */

.l7-hero__text {
    margin-bottom: var(--l7-gap-md);
    opacity: 0.85;
    max-width: 520px;
    /* Reset von globalen h1-Defaults — element ist h1 (für SEO),
       darf optisch aber nicht wie eine Headline groß werden */
    font-size: var(--l7-body);
    font-weight: var(--l7-body-weight, 400);
    line-height: var(--l7-body-lh, 1.5);
    letter-spacing: 0;
}

.l7-hero__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

.l7-hero__cta {
    font-family: var(--l7-font-primary);
    font-size: var(--l7-cta-font-size, 18px);
}

.l7-btn__arrow-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Oval etwas schmaler — Pfeil dafür größer */
    width: 2.2em;
    height: 1.4em;
    border-radius: 50px;
    background: var(--l7-bg-light, #fff);
    color: var(--l7-text-default, #1D1D1D);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* Pixel-Arrow innerhalb Pill-Button: em-basiert.
   Width leicht zurückgenommen (~5px schmaler bei 22px Font) — Höhe bleibt
   für gleiche Pfeilkopf-Proportion. */
.l7-btn--pill .l7-pixel-arrow,
.l7-btn__arrow-circle .l7-pixel-arrow {
    width: 1.22em;
    height: 0.95em;
}

.l7-btn--pill:hover .l7-btn__arrow-circle {
    transform: translateX(3px);
}

/* Pixel Arrow (reusable) */
.l7-pixel-arrow {
    width: 18px;
    height: 12px;
}

/* ── Hero Trust Bar ────────────────────── */

.l7-hero__trust-bar {
    position: absolute;
    bottom: calc(var(--l7-section-px) + 1.5rem);
    left: var(--l7-container-px);
    right: var(--l7-container-px);
    z-index: 2;
}

.l7-hero__trust-bar-inner {
    display: flex;
    align-items: center;
    gap: 1.25em;
    flex-wrap: nowrap;
}

/* Alle drei Items: gleiche font-size, weight, opacity, line-height — wirken als eine Zeile */
.l7-hero__trust-rating,
.l7-hero__trust-badge,
.l7-hero__trust-link a {
    font-size: var(--l7-h6);
    font-weight: 500;
    opacity: 0.85;
    line-height: 1;
    white-space: nowrap;
}

.l7-hero__trust-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
}

.l7-hero__trust-divider {
    width: 1px;
    height: 1em;
    background: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.l7-hero__trust-link a { transition: opacity 0.2s; }
.l7-hero__trust-link a:hover { opacity: 1; }

/* ── Stats Bar ──────────────────────────── */

.l7-stats-bar {
    padding-top: var(--l7-py-md);
    padding-bottom: var(--l7-py-md);
    background: var(--l7-bg-dark);
    color: var(--l7-text-light);
}

.l7-stats-bar__year {
    font-size: var(--l7-body);
    font-weight: 500;
    color: var(--l7-text-light);
    letter-spacing: 0.02em;
}

.l7-stats-bar__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--l7-gap-xl);
}

.l7-stats-bar__item {
    text-align: left;
}

.l7-stats-bar__line {
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    margin-bottom: var(--l7-gap-md);
}

.l7-stats-bar__number {
    display: block;
    font-size: var(--l7-h3);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--l7-text-light);
    margin-bottom: 0.3em;
    white-space: nowrap;
}

.l7-stats-bar__label {
    display: block;
    font-size: var(--l7-body);
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

.l7-stats-bar__year {
    color: var(--l7-text-light);
}

@media (max-width: 768px) {
    .l7-stats-bar__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--l7-gap-lg);
    }
}

/* ── Services List ──────────────────────── */

.l7-services {
    background: var(--l7-bg-alt, #f5f5f5);
}

.l7-services .l7-section-label {
    margin-bottom: var(--l7-gap-lg);
}

.l7-services__grid {
    display: flex;
    flex-direction: column;
    gap: var(--l7-gap-xl);
    max-width: 50%;
    margin-left: auto;
}


.l7-services__block {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.l7-services__badge {
    display: inline-block;
    align-self: flex-start;
    background: var(--l7-bg-light);
    color: var(--l7-text-default);
    font-size: var(--l7-badge);
    font-weight: 600;
    line-height: var(--l7-badge-lh);
    padding: 0.4em 1em;
    border-radius: 100px;
    margin-bottom: var(--l7-gap-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.l7-services__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.l7-services__links li {
    border-top: 1.5px solid var(--l7-text-default, #1D1D1D);
}

.l7-services__links li:last-child {
    border-bottom: 1.5px solid var(--l7-text-default, #1D1D1D);
}

.l7-services__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3em 0;
    font-size: calc(var(--l7-h2) * 0.8);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--l7-text-default);
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.l7-services__links a:hover {
    color: var(--l7-primary);
    padding-left: 0.25em;
}

.l7-services__arrow {
    flex-shrink: 0;
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.l7-services__links a:hover .l7-services__arrow {
    opacity: 0.5;
    transform: translate(0, 0);
}

/* TBA-Items in services-list: visuell gedimmt aber WCAG-konform.
   Statt Alpha-Multiplikation (Compound-Issue) → expliziter Grau-Ton der
   gerade über der 4.5:1-Schwelle liegt. */
.l7-services__item--tba .l7-services__link-text {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    padding: 0.3em 0;
    font-size: calc(var(--l7-h2) * 0.8);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #6B6B6B;   /* 4.59:1 Kontrast auf #F5F5F5 — WCAG AA */
    opacity: 1;       /* keine Alpha-Multiplikation mehr */
    cursor: default;
}
.l7-services__tba {
    font-size: 0.55em;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.2em 0.55em;
    border: 1px solid currentColor;
    border-radius: 999px;
    opacity: 1;       /* keine zusätzliche Dimmung — erbt #6B6B6B vom Parent */
    line-height: 1;
    align-self: center;
}

@media (max-width: 768px) {
    .l7-services__grid {
        max-width: 100%;
        margin-left: 0;
        gap: var(--l7-gap-lg);
    }
}

/* ── Statement Scroll-Snap ─────────────── */

.l7-statement-snap__slide {
    height: 100vh;
    height: 100svh;
    display: flex;
    align-items: center;
    background: var(--l7-bg-dark);
    color: var(--l7-text-light);
    position: relative;
    overflow: hidden;
    contain: layout style;
}

/* Trennlinie zwischen Slides */
.l7-statement-snap__slide + .l7-statement-snap__slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--l7-container-px);
    right: var(--l7-container-px);
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.l7-statement-snap__content {
    max-width: 75vw;
    width: 75vw;
}

.l7-statement-snap__label {
    /* Opacity wird global über .l7-section-label gesetzt (unified eyebrow style).
       Reveal-Effekt hier nur über clip-path + transform. */
    clip-path: inset(100% 0 0 0);
    transform: translateY(20px);
    transition: clip-path 0.6s ease, transform 0.6s ease;
}

.l7-statement-snap__slide.is-active .l7-statement-snap__label {
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
}

.l7-statement-snap__title {
    font-size: var(--l7-h1);
    font-weight: var(--l7-h1-weight, 700);
    line-height: var(--l7-h1-lh, 1.1);
    letter-spacing: -0.02em;
    /* Abstand zur Description identisch zum Service-Hero (--l7-gap-sm).
       Vorher --l7-gap-md → zu groß im Vergleich. */
    margin: 0 0 var(--l7-gap-sm);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Split-Text Reveal: Jedes Wort fährt von unten rein */
.l7-statement-snap__title .l7-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.08em;
}

.l7-statement-snap__title .l7-word-inner {
    display: inline-block;
    transform: translateY(105%);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.l7-statement-snap__slide.is-active .l7-word-inner {
    transform: translateY(0);
}

.l7-statement-snap__text {
    font-size: var(--l7-h4);
    line-height: 1.5;
    /* Text bleibt immer voll deckend (WAVE-konform).
       Reveal-Effekt über clip-path + transform, nicht opacity. */
    opacity: 0.85;
    max-width: 90%;
    clip-path: inset(100% 0 0 0);
    transform: translateY(20px);
    transition: clip-path 0.6s ease 0.4s, transform 0.6s ease 0.4s;
}

.l7-statement-snap__slide.is-active .l7-statement-snap__text {
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
}

/* Reduced-Motion: Animation komplett raus, Text direkt sichtbar (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    .l7-statement-snap__label,
    .l7-statement-snap__text {
        clip-path: none;
        transform: none;
        transition: none;
    }
}

/* Single-slide bridge variant — quote block with bg image */
.l7-statement-snap[data-slides="1"] .l7-statement-snap__slide {
    height: auto;
    min-height: 70vh;
    padding: var(--l7-py-xl) 0;
    background-color: var(--l7-bg-dark);
    background-size: cover;
    background-position: center;
    position: relative;
}

.l7-statement-snap[data-slides="1"] .l7-statement-snap__slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: none;
}

/* Show overlay only when bg image is set */
.l7-statement-snap[data-slides="1"] .l7-statement-snap__slide[style*="background-image"]::before {
    display: block;
}

.l7-statement-snap[data-slides="1"] .l7-container {
    position: relative;
    z-index: 1;
}

.l7-statement-snap[data-slides="1"] .l7-statement-snap__content {
    max-width: 75%;
    width: 75%;
    text-align: left;
    position: relative;
}

.l7-statement-snap[data-slides="1"] .l7-statement-snap__content::before {
    content: none;
}

.l7-statement-snap[data-slides="1"] .l7-statement-snap__title {
    font-size: var(--l7-h2);
    font-weight: var(--l7-h2-weight, 700);
    line-height: var(--l7-h2-lh, 1.1);
    letter-spacing: -0.02em;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .l7-statement-snap__content {
        max-width: 90vw;
        width: 90vw;
    }
    .l7-statement-snap__text {
        max-width: 100%;
    }
    .l7-statement-snap[data-slides="1"] .l7-statement-snap__content {
        max-width: 90vw;
        width: 90vw;
    }
}


/* ── Cases ──────────────────────────────── */

.l7-cases {
    background: var(--l7-bg-alt);
}

.l7-cases .l7-section-label {
    margin-bottom: var(--l7-gap-lg);
}

.l7-cases__list {
    display: flex;
    flex-direction: column;
    gap: var(--l7-gap-xl);
}

.l7-cases__item {
    display: grid;
    grid-template-columns: 45% 1fr;
    gap: var(--l7-gap-xl);
    align-items: start;
}

.l7-cases__image {
    position: relative;
    border-radius: var(--l7-radius);
    overflow: hidden;
}

.l7-cases__image > img:not(.l7-cases__logo),
.l7-cases__placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.l7-cases__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--l7-bg-alt);
    font-size: var(--l7-h1);
    font-weight: 700;
    color: var(--l7-text-muted);
}

.l7-cases__logo {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: auto;
    max-width: min(124px, 26%);
    height: auto;
    max-height: 39px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
    opacity: 1;
}

.l7-cases__text {
    padding-top: 0.5em;
}

.l7-cases__desc {
    font-size: clamp(1.375rem, 0.753rem + 0.862vw, 2.25rem);
    line-height: 1.3;
    color: var(--l7-text-muted);
    margin-bottom: 0.5em;
    font-weight: 500;
}

.l7-cases__name {
    color: var(--l7-text-default);
}

.l7-cases__title-link {
    text-decoration: none;
    color: inherit;
}

.l7-cases__title-link:hover .l7-cases__name {
    color: var(--l7-primary);
}

.l7-cases__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

.l7-cases__badge {
    display: inline-block;
    background: var(--l7-badge-bg);
    color: var(--l7-badge-text);
    font-size: var(--l7-badge);
    font-weight: 500;
    line-height: var(--l7-badge-lh);
    padding: 0.35em 0.85em;
    border-radius: 100px;
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .l7-cases__item {
        grid-template-columns: 1fr;
        gap: var(--l7-gap-md);
    }
}

/* ── Testimonials Stories — Big-Headline-Slider (Motto-Style) ─────────── */

.l7-testimonials-stories {
    background: #fff;
    color: #111;
    padding-top: var(--l7-py-lg);
    padding-bottom: var(--l7-py-lg);
    /* Overlap mit process-grow's Outro: testimonials startet 40vh früher,
       Cards faden schon ein während HL noch sichtbar ist.
       Nur auf Desktop — auf Tablet/Mobile reduziert/weg, sonst werden
       die Process-Tiles abgeschnitten. */
    margin-top: -40vh;
    position: relative;
    z-index: 25;
}

/* Tablet: weniger Overlap, sonst werden process-grow Tiles abgeschnitten */
@media (max-width: 1100px) {
    .l7-testimonials-stories {
        margin-top: -15vh;
    }
}

/* Mobile: gar kein Overlap */
@media (max-width: 768px) {
    .l7-testimonials-stories {
        margin-top: 0;
    }
}

/* Masonry-Grid: 2-spaltig auf Desktop, 1-spaltig auf Mobile */
.l7-testimonials-stories__masonry {
    column-count: 2;
    column-gap: clamp(1.25rem, 2vw, 2rem);
}

.l7-testimonials-stories__masonry .l7-testimonials-stories__card {
    break-inside: avoid;
    margin-bottom: clamp(1.25rem, 2vw, 2rem);
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .l7-testimonials-stories__masonry {
        column-count: 1;
    }
}

.l7-testimonials-stories__header {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    align-items: end;
    gap: var(--l7-gap-xl);
    margin-bottom: var(--l7-py-lg);
}

.l7-testimonials-stories__title {
    font-size: clamp(3rem, 9vw, 7rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    margin: 0;
    color: #111;
}

.l7-testimonials-stories__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--l7-gap-md);
}

.l7-testimonials-stories__subline {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.5;
    color: #555;
    margin: 0;
    max-width: 30ch;
}

.l7-testimonials-stories__counter {
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    font-weight: 600;
    color: #111;
    align-self: flex-end;
    font-variant-numeric: tabular-nums;
}

.l7-testimonials-stories__counter-sep {
    margin: 0 0.4em;
    color: #999;
}

.l7-testimonials-stories__card {
    background: #f4f4f4;
    border-radius: var(--l7-radius);
    padding: clamp(1.75rem, 2.5vw, 2.75rem);
    gap: clamp(1.25rem, 2vw, 1.75rem);
}

/* Reveal — smoother fade-in mit subtilem rise + scale + slight blur */
.l7-testimonials-stories__card.l7-reveal {
    opacity: 0;
    transform: translateY(60px) scale(0.96);
    filter: blur(6px);
    transition:
        opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity, filter;
}
.l7-testimonials-stories__card.l7-reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* Stagger-Delays kommen jetzt aus dem generischen [data-l7-reveal="loop"]-Cascade in base.css */

@media (prefers-reduced-motion: reduce) {
    .l7-testimonials-stories__card.l7-reveal {
        transition: opacity 0.3s linear !important;
        transform: none !important;
        filter: none !important;
    }
}

.l7-testimonials-stories__card-head {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.l7-testimonials-stories__avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.l7-testimonials-stories__author {
    display: flex;
    flex-direction: column;
}

.l7-testimonials-stories__author-name {
    font-weight: 600;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    color: #111;
    line-height: 1.2;
}

.l7-testimonials-stories__author-source {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.4;
}

.l7-testimonials-stories__card-meta {
    display: flex;
    align-items: center;
    gap: 0.8em;
    margin-top: auto;
    padding-top: 1rem;
}

.l7-testimonials-stories__stars {
    color: var(--l7-primary, #ff5722);
    font-size: 1rem;
    letter-spacing: 0.05em;
    line-height: 1;
}

.l7-testimonials-stories__quote {
    margin: 0;
}

.l7-testimonials-stories__quote p {
    font-size: clamp(1.3rem, 1.8vw, 1.7rem);
    line-height: var(--l7-body-lh, 1.6);
    letter-spacing: 0;
    color: #111;
    margin: 0;
    font-weight: var(--l7-body-weight, 400);
    font-family: var(--l7-font-primary);
}

/* Mobile */
@media (max-width: 768px) {
    .l7-testimonials-stories__header {
        grid-template-columns: 1fr;
        gap: var(--l7-gap-md);
        align-items: flex-start;
    }
    .l7-testimonials-stories__meta {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        align-items: flex-end;
    }
    .l7-testimonials-stories__counter {
        align-self: auto;
    }
    .l7-testimonials-stories__card {
        flex: 0 0 85vw;
    }
}


/* ── Team ───────────────────────────────── */

.l7-team {
    background: var(--l7-bg-alt);
    padding-top: var(--l7-gap-xl);
    padding-bottom: var(--l7-gap-xl);
}

/* Duo-Variante: 2 quadratische B&W Bilder im Container, wie Cases */
.l7-team--duo {
    background: transparent;
    padding-top: 0;
    padding-bottom: var(--l7-gap-xl);
}
.l7-team--duo .l7-team__header {
    padding: 0 var(--l7-container-px);
    margin-bottom: var(--l7-gap-lg);
}
.l7-team__duo {
    padding: 0 var(--l7-container-px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--l7-gap-xl);
    width: 100%;
}
.l7-team__duo-item {
    margin: 0;
    display: flex;
    flex-direction: column;
}
.l7-team__duo-photo {
    aspect-ratio: 1 / 1;
    background: var(--l7-bg-alt, #f1f1f1);
    overflow: hidden;
    border-radius: var(--l7-radius);
}
.l7-team__duo-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: grayscale(100%) contrast(1.05);
    display: block;
}
.l7-team__duo-caption {
    padding: 1.25rem var(--l7-container-px) 0;
}
.l7-team__duo-name {
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 0.15em;
    color: var(--l7-fg);
    letter-spacing: -0.005em;
}
.l7-team__duo-role {
    font-size: 1.05rem;
    font-weight: 400;
    margin: 0;
    color: var(--l7-text-muted, var(--l7-fg));
    line-height: 1.2;
    opacity: 0.7;
}
@media (max-width: 720px) {
    .l7-team__duo {
        grid-template-columns: 1fr;
        gap: var(--l7-gap-md);
    }
}

/* Hero-Minimal: für Über-uns — keine Buttons, keine Trust-Bar, keine Tags */
.page-id-57 .l7-hero__actions,
.page-id-57 .l7-hero__trust-bar,
.page-id-57 .l7-hero__tags {
    display: none !important;
}

/* Über-uns: Page komplett auf Schwarz */
.page-id-57 body,
body.page-id-57 {
    background: #0A0A0A;
}
.page-id-57 .l7-team--duo {
    background: #0A0A0A;
}
.page-id-57 .l7-team__duo-photo {
    background: #1a1a1a;
}
.page-id-57 .l7-team__duo-name {
    color: #fff;
}
.page-id-57 .l7-team__duo-role {
    color: rgba(255,255,255,0.7);
}

.l7-team__header {
    margin-bottom: var(--l7-gap-md);
}

.l7-team__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--l7-gap-sm);
}

/* Bild-Container mit Name-Overlay */
.l7-team__photo {
    position: relative;
    overflow: hidden;
    border-radius: var(--l7-radius);
}

.l7-team__photo img,
.l7-team__photo-placeholder {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}

.l7-team__photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--l7-bg-dark, #1D1D1D);
    font-size: var(--l7-h3);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.3);
}

/* Overlay: Name + Rolle im Bild */
.l7-team__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5em 0.75em 0.6em;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
}

.l7-team__name {
    margin: 0;
    font-size: var(--l7-h6);
    font-weight: 600;
    color: var(--l7-text-light);
}

.l7-team__role {
    font-size: var(--l7-h6);
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.15em;
}

/* Info-Block unter dem Bild */
.l7-team__info {
    padding-top: var(--l7-gap-xs);
}

.l7-team__text {
    font-size: var(--l7-small, 13px);
    color: var(--l7-text-muted);
    line-height: 1.4;
    margin-top: 0.3em;
}

.l7-team__features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
    margin-top: var(--l7-gap-xs);
}

.l7-team__feature {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.25em 0.6em;
    border-radius: 100px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: var(--l7-text-muted);
    line-height: 1.3;
}

/* ── Statement Bar ─────────────────────── */

.l7-statement-bar {
    padding: 0;
}

.l7-statement-bar__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 70vh;
}

.l7-statement-bar__text {
    background: var(--l7-bg-dark);
    color: var(--l7-text-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: var(--l7-py-lg);
    padding-bottom: var(--l7-py-lg);
    padding-left: 0;
    padding-right: 0;
    /* Horizontales Padding kommt ausschließlich vom inneren .l7-container */
}

.l7-statement-bar .l7-section-label {
    margin-bottom: var(--l7-gap-md);
}

.l7-statement-bar__title {
    font-size: var(--l7-h2);
    font-weight: var(--l7-h2-weight, 700);
    line-height: var(--l7-h2-lh, 1.1);
    letter-spacing: -0.02em;
}

.l7-statement-bar__desc {
    margin-top: var(--l7-gap-md);
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--l7-body);
    line-height: 1.5;
    max-width: 85%;
}

.l7-statement-bar__image {
    overflow: hidden;
}

.l7-statement-bar__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.l7-statement-bar__placeholder {
    width: 100%;
    height: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--l7-bg-alt);
    color: var(--l7-text-muted);
    font-size: var(--l7-h5);
}

@media (max-width: 768px) {
    .l7-statement-bar__grid {
        grid-template-columns: 1fr;
    }
    .l7-statement-bar__text {
        padding: var(--l7-py-md) 0;
        min-height: 50vh;
    }
    .l7-statement-bar__image {
        min-height: 50vh;
    }
}

/* ── Statement Bar — Animated Mode ──────────────────────────────────────
 * Sticky scroll, 2-col Layout: text-links, bouncing-ball-rechts.
 * Ball springt 3× — jeder Aufprall aktiviert ein Wort.
 * Outro: White-Flash zur folgenden weißen Portfolio-Section.
 * ─────────────────────────────────────────────────────────────────────── */

.l7-statement-bar--animated {
    position: relative;
    --progress: 0;
    background: var(--l7-bg-dark);
    color: var(--l7-text-light);
    padding: 0;
}

/* White-Flash Overlay — füllt während Outro-Phase die Section weiß */
/* Outro-Reveal: weisser Layer mit clip-path circle, der vom Ball aus expandiert.
 * Auf dem sticky-Element, damit reveal-x/y in Viewport-Koordinaten bleibt. */
.l7-statement-bar--animated .l7-statement-bar__sticky::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    pointer-events: none;
    z-index: 10;
    clip-path: circle(calc(max(0, var(--progress) - 0.85) * 1500vmax) at var(--reveal-x, 50%) var(--reveal-y, 50%));
}

/* Transition-Headline — linksbündig auf der weißen Fläche, am Container ausgerichtet.
   z-index 20 = über dem clip-path Overlay (10). */
.l7-statement-bar--animated .l7-statement-bar__transition {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    pointer-events: none;
    /* Padding über inneren .l7-container im Markup */
}

.l7-statement-bar--animated .l7-statement-bar__transition-headline {
    color: #111;
    font-size: clamp(1.6rem, 4.5vw, 3.6rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-align: left;
    margin: 0;
    max-width: 22ch;
    /* Fadet ein wenn clip-path covered (0.85 → 0.92), bleibt voll sichtbar
       bis Portfolio Cards reinscrollen. */
    opacity: calc(max(0, var(--progress) - 0.85) * 14.3);
    transition: opacity 0.05s linear;
}

.l7-statement-bar--animated .l7-statement-bar__wrap {
    position: relative;
    z-index: 1;
    height: calc((var(--total, 3) * 0.8 + 2.0) * 100vh);
    margin: 0;
}

.l7-statement-bar--animated {
    margin: 0;
    border: 0;
}

.l7-statement-bar--animated .l7-statement-bar__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

/* Grid → Single column, full width. Bild wird absolut auf rechte Hälfte gelegt
   damit __text in voller Viewport-Breite ist und .l7-container regulär matched */
.l7-statement-bar--animated .l7-statement-bar__grid {
    width: 100%;
    min-height: 100vh;
    display: block;
    position: relative;
}

/* Linke Spalte: Text in voller Breite — .l7-container positioniert wie überall.
   KEIN py-lg padding mehr — sonst kollidiert der Center-Punkt mit der Transition-HL.
   Title sitzt auf 50vh, Label/Desc sind absolute drumherum positioniert. */
.l7-statement-bar--animated .l7-statement-bar__text {
    background: transparent;
    min-height: 100vh;
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    z-index: 2;
}

/* Container füllt 100vh, Inhalte werden absolut darin positioniert */
.l7-statement-bar--animated .l7-statement-bar__text > .l7-container {
    min-height: 100vh;
    position: relative;
}

/* Desc sitzt unter dem Title, ebenfalls absolute */
.l7-statement-bar--animated .l7-statement-bar__desc {
    position: absolute;
    top: calc(50vh + 4em);
    left: var(--l7-container-px);
    right: var(--l7-container-px);
    max-width: 50%;
    margin: 0;
}

/* statement-bar nutzt Standard-.l7-container (kein Override mehr nötig) */

/* statement-bar Bild-Overlay (analog Hero-Overlay) */
.l7-statement-bar--animated .l7-statement-bar__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Label oben absolute */
.l7-statement-bar--animated .l7-statement-bar__text .l7-section-label {
    display: block;
    position: absolute;
    top: var(--l7-py-md);
    left: var(--l7-container-px);
    margin: 0;
}

/* Title sitzt exakt auf 50vh (gleiche Höhe wie Transition-Headline) */
.l7-statement-bar--animated .l7-statement-bar__title {
    position: absolute;
    top: 50vh;
    left: var(--l7-container-px);
    right: var(--l7-container-px);
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0 0.32em;
    font-size: clamp(1.6rem, 4.5vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0;
    overflow: visible;
    max-width: 50%;
}

.l7-statement-bar--animated .l7-statement-bar__word {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.l7-statement-bar--animated .l7-statement-bar__word[data-active="true"] {
    opacity: 1;
    transform: translateY(0);
}

/* Rechte Spalte: Bild absolut auf rechte Viewport-Hälfte */
.l7-statement-bar--animated .l7-statement-bar__image {
    background: transparent;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    width: 50vw;
    height: 100vh;
    z-index: 1;
}

.l7-statement-bar--animated .l7-statement-bar__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ball — innerhalb des Titels, sitzt auf den Worten, JS setzt translateX/Y */
.l7-statement-bar--animated .l7-statement-bar__dot {
    position: absolute;
    top: 0.1em;
    left: 0;
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    background: #fff;
    /* JS schreibt --ball-x und --ball-y; Default: links außerhalb */
    --ball-x: -3em;
    --ball-y: 0px;
    /* Kein Outro-Scale mehr — clip-path übernimmt das White-Reveal sauber */
    transform: translate(var(--ball-x), var(--ball-y));
    /* Am Section-Start unsichtbar — erscheint erst nach kurzem Scrollen */
    opacity: calc(min(1, var(--progress) * 18));
    box-shadow: 0 0 calc(15px + var(--progress) * 30px) rgba(255, 255, 255, 0.4);
    will-change: transform, opacity;
    z-index: 11;
}

/* Mobile: 1-col, Text oben, Bild drunter (Container-breit) */
@media (max-width: 768px) {
    .l7-statement-bar--animated .l7-statement-bar__wrap {
        height: calc((var(--total, 3) * 0.7 + 1.0) * 100vh);
    }
    .l7-statement-bar--animated .l7-statement-bar__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        min-height: 100vh;
    }
    .l7-statement-bar--animated .l7-statement-bar__text {
        padding: var(--l7-py-md) 0;
        text-align: left;
    }
    .l7-statement-bar--animated .l7-statement-bar__title {
        justify-content: flex-start;
        font-size: clamp(1.6rem, 7vw, 2.4rem);
    }
    /* Dot bleibt em-basiert und skaliert mit Title-Font */
    .l7-statement-bar--animated .l7-statement-bar__dot {
        width: 0.6em;
        height: 0.6em;
    }
    /* Bild Mobile: full container width */
    .l7-statement-bar--animated .l7-statement-bar__image {
        width: 100%;
        height: auto;
        min-height: 50vh;
        max-height: 60vh;
    }
    .l7-statement-bar--animated .l7-statement-bar__image img {
        width: 100%;
        height: 100%;
        max-height: 60vh;
        object-fit: cover;
    }
}

@media (prefers-reduced-motion: reduce) {
    .l7-statement-bar--animated .l7-statement-bar__word,
    .l7-statement-bar--animated .l7-statement-bar__dot {
        transition: none !important;
        animation: none !important;
    }
    .l7-statement-bar--animated .l7-statement-bar__dot {
        --bounce-y: 0;
        --scale: 0.6;
    }
}

/* ── About ──────────────────────────────── */

.l7-about__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--l7-gap-xl);
    align-items: center;
}

.l7-about__text h2 {
    margin-bottom: var(--l7-gap-md);
}

.l7-about__text p + p {
    margin-top: var(--l7-gap-sm);
}

.l7-about__placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--l7-bg-alt);
    border-radius: var(--l7-radius);
    font-size: var(--l7-h5);
    color: var(--l7-text-muted);
}

/* ── CTA Banner — Dark, zentriert, Statement-Style ── */

.l7-cta-banner {
    background: var(--l7-bg-dark);
    color: var(--l7-text-light);
}

.l7-cta-banner__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.l7-cta-banner__title {
    font-size: var(--l7-h2);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 auto var(--l7-gap-md);
}
.l7-cta-banner__title em {
    font-style: italic;
    font-weight: 400;
    opacity: .85;
}

.l7-cta-banner__image {
    margin-bottom: var(--l7-gap-lg);
}

.l7-cta-banner__image img {
    width: clamp(180px, 18vw, 260px);
    height: auto;
    aspect-ratio: 3 / 4;
    border-radius: var(--l7-radius);
    object-fit: cover;
    display: block;
}

.l7-cta-banner__photo-placeholder {
    width: clamp(180px, 18vw, 260px);
    aspect-ratio: 3 / 4;
    border-radius: var(--l7-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.3);
    font-size: var(--l7-h1);
    font-weight: 700;
}

/* Dock-Container: Platzhalter für gelandeten CTA */
.l7-cta-banner__dock {
    display: flex;
    justify-content: center;
    min-height: 56px;
}

/* Sticky CTA im gelandeten Zustand — in der Section */
.l7-sticky-cta.is-landed {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: 1;
    transform: none !important;
    animation: none !important;
    border-radius: 50px !important;
    width: auto !important;
}

/* CTA-Banner Mobile: volle Bildschirmhöhe + Sticky-CTA pill-shape im Landed-State */
@media (max-width: 768px) {
    .l7-cta-banner {
        min-height: 100vh;
        display: flex;
        align-items: center;
    }
    .l7-cta-banner .l7-container {
        flex: 1;
    }
    .l7-cta-banner .l7-cta-banner__inner {
        justify-content: center;
    }
    .l7-sticky-cta.is-landed {
        align-self: center;
    }
}

/* ── Footer ─────────────────────────────── */

.l7-footer {
    background: var(--l7-bg-dark);
    color: var(--l7-text-light);
}

.l7-footer__content {
    /* Selbe Math wie .l7-container — volle Breite, container-px Padding */
    width: 100%;
    padding: var(--l7-gap-xl) var(--l7-container-px) 0;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
}

/* 3-Spalten Grid: Info breit | Leistungen | About */
.l7-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: var(--l7-gap-lg);
    align-items: start;
}

/* Info-Spalte (links) */
.l7-footer__info-logo {
    font-family: var(--l7-font-nav);
    font-size: var(--l7-nav-font-size, 16px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 1.5em;
}

.l7-footer__info-text {
    font-size: var(--l7-h6, 0.95rem);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0.02em;
    max-width: 30ch;
    margin: 0 0 2.5em;
}

.l7-footer__contact-label {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--l7-small, 13px);
    font-weight: 600;
    margin-bottom: 0.8em;
    opacity: 0.6;
}

.l7-footer__contact-label svg {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

.l7-footer__contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.l7-footer__contact li {
    margin-bottom: 0;
    line-height: 1.4;
}

.l7-footer__contact a {
    font-size: var(--l7-small, 13px);
    color: var(--l7-text-light);
    text-decoration: none;
    opacity: 0.6;
    transition: opacity 0.2s;
    line-height: 1.4;
}

.l7-footer__contact a:hover {
    opacity: 1;
}

/* Spalten-Label */
.l7-footer__label {
    display: block;
    font-size: var(--l7-small, 13px);
    letter-spacing: 0.04em;
    opacity: 0.55;       /* 6:1 Kontrast auf #050505 — WCAG AA */
    margin-bottom: 0.8em;
    font-weight: 400;
}

/* Link-Listen — groß und bold wie supersolid */
.l7-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.l7-footer__links li {
    margin-bottom: 0;
}

.l7-footer__links a {
    font-size: var(--l7-h3, 1.5rem);
    font-weight: 700;
    color: var(--l7-text-light);
    text-decoration: none;
    line-height: 1.2;
    transition: opacity 0.2s;
}

.l7-footer__links a:hover {
    opacity: 0.6;
}

/* Social Badges — Pill-Style */
.l7-footer__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
    margin-top: 1.8em;
}

.l7-footer__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.55em 1.2em;
    background: rgba(255, 255, 255, 0.12);   /* sichtbarer Pill-Hintergrund */
    border: none;
    border-radius: 100px;
    color: var(--l7-text-light);
    text-decoration: none;
    font-size: var(--l7-small, 13px);
    opacity: 1;          /* keine Alpha-Multiplikation — Text voll deckend */
    transition: background 0.2s;
}

.l7-footer__badge:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* Bottom Bar: Copyright + Legal */
.l7-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding: var(--l7-gap-sm) 0;
}

.l7-footer__bottom p {
    font-size: var(--l7-small, 13px);
    opacity: 0.55;       /* 6:1 Kontrast — WCAG AA */
    margin: 0;
}

.l7-footer__legal {
    display: flex;
    gap: 1.5em;
}

.l7-footer__legal a {
    font-size: var(--l7-small, 13px);
    color: var(--l7-text-light);
    opacity: 0.55;       /* 6:1 Kontrast — WCAG AA */
    text-decoration: none;
    transition: opacity 0.2s;
}

.l7-footer__legal a:hover {
    opacity: 1;
}

/* Shaping Brands — Blur → Sharp on Scroll */
.l7-footer__claim {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: var(--l7-gap-md) 0;
    text-align: center;
}

.l7-footer__placeholder {
    padding: 3em 0;
    text-align: center;
    opacity: 0.4;
}

.l7-footer__claim-line {
    font-size: 14.5vw;
    font-weight: 700;
    letter-spacing: -0.04em;
    white-space: nowrap;
    user-select: none;
    color: var(--l7-text-light);
    line-height: 1;
}

/* Responsive */
@media (max-width: 900px) {
    .l7-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--l7-gap-md);
    }
    .l7-footer__links a {
        font-size: var(--l7-h3, 1.5rem);
    }
}

@media (max-width: 600px) {
    .l7-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--l7-gap-md);
    }
    .l7-footer__bottom {
        flex-direction: column;
        gap: 0.75em;
        align-items: flex-start;
    }
    .l7-footer__links a {
        font-size: var(--l7-h4, 1.2rem);
    }
}

/* ── Page Header ────────────────────────── */

.l7-section--page-header {
    padding-top: var(--l7-py-sm);
    padding-bottom: var(--l7-py-sm);
    background: var(--l7-bg-dark);
    color: var(--l7-text-light);
}

.l7-page .l7-section:not(.l7-section--page-header) {
    background: var(--l7-bg-dark);
    color: var(--l7-text-light);
}

.l7-page .l7-content a {
    color: var(--l7-primary);
}

.l7-page .l7-content a:hover {
    opacity: 0.7;
}

/* ── Service Hero ──────────────────────── */

.l7-service-hero {
    position: relative;
    min-height: 80vh;
    min-height: 80svh;
    display: flex;
    align-items: flex-start;
    padding: 0;
    background: var(--l7-bg-dark);
    color: var(--l7-text-light);
    margin-top: -40px;
}

.has-topbar .l7-service-hero {
    margin-top: calc((var(--l7-section-px-top, 10px) + var(--l7-topbar-h, 36px) + var(--l7-nav-h)) * -1);
}

.l7-service-hero__frame {
    position: absolute;
    top: calc(40px + 5px);
    left: var(--l7-section-px);
    right: var(--l7-section-px);
    bottom: var(--l7-section-px);
    border-radius: var(--l7-radius);
    overflow: hidden;
}

.has-topbar .l7-service-hero__frame {
    top: calc(var(--l7-section-px-top, 10px) + var(--l7-topbar-h, 36px) + var(--l7-nav-h) + 5px);
}

.l7-service-hero__frame-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.l7-service-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 100%);
    z-index: 1;
}

.l7-service-hero .l7-container {
    position: relative;
    z-index: 2;
    padding-top: calc(40px + 5px + var(--l7-gap-lg));
}

.has-topbar .l7-service-hero .l7-container {
    padding-top: calc(var(--l7-section-px-top, 10px) + var(--l7-topbar-h, 36px) + var(--l7-nav-h) + 5px + var(--l7-gap-lg));
}

.has-transparent-nav .l7-service-hero {
    margin-top: 0;
    min-height: calc(80vh - var(--l7-section-px-top, 10px));
    min-height: calc(80svh - var(--l7-section-px-top, 10px));
}

.has-transparent-nav .l7-service-hero__frame {
    top: 0;
}

.has-transparent-nav.has-topbar .l7-service-hero__frame {
    top: 0;
}

.l7-service-hero__content {
    max-width: 750px;
}

.l7-service-hero__badge {
    margin-bottom: var(--l7-gap-sm);
}

.l7-service-hero__title {
    font-size: var(--l7-h1);
    font-weight: var(--l7-h1-weight, 700);
    line-height: var(--l7-h1-lh, 1.1);
    letter-spacing: -0.02em;
    margin-bottom: var(--l7-gap-sm);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.l7-service-hero__text {
    font-size: var(--l7-body);
    line-height: var(--l7-body-lh, 1.6);
    color: rgba(255, 255, 255, 0.7);
    max-width: 550px;
    margin-bottom: var(--l7-gap-md);
}

.l7-service-hero__actions {
    margin-top: var(--l7-gap-md);
}

/* ── Feature Grid ─────────────────────── */

.l7-feature-grid {
    padding-top: var(--l7-py-lg);
    padding-bottom: var(--l7-py-lg);
    background: var(--l7-bg-dark);
    color: var(--l7-text-light);
}

.l7-feature-grid__header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 var(--l7-gap-xl);
    align-items: start;
    margin-bottom: var(--l7-gap-lg);
}

.l7-feature-grid__intro {
    font-size: var(--l7-body, 1rem);
    line-height: var(--l7-body-lh, 1.6);
    color: rgba(255, 255, 255, 0.55);
    max-width: 52ch;
    margin-bottom: var(--l7-py-md);
}

.l7-feature-grid__label {
    padding-top: 0.5em;
}

.l7-feature-grid__headline {
    font-size: var(--l7-h2);
    font-weight: var(--l7-h2-weight, 700);
    line-height: var(--l7-h2-lh, 1.1);
    letter-spacing: -0.02em;
    max-width: 28ch;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.l7-feature-grid__cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--l7-gap-md);
}

.l7-feature-grid__card {
    padding: var(--l7-gap-xl) var(--l7-gap-lg);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    border-top: none;
    display: flex;
    flex-direction: column;
}

.l7-feature-grid__icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--l7-gap-md);
}

.l7-feature-grid__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.8;
}

.l7-feature-grid__card-number {
    display: block;
    font-size: var(--l7-small, 13px);
    color: rgba(255, 255, 255, 0.3);
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-bottom: var(--l7-gap-md);
}

.l7-feature-grid__card-title {
    font-size: var(--l7-h4, 1.25rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: var(--l7-gap-md);
}

.l7-feature-grid__card-text {
    font-size: var(--l7-body, 1rem);
    line-height: var(--l7-body-lh, 1.6);
    color: rgba(255, 255, 255, 0.45);
    margin-top: auto;
}

/* Feature Grid — Responsive */
@media (max-width: 1023px) {
    .l7-feature-grid__header {
        grid-template-columns: 1fr;
        gap: var(--l7-gap-xs);
    }
    .l7-feature-grid__cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .l7-feature-grid__cards {
        grid-template-columns: 1fr;
    }
    .l7-service-hero__content {
        max-width: 100%;
    }
}

/* ── PAS / Statement + Pains + Solve ─── */

.l7-pas {
    background: var(--l7-bg-dark);
    color: var(--l7-text-light);
    overflow: hidden;
    padding-top: var(--l7-py-lg);
    padding-bottom: 0;
}

/* H2 Statement */
.l7-pas__statement {
    font-size: var(--l7-h2);
    font-weight: var(--l7-h2-weight, 700);
    line-height: var(--l7-h2-lh, 1.1);
    letter-spacing: -0.02em;
    max-width: 24ch;
    margin-bottom: var(--l7-py-md);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Editorial: Intro left + Pains right */
.l7-pas__editorial {
    display: flex;
    flex-direction: column;
    gap: var(--l7-gap-lg);
    padding-bottom: 0;
}

.l7-pas__intro {
    font-size: var(--l7-body, 1rem);
    line-height: var(--l7-body-lh, 1.6);
    color: rgba(255, 255, 255, 0.55);
}

.l7-pas__intro strong {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

/* Pains — Grid-Layout */
.l7-pas__pains {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--l7-section-px, 10px);
}

/* Pain-Cards modernisiert — gleiche Sprache wie Result-Tiles & Process-Tiles:
   theme-radius, hover-lift, Big-Background-Number, schwarzer Phase-Pill */
.l7-pas__pain {
    position: relative;
    padding: var(--l7-gap-xl) var(--l7-gap-lg);
    background: #0F0F0F;
    border-radius: var(--l7-radius, 6px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: background 0.2s ease, transform 0.3s cubic-bezier(0.2,0.7,0.2,1);
}
.l7-pas__pain:hover {
    background: #181818;
    transform: translateY(-6px);
}

/* Big-Background-Number entfernt — Pain-Cards sind clean */

/* Eyebrow-Pill oben — neutraler heller Ton (statt CTA-rot) */
.l7-pas__pain::after {
    content: "PAIN";
    position: absolute;
    top: var(--l7-gap-md);
    right: var(--l7-gap-lg);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    z-index: 1;
}

.l7-pas__pain-icon {
    width: 72px;
    height: 72px;
    margin-bottom: var(--l7-gap-xl);
}

.l7-pas__pain-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.l7-pas__pain-title {
    font-size: var(--l7-h3);
    font-weight: var(--l7-h3-weight, 600);
    line-height: var(--l7-h3-lh, 1.2);
    letter-spacing: -0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    z-index: 1;
}

.l7-pas__pain-text {
    font-size: var(--l7-body, 1rem);
    font-weight: 400;
    line-height: var(--l7-body-lh, 1.6);
    color: rgba(255, 255, 255, 0.55);
    margin-top: auto;
    padding-top: var(--l7-gap-xl);
    position: relative;
    z-index: 1;
}

/* Facts — 4 Tiles im selben Pattern wie Result-Tiles */
.l7-pas__facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--l7-section-px, 10px);
    padding: var(--l7-py-md) 0;
}

.l7-pas__fact {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: var(--l7-gap-lg);
    background: #0F0F0F;
    border-radius: var(--l7-radius, 6px);
    transition: background 0.2s ease, transform 0.3s cubic-bezier(0.2,0.7,0.2,1);
}
.l7-pas__fact:hover {
    background: #181818;
    transform: translateY(-4px);
}

.l7-pas__fact-number {
    font-size: clamp(2rem, 3.5vw, 3.2rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.l7-pas__fact-text {
    font-size: var(--l7-small, 13px);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.7);
    margin-top: auto;
}

@media (max-width: 900px) { .l7-pas__facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .l7-pas__facts { grid-template-columns: 1fr; } }

/* Block 3: Solve — 2-col split */
.l7-pas__solve {
    padding-top: var(--l7-py-md);
}

.l7-pas__solve-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--l7-gap-xl);
    align-items: start;
}

.l7-pas__solve-title {
    font-size: var(--l7-h2);
    font-weight: var(--l7-h2-weight, 700);
    line-height: var(--l7-h2-lh, 1.1);
    letter-spacing: -0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.l7-pas__solve-text {
    font-size: var(--l7-body);
    line-height: var(--l7-body-lh, 1.6);
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: var(--l7-gap-lg);
}

.l7-pas__solve-text strong {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.l7-pas__check-icon {
    flex-shrink: 0;
    color: var(--l7-primary, #e63946);
}

/* Block 4: Trust + Nutzen */
.l7-pas__bottom {
    padding-top: var(--l7-py-md);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.l7-pas__trust {
    font-size: var(--l7-h4, 1.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: var(--l7-gap-lg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.l7-pas__nutzen {
    display: flex;
    flex-direction: column;
    gap: var(--l7-gap-xs);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--l7-gap-lg) 0;
    max-width: 60ch;
}

.l7-pas__nutzen-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    font-size: var(--l7-body-sm, 15px);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.l7-pas__nutzen-item .l7-pas__check-icon {
    flex-shrink: 0;
    color: var(--l7-primary, #e63946);
    margin-top: 0.15em;
}

.l7-pas__cta {
    padding-top: var(--l7-gap-sm);
}

.l7-pas__cta-sub {
    margin-top: var(--l7-gap-sm);
    font-size: var(--l7-small, 13px);
    color: rgba(255, 255, 255, 0.6);
}

/* ── Cases Grid (Service) ────────────── */

.l7-cases-grid {
    padding-top: var(--l7-py-lg);
    padding-bottom: var(--l7-py-lg);
    background: var(--l7-bg-light);
    color: var(--l7-text-default);
}

.l7-cases-grid__header {
    margin-bottom: var(--l7-py-md);
}

.l7-cases-grid__title {
    font-size: var(--l7-h2);
    font-weight: var(--l7-h2-weight, 700);
    line-height: var(--l7-h2-lh, 1.1);
    letter-spacing: -0.02em;
}

.l7-cases-grid__items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--l7-gap-md);
}

.l7-cases-grid__item {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: opacity 0.2s;
}

a.l7-cases-grid__item:hover {
    opacity: 0.8;
}

.l7-cases-grid__image {
    aspect-ratio: 4 / 3;
    border-radius: var(--l7-radius, 8px);
    overflow: hidden;
    margin-bottom: var(--l7-gap-sm);
    background: var(--l7-bg-alt, #F5F5F5);
}

.l7-cases-grid__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.l7-cases-grid__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--l7-text-muted);
}

.l7-cases-grid__name {
    font-size: var(--l7-h5, 1.1rem);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.25em;
}

.l7-cases-grid__desc {
    font-size: var(--l7-small, 13px);
    line-height: 1.5;
    color: var(--l7-text-muted);
    margin-bottom: var(--l7-gap-xs);
}

.l7-cases-grid__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
    margin-top: var(--l7-gap-xs);
}

.l7-cases-grid__badge {
    font-size: 11px;
    font-weight: 500;
    padding: 0.2em 0.6em;
    border-radius: 4px;
    background: var(--l7-bg-alt, #F5F5F5);
    color: var(--l7-text-muted);
}

@media (max-width: 1023px) {
    .l7-cases-grid__items {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .l7-cases-grid__items {
        grid-template-columns: 1fr;
    }
}

/* ── Use Cases (Sticky Stack) ────────── */

.l7-use-cases {
    padding-top: var(--l7-py-lg);
    padding-bottom: var(--l7-py-lg);
    background: var(--l7-bg-dark, #111);
    color: var(--l7-text-light);
}

.l7-use-cases__header {
    margin-bottom: var(--l7-py-md);
}

.l7-use-cases__title {
    font-size: var(--l7-h2);
    font-weight: var(--l7-h2-weight, 700);
    line-height: var(--l7-h2-lh, 1.1);
    letter-spacing: -0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.l7-use-cases__stack {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.l7-use-cases__card {
    position: sticky;
    top: calc(80px + var(--card-index, 0) * 40px);
    z-index: calc(var(--card-index, 0) + 1);
}

.l7-use-cases__card-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--l7-gap-lg);
    align-items: center;
    background: #1a1a1a;
    border-radius: 16px;
    padding: var(--l7-gap-xl);
    min-height: 450px;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.4);
}

.l7-use-cases__card-number {
    display: block;
    font-size: var(--l7-small, 13px);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--l7-gap-md);
    letter-spacing: 0.05em;
}

.l7-use-cases__card-title {
    font-size: var(--l7-h3, 1.5rem);
    font-weight: var(--l7-h2-weight, 700);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: var(--l7-gap-md);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.l7-use-cases__card-text {
    font-size: var(--l7-body);
    line-height: var(--l7-body-lh, 1.6);
    color: rgba(255, 255, 255, 0.7);
    max-width: 45ch;
    margin-bottom: var(--l7-gap-lg);
}

.l7-use-cases__card-image {
    border-radius: 12px;
    overflow: hidden;
}

.l7-use-cases__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Process Steps ────────────────────── */

.l7-process {
    padding-top: var(--l7-py-lg);
    padding-bottom: var(--l7-py-lg);
    background: var(--l7-bg-dark, #111);
    color: var(--l7-text-light);
}

.l7-process__header {
    margin-bottom: var(--l7-py-md);
}

.l7-process__title {
    font-size: var(--l7-h2);
    font-weight: var(--l7-h2-weight, 700);
    line-height: var(--l7-h2-lh, 1.1);
    letter-spacing: -0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.l7-process__subtitle {
    font-size: var(--l7-body);
    color: rgba(255, 255, 255, 0.5);
    margin-top: var(--l7-gap-xs);
}

/* Timeline */
.l7-process__timeline {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--l7-py-md) 0;
}

.l7-process__line {
    position: absolute;
    top: calc(var(--l7-py-md) + 3.2em + 14px);
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
}

.l7-process__line::after {
    content: '';
    position: absolute;
    right: -6px;
    top: -4px;
    width: 0;
    height: 0;
    border-left: 8px solid rgba(255, 255, 255, 0.15);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.l7-process__point {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    position: relative;
    z-index: 1;
}

.l7-process__point-label {
    font-size: var(--l7-h5, 1.1rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: var(--l7-gap-sm);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.l7-process__point-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: var(--l7-bg-dark, #111);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--l7-gap-sm);
}

.l7-process__point-text {
    font-size: var(--l7-small, 13px);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    max-width: 16ch;
}

/* Responsive Process */
@media (max-width: 600px) {
    .l7-process__timeline {
        flex-direction: column;
        align-items: center;
        gap: var(--l7-gap-lg);
    }
    .l7-process__line {
        display: none;
    }
}

/* ── FAQ Accordion ────────────────────── */

.l7-faq {
    padding-top: var(--l7-py-lg);
    padding-bottom: var(--l7-py-lg);
    background: var(--l7-bg-dark);
    color: var(--l7-text-light);
}

.l7-faq__header {
    margin-bottom: var(--l7-py-md);
}

.l7-faq__title {
    font-size: var(--l7-h2);
    font-weight: var(--l7-h2-weight, 700);
    line-height: var(--l7-h2-lh, 1.1);
    letter-spacing: -0.02em;
    max-width: 20ch;
}

.l7-faq__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.l7-faq__item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.l7-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--l7-gap-md) 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: var(--l7-h5, 1.1rem);
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
    gap: var(--l7-gap-md);
    transition: opacity 0.2s;
}

.l7-faq__question:hover {
    opacity: 0.6;
}

.l7-faq__icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.l7-faq__icon-v {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
}

.l7-faq__item.is-open .l7-faq__icon-v {
    opacity: 0;
}

.l7-faq__item.is-open .l7-faq__icon {
    transform: rotate(90deg);
}

.l7-faq__answer {
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    max-height: 0;
    opacity: 0;
}

.l7-faq__answer[hidden] {
    display: block;
    max-height: 0;
    opacity: 0;
}

.l7-faq__item.is-open .l7-faq__answer {
    max-height: 500px;
    opacity: 1;
}

.l7-faq__answer p {
    font-size: var(--l7-body);
    line-height: var(--l7-body-lh, 1.6);
    color: var(--l7-text-light);
    max-width: 65ch;
    padding-bottom: var(--l7-gap-md);
}

/* PAS + Use Cases + FAQ Responsive */
@media (max-width: 767px) {
    .l7-pas__facts {
        grid-template-columns: repeat(2, 1fr);
    }
    .l7-pas__fact:nth-child(3) {
        border-left: none;
    }
    .l7-pas__editorial {
        grid-template-columns: 1fr;
    }
    .l7-pas__facts {
        grid-template-columns: 1fr 1fr;
    }
    .l7-pas__solve-grid {
        grid-template-columns: 1fr;
    }
    .l7-use-cases__card {
        position: relative;
        top: auto;
    }
    .l7-use-cases__card-inner {
        grid-template-columns: 1fr;
        padding: var(--l7-gap-lg);
        min-height: auto;
    }
    .l7-process__point-text {
        max-width: none;
    }
}

/* ── Manifest ─────────────────────────── */

.l7-manifest {
    padding-top: var(--l7-py-lg);
    padding-bottom: var(--l7-py-lg);
    background: var(--l7-bg-light);
    color: var(--l7-text-default);
}

.l7-manifest__body {
    margin-top: var(--l7-gap-xl);
}

.l7-manifest__text {
    font-size: var(--l7-h3);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--l7-text-muted);
    max-width: 42ch;
}

.l7-manifest__text strong {
    color: var(--l7-text-default);
    font-weight: 700;
}

.l7-manifest__image {
    margin-top: var(--l7-py-md);
    border-radius: var(--l7-radius);
    overflow: hidden;
    max-width: 600px;
}

.l7-manifest__image img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 767px) {
    .l7-manifest__text {
        max-width: none;
    }
}

/* ── Ultra-Wide ab 2000px: Hero-Inhalts-Größen, Container-Math bleibt Standard ── */

@media (min-width: 2000px) {
    .l7-hero__content {
        max-width: 1050px;
    }
    .l7-hero__title {
        font-size: 90px;
    }
    .l7-hero__text {
        max-width: 750px;
    }
    /* Trust-Bar bleibt am Container-Edge (container-px global) */
}

/* ─────────────────────────────────────────────
   Portfolio Mosaic — Magazin-Grid mit Hover-Reveal
   ───────────────────────────────────────────── */

.l7-portfolio-mosaic {
    background: #fff;
    color: #111;
    padding-top: var(--l7-gap-md);
    padding-bottom: calc(var(--l7-py-lg) + 50px);
    font-family: var(--l7-font-primary);
    position: relative;
    z-index: 25;
}

/* Overlap NUR auf Desktop wo Sticky-Scroll + White-Flash aktiv sind.
   Mobile/Tablet hat keine Transition zum Überlappen → kein Pull. */
@media (min-width: 1025px) {
    .l7-statement-bar--animated + .l7-portfolio-mosaic,
    .l7-process-grow + .l7-portfolio-mosaic {
        margin-top: -15vh;
    }
}

.l7-portfolio-mosaic .l7-section-label {
    color: #111;
    opacity: 1;
    margin-bottom: var(--l7-gap-lg);
}

.l7-portfolio-mosaic__headline {
    color: #111;
}

.l7-portfolio-mosaic__intro {
    color: #555;
}

/* ── Ab Portfolio-Mosaic: weißer Hintergrund für alle folgenden Sections ── */

.l7-cases,
.l7-testimonials,
.l7-team {
    background: #fff;
}

.l7-cta-banner {
    background: #fff;
    color: #111;
}

.l7-cta-banner .l7-cta-banner__title,
.l7-cta-banner h2,
.l7-cta-banner h3 {
    color: #111;
}

.l7-cta-banner .l7-cta-banner__text,
.l7-cta-banner p {
    color: #444;
}

.l7-portfolio-mosaic__header {
    display: block;
    margin-bottom: var(--l7-gap-xl);
    padding-left: 0;
}

.l7-portfolio-mosaic__header .l7-section-label {
    padding-top: 0.5em;
}

.l7-portfolio-mosaic__headline {
    font-size: var(--l7-h2);
    font-weight: var(--l7-h2-weight, 700);
    line-height: var(--l7-h2-lh, 1.1);
    letter-spacing: -0.02em;
    max-width: 28ch;
    margin: 0 0 var(--l7-gap-md);
}


.l7-portfolio-mosaic__intro {
    font-size: var(--l7-body, 1rem);
    line-height: var(--l7-body-lh, 1.6);
    color: rgba(255, 255, 255, 0.55);
    max-width: 56ch;
    grid-column: 2;
    margin: 0;
}

.l7-portfolio-mosaic__feed {
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 4vw, 4.5rem);
    width: 100%;
    padding-left: var(--l7-section-px, 10px);
    padding-right: var(--l7-section-px, 10px);
    box-sizing: border-box;
}

/* Section hat keinen horizontalen Overflow — verhindert Scrollbar auf breiten Bildschirmen */
.l7-portfolio-mosaic { overflow-x: clip; }

/* ── Row-Templates ── */

.l7-pm-row {
    display: grid;
    gap: var(--l7-section-px, 10px);
    width: 100%;
}

/* columns211  =  2fr 1fr 1fr */
.l7-pm-row--columns211 {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr;
}

/* columns22   =  1fr 1fr */
.l7-pm-row--columns22 {
    grid-template-columns: 1fr 1fr;
}

/* columns121  =  1fr 2fr 1fr */
.l7-pm-row--columns121 {
    grid-template-columns: 1fr 2fr 1fr;
}

/* columns1111 =  1fr 1fr 1fr 1fr */
.l7-pm-row--columns1111 {
    grid-template-columns: repeat(4, 1fr);
}

/* ── Card Base — Bild oben, Text drunter immer sichtbar ── */

.l7-pm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: transparent;
    text-decoration: none;
    color: inherit;
}

/* ── Media (Bild-Container mit eigener Aspect-Ratio) ── */

.l7-pm-card__media {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #111;
    aspect-ratio: 4 / 3;
    border-radius: var(--l7-radius);
    margin-bottom: 18px;
}

/* Große Cards in columns211/columns121 haben 2 Spalten → Ratio breiter */
.l7-pm-row--columns211 .l7-pm-card:first-child .l7-pm-card__media,
.l7-pm-row--columns121 .l7-pm-card:nth-child(2) .l7-pm-card__media {
    aspect-ratio: 16 / 11;
}

.l7-pm-row--columns22 .l7-pm-card__media {
    aspect-ratio: 16 / 11;
}

.l7-pm-row--columns1111 .l7-pm-card__media {
    aspect-ratio: 3 / 4;
}

.l7-pm-card__image,
.l7-pm-card__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease;
}

.l7-pm-card__video {
    opacity: 0;
    z-index: 1;
}

.l7-pm-card.is-playing .l7-pm-card__video {
    opacity: 1;
}

.l7-pm-card:hover .l7-pm-card__image,
.l7-pm-card:hover .l7-pm-card__video {
    transform: scale(1.06);
}

/* ── Content (UNTER dem Bild) — Titel inline bold + Body grau fließend ── */

.l7-pm-card__content {
    padding: 0 2px;
    color: #111;
    font-family: var(--l7-font-primary);
}

.l7-pm-card__copy {
    font-family: var(--l7-font-primary);
    font-size: clamp(1.05rem, 1.4vw, 1.5rem);
    line-height: 1.35;
    letter-spacing: -0.01em;
    margin: 0 0 1.25em;
    color: #555;
    font-weight: 400;
    max-width: 62ch;
}

.l7-pm-card__title {
    font-weight: 700;
    color: #111;
    letter-spacing: -0.01em;
}

.l7-pm-card__body {
    color: #555;
}

/* ── Badges (Tags) — Overlay top-left, nur on hover sichtbar ── */

.l7-pm-card__tags {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: var(--l7-font-primary);
    pointer-events: none;
    max-width: calc(100% - 28px);
}

/* Portfolio-Tag — Skinn-Style:
   - Backdrop-Blur dämpft Bild-Hintergrund (immer guter Kontrast, auch über hellen Fotos)
   - Reveal via clip-path + transform (nicht opacity) — WAVE-konform
   - Tag ist immer voll deckend, nur visuell weg-maskiert bis Hover */
.l7-pm-card__tag {
    display: inline-block;
    align-self: flex-start;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: var(--l7-badge);
    font-weight: 500;
    line-height: var(--l7-badge-lh);
    padding: 0.4em 1em;
    border-radius: var(--l7-radius);
    border: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 1;
    transform: translateY(-6px);
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.l7-pm-card:hover .l7-pm-card__tag,
.l7-pm-card:focus-visible .l7-pm-card__tag {
    transform: translateY(0);
    clip-path: inset(0);
}

/* Stagger — Badges erscheinen nacheinander */
.l7-pm-card:hover .l7-pm-card__tag:nth-child(1) { transition-delay: 0.05s; }
.l7-pm-card:hover .l7-pm-card__tag:nth-child(2) { transition-delay: 0.13s; }
.l7-pm-card:hover .l7-pm-card__tag:nth-child(3) { transition-delay: 0.21s; }
.l7-pm-card:hover .l7-pm-card__tag:nth-child(4) { transition-delay: 0.29s; }
.l7-pm-card:hover .l7-pm-card__tag:nth-child(5) { transition-delay: 0.37s; }
.l7-pm-card:hover .l7-pm-card__tag:nth-child(6) { transition-delay: 0.45s; }

/* Reduced-Motion: keine Slide-Animation, Tag direkt sichtbar */
@media (prefers-reduced-motion: reduce) {
    .l7-pm-card__tag {
        clip-path: none;
        transform: none;
        transition: none;
    }
}

/* Titel-Hover: kein Color-Switch mehr */
.l7-pm-card:hover .l7-pm-card__title {
    color: #111;
}

/* ── Mobile: 1 Spalte, Content immer sichtbar ── */

@media (max-width: 768px) {
    .l7-pm-row,
    .l7-pm-row--columns211,
    .l7-pm-row--columns22,
    .l7-pm-row--columns121,
    .l7-pm-row--columns1111 {
        grid-template-columns: 1fr;
    }
    .l7-pm-card__media,
    .l7-pm-row--columns211 .l7-pm-card:first-child .l7-pm-card__media,
    .l7-pm-row--columns121 .l7-pm-card:nth-child(2) .l7-pm-card__media,
    .l7-pm-row--columns22 .l7-pm-card__media,
    .l7-pm-row--columns1111 .l7-pm-card__media {
        aspect-ratio: 4 / 3;
    }
    .l7-pm-card__tags {
        pointer-events: auto;
    }
    .l7-pm-card__tag {
        opacity: 1;
        transform: none;
        transition-delay: 0s !important;
    }
}

/* ─────────────────────────────────────────────
   Card Deck — Polaroid Stack (scroll-driven)
   ───────────────────────────────────────────── */

.l7-card-deck-section {
    background: var(--l7-bg-dark);
    color: var(--l7-text-light);
    padding-top: var(--l7-py-lg);
    padding-bottom: 0;
    /* No overflow:hidden — would break position:sticky on inner element */
}

.l7-card-deck-section__header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 var(--l7-gap-xl);
    align-items: start;
    margin-bottom: var(--l7-gap-xl);
}

.l7-card-deck-section__header .l7-section-label {
    padding-top: 0.5em;
}

.l7-card-deck-section__headline {
    font-size: var(--l7-h2);
    font-weight: var(--l7-h2-weight, 700);
    line-height: var(--l7-h2-lh, 1.1);
    letter-spacing: -0.02em;
    max-width: 28ch;
    margin: 0 0 var(--l7-gap-md);
}

.l7-card-deck-section__intro {
    font-size: var(--l7-body, 1rem);
    line-height: var(--l7-body-lh, 1.6);
    color: rgba(255, 255, 255, 0.55);
    max-width: 56ch;
    grid-column: 2;
    margin: 0;
}

/* Wrap = scrollable height; total cards × 80vh of scroll */
.l7-card-deck-wrap {
    position: relative;
    /* total scroll = (cards + 1) × 80vh — JS overrides if needed */
    height: calc((var(--total, 4) + 1) * 80vh);
}

.l7-card-deck-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--l7-gap-xl);
}

.l7-card-deck {
    position: relative;
    width: min(560px, 92vw);
    aspect-ratio: 1 / 1.05;
    perspective: 1200px;
}

.l7-card-deck__card {
    position: absolute;
    inset: 0;
    padding: clamp(1.75rem, 4vw, 3rem);
    background: #1d1d20;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    color: var(--l7-text-light);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55), 0 10px 30px -10px rgba(0, 0, 0, 0.4);
    /* Default = idle stack: rotated, behind, scale slightly down */
    transform:
        translate3d(0, 0, 0)
        rotate(var(--rot, 0deg))
        scale(calc(1 - var(--i, 0) * 0.02));
    transform-origin: center;
    z-index: var(--z, 1);
    /* Slower, more deliberate fly-off — opacity holds nearly until the end
       so the leaving card stays visibly in motion */
    transition:
        transform 1.4s cubic-bezier(0.32, 0.72, 0.24, 1),
        opacity 0.4s ease 1s;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Slight color variation per card so the stack underneath is visible */
.l7-card-deck__card:nth-child(1) { background: #1f1f22; }
.l7-card-deck__card:nth-child(2) { background: #25252a; }
.l7-card-deck__card:nth-child(3) { background: #2c2c32; }
.l7-card-deck__card:nth-child(4) { background: #34343b; }
.l7-card-deck__card:nth-child(5) { background: #3c3c44; }
.l7-card-deck__card:nth-child(6) { background: #44444d; }

/* Active card: front-and-center, no rotation */
.l7-card-deck__card[data-state="active"] {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    z-index: 100;
    box-shadow: 0 50px 100px -25px rgba(0, 0, 0, 0.7), 0 20px 40px -15px rgba(0, 0, 0, 0.5);
}

/* Passed cards: fly OVER everything off the top with strong rotation
   z-index 200 = above active (100), so the leaving card visibly passes over the new front */
.l7-card-deck__card[data-state="passed"] {
    transform:
        translate3d(-8%, -150%, 0)
        rotate(calc(var(--rot, 0deg) - 22deg))
        scale(0.92);
    opacity: 0;
    z-index: 200;
    pointer-events: none;
}

/* Card content */
.l7-card-deck__card-head {
    display: flex;
    align-items: baseline;
    gap: 0.4ch;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.55);
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    letter-spacing: 0.04em;
    font-weight: 500;
}

.l7-card-deck__card-num {
    color: var(--l7-text-light);
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-weight: 600;
}

.l7-card-deck__card-icon {
    width: clamp(80px, 12vw, 120px);
    height: clamp(80px, 12vw, 120px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.l7-card-deck__card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.95;
}

.l7-card-deck__card-title {
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
    max-width: 18ch;
    color: var(--l7-text-light);
}

.l7-card-deck__card-text {
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.62);
    margin: 0;
    max-width: 38ch;
}

/* Progress dots */
.l7-card-deck__progress {
    position: absolute;
    bottom: clamp(2rem, 5vh, 4rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 200;
}

.l7-card-deck__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    transition: background 0.3s ease, transform 0.3s ease;
}

.l7-card-deck__dot[data-active="true"] {
    background: var(--l7-accent, #ff5722);
    transform: scale(1.3);
}

/* Mobile: kein Stack — alle Cards untereinander, kein Scroll-Hijack */
@media (max-width: 768px) {
    .l7-card-deck-wrap {
        height: auto;
    }
    .l7-card-deck-sticky {
        position: relative;
        top: auto;
        height: auto;
        flex-direction: column;
        gap: var(--l7-gap-md);
        padding: var(--l7-gap-lg) 0;
    }
    .l7-card-deck {
        position: relative;
        width: 100%;
        aspect-ratio: auto;
        height: auto;
    }
    .l7-card-deck__card {
        position: relative;
        inset: auto;
        transform: none !important;
        opacity: 1 !important;
        margin-bottom: var(--l7-gap-md);
        min-height: 380px;
    }
    .l7-card-deck__progress { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .l7-card-deck__card {
        transition: none !important;
    }
}

/* ─────────────────────────────────────────────
   Momentum — Display Headline + Hero Stats
   ───────────────────────────────────────────── */

.l7-momentum {
    background: #fff;
    color: #111;
    padding-top: var(--l7-py-lg);
    padding-bottom: var(--l7-py-lg);
    font-family: var(--l7-font-primary);
}

.l7-momentum__label {
    color: #111 !important;
    opacity: 1 !important;
    margin-bottom: var(--l7-gap-md);
    display: block;
    text-transform: uppercase;
    font-size: var(--l7-badge);
    letter-spacing: 0.08em;
    font-weight: 500;
}

.l7-momentum__top {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
    margin-bottom: clamp(3rem, 6vw, 5.5rem);
}

.l7-momentum__headline {
    font-size: clamp(3rem, 8vw, 8rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.04em;
    margin: 0;
    color: #111;
    -webkit-font-smoothing: antialiased;
}

.l7-momentum__side {
    display: flex;
    flex-direction: column;
    gap: var(--l7-gap-md);
    padding-top: 0.4em;
}

.l7-momentum__tagline {
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #111;
    margin: 0;
}

.l7-momentum__intro {
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.6;
    color: #555;
    margin: 0;
    max-width: 38ch;
}

.l7-momentum__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: var(--l7-py-md);
}

.l7-momentum__stat {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    text-align: left;
}

.l7-momentum__stat-number {
    font-size: clamp(4rem, 10vw, 9rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.05em;
    color: #111;
    font-feature-settings: 'tnum';
    margin-bottom: 0.15em;
}

.l7-momentum__stat-label {
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #111;
    margin-bottom: 0.3em;
}

.l7-momentum__stat-text {
    font-size: clamp(0.9rem, 1vw, 0.95rem);
    line-height: 1.5;
    color: #666;
    margin: 0;
    max-width: 38ch;
}

/* Mobile */
@media (max-width: 768px) {
    .l7-momentum__top {
        grid-template-columns: 1fr;
        gap: var(--l7-gap-md);
    }
    .l7-momentum__stats {
        grid-template-columns: 1fr;
        gap: var(--l7-gap-md);
    }
}

/* ─────────────────────────────────────────────
   Differenzierung Growth — 1 Kreis, scroll-driven
   --progress (0..1) wird per JS gesetzt
   ───────────────────────────────────────────── */

/* ─── SHARED: Grow-Section Base (diff-grow + process-grow) ───
   Beide Sections nutzen dieselbe Scroll-Progress Engine (siehe main.js).
   Geteilte Properties hier; spezifische bleiben in den jeweiligen Blöcken. */
.l7-diff-grow,
.l7-process-grow {
    background: var(--l7-bg-dark, #0a0a0a);
    color: #fff;
    font-family: var(--l7-font-primary);
    --progress: 0;
}

.l7-diff-grow__sticky,
.l7-process-grow__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    padding: var(--l7-py-md) 0;
    box-sizing: border-box;
}
/* Inneres Padding kommt über .l7-container in __head und __indicator */

.l7-diff-grow__head,
.l7-process-grow__head {
    position: relative;
    z-index: 5;
    max-width: 32ch;
}

.l7-diff-grow__label,
.l7-process-grow__label {
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 1 !important;
    margin-bottom: var(--l7-gap-sm);
    display: block;
}

.l7-diff-grow__headline,
.l7-process-grow__headline {
    font-size: clamp(1.75rem, 3.4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
    color: #fff;
}

.l7-diff-grow__dot-mark,
.l7-process-grow__dot-mark {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    transition: background 0.3s ease, transform 0.3s ease;
}

.l7-diff-grow__dot-mark[data-active="true"],
.l7-process-grow__dot-mark[data-active="true"] {
    background: #fff;
    transform: scale(1.4);
}

@media (prefers-reduced-motion: reduce) {
    .l7-diff-grow__dot,
    .l7-diff-grow__noise,
    .l7-diff-grow__message,
    .l7-process-grow__dot,
    .l7-process-grow__message {
        transition: none !important;
    }
}

/* ─── DIFF-GROW spezifisch ─── */
.l7-diff-grow {
    --active-stage: 0;
}

.l7-diff-grow__wrap {
    position: relative;
    height: calc((var(--total, 3) + 1) * 100vh);
}

/* Marktrauschen — Punkt-Raster im Hintergrund, fadet beim Scrollen weg */
.l7-diff-grow__noise {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.22) 1.4px,
        transparent 1.8px
    );
    background-size: 38px 38px;
    background-position: center center;
    opacity: calc(1 - var(--progress) * 0.85);
    transition: opacity 0.05s linear;
    pointer-events: none;
    mask-image: radial-gradient(ellipse 80% 70% at center, #000 50%, transparent 95%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, #000 50%, transparent 95%);
}

/* Der eine Punkt — wird zum Argument */
.l7-diff-grow__dot {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 60vmin;
    height: 60vmin;
    margin-left: -30vmin;
    margin-top: -30vmin;
    border-radius: 50%;
    background: #fff;
    /* Scale 0.02 (~2% von 60vmin = ~10px) -> 1 (= 60vmin = ~480px bei 800h) */
    --scale: calc(0.02 + var(--progress) * 0.98);
    transform: scale(var(--scale));
    box-shadow: 0 0 calc(20px + var(--progress) * 80px) rgba(255, 255, 255, calc(0.1 + var(--progress) * 0.25));
    transition: transform 0.08s linear, box-shadow 0.08s linear;
    pointer-events: none;
    will-change: transform;
}

/* Stages — zentriert unten, einer sichtbar zur Zeit */
.l7-diff-grow__messages {
    position: relative;
    z-index: 5;
    display: grid;
    place-items: end center;
    align-self: end;
    width: 100%;
    text-align: center;
}

.l7-diff-grow__message {
    grid-area: 1 / 1;
    text-align: center;
    max-width: 38ch;
    color: #fff;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
    /* Lesbarkeit, falls Punkt dahinter ist */
    text-shadow: 0 1px 24px rgba(0, 0, 0, 0.5);
}

.l7-diff-grow__message[data-active="true"] {
    opacity: 1;
    transform: translateY(0);
}

.l7-diff-grow__multi {
    display: block;
    font-size: clamp(0.85rem, 1vw, 1rem);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.6em;
}

.l7-diff-grow__stage-title {
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 0.5em;
    color: #fff;
}

.l7-diff-grow__stage-text {
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 auto;
    max-width: 42ch;
}

/* Indicator unten */
.l7-diff-grow__indicator {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    gap: 12px;
    align-self: end;
    padding-top: var(--l7-gap-md);
}

/* Mobile: Sticky aus, alles linear, kein Punkt-Wachstum */
@media (max-width: 768px) {
    .l7-diff-grow__wrap {
        height: auto;
    }
    .l7-diff-grow__sticky {
        position: relative;
        top: auto;
        height: auto;
        padding: var(--l7-py-md) var(--l7-container-px);
        gap: var(--l7-py-md);
        display: block;
    }
    .l7-diff-grow__noise { display: none; }
    .l7-diff-grow__dot {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 16px;
        height: 16px;
        margin: 0 auto var(--l7-gap-lg);
        box-shadow: 0 0 24px rgba(255, 255, 255, 0.25);
        --scale: 1;
    }
    .l7-diff-grow__messages {
        place-items: start;
        gap: var(--l7-gap-lg);
        display: flex;
        flex-direction: column;
    }
    .l7-diff-grow__message {
        position: relative;
        grid-area: auto;
        text-align: left;
        opacity: 1;
        transform: none;
        max-width: 100%;
    }
    .l7-diff-grow__stage-text { text-align: left; }
    .l7-diff-grow__indicator { display: none; }
}

/* ─── PROCESS-GROW spezifisch ───
 * Mechanik wie diff-grow, mit dichteren Stages (0.8 vh pro Step) +
 * White-Reveal clip-path Outro für Section-Übergang. */

.l7-process-grow {
    position: relative;
    padding: 0;
}

/* White-Reveal: clip-path circle der vom Viewport-Center aus expandiert.
 * Auf dem sticky-Element, damit Center = Viewport-Center bleibt (nicht Section-Center). */
.l7-process-grow__sticky::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    pointer-events: none;
    z-index: 10;
    clip-path: circle(calc(max(0, var(--progress) - 0.85) * 1500vmax) at 50% 50%);
}

/* Transition-Headline — linksbündig auf der weißen Fläche, am Container ausgerichtet.
   z-index 20 = über dem clip-path Overlay. */
.l7-process-grow__transition {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    pointer-events: none;
    /* Padding über inneren .l7-container im Markup */
}

.l7-process-grow__transition-headline {
    color: #111;
    font-size: clamp(1.6rem, 4.5vw, 3.6rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-align: left;
    margin: 0;
    max-width: 26ch;
    /* Fadet rein bei progress 0.88 → 0.96. Kein Translate-Jitter mehr. */
    opacity: calc(max(0, var(--progress) - 0.88) * 8.33);
    transition: opacity 0.05s linear;
}

/* Wrap: 6 Stages * 0.8vh + 1.0 Outro für White-Flash-Transition */
.l7-process-grow__wrap {
    position: relative;
    height: calc((var(--total, 6) * 0.8 + 1.0) * 100vh);
}

/* Process-Grow Dot-Marks: vertikale Liste-Items statt horizontale Punkte */
.l7-process-grow .l7-process-grow__dot-mark {
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    transform: none !important;
    display: flex;
    gap: 0.85rem;
    align-items: baseline;
    color: rgba(255, 255, 255, 0.6);   /* inaktiv: 6.9:1 Kontrast — WCAG AA */
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    padding-left: 0.85rem;
    border-left: 1px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease, padding-left 0.3s ease;
    cursor: default;
}
.l7-process-grow .l7-process-grow__dot-mark[data-active="true"] {
    color: #fff !important;
    border-left-color: #fff;
    background: transparent !important;
    transform: none !important;
}
.l7-process-grow__indicator-name {
    font-weight: 500;
}

/* Sternenfeld-Particles: jeder Star hat eigene Position, Animation-Duration, Delay, Drift-Vektor */
.l7-process-grow__particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
/* Stars: 1.5x größer + Twinkle/Flicker-Animation parallel zum Drift —
   wirken aktiv, nicht statisch. Differenzierungs-Vibe. */
.l7-process-grow__particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
    animation:
        processGrowParticleFloat var(--dur, 14s) ease-in-out infinite,
        processGrowParticleTwinkle calc(var(--dur, 14s) * 0.18) ease-in-out infinite;
    animation-delay: var(--delay, 0s), calc(var(--delay, 0s) * 0.5);
    will-change: transform, opacity;
    transform: scale(1.6);
    transform-origin: center;
}
@keyframes processGrowParticleFloat {
    0%, 100% { transform: scale(1.6) translate(0, 0); }
    50%      { transform: scale(1.6) translate(var(--dx, 10px), var(--dy, -8px)); }
}
@keyframes processGrowParticleTwinkle {
    0%, 100% { opacity: 0.85; }
    35%      { opacity: 0.15; }
    65%      { opacity: 1;    }
}

/* Star-Pulse-Keyframes nicht mehr verwendet — Star bleibt scharf */

/* Akzent-Punkt: bleibt klein als Indikator (max ~30% Scale).
   Das große Übergangs-Visual macht der White-Flash (sticky::before). */
.l7-process-grow__star {
    position: absolute;
    top: 50%; left: 50%;
    width: 60vmin; height: 60vmin;
    margin-left: -30vmin; margin-top: -30vmin;
    border-radius: 50%;
    background: #fff;
    z-index: 2;
    pointer-events: none;
    /* Startet bei 0 (komplett unsichtbar), wächst LINEAR über alle 6 Steps bis ~0.6.
       Bei progress > 0.85 fadet er aus → White-Flash übernimmt die Transition. */
    --scale: calc(var(--progress) * 0.6);
    transform: scale(var(--scale));
    opacity: calc(1 - max(0, var(--progress) - 0.85) * 6.66);
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.15s linear;
    will-change: transform, opacity;
    /* Twinkle/Pulse — wirkt aktiv wie ein lebendiger Stern */
    animation: processGrowStarTwinkle 2.4s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}
@keyframes processGrowStarTwinkle {
    0%, 100% {
        opacity: 0.7;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 24px rgba(255, 255, 255, 0.65);
    }
}

/* Versteckter Original-Dot (gibt's noch im HTML, brauchen wir nicht mehr) */
.l7-process-grow__dot {
    display: none;
}

.l7-process-grow__subline {
    margin: var(--l7-gap-sm) 0 0;
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65);
    max-width: 48ch;
}

/* Messages-Container: links-mittig positioniert (statt zentriert über dem Star),
   damit's nicht mit der Headline kollidiert */
.l7-process-grow__messages {
    position: absolute;
    top: 50%;
    left: var(--l7-container-px);
    transform: translateY(-50%);
    z-index: 5;
    display: grid;
    width: min(36ch, 40vw);
    text-align: left;
    /* Fade-out während White-Flash */
    opacity: calc(1 - max(0, var(--progress) - 0.85) * 6.66);
    transition: opacity 0.05s linear;
}

.l7-process-grow__message {
    grid-area: 1 / 1;
    text-align: left;
    color: #fff;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
    text-shadow: 0 1px 24px rgba(0, 0, 0, 0.5);
}

.l7-process-grow__message[data-active="true"] {
    opacity: 1;
    transform: translateY(0);
}

.l7-process-grow__step-text {
    font-size: clamp(0.92rem, 1.05vw, 1.05rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    max-width: none;
    font-weight: 400;
}

/* ── Multivers-X Pattern: Pill oben links, Indicator-Liste unten links ── */

/* Header (Eyebrow + Headline) → oben links, Standard-Eyebrow-Style */
.l7-process-grow .l7-process-grow__head {
    position: absolute;
    top: var(--l7-py-md);
    left: 0; right: 0;
    z-index: 5;
    max-width: none;
    /* Padding kommt vom inneren .l7-container (margin:auto + container-px) */
    /* Fadet im White-Flash-Outro mit raus */
    opacity: calc(1 - max(0, var(--progress) - 0.85) * 6.66);
    transition: opacity 0.05s linear;
}

/* Label = Standard-Eyebrow (wie .l7-section-label auf Cases/Statement-Bar) — kein Pill mehr */

/* Headline links unter Eyebrow */
.l7-process-grow .l7-process-grow__headline {
    display: block;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: #fff;
    margin-top: 1rem;
    max-width: 22ch;
}
.l7-process-grow .l7-process-grow__subline {
    display: none; /* Subline weg, der zentrale Step-Inhalt erklärt's */
}

/* Indicator: vertikale Liste unten links mit durchgehender Linie + progress-Linie */
.l7-process-grow__indicator {
    position: absolute;
    bottom: var(--l7-py-md);
    left: 0; right: 0;
    z-index: 5;
    /* Padding kommt vom inneren .l7-container (margin:auto + container-px) */
    opacity: calc(1 - max(0, var(--progress) - 0.85) * 6.66);
    transition: opacity 0.05s linear;
}
.l7-process-grow__indicator > .l7-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
}
/* Linie sitzt an der inneren .l7-container Padding-Kante */
.l7-process-grow__indicator > .l7-container::before,
.l7-process-grow__indicator > .l7-container::after {
    content: '';
    position: absolute;
    left: var(--l7-container-px);
    top: 0;
    width: 1px;
    pointer-events: none;
}
/* Background-Linie: durchgehend grau */
.l7-process-grow__indicator > .l7-container::before {
    bottom: 0;
    background: rgba(255, 255, 255, 0.15);
}
/* Progress-Linie: weiß, wächst mit Scroll-Progress */
.l7-process-grow__indicator > .l7-container::after {
    height: calc(var(--progress, 0) * 100%);
    background: #fff;
    transition: height 0.15s linear;
}

/* ─────────────────────────────────────────────────────────────
   Mobile + Tablet (<1024px): KEIN Sticky-Scroll, KEIN Star/Particles,
   stattdessen lineare Card-Liste — Du-Form, dunkler Background bleibt.
   Tablet kommt sonst in den weirden Zwischen-Zustand wo Sticky
   "logisch falsch" wirkt (zu viel Platz, zu wenig Scroll-Distance).
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* Sticky-Scroll deaktivieren: wrap = natural height, sticky = static */
    .l7-process-grow {
        min-height: 0;
    }
    .l7-process-grow__wrap {
        height: auto;
        min-height: 0;
        padding: var(--l7-py-md, 3rem) 0;
    }
    .l7-process-grow__sticky {
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        padding: 0 !important;
        overflow: visible !important;
        grid-template-rows: none !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }
    .l7-process-grow,
    .l7-process-grow__wrap {
        overflow: visible !important;
    }
    .l7-process-grow__sticky::before {
        display: none !important;
    }

    /* Desktop-only Visuals raus */
    .l7-process-grow__particles,
    .l7-process-grow__star,
    .l7-process-grow__dot,
    .l7-process-grow__transition,
    .l7-process-grow__indicator {
        display: none !important;
    }

    /* Header: normaler Flow oben — höhere Specificity als Desktop-Regel */
    .l7-process-grow .l7-process-grow__head {
        position: static !important;
        max-width: 100% !important;
        padding: 0 0 var(--l7-gap-lg, 2rem) !important;
        opacity: 1 !important;
    }
    .l7-process-grow .l7-process-grow__headline {
        font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
        max-width: 100% !important;
    }
    .l7-process-grow .l7-process-grow__subline {
        max-width: 100% !important;
    }

    /* Messages-Container: vertikale Card-Liste — Desktop-absolute überschreiben */
    .l7-process-grow .l7-process-grow__messages {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column;
        gap: var(--l7-gap-md, 1.25rem);
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: left;
        place-items: stretch;
    }
    .l7-process-grow__message {
        position: static;
        display: flex;
        flex-direction: column;
        grid-area: auto;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto;
        max-width: 100%;
        text-align: left;
        text-shadow: none;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        padding: 1.25rem 1.1rem;
        transition: none;
    }
    /* Step-Nummer (data-num="01"...) — ganz oben */
    .l7-process-grow__message::before {
        content: attr(data-num);
        order: 1;
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.18em;
        color: rgba(255, 255, 255, 0.55);
        margin-bottom: 0.4rem;
    }
    /* Step-Titel (data-title) — h3-Ersatz */
    .l7-process-grow__message::after {
        content: attr(data-title);
        order: 2;
        font-size: clamp(1.15rem, 5vw, 1.4rem);
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -0.015em;
        color: #fff;
        margin: 0 0 0.5rem;
    }
    .l7-process-grow__step-text {
        order: 3;
        font-size: 1rem;
        line-height: 1.5;
        max-width: 100%;
        margin: 0;
        color: rgba(255, 255, 255, 0.82);
    }
}


/* ============================================================
   Plugin Showcase — Code-Visual rechts
   ============================================================ */
.l7-plugin-showcase {
    background: var(--l7-bg-dark);
    color: var(--l7-text-light, #fff);
    padding-top: var(--l7-py-md);
    padding-bottom: var(--l7-py-md);
}
/* Plugin-Showcase Eyebrow: nutzt globales .l7-section-label Styling (color inherit + opacity) */
.l7-plugin-showcase__headline {
    font-size: var(--l7-h2);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0 0 var(--l7-gap-lg);
    max-width: 28ch;
    font-weight: 700;
}
.l7-plugin-showcase__headline em { font-style: italic; font-weight: 400; opacity: .85; }
.l7-plugin-showcase__grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--l7-gap-xl);
    align-items: stretch;
}
@media (max-width: 900px) { .l7-plugin-showcase__grid { grid-template-columns: 1fr; gap: var(--l7-gap-lg); } }
.l7-plugin-showcase__left {
    display: flex; flex-direction: column; justify-content: center; gap: 1.25rem;
}
/* Plugin-Showcase Badge — matched Result-Tile Pill auf Dark-Tile (weiß + dark, uppercase, rounded) */
.l7-plugin-showcase__badge {
    display: inline-block;
    align-self: flex-start;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    background: #fff;
    color: #0F0F0F;
}
.l7-plugin-showcase__title {
    font-size: var(--l7-h3); font-weight: 700;
    letter-spacing: -0.025em; line-height: 1.15;
    margin: 0;
}
.l7-plugin-showcase__text {
    color: rgba(255,255,255,.72); margin: 0;
    line-height: var(--l7-body-lh, 1.55);
}
.l7-plugin-showcase__link {
    color: var(--l7-text-light, #fff);
    border-bottom: 1px solid rgba(255,255,255,.2);
    align-self: flex-start;
    padding-bottom: 4px;
    text-decoration: none;
    transition: color .2s, border-color .2s;
}
.l7-plugin-showcase__link:hover { color: var(--l7-accent, #ff5e3a); border-color: var(--l7-accent, #ff5e3a); }
.l7-plugin-showcase__visual {
    background: #0F0F0F;
    border: none;
    border-radius: var(--l7-radius, 6px);
    padding: 2.75rem 1.75rem 1.75rem;
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: rgba(255,255,255,.78); font-size: .82rem; line-height: 1.6;
    position: relative;
}
.l7-plugin-showcase__visual::before {
    content: ''; position: absolute; top: 14px; left: 14px;
    width: 12px; height: 12px; border-radius: 50%;
    background: #ff5f57;
    box-shadow: 18px 0 #febc2e, 36px 0 #28c840;
}
.l7-plugin-showcase__visual pre { margin: 0; white-space: pre-wrap; }
.l7-plugin-showcase__visual code { font-family: inherit; font-size: inherit; color: inherit; }

/* ============================================================
   Solve List — H2 links / Lead + Bullets + CTA rechts
   ============================================================ */
.l7-solve-list {
    padding-top: var(--l7-py-md);
    padding-bottom: var(--l7-py-md);
}
.l7-solve-list__grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--l7-gap-xl);
    align-items: start;
    margin-top: 1rem;
}
@media (max-width: 900px) {
    .l7-solve-list__grid { grid-template-columns: 1fr; gap: var(--l7-gap-lg); }
}
.l7-solve-list__title {
    font-size: var(--l7-h2);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    max-width: 14ch;
    margin: 0;
    color: var(--l7-text-light, #fff);
}
.l7-solve-list__title em { font-style: italic; font-weight: 400; opacity: .85; }
.l7-solve-list__right { display: flex; flex-direction: column; }
.l7-solve-list__lead {
    font-size: var(--l7-body);
    line-height: var(--l7-body-lh, 1.5);
    color: rgba(255,255,255,.78);
    margin: 0; max-width: 60ch;
}
.l7-solve-list__lead strong { color: var(--l7-text-light, #fff); font-weight: 700; }
.l7-solve-list__items {
    list-style: none; padding: 0;
    margin: var(--l7-gap-lg) 0 0;
    display: flex; flex-direction: column;
    max-width: 65ch;
}
.l7-solve-list__item {
    display: grid; grid-template-columns: auto 1fr;
    gap: 1.25rem; align-items: start;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255,255,255,.1);
}
.l7-solve-list__item:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }

/* Pfeil links statt Checkmark — kein Hover-Effekt */
.l7-solve-list__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    background: var(--l7-cta-color);
    color: #fff;
    margin-top: .25rem;
    flex-shrink: 0;
}
.l7-solve-list__arrow .l7-pixel-arrow {
    width: 1.1em;
    height: 0.75em;
}
/* Check als oranges Pixel-Badge — leichter Tint Background + Pixel-Check (matched Pixel-Arrow-Style) */
.l7-solve-list__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 4px;
    background: rgba(255, 94, 58, .12);
    color: var(--l7-accent, #ff5e3a);
    flex-shrink: 0;
    margin-top: .25rem;
}
.l7-solve-list__check .l7-pixel-check {
    width: 1em;
    height: 0.75em;
    image-rendering: pixelated;
    shape-rendering: crispEdges;
}

/* ── Globale Highlight-Mark für Headlines ─────────────────────────────
   Nutzung: <span class="l7-hl-mark">SEO und GEO</span> in Hero-Title etc.
   → Wort bleibt in Text-Color, bekommt orange Underline
   Konsistenz: matched die Plugin-Showcase Badge-Akzentfarbe */
.l7-hl-mark {
    text-decoration: underline;
    text-decoration-color: var(--l7-accent, #ff5e3a);
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.12em;
    text-decoration-skip-ink: none;
}

/* Italic in Headlines (wenn em im H1/H2 vorkommt) */
.l7-hero__title em,
.l7-statement-bar__title em,
.l7-process-tiles__headline em,
.l7-solve-list__title em,
.l7-portfolio-mosaic__headline em {
    font-style: italic;
    font-weight: 700;
    opacity: 0.9;
}
.l7-solve-list__item-title {
    font-size: 1.15rem; font-weight: 700;
    letter-spacing: -0.012em;
    color: var(--l7-text-light, #fff);
    margin-bottom: .4rem;
}
.l7-solve-list__item-text {
    font-size: .95rem;
    color: var(--l7-text-light, #fff);
    line-height: 1.5; max-width: 60ch;
}
.l7-solve-list__cta {
    display: flex; flex-direction: column;
    gap: .65rem; align-items: flex-start;
    padding-top: var(--l7-py-sm);
}
.l7-solve-list__cta-sub {
    font-size: .82rem; color: rgba(255,255,255,.5);
    letter-spacing: .04em; margin: 0;
}

/* ============================================================
   Highlights Tiles — 3 farbige Kacheln
   ============================================================ */
.l7-highlights-tiles {
    padding-top: var(--l7-py-md);
    padding-bottom: var(--l7-py-md);
    background: var(--l7-bg-dark);
    color: var(--l7-text-light);
}
/* Section-Label nutzt automatisch Standard-Styling (.l7-section-label aus base.css)
   color: inherit (= text-light durch Section), opacity 0.45 — wie Home */
.l7-highlights-tiles__headline {
    font-size: var(--l7-h2);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 1rem 0 var(--l7-gap-lg);
    max-width: 28ch;
    color: var(--l7-text-light, #fff);
}
.l7-highlights-tiles__headline em { font-style: italic; font-weight: 400; opacity: .85; }
.l7-highlights-tiles__grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--l7-gap-md);
}
@media (max-width: 900px) { .l7-highlights-tiles__grid { grid-template-columns: 1fr; } }
.l7-tile {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    padding: 2rem;
    display: flex; flex-direction: column;
    justify-content: space-between;
    position: relative; overflow: hidden;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.l7-tile:hover { transform: translateY(-6px); }
.l7-tile--purple { background: var(--l7-cta-color); color: #fff; }
.l7-tile--light  { background: #E8E4DA; color: #111; }
.l7-tile--dark   { background: #0F0F0F; color: #fff; border: 1px solid rgba(255,255,255,.08); }
.l7-tile__top {
    display: flex; align-items: flex-start; justify-content: space-between;
    font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
    font-weight: 500; opacity: .7;
}
.l7-tile__dot {
    width: .6rem; height: .6rem; border-radius: 50%;
    background: currentColor; opacity: .7;
}
.l7-tile__big {
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 700; letter-spacing: -0.04em;
    line-height: .95;
    margin-top: auto; margin-bottom: 1rem;
}
.l7-tile__label {
    font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
    font-weight: 500; opacity: .75;
}

/* ───────────────── Process Tiles (5-Step Grid) ───────────────── */
.l7-process-tiles {
    background: var(--l7-bg-light, #fff);
    color: var(--l7-text-default, #1D1D1D);
}
.l7-process-tiles__header {
    max-width: 60ch;
    margin-bottom: var(--l7-space-xl, 3rem);
}
.l7-process-tiles__eyebrow {
    /* Erbt Styling von .l7-section-label (font, color, opacity).
       Nur display anpassen — inline-block für Header-Layout. */
    display: inline-block;
}
.l7-process-tiles__title {
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 700;
    margin: 0 0 var(--l7-space-md, 1rem);
}
.l7-process-tiles__lead {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--l7-text-muted, rgba(0,0,0,.65));
    margin: 0;
}
.l7-process-tiles__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--l7-section-px, 10px);
    margin-top: var(--l7-py-sm, 2rem);
}
@media (max-width: 1100px) { .l7-process-tiles__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .l7-process-tiles__grid { grid-template-columns: 1fr; } }

.l7-process-tiles__box {
    position: relative;
    background: var(--l7-bg-alt, #f4f4f4);
    border: none;
    border-radius: var(--l7-radius, 6px);
    padding: 1.75rem 1.75rem 3.5rem;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    overflow: hidden;
    transition: background 0.2s ease, transform 0.3s cubic-bezier(0.2,0.7,0.2,1);
}
.l7-process-tiles__box:hover {
    background: #ececec;
    transform: translateY(-6px);
}

/* Big-Background-Number als Design-Element (data-num="01" etc.) */
.l7-process-tiles__box::before {
    content: attr(data-num);
    position: absolute;
    bottom: -0.18em;
    right: -0.05em;
    font-size: 8rem;
    font-weight: 800;
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: rgba(0, 0, 0, 0.05);
    pointer-events: none;
    user-select: none;
    font-variant-numeric: tabular-nums;
}

/* Phase als kleiner schwarzer Pill (matched Result-Tiles Pattern) */
.l7-process-tiles__phase {
    display: inline-block;
    align-self: flex-start;
    background: #0F0F0F;
    color: #fff;
    padding: 0.32rem 0.75rem;
    border-radius: 999px;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.l7-process-tiles__box-title {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.018em;
    line-height: 1.25;
    margin: 0 0 0.65rem 0;
    color: var(--l7-text-default, #1D1D1D);
    position: relative;
    z-index: 1;
}
.l7-process-tiles__box-text {
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.65);
    margin: 0;
    position: relative;
    z-index: 1;
}

/* Pixel-Arrow im CTA-Roten Pill bottom-right — gleiches Pattern wie Result-Tiles */
.l7-process-tiles__arrow {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    background: var(--l7-cta-color);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.l7-process-tiles__arrow .l7-pixel-arrow {
    width: 1em;
    height: 0.7em;
}

/* Letztes Tile = "Ziel erreicht" — orange theme (CTA-Color) */
.l7-process-tiles__box--final {
    background: var(--l7-cta-color);
    color: #fff;
}
.l7-process-tiles__box--final:hover {
    background: var(--l7-cta-color);
    filter: brightness(1.06);
}
.l7-process-tiles__box--final::before { color: rgba(255, 255, 255, 0.12); }
.l7-process-tiles__box--final .l7-process-tiles__box-title { color: #fff; }
.l7-process-tiles__box--final .l7-process-tiles__box-text  { color: rgba(255, 255, 255, 0.85); }
.l7-process-tiles__box--final .l7-process-tiles__phase     { background: #fff; color: #0F0F0F; }
.l7-process-tiles__box--final .l7-process-tiles__arrow     { background: #fff; color: var(--l7-cta-color); }

/* ============================================================
   Result Tiles — 3-Card Infografik-Grid (OnMyAds-Pattern)
   ============================================================ */
.l7-result-tiles {
    background: var(--l7-bg-dark);
    color: var(--l7-text-light);
    padding-top: var(--l7-py-md);
    padding-bottom: var(--l7-py-md);
}
.l7-result-tiles__headline {
    font-size: var(--l7-h2);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 0 var(--l7-gap-lg);
    max-width: 28ch;
    color: var(--l7-text-light, #fff);
}
.l7-result-tiles__headline em {
    font-style: italic;
    font-weight: 400;
    opacity: 0.85;
}
.l7-result-tiles__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--l7-section-px, 10px);
}
@media (max-width: 1100px) { .l7-result-tiles__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .l7-result-tiles__grid { grid-template-columns: 1fr; } }

/* ── Tile Base — quadratischer Look mit Theme-Radius ─────────────── */
.l7-result-tile {
    position: relative;
    border-radius: var(--l7-radius, 6px);
    padding: 1.75rem;
    aspect-ratio: 1 / 1;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.2,0.7,0.2,1);
}
.l7-result-tile:hover { transform: translateY(-6px); }
@media (max-width: 700px) {
    .l7-result-tile { aspect-ratio: auto; min-height: 280px; }
}

/* Theme-Varianten — Flieder als Komplement zum CTA-Rot, warm-violett (nicht kühl) */
.l7-result-tile--light  { background: #E8DEEC; color: #111; }
.l7-result-tile--orange { background: var(--l7-cta-color); color: #fff; }
.l7-result-tile--dark   { background: #0F0F0F; color: #fff; border: 1px solid rgba(255,255,255,.06); }

/* ── Header ──────────────────────────────── */
.l7-result-tile__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    /* Min-height damit alle Tiles gleichen Abstand bis zur Bubble haben
       (Brand-Text + Pill nehmen sonst unterschiedlich Platz) */
    min-height: 2.6rem;
}
.l7-result-tile__brand {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.l7-result-tile__pill {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    /* Uniform: tiefdunkler Pill, heller Text — gleiches Pattern auf allen Tiles */
    background: #0F0F0F;
    color: #fff;
}
/* Light/Flieder-Tile: violetter Pill, passt zum Lavendel-Background */
.l7-result-tile--light .l7-result-tile__pill {
    background: #7B2CBF;
    color: #fff;
}
/* Auf dem dunklen Tile: invertieren damit der Pill sich abhebt */
.l7-result-tile--dark .l7-result-tile__pill {
    background: #fff;
    color: #0F0F0F;
}

/* ── Visual Area ─────────────────────────── */
.l7-result-tile__visual {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem;
    padding: 1.25rem 0 0.5rem;
}

/* Big-Stat-Bubble (wie + $72.000 im Screen) */
.l7-result-tile__bubble {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: flex-start;
    padding: 0.85rem 1.15rem;
    border-radius: 14px;
    line-height: 1;
    backdrop-filter: blur(8px);
}
.l7-result-tile--light  .l7-result-tile__bubble { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.l7-result-tile--orange .l7-result-tile__bubble { background: rgba(0,0,0,0.85); color: #fff; }
.l7-result-tile--dark   .l7-result-tile__bubble { background: rgba(255,255,255,0.06); }

.l7-result-tile__big {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1;
}
.l7-result-tile--orange .l7-result-tile__big { color: #fff; }
.l7-result-tile__sub {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    opacity: 0.6;
}

/* ── Bar-Chart (CSS only) ─────────────────── */
.l7-result-tile__bars {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    height: 70px;
    margin-top: auto;
}
.l7-result-tile__bars span {
    flex: 1;
    height: var(--h, 50%);
    border-radius: 4px 4px 0 0;
    background: rgba(0,0,0,0.15);
    transition: height 0.4s cubic-bezier(0.2,0.7,0.2,1);
}
.l7-result-tile--light .l7-result-tile__bars span:nth-child(4)  { background: #111; }
.l7-result-tile--light .l7-result-tile__bars span:nth-child(3)  { background: rgba(0,0,0,0.55); }
.l7-result-tile--orange .l7-result-tile__bars span               { background: rgba(255,255,255,0.25); }
.l7-result-tile--orange .l7-result-tile__bars span:nth-child(4)  { background: rgba(0,0,0,0.85); }
.l7-result-tile--dark .l7-result-tile__bars span                 { background: rgba(255,255,255,0.18); }
.l7-result-tile--dark .l7-result-tile__bars span:nth-child(4)    { background: var(--l7-cta-color); }

/* ── Description ─────────────────────────── */
.l7-result-tile__desc {
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0;
    opacity: 0.7;
    max-width: 32ch;
}
.l7-result-tile--orange .l7-result-tile__desc { opacity: 0.85; }

/* ── Arrow bottom-right ──────────────────── */
.l7-result-tile__arrow {
    position: absolute;
    bottom: 1.25rem;
    right: 1.25rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease;
    text-decoration: none;
}
.l7-result-tile--light  .l7-result-tile__arrow { background: #111; color: #fff; }
.l7-result-tile--orange .l7-result-tile__arrow { background: #fff; color: #111; }
.l7-result-tile--dark   .l7-result-tile__arrow { background: var(--l7-cta-color); color: #fff; }
.l7-result-tile__arrow .l7-pixel-arrow {
    width: 1.1em;
    height: 0.75em;
    transition: transform 0.25s cubic-bezier(0.2,0.7,0.2,1);
}
/* Hover: Pfeil dreht 45° nach oben (statt translate) */
.l7-result-tile__arrow:hover .l7-pixel-arrow,
.l7-result-tile:hover .l7-result-tile__arrow .l7-pixel-arrow {
    transform: rotate(-45deg);
}

/* ── Avatar-Stack + Big-Stat Pill (OnMyAds GoMining-Pattern) ─────
   Nutzung: <div class="l7-result-tile__bubble l7-result-tile__bubble--row">
              <div class="l7-result-tile__avatars">
                <span style="background:#E63946">L</span>
                <span style="background:#FF6B35">7</span>
                <span style="background:#1D1D1D">B</span>
              </div>
              <div class="l7-result-tile__bubble-text">
                <span class="l7-result-tile__sub">TRAFFIC GROWTH</span>
                <span class="l7-result-tile__big">+312%</span>
              </div>
            </div> */
.l7-result-tile__bubble--row {
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
    padding: 0.55rem 1rem 0.55rem 0.55rem;
    border-radius: 999px;
}
.l7-result-tile__avatars {
    display: inline-flex;
    flex-shrink: 0;
}
.l7-result-tile__avatars > span {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0;
    border: 2px solid #fff;
    margin-left: -0.7rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.l7-result-tile__avatars > span:first-child { margin-left: 0; }
.l7-result-tile--orange .l7-result-tile__avatars > span,
.l7-result-tile--dark   .l7-result-tile__avatars > span {
    border-color: rgba(0,0,0,0.4);
}
.l7-result-tile__bubble-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
}
.l7-result-tile__bubble-text .l7-result-tile__sub {
    margin: 0 0 0.15rem 0;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.l7-result-tile__bubble-text .l7-result-tile__big {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* position:relative auf .l7-section bleibt — wird von absoluten Kindelementen
   (Hero-Frame, CTA-Banner-Backgrounds etc.) benötigt. */
.l7-section { position: relative; }
/* (Section-Counter "01" "02" entfernt — opacity 0.18 verstößt gegen WCAG-Kontrast
   und kostet ~28 WAVE-Errors site-weit für rein dekorativen Effekt.) */

/* ============================================================
   Subtle Noise — leichter Grain auf bg-dark Sections für Tiefe
   ============================================================ */
.l7-section.l7-section--dark::after,
.l7-process-grow .l7-process-grow__sticky::after,
.l7-cta-banner::after,
.l7-result-tiles::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
    background-size: 240px 240px;
    opacity: 0.06;
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 0;
}
/* Sektionen mit Inhalt müssen über dem Noise liegen */
.l7-section.l7-section--dark > *,
.l7-cta-banner > *,
.l7-result-tiles > * {
    position: relative;
    z-index: 1;
}

/* ============================================================
   Hero Tags — Pill-Liste unter CTA (Alphamark-Pattern)
   ============================================================ */
.l7-hero__tags {
    margin-top: var(--l7-gap-lg);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.l7-hero__tags-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.01em;
}
.l7-hero__tags-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.6rem;
}
/* Identisches Pattern wie .l7-footer__badge */
.l7-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.55em 1.2em;
    background: rgba(255, 255, 255, 0.07);
    border: none;
    border-radius: 100px;
    color: var(--l7-text-light);
    text-decoration: none;
    font-size: var(--l7-small, 13px);
    opacity: 0.7;
    transition: opacity 0.2s, background 0.2s;
    white-space: nowrap;
}
a.l7-hero__tag:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.12);
}

/* ============================================================
   Process-Tiles — Minimal Variante (dezent, editorial)
   Aktivierbar durch zusätzliche Klasse: l7-process-tiles--minimal
   ============================================================ */
.l7-process-tiles--minimal .l7-process-tiles__box {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 1.5rem 1.5rem 3rem;
}
.l7-process-tiles--minimal .l7-process-tiles__box:hover {
    background: transparent;
    border-color: rgba(0, 0, 0, 0.18);
    transform: translateY(-3px);
}
/* Big-Number noch dezenter */
.l7-process-tiles--minimal .l7-process-tiles__box::before {
    color: rgba(0, 0, 0, 0.025);
    font-size: 6.5rem;
}
/* Phase: kein Pill mehr, sondern reiner Text mit Mini-Dot davor */
.l7-process-tiles--minimal .l7-process-tiles__phase {
    background: transparent;
    color: rgba(0, 0, 0, 0.55);
    padding: 0;
    border-radius: 0;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    margin-bottom: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.l7-process-tiles--minimal .l7-process-tiles__phase::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--l7-cta-color);
}
/* Arrow muted grau statt CTA-rot */
.l7-process-tiles--minimal .l7-process-tiles__arrow {
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.5);
    width: 1.7rem;
    height: 1.7rem;
}
/* Letztes Tile bleibt neutral — kein orange CTA-Theme */
.l7-process-tiles--minimal .l7-process-tiles__box--final {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.18);
    color: var(--l7-text-default, #1D1D1D);
}
.l7-process-tiles--minimal .l7-process-tiles__box--final:hover {
    background: transparent;
    filter: none;
    border-color: rgba(0, 0, 0, 0.32);
}
.l7-process-tiles--minimal .l7-process-tiles__box--final .l7-process-tiles__box-title { color: var(--l7-text-default); }
.l7-process-tiles--minimal .l7-process-tiles__box--final .l7-process-tiles__box-text  { color: rgba(0, 0, 0, 0.65); }
.l7-process-tiles--minimal .l7-process-tiles__box--final .l7-process-tiles__phase { color: rgba(0, 0, 0, 0.55); }
.l7-process-tiles--minimal .l7-process-tiles__box--final .l7-process-tiles__phase::before { background: var(--l7-cta-color); }
.l7-process-tiles--minimal .l7-process-tiles__box--final .l7-process-tiles__arrow {
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.5);
}
.l7-process-tiles--minimal .l7-process-tiles__box--final::before { color: rgba(0, 0, 0, 0.025); }

/* ============================================================
   Process-Tiles — Timeline Variante (horizontal, dot-connected)
   Aktivierbar: l7-process-tiles--timeline
   ============================================================ */
.l7-process-tiles--timeline .l7-process-tiles__grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin-top: var(--l7-py-md, 3rem);
    position: relative;
}
@media (max-width: 900px) {
    .l7-process-tiles--timeline .l7-process-tiles__grid { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
}
@media (max-width: 520px) {
    .l7-process-tiles--timeline .l7-process-tiles__grid { grid-template-columns: 1fr; row-gap: 2rem; }
}

/* Box → komplett flach, nur typografie */
.l7-process-tiles--timeline .l7-process-tiles__box {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 2.5rem 1rem 0 1rem !important;
    min-height: 0;
    overflow: visible;
    align-items: flex-start;
    transition: none;
    transform: none !important;
    position: relative;
    text-align: left;
}

/* Big-Number weg */
.l7-process-tiles--timeline .l7-process-tiles__box::before {
    content: none;
}

/* DOT + verbindende Linie via ::after */
.l7-process-tiles--timeline .l7-process-tiles__box::after {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--l7-cta-color);
    z-index: 2;
    box-shadow: 0 0 0 4px var(--l7-bg-light, #fff);
}

/* Horizontale Verbindungs-Linie hinter den Dots */
.l7-process-tiles--timeline .l7-process-tiles__grid::before {
    content: "";
    position: absolute;
    top: calc(0.5rem + 6px);
    left: calc(1rem + 7px);
    right: calc(1rem + 7px);
    height: 2px;
    background: rgba(0, 0, 0, 0.08);
    z-index: 1;
}
@media (max-width: 900px) {
    .l7-process-tiles--timeline .l7-process-tiles__grid::before { display: none; }
}

/* Phase: kleines uppercase Label */
.l7-process-tiles--timeline .l7-process-tiles__phase {
    background: transparent !important;
    color: rgba(0, 0, 0, 0.5) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.18em !important;
    margin: 0 0 0.5rem 0 !important;
    text-transform: uppercase;
    display: block;
}
.l7-process-tiles--timeline .l7-process-tiles__phase::before { content: none; }

.l7-process-tiles--timeline .l7-process-tiles__box-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.3;
    margin: 0 0 0.5rem 0 !important;
    color: var(--l7-text-default, #1D1D1D);
}

.l7-process-tiles--timeline .l7-process-tiles__box-text {
    font-size: 0.85rem !important;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.6) !important;
    margin: 0 !important;
    max-width: 26ch;
}

/* Arrow weg in Timeline */
.l7-process-tiles--timeline .l7-process-tiles__arrow { display: none !important; }

/* Letztes Tile = ZIEL — Dot in Schwarz, fettere Linie davor */
.l7-process-tiles--timeline .l7-process-tiles__box--final::after {
    background: #0F0F0F;
    width: 18px;
    height: 18px;
    top: calc(0.5rem - 2px);
    left: calc(1rem - 2px);
}

/* ============================================================
   Process-Tiles — Timeline-Glow (dark, CTA-line, dot-numbers,
   Hover zeigt Tooltip-Card oben — Multivers/Burnett-Style)
   Aktivierbar: l7-process-tiles--timeline-glow
   ============================================================ */
.l7-process-tiles--timeline-glow {
    background: var(--l7-bg-dark) !important;
    color: var(--l7-text-light);
    overflow: hidden;
    padding-top: var(--l7-py-md);
    padding-bottom: var(--l7-py-lg);
}
.l7-process-tiles--timeline-glow .l7-process-tiles__header {
    color: var(--l7-text-light);
}
.l7-process-tiles--timeline-glow .l7-process-tiles__eyebrow,
.l7-process-tiles--timeline-glow .l7-process-tiles__title,
.l7-process-tiles--timeline-glow .l7-process-tiles__lead {
    color: var(--l7-text-light) !important;
}
.l7-process-tiles--timeline-glow .l7-process-tiles__lead {
    opacity: 0.7;
}

/* Grid: 5 Spalten, mit edge-to-edge CTA-Linie hinter den Dots */
.l7-process-tiles--timeline-glow .l7-process-tiles__grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin-top: 5rem;
    padding-top: 4rem;
    position: relative;
}
.l7-process-tiles--timeline-glow .l7-process-tiles__grid::before {
    content: "";
    position: absolute;
    top: calc(4rem + 1rem);
    left: -100vw;
    right: -100vw;
    height: 1px;
    background: var(--l7-cta-color);
    z-index: 1;
    opacity: 0.85;
}

/* Box wird nur Wrapper für Dot + Name + Tooltip */
.l7-process-tiles--timeline-glow .l7-process-tiles__box {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-height: 0;
    overflow: visible;
    align-items: center;
    text-align: center;
    transition: none;
    transform: none !important;
    position: relative;
}
.l7-process-tiles--timeline-glow .l7-process-tiles__box::before { content: none; }
.l7-process-tiles--timeline-glow .l7-process-tiles__arrow { display: none !important; }

/* Dot mit Number — Pixel-Style runder Mark */
.l7-process-tiles--timeline-glow .l7-process-tiles__box::after {
    content: attr(data-num);
    position: absolute;
    top: -4rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--l7-cta-color);
    color: #fff;
    font-family: var(--l7-font-nav, monospace);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 2.2rem;
    text-align: center;
    z-index: 3;
    box-shadow: 0 0 0 6px var(--l7-bg-dark);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    font-variant-numeric: tabular-nums;
}
.l7-process-tiles--timeline-glow .l7-process-tiles__box:hover::after {
    background: #fff;
    color: var(--l7-bg-dark);
    transform: translateX(-50%) scale(1.1);
}

/* Phase = Step-Name oberhalb des Dots, CTA-rot underlined wie im Screen */
.l7-process-tiles--timeline-glow .l7-process-tiles__phase {
    position: absolute;
    top: -7rem;
    left: 50%;
    transform: translateX(-50%);
    background: transparent !important;
    color: var(--l7-cta-color) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    margin: 0 !important;
    text-transform: none;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    z-index: 2;
}
.l7-process-tiles--timeline-glow .l7-process-tiles__phase::before { content: none; }

/* Title + Text → versteckt, Tooltip-Card erscheint auf Hover oben */
.l7-process-tiles--timeline-glow .l7-process-tiles__box-title,
.l7-process-tiles--timeline-glow .l7-process-tiles__box-text {
    position: absolute;
    bottom: calc(100% + 5rem);
    left: 50%;
    width: 18rem;
    max-width: 80vw;
    padding: 0 !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 0.85rem !important;
    line-height: 1.45;
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    z-index: 4;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    border-radius: var(--l7-radius, 6px);
    text-align: left;
}
.l7-process-tiles--timeline-glow .l7-process-tiles__box-title {
    padding: 0.85rem 1rem 0.25rem !important;
    font-weight: 600 !important;
    color: var(--l7-cta-color) !important;
    font-size: 0.95rem !important;
    bottom: calc(100% + 2.5rem);
}
.l7-process-tiles--timeline-glow .l7-process-tiles__box-text {
    padding: 0 1rem 0.85rem !important;
    color: rgba(255, 255, 255, 0.75) !important;
}
.l7-process-tiles--timeline-glow .l7-process-tiles__box:hover .l7-process-tiles__box-title,
.l7-process-tiles--timeline-glow .l7-process-tiles__box:hover .l7-process-tiles__box-text {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* Title visible → text auch noch tiefer */
.l7-process-tiles--timeline-glow .l7-process-tiles__box:hover .l7-process-tiles__box-text {
    bottom: calc(100% + 1rem);
}

/* Mobile: Stacked statt Timeline */
@media (max-width: 900px) {
    .l7-process-tiles--timeline-glow .l7-process-tiles__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-top: 2rem;
        padding-top: 0;
    }
    .l7-process-tiles--timeline-glow .l7-process-tiles__grid::before { display: none; }
    .l7-process-tiles--timeline-glow .l7-process-tiles__box {
        padding: 1.25rem 1.25rem 1.25rem 4rem !important;
        text-align: left;
        align-items: flex-start;
        background: rgba(255, 255, 255, 0.04) !important;
        border-radius: var(--l7-radius, 6px) !important;
    }
    .l7-process-tiles--timeline-glow .l7-process-tiles__box::after {
        position: absolute;
        top: 1.25rem;
        left: 1rem;
        transform: none;
        box-shadow: none;
    }
    .l7-process-tiles--timeline-glow .l7-process-tiles__box:hover::after { transform: none; }
    .l7-process-tiles--timeline-glow .l7-process-tiles__phase {
        position: static;
        transform: none;
        margin-bottom: 0.4rem !important;
        font-size: 0.7rem !important;
        text-decoration: none;
    }
    .l7-process-tiles--timeline-glow .l7-process-tiles__box-title,
    .l7-process-tiles--timeline-glow .l7-process-tiles__box-text {
        position: static;
        opacity: 1;
        transform: none;
        background: transparent;
        backdrop-filter: none;
        width: auto;
        padding: 0 !important;
        text-align: left;
    }
    .l7-process-tiles--timeline-glow .l7-process-tiles__box-title {
        font-size: 1rem !important;
        margin-bottom: 0.4rem !important;
        color: #fff !important;
    }
    .l7-process-tiles--timeline-glow .l7-process-tiles__box-text {
        font-size: 0.85rem !important;
    }
}

/* ============================================================
   Process-Tiles — Editorial Variante (Refresh-Studio-Pattern)
   Riesen-Numbers + Pixel-Arrows zwischen, Labels darunter
   Aktivierbar: l7-process-tiles--editorial
   ============================================================ */
.l7-process-tiles--editorial {
    background: var(--l7-bg-dark) !important;
    color: var(--l7-text-light);
    overflow: hidden;
    padding-top: var(--l7-py-md);
    padding-bottom: var(--l7-py-lg);
}
.l7-process-tiles--editorial .l7-process-tiles__eyebrow,
.l7-process-tiles--editorial .l7-process-tiles__title,
.l7-process-tiles--editorial .l7-process-tiles__lead {
    color: var(--l7-text-light) !important;
}
/* Editorial: Header darf nicht durch 60ch begrenzt werden */
.l7-process-tiles--editorial .l7-process-tiles__header {
    max-width: none;
}
.l7-process-tiles--editorial .l7-process-tiles__lead {
    font-size: var(--l7-h2);
    font-weight: var(--l7-h2-weight, 700);
    line-height: var(--l7-h2-lh, 1.15);
    letter-spacing: -0.02em;
    opacity: 1;
    color: #fff !important;
    width: 80vw;
    max-width: 80vw;
    margin: var(--l7-gap-md) 0 var(--l7-py-md) 0;
}
@media (max-width: 768px) {
    .l7-process-tiles--editorial .l7-process-tiles__lead {
        width: 100%;
        max-width: 100%;
    }
}

/* Grid: horizontale Flow-Reihe statt Grid */
.l7-process-tiles--editorial .l7-process-tiles__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0;
    margin-top: var(--l7-py-md);
    grid-template-columns: none;
}

/* Box → nur so breit wie Inhalt — Rest des Platzes nimmt der Connector ein */
.l7-process-tiles--editorial .l7-process-tiles__box {
    flex: 0 1 auto;
    min-width: 0;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-height: 0;
    overflow: visible;
    transition: none;
    transform: none !important;
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
}
.l7-process-tiles--editorial .l7-process-tiles__box::before { content: none; }
.l7-process-tiles--editorial .l7-process-tiles__arrow { display: none !important; }
.l7-process-tiles--editorial .l7-process-tiles__phase { display: none !important; }

/* Big-Number — riesige Nummer als Hero-Element jeder Spalte */
.l7-process-tiles--editorial .l7-process-tiles__box::after {
    content: attr(data-num);
    display: block;
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #fff;
    margin-bottom: 1.5rem;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Title als Label unter der Number — klein, plain */
.l7-process-tiles--editorial .l7-process-tiles__box-title {
    font-size: 1rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.95) !important;
    margin: 0 0 0.4rem 0 !important;
    line-height: 1.3;
    order: 2;
}

/* Text optional drunter, sehr dezent */
.l7-process-tiles--editorial .l7-process-tiles__box-text {
    font-size: 0.85rem !important;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55) !important;
    margin: 0 !important;
    max-width: 22ch;
    order: 3;
}

/* Pseudo-Arrows entfernt — wir nutzen jetzt structural .l7-process-tiles__connector */
.l7-process-tiles--editorial .l7-process-tiles__box:not(:last-child)::before { content: none; }

/* Connector zwischen Boxes als eigenes Flex-Item */
/* Connector nimmt verbleibenden Platz ein, Pfeil-SVG bleibt klein und wird in der Mitte zentriert */
.l7-process-tiles--editorial .l7-process-tiles__connector {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-top: clamp(1.4rem, 2.4vw, 2.2rem);
    color: rgba(255, 255, 255, 0.55);
}
.l7-process-tiles--editorial .l7-process-tiles__connector .l7-pixel-arrow {
    width: clamp(1.5rem, 2.8vw, 3rem);
    height: auto;
    display: block;
    image-rendering: pixelated;
    shape-rendering: crispEdges;
}
@media (max-width: 768px) {
    .l7-process-tiles--editorial .l7-process-tiles__connector { display: none; }
}

/* Mobile: Stacked, Pfeile weg */
@media (max-width: 768px) {
    .l7-process-tiles--editorial .l7-process-tiles__grid {
        flex-direction: column;
        gap: 1.75rem;
    }
    .l7-process-tiles--editorial .l7-process-tiles__box {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: baseline;
        gap: 1.25rem;
    }
    .l7-process-tiles--editorial .l7-process-tiles__box::after {
        font-size: 2.5rem;
        margin-bottom: 0;
        flex-shrink: 0;
        min-width: 3rem;
    }
    .l7-process-tiles--editorial .l7-process-tiles__box-title::before,
    .l7-process-tiles--editorial .l7-process-tiles__box-title::after { display: none; }
    .l7-process-tiles--editorial .l7-process-tiles__box-title,
    .l7-process-tiles--editorial .l7-process-tiles__box-text {
        flex: 1;
    }
}

/* ============================================================
   Mobile Hero Fine-Tuning — am Ende für Cascade-Priorität
   Display weiter oben, H1 kleiner, Badges deutlich kleiner
   ============================================================ */
@media (max-width: 720px) {
    .l7-hero .l7-container,
    .has-topbar .l7-hero .l7-container {
        padding-top: calc(var(--l7-topbar-h, 36px) + var(--l7-nav-h) + 0.5rem) !important;
        padding-bottom: 5rem !important;
    }
    .l7-hero__content {
        max-width: 100%;
    }
    .l7-hero__title {
        font-size: 1.65rem !important;          /* ~26px */
        line-height: 1.15 !important;
        margin-bottom: 0.65rem !important;
        max-width: 85% !important;              /* erzwingt Break vor "vertraut" */
    }
    .l7-hero__text {
        font-size: 0.8125rem !important;        /* 13px — kleiner als Display, klar Subline */
        line-height: 1.5 !important;
        margin-bottom: 1rem !important;
        opacity: 0.75;
    }
    .l7-hero__cta {
        font-size: 0.95rem !important;
        padding-top: 0.45em !important;
        padding-bottom: 0.45em !important;
    }
    .l7-hero__tags {
        margin-top: 1rem !important;
        gap: 0.35rem !important;
    }
    .l7-hero__tags-label {
        font-size: 0.6875rem !important;        /* 11px */
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        opacity: 0.55;
    }
    .l7-hero__tags-list {
        gap: 0.3rem 0.35rem !important;
    }
    .l7-hero__tag {
        font-size: 0.6875rem !important;        /* 11px (vorher 13px) */
        padding: 0.3em 0.75em !important;       /* deutlich schmaler */
    }
    /* Mobile-only line-break helper im Hero-Title */
    .l7-hero__title br.mobile {
        display: inline;
    }
}
.l7-hero__title br.mobile {
    display: none;
}

/* ============================================================
   Section: Comparison Table (Lab7-Product vs. Competitors)
   Dark-Theme · linksbündig · Row-Hover · Mobile-Card-Layout
   ============================================================ */
.l7-comparison {
    padding-block: var(--l7-py-md);
    background: var(--l7-bg-dark);
    color: var(--l7-text-light);
}
.l7-comparison__header {
    max-width: 56rem;
    margin: 0 0 1.5rem;
    text-align: left;
}
.l7-comparison__label {
    /* Eyebrow nutzt globales .l7-section-label Styling. Nur display anpassen. */
    display: inline-block;
}
.l7-comparison__headline {
    font-size: var(--l7-h2);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--l7-text-light, #fff);
}
.l7-comparison__headline em {
    font-style: italic;
    font-weight: 400;
    opacity: .85;
}
.l7-comparison__intro {
    max-width: 52rem;
    margin: 0 0 2.5rem;
    text-align: left;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.05rem;
    line-height: 1.55;
}
.l7-comparison__wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--l7-radius, 6px);
    background: rgba(255, 255, 255, 0.02);
}
.l7-comparison__table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.92rem;
    line-height: 1.45;
}
.l7-comparison__table thead th {
    padding: 0.85rem 1rem;
    text-align: left;
    font-family: var(--l7-font-nav, 'Space Grotesk', ui-monospace, monospace);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    vertical-align: bottom;
    color: rgba(255, 255, 255, 0.55);
}
.l7-comparison__col-feature {
    width: 32%;
    min-width: 200px;
}
.l7-comparison__col-product {
    width: auto;
    position: relative;
    white-space: nowrap;
}
.l7-comparison__col-product.is-highlight {
    background: rgba(230, 57, 70, 0.10) !important;
    color: var(--l7-text-light, #fff);
    border-bottom: 2px solid var(--l7-primary, #E63946);
}
.l7-comparison__product-name {
    display: inline-block;
    vertical-align: middle;
    font-size: 0.92rem;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--l7-text-light, #fff);
    font-weight: 600;
    font-family: var(--l7-font-primary, sans-serif);
}
/* Lab7-Mark (Kontur-Logo) in der Highlight-Spalte */
.l7-comparison__mark {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    color: var(--l7-text-light, #fff);
    margin-right: 0.5rem;
    line-height: 0;
}
.l7-comparison__mark svg {
    display: block;
    width: 20px;
    height: 20px;
}
/* Row-Hover statt Striping (blog-style) */
.l7-comparison__table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background-color 0.2s ease;
}
.l7-comparison__table tbody tr:last-child {
    border-bottom: 0;
}
.l7-comparison__table tbody tr:hover {
    background: rgba(255, 255, 255, 0.025);
}
.l7-comparison__feature {
    padding: 0.85rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--l7-text-light, #fff);
    font-size: 0.92rem;
    line-height: 1.45;
    vertical-align: top;
}
.l7-comparison__cell {
    padding: 0.85rem 1rem;
    text-align: left;
    font-size: 0.92rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85);
    vertical-align: top;
}
.l7-comparison__cell.is-highlight {
    background: rgba(230, 57, 70, 0.06);
    font-weight: 600;
    color: var(--l7-text-light, #fff);
}
.l7-comparison__cell.is-yes {
    color: var(--l7-primary, #E63946);
    font-weight: 700;
}
.l7-comparison__cell.is-yes.is-highlight {
    color: var(--l7-text-light, #fff);
}
.l7-comparison__cell .l7-pixel-check {
    display: inline-block;
    vertical-align: middle;
}
.l7-comparison__cell.is-no {
    color: rgba(255, 255, 255, 0.3);
}
.l7-comparison__cell.is-partial {
    color: #E8DEEC;
    font-style: italic;
    font-weight: 500;
    opacity: 0.85;
}
.l7-comparison__footnote {
    max-width: 52rem;
    margin: 1.25rem 0 0;
    text-align: left;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.55;
}

/* ── Mobile: Card-Layout statt horizontaler Scroll-Tabelle ────────── */
@media (max-width: 720px) {
    .l7-comparison__wrap {
        overflow-x: visible;
        border: 0;
        background: transparent;
        border-radius: 0;
        margin-inline: 0;
    }
    .l7-comparison__table {
        display: block;
        min-width: 0;
        width: 100%;
        font-size: 0.95rem;
    }
    .l7-comparison__table thead {
        display: none; /* Header weg — Produkt-Namen kommen per ::before in jeder Cell */
    }
    .l7-comparison__table tbody,
    .l7-comparison__table tbody tr {
        display: block;
        width: 100%;
    }
    .l7-comparison__table tbody tr {
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: var(--l7-radius, 6px);
        padding: 1rem 1.1rem;
        margin-bottom: 0.75rem;
    }
    .l7-comparison__feature {
        display: block;
        padding: 0 0 0.6rem 0;
        font-size: 1rem;
        color: var(--l7-text-light, #fff);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        margin-bottom: 0.6rem;
    }
    .l7-comparison__cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.45rem 0;
        background: transparent !important;
        gap: 1rem;
    }
    /* Produkt-Name vor dem Wert anzeigen (aus data-col Attribut) */
    .l7-comparison__cell::before {
        content: attr(data-col);
        font-size: 0.85rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.65);
    }
    /* Highlight-Spalte (GetCited) mobile: roter Linker Border statt BG-Tint */
    .l7-comparison__cell.is-highlight {
        background: transparent !important;
        border-left: 2px solid var(--l7-primary, #E63946);
        margin-left: -0.75rem;
        padding-left: 0.75rem;
    }
    .l7-comparison__cell.is-highlight::before {
        color: var(--l7-primary, #E63946);
        font-weight: 700;
    }
}

/* ============================================================
   Section: CTA Big-Word (Kometa-inspiriert)
   ============================================================ */
.l7-cta-bigword {
    position: relative;
    padding-block: clamp(5rem, 12vw, 10rem);
    overflow: hidden;
}
.l7-cta-bigword--dark {
    background: #0a0a0a;
    color: #fff;
}
.l7-cta-bigword--light {
    background: #fafaf7;
    color: #111;
}

.l7-cta-bigword__backdrop {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    user-select: none;
}
.l7-cta-bigword__word {
    font-size: clamp(8rem, 25vw, 24rem);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.04em;
    white-space: nowrap;
    color: currentColor;
    opacity: 1;
}
.l7-cta-bigword--dark .l7-cta-bigword__word {
    color: #fff;
}
.l7-cta-bigword--light .l7-cta-bigword__word {
    color: #111;
}

.l7-cta-bigword__card {
    position: relative;
    z-index: 2;
    max-width: 560px;
    margin: 0 auto;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: rgba(20, 20, 20, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    color: #fff;
    text-align: left;
}
.l7-cta-bigword--light .l7-cta-bigword__card {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(20, 20, 20, 0.08);
    color: #111;
}

.l7-cta-bigword__label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.08);
    color: currentColor;
    margin-bottom: 0.75rem;
}
.l7-cta-bigword--light .l7-cta-bigword__label {
    background: rgba(20, 20, 20, 0.08);
}

.l7-cta-bigword__headline {
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 0.6rem;
}
.l7-cta-bigword__subheadline {
    font-size: 1.05rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 1.25rem;
}
.l7-cta-bigword--light .l7-cta-bigword__subheadline {
    color: rgba(20, 20, 20, 0.72);
}
.l7-cta-bigword__body {
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.62);
    margin: 0 0 1.5rem;
}
.l7-cta-bigword--light .l7-cta-bigword__body {
    color: rgba(20, 20, 20, 0.62);
}
.l7-cta-bigword__actions {
    margin-top: 1.25rem;
}
.l7-cta-bigword__cta-subline {
    margin: 0.85rem 0 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
}
.l7-cta-bigword--light .l7-cta-bigword__cta-subline {
    color: rgba(20, 20, 20, 0.55);
}

@media (max-width: 720px) {
    .l7-cta-bigword__word {
        font-size: clamp(5rem, 32vw, 12rem);
    }
}

/* ============================================================
   Section: Founder — Compact (Dark, passt zu FAQ)
   Stats horizontal mit Dividern wie Hero-Trust-Bar
   ============================================================ */
.l7-founder {
    padding-top: var(--l7-py-md);
    padding-bottom: var(--l7-py-md);
    background: var(--l7-bg-dark);
    color: var(--l7-text-light);
}
.l7-founder__grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}
.l7-founder__visual {
    margin: 0;
    width: clamp(80px, 10vw, 110px);
    height: clamp(80px, 10vw, 110px);
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
.l7-founder__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.l7-founder__text {
    display: flex;
    flex-direction: column;
}
.l7-founder__eyebrow {
    margin-bottom: 0.4rem;
    color: rgba(255, 255, 255, 0.72);
}
.l7-founder__name {
    font-size: clamp(1.15rem, 1.8vw, 1.35rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 0.2rem;
    color: #fff;
}
.l7-founder__role {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.62);
    margin: 0 0 0.75rem;
    font-weight: 500;
}
.l7-founder__role span[aria-hidden] {
    opacity: 0.4;
    margin: 0 0.2rem;
}
.l7-founder__bio {
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 0.6rem;
    max-width: 60ch;
}
.l7-founder__bio:last-of-type {
    margin-bottom: 1rem;
}

/* Stats wie Hero-Trust-Bar — inline mit Dividern */
.l7-founder__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25em;
    list-style: none;
    padding: 0;
    margin: 0;
}
.l7-founder__stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45em;
    font-size: var(--l7-h6, 0.9rem);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
.l7-founder__stat-value {
    color: #fff;
    font-weight: 600;
    opacity: 0.95;
}
.l7-founder__stat-label {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
    font-size: 0.9em;
}

/* Erstes Stat = Rating → Lab7-Rot wie Hero-Brand-Accent
   Funktioniert für direkte Stat-Values UND für [l7_google_rating] Shortcode */
.l7-founder__stat:first-child .l7-founder__stat-value,
.l7-founder__stat:first-child .l7-rating-header,
.l7-founder__stat:first-child .l7-rating-stars,
.l7-founder__stat:first-child .l7-rating-text,
.l7-founder__stat:first-child .l7-rating-link {
    color: var(--l7-primary, #E63946);
}
.l7-founder__stat:first-child .l7-rating-link {
    text-decoration: none;
}
.l7-founder__stat:first-child .l7-rating-link:hover {
    opacity: 0.85;
}
.l7-founder__stat + .l7-founder__stat::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 1em;
    background: rgba(255, 255, 255, 0.25);
    margin-right: 0.85em;
    transform: translateY(0.1em);
}

@media (max-width: 640px) {
    .l7-founder__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .l7-founder__visual {
        width: 80px;
        height: 80px;
    }
    .l7-founder__stat + .l7-founder__stat::before {
        display: none;
    }
}

/* ============================================================
   Section: Founder Manifesto
   3 Brand-Statements "X, nicht Y" mit Strikethrough auf negativem Teil
   + Eyebrow zwischen Linien + Founder-Signatur
   ============================================================ */
.l7-founder-manifesto {
    padding-top: var(--l7-py-lg);
    padding-bottom: var(--l7-py-lg);
    background: var(--l7-bg-dark);
    color: var(--l7-text-light);
    overflow: hidden;
}
.l7-founder-manifesto__inner {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

/* Eyebrow mit Lab7-Rot zwischen zwei feinen Linien */
.l7-founder-manifesto__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--l7-primary, #E63946);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.l7-founder-manifesto__eyebrow::before,
.l7-founder-manifesto__eyebrow::after {
    content: '';
    width: clamp(20px, 4vw, 40px);
    height: 1px;
    background: rgba(255, 255, 255, 0.25);
    display: inline-block;
}

/* Statements: 3 Zeilen, große Schrift, X-vs-nicht-Y */
.l7-founder-manifesto__statements {
    list-style: none;
    padding: 0;
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    gap: clamp(0.4rem, 1vw, 0.65rem);
}
.l7-founder-manifesto__statement {
    font-size: clamp(1.25rem, 2.4vw, 1.85rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: #fff;
    transition: opacity 0.3s ease;
}
.l7-founder-manifesto__positive {
    color: #fff;
}
.l7-founder-manifesto__negative {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.32);
    text-decoration-thickness: 1.5px;
    font-weight: 500;
    margin-left: 0.25em;
    transition: opacity 0.3s ease;
}

/* Signatur mit horizontaler Linie davor */
.l7-founder-manifesto__signature {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding-top: clamp(1.5rem, 3vw, 2rem);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: inline-block;
    max-width: 280px;
}
.l7-founder-manifesto__signature::before {
    content: '— ';
    color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 640px) {
    .l7-founder-manifesto__inner {
        text-align: left;
    }
    .l7-founder-manifesto__statement {
        font-size: 1.1rem;
        line-height: 1.4;
    }
    .l7-founder-manifesto__eyebrow::before,
    .l7-founder-manifesto__eyebrow::after {
        width: 20px;
    }
}

/* ────────────────────────────────────────────────────────────
   PAGE HEADER — Kompakter Hero-Ersatz (Eyebrow + H1 + Sub).
   Kein Full-Height, kein BG-Frame, kein Trust-Bar.
   Light-Theme by default.
   ──────────────────────────────────────────────────────────── */

.l7-page-header {
    padding-top: calc(var(--l7-nav-h, 40px) + var(--l7-gap-xl));
    padding-bottom: var(--l7-gap-xl);
    background: var(--l7-bg-dark, #111111);
    color: var(--l7-text-light, #ffffff);
}

.has-topbar .l7-page-header {
    padding-top: calc(var(--l7-topbar-h, 36px) + var(--l7-nav-h, 40px) + var(--l7-gap-xl));
}

.l7-page-header__inner {
    max-width: 800px;
}

.l7-page-header__label {
    margin-bottom: var(--l7-gap-xs);
}

.l7-page-header__title {
    font-size: var(--l7-h1);
    font-weight: var(--l7-h1-weight, 700);
    line-height: var(--l7-h1-lh, 1.1);
    letter-spacing: -0.02em;
    margin: 0 0 var(--l7-gap-sm);
    color: var(--l7-text-light, #ffffff);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.l7-page-header__text {
    font-size: var(--l7-body);
    line-height: var(--l7-body-lh, 1.5);
    color: var(--l7-text-light, #ffffff);
    margin: 0;
    max-width: 680px;
}

/* ────────────────────────────────────────────────────────────
   PAGE CHECKS — Generische Items-Liste für Pages (nicht Blog)
   Eyebrow + H2 + optional Lead + Item-Grid (1 oder 2 Spalten).
   Style-Varianten: check / number / dot / plain.
   ──────────────────────────────────────────────────────────── */

.l7-page-checks {
    background: var(--l7-bg-dark, #111111);
    color: var(--l7-text-light, #ffffff);
    padding-top: var(--l7-py-sm);
    padding-bottom: var(--l7-py-sm);
}

/* Erste page-checks nach page-header braucht kein extra padding-top */
.l7-page-header + .l7-page-checks {
    padding-top: 0;
}

/* Aufeinander folgende page-checks kollabieren padding zwischen ihnen */
.l7-page-checks + .l7-page-checks {
    padding-top: 0;
}

/* Header: 1-spaltig, Eyebrow + H2 + Lead untereinander, alles links-bündig */
.l7-page-checks__header {
    display: block;
    margin-bottom: var(--l7-gap-lg);
}

.l7-page-checks__head-left {
    max-width: none;
}

.l7-page-checks__head-right {
    margin-top: var(--l7-gap-sm);
}

.l7-page-checks__title {
    font-size: var(--l7-h2);
    font-weight: var(--l7-h2-weight, 700);
    line-height: var(--l7-h2-lh, 1.1);
    letter-spacing: -0.02em;
    margin: var(--l7-gap-xs) 0 0;
    color: var(--l7-text-light, #ffffff);
}

.l7-page-checks__lead {
    font-size: var(--l7-body);
    line-height: var(--l7-body-lh, 1.5);
    color: var(--l7-text-light, #ffffff);
    margin: 0;
    max-width: 100%;
}


/* Header-only (keine Items): Lead darf ohne H2-Limit lesbar bleiben */
.l7-page-checks--header-only .l7-page-checks__header {
    margin-bottom: 0;
}

/* List — IMMER 1-spaltig, auch wenn Template --cols-2 setzt.
   Gap kompakt wie Blog-Checks (1.1rem ≈ 18px). */
.l7-page-checks__list,
.l7-page-checks--cols-2 .l7-page-checks__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    grid-template-columns: none;
}

/* Item */
.l7-page-checks__item {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: var(--l7-gap-sm);
    align-items: start;
}

.l7-page-checks--plain .l7-page-checks__item {
    grid-template-columns: 1fr;
}

/* Plain-Items: Definition-Liste-Look (Label klein uppercase, Inhalt prominent).
   Klar getrennt — passt für Aliase, Kontakt, Definitions-Blöcke. */
.l7-page-checks--plain .l7-page-checks__list {
    gap: 1.8rem;
}

.l7-page-checks--plain .l7-page-checks__item-title {
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 0.4rem;
}

.l7-page-checks--plain .l7-page-checks__item-text {
    color: var(--l7-text-light, #ffffff);
}

/* Marker — Default-Container */
.l7-page-checks__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Style: check — Pill (28×18) mit Pixel-Pfeil drin.
   Dark-Theme der Page: weiße Pille + schwarzer Pfeil (1:1 wie Blog). */
.l7-page-checks--check .l7-page-checks__marker {
    width: 28px;
    height: 18px;
    border-radius: 50px;
    background: var(--l7-text-light, #ffffff);
    color: var(--l7-text-default, #1d1d1d);
    margin-top: 0.32em;
}

.l7-page-checks--check .l7-page-checks__marker svg {
    width: 16px;
    height: auto;
    display: block;
}

/* Style: number — runde Pille (gleicher Pattern) */
.l7-page-checks--number .l7-page-checks__marker {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--l7-text-light, #ffffff);
    color: var(--l7-text-default, #1d1d1d);
    font-family: var(--l7-font-mono, ui-monospace, "SF Mono", monospace);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-top: 0.2em;
}

/* Style: dot */
.l7-page-checks__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--l7-primary, #ff201f);
    display: inline-block;
}

.l7-page-checks--dot .l7-page-checks__marker {
    padding-top: 0.5em;
}

/* Content */
.l7-page-checks__content {
    display: flex;
    flex-direction: column;
    gap: var(--l7-gap-xs);
}

/* Item-Title: kompakt wie Blog-Checks (l7-post-checks Pattern) */
.l7-page-checks__item-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--l7-text-light, #ffffff);
}

/* Item-Text: kompakt + leicht abgedimmt (rgba 0.85) — exakt wie Blog */
.l7-page-checks__item-text {
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* Light-Theme Override — falls Section irgendwann auf hell umgestellt werden soll */
.l7-page-checks.l7-section--light {
    background: var(--l7-bg-light, #ffffff);
}
.l7-page-checks.l7-section--light .l7-page-checks__title,
.l7-page-checks.l7-section--light .l7-page-checks__lead,
.l7-page-checks.l7-section--light .l7-page-checks__item-title,
.l7-page-checks.l7-section--light .l7-page-checks__item-text {
    color: #000;
}
.l7-page-checks.l7-section--light.l7-page-checks--check .l7-page-checks__marker,
.l7-page-checks.l7-section--light.l7-page-checks--number .l7-page-checks__marker {
    background: #000;
    color: #fff;
}