:root {
    /* Farbe */
    --c-bg: #0e0e0d;
    --c-accent: #94f25a;
    --c-ink: #0e0e0d;
    --c-text: #f1f0e8;
    --c-muted: #b8b7ad;
    --c-line: #2c2c29;
    --c-line-strong: var(--c-accent);

    /* Schrift */
    --font-display: "Avenir Next Condensed", "Helvetica Neue Condensed", "Roboto Condensed", "Arial Narrow", Impact, sans-serif;
    --font-text: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --weight-display: 800;
    --tracking-caps: 0.06em;
    --tracking-display: -0.005em;

    --fs-headline: clamp(3.1rem, 15vw, 6rem);
    --fs-sub: clamp(1.15rem, 4.6vw, 1.5rem);
    --fs-metric: clamp(2rem, 9vw, 2.75rem);
    --fs-title: clamp(1.25rem, 5.2vw, 1.6rem);
    --fs-credit: 1rem;
    --fs-meta: 0.8125rem;
    --fs-label: 0.75rem;
    --fs-body: 0.9375rem;

    /* Raum */
    --pad-page: clamp(1rem, 5vw, 2.5rem);
    --gap-xs: 0.25rem;
    --gap-s: 0.5rem;
    --gap-m: 0.875rem;
    --gap-l: 1.5rem;
    --gap-xl: 2.5rem;
    --row-gap: 1.125rem;
    --mark-size: clamp(3.5rem, 15vw, 5rem);
    --tile-size: clamp(3.5rem, 16vw, 4.5rem);
    --dot-size: 0.5rem;
    --icon-size: 2.25rem;
    --rule: 2px;
    --rule-thin: 1px;
    --focus-width: 3px;
    --focus-offset: 3px;
    --page-max: 82rem;

    /* Bewegung */
    --motion-duration: 420ms;
    --motion-step: 28ms;
    --motion-distance: 0.6rem;
    --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  }

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

  html { background: var(--c-bg); }

  body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-text);
    font-size: var(--fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
  }

  a { color: var(--c-accent); text-underline-offset: 0.2em; }

  :focus-visible {
    outline: var(--focus-width) solid var(--c-accent);
    outline-offset: var(--focus-offset);
  }

  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: absolute;
    left: var(--pad-page);
    top: var(--gap-s);
    padding: var(--gap-s) var(--gap-m);
    background: var(--c-accent);
    color: var(--c-ink);
    font-weight: 700;
    transform: translateY(-200%);
  }
  .skip-link:focus { transform: none; }

  .page {
    width: 100%;
    min-width: 0;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--pad-page);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-xl);
  }

  /* ---------- Poster-Kopf ---------- */

  .masthead {
    display: grid;
    grid-template-columns: var(--mark-size) minmax(0, 1fr);
    column-gap: var(--gap-m);
    align-items: start;
  }

  .mark { width: var(--mark-size); height: var(--mark-size); display: block; }
  .mark rect { fill: var(--c-accent); }
  .mark path { fill: none; stroke: var(--c-ink); stroke-width: 2.4; stroke-linecap: square; }

  .headline {
    min-width: 0;
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-stretch: condensed;
    font-size: var(--fs-headline);
    line-height: 0.86;
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    color: var(--c-accent);
  }
  .headline span { display: block; white-space: nowrap; }

  .brandline {
    grid-column: 2;
    margin: var(--gap-s) 0 0;
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-stretch: condensed;
    font-size: var(--fs-sub);
    line-height: 1.1;
    color: var(--c-accent);
  }

  .window {
    grid-column: 1 / -1;
    margin: var(--gap-l) 0 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-m);
  }

  .motifs { display: flex; align-items: center; gap: var(--gap-s); }
  .motifs svg { display: block; height: var(--icon-size); width: auto; }
  .motif-fill { fill: var(--c-accent); }
  .motif-cut { fill: var(--c-bg); }

  .window-date {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-stretch: condensed;
    font-size: var(--fs-sub);
    letter-spacing: var(--tracking-caps);
    color: var(--c-text);
  }
  .window-date small {
    display: block;
    font-family: var(--font-text);
    font-weight: 400;
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--c-muted);
  }

  .rule {
    border: 0;
    border-top: var(--rule) solid var(--c-line-strong);
    margin: var(--gap-l) 0 0;
  }

  /* ---------- Kennzahlen ---------- */

  .metrics {
    margin: var(--gap-l) 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: var(--rule-thin) solid var(--c-line);
  }
  .metric {
    padding: var(--gap-m) var(--gap-s) var(--gap-m) 0;
    border-bottom: var(--rule-thin) solid var(--c-line);
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
  }
  .metric + .metric:not(:nth-child(3n + 1)) {
    padding-left: var(--gap-m);
    border-left: var(--rule-thin) solid var(--c-line);
  }
  .metric dt {
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--c-muted);
  }
  .metric dd {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-stretch: condensed;
    font-size: var(--fs-metric);
    line-height: 1;
    color: var(--c-accent);
  }
  .metric.is-zero dd { color: var(--c-text); }

  /* ---------- Filter ---------- */

  .filters { margin: var(--gap-l) 0 0; border: 0; padding: 0; min-width: 0; }
  .filters legend {
    padding: 0;
    margin-bottom: var(--gap-s);
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--c-muted);
  }
  .filter-row { display: flex; flex-wrap: wrap; gap: var(--gap-s); }
  .filter {
    appearance: none;
    margin: 0;
    padding: var(--gap-s) var(--gap-m);
    min-height: 2.75rem;
    border: var(--rule-thin) solid var(--c-accent);
    border-radius: 0;
    background: transparent;
    color: var(--c-accent);
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-stretch: condensed;
    font-size: 1.05rem;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    cursor: pointer;
  }
  .filter .count { margin-left: var(--gap-xs); font-family: var(--font-text); font-weight: 600; font-size: var(--fs-label); }
  .filter[aria-pressed="true"] { background: var(--c-accent); color: var(--c-ink); }
  .filter:hover:not([aria-pressed="true"]) { color: var(--c-text); border-color: var(--c-text); }

  .view-controls {
    margin-top: var(--gap-m);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-s);
  }
  .view-control {
    min-width: 0;
    display: grid;
    gap: var(--gap-xs);
  }
  .view-control > span {
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--c-muted);
  }
  .view-control select {
    width: 100%;
    min-height: 2.75rem;
    border: var(--rule-thin) solid var(--c-line);
    border-radius: 0;
    padding: var(--gap-s) 2rem var(--gap-s) var(--gap-s);
    background: var(--c-bg);
    color: var(--c-text);
    font: 600 var(--fs-meta)/1.2 var(--font-text);
  }
  .view-control select:hover { border-color: var(--c-accent); }
  .filter-note {
    margin: var(--gap-s) 0 0;
    max-width: 52rem;
    color: var(--c-muted);
    font-size: var(--fs-label);
  }

  /* ---------- Review-Dateien ---------- */

  .exports { margin-top: var(--gap-l); }
  .exports h2 {
    margin: 0 0 var(--gap-s);
    font-size: var(--fs-label);
    font-weight: 400;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--c-muted);
  }
  .export-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: var(--rule-thin) solid var(--c-line);
  }
  .export-file {
    min-width: 0;
    padding: var(--gap-m) 0;
    border-bottom: var(--rule-thin) solid var(--c-line);
  }
  .export-file + .export-file {
    padding-left: var(--gap-m);
    border-left: var(--rule-thin) solid var(--c-line);
  }
  .export-name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-stretch: condensed;
    font-size: 1.15rem;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--c-text);
  }
  .export-actions { display: flex; flex-wrap: wrap; gap: var(--gap-s) var(--gap-m); margin-top: var(--gap-xs); }
  .export-actions a { font-size: var(--fs-meta); font-weight: 700; text-decoration-thickness: var(--rule-thin); }

  /* ---------- Listen ---------- */

  .section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-m);
    padding-bottom: var(--gap-s);
    border-bottom: var(--rule) solid var(--c-line-strong);
  }
  .section-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-stretch: condensed;
    font-size: clamp(1.6rem, 7vw, 2.25rem);
    line-height: 1;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--c-accent);
  }
  .section-head p { margin: 0; font-size: var(--fs-meta); color: var(--c-muted); text-align: right; }

  .day { margin: 0; padding: 0; list-style: none; }
  .day-head {
    margin: var(--gap-l) 0 var(--gap-xs);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--c-muted);
  }

  .row {
    display: grid;
    grid-template-columns: var(--dot-size) var(--tile-size) 1fr;
    column-gap: var(--gap-m);
    align-items: center;
    padding: var(--row-gap) 0;
    border-bottom: var(--rule-thin) solid var(--c-line);
  }
  .row::before {
    content: "";
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    background: var(--c-accent);
  }

  .row-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-stretch: condensed;
    font-size: var(--fs-title);
    line-height: 1.05;
    color: var(--c-accent);
    overflow-wrap: anywhere;
  }
  .row-title .album-mark { white-space: nowrap; }

  .row-credits {
    margin: var(--gap-xs) 0 0;
    font-size: var(--fs-credit);
    letter-spacing: var(--tracking-caps);
    color: var(--c-text);
  }

  .row-meta {
    margin: var(--gap-s) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs) var(--gap-m);
    font-size: var(--fs-meta);
    color: var(--c-muted);
  }
  .row-meta > span { white-space: nowrap; }
  .row-meta b { font-weight: 600; color: var(--c-text); }
  .row-instagram a { color: var(--c-text); font-weight: 600; }
  .tag-role {
    padding: 0 var(--gap-xs);
    border: var(--rule-thin) solid var(--c-accent);
    color: var(--c-accent);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--fs-label);
    font-weight: 600;
  }
  .tag-status {
    padding: 0 var(--gap-xs);
    background: var(--c-text);
    color: var(--c-ink);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--fs-label);
    font-weight: 700;
  }

  .row-link {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-s);
    margin-top: var(--gap-s);
    font-size: var(--fs-meta);
    font-weight: 600;
    text-decoration: none;
  }
  .row-link:hover span { text-decoration: underline; }
  .row-link svg { width: 1.25rem; height: 1.25rem; flex: none; }

  .row-show {
    margin: var(--gap-s) 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--gap-xs) var(--gap-s);
    font-size: var(--fs-meta);
  }
  .row-show-label {
    color: var(--c-muted);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }
  .row-show .row-link { margin-top: 0; }
  .row-show-more { color: var(--c-muted); }

  /* ---------- Cover ---------- */

  .tile {
    position: relative;
    width: var(--tile-size);
    height: var(--tile-size);
    overflow: hidden;
    display: grid;
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-stretch: condensed;
    line-height: 0.82;
    text-transform: uppercase;
  }
  .tile-glyph { position: relative; z-index: 1; padding: 0.3rem; font-size: calc(var(--tile-size) * 0.46); }
  .tile-bar { position: absolute; left: 0; right: 0; height: var(--rule); }
  .tile-disc { position: absolute; border-radius: 50%; }
  .tile.has-artwork { border: var(--rule) solid var(--c-accent); background: var(--c-line); }
  .tile.has-artwork img { display: block; width: 100%; height: 100%; object-fit: cover; }

  .tile.v0 { background: var(--c-accent); color: var(--c-ink); }
  .tile.v0 .tile-bar { background: var(--c-ink); }
  .tile.v1 { background: var(--c-ink); color: var(--c-accent); border: var(--rule) solid var(--c-accent); }
  .tile.v1 .tile-bar { background: var(--c-accent); }
  .tile.v2 { background: var(--c-text); color: var(--c-ink); }
  .tile.v2 .tile-bar { background: var(--c-ink); }
  .tile.v3 { background: var(--c-ink); color: var(--c-ink); border: var(--rule-thin) solid var(--c-line); }
  .tile.v3 .tile-disc { background: var(--c-accent); }
  .tile.v3 .tile-bar { background: var(--c-accent); }

  .tile.p0 { place-items: start start; }
  .tile.p1 { place-items: end end; }
  .tile.p2 { place-items: end start; }
  .tile.p3 { place-items: start end; }
  .tile.v3.tile { place-items: center; }
  .tile.v3 .tile-disc { left: 50%; top: 50%; transform: translate(-50%, -50%); }

  .tile.is-open {
    background: var(--c-bg);
    color: var(--c-accent);
    border: var(--rule) dashed var(--c-accent);
    place-items: center;
  }
  .tile.is-open .tile-glyph { font-size: calc(var(--tile-size) * 0.62); padding: 0; }

  /* ---------- Klären ---------- */

  .clarify-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-m);
    padding: var(--gap-s) var(--gap-m);
    background: var(--c-accent);
    color: var(--c-ink);
  }
  .clarify-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-stretch: condensed;
    font-size: clamp(1.6rem, 7vw, 2.25rem);
    line-height: 1;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }
  .clarify-head p { margin: 0; font-size: var(--fs-meta); font-weight: 600; text-align: right; }
  .clarify-intro { margin: var(--gap-m) 0 0; color: var(--c-muted); font-size: var(--fs-meta); }

  .clarify-list { margin: 0; padding: 0; list-style: none; }
  .clarify-list .row::before { background: transparent; border: var(--rule) solid var(--c-accent); }
  .clarify-list .row-title { color: var(--c-text); }
  .clarify-list .row-credits { color: var(--c-accent); }

  .warning {
    margin: var(--gap-s) 0 0;
    padding-left: var(--gap-s);
    border-left: var(--rule) dashed var(--c-accent);
    font-size: var(--fs-meta);
  }
  .warning-label {
    display: block;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--c-accent);
  }
  .warning-original { display: block; color: var(--c-muted); font-style: italic; }

  /* ---------- Methode ---------- */

  .method {
    display: grid;
    gap: var(--gap-l);
    padding-top: var(--gap-m);
    border-top: var(--rule) solid var(--c-line-strong);
    font-size: var(--fs-meta);
  }
  .method h2 {
    margin: 0 0 var(--gap-s);
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-stretch: condensed;
    font-size: 1.35rem;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--c-accent);
  }
  .method p, .method ul { margin: 0; color: var(--c-muted); }
  .method ul { padding-left: 1.1em; }
  .method li + li { margin-top: var(--gap-xs); }
  .method strong { color: var(--c-text); font-weight: 600; }

  .coverage { margin-top: var(--gap-m); }
  .coverage-bar {
    position: relative;
    height: var(--gap-m);
    border: var(--rule-thin) solid var(--c-accent);
    margin-top: var(--gap-s);
  }
  .coverage-bar span {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--coverage, 0%);
    background: var(--c-accent);
  }

  .empty { padding: var(--gap-l) 0; color: var(--c-muted); }

  .footer { font-size: var(--fs-label); color: var(--c-muted); letter-spacing: var(--tracking-caps); text-transform: uppercase; }

  /* ---------- Zweispaltig ---------- */

  @media (min-width: 64rem) {
    :root {
      --fs-headline: min(6.2vw, 6rem);
      --mark-size: 5rem;
      --tile-size: 4.5rem;
      --fs-title: 1.6rem;
      --fs-metric: 2.6rem;
      --fs-sub: 1.5rem;
    }
    .page {
      grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
      column-gap: clamp(2.5rem, 5vw, 5rem);
      align-items: start;
    }
    .poster {
      position: sticky;
      top: 0;
      max-height: 100vh;
      overflow-y: auto;
      padding: var(--gap-l) var(--gap-s);
      margin-inline: calc(var(--gap-s) * -1);
    }
    .content { padding-top: var(--gap-l); display: grid; gap: var(--gap-xl); }
    .footer { grid-column: 1 / -1; }
  }

  @media (max-width: 63.99rem) {
    .content { display: grid; gap: var(--gap-xl); }
  }

  @media (max-width: 28rem) {
    :root {
      --fs-headline: clamp(2.55rem, 11vw, 3.5rem);
      --mark-size: clamp(3.2rem, 15vw, 4rem);
    }
    .poster, .content, .masthead, .headline, .filter-row { min-width: 0; max-width: 100%; }
    .metric dt { font-size: 0.675rem; letter-spacing: 0.04em; }
    .filter { max-width: 100%; }
    .view-controls { grid-template-columns: minmax(0, 1fr); }
    .export-list { grid-template-columns: minmax(0, 1fr); }
    .export-file + .export-file { padding-left: 0; border-left: 0; }
  }

  /* ---------- Bewegung ---------- */

  @media (prefers-reduced-motion: no-preference) {
    .enter {
      animation: enter var(--motion-duration) var(--motion-ease) both;
      animation-delay: calc(var(--i, 0) * var(--motion-step));
    }
    .filter, .row-link { transition: background-color 120ms linear, color 120ms linear; }
  }
  @keyframes enter {
    from { opacity: 0; transform: translateY(var(--motion-distance)); }
    to { opacity: 1; transform: none; }
  }