/* Loklöwen Design Tokens — Quelle: BRAND.md (extrahiert von lokloewen.de) */
@font-face { font-family: 'Gobold Headline'; font-weight: 700; src: url('fonts/gobold_bold-webfont.woff2') format('woff2'); }
@font-face { font-family: 'Gobold Headline'; font-weight: 400; src: url('fonts/gobold_lowplus-webfont.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans'; font-weight: 400; src: url('fonts/sourcesanspro-regular-webfont.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans'; font-weight: 700; src: url('fonts/sourcesanspro-bold-webfont.woff2') format('woff2'); }

:root {
  /* Brand */
  --gold: #be9b51;
  --gold-deep: #a28445;      /* Hover */
  --black: #000000;
  --ink: #111111;            /* Kacheln auf Schwarz */
  --white: #ffffff;
  --gray: #adadad;
  --gray-dark: #333333;
  /* Ampel (entsättigt, brand-verträglich) */
  --ok: #2e9e5b;
  --warn: #e0a82e;
  --crit: #d24a43;
  /* Helle Welt (Mockup B/C) */
  --paper: #f4f2ee;
  --card: #ffffff;
  --line: #e5e1d8;
  --text: #1a1a1a;
  --text-soft: #6b6358;
  /* Typo */
  --font-display: 'Gobold Headline', 'Arial Narrow', sans-serif;
  --font-body: 'Source Sans', 'Source Sans Pro', sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); }

.display { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; }

/* Brand-Button: 0px Radius ist Pflicht */
.ll-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold); color: var(--white); border: 0; border-radius: 0;
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 10px 18px; cursor: pointer; transition: background 0.15s;
}
.ll-btn:hover { background: var(--gold-deep); }
.ll-btn.is-done { background: var(--ok); cursor: default; }
.ll-btn--ghost { background: transparent; border: 1px solid var(--gray-dark); }
.ll-btn--ghost:hover { background: var(--gray-dark); }

/* Ampel-Punkt */
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot--ok { background: var(--ok); }
.dot--warn { background: var(--warn); }
.dot--crit { background: var(--crit); box-shadow: 0 0 8px rgba(210,74,67,0.5); }