/* Motion: reveals once per element, a header that compacts and steps aside, a calm mobile menu.
   Hidden pre-states exist only under html.st-reveal, which strommer.js sets after marking the elements that start
   below the first screen; without JavaScript everything is visible and nothing that was painted disappears.
   Reduced motion: nothing moves (the rules sit in no-preference queries, and jQuery.fx.off stops Uncode's). */

/* ---- The page headline on the first screen: lines rise through a mask on load (CSS only) ---- */
/* The mask only works vertically; its sides stay .6em out because the end state is kept (fill-mode both), and a
   hanging quote (.st-hang) starts .52em left of the line: a narrower side cut the „ in half for good. */
@keyframes st-rise {
  from { clip-path: inset(-.4em -.6em 100% -.6em); transform: translateY(100%); }
  to { clip-path: inset(-.4em -.6em -.45em -.6em); transform: none; }
}
@keyframes st-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .uncode_text_column h1:not(:has(.st-line)),
  .uncode_text_column h1 .st-line {
    animation: st-rise var(--st-reveal) var(--st-ease) 80ms both;
  }
  .uncode_text_column h1 .st-line:nth-child(2) { animation-delay: 160ms; }
  .uncode_text_column h1 .st-line:nth-child(n+3) { animation-delay: 240ms; }
  .st-opening .uncode_text_column:not(:first-child),
  .st-opening .btn-container,
  .uncode_text_column h1 ~ p {
    animation: st-fade var(--st-standard) var(--st-ease) 240ms both;
  }
}

/* ---- Reveals for what starts below the first screen ---- */
@media (prefers-reduced-motion: no-preference) {
  /* Headlines: lines rise through a mask, 80 ms apart */
  html.st-reveal .st-r-head:not(.st-rv-split):not(.is-in) { opacity: 0; }
  /* flex items do not collapse margins, so the split heading keeps exactly its own height */
  .st-rv-split { display: flex !important; flex-direction: column; }
  .st-rv-line {
    display: block;
    overflow: clip;
    overflow-clip-margin: .24em;  /* umlauts above and g, ß below paint outside the mask without changing its height */
  }
  html.st-reveal .st-r-head:not(.is-in) .st-rv-line > span {
    display: block;
    transform: translateY(135%);
  }
  .st-r-head.is-in .st-rv-line > span {
    display: block;
    transition: transform var(--st-reveal) var(--st-ease);
    transition-delay: calc(min(var(--st-i, 0), 2) * 80ms);
  }

  /* Photographs: open from a slight inset while settling from 1.06 to 1 */
  html.st-reveal .st-r-media:not(.is-in) .uncode-single-media-wrapper {
    clip-path: inset(6%);
    opacity: 0;
  }
  /* (opacity only covers the first 150 ms, so the photo never pops in as a hard-edged small rectangle) */
  html.st-reveal .st-r-media:not(.is-in) .uncode-single-media-wrapper img { scale: 1.06; }
  html.st-reveal .st-r-media.st-band:not(.is-in) .uncode-single-media-wrapper { clip-path: inset(0 6%); }
  .st-r-media.is-in .uncode-single-media-wrapper {
    clip-path: inset(-1px);
    transition: clip-path var(--st-reveal-photo) var(--st-ease), opacity 150ms linear;
  }
  .st-r-media.is-in .uncode-single-media-wrapper img {
    transition: scale calc(var(--st-reveal-photo) + 200ms) var(--st-ease);
  }
  .st-r-media.st-later.is-in .uncode-single-media-wrapper,
  .st-r-media.st-later.is-in .uncode-single-media-wrapper img { transition-delay: 120ms; }

  /* The limestone shelf opens like a photograph */
  html.st-reveal ul.st-wines.st-r-shelf:not(.is-in)::before,
  html.st-reveal ul.st-wines.st-r-shelf:not(.is-in)::after { clip-path: inset(-2px 100% -2px -2px); }
  ul.st-wines.st-r-shelf.is-in::before,
  ul.st-wines.st-r-shelf.is-in::after { clip-path: inset(-2px); transition: clip-path 1100ms var(--st-ease-inout); }
  ul.st-wines.st-r-shelf.is-in::after { transition-delay: 120ms; }

  /* The footer emblem draws from left to right, once */
  html.st-reveal .st-r-draw:not(.is-in) { clip-path: inset(0 100% 0 0); }
  .st-r-draw.is-in { clip-path: inset(0 0 0 0); transition: clip-path 1400ms var(--st-ease-inout); }
}
@media print {
  .st-r, .st-r * { opacity: 1 !important; clip-path: none !important; transform: none !important; scale: none !important; }
}

/* ---- Hover on photographs that link somewhere (wine bottles, shop tiles): a slow, small lift ---- */
.st-wine .st-plate img,
.tmb-woocommerce .t-entry-visual img {
  transition: scale 300ms var(--st-ease-settle) !important;
}
.st-wine:focus-within .st-plate img,
.tmb-woocommerce:focus-within .t-entry-visual img {
  scale: 1.03;
  transition: scale var(--st-standard) var(--st-ease) !important;
}
@media (hover: hover) {
  .st-wine:hover .st-plate img,
  .tmb-woocommerce:hover .t-entry-visual img {
    scale: 1.03;
    transition: scale var(--st-standard) var(--st-ease) !important;
  }
}

/* ---- Header: opaque; compacts after the first scroll; steps aside going down, returns going up ---- */
#masthead,
.menu-wrapper .menu-container {
  background-color: var(--st-label) !important;
}
.menu-wrapper.menu-sticky {
  height: var(--st-header-h) !important;          /* Uncode's spacer, recomputed by its script otherwise */
}
@media (prefers-reduced-motion: no-preference) {
  .menu-wrapper .menu-container {
    transition: translate var(--st-exit) var(--st-ease-exit), box-shadow var(--st-quick) ease-out !important;
  }
  html:not(.st-header-hidden) .menu-wrapper .menu-container {
    transition: translate var(--st-standard) var(--st-ease), box-shadow var(--st-quick) ease-out !important;
  }
  .menu-wrapper .logo-container,
  .menu-horizontal .menu-smart > li > a {
    transition: padding var(--st-exit) var(--st-ease-inout), height var(--st-exit) var(--st-ease-inout), color var(--st-quick) ease-out !important;
  }
}
html.st-header-compact .menu-wrapper .menu-container {
  box-shadow: 0 1px 0 var(--st-line) !important;
}
@media (min-width: 960px) {
  html.st-header-compact .menu-wrapper .logo-container {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}
@media (max-width: 959px) {
  html.st-header-compact .menu-wrapper .logo-container {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
}
html.st-header-hidden:not(.st-menu-open) .menu-wrapper .menu-container:not(:focus-within) {
  translate: 0 -101%;
}
/* an anchor target lands under the compact header (77 px; 64 px on phones), which is what a jump leaves showing */
html { scroll-padding-top: 101px; }
@media (max-width: 959px) {
  html { scroll-padding-top: 84px; }
}

/* ---- Mobile menu: a full panel under the bar; fades in, items rise in order; the page behind is locked ---- */
@media (max-width: 959px) {
  .main-menu-container {
    position: fixed !important;
    top: var(--st-header-h) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding: 12px var(--st-m, 20px) 48px !important;
    background: var(--st-label) !important;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--st-exit) var(--st-ease-exit), visibility 0s linear var(--st-exit);
  }
  html.st-menu-open .main-menu-container {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--st-quick) var(--st-ease), visibility 0s;
  }
  /* the header stays compact while the menu is open, so the panel starts where the bar ends */
  html.st-header-compact .main-menu-container { top: 64px !important; }
  /* only the root: an overflow on body would make it its own scroll box and jump the page to the top */
  html.st-menu-open {
    overflow: hidden !important;
  }
  .main-menu-container .menu-smart > li {
    transition: opacity var(--st-exit) var(--st-ease-exit), translate var(--st-exit) var(--st-ease-exit);
  }
  html:not(.st-menu-open) .main-menu-container .menu-smart > li {
    opacity: 0;
    translate: 0 8px;
  }
  html.st-menu-open .main-menu-container .menu-smart > li {
    transition: opacity var(--st-standard) var(--st-ease), translate var(--st-standard) var(--st-ease);
    transition-delay: calc(120ms + var(--st-n, 0) * 30ms);
  }
  html.st-menu-open .main-menu-container .menu-smart > li:nth-child(2) { --st-n: 1; }
  html.st-menu-open .main-menu-container .menu-smart > li:nth-child(3) { --st-n: 2; }
  html.st-menu-open .main-menu-container .menu-smart > li:nth-child(4) { --st-n: 3; }
  html.st-menu-open .main-menu-container .menu-smart > li:nth-child(5) { --st-n: 4; }
  html.st-menu-open .main-menu-container .menu-smart > li:nth-child(n+6) { --st-n: 5; }
  /* hamburger <-> X in under 300 ms (Uncode waits .6 s) */
  .mobile-menu-button .lines,
  .mobile-menu-button .lines::before,
  .mobile-menu-button .lines::after,
  .mobile-menu-button .lines span {
    transition-duration: 160ms !important;
    transition-delay: 0s !important;
    transition-timing-function: var(--st-ease-inout) !important;
  }
}

/* ---- Desktop submenu: fades in with a 6 px drop where the browser can animate display ---- */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  .menu-horizontal .menu-smart .drop-menu {
    transition: opacity var(--st-quick) var(--st-ease), translate var(--st-quick) var(--st-ease);
  }
  @starting-style {
    .menu-horizontal .menu-smart .drop-menu {
      opacity: 0;
      translate: 0 -6px;
    }
  }
}

/* ---- Speisekarte tabs: panes share one cell, so switching never moves the page; the new pane fades in ---- */
.st-menu .tab-content {
  display: grid !important;
}
.st-menu .tab-content > .tab-pane {
  grid-area: 1 / 1;
  display: block !important;
  visibility: hidden;
  opacity: 0;
}
.st-menu .tab-content > .tab-pane.active {
  visibility: visible;
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .st-menu .tab-content > .tab-pane.active { transition: opacity var(--st-quick) var(--st-ease); }
}

/* ---- Shop filter: the grid dims while new results load ---- */
.st-loading .isotope-container,
.st-loading .cssgrid-container {
  opacity: .45;
  transition: opacity var(--st-quick) ease-out;
}

/* ---- Uncode's custom cursor: never (removed from the pages by apply.sh; this is the safety net) ---- */
#uncode-custom-cursor,
#uncode-custom-cursor-pilot {
  display: none !important;
}
html, body, a, button { cursor: auto; }
a, button, [role="button"] { cursor: pointer; }

/* ---- Reduced motion: nothing moves, nothing waits ---- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==== Art-direction pass (2026-11-03): one hover language, quieter transitions ==== */

/* ---- Between pages: a dissolve, the header stays where it is (Chrome, Edge, Safari 18.2+; others just load) ---- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  #masthead { view-transition-name: st-header; }
  ::view-transition-group(st-header) { animation: none; }
  ::view-transition-old(root) { animation: st-vt-out 180ms var(--st-ease-exit) both; }
  ::view-transition-new(root) { animation: st-vt-in 320ms var(--st-ease) both; }
}
@keyframes st-vt-out { to { opacity: 0; } }
@keyframes st-vt-in { from { opacity: 0; } }

/* ---- Main menu: the underline draws fast (half of it in 30 ms) and in gold; it retracts to the right ---- */
@media (min-width: 960px) {
  .menu-horizontal .navbar-main .menu-smart > li.menu-item > a::after {
    background: var(--st-gold);
    transition: transform var(--st-exit) var(--st-ease-inout);
  }
  .menu-horizontal .navbar-main .menu-smart > li.menu-item > a:is(:hover, :focus-visible)::after,
  .menu-horizontal .navbar-main .menu-smart > li.menu-item > a[aria-expanded="true"]::after {
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform var(--st-draw) var(--st-ease);
  }
  /* the dropdown: cream words, a gold line under the one pointed at, no tinted row; it closes with a short fade */
  html body #masthead .menu-smart .drop-menu a,
  html body #masthead .menu-smart .drop-menu a:is(:hover, :focus, :focus-visible, :active) {
    background-color: transparent !important;
  }
  html body #masthead .menu-smart .drop-menu a {
    text-decoration: underline 1px transparent !important;
    text-underline-offset: .32em;
    transition: color var(--st-quick) var(--st-ease), text-decoration-color var(--st-quick) var(--st-ease) !important;
  }
  html body #masthead .menu-smart .drop-menu a:is(:hover, :focus-visible) {
    color: var(--st-cream) !important;
    text-decoration-color: var(--st-gold) !important;
  }
  html body #masthead .menu-smart .drop-menu a:focus:not(:focus-visible) { color: var(--st-cream-soft) !important; }
  html body #masthead .menu-smart .drop-menu .current-menu-item > a { color: var(--st-gold-text) !important; }
}

/* ---- Header icons (search, cart) answer the pointer like the words ---- */
#masthead .search-icon > a,
#masthead .uncode-cart > a,
#masthead .mobile-additional-icons a {
  transition: color var(--st-quick) var(--st-ease) !important;
}
@media (hover: hover) {
  #masthead .search-icon > a:hover,
  #masthead .uncode-cart > a:hover,
  #masthead .mobile-additional-icons a:hover { color: var(--st-gold-text) !important; }
  #masthead .search-icon > a:hover i,
  #masthead .uncode-cart > a:hover i { color: inherit !important; }
}

/* ---- Focus rings in the header ring the word, not the 98 px tall link box (its top edge was off-screen) ---- */
@media (min-width: 960px) {
  .menu-horizontal .navbar-main .menu-smart > li.menu-item > a:focus-visible { outline: 0 !important; }
  .menu-horizontal .navbar-main .menu-smart > li.menu-item > a:focus-visible::before {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: calc(50% - 1.05em);
    bottom: calc(50% - 1.25em);
    outline: 2px solid var(--st-gold-text);
    pointer-events: none;
  }
  .menu-horizontal .navbar-main .menu-smart > li.menu-item:last-child > a:focus-visible::before { right: -8px; }
}

/* ---- Speisekarte tabs: the new line draws while the old one leaves quickly; the panes cross-fade ---- */
.st-menu .nav-tabs > li > a,
.st-menu .tab-container .nav-tabs > li > a {
  transition: color var(--st-quick) var(--st-ease), background-size 160ms var(--st-ease-inout) !important;
}
.st-menu .nav-tabs > li.active > a {
  transition: color var(--st-quick) var(--st-ease), background-size var(--st-draw) var(--st-ease) !important;
}
@media (hover: hover) {
  .st-menu .nav-tabs > li > a:hover {
    transition: color var(--st-quick) var(--st-ease), background-size var(--st-draw) var(--st-ease) !important;
  }
}
@media (hover: none) {
  .st-menu .nav-tabs > li:not(.active) > a:hover { color: var(--st-cream-soft) !important; background-size: 0 1px !important; }
}
@media (prefers-reduced-motion: no-preference) {
  .st-menu .tab-content > .tab-pane { transition: opacity 120ms var(--st-ease-exit), visibility 0s linear 120ms; }
  .st-menu .tab-content > .tab-pane.active { transition: opacity 240ms var(--st-ease) 60ms, visibility 0s; }
}

/* ---- Film loops: the photo dissolves into the film, evenly, after the headline has settled (strommer.js) ---- */
.st-opening .background-wrapper video.st-film-loop,
.st-loop-frame video.st-film-loop {
  transition: opacity var(--st-dissolve) linear !important;
}
.st-loop-toggle { transition: color var(--st-quick) var(--st-ease) !important; }

/* ---- Search overlay: in 300 ms, out 240 ms, no sequential wait ---- */
.overlay.overlay-search {
  transition: opacity var(--st-exit) var(--st-ease-exit), visibility 0s linear var(--st-exit) !important;
}
.overlay.overlay-search.open {
  transition: opacity 300ms var(--st-ease), visibility 0s !important;
}
.overlay.overlay-search * { transition-delay: 0s !important; }

/* ---- Film modal: the dark comes up quickly and leaves quickly ---- */
.lg-backdrop { transition: opacity var(--st-exit) var(--st-ease-exit) !important; }
.lg-backdrop.in { transition: opacity 300ms var(--st-ease) !important; }

/* ---- Press: links dim for a moment, buttons give a little (a release settles back) ---- */
a.st-more:active,
.menu-smart a:active,
.site-footer a:active,
.uncode_text_column a:not([class]):active {
  opacity: .7;
  transition: opacity var(--st-instant) linear;
}
a.st-btn:active,
.st-btn:active { transition: transform var(--st-instant) var(--st-ease), background-color var(--st-quick) var(--st-ease); }