/* Self-hosted Titillium Web — replaces the Google Fonts request (perf: no
   render-blocking third-party round-trip; GDPR: no visitor IPs sent to Google).
   These are the exact files Google served; the latin subset covers all German
   glyphs (umlauts, ß, „" quotes, – —). font-display:swap keeps text visible. */
@font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/titillium-web-300.woff2') format('woff2'); }
@font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/titillium-web-400.woff2') format('woff2'); }
@font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/titillium-web-600.woff2') format('woff2'); }
@font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/titillium-web-700.woff2') format('woff2'); }
@font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/titillium-web-900.woff2') format('woff2'); }
@font-face { font-family: 'Titillium Fallback'; font-style: normal; font-weight: 400; src: local('Arial'); size-adjust: 94.38%; ascent-override: 120.05%; descent-override: 41.11%; line-gap-override: 0%; }
@font-face { font-family: 'Titillium Fallback'; font-style: normal; font-weight: 600; src: local('Arial'); size-adjust: 88.94%; ascent-override: 127.39%; descent-override: 43.62%; line-gap-override: 0%; }

  :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', 'Titillium Fallback', sans-serif;
  --font-body:    'Titillium Web', 'Titillium Fallback', 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;

  /* Metrics for the white info badge that overlays the section photos. cqw =
     percent of the *photo's* width (the media frames are query containers), so
     the badge stays the same fraction of the image at every viewport width.
     With fixed rem values a ~245px badge sat on a ~310px photo at tablet
     widths and covered it almost completely.
     The multipliers are set so every value hits its max at a ~470px-wide photo
     — i.e. the full-size badge is unchanged on laptops and desktops, and only
     genuinely small photos (tablet two-column, phones) scale down. The clamp
     floors keep the label and title readable at the small end. */
  --badge-max:     min(440px, 78cqw);
  --badge-pad-y:   clamp(0.6rem, 3.4cqw, 1rem);
  --badge-pad-x:   clamp(0.85rem, 6.8cqw, 2rem);
  --badge-inset:   max(-1.5rem, -5.1cqw); /* overhang past the photo edge */
  --badge-label:   clamp(0.55rem, 2.2cqw, 0.65rem);
  --badge-title:   clamp(0.85rem, 4.1cqw, 1.2rem);

  /* 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; }

    /* Shape of every two-column section photo (split block, feature block,
       "Warum", Beratung). These images sit in a fluid-width column, so the old
       fixed 420px height made the crop depend on the viewport: the box stayed
       420px tall while the column narrowed, turning landscape photos into a
       portrait letterbox that cut off the sides (logo, building edges) on
       laptops while still looking right on a wide monitor.

       A ratio scales the box with the column instead, so the crop no longer
       changes with width. The ratio used is the image's *own* --img-ratio,
       written onto every <img> by site/snippets/img.php — so 3:2 photos, 4:3
       photos, 16:9 photos and wide diagrams are each shown in their own shape
       and nothing is cropped. The band only catches extreme sources, so no
       section turns absurdly tall: 1.25 floor. The 2.5 ceiling is generous on
       purpose — the widest thing in the library is a 2.44 technical diagram,
       and cropping a diagram cuts its labels off. 1.5 if unknown (SVG).

       Declared on the images themselves, not on :root: var() inside a custom
       property is resolved where that property is *declared*, so a :root
       definition would never see the per-image --img-ratio. */
    .split-block__img,
    .feature-block__img,
    .consulting-media__img,
    .section-why__img {
      --media-ratio: clamp(1.25, var(--img-ratio, 1.5), 2.5);
    }
    /* Global heading rule = single source of truth. Long German compounds
       (e.g. "Lastspitzenmanagement") break inside their box via hyphens:auto,
       which uses the page's lang="de" for correct syllable breaks. text-wrap:
       balance evens line lengths so no single word/letter dangles. No
       overflow-wrap by design; per-heading overrides were removed. */
    h1, h2, h3, h4, h5, h6 { hyphens: auto; text-wrap: balance; }
    /* 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%;
    }

    .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;
        /* Header element widths, used to center the menu in the free band BETWEEN
           the logo and the Kontakt button (not across the whole header). Measured
           at the desktop sizes: logo-img renders 149px wide (84px tall, 16:9), the
           "Kontakt" pill is ~101px. --nav-side-gap is the breathing space kept on
           each side of the centered menu. */
        --logo-w: 164px;
        --cta-w: 101px;
        --nav-side-gap: 24px;
    }
    .logo {
        display: flex; align-items: center; position: relative; z-index: 1001;
        /* Align the logo's left edge with the subpage hero *title text* — not the yellow
           accent bar. The bar (`.ref-hero-badge::before`) sits at left: 6vw; the title text
           starts 24px further right (the badge's `padding-left: 24px`). So we push the logo
           to 6vw + 24px. The logo otherwise starts at the container's inner edge
           (max(0, (100vw - 1360px)/2) + var(--space-md)); this pulls it onto that line. */
        margin-left: calc(6vw + 24px - max(0px, (100vw - 1360px) / 2) - var(--space-md));
    }
    .logo-img { height: 84px; width: auto; }

    .nav-menu {
        position: absolute;
        /* Center the menu in the band BETWEEN the logo and the Kontakt button
           rather than across the full header. The left edge sits at the logo's
           right edge (logo left = 6vw + 24px, plus --logo-w), the right edge at
           the button's left edge (button right = the 6vw line, minus --cta-w),
           each pulled in by --nav-side-gap. justify-content:center then centers
           the items in that (right-of-viewport-centre) band. */
        left: calc(6vw + 24px + var(--logo-w) + var(--nav-side-gap) - max(0px, (100vw - 1360px) / 2) - var(--space-md));
        right: calc(6vw + var(--cta-w) + var(--nav-side-gap) - max(0px, (100vw - 1360px) / 2) - var(--space-md));
        display: flex;
        align-items: center;
        justify-content: center;
        /* Extra breathing room between the top-level items, but only where there's
           space: stays small at the tightest desktop width (~1361px, just above the
           hamburger breakpoint) and grows on wider screens — no overflow. */
        gap: clamp(0px, calc(1vw - 9px), 0.85rem);
    }

    /* Kontakt (CTA) stays pinned to the right, on the 6vw line — the mirror of the
       logo's left edge, so the two bookend the header. It's positioned relative to
       .nav-menu, whose right edge now sits at the button's left edge (band right).
       So push it back out by its own width + the side gap to land on the 6vw line. */
    .nav-menu > li:last-child {
        position: absolute;
        right: calc(-1 * (var(--cta-w) + var(--nav-side-gap)));
    }

    .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.6rem;
        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.6rem;
        right: 0.6rem;
        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,
    .nav-menu > li.is-active > a:not(.nav-cta)::after {
        transform: scaleX(1);
    }
    /* Current page: keep the item bright like on hover (set server-side in header.php) */
    .nav-menu > li.is-active > a { color: var(--color-neutral); }

    /* 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;
    }

    /* Mid-range: keep the horizontal bar, but drop from 18px to 16px so the menu
       stays on one line between the hamburger breakpoint (1260px) and ~1360px,
       where 18px would otherwise start to wrap in the logo↔button band. */
    @media (min-width: 1261px) and (max-width: 1360px) {
        .nav-menu > li > a { font-size: 1rem; }
    }

/* ========================================
   Mobile Navigation Menu
   Breakpoint is 1260px (not the usual 992px): the logo aligns to the subpage
   hero *title text* (6vw + 24px) and the menu is centered in the band between
   the logo and the Kontakt button. The bar shrinks in two steps to stay on one
   line as long as possible — 18px above 1360px, then 16px from 1261–1360px (see
   the min-width:1261px rule below). At 16px the band still holds a single line
   down to ~1250px; below that the labels would wrap, so ≤1260px we fall back to
   the hamburger drawer instead.
======================================== */
@media (max-width: 1260px) {
    /* 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: 1rem; /* 16px drawer links — consistent across tablet + phone (≤1360px) */
        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; }
    /* …so mark the current page's item in yellow instead */
    .nav-menu > li.is-active > a:not(.nav-cta) { color: var(--color-accent); }

    /* 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 */
    }

    /* Short desktop viewports (laptops, browser zoom): the hero is vh-based with
       centered text, but the card row (.solutions-grid) overlaps its bottom by a
       fixed 253px — so the description slid behind the cards. Reserve room for
       the overlap + a gap. (<=1024px the overlap is only 80px, no issue.) */
    @media (min-width: 1025px) and (max-height: 900px) {
        .hero { padding-bottom: 200px; }
    }

    .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;
}

/* 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;
    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: default; /* Not a link – hover effect only */
    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 is a column flex container (see above), so it keeps the base
       align-items:center and both the map and the caption stay centred.
       This block used to set grid-template-columns/grid-column/grid-row plus
       align-items:start — the grid properties were inert on a flex container,
       while align-items:start quietly left-aligned the map and the caption. */
    .about-triple {
        gap: var(--space-lg);
    }

    .about-triple-text {
        text-align: center;
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    .about-triple-map {
        max-width: 260px;
        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: repeat(4, max-content); justify-content: space-between; gap: var(--space-xl); padding-bottom: var(--space-md); border-bottom: 1px solid rgba(255,255,255,0.08); }
    .footer-intro { max-width: 360px; }
    .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; }
    .footer-contact-item--address { align-items: flex-start; margin-bottom: var(--space-md); }
    .footer-contact-item--address svg { margin-top: 2px; }
    .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: three tidy bands — CTA (full) · Unternehmen+Kontakt (2-col) · Social (full, inline) */
        .footer { padding-top: var(--space-xl); }
        .footer-main { grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-md); }
        .footer-intro { grid-column: 1 / -1; }
        .footer-intro h2 { font-size: 1.25rem; }
        .footer-intro p { margin-bottom: var(--space-sm); }
        /* Social block spans full width; icons only, no text labels */
        .footer-column:last-child { grid-column: 1 / -1; }
        .footer-column:last-child .footer-social-intro { display: none; }
        .footer-column:last-child .footer-contact-item {
            position: relative;
            display: inline-flex; align-items: center; justify-content: center;
            width: 44px; height: 44px;
            margin: 0 var(--space-sm) 0 0;
        }
        .footer-column:last-child .footer-contact-item svg { width: 24px; height: 24px; }
        .footer-column:last-child .footer-contact-item a {
            position: absolute; inset: 0;   /* whole icon is the tap target */
            font-size: 0;                   /* hide label visually, keep for screen readers */
        }

        .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;
    margin-bottom: var(--space-lg);
    text-align: center;
    width: 100%;
}

/* Small phones (<=425px): the hero title at 40px forces long compounds like
   "Generalunternehmer"/"Energielösungen" to hyphenate. Shrink it fluidly so the
   longest word fits its line without a hyphen at every width down to 320px.
   Must sit AFTER the base .hero-title above to win the cascade — the older
   max-width:768px rule is earlier in the file and gets overridden. */
@media (max-width: 425px) {
    .hero-title { font-size: clamp(1.6rem, 8.5vw, 2.5rem); }
}

.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;
}

/* --- YouTube facade (click-to-load; keeps YouTube JS/cookies off initial load) --- */
.vf-facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
    display: block;
    background: #0b1a24;
    z-index: 2;
}
.vf-facade__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vf-facade__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background-color: #E53E3E;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 15px rgba(229, 62, 62, 0.4);
    transition: all 0.3s ease;
}
.vf-facade__play svg { margin-left: 3px; }
.vf-facade:hover .vf-facade__play {
    background-color: #C53030;
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(229, 62, 62, 0.6);
}

/* --- 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);
    hyphens: auto;
}

/* 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);
}

.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;
  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: auto;
      aspect-ratio: var(--media-ratio);
      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); }

  .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;

  }

  /* Query container — see .split-block__media-frame. */
  .consulting-media {
    position: relative;
    container-type: inline-size;
  }
  .consulting-media__img {
    width: 100%;
    height: auto;
    aspect-ratio: var(--media-ratio);
    object-fit: cover;
    border-radius: var(--radius-xl);
    display: block;
    box-shadow: var(--shadow-xl);
  }
  .consulting-media__badge {
    position: absolute;
    bottom: var(--badge-inset);
    left: var(--badge-inset);
    background: var(--color-neutral);
    border-radius: var(--radius-lg);
    padding: var(--badge-pad-y) var(--badge-pad-x);
    box-shadow: var(--shadow-lg);
    max-width: min(220px, 78cqw);
  }
  .consulting-media__badge-label {
    font-size: var(--badge-label);
    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: var(--badge-title);
    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);
}

/* Manual heading break: only active on the two-column layout (>1024px) so the
   second clause drops to its own line instead of running above the image.
   Stacked (≤1024px) the break is removed and the text reflows. */
.split-block__brk { display: none; }
@media (min-width: 1025px) {
  .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);
}

.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).
   Query container: lets the badge size itself in cqw against the photo width
   (see --badge-* in :root). Note this is layout+inline-size containment only,
   so the badge's negative overhang still paints outside the frame. */
.split-block__media-frame {
  position: relative;
  container-type: inline-size;
}

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

.split-block__badge {
  position: absolute;
  bottom: var(--badge-inset);
  left: var(--badge-inset);
  background: var(--color-neutral);
  border-radius: var(--radius-lg);
  padding: var(--badge-pad-y) var(--badge-pad-x);
  box-shadow: var(--shadow-lg);
  max-width: var(--badge-max);
}

.split-block__badge-label {
  font-size: var(--badge-label);
  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: var(--badge-title);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-primary);
  hyphens: auto;
}

/* 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;
  hyphens: none;
}

/* Responsive. Stacks at ≤1024px, not ≤768px: in the old 769–1024px band the
   two-column grid squeezed the media column down to ~264–367px, so the photo
   was a thumbnail and the info badge covered most of it. Stacked, the photo
   gets the full content width and reads properly. Desktop (>1024px) and phone
   layouts are unchanged. */
@media (max-width: 1024px) {
  .split-block__inner {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 768px) {
  /* The old phone-only overrides for the image box (4/3) and the badge
     (240px / 0.55rem / 0.9rem) are gone: --media-ratio and the --badge-*
     container-query metrics now produce those same proportions at every
     width, so there is one system instead of two. Only the label tracking
     still needs tightening at the small end. */
  .split-block__badge-label {
    letter-spacing: 0.08em;
    margin-bottom: 0.25rem;
  }

  /* 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 — at ≤1024px the block must keep its single-column stack, so this
   ID rule (higher specificity than the stacking rule) is scoped to min-width. */
@media (min-width: 1025px) {
  #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);
}

.feature-block__subheading {
  font-size: clamp(1.3rem, 2vw, 2rem);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

.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;
}

/* (The one-off "show the Über uns team photo at its natural ratio" override is
   gone — every section photo now gets its own ratio via --img-ratio, so the
   group shot is uncropped without a special case.) */

/* Ü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.
   Only in the two-column desktop layout (>1024px), where the image sits in a
   narrow column. Once the block stacks, the photo is full content width and
   the normal bottom-left badge is right; a symmetric overhang there would be a
   ~950px white bar and would push past the section padding. */
@media (min-width: 1025px) {
  [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).
   Query container — see .split-block__media-frame. */
.feature-block__media-frame {
  position: relative;
  container-type: inline-size;
}

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

.feature-block__badge {
  position: absolute;
  bottom: var(--badge-inset);
  right: var(--badge-inset); /* flipped to right since image is on the left */
  left: auto;
  background: var(--color-neutral);
  border-radius: var(--radius-lg);
  padding: var(--badge-pad-y) var(--badge-pad-x);
  box-shadow: var(--shadow-lg);
  max-width: var(--badge-max);
}

.feature-block__badge-label {
  font-size: var(--badge-label);
  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: var(--badge-title);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-primary);
  hyphens: auto;
}

/* Responsive. Stacks at ≤1024px — see the matching note on .split-block. */
@media (max-width: 1024px) {
  .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 */
}

@media (max-width: 768px) {
  /* The old phone-only image-box and badge overrides are gone — the
     --media-ratio box and the --badge-* container-query metrics reproduce
     them at every width (see split-block). */
  .feature-block__badge-label {
    letter-spacing: 0.08em;
    margin-bottom: 0.25rem;
  }
}

/* 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: var(--color-neutral);
    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: var(--color-neutral);
  }

  /* General intro text, shown above the job ad body */
  .job-card__intro:not(:last-child) { margin-bottom: var(--space-lg); }

  /* Free-form job ad body (writer field).
     The editor only picks structure — headings, lists, bold — and these rules
     give that structure the same look as the old fixed sections. */
  .job-card__body--rich > *:first-child { margin-top: 0; }
  .job-card__body--rich > *:last-child { margin-bottom: 0; }

  .job-card__body--rich p { margin-bottom: var(--space-sm); }

  .job-card__body--rich h3,
  .job-card__body--rich h4 {
    font-weight: 700;
    color: var(--color-btn);
    line-height: 1.35;
    margin: var(--space-lg) 0 var(--space-sm);
  }

  .job-card__body--rich h3 { font-size: 1.25rem; }
  .job-card__body--rich h4 { font-size: 1.05rem; }

  .job-card__body--rich ul,
  .job-card__body--rich ol {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0;
    margin: 0 0 var(--space-sm);
  }

  .job-card__body--rich li {
    font-size: var(--text-body);
    line-height: 1.7;
    padding-left: 1.3rem;
    position: relative;
  }

  /* The writer wraps every list item's text in its own <p>. Without this the
     paragraph margin above would add a gap inside each bullet. */
  .job-card__body--rich li > p { margin: 0; }
  .job-card__body--rich li > p + p { margin-top: 0.4rem; }

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

  .job-card__body--rich ol { counter-reset: job-step; }
  .job-card__body--rich ol > li { counter-increment: job-step; }

  .job-card__body--rich ol > li::before {
    content: counter(job-step) '.';
    position: absolute;
    left: 0;
    color: var(--color-btn);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.9;
  }

  /* Nested lists keep their own indent and bullets */
  .job-card__body--rich li > ul,
  .job-card__body--rich li > ol {
    margin: 0.6rem 0 0;
    padding-left: 0.2rem;
  }

  .job-card__body--rich strong,
  .job-card__body--rich b {
    color: var(--color-neutral);
    font-weight: 700;
  }

  /* Editors usually mark a section heading bold as well. The heading is already
     yellow and bold, so bold inside it must not repaint the text. */
  .job-card__body--rich h3 strong,
  .job-card__body--rich h3 b,
  .job-card__body--rich h4 strong,
  .job-card__body--rich h4 b {
    color: inherit;
    font-weight: inherit;
  }

  .job-card__body--rich em,
  .job-card__body--rich i { font-style: italic; }

  .job-card__body--rich a {
    color: var(--color-btn);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .job-card__body--rich a:hover { color: var(--color-neutral); }

  /* 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: var(--color-neutral);
    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: var(--color-neutral);
    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: var(--color-neutral);
    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;
}

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

/* Body is rich text (kirbytext) — space its paragraphs, no trailing gap. */
.text-cta__body p { margin: 0 0 1rem; }
.text-cta__body p:last-child { margin-bottom: 0; }

/* Brand-gold inline highlight — kirbytag: (gold: text) */
.txt-gold { color: var(--color-accent); font-weight: 700; }

/* Linked variant — (gold: text link: /) */
.txt-gold--link { text-decoration: none; }

/* 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;
}

/* This intro sits on a dark, contrasting band. The global "pull closer to the next
   Baustein" rule trims only its bottom padding, leaving 4rem top vs 1.5rem bottom —
   so the content looks pushed down / off-centre. Restore symmetric padding here so
   it's vertically centred in the band (id beats the adjacency selector). */
#ds-s6-intro { padding-bottom: var(--space-2xl); }

/* 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;
    /* Full-bleed sections can end on a fractional pixel (e.g. height 801.297px),
       leaving a 1px gap to the next section where the white body shows as a
       hairline — glaring where a grey section meets a dark navy one. Overlap each
       section 1px into the next so the following section's background covers the
       seam. Purely cosmetic 1px; content is unaffected. */
    margin-bottom: -1px;
}
/* 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);
}

/* 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 {
  /* WebP (151 KB) for modern browsers via image-set; plain JPEG (457 KB) stays
     as the fallback for anything without image-set support. */
  background-image: url('../img/hero-2.jpg') !important;
  background-image: -webkit-image-set(url('../img/hero-2-1920.webp') type('image/webp'), url('../img/hero-2.jpg') type('image/jpeg')) !important;
  background-image: image-set(url('../img/hero-2-1920.webp') type('image/webp'), url('../img/hero-2.jpg') type('image/jpeg')) !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;
}

/* Borderless mode: no card frame/shadow/background — the form stands plainly on
   the page, wider and edge-to-edge within the content width. */
.solanox-zoho-section.is-plain {
    padding: 0;
    background: transparent none;
}
.solanox-zoho-section.is-plain .solanox-zoho-card {
    max-width: 1100px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.solanox-zoho-section.is-plain .solanox-zoho-iframe-wrapper {
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

/* Auto-height mode: wrapper grows with the form, iframe flows in normal flow and
   its height is driven by JS (Zoho postMessage). Overrides the fixed CSS-var height. */
.solanox-zoho-iframe-wrapper.is-auto {
    height: auto;
}
.solanox-zoho-iframe-wrapper.is-auto iframe {
    position: static;
    height: var(--iframe-height, 700px); /* initial; JS updates to fit */
}

/* 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: var(--font-heading);
    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: var(--font-heading);
    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;

    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 — minimalist: a bare dark-blue chevron, no circle/border/shadow by
   default. A soft neutral circle fades in only on hover. */
.ref-carousel__arrow {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 6;
    box-shadow: none;
    opacity: 0.65;
    transition: background 0.2s ease, opacity 0.2s ease;
}

/* SVG chevron — sized here, perfectly centered by the flexbox above */
.ref-carousel__arrow svg {
    display: block;
    width: 40px;
    height: 40px;
}

.ref-carousel__arrow:hover {
    background: var(--color-neutral-200);
    opacity: 1;
}

/* Sit outside the centered 1180px card with a 2rem gap (590px half-card + 52px
   arrow + 2rem gap), with a 16px floor so they stay on-screen on narrow viewports.
   Keep the 590px in sync with .ps-card max-width in the project_showcase snippet. */
.ref-carousel__arrow--prev { left: max(16px, calc(50% - 642px - 2rem)); }
.ref-carousel__arrow--next { right: max(16px, calc(50% - 642px - 2rem)); }

.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-sm);
}

.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-primary);
    transform: scale(1.35);
}

@media (max-width: 768px) {
    .ref-carousel__arrow {
        display: none;
    }
}

/* ════════════════════════════════════════════════
   Referenzen — image slider INSIDE a project card's photo area
   (separate from the project-to-project carousel above: this one flips
   through the photos of ONE project — autoplay, arrows, swipe.)
   Markup: site/snippets/blocks/project_showcase.php, behaviour: script.js
════════════════════════════════════════════════ */
.ps-media-slider {
    /* vertical scrolling still works; horizontal gestures belong to the slider,
       which also stops a swipe from scrolling the outer project carousel */
    touch-action: pan-y;
}

.ps-media-slider__track {
    position: absolute;
    inset: 0;
    display: flex;
    will-change: transform;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.ps-media-slider__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
}

/* No drag ghost / text selection when swiping with a mouse */
.ps-media-slider__slide img {
    user-select: none;
    -webkit-user-drag: none;
}

/* Arrows — on the photo itself, so they can't be confused with the outer
   project arrows sitting beside the card. */
.ps-media-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(15, 47, 69, 0.38);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #ffffff;
    cursor: pointer;
    opacity: 0.85;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.ps-media-slider__arrow svg {
    display: block;
}

.ps-media-slider__arrow:hover,
.ps-media-slider__arrow:focus-visible {
    background: rgba(15, 47, 69, 0.72);
    opacity: 1;
}

.ps-media-slider__arrow--prev { left: 14px; }
.ps-media-slider__arrow--next { right: 14px; }

/* Dots — bottom right, opposite the project title */
.ps-media-slider__dots {
    position: absolute;
    z-index: 3;
    right: clamp(1.25rem, 3vw, 2.2rem);
    bottom: clamp(1rem, 2.5vw, 1.6rem);
    display: flex;
    align-items: center;
    gap: 9px;
}

.ps-media-slider__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.ps-media-slider__dot:hover {
    background: rgba(255, 255, 255, 0.8);
}

.ps-media-slider__dot.is-active {
    background: #ffffff;
    transform: scale(1.3);
}

/* Keep the project title clear of the dots */
.ps-media-slider .ps-card__title {
    padding-right: 110px;
}

@media (max-width: 600px) {
    .ps-media-slider__arrow {
        width: 36px;
        height: 36px;
    }
    .ps-media-slider__arrow--prev { left: 8px; }
    .ps-media-slider__arrow--next { right: 8px; }
    .ps-media-slider .ps-card__title {
        padding-right: 80px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ps-media-slider__track {
        transition: 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;
}

/* .solutions is excluded from the reset above (it keeps its own hero-overlap
   padding), so it retained the base transparent 8px borders. Because .solutions
   has a TRANSPARENT background, those borders revealed the white body as a light
   strip at the seam with the grey .page-heading below. Strip them explicitly —
   this selector (0,1,3) beats the base ".main-content > section" (0,1,2). */
.main-content > section.solutions {
    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-bg-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 — at ≤1024px the block must keep its single-column stack, so this
   ID rule (higher specificity than the stacking rule) is scoped to min-width. */
@media (min-width: 1025px) {
  #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); }

/* Healthcare "besondere Erfahrung" intro: left-aligned rich body with the
   complexity factors as an animated, staggered list on the dark background. */
#gh-s2 .text-cta__body { max-width: 1040px; text-align: left; }
#gh-s2 .text-cta__body ul {
  list-style: none;
  margin: 1.75rem 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}
#gh-s2 .text-cta__body li {
  position: relative;
  padding-left: 2.25rem;
  line-height: 1.6;
  /* staggered reveal — starts shifted left + transparent (JS adds .is-in) */
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
#gh-s2 .text-cta__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--color-accent);
  transform: rotate(45deg);
}
#gh-s2 .text-cta__body li strong { color: #ffffff; font-weight: 700; }
#gh-s2 .text-cta__body li.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  #gh-s2 .text-cta__body li { opacity: 1; transform: none; transition: none; }
}
#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; hyphens: auto; }
/* 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); }
/* Desktop (>1024px): widen the lead paragraph so it packs into 2 lines, not 3.
   Below 1024px it keeps the default 760px cap for comfortable stacking. */
@media (min-width: 1025px) {
  #gh-s4-intro .text-cta__body { max-width: 1180px; }
}
#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); }
/* Desktop (>1024px): widen the lead paragraph so it packs into 2 lines, not 3. */
@media (min-width: 1025px) {
  #gh-s6 .text-cta__body { max-width: 1180px; }
}
#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  */
/* Desktop (>1024px): widen the lead paragraph so it packs into 2 lines, not 3. */
/* Desktop (>1024px): globally let intro/lead paragraphs pack into ~2 lines
   instead of 3. Applies to every text_cta body and svc-grid subheading site-wide.
   Sections with their own id-level max-width keep it (higher specificity); below
   1024px the 760px base applies for comfortable stacking on mobile/tablet.
   (.text-cta / .svc-grid prefix raises specificity above the block's inline base.) */
@media (min-width: 1025px) {
  .text-cta .text-cta__body { max-width: 1180px; }
  .svc-grid .svc-grid__subheading { max-width: 1180px; }
}

/* 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) */
}


/* ════════════════════════════════════════════════
   COOKIE CONSENT BANNER (snippets/analytics.php)
   Both buttons are styled identically on purpose: German regulators require
   "Ablehnen" to be as easy and prominent as "Akzeptieren". */
.cookie-banner {
    position: fixed;
    left: var(--space-md);
    right: var(--space-md);
    bottom: var(--space-md);
    z-index: 1100; /* above the header (1000) and back-to-top (999) */
    max-width: 960px;
    margin: 0 auto;
    background: var(--color-primary);
    color: rgba(255,255,255,0.9);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
}
.cookie-banner__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
}
.cookie-banner__text a { color: var(--color-accent); text-decoration: underline; }
.cookie-banner__actions {
    display: flex;
    gap: var(--space-sm);
    flex-shrink: 0;
}
.cookie-banner__btn {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 0.6rem 1.4rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: var(--color-primary);
    cursor: pointer;
    transition: filter var(--transition-fast);
}
.cookie-banner__btn:hover { filter: brightness(0.92); }
.cookie-banner__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 768px) {
    .cookie-banner__inner { flex-direction: column; align-items: stretch; padding: var(--space-md); }
    .cookie-banner__actions .cookie-banner__btn { flex: 1; }
}