body {
    zoom: 90%;
}

body.ergebnisse {
    height: inherit !important;
}

body.ergebnisse .content {
    padding-top: 50px !important;
}


body.ergebnisse .content .search_it-results a {
    font-size: 18px;
}


body.imprint {
    display: flex !important;
    align-items: stretch !important;
    flex-direction: column !important;
    height: 100vh !important;
}

.imprint .content {
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding-top: 0 !important;
}

.search_it-modul {
    width: 50%;
}

.search_it-results {
    padding-left: 0 !important;
    width: 100%;
}

.search_it-results .search_it-result.search_it-article {
    /* margin-bottom: 30px !important; */
    padding: 6px;
}



.search_it-results .search_it-result.search_it-article p {
    margin-bottom: 0 !important;
}

.search_it-results .search_it-result.search_it-article p a {
    margin-top: 0 !important;
}

.search_it-results .search_it-result.search_it-article p.search_it-url {
    display: none;
}

.search_it-results .search_it-result.search_it-article p:last-child {
    margin-bottom: 0px !important;
}

.search_it-results .search_it-result.search_it-article:nth-child(odd) {
    background-color: white;
    border: 1px solid black;
    border-bottom: none !important;
    ;
}

.search_it-results .search_it-result.search_it-article:nth-child(even) {
    background-color: transparent;
    border: 1px solid black;
    border-bottom: none !important;
    ;
}


.search_it-results .search_it-result.search_it-article:last-child {
    border: 1px solid black;
    border-bottom: 1px solid black !important;
    ;
}


.header .filter .filter__icon,
.header .filter .form__icon {
    margin-right: 15px !important;
}

.header .filter #dynamic_select {
    width: inherit !important;
    text-transform: inherit !important;
}

.articlelist.pagination .pager li:last-child {
    margin-right: 5px !important;
    margin-left: 5px !important;
}

.articlelist.pagination .pager {
    width: 60% !important;
    background: #414141 !important;
}

.product__wrapper {
    /* min-height: 580px; */
    min-height: inherit !important;
    ;
}

.product__wrapper .data__wrapper .text p {
    line-height: 30px !important;
    font-family: Helvetica !important;
    font-size: 2rem !important;
    font-weight: 300 !important;
}

.product__wrapper .data__wrapper p {
    margin-bottom: 0.5rem;
}


.product__wrapper .data__wrapper .description {
    padding-left: 0px !important;
}

.product__wrapper .data__wrapper .description li {
    margin-bottom: 0px !important;
}

.product__wrapper .data__wrapper .title {
    line-height: normal !important;
    font-size: 34.4px !important;
    font-weight: bold !important;
    margin-bottom: 20px;
}

.teaser .teaser__inner b p {
    line-height: 22px;
}


.teaser .teaser__inner h1 {
    font-size: 3.75vw !important;
    font-weight: bold !important;
}

.image__wrapper.col__4.flex {
    height: 100% !important;
}

.carousel {
    position: relative;
    /* max-height: 300px !important; */
}


.carousel .slick-prev,
.carousel .slick-next {
    padding: 10px;
    position: absolute;
    top: 50%;
    z-index: 1;
    cursor: pointer;
    zoom: 2;
}

.carousel .slick-prev {
    left: -8px;
}

.carousel .slick-next {
    right: 12px;
}

.slick-track {
    display: flex !important;
    align-items: center !important;
}

.pagination {
    flex-direction: column !important;
}


.articlelist.pagination {
    flex-direction: column !important;
}


.product__wrapper:nth-child(odd) .product__inner .data__wrapper {
    margin-left: calc(100% / 24) !important;
}


.zoom {
    max-width: 50px;
}

.zoom svg {
    width: 100%;
}




/* body {
    padding: 40px;
    background-image: linear-gradient(#e8f0ff 0%, white 52.08%);
    color: #0e3481;
    min-height: 100vh;
  }
  
  .header .lead {
    max-width: 620px;
  }
   */



.carousel {
    margin: 0px auto;
}

.slick-slide {
    justify-content: center !important;
    display: flex !important;
}

.slick-slide {
    /* width: 600px !important; */
    justify-content: center;
    display: flex;
}

.slick-slide img {
    /* width: 540px; */
    border: 2px solid #fff;
}

.wrapper .slick-dots li button:before {
    font-size: 20px;
    color: white;
}

/* .slick-slide {
    width: 100%;
 }
 
 .slick-slide img {
    width: 100%;
 } */


.slick-list {
    /* top: 55px !important; */
}


.image__wrapper.col__6.flex {
    height: 100%;
    margin-left: calc(100% / 42) !important;
}

.carousel .slick-next {
    right: -20px !important;
}

.carousel .slick-prev {
    left: -40px !important;
}

.slick-prev:before,
.slick-next:before {
    color: #000000 !important;
}


@media (max-width: 1000px) {
    .articlelist.pagination .pager {
        width: 100% !important;
        margin: 0 auto 20px auto !important;
    }

    .articlelist.pagination .pager li a {
        font-size: 15px !important;
    }

    .articlelist.pagination .pager span {
        font-size: 15px !important;
    }

    .header .filter #dynamic_select,
    .header .filter .search__input {
        max-width: inherit !important;
    }

    .header .filter #dynamic_select,
    .header .filter .search__input {
        max-width: inherit !important;
    }

    .search_it-form {
        width: 100%;
    }
}

.slick-dots {
    bottom: inherit !important;
    margin-top: 5px !important;
    /* bottom: -30px !important; */
}

.carousel .slick-prev,
.carousel .slick-next {
    top: 12px !important;
}

#scrollToTopBtn {
    background-color: #333;
    /* Hintergrundfarbe */
    color: white;
    /* Textfarbe */
    border: none;
    /* Keine Rahmen */
    padding: 15px;
    /* Padding für die Größe des Buttons */
    cursor: pointer;
    /* Zeigt, dass es klickbar ist */
    font-size: 18px;
    /* Schriftgröße */
    margin-bottom: 25px;
    margin-top: 25px;
    ;
}

#scrollToTopBtn:hover {
    background-color: #555;
    /* Ändert die Hintergrundfarbe beim Überfahren */
}


/* Bestehende Regeln beibehalten */
/* Zentriert das Lightbox auf allen Geräten */
#lightbox {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

/* Bild im Viewport skalieren */
.lightbox img {
    max-height: 90vh;
    max-width: 90vw;
    object-fit: contain;
}

/* Blockiert Scrollen des Body */
body.lightbox-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100%;
}

.lb-nav a.lb-prev,
.lb-nav a.lb-next {
    opacity: 1 !important;
}


/* Navigationscontainer unter das Bild setzen */
.lb-nav {
    position: absolute !important;
    top: 57% !important;
    /* Unter dem Bild */
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding-top: 10px !important;
    z-index: 1000 !important;
    /* Sicherstellt, dass die Pfeile über dem Overlay liegen */
}

/* Pfeile sichtbar machen und korrekt positionieren */
.lb-nav a.lb-prev,
.lb-nav a.lb-next {
    display: block !important;
    opacity: 1 !important;
    position: relative !important;
    width: 48px !important;
    /* Standardgröße der Pfeile */
    height: 48px !important;
    background-size: contain !important;
    transform: none !important;
}


.lb-nav a.lb-prev {
    left: -50px;
}

.lb-nav a.lb-next {
    right: -50px;
}


/* Close-Button oben am Bild platzieren */
.lb-closeContainer {
    position: absolute !important;
    top: -50px !important;
    /* Oberhalb des Bildes */
        right: auto !important;

    transform: translate3d(-15%, -10px, 0);
    z-index: 1001 !important;
    /* Über dem Bild */
}

.lb-close {
    display: block !important;
    opacity: 1 !important;
    width: 30px !important;
    height: 30px !important;
    background-size: contain !important;
}
/* Phase 3 -- keep H2 product title visually identical to H1 in list context */
h2.product-title {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    line-height: inherit;
    font-family: inherit;
    color: inherit;
}

/* ============================================================================
 * Breadcrumb (Fix L): visible on ALL pages incl. Homepage.
 * min-height reserves vertical space BEFORE content paints -> no CLS.
 * ============================================================================ */
.breadcrumb-wrap {
    padding: 0.5rem 1rem;
    margin: 0 1rem 0 0;
}
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
    min-height: 2.25rem; /* CLS-Reservation */
    font-size: 0.875rem;
    color: #767676;
}
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li + li::before {
    content: "›";
    padding: 0 0.5rem;
    color: #999;
}
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: #333; }

/* Safety-Net: any img with width/height attributes (for CLS) must remain proportional. */
img[width][height] {
    max-width: 100%;
    height: auto;
}
.slick-slide img,
.image__wrapper img,
.product__wrapper img {
    max-width: 100% !important;
    height: auto !important;
}


/* ============================================================================
 * Filter dropdown: custom chevron with indent (previously at far right edge)
 * ============================================================================ */
.header .filter #dynamic_select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23414141' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 10px 6px !important;
    padding-right: 35px !important;
}


/* ============================================================================
 * CLS-Fix Teaser Swiper (Task F): Pre-Layout fuer swiper-slides
 * Vor Swiper JS Init wuerden 3 Slides je 460px untereinander stapeln (1380px),
 * dann horizontal arrangieren -> CLS 0.5+. Lock height + flex layout sofort.
 * ============================================================================ */
.teaser .swiper-container {
    position: relative;
    overflow: hidden;
    height: 460px;
    width: 100%;
}
.teaser .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
    width: 100%;
}
.teaser .swiper-wrapper .swiper-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}
/* Fix E: teaser uses real <img> now (was background-image). Cover-fit via object-fit. */
.teaser .swiper-slide .teaser__image,
.teaser__swiper .swiper-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}
@media (max-width: 1000px) {
    .teaser .swiper-container { height: 240px; }
}

/* ============================================================================
 * Subcategory-Filter (Fix H): crawlable <a>-list beside the select fallback.
 * On JS-enabled devices the select remains a quick switcher; on crawl bots and
 * no-JS browsers the <ul><li><a> nav is the primary control.
 * ============================================================================ */
.subcategory-filter__nav { flex: 1 1 auto; }
.subcategory-filter__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.subcategory-filter__list li a {
    display: inline-flex;
    padding: 0.25rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 999px;
    color: #333;
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1.4;
}
.subcategory-filter__list li.is-active a {
    background: #333;
    color: #fff;
    border-color: #333;
}
.subcategory-filter__list li a:hover { background: #f0f0f0; }
.subcategory-filter__list li.is-active a:hover { background: #222; color: #fff; }
/* Progressive enhancement: hide select when JS is enabled and the <a>-list is present. */
.js .subcategory-filter .subcategory-filter__select { display: none; }
@media (max-width: 640px) {
    .subcategory-filter__nav { display: none; }
    .subcategory-filter__select { display: block !important; }
}

/* Product-title link in list context (Fix F): same color, underline on hover. */
.product-title__link { color: inherit; text-decoration: none; }
.product-title__link:hover { text-decoration: underline; }

/* SEO pagination for infinite-scroll containers (Fix K). */
.pagination--seo {
    text-align: center;
    padding: 1rem 0;
}
.pager--seo {
    display: inline-flex;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}
.pager--seo li a {
    padding: 0.25rem 0.5rem;
    color: #333;
    text-decoration: none;
}
.pager--seo li.active a { font-weight: bold; color: #000; }
/* JS-enabled clients hide the crawlable pagination when infinite scroll is active. */
.js .articlelist.infinite-scroll + .infinite-scroll-loader + .infinite-scroll-trigger + .pagination--seo,
.js .articlelist.infinite-scroll + .pagination--seo { display: none; }

/* ============================================================================
 * Odd/Even Produktsektionen: einheitliche maximale Bildhoehe.
 * Ohne Begrenzung ziehen schmale Hochformate (z.B. zylindrische Objekte) die
 * Sektion uebermaessig hoch. max-height haelt das Verhaeltnis konsistent;
 * width:auto + object-fit:contain bewahren die Proportion, margin:auto zentriert.
 * ============================================================================ */
.image__wrapper .carousel img,
.image__wrapper .slick-slide img {
    max-height: 420px !important;
    width: auto !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    object-fit: contain !important;
}

/* ============================================================================
 * User-Request (27.05.2026): kurze Seiten (404/Impressum/Suche) sollen das
 * Viewport fuellen, damit der Footer am unteren Rand sitzt — kein leerer
 * Hintergrund-Balken darunter, kein unnoetiger Scroll (Sticky-Footer).
 * ============================================================================ */
body.notfound, body.imprint, body.ergebnisse { min-height: 100vh; }
body.notfound .content,
body.imprint .content,
body.ergebnisse .content { flex: 1 0 auto; height: auto; }

/* User-Request: Breadcrumb lesbar machen (war #767676 ~3.9:1 auf hellem
 * Verlauf = unter WCAG AA). Dunkler + aktuelle Seite hervorgehoben. */
.breadcrumb { color: #333; }
.breadcrumb li + li::before { color: #666; }
.breadcrumb a { color: #333; }
.breadcrumb a:hover { color: #000; text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: #000; font-weight: 600; }

/* Sticky-footer Korrektur: Content-flex-grow ließ unten ~95px Lücke; margin-top:auto
 * am Footer absorbiert den freien Platz zuverlässig → Footer bündig am Viewport-Rand. */
body.notfound .footer,
body.imprint .footer,
body.ergebnisse .footer { margin-top: auto; }

/* Root-cause des Footer-Gaps: leere slick-prev/slick-next-Pfeile hängen als direkte
 * <body>-Kinder NACH dem Footer (slick-Init-Reste, auf diesen Seiten kein Carousel)
 * und belegen ~95px unter dem Footer. Auf kurzen Seitentypen ausblenden. */
body.notfound .slick-prev, body.notfound .slick-next,
body.imprint .slick-prev, body.imprint .slick-next,
body.ergebnisse .slick-prev, body.ergebnisse .slick-next { display: none; }

/* Body hat global zoom:90% (siehe oben, overrides.css:2) → 100vh rendert nur als
 * 90vh visuell = 76px Luecke unter dem Footer. min-height zoom-kompensieren:
 * 100vh / 0.9 = 111.11vh, damit der Body nach der Skalierung exakt das Viewport fuellt. */
body.notfound, body.imprint, body.ergebnisse { min-height: calc(100vh / 0.9); }

/* User-Request: Footer-Inhalt (IMPRINT links / Copyright rechts) ganz nach außen,
 * statt im 1600px-Gutter zentriert. Footer-Bar bleibt full-width. */
.footer .footer__inner { max-width: 100%; padding-left: 1.5rem; padding-right: 1.5rem; }

/* Fix: der umbenannte Such-Button (#backToLastPageBtn statt #scrollToTopBtn) hatte
 * seine Stilregel verloren und wurde zum ungestylten Default-Button. Identisches
 * Original-Design wiederherstellen (gleich wie #scrollToTopBtn). */
#backToLastPageBtn {
    background-color: #333;
    color: white;
    border: none;
    padding: 15px;
    cursor: pointer;
    font-size: 18px;
    margin-bottom: 25px;
    margin-top: 25px;
}
#backToLastPageBtn:hover { background-color: #555; }

/* User-Request: Header + Footer (Bars) wie der Content bei 2200px stoppen, statt
 * full-bleed/1600px. Gesamte Seite = konsistente 2200px-Spalte; der graue
 * Body-Verlauf fuellt die Raender auf breiteren Monitoren. */
.header, .footer { max-width: 2200px; margin-left: auto; margin-right: auto; }
/* footer__inner an 2200 ausrichten (vorher 100%/1600) */
.footer .footer__inner { max-width: 2200px; }
/* IMPRINT-Link nach links statt rechts (margin-left:auto raus). */
.footer .footer__inner .footer__content a { margin-left: 0; }

/* User-Request: Breadcrumb in die 2200px-Spalte einreihen (klebte am Bildschirmrand),
 * damit er mit Header/Content/Footer fluchtet. */
.breadcrumb-wrap { max-width: 2200px; margin-left: auto; margin-right: auto; width: 100%; }

/* User-Request: in der Lightbox sollen beim Bildwechsel die Pfeile UND das Close-X
 * sichtbar bleiben (nur das Bild wechseln). Lightbox2 .changeImage() versteckt
 * .lb-nav + .lb-dataContainer (enthaelt .lb-close) per .hide()/.fadeIn — wir halten
 * sie erzwungen sichtbar. Nur Sichtbarkeit, KEINE Design-Aenderung. */
.lb-dataContainer,
.lb-closeContainer,
.lb-close,
.lb-nav { opacity: 1 !important; }
.lb-dataContainer { display: block !important; }
.lb-close { display: block !important; }
.lb-nav { display: flex !important; }

/* User-Request: Breadcrumb war extrem klein (0.875rem) ggü. Body (1.6rem) — angleichen. */
.breadcrumb { font-size: 1.6rem; }
.breadcrumb li + li::before { font-size: 1.6rem; }

/* Scroll-Lock: bei offener Lightbox/Modal darf der Hintergrund nicht scrollen.
 * Lightbox2 v2.11.3 setzt body.lb-disable-scrolling (NICHT .lightbox-open, daher
 * griff der alte Lock nicht). Beide Klassen + html abdecken. */
body.lb-disable-scrolling,
body.lightbox-open { overflow: hidden !important; height: 100% !important; }
html:has(body.lb-disable-scrolling),
html:has(body.lightbox-open) { overflow: hidden !important; }

/* Safari faerbt Select-Text mit der Akzentfarbe (blau). Auf die Design-Farbe
 * zwingen — Safari braucht -webkit-text-fill-color zusaetzlich zu color. */
.header .filter #dynamic_select,
.header .filter #dynamic_select option,
select.search__input, .header .filter select {
    color: #414141 !important;
    -webkit-text-fill-color: #414141 !important;
}

/* Mobile (<=1000px): Breadcrumb ausblenden (zeigt nur "Home", nutzlos), und
 * Pagination-Zahlen groessere Tap-Targets (Apple HIG ~44px, mit grossen Fingern). */
@media (max-width: 1000px) {
  .breadcrumb-wrap { display: none !important; }
  .pager--seo li a,
  .articlelist.pagination .pager li a {
    padding: 0.6rem 0.9rem !important;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .pager--seo { gap: 2px; }
}


/* 2026-06-20 v2 - Carousel doppelt breit, max-height proportional. */
.image__wrapper .carousel.col__4 {
    flex-basis: calc((100% / 12) * 8) !important;
    max-width: calc((100% / 12) * 8) !important;
}
.image__wrapper .carousel img,
.image__wrapper .slick-slide img { max-height: 840px !important; }


/* 2026-06-20 v2 - product__wrapper 100%, Slider IMMER links. Hoehere Spezifitaet. */
.product__wrapper.flex { width: 100% !important; max-width: 100% !important; }
.product__wrapper .product__inner .product__content { flex-direction: row !important; align-items: flex-start !important; }
.product__wrapper .product__inner .product__content .image__wrapper { order: 0 !important; margin-left: 0 !important; }
.product__wrapper .product__inner .product__content .data__wrapper { order: 1 !important; margin-left: 0 !important; }
.product__wrapper:nth-child(odd) .product__inner .data__wrapper { order: 1 !important; margin-left: 0 !important; }
.product__wrapper:nth-child(odd) .product__inner .image__wrapper { order: 0 !important; }

/* 2026-06-20 v2 - Breadcrumb-Styling am Default-Position (vor main). */
.breadcrumb { color: #fff; }
.breadcrumb a, .breadcrumb [aria-current='page'] { color: #fff !important; }
.breadcrumb li + li::before { color: #ccc; }

/* 2026-06-20 v3 - Slider links: Spezifitaet erhoeht mit html-prefix. */
html .product__wrapper .product__inner .product__content .image__wrapper { order: 0 !important; margin-left: 0 !important; }
html .product__wrapper .product__inner .product__content .data__wrapper { order: 1 !important; margin-left: 0 !important; }
html .product__wrapper:nth-child(odd) .product__inner .data__wrapper { order: 1 !important; margin-left: 0 !important; }
html .product__wrapper:nth-child(odd) .product__inner .image__wrapper { order: 0 !important; }



/* 2026-06-20 v3 - product__inner: max-width 89.125vw, width 100%. */
.product__wrapper .product__inner { max-width: 89.125vw !important; width: 100% !important; }


/* 2026-06-20 v4 - Filter: Block-Layout. Select oben, Suche darunter, beide 100% zentriert. */
.filter.col__10 {
    display: block !important;
}
.filter.col__10 > .flex.col__4 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
    text-align: center;
    margin: 0 0 12px 0;
}
.filter.col__10 > .flex.col__4 #dynamic_select,
.filter.col__10 > .flex.col__4 .search__input {
    margin: 0 auto;
    display: inline-block;
}

/* 2026-06-20 v4 - Suche eckig, alle border-radius forcen. */
html .filter .search_it-form,
html .filter .search_it-form *,
html .filter .search__input,
html .filter input.search__input,
html .filter .search_it-flex {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
}

/* 2026-06-20 v4 - Select intrinsische Breite (nicht 100%); Wrapper 100% bleibt. */
html .filter.col__10 > .flex.col__4 #dynamic_select {
    width: auto !important;
    max-width: 480px;
    min-width: 280px;
    display: inline-block !important;
    flex: none !important;
}
html .filter.col__10 > .flex.col__4 .filter__icon { display: inline-block; vertical-align: middle; }

/* 2026-06-20 v5 - Select + Suche: gleiche Breite, gleiche Hoehe; Suche-Text mittig; mehr Abstand. */
html .filter.col__10 > .flex.col__4 #dynamic_select,
html .filter.col__10 > .flex.col__4 .search__input {
    width: 480px !important;
    max-width: 480px !important;
    min-width: 280px !important;
    height: 50px !important;
    line-height: 50px !important;
    box-sizing: border-box !important;
    padding: 0 16px !important;
}
html .filter.col__10 > .flex.col__4 .search__input {
    text-align: center !important;
}
html .filter.col__10 > .flex.col__4 .search__input::placeholder {
    text-align: center !important;
}
html .filter.col__10 > .flex.col__4:first-of-type { margin-bottom: 28px !important; }

/* 2026-06-20 v6 - Wrapper exakt gleiche Breite: 480px; Inhalt fuellt jeweils 100%. */
html .filter.col__10 > .flex.col__4 {
    width: 480px !important;
    max-width: 480px !important;
    min-width: 280px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    flex-basis: auto !important;
}
html .filter.col__10 > .flex.col__4 #dynamic_select {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
}
html .filter.col__10 > .flex.col__4 .search_it-form { width: 100% !important; flex: 1 1 auto; }
html .filter.col__10 > .flex.col__4 .search_it-flex { width: 100% !important; }
html .filter.col__10 > .flex.col__4 .search__input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
html .filter.col__10 > .flex.col__4:first-of-type { margin-bottom: 28px !important; }

/* 2026-06-20 v6 - Hero-Bilder hoeher (war zu flach). */
html .teaser, html .teaser .swiper-container, html .teaser .swiper-slide { height: 500px !important; min-height: 500px !important; }
html .teaser .teaser__image { height: 500px !important; width: 100% !important; object-fit: cover !important; object-position: center; }

/* 2026-06-20 v7 - Suche-Inhalt wie Select-Inhalt: Icon links, Input fuellt Rest. */
html .filter .search_it-form .search_it-flex {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    width: 100%;
}
html .filter .search_it-form input.form__icon {
    display: inline-block !important;
    height: 30px;
    width: 30px;
}
html .filter .search_it-form .search__input { flex: 1 1 auto !important; }

/* 2026-06-20 v7 - Suche-Placeholder + Text links-aligned. */
html .filter .search__input { text-align: left !important; }
html .filter .search__input::placeholder { text-align: left !important; }

/* 2026-06-20 v7b - Placeholder links: hoehere Spezifitaet ueberschreibt v5. */
html .filter.col__10 > .flex.col__4 .search__input { text-align: left !important; }
html .filter.col__10 > .flex.col__4 .search__input::placeholder { text-align: left !important; }

/* 2026-06-20 v8 - Filter links, Suche rechts, gespiegelt zur Mittelachse. */
html .filter.col__10 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
}
html .filter.col__10 > .flex.col__4 {
    width: 480px !important;
    max-width: 480px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px;
}
/* Filter-Wrapper (links): Icon -> Select */
html .filter.col__10 > .flex.col__4:first-child {
    flex-direction: row !important;
    justify-content: flex-start !important;
}
/* Such-Wrapper (rechts, gespiegelt): Input -> Lupe */
html .filter.col__10 > .flex.col__4:last-child .search_it-flex {
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;
}
html .filter.col__10 > .flex.col__4 #dynamic_select { flex: 1 1 auto !important; width: auto !important; }

/* 2026-06-20 v8 - Article-Balken randbuendig (links + rechts an Viewport-Rand). */
html .product__wrapper,
html .product__wrapper.flex {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
}
html .product__wrapper .product__inner {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    box-sizing: border-box !important;
}

/* 2026-06-20 v9 - Filter wraps: Filter/Suche oben, Breadcrumb eigene Zeile 100% rechts. */
html .filter.col__10 { flex-wrap: wrap !important; padding-top: 32px !important; padding-bottom: 0 !important; }
html .filter.col__10 > .flex.col__4 { align-self: center !important; }
html .filter .breadcrumb-row {
    width: 100% !important;
    max-width: none !important;
    flex-basis: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    margin: 16px 0 0 0 !important;
    padding: 0 !important;
}
html .filter .breadcrumb-row .breadcrumb-wrap { margin: 0; padding: 0; }
html .filter .breadcrumb-row .breadcrumb { display: flex; justify-content: flex-end; margin: 0; padding: 0; }

/* 2026-06-20 v9 - Article gleiche Breite wie Header (kein Overflow ueber Viewport). */
html .product__wrapper,
html .product__wrapper.flex {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
}
html .product__wrapper .product__inner {
    max-width: 100% !important;
    padding-left: 80px !important;
    padding-right: 80px !important;
}

/* 2026-06-20 v10 - Breadcrumb-Row horizontal zentriert. */
html .filter .breadcrumb-row { justify-content: center !important; }
html .filter .breadcrumb-row .breadcrumb { justify-content: center !important; }

/* 2026-06-20 v10 - Breadcrumb margin-bottom 15px. */
html .filter .breadcrumb-row { margin-bottom: 15px !important; }

/* 2026-06-20 v10 - Select/Suche-Wrapper exakt gleich hoch alignen (margins reset). */
html .filter.col__10 > .flex.col__4:first-of-type { margin-bottom: 0 !important; }
html .filter.col__10 > .flex.col__4 { margin-top: 0 !important; margin-bottom: 0 !important; align-self: center !important; }