/* === MA-OVERRIDE-START === */
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/memjYa2wxmKQyPMrZX79wwYZQMhsyuSLh4vSZSk.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/memjYa2wxmKQyPMrZX79wwYZQMhsyuSLhovSZSk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/memjYa2wxmKQyPMrZX79wwYZQMhsyuSLiIvS.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/memjYa2wxmKQyPMrZX79wwYZQMhsyuSLh4vSZSk.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/memjYa2wxmKQyPMrZX79wwYZQMhsyuSLhovSZSk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/memjYa2wxmKQyPMrZX79wwYZQMhsyuSLiIvS.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/memjYa2wxmKQyPMrZX79wwYZQMhsyuSLh4vSZSk.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/memjYa2wxmKQyPMrZX79wwYZQMhsyuSLhovSZSk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/memjYa2wxmKQyPMrZX79wwYZQMhsyuSLiIvS.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ====================================================================
   MONSTER AIRLESS · Modern-Industrial Redesign (MA-2026-001, W+R)
   Override-Schicht über das Malibu/Bootstrap-Theme. Wird an main.min.css angehängt.
   Marke grob beibehalten: Schwarz + Akzent Gelb-Grün, Camo nur als Mikro-Textur.
   ==================================================================== */

:root{
  --ma-ink:#0c0e13;            /* fast-schwarz, warm */
  --ma-ink-2:#161922;          /* dunkle Flächen */
  --ma-accent:#d8e23f;         /* modernes Gelb-Grün (on-brand) */
  --ma-accent-dark:#c3cd2c;    /* Hover */
  --ma-accent-ink:#1b1e08;     /* Text auf Akzent */
  --ma-bg:#f5f6f8;             /* Body-Fläche */
  --ma-surface:#ffffff;
  --ma-line:#e6e7ea;
  --ma-muted:#6b7280;
  --ma-text:#1d2129;
  --ma-radius:12px;
  --ma-shadow:0 1px 3px rgba(12,14,19,.08);
  --ma-shadow-lift:0 12px 26px rgba(12,14,19,.14);
  --ma-font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ---------- Basis / Typografie ---------- */
body{font-family:var(--ma-font)!important;color:var(--ma-text)!important;background:var(--ma-bg)!important;-webkit-font-smoothing:antialiased;letter-spacing:.1px}
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4{font-family:var(--ma-font)!important;font-weight:800!important;color:var(--ma-ink)!important;letter-spacing:-.01em}
h1,.h1{font-size:2.6rem!important;line-height:1.08!important}
h2,.h2{font-size:1.9rem!important;line-height:1.15!important}
h3,.h3{font-size:1.3rem!important;font-weight:700!important}
a{color:var(--ma-ink)}
a:hover,a:focus{color:var(--ma-accent-dark)}
.container,.container-fluid{max-width:1240px}

/* Akzent-Divider unter zentrierten Überschriften (Sektions-Titel) */
.box-content .panel-heading,.gm_box_container h2,.content-box-shadow h2{position:relative}

/* ---------- Header / Navigation ---------- */
.navbar,.navbar-default{background:var(--ma-ink)!important;border:0!important;border-radius:0!important;box-shadow:0 2px 14px rgba(0,0,0,.18)!important;margin-bottom:0!important}
.navbar .navbar-brand,.navbar a,.navbar .nav>li>a{color:#f4f5f7!important;font-weight:600!important}
.navbar .nav>li>a{text-transform:uppercase;font-size:12.5px;letter-spacing:.06em;transition:color .15s}
.navbar .nav>li>a:hover,.navbar .nav>li.active>a{color:var(--ma-accent)!important;background:transparent!important}
.navbar-toggle,.navbar .cart-icon{color:#f4f5f7!important}
/* Suchleiste */
.navbar-search-input-group .form-control{border-radius:8px 0 0 8px!important;border:0!important;height:42px}
.navbar-search-input-group .btn,.input-group-btn .btn{background:var(--ma-accent)!important;color:var(--ma-accent-ink)!important;border:0!important;border-radius:0 8px 8px 0!important;font-weight:700!important}

/* ---------- Buttons ---------- */
.btn{border-radius:8px!important;font-family:var(--ma-font)!important;font-weight:600!important;letter-spacing:.01em;transition:transform .14s,box-shadow .14s,background .14s,color .14s}
.btn-primary,.btn-info,.btn-success{background:var(--ma-accent)!important;border:0!important;color:var(--ma-accent-ink)!important;box-shadow:0 2px 8px rgba(216,226,63,.28)!important}
.btn-primary:hover,.btn-info:hover,.btn-success:hover,.btn-primary:focus{background:var(--ma-accent-dark)!important;color:var(--ma-accent-ink)!important;transform:translateY(-1px);box-shadow:0 6px 16px rgba(216,226,63,.4)!important}
.btn-default{background:#fff!important;border:2px solid var(--ma-line)!important;color:var(--ma-ink)!important}
.btn-default:hover{border-color:var(--ma-ink)!important}

/* ---------- Karten / Panels / Boxen ---------- */
.panel,.box,.panel-default,.content-box-shadow,.gm_box_container{background:var(--ma-surface)!important;border:1px solid var(--ma-line)!important;border-radius:var(--ma-radius)!important;box-shadow:var(--ma-shadow)!important;overflow:hidden}
.panel-default>.panel-heading,.box>.panel-heading,.box-categories>.panel-heading{background:var(--ma-ink)!important;color:#fff!important;border:0!important;font-weight:700!important;letter-spacing:.02em;padding:13px 16px!important}
.panel-body{padding:16px!important}

/* ---------- Produkt-Listing / Produktkarten ---------- */
.products .product,.product-container,.productlist .product,.gm_product,.product-listing .product,
li.product,.product-wrapper{background:var(--ma-surface)!important;border:1px solid var(--ma-line)!important;border-top:3px solid var(--ma-accent)!important;border-radius:var(--ma-radius)!important;box-shadow:var(--ma-shadow)!important;transition:transform .2s,box-shadow .2s;overflow:hidden}
.products .product:hover,.product-container:hover,.gm_product:hover,li.product:hover,.product-wrapper:hover{transform:translateY(-3px);box-shadow:var(--ma-shadow-lift)!important}
.product-price,.price,.current-price,.productPrice{color:var(--ma-ink)!important;font-weight:800!important}
.product-title a,.product-name a,.productname a{color:var(--ma-ink)!important;font-weight:700!important}

/* ---------- Hero / Teaser-Slider ---------- */
.swiper-container,.teaser-slider,.js-teaser-slider{border-radius:var(--ma-radius)!important;overflow:hidden;box-shadow:var(--ma-shadow)!important}
.swiper-button-next,.swiper-button-prev{color:var(--ma-accent)!important}
.teaser-group-2-cols-big-image img,.teaser-group-right-to-slider img{border-radius:var(--ma-radius)}

/* ---------- Sektions-Überschriften (zentriert) ---------- */
.gm_box_container>h2,.content-box-shadow>h2,.box-content>.panel-heading{text-align:center}
.box-content>.panel-heading::after,.gm_box_container>h2::after{content:"";display:block;width:64px;height:3px;background:var(--ma-accent);border-radius:3px;margin:10px auto 0}

/* ---------- Footer ---------- */
.footer,.footer-bottom,.dropdown-footer{background:var(--ma-ink)!important;color:#aab0bb!important;border-top:3px solid var(--ma-accent)!important}
.footer a,.footer-bottom a,.dropdown-footer a,[class^="footer-col"] a{color:#aab0bb!important}
.footer a:hover,.footer-bottom a:hover,[class^="footer-col"] a:hover{color:var(--ma-accent)!important}
[class^="footer-col"] .panel-heading,[class^="footer-col"] h3,[class^="footer-col"] strong{color:#fff!important}

/* ---------- Cookie-Hinweis dezenter ---------- */
.cookie-bar,#cookie-bar,.consent-bar{border-top:3px solid var(--ma-accent)!important}

/* ---------- Feinschliff ---------- */
.label,.badge{border-radius:6px!important}
hr{border-color:var(--ma-line)!important}
::selection{background:var(--ma-accent);color:var(--ma-accent-ink)}

/* ===== Iteration 2: Produktkacheln, Preise, Animationen ===== */
.product-tile,.product-container{background:#fff!important;border:1px solid var(--ma-line)!important;border-radius:var(--ma-radius)!important;box-shadow:var(--ma-shadow)!important;transition:transform .2s,box-shadow .2s;position:relative}
.product-tile{border-left:3px solid var(--ma-accent)!important}
.product-tile:hover,.product-container:hover{transform:translateY(-2px);box-shadow:var(--ma-shadow-lift)!important}
.price,.current-price,.current-price-container .price{color:var(--ma-ink)!important;font-weight:800!important;font-size:1.3rem!important;letter-spacing:-.01em}
.price-tax,.tax-info{color:var(--ma-muted)!important;font-weight:400!important;font-size:.8rem!important}
.product-image,.product-hover-main-image{overflow:hidden;border-radius:8px}
.product-image img{transition:transform .4s ease}
.product-tile:hover .product-image img,.product-container:hover .product-image img{transform:scale(1.05)}
.product-url,.product-title a,.product-name a,.product-tile a.product-url{color:var(--ma-ink)!important;font-weight:700!important}
.jsProductListingGrid.active,.jsProductListingList.active,.panel-viewmode .btn.active{background:var(--ma-ink)!important;color:var(--ma-accent)!important;border-color:var(--ma-ink)!important}
.breadcrumb{background:transparent!important;font-size:12.5px}
/* Reveal-Animation (per JS aktiviert) */
.ma-reveal{opacity:0;transform:translateY(18px)}
.ma-reveal.ma-in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.ma-reveal,.ma-reveal.ma-in{opacity:1!important;transform:none!important;transition:none!important}}
/* Akzent-Hover-Linie unter Navi */
.navbar .nav>li>a{position:relative}
.navbar .nav>li>a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;background:var(--ma-accent);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.navbar .nav>li>a:hover::after,.navbar .nav>li.active>a::after{transform:scaleX(1)}

/* ===== Moderne Startseite (Content-Zone) ===== */

:root{--ink:#0c0e13;--ink2:#161922;--accent:#d8e23f;--accent2:#c3cd2c;--accent-ink:#1b1e08;--bg:#f5f6f8;--surface:#fff;--line:#e6e7ea;--muted:#6b7280;--text:#1d2129}
.ma-home *{box-sizing:border-box}
.ma-home{font-family:'Inter',-apple-system,Arial,sans-serif;color:var(--text);background:var(--bg)}
.ma-wrap{max-width:1240px;margin:0 auto;padding:0 20px}
/* HERO */
.ma-hero{position:relative;background:radial-gradient(120% 140% at 80% 30%,#1a1e28 0%,var(--ink) 60%);color:#fff;overflow:hidden;border-bottom:3px solid var(--accent)}
.ma-hero::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 22px,transparent 22px 46px);pointer-events:none}
.ma-hero-inner{max-width:1240px;margin:0 auto;padding:64px 20px;display:grid;grid-template-columns:1.05fr 1fr;gap:24px;align-items:center;position:relative;z-index:2}
.ma-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.ma-eyebrow::before{content:"";width:26px;height:2px;background:var(--accent)}
.ma-hero h1{font-size:54px;line-height:1.02;font-weight:900;letter-spacing:-.02em;margin:0 0 16px}
.ma-hero h1 em{font-style:normal;color:var(--accent)}
.ma-hero p{font-size:17px;line-height:1.6;color:#c7ccd6;max-width:440px;margin:0 0 26px}
.ma-cta{display:flex;gap:12px;flex-wrap:wrap}
.ma-btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;padding:14px 24px;border-radius:10px;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s}
.ma-btn.p{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 18px rgba(216,226,63,.3)}
.ma-btn.p:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(216,226,63,.45)}
.ma-btn.g{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.18)}
.ma-btn.g:hover{background:rgba(255,255,255,.13)}
.ma-hero-img{position:relative}
.ma-hero-img img{width:100%;display:block;filter:drop-shadow(0 30px 50px rgba(0,0,0,.55))}
.ma-trust{display:flex;gap:24px;margin-top:30px;flex-wrap:wrap}
.ma-trust div{font-size:13px;color:#aab0bb;display:flex;align-items:center;gap:8px}
.ma-trust svg{color:var(--accent)}
/* SECTION */
.ma-sec{padding:62px 0}
.ma-sec h2{font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0 0 6px;text-align:center}
.ma-sec .lead{text-align:center;color:var(--muted);max-width:560px;margin:0 auto 30px}
.ma-sec h2 .u{display:block;width:60px;height:3px;background:var(--accent);border-radius:3px;margin:12px auto 0}
/* KATEGORIE-GRID */
.ma-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ma-cat{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:14px;padding:22px;box-shadow:0 1px 3px rgba(12,14,19,.07);transition:transform .2s,box-shadow .2s}
.ma-cat:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(12,14,19,.13)}
.ma-cat .ic{width:48px;height:48px;border-radius:11px;background:var(--ink);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.ma-cat .ic svg{color:var(--accent)}
.ma-cat h3{font-size:17px;font-weight:800;color:var(--ink);margin:0 0 4px}
.ma-cat p{font-size:13px;color:var(--muted);margin:0}
.ma-cat .go{margin-top:12px;font-size:13px;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.ma-cat:hover .go{color:var(--accent2)}
/* FEATURES */
.ma-feat{background:var(--ink2);color:#fff}
.ma-feat .ma-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:48px;padding-bottom:48px}
.ma-f h4{font-size:16px;font-weight:800;margin:10px 0 4px}
.ma-f p{font-size:13px;color:#aab0bb;margin:0}
.ma-f .fi{width:42px;height:42px;border-radius:10px;background:rgba(216,226,63,.12);display:flex;align-items:center;justify-content:center}
.ma-f .fi svg{color:var(--accent)}
/* DEALER TEASER */
.ma-dealer{background:linear-gradient(120deg,var(--ink) 0%,#1c2130 100%);color:#fff;border-radius:18px;padding:38px;display:flex;gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid rgba(255,255,255,.07)}
.ma-dealer .t h3{font-size:24px;font-weight:800;margin:0 0 8px}
.ma-dealer .t h3 em{font-style:normal;color:var(--accent)}
.ma-dealer .t p{color:#bfc4ce;margin:0;max-width:520px}
/* REVEAL */


@media (prefers-reduced-motion:reduce){.ma-rev,}
@media(max-width:900px){.ma-hero-inner{grid-template-columns:1fr}.ma-hero h1{font-size:38px}.ma-cats{grid-template-columns:1fr 1fr}.ma-feat .ma-wrap{grid-template-columns:1fr 1fr}}

@keyframes maUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.ma-home .ma-rev{animation:maUp .7s cubic-bezier(.2,.7,.2,1) both}
.ma-home .ma-cat:nth-child(2){animation-delay:.05s}.ma-home .ma-cat:nth-child(3){animation-delay:.1s}.ma-home .ma-cat:nth-child(4){animation-delay:.15s}.ma-home .ma-cat:nth-child(5){animation-delay:.2s}.ma-home .ma-cat:nth-child(6){animation-delay:.25s}
.ma-home .ma-f:nth-child(2){animation-delay:.08s}.ma-home .ma-f:nth-child(3){animation-delay:.16s}.ma-home .ma-f:nth-child(4){animation-delay:.24s}
@media (prefers-reduced-motion:reduce){.ma-home .ma-rev{animation:none!important}}
.ma-home .ma-hero,.ma-home .ma-feat{width:100vw;position:relative;left:50%;margin-left:-50vw}

/* Alten Startseiten-Slider ausblenden (moderne Hero ersetzt ihn) */
.slider-container-wrapper{display:none!important}

/* ===== Display-Schrift (industriell/technisch) für Headlines ===== */
.ma-home .ma-hero h1,.ma-home .ma-sec h2,.ma-home .ma-eyebrow,.ma-home .ma-cat h3,.ma-home .ma-dealer h3,.ma-home .ma-f h4{font-family:'Saira','Inter',sans-serif!important;letter-spacing:-.005em}
.ma-home .ma-hero h1{font-weight:800!important;letter-spacing:-.01em}
h1,.h1,h2,.h2,.product-title a,.product-name a{font-family:'Saira','Inter',-apple-system,sans-serif!important}
.navbar .navbar-brand{font-family:'Saira','Inter',sans-serif!important;font-weight:800!important;letter-spacing:.02em}

/* ===== QA Runde 1: Kontrast / Lesbarkeit / Abstände / Mobil ===== */
:root{--ma-accent-text:#5f6b00}
/* Akzent als TEXT nur auf HELL -> dunkle, lesbare Variante (WCAG AA) */
a:hover,a:focus{color:var(--ma-accent-text)!important}
/* dunkle Flächen behalten den hellen Akzent */
.navbar a:hover,.navbar .nav>li>a:hover,.navbar .nav>li.active>a,.footer a:hover,.footer-bottom a:hover,[class^="footer-col"] a:hover{color:var(--ma-accent)!important}
.ma-home .ma-cat:hover .go{color:var(--ma-accent-text)!important}
/* Sekundärtext dunkler (AA sicher) */
.ma-home .ma-sec .lead,.ma-home .ma-cat p,.ma-home .ma-trust div{color:#565c66!important}
/* Lesbarkeit: Zeilenhöhe */
.ma-home .ma-hero p,.ma-home .ma-sec .lead{line-height:1.65!important}
/* Touch-Ziele */
.ma-home .ma-btn{min-height:50px}
.btn{min-height:42px}
/* Karten-Konsistenz */
.ma-home .ma-cat{min-height:148px}
/* Mobile Feinschliff */
@media(max-width:900px){
 .ma-home .ma-hero-inner{gap:18px;padding:46px 18px}
 .ma-home .ma-hero h1{font-size:31px!important;line-height:1.07!important}
 .ma-home .ma-hero p{font-size:15.5px;max-width:100%}
 .ma-home .ma-hero-img{margin-top:4px}
 .ma-home .ma-cats{grid-template-columns:1fr 1fr;gap:12px}
 .ma-home .ma-cat{min-height:auto;padding:18px}
 .ma-home .ma-sec{padding:42px 0}
 .ma-home .ma-feat .ma-wrap{grid-template-columns:1fr 1fr;gap:18px}
 .ma-home .ma-dealer{padding:26px;gap:18px}
}
@media(max-width:480px){
 .ma-home .ma-cats,.ma-home .ma-feat .ma-wrap{grid-template-columns:1fr}
 .ma-home .ma-hero h1{font-size:27px!important}
}

/* ===== Sauberer Footer (Content-Zone) ===== */
.ma-footer{padding:6px 0}
.ma-fcol{padding:10px 6px}
.ma-fbrand{font-family:'Saira','Inter',sans-serif;font-weight:800;font-size:22px;color:#fff;letter-spacing:.03em;margin-bottom:12px}
.ma-fbrand span{color:var(--ma-accent)}
.ma-fcol>p{color:#9aa0ab!important;font-size:13.5px;line-height:1.65;margin:0}
.ma-fcol h4{font-family:'Saira','Inter',sans-serif;color:#fff!important;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0 0 13px}
.ma-fcol ul{list-style:none;padding:0;margin:0}
.ma-fcol li{margin:0 0 9px}
.ma-fcol a{color:#9aa0ab!important;font-size:13.5px;text-decoration:none;transition:color .15s,padding .15s}
.ma-fcol a:hover{color:var(--ma-accent)!important;padding-left:3px}

/* ===== Anwendungs-Band „Im Einsatz" ===== */
.ma-home .ma-apps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ma-home .ma-app{margin:0;background:#fff;border:1px solid var(--ma-line);border-radius:14px;overflow:hidden;box-shadow:0 1px 3px rgba(12,14,19,.07);transition:transform .2s,box-shadow .2s}
.ma-home .ma-app:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(12,14,19,.13)}
.ma-home .ma-app img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .4s}
.ma-home .ma-app:hover img{transform:scale(1.05)}
.ma-home .ma-app figcaption{padding:15px 17px}
.ma-home .ma-app figcaption b{display:block;font-family:'Saira','Inter',sans-serif;font-size:16px;color:var(--ma-ink);margin-bottom:4px}
.ma-home .ma-app figcaption span{font-size:13px;color:#565c66;line-height:1.5}
@media(max-width:900px){.ma-home .ma-apps{grid-template-columns:1fr}.ma-home .ma-app img{aspect-ratio:16/9}}

/* ===== QA final: Produkt-Tabs lesbarer ===== */
.nav-tabs{border-bottom:2px solid var(--ma-line)!important}
.nav-tabs>li>a{color:#3a3f48!important;font-weight:600!important;border:0!important;background:transparent!important;border-radius:0!important;margin-right:2px}
.nav-tabs>li>a:hover,.nav-tabs>li>a:focus{color:var(--ma-ink)!important;background:#f3f4f6!important;border:0!important}
.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{color:var(--ma-ink)!important;font-weight:800!important;background:#fff!important;border:0!important;border-bottom:3px solid var(--ma-accent)!important}
/* === MA-OVERRIDE-END === */

/* ===== MA Kontrast-/Abstands-Fixes 2026-06-24 (gemessen, echte Selektoren) ===== */
/* Nav-Bar-Links: fast-weiss (#f4f5f7) auf weiss = 1.09:1 -> dunkel fuer Lesbarkeit */
.navbar-nav > li > a,
.navbar-nav > li > .dropdown-toggle,
.level-1-child > .dropdown-toggle { color:#1c1c1a !important; }
.navbar-nav > li > a:hover,
.navbar-nav > li > .dropdown-toggle:hover,
.level-1-child > .dropdown-toggle:hover { color:#5f6b00 !important; }
/* Kategorie-Karten: mehr vertikaler Abstand zwischen den Reihen */
.ma-cats { row-gap:28px !important; }
/* Akzent-Unterstrich unter H2 auf hellen Sektionen kraeftiger (war zu blass) */
.ma-sec .u { background:#c3cd2c !important; }

/* ===== Korrektur Nav-Kontrast 2026-06-24: weisser ul-Hintergrund verdeckte die dunkle Leiste ===== */
nav.navbar-categories ul.navbar-nav.level-1,
nav.navbar-categories ul.navbar-nav { background:transparent !important; }
/* helle Schrift auf der dunklen Leiste behalten (ueberschreibt frueheres dunkel) */
.navbar-nav > li > a,
.navbar-nav > li > .dropdown-toggle,
.level-1-child > .dropdown-toggle { color:#f4f5f7 !important; }
.navbar-nav > li > a:hover,
.navbar-nav > li > .dropdown-toggle:hover,
.level-1-child > .dropdown-toggle:hover { color:#d8e23f !important; }

/* ===== Footer-Lesbarkeit 2026-06-24 (gemessen: Titel #333 auf #0c0e13 = 1.53) ===== */
.footer-column-title, .panel-title.footer-column-title,
footer .panel-title, .footer .panel-title { color:#f4f5f7 !important; }
/* Footer-Links klar lesbar auf dunkel */
footer a, .footer a, .footer-column a, [class*=footer] .panel-body a { color:#d7dae0 !important; }
footer a:hover, .footer a:hover, [class*=footer] .panel-body a:hover { color:#d8e23f !important; }

/* ===== KORREKTUR Footer-Links 2026-06-24: stehen auf WEISSEM Panel-Body -> dunkel (war #d7dae0=1.40) ===== */
footer a, .footer a, .footer-column a,
[class*=footer] .panel-body a,
.box-content .panel-body a,
footer .panel-body nav a,
.box-content.panel .panel-body a { color:#1c1c1a !important; }
footer a:hover, .box-content .panel-body a:hover, footer .panel-body nav a:hover,
.box-content.panel .panel-body a:hover { color:#5f6b00 !important; }
/* Spaltentitel bleiben hell (dunkle Kachel) */
.footer-column-title, .panel-title.footer-column-title { color:#f4f5f7 !important; }

/* ===== Mega-Menü-Dropdown 2026-06-24 (gemessen: fast-weiss auf weissem Panel = 1.09) -> dunkle Links ===== */
nav.navbar-categories .dropdown-menu a,
.navbar-categories .dropdown-menu a,
.navbar-categories ul.level-2 a,
.navbar-categories .level-2 a,
.navbar-categories .dropdown-menu .dropdown-toggle { color:#1c1c1a !important; }
nav.navbar-categories .dropdown-menu a:hover,
.navbar-categories .level-2 a:hover { color:#5f6b00 !important; }

/* ===== QA Layout-Fixes 2026-06-24: Footer-Hoehe + Produktkachel-Innenabstand ===== */
footer [class^="footer-col"] > .box.box-content.panel.panel-default {
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
}
footer [class^="footer-col"] > .box.box-content.panel.panel-default > .panel-body {
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
}
.productlist .product-container > .product-tile,
.productlist .product-tile {
  padding-left:16px !important;
  padding-right:16px !important;
}

/* ===== Footer-Spalten-Überstand 2026-06-24: footer-col hatte feste 300px < Inhalt 366px ===== */
footer .inside > .row, footer #footer .row, #footer .inside > .row { display:flex !important; flex-wrap:wrap !important; align-items:stretch !important; }
footer [class*="footer-col"], #footer [class*="footer-col"] { height:auto !important; min-height:0 !important; float:none !important; }
footer [class*="footer-col"] > .box.box-content.panel { height:100% !important; }

/* ===== QA Runde 2 (24.06.): Header-Stufe + Akzent-Button-Kontrast (ans Ende = höchste Priorität) ===== */
/* Header-Stufe: Kategorie-Nav-Leiste hat 35px Rand auf durchsichtigem Wrapper -> Ränder weiß.
   Fix: schwarzer Hintergrund über volle Breite (nur Desktop; Mobile = Off-Canvas-Menü). */
@media (min-width:992px){
  .navbar-collapse.collapse{background:var(--ma-ink)!important}
  nav.navbar-categories{margin-top:0!important;margin-bottom:0!important}
}
/* Nav-Leiste lesbar halten: ul-Hintergrund transparent, damit die dunkle Leiste durchscheint */
nav.navbar-categories ul.navbar-nav,.navbar-categories ul.navbar-nav,ul.level-1.navbar-nav{background:transparent!important}
/* Akzent-Buttons (Gelb-Grün) IMMER dunkler, lesbarer Text (WCAG AA) – auch im Mini-Warenkorb */
a.btn-primary,a.btn-primary *,a.btn-info,a.btn-success,
.btn-primary,.btn-primary *,.btn-info,.btn-success,
.dropdown-menu a.btn-primary,.navbar a.btn-primary,
[class*="cart"] a.btn-primary,[class*="cart"] a.btn-block.btn-primary,
[class*="cart"] a.btn-primary *{color:var(--ma-accent-ink)!important}
[class*="cart"] .price,[class*="cart"] .total{color:#fff!important}

/* ===== MUTIG-MODERN Fundament (25.06.) — global, helle Inhalte + dunkler Rahmen (Marcel genehmigt) ===== */
/* Einheitliches Button-System: Haupt-Buttons = Marken-Akzent #d8e23f, dunkler lesbarer Text, Pill, Glow, Lift.
   Behebt u.a. „In den Warenkorb": vorher grauer Text (51,51,51) auf blassem Gelb (225,226,105). */
.btn-buy,.btn-add-to-cart-fake,button[name="btn-add-to-cart"],
.btn-primary,.btn-info,.btn-success,a.btn-primary{
  background:var(--ma-accent)!important;color:var(--ma-accent-ink)!important;border:0!important;
  border-radius:11px!important;font-weight:700!important;font-family:var(--ma-font)!important;letter-spacing:.005em!important;
  box-shadow:0 6px 18px rgba(216,226,63,.28)!important;transition:transform .15s,box-shadow .15s,background .15s,color .15s!important}
.btn-buy:hover,.btn-add-to-cart-fake:hover,button[name="btn-add-to-cart"]:hover,
.btn-primary:hover,.btn-info:hover,.btn-success:hover,a.btn-primary:hover,.btn-buy:focus,.btn-primary:focus{
  background:var(--ma-accent-dark)!important;color:var(--ma-accent-ink)!important;
  transform:translateY(-2px)!important;box-shadow:0 12px 26px rgba(216,226,63,.42)!important}
.btn-buy *,.btn-add-to-cart-fake *,button[name="btn-add-to-cart"] *{color:var(--ma-accent-ink)!important;fill:var(--ma-accent-ink)!important}
/* sekundäre Buttons: dunkle Outline, füllt bei Hover */
.btn-default,.btn-secondary{background:#fff!important;border:2px solid var(--ma-ink)!important;color:var(--ma-ink)!important;border-radius:11px!important;font-weight:700!important;font-family:var(--ma-font)!important;transition:background .15s,color .15s}
.btn-default:hover,.btn-secondary:hover{background:var(--ma-ink)!important;color:#fff!important}

/* Headlines kräftiger (Saira) — Produktname prominent, mutig-modern */
.product-info h1,.product-info .product-title,h1.product-title{font-family:'Saira','Inter',sans-serif!important;font-size:32px!important;font-weight:800!important;line-height:1.06!important;letter-spacing:-.012em!important;color:var(--ma-ink)!important}

/* Produktkacheln: Akzentkante oben + spürbarer Hover-Lift (verstärkt) */
.product-tile,.product-container,.products .product,li.product{border-top:3px solid var(--ma-accent)!important}
.product-tile:hover,.product-container:hover,.products .product:hover,li.product:hover{transform:translateY(-4px)!important;box-shadow:0 18px 36px rgba(12,14,19,.16)!important}

/* Akzent-Auswahl global */
::selection{background:var(--ma-accent);color:var(--ma-accent-ink)}

/* ===== MUTIG-MODERN Startseite (25.06., Marcel genehmigt): Background-Hero + USP-Band ===== */
.ma-home .ma-hero--bg{display:block!important;position:relative;padding:0!important;overflow:hidden}
.ma-home .ma-hero-bg2{position:absolute;inset:0;background:url('/public/ma-assets/hero-bold.jpg') center right/cover no-repeat}
.ma-home .ma-hero-bg2::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 26%,rgba(12,14,19,.5) 62%,rgba(12,14,19,.06) 100%)}
.ma-home .ma-hero-inner2{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:78px 20px;display:flex;flex-direction:column;align-items:flex-start;min-height:74vh;justify-content:center}
.ma-home .ma-hero--bg h1{font-family:'Saira','Inter',sans-serif!important;font-size:72px!important;line-height:.95!important;font-weight:900!important;text-transform:uppercase;letter-spacing:-.01em;max-width:780px;margin:0 0 18px;color:#fff!important}
.ma-home .ma-hero--bg h1 em{font-style:normal;color:var(--accent)!important;display:block}
.ma-home .ma-hero--bg p{font-size:18px;line-height:1.6;color:#c7ccd6;max-width:470px;margin:0 0 30px}
.ma-home .ma-trust--num{display:flex;gap:36px;margin-top:42px;flex-wrap:wrap}
.ma-home .ma-trust--num div{display:flex;flex-direction:column;gap:2px}
.ma-home .ma-trust--num b{font-family:'Saira',sans-serif;font-size:30px;font-weight:800;color:var(--accent);line-height:1}
.ma-home .ma-trust--num span{font-size:13px;color:#b6bcc6}
/* USP-Band „Abholung beim Fachhändler" */
.ma-home .ma-usp{background:var(--ink2);padding:64px 0;border-top:3px solid var(--accent)}
.ma-home .ma-usp-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:46px;align-items:center}
.ma-home .ma-usp h2{font-family:'Saira',sans-serif!important;font-size:38px!important;font-weight:800!important;color:#fff!important;text-transform:uppercase;line-height:1.05!important;margin:0 0 16px}
.ma-home .ma-usp h2 em{font-style:normal;color:var(--accent)!important}
.ma-home .ma-usp p{color:#c2c7d0!important;font-size:16px;line-height:1.65;margin:0 0 24px;max-width:470px}
.ma-home .ma-usp-r{display:flex;flex-direction:column;gap:14px}
.ma-home .ma-ustep{display:flex;gap:14px;align-items:flex-start;background:#1c2030;border:1px solid #23262f;border-left:3px solid var(--accent);border-radius:12px;padding:16px 18px}
.ma-home .ma-ustep .n{font-family:'Saira',sans-serif;font-weight:900;font-size:21px;color:var(--accent);flex:0 0 auto}
.ma-home .ma-ustep b{display:block;color:#fff;font-size:15.5px;margin-bottom:2px}
.ma-home .ma-ustep .d{color:#9aa0ab;font-size:13px;line-height:1.45}
@media(max-width:880px){
  .ma-home .ma-hero--bg h1{font-size:36px!important}
  .ma-home .ma-hero-inner2{padding:46px 18px;min-height:auto}
  .ma-home .ma-hero--bg p{font-size:15.5px;max-width:100%}
  .ma-home .ma-hero-bg2::after{background:linear-gradient(180deg,rgba(12,14,19,.72),rgba(12,14,19,.82)),linear-gradient(90deg,var(--ink),rgba(12,14,19,.4))}
  .ma-home .ma-usp-grid{grid-template-columns:1fr;gap:24px}
  .ma-home .ma-usp h2{font-size:27px!important}
  .ma-home .ma-trust--num{gap:20px}.ma-home .ma-trust--num b{font-size:24px}
}

/* WCAG-Mikro-Fix (25.06.): Versand-Link oliv 127,128,25 (cr 4.2) -> dunkler, AA-sicher */
a.gm_shipping_link,.tax a.gm_shipping_link{color:var(--ma-accent-text)!important}

/* ===== FEHLER-RUNDE 25.06. (Marcel-Bilder): Checkout einheitlich, Such-Button, Mini-Cart ===== */

/* --- 1) Checkout Versandart: native Boxen als moderne Karten (einheitlich mit Fachhändler-Karte) --- */
.checkout-shipping ul.list-group,ul.list-group{list-style:none;padding:0!important;margin:0!important}
ul.list-group>li.list-group-item{border:2px solid var(--ma-line)!important;border-radius:12px!important;
  margin:0 0 10px 0!important;padding:0!important;background:#fff!important;box-shadow:0 1px 3px rgba(12,14,19,.06)!important;
  transition:border-color .15s,box-shadow .15s!important;overflow:hidden}
ul.list-group>li.list-group-item:hover{border-color:#b9b9ad!important}
/* leere Versandart-Zeile (Rauschen) ausblenden */
ul.list-group>li.list-group-item:empty{display:none!important;border:0!important;margin:0!important}
label.shipping-module-container{padding:15px 18px!important;margin:0!important;width:100%;cursor:pointer}
/* ausgewählte Versandart hervorheben (Akzent-Rahmen) */
ul.list-group>li.list-group-item:has(input[type=radio]:checked){border-color:var(--ma-ink)!important;
  box-shadow:0 0 0 2px var(--ma-accent)!important;background:#fbfbe8!important}
/* die Fachhändler-Karte (dp-wrap) sitzt in derselben Liste -> gleicher Karten-Rahmen, dp-head bleibt Hingucker */
ul.list-group>li.list-group-item .dp-wrap{margin:0!important}
ul.list-group>li.list-group-item:has(.dp-wrap){padding:0!important;border-color:var(--ma-ink)!important}

/* --- 2) Such-Button: Markenfarbe + saubere Form --- */
.navbar-search .btn,.navbar-search-input-group .btn,.input-group-btn .btn,.navbar-search button[type=submit]{
  background:var(--ma-accent)!important;color:var(--ma-accent-ink)!important;border:0!important;
  border-radius:0 8px 8px 0!important;min-width:48px;height:42px!important;display:flex;align-items:center;justify-content:center;box-shadow:none!important}
.navbar-search .btn svg,.navbar-search-input-group .btn svg,.input-group-btn .btn svg{fill:var(--ma-accent-ink)!important;stroke:var(--ma-accent-ink)!important}
.navbar-search .form-control,.navbar-search-input-group .form-control{border-radius:8px 0 0 8px!important;height:42px!important}

/* --- 3) Mini-Warenkorb: alle Beträge/Labels lesbar --- */
/* heller Bereich oben: Preise dunkel (waren weiß auf weiß) */
[class*="cart-dropdown"] .price,.minicart .price,[class*="cart"] .cart-product .price,[class*="cart"] li .price{color:var(--ma-ink)!important}
/* dunkler Footer-Bereich: Labels + Beträge hell */
[class*="cart"] .dropdown-footer,[class*="cart"] .dropdown-footer *,
[class*="cart"] .footer .col-xs-4,[class*="cart"] [class*="total"]{color:#e9ebef!important}
[class*="cart"] .dropdown-footer .price,[class*="cart"] .dropdown-footer .total,
[class*="cart"] .dropdown-footer strong{color:#ffffff!important}
[class*="cart"] .dropdown-footer .tax,[class*="cart"] .dropdown-footer small,
[class*="cart"] .dropdown-footer .text-muted{color:#b8bdc7!important}

/* --- Autocomplete-Vorschläge lesbar (erbten fast-weiße Header-Farbe auf weißem Dropdown) --- */
.search-result-container,.search-result-container a,.search-result-container a *,
.search-result-container li,.search-result-container span,.search-result-container .name{color:var(--ma-ink)!important}
.search-result-container a:hover,.search-result-container li:hover{background:#f3f4f6!important}
.search-result-container .price,.search-result-container strong{color:var(--ma-ink)!important;font-weight:700!important}
.search-result-container .headline,.search-result-container .title{color:var(--ma-muted)!important}
/* --- Such-Button robust (Button ohne .btn-Klasse im input-group) --- */
.navbar-search-input-group>button,.navbar-search-input-group .input-group-btn>button,
.navbar-search-input-group button[type=submit]{background:var(--ma-accent)!important;color:var(--ma-accent-ink)!important;
  border:0!important;border-radius:0 8px 8px 0!important;box-shadow:none!important}
.navbar-search-input-group>button svg,.navbar-search-input-group button svg{fill:var(--ma-accent-ink)!important;stroke:var(--ma-accent-ink)!important}

/* --- KORREKTUR Mini-Cart: .total-box/.order-total sind auf WEISSEM Grund -> dunkler Text --- */
[class*="cart"] .total-box,[class*="cart"] .total-box *,
[class*="cart"] .order-total,[class*="cart"] .order-total *,
[class*="cart"] .total-box .price,[class*="cart"] .order-total .price{color:var(--ma-ink)!important}
/* dropdown-footer (dunkler Block) bleibt hell */
[class*="cart"] .dropdown-footer,[class*="cart"] .dropdown-footer .total,[class*="cart"] .dropdown-footer .total *,
[class*="cart"] .dropdown-footer .tax,[class*="cart"] .dropdown-footer .tax *{color:#e9ebef!important}
[class*="cart"] .dropdown-footer .gm_shipping_link{color:var(--ma-accent)!important}

/* --- KORREKTUR Mini-Cart Gesamtsumme: .total.sum hat DUNKLEN bg -> heller Text (war dunkel auf dunkel) --- */
[class*="cart"] .total.sum,[class*="cart"] .total.sum *,
[class*="cart"] .footer.total.sum,[class*="cart"] .footer.total.sum *,
[class*="cart"] .order-total .total.sum,[class*="cart"] .order-total .total.sum *{color:#ffffff!important}

/* --- Fachhändler-Karte: den von JS gesetzten dp-step-Text durch dezenten Aufklapp-Pfeil ersetzen --- */
.dp-head .dp-step{font-size:0!important;gap:0!important;color:transparent!important}
.dp-head .dp-step svg{display:none!important}
.dp-head .dp-step::after{content:"";display:inline-block;width:9px;height:9px;border-right:2px solid #8a8a80;
  border-bottom:2px solid #8a8a80;transform:rotate(45deg);transition:transform .2s;margin:0 4px 3px 0}
.dp-wrap.dp-active .dp-head .dp-step::after{transform:rotate(-135deg);margin-bottom:0;margin-top:3px}

/* ============================================================
   LOOP 1 — 2026-07-10 · Kontrast-Korrekturen
   Gemessen mit qa/kontrast-audit.js (nicht geschaetzt).
   Ursache: die globale Regel `h1,h2,h3,h4{color:var(--ma-ink)!important}`
   schlaegt die geerbte weisse Schrift auf dunklen Flaechen.
   ============================================================ */

/* Ueberschriften auf dunklem Feature-Streifen (war 1.10:1) */
.ma-feat h1,.ma-feat h2,.ma-feat h3,.ma-feat h4,.ma-f h4{color:#fff!important}

/* Ueberschrift im Fachhaendler-Teaser mit Farbverlauf (war 1.00:1) */
.ma-dealer h1,.ma-dealer h2,.ma-dealer h3,.ma-dealer .t h3{color:#fff!important}

/* Cookie-Banner des Gambio-Themes: weisse Schrift auf Akzentgelb #e1e269 (war 1.37:1) */
.as-oil__btn-optin,.as-oil .as-oil__btn-only-essentials{color:#0c0e13!important;font-weight:700!important}
.as-oil__intro-txt a{text-decoration:underline!important}

/* Leerer Warenkorb: Hinweisbox weiss auf Akzentgelb (war 1.37:1) */
.cart-empty .alert.alert-info,.cart-empty .alert.alert-info a{color:#0c0e13!important}

/* Artikel-Liste: Kacheln standen nur 4px auseinander (gemessen) → Luft schaffen */
.product-container .product-tile{margin-bottom:18px}

/* ------------------------------------------------------------------
   Kopfzeile: Links in den hellen Klappen absichern.
   Unsere Regel `.navbar a{color:#f4f5f7!important}` faerbt JEDEN Link in
   der Kopfzeile fast weiss — auch die in den weissen Klappen (Konto,
   Sprache, Warenkorb). Dass das Kategorienmenue trotzdem lesbar ist,
   liegt allein an der Theme-Regel
   `nav.navbar-categories .dropdown-menu a{color:#1c1c1a!important}`.
   Faellt die weg (anderer Browser-Cache, anderes Menue), steht heller
   Text auf weisser Flaeche. Darum hier explizit und unabhaengig setzen.
   ------------------------------------------------------------------ */
.navbar .dropdown-menu a,
.navbar .dropdown-menu li > a,
.navbar .dropdown-menu label,
.navbar .dropdown-menu .dropdown-header{color:#1c1c1a!important}

/* Ausnahme: die dunklen Fussbereiche der Klappen behalten helle Schrift */
.navbar .dropdown-menu .dropdown-footer a,
.navbar .dropdown-menu .dropdown-footer .btn-link{color:#f4f5f7!important}

/* Akzent-Schaltflaeche in Klappen: dunkle Schrift auf Gelb */
.navbar .dropdown-menu .btn-primary{color:#0c0e13!important}

/* ============================================================
   LOOP 2 — 2026-07-10 · Kontraste in Formularen
   Gemessen mit qa/kontrast-audit.js auf create_account.php und
   password_double_opt.php. Ursache: das Gambio-Theme benutzt die
   Akzentfarbe #e1e269 als TEXTfarbe auf hellem Grund (1,33:1)
   bzw. weissen Text auf Akzentflaechen (1,37:1). WCAG AA = 4,5:1.
   ============================================================ */

/* Akzentgelb als Schrift auf hellem Grund → dunkle Schrift */
form.form-horizontal fieldset legend,
label.headline,
.password-fields .col-sm-12,
.password-fields .col-md-9,
.password-inputs label.control-label{color:#0c0e13!important}

/* Hinweisboxen mit Akzent-Hintergrund (leerer Warenkorb, Passwort-Seite) */
.alert.alert-info,
.alert.alert-info a,
.alert.alert-info strong{color:#0c0e13!important}

/* ============================================================
   LOOP 3 — 2026-07-10 · letzter Kontrastfehler
   Seitenzahlen (Pagination) rendern #7f8019 auf Weiss = 4,2:1.
   WCAG AA verlangt 4,5:1 → dunkler.  Gemessen auf der Hersteller-Seite.
   ============================================================ */
ul.pagination > li > a,
ul.pagination > li > span{color:#5f6b00!important}
ul.pagination > li.active > a,
ul.pagination > li.active > span{color:#0c0e13!important}

/* ============================================================
   LOOP 4 — 2026-07-10 · Befunde aus Marcels Screenshots + Messung
   Jeder Block nennt die belegte Ursache. Keine Vermutungen.
   ============================================================ */

/* ------------------------------------------------------------
   4.1  Schwarzes Viereck im Knopf "In den Warenkorb"
   Ursache (bewiesen via CDP getMatchedStylesForNode):
   unsere eigene Regel `.btn-buy *{fill:var(--ma-accent-ink)!important}`
   uebersteuert das interne `.cls-1{fill:none}` des Gambio-SVG und
   faerbt damit auch das unsichtbare 40x40-Rahmenrechteck ein.
   Loesung: fill nur auf dem <svg> setzen (fill wird in SVG vererbt),
   Rahmenrechtecke bleiben transparent.
   ------------------------------------------------------------ */
.btn-buy svg,
.btn-add-to-cart-fake svg,
button[name="btn-add-to-cart"] svg{fill:var(--ma-accent-ink)!important}

.btn-buy svg *,
.btn-add-to-cart-fake svg *,
button[name="btn-add-to-cart"] svg *{fill:inherit!important}

.btn-buy svg .cls-1,
.btn-add-to-cart-fake svg .cls-1,
button[name="btn-add-to-cart"] svg .cls-1,
.btn-buy svg [fill="none"],
.btn-add-to-cart-fake svg [fill="none"],
button[name="btn-add-to-cart"] svg [fill="none"]{fill:none!important}

/* Symbol und Text sauber ausrichten */
.btn-buy svg{width:22px;height:22px;margin-right:10px;vertical-align:-4px}

/* ------------------------------------------------------------
   4.2  Unterkategorie-Seiten ("Zubehoer", "Nach Material",
        "Nach Objektgroessen")
   Die Seiten zeigten die Fehlerseite "Erweiterte Suche", weil in der
   Datenbank `show_sub_categories` = 0 war (jetzt 1) und
   `show_sub_categories_names` = 0 (jetzt 1).
   Gambio rendert dafuer eine schmucklose Liste -> modernes Kachelraster.
   ------------------------------------------------------------ */
.subcategories-listing-container{max-width:1120px;margin:0 auto}

.subcategories-listing{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:16px;
  list-style:none;
  margin:34px 0 44px;
  padding:0;
}
.subcategories-listing > li.subcategory-item{
  width:auto!important;float:none!important;
  margin:0!important;padding:0!important;
  list-style:none;min-height:0;
}
.subcategories-listing .subcategory-item > a{
  display:flex;align-items:center;gap:12px;
  min-height:86px;padding:18px 20px;
  background:var(--ma-surface);
  border:1px solid var(--ma-line);
  border-radius:var(--ma-radius);
  box-shadow:var(--ma-shadow);
  color:var(--ma-ink)!important;
  font-weight:700;text-decoration:none!important;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.subcategories-listing .subcategory-item > a::after{
  content:"\2192";           /* Pfeil nach rechts */
  margin-left:auto;padding-left:10px;
  color:#5f6b00;font-weight:800;
  transition:transform .15s ease;
}
.subcategories-listing .subcategory-item > a:hover,
.subcategories-listing .subcategory-item > a:focus{
  border-color:var(--ma-accent);
  box-shadow:var(--ma-shadow-lift);
  transform:translateY(-2px);
}
.subcategories-listing .subcategory-item > a:hover::after{transform:translateX(4px)}
.subcategories-listing .cat-name,
.subcategories-listing .cat-name.no-image{
  display:block;font-size:16px;line-height:1.3;font-weight:700;
}
.subcategories-listing .cat-image-container{flex:0 0 auto;display:flex;align-items:center}
.subcategories-listing .cat-image{max-height:58px;width:auto}
.subcategories-listing .fa-picture-o{display:none}   /* kein Platzhalter-Symbol ohne Bild */

/* ------------------------------------------------------------
   4.3  Startseite: der dunkle Bereich klebte am Hero-Bild
   Gemessen: .ma-hero endet bei y=802, .ma-usp beginnt bei y=802.
   Das Hintergrundbild (cover) wurde von der gelben Linie
   mitten durch das Geraet geschnitten. Ausserdem lagen zwei
   3px-Linien uebereinander (.ma-hero border-bottom + .ma-usp border-top).
   ------------------------------------------------------------ */
.ma-hero{border-bottom:0!important}          /* doppelte Linie entfernen */
.ma-hero-inner{padding-bottom:104px!important}
.ma-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:200px;
  background:linear-gradient(180deg,rgba(12,14,19,0) 0%,rgba(12,14,19,.72) 58%,#0c0e13 100%);
  pointer-events:none;z-index:1;
}

/* ------------------------------------------------------------
   4.4  Footer: leerer weisser Kasten
   Gemessen: .footer-col-* sind 485px breit in einem 970px-Bereich,
   also 2 pro Reihe. Die Karten sind unterschiedlich hoch (384 vs 304px)
   -> unter der kuerzeren Spalte klafft eine leere Flaeche.
   Loesung: echtes 4-Spalten-Raster, Karten auf gleiche Hoehe.
   ------------------------------------------------------------ */
/* Achtung: eine aeltere Regel setzt hier `display:flex !important`.
   Deshalb muss dieser Block ebenfalls !important verwenden. */
footer#footer .inside > .row,
footer .inside > .row,
#footer .inside > .row{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:22px!important;
  align-items:stretch!important;
  margin-left:0!important;margin-right:0!important;
}
/* Bootstrap haengt an jedes .row ein ::before und ::after (Clearfix).
   Im Raster zaehlen die als eigene Felder und schieben die 4. Spalte
   in eine zweite Reihe -> sie bleibt kurz. Gemessen:
   grid-template-rows war "524px 349px". Darum abschalten. */
footer#footer .inside > .row::before,
footer#footer .inside > .row::after,
footer .inside > .row::before,
footer .inside > .row::after{display:none!important;content:none!important}

footer#footer .inside > .row > [class^="footer-col"]{
  width:auto!important;float:none!important;
  padding-left:0!important;padding-right:0!important;
  display:flex!important;
  align-self:stretch!important;
  height:auto!important;
}
footer#footer [class^="footer-col"] > .box.box-content.panel{
  display:flex;flex-direction:column;
  width:100%;margin:0!important;
  border-radius:var(--ma-radius);overflow:hidden;
}
footer#footer [class^="footer-col"] > .box.box-content.panel > .panel-body{
  flex:1 1 auto;
}
footer#footer [class^="footer-col"] .panel-body ul{margin:0;padding:0;list-style:none}
footer#footer [class^="footer-col"] .panel-body li{padding:4px 0}

@media(max-width:1199px){
  footer#footer .inside > .row,
  footer .inside > .row,
  #footer .inside > .row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:767px){
  footer#footer .inside > .row,
  footer .inside > .row,
  #footer .inside > .row{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
}

/* ------------------------------------------------------------
   4.5  Kundenbereich: "Ihre getaetigten Bestellungen"
   War: nackte Definitionsliste, fette Ueberschrift, riesiger
   gelber Block-Knopf. Jetzt: Karte mit klarer Datenzeile.
   ------------------------------------------------------------ */
body.page-account-history .order-history-element,
body.page-account .order-history-element{
  background:var(--ma-surface);
  border:1px solid var(--ma-line);
  border-radius:14px;
  box-shadow:var(--ma-shadow);
  padding:22px 24px;
  margin:0 0 20px;
}
body.page-account-history .order-history-element h3,
body.page-account .order-history-element h3{
  margin:0 0 16px!important;padding:0 0 14px;
  border-bottom:1px solid var(--ma-line);
  font-size:16px!important;font-weight:800!important;
  letter-spacing:.01em;
}
body.page-account-history .order-history-element dl.row,
body.page-account .order-history-element dl.row{
  display:grid;grid-template-columns:max-content minmax(0,1fr);
  gap:10px 28px;margin:0 0 20px;
}
body.page-account-history .order-history-element dl.row > dt,
body.page-account-history .order-history-element dl.row > dd,
body.page-account .order-history-element dl.row > dt,
body.page-account .order-history-element dl.row > dd{
  float:none!important;width:auto!important;max-width:none!important;
  padding:0!important;margin:0!important;line-height:1.45;
}
body.page-account-history .order-history-element dl.row > dt,
body.page-account .order-history-element dl.row > dt{
  color:var(--ma-muted);font-weight:600;white-space:nowrap;
}
body.page-account-history .order-history-element dl.row > dd,
body.page-account .order-history-element dl.row > dd{
  color:var(--ma-ink);font-weight:700;
}
/* Knopf: nicht ueber die volle Breite, klare Groesse */
body.page-account-history .order-history-element .btn,
body.page-account-history .main-inside > .row .btn{
  width:auto!important;display:inline-flex;align-items:center;justify-content:center;
  min-width:160px;padding:11px 22px!important;border-radius:10px!important;
  font-weight:700;letter-spacing:.02em;
}

/* ------------------------------------------------------------
   4.6  Kundenbereich: "Bestellinformationen"
   Struktur (gemessen): h1, dl.row.space-0, dann mehrere
   .row > .col-xs-12 (Adressen/Versand/Zahlung/Historie),
   danach h3 + table, zuletzt eine .row mit .col-xs-6 (Knoepfe).
   Nur die Inhaltsbloecke werden zu Karten, die Knopfzeile nicht.
   ------------------------------------------------------------ */
body.page-account-history-info .main-inside > dl.row{
  background:var(--ma-surface);border:1px solid var(--ma-line);
  border-radius:14px;box-shadow:var(--ma-shadow);
  padding:20px 24px;margin:0 0 16px;
  display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 28px;
}
body.page-account-history-info .main-inside > dl.row > dt,
body.page-account-history-info .main-inside > dl.row > dd{
  float:none!important;width:auto!important;max-width:none!important;
  margin:0!important;padding:0!important;text-align:left!important;line-height:1.45;
}
body.page-account-history-info .main-inside > dl.row > dt{color:var(--ma-muted);font-weight:600;white-space:nowrap}
body.page-account-history-info .main-inside > dl.row > dd{color:var(--ma-ink);font-weight:700}

body.page-account-history-info .main-inside > .row > .col-xs-12{
  background:var(--ma-surface);border:1px solid var(--ma-line);
  border-radius:14px;box-shadow:var(--ma-shadow);
  padding:20px 24px!important;margin-bottom:16px;
  width:100%;float:none;
}
body.page-account-history-info .main-inside > .row{margin-left:0;margin-right:0}
body.page-account-history-info .main-inside > .row > .col-xs-12 h3{
  font-size:12px!important;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ma-muted)!important;font-weight:700!important;
  margin:0 0 8px!important;
}
body.page-account-history-info .main-inside > .row > .col-xs-12 h3 ~ h3{margin-top:22px!important}
body.page-account-history-info .main-inside > .row > .col-xs-12 p{color:var(--ma-text);margin:0}

/* Artikel-Tabelle als Karte */
body.page-account-history-info table.table{
  background:var(--ma-surface);border:1px solid var(--ma-line);
  border-radius:14px;box-shadow:var(--ma-shadow);
  border-collapse:separate;border-spacing:0;overflow:hidden;margin-bottom:22px;
}
body.page-account-history-info table.table > thead > tr > th{
  background:#f7f8fa;border-bottom:1px solid var(--ma-line)!important;
  font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ma-muted);
  padding:14px 16px!important;
}
body.page-account-history-info table.table > tbody > tr > td,
body.page-account-history-info table.table > tfoot > tr > td{padding:14px 16px!important}
body.page-account-history-info table.table > tfoot > tr > td{background:#fbfbfc}

/* Knoepfe im Kundenbereich einheitlich */
body.page-account-history-info .main-inside > .row:last-of-type .btn{
  width:auto!important;display:inline-flex;align-items:center;justify-content:center;
  min-width:160px;padding:11px 22px!important;border-radius:10px!important;font-weight:700;
}

/* "ANZEIGEN" auf der Konto-Startseite war ein weisser Mini-Knopf,
   auf der Bestellliste ein gelber Block. Jetzt beide gleich. */
body.page-account .order-history-element .btn.btn-xs{
  padding:9px 18px!important;font-size:13px!important;
  border-radius:10px!important;min-width:130px;
}

/* ------------------------------------------------------------
   4.7  NACHTRAG: Bootstrap-Clearfix zerstoert jedes CSS-Raster
   `.row::before{content:" ";display:table}` wird im Grid zu einem
   eigenen Feld und schiebt alle Eintraege um eine Zelle weiter.
   Gemessen auf .order-history-element dl.row: Werte standen links,
   Beschriftungen rechts. Gilt fuer JEDES .row, das wir zu Grid machen.
   ------------------------------------------------------------ */
.order-history-element dl.row::before,
.order-history-element dl.row::after,
body.page-account-history-info .main-inside > dl.row::before,
body.page-account-history-info .main-inside > dl.row::after{
  display:none!important;content:none!important;
}

/* ------------------------------------------------------------
   4.8  NACHTRAG: weisser Text auf weisser Footer-Karte
   Alte Regel: `[class^="footer-col"] strong{color:#fff!important}`
   Die galt frueher, als die Karten dunkel waren. Der neue
   Kontaktblock enthaelt <strong>PaintMaster e.K.</strong> im
   weissen .panel-body -> gemessen 1,0:1.
   Nur der Kartenkopf bleibt hell, der Karteninhalt wird dunkel.
   ------------------------------------------------------------ */
footer#footer [class^="footer-col"] .panel-body strong,
footer#footer [class^="footer-col"] .panel-body b,
footer#footer [class^="footer-col"] .panel-body p,
footer [class^="footer-col"] .panel-body strong,
footer [class^="footer-col"] .panel-body b{color:var(--ma-ink)!important}

/* Kontakt-Links im Footer als Links erkennbar */
footer#footer [class^="footer-col"] .panel-body a{text-decoration:underline;text-underline-offset:3px}
footer#footer [class^="footer-col"] .panel-body a:hover{color:#5f6b00!important}

/* ------------------------------------------------------------
   4.9  Querscroll auf dem Handy (Produktseite: 396px statt 390px)
   Ursache (gemessen, Tiefensuche): der Empfehlungs-Slider
   `.productlist-swiper` haengt mit `margin:0 -15px` aus seinem
   Container `.product-info-listings` heraus. Auf 390px Breite
   entsteht dadurch ein 6px-Ueberstand nach rechts.
   Gegenprobe: Negativrand entfernt -> scrollWidth exakt 390.
   (Nicht mit overflow-x:hidden zugedeckt, sondern die Ursache behoben.)
   Nur auf schmalen Geraeten, damit der Desktop-Slider unveraendert bleibt.
   ------------------------------------------------------------ */
@media(max-width:767px){
  .product-info-listings > .productlist-swiper{
    margin-left:0!important;
    margin-right:0!important;
  }
}

/* ============================================================
   LOOP 5 — 2026-07-10 · Feinschliff Footer
   ============================================================ */

/* 5.1  Das »-Zeichen (Font Awesome, position:absolute) sass mittig zum
   GANZEN Eintrag. Bei "Widerrufsrecht & Muster-Widerrufsformular"
   (3 Zeilen, 97px hoch) rutschte es zwischen die Zeilen.
   Gemessen: a::before top = 16.09px, a line-height = 32.2px.
   -> an der ersten Zeile ausrichten. */
footer#footer [class^="footer-col"] ul#info li a::before{
  top:0!important;
  line-height:inherit!important;
}
footer#footer [class^="footer-col"] ul#info li a{
  line-height:1.5!important;
  padding-top:5px;padding-bottom:5px;
}

/* 5.2  Der Balken oben im Footer traegt weisse Schrift auf einem
   deckenden Camouflage-Bild (gemessen: Kontrast immer >= 9,1:1).
   Die Ersatz-Hintergrundfarbe darunter ist aber HELLGELB rgb(225,226,105).
   Faellt das Bild aus (404, langsames Netz, Bildersperre), steht weisse
   Schrift auf Hellgelb = 1,4:1. Dunkle Ersatzfarbe -> optisch identisch,
   Falle entschaerft. */
footer#footer .footer-header{background-color:#161922!important}

/* ============================================================
   LOOP 6 — 2026-07-10 · Marcels Befund: offener Menuepunkt weiss auf weiss
   ============================================================
   Reproduziert: Maus auf einen UNTERpunkt ("Dispersion") stellen.
   Der Hauptpunkt ist dann `li.open`, aber nicht mehr `:hover`.
   Theme-Regel (ohne !important):
     .navbar-default .navbar-nav > .open > a{color:#000;background-color:#eee}
   Unsere Regel:
     .navbar a{color:#f4f5f7!important}
   -> Schrift rgb(244,245,247) auf hellem Grund = ca. 1,0:1.
   (Frueher nicht gefunden, weil ich nur auf dem Hauptpunkt selbst geschwebt habe.)

   Loesung: der offene Hauptpunkt wird zum "Reiter" der weissen Klappe —
   weisser Grund, dunkle Schrift, in ALLEN Zustaenden.
   ------------------------------------------------------------ */
.navbar-default .navbar-nav > li.open > a,
.navbar-default .navbar-nav > li.open > a:hover,
.navbar-default .navbar-nav > li.open > a:focus,
.navbar-default .navbar-nav > li.open > .dropdown-toggle,
nav.navbar-categories li.open > a,
nav.navbar-categories li.open > a:hover,
nav.navbar-categories li.open > a:focus,
nav.navbar-categories li.open > .dropdown-toggle,
.navbar-categories li.open > .dropdown-toggle:hover{
  color:#1c1c1a!important;
  background-color:#fff!important;
}

/* Der Akzentstrich unter dem aktiven Punkt wuerde auf Weiss verschwinden */
.navbar-default .navbar-nav > li.open > a::after,
nav.navbar-categories li.open > a::after{background:#5f6b00!important}

/* ============================================================
   LOOP 7 — 2026-07-10 · Artikel-Container (Marcels Screenshot)
   ============================================================
   Gemessen auf /?cat=c8_Dispersion, Listen- UND Rasteransicht:

     div.product-container : weiss, border-top 3px gelb, radius 12,
                             Schatten, overflow:hidden
     form.product-tile     : weiss, border-top 3px gelb, border-left 3px gelb,
                             radius 12, Schatten            <-- 1-3px versetzt darin

   -> zwei Karten uebereinander: der gelbe Rundrahmen der inneren Kachel
      steht vor dem weissen Kasten der aeusseren. Das war Marcels Bild.

   Abstaende gemessen: Raster waagerecht 0px, Liste senkrecht 0px
   -> die Kacheln beruehren sich ("sieht gedrueckt aus").

   Loesung: aussen ist NUR Layout (Abstandhalter), innen ist die EINE Karte.
   ------------------------------------------------------------ */

/* --- aussen: reiner Abstandhalter, keine Optik --- */
.product-container,
.productlist .product-container,
.productlist .product-container.has-gallery{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;      /* sonst wird der Schatten der Karte abgeschnitten */
  padding:0 11px!important;        /* ergibt 22px Rinne zwischen den Spalten */
  margin:0 0 24px!important;
}
.product-container:hover{
  transform:none!important;
  box-shadow:none!important;
}

/* --- innen: die einzige Karte --- */
.product-container > .product-tile,
.productlist .product-container > .product-tile{
  background:var(--ma-surface)!important;
  border:1px solid var(--ma-line)!important;
  border-top:3px solid var(--ma-accent)!important;   /* der gelbe Akzent, nur EINMAL */
  border-radius:14px!important;
  box-shadow:0 1px 3px rgba(12,14,19,.08)!important;
  margin:0!important;
  padding:18px!important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-container > .product-tile:hover,
.product-container > .product-tile:focus-within{
  border-color:var(--ma-accent)!important;
  box-shadow:0 14px 30px rgba(12,14,19,.14)!important;
  transform:translateY(-3px);
}
/* Bild-Zoom haengt jetzt an der Karte, nicht mehr am Abstandhalter */
.product-container > .product-tile:hover .product-image img{transform:scale(1.04)}

/* Bewegung respektieren */
@media (prefers-reduced-motion: reduce){
  .product-container > .product-tile{transition:none}
  .product-container > .product-tile:hover{transform:none}
}

/* Handy: weniger Rinne, dafuer mehr Luft nach unten */
@media(max-width:767px){
  .product-container,
  .productlist .product-container{padding:0 6px!important;margin-bottom:18px!important}
  .product-container > .product-tile{padding:16px!important}
}

/* ------------------------------------------------------------
   7.2  Innenleben der Karte
   Gemessen (Raster): .content-container-inner ist 330px hoch in einem
   315px-Rahmen, hat `margin-bottom:-15px` und `border-bottom:1px solid #575757`.
   Das erzeugte einen losen grauen Strich knapp ueber dem Kartenrand.
   Das "NEU"-Schild sass mit top:0/right:5px auf dem gelben Rand.
   ------------------------------------------------------------ */
.product-container > .product-tile .content-container-inner{
  border-bottom:0!important;
  margin-bottom:0!important;
}
.product-container > .product-tile .ribbons{
  top:10px!important;
  right:10px!important;
  z-index:2;
}
/* Preis etwas ruhiger setzen, Titel bekommt Luft */
.product-container > .product-tile .title-description{padding-bottom:4px}
.product-container > .product-tile .price-tax{padding-top:6px}

/* ============================================================
   LOOP 8 — 2026-07-10 · Schriftgroessen in der Artikelkarte
   ============================================================
   Gemessen in der Rasteransicht:
     .price-tax            font-size:  8px   <- Basis, vererbt sich
     .shipping-info-short  font-size:  8px   ("Lieferzeit: ...")
     .price                font-size: 13px / 800
     a.product-url (Titel) font-size: 14px / 400
   8px ist nicht lesbar, und der Preis war kleiner als der Titel.
   ------------------------------------------------------------ */

/* Basis des Preisblocks auf lesbare Groesse; Kinder erben davon */
.product-container > .product-tile .price-tax{
  font-size:13px!important;
  line-height:1.5!important;
  color:var(--ma-muted)!important;
}
.product-container > .product-tile .shipping-info-short,
.product-container > .product-tile .shipping,
.product-container > .product-tile .additional-container{
  font-size:12px!important;
  line-height:1.5!important;
}

/* Der Preis ist die wichtigste Zahl auf der Karte */
.product-container > .product-tile .price,
.product-container > .product-tile .current-price-container{
  font-size:19px!important;
  font-weight:800!important;
  color:var(--ma-ink)!important;
  line-height:1.25!important;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
/* Steuer-/Versandhinweis (Pflichtangabe nach PAngV) klein, aber lesbar */
.product-container > .product-tile .tax,
.product-container > .product-tile .tax-shipping-hint{
  font-size:12px!important;
  color:#595959!important;
  line-height:1.45!important;
}

/* Produktname: klar lesbar, zwei Zeilen Platz */
.product-container > .product-tile .title a.product-url,
.product-container > .product-tile .title-description a.product-url{
  font-size:16px!important;
  font-weight:700!important;
  line-height:1.35!important;
  color:var(--ma-ink)!important;
}

/* Produktbeschreibungen enthalten Elementor-Reste (<h2 class="elementor-heading-title">,
   gemessen 19px/800). In einer Kachel ist das keine Ueberschrift, sondern Fliesstext. */
.product-container > .product-tile .description h1,
.product-container > .product-tile .description h2,
.product-container > .product-tile .description h3,
.product-container > .product-tile .description h4{
  font-size:15px!important;
  font-weight:600!important;
  line-height:1.45!important;
  margin:0 0 6px!important;
  letter-spacing:0!important;
}

/* Rasteransicht: Bild mittig, Text linksbuendig — wie in modernen Shops */
.productlist-viewmode-grid .product-container > .product-tile .title-description,
.productlist-viewmode-grid .product-container > .product-tile .price-tax{
  text-align:left!important;
}
.productlist-viewmode-grid .product-container > .product-tile figure.image{
  text-align:center!important;
}

/* ============================================================
   LOOP 9 — 2026-07-10 · zwei Korrekturen an der Artikelkarte
   ============================================================ */

/* ------------------------------------------------------------
   9.1  Titel wurde abgeschnitten (Regression aus Loop 8)
   Das Theme gibt `a.product-url` ein festes `max-height:35px`.
   Bei 16px Schrift (Zeilenhoehe 21,6px) passt die zweite Zeile
   nicht mehr hinein -> Text lief unter die Kante.
   Loesung: 15px, saubere Zwei-Zeilen-Begrenzung statt harter Kappung.
   ------------------------------------------------------------ */
.product-container > .product-tile .title a.product-url,
.product-container > .product-tile .title-description a.product-url{
  font-size:15px!important;
  line-height:1.35!important;
  max-height:41px!important;          /* exakt 2 Zeilen */
  display:-webkit-box!important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-weight:700!important;
  color:var(--ma-ink)!important;
}
/* Fallback fuer Browser ohne line-clamp: harte Hoehenbegrenzung genuegt */
@supports not (-webkit-line-clamp: 2){
  .product-container > .product-tile .title a.product-url{display:block!important}
}

/* ------------------------------------------------------------
   9.2  PFLICHTANGABE fehlte in der Kachelansicht
   Gemessen: `.tax-shipping-hint` traegt die Theme-Klasse `hidden-grid`
   und steht dort auf `display:none`. Die Karte zeigte nur "2.710,82 EUR"
   ohne "inkl. 19% MwSt. zzgl. Versand".
   Der Shop verkauft laut Marcel auch an Privatkunden -> PAngV verlangt
   den Hinweis auch in Uebersichtslisten. Ebenso die Lieferzeit.
   ------------------------------------------------------------ */
.productlist-viewmode-grid .product-container > .product-tile .tax-shipping-hint,
.productlist-viewmode-grid .product-container > .product-tile .tax{
  display:block!important;
  font-size:12px!important;
  color:#595959!important;
  line-height:1.45!important;
  margin-top:4px;
}
.productlist-viewmode-grid .product-container > .product-tile .shipping-info-short{
  display:inline-block!important;
  font-size:12px!important;
  color:var(--ma-muted)!important;
}

/* ------------------------------------------------------------
   9.3  Elementor-Reste in den Artikelbeschreibungen
   Gemessen: Artikel 1 hat `<h2 class="elementor-heading-title">` im
   Beschreibungstext -> Grossbuchstaben, zentriert, gelber ::after-Strich.
   Artikel 2 und 3 haben schlichten Text. Ergebnis: uneinheitliche Kacheln.
   In der Karte ist die Beschreibung Fliesstext, keine Ueberschrift.
   (Das Markup selbst gehoert in den Artikeldaten bereinigt — siehe Worklog.)
   ------------------------------------------------------------ */
.product-container > .product-tile .description h1,
.product-container > .product-tile .description h2,
.product-container > .product-tile .description h3,
.product-container > .product-tile .description h4,
.product-container > .product-tile .description h1 *,
.product-container > .product-tile .description h2 *,
.product-container > .product-tile .description h3 *,
.product-container > .product-tile .description h4 *{
  font-size:14px!important;
  font-weight:600!important;
  text-transform:none!important;
  text-align:left!important;
  letter-spacing:0!important;
  line-height:1.5!important;
  margin:0 0 4px!important;
  color:var(--ma-text)!important;
}
.product-container > .product-tile .description h1::after,
.product-container > .product-tile .description h2::after,
.product-container > .product-tile .description h3::after,
.product-container > .product-tile .description h4::after{
  content:none!important;
  display:none!important;
}

/* ============================================================
   LOOP 10 — 2026-07-10 · Links im Fliesstext erkennbar machen
   ============================================================
   axe-core `link-in-text-block`: Links auf den Inhaltsseiten haben
   dieselbe Farbe wie der umgebende Text (gemessen 1,19:1 Unterschied)
   und keine Unterstreichung. Wer Farben schlecht unterscheidet,
   erkennt sie nicht. WCAG 1.4.1.
   Nur Fliesstext-Links auf den Inhaltsseiten — Schaltflaechen,
   Produktkacheln und Navigation bleiben unberuehrt.
   ------------------------------------------------------------ */
body.page-shop-content .main-inside p a:not(.btn),
body.page-shop-content .main-inside li a:not(.btn),
body.page-shop-content .main-inside td a:not(.btn){
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
body.page-shop-content .main-inside p a:not(.btn):hover,
body.page-shop-content .main-inside li a:not(.btn):hover{
  color:#5f6b00;
  text-decoration-thickness:2px;
}
/* Hinweis „inkl. MwSt. zzgl. Versand" auf der Produktseite:
   der Wortlink „Versand" war ebenfalls nur farblich markiert. */
body.page-product-info p.tax-shipping-text a.gm_shipping_link{
  text-decoration:underline;
  text-underline-offset:2px;
}

/* ============================================================
   LOOP 11 — 2026-07-10 · Filterbox
   ============================================================
   Der Filter erscheint jetzt in 10 Kategorien (vorher 3). Die Box
   hatte aber keine sichtbare Ueberschrift (`.panel-heading` = display:none)
   und wurde auf „Dispersion" 1493px hoch (13 Materialwerte + 5 Modellreihen).

   Aufbau (gemessen):
     .box-filter > .panel-heading            "Filter", ausgeblendet
     .box-filter fieldset
        legend.sr-only                       nur fuer Vorlesegeraete
        label.control-label.option-heading    sichtbarer Gruppentitel
        div.checkbox * n
   ------------------------------------------------------------ */

/* Die Box wird eine Karte wie die Artikelkacheln */
.box-filter.panel{
  background:var(--ma-surface)!important;
  border:1px solid var(--ma-line)!important;
  border-radius:14px!important;
  box-shadow:0 1px 3px rgba(12,14,19,.08)!important;
  overflow:hidden;
}

/* Ueberschrift sichtbar machen */
.box-filter > .panel-heading{
  display:block!important;
  background:var(--ma-ink)!important;
  color:#fff!important;
  border:0!important;border-radius:0!important;
  padding:14px 18px!important;
  font-size:13px!important;font-weight:800!important;
  letter-spacing:.08em;text-transform:uppercase;
}

/* Gruppentitel */
.box-filter fieldset .option-heading{
  display:block;width:100%;
  position:sticky;top:0;z-index:1;
  background:var(--ma-surface);
  margin:0!important;padding:8px 0 10px!important;
  font-size:12px!important;font-weight:800!important;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--ma-ink)!important;
}

/* Lange Wertelisten begrenzen. max-height wirkt nur, wenn es zu lang wird;
   kurze Gruppen bleiben unveraendert. Die Checkboxen sind mit der Tastatur
   erreichbar, damit ist der Scrollbereich barrierefrei. */
.box-filter fieldset{
  max-height:264px;
  overflow-y:auto;
  padding-right:6px;
  margin-bottom:6px;
}
.box-filter fieldset::-webkit-scrollbar{width:8px}
.box-filter fieldset::-webkit-scrollbar-thumb{background:#d5d7db;border-radius:4px}

.box-filter .checkbox{margin:0!important;padding:3px 0}
.box-filter .checkbox label{font-size:14px;line-height:1.5}

/* Knoepfe unten */
.box-filter .btn{border-radius:10px!important;font-weight:700!important;letter-spacing:.02em}

/* ============================================================
   LOOP 13 — 2026-07-10 · Unterkategorie-Kacheln (Marcels Screenshot)
   ============================================================
   Gemessen auf „Zubehoer", „Nach Material", „Nach Objektgroessen"
   (Desktop UND Handy):

     ul.subcategories-listing   display: BLOCK   <- unser grid aus Loop 4 kam nie an
     li.subcategory-item        display: inline-block, vertical-align: baseline
        -> Kacheln richten sich an der Schriftlinie aus, Reihen versetzt
        -> Breiten richten sich nach dem Text: 229 / 216 / 238 px
     span.cat-name              background:#f5f5f5, border:1px, text-align:center
        -> grauer Kasten um den Namen, innerhalb der weissen Karte

   Loesung: echtes Raster erzwingen (!important), Theme-Kasten entfernen,
   gleiche Optik wie die Artikelkarten (1px Rahmen, 3px gelb oben, Schatten).
   ------------------------------------------------------------ */

.subcategories-listing-container{max-width:1120px;margin:0 auto}

ul.subcategories-listing{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))!important;
  gap:18px!important;
  align-items:stretch!important;
  list-style:none!important;
  margin:34px 0 46px!important;
  padding:0!important;
}
ul.subcategories-listing::before,
ul.subcategories-listing::after{display:none!important;content:none!important}

ul.subcategories-listing > li.subcategory-item{
  display:block!important;
  float:none!important;
  vertical-align:top!important;
  width:auto!important;
  margin:0!important;padding:0!important;
  list-style:none!important;
}

/* Die Karte */
ul.subcategories-listing > li.subcategory-item > a{
  display:flex!important;
  align-items:center;
  gap:14px;
  height:100%;
  min-height:92px;
  padding:20px!important;
  background:var(--ma-surface)!important;
  border:1px solid var(--ma-line)!important;
  border-top:3px solid var(--ma-accent)!important;
  border-radius:14px!important;
  box-shadow:0 1px 3px rgba(12,14,19,.08)!important;
  color:var(--ma-ink)!important;
  text-decoration:none!important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
ul.subcategories-listing > li.subcategory-item > a:hover,
ul.subcategories-listing > li.subcategory-item > a:focus-visible{
  border-color:var(--ma-accent)!important;
  box-shadow:0 14px 30px rgba(12,14,19,.14)!important;
  transform:translateY(-3px);
}

/* Der Theme-Kasten um den Namen muss weg */
ul.subcategories-listing .cat-name,
ul.subcategories-listing .cat-name.no-image{
  display:block!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  padding:0!important;margin:0!important;
  text-align:left!important;
  font-size:16px!important;
  font-weight:700!important;
  line-height:1.35!important;
  color:var(--ma-ink)!important;
  flex:1 1 auto;
}

/* Pfeil rechts */
ul.subcategories-listing > li.subcategory-item > a::after{
  content:"\2192";
  flex:0 0 auto;
  color:#5f6b00;
  font-weight:800;
  font-size:18px;
  line-height:1;
  transition:transform .18s ease;
}
ul.subcategories-listing > li.subcategory-item > a:hover::after{transform:translateX(4px)}

/* Falls doch einmal Kategoriebilder gepflegt werden */
ul.subcategories-listing .cat-image-container{flex:0 0 auto;display:flex;align-items:center}
ul.subcategories-listing .cat-image{max-height:56px;width:auto}
ul.subcategories-listing .fa-picture-o{display:none}

@media (prefers-reduced-motion: reduce){
  ul.subcategories-listing > li.subcategory-item > a{transition:none}
  ul.subcategories-listing > li.subcategory-item > a:hover{transform:none}
}

@media(max-width:767px){
  ul.subcategories-listing{grid-template-columns:minmax(0,1fr)!important;gap:12px!important;margin:24px 0 32px!important}
  ul.subcategories-listing > li.subcategory-item > a{min-height:76px;padding:16px 18px!important}
}

/* ============================================================
   LOOP 16 — 2026-07-10 · Footer-Spalten vereinheitlichen
   ============================================================
   Gemessen: nur `.footer-col-1` ("Mehr über...") setzt vor jedem Link
   ein Font-Awesome-Zeichen (»)  ->  `a::before`, dazu `padding-left:20px`.
   Die drei anderen Spalten haben weder Marker noch Einzug.

   Ausserdem hatte meine Regel aus Loop 4.8 ALLE Footer-Links unterstrichen,
   obwohl sie nur den Kontaktblock als Link erkennbar machen sollte.
   In Navigationslisten wirkt das unruhig.
   ------------------------------------------------------------ */

/* 16.1  Pfeil raus, Einzug raus — alle vier Spalten gleich */
footer#footer [class^="footer-col"] ul#info li a::before,
footer#footer [class^="footer-col"] .panel-body nav ul li a::before{
  content:none!important;
  display:none!important;
}
footer#footer [class^="footer-col"] ul#info li a,
footer#footer [class^="footer-col"] .panel-body nav ul li a{
  padding-left:0!important;
  padding-right:0!important;
}

/* 16.2  Gleicher Zeilenrhythmus in allen Spalten */
footer#footer [class^="footer-col"] .panel-body ul{margin:0;padding:0;list-style:none}
footer#footer [class^="footer-col"] .panel-body li{padding:0;margin:0}
footer#footer [class^="footer-col"] .panel-body li > a{
  display:block;
  padding:6px 0!important;
  line-height:1.5!important;
}

/* 16.3  Unterstreichung nur dort, wo ein Link im Fliesstext steht
         (Kontaktblock). Listen bleiben ruhig, unterstreichen beim Hover. */
footer#footer [class^="footer-col"] .panel-body a{text-decoration:none}
footer#footer [class^="footer-col"] .panel-body p a{
  text-decoration:underline;
  text-underline-offset:3px;
}
footer#footer [class^="footer-col"] .panel-body a:hover,
footer#footer [class^="footer-col"] .panel-body a:focus-visible{
  text-decoration:underline;
  text-underline-offset:3px;
  color:#5f6b00!important;
}

/* ============================================================
   LOOP 17 — 2026-07-10 · Formularfelder + Konto modern
   ============================================================
   Gemessen: input.form-control = radius 2px, border 1px #575757, 38px hoch,
   und KEIN sichtbarer Fokus (outline:none, kein box-shadow).
   Das wirkt alt neben den 11px-abgerundeten Knöpfen — und der fehlende
   Fokus ist ein Tastatur-/Barrierefreiheitsproblem (WCAG 2.4.7).
   ------------------------------------------------------------ */

/* 17.1  Eingabefelder: weicher, höher, ruhiger Rand */
.main-inside .form-control,
#main input[type="text"],
#main input[type="email"],
#main input[type="password"],
#main input[type="tel"],
#main input[type="number"],
#main input[type="search"],
#main select,
#main textarea{
  border:1px solid #cfd2d8!important;
  border-radius:10px!important;
  min-height:44px;
  padding:10px 14px!important;
  font-size:15px!important;
  background:#fff!important;
  color:var(--ma-ink)!important;
  transition:border-color .15s ease, box-shadow .15s ease;
  box-shadow:none!important;
}
#main textarea{min-height:120px}
#main select{min-height:44px}

/* Platzhaltertext ruhig */
.main-inside .form-control::placeholder,
#main input::placeholder,
#main textarea::placeholder{color:#9aa0ab!important;opacity:1}

/* 17.2  SICHTBARER Fokus — vorher gab es keinen.
   Bootstrap `.form-control:focus` setzt ein blaues box-shadow OHNE !important,
   aber unsere `.main-inside …`-Auswahl greift nicht auf jeder Seite (#main statt
   .main-inside). Darum direkt an `.form-control:focus` mit !important. */
.form-control:focus,
.input-text:focus,
#main input:focus,
#main select:focus,
#main textarea:focus,
.main-inside input:focus,
.main-inside select:focus,
.main-inside textarea:focus{
  border-color:#5f6b00!important;
  box-shadow:0 0 0 3px rgba(216,226,63,.55)!important;
  outline:2px solid transparent!important;   /* fuer Windows-Kontrastmodus */
  outline-offset:0!important;
}
/* Tastatur-Fokus auf Knöpfen/Links ebenfalls klar */
#main a.btn:focus-visible,
#main button:focus-visible,
#main input[type="submit"]:focus-visible{
  outline:3px solid #5f6b00!important;
  outline-offset:2px;
}

/* Pflichtfeld-Stern in Markenfarbe statt Rot-Grellheit belassen? -> ruhig dunkel */
#main .mandatory > label .required,
#main label .required{color:#b23b3b}

/* 17.3  Konto-Übersicht: die nackte Linkliste wird zu Zeilen mit Trenner */
body.page-account #main ul > li{list-style:none}
body.page-account #main ul > li > a{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 4px!important;
  border-bottom:1px solid var(--ma-line);
  font-weight:600;color:var(--ma-ink)!important;text-decoration:none!important;
}
body.page-account #main ul > li > a::after{
  content:"\2192";color:#5f6b00;font-weight:800;
  transition:transform .15s ease;
}
body.page-account #main ul > li > a:hover{color:#5f6b00!important}
body.page-account #main ul > li > a:hover::after{transform:translateX(4px)}

/* 17.4  Login/Konto-anlegen: die zwei Spalten als Karten */
body.page-login .fieldset-content,
body.page-create-account .fieldset-content{
  background:var(--ma-surface);
  border:1px solid var(--ma-line);
  border-radius:14px;
  box-shadow:0 1px 3px rgba(12,14,19,.08);
  padding:24px!important;
  height:100%;
}
body.page-login .row-login > [class*="col-"],
body.page-create-account .row > [class*="col-"]{margin-bottom:16px}

/* Abschnitts-Überschrift in den Formularen (Kleinkapitälchen-Stil) */
#main form.form-horizontal fieldset > legend,
#main .headline{
  font-size:12px!important;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ma-muted)!important;font-weight:700!important;
  border-bottom:1px solid var(--ma-line);padding-bottom:8px;margin-bottom:18px;
}

/* 17.5  Datenschutz-Link im Kontakt-/Callback-Formular
   axe: link-in-text-block — der Link "Datenschutzbestimmungen" (a.lightbox_iframe)
   hatte Textfarbe ohne Unterstreichung → für Farbenblinde nicht als Link erkennbar. */
#main a.lightbox_iframe,
#main .checkbox a,
#main .form-group a:not(.btn){
  text-decoration:underline;
  text-underline-offset:2px;
}
#main a.lightbox_iframe:hover,
#main .checkbox a:hover{color:#5f6b00!important}

/* ===== Produktkachel: Name darf nicht angeschnitten werden (Kundenbefund 29.07.2026) =====
   Das Malibu-Theme deckelt den Namen in der Kachel hart:
     .product-container .inside .content-container .content-container-inner .title
     { font-size:14px; max-height:81px; overflow:hidden; text-overflow:ellipsis }
   Passt der Name in eine Zeile, faellt das nie auf. Stellt man die Liste auf VIER
   Kacheln nebeneinander, wird die Kachel schmal, der Name braucht zwei Zeilen — und
   die zweite Zeile wurde unten angeschnitten (halbe Buchstaben, keine Auslassungspunkte).
   Deshalb die Deckelung aufheben statt sie zu vergroessern: eine feste Pixelhoehe geht
   bei jeder Schrift- oder Spaltenaenderung erneut kaputt.
   min-height haelt die Kacheln trotzdem auf gleicher Hoehe (zwei Zeilen Platz). */
.product-container .inside .content-container .content-container-inner .title{
  max-height:none!important;
  overflow:visible!important;
  min-height:2.8em;
  line-height:1.35!important;
}

/* ===== Auswahlfelder mit innenliegender Beschriftung (Kundenbefund 31.07.2026) =====
   Marcel: „Der Wert klebt an der Beschriftung." Gemessen an
   product_info.php?info=p20_monster-m5-ultra-umkehrduesen (Feld „Duesengroesse:"):
   Beschriftung y=9..26, Wert beginnt bei y=18 — sie ueberlappen.

   URSACHE (belegt, keine Vermutung): Das Malibu-Theme legt die Beschriftung ABSOLUT
   ueber das Feld und schafft den Platz darunter allein ueber das Innenmass:
     .form-group-big-select .control-label{position:absolute;top:9px;left:0;right:0;padding:0 12px;font-size:12px}
     .form-group-big-select .form-control{height:58px;padding-top:24px;font-size:17px}
   Unsere eigene Regel 17.1 weiter oben setzt aber `#main select{padding:10px 14px!important}`.
   Das `!important` schlaegt das Theme — der Platz unter der Beschriftung verschwindet.

   KORREKTUR: nur fuer genau diese Feldart das Innenmass zurueckgeben, etwas grosszuegiger
   als das Theme (28px statt 24px), damit zwischen Beschriftung und Wert sichtbar Luft ist.
   Rechts bleibt Platz fuer den Pfeil des Themes (svg: right:12px, 16px breit).
   Links 12px statt 14px, damit Wert und Beschriftung buendig untereinander stehen. */
#main .form-group-big-select .form-control,
#main .form-group-big-select .input-text,
#main .form-group-big-select select,
.main-inside .form-group-big-select .form-control,
.main-inside .form-group-big-select .input-text{
  padding:28px 34px 8px 12px!important;
  font-size:16px!important;
  line-height:1.25!important;
}
/* Die Beschriftung selbst etwas ruhiger und mit klarem Abstand nach unten. */
#main .form-group-big-select .control-label,
.main-inside .form-group-big-select .control-label{
  top:8px!important;
  font-size:12px!important;
  line-height:1.2!important;
  color:#6b7280!important;
  margin-bottom:0!important;
}

/* ===== Seite „Fachhaendler finden" (Kundenwunsch Marcel, 31.07.2026) =====
   Der Knopf auf der Startseite zeigte auf den Anker #ma-usp — es gab keine Seite dahinter.
   Diese Seite ist eine Inhaltsseite des Shops (shop_content.php), liegt also im normalen
   Rahmen mit Kopf- und Fusszeile. Farben/Radien kommen aus den Marken-Variablen oben,
   damit sie bei einer Designaenderung automatisch mitziehen. */
.ma-dealerfinder{max-width:1000px;margin:0 auto}
.ma-dealerfinder .ma-df-einleitung{
  font-size:16px;line-height:1.6;color:var(--ma-muted);max-width:640px;margin:0 0 26px;
}

/* Suchfeld */
.ma-df-suche{
  background:var(--ma-ink);color:#fff;border-radius:var(--ma-radius);
  padding:26px 24px;margin:0 0 26px;border-bottom:3px solid var(--ma-accent);
}
.ma-df-suche .ma-df-label{
  display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ma-accent);margin:0 0 10px;
}
.ma-df-zeile{display:flex;gap:10px;flex-wrap:wrap}
#main .ma-df-zeile input[type="text"]{
  flex:1 1 200px;max-width:280px;min-height:48px;
  border:1px solid rgba(255,255,255,.22)!important;border-radius:10px!important;
  background:rgba(255,255,255,.06)!important;color:#fff!important;
  font-size:17px!important;letter-spacing:.06em;padding:10px 16px!important;
}
#main .ma-df-zeile input[type="text"]::placeholder{color:#8f96a3!important}
#main .ma-df-zeile input[type="text"]:focus{
  border-color:var(--ma-accent)!important;
  box-shadow:0 0 0 3px rgba(216,226,63,.35)!important;
}
#main .ma-df-zeile button{
  min-height:48px;padding:12px 26px;border:0;border-radius:10px;cursor:pointer;
  background:var(--ma-accent);color:var(--ma-accent-ink);
  font-weight:800;font-size:15px;transition:transform .15s,box-shadow .15s;
}
#main .ma-df-zeile button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 24px rgba(216,226,63,.35)}
#main .ma-df-zeile button:disabled{opacity:.55;cursor:progress;transform:none}
.ma-df-hinweis{margin:12px 0 0;font-size:13px;color:#aab0bb}

/* Ergebnisleiste */
.ma-df-status{
  font-size:15px;font-weight:600;color:var(--ma-ink);
  margin:0 0 16px;padding:0 0 0 14px;border-left:3px solid var(--ma-accent);
}

/* Trefferliste */
.ma-df-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ma-df-karte{
  background:var(--ma-surface);border:1px solid var(--ma-line);border-radius:var(--ma-radius);
  padding:18px 20px;box-shadow:var(--ma-shadow);transition:box-shadow .18s,transform .18s;
}
.ma-df-karte:hover{box-shadow:var(--ma-shadow-lift);transform:translateY(-2px)}
.ma-df-kopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.ma-df-platz{
  flex:0 0 auto;min-width:26px;height:26px;border-radius:7px;background:var(--ma-ink);color:var(--ma-accent);
  font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;padding:0 7px;
}
.ma-df-name{font-size:16px!important;font-weight:800!important;margin:0!important;flex:1 1 auto;line-height:1.3!important}
.ma-df-km{
  flex:0 0 auto;font-size:13px;font-weight:800;color:var(--ma-accent-text,#5f6b00);
  background:rgba(216,226,63,.22);border-radius:20px;padding:3px 11px;white-space:nowrap;
}
.ma-df-adresse{margin:0 0 6px;font-size:14px;line-height:1.5;color:var(--ma-text)}
.ma-df-tel{margin:0;font-size:14px}
.ma-df-tel-label{color:var(--ma-muted)}
#main .ma-df-tel a{font-weight:700;text-decoration:none;color:var(--ma-ink)!important}
#main .ma-df-tel a:hover{color:var(--ma-accent-text,#5f6b00)!important;text-decoration:underline}
.ma-df-marken{margin:10px 0 0;display:flex;gap:6px;flex-wrap:wrap}
.ma-df-marke{
  font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ma-muted);border:1px solid var(--ma-line);border-radius:20px;padding:3px 10px;
}
.ma-df-fuss{margin:26px 0 0;font-size:13px;color:var(--ma-muted)}

@media(max-width:760px){
  .ma-df-liste{grid-template-columns:1fr}
  #main .ma-df-zeile input[type="text"]{max-width:none}
  #main .ma-df-zeile button{width:100%}
}

/* Ablauf-Block auf der Haendlerseite — der Knopf „So funktioniert's" von der Startseite
   fuehrt hierher, also muss der Ablauf hier auch stehen (Marcel, 31.07.2026). */
.ma-df-ablauf{margin:0 0 26px}
.ma-df-ablauf h2{font-size:19px!important;margin:0 0 12px!important}
.ma-df-schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;counter-reset:none}
.ma-df-schritt{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--ma-ink);color:#fff;border-radius:var(--ma-radius);
  padding:16px 18px;border-left:3px solid var(--ma-accent);
}
.ma-df-nr{font-size:20px;font-weight:800;color:var(--ma-accent);line-height:1.1;flex:0 0 auto}
.ma-df-schritt-text{display:flex;flex-direction:column;gap:3px}
.ma-df-schritt-text b{font-size:15px;font-weight:800;color:#fff}
.ma-df-schritt-text span{font-size:13px;line-height:1.45;color:#aab0bb}
@media(max-width:760px){.ma-df-schritte{grid-template-columns:1fr}}

/* ===== Unsichtbare Beschriftungen dürfen nicht sichtbar werden (Kundenbefund 01.08.2026) =====
   Marcel: „Die Filter-Container sind doppelt." Unter den Knöpfen „Filtern"/„Zurücksetzen"
   stand ein leerer, gerahmter Kasten.

   URSACHE (gemessen, keine Vermutung): Im Filter steckt
     <label class="form-control sr-only">Preis bis</label>
   `sr-only` heißt „nur für Vorlese-Programme" — sichtbar soll das nichts sein. Unsere eigene
   Regel 17.1 greift aber auf JEDES `.form-control` und gibt ihm Rahmen, weißen Hintergrund,
   Radius und `min-height:44px`. Das `min-height` schlägt Bootstraps `height:1px` — aus der
   unsichtbaren Beschriftung wird ein leeres Kästchen von 44 px Höhe.

   KORREKTUR: für `.sr-only` die Standard-Versteckregel zurückgeben. Der Text bleibt für
   Vorlese-Programme erhalten (deshalb NICHT `display:none`), ist aber wieder unsichtbar. */
#main .form-control.sr-only,
#main .sr-only,
.main-inside .form-control.sr-only,
.main-inside .sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  min-height:0!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* ===== Filterspalte: doppelter Rahmen und Scroll-im-Scroll (Marcel, 01.08.2026) =====

   BEFUND 1 — „Die Filter-Container sind doppelt."
   Gemessen: `.gm_box_container` (y 219, Höhe 1311, Radius 12px, Rahmen 1px) und darin
   `.box.box-filter.panel` (y 220, Höhe 1291, Radius 14px, Rahmen 1px). Zwei ineinander
   liegende Karten — die äußere schaut unten ~20px heraus und sieht aus wie ein leerer
   zweiter Kasten. Ursache ist unsere eigene Regel in Zeile 462: sie gibt `.box`, `.panel`
   UND `.gm_box_container` dieselbe Karten-Optik. Das Theme selbst setzt extra
   `.box-filter{border-width:0;box-shadow:none}`, um genau das zu verhindern — unser
   `!important` hat es überstimmt.
   Nachgemessen: Die Verschachtelung gibt es NUR beim Filter; die vier Fußzeilen-Kästen
   stehen frei und behalten ihre Karte.

   BEFUND 2 — „Bei Material muss man scrollen, und die Überschrift kommt in die Werte."
   Wir hatten die Wertelisten auf `max-height:264px; overflow-y:auto` gedeckelt und die
   Gruppen-Überschrift auf `position:sticky` gesetzt. Beim Scrollen schieben sich die
   Werte unter die klebende Überschrift — halbe Zeilen, unsauberes Bild. Ein Scrollbereich
   INNERHALB der ohnehin scrollenden Seite ist hier auch nicht nötig: die Filterspalte darf
   einfach so lang werden, wie sie ist.
   ------------------------------------------------------------------------------------ */

/* 1) Innerer Kasten verliert die eigene Karte — die äußere Hülle ist die Karte. */
.gm_box_container > .box,
.gm_box_container > .panel{
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
}

/* 2) Keine Deckelung, kein Scrollbereich, keine klebende Überschrift. */
.box-filter fieldset{
  max-height:none!important;
  overflow:visible!important;
  padding-right:0!important;
}
.box-filter fieldset .option-heading{
  position:static!important;
}


/* ===== Verweis auf die Herstellerseite — unter dem grossen Produktbild =====
   MA-2026-001, Stand 19.08.2026 (Kundenwunsch). Vorher stand die Karte unter dem
   "In den Warenkorb"-Button und wurde dort uebersehen. Jetzt: Hersteller-Logo +
   Text "Link zur Herstellerseite", die ganze Karte ist ein Link; das Ziel kommt
   pro Produkt aus dem Gambio-Feld products_url (Plugin ma_hersteller_banner).
   text-decoration hart gesetzt, weil das Theme Links im Inhalt unterstreicht. */
.ma-mfr-banner{
  display:flex; gap:12px; align-items:center;
  margin:16px 0 4px; padding:10px 14px;
  border:1px solid #e3e6cf; border-left:4px solid #D8E23F;
  border-radius:8px; background:#fbfcf3;
  text-decoration:none!important;
}
.ma-mfr-banner:hover,
.ma-mfr-banner:focus{ background:#f6f8e6; text-decoration:none!important; }
.ma-mfr-banner .ma-mfr-logo{ width:48px; height:48px; flex:0 0 auto; object-fit:contain; }
.ma-mfr-banner .ma-mfr-link{
  font-size:14px; font-weight:600; color:#1B1E08!important;
  text-decoration:none!important;
}
.ma-mfr-banner:hover .ma-mfr-link{ text-decoration:underline!important; }
/* Die Bildbuehne (.product-info-stage) hat im Theme eine FESTE Hoehe (gemessen 500px,
   Bild fuellt sie ganz aus). Der Banner ragte dadurch 67px in den Reiter-Bereich
   darunter (live gemessen 19.08.2026). Nur dort, wo der Banner wirklich drin haengt,
   darf die Buehne mitwachsen — global gesetzt haette es JEDE Produktseite um 30px
   verschoben (ebenfalls gemessen). Ergebnis mit dieser Regel: 34px Luft. */
.product-info-stage:has(> .ma-mfr-banner){ height:auto!important; }


/* ===== Mobiles Menue 27.08.2026: Unterpunkte waren schwarz auf schwarz (Kundenmeldung) =====
   GEMESSEN (Playwright, 390/600/767 px): Untermenue-Links #1c1c1a auf #0c0e13 = 1,13:1.
   URSACHE ist die eigene Regel weiter oben ("Mega-Menue-Dropdown 2026-06-24"): sie faerbt
   Untermenue-Links dunkel — richtig fuer das WEISSE Desktop-Flyout (dort 17,07:1), falsch
   im mobilen Menue. Das Theme verschiebt dasselbe <nav> unter 768px per JS nach
   #meco-overlay-menu, und dort ist die Flaeche #0c0e13. Das Theme setzt fuer diesen Fall
   selbst weiss, aber OHNE !important — unsere Regel schlaegt es. Darum hier ausdruecklich
   und unabhaengig vom Theme.
   Die Bindung an #meco-overlay-menu statt an eine Media-Query ist gemessen: bis 767px liegt
   das nav im Overlay, ab 768px nicht mehr (der Umschaltpunkt liegt also genau dort).
   Danach: alle 8 gemessenen Breiten >= 4,5:1, Desktop unveraendert. */
#meco-overlay-menu .navbar-categories .dropdown-menu a,
#meco-overlay-menu .navbar-categories .level-2 a,
#meco-overlay-menu .navbar-categories .level-3 a { color:#f4f5f7 !important; }
#meco-overlay-menu .navbar-categories .dropdown-menu a:hover,
#meco-overlay-menu .navbar-categories .dropdown-menu a:focus-visible,
#meco-overlay-menu .navbar-categories .level-2 a:hover,
#meco-overlay-menu .navbar-categories .level-2 a:focus-visible { color:#d8e23f !important; }
/* Ausnahme: ein aufgeklappter Punkt bekommt weissen Grund (Regel "Reiter" weiter oben) —
   dort muss die Schrift dunkel bleiben, sonst weiss auf weiss. Betrifft heute den offenen
   Hauptpunkt; greift auch, falls der Kunde spaeter eine dritte Ebene anlegt. */
#meco-overlay-menu .navbar-categories li.open > a,
#meco-overlay-menu .navbar-categories li.open > a:hover { color:#1c1c1a !important; }