/* bergclimber.de — Brand „Alpenglühen“
 * Eine Quelle für Hub und Werkzeuge. Tokens + wenige Bausteine (Header, Footer, Zeichen, Eyebrow,
 * Buttons, Karten, Höhenlinien). Folgt dem System-Farbschema; der Hub-Hero bleibt immer Nacht.
 * Keine Webfonts, keine externen Abhängigkeiten.
 */

:root {
  color-scheme: light dark;
  /* Kalk (Papier) */
  --bc-bg: #f6f3ec;
  --bc-card: #ffffff;
  --bc-card-2: #fbf9f4;
  --bc-line: #e3ddd0;
  --bc-line-2: #cfc8b8;
  --bc-ink: #161c25;
  --bc-ink-2: #555e6b;
  --bc-ink-3: #848c97;
  /* Alpenglühen */
  --bc-accent: #e09a00;        /* Markierungen, Flächen */
  --bc-accent-text: #8f5f00;   /* Text/Links auf Papier (AA) */
  --bc-accent-soft: #fff1cc;
  --bc-ember: #c4480f;
  --bc-glacier: #2f6fb5;
  --bc-moss: #3e7d4f;
  --bc-danger: #b3261e;
  /* Nacht-Panel (Hero, immer dunkel) */
  --bc-night: #0f141b;
  --bc-night-2: #171e27;
  --bc-night-ink: #f3efe6;
  --bc-night-ink-2: #aab2bd;
  --bc-radius: 10px;
  --bc-radius-s: 6px;
  --bc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --bc-shadow: 0 1px 2px rgba(22, 28, 37, 0.06), 0 8px 24px rgba(22, 28, 37, 0.06);
  --bc-glow: 0 0 0 1px rgba(242, 169, 0, 0.35), 0 12px 40px rgba(242, 169, 0, 0.22);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bc-bg: #0f141b;
    --bc-card: #171e27;
    --bc-card-2: #1c242e;
    --bc-line: #2a323d;
    --bc-line-2: #3a434f;
    --bc-ink: #f3efe6;
    --bc-ink-2: #aab2bd;
    --bc-ink-3: #7d8591;
    --bc-accent: #f2a900;
    --bc-accent-text: #f2a900;
    --bc-accent-soft: #2b2410;
    --bc-ember: #e3642a;
    --bc-glacier: #5b95d9;
    --bc-moss: #6db37f;
    --bc-danger: #ef6a63;
    --bc-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

html { font-family: var(--bc-font); -webkit-font-smoothing: antialiased; }
body.bc { margin: 0; background: var(--bc-bg); color: var(--bc-ink); line-height: 1.5; }
.bc a { color: var(--bc-accent-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.bc a:hover { color: var(--bc-ember); }

/* Zeichen: Gratlinie mit Gipfelpunkt */
.bc-mark { display: inline-block; width: 1.9em; height: 1.2em; vertical-align: -0.25em; }
.bc-mark path { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; }
.bc-mark circle { fill: var(--bc-accent); }

.bc-wordmark {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-weight: 800; letter-spacing: -0.02em; color: var(--bc-ink); text-decoration: none;
}
.bc-wordmark:hover { color: var(--bc-ink); }
.bc-wordmark .tld { font-weight: 500; color: var(--bc-ink-3); letter-spacing: 0; }

.bc-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bc-accent-text);
}

/* Kopfzeile */
.bc-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 0; border-bottom: 1px solid var(--bc-line); margin-bottom: 24px;
}
.bc-header nav { display: flex; gap: 18px; font-size: 14px; }
.bc-header nav a { color: var(--bc-ink-2); text-decoration: none; }
.bc-header nav a:hover, .bc-header nav a[aria-current] { color: var(--bc-ink); }
.bc-header .tool { color: var(--bc-ink-3); font-weight: 500; }
.bc-header .tool::before { content: "/"; margin: 0 8px; color: var(--bc-line-2); }

/* Fußzeile mit Horizontlinie */
.bc-footer { margin-top: 48px; padding-top: 18px; font-size: 12px; color: var(--bc-ink-3); position: relative; }
.bc-footer::before {
  content: ""; display: block; height: 14px; margin-bottom: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 14' preserveAspectRatio='none'%3E%3Cpath d='M0 13 L60 6 L90 10 L150 2 L180 8 L230 4 L270 11 L320 3 L350 9 L400 13' fill='none' stroke='%23b4ad9d' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  opacity: 0.9;
}
.bc-footer a { color: var(--bc-ink-2); }
.bc-footer .row { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; }

/* Buttons */
.bc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--bc-radius-s); font: inherit; font-size: 14px; font-weight: 600;
  border: 1px solid var(--bc-line-2); background: var(--bc-card); color: var(--bc-ink); cursor: pointer;
  text-decoration: none; box-shadow: 0 1px 1px rgba(0,0,0,0.04);
}
.bc-btn:hover { border-color: var(--bc-ink-3); color: var(--bc-ink); }
.bc-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.bc-btn-primary { background: var(--bc-accent); border-color: var(--bc-accent); color: #16130a; }
.bc-btn-primary:hover { background: #f2a900; border-color: #f2a900; color: #16130a; box-shadow: var(--bc-glow); }
.bc a.bc-btn-primary, .bc-night a.bc-btn-primary { color: #16130a; }
.bc a.bc-btn { text-decoration: none; }

/* Karten */
.bc-card {
  background: var(--bc-card); border: 1px solid var(--bc-line); border-radius: var(--bc-radius);
  padding: 16px; box-shadow: var(--bc-shadow);
}
.bc-card-accent { border-left: 3px solid var(--bc-accent); }

/* Hinweise */
.bc-note { border-radius: var(--bc-radius-s); padding: 8px 12px; font-size: 14px; border: 1px solid; }
.bc-note-warn { background: var(--bc-accent-soft); border-color: var(--bc-accent); color: var(--bc-ink); }
.bc-note-error { background: color-mix(in srgb, var(--bc-danger) 10%, var(--bc-card)); border-color: var(--bc-danger); color: var(--bc-ink); }
.bc-note-ok { background: color-mix(in srgb, var(--bc-moss) 12%, var(--bc-card)); border-color: var(--bc-moss); color: var(--bc-ink); }

/* Nacht-Panel mit Höhenlinien (Hero) */
.bc-night {
  position: relative; overflow: hidden; color: var(--bc-night-ink);
  background: radial-gradient(120% 80% at 80% 110%, rgba(242, 169, 0, 0.22), transparent 60%), linear-gradient(180deg, var(--bc-night-2), var(--bc-night));
  border-radius: var(--bc-radius);
}
.bc-night .bc-eyebrow { color: var(--bc-accent); }
.bc-night a { color: var(--bc-accent); }
.bc-contours::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.16;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300' viewBox='0 0 600 300'%3E%3Cg fill='none' stroke='%23f2a900' stroke-width='1'%3E%3Cpath d='M-20 250 C 80 200 140 260 220 210 S 380 180 460 220 S 580 260 640 230'/%3E%3Cpath d='M-20 220 C 90 170 150 230 230 180 S 390 150 470 190 S 590 230 640 200'/%3E%3Cpath d='M-20 190 C 100 140 160 200 240 150 S 400 120 480 160 S 600 200 640 170'/%3E%3Cpath d='M-20 160 C 110 110 170 170 250 120 S 410 90 490 130 S 610 170 640 140'/%3E%3Cpath d='M-20 130 C 120 80 180 140 260 90 S 420 60 500 100 S 620 140 640 110'/%3E%3Cpath d='M-20 100 C 130 50 190 110 270 60 S 430 30 510 70 S 630 110 640 80'/%3E%3C/g%3E%3C/svg%3E") repeat;
  background-size: 600px 300px;
}

/* Hilfsklassen */
.bc-wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.bc-muted { color: var(--bc-ink-3); }
.bc-num { font-variant-numeric: tabular-nums; }