/* El Greco Regen – der Gyros-Teller in Einzelteilen.
   Das Modell zeichnet teller.js in einen Canvas (three.js). Ohne JavaScript,
   ohne WebGL und bei reduzierter Bewegung steht der Abschnitt still: Bild
   des Tellers, daneben die vier Beschriftungen. Erst mit JavaScript wird die
   Bühne gepinnt und der Scrollweg treibt den Ablauf. */
.teller { position: relative; background: var(--black); color: var(--on-black); }
.teller-pin { display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: center; gap: 24px; padding: 96px 22px; }
.teller-head { text-align: center; display: grid; gap: 8px; }
.teller-head .head-eyebrow { color: var(--gold); }
.teller-stage { --cw: min(780px, 56vw); position: relative; width: 100%; max-width: 1280px; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--cw) minmax(0, 1fr); align-items: center; }
.teller-plate { position: relative; grid-column: 2; grid-row: 1; width: 100%; aspect-ratio: 1 / .8; min-height: 0; }
.teller-poster, .teller-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.teller-poster { object-fit: contain; }
.teller.is-live .teller-poster { visibility: hidden; }
.teller-labels { display: grid; gap: clamp(60px, 20svh, 180px); }
.teller-labels.l-links { grid-column: 1; grid-row: 1; text-align: right; justify-items: end; }
.teller-labels.l-rechts { grid-column: 3; grid-row: 1; }
.teller-label { position: relative; max-width: 220px; }
.teller-label h3 { font-size: 28px; line-height: 32px; letter-spacing: .007em; color: var(--on-black); }
.teller-label p { margin-top: 4px; color: var(--grey-dark); }
/* Ohne Ablauf stehen die Beschriftungen einfach da. */
.teller.is-still .teller-label { opacity: 1 !important; transform: none !important; }

/* Mit JavaScript: lange Strecke, gepinnte Bühne, der Canvas füllt die Mitte. */
@media (prefers-reduced-motion: no-preference) {
  html.js .teller:not(.is-still) { height: 340vh; }
  html.js .teller:not(.is-still) .teller-pin { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); overflow: hidden; gap: 0; padding: 40px 22px 24px; }
  html.js .teller:not(.is-still) .teller-plate { aspect-ratio: auto; height: 100%; align-self: stretch; }
  .teller.is-live:not(.is-still) .teller-label { opacity: 0; will-change: opacity, transform; }
  /* Feine Linie von der Beschriftung zum Teil, Länge setzt teller.js. */
  .teller.is-live:not(.is-still) .teller-label::before { content: ""; position: absolute; top: 16px; width: var(--line, 0px); height: 1px; background: var(--gold); opacity: .5; }
  .teller.is-live:not(.is-still) .l-links .teller-label::before { left: calc(100% + 16px); }
  .teller.is-live:not(.is-still) .l-rechts .teller-label::before { right: calc(100% + 16px); }
}

@media (max-width: 1068px) {
  .teller-stage { --cw: min(560px, 52vw); }
  .teller-label h3 { font-size: 24px; line-height: 28px; }
}
@media (max-width: 734px) {
  .teller-pin { padding: 72px 22px; gap: 16px; }
  /* Vier Beschriftungen als 2 x 2 unter dem Teller, zeilenweise bündig. */
  .teller-stage { --cw: 100%; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto auto; gap: 14px 16px; align-items: start; }
  .teller-plate { grid-column: 1 / 3; grid-row: 1; aspect-ratio: 1 / .86; }
  .teller-labels { display: contents; }
  .teller-label { max-width: none; text-align: left; }
  .teller-label[data-teil="gyros"] { grid-column: 1; grid-row: 2; }
  .teller-label[data-teil="pita"] { grid-column: 2; grid-row: 2; }
  .teller-label[data-teil="zaziki"] { grid-column: 1; grid-row: 3; }
  .teller-label[data-teil="reis"] { grid-column: 2; grid-row: 3; }
  .teller-label h3 { font-size: 19px; line-height: 23px; letter-spacing: .012em; }
  .teller-label p { font-size: 14px; line-height: 20px; }
  .teller.is-live .teller-label::before { display: none; }
}
@media (max-width: 734px) and (prefers-reduced-motion: no-preference) {
  html.js .teller:not(.is-still) { height: 320vh; }
  /* Unten Platz für den Anrufknopf, damit er keine Beschriftung verdeckt. */
  html.js .teller:not(.is-still) .teller-pin { padding: 28px 22px 88px; }
}