/* Weingut Donauhang, Scrollytelling in Kapiteln. Fotos als Bühne, gezeichnete Linien und Pergamentkarten erklären.
   Eine feste Bühne (.world), alle Szenen liegen übereinander; das Skript verteilt den Scrollweg auf die Szenen (data-vh) und gibt jeder
   Szene ihren Fortschritt --p (0 bis 1). CSS zeichnet daraus Linien, Balken und Einblendungen. Ohne Skript oder bei "Bewegung reduzieren"
   stehen die Szenen untereinander, alles fertig gezeichnet (--p ist dann 1). Alle Namen, Zahlen und Lagen sind erfunden. */
:root {
  --bg: #1B130D; --parch: #F4EAD5; --parch2: #E9DBBB; --ink: #2A1E14; --mut: #5E4B38; --cream: #FBF4E4; --green: #1E3A2B; --green2: #31583F; --wine: #7C1F2C; --gold: #D2A444; --loess: #CDA55F; --kalk: #E8E1D1;
  --sans: "Avenir Next", "Segoe UI", system-ui, sans-serif; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --kb: 2.6rem; --hh: 4.4rem; --gut: clamp(1.1rem, 4vw, 3.2rem);
}
[hidden] { display: none !important; }
html.pin { scroll-behavior: auto; }
body { background: var(--bg); color: var(--cream); font-family: var(--sans); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kbar { position: relative; z-index: 90; }
html.pin .kbar { position: fixed; top: 0; left: 0; right: 0; }

/* ---------- Ladeanzeige ---------- */
.loader { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 1.1rem; background: var(--green); color: var(--cream); transition: opacity .8s ease, visibility .8s; }
.loader.done { opacity: 0; visibility: hidden; }
html:not(.js) .loader { display: none; }
.loader svg { width: 86px; height: 150px; }
.loader .gl { fill: none; stroke: var(--cream); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.loader .lq { fill: var(--gold); }
.loader b { font: 700 2.1rem/1 var(--serif); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.loader small { font: 500 .78rem/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: rgba(251, 244, 228, .7); }

/* ---------- Kopf, Kapitelpunkte, Fortschritt ---------- */
.hd { position: absolute; top: var(--kb); left: 0; right: 0; z-index: 80; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem var(--gut); pointer-events: none; }
html.pin .hd { position: fixed; }
.hd > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--cream); text-decoration: none; }
.brand svg { width: 34px; height: 34px; flex: none; }
.brand b { display: block; font: 700 1.35rem/1 var(--serif); letter-spacing: .01em; }
.brand small { display: block; margin-top: .2rem; font: 500 .66rem/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: rgba(251, 244, 228, .75); }
.cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.4rem; border: 1.5px solid var(--gold); border-radius: 999px; color: var(--cream); font: 600 .9rem/1 var(--sans); text-decoration: none; background: rgba(27, 19, 13, .35); backdrop-filter: blur(6px); transition: background-color .25s, color .25s; }
.cta:hover { background: var(--gold); color: var(--ink); }
.cta:focus-visible { outline-color: var(--gold); }
.dots { display: none; position: fixed; right: clamp(.5rem, 1.8vw, 1.5rem); top: 50%; translate: 0 -50%; z-index: 80; }
html.pin .dots { display: grid; }
.dots a { position: relative; display: grid; place-items: center; width: 26px; height: 26px; text-decoration: none; }
.dots a::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--cream); background: transparent; transition: background-color .25s, transform .25s; }
.dots a.on::before { background: var(--gold); border-color: var(--gold); transform: scale(1.5); }
.dots a span { position: absolute; right: 100%; margin-right: .4rem; padding: .25rem .6rem; border-radius: 4px; background: rgba(27, 19, 13, .82); color: var(--cream); font: 600 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; }
.dots a:hover span, .dots a:focus-visible span, .dots a.on span { opacity: 1; }
.dots a:focus-visible { outline: 2px solid var(--gold); border-radius: 50%; }
@media (max-width: 820px) { .dots a.on span { opacity: 0; } .dots a:hover span, .dots a:focus-visible span { opacity: 1; } }
.prog { display: none; position: fixed; top: 0; left: 0; z-index: 100; height: 3px; width: calc(var(--tp, 0) * 100%); background: var(--gold); }
html.pin .prog { display: block; }

/* ---------- Szenen ---------- */
.scene { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; --p: 1; }
html.pin .world { position: fixed; inset: 0; z-index: 1; }
html.pin .scene { position: absolute; inset: 0; min-height: 0; }
.bg, .veil { position: absolute; inset: 0; z-index: -2; }
.veil { z-index: -1; background: linear-gradient(90deg, rgba(20, 12, 6, .8) 0%, rgba(20, 12, 6, .5) 42%, rgba(20, 12, 6, .12) 78%), linear-gradient(0deg, rgba(20, 12, 6, .5), transparent 42%); }
.bg img { width: 100%; height: 100%; object-fit: cover; }
html.pin .bg img { transform: scale(calc(1.03 + var(--p) * .09)); transform-origin: var(--ox, 50%) var(--oy, 50%); }
.sc-in { position: relative; display: grid; grid-template-columns: minmax(0, 4.3fr) minmax(0, 6.7fr); gap: clamp(1.4rem, 4vw, 4rem); align-items: center; min-height: 100svh; padding: calc(var(--kb) + var(--hh) + 1rem) clamp(3rem, 6vw, 5.5rem) 2.4rem var(--gut); }
html.pin .sc-in { position: absolute; inset: 0; min-height: 0; }
.txt { display: grid; gap: 1rem; align-content: center; }
.kick { display: inline-flex; align-items: center; gap: .7rem; font: 600 .78rem/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.kick::before { content: ""; width: 2rem; height: 2px; background: currentColor; }
.txt h2, .sc-c h1 { font: 700 clamp(2rem, 4.1vw, 3.5rem)/1.04 var(--serif); letter-spacing: -.015em; color: var(--cream); text-shadow: 0 2px 28px rgba(0, 0, 0, .35); }
.txt p { max-width: 30em; font: 400 1.08rem/1.6 var(--sans); color: rgba(251, 244, 228, .9); text-shadow: 0 1px 18px rgba(0, 0, 0, .55); }
.txt .note { font: italic 400 1.02rem/1.55 var(--serif); color: #F0D9A0; }
.at { --at: 0; --out: 3; opacity: calc(clamp(0, (var(--p) - var(--at)) / .08, 1) * clamp(0, (var(--out) - var(--p)) / .08, 1)); translate: 0 calc((1 - clamp(0, (var(--p) - var(--at)) / .08, 1)) * 18px); }
@media (max-width: 820px) {
  .sc-in { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-content: start; gap: .7rem; padding: calc(var(--kb) + var(--hh) + .4rem) 2.2rem 1rem var(--gut); }
  .txt { gap: .5rem; }
  .txt h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .txt p { font-size: .96rem; line-height: 1.5; }
  .hide-m { display: none; }
  .veil { background: linear-gradient(180deg, rgba(20, 12, 6, .74) 0%, rgba(20, 12, 6, .5) 46%, rgba(20, 12, 6, .2) 100%); }
}

/* Titel */
.sc-c { grid-template-columns: 1fr; justify-items: center; text-align: center; align-content: center; gap: 1.3rem; }
.sc-c h1 { font-size: clamp(2.8rem, 8.6vw, 7.4rem); line-height: .96; letter-spacing: -.025em; }
.sc-c .sub { max-width: 36em; font: 400 clamp(1rem, 1.5vw, 1.25rem)/1.55 var(--sans); color: rgba(251, 244, 228, .92); text-shadow: 0 1px 18px rgba(0, 0, 0, .6); }
.sc-c .kick { justify-content: center; }
.veil.v-hero { background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(20, 12, 6, .5), rgba(20, 12, 6, .18) 70%), linear-gradient(0deg, rgba(20, 12, 6, .6), transparent 40%); }
.scroll { display: inline-flex; flex-direction: column; align-items: center; gap: .6rem; margin-top: .6rem; color: var(--cream); font: 600 .74rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.scroll i { width: 1px; height: 3.2rem; background: var(--cream); transform-origin: top; animation: drip 2.2s ease-in-out infinite; }
@keyframes drip { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- Pergament ---------- */
.paper { position: relative; padding: clamp(.7rem, 1.6vw, 1.3rem) clamp(.8rem, 1.8vw, 1.5rem); color: var(--ink); filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .42)); min-width: 0; }
.paper::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--parch) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .26 0 0 0 0 .14 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E"); --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 640' preserveAspectRatio='none'%3E%3Cpath d='M5.0 4.7 L10.0 5.5 L15.0 4.8 L20.0 5.9 L25.0 5.8 L30.0 4.3 L35.0 4.9 L40.0 6.4 L45.0 6.0 L50.0 7.2 L55.0 6.1 L60.0 5.3 L65.0 5.9 L70.0 5.7 L75.0 4.5 L80.0 4.2 L85.0 4.6 L90.0 5.8 L95.0 5.5 L100.0 4.3 L105.0 4.6 L110.0 4.4 L115.0 4.4 L120.0 5.8 L125.0 4.7 L130.0 5.2 L135.0 4.7 L140.0 3.8 L145.0 4.5 L150.0 3.3 L155.0 4.4 L160.0 3.8 L165.0 4.6 L170.0 4.5 L175.0 4.6 L180.0 6.0 L185.0 5.8 L190.0 5.0 L195.0 6.1 L200.0 4.9 L205.0 5.4 L210.0 6.3 L215.0 6.1 L220.0 5.2 L225.0 6.7 L230.0 4.7 L235.0 4.1 L240.0 4.4 L245.0 3.4 L250.0 3.4 L255.0 3.2 L260.0 3.4 L265.0 4.5 L270.0 3.9 L275.0 4.4 L280.0 3.8 L285.0 3.8 L290.0 4.5 L295.0 3.7 L300.0 4.3 L305.0 5.5 L310.0 4.9 L315.0 5.3 L320.0 6.7 L325.0 6.5 L330.0 5.3 L335.0 5.1 L340.0 6.1 L345.0 6.3 L350.0 4.4 L355.0 5.1 L360.0 4.5 L365.0 3.7 L370.0 3.7 L375.0 4.0 L380.0 4.8 L385.0 7.2 L390.0 6.1 L395.0 6.9 L400.0 6.1 L405.0 7.1 L410.0 6.7 L415.0 6.1 L420.0 5.7 L425.0 6.4 L430.0 4.9 L435.0 5.0 L440.0 5.6 L445.0 6.1 L450.0 5.6 L455.0 5.0 L460.0 6.1 L465.0 4.7 L470.0 4.0 L475.0 4.0 L480.0 4.0 L485.0 3.1 L490.0 3.3 L495.0 3.5 L500.0 3.7 L505.0 2.8 L510.0 3.2 L515.0 4.4 L520.0 5.0 L525.0 4.9 L530.0 5.4 L535.0 5.2 L540.0 4.1 L545.0 3.5 L550.0 3.0 L555.0 4.4 L560.0 4.0 L565.0 4.5 L570.0 3.0 L575.0 4.2 L580.0 4.0 L585.0 4.4 L590.0 3.7 L595.0 5.0 L600.0 3.4 L605.0 4.3 L610.0 4.5 L615.0 4.6 L620.0 4.1 L625.0 3.9 L630.0 4.0 L635.0 4.5 L640.0 3.8 L645.0 4.9 L650.0 5.5 L655.0 5.6 L660.0 4.7 L665.0 5.4 L670.0 5.5 L675.0 4.9 L680.0 5.1 L685.0 4.9 L690.0 5.7 L695.0 6.1 L700.0 5.3 L705.0 6.3 L710.0 6.7 L715.0 6.1 L720.0 5.6 L725.0 4.9 L730.0 5.5 L735.0 5.4 L740.0 5.2 L745.0 6.0 L750.0 4.7 L755.0 5.8 L760.0 4.4 L765.0 5.3 L770.0 5.0 L775.0 4.5 L780.0 5.5 L785.0 5.3 L790.0 5.6 L795.0 6.3 L800.0 5.1 L805.0 4.5 L810.0 4.8 L815.0 5.3 L820.0 4.3 L825.0 4.2 L830.0 5.4 L835.0 4.8 L840.0 4.2 L845.0 5.0 L850.0 4.2 L855.0 5.5 L860.0 5.3 L865.0 6.3 L870.0 7.1 L875.0 7.3 L880.0 7.3 L885.0 6.4 L890.0 6.7 L895.0 6.2 L900.0 5.8 L905.0 6.3 L910.0 6.8 L915.0 6.7 L920.0 6.5 L925.0 6.8 L930.0 5.4 L935.0 5.1 L940.0 5.6 L945.0 5.2 L950.0 4.8 L955.0 4.7 L960.0 4.8 L965.0 4.4 L970.0 4.0 L975.0 4.9 L980.0 5.1 L985.0 4.1 L990.0 3.4 L995.0 3.3 L1000.0 4.9 L1005.0 3.5 L995.9 5.0 L996.1 10.0 L995.3 15.0 L995.9 20.0 L996.0 25.0 L994.5 30.0 L995.9 35.0 L995.3 40.0 L993.9 45.0 L994.3 50.0 L994.6 55.0 L995.4 60.0 L994.9 65.0 L995.7 70.0 L996.6 75.0 L996.4 80.0 L996.1 85.0 L994.5 90.0 L994.1 95.0 L992.9 100.0 L993.9 105.0 L994.2 110.0 L993.9 115.0 L994.2 120.0 L993.3 125.0 L994.7 130.0 L995.1 135.0 L995.4 140.0 L994.8 145.0 L995.4 150.0 L994.3 155.0 L995.0 160.0 L994.5 165.0 L993.3 170.0 L992.8 175.0 L993.9 180.0 L994.9 185.0 L996.0 190.0 L996.0 195.0 L995.1 200.0 L996.1 205.0 L994.2 210.0 L995.0 215.0 L993.6 220.0 L993.8 225.0 L994.6 230.0 L993.3 235.0 L993.3 240.0 L993.9 245.0 L994.2 250.0 L994.3 255.0 L994.0 260.0 L994.4 265.0 L993.5 270.0 L994.6 275.0 L993.6 280.0 L994.4 285.0 L995.4 290.0 L995.0 295.0 L995.7 300.0 L995.4 305.0 L995.0 310.0 L995.5 315.0 L995.0 320.0 L994.6 325.0 L994.9 330.0 L995.9 335.0 L996.1 340.0 L994.9 345.0 L996.1 350.0 L996.3 355.0 L995.5 360.0 L995.6 365.0 L995.0 370.0 L995.7 375.0 L995.8 380.0 L996.1 385.0 L995.1 390.0 L996.9 395.0 L996.2 400.0 L996.2 405.0 L997.0 410.0 L996.6 415.0 L996.3 420.0 L996.4 425.0 L995.0 430.0 L995.7 435.0 L995.4 440.0 L996.0 445.0 L995.5 450.0 L993.9 455.0 L994.0 460.0 L993.4 465.0 L994.2 470.0 L995.2 475.0 L995.5 480.0 L994.9 485.0 L994.5 490.0 L994.0 495.0 L994.5 500.0 L994.8 505.0 L993.3 510.0 L994.4 515.0 L992.9 520.0 L993.0 525.0 L993.0 530.0 L993.8 535.0 L993.4 540.0 L993.9 545.0 L994.8 550.0 L994.2 555.0 L995.4 560.0 L994.4 565.0 L995.4 570.0 L995.1 575.0 L995.1 580.0 L995.6 585.0 L995.0 590.0 L994.4 595.0 L994.0 600.0 L994.0 605.0 L993.4 610.0 L993.6 615.0 L994.4 620.0 L994.5 625.0 L994.3 630.0 L994.9 635.0 L994.6 640.0 L995.1 645.0 L995.0 633.4 L990.0 635.1 L985.0 634.7 L980.0 635.7 L975.0 635.3 L970.0 635.7 L965.0 635.8 L960.0 635.7 L955.0 636.1 L950.0 635.1 L945.0 636.4 L940.0 636.7 L935.0 635.6 L930.0 636.1 L925.0 636.7 L920.0 636.0 L915.0 635.3 L910.0 634.6 L905.0 634.7 L900.0 633.5 L895.0 635.1 L890.0 635.0 L885.0 634.8 L880.0 635.1 L875.0 634.6 L870.0 634.5 L865.0 635.3 L860.0 635.7 L855.0 637.1 L850.0 636.9 L845.0 635.6 L840.0 636.1 L835.0 635.1 L830.0 634.7 L825.0 634.7 L820.0 634.4 L815.0 636.1 L810.0 636.8 L805.0 636.9 L800.0 637.1 L795.0 637.0 L790.0 636.2 L785.0 636.7 L780.0 635.5 L775.0 635.8 L770.0 635.4 L765.0 633.9 L760.0 633.8 L755.0 634.1 L750.0 634.1 L745.0 633.5 L740.0 634.9 L735.0 634.4 L730.0 633.9 L725.0 634.7 L720.0 635.0 L715.0 635.4 L710.0 635.5 L705.0 636.6 L700.0 635.7 L695.0 635.3 L690.0 635.0 L685.0 635.1 L680.0 633.3 L675.0 634.3 L670.0 634.4 L665.0 633.4 L660.0 633.5 L655.0 633.1 L650.0 633.9 L645.0 635.0 L640.0 635.1 L635.0 635.6 L630.0 636.6 L625.0 635.7 L620.0 635.2 L615.0 635.7 L610.0 634.9 L605.0 635.8 L600.0 635.5 L595.0 636.2 L590.0 635.1 L585.0 636.1 L580.0 636.0 L575.0 634.0 L570.0 635.0 L565.0 633.2 L560.0 633.8 L555.0 633.4 L550.0 634.3 L545.0 634.8 L540.0 633.9 L535.0 635.6 L530.0 634.8 L525.0 635.3 L520.0 635.7 L515.0 635.4 L510.0 635.0 L505.0 635.1 L500.0 634.2 L495.0 633.2 L490.0 633.8 L485.0 633.2 L480.0 632.8 L475.0 633.4 L470.0 633.2 L465.0 633.5 L460.0 634.8 L455.0 634.6 L450.0 636.0 L445.0 636.0 L440.0 634.8 L435.0 636.7 L430.0 636.8 L425.0 635.4 L420.0 637.0 L415.0 636.2 L410.0 636.3 L405.0 637.3 L400.0 636.0 L395.0 636.5 L390.0 637.0 L385.0 635.9 L380.0 634.6 L375.0 634.8 L370.0 634.3 L365.0 634.2 L360.0 633.6 L355.0 634.9 L350.0 634.9 L345.0 634.5 L340.0 634.4 L335.0 635.5 L330.0 635.0 L325.0 635.7 L320.0 636.1 L315.0 635.5 L310.0 634.9 L305.0 635.3 L300.0 634.9 L295.0 635.6 L290.0 635.2 L285.0 636.3 L280.0 636.3 L275.0 636.0 L270.0 634.9 L265.0 634.3 L260.0 635.2 L255.0 634.6 L250.0 634.2 L245.0 633.7 L240.0 633.4 L235.0 634.1 L230.0 633.8 L225.0 633.8 L220.0 633.9 L215.0 634.1 L210.0 633.2 L205.0 633.3 L200.0 634.6 L195.0 634.4 L190.0 634.3 L185.0 632.7 L180.0 632.7 L175.0 633.2 L170.0 633.9 L165.0 634.8 L160.0 634.3 L155.0 635.2 L150.0 634.4 L145.0 634.4 L140.0 635.4 L135.0 635.1 L130.0 635.3 L125.0 634.8 L120.0 635.1 L115.0 634.7 L110.0 634.9 L105.0 635.6 L100.0 635.6 L95.0 633.8 L90.0 633.5 L85.0 634.5 L80.0 634.1 L75.0 634.4 L70.0 633.4 L65.0 633.8 L60.0 633.6 L55.0 634.6 L50.0 633.8 L45.0 634.3 L40.0 634.9 L35.0 633.7 L30.0 634.4 L25.0 635.3 L20.0 636.2 L15.0 635.8 L10.0 635.9 L5.0 635.4 L0.0 637.0 L-5.0 635.7 L4.4 635.0 L3.4 630.0 L4.0 625.0 L4.5 620.0 L4.8 615.0 L5.0 610.0 L5.0 605.0 L4.5 600.0 L5.1 595.0 L5.5 590.0 L5.0 585.0 L5.7 580.0 L5.4 575.0 L4.9 570.0 L6.0 565.0 L6.2 560.0 L4.9 555.0 L4.0 550.0 L4.6 545.0 L4.4 540.0 L4.6 535.0 L5.7 530.0 L5.6 525.0 L6.3 520.0 L5.1 515.0 L5.7 510.0 L5.6 505.0 L3.6 500.0 L3.1 495.0 L4.1 490.0 L4.4 485.0 L3.1 480.0 L4.2 475.0 L3.4 470.0 L4.6 465.0 L4.6 460.0 L4.3 455.0 L4.7 450.0 L6.0 445.0 L5.5 440.0 L5.5 435.0 L4.3 430.0 L3.7 425.0 L4.5 420.0 L4.0 415.0 L3.9 410.0 L4.2 405.0 L4.7 400.0 L4.7 395.0 L5.3 390.0 L4.7 385.0 L5.9 380.0 L5.9 375.0 L6.4 370.0 L6.3 365.0 L6.3 360.0 L6.3 355.0 L6.4 350.0 L5.8 345.0 L5.4 340.0 L5.3 335.0 L5.1 330.0 L4.2 325.0 L4.1 320.0 L3.6 315.0 L4.5 310.0 L4.8 305.0 L3.6 300.0 L3.3 295.0 L3.5 290.0 L4.2 285.0 L4.1 280.0 L5.4 275.0 L3.9 270.0 L4.6 265.0 L4.7 260.0 L5.9 255.0 L6.2 250.0 L5.0 245.0 L4.4 240.0 L4.8 235.0 L4.8 230.0 L5.3 225.0 L3.6 220.0 L3.5 215.0 L3.4 210.0 L3.3 205.0 L3.4 200.0 L4.7 195.0 L5.0 190.0 L4.9 185.0 L5.1 180.0 L5.2 175.0 L4.9 170.0 L5.9 165.0 L4.9 160.0 L5.3 155.0 L5.9 150.0 L5.6 145.0 L5.6 140.0 L7.0 135.0 L7.1 130.0 L6.1 125.0 L6.5 120.0 L7.2 115.0 L6.4 110.0 L5.9 105.0 L5.6 100.0 L7.2 95.0 L6.9 90.0 L6.1 85.0 L6.3 80.0 L6.0 75.0 L5.1 70.0 L5.9 65.0 L5.1 60.0 L4.4 55.0 L4.3 50.0 L5.5 45.0 L5.6 40.0 L6.5 35.0 L6.2 30.0 L5.6 25.0 L4.3 20.0 L3.9 15.0 L4.1 10.0 L3.9 5.0 L5.1 0.0 L4.4 -5.0Z'/%3E%3C/svg%3E"); -webkit-mask: var(--edge) 0 0 / 100% 100% no-repeat; mask: var(--edge) 0 0 / 100% 100% no-repeat; }
.paper svg.dg { display: block; width: 100%; height: auto; max-height: 64svh; }
.paper figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1.2rem; padding: .5rem .3rem 0; font: italic 400 1rem/1.4 var(--serif); color: var(--mut); }
.paper figcaption b { font: 700 1.5rem/1 var(--serif); font-style: normal; color: var(--wine); font-variant-numeric: tabular-nums; }
.paper figcaption .cap { display: inline-flex; align-items: baseline; gap: .5rem; }
.paper figcaption small { font: 500 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
html.pin .paper svg.dg { max-height: calc(100svh - var(--kb) - var(--hh) - 7.5rem); }
@media (max-width: 820px) { html.pin .paper svg.dg { max-height: 44svh; } .paper figcaption { font-size: .9rem; } .paper figcaption b { font-size: 1.2rem; } }

/* Zeichnungen: Linien zeichnen sich nach dem Fortschritt */
.dg .dr { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--p) - var(--s)) / var(--d), 1)); opacity: clamp(0, (var(--p) - var(--s)) * 60, 1); }
.dg .fa { opacity: clamp(0, (var(--p) - var(--s)) / .06, 1); }
.dg .lb { font: italic 600 18px var(--serif); fill: #3A2A1B; opacity: clamp(0, (var(--p) - var(--s)) / .06, 1); }
.dg .lb.sm { font-size: 15px; font-weight: 500; }
.dg .lb.bd { font-style: normal; font-weight: 700; }
.dg .ax { fill: none; stroke: #8A7658; stroke-width: 1.6; }
.dg .tick { font: 500 13px var(--mono); fill: #6D5A43; }
.dg .bar { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(calc(clamp(0, (var(--p) - var(--s)) / var(--d), 1) * var(--w))); }
.dg .bary { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(calc(clamp(0, (var(--p) - var(--s)) / var(--d), 1) * var(--w))); }
.dg .pop { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(clamp(0, (var(--p) - var(--s)) / .08, 1)); opacity: clamp(0, (var(--p) - var(--s)) / .04, 1); }

/* 1 Rebschnitt */
.dg .trunk { stroke: #6B4A2E; stroke-width: 17; }
.dg .cane { stroke: #8A6A45; stroke-width: 5; }
.dg .cane.t { stroke-width: 7; }
.dg .cutm { stroke: #B02A2A; stroke-width: 4.5; }
.dg .cut { transform: translateY(calc(clamp(0, (var(--p) - .52) / .14, 1) * 80px)); opacity: calc(1 - clamp(0, (var(--p) - .52) / .12, 1)); }
.dg .cutm { transform: none; }
.dg .keepfade { opacity: calc(1 - clamp(0, (var(--p) - .66) / .08, 1)); }
.dg .wire { stroke: #8A7658; stroke-width: 2; stroke-dasharray: 7 7; opacity: clamp(0, (var(--p) - .06) / .06, 1); }
.dg .bud { fill: #7FA24A; stroke: #4E6B2C; stroke-width: 1.5; }

/* 2 Temperatur */
.dg .tcur { stroke: var(--wine); stroke-width: 4.5; }
.dg .thr { fill: none; stroke: #3F6B52; stroke-width: 2.2; stroke-dasharray: 9 7; opacity: clamp(0, (var(--p) - .12) / .08, 1); }
.dg .leaf { fill: #7FA24A; stroke: #4E6B2C; stroke-width: 1.6; }
.dg .ring { fill: none; stroke: #3F6B52; stroke-width: 3; }

/* 3 Boden */
.dg .soil { opacity: clamp(0, (var(--p) - .02) / .08, 1); }
.dg .root { stroke: #5A3F26; stroke-width: 3; }
.dg .root.th { stroke-width: 1.8; }
.dg .track { fill: rgba(42, 30, 20, .1); }
.dg .fill-l { fill: #B98A33; }
.dg .fill-k { fill: #7C8B8E; }

/* 4 Reifung */
.dg .gold { stroke: #B98A33; stroke-width: 4.5; }
.dg .acid { stroke: var(--wine); stroke-width: 4.5; }
.dg .band { fill: rgba(49, 88, 63, .18); stroke: #3F6B52; stroke-width: 1.5; stroke-dasharray: 6 6; opacity: clamp(0, (var(--p) - var(--s)) / .08, 1); }
.dg .gr { opacity: clamp(0, (var(--p) - .1) / .08, 1); }
.dg .gb { opacity: clamp(0, (var(--p) - .45) / .35, 1); }

/* 5 Gemischter Satz */
.dg .pipe { stroke: #5A3F26; stroke-width: 5; }
.dg .tank { fill: rgba(255, 255, 255, .35); stroke: var(--ink); stroke-width: 3; }
.dg .liq { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(calc(clamp(0, (var(--p) - var(--s)) / var(--d), 1) * var(--w, 1))); }
.dg .dot { opacity: clamp(0, (var(--p) - var(--s)) / .05, 1); }

/* 6 Gärung */
.dg .vat { fill: rgba(255, 255, 255, .3); stroke: var(--ink); stroke-width: 3.5; }
.dg .must { fill: #E7CB72; }
.dg .foam { fill: #F6EBC4; }
.dg .bub { fill: rgba(255, 255, 255, .8); stroke: rgba(90, 63, 38, .45); stroke-width: 1.2; opacity: calc(clamp(0, (var(--p) - .06) / .1, 1) * clamp(0, (1.04 - var(--p)) / .22, 1)); animation: rise 3.4s ease-in infinite; animation-delay: calc(var(--k) * -.37s); }
html:not(.pin) .dg .bub { opacity: .55; }
@keyframes rise { 0% { translate: 0 0; opacity: 0; } 15% { opacity: 1; } 100% { translate: var(--dx, 0px) -230px; opacity: 0; } }
.dg .thermo-f { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(clamp(0, (var(--p) - .05) / .12, 1)); fill: var(--wine); }
.dg .sg { fill: #B98A33; }
.dg .al { fill: var(--wine); }
.dg .big { font: 700 34px var(--serif); fill: var(--ink); font-variant-numeric: tabular-nums; }
.dg .lab { font: 600 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; fill: #6D5A43; }

/* 7 Weinstufen */
.dg .lay { fill: rgba(42, 30, 20, .1); stroke: var(--ink); stroke-width: 2.6; }
.dg .lay-f { opacity: clamp(0, (var(--p) - var(--s)) / .1, 1); }
.dg .rt { fill: var(--ink); font: 700 20px var(--serif); }
.dg .rd { fill: #4E3C2A; font: 400 15px var(--sans); }

/* Polaroid */
.polaroid { position: relative; width: min(15rem, 100%); padding: .5rem .5rem 1.7rem; background: #FBF4E4; color: var(--mut); transform: rotate(-2.6deg); box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .6); font: italic 400 .95rem/1.2 var(--serif); }
.polaroid img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.polaroid figcaption { position: absolute; left: .7rem; right: .7rem; bottom: .4rem; text-align: center; }

/* Glas: Gericht wählen */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1rem, 2.4vw, 2rem); align-items: center; }
.dish { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.dish button { display: grid; gap: .2rem; min-height: 64px; padding: .7rem .9rem; border: 1.5px solid rgba(42, 30, 20, .35); background: rgba(255, 255, 255, .35); color: var(--ink); font: 700 1rem/1.15 var(--serif); text-align: left; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s; }
.dish button small { font: 500 .72rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.dish button:hover { background: rgba(255, 255, 255, .7); }
.dish button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--cream); transform: translateY(-2px); }
.dish button[aria-pressed="true"] small { color: #E7D6A6; }
.dish button:focus-visible { outline: 3px solid var(--wine); outline-offset: 2px; }
.res { display: grid; justify-items: center; gap: .5rem; text-align: center; }
.res svg { width: clamp(90px, 14vw, 150px); height: auto; }
.res .wglass { fill: rgba(255, 255, 255, .35); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.res .wine { fill: var(--wc, #E8C46A); transition: fill .5s ease; }
.res h3 { font: 700 clamp(1.3rem, 2vw, 1.7rem)/1.1 var(--serif); color: var(--wine); }
.res .meta { font: 600 .74rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.res p { max-width: 24em; font: 400 1rem/1.5 var(--sans); color: var(--ink); text-shadow: none; }
.res.sw svg { animation: swirl .7s ease; }
@keyframes swirl { 0% { transform: rotate(-6deg); } 40% { transform: rotate(5deg); } 100% { transform: none; } }
@media (max-width: 820px) { .pair { grid-template-columns: 1fr; } .dish button { min-height: 52px; padding: .5rem .7rem; font-size: .9rem; } .res svg { width: 70px; } .res p { font-size: .9rem; } }

/* Besuch */
.facts { display: grid; gap: .8rem; margin-top: .4rem; }
.facts div { display: grid; gap: .1rem; padding-left: 1rem; border-left: 2px solid var(--gold); }
.facts dt { font: 600 .72rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.facts dd { font: 400 1.02rem/1.45 var(--sans); color: var(--cream); }
.facts a { color: var(--cream); }
.form { color: var(--ink); }
.form h3 { font: 700 1.5rem/1.1 var(--serif); }
.form label { display: block; margin-top: .8rem; font: 600 .86rem/1.2 var(--sans); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.form input, .form select, .form textarea { display: block; width: 100%; margin-top: .3rem; padding: .7rem .85rem; border: 1px solid rgba(42, 30, 20, .4); background: rgba(255, 255, 255, .6); color: var(--ink); font: 400 1rem/1.4 var(--sans); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--wine); outline-offset: 1px; }
.form button { margin-top: 1rem; min-height: 50px; padding: 0 1.6rem; border: 0; background: var(--wine); color: var(--cream); font: 700 1rem/1 var(--sans); cursor: pointer; transition: background-color .2s; }
.form button:hover { background: #5E1521; }
.form .fine { margin-top: .6rem; font: 400 .82rem/1.4 var(--sans); color: var(--mut); }
.form #fok p { margin: .6rem 0 1rem; color: var(--mut); }
.legal { position: absolute; left: var(--gut); right: var(--gut); bottom: .7rem; z-index: 5; font: 400 .72rem/1.45 var(--sans); color: rgba(251, 244, 228, .72); }
html:not(.pin) .legal { position: relative; left: 0; right: 0; bottom: 0; padding: 1rem var(--gut) 1.4rem; background: rgba(20, 12, 6, .85); }
@media (max-width: 820px) { .form .row { grid-template-columns: 1fr; } .legal { display: none; } html:not(.pin) .legal { display: block; } .facts { gap: .5rem; } .facts dd { font-size: .92rem; } }

@media (prefers-reduced-motion: reduce) { .scroll i { animation: none; transform: none; } .res.sw svg { animation: none; } }

/* Zwei Böden nebeneinander als Hintergrund des Boden-Kapitels */
.bg2 { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.bg2 img { width: 100%; height: 100%; object-fit: cover; }
.bg2 img:first-child { object-position: 30% 50%; }
@media (max-width: 820px) { .bg2 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } }
/* ---------- Handy, Hochformat ---------- */
/* Kopf kompakt: Leiste einzeilig, Kopfzeile und Knopf kleiner, damit mehr Platz für Bild und Zeichnung bleibt */
@media (max-width: 560px) {
  :root { --kb: 2rem; --hh: 3.5rem; --gut: 1rem; }
  .kbar { flex-wrap: nowrap; gap: .5rem; font-size: .58rem; padding: .3rem .8rem; }
  .kbar a { min-height: 1.4rem; }
  .kbar .hide-s { display: none; }
  .hd { padding: .4rem var(--gut); gap: .6rem; }
  .brand { gap: .5rem; }
  .brand svg { width: 28px; height: 28px; }
  .brand b { font-size: 1.12rem; }
  .brand small { margin-top: .12rem; font-size: .54rem; letter-spacing: .18em; }
  .cta { min-height: 38px; padding: 0 1rem; font-size: .8rem; }
  .sc-in { padding-right: 1.7rem; }
  .dots { right: .1rem; }
  .dots a { width: 22px; height: 26px; }
  .dots a::before { width: 8px; height: 8px; }
  /* Beschriftungen der Zeichnungen größer, weil die Karte dort auf etwa 40 Prozent schrumpft */
  .dg .lb { font-size: 28px; } .dg .lb.sm { font-size: 24px; } .dg .tick { font-size: 20px; } .dg .lab { font-size: 19px; letter-spacing: .05em; }
  .dg .rt { font-size: 28px; } .dg .rd { font-size: 20px; }
  .paper { padding: .6rem .6rem .7rem; }
}
/* Niedrige Handys im Hochformat: Polaroid weglassen, Text und Karte rücken enger */
@media (max-width: 820px) and (max-height: 740px) {
  .pol { display: none; }
  .txt h2 { font-size: clamp(1.35rem, 5.6vw, 1.7rem); }
  .txt p { font-size: .9rem; line-height: 1.42; }
  html.pin .paper svg.dg { max-height: 40svh; }
  .dish button { min-height: 46px; padding: .35rem .6rem; }
  .res svg { width: 54px; }
}
/* ---------- Handy, Querformat (niedrig): Text links, Karte rechts, nur Überschrift ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --kb: 2rem; --hh: 3.1rem; --gut: 1.2rem; }
  .kbar { padding: .25rem 1rem; font-size: .6rem; }
  .kbar a { min-height: 1.4rem; }
  .hd { padding: .3rem var(--gut); }
  .brand svg { width: 26px; height: 26px; }
  .brand b { font-size: 1.05rem; }
  .brand small { display: none; }
  .cta { min-height: 34px; padding: 0 .9rem; font-size: .78rem; }
  .dots a { height: 20px; }
  .sc-in { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); grid-template-rows: none; align-content: center; align-items: center; gap: 1.2rem; padding: calc(var(--kb) + var(--hh) + .3rem) 2.4rem .6rem var(--gut); }
  .txt { gap: .4rem; }
  .txt p:not(.kick), .txt .at.pol, .pol { display: none; }
  .txt h2 { font-size: clamp(1.15rem, 3.4vw, 1.7rem); line-height: 1.08; }
  .kick { font-size: .64rem; }
  html.pin .paper svg.dg { max-height: calc(100svh - var(--kb) - var(--hh) - 3.6rem); }
  .paper { padding: .4rem .6rem .5rem; }
  .paper figcaption { padding-top: .25rem; font-size: .8rem; }
  .paper figcaption b { font-size: 1rem; }
  .sc-c h1 { font-size: clamp(1.9rem, 14vh, 3.6rem); }
  .sc-c .sub, .scroll { display: none; }
  .sc-c { gap: .6rem; }
  .pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; }
  .form .row { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .dish button { min-height: 44px; padding: .3rem .6rem; font-size: .85rem; }
  .res svg { width: 54px; }
  .res p { font-size: .82rem; }
  .facts { gap: .3rem; }
  .facts dd { font-size: .8rem; }
  .form label { margin-top: .4rem; }
  .form input, .form select, .form textarea { padding: .4rem .6rem; }
}
/* ---------- Alle Größen ---------- */
/* Handy und Touch: ohne SVG-Filter (raue Kanten, Wackeln), das spart bei jedem Scroll-Frame Rechenzeit */
@media (max-width: 820px), (pointer: coarse) { .paper, .dg .hand { filter: none; } }
/* Statisch (ohne Skript oder mit reduzierter Bewegung): alle Texte stehen fertig da, auch die Titelszene */
html:not(.pin) .at { opacity: 1; translate: none; }
html:not(.pin) .s-besuch .legal { grid-column: 1 / -1; }
/* Gericht-Wahl und Anfrage: bei wenig Platz scrollt der Inhalt in der Szene selbst, nichts wird abgeschnitten; der Bereich beginnt unter der Kopfzeile */
html.pin .s-glas .sc-in, html.pin .s-besuch .sc-in { top: calc(var(--kb) + var(--hh)); height: auto; padding-top: .8rem; overflow-y: auto; align-items: safe center; align-content: safe center; }
@media (max-width: 820px) {
  html.pin .s-glas .sc-in, html.pin .s-besuch .sc-in { grid-template-rows: auto auto; align-content: start; }
  html.pin .s-besuch .legal { display: block; position: static; margin-top: .6rem; }
}
/* Tagesmarke auf der Gärungs-Zeitleiste: wandert von Tag 0 bis Tag 14 */
.dg .dayd { fill: var(--wine); stroke: #2A1E14; stroke-width: 2.5; transform: translateX(calc(clamp(0, (var(--p) - .12) / .74, 1) * 320px)); }