/* ====================================================================
   rcs 26.09.2026 - Kopfzeile Typ 16: Logo, Suche und Warenkorb auf
   einer Linie, Suchleiste als Pille mit erkennbarem Suchknopf.
   ==================================================================== */

@media (min-width: 768px) {
.page-header.type16 > .header.content {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
}
}

.page-header.type16 > .header.content > .logo {
    flex: 0 0 auto;
    margin: 0;
    margin-right: 0;
    order: 1;
    text-align: left;
}

.page-header.type16 > .header.content > .search-area {
    flex: 0 1 46rem;
    margin: 0 auto;
    max-width: 50%;
    min-width: 0;
    order: 2;
    padding: 0 32px;
    text-align: left;
    width: auto;
}

.page-header.type16 > .header.content > .minicart-wrapper {
    flex: 0 0 auto;
    margin: 0;
    order: 3;
    position: static;
    right: auto;
    top: auto;
    width: auto;
}



.page-header.type16 .search-area .block.block-search {
    background: #fff;
    border: 1px solid #d5d8dd;
    border-radius: 22px;
    margin: 0;
    min-width: 0;
    padding: 0 !important;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
}

.page-header.type16 .search-area .block.block-search:focus-within {
    border-color: #1979c3;
    box-shadow: 0 0 0 3px rgba(25, 121, 195, .12);
}

.page-header.type16 .search-area .minisearch {
    align-items: center;
    display: flex;
    min-height: 44px;
}

.page-header.type16 .search-area .minisearch .field.search {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
}

.page-header.type16 .search-area .minisearch .field.search .control {
    border: 0;
    margin: 0;
    padding: 0;
}

.page-header.type16 .search-area input#search {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: inherit;
    font-size: 14px;
    font-style: normal !important;
    height: 42px;
    line-height: 42px;
    margin: 0;
    padding: 0 6px 0 18px;
    width: 100%;
}

.page-header.type16 .search-area .minisearch .actions {
    flex: 0 0 auto;
}

.page-header.type16 .search-area .minisearch .actions button.action.search {
    background-color: transparent;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4a4a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 19px 19px;
    border: 0;
    border-radius: 50%;
    height: 40px;
    margin: 0 4px 0 0;
    opacity: 1;
    padding: 0;
    position: static;
    transition: background-color .15s ease;
    width: 40px;
}

.page-header.type16 .search-area .minisearch .actions button.action.search:before {
    display: none;
}

.page-header.type16 .search-area .minisearch .actions button.action.search:hover {
    background-color: #eef2f6;
}

.page-header.type16 .search-area .minisearch .actions button.action.search[disabled] {
    opacity: .45;
    pointer-events: none;
}

.page-header.type16 .search-area .rcs-live-search__control,
.rcs-live-search--overlay .rcs-live-search__control {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #8a8f98 !important;
    outline: none !important;
}

.page-header.type16 .search-area .rcs-live-search__control:hover,
.page-header.type16 .search-area .rcs-live-search__control:focus,
.rcs-live-search--overlay .rcs-live-search__control:hover,
.rcs-live-search--overlay .rcs-live-search__control:focus {
    background: none !important;
    box-shadow: none !important;
    color: var(--color-primary, #1979c3) !important;
}

@media (min-width: 768px) {
    .page-header.type16 .search-area .rcs-live-search__control--close {
        display: none;
    }
}

/* custom.css nagelt das Warenkorb-Symbol über .header-newskin absolut fest
   (position/right/top je !important). Für Typ 16 soll es in der Kopfzeile
   mitfließen, darum hier mit höherer Spezifität zurückgeholt. */
.page-header.type16.header-newskin > .header.content > .minicart-wrapper .action.showcart {
    left: auto !important;
    margin: 0 !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
}

.page-header.type16.header-newskin > .header.content > .minicart-wrapper {
    margin-top: 0 !important;
}

.page-header.type16 > .header.content > .minicart-wrapper .block-minicart {
    right: 0;
    top: 100%;
}

/* ---- Suchfeld: nur die Pille trägt Rahmen und Fläche ---- */
.page-header.type16 .search-area .block.block-search .control,
.page-header.type16 .search-area .block.block-search .field.search,
.page-header.type16 .search-area .block.block-search .rcs-live-search:not(.rcs-live-search--overlay),
.page-header.type16 .search-area .block.block-search .rcs-live-search:not(.rcs-live-search--overlay) .rcs-live-search__field {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0;
    padding: 0;
}

.page-header.type16 .search-area .block.block-search input#search {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit;
    height: 46px;
    line-height: 46px;
    margin: 0;
    padding: 0 8px 0 20px;
    width: 100%;
}

/* ---- Suchknopf sichtbar und rund ---- */
.page-header.type16 .search-area .block.block-search .actions {
    flex: 0 0 auto;
}

.page-header.type16 .search-area .block.block-search button.action.search {
    background-color: transparent !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 21px 21px !important;
    border: 0 !important;
    border-radius: 50% !important;
    align-self: center !important;
    display: inline-flex !important;
    height: 38px !important;
    margin: 0 5px 0 0 !important;
    opacity: 1;
    padding: 0 !important;
    position: static !important;
    text-indent: 0;
    vertical-align: middle !important;
    width: 38px !important;
}

.page-header.type16 .search-area .block.block-search button.action.search:before {
    content: none !important;
    display: none !important;
}

.page-header.type16 .search-area .block.block-search button.action.search:hover {
    background-color: #eef2f6 !important;
}

.page-header.type16 .search-area .block.block-search button.action.search[disabled] {
    opacity: .5;
    pointer-events: none;
}

/* ---- Layered Navigation: Optionen ohne Treffer ausblenden.
   Amasty markiert sie selbst mit .-empty-value, rendert sie aber weiter.
   Der zweite Block blendet einen Filter ganz aus, wenn ALLE seine
   Optionen leer sind; Preis- und Bereichsfilter ohne .item bleiben. ---- */
.filter-options-item .item.-empty-value,
.filter-options-content .item.-empty-value {
    display: none !important;
}

.filter-options-item:has(.item):not(:has(.item:not(.-empty-value))) {
    display: none !important;
}

/* ==================== Mobil / Tablet ==================== */

@media (max-width: 991px) {
    .page-header.type16 > .header.content {
        position: relative;
    }

    .page-header.type16.header-newskin > .header.content > .minicart-wrapper .action.showcart {
        left: auto !important;
        position: relative !important;
        right: auto !important;
        top: auto !important;
    }

    .page-header.type16 .search-area.show-icon-tablet {
        position: static;
    }

    .page-header.type16 .search-area.show-icon-tablet .block.block-search {
        border-radius: 24px;
        border-width: 1px;
        left: 14px;
        margin-top: 10px;
        min-width: 0;
        right: 14px;
        width: auto;
        z-index: 20;
    }
}

@media (max-width: 767px) {
    .page-header.type16 > .header.content {
        align-items: center;
        column-gap: 14px;
        display: flex;
        flex-wrap: nowrap;
        padding: 10px 12px 10px 0;
    }

    .page-header.type16 > .header.content > .logo {
        flex: 1 1 auto;
        margin: 0;
        max-width: 60%;
        order: 1;
    }

    .page-header.type16 > .header.content > .logo img {
        height: auto;
        max-width: 100%;
    }

    .page-header.type16 > .header.content > .search-area {
        flex: 0 0 auto;
        margin: 0;
        order: 2;
        width: auto;
    }

    .page-header.type16 > .header.content > .minicart-wrapper {
        flex: 0 0 auto;
        margin: 0;
        order: 3;
    }

    .page-header.type16 > .header.content > .nav-toggle {
        flex: 0 0 auto;
        margin: 0;
        order: 4;
        position: static;
    }

    .page-header.type16 > .header.content > .minicart-wrapper .action.showcart {
        align-items: center;
        display: inline-flex !important;
        justify-content: center;
        position: relative !important;
    }

    .page-header.type16 > .header.content > .minicart-wrapper .action.showcart .counter.qty {
        margin: 0;
        min-width: 18px;
        position: absolute;
        right: -10px;
        top: -8px;
    }

    .page-header.type16 .search-area.show-icon-tablet a.search-toggle-icon {
        display: inline-block;
        height: 34px;
        line-height: 34px;
        margin: 0;
        width: 34px;
    }
}

/* Das Logo ist ein Prozentkasten (custom.css: width 25%/40%), das Bild trägt
   min-width 300px. Dadurch ist der Link breiter als das Bild - auf Mobil
   anklickbar bis über Warenkorb und Menü, auf Desktop mit Einzug. */
.page-header.type16 > .header.content > .logo {
    display: inline-block;
    flex: 0 0 auto;
    margin: 0 !important;
    max-width: none !important;
    order: 1;
    padding: 0 !important;
    text-align: left;
    width: auto !important;
}

.page-header.type16 > .header.content > .logo img {
    display: block;
    height: auto !important;
    margin: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 250px;
}

@media (max-width: 991px) {
    .page-header.type16 > .header.content > .logo img {
        width: 210px;
    }
}

@media (max-width: 767px) {
    .page-header.type16 > .header.content > .logo img {
        width: 180px;
    }
}

@media (max-width: 575px) {
    .page-header.type16 > .header.content > .logo img {
        width: 150px;
    }
}

@media (max-width: 767px) {
    .page-header.type16 > .header.content > .logo {
        flex: 0 1 auto;
        margin-right: auto !important;
        max-width: 55% !important;
    }

}

/* Der Vollbild-Overlay der Suite lag unter Bannern und Aktionsfenstern
   (z-index bis 100000). Außerdem trägt im Overlay nicht mehr die Pille des
   Themes den Rahmen, sondern die Feldzeile selbst. */
.rcs-live-search--overlay {
    background: #fff !important;
    padding: 12px !important;
    z-index: 100001 !important;
}

.rcs-live-search--overlay .rcs-live-search__field {
    background: #fff !important;
    border: 1px solid #d5d8dd;
    border-radius: 24px;
    min-height: 46px;
    padding: 0 6px 0 16px;
}

.rcs-live-search--overlay input#search {
    height: 44px !important;
    padding-left: 0 !important;
}

.rcs-live-search--overlay .rcs-live-search__panel {
    background: #fff !important;
}

/* .page-header ist ein eigener Stapelkontext (position relative, z-index 5 aus
   tuergriffwelt_de.css). Der Hinweisbanner liegt als Geschwister daneben, also
   hilft ein hoher z-index am Overlay nichts - der ganze Header muss steigen,
   solange die Suche offen ist. Die Klasse setzt die Suite am <html>. */
html.rcs-live-search-locked .page-header {
    position: relative !important;
    z-index: 100000 !important;
}

html.rcs-live-search-locked .custom-notice,
html.rcs-live-search-locked .header-notice-banner {
    z-index: 1 !important;
}

/* Knopf unter den zuletzt gesuchten Begriffen: Porto gibt jedem <button>
   graue Fläche und weiße Schrift. Hier zählt der Auslieferungszustand der
   Suite - ein schlichter Textlink. */
.rcs-live-search .rcs-live-search__clear-recent {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    cursor: pointer;
    display: block;
    font: inherit !important;
    height: auto !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    min-height: 0 !important;
    opacity: .7;
    padding: 8px var(--rcs-ls-gap, 12px) !important;
    text-align: left;
    text-shadow: none !important;
    text-transform: none !important;
    width: 100% !important;
}

.rcs-live-search .rcs-live-search__clear-recent:hover,
.rcs-live-search .rcs-live-search__clear-recent:focus {
    background: none !important;
    color: inherit !important;
    opacity: 1;
    text-decoration: underline;
}

.page-header.type16 .search-area input#search,
.page-header.type16 .search-area input#search::placeholder,
.rcs-live-search--overlay input#search,
.rcs-live-search--overlay input#search::placeholder {
    font-style: normal !important;
}


/* ====================================================================
   rcs 26.09.2026 - Menüknopf bis 991 Pixel.
   styles-l.css blendet .nav-toggle ab 768 Pixeln aus, Portos waagerechtes
   Menü erscheint aber erst ab 992. Dazwischen gab es gar kein Menü.
   ==================================================================== */

@media (min-width: 992px) {
    .page-header.type16 > .header.content > .nav-toggle {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .page-header.type16 > .header.content > .nav-toggle {
        display: inline-block !important;
        flex: 0 0 auto;
        margin: 0 0 0 14px;
        order: 5;
        position: static !important;
    }

    .page-header.type16 > .header.content > .search-area {
        flex: 0 0 auto;
        margin: 0 0 0 auto;
        max-width: none;
        padding: 0;
        width: auto;
    }
}

/* Das Medien-CSS des Themes kann .block-search unterhalb von 992 Pixeln auf
   width: 100% !important setzen (so in tuerenwelt_de.css). Zusammen mit dem
   linken Anschlag ragt die Leiste dann rechts aus dem Fenster. */
@media (max-width: 991px) {
    .page-header.type16 .search-area.show-icon-tablet .block.block-search {
        width: auto !important;
    }
}