/* Brennerei Hohenkamm. Seitenstil. Die Engine-Klassen bleiben unangetastet;
   hier stehen Marke, Bühnen, Fass und Glas. Der Akzent ist keine feste Farbe:
   fass.js schreibt --whisky aus dem Alter des Fasses, und alles, was sonst
   Akzent wäre, liest diese Farbe. */
:root {
  --sc-canvas:     #15110D;
  --sc-surface:    #1F1914;
  --sc-ink:        #EFE6D8;
  --sc-ink-soft:   #BCAE9B;
  --sc-accent:     var(--whisky-text);
  --sc-accent-ink: #15110D;
  --sc-font-display: "Libre Caslon Display", "Iowan Old Style", Georgia, serif;
  --sc-font-text:    "Public Sans", system-ui, sans-serif;
  --sc-font-mono:    "Public Sans", system-ui, sans-serif;
  --sc-shadow-color: 28 30% 3%;

  /* Startwerte (Jahr 0): fast klares Destillat. fass.js überschreibt sie. */
  --whisky: rgb(228 224 204);
  --whisky-a: .38;
  --whisky-text: rgb(232 226 206);
  --whisky-ink: #15110D;
  --stein: #2A231C;
  color-scheme: dark;
}
html { background: var(--sc-canvas); scrollbar-color: #4a3f33 var(--sc-canvas); }
body { font-family: var(--sc-font-text); background: var(--sc-canvas); color: var(--sc-ink); }
::selection { background: var(--whisky-text); color: var(--whisky-ink); }
:focus-visible { outline: 2px solid var(--whisky-text); outline-offset: 3px; border-radius: 2px; }
input { caret-color: var(--whisky-text); }
html.tor-offen, html.tor-offen body { overflow: hidden; }

/* ---------- Schrift ---------- */
.anzeige {
  font-family: var(--sc-font-display); font-weight: 400;
  letter-spacing: -0.005em; line-height: 1.04;
  text-wrap: balance; color: var(--sc-ink);
}
.anzeige--xl { font-size: clamp(2.7rem, 1.4rem + 4.6vw, 6rem); line-height: 1.0; }
.anzeige--lg { font-size: clamp(2.1rem, 1.3rem + 2.7vw, 4rem); }
.anzeige--md { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.08; }
.text {
  color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.62;
  letter-spacing: .006em; max-width: 46ch; text-wrap: pretty;
}
@media (max-width: 700px) {
  .anzeige--xl { font-size: clamp(2.25rem, 1.3rem + 5.4vw, 3rem); }
  .anzeige--lg { font-size: clamp(1.85rem, 1.2rem + 3.6vw, 2.4rem); }
  .anzeige--md { font-size: clamp(1.5rem, 1.1rem + 2.6vw, 1.9rem); }
  .text { font-size: 1.04rem; line-height: 1.6; }
}

/* ---------- Altersabfrage ---------- */
.tor { display: none; }
html.js.tor-offen .tor {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 200;
  padding: 24px var(--sc-gutter);
  background:
    radial-gradient(70% 60% at 30% 35%, rgb(239 230 216 / .05), transparent 70%),
    var(--sc-canvas);
}
.tor__blatt {
  position: relative; width: min(34rem, 100%);
  padding: clamp(28px, 5vw, 48px);
  background: var(--sc-surface);
  border: 1px solid rgb(239 230 216 / .1);
  box-shadow: inset 0 1px 0 rgb(239 230 216 / .07), var(--sc-e3);
  border-radius: 2px;
}
.tor__blatt::before { /* feine Papierlinien, wie in einem Kontorbuch */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgb(239 230 216 / .035) 0 1px, transparent 1px 30px);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 80%, transparent);
}
.tor__marke { font: 400 1.25rem/1 var(--sc-font-display); color: var(--sc-ink-soft); }
.tor__frage { margin-top: 28px; font: 400 clamp(2rem, 1.4rem + 2.4vw, 2.9rem)/1.06 var(--sc-font-display); text-wrap: balance; }
.tor__frage:focus { outline: none; }
.tor__text { margin-top: 14px; color: var(--sc-ink-soft); line-height: 1.6; max-width: 38ch; }
.tor__knoepfe { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.tor__fuss { margin-top: 30px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

/* ---------- Kopf ---------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 18px var(--sc-gutter);
  background: linear-gradient(rgb(21 17 13 / .82), rgb(21 17 13 / 0));
  pointer-events: none;
}
.kopf a { pointer-events: auto; }
.wortmarke { font: 400 1.6rem/1 var(--sc-font-display); color: var(--sc-ink); text-decoration: none; letter-spacing: .01em; justify-self: start; }
.buchzeile {
  justify-self: center; font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.buchzeile [data-buch-jahr] { color: var(--whisky-text); font-weight: 600; }
.kopf__rechts { justify-self: end; display: flex; align-items: center; gap: 18px; }
.ab18 {
  font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: .06em; color: var(--sc-ink);
  border: 1px solid rgb(239 230 216 / .4); padding: 4px 7px; border-radius: 2px; white-space: nowrap;
}
.kopf__link {
  color: var(--sc-ink); font-weight: 600; font-size: var(--sc-t-sm); text-decoration: underline;
  text-underline-offset: 5px; text-decoration-thickness: 1.5px; text-decoration-color: var(--whisky-text);
  white-space: nowrap;
}
@media (max-width: 760px) {
  .kopf { grid-template-columns: auto 1fr auto; padding-block: 14px; gap: 10px; }
  .wortmarke { font-size: 1.3rem; }
  .buchzeile__rest { display: none; }
  .kopf__link { display: none; }
}

/* ---------- Knopf ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 24px; border-radius: 2px; cursor: pointer;
  font: 600 1rem/1 var(--sc-font-text); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  color: var(--sc-ink); background: transparent;
  border: 1px solid rgb(239 230 216 / .45);
  transition: transform 140ms var(--sc-ease-out), background-color 180ms var(--sc-ease-out), border-color 180ms var(--sc-ease-out);
}
.knopf:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { border-color: var(--whisky-text); }
}
/* Der volle Knopf hat die Farbe des Inhalts, mit feinem Holzmaserungs-Raster
   und einem langsamen Lichtstreif. */
.knopf--voll {
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--whisky-ink); background: var(--whisky-text); border-color: var(--whisky-text);
}
.knopf--voll::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, transparent 35%, rgb(255 250 240 / .34) 50%, transparent 65%) -200% 0 / 200% 100% no-repeat,
    repeating-linear-gradient(90deg, rgb(21 17 13 / .07) 0 1px, transparent 1px 7px);
  animation: streif 5s var(--sc-ease-in-out) infinite;
}
@keyframes streif { 0%, 60% { background-position: -200% 0, 0 0; } 100% { background-position: 200% 0, 0 0; } }

/* ---------- Bühnen ---------- */
.buehne { background: var(--sc-canvas); overflow: hidden; }
.platte {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 30% 50%;
}
.scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.scrim--held {
  background:
    linear-gradient(to top, rgb(21 17 13 / .94) 0%, rgb(21 17 13 / .72) 30%, rgb(21 17 13 / 0) 62%),
    linear-gradient(to right, rgb(21 17 13 / .75), rgb(21 17 13 / .2) 50%, rgb(21 17 13 / 0) 65%);
}
.held {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); bottom: clamp(2.5rem, 9vh, 7rem);
  width: min(46rem, calc(100% - 2 * var(--sc-gutter)));
}
.held h1 { max-width: 14ch; }
.held h1:focus { outline: none; }
.held__sub { margin-top: var(--sc-5); max-width: 40ch; color: #D3C6B3; }
.held .knopf { margin-top: var(--sc-6); }

/* Plätze, an die das Glas wandert. Leer, nur Maß und Lage. */
.glas-platz { position: absolute; display: block; pointer-events: none; aspect-ratio: 120 / 200; }
.glas-platz--held { right: 11%; top: 26%; width: clamp(130px, 14vw, 230px); z-index: 3; }
@media (max-width: 860px) {
  .glas-platz--held { right: var(--sc-gutter); top: 15%; width: clamp(96px, 26vw, 130px); }
}
.glas-ecke {
  position: fixed; right: max(16px, calc(var(--sc-gutter) * .5)); bottom: 22px;
  width: 58px; aspect-ratio: 120 / 200; pointer-events: none; visibility: hidden;
}

/* ---------- Das Glas ---------- */
.glas {
  position: fixed; left: 0; top: 0; z-index: 30; width: 60px;
  transform-origin: 0 0; will-change: transform, width; pointer-events: none;
  opacity: 0;
}
.glas.ist-da { opacity: var(--glas-o, 1); }
.glas__svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 8px 14px rgb(8 6 4 / .55)); }
.glas__inhalt { fill: var(--whisky); fill-opacity: var(--whisky-a); }
.glas__spiegel { fill: var(--whisky); fill-opacity: calc(var(--whisky-a) * .7); stroke: rgb(255 248 230 / .35); stroke-width: .8; }
.glas__kontur, .glas__fuss { fill: rgb(239 230 216 / .05); stroke: rgb(239 230 216 / .72); stroke-width: 1.6; stroke-linejoin: round; }
.glas__rand { fill: none; stroke: rgb(239 230 216 / .72); stroke-width: 1.4; }
.glas__zettel {
  position: absolute; left: 50%; top: 100%; translate: -50% 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; white-space: nowrap;
  color: var(--sc-ink); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 8px rgb(8 6 4 / .95);
  transition: opacity 200ms var(--sc-ease-out);
}
.glas.ist-klein .glas__zettel { opacity: 0; }

/* ---------- Ins Fass ---------- */
.ins-fass { padding-top: clamp(4.5rem, 9vw, 8.5rem); }
.ins-fass__raster {
  display: grid; gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-areas: "bild text" "bild zettel";
  align-items: start;
}
.ins-fass__bild { grid-area: bild; margin: 0; }
.ins-fass__bild img { display: block; width: 100%; height: auto; border-radius: 2px; }
.ins-fass figcaption, .kurve figcaption { margin-top: var(--sc-3); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; max-width: 44ch; }
.ins-fass__text { grid-area: text; padding-top: clamp(0rem, 4vw, 3rem); }
.ins-fass__text .text { margin-top: var(--sc-4); }

/* Papier-Requisit: der Eintrag im Fassbuch. */
.zettel {
  grid-area: zettel; justify-self: start; position: relative;
  width: min(25rem, 100%); padding: 26px 28px 24px;
  color: #2B241C; background: #E9DFCC;
  border-radius: 2px; rotate: -1.6deg;
  box-shadow: 0 2px 3px rgb(8 6 4 / .4), 0 18px 34px -12px rgb(8 6 4 / .7);
}
.zettel::before { /* Linien und ein Wasserrand vom Glas */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(circle at 82% 78%, transparent 34px, rgb(150 96 40 / .14) 35px, rgb(150 96 40 / .07) 38px, transparent 41px),
    repeating-linear-gradient(0deg, rgb(43 36 28 / .07) 0 1px, transparent 1px 32px);
}
.zettel__kopf { font: 400 1.35rem/1.1 var(--sc-font-display); color: #2B241C; }
.zettel__liste { margin: 16px 0 0; }
.zettel__liste > div { display: grid; grid-template-columns: 7rem 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgb(43 36 28 / .16); }
.zettel__liste dt { font-size: var(--sc-t-sm); color: #5A4C3C; }
.zettel__liste dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.zettel__notiz { margin-top: 14px; font-style: italic; color: #5A4C3C; font-size: var(--sc-t-sm); }
@media (max-width: 860px) {
  .ins-fass__raster { grid-template-columns: 1fr; grid-template-areas: "text" "bild" "zettel"; }
  .ins-fass__text { padding-top: 0; }
  .ins-fass__bild { max-width: 30rem; }
}

/* ---------- Zwölf Jahre ---------- */
.platten { position: absolute; inset: -6% 0; }
.platten .platte { opacity: 0; will-change: opacity; }
.platten .platte[data-zeit="0"] { opacity: 1; }
.scrim--jahre {
  background:
    linear-gradient(to top, rgb(21 17 13 / .95) 0%, rgb(21 17 13 / .82) 30%, rgb(21 17 13 / .35) 48%, rgb(21 17 13 / 0) 62%),
    linear-gradient(to left, rgb(21 17 13 / .8) 0%, rgb(21 17 13 / .35) 34%, rgb(21 17 13 / 0) 52%),
    linear-gradient(to bottom, rgb(21 17 13 / .55), rgb(21 17 13 / 0) 26%);
}
.jahr {
  position: absolute; z-index: var(--sc-z-copy);
  right: var(--sc-gutter); top: clamp(4.8rem, 11vh, 7.5rem); text-align: right;
  display: flex; flex-direction: column-reverse;
  text-shadow: 0 2px 24px rgb(21 17 13 / .8);
}
.jahr__zahl {
  font: 400 clamp(3.6rem, 1.6rem + 5.4vw, 7.2rem)/.9 var(--sc-font-display);
  color: var(--whisky-text); font-variant-numeric: lining-nums tabular-nums;
}
.jahr__wort { font-size: .36em; color: var(--sc-ink); margin-right: .12em; }
.jahr__zeit { margin-bottom: 6px; font-weight: 600; font-size: var(--sc-t-base); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink); }

.jahre__text {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); bottom: clamp(2.5rem, 8vh, 6rem);
  width: min(36rem, calc(100% - 2 * var(--sc-gutter))); display: grid;
}
.jahre__text > * { grid-area: 1 / 1; }
.jahre__text .text { margin-top: var(--sc-3); color: #D3C6B3; }
.jahre__text h2, .anstich__text h2 { text-shadow: 0 1px 20px rgb(21 17 13 / .9); }

/* ---------- Das Fass im Schnitt ---------- */
.fass { margin: 0; }
.fass[data-fass="jahre"] {
  position: absolute; z-index: 3;
  right: var(--sc-gutter); top: 58%; translate: 0 -42%;
  width: clamp(260px, 28vw, 430px);
}
.fass__svg { display: block; width: 100%; height: auto; overflow: visible; }
.fass__aussen { fill: #3A2D21; stroke: rgb(239 230 216 / .55); stroke-width: 1.4; }
.fass__leer { fill: #1A140F; }
.fass__inhalt { fill: var(--whisky); fill-opacity: calc(.25 + var(--whisky-a) * .75); }
.fass__innenlinie { fill: none; stroke: rgb(239 230 216 / .22); stroke-width: 1; }
.fass__reifen path { fill: none; stroke: #120E0A; stroke-opacity: .9; stroke-linecap: butt; }
.fass__reifen path.daube { stroke: rgb(239 230 216 / .13); stroke-width: 1; }
.fass__pegel { stroke: var(--sc-ink); stroke-width: 1.2; stroke-dasharray: 4 5; opacity: .75; }
.fass__zeile { margin-top: 14px; display: flex; align-items: baseline; justify-content: center; gap: 12px; text-shadow: 0 1px 14px rgb(21 17 13 / .9); }
.fass__prozent { font: 400 clamp(2rem, 1.4rem + 1.6vw, 3rem)/1 var(--sc-font-display); color: var(--sc-ink); font-variant-numeric: tabular-nums lining-nums; }
.fass__prozent b { font-weight: 400; }
.fass__erkl { font-size: var(--sc-t-sm); color: #D3C6B3; }
.glas-platz--fass { right: calc(var(--sc-gutter) + clamp(260px, 28vw, 430px) + 18px); top: calc(58% + clamp(260px, 28vw, 430px) * .06); width: clamp(52px, 5vw, 78px); z-index: 4; }

@media (max-width: 860px) {
  .jahr { top: 4.2rem; left: var(--sc-gutter); right: auto; text-align: left; flex-direction: row; align-items: baseline; gap: 14px; }
  .jahr__zahl { font-size: 3rem; }
  .jahr__zeit { margin: 0; font-size: .85rem; }
  .fass[data-fass="jahre"] { left: 50%; right: auto; top: 39%; translate: -50% -50%; width: min(64vw, 280px); }
  .glas-platz--fass { left: calc(50% - min(64vw, 280px) / 2 - 34px); right: auto; top: calc(39% - min(64vw, 280px) * .1); width: 40px; }
  .scrim--jahre {
    background:
      linear-gradient(to top, rgb(21 17 13 / .96) 0%, rgb(21 17 13 / .8) 36%, rgb(21 17 13 / .2) 62%, rgb(21 17 13 / .55) 100%);
  }
  .platten .platte { object-position: 22% 50%; }
}

/* ---------- Engel ---------- */
.engel { padding-block: clamp(4.5rem, 9vw, 9rem); }
.engel__raster { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.engel__text .text { margin-top: var(--sc-4); }
.kurve { margin: 0; padding: clamp(18px, 2.4vw, 30px); background: var(--sc-surface); border-radius: 2px; position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgb(239 230 216 / .06), var(--sc-e2); }
.kurve::before { /* feines Punktraster, nach außen ausgeblendet */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgb(239 230 216 / .06) 1px, transparent 1.3px); background-size: 18px 18px;
  mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent);
}
.kurve::after { /* ein langsam wanderndes Licht */
  content: ""; position: absolute; width: 60%; aspect-ratio: 1; left: -20%; top: -30%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(239 230 216 / .045), transparent);
  animation: wandern 11s var(--sc-ease-in-out) infinite alternate;
}
@keyframes wandern { to { translate: 120% 40%; } }
.kurve svg { display: block; width: 100%; height: auto; position: relative; }
.kurve__raster line { stroke: rgb(239 230 216 / .1); }
.kurve__achse text { fill: var(--sc-ink-soft); font: 500 13px var(--sc-font-text); font-variant-numeric: tabular-nums; }
.kurve__linie { fill: none; stroke: var(--whisky-text); stroke-width: 2.5; }
.kurve__flaeche { fill: var(--whisky); fill-opacity: .14; }
.kurve__punkt { fill: var(--whisky-text); }
.kurve__werte { position: relative; margin: 18px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--sc-hairline); }
.kurve__werte > div { padding: 12px 0 0; }
.kurve__werte dt { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.kurve__werte dd { margin: 4px 0 0; font: 400 1.4rem/1 var(--sc-font-display); color: var(--sc-ink); font-variant-numeric: tabular-nums lining-nums; }
.kurve__notiz { position: relative; margin-top: 14px; }
@media (max-width: 860px) {
  .engel__raster { grid-template-columns: 1fr; }
  .kurve__werte { grid-template-columns: repeat(2, 1fr); row-gap: 8px; }
}

/* ---------- Anstich (Höhepunkt) ---------- */
.scrim--anstich { background: linear-gradient(to right, rgb(16 12 9 / .82) 0%, rgb(16 12 9 / .5) 34%, rgb(16 12 9 / 0) 56%); }
.anstich__text {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); top: 50%; translate: 0 -50%;
  width: min(32rem, 42vw); display: grid;
}
.anstich__text > * { grid-area: 1 / 1; align-self: center; }
.anstich__text .text { margin-top: var(--sc-4); color: #D3C6B3; }
@media (max-width: 860px) {
  [data-sc-act="scrub"] .sc-stage__poster, [data-sc-act="scrub"] video { object-position: 64% 50%; }
  .scrim--anstich { background: linear-gradient(to bottom, rgb(16 12 9 / .95) 0%, rgb(16 12 9 / .86) 40%, rgb(16 12 9 / 0) 66%); }
  .anstich__text { top: 4.6rem; translate: none; width: calc(100% - 2 * var(--sc-gutter)); }
  .anstich__text > * { align-self: start; }
}

/* ---------- Dein Jahrgang (Schluss) ---------- */
.buehne--jahrgang {
  background:
    radial-gradient(60% 50% at 75% 45%, rgb(239 230 216 / .045), transparent 70%),
    var(--sc-canvas);
}
.buehne--jahrgang::before { /* Steinfugen, sehr leise */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgb(239 230 216 / .03) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgb(239 230 216 / .02) 0 1px, transparent 1px 128px);
  mask-image: radial-gradient(70% 60% at 70% 50%, #000, transparent);
}
.jahrgang__inhalt {
  position: absolute; inset: 0; z-index: var(--sc-z-copy);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem);
  align-items: center; padding: clamp(5rem, 11vh, 7rem) var(--sc-gutter) clamp(4.5rem, 10vh, 6rem);
}
.jahrgang__kopf .text { margin-top: var(--sc-4); }
.jahrgang__form { margin-top: var(--sc-6); display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.feld { display: grid; gap: 7px; }
.feld label { font-weight: 600; font-size: var(--sc-t-sm); color: var(--sc-ink); }
.feld input {
  width: 13rem; min-height: 50px; padding: 0 14px; border-radius: 2px;
  font: 500 1.1rem var(--sc-font-text); font-variant-numeric: tabular-nums; color: var(--sc-ink);
  background: var(--sc-surface); border: 1px solid rgb(239 230 216 / .4);
  transition: border-color 160ms var(--sc-ease-out);
}
.feld input::placeholder { color: #9C8F7E; }
.feld input:focus-visible { border-color: var(--whisky-text); }
.feld__hilfe { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.feld__fehler { font-size: var(--sc-t-sm); color: #F0B9A0; }
.jahrgang__ergebnis { position: relative; justify-self: center; width: min(30rem, 100%); }
.fass--jahrgang { width: 82%; }
.eintrag { margin-top: 18px; font-size: var(--sc-t-base); line-height: 1.55; color: var(--sc-ink); max-width: 34ch; }
.eintrag b { color: var(--whisky-text); font-variant-numeric: tabular-nums; }
.glas-platz--jahrgang { right: 0; top: 8%; width: clamp(70px, 8vw, 120px); }
.fuss {
  position: absolute; z-index: var(--sc-z-copy); left: var(--sc-gutter); right: var(--sc-gutter); bottom: 18px;
  display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline;
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft); line-height: 1.5;
}
.fuss__marke { font: 400 1.05rem/1 var(--sc-font-display); color: var(--sc-ink); }
@media (max-width: 860px) {
  .jahrgang__inhalt { grid-template-columns: 1fr; align-content: start; gap: 18px; padding-top: 4.4rem; padding-bottom: 5.2rem; }
  .jahrgang__kopf .text { margin-top: 10px; font-size: .98rem; }
  .jahrgang__form { margin-top: 16px; gap: 10px; }
  .feld input { width: 11rem; }
  .jahrgang__ergebnis { justify-self: start; width: 100%; display: grid; grid-template-columns: 1fr 1.1fr; gap: 14px; align-items: center; }
  .fass--jahrgang { width: 100%; }
  .eintrag { margin-top: 0; font-size: .95rem; }
  .glas-platz--jahrgang { display: none; }
  .fuss { bottom: 12px; padding-right: 54px; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .fass[data-fass="jahre"] { top: 44%; width: min(56vw, 240px); }
  .glas-platz--fass { top: calc(44% - min(56vw, 240px) * .1); left: calc(50% - min(56vw, 240px) / 2 - 34px); }
}
@media (max-width: 380px), (max-height: 680px) {
  .jahrgang__kopf .text { display: none; }
  .jahrgang__inhalt { padding-top: 4rem; }
}

.ohne-js { padding: 16px var(--sc-gutter); color: var(--sc-ink-soft); }

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .knopf--voll::before, .kurve::after { animation: none; }
  .glas { transition: none; }
}
/* Unter Reduced Motion lädt die Engine den Clip nicht: dann steht das
   gefüllte Glas als Standbild, damit „Das ist die Farbe“ stimmt. */
@media (prefers-reduced-motion: reduce) {
  #anstich .sc-stage__poster { content: url("assets/01-ende.jpg"); }
}