/* Produktseiten.
   Eigene Datei, weil die Startseite ihr CSS inline traegt und dort auch
   bleiben soll: Sie wird vor dem Ausliefern geschnitten, eine gemeinsame
   Datei muesste jede Stufe mittragen. Farben und Schriften sind die der
   aktuellen CI, nicht die aeltere Fassung aus recht.css. */
:root{
  --navy:#143DBC;
  --navy-tief:#0E2C8A;
  --rot:#D62828;
  --gelb:#FFC107;
  --grund:#F4EFE5;
  --blatt:#FFFFFF;
  --sand:#F3E6D0;
  --tinte:#14213D;
  --tinte-leise:#5C6784;
  --linie:#DED5C6;
  --schatten:0 1px 2px rgba(20,61,188,.06), 0 24px 48px -32px rgba(20,61,188,.45);
  --satz:"Barlow", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --wucht:"Barlow Condensed", "Barlow", ui-sans-serif, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --grund:#0B1420; --blatt:#132030; --tinte:#EDE4D6; --tinte-leise:#93A2B4;
    --linie:#22334A; --sand:#1A2A3D;
    --navy:#7B98F0; --navy-tief:#A3B8F6; --rot:#F2635F; --gelb:#FFC93F;
    --schatten:0 1px 2px rgba(0,0,0,.4), 0 24px 48px -32px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --grund:#0B1420; --blatt:#132030; --tinte:#EDE4D6; --tinte-leise:#93A2B4;
  --linie:#22334A; --sand:#1A2A3D;
  --navy:#7B98F0; --navy-tief:#A3B8F6; --rot:#F2635F; --gelb:#FFC93F;
  --schatten:0 1px 2px rgba(0,0,0,.4), 0 24px 48px -32px rgba(0,0,0,.9);
}

*{box-sizing:border-box;}
body{
  margin:0; background:var(--grund); color:var(--tinte);
  font-family:var(--satz); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block;}
.bahn{width:100%; max-width:74rem; margin:0 auto; padding:0 1.5rem;}

.kopf{position:sticky; top:0; z-index:50; background:var(--grund); border-bottom:1px solid var(--linie);}
.kopf .bahn{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:70px;}
.kopf .marke img{height:40px; width:auto;}
.kopf nav a{
  font-size:.82rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tinte); text-decoration:none;
}
.kopf nav a:hover{color:var(--rot);}

.knopf{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--satz); font-weight:800; font-size:.85rem;
  letter-spacing:.08em; text-transform:uppercase;
  background:var(--rot); color:#fff; text-decoration:none;
  padding:.82rem 1.5rem; border:0; border-radius:9px; cursor:pointer;
  transform:skew(-6deg); transition:filter .14s ease;
}
.knopf > *{display:inline-block; transform:skew(6deg);}
.knopf:hover{filter:brightness(.9);}
.knopf.navy{background:var(--navy); color:var(--grund);}

/* ── Der Artikel ─────────────────────────────────────────────── */
.zurueck{
  display:inline-block; margin:2rem 0 1.2rem; font-size:.85rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--navy); text-decoration:none;
}
.zurueck:hover{color:var(--rot);}

.artikel{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:3rem; align-items:start; padding-bottom:4rem;}
@media (max-width:880px){ .artikel{grid-template-columns:1fr; gap:2rem;} }

.schau .gross{
  background:var(--sand); border:1px solid var(--linie); border-radius:8px;
  overflow:hidden; aspect-ratio:4/5; position:relative;
}
.schau .gross img{width:100%; height:100%; object-fit:cover;}
.schau .fahne{
  position:absolute; top:1rem; left:1rem;
  font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  background:var(--gelb); color:#0F1926; padding:.3rem .6rem; border-radius:2px;
}
.schau .reihe{display:flex; gap:.6rem; margin-top:.7rem;}
.schau .an{
  flex:0 0 5.5rem; background:none; border:2px solid transparent; border-radius:6px;
  padding:.25rem; cursor:pointer; font-family:var(--satz); color:var(--tinte-leise);
}
.schau .an img{aspect-ratio:4/5; object-fit:cover; border-radius:3px; background:var(--sand);}
.schau .an span{display:block; margin-top:.22rem; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;}
.schau .an.aktiv{border-color:var(--navy); color:var(--navy); font-weight:700;}

.angabe h1{
  font-family:var(--wucht); font-weight:800; font-style:italic; text-transform:uppercase;
  font-size:clamp(2.2rem,5.5vw,3.4rem); line-height:.92; color:var(--navy); margin:0 0 .5rem;
}
.balken{width:min(12rem,55%); height:9px; background:var(--rot); transform:skew(-30deg); border-radius:1px; margin:0 0 1.4rem;}
.angabe .preis{font-family:var(--wucht); font-weight:700; font-size:2.4rem; line-height:1; color:var(--tinte);}
.angabe .preis small{display:block; font-family:var(--satz); font-weight:500; font-size:.8rem; color:var(--tinte-leise);}
.angabe p{color:var(--tinte-leise); margin:0 0 1rem;}
.angabe .fuehrung{color:var(--tinte); font-size:1.05rem;}

.merkmale{list-style:none; padding:0; margin:1.4rem 0; border-top:1px solid var(--linie);}
.merkmale li{
  display:grid; grid-template-columns:9rem 1fr; gap:1rem; padding:.7rem 0;
  border-bottom:1px solid var(--linie); font-size:.93rem; align-items:baseline;
}
.merkmale dt, .merkmale .was{
  font-family:var(--wucht); font-weight:700; font-size:.82rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tinte-leise);
}
@media (max-width:520px){ .merkmale li{grid-template-columns:1fr; gap:.15rem;} }

.groessen{margin:1.4rem 0 1rem;}
.groessen .titel{
  display:block; font-family:var(--wucht); font-weight:700; font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinte-leise); margin-bottom:.4rem;
}
.groessen .knoepfe{display:flex; gap:.4rem; flex-wrap:wrap;}
.g{
  font-family:var(--satz); font-weight:700; font-size:.9rem; min-width:2.9rem;
  background:var(--blatt); color:var(--tinte); border:1px solid var(--linie);
  border-radius:5px; padding:.5rem .7rem; cursor:pointer;
}
.g:hover{border-color:var(--navy);}
.g.aktiv{background:var(--navy); color:var(--grund); border-color:var(--navy);}

.kaufen{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.4rem;}
.sperre{
  font-family:var(--wucht); font-weight:800; font-style:italic; text-transform:uppercase;
  letter-spacing:.08em; font-size:1rem; color:var(--rot);
  border:2px dashed var(--rot); border-radius:8px; padding:.6rem 1.1rem; transform:skew(-6deg);
}
.klein{font-size:.83rem; color:var(--tinte-leise); line-height:1.5;}
.klein a{color:var(--navy);}
.fuellen{
  background:repeating-linear-gradient(45deg, var(--gelb), var(--gelb) 7px, #ffcb4d 7px, #ffcb4d 14px);
  color:#0F1926; border:1px dashed #0F1926; border-radius:3px;
  padding:0 .35rem; font-size:.86em; font-weight:600;
}

/* ── Bestellstrecke, dieselbe wie auf der Startseite ─────────── */
.ueberlage{position:fixed; inset:0; z-index:200; background:rgba(15,25,38,.55); display:flex; align-items:center; justify-content:center; padding:1.2rem;}
.ueberlage[hidden]{display:none;}
.ueberlage .kasten{background:var(--blatt); border-radius:10px; padding:1.6rem 1.5rem; width:min(30rem,100%); max-height:90vh; overflow:auto; position:relative; box-shadow:var(--schatten);}
.ueberlage .zu{position:absolute; top:.6rem; right:.7rem; background:none; border:0; font-size:1.6rem; line-height:1; color:var(--tinte-leise); cursor:pointer;}
.ueberlage h3{font-family:var(--wucht); font-weight:800; font-style:italic; text-transform:uppercase; font-size:1.7rem; color:var(--navy); margin:0 0 .2rem;}
.ueberlage .was{font-weight:600; margin:0 0 1rem;}
.ueberlage label{display:block; font-size:.78rem; font-weight:600; color:var(--tinte-leise); margin-bottom:.7rem;}
.ueberlage .pflicht{color:var(--rot);}
.ueberlage input, .ueberlage textarea{
  display:block; width:100%; margin-top:.22rem; font-family:var(--satz); font-size:.95rem;
  color:var(--tinte); background:var(--grund); border:1px solid var(--linie);
  border-radius:4px; padding:.55rem .65rem;
}
.ueberlage input:focus, .ueberlage textarea:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(20,61,188,.16);}
.antwort{font-size:.88rem; margin:.7rem 0 0; min-height:1.1rem;}
.antwort.gut{color:#1D7A4C; font-weight:600;}
.antwort.schlecht{color:var(--rot); font-weight:600;}

.fuss{position:relative; background:var(--navy); color:var(--grund); padding:2.9rem 0 2rem; margin-top:2rem;}
.fuss::before{
  content:""; position:absolute; left:0; right:0; top:0; height:7px;
  background:linear-gradient(90deg, var(--rot) 0 55%, var(--gelb) 55% 100%);
}
.fuss img{height:34px; width:auto; margin-bottom:.8rem;}
.fuss p{margin:0 0 .35rem; font-size:.9rem; color:rgba(244,239,229,.76);}
.fuss a{color:var(--grund); text-decoration:underline; text-underline-offset:3px;}
.fuss nav{display:flex; gap:1.3rem; flex-wrap:wrap; font-size:.88rem; margin-top:1rem;}
a:focus-visible, button:focus-visible{outline:3px solid var(--gelb); outline-offset:3px;}