/* BJ's Bike World – Vehicles Widget Theme (angepasst an index.html)
   Version: 1.0.5
   Datum: 21. Oktober 2025
   Stil: Helle Content-Boxen (weiß) auf dunkler Seite, mit Orange (#e17709) als Akzent
   Typo: nutzt Defaults der Seite
   
   Changelog:
   - v1.0.4: Server-Upload mit korrekter Marquee-Quadrat-Regel
   - v1.0.3: Demo-Seite neu strukturiert, Marquee Quadrat-Bilder mit !important
   - v1.0.2: Marquee Bilder als Quadrate, Button am unteren Kartenrand
   - v1.0.1: Demo-Styles in CSS verschoben, Cache-Buster hinzugefügt
   - v1.0.0: Initiale Version
*/

/* Container & Header */
.bw-widget { color: #222; }
.bw-header { display:flex; justify-content:space-between; align-items:center; margin: 8px 0 14px; }
.bw-title { font-weight: 700; font-size: 1.2rem; color:#111; }
.bw-actions .bw-cta { background:#e17709; color:#fff; border:none; border-radius:6px; padding:8px 12px; text-decoration:none; font-weight:600; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.bw-actions .bw-cta:hover { background:#d06608; }

/* Karten & Zeilen (helle Paneele wie Index-Content) */
.bw-card { background: #ffffff; border: 1px solid #e5e5e5; border-radius: 10px; overflow: hidden; text-decoration:none; color: inherit; transition: transform .12s ease, box-shadow .2s ease; display:flex; flex-direction:column; }
.bw-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.bw-row { background: #ffffff; border: 1px solid #e5e5e5; border-radius: 10px; overflow: hidden; text-decoration:none; color: inherit; transition: transform .12s ease, box-shadow .2s ease; }
.bw-row:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }

/* Bildbereich */
.bw-img { position:relative; width:100%; padding-top:60%; overflow:hidden; background: #f3f3f3; flex-shrink:0; }
.bw-row .bw-img { padding-top:0; height:100%; min-height:120px; }
.bw-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: saturate(1.05); }
/* Badges erst nach Bild-Ladeabschluss anzeigen */
.bw-img .bw-badge{opacity:0; transform:translateY(-4px); transition:opacity .2s ease, transform .2s ease;}
.bw-img.is-loaded .bw-badge{opacity:1; transform:none;}

/* Overlay-Infos auf dem Bild (Titel, Meta, Preis) */
.bw-overlay { position:absolute; left:0; right:0; bottom:0; z-index:2; color:#fff; padding:10px 12px; display:flex; flex-direction:column; gap:4px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 40%, rgba(0,0,0,0.75) 100%);
}
.bw-o-title { font-weight:800; font-size:1rem; line-height:1.2; text-shadow: 0 1px 2px rgba(0,0,0,.5); display:flex; flex-direction:column; }
.bw-o-title-brand, .bw-o-title-model { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:1.2em; }
.bw-o-meta { font-size:.86rem; opacity:.95; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.bw-o-price { display:inline-block; align-self:flex-start; background:#e17709; color:#fff; font-weight:800; border-radius:6px; padding:3px 8px; margin-top:2px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }

/* Inhalt */
.bw-body { padding: 12px; display:flex; flex-direction:column; flex-grow:1; }
.bw-name { font-weight:700; margin:0 0 4px; color:#111; display:flex; flex-direction:column; line-height:1.2; }
.bw-name-brand, .bw-name-model { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:1.2em; }
.bw-meta { font-size:.92rem; color:#555; margin:3px 0; }
.bw-price { color:#e17709; font-weight:800; margin-top:6px; font-size:1.05rem; }
/* Button am unteren Rand der Karte */
.bw-body > div:last-child { margin-top:auto; padding-top:8px; }

/* CTA-Button */
.bw-cta { display:inline-block; background:#e17709; color:#fff; border:none; border-radius:6px; padding:6px 12px; text-decoration:none; font-weight:700; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.bw-cta:hover { background:#d06608; }

/* Badges */
.bw-badge { position:absolute; top:10px; left:10px; background:#28a745; color:#fff; font-size:.75rem; font-weight:800; border-radius:6px; padding:4px 8px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.bw-badge--new { right:10px; left:auto; background:#007bff; }

/* Grid */
/* Grid-Layout: luftiger, größere Karten, harmonische Proportionen */
/* Grid-Layout kompakt und klassisch */
.bw-grid { display:grid; gap:12px; grid-template-columns:repeat(4,1fr); }
@media(max-width:1200px){ .bw-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:800px){ .bw-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .bw-grid{grid-template-columns:1fr;} }

.bw-card {
   min-height: 0;
   box-shadow: 0 2px 8px rgba(0,0,0,.08);
   border-radius: 8px;
   transition: box-shadow .15s, transform .12s;
}
.bw-card:hover {
   box-shadow: 0 4px 16px rgba(225,119,9,.10), 0 2px 8px rgba(0,0,0,.10);
   transform: translateY(-2px) scale(1.01);
}
.bw-img {
   min-height: 120px;
   max-height: 160px;
   background: #f3f3f3;
   border-bottom: none;
}
.bw-img img {
   object-fit: cover;
   height: 100%;
   width: 100%;
   border-radius: 0;
}

/* Liste */
.bw-list { display:flex; flex-direction:column; gap:12px; }
.bw-list .bw-row { 
    display: grid !important; 
    grid-template-columns: 100px 1fr !important; 
    gap: 12px; 
    align-items: stretch;
}
.bw-list .bw-row .bw-img { 
    width: 100px; 
    height: auto; 
    padding-top: 0 !important; 
    min-height: 80px; 
    max-height: none;
}
.bw-list .bw-row .bw-img img {
    position: relative !important;
    height: 100%;
}
.bw-list .bw-row .bw-body { 
    display: flex !important; 
    flex-direction: column; 
    justify-content: space-between; 
    min-height: 110px;
    padding: 12px;
}
@media(max-width:520px){ 
    .bw-list .bw-row { 
        grid-template-columns: 1fr !important; 
    } 
}

/* Horizontaler Slider */
.bw-scroll { display:flex; gap:14px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:6px; }
.bw-scroll .bw-card { flex: 0 0 280px; scroll-snap-align:start; }
.bw-scroll::-webkit-scrollbar { height: 10px; }
.bw-scroll::-webkit-scrollbar-thumb { background: #e17709; border-radius: 6px; }
.bw-scroll::-webkit-scrollbar-track { background: #2a2a2a; }

/* Marquee */
.bw-marquee { overflow:hidden; white-space:nowrap; }
.bw-marquee-track { display:inline-flex; gap:14px; animation: bw-marquee 22s linear infinite; }
/* Marquee: Bilder als Quadrate - muss nach allgemeinen .bw-img Regeln kommen */
.bw-marquee .bw-img { padding-top:100% !important; min-height:0; max-height:none; }
@keyframes bw-marquee { from{ transform: translateX(0) } to{ transform: translateX(-50%) } }

/* Vertikaler Ticker (kompakt) */
.bw-ticker { --bw-ticker-height: 220px; }
.bw-ticker-viewport { height: var(--bw-ticker-height); overflow: hidden; position: relative; border: 1px solid #e5e5e5; border-radius: 10px; background:#ffffff; }
.bw-ticker-track { display: flex; flex-direction: column; gap: 8px; padding: 8px; animation: bw-ticker-scroll var(--bw-ticker-duration, 14s) linear infinite; }
.bw-ticker-viewport:hover .bw-ticker-track { animation-play-state: paused; }
.bw-tick { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; text-decoration: none; color: inherit; }
.bw-tick:hover { transform: translateY(-1px); }
.bw-tick-thumb { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; background:#f3f3f3; }
.bw-tick-text { display:flex; flex-direction:column; line-height: 1.2; }
.bw-tick-title { font-weight: 700; color:#111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-tick-price { color:#e17709; font-weight: 800; font-size: .98rem; }
@keyframes bw-ticker-scroll { from { transform: translateY(0) } to { transform: translateY(-50%) } }

/* Skeleton in Ticker */
.bw-tick .skel { animation:bw-shimmer 1.4s ease infinite; background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%); background-size:400% 100%; }
.bw-ticker .line { height:10px; border-radius:6px; margin:4px 0; animation:bw-shimmer 1.4s ease infinite; background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%); background-size:400% 100%; }
.bw-ticker .line.w60{ width:60% }
.bw-ticker .line.w40{ width:40% }

/* Carousel */
.bw-carousel { position:relative; overflow:hidden; border-radius: 12px; }
.bw-carousel .bw-card { border-radius:0; }
.bw-carousel-track { display:flex; transition: transform .4s ease; width:100%; }
.bw-carousel-track > * { flex: 0 0 100%; }
.bw-carousel-nav { position:absolute; top:50%; transform: translateY(-50%); background:rgba(0,0,0,.5); color:#fff; border:1px solid #444; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter: blur(2px); }
.bw-carousel-nav:hover { background: rgba(0,0,0,.7); border-color:#666; }
.bw-carousel-nav.prev { left:10px; }
.bw-carousel-nav.next { right:10px; }
.bw-carousel-dots { position:absolute; left:0; right:0; bottom:10px; display:flex; gap:8px; justify-content:center; }
.bw-carousel-dot { width:10px; height:10px; border-radius:50%; background:#666; border:1px solid #999; cursor:pointer; }
.bw-carousel-dot.active { background:#e17709; border-color:#e17709; }

/* Skeleton Loader (hell) */
.bw-skel { background:#ffffff; border:1px solid #e5e5e5; border-radius:10px; overflow:hidden; }
.skel-img { width:100%; padding-top:60%; background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%); background-size:400% 100%; animation:bw-shimmer 1.4s ease infinite; }
.bw-skel .skel-lines { padding:12px; }
.bw-skel .line { height:12px; background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%); background-size:400% 100%; animation:bw-shimmer 1.4s ease infinite; border-radius:6px; margin:8px 0; }
.bw-skel .line.w60 { width:60%; }
.bw-skel .line.w40 { width:40%; }
.bw-skel .line.w30 { width:30%; }
@keyframes bw-shimmer { 0%{ background-position: 100% 0 } 100%{ background-position: -100% 0 } }

/* Entfernt: Demo-spezifische globale Styles (body, h1, .section, .row, code),
   damit die Produktseite keine ungewollten Abstände/Scrollbalken erhält. */