:root {
  /* Typography */
  --color-font-base:        #1A3240;
  --color-font-heading:     #1A3240;

  /* Backgrounds */
  --color-bg-light:         #FFFFFF;
  --color-bg-neutral:       #D3D8DE;   /* secondary gray — section backgrounds */
  --color-bg-dark-1:        #040404;
  --color-bg-dark-2:        #1A3240;
  --color-bg-dark-4:        #1963A6;

  /* Buttons */
  --color-btn:              #FFD700;
  --color-btn-hover:        #1A3240;

  /* Lines / Borders */
  --color-line:             #CED2D8;

  /* Transparent */
  --color-transparent:      transparent;

  /* Aliases used across sections */
  --color-primary:          #1A3240;
  --color-primary-light:    #1963A6;
  --color-accent:           #FFD700;
  --color-accent-hover:     #e6bc00;
  --color-neutral:          #FFFFFF;
  --color-neutral-100:      #F5F7FA;
  --color-neutral-200:      #E8ECF0;
  --color-neutral-300:      #CED2D8;
  --color-neutral-500:      #1A3240;   /* readable secondary (navy) — was #6B7B8A, too low-contrast on the gray section bg */
  --color-dark:             #040404;

  /* Fonts */
  --font-heading: 'Titillium Web', sans-serif;
  --font-body:    'Titillium Web', sans-serif;

  /* Spacing */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2rem;
  --space-xl:   3rem;
  --space-2xl:  4rem;
  --space-3xl:  6rem;

  /* Standard body / list ("pointed") text size.
     Fluid: ~16px on phones, 18px from ~720px viewport up (tablet/desktop). */
  --text-body:  clamp(1rem, 0.9rem + 0.5vw, 1.125rem); /* 16px → 18px */

  /* Radii */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.2);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body {
        font-family: var(--font-body);
        font-weight: 400;
        line-height: 1.6;
        color: var(--color-primary);
        background-color: var(--color-neutral);
        overflow-x: hidden;
    }
    img { max-width: 100%; height: auto; display: block; }
    /* Global heading safety net: long German compounds (e.g.
       "Lastspitzenmanagement") must break inside their box on narrow screens
       instead of overflowing and stretching the layout. hyphens:auto uses the
       page's lang="de" for logical breaks; overflow-wrap is the hard fallback.
       Only triggers when a word can't fit, so wider screens are unaffected. */
    h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; hyphens: none; }
    /* Make <picture> layout-neutral so the inner <img> stays the flex/grid item
       and keeps object-fit/sizing exactly as before (PERFORMANCE-REPORT.md #2). */
    picture { display: contents; }
    a { text-decoration: none; color: inherit; transition: color var(--transition-fast); }
    ul, ol { list-style: none; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }
    input, textarea, select { font-family: inherit; font-size: inherit; }

    .container { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--space-md); }

    .section-title {
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: clamp(1.5rem, 4vw, 2.5rem);
        line-height: 1.15;
        color: var(--color-primary);
        margin-bottom: var(--space-sm);
          text-align: center;
    width: 100%;
    overflow-wrap: break-word;
    hyphens: none; /* no ugly mid-word hyphenation in headings; overflow-wrap still breaks over-long words */
    }

    .section-subtitle {
        font-size: 1rem;
        color: var(--color-neutral-500);
        margin-bottom: var(--space-xl);
        max-width: 600px;
         text-align: center;
    width: 100%;
    }

    .highlight { color: var(--color-accent); }
    .text-accent { color: var(--color-primary-light); text-decoration: underline; text-underline-offset: 3px; }
    .underline-yellow { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 4px; text-decoration-thickness: 3px; }

    .btn {
        display: inline-flex; align-items: center; justify-content: center;
        gap: var(--space-xs); padding: 0.875rem 1.75rem;
        font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem;
        border-radius: var(--radius-sm); transition: all var(--transition-base);
        white-space: nowrap; border: none; cursor: pointer;
    }
    /* On small phones let long CTA labels wrap instead of overflowing the
       viewport (e.g. "Kostenloses Erstgespräch vereinbaren ↗"). */
    @media (max-width: 480px) {
        .btn {
            white-space: normal;
            text-align: center;
            padding: 0.8rem 1.25rem;
        }
    }
    .btn-primary { background-color: var(--color-accent); color: var(--color-dark); }
    .btn-primary:hover { background-color: var(--color-accent-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--color-dark);}
    .btn-outline { background-color: transparent; color: var(--color-neutral); border: 1.5px solid rgba(255,255,255,0.3); }
    .btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); }
    .btn-full { width: 100%; }

    [data-animate] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
    [data-animate].visible { opacity: 1; transform: translateY(0); }

    /* ========================================
       Header & Navigation — Rearranged
    ======================================== */
    .header {
        position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
        padding: 0; background-color:transparent; transition: all var(--transition-base);
    }
    .header.scrolled {
        background-color: rgba(26,50,64,0.97); /* primary #1A3240 */
        backdrop-filter: blur(12px);
        box-shadow: 0 2px 20px rgba(0,0,0,0.3);
    }
    .nav {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 116px;
    }
    .logo {
        display: flex; align-items: center; position: relative; z-index: 1001;
        /* Align the logo's left edge with the subpage hero accent bar (`.ref-hero-badge`
           at left: 6%). The logo otherwise starts at the container's inner edge
           (max(0, (100vw - 1360px)/2) + var(--space-md)); this pulls it onto the 6vw line. */
        margin-left: calc(6vw - max(0px, (100vw - 1360px) / 2) - var(--space-md));
    }
    .logo-img { height: 84px; width: auto; }

    .nav-menu {
        position: absolute;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        /* Extra breathing room between the top-level items, but only where there's
           space: stays ~0 on the tightest desktop width (~993px, 6 items are snug)
           and grows on wider screens — so no viewport overflows. */
        gap: clamp(0px, calc(1vw - 9px), 0.85rem);
    }

    /* Kontakt (CTA) stays pinned to the right, separated from the centered menu.
       Right edge is pulled onto the 6vw line — mirror of the logo's left edge — so
       the two bookend the header symmetrically (breaks out of the 1360px container). */
    .nav-menu > li:last-child {
        position: absolute;
        right: calc(6vw - max(0px, (100vw - 1360px) / 2) - var(--space-md));
    }

    .nav-menu > li > a {
        position: relative;
        display: flex; align-items: center; gap: 4px;
        font-family: var(--font-body); font-weight: 600; font-size: var(--text-body); text-transform: uppercase;
        color: rgba(255,255,255,0.8); padding: 0.5rem 0.875rem;
        transition: color var(--transition-fast); letter-spacing: 0.01em; line-height: 1.1rem;
        cursor: pointer; /* keep pointer on dropdown parents that have no href */
    }
    .nav-menu > li > a:hover { color: var(--color-neutral); }

    /* Yellow underline that draws in from left to right on hover */
    .nav-menu > li > a:not(.nav-cta)::after {
        content: "";
        position: absolute;
        left: 0.875rem;
        right: 0.875rem;
        bottom: 0.3rem;
        height: 2px;
        background: var(--color-accent);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform var(--transition-base);
    }
    .nav-menu > li > a:not(.nav-cta):hover::after {
        transform: scaleX(1);
    }

    /* CTA button — last item, yellow accent */
    .nav-cta {
        background-color: var(--color-accent) !important;
        color: var(--color-primary) !important;
        padding: 0.5rem 1.25rem !important;
        border-radius: var(--radius-sm) !important;
        font-weight: 600 !important;
        margin-left: 0.25rem;
        transition: all var(--transition-fast) !important;
    }
    .nav-cta:hover {
        background-color: var(--color-accent-hover) !important;
        transform: translateY(-1px);
    }
    .nav-dropdown { position: relative; }

    .dropdown-menu {
        position: absolute; top: 100%; left: 0; min-width: 220px;
        background-color: var(--color-neutral); border-radius: var(--radius-md);
        box-shadow: var(--shadow-xl); padding: var(--space-xs) 0;
        opacity: 0; visibility: hidden; transform: translateY(8px);
        transition: all var(--transition-fast); z-index: 100;
    }
    .nav-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
    .dropdown-menu a {
        color: var(--color-primary) !important; padding: 0.625rem 1.25rem !important;
        display: block; font-size: 0.99rem !important;
    }
    .dropdown-menu a:hover { background-color: var(--color-bg-light); color: var(--color-accent) !important; }

    .nav-toggle { display: none; flex-direction: column; gap: 5px; z-index: 1001; padding: 4px; }
    .nav-toggle span {
        display: block; width: 22px; height: 2px;
        background-color: var(--color-neutral); transition: all var(--transition-base);
        border-radius: 2px;
    }
   
/* ========================================
   Mobile Navigation Menu 
======================================== */
@media (max-width: 992px) {
    /* 1. Prevent logo & hamburger overlap */
    .nav {
        height: 70px; /* Shorter header on mobile gives more room */
        padding: 0 1rem;
    }

    /* Drop the desktop 6vw alignment: on mobile the nav has its own padding and the
       hero accent bar moves back to the container edge, so the logo sits naturally. */
    .logo {
        margin-left: 0;
    }

    .logo-img {
        height: 54px; /* Scale down the logo slightly so it fits perfectly */
    }

    .nav-toggle {
        display: flex;
        cursor: pointer;
        position: relative;
        padding: 10px;
        margin-right: -10px; /* Optically aligns perfectly to the edge */
    }

    /* 2. Full-screen Mobile Panel Fixes */
    .nav-menu {
        position: fixed;
        top: 70px;              /* start BELOW the 70px header bar so content can't
                                   scroll up under the logo */
        left: auto;             /* reset the desktop `left: 0` — otherwise left+right+
                                   width over-constrain the drawer, `right` is ignored,
                                   and it's stuck on-screen (can't open/close). */
        right: -100%;
        width: 100%;   /* Full width covers screen and hides background text noise */
        max-width: 320px;
        height: calc(100vh - 70px);
        background-color: #1A3240; /* primary */
        box-shadow: -5px 0 25px rgba(0,0,0,0.5);
        padding: 1.5rem;

        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.5rem; /* Tighter gap since items now take full rows */

        transition: right var(--transition-base, 0.3s ease);
        z-index: 1000;
        overflow-y: auto; /* Allows scrolling inside the menu if list is long */
    }

    .nav-menu.active {
        right: 0;
    }

    /* Solid header bar while the drawer is open, so the logo sits on navy (the
       transparent header would otherwise reveal the page/menu behind it). */
    .header:has(.nav-menu.active) {
        background-color: #1A3240;
    }

    .nav-menu > li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Separator line */
    }

    /* Reset the desktop right-pinning so the CTA stacks inside the mobile panel */
    .nav-menu > li:last-child {
        position: static;
    }

    .nav-menu > li > a {
        font-size: 1.1rem;
        padding: 1rem 0;
        width: 100%;
        justify-content: space-between; /* If you have icons, pushes them to the right */
    }
    /* No hover underline in the mobile drawer */
    .nav-menu > li > a:not(.nav-cta)::after { display: none; }

    /* 3. Dropdown Toggling Rules */
    /* Hide by default on mobile again, toggle visibility via class */
    .dropdown-menu {
        position: static;
        display: none; 
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background-color: rgba(0, 0, 0, 0.15);
        margin: 0 -1.5rem; /* Spans full inner drawer width */
        padding: 0.5rem 1.5rem;
    }
    
    /* When JavaScript adds the active class, show the links vertically */
    .nav-dropdown.open .dropdown-menu {
        display: block;
    }
    
    .dropdown-menu a {
        color: rgba(255,255,255,0.7) !important;
        padding: 0.75rem 1rem !important;
    }

    /* CTA Button Spacing Adjustment */
    .nav-cta {
        margin-left: 0 !important;
        margin-top: 1.5rem;
        justify-content: center;
        width: 100%;
    }

    /* Hamburger Animation to 'X' */
    .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle.active span:nth-child(2) { opacity: 0; }
    .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
    /* ========================================
       Hero — Video Background
    ======================================== */
    .hero {
        position: relative;
        min-height: 75vh; /* shortened from 100vh (-25%) */
        display: flex;
        align-items: center;
        overflow: hidden;
        padding-top: 72px;
        padding-bottom: 12vh; /* nudges the vertically-centered hero text upward */
    }

    .hero-video-wrap {
        position: absolute;
        inset: 0;
        z-index: 0;
    }

    .hero-video-wrap video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Dark overlay for text readability */
    .hero-video-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(
            135deg,
            rgba(10, 21, 28, 0.92) 0%,
            rgba(26, 50, 64, 0.85) 40%,
            rgba(26, 50, 64, 0.6) 70%,
            rgba(26, 50, 64, 0.45) 100%
        );
    }

    /* Grain texture overlay */
    .hero-video-grain {
        position: absolute;
        inset: 0;
        z-index: 2;
        opacity: 0.03;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
        pointer-events: none;
    }

    .hero-content {
        position: relative;
        z-index: 3;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: var(--space-3xl) var(--space-md);
    }

    .hero-inner {
        max-width: 100%;
      justify-items: center;
    }


    .hero-badge {
        display: inline-block;
        font-size: 0.6875rem;
        font-weight: 600;
        color: var(--color-accent);
        text-transform: uppercase;
        letter-spacing: 0.15em;
        margin-bottom: var(--space-md);
    }

    .hero-title {
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: clamp(1.8rem, 4.5vw, 3rem);
        color: var(--color-neutral);
        line-height: 1.05;
        margin-bottom: var(--space-lg);
        text-align: center;
    width: 100%;
    }

    .hero-title .highlight { color: var(--color-accent); }

    /* Typewriter caret (shown only while typing; hidden once finished) */
    [data-typewriter].is-typing::after {
        content: '';
        display: inline-block;
        width: 3px;
        height: 1em;
        margin-left: 6px;
        vertical-align: -0.12em;
        background: var(--color-accent);
        animation: twCaret 1s steps(1) infinite;
    }

    @keyframes twCaret {
        0%, 50%      { opacity: 1; }
        50.01%, 100% { opacity: 0; }
    }

    .hero-description {
        color: rgba(255,255,255,0.7);
        font-size: 1.0625rem;
        line-height: 1.7;
        margin-bottom: var(--space-xl);
        text-align: center;
    width: 100%;
    }

    .hero-actions {
        display: flex;
        gap: var(--space-sm);
        margin-bottom: var(--space-2xl);
        flex-wrap: wrap;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-md);
        padding-top: var(--space-lg);
        border-top: 1px solid rgba(255,255,255,0.12);
        max-width: 620px;
    }

    .hero-stat { text-align: left; }

    .hero-stat-value {
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: 1.5rem;
        color: var(--color-accent);
        line-height: 1;
        margin-bottom: 4px;
    }

    .hero-stat-label {
        font-size: 0.6875rem;
        color: rgba(255,255,255,0.45);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        line-height: 1.3;
    }

    /* Scroll indicator */
    .hero-scroll {
        position: absolute;
        bottom: var(--space-lg);
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        color: rgba(255,255,255,0.4);
        font-size: 0.6875rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        animation: heroScrollBounce 2s ease-in-out infinite;
    }

    .hero-scroll-line {
        width: 1px;
        height: 32px;
        background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
    }

    @keyframes heroScrollBounce {
        0%, 100% { transform: translateX(-50%) translateY(0); }
        50% { transform: translateX(-50%) translateY(8px); }
    }

    /* Video fallback for no-video support */
    .hero-video-poster {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        display: none;
    }

 /* ========================================
   Solutions — Floating Over Hero
======================================== */
.solutions{
    background-color: var(--color-bg-neutral);

}
.solutions-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 1fr forces mathematically equal widths */
    gap: var(--space-md);

    margin-top: -253px; /* Pulls the whole card row up so it sits fully inside the hero (on the dark video), clear of the dark/white boundary */
    position: relative;
    z-index: 20;
    align-items: stretch; /* Forces all cards in a row to be the exact same height */
}

a.solution-card { text-decoration: none; color: inherit; cursor: pointer; }
.solution-card {
    background-color: var(--color-bg-neutral);
    padding: var(--space-sm) var(--space-sm);
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: var(--radius-lg); 
    box-shadow: var(--shadow-lg); 
    border: 1px solid var(--color-neutral-200); 
    min-width: 0; /* CRITICAL: Prevents content (like long titles) from breaking the equal width grid */
    overflow: hidden; /* Ensures nothing bleeds out and stretches the card */
}

/* Force titles to wrap properly so they don't stretch the card width */
.solution-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 26px;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
    line-height: 1.3;
    text-align: center; /* centers wrapped lines (e.g. Lastspitzen-/management) */
    transition: color 0.3s ease;
    word-break: break-word; /* Forces long words to wrap instead of stretching the grid */
    hyphens: manual; /* only break at explicit soft-hyphens (e.g. Lastspitzen­management) */
}

/* DEFAULT HOVER: Transforms into Card 04 style (Dark Blue) */
.solution-card:hover {
   
    border-color: var(--color-primary);
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}



/* SVG Icon Styling — BIGGER */
.solution-icon {
    width: 100px;  
    height: 100px; 
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    transition: color 0.3s ease; /* Smooth color transition for icon */
}

.solution-icon svg {
    width: 100%;
    height: 100%;
}

.solution-number {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.5rem; 
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
}

.solution-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.125rem; 
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
    line-height: 1;
    transition: color 0.3s ease; /* Smooth color transition for title */
}

.solution-desc {
    font-size: 0.875rem;
    color: var(--color-neutral-500);
    line-height: 1;
    margin-top: auto;
    transition: color 0.3s ease; /* Smooth color transition for desc */
}


/* ========================================
   Card 04 (Highlighted Base State & Hover)
======================================== */
.solution-card--highlighted {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.solution-card--highlighted .solution-icon { color: var(--color-accent); }
.solution-card--highlighted .solution-number { color: var(--color-accent); }
.solution-card--highlighted .solution-title { color: var(--color-neutral); }
.solution-card--highlighted .solution-desc { color: rgba(255,255,255,0.6); }

/* Card 04 Hover: Just gets slightly darker to show interaction */
.solution-card--highlighted:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}


/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .solutions-grid { 
        grid-template-columns: repeat(3, 1fr); 
        margin-top: -80px; 
    }
    .solution-icon {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 768px) {
    .solutions-grid { 
        grid-template-columns: 1fr 1fr; 
        gap: var(--space-sm); 
        margin-top: -60px; 
    }
    .solution-card:last-child { grid-column: 1 / -1; }
    .solution-icon {
        width: 48px;
        height: 48px;
    }
    .solution-number {
        font-size: 1.25rem;
    }
    .solution-title {
        font-size: 1rem;
    }
}

    /* Warum Solanox */
    .why-solanox { padding: var(--space-3xl) 0; background-color: var(--color-neutral); }
    .why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-lg); }
    .why-card { padding: var(--space-xl); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); transition: all var(--transition-base); }
    .why-card:hover { border-color: var(--color-primary-light); box-shadow: var(--shadow-md); transform: translateY(-4px); }
    .why-card-icon { width: 48px; height: 48px; border-radius: var(--radius-md); background-color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md); }
    .why-card-icon svg { width: 24px; height: 24px; stroke: var(--color-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .why-card h3 { font-family: var(--font-heading); font-weight: 600; font-size: 1.125rem; color: var(--color-primary); margin-bottom: var(--space-sm); line-height: 1.3; }
    .why-card p { font-size: 0.875rem; color: var(--color-neutral-500); line-height: 1.65; }

/* ========================================
   Areas Section (Unsere Bereiche)
======================================== */
.areas {
    padding: var(--space-md) 0 var(--space-2xl);
    background-color: var(--color-bg-neutral);
}

/* Wider container for this section so the four cards are wider */
.areas > .container {
    max-width: 1360px;
}

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

/* Individual Card */
.area-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-neutral);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
    border: 5px solid var(--color-primary-dark);
}

.area-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

/* Image on top */
.area-card-image {
    width: 100%;
    aspect-ratio: 2 / 1; /* wider & shorter than 3/2 → lower card height */
    overflow: hidden;
}

.area-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.area-card:hover .area-card-image img {
    transform: scale(1.06);
}

/* Text content below image */
.area-card-content {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    flex: 1; /* Fills remaining space so button stays at bottom */
}

.area-card-content h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
    line-height: 1.3;
}

.area-card-content p {
    font-size: var(--text-body);
    color: var(--color-neutral-500);
    line-height: 1.65;
    margin-bottom: var(--space-md);
}

/* Yellow "Mehr erfahren" button */
.area-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto; /* Pushes button to the bottom of the card */
    padding: 0.75rem 1.25rem;
    background-color: var(--color-accent);
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
    text-decoration: none;
    text-align: center;
}

.area-card-btn:hover {
    background-color: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .areas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .areas-grid {
        grid-template-columns: 1fr; /* 1 card per row on mobile */
        max-width: 400px;
        margin: 0 auto;
    }
    
    .area-card-image {
        aspect-ratio: 16 / 9;
    }
    
    .area-card-content {
        padding: var(--space-md) var(--space-lg) var(--space-lg);
    }
}



/* ========================================
   Phases Section (4 Phasen)
======================================== */
.phases { 
    padding: var(--space-3xl) 0; 
    background-color: var(--color-bg-dark-2); 
} 

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

.phasen-section-title{
  color: var(--color-neutral);
  font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: 1.15;
    overflow-wrap: break-word;
    hyphens: none; /* no ugly mid-word hyphenation in headings; overflow-wrap still breaks over-long words */
    margin-bottom: var(--space-sm);
     text-align: center;
}
.phasen-section-subtitle {
    font-size: var(--text-body);
    color: var(--color-neutral);
    margin-bottom: var(--space-xl);

      text-align: center;
    width: 100%;
}

.phasen-section-subtitle1 {
    font-size: var(--text-body);
    color: var(--color-neutral);
    margin-bottom: var(--space-sm);
    
      text-align: center;
    width: 100%;
}
/* --- Base Card Styles --- */
.phase-card { 
    position: relative; 
    border-radius: var(--radius-lg); 
    overflow: hidden; 
    aspect-ratio: 1 / 1; /* FORCES A PERFECT SQUARE */
    background-color: #FFFFFF; /* The white background revealed on hover */
    cursor: pointer;
    border: 1px solid transparent; /* Prep for hover border */
    transition: border-color 0.3s ease;
} 

/* Hover border accent */
.phase-card:hover {
    border-color: var(--color-neutral-200);
}

/* --- Background Image --- */
.phase-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: opacity 0.4s ease, transform 0.6s ease;
}

/* --- Dark Overlay --- */
.phase-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26, 50, 64, 0.7), rgba(10, 21, 28, 0.9));
    z-index: 2;
    transition: opacity 0.4s ease;
}

/* --- HOVER STATE: Fade out image and overlay to reveal white bg --- */
.phase-card:hover .phase-bg {
    opacity: 0; 
    transform: scale(1.05);
}

.phase-card:hover .phase-overlay {
    opacity: 0; 
}

/* --- Text Content (Centered) --- */
.phase-content {
    position: absolute;
    inset: 0; /* Fills the whole square */
    z-index: 3;
    display: flex; 
    flex-direction: column; 
    justify-content: center; /* Vertically Centered */
    align-items: center; /* Horizontally Centered */
    text-align: center;
    padding: var(--space-md);
    color: #FFFFFF; /* Default white text for dark overlay */
    transition: color 0.4s ease;
}

/* HOVER STATE: Change text color to dark for white background */
.phase-card:hover .phase-content {
    color: #1A3240;
}

.phase-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-accent); /* Yellow default */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
    transition: color 0.4s ease;
}

/* HOVER STATE: Label color change */
.phase-card:hover .phase-label {
    color: var(--color-primary-light); /* Blue on white */
}

.phase-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
    line-height: 1.2;
    margin-bottom: 0; /* No margin by default */
    transition: margin 0.4s ease, color 0.4s ease;
}

/* Description - Hidden by default */
.phase-desc {
    font-size: 0.875rem;
    line-height: 1.5;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition: all 0.4s ease;
}

/* HOVER STATE: Reveal Description */
.phase-card:hover .phase-title {
    margin-bottom: var(--space-sm); /* Make room for text */
}

.phase-card:hover .phase-desc {
    max-height: 150px;
    opacity: 1;
    margin-top: var(--space-xs);
    color: #6B7B8A; /* Muted gray for description on white bg */
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .phases-grid { 
        grid-template-columns: repeat(2, 1fr); 
    } 
}

@media (max-width: 768px) {
    .phases-grid { 
        grid-template-columns: 1fr; /* 1 card per row on mobile */
        max-width: 400px;
        margin: 0 auto;
    }
    
    /* --- MOBILE DEFAULT: Force the "White/Hover" look --- */
    /* Since mobile lacks hover, we default to the clean white card with text visible */
    .phase-card {
        background-color: #FFFFFF;
        border-color: var(--color-neutral-200);
        aspect-ratio: auto; /* Let height grow naturally with text on mobile */
        min-height: 300px;
    }
    
    .phase-bg, 
    .phase-overlay {
        opacity: 0 !important; /* Hide image/overlay on mobile */
    }
    
    .phase-content {
        position: relative; /* Put in flow */
        color: #1A3240 !important; /* Force dark text */
    }
    
    .phase-label {
        color: var(--color-primary-light) !important;
    }
    
    .phase-title {
        margin-bottom: var(--space-sm) !important;
    }
    
    .phase-desc {
        max-height: 150px !important;
        opacity: 1 !important;
        margin-top: var(--space-xs) !important;
        color: #6B7B8A !important;
    }
}




    /* ========================================
   About Section — 3-Column Grid 
======================================== */
.about {
    padding: var(--space-3xl) 0;
    background-color: var(--color-primary);
    color: var(--color-neutral);
}

.about .section-title {
    color: var(--color-neutral);
    margin-bottom: var(--space-2xl);
}

/* Top row */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: var(--space-2xl);
    align-items: start;
    margin-bottom: var(--space-md);
}

.about-eyebrow {
    font-size: 1.0625rem;
    color: var(--color-neutral); /* white (was blue #6ba6e3) */
    margin-bottom: var(--space-md);
    line-height: 1.6;
}

.about-text {
    font-size: 1.0625rem;
    color: rgba(255,255,255,0.88);
    line-height: 1.75;
    margin-bottom: var(--space-md);
}

/* Paragraphs produced by Kirbytext inside the .about-text wrapper */
.about-text p {
    margin-bottom: var(--space-md);
}

.about-text p:last-child {
    margin-bottom: 0;
}

/* "→ Mehr über Ihren Projektpartner erfahren" link */
.about-text a {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
}

.about-text a:hover {
    text-decoration: underline;
}

.about-highlight {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--color-neutral);
    margin-top: var(--space-md);
}

.about-image {
    position: relative;
    overflow: hidden;
}

/* Minimalistic caption under the team image */
.about-image-caption {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
}

.about-image img {
    width: 100%;
    height: auto;
}

.about-logo-overlay {
    position: absolute;
    bottom: var(--space-md);
    right: var(--space-md);
    background-color: rgba(255,255,255,0.95);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(8px);
}

.about-logo-overlay svg {
    height: 28px;
    width: auto;
}


/* Right column holds the team image, then the map, then the location text,
   all stacked vertically under each other. */
.about-media {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* Map on top, location text beneath it — stacked, centered, compact. */
.about-triple {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

/* Map */
.about-triple-map {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    padding: var(--space-sm); /* Padding so map doesn't touch borders */

}

.about-triple-map img {
    width: 100%;
    max-width: 280px;   /* smaller map */
    height: auto;
}

.germany-map {
    width: 100%;
    max-width: 320px;
    height: auto;
}

/* Column 2: Text */
.about-triple-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* centre the location text within its column so it sits balanced, not hugging the map */
    text-align: center;
}

.about-triple-text h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(1.125rem, 1.8vw, 1.4rem);
    color: var(--color-neutral);
    margin-bottom: var(--space-sm);
    line-height: 1.2;
}

.about-triple-text p {
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.9);
    line-height: 1.5;
}

/* Staggered fade-up entrance for the two location lines */
.about-triple-text [data-animate] {
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.about-triple-text [data-animate]:nth-child(2) {
    transition-delay: 0.15s;
}



@media (max-width: 1024px) {
    /* Single-column stack: pull the team image up so it sits directly under the
       "Wer wir sind" title, before the intro text. Unwrapping .about-media with
       display:contents lets its children take part in the grid so we can order them. */
    .about-media { display: contents; }
    .about-image-block { order: 1; }
    .about-content { order: 2; }
    .about-triple { order: 3; }

    .about-triple {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
        align-items: start; /* Keep top alignment for map/text */
    }


    .about-triple-map {
        grid-column: 1;
        grid-row: 1;
    }

    .about-triple-text {
        grid-column: 1 / -1;
        grid-row: 2;
        text-align: center;
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    .about-triple {
        grid-template-columns: 1fr;
    }

    .about-triple-map {
        max-width: 260px;
        margin: 0 auto;
        width: 100%;
    }

    .about-triple-text {
        text-align: center;
    }

}


/* ========================================
   Healthcare Section
======================================== */
.healthcare {
    padding: var(--space-2xl) 0;
    background-color: var(--color-bg-neutral);
    color: var(--color-primary);
}

.healthcare .section-title {
    color: var(--color-primary);
}

.healthcare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Strictly equal 50/50 columns */
    gap: var(--space-xl);
    align-items: stretch; /* Forces both columns to match the tallest height */
}

.healthcare-images {
    position: relative;
    
}

.healthcare-main-image {
    width: 100%;
    height: 100%; /* Fills the full height of the left column */
    min-height: 500px; /* Ensures a large, impactful image size */
    border-radius: var(--radius-lg);
    overflow: hidden; /* Keeps the image corners rounded */
    position: relative;
}

.healthcare-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills the area without stretching */
    display: block;
    transition: transform 0.5s ease;
}

.healthcare-images:hover .healthcare-main-image img {
    transform: scale(1.03); /* Subtle zoom on hover */
}

.healthcare-badge {
    position: absolute;
    bottom: -20px;
    right: -10px;
    background-color: var(--color-neutral);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    z-index: 2;
}

.healthcare-badge .badge-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;   /* keep the competence label on a single line */
}

.healthcare-badge .badge-main {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--color-primary);
    margin-top: var(--space-xs);
    border-top: 2px solid var(--color-accent);
    padding-top: var(--space-xs);
}

.healthcare-eyebrow {
    font-size: 0.8125rem;
    color: var(--color-primary); /* secondary navy (was blue --color-primary-light) */
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.healthcare-content {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers the text in the tall right column */
    padding: var(--space-lg) 0; /* Adds breathing room top and bottom */
}

.healthcare-content .section-title {
    margin-bottom: var(--space-md);
    /* Slightly smaller so the heading fits on two lines, not three. */
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.2;
    text-align: left; /* match the left-aligned eyebrow + button (global .section-title is centered) */
}

.healthcare-content .btn {
    margin-bottom: var(--space-lg);
    align-self: flex-start; /* Keeps button from stretching full width */
}

.healthcare-text {
    font-size: 0.9375rem;
    color: var(--color-neutral-500);
    line-height: 1.7;
    margin-bottom: var(--space-sm);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .healthcare-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        align-items: center; /* Resets stretch for single column */
    }
    
    .healthcare-main-image {
        min-height: 350px; /* Slightly shorter on tablet */
    }

    .healthcare-content {
        text-align: center;
        align-items: center; /* Centers button and text */
    }
    
    .healthcare-content .btn {
        align-self: center;
    }
}

@media (max-width: 768px) {
    .healthcare-main-image {
        min-height: 250px; /* Shorter on mobile */
    }

    /* Tighten the gap to the video section below (was ~64px on mobile) */
    .healthcare {
        padding-bottom: var(--space-lg);
    }
}

/* ========================================
   Testimonials Section
======================================== */
.testimonials {
    padding: var(--space-3xl) 0;
    background-color: var(--color-neutral);
}

.testimonials-header {
    margin-bottom: var(--space-xl);
}

.testimonials-header .section-title {
    margin-bottom: var(--space-xs);
}

.testimonials-header .section-subtitle {
    margin-bottom: 0;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns on desktop */
    gap: var(--space-lg);
    margin-bottom: var(--space-3xl);
}

/* Individual Card */
.testimonial-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: var(--space-lg);
    row-gap: var(--space-md);
    background-color: var(--color-neutral-100);
    padding: var(--space-xl);
    border-radius: var(--radius-md);
    transition: box-shadow var(--transition-base);
}

/* Quote spans the full card width, starting under the photo */
.testimonial-quote {
    grid-column: 1 / -1;
}

.testimonial-card:hover {
    box-shadow: var(--shadow-md);
}

/* Photo */
.testimonial-photo {
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.testimonial-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter var(--transition-base);
}

.testimonial-card:hover .testimonial-photo img {
    filter: grayscale(30%);
}

/* Text Body */
.testimonial-body {
    flex: 1;
    min-width: 0;
}

.testimonial-name {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.testimonial-quote {
    font-size: 0.9375rem;
    color: var(--color-neutral-500);
    font-style: normal;
    line-height: 1.7;
    position: relative;
    padding-left: var(--space-md);
    border-left: 3px solid var(--color-accent);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .testimonials-grid {
        gap: var(--space-md);
    }
}

@media (max-width: 768px) {
    /* Stack the cards 1 per row */
    .testimonials-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Stack image on top of text inside the card */
    .testimonial-card {
        grid-template-columns: 1fr;
        justify-items: center; /* Center the image */
        text-align: center; /* Center the text */
        padding: var(--space-lg);
    }

    /* Make the photo a smaller circle for the stacked layout */
    .testimonial-photo {
        width: 80px;
        height: 80px;
        border-radius: var(--radius-full); /* Perfect circle */
        margin-bottom: var(--space-md);
    }

    /* Adjust the quote border for vertical layout */
    .testimonial-quote {
        border-left: none;
        border-top: 3px solid var(--color-accent);
        padding-left: 0;
        padding-top: var(--space-md);
    }
}



   /* ========================================
   References — Horizontal Scroll Cards
   Image left, text right, scrollable track
======================================== */


.references-scroll-area {
    position: relative;
    overflow: hidden;
    margin: 0 calc(-1 * var(--space-md));  /* bleed to viewport edges */
}

/* Auto-sliding marquee (leftward, infinite, pauses on hover). Cards are rendered
   twice in the markup, so translateX(-50%) loops seamlessly. */
.references-track {
    display: flex;
    width: max-content;
    padding: var(--space-xs) 0 var(--space-md);
    animation: ref-marquee 55s linear infinite;
}

.references-track:hover {
    animation-play-state: paused;
}

@keyframes ref-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .references-track { animation: none; }
    .references-scroll-area { overflow-x: auto; }
}

.references-track::-webkit-scrollbar {
    display: none;
}

/* Fade edges */
.ref-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 64px;
    z-index: 2;
    pointer-events: none;
}

.ref-fade--left {
    left: 0;
    background: linear-gradient(to right, var(--color-neutral), transparent);
}

.ref-fade--right {
    right: 0;
    background: linear-gradient(to left, var(--color-neutral), transparent);
}

/* ---- Single Card ---- */
.ref-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-width: 500px;
    max-width: 520px;
    flex-shrink: 0;
    margin-right: var(--space-md);   /* trailing gap on every card → seamless -50% loop */
    background-color: var(--color-neutral-100);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.ref-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

/* Image — left side */
.ref-card-img {
    flex-shrink: 0;
    width: 200px;
    position: relative;
    overflow: hidden;
}

.ref-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.ref-card:hover .ref-card-img img {
    transform: scale(1.06);
}

/* Text — right side */
.ref-card-text {
    flex: 1;
    min-width: 0;
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ref-card-name {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--color-primary);
    margin-bottom: 6px;
    line-height: 1.3;
}

.ref-card-stats {
    font-size: 0.8125rem;
    color: var(--color-primary-light);
    font-weight: 500;
    margin-bottom: var(--space-sm);
    line-height: 1.5;
}

.ref-card-stats strong {
    font-weight: 600;
    color: var(--color-primary);
}

.ref-card-desc {
    font-size: 0.8125rem;
    color: var(--color-neutral-500);
    line-height: 1.6;
    margin-bottom: var(--space-sm);
}

.ref-card-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary-light);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    transition: color var(--transition-fast);
}

.ref-card-link:hover {
    color: var(--color-primary);
}

/* Stat grid inside a reference card (pulled from the Referenzen subpage) */
.ref-card-statgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
    margin-top: 6px;
}

.ref-stat {
    display: flex;
    flex-direction: column;
}

.ref-stat-val {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--color-primary);
    line-height: 1.1;
}

.ref-stat-lbl {
    margin-top: 3px;
    font-size: 0.62rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    line-height: 1.2;
}

/* "Alle Referenzen ansehen" link below the marquee */
.ref-more {
    text-align: center;
    margin-top: var(--space-xl);
}

.ref-more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 30px;
    background: var(--color-accent);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--radius-full);
    transition: background var(--transition-base), transform var(--transition-base);
}

.ref-more-link:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .ref-card {
        min-width: 400px;
        max-width: 420px;
    }

    .ref-card-img {
        width: 150px;
    }

    .ref-card-text {
        padding: var(--space-md);
    }

    .ref-card-name {
        font-size: 1rem;
    }

    .ref-card-desc {
        display: none;
    }

    .ref-fade--left,
    .ref-fade--right {
        width: 36px;
    }
}

@media (max-width: 480px) {
    .ref-card {
        min-width: 320px;
        max-width: 340px;
    }

    .ref-card-img {
        width: 120px;
    }

    .ref-card-statgrid {
        gap: 8px 12px;
    }

    .ref-stat-val {
        font-size: 0.95rem;
    }

    .ref-card-text {
        padding: var(--space-sm) var(--space-md);
    }
}
 /* ========================================
   Contact CTA Section (Two Cards)
======================================== */
.contact-cta {
    padding: var(--space-3xl) 0;
    background-color: var(--color-neutral); /* white */
}

.contact-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: stretch;
}

/* Base Card Style */
.cta-card {
    background-color: var(--color-neutral);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.cta-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

/* Left Card Specifics */
.cta-card-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.cta-card-text {
    font-size: 0.9375rem;
    color: var(--color-neutral-500);
    margin-bottom: var(--space-lg);
}

.cta-contact-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

.cta-contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    transition: color var(--transition-fast);
}

.cta-contact-item svg {
    color: var(--color-primary-light);
    flex-shrink: 0;
}

.cta-contact-item:hover {
    color: var(--color-primary-light);
}

/* Outline Button specifically for light backgrounds */
.btn-outline-dark {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    margin-top: auto; /* Pushes button to the bottom of the card */
    align-self: flex-start;
}

.btn-outline-dark:hover {
    background-color: var(--color-primary);
    color: var(--color-neutral);
    transform: translateY(-2px);
}

/* Right Card Specifics */
.cta-card--promo {
    background-color: var(--color-neutral);
    justify-content: center; /* Centers content vertically */
}

.cta-card-promo-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(1.375rem, 2.5vw, 1.875rem);
    line-height: 1.25;
    color: var(--color-primary);
    margin-bottom: var(--space-xl);
}

.cta-card-promo-title .highlight {
    color: var(--color-accent);
}

.cta-card--promo .btn {
    align-self: flex-start; /* Keeps button from stretching */
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .contact-cta-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .cta-card {
        padding: var(--space-xl);
    }

    .cta-card--promo {
        text-align: center;
    }

    .cta-card--promo .btn,
    .btn-outline-dark {
        align-self: center; /* Center buttons on mobile */
        width: 100%; /* Optional: makes buttons full width on mobile */
        max-width: 300px;
    }
}
    /* Footer */
    .footer { background-color: var(--color-bg-dark-2); color: var(--color-neutral); padding: var(--space-2xl) 0 0; }
    .footer-main { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-xl); padding-bottom: var(--space-md); border-bottom: 1px solid rgba(255,255,255,0.08); }
    .footer-intro h2 { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.375rem,2.2vw,1.75rem); line-height: 1.15; color: #ffffff; margin-bottom: var(--space-sm); }
    .footer-intro p { font-size: 0.9375rem; color: #ffffff; line-height: 1.6; margin-bottom: var(--space-md); }
    .footer-column h4 { font-family: var(--font-heading); font-weight: 700; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: #ffffff; margin-bottom: var(--space-md); }
    .footer-column ul li { margin-bottom: var(--space-sm); }
    .footer-column ul li a { font-size: 0.9375rem; color: #ffffff; transition: color var(--transition-fast); display: inline-flex; align-items: center; gap: 6px; }
    .footer-column ul li a:hover { color: var(--color-accent); }
    .footer-contact-item { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
    .footer-contact-item svg { width: 18px; height: 18px; stroke: var(--color-accent); fill: none; stroke-width: 2; flex-shrink: 0; }
    .footer-contact-item a, .footer-contact-item span { font-size: 0.9375rem; color: #ffffff; }
    .footer-contact-item a:hover { color: var(--color-accent); }
    .footer-social-intro { font-size: 0.9375rem; color: #ffffff; line-height: 1.6; margin-bottom: var(--space-sm); }
    .footer-address { font-size: 0.875rem; color: #ffffff; line-height: 1.6; margin-bottom: var(--space-md); }
    .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: var(--space-sm) 0; }
    .footer-logo { display: flex; align-items: center; gap: var(--space-sm); }
    .footer-logo img { height: 28px; width: auto; }
    .footer-logo-text { font-size: 0.75rem; color: rgba(255,255,255,0.8); }
    .footer-legal { display: flex; gap: var(--space-lg); }
    .footer-legal a { font-size: 0.8125rem; color: rgba(255,255,255,0.8); transition: color var(--transition-fast); }
    .footer-legal a:hover { color: var(--color-accent); }

    /* Back to Top */
    .back-to-top {
        position: fixed; bottom: var(--space-lg); right: var(--space-lg);
        width: 48px; height: 48px; background-color: var(--color-primary-light);
        color: var(--color-neutral); border-radius: var(--radius-md);
        display: flex; align-items: center; justify-content: center;
        opacity: 0; visibility: hidden; transform: translateY(20px);
        transition: all var(--transition-base); z-index: 999; box-shadow: var(--shadow-md);
    }
    .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
    .back-to-top:hover { background-color: var(--color-primary); transform: translateY(-2px); }

    /* Toast */
    .toast {
        position: fixed; bottom: var(--space-lg); left: 50%;
        transform: translateX(-50%) translateY(100px);
        background-color: var(--color-primary); color: var(--color-neutral);
        padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-md);
        font-size: 0.9375rem; font-weight: 500; box-shadow: var(--shadow-xl);
        z-index: 9999; opacity: 0; transition: all var(--transition-base);
        border-left: 4px solid var(--color-accent);
    }
    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* ========================================
       Responsive
    ======================================== */
    @media (max-width: 1024px) {
        .solutions-grid { grid-template-columns: repeat(3,1fr); }
        .phases-grid::before { display: none; }
        .about-grid, .healthcare-grid, .contact-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
        .location-section { grid-template-columns: 1fr; text-align: center; }
        .location-map { max-width: 280px; margin: 0 auto; }
        .footer-main { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
        .footer-intro { grid-column: 1 / -1; }
        .footer-bottom { flex-direction: column; gap: var(--space-md); text-align: center; }
        .footer-legal { flex-wrap: wrap; justify-content: center; }
        .why-grid { grid-template-columns: 1fr; }
        .hero-stats { grid-template-columns: repeat(2,1fr); }
    }

    @media (max-width: 768px) {
        /* Mobile nav uses the right-side drawer defined in the max-width:992px block.
           The old full-screen overlay here conflicted (its top:0 let the drawer
           content scroll up under the fixed logo), so it's removed. */
        .nav-menu a { font-size: 1.25rem; }
        .nav-cta { margin-left: 0 !important; margin-top: var(--space-md); }
        .nav-toggle { display: flex; }
        .nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
        .nav-toggle.active span:nth-child(2) { opacity: 0; }
        .nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
        .dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; box-shadow: none; padding: var(--space-sm) 0; }
        .dropdown-menu a { color: var(--color-neutral) !important; font-size: 1rem !important; }

        .footer-main { grid-template-columns: 1fr 1fr; }

        .hero { min-height: 100vh; }
        .hero-inner { max-width: 100%; }
        .hero-title { font-size: clamp(2rem, 8vw, 2.75rem); }
        .hero-description { font-size: 0.9375rem; }
        .hero-actions { flex-direction: column; }
        .hero-stats { grid-template-columns: repeat(2,1fr); }
        .hero-scroll { display: none; }


/* ========================================
   Hero — Video Background
======================================== */
.hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: 72px;
    z-index: 1; /* Base layer */
}

.hero-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        135deg,
        rgba(10, 21, 28, 0.92) 0%,
        rgba(26, 50, 64, 0.85) 40%,
        rgba(26, 50, 64, 0.6) 70%,
        rgba(26, 50, 64, 0.45) 100%
    );
}

.hero-video-grain {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-3xl) var(--space-md);
}

.hero-inner {
    max-width: 620px;
}

.hero-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-md);
}

.hero-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(2.5rem, 5.5vw, 4rem);
    color: var(--color-neutral);
    line-height: 1.05;
    overflow-wrap: break-word;
    hyphens: none; /* no ugly mid-word hyphenation in headings; overflow-wrap still breaks over-long words */
    margin-bottom: var(--space-lg);
    text-align: center;
    width: 100%;
}

.hero-title .highlight { color: var(--color-accent); }

.hero-description {
    color: rgba(255,255,255,0.7);
    font-size: 1.0625rem;
    line-height: 1.7;
    margin-bottom: var(--space-xl);
    text-align: center;
    width: 100%;
}

.hero-actions {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-2xl);
    flex-wrap: wrap;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255,255,255,0.12);
    max-width: 620px;
}

.hero-stat { text-align: left; }

.hero-stat-value {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--color-accent);
    line-height: 1;
    margin-bottom: 4px;
}

.hero-stat-label {
    font-size: 0.6875rem;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
}

.hero-scroll {
    position: absolute;
    bottom: var(--space-lg);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.4);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    animation: heroScrollBounce 2s ease-in-out infinite;
}

.hero-scroll-line {
    width: 1px;
    height: 32px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
}

@keyframes heroScrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

/* ========================================
   Solutions — Floating Over Hero
======================================== */
.solutions {
    position: relative;
    z-index: 10; /* MUST be higher than hero's z-index of 1 */
    margin-top: -275px; /* THE KEY: Pulls the entire section up into the hero video */
    padding-top: 0; /* No extra top padding - let it sit high */
    padding-bottom: var(--space-3xl);
    background-color: transparent; /* Transparent so hero video shows behind the overlap area */
}

/* Pseudo-element: Light background starts AFTER the cards overlap zone */
.solutions::before {
    content: '';
    position: absolute;
    top: 280px; /* Background starts here (below the floating cards) */
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-neutral-100);
    z-index: -1; /* Behind the content */
}

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background-color: var(--color-neutral-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: 
        0 -10px 30px rgba(0, 0, 0, 0.15),  /* Top shadow for lift effect */
        0 25px 50px -12px rgba(0, 0, 0, 0.4); /* Bottom heavy shadow for depth */
    margin-bottom: var(--space-xl);
}



/* SVG Icon Styling — MUCH BIGGER */
.solution-icon {
    width: 100px;  /* Significantly increased from 48px */
    height: 100px; /* Significantly increased from 48px */
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.solution-icon svg {
    width: 100%;
    height: 100%;
}

.solution-number {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.5rem; /* Larger number to match */
    color: var(--color-accent);
    margin-bottom: var(--space-lg);
}

.solution-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 26px; /* Slightly larger title */
    color: var(--color-primary);
    
    line-height: 1.3;
}

.solution-desc {
    font-size: 0.875rem;
    color: var(--color-neutral-500);
    line-height: 1.5;
    margin-top: auto;
}

/* Highlighted Card */
.solution-card--highlighted {
    background-color: var(--color-primary);
}

.solution-card--highlighted .solution-icon {
    color: var(--color-accent);
}

.solution-card--highlighted .solution-number { color: var(--color-accent); }
.solution-card--highlighted .solution-title { color: var(--color-neutral); }
.solution-card--highlighted .solution-desc { color: rgba(255,255,255,0.6); }
.solution-card--highlighted:hover { background-color: var(--color-primary-dark); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .solutions {
        margin-top: -150px; /* Less overlap on tablet */
    }
    .solutions::before {
        top: 220px;
    }
    .solutions-grid { 
        grid-template-columns: repeat(3, 1fr); 
    }
    .solution-icon {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 768px) {
    .solutions {
        margin-top: -100px; /* Less overlap on mobile */
    }
    .solutions::before {
        top: 180px;
    }
    .solutions-grid { 
        grid-template-columns: 1fr 1fr; 
    }
    .solution-card:last-child { grid-column: 1 / -1; }
    .solution-icon {
        width: 48px;
        height: 48px;
    }
    .solution-number {
        font-size: 1.25rem;
    }
    .solution-title {
        font-size: 1rem;
    }
}
    }


/* ========================================
   VIDEO FEATURE SECTION (Overlapping Design)
======================================== */
.video-feature-section {
    padding: 0 0 var(--space-2xl);
    margin-top: calc(-1 * var(--space-xl));
    background-color: var(--color-bg-neutral);
}

.vf-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.vf-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Left video area is much bigger */
    align-items: center;
}

/* Single-column variant: video only, no side text */
.vf-grid--single {
    grid-template-columns: 1fr;
}

/* --- Video area: no box, centered under the section above --- */
.vf-video-area {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    z-index: 2;
    cursor: pointer;
    max-width: 820px;
    margin: 0 auto;
}

/* Centered heading above the video */
.vf-heading {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    line-height: 1.2;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 2rem;
}

/* Inner frame for the video itself */
.vf-video-frame {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.vf-video-area:hover .vf-video-frame {
    transform: scale(1.02);
    box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.35);
}

.vf-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vf-video-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%);
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.vf-caption {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #FFFFFF;
    z-index: 2;
    line-height: 1.4;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.vf-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 64px;
    height: 64px;
    background-color: #E53E3E;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 15px rgba(229, 62, 62, 0.4);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.vf-play-btn svg { margin-left: 3px; }

.vf-play-btn:hover {
    background-color: #C53030;
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(229, 62, 62, 0.6);
}

/* --- Playing State: Hide Overlays --- */
.vf-video-area.playing .vf-video-gradient,
.vf-video-area.playing .vf-caption,
.vf-video-area.playing .vf-play-btn {
    opacity: 0;
    pointer-events: none;
}

/* --- Right Column: Smaller Overlapping Text Area --- */
.vf-text-area {
    background-color: #FFFFFF;
    padding: 3rem;
    margin-left: -2rem; /* THE OVERLAP: Pulls text box over the navy wrapper */
    
    position: relative;
    
    /* 3-sided border */
    border-top: 3px solid #1A3240;
    border-right: 3px solid #1A3240;
    border-bottom: 3px solid #1A3240;
    border-left: none; /* No left border */
    
    border-radius: 0 1rem 1rem 0; /* Rounded right corners only */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vf-text {
    font-size: 1rem;
    color: #6B7B8A;
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

.vf-btn {
    background-color: transparent;
    color: #1A3240;
    border: 2px solid #1A3240;
    padding: 0.75rem 1.5rem;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.9375rem;
    font-family: var(--font-body);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    align-self: flex-start;
    text-decoration: none;
}

.vf-btn:hover {
    background-color: #1A3240;
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .vf-grid {
        grid-template-columns: 1.3fr 1fr;
    }
    .vf-grid--single {
        grid-template-columns: 1fr;
    }
    .vf-video-area {
        padding: 0;
    }
    .vf-text-area {
        margin-left: -2rem;
        padding: 2rem;
    }
}

@media (max-width: 768px) {
    .vf-grid {
        grid-template-columns: 1fr;
    }
    .vf-video-area {
        padding: 0;
    }
    .vf-text-area {
        margin-left: 0;
        margin-top: -2rem; /* Overlaps vertically on mobile */
        margin-left: 1.5rem; /* Indent to show overlap */
        margin-right: 1.5rem;
        border-left: 3px solid #1A3240; /* Add left border back for mobile */
        border-radius: 1rem; /* Round all corners for mobile */
        text-align: center;
        align-items: center;
    }
    .vf-btn {
        align-self: center;
    }
}


/*  SECOND PAGE 
====Geverbe-industrie
*/


/* ========================================
   Page Hero (Subpages)
======================================== */
.page-hero {
    background-color: var(--color-primary);
    padding: calc(72px + var(--space-3xl)) 0 var(--space-3xl); /* Extra top padding for fixed navbar */
    position: relative;
    overflow: hidden;
}

/* Subtle texture/gradient to match homepage feel */
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(25, 99, 166, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.page-hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.page-hero-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-md);
}

.page-hero-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 3.25rem);
    color: var(--color-neutral);
    line-height: 1.1;
    margin-bottom: var(--space-lg);
}

.page-hero-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: var(--space-xl);
}

/* ========================================
   Features Section (3 Column Cards)
======================================== */
.features-section {
    padding: var(--space-3xl) 0;
    background-color: var(--color-neutral);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

/* Card Structure */
.feature-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-neutral);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
    border: 1px solid var(--color-neutral-200);
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

/* Image */
.feature-card-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.feature-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.feature-card:hover .feature-card-image img {
    transform: scale(1.06);
}

/* Content */
.feature-card-content {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.feature-card-content h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
    line-height: 1.3;
}

.feature-card-content p {
    font-size: 0.9375rem;
    color: var(--color-neutral-500);
    line-height: 1.65;
    margin-bottom: var(--space-lg);
}

/* Button */
.feature-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto; /* Pins button to bottom */
    padding: 0.75rem 1.25rem;
    background-color: var(--color-accent);
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
    text-decoration: none;
    text-align: center;
}

.feature-card-btn:hover {
    background-color: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
    }
}

@media (max-width: 768px) {
    .page-hero {
        padding: calc(72px + var(--space-xl)) 0 var(--space-xl);
    }

    .page-hero-desc {
        font-size: 1rem;
    }

    .features-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
        max-width: 450px;
        margin: 0 auto;
    }
}



/* -- THIRD PAGE --
    ---EAAS----
*/

/* ========================================
   EaaS Benefits Section
======================================== */
 /* ── Shared button ── */
  .btn {
    display: inline-block;
    padding: 0.85rem 2rem;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), transform var(--transition-fast);
    border: none;
  }
  .btn:hover { transform: translateY(-2px); }
  .btn--yellow { background: var(--color-btn); color: var(--color-dark); }
  .btn--yellow:hover { background: var(--color-primary); color: var(--color-neutral); }
 
  /* ════════════════════════════════════════════════
     EAAS HERO
  ════════════════════════════════════════════════ */
  .eaas-hero {
    background: var(--color-bg-dark-2);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-2xl);
    padding: var(--space-3xl) var(--space-2xl);
  }
 
  .eaas-hero__left {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    animation: fadeInLeft 0.7s ease both;
  }
 
  .eaas-hero__eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-btn);
  }
 
  .eaas-hero__heading {
    font-size: clamp(1.6rem, 2.8vw, 2.5rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-neutral);
  }
 
  .eaas-hero__underline {
    text-decoration: underline;
    text-decoration-color: var(--color-btn);
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
  }
 
  .eaas-hero__body {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--color-neutral-300);
    max-width: 480px;
  }
 
  .eaas-hero__right {
    animation: fadeInRight 0.7s ease 0.1s both;
  }
 
  .eaas-hero__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
  }
 
  /* ════════════════════════════════════════════════
     BENEFIT CARDS
  ════════════════════════════════════════════════ */
  .eaas-benefits {
    background: var(--color-neutral-100);
    padding: var(--space-3xl) var(--space-2xl);
  }
 
  .eaas-benefits__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
 
  .eaas-benefit-card {
    background: var(--color-neutral);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    display: flex;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    animation: fadeInUp 0.6s ease both;
  }
  .eaas-benefit-card:nth-child(1) { animation-delay: 0.05s; }
  .eaas-benefit-card:nth-child(2) { animation-delay: 0.15s; }
  .eaas-benefit-card:nth-child(3) { animation-delay: 0.25s; }
  .eaas-benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
 
  .eaas-benefit-card__accent {
    width: 4px;
    background: var(--color-btn);
    flex-shrink: 0;
  }
 
  .eaas-benefit-card__body {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }
 
  .eaas-benefit-card__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-primary);
  }
 
  .eaas-benefit-card__desc {
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--color-neutral-500);
  }
 
  /* ════════════════════════════════════════════════
     ANIMATIONS
  ════════════════════════════════════════════════ */
  @keyframes fadeInLeft  { from { opacity:0; transform:translateX(-28px); } to { opacity:1; transform:translateX(0); } }
  @keyframes fadeInRight { from { opacity:0; transform:translateX( 28px); } to { opacity:1; transform:translateX(0); } }
  @keyframes fadeInUp    { from { opacity:0; transform:translateY( 20px); } to { opacity:1; transform:translateY(0); } }
 
  /* ════════════════════════════════════════════════
     RESPONSIVE
  ════════════════════════════════════════════════ */
  @media (max-width: 860px) {
    .eaas-hero {
      grid-template-columns: 1fr;
      padding: var(--space-2xl) var(--space-sm);
    }
    .eaas-benefits__inner { grid-template-columns: 1fr; }
    .eaas-benefits { padding: var(--space-2xl) var(--space-sm); }
  }
.eaas-benefits {
    padding: var(--space-3xl) 0;
    background-color: var(--color-neutral);
}

.eaas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

/* Card Structure */
.eaas-card {
    background-color: var(--color-neutral);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    text-align: center;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.eaas-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.eaas-card__img {
  width: 100%;
  height: auto;
  display: block;
}
.eaas-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
    background-color: var(--color-primary);
}

/* Icon */
.eaas-card-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background-color: rgba(26, 50, 64, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin-bottom: var(--space-lg);
    transition: all var(--transition-base);
}

.eaas-card:hover .eaas-card-icon {
    background-color: var(--color-accent);
    color: var(--color-primary);
}

/* Typography */
.eaas-card-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
    line-height: 1.3;
    transition: color var(--transition-base);
}

.eaas-card:hover .eaas-card-title {
    color: var(--color-neutral);
}

.eaas-card-desc {
    font-size: 0.9375rem;
    color: var(--color-neutral-500);
    line-height: 1.65;
    transition: color var(--transition-base);
}

.eaas-card:hover .eaas-card-desc {
    color: rgba(255, 255, 255, 0.7);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .eaas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .eaas-grid {
        grid-template-columns: 1fr; /* 1 card per row on mobile */
        max-width: 450px;
        margin: 0 auto;
    }
}


/* ---- page 4 --
    --- grossbatteriespeicher ---
*/
/* ========================================
   Process Section (Step-by-Step)
======================================== */
.process-section {
    padding: var(--space-3xl) 0;
    background-color: var(--color-neutral);
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-xl);
    position: relative;
}

/* Connecting line behind the cards */
.process-grid::before {
    content: '';
    position: absolute;
    top: 48px; /* Aligns with the center of the number circle */
    left: 16.66%; /* Starts at center of first card */
    right: 16.66%; /* Ends at center of last card */
    height: 2px;
    background-color: var(--color-neutral-200);
    z-index: 0;
}

.process-card {
    position: relative;
    z-index: 1; /* Sits above the line */
    background-color: var(--color-neutral);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    transition: all var(--transition-base);
}

.process-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
    background-color: var(--color-primary);
}

/* Step Number Circle */
.process-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background-color: var(--color-accent);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: var(--space-lg);
    transition: all var(--transition-base);
}

.process-card:hover .process-step-number {
    background-color: #FFFFFF;
    color: var(--color-primary);
    transform: scale(1.1);
}

/* Typography */
.process-step-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
    line-height: 1.3;
    transition: color var(--transition-base);
}

.process-card:hover .process-step-title {
    color: #FFFFFF;
}

.process-step-desc {
    font-size: 0.9375rem;
    color: var(--color-neutral-500);
    line-height: 1.65;
    transition: color var(--transition-base);
}

.process-card:hover .process-step-desc {
    color: rgba(255, 255, 255, 0.7);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Hide line on 2-col layout as it doesn't align well */
    .process-grid::before {
        display: none;
    }
}

@media (max-width: 768px) {
    .process-grid {
        grid-template-columns: 1fr; /* 1 card per row on mobile */
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .process-card {
        text-align: left; /* Left align text on mobile */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .process-step-number {
        margin-bottom: var(--space-md);
    }
}



/* --- page 5 ---

--- Freiflächen---
*/
/* ========================================
   Benefits Section (Shared for EaaS & Freiflächen)
======================================== */
.eaas-benefits {
    padding: var(--space-3xl) 0;
    background-color: var(--color-neutral);
}

.eaas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.eaas-card {
    background-color: var(--color-neutral);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    text-align: center;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.eaas-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
    background-color: var(--color-primary);
}

.eaas-card-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background-color: rgba(26, 50, 64, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin-bottom: var(--space-lg);
    transition: all var(--transition-base);
}

.eaas-card:hover .eaas-card-icon {
    background-color: var(--color-accent);
    color: var(--color-primary);
}

.eaas-card-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
    line-height: 1.3;
    transition: color var(--transition-base);
}

.eaas-card:hover .eaas-card-title {
    color: var(--color-neutral);
}

.eaas-card-desc {
    font-size: 0.9375rem;
    color: var(--color-neutral-500);
    line-height: 1.65;
    transition: color var(--transition-base);
}

.eaas-card:hover .eaas-card-desc {
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 1024px) {
    .eaas-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .eaas-grid {
        grid-template-columns: 1fr;
        max-width: 450px;
        margin: 0 auto;
    }
}

/* ========================================
   REFERENCES PAGE: Overlapping Hero
======================================== */

/* --- Hero Container --- */
.ref-hero {
    position: relative;
    min-height: 300px; /* Room for the editorial title on the image */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20; /* Must sit above the sticky .blog-filter (z-index 10) */
}

/* Background Image */
.ref-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ref-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dark Gradient Overlay */
.ref-hero-overlay {
    position: absolute;
    inset: 0;
    /* Scrim: darker at the bottom-left where the title sits, clearer at the top. */
    background:
        linear-gradient(0deg, rgba(10, 21, 28, 0.85) 0%, rgba(10, 21, 28, 0) 58%),
        linear-gradient(90deg, rgba(10, 21, 28, 0.55) 0%, rgba(10, 21, 28, 0) 60%);
    z-index: 1;
}

/* Top Left Eyebrow */
.ref-hero-eyebrow {
    position: absolute;
    top: 120px; /* Below navbar */
    left: 5%;
    z-index: 2;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}



/* --- Editorial title — sits on the image (bottom-left), no box --- */
.ref-hero-badge {
    position: absolute;
    left: 6%;
    right: auto;
    bottom: 44px;
    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;

    padding-left: 24px; /* room for the accent bar */
    max-width: min(88vw, 840px);

    animation: heroTitleIn 0.7s cubic-bezier(.2, .7, .2, 1) both;
}

/* yellow vertical accent bar down the left of the content */
.ref-hero-badge::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 999px;
    background: var(--color-accent);
}

.ref-hero-badge__eyebrow {
    font-family: var(--font-heading);
    font-size: clamp(0.72rem, 1.4vw, 0.9rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.ref-hero-badge__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(1rem, 5.5vw, 3rem);
    line-height: 1.08;
    color: #FFFFFF;
    text-align: left;
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45);
    overflow-wrap: break-word;
    hyphens: none; /* no ugly mid-word hyphenation in headings; overflow-wrap still breaks over-long words */
}

/* News article hero: long sentence-style titles → smaller + wider so they
   don't grow up into the header. */
.ref-hero--article .ref-hero-badge {
    max-width: min(92vw, 1150px);
}
.ref-hero--article .ref-hero-badge__title {
    font-size: clamp(1.5rem, 3.2vw, 2.5rem);
    line-height: 1.15;
}

@keyframes heroTitleIn {
    from { opacity: 0; transform: translateX(-32px); }
    to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .ref-hero-badge { animation: none; }
}

/* --- Split Section (Grid Layout) --- */
.ref-split-section {
    padding-top: var(--space-xl); /* Extra top padding to clear the badge */
    padding-bottom: var(--space-3xl);
    background-color: var(--color-bg-neutral);
    position: relative;
    z-index: 0; /* Sits behind the badge */
}

.ref-split-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr; 
    gap: var(--space-2xl);
    align-items: center; 
}

.ref-split-text { }

.ref-split-heading {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    line-height: 1.2;
    color: var(--color-primary);
    margin-bottom: var(--space-lg);
    overflow-wrap: break-word;
    hyphens: none; /* no ugly mid-word hyphenation in headings; overflow-wrap still breaks over-long words */
}

.ref-split-desc {
    font-size: var(--text-body);
    color: var(--color-neutral-500);
    line-height: 1.7;
}

.ref-split-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.ref-split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 4 / 3; 
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .ref-hero {
        min-height: 300px;
    }
}

@media (max-width: 768px) {
    .ref-hero {
        min-height: 200px;
    }

    .ref-hero-eyebrow {
        top: 100px;
        left: var(--space-md);
        font-size: 0.6875rem;
    }

    .ref-hero-badge {
        left: var(--space-md);
        bottom: 28px;
        padding-left: 16px;
        max-width: 88vw;
    }
    .ref-hero-badge::before {
        left: 0;
    }
    .ref-hero-badge__title {
        font-size: clamp(1.3rem, 6vw, 1.8rem);
    }

    .ref-split-section {
        padding-top: var(--space-lg);
    }

    .ref-split-grid {
        grid-template-columns: 1fr; 
        gap: var(--space-xl);
    }

    .ref-split-text {
        text-align: center; 
    }

    .ref-split-image {
        max-width: 500px;
        margin: 0 auto; 
    }
}

/* ========================================
   Section Divider Line
======================================== */
.section-divider {
    border: 0;
    height: 4px; /* Thickness of the line */
    background-color: var(--color-primary); /* Dark Navy #1A3240 */
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
}


/* =========================
   PROJECT SHOWCASE SECTION
========================= */

.project-showcase {
  padding: 80px 20px;
  background: var(--color-bg-neutral);
  overflow: hidden;
}

.project-wrapper {
  max-width: 1400px;
  margin: auto;
  display: flex;
  align-items: stretch;
  gap: 28px;
  position: relative;
}

/* =========================
   LEFT COLUMN
========================= */

.project-left {
  position: relative;
  width: 650px;
  flex-shrink: 0;
  background: var(--color-bg-light);
  border-radius: 28px;
  padding: 18px;
  z-index: 3;
}

/* TOP LABEL */

.project-badge {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: #0f2f45;
  color: #fff;
  padding: 16px 34px;
  border-radius: 20px;
  font-size: 17px;
  font-weight: 600;
  z-index: 5;
  white-space: nowrap;
}

/* IMAGE */

.project-image {
  overflow: hidden;
  border-radius: 26px;
  cursor: pointer;
}

.project-image img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}

.project-left:hover .project-image img {
  transform: scale(1.04);
}

/* =========================
   STATS BELOW IMAGE
========================= */

.project-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 10px;
}

.stat-box {
  background: #0f2f45;
  color: white;
  border-radius: 24px;
  padding: 15px 10px;
  text-align: center;
  transition: all 0.35s ease;
}

.stat-box:hover {
  transform: translateY(-6px);
}

.stat-box h3 {
  font-size: 25px;
  margin-bottom: 8px;
  line-height: 1;
  font-weight: 600;
}

.stat-box p {
  font-size: 16px;
  line-height: 1;
  margin: 0;
}

/* =========================
   RIGHT POPUP PANEL
========================= */

.project-right {
  width: 0;
  opacity: 0;
  overflow: hidden;
  background: #0f2f45;
  border-radius: 30px;
  transform: translateX(60px);
  transition:
    width 0.7s cubic-bezier(.2,.8,.2,1),
    opacity 0.5s ease,
    transform 0.7s ease,
    padding 0.7s ease;
  padding: 0;
}

/* POP OUT ON HOVER */

.project-wrapper:hover .project-right {
  width: 650px;
  opacity: 1;
  transform: translateX(0);
  padding: 30px;
}

/* RIGHT CONTENT */

.project-content {
  width: 630px;
  color: white;
}

.project-content h2 {
  font-size: 25px;
  margin-bottom: 24px;
  font-weight: 600;
}

.project-content p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 22px;
}

.project-list {
  margin-top: 35px;
  padding-left: 0;
  list-style: none;
}

.project-list li {
  font-size: 16px;
  margin-bottom: 10px;
  color: #ffd700;
  font-weight: 600;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1200px) {

  .project-wrapper {
    flex-direction: column;
  }

  .project-left {
    width: 100%;
  }

  .project-right,
  .project-wrapper:hover .project-right {
    width: 100%;
    opacity: 1;
    padding: 40px 30px;
    transform: none;
  }

  .project-content {
    width: 100%;
  }
}

@media (max-width: 768px) {

  .project-showcase {
    padding: 60px 14px;
  }

  .project-badge {
    font-size: 16px;
    padding: 12px 22px;
  }

  .project-image img {
    height: 300px;
  }

  .project-stats {
    grid-template-columns: 1fr;
  }

  .stat-box {
    padding: 24px 16px;
  }

  .stat-box h3 {
    font-size: 34px;
  }

  .stat-box p {
    font-size: 18px;
  }

  .project-content h2 {
    font-size: 30px;
  }

  .project-content p {
    font-size: 17px;
  }

  .project-list li {
    font-size: 18px;
  }
}



    /* ─────────────────────────────────────────────────────────────────
       SECTION 1 — Hero intro with image + text (Image 3)
    ───────────────────────────────────────────────────────────────── */
    .section-intro {
      background: var(--color-neutral-100);
      padding: var(--space-3xl) var(--space-2xl);
      overflow: hidden;
    }

    .section-intro__inner {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-2xl);
      align-items: center;
    }

    .section-intro__text {
      animation: fadeInLeft 0.7s ease both;
    }

    .section-intro__eyebrow {
      display: inline-block;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--color-primary-light);
      margin-bottom: var(--space-sm);
      position: relative;
      padding-left: 1.4rem;
    }
    .section-intro__eyebrow::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 0.85rem;
      height: 2px;
      background: var(--color-accent);
    }

    .section-intro__heading {
      font-size: clamp(1.75rem, 3vw, 2.6rem);
      font-weight: 600;
      line-height: 1.2;
      color: var(--color-primary);
      margin-bottom: var(--space-md);
    }

    .section-intro__sub {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--color-primary);
      margin-bottom: var(--space-sm);
    }

    .section-intro__body {
      font-size: 0.95rem;
      line-height: 1.75;
      color: var(--color-neutral-500);
    }

    .section-intro__media {
      position: relative;
      animation: fadeInRight 0.7s ease 0.15s both;
    }

    .section-intro__img {
      width: 100%;
      height: 400px;
      object-fit: cover;
      border-radius: var(--radius-xl);
      display: block;
      box-shadow: var(--shadow-xl);
      /* placeholder colour */
      background: linear-gradient(135deg, #aac8de 0%, #d5e6ef 100%);
    }

    .section-intro__badge {
      position: absolute;
      bottom: -1.5rem;
      left: -1.5rem;
      background: var(--color-neutral);
      border-radius: var(--radius-lg);
      padding: var(--space-md) var(--space-lg);
      box-shadow: var(--shadow-lg);
      max-width: 240px;
    }

    .section-intro__badge-label {
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-neutral-500);
      margin-bottom: 0.35rem;
    }

    .section-intro__badge-title {
      font-size: 1.25rem;
      font-weight: 600;
      line-height: 1.25;
      color: var(--color-primary);
    }

    /* ─────────────────────────────────────────────────────────────────
       SECTION 2 — Why PV on municipal roofs (Image 2)
    ───────────────────────────────────────────────────────────────── */
    .section-why {
      background: var(--color-neutral);
      padding: var(--space-3xl) var(--space-2xl);
    }

    .section-why__inner {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-2xl);
      align-items: center;
    }

    .section-why__media {
      position: relative;
      animation: fadeInLeft 0.7s ease both;
    }

    .section-why__img {
      width: 100%;
      height: 420px;
      object-fit: cover;
      border-radius: var(--radius-xl);
      display: block;
      box-shadow: var(--shadow-xl);
      background: linear-gradient(135deg, #2d6a4f 0%, #74c69d 100%);
    }

    .section-why__badge {
      position: absolute;
      bottom: -1.5rem;
      right: -1.5rem;
      background: var(--color-neutral);
      border-radius: var(--radius-lg);
      padding: var(--space-md) var(--space-lg);
      box-shadow: var(--shadow-lg);
      max-width: 260px;
    }

    .section-why__badge-label {
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-neutral-500);
      margin-bottom: 0.35rem;
    }

    .section-why__badge-title {
      font-size: 1.1rem;
      font-weight: 600;
      line-height: 1.3;
      color: var(--color-primary);
    }

    .section-why__text {
      animation: fadeInRight 0.7s ease 0.15s both;
    }

    .section-why__heading {
      font-size: clamp(1.6rem, 2.8vw, 2.4rem);
      font-weight: 600;
      line-height: 1.25;
      color: var(--color-primary);
      margin-bottom: var(--space-md);
    }

    .section-why__p {
      font-size: 0.95rem;
      line-height: 1.8;
      color: var(--color-neutral-500);
      margin-bottom: var(--space-md);
    }
    .section-why__p:last-child { margin-bottom: 0; }

    .section-why__highlight {
      color: var(--color-primary-light);
      font-weight: 600;
    }

    /* ─────────────────────────────────────────────────────────────────
       SECTION 3 — Benefits cards (Image 1)
    ───────────────────────────────────────────────────────────────── */
    .section-benefits {
      background: var(--color-neutral-100);
      padding: var(--space-3xl) var(--space-2xl);
    }

    .section-benefits__inner {
      max-width: 1200px;
      margin: 0 auto;
    }

    .section-benefits__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-lg);
    }

    .benefit-card {
      background: var(--color-neutral);
      border-radius: var(--radius-xl);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: transform var(--transition-base), box-shadow var(--transition-base);
      display: flex;
      flex-direction: column;
      animation: fadeInUp 0.6s ease both;
    }
    .benefit-card:nth-child(1) { animation-delay: 0.05s; }
    .benefit-card:nth-child(2) { animation-delay: 0.15s; }
    .benefit-card:nth-child(3) { animation-delay: 0.25s; }
    .benefit-card:nth-child(4) { animation-delay: 0.35s; }

    .benefit-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
    }

    .benefit-card__img-wrap {
      position: relative;
      height: 200px;
      overflow: hidden;
    }

    .benefit-card__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform var(--transition-slow);
    }
    .benefit-card:hover .benefit-card__img {
      transform: scale(1.06);
    }

    /* placeholder colours per card */
    .benefit-card:nth-child(1) .benefit-card__img { background: linear-gradient(135deg, #b5c7d3 0%, #dde9f0 100%); }
    .benefit-card:nth-child(2) .benefit-card__img { background: linear-gradient(135deg, #f0c040 0%, #ffe794 100%); }
    .benefit-card:nth-child(3) .benefit-card__img { background: linear-gradient(135deg, #2980b9 0%, #74b9d4 100%); }
    .benefit-card:nth-child(4) .benefit-card__img { background: linear-gradient(135deg, #27ae60 0%, #a8e6bc 100%); }

    .benefit-card__accent-bar {
      height: 4px;
      background: var(--color-accent);
    }

    .benefit-card__body {
      padding: var(--space-md);
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .benefit-card__title {
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--color-primary);
      text-align: center;
      margin-bottom: var(--space-xs);
      line-height: 1.3;
    }

    .benefit-card__desc {
      font-size: 0.875rem;
      line-height: 1.65;
      color: var(--color-neutral-500);
      text-align: center;
      flex: 1;
    }

    /* ─────────────────────────────────────────────────────────────────
       DIVIDER
    ───────────────────────────────────────────────────────────────── */
    .section-divider {
      height: 6px;
      background: linear-gradient(90deg, var(--color-primary-darker) 0%, var(--color-primary-light) 60%, var(--color-primary-darker) 100%);
      border-radius: var(--radius-full);
      max-width: 95%;
      margin: 0 auto;
    }

    /* ─────────────────────────────────────────────────────────────────
       ANIMATIONS
    ───────────────────────────────────────────────────────────────── */
    @keyframes fadeInLeft {
      from { opacity: 0; transform: translateX(-30px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes fadeInRight {
      from { opacity: 0; transform: translateX(30px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ─────────────────────────────────────────────────────────────────
       RESPONSIVE
    ───────────────────────────────────────────────────────────────── */
    @media (max-width: 960px) {
      .section-benefits__grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .section-intro__inner,
      .section-why__inner {
        grid-template-columns: 1fr;
      }
      .section-intro__media { order: -1; }
      .section-intro__badge,
      .section-why__badge {
        left: var(--space-sm);
        right: auto;
        bottom: var(--space-sm);
      }
      .section-intro,
      .section-why,
      .section-benefits {
        padding: var(--space-2xl) var(--space-sm);
      }
    }

    @media (max-width: 520px) {
      .section-benefits__grid {
        grid-template-columns: 1fr;
      }
    }


    /* ── Section shells ── */
  .flow-section {
    padding: var(--space-3xl) var(--space-2xl);
  }
  .flow-section--white { background: var(--color-neutral); }
  .flow-section--grey  { background: var(--color-neutral-100); }
 
  .flow-section__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
  }
 
  /* ── Image ── */
  .flow-section__media { display: flex; align-items: center; }
 
  .flow-section__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
  }
 
  /* ── Text column ── */
  .flow-text__heading {
    font-size: clamp(1.6rem, 2.8vw, 2.3rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
  }
 
  .flow-text__sub {
    font-size: 0.95rem;
    color: var(--color-neutral-500);
    margin-bottom: var(--space-md);
  }
 
  .flow-text__body {
    font-size: 0.93rem;
    line-height: 1.8;
    color: var(--color-neutral-500);
    margin-bottom: var(--space-md);
  }
 
  .flow-text__label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
  }
 
  .flow-text__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
 
  .flow-text__list li {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--color-neutral-500);
    padding-left: 1.2rem;
    position: relative;
  }
  .flow-text__list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-size: 1.1rem;
    line-height: 1.4;
  }
  .flow-text__list strong {
    color: var(--color-primary);
    font-weight: 600;
  }
 
  /* ── Animations ── */
  @keyframes fadeInLeft  { from { opacity:0; transform:translateX(-30px); } to { opacity:1; transform:translateX(0); } }
  @keyframes fadeInRight { from { opacity:0; transform:translateX( 30px); } to { opacity:1; transform:translateX(0); } }
  .anim-left  { animation: fadeInLeft  0.7s ease both; }
  .anim-right { animation: fadeInRight 0.7s ease 0.1s both; }
 
  /* ── Responsive ── */
  @media (max-width: 860px) {
    .flow-section__inner { grid-template-columns: 1fr; }
    .flow-section { padding: var(--space-2xl) var(--space-sm); }
    /* keep image above text on mobile */
    .flow-section--white .flow-section__media { order: -1; }
  }



  /* ── Shared button ── */
  .btn {
    display: inline-block;
    padding: 0.85rem 2rem;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), transform var(--transition-fast);
    border: none;
  }
  .btn:hover { transform: translateY(-2px); }

  .btn--yellow {
    background: var(--color-btn);
    color: var(--color-primary);
  }
  .btn--yellow:hover { background: var(--color-btn-hover); color: var(--color-neutral); }

  .btn--dark {
    background: var(--color-btn);
    color: var(--color-primary);
    transition: transform var(--transition-fast), box-shadow var(--transition-base);
  }
  .btn--dark:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
  }

  /* ── Animations ── */
  @keyframes fadeInLeft  { from { opacity:0; transform:translateX(-28px); } to { opacity:1; transform:translateX(0); } }
  @keyframes fadeInRight { from { opacity:0; transform:translateX( 28px); } to { opacity:1; transform:translateX(0); } }
  @keyframes fadeInUp    { from { opacity:0; transform:translateY( 20px); } to { opacity:1; transform:translateY(0); } }
  .anim-left  { animation: fadeInLeft  0.7s ease both; }
  .anim-right { animation: fadeInRight 0.7s ease 0.1s both; }
  .anim-up    { animation: fadeInUp    0.6s ease both; }

  /* ════════════════════════════════════════════════
     SECTION 1 — Services grid
  ════════════════════════════════════════════════ */
  .services-section {
    background: var(--color-bg-neutral);
    padding: var(--space-3xl) var(--space-2xl);
  }

  .services-section__inner {
    max-width: 1200px;
    margin: 0 auto;
  }

  .services-section__header {
    text-align: center;
    margin-bottom: var(--space-2xl);
    animation: fadeInUp 0.6s ease both;
  }

  .services-section__eyebrow {
    font-size: 0.85rem;
    color: var(--color-neutral-500);
    margin-bottom: 0.5rem;
  }

  .services-section__heading {
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    font-weight: 600;
    color: var(--color-primary);
  }

  .services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
  }

  .service-card {
    background: var(--color-neutral);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-neutral-200);
    box-shadow: 0 1px 2px rgba(26,50,64,0.04), 0 10px 28px rgba(26,50,64,0.07);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    animation: fadeInUp 0.6s ease both;
    display: flex;
    flex-direction: column;
  }
  .service-card:nth-child(1) { animation-delay: 0.05s; }
  .service-card:nth-child(2) { animation-delay: 0.15s; }
  .service-card:nth-child(3) { animation-delay: 0.25s; }
  .service-card:nth-child(4) { animation-delay: 0.35s; }
  .service-card:nth-child(5) { animation-delay: 0.45s; }
  .service-card:nth-child(6) { animation-delay: 0.55s; }
  .service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 2px 4px rgba(26,50,64,0.06), 0 20px 44px rgba(26,50,64,0.16);
    border-color: var(--color-neutral-300);
  }

  .service-card__img-wrap {
    height: 210px;
    overflow: hidden;
    position: relative;
  }
  .service-card__img-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(26,50,64,0) 55%, rgba(26,50,64,0.22) 100%);
    pointer-events: none;
  }
  .service-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
  }
  .service-card:hover .service-card__img { transform: scale(1.06); }

  .service-card__body {
    padding: var(--space-lg) var(--space-md) var(--space-md);
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .service-card__title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.9rem;
    padding-bottom: 0.9rem;
    text-align: center;
    position: relative;
  }
  .service-card__title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    transition: width var(--transition-base);
  }
  .service-card:hover .service-card__title::after { width: 56px; }
  .service-card__title a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
  }
  .service-card:hover .service-card__title a,
  .service-card__title a:hover { color: var(--color-primary-light); }

  .service-card__desc {
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--color-neutral-500);
    text-align: center;
  }

  /* 5-card overview: larger card text */
  .services-grid--5up .service-card__title {
    font-size: 1.25rem;
  }
  .services-grid--5up .service-card__desc {
    font-size: 1rem;
  }
  /* 5-card overview on desktop: 3 cards on top, 2 centered below */
  @media (min-width: 1025px) {
    .services-grid--5up {
      grid-template-columns: repeat(6, 1fr);
    }
    .services-grid--5up .service-card {
      grid-column: span 2;
    }
    .services-grid--5up .service-card:nth-child(4) {
      grid-column: 2 / span 2;
    }
    .services-grid--5up .service-card:nth-child(5) {
      grid-column: 4 / span 2;
    }
  }

  /* 6-card overview: larger card text */
  .services-grid--6up .service-card__title {
    font-size: 1.25rem;
  }
  .services-grid--6up .service-card__desc {
    font-size: 1rem;
  }
  /* 6-card overview on desktop: 3 cards per row */
  @media (min-width: 1025px) {
    .services-grid--6up {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* ════════════════════════════════════════════════
     SECTION 2 — Persönliche Beratung
  ════════════════════════════════════════════════ */
  .consulting-section {
    background: var(--color-bg-neutral);
    padding: var(--space-3xl) var(--space-2xl);
  }

  .consulting-section__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
  }

  .consulting-text__heading {
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
  }
  .consulting-text__subheading {
    font-size: clamp(1.4rem, 2vw, 2rem);
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
  }

  .consulting-text__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
  }
  .consulting-text__items p {
    font-size: var(--text-body);
    line-height: 1.75;
    color: var(--color-neutral-500);
    padding-left: 1rem;

  }

  .consulting-media {
    position: relative;
  }
  .consulting-media__img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: var(--radius-xl);
    display: block;
    box-shadow: var(--shadow-xl);
  }
  .consulting-media__badge {
    position: absolute;
    bottom: -1.5rem;
    left: -1.5rem;
    background: var(--color-neutral);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    box-shadow: var(--shadow-lg);
    max-width: 220px;
  }
  .consulting-media__badge-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin-bottom: 0.4rem;
  }
  .consulting-media__badge-title {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-primary);
  }

  .btn-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  grid-column: 1 / -1;   /* spans full width inside the grid */
  margin-top: var(--space-lg);
}

/* =================================
    split block
    ===============================*/
    .split-block {
  background: var(--color-bg-neutral);
  padding: var(--space-2xl) var(--space-xl);
}

.split-block__inner {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  /* Wider gutter so the text column and the image sit further apart, each
     anchored toward its own outer edge (text left, image right). Matches the
     site-standard two-column gap (--space-2xl). */
  column-gap: var(--space-2xl);
  align-items: start;
}

/* Heading sits in its own top row; subheading-text and image share the next row
   so the image top aligns with the subheading, not the "Baustein" heading. */
.split-block__heading { grid-column: 1 / -1; grid-row: 1; }
.split-block__text    { grid-column: 1; grid-row: 2; }
.split-block__media   { grid-column: 2; grid-row: 2; }

.split-block__heading {
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  overflow-wrap: break-word;
  hyphens: none; /* wrap whole words to the next line instead of splitting (e.g. Energiekosten) */
}

/* Manual heading break: only active on the two-column layout (>768px) so the
   second clause drops to its own line instead of running above the image.
   On mobile (≤768px, stacked) the break is removed and the text reflows. */
.split-block__brk { display: none; }
@media (min-width: 769px) {
  .split-block__brk { display: inline; }
}

.split-block__subheading {
  font-size: clamp(1.3rem, 2vw, 2rem);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  overflow-wrap: break-word;
  hyphens: none; /* no ugly mid-word hyphenation in headings; overflow-wrap still breaks over-long words */
}

.split-block__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.split-block__points p,
.split-block__points li {
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--color-primary);
}

.split-block__btn-wrapper {
  display: flex;
  justify-content: center;
  margin-top: var(--space-lg);
}

/* Button rendered inside the media column (under the image). Extra top margin
   clears the badge that overhangs ~1.5rem below the image. */
.split-block__btn-wrapper--under-image {
  margin-top: var(--space-xl);
}

.split-block__media {
  position: relative;
}

/* Frame around the image so the overhanging badge anchors to the image, not to
   the media column (which may also hold a button below the image). */
.split-block__media-frame {
  position: relative;
}

.split-block__img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  display: block;
  box-shadow: var(--shadow-xl);
}

.split-block__badge {
  position: absolute;
  bottom: -1.5rem;
  left: -1.5rem;
  background: var(--color-neutral);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-lg);
  box-shadow: var(--shadow-lg);
  max-width: 440px;
}

.split-block__badge-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
  margin-bottom: 0.4rem;
}

.split-block__badge-title {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-primary);
  overflow-wrap: break-word;
  hyphens: none; /* keep words like "Fuhrpark" whole instead of splitting */
}

/* Ladeinfrastruktur intro heading: cap the width so the whole sentence
   "Mit oder ohne Eigenkapital." drops onto the second line, i.e. line 1
   ends right after "Speicher.". ch scales with the font. */
#li-s1-intro .split-block__heading {
  max-width: 40ch;
}

/* Ladeinfrastruktur intro badge: let it grow to the widest line so it stays
   wider but shorter (two lines) instead of hyphenating "Fuhr-park". */
#li-s1-intro .split-block__badge {
  max-width: none;
  width: max-content;
}
#li-s1-intro .split-block__badge-title {
  white-space: nowrap;
  overflow-wrap: normal;
  hyphens: none;
}

/* responsive */
@media (max-width: 768px) {
  .split-block__inner {
    grid-template-columns: 1fr;
  }

  .split-block__heading,
  .split-block__text,
  .split-block__media {
    grid-column: auto;
    grid-row: auto;
  }

  /* Shorter image on phones: 420px cover was portrait-tall and cropped
     subjects on the sides. A 4/3 box shows more of the photo, less scroll. */
  .split-block__img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  /* White info box was 340px wide (near full-width on a phone) and covered a
     big chunk of the photo. Shrink the box, padding and fonts so it reads as a
     compact caption rather than covering the subject. */
  .split-block__badge {
    bottom: -1rem;
    left: 0.5rem;
    max-width: min(240px, 66vw);
    padding: 0.7rem 0.95rem;
  }
  .split-block__badge-label {
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.25rem;
  }
  .split-block__badge-title {
    font-size: 0.9rem;
    line-height: 1.25;
  }

  /* On phones let the Ladeinfrastruktur badge wrap again so it never
     overflows the viewport. */
  #li-s1-intro .split-block__badge {
    width: auto;
    max-width: min(340px, calc(100vw - 2rem));
  }
  #li-s1-intro .split-block__badge-title {
    white-space: normal;
  }

  /* Über uns badge overhangs both sides full-width on desktop; on phones that's
     too wide, so drop the symmetric overhang and cap it like the other badges. */
  [id="80f8d41d-633c-41ad-9a26-8760ff0ad2fb"] .split-block__badge {
    left: 0.5rem;
    right: auto;
    max-width: min(240px, 66vw);
    padding: 0.7rem 0.95rem;
  }
}
 /* =================================
    split block reverse
    ===============================*/
    .feature-block {
  background: var(--color-bg-neutral);
  padding: var(--space-2xl) var(--space-xl);
}

.feature-block__inner {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  /* Wider gutter so the image and text column sit further apart, each
     anchored toward its own outer edge (image left, text right). Matches the
     site-standard two-column gap (--space-2xl). */
  column-gap: var(--space-2xl);
  align-items: start;
}

/* Large screens (>1440px): pull the image + text columns much closer to the
   viewport sides and open up a far wider gutter between them. Both values scale
   with the screen via clamp, so the effect grows on ultrawide monitors. Below
   1440px nothing changes — the centred 1360px layout above still applies. */
@media (min-width: 1440px) {
  .split-block,
  .feature-block {
    /* distance from each viewport side (smaller = closer to the edges) */
    padding-inline: clamp(64px, 5vw, 140px);
  }

  .split-block__inner,
  .feature-block__inner {
    max-width: none;                      /* fill the padded width instead of the 1360 cap */
    column-gap: clamp(96px, 10vw, 260px); /* much larger middle gap */
  }
}

/* One-off fix for the "Technische Betriebsführung" section (ds-s6-betrieb): it
   has only a short subheading + checklist and no body paragraph, so in the wide
   >1440 layout its text can't fill the column and the image is left stranded far
   to the right. Size the columns to the actual content, keep a tight gutter, and
   centre the text+image as a group so the section is symmetric and balanced
   instead of edge-to-edge. Only this section is affected. */
/* Desktop only — below 769px the block must keep its single-column stack, so this
   ID rule (higher specificity than the mobile rule) is scoped to min-width. */
@media (min-width: 769px) {
  #ds-s6-betrieb .split-block__inner {
    grid-template-columns: minmax(0, 540px) minmax(0, 640px);
    justify-content: center;
    column-gap: var(--space-2xl);
  }
}

/* Heading in its own top row (right column); subheading-text and image share the
   next row so the image top aligns with the subheading, not the "Baustein" heading. */
.feature-block__media   { grid-column: 1; grid-row: 2; }
.feature-block__heading { grid-column: 2; grid-row: 1; }
.feature-block__text    { grid-column: 2; grid-row: 2; }

.feature-block__heading {
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  overflow-wrap: break-word;
  hyphens: none; /* no ugly mid-word hyphenation in headings; overflow-wrap still breaks over-long words */
}

.feature-block__subheading {
  font-size: clamp(1.3rem, 2vw, 2rem);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  overflow-wrap: break-word;
  hyphens: none; /* no ugly mid-word hyphenation in headings; overflow-wrap still breaks over-long words */
}

.feature-block__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.feature-block__points p,
.feature-block__points li {
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--color-primary);
}

/* ── Baustein feature lists ───────────────────────────────────────────────
   Turn the flat "- " lists in split_block / reverse_split into a scannable
   checkmark list, and make the lead-in label (e.g. "Unsere Leistungen:")
   read as a distinct eyebrow so it gets pointed out. The accent circle +
   navy check stays legible on both the light-gray and dark Baustein bands. */
.split-block__points ul,
.feature-block__points ul {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.split-block__points li,
.feature-block__points li {
  position: relative;
  padding-left: 2.1rem;
}

.split-block__points li::before,
.feature-block__points li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-primary);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lead-in label like "Unsere Leistungen:" — pointed out as an eyebrow. */
.split-block__points strong,
.feature-block__points strong {
  display: inline-block;
  margin-bottom: 0.15rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* Dienstleistungen — Projektmanagement & Umsetzung: tighter vertical rhythm
   so the paragraphs sit more compactly toward the end of the section. */
#ds-s5-pm .feature-block__heading { margin-bottom: var(--space-sm); }
#ds-s5-pm .feature-block__subheading { margin-bottom: var(--space-sm); }
#ds-s5-pm .feature-block__points { gap: 0.65rem; margin-bottom: 0; }
#ds-s5-pm .feature-block__points ul { margin-top: 0.2rem; gap: 0.45rem; }

/* Über uns "Fachkompetenz" section: the bold closing line is a full sentence,
   not a label — render it as a normal-size bold statement, not the eyebrow. */
[id="80f8d41d-633c-41ad-9a26-8760ff0ad2fb"] .split-block__points strong {
  display: inline;
  margin: 0;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
}

/* Über uns team photo: the group shot gets cropped by the default 420px cover
   height (people on the edges are cut off). Show it at natural aspect ratio so
   the whole team is visible. */
[id="80f8d41d-633c-41ad-9a26-8760ff0ad2fb"] .split-block__img {
  height: auto;
  aspect-ratio: auto; /* keep the photo's natural ratio, not the mobile 4/3 box */
  object-fit: contain;
}

/* Über uns "Fachkompetenz" badge: symmetric — overhangs the image by the same
   1.5rem on the left and the right, so it sits centered under the image.
   Desktop only: on phones the mobile override above caps it (else the -1.5rem
   overhang makes it wider than the image and causes horizontal overflow). */
@media (min-width: 769px) {
  [id="80f8d41d-633c-41ad-9a26-8760ff0ad2fb"] .split-block__badge {
    left: -1.5rem;
    right: -1.5rem;
    max-width: none;
    padding: var(--space-xs) var(--space-lg);
  }
}

.feature-block__btn-wrapper {
  display: flex;
  justify-content: center;
  margin-top: var(--space-lg);
}

/* Button rendered inside the media column (under the image). Extra top margin
   clears the badge that overhangs ~1.5rem below the image frame. */
.feature-block__btn-wrapper--under-image {
  margin-top: var(--space-xl);
}

.feature-block__media {
  position: relative;
}

/* Frame around the image so the overhanging badge anchors to the image, not to
   the media column (which may also hold a button below the image). */
.feature-block__media-frame {
  position: relative;
}

.feature-block__img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  display: block;
  box-shadow: var(--shadow-xl);
}

.feature-block__badge {
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem; /* flipped to right since image is on the left */
  left: auto;
  background: var(--color-neutral);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-lg);
  box-shadow: var(--shadow-lg);
  max-width: 440px;
}

.feature-block__badge-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
  margin-bottom: 0.4rem;
}

.feature-block__badge-title {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-primary);
  overflow-wrap: break-word;
  hyphens: none; /* keep words like "Fuhrpark" whole instead of splitting */
}

/* responsive */
@media (max-width: 768px) {
  .feature-block__inner {
    grid-template-columns: 1fr;
  }

  /* Reset desktop grid placement and stack: heading -> text -> image */
  .feature-block__media,
  .feature-block__heading,
  .feature-block__text {
    grid-column: auto;
    grid-row: auto;
  }
  .feature-block__heading { order: 0; }
  .feature-block__text { order: 0; }
  .feature-block__media { order: 1; } /* image always after the title/header */

  /* Shorter image on phones (matches split-block): 4/3 box instead of a
     portrait-tall 420px crop. */
  .feature-block__img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  /* Shrink the white info box, padding and fonts so it caps the photo as a
     compact caption instead of covering the subject. */
  .feature-block__badge {
    bottom: -1rem;
    right: 0.5rem;
    left: auto;
    max-width: min(240px, 66vw);
    padding: 0.7rem 0.95rem;
  }
  .feature-block__badge-label {
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.25rem;
  }
  .feature-block__badge-title {
    font-size: 0.9rem;
    line-height: 1.25;
  }
}

/* Tighter vertical spacing between consecutive Baustein blocks (split / reverse) */
.split-block + .split-block,
.split-block + .feature-block,
.feature-block + .split-block,
.feature-block + .feature-block {
  padding-top: var(--space-md);
}
.split-block:has(+ .split-block),
.split-block:has(+ .feature-block),
.feature-block:has(+ .split-block),
.feature-block:has(+ .feature-block) {
  padding-bottom: var(--space-md);
}

  /* ════════════════════════════════════════════════
     SECTION 3 — CTA banner
  ════════════════════════════════════════════════ */
  .cta-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 480px;
  }

  .cta-section__image-col {
    overflow: hidden;
  }
  .cta-section__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .cta-section__content {
    background: var(--color-bg-dark-2);
    padding: var(--space-2xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-md);
    animation: fadeInRight 0.7s ease both;
  }

  .cta-section__intro {
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--color-neutral-300);
  }

  .cta-section__heading {
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-neutral);
  }

  .cta-section__sub {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--color-neutral-300);
  }

  .cta-section__cta-line {
    font-size: 0.9rem;
    color: var(--color-neutral-300);
  }

  /* ════════════════════════════════════════════════
     RESPONSIVE
  ════════════════════════════════════════════════ */
  @media (max-width: 1024px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 860px) {
    .consulting-section__inner { grid-template-columns: 1fr; }
    .consulting-text { order: -1; } /* title/header always comes before the image when stacked */
    .consulting-media__badge { left: var(--space-sm); bottom: var(--space-sm); }
    .cta-section { grid-template-columns: 1fr; }
    .cta-section__image-col { height: 300px; }
    .services-section,
    .consulting-section,
    .cta-section__content { padding: var(--space-2xl) var(--space-sm); }
  }

  @media (max-width: 540px) {
    .services-grid { grid-template-columns: 1fr; }
  }


  /* ════════════════════════════════════════════════
     SECTION SHELL
  ════════════════════════════════════════════════ */
  .faq-section {
    background: var(--color-bg-neutral);
    padding: var(--space-3xl) var(--space-2xl);
  }
 
  .faq-section__inner {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }
 
  /* ════════════════════════════════════════════════
     DGS BANNER
  ════════════════════════════════════════════════ */
  .dgs-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    text-align: center;
    animation: fadeInUp 0.6s ease both;
  }
 
  .dgs-banner__text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-primary);
    max-width: 600px;
    line-height: 1.6;
  }
 
  .dgs-banner__logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
  }
 
  .dgs-banner__logo {
    width: 140px;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: var(--radius-md);
  }
 
  /* ════════════════════════════════════════════════
     DIVIDER
  ════════════════════════════════════════════════ */
  .faq-divider {
    height: 1px;
    background: var(--color-line);
    width: 100%;
  }
 
  /* ════════════════════════════════════════════════
     FAQ BLOCK
  ════════════════════════════════════════════════ */
  .faq-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    animation: fadeInUp 0.6s ease 0.1s both;
  }
 
  .faq-block__header {
    text-align: center;
  }

  .faq-block__eyebrow {
    font-size: 0.85rem;
    color: var(--color-neutral-500);
    margin-bottom: 0.25rem;
  }
 
  .faq-block__heading {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.15;
  }

  /* Keep the heading on a single line where there's room for it */
  @media (min-width: 1208px) {
    .faq-block__heading { white-space: nowrap; }
  }
 
  /* ════════════════════════════════════════════════
     FAQ LIST
  ════════════════════════════════════════════════ */
  .faq-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-line);
  }
 
  .faq-item {
    border-bottom: 1px solid var(--color-line);
  }
 
  /* Trigger button */
  .faq-item__trigger {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    text-align: left;
    font-family: var(--font-body);
  }
 
  .faq-item__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--color-primary-light, #1963A6);
    transition: transform var(--transition-base);
    line-height: 1;
  }
 
  .faq-item__question {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-primary);
   
    transition: color var(--transition-fast);
  }
 
  .faq-item__trigger:hover .faq-item__question {
    color: var(--color-bg-dark-4, #1963A6);
  }
 
  /* Answer panel */
  .faq-item__answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding: 0 0 0 2.25rem;
  }
 
  .faq-item__answer p {
    font-size: var(--text-body);
    line-height: 1.8;
    color: var(--color-neutral-500);
    padding-bottom: var(--space-md);
  }
 
  /* Open state */
  .faq-item.is-open .faq-item__answer {
    max-height: 400px;
  }
 
  .faq-item.is-open .faq-item__icon {
    transform: rotate(45deg);
    color: var(--color-btn, #FFD100);
  }
 
  .faq-item.is-open .faq-item__question {
    color: var(--color-bg-dark-4, #1963A6);
  }
 
  /* ════════════════════════════════════════════════
     ANIMATION
  ════════════════════════════════════════════════ */
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
 
  /* ════════════════════════════════════════════════
     RESPONSIVE
  ════════════════════════════════════════════════ */
  @media (max-width: 640px) {
    .faq-section { padding: var(--space-2xl) var(--space-sm); }
    .faq-block__heading { font-size: 2rem; }
  }




  /* --ueber-uns ---*/

  /* ════════════════════════════════════════════════
     SECTION 1 — VISION & MISSION
  ════════════════════════════════════════════════ */
  .vision-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 400px;
  }
 
  .vision-section__dark {
    background: var(--color-bg-dark-2);
    padding: var(--space-2xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-md);
    animation: fadeInLeft 0.7s ease both;
  }
 
  .vision-section__eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-btn);
  }
 
  .vision-section__heading {
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 600;
    color: var(--color-neutral);
    line-height: 1.25;
  }
 
  .vision-section__body {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--color-neutral-300);
  }
 
  .vision-section__quote {
    font-size: 0.95rem;
    font-weight: 600;
    font-style: italic;
    color: var(--color-btn);
    margin-top: var(--space-xs);
  }
 
  .vision-section__media {
    overflow: hidden;
    animation: fadeInRight 0.7s ease 0.1s both;
  }
 
  .vision-section__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
  }
  .vision-section__media:hover .vision-section__img { transform: scale(1.03); }
 
  /* ════════════════════════════════════════════════
     SECTION 2 — UNSERE WERTE
  ════════════════════════════════════════════════ */
  .values-section {
    background: var(--color-neutral);
    padding: var(--space-2xl);
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
  }
 
  .values-section__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }
 
  .values-section__img-wrap {
    width: 100%;
    height: 340px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-line);
  }
 
  .values-section__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
 
  .values-section__eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin-bottom: 0.4rem;
  }
 
  .values-section__heading {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
  }
 
  .values-section__body {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--color-neutral-500);
    max-width: 760px;
  }
 
  /* ════════════════════════════════════════════════
     SECTION 3 — TEAM
  ════════════════════════════════════════════════ */
  /* Blocks flagged as hidden in the panel — kept in DOM/CMS but never displayed */
  .block--hidden { display: none !important; }

  .team-section {
    background: var(--color-bg-neutral);
    padding: var(--space-md) var(--space-2xl) var(--space-3xl);
  }
 
  .team-section__inner {
    max-width: 1360px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }
 
  /* Header */
  .team-section__eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-btn);
    margin-bottom: 0.4rem;
  }
 
  .team-section__heading {
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
  }
 
  .team-section__sub {
    font-size: var(--text-body);
    line-height: 1.75;
    color: var(--color-neutral-500);
    max-width: 950px;
  }
 
  /* Team photo */
  .team-section__photo-wrap {
    width: 100%;
    height: 500px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-line);
  }
 
  .team-section__photo {
    width: 100%;
    max-width: 100%;
  height: auto;
    object-fit: cover;
    display: block;
  }
 
  /* Member grid */
  .team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
 
  .member-card {
    background: var(--color-neutral);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    animation: fadeInUp 0.6s ease both;
  }
  .member-card:nth-child(1) { animation-delay: 0.05s; }
  .member-card:nth-child(2) { animation-delay: 0.15s; }
  .member-card:nth-child(3) { animation-delay: 0.25s; }
  .member-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
 
  .member-card__img-wrap {
    height: 320px;
    overflow: hidden;
  }
 
  .member-card__img {
    width: 100%;
    
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
  }
  .member-card:hover .member-card__img { transform: scale(1.04); }
 
  .member-card__body {
    position: relative;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
  }
 
  .member-card__name {
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--color-primary);
  }

  .member-card__role {
    font-size: var(--text-body);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    margin-bottom: 0.25rem;
  }
 
  .member-card__bio {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-neutral-500);
    /* reserve equal space so the divider below aligns across all cards,
       regardless of bio length */
    min-height: 164px;
  }
 
  .member-card__divider {
    height: 1px;
    background: var(--color-line);
    margin: var(--space-xs) 0;
  }
 
  .member-card__quote {
    font-size: 1rem;
    font-style: italic;
    line-height: 1.65;
    color: var(--color-neutral-500);
  }

  .member-card__linkedin {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    color: var(--color-neutral-500);
    background: transparent;
    transition: color var(--transition-base),
                background var(--transition-base),
                transform var(--transition-base);
  }
  .member-card__linkedin svg {
    width: 26px;
    height: 26px;
    display: block;
  }
  .member-card__linkedin:hover,
  .member-card__linkedin:focus-visible {
    color: var(--color-accent);
    background: transparent;
    transform: scale(1.18);
  }
 
  /* ════════════════════════════════════════════════
     ANIMATIONS
  ════════════════════════════════════════════════ */
  @keyframes fadeInLeft  { from { opacity:0; transform:translateX(-28px); } to { opacity:1; transform:translateX(0); } }
  @keyframes fadeInRight { from { opacity:0; transform:translateX( 28px); } to { opacity:1; transform:translateX(0); } }
  @keyframes fadeInUp    { from { opacity:0; transform:translateY( 20px); } to { opacity:1; transform:translateY(0); } }
 
  /* ════════════════════════════════════════════════
     RESPONSIVE
  ════════════════════════════════════════════════ */
  @media (max-width: 900px) {
    .team-grid { grid-template-columns: 1fr 1fr; }
  }
 
  @media (max-width: 768px) {
    .vision-section { grid-template-columns: 1fr; }
    .vision-section__media { height: 280px; }
    .team-grid { grid-template-columns: 1fr; }
    .team-section,
    .values-section { padding: var(--space-2xl) var(--space-sm); }
  }
 
  @media (max-width: 540px) {
    .vision-section__dark { padding: var(--space-xl) var(--space-sm); }
  }



   /* ════════════════════════════════════════════════
     BLOG HERO
  ════════════════════════════════════════════════ */
  .blog-hero {
    background: var(--color-bg-dark-2);
    padding: var(--space-3xl) var(--space-2xl);
    text-align: center;
  }
 
  .blog-hero__inner {
    max-width: 700px;
    margin: 0 auto;
    animation: fadeInUp 0.6s ease both;
  }
 
  .blog-hero__eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-btn);
    margin-bottom: var(--space-sm);
  }
 
  .blog-hero__heading {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 600;
    color: var(--color-neutral);
    line-height: 1.1;
    margin-bottom: var(--space-sm);
  }
 
  .blog-hero__sub {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-neutral-300);
  }
 
  /* ════════════════════════════════════════════════
     FILTER BAR
  ════════════════════════════════════════════════ */
  .blog-filter {
    background: var(--color-bg-neutral);
    border-bottom: 1px solid var(--color-line);
    position: sticky;
    top: 0;
    z-index: 10;
  }
 
  .blog-filter__inner {
    max-width: 1200px;
    margin: 0; /* Left-align the tab row so the last tab clears the centered hero badge */
    padding: 0 var(--space-2xl);
    display: flex;
    justify-content: flex-start;
    gap: var(--space-xs);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .blog-filter__inner::-webkit-scrollbar { display: none; }
 
  .blog-filter__btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-neutral-500);
    padding: var(--space-md) var(--space-sm);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
  }
 
  .blog-filter__btn:hover { color: var(--color-primary); }
 
  .blog-filter__btn.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-btn);
  }
 
  /* ════════════════════════════════════════════════
     POST GRID
  ════════════════════════════════════════════════ */
  .blog-grid-section {
    background: var(--color-bg-neutral);
    padding: var(--space-3xl) var(--space-2xl);
  }
 
  .blog-grid-section__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
 
  /* Featured spans full width */
  .post-card--featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
  }
 
  .post-card--featured .post-card__img-wrap,
  .post-card--featured .post-card__img-link {
    height: 380px;
  }
 
  .post-card--featured .post-card__body {
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
 
  .post-card--featured .post-card__title a {
    font-size: 1.5rem;
  }
 
  .post-card--featured .post-card__excerpt {
    display: block;
  }
 
  /* ── Card base ── */
  .post-card {
    background: var(--color-neutral);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    animation: fadeInUp 0.6s ease both;
  }
  .post-card:nth-child(2) { animation-delay: 0.1s; }
  .post-card:nth-child(3) { animation-delay: 0.15s; }
  .post-card:nth-child(4) { animation-delay: 0.2s; }
  .post-card:nth-child(5) { animation-delay: 0.25s; }
  .post-card:nth-child(6) { animation-delay: 0.3s; }
  .post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
 
  .post-card__img-link {
    display: block;
    position: relative;
    height: 220px;
    overflow: hidden;
    flex-shrink: 0;
  }
 
  .post-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
  }
  .post-card:hover .post-card__img { transform: scale(1.05); }
 
  .post-card__category {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    background: var(--color-btn);
    color: var(--color-primary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full);
  }
 
  .post-card__body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
  }
 
  .post-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }
 
  .post-card__date,
  .post-card__read {
    font-size: 0.75rem;
    color: var(--color-neutral-500);
  }
 
  .post-card__date::after {
    content: '·';
    margin-left: var(--space-sm);
  }
 
  .post-card__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
  }
  .post-card__title a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
  }
  .post-card__title a:hover { color: var(--color-bg-dark-4); }
 
  .post-card__excerpt {
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--color-neutral-500);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
  }
 
  .post-card__readmore {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-bg-dark-4);
    text-decoration: none;
    margin-top: auto;
    transition: color var(--transition-fast);
  }
  .post-card__readmore:hover { color: var(--color-primary); }
 
  /* Hidden by filter */
  .post-card.is-hidden { display: none; }
 
  /* ════════════════════════════════════════════════
     PAGINATION
  ════════════════════════════════════════════════ */
  .blog-pagination {
    background: var(--color-bg-neutral);
    padding: var(--space-xl) var(--space-2xl) var(--space-3xl);
  }
 
  .blog-pagination__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
  }
 
  .blog-pagination__btn {
    background: none;
    border: 1.5px solid var(--color-line);
    border-radius: var(--radius-full);
    padding: 0.55rem 1.2rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  }
  .blog-pagination__btn:hover:not(:disabled) {
    background: var(--color-primary);
    color: var(--color-neutral);
    border-color: var(--color-primary);
  }
  .blog-pagination__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
 
  .blog-pagination__pages {
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }
 
  .blog-pagination__page {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: none;
    border: 1.5px solid var(--color-line);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  }
  .blog-pagination__page:hover {
    background: var(--color-neutral-200);
  }
  .blog-pagination__page.is-active {
    background: var(--color-primary);
    color: var(--color-neutral);
    border-color: var(--color-primary);
  }
 
  .blog-pagination__ellipsis {
    font-size: 0.9rem;
    color: var(--color-neutral-500);
    padding: 0 0.25rem;
  }
 
  /* ════════════════════════════════════════════════
     ANIMATIONS
  ════════════════════════════════════════════════ */
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
 
  /* ════════════════════════════════════════════════
     RESPONSIVE
  ════════════════════════════════════════════════ */
  @media (max-width: 960px) {
    .blog-grid-section__inner { grid-template-columns: repeat(2, 1fr); }
    .post-card--featured { grid-template-columns: 1fr; }
    .post-card--featured .post-card__img-link { height: 260px; }
    .post-card--featured .post-card__body { padding: var(--space-md); }
    .post-card--featured .post-card__title a { font-size: 1.2rem; }
  }
 
  @media (max-width: 640px) {
    .blog-grid-section__inner { grid-template-columns: 1fr; }
    .blog-grid-section, .blog-pagination { padding-left: var(--space-sm); padding-right: var(--space-sm); }
    .blog-filter__inner { padding: 0 var(--space-sm); }
  }





  /* Article */
  .btn {
    display: inline-block;
    padding: 0.85rem 2rem;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), transform var(--transition-fast);
    border: none;
  }
  .btn:hover { transform: translateY(-2px); }
  .btn--yellow { background: var(--color-btn); color: var(--color-primary); }
  .btn--yellow:hover { background: var(--color-btn); color: var(--color-neutral); }
  .btn--dark { background: var(--color-btn); color: var(--color-primary); transition: transform var(--transition-fast), box-shadow var(--transition-base); }
  .btn--dark:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18); }
 
  /* ════════════════════════════════════════════════
     ARTICLE / NEWS DETAIL
     Single-column, follows the subpage rules: ref-hero on top,
     gray-secondary sections, white reading card, gold accents.
  ════════════════════════════════════════════════ */

  /* Breadcrumb */
  .article-breadcrumb {
    background: var(--color-bg-neutral);
    border-bottom: 1px solid var(--color-line);
    padding: 0.85rem var(--space-2xl);
  }
  .article-breadcrumb__inner {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .article-breadcrumb__link {
    font-size: 0.8rem;
    color: var(--color-neutral-500);
    transition: color var(--transition-fast);
  }
  .article-breadcrumb__link:hover { color: var(--color-primary-light); }
  .article-breadcrumb__sep { font-size: 0.8rem; color: var(--color-neutral-500); }
  .article-breadcrumb__current {
    font-size: 0.8rem;
    color: var(--color-primary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
  }

  /* Body section — clean white reading column, no floating card */
  .article-body {
    background: var(--color-bg-light);
    padding: var(--space-3xl) var(--space-2xl);
  }
  .article-content {
    max-width: 760px;
    margin: 0 auto;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    animation: fadeInUp 0.6s ease both;
  }

  /* Meta row */
  .article-content__meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
  }
  .article-content__category {
    background: var(--color-btn);
    color: var(--color-primary);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.28rem 0.7rem;
    border-radius: var(--radius-sm);
  }
  .article-content__date,
  .article-content__read {
    font-size: 0.8rem;
    color: var(--color-neutral-500);
  }
  .article-content__read::before { content: '·'; margin-right: var(--space-sm); }

  /* Lead / intro */
  .article-content__intro {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.7;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid var(--color-btn);
  }

  /* ── Article prose (rendered from blocks) ── */
  .article-content__body { color: var(--color-font-base); }
  .article-content__body > * + * { margin-top: var(--space-md); }

  .article-content__body h2 {
    font-size: clamp(1.35rem, 2.4vw, 1.8rem);
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.25;
    margin-top: var(--space-xl);
    padding-left: var(--space-sm);
    border-left: 3px solid var(--color-btn);
  }
  .article-content__body h3 {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: 600;
    color: var(--color-primary);
    margin-top: var(--space-lg);
  }
  .article-content__body p {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--color-neutral-500);
  }
  .article-content__body a {
    color: var(--color-primary-light);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .article-content__body strong { color: var(--color-primary); font-weight: 700; }

  .article-content__body ul,
  .article-content__body ol {
    padding-left: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .article-content__body li {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-neutral-500);
  }
  .article-content__body ul li::marker { color: var(--color-btn); }

  .article-content__body blockquote {
    margin: var(--space-lg) 0;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-neutral);
    border-left: 4px solid var(--color-btn);
    border-radius: var(--radius-md);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-primary);
  }
  .article-content__body blockquote p { color: var(--color-primary); }

  /* Images & galleries from blocks */
  .article-content__body img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    display: block;
  }
  .article-content__body figure { margin: var(--space-lg) 0; }
  .article-content__body figure img { margin: 0; }
  .article-content__body figcaption {
    font-size: 0.8rem;
    color: var(--color-neutral-500);
    text-align: center;
    font-style: italic;
    padding-top: 0.5rem;
  }
  /* Kirby gallery block renders a <ul> of images — turn it into a grid, no bullets */
  .article-content__body ul:has(img),
  .article-content__body ul:has(figure) {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-sm);
  }
  .article-content__body ul:has(img) li,
  .article-content__body ul:has(figure) li { margin: 0; }

  /* ── Callout / highlight boxes (from the News block) ── */
  .article-callout {
    margin: var(--space-xl) 0;
    padding: var(--space-lg);
    border-radius: var(--radius-md);
  }
  .article-callout__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin: 0 0 0.6rem;
  }
  .article-callout__heading {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 var(--space-sm);
  }
  .article-callout__body > * + * { margin-top: 0.5rem; }
  .article-callout__body p { font-size: 1rem; line-height: 1.75; margin: 0; }
  .article-callout__body ul {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
  }
  .article-callout__body li {
    position: relative;
    padding-left: 2.1rem;
    font-size: 1rem;
    line-height: 1.6;
  }
  /* Gold check-circle — same marker used on the other subpages */
  .article-callout__body li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Light & bordered variants: no box — navy text like the rest of the article */
  .article-callout--light,
  .article-callout--bordered {
    background: none;
    border: none;
    padding: 0;
    border-radius: 0;
  }
  .article-callout--light .article-callout__heading,
  .article-callout--bordered .article-callout__heading { color: var(--color-primary); }
  .article-callout--light .article-callout__body,
  .article-callout--light .article-callout__body p,
  .article-callout--light .article-callout__body li,
  .article-callout--bordered .article-callout__body,
  .article-callout--bordered .article-callout__body p,
  .article-callout--bordered .article-callout__body li { color: var(--color-primary); }

  /* Dark CTA band — site navy, white text */
  .article-callout--dark {
    background: var(--color-primary);
    text-align: center;
    padding: var(--space-xl) var(--space-lg);
  }
  .article-callout--dark .article-callout__eyebrow { color: #FFFFFF; }
  .article-callout--dark .article-callout__heading {
    color: #FFFFFF;
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  }
  .article-callout--dark .article-callout__body,
  .article-callout--dark .article-callout__body p,
  .article-callout--dark .article-callout__body li { color: #FFFFFF; }
  .article-callout--dark .article-callout__body p { font-size: 1.05rem; }
  /* Button inherits the standard .btn .btn--yellow look; just add top spacing.
     Extra specificity needed to beat `.article-content__body a` (colour + underline). */
  .article-callout__btn { margin-top: var(--space-md); }
  .article-content__body a.article-callout__btn {
    color: var(--color-dark);
    text-decoration: none;
  }
  .article-content__body a.article-callout__btn:hover { color: var(--color-neutral); }

  /* Legal disclaimer / small print at the end of an article */
  .article-content__disclaimer {
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-line);
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--color-neutral-500);
  }
  .article-content__disclaimer p { margin: 0 0 0.4rem; }

  /* Author box */
  .article-author {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-line);
  }
  .article-author__img {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--color-btn);
  }
  .article-author__name { font-size: 0.95rem; font-weight: 700; color: var(--color-primary); }
  .article-author__role {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--color-neutral-500); margin-top: 0.15rem;
  }
  .article-author__bio { font-size: 0.85rem; line-height: 1.6; color: var(--color-neutral-500); margin-top: 0.5rem; }

  /* CTA — minimal divider block, no filled box */
  .article-content__cta {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-line);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: flex-start;
  }
  .article-content__cta p { color: var(--color-primary); margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.6; }

  /* ── Related articles ── */
  .article-related {
    background: var(--color-bg-neutral);
    padding: 0 var(--space-2xl) var(--space-3xl);
  }
  .article-related__inner { max-width: 1100px; margin: 0 auto; }
  .article-related__title {
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    font-weight: 600;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: var(--space-xl);
  }
  .article-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-lg);
  }
  .related-card {
    background: var(--color-bg-light);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: none;
    transition: transform var(--transition-base), border-color var(--transition-base);
    display: flex;
    flex-direction: column;
  }
  .related-card:hover { transform: translateY(-3px); border-color: var(--color-btn); }
  .related-card__img-wrap { height: 170px; overflow: hidden; background: var(--color-primary); }
  .related-card__img { width: 100%; height: 100%; object-fit: cover; }
  .related-card__body { padding: var(--space-md) var(--space-lg) var(--space-lg); display: flex; flex-direction: column; gap: 0.4rem; }
  .related-card__category {
    align-self: flex-start;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--color-primary-light);
  }
  .related-card__title { font-size: 1rem; font-weight: 600; color: var(--color-primary); line-height: 1.35; }
  .related-card__date { font-size: 0.75rem; color: var(--color-neutral-500); }

  /* Back to news — subtle, right-aligned, directly under the article content */
  .article-content__back {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-line);
  }

  /* Animations */
  @keyframes fadeInUp { from { opacity:0; transform:translateY(20px);} to { opacity:1; transform:translateY(0);} }

  /* Responsive */
  @media (max-width: 640px) {
    .article-body { padding: var(--space-2xl) var(--space-sm); }
    .article-related { padding-left: var(--space-sm); padding-right: var(--space-sm); }
    .article-breadcrumb { padding-left: var(--space-sm); padding-right: var(--space-sm); }
  }

  /* Karriere */
  /* Career Section Component Styles */
@keyframes fadeInUpBlur {
  0% { opacity: 0; transform: translateY(30px); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.anim-in { animation: fadeInUpBlur 0.8s cubic-bezier(0.2,0.8,0.2,1) both; }
.anim-d1 { animation-delay: 0.1s; }
.anim-d2 { animation-delay: 0.2s; }
.anim-d3 { animation-delay: 0.3s; }
.anim-d5 { animation-delay: 0.5s; }

.career-section {
  position: relative;
  padding: var(--space-3xl) var(--space-md);
  background: radial-gradient(ellipse at 50% 0%, rgba(25,99,166,0.1) 0%, transparent 60%);
}

.grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: 
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
}

.career-container {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}

/* Header */
.career-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-primary);
  background: var(--color-primary-darker);
  margin-bottom: var(--space-md);
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

.badge-text {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-neutral-200);
}

.job-title {
  font-weight: 300;
  font-size: 2.5rem;
  line-height: 1.1;
  margin-bottom: var(--space-md);
  color: var(--color-neutral);
}

.company-intro {
  font-size: 1.125rem;
  color: var(--color-neutral-200); 
  max-width: 700px;
  margin: 0 auto;
}

/* Main Grid */
.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .job-title { font-size: 3.5rem; }
  .content-grid { grid-template-columns: 1.2fr 0.8fr; }
}

/* Left Column: Details & Tasks */
.left-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.section-block-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.section-block-title svg {
  width: 20px;
  height: 20px;
}

/* Task List */
.task-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.task-item {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(26,50,64,0.5);
  color: var(--color-neutral-100);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: 1rem;
}

.task-item:last-child { border-bottom: none; }

.task-bullet {
  color: var(--color-accent);
  margin-top: 4px;
  flex-shrink: 0;
}

.task-bullet svg { width: 16px; height: 16px; }

/* Job Details Tags */
.details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.detail-card {
  background: var(--color-primary-darker);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  transition: all var(--transition-base);
}

.detail-card:hover {
  border-color: var(--color-primary-light);
  background: var(--color-primary-dark);
}

.detail-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-neutral-300);
  margin-bottom: var(--space-xs);
}

.detail-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-neutral-100);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.detail-value svg { width: 16px; height: 16px; color: var(--color-accent); }

/* Right Column: Benefits */
.benefits-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.benefit-card {
  background: var(--color-primary-darker);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: all var(--transition-slow);
}

.benefit-card:hover {
  border-color: var(--color-primary-light);
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl), 0 0 30px rgba(25,99,166,0.08);
}

.benefit-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.benefit-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,231,14,0.1);
  color: var(--color-accent);
}

.benefit-icon svg { width: 20px; height: 20px; }

.benefit-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-neutral);
}

.benefit-text {
  color: var(--color-neutral-200);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Bottom CTA */
.cta-wrapper {
  margin-top: var(--space-2xl);
  text-align: center;
}

.cta-subtitle {
  color: var(--color-neutral-200);
  font-size: 1.125rem;
  margin-bottom: var(--space-md);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-xl);
  background: var(--color-accent);
  color: var(--color-dark);
  border: none;
  border-radius: var(--radius-xl);
  font-family: 'Titillium Web', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  text-decoration: none;
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-dark);
  transform: scale(1.02);
  box-shadow: 0 0 40px 8px rgba(255,231,14,0.25), var(--shadow-lg);
}

.btn-primary svg { width: 20px; height: 20px; }




 /* ── Shared button ── */
  .btn {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), transform var(--transition-fast);
    border: none;
  }
  .btn:hover { transform: translateY(-2px); }
  .btn--yellow { background: var(--color-btn); color: var(--color-primary); }
  .btn--yellow:hover { background: var(--color-btn); color: var(--color-neutral); }
 
  /* ── Animations ── */
  @keyframes fadeInLeft  { from { opacity:0; transform:translateX(-28px); } to { opacity:1; transform:translateX(0); } }
  @keyframes fadeInRight { from { opacity:0; transform:translateX( 28px); } to { opacity:1; transform:translateX(0); } }
  @keyframes fadeInUp    { from { opacity:0; transform:translateY( 20px); } to { opacity:1; transform:translateY(0); } }
  .anim-left  { animation: fadeInLeft  0.7s ease both; }
  .anim-right { animation: fadeInRight 0.7s ease 0.1s both; }
 
  /* ════════════════════════════════════════════════
     SECTION SHELL — alternating bg
  ════════════════════════════════════════════════ */
  .prod-section { display: flex; flex-direction: column; }
  .prod-section--gewerbe    { background: var(--color-neutral); }
  .prod-section--freiflaechen { background: var(--color-neutral-100); }
  .prod-section--lastspitzen  { background: var(--color-neutral); }
  .prod-section--ladeinfra    { background: var(--color-neutral-100); }
 
  /* ════════════════════════════════════════════════
     SECTION 1 — full bleed hero + intro
  ════════════════════════════════════════════════ */
  .prod-hero {
    width: 100%;
    height: 240px;
    overflow: hidden;
  }
  .prod-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    display: block;
  }
 
  .prod-intro {
    padding: var(--space-xl) var(--space-2xl);
    border-bottom: 1px solid var(--color-line);
  }
  .prod-intro__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    animation: fadeInUp 0.6s ease both;
  }
  .prod-intro__text {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--color-neutral-500);
    max-width: 660px;
  }
 
  /* ════════════════════════════════════════════════
     SPLIT LAYOUT (sections 2-4)
  ════════════════════════════════════════════════ */
  .prod-split {
    padding: var(--space-2xl) var(--space-2xl) var(--space-xl);
    border-bottom: 1px solid var(--color-line);
  }
  .prod-split__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
  }
 
  .prod-split__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }
 
  .prod-split__eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-btn);
    padding-bottom: 2px;
  }
 
  .prod-split__heading {
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-primary);
  }
 
  .prod-split__underline {
    text-decoration: underline;
    text-decoration-color: var(--color-btn);
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
  }
 
  .prod-split__body {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--color-neutral-500);
    max-width: 480px;
  }
 
  .prod-split__media { overflow: hidden; border-radius: var(--radius-xl); }
  .prod-split__img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-slow);
  }
  .prod-split__media:hover .prod-split__img { transform: scale(1.03); }
 
  /* ════════════════════════════════════════════════
     CARDS (shared across all sections)
  ════════════════════════════════════════════════ */
  .prod-cards {
    padding: var(--space-xl) var(--space-2xl) var(--space-2xl);
  }
  .prod-cards__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
 
  .prod-card {
    background: var(--color-neutral);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    display: flex;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    animation: fadeInUp 0.5s ease both;
  }
  .prod-section--freiflaechen .prod-cards .prod-card,
  .prod-section--ladeinfra    .prod-cards .prod-card { background: var(--color-neutral); }
  .prod-section--gewerbe    .prod-cards .prod-card,
  .prod-section--lastspitzen .prod-cards .prod-card { background: var(--color-neutral-100); }
 
  .prod-card:nth-child(1) { animation-delay: 0.05s; }
  .prod-card:nth-child(2) { animation-delay: 0.15s; }
  .prod-card:nth-child(3) { animation-delay: 0.25s; }
  .prod-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
 
  .prod-card__accent {
    width: 4px;
    background: var(--color-btn);
    flex-shrink: 0;
  }
 
  .prod-card__body {
    padding: var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
 
  .prod-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
  }
 
  .prod-card__desc {
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--color-neutral-500);
  }
 
  /* ════════════════════════════════════════════════
     RESPONSIVE
  ════════════════════════════════════════════════ */
  @media (max-width: 860px) {
    .prod-split__inner { grid-template-columns: 1fr; }
    .prod-split__img { height: 220px; }
    .prod-cards__inner { grid-template-columns: 1fr; }
    .prod-split,
    .prod-intro,
    .prod-cards { padding-left: var(--space-sm); padding-right: var(--space-sm); }
  }


  /* =======================
    page heading with central text
    ======================*/

  .page-heading {
  background: var(--color-bg-neutral);
  padding: 3rem 1.5rem 2rem;
  text-align: center;
}

.page-heading__inner {
  max-width: 1200px; /* wide enough to keep the heading on a single line on desktop */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.page-heading__badge {
  font-size: 0.95rem;
  color: #6b7a8d;
  margin: 0;
}

.page-heading__heading {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
  line-height: 1.25;
}



/* ════════════════════════════════════════════════
     SECTION SHELL
  ════════════════════════════════════════════════ */
  .karriere-section {
    background: var(--color-bg-neutral);
    padding: var(--space-3xl) var(--space-2xl);
  }

  .karriere-section__inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
  }

  /* ════════════════════════════════════════════════
     COMPANY INTRO
  ════════════════════════════════════════════════ */
  .karriere-intro {
    background: transparent;
    padding: var(--space-xs) 0 var(--space-xs) var(--space-xl);
    border-left: 4px solid var(--color-btn);
    animation: fadeInUp 0.6s ease both;
  }

  .karriere-intro__text {
    font-size: var(--text-body);
    font-weight: 500;
    line-height: 1.9;
    color: var(--color-primary);
  }

  /* ════════════════════════════════════════════════
     JOB CARD
  ════════════════════════════════════════════════ */
  .job-card {
    background: var(--color-primary);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 45px rgba(26, 50, 64, 0.22);
    overflow: hidden;
    animation: fadeInUp 0.6s ease 0.1s both;
  }

  /* Accordion: collapsed shows only the title, click to expand */
  .job-card__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    user-select: none;
    transition: background var(--transition-fast);
  }
  .job-card__summary::-webkit-details-marker { display: none; }
  .job-card__summary:hover { background: rgba(255, 255, 255, 0.04); }
  .job-card__summary .job-card__title { margin-bottom: 0; }

  .job-card__chevron {
    flex-shrink: 0;
    color: var(--color-btn);
    transition: transform var(--transition-base);
  }
  .job-card[open] .job-card__chevron { transform: rotate(180deg); }

  .job-card__content { animation: fadeInUp 0.35s ease both; }

  /* Header */
  .job-card__header {
    padding: var(--space-xl) var(--space-xl) var(--space-lg);
    background: transparent;
  }

  .job-card__eyebrow {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-btn);
    margin-bottom: var(--space-sm);
  }

  .job-card__title {
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-neutral);
    margin-bottom: var(--space-md);
  }

  .job-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .job-tag {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  .job-tag--location {
    background: var(--color-btn);
    border-color: var(--color-btn);
    color: var(--color-primary);
  }

  /* Divider */
  .job-card__divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 0 var(--space-xl);
  }

  /* Content blocks */
  .job-card__block {
    padding: var(--space-lg) var(--space-xl);
  }

  .job-card__block-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-btn);
    margin-bottom: var(--space-sm);
  }

  .job-card__body {
    font-size: var(--text-body);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.72);
  }

  /* Lists */
  .job-card__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0;
  }

  .job-card__list li {
    font-size: var(--text-body);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
    padding-left: 1.3rem;
    position: relative;
  }

  .job-card__list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-btn);
    font-size: 1rem;
  }

  .job-card__list--highlight li strong {
    color: var(--color-neutral);
  }

  /* Benefits grid */
  .job-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .job-benefit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-full);
    padding: 0.45rem 1rem;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  }

  .job-benefit:hover {
    background: var(--color-btn);
    border-color: var(--color-btn);
    color: var(--color-primary);
  }

  .job-benefit__icon { font-size: 0.95rem; }

  /* CTA block */
  .job-card__cta {
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
  }

  .job-card__cta-text {
    font-size: 0.92rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
    max-width: 600px;
  }

  .job-card__cta-text strong {
    color: var(--color-neutral);
  }

  /* ════════════════════════════════════════════════
     ANIMATIONS
  ════════════════════════════════════════════════ */
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ════════════════════════════════════════════════
     RESPONSIVE
  ════════════════════════════════════════════════ */
  @media (max-width: 640px) {
    .karriere-section { padding: var(--space-2xl) var(--space-sm); }
    .job-card__header,
    .job-card__block,
    .job-card__cta { padding-left: var(--space-md); padding-right: var(--space-md); }
    .job-card__divider { margin: 0 var(--space-md); }
    .karriere-intro { padding: var(--space-xs) 0 var(--space-xs) var(--space-md); }
  }

  .main-content {
    background-color: transparent !important;
    background: none !important;
    display: block;
    position: relative;
    width: 100%;
}




/* ===== No badge 2 columns split =====*/

.chart-split {
  background: var(--color-bg-neutral);
  padding: var(--space-3xl) var(--space-2xl);
}

.chart-split__inner {
  max-width: 1360px;
  margin: 0 auto;
}

.chart-split__heading {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 600;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: var(--space-sm);
}

.chart-split__heading_2_columns {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.chart-split__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.chart-split__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.chart-split__img {
  width: 100%;
  height: auto;
  display: block;
}

.chart-split__source {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: var(--space-md);
}

.chart-split__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
}

.chart-split__para {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--color-neutral-600, var(--color-neutral-500));
  margin: 0;
}

@media (max-width: 768px) {
  .chart-split__body {
    grid-template-columns: 1fr;
  }

  .chart-split__heading {
    text-align: left;
  }
}


/* phase slider */
/* Sektions-Layout */
.solanox-slider-section {
    padding: 60px 0;
    background-color: #f4f5f6;
    width: 100%;
    box-sizing: border-box;
}

.solanox-slider-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.solanox-slider-header {
    text-align: center;
    margin-bottom: 40px;
}

.solanox-slider-title {
    font-size: 2.5rem;
    color: #142534;
    font-weight: 700;
    margin-bottom: 12px;
}

.solanox-slider-subtitle {
    font-size: 1.2rem;
    color: #142534;
    font-weight: 600;
    opacity: 0.9;
}

/* Haupt-Rahmen des Sliders */
.solanox-slider-frame {
    position: relative;
    width: 100%;
    height: 380px;
    background-color: #4155b4;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    transition: background-color 0.5s ease-in-out; 
}

/* Die Karten-Bühne */
.solanox-slider-stage {
    position: relative;
    width: 75%;
    height: 100%;
    margin: 0 auto;
}

/* Einzelne Slider-Inhaltskarten */
.solanox-slider-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    background: transparent !important;
    
    /* Standardmäßig unsichtbar & Klicks durchlassen */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; 
    z-index: 1;
    
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

/* Aktivierter Zustand der Karte */
.solanox-slider-item.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 5;
}

/* Text-Styling innerhalb der Karte */
.solanox-slider-item__content {
    color: #ffffff !important;
    width: 100%;
}

.solanox-slider-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.solanox-slider-heading {
    font-size: 2.25rem;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}

.solanox-slider-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    max-width: 650px;
    margin: 0 auto;
}

/* Pfeile über dem Inhalt fixieren */
.solanox-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 20px;
    z-index: 10;
    transition: color 0.2s ease, transform 0.2s ease;
}

.solanox-slider-arrow:hover {
    color: #ffffff;
}

.arrow-left { left: 20px; }
.arrow-right { right: 20px; }

/* Navigations-Punkte */
.solanox-slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.solanox-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s, transform 0.2s;
}

.solanox-slider-dot.active {
    background-color: #ffffff;
    transform: scale(1.2);
}

/* Mobil-Anpassung */
@media (max-width: 768px) {
    .solanox-slider-frame { height: 460px; }
    .solanox-slider-stage { width: 85%; }
    .solanox-slider-heading { font-size: 1.6rem; }
    .solanox-slider-description { font-size: 1rem; }
    .arrow-left { left: 5px; }
    .arrow-right { right: 5px; }
}




/*========= Kontakt Split===========*/
.contact-split {
  background: var(--color-bg-neutral);
  padding: var(--space-3xl) var(--space-2xl);
}

.contact-split__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: stretch;
}

.contact-split__card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.contact-split__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-500, #888);
  margin: 0;
}

.contact-split__heading {
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
  line-height: 1.2;
}

.contact-split__rule {
  width: 2.5rem;
  border: none;
  border-top: 3px solid var(--color-primary);
  margin: 0;
}

.contact-split__body {
  font-size: 0.93rem;
  line-height: 1.75;
  color: var(--color-primary);
  margin: 0;
}

.contact-split__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.contact-split__detail {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}

.contact-split__detail:hover {
  text-decoration: underline;
}

.contact-split__btn {
  display: inline-block;
  border: 2px solid var(--color-accent);
  color: var(--color-primary);
  background: var(--color-accent);
  font-size: 0.93rem;
  font-weight: 600;
  padding: 0.65rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  margin-top: auto;
}

.contact-split__btn:hover {
  background: var(--color-bg-dark-2);
  color: #ffffff;
  border: none;
}

.contact-split__card--right {
  justify-content: center;
  gap: var(--space-xl);
}

.contact-split__quote {
  font-size: clamp(1.3rem, 4.5vw, 1.7rem);
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 768px) {
  .contact-split__inner {
    grid-template-columns: 1fr;
  }

  .contact-split__card--right {
    justify-content: flex-start;
  }
}




/* central text */
.text-cta {
  background: var(--color-bg-neutral);
  padding: var(--space-2xl) var(--space-xl);
}

.text-cta__inner {
  /* Wide enough that long titles stay on one line on desktop; the body copy
     below stays capped (see .text-cta__body) for comfortable line length. */
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
}

.text-cta__heading {
  font-size: clamp(1.65rem, 4vw, 3rem);
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
  line-height: 1.2;
  /* Long German compounds (e.g. "Finanzierungsmodelle") must break inside the
     box on narrow screens. hyphens:auto uses the page's lang="de" to split
     logically ("Finanzierungs-modelle"); overflow-wrap is the hard fallback. */
  overflow-wrap: break-word;
  hyphens: none; /* no ugly mid-word hyphenation in headings; overflow-wrap still breaks over-long words */
}

.text-cta__body {
  font-size: var(--text-body);
  line-height: 1.8;
  color: var(--color-primary);
  margin: 0;
  max-width: 760px;
}

/* Wider cap so this specific intro paragraph fits on two lines instead of three. */
#ea-s6-intro .text-cta__body {
  max-width: 860px;
}

#ds-s2-assetline .text-cta__body {
  max-width: 880px;
}

/* Front-of-the-Meter intro: pack the long paragraph into 3 lines — needs to
   break out past the standard cap, so its section padding is trimmed too. */
#gb-s4b-intro {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}
#gb-s4b-intro .text-cta__body {
  max-width: 1340px;
}

/* Wider cap so this intro paragraph fits on two lines instead of three. */
#ds-s6-intro .text-cta__body {
  max-width: 1000px;
}

/* Ladeinfrastruktur "kein Einzelprodukt" intro: fit the body on two lines. */
#li-s3-intro .text-cta__body {
  max-width: 1060px;
}

/* Ladeinfrastruktur "Generalunternehmer" intro: fit the body on two lines. */
#li-s4-intro .text-cta__body {
  max-width: 1000px;
}

/* Grossbatteriespeicher "Front-of-the-Meter" intro: long paragraph — widen the
   container as far as is reasonable to cut it from six lines to ~three/four. */
#gb-s4b-intro .text-cta__body {
  max-width: 1300px;
}

/* Grossbatteriespeicher "Der Speicher rechnet sich" intro: fit on two lines. */
#gb-s3-intro .text-cta__body {
  max-width: 1100px;
}

/* Grossbatteriespeicher "Zwei Architekturen" intro: fit on two lines. */
#gb-s4-intro .text-cta__body {
  max-width: 900px;
}

/* Grossbatteriespeicher "geeignete Freifläche" intro: two lines (wide, so trim
   the section padding to give the text room). */
#gb-s4b-flaeche {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}
#gb-s4b-flaeche .text-cta__body {
  max-width: 1350px;
}

/* Grossbatteriespeicher "Peak Shaving" intro: three lines. */
#gb-s5-intro .text-cta__body {
  max-width: 1100px;
}

/* Gesundheitswesen "Energy as a Service" intro: three lines. */
#gh-s5-intro .text-cta__body {
  max-width: 1120px;
}

/* Gesundheitswesen "Was Ihre Klinik einspart" intro: two lines (long — trim the
   section padding so it can break out wide enough). */
#gh-s7-intro {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}
#gh-s7-intro .text-cta__body {
  max-width: 1390px;
}

/* Gesundheitswesen "Schnellrechner" subtext: two lines. */
#gh-s7-cta .text-cta__body {
  max-width: 980px;
}

/* Gesundheitswesen "Bereits in Betrieb" intro: two lines. */
#gh-s8-intro .text-cta__body {
  max-width: 950px;
}

/* Gesundheitswesen "Solanox macht Kliniken" intro: two lines (long — trim the
   section padding so it can break out wide enough). */
#gh-s9-intro {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}
#gh-s9-intro .text-cta__body {
  max-width: 1380px;
}

/* Freiflächen "Die Anlage rechnet sich pur" intro: fit the body on two lines. */
#fl-s4-intro .text-cta__body {
  max-width: 1000px;
}

/* Freiflächen "Entwickeln, kaufen oder verpachten" intro: fit on two lines. */
#fl-s3-intro .text-cta__body {
  max-width: 1100px;
}

/* Lastspitzenmanagement kontakt: widen the quote so it fits on two lines.
   The section id (#kontakt) is shared across pages, so scope by page class. */
.page-lastspitzenmanagement .contact-min__quote {
  max-width: 1100px;
}

.text-cta__btn {
  display: inline-block;
  background: #FFD700;
  color: var(--color-primary);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.9rem 2.4rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}

.text-cta__btn:hover {
  background: #e0b500;
  transform: translateY(-1px);
}

.text-cta__btn:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .text-cta__btn {
    width: 100%;
    text-align: center;
  }
}




.dark-banner {
  background: var(--color-bg-dark-2);
  padding: var(--space-xl) var(--space-xl);
  width: 100%;
  text-align: center;
}

.dark-banner__heading {
  font-size: 35px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
}



/* ==========================================================================
   SOLANOX COMPONENT: FULL SUPPLY (VARIANTE 2)
   ========================================================================== */

/* Haupt-Sektions-Rahmen */
.solanox-supply-section {
    padding: 100px 0;
    background-color: var(--color-bg-neutral); /* Heller Sektions-Hintergrund */
    width: 100%;
    box-sizing: border-box;
}

.solanox-supply-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Haupttitel (Variante 2:) */
.solanox-supply-main-title {
    font-size: 3rem;
    color: #142534; /* Solanox Dunkelblau */
    font-weight: 600;
    text-align: center;
    margin-bottom: 60px;
    margin-top: 0;
}

/* Flex-Grids */
.solanox-supply-grid {
    display: flex;
    justify-content: space-between;
    gap: 60px;
}

.solanox-supply-grid--top {
    margin-bottom: 80px;
}

.solanox-supply-grid--bottom {
    align-items: flex-start;
}

/* Universelle Spalten-Steuerung */
.solanox-supply-col {
    flex: 1;
    width: 50%;
}

/* Spaltenüberschriften */
.solanox-supply-subtitle {
    font-size: 1.8rem;
    color: #142534;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 24px;
}

/* Einleitungstext links oben */
.solanox-supply-text p {
    font-size: 1.1rem;
    line-height: 1.65;
    color: #2c3e50;
    margin: 0;
}

/* Listen-Strukturierungen (To-Dos & Vorteile) */
.solanox-supply-list ul,
.solanox-supply-advantages ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.solanox-supply-list li,
.solanox-supply-advantages li {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #2c3e50;
    position: relative;
    padding-left: 22px;
    margin-bottom: 14px;
}

/* Einheitliche Bullet-Points */
.solanox-supply-list li::before,
.solanox-supply-advantages li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: #142534;
    font-weight: bold;
    font-size: 1.3rem;
}

/* Markierung fetter Textabschnitte in den Listen */
.solanox-supply-advantages li strong {
    color: #142534;
    font-weight: 700;
}

/* Call-to-Action Button Styling */
.solanox-supply-cta-wrap {
    margin-top: 35px;
}

.solanox-supply-btn {
    display: inline-block;
    background-color: #ffd000; /* Solanox Gelb */
    color: #142534;
    padding: 15px 30px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.solanox-supply-btn:hover {
    background-color: #e6bc00;
}

.solanox-supply-btn:active {
    transform: scale(0.98);
}

/* Bildspalten-Konstruktion mit dem schwebenden Badge */
.solanox-supply-col--image {
    display: flex;
    align-items: stretch;
}

.solanox-supply-img-wrapper {
    position: relative; /* Hält das absolute Badge im Bildkontext */
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.solanox-supply-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

/* SCHWEBENDES WEISSES TEXT-BADGE OVERLAY */
.solanox-image-badge {
    position: absolute;
    bottom: -25px;   /* Drückt das Feld über den unteren Bildrand */
    left: -25px;     /* Drückt das Feld über den linken Bildrand */
    background-color: #ffffff;
    padding: 35px 30px;
    border-radius: 12px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
    width: 300px;    /* Garantiert sauberen Textumbruch analog zum Screenshot */
    box-sizing: border-box;
    z-index: 5;
}

.solanox-image-badge__eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #718096;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.solanox-image-badge__heading {
    font-size: 1.4rem;
    line-height: 1.35;
    color: #142534;
    font-weight: 600;
    margin: 0;
}

/* RESPONSIVE BREAKPOINTS (TABLET & SMARTPHONE) */
@media (max-width: 1024px) {
    .solanox-supply-grid {
        gap: 40px;
    }
    .solanox-image-badge {
        width: 260px;
        padding: 25px 20px;
        left: -10px;
        bottom: -10px;
    }
}

@media (max-width: 992px) {
    .solanox-supply-grid {
        flex-direction: column;
        gap: 50px;
    }
    .solanox-supply-col {
        width: 100%;
    }
    .solanox-supply-main-title {
        font-size: 2.4rem;
        margin-bottom: 40px;
    }
    .solanox-supply-grid--bottom {
        flex-direction: column-reverse; /* Bild rückt mobil unter den Text */
    }
    .solanox-supply-img-wrapper {
        height: 350px;
        margin-top: 20px;
    }
    /* Auf Mobilgeräten wird das Badge entkoppelt, um Layoutaufbrüche zu verhindern */
    .solanox-image-badge {
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-top: -40px; /* Schiebt sich leicht über das Bild */
        margin-left: auto;
        margin-right: auto;
        max-width: 90%;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }
}



/* ==========================================
   PEAK SHAVING SOLUTIONS
========================================== */

.peak-solutions {
    padding: 120px 0;
    background: var(--color-bg-neutral);
}

/* Break out wider so the sticky chart sits further left and reads larger */
.peak-solutions .container {
    max-width: 1520px;
}

.peak-solutions-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 64px;
    align-items: start;
}

/* LEFT */

.peak-solutions-image {
    position: sticky;
    top: 180px;
}

.peak-solutions-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* RIGHT */

.solution-item {
    margin-bottom: 90px;
}

.solution-item:last-child {
    margin-bottom: 0;
}

.solution-item h2 {
    font-size: clamp(2rem, 3vw, 3.5rem);
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 25px;
}

.solution-text {
    color: var(--color-primary);
    line-height: 1.75;
    font-size: 1.15rem;
}

.solution-text p {
    margin-bottom: 0;
}

/* BUTTON */

.solution-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 30px;

    min-width: 280px;

    padding: 18px 36px;

    background: #ffd200;
    color: #183547;

    font-weight: 600;
    font-size: 1.05rem;

    border-radius: 10px;

    transition: .3s;
}

.solution-btn:hover {
    transform: translateY(-3px);
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 1200px) {

    .peak-solutions-grid {
        gap: 50px;
    }

}


@media (max-width: 992px) {

    .peak-solutions {
        padding: 80px 0;
    }

    .peak-solutions-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .peak-solutions-image {
        position: relative;
        top: auto;
    }

    .solution-item {
        margin-bottom: 60px;
    }

    .solution-btn {
        width: 100%;
        min-width: auto;
    }

}



/* ====================================
   GRUNDLAGEN
==================================== */

.grundlagen-section {
    background: var(--color-bg-neutral);
    padding: var(--space-2xl) 0;
}

/* Wider than the default container so the cards get more horizontal room */
.grundlagen-section .container {
    max-width: 1360px;
}

.section-divider {
    width: 100%;
    height: 1px;
    background: #183547;
    margin-bottom: 60px;
}

/* Minimalist section separator (divider block) — full site width */
.block-divider {
    width: 100%;
    height: 1px;

    margin: 0;

    border: 0;
    background: var(--color-neutral-300);
}

/* Every section gets 1 extra unit (0.5rem) of inner breathing room, top & bottom.
   A transparent border (with default border-box background-clip) keeps the
   section's own background showing through, so it reads as section padding — not
   a white gap — and it ADDS to each section's existing padding instead of
   overriding it. The divider block is an <hr>, so it's excluded. */
.main-content > section {
    border-top: var(--space-xs) solid transparent;
    border-bottom: var(--space-xs) solid transparent;
}
/* First section (the hero) must sit flush against the top — otherwise its
   transparent top border reveals the white body background as a blank strip
   beneath the fixed, transparent header on every subpage. */
.main-content > section:first-child {
    border-top: 0;
}
/* Section heading */
.grundlagen-title {
    text-align: center;
    font-size: clamp(1.6rem, 4vw, 3rem);
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--space-lg);
    overflow-wrap: break-word;
    hyphens: none; /* no ugly mid-word hyphenation in headings; overflow-wrap still breaks over-long words */
}

/* lighter divider at the top of the cards section (matches the global block-divider,
   but keeps a gap before the heading since it sits inside the container) */
.grundlagen-divider {
    margin-bottom: 56px;
}

/* Center the heading/subheading of the "Für wen sich Lastspitzenmanagement
   besonders lohnt" 4-column grid only (scoped to that block, not all 4-col grids) */
#lm-s3b-zielgruppen .svc-grid__header {
    text-align: center;
}

/* Ladeinfrastruktur "vier Nutzergruppen": make the four cards a bit bigger —
   grow the width (wider container + narrower side gutters) more than the
   height (small vertical padding bump). Scoped to this block only. */
#li-s2-cases {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}
#li-s2-cases .svc-grid__inner {
    max-width: 1600px;
}
#li-s2-cases .svc-grid__cards .grundlagen-card {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}
/* Widen the subheading so it fits on two lines instead of three. */
#li-s2-cases .svc-grid__subheading {
    max-width: 1000px;
}

/* EaaS "Geeignete Branchen": the preceding text_cta already adds its own bottom
   padding, so trim this grid's top padding to pull the heading up closer. */
#ea-s6-branchen {
    padding-top: var(--space-md);
}

/* Freiflächen "mit / ohne Speicher" — these are alternatives to compare, not
   ordered steps, so drop the sequential ghost numbers and reclaim the title's
   right padding they reserved. */
#fl-s4-speicher .grundlagen-card__badge { display: none; }
#fl-s4-speicher .grundlagen-card h3 { padding-right: 0; }
/* Highlight the "mit" / "ohne" words in the comparison titles. Stays yellow on
   the navy hover fill too (explicit colour beats the h3→white hover rule). */
#fl-s4-speicher .grundlagen-card h3 .hl-yellow { color: var(--color-accent); }

/* ---- Cards ---- */
.grundlagen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    grid-auto-rows: 1fr; /* all rows equal height → every card the same size regardless of content */
}

/* Two-card layout (e.g. "mit / ohne Speicher" comparison) — balanced, centered */
.grundlagen-grid--2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

.grundlagen-card {
    position: relative;
    display: flex;
    flex-direction: column;

    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);

    padding: 30px 34px 30px;
    overflow: hidden;

    text-align: left;

    transition: transform 0.4s cubic-bezier(.2, .7, .2, 1),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
}

.grundlagen-card:hover {
    transform: translateY(-8px);
    border-color: var(--color-primary);
    box-shadow: 0 22px 46px rgba(24, 53, 71, 0.18);
}

/* Navy→blue wave that fills the card from the bottom-left corner on hover */
.grundlagen-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--color-primary);
    clip-path: circle(0% at 14% 100%);
    transition: clip-path 0.6s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
}

.grundlagen-card:hover::before {
    clip-path: circle(150% at 14% 100%);
}

/* Keep all content above the fill */
.grundlagen-card__badge,
.grundlagen-card h3,
.grundlagen-card .card-text,
.grundlagen-card__cta {
    position: relative;
    z-index: 1;
}

/* Oversized faint ghost number in the top-right corner */
.grundlagen-card__badge {
    position: absolute;
    top: 14px;
    right: 26px;
    margin: 0;
    padding: 0;
    background: none;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 3rem; /* reduced from 4.5rem so the ghost number doesn't overlap longer titles */
    line-height: 1;
    color: rgba(26, 50, 64, 0.07);
    transition: color 0.5s ease;
    pointer-events: none;
}

.grundlagen-card:hover .grundlagen-card__badge {
    color: rgba(255, 255, 255, 0.14);
}

.grundlagen-card h3 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-primary);
    margin-bottom: 18px;
    padding-right: 54px; /* keep the title clear of the ghost number in the top-right corner */
    transition: color 0.4s ease;
}

.grundlagen-card:hover h3 {
    color: #fff;
}

/* Body text inverts to white on the navy fill */
.grundlagen-card:hover .card-text,
.grundlagen-card:hover .card-text strong,
.grundlagen-card:hover .card-text li {
    color: rgba(255, 255, 255, 0.88);
}

.grundlagen-card:hover .card-text strong {
    color: #fff;
}

/* Simple inline CTA that inverts; arrow nudges right + turns accent */
.grundlagen-card__cta {
    align-self: flex-start;
    margin-top: 28px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-primary);
    text-decoration: none;

    transition: color 0.4s ease;
}

.grundlagen-card:hover .grundlagen-card__cta {
    color: #fff;
}

.grundlagen-card__cta-arrow {
    transition: transform 0.35s ease, color 0.35s ease;
}

.grundlagen-card:hover .grundlagen-card__cta-arrow {
    transform: translateX(5px);
    color: var(--color-accent);
}

/* Card body (rich text from the Panel) */
.card-text {
    flex-grow: 1;
    color: var(--color-neutral-500);
    font-size: var(--text-body);
    line-height: 1.7;
}

.card-text p {
    margin-bottom: 14px;
}

.card-text p:last-child {
    margin-bottom: 0;
}

.card-text strong {
    color: var(--color-primary);
    font-weight: 600;
}

.card-text ul {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}

.card-text li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
}

/* custom accent marker */
.card-text li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent);
}

/* Staggered reveal: cards fade/slide in first-to-last when the grid scrolls into
   view. Uses a keyframe animation (not a transition) so it plays reliably even when
   the section is already in the viewport on first page load. */
.grundlagen-card[data-animate] {
    opacity: 0;
    transform: translateY(28px);
    transition: none;
}
.grundlagen-card[data-animate].visible {
    animation: grundlagenCardIn 0.6s ease both;
}
.grundlagen-grid .grundlagen-card:nth-child(1).visible { animation-delay: 0.05s; }
.grundlagen-grid .grundlagen-card:nth-child(2).visible { animation-delay: 0.20s; }
.grundlagen-grid .grundlagen-card:nth-child(3).visible { animation-delay: 0.35s; }
.grundlagen-grid .grundlagen-card:nth-child(4).visible { animation-delay: 0.50s; }
.grundlagen-grid .grundlagen-card:nth-child(5).visible { animation-delay: 0.65s; }
.grundlagen-grid .grundlagen-card:nth-child(6).visible { animation-delay: 0.80s; }

@keyframes grundlagenCardIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .grundlagen-card[data-animate] {
        opacity: 1;
        transform: none;
        animation: none;
    }
    .grundlagen-card,
    .grundlagen-card::before,
    .grundlagen-card__badge,
    .grundlagen-card h3,
    .grundlagen-card__cta,
    .grundlagen-card__cta-arrow {
        transition: none;
    }
}

/* Card CTA */
.grundlagen-btn {
    align-self: flex-start;
    margin-top: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 13px 26px;

    background: var(--color-accent);
    color: var(--color-primary);

    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9375rem;

    border-radius: var(--radius-full);

    transition: background var(--transition-base), transform var(--transition-base);
}

.grundlagen-btn:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
}

@media (max-width: 1200px) {
    .grundlagen-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 5-card grid on desktop: top row of 3, bottom row of 2 centered */
@media (min-width: 1201px) {
    .grundlagen-grid--5 {
        grid-template-columns: repeat(6, 1fr);
    }
    .grundlagen-grid--5 .grundlagen-card {
        grid-column: span 2;
    }
    .grundlagen-grid--5 .grundlagen-card:nth-child(4) {
        grid-column: 2 / span 2;
    }
    .grundlagen-grid--5 .grundlagen-card:nth-child(5) {
        grid-column: 4 / span 2;
    }
}

@media (max-width: 768px) {
    .grundlagen-section {
        padding: 80px 0;
    }

    .grundlagen-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .grundlagen-title {
        margin-bottom: 50px;
    }
}


/*===== Alert banner ==*/

.alert-banner {
  background: var(--color-bg-neutral);
  padding: var(--space-3xl) var(--space-2xl);
}

.alert-banner__inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.alert-banner__alert {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.alert-banner__alert-text {
  font-size: clamp(2rem, 5vw, 2.25rem);
  font-weight: 600;
  color: #FF0000;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.5;
  margin: 0;
}

.alert-banner__alert-subtext {
  font-size: clamp(1.5rem, 4vw, 1.8rem);
  font-weight: 600;
  color: #FF0000;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0;
}

.alert-banner__body {
  border-top: 1px solid var(--color-neutral-300, #ddd);
  padding-top: var(--space-xl);
}

.alert-banner__body-text {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.75;
  color: var(--color-primary);
  margin: 0;
}

.alert-banner__body-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.alert-banner__body-link:hover {
  opacity: 0.7;
}

@media (max-width: 768px) {
  .alert-banner__alert-text,
  .alert-banner__alert-subtext {
    font-size: 0.95rem;
  }
}

/* === cta bar ==*/
.img-cta-bar {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: var(--space-2xl) var(--space-2xl);
}

/* Über uns banner — use the higher-quality static hero-2 asset as the
   background (overrides the block's inline background-image). Scoped to this
   page only; the same block on the pv-foerderung page keeps its own image. */
.page-ueber-uns .img-cta-bar {
  background-image: url('../img/hero-2.jpg') !important;
}

.img-cta-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 40, 60, 0.55);
}

.img-cta-bar__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.img-cta-bar__btn {
  display: inline-block;
  background: #ffd700;
  color: #1a3240;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.75rem 2rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

/* Keep the button's own color on hover — animate with a lift, slight scale
   and shadow instead of the (bad-looking) navy color swap. */
.img-cta-bar__btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 22px rgba(0,0,0,0.28);
}

@media (max-width: 768px) {
  .img-cta-bar__inner {
    flex-direction: column;
    align-items: center;
  }

  .img-cta-bar__btn {
    width: 100%;
    text-align: center;
  }
}


/* ====== membership Badge === */
.member-badge {
  background: var(--color-bg-neutral);
  padding: var(--space-3xl) var(--space-2xl);
}

.member-badge__inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  text-align: center;
}

.member-badge__text {
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
  line-height: 1.6;
}

.member-badge__logo-link {
  display: inline-block;
  transition: opacity 0.2s;
}

.member-badge__logo-link:hover {
  opacity: 0.8;
}

.member-badge__logo {
  height: 120px;
  width: auto;
  display: block;
}

@media (max-width: 768px) {
  .member-badge__logo {
    height: 90px;
  }
}



/* ====== Contact map === */

.contact-map {
  background: var(--color-bg-neutral);
  padding: var(--space-3xl) 0;
}

/* Anfahrt page: drop the section's bottom padding when the full-width map is
   the last block, so the map sits flush against the footer. The :not() chain
   lifts specificity above the global section-spacing rule. */
.main-content > section.contact-map:not(.hero):not(.ref-hero):not(.solutions):last-child {
  padding-bottom: 0;
}

/* Info — constrained & centered, minimalistic (no card) */
.contact-map__info {
  max-width: 1100px;
  margin: 0 auto var(--space-2xl);
  padding: 0 var(--space-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xl);
}

.contact-map__heading {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
}

/* Three contact details in a centered row */
.contact-map__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xl) var(--space-2xl);
  width: 100%;
}

.contact-map__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-align: left;
}

/* Icon — gold line glyph, no filled box */
.contact-map__icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  background: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.contact-map__icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--color-primary);
}

.contact-map__detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-map__label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0;
}

.contact-map__value {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-neutral-500);
  margin: 0;
}

.contact-map__value--link {
  color: var(--color-neutral-500);
  text-decoration: none;
}

.contact-map__value--link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Buttons — centered row */
.contact-map__btns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: 0;
}

.contact-map__btn {
  display: inline-block;
  background: var(--color-btn);
  color: var(--color-primary);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.8rem 2rem;
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s, transform 0.15s;
}

.contact-map__btn:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
}

/* Map — full-bleed, edge to edge of the page (section has no side padding) */
.contact-map__map {
  width: 100%;
  height: 460px;
  overflow: hidden;
}

.contact-map__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 768px) {
  .contact-map__items {
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
  }
  .contact-map__map {
    height: 340px;
  }
}

/* ======= Kontakt form ======= */

/* ==========================================================================
   SOLANOX FORM DESIGN (SCREENSHOT SPLIT IMPLEMENTATION)
   ========================================================================== */

.solanox-contact-section {
    width: 100%;
    padding: 100px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.solanox-contact-card {
    width: 100%;
    max-width: 650px;
    background-color: #ffffff;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: 0 22px 50px rgba(20, 40, 60, 0.18);
    box-sizing: border-box;
    animation: solanoxFormIn 0.6s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes solanoxFormIn {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .solanox-contact-card { animation: none; }
    .solanox-form__btn { transition: none; }
}

/* Header & Brand */
.solanox-contact-card__header {
    text-align: left;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--color-neutral-200);
    padding-bottom: 24px;
}

.solanox-contact-card__logo {
    max-height: 46px;
    width: auto;
    display: block;
    margin: 0 0 16px 0;
}

/* Eyebrow */
.solanox-contact-card__subline {
    color: var(--color-primary-light);
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin: 0 0 8px 0;
}

.solanox-contact-card__title {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    text-align: left;
    margin: 0;
}

/* short yellow accent bar under the title */
.solanox-contact-card__title::after {
    content: "";
    display: block;
    width: 52px;
    height: 4px;
    border-radius: 999px;
    background: var(--color-accent);
    margin-top: 14px;
}

/* Formular Elemente */
.solanox-form__group {
    margin-bottom: 25px;
}

.solanox-form__label {
    display: block;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 10px;
}

.solanox-form__required {
    color: #ff4d4d; /* Rote Pflichtfeld-Sterne */
    margin-left: 2px;
}

/* Input & Textarea Styling */
.solanox-form input[type="text"],
.solanox-form input[type="email"],
.solanox-form input[type="tel"],
.solanox-form__select,
.solanox-form__textarea {
    width: 100%;
    background-color: var(--color-neutral-100);
    border: 1px solid var(--color-neutral-300);
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 1rem;
    color: var(--color-primary);
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.solanox-form input:focus,
.solanox-form__select:focus,
.solanox-form__textarea:focus {
    outline: none;
    background-color: #ffffff;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.25);
}

.solanox-form ::placeholder { color: var(--color-neutral-500); }

/* Zweispaltiges Namensfeld */
.solanox-form__row {
    display: flex;
    gap: 15px;
}

.solanox-form__col {
    flex: 1;
}

.solanox-form__sublabel {
    display: block;
    color: var(--color-neutral-500);
    font-size: 0.8rem;
    margin-top: 5px;
}

/* Bevorzugte Kontaktaufnahme — segmented chips (built from the radios via CSS) */
.solanox-form__radio-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 5px;
}

.solanox-form__radio-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
}

/* visually hide the actual radio (still focusable + submitted) */
.solanox-form__radio-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* the label text becomes the chip */
.solanox-form__radio-label span {
    display: inline-block;
    padding: 10px 22px;
    border: 1px solid var(--color-neutral-300);
    border-radius: 999px;
    color: var(--color-primary);
    font-weight: 600;
    background: #ffffff;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.solanox-form__radio-label:hover span {
    border-color: var(--color-primary);
}

/* selected chip */
.solanox-form__radio-label input[type="radio"]:checked + span {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

/* keyboard focus ring */
.solanox-form__radio-label input[type="radio"]:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.35);
}

/* Select Box Anpassung an Screenshot 1 */
.solanox-form__select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%231a2e3b' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 15px) center;
    padding-right: 40px;
    cursor: pointer;
}

/* Absendebutton (Exakt zentriert und gelb) */
.solanox-form__submit-wrap {
    display: flex;
    justify-content: center;
    margin-top: 35px;
}

.solanox-form__btn {
    background-color: var(--color-accent); /* Solanox Gelb */
    color: var(--color-primary);
    border: none;
    border-radius: 999px;
    padding: 14px 52px;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.25s ease;
    box-shadow: 0 6px 18px rgba(20, 40, 60, 0.12);
}

.solanox-form__btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(20, 40, 60, 0.2);
}

.solanox-form__btn:active {
    transform: translateY(0);
}

/* Validierungsfehler */
.solanox-form input.is-invalid {
    border-color: #ff4d4d;
    background-color: #fff5fff5;
}

/* Alerts */
.solanox-form-alert {
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-weight: 600;
}
.solanox-form-alert--success {
    background-color: #28a745;
    color: white;
}
.solanox-form-alert--error {
    background-color: #dc3545;
    color: white;
}

/* Responsive Anpassung */
@media (max-width: 576px) {
    .solanox-contact-card {
        padding: 25px 20px;
        border-radius: 0;
    }
    .solanox-form__row {
        flex-direction: column;
        gap: 15px;
    }
    .solanox-form__btn {
        width: 100%;
    }
}






/* ==========================================================================
   SOLANOX COMPONENT: ZOHO IFRAME EMBED
   ========================================================================== */

.solanox-zoho-section {
    width: 100%;
    padding: 20px 0;
    background-color:var(--color-bg-neutral); /* Oder Hintergrundbild analog zu vorher */
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.solanox-zoho-card {
    width: 100%;
    max-width: 1000px; /* Leicht breiter für Zoho-Standardlayouts */
    background-color: #1a2e3b; /* Das Solanox-Dunkelblau */
  
    border-radius: 12px;
    /*padding: 20px; /* Leichtes Padding als Rahmen um das Zoho-Design */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    overflow: hidden;
}

.solanox-zoho-iframe-wrapper {
    position: relative;
    width: 100%;
    height: var(--iframe-height, 800px);
    border-radius: 8px;
    overflow: hidden;
    background-color: #ffffff; /* Falls das Zoho-Formular einen weißen Hintergrund hat */
}

.solanox-zoho-iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Responsive Höhenanpassung, da Formulare mobil durch Zeilenumbrüche länger werden */
@media (max-width: 768px) {
    .solanox-zoho-section {
        padding: 40px 10px;
    }
    
    .solanox-zoho-card {
        border-radius: 8px;
        padding: 10px;
    }
    
    .solanox-zoho-iframe-wrapper {
        height: var(--iframe-height-mobile, 900px);
    }
}




/* ==========================================
   ENERGY CHAIN
========================================== */

/* ==========================================
   ENERGY CHAIN — Process Rail
   Numbered nodes threaded by a line that draws
   left→right (yellow) when scrolled into view.
========================================== */
.energy-chain {
    padding: 72px 0;
    background: var(--color-bg-neutral);
}

/* Wider than the default container so the 6-step rail's captions aren't cramped */
.energy-chain .container {
    max-width: 1560px;
}

.energy-rail {
    position: relative;
}

.energy-rail__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.energy-step {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 12px;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ---- The threading line (sits behind the nodes) ---- */
.energy-rail__line {
    position: absolute;
    top: 27px;                                   /* node centre (56 / 2 - 1) */
    left: calc(50% / var(--steps, 6));           /* start at first node centre */
    right: calc(50% / var(--steps, 6));          /* end at last node centre */
    height: 2px;
    background: var(--color-neutral-200);
    z-index: 0;
}

/* yellow progress fill that draws across on reveal */
.energy-rail__line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.1s ease 0.2s;
}

.energy-rail.visible .energy-rail__line::after {
    transform: scaleX(1);
}

/* Energy-chain sections where the yellow accent rail looks off — use the navy
   primary rail instead. Scoped per block. */
#li-s3-chain .energy-rail__line::after,
#ea-s3-chain .energy-rail__line::after,
#gb-s4b-erloese .energy-rail__line::after {
    background: var(--color-primary);
}

/* ---- Node ---- */
.energy-step__node {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    margin-bottom: 22px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 2px solid var(--color-neutral-200);

    font-family: "Syne", sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-primary);

    transition: transform 0.35s ease, background 0.35s ease,
                border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}

/* pulse ring on hover */
.energy-step__node::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--color-accent);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.energy-step:hover .energy-step__node {
    transform: translateY(-4px) scale(1.06);
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 10px 22px rgba(24, 53, 71, 0.20);
}

.energy-step:hover .energy-step__node::before {
    opacity: 1;
    transform: scale(1);
}

/* result node */
.energy-step__node--result {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.energy-step__check {
    color: var(--color-accent);
    font-size: 1.65rem;
    line-height: 1;
}

.energy-step__check-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* ---- Body ---- */
.energy-step__body h3 {
    font-family: "Syne", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 10px;
    transition: color 0.3s ease;
}

.energy-step__body p {
    margin: 0;
    font-size: var(--text-body);
    line-height: 1.6;
    color: var(--color-primary);
}

.energy-step:hover .energy-step__body h3 {
    color: var(--color-primary-light);
}

.energy-step--result .energy-step__body h3 {
    text-transform: none;
    font-size: 1.12rem;
}

/* ---- Sequential reveal of the nodes/cards ---- */
.energy-step[data-animate] {
    opacity: 0;
    transform: translateY(14px);
    transition: none;
}
.energy-step[data-animate].visible {
    animation: railStepIn 0.5s ease both;
}
.energy-rail__steps .energy-step:nth-child(1).visible { animation-delay: 0.10s; }
.energy-rail__steps .energy-step:nth-child(2).visible { animation-delay: 0.24s; }
.energy-rail__steps .energy-step:nth-child(3).visible { animation-delay: 0.38s; }
.energy-rail__steps .energy-step:nth-child(4).visible { animation-delay: 0.52s; }
.energy-rail__steps .energy-step:nth-child(5).visible { animation-delay: 0.66s; }
.energy-rail__steps .energy-step:nth-child(6).visible { animation-delay: 0.80s; }
.energy-rail__steps .energy-step:nth-child(7).visible { animation-delay: 0.94s; }

@keyframes railStepIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Mobile: rail goes vertical ---- */
@media (max-width: 860px) {
    .energy-rail__steps {
        flex-direction: column;
        align-items: stretch;
    }

    .energy-rail__line {
        top: 27px;
        bottom: 27px;
        left: 27px;
        right: auto;
        width: 2px;
        height: auto;
    }
    .energy-rail__line::after {
        transform: scaleY(0);
        transform-origin: top center;
        transition: transform 1.1s ease 0.2s;
    }
    .energy-rail.visible .energy-rail__line::after {
        transform: scaleY(1);
    }

    .energy-step {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 20px;
        padding: 0 0 30px;
    }
    .energy-step:last-child {
        padding-bottom: 0;
    }
    .energy-step__node {
        margin-bottom: 0;
        flex-shrink: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .energy-step[data-animate] {
        opacity: 1;
        transform: none;
        animation: none;
    }
    .energy-rail__line::after {
        transform: none;
        transition: none;
    }
    .energy-step__node,
    .energy-step__node::before,
    .energy-step__body h3 {
        transition: none;
    }
}




/* ==========================================
   PROCESS STEPS
========================================== */

.process-steps {
    padding: 120px 0;
    background: var(--color-bg-neutral);
    /* Accent of the active step (the highlighted stepper dot). The big ghost
       number in the panel follows this, so dot + box number always match.
       Default = primary (dark blue); yellow-dot designs override it below. */
    --process-active: var(--color-primary);
}

.process-heading {
    text-align: center;
    margin-bottom: 60px;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;

    color: #183547;
}

/* GRID */

.process-grid {

    display: flex;
    align-items: flex-start;
    justify-content: center;

    gap: 20px;

    position: relative;
}

/* dashed line */

.process-grid::before {

    content: "";

    position: absolute;

    top: 24px;
    left: 7%;

    width: 86%;
    height: 2px;

    border-top: 2px dashed rgba(24,53,71,.35);

    z-index: 1;
}

/* CARD */

.process-cardd {

    position: relative;

    flex: 1;

    text-align: center;

    z-index: 2;
}

/* NUMBER */

.process-number {

    width: 45px;
    height: 45px;

    margin: 0 auto 20px;

    border-radius: 50%;

    background: #183547;

    color: white;

    font-weight: 600;
    font-size: 1.2rem;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* ICON */

.process-icon-wrap {

    height: 90px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;
}

.process-icon {

    max-width: 70px;
    max-height: 70px;

    object-fit: contain;
}

/* TITLE */

.process-cardd h3 {

    font-size: 1.3rem;
    font-weight: 600;

    text-transform: uppercase;

    color: #183547;

    margin-bottom: 12px;
}

/* TEXT */

.process-cardd p {

    color: #183547;

    line-height: 1.6;

    font-size: 1rem;
}

/* ARROW */

.process-arrow {

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffd700;

    font-size: 3rem;

    font-weight: 300;

    margin-top: 85px;

    flex-shrink: 0;
}

@media (max-width: 1100px) {

    .process-grid {

        flex-direction: column;
        gap: 40px;
    }

    .process-grid::before {
        display: none;
    }

    .process-arrow {

        transform: rotate(90deg);

        margin: 0 auto;
    }

    .process-cardd {

        max-width: 500px;
        margin: 0 auto;
    }

}

/* ==========================================
   PROCESS STEPPER (interactive)
========================================== */

.process-stepper {
    max-width: 960px;
    margin: 0 auto;
}

/* --- TAB RAIL --- */

.process-tabs {
    display: flex;
    gap: 8px;
    position: relative;
    margin-bottom: 48px;
}

/* connecting line behind the numbers */
.process-tabs::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-neutral-200);
    z-index: 0;
}

.process-tab {
    position: relative;
    z-index: 1;

    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    padding: 0 6px;

    background: none;
    border: none;
    cursor: pointer;

    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.process-tab__num {
    width: 48px;
    height: 48px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--color-neutral);
    border: 2px solid var(--color-neutral-300);

    color: var(--color-neutral-500);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.15rem;

    transition: all var(--transition-base);
}

.process-tab__label {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-neutral-500);

    transition: color var(--transition-base);
}

/* hover (only on non-active) */
.process-tab:hover:not(.is-active) .process-tab__num {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* active state */
.process-tab.is-active .process-tab__num {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.process-tab.is-active .process-tab__label {
    color: var(--color-primary);
}

/* --- PANELS --- */

.process-panels {
    position: relative;
}

.process-panel {
    display: flex;
    align-items: flex-start;
    gap: 32px;

    padding: 48px;

    background: var(--color-neutral);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.process-panel[hidden] {
    display: none;
}

/* fade/slide in when activated */
.process-panel.is-active {
    animation: process-panel-in 350ms ease both;
}

@keyframes process-panel-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.process-panel__index {
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--process-active); /* matches the active stepper dot (yellow or dark-blue per design) */
}

/* Designs whose active stepper dot is yellow (accent) — keep the panel ghost
   number in sync. Mirrors the per-page active-dot overrides further below. */
.page-gewerbe-industrie > section:nth-of-type(11),
#gb-s5-schritte,
#gb-s7-phasen,
.page-dienstleistungen > section:nth-of-type(13),
.page-freiflaechen > section:nth-of-type(9),
#ea-s6-ablauf,
#lm-s6-umsetzung,
#gh-s5-prozess {
    --process-active: var(--color-accent);
}

/* lm + gh process-steps — active step dot yellow (was navy) */
#lm-s6-umsetzung .process-tab.is-active .process-tab__num,
#gh-s5-prozess .process-tab.is-active .process-tab__num {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary);
}
#lm-s6-umsetzung .process-tab:hover:not(.is-active) .process-tab__num,
#gh-s5-prozess .process-tab:hover:not(.is-active) .process-tab__num {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.process-panel__body {
    flex: 1;
}

.process-panel__step {
    display: inline-block;
    margin-bottom: 12px;

    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary-light);
}

.process-panel__title {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-primary);
    margin: 0 0 16px;
}

.process-panel__text {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-neutral-500);
    margin: 0;
}

/* --- RESPONSIVE --- */

@media (max-width: 768px) {

    .process-tabs {
        gap: 4px;
        margin-bottom: 32px;
    }

    /* hide the text labels on mobile – numbers only, keeps the rail clean */
    .process-tab__label {
        display: none;
    }

    .process-tab__num {
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }

    .process-tabs::before {
        top: 21px;
    }

    .process-panel {
        flex-direction: column;
        gap: 12px;
        padding: 32px 24px;
    }

    .process-panel__index {
        font-size: 3rem;
    }
}

/* ════════════════════════════════════════════════
   "Erstgespräch vereinbaren" buttons — attention shake on scroll into view
   (JS adds .ec-shake to matching buttons and toggles .ec-shake--go)
════════════════════════════════════════════════ */
.ec-shake {
    display: inline-block;
}

@keyframes ec-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-5px); }
    40%, 60% { transform: translateX(5px); }
}

.ec-shake--go {
    animation: ec-shake 0.7s cubic-bezier(.36, .07, .19, .97) both;
}

@media (prefers-reduced-motion: reduce) {
    .ec-shake--go {
        animation: none;
    }
}

/* ════════════════════════════════════════════════
   Referenzen — Project showcase carousel (minimalist, site palette)
════════════════════════════════════════════════ */
.ref-carousel {
    position: relative;
    background: var(--color-bg-neutral);
    padding: var(--space-lg) 0 var(--space-2xl);
}

.ref-carousel__viewport {
    overflow: hidden;
}

.ref-carousel__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.ref-carousel__track::-webkit-scrollbar {
    display: none;
}

.ref-carousel__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
}

/* Arrows */
.ref-carousel__arrow {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid var(--color-neutral-300);
    background: var(--color-bg-light);
    color: var(--color-primary);
    font-size: 1.9rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 6;
    box-shadow: 0 8px 22px rgba(20, 40, 60, 0.12);
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.ref-carousel__arrow:hover {
    background: var(--color-primary);
    color: #ffffff;
}

.ref-carousel__arrow--prev { left: 24px; }
.ref-carousel__arrow--next { right: 24px; }

.ref-carousel__arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Dots */
.ref-carousel__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: var(--space-lg);
}

.ref-carousel__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-neutral-300);
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.ref-carousel__dot:hover {
    background: var(--color-primary);
}

.ref-carousel__dot.is-active {
    background: var(--color-accent);
    transform: scale(1.35);
}

@media (max-width: 768px) {
    .ref-carousel__arrow {
        display: none;
    }
}

/* ════════════════════════════════════════════════
   GLOBAL SECTION RHYTHM — one solid standard across every page
   Every content section gets --space-2xl (4rem / 64px) top & bottom.
   Scoped to .main-content, which now wraps the block loop in every template
   (incl. the home page). Horizontal padding is left untouched.
   Heroes (.hero, .ref-hero) are excluded so they keep their full-bleed sizing.
   .solutions is also excluded: it's part of the home hero composition
   (margin-top: -275px + padding-top: 0 to overlap the hero video). */
.main-content > section:not(.hero):not(.ref-hero):not(.solutions) {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
    /* drop the global 0.5rem transparent section borders here so the spacing
       math is exactly --space-2xl and doesn't add up to more than the standard */
    border-top: 0;
    border-bottom: 0;
}
/* Tighten the vertical gap between the home page_heading and the areas cards
   below it — overrides the global --space-2xl rhythm for just these two sections.
   The :not() chain matches the rhythm rule's specificity so this wins. */
.main-content > section.page-heading:not(.hero):not(.ref-hero):not(.solutions) {
    padding-bottom: var(--space-md);
}
.main-content > section.areas:not(.hero):not(.ref-hero):not(.solutions) {
    padding-top: var(--space-md);
}
/* Baustein sequence (split_block + reverse_split building blocks): a bit less
   breathing room between consecutive blocks than the global rhythm. */
.main-content > section.split-block:not(.hero):not(.ref-hero):not(.solutions),
.main-content > section.feature-block:not(.hero):not(.ref-hero):not(.solutions) {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}
/* Intro paragraph → first Baustein: pull them noticeably closer. */
.main-content > section.text-cta:not(.hero):not(.ref-hero):not(.solutions):has(+ .split-block),
.main-content > section.text-cta:not(.hero):not(.ref-hero):not(.solutions):has(+ .feature-block) {
    padding-bottom: var(--space-md);
}
.main-content > section.text-cta + section.split-block:not(.hero):not(.ref-hero):not(.solutions),
.main-content > section.text-cta + section.feature-block:not(.hero):not(.ref-hero):not(.solutions) {
    padding-top: var(--space-md);
}
/* Subpage hero → first section. The .ref-hero draws its background from a child
   <img>, not a background-color, so (unlike content sections) its transparent
   bottom border paints nothing and reveals the white body as a strip. Drop that
   border so there's no white gap, while the section below keeps the standard
   --space-2xl top padding (in its own background colour) as breathing room.
   The :not() chain matches the spacing-standard rule's specificity so it wins. */
.main-content > .ref-hero {
    border-bottom: 0;
}
.main-content > .ref-hero + section:not(.hero):not(.ref-hero):not(.solutions) {
    padding-top: var(--space-2xl);
    border-top: 0;
}
/* Home hero → solutions overlap. Same root cause as the .ref-hero fix above:
   the home .hero's video background fills only its padding box, so its
   transparent bottom border (and the .solutions' transparent top border)
   reveal the white body as a thin strip between the hero and the gray
   solutions section. Drop both so the solutions gray meets the hero flush. */
.main-content > .hero { border-bottom: 0; }
.main-content > .solutions { border-top: 0; }
/* The testimonials grid carries a 6rem bottom margin (meant to separate it
   from the references in the testimonials_references layout). When the grid is
   the LAST element (standalone testimonials block), that margin stacks onto the
   section's 4rem bottom padding and makes the section look weirdly tall. Only
   then drop it — :last-child leaves the testimonials_references spacing intact. */
.main-content .testimonials .testimonials-grid:last-child {
    margin-bottom: 0;
}
/* Kunden (partners) + Stimmen/Referenzen (testimonials) read as ONE section.
   Collapse the global rhythm padding where they meet so the logos sit close to
   the "Stimmen aus der Praxis" heading. The :not() chain matches the rhythm
   rule's specificity so these win. */
.main-content > section.partners:not(.hero):not(.ref-hero):not(.solutions) {
    padding-bottom: var(--space-md);
}
.main-content > section.testimonials:not(.hero):not(.ref-hero):not(.solutions) {
    padding-top: 0;
}
/* Mobile: tighten the section rhythm so there's less dead vertical space and
   less scrolling. Generic sections 4rem→3rem; Baustein (split/feature) blocks
   3rem→2rem. Matches the :not() specificity and comes later in source order so
   it wins; the per-section exceptions above (page-heading, areas, text-cta,
   partners, testimonials) keep their tighter values via higher specificity. */
@media (max-width: 768px) {
    .main-content > section:not(.hero):not(.ref-hero):not(.solutions) {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-xl);
    }
    .main-content > section.split-block:not(.hero):not(.ref-hero):not(.solutions),
    .main-content > section.feature-block:not(.hero):not(.ref-hero):not(.solutions) {
        padding-top: var(--space-lg);
        padding-bottom: var(--space-lg);
    }
}

/* ════════════════════════════════════════════════
   SUBPAGE SECTION TONES — Lastspitzenmanagement
   Alternating gray / white / blue cycle between the hero (section 1) and the
   contact block (last section, left untouched). nth-of-type counts only the
   <section> elements (dividers are <hr>, so they don't shift the count):
     2 split-block    → gray
     3 reverse_split  → BLUE
     4 4-col          → white
     5 4-col          → BLUE
     6 peak-solutions → gray
     7 split_no_badge → BLUE
     8 process-steps  → white
     9 text_cta       → BLUE
    10 faq            → gray
   Brand tones: gray #DCDCDE (--color-bg-neutral), blue #1A3240 (--color-primary).
════════════════════════════════════════════════ */
.page-lastspitzenmanagement > section:nth-of-type(2),
.page-lastspitzenmanagement > section:nth-of-type(6),
.page-lastspitzenmanagement > section:nth-of-type(10) {
    background: var(--color-bg-neutral);
}
.page-lastspitzenmanagement > section:nth-of-type(4),
.page-lastspitzenmanagement > section:nth-of-type(8) {
    background: var(--color-neutral);
}
.page-lastspitzenmanagement > section:nth-of-type(3),
.page-lastspitzenmanagement > section:nth-of-type(5),
.page-lastspitzenmanagement > section:nth-of-type(7),
.page-lastspitzenmanagement > section:nth-of-type(9) {
    background: var(--color-primary);
}

/* Blue sections — flip section-level text to light. Cards (.svc-grid__card)
   and badges (.feature-block__badge) keep their own white bg + dark text. */
.page-lastspitzenmanagement > section:nth-of-type(3) .feature-block__heading,
.page-lastspitzenmanagement > section:nth-of-type(3) .feature-block__subheading,
.page-lastspitzenmanagement > section:nth-of-type(3) .feature-block__text,
.page-lastspitzenmanagement > section:nth-of-type(5) .svc-grid__heading,
.page-lastspitzenmanagement > section:nth-of-type(5) .svc-grid__subheading,
.page-lastspitzenmanagement > section:nth-of-type(7) .chart-split__heading,
.page-lastspitzenmanagement > section:nth-of-type(7) .chart-split__source,
.page-lastspitzenmanagement > section:nth-of-type(7) .chart-split__para,
.page-lastspitzenmanagement > section:nth-of-type(9) .text-cta__heading {
    color: var(--color-neutral);
}
.page-lastspitzenmanagement > section:nth-of-type(3) .feature-block__points,
.page-lastspitzenmanagement > section:nth-of-type(3) .feature-block__points p,
.page-lastspitzenmanagement > section:nth-of-type(3) .feature-block__points li,
.page-lastspitzenmanagement > section:nth-of-type(3) .feature-block__points strong,
.page-lastspitzenmanagement > section:nth-of-type(9) .text-cta__body {
    color: rgba(255,255,255,0.85);
}

/* "Was ist eine Lastspitze?" heading acts as a centered section header,
   spanning the full width above the chart + text row. */
.page-lastspitzenmanagement > section:nth-of-type(3) .feature-block__heading {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
    margin-bottom: var(--space-xl);
}
/* The blue "Was ist eine Lastspitze?" body paragraphs must be pure white,
   not the default muted gray — force it past any cascade/caching ambiguity. */
.page-lastspitzenmanagement > section:nth-of-type(7) .chart-split__right .chart-split__para {
    color: #ffffff !important;
}

/* The final summary line renders as a checkmark list (like the split/feature
   Baustein lists). kirbytext turns the "- " lines into <ul><li>; style them
   with the same gold check-circle used elsewhere. */
.page-lastspitzenmanagement > section:nth-of-type(7) .chart-split__para ul {
    list-style: none;
    margin: 0.2rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.page-lastspitzenmanagement > section:nth-of-type(7) .chart-split__para li {
    position: relative;
    padding-left: 2.1rem;
}
.page-lastspitzenmanagement > section:nth-of-type(7) .chart-split__para li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0.18em;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* kirbytext wraps each paragraph/list in a block element; the flex-column gap
   already spaces the Bausteine, so drop the default outer margins. */
.chart-split__para > :first-child { margin-top: 0; }
.chart-split__para > :last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════
   SUBPAGE SECTION TONES — Gewerbe & Industrie
   Alternating gray / blue starting at section 2 (the "Strom ist Ihr größter
   variabler Kostenfaktor" grid); hero (1) and kontakt (last) untouched.
   nth-of-type counts only <section> (dividers are <hr>, so they don't shift it):
     3  4-col grid        → BLUE
     4  text_cta intro    → gray
     5  split_block       → gray
     6  reverse_split     → gray
     7  split_block       → gray
     8  reverse_split     → gray
     9  text_cta          → BLUE
    10  grundlagen-cards  → gray
    11  process-steps     → BLUE
    12  text_cta proof    → gray
    13  faq               → BLUE
   Brand tones: gray #DCDCDE (--color-bg-neutral), blue #1A3240 (--color-primary).
════════════════════════════════════════════════ */
.page-gewerbe-industrie > section:nth-of-type(4),
.page-gewerbe-industrie > section:nth-of-type(5),
.page-gewerbe-industrie > section:nth-of-type(6),
.page-gewerbe-industrie > section:nth-of-type(7),
.page-gewerbe-industrie > section:nth-of-type(8),
.page-gewerbe-industrie > section:nth-of-type(10),
.page-gewerbe-industrie > section:nth-of-type(12) {
    background: var(--color-bg-neutral);
}
.page-gewerbe-industrie > section:nth-of-type(3),
.page-gewerbe-industrie > section:nth-of-type(9),
.page-gewerbe-industrie > section:nth-of-type(11),
.page-gewerbe-industrie > section:nth-of-type(13) {
    background: var(--color-primary);
}

/* Blue sections — flip section-level text to light; white cards keep dark text */
.page-gewerbe-industrie > section:nth-of-type(3) .svc-grid__heading,
.page-gewerbe-industrie > section:nth-of-type(3) .svc-grid__subheading,
.page-gewerbe-industrie > section:nth-of-type(9) .text-cta__heading {
    color: var(--color-neutral);
}
.page-gewerbe-industrie > section:nth-of-type(9) .text-cta__body {
    color: rgba(255, 255, 255, 0.85);
}

/* Blue process-steps (section 11) — heading + tab rail readable on navy.
   The active number circle would otherwise be navy-on-navy, so make it yellow. */
.page-gewerbe-industrie > section:nth-of-type(11) .process-heading {
    color: #ffffff;
}
.page-gewerbe-industrie > section:nth-of-type(11) .process-tab__label {
    color: rgba(255, 255, 255, 0.72);
}
.page-gewerbe-industrie > section:nth-of-type(11) .process-tab.is-active .process-tab__num {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary);
}
.page-gewerbe-industrie > section:nth-of-type(11) .process-tab.is-active .process-tab__label {
    color: #ffffff;
}
.page-gewerbe-industrie > section:nth-of-type(11) .process-tab:hover:not(.is-active) .process-tab__num {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* Blue FAQ (section 13) — recolor accordion internals */
.page-gewerbe-industrie > section:nth-of-type(13) .dgs-banner__text { color: rgba(255, 255, 255, 0.82); }
.page-gewerbe-industrie > section:nth-of-type(13) .faq-divider { background: rgba(255, 255, 255, 0.18); }
.page-gewerbe-industrie > section:nth-of-type(13) .faq-block__eyebrow { color: rgba(255, 255, 255, 0.65); }
.page-gewerbe-industrie > section:nth-of-type(13) .faq-block__heading { color: #ffffff; }
.page-gewerbe-industrie > section:nth-of-type(13) .faq-list { border-top-color: rgba(255, 255, 255, 0.18); }
.page-gewerbe-industrie > section:nth-of-type(13) .faq-item { border-bottom-color: rgba(255, 255, 255, 0.18); }
.page-gewerbe-industrie > section:nth-of-type(13) .faq-item__question { color: #ffffff; }
.page-gewerbe-industrie > section:nth-of-type(13) .faq-item__answer p { color: rgba(255, 255, 255, 0.78); }
.page-gewerbe-industrie > section:nth-of-type(13) .faq-item__icon { color: var(--color-accent); }
.page-gewerbe-industrie > section:nth-of-type(13) .faq-item__trigger:hover .faq-item__question,
.page-gewerbe-industrie > section:nth-of-type(13) .faq-item.is-open .faq-item__question { color: var(--color-accent); }

/* ════════════════════════════════════════════════
   SUBPAGE SECTION TONES — Energy as a Service
   Targeted by block id (robust — independent of section order). Every block
   defaults to the gray --color-bg-neutral; only the navy sections are listed.
   Clean group-level alternation, top to bottom:
     s1 intro            gray
     s2 Hürden+stat      NAVY
     s3 how-it-works     gray
     s4 Modelle CTA      NAVY
     s5 Vorteile         gray
     s6 Branchen+Ablauf  NAVY
     crosslink           gray
     s7 FAQ              NAVY
   Brand navy = --color-primary (#1A3240).
════════════════════════════════════════════════ */
#ea-s2-huerden,
#ea-s2-stat,
#ea-s4-cta,
#ea-s6-intro,
#ea-s6-partner,
#ea-s6-ablauf,
#ea-s7-faq {
    background: var(--color-primary);
}

/* grundlagen Hürden — white heading; white cards keep their dark text */
#ea-s2-huerden .grundlagen-title { color: #ffffff; }

/* navy text_cta sections — light text */
#ea-s2-stat .text-cta__heading,
#ea-s4-cta .text-cta__heading,
#ea-s6-intro .text-cta__heading { color: var(--color-neutral); }
#ea-s2-stat .text-cta__body,
#ea-s4-cta .text-cta__body,
#ea-s6-intro .text-cta__body { color: rgba(255, 255, 255, 0.85); }

/* s3 "Was technisch dahintersteckt": short checklist — balance the columns 1:1
   so the text fills its column and the gap to the image reads naturally.
   Desktop only — below 769px the block must keep its single-column stack, so this
   ID rule (higher specificity than the mobile rule) is scoped to min-width. */
@media (min-width: 769px) {
  #ea-s3-technik .split-block__inner { grid-template-columns: 1fr 1fr; }
}

/* s6 partner (reverse_split) — light text */
#ea-s6-partner .feature-block__heading,
#ea-s6-partner .feature-block__subheading { color: #ffffff; }

/* s6 partner — heading as a centered section title spanning above the image+text */
#ea-s6-partner .feature-block__heading {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: var(--space-lg);
    /* match the standard section-title size (same as .process-heading "Der Ablauf …") */
    font-size: clamp(2rem, 4vw, 3rem);
}
#ea-s6-partner .feature-block__points,
#ea-s6-partner .feature-block__points p,
#ea-s6-partner .feature-block__points li,
#ea-s6-partner .feature-block__points strong { color: rgba(255, 255, 255, 0.85); }

/* s6 ablauf (process-steps) — heading + tab rail readable on navy;
   the active number circle would be navy-on-navy, so make it yellow. */
#ea-s6-ablauf .process-heading { color: #ffffff; }
#ea-s6-ablauf .process-tab__label { color: rgba(255, 255, 255, 0.72); }
#ea-s6-ablauf .process-tab.is-active .process-tab__num {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary);
}
#ea-s6-ablauf .process-tab.is-active .process-tab__label { color: #ffffff; }
#ea-s6-ablauf .process-tab:hover:not(.is-active) .process-tab__num {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* s7 FAQ — readable on navy */
#ea-s7-faq .faq-block__heading { color: #ffffff; }
#ea-s7-faq .faq-list { border-top-color: rgba(255, 255, 255, 0.18); }
#ea-s7-faq .faq-item { border-bottom-color: rgba(255, 255, 255, 0.18); }
#ea-s7-faq .faq-item__question { color: #ffffff; }
#ea-s7-faq .faq-item__answer p { color: rgba(255, 255, 255, 0.78); }
#ea-s7-faq .faq-item__icon { color: var(--color-accent); }
#ea-s7-faq .faq-item__trigger:hover .faq-item__question,
#ea-s7-faq .faq-item.is-open .faq-item__question { color: var(--color-accent); }

/* Ladeinfrastruktur — navy bands for the "Bedarf, Planung…" intro and the FAQ.
   Section backgrounds + readable light text, scoped to these two blocks. */
#li-s4-intro {
    background: var(--color-primary);
}
#li-s4-intro .text-cta__heading { color: #ffffff; }
#li-s4-intro .text-cta__body { color: rgba(255, 255, 255, 0.85); }

#li-s7-faq {
    background: var(--color-primary);
}
#li-s7-faq .faq-block__heading { color: #ffffff; }
#li-s7-faq .faq-list { border-top-color: rgba(255, 255, 255, 0.18); }
#li-s7-faq .faq-item { border-bottom-color: rgba(255, 255, 255, 0.18); }
#li-s7-faq .faq-item__question { color: #ffffff; }
#li-s7-faq .faq-item__answer p { color: rgba(255, 255, 255, 0.78); }
#li-s7-faq .faq-item__icon { color: var(--color-accent); }
#li-s7-faq .faq-item__trigger:hover .faq-item__question,
#li-s7-faq .faq-item.is-open .faq-item__question { color: var(--color-accent); }

/* Ladeinfrastruktur — continuous navy band from the "Bedarf, Planung…" intro
   through the "ohne Eigeninvestition" intro (li-s4-intro is set navy above).
   White cards (badges) keep their own light bg; the gold checkmark circles and
   the gold button stay legible on navy, so only text colours change here. */
#li-s4-leistung,
#li-s4-wallbox,
#li-s4-ladesaeule,
#li-s5-intro {
    background: var(--color-primary);
}
/* Blend the 1px divider that sits between the two navy split blocks. */
#li-s4-ladesaeule + .block-divider {
    background: var(--color-primary);
}

/* Headings + subheadings → white */
#li-s4-leistung .split-block__heading,
#li-s4-leistung .split-block__subheading,
#li-s4-ladesaeule .split-block__heading,
#li-s4-ladesaeule .split-block__subheading,
#li-s4-wallbox .feature-block__heading,
#li-s4-wallbox .feature-block__subheading,
#li-s5-intro .text-cta__heading {
    color: #ffffff;
}

/* Body / points / markdown lists → muted light */
#li-s4-leistung .split-block__text,
#li-s4-leistung .split-block__points,
#li-s4-leistung .split-block__points p,
#li-s4-leistung .split-block__points li,
#li-s4-leistung .split-block__points strong,
#li-s4-ladesaeule .split-block__text,
#li-s4-ladesaeule .split-block__points,
#li-s4-ladesaeule .split-block__points p,
#li-s4-ladesaeule .split-block__points li,
#li-s4-ladesaeule .split-block__points strong,
#li-s4-wallbox .feature-block__text,
#li-s4-wallbox .feature-block__points,
#li-s4-wallbox .feature-block__points p,
#li-s4-wallbox .feature-block__points li,
#li-s4-wallbox .feature-block__points strong,
#li-s5-intro .text-cta__body {
    color: rgba(255, 255, 255, 0.85);
}

/* ════════════════════════════════════════════════
   SUBPAGE SECTION TONES — Großbatteriespeicher
   Alternating gray / blue by logical section (gb-sN- ids).
   nth-of-type counts only <section> (dividers are <hr>):
     3            s2 Warum grid   → BLUE
     4,5,6        s3              → gray
     7,8,9        s4              → BLUE
     10,11,12,13  s4b             → gray
     14,15,16     s5              → BLUE
     17,18        s6              → gray
     19,20,21,22  s7              → BLUE
     23           s8 faq          → gray
   hero (1–2) and kontakt (24) untouched.
════════════════════════════════════════════════ */
/* Navy ("blue") sections by block id — robust to block add/remove/reorder.
   Every block defaults to gray, so only the navy sections are listed. */
#gb-s2-warum,
#gb-s4-intro,
#gb-s4-colocation,
#gb-s4-standalone,
#gb-s5-intro,
#gb-s5-schritte,
#gb-s5-chart,
#gb-s7-intro,
#gb-s7-phasen,
#gb-s7-testimonial {
    background: var(--color-primary);
}

/* White headings on blue */
#gb-s2-warum .svc-grid__heading,
#gb-s2-warum .svc-grid__subheading,
#gb-s4-intro .text-cta__heading,
#gb-s5-intro .text-cta__heading,
#gb-s7-intro .text-cta__heading,
#gb-s4-colocation .split-block__heading,
#gb-s4-colocation .split-block__subheading,
#gb-s4-standalone .feature-block__heading,
#gb-s4-standalone .feature-block__subheading,
#gb-s7-testimonial .feature-block__heading,
#gb-s7-testimonial .feature-block__subheading,
#gb-s5-chart .chart-split__heading,
#gb-s5-schritte .process-heading,
#gb-s7-phasen .process-heading {
    color: #ffffff;
}

/* Muted-light body text on blue (covers <p> and markdown <li> lists) */
#gb-s4-intro .text-cta__body,
#gb-s5-intro .text-cta__body,
#gb-s7-intro .text-cta__body,
#gb-s4-colocation .split-block__points,
#gb-s4-colocation .split-block__points p,
#gb-s4-colocation .split-block__points li,
#gb-s4-standalone .feature-block__points,
#gb-s4-standalone .feature-block__points p,
#gb-s4-standalone .feature-block__points li,
#gb-s7-testimonial .feature-block__points,
#gb-s7-testimonial .feature-block__points p,
#gb-s7-testimonial .feature-block__points li,
#gb-s5-chart .chart-split__source,
#gb-s5-chart .chart-split__para,
#gb-s5-schritte .process-tab__label,
#gb-s7-phasen .process-tab__label {
    color: rgba(255, 255, 255, 0.85);
}

/* Process-steps tabs on blue — active circle yellow so it doesn't blend */
#gb-s5-schritte .process-tab.is-active .process-tab__num,
#gb-s7-phasen .process-tab.is-active .process-tab__num {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary);
}
#gb-s5-schritte .process-tab.is-active .process-tab__label,
#gb-s7-phasen .process-tab.is-active .process-tab__label {
    color: #ffffff;
}
#gb-s5-schritte .process-tab:hover:not(.is-active) .process-tab__num,
#gb-s7-phasen .process-tab:hover:not(.is-active) .process-tab__num {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* Fraunhofer chart is a transparent PNG with dark text — put it on a
   white card so it stays readable on the navy section. */
#gb-s5-chart .chart-split__img {
    background: #ffffff;
    padding: 20px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
}

/* ════════════════════════════════════════════════
   SUBPAGE SECTION TONES — Dienstleistungen
   First content section (intro split_block) starts GRAY, then a simple
   gray ↔ blue alternation runs to the kontakt block (hero + kontakt excluded).
   nth-of-type counts only <section> (dividers are <hr>):
     2  split_block (intro) → gray
     3  services_grid       → BLUE
     4  text_cta            → gray
     5  split_block         → BLUE
     6  text_cta            → gray
     7  energy-chain        → BLUE
     8  reverse_split       → gray
     9  text_cta            → BLUE
    10  split_block         → gray
    11  reverse_split       → BLUE
    12  text_cta            → gray
    13  process-steps       → BLUE
    14  faq                 → gray
   Brand tones: gray #DCDCDE (--color-bg-neutral), blue #1A3240 (--color-primary).
════════════════════════════════════════════════ */
.page-dienstleistungen > section:nth-of-type(2),
.page-dienstleistungen > section:nth-of-type(4),
.page-dienstleistungen > section:nth-of-type(6),
.page-dienstleistungen > section:nth-of-type(8),
.page-dienstleistungen > section:nth-of-type(10),
.page-dienstleistungen > section:nth-of-type(12),
.page-dienstleistungen > section:nth-of-type(14) {
    background: var(--color-bg-neutral);
}
.page-dienstleistungen > section:nth-of-type(3),
.page-dienstleistungen > section:nth-of-type(5),
.page-dienstleistungen > section:nth-of-type(7),
.page-dienstleistungen > section:nth-of-type(9),
.page-dienstleistungen > section:nth-of-type(11),
.page-dienstleistungen > section:nth-of-type(13) {
    background: var(--color-primary);
}

/* Blue sections (3,5,7,9,11,13) — white headings; cards keep their own light bg */
.page-dienstleistungen > section:nth-of-type(3) .services-section__heading,
.page-dienstleistungen > section:nth-of-type(5) .split-block__heading,
.page-dienstleistungen > section:nth-of-type(5) .split-block__subheading,
.page-dienstleistungen > section:nth-of-type(9) .text-cta__heading,
.page-dienstleistungen > section:nth-of-type(11) .feature-block__heading,
.page-dienstleistungen > section:nth-of-type(11) .feature-block__subheading,
.page-dienstleistungen > section:nth-of-type(13) .process-heading {
    color: #ffffff;
}

/* Muted-light secondary/body text on blue (covers <p> and markdown <li> lists) */
.page-dienstleistungen > section:nth-of-type(3) .services-section__eyebrow,
.page-dienstleistungen > section:nth-of-type(5) .split-block__text,
.page-dienstleistungen > section:nth-of-type(5) .split-block__points,
.page-dienstleistungen > section:nth-of-type(5) .split-block__points p,
.page-dienstleistungen > section:nth-of-type(5) .split-block__points li,
.page-dienstleistungen > section:nth-of-type(5) .split-block__points strong,
.page-dienstleistungen > section:nth-of-type(7) .energy-step__body p,
.page-dienstleistungen > section:nth-of-type(9) .text-cta__body,
.page-dienstleistungen > section:nth-of-type(11) .feature-block__text,
.page-dienstleistungen > section:nth-of-type(11) .feature-block__points,
.page-dienstleistungen > section:nth-of-type(11) .feature-block__points p,
.page-dienstleistungen > section:nth-of-type(11) .feature-block__points li,
.page-dienstleistungen > section:nth-of-type(13) .process-tab__label {
    color: rgba(255, 255, 255, 0.85);
}

/* energy-chain rail (7) — step titles white; result node yellow so it doesn't blend */
.page-dienstleistungen > section:nth-of-type(7) .energy-step__body h3 { color: #ffffff; }
.page-dienstleistungen > section:nth-of-type(7) .energy-step__node--result {
    background: var(--color-accent);
    border-color: var(--color-accent);
}
.page-dienstleistungen > section:nth-of-type(7) .energy-step__check { color: var(--color-primary); }

/* Ladeinfrastruktur "vier Schritte" (gray bg) — active circle + ghost number
   yellow instead of navy. Label stays navy since the section is on gray. */
#li-s6-ablauf {
    --process-active: var(--color-accent);
}
#li-s6-ablauf .process-tab.is-active .process-tab__num {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary);
}
#li-s6-ablauf .process-tab:hover:not(.is-active) .process-tab__num {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* process-steps tabs on blue (13) — active circle yellow so it doesn't blend */
.page-dienstleistungen > section:nth-of-type(13) .process-tab.is-active .process-tab__num {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary);
}
.page-dienstleistungen > section:nth-of-type(13) .process-tab.is-active .process-tab__label { color: #ffffff; }
.page-dienstleistungen > section:nth-of-type(13) .process-tab:hover:not(.is-active) .process-tab__num {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ════════════════════════════════════════════════
   SUBPAGE SECTION TONES — Freiflächen
   gray ↔ blue alternation starting GRAY at the first content section.
   nth-of-type counts only <section> (dividers are <hr>):
     2  split_block (intro)   → gray
     3  4-col grid (Warum)    → BLUE
     4  text_cta (3 Wege)     → gray
     5  grundlagen (Modelle)  → BLUE
     6  text_cta (Speicher)   → gray
     7  grundlagen (Speicher) → BLUE
     8  reverse_split (S5)    → gray
     9  process-steps (S6)    → BLUE
    10  faq                   → gray
   hero (1) and kontakt (11) untouched.
════════════════════════════════════════════════ */
.page-freiflaechen > section:nth-of-type(2),
.page-freiflaechen > section:nth-of-type(4),
.page-freiflaechen > section:nth-of-type(6),
.page-freiflaechen > section:nth-of-type(8),
.page-freiflaechen > section:nth-of-type(10) {
    background: var(--color-bg-neutral);
}
.page-freiflaechen > section:nth-of-type(3),
.page-freiflaechen > section:nth-of-type(5),
.page-freiflaechen > section:nth-of-type(7),
.page-freiflaechen > section:nth-of-type(9) {
    background: var(--color-primary);
}

/* White headings on the blue sections (white cards keep their dark text) */
.page-freiflaechen > section:nth-of-type(3) .svc-grid__heading,
.page-freiflaechen > section:nth-of-type(5) .grundlagen-title,
.page-freiflaechen > section:nth-of-type(7) .grundlagen-title,
.page-freiflaechen > section:nth-of-type(9) .process-heading {
    color: #ffffff;
}
.page-freiflaechen > section:nth-of-type(3) .svc-grid__subheading {
    color: rgba(255, 255, 255, 0.85);
}

/* process-steps tabs on blue (9) — active circle yellow so it doesn't blend */
.page-freiflaechen > section:nth-of-type(9) .process-tab__label {
    color: rgba(255, 255, 255, 0.72);
}
.page-freiflaechen > section:nth-of-type(9) .process-tab.is-active .process-tab__num {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary);
}
.page-freiflaechen > section:nth-of-type(9) .process-tab.is-active .process-tab__label {
    color: #ffffff;
}
.page-freiflaechen > section:nth-of-type(9) .process-tab:hover:not(.is-active) .process-tab__num {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ════════════════════════════════════════════════
   Gesundheitswesen — varied text reveal on scroll (.gh-anim)
   JS adds data-gh="up|left|right|zoom" + .gh-in when in view
════════════════════════════════════════════════ */
/* The left/right reveals below translate elements ±54px sideways until they
   scroll into view. On narrower viewports those not-yet-revealed sections stick
   out past the viewport and create horizontal page scroll. Clip the wrapper so
   the off-canvas offset never adds page-level horizontal overflow. `clip` (not
   `hidden`) avoids creating a scroll container, so sticky/anchored elements are
   unaffected. */
.gh-anim {
    overflow-x: clip;
}
.gh-anim [data-gh] {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.85s cubic-bezier(.2, .7, .2, 1);
    will-change: opacity, transform;
}
.gh-anim [data-gh="up"]    { transform: translateY(46px); }
.gh-anim [data-gh="left"]  { transform: translateX(-54px); }
.gh-anim [data-gh="right"] { transform: translateX(54px); }
.gh-anim [data-gh="zoom"]  { transform: scale(0.93); }

.gh-anim [data-gh].gh-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .gh-anim [data-gh] {
        opacity: 1 !important;
        transform: none !important;
        transition: none;
    }
}

/* Gesundheitswesen "Die gute Nachricht" — left-aligned, smaller (not a centered header) */
#gh-s4-good .text-cta__inner {
    max-width: 1160px;
    align-items: flex-start;
    text-align: left;
}
#gh-s4-good .text-cta__heading {
    font-size: 1.35rem;
    font-weight: 700;
}
#gh-s4-good .text-cta__body {
    font-size: 0.95rem;
}

/* Tighten the problem-section group (intro → cards → "Die gute Nachricht") */
#gh-s4-intro {
    padding-bottom: var(--space-md);
}
#gh-s4 {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
}
#gh-s4-good {
    padding-top: var(--space-sm);
}

/* Tighten the EaaS group (intro → "Der Vier-Schritt-Prozess") so it reads as one section */
#gh-s5-intro {
    padding-bottom: var(--space-sm);
}
#gh-s5-prozess {
    padding-top: var(--space-md);
}

/* 07 Wirtschaftlichkeit: Schnellrechner is a sub-block, not a peer section */
#gh-s7-intro {
    padding-bottom: var(--space-sm);
}
#gh-s7-cta {
    padding-top: var(--space-md);
}
#gh-s7-cta .text-cta__heading {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
}
#gh-s7-cta .text-cta__body {
    font-size: 0.95rem;
}

/* Gesundheitswesen — alternating section backgrounds (white / gray) for clear separation.
   Each block of a section gets the same background so the section reads as one band. */
#gh-s2 { background: var(--color-primary); }                                              /* 02 dark blue */
#gh-s2 .text-cta__heading { color: #ffffff; }
#gh-s2 .text-cta__body { color: rgba(255, 255, 255, 0.82); }
#gh-s3 { background: var(--color-bg-neutral); }                                           /* 03 gray  */

/* ── gh-s3 "Warum Marktführer…": two-column editorial with row dividers ─────────
   Number + title + text always visible; a full-width hairline separates rows.
   column-gap is 0 so the two cards' bottom borders meet into one continuous line;
   the columns are spaced apart with inner padding instead. Scoped to this block. */
#gh-s3 .grundlagen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    column-gap: 0;
    max-width: 1100px;
    margin: 0 auto;
}
#gh-s3 .grundlagen-card {
    grid-column: auto;                 /* cancel the grundlagen-grid--5 placement */
    min-width: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-md);
    align-items: start;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    padding: var(--space-lg) 0;
    border-bottom: 1px solid rgba(24, 53, 71, 0.16);
    transform: none;
}
#gh-s3 .grundlagen-card:nth-child(odd)  { padding-right: var(--space-lg); }
#gh-s3 .grundlagen-card:nth-child(even) { padding-left: var(--space-lg); }
#gh-s3 .grundlagen-card:last-child { border-bottom: none; }
#gh-s3 .grundlagen-card h3,
#gh-s3 .grundlagen-card .card-text { min-width: 0; overflow-wrap: break-word; }
/* remove the navy hover-fill wave + lift */
#gh-s3 .grundlagen-card::before { display: none; }
#gh-s3 .grundlagen-card:hover { transform: none; box-shadow: none; }
/* number → navy, spanning title + text, top-aligned */
#gh-s3 .grundlagen-card__badge {
    position: static;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
    margin: 0;
    transform-origin: left center;
    transition: transform 0.3s ease;
}
/* hovering the item (number or text) grows the number a touch */
#gh-s3 .grundlagen-card:hover .grundlagen-card__badge {
    color: var(--color-primary);
    transform: scale(1.15);
}
#gh-s3 .grundlagen-card h3 {
    grid-column: 2;
    grid-row: 1;
    color: var(--color-primary);
    margin-bottom: 8px;
}
#gh-s3 .grundlagen-card:hover h3 { color: var(--color-primary); }
#gh-s3 .grundlagen-card .card-text {
    grid-column: 2;
    grid-row: 2;
}
#gh-s3 .grundlagen-card:hover .card-text,
#gh-s3 .grundlagen-card:hover .card-text strong,
#gh-s3 .grundlagen-card:hover .card-text li { color: var(--color-neutral-500); }
#gh-s3 .grundlagen-card:hover .card-text strong { color: var(--color-primary); }

@media (max-width: 768px) {
    #gh-s3 .grundlagen-grid { grid-template-columns: 1fr; }
    #gh-s3 .grundlagen-card:nth-child(odd),
    #gh-s3 .grundlagen-card:nth-child(even) { padding-left: 0; padding-right: 0; }
}
@media (max-width: 560px) {
    #gh-s3 .grundlagen-card__badge { font-size: 2rem; }
}
#gh-s4-intro, #gh-s4, #gh-s4-good { background: var(--color-primary); }                   /* 04 dark blue */
#gh-s4-intro .text-cta__heading, #gh-s4-good .text-cta__heading { color: #ffffff; }
#gh-s4-intro .text-cta__body, #gh-s4-good .text-cta__body { color: rgba(255, 255, 255, 0.82); }
#gh-s5-intro, #gh-s5-prozess, #gh-s5-vergleich { background: var(--color-bg-neutral); }   /* 05 gray  */
/* Remove the transparent section-border gap between the process-steps and the
   comparison table so no white body-background strip shows between them, and
   tighten the vertical gap between the two. */
#gh-s5-prozess { border-bottom: 0; padding-bottom: var(--space-xl); }
#gh-s5-vergleich { border-top: 0; padding-top: 0; }
#gh-s6 { background: var(--color-primary); }                                              /* 06 dark blue */
#gh-s6 .text-cta__heading { color: #ffffff; }
#gh-s6 .text-cta__body { color: rgba(255, 255, 255, 0.82); }
#gh-s7-intro, #gh-s7-cta { background: var(--color-bg-neutral); }                         /* 07 gray  */
#gh-s8-intro, #gh-s8-stimmen { background: var(--color-primary); }                        /* 08 dark blue */
#gh-s8-intro .text-cta__heading { color: #ffffff; }
#gh-s8-intro .text-cta__body { color: rgba(255, 255, 255, 0.82); }
#gh-s8-stimmen .section-title { color: #ffffff; }
#gh-s8-stimmen .section-subtitle { color: rgba(255, 255, 255, 0.8); }
/* Glass testimonial cards on the dark section */
#gh-s8-stimmen .testimonial-card {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
#gh-s8-stimmen .testimonial-name { color: #ffffff; }
#gh-s8-stimmen .testimonial-body span { color: rgba(255, 255, 255, 0.72); }
#gh-s8-stimmen .testimonial-quote { color: rgba(255, 255, 255, 0.85); }
#gh-s9-intro, #gh-s9-digital { background: var(--color-bg-neutral); }                     /* 09 gray  */
#gh-s10-faq { background: var(--color-primary); }                                         /* 10 dark blue */
#gh-s10-faq .faq-block__eyebrow { color: rgba(255, 255, 255, 0.65); }
#gh-s10-faq .faq-block__heading { color: #ffffff; }
#gh-s10-faq .faq-list { border-top-color: rgba(255, 255, 255, 0.18); }
#gh-s10-faq .faq-item { border-bottom-color: rgba(255, 255, 255, 0.18); }
#gh-s10-faq .faq-item__question { color: #ffffff; }
#gh-s10-faq .faq-item__answer p { color: rgba(255, 255, 255, 0.78); }
#gh-s10-faq .faq-item__icon { color: var(--color-accent); }
#gh-s10-faq .faq-item__trigger:hover .faq-item__question,
#gh-s10-faq .faq-item.is-open .faq-item__question { color: var(--color-accent); }
#gh-s11 { background: var(--color-bg-neutral); }                                          /* 11 gray  */

/* 08: tighten the gap between the intro and the testimonial cards */
#gh-s8-intro { padding-bottom: var(--space-md); }
#gh-s8-stimmen { padding-top: var(--space-md); }

/* 09: tighten the gap between the intro and the "Warum …" feature block */
#gh-s9-intro { padding-bottom: var(--space-md); }
#gh-s9-digital { padding-top: var(--space-md); }

/* ════════════════════════════════════════════════
   GLOBAL BODY-COPY SIZE — one place to tune the main paragraph text size
   across every section. Lists section body-copy selectors only (not buttons,
   labels, eyebrows or headings). The compact homepage cards
   (.area-card-content p, .solution-desc) are intentionally excluded so their
   tuned heights stay tight. Placed last so it wins on equal specificity.
   ════════════════════════════════════════════════ */
.hero-description,
.healthcare-text,
.about-text,
.about-triple-text p,
.testimonial-quote,
.phase-desc,
.feature-card-content p,
.eaas-card-desc,
.eaas-hero__body,
.process-step-desc,
.process-panel__body,
.process-panel__text,
.benefit-text,
.section-intro__body,
.section-why__p,
.chart-split__para,
.chart-split__body,
.solanox-supply-text,
.cta-card-text,
.text-cta__body,
.dgs-banner__text,
.vision-section__quote,
.card-text {
    font-size: var(--text-body); /* unified body-copy size (--text-body, 18px) */
}