/* Element defaults on top of Uncode: type roles, links, focus, selection. */

body {
  background-color: var(--st-label);
  color: var(--st-cream);
  font-family: var(--st-serif);
  font-size: var(--st-fs-body);
  font-weight: 400;
  font-variation-settings: "opsz" 14;
  line-height: 1.6;
  font-variant-numeric: oldstyle-nums proportional-nums;
  /* Cream on the cellar ground: grayscale smoothing, as Uncode already sets for headings. macOS's default
     "font smoothing" thickens light-on-dark text, so reading text looked a weight heavier than the headings. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

p {
  hanging-punctuation: first;
  text-wrap: pretty;
}
/* Reading text: 1.6 (Uncode sets 1.75 on p and li, which greys a 62ch column out) */
.uncode_text_column p,
.uncode_text_column li {
  max-width: var(--st-measure);
  line-height: 1.6;
}
@media (max-width: 600px) {
  .uncode_text_column p,
  .uncode_text_column li { line-height: 1.55; }
}

/* Headings: Literata, sentence case, optical size follows the size. No small caps, no tracking. */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
  font-family: var(--st-serif) !important;
  font-weight: 480 !important;
  font-optical-sizing: auto;
  font-variation-settings: normal;
  font-variant-caps: normal;
  font-variant-numeric: lining-nums proportional-nums;
  font-synthesis: none;
  text-transform: none !important;
  text-wrap: balance;
  hyphens: manual;
  color: var(--st-cream);
}
h1, .h1 {
  font-size: var(--st-fs-display) !important;
  line-height: .97 !important;
  letter-spacing: -.028em !important;
}
h2, .h2 {
  font-size: var(--st-fs-h2) !important;
  line-height: 1.02 !important;
  letter-spacing: -.022em !important;
}
h3, .h3 {
  font-size: var(--st-fs-h3) !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
  font-weight: 470 !important;
}
h4, .h4 {
  font-size: 1.25rem !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
}
h5, h6, .h5, .h6 {
  font-family: var(--st-sans) !important;
  font-size: var(--st-fs-ui) !important;
  font-weight: 560 !important;
  letter-spacing: .012em !important;
  text-transform: none !important;
  line-height: 1.3 !important;
}
/* Headline lines that must break by sense: <span class="st-line">Im Weingarten</span> */
.st-line { display: block; }

/* Optical margin: Literata's stems carry about .056em of side-bearing, so at 60–130 px a heading's first letter
   stands 4–7 px inside the text edge below it. Pulling the two display sizes out by .05em puts I, E, D, H, U on the
   edge; A, V and W then hang a little past it, which is what optical alignment wants for diagonals. */
.uncode_text_column :is(h1, h2):not(.st-run),
.heading-text :is(h1, h2) {
  margin-left: -.05em !important;
}
/* An opening quote hangs into the margin so the word after it keeps the edge: <span class="st-hang">„</span>Der …
   („ is .51em wide; with the heading's own -.05em, -.52em puts the D's stem on the edge) */
.st-hang { margin-left: -.52em; }
@media (max-width: 600px) {
  .st-hang { margin-left: -.42em; }   /* the 20 px phone margin has room for most of the quote, not all of it */
}

em, i { font-style: italic; }
strong, b { font-weight: 600; }

/* Links in running text: cream, a soft underline that turns gold */
a {
  color: inherit;
  transition: color var(--st-quick) ease-out, text-decoration-color var(--st-quick) ease-out;
}
.uncode_text_column p a:not([class]),
.uncode_text_column li a:not([class]),
.uncode_text_column dd a:not([class]) {
  color: var(--st-cream);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(236, 228, 214, .38);
  text-underline-offset: .22em;
}
.uncode_text_column p a:not([class]):hover,
.uncode_text_column li a:not([class]):hover,
.uncode_text_column dd a:not([class]):hover {
  color: var(--st-cream);
  text-decoration-color: var(--st-gold);
}

/* Small print: prices, hours, tables, metadata line up in the sans with tabular figures */
.price,
.amount,
.st-price,
table,
.st-meta,
.st-caption {
  font-variant-numeric: lining-nums tabular-nums;
}
.st-nowrap { white-space: nowrap; }

/* Visible focus everywhere (Uncode removes outlines unless accessibility mode is on). */
:focus-visible {
  outline: 2px solid var(--st-gold-text) !important;
  outline-offset: 3px;
}
/* one ring colour: Uncode colours form fields' focus with the accent (#C3A063), the rest of the site uses the gold
   that reads as text (#D3B37E) */
html body :is(input, textarea, select, button, .btn):focus-visible { outline-color: var(--st-gold-text) !important; }

::selection {
  background: var(--st-gold);
  color: var(--st-label);
}

/* Phones: long German compounds break instead of overflowing; running text may hyphenate */
@media (max-width: 600px) {
  h1, h2, h3, h4,
  .h1, .h2, .h3, .h4,
  .product_title,
  dd {
    overflow-wrap: anywhere;
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
  }
  .uncode_text_column p {
    hyphens: auto;
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 4;
    hyphenate-limit-chars: 8 4 4;
  }
}

/* Native controls, scrollbars and form pickers render dark (the browser chrome follows the theme-color meta) */
html { color-scheme: dark; }

/* The ground everywhere: WordPress's custom background and Uncode's body colour are a cool grey */
html,
body,
body.custom-background,
.box-container,
.main-wrapper,
.main-container {
  background-color: var(--st-label) !important;
}

/* One hover grammar (2026-11-03). Uncode's ".main-wrapper a" transition (easeInOutCirc, colour only) won over ours, so
   underlines snapped; and its dark-skin hover painted link text gold.
   - running text: the words stay cream, the underline goes from 38 % cream to gold
   - small print and standalone links: soft → cream, a gold line (st-more, menus)
   - buttons change their fill */
.main-wrapper a,
.site-footer a {
  transition: color var(--st-quick) var(--st-ease), text-decoration-color var(--st-quick) var(--st-ease), opacity var(--st-quick) var(--st-ease);
}
html body .uncode_text_column :is(p, li, dd) a:not([class]):is(:hover, :focus-visible) {
  color: var(--st-cream) !important;
  text-decoration-color: var(--st-gold) !important;
}
html body .site-footer .uncode_text_column :is(p, li) a:not([class]):hover { color: var(--st-cream) !important; }
html body .st-footer-base .st-footer-legal a:is(:hover, :focus-visible) {
  color: var(--st-cream) !important;
  text-decoration: underline 1px !important;
  text-decoration-color: var(--st-gold) !important;
  text-underline-offset: .22em;
}