/* ==========================================================================
   Shop, ergänzend zu style.css
   --------------------------------------------------------------------------
   Nutzt ausschließlich die Farb- und Abstandsvariablen aus style.css, damit
   heller und dunkler Modus automatisch stimmen. Farbtrennung wie auf der
   restlichen Website: Teal = 3D-Druck, Grün = Gläser/LaserArtWorld.
   ========================================================================== */

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.shop-hinweis{
  margin:0 auto 8px; max-width:720px; text-align:center;
  padding:14px 18px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--bg-soft-2); color:var(--ink-soft);
}
.shop-steuer{ color:var(--ink-soft); margin-top:6px; }
.shop-steuer a{ text-decoration:underline; text-underline-offset:2px; }

/* ---- Übersicht ---------------------------------------------------------- */
.shop-raster{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
}
.shop-artikel{
  --farbe:var(--accent); --farbe-rgb:var(--accent-rgb);
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
}
.shop-artikel.gruen{ --farbe:var(--accent-2); --farbe-rgb:var(--accent-2-rgb); }
.shop-artikel:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:rgba(var(--farbe-rgb),.45); }
.shop-artikel:focus-visible{ outline:3px solid var(--farbe); outline-offset:3px; }
.shop-artikel-bild{
  aspect-ratio:4 / 3; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 40%, rgba(var(--farbe-rgb),.16), rgba(var(--farbe-rgb),.04) 70%);
  color:var(--farbe);
}
.shop-artikel-bild svg{ width:46%; height:auto; }
.shop-artikel-bild img{ width:100%; height:100%; object-fit:cover; }
.shop-artikel-text{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.shop-artikel-text h3{ font-size:1.125rem; line-height:1.3; font-weight:600; letter-spacing:-0.01em; }
.shop-artikel-text p{ color:var(--ink-soft); font-size:0.9375rem; line-height:1.5; margin-top:6px; }
.shop-artikel-text .shop-artikel-preis{
  margin-top:auto; padding-top:14px; color:var(--ink); font-weight:700; font-size:1.0625rem;
}
.shop-artikel-preis span{ font-weight:500; font-size:0.8125rem; color:var(--ink-soft); margin-left:6px; }

.shop-fakten{
  display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.shop-fakten > div{
  padding:22px; border-radius:var(--radius-md);
  border:1px solid var(--line); background:var(--card);
}
.shop-fakten b{ display:block; font-size:1rem; margin-bottom:6px; }
.shop-fakten span{ color:var(--ink-soft); font-size:0.9375rem; line-height:1.5; }
.shop-fakten + .shop-steuer{ text-align:center; margin-top:18px; }

/* ---- Produktseite -------------------------------------------------------- */
.shop-produkt{ padding-top:130px; }
.shop-pfad{ font-size:0.875rem; color:var(--ink-soft); margin-bottom:22px; }
.shop-pfad a:hover{ color:var(--ink); text-decoration:underline; }
.shop-produkt-raster{
  display:grid; gap:48px; align-items:start;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width:860px){ .shop-produkt-raster{ grid-template-columns:1fr; gap:28px; } }
.shop-produkt-bild{
  --farbe:var(--accent); --farbe-rgb:var(--accent-rgb);
  position:relative;
  aspect-ratio:1 / 1; border-radius:var(--radius-lg);
  display:grid; place-items:center; align-content:center; gap:10px;
  border:1px solid var(--line);
  background:radial-gradient(circle at 50% 40%, rgba(var(--farbe-rgb),.18), rgba(var(--farbe-rgb),.04) 70%);
  color:var(--farbe); overflow:hidden;
}
.shop-produkt-bild.gruen{ --farbe:var(--accent-2); --farbe-rgb:var(--accent-2-rgb); }
.shop-produkt-bild svg{ width:48%; height:auto; }
.shop-produkt-bild img{ width:100%; height:100%; object-fit:cover; }
.shop-produkt-bild .small{ color:var(--ink-soft); }
@media (max-width:860px){ .shop-produkt-bild{ aspect-ratio:4 / 3; } }

.shop-produkt-titel{
  font-size:clamp(1.875rem, 4vw, 2.75rem); line-height:1.1; font-weight:700;
  letter-spacing:-0.02em; margin-top:6px;
}
.shop-produkt-preis{ font-size:1.75rem; font-weight:700; margin-top:16px; }
.shop-absatz{ margin-top:16px; line-height:1.6; color:var(--ink-soft); font-size:1.0625rem; }
.shop-formular{ margin-top:28px; }

.form-field select{
  width:100%; border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  font-family:var(--font); font-size:1rem; background:var(--bg-soft-2); color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
}
.form-field select:focus, .form-field input[type="number"]:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.15);
}
body.theme-green .form-field input:focus,
body.theme-green .form-field select:focus{
  border-color:var(--accent-2); box-shadow:0 0 0 4px rgba(var(--accent-2-rgb),.15);
}
.shop-zaehler{ display:block; margin-top:6px; color:var(--ink-soft); }

.shop-vorschau{
  margin:4px 0 20px; padding:18px; border-radius:var(--radius-sm);
  border:1px dashed rgba(var(--accent-2-rgb),.5); background:rgba(var(--accent-2-rgb),.06);
}
.shop-vorschau .small{ color:var(--ink-soft); }
.shop-vorschau-text{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:18px 8px; font-size:1.5rem; text-align:center; overflow-wrap:anywhere;
  font-family:Georgia, "Times New Roman", serif;
}
.shop-vorschau-text[data-schrift="modern"]{ font-family:var(--font); letter-spacing:.02em; }
.shop-vorschau-text[data-schrift="schreibschrift"]{
  font-family:"Snell Roundhand", "Segoe Script", "Brush Script MT", cursive; font-size:1.75rem;
}

.shop-kaufzeile{ display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; }
.shop-kaufzeile .shop-menge{ width:110px; margin-bottom:0; }
.shop-kaufzeile .btn{ flex:1 1 220px; }
.shop-widerruf-hinweis{ margin-top:14px; color:var(--ink-soft); line-height:1.5; }
.shop-widerruf-hinweis a{ text-decoration:underline; text-underline-offset:2px; }

.shop-details{ margin-top:28px; display:grid; gap:8px; }
.shop-details li{ position:relative; padding-left:22px; color:var(--ink-soft); }
.shop-details li::before{
  content:""; position:absolute; left:2px; top:.6em; width:8px; height:8px; border-radius:50%;
  background:var(--accent);
}
body.theme-green .shop-details li::before{ background:var(--accent-2); }
.shop-versandinfo{ margin-top:28px; padding-top:22px; border-top:1px solid var(--line); }
.shop-versandinfo h2{ font-size:1.125rem; margin-bottom:8px; }
.shop-versandinfo p{ color:var(--ink-soft); font-size:0.9375rem; line-height:1.6; }

/* ---- Warenkorb ----------------------------------------------------------- */
.shop-korb, .shop-danke{ padding-top:130px; }
.shop-korb h1, .shop-danke h1{ margin-bottom:28px; font-size:clamp(2rem, 5vw, 3rem); }
.shop-danke .lead{ margin-bottom:12px; }
.shop-leer{ text-align:center; padding:40px 0; }
.shop-leer .hero-actions{ justify-content:center; margin-top:24px; }

.shop-korb-raster{
  display:grid; gap:32px; align-items:start;
  grid-template-columns:minmax(0, 1fr) 380px;
}
@media (max-width:960px){ .shop-korb-raster{ grid-template-columns:1fr; } }

.shop-korb-liste{ display:grid; gap:14px; margin-bottom:22px; }
.shop-korb-zeile{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:20px 22px; border-radius:var(--radius-md);
  border:1px solid var(--line); background:var(--card);
  border-left:4px solid var(--accent);
}
.shop-korb-zeile.gruen{ border-left-color:var(--accent-2); }
.shop-korb-info{ min-width:0; flex:1 1 260px; }
.shop-korb-info h2, .shop-korb-info h3{ font-size:1.0625rem; font-weight:600; }
.shop-korb-info h2 a:hover{ text-decoration:underline; }
.shop-korb-info dl{ margin:8px 0; display:grid; gap:2px; }
.shop-korb-info dl div{ display:flex; gap:6px; flex-wrap:wrap; font-size:0.9375rem; }
.shop-korb-info dt{ color:var(--ink-soft); }
.shop-korb-info dt::after{ content:":"; }
.shop-korb-info dd{ margin:0; font-weight:600; overflow-wrap:anywhere; }
.shop-korb-info .small{ color:var(--ink-soft); }
.shop-korb-aktionen{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.shop-menge-form{ display:flex; gap:8px; align-items:center; }
.shop-menge-form input, .shop-menge input{
  width:76px; border:1px solid var(--line); border-radius:12px; padding:10px 12px;
  font-family:var(--font); font-size:1rem; background:var(--bg-soft-2); color:var(--ink);
}
.shop-menge input{ width:100%; padding:14px 16px; }
.btn.btn-klein{ padding:9px 16px; font-size:0.875rem; }
.shop-entfernen{
  background:none; border:0; padding:6px 2px; cursor:pointer;
  font:inherit; font-size:0.875rem; color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px;
}
.shop-entfernen:hover{ color:var(--ink); }
.shop-korb-summe{ font-weight:700; min-width:86px; text-align:right; margin-left:auto; }

.shop-kasse{
  padding:26px; border-radius:var(--radius-md);
  border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow-sm);
  position:sticky; top:100px;
}
@media (max-width:960px){ .shop-kasse{ position:static; } }
.shop-kasse h2{ font-size:1.25rem; margin-bottom:16px; }
.shop-kasse fieldset{ border:0; margin:0 0 12px; padding:0; }
.shop-kasse legend{ font-size:0.8125rem; font-weight:600; margin-bottom:8px; }
.shop-radio{
  display:flex; gap:10px; align-items:flex-start; padding:12px 14px; margin-bottom:8px;
  border:1px solid var(--line); border-radius:12px; cursor:pointer; font-size:0.9375rem;
}
.shop-radio:has(input:checked){ border-color:rgba(var(--accent-rgb),.6); background:rgba(var(--accent-rgb),.06); }
.shop-radio input{ margin-top:3px; accent-color:var(--accent-solid); }
.shop-radio span{ display:flex; justify-content:space-between; gap:10px; flex:1; }
.shop-radio b{ white-space:nowrap; }
.shop-fehlbetrag{ color:var(--accent); margin-bottom:8px; }

.shop-summen{ margin:12px 0 0; display:grid; gap:8px; }
.shop-summen div{ display:flex; justify-content:space-between; gap:12px; }
.shop-summen dt{ color:var(--ink-soft); }
.shop-summen dd{ margin:0; font-weight:600; white-space:nowrap; }
.shop-summen .gesamt{ border-top:1px solid var(--line); padding-top:12px; margin-top:4px; font-size:1.125rem; }
.shop-summen .gesamt dt{ color:var(--ink); font-weight:700; }
.shop-summen .gesamt dd{ font-weight:800; }

.shop-kasse-form .consent-row{ margin:16px 0 0; cursor:pointer; }
.shop-kasse-form .consent-row span{ font-size:0.875rem; line-height:1.5; color:var(--ink-soft); }
.shop-kasse-form .consent-row a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.shop-bezahlen{ width:100%; margin-top:18px; }
.shop-kasse-form > .small{ margin-top:12px; color:var(--ink-soft); line-height:1.5; }
.shop-kasse .form-alert a{ text-decoration:underline; }

.shop-danke-liste{ position:static; margin:28px 0 18px; max-width:720px; }
.shop-danke .small{ color:var(--ink-soft); }

/* ---- Bestand und Mengenanfrage ------------------------------------------ */
.shop-bestand{
  display:inline-block; font-size:0.8125rem; font-weight:600;
  padding:3px 10px; border-radius:100px; border:1px solid var(--line);
}
.shop-bestand.da{ color:var(--accent-2); border-color:rgba(var(--accent-2-rgb),.35); }
.shop-bestand.knapp{ color:#b45309; border-color:rgba(180,83,9,.4); background:rgba(180,83,9,.08); }
.shop-bestand.aus{ color:var(--ink-soft); background:var(--bg-soft-2); }
:root[data-theme="dark"] .shop-bestand.knapp{ color:#f59e0b; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .shop-bestand.knapp{ color:#f59e0b; } }
.shop-bestand-zeile{ margin-top:10px; }
.shop-artikel-text .shop-artikel-bestand{ margin-top:8px; }
.shop-zeilenfehler{ color:#b91c1c; font-weight:600; font-size:0.875rem; margin-top:6px; }
:root[data-theme="dark"] .shop-zeilenfehler{ color:#f87171; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .shop-zeilenfehler{ color:#f87171; } }
.shop-mengenanfrage{
  margin-top:18px; padding:14px 16px; border-radius:var(--radius-sm);
  border:1px dashed var(--line); font-size:0.9375rem; color:var(--ink-soft);
}
.shop-mengenanfrage p{ line-height:1.5; margin-bottom:6px; }
.shop-mengenanfrage b{ color:var(--ink); }
.shop-mengenanfrage.deutlich{ border-style:solid; border-color:rgba(var(--accent-rgb),.5); background:rgba(var(--accent-rgb),.06); }

/* ---- Fotos und Galerie -------------------------------------------------- */
.shop-artikel-bild.foto{ background:var(--bg-soft-2); }
.shop-artikel-bild.foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.shop-galerie{ position:relative; }
.shop-produkt-bild.foto{ background:var(--bg-soft-2); padding:0; }
.shop-produkt-bild.foto img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:860px){ .shop-produkt-bild.foto{ aspect-ratio:1 / 1; } }
.shop-galerie-leiste{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(64px, 1fr)); gap:8px; margin-top:12px;
}
.shop-galerie-leiste a{
  display:block; aspect-ratio:1 / 1; border-radius:10px; overflow:hidden;
  border:2px solid transparent; background:var(--bg-soft-2);
}
.shop-galerie-leiste a[aria-current="true"]{ border-color:var(--accent); }
body.theme-green .shop-galerie-leiste a[aria-current="true"]{ border-color:var(--accent-2); }
.shop-galerie-leiste a:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.shop-galerie-leiste img{ width:100%; height:100%; object-fit:cover; display:block; }
.shop-feldhinweis{ display:block; color:var(--ink-soft); margin:-4px 0 8px; }
.shop-artikel-preis span{ margin-left:0; margin-right:2px; }

/* ---- Galerie: Pfeile, Zähler, KI-Hinweis --------------------------------- */
.shop-galerie-pfeil{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.45); color:#fff; font-size:28px; line-height:1; cursor:pointer;
  display:grid; place-items:center; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.shop-galerie-pfeil[hidden]{ display:none; }
.shop-galerie-pfeil:hover{ background:rgba(0,0,0,.65); }
.shop-galerie-pfeil:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.shop-galerie-pfeil.zurueck{ left:12px; }
.shop-galerie-pfeil.weiter{ right:12px; }
.shop-galerie-zaehler{
  position:absolute; right:12px; bottom:12px; padding:3px 10px; border-radius:100px;
  background:rgba(0,0,0,.55); color:#fff; font-size:0.8125rem; font-weight:600;
}
.shop-ki-hinweis{
  position:absolute; left:12px; bottom:12px; padding:3px 10px; border-radius:100px;
  background:rgba(0,0,0,.55); color:#fff; font-size:0.75rem;
}

/* ---- Unterkategorien ------------------------------------------------------ */
.shop-unterkat{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 28px; }
.shop-unterkat .tag{
  display:inline-block; padding:8px 16px; border-radius:100px; font-size:0.9375rem; font-weight:600;
  border:1px solid var(--line); background:rgba(var(--card-rgb),.6); color:var(--ink);
  transition:border-color .2s, background .2s;
}
#glas .shop-unterkat .tag:hover{ border-color:var(--accent-2); color:var(--accent-2); }
[id="3d"] .shop-unterkat .tag:hover{ border-color:var(--accent); color:var(--accent); }
.shop-unterkat-titel{
  font-size:1.375rem; font-weight:700; letter-spacing:-0.01em; margin:36px 0 16px;
  scroll-margin-top:120px;
}
.shop-unterkat-titel:first-of-type{ margin-top:8px; }
.shop-artikel-bild{ position:relative; }
.shop-artikel-bild .shop-ki-hinweis{ left:8px; bottom:8px; font-size:0.6875rem; padding:2px 8px; }

/* ---- Kasse: Adresse und Zahlungsart ------------------------------------ */
/* Mit Formular ist die Spalte zu hoch zum Mitlaufen */
.shop-kasse:has(.shop-kasse-form){ position:static; }
.shop-kasse-form{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.shop-kasse-form .form-field{ margin-bottom:12px; }
.shop-kasse-form .form-field input,
.shop-kasse-form .form-field select{ padding:11px 13px; font-size:1rem; }
.shop-kasse-form .form-field select{
  width:100%; border:1px solid var(--line); border-radius:12px; font-family:var(--font);
  background:var(--bg-soft-2); color:var(--ink);
}
.shop-plz-ort{ display:grid; grid-template-columns:7.5em 1fr; gap:10px; }
.shop-adresse .small{ color:var(--ink-soft); margin-bottom:6px; }
.shop-radio span:has(small){ flex-direction:column; justify-content:flex-start; gap:3px; }
.shop-radio small{ font-size:0.8125rem; line-height:1.45; color:var(--ink-soft); }
.shop-gesamt-knopf{ margin:18px 0 0; font-size:1.0625rem; }
.shop-ueberweisung{ position:static; max-width:560px; margin:18px 0 22px; }
.shop-ueberweisung .shop-summen dd{ white-space:normal; text-align:right; overflow-wrap:anywhere; }