/* =========================================================================
   Mr. Bike Lichtenfels – Showroom (Katalog, Facetten, Produktdetail)
   Playbook Muster B / 3d
   ========================================================================= */

.shop{display:grid;gap:2rem;grid-template-columns:1fr;align-items:start}
@media(min-width:1000px){.shop{grid-template-columns:286px 1fr;gap:2.6rem}}

/* ---------------------------------------------------------- Facetten-Sidebar */
.fs-side{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.25rem 1.3rem 1.6rem}
@media(min-width:1000px){.fs-side{position:sticky;top:calc(var(--nav-h) + 1rem);max-height:calc(100vh - var(--nav-h) - 2rem);overflow-y:auto}}
.fs-side__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.fs-side__head h2{font-size:1.05rem;margin:0}
.fs-reset{background:none;border:0;color:var(--accent-deep);font-size:.83rem;cursor:pointer;text-decoration:underline;padding:.2rem}
.fs-reset:hover{color:var(--ink)}
.fs-search{width:100%;padding:.7rem .9rem;border:1px solid var(--line-2);border-radius:10px;font:inherit;font-size:.92rem;margin-bottom:1.1rem}
.fs-search:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.fs-group{border-top:1px solid var(--line);padding:.35rem 0}
.fs-group__h{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;cursor:pointer;
  padding:.7rem 0;font-family:var(--head);font-weight:600;font-size:.9rem;text-align:left}
.fs-group__h::after{content:'';width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  rotate:45deg;transition:rotate .2s var(--ease);margin-right:.2rem}
.fs-group.closed .fs-group__h::after{rotate:-45deg}
.fs-group.closed .fs-opts{display:none}
.fs-opts{display:flex;flex-direction:column;gap:.1rem;padding-bottom:.7rem;max-height:290px;overflow-y:auto}
.fs-opt{display:flex;align-items:center;gap:.55rem;padding:.32rem .35rem;border-radius:8px;cursor:pointer;font-size:.89rem}
.fs-opt:hover{background:var(--sand)}
.fs-opt input{width:16px;height:16px;accent-color:var(--accent);flex:none;cursor:pointer}
.fs-opt span:first-of-type{flex:1}
.fs-opt__n{color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}
.fs-opt--empty{opacity:.38}

/* Mobile Schublade */
.fs-backdrop{position:fixed;inset:0;background:rgba(13,14,17,.5);z-index:98;display:none}
body.shop--open .fs-backdrop{display:block}
@media(max-width:999px){
  .fs-side{position:fixed;left:0;top:0;bottom:0;width:min(340px,88vw);z-index:99;border-radius:0;overflow-y:auto;
    transform:translateX(-102%);transition:transform .3s var(--ease);padding-top:1.4rem}
  body.shop--open .fs-side{transform:none}
}

/* ---------------------------------------------------------- Toolbar */
.fs-bar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-bottom:1.4rem}
.fs-toggle{display:none;align-items:center;gap:.5rem}
@media(max-width:999px){.fs-toggle{display:inline-flex}}
#fs-count{font-family:var(--head);font-weight:600;font-size:.92rem;color:var(--muted)}
.fs-sort{margin-left:auto;padding:.6rem .9rem;border:1px solid var(--line-2);border-radius:10px;font:inherit;font-size:.88rem;background:#fff}
.fs-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.1rem}
.fs-chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--sand-2);border:0;border-radius:999px;
  padding:.32rem .55rem .32rem .8rem;font-size:.82rem;cursor:pointer}
.fs-chip:hover{background:var(--line-2)}
.fs-chip::after{content:'×';font-size:1.05rem;line-height:1;opacity:.65}

/* ---------------------------------------------------------- Karten-Grid */
.fs-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.fs-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.fs-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.fs-card__img{position:relative;aspect-ratio:4/3;background:#fff;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:1.1rem}
.fs-card__img img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;
  transition:transform .45s var(--ease)}
.fs-card:hover .fs-card__img img{transform:scale(1.03)}
.fs-ph{width:100%;height:100%;display:grid;place-items:center;background:var(--sand);color:var(--line-2);
  font-family:var(--head);font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.fs-badge{position:absolute;top:.7rem;left:.7rem;z-index:2;font-family:var(--head);font-size:.66rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px;background:var(--sale);color:#fff}
.fs-badge--soft{background:var(--ink);color:#fff;left:auto;right:.7rem}
.fs-card__b{padding:.95rem 1.05rem 1.15rem;display:flex;flex-direction:column;gap:.35rem;flex:1;border-top:1px solid var(--line)}
.fs-card__brand{font-size:.73rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-family:var(--head);font-weight:600}
.fs-card__name{font-family:var(--head);font-weight:600;font-size:.98rem;line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.fs-card__price{font-family:var(--head);font-weight:700;font-size:1.05rem;margin-top:.15rem}
.fs-card__price s{color:var(--muted);font-weight:400;font-size:.85rem;margin-right:.45rem}
.fs-card__price .now{color:var(--sale)}
.fs-card__meta{font-size:.78rem;color:var(--muted);margin-top:auto;padding-top:.6rem}
.fs-card__cta{font-family:var(--head);font-weight:600;font-size:.83rem;color:var(--accent-deep);padding-top:.5rem}
.fs-empty{display:none;text-align:center;padding:4rem 1rem;color:var(--muted)}
.fs-empty.show{display:block}

/* Pagination */
.fs-pager{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;margin-top:2.5rem}
.fs-pager button{min-width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;
  font-family:var(--head);font-weight:600;font-size:.88rem}
.fs-pager button:hover{border-color:var(--ink)}
.fs-pager button[aria-current="page"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.fs-pager button:disabled{opacity:.35;cursor:default}
.fs-pager .dots{display:grid;place-items:center;min-width:26px;color:var(--muted)}

/* ---------------------------------------------------------- Produktdetail */
.pd{display:grid;gap:2.2rem;grid-template-columns:1fr;align-items:start}
@media(min-width:960px){.pd{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3.2rem}}
.pg__main{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:1.6rem;cursor:zoom-in}
.pg__main img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.pg__thumbs{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.8rem}
.pg__thumbs button{width:84px;height:66px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:.35rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pg__thumbs button[aria-current="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.pg__thumbs img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}

.pd__eyebrow{font-family:var(--head);font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep)}
.pd h1{font-size:clamp(1.7rem,3.4vw,2.5rem);margin:.6rem 0 .3rem}
.pd__brand{color:var(--muted);font-size:.95rem;margin:0 0 1.2rem}
.pd__price{font-family:var(--head);font-weight:800;font-size:clamp(1.7rem,3vw,2.2rem);letter-spacing:-.03em;margin:0 0 .3rem}
.pd__price s{font-size:1.05rem;font-weight:400;color:var(--muted);margin-right:.7rem;letter-spacing:0}
.pd__price .now{color:var(--sale)}
.pd__vat{font-size:.8rem;color:var(--muted);margin:0 0 1.4rem}
.fs-last{display:inline-flex;align-items:center;gap:.45rem;background:#fff4f3;border:1px solid #f6c8c4;color:#a3271e;
  border-radius:999px;padding:.35rem .8rem;font-size:.84rem;font-weight:500;margin-bottom:1.1rem}
.pd__field{margin-bottom:1.2rem}
.pd__field label{display:block;font-family:var(--head);font-weight:600;font-size:.86rem;margin-bottom:.4rem}
.pd__field select,.pd__field input,.pd__field textarea{width:100%;padding:.75rem .9rem;border:1px solid var(--line-2);
  border-radius:10px;font:inherit;font-size:.94rem;background:#fff}
.pd__field select:focus,.pd__field input:focus,.pd__field textarea:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.fs-anfrage__btns{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.4rem 0}
.fs-anfrage__btns .btn{flex:1 1 auto;justify-content:center}
/* steht nur noch ein Knopf in der Reihe, soll er nicht ueber die volle Breite laufen */
.fs-anfrage__btns .btn:only-child{flex:0 0 auto}
.fs-anfrage__form{background:var(--sand);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem;margin-top:1rem}
.fs-anfrage__form h3{font-size:1.1rem;margin-bottom:1rem}
.fs-row{display:grid;gap:.9rem;grid-template-columns:1fr}
@media(min-width:520px){.fs-row--2{grid-template-columns:1fr 1fr}
  .fs-row--3{grid-template-columns:.6fr 1.4fr}}
.fs-err{color:var(--sale);font-size:.85rem;margin:.6rem 0 0;display:none}
.fs-err.show{display:block}
.hp{position:absolute;left:-9999px}

/* Terminkalender */
.cal{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1rem;margin-bottom:1rem}
.cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.cal__head strong{font-family:var(--head);font-size:.95rem}
.cal__nav{background:none;border:1px solid var(--line);border-radius:8px;width:32px;height:32px;cursor:pointer}
.cal__nav:disabled{opacity:.3;cursor:default}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem;text-align:center}
.cal__dow{font-size:.7rem;color:var(--muted);font-weight:600;padding:.3rem 0}
.cal__d{aspect-ratio:1;border:1px solid transparent;background:var(--sand);border-radius:8px;cursor:pointer;font-size:.85rem}
.cal__d:hover:not(:disabled){background:var(--accent);color:#04222f}
.cal__d:disabled{background:transparent;color:var(--line-2);cursor:default}
.cal__d[aria-pressed="true"]{background:var(--ink);color:#fff}
.cal__times{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.cal__t{border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:.4rem .85rem;font-size:.84rem;cursor:pointer}
.cal__t[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Verkäuferblock */
.seller{background:var(--sand);border-radius:var(--r-lg);padding:1.4rem 1.5rem;font-size:.92rem;line-height:1.7}
.seller h3{font-size:.98rem;margin-bottom:.6rem}
.seller a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}

/* Specs-Tabelle */
.fs-table{width:100%;font-size:.93rem;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.fs-table th,.fs-table td{text-align:left;padding:.7rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
.fs-table th{width:32%;font-family:var(--head);font-weight:600;color:var(--muted);background:var(--sand);white-space:nowrap}
.fs-table tr:last-child th,.fs-table tr:last-child td{border-bottom:0}

.pd__desc{max-width:74ch}
.pd__desc h3{font-size:1.15rem;margin-top:1.8rem}
.pd__desc ul{list-style:none;padding-left:0}
.pd__desc ul li{position:relative;padding-left:1.5rem}
.pd__desc ul li::before{content:'';position:absolute;left:.1rem;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* Kategorie-Kacheln */
.kachel{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;color:#fff;isolation:isolate}
.kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-height:none;z-index:-2;transition:transform .5s var(--ease)}
.kachel::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,14,17,.15),rgba(13,14,17,.82))}
.kachel:hover img{transform:scale(1.06)}
.kachel__b{position:absolute;left:0;right:0;bottom:0;padding:1.4rem}
.kachel__n{font-family:var(--head);font-size:.72rem;font-weight:700;letter-spacing:.2em;color:#8fd6ff}
.kachel h3{margin:.35rem 0 .2rem;font-size:1.3rem;color:#fff}
.kachel p{margin:0;font-size:.85rem;color:#d3d9e0}
@media(min-width:900px){.grid.g3 .kachel{aspect-ratio:3/4}}
@media(max-width:640px){.kachel{aspect-ratio:16/10}}

/* JobRad Preis-Widget unter dem Preisblock */
.pd__jobrad{display:block;margin:-.6rem 0 1.4rem}

/* Werkstattformulare */
.fs-werk{margin-top:2rem}
.fs-werk .fs-sec{margin:2.2rem 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--line);
  font-size:1rem;letter-spacing:.06em;text-transform:uppercase}
.fs-werk .fs-sec:first-child{margin-top:0}
.fs-hint{font-size:.84rem;color:var(--muted);margin:.35rem 0 0}
.fs-warn{background:#fff8e6;border:1px solid #f0dca8;border-radius:var(--r-md);
  padding:.8rem 1rem;font-size:.9rem;margin:1.4rem 0}
.fs-check{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;margin:1.2rem 0}
.fs-check input{margin-top:.25rem;flex:0 0 auto}
.fs-add{background:var(--sand);border:1px solid var(--line);border-radius:var(--r-md);
  padding:.75rem .9rem;font-weight:600}
.fs-zweit{border-left:3px solid var(--accent);padding-left:1.1rem;margin:.2rem 0 1.4rem}
.fs-zweit[hidden]{display:none}
/* nur im Formular - sonst überschreiben diese Regeln den Filter im Showroom */
.fs-werk .fs-group{border:1px solid var(--line);border-radius:var(--r-md);padding:1rem 1.1rem;margin:1.2rem 0}
.fs-werk .fs-group legend{font-family:var(--head);font-weight:600;font-size:.92rem;padding:0 .4rem}
.fs-werk .fs-opts{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.fs-werk .fs-opt{display:flex;gap:.55rem;align-items:flex-start;font-size:.89rem;line-height:1.35}
.fs-werk .fs-opt input{margin-top:.2rem;flex:0 0 auto}
.fs-werk input[type=file]{width:100%;padding:.6rem;border:1px dashed var(--line-2);border-radius:var(--r-md);background:var(--sand);font-size:.88rem}

/* Artikelnummern & EANs */
.fs-ident{margin-top:2.4rem}
.fs-ident h2{margin-bottom:.8rem}
.fs-ident .fs-table td{font-variant-numeric:tabular-nums;font-size:.92rem}

/* Artikelnummer, EAN und Kategorien unter den Buttons */
.pd__ident{margin:1.1rem 0 0;padding-top:1rem;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--muted);line-height:1.6;font-variant-numeric:tabular-nums}

/* ---- Größenfilter: Zwischentitel je Größenart --------------------------- */
.fs-opts__t{margin:.7rem 0 .2rem;padding:0 .35rem;font-family:var(--head);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fs-opts__t:first-child{margin-top:.1rem}

/* ---- Showroom: vier Produkte nebeneinander ----------------------------- */
@media (min-width:1000px){
  .fs-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Newsletter: Geburtstag als zwei kleine Felder, Tag zuerst wie im Deutschen */
.nl-geb{border:0;padding:0;margin:0;min-width:0}
.nl-geb legend{padding:0;font-size:.9rem;font-weight:600;margin-bottom:.35rem}
.nl-geb__f{display:flex;align-items:center;gap:.5rem;max-width:11rem}
.nl-geb__f input{text-align:center}
.nl-geb__h{margin:.45rem 0 0;font-size:.85rem;color:var(--muted)}