/* ============================================================
   Der Schemitz — design tokens + baseline
   Palette lifted from schemitz.at itself: parchment #f5f3f0,
   greige #dddacf, slate ink #343f49, near-black #303033, the
   olive-gold #938967 / #7b7562 of the hero's inset glow — plus
   a muted cherry for the Leithaberger Edelkirsche. Display type
   Lora italic (succeeds the site's Droid Serif Italic), body
   Inter (the site's Helvetica role).
   All rules scope under #wrapwrap.o-sz; element resets use
   :where() to keep bare-element specificity (we still beat
   Bootstrap because these links load after the bundle).
   ============================================================ */

:root {
  /* palette — from the live site's CSS */
  --sz-ink: #343f49;          /* slate — body text */
  --sz-dark: #303033;         /* near-black — dark bands, primary buttons */
  --sz-dark-2: #3a3a3f;       /* raised panels on dark */
  --sz-dark-3: #47474d;       /* hairlines on dark */
  --sz-paper: #f5f3f0;        /* page background — warm parchment */
  --sz-greige: #dddacf;       /* the site's footer/section greige */
  --sz-greige-soft: #e9e6dd;  /* lighter greige for cards on greige */
  --sz-card: #ffffff;         /* card surface */
  --sz-gold: #938967;         /* the hero's inset-glow gold — main accent */
  --sz-gold-deep: #7b7562;    /* the site's olive-gold — hover/kickers */
  --sz-cherry: #963a48;       /* muted Edelkirsche cherry */
  --sz-cherry-deep: #7c2e3a;  /* hover */
  --sz-line: rgba(52, 63, 73, 0.16);
  --sz-muted: #68727d;        /* secondary text on light */
  --sz-cream: #eeece5;        /* text on dark */
  --sz-cream-dim: #b4b2ab;    /* secondary text on dark */

  /* type */
  --sz-font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --sz-font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* layout */
  --sz-wrap: 1160px;
  --sz-radius: 4px;
  --sz-header-h: 92px;
  --sz-shadow: 0 12px 32px rgba(52, 63, 73, 0.10);
  --sz-shadow-lg: 0 22px 54px rgba(52, 63, 73, 0.16);
}

/* ---------- baseline ---------- */

#wrapwrap.o-sz {
  background: var(--sz-paper);
  color: var(--sz-ink);
  font-family: var(--sz-font-body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

:where(#wrapwrap.o-sz) img {
  max-width: 100%;
  height: auto;
}

:where(#wrapwrap.o-sz) h1,
:where(#wrapwrap.o-sz) h2,
:where(#wrapwrap.o-sz) h3,
:where(#wrapwrap.o-sz) h4 {
  font-family: var(--sz-font-display);
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
  margin: 0;
}

:where(#wrapwrap.o-sz) p {
  margin: 0 0 1em;
}

:where(#wrapwrap.o-sz) a {
  color: var(--sz-gold-deep);
  text-decoration: none;
}
:where(#wrapwrap.o-sz) a:hover {
  color: var(--sz-ink);
  /* Bootstrap re-underlines links on :hover (higher specificity than the
     bare-element reset above) — kill it here too, or the nav's current-page
     border-bottom shows a second line and the brand text underlines. */
  text-decoration: none;
}

:where(#wrapwrap.o-sz) ul,
:where(#wrapwrap.o-sz) ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(#wrapwrap.o-sz) address {
  font-style: normal;
}

.o-sz .wrap {
  max-width: var(--sz-wrap);
  margin-inline: auto;
  padding-inline: 22px;
}
.o-sz .wrap--narrow {
  max-width: 880px;
}

.o-sz .screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.o-sz .skip-link:focus {
  position: fixed; top: 10px; left: 10px; z-index: 10000;
  width: auto; height: auto; clip: auto;
  background: var(--sz-dark); color: #fff;
  padding: 10px 16px; border-radius: var(--sz-radius);
}

/* ---------- shared type helpers ---------- */

.o-sz .kicker {
  font-family: var(--sz-font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sz-gold-deep);
  margin: 0 0 0.6rem;
}
.o-sz .kicker--ongold { color: var(--sz-gold); }
.o-sz .kicker--cherry { color: var(--sz-cherry); }

.o-sz .section-title {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  letter-spacing: 0.01em;
  margin-bottom: 0.45em;
}
.o-sz .section-title em {
  font-style: italic;
  color: var(--sz-gold-deep);
}
.o-sz .section-title--ondark { color: var(--sz-cream); }
.o-sz .section-title--ondark em { color: var(--sz-gold); }

.o-sz .section-lead {
  max-width: 660px;
  color: var(--sz-muted);
  font-size: 1.05rem;
}
.o-sz .section-head { margin-bottom: 2.4rem; }
.o-sz .section-head .section-lead { margin-inline: 0; }
.o-sz .section-head--center,
.o-sz .section-head--center .section-lead { text-align: center; margin-inline: auto; }

.o-sz .section { padding: 4.8rem 0; }
.o-sz .section--greige { background: var(--sz-greige); }
.o-sz .section--greige .section-lead,
.o-sz .section--greige .section-note { color: var(--sz-ink); opacity: 0.75; }

.o-sz .section-note {
  color: var(--sz-muted);
  font-size: 0.95rem;
  margin: 2rem 0 0;
  text-align: center;
}
.o-sz .section-more { text-align: center; margin-top: 2.2rem; }

.o-sz .prose { max-width: 66ch; }
.o-sz .prose h2 {
  font-size: 1.3rem;
  margin: 1.6em 0 0.5em;
  font-style: italic;
}
.o-sz .demo-note {
  border: 1px dashed var(--sz-gold);
  border-radius: var(--sz-radius);
  background: #f2efe6;
  color: var(--sz-gold-deep);
  font-size: 0.92rem;
  padding: 10px 14px;
}

/* ---------- buttons ---------- */

.o-sz .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--sz-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.8em 1.6em;
  border-radius: var(--sz-radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.o-sz .btn--lg { padding: 0.95em 1.9em; }

/* primary = the live site's dark button */
.o-sz .btn--primary {
  background: var(--sz-dark);
  color: #fff;
}
.o-sz .btn--primary:hover {
  background: var(--sz-gold-deep);
  color: #fff;
}

/* gold — hero CTA on the photo */
.o-sz .btn--gold {
  background: var(--sz-gold);
  color: #fff;
}
.o-sz .btn--gold:hover {
  background: var(--sz-gold-deep);
  color: #fff;
}

.o-sz .btn--cherry {
  background: var(--sz-cherry);
  color: #fff;
}
.o-sz .btn--cherry:hover {
  background: var(--sz-cherry-deep);
  color: #fff;
}

.o-sz .btn--ghost {
  border-color: var(--sz-ink);
  color: var(--sz-ink);
  background: transparent;
}
.o-sz .btn--ghost:hover {
  background: var(--sz-ink);
  color: var(--sz-paper);
}

.o-sz .btn--ghost-light {
  border-color: #fff;
  color: #fff;
  background: rgba(48, 48, 51, 0.25);
}
.o-sz .btn--ghost-light:hover {
  background: #fff;
  color: var(--sz-dark);
}

/* ---------- brand SVG coloring (inline via t-call) ---------- */

.o-sz .sz-cherries { display: block; width: 46px; height: 46px; }
.o-sz .sz-cherries__stem { stroke: var(--sz-gold-deep); stroke-width: 2; stroke-linecap: round; }
.o-sz .sz-cherries__leaf { stroke: var(--sz-gold-deep); stroke-width: 2; stroke-linejoin: round; fill: none; }
.o-sz .sz-cherries__fruit { fill: var(--sz-cherry); }

.o-sz .sz-vine { display: block; width: 64px; height: 24px; }
.o-sz .sz-vine path { stroke: var(--sz-gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }

/* the divider: gold hairlines flanking the vine ornament */
.o-sz .leaf-divider {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  max-width: 380px;
  margin: 1.2rem 0 0;
}
.o-sz .leaf-divider::before,
.o-sz .leaf-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sz-gold);
  opacity: 0.55;
}
.o-sz .section-head--center .leaf-divider,
.o-sz .page-hero .leaf-divider { margin-inline: auto; justify-content: center; }

/* ---------- the signature gold frame (the hero's inset glow, as a card) ---------- */

.o-sz .gold-frame {
  position: relative;
  background: var(--sz-card);
  border: 1px solid var(--sz-gold);
  border-radius: var(--sz-radius);
  box-shadow: inset 0 0 0 1px rgba(147, 137, 103, 0);
}
.o-sz .gold-frame::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(147, 137, 103, 0.38);
  border-radius: 2px;
  pointer-events: none;
}

/* ---------- reveal on scroll ---------- */

.o-sz [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.o-sz [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
/* QA switch (?noanim=1) — render instantly, no transitions */
#wrapwrap.o-sz.qa-noanim [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .o-sz [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}