/* ==========================================================================
   KLINGE — 20-preise.css · Die Anzeigetafel (einzige helle Sektion)
   Aufbau: Kopf · Bühne (gepinnt, links) + acht Zeilen (rechts) · Extras-Leiste.
   Kreide-Fläche, schwarze Riesenzahlen, Rot ausschließlich als Kante.
   Namensraum: .prc
   ========================================================================== */

/* ---- Rahmen -------------------------------------------------------------- */
.prc {
  --rail-top: 15rem;
  --grid-step: 12.5%;
  scroll-margin-block-start: var(--sp-5);
}

/* Inhalt über das Hairline-Raster von .grid-lines heben */
.prc__inner {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
}

/* ---- Kopf ---------------------------------------------------------------- */
.prc__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.52fr);
  align-items: end;
  gap: var(--sp-4) clamp(var(--sp-5), 5vw, var(--sp-7));
}

.prc__head-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

.prc__h2 { color: var(--t-strong); }

/* Kondensierte Versalien brauchen in der Zeilenmaske Kopffreiheit */
.prc__h2 .line { padding-block-start: 0.14em; }

.prc__lead {
  max-width: 32ch;
  padding-block-end: 0.6em;
  color: var(--t-body);
}

/* ---- Grid: Bühne links, Tafel rechts ------------------------------------- */
.prc__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: clamp(var(--sp-4), 4vw, var(--sp-7));
  margin-block-start: var(--sp-block);
}

/* Ohne min-width: 0 dehnt die waagerechte Bilderreihe die Spalte auf Mobil auf */
.prc__stage-col,
.prc__stage,
.prc__shots,
.prc__board { min-width: 0; }

/* Ankerspalte: GSAP parkt die Bühne nach dem Pinnen absolut hierin */
.prc__stage-col { position: relative; }

.prc__stage {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: calc(100svh - var(--sp-8) - var(--sp-5));
}

/* ---- Das Ticket: Riesenzahl, Klinge, Name, Dauer -------------------------- */
.prc__ticket {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.prc__ticket-lbl {
  color: var(--t-body);
  letter-spacing: 0.2em;
}

.prc__idx { color: var(--c-signal); }

.prc__figure {
  display: flex;
  align-items: flex-start;
  gap: 0.12em;
  margin-block-start: var(--sp-1);
}

.prc__amount {
  display: block;
  color: var(--t-strong);
  font-variant-numeric: tabular-nums;
}

.prc__cur {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1.05;
  color: var(--c-signal);
  flex: none;
}

/* Signalrote Kante unter der Zahl — fährt beim Wechsel neu ein */
.prc__blade {
  display: block;
  height: 2px;
  background: var(--c-signal);
  transform-origin: left;
  margin-block-start: var(--sp-1);
}

.prc__stage-name {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: 0.012em;
  color: var(--t-strong);
  margin-block-start: var(--sp-1);
}

.prc__stage-dur {
  color: var(--t-body);
  letter-spacing: 0.18em;
}

/* Kanten-Enthüllung beim Wechsel (kein Weichblender) */
@keyframes prc-swap {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes prc-blade {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.prc__stage.is-cut .prc__amount { animation: prc-swap 620ms var(--e-blade) both; }
.prc__stage.is-cut .prc__stage-name { animation: prc-swap 560ms var(--e-blade) 80ms both; }
.prc__stage.is-cut .prc__stage-dur  { animation: prc-swap 520ms var(--e-blade) 140ms both; }
.prc__stage.is-cut .prc__blade      { animation: prc-blade 680ms var(--e-blade) both; }

/* ---- Bildstapel ---------------------------------------------------------- */
.prc__shots {
  position: relative;
  flex: 1 1 auto;
  min-height: var(--sp-8);
  border-radius: var(--r-core);
  overflow: hidden;
  background: var(--c-chalk-deep);
}

.prc__shots::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.prc__shot {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0s var(--e-blade) 760ms;
}

/* Die aktive Aufnahme liegt oben und wischt von links über die alte */
.prc__shot.is-on {
  clip-path: inset(0 0 0 0);
  z-index: var(--z-base);
  transition: clip-path 760ms var(--e-blade);
}

.prc__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prc__cap { display: none; }

/* ---- Die Tafel: acht Zeilen ---------------------------------------------- */
.prc__board-lbl {
  color: var(--t-body);
  letter-spacing: 0.2em;
  padding-block-end: var(--sp-3);
  border-block-end: 1px solid var(--line-strong);
}

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

.prc__row { position: relative; }
.prc__row + .prc__row { border-block-start: 1px solid var(--line); }

.prc__hit {
  position: relative;
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'num name price'
    'num dur  price';
  align-items: center;
  text-align: left;
  column-gap: clamp(var(--sp-3), 2vw, var(--sp-5));
  row-gap: var(--sp-1);
  padding-block: clamp(var(--sp-4), 3.4vw, var(--sp-6));
  padding-inline: 0 var(--sp-1);
}

/* Signalrote Linie, die von links einfährt */
.prc__hit::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  background: var(--c-signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-slow) var(--e-blade);
}

.prc__row.is-on .prc__hit::before,
.prc__hit:hover::before,
.prc__hit:focus-visible::before { transform: scaleX(1); }

.prc__num {
  grid-area: num;
  align-self: start;
  min-width: 3ch;
  padding-block-start: 0.5em;
  color: var(--t-body);
  transition: color var(--d-base) var(--e-sleek), transform var(--d-base) var(--e-sleek);
}

.prc__name {
  grid-area: name;
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
  color: var(--t-strong);
  transition: transform var(--d-base) var(--e-sleek);
}

.prc__dur {
  grid-area: dur;
  color: var(--t-body);
  letter-spacing: 0.16em;
  line-height: 1.5;
  transition: transform var(--d-base) var(--e-sleek);
}

.prc__price {
  grid-area: price;
  align-self: center;
  font-size: var(--fs-h3);
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  color: var(--t-strong);
  transition: transform var(--d-base) var(--e-sleek);
}

.prc__row.is-on .prc__num,
.prc__hit:hover .prc__num { color: var(--c-signal); }

.prc__row.is-on .prc__name,
.prc__row.is-on .prc__dur,
.prc__hit:hover .prc__name,
.prc__hit:hover .prc__dur { transform: translate3d(var(--sp-2), 0, 0); }

.prc__row.is-on .prc__price,
.prc__hit:hover .prc__price { transform: translate3d(0, -2px, 0); }

/* ---- Extras- und Zahlleiste ---------------------------------------------- */
.prc__foot {
  display: grid;
  gap: var(--sp-4);
  margin-block-start: var(--sp-6);
}

.prc__seam { margin-block-end: var(--sp-2); }

.prc__extras-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) clamp(var(--sp-3), 2vw, var(--sp-5));
}

.prc__extras-label { flex: none; color: var(--t-body); }

.prc__extras {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--t-body);
}

.prc__extra {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
}

.prc__extra:not(:last-child)::after {
  content: '·';
  margin-inline-start: 0.45em;
  color: var(--t-faint);
}

.prc__extra-price { font-size: var(--fs-sm); }

.prc__extra-free {
  color: var(--c-signal);
  font-weight: 600;
}

.prc__pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
}

.prc__note {
  max-width: 46ch;
  color: var(--t-body);
}

.prc__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}

.prc__tel {
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  min-height: 44px;
}

.prc__cta { flex: none; }

/* ---- Ab 900px: die Zeilen werden zur Anzeigetafel ------------------------ */
@media (min-width: 900px) {
  .prc__name { font-size: var(--fs-h2); }
  .prc__hit {
    column-gap: clamp(var(--sp-3), 2.4vw, var(--sp-6));
    padding-inline-end: var(--sp-2);
  }
  .prc__price { min-width: 4.5ch; }
  .prc__num { padding-block-start: 0.8em; }
}

/* ---- Unter 900px: kein Pinning, Preis in der Zeile, Bilderreihe ---------- */
@media (max-width: 899px) {
  .prc__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .prc__lead { max-width: 46ch; padding-block-end: 0; }

  .prc__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* sonst messen sich die Spalten an ihrem Inhalt */
    gap: var(--sp-6);
    margin-block-start: var(--sp-6);
  }

  .prc__board { order: 1; }
  .prc__stage-col { order: 2; }

  .prc__stage { height: auto; gap: var(--sp-3); }

  /* Die Bühne fällt weg — die Zeile trägt den Preis selbst */
  .prc__ticket { display: none; }

  /* Aus dem Stapel wird eine waagerecht schnappende Reihe */
  .prc__shots {
    position: static;
    display: flex;
    width: 100%;
    gap: var(--sp-2);
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0;
    background: none;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    padding-block-end: var(--sp-2);
    -webkit-overflow-scrolling: touch;
  }
  .prc__shots::after { content: none; }

  .prc__shot,
  .prc__shot.is-on {
    position: relative;
    inset: auto;
    flex: 0 0 62%;
    clip-path: none;
    transition: none;
    scroll-snap-align: start;
  }

  .prc__shot img {
    height: auto;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-sm);
  }

  .prc__cap {
    display: block;
    padding-block-start: var(--sp-2);
    color: var(--t-body);
    letter-spacing: 0.14em;
    line-height: 1.5;
  }
}

/* ---- Mobil --------------------------------------------------------------- */
@media (max-width: 767px) {
  .prc { --rail-top: 8rem; }

  .prc__hit {
    column-gap: var(--sp-3);
    padding-block: var(--sp-4);
  }

  /* Enge Laufweite, damit die Zusatzzeile einzeilig bleibt */
  .prc__dur { letter-spacing: 0.07em; }

  .prc__shot,
  .prc__shot.is-on { flex: 0 0 76%; }

  .prc__pay { flex-direction: column; align-items: flex-start; }
  .prc__actions { width: 100%; justify-content: space-between; }
  .prc__cta { flex: 1 1 auto; justify-content: space-between; }
}