/* Geteiltes Stylesheet fuer alle Produktseiten (artikel/*.html) - ein File
   statt 236x eingebettetem <style>, damit der Browser es nach der ersten
   Produktseite fuer alle weiteren aus dem Cache liefert. Farben/Tokens
   bewusst identisch zur Hauptseite (index.html), damit Produktseiten nicht
   wie eine andere Website wirken. */

:root {
  --ink: #000000;
  --paper: #f2efe7;
  --rule: rgba(242, 239, 231, 0.14);
  --rule-strong: rgba(242, 239, 231, 0.28);
  --text-muted: rgba(242, 239, 231, 0.58);
  --text-faint: rgba(242, 239, 231, 0.36);
  --surface: #121212;
  --accent: #8f897c;
  --accent-text: #d6d0c2;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; overflow-x: hidden; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; }

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
}

.page-head__brand {
  font-family: "Helvetica Neue Condensed", "Arial Narrow", Helvetica, Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.page-head__back {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
  border: 1px solid var(--rule-strong);
  padding: 8px 14px;
}
.page-head__back:hover { color: var(--paper); border-color: var(--paper); }

.page-head__cart {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--paper);
  padding: 8px 14px;
}
.page-head__cart:hover { background: var(--accent-text); border-color: var(--accent-text); }
.page-head__cart-count { font-weight: 700; }

.page-head__right { display: flex; align-items: center; gap: 12px; }

.lang-switch { display: flex; gap: 2px; border: 1px solid var(--rule-strong); }

.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  background: transparent;
  border: none;
  color: rgba(242, 239, 231, 0.6);
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 6px 8px;
  text-decoration: none;
  cursor: pointer;
}
.lang-switch__btn:hover { color: var(--paper); }
.lang-switch__btn[aria-current="true"] { background: var(--accent); color: var(--ink); }

@media (max-width: 480px) {
  .page-head { flex-wrap: wrap; gap: 10px; }
  /* .page-head__back liegt (anders als es die urspruengliche Regel hier
     annahm) NICHT direkt in .page-head, sondern verschachtelt in
     .page-head__right zusammen mit Sprachumschalter und Warenkorb-Button -
     "order:3; width:100%" allein griff deshalb nie, weil der umgebende
     Flex-Container selbst nicht umbrach: bei 320-360px ragten alle drei
     Elemente in einer Zeile ueber den Viewport hinaus. .page-head__right
     muss daher selbst umbrechen koennen, erst dann wirkt width:100% auf
     .page-head__back wie beabsichtigt (eigene, zentrierte Zeile). */
  .page-head__right { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .page-head__back { order: 3; width: 100%; text-align: center; }
}

.product {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(24px, 4vw, 56px);
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 40px) clamp(20px, 5vw, 48px) 60px;
}

@media (max-width: 860px) {
  .product { grid-template-columns: 1fr; gap: 20px; padding: 16px 16px 48px; }
}

/* ---------- Galerie ---------- */

/* min-width:0 ist noetig, weil Grid-Items ohne diese Angabe standardmaessig
   nicht kleiner als der Inhalt ihres min-content werden - bei einem <img>
   ist das dessen intrinsische (Original-)Breite. Ohne das hier wird die
   Spalte auf mobilen Bildschirmen breiter als der Viewport und das Bild
   erscheint stark hineingezoomt/abgeschnitten, weil overflow-x:hidden den
   Ueberschuss nur unsichtbar macht statt die Spalte zu verkleinern. */
.gallery, .info { min-width: 0; }

.gallery { position: sticky; top: 16px; align-self: start; }
@media (max-width: 860px) { .gallery { position: static; } }

.gallery__stage {
  position: relative;
  background: var(--surface);
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.gallery__stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
  background: var(--surface);
}

.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--rule-strong);
  color: var(--paper);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery__nav:hover { background: rgba(0, 0, 0, 0.8); border-color: var(--accent); }
.gallery__nav--prev { left: 10px; }
.gallery__nav--next { right: 10px; }
.gallery__nav[hidden] { display: none; }

.gallery__counter {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  background: rgba(0, 0, 0, 0.55);
  padding: 4px 8px;
  pointer-events: none;
}

.gallery__badge {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--ink);
  border: 1px solid var(--rule-strong);
  padding: 5px 10px;
  pointer-events: none;
}

.gallery__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.gallery__thumbs--reserved { min-height: 84px; }

.gallery-thumb {
  flex: 0 0 auto;
  width: 60px;
  height: 80px;
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 0;
  cursor: pointer;
  opacity: 0.55;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gallery-thumb.active { opacity: 1; border-color: var(--accent); }
.gallery-thumb:hover { opacity: 1; }

/* ---------- Info-Panel ---------- */

.info__brand {
  display: inline-block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-decoration: none;
  margin: 0 0 6px;
}
.info__brand:hover { color: var(--accent-text); }

.info h1 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.25;
  margin: 0 0 14px;
  font-weight: 700;
}

.info__price {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 4px;
}

.info__badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--rule-strong);
  padding: 6px 12px;
  margin: 0 0 18px;
}
.info__badge--sold { color: var(--text-muted); }
.info__badge--estimate { color: var(--accent-text); border-color: var(--accent); }

.info__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 16px 0;
  margin: 18px 0;
}

.fact__label {
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 2px;
}
.fact__value { font-size: 0.9rem; }

.info__desc {
  white-space: pre-line;
  line-height: 1.65;
  font-size: 0.92rem;
  color: rgba(242, 239, 231, 0.85);
  margin: 0 0 22px;
}

/* Allgemeiner Gebraucht-Hinweis unter der Beschreibung (statt Zustand je Teil). */
.info__gebraucht {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: -10px 0 22px;
}

.info__cta { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }

.btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--paper);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn.active { background: var(--ink); color: var(--paper); border-color: var(--rule-strong); }

.btn--outline { background: transparent; color: var(--paper); }
/* "Jetzt kaufen" fuehrt in die Kasse und ist der Hauptweg - der Warenkorb-
   Knopf tritt daneben zurueck. */
.btn--buy { display: block; text-align: center; text-decoration: none; }
.info__cta:has(.btn--buy) #addToCartBtn { background: transparent; color: var(--paper); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent-text); background: transparent; }

.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.info__note {
  font-size: 0.72rem;
  color: var(--text-faint);
  line-height: 1.5;
  margin: 14px 0 0;
}

.info__config-warning {
  font-size: 0.72rem;
  color: var(--accent-text);
  border: 1px solid var(--accent);
  padding: 10px 12px;
  line-height: 1.5;
}

/* ---------- Kaufuebersicht direkt ueber dem PayPal-Knopf (§ 312j BGB) ---------- */
.checkout-summary {
  border: 1px solid var(--rule-strong);
  padding: 14px 16px;
  font-size: 0.8rem;
  line-height: 1.5;
}
.checkout-summary__title {
  margin: 0 0 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.checkout-summary dl { margin: 0; display: grid; gap: 6px; }
.checkout-summary dl > div { display: flex; justify-content: space-between; gap: 16px; }
.checkout-summary dt { margin: 0; color: rgba(242, 239, 231, 0.85); overflow-wrap: anywhere; }
.checkout-summary dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.checkout-summary__total {
  padding-top: 8px;
  margin-top: 2px;
  border-top: 1px solid var(--rule);
  font-weight: 700;
}
.checkout-summary__legal {
  margin: 12px 0 0;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.checkout-summary__legal a { color: var(--accent-text); }

/* ---------- Versandart (Standard/Express) ueber der Summe ---------- */
.checkout-versand {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  min-width: 0;
}
.checkout-versand legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.checkout-versand__optionen { display: grid; gap: 6px; }
.checkout-versand__opt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  cursor: pointer;
}
.checkout-versand__opt:has(input:checked) { border-color: var(--accent-text); }
.checkout-versand__opt:has(input:disabled) { cursor: default; }
.checkout-versand__opt input { margin: 0; accent-color: var(--accent-text); }
.checkout-versand__name small { color: var(--text-muted); font-size: 0.7rem; }
.checkout-versand__preis { font-variant-numeric: tabular-nums; white-space: nowrap; }
.checkout-versand__sperre { margin: 6px 0 0; font-size: 0.7rem; color: var(--text-muted); }
.info__versand {
  margin: 4px 0 0;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.checkout-status {
  margin: 0;
  padding: 10px 12px;
  font-size: 0.78rem;
  line-height: 1.5;
  border: 1px solid var(--rule-strong);
  color: var(--paper);
}
.checkout-status--fehler { border-color: var(--accent-text); color: var(--accent-text); }

.checkout-thanks {
  border: 1px solid var(--paper);
  padding: 18px 16px;
  display: grid;
  gap: 10px;
  font-size: 0.85rem;
  line-height: 1.55;
}
.checkout-thanks:focus { outline: none; }
.checkout-thanks p { margin: 0; }
.checkout-thanks__title { font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; }

/* ---------- Aehnliche Artikel ---------- */

.related {
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px clamp(20px, 5vw, 48px) 60px;
  border-top: 1px solid var(--rule);
}

.related__title {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 24px 0 16px;
}

.related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px;
}

.related-card {
  text-decoration: none;
  color: inherit;
  display: block;
}

.related-card__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--surface);
  margin-bottom: 8px;
}
.related-card__frame img { width: 100%; height: 100%; object-fit: contain; display: block; }

.related-card__sold {
  position: absolute;
  left: 6px;
  top: 6px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--ink);
  border: 1px solid var(--rule-strong);
  padding: 3px 7px;
}

.related-card__brand {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.related-card__title {
  display: block;
  font-size: 0.78rem;
  line-height: 1.3;
  margin: 2px 0 4px;
}
.related-card__price { font-size: 0.8rem; font-weight: 700; }

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 500;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.lightbox__close {
  position: absolute;
  z-index: 4;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--paper);
  font-size: 1.1rem;
  cursor: pointer;
}
.lightbox__close:hover { border-color: var(--accent); color: var(--accent); }

.page-foot {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px clamp(20px, 5vw, 48px) 60px;
  border-top: 1px solid var(--rule);
  font-size: 0.72rem;
  color: var(--text-faint);
  line-height: 1.6;
}
.page-foot a { color: var(--text-muted); text-decoration: underline; }
.page-foot a:hover { color: var(--accent-text); }

/* QUALITY95_ARTICLE_A11Y — product pages only. */
.gallery__stage>img:focus-visible,.lightbox__close:focus-visible,.article-order-message textarea:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.lightbox__close{min-width:44px;min-height:44px}
.article-order-message{display:block;margin:4px 0 2px;font-size:.68rem;line-height:1.35;color:var(--text-muted)}
.article-order-message>span{display:block;margin-bottom:6px;letter-spacing:.04em;text-transform:uppercase}
.article-order-message textarea{display:block;width:100%;min-height:72px;max-height:150px;resize:vertical;border:1px solid var(--rule-strong);border-radius:0;background:transparent;color:var(--paper);font:inherit;font-size:.78rem;line-height:1.45;padding:10px}

/* PERF_A11Y_95_ARTICLE_STYLE — measured product-page contrast fixes. */
.fact__label,
.info__note {
  color: rgba(242, 239, 231, 0.68);
}

/* FOCUS3_MEASURED_LCP_FOLLOWUP — measured product-footer contrast. */
p[data-i18n="footerNote"] { color: rgba(242, 239, 231, 0.82) !important; }

/* IMAGE_COPY_GUARD_V1 — product photos only; controls and icons stay untouched. */
img[src^="assets/img/"],
img[src^="/assets/img/"],
img[src*="/assets/img/"],
img[data-d119-image-protected] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* PAYPAL_VORSCHAU: PayPal ist sichtbar, bis der echte Checkout aktiv ist. */
.paypal-soon{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:46px;padding:10px 16px;border:1px solid var(--rule-strong,rgba(242,239,231,.28));background:#0b0b0b;color:var(--paper,#f2efe7);cursor:default;user-select:none;box-sizing:border-box}
.paypal-soon__mark{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-style:italic;font-weight:800;font-size:1.15rem;letter-spacing:-.01em;line-height:1;text-transform:none}
.paypal-soon__mark i{font-style:inherit}
.paypal-soon__mark i:first-child{color:#f2efe7}
.paypal-soon__mark i:last-child{color:#79c3ff}
.paypal-soon__tag{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1;padding:4px 7px;color:var(--text-muted,rgba(242,239,231,.58));border:1px solid var(--rule-strong,rgba(242,239,231,.28))}
.cart-foot .paypal-soon,.cart-order-message+.paypal-soon{margin-bottom:10px}

/* Widerrufsfunktion (§ 356a BGB) und Rechtliches auf jeder Produktseite. */
.page-foot__recht {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 18px;
}
.page-foot a.fuss-widerruf {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--paper);
  color: var(--paper);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.page-foot a.fuss-widerruf:hover { background: var(--paper); color: var(--ink); }

/* Optional statistics: equivalent actions, always accessible settings. */
.d119-privacy-choice{position:fixed;left:16px;right:16px;bottom:64px;z-index:10020;max-width:560px;margin:auto;background:#141414;color:#f5f5f5;border:1px solid #777;padding:20px;box-shadow:0 8px 40px #0009;font:14px/1.5 system-ui,sans-serif;max-height:70vh;overflow:auto}
.d119-privacy-choice h2{font:600 18px/1.3 system-ui,sans-serif;margin:0 0 12px}.d119-privacy-choice p{margin:0 0 12px}.d119-privacy-choice a{color:#fff;text-decoration:underline}
.d119-privacy-actions{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}.d119-privacy-actions button{flex:1;background:#f1f1f1;color:#111;border:1px solid #f1f1f1;padding:12px;font:600 14px system-ui,sans-serif;cursor:pointer;min-width:170px;min-height:44px}
.d119-privacy-settings{display:block;margin:0 auto;padding:14px 16px 24px;background:transparent;color:var(--text-muted);border:0;font:12px/1.4 system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px}.d119-privacy-settings:hover{color:var(--text)}.d119-privacy-choice button:focus-visible,.d119-privacy-settings:focus-visible{outline:3px solid #a8d3ff;outline-offset:3px}

/* Versand unter dem Preis (assets/article.js): Preise je Paketdienst, ab
   welchem Warenwert der Versand kostenlos ist, voraussichtliches Datum. */
.info__versand span { display: block; }
.info__versand strong { color: var(--paper); font-weight: 700; }
.info__versand .info__lieferung { margin-top: 3px; color: var(--paper); }

/* "Sicher bezahlen" unter "Jetzt kaufen": Logos und ein kurzer Satz */
.d119-zahlart {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px;
  margin: 2px 0 0; font-size: 0.7rem; letter-spacing: 0.02em; color: var(--text-muted);
}
/* Zahlungslogos: Original von PayPal und Apple (assets/zahlung), gleich gross.
   Das Apple-Pay-Zeichen bringt seinen Rahmen mit; PayPal bekommt denselben. */
.d119-zahlarten { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.d119-zahlarten__apple { display: block; width: auto; height: 32px; }
.d119-zahlarten__paypal {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 50.0px; height: 32px; padding: 0 5px;
  background: #ffffff; border: 1px solid rgb(0, 0, 0); border-radius: 4.5px;
}
.d119-zahlarten__paypal img { display: block; width: 100%; height: auto; }


/* Kaufleiste am Handy (assets/article.js) */
.d119-kaufleiste { display: none; }
@media (max-width: 860px) {
  .d119-kaufleiste {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: flex; align-items: center; gap: 14px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--ink); color: var(--paper); border-top: 1px solid var(--rule-strong);
    transform: translateY(110%); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .d119-kaufleiste--an { transform: none; visibility: visible; transition: transform .25s ease; }
  .d119-kaufleiste__text { flex: 1; min-width: 0; display: grid; gap: 1px; }
  .d119-kaufleiste__preis { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
  .d119-kaufleiste__versand { font-size: 0.7rem; color: var(--text-muted); }
  .d119-kaufleiste__knopf {
    flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; padding: 0 22px;
    background: var(--paper); color: var(--ink); border: 1px solid var(--paper); text-decoration: none;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  }
  .d119-kaufleiste__knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* Der runde Hell/Dunkel-Knopf unten links rutscht ueber die Leiste. */
  body.d119-kaufleiste-an .d119-ansicht { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .d119-kaufleiste, .d119-kaufleiste--an { transition: none; } }
@media print { .d119-kaufleiste { display: none !important; } }