/*
Theme Name: Surga Performance
Description: Shop-Theme für Surga Performance auf Basis von Twenty Twenty-Five.
Author: adocom
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 8.1
Text Domain: surga-performance
*/

/* ---------- Grundlagen ---------- */
:root {
	--sp-red: var(--wp--preset--color--accent-1);
	--sp-red-dark: var(--wp--preset--color--accent-3);
	--sp-ink: var(--wp--preset--color--contrast);
	--sp-muted: var(--wp--preset--color--accent-4);
	--sp-line: var(--wp--preset--color--accent-5);
	--sp-soft: var(--wp--preset--color--accent-2);
	--sp-radius: 6px;
	--sp-shadow: 0 1px 2px rgba(28, 33, 39, .06), 0 6px 18px rgba(28, 33, 39, .06);
}

body { -webkit-font-smoothing: antialiased; }

/* Fließtext auf lesbare Zeilenlänge begrenzen */
.wp-block-post-content > p,
.woocommerce-Tabs-panel p,
.wc-block-components-product-details p,
.wp-block-woocommerce-product-details p { max-width: 70ch; }

/* ---------- Kopfbereich ---------- */
.sp-topbar { background: #0b0c0e; color: #e9eaec; font-size: .8rem; padding-top: .5rem; padding-bottom: .5rem; }
.sp-topbar-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.sp-topbar-item { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.sp-topbar-center { justify-self: center; }
.sp-topbar-right { justify-self: end; }
.sp-topbar .sp-ico { width: 18px; height: 18px; }
.sp-topbar .sp-eu { width: 30px; height: 20px; border-radius: 2px; }
@media (max-width: 900px) {
	.sp-topbar-row { grid-template-columns: 1fr; justify-items: center; }
	.sp-topbar-left, .sp-topbar-right { display: none; }
}

.sp-header-main { background: #141518; color: #fff; padding-top: 1.1rem; padding-bottom: 1.1rem; }
.sp-header-row { gap: clamp(14px, 3vw, 48px); }

/* Wortmarke (Platzhalter bis zur Logo-Datei) */
.sp-logo, .sp-hero-logo { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: .45rem; align-items: end; text-decoration: none; color: #fff; font-family: var(--wp--preset--font-family--fira-sans); line-height: .9; }
.sp-logo:hover { color: #fff; }
.sp-logo-name { grid-column: 2; font-style: italic; font-weight: 900; font-size: 2.35rem; letter-spacing: .02em; transform: skewX(-6deg); }
.sp-logo-sub { grid-column: 2; font-style: italic; font-weight: 800; font-size: .72rem; letter-spacing: .58em; margin-top: .3rem; padding-left: .2em; }
.sp-logo-slash { grid-row: 1 / span 2; align-self: end; width: 26px; height: 14px; margin-bottom: 2px;
	background: repeating-linear-gradient(115deg, var(--sp-red) 0 5px, transparent 5px 9px); }

.sp-search { flex: 1 1 auto; max-width: 600px; margin: 0; }
.sp-search .wp-block-search__inside-wrapper { border: 0; border-radius: 4px; padding: 0; background: #fff; overflow: hidden; }
.sp-search .wp-block-search__input { border: 0; background: #fff; padding: .8rem 1rem; font-size: .95rem; color: var(--sp-ink); }
.sp-search .wp-block-search__input:focus { outline: none; }
.sp-search .wp-block-search__button { border-radius: 0; background: var(--sp-red); color: #fff; margin: 0; padding: 0 1rem; min-width: 52px; }
.sp-search .wp-block-search__button:hover { background: var(--sp-red-dark); }

.sp-header-icons { gap: 0; }
.sp-header-icons > * { display: flex; flex-direction: column; align-items: center; padding: 0 clamp(10px, 1.6vw, 24px); border-left: 1px solid rgba(255,255,255,.12); }
.sp-header-icons > *:first-child { border-left: 0; }
.sp-header-icons a, .sp-header-icons button, .sp-header-icons .wc-block-mini-cart__button { color: #fff !important; }
.sp-header-icons svg { width: 28px; height: 28px; }
.sp-account::after, .sp-cart::after { font-size: .78rem; color: #fff; margin-top: .25rem; white-space: nowrap; }
.sp-account::after { content: "Mein Konto"; }
.sp-cart::after { content: "Warenkorb"; }
.sp-header-icons .wc-block-mini-cart__button { padding: 0; }
.sp-header-icons .wc-block-mini-cart__badge { background: var(--sp-red); color: #fff; border: 0; font-weight: 700; }
.sp-header-icons .wc-block-mini-cart__amount { display: none; }

.sp-navbar { background: #1c1e22; position: relative; z-index: 30; }
.sp-navbar-row { gap: 1rem; align-items: stretch; }
.sp-nav { font-size: .92rem; font-weight: 600; color: #fff; }
.sp-nav .wp-block-navigation-item__content { color: #fff; padding: 1.05rem 1.15rem; display: inline-block; }
.sp-nav .wp-block-navigation__submenu-icon { color: #fff; margin-left: -.6rem; margin-right: .4rem; }
.sp-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover { color: #fff; background: rgba(255,255,255,.06); }
.sp-nav .sp-nav-home > .wp-block-navigation-item__content { background: var(--sp-red); }
.sp-nav .sp-nav-home > .wp-block-navigation-item__content:hover { background: var(--sp-red-dark) !important; }
.sp-nav .sp-nav-sale > .wp-block-navigation-item__content { color: #ff4048; }
.sp-nav .wp-block-navigation__submenu-container { background: #fff !important; color: var(--sp-ink) !important; border: 0 !important; border-top: 3px solid var(--sp-red) !important; box-shadow: 0 14px 30px rgba(0,0,0,.25); padding: .5rem 0; min-width: 270px !important; font-weight: 500; }
.sp-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: var(--sp-ink); padding: .5rem 1.15rem; }
.sp-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--sp-red); background: var(--sp-soft); }
.sp-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:first-child > .wp-block-navigation-item__content { font-weight: 700; }
@media (min-width: 900px) {
	.sp-nav .sp-mega > .wp-block-navigation__submenu-container { display: grid !important; grid-template-columns: repeat(2, minmax(230px, 1fr)); width: min(560px, 90vw) !important; }
	.sp-nav-service .wp-block-navigation__submenu-container { left: auto !important; right: 0 !important; }
}
.wp-site-blocks { overflow-x: clip; }
@media (max-width: 899px) {
	.sp-header-row { flex-wrap: wrap !important; }
	.sp-search { order: 3; flex-basis: 100%; max-width: none; }
	.sp-logo-name { font-size: 1.8rem; }
	.sp-account::after, .sp-cart::after { display: none; }
	.sp-nav-service { display: none; }
	.sp-nav .wp-block-navigation__responsive-container-open { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 0; font-weight: 700; color: #fff; }
	.sp-nav .wp-block-navigation__responsive-container-open::after { content: "Menü"; }
	.sp-nav .wp-block-navigation__responsive-container.is-menu-open { background: #141518 !important; color: #fff !important; }
	.sp-nav .is-menu-open .wp-block-navigation__submenu-container { background: transparent !important; border: 0 !important; box-shadow: none; }
	.sp-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: #d6d8dc; }
}

/* ---------- Startseite ---------- */
.sp-hero { position: relative; overflow: hidden; color: #fff;
	background:
		radial-gradient(60% 90% at 18% 55%, rgba(224, 30, 38, .55) 0%, rgba(224, 30, 38, 0) 60%),
		linear-gradient(180deg, #121316 0%, #0b0c0e 100%);
}
.sp-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 1 55 16.5v32L28 64 1 48.5v-32Z M28 64v33' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E");
	background-size: 42px 73px;
	-webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 70%); mask-image: linear-gradient(90deg, transparent 30%, #000 70%); }
.sp-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; min-height: clamp(360px, 38vw, 480px); }
.sp-hero-visual { position: relative; height: 100%; min-height: 260px; }
.sp-hero-glow { position: absolute; left: 10%; top: 50%; width: 70%; aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 60, 66, .55) 0%, rgba(224, 30, 38, .15) 45%, transparent 70%); filter: blur(8px); }
.sp-hero-streak { position: absolute; left: -10%; height: 4px; width: 75%; border-radius: 4px; transform: rotate(-12deg);
	background: linear-gradient(90deg, transparent, rgba(255, 70, 76, .95), transparent); box-shadow: 0 0 18px rgba(255, 40, 48, .9); }
.sp-hero-streak-1 { top: 28%; }
.sp-hero-streak-2 { top: 52%; width: 90%; opacity: .7; }
.sp-hero-streak-3 { top: 74%; width: 60%; opacity: .5; }
.sp-hero-content { padding: clamp(2rem, 5vw, 3.5rem) 0; text-align: center; }
.sp-hero-logo { margin: 0 auto 1.2rem; }
.sp-hero-logo .sp-logo-name { font-size: clamp(2.6rem, 5.5vw, 4.4rem); }
.sp-hero-logo .sp-logo-sub { font-size: clamp(.8rem, 1.4vw, 1.1rem); }
.sp-hero-logo .sp-logo-slash { width: 44px; height: 24px; background: repeating-linear-gradient(115deg, var(--sp-red) 0 8px, transparent 8px 14px); }
.sp-hero-title { margin: 0; color: #fff; font-family: var(--wp--preset--font-family--fira-sans); font-style: italic; text-transform: uppercase; line-height: 1; }
.sp-hero-kicker { display: block; font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2.1rem); letter-spacing: .02em; }
.sp-hero-main { display: block; font-weight: 900; font-size: clamp(2.1rem, 4.3vw, 3.7rem); white-space: nowrap; color: var(--sp-red); letter-spacing: -.01em; margin-top: .25rem; text-shadow: 0 2px 20px rgba(224, 30, 38, .35); }
.sp-hero-claim { margin: .9rem 0 0; font-family: var(--wp--preset--font-family--fira-sans); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(.95rem, 1.6vw, 1.25rem); letter-spacing: .02em; color: #fff; }
.sp-hero-features { list-style: none; margin: 1.8rem 0 0; padding: 0; display: flex; justify-content: center; gap: clamp(.9rem, 2vw, 1.8rem); flex-wrap: nowrap; text-align: left; }
.sp-hero-features li { display: flex; align-items: center; gap: .7rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .02em; color: #d9dbdf; }
.sp-hero-features svg { width: 38px; height: 38px; flex: 0 0 38px; color: #fff; }
.sp-hero-features strong { display: block; color: #fff; font-family: var(--wp--preset--font-family--fira-sans); font-size: .95rem; }
@media (max-width: 900px) {
	.sp-hero-grid { grid-template-columns: 1fr; }
	.sp-hero-visual { position: absolute; inset: 0; min-height: 0; opacity: .6; }
}

/* Bereichs-Kacheln */
.sp-areas-wrap { background: #fff; padding-top: 12px; padding-bottom: 12px; }
.sp-areas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .sp-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sp-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp-area { position: relative; display: block; aspect-ratio: 16 / 8; overflow: hidden; border-radius: 4px; background: #1c1e22; color: #fff; text-decoration: none; }
.sp-area-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) contrast(1.05); transition: transform .35s; }
.sp-area::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.82) 100%); }
.sp-area:hover .sp-area-media img { transform: scale(1.05); }
.sp-area-label { position: absolute; z-index: 1; left: 14px; bottom: 12px; font-family: var(--wp--preset--font-family--fira-sans); font-weight: 700; text-transform: uppercase; font-size: clamp(.85rem, 1.2vw, 1rem); letter-spacing: .02em; color: #fff; }
.sp-area-arrow { position: absolute; z-index: 1; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 3px; background: var(--sp-red); }
.sp-area-arrow::before { content: ""; position: absolute; inset: 0; background: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 60% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 60% no-repeat; }
.sp-area:hover .sp-area-arrow { background: var(--sp-red-dark); }

/* Vorteilsleiste */
.sp-usp { background: var(--sp-soft); padding-top: 1.6rem; padding-bottom: 1.6rem; }
.sp-usp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2rem; }
@media (max-width: 1000px) { .sp-usp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sp-usp-list { grid-template-columns: 1fr; } }
.sp-usp-list li { display: flex; align-items: center; gap: .9rem; font-size: .85rem; color: var(--sp-muted); line-height: 1.4; }
.sp-usp-list svg { width: 40px; height: 40px; flex: 0 0 40px; color: var(--sp-ink); }
.sp-usp-list strong { display: block; color: var(--sp-ink); font-size: .98rem; }
.sp-usp-list a { color: var(--sp-muted); text-decoration: none; }

/* Abschnitte */
.sp-section { padding-top: clamp(2.2rem, 5vw, 3.5rem); padding-bottom: clamp(2.2rem, 5vw, 3.5rem); }
.sp-section-alt { background: var(--sp-soft); }
.sp-section-head { margin-bottom: 1.25rem; }
.sp-section-title { font-family: var(--wp--preset--font-family--fira-sans); font-weight: 800; text-transform: uppercase; font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important; margin: 0; letter-spacing: -.005em; }
.sp-more-link { margin: 0; font-weight: 700; }
.sp-more-link a { color: var(--sp-red); text-decoration: none; }
.sp-more-link a::after { content: " →"; }

/* Top-Kategorien */
.sp-topcats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .sp-topcats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sp-topcats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.sp-topcat { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--sp-line); border-radius: 4px; overflow: hidden; text-decoration: none; color: var(--sp-ink); transition: box-shadow .2s, transform .2s; }
.sp-topcat:hover { box-shadow: var(--sp-shadow); transform: translateY(-2px); color: var(--sp-ink); }
.sp-topcat-media { display: block; aspect-ratio: 16 / 10; background: #1c1e22; overflow: hidden; }
.sp-topcat-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-topcat-body { padding: .85rem 1rem 1rem; }
.sp-topcat-title { display: block; font-weight: 700; font-size: 1rem; }
.sp-topcat-sub { display: block; color: var(--sp-muted); font-size: .85rem; margin-top: .15rem; }

/* ---------- Produktlisten (klassisch + Blöcke) ---------- */
.woocommerce ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0 !important; padding: 0; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
@media (max-width: 1000px) { .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.woocommerce ul.products li.product,
.wc-block-product-template .wc-block-product,
.wp-block-woocommerce-product-template > li {
	width: auto !important; margin: 0 !important; float: none !important;
	background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-radius);
	padding: 12px 12px 16px !important; display: flex; flex-direction: column;
	transition: box-shadow .2s, border-color .2s;
}
.woocommerce ul.products li.product:hover,
.wc-block-product-template .wc-block-product:hover { box-shadow: var(--sp-shadow); border-color: #d0d4da; }
.woocommerce ul.products li.product a img,
.wc-block-product-template .wc-block-components-product-image img { aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border-radius: 6px; margin-bottom: .75rem !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-product-template .wp-block-post-title { font-size: .95rem !important; font-weight: 600; line-height: 1.35; padding: 0 !important; margin: 0 0 .5rem !important; color: var(--sp-ink);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wc-block-product-template .wp-block-post-title a { text-decoration: none; }
.woocommerce ul.products li.product .price,
.wc-block-product-template .wc-block-components-product-price { color: var(--sp-ink) !important; font-weight: 800; font-size: 1.1rem !important; margin: 0 0 .25rem !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__link { display: block; margin-bottom: auto; }
.woocommerce ul.products li.product *,
.wc-block-product-template .wc-block-product * { box-sizing: border-box; }
.woocommerce ul.products li.product .price del,
.wc-block-components-product-price del { color: var(--sp-muted); font-weight: 500; font-size: .85em; }
.woocommerce ul.products li.product .price ins,
.wc-block-components-product-price ins { color: var(--sp-red); text-decoration: none; }
.woocommerce ul.products li.product .button,
.wc-block-product-template .wp-block-button__link { width: 100%; max-width: 100%; display: block; text-align: center; margin-top: .75rem !important; border-radius: 6px; background: var(--sp-ink); color: #fff; font-size: .88rem; padding: .65rem 1rem; }
.woocommerce ul.products li.product .button:hover,
.wc-block-product-template .wp-block-button__link:hover { background: var(--sp-red); color: #fff; }
.woocommerce span.onsale,
.wc-block-components-product-sale-badge { background: var(--sp-red) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; font-weight: 700; font-size: .75rem; padding: .2rem .65rem !important; min-height: 0 !important; line-height: 1.6 !important; }

/* Produkt-Raster der Block-Kollektionen (Shop, Kategorien, ähnliche Produkte) */
ul.wc-block-product-template { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px !important; margin: 0; padding: 0; list-style: none; }
ul.wc-block-product-template.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
ul.wc-block-product-template.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
ul.wc-block-product-template.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1000px) { ul.wc-block-product-template[class*="columns-"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { ul.wc-block-product-template[class*="columns-"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px !important; } }
ul.wc-block-product-template > li { max-width: none !important; }

/* Ähnliche Produkte: kompakt und übersichtlich */
.sp-product .wp-block-woocommerce-product-collection[data-collection*="related"] { margin-top: clamp(2rem, 5vw, 3rem) !important; padding-top: 1.5rem; border-top: 1px solid var(--sp-line); }
.sp-product [data-collection*="related"] h2 { font-size: 1.25rem !important; margin: 0 0 1rem !important; text-align: left !important; }
.sp-product [data-collection*="related"] ul.wc-block-product-template { gap: 14px !important; }
.sp-product [data-collection*="related"] .wc-block-product { padding: 10px 10px 12px !important; }
.sp-product [data-collection*="related"] .wc-block-components-product-image img { aspect-ratio: 1 / 1; max-height: 170px; width: 100%; object-fit: contain; margin-bottom: .5rem !important; }
.sp-product [data-collection*="related"] .wp-block-post-title { font-size: .85rem !important; -webkit-line-clamp: 2; margin-bottom: .35rem !important; }
.sp-product [data-collection*="related"] .wc-block-components-product-price { font-size: .95rem !important; }
.sp-product [data-collection*="related"] .wp-block-button__link { font-size: .8rem; padding: .5rem .6rem; margin-top: .5rem !important; }
.sp-product [data-collection*="related"] .wc-gzd-additional-info,
.sp-product [data-collection*="related"] [class*="wp-block-woocommerce-germanized"] { display: none; }
@media (max-width: 760px) { .sp-product [data-collection*="related"] ul.wc-block-product-template > li:nth-child(n+5) { display: none; } }

/* Germanized-Hinweise in Listen dezent */
.woocommerce ul.products li.product .wc-gzd-additional-info,
.wc-block-product-template .wc-gzd-additional-info { font-size: .75rem; color: var(--sp-muted); margin: .15rem 0 0; }

/* ---------- Produktseite ---------- */
.single-product .wp-block-post-title { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.single-product .wc-block-components-product-price,
.single-product .wp-block-woocommerce-product-price { font-size: 1.7rem !important; font-weight: 800; }
.single-product .wc-block-components-product-price ins { color: var(--sp-red); }
.single-product .woocommerce-product-gallery__image img,
.single-product .wc-block-product-gallery-large-image img { border-radius: var(--sp-radius); }
.single-product .flex-control-thumbs { display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 8px !important; }
.single-product .flex-control-thumbs li { width: auto !important; margin: 0 !important; }
.single-product .flex-control-thumbs img { border-radius: 6px; border: 1px solid var(--sp-line); }
.single-product form.cart .single_add_to_cart_button,
.single-product .wp-block-add-to-cart-form .single_add_to_cart_button { background: var(--sp-red) !important; color: #fff !important; border-radius: 6px; font-weight: 700; padding: .85rem 1.6rem !important; }
.single-product form.cart .single_add_to_cart_button:hover { background: var(--sp-red-dark) !important; }
.single-product form.cart .quantity input.qty { border: 1px solid var(--sp-line); border-radius: 6px; padding: .7rem .4rem; }
.wc-gzd-additional-info, .delivery-time-info, .shipping-costs-info, .wc-gzd-additional-info-placeholder { color: var(--sp-muted); font-size: .9rem; }
.delivery-time-info { color: #2e7d32; font-weight: 600; }

.sp-product .wc-block-breadcrumbs { color: var(--sp-muted); margin-bottom: 1rem; }
.sp-product .wc-block-breadcrumbs a { color: var(--sp-muted); }
.sp-product-summary > * + * { margin-top: .9rem; }
.sp-product-summary .wp-block-post-title { margin: 0; }
.sp-legal-info { margin-top: .35rem !important; font-size: .88rem; color: var(--sp-muted); line-height: 1.5; }
.sp-legal-info > * { margin: 0 !important; }
.sp-legal-info .delivery-time-info, .sp-legal-info [class*="delivery-time"] { color: #2e7d32; font-weight: 700; }
.sp-legal-info a { color: var(--sp-muted); }
.sp-product .stock.in-stock { color: #2e7d32; font-weight: 600; }
.sp-product .stock.out-of-stock { color: var(--sp-red); font-weight: 600; }

/* PayPal-Express-Buttons (erscheinen nach der PayPal-Verbindung) */
.sp-product .ppc-button-wrapper, .sp-product #ppc-button-ppcp-gateway { margin-top: .9rem; max-width: 420px; }
.sp-product .ppcp-messages { margin-top: .5rem; }

.sp-trust { background: var(--sp-soft); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); padding: .9rem 1.1rem; max-width: 520px; }
.sp-trust-list { list-style: none; margin: 0; padding: 0; }
.sp-trust-list li { position: relative; padding-left: 1.6rem; margin: .2rem 0; }
.sp-trust-list li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.05rem; height: 1.05rem; background: var(--sp-red); border-radius: 50%;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 80% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 80% no-repeat; }
.sp-trust-list a { font-weight: 700; color: var(--sp-ink); text-decoration: none; }
.sp-meta { color: var(--sp-muted); }
.sp-meta > * { margin: .1rem 0 !important; }
.sp-meta a { color: var(--sp-muted); }

.sp-product-details { margin-top: clamp(2rem, 5vw, 3.5rem) !important; border-top: 1px solid var(--sp-line); padding-top: 1.5rem; }
.sp-product-details .woocommerce-tabs ul.tabs, .sp-product-details .wc-tabs { border-bottom: 1px solid var(--sp-line); padding: 0; }
.sp-product-details .wc-tabs li.active a, .sp-product-details .woocommerce-tabs ul.tabs li.active a { color: var(--sp-red); border-bottom: 3px solid var(--sp-red); }
.sp-product-details .woocommerce-Tabs-panel { max-width: 860px; }
.sp-product .wp-block-woocommerce-related-products h2, .sp-product .related.products h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-top: clamp(2rem, 5vw, 3.5rem); }

/* Zahlungsarten im Fuß */
.sp-payments { gap: .5rem; align-items: center; }
.sp-payments p { margin: 0; }
/* Markenname als Text (offizielles PayPal-Logo nur aus PayPals eigenem Akzeptanz-Material verwenden) */
.sp-pay-badge { display: inline-flex; align-items: center; background: #fff; color: var(--sp-ink); font-weight: 700; border-radius: 6px; padding: .2rem .7rem; font-size: .9rem; }

/* Staffelpreis-Tabelle */
.tiered-pricing-wrapper { margin: 1rem 0 1.25rem; }
.tiered-pricing-wrapper h3, .tiered-pricing-wrapper .tiered-pricing-title { font-size: 1rem; margin: 0 0 .5rem; }
.tiered-pricing-table { width: 100%; max-width: 420px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--sp-line); border-radius: 8px; overflow: hidden; font-size: .92rem; }
.tiered-pricing-table th { background: var(--sp-soft); text-align: left; font-weight: 700; }
.tiered-pricing-table th, .tiered-pricing-table td { padding: .5rem .8rem; border-bottom: 1px solid var(--sp-line); }
.tiered-pricing-table tr:last-child td { border-bottom: 0; }
.tiered-pricing-table .tiered-pricing--active td,
.tiered-pricing-table .tiered-pricing--active td * { color: #fff !important; font-weight: 700; }

/* Tabs / Beschreibung */
.woocommerce-tabs ul.tabs li a, .wc-tabs li a { font-weight: 700; }
.woocommerce-Tabs-panel img { max-width: 100%; height: auto; }

/* ---------- Fußbereich ---------- */
.sp-footer a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.sp-footer a:hover { color: #fff; text-decoration: underline; }
.sp-footer p { color: rgba(255, 255, 255, .75); }
.sp-footer-title { color: #fff !important; margin-bottom: .6rem; }
.sp-footer-links { list-style: none; padding: 0; margin: 0; }
.sp-footer-links li { margin: 0 0 .35rem; }
.sp-footer-sep { margin: 2rem 0 1rem; border: 0; height: 1px; opacity: 1; }
.sp-footer-note { font-size: .8rem !important; margin: 0; }

@media (max-width: 1100px) { .sp-hero-features { flex-wrap: wrap; } }
@media (max-width: 600px) { .sp-hero-main { white-space: normal; } }
.sp-hero-features li span { white-space: nowrap; }
@media (max-width: 1100px) { .sp-hero-features li span { white-space: normal; } }

/* Kategorie-, Shop- und Suchseiten: 4 Spalten */
@media (min-width: 1001px) {
	.tax-product_cat ul.wc-block-product-template.columns-3,
	.post-type-archive-product ul.wc-block-product-template.columns-3,
	.search ul.wc-block-product-template.columns-3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Widerrufsbutton (§ 356a BGB) im Fußbereich */
.sp-footer .eu-owb-order-withdraw-from-contract-button { margin: 1rem 0 0; text-align: left !important; }
.sp-footer .eu-owb-order-withdraw-from-contract-button .button { display: inline-block; background: transparent; color: #fff !important; border: 1px solid rgba(255,255,255,.55); border-radius: 4px; padding: .55rem 1.1rem; font-size: .88rem; font-weight: 700; text-decoration: none; }
.sp-footer .eu-owb-order-withdraw-from-contract-button .button:hover { background: var(--sp-red); border-color: var(--sp-red); text-decoration: none; }

/* ---------- Einstieg nach Designvorlage: Auto links bündig, Text rechts ---------- */
.sp-hero { --sp-hero-h: clamp(330px, 23.5vw, 440px); --sp-car-w: calc(var(--sp-hero-h) * 2.133);
	background:
		linear-gradient(90deg, rgba(13,14,16,0) 0, rgba(13,14,16,0) calc(var(--sp-car-w) - 170px), #0d0e10 calc(var(--sp-car-w) - 10px)),
		url("assets/images/hero-auto.jpg") left center / auto 100% no-repeat,
		radial-gradient(70% 120% at 85% 50%, rgba(224,30,38,.18), transparent 60%),
		#0d0e10; }
.sp-hero::after { -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--sp-car-w) - 80px), #000 calc(var(--sp-car-w) + 120px)); mask-image: linear-gradient(90deg, transparent calc(var(--sp-car-w) - 80px), #000 calc(var(--sp-car-w) + 120px)); opacity: .14; }
.sp-hero-grid { min-height: var(--sp-hero-h); grid-template-columns: 1fr 1.08fr; }
.sp-hero-visual { display: block; min-height: 0; }
.sp-hero-visual > * { display: none; }
.sp-hero-content { position: relative; z-index: 2; padding: 1.6rem 0; }
.sp-hero-logo { margin-bottom: .6rem; }
.sp-hero-logo .sp-logo-name { font-size: clamp(2.6rem, 4.6vw, 4.2rem); }
.sp-hero-title, .sp-hero-claim, .sp-hero-features strong { font-family: var(--wp--preset--font-family--fira-condensed); }
.sp-hero-kicker { font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2.2rem); letter-spacing: .01em; }
.sp-hero-main { font-weight: 900; font-size: clamp(2.5rem, 4.8vw, 4.6rem); letter-spacing: 0; margin-top: .1rem; }
.sp-hero-claim { font-weight: 800; font-size: clamp(1rem, 1.6vw, 1.4rem); margin-top: .5rem; }
.sp-hero-features { margin-top: 1.3rem; }
.sp-hero-features strong { font-size: 1.05rem; font-style: normal; font-weight: 700; letter-spacing: .02em; }
.sp-hero-features li { font-size: .8rem; }
@media (max-width: 900px) {
	.sp-hero { background:
		linear-gradient(180deg, rgba(13,14,16,.35) 0, rgba(13,14,16,.85) 55%, #0d0e10 100%),
		url("assets/images/hero-auto.jpg") 30% top / auto 300px no-repeat, #0d0e10; }
	.sp-hero::after { -webkit-mask-image: none; mask-image: none; }
	.sp-hero-grid { grid-template-columns: 1fr; min-height: 0; }
	.sp-hero-visual { display: block; height: 170px; position: static; opacity: 1; }
	.sp-hero-content { padding-top: .5rem; }
}

/* Kopf: größere Wortmarke wie in der Vorlage */
.sp-header-main .sp-logo-name { font-size: 2.9rem; }
.sp-header-main .sp-logo-sub { font-size: .82rem; letter-spacing: .62em; }
.sp-header-main .sp-logo-slash { width: 32px; height: 16px; }
@media (max-width: 899px) { .sp-header-main .sp-logo-name { font-size: 2rem; } .sp-header-main .sp-logo-sub { font-size: .62rem; } }

/* Bereichs-Kacheln dunkel wie in der Vorlage */
.sp-area-media img { filter: grayscale(.55) brightness(.6) contrast(1.15); }
.sp-area::after { background: linear-gradient(180deg, rgba(10,10,12,.15) 0%, rgba(10,10,12,.85) 100%); }
.sp-area-label { font-family: var(--wp--preset--font-family--fira-condensed); font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.2rem); }
.sp-section-title { font-family: var(--wp--preset--font-family--fira-condensed) !important; font-style: normal; font-weight: 700 !important; font-size: clamp(1.7rem, 2.8vw, 2.3rem) !important; }

/* ---------- Seitenhintergrund: helles Grau mit feiner Wabenstruktur (aufgegriffen vom Kopfbereich), Karten bleiben weiß ---------- */
body { --sp-line: #E1E4E8; background-color: #F1F2F4;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'%3E%3Cpath d='M14 0l14 8.08v16.17L14 32.33 0 24.25V8.08zM14 32.33v16.17' fill='none' stroke='%23141518' stroke-opacity='.045' stroke-width='1'/%3E%3C/svg%3E"); }
.sp-usp, .sp-section-alt { background: rgba(255,255,255,.75); }
.wp-block-woocommerce-product-details { background: #fff; border-radius: 6px; padding: 1.2rem 1.4rem; }
.wp-block-woocommerce-product-image-gallery { background: #fff; border-radius: 6px; padding: .6rem; }
.sp-topcat,
.woocommerce ul.products li.product,
.wc-block-product-template .wc-block-product { background: #fff; box-shadow: 0 1px 2px rgba(20,21,24,.05); }

/* Hauptmenü: Menüpunkte immer einzeilig, Abstände und Schrift passen sich der Breite an */
@media (min-width: 900px) {
	.sp-navbar-row { flex-wrap: nowrap !important; }
	.sp-nav .wp-block-navigation__container { flex-wrap: nowrap !important; gap: 0 !important; }
	.sp-nav .wp-block-navigation-item__content { white-space: nowrap; }
	.sp-nav { font-size: clamp(.78rem, .62vw + .3rem, .92rem); }
	.sp-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { padding-left: clamp(.5rem, 1.25vw - .45rem, 1.15rem); padding-right: clamp(.5rem, 1.25vw - .45rem, 1.15rem); }
	.sp-nav .wp-block-navigation__submenu-icon { margin-left: clamp(-.6rem, -.5vw + .1rem, -.2rem); margin-right: clamp(.15rem, .35vw, .4rem); }
}
/* Schmale Bildschirme: Service/Über uns ausblenden (Links stehen im Fußbereich), Rest enger */
@media (min-width: 900px) and (max-width: 1099px) { .sp-nav-service { display: none !important; } }
@media (min-width: 900px) and (max-width: 979px) {
	.sp-nav { font-size: .76rem; }
	.sp-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { padding-left: .42rem; padding-right: .42rem; }
}
/* Kurze Menünamen auf kleinen Laptops (Dämmung, Adapter, Werkstatt) – Service/Über uns bleiben sichtbar */
@media (min-width: 900px) and (max-width: 1099px) {
	.sp-nav [class*="sp-kurz-"] > a .wp-block-navigation-item__label { font-size: 0; }
	.sp-nav [class*="sp-kurz-"] > a .wp-block-navigation-item__label::after { font-size: .8rem; }
	.sp-nav .sp-kurz-daemmung > a .wp-block-navigation-item__label::after { content: "Dämmung"; }
	.sp-nav .sp-kurz-adapter > a .wp-block-navigation-item__label::after { content: "Adapter"; }
	.sp-nav .sp-kurz-werkstatt > a .wp-block-navigation-item__label::after { content: "Werkstatt"; }
	.sp-nav-service { display: flex !important; }
}

/* ---------- Mobil: kräftiger und klarer (Auto frei oben, mehr Kontrast) ---------- */
@media (max-width: 900px) {
	/* Auto unverdeckt in voller Breite, Text darunter auf Dunkel */
	.sp-hero { --sp-car-h: calc(100vw * 347 / 740);
		background:
			linear-gradient(180deg, rgba(13,14,16,0) 0, rgba(13,14,16,0) calc(var(--sp-car-h) * .78), #0d0e10 var(--sp-car-h)),
			url("assets/images/hero-auto.jpg") center top / 100% auto no-repeat, #0d0e10; }
	.sp-hero::after { -webkit-mask-image: linear-gradient(180deg, transparent var(--sp-car-h), #000 calc(var(--sp-car-h) + 60px)); mask-image: linear-gradient(180deg, transparent var(--sp-car-h), #000 calc(var(--sp-car-h) + 60px)); }
	.sp-hero-visual { height: calc(var(--sp-car-h) - 1.5rem); }
	.sp-hero-logo { display: none; }
	.sp-hero-content { padding-bottom: 1.8rem; }
	/* Bereichs-Kacheln heller, Beschriftung passt */
	.sp-area-media img { filter: grayscale(.15) brightness(.82) contrast(1.1); }
	.sp-area::after { background: linear-gradient(180deg, rgba(10,10,12,0) 30%, rgba(10,10,12,.8) 100%); }
	.sp-area-label { font-size: .9rem; left: 10px; right: 44px; bottom: 9px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.sp-areas > .sp-area:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 5; }
	/* Texte dunkler und größer */
	body { --sp-muted: #474C54; -webkit-font-smoothing: auto; }
	.sp-usp-list li { font-size: .9rem; }
	.sp-usp-list strong { font-size: 1rem; }
}

/* Warenkorb, Kasse, Mini-Warenkorb: "Sparen Sie …" passt in die Preisspalte statt über den Produktnamen zu ragen */
.wc-block-components-order-summary-item__total-price,
.wc-block-cart-item__total { min-width: 0 !important; flex: 0 0 86px !important; max-width: 86px; text-align: right; }
.wc-block-cart-item__total-price-and-sale-badge-wrapper { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.wc-block-components-sale-badge { white-space: normal !important; text-align: center; line-height: 1.25; max-width: 100%;
	font-size: .72rem !important; font-weight: 700; padding: 2px 6px !important; border-radius: 4px !important;
	background: #FDECEC !important; color: var(--sp-red-dark, #B3121A) !important; border: 0 !important; }
/* Warenkorb mobil: eigene Spalte für Preis und Ersparnis */
.wc-block-cart.is-mobile .wc-block-cart-items__row,
.wc-block-cart.is-small .wc-block-cart-items__row { grid-template-columns: 72px minmax(0, 1fr) 86px !important; column-gap: 12px; }
.wc-block-cart.is-mobile .wc-block-cart-item__product,
.wc-block-cart.is-small .wc-block-cart-item__product { grid-column: 2 / 3 !important; grid-row: 1 !important; }
.wc-block-cart.is-mobile .wc-block-cart-item__total,
.wc-block-cart.is-small .wc-block-cart-item__total { grid-column: 3 / 4 !important; grid-row: 1 !important; }
.wc-block-mini-cart__drawer .wc-block-cart-items__row { grid-template-columns: 64px minmax(0, 1fr) 80px !important; column-gap: 10px; }
.wc-block-mini-cart__drawer .wc-block-cart-item__product { grid-column: 2 / 3 !important; grid-row: 1 !important; }
.wc-block-mini-cart__drawer .wc-block-cart-item__total { grid-column: 3 / 4 !important; grid-row: 1 !important; flex-basis: 80px !important; max-width: 80px; }

/* Kontaktformular (Contact Form 7) im Stil der Kassenfelder */
.wpcf7 { margin-top: 1.5rem; background: #fff; border: 1px solid var(--sp-line); border-radius: 6px; padding: clamp(1rem, 3vw, 1.75rem); }
.wpcf7 form > p { margin: 0 0 1rem; }
.wpcf7 label { display: block; font-weight: 600; font-size: .9rem; color: var(--sp-ink); }
.wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: .35rem; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea { width: 100%; box-sizing: border-box; font: inherit; font-weight: 400; padding: .75rem .9rem; border: 1px solid #c9cdd3; border-radius: 4px; background: #fff; color: var(--sp-ink); }
.wpcf7 textarea { min-height: 160px; resize: vertical; }
.wpcf7 input:focus, .wpcf7 textarea:focus { outline: none; border-color: var(--sp-ink); box-shadow: 0 0 0 1px var(--sp-ink); }
.wpcf7 .sp-form-hinweis { font-size: .85rem; color: var(--sp-muted); }
.wpcf7 input[type="submit"] { background: var(--sp-red); color: #fff; border: 0; border-radius: 4px; padding: .85rem 1.6rem; font: inherit; font-weight: 700; cursor: pointer; }
.wpcf7 input[type="submit"]:hover { background: var(--sp-red-dark, #B3121A); }
.wpcf7 .wpcf7-not-valid-tip { color: var(--sp-red-dark, #B3121A); font-size: .8rem; margin-top: .25rem; }
.wpcf7 .wpcf7-response-output { margin: 1rem 0 0 !important; padding: .75rem 1rem !important; border-radius: 4px; font-size: .9rem; }

/* ---------- Zusatzangebote (TikTok, Paketshop, Fahrzeugaufbereitung) ---------- */
.sp-extras { padding: clamp(2rem, 4vw, 3rem) var(--wp--style--root--padding-right, 24px) clamp(2rem, 4vw, 3rem) var(--wp--style--root--padding-left, 24px); }
.sp-extras-inner { max-width: 1200px; margin: 0 auto; }
.sp-extras .sp-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; }
.sp-extras-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .sp-extras-grid { grid-template-columns: 1fr; } }
.sp-extra { display: grid; grid-template-columns: 120px minmax(0, 1fr); background: #fff; border: 1px solid var(--sp-line); border-radius: 6px; overflow: hidden; color: var(--sp-ink); text-decoration: none; transition: box-shadow .2s, transform .2s; }
.sp-extra:hover { box-shadow: var(--sp-shadow); transform: translateY(-2px); color: var(--sp-ink); }
.sp-extra-media { position: relative; background: #1c1e22; color: #fff; }
.sp-extra-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; padding: .5rem; text-align: center; font-size: .65rem; line-height: 1.2; color: #c9cdd3; background: linear-gradient(135deg, #24272c, #141518); }
.sp-extra-ph svg { width: 34px; height: 34px; color: #fff; }
.sp-extra-body { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; }
.sp-extra-kicker { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sp-red); }
.sp-extra-body strong { font-size: 1.02rem; }
.sp-extra-text { font-size: .85rem; color: var(--sp-muted); line-height: 1.45; }
.sp-extra-link { margin-top: auto; padding-top: .4rem; font-size: .85rem; font-weight: 700; }
.sp-extra-link::after { content: " →"; color: var(--sp-red); }

/* Kunden kauften auch / Beliebte Artikel */
.sp-mitgekauft { margin-top: 2.5rem; }
.sp-mitgekauft .sp-section-title, .sp-beliebt .sp-section-title { margin-bottom: 1.25rem !important; }
.sp-beliebt .sp-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .5rem; }
.sp-suche-beliebt, .wp-block-group .sp-beliebt { margin-top: 2.5rem; }
.sp-mitgekauft .woocommerce ul.products, .sp-beliebt .woocommerce ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; }
.sp-mitgekauft .woocommerce ul.products::before, .sp-beliebt .woocommerce ul.products::before { display: none; }
.sp-mitgekauft .woocommerce ul.products li.product, .sp-beliebt .woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; }
@media (max-width: 1000px) { .sp-mitgekauft .woocommerce ul.products, .sp-beliebt .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .sp-mitgekauft .woocommerce ul.products, .sp-beliebt .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* Seite Paketshop */
.sp-lead { font-size: 1.1rem; }
.sp-ps-dienste { display: flex; gap: 12px; flex-wrap: wrap; margin: 1.25rem 0 1.5rem; }
.sp-ps-dienst { display: inline-flex; align-items: center; justify-content: center; min-width: 110px; height: 56px; padding: 0 1.25rem; background: #fff; border: 1px solid var(--sp-line); border-radius: 6px; font-family: var(--wp--preset--font-family--fira-condensed); font-weight: 700; font-size: 1.5rem; letter-spacing: .04em; color: var(--sp-ink); }
.sp-ps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 700px) { .sp-ps-grid { grid-template-columns: 1fr; } }
.sp-ps-box { background: #fff; border: 1px solid var(--sp-line); border-radius: 6px; padding: 1.1rem 1.25rem; }
.sp-ps-box h2 { font-size: 1.1rem !important; margin: 0 0 .6rem; }
.sp-ps-box p { margin: 0 0 .5rem; }
.sp-ps-leistungen { margin-top: 16px; }
.sp-ps-leistungen ul { margin: 0 0 .6rem; padding-left: 1.2rem; }
.sp-ps-leistungen li { margin: .25rem 0; }
.sp-ps-zeiten { width: 100%; border-collapse: collapse; font-size: .95rem; }
.sp-ps-zeiten th { text-align: left; font-weight: 600; padding: .3rem 0; }
.sp-ps-zeiten td { text-align: right; padding: .3rem 0; }
.sp-ps-zeiten tr + tr { border-top: 1px solid var(--sp-line); }
.sp-ps-klein { font-size: .85rem; color: var(--sp-muted); }
.sp-ps-hinweis { margin-top: 16px; padding: .85rem 1rem; background: #FDECEC; border-left: 4px solid var(--sp-red); border-radius: 4px; }

/* Seite Fahrzeugaufbereitung */
.sp-btn { display: inline-flex; align-items: center; justify-content: center; padding: .85rem 1.5rem; border-radius: 4px; font-weight: 700; text-decoration: none; transition: background .2s, color .2s; }
.sp-btn-rot { background: var(--sp-red); color: #fff !important; }
.sp-btn-rot:hover { background: var(--sp-red-dark, #B3121A); }
.sp-btn-hell { background: #fff; color: var(--sp-ink) !important; border: 1px solid var(--sp-line); }
.sp-btn-hell:hover { border-color: var(--sp-ink); }
.sp-fa-intro { background: #141518; color: #fff; border-radius: 8px; padding: clamp(1.25rem, 3vw, 2rem); margin-bottom: 2.25rem; background-image: radial-gradient(80% 140% at 100% 0, rgba(224,30,38,.28), transparent 60%); }
.sp-fa-intro .sp-lead { color: #fff; margin: 0 0 1.1rem; }
.sp-fa-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-fa-klein { font-size: .85rem; color: var(--sp-muted); margin: .9rem 0 0; }
.sp-fa-intro .sp-fa-klein { color: #c9cdd3; }
.sp-fa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 1.25rem 0 2rem; }
@media (max-width: 900px) { .sp-fa-grid { grid-template-columns: 1fr; } }
.sp-fa-karte { position: relative; background: #fff; border: 1px solid var(--sp-line); border-top: 3px solid var(--sp-red); border-radius: 6px; padding: 1.25rem; }
.sp-fa-nr { position: absolute; top: .9rem; right: 1rem; font-family: var(--wp--preset--font-family--fira-condensed); font-weight: 800; font-style: italic; font-size: 1.6rem; color: #E2E5E9; }
.sp-fa-karte h3 { margin: 0 0 .8rem; font-size: 1.15rem; }
.sp-fa-liste { list-style: none; margin: 0; padding: 0; }
.sp-fa-liste li { display: flex; gap: .55rem; align-items: flex-start; margin: .45rem 0; font-size: .93rem; line-height: 1.4; }
.sp-fa-liste svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; color: var(--sp-red); }
.sp-fa-preis, .sp-fa-abschluss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; background: #fff; border: 1px solid var(--sp-line); border-radius: 6px; padding: 1.25rem 1.5rem; margin: 0 0 2.25rem; }
.sp-fa-preis > div, .sp-fa-abschluss > div { flex: 1 1 380px; }
.sp-fa-preis h2, .sp-fa-abschluss h2 { font-size: 1.2rem !important; margin: 0 0 .4rem; }
.sp-fa-preis p, .sp-fa-abschluss p { margin: 0; color: var(--sp-muted); }
.sp-fa-abschluss { background: #141518; border-color: #141518; color: #fff; margin-top: 2rem; }
.sp-fa-abschluss h2 { color: #fff; }
.sp-fa-abschluss p, .sp-fa-abschluss a:not(.sp-btn) { color: #d6d8dc; }
.sp-fa-ablauf { list-style: none; counter-reset: schritt; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 1.25rem 0 2.25rem; padding: 0; }
@media (max-width: 900px) { .sp-fa-ablauf { grid-template-columns: 1fr; } }
.sp-fa-ablauf li { counter-increment: schritt; background: #fff; border: 1px solid var(--sp-line); border-radius: 6px; padding: 1rem 1.1rem 1.1rem 3.6rem; position: relative; }
.sp-fa-ablauf li::before { content: counter(schritt); position: absolute; left: 1rem; top: 1rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--sp-red); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.sp-fa-ablauf strong { display: block; margin-bottom: .2rem; }
.sp-fa-ablauf span { font-size: .9rem; color: var(--sp-muted); }
.sp-fa-galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 1.25rem; }
@media (max-width: 700px) { .sp-fa-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp-fa-foto { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: #1c1e22; }
.sp-fa-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-fa-platz { display: flex; align-items: center; justify-content: center; color: #8a9099; font-size: .85rem; background: linear-gradient(135deg, #24272c, #141518); }
.sp-fa-karte h3 { padding-right: 2.6rem; }

/* Startseite: kompakte Produktreihen (5 nebeneinander, Größe wie Top-Kategorien) */
.woocommerce.sp-kompakt ul.products { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 16px !important; margin: 0; }
.woocommerce.sp-kompakt ul.products::before, .woocommerce.sp-kompakt ul.products::after { display: none; }
.woocommerce.sp-kompakt ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; padding: .7rem !important; }
.woocommerce.sp-kompakt ul.products li.product a img { aspect-ratio: 16 / 11; margin-bottom: .5rem !important; }
.woocommerce.sp-kompakt ul.products li.product .woocommerce-loop-product__title { font-size: .85rem !important; margin-bottom: .35rem !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.woocommerce.sp-kompakt ul.products li.product .price { font-size: 1rem !important; }
.woocommerce.sp-kompakt ul.products li.product .star-rating, .woocommerce.sp-kompakt ul.products li.product .woocommerce-review-link, .woocommerce.sp-kompakt .wc-gzd-additional-info-loop.delivery-time-info, .woocommerce.sp-kompakt ul.products li.product .wc-gzd-product-rating-info { display: none !important; }
.woocommerce.sp-kompakt ul.products li.product .wc-gzd-additional-info-loop, .woocommerce.sp-kompakt ul.products li.product .price-unit { font-size: .7rem; line-height: 1.35; margin: 0; }
.woocommerce.sp-kompakt ul.products li.product .button { font-size: .8rem; padding: .5rem .6rem; margin-top: .5rem !important; }
.woocommerce.sp-kompakt ul.products li.product .onsale { font-size: .65rem; }
@media (max-width: 1000px) { .woocommerce.sp-kompakt ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .woocommerce.sp-kompakt ul.products li.product:nth-child(n+4) { display: none; } }
@media (max-width: 600px) { .woocommerce.sp-kompakt ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } .woocommerce.sp-kompakt ul.products li.product:nth-child(n+3) { display: none; } }
.woocommerce.sp-kompakt ul.products li.product .woocommerce-loop-product__link { margin-bottom: 0 !important; }
.woocommerce.sp-kompakt ul.products li.product .button { margin-top: auto !important; }
.woocommerce.sp-kompakt ul.products li.product .wc-gzd-additional-info-loop { display: none !important; }
.woocommerce.sp-kompakt ul.products li.product .wc-gzd-additional-info-loop.tax-info, .woocommerce.sp-kompakt ul.products li.product .wc-gzd-additional-info-loop.shipping-costs-info { display: block !important; }
.woocommerce.sp-kompakt ul.products li.product .woocommerce-product-rating, .woocommerce.sp-kompakt ul.products li.product .wc-gzd-additional-info-loop + br { display: none !important; }
.woocommerce.sp-kompakt ul.products li.product > *:not(.woocommerce-loop-product__link):not(.button):not(.onsale) { margin-top: 0; }
.sp-ps-dienste { align-items: center; }
.sp-ps-logo { width: 150px; height: auto; border-radius: 6px; box-shadow: 0 1px 3px rgba(20,21,24,.12); background: #fff; }
@media (max-width: 600px) { .sp-ps-logo { width: calc((100% - 24px) / 3); } }
.sp-extra-logos { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 8px; background: #f3f4f6; }
.sp-extra-logos img { width: 100%; height: auto; border-radius: 3px; display: block; }

/* Fahrzeugaufbereitung: Vorher/Nachher, Kachelbild */
.sp-fa-vn { margin: 1.25rem 0 2rem; background: #fff; border: 1px solid var(--sp-line); border-radius: 6px; overflow: hidden; }
.sp-fa-vn img { display: block; width: 100%; height: auto; }
.sp-fa-vn figcaption { padding: .75rem 1rem; font-size: .85rem; color: var(--sp-muted); }
.sp-extra-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-extra-logos img { position: static; height: auto; }

/* Fußbereich: Social-Media-Links (nur Links, keine eingebetteten Inhalte) */
.sp-social { display: flex; align-items: center; gap: 10px; margin-top: 1.25rem; font-size: .85rem; color: #c9cdd3; }
.sp-social a { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background: #2a2d33; color: #fff; transition: background .2s; }
.sp-social a:hover { background: var(--sp-red); color: #fff; }
.sp-social svg { width: 18px; height: 18px; }
.sp-extra-play { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: rgba(20,21,24,.65); }
.sp-extra-play::after { content: ""; position: absolute; left: 15px; top: 11px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; }

/* Zusatzangebote: größere Karten, Bild oben (Wunsch Kunde 21.10.2026) */
.sp-extras .sp-section-head { display: block; margin-bottom: 1.5rem; }
.sp-extras-text { margin: .35rem 0 0; color: var(--sp-muted); font-size: 1rem; }
.sp-extras-grid { gap: 20px; }
.sp-extra { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.sp-extra-media { aspect-ratio: 16 / 10; }
.sp-extra-media img { transition: transform .35s; }
.sp-extra:hover .sp-extra-media img { transform: scale(1.04); }
.sp-extra-logos { flex-direction: row; align-items: center; gap: 10px; padding: 1.25rem; }
.sp-extra-logos img { width: calc((100% - 20px) / 3); }
.sp-extra:hover .sp-extra-logos img { transform: none; }
.sp-extra-body { padding: 1.1rem 1.25rem 1.25rem; gap: .3rem; }
.sp-extra-body strong { font-size: 1.2rem; }
.sp-extra-text { font-size: .92rem; }
.sp-extra-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.sp-extra-play::after { left: 22px; top: 17px; border-width: 11px 0 11px 17px; }
@media (max-width: 900px) and (min-width: 601px) { .sp-extras-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-extras-grid > :last-child { grid-column: 1 / -1; } .sp-extras-grid > :last-child .sp-extra-media { aspect-ratio: 21 / 9; } }
@media (max-width: 600px) { .sp-extras-grid { grid-template-columns: 1fr; gap: 16px; } }

/* Fahrzeugaufbereitung: echte Vorher/Nachher-Paare und Galerie */
.sp-fa-paare { display: grid; gap: 16px; margin: 1rem 0 2.25rem; }
.sp-fa-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: #fff; border: 1px solid var(--sp-line); border-radius: 6px; padding: 8px; }
.sp-fa-foto { position: relative; }
.sp-fa-paar .sp-fa-foto { aspect-ratio: 4 / 3; }
.sp-fa-etikett { position: absolute; left: 10px; top: 10px; padding: 3px 10px; border-radius: 4px; font-family: var(--wp--preset--font-family--fira-condensed); font-weight: 700; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgba(20,21,24,.75); }
.sp-fa-etikett-nachher { background: var(--sp-red); }
@media (max-width: 600px) { .sp-fa-paar { grid-template-columns: 1fr; } }
.sp-extra-logos { box-sizing: border-box; background: #fff; }
/* Smartphones: drei Bereiche kompakt und übersichtlich */
@media (max-width: 600px) {
	.sp-extras .sp-section-title { font-size: 1.55rem !important; }
	.sp-extras-text { font-size: .92rem; }
	.sp-extra-media { aspect-ratio: 16 / 9; }
	.sp-extra-logos { aspect-ratio: auto; padding: 1rem 1.25rem; border-bottom: 1px solid var(--sp-line); }
	.sp-extra-body { padding: .9rem 1rem 1rem; }
	.sp-extra-body strong { font-size: 1.1rem; }
	.sp-extra-link { font-size: .9rem; padding-top: .5rem; }
}
.sp-extras-social { margin: 1.25rem 0 0; text-align: center; font-size: .95rem; color: var(--sp-muted); }
.sp-extras-social a { font-weight: 700; color: var(--sp-ink); }
.sp-extras-social a:hover { color: var(--sp-red); }
/* Vier Kacheln: zwei Reihen mit je zwei großen Karten (Paketshop, Aufbereitung / TikTok, Facebook) */
.sp-extras-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.sp-extra-media { aspect-ratio: 16 / 8; }
.sp-extra-logos { aspect-ratio: 16 / 8; padding: 1.5rem 2rem; gap: 16px; }
.sp-extra-logos img { width: calc((100% - 32px) / 3); }
.sp-extra-facebook { background: #f3f3f3; }
.sp-extra-facebook img { object-fit: contain !important; }
@media (max-width: 900px) and (min-width: 601px) { .sp-extras-grid > :last-child { grid-column: auto; } .sp-extras-grid > :last-child .sp-extra-media { aspect-ratio: 16 / 8; } }
@media (max-width: 600px) { .sp-extras-grid { grid-template-columns: 1fr !important; } .sp-extra-media { aspect-ratio: 16 / 9; } .sp-extra-logos { aspect-ratio: auto; padding: 1rem 1.25rem; gap: 10px; } .sp-extra-logos img { width: calc((100% - 20px) / 3); } }
/* Vier Kacheln nebeneinander (Wunsch 22.10.2026); Tablet 2, Handy 1 */
.sp-extras-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px; }
.sp-extra-media, .sp-extra-logos { aspect-ratio: 16 / 10; }
.sp-extra-logos { flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: .75rem 1.25rem; }
.sp-extra-logos img { width: 46%; }
.sp-extra-facebook img { object-fit: cover !important; }
.sp-extra-body strong { font-size: 1.05rem; }
.sp-extra-text { font-size: .86rem; }
@media (max-width: 1100px) { .sp-extras-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .sp-extra-logos { flex-direction: row; } .sp-extra-logos img { width: calc((100% - 20px) / 3); } }
@media (max-width: 600px) { .sp-extras-grid { grid-template-columns: 1fr !important; } .sp-extra-media { aspect-ratio: 16 / 9; } .sp-extra-logos { aspect-ratio: auto; flex-direction: row; padding: 1rem 1.25rem; } }
.sp-extras .sp-extra-logos { flex-direction: row !important; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 8px; padding: .75rem; overflow: hidden; }
.sp-extras .sp-extra-logos img { width: calc((100% - 16px) / 3) !important; max-height: 100%; object-fit: contain; flex: 0 0 auto; }
/* Leistungskarten: Nummer über dem Titel statt daneben (lange Titel wie „Innenraumaufbereitung“) */
.sp-fa-karte .sp-fa-nr { position: static; display: block; font-size: 1.35rem; line-height: 1; margin-bottom: .35rem; color: #d3d6db; }
.sp-fa-karte h3 { padding-right: 0 !important; font-size: 1.1rem; line-height: 1.3; hyphens: auto; overflow-wrap: anywhere; min-height: 1.3em; }
.sp-fa-karte h3 { overflow-wrap: normal !important; hyphens: manual !important; }
.sp-fa-karte h3 { font-size: 1rem !important; letter-spacing: -.005em; }

/* Google-Bewertungen (Plakette mit Link, keine Google-Inhalte geladen) */
.sp-g-sterne { color: #f5b301; letter-spacing: 1px; }
.sp-g-leiste { color: #e9eaec !important; text-decoration: none; }
.sp-g-leiste:hover { color: #fff !important; text-decoration: underline; }
.sp-g-leiste strong { color: #fff; }
.sp-g-plakette { margin: 1.1rem auto 0; max-width: 640px; text-align: center; }
.sp-g-plakette a { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: .6rem 1rem; padding: .7rem 1.1rem; background: #fff; border: 1px solid var(--sp-line); border-radius: 8px; color: var(--sp-ink); text-decoration: none; box-shadow: 0 1px 2px rgba(20,21,24,.05); }
.sp-g-plakette a:hover { box-shadow: var(--sp-shadow); color: var(--sp-ink); }
.sp-g-logo { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; background: #fff; border: 1px solid var(--sp-line); font-weight: 800; font-size: 1.05rem; color: #4285f4; }
.sp-g-inhalt { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.sp-g-inhalt .sp-g-sterne { font-size: 1.05rem; }
.sp-g-zahl { font-size: .88rem; }
.sp-g-pfeil { font-size: .82rem; font-weight: 700; color: var(--sp-red); }
.sp-g-hinweis { margin: .4rem 0 0; font-size: .72rem; color: var(--sp-muted); }
.wc-block-cart .sp-g-plakette { margin-top: 1rem; }
.wc-block-cart .sp-g-plakette a { width: 100%; box-sizing: border-box; }

/* Google-Rezensionen (Weg B) */
.sp-g-rezensionen { padding: clamp(2rem, 4vw, 3rem) var(--wp--style--root--padding-right, 24px); max-width: 1200px; margin: 0 auto; }
.sp-g-rezensionen .sp-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: 1.25rem; }
.sp-g-rezensionen .sp-g-leiste { color: var(--sp-ink) !important; font-size: .9rem; }
.sp-g-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .sp-g-raster { grid-template-columns: 1fr; } }
.sp-g-karte { margin: 0; background: #fff; border: 1px solid var(--sp-line); border-radius: 6px; padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
.sp-g-karte blockquote { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--sp-ink); }
.sp-g-karte figcaption { margin-top: auto; font-size: .8rem; color: var(--sp-muted); }
.sp-g-leer { color: #d8dbe0; }
.sp-g-rezensionen .sp-g-hinweis { margin-top: .9rem; text-align: center; }

/* Alte Artikelbeschreibungen (eBay-Vorlagen) mit festen Breiten und Floats bändigen */
.woocommerce-Tabs-panel--description { display: flow-root; overflow-wrap: anywhere; }
.woocommerce-Tabs-panel--description [style*="float"] { float: none !important; }
.woocommerce-Tabs-panel--description [style*="width"] { width: auto !important; max-width: 100% !important; }
.woocommerce-Tabs-panel--description [style*="height"] { height: auto !important; line-height: 1.4 !important; }
.woocommerce-Tabs-panel--description [style*="background"] { background-image: none !important; }
.woocommerce-Tabs-panel--description img, .woocommerce-Tabs-panel--description table { max-width: 100% !important; height: auto; }

/* eBay-Plakette (Text, kein Logo) */
.sp-plaketten { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.25rem; }
.sp-plaketten .sp-g-plakette { margin-left: 0; margin-right: 0; flex: 1 1 360px; max-width: 470px; }
.sp-ebay-logo { color: #e53238; font-family: Arial, sans-serif; font-weight: 700; }
.sp-ebay-top { font-size: .78rem; color: var(--sp-muted); }
.sp-leisten { display: inline-flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.sp-g-rezensionen .sp-ebay-leiste { color: var(--sp-ink) !important; font-size: .9rem; }
.sp-ebay-produkt { margin: .75rem 0 0; font-size: .85rem; }
.sp-ebay-produkt .sp-ebay-leiste { color: var(--sp-ink) !important; }
.sp-ebay-produkt .sp-ebay-leiste strong { color: var(--sp-ink); }
