/* Sauer & Süß. Tokens live in the inline block of index.html; faces in fonts/*.css.
   Science Gothic carries the idea through its width axis: SAUER at wdth 50, SÜSS at 200, Donnerstag at 50 and Freitag solved to the same ink measure (164), regions solved to one measure. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; --scroll-offset: calc(var(--header-h) + 8px); scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-light);
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 0.45vw + 0.98rem, 1.25rem);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.14em; text-decoration-thickness: 0.07em; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 800; }
.example { font-size: 0.86em; opacity: 0.9; }
[id] { scroll-margin-top: calc(var(--header-h) + 8px); }

/* Display voice: one family, width as meaning. */
.brand-name, .h-sec, .h-days, .region, .day-name, .lens-cta-act, .orient-h, .visit-big, .fact-big, .closing-h, .lens-label { font-family: var(--font-display); }
.w50 { font-variation-settings: "wdth" 50; font-stretch: 50%; }
.w164 { font-variation-settings: "wdth" 164; font-stretch: 164%; }

/* Placeholders: one uniform style, body size, never in a heading. */
.ph { font-style: normal; font-weight: 600; text-decoration: underline dotted; text-decoration-thickness: 0.1em; text-underline-offset: 0.25em; }

::selection { background: var(--color-amber); color: var(--color-ground); }
:focus-visible { outline: 3px solid var(--color-amber); outline-offset: 3px; }
.sec-sauer :focus-visible, .sec-suess :focus-visible, .sec-amber :focus-visible { outline-color: var(--color-ground); }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--color-amber); color: var(--color-ground); padding: 0.75rem 1rem; font-weight: 700; border-radius: 8px; }
.skip-link:focus { top: 0.75rem; }

/* Grain over the whole page, the one material: paper-dry lees. */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60;
  background-image: url("grain.svg"); background-size: 200px 200px;
  opacity: 0.09; mix-blend-mode: soft-light;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; gap: 2rem;
  padding-inline: var(--margin-x);
  background: var(--color-ground);
}
/* One wordmark everywhere: the ring mark plus the name in a single cut. */
.brand { text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-light); margin: 0; }
.brand-mark { flex: none; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.75; }
.brand-mark .lens { fill: var(--color-amber); stroke: none; }
.brand-name { font-weight: 800; font-size: 1.3rem; line-height: 1; font-variation-settings: "wdth" 115; font-stretch: 115%; letter-spacing: 0; white-space: nowrap; }
.site-nav { margin-inline-start: auto; display: flex; gap: clamp(1rem, 2.4vw, 2.25rem); }
.site-nav a { text-decoration: none; font-weight: 600; font-size: 1rem; padding-block: 0.4rem; background: linear-gradient(currentColor, currentColor) left bottom / 0 0.09em no-repeat; transition: background-size 450ms var(--ease-out); }
@media (hover: hover) { .site-nav a:hover { background-size: 100% 0.09em; transition-duration: 125ms; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.7rem 1.5rem; border: 0; border-radius: 999px;
  font: 700 1.04rem/1.1 var(--font-body); text-decoration: none; cursor: pointer;
  background: var(--color-amber); color: var(--color-ground);
  transition: transform 150ms ease-out, box-shadow 300ms ease-out;
}
.btn:active { transform: scale(0.97); }
@media (hover: hover) { .btn:hover { box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-amber) 40%, transparent); } }
.btn-small { min-height: 42px; padding: 0.5rem 1.15rem; font-size: 0.96rem; }
.btn-ink { background: var(--color-ground); color: var(--color-light); }
@media (hover: hover) { .btn-ink:hover { box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-ground) 30%, transparent); } }
.btn-mobile-cta { display: none; }
.xs-show { display: none; }

/* ---------- Hero ---------- */
.hero { --strip: 200px; position: relative; background: var(--color-ground); overflow-x: clip; }
.hero-art { position: relative; container-type: inline-size; width: min(100%, calc((100svh - var(--header-h) - var(--strip)) * 2.2154)); aspect-ratio: 1440 / 650; margin-inline: auto; }
.hero-h1 { margin: 0; font-size: 1rem; line-height: 0; }
.art { width: 100%; height: 100%; overflow: visible; }
.art-tall { display: none; }
.rim { fill: none; stroke-width: 9; opacity: 0.6; }
.type-light { fill: var(--color-light); }
.type-dark { fill: var(--color-ground); }

/* Round action in the lens: the overlap is where you act. Centre = lens centre (720, 350 of 1440 x 650). */
.lens-cta, .lens-label {
  position: absolute; left: 50%; top: 51.5%; translate: -50% -50%; rotate: -12deg;
  --w: clamp(170px, 17cqw, 260px); width: var(--w); height: var(--w); border-radius: 50%;
}
.lens-cta {
  background: var(--color-ground); color: var(--color-light);
  display: grid; place-items: center; text-align: center; text-decoration: none;
  padding: calc(var(--w) * 0.22) calc(var(--w) * 0.1) calc(var(--w) * 0.08);
  box-shadow: 0 0 0 3px var(--color-amber), 0 0 0 7px color-mix(in oklch, var(--color-ground) 50%, transparent), 0 18px 30px -12px oklch(0.1 0.05 350 / 0.7);
  transition: background-color 260ms, color 260ms;
}
.lens-label { z-index: 2; pointer-events: none; overflow: visible; }
.lens-label text { font-size: 15px; font-weight: 700; font-variation-settings: "wdth" 100; letter-spacing: 0.06em; fill: var(--color-amber); transition: fill 260ms; }
.lens-cta-act { font-weight: 800; font-size: clamp(1.2rem, 2.3cqw, 2.1rem); line-height: 0.98; font-variation-settings: "wdth" 50; font-stretch: 50%; }
.lens-cta:active { scale: 0.96; }
@media (hover: hover) {
  .lens-cta:hover { background: var(--color-amber); color: var(--color-ground); }
  .hero-art:has(.lens-cta:hover) .lens-label text { fill: var(--color-ground); }
}

/* The strip under the poster: orientation first, then the visit facts, readable at a glance. */
.hero-strip {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; align-items: end; column-gap: clamp(2rem, 5vw, 5rem);
  padding: 0.75rem var(--margin-x) 4.25rem; min-height: var(--strip);
}
.orient-h { font-weight: 700; font-size: clamp(1.35rem, 1.8vw, 1.85rem); line-height: 1.08; font-variation-settings: "wdth" 100; max-width: 24ch; text-wrap: balance; }
.orient-t { margin-top: 0.6rem; font-size: 1.1rem; max-width: 46ch; color: var(--color-muted); }
.visit { border-left: 3px solid var(--color-amber); padding-left: 1.25rem; }
.visit-k { font-weight: 700; font-size: 0.95rem; color: var(--color-amber); }
.visit-big { font-weight: 800; font-size: clamp(1.5rem, 2.3vw, 2.35rem); line-height: 1.05; font-variation-settings: "wdth" 100; margin-block: 0.2rem 0.35rem; }
.visit-v { font-size: 1.05rem; }

/* Pause: small, at the right margin, only where motion runs. */
.pause {
  align-self: end; justify-self: end; display: inline-grid; place-items: center;
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  background: transparent; color: var(--color-muted); border: 1.5px solid var(--color-border-strong); cursor: pointer;
}
.pause:hover { color: var(--color-light); border-color: var(--color-light); }
.pause-icon { width: 9px; height: 11px; border-inline: 3px solid currentColor; }
[data-motion="paused"] .pause-icon { border: 0; border-inline-start: 10px solid currentColor; border-block: 6px solid transparent; width: 0; height: 0; margin-left: 3px; }

/* Hero motion: the poster settles once, the words wipe in, the sticker pops, then a very slow breath (pausable). Resting state is the plain page. */
@media (prefers-reduced-motion: no-preference) {
  .hero-h1 { animation: settle 900ms var(--ease-out) both; }
  /* Width is the idea, so the words arrive by width: SAUER squeezes in from wide, SÜSS stretches out from narrow, the & lands between. */
  .u-sauer, .u-amp, .u-suess { transform-box: fill-box; }
  .u-sauer { transform-origin: 0% 100%; animation: squeeze 700ms var(--ease-out) 250ms both; }
  .u-amp { transform-origin: 50% 50%; animation: amp 500ms var(--ease-pop) 600ms both; }
  .u-suess { transform-origin: 100% 100%; animation: stretch 800ms var(--ease-out) 500ms both; }
  .art { will-change: transform; transform-origin: 50% 50%; animation: breathe 26s ease-in-out 1.4s infinite alternate; }
  .hero-art > .lens-cta, .lens-label { animation: land 700ms var(--ease-pop) 1000ms both; }
  .hero-strip > * { animation: rise 600ms var(--ease-out) 800ms both; }
  .hero-strip > :nth-child(2) { animation-delay: 880ms; }
  .hero-strip > :nth-child(3) { animation-delay: 960ms; }
}
@media (prefers-reduced-motion: reduce) { .pause { display: none; } }
@keyframes settle { from { scale: 0.86; } }
@keyframes squeeze { from { scale: 1.6 1; opacity: 0; } 30% { opacity: 1; } }
@keyframes stretch { from { scale: 0.4 1; opacity: 0; } 30% { opacity: 1; } }
@keyframes amp { from { scale: 0.2; opacity: 0; } }
@keyframes land { from { scale: 1.5; rotate: -38deg; opacity: 0; } 40% { opacity: 1; } }
@keyframes breathe { from { scale: 1; } to { scale: 1.015; } }
@keyframes pop { from { scale: 0.35; } }
@keyframes rise { from { translate: 0 1rem; } }
[data-motion="paused"] .art { animation: none; }
[data-motion="paused"] .hero-h1, [data-motion="paused"] .u-sauer, [data-motion="paused"] .u-amp, [data-motion="paused"] .u-suess, [data-motion="paused"] .lens-cta, [data-motion="paused"] .lens-label, [data-motion="paused"] .hero-strip > * { animation-duration: 0.01ms; animation-delay: 0s; }

/* ---------- Sections ---------- */
.sec { position: relative; z-index: 0; padding: clamp(5rem, 8vw, 7.5rem) var(--margin-x) clamp(5rem, 9vw, 8rem); overflow-x: clip; }
.sec-sauer { background: var(--color-sauer); color: var(--color-on-light); }
.sec-suess { background: var(--color-suess); color: var(--color-on-light); }
.sec-amber { background: var(--color-amber); color: var(--color-on-light); }
.sec-book  { background: var(--color-ground); color: var(--color-light); }
.sec > :not(.seam):not(.book-photo):not(.tide) { position: relative; z-index: 2; }

/* Seams, from the hero's stain edge: two low spill edges (full width, displaced) and two true stain cut-outs of different size and side. */
.seam { position: absolute; pointer-events: none; z-index: 1; }
.seam-spill { left: -6%; width: 112%; height: 120px; top: -46px; border-radius: 50% 50% 0 0 / 80% 60% 0 0; filter: url(#edge); }
.seam-up { background: var(--color-sauer); rotate: -1deg; }
.seam-down { background: var(--color-ground); border-radius: 60% 40% 0 0 / 50% 80% 0 0; rotate: 0.8deg; }
/* Only the part above the seam is shown, so the rim reads as the stain's dried edge on the previous colour and never crosses the content below. */
.seam-stain { border-radius: 50%; aspect-ratio: 1; filter: url(#stainD); clip-path: inset(-24px -24px calc((1 - var(--rise)) * 100% - 3px) -24px); }
.sec-sauer { padding-bottom: calc(clamp(320px, 44vw, 640px) * 0.26 + 3.5rem); }
.seam-stain-left { --d: clamp(320px, 44vw, 640px); --rise: 0.26; width: var(--d); left: -7vw; top: calc(var(--d) * var(--rise) * -1); background: var(--color-ground); box-shadow: 0 0 0 10px color-mix(in oklch, var(--color-ground) 55%, var(--color-sauer)); }
.seam-stain-right { --d: clamp(150px, 19vw, 280px); --rise: 0.42; width: var(--d); right: 9vw; top: calc(var(--d) * var(--rise) * -1); background: var(--color-amber); box-shadow: 0 0 0 7px color-mix(in oklch, var(--color-amber) 55%, var(--color-suess)); }

/* The recurring tide line: one large dried ring per colour band, cropped differently each time, so the bands read as one wet table. */
.tide { position: absolute; z-index: 1; pointer-events: none; aspect-ratio: 1; border-radius: 50%; border: clamp(7px, 0.9vw, 13px) solid; filter: url(#stainD); opacity: 0.55; }
.tide-sauer { width: clamp(240px, 24vw, 360px); right: -5vw; top: 3%; border-color: color-mix(in oklch, var(--color-sauer) 62%, var(--color-ground)); }
.tide-suess { width: clamp(300px, 34vw, 520px); left: 3vw; bottom: calc(clamp(300px, 34vw, 520px) * -0.72); border-color: color-mix(in oklch, var(--color-suess) 60%, var(--color-ground)); }
.tide-amber { width: clamp(300px, 30vw, 460px); right: -8vw; bottom: -4%; border-color: color-mix(in oklch, var(--color-amber) 60%, var(--color-ground)); }

.h-sec { font-size: clamp(2.3rem, 4.6vw, 4.7rem); line-height: 1.0; letter-spacing: -0.01em; font-weight: 800; font-variation-settings: "wdth" 82; font-stretch: 82%; text-wrap: balance; }
.sec-lead { font-size: clamp(1.15rem, 1.3vw, 1.35rem); max-width: 40ch; margin-top: 1.5rem; }
.sec-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; max-width: 1360px; margin-inline: auto; }
.sec-grid .sec-lead { margin-top: 0; }

/* Icons */
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico .lens { fill: var(--color-lens, var(--color-amber)); stroke: none; }
.sec-sauer .ico .lens { fill: var(--color-suess); }

/* ---------- Verkostung: the second display moment ---------- */
/* Donnerstag narrow (wdth 50) and Freitag wide (164, side bearing compensated) fill exactly the same measure, like the two stains. */
.h-days {
  max-width: 1360px; margin: 0 auto clamp(2.5rem, 5vw, 4.5rem);
  display: grid; grid-template-columns: max-content max-content; column-gap: 0.28em; align-items: baseline;
  font-size: clamp(3.1rem, 8.4vw, 8.8rem); line-height: 0.9; font-weight: 900; letter-spacing: 0;
}
.d-do { font-variation-settings: "wdth" 50; font-stretch: 50%; }
.d-fr { font-variation-settings: "wdth" 164; font-stretch: 164%; margin-left: -0.0884em; } /* ink width solved to Donnerstag, side bearing compensated */
.d-small { font-size: 0.4em; font-weight: 700; font-variation-settings: "wdth" 100; font-stretch: 100%; line-height: 1; }


.photo-rings { margin: 0; }
.photo-frame { aspect-ratio: 3 / 2; overflow: hidden; box-shadow: 0 30px 60px -30px oklch(0.15 0.05 350 / 0.6); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; }
.photo-rings figcaption, .fig-note { font-size: 0.92rem; margin-top: 0.75rem; }
.fig-note { color: var(--color-muted); }

ul.visit-facts { list-style: none; margin: 2.25rem 0 1.25rem; padding: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: start; }
/* The price sits where the action sits: in the overlap of two dried rings. */
.price-lens { position: relative; display: block; width: clamp(200px, 17vw, 240px); margin-block: 0.4rem 0.2rem; container-type: inline-size; }
.price-lens svg { width: 100%; height: auto; overflow: visible; }
.pl-ring { fill: none; stroke: var(--color-ground); stroke-width: 3.5; filter: url(#ringP); opacity: 0.85; }
.pl-lens { fill: var(--color-amber); filter: url(#ringP); }
.price-big { position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0; font-size: 14cqw; font-variation-settings: "wdth" 60; font-stretch: 60%; }
.visit-facts li { border-top: 3px solid var(--color-ground); padding-top: 0.85rem; }
.fact-k { display: flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 0.9rem; }
.fact-big { display: block; font-weight: 800; font-size: clamp(2.2rem, 3.6vw, 3.6rem); line-height: 0.95; margin-block: 0.45rem 0.45rem; font-variation-settings: "wdth" 100; white-space: nowrap; }
.fact-note { display: block; font-size: 1rem; font-weight: 600; }
.addr-line { margin-top: 0.3rem; }
.fact-place { font-size: clamp(1.9rem, 2.9vw, 3rem); }
.sec-copy .btn-ink { margin-top: 1rem; }

/* ---------- Reservation: the counter, and the rings you choose ---------- */
.book-photo { position: absolute; inset: auto 0 0 0; z-index: 0; aspect-ratio: 16 / 9; max-height: 100%; overflow: hidden; }
.book-photo img { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.book-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-ground) 0%, oklch(0.21 0.055 350 / 0.55) 22%, oklch(0.21 0.055 350 / 0) 48%), linear-gradient(90deg, oklch(0.21 0.055 350 / 0.05) 0%, oklch(0.21 0.055 350 / 0.5) 42%, oklch(0.21 0.055 350 / 0.92) 62%); }
.book-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); max-width: 1360px; margin-inline: auto; align-items: start; }
.book-copy .h-sec { color: var(--color-light); }
.sec > .book-caption { position: absolute; z-index: 2; left: var(--margin-x); bottom: 1.25rem; max-width: 34ch; color: var(--color-light); text-shadow: 0 1px 8px oklch(0.15 0.05 350 / 0.9); }

.book-form { display: grid; gap: 1.75rem; }
.days { border: 0; margin: 0; padding: 0; min-width: 0; }
.days legend { font-weight: 700; font-size: 1rem; margin-bottom: 1rem; padding: 0; }
.day-picker { --face: clamp(180px, 20.5vw, 290px); position: relative; display: flex; align-items: center; width: max-content; max-width: 100%; margin-inline: auto; }
.day { position: relative; display: block; cursor: pointer; }
.day input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 3; }
.day-face {
  position: relative; display: grid; place-items: center; align-content: center; gap: 0.15rem;
  width: var(--face); aspect-ratio: 1; border-radius: 50%; color: var(--color-light);
  transition: color 300ms, transform 200ms;
}
/* The ring is a wet glass edge (displaced), the fill soaks outward when chosen. */
.day-face::before, .day-face::after { content: ""; position: absolute; inset: 0; border-radius: 50%; filter: url(#ringP); }
.day-face::before { border: 5px solid var(--ring); z-index: 1; }
.day-face::after { inset: 4px; z-index: 0; background: radial-gradient(circle at 45% 40%, color-mix(in oklch, var(--ring) 100%, white 10%) 0 55%, var(--ring) 80%, color-mix(in oklch, var(--ring) 70%, black) 100%); opacity: 0; scale: 0.2; transition: opacity 220ms, scale 560ms var(--ease-pop); }
.day-face > * { position: relative; z-index: 2; }
.day-do { --ring: var(--color-sauer); z-index: 1; }
.day-fr { --ring: var(--color-suess); margin-inline-start: calc(-0.22 * var(--face)); }
.day-do .day-face { padding-inline-end: calc(0.2 * var(--face)); }
.day-fr .day-face { padding-inline-start: calc(0.2 * var(--face)); }
.day-name { font-weight: 900; font-size: calc(var(--face) * 0.26); line-height: 0.9; }
.day-do .day-name { font-variation-settings: "wdth" 50; font-stretch: 50%; }
.day-fr .day-name { font-variation-settings: "wdth" 164; font-stretch: 164%; }
.day-long { display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.86rem; font-weight: 600; }
.day-long::before { content: ""; display: none; width: 0.6em; height: 0.32em; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; rotate: -45deg; translate: 0 -0.12em; }
.day input:checked + .day-face { color: var(--color-ground); }
.day input:checked + .day-face::after { opacity: 1; scale: 1; }
.day input:checked + .day-face .day-long { font-weight: 700; }
.day input:checked + .day-face .day-long::before { display: inline-block; }
.day input:focus-visible + .day-face { outline: 3px solid var(--color-amber); outline-offset: 6px; }
@media (hover: hover) { .day input:not(:checked):hover + .day-face { transform: scale(1.03); } }
.day-lens { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: calc(0.2 * var(--face)); height: 62%; pointer-events: none; border-radius: 50%; background: var(--color-amber); opacity: 0; scale: 0.3; transition: opacity 260ms, scale 480ms var(--ease-pop); z-index: 2; filter: url(#ringP); }
.day-picker:has(input[value="donnerstag"]:checked):has(input[value="freitag"]:checked) .day-lens { opacity: 1; scale: 1; }
.days .hint { margin-top: 1rem; }
.hint { font-size: 0.9rem; color: var(--color-muted); }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
.field { display: grid; gap: 0.4rem; align-content: start; }
.field-wide { grid-column: 1 / -1; }
.field label { font-weight: 700; font-size: 0.98rem; }
.field input, .field textarea {
  width: 100%; font: 500 1.06rem/1.3 var(--font-body); color: var(--color-light);
  background: oklch(0.15 0.05 350 / 0.75); border: 2px solid var(--color-border-strong); border-radius: 12px; padding: 0.8rem 1rem; min-height: 50px;
  transition: border-color 200ms, background-color 200ms;
}
.field input::placeholder { color: var(--color-muted); opacity: 0.85; }
.field input:focus, .field textarea:focus { outline: 3px solid var(--color-amber); outline-offset: 2px; border-color: var(--color-amber); }
.field [aria-invalid="true"] { border-color: var(--color-suess); }
.field .err { color: var(--color-suess); font-weight: 700; font-size: 0.92rem; }
.form-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.btn-amber { min-height: 56px; padding-inline: 2rem; font-size: 1.1rem; }
.privacy { flex: 1 1 260px; font-size: 0.9rem; color: var(--color-muted); max-width: 44ch; }
.form-status { font-weight: 600; }
.form-status:not(:empty) { padding: 1rem 1.25rem; border-left: 6px solid var(--color-amber); background: oklch(0.15 0.05 350 / 0.8); }
.form-status:focus { outline: none; }
.form-status strong { color: var(--color-amber); display: block; }
.demo-note { font-size: 0.9rem; color: var(--color-muted); border-top: 1px solid var(--color-border-strong); padding-top: 1rem; }

/* ---------- Sortiment ---------- */
.sortiment-grid { max-width: 1360px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 500px); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
ul.regions { list-style: none; padding: 0; margin: 0; container-type: inline-size; }
.regions li { padding-block: clamp(0.3rem, 0.8vw, 0.65rem); border-top: 2px solid var(--color-border-on-light); transition: background-color 300ms var(--ease-out), color 300ms; }
.regions li:last-child { border-bottom: 2px solid var(--color-border-on-light); }
/* One block: the width axis is solved per word with fontTools so each name fills exactly 7.5 em (short words wide, long words narrow). */
.region { display: block; font-weight: 800; font-size: calc(100cqw / 7.5); line-height: 1; letter-spacing: 0; white-space: nowrap; }
.r-1 { font-variation-settings: "wdth" 177.2; font-stretch: 177.2%; }
.r-2 { font-variation-settings: "wdth" 72.9; font-stretch: 72.9%; }
.r-3 { font-variation-settings: "wdth" 116.9; font-stretch: 116.9%; }
@media (hover: hover) { .regions li:hover { background: var(--color-ground); color: var(--color-suess); transition-duration: 125ms; } }
.sortiment-note { margin-top: 1.75rem; font-weight: 600; }
.sortiment-head .h-sec { font-size: clamp(2.1rem, 3.9vw, 4.1rem); }

/* ---------- Pakete ---------- */
.pakete-grid { max-width: 1360px; margin-inline: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.crate { margin: 0; width: clamp(240px, 32vw, 460px); }
.crate svg { width: 100%; height: auto; overflow: visible; }
/* Crate from above: wood frame, six bottles, caps in the two brand colours; one corner carries two overlapping ring stains. */
.cw-frame { fill: color-mix(in oklch, var(--color-amber) 55%, var(--color-ground)); stroke: var(--color-ground); stroke-width: 5; }
.cw-inner { fill: color-mix(in oklch, var(--color-amber) 30%, var(--color-ground)); stroke: var(--color-ground); stroke-width: 3; }
.cw-grain { fill: none; stroke: color-mix(in oklch, var(--color-amber) 35%, var(--color-ground)); stroke-width: 2; }
.cw-div { fill: none; stroke: color-mix(in oklch, var(--color-amber) 55%, var(--color-ground)); stroke-width: 7; }
.crate-stain circle { fill: none; stroke-width: 5; opacity: 0.8; }
.cs-a { stroke: color-mix(in oklch, var(--color-sauer) 70%, black); }
.cs-b { stroke: color-mix(in oklch, var(--color-suess) 70%, black); }
.b-shoulder { fill: oklch(0.32 0.05 150); stroke: oklch(0.18 0.04 150); stroke-width: 2; }
.b-cap { stroke: oklch(0.2 0.04 350 / 0.55); stroke-width: 2; }
.b-rim { fill: none; stroke: oklch(0.2 0.04 350 / 0.35); stroke-width: 2; stroke-dasharray: 3 2.2; }
.b-sauer .b-cap { fill: var(--color-sauer); }
.b-suess .b-cap { fill: var(--color-suess); }
.b-amber .b-cap { fill: var(--color-amber); }
.bottle { transform-box: fill-box; transform-origin: 50% 50%; transition: scale 260ms var(--ease-pop), translate 260ms var(--ease-out); }
@media (hover: hover) { .bottle:hover { scale: 1.06; translate: 0 -3px; } }
/* The package facts as a hang tag with a punched ring. */
dl.slip { position: relative; margin: 2rem 0 0; max-width: 44ch; background: color-mix(in oklch, var(--color-light) 70%, var(--color-amber)); border-radius: 14px 14px 14px 40px; padding: 0.6rem 1.4rem 0.6rem 3.4rem; rotate: -1.5deg; box-shadow: 0 14px 24px -14px oklch(0.2 0.05 350 / 0.6); }
dl.slip::before { content: ""; position: absolute; left: 1.1rem; top: 50%; translate: 0 -50%; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--color-amber); box-shadow: inset 0 0 0 3px var(--color-ground); }
.slip > div { padding: 0.9rem 0; }
.slip > div + div { border-top: 2px solid var(--color-ground); }
.slip dt { font-weight: 700; font-size: 0.9rem; }
.slip dd { margin: 0.2rem 0 0; font-size: 1.12rem; font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer { position: relative; z-index: 0; overflow-x: clip; background: var(--color-ground); padding: clamp(4rem, 7vw, 6rem) var(--margin-x) 2rem; }
.site-footer > :not(.seam) { position: relative; z-index: 2; }
.site-footer .ph { font-weight: 500; }
.closing { max-width: 1360px; margin: 0 auto clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.closing-h { font-weight: 800; font-size: clamp(2.2rem, 4.8vw, 5rem); line-height: 1.0; font-variation-settings: "wdth" 82; font-stretch: 82%; text-wrap: balance; }
.closing-art { position: relative; container-type: inline-size; }
.closing-art svg { width: 100%; height: auto; overflow: visible; }
.closing-art .rim { fill: none; stroke-width: 7; opacity: 0.6; }
.lens-cta-foot { left: 50%; top: 50%; --w: clamp(120px, 26cqw, 190px); padding: calc(var(--w) * 0.1); }
.lens-cta-foot .lens-cta-act { font-size: clamp(1rem, 3.5cqw, 1.5rem); }
.footer-grid { max-width: 1360px; margin-inline: auto; display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 2.5rem; align-items: start; }
.brand-foot { margin-bottom: 0.75rem; }
.brand-foot .brand-name { font-size: 1.6rem; }
.brand-foot .brand-mark { width: 36px; height: 36px; }
.contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }
.contact li { display: flex; gap: 0.8rem; align-items: center; }
.contact .ico { color: var(--color-amber); --color-lens: var(--color-amber); }
.foot-hours .fact-k { margin-bottom: 0.2rem; }
.legal { margin-top: 1rem; color: var(--color-muted); font-size: 0.92rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.fiktiv { max-width: 1360px; margin: 3rem auto 0; padding-top: 1.25rem; border-top: 1px solid var(--color-border-strong); font-size: 0.82rem; color: var(--color-muted); }

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
  :root { --header-h: 60px; --margin-x: 20px; }
  .hero-art { max-width: max(375px, calc((100svh - var(--header-h) - 260px) * 0.9146)); margin-inline: auto; }
  .site-nav { display: none; }
  .site-header { gap: 0.5rem; }
  .brand-name { font-size: 0.98rem; }
  .brand-mark { width: 24px; height: 24px; }
  .btn-small { margin-inline-start: auto; padding-inline: 0.85rem; font-size: 0.9rem; white-space: nowrap; }
  .brand { gap: 0.4rem; }
  .art-wide, .lens-label, .hero-art > .lens-cta { display: none; }
  .art-tall { display: block; }
  .hero-art { aspect-ratio: auto; width: 100%; }
  .hero-h1 { aspect-ratio: 375 / 410; }
  .hero-strip { grid-template-columns: minmax(0, 1fr) auto; row-gap: 1.25rem; padding-bottom: 4rem; min-height: 0; }
  .orient { grid-column: 1 / -1; }
  .visit { grid-column: 1 / -1; }
  .btn-mobile-cta { display: inline-flex; grid-column: 1; min-height: 56px; }
  .pause { grid-column: 2; align-self: center; }
  .orient-h { font-size: 1.4rem; }
  .orient-t { font-size: 1.05rem; }

  .sec { padding-top: 5rem; padding-bottom: 5.5rem; }
  .sec-grid, .book-grid, .footer-grid, .pakete-grid, .sortiment-grid, .closing { grid-template-columns: minmax(0, 1fr); }
  /* The recurring tide line: one large dried ring per colour band, cropped differently each time, so the bands read as one wet table. */
.tide { position: absolute; z-index: 1; pointer-events: none; aspect-ratio: 1; border-radius: 50%; border: clamp(7px, 0.9vw, 13px) solid; filter: url(#stainD); opacity: 0.55; }
.tide-sauer { width: clamp(240px, 24vw, 360px); right: -5vw; top: 3%; border-color: color-mix(in oklch, var(--color-sauer) 62%, var(--color-ground)); }
.tide-suess { width: clamp(300px, 34vw, 520px); left: 3vw; bottom: calc(clamp(300px, 34vw, 520px) * -0.72); border-color: color-mix(in oklch, var(--color-suess) 60%, var(--color-ground)); }
.tide-amber { width: clamp(300px, 30vw, 460px); right: -8vw; bottom: -4%; border-color: color-mix(in oklch, var(--color-amber) 60%, var(--color-ground)); }

.h-sec { font-size: clamp(2.1rem, 10.5vw, 3.3rem); }
  .h-days { grid-template-columns: max-content; font-size: calc((100vw - 40px) / 6.3); row-gap: 0.12em; }
  .d-small { font-size: 0.5em; }
  ul.visit-facts { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .price-lens { width: min(100%, 300px); }
  .sec-lead, .orient-t { max-width: none; }
  .sortiment-head .h-sec { font-size: clamp(1.9rem, 9.4vw, 3.2rem); text-wrap: wrap; }
  .sec > .book-caption { position: relative; left: auto; bottom: auto; margin-top: 2rem; }
  .tide { width: 72vw; border-width: 7px; }
  .tide-sauer { right: -44vw; top: 1%; }
  .tide-suess { left: auto; right: -40vw; top: auto; bottom: -18%; }
  .tide-amber { right: auto; left: -44vw; top: 3%; bottom: auto; }
  .fact-big { font-size: 2.1rem; }
  .fields { grid-template-columns: 1fr; }
  .seam-spill { height: 80px; top: -32px; }
  .seam-stain-left { --d: 78vw; --rise: 0.24; left: -26vw; }
  .sec-sauer { padding-bottom: calc(78vw * 0.24 + 3rem); }
  .seam-stain-right { --d: 34vw; right: 8vw; }
  .book-photo { aspect-ratio: 4 / 5; }
  .book-photo::after { background: linear-gradient(180deg, var(--color-ground) 0%, oklch(0.21 0.055 350 / 0.9) 45%, oklch(0.21 0.055 350 / 0.6) 100%); }
  .day-picker { --face: min(46vw, 172px); margin-inline: auto; }
  .day-fr { margin-inline-start: calc(-0.16 * var(--face)); }
  .day-do .day-face { padding-inline-end: calc(0.14 * var(--face)); }
  .day-fr .day-face { padding-inline-start: calc(0.14 * var(--face)); }
  .day-lens { width: calc(0.14 * var(--face)); }
  .crate { width: min(100%, 340px); }
  .closing-art { max-width: 420px; }
}

@media (forced-colors: active) {
  .btn, .lens-cta { border: 2px solid ButtonText; }
  .day-face::before { border-color: ButtonText; }
  .day input:checked + .day-face { outline: 4px solid Highlight; }
}
@media print {
  body::after, .seam, .pause { display: none; }
}

@media (max-width: 420px) {
  .xs-hide { display: none; }
  .xs-show { display: inline; }
  :root { --margin-x: 16px; }
  .brand-name { font-size: 0.86rem; }
  .brand-mark { width: 22px; height: 22px; }
  .btn-small { padding-inline: 0.7rem; font-size: 0.84rem; min-height: 40px; }
  .site-header { gap: 0.4rem; }
}

/* Phone menu: native details, no script needed */
.mobile-menu { display: none; }
@media (max-width: 900px) {
  .mobile-menu { display: block; position: relative; }
  .mobile-menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid var(--color-border-strong); border-radius: 50%; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .menu-bars { width: 18px; height: 2px; background: var(--color-light); box-shadow: 0 6px 0 var(--color-light), 0 -6px 0 var(--color-light); }
  .mobile-menu nav { position: absolute; right: 0; top: calc(100% + 12px); width: min(78vw, 300px); display: grid; background: var(--color-ground-raised); border: 1.5px solid var(--color-border-strong); border-radius: 18px; padding: 0.5rem; z-index: 70; }
  .mobile-menu nav a { padding: 0.9rem 1rem; text-decoration: none; font-weight: 700; border-radius: 12px; }
  .mobile-menu nav a:active { background: var(--color-amber); color: var(--color-ground); }
}