.elementor-54458 .elementor-element.elementor-element-a607ed8{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-54458 .elementor-element.elementor-element-a505998{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-54458 .elementor-element.elementor-element-ca3b6bb .elementor-heading-title{color:var( --e-global-color-primary );}.elementor-54458 .elementor-element.elementor-element-7bac17c{--display:flex;--justify-content:flex-end;--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-54458 .elementor-element.elementor-element-cebe005{width:auto;max-width:auto;}.elementor-54458 .elementor-element.elementor-element-cebe005 .woocommerce-breadcrumb{color:var( --e-global-color-primary );font-family:"Encode Sans Condensed", Sans-serif;font-size:0.88rem;font-weight:400;line-height:20px;}.elementor-54458 .elementor-element.elementor-element-cebe005 .woocommerce-breadcrumb > a{color:var( --e-global-color-text );}.elementor-54458 .elementor-element.elementor-element-6619639d{--display:flex;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-54458 .elementor-element.elementor-element-a505998{--width:60%;}.elementor-54458 .elementor-element.elementor-element-7bac17c{--width:40%;}}@media(max-width:1024px) and (min-width:768px){.elementor-54458 .elementor-element.elementor-element-a505998{--width:100%;}.elementor-54458 .elementor-element.elementor-element-7bac17c{--width:100%;}}@media(max-width:1024px){.elementor-54458 .elementor-element.elementor-element-a607ed8{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-54458 .elementor-element.elementor-element-a505998{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-54458 .elementor-element.elementor-element-7bac17c{--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}}@media(max-width:767px){.elementor-54458 .elementor-element.elementor-element-a505998{--width:100%;}.elementor-54458 .elementor-element.elementor-element-7bac17c{--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}}/* Start custom CSS *//********* Page *********/
/* Header */
.smc-header-title {
	width: var(--global-block-width);
	max-width: var(--global-max-block-width) !important;
	margin: 48px auto 45px;
}
.smc-header-title span.smc-category-desc-newline {
    font-size: clamp(1.375rem, 1.386vw + 0.711rem, 1.75rem);
	line-height: 1.2;
	display: block;
	font-weight: 400;
}
.smc-header-title .smc-breadcrumb nav {
	margin-bottom: 2px; 
}
.smc-header-title .smc-breadcrumb nav a {
	white-space: nowrap;
	font-weight: 400;
}
.smc-header-title .smc-breadcrumb nav a:hover {
	white-space: nowrap;
	color: var(--e-global-color-accent) !important;
}

.smc-brands-wrapper {
	width: var(--global-block-width);
	max-width: var(--global-max-block-width) !important;
	margin:  0 auto 45px;
	box-sizing: border-box;
}

/* ==========================================
   1. A-Z ALPHABET LEISTE
   ========================================== */
.brand-alphabet-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 40px;
    padding: 10px 0;
}

.brand-alphabet-nav .smc-black-button,
.brand-alphabet-nav .smc-white-button {
    display: inline-flex;
}

.brand-alphabet-nav .smc-black-button,
.brand-alphabet-nav .smc-white-button {
    & a:not(.smc-all-button) {
        padding: 12px !important;
    }
}

/* ==========================================
   2. MARKEN-ZEILEN (LAYOUT)
   ========================================== */
.custom-brands-list .brand-row {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 40px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Letztes Element in der Liste beruhigen */
.custom-brands-list .brand-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 20px;
}

.custom-brands-list .brand-image-col {
    flex-shrink: 0;
    width: 150px;
}

/* Exakte Vorgabe für die Bilder */
.custom-brands-list .brand-image-col img {
    width: 140px;
    height: 110px;
    object-fit: contain;
}

.custom-brands-list .brand-text-col {
    flex-grow: 1;
}

/* Container für den Link unter der Description */
.brand-products-link-wrapper {
    margin-top: 15px;
}

/* ==========================================
   3. PRODUKTLINK MIT DEINEM HOVER-DESIGN
   ========================================== */
.custom-brands-list .smc-brand-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none; 
    font-weight: 500;
}

/* Hover-Stil: Textfarbe bleibt unverändert geerbt */
.custom-brands-list .smc-brand-link:hover {
    color: inherit !important; 
    text-decoration: underline;
    text-decoration-color: var( --e-global-color-accent );
    text-underline-offset: 3px;
    text-decoration-thickness: .12em;
}

/* Das SVG als vollständig codiertes CSS-Hintergrundbild davorhängen */
.custom-brands-list .smc-brand-link::before {
    content: "";
    display: inline-block;
    width: 14px;  
    height: 14px; 
    margin-right: 8px; 
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M46.604%2029.953L21.051%204.036%2018.127%206.764%2040.41%2032%2018.127%2057.235%2021.051%2059.964%2046.604%2034.047%2048.622%2032z%22/%3E%3C/svg%3E");
}

/* ==========================================
   4. SEITENNUMMERIERUNG (PAGINATION)
   ========================================== */
.brand-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.brand-pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 35px;
    height: 35px;
    padding: 0 5px;
    background: #f7f7f7;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.brand-pagination .page-link:hover {
    background: #e0e0e0;
}

.brand-pagination .page-link.active-page {
    background: #000;
    color: #fff;
}

/* ==========================================
   5. KORREKTUR FÜR TABLET QUERFORMAT (MAX-WIDTH: 1200px)
   ========================================== */
@media (max-width: 1200px) {
	/* Header */
	.smc-header-title {
		width: 90vw;
		margin-bottom: 35px;
	}
    .smc-brands-wrapper {
	    width: 90%;
    }
}

/* ==========================================
   6. ANPASSUNG FÜR TABLET HOCHFORMAT (MAX-WIDTH: 1024px)
   ========================================== */
@media (max-width: 1024px) {
	/* Header */
	.smc-header-title {
		width: 90vw;
		margin: 35px auto 25px;
	}
	.smc-header-title h1 {
		text-align: center;
	}

    /* Blendet die h2 Überschrift aus */
    .custom-brands-list .brand-text-col h2 {
        display: none !important;
    }

    /* Wechselt auf Spalten-Layout, bleibt aber linksbündig (flex-start) */
    .custom-brands-list .brand-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px;
    }

    /* Setzt die starre 150px-Breite zurück und rückt das Logo um 10px nach rechts ein */
    .custom-brands-list .brand-image-col {
        width: auto !important;
        margin-left: 10px;
    }

    /* Setzt die Höhe der Bilder zurück */
    .custom-brands-list .brand-image-col img {
        height: auto;
        max-height: 110px;
    }
}

/* ==========================================
   7. KORREKTUR FÜR MOBIL HOCHFORMAT (MAX-WIDTH: 767px)
   ========================================== */
@media (max-width: 767px) {
	/* Header */
	.smc-header-title {
		width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
	}
    .smc-brands-wrapper {
	    width: 100%;
		padding: 0 20px;
    }

    /* Setzt die 100%-Breite der Theme-Buttons zurück */
    .brand-alphabet-nav,
    .brand-alphabet-nav .smc-black-button,
    .brand-alphabet-nav .smc-white-button,
    .brand-alphabet-nav a.elementor-button {
        width: auto !important;
        flex-grow: 0 !important;
    }
    
    .brand-alphabet-nav {
        justify-content: center;
    }

    .brand-alphabet-nav .smc-black-button,
    .brand-alphabet-nav .smc-white-button {
        & a:not(.smc-all-button) {
            padding: 17px !important;
        }
    }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Encode Sans Condensed';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('/wp-content/uploads/fonts/encode-sans-condensed-v11-latin-regular.woff2') format('woff2'),
		url('/wp-content/uploads/fonts/encode-sans-condensed-v11-latin-regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Encode Sans Condensed';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('/wp-content/uploads/fonts/encode-sans-condensed-v11-latin-500.woff2') format('woff2'),
		url('/wp-content/uploads/fonts/encode-sans-condensed-v11-latin-500.ttf') format('truetype');
}
@font-face {
	font-family: 'Encode Sans Condensed';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('/wp-content/uploads/fonts/encode-sans-condensed-v11-latin-600.woff2') format('woff2'),
		url('/wp-content/uploads/fonts/encode-sans-condensed-v11-latin-600.ttf') format('truetype');
}
@font-face {
	font-family: 'Encode Sans Condensed';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('/wp-content/uploads/fonts/encode-sans-condensed-v11-latin-700.woff2') format('woff2'),
		url('/wp-content/uploads/fonts/encode-sans-condensed-v11-latin-700.ttf') format('truetype');
}
/* End Custom Fonts CSS */