/* ===== XD-INHALT CSS - Redesign Override ===== */
/* Must override: style.css, area_standardseite_redesign.css, custom.css */

html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; display: block; }

body { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 300; color: #000000; line-height: 1.5; }   
@media (max-width: 768px) {
    body { font-size: 18px; }   
}


/* ===== HEADER - keine dunklen Hintergründe ===== */
header[data-item-id],
header[data-item-id="772"] {
    background: linear-gradient(90deg, #A6F6DD 0%, #01A6B5 100% ) !important;
    background-color: transparent !important;
    background-image: linear-gradient(90deg, #A6F6DD 0%, #01A6B5 100% ) !important;
    padding: 0 20px !important;
    position: relative;
    z-index: 100;
    height: 189px;
}
header[data-item-id] .span100,
header[data-item-id="772"] .span100 {
    max-width: /* 1280px;  1920px; */ 1840px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* height: 70px; */
    padding: 0;
}



.logo {
    float: none;
    width: 290px;
    margin: 40px 0 10px 0;
}


@media (max-width: 500px) {
.logo {
    width: 190px;
    margin: 24px 0 10px 0;
}
}



header .logo img {
    /* height: 40px; */
    width: auto;
}

header .clear {
    display: none;
}

/* Nav-Links schwarz, kein dunkler Hintergrund */



.mainnav {
    -ms-transform:none;
    -webkit-transform: none;
    transform: none;
    float: none;
    margin-left: auto;
    padding: 0;
    background: transparent !important;
}

header .mainnav ul,
header nav.mainnav ul,
header nav.mainnav {
    background: transparent !important;
    background-color: transparent !important;
}
header .mainnav ul li a,
header nav.mainnav ul li a,
header .mainnav > ul > li > a {
    color: #000000 !important;
    background: transparent !important;
    background-color: transparent !important;
    font-size: 24px;
    text-transform:none;
    padding: 8px 14px;
    display: block;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s;
    text-shadow: none;
    -ms-transform: none;
    -webkit-transform: none;
    transform: none;
}
header .mainnav ul li a:hover,
header .mainnav ul li.active > a {
    /* border-bottom-color: #000000; */
}
header .mainnav ul li {
    border-top: 2px solid transparent;
}
header .mainnav ul li:hover {
    border-top: 2px solid #232D32;
}

header .mainnav ul li.active {
    border-top: 2px solid #000000;
}

/* Subnav */
header .subnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #1a1a1a !important;
    min-width: 200px;
    width: 100%;
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    z-index: 200;
    padding: 0;
    margin: 0;
}
header .mainnav ul li {
    position: relative;
}
header .mainnav ul li:hover .subnav {
    display: block;
}
header .subnav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}
header .subnav ul li {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
}
header .subnav ul li a,
header nav.mainnav .subnav ul li a,
header .mainnav .subnav ul li a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    color: #cccccc !important;
    background: transparent !important;
    font-size: 20px;
    padding: 10px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
header .subnav ul li a:hover,
header nav.mainnav .subnav ul li a:hover,
header .mainnav .subnav ul li a:hover {
    background: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
}
header .subnav ul li.active a {
    color: #FFFFFF !important;
    font-weight: 600;
}

/* Hamburger */
header .menuicon {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: /* 8px; */ 0;
    top:auto
}
header .menuicon .line {
    width: 24px;
    height: 2px;
    background: #000000 !important;
    border-radius: 2px;
}

/* ===== INTRO SECTION ===== */
/* Override inline background-image AND any skew transforms */
section#intro[data-item-id],
section#intro,
#intro {
    background-image: linear-gradient(90deg, #A6F6DD 0%, #01A6B5 100% ) !important;
    background-color: transparent !important;
    transform: none !important;
    -webkit-transform: none !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 320px;
    display: flex;
    align-items: flex-start;
    position: relative;
    overflow: visible;
}
section#intro::before,
section#intro::after {
    display: none !important;
    content: none !important;
}
#intro .width1280,
section#intro .width1280 {
    max-width: /* 1280px; */ 1840px;
    margin: 0 auto;
    width: 100%;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    flex-wrap: nowrap;
    justify-content:space-between;
}

/* Linke Seite: weisser Text auf Gradient */
#intro .left,
section#intro .left {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    flex: 0 0 50% !important;
    width: 50% !important;
    float: none !important;
    display: flex !important;
    align-items: center;
    align-self: stretch;
    padding: 40px 20px 40px 0;
    transform: none !important;
    -webkit-transform: none !important;
}
section#intro .left h1 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(28px, 3.5vw, 60px);
    color: #000000 !important;
    line-height: 1.3;
    text-shadow: none;
}

/* Rechte Box: dunkler Hintergrund, kein skew */
/* Style.css Base: position: absolute; right: 15px; width: 60% */
/* Style.css @media <=1200px: left: 100px; right: 100px; top: 100px */
#intro .right,
section#intro .right,
section#intro > .width1280 > .right,
div.right {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    flex: 0 0 50% !important;
    width: 840px !important;
    min-width: 300px !important;
    max-width: 840px !important;
    float: none !important;
    background: #232D32 !important;
    background-color: #232D32 !important;
    padding: 50px 80px !important;
    transform: none !important;
    -webkit-transform: none !important;
    -webkit-skewX: 0 !important;
    border-radius: 0;
    z-index: 1;
    order: 2;
    align-self: flex-start;
}


section#intro .left {
    order: 1;
}
section#intro .right .table_container {
    transform: none !important;
    -webkit-transform: none !important;
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    display:block;
}
section#intro .right .textcenter {
    transform: none !important;
    -webkit-transform: none !important;
    padding: 0;
    display: block;
    vertical-align:auto;

}
section#intro .right .textcenter p {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 1.5;
    margin-bottom: 12px;
    transform: none !important;
}
section#intro .right .textcenter .rot,
section#intro .right .textcenter p.rot {
    color: #FFFFFF !important;
    font-family:'Optician Sans', 'Inter', sans-serif;
    font-size: 36px;
    letter-spacing: normal;
    text-transform: uppercase;
    margin-bottom: 20px;
    line-height: 0.95;
}

/* ===== HIDE OLD HERO/STATS/CTA SECTIONS ===== */
.stawin-dl,
.stawin-dl .hero,
.stawin-dl .stats-bar,
.stawin-dl .section,
.stawin-dl .pikett-section,
.stawin-dl .vertrag-section,
.stawin-dl .cta-banner,
div.stawin-dl {
    /* display: none !important;*/
}

/* ===== MAIN CONTENT ===== */
main {
    padding: 0;
}
section#standard {
    padding: 80px 40px;
}
section#standard > .width890 {
    max-width: /* 890px; */ 1280px;
    width: 100%;
    display: block;
    margin: 0 auto;
}
section#standard .span100 {
    width: 100%;
}
section#standard > .width890 > .span100 > h1 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 700;
    color: #0f2540 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.3;
    margin-bottom: 32px;
}

/* Content text */
section#standard .content-text h2 {
    font-size: 20px;
    font-weight: 700;
    color: #0f2540;
    margin: 32px 0 12px;
}

h2  {
    margin: 1em 0 1em 0;
    font-size: 60px;
    line-height:1.2em;
    color: #000000;
    font-style: normal;
    font-family:'Optician Sans', sans-serif;
}

section#standard .content-text p {
    font-size: 15px;
    color: #4a5568;
    line-height: 1.8;
    margin-bottom: 16px;
}
section#standard .content-text strong {
    color: #0f2540;
    font-weight: 700;
}

/* ===== ACCORDION ===== */
.accordion-item {
    margin-bottom: 4px;
}
.accordion-item .accordion-title {
    background: #f0f2f5;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 500;
    color: #0f2540;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
    transition: background 0.2s;
    user-select: none;
}
.accordion-item .accordion-title:hover {
    background: #e2eaf4;
}
.accordion-item .accordion-title .arrow {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #0f2540;
    transition: transform 0.3s;
}
.accordion-item.open .accordion-title .arrow {
    transform: rotate(180deg);
}
.accordion-item .accordion-content {
    display: none;
    padding: 20px 24px;
    background: #ffffff;
    border: 1px solid #dde3ea;
    border-top: none;
    border-radius: 0 0 4px 4px;
    font-size: 14px;
    color: #4a5568;
    line-height: 1.75;
}
.accordion-item.open .accordion-content {
    display: block;
}

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

@media (max-width: 2000px) {
    section#intro .left,
    section#intro > .width1280 > .left {
        padding: 40px 24px;
    }    
}

@media (max-width: 1200px) {
    header[data-item-id] { height: auto; }
    header[data-item-id] .span100 { /* height: 60px; */ }
    header .mainnav {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: #000000;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        z-index: 150;
        padding: 16px 0;
    }
    header .mainnav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    header .mainnav ul li {
        border-top: 1px solid #000000;
    }

    header .mainnav ul li a,
    header nav.mainnav ul li a,
    header .mainnav > ul > li > a {
        display: block;
        padding: 12px 24px;
        color: #ffffff !important;
        background: #000000 !important;
        font-size: 24px;
        border-bottom: 1px solid rgba(255,255,255,0.15);
    }
    header .subnav {
        display: block !important;
        position: relative !important;
        background: #1a1a1a !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        min-width: 0 !important;
        padding: 0 !important;
    }
    header .subnav ul {
        padding: 0;
        margin: 0;
        width: 100%;
    }
    header .subnav ul li {
        list-style: none;
        width: 100%;
    }
    header .subnav ul li a,
    header nav.mainnav .subnav ul li a,
    header .mainnav .subnav ul li a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        color: #FFFFFF !important;
        background: #232D32 !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding: 10px;
    }
    header .menuicon { display: flex; }
    section#intro {
        min-height: auto;
    }
    section#intro .width1280 {
        flex-direction: column !important;
    }
    section#intro .left,
    section#intro .right,
    section#intro > .width1280 > .left,
    section#intro > .width1280 > .right {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    section#intro .left,
    section#intro > .width1280 > .left {
        padding: 40px 24px;
        order: 1;
        display: block !important;
    }
    section#intro .right,
    section#intro > .width1280 > .right {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        padding: 32px 24px;
        order: 2;
        align-self: auto;
    }
    section#standard { padding: 48px 24px; }
    h2  {font-size: 40px;} 
}

/* ===== PRODUKTE PAGE ===== */
/* Override style.css base ul display:inline-block */
ul#produkte {
    padding: 0 !important;
    list-style: none;
}

.produkte-title {
    font-family: 'Optician Sans', 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #0f2540;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 36px;
}

/* ===== COLLAPSE ACCORDION ===== */
/* Override style.css .collapse_2 base rules */
.collapse_2 {
    margin: 0 0 40px 0;
    padding: 0;
    position: static;
}
.collapse_2 .row_2 {
    margin-bottom: 10px;
    border-bottom: none;
    position: relative;
    border-radius: 0;
    overflow: hidden;
}
/* Match style.css specificity: .collapse_2 .row_2 .titel_2 = (0,3,0) */
.collapse_2 .row_2 .titel_2 {
    background: #DADEE2;
    padding: 8px 24px;
    font-size: 30px;
    font-style: normal;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0;
    transition: background 0.2s;
    user-select: none;
}
.collapse_2 .row_2 .titel_2:hover {
    background: #c8cdd2;
}
.collapse_2 .row_2 .arrow {
    position: static;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 20px solid #000000;
    transition: transform 0.3s;
}
.collapse_2 .row_2.open > .titel_2 .arrow,
.collapse_2 .row_2.active > .titel_2 .arrow {
    transform: rotate(180deg);
}
/* Reset parent-inherited rotation on nested produktcollapse arrows (only when their own row is NOT active) */
.collapse_2 .row_2.active .collapse.produktcollapse .row:not(.active) .arrow,
.collapse_2 .row_2.open .collapse.produktcollapse .row:not(.active) .arrow,
ul#produkte li.aktiv .collapse.produktcollapse .row:not(.active) .arrow {
    transform: rotateX(180deg) !important;
    -webkit-transform: rotateX(180deg) !important;
}
.collapse_2 .row_2 .content_2 {
    padding: 20px 24px;
    background: #ffffff;
    border: 1px solid #dde3ea;
    border-top: none;
    border-radius: 0;
    display: none;
    position: static;
}
.collapse_2 .row_2.open .content_2 {
    display: block;
}



@media (max-width: 768px) {
    .collapse_2 .row_2 .titel_2 {font-size: 24px;}
}



/* ===== OVERRIDE .produkte-titel-zusatztext from style.css ===== */
.produkte-titel-zusatztext {
    margin: 15px 10px;
    padding: 10px;
    border: 1px solid #d6d8db;
    background-color: #e2e3e5;
    color: #383d41;
    border-radius: .25rem;
}
.produkte-titel-zusatztext p {
    margin: 0;
}



.produkte h1 {
    font-family: 'Optician Sans', 'Inter', sans-serif;
    font-size: 60px;
    color: #000000;
    margin-bottom: 16px;
    margin-top: 60px;
}

@media (max-width: 768px) {
.produkte h1    {
    font-size: 40px;
    line-height: 1.0em;}
}


/* ===== PRODUKTE SECTION LAYOUT ===== */
#produkte_section {
    padding: 0 40px 80px;
}
#produkte_section .width1280 {
    max-width: 1280px;
    margin: 0 auto;
}
#produkte_section .span100 {
    width: 100%;
}

/* ===== PRODUKT GRID ===== */

ul#produkte.produkte-grid > li {
    background: #f0f2f5;
    border: 1px solid transparent;
    width: calc(25% - 30px) !important;
    margin: 0 40px 40px 0;
}
ul#produkte.produkte-grid > li:nth-child(4n) {
    margin-right: 0;
}
ul#produkte.produkte-grid > li:hover {
    background: #ffffff;
    border-color: #dde3ea;
}
ul#produkte.produkte-grid > li.aktiv {
    background: #DADEE2;
    border-color: transparent;
}
@media only screen and (max-width: 1100px) {
    ul#produkte.produkte-grid > li {
        width: calc(50% - 20px) !important;
        margin-right: 40px;
    }
    ul#produkte.produkte-grid > li:nth-child(4n) {
        margin-right: 40px;
    }
    ul#produkte.produkte-grid > li:nth-child(2n) {
        margin-right: 0;
    }
}
@media only screen and (max-width: 767px) {
    ul#produkte.produkte-grid > li {
        width: 100% !important;
        margin-right: 0;
    }
}

/* ===== PRODUKT DETAIL POPUP ===== */
/* Keep original style.css mechanism untouched: */
/* - position: absolute; height: 0; overflow: hidden */
/* - JS (grid.js) sets inline height on li.aktiv + produktinhalt_holder */
/* - transition: 600ms animates the expansion */


ul#produkte li .link { font-size: 24px; }

@media (max-width: 768px) {
ul#produkte li .link { font-size: 20px; }
}



ul#produkte li .link .arrow {
    border-color: transparent transparent #DADEE2 transparent;
}

ul#produkte li .produktinhalt_holder {
    background: #DADEE2;
}

/* Override style.css ul#produkte li .produktinhalt (0,1,2) */
ul#produkte li .produktinhalt {
    padding: 40px 0;
}
ul#produkte li .produktinhalt .width1280 {
    padding: 0 15px;
    max-width: 1280px;
    margin: 0 auto;
}
ul#produkte li .produktinhalt .span33 {
    float: left;
    width: 33%;
    padding-right: 30px;
}
ul#produkte li .produktinhalt .span66 {
    float: left;
    width: 67%;
}

/* Override style.css ul#produkte li .produktinhalt .icon (0,1,3) */
ul#produkte li .produktinhalt .icon {
    padding: 0 60px 0 0 !important;
    margin-bottom: 20px;
}
ul#produkte li .produktinhalt .icon img {
    width: 100% !important;
    height: auto;
}

/* Override style.css ul#produkte li .close (0,1,2) */
ul#produkte li .close {
    position: absolute !important;
    right: 20px !important;
    top: 20px !important;
    left: auto;
    cursor: pointer;
    font-size: 1.5em !important;
    font-weight: 400;
    color: #404040;
    z-index: 10;
}
ul#produkte li .close:hover {
    color: #000000;
}

/* Produktinhalt description */
ul#produkte .produktinhalt-description h2 {
    font-family:'Inter', sans-serif;
    font-size: 30px;
    color: #000000;
    margin-bottom: 16px;
}
ul#produkte .produktinhalt-description h3 {
    color: #000000;
    margin: 24px 0 12px;
}
ul#produkte .produktinhalt-description ul {
    margin-bottom: 16px;
}
ul#produkte .produktinhalt-description ul li {
    color: #000000;
    padding: 3px 0 3px 16px;
    position: relative;
    list-style: none;
}
ul#produkte .produktinhalt-description ul li.pdf, ul#produkte .produktinhalt-description ul li.word, ul#produkte .produktinhalt-description ul li.excel {
    padding-left: 40px;
}
ul#produkte .produktinhalt-description ul li::before {
    content: '\2013';
    position: absolute;
    left: 0;
}
ul#produkte .produktinhalt-description p {
    margin-bottom: 12px;
}
ul#produkte .produktinhalt-description a {}
ul#produkte .produktinhalt-description a:hover {
    text-decoration: underline;
}

/* ===== PRODUKT COLLAPSE (inside popup) ===== */
/* Match style.css .collapse.produktcollapse .row .titel (0,3,0) */
.collapse.produktcollapse {
    margin: 0;
    padding: 0;
    border-radius: 0;
    overflow: hidden;
}
.collapse.produktcollapse .row {
    border-bottom: none;
    position: relative;
    margin-bottom: 10px;
}
.collapse.produktcollapse .row:last-child {
    border-bottom: none;
}
.collapse.produktcollapse .row .titel {
    background: #ffffff;
    padding: 6px 16px;
    cursor: pointer;
    font-weight: 400;
    color: #000000;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.collapse.produktcollapse .row .titel:hover {
    background: #f0f0f0;
}
.collapse.produktcollapse .row .arrow {
    position: absolute;
    right: 16px;
    top: calc(50% - 5px);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 16px 20px 16px;
    border-color: transparent transparent #000000 transparent;
    transition: transform 0.3s;
}
.collapse.produktcollapse .row.active .arrow,
.collapse.produktcollapse .row.open .arrow {
    transform: rotateX(0deg);
}
.collapse.produktcollapse .row .content {
    padding: 20px 0;
    display: none;
    transition: 0ms;
}


@media (max-width: 768px) {
    .collapse.produktcollapse .row .titel {font-size: 20px;padding-right: 60px;}
}






/* Download list */
ul.download {
    padding: 0;
}
ul.download li {
    list-style: none;
    position: relative;
    margin: 0 0 20px 0;
    padding: 8px 0 0 40px;
}
ul.download img {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 30px;
}

/* BIM Button */
.buttonbim {
    display: inline-block;
    background: #4ab8d4;
    color: #ffffff;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
}
.buttonbim:hover {
    background: #1A3A5C;
}

/* Hero Banner (hidden) */
.hero-banner {
    display: none;
}

/* ===== HERO GRADIENT (Startseite) ===== */
.hero-gradient {
    padding: 48px 40px 0;
    position: relative;
}
.hero-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 84px;
    background: linear-gradient(90deg, #A6F6DD 0%, #01A6B5 100%);
    z-index: 0;
}
.hero-content {
    max-width: 1840px /*1280px*/;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.hero-text {
    font-size: 40px;
    font-weight: 300;
    color: #000000;
    line-height: 1.4;
    margin-bottom: 40px;
}

/* ===== SERVICE ITEMS (Startseite) ===== */
.service-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.service-item {
    display: flex;
    flex-direction: column;
}
.service-card {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.3s;
    flex: 1;
}
.service-card:hover {
    box-shadow: 0 16px 40px rgba(15,37,64,0.15);
}
.service-card .card-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

/* ===== CARD LABEL (Startseite) ===== */
.card-label {
    background: #232D32;
    padding: 18px 24px;
    text-align: center;
    transition: background-color 0.3s;
    position: relative;
    z-index: 1;
}
.card-label:hover {
    background: #000000;
}
.card-label h3 {
    font-family: 'Optician Sans', 'Inter', sans-serif;
    font-size: 40px;
    color: #ffffff;
    letter-spacing: 3px;
    margin: 0;
    text-transform: uppercase;
}

/* ===== INFO SECTION (Startseite) ===== */
.info-section {
    padding: 80px 40px;
}
.info-content {
    max-width: 1840px /*1280px*/;
    margin: 0 auto;
}
.info-box {
    background: #232D32;
    border-radius: 0;
    padding: 80px 80px;
    width: calc((100% - 48px) / 3 * 2 + 24px);
}
.info-box h2 {
    font-size: clamp(24px, 30px, 36px);
    color: #ffffff;
    line-height: 1.0;
}
.info-box p {
    color: #FFFFFF;
}

/* ===== FOOTER ===== */
footer {
    background: #ffffff;
    font-size: 1em;
    font-weight: 300;
    padding: 48px 40px;
}
footer .footer-inner {
    max-width: 1840px /*1280px*/;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* grid-template-columns: 240px 1fr 1fr 220px; */
    gap: 40px;
    align-items: start;
}
.footer-logo img {
    height: 65px;
    margin-bottom: 0;
}
.footer-logo .subtitle {
    display: none;
}
.footer-address a:hover {
    font-weight: 700;
}
.footer-nav ul {
    padding: 0;
}
.footer-nav ul li {
    list-style: none;
}
.footer-nav ul li a {;
    transition: color 0.2s;
}
.footer-nav ul li a:hover {
    font-weight: 700;
}
.footer-isab {
    display: flex;
    align-items: flex-start;
    gap: 45px;
}
.footer-isab img {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
}
.footer-isab p {
    margin: 0;
}

/* ===== PRODUKTE RESPONSIVE ===== */
@media (max-width: 1100px) {
    .service-items {
        grid-template-columns: repeat(2, 1fr);
    }
    .info-box {
        width: calc((100% - 24px) / 2 * 2 + 0px);
    }
}
@media (max-width: 1024px) {
    ul#produkte.produkte-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    footer .footer-inner {
        grid-template-columns: 2fr 1fr 1fr 2fr;
    }



.footer-logo {
    grid-column: 1 / 5;
}

.footer-address {
    grid-column: 1 / 3;
}

.footer-nav {
    grid-column: 3 / 5;
}

.footer-isab {
    grid-column: 1 / 5;
}






}
@media (max-width: 768px) {
    .hero-gradient { padding: 32px 24px 0; }
    .hero-gradient::before {bottom: 70px;}
    .hero-text { font-size: 24px; margin-bottom: 28px; }
    .service-items {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .service-card .card-image {
        height: 220px;
    }
    .info-section {
        padding: 48px 24px;
    }
    .info-box {
        width: 100%;
        padding: 32px 24px;
    }

    .card-label h3 {
        font-size: 28px;
    }   

    #produkte_section { padding: 40px 20px 60px; }
    ul#produkte.produkte-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    ul#produkte li .produktinhalt .span33,
    ul#produkte li .produktinhalt .span66 {
        float: none;
        width: 100%;
        padding-right: 0;
    }
    ul#produkte .produktinhalt .width1280 { padding: 24px; }
    footer .footer-inner {}
}

.width_extrasmall { max-width: 480px; padding: 0 15px; }
.width_small { max-width: 640px; padding: 0 15px; }
.width_medium { max-width: 800px; padding: 0 15px; }
.width_normal { max-width: 1024px; padding: 0 15px; }
.width_normal_team { max-width: 1152px; padding: 0 15px; }
.width_large { max-width: 1120px; padding: 0 15px; }
.width_extralarge { max-width: 1280px; padding: 0 15px; }
.width_superlarge { max-width: 1600px; padding: 0 15px; }
.width_full { padding: 0 15px; }
.width_full_complete { padding: 0; }
@media only screen and (max-width: 767px) {
    .width_extrasmall { padding: 0 20px; }
    .width_small { padding: 0 20px; }
    .width_medium { padding: 0 20px; }
    .width_normal { padding: 0 20px; }
    .width_large { padding: 0 20px; }
    .width_extralarge { padding: 0 20px; }
    .width_superlarge { padding: 0 20px; }
    .width_full { padding: 0 20px; }
}

#intro .clear {
    display: none;
}