/* st-* content components for WPBakery rows, columns and text blocks ("Weingarten und Keller").
   Use them via "Extra class name" (el_class) or as classes inside text blocks. List in AGENT.md §8. */

/* ---- Sections ---- */
.vc_row.st-section > .row-parent,
.st-section > .row {
  padding-top: var(--st-section) !important;
  padding-bottom: var(--st-section) !important;
}
.vc_row.st-section--top0 > .row-parent { padding-top: 0 !important; }
.vc_row.st-section--bottom0 > .row-parent { padding-bottom: 0 !important; }
.vc_row.st-section--tight > .row-parent {
  padding-top: var(--st-space-l) !important;
  padding-bottom: var(--st-space-l) !important;
}
.vc_row.st-flush > .row-parent {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.st-deep,
.vc_row.st-deep {
  background-color: var(--st-label-3) !important;
}

/* ---- Text roles ---- */
.st-lede,
.st-lede p {
  font-size: var(--st-fs-lede) !important;
  line-height: 1.34 !important;
  letter-spacing: -.006em;
  font-variation-settings: "opsz" 24;
  max-width: var(--st-measure-lede);
  text-wrap: pretty;
}
.st-soft,
.st-soft p { color: var(--st-cream-soft) !important; }
.st-meta,
.st-meta p,
.st-caption,
.st-caption p,
.uncode-single-media .st-caption {
  font-family: var(--st-sans);
  font-size: var(--st-fs-meta) !important;
  font-weight: 460;
  line-height: 1.45;
  letter-spacing: .012em;
  color: var(--st-cream-soft);
  max-width: 60ch;
}
.st-caption,
.st-caption p { margin-top: 12px !important; }
.st-caption--right p { margin-left: auto; text-align: right; }
.st-wine-name,
.st-wine-name a {
  font-style: italic;
}
.st-indent { padding-left: calc((100% + var(--st-col-gap)) / 6); }

/* A heading followed by its text in the same block: the space belongs to the heading */
.uncode_text_column h1 + p,
.uncode_text_column h2 + p,
.uncode_text_column h2 + .st-lede {
  margin-top: var(--st-space-m) !important;
}
.uncode_text_column h3 + p { margin-top: 14px !important; }

/* ---- Actions ---- */
/* Text link with an underline that draws on hover: <a class="st-more" href="…">Unsere Geschichte</a> */
.st-actions,
.st-actions p,
p.st-actions-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 36px;
  max-width: none !important;
}
.st-actions { margin-top: var(--st-space-m); }
.st-actions p,
p.st-actions-inline { margin: 0; }
p.st-actions-inline { margin-top: var(--st-space-m) !important; }

a.st-more,
.st-film .btn,
a.btn.st-film {
  position: relative;
  display: inline-block;
  padding: 6px 0 !important;
  font-family: var(--st-sans) !important;
  font-size: var(--st-fs-ui) !important;
  font-weight: 480 !important;
  letter-spacing: .012em !important;
  line-height: 1.3 !important;
  color: var(--st-cream) !important;
  text-decoration: none !important;
  /* the resting line is the inline links' 38 % cream; on hover it hands over to the gold line (Krug's gesture):
     it leaves to the right while the gold draws in from the left */
  background: linear-gradient(rgba(236, 228, 214, .38), rgba(236, 228, 214, .38)) no-repeat right bottom / 100% 1px !important;
  transition: background-size var(--st-exit) var(--st-ease-inout) !important;
  border: 0 !important;
  min-height: 0 !important;
  text-transform: none !important;
}
a.st-more::after,
.st-film .btn::after,
a.btn.st-film::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--st-gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--st-exit) var(--st-ease-inout);
}
a.st-more:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform var(--st-draw) var(--st-ease);
}
a.st-more:focus-visible { background-size: 0 1px !important; transition: background-size var(--st-draw) var(--st-ease) !important; }
@media (hover: hover) {
  a.st-more:hover::after,
  .st-film .btn:hover::after,
  a.btn.st-film:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform var(--st-draw) var(--st-ease);
  }
  a.st-more:hover,
  .st-film .btn:hover,
  a.btn.st-film:hover { background-size: 0 1px !important; transition: background-size var(--st-draw) var(--st-ease) !important; }
}
a.st-more:hover,
.st-film .btn:hover,
a.btn.st-film:hover { color: var(--st-cream) !important; }

/* Button: cream, square, Sofia. <a class="st-btn" href="…">Zu den Weinen</a>; st-btn--line is the outline */
a.st-btn,
.st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 1.4em;
  border: 1px solid var(--st-cream);
  background: var(--st-cream);
  color: var(--st-label) !important;
  font: 560 var(--st-fs-ui)/1.2 var(--st-sans);
  letter-spacing: .012em;
  text-decoration: none !important;
  border-radius: 0 !important;
  white-space: nowrap;
  /* back to rest on the settle curve; the fill comes in on the enter curve (below) */
  transition: background-color var(--st-exit) var(--st-ease-settle), border-color var(--st-exit) var(--st-ease-settle), transform var(--st-quick) var(--st-ease-settle);
}
@media (hover: hover) {
  a.st-btn:hover,
  .st-btn:hover {
    background: var(--st-gold);
    border-color: var(--st-gold);
    color: var(--st-label) !important;
    transition: background-color var(--st-quick) var(--st-ease), border-color var(--st-quick) var(--st-ease), transform var(--st-quick) var(--st-ease-settle);
  }
}
a.st-btn:active,
.st-btn:active { transform: scale(.98); }
a.st-btn--line,
.st-btn--line {
  background: transparent;
  color: var(--st-cream) !important;
  border-color: rgba(236, 228, 214, .45);
}
@media (hover: hover) {
  a.st-btn--line:hover,
  .st-btn--line:hover {
    background: transparent;
    border-color: var(--st-cream);
    color: var(--st-cream) !important;
  }
}
a.st-btn--small,
.st-btn--small { min-height: 44px; padding: 0 1.05em; }

/* ---- Lists set as text: no rules, no boxes ---- */
/* Facts: <dl class="st-facts"><dt>Geöffnet</dt><dd>Donnerstag bis Samstag, 16–23 Uhr</dd>…</dl> */
dl.st-facts,
dl.st-hours {
  display: grid;
  grid-template-columns: minmax(7.5em, max-content) 1fr;
  gap: 12px 28px;
  align-items: baseline;            /* the small label sits on the value's first baseline, not above it */
  margin: 0;
  max-width: 34rem;
}
dl.st-facts dt,
dl.st-hours dt {
  margin: 0;
  padding-top: 0;
  font: 460 var(--st-fs-meta)/1.4 var(--st-sans);
  letter-spacing: .012em;
  color: var(--st-cream-soft);
  font-variant-numeric: lining-nums tabular-nums;
}
dl.st-facts dd,
dl.st-hours dd {
  margin: 0;
  line-height: 1.45;
}
dl.st-facts + p,
dl.st-hours + p { margin-top: var(--st-space-m) !important; }

/* Plain list: <ul class="st-list"> lines of text, no bullets, no rules */
ul.st-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 18px 0 0 !important;
}
ul.st-list li {
  position: relative;
  padding: 0;
  margin: 0 0 .45em !important;
}
ul.st-list li::before {
  content: "–" !important;
  position: absolute;
  left: -1em;                       /* the dash hangs in the gutter; the text keeps the heading's edge */
  top: 0;
  color: var(--st-cream-soft);
  display: block !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
}

/* Timeline: years in the sans, text beside them */
dl.st-timeline {
  display: grid;
  grid-template-columns: minmax(7em, max-content) 1fr;
  gap: 18px 32px;
  align-items: baseline;
  margin: 0;
  max-width: 40rem;
}
dl.st-timeline dt,
dl.st-timeline dd { margin: 0; }
dl.st-timeline dt {
  font: 480 var(--st-fs-ui)/1.5 var(--st-sans);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--st-gold-text);
}

/* ---- Family portraits: the three line drawings large, side by side, names and lines below ---- */
ul.st-portraits {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--st-space-m) var(--st-col-gap, 32px);
}
ul.st-portraits > li {
  margin: 0 !important;
}
ul.st-portraits > li::before { display: none !important; }
ul.st-portraits img {
  display: block;
  width: min(100%, 300px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  margin: 0 0 clamp(18px, 2vw, 32px) -4%;   /* the drawings have air on their left; this sets the line on the text edge */
  opacity: .92;
}
ul.st-portraits h3 {
  font-size: var(--st-fs-h3) !important;
  margin: 0 0 10px !important;
}
ul.st-portraits p {
  margin: 0;
  color: var(--st-cream-soft);
  max-width: 34ch;
}
@media (max-width: 767px) {
  ul.st-portraits { grid-template-columns: 1fr; gap: var(--st-space-l); }
  ul.st-portraits img { width: min(72%, 260px) !important; }
}

/* ---- Photographs ---- */
/* On a vc_single_image: st-photo fills its column; ratio classes crop; st-pos-* set the focal point */
.st-photo .uncode-single-media-wrapper,
.st-photo .uncode-single-media {
  overflow: hidden;
}
.st-photo img,
.st-photo .uncode-single-media img {
  display: block;
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
}
.st-photo--45 img { aspect-ratio: 4 / 5; }
.st-photo--32 img { aspect-ratio: 3 / 2; }
.st-photo--11 img { aspect-ratio: 1 / 1; }
.st-photo--219 img { aspect-ratio: 21 / 9; }
.st-photo--31 img { aspect-ratio: 3 / 1; }
@media (max-width: 767px) {
  .st-photo--219 img,
  .st-photo--31 img { aspect-ratio: 4 / 5; }
  .st-photo--32.st-photo--m45 img { aspect-ratio: 4 / 5; }
}
.st-pos-l img { object-position: 22% 50%; }
.st-pos-r img { object-position: 78% 50%; }
.st-pos-t img { object-position: 50% 25%; }
.st-pos-b img { object-position: 50% 80%; }
.st-pos-hands img { object-position: 72% 70%; }

/* Ausblick: the full-bleed band (vc_single_image in an st-flush row with st-bleed columns) */
.st-band img { width: 100% !important; }

/* Limestone plate behind white-background packshots */
.st-plate {
  display: block;
  background: var(--st-plate) !important;
  overflow: hidden;
}
.st-plate img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 700ms var(--st-ease);
}

/* ---- Regal: the wines standing on one limestone band. [st_weine] ---- */
ul.st-wines {
  --st-shelf: clamp(260px, 26vw, 440px);
  --st-shelf: round(clamp(260px, 26vw, 440px), 1px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--st-col-gap, 32px);
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
ul.st-wines::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--st-edge, 0px));
  right: calc(-1 * var(--st-edge, 0px));
  top: 0;
  height: var(--st-shelf);
  background: var(--st-plate);
  z-index: 0;
  transform: translateZ(0);         /* its own layer snaps to whole pixels like the plates: no grey hairline in the gutters */
}
.st-wine {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
}
.st-wine::before { display: none !important; }
.st-wine .st-plate {
  height: var(--st-shelf);
  background: var(--st-plate) !important;   /* the same stone as the band: multiply needs it under the image */
}
.st-wine .st-plate img {
  object-fit: contain;
  object-position: 50% 100%;
  padding: 7% 0 6%;
  transform-origin: 50% 100%;
}
.st-wine .st-plate--wide img {
  object-fit: cover;
  object-position: 50% 42%;
  padding: 0;
}
/* hover lift: motion.css (scale) */
.st-wine__name {
  font-size: var(--st-fs-h3) !important;
  margin: 26px 0 8px !important;
}
.st-wine__name a { text-decoration: none; color: var(--st-cream); }
.st-wine__name a:hover { color: var(--st-cream); }
.st-wine__name em { font-weight: 450; margin: 0; }
.st-wine__meta {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--st-cream-soft);
  margin: 0 0 18px !important;
  max-width: 30ch;
}
.st-wine__buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: auto;
}
.st-price,
.st-wine__buy .price {
  font: 580 var(--st-fs-price)/1.1 var(--st-sans);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--st-cream);
}
.st-price .woocommerce-price-suffix {
  display: block;
  font-size: var(--st-fs-meta);
  font-weight: 460;
  color: var(--st-cream-soft);
  margin-top: 5px;
}
/* Uncode wraps prices in <ins class="h3">: keep the card's price style */
.st-price ins,
.st-price .h3 {
  font: inherit !important;
  letter-spacing: 0 !important;
  text-decoration: none;
}
.st-wine__buy .added_to_cart { display: none !important; }
.st-wine__buy .st-btn,
.st-wine__buy .button.st-btn {
  min-height: 44px !important;
  padding: 0 .95em !important;
  margin: 0 !important;
}

@media (max-width: 1100px) {
  ul.st-wines { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--st-space-l); }
  ul.st-wines::before { display: none; }
  .st-wine .st-plate { background: var(--st-plate) !important; }
}
@media (max-width: 600px) {
  ul.st-wines { --st-shelf: 58vw; gap: var(--st-space-m) 14px; }
  .st-wine__name { font-size: 1.25rem !important; }
  .st-wine__meta { font-size: .95rem; }
  .st-wine__buy { flex-direction: column; align-items: stretch; }
  .st-wine__buy .st-btn { width: 100%; }
}

/* ---- Opening: the first row with a full-bleed photo; the headline sits where the photo fades into the ground ---- */
.st-opening { position: relative; }
.st-opening .row-background .background-inner,
.st-opening .background-inner { background-position: 50% 60% !important; }
.st-opening .block-bg-overlay {
  display: block !important;
  background: linear-gradient(to top, var(--st-label) 0%, rgba(19, 16, 13, .86) 20%, rgba(19, 16, 13, .25) 52%, rgba(19, 16, 13, .1) 100%) !important;
  opacity: 1 !important;
}
.st-opening h1 { max-width: 12em; }
.st-opening .st-lede { max-width: 30em; }
@media (max-width: 767px) {
  .st-opening .row-background .background-inner,
  .st-opening .background-inner { background-position: 64% 60% !important; }
  .st-opening .block-bg-overlay {
    background: linear-gradient(to top, var(--st-label) 0%, var(--st-label) 30%, rgba(19, 16, 13, .55) 58%, rgba(19, 16, 13, .15) 100%) !important;
  }
}

/* Two columns inside one text block */
.st-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 900px) { .st-split { grid-template-columns: 1fr; } }

/* ---- Footer ---- */
.st-emblem {
  display: block;
  width: min(560px, 82%);
  aspect-ratio: 636 / 182;
  margin: 0 0 var(--st-space-l) !important;
  background: var(--st-cream);
  opacity: .9;
  -webkit-mask: url(../img/emblem.svg) no-repeat left center / contain;
  mask: url(../img/emblem.svg) no-repeat left center / contain;
  color: transparent;
  font-size: 0;
}
.st-footer-title,
.site-footer h2.st-footer-title {
  font: 460 var(--st-fs-meta)/1.4 var(--st-sans) !important;
  letter-spacing: .012em !important;
  color: var(--st-cream-soft) !important;
  margin: 0 0 12px !important;
}
.site-footer p,
.site-footer li {
  font-size: 1rem;
  line-height: 1.65;
}
.site-footer ul.st-plain {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.site-footer ul.st-plain li::before { display: none !important; }
.st-footer-base p {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  max-width: none !important;
  font: 460 var(--st-fs-meta)/1.4 var(--st-sans) !important;
  color: var(--st-cream-soft);
}

/* Partner list: logo on a plate, name, website */
ul.st-partners {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--st-space-m) var(--st-col-gap, 32px);
  list-style: none !important;
  padding: 0 !important;
  margin: var(--st-space-m) 0 0 !important;
}
ul.st-partners > li { margin: 0 !important; }
ul.st-partners > li::before { display: none !important; }
.st-partner__logo {
  display: grid;
  place-items: center;
  height: 128px;
  margin-bottom: 18px;
  background: var(--st-plate);
}
.st-partner__logo img {
  max-width: 64%;
  max-height: 64%;
  width: auto !important;
  height: auto !important;
  mix-blend-mode: multiply;
}
ul.st-partners h3 { font-size: 1.35rem !important; margin: 0 0 6px !important; }
ul.st-partners p { margin: 0; }
.st-partner__logo--dark { background: var(--st-label-3) !important; }
.st-partner__logo--dark img { mix-blend-mode: normal; }

/* Press images: photos with title and download link */
ul.st-press {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--st-space-m) var(--st-col-gap, 32px);
  list-style: none !important;
  padding: 0 !important;
  margin: var(--st-space-m) 0 0 !important;
}
ul.st-press > li { margin: 0 !important; }
ul.st-press > li::before { display: none !important; }
ul.st-press img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: 16px;
}
ul.st-press h3 { font-size: 1.3rem !important; margin: 0 0 4px !important; }
ul.st-press p { margin: 0; }

/* Form wrapper (text block around a CF7 form) */
.st-form { max-width: 40rem; }

/* Speisekarte (Heuriger): Uncode tabs and pricing lists as a typeset menu */
.st-menu .nav-tabs {
  border: 0 !important;
}
.st-menu .nav-tabs > li > a,
.st-menu .tab-container .nav-tabs > li > a {
  font-family: var(--st-sans) !important;
  font-size: var(--st-fs-ui) !important;
  font-weight: 480 !important;
  letter-spacing: .012em !important;
  text-transform: none !important;
  color: var(--st-cream-soft) !important;
  border: 0 !important;
  padding: 8px 0 !important;
  margin-right: 28px !important;
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1px !important;
  transition: color var(--st-quick) ease-out, background-size var(--st-standard) var(--st-ease-inout) !important;
}
.st-menu .nav-tabs > li.active > a,
.st-menu .nav-tabs > li > a:hover {
  color: var(--st-cream) !important;
  background-size: 100% 1px !important;
}
.st-menu .uncode-pricing-entry,
.st-menu .uncode-pricing-entry-title {
  font-family: var(--st-serif) !important;
  border: 0 !important;
}
.st-menu .uncode-pricing-entry-title,
.st-menu .uncode-pricing-entry h3,
.st-menu .uncode-pricing-entry h6 {
  font-family: var(--st-serif) !important;
  font-size: 1.25rem !important;
  font-weight: 480 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
  color: var(--st-cream) !important;
}
.st-menu .uncode-pricing-entry p,
.st-menu .uncode-pricing-entry-description {
  color: var(--st-cream-soft) !important;
}

/* Shop grid row: a little air between heading and grid */
.vc_row.st-shop-grid > .row-parent { padding-top: 24px !important; }

/* Small phones: facts and timelines stack instead of squeezing two columns */
@media (max-width: 420px) {
  dl.st-facts,
  dl.st-hours,
  dl.st-timeline { grid-template-columns: 1fr; gap: 4px 0; }
  dl.st-facts dd,
  dl.st-hours dd,
  dl.st-timeline dd { margin-bottom: 14px; }
}

/* ---- Helpers for the editorial grid ---- */
/* .st-pair on a row marks two photos as a pair: strommer.js reveals the second a beat later */
.st-pair { position: relative; }
.vc_row.st-top-l > .row-parent { padding-top: var(--st-space-l) !important; }
.vc_row.st-top-m > .row-parent { padding-top: var(--st-space-m) !important; }
.st-drop { margin-top: var(--st-space-l) !important; }
.st-actions--tight { margin-top: 10px; }
/* A small photo set into the end of a text column, right-aligned */
.uncode-single-media.st-inset {
  width: min(62%, 340px);
  margin: var(--st-space-l) 0 0 auto !important;
}
/* Captions under full-bleed photos keep to the page margin */
.uncode_text_column.st-caption--edge { padding: 0 var(--st-edge); text-align: right; max-width: none; }
.uncode_text_column.st-caption--edge-l { max-width: none; }
.uncode_text_column.st-caption--edge p { max-width: none; }
.uncode_text_column.st-caption--edge-l { padding: 0 var(--st-edge); }
.st-caption--right { text-align: right; }
.st-caption--right p { max-width: none; }
/* One outlier photo (cool lamps in the vault) graded warm to sit with the film stills */
.st-grade-warm img { filter: sepia(.2) saturate(1.08) brightness(.95) hue-rotate(-4deg); }
.st-vintage { font-style: normal; font-variant-numeric: lining-nums; }

/* The opening row uses the whole width like the grid (it stays an Uncode row because of its height logic) */
.vc_row.st-opening > .row,
.vc_row.st-opening > .row.limit-width {
  max-width: none !important;
  padding-left: var(--st-edge) !important;
  padding-right: var(--st-edge) !important;
}
.vc_row.st-opening .wpb_column { padding-left: 0 !important; padding-right: 0 !important; }
@media (max-width: 959px) {
  .vc_row.st-opening > .row,
  .vc_row.st-opening > .row.limit-width {
    padding-left: var(--st-edge) !important;
    padding-right: var(--st-edge) !important;
  }
  .st-opening .wpb_column { padding-left: 0 !important; padding-right: 0 !important; }
  .st-opening .st-caption--right { text-align: left; }
}

/* Wines in a part of the grid (not the full width): the shelf runs to the right window edge only */
.wpb_column:not(.st-s1):is([class*="st-s"]) ul.st-wines::before { left: 0; }
ul.st-wines:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
ul.st-wines:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Small photo set into the start of a column (left-aligned) */
.uncode-single-media.st-inset.st-inset--left { margin-left: 0 !important; margin-right: auto !important; }

/* Facts list across a wider column: labels get more room */
dl.st-facts--wide { max-width: 44rem; grid-template-columns: minmax(9em, max-content) 1fr; }

/* Footer: the emblem large, the address set like the page's text, the lists in the sans */
.st-footer .st-emblem { margin-bottom: var(--st-space-m) !important; }
.site-footer .st-footer-lede {
  font-size: var(--st-fs-lede) !important;
  line-height: 1.34 !important;
  font-variation-settings: "opsz" 24;
  margin-bottom: 18px !important;
}
.site-footer .st-plain li {
  font-family: var(--st-sans);
  font-size: var(--st-fs-ui);
  font-weight: 460;
  line-height: 1.5;
  padding: 3px 0;
}
.vc_row.st-footer-base-row > .row-parent {
  padding-top: var(--st-space-l) !important;
  padding-bottom: 36px !important;
}
@media (max-width: 959px) {
  .st-footer .wpb_column + .wpb_column { margin-top: 8px !important; }
}
/* Footer lists: Besuchen, Weine, Weingut, Kontakt. A line that is not a link (hours, "auch per WhatsApp") reads as a
   note to the link above it. Below 960 px the four lists sit two by two instead of one long stack. */
.site-footer .st-plain li.st-footer-note {
  color: var(--st-cream-soft);
  padding-top: 0;
}
.site-footer .st-plain li.st-footer-note + li:not(.st-footer-note) { margin-top: 10px !important; }
.site-footer .st-plain li:empty { display: none; }   /* e.g. no winter break entered */
@media (max-width: 959px) {
  .vc_row.st-footer > .row > .row-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--st-col-gap);
  }
  .vc_row.st-footer > .row > .row-inner > .wpb_column.st-footer-col { grid-column: auto; }
}
/* Base line: copyright · legal links · credit */
.st-footer-base .st-footer-legal a { color: var(--st-cream-soft); }
.st-footer-base .st-footer-legal a:hover,
.st-footer-base .st-footer-legal a:focus-visible { color: var(--st-cream); }

/* Night opener: the photo is dark already; the fade only has to carry the type */
.st-opening--night .block-bg-overlay {
  background: linear-gradient(to top, var(--st-label) 0%, rgba(19, 16, 13, .7) 30%, rgba(19, 16, 13, .1) 70%) !important;
}

/* A heading directly above facts or a list: the same space as above a paragraph; run-in heads stay close */
.uncode_text_column :is(h2, h3) + :is(dl, ul) { margin-top: var(--st-space-m) !important; }
.uncode_text_column :is(h2, h3).st-run + :is(dl, ul) { margin-top: 22px !important; }
/* Facts beside a photo: the labels take only the room they need */
.wpb_column:is(.st-s8, .st-s9, .st-s10) dl.st-facts { grid-template-columns: max-content 1fr; column-gap: 24px; }

/* Phones: the opening keeps the photo in view; its caption goes */
@media (max-width: 767px) {
  .st-opening .st-caption--right { display: none; }
  .st-opening .st-lede,
  .st-opening .st-lede p { font-size: 1.2rem !important; }
  .st-opening .st-actions { margin-top: 22px; }
}
.st-menu .nav-tabs,
.st-menu .tab-container .nav-tabs {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 4px 0;
}
.st-menu .tab-container { text-align: left !important; }
/* Phones: the four tabs stay one line that scrolls sideways (two wrapped rows read as two sets of things); the row
   runs to the window edge, so a cut-off tab shows there is more. strommer.js scrolls the chosen tab into view. */
@media (max-width: 767px) {
  .st-menu .nav-tabs,
  .st-menu .tab-container .nav-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-right: calc(-1 * var(--st-edge)) !important;
    padding-right: var(--st-edge) !important;
  }
  .st-menu .nav-tabs::-webkit-scrollbar { display: none; }
  .st-menu .nav-tabs > li {
    flex: 0 0 auto;
    float: none !important;
  }
  .st-menu .nav-tabs > li > a { white-space: nowrap; }
}
/* The vegetarian mark keeps its meaning in the page's gold instead of signal green */
.st-menu img[src*="veggie"] { filter: grayscale(1) sepia(1) saturate(1.6) brightness(1.05); }


/* Opening: the film link sits where the photo ends, bottom right (on phones under the other actions) */
.wpb_column.st-opening-aside { text-align: right !important; }
@media (max-width: 959px) {
  .wpb_column.st-opening-aside { text-align: left !important; }
  .st-opening-aside .btn-container { display: block; margin-top: 14px; }
}

/* Half-page rows: the photo runs into its window edge; on phones it always comes first, then the text */
@media (max-width: 959px) {
  .vc_row.st-half > .row > .row-inner > .wpb_column.st-bleed-r { order: -1; }
  .vc_row.st-half > .row > .row-inner { row-gap: var(--st-space-m); }
}

/* Phones and tablets: Uncode drops the opening's height below 960 px; give the photo the screen and set the text at
   its foot */
@media (max-width: 959px) {
  .vc_row.st-opening > .row { display: block !important; }
  .vc_row.st-opening > .row > .row-inner {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    min-height: calc(100svh - var(--st-header-h) - 72px);
  }
  .vc_row.st-opening .st-opening-aside { padding-top: 0 !important; }
  .st-opening .btn-container .btn { margin: 0 !important; }
}
/* The Gästehaus photos (a tourism board's bright daylight set, whites clipped) toned down to sit on the dark ground */
.st-grade-day img { filter: brightness(.86) contrast(1.04) saturate(.94); }

/* ==== Refinement pass (owner feedback and design review, 2026-11-02) ==== */

/* Two heading sizes only: display (h1) and section (h2). A list label is a run-in head at reading size. */
h2.st-run,
h3.st-run,
.uncode_text_column h2.st-run {
  font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem) !important;
  font-weight: 540 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  margin: 0 0 14px !important;
}
/* Utility pages (Weingut, Partner, Presse, Kontakt, Shop, cart, checkout) open at section size */
.vc_row.st-head--small h1 {
  font-size: var(--st-fs-h2) !important;
  line-height: 1.02 !important;
  letter-spacing: -.022em !important;
}
.vc_row.st-head--small h1 + .st-lede { margin-top: var(--st-space-m) !important; }

/* Openings that are half pages (Gästehaus, Heidifarm): the photo starts near the header */
.vc_row.st-open-half > .row-parent { padding-top: var(--st-space-m) !important; }
.vc_row.st-open-half .st-lede + p { margin-top: 20px !important; }
/* The first chapter after a photo opening does not need a full chapter gap */
.vc_row.st-opening + .vc_row.st-section > .row-parent { padding-top: var(--st-space-l) !important; }

/* Ledes: lighter, more contrast at a larger optical size; never hyphenated */
.st-lede,
.st-lede p {
  font-weight: 390 !important;
  font-variation-settings: "opsz" 36 !important;
  hyphens: manual !important;
}
h2, h3, .st-wine__name { hyphens: manual !important; }
p + dl.st-facts,
.st-lede + dl.st-facts { margin-top: var(--st-space-m) !important; }
dl.st-facts dt,
dl.st-hours dt { font-size: .9375rem; }

/* Phone numbers line up the same everywhere */
a[href^="tel:"] { font-variant-numeric: lining-nums tabular-nums; }
/* .st-call: "Anrufen" on phones and touch screens; the number itself where a tel: link does nothing */
.st-call { font-variant-numeric: lining-nums tabular-nums; }
.st-call__wide { display: none; }
@media (min-width: 960px) and (hover: hover) {
  .st-call__touch { display: none; }
  .st-call__wide { display: inline; }
}

/* Gold only for interaction: years and the vegetarian mark in the page's own inks */
dl.st-timeline dt { color: var(--st-cream) !important; }
.st-menu img[src*="veggie"] { filter: grayscale(1) brightness(1.5) !important; opacity: .8; }

/* Partner logos as one monochrome line each, without plates */
ul.st-partners--mono .st-partner__logo {
  background: none !important;
  height: 64px;
  place-items: center start;
  margin-bottom: 14px;
}
ul.st-partners--mono .st-partner__logo img {
  max-width: 62% !important;
  max-height: 100% !important;
  filter: grayscale(1) invert(1) contrast(1.2);
  mix-blend-mode: screen;
  opacity: .85;
}

/* Wine shelf: price and a text link, no boxes under the stone */
.st-wine__buy { align-items: baseline; }
.st-wine__buy a.st-cart {
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
}
.st-wine__buy a.st-cart.loading { opacity: .5; }
.st-wine__buy a.st-cart.loading::after,
.st-wine__buy a.st-cart.added::after {
  content: "" !important;
  font-family: inherit !important;
  animation: none !important;
  position: absolute !important;
  top: auto !important;
  right: 0 !important;
  margin: 0 !important;
}
.st-wine__buy a.st-cart.added { color: var(--st-gold-text) !important; }

/* Footer: links without permanent underlines (hover and focus still show) */
.site-footer .uncode_text_column li a:not([class]),
.site-footer .uncode_text_column p a:not([class]) {
  text-decoration: none !important;
}
.site-footer .uncode_text_column li a:not([class]):hover { text-decoration: underline !important; text-decoration-color: var(--st-gold) !important; text-underline-offset: .22em; }

/* Phones: the logo on the same margin as the content */
@media (max-width: 959px) {
  .menu-container .logo-container { padding-left: var(--st-edge) !important; }
  .menu-container .mobile-menu-button { margin-right: calc(var(--st-edge) - 24px) !important; }
  /* search and cart are placed at a fixed offset from the button's box: move them by the same amount */
  .menu-container .mobile-additional-icons { margin-right: calc(var(--st-edge) - 24px) !important; }
}

/* Partner logos: a fixed height, whatever the file's proportions */
ul.st-partners--mono .st-partner__logo img { max-height: 52px !important; }
/* A half-page opening with a landscape photo: the photo centres on the text beside it */
.vc_row.st-open-half .wpb_column.st-bleed-r,
.vc_row.st-open-half .wpb_column.st-bleed-l { align-self: center; }
/* Uncode pulls each row-inner 36 px out to compensate column gutters; the opening has none */
.vc_row.st-opening > .row > .row-inner { margin-left: 0 !important; margin-right: 0 !important; }

/* ==== QA pass (2026-11-02) ==== */
/* Speisekarte: Uncode's own sliding indicator doubles our underline */
.st-menu .switcher-cursor { display: none !important; }
/* ---- Header mini-cart (popup alignment, 2026-11-02) ----
   Uncode fixes the cart link at 20 px for a count it floats over the bag; ours stands beside the bag, so the link
   takes its width: the count ends on the page margin and the panel's right edge lines up under it. */
body[class*="hmenu"] .menu-smart .uncode-cart > a.dropdown-toggle { width: auto !important; }
/* Uncode pins every top-level submenu at 195 px (four classes deep), which squeezed the panel to its content.
   Content-box like Uncode's menus: SmartMenus measures the panel that way when it right-aligns it under the cart
   (with border-box it was placed 48 px, the side padding, too far left). 272 + 2 × 24 = 320 px. */
.uncode-cart .drop-menu,
.uncode-cart .un-submenu,
.menu-horizontal ul.menu-smart > li.uncode-cart > ul.uncode-cart-dropdown.drop-menu {
  box-sizing: content-box !important;
  width: 272px !important;
  min-width: 0 !important;
  padding: 24px !important;
}
/* One item = bottle on a limestone plate · name and quantity · remove, on one grid line */
.menu-container .uncode-cart .uncode-cart-dropdown .cart-item-list {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  column-gap: 16px;
  align-items: start;               /* bottle, name and remove hang from one line, however long the name */
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 0 !important;
}
.menu-container .uncode-cart .uncode-cart-dropdown .cart-item-list + .cart-item-list { margin-top: 16px !important; }
.menu-container .uncode-cart .uncode-cart-dropdown .cart-item-list::before,
.menu-container .uncode-cart .uncode-cart-dropdown .cart-item-list::after { content: none !important; display: none !important; }
.menu-container .uncode-cart .uncode-cart-dropdown .cart-item-list > .cart-thumb {
  grid-column: 1;
  grid-row: 1;
  float: none !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--st-plate);
}
.menu-container .uncode-cart .uncode-cart-dropdown .cart-thumb img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.menu-container .uncode-cart .uncode-cart-dropdown .cart-item-list > .cart-desc {
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
  overflow: visible !important;
}
.menu-container .uncode-cart .uncode-cart-dropdown .cart-desc .cart-item {
  font: 470 1.0625rem/1.25 var(--st-serif) !important;   /* the wine's name in Literata, as in the cart and checkout */
  letter-spacing: 0 !important;
  text-wrap: balance;
  color: var(--st-cream) !important;
}
.menu-container .uncode-cart .uncode-cart-dropdown .cart-desc .product-quantity,
.menu-container .uncode-cart .uncode-cart-dropdown .cart-desc .product-quantity * {
  font: 460 var(--st-fs-meta)/1.3 var(--st-sans) !important;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .012em !important;
  color: var(--st-cream-soft) !important;
}
.menu-container .uncode-cart .uncode-cart-dropdown .cart-desc .product-quantity { margin-top: 2px !important; }
/* Uncode's own rule for the remove link (absolute, right) loses to its generic menu-link rule; it is the third column */
.menu-container ul.menu-smart .uncode-cart .uncode-cart-dropdown .cart-item-list > a.remove {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  position: static !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  font-size: 12px !important;
  line-height: 1 !important;
  color: var(--st-cream-soft) !important;
}
.menu-container ul.menu-smart .uncode-cart .uncode-cart-dropdown .cart-item-list > a.remove:hover { color: var(--st-cream) !important; }
/* Subtotal and actions: separated by space, not rules (spec §1c, as on the cart page) */
.menu-container .uncode-cart .uncode-cart-dropdown .subtotal {
  margin: 24px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.menu-container .uncode-cart .uncode-cart-dropdown .subtotal > span {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.menu-container .uncode-cart .uncode-cart-dropdown .subtotal strong,
.menu-container .uncode-cart .uncode-cart-dropdown .subtotal .amount {
  float: none !important;
  font: 470 var(--st-fs-ui)/1.3 var(--st-sans) !important;
  letter-spacing: .012em !important;
}
.menu-container .uncode-cart .uncode-cart-dropdown .subtotal strong { color: var(--st-cream-soft) !important; }
.menu-container .uncode-cart .uncode-cart-dropdown .subtotal .amount {
  font-weight: 600 !important;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--st-cream) !important;
}
.menu-container .uncode-cart .uncode-cart-dropdown .buttons {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 20px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.menu-container .uncode-cart .uncode-cart-dropdown .buttons::before,
.menu-container .uncode-cart .uncode-cart-dropdown .buttons::after { content: none !important; display: none !important; }
.menu-container .uncode-cart .uncode-cart-dropdown .buttons a i { display: none !important; }
/* "Warenkorb anzeigen" reads as the st-more text link, "Kasse" as the cream st-btn (small) */
html body .menu-container .uncode-cart .uncode-cart-dropdown .buttons a.wc-forward {
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  font: 480 var(--st-fs-ui)/1.3 var(--st-sans) !important;
  letter-spacing: .012em !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap;
}
html body .menu-container .uncode-cart .uncode-cart-dropdown .buttons a.wc-forward:not(.checkout) {
  position: relative;
  padding: 6px 0 !important;
  border: 0 !important;
  color: var(--st-cream) !important;
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 100% 1px !important;
}
html body .menu-container .uncode-cart .uncode-cart-dropdown .buttons a.wc-forward:not(.checkout)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--st-gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--st-standard) var(--st-ease-inout);
}
html body .menu-container .uncode-cart .uncode-cart-dropdown .buttons a.wc-forward:not(.checkout):hover::after,
html body .menu-container .uncode-cart .uncode-cart-dropdown .buttons a.wc-forward:not(.checkout):focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}
html body .menu-container .uncode-cart .uncode-cart-dropdown .buttons a.checkout {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.05em !important;
  border: 1px solid var(--st-cream) !important;
  border-radius: 0 !important;
  background: var(--st-cream) !important;
  color: var(--st-label) !important;
  font-weight: 560 !important;
  line-height: 1.2 !important;
  transition: background-color var(--st-quick) ease-out, border-color var(--st-quick) ease-out, transform 120ms ease-out;
}
html body .menu-container .uncode-cart .uncode-cart-dropdown .buttons a.checkout:hover {
  background: var(--st-gold) !important;
  border-color: var(--st-gold) !important;
  color: var(--st-label) !important;
}
html body .menu-container .uncode-cart .uncode-cart-dropdown .buttons a.checkout:active { transform: scale(.98); }
/* Uncode's dark-submenu :hover/:focus rule (six classes) paints every dropdown link gold on a white tint: the two
   actions keep their own states (focus = the gold ring from base.css on the unchanged button; hover = gold fill) */
html body .menu-container .uncode-cart .uncode-cart-dropdown.cart_list .buttons a.wc-forward.checkout:focus {
  background-color: var(--st-cream) !important;
  border-color: var(--st-cream) !important;
  color: var(--st-label) !important;
}
html body .menu-container .uncode-cart .uncode-cart-dropdown.cart_list .buttons a.wc-forward.checkout:hover {
  background-color: var(--st-gold) !important;
  border-color: var(--st-gold) !important;
  color: var(--st-label) !important;
}
html body .menu-container .uncode-cart .uncode-cart-dropdown.cart_list .buttons a.wc-forward:not(.checkout):is(:hover, :focus) {
  background-color: transparent !important;
  color: var(--st-cream) !important;
}
/* Half-page openings: the display size fits a five-column measure */
.vc_row.st-open-half h1 {
  font-size: clamp(2.75rem, 1rem + 4.2vw, 6rem) !important;
}
/* Search overlay on the warm ground; the field reads as a field */
.overlay.overlay-search,
.overlay-search {
  background-color: rgba(19, 16, 13, .97) !important;
}
.overlay-search input[type="search"],
.overlay-search input[name="s"] {
  background-color: transparent !important;
  color: var(--st-cream) !important;
  font-family: var(--st-serif) !important;
}
/* The close mark takes the place of the header's last control: the burger below 960 px (same box, same offset),
   the right page margin on the icon line above. Its box is as tall as the header, compact or not. */
.overlay-search .menu-close-search {
  height: var(--st-header-h) !important;
  margin-right: calc(var(--st-edge) - 24px) !important;
}
@media (min-width: 960px) {
  .overlay-search .menu-close-search { margin-right: calc(var(--st-edge) - 36px) !important; }
  html.st-header-compact .overlay-search .menu-close-search { height: 76px !important; }
}
@media (max-width: 959px) {
  html.st-header-compact .overlay-search .menu-close-search { height: 64px !important; }
  /* the field on the page margins, like everything else on the phone */
  .overlay-search .search-container form { max-width: calc(100% - 2 * var(--st-edge)) !important; }
}
/* Uncode shrinks buttons to 80 % on phones: the film link and the shelf links keep the text size */
@media (max-width: 959px) {
  a.btn.st-film,
  .st-film .btn,
  .st-wine__buy a.st-cart,
  .btn.st-cart {
    scale: none !important;
    transform: none !important;
    font-size: var(--st-fs-ui) !important;
  }
}
/* Opening photos: the fade climbs higher so the headline never sits on the pale sky or the lake */
.st-opening .block-bg-overlay {
  background: linear-gradient(to top, var(--st-label) 0%, rgba(19, 16, 13, .86) 22%, rgba(19, 16, 13, .58) 46%, rgba(19, 16, 13, .22) 72%, rgba(19, 16, 13, .08) 100%) !important;
}
.st-opening--night .block-bg-overlay {
  background: linear-gradient(to top, var(--st-label) 0%, rgba(19, 16, 13, .8) 28%, rgba(19, 16, 13, .5) 55%, rgba(19, 16, 13, .25) 100%) !important;
}
.st-opening h1,
.st-opening .st-lede { text-shadow: 0 1px 28px rgba(12, 10, 8, .45); }
/* Mobile menu: items on the page margin, no chevrons on plain links, the submenu one step smaller */
@media (max-width: 959px) {
  .main-menu-container .menu-smart,
  .main-menu-container .menu-smart > li > a {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .main-menu-container .menu-smart > li:not(.menu-item-has-children) > a .fa-dropdown,
  .main-menu-container .menu-smart > li:not(.menu-item-has-children) > a i[class*="fa-angle"] {
    display: none !important;
  }
  html body .main-menu-container .menu-smart .drop-menu li > a,
  html body .main-menu-container .menu-smart .drop-menu a span {
    font-family: var(--st-sans) !important;
    font-size: 1.125rem !important;
    font-weight: 460 !important;
    letter-spacing: .012em !important;
    color: var(--st-cream-soft) !important;
  }
}
/* The shelf's cart link is as wide as its words (Uncode gives buttons a minimum width) */
.st-wine__buy a.st-cart {
  width: auto !important;
  min-width: 0 !important;
  padding: 6px 0 !important;
  flex: 0 0 auto;
}

/* Tom Pur: the label's stencil head as printed, black on the limestone, as a half page into the left edge */
.vc_row.st-tompur .uncode_text_column p.st-tompur-head {
  max-width: none;
  margin: 0;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background: var(--st-plate);
}
.st-tompur-head a { display: block; width: 78%; line-height: 0; }
/* Tablets: the stacked plate ran the full window width at 4:5 (768 × 960, a screen of stone); a landscape plate
   keeps the head the same size as on a phone */
@media (min-width: 600px) and (max-width: 959px) {
  .vc_row.st-tompur .uncode_text_column p.st-tompur-head { aspect-ratio: 4 / 3; }
  .st-tompur-head a { width: 46%; }
}
.st-tompur-head img {
  display: block;
  width: 100% !important;
  height: auto !important;
}

/* Uncode aligns the column's inner .uncont itself */
@media (max-width: 959px) {
  .wpb_column.st-opening-aside .uncont { text-align: left !important; }
}
/* Press list: the Tom Pur artwork is black ink on transparency; it needs the stone behind it */
ul.st-press img[src*="tom-pur-kopf"] {
  background: var(--st-plate);
  object-fit: contain !important;
  padding: 4% 0;
}

/* The film loop behind the homepage opening: under the fade, over the photo; it fades in once it plays */
.st-opening .background-wrapper video.st-film-loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  opacity: 0;
  transition: opacity 900ms ease-out;
  pointer-events: none;
}
.st-opening .background-wrapper video.st-film-loop.is-playing { opacity: 1; }
@media (max-width: 767px) {
  .st-opening .background-wrapper video.st-film-loop { object-position: 64% 60%; }
}
.st-loop .st-film-loop { display: none; }       /* before strommer.js moves it, and without JS */
.uncode_text_column.st-loop p { margin: 0; max-width: none; }
.st-loop-toggle {
  margin-top: 14px;
  padding: 6px 0;
  border: 0;
  background: none;
  font: 460 var(--st-fs-meta)/1.3 var(--st-sans);
  letter-spacing: .012em;
  color: var(--st-cream-soft);
  cursor: pointer;
}
.st-loop-toggle:hover { color: var(--st-cream); }

/* Film modal: the page disappears behind it */
.lg-backdrop,
.lg-backdrop.in {
  background-color: #0C0A08 !important;
}
.lg-backdrop.in { opacity: 1 !important; }
/* lightGallery leaves the word "undefined" in the slide in front of the video Uncode adds to it: only the video shows */
.lg-item.has-html5 {
  font-size: 0 !important;
  line-height: 0 !important;
}
.lg-item.has-html5 video { font-size: var(--st-fs-meta); line-height: 1.3; }

/* ---- Vertriebspartner: an index, one partner per row: mark · name · website, separated by a fine line ---- */
ul.st-partners--mono {
  display: block;
  margin: 0 !important;
  border-bottom: 1px solid var(--st-line);
}
ul.st-partners--mono > li {
  display: grid;
  grid-template-columns: minmax(150px, 24%) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--st-col-gap, 32px);
  min-height: 132px;
  padding: 28px 0 !important;
  border-top: 1px solid var(--st-line);
}
ul.st-partners--mono .st-partner__logo {
  grid-column: 1;
  grid-row: 1;
  height: 56px;
  margin: 0;
}
ul.st-partners--mono h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
  font-size: var(--st-fs-h3) !important;
}
ul.st-partners--mono > li > p {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  text-align: right;
  font-family: var(--st-sans);
  font-size: var(--st-fs-ui);
  font-weight: 470;
  white-space: nowrap;
}
ul.st-partners--mono > li > p a {
  color: var(--st-cream-soft) !important;
  text-decoration-color: transparent !important;
  transition: color var(--st-quick) ease-out, text-decoration-color var(--st-quick) ease-out;
}
ul.st-partners--mono > li:hover > p a,
ul.st-partners--mono > li > p a:hover,
ul.st-partners--mono > li > p a:focus-visible {
  color: var(--st-cream) !important;
  text-decoration-color: var(--st-gold) !important;
}
ul.st-partners--mono > li:hover h3 { color: var(--st-cream); }
@media (max-width: 767px) {
  ul.st-partners--mono > li {
    grid-template-columns: 1fr;
    row-gap: 10px;
    min-height: 0;
    padding: 26px 0 !important;
  }
  ul.st-partners--mono .st-partner__logo,
  ul.st-partners--mono h3,
  ul.st-partners--mono > li > p { grid-column: 1; grid-row: auto; text-align: left; }
  ul.st-partners--mono .st-partner__logo { height: 44px; margin-bottom: 6px; }
  ul.st-partners--mono > li > p { white-space: normal; }
}
/* The index uses the column's full width (list items otherwise keep the reading measure) */
.uncode_text_column ul.st-partners--mono > li { max-width: none !important; }
@media (min-width: 768px) {
  ul.st-partners--mono > li { grid-template-columns: 120px minmax(0, 1fr) auto; }
}
ul.st-partners--mono .st-partner__logo { place-items: center start; }
ul.st-partners--mono .st-partner__logo img { max-width: 100% !important; max-height: 46px !important; }
@media (max-width: 767px) {
  ul.st-partners--mono .st-partner__logo img { max-width: 160px !important; max-height: 40px !important; }
}

/* The pause control sits bottom right in the opening (on phones under the actions) */
.st-opening-aside .st-loop-toggle { margin-top: 10px; }
@media (max-width: 959px) {
  .st-opening-aside .st-loop-toggle { margin-top: 4px; }
}

/* ---- Film loop frames: a band (21:9) or a half-page photo (3:2, 4:5) that plays a muted loop ---- */
.st-loop-frame {
  position: relative;
  overflow: hidden;
  background: var(--st-label-3);
}
.st-loop-frame--219 { aspect-ratio: 21 / 9; }
.st-loop-frame--32 { aspect-ratio: 3 / 2; }
.st-loop-frame--45 { aspect-ratio: 4 / 5; }
@media (max-width: 767px) {
  .st-loop-frame--219 { aspect-ratio: 4 / 5; }
}
.st-loop-frame .st-loop-poster,
.st-loop-frame video.st-film-loop {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
}
.st-loop-frame video.st-film-loop {
  opacity: 0;
  transition: opacity 900ms ease-out;
}
.st-loop-frame video.st-film-loop.is-playing { opacity: 1; }
.uncode_text_column:has(> .st-loop-frame) p:empty,
.uncode_text_column:has(.st-loop-frame) > p { margin: 0 !important; }
/* its pause control sits inside the frame, bottom right on a soft fade */
.st-loop-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  background: linear-gradient(to top, rgba(12, 10, 8, .5), rgba(12, 10, 8, 0));
  pointer-events: none;
  z-index: 1;
}
.st-loop-frame .st-loop-toggle {
  position: absolute;
  right: 18px;
  bottom: 12px;
  z-index: 2;
  margin: 0;
  color: var(--st-cream);
  text-shadow: 0 1px 10px rgba(12, 10, 8, .6);
}
.st-bleed-r .st-loop-frame .st-loop-toggle,
.st-loop-frame--219 .st-loop-toggle { right: var(--st-edge); }

/* ---- Shop: a cover at most half a screen high, so the wines start right below ---- */
.vc_row.st-opening--short h1 {
  font-size: clamp(2.6rem, 1.2rem + 3.6vw, 5.5rem) !important;
}
.vc_row.st-opening--short .st-lede,
.vc_row.st-opening--short .st-lede p { max-width: 44ch; }
@media (max-width: 959px) {
  .vc_row.st-opening.st-opening--short > .row { padding-bottom: 28px !important; }
  .vc_row.st-opening.st-opening--short > .row > .row-inner {
    min-height: calc(50svh - 28px);
  }
}
.vc_row.st-opening + .vc_row.st-shop-grid > .row-parent { padding-top: var(--st-space-m) !important; }
/* Text that only fits on wider screens (the shop cover keeps to half a phone screen) */
@media (max-width: 767px) {
  .st-wide-only { display: none; }
}

/* ---- Legal pages (Impressum, Datenschutz, AGB): on the grid, one reading size, section heads at h3 size ---- */
.st-legal-text h2 {
  font-size: var(--st-fs-h3) !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
  margin: var(--st-space-m) 0 16px !important;
  scroll-margin-top: calc(var(--st-header-h) + 24px);
}
.st-legal-text h3 {
  font-size: 1.1875rem !important;
  font-weight: 560 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  margin: 32px 0 10px !important;
}
.st-legal-text > :first-child,
.st-legal-text .uncode_text_column > :first-child { margin-top: 0 !important; }
.st-legal-text p,
.st-legal-text li { font-size: var(--st-fs-body) !important; }
.st-legal-text ul { padding-left: 1.2em; margin: 14px 0; }
.st-legal-text li { margin-bottom: .35em; }
.st-legal-text .st-meta { margin-bottom: 22px !important; }
/* AGB: the contents as an index of links, two columns on wide screens */
ol.st-legal-toc {
  list-style: none !important;
  padding: 0 !important;
  margin: var(--st-space-m) 0 0 !important;
  max-width: 48rem;
}
@media (min-width: 960px) { ol.st-legal-toc { columns: 2; column-gap: var(--st-col-gap); } }
ol.st-legal-toc li {
  break-inside: avoid;
  margin: 0 !important;
  padding: 4px 0;
  font: 470 var(--st-fs-ui)/1.4 var(--st-sans) !important;
  letter-spacing: .012em;
}
ol.st-legal-toc li::before { display: none !important; }
ol.st-legal-toc a { text-decoration: none !important; color: var(--st-cream-soft) !important; }
ol.st-legal-toc a:hover,
ol.st-legal-toc a:focus-visible { color: var(--st-cream) !important; text-decoration: underline !important; text-decoration-color: var(--st-gold) !important; text-underline-offset: .22em; }

/* ---- Openings (design review #4): one primary and one secondary action on the left. On the right, the film as a
   play mark with its label, centred on the buttons' line, and the loop's pause control as an icon beside it (its
   text stays as the accessible name). Below 960 px the pair sits on one line under the actions. ---- */
.vc_row.st-opening .wpb_column.st-opening-aside .uncont {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 18px;
  min-height: 50px;                       /* the button's height */
}
.vc_row.st-opening .st-opening-aside .btn-container { display: block !important; margin: 0 !important; }
.vc_row.st-opening .st-opening-aside .uncode_text_column.st-loop {
  flex: 0 0 auto;
  width: auto;
  margin: 0 !important;
}
.vc_row.st-opening .st-opening-aside .uncode_text_column.st-loop:not(:has(.st-loop-toggle:not([hidden]))) { display: none; }
.st-opening a.btn.st-film {
  padding-left: 22px !important;
  background-position: 22px bottom !important;
  background-size: calc(100% - 22px) 1px !important;
}
.st-opening a.btn.st-film::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 10px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transform: translateY(-50%);
}
.st-opening a.btn.st-film::after { left: 22px; }
.vc_row.st-opening .st-loop-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  margin: 0 -11px 0 0 !important;         /* the glyph ends on the page margin */
  padding: 0;
  font-size: 0 !important;
  line-height: 0;
  color: var(--st-cream-soft);
  text-shadow: none;
}
.vc_row.st-opening .st-loop-toggle::before,
.vc_row.st-opening .st-loop-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 3px;
  height: 12px;
  background: currentColor;
  transform: translateY(-50%);
}
.vc_row.st-opening .st-loop-toggle::before { left: 15px; }
.vc_row.st-opening .st-loop-toggle::after { left: 22px; }
.vc_row.st-opening .st-loop-toggle[aria-pressed="true"]::before {
  left: 16px;
  width: 0;
  height: 0;
  background: none;
  border-left: 10px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.vc_row.st-opening .st-loop-toggle[aria-pressed="true"]::after { display: none; }
.vc_row.st-opening .st-loop-toggle:hover,
.vc_row.st-opening .st-loop-toggle:focus-visible { color: var(--st-cream); }
@media (max-width: 959px) {
  .vc_row.st-opening .wpb_column.st-opening-aside .uncont {
    justify-content: flex-start;
    min-height: 0;
    margin-top: 14px;
  }
  .vc_row.st-opening .st-loop-toggle { margin: 0 !important; }
}
@media (max-width: 959px) {
  .st-footer-base p { justify-content: flex-start; column-gap: 28px; }
}
/* Legal text: a heading sits close to its own paragraph */
.st-legal-text :is(h2, h3) + p { margin-top: 0 !important; }

/* ---- Anfahrt map ([st_karte], inc/karte.php): vine rows and lanes around the Kellergasse, drawn once from
   OpenStreetMap data. One SVG unit is one metre and the cellar is the drawing's centre, where the gold point sits
   (the one gold that is not an interaction: it marks the place, design review #10). From 960 px the map lies behind
   the whole row at 2 m per pixel, the cellar right of centre, and fades out under the address. Below 960 px it is a
   band under the address at 2.4 m per pixel, the cellar right of centre too, so the vineyards west of it show. ---- */
.st-karte {
  --karte-x: 66%;
  --karte-y: 50%;
  --karte-w: 2250px;                 /* 5400 m at 2.4 m/px */
  --karte-h: 1517px;                 /* 3640 m */
  position: relative;
  pointer-events: none;
}
.st-karte__flaeche { position: absolute; inset: 0; overflow: hidden; }
.st-karte__bild {
  position: absolute;
  left: calc(var(--karte-x) - var(--karte-w) / 2);
  top: calc(var(--karte-y) - var(--karte-h) / 2);
  width: var(--karte-w) !important;
  max-width: none !important;
  height: var(--karte-h) !important;
}
.st-karte__punkt { position: absolute; left: var(--karte-x); top: var(--karte-y); }
.st-karte__punkt::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--st-gold);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--st-gold) 18%, transparent),
              0 0 0 14px color-mix(in srgb, var(--st-gold) 7%, transparent);
}
.st-karte__punkt > span {
  position: absolute;
  left: 22px;
  top: -1.45em;
  white-space: nowrap;
  font-family: var(--st-sans);
  font-size: var(--st-fs-meta);
  font-weight: 460;
  letter-spacing: .012em;
  color: var(--st-cream);
  /* a halo in the ground colour keeps the label clear of the lines under it */
  text-shadow: 0 0 2px var(--st-label), 0 0 6px var(--st-label), 0 0 12px var(--st-label), 0 0 18px var(--st-label);
}
.st-karte__credit {
  position: absolute;
  right: var(--st-edge);
  bottom: var(--st-gap);
  margin: 0 !important;
  font-family: var(--st-sans);
  font-size: var(--st-fs-meta);
  color: var(--st-cream-faint);
  pointer-events: auto;
}
/* small print like the text around it; hover keeps the in-text link rule (cream, gold underline, base.css) */
.st-karte p.st-karte__credit a:not([class]) { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
/* touch: a 44 px tap target like every other link (mobile.css), grown in height only, so the line does not move */
@media (max-width: 959px), (pointer: coarse) {
  .st-karte p.st-karte__credit a:not([class]) { display: inline-block; padding: 12px 0; margin: -12px 0; }
}

@media (min-width: 960px) {
  .vc_row:has(.st-karte) { isolation: isolate; overflow: clip; }
  /* The map anchors to the row itself, so the wrappers between the row and the map must not be positioned */
  .vc_row:has(.st-karte) :has(.st-karte) { position: static !important; }
  .vc_row:has(.st-karte) .wpb_column:not(:has(.st-karte)) { z-index: 1; }
  /* the column the map stood in keeps the height the Google map had (600 px at 1440); layout.css resets the
     grid columns' min-height with !important, so this one needs the same weight and a longer selector */
  .vc_row.st-grid:has(.st-karte) > .row > .row-inner > .wpb_column:has(.st-karte) {
    min-height: clamp(520px, 41.6vw, 720px) !important;
  }
  .st-karte {
    --karte-x: 70%;
    --karte-y: 46%;
    --karte-w: 2700px;               /* 5400 m at 2 m/px */
    --karte-h: 1820px;
    position: absolute;
    inset: 0;
  }
  .st-karte__flaeche {
    -webkit-mask-image: linear-gradient(to right, transparent 16%, #000 56%), linear-gradient(to bottom, transparent 0, #000 18%, #000 80%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 16%, #000 56%), linear-gradient(to bottom, transparent 0, #000 18%, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
}
@media (max-width: 959px) {
  /* a map reads after the address it shows (half rows otherwise put the picture first) */
  .vc_row.st-half > .row > .row-inner > .wpb_column.st-bleed-r:has(.st-karte) { order: 0; }
  .st-karte { height: clamp(320px, 92vw, 640px); }
  .st-karte__flaeche {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
  }
}

/* ==== Art-direction pass (2026-11-03) ==== */

/* Ledes: balanced lines, so a two- or three-line lede never ends on one word, and an opening's lede breaks by sense
   ("… der Familie Strommer – / zwischen Leithagebirge und Neusiedler See.") */
.st-lede,
.st-lede p { text-wrap: balance; }
.st-opening .st-lede { max-width: 27em; }

/* Half-page openings (Gästehaus, Heidifarm): the display line at display size, as far as five columns allow
   (its longest line, "Granitfass", is 4.7em wide; five columns are 35.7vw) */
.vc_row.st-open-half h1 {
  font-size: min(var(--st-fs-display), 7.2vw) !important;
}
@media (max-width: 959px) {
  .vc_row.st-open-half h1 { font-size: var(--st-fs-display) !important; }
}
/* The shop is a section-size head (spec §1c amendments), cover or not */
.vc_row.st-opening--short h1 {
  font-size: var(--st-fs-h2) !important;
  line-height: 1.02 !important;
  letter-spacing: -.022em !important;
}
/* Utility pages on phones: the page title one clear step above the lede and the first section head */
@media (max-width: 600px) {
  .vc_row.st-head--small h1 { font-size: 2.4rem !important; }
}

/* A section head with a link at the end of the row (home "Aus unserem Keller"): the link sits on the heading's
   baseline and ends on the right page edge, where the shelf below ends */
@media (min-width: 960px) {
  .vc_row.st-grid > .row > .row-inner:has(> .st-v-base) > .wpb_column { align-self: last baseline; }
  .st-actions--end,
  .st-actions--end p { justify-content: flex-end; }
}

/* Family: names and lines start on one line across the three portraits, whatever wraps */
ul.st-portraits > li > br { display: none; }
@media (min-width: 768px) {
  ul.st-portraits > li {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}
@media (max-width: 767px) {
  .uncode_text_column ul.st-portraits p { hyphens: manual; }   /* no ladders of hyphens in a 216 px column */
}

/* Wine shelf, 601–1100 px: two wines a row, each row on its own continuous limestone band (not separate cards).
   The bands are the list's ::before and ::after placed as grid items under rows 1 and 2. */
@media (min-width: 601px) and (max-width: 1100px) {
  ul.st-wines {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: var(--st-space-m);
  }
  ul.st-wines::before,
  ul.st-wines::after {
    content: "";
    display: block;
    position: static;
    grid-column: 1 / -1;
    align-self: start;
    height: var(--st-shelf);
    margin: 0 calc(-1 * var(--st-edge));
    background: var(--st-plate);
    transform: translateZ(0);
  }
  ul.st-wines::before { grid-row: 1; }
  ul.st-wines::after { grid-row: 2; }
  ul.st-wines:not(:has(> li:nth-child(3)))::after { display: none; }
  .wpb_column:not(.st-s1):is([class*="st-s"]) ul.st-wines::before,
  .wpb_column:not(.st-s1):is([class*="st-s"]) ul.st-wines::after { margin-left: 0; }
  ul.st-wines > .st-wine:nth-child(odd) { grid-column: 1; }
  ul.st-wines > .st-wine:nth-child(even) { grid-column: 2; }
  ul.st-wines > .st-wine:nth-child(-n+2) { grid-row: 1; }
  ul.st-wines > .st-wine:nth-child(n+3) { grid-row: 2; }
}

/* Film frames: a focal point near the top for shots whose faces sit high (Geschichte); a 21:9 frame keeps 4:3 on
   phones (4:5 cut the family to two half faces) */
.st-loop-frame--oben :is(.st-loop-poster, video.st-film-loop) { object-position: 50% 8%; }
@media (max-width: 767px) {
  .st-loop-frame--219 { aspect-ratio: 4 / 3; }
  .st-photo--219.st-photo--m43 img { aspect-ratio: 4 / 3; }   /* group photos in a band: nobody cut at the edge */
}
/* The pause control in a frame is the same two-bar mark as in the openings (its words stay its accessible name) */
.st-loop-frame .st-loop-toggle {
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0 -11px 0 0;
  font-size: 0 !important;
  line-height: 0;
  color: var(--st-cream);
  text-shadow: none;
}
.st-loop-frame .st-loop-toggle::before,
.st-loop-frame .st-loop-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 3px;
  height: 12px;
  background: currentColor;
  transform: translateY(-50%);
}
.st-loop-frame .st-loop-toggle::before { left: 15px; }
.st-loop-frame .st-loop-toggle::after { left: 22px; }
.st-loop-frame .st-loop-toggle[aria-pressed="true"]::before {
  left: 16px;
  width: 0;
  height: 0;
  background: none;
  border-left: 10px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.st-loop-frame .st-loop-toggle[aria-pressed="true"]::after { display: none; }

/* Speisekarte: dish name · description · allergen codes as small print (inc/typography.php sets the span) */
.st-menu .uncode-pricing-entry-title,
.st-menu .uncode-pricing-entry h6 {
  hyphens: manual !important;
  text-wrap: pretty;
}
.st-menu .uncode-pricing-entry p { line-height: 1.5 !important; }   /* Uncode's 1.75 made each dish read as two */
.st-menu .st-allergens {
  display: block;
  margin-top: .3em;
  font: 460 var(--st-fs-meta)/1.4 var(--st-sans);
  letter-spacing: .012em;
  color: var(--st-cream-faint);
}
.st-menu .st-allergens img {
  height: 14px !important;
  width: auto !important;
  margin-left: .5em;
  vertical-align: -2px;
}
.st-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Footer: the time's dash in Literata (the sans's en dash is .7em and reads as a long dash) */
.site-footer .st-dash { font-family: var(--st-serif); font-weight: 400; }
/* Footer base line on the grid: copyright under the address, the legal links under "Besuchen", the credit ending
   on the right margin */
@media (min-width: 960px) {
  .st-footer-base p {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--st-col-gap);
  }
  .st-footer-base p > span:first-child { grid-column: 1 / 5; }
  .st-footer-base p > .st-footer-legal { grid-column: 5 / 9; }
  .st-footer-base p > span:last-child { grid-column: 9 / 13; text-align: right; }
}

/* Vertriebspartner: wpautop's line break after each logo took a grid cell (rows of 231 px against 131 on phones) */
ul.st-partners--mono > li > br,
ul.st-partners > li > br,
ul.st-press > li > br { display: none; }
@media (max-width: 767px) {
  ul.st-partners--mono .st-partner__logo { height: 32px; }
  ul.st-partners--mono .st-partner__logo img { max-width: 120px !important; max-height: 30px !important; }
}

/* Presse: one frame for every image (4:5, like the half pages); bottles stand on limestone like in the shop,
   the portrait keeps its faces, the logos sit on the ground (white) or the stone (black) without boxes */
ul.st-press img {
  aspect-ratio: 4 / 5;
  object-position: 50% 30%;
}
/* the stone is a layer under the image, so multiply has something to blend with (white JPEG grounds) */
ul.st-press > li.st-press-plate { position: relative; isolation: isolate; }
ul.st-press > li.st-press-plate::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--st-plate);
}
ul.st-press > li.st-press-plate img {
  object-fit: contain;
  padding: 6% 0;
  mix-blend-mode: multiply;
}
ul.st-partners:not(.st-partners--mono) .st-partner__logo--dark { background: none !important; place-items: center start; }
ul.st-partners:not(.st-partners--mono) .st-partner__logo:not(.st-partner__logo--dark) img { mix-blend-mode: darken; }   /* the JPEG's off-white goes */
@media (max-width: 767px) {
  ul.st-press { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  ul.st-press h3 { font-size: 1.125rem !important; }
}

/* Search overlay: an opaque ground (the lede ghosted through the field) and one square line, no rounded ring */
.overlay.overlay-search,
.overlay-search { background-color: var(--st-label) !important; }
.overlay-search input[type="search"],
.overlay-search input[name="s"] { border-radius: 0 !important; }
.overlay-search input[type="search"]:focus-visible,
.overlay-search input[name="s"]:focus-visible { outline-offset: 6px; }

/* Tablets (600–959 px): text under a photo that runs into the right edge starts where the photo starts, so the two
   read as one composition instead of a photo shifted right over text on the margin */
@media (min-width: 600px) and (max-width: 959px) {
  .vc_row.st-half:has(> .row > .row-inner > .wpb_column.st-bleed-r .st-photo--45) > .row > .row-inner > .wpb_column:not(.st-bleed-r) {
    padding-left: calc(22vw - var(--st-edge)) !important;
  }
}

/* A heading on its own grid row with two columns under it (home "Seit 1998": text and facts start together):
   the rows sit as close as a heading and its paragraph */
.vc_row.st-gap-m { --st-row-gap: var(--st-space-m); }

/* Shelf "In den Warenkorb" while the wine is being added: the label stays (dimmed) and its gold line runs back and
   forth as the progress cue (Uncode replaced it with a 32 px spinner box and hid the label) */
.st-wine__buy a.st-cart.loading,
.st-wine__buy a.st-cart.loading span { opacity: .6 !important; }
.st-wine__buy a.st-cart.loading::after {
  content: "" !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: 1px !important;
  margin: 0 !important;
  border: 0 !important;
  background: var(--st-gold) !important;
  transform: none !important;
  transform-origin: left center;
  animation: st-busy 900ms var(--st-ease-inout) infinite alternate !important;
}
@keyframes st-busy { from { scale: .15 1; } to { scale: 1 1; } }
@media (prefers-reduced-motion: reduce) {
  .st-wine__buy a.st-cart.loading::after { animation: none !important; }
}

/* Ledes keep the lede measure in text blocks too (".uncode_text_column p" gave them the 62ch body measure: 842 px) */
.uncode_text_column p.st-lede,
.uncode_text_column .st-lede p { max-width: var(--st-measure-lede); }
.st-opening .uncode_text_column p.st-lede,
.st-opening .uncode_text_column .st-lede p { max-width: 27em; }
.vc_row.st-opening--short .uncode_text_column .st-lede p,
.vc_row.st-opening--short .uncode_text_column p.st-lede { max-width: 44ch; }

/* Mobile menu: the current page is marked as on the desktop (a gold line under the word) */
@media (max-width: 959px) {
  .main-menu-container .menu-smart li:is(.current-menu-item, .current-menu-ancestor, .current_page_parent) > a {
    text-decoration: underline 1px var(--st-gold) !important;
    text-underline-offset: .28em;
  }
}

/* Vertriebspartner: the run-in head ("In Österreich", "International") stands on the first partner's baseline, not
   on the rule above it (measured: 55 px at 1440, which is 1.78 × the partner names' size at every width) */
@media (min-width: 960px) {
  .vc_row:has(ul.st-partners--mono) .uncode_text_column .st-run { padding-top: calc(var(--st-fs-h3) * 1.78); }
}

/* Skip link: the site's button (Uncode's is a 65 px accent button with a shadow) */
html body a.screen-reader-shortcut.btn:focus {
  min-height: 50px !important;
  padding: 0 1.4em !important;
  display: inline-flex !important;
  align-items: center;
  font: 560 var(--st-fs-ui)/1.2 var(--st-sans) !important;
  letter-spacing: .012em !important;
  text-transform: none !important;
  background: var(--st-cream) !important;
  border: 1px solid var(--st-cream) !important;
  color: var(--st-label) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}