/* Kopfleiste: Vorteile statt Slogan (Claude, 17.10.2026) – alle Seiten außer /konfigurator/, Markup aus inc/brand-bar.php.
   Desktop drei Vorteile, bis 1180 px zwei, am Handy (≤ 760 px wie studio.css) je einer im Wechsel; „Bewegung reduzieren“: nur der erste. */
.brand-bar.fo-usp{gap:24px;letter-spacing:0;font-weight:600}
.brand-bar.fo-usp ul{display:flex;align-items:center;gap:28px;margin:0;padding:0;list-style:none}
.brand-bar.fo-usp li{display:flex;align-items:center;gap:8px;margin:0;padding:0;white-space:nowrap}
.brand-bar.fo-usp li::before,.brand-bar.fo-usp li::marker{content:none}
.brand-bar.fo-usp svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:#9fe0bd;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1180px){.brand-bar.fo-usp li:nth-child(3){display:none}}
@media (max-width:760px){
 .brand-bar.fo-usp ul{position:relative;display:block;width:100%;height:20px;overflow:hidden}
 .brand-bar.fo-usp li,.brand-bar.fo-usp li:nth-child(3){position:absolute;inset:0;display:flex;justify-content:center;opacity:0;animation:fo-usp 12s infinite}
 .brand-bar.fo-usp li:nth-child(2){animation-delay:4s}
 .brand-bar.fo-usp li:nth-child(3){animation-delay:8s}
}
@keyframes fo-usp{0%{opacity:0;transform:translateY(70%)}3%,30%{opacity:1;transform:none}33.4%,100%{opacity:0;transform:translateY(-70%)}}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.brand-bar.fo-usp li,.brand-bar.fo-usp li:nth-child(3){animation:none}.brand-bar.fo-usp li:first-child{opacity:1}}
/* Kopf (17.10.2026, gilt auf allen Seiten, auch /konfigurator/): Zwischen 1101 und 1279 px reicht der Platz nicht für Navigation
   und Suchfeld (EN bis 45 px, NL 17 px, DE 15 px Überstand) – dort wie unter 1100 px die Lupe statt des Suchfelds. */
@media (min-width:1101px) and (max-width:1279px){.header-tools .search-form{display:none}.header-tools .mobile-search{display:inline-flex}}
/* Kopf 961–1100 px (17.10.2026, Kay: „behebe den Überstand im Shop-Kopf bei 960–1000 px“): Navigation und Symbole ragten bis
   60 px (EN), 32 px (NL), 30 px (DE) über den rechten Rand, mit Scrollleiste 15 px mehr; Warenkorb abgeschnitten. Enger setzen. */
@media (min-width:961px) and (max-width:1100px){
 body>.header.header{gap:16px;padding-left:16px;padding-right:16px}
 body>.header.header>.logo{width:96px}
 body>.header.header>.main-nav{gap:14px;font-size:15px}
 body>.header.header>.header-tools>.icon-btn{width:40px;padding:10px 8px}
}
/* Katalog (17.10.2026): je 24 Karten, darunter „Weitere Modelle laden“ (compact.js). Datei wird auf allen Seiten geladen. */
.product-grid>.product-card[hidden],.fo-catalog-more[hidden]{display:none}
.fo-catalog-more{display:flex;justify-content:center;margin:32px 0 8px}
.fo-catalog-more .button{min-width:260px;justify-content:center}
.fo-catalog-more .button span{margin-left:6px;opacity:.7}