/** Shopify CDN: Minification failed

Line 171:10 Expected identifier but found whitespace
Line 171:22 Unexpected ";"

**/
/* =========================================================
   Freese Holz – Base Styles (scoped)
   File: assets/freese-holz-basestyles.css
   Scope: Only inside .fh-page // gilt also NUR FÜR UNSERE SEITEN, nicht die Kollektionen/Produkte
   ========================================================= */

.fh-page {
  /* hier kommen alle Design tokens = festgesetzte Variablen,
     die bei Verwendung immer diesen Wert haben und auf allen Seiten verwendet werden.
     Änderungen können dann zentral durchgeführt werden (z. B. Brand-Color ändern → Effekt auf alle Seiten). */

  /* Layout */
  --fh-max: 1180px;
  --fh-pad-x: 18px;

  /* Colors */
  --fh-text: #1b1b1b;
  --fh-muted: #5a5a5a;
  --fh-border: rgba(0, 0, 0, .12);
  --fh-bg: #ffffff;
  --fh-surface: #faf7f7;

  /* Brand */
  --fh-brand: #611212;
  --fh-brand-contrast: #ffffff;

  /* Buttons */
  --fh-btn-bg: var(--fh-brand);
  --fh-btn-text: #ffffff;

  /* Radius */
  --fh-radius: 0; /* bewusst kantig */
  --fh-radius-sm: 0;

  /* Spacing = fest definierte Abstände */
  --fh-space-1: 8px;
  --fh-space-2: 12px;
  --fh-space-3: 18px;
  --fh-space-4: 26px;
  --fh-space-5: 42px;
  --fh-space-6: 64px;

  /* Grid = Abstände zwischen Elementen (Kacheln, Spalten, Cards usw.) sind standardmäßig hierüber einheitlich geregelt (ruhiger Look).
     Abstände können ohne neue Klassen pro Seite/Section/Komponente angepasst werden, indem --fh-gap einen anderen Wert erhält
     (z. B. --fh-gap: 26px oder --fh-gap: var(--fh-space-4)). */
  --fh-gap: var(--fh-space-3);

  color: var(--fh-text);
  background: transparent;
}

/* ---------------------------------------------------------
   Layout building blocks (low specificity via :where())
   --------------------------------------------------------- */

/* Container */
.fh-page :where(.fh-container) {
  width: 100%;
  max-width: var(--fh-max);
  margin: 0 auto;
  padding-left: var(--fh-pad-x);
  padding-right: var(--fh-pad-x);
}

/* Sections spacing */
.fh-page :where(.fh-section) {
  padding-top: var(--fh-space-6);
  padding-bottom: var(--fh-space-6);
}

.fh-page :where(.fh-section--tight) {
  padding-top: var(--fh-space-5);
  padding-bottom: var(--fh-space-5);
}

/* Stack pattern (kontrollierte Abstände z. B. zwischen Überschrift und Absatz,
   die durch das Layout bestimmt werden, nicht durch zufällige Einzel-Margins) */
.fh-page :where(.fh-stack) > * {
  margin: 0;
}

.fh-page :where(.fh-stack) > * + * {
  margin-top: var(--fh-space-2);
}

.fh-page :where(.fh-stack--lg) > * + * {
  margin-top: var(--fh-space-3);
}

/* ---------------------------------------------------------
   Typography
   --------------------------------------------------------- */

.fh-page h1,
.fh-page h2,
.fh-page h3 {
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 var(--fh-space-2);
}

.fh-page h1 { font-size: clamp(30px, 3.4vw, 44px); }
.fh-page h2 { font-size: clamp(24px, 2.6vw, 34px); }
.fh-page h3 { font-size: clamp(18px, 2.1vw, 24px); }

.fh-page p {
  margin: 0 0 var(--fh-space-2);
  line-height: 1.6;
  color: var(--fh-text);
}

.fh-page .fh-muted { color: var(--fh-muted); }

/* ---------------------------------------------------------
   Links – nicht pauschal unterstreichen
   Fließtext-Links → unterstrichen (Erkennbarkeit, UX)
   UI-Links (Cards, Tiles, Buttons, Headlines) → nicht automatisch unterstrichen
   --------------------------------------------------------- */

/* Default: Links im Fließtext unterstreichen (in Absätzen oder Listenelementen) */
.fh-page p a,
.fh-page li a {
  color: var(--fh-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* In "UI-Kontext" (Buttons, Cards, Nav/Tile) standardmäßig NICHT unterstreichen */
.fh-page :where(.fh-btn),
.fh-page :where(.fh-card) a,
.fh-page :where(.fh-tile) a,
.fh-page :where(.fh-nav) a {
  text-decoration: none;
}

.fh-page :where(.fh-link) {
  color: var(--fh-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.fh-page a:hover { opacity: .9; }

/* ---------------------------------------------------------
   Buttons – Freese Holz Standard (kantig)
   --------------------------------------------------------- */

/* Basis-Button (vereinheitlicht alle Button-Varianten) */
.fh-page :where(a.button,
                a.btn,
                .btn,
                .btn--primary,
                .btn--secondary,
                .fh-btn) {
  background: var(--fh-btn-bg) 
  color: var(--fh-btn-text) 
  border: 1px solid var(--fh-btn-bg) 

  
}


  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .85em 1.45em;
  border-radius: 0; /* bewusst kantig */

  font: inherit;
  font-weight: 600;
  line-height: 1.1;

  text-decoration: none;
  cursor: pointer;

  transition: opacity .15s ease, transform .02s ease;
  -webkit-tap-highlight-color: transparent;
}

.fh-page :where(a.button:hover,
                a.btn:hover,
                .fh-btn:hover) {
  opacity: .9;
}

.fh-page :where(a.button:active,
                a.btn:active,
                .fh-btn:active) {
  transform: translateY(1px);
}

.fh-page :where(a.button:focus-visible,
                a.btn:focus-visible,
                .fh-btn:focus-visible) {
  outline: 2px solid var(--fh-btn-bg);
  outline-offset: 2px;
}

.fh-page :where(.fh-btn--block) {
  width: 100%;
}

/* ---------------------------------------------------------
   Cards
   --------------------------------------------------------- */

.fh-page :where(.fh-card) {
  background: var(--fh-bg);
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius);
  box-shadow: var(--fh-shadow);
  padding: var(--fh-space-4);
}

.fh-page :where(.fh-card--flat) {
  box-shadow: none;
  background: var(--fh-surface);
}

/* ---------------------------------------------------------
   Media – display:block nur in Medienblöcken
   --------------------------------------------------------- */

.fh-page img {
  max-width: 100%;
  height: auto;
}

.fh-page :where(.fh-media) {
  border-radius: var(--fh-radius);
  overflow: hidden;
  border: 1px solid var(--fh-border);
  background: var(--fh-surface);
}

.fh-page :where(.fh-media) img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------
   Grids – gap über Token steuerbar
   --------------------------------------------------------- */

.fh-page :where(.fh-grid) {
  display: grid;
  gap: var(--fh-gap);
}

.fh-page :where(.fh-grid--2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fh-page :where(.fh-grid--3) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fh-page :where(.fh-grid--4) { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
  .fh-page :where(.fh-grid--3),
  .fh-page :where(.fh-grid--4) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .fh-page :where(.fh-grid--2),
  .fh-page :where(.fh-grid--3),
  .fh-page :where(.fh-grid--4) { grid-template-columns: 1fr; }
}

/* Lists */
.fh-page ul,
.fh-page ol {
  margin: 0 0 var(--fh-space-2);
  padding-left: 1.2em;
}

.fh-page li { margin: 0 0 6px; }

/* Divider */
.fh-page :where(.fh-divider) {
  height: 1px;
  background: var(--fh-border);
  margin: var(--fh-space-5) 0;
}

/* Utilities (scoped) */
.fh-page :where(.fh-mt-0) { margin-top: 0 !important; }
.fh-page :where(.fh-mb-0) { margin-bottom: 0 !important; }
.fh-page :where(.fh-mt-2) { margin-top: var(--fh-space-2) !important; }
.fh-page :where(.fh-mt-3) { margin-top: var(--fh-space-3) !important; }
.fh-page :where(.fh-mt-4) { margin-top: var(--fh-space-4) !important; }
.fh-page :where(.fh-mb-2) { margin-bottom: var(--fh-space-2) !important; }
.fh-page :where(.fh-mb-3) { margin-bottom: var(--fh-space-3) !important; }
.fh-page :where(.fh-mb-4) { margin-bottom: var(--fh-space-4) !important; }