/**
 * ===================================================
 * CSS Architecture: Variables, Reset, and Utilities
 * Base: 16px = 1rem
 * ===================================================
 */

:root {
  /* COLOR VARIABLES */
  --color-primary: #00c9cf;    /* Bright Teal */
  --color-primary-dark: #004a4f; /* Dark Teal/Slate */
  --color-dark-blue: #121c2e;    /* Deep Navy (Text/Dark Background) */
  --color-slate-gray: #353e4e;  /* Medium Slate Gray */
  --color-light-gray: #d0d5d6;  /* Very Light Gray (Background/Borders) */
  --color-muted-blue: #87989d;  /* Muted Blue-Gray */
  --color-accent-dark: #79614d;  /* Dark Brown/Khaki */
  --color-accent-light: #ad977f; /* Light Tan/Beige */
  --color-white: #ffffff; /* Light Tan/Beige */
  --color-lighter-gray: #f1f1f2;
  --color-logo-carousel: rgb(236,232,229);
  --color-angebot-uebersicht: #ede9e5;

  /* SPACING VARIABLES (PX to REM conversion) */
  --space-xxl: 5.1875rem; /* 83px */
  --space-xl: 4.125rem;   /* 66px */
  --space-lgp: 3.532rem;  /* 47px */
  --space-lg: 2.9375rem;  /* 47px */
  --space-md: 2.1875rem;  /* 35px */
  --space-sm: 1.3125rem;  /* 21px */
  --space-xs: 0.5rem;     /* 8px (common small step) */

  /* FONT FAMILY & WEIGHT VARIABLES */
  --font-family-primary: 'montserrat', sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-quote: "merriweather", serif;

  --font-size-h1: clamp(4.25rem, 3.8rem + 1.8vw, 5.19rem); /* 83px -> 68px */
  --font-size-h1-mobile: clamp(1.9rem, -0.4824rem + 6.3529vw, 4.6rem); /* 83px -> 68px */
  --font-size-h2: clamp(3.13rem, 2.9rem + 1vw, 3.75rem); /* 60px -> 50px */
  --font-size-h2-mobile: clamp(1.9rem, 0.2676rem + 4.3529vw, 3.75rem); /* 60px -> 50px */
  --font-size-h3: clamp(2.19rem, 2.0rem + 0.8vw, 2.63rem); /* 42px -> 35px */
  --font-size-h3-mobile: clamp(1.5rem, 0.7941rem + 1.8824vw, 2.3rem); /* 42px -> 35px */
  --font-size-h3-mobile-title: clamp(1.3rem, 0.4176rem + 2.3529vw, 2.3rem);
  /*--font-size-h3-mobile-title: clamp(1.5rem, 0.7941rem + 1.8824vw, 2.3rem);*/
  --font-size-h4: clamp(1.13rem, 0.9rem + 0.8vw, 1.63rem); /* 26px -> 18px */
  --font-size-h5: clamp(0.88rem, 0.6rem + 1.2vw, 1.44rem); /* 23px -> 14px */
  --font-size-h6: clamp(1.06rem, 0.9rem + 0.5vw, 1.38rem); /* 22px -> 17px */
  --font-size-lg: clamp(0.81rem, 0.7rem + 0.3vw, 1.13rem); /* 18px -> 13px */
  --font-size-base: clamp(0.81rem, 0.78rem + 0.1vw, 0.94rem); /* 15px -> 13px */
  --font-size-display: clamp(1.63rem, 1.2rem + 1.8vw, 2.63rem); /* 42px -> 26px */
  --font-size-display-mobile: clamp(1.4rem, 0.3412rem + 2.8235vw, 2.6rem); /* 42px -> 26px */
  --font-size-display-news: clamp(1.4rem, 1.1971rem + 0.5412vw, 1.63rem);
  --font-size-nav: clamp(0.935rem, 0.6526rem + 0.7529vw, 1.255rem);
  --font-size-list: clamp(0.9rem, 0.7235rem + 0.4706vw, 1.1rem);

/* Line Height Variables */
  --line-height-reset: 1;
  --line-height-compact: 0.92; /* Tighter leading (use sparingly, may clip descenders) */
  --line-height-snug: 1.07;   /* Very snug for large headings/display text */
  --line-height-tight: 1.14;   /* Tight for headings (H1-H3) */
  --line-height-medium: 1.15;  /* Standard/Medium heading line-height */
  --line-height-relaxed: 1.43; /* Comfortable for body text or sub-headings */
  --line-height-loose: 1.8;    /* Loose/Expanded for long-form reading, captions */
  --line-height-list: 1.25; /* useful line height for ul / li */

  /* Percentage Width Variables for Content/Layout */
  --width-xs: 65%;
  --width-sm: 70%;
  --width-smp: 70%;
  --width-md: 75%;
  --width-lg: 80%;
  --width-lgp: 84%;
  --width-xl: 90%;
  --width-full: 100%; /* Added for completeness */
  --width-half: 50%;  /* Added for completeness */

}

@media (max-width: 600px) {
  :root {
    --width-smp: 80%;
    --width-xs: 85%;
    --width-sm: 90%;
    --width-md: 95%;
    --width-lgp: 100%;
    --width-lg: 100%;
    --width-xl: 100%;
    --width-half: 100%;
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  :root {
    --font-size-h1: clamp(4.25rem, calc(2.9198rem + 0.2217vw), 5.19rem);
    --font-size-h1-mobile: clamp(2.6rem, calc(-0.2302rem + 0.4717vw), 4.6rem);
    --font-size-h2: clamp(3.13rem, calc(2.2526rem + 0.1462vw), 3.75rem);
    --font-size-h2-mobile: clamp(1.9rem, calc(-0.7179rem + 0.4363vw), 3.75rem);
    --font-size-h3: clamp(2.19rem, calc(1.5674rem + 0.1038vw), 2.63rem);
    --font-size-h3-mobile: clamp(1.9rem, calc(0.9094rem + 0.1651vw), 2.6rem);
    --font-size-h3-mobile-title: clamp(1.5rem, 1.4118rem + 0.2353vw, 1.6rem);
    --font-size-h4: clamp(1.13rem, calc(0.4225rem + 0.1179vw), 1.63rem);
    --font-size-h5: clamp(0.88rem, calc(0.0875rem + 0.1321vw), 1.44rem);
    --font-size-h6: clamp(1.06rem, calc(0.6072rem + 0.0755vw), 1.38rem);
    --font-size-lg: clamp(0.81rem, calc(0.3572rem + 0.0755vw), 1.13rem);
    --font-size-base: clamp(0.81rem, calc(0.6260rem + 0.0307vw), 0.94rem);
    --font-size-display: clamp(1.63rem, calc(0.2149rem + 0.2358vw), 2.63rem);
    --font-size-display-mobile: clamp(1.4rem, calc(-0.2981rem + 0.2830vw), 2.6rem);
    --font-size-display-news: clamp(1.4rem, calc(1.07rem + 0.54vw), 1.63rem);
    --font-size-nav: clamp(0.935rem, calc(0.4822rem + 0.0755vw), 1.255rem);
  }
}

/**
 * ===================================================
 * BASE STYLES & TYPOGRAPHY RESET
 * ===================================================
 */

body {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base); /* Sets default body size to ~15pt */
  line-height: 1.5;
  color: var(--color-dark-blue);
}

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}
/* 2. Remove default margin */
* {
  margin: 0;
}
/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}
/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}
/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  /* overflow-wrap: break-word;*/
}
/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  padding-top: unset;
}
/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

::selection {
  background-color: #ac967f;
  color: var( --color-white, #ffffff);
}

::-moz-selection {
  background-color: #ac967f;
  color: var( --color-white, #ffffff);
}

.bridge-section {
    position: relative;
    z-index: 1;
}

.bridge-section {
    position: relative;
    z-index: 1;
}

.footer-with-bridge {
    position: relative;
    z-index: 2;
    overflow: visible;
}

.footer-with-bridge::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 10%;
    width: 140px;
    height: 12px;
    background: #00c9cf;
    transform: skewX(-16deg);
    z-index: 10;
    pointer-events: none;
}

footer.l-footer {
    overflow: visible;
}

.w-image.logo-hover,
.w-image.logo-hover .w-image-h {
    transition: opacity 0.25s ease, filter 0.25s ease;
}

.w-image.logo-hover:hover,
.w-image.logo-hover .w-image-h:hover {
    opacity: 0.8;
    filter: brightness(0.9);
}

.footer-additional-logos a img {
	transition: opacity 0.25s ease, filter 0.25s ease;
}
		
.footer-additional-logos a:hover img {
	transition: opacity 0.25s ease, filter 0.25s ease;
	opacity: 0.8;
    filter: brightness(0.9);
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }

/**
 * ===================================================
 * UTILITY CLASSES
 * ===================================================
 */

/* FONT SIZES */
.text-h1 { font-size: var(--font-size-h1-mobile); }
.text-h2 { font-size: var(--font-size-h2-mobile); }
.text-h3 { font-size: var(--font-size-h3-mobile); }
.text-h4 { font-size: var(--font-size-h4); }
.text-h5 { font-size: var(--font-size-h5); }
.text-h6 { font-size: var(--font-size-h6); }
.text-lg { font-size: var(--font-size-lg); }
.text-base { font-size: var(--font-size-base); }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }

/* FONT WEIGHTS & STYLES */
.text-light { font-weight: var(--font-weight-light); }
.text-regular { font-weight: var(--font-weight-regular); }
.text-bold { font-weight: var(--font-weight-bold); }
.text-extrabold { font-weight: var(--font-weight-extrabold); }
.text-italic { font-style: italic; }

/* COLOR UTILITIES */
.text-primary { color: var(--color-primary); }
.text-primary-dark { color: var(--color-primary-dark); }
.text-dark-blue { color: var(--color-dark-blue); }
.bg-primary { background-color: var(--color-primary); }
.bg-light-gray { background-color: var(--color-light-gray); }

/* WIDTH UTILITIES */
.w-xs {width: var(--width-xs); }
.w-sm {width: var(--width-sm); }
.w-md {width: var(--width-md); }
.w-lg {width: var(--width-lg); }
.w-50 {width: var(--width-half); }
.w-100 {width: var(--width-full); }
.mx-auto {margin-inline: auto; }

/* MARGIN UTILITIES (m-[direction]-[size]) */
/* Margin All */
.m-xxl { margin: var(--space-xxl); }
.m-xl { margin: var(--space-xl); }
.m-lg { margin: var(--space-lg); }
.m-md { margin: var(--space-md); }
.m-sm { margin: var(--space-sm); }

/* Margin Top/Bottom (Vertical) */
.my-xxl { margin-block: var(--space-xxl); }
.my-xl { margin-block: var(--space-xl); }
.my-lg { margin-block: var(--space-lg); }
.my-md { margin-block: var(--space-md); }
.my-sm { margin-block: var(--space-sm); }
.mt-lg { margin-block-start: var(--space-lg); }
.mb-lg { margin-block-end: var(--space-lg); }

/* Margin Left/Right (Horizontal) */
.mx-xl { margin-inline: var(--space-xl); }
.mx-lg { margin-inline: var(--space-lg); }
.mx-auto { margin-inline: auto; } /* Center block element */
.ml-md { margin-inline-start: var(--space-md); }
.mr-md { margin-inline-end: var(--space-md); }


/* PADDING UTILITIES (p-[direction]-[size]) */
/* Padding All */
.p-xxl { padding: var(--space-xxl); }
.p-xl { padding: var(--space-xl); }
.p-lg { padding: var(--space-lg); }
.p-md { padding: var(--space-md); }
.p-sm { padding: var(--space-sm); }

/* Padding Top/Bottom (Vertical) */
.py-lg { padding-block: var(--space-lg); }
.py-md { padding-block: var(--space-md); }
.py-sm { padding-block: var(--space-sm); }
.pt-lg { padding-block-start: var(--space-lg); }
.pb-lg { padding-block-end: var(--space-lg); }

.py-xl { padding-block: var(--space-xl); }
@media (max-width: 1024px) {
  .py-xl { padding-top: calc(var(--space-xl) / 2); padding-bottom: var(--space-xl); }
}

@media (max-width: 600px) {
  .py-xl { padding-top: calc(var(--space-xl) / 2); padding-bottom: calc(var(--space-xl) / 2); }
}

.py-xxl { padding-block: calc(var(--space-xxl) / 2); }
@media (max-width: 1024px) {
  .py-xxl { padding-block: calc(var(--space-lg) / 2); }
}

/* Padding Left/Right (Horizontal) */
.px-xl { padding-inline: var(--space-xl); }
.px-lg { padding-inline: var(--space-lg); }
.px-md { padding-inline: var(--space-md); }
.pl-sm { padding-inline-start: var(--space-sm); }
.pr-sm { padding-inline-end: var(--space-sm); }

/* HEIGHT DIVIDERS (Spacer elements) */
.h-xxl { height: var(--space-xxl); }
.h-xl { height: var(--space-xl); }
.h-lg { height: var(--space-lg); }
.h-md { height: var(--space-md); }
.h-sm { height: var(--space-sm); }
.h-xs { height: var(--space-xs); }
.spacer { display: block; height: var(--space-md); } /* Default spacer */

/* BG Colors */
.bg-color-white {background: var(--color-white);}

/* Divider heights */
.divider-projects {height: 2rem!important;}
.divider-xl {height: var(--space-xl) !important;}
.divider-md {height: var(--space-md) !important;}
.divider-sm {height: var(--space-sm) !important;}
.divider-xs {height: var(--space-xs) !important;}
.divider-special-top-bottom {margin-top: var(--space-xl) !important; margin-bottom: var(--space-md) !important;;}
.divider-special-top-bottom.color_border {color: var(--color-muted-blue) !important;}
.divider-special-top {margin-top: var(--space-xl) !important; margin-bottom: 0;}
.divider-special-top.color_border {color: var(--color-muted-blue) !important;}


.divider-md {height: var(--space-md) !important;}
@media (max-width: 600px) {
    .divider-md {height: calc(var(--space-lg) / 2) !important;}
}

.divider-md-faq {height: var(--space-md) !important;}
@media (max-width: 600px) {
    .divider-md-faq {height: calc(var(--space-xl) / 2) !important;}
}

.divider-md-faq-before {height: var(--space-md) !important;}
@media (max-width: 600px) {
    .divider-md-faq-before {height: calc(var(--space-xl) / 2) !important;}
}

.branding-concierge-section .divider-md {height: var(--space-md) !important;}
@media (max-width: 600px) {
    .branding-concierge-section .divider-md {height: var(--space-sm) !important;}
}

.divider-xxl {height: calc(var(--space-xxl) / 2) !important;}
@media (max-width: 1024px) {
  .divider-xxl {height: var(--space-lg) !important;}
}

@media (max-width: 600px) {
  .divider-xxl {height: calc(var(--space-lg) / 2) !important;}
}

@media (max-width: 600px) {
  .projekte-section .divider-xxl {height: var(--space-sm) !important;}
}

.divider-xxl-normal {height: var(--space-xxl) !important;}
@media (max-width: 1024px) {
  .divider-xxl-normal {height: var(--space-lg) !important;}
}

@media (max-width: 600px) {
  .divider-xxl-normal {height: calc(var(--space-lg) / 2) !important;}
}

.divider-lg {height: var(--space-lg) !important;}
@media (max-width: 1024px) {
  .divider-lg {height: var(--space-sm) !important;}
}

@media (max-width: 600px) {
  .angebot-hero .divider-lg {height: calc(var(--space-lg) / 2) !important;}
}

.divider-lg-faq-before {height: var(--space-lg) !important;}
@media (max-width: 600px) {
  .divider-lg-faq-before {height: var(--space-lgp) !important;}
}

.divider-lg-faq {height: var(--space-lg) !important;}
@media (max-width: 600px) {
  .divider-lg-faq {height: var(--space-xl) !important;}
}

.divider-two {height: 2rem !important;}
@media (max-width: 1024px) {
  .divider-two {height: 2rem !important;}
}

.news-start-section .divider-two {height: 2rem !important;}
@media (max-width: 1024px) {
  .news-start-section .divider-two {height: 2rem !important;}
}

@media (max-width: 600px) {
  .news-start-section .divider-two {height: calc(var(--space-sm) - 0.5rem) !important;}
}

.divider-lgp {height: var(--space-lgp)!important;}

/* Header CSS */
.logo-tagline {
  font-size: 0.7rem !important;
  font-family: var(--font-family-primary) !important;
  font-weight: var(--font-weight-regular) !important;
}

.l-header.bg_transparent .logo-tagline {
	color: var(--color-white, #FFFFFF)  !important;
}

.l-header.bg_transparent.sticky .logo-tagline {
  color: var(--color-dark-blue, #121c2e) !important;
}

.l-header .logo-tagline {
	color: var(--color-dark-blue, #121c2e)  !important;
}

.kontakt-button-header span.si-geo6-btn__label {
  font-size: var(--font-size-h5) !important;
  line-height: 1.14 !important;
  font-family: var(--font-family) !important;
  font-weight: 500 !important;
}

.l-header.bg_transparent.sticky .kontakt-button-header span.si-geo6-btn__label {
  color: var(--color-dark-blue, #121c2e)  !important;
}

.l-header.bg_transparent.sticky .ush_menu_1 {
    color: var(--color-dark-blue, #121c2e)  !important;
}

/* Mobile Navigation */

@media screen and (max-width: 900px) {
    .l-subheader {
        padding-left: 1.5rem!important;
        padding-right: 1.5rem!important
    }
}

.mobile-navigation .w-nav-list,
.w-nav.type_mobile.m_layout_fullscreen .w-nav-list.level_1.mobile-navigation {
  height: auto !important;
  min-height: auto !important;
  bottom: auto !important;
}

.mobile-navigation .w-nav-list li {
	margin-top: 0!important;
}

.mobile-navigation ul.w-nav-list {
	padding-top: 0!important;
	padding-left: 1.5rem!important;
}

.w-nav-icon {
  height: 1.5rem!important;
  width: 1.5rem!important;
}

.inner-navigation {
	margin-top: 3rem!important;
}

#menu-mobile-navigation li:not(:first-child) {
    border-top: none;
}

#menu-mobile-navigation li {
    position: relative; 
    text-align: center;
    color: #ffffff;
    padding: 0;
    margin: 0;
    line-height: 1.5;
}

#menu-mobile-navigation li a {
  color: #ffffff;
}

/*#menu-mobile-navigation li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -14px;
    width: 68%;
    height: 6px;
    background-color: var(--color-primary, #00c9cf);
    clip-path: polygon(
        0 0,
        100% 0,
        96% 100%,
        0 100%
    );
    margin: 0 !important;
    transition: none !important;
}*/

#menu-mobile-navigation li::after {
    content: "";
    position: absolute;
    left: 25%;
    transform: translateX(-50%);
    bottom: -9px;
    width: 43%;
    height: 6px;
    background-color: var(--color-primary, #00c9cf);
    clip-path: polygon(
        0 0,
        100% 0,
        96% 100%,
        0 100%
    );
    margin: 0 !important;
    transition: none !important;
}

#menu-mobile-navigation .current-menu-item a {
  font-weight: 400 !important;
  color: var(--color-primary, #00c9cf);
}

#menu-mobile-navigation {
  --main-gap: 1.8rem!important;
}

.mobile-navigation .social-navigation-icons,
.social-navigation-icons {
    margin-top: 1.3rem;
    display: flex;
    flex-direction: row;
    gap: 0.4rem;
}

@media (max-width: 1024px) {
    .inner-navigation .menu>li {
        margin-bottom: 2.4rem!important;
    }
}

@media (max-width: 600px) {
    .inner-navigation .menu>li {
        margin-bottom: 2.4rem!important;
    }
}

/* End of Mobile Navigation */

/* Startseite CSS */
.si-slider-wrapper {
    position: relative;
    width: 100%;
    height: 83dvh;
    overflow: hidden;
    z-index: 0;
}

@media (max-width: 600px) {
    .si-slider-wrapper {
     height: calc(83dvh - 2.5rem);
     z-index: 0;
}
}

.si-slider-top-gradient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: 
        /* TOP fade (110px) */
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.85) 0px,
            rgba(0, 0, 0, 0) 110px
        ),
        /* BOTTOM fade (450px) */
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.95) 0px,
            rgba(0, 0, 0, 0.70) 250px,
            rgba(0, 0, 0, 0.35) 450px
        );
}

@media (max-width: 600px) {
    .si-slider-wrapper {
     height: calc(83dvh - 2.5rem);
     z-index: 0;
}

    .si-slider-top-gradient {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        background: 
        /* TOP fade (110px) */
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.85) 0px,
            rgba(0, 0, 0, 0) 70px
        ),
        /* BOTTOM fade (450px) */
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.85) 0px,
            rgba(0, 0, 0, 0) 400px
        );
}
}


.g-cols.vc_row.via_flex {
    position: relative; 
}

.hero-wrapper {
    max-width: var(--site-content-width, 1280px);
    width: 100%;
    margin-inline: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 10;
    box-sizing: border-box;
}

@media (max-width: 1380px) {
    .hero-wrapper {
        --padding-inline: 2.5rem;
        left: var(--padding-inline);
		right: var(--padding-inline);
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        width: auto;
    }
}

@media (max-width: 600px) {
    .hero-wrapper {
        --padding-inline: 1.5rem;
        left: var(--padding-inline);
		right: var(--padding-inline);
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        width: auto;
    }
}

.hero-main-title,
.hero-sub-title {
    /* text-align: center !important;*/
}

.hero-main-title,
.hero-main-title h1,
.hero-main-title p {
  font-size: var(--font-size-h1-mobile);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-white);
  font-family: var(--font-family-primary);
  line-height: var(--line-height-snug);
  font-style: normal;
}

.hero-sub-title,
.hero-sub-title h2,
.hero-sub-title p {
  font-size: var(--font-size-h3-mobile);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-accent-dark);
  font-family: var(--font-family-primary);
  line-height: var(--line-height-tight);
  font-style: normal;
  margin-bottom: calc(var(--space-lg) / 2)!important;
}

@media (min-width: 1025px) {
    .hero-sub-title {
        font-size: var(--font-size-h3-mobile);
        font-weight: var(--font-weight-extrabold);
        color: var(--color-accent-dark);
        font-family: var(--font-family-primary);
        line-height: var(--line-height-tight);
        margin-bottom: var(--space-lg)!important;
}
}

.w-vwrapper.hero-wrapper .w-html {
    /* text-align: center;*/
}

.hero-button {
    margin-bottom: calc(var(--space-lg) / 2);
}

@media (min-width: 1025px) {
    .hero-button {
        margin-bottom: var(--space-lg)!important;
}
}

.general-title {
  font-size: var(--font-size-display-mobile);
  font-weight: var(--font-weight-extrabold);
  width: var(--width-md);
  font-family: var(--font-family-primary);
  line-height: var(--line-height-snug);
}

.general-intro {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-regular);
  font-family: var(--font-family-primary);
  width: var(--width-lgp);
  line-height: var(--line-height-relaxed);
}

@media (max-width: 1024px) {
  .general-title,
  .general-intro {
    width: var(--width-xl)!important;
  }
}

.project-button {
  margin-top: calc(var(--space-xl) / 2);
}

.about-start-title {
  font-size: var(--font-size-h1-mobile);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-white);
  font-family: var(--font-family-primary);
  line-height: var(--line-height-snug);
}

.about-start-intro {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  font-size: var(--font-size-h3-mobile);
  color: var(--color-dark-blue);
}

@media (max-width: 600px) {
  .about-start-intro {
    color: var(--color-accent-light)!important;
  }
}

.about-start-intro-small {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  color: var(--color-white);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  font-style: italic;
}

/* =========================================
   BRANDING CONCIERGE SECTION
   ========================================= */

.branding-concierge-section {
  background: var(--color-primary-dark);
}

/* Layout wrapper: 2 columns, equal height on desktop */
.branding-concierge-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;          /* equal-height columns */
    justify-content: space-between;
}

/* Base columns: 50/50 on desktop */
.branding-concierge-inner-wrapper-left,
.branding-concierge-inner-wrapper-right {
    box-sizing: border-box;
    flex: 0 0 50%;
    max-width: 50%;
}

/* LEFT: limit content width & add theme padding */
.branding-concierge-inner-wrapper-left {
    max-width: 640px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0rem;
    padding-right: 0rem;
    box-sizing: border-box;
    padding-top: calc(var(--space-xxl) / 2);
    padding-bottom: calc(var(--space-xxl) / 2);
}

@media (max-width: 1280px) {
    .branding-concierge-inner-wrapper-left {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

@media (max-width: 1024px) {
    .branding-concierge-inner-wrapper-left {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

@media (max-width: 600px) {
    .branding-concierge-inner-wrapper-left {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* RIGHT: background image is set in the page builder on this wrapper */
.branding-concierge-inner-wrapper-right {
    position: relative;
    min-height: 320px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* If an image element still exists inside, hide it (to avoid double image) */
.branding-concierge-inner-wrapper-right .w-image,
.branding-concierge-inner-wrapper-right img {
    display: none !important;
}

/* =========================================
   RESPONSIVE: TABLET & MOBILE (≤ 1024px)
   ========================================= */

@media (max-width: 1024px) {
    .branding-concierge-wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    .branding-concierge-inner-wrapper-left {
        order: 1;
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        padding-top: var(--space-lg);
        padding-bottom: var(--space-lg);
    }

    .branding-concierge-inner-wrapper-right {
        order: 2;
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        background-position: center;
        margin-bottom: 0;
    }
}

/* =========================================
   TITLES WITH SHORT UNDERLINE
   ========================================= */

.special-title p {
    position: relative;
    display: inline-block;
    font-weight: var(--font-weight-extrabold);
    color: var(--color-white);
    margin: 0 0 1rem 0;
    font-size: var(--font-size-h3-mobile);
    line-height: 1.1;
}

/* Underline element */
.special-title p::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 5rem;
    height: 5px;
    background-color: var(--color-primary);
    /* border-radius: 1px;*/
}

/* Slightly shorter + lower on tablet/mobile */
@media (max-width: 1024px) {
  .special-title p::after {
    bottom: -10px;
    width: 3.5rem;
  }
}

/* =========================================
   SPECIAL TEXT BELOW TITLES
   ========================================= */

.special-text *,
.special-text p {
  font-size: var(--font-size-h5);
  color: var(--color-white);
  line-height: var(--line-height-relaxed);
  font-weight: var(--font-weight-regular);
  font-style: italic;
}

/* Make sure the right wrapper can hold absolutely positioned elements */
.branding-concierge-inner-wrapper-right {
    position: relative;
}

/* =========================================
   INFO HOTSPOT OVER IMAGE
   ========================================= */

.bc-info-hotspot {
    position: absolute;
    right: 43%;
    bottom: 52%;
    transform: translate(50%, 50%);
    z-index: 5;
}

/* Circular button that holds the SVG */
.bc-info-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);
    cursor: pointer;
    outline: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(4px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Scale your SVG inside the button */
.bc-info-svg {
    width: 70%;
    height: 70%;
    display: block;
}

/* Hover / focus state (desktop + keyboard, tap on mobile gives focus) */
.bc-info-icon:hover,
.bc-info-icon:focus-visible {
    background: #004a4fc6;
    transform: scale(1.04);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
}

/* =========================================
   TOOLTIP BUBBLE
   ========================================= */

.bc-tooltip {
    position: absolute;
    left: 50%;
    transform: translate(-50%, calc(-100% - 18px));
    min-width: 260px;
    max-width: 320px;
    background: #ffffff;
    color: var(--color-primary-dark, #121c2e);
    padding: 1rem 1.25rem;
    border-radius: 4px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    font-size: var(--font-size-body, 0.95rem);
    line-height: 1.5;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
    z-index: 6;
}

/* Tooltip arrow */
.bc-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
    width: 0;
    height: 0;
    border-width: 10px 10px 0 10px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
}

/* Tooltip title */
.bc-tooltip-title {
    margin: 0 0 0.35rem 0;
    font-weight: var(--font-weight-extrabold, 700);
    font-size: 1rem;
    color: var(--color-primary-dark, #004047);
}

/* =========================================
   SHOW TOOLTIP ON HOVER (DESKTOP)
   AND FOCUS (CLICK/TAP ON MOBILE)
   ========================================= */

.bc-info-hotspot:hover .bc-tooltip,
.bc-info-hotspot:focus-within .bc-tooltip {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translate(-50%, calc(-100% - 4.6rem));
}

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

@media (max-width: 1024px) {
    .bc-info-hotspot {
        right: 38%;
        bottom: 55%;
        transform: translate(50%, 50%);
    }

    .bc-tooltip {
        left: 50%;
        transform: translate(-50%, calc(-100% - 16px));
        max-width: 90vw;
    }
}

.logo-carousel-section {
  background: var(--color-logo-carousel);
  padding-block: var(--space-lgp);
}

.logo-carousel  .w-grid-item {
    padding: 0!important;
}

.news-start-section {
  padding-block: calc(var(--space-xxl) / 2);
  background: var(--color-white);
}

@media (max-width: 600px) {
    .news-start-section {
        padding-block: calc(var(--space-xxl) / 4);
        background: var(--color-white);
}
}

/* News Section Startseite */
.news-grid-start .w-grid-list {
  gap: 2.5rem !important;
}

.news-section-title {
    font-size: var(--font-size-display-news) !important;
    font-weight: var(--font-weight-extrabold) !important;
    font-style: normal !important;
    font-family: var(--font-family-primary);
    line-height: var(--line-height-tight) !important;
    margin-bottom: var(--space-xs) !important;
    color: var(--color-dark-blue);
}

.news-meta {
  margin-top: var(--space-sm);
}

.news-meta .news-date,
.news-meta .news-cat {
    font-size: var(--font-size-lg) !important;
    line-height: var(--line-height-medium) !important;
    margin-bottom: var(--space-xs) !important;
    font-weight: var(--font-weight-regular) !important;
    color: var(--color-dark-blue);
}

.news-excerpt {
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-relaxed) !important;
    margin-bottom: var(--space-xs) !important;
    font-weight: var(--font-weight-regular) !important;
    color: var(--color-dark-blue);
}

.news-meta > .w-post-elm:not(:last-child)::after {
    content: "|";
    display: inline-block;
    margin: 0 0.75rem;
    color: var(--color-dark-blue);
    opacity: 1;
    font-weight: 400;
}

.news-title {
    font-size: var(--font-size-h5) !important;
    font-weight: var(--font-weight-bold) !important;
    font-style: normal !important;
    line-height: var(--line-height-tight) !important;
    margin-bottom: var(--space-xs) !important;
    color: var(--color-dark-blue);
}

@media (max-width: 1024px) {
    .news-title {
        font-size: var(--font-size-h4) !important;
        width: var(--width-sm);
        font-weight: var(--font-weight-bold) !important;
        font-style: normal !important;
        line-height: var(--line-height-tight) !important;
        margin-bottom: var(--space-xs) !important;
        color: var(--color-dark-blue);
}

}

.news-button {
    font-size: var(--font-size-lg) !important;
    color: var(--color-primary) !important;
    font-weight: var(--font-weight-regular) !important;
}

/* CTA Section */

.cta-start-section {
  padding-block: calc(var(--space-xxl) * 80 / 100);
  background: var(--color-primary-dark);
}

.cta-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;          /* equal-height columns */
    justify-content: space-between;
}

/* Desktop layout (default) */
.cta-inner-wrapper-left {
    flex: 0 0 66.666%;
}

.cta-inner-wrapper-right {
    flex: 0 0 33.333%;
}

/* Equal height alignment */
.cta-wrapper > .w-vwrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Tablet & mobile — hide right wrapper */
@media (max-width: 1024px) {
    .cta-inner-wrapper-right {
        display: none;
    }

    .cta-inner-wrapper-left {
        flex: 0 0 100%;
    }
}

.cta-title {
    font-size: var(--font-size-h1-mobile);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-white);
    font-family: var(--font-family-primary);
    line-height: var(--line-height-snug);
}

.cta-title p {
    margin: -4px 0 0 0;
    line-height: var(--line-height-snug);
}

.cta-tagline {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-tight);
    font-size: var(--font-size-h3-mobile);
    color: var(--color-primary);
}

/* Footer CSS */
.footer {
  background: var(--color-dark-blue);
  color: var(--color-white);
  font-weight: var(--font-weight-regular);
  padding-block: calc(var(--space-xxl) * 80 / 100);
}

@media (max-width: 1024px) {
  .footer {
    padding-block: var(--space-lg);
  }
}

@media (max-width: 600px) {
  .footer {
    padding-top: calc(var(--space-lg) * 80 / 100);
    padding-bottom: calc(var(--space-sm) - 0.5rem);
  }
}

.footer a.footer-links,
.footer-text a.footer-links {
  color: var(--color-white);
}

.footer a.footer-links:hover,
.footer-text a.footer-links:hover {
  color: var(--color-primary);
}

.bottom-footer {
  background: var(--color-dark-blue);
  color: var(--color-white);
  font-weight: var(--font-weight-regular);
  padding-block: var(--space-xs);
}

.footer-logo {
  width: 210px;
  height: auto;
}

.main-footer-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 4vw;
}

@media (max-width: 1024px) {
.main-footer-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
}

.item-1 {order: 1;}
.item-2 {order: 3;}
.item-3 {order: 4;}
.item-4 {order: 2;}

}

@media (max-width: 600px) {
.main-footer-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: var(--space-sm);
}
}

.footer-link-text p {
    margin-bottom: 0;
    padding-bottom: 0.3rem;
}

.footer-link-text hr {
    display: block;
    width: 80%; 
    margin-left: 0;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0.3rem;
    border: none;
    border-top: 1px solid var(--color-white);
}

.social-icons-footer {
  display: flex;
  margin-top: 0.6rem;
  flex-direction: row;
  align-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.footer-additional-logos {
    display: flex;
    margin-top: 0.6rem;
    flex-direction: row;
    align-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.footer-search-field {
    margin-top: 0.6rem;
    margin-left: 0;
    margin-right: auto;
    width: 80% !important;
}

form .w-form-row {
    display: flex !important;
}

.footer-search-field .w-search-form {
    background-color: #fff;
    border-radius: 999px;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    height: 34px;
    display: flex;
    align-items: center;
}

.footer-search-field .w-form-row-field {
    flex-grow: 1;
    padding: 0 5px 0 5px;
    display: flex;
    align-items: center;
}

.footer-search-field input[type="text"] {
    height: 100%; 
    color: #121c2e;
    background: transparent;
    padding: 0;
    border: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-extrabold);
    flex-shrink: 0;
    padding-left: 0.6rem;
    padding-top: 0.2rem;
    opacity: 0.7;
}

.footer-search-field .w-search-form-btn {
    height: 100%;
    /*padding: 0 10px;*/
    padding-right: 0.6rem!important;
    color: #121c2e;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
}

.newsletter-button {
    height: 34px; 
    width: 80%;
    display: block;
    border-radius: 999px; 
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    background-color: var(--color-accent-dark);
    color: var(--color-dark-blue);
    font-weight: var(--font-weight-extrabold);
    font-size: var(--font-size-base);
    text-decoration: none;
    margin-top: 0.6rem; 
    margin-bottom: 0;
}

.newsletter-button,
.newsletter-button:link,
.newsletter-button:visited {
    background-color: var(--color-accent-dark); 
    color: var(--color-dark-blue);
    text-decoration: none; 
}

.newsletter-button:hover,
.newsletter-button:focus,
.newsletter-button:active {
    background-color: var(--color-primary);
    color: var(--color-dark-blue) !important; 
    transition: background-color 0.2s ease-in-out;
}

@media (max-width: 1024px) {
  .newsletter-button {
    width: 50%;
  }
  .footer-search-field {
    width: 50% !important;
  }
}

@media (max-width: 600px) {
  .newsletter-button {
    width: 56%;
    margin-left: 0;
    margin-right: auto;
    margin-top: var(--space-sm);
  }
  .footer-search-field {
    width: 56% !important;
    margin-left: 0;
    margin-right: auto;
  }
}

/* Projekt Seite CSS */

.projekt-grid .w-grid-list {
  row-gap: var(--space-lg) !important;
  column-gap: 2.5rem !important;
}

.projekt-filter .w-filter-list {
  justify-content: flex-start !important;
}

.main-title-projekte h1 {
  color: var(--color-dark-blue, #121c2e);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-h3-mobile-title);
  font-style: normal;
  line-height: var(--line-height-snug);
}

.projekt-title-client-logos {
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-dark);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-snug);
}

.projekt-intro-client-logos {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-light);
  color: var(--color-dark-blue, #121c2e);
  line-height: var(--line-height-relaxed);
  width: var(--width-md);
}

.logo-grid .w-grid-list {
  row-gap: var(--space-lg) !important;
  column-gap: 2.5rem !important;
}

@media (max-width: 600px) {
.logo-grid .w-grid-list {
  row-gap: calc(var(--space-lg) / 2) !important;
  column-gap: 2.5rem !important;
}
}

/* Custom properties defined on the parent element by JavaScript will be used here */
.logo-grid .w-grid-item {
  /* Initial State: Hidden and shifted down */
  opacity: 0;
  transform: translateY(50px);
  
  /* Transition settings: Uses variables for duration and delay */
  transition: all var(--animation-duration, 0.5s) ease-out;
  
  /* Staggered Delay Calculation: Item index * delay increment */
  /* The default values (0 and 0.075s) are used if JS doesn't set them */
  transition-delay: calc(var(--item-index, 0) * var(--delay-increment, 0.075s));
}

/* Final State: The item is visible and in its final position */
.logo-grid .w-grid-item.animate {
  opacity: 1;
  transform: translateY(0);
}

/* Angebots Seite CSS */

.angebot-hero {
  padding-top: calc(var(--space-xl) / 2);
}

.angebot-intro {
  font-weight: var(--font-weight-light);
  color: var(--color-dark-blue);
  font-size: var(--font-size-h5);
  line-height: var(--line-height-relaxed);
  width: var(--width-md);
}

.angebot-uebersicht-section {
  background: var(--color-white);
}

.angebot-subtitle {
  color: var(--color-accent-dark);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-medium);
}

.new-angebot-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 2rem;
}

@media (min-width: 1024px) {
.new-angebot-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 2rem;
}
}

.angebot-strategie {
    background: var(--color-accent-dark);
}

.angebot-design {
    background: var(--color-primary-dark);
}
.angebot-kommunikation {
    background: var(--color-dark-blue);
}

.inner-angebot-wrapper {
    padding: 1.5rem;
}

.angebot-title {
  color: var(--color-white);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  font-size: var(--font-size-h4);
}

.angebot-content ul {
  padding-left: 0;
  margin-left: 0;
  list-style: none;
}

.angebot-content ul li {
  padding-left: 1em;
  position: relative;
  margin-bottom: 0.3rem;
}

.angebot-content ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  font-size: 2em;
  line-height: 0; /* Important for alignment */
  top: 0.25em; /* Adjust this value to align properly */
}

.angebot-content ul {
  font-weight: var(--font-weight-light);
  color: var(--color-white, #ffffff);
  font-size: var(--font-size-list);
  line-height: var(--line-height-list);
}

.company-check-section {
  background: var(--color-dark-blue);
}

.special-title-angebot p {
    position: relative;
    display: inline-block;
    font-weight: var(--font-weight-extrabold);
    color: var(--color-white);
    margin: 0 0 1rem 0;
    font-size: var(--font-size-h2-mobile);
    line-height: var(--line-height-snug);
}

.special-title-angebot p::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 5rem;
    height: 5px;
    background-color: var(--color-accent-dark);
    border-radius: 1px;
}

.special-title-angebot p span.brown {
  color: var(--color-accent-dark);
}

.step-by-step-title {
    color: var(--color-dark-blue);
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-tight);
    font-size: var(--font-size-h3-mobile-title);
}

.step-by-step-info {
    font-weight: var(--font-weight-light);
    color: var(--color-dark-blue);
    font-size: var(--font-size-h5);
    line-height: var(--line-height-relaxed);
    width: var(--width-md);
}

.step-by-step-process-content {
  font-weight: var(--font-weight-light);
  color: var(--color-dark-blue);
  font-size: var(--font-size-h5);
  line-height: var(--line-height-relaxed);
}

span.step-by-step-span {
  font-weight: var(--font-weight-extrabold);
  color: var(--color-dark-blue);
  font-size: var(--font-size-h5);
  line-height: var(--line-height-relaxed);
}

/*ul.step-by-step-ul {
    font-weight: var(--font-weight-light);
    color: var(--color-dark-blue);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
}*/

ul.step-by-step-ul {
  font-weight: var(--font-weight-light);
  color: var(--color-dark-blue);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  padding-left: 0;
  margin-left: 0;
  list-style: none;
  margin-left: 0!important;
}

ul.step-by-step-ul li {
  padding-left: 0.8em;
  position: relative;
}

ul.step-by-step-ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  font-size: 2em;
  line-height: 0;
  top: 0.23em; /* Adjust this to align the bullet */
}

.step-by-step-process .w-tabs-item .w-tabs-item-title {
  color: var(--color-accent-dark);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-medium);
}

.step-by-step-process .w-tabs-item.active .w-tabs-item-title {
  color: var(--color-angebot-uebersicht);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-medium);
}

.step-by-step-process .w-tabs-item {
    opacity: 1 !important;
    background: var(--color-angebot-uebersicht) !important;
    color: var(--color-accent-dark) !important;
    box-shadow: unset !important;
    transition: background 0.3s ease;
}

.step-by-step-process .w-tabs-item:hover {
    opacity: 1 !important;
    background: #dcd5ce !important;
}

.step-by-step-process .w-tabs-item.active {
    opacity: 1 !important;
    background: var(--color-accent-dark) !important;
    color: var(--color-angebot-uebersicht) !important;
    box-shadow: unset !important;
}

.step-by-step-process .w-tabs-list button {
  margin-bottom: 0.6rem;
}

ul.step-by-step-ul {
  margin-left: 1.5rem;
}

@media (min-width: 601) and (max-width: 1024px) {
.w-tabs.layout_ver.accordion > .w-tabs-sections {
  display: block;
  width: 100% !important;
}
}

@media (max-width: 600px) {
.w-tabs.layout_ver.accordion > .w-tabs-sections {
  display: block;
  width: 88% !important;
}
}

@media (max-width: 1024px) {
.w-tabs.accordion > div > div > .w-tabs-section-header {
  display: flex;
  background: var(--color-accent-dark) !important;
  color: var(--color-angebot-uebersicht) !important;
  font-weight: var(--font-weight-bold)!important;
  line-height: var(--line-height-medium)!important;
  font-size: var(--font-size-lg)!important;
  margin-bottom: 0.3rem;
  border-radius: 9999rem;
}

.w-tabs.accordion .w-tabs-section.active > .w-tabs-section-header {
   background: var(--color-angebot-uebersicht) !important;
   color: var(--color-accent-dark) !important;
}

.w-tabs.accordion > div > div > .w-tabs-section-content {
  display: none;
  padding-top: 0.2rem;
  padding-bottom: 1.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

}

.faq-title {
    color: var(--color-dark-blue);
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-tight);
    font-size: var(--font-size-h4);
}

/* Agentur Seite */
/* ============================================================
   ABOUT START SECTION – BASE (ALL VIEWPORTS)
   ============================================================ */

.agentur-hero-section {
    position: relative !important;
    overflow: hidden;
    color: var(--color-white);
}

/* Hide image wrappers – we use background images instead */
.agentur-hero-section .about-start-image {
    display: none !important;
}

/* Dark overlay on top of background */
.agentur-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

/* Text above overlay */
.agentur-hero-wrapper,
.agentur-hero-wrapper * {
    position: relative;
    z-index: 2;
}

/* Base wrapper styles */
.agentur-hero-wrapper {
    max-width: 1280px;
    width: auto;              /* natural content width */
    margin-inline: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   DESKTOP ( > 1024px ) – CENTER VERTICALLY, SHIFT 1/3 RIGHT
   ============================================================ */

@media (min-width: 1025px) {

    /* Landscape background */
    .agentur-hero-section {
        background-image: url("/wp-content/uploads/2025/11/Agentur-Hero-01.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        aspect-ratio: 2560 / 1098;
    }

    /* Reset Impreza / WPBakery wrappers */
    .agentur-hero-section .l-section-h,
    .agentur-hero-section .g-cols,
    .agentur-hero-section .vc_col-sm-12,
    .agentur-hero-section .vc_column-inner,
    .agentur-hero-section .wpb_wrapper {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Wrapper: vertically centered, moved ~33% from the left */
    .agentur-hero-wrapper {
        position: absolute !important;
        top: 50%;                 /* vertical center */
        left: 36%;                /* start 1/3 from the left */
        transform: translateY(-50%);  /* only vertical centering */

        width: auto;              /* keep natural width */
        max-width: 1280px;
        padding: 1.5rem;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        z-index: 10;
    }
}

/* Fallback if aspect-ratio not supported */
@supports not (aspect-ratio: 1) {
    @media (min-width: 1025px) {
        .agentur-hero-section {
            width: 100%;
            padding-top: calc(1098 / 2560 * 100%);
            height: auto;
        }
        .agentur-hero-section > .l-section-h {
            position: absolute;
            inset: 0;
        }
    }
}

/* ============================================================
   TABLET / GENERIC MOBILE ( ≤ 1024px ) – NORMAL FLOW
   ============================================================ */

@media (max-width: 1024px) {

    .agentur-hero-section {
        background-image: url("/wp-content/uploads/2025/11/Agentur-Portrait-Hero-01.jpg");
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
    }

    .agentur-hero-section .l-section-h,
    .agentur-hero-section .g-cols,
    .agentur-hero-section .vc_col-sm-12,
    .agentur-hero-section .vc_column-inner,
    .agentur-hero-section .wpb_wrapper {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .agentur-hero-wrapper {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;

        width: 100% !important;
        max-width: 1280px;
        margin-inline: auto;

        padding-left: 0 !important;
        padding-right: 0 !important;

        justify-content: flex-start !important;
        align-items: flex-start !important;
    }
}

/* ============================================================
   SMARTPHONE ( ≤ 600px ) – PORTRAIT RATIO 2:3
   ============================================================ */

@media (max-width: 600px) {

    .agentur-hero-section {
        aspect-ratio: 2 / 3 !important;  /* 1024 × 1536 equivalent */
        background-image: url("/wp-content/uploads/2025/11/Agentur-Portrait-Hero-01.jpg");
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
    }

    .agentur-hero-section .l-section-h,
    .agentur-hero-section .g-cols,
    .agentur-hero-section .vc_col-sm-12,
    .agentur-hero-section .vc_column-inner,
    .agentur-hero-section .wpb_wrapper {
        display: block !important;
        height: auto !important;
    }

    .about-start-wrapper {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .agentur-hero-section {
        display: flex !important;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        padding-bottom: var(--space-lg);
    }
}

.agentur-hero-title {
  font-size: var(--font-size-h1-mobile);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-white);
  font-family: var(--font-family-primary);
  line-height: var(--line-height-snug);
}

.agentur-hero-intro {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  font-size: var(--font-size-h3-mobile);
  color: var(--color-dark-blue);
}
.about-start-intro-small {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  color: var(--color-white);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  font-style: italic;
}

.agentur-sub-title {
    color: var(--color-dark-blue);
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-tight);
    font-size: var(--font-size-h3-mobile-title);
}

.agentur-sub-info {
    font-weight: var(--font-weight-light);
    color: var(--color-dark-blue);
    font-size: var(--font-size-h5);
    line-height: var(--line-height-relaxed);
    width: var(--width-md);
}

.agentur-team-title {
    font-weight: var(--font-weight-bold);
    color: var(--color-dark-blue);
    font-size: var(--font-size-h4);
    line-height: var(--line-height-tight);
}

.agentur-cta-section {

}

.agentur-cta-wrapper {

}

.agentur-cta-section {
  background: var(--color-primary-dark);
}

/* Layout wrapper: 2 columns, equal height on desktop */
.agentur-cta-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;          /* equal-height columns */
    justify-content: space-between;
}

/* Kontakt Seite CSS */
/* ============================================================
   KONTAKT HERO SECTION – BASE (ALL VIEWPORTS)
   ============================================================ */

.contact-hero-section {
    position: relative !important;
    overflow: hidden;
    color: var(--color-white);
}

/* Hide image wrappers – we use background images instead */
.contact-hero-section .about-start-image {
    display: none !important;
}

/* Dark overlay on top of background */
.contact-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

/* Text above overlay */
.contact-hero-wrapper,
.contact-hero-wrapper * {
    position: relative;
    z-index: 2;
}

/* Base wrapper styles */
.contact-hero-wrapper {
    max-width: 1280px;
    width: auto;              /* natural content width */
    margin-inline: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   DESKTOP ( > 1024px ) – CENTER VERTICALLY, SHIFT 1/3 RIGHT
   ============================================================ */

@media (min-width: 1025px) {

    /* Landscape background */
    .contact-hero-section {
        background-image: url("/wp-content/uploads/2025/11/Kontakt-Hero-01.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        aspect-ratio: 2560 / 1098;
    }

    /* Reset Impreza / WPBakery wrappers */
    .contact-hero-section .l-section-h,
    .contact-hero-section .g-cols,
    .contact-hero-section .vc_col-sm-12,
    .contact-hero-section .vc_column-inner,
    .contact-hero-section .wpb_wrapper {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Wrapper: vertically centered, moved ~33% from the left */
    .contact-hero-wrapper {
        position: absolute !important;
        top: 50%;                 /* vertical center */
        left: 36%;                /* start 1/3 from the left */
        transform: translateY(-50%);  /* only vertical centering */

        width: auto;              /* keep natural width */
        max-width: 1280px;
        padding: 1.5rem;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        z-index: 10;
    }
}

/* Fallback if aspect-ratio not supported */
@supports not (aspect-ratio: 1) {
    @media (min-width: 1025px) {
        .contact-hero-section {
            width: 100%;
            padding-top: calc(1098 / 2560 * 100%);
            height: auto;
        }
        .contact-hero-section > .l-section-h {
            position: absolute;
            inset: 0;
        }
    }
}

/* ============================================================
   TABLET / GENERIC MOBILE ( ≤ 1024px ) – NORMAL FLOW
   ============================================================ */

@media (max-width: 1024px) {

    .contact-hero-section {
        background-image: url("/wp-content/uploads/2025/11/Kontakt-Portrait-Hero-01.jpg");
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
    }

    .contact-hero-section .l-section-h,
    .contact-hero-section .g-cols,
    .contact-hero-section .vc_col-sm-12,
    .contact-hero-section .vc_column-inner,
    .contact-hero-section .wpb_wrapper {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .contact-hero-wrapper {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;

        width: 100% !important;
        max-width: 1280px;
        margin-inline: auto;

        padding-left: 0 !important;
        padding-right: 0 !important;

        justify-content: flex-start !important;
        align-items: flex-start !important;
    }
}

/* ============================================================
   SMARTPHONE ( ≤ 600px ) – PORTRAIT RATIO 2:3
   ============================================================ */

@media (max-width: 600px) {

    .contact-hero-section {
        aspect-ratio: 2 / 3 !important;  /* 1024 × 1536 equivalent */
        background-image: url("/wp-content/uploads/2025/11/Kontakt-Portrait-Hero-01.jpg");
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
    }

    .contact-hero-section .l-section-h,
    .contact-hero-section .g-cols,
    .contact-hero-section .vc_col-sm-12,
    .contact-hero-section .vc_column-inner,
    .contact-hero-section .wpb_wrapper {
        display: block !important;
        height: auto !important;
    }

    .contact-hero-wrapper {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .contact-hero-section {
        display: flex !important;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        padding-bottom: var(--space-lg);
    }
}

.contact-hero-title {
    font-size: var(--font-size-h2-mobile);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-white);
    font-family: var(--font-family-primary);
    line-height: var(--line-height-snug);
}

.contact-hero-intro-small {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-regular);
    color: var(--color-white);
    font-size: var(--font-size-h5);
    line-height: var(--line-height-relaxed);
    font-style: italic;
}

@media (max-width: 600px) {
.contact-buttons {
    flex-direction: column;
    gap: 0.6rem;
}
}

/* =========================================
   CONTACT  SECTION
   ========================================= */

.contact-section {
  background: var(--color-white);
}

/* Layout wrapper: 2 columns, equal height on desktop */
.contact-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;          /* equal-height columns */
    justify-content: space-between;
}

/* Base columns: 50/50 on desktop */
.contact-inner-wrapper-left,
.contact-inner-wrapper-right {
    box-sizing: border-box;
    flex: 0 0 50%;
    max-width: 50%;
}

/* LEFT: limit content width & add theme padding */
.contact-inner-wrapper-left {
    max-width: 640px;              /* half of 1280px canvas */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;          /* theme default side padding */
    padding-right: 1.5rem;
    box-sizing: border-box;
    padding-top: var(--space-xxl);
    padding-bottom: var(--space-xxl);
}

/* RIGHT: background image is set in the page builder on this wrapper */
.contact-inner-wrapper-right {
    position: relative;
    min-height: 320px;             /* nice default height on desktop */
    background-size: cover;        /* in case builder doesn't set it */
    background-position: center center;
    background-repeat: no-repeat;
}

/* If an image element still exists inside, hide it (to avoid double image) */
.contact-inner-wrapper-right .w-image,
.contact-inner-wrapper-right img {
    display: none !important;
}

/* =========================================
   RESPONSIVE: TABLET & MOBILE (≤ 1024px)
   ========================================= */

@media (max-width: 1024px) {
    .contact-wrapper {
        flex-direction: column;
        align-items: stretch;      /* full width blocks */
    }

    .contact-inner-wrapper-left {
        order: 1;
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        padding-top: var(--space-lg);
        padding-bottom: var(--space-lg);
        /* left/right 1.5rem stay from base rule */
    }

    .contact-inner-wrapper-right {
        order: 2;
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        min-height: 560px;
        background-position: center;
        margin-bottom: 0;
    }
}

.contact-main-info {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-dark-blue);
    line-height: var(--line-height-relaxed);
    font-size: var(--font-size-h4);
}

.contact-sub-info {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-light);
    color: var(--color-dark-blue);
    line-height: var(--line-height-relaxed);
    font-size: var(--font-size-h5);
}

.contact-sub-info a {
    color: var(--color-accent-dark);
}

.contact-sub-info a:hover {
    color: var(--color-primary-dark);
}

/* Kostenloser Firmencheck */
/* ============================================================
   ABOUT START SECTION – BASE (ALL VIEWPORTS)
   ============================================================ */

.firmencheck-hero-section {
    position: relative !important;
    overflow: hidden;
    color: var(--color-white);
}

/* Hide image wrappers – we use background images instead */
.firmencheck-hero-section .about-start-image {
    display: none !important;
}

/* Dark overlay on top of background */
.firmencheck-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

/* Text above overlay */
.firmencheck-hero-wrapper,
.firmencheck-hero-wrapper * {
    position: relative;
    z-index: 2;
}

/* Base wrapper styles */
.firmencheck-hero-wrapper {
    max-width: 1280px;
    width: auto;              /* natural content width */
    margin-inline: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   DESKTOP ( > 1024px ) – CENTER VERTICALLY, SHIFT 1/3 RIGHT
   ============================================================ */

@media (min-width: 1025px) {

    /* Landscape background */
    .firmencheck-hero-section {
        background-image: url("/wp-content/uploads/2025/11/Kostenloser-Firmencheck-Hero-02.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        aspect-ratio: 2560 / 1098;
    }

    /* Reset Impreza / WPBakery wrappers */
    .firmencheck-hero-section .l-section-h,
    .firmencheck-hero-section .g-cols,
    .firmencheck-hero-section .vc_col-sm-12,
    .firmencheck-hero-section .vc_column-inner,
    .firmencheck-hero-section .wpb_wrapper {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Wrapper: vertically centered, moved ~33% from the left */
    .firmencheck-hero-wrapper {
        position: absolute !important;
        top: 50%;                 /* vertical center */
        left: 36%;                /* start 1/3 from the left */
        transform: translateY(-50%);  /* only vertical centering */

        width: auto;              /* keep natural width */
        max-width: 1280px;
        padding: 1.5rem;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        z-index: 10;
    }
}

/* Fallback if aspect-ratio not supported */
@supports not (aspect-ratio: 1) {
    @media (min-width: 1025px) {
        .firmencheck-hero-section {
            width: 100%;
            padding-top: calc(1098 / 2560 * 100%);
            height: auto;
        }
        .firmencheck-hero-section > .l-section-h {
            position: absolute;
            inset: 0;
        }
    }
}

/* ============================================================
   TABLET / GENERIC MOBILE ( ≤ 1024px ) – NORMAL FLOW
   ============================================================ */

@media (max-width: 1024px) {

    .firmencheck-hero-section {
        background-image: url("/wp-content/uploads/2025/11/Kostenloser-Firmencheck-Portrait-Hero-02.jpg");
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
    }

    .firmencheck-hero-section .l-section-h,
    .firmencheck-hero-section .g-cols,
    .firmencheck-hero-section .vc_col-sm-12,
    .firmencheck-hero-section .vc_column-inner,
    .firmencheck-hero-section .wpb_wrapper {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .firmencheck-hero-wrapper {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;

        width: 100% !important;
        max-width: 1280px;
        margin-inline: auto;

        padding-left: 0 !important;
        padding-right: 0 !important;

        justify-content: flex-start !important;
        align-items: flex-start !important;
    }
}

/* ============================================================
   SMARTPHONE ( ≤ 600px ) – PORTRAIT RATIO 2:3
   ============================================================ */

@media (max-width: 600px) {

    .firmencheck-hero-section {
        aspect-ratio: 2 / 3 !important;  /* 1024 × 1536 equivalent */
        background-image: url("/wp-content/uploads/2025/11/Kostenloser-Firmencheck-Portrait-Hero-02.jpg");
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
    }

    .firmencheck-hero-section .l-section-h,
    .firmencheck-hero-section .g-cols,
    .firmencheck-hero-section .vc_col-sm-12,
    .firmencheck-hero-section .vc_column-inner,
    .firmencheck-hero-section .wpb_wrapper {
        display: block !important;
        height: auto !important;
    }

    .firmencheck-hero-wrapper {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .firmencheck-hero-section {
        display: flex !important;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        padding-bottom: var(--space-lg);
    }
}

.firmencheck-hero-title {
  font-size: var(--font-size-h1-mobile);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-white);
  font-family: var(--font-family-primary);
  line-height: var(--line-height-snug);
}

.firmencheck-title {
  font-size: var(--font-size-h3-mobile-title);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-accent-dark);
  font-family: var(--font-family-primary);
  line-height: var(--line-height-tight);
}

.firmencheck-info {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-light);
  color: var(--color-dark-blue);
  font-family: var(--font-family-primary);
  line-height: var(--line-height-relaxed);
  width: var(--width-md);
}

.firmencheck-subt-title {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-dark-blue);
  font-family: var(--font-family-primary);
  line-height: var(--line-height-tight);
}

.firmencheck-formular-section {
  background: var(--color-angebot-uebersicht);
}

.firmencheck-gravity-form-wrapper {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 1025px) {
.firmencheck-gravity-form-wrapper {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 2rem;
}
}


/* ============================================================
   Unser Beitrag SECTION – BASE (ALL VIEWPORTS)
   ============================================================ */

.unser-beitrag-hero-section {
    position: relative !important;
    overflow: hidden;
    color: var(--color-white);
}

/* Hide image wrappers – we use background images instead */
.unser-beitrag-hero-section .about-start-image {
    display: none !important;
}

/* Dark overlay on top of background */
.unser-beitrag-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

/* Text above overlay */
.unser-beitrag-hero-wrapper,
.unser-beitrag-hero-wrapper * {
    position: relative;
    z-index: 2;
}

/* Base wrapper styles */
.unser-beitrag-hero-wrapper {
    max-width: 1280px;
    width: auto;              /* natural content width */
    margin-inline: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   DESKTOP ( > 1024px ) – CENTER VERTICALLY, SHIFT 1/3 RIGHT
   ============================================================ */

@media (min-width: 1025px) {

    /* Landscape background */
    .unser-beitrag-hero-section {
        background-image: url("/wp-content/uploads/2025/11/Shape-our-future-Hero-02.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        aspect-ratio: 2560 / 1098;
    }

    /* Reset Impreza / WPBakery wrappers */
    .unser-beitrag-hero-section .l-section-h,
    .unser-beitrag-hero-section .g-cols,
    .unser-beitrag-hero-section .vc_col-sm-12,
    .unser-beitrag-hero-section .vc_column-inner,
    .unser-beitrag-hero-section .wpb_wrapper {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Wrapper: vertically centered, moved ~33% from the left */
    .unser-beitrag-hero-wrapper {
        position: absolute !important;
        top: 50%;                 /* vertical center */
        left: 36%;                /* start 1/3 from the left */
        transform: translateY(-50%);  /* only vertical centering */

        width: auto;              /* keep natural width */
        max-width: 1280px;
        padding: 1.5rem;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        z-index: 10;
    }
}

/* Fallback if aspect-ratio not supported */
@supports not (aspect-ratio: 1) {
    @media (min-width: 1025px) {
        .unser-beitrag-hero-section {
            width: 100%;
            padding-top: calc(1098 / 2560 * 100%);
            height: auto;
        }
        .unser-beitrag-hero-section > .l-section-h {
            position: absolute;
            inset: 0;
        }
    }
}

/* ============================================================
   TABLET / GENERIC MOBILE ( ≤ 1024px ) – NORMAL FLOW
   ============================================================ */

@media (max-width: 1024px) {

    .unser-beitrag-hero-section {
        background-image: url("/wp-content/uploads/2025/11/Shape-our-future-Portrait-Hero-02.jpg");
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
    }

    .unser-beitrag-hero-section .l-section-h,
    .unser-beitrag-hero-section .g-cols,
    .unser-beitrag-hero-section .vc_col-sm-12,
    .unser-beitrag-hero-section .vc_column-inner,
    .unser-beitrag-hero-section .wpb_wrapper {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .unser-beitrag-hero-wrapper {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;

        width: 100% !important;
        max-width: 1280px;
        margin-inline: auto;

        padding-left: 0 !important;
        padding-right: 0 !important;

        justify-content: flex-start !important;
        align-items: flex-start !important;
    }
}

/* ============================================================
   SMARTPHONE ( ≤ 600px ) – PORTRAIT RATIO 2:3
   ============================================================ */

@media (max-width: 600px) {

    .unser-beitrag-hero-section {
        aspect-ratio: 2 / 3 !important;  /* 1024 × 1536 equivalent */
        background-image: url("/wp-content/uploads/2025/11/Shape-our-future-Portrait-Hero-02.jpg");
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
    }

    .unser-beitrag-hero-section .l-section-h,
    .unser-beitrag-hero-section .g-cols,
    .unser-beitrag-hero-section .vc_col-sm-12,
    .unser-beitrag-hero-section .vc_column-inner,
    .unser-beitrag-hero-section .wpb_wrapper {
        display: block !important;
        height: auto !important;
    }

    .firmencheck-hero-wrapper {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .unser-beitrag-hero-section {
        display: flex !important;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        padding-bottom: var(--space-lg);
    }
}

.unser-beitrag-hero-title {
  font-size: var(--font-size-h1-mobile);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-white);
  font-family: var(--font-family-primary);
  line-height: var(--line-height-snug);
}

.unser-beitrag-wrapper .vc_column-inner > .wpb_wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1025px) {
.unser-beitrag-wrapper .vc_column-inner > .wpb_wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
}
}

.unser-beitrag-inner-wrapper {

}

.unser-beitrag-inner-title {
    font-size: var(--font-size-h3-mobile-title);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-dark-blue);
    font-family: var(--font-family-primary);
    line-height: var(--line-height-tight);
}

.unser-beitrag-inner-content {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-light);
    color: var(--color-dark-blue);
    font-family: var(--font-family-primary);
    line-height: var(--line-height-relaxed);
}

/* each column behaves like a vertical layout */
.unser-beitrag-inner-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.unser-beitrag-inner-content {
    flex-grow: 1;           /* fills available space */
}

.image-links-external,
.w-html {
    flex-shrink: 0;
}

/* push image + button to the bottom */
.unser-beitrag-inner-wrapper .image-links-external,
.unser-beitrag-inner-wrapper .w-html {
    margin-top: auto;
}

/* optional: spacing between logo and button */
.unser-beitrag-inner-wrapper .w-html {
    margin-top: 1rem;
}

.unser-beitrag-lower-wrapper .vc_column-inner > .wpb_wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0rem;
}

@media (min-width: 1025px) {
    .unser-beitrag-lower-wrapper .vc_column-inner > .wpb_wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0rem;
}
}

/* Startseite new about */
.new-about-start-section {
    background: linear-gradient(195deg,rgba(97, 79, 62, 1) 19%, rgba(181, 155, 132, 1) 78%);
    height: auto;
    padding-top: var(--space-sm);
}

@media (max-width: 600px) {
  .new-about-start-section {
    background: linear-gradient(348deg, rgba(97, 79, 62, 1) 19%, rgba(181, 155, 132, 1) 78%);
    position: relative;
    max-height: min(580px, 100svh);
    overflow: hidden;
    padding-top: 0;
    isolation: isolate;
  }
  
  .new-about-start-section .vc_column-inner > .wpb_wrapper {
    height: min(580px, 100svh);
    align-items: end;
  }
  
  .new-about-media-wrapper {
    position: absolute;
    top: var(--space-sm);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
  }
  
  .new-about-media-wrapper .w-image,
  .new-about-media-wrapper .w-image-h {
    height: 100%;
  }
  
  .new-about-media-wrapper .w-image-h img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: bottom center;
    transform: scale(1) translateY(0px);
    transform-origin: bottom center;
  }
  
  .new-about-text-wrapper {
    position: absolute !important;
    bottom: var(--space-lg);
    left: 1.5rem;
    right: 1.5rem;
    z-index: 2;
    margin-bottom: 0 !important;
  }
  
    .new-about-start-section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60%;
    pointer-events: none;
    z-index: 1; /* overlay above image */

    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.42) 30%,
      rgba(0, 0, 0, 0.22) 60%,
      rgba(0, 0, 0, 0.08) 80%,
      rgba(0, 0, 0, 0.00) 100%
    );
  }
}

.new-about-media img {
    /* filter: brightness(0.80);*/
}

/* MOBILE-FIRST: overlay */
.new-about-start-section .vc_column-inner > .wpb_wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: end;
}

/* BOTH in same grid cell */
.new-about-media-wrapper,
.new-about-text-wrapper {
    grid-row: 1;
    grid-column: 1;
}

/* Text above image */
.new-about-text-wrapper {
    z-index: 2;
    position: relative;
    /*background: rgba(120, 90, 70, 0.08);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: 10px;
    padding: 0.2rem;*/
    margin-bottom: var(--space-lg);
}

.new-about-media-wrapper {
    z-index: 1;
}

/*.new-about-media-wrapper img {
        object-fit: fill!important;
 }*/

@media (min-width: 1025px) {
    .new-about-media-wrapper {
        height: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .new-about-media-wrapper .w-image,
    .new-about-media-wrapper .w-image-h {
        height: 100%;
    }
    
    .new-about-media-wrapper .w-image-h img {
        height: 100%;
        width: auto;
        object-fit: cover;
        object-position: top center;
    }
}

@media (min-width: 1025px) {
    .new-about-start-column-wrapper .vc_column-inner > .wpb_wrapper {
        grid-template-columns: 1fr 2fr!important;
        align-items: center;
    }

    .new-about-media-wrapper,
    .new-about-text-wrapper {
        grid-row: auto;
        grid-column: auto;
        position: static;
        z-index: auto;
    }

    .new-about-media-wrapper {
        grid-column: 1;
    }

    /*.new-about-media-wrapper img {
        object-fit: fill!important;
    }*/

    .new-about-text-wrapper {
        grid-column: 2;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 0;
        border-radius: 0;
        /*margin-bottom: var(--space-xxl);
        margin-top: var(--space-xxl);*/
    }
}

/* Agentur Seite Hero */
.new-agentur-hero-section {
    background: linear-gradient(195deg,rgba(54, 91, 95, 1) 19%, rgba(74, 115, 119, 1) 78%);
    height: auto;
}

.new-agentur-media img {
    /* filter: brightness(0.80); */
}

/* MOBILE-FIRST: overlay */
.new-agentur-column-wrapper .vc_column-inner > .wpb_wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: end;
}

/* BOTH in same grid cell */
.new-agentur-media-wrapper,
.new-agentur-text-wrapper {
    grid-row: 1;
    grid-column: 1;
}

/* Text above image */
.new-agentur-text-wrapper {
    z-index: 2;
    position: relative;
    margin-bottom: var(--space-lg);
}

.new-agentur-media-wrapper {
    z-index: 1;
}

@media (max-width: 600px) {
  .new-agentur-hero-section {
    background: linear-gradient(357deg,rgba(54, 91, 95, 1) 19%, rgba(74, 115, 119, 1) 78%);
    position: relative;
    max-height: min(580px, 100svh);
    overflow: hidden;
    padding-top: 0;
    isolation: isolate;
  }
  
  .new-agentur-column-wrapper .vc_column-inner > .wpb_wrapper {
    height: min(580px, 100svh);
    align-items: end;
  }
  
  .new-agentur-media-wrapper {
    position: absolute;
    top: var(--space-sm);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
  }
  
  .new-agentur-media-wrapper .w-image,
  .new-agentur-media-wrapper .w-image-h {
    height: 100%;
  }
  
  .new-agentur-media-wrapper .w-image-h img {
    height: 100%;
    width: 100%;
    object-fit: contain;               /* Changed from cover */
    object-position: bottom center;
    transform: scale(0.9) translateY(-70px);
    transform-origin: bottom center;
}
  
  .new-agentur-text-wrapper {
    position: absolute;
    bottom: calc(var(--space-lg) * 2);
    left: 1.5rem;
    right: 1.5rem;
    z-index: 2;
    margin-bottom: 0;
  }
  
  .new-agentur-hero-section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60%;
    pointer-events: none;
    z-index: 1; /* overlay above image */

    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.42) 30%,
      rgba(0, 0, 0, 0.22) 60%,
      rgba(0, 0, 0, 0.08) 80%,
      rgba(0, 0, 0, 0.00) 100%
    );
  }
}

@media (min-width: 1025px) {
    .new-agentur-media-wrapper {
        height: 600px;
        margin-left: auto;
        margin-right: auto;
        position: static;
    }
    
    .new-agentur-media-wrapper .w-image,
    .new-agentur-media-wrapper .w-image-h {
        height: 100%;
    }
    
    .new-agentur-media-wrapper .w-image-h img {
        height: 100%;
        width: auto;
        object-fit: cover;
        object-position: top center;
    }
}

@media (min-width: 1025px) {
    .new-agentur-column-wrapper .vc_column-inner > .wpb_wrapper {
        grid-template-columns: 1fr 2fr!important;
        align-items: center;
    }

    .new-agentur-media-wrapper,
    .new-agentur-text-wrapper {
        grid-row: auto;
        grid-column: auto;
        position: static;
        z-index: auto;
    }

    .new-agentur-media-wrapper {
        grid-column: 1;
    }

    .new-agentur-text-wrapper {
        grid-column: 2;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 0;
        border-radius: 0;
    }
}

/* Contact Seite Hero */
.new-contact-hero-section {
    background-image: url("/wp-content/uploads/2025/12/Kontakt-Portrait-Hero-10.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: auto;
}

@media (max-width: 600px) {
  .new-contact-hero-section {
    position: relative;
    max-height: min(580px, 100svh);
    overflow: hidden;
  }

  .new-contact-media-wrapper {
    display: none;    /* Hide the image wrapper */
  }
  
  .new-contact-column-wrapper .vc_column-inner > .wpb_wrapper {
    height: min(580px, 100svh);
    align-items: end;
  }
  
    .new-contact-text-wrapper {
    position: absolute!important;
    bottom: var(--space-lg);
    left: 1.5rem;
    right: 1.5rem;
    z-index: 2;
    margin-bottom: 0;
  }
  
  .new-contact-hero-section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
  }
}

@media (min-width: 1025px) {
    .new-contact-hero-section {
        background-image: url("/wp-content/uploads/2025/12/Kontakt-Landscape-Hero-11.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;   
    }
}

.new-contact-media img {
    filter: brightness(0.80);
}

/* MOBILE-FIRST: overlay */
.new-contact-column-wrapper .vc_column-inner > .wpb_wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: end;
}

/* BOTH in same grid cell */
.new-contact-media-wrapper,
.new-contact-text-wrapper {
    grid-row: 1;
    grid-column: 1;
}

/* Text above image */
.new-contact-text-wrapper {
    z-index: 2;
    position: relative;
    margin-bottom: var(--space-lg);
}

.new-contact-media-wrapper {
    z-index: 1;
}

@media (min-width: 1025px) {
    .new-contact-media-wrapper {
        height: 600px;
        margin-left: auto;
        margin-right: auto;
        position: static;
    }
    
    .new-contact-media-wrapper .w-image,
    .new-contact-media-wrapper .w-image-h {
        height: 100%;
    }
    
    .new-contact-media-wrapper .w-image-h img {
        height: 100%;
        width: auto;
        object-fit: cover;
        object-position: top center;
    }
}

@media (min-width: 1025px) {
    .new-contact-column-wrapper .vc_column-inner > .wpb_wrapper {
        grid-template-columns: 1fr 2fr;
        align-items: center;
    }

    .new-contact-media-wrapper,
    .new-contact-text-wrapper {
        grid-row: auto;
        grid-column: auto;
        position: static;
        z-index: auto;
    }

    .new-contact-media-wrapper {
        grid-column: 1;
    }

    .new-contact-text-wrapper {
        grid-column: 2;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 0;
        border-radius: 0;
    }
}

/* Firmencheck Seite Hero */
.new-firmencheck-hero-section {
    /*background: linear-gradient(195deg,rgba(54, 91, 95, 1) 19%, rgba(74, 115, 119, 1) 78%);*/
    background-image: url("/wp-content/uploads/2025/12/Kostenloser-Firmencheck-und-Brand-Audit-Firmencheck-Seite-Portrait-01.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.new-firmencheck-hero-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45); /* ← adjust darkness here */
        z-index: 0;
        pointer-events: none;
}

.new-firmencheck-hero-section > * {
        position: relative;
        z-index: 1; /* keeps content above the overlay */
}

@media (min-width: 1025px) {
    .new-firmencheck-hero-section {
        /*background: linear-gradient(195deg,rgba(54, 91, 95, 1) 19%, rgba(74, 115, 119, 1) 78%);*/
        background-image: url("/wp-content/uploads/2025/12/Kostenloser-Firmencheck-und-Brand-Audit-Firmencheck-Seite-01.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;   
    }
}

.new-firmencheck-media img {
    filter: brightness(0.80);
}

/* MOBILE-FIRST: overlay */
.new-firmencheck-column-wrapper .vc_column-inner > .wpb_wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: end;
}

/* BOTH in same grid cell */
.new-firmencheck-media-wrapper,
.new-firmencheck-text-wrapper {
    grid-row: 1;
    grid-column: 1;
}

/* Text above image */
.new-firmencheck-text-wrapper {
    z-index: 2;
    position: relative;
    /*background: rgba(120, 90, 70, 0.08);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: 10px;
    padding: 0.2rem;*/
    margin-bottom: var(--space-lg);
}

.new-firmencheck-media-wrapper {
    z-index: 1;
}

/* DESKTOP ≥ 1025px: normal layout, remove blur */
@media (min-width: 1025px) {
    .new-firmencheck-column-wrapper .vc_column-inner > .wpb_wrapper {
        grid-template-columns: 2fr 1fr;
        align-items: end;
    }

    .new-firmencheck-media-wrapper,
    .new-firmencheck-text-wrapper {
        grid-row: auto;
        grid-column: auto;
        position: static;
        z-index: auto;
    }

    .new-firmencheck-media-wrapper {
        grid-column: 2;
    }

    .new-firmencheck-text-wrapper {
        grid-column: 1;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 0;
        border-radius: 0;
        margin-bottom: var(--space-xxl);
        margin-top: var(--space-xxl);
    }
}

/* Unser Beitrag Seite Hero */
.new-unser-beitrag-hero-section {
    /*background: linear-gradient(195deg,rgba(54, 91, 95, 1) 19%, rgba(74, 115, 119, 1) 78%);*/
    background-image: url("/wp-content/uploads/2025/11/Shape-our-future-Portrait-Hero-02.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.new-unser-beitrag-hero-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45); /* ← adjust darkness here */
        z-index: 0;
        pointer-events: none;
}

.new-unser-beitrag-hero-section > * {
        position: relative;
        z-index: 1; /* keeps content above the overlay */
}

@media (min-width: 1025px) {
    .new-unser-beitrag-hero-section {
        /*background: linear-gradient(195deg,rgba(54, 91, 95, 1) 19%, rgba(74, 115, 119, 1) 78%);*/
        background-image: url("/wp-content/uploads/2025/11/Shape-our-future-Hero-02.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;   
    }
}

.new-unser-beitrag-media img {
    filter: brightness(0.80);
}

/* MOBILE-FIRST: overlay */
.new-unser-beitrag-column-wrapper .vc_column-inner > .wpb_wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: end;
}

/* BOTH in same grid cell */
.new-unser-beitrag-media-wrapper,
.new-unser-beitrag-text-wrapper {
    grid-row: 1;
    grid-column: 1;
}

/* Text above image */
.new-unser-beitrag-text-wrapper {
    z-index: 2;
    position: relative;
    /*background: rgba(120, 90, 70, 0.08);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: 10px;
    padding: 0.2rem;*/
    margin-bottom: var(--space-lg);
}

.new-unser-beitrag-media-wrapper {
    z-index: 1;
}

.unser-beitrag-footer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* DESKTOP ≥ 1025px: normal layout, remove blur */
@media (min-width: 1025px) {
    .new-unser-beitrag-column-wrapper .vc_column-inner > .wpb_wrapper {
        grid-template-columns: 2fr 1fr;
        align-items: end;
    }

    .new-unser-beitrag-media-wrapper,
    .new-unser-beitrag-text-wrapper {
        grid-row: auto;
        grid-column: auto;
        position: static;
        z-index: auto;
    }

    .new-unser-beitrag-media-wrapper {
        grid-column: 2;
    }

    .new-unser-beitrag-text-wrapper {
        grid-column: 1;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 0;
        border-radius: 0;
        margin-bottom: var(--space-xxl);
        margin-top: var(--space-xxl);
    }
}

/* Single Project CSS */

.project-top-inner-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1025px) {
    .project-top-inner-wrapper {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 2rem;
}
}

.small-project-sub-title {
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-snug);
}

.small-project-content {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
}

.two-column-text {
    column-count: 1;
    column-gap: 2rem;
}

@media (min-width: 1025px) {
    .two-column-text {
        column-count: 2;
    }
}

.styled-list-no-last {
    list-style: disc;
    padding-left: 1.2rem;
    margin: 0;
}

.styled-list-no-last li {
    padding: 0.35rem 0 0.35rem 0;
    border-bottom: 1px solid var(--color-primary, #00c9cf);
    margin-bottom: 0!important;
}

/* Remove line on last item */
.styled-list-no-last li:last-child {
    border-bottom: none;
}

.styled-list-no-last {
    list-style-position: outside;
}

.testimonial-section {
    background: var(--color-angebot-uebersicht);
    padding-top: var(--space-xl);
    padding-bottom: var(--space-lg);
}
.testimonial-grid-item {

}
.testimonial-content {
    color: var(--color-dark-blue, #121c2e);
    font-weight: var(--font-weight-regular);
    font-size: clamp(1.1rem, 0.2176rem + 2.3529vw, 2.1rem);
    font-style: normal;
    line-height: var(--line-height-medium);
    width: 80%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1025px) and (max-width: 1280px) {
    .testimonial-content {
        font-size: clamp(1.1rem, calc(-2.92rem + 0.39vw), 2.1rem);
    }
}
.testimonial-title {
    font-size: var(--font-size-lg);
    font-style: normal;
    color: var(--color-dark-blue, #121c2e);
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-medium);
    text-align: center;
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
}

@media (max-width: 600px) {
    .testimonial-title {
      width: 60%!important;
    }
}

/* 1. Define a stable height context for the carousel */
.si-portfolio-testimonial-carousel {
  display: block!important;
}

/* 2. Make each slide a flex container */
.si-portfolio-testimonial-carousel .owl-stage {
  display: flex!important;
}

.si-portfolio-testimonial-carousel .owl-item {
  display: flex!important;
  align-items: center!important;     /* vertical centering */
  justify-content: center!important; /* horizontal centering */
  margin-top: auto;
  margin-bottom: auto;
}

/* 4. Prevent layout jump during fade transitions */
.si-portfolio-testimonial-carousel .owl-item {
  min-height: 100%;
}


.custom-post-navigation span.nav-button a, .custom-post-navigation span.nav-button  {
	font-size: var(--font-size-base)!important;
	color : var(--color-primary, #00c9cf)!important;
}

.custom-post-navigation span.nav-button .disabled {
	font-size: var(--font-size-base)!important;
}

.custom-post-navigation span.nav-button a:hover {
	font-size: var(--font-size-base)!important;
	color: var(--color-primary, #00c9cf)!important;
}

.custom-post-navigation span i {
	color : var(--color-slate-gray, #353e4e)!important;
}

.custom-post-navigation span.nav-button {
	padding: 1.2rem!important;
}

.custom-post-navigation span.prev {
	margin-left: -12px;
	color : var(--color-slate-gray, #353e4e)!important;
}

.inner-wrapper-two-one {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1025px) {
   .inner-wrapper-two-one {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 2rem;
} 
}

.new-calendly-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1025px) {
    .new-calendly-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.kunden-section {
    background: var(--color-white);
}

.inner-kunden-wrapper {
    padding: 1.5rem;
    background: var(--color-angebot-uebersicht);
}

.kunden-sub-title {
    font-size: var(--font-size-h4);
    color: var(--color-dark-blue, #121c2e);
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-medium);
}

.kunden-type-title {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-accent-dark, #79614d);
    line-height: var(--line-height-medium);
    margin-bottom: var(--space-sm) !important;
}

.kunden-list {
    font-weight: var(--font-weight-light);
    color: var(--color-dark-blue, #121c2e);
    font-size: var(--font-size-h6);
    line-height: var(--line-height-relaxed);
}

.kunden-list ul {
  padding-left: 0;
  margin-left: 0;
  list-style: none;
}

.kunden-list ul li {
  padding-left: 1em;
  position: relative;
  margin-bottom: 0.3rem;
}

.kunden-list ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  font-size: 2.3em;
  line-height: 0; /* Important for alignment */
  top: 0.2em; /* Adjust this value to align properly */
}

.kunden-list ul {
  font-weight: var(--font-weight-light);
  color: var(--color-dark-blue, #121c2e);
  font-size: var(--font-size-list);
  line-height: var(--line-height-list);
}

.testimonial-wrapper {
    display: grid!important;
    grid-template-columns: 1fr;
    gap: 0;
}

@media (min-width: 1025px) {
    .testimonial-wrapper {
        display: grid!important;
        grid-template-columns: 1fr 1fr;
        gap: 0;
}
}

.testimonial-text-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Marketing Slang CSS */

.marketing-slang-intro {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-regular);
    font-family: var(--font-family-primary);
    line-height: var(--line-height-relaxed);
    width: var(--width-md);
}

.marketing-slang-section {
    background: var(--color-white);
}

/* ==================================================
   GLOSSARY – FULL FINAL CSS (FULL WIDTH + TOGGLE)
   ================================================== */

.glossary {
  --g-accent: var(--color-primary, #00c9cf);
}

/* ---------- LETTER (A, B, C…) ---------- */
.glossary .toggle-btn.title {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;

  /* KEEP TOP MARGIN EXACTLY AS YOU HAD IT */
  margin-top: 0rem;
  margin-bottom: 0;

  color: var(--color-accent-dark);
  font-weight: var(--font-weight-extrabold);
  font-size: clamp(1.19rem, 0.8018rem + 1.0353vw, 1.63rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1;

  transition: margin-bottom 0.25s ease;
}

/* OPEN STATE — add bottom spacing ONLY when open */
.glossary--toggle .glossary-group.is-open > .toggle-btn.title {
  margin-bottom: 1rem;
}

/* ---------- LETTER GROUP + BORDER (between letters only) ---------- */
.glossary-group {
  padding-bottom: 1.6rem;
  margin-bottom: 2rem;
  /*border-bottom: 1px solid var(--g-accent);*/
  background: var(--color-angebot-uebersicht);
  padding: 1.5rem;
  width: var(--width-lgp);
}

@media (max-width: 600px) {
  .glossary-group {
    margin-bottom: 1rem;
}
}

/* Remove top margin only for the very first glossary letter */
.glossary > .glossary-group:first-child .toggle-btn.title{
  margin-top: 0;
}

.glossary .toggle-btn.title:hover,
.glossary .toggle-btn.title:active,
.glossary .toggle-btn.title:focus,
.glossary .toggle-btn.title:focus-visible{
  background: transparent !important;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent; /* mobile */
}

.glossary-group.is-last {
  border-bottom: 0;
  /*margin-bottom: 0;*/
  /*padding-bottom: 0;*/
}

/* ---------- LIST RESET ---------- */
.glossary .content { margin: 0; padding: 0; }
.glossary .content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* keep glossary structure clean */
.glossary > .glossary-group > .content > ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* restore bullets for content inside glossary entries */
.glossary .glossary-full ul{
  list-style: disc;
  margin: 0 0 0.75rem 1.25rem;
  padding: 0;
}

.glossary .glossary-full li{
  margin-bottom: 0.35rem;
}

/* ---------- ITEM ---------- */
.glossary .content li {
  margin: 0 0 0.4rem;
  padding: 0;
}

.glossary p {
  /*margin: 0.8rem 0;*/
  margin-top: 0;
  margin-bottom: 0.8rem;
  margin-left: 0;
  margin-right: 0;
}

/* Add extra space ONLY between glossary items, not after the last one */
.glossary .glossary-item:not(:last-child){
  margin-bottom: 2rem; /* adjust value as needed */
}

/* ---------- TITLE ---------- */
.glossary .blocktitel-bold {
  display: block;
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-snug);
  margin: 0 0 0.35rem;
  font-size: var(--font-size-h6);
}

/* ---------- TEXT (FULL WIDTH, NO MAX-WIDTH) ---------- */
.glossary .lauftext-klein-regular {
  margin: 0;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  font-size: var(--font-size-lg);
  max-width: none;
}

/* ---------- PREVIEW / FULL TOGGLE (reliable) ---------- */
.glossary .glossary-preview { display: inline; }
.glossary .glossary-full { display: none; }              /* hide full text by default */
.glossary .glossary-item.is-expanded .glossary-preview { display: none; }
.glossary .glossary-item.is-expanded .glossary-full { 
  display: inline;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

/* ---------- REVEAL BUTTON ---------- */
.glossary button.arrow-link {
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 0.65rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--g-accent);
  font: inherit;
  font-size: 0.9em;
  line-height: 1;
}
.glossary button.arrow-link::after{
  content: none;
}
.glossary button.arrow-link:hover{
  opacity: 0.85;
}

/* === REQUIRED CSS FOR GLOSSARY GROUP TOGGLE === */
/* === ARROW RIGHT · ROTATE 90° ON OPEN (IN PLACE) === */

.glossary--toggle .toggle-btn.title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*padding: 1.25rem 1.5rem;*/
  text-align: left;
}

.glossary--toggle .toggle-btn.title::before {
  content: none !important;
}

/* arrow default (points right) */
.glossary--toggle .toggle-btn.title::after {
  content: "";
  width: 2.5rem;
  height: 1.25rem;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24' fill='none'%3E%3Cline x1='4' y1='12' x2='40' y2='12' stroke='%2379614d' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpolyline points='30 4 42 12 30 20' fill='none' stroke='%2379614d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  flex-shrink: 0;

  /* KEY PART */
  transform-origin: 50% 50%;
  transform: rotate(0deg);
  transition: transform .35s cubic-bezier(0.4,0,0.2,1);
}

/* SMALLER arrow on smartphones (≤600px) */
@media (max-width: 600px) {
  .glossary--toggle .toggle-btn.title::after{
    width: 1.9rem;
    height: 0.95rem;
  }
}

/* OPEN STATE → rotate arrow 90° */
.glossary--toggle .glossary-group.is-open .toggle-btn.title::after{
  transform: rotate(90deg);
}


/* FAQ CSS */
/* =========================================================
   FAQ / Accordion styling (matches screenshot)
   Scope: .w-tabs.my_process.my_company_check.accordion
   ========================================================= */

.w-tabs.my_process.my_company_check.accordion{
  --faq-border: var(--color-primary, #00c9cf);
  --faq-text: var(--color-content-text, #121c2e);
  --faq-bg: transparent;
  --faq-radius: 3em;
  --faq-pad-y: 1.05rem;
  --faq-pad-x: 1.35rem;
}

/* remove default theme spacing if any */
.w-tabs.my_process.my_company_check.accordion .w-tabs-sections {
  gap: 0;
}

/* each row box */
.w-tabs.my_process.my_company_check.accordion .w-tabs-section {
  margin: 0 0 0.9rem 0;
  border: 0;
  background: var(--faq-bg);
  border-radius: var(--faq-radius);
  overflow: hidden;
}

/* header button */
.w-tabs.my_process.my_company_check.accordion .w-tabs-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--faq-pad-y) var(--faq-pad-x);
  background: var(--color-angebot-uebersicht);
  border: 0;
  cursor: pointer;
  color: var(--faq-text);
  text-align: left;
}

/* title */
.w-tabs.my_process.my_company_check.accordion .w-tabs-section-title {
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  font-size: var(--font-size-h5);
}

/* kill built-in triangle/icon styling and use our arrow */
.w-tabs.my_process.my_company_check.accordion .w-tabs-section-header.icon_triangle::before,
.w-tabs.my_process.my_company_check.accordion .w-tabs-section-header.icon_triangle::after{
  content: none !important;
}

/* right control area (arrow container) */
.w-tabs.my_process.my_company_check.accordion .w-tabs-section-control{
  position: relative;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
}

/* arrow (collapsed = →) */
.w-tabs.my_process.my_company_check.accordion .w-tabs-section-control::before{
  content: "→";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--faq-text);
  transform-origin: 50% 50%;
  transition: transform 180ms ease;
}

/* arrow (expanded = ↓) via rotation */
.w-tabs.my_process.my_company_check.accordion
.w-tabs-section-header[aria-expanded="true"] .w-tabs-section-control::before{
  transform: rotate(90deg);
}

/* content area */
.w-tabs.my_process.my_company_check.accordion .w-tabs-section-content{
  padding: 0 var(--faq-pad-x) var(--faq-pad-y);
  border-top: 0;
}

/* paragraph spacing inside */
.w-tabs.my_process.my_company_check.accordion .w-tabs-section-content p{
  margin: 0;
  font-weight: var(--font-weight-regular);
  line-height: Var(--line-height-relaxed);
  font-size: var(--font-size-lg);
}

/* optional: tighter last row spacing */
.w-tabs.my_process.my_company_check.accordion .w-tabs-section:last-child{
  margin-bottom: 0;
}

/* Only round the summary part */

/* the grid itself will then fill only the wrapper’s width */
.angebot-accordion .eg-accordion {
  width: 100%;
}

.eg-accordion .eg-item {
    background: transparent!important;
    background: unset!important;
}

.angebot-accordion .faq-inner-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start; /* Left-aligned (default) */
  /* align-items: center; */ /* Centered */
  /* align-items: flex-end; */ /* Right-aligned */
}

/* ---- BUTTON (summary) ---- */
/* pill only on the button; arrow is inside the button’s padding */
.angebot-accordion .eg-summary {
  display: flex;                          /* put title and arrow in a row */
  justify-content: space-between;         /* title left, arrow right */
  align-items: center;
  padding: 0.45rem 1.3rem !important;     /* your exact padding */
  border-radius: 9999px;                  /* pill */
  border: 0;
  font-size: var(--font-size-h5);
  line-height: var(--line-height-medium);
  color: var(--color-white, #ffffff);
  background: var(--color-primary);
  transition: background 0.3s ease;
}

.angebot-accordion .eg-summary:hover {
  background: var(--color-primary-dark)!important;
}

/* arrow box lives INSIDE the button’s padding */
.angebot-accordion .eg-summary .eg-acc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.75rem;   /* gap between title and arrow */
}
.angebot-accordion .icon-arrow .eg-summary .eg-acc-icon i {
  font-size: 1.4em;       /* make arrow bigger if you want */
  line-height: 1;
}

/* ---- PANEL (content) ---- */
/* no border, no radius, just plain content below the pill */
.angebot-accordion .eg-panel {
  border: 0;
  border-radius: 0;
  background: transparent; /* optional, keep your page bg */
}

.angebot-accordion .eg-panel p {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
}

/* if you’re using multi-column content, apply it to the inner wrapper */
.angebot-accordion .eg-panel-inner {
  column-count: 1;
  column-fill: balance;
}

/* optional: remove any outer borders/radius that might clip the pill ends */
.angebot-accordion .eg-item { border: 0; border-radius: 0; overflow: visible; }

/* faq subtitle */

.faq-subtitle {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-dark-blue);
    line-height: var(--line-height-snug);
}

/* end of faq subtitle */

/* End of Ablauf FAQ (Accordion) */

/* General image grid darker */
.news-grid-start .w-grid-item img,
.si-random-grid .si-random-item img,
.projekt-grid .w-grid-item img {
  transition: filter 0.3s ease;
}

.news-grid-start .w-grid-item:hover img,
.si-random-grid .si-random-item:hover img,
.projekt-grid .w-grid-item:hover img {
  filter: brightness(0.75);
}

/* Single Blog CSS */

.single-blog-section {
    padding-top: var(--space-md);
    padding-bottom: var(--space-xxl);
}

.single-blog-main-wrapper .vc_column-inner > .wpb_wrapper {
	display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;	
}

@media (min-width: 1025px) {
    .single-blog-main-wrapper .vc_column-inner > .wpb_wrapper {
        grid-template-columns: 4fr 1fr;
    }
}

.single-blog-inner-wrapper {
    display: flex;
}

.single-blog-side-wrapper {
    display: flex;
}

.single-blog-inner-wrapper .w-gallery.wp_gallery.ratio_1x1 .w-gallery-item {
    aspect-ratio: auto !important;
}

h1.single-blog-main-title {
    color: var(--color-dark-blue, #121c2e);
    font-weight: var(--font-weight-extrabold);
    font-size: var(--font-size-h3-mobile-title);
    font-style: normal;
    line-height: var(--line-height-snug);
}

.single-blog-intro-text {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-regular);
    font-family: "merriweather", serif;
    line-height: var(--line-height-relaxed);
    font-style: italic;
}

.single-blog-content {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
}

.single-blog-content a {
    color: var(--color-accent-dark);
}

.single-blog-content a:hover {
    color: var(--color-primary-dark);
}

.single-blog-inner-wrapper blockquote {
  font-family: "merriweather", serif;
  font-weight: 400;
  font-style: italic;
  font-size: var(--font-size-h6);
  padding: 0;
  color: var(--color-accent-dark);
  line-height: var(--line-height-relaxed);
}

.single-blog-content .wp-caption {
    width: 100% !important;
    max-width: 100%;
}

.single-blog-content .wp-caption img,
.single-blog-content img {
    width: 100%;
    height: auto;
    margin-top: 0.8rem;
    margin-bottom: 0.4rem;
}

.single-blog-inner-wrapper blockquote::before {
  display: none!important;
}

.single-blog-inner-wrapper blockquote::before,
.single-blog-inner-wrapper blockquote::after {
  display: none!important;
  content: none!important;
}

.single-blog-inner-wrapper blockquote {
  quotes: none!important;
}

.single-blog-inner-wrapper ul {
    margin-left: 1.5rem!important;
}

.single-blog-inner-wrapper h2,
.single-blog-inner-wrapper h3 {
    color: var(--color-dark-blue, #121c2e);
    font-weight: var(--font-weight-extrabold);
    font-size: var(--font-size-h4);
    font-style: normal;
    line-height: var(--line-height-relaxed);
}

.single-blog-inner-wrapper em {
    font-style: italic;
    color: var(--color-dark-blue, #121c2e);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-base);
    line-height: var(--line-height-medium);
}

.single-blog-content em.bildlegende {
  margin-bottom: 1.5rem;
  display: inline-block;
}

.single-blog-inner-wrapper a.blog-additional {
  margin-bottom: 1.5rem;
}

.single-blog-inner-wrapper .si-duo-gallery {
  margin-bottom: 1.5rem;
}

/* Alle projekte Grid load more Button css */

.g-loadmore .w-btn:before {
  all: unset;
}

.g-loadmore .w-btn.us-btn-style_1 {
  color: #121c2e!important;
  background: transparent!important;
  border: 2px solid #00c9cf!important;
  display: inline-flex!important;
  align-items: center!important;
  justify-content: center!important;
  padding: 0 1.2rem!important;
  min-height: 2.5rem!important;
  font-family: Montserrat, sans-serif!important;
  font-size: clamp(0.81rem, 0.7rem + 0.3vw, 1.13rem)!important;
  line-height: 1!important;
  text-decoration: none!important;
  transform: skewX(-16deg)!important;
  transition: 0.25s ease!important;
  margin-top: 1.2rem;
}

/* Un-skew the text */
.g-loadmore .w-btn.us-btn-style_1 .w-btn-label {
  display: inline-block!important;
  transform: skewX(16deg)!important;
}

/* Hover state */
.g-loadmore .w-btn.us-btn-style_1:hover {
  background: transparent!important;
  color: #00c9cf!important;
  border: 2px solid #121c2e!important;
}

/* Logo Carousel */
/* Grid container centering */
.layout_110 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.layout_110 .w-grid-list {
    width: 100%;
}

/* Equal width containers */
.layout_110 .owl-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.layout_110 .w-grid-item {
    width: 100%;
}

.layout_110 .w-grid-item-h {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 100%;
}

/* Fixed size logo container */
.layout_110 .my_logos {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 40px;
    overflow: visible;
}

/* Logo sizing */
.layout_110 .my_logos img {
    width: auto !important;
    height: auto !important;
    max-width: 180px !important;
    max-height: 40px !important;
    object-fit: contain;
}

/* Tablet and mobile adjustments */
@media (max-width: 1025px) {
    .layout_110 .owl-stage {
        display: flex;
        align-items: center;
    }
    
    .layout_110 .my_logos {
        width: 120px;
        height: 30px;
    }
    
    .layout_110 .my_logos img {
        max-width: 120px !important;
        max-height: 30px;
    }
    
    .layout_110 .w-grid-item-h {
        height: 30px;
    }
}

@media (max-width: 600px) {
    .mobile-version .layout_110 .owl-stage {
        display: flex;
        align-items: center;
    }
    
    .mobile-version .layout_110 .my_logos {
        width: 160px;
        height: auto;
    }
    
    .mobile-version .layout_110 .my_logos img {
        max-width: 180px !important;
        max-height: unset !important;
    }
}

/* Aktuelles CSS */
.aktuelles-section {
    padding-top: calc(var(--space-xl) / 2);
    padding-bottom: calc(var(--space-xxl) * 80 / 100);
}

/* Legal pages css */
.legal-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 1024px) {
.legal-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem;
}
}

.legal-wrapper {
  font-size: var(--font-size-lg)!important;
  line-height: var(--line-height-relaxed)!important;
  font-weight: var(--font-weight-regular)!important;
}

.legal-wrapper p {
  margin-bottom: 0.5rem!important;
}

.legal-wrapper ul {
  margin-left: 0.5rem!important;
}

.legal-wrapper .legal-heading,
.legal-wrapper .legal-heading-first {
  font-size: var(--font-size-h5)!important;
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-medium)!important;
  display: block;
  padding-top: 2rem;
}

.legal-wrapper .legal-heading-small,
.legal-wrapper .legal-heading-smaller {
  font-size: var(--font-size-h6)!important;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-medium)!important;
  display: block;
  padding-top: 2rem;
}

.legal-heading-first-text {
  font-size: var(--font-size-h5)!important;
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-medium)!important;
  display: block;
  padding-top: 0rem;
}

.legal-wrapper .legal-heading-small-first-text,
.legal-wrapper .legal-heading-smaller-first-text {
    font-size: var(--font-size-h6)!important;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-medium)!important;
    display: block!important;
    padding-top: 0rem!important;
}
/* End of Legal pages css */

/* Team Grid */
.team-grid .w-grid-list {
    gap: 2rem!important;
}

.suchresultat-item {
	background: var(--color-angebot-uebersicht) !important;
  padding: var(--space-sm);
}

.suchresultat-title {
  font-size: var(--font-size-h6)!important;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-medium)!important;
  color: var(--color-accent-dark);
}

.suchresultat-content {
  font-size: var(--font-size-lg)!important;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed)!important;
  color: var(--color-dark-blue);
}

.post-inner-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem; /* adjust if needed */
}

/* Tablet ≥ 601px up to 1024px */
@media (min-width: 601px) and (max-width: 1024px) {
    .post-inner-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop ≥ 1025px */
@media (min-width: 1025px) {
    .post-inner-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Project Slider Size 70% */
.project-slider {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1024px) {
  .project-slider {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}
}

.project-galleries-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .project-galleries-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
}

.project-galleries-wrapper-three-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .project-galleries-wrapper-three-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
}
}

/* Banner grid – mobile first */
.banner-wrapper {
  display: grid;
  grid-template-columns: max-content; /* shrink to banner width */
  gap: 2rem;                          /* EXACT 2rem gap */
  justify-content: center;            /* center the whole grid */
  justify-items: center;              /* center banners inside cells */
}

/* ≥600px: 2 banners per row */
@media (min-width: 600px) {
  .banner-wrapper {
    grid-template-columns: repeat(2, max-content);
  }
}

/* ≥1024px: 3 banners per row */
@media (min-width: 1024px) {
  .banner-wrapper {
    grid-template-columns: repeat(3, max-content);
  }
}