/* ══════════════════════════════════════════════════════════════════════════
   PRODUKT-EINZELSEITE — ergänzt basis.css
   ══════════════════════════════════════════════════════════════════════════
   Zwei Spalten: Galerie links, Angaben rechts. Ab 900 px untereinander.
   Farben, Knöpfe, Karten und der Warenkorb kommen aus basis.css.
   ⚠️ Pfade absolut schreiben (/assets/…) — relative zählen ab DIESER Datei.
   ══════════════════════════════════════════════════════════════════════════ */

body{ padding-top:0; }

main{
  padding-top:120px; padding-bottom:110px;
  position:relative; z-index:12;
}
main > .mitte{ display:block; }

/* ── Brotkrumen ───────────────────────────────────────────────────────────── */
.brotkrumen{
  font-family:'Chakra Petch',ui-monospace,monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--w-38); margin-bottom:34px;
  display:flex; gap:9px; flex-wrap:wrap; align-items:center;
}
.brotkrumen a{ color:var(--w-60); text-decoration:none; transition:color .25s ease; }
.brotkrumen a:hover{ color:var(--lime); }
.brotkrumen span[aria-current]{ color:var(--weiss); }

/* ── Zweispalter ──────────────────────────────────────────────────────────── */
.produkt{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px); align-items:start;
}
@media (max-width:900px){ .produkt{ grid-template-columns:1fr; gap:32px; } }

/* ── Galerie ──────────────────────────────────────────────────────────────── */
.galerie{ position:sticky; top:96px; }
@media (max-width:900px){ .galerie{ position:static; } }

.galerie-gross{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  border-radius:var(--radius);
  background:linear-gradient(170deg,#141414 0%,#080808 60%,#000 100%);
  box-shadow:inset 0 0 0 1px var(--linie);
}
.galerie-gross img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  transition:opacity .45s ease;
}
.galerie-gross .gross-2{ opacity:0; }
.galerie-gross.zweite .gross-1{ opacity:0; }
.galerie-gross.zweite .gross-2{ opacity:1; }
/* Am Rechner reicht das Überfahren, wie auf der Startseite */
@media (hover:hover){
  .galerie-gross.hat-zwei:hover .gross-1{ opacity:0; }
  .galerie-gross.hat-zwei:hover .gross-2{ opacity:1; }
  .galerie-gross.hat-zwei.zweite:hover .gross-1{ opacity:1; }
  .galerie-gross.hat-zwei.zweite:hover .gross-2{ opacity:0; }
}

.minis{ display:flex; gap:10px; margin-top:12px; }
.mini{
  width:84px; aspect-ratio:4/5; padding:0; cursor:pointer;
  background:none; border:none; border-radius:2px; overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--linie);
  opacity:.55; transition:opacity .3s ease, box-shadow .3s ease;
}
.mini img{ width:100%; height:100%; object-fit:cover; display:block; }
.mini:hover{ opacity:.85; }
.mini.aktiv{ opacity:1; box-shadow:inset 0 0 0 1px var(--weiss); }

/* ── Angaben ──────────────────────────────────────────────────────────────── */
.angaben h1{
  font-family:'Primal',Montserrat,Helvetica,Arial,sans-serif; font-weight:700;
  font-size:clamp(1.9rem,4.2vw,3.1rem); line-height:1.02; letter-spacing:.01em;
  overflow-wrap:break-word;
}
.angaben .farbe{
  font-size:16px; color:var(--w-60); text-transform:uppercase;
  letter-spacing:.06em; margin-top:8px;
}
.preis-gross{
  font-family:'Primal',Montserrat,sans-serif; font-weight:700;
  font-size:34px; color:var(--tuerkis); line-height:1.1; margin:26px 0 0;
}
.preis-gross small{
  display:block; font-family:'Raleway',sans-serif; font-weight:400;
  font-size:12px; color:var(--w-38); letter-spacing:.02em; margin-top:7px;
}
.beschreibung{
  font-size:15px; line-height:1.7; color:var(--w-85); margin:24px 0 0;
}

.wahlblock{ margin:28px 0 0; }
.wahl-titel{
  display:block; font-family:'Chakra Petch',monospace; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--w-60);
  margin-bottom:10px;
}
.wahlblock .groessenwahl{ margin:0; gap:6px; }
.wahlblock .gr{ padding:8px 14px; font-size:12px; }

.btn-gross{
  width:100%; justify-content:center; margin-top:24px;
  padding:16px 24px; font-size:13px;
}

.vertrauen{
  list-style:none; padding:0; margin:26px 0 0;
  display:flex; flex-direction:column; gap:9px;
}
.vertrauen li{
  font-size:13.5px; color:var(--w-60); line-height:1.5;
  padding-left:20px; position:relative;
}
.vertrauen li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:9px; height:2px; background:var(--lime);
}
.vertrauen b{ color:var(--w-85); font-weight:600; }
.vertrauen a{ color:var(--tuerkis); }

.merkmale{
  margin:34px 0 0; padding-top:22px; border-top:1px solid var(--linie);
  display:grid; grid-template-columns:auto 1fr; gap:12px 24px; align-items:start;
}
.merkmale dt{
  font-family:'Chakra Petch',monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--w-38); padding-top:2px;
}
.merkmale dd{ margin:0; font-size:14px; color:var(--w-85); line-height:1.6; }
.merkmale dd ul{ margin:0; padding-left:17px; }
.merkmale dd li{ margin-bottom:3px; }
@media (max-width:520px){
  .merkmale{ grid-template-columns:1fr; gap:4px 0; }
  .merkmale dd{ margin-bottom:14px; }
}

/* ── Weitere Teile ────────────────────────────────────────────────────────── */
.weitere{ margin-top:clamp(64px,9vw,120px); }
.weitere h2{
  font-family:'Primal',Montserrat,sans-serif; font-weight:700;
  font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:28px;
}
.quer-raster{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
@media (max-width:1000px){ .quer-raster{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){  .quer-raster{ grid-template-columns:repeat(2,1fr); } }

.quer-karte{
  display:flex; flex-direction:column; text-decoration:none; color:var(--weiss);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--linie);
  transition:box-shadow .35s ease, transform .45s cubic-bezier(.2,.7,.3,1);
}
.quer-karte:hover{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); transform:translateY(-3px);
}
.quer-karte img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  filter:brightness(.9) saturate(.85);
  transition:filter .4s ease;
}
.quer-karte:hover img{ filter:brightness(1) saturate(1); }
.quer-name{
  font-family:'Primal',Montserrat,sans-serif; font-weight:700; font-size:14px;
  letter-spacing:.01em; padding:12px 12px 2px; line-height:1.15;
}
.quer-preis{
  font-family:'Primal',Montserrat,sans-serif; font-weight:700; font-size:13px;
  color:var(--tuerkis); padding:0 12px 14px;
}

@media (prefers-reduced-motion:reduce){
  .galerie-gross img, .quer-karte, .quer-karte img, .mini{ transition:none; }
}