/* El Greco Regen – Weinglas mit drei Rotweinen aus der Karte.
   Das Glas zeichnet wein.js in einen Canvas (three.js). Ohne JavaScript,
   ohne WebGL und bei reduzierter Bewegung steht der Abschnitt still: Bild
   des gefüllten Glases, daneben alle drei Weine. Erst mit JavaScript wird
   die Bühne gepinnt und der Scrollweg füllt das Glas. */
.wein { position: relative; background: var(--black); color: var(--on-black); }
.wein-pin { display: grid; justify-items: center; padding: 96px 22px; }
.wein-stage { width: 100%; max-width: var(--wrap-wide); min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 468px); grid-template-rows: 1fr auto auto auto 1fr; column-gap: 56px; }
.wein-glas { position: relative; grid-column: 1; grid-row: 1 / -1; align-self: center; width: 100%; max-width: 460px; justify-self: center; aspect-ratio: 4 / 5; min-height: 0; }
.wein-poster, .wein-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.wein-poster { object-fit: contain; }
.wein.is-live .wein-poster { visibility: hidden; }
.wein-head { grid-column: 2; grid-row: 2; display: grid; gap: 8px; padding-bottom: 28px; }
.wein-head .head-eyebrow { color: var(--gold); }
.wein-liste { grid-column: 2; grid-row: 3; list-style: none; margin: 0; padding: 0; }
.wein-pos { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: baseline; padding: 18px 0 20px; border-top: 1px solid var(--line-dark); }
.wein-art { grid-column: 1 / -1; margin: 0 0 4px; font-size: 14px; line-height: 20px; letter-spacing: -.016em; font-weight: 600; color: var(--gold); }
.wein-pos h3 { margin: 0; font-size: 28px; line-height: 32px; letter-spacing: .007em; font-weight: 600; color: var(--on-black); }
.wein-preis { margin: 0; font-size: 21px; line-height: 25px; letter-spacing: .011em; font-weight: 600; color: var(--on-black); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wein-text { grid-column: 1 / -1; margin: 6px 0 0; max-width: 400px; color: var(--grey-dark); }
.wein-mehr { grid-column: 2; grid-row: 4; margin: 0; padding-top: 18px; border-top: 1px solid var(--line-dark); }
.wein-mehr .link { display: inline-block; padding: 10px 0 9px; }
/* Ohne Ablauf stehen die Weine einfach da. */
.wein.is-still .wein-pos, .wein.is-still .wein-mehr { opacity: 1 !important; transform: none !important; }

/* Mit JavaScript: lange Strecke, gepinnte Bühne, das Glas füllt die Höhe. */
@media (prefers-reduced-motion: no-preference) {
  html.js .wein:not(.is-still) { height: 320vh; }
  html.js .wein:not(.is-still) .wein-pin { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); overflow: hidden; padding: 32px 22px 28px; }
  html.js .wein:not(.is-still) .wein-stage { height: 100%; }
  html.js .wein:not(.is-still) .wein-glas { aspect-ratio: auto; max-width: none; height: calc(100svh - var(--nav-h) - 60px); align-self: center; }
  .wein.is-live:not(.is-still) .wein-pos, .wein.is-live:not(.is-still) .wein-mehr { opacity: 0; will-change: opacity, transform; }
}

@media (max-width: 1068px) {
  .wein-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 430px); column-gap: 32px; }
  .wein-head { padding-bottom: 20px; }
  .wein-pos { padding: 14px 0 16px; }
  .wein-pos h3 { font-size: 24px; line-height: 28px; }
  .wein-preis { font-size: 19px; line-height: 23px; }
}
/* Niedrige Fenster (Laptops): engere Abstände, damit alle drei Weine und der Link in die Bühne passen. */
@media (min-width: 735px) and (max-height: 780px) {
  .wein-head { padding-bottom: 16px; }
  .wein-head .section-headline { font-size: 40px; line-height: 44px; letter-spacing: 0; }
  .wein-pos { padding: 11px 0 12px; }
  .wein-art { margin-bottom: 2px; }
  .wein-pos h3 { font-size: 24px; line-height: 28px; }
  .wein-preis { font-size: 19px; line-height: 23px; }
  .wein-text { margin-top: 3px; font-size: 14px; line-height: 20px; letter-spacing: -.016em; }
  .wein-mehr { padding-top: 8px; }
}
@media (min-width: 735px) and (max-height: 600px) and (prefers-reduced-motion: no-preference) {
  html.js .wein:not(.is-still) .wein-text { display: none; }
}
@media (max-width: 734px) {
  .wein-pin { padding: 72px 22px; }
  /* Kopf, Glas, darunter die Weine als Liste. */
  .wein-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; row-gap: 0; }
  .wein-head { grid-column: 1; grid-row: 1; padding-bottom: 8px; text-align: center; }
  .wein-glas { grid-column: 1; grid-row: 2; max-width: 300px; }
  .wein-liste { grid-column: 1; grid-row: 3; }
  .wein-mehr { grid-column: 1; grid-row: 4; padding-top: 6px; }
  .wein-pos { column-gap: 14px; padding: 10px 0 11px; }
  .wein-art { margin-bottom: 1px; font-size: 12px; line-height: 16px; letter-spacing: -.01em; }
  .wein-pos h3 { font-size: 19px; line-height: 23px; letter-spacing: .012em; }
  .wein-preis { font-size: 17px; line-height: 23px; letter-spacing: -.022em; }
  .wein-text { margin-top: 2px; max-width: none; font-size: 14px; line-height: 20px; letter-spacing: -.016em; }
}
@media (max-width: 734px) and (prefers-reduced-motion: no-preference) {
  /* Rechts unten bleibt Platz für den Anrufknopf. */
  html.js .wein:not(.is-still) .wein-pin { padding: 24px 22px 20px; }
  html.js .wein:not(.is-still) .wein-glas { max-width: none; height: 100%; align-self: stretch; }
  html.js .wein:not(.is-still) .wein-mehr { padding-right: 76px; }
}
/* Niedrige Handys: die Beschreibungen weichen, damit das Glas Platz behält. */
@media (max-width: 734px) and (max-height: 760px) and (prefers-reduced-motion: no-preference) {
  html.js .wein:not(.is-still) .wein-text { display: none; }
}