/* Produkt-Detailseite – Bild dominiert, Typo wie die Editorial-Seiten. */

.product {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 1fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
  max-width: 78rem;
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 4.5rem) var(--pad-x) var(--section);
}
/* Höhe deckeln, damit Hochformate nicht überdimensioniert werden. */
.slideshow-viewport, .product-media > img, .product-no-image { max-height: 82vh; }
/* Einzelbild: natürliche Breite (kein grauer Streifen durch Letterboxing). */
.product-media > img { width: auto; max-width: 100%; object-fit: contain; background: none; }
.product-title {
  font-size: var(--fs-h1);
  line-height: 1.05;
}

/* --- Medien / Slideshow ------------------------------------------------- */
.product-no-image { width: 100%; background: var(--bg-soft); }
.product-no-image {
  display: grid; place-items: center; aspect-ratio: 4 / 5;
  color: var(--muted); font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase;
}

/* Horizontaler Slide-Track (kein Fade). */
.slideshow-viewport {
  position: relative; overflow: hidden; background: var(--bg-soft);
  touch-action: pan-y;          /* vertikales Scrollen erlaubt, horizontal = Drag */
  cursor: grab;
}
.slideshow-viewport.is-dragging { cursor: grabbing; }
.slideshow-track {
  display: flex; height: 100%;
  transition: transform 0.5s var(--ease);
  will-change: transform;
}
.slideshow-slide { flex: 0 0 100%; height: 100%; }
.slideshow-slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}
/* Extreme Hochformate (Hochkant-Panoramen): Haupt- und Szenenbild haben stark
   abweichende Formate. Statt hart zu beschneiden zeigen wir jedes Bild vollständig
   und zentriert auf der neutralen Viewport-Fläche (2:3-Rahmen aus dem Template). */
.slideshow.is-tall .slideshow-slide img { object-fit: contain; }
.slideshow.is-tall .slideshow-thumb img { object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
  .slideshow-track { transition: none; }
}

/* Thumbnail-Leiste unter dem Bild – keine Überlagerung mehr. */
.slideshow-thumbs {
  display: flex; gap: 0.6rem; margin-top: 0.85rem;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.slideshow-thumbs::-webkit-scrollbar { display: none; }
.slideshow-thumb {
  flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer;
  width: 4.5rem; opacity: 0.4; transition: opacity 0.25s;
}
.slideshow-thumb img { width: 100%; height: 4.5rem; object-fit: cover; display: block; background: var(--bg-soft); }
.slideshow-thumb:hover { opacity: 0.75; }
.slideshow-thumb.is-active { opacity: 1; }
.slideshow-thumb.is-active img { outline: 2px solid var(--ink); outline-offset: -2px; }

/* --- Panel – auf die globalen Tokens standardisiert --------------------- */
.product-panel {
  position: sticky; top: 6rem;
  display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem);
  font-size: var(--fs-base);
}
.product-text { font-size: var(--fs-base); line-height: 1.5; font-weight: var(--fw-medium); }
.product-text p { margin-bottom: 0.6em; }

/* Motiv-Beschreibung (Feld „Beschreibung", Kirbytext) – direkt unter dem Titel */
.product-description {
  font-size: var(--fs-base); line-height: 1.6; font-weight: var(--fw-medium);
  margin-top: -0.4rem;
}
/* Eingeklappt: nur ~6 Zeilen zeigen, Rest nach Weiß ausfaden (Volltext bleibt im DOM → SEO ok).
   Höhe wird animiert (Transition), der Fade weich über mehrere Stops + per Opacity ein-/ausgeblendet. */
.product-description__clip {
  position: relative; overflow: hidden;
  font-size: var(--fs-base);
  transition: max-height 0.5s cubic-bezier(0.33, 0, 0.2, 1);
}
[data-clamp]:not(.is-expanded) .product-description__clip {
  max-height: calc(1.6em * 6);
}
.product-description__clip::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5.5em;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--bg) 0%, transparent) 0%,
    color-mix(in srgb, var(--bg) 15%, transparent) 32%,
    color-mix(in srgb, var(--bg) 45%, transparent) 55%,
    color-mix(in srgb, var(--bg) 78%, transparent) 76%,
    var(--bg) 100%);
  pointer-events: none; opacity: 0; transition: opacity 0.4s ease;
}
/* Fade nur, wenn der Text wirklich abgeschnitten ist (JS setzt .is-clamped). */
[data-clamp].is-clamped:not(.is-expanded) .product-description__clip::after { opacity: 1; }
/* Eingeklappt ist der ganze Text klickbar → aufklappen. */
[data-clamp].is-clamped:not(.is-expanded) .product-description__clip { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .product-description__clip,
  .product-description__clip::after { transition: none; }
}
/* Initialzustand (und Resize/Font-Load) ohne Animation setzen → Fade ist beim Laden sofort voll da. */
.product-description.no-anim .product-description__clip,
.product-description.no-anim .product-description__clip::after { transition: none !important; }
.description-toggle {
  display: block; width: 100%; text-align: left;
  margin-top: 1.1rem; padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--ink);
  transition: opacity 0.2s;
}
.description-toggle[hidden] { display: none; }
.description-toggle__label { text-decoration: underline; text-underline-offset: 3px; }
.description-toggle:hover { opacity: 0.65; }

/* Kaufbereich: kein Kasten, kein Hintergrund – nur eine schlichte Trennlinie oben. */
.buy-box {
  display: flex; flex-direction: column; gap: clamp(1.25rem, 2.8vw, 1.75rem);
  margin-top: clamp(1rem, 2.5vw, 1.8rem);   /* extra Luft Beschreibung → Größe */
}

/* Größe + Material: gestapelt (Mobile), nebeneinander ab Desktop.
   Untere Haarlinie wie beim Spec, damit beide Varianten gleich strukturiert sind. */
.variant-fields {
  display: grid; gap: clamp(1.2rem, 2.5vw, 1.8rem);
}
@media (min-width: 720px) {
  .variant-fields { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Fixe Variante als Spezifikation (Info, kein Formular): Label links, Wert rechts.
   Haarlinie unten trennt die Spec vom Preis. */
.product-spec { display: flex; flex-direction: column; gap: 0.7rem; margin: 0; }
.product-spec__row {
  display: grid; grid-template-columns: 7rem 1fr; gap: 0.4rem 1.25rem; align-items: baseline;
}
.product-spec dt { margin: 0; color: var(--ink); font-weight: var(--fw-bold); font-size: var(--fs-base); }
.product-spec dd { margin: 0; color: var(--ink); font-weight: var(--fw-medium); font-size: var(--fs-base); }
.product-spec dd .product-spec__link {
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: opacity 0.2s;
}
.product-spec dd .product-spec__link:hover { opacity: 0.65; }
.product-description p { margin-bottom: 0.7em; }
.product-description p:last-child { margin-bottom: 0; }
.product-description strong { font-weight: var(--fw-bold); }
/* Ort-Headline (aus locationName generiert, nicht aus dem Text) */
.product-description__location { margin: 0 0 0.7em; font-weight: var(--fw-bold); }

/* Größe-Label, Dropdown-Text und Material-Text einheitlich. */
.product-panel .field { display: flex; flex-direction: column; gap: 0.5rem; }
.product-panel label,
.product-panel .field-label,
.product-panel select,
.product-material,
.product-size {
  font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--ink);
  text-transform: none; letter-spacing: 0; margin: 0;
}
/* Größe-/Ausführung-Labels fett (Dropdown-Fall). */
.product-panel label,
.product-panel .field-label { font-weight: var(--fw-bold); }
/* „Mehr erfahren"-Link unter Material → Druckoptionen-Seite */
.material-more {
  align-self: start; width: max-content;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink);
  opacity: 0.65; text-decoration: underline; text-underline-offset: 3px;
  transition: opacity 0.2s;
}
.material-more:hover { opacity: 1; }
/* Ausführung: Label → Wert eng (Zeilenumbruch). */
.product-panel .field-static { gap: 0.25rem; }
.product-panel .field-static .material-more { margin-top: 0.35rem; }

/* Verlinkter Ausführungs-Wert: unterstrichen → Druckoptionen (ersetzt Extra-Link). */
.product-material.material-link {
  width: max-content; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: opacity 0.2s;
}
.product-material.material-link:hover { opacity: 0.65; }

/* Dropdown identisch zum Checkout (Pfeil-Platz rechts, gleiche Polsterung). */
.product-panel select { padding: 0.95rem 2.4rem 0.95rem 1rem; }
/* Einzelne, nicht wählbare Variante: Label schwarz wie bei den Dropdowns. */
.product-panel .field-static .field-label { color: var(--ink); }
.product-panel .field-static .product-size { font-weight: var(--fw-bold); }
.product-panel .field-static .product-material { font-weight: var(--fw-medium); }

.price-block { display: flex; flex-direction: column; gap: 0.4rem; margin-top: clamp(1.3rem, 2.8vw, 2.1rem); }
.price-block .price { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
.price-block .price-notice { margin: 0; }

.product-panel .button { font-size: var(--fs-base); padding: 1.15rem 1.5rem; }
.product-stock { font-size: var(--fs-sm); color: var(--muted); }
/* Leere Lager-Info nicht rendern (sonst erzeugt der stack-Abstand Luft unter dem Button). */
.product-stock:empty { display: none; }
.product [data-slot="error"] { font-size: var(--fs-sm); }
.product [data-slot="error"][hidden] { display: none; }

@media (max-width: 56rem) {
  .product { grid-template-columns: 1fr; gap: 2rem; }
  .product-panel { position: static; }
  /* Gestapelt: Bühne umschließt das Bild, Schalter zentriert im Fluss darunter. */
  .led-stage { min-height: 0; padding: 0; gap: 0.4rem; }
  /* Bild etwas kleiner, damit Motiv + Headline zusammen in den Viewport passen. */
  .led-image { max-height: 60vh; }
  .product--led { gap: 0; }
  /* position:relative NUR für den Masken-Overlay – WICHTIG: top:0, sonst greift
     das geerbte top:6rem (Desktop-Sticky) und schiebt das Panel 96px nach unten. */
  .product--led .product-panel { position: relative; top: 0; margin-top: -2.3rem; }
}
/* Preis auf Mobile deutlich größer/präsenter. */
@media (max-width: 48rem) {
  .price-block .price { font-size: 2.1rem; line-height: 1.1; }
}

/* ======================================================================== */
/* LED-Leuchtbild – dunkle „Lightbox"-Sonderseite.                          */
/* Das Bild leuchtet auf schwarzer Bühne (Farb-Bloom), fährt beim Laden     */
/* hoch („einschalten") und lässt sich per Schalter dimmen. Die ganze Seite */
/* kippt über CSS-Variablen ins Dunkle.                                     */
/* ======================================================================== */
body.is-led {
  --ink: #f3f1ec;
  --muted: #8d8b90;
  --line: #26282c;
  --bg: #0a0b0c;
  --bg-soft: #131417;
  background: #0a0b0c;
}
body.is-led .header,
body.is-led .site-footer,
body.is-led footer { background: transparent; }

/* Desktop: LED-Motiv größer zeigen – breitere Media-Spalte + etwas mehr
   Gesamtbreite (das Bild war teils breiten-, nicht höhenbegrenzt). */
@media (min-width: 57rem) {
  .product--led { max-width: 86rem; grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 1fr); }
}

/* Illuminierung: Solange das Panel AUS ist, liegt ein dezenter Vignette-Overlay
   über der Seite und dunkelt die Umgebung ab (Text, Logo, Ränder). Geht das Licht
   AN, blendet er weg → die Umgebung hellt auf, als würde das Panel den Raum
   erhellen. (Physikalisch richtig herum.) */
body.is-led::after {
  content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none;
  background: radial-gradient(58% 62% at 33% 47%,
              rgba(0,0,0,0) 0%,
              rgba(0,0,0,0.12) 48%,
              rgba(0,0,0,0.30) 78%,
              rgba(0,0,0,0.44) 100%);
  opacity: 1; transition: opacity 1.4s var(--ease);
}
body.is-led.led-lit::after { opacity: 0; }
@media (max-width: 56rem) {
  /* Gestapelt/scrollend wirkt der fixe Overlay strange → auf Mobile aus. */
  body.is-led::after { display: none; }
}

/* Ist das Licht aus, dimmt der umgebende Text weg: leichte Grundtransparenz +
   Verlaufs-Maske (nach unten, vom Panel weg, stärker). Blendet mit dem Licht ein,
   sodass der Text quasi „mit angeht". */
body.is-led .product-panel { transition: opacity 1.4s var(--ease); }
body.is-led .product-panel::after {
  content: ""; position: absolute; inset: -0.6rem; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom,
      rgba(10,11,12,0) 0%,
      rgba(10,11,12,0.30) 48%,
      rgba(10,11,12,0.68) 100%);
  opacity: 0; transition: opacity 1.4s var(--ease);
}
body.is-led:not(.led-lit) .product-panel { opacity: 0.72; }
body.is-led:not(.led-lit) .product-panel::after { opacity: 1; }

/* Die ganze LED-Seite darf horizontal nicht scrollen, damit der Glow frei
   nach außen strahlen kann. Clip NUR am Body (echte Fensterkante) – nicht am
   main, sonst würde der Schein innerhalb der Seitenpolsterung hart abschneiden. */
body.is-led { overflow-x: clip; }

/* Bühne – transparent (keine eigene Fläche → keine sichtbare Boxkante), Bild und
   Schalter zentriert übereinander, KEIN overflow:hidden. */
.led-stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: clamp(1.3rem, 3vw, 2.2rem);
  min-height: min(80vh, 880px);
  padding: clamp(0.5rem, 1.5vw, 1.5rem) clamp(2.5rem, 7vw, 6rem) clamp(3rem, 6vw, 6rem);
  background: transparent;
}
/* Breites, weiches Ambient hinter dem Panel – dezenter Lichtteppich. Bleibt in
   der Bühne (inset:0), damit es auf Mobile keinen horizontalen Scroll auslöst;
   die weite Ausstrahlung kommt vom box-shadow des Bildes (löst keinen Scroll aus). */
.led-glow {
  position: absolute; z-index: 0; pointer-events: none;
  inset: 0;
  background: radial-gradient(60% 45% at 50% 44%,
              rgba(255,255,255,0.15) 0%,
              rgba(255,255,255,0.09) 20%,
              rgba(255,255,255,0.045) 40%,
              rgba(255,255,255,0.018) 62%,
              rgba(255,255,255,0.006) 80%,
              transparent 92%);
  opacity: 0.95;
  transition: opacity 1.3s var(--ease);
}
/* Schwarzer Leuchtkasten-Rahmen. Er bleibt klar sichtbar: der weiße Haupt-Halo
   beginnt erst an seiner AUßENkante (weicher Blur, keine harte Nahkante), dazu
   ein dunkler Schatten fürs Grounding an der Wand. */
/* Rahmen: schwarz und klar sichtbar. Der weiße Halo geht vom Rahmen-Außenrand
   nach außen (diffuser Anfang → Ecken bleiben eckig, kein dunkler Schatten). Der
   schwarze Rahmen bleibt so eine scharfe Silhouette zwischen leuchtendem Bild
   und dem Schein außen herum. */
.led-frame {
  position: relative; z-index: 1; line-height: 0;
  border: clamp(4px, 0.6vw, 9px) solid #050505;
  box-shadow:
    0 0 40px 5px rgba(255,255,255,0.20),
    0 0 95px 16px rgba(255,255,255,0.12),
    0 0 190px 42px rgba(255,255,255,0.065),
    0 0 330px 85px rgba(255,255,255,0.03),
    0 0 480px 120px rgba(255,255,255,0.014);
  transition: box-shadow 1.3s var(--ease);
}
/* Das Bild leuchtet selbst (heller/gesättigter), wirft aber keinen eigenen Halo
   über den Rahmen → der Rahmen bleibt klar sichtbar. */
.led-image {
  display: block; width: auto; max-width: 100%; max-height: 86vh;
  filter: brightness(1.05) saturate(1.08);
  transition: filter 1.3s var(--ease);
}
/* Ausgeschaltet / vor dem „Einschalten": Bild dunkel, Rahmen ohne Schein. */
.led-stage.is-off .led-glow,
.led-stage.light-off .led-glow { opacity: 0; }
.led-stage.is-off .led-frame,
.led-stage.light-off .led-frame { box-shadow: none; }
.led-stage.is-off .led-image,
.led-stage.light-off .led-image { filter: brightness(0.2) saturate(0.5); }

/* Licht-Schalter als Toggle – zentriert unter dem Motiv. */
.led-switch {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center;
  padding: 0.4rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer; transition: background 0.25s;
}
.led-switch:hover { background: rgba(255,255,255,0.12); }
.led-switch__track {
  position: relative; width: 2.4rem; height: 1.3rem; border-radius: 999px;
  background: rgba(255,255,255,0.16); transition: background 0.3s;
}
.led-switch__knob {
  position: absolute; top: 0.15rem; left: 0.15rem;
  width: 1rem; height: 1rem; border-radius: 50%;
  background: #cfd0d2; transition: transform 0.3s var(--ease), background 0.3s, box-shadow 0.3s;
}
/* An */
.led-switch[aria-checked="true"] .led-switch__track { background: rgba(255,255,255,0.55); }
.led-switch[aria-checked="true"] .led-switch__knob {
  transform: translateX(1.1rem); background: #ffffff;
  box-shadow: 0 0 10px rgba(255,255,255,0.85);
}
/* kurzer Aufleucht-Moment, wenn das Glühwürmchen den Schalter erreicht */
.led-switch.just-lit .led-switch__knob { box-shadow: 0 0 22px 7px rgba(255,255,255,0.95); }
.led-switch.just-lit .led-switch__track { background: rgba(255,255,255,0.8); }

/* Glühwürmchen: ein weicher, diffuser weißer Lichtpunkt (kein harter Kern). */
.led-firefly {
  position: absolute; top: 0; left: 0; z-index: 6; pointer-events: none;
  width: 96px; height: 96px; border-radius: 50%;
  will-change: transform, opacity;
  /* Heller weißer Kern, dann weicher Abfall. */
  background: radial-gradient(circle closest-side,
    #ffffff 0%,
    #ffffff 24%,
    rgba(255,255,255,0.5) 44%,
    rgba(255,255,255,0.22) 62%,
    rgba(255,255,255,0.07) 82%,
    transparent 100%);
  /* Blur kleiner als der Kernradius → Center bleibt hell, Ränder weich. */
  filter: blur(8px);
}
@media (prefers-reduced-motion: reduce) { .led-firefly { display: none; } }

/* Backlight-Reveal: hellere Kopie des Bildes über dem Motiv, per Maske nur an
   einem weichen Fleck sichtbar (Position setzt JS). So leuchtet das Motiv dort
   auf, wo das Würmchen dahinter vorbeizieht – kein Blend-Mode, kein weißer Blob. */
.led-backlight {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
  filter: brightness(1.7) saturate(1.25);
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) { .led-backlight { display: none; } }

/* Spezifikations-Hinweis */
.product-spec--led .product-spec__link { color: var(--muted); }

/* Medien-Erklärung direkt unter der Ausführung – wie der normale Beschreibungstext. */
.led-details__body {
  margin-top: 0.9rem;
  color: var(--ink); font-size: var(--fs-base); line-height: 1.6; font-weight: var(--fw-medium);
}
.led-details__body p { margin: 0 0 0.7em; }
.led-details__body p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .led-glow, .led-image { transition: none; }
}