@font-face{font-family:"Nunito";src:url("/assets/fonts/nunito-latin-wght-normal.woff2") format("woff2");font-weight:200 1000;font-display:swap}
@font-face{font-family:"Nunito";src:url("/assets/fonts/nunito-latin-ext-wght-normal.woff2") format("woff2");font-weight:200 1000;font-display:swap;unicode-range:U+0100-024F}
/* Bookelva Landing — Design-Tokens (Variante «hell») + selbst gehostete Fonts.
   Die Seiten setzen Farben grösstenteils inline via var(...) — dieses Stylesheet
   ist die einzige Stelle, an der die Palette definiert wird. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/plexsans.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plexmono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #F4F1EA;
  --bg-card: #FFFFFF;
  --border: #DAD5CA;
  --text: #16181B;
  --text-muted: #5C6068;
  --accent: #0E6B66;
  --accent-hover: #0A5450;
  --accent-soft: #E1F0EE;
  --success: #1F7A3A;
  --danger: #B3261E;
  --font-head: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); }

h1, h2, h3 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; }

a { color: var(--accent); text-decoration: none; transition: color 150ms ease; }
a:hover { color: var(--accent-hover); }

/* Buttons: primär gefüllt, sekundär mit Rahmen — ohne Glow/Schatten */
.bk-cta {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: background 150ms ease;
}
.bk-cta:hover { background: var(--accent-hover) !important; color: #fff !important; transform: none; filter: none; }
.bk-ghost {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  transition: border-color 150ms ease, background 150ms ease;
}
.bk-ghost:hover { border-color: var(--accent) !important; color: var(--text) !important; background: var(--bg-card) !important; }
.bk-navcta {
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  background: var(--accent) !important;
  color: #fff !important;
  transition: background 150ms ease;
}
.bk-navcta:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; color: #fff !important; }

.bk-navlink { color: var(--text-muted); transition: color 150ms ease; }
.bk-navlink:hover { color: var(--text); }
.bk-plain:hover { color: var(--text); }

.bk-card { transition: border-color 150ms ease; }
.bk-card:hover { border-color: var(--accent) !important; color: inherit !important; }

/* Eyebrow-Labels: gedeckt statt Akzentfarbe */
.bk-eyebrow {
  color: var(--text-muted) !important;
  text-transform: uppercase;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  font-weight: 600;
}