/* Shop: Filterleiste und Live-Suche
 *
 * Layout (Raender, Filter als Text, Suchfeld auf dem Handy) steht seit
 * 2026-09-28 direkt in der Elementor-Vorlage «Shop» (3125). Diese Datei
 * enthaelt nur noch Feinheiten und die Zustaende der Live-Suche.
 * Die Filter werden ueber Elementors eigene Klassen angesprochen, damit
 * der Elementor-Editor dasselbe zeigt wie die Website.
 */

/* --- Filter: Abstand, Farbe, Unterstreichung --- */
.elementor-3125 a.qodef-button.qodef-layout--textual[href*="/shop/#"] {
    padding: 9px 9px !important;
    color: #4A4543 !important;
    transition: color .25s ease, opacity .25s ease;
}
.elementor-3125 a.qodef-button.qodef-layout--textual[href*="/shop/#"] .qodef-m-text {
    position: relative;
    display: inline-block;
    font-family: "Raleway", sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: .2em !important;
    line-height: 1.4 !important;
    padding-bottom: 7px;
    color: inherit !important;
}
.elementor-3125 a.qodef-button.qodef-layout--textual[href*="/shop/#"] .qodef-m-text::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: #C28562;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.elementor-3125 a.qodef-button.qodef-layout--textual[href*="/shop/#"]:hover { color: #111 !important; }
.elementor-3125 a.qodef-button.qodef-layout--textual[href*="/shop/#"]:focus-visible { outline: 2px solid #C28562; outline-offset: 3px; }

/* Zustaende aus dem Skript */
.ad-filter.ad-filter--aktiv { color: #111 !important; }
.ad-filter.ad-filter--aktiv .qodef-m-text::after { transform: scaleX(1); }
.ad-filter.ad-filter--leer { opacity: .35; }

/* Produktzahl je Kategorie, hochgestellt in Kupfer */
.ad-filter .ad-anzahl {
    display: inline-block;
    margin-left: .5em;
    transform: translateY(-.55em);
    font-family: "Raleway", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #C28562;
    font-variant-numeric: tabular-nums;
}

/* --- Suchfeld: Linie statt Rahmen --- */
.elementor-3125 .elementor-widget-search-form .elementor-search-form__container {
    border: 0 !important;
    border-bottom: 1px solid #E6E1DC !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    transition: border-color .25s ease;
}
.elementor-3125 .elementor-widget-search-form .elementor-search-form__container:focus-within { border-bottom-color: #C28562 !important; }
.elementor-3125 .elementor-widget-search-form .elementor-search-form__input { background: none !important; }

/* --- Trefferzeile: eigene Zeile unter dem Suchfeld --- */
.ad-status {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    margin: 12px 0 6px;
    min-height: 22px;           /* Platz immer reserviert, damit nichts springt */
    text-align: right;
    font-family: "Raleway", sans-serif;
    font-size: 11px;
    line-height: 18px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8A8580;
}
.elementor-element-bae008a .ad-status { text-align: center; }
.ad-status strong { color: #111; font-weight: 500; font-variant-numeric: tabular-nums; }
.ad-status .ad-zuruecksetzen {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 1px solid #C28562;
    padding: 0 0 2px;
    margin-left: 16px;
    cursor: pointer;
    font: inherit;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #C28562;
}
.ad-status .ad-zuruecksetzen:hover { color: #A06342; border-bottom-color: #A06342; }
.ad-status .ad-zuruecksetzen:focus-visible { outline: 2px solid #C28562; outline-offset: 3px; }
.ad-status .ad-status-kurz { display: none; }

/* --- Was die Suche ausblendet --- */
.ad-verborgen { display: none !important; }

/* --- Hinweis, wenn nichts gefunden wurde --- */
.ad-leer {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 56px 0 64px;
    text-align: center;
    font-family: "Raleway", sans-serif;
    color: #5C5856;
}
.ad-leer b {
    display: block;
    margin-bottom: 12px;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #111;
}
.ad-leer p { margin: 0 auto; max-width: 46ch; line-height: 1.7; }

/* --- Fundstelle im Produktnamen --- */
.ad-treffer-text { background: none; color: #C28562; }

/* Versatz fuer Sprungmarken (Hauptmenue, Aufruf mit #anker);
   das Skript setzt den genauen Wert je nach Kopfzeilenhoehe */
#gartenduschen, #wandduschen, #schwimmbadduschen,
#armaturen, #wasserhaehne, #fussduschen {
    scroll-margin-top: 205px;
}

@media (max-width: 767px) {
    /* Die Kategorie-Titel sind H1; hendon-child/style.css setzt fuer alle H1
       font-size: 40px !important und ueberstimmt damit Elementor. Hier gelten
       die Handy-Werte aus der Vorlage (20px / 2px), sonst bricht
       «Schwimmbadduschen» mitten im Wort um. */
    .elementor-3125 h1.elementor-heading-title {
        font-size: 20px !important;
        letter-spacing: 2px !important;
    }
    .elementor-3125 a.qodef-button.qodef-layout--textual[href*="/shop/#"] {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
    .ad-status .ad-status-lang { display: none; }
    .ad-status .ad-status-kurz { display: inline; }
    #gartenduschen, #wandduschen, #schwimmbadduschen,
    #armaturen, #wasserhaehne, #fussduschen { scroll-margin-top: 130px; }
}

@media (prefers-reduced-motion: reduce) {
    .elementor-3125 a.qodef-button.qodef-layout--textual[href*="/shop/#"],
    .elementor-3125 a.qodef-button.qodef-layout--textual[href*="/shop/#"] .qodef-m-text::after { transition: none; }
}

/* iOS vergroessert beim Antippen jedes Eingabefeld mit weniger als 16px
   Schrift. Eingetippter Text 16px, der Platzhalter bleibt klein. */
@media (max-width: 1024px) {
    .elementor-3125 .elementor-search-form__input {
        font-size: 16px !important;
        letter-spacing: .12em !important;
    }
    .elementor-3125 .elementor-search-form__input::placeholder {
        font-size: 11px;
        letter-spacing: .2em;
    }
}