/* Landing page layout on top of theme/bcde-theme.css ("Schablone").
   Colours come only from --bc-* tokens; no gradients, glows, textures or blur. */

html { scroll-behavior: smooth; background: var(--bc-page); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bc-page); }
a { color: inherit; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 32px;
  background: var(--bc-page);
  border-bottom: 1px solid var(--bc-line);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { height: 38px; border-radius: var(--bc-radius-sm); border: 1px solid var(--bc-line); }
.brand__name { font: 400 22px/1 var(--bc-font-display); letter-spacing: .05em; text-transform: uppercase; }
.nav nav { display: flex; align-items: center; gap: 24px; }
.nav nav a:not(.bc-btn) { text-decoration: none; font-weight: 600; font-size: 14px; color: var(--bc-muted); }
.nav nav a:not(.bc-btn):hover { color: var(--bc-fg); }
.bc-btn { text-decoration: none; }

/* Banner: shown whole, no fade, so the baked-in logo is never cropped */
.banner { display: block; width: 100%; aspect-ratio: 4 / 1; object-fit: cover; border-bottom: 1px solid var(--bc-line); }

.wrap { width: 100%; max-width: 1180px; margin: -48px auto 0; padding: 0 32px 64px; display: grid; gap: 24px; position: relative; }

/* Hero panel */
.hero .bc-header { padding: 22px 24px 28px; }
.hero .bc-header::after { left: 24px; right: 24px; }
.hero .bc-title { font-size: 64px; }
.hero__body { padding: 8px 24px 24px; display: grid; gap: 20px; }
.lead { margin: 0; max-width: 620px; font-size: 18px; line-height: 1.5; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.connect { max-width: 460px; }
.connect .bc-input { padding-right: 4px; }
.connect input { font-family: var(--bc-font-mono); font-size: 14px; }
.connect__copy { height: 32px; padding: 0 12px; font-size: 13px; }
.bc-help .bc-kbd { margin: 0 2px; }

.whitelist { width: auto; max-width: 460px; padding: 10px 12px; background: var(--bc-item); border: 1px solid var(--bc-line); border-radius: var(--bc-radius-sm); }

.facts { margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--bc-line); }
.facts > div { padding: 14px 24px 16px; display: grid; gap: 4px; }
.facts > div + div { border-left: 1px solid var(--bc-line); }
.facts dd { margin: 0; font: 400 30px/1 var(--bc-font-display); letter-spacing: .05em; text-transform: uppercase; }
.facts dd a { text-decoration: none; border-bottom: 2px dashed var(--bc-line); }
.facts dd a:hover { color: var(--bc-accent); border-color: var(--bc-accent); }

/* Rows are information here, not menu entries */
.bc-row { cursor: default; }
.features { grid-template-columns: repeat(3, 1fr); padding: 10px; gap: 6px; }
.features .bc-row { align-items: start; padding: 12px; }
.features .bc-row__icon { margin-top: 2px; }
.features .bc-row__desc { margin-top: 3px; font-size: 13.5px; line-height: 1.45; }

.split { display: grid; grid-template-columns: 1fr 1.6fr; gap: 24px; align-items: start; }
.aop { grid-template-columns: 1fr 1fr; }
.factions .bc-row__end { font-family: var(--bc-font-mono); font-weight: 500; font-size: 12px; color: var(--bc-muted); }
/* Hovered option is painted white, like a hovered context-menu option */
.factions .bc-row:hover { background: var(--bc-sel); color: var(--bc-sel-fg); box-shadow: none; }
.factions .bc-row:hover .bc-row__title { text-transform: uppercase; letter-spacing: .03em; }
.factions .bc-row:hover .bc-row__icon { color: var(--bc-sel-icon); }
.factions .bc-row:hover .bc-row__desc,
.factions .bc-row:hover .bc-row__end { color: inherit; opacity: .72; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; }
.gallery a { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--bc-radius-sm); border: 1px solid var(--bc-line); background: var(--bc-item); }
.gallery a:hover { border-color: var(--bc-accent); }
.gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }

.lightbox { padding: 6px; max-width: 92vw; max-height: 92vh; color: var(--bc-fg); cursor: zoom-out; }
.lightbox::backdrop { background: var(--bc-overlay); }
.lightbox img { display: block; max-width: calc(92vw - 12px); max-height: calc(92vh - 12px); border-radius: var(--bc-radius-sm); }

/* CTA */
.steps { grid-template-columns: repeat(3, 1fr); padding: 10px; gap: 6px; }
.steps .bc-row { align-items: start; padding: 12px; }
.steps .bc-row__icon { margin-top: 2px; }
.steps .bc-row__desc { margin-top: 3px; font-size: 13.5px; line-height: 1.45; }
.cta__body { padding: 8px 24px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.cta__body p { margin: 0; font-size: 16px; }
.cta .bc-header { padding: 18px 24px 26px; }
.cta .bc-header::after { left: 24px; right: 24px; }

/* Footer, styled like the key strip at the bottom of a menu */
.footer { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 16px 32px; border-top: 1px solid var(--bc-line); font-size: 13px; color: var(--bc-muted); }

@media (max-width: 980px) {
  .features { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .nav { padding: 10px 16px; }
  .nav nav a:not(.bc-btn), .brand__name { display: none; }
  .banner { aspect-ratio: 2 / 1; }
  .wrap { margin-top: -24px; padding: 0 16px 48px; gap: 16px; }
  .hero .bc-header { padding: 18px 16px 26px; }
  .hero .bc-header::after { left: 16px; right: 16px; }
  .hero .bc-title { font-size: 46px; }
  .hero__body, .cta__body { padding: 8px 16px 20px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts > div { padding: 12px 16px 14px; }
  .facts > div:nth-child(3) { border-left: 0; }
  .facts > div:nth-child(n+3) { border-top: 1px solid var(--bc-line); }
  .facts > div:nth-child(5) { grid-column: span 2; border-left: 0; }
  .features, .steps { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .cta .bc-header { padding: 16px 16px 24px; }
  .cta .bc-header::after { left: 16px; right: 16px; }
  .footer { padding: 16px; }
}

/* ---------- Regelwerk (regeln.html, content generated by landing/tools/build-rules.mjs) ---------- */
[hidden] { display: none !important; }
.nav nav a[aria-current="page"] { color: var(--bc-fg); }
.rules-page { margin-top: 24px; }
.rules-search-field { max-width: 460px; }
.rules-search::-webkit-search-cancel-button { filter: invert(1); }

.rules-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.rules-toc { position: sticky; top: 76px; }
.rules-toc .bc-title { font-size: 28px; }
.rules-toc .bc-row { min-height: 40px; text-decoration: none; cursor: pointer; }
.rules-toc .bc-row__icon { font: 500 11px var(--bc-font-mono); }
.rules-toc .bc-row__title { font-size: 14px; }

.rules-content { display: grid; gap: 24px; }
.rules-section { scroll-margin-top: 76px; }
.rules-body { padding: 8px 24px 24px; }
.rules-intro { margin: 0 0 16px; color: var(--bc-muted); }
.rules-intro em { font-style: normal; }

ol.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
ol.rules li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; scroll-margin-top: 90px; }
ol.rules ol.rules { margin-top: 8px; padding-left: 14px; border-left: 1px solid var(--bc-line); gap: 6px; }
ol.rules ol.rules li { grid-template-columns: 76px minmax(0, 1fr); }
.rule-num { font: 500 12px/1.9 var(--bc-font-mono); color: var(--bc-accent); text-decoration: none; }
.rule-num:hover { color: var(--bc-fg); }
.rule-body p { margin: 0; line-height: 1.5; }
ol.rules ol.rules .rule-body p { color: var(--bc-muted); font-size: 14px; }
.rule-body strong { font-weight: 600; color: var(--bc-fg); }
.rule-body a { color: var(--bc-accent); }
/* A linked rule is painted white, like a selected row */
li:target > .rule-body > p { background: var(--bc-sel); color: var(--bc-sel-fg); border-radius: var(--bc-radius-sm); padding: 4px 8px; margin: -4px -8px; }
li:target > .rule-body > p a { color: var(--bc-sel-icon); }
.rules-map { display: block; width: 100%; max-width: 720px; border-radius: var(--bc-radius-sm); border: 1px solid var(--bc-line); }

@media (max-width: 900px) {
  .rules-layout { grid-template-columns: 1fr; gap: 16px; }
  .rules-toc { position: static; }
  .rules-toc .bc-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .rules-page { margin-top: 16px; }
  .rules-body { padding: 8px 16px 20px; }
  ol.rules li, ol.rules ol.rules li { grid-template-columns: 1fr; gap: 0; }
  ol.rules ol.rules { padding-left: 10px; }
  .rules-toc .bc-list { grid-template-columns: 1fr; }
}