/* ==========================================================================
   LUA HELL — Produkt-, Shop- und Services-Bausteine
   Wird nur auf den Seiten geladen, die sie brauchen (Film Core, Presets,
   Academy, Access, Services, Shop-Produktseiten, Checkout) und VOR
   styles.css eingebunden. Dadurch gewinnen die Regeln des Designsystems in
   styles.css bei gleicher Spezifitaet immer. Alle anderen Seiten laden
   dieses Drittel des Stylesheets gar nicht erst.
   ========================================================================== */

/* ==========================================
   SERVICES PAGE
   ========================================== */

.services-page-hero {
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.services-page-hero__title {
  font-size: var(--fs-display);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--white);
  max-width: var(--measure-lg);
}

.services-page-hero__sub {
  margin-top: var(--space-5);
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  font-weight: 400;
  color: var(--muted);
  max-width: var(--measure-sm);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* ---- Service index ----
   Kein Karten-Raster mehr: drei Zeilen, getrennt durch Haarlinien. Grosse
   Nummer, grosser Titel, darunter ein Panel mit Text und Still. Immer nur
   eine Zeile ist offen — welche, entscheidet die Scrollposition (script.js).
   Flache Rechtecke, keine Rahmen, kein Radius, kein Schatten, kein Bild-Zoom
   — dieselbe Sprache wie die Projektkarten auf der Work-Seite. */

.service-index {
  border-top: var(--hair) solid var(--divider);
  padding-bottom: var(--gap-section);
}

.service-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-index__item {
  border-bottom: var(--hair) solid var(--divider);
}

.service-index__heading {
  margin: 0;
  font: inherit;
}

/* Die Zeilenhoehe steckt komplett in diesem Padding — keine min-height, keine
   vh-Werte. Zugeklappt landet eine Zeile damit bei rund 270px auf dem Desktop
   und rund 140px auf dem Handy, sodass alle drei zusammen auf einen Screen
   passen statt auf drei. */
.service-index__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(1.25rem, 3vw, 2.75rem);
  width: 100%;
  padding: clamp(3rem, 1.2rem + 6vw, 6.5rem) 0;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.service-index__head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Die Nummer ist das Hierarchie-Signal der Zeile. Tabellenziffern, damit 01,
   02 und 03 exakt gleich breit sitzen. */
.service-index__num {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  transition: color var(--dur-base) var(--ease);
}

/* Nummer, Titel und Plus sitzen ueber align-items:center auf einer Mitte.
   Der frueher noetige Baseline-Ausgleich am Zaehler ist damit hinfaellig. */

.service-index__title {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--white);
}

/* Plus/Minus aus zwei Linien: der senkrechte Strich verschwindet beim Oeffnen.
   Kein Icon-Font, kein SVG, nichts, was nachgeladen werden muesste. */
.service-index__icon {
  position: relative;
  width: 16px;
  height: 16px;
  align-self: center;
  flex: none;
}

.service-index__icon::before,
.service-index__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--muted);
  transition: transform var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
}

.service-index__icon::after {
  transform: rotate(90deg);
}

.service-index__panel-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: start;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.service-index__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  max-width: var(--measure-sm);
}

.service-index__media {
  background: var(--surface-2);
}

.service-index__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

/* --- Aufgeklappt/zugeklappt ---
   Erst wenn script.js .is-enhanced setzt, wird ueberhaupt zugeklappt. Ohne
   JavaScript steht jede Zeile vollstaendig offen. Die Hoehe laeuft ueber
   grid-template-rows 0fr → 1fr, damit nichts hart auf eine Pixelhoehe
   festgenagelt werden muss. */
.service-index__list.is-enhanced .service-index__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-base) var(--ease),
              opacity var(--dur-base) var(--ease);
}

.service-index__list.is-enhanced .service-index__panel > .service-index__panel-inner {
  overflow: hidden;
  min-height: 0;
}

.service-index__list.is-enhanced .service-index__item:not(.is-open) .service-index__panel {
  grid-template-rows: 0fr;
  opacity: 0;
}

/* Das Padding des Panels sitzt ausserhalb der 0fr-Zeile und blieb deshalb als
   toter Streifen unter jeder zugeklappten Zeile stehen. Zugeklappt faellt es
   jetzt mit weg, damit zwischen den Zeilen nur die Haarlinie bleibt. */
.service-index__list.is-enhanced .service-index__panel-inner {
  transition: padding-bottom var(--dur-base) var(--ease);
}

.service-index__list.is-enhanced .service-index__item:not(.is-open) .service-index__panel-inner {
  padding-bottom: 0;
}

.service-index__list.is-enhanced .service-index__item.is-open .service-index__num {
  color: var(--accent-text);
}

.service-index__list.is-enhanced .service-index__item.is-open .service-index__icon::after {
  transform: rotate(90deg) scaleX(0);
}

.service-index__list.is-enhanced .service-index__item.is-open .service-index__icon::before,
.service-index__list.is-enhanced .service-index__item.is-open .service-index__icon::after {
  background: var(--accent);
}

@media (max-width: 900px) {
  .service-index__panel-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-index__desc {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-index__num,
  .service-index__icon::before,
  .service-index__icon::after,
  .service-index__list.is-enhanced .service-index__panel,
  .service-index__list.is-enhanced .service-index__panel-inner {
    transition: none;
  }
}

/* ---- Services context / SEO section ---- */

.services-context {
  border-top: var(--hair) solid var(--divider);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: var(--gap-section);
}

/* ==========================================
   EDITORIAL-BLOCK (global)
   Ueberschrift schmal links, Inhalt rechts in Lesebreite, Bloecke unter-
   einander. Ersetzt das Nebeneinander von zwei dichten Textspalten: der
   Text bekommt eine ruhige Zeilenlaenge und die Seite eine Leserichtung
   statt zweier konkurrierender Spalten.
   ========================================== */

.editorial {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, var(--measure-lg));
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: start;
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-top: var(--hair) solid var(--divider);
}

.editorial:first-of-type {
  border-top: 0;
  padding-top: 0;
}

@media (max-width: 900px) {
  .editorial {
    grid-template-columns: 1fr;
    gap: clamp(0.75rem, 2vw, 1.25rem);
  }
}

.services-context__grid {
  display: flex;
  flex-direction: column;
}

.services-context__title {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}

.services-context__text {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text);
  margin-bottom: var(--space-3);
}

.services-context__text:last-child {
  margin-bottom: 0;
}

/* ---- Full-width production still ---- */

.services-still {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
}

.services-still__figure {
  overflow: hidden;
  border-radius: 0;
  background: var(--surface-2);
}

.services-still__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---- Process und FAQ: zwei eigenstaendige Sections ----
   Vorher lagen beide in einem gemeinsamen Grid (.process-faq) und lasen sich
   als ein Block. Jetzt tragen sie denselben Section-Rhythmus wie jede andere
   Section: Trennlinie oben, gap-section-top darueber, gap-section darunter.

   .faq-section ist die gemeinsame FAQ-Section fuer Services, PowerGrade und
   Presets. Vorher hatte jede Seite ihre eigene Variante des gleichen Blocks. */

.services-process,
.faq-section {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
}

/* Die Liste richtet sich nach der Editorial-Spalte, nicht nach der
   engeren Standard-Lesebreite der FAQ. */
.faq-section .faq__list {
  max-width: none;
}

/* Process column */

.process__steps {
  display: flex;
  flex-direction: column;
}

.process__step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-3);
  padding: var(--space-5) 0;
  border-bottom: var(--hair) solid var(--divider);
  align-items: start;
}

.process__step:first-child {
  border-top: var(--hair) solid var(--divider);
}

/* Die Schrittzahlen tragen das Orange. Vorher stand hier ein roher Hex
   (#343434), der in keinem Token vorkam und mit 1.45:1 praktisch unlesbar
   war — die Zahlen sahen aus wie deaktiviert. Jetzt --accent, 4.67:1. */
.process__step-num {
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--accent-text);
  letter-spacing: -0.04em;
  line-height: 1;
  padding-top: 0.1em;
}

.process__step-body {
  padding-top: 0.1em;
}

.process__step-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: var(--space-1);
  letter-spacing: -0.02em;
}

.process__step-desc {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text);
}

/* ---- Services CTA ---- */

.services-cta {
  border-top: var(--hair) solid var(--divider);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: var(--gap-section);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

.services-cta__title {
  font-size: var(--fs-h2);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--white);
  max-width: var(--measure-xs);
  line-height: 1.1;
}

.services-cta__link {
  margin-top: var(--space-2);
}


/* ---- Services page responsive ---- */

@media (max-width: 600px) {
  .services-still__figure img {
    aspect-ratio: 4 / 3;
  }
}

/* ==========================================
   PRESETS PRODUCT PAGE
   ========================================== */

.presets-cta {
  display: inline-block;
  margin-top: var(--space-8);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bg);
  background: var(--white);
  border: var(--hair) solid var(--white);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-7);
  transition: background 0.2s, color 0.2s;
}

.presets-cta:hover {
  background: transparent;
  color: var(--white);
}

.presets-intro {
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.presets-intro__img img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}

.presets-intro__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-6);
}

.presets-intro__text .project-hero__desc {
  max-width: 60ch;
}

.preset-list {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
}

.preset-list__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-6);
}

.preset-row {
  display: grid;
  grid-template-columns: 3.5rem 240px 1fr;
  gap: var(--space-6);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: var(--hair) solid var(--divider);
}

.preset-row:first-child {
  border-top: var(--hair) solid var(--divider);
}

.preset-row__num {
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.preset-row__name {
  font-size: var(--fs-lead);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--white);
  line-height: 1.15;
}

.preset-row__desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text);
}

@media (max-width: 700px) {
  .presets-intro {
    grid-template-columns: 1fr;
  }
  .presets-intro__img {
    max-width: 380px;
  }
  .preset-row {
    grid-template-columns: 2.5rem 1fr;
  }
  .preset-row__desc {
    grid-column: 2;
  }
}

.presets-honest {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
}

.presets-honest__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-6);
}

.presets-honest__text .project-hero__desc {
  max-width: 64ch;
}

/* ---- Testimonials ---- */

.testimonials {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
}

.testimonials__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-6);
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 480px));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.testimonial {
  background: var(--surface-1);
  border: var(--hair) solid var(--border);
  border-radius: 0;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.testimonial__quote {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text);
  flex: 1;
}

.testimonial__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.testimonial__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  object-fit: cover;
  background: var(--surface-2);
}

.testimonial__name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.3;
}

.testimonial__role {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.2s;
}

a.testimonial__role:hover {
  color: var(--white);
}

/* ---- Buy box ---- */

.presets-buy {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
}

.presets-buy__box {
  background: var(--surface-1);
  border: var(--hair) solid var(--border);
  border-radius: 0;
  padding: var(--card-pad-lg);
  max-width: var(--measure-sm);
  text-align: center;
  margin: 0 auto;
}

.presets-buy__name {
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: var(--space-3);
}

.presets-buy__includes {
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: var(--space-6);
}

.presets-buy__price {
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--white);
  margin-bottom: var(--space-7);
}

.presets-buy__btn {
  margin-top: var(--space-1);
}


.presets-buy__note {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted);
  margin-top: var(--space-6);
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================
   BEFORE / AFTER SLIDERS (presets page)
   ========================================== */

.ba-section {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
}

.ba-section__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

.ba-section__hint {
  font-size: 0.9375rem;
  color: var(--text);
  margin-bottom: var(--space-7);
}

.ba-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

@media (max-width: 900px) {
  .ba-section__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ba-section__grid { grid-template-columns: 1fr; }
}

.ba-item__caption {
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: var(--space-3);
}

.ba-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  overflow: hidden;
  background: var(--surface-2);
  user-select: none;
  touch-action: pan-y;
}

.ba-slider__layer {
  position: absolute;
  inset: 0;
}

.ba-slider__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.ba-slider__before {
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}

.ba-slider__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  /* Touch/Maus laufen jetzt ueber den Slider selbst (Pointer-Drag im JS), nicht
     ueber diesen unsichtbaren Regler — der zog auf iOS nicht. pointer-events:none
     leitet alle Zeiger an den Slider; Tastaturfokus (Tab + Pfeile) bleibt. */
  pointer-events: none;
}

.ba-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 44px;
  height: 100%;
  cursor: ew-resize;
}

.ba-slider__range::-moz-range-thumb {
  width: 44px;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: ew-resize;
}

.ba-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 1px;
  background: rgba(255, 255, 255, 0.5);
  transform: translateX(-0.5px);
  pointer-events: none;
  transition: background 0.2s;
}

.ba-slider:hover .ba-slider__handle {
  background: rgba(255, 255, 255, 0.7);
}

.ba-slider__handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border: var(--hair) solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-circle);
  background: rgba(28, 28, 28, 0.22);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(3px);
}

.ba-slider__handle::before {
  content: '‹\00a0›';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.9);
  z-index: 2;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .ba-section__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   BA sections: aspect per section, one-click, motion, stagger
   ========================================== */

.ba-section .ba-slider { aspect-ratio: 3 / 4; }
.ba-oneclick .ba-slider { aspect-ratio: 3 / 2; }

.ba-oneclick {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
}

.ba-oneclick__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}

.ba-oneclick__title {
  font-size: var(--fs-h2);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--white);
  max-width: var(--measure-lg);
  margin-bottom: var(--space-4);
}

.ba-oneclick__text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  max-width: 62ch;
  margin-bottom: var(--space-8);
}

.ba-oneclick__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

@media (max-width: 700px) {
  .ba-oneclick__grid { grid-template-columns: 1fr; }
}

.presets-motion {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
}

.presets-motion__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-5);
}

.presets-motion__video {
  max-width: var(--measure-lg);
  border-radius: 0;
  overflow: hidden;
  background: var(--surface-2);
}

.presets-motion__video video {
  width: 100%;
  height: auto;
  display: block;
}

/* Preset list: sanfter Stagger beim Reveal */
/* Die gestaffelten Delays der Preset-Zeilen sind weg: die Zeilen blenden
   nicht mehr ein, sie stehen einfach da. Regeln ohne Ziel bleiben sonst als
   toter Ballast im Stylesheet. */

/* ==========================================
   PRESETS PAGE v3: product hero, trust, auto-loop
   ========================================== */

.section-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-6);
}

/* Product hero: image left, purchase panel right */
.product-hero {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
}

.product-hero__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

.product-hero__panel {
  position: sticky;
  top: 2rem;
  display: flex;
  flex-direction: column;
}

.product-hero__eyebrow {
  margin-bottom: var(--space-3);
}

/* Der Titel ist die Wortmarke selbst — Film Core, Volume 01 — in Kepler
   Semibold Italic (kommt ueber h1 .hl-accent). Was drin ist, sagt die Zeile
   darunter, nicht die Ueberschrift. */
.product-hero__title {
  font-size: var(--fs-h1);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--white);
}

.product-hero__sub {
  margin-top: var(--space-4);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  max-width: var(--measure-sm);
}

.trust {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-5) 0 var(--space-7);
}

.trust__stars {
  color: var(--accent-text);
  font-size: 0.95rem;
  /* em statt px: 0.12em sind bei 0.95rem dieselben ~2px wie vorher, wandern
     aber mit, wenn jemand die Textgroesse hochstellt. */
  letter-spacing: 0.12em;
}

.trust__avatars {
  display: flex;
}

.trust__avatars img {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-circle);
  border: 2px solid var(--bg);
  object-fit: cover;
  margin-left: -9px;
  background: var(--surface);
}

.trust__avatars img:first-child {
  margin-left: 0;
}

.trust__text {
  font-size: 0.85rem;
  color: var(--muted);
}

.product-hero__price {
  font-size: var(--fs-h2);
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-5);
}

.product-hero__buy { margin: 0; }

.product-hero__btn {
  display: block;
  width: 100%;
}




.product-hero__list {
  list-style: none;
  margin: var(--space-6) 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.product-hero__list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: 0.9375rem;
  color: var(--text);
  line-height: 1.5;
}

.product-hero__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--accent);
}

.product-hero__note {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 820px) {
  .product-hero {
    grid-template-columns: 1fr;
  }
  .product-hero__panel {
    position: static;
  }
}

/* Why-these two columns */
.presets-why {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
}

.presets-why__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
}

.presets-why__cols .project-hero__desc {
  max-width: 56ch;
}

@media (max-width: 700px) {
  .presets-why__cols {
    grid-template-columns: 1fr;
  }
}

/* Cinematic auto-loop (no slider) */
.ba-loop {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 0;
  overflow: hidden;
  background: var(--surface-2);
}

.ba-loop__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ba-loop__after {
  animation: baLoopFade 6s ease-in-out infinite;
}

@keyframes baLoopFade {
  0%, 10% { opacity: 0; }
  40%, 60% { opacity: 1; }
  90%, 100% { opacity: 0; }
}

.ba-loop__state {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 66px;
  height: 24px;
}

.ba-loop__state b {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--space-2);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border-radius: var(--radius-pill);
}

.ba-loop__state--a { animation: baStateA 6s ease-in-out infinite; }
.ba-loop__state--b { animation: baStateB 6s ease-in-out infinite; }

@keyframes baStateA {
  0%, 15% { opacity: 0; }
  40%, 60% { opacity: 1; }
  85%, 100% { opacity: 0; }
}
@keyframes baStateB {
  0%, 15% { opacity: 1; }
  40%, 60% { opacity: 0; }
  85%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ba-loop__after { animation: none; opacity: 1; }
  .ba-loop__state--a { animation: none; opacity: 1; }
  .ba-loop__state--b { animation: none; opacity: 0; }
}

/* ==========================================
   PRESETS v3.1: spacing, eyebrow, pill button, hard-cut one-click loop
   ========================================== */

.product-hero { padding-top: clamp(5rem, 9vw, 9.5rem); }


/* Cinematic: hard one-click cut (no opacity fade) + mouse click animation */
.ba-loop__after { opacity: 0; animation: baCut 4.4s step-end infinite; }
@keyframes baCut { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }

.ba-loop__state--a { opacity: 0; animation: baCut 4.4s step-end infinite; }
.ba-loop__state--b { opacity: 1; animation: baCutInv 4.4s step-end infinite; }
@keyframes baCutInv { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }

.ba-loop__click {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 3;
}

.ba-loop__cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'><path d='M1 1L1 15L4.6 11.8L7 17.6L9.2 16.7L6.8 11L11.5 11Z' fill='%23ffffff' stroke='%23000000' stroke-width='1.1' stroke-linejoin='round'/></svg>") no-repeat center/contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
  transform: translate(-3px, -2px) scale(1);
  animation: baTap 4.4s ease-in-out infinite;
}

@keyframes baTap {
  0%, 38% { transform: translate(-3px, -2px) scale(1); }
  46%, 50% { transform: translate(-3px, -2px) scale(0.8); }
  58%, 100% { transform: translate(-3px, -2px) scale(1); }
}

.ba-loop__ripple {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: var(--radius-circle);
  border: 2px solid rgba(255, 255, 255, 0.85);
  opacity: 0;
  transform: scale(0.3);
  animation: baRipple 4.4s ease-out infinite;
}

@keyframes baRipple {
  0%, 44% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 0.6; transform: scale(0.6); }
  72% { opacity: 0; transform: scale(2.4); }
  100% { opacity: 0; transform: scale(2.4); }
}

@media (prefers-reduced-motion: reduce) {
  .ba-loop__after { animation: none; opacity: 1; }
  .ba-loop__state--a { animation: none; opacity: 1; }
  .ba-loop__state--b { animation: none; opacity: 0; }
  .ba-loop__click { display: none; }
}

/* Presets story section (SEO) */
.presets-why__title {
  font-size: var(--fs-h2);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--white);
  max-width: var(--measure-lg);
  margin-bottom: var(--space-9);
}
.presets-why__cols p { margin-bottom: var(--space-4); }
.presets-why__cols p:last-child { margin-bottom: 0; }

/* ==========================================
   TEST THE PRESETS (interactive switcher)
   ========================================== */

.preset-test {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
}

.preset-test__title {
  font-size: var(--fs-h2);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--white);
  margin-bottom: var(--space-2);
}

.preset-test__hint {
  font-size: 0.9375rem;
  color: var(--muted);
  margin-bottom: var(--space-8);
}

.preset-test__stage {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

.preset-test__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.preset-test__btn {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  text-align: left;
  background: transparent;
  border: var(--hair) solid var(--divider);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.preset-test__btn span {
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  transition: color 0.15s;
}

.preset-test__btn:hover {
  border-color: #4e4e4e;
  color: var(--white);
}

.preset-test__btn.is-active {
  background: var(--white);
  color: var(--bg);
  border-color: var(--white);
}

.preset-test__btn.is-active span { color: var(--bg); }

.preset-test__image {
  position: relative;
  aspect-ratio: 3 / 2;
  max-height: 78vh;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-2);
}

.pt-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.pt-img.is-active { opacity: 1; }

.preset-test__badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
}

@media (max-width: 760px) {
  .preset-test__stage { grid-template-columns: 1fr; }
  .preset-test__list { flex-direction: row; flex-wrap: wrap; }
  .preset-test__btn { flex: 1 1 auto; }
  .preset-test__image { aspect-ratio: 3 / 2; max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pt-img { transition: none; }
}

/* Powergrade page: landscape before/after gallery */
.pg-ba {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
}
.pg-ba__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.pg-ba .ba-slider { aspect-ratio: 16 / 9; }
@media (max-width: 640px) {
  .pg-ba__grid { grid-template-columns: 1fr; }
}

/* ==========================================
   CI: straight corners on all content images, no blur on the handle
   ========================================== */
.ba-slider,
.ba-loop,
.preset-test__image { border-radius: 0; }
.presets-intro__img img { border-radius: 0; }

.ba-slider__handle::after {
  backdrop-filter: none;
  background: rgba(0, 0, 0, 0.34);
}

/* ==========================================
   PRESET TESTER: Lightroom-style preset list
   ========================================== */
.preset-test__list {
  background: var(--surface);
  border: var(--hair) solid var(--divider);
  border-radius: var(--radius-sm);
  padding: 5px;
  gap: 1px;
}

.preset-test__btn {
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
  align-items: center;
  font-size: 0.875rem;
  color: var(--text);
}

.preset-test__btn::before {
  content: '';
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='1.5' y='2.5' width='13' height='11' rx='1.5' fill='none' stroke='%23ffffff' stroke-width='1.3'/><line x1='4.5' y1='6' x2='11.5' y2='6' stroke='%23ffffff' stroke-width='1.3'/><line x1='4.5' y1='9' x2='11.5' y2='9' stroke='%23ffffff' stroke-width='1.3'/></svg>") no-repeat center/contain;
  opacity: 0.4;
}

.preset-test__btn span {
  color: var(--muted);
  font-size: 0.8rem;
  min-width: 1.3em;
}

.preset-test__btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: transparent;
  color: var(--white);
}
.preset-test__btn:hover::before { opacity: 0.7; }

.preset-test__btn.is-active {
  background: rgba(255, 255, 255, 0.1);
  border-color: transparent;
  color: var(--white);
  box-shadow: inset 2px 0 0 var(--accent);
}
.preset-test__btn.is-active span { color: var(--white); }
.preset-test__btn.is-active::before { opacity: 0.95; }

/* keep the list single column, panel style, on every size */
@media (max-width: 760px) {
  .preset-test__list { flex-direction: column; }
  .preset-test__btn { flex: 0 0 auto; }
}

/* Shop: coming-soon product card */


/* Checkout success: ready state with cover */
.checkout-ready {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.checkout-ready__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}
@media (max-width: 700px) {
  .checkout-ready { grid-template-columns: 1fr; }
  .checkout-ready__media { max-width: 320px; }
}

/* Access / resend-link form */
.access-input {
  width: 100%;
  background: var(--surface-2);
  border: var(--hair) solid var(--divider);
  border-radius: var(--radius-sm);
  color: var(--white);
  font: inherit;
  font-size: 1rem;
  padding: var(--space-3) var(--space-4);
}
.access-input:focus { outline: none; border-color: #5f5f5f; }
.access-msg { font-size: 0.9375rem; margin-top: var(--space-4); min-height: 1.2em; }

/* ==========================================
   CHECKOUT / ORDER SUCCESS PAGE
   ========================================== */
.order {
  max-width: var(--measure-lg);
  /* Der Header liegt fix ueber der Seite. Ohne diesen Abstand schiebt sich das
     Logo auf Telefonen in die Ueberschrift — genau das war auf /checkout/success
     zu sehen. Alle anderen Seiten rechnen mit derselben Groesse. */
  padding-top: calc(var(--header-h) + clamp(0.75rem, 4vw, 2.5rem));
  padding-bottom: clamp(3rem, 7vw, 6rem);
}
.order__head { margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.order__eyebrow {
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-3);
}
.order__title {
  font-size: var(--fs-h1);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.04;
  color: var(--white);
}
.order__sub {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--muted);
  margin-top: var(--space-3);
  text-wrap: pretty;
}
.order__state { padding: var(--space-1) 0; }
.order__state .product-hero__btn { margin-top: var(--space-5); }

.order-card {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  /* Oben ausrichten, nicht zentriert. Zentriert liess Cover und Buttons in der
     Mitte schweben, mit viel Leerraum darunter — das wirkte unfertig.
     Jetzt sitzt alles sauber an der Oberkante, eine klare Uebersicht. */
  align-items: start;
  background: var(--surface-1);
  border: var(--hair) solid var(--border);
  border-radius: 0;
  padding: var(--card-pad);
}
.order-card__cover img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}
.order-card__body { min-width: 0; }
.order-card__btn {
  /* So breit wie der Text, nicht ueber die ganze Karte (Lua: "viel zu lang") */
  display: inline-block;
  text-align: center;
  width: auto;
  min-width: 14rem;
  padding-inline: var(--space-8);
  text-wrap: balance;
}
/* Zweit-Button (Academy): Umriss statt Fuellung, damit der Download der klare
   Hauptknopf bleibt. Gleiche Groesse und Hoehe wie der Download-Button, nur
   ohne Fuellung — steht direkt darunter mit etwas Abstand. */
.order-card__btn--ghost {
  margin-top: var(--space-3);
  padding: var(--btn-pad-lg);
  font-size: var(--btn-fs-lg);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  background: transparent;
  border: var(--hair) solid var(--border-strong);
  color: var(--white);
}
.order-card__btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent-text);
  background: transparent;
}
.order__note {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.5;
  margin-top: var(--space-4);
  overflow-wrap: anywhere;
}
.order__note--error { color: #e9927a; }
.order__note:empty { margin-top: 0; }

/* Geraetebestaetigung */
.order-verify {
  background: var(--surface-1);
  border: var(--hair) solid var(--border);
  padding: var(--card-pad);
  max-width: 34rem;
}
.order-verify .order__muted { margin-bottom: var(--space-4); }
.order-verify__btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: var(--space-2);
}
.order-verify__form { margin: 0; }
.order-verify__label {
  display: block;
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-2);
}
.order-verify__input {
  font-size: 1.25rem;
  letter-spacing: 0.4em;
  text-align: center;
  margin-bottom: var(--space-4);
}
.order-verify__resend {
  display: block;
  width: 100%;
  margin-top: var(--space-4);
  padding: var(--space-2);
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 44px;
}
.order-verify__resend:hover { color: var(--white); }
.order-verify__resend:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}
.order__inside { margin-top: clamp(2.25rem, 4vw, 3rem); }
.order__inside-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}
.order__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.order__list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: 0.9375rem;
  color: var(--text);
  line-height: 1.5;
}
.order__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--accent);
}
.order__muted {
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 var(--space-4);
  max-width: 62ch;
}
.order__link {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--divider);
}
.order__link--muted { color: var(--muted); }

/* Ab hier bricht die Karte auf eine Spalte. Das Cover bleibt bewusst klein:
   auf dem Telefon zaehlt der Button, nicht ein bildschirmfuellendes Mockup. */
@media (max-width: 700px) {
  .order-card {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    justify-items: start;
  }
  .order-card__cover { width: 100%; max-width: 200px; }
  .order-card__body { width: 100%; }
  .order__list { margin-bottom: var(--space-6); }
}

@media (max-width: 430px) {
  .order-card__cover { max-width: 160px; }
  /* Schmale Karte, damit "DOWNLOAD LV FILM CORE" bis hinunter zu 320px in
     EINE Zeile passt. Sonst wird der Button doppelt so hoch wie noetig und
     das Label bricht mitten im Produktnamen um. */
  .order-card,
  .order-verify { padding: 1.25rem; }
  .order-card__btn,
  .order-verify__btn {
    font-size: 0.8125rem;
    padding: 0.95rem 0.75rem;
    letter-spacing: 0.02em;
  }
  .order-verify__input { letter-spacing: 0.28em; }
}

/* ==========================================
   POWERGRADE PAGE v2 (premium components)
   ========================================== */

/* Hero before/after slider */
.ba-slider--hero { aspect-ratio: 16 / 9; }
.ba-slider__tag {
  position: absolute;
  bottom: 0.85rem;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  pointer-events: none;
  z-index: 3;
}
.ba-slider__tag--l { left: 0.85rem; }
.ba-slider__tag--r { right: 0.85rem; }

/* Proof strip */
.pg-proof {
  padding-top: clamp(1rem, 2vw, 1.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.pg-proof__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-4);
}
.pg-proof__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}
.pg-proof__link {
  font-size: 0.875rem;
  color: var(--text);
  border: var(--hair) solid var(--divider);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  transition: color 0.2s, border-color 0.2s;
}
.pg-proof__link:hover { color: var(--white); border-color: #4e4e4e; }

/* Before/after gallery title + captions */
.pg-ba .presets-why__title { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.ba-item { margin: 0; }
.ba-item__cap {
  margin-top: var(--space-3);
  font-size: 0.8125rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* Variants */
.pg-variants {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
}
.pg-variants .presets-why__title { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.pg-variants__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}
.pg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: var(--hair) solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.pg-card--featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.pg-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #fff;
  background: var(--accent);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
}
.pg-card__img { background: var(--surface-2); }
.pg-card__img img { width: 100%; height: auto; display: block; }
.pg-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
}
.pg-card__name {
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.02em;
}
.pg-card__tag {
  font-size: 0.8125rem;
  color: var(--accent-text);
  margin-top: var(--space-1);
  margin-bottom: var(--space-4);
}
.pg-card__desc {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: var(--space-5);
}
.pg-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.pg-card__list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.5;
}
.pg-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--accent);
}
.pg-card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.pg-card__price {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pg-card__buyform { margin: 0; }
.pg-card__btn--soon {
  background: transparent;
  color: var(--muted);
  border-color: var(--divider);
  cursor: default;
}
.pg-variants__note {
  margin-top: var(--space-6);
  font-size: 0.875rem;
  color: var(--muted);
}
.pg-variants__note a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

/* Feature grid */
.pg-features {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
}
.pg-features__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}
.pg-feature {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--space-4);
}
.pg-feature__title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}
.pg-feature__text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text);
}

/* Node build diagram */
.pg-nodes {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
}
.pg-nodes .presets-why__title { margin-bottom: var(--space-4); }
.pg-nodes__intro { max-width: 62ch; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.pg-node-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}
.pg-node {
  display: grid;
  grid-template-columns: 3rem minmax(0, 15rem) 1fr;
  gap: var(--space-5);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-top: var(--hair) solid var(--divider);
}
.pg-node:last-child { border-bottom: var(--hair) solid var(--divider); }
.pg-node__n {
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pg-node__name {
  font-size: 1.0625rem;
  color: var(--white);
  letter-spacing: -0.01em;
}
.pg-node__name em {
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-text);
  border: var(--hair) solid var(--accent);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-2);
  margin-left: var(--space-2);
  vertical-align: 2px;
}
.pg-node__d {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.55;
}
.pg-nodes__note {
  margin-top: var(--space-6);
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 60ch;
}

/* Comparison table */
.pg-compare {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
}
.pg-compare__wrap { overflow-x: auto; }
.pg-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}
.pg-table th, .pg-table td {
  text-align: left;
  padding: var(--space-4) var(--space-4);
  border-bottom: var(--hair) solid var(--divider);
  font-size: 0.9375rem;
}
.pg-table thead th {
  color: var(--white);
  font-weight: 500;
  border-bottom-color: #3d3d3d;
}
.pg-table tbody th {
  color: var(--text);
  font-weight: 400;
}
.pg-table td { color: var(--muted); }
.pg-table__hi {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.pg-table thead .pg-table__hi { color: var(--accent-text); }
.pg-yes { color: var(--white); }
.pg-no { color: var(--muted); }

/* Academy */
.pg-academy {
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
}
.pg-academy__inner {
  background: var(--surface);
  border: var(--hair) solid var(--border);
  border-radius: 0;
  padding: clamp(2rem, 5vw, 4rem);
}
.pg-academy__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-4);
}
.pg-academy__title {
  font-size: var(--fs-h2);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--white);
  margin-bottom: var(--space-4);
  max-width: 24ch;
  text-wrap: balance;
}
.pg-academy__text {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  max-width: 64ch;
}
.pg-academy__soon {
  display: inline-block;
  margin-top: var(--space-6);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border: var(--hair) solid var(--divider);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
}

/* Final CTA */
.pg-cta {
  border-top: var(--hair) solid var(--divider);
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  text-align: center;
}
.pg-cta__title {
  font-size: var(--fs-h2);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--white);
}
.pg-cta__text {
  font-size: 1rem;
  color: var(--muted);
  margin: var(--space-4) auto var(--space-8);
  max-width: 48ch;
}

/* Related products */
.pg-related {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
}

/* Powergrade responsive */
@media (max-width: 900px) {
  .pg-variants__grid { grid-template-columns: 1fr; max-width: var(--measure-xs); margin-inline: auto; }
  .pg-features__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .pg-node { grid-template-columns: 2.5rem 1fr; }
  .pg-node__d { grid-column: 2; }
}
@media (max-width: 480px) {
  .pg-features__grid { grid-template-columns: 1fr; }
}

/* ==========================================
   POWERGRADE v3 (single bundle, presets-aligned)
   ========================================== */

/* Ferrari / density showcase band */
.pg-showcase {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
}
.pg-showcase__fig { margin: 0; }
.pg-showcase__fig img { width: 100%; height: auto; display: block; }
.pg-showcase__cap {
  margin-top: var(--space-4);
  font-size: 0.9rem;
  color: var(--muted);
}

/* Two PowerGrades explainer */
.pg-two {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
}
.pg-two .presets-why__title { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.pg-two__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.pg-two__col {
  background: var(--surface-1);
  border: var(--hair) solid var(--border);
  border-radius: 0;
  padding: var(--card-pad);
}
.pg-two__col--pro { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pg-two__name {
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.02em;
}
.pg-two__tag {
  font-size: 0.8125rem;
  color: var(--accent-text);
  margin: var(--space-1) 0 var(--space-4);
}

/* Camera compatibility */
.pg-cams {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
}
.pg-cams .presets-why__title { margin-bottom: var(--space-4); }
.pg-cams__intro { max-width: 62ch; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.pg-cams__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.pg-cams__grid li {
  border: var(--hair) solid var(--divider);
  border-radius: 0;
  padding: var(--space-3) var(--space-4);
  font-size: 0.9375rem;
  color: var(--text);
  text-align: center;
}
.pg-cams__note {
  margin-top: var(--space-6);
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 60ch;
}

/* Academy lesson list */
.pg-academy__list {
  list-style: none;
  padding: 0;
  margin: var(--space-7) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-6);
  max-width: var(--measure-md);
}
.pg-academy__list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: 0.9375rem;
  color: var(--text);
  line-height: 1.5;
}
.pg-academy__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--accent);
}

@media (max-width: 700px) {
  .pg-two__grid { grid-template-columns: 1fr; }
  .pg-cams__grid { grid-template-columns: repeat(2, 1fr); }
  .pg-academy__list { grid-template-columns: 1fr; }
}

/* Includes value grid (compact, desire-driven) */
.pg-includes {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
}
.pg-includes .presets-why__title { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.pg-includes__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-8);
}
.pg-include {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: var(--hair) solid var(--divider);
  min-width: 0;
}
.pg-include::before {
  content: '';
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: var(--radius-circle);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/11px;
}
.pg-include__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1rem;
  color: var(--white);
  letter-spacing: -0.01em;
}

/* Tablet: single full-width column, title + description stay beside each other with room */
@media (max-width: 900px) {
  .pg-includes__grid { grid-template-columns: 1fr; gap: 0; }
  .pg-include { gap: var(--space-4); padding: var(--space-4) 0; }
}
/* Mobile: stack cleanly. Title on top, full-width readable description below. No narrow columns. */
@media (max-width: 560px) {
  .pg-include {
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--space-2);
    column-gap: var(--space-3);
    padding: var(--space-5) 0;
  }
  .pg-include__name { flex: 1 1 auto; font-size: 1rem; }
  }

/* Before/after camera captions (Film Core) */
.ba-item__cap { display: block; }
.ba-item__cam {
  display: block;
  font-size: 0.9375rem;
  color: var(--white);
  letter-spacing: -0.01em;
}
.ba-item__cs {
  display: block;
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: var(--space-1);
}
.ba-item__note {
  display: block;
  font-size: 0.8125rem;
  color: var(--accent-text);
  line-height: 1.5;
  margin-top: var(--space-2);
  max-width: 46ch;
}

/* Testimonial star rating */
.testimonial__stars {
  color: var(--accent-text);
  font-size: 0.9rem;
  /* siehe .trust__stars: em statt px, gleiche optische Breite */
  letter-spacing: 0.12em;
  line-height: 1;
  margin-bottom: var(--space-1);
}

/* Testimonial date */
.testimonial__date {
  display: block;
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: var(--space-1);
  font-variant-numeric: tabular-nums;
}
/* Before/after section intro */
.pg-ba__intro { max-width: 58ch; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
/* Trust text as a link to testimonials */
.trust__link { cursor: pointer; text-decoration: none; transition: color 0.2s; }
.trust__link:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--divider); }
/* Anchor offset under fixed header */
#testimonials { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

/* Hero trust: clickable stars + synced avatar links */
a.trust__stars { text-decoration: none; cursor: pointer; transition: filter 0.2s; }
a.trust__stars:hover { filter: brightness(1.15); }
.trust__avatars { display: flex; align-items: center; }
.trust__avatar-link {
  position: relative;
  display: inline-flex;
  margin-left: -9px;
  border-radius: var(--radius-circle);
  transition: transform 0.18s ease, z-index 0s;
  z-index: 1;
}
.trust__avatar-link:first-child { margin-left: 0; }
.trust__avatar-link img {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-circle);
  border: 2px solid var(--bg);
  object-fit: cover;
  background: var(--surface);
  display: block;
}
.trust__avatar-link:hover { transform: scale(1.18); z-index: 5; }
.trust__avatar-name {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--surface);
  border: var(--hair) solid var(--divider);
  color: var(--white);
  font-size: 0.75rem;
  white-space: nowrap;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.trust__avatar-link:hover .trust__avatar-name { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Scroll offset for individual testimonial anchors */
.testimonial[id^="testimonial-"] { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

/* Film Core Basic/Pro interactive tabs */
.pg-tabs {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
}
.pg-tabs .presets-why__title { margin-bottom: var(--space-4); }
.pg-tabs__lead { max-width: 60ch; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.pg-tabs__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.pg-tab {
  text-align: left;
  background: var(--surface-1);
  border: var(--hair) solid var(--border);
  border-radius: 0;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pg-tab:hover { border-color: #3d3d3d; }
.pg-tab__name { font-size: 1.125rem; color: var(--white); letter-spacing: -0.01em; }
.pg-tab__sub { font-size: 0.8125rem; color: var(--muted); }
.pg-tab.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pg-tab.is-active .pg-tab__sub { color: var(--accent-text); }
.pg-panel {
  display: none;
  background: var(--surface);
  border: var(--hair) solid var(--border);
  border-radius: 0;
  padding: var(--card-pad-lg);
}
.pg-panel.is-active { display: block; animation: pgfade 0.35s ease; }
@keyframes pgfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pg-panel__lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  max-width: 60ch;
  margin-bottom: var(--space-6);
}
.pg-panel .pg-card__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-8);
  margin-bottom: var(--space-6);
}
.pg-panel__node {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.6;
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--space-4);
  max-width: 60ch;
}
.pg-tabs__foot { margin-top: var(--space-5); }
@media (max-width: 760px) {
  .pg-tabs__nav { grid-template-columns: 1fr; }
  .pg-panel .pg-card__list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .pg-panel.is-active { animation: none; } }


/* Der Header ist fixiert — die erste Zeile der Seite muss unter ihm anfangen,
   sonst liegt der Zurueck-Link unsichtbar dahinter. */
.product-back {
  padding-top: calc(var(--header-h) + clamp(1rem, 2.5vw, 1.75rem));
}

/* Der Hero bringt seinen eigenen Abstand mit; nach der Breadcrumb waere er
   doppelt. */
.product-back + .product-hero {
  padding-top: clamp(1rem, 2vw, 1.75rem);
}

.product-back__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  transition: color 0.2s ease;
}

.product-back__link:hover { color: var(--white); }

.product-detail {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
}

.product-detail__text {
  max-width: 64ch;
}

.product-detail__text p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: var(--space-5);
}

.product-detail__text p:last-child { margin-bottom: 0; }

/* ==========================================
   ACADEMY: Lektionen
   ========================================== */

.academy-lessons {
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* Academy auf der Danke-Seite: dieselben Lektionskarten wie auf /academy,
   nur ohne den Seitenabstand — hier sitzen sie mitten in der Bestellung,
   direkt unter dem Download. Kein eigener Look, damit die Lektion an beiden
   Orten gleich aussieht. */
.order-academy {
  border-top: var(--hair) solid var(--divider);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(2rem, 4vw, 3rem);
}

.academy-lessons--inline {
  padding-top: var(--space-6);
  padding-bottom: 0;
}

.academy-lessons--inline .academy-lesson:last-child {
  margin-bottom: 0;
}

.academy-lesson {
  max-width: var(--content-narrow);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.academy-lesson__no {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--accent-text);
  margin-bottom: var(--space-2);
}

.academy-lesson__title {
  font-size: var(--fs-lead);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: var(--space-3);
}

.academy-lesson__desc {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: var(--space-4);
  max-width: 60ch;
}

/* Academy-Lektionen laufen direkt, ohne Standbild-Knopf: die Video-ID kommt
   erst nach bestaetigtem Kauf vom Server, ein Poster gibt es dazu nicht. Der
   Rahmen ist trotzdem derselbe wie beim .video-player. */
.academy-lesson__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: var(--hair) solid var(--divider);
  background: #000;
}

.academy-lesson__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.academy-gate {
  max-width: 60ch;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.8;
}


.testimonials__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 480px));
}

/* ==========================================================================
   BASIC vs PRO — der Vergleich laeuft ueber die Node-Trees, nicht ueber Text.
   Beide Screenshots sind eng auf ihren eigenen Baum geschnitten und auf 16:9
   gebracht: gefuellte Karten statt halb leerer Canvas. Den Groessenunterschied
   traegt die Nodezahl, die daneben steht.
   ========================================================================== */

.pg-vs { padding-top: var(--gap-section-top); padding-bottom: var(--gap-section); }

.pg-vs__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.pg-vs__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--surface);
  border: var(--hair) solid var(--divider);
}

/* Pro ist die volle Fassung — ein Hauch Orange in der Kante reicht, um das zu
   sagen. Eine zweite Farbe oder ein Badge waere hier schon zu viel. */
.pg-vs__card--pro { border-color: color-mix(in srgb, var(--accent) 45%, var(--divider)); }

.pg-vs__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; }

.pg-vs__name {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.02em;
}

.pg-vs__tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.pg-vs__fig {
  margin: 0;
  border: var(--hair) solid var(--divider);
  overflow: hidden;
  background: #282a2e;
}

.pg-vs__fig img { display: block; width: 100%; height: auto; }

.pg-vs__count {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Die Zahl ist das Argument. Tabellenziffern, damit 08 und 17 exakt gleich
   breit stehen und die beiden Karten nicht gegeneinander zappeln. */
.pg-vs__num {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.pg-vs__card--pro .pg-vs__num { color: var(--accent-text); }

.pg-vs__line { color: var(--text); font-size: 0.95rem; line-height: 1.6; }

.pg-vs__foot {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--muted);
  font-size: 0.95rem;
}

@media (max-width: 760px) {
  .pg-vs__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   v80 — Academy als drei Lektionen statt Aufzaehlung
   Die Thumbnails liegen lokal, nicht bei YouTube: sonst ginge beim Aufruf der
   Seite eine Anfrage an Google raus, bevor jemand ueberhaupt Ja gesagt hat.
   ========================================================================== */

.pg-lessons {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}

.pg-lesson { display: flex; flex-direction: column; gap: var(--space-3); }

.pg-lesson__fig {
  position: relative;
  margin: 0;
  border: var(--hair) solid var(--divider);
  overflow: hidden;
  background: var(--surface);
}

.pg-lesson__fig img { display: block; width: 100%; height: auto; }

/* Verlauf und Label-Overlay sind ersatzlos entfallen. Beide stammen aus der
   Zeit, als hier Videostills lagen: der Verlauf machte weisse Schrift auf
   hellem Bild lesbar. Die Lektionskarten tragen ihren Titel jetzt selbst —
   ein Overlay darueber waere die dritte Nennung derselben Sache. */

/* Dauer steht als ruhige Zeile unter dem Titel, nicht mehr auf dem Bild. */
.pg-lesson__time {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.pg-lesson__title {
  color: var(--white);
  font-size: clamp(0.95rem, 1.6vw, 1.08rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.pg-academy__foot {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--muted);
  font-size: 0.95rem;
}

.pg-academy__link {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--divider);
}
.pg-academy__link:hover { text-decoration-color: var(--accent); }

@media (max-width: 760px) {
  .pg-lessons { grid-template-columns: 1fr; }
}

/* v83 — Preis im Abschluss-CTA. Steht als eigene Zeile statt im Knopf: im
   Knopf las er sich wie ein Etikett, hier ist er eine Ansage. */
.pg-cta__price {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--white);
  letter-spacing: -0.02em;
  margin: var(--space-4) 0 var(--space-6);
}


/* ==========================================================================
   PASS07:GALLERY:START  Film Core Hero als Produktgalerie (Lua 10.10.2026,
   Prinzip von jacobnord.se/nord-powergrade). Grosse Buehne, darunter die
   Vorschaubilder zum Durchklicken: Video, Node-Trees, Before/After, Academy.
   Rueckbau: Block loeschen + Dateien aus BACKUP/...-vor-filmcore-pass07-*.
   ========================================================================== */
.pgal__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  overflow: hidden;
}
.pgal__stage > * {
  position: absolute;
  inset: 0;
  margin: 0;
  display: none;
}
.pgal__stage > .is-active {
  display: block;
  animation: pgalIn var(--m-hover, 0.2s) var(--ease, ease) both;
}
@keyframes pgalIn { from { opacity: 0; } to { opacity: 1; } }

.pgal__stage > figure > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pgal .ba-slider { aspect-ratio: auto; height: 100%; }
.pgal .ba-item__cap { display: none; }
.js .pgal .fade-in { opacity: 1; transform: none; }
.pgal .video-player,
.pgal .video-player__frame { aspect-ratio: auto; height: 100%; }

.pgal__cap {
  margin-top: var(--space-3);
  min-height: 1.6em;
  font-size: 0.8125rem;
  color: var(--muted);
}

.pgal__thumbs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--img-gap, 0.6rem);
  margin-top: var(--space-4);
}
.pgal__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--surface-2);
  overflow: hidden;
  cursor: pointer;
}
.pgal__thumb:hover img { opacity: 0.85; }
.pgal__thumb[aria-selected="true"] { opacity: 1; }
.pgal__thumb[aria-selected="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--hair) solid var(--white);
  pointer-events: none;
}
.pgal__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Before/After als geteiltes Vorschaubild: links flach, rechts gegradet */
.pgal__thumb-before { clip-path: inset(0 50% 0 0); }
.pgal__thumb--split::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.6);
  z-index: 1;
}
.pgal__thumb--video::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-35%, -50%);
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--white);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
}

.product-hero__secure {
  margin-top: var(--space-3);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted);
}

@media (max-width: 820px) {
  /* Handy: Vorschaubilder als Band zum Wischen */
  .pgal__thumbs {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 30%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .pgal__thumbs::-webkit-scrollbar { display: none; }
  .pgal__thumb { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .pgal__stage > .is-active { animation: none; }
}
/* PASS07:GALLERY:END */

/* PASS07:CLEAN:START  Produktseiten kurz und ruhig (Lua 10.10.2026)
   Keine Sterne, kein Datum, Stimmen als Text in freier Hoehe, Titel ueberall
   gleich gebaut. Rueckbau: Block loeschen. */
.pgal__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-hero__title-sub {
  display: block;
  font-family: var(--font);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.04em;
}
.testimonial__stars,
.testimonial__date { display: none !important; }
.testimonials__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: clamp(2rem, 4vw, 4rem);
  row-gap: var(--space-7);
}
@media (max-width: 900px) { .testimonials__grid { grid-template-columns: 1fr !important; } }
.testimonial {
  display: flex;
  flex-direction: column;
  background: none !important;
  border: 0 !important;
  border-top: var(--hair) solid var(--divider) !important;
  border-radius: 0 !important;
  padding: var(--space-5) 0 0 !important;
  margin: 0;
  transform: none !important;
}
.testimonial__quote {
  font-size: var(--fs-body) !important;
  line-height: 1.65 !important;
  color: var(--white) !important;
  font-family: inherit !important;
  font-style: normal !important;
  margin: 0 0 var(--space-6);
}
/* Personen immer auf derselben Linie, egal wie lang der Text ist */
.testimonial__meta { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.testimonial__avatar {
  flex: none;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
}
.testimonial__name { display: block; color: var(--white); font-size: 0.875rem; }
.testimonial__role { display: block; font-size: 0.8125rem; color: var(--muted); }
/* Bilder bei den Presets: gross, zwei nebeneinander, ohne Titel */
.ba-section { border-top: 0; padding-top: 0; }
.ba-section__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--img-gap, 0.6rem) !important; }
@media (max-width: 900px) { .ba-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { .ba-section__grid { grid-template-columns: 1fr !important; } }
/* Basic/Pro: dieselben Zeilen in beiden Karten, damit man den Unterschied direkt sieht */
.pg-vs__specs { margin: var(--space-6) 0 0; border-top: var(--hair) solid rgba(255, 255, 255, 0.28); }
.pg-vs__specs > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.7rem 0;
  border-bottom: var(--hair) solid rgba(255, 255, 255, 0.18);
  font-size: 0.875rem;
  line-height: 1.4;
}
.pg-vs__specs dt { color: rgba(255, 255, 255, 0.78); margin: 0; }
.pg-vs__specs dd { color: #fff; font-weight: 500; margin: 0; text-align: right; }
.pg-vs__specs dd.is-no { opacity: 0.5; font-weight: 400; }
.pg-vs__specs > div:last-child { border-bottom: 0; }
/* PASS07:CLEAN:END */

/* ==========================================================================
   PASS17:PGVS  Lua 16.10.2026: Basic/Pro cleaner. Keine Farbkarten mehr
   (Pine gehoert nicht zur Hierarchie Weiss/Charcoal/Orange/Glacier).
   Zwei Spalten wie eine Swiss-Tabelle: Haarlinie oben, Name, Node-Baum,
   Werte-Zeilen. Pro bekommt den einzigen orangen Punkt. Rueckbau: Block loeschen.
   ========================================================================== */
.pg-vs .pg-vs__grid { gap: clamp(2rem, 4vw, 4rem) var(--gap-grid) !important; }
.pg-vs .pg-vs__card,
.pg-vs .pg-vs__card--pro {
  background: transparent !important; border: 0 !important; border-top: var(--hair) solid var(--white) !important;
  border-radius: 0 !important; padding: clamp(1rem, 1.6vw, 1.4rem) 0 0 !important; color: var(--white) !important;
  box-shadow: none !important;
}
.pg-vs .pg-vs__head { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.pg-vs .pg-vs__name, .pg-vs .pg-vs__name .hl-accent { color: var(--white) !important; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem) !important; line-height: 1; }
.pg-vs .pg-vs__card--pro .pg-vs__name::after {
  content: ''; display: inline-block; width: 0.32em; height: 0.32em; margin-left: 0.3em; border-radius: 50%;
  background: var(--accent); vertical-align: 0.55em;
}
.pg-vs .pg-vs__fig { margin: 0 !important; border-radius: 0 !important; overflow: hidden; background: #1c1c1c; }
.pg-vs .pg-vs__specs { margin-top: clamp(1rem, 2vw, 1.5rem) !important; border-top: 0 !important; }
.pg-vs .pg-vs__specs > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.85rem 0 !important; border-bottom: var(--hair) solid var(--divider) !important;
  font-size: var(--fs-body);
}
.pg-vs .pg-vs__specs > div:last-child { border-bottom: 0 !important; }
.pg-vs .pg-vs__specs dt { color: var(--muted) !important; }
.pg-vs .pg-vs__specs dd { color: var(--white) !important; font-weight: 500; text-align: right; }
.pg-vs .pg-vs__specs dd.is-no { color: var(--muted) !important; opacity: 1 !important; font-weight: 400; }
@media (max-width: 767px) {
  .pg-vs .pg-vs__grid { grid-template-columns: 1fr !important; gap: 3rem !important; }
  .pg-vs .pg-vs__fig { margin-inline: calc(-1 * var(--pad)) !important; }
  .pg-vs .pg-vs__specs > div { font-size: 0.9375rem; padding: 0.7rem 0 !important; }
  .pg-vs .pg-vs__specs dt { max-width: 55%; }
}
/* PASS17:PGVS:END */
/* PASS17:PGVS-b  Lua: Punkt und Linien zu viel. Nur Name, Bild, Werte. */
.pg-vs .pg-vs__card, .pg-vs .pg-vs__card--pro { border-top: 0 !important; padding-top: 0 !important; }
.pg-vs .pg-vs__card--pro .pg-vs__name::after { content: none !important; }
.pg-vs .pg-vs__specs > div, .pg-vs .pg-vs__specs > div:last-child { border-bottom: 0 !important; padding: 0.35rem 0 !important; }
.pg-vs .pg-vs__specs { margin-top: 1.25rem !important; }
/* PASS42 Basic/Pro: ein ruhiger Satz statt Tabelle */
.pg-vs .pg-vs__txt { margin: 1.25rem 0 0; max-width: 30em; font-size: var(--fs-body); line-height: 1.55; color: var(--text); }
/* Testimonials: keine Linie oben */
.testimonials :is(blockquote, figure, .testimonial), [class*="testimonial"] { border-top: 0 !important; }
/* Galerie-Thumbs ruhiger: eine Reihe, gleicher Bildabstand, kein Rahmen */
.pgal__thumbs { display: flex !important; flex-wrap: nowrap !important; gap: var(--img-gap) !important; overflow-x: auto; scrollbar-width: none; }
.pgal__thumbs > * { flex: 0 0 clamp(6rem, 10vw, 9rem) !important; border: 0 !important; outline-offset: 0; opacity: 0.55; transition: opacity var(--m-hover) var(--ease); }
.pgal__thumbs > [aria-selected="true"], .pgal__thumbs > *:hover { opacity: 1; }

.testimonial, .testimonials__grid, .testimonials__grid > * { border-top: 0 !important; box-shadow: none !important; }
.product-hero__media, .pgal, .pgal__thumbs { min-width: 0 !important; max-width: 100%; } /* Thumb-Reihe darf das Raster nicht aufdruecken */

/* 02.11.2026  Vorher/Nachher-Griff wieder in der CI: oranger Knopf, Charcoal-Pfeile,
   weisse Linie (Lua). Schlaegt die neutrale Fassung oben. */
html body .ba-slider .ba-slider__handle { background: rgba(255, 255, 255, 0.85); }
html body .ba-slider:hover .ba-slider__handle { background: #fff; }
html body .ba-slider .ba-slider__handle::after {
  width: 40px;
  height: 40px;
  border: 0;
  background: var(--accent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  backdrop-filter: none;
}
html body .ba-slider .ba-slider__handle::before { color: var(--accent-ink); font-size: 13px; font-weight: var(--fw-semibold); }

/* GALERIE-FIX 08.11.2026 (Lua: abgeschnitten, springt, Video steht)
   1. Vorschaubilder als Raster (JS setzt --cols, bei 10 Bildern 2 x 5): nichts
      abgeschnitten, kein seitliches Scrollen, kein Einrasten beim Klick.
   2. Folien bleiben im Layout und blenden weich ueber statt display:none.
      Das Video wird dadurch nicht jedes Mal neu aufgebaut und steht nicht. */
.pgal__thumbs {
  display: grid !important;
  grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
}
.pgal__thumbs > * { flex: none !important; width: auto !important; scroll-snap-align: none !important; }
.pgal__stage > * {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s var(--ease, ease), visibility 0s linear 0.28s;
  animation: none !important;
}
.pgal__stage > .is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.28s var(--ease, ease), visibility 0s;
}
@media (prefers-reduced-motion: reduce) { .pgal__stage > * { transition: none !important; } }
/* GALERIE-FIX:END */