/* ============================================================
   Burn dem Trees landing page
   Direction: "Klima-Strafregister". The page is an evidence file,
   not a product page. Scorched warm black, ember orange, and
   dossier cards made of singed paper. Monospace is the primary
   voice; the display face appears only in indictments.
   No external requests: no webfonts, no CDN, no trackers.
   ============================================================ */

:root {
  /* Scorched wood, not neutral black. Everything is brown-shifted. */
  --soot:      #17110D;
  --soot-deep: #0D0906;
  --char:      #241A14;
  --char-hi:   #322419;

  --ember:     #FF6B1A;
  --flare:     #FFC24B;
  --ash:       #B8A99C;
  --ash-dim:   #7C6E63;

  /* The green that is being lost. Used sparingly, only for living things. */
  --moss:      #4E8C5A;
  --moss-dim:  #2F5537;

  /* Dossier paper: an accent surface, never the page background. */
  --paper:     #F2E9DE;
  --paper-2:   #E4D7C6;
  --ink:       #241A14;

  --display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;

  --w: 1120px;
  --gut: clamp(20px, 5vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  background: var(--soot);
  color: var(--ash);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden;
  /* Faint drifting soot over the whole page. */
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,107,26,.10), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,194,75,.08), transparent),
    radial-gradient(1px 1px at 45% 85%, rgba(255,107,26,.06), transparent);
}

::selection { background: var(--ember); color: var(--soot-deep); }

a { color: var(--flare); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ember); }
:focus-visible {
  outline: 2px solid var(--flare);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { max-width: var(--w); margin: 0 auto; padding: 0 var(--gut); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--flare); color: var(--soot-deep); padding: 10px 16px; font-weight: 700;
}
.skip:focus { left: 0; }

/* ── Type roles ──────────────────────────────────────────── */
.indict {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.92;
  color: var(--paper);
  font-stretch: condensed;
}
.eyebrow {
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ember);
  font-weight: 700;
}
.lede { font-size: clamp(1rem, 2.2vw, 1.15rem); color: var(--ash); max-width: 62ch; }
.dim { color: var(--ash-dim); }
.hot { color: var(--flare); }

/* ── Case-file section headers ───────────────────────────── */
/* The numbering is a real file structure (Akte, Abschnitt), not decoration. */
/* scroll-margin-top: sonst verschwindet die Ueberschrift beim Sprung aus der
   Navigation unter dem Sticky-Header. */
.sec { padding: clamp(56px, 9vw, 104px) 0; border-top: 1px solid var(--char-hi); position: relative; overflow: hidden; }
.sec[id], .hero[id] { scroll-margin-top: 68px; }
.sec > .wrap { position: relative; z-index: 1; }
.sec-head { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; margin-bottom: 32px; }
.sec-no {
  font-size: .7rem; letter-spacing: .18em; color: var(--ember);
  border: 1px solid var(--ember); padding: 3px 9px; white-space: nowrap;
}
.sec-t { font-size: clamp(1.6rem, 4.4vw, 2.6rem); }
.sec-sub { flex-basis: 100%; color: var(--ash-dim); max-width: 68ch; margin-top: -6px; }

/* ── Hero ────────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(32px, 4.5vw, 64px) 0 clamp(48px, 7vw, 84px); overflow: hidden; }
#neural {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .45; pointer-events: none; z-index: 0;
  /* Fade the net out behind the indictment so the type stays first. */
  -webkit-mask-image: linear-gradient(100deg, transparent 6%, rgba(0,0,0,.22) 34%, #000 78%);
  mask-image: linear-gradient(100deg, transparent 6%, rgba(0,0,0,.22) 34%, #000 78%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.stamp {
  display: inline-block; border: 2px solid var(--ember); color: var(--ember);
  padding: 6px 13px; font-size: .66rem; letter-spacing: .22em; font-weight: 700;
  transform: rotate(-2.2deg); margin-bottom: 16px; text-transform: uppercase;
}
.hero h1 { font-size: clamp(2.1rem, 5.6vw, 3.7rem); margin-bottom: 16px; max-width: 17ch; }
.hero h1 .burn {
  color: var(--ember);
  text-shadow: 0 0 24px rgba(255,107,26,.55), 0 0 60px rgba(255,107,26,.22);
}
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 14px; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; font-family: var(--mono); font-size: .85rem; font-weight: 700;
  border: 1px solid var(--char-hi); background: var(--char); color: var(--paper);
  text-decoration: none; cursor: pointer; transition: transform .18s, border-color .18s, background .18s;
}
.btn:hover { transform: translateY(-2px); border-color: var(--ember); color: var(--flare); }
.btn-hot {
  background: linear-gradient(135deg, var(--ember), #D9480F);
  border-color: var(--ember); color: #1A0E05;
  box-shadow: 0 8px 30px -10px rgba(255,107,26,.75);
}
.btn-hot:hover { color: #1A0E05; filter: brightness(1.08); }

.hero-note { font-size: .78rem; color: var(--ash-dim); }

/* ── The tree specimen (hero right) ──────────────────────── */
.specimen { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.specimen svg { width: min(230px, 60vw); height: auto; }
.specimen-cap {
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ash-dim); text-align: center;
}
.flicker { animation: flicker 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes flicker {
  0%, 100% { opacity: .92; transform: scaleY(1) skewX(0deg); }
  25%      { opacity: 1;   transform: scaleY(1.07) skewX(-2.5deg); }
  50%      { opacity: .85; transform: scaleY(.95) skewX(1.5deg); }
  75%      { opacity: 1;   transform: scaleY(1.04) skewX(-1deg); }
}

/* ── Evidence ledger ─────────────────────────────────────── */
.ledger { border: 1px solid var(--char-hi); background: var(--soot-deep); }
.ledger-row {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 16px; align-items: center;
  padding: 15px 18px; border-bottom: 1px solid var(--char);
}
.ledger-row:last-child { border-bottom: 0; }
.ledger-row:hover { background: var(--char); }
.ledger-row svg { width: 24px; height: 24px; }
.ledger-k { color: var(--paper); font-weight: 700; }
.ledger-v { color: var(--ash-dim); font-size: .8rem; }
.ledger-tag {
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 8px; border: 1px solid var(--moss-dim); color: var(--moss); white-space: nowrap;
}
.ledger-tag.off { border-color: var(--char-hi); color: var(--ash-dim); }

/* ── The ladder: signature element ───────────────────────── */
.calc {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--char-hi); background: var(--char); padding: 16px 18px; margin-bottom: 30px;
}
.calc label { font-size: .78rem; color: var(--ash); }
.calc input {
  font-family: var(--mono); font-size: 1rem; font-weight: 700;
  background: var(--soot-deep); border: 1px solid var(--char-hi); color: var(--flare);
  padding: 9px 12px; width: 130px;
}
.calc input:focus { border-color: var(--ember); outline: none; }
.calc-out { font-size: .82rem; color: var(--ash-dim); flex: 1 1 260px; }
.calc-out strong { color: var(--paper); }

.ladder { list-style: none; counter-reset: tier; }
.tier {
  display: grid; grid-template-columns: 46px 62px 1fr auto; gap: 14px; align-items: center;
  padding: 11px 14px; border-left: 2px solid var(--char-hi);
  transition: background .25s, border-color .25s, opacity .5s, transform .5s;
  opacity: .25; transform: translateX(-10px);
}
.tier.lit { opacity: 1; transform: none; }
.tier:hover { background: var(--char); }
.tier-no { font-size: .7rem; color: var(--ash-dim); }
.tier-tree svg { width: 30px; height: 30px; display: block; }
.tier-name { color: var(--paper); font-size: .88rem; line-height: 1.35; }
.tier-req { font-size: .72rem; color: var(--ash-dim); white-space: nowrap; }
.tier[data-league="hot"] { border-left-color: var(--ember); }
.tier.you {
  background: linear-gradient(90deg, rgba(255,107,26,.22), transparent);
  border-left-color: var(--flare);
}
.tier.you .tier-name { color: var(--flare); font-weight: 700; }
.tier.you .tier-req::after { content: "  ◄ DU"; color: var(--flare); font-weight: 700; letter-spacing: .12em; }

/* ── Dossier cards: singed paper ─────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.card {
  background: var(--paper); color: var(--ink); padding: 22px;
  /* Torn, singed edge: the one place paper appears. */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 16px) 100%, 0 100%);
  border-top: 3px solid var(--ember);
  position: relative;
}
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 60% at 100% 100%, rgba(90,45,10,.30), transparent 62%);
}
.card h3 { font-family: var(--display); font-size: 1.05rem; font-weight: 800; margin-bottom: 8px; letter-spacing: -.01em; }
.card p { font-size: .84rem; color: #4A382C; }
.card .num { font-family: var(--display); font-size: 2.1rem; font-weight: 900; color: #9A3412; line-height: 1; display: block; margin-bottom: 4px; }

/* ── Formula chain ───────────────────────────────────────── */
.chain { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.chain-step {
  flex: 1 1 150px; border: 1px solid var(--char-hi); background: var(--soot-deep); padding: 14px 16px;
}
.chain-step b { display: block; color: var(--flare); font-size: .95rem; }
.chain-step span { font-size: .74rem; color: var(--ash-dim); }
.chain-arrow { align-self: center; color: var(--ember); font-size: 1.3rem; }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq details {
  border: 1px solid var(--char-hi); background: var(--soot-deep); margin-bottom: 10px;
}
.faq summary {
  padding: 15px 18px; cursor: pointer; color: var(--paper); font-weight: 700; font-size: .92rem;
  list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ember); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details[open] summary { border-bottom: 1px solid var(--char); }
.faq-a { padding: 14px 18px 18px; font-size: .87rem; }
.faq-a p + p { margin-top: 10px; }

/* ── Prose (legal pages) ─────────────────────────────────── */
.prose { max-width: 74ch; padding: clamp(48px, 8vw, 88px) 0; position: relative; z-index: 1; }
.prose h1 { font-family: var(--display); font-weight: 900; font-size: clamp(1.9rem, 5vw, 2.8rem); color: var(--paper); text-transform: uppercase; letter-spacing: -.03em; margin-bottom: 8px; }
.prose h2 { font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--flare); margin: 32px 0 10px; text-transform: uppercase; letter-spacing: .02em; }
.prose h3 { color: var(--paper); font-size: .95rem; margin: 20px 0 6px; }
.prose p, .prose li { font-size: .88rem; }
.prose ul, .prose ol { margin: 10px 0 10px 22px; }
.prose li { margin-bottom: 5px; }
.prose table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: .8rem; }
.prose th, .prose td { border: 1px solid var(--char-hi); padding: 8px 10px; text-align: left; vertical-align: top; }
.prose th { background: var(--char); color: var(--paper); }
.todo {
  border-left: 3px solid var(--ember); background: var(--char); padding: 12px 16px; margin: 16px 0;
  font-size: .82rem; color: var(--flare);
}

/* ── Footer ──────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--char-hi); padding: 40px 0 56px; font-size: .8rem;
        position: relative; overflow: hidden; }
.foot > .wrap { position: relative; z-index: 1; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 22px; justify-content: space-between; align-items: flex-start; }
.foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot a { color: var(--ash); text-decoration: none; }
.foot a:hover { color: var(--flare); text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .specimen { order: -1; }
  .tier { grid-template-columns: 34px 44px 1fr; }
  .tier-req { grid-column: 3; font-size: .68rem; }
  .tier.you .tier-req::after { content: " ◄"; }
}
@media (max-width: 520px) {
  .ledger-row { grid-template-columns: 26px 1fr; }
  .ledger-tag { grid-column: 2; justify-self: start; }
  /* Der Rechner ist auf dem Telefon das Kernstueck des Abschnitts: Label,
     Eingabe und Urteil untereinander statt in einer gequetschten Zeile. */
  .calc { flex-direction: column; align-items: stretch; gap: 8px; }
  .calc input { width: 100%; }
  .btn { padding: 13px 18px; }
  .cta-band { padding: 18px; }
  .chain-arrow { display: none; }
}


/* ── Sticky-Header ───────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  /* Deckend statt backdrop-filter: ein Blur auf einem sticky Element laesst in
     Chromium Inhalt dahinter verschwinden, sobald viele Compositing-Layer im
     Spiel sind. Auf diesem Untergrund war der Blur ohnehin nicht zu sehen. */
  background: #0D0906;
  border-bottom: 1px solid var(--char-hi);
}
.nav-in { display: flex; align-items: center; gap: 10px; padding: 10px var(--gut);
          max-width: var(--w); margin: 0 auto; flex-wrap: nowrap; }
.nav-logo {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  color: var(--paper); font-weight: 800; letter-spacing: -.01em; font-size: .92rem; white-space: nowrap;
}
.nav-logo svg { width: 22px; height: 22px; flex-shrink: 0; }
.nav-links { display: flex; gap: 1px; margin-left: auto; flex-wrap: nowrap; }
.nav-links a {
  color: var(--ash); text-decoration: none; font-size: .74rem;
  padding: 6px 9px; border: 1px solid transparent; white-space: nowrap;
}
.nav-links a:hover { color: var(--flare); border-color: var(--char-hi); }
.nav-cta {
  padding: 8px 13px; font-size: .74rem; font-weight: 700; text-decoration: none; white-space: nowrap;
  background: var(--ember); color: #1A0E05; border: 1px solid var(--ember);
}
.nav-cta:hover { color: #1A0E05; filter: brightness(1.1); }

/* ── Zwischen-CTA-Band ───────────────────────────────────── */
.cta-band {
  border: 1px solid var(--char-hi); border-left: 3px solid var(--ember);
  background: linear-gradient(100deg, rgba(255,107,26,.10), transparent 62%);
  padding: 22px 26px; margin-top: 34px;
  display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.cta-band p { margin: 0; max-width: 58ch; }
.cta-band strong { color: var(--paper); }
.cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Verstreute Glimmbäume ───────────────────────────────── */
/* Rein dekorativ, hinter dem Inhalt, nie klickbar. */
/* content-visibility ist hier der eigentliche Hebel: die Ebene ist absolut
   positioniert und bekommt ihre Groesse vom Abschnitt, nicht vom Inhalt.
   Der Browser darf sie also ausserhalb des Sichtfelds komplett ueberspringen,
   ohne dass irgendetwas springt. Genau deshalb war Hoch- und Runterscrollen
   vorher teuer: jede Ebene wurde neu gemalt, auch weit weg vom Bildschirm. */
.scatter { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
           max-width: 100%; contain: layout paint; content-visibility: auto; }
.scatter svg { position: absolute; }
#embers { content-visibility: auto; }

/* ── Sprachumschalter ────────────────────────────────────── */
.lang { display: flex; border: 1px solid var(--char-hi); margin-left: 4px; }
.lang a {
  padding: 6px 10px; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  color: var(--ash-dim); text-decoration: none;
}
.lang a + a { border-left: 1px solid var(--char-hi); }
.lang a:hover { color: var(--flare); }
.lang a[aria-current="true"] { background: var(--char-hi); color: var(--paper); }

/* Das Leaderboard ist das einzige Nav-Ziel ausserhalb dieser Seite.
   Ein Glutpunkt markiert das, ohne eine zweite Schaltflaeche zu bauen. */
.nav-links a.nav-lb { color: var(--flare); }
.nav-links a.nav-lb::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ember); margin-right: 7px; vertical-align: middle;
  box-shadow: 0 0 6px var(--ember);
}
.nav-links a.nav-lb:hover { color: var(--ember); border-color: var(--char-hi); }

/* Der Header bleibt immer einzeilig. Statt umzubrechen faellt gestaffelt weg,
   was am wenigsten gebraucht wird. Das Leaderboard ist das einzige externe
   Ziel und bleibt am laengsten stehen. Was wegfaellt, ist ab dann ueber das
   Menue erreichbar, nicht mehr gar nicht. */

/* ── Menü für schmale Geräte ─────────────────────────────── */
/* Ein natives <details>: kein Overlay-Framework, kein Fokus-Trap noetig,
   funktioniert auch dann, wenn sonst nichts laedt. Gebaut in app.js aus
   denselben Links wie .nav-links. */
.nav-menu { display: none; position: static; }
.nav-menu > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--char-hi); background: var(--char);
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary:hover { border-color: var(--ember); }
.nav-burger, .nav-burger::before, .nav-burger::after {
  display: block; width: 17px; height: 2px; background: var(--paper); content: "";
}
.nav-burger { position: relative; }
.nav-burger::before { position: absolute; top: -5px; }
.nav-burger::after { position: absolute; top: 5px; }
.nav-menu[open] > summary { border-color: var(--ember); }
.nav-menu[open] .nav-burger { background: transparent; }
.nav-menu[open] .nav-burger::before { top: 0; transform: rotate(45deg); background: var(--ember); }
.nav-menu[open] .nav-burger::after { top: 0; transform: rotate(-45deg); background: var(--ember); }
.nav-menu-p {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  display: flex; flex-direction: column;
  background: #0D0906; border-bottom: 1px solid var(--char-hi);
  padding: 6px var(--gut) 12px;
}
.nav-menu-p a {
  color: var(--ash); text-decoration: none; font-size: .86rem;
  padding: 12px 4px; border-bottom: 1px solid var(--char);
}
.nav-menu-p a:last-child { border-bottom: 0; }
.nav-menu-p a:hover, .nav-menu-p a:focus-visible { color: var(--flare); }

@media (max-width: 940px) {
  .nav-links a:not(.nav-lb) { display: none; }
  .nav-menu { display: block; margin-left: auto; }
  .nav-links { margin-left: 0; }
}
@media (max-width: 620px) {
  .nav-logo span { display: none; }
}
@media (max-width: 460px) {
  .nav-links { display: none; }
  .nav-in { gap: 8px; }
  .nav-cta { padding: 10px 11px; }
  .lang a { padding: 9px 9px; }
}

/* ── Teilen ──────────────────────────────────────────────── */
.share-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -14px 0 26px; }
.share-lbl { font-size: .76rem; color: var(--ash-dim); margin-right: 2px; }
.share-btn { font-size: .76rem; padding: 8px 14px; }
.share-btn svg { flex-shrink: 0; }
.share-btn:hover { color: var(--flare); }

/* ── Live-Top-10 im Hero ─────────────────────────────────
   Ersetzt das grosse Baum-Exemplar: eine echte Rangliste ueberzeugt
   mehr als eine Illustration, und sie beweist nebenbei, dass es das
   Leaderboard wirklich gibt. */
.board {
  border: 1px solid var(--char-hi); background: rgba(13,9,6,.72);
  display: flex; flex-direction: column; min-width: 0;
}
.board-h {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--char-hi);
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ember); font-weight: 700;
}
.board-h svg { width: 16px; height: 16px; flex-shrink: 0; }
.board-l { list-style: none; margin: 0; padding: 4px 0; }
.board-l li {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: baseline;
  padding: 5px 14px; font-size: .78rem;
}
.board-l li:nth-child(-n+3) .board-n { color: var(--flare); font-weight: 800; }
.board-n { color: var(--ash-dim); font-size: .7rem; }
.board-u { color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-c { color: var(--ember); font-variant-numeric: tabular-nums; white-space: nowrap; }
.board-msg { display: block !important; padding: 18px 14px !important; color: var(--ash-dim); font-size: .76rem; }
.board-f {
  padding: 10px 14px; border-top: 1px solid var(--char-hi);
  font-size: .74rem; color: var(--flare); text-decoration: none; font-weight: 700;
}
.board-f:hover { background: var(--char); }