/*
 * Global styles — FAVORIT Massivhaus Theme
 *
 * Extracted from the homepage design ("FAVORIT Massivhaus - Startseite").
 * Holds the shared design layer: design tokens (:root), reset/base elements,
 * the .wrap container and the cross-cutting UI primitives (buttons, chips,
 * nav links, pills, eyebrows, icons). Section-specific styles live in their
 * respective Beaver Builder modules.
 *
 * The Instrument Sans @font-face rules from the design are intentionally NOT
 * copied here — the font is self-hosted via style.css.
 */

:root{
  --ink:#1f1f1d;
  --ink-2:#2a2a28;
  --ink-soft:#5a5854;
  --ink-mute:#74716a;
  --em:#4a473f;
  --em-dark:rgba(255,255,255,.8);
  --line:#e7e3da;
  --line-2:#d6d1c4;
  --bg:#fbfaf6;
  --bg-2:#f4f1e9;
  --bg-3:#ecebe4;
  --paper:#ffffff;
  --red:#E3000F;
  --red-ink:#b8000c;
  --black-hover:#0a0a0a;
  --radius:10px;
  --radius-sm:6px;
  --radius-lg:18px;
  --shadow-card:0 1px 2px rgba(20,18,12,.04), 0 8px 24px -12px rgba(20,18,12,.10);
  --shadow-pop:0 30px 60px -30px rgba(20,18,12,.30), 0 8px 24px -12px rgba(20,18,12,.18);
  --sans:"Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-size:15px;line-height:1.55;letter-spacing:-0.005em}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--red);color:#fff}

.wrap{max-width:1320px;margin:0 auto;padding:0 40px}

/*
 * Section modules — shared frame for all our custom BB modules.
 * Every fmt- module root carries the .fmt-section marker class (added in its
 * frontend.php render_attributes call).
 *
 * Cancel BB's default module margin: BB applies it via the selector
 * `.fl-module:where(.fl-module:not(:has(> .fl-module-content)))`, whose :where()
 * contributes 0 specificity — so it is effectively `.fl-module` = (0,1,0).
 * Qualifying our marker with .fl-module lands at (0,2,0): wins without
 * !important, and targets only our modules so core BB modules keep their margin.
 */
.fmt-section.fl-module{margin:0}

/* Display headline */
.h-display{font-size:64px; line-height:.98; letter-spacing:-0.025em; font-weight:500; margin:0; color:var(--ink)}
.h-display em{font-style:italic;font-weight:400;color:var(--ink-soft)}
.h-display--hero{font-size:96px;line-height:.96}
.h-display--light{color:#fff}
.h-display--light em{color:rgba(255,255,255,.8)}

/* Atoms */
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-mute);font-weight:500}
.eyebrow .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--red);vertical-align:middle;margin:0 8px 2px 0}
.eyebrow--light{color:rgba(255,255,255,.9)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.6);font-size:12px;color:var(--ink-soft)}
.text-mute{color:var(--ink-mute)}
.text-soft{color:var(--ink-soft)}

.icon{width:var(--icon-size,16px);height:var(--icon-size,16px);display:inline-block;vertical-align:-3px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:6px;border:1px solid transparent;background:var(--ink-2);color:#fff;font-weight:500;font-size:14px;cursor:pointer;transition:all .2s ease;letter-spacing:-0.005em;font-family:inherit}
.btn:hover{transform:translateY(-1px); background:var(--black-hover); color:#fff;}
.btn--red{background:var(--red); color:#fff;}
.btn--red:hover{background:var(--red); color:#fff; transform:translateY(-1px); box-shadow:0 8px 20px -8px rgba(227,0,15,.5)}
.btn--ghost{background:#353533;color:#fff;border-color:transparent}
.btn--ghost:hover{background:#000; color:#fff; border-color:transparent;}
.btn--lighton-dark{background:#fff; color:var(--ink); border-color:#fff}
.btn--lighton-dark:hover{background:var(--bg); color:var(--ink); border-color:var(--bg);}
.btn--text{background:transparent;color:var(--ink);padding:11px 6px;font-weight:500;}
.btn--text:hover{background:transparent; color:var(--red); transform:none;}
.btn--lg{padding:14px 22px;font-size:15px}
.btn .arr{transition:transform .2s ease}
.btn:hover .arr{transform:translateX(3px)}

/* Icon button */
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--ink);cursor:pointer;transition:all .15s ease}
.iconbtn:hover{background:rgba(0,0,0,.06);}
.iconbtn--float{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);color:var(--ink-soft)}
.iconbtn--float:hover{background:#fff;color:var(--red)}
.iconbtn--dark{background:rgba(255,255,255,.08);color:#fff;width:36px;height:36px;border-radius:50%}
.iconbtn--dark:hover{background:rgba(255,255,255,.18);}

/* Nav links */
.nav-link{padding:8px 14px;border-radius:6px;color:var(--ink);display:inline-flex;align-items:center;gap:6px;transition:all .15s ease;font-weight:400}
.nav-link:hover{background:rgba(0,0,0,.05)}
.nav-link--active{background:var(--ink-2);color:#fff}
.nav-link--active:hover{background:var(--black-hover);color:#fff}

/* Chip filter */
.chip{display:inline-flex; align-items:center; gap:7px; padding:8px 16px; font-size:13px; border-radius:4px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; transition:all .15s ease; font-family:inherit; text-decoration:none}
.chip:hover{border-color:var(--ink-2)}
.chip--on{background:var(--ink-2); color:#fff; border-color:var(--ink-2)}
.chip--on:hover{background:var(--black-hover); border-color:var(--black-hover); color:#fff}
/* Count badge inside a chip. */
.chip__count{padding:1px 7px; border-radius:999px; background:var(--bg-3); color:var(--ink-soft); font-size:10px; font-weight:600}
.chip--on .chip__count{background:rgba(255,255,255,.22); color:#fff}

/* Link arrow */
.link-arrow{background:none;border:0;color:var(--ink);font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-family:inherit;padding:0}
.link-arrow:hover{color:var(--red)}

/* Card hover */
.card-house{transition:transform .25s ease, box-shadow .25s ease}
.card-house:hover{transform:translateY(-3px); box-shadow:0 12px 32px -16px rgba(20,18,12,.18)}

.step-card{transition:transform .25s ease}
.step-card:hover{transform:translateY(-3px)}

.news-card{transition:all .15s ease}
.news-card:hover{border-color:var(--ink-2); transform:translateY(-2px)}

/* Shared responsive — container padding and display-headline scaling.
   Section modules carry .h-display (+ optional --hero size modifier); the
   per-section layout (max-width, margins) stays in each module's CSS. */
@media (max-width:1100px){
  .wrap{padding:0 24px}
  .h-display{font-size:48px}
  .h-display--hero{font-size:64px}
}
@media (max-width:680px){
  .h-display--hero{font-size:44px}
}