/* ============================================================
   IMPERIO BADMANUFAKTUR - SORTIMENT, PRODUKTE, WARENKORB
   Dieselben Marken-Tokens wie die Startseite. Diese Datei traegt
   die Teile, die auf mehreren Seiten stehen.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  --canvas:#EBEDEC;
  --panel:#F6F7F6;
  --panel-2:#FCFDFC;
  --panel-alt:#E1E5E4;
  --accent:#0E6F66;
  --accent-hover:#0B564F;
  --accent-muted:#BFD9D5;
  --line-strong:#6E8783;
  --hairline:rgba(20,32,31,.13);
  --text-primary:#14201F;
  --text-secondary:#5A6B69;
  --display:"Marcellus",Georgia,serif;
  --body:"Archivo",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.33,.02,.16,1);
  --pad:clamp(1.25rem,5vw,5rem);
}

/* ---------- 2. BASIS (nur auf Unterseiten aktiv, die Startseite
     bringt ihre eigene mit und steht in der Datei danach) ---------- */
.shop-page *,.shop-page *::before,.shop-page *::after{box-sizing:border-box}
html.shop,body.shop-page{overflow-x:hidden;overflow-x:clip}
html.shop{scroll-behavior:smooth}
body.shop-page{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-weight:300;font-size:clamp(1rem,.55vw + .88rem,1.125rem);
  line-height:1.65;-webkit-font-smoothing:antialiased;
  opacity:0;transition:opacity .9s var(--ease);
}
body.shop-page.lit{opacity:1}
.shop-page h1,.shop-page h2,.shop-page h3{font-family:var(--display);font-weight:400;line-height:1.06;margin:0;letter-spacing:-.005em}
.shop-page p{margin:0}
.shop-page a{color:inherit}
.shop-page img{max-width:100%;display:block}
.shop-page button{font:inherit;color:inherit}
.shop-page :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.shop-page main{position:relative;z-index:2}
.shop-page section{position:relative;padding-block:clamp(3.5rem,8vw,6rem)}
.shop-page .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#F7FAF9;text-decoration:none;padding:.75rem 1.25rem;border-radius:0 0 8px 0;font-family:var(--mono);font-size:.8rem}
.shop-page .skip:focus{left:0}
.shop-page .kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 1.1rem}
.shop-page .lede{color:var(--text-secondary);max-width:62ch}
.shop-page .wrap{width:min(1180px,100% - var(--pad)*2);margin-inline:auto}
.shop-page .env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.shop-page .env::before{
  content:"";position:absolute;inset:-25%;
  background:
    radial-gradient(ellipse 46% 38% at 22% 24%,rgba(14,111,102,.075),transparent 62%),
    radial-gradient(ellipse 52% 44% at 78% 76%,rgba(110,135,131,.11),transparent 64%);
  animation:envdrift 96s var(--ease-soft) -22s infinite alternate;
}
.shop-page .env::after{
  content:"";position:absolute;inset:0;opacity:.4;
  background-image:radial-gradient(rgba(20,32,31,.055) .5px,transparent .5px);
  background-size:3px 3px;
}
@keyframes envdrift{
  0%{transform:translate3d(-1.6%,-1.2%,0) scale(1)}
  100%{transform:translate3d(1.8%,1.6%,0) scale(1.06)}
}
.shop-page .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.shop-page footer{border-top:1px solid var(--hairline);padding-block:clamp(3rem,6vw,4.5rem);position:relative;z-index:2}
.shop-page .foot{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2.4rem}
.shop-page footer h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 1rem;font-weight:400}
.shop-page footer a{color:var(--text-secondary);text-decoration:none;display:block;padding:.22rem 0;transition:color .35s var(--ease);font-size:.94rem}
.shop-page footer a:hover{color:var(--accent)}
.shop-page .legal{margin-top:3rem;padding-top:1.7rem;border-top:1px solid var(--hairline);display:flex;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;font-size:.8rem;color:var(--text-secondary)}
.shop-page .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.78rem 1.5rem;border-radius:2px;text-decoration:none;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.05em;white-space:nowrap;
  border:1px solid transparent;cursor:pointer;text-shadow:none;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.shop-page .btn-primary{background:var(--accent);color:#F7FAF9;font-weight:500}
.shop-page .btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px)}
.shop-page .btn-ghost{border-color:var(--line-strong);color:var(--text-primary);background:transparent}
.shop-page .btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.shop-page .btn[disabled]{opacity:.45;pointer-events:none}
@media (pointer:coarse){.shop-page .btn{min-height:44px}}
.shop-page .rv .part{opacity:0;transform:translateY(22px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.shop-page .rv.in .part{opacity:1;transform:none}
.shop-page .rv.in .part:nth-child(2){transition-delay:.09s}
.shop-page .rv.in .part:nth-child(3){transition-delay:.18s}
.shop-page .rv.in .part:nth-child(4){transition-delay:.27s}
.shop-page .rv.done .part,.shop-page .rv.done .part:nth-child(2),
.shop-page .rv.done .part:nth-child(3),.shop-page .rv.done .part:nth-child(4){transition-delay:0s}

/* ---------- 3. NAV MIT WARENKORB (auf allen Seiten) ----------
   Die Startseite bringt ihre eigene Nav mit. Diese Regeln sind auf
   .shop-page begrenzt und fassen sie deshalb nicht an. */
.shop-page .nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem var(--pad);
  transition:background .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s var(--ease);
  border-bottom:1px solid transparent;
}
.shop-page .nav.solid{background:rgba(235,237,236,.84);backdrop-filter:blur(14px);border-bottom-color:var(--hairline)}
.shop-page .brand{display:flex;align-items:center;gap:.62rem;text-decoration:none;letter-spacing:.01em}
.shop-page .brand svg{flex:none}
.shop-page .brand b{font-family:var(--display);font-weight:400;font-size:1.02rem;letter-spacing:.03em}
.shop-page .brand span span,.shop-page .brand>span>span{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;
  color:var(--text-secondary);text-transform:uppercase;display:block;margin-top:.12rem}
.shop-page .nav-links{display:flex;align-items:center;gap:1.6rem}
.shop-page .nav-links>a:not(.nav-cart){font-size:.86rem;color:var(--text-secondary);text-decoration:none;transition:color .35s var(--ease)}
.shop-page .nav-links>a:not(.nav-cart):hover{color:var(--text-primary)}
@media (max-width:860px){.shop-page .nav-links>a:not(.nav-cart){display:none}}
@media (max-width:600px){
  .shop-page .nav{padding:.7rem 1rem}
  .shop-page .brand b{font-size:.92rem}
  .shop-page .brand>span>span{font-size:.54rem}
}


.nav-cart{position:relative;display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;color:var(--text-primary);
  border:1px solid var(--line-strong);border-radius:2px;padding:.6rem .95rem;
  transition:border-color .4s var(--ease),color .4s var(--ease)}
.nav-cart:hover{border-color:var(--accent);color:var(--accent)}
.nav-cart svg{flex:none}
.nav-cart .count{
  min-width:1.35rem;height:1.35rem;padding:0 .3rem;border-radius:1rem;
  background:var(--accent);color:#F7FAF9;font-size:.66rem;font-weight:500;
  display:none;align-items:center;justify-content:center;line-height:1;
  transition:transform .45s var(--ease)}
.nav-cart.has .count{display:inline-flex}
.nav-cart.bump .count{transform:scale(1.35)}
@media (pointer:coarse){.nav-cart{min-height:44px}}
@media (max-width:600px){.nav-cart{padding:.55rem .7rem;font-size:.7rem}.nav-cart .label{display:none}}
/* Die Startseite blendet auf schmalen Telefonen jeden Nav-Link aus, der kein
   Knopf ist. Der Warenkorb muss aber erreichbar bleiben, also gewinnt er hier
   mit einem Selektor, der eine Stufe genauer ist. */
@media (max-width:860px){
  nav.nav .nav-links a.nav-cart{display:inline-flex}
}
/* Auf schmalen Telefonen stehen Logo, der Knopf und der Warenkorb in einer
   Zeile. Zusammen sind sie breiter als 375 Pixel, dann rutscht der Warenkorb
   aus dem Bild. Also wird hier Platz gemacht, statt ihn zu verlieren. */
@media (max-width:620px){
  nav.nav{gap:.5rem}
  nav.nav .nav-links{gap:.5rem}
  nav.nav .brand{gap:.45rem}
  nav.nav .brand>span>span{display:none}
  nav.nav .nav-links a.nav-cart{padding:.55rem .6rem}
  nav.nav .nav-links a.btn{padding:.62rem .8rem;font-size:.68rem;letter-spacing:.01em}
}

/* ---------- 4. KOPF EINER UNTERSEITE ---------- */
.pagehead{padding-top:clamp(7rem,12vw,9.5rem);padding-bottom:clamp(2rem,4vw,3rem)}
.crumbs{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-secondary);margin-bottom:1.4rem;display:flex;gap:.55rem;flex-wrap:wrap;align-items:center}
.crumbs a{text-decoration:none;transition:color .35s var(--ease)}
.crumbs a:hover{color:var(--accent)}
.crumbs span{opacity:.5}

/* ---------- 5. DIE SERIEN ALS ORDNER AUF DER STARTSEITE ---------- */
.serien h2{font-size:clamp(1.9rem,4.6vw,3.2rem);max-width:16ch}
.serien .top{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;
  margin-bottom:clamp(2.6rem,5vw,4rem)}
.serien .top .lede{margin-top:1.1rem;max-width:44ch}

.stiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.2vw,1.8rem)}
@media (max-width:960px){.stiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.stiles{grid-template-columns:1fr}}

/* Jede Kachel ist ein Ordner: oben der Reiter mit der Nummer, darin die Serie. */
.stile{position:relative;display:block;text-decoration:none;background:var(--panel);
  border:1px solid var(--hairline);border-radius:3px;overflow:hidden;
  transition:border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.stile:hover{border-color:var(--line-strong);transform:translateY(-5px);box-shadow:0 18px 40px -26px rgba(20,32,31,.55)}
.stile .shot{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--panel-2)}
.stile .shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ease)}
.stile:hover .shot img{transform:scale(1.05)}
.stile .shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,32,31,.3),transparent 46%)}
.stile .tab{position:absolute;top:0;left:1.15rem;z-index:2;
  background:var(--canvas);color:var(--accent);border:1px solid var(--hairline);border-top:0;
  border-radius:0 0 3px 3px;padding:.42rem .7rem .38rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;line-height:1}
.stile .body{display:block;padding:1.25rem 1.35rem 1.4rem}
.stile .name{display:block;font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.05;
  color:var(--text-primary);letter-spacing:-.005em}
.stile .claim{display:block;font-family:var(--display);font-size:1rem;color:var(--accent);margin-top:.3rem}
.stile .text{display:block;color:var(--text-secondary);font-size:.92rem;margin-top:.7rem}
.stile .meta{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--hairline);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--text-secondary)}
.stile .go{display:inline-flex;align-items:center;gap:.4rem;color:var(--accent);white-space:nowrap}
.stile .go svg{transition:transform .45s var(--ease)}
.stile:hover .go svg{transform:translateX(4px)}

/* ---------- 6. PRODUKTRASTER ---------- */
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,1.8vw,1.5rem)}
.pgrid.wide{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){.pgrid.wide{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.pgrid,.pgrid.wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:430px){.pgrid,.pgrid.wide{grid-template-columns:1fr}}

.pcard{position:relative;display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--hairline);border-radius:3px;overflow:hidden;text-decoration:none;
  transition:border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.pcard:hover{border-color:var(--line-strong);transform:translateY(-4px);box-shadow:0 14px 34px -22px rgba(20,32,31,.5)}
/* Die Freisteller stehen auf Weiss. Die Bildflaeche bekommt deshalb ihr
   eigenes Weiss, damit das Moebel nicht auf getoentem Grund schwimmt. */
.pcard .shot{position:relative;aspect-ratio:1/1;background:#FFF;overflow:hidden;border-bottom:1px solid var(--hairline)}
.pcard .shot img{width:100%;height:100%;object-fit:contain;padding:6%;transition:transform 1.1s var(--ease)}
.pcard .shot img.amb{object-fit:cover;padding:0}
.pcard:hover .shot img{transform:scale(1.04)}
.pcard .body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.pcard .line{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.pcard h3{font-size:1.1rem;line-height:1.2}
.pcard .price{margin-top:auto;padding-top:.7rem;font-family:var(--mono);font-size:.86rem;color:var(--text-primary)}
.pcard .price small{font-size:.68rem;letter-spacing:.1em;color:var(--text-secondary);text-transform:uppercase;margin-right:.35rem}
.pcard .sizes{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--text-secondary)}

/* ---------- 7. SERIENSEITE ---------- */
.serie-hero{position:relative;aspect-ratio:21/9;overflow:hidden;border:1px solid var(--hairline);background:var(--panel-2);margin-bottom:clamp(2rem,4vw,3rem)}
.serie-hero img{width:100%;height:100%;object-fit:cover}
.serie-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,32,31,.24),transparent 55%)}
@media (max-width:700px){.serie-hero{aspect-ratio:16/10}}
.pagehead h1{font-size:clamp(2.2rem,6vw,4rem)}
.pagehead .claim{font-family:var(--display);font-size:clamp(1.1rem,2.2vw,1.5rem);color:var(--accent);margin-top:.5rem}
.pagehead .lede{margin-top:1.1rem}
.anzahl{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--hairline);
  font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;color:var(--text-secondary);
  line-height:1.9;max-width:62ch}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--hairline)}
.filters button{background:transparent;border:1px solid var(--hairline);border-radius:2px;
  padding:.5rem 1rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;cursor:pointer;
  color:var(--text-secondary);transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease)}
.filters button:hover{border-color:var(--line-strong);color:var(--text-primary)}
.filters button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:rgba(191,217,213,.28)}
@media (pointer:coarse){.filters button{min-height:44px}}
.serien-nav{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:clamp(3rem,6vw,4.5rem);padding-top:2rem;border-top:1px solid var(--hairline)}
.serien-nav a{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-decoration:none;
  border:1px solid var(--hairline);border-radius:2px;padding:.6rem 1.05rem;color:var(--text-secondary);
  transition:border-color .4s var(--ease),color .4s var(--ease)}
.serien-nav a:hover{border-color:var(--accent);color:var(--accent)}
.serien-nav a[aria-current="page"]{border-color:var(--accent);color:var(--accent)}

/* ---------- 8. PRODUKTSEITE ---------- */
.detail{padding-top:clamp(6.5rem,11vw,9rem)}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:940px){.detail-grid{grid-template-columns:1fr}}

.gallery .main{position:relative;background:#FFF;border:1px solid var(--hairline);aspect-ratio:1/1;overflow:hidden}
.gallery .main img{width:100%;height:100%;object-fit:contain;padding:5%;
  transition:opacity .45s var(--ease)}
.gallery .main img.amb{object-fit:cover;padding:0}
.gallery .main.swapping img{opacity:0}
.thumbs{display:flex;gap:.55rem;margin-top:.7rem;flex-wrap:wrap}
.thumbs button{width:70px;height:70px;padding:0;background:#FFF;border:1px solid var(--hairline);border-radius:2px;
  cursor:pointer;overflow:hidden;transition:border-color .35s var(--ease)}
.thumbs button img{width:100%;height:100%;object-fit:contain;padding:8%}
.thumbs button img.amb{object-fit:cover;padding:0}
.thumbs button[aria-current="true"]{border-color:var(--accent)}
.thumbs button:hover{border-color:var(--line-strong)}

.buy .line{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:.9rem}
.buy h1{font-size:clamp(1.8rem,3.6vw,2.7rem)}
.buy .intro{color:var(--text-secondary);font-size:.98rem;margin-top:1rem;max-width:46ch}
.buy .pricebox{margin-top:1.6rem;padding-block:1.3rem;border-block:1px solid var(--hairline);
  display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.buy .pricebox .now{font-family:var(--display);font-size:clamp(1.7rem,3.2vw,2.3rem);line-height:1}
.buy .pricebox .alt{font-family:var(--mono);font-size:.92rem;color:var(--text-secondary);
  text-decoration:line-through;text-decoration-thickness:1px}
.buy .pricebox .minus{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;
  background:var(--accent);color:#F7FAF9;border-radius:2px;padding:.24rem .5rem;line-height:1}
.eroeffnung{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--accent);
  margin-top:.7rem}
.pcard .price s{color:var(--text-secondary);text-decoration-thickness:1px;margin-left:.5rem;font-size:.78rem}
.buy .pricebox .vat{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;color:var(--text-secondary)}

/* Die Preise im Einzelnen: was im Set steckt, was einzeln dazukommt */
.aufstellung{margin-top:1.5rem}
.aufstellung .kopf{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);margin:0 0 .55rem}
.aufstellung .kopf:not(:first-child){margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--hairline)}
.aufstellung .zeile{display:flex;align-items:baseline;gap:.6rem;padding:.42rem 0;font-size:.93rem}
/* Die Punktreihe führt das Auge vom Möbel zum Preis */
.aufstellung .was{color:var(--text-secondary)}
.aufstellung .zeile::after{content:"";flex:1;order:1;align-self:flex-end;margin-bottom:.28em;
  border-bottom:1px dotted var(--hairline);min-width:1.5rem}
.aufstellung .was{order:0}
.aufstellung .wieviel{order:2;font-family:var(--mono);font-size:.88rem;white-space:nowrap;color:var(--text-primary)}
.aufstellung .zeile.einzeln{margin-top:.35rem;padding-top:.7rem;border-top:1px solid var(--hairline)}
.aufstellung .zeile.einzeln .was{color:var(--text-secondary)}
/* Einzeln kostet es mehr als im Set, das zeigt der Strich */
.aufstellung .zeile.einzeln .wieviel{color:var(--text-secondary);text-decoration:line-through;text-decoration-thickness:1px}
.aufstellung .zeile.summe{margin-top:.35rem;padding-top:.7rem;border-top:1px solid var(--hairline)}
.aufstellung .zeile.einzeln + .zeile.summe{margin-top:0;padding-top:.3rem;border-top:0}
.aufstellung .zeile.summe .was{color:var(--text-primary)}
.aufstellung .zeile.summe .wieviel{font-size:.98rem}
.aufstellung .zeile.summe::after{border-bottom:0}
.longtext .nichtdabei{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--hairline);
  font-size:.9rem;color:var(--text-secondary)}
.aufstellung .plus{order:3;flex:none;width:30px;height:30px;padding:0;line-height:1;
  background:transparent;border:1px solid var(--line-strong);border-radius:2px;cursor:pointer;
  font-family:var(--mono);font-size:.95rem;color:var(--text-primary);
  transition:border-color .35s var(--ease),color .35s var(--ease),background .35s var(--ease)}
.aufstellung .plus:hover{border-color:var(--accent);color:var(--accent)}
.aufstellung .plus.drin{border-color:var(--accent);background:var(--accent);color:#F7FAF9}
@media (pointer:coarse){.aufstellung .plus{width:44px;height:44px}}

.optgroup{margin-top:1.7rem}
.optgroup>.lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);margin-bottom:.7rem;display:flex;justify-content:space-between;gap:1rem}
.optgroup>.lbl .val{color:var(--text-primary);text-transform:none;letter-spacing:.04em}
.opts{display:flex;gap:.5rem;flex-wrap:wrap}
.opts button{background:var(--panel-2);border:1px solid var(--line-strong);border-radius:2px;
  padding:.62rem 1.05rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;cursor:pointer;
  transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.opts button:hover{border-color:var(--accent);transform:translateY(-1px)}
.opts button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:#F7FAF9}
@media (pointer:coarse){.opts button{min-height:44px}}

.swatches{display:flex;gap:.6rem;flex-wrap:wrap}
.swatches button{width:38px;height:38px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--hairline);position:relative;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.swatches button::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid transparent;
  transition:border-color .35s var(--ease)}
.swatches button:hover{transform:scale(1.07)}
.swatches button[aria-pressed="true"]::after{border-color:var(--accent)}
/* Farbe ist lieferbar, aber es gibt noch kein Foto davon. Der feine Strich
   sagt das, ohne die Farbe zu verstecken. */
.swatches button.nophoto{border-style:dashed;border-color:var(--line-strong)}
.colornote{font-size:.8rem;color:var(--text-secondary);margin-top:.7rem;line-height:1.6;
  max-width:38ch;opacity:0;max-height:0;overflow:hidden;
  transition:opacity .4s var(--ease),max-height .4s var(--ease)}
.colornote.on{opacity:1;max-height:5rem}
@media (pointer:coarse){.swatches button{width:44px;height:44px}}

.qtyrow{display:flex;gap:.7rem;align-items:stretch;margin-top:2rem;flex-wrap:wrap}
.qty{display:inline-flex;align-items:stretch;border:1px solid var(--line-strong);border-radius:2px;background:var(--panel-2)}
.qty button{width:44px;background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:1rem;
  color:var(--text-secondary);transition:color .35s var(--ease)}
.qty button:hover{color:var(--accent)}
.qty input{width:52px;border:0;background:none;text-align:center;font-family:var(--mono);font-size:.9rem;
  color:var(--text-primary);-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qtyrow .btn{flex:1;min-width:200px}

.added{margin-top:.9rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--accent);
  opacity:0;transform:translateY(-4px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.added.on{opacity:1;transform:none}

/* Die Merkmale der Linie, aus den Angaben des Herstellers */
.merkmale{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.62rem}
.merkmale li{position:relative;padding-left:1.5rem;font-size:.94rem;color:var(--text-secondary)}
.merkmale li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:1px;background:var(--accent)}

.specs{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--hairline)}
.specs dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.55rem 1.4rem;margin:0;font-size:.92rem}
.specs dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);padding-top:.22rem}
.specs dd{margin:0}
.longtext{margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid var(--hairline);color:var(--text-secondary);font-size:.96rem;max-width:64ch}
.longtext p{margin-bottom:.9rem}
.longtext ul{margin:.4rem 0 1.1rem;padding-left:1.1rem}
.longtext li{margin-bottom:.3rem}
.longtext strong{color:var(--text-primary);font-weight:500}

.related{margin-top:clamp(3.5rem,7vw,5.5rem)}
.related h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:1.8rem}

/* Passend dazu: die Ergaenzungen derselben Linie, mit Preis und Knopf */
.passend{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(.9rem,1.8vw,1.4rem)}
.passend article{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--hairline);
  border-radius:3px;overflow:hidden;transition:border-color .5s var(--ease)}
.passend article:hover{border-color:var(--line-strong)}
.passend .shot{display:block;aspect-ratio:1/1;background:#FFF;overflow:hidden;border-bottom:1px solid var(--hairline)}
.passend .shot img{width:100%;height:100%;object-fit:contain;padding:7%;transition:transform 1.1s var(--ease)}
.passend .shot img.amb{object-fit:cover;padding:0}
.passend article:hover .shot img{transform:scale(1.04)}
.passend .body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.passend .art{font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.passend h3{font-size:1.02rem;line-height:1.25}
.passend h3 a{text-decoration:none;transition:color .35s var(--ease)}
.passend h3 a:hover{color:var(--accent)}
.passend .preis{font-family:var(--mono);font-size:.92rem;margin-top:auto;padding-top:.5rem}
.passend .preis small{font-size:.66rem;letter-spacing:.1em;color:var(--text-secondary);text-transform:uppercase}
.passend .btn{margin-top:.8rem;width:100%}

/* ---------- 9. WARENKORB ---------- */
.cart-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (max-width:940px){.cart-grid{grid-template-columns:1fr}}
.citem{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:1.2rem;align-items:start;
  padding:1.4rem 0;border-top:1px solid var(--hairline)}
.citem:last-of-type{border-bottom:1px solid var(--hairline)}
.citem .shot{width:96px;height:96px;background:#FFF;border:1px solid var(--hairline);overflow:hidden}
.citem .shot img{width:100%;height:100%;object-fit:contain;padding:7%}
/* Die Armatur hat kein Foto. Ein leerer weisser Kasten sieht nach einem
   Fehler aus, deshalb hier ein ruhiges Zeichen statt nichts. */
.citem .shot:empty{background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%235A6B69' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='.5'%3E%3Cpath d='M13 27V16a7 7 0 0 1 7-7h4'/%3E%3Cpath d='M9.5 27h7'/%3E%3Cpath d='M24 6.5h4.5v5H24z'/%3E%3C/g%3E%3C/svg%3E") center/44% no-repeat}
.citem h3{font-size:1.08rem;margin-bottom:.3rem}
.citem h3 a{text-decoration:none;transition:color .35s var(--ease)}
.citem h3 a:hover{color:var(--accent)}
/* Die getroffene Wahl, gross genug um zwei Zeilen zu unterscheiden */
.citem .wahl{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 .55rem}
.citem .wahl .w{display:inline-flex;align-items:center;gap:.4rem;
  border:1px solid var(--hairline);border-radius:2px;padding:.24rem .58rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--text-primary);
  background:var(--panel-2)}
.citem .wahl .farbe i{width:12px;height:12px;border-radius:50%;flex:none;
  border:1px solid var(--hairline);display:inline-block}
.citem .vars{font-family:var(--mono);font-size:.7rem;letter-spacing:.07em;color:var(--text-secondary);line-height:1.9}
.citem .right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:.7rem}
.citem .sum{font-family:var(--mono);font-size:.94rem;white-space:nowrap}
.citem .drop{background:none;border:0;padding:.2rem 0;cursor:pointer;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.1em;color:var(--text-secondary);text-decoration:underline;text-underline-offset:3px;
  transition:color .35s var(--ease)}
.citem .drop:hover{color:var(--accent-hover)}
.citem .qty button{width:36px}
.citem .qty input{width:42px}
@media (max-width:560px){
  .citem{grid-template-columns:72px minmax(0,1fr);gap:.9rem}
  .citem .shot{width:72px;height:72px}
  .citem .right{grid-column:1 / -1;flex-direction:row;justify-content:space-between;align-items:center;width:100%}
}
.summary{position:sticky;top:6.5rem;background:var(--panel);border:1px solid var(--hairline);border-radius:3px;padding:1.7rem}
.summary h2{font-size:1.35rem;margin-bottom:1.2rem}
.summary .row{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;font-size:.94rem;color:var(--text-secondary)}
.summary .row.total{border-top:1px solid var(--hairline);margin-top:.6rem;padding-top:1rem;
  color:var(--text-primary);font-family:var(--mono);font-size:1.05rem}
/* Lieferung, Abholung oder Montage. Der Preis wandert in die Summe. */
.summary .liefer{border:0;margin:1.1rem 0 .3rem;padding:1.1rem 0 .2rem;border-top:1px solid var(--hairline)}
.summary .liefer legend{padding:0;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-secondary);margin-bottom:.7rem}
.summary .liefer label{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.6rem;
  align-items:start;padding:.55rem 0;cursor:pointer}
.summary .liefer input{margin:.28rem 0 0;accent-color:var(--accent);width:16px;height:16px;flex:none}
.summary .liefer .was{font-size:.92rem;line-height:1.35}
.summary .liefer .was b{font-weight:400}
.summary .liefer .was small{display:block;font-size:.76rem;color:var(--text-secondary);margin-top:.15rem}
.summary .liefer .preis{font-family:var(--mono);font-size:.85rem;white-space:nowrap;padding-top:.08rem}
.summary .liefer label:hover .was b{color:var(--accent)}
/* Hinweis unter der Auswahl: die Preise gelten fuer Wien. */
.summary .liefer .hinweis{font-size:.78rem;line-height:1.55;color:var(--text-secondary);margin:.7rem 0 0}
@media (pointer:coarse){.summary .liefer label{padding:.7rem 0}.summary .liefer input{width:20px;height:20px}}

.summary .btn{width:100%;margin-top:1.3rem}
.summary .note{font-size:.78rem;color:var(--text-secondary);margin-top:1rem;line-height:1.7}
@media (max-width:940px){.summary{position:static}}
.empty{text-align:center;padding:clamp(3rem,8vw,6rem) 0}
.empty h2{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:.9rem}
.empty p{color:var(--text-secondary);margin-bottom:2rem}
/* Ausblende-Klasse. Sie braucht !important, weil das Anfrageformular seinen
   display-Wert als Inline-Stil traegt - der schlaegt sonst jede Klassenregel,
   und das abgeschickte Formular bliebe neben der Bestaetigung stehen. Ein
   Kunde koennte dann versehentlich ein zweites Mal absenden. */
.cart-hide{display:none !important}

/* ---------- 10. KURZE BILDSCHIRME UND REDUZIERTE BEWEGUNG ---------- */
@media (prefers-reduced-motion:reduce){
  html.shop{scroll-behavior:auto}
  .shop-page *,.shop-page *::before,.shop-page *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important}
  body.shop-page{opacity:1}
  .shop-page .rv .part{opacity:1;transform:none}
  .shop-page .env::before{animation:none}
}

/* Neueroeffnungsangebote mit Laufzeit. Steht auf der Startseite ueber den Serien. */
.angebot{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;
  margin:1.5rem 0 0;padding:.85rem 1.1rem;
  background:var(--panel-2);border:1px solid var(--hairline);
  border-left:3px solid var(--accent);border-radius:2px;
  font-size:.96rem;line-height:1.5;color:var(--text-primary)
}
.angebot .was strong{color:var(--accent);font-weight:600}
.angebot .bis{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-secondary);white-space:nowrap
}

/* ---------- Termin im Showroom: Monatskalender und Uhrzeiten ---------- */
.termin{padding:1.1rem 1.2rem;background:var(--panel);border:1px solid var(--hairline);border-radius:3px}
.termin.fehlt{border-color:#9c3b32}
.terminhinweis{margin:0 0 1rem;font-size:.86rem;line-height:1.65;color:var(--text-secondary)}
.kal{max-width:23rem}
.kalkopf{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.7rem}
.kalmonat{font-family:var(--display);font-size:1.06rem;color:var(--text-primary)}
.kalnav{width:2rem;height:2rem;border:1px solid var(--line-strong);border-radius:2px;background:var(--panel-2);
  color:var(--text-primary);font-size:1.1rem;line-height:1;cursor:pointer;transition:border-color .3s var(--ease),color .3s var(--ease)}
.kalnav:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.kalnav:disabled{opacity:.3;cursor:default}
.kalwoche,.kaltage{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem}
.kalwoche span{text-align:center;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-secondary);padding-bottom:.35rem}
.kaltage .leer{height:2.3rem}
.kaltage .tag{height:2.3rem;border:1px solid transparent;border-radius:2px;background:var(--panel-2);
  color:var(--text-primary);font:inherit;font-size:.9rem;cursor:pointer;
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.kaltage .tag:hover:not(:disabled){border-color:var(--accent)}
.kaltage .tag:disabled{background:transparent;color:var(--text-secondary);opacity:.35;cursor:default}
.kaltage .tag.an{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.zeiten{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--hairline)}
.zeiten .zeit{padding:.45rem .75rem;border:1px solid var(--line-strong);border-radius:2px;background:var(--panel-2);
  color:var(--text-primary);font-family:var(--mono);font-size:.8rem;cursor:pointer;
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.zeiten .zeit:hover{border-color:var(--accent)}
.zeiten .zeit.an{background:var(--accent);border-color:var(--accent);color:#fff}
.terminwahl{margin:.95rem 0 0;font-size:.88rem;color:#9c3b32}
.terminwahl.steht{color:var(--accent);font-weight:600}
@media (max-width:420px){.kal{max-width:100%}.kaltage .tag,.kaltage .leer{height:2.6rem}}

/* Vergebene Termine: sichtbar, aber nicht waehlbar */
.zeiten .zeit.weg{
  opacity:.34;cursor:default;text-decoration:line-through;
  border-color:var(--hairline);background:transparent
}
.zeiten .zeit.weg:hover{border-color:var(--hairline)}
.zeitleer{flex:1 0 100%;margin:.2rem 0 0;font-size:.86rem;color:var(--text-secondary)}

/* ---------- Impressum und Datenschutz ---------- */
.rechtstext{max-width:44rem;padding-bottom:clamp(3rem,6vw,5rem)}
.rechtstext h2{font-family:var(--display);font-size:1.32rem;margin:2.4rem 0 .8rem;color:var(--text-primary)}
.rechtstext h2:first-of-type{margin-top:1.6rem}
.rechtstext p{margin:0 0 1rem;line-height:1.75;color:var(--text-secondary)}
.rechtstext p.lede{font-size:1.05rem;color:var(--text-primary)}
.rechtstext a{color:var(--accent)}
.rechtstext code{font-family:var(--mono);font-size:.86em;background:rgba(0,0,0,.045);
  padding:.1em .38em;border-radius:.28rem;white-space:nowrap}
.rechtstext dl.recht{display:grid;grid-template-columns:minmax(11rem,auto) 1fr;gap:.5rem 1.4rem;margin:0 0 1rem}
.rechtstext dl.recht dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-secondary);padding-top:.24rem}
.rechtstext dl.recht dd{margin:0;color:var(--text-primary);line-height:1.6}
.rechtstext ul.recht-liste{margin:0 0 1rem;padding-left:1.1rem;color:var(--text-secondary);line-height:1.8}
.rechtstext .stand{margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--hairline);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:560px){.rechtstext dl.recht{grid-template-columns:1fr;gap:.2rem}
  .rechtstext dl.recht dd{margin-bottom:.7rem}}