/*
 * Holzmarkt — design tokens, reset, typography, buttons, forms, utilities.
 * Colours come from CSS variables so that the dashboard settings (and
 * Elementor global colours) can override them without touching this file.
 */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/Manrope-Regular.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("../fonts/Manrope-Bold.ttf") format("truetype"); }

:root {
  /* Palette: forest green, anthracite, white, natural wood beige. */
  --hm-green: #1F4A2E;
  --hm-green-dark: #163722;
  --hm-green-700: #2A5F3C;
  --hm-green-50: #EEF4EF;
  --hm-anthracite: #25292D;
  --hm-anthracite-2: #1B1E21;
  --hm-ink: #1E2226;
  --hm-text: #3C434A;
  --hm-muted: #6B737B;
  --hm-line: #E4DED3;
  --hm-line-2: #EFEBE4;
  --hm-white: #FFFFFF;
  --hm-beige: #E8DCC6;
  --hm-beige-light: #F7F2EA;
  --hm-beige-mid: #F0E7D8;
  --hm-wood: #A35F21;        /* copper wood accent, AA on white */
  --hm-wood-dark: #864C17;
  --hm-success: #1E7A46;
  --hm-warning: #A86A00;
  --hm-danger: #B42318;

  --hm-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --hm-font-head: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --hm-radius-sm: 6px;
  --hm-radius: 10px;
  --hm-radius-lg: 16px;
  --hm-shadow-sm: 0 1px 2px rgba(20, 24, 28, .06), 0 1px 3px rgba(20, 24, 28, .05);
  --hm-shadow: 0 6px 18px rgba(20, 24, 28, .08), 0 2px 6px rgba(20, 24, 28, .05);
  --hm-shadow-lg: 0 24px 48px rgba(20, 24, 28, .16);
  --hm-container: 1320px;
  --hm-gutter: clamp(16px, 3vw, 32px);
  --hm-header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { overflow-x: clip; }
body {
  margin: 0; background: var(--hm-white); color: var(--hm-text);
  font: 400 16px/1.65 var(--hm-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
svg { flex-shrink: 0; }
a { color: var(--hm-green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--hm-green-700); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--hm-wood) 70%, white); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4, h5 { font-family: var(--hm-font-head); color: var(--hm-ink); line-height: 1.2; margin: 0 0 .6em; font-weight: 800; letter-spacing: -.015em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.25em; }
hr { border: 0; border-top: 1px solid var(--hm-line); margin: 2rem 0; }
table { border-collapse: collapse; width: 100%; }
.screen-reader-text, .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--hm-ink); color: #fff; padding: 10px 16px; border-radius: var(--hm-radius-sm); }
.skip-link:focus { top: 12px; }

.hm-container { width: 100%; max-width: var(--hm-container); margin-inline: auto; padding-inline: var(--hm-gutter); }
.hm-section { padding-block: clamp(48px, 7vw, 96px); }
.hm-section--beige { background: var(--hm-beige-light); }
.hm-section--dark { background: var(--hm-anthracite); color: #D7DBDF; }
.hm-section--dark h2, .hm-section--dark h3 { color: #fff; }
.hm-kicker { display: inline-flex; align-items: center; gap: 8px; font: 700 .78rem/1 var(--hm-font); letter-spacing: .12em; text-transform: uppercase; color: var(--hm-wood); margin-bottom: 14px; }
.hm-kicker::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.hm-section-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); }
.hm-section-head--center { margin-inline: auto; text-align: center; }
.hm-section-head--center .hm-kicker::after { content: ""; width: 22px; height: 2px; background: currentColor; }
.hm-lead { font-size: 1.125rem; color: var(--hm-muted); }

/* Buttons */
.hm-btn {
  --b: var(--hm-green); --c: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px; border-radius: var(--hm-radius-sm); border: 2px solid var(--b);
  background: var(--b); color: var(--c); font: 700 .95rem/1.2 var(--hm-font); letter-spacing: .01em;
  text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
  white-space: nowrap;
}
.hm-btn:hover { background: var(--hm-green-dark); border-color: var(--hm-green-dark); color: #fff; }
.hm-btn:active { transform: translateY(1px); }
.hm-btn svg { width: 20px; height: 20px; flex: none; }
.hm-btn--buy { --b: var(--hm-wood); }
.hm-btn--buy:hover { background: var(--hm-wood-dark); border-color: var(--hm-wood-dark); }
.hm-btn--outline { background: transparent; color: var(--hm-green); }
.hm-btn--outline:hover { background: var(--hm-green); color: #fff; }
.hm-btn--light { --b: #fff; --c: var(--hm-ink); }
.hm-btn--light:hover { background: var(--hm-beige-light); border-color: var(--hm-beige-light); color: var(--hm-ink); }
.hm-btn--ghost-light { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.hm-btn--ghost-light:hover { background: #fff; border-color: #fff; color: var(--hm-ink); }
.hm-btn--lg { min-height: 56px; padding: 14px 30px; font-size: 1.02rem; }
.hm-btn--sm { min-height: 38px; padding: 8px 14px; font-size: .86rem; }
.hm-btn--block { width: 100%; }

/* Badges */
.hm-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font: 600 .78rem/1.2 var(--hm-font); background: var(--hm-green-50); color: var(--hm-green); }
.hm-badge svg { width: 14px; height: 14px; }
.hm-badge--wood { background: #F6EBDD; color: var(--hm-wood-dark); }
.hm-badge--stock { background: #E8F5EC; color: var(--hm-success); }
.hm-badge--warn { background: #FDF3E1; color: var(--hm-warning); }
.hm-badge--dark { background: var(--hm-anthracite); color: #fff; }

/* Forms */
.hm-field { display: grid; gap: 6px; margin-bottom: 16px; }
.hm-field label { font-weight: 600; font-size: .9rem; color: var(--hm-ink); }
.hm-input, .hm-field input:not([type=checkbox]):not([type=radio]), .hm-field select, .hm-field textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid #CFC7B9; border-radius: var(--hm-radius-sm); background: #fff; color: var(--hm-ink);
  transition: border-color .15s, box-shadow .15s;
}
.hm-field textarea { min-height: 140px; resize: vertical; }
.hm-input:focus, .hm-field input:focus, .hm-field select:focus, .hm-field textarea:focus { outline: none; border-color: var(--hm-green); box-shadow: 0 0 0 3px rgba(31, 74, 46, .15); }

.hm-icon { width: 22px; height: 22px; flex: none; }