/* =========================================================
   TRVECOLOR · pages.css
   Was nur auf einer Seite vorkommt. Abschnitte nach Seite,
   gleiche Reihenfolge wie js/pages/.
   ========================================================= */

@layer pages {
  /* =========== Explore: Start =========== */
  /* Hero: Typo links, Ring rechts, füllt den ersten Bildschirm.
     Telefon: Headline, Ring, Text untereinander. */
  .hero {
    --hero-h: calc(100dvh - var(--chrome-top, 4.5rem) - var(--chrome-bottom, 0px) - 2 * var(--gap-group));
    display: grid;
    grid-template-areas: "head" "ring" "body";
    gap: var(--gap-group);
    align-items: center;
  }
  .hero-head { grid-area: head; }
  .hero-body { grid-area: body; display: grid; gap: var(--gap-group); justify-items: start; }
  .hero-body .lede { margin: 0; }
  .hero-body .bio { display: grid; gap: 0.9em; max-inline-size: var(--measure); }
  .hero-body .bio p { margin: 0; text-wrap: pretty; }
  .hero-ring { grid-area: ring; position: relative; display: grid; place-items: center; inline-size: 100%; }
  .hero-ring .disc { --disc: min(100%, 34rem); }
  .hero-q { position: absolute; color: var(--color-on-disc); font-size: var(--step-6); font-weight: var(--weight-black); font-stretch: var(--width-tight); line-height: 1; text-shadow: var(--shadow-text); }
  @container view (min-width: 48rem) {
    .hero {
      grid-template: "head ring" auto "body ring" auto / minmax(0, 1fr) minmax(0, 1fr);
      align-content: center;
      column-gap: var(--gap-section);
      min-block-size: var(--hero-h);
    }
    .hero-head { align-self: end; }
    .hero-body { align-self: start; }
    .hero-ring { justify-items: end; }
    .hero-ring .disc { --disc: min(100%, var(--hero-h)); }
    .hero-q { inset-inline-end: calc(min(100%, var(--hero-h)) / 2); translate: 50% 0; }
  }
  @media (hover: hover) { .hero-ring:hover .disc { transform: scale(1.03); } }
  @media (hover: none) { .hero-ring:active .disc { transform: scale(1.03); } }

  /* Einstiege (Timeline, Color) */
  .doors { display: grid; border-block-start: var(--rule); }
  .door { display: grid; gap: var(--gap-tight); padding-block: var(--gap-item); }
  .door + .door { border-block-start: var(--rule); }
  .door .door-vis { margin-block-end: var(--gap-tight); }
  .door b { font-size: var(--step-3); font-weight: var(--weight-black); font-stretch: var(--width-tight); letter-spacing: var(--tracking-tight); line-height: 1; }
  .door-vis { display: flex; gap: 3px; block-size: 2.6rem; align-items: center; }
  .door-vis svg { block-size: 100%; inline-size: auto; }
  @container view (min-width: 40rem) {
    .doors { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .door { padding: var(--gap-group) var(--gap-item) var(--gap-group) 0; border-inline-end: var(--rule); }
    .door + .door { border-block-start: 0; padding-inline-start: var(--gap-item); }
    .door:last-child { border-inline-end: 0; }
  }
  /* Fünf Einstiege (Explore): erst ab genug Breite nebeneinander, vorher zwei Spalten */
  .doors-five .door-vis { overflow: hidden; }
  @container view (min-width: 40rem) and (max-width: 63.99rem) {
    .doors-five { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
    .doors-five .door { border-block-end: var(--rule); }
    .doors-five .door:nth-child(odd) { padding-inline-start: 0; }
    .doors-five .door:nth-child(even) { border-inline-end: 0; }
  }

  /* =========== Explore: Timeline =========== */
  .wall { display: grid; border-block-start: var(--rule); }
  .decades { display: flex; flex-wrap: wrap; gap: var(--gap-tight); }
  .decades:empty { display: none; }
  /* Eine Zeile pro Jahr: Jahr · Farbbalken (Länge = Anzahl, Farben dunkel → hell) · Anzahl */
  .year-row { display: grid; border-block-end: var(--rule); scroll-margin-block-start: calc(var(--safe-top) + var(--header-h) + var(--gap-item)); }
  .yr-head, .year-row.is-gap { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto; gap: var(--gap-item); align-items: center; padding-block: var(--gap-tight); text-align: start; text-transform: none; letter-spacing: 0; }
  .yr-head { inline-size: 100%; cursor: pointer; }
  .year-row .yr { font-size: var(--step-1); font-weight: var(--weight-black); font-stretch: var(--width-tight); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
  .yr-bar { block-size: 1.1rem; inline-size: max(0.4rem, calc(var(--share) * 100%)); background-size: 100% 100%; border-radius: 2px; transition: block-size var(--dur-fast); }
  .yr-count { font-size: var(--step--1); color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .yr-head::after { content: "+"; grid-column: 3; grid-row: 1; justify-self: end; inline-size: 1em; text-align: center; color: var(--color-muted); }
  .yr-count { margin-inline-end: 1.4em; grid-column: 3; grid-row: 1; }
  .yr-head[aria-expanded="true"]::after { content: "–"; }
  .yr-head[aria-expanded="true"] .yr-bar { block-size: 1.6rem; }
  @media (hover: hover) { .yr-head:hover .yr-bar { block-size: 1.6rem; } .yr-head:hover .yr { color: var(--color-accent); } }
  .year-recs { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--gap-item) var(--gap-group); padding-block: var(--gap-item) var(--gap-group); }
  .year-recs[hidden] { display: none; }
  .year-row.is-gap .yr { font-size: var(--step--1); color: var(--color-muted); font-weight: var(--weight-label); }
  .year-row.is-gap .gap-note { grid-column: 2 / -1; }
  .year-more { align-self: center; justify-self: start; }
  .gap-note { font-size: var(--step--1); color: var(--color-muted); }
  @container view (min-width: 40rem) {
    .yr-head, .year-row.is-gap { grid-template-columns: 5rem minmax(0, 1fr) 8rem; }
    .year-row .yr { font-size: var(--step-2); }
  }
  /* =========== Explore: Color =========== */
  .swatch-pick { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .swatch-btn { inline-size: 2rem; aspect-ratio: 1; border-radius: var(--radius-round); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15); }
  .filter-row .swatch-btn { inline-size: 1.75rem; }
  [data-ref=decades] .pill:not([data-value=""]) { text-transform: none; }   /* „90s“ statt „90S“ */
  .swatch-btn[aria-pressed="true"] { outline: 2px solid var(--color-fg); outline-offset: 3px; }

  /* =========== Scenes =========== */
  .chapter { --row-lead: 2.5rem; grid-template-columns: var(--row-lead) minmax(0, 1fr) 4.5rem; padding-block: var(--gap-item); }
  .chapter > .disc, .chapter > .ghost-ring { --disc: 4.5rem; }
  .chapter .n { font-size: var(--step-3); font-weight: var(--weight-black); font-stretch: var(--width-tight); color: var(--color-muted); }
  .chapter b { font-size: clamp(1.8rem, 5vw, 3.2rem); font-weight: var(--weight-black); font-stretch: var(--width-tight); letter-spacing: -0.04em; line-height: 1; }
  .chapter:not(.is-live) b { color: var(--color-muted); }
  .chapter.is-live .n { color: var(--color-accent); }
  @container view (min-width: 40rem) { .chapter { --row-lead: 4rem; gap: var(--gap-group); padding-block: var(--gap-group); } }
  /* Genres: Name links, Misch-Ring rechts */
  .genre-row { grid-template-columns: minmax(0, 1fr) 4.5rem; padding-block: var(--gap-item); }
  .genre-row b { display: block; font-size: clamp(1.4rem, 4vw, 2.4rem); font-weight: var(--weight-black); font-stretch: var(--width-tight); letter-spacing: -0.03em; line-height: 1.05; }
  .genre-row small { display: block; color: var(--color-muted); }
  .genre-row b::first-letter { text-transform: uppercase; }   /* Genres heißen klein („melodic death metal“) */
  .cities:empty { display: none; }

  /* =========== Mitglieder einer Band (artist.js) =========== */
  /* Auswahl als Zeitachse: Platten von alt nach neu auf einer feinen Linie, „Today“ mit Abstand am Ende */
  .lineup-pick { display: flex; align-items: flex-start; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; padding-block: var(--gap-tight); }
  .lineup-pick::-webkit-scrollbar { display: none; }
  .lineup-record { position: relative; flex: none; display: grid; justify-items: center; gap: 0.3rem; padding: 0 0.35rem; border: 0; background: none; color: var(--color-muted); font: inherit; font-size: var(--step--1); font-variant-numeric: tabular-nums; cursor: pointer; }
  /* Linie durch die Ringmitten – aus den Stücken der einzelnen Knöpfe wird eine Achse */
  .lineup-record::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 1.2rem; block-size: 1px; background: var(--color-line); z-index: 0; }
  .lineup-record:first-child::before { inset-inline-start: 50%; }
  .lineup-disc { position: relative; z-index: 1; display: block; inline-size: 2.4rem; transition: transform var(--dur-fast); }
  .lineup-disc .disc { inline-size: 100%; }
  .lineup-record[aria-pressed="true"] { color: var(--color-fg); font-weight: var(--weight-label); }
  .lineup-record[aria-pressed="true"] .lineup-disc { transform: scale(1.2); box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 3px var(--color-fg); border-radius: 50%; }
  @media (hover: hover) { .lineup-record:hover .lineup-disc { transform: scale(1.12); } }
  /* Trenner vor „Today“: die Achse läuft gestrichelt aus, dann Abstand */
  .lineup-sep { flex: none; inline-size: var(--gap-group); block-size: 1px; margin-block-start: 1.2rem; background: repeating-linear-gradient(90deg, var(--color-line) 0 4px, transparent 4px 8px); }
  .lineup-now { margin-inline-start: var(--gap-tight); padding-inline-end: 0; }
  .lineup-now::before { content: none; }
  .lineup-today { display: grid; place-items: center; block-size: 2.4rem; padding-inline: 1rem; border: 1px solid var(--color-line); border-radius: 999px; font-family: inherit; text-transform: uppercase; letter-spacing: var(--tracking-label, 0.08em); font-weight: var(--weight-label); color: var(--color-fg); transition: background var(--dur-fast), color var(--dur-fast); }
  .lineup-now[aria-pressed="true"] .lineup-today { background: var(--color-fg); border-color: var(--color-fg); color: var(--color-bg); }
  .lineup-caption { font-weight: var(--weight-label); margin-block-start: var(--gap-tight); }
  /* Karten: Name, Instrument, Jahre, weitere Bands */
  .member-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--gap-tight) var(--gap-group); border-block-start: var(--rule); }
  .member-card { display: grid; gap: 0.1rem; align-content: start; padding-block: var(--gap-item); border-block-end: var(--rule); }
  .member-name { font-size: var(--step-1); font-weight: var(--weight-black); font-stretch: var(--width-tight); letter-spacing: var(--tracking-tight); line-height: 1.05; text-decoration: none; }
  .member-role { font-weight: var(--weight-label); }
  .member-years, .member-also { color: var(--color-muted); }
  .member-also:empty { display: none; }
  .member-also a { color: var(--color-fg); text-decoration: underline; text-decoration-color: var(--color-line); text-underline-offset: 0.2em; }
  .member-cards.is-compact .member-name { font-size: var(--step-0); }
  .member-cards.is-compact .member-card { padding-block: var(--gap-tight); }
  /* Family: verwandte Bands über gemeinsame Musiker */
  .family-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--gap-tight) var(--gap-group); border-block-start: var(--rule); }
  .family-card { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: var(--gap-item); align-items: center; padding-block: var(--gap-item); border-block-end: var(--rule); }
  .family-card .disc { inline-size: 3.2rem; }
  .family-name { font-weight: var(--weight-black); font-stretch: var(--width-tight); font-size: var(--step-1); line-height: 1.05; text-decoration: none; color: var(--color-fg); }
  .family-name:hover { text-decoration: underline; text-underline-offset: 0.15em; }
  .family-card small { display: block; color: var(--color-muted); margin-block-start: 0.2rem; }
  .family-card small a { color: var(--color-fg); text-decoration: underline; text-decoration-color: var(--color-line); text-underline-offset: 0.2em; }
  .former-head { margin-block-start: var(--gap-item); color: var(--color-muted); }
  .member-empty { padding-block: var(--gap-item); color: var(--color-muted); }

  /* =========== On the road (Bandseite, ui/road.js) =========== */
  .road-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--gap-item); }
  .road-switch { display: flex; gap: var(--gap-tight); }
  /* Die Daten sind lückenhaft: das steht direkt unter den Zahlen */
  .road-note { margin: 0; font-size: var(--step--1); color: var(--color-muted); }
  .road-preview { margin: 0; font-size: var(--step--1); color: var(--color-accent); text-transform: uppercase; letter-spacing: var(--tracking-label); }
  .road-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .road-bars { display: block; font-family: inherit; }
  .road-bar { fill: var(--color-muted); }
  .road-hit { fill: transparent; cursor: pointer; }
  .road-year:hover .road-bar { opacity: 0.75; }
  .road-base { stroke: var(--color-fg); stroke-width: 1; }
  .road-axis { font-size: 10px; fill: var(--color-muted); font-variant-numeric: tabular-nums; }
  .road-tour { fill: none; stroke: var(--color-fg); stroke-width: 1; }
  .road-tour-name { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--color-fg); }
  .road-tours, .road-shows, .road-with { list-style: none; margin: 0; padding: 0; }
  .road-tours { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); column-gap: var(--gap-group); border-block-start: var(--rule); }
  .road-tours li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: var(--gap-tight); align-items: baseline; padding-block: var(--gap-tight); border-block-end: var(--rule); }
  .road-tours b { font-weight: var(--weight-label); }
  .road-when, .road-n { color: var(--color-muted); font-variant-numeric: tabular-nums; }
  .road-tours .road-more { display: block; border: 0; }
  .road-with { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--gap-tight) var(--gap-group); border-block-start: var(--rule); }
  .road-mate { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: var(--gap-item); align-items: center; padding-block: var(--gap-item); border-block-end: var(--rule); }
  .road-mate .disc, .road-mate .ghost-ring { inline-size: 3.2rem; --disc: 3.2rem; }
  .road-mate small { display: block; color: var(--color-muted); margin-block-start: 0.2rem; text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--step--1); }
  /* Karte: Weltkarte, Regler mit Play, Liste daneben (Telefon: darunter) */
  .road-map { display: grid; gap: var(--gap-group); }
  @container view (min-width: 56rem) { .road-map { grid-template-columns: minmax(0, 2.3fr) minmax(16rem, 1fr); align-items: start; } }
  .road-map-main { display: grid; gap: var(--gap-item); min-inline-size: 0; }
  .road-canvas { min-inline-size: 0; overflow: hidden; background: color-mix(in srgb, var(--color-fg) 8%, var(--color-bg)); }
  .road-map-svg { display: block; inline-size: 100%; block-size: auto; }
  .road-land { fill: var(--color-surface); stroke: var(--color-bg); stroke-width: 0.6; }
  .road-city { fill: var(--color-fg); opacity: 0.16; }
  .road-route { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .road-stop { fill: var(--color-accent); stroke: var(--color-surface); stroke-width: 1; }
  .road-stop.is-now { fill: var(--color-accent); stroke-width: 2; }
  .road-label { font-size: 13px; font-weight: 700; fill: var(--color-fg); paint-order: stroke; stroke: var(--color-surface); stroke-width: 3px; }
  .road-slider { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--gap-item); align-items: center; }
  .road-play { inline-size: 2.75rem; block-size: 2.75rem; border: 0; border-radius: var(--radius-round); background: var(--color-fg); color: var(--color-bg); cursor: pointer; display: grid; place-items: center; }
  .road-play::before { content: ""; inline-size: 0; block-size: 0; border-block: 0.45rem solid transparent; border-inline-start: 0.75rem solid currentColor; margin-inline-start: 0.2rem; }
  .road-play[aria-pressed="true"]::before { inline-size: 0.7rem; block-size: 0.8rem; border: 0; margin: 0; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
  .road-play:disabled { opacity: 0.35; cursor: default; }
  .road-slider-track { position: relative; display: grid; }
  .road-slider-bars { inline-size: 100%; block-size: 2.5rem; display: block; }
  .road-slider-bars rect { fill: var(--color-muted); opacity: 0.6; }
  .road-slider-bars rect.is-on { fill: var(--color-accent); opacity: 1; }
  .road-slider-track input { inline-size: 100%; margin: 0; accent-color: var(--color-fg); }
  .road-slider-ends { display: flex; justify-content: space-between; font-size: var(--step--1); color: var(--color-muted); font-variant-numeric: tabular-nums; }
  .road-side { display: grid; gap: var(--gap-tight); min-inline-size: 0; }
  .road-year-title { margin: 0; font-size: var(--step-4); font-weight: var(--weight-black); font-stretch: var(--width-display); line-height: 0.9; font-variant-numeric: tabular-nums; }
  .road-year-meta { margin: 0; color: var(--color-muted); }
  .road-shows { border-block-start: var(--rule); max-block-size: 26rem; overflow-y: auto; overscroll-behavior: contain; }
  .road-shows li { padding-block: var(--gap-tight); border-block-end: var(--rule); }
  .road-shows li.is-now { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
  .road-show { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: var(--gap-tight); inline-size: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
  .road-show b { font-weight: var(--weight-label); }
  .road-shows small { display: block; padding-inline-start: calc(3.6rem + var(--gap-tight)); color: var(--color-muted); }
  .road-shows small a { color: var(--color-fg); }
  .road-none { color: var(--color-muted); }
  /* =========== Family tree =========== */
  /* Musikerliste: Suche und Instrument-Filter, darunter Namen als Chips (wer mehrere Bands verbindet: mit Zahl) */
  .people-tools { display: grid; gap: var(--gap-tight); }
  .people-search { inline-size: min(100%, 24rem); }
  .people { display: flex; flex-wrap: wrap; gap: var(--gap-tight); font-size: var(--step--1); }
  .person { display: inline-flex; align-items: baseline; gap: 0.4em; padding: 0.35rem 0.75rem; border: 1px solid var(--color-line); border-radius: 999px; background: none; color: var(--color-fg); font: inherit; cursor: pointer; }
  .person small { color: var(--color-muted); font-size: 0.85em; }
  @media (hover: hover) { .person:hover { border-color: var(--color-fg); } }
  .person[aria-pressed="true"] { background: var(--color-fg); border-color: var(--color-fg); color: var(--color-bg); font-weight: var(--weight-label); }
  .person[aria-pressed="true"] small { color: inherit; opacity: 0.7; }
  .people-empty { color: var(--color-muted); }
  /* Gewählte Person: Leiste mit Stationen klebt unten (über der Tab-Bar), solange der Stammbaum im Bild ist */
  .trail { min-block-size: 1.6em; font-weight: var(--weight-label); }
  .trail-hint { color: var(--color-muted); font-weight: var(--weight-text); }
  .trail.is-on { position: sticky; inset-block-end: calc(var(--chrome-bottom, 0px) + var(--gap-tight)); z-index: 6; display: flex; align-items: center; gap: var(--gap-item); padding: var(--gap-tight) var(--gap-item); background: var(--color-bg); border: var(--rule); border-radius: 0.6rem; box-shadow: 0 0.4rem 1.2rem color-mix(in srgb, var(--color-fg) 15%, transparent); }
  .trail-text { flex: 1; min-inline-size: 0; font-size: var(--step--1); line-height: var(--leading-snug); }
  .trail-close { flex: none; inline-size: 2.2rem; block-size: 2.2rem; border: 0; border-radius: 50%; background: none; color: var(--color-fg); font: inherit; font-size: 1.1rem; cursor: pointer; }
  @media (hover: hover) { .trail-close:hover { background: var(--color-surface); } }
  /* Der Baum scrollt nur seitlich – hoch und runter scrollt die Seite (am Telefon kein zweiter Scrollbereich).
     Namen (Bands, Mitglieder) bleiben links stehen; die Jahreszeile ist eine eigene Leiste (.tree-head), die unter
     dem Kopf klebt und seitlich mitläuft (ui/tree.js). */
  .tree-scroll, .tree-head { --name-col: 10rem; }
  @container view (max-width: 40rem) { .tree-scroll, .tree-head { --name-col: 7.5rem; } .tree { min-inline-size: max(100%, 48rem); } }
  .tree-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; border-block-end: var(--rule); }
  .tree { position: relative; display: grid; grid-template-columns: var(--name-col); inline-size: max-content; min-inline-size: max(100%, 58rem); font-size: var(--step--1); }   /* Jahresspalten setzt ui/tree.js. So breit wie alle Spalten: ragten sie über den Baum hinaus, könnten die Namen dort nicht mehr kleben */
  .tree-head { position: sticky; inset-block-start: calc(var(--safe-top) + var(--chrome-top, var(--header-h))); z-index: 5; overflow: hidden; background: var(--color-bg); border-block: var(--rule); font-size: var(--step--1); }   /* direkt unter dem Kopf (gemessen, js/core/nav.js) */
  .tree-head::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--name-col); z-index: 1; background: var(--color-bg); }   /* über der Namensspalte nichts */
  .tree-head-inner { display: grid; will-change: transform; }
  .tree .era { background: var(--color-line); opacity: 0.35; pointer-events: none; }
  .tree-head .year.is-late { border-inline-start-color: transparent; }
  .lane-disc.is-late { inline-size: 1.2rem; justify-self: center; }
  .tree-head .year { padding-block: 0.4rem; color: var(--color-muted); border-inline-start: var(--rule); padding-inline-start: 0.25rem; font-variant-numeric: tabular-nums; }
  .tree .name { grid-column: 1; position: sticky; inset-inline-start: 0; z-index: 3; align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-inline-size: 0; padding-inline-end: 0.8rem; background: var(--color-bg); box-shadow: 0.6rem 0 0.6rem -0.6rem color-mix(in srgb, var(--color-fg) 25%, transparent); line-height: var(--leading-snug); font-weight: var(--weight-label); }
  /* Name und Zusatz je eine Zeile, sonst überlappen lange Zusätze („formerly … · Ort“) die nächste Band */
  .tree .name :is(a, small) { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .lane { position: relative; grid-column: var(--from) / var(--to); align-self: center; block-size: 3px; margin-block: 1.4rem; background: var(--color-fg); transition: opacity var(--dur-fast), block-size var(--dur-fast); }
  .lane.is-aka { background: var(--color-muted); }
  .lane.is-unknown { background: repeating-linear-gradient(90deg, var(--color-muted) 0 0.5rem, transparent 0.5rem 0.8rem); }   /* Mitglied ohne Jahre */
  .lane.is-live { background: repeating-linear-gradient(90deg, var(--color-muted) 0 0.2rem, transparent 0.2rem 0.4rem); }   /* nur live: fein gepunktet */
  .lane.is-open::after { content: "→"; position: absolute; inset-inline-end: -0.9rem; inset-block-start: -0.8rem; }
  .lane-disc { grid-column: var(--at); grid-row: var(--row); align-self: center; inline-size: 1.7rem; z-index: 1; border-radius: 50%; transition: transform var(--dur-fast); box-shadow: 0 0 0 2px var(--color-bg); }   /* Hof: dunkle Ringe vor dunklem Grund */
  @media (hover: hover) { .lane-disc:hover { transform: scale(1.25); z-index: 2; } }
  @media (hover: none) { .lane-disc:active { transform: scale(1.25); z-index: 2; } }
  .lane-disc .disc { inline-size: 100%; }
  /* EPs kleiner als Alben */
  .lane-disc.is-ep { inline-size: 1.15rem; justify-self: center; }
  .lane-disc.is-late.is-ep { inline-size: 0.85rem; }
  /* Bandseite: Platten in der Jahresleiste, größer, unter den Jahreszahlen */
  .tree-head.has-records .lane-disc { inline-size: 2.4rem; justify-self: center; margin-block: 0.35rem 0.5rem; }
  .tree-head.has-records .lane-disc.is-late { inline-size: 1.8rem; }
  .tree-head.has-records .year { grid-row: 1; }
  .tree.is-filtered .lane { opacity: 0.15; }
  .tree.is-filtered .lane-disc { opacity: 0.35; }
  .tree.is-filtered .is-hit { opacity: 1; block-size: 7px; background: var(--color-signal); }
  .tree.is-filtered .is-hit.is-live, .ct-hit.is-live { background: repeating-linear-gradient(90deg, var(--color-signal) 0 0.25rem, transparent 0.25rem 0.45rem); }   /* nur live */
  .tree-legend i.is-live { block-size: 3px; background: repeating-linear-gradient(90deg, var(--color-muted) 0 0.2rem, transparent 0.2rem 0.4rem); }
  .tree.is-filtered .is-hit.is-unknown { background: repeating-linear-gradient(90deg, var(--color-signal) 0 0.5rem, transparent 0.5rem 0.8rem); }   /* Jahre unbekannt: Zeit der Band */
  .tree-links { position: absolute; inset: 0; z-index: 1; overflow: visible; pointer-events: none; }
  .tree-links path { fill: none; stroke: var(--color-signal); stroke-width: 3; stroke-linecap: round; }
  /* Tour-Bögen (Schalter Members · Tours): gestrichelt in der Akzentfarbe, angetippt durchgezogen */
  .arc-probe { align-self: stretch; pointer-events: none; }
  .tree-arcs { position: absolute; inset: 0; z-index: 2; overflow: visible; pointer-events: none; }
  .arc { pointer-events: auto; cursor: pointer; }
  .arc-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; }
  .arc-line { fill: none; stroke: var(--color-signal); stroke-dasharray: 5 5; stroke-linecap: round; pointer-events: none; opacity: 0.85; }
  .arc circle { fill: var(--color-signal); pointer-events: none; }
  .arc.is-on .arc-line, .arc:hover .arc-line { stroke-dasharray: none; opacity: 1; }
  .tree.is-tours .lane { opacity: 0.45; }
  .tree-legend i.is-tour { block-size: 0; background: none; border-block-start: 2px dashed var(--color-signal); }
  .people-rest { flex-basis: 100%; }
  .people-more { font-size: var(--step--1); }
  .tree-legend { display: flex; flex-wrap: wrap; gap: var(--gap-tight) var(--gap-group); align-items: center; font-size: var(--step--1); color: var(--color-muted); }
  .tree-legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
  .tree-legend i { display: inline-block; inline-size: 1.6rem; block-size: 3px; background: var(--color-fg); }
  .tree-legend i.is-aka { background: var(--color-muted); }
  .tree-legend i.is-unknown { background: repeating-linear-gradient(90deg, var(--color-muted) 0 0.4rem, transparent 0.4rem 0.6rem); }
  .tree-legend i.is-disc { inline-size: 0.9rem; block-size: 0.9rem; border-radius: 50%; background: none; border: 3px solid var(--color-fg); }

  /* Family tree am Telefon (ui/compacttree.js): eine Achse, seitlich wischbar; Name über der Linie bleibt links stehen.
     Schatten an den Rändern zeigen, dass es weitergeht (verdeckt, sobald das Ende erreicht ist: background-attachment local) */
  .is-compact .tree-head { display: none; }
  .is-compact .tree-scroll {
    container-type: inline-size; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; border-block-end: 0;
    --shade: color-mix(in srgb, var(--color-fg) 14%, transparent);
    background:
      linear-gradient(to right, var(--color-bg) 40%, transparent) left / 2rem 100% no-repeat local,
      linear-gradient(to left, var(--color-bg) 40%, transparent) right / 2rem 100% no-repeat local,
      linear-gradient(to right, var(--shade), transparent) left / 1.2rem 100% no-repeat scroll,
      linear-gradient(to left, var(--shade), transparent) right / 1.2rem 100% no-repeat scroll;
  }
  .is-compact .tree-scroll::-webkit-scrollbar { display: none; }
  .tree.is-compact { display: block; position: relative; inline-size: auto; min-inline-size: 0; }
  .ct-axis { position: sticky; inset-block-start: calc(var(--safe-top) + var(--chrome-top, var(--header-h))); z-index: 4; block-size: 1.7rem; overflow: hidden; background: var(--color-bg); border-block-end: var(--rule); font-size: var(--step--1); color: var(--color-muted); font-variant-numeric: tabular-nums; }
  .ct-axis-in { position: relative; block-size: 100%; }
  .ct-axis span { position: absolute; inset-block-start: 0.35rem; translate: -50% 0; }
  .ct-axis span.is-half { opacity: 0.6; }
  /* Bandseite: Platten in der Jahresleiste, unter den Jahreszahlen */
  .ct-axis.has-records { block-size: 3.1rem; }
  .ct-axis .ct-disc { inset-block-start: 1.75rem; }
  .ct-seg.is-unknown { background: repeating-linear-gradient(90deg, var(--color-fg) 0 0.4rem, transparent 0.4rem 0.6rem); }
  .ct-row { padding-block: 0.45rem 0.4rem; border-block-end: 1px solid color-mix(in srgb, var(--color-fg) 8%, var(--color-bg)); transition: opacity var(--dur-fast); }
  .ct-head { position: sticky; inset-inline-start: 0; z-index: 3; box-sizing: border-box; inline-size: 100cqi; display: flex; align-items: center; gap: 0.5rem; min-block-size: 1.6rem; }
  .ct-name { font-weight: var(--weight-label); color: var(--color-fg); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
  .ct-city { color: var(--color-muted); font-size: var(--step--1); white-space: nowrap; }
  .ct-years { margin-inline-start: auto; color: var(--color-muted); font-size: var(--step--1); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ct-open { flex: none; inline-size: 2.75rem; block-size: 2.75rem; margin-block: -0.6rem; border: 0; background: none; color: var(--color-muted); cursor: pointer; }
  .ct-open::before { content: "⌄"; font-size: 1.1rem; }
  .ct-open[aria-expanded="true"]::before { content: "⌃"; }
  .ct-track { position: relative; block-size: 1rem; }
  .ct-seg { position: absolute; inset-block-start: 0.4rem; block-size: 3px; border-radius: 2px; background: var(--color-fg); }
  .ct-seg.is-aka { background: var(--color-muted); }
  .ct-seg.is-live { background: repeating-linear-gradient(90deg, var(--color-muted) 0 0.2rem, transparent 0.2rem 0.4rem); }
  .ct-seg.is-return { opacity: 0.7; }
  .ct-disc { position: absolute; inset-block-start: 0; inline-size: 1rem; margin-inline-start: -0.5rem; border-radius: 50%; box-shadow: 0 0 0 2px var(--color-bg); z-index: 1; }
  .ct-disc.is-ep { inline-size: 0.7rem; margin-inline-start: -0.35rem; inset-block-start: 0.15rem; }
  .ct-disc .disc { inline-size: 100%; }
  .ct-hit { position: absolute; inset-block-start: 0.3rem; block-size: 6px; border-radius: 3px; background: var(--color-signal); z-index: 2; }
  .ct-hit.is-unknown { background: repeating-linear-gradient(90deg, var(--color-signal) 0 0.4rem, transparent 0.4rem 0.6rem); }
  .ct-links { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: visible; }
  .ct-links path { fill: none; stroke: var(--color-signal); stroke-width: 3; stroke-linecap: round; }
  .tree.is-compact.is-filtered .ct-row:not(.is-on, .is-open) { opacity: 0.35; }
  .tree.is-compact .ct-row.is-dim { opacity: 0.2; }
  .tree.is-compact.is-filtered .ct-row.is-on .ct-name { font-weight: var(--weight-black); }
  .tree.is-compact.is-tours .ct-seg { opacity: 0.5; }
  /* Band aufgeklappt */
  .ct-detail { position: sticky; inset-inline-start: 0; box-sizing: border-box; inline-size: 100cqi; display: grid; gap: var(--gap-tight); margin-block: 0.5rem 0.3rem; padding: var(--gap-item); border: var(--rule); border-radius: 0.8rem; background: var(--color-surface); }
  .ct-detail-head { display: flex; align-items: center; gap: var(--gap-item); }
  .ct-detail-head .disc { inline-size: 2.5rem; flex: none; }
  .ct-detail-head small { display: block; color: var(--color-muted); }
  .ct-detail .label { margin: 0.3rem 0 0; color: var(--color-muted); }
  .ct-members { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
  .ct-members li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; gap: var(--gap-tight); }
  .ct-member { padding: 0.35rem 0; border: 0; background: none; color: var(--color-fg); font: inherit; font-size: var(--step--1); text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
  .ct-lane { position: relative; block-size: 0.5rem; }
  .ct-lane i { position: absolute; inset-block: 0.1rem; border-radius: 2px; background: var(--color-signal); }
  .ct-lane i.is-unknown { background: repeating-linear-gradient(90deg, var(--color-signal) 0 0.3rem, transparent 0.3rem 0.5rem); }
  .ct-shares { display: flex; flex-wrap: wrap; gap: var(--gap-tight); }
  .ct-share { padding: 0.4rem 0.75rem; border: 1px solid var(--color-line); border-radius: var(--radius-pill); color: var(--color-fg); text-decoration: none; font-size: var(--step--1); }
  .ct-share small { display: inline; color: var(--color-muted); }
  .ct-detail-links { display: flex; flex-wrap: wrap; gap: var(--gap-group); align-items: baseline; margin: 0.2rem 0 0; }
  /* Musiker folgen (Telefon): Knopf, gewählt mit Name, Blatt von unten */
  .follow { display: flex; align-items: center; gap: 0.6rem; inline-size: 100%; min-block-size: 3rem; padding: 0 0.9rem; border: 1px solid var(--color-line); border-radius: 0.8rem; background: var(--color-surface); color: var(--color-fg); font: inherit; text-align: start; cursor: pointer; }
  .follow svg { inline-size: 1.1rem; block-size: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
  .follow span { flex: 1; }
  .follow small { color: var(--color-muted); font-size: var(--step--1); }
  .follow.is-on { border-color: var(--color-accent); cursor: default; padding-inline-end: 0.3rem; }
  .follow.is-on b { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .follow-dot { inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--color-accent); flex: none; }
  .follow-change { border: 0; background: none; color: var(--color-fg); font: inherit; font-size: var(--step--1); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; padding: 0.6rem 0.3rem; }
  .follow-sheet { inline-size: 100%; max-inline-size: 100%; block-size: min(80dvh, 44rem); margin: auto 0 0; padding: var(--gap-item) var(--gutter) 0; border: 0; border-block-start: var(--rule); border-radius: 1rem 1rem 0 0; background: var(--color-bg); color: var(--color-fg); display: flex; flex-direction: column; gap: var(--gap-tight); }
  .follow-sheet:not([open]) { display: none; }
  .follow-sheet::backdrop { background: rgb(0 0 0 / 0.5); }
  .follow-sheet-head { display: flex; align-items: center; justify-content: space-between; }
  .follow-sheet-head b { font-size: var(--step-1); }
  .follow-sheet .people-search { inline-size: 100%; }
  .follow-sheet-sub { margin: var(--gap-tight) 0 0; color: var(--color-muted); }
  .follow-list { list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--gap-group); overflow-y: auto; overscroll-behavior: contain; flex: 1; }
  .person-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem var(--gap-item); inline-size: 100%; padding: 0.7rem 0; border: 0; border-block-end: var(--rule); background: none; color: var(--color-fg); font: inherit; text-align: start; cursor: pointer; }
  .person-row span { grid-row: span 2; align-self: center; color: var(--color-muted); font-size: var(--step--1); }
  .person-row small { color: var(--color-muted); font-size: var(--step--1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .person-row[aria-pressed="true"] b { color: var(--color-accent); }
  /* =========== Artists =========== */
  .artist-list { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); column-gap: var(--gap-group); }

  /* =========== Play =========== */
  /* Bildschirm-Seite (layout: "screen"): Überschrift, Ring und Antworten auf einem Screen.
     Der Ring nimmt, was übrig bleibt – nie mehr als Breite oder Höhe seines Feldes. */
  .view-screen {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--gap-item);
    min-block-size: calc(100dvh - var(--chrome-top, 4.5rem) - var(--chrome-bottom, 0px));
    padding-block: var(--gap-item);
  }
  .view-screen > .tabs { margin-block-end: 0; }
  /* Wird es doch mehr (z. B. Ergebnis teilen), wächst die Seite mit statt den Fuß zu überlappen */
  .view-screen > :not(.tabs) { min-block-size: 0; }

  .game {
    display: grid;
    grid-template: "head" auto "stage" minmax(min(14rem, 32vh), 1fr) "play" auto / minmax(0, 1fr);
    gap: var(--gap-item);
    justify-items: center;
    text-align: center;
  }
  .game-head { grid-area: head; display: grid; gap: var(--gap-tight); justify-items: center; inline-size: 100%; }
  .game-head .fit .line { margin-inline: auto; }
  .game-play { grid-area: play; display: grid; gap: var(--gap-item); justify-items: center; inline-size: 100%; }
  /* Nach der Antwort: die Platte zum Hören, so breit wie die Antworten */
  .quiz-listen { inline-size: 100%; max-inline-size: 32rem; text-align: start; }
  .quiz-listen .played { margin: 0; }
  .game .stage { grid-area: stage; container-type: size; inline-size: 100%; block-size: 100%; }
  .game .stage .disc { --disc: min(100cqi, 100cqb); }
  .game .stamp { font-size: calc(min(100cqi, 100cqb) * 0.19); }
  .game .answers { inline-size: min(36rem, 100%); }

  /* Querformat ab Laptop: Ring links so hoch wie möglich, Kopf und Antworten rechts */
  @media (min-width: 56rem) and (min-aspect-ratio: 5/4) {
    .game {
      /* rechte Spalte als Gruppe mittig zum Ring: leere fr-Zeilen oben und unten */
      grid-template: "stage ." 1fr "stage head" auto "stage play" auto "stage ." 1fr / minmax(0, 1fr) minmax(20rem, 28rem);
      row-gap: var(--gap-item);
      column-gap: var(--gap-section);
      justify-items: start;
      align-content: center;
      text-align: start;
    }
    .game-head { justify-items: start; }
    .game-head .fit .line { margin-inline: 0; }
    .game-play { justify-items: start; }
    .game .answers { inline-size: 100%; }
  }

  .score { font-weight: var(--weight-label); color: var(--color-muted); font-variant-numeric: tabular-nums; }
  /* Nach dem Spiel, in beiden Spielen gleich: Teilen-Knopf und der Weg zum anderen Spiel – eine Zeile über einer feinen Linie.
     Der Ergebnistext selbst geht nur beim Teilen mit, auf der Seite steht das Ergebnis schon groß. */
  .share-result { inline-size: 100%; margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap-item); padding-block-start: var(--gap-item); border-block-start: var(--rule); }
  .hint { min-block-size: 1.5em; font-weight: var(--weight-label); }
  .big-score { font-size: clamp(7rem, 26vw, 14rem); font-weight: var(--weight-black); font-stretch: var(--width-tight); letter-spacing: -0.06em; line-height: var(--leading-tight); }
  .big-score small { display: inline; font-size: 0.3em; letter-spacing: -0.02em; }
  /* Nach dem Spielen: die Platten der Runde zum Nachhören (ui/played.js) */
  .played-section { inline-size: 100%; justify-self: stretch; text-align: start; padding-block-start: var(--gap-group); }
  .played { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); column-gap: var(--gap-group); border-block-start: var(--rule); }
  .played-item { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--gap-item); align-items: center; padding-block: var(--gap-item); border-block-end: var(--rule); }
  .played-disc .disc { inline-size: 100%; transition: transform var(--dur-fast); }
  @media (hover: hover) { .played-disc:hover .disc { transform: scale(1.06); } }
  .played-text { display: grid; gap: 0.15rem; min-inline-size: 0; }
  .played-title { font-size: var(--step-1); font-weight: var(--weight-black); font-stretch: var(--width-tight); letter-spacing: var(--tracking-tight); line-height: 1.05; text-decoration: none; overflow-wrap: anywhere; }
  .played-text small { color: var(--color-muted); }
  .played-mark { font-weight: var(--weight-label); color: var(--color-fg); }
  .played-player { grid-column: 1 / -1; display: grid; gap: var(--gap-tight); }
  .played-item.is-wrong .played-mark { color: var(--color-accent); }
  .played-links { display: flex; flex-wrap: wrap; gap: var(--gap-tight) var(--gap-item); margin-block-start: 0.3rem; }

  /* Bestenliste */
  .board { counter-reset: rank; }
  .board li { counter-increment: rank; --row-lead: 2.4rem; grid-template-columns: 2.2rem var(--row-lead) minmax(0, 1fr) auto; font-variant-numeric: tabular-nums; }
  .board li::before { content: counter(rank); font-size: var(--step-2); font-weight: var(--weight-black); font-stretch: var(--width-tight); letter-spacing: var(--tracking-tight); }
  .board b { font-weight: var(--weight-label); overflow-wrap: anywhere; }
  .board .pts { font-size: var(--step-2); font-weight: var(--weight-black); font-stretch: var(--width-tight); }
  .board .streak { display: none; color: var(--color-muted); font-size: var(--step--1); min-inline-size: 5rem; text-align: end; }
  .board li.is-you { color: var(--color-accent); }
  .board li.is-you b::after { content: " · you"; }
  @container view (min-width: 40rem) {
    .board li { grid-template-columns: 3rem var(--row-lead) minmax(0, 1fr) auto auto; }
    .board .streak { display: block; }
  }

  /* =========== Konto =========== */
  /* Formular-Seite (Sign in, Admin): eine ruhige Spalte, kein Bild */
  .form-page { display: grid; justify-items: start; }
  .form-page .form { inline-size: 100%; max-inline-size: 32rem; }
  .mail { inline-size: 100%; max-inline-size: 34rem; margin-inline: auto; background: var(--color-surface); border: var(--rule); }
  .mail-head { display: grid; grid-template-columns: 5rem 1fr; gap: 0.4rem 1rem; padding: 1rem 1.4rem; border-block-end: var(--rule); font-size: var(--step--1); }
  .mail-head dt { color: var(--color-muted); }
  .mail-body { display: grid; gap: 1.1rem; justify-items: start; padding: 2rem 1.4rem 2.2rem; }
  .mail-code { font-size: var(--step-4); font-weight: var(--weight-black); letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
  .danger-zone { display: grid; gap: var(--gap-item); justify-items: start; padding-block-start: var(--gap-item); border-block-start: var(--rule); }

  /* =========== Admin =========== */
  /* Creator: Navigation links (Desktop) bzw. oben (Telefon), rechts Karten. Immer hell (core/router.js). */
  .view[data-page="creator"] { gap: 0; }
  .admin-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-item); align-items: start; }
  .admin-nav { position: sticky; inset-block-start: calc(var(--safe-top, 0px) + var(--header-h, 0px)); z-index: 5; display: flex; align-items: center; gap: var(--gap-item); background: var(--color-bg); border-block-end: var(--rule); }
  .admin-who, .admin-out { display: none; }
  .admin-who b { color: var(--color-fg); }
  .admin-tabs { display: flex; gap: var(--gap-item); flex: 1; min-inline-size: 0; overflow-x: auto; scrollbar-width: none; }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tab { flex: 0 0 auto; padding: 0.8rem 0.1rem 0.7rem; border-block-end: 3px solid transparent; color: var(--color-muted); font-weight: var(--weight-label); font-stretch: var(--width-label); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--step--1); white-space: nowrap; text-align: start; }
  .admin-tab[aria-selected="true"] { color: var(--color-fg); border-color: var(--color-fg); }
  .admin-tab:hover { color: var(--color-fg); }
  /* Creator am Telefon (IDEAS §7, Schritt 4): alle fünf Bereiche passen in eine Zeile, Karten in Karten mit weniger Rand,
     die Tab-Bar der Website (Explore · Play) ist im Creator nur im Weg */
  @container view (max-width: 30rem) {
    .admin-tabs { gap: 0.7rem; justify-content: space-between; }
    .admin-tab { letter-spacing: 0.06em; }
    .card { padding: var(--gap-tight) 0.8rem var(--gap-item); }
    .card :is(.road-box, .feature-card, .panel.stack) { padding: 0.7rem; }
    .q-item { row-gap: 0.4rem; }
  }
  :root:has(.view[data-page="creator"]:not([hidden])) .tabbar { display: none; }
  .tab-count:not(:empty) { display: inline-block; min-inline-size: 1.5em; margin-inline-start: 0.3em; padding: 0 0.4em; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-on-accent); text-align: center; letter-spacing: 0; }
  .admin-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-item); min-inline-size: 0; padding-block-end: var(--gap-section); }
  .admin-sub { padding-block: 0.2rem; }
  @container view (min-width: 56rem) {
    .admin-shell { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--gap-group); }
    .admin-nav { flex-direction: column; align-items: stretch; gap: var(--gap-item); padding-block: var(--gap-item); border: 0; }
    .admin-who, .admin-out { display: block; }
    .admin-who { color: var(--color-muted); font-size: var(--step--1); }
    .admin-out { justify-self: start; font-size: var(--step--1); color: var(--color-muted); }
    .admin-tabs { flex-direction: column; gap: 0; overflow: visible; }
    .admin-tab { padding: 0.55rem 0 0.55rem 0.8rem; border-block-end: 0; border-inline-start: 3px solid var(--color-line); }
    .admin-main { padding-block-start: var(--gap-item); }
  }

  /* Karten: Kopf mit Titel, „?“ und Aktionen rechts; Erklärung nur auf Wunsch */
  .card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-item); padding: var(--gap-item); border: 1px solid var(--color-line); border-radius: 0.6rem; background: var(--color-bg); min-inline-size: 0; }
  .card-quiet { border-style: dashed; }
  .card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-tight) 0.6rem; }
  .card-head .h-section { margin: 0; display: flex; align-items: baseline; gap: 0.5rem; }
  .card-actions { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: var(--gap-tight); align-items: center; }
  .help-btn { inline-size: 1.5rem; block-size: 1.5rem; border-radius: 50%; border: 1px solid var(--color-line); color: var(--color-muted); font-size: var(--step--1); font-weight: var(--weight-label); line-height: 1; }
  .help-btn:hover, .help-btn[aria-expanded="true"] { color: var(--color-fg); border-color: var(--color-fg); }
  .help { margin: 0; max-inline-size: var(--measure); color: var(--color-muted); font-size: var(--step--1); }
  details.more { border-block-start: var(--rule); padding-block-start: var(--gap-tight); }
  details.more > summary { cursor: pointer; padding-block: 0.3rem; }
  details.more[open] > summary { margin-block-end: var(--gap-tight); }
  .sticky-save { position: sticky; inset-block-end: calc(var(--safe-bottom, 0px) + var(--tabbar-h, 0px)); z-index: 2; display: flex; flex-wrap: wrap; gap: var(--gap-item); align-items: center; padding-block: 0.6rem; background: var(--color-bg); border-block-start: var(--rule); }

  /* Menü „Approve…“ */
  .menu { position: relative; }
  .menu > summary { list-style: none; cursor: pointer; }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu-list { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 0.3rem); z-index: 6; display: grid; gap: 0.2rem; min-inline-size: 13rem; padding: 0.6rem 0.8rem; background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 0.5rem; box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--color-fg) 15%, transparent); }
  .menu-list .text-button { text-align: start; padding-block: 0.35rem; }

  /* To do: Kacheln oben (was wartet, Harvester, online, Social), darunter Schnellknöpfe und Statuszeile */
  .dashboard { display: grid; gap: var(--gap-item); }
  .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--gap-tight); }
  /* Kachel: Zahl links, Label und eine Zeile Zusatz rechts */
  .tile { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.7rem; row-gap: 0.1rem; align-items: center; padding: 0.6rem 0.8rem; border: 1px solid var(--color-line); border-radius: 0.6rem; text-align: start; text-transform: none; letter-spacing: 0; }
  .tile b { grid-row: span 2; font-size: var(--step-3); font-weight: var(--weight-black); font-stretch: var(--width-tight); line-height: 1; letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
  .tile .label { align-self: end; }
  .tile small { align-self: start; color: var(--color-muted); }
  .quick { align-items: center; column-gap: var(--gap-item); }
  [data-ref=datacheck-status]:not(:empty)::before { content: "· "; }
  .todo-actions { display: flex; flex-wrap: wrap; gap: var(--gap-tight); }
  /* Details unter To do: eine Zeile, aufklappbar */
  .todo-more { border-block-start: var(--rule); }
  .todo-more > summary { display: flex; align-items: center; gap: 0.5rem; padding-block: 0.7rem; cursor: pointer; list-style: none; }
  .todo-more > summary::-webkit-details-marker { display: none; }
  .todo-more > summary::after { content: "+"; margin-inline-start: auto; color: var(--color-muted); }
  .todo-more[open] > summary::after { content: "−"; }
  .todo-body { display: grid; gap: var(--gap-tight); padding-block-end: var(--gap-item); }
  .todo-body > .fine { margin: 0; }
  .todo-body .stack { gap: var(--gap-tight); }
  .tile:hover { border-color: var(--color-fg); }
  /* Today: Fortschritt (Tour dates) unter dem Satz; Runs by itself als Zeile mit Etiketten */
  .tile-bar { grid-column: 2; block-size: 4px; margin-block-start: 0.3rem; border-radius: 2px; background: var(--color-line); overflow: hidden; }
  .tile-bar i { display: block; block-size: 100%; background: var(--color-fg); }
  .runs { margin: 0; align-items: center; gap: var(--gap-tight); }
  .runs .label { margin-inline-end: var(--gap-tight); color: var(--color-muted); }
  /* Creator → Reels (ui/reels.js): Einstellungen links, Vorschau mit Timeline rechts; am Telefon untereinander */
  .reels-saved { align-items: end; gap: var(--gap-tight) var(--gap-item); }
  .reels-saved .row-field { min-inline-size: min(100%, 16rem); flex: 1 1 14rem; }
  .reels { display: grid; gap: var(--gap-group); grid-template-columns: minmax(0, 1fr); align-items: start; }
  @container view (min-width: 56rem) { .reels { grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); } .reels-stage { position: sticky; inset-block-start: calc(var(--chrome-top, 4.5rem) + var(--gap-tight)); } }
  .reels-controls { display: grid; gap: var(--gap-item); }
  .reels-group { display: grid; gap: var(--gap-tight); margin: 0; padding: var(--gap-item); border: 1px solid var(--color-line); border-radius: 0.6rem; min-inline-size: 0; }
  .reels-group legend { padding-inline: 0.3rem; }
  .reels-group .filter-row { flex-wrap: wrap; }
  .reels-group input[type=color] { inline-size: 2.2rem; block-size: 1.6rem; padding: 0; border: 0; background: none; vertical-align: middle; }
  .reels-group input[type=range] { inline-size: 100%; }
  .reels-layout { display: grid; gap: 0.3rem; }
  .reels-slider { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: var(--gap-tight); font-size: var(--step--1); }
  /* Voice-over-Clips: Name (springt hin), Start, Länge, löschen */
  .reels-clips { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; font-size: var(--step--1); }
  .reels-clips:empty { display: none; }
  .reels-clips li { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem auto auto; align-items: center; gap: var(--gap-tight); padding: 0.15rem 0.3rem; border-radius: 0.3rem; }
  .reels-clips li.is-on { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
  .reels-clips .reels-clip-name { justify-self: start; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0; }
  .reels-clips input { inline-size: 100%; padding-block: 0.1rem; font-variant-numeric: tabular-nums; }
  .reels-clips small { color: var(--color-muted); font-variant-numeric: tabular-nums; }
  .reels-stage { display: grid; gap: var(--gap-tight); justify-items: center; min-inline-size: 0; }
  .reels-canvas { display: block; inline-size: auto; block-size: auto; max-inline-size: 100%; max-block-size: 62vh; border: 1px solid var(--color-line); border-radius: 0.4rem; background: #0e0e0e; }
  .reels-transport { justify-content: center; align-items: center; }
  .reels-clock { font-variant-numeric: tabular-nums; min-inline-size: 8rem; text-align: center; }
  .reels-timeline { inline-size: 100%; block-size: 124px; cursor: pointer; touch-action: none; border-radius: 0.4rem; }
  .reels-progress { inline-size: 100%; }
  /* KI unter der Timeline: Suno-Vorschlag und Voice-over-Skript */
  .reels-ai { display: grid; gap: var(--gap-tight); inline-size: 100%; padding-block-start: var(--gap-item); border-block-start: var(--rule); }
  .reels-ai textarea { resize: vertical; }
  .reels-out { display: grid; gap: var(--gap-tight); padding: var(--gap-item); border: 1px solid var(--color-line); border-radius: 0.6rem; }
  .reels-out-head, .reels-out-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--gap-tight); }
  .reels-mono { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
  .reels-lyrics { max-block-size: 22rem; overflow: auto; padding: var(--gap-tight); background: var(--color-surface); border-radius: 0.4rem; }
  .reels-sections { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; font-size: var(--step--1); }
  .reels-sections li { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: var(--gap-tight); font-variant-numeric: tabular-nums; }
  .reels-sections small { color: var(--color-muted); }
  /* Site: Funktionen als Karten – Schalter, ein Satz, Stand, Link */
  .feature-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--gap-tight); }
  .feature-card { display: flex; flex-direction: column; gap: var(--gap-tight); padding: 0.8rem; border: 1px solid var(--color-line); border-radius: 0.6rem; }
  .feature-card > .fine { margin: 0; }
  .feature-card > :is(a, button):last-child { align-self: flex-start; margin-block-start: auto; }
  /* Review: Schalter „Goes online without you“, eingeklappt, Zusammenfassung in der Kopfzeile */
  .auto-card > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.7rem; cursor: pointer; list-style: none; }
  .auto-card > summary::-webkit-details-marker { display: none; }
  .auto-card > summary::after { content: "+"; margin-inline-start: auto; color: var(--color-muted); }
  .auto-card[open] > summary::after { content: "−"; }
  .auto-card > summary small { color: var(--color-muted); }
  .auto-card[open] { display: grid; gap: var(--gap-tight); }
  .runs-chip { cursor: pointer; background: none; color: inherit; font: inherit; text-transform: none; letter-spacing: 0; padding: 0.15rem 0.6rem; border: 1px solid var(--color-line); border-radius: 999px; font-size: var(--step--1); }
  .tile.is-warn { border-color: var(--color-accent); }
  .tile.is-warn b { color: var(--color-accent); }

  /* To do: eine Zeile pro Aufgabe, Knopf rechts */
  .todo { display: grid; }
  .todo-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap-tight) var(--gap-item); padding-block: 0.7rem; border-block-end: var(--rule); }
  .todo-item:last-child { border-block-end: 0; }
  .todo-item > span { display: grid; gap: 0.1rem; min-inline-size: 0; flex: 1 1 16rem; }
  .todo-item small { color: var(--color-muted); }
  .todo-done { margin: 0; font-weight: var(--weight-label); }
  .status-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.3rem var(--gap-item); margin: 0; font-size: var(--step--1); }
  .status-list dt { color: var(--color-muted); }
  .status-list dd { margin: 0; }
  .log { display: grid; gap: 0.15rem; max-block-size: 70vh; overflow-y: auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--step--1); overflow-wrap: anywhere; }
  .log time { color: var(--color-muted); margin-inline-end: 0.4rem; }
  .log .is-err { color: var(--color-accent); }
  .page-html { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--step--1); }
  .band-list > li { padding-block: 0.6rem; border-block-end: var(--rule); }
  .datacheck > li { padding-block: 0.5rem; border-block-end: var(--rule); }
  .datacheck small, .card .results small { overflow-wrap: anywhere; }
  .check-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem var(--gap-item); }

  /* Review-Queue */
  .queue-count { font-size: var(--step-3); font-weight: var(--weight-black); font-stretch: var(--width-tight); letter-spacing: var(--tracking-tight); }
  .queue-filters { display: flex; flex-wrap: wrap; gap: var(--gap-tight); align-items: center; }
  .q-item { --row-lead: 2.6rem; grid-template-columns: var(--row-lead) minmax(0, 1fr); transition: opacity var(--dur-fast); }
  .q-icon { inline-size: var(--row-lead); aspect-ratio: 1; border-radius: var(--radius-round); border: 1px dashed var(--color-muted); display: grid; place-items: center; font-weight: var(--weight-black); color: var(--color-muted); }
  .q-main { display: grid; gap: 0.2rem; min-inline-size: 0; }
  .q-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-end: 0.2rem; }
  .q-main small, .post-main small { overflow-wrap: anywhere; }
  .post .badge { white-space: normal; }
  .q-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
  .q-item:is(.is-approved, .is-rejected) { opacity: 0.55; }
  .q-item.is-rejected b { text-decoration: line-through; }
  .q-done { font-size: var(--step--1); font-weight: var(--weight-label); }
  .q-ai { font-weight: var(--weight-label); }
  .q-ai.is-reject { color: var(--color-accent); }
  /* Harvest → Tour dates */
  .road-admin { display: grid; gap: var(--gap-item); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
  .road-admin-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); margin-block-start: var(--gap-item); }
  .road-box { align-content: start; padding: var(--gap-item); border: var(--rule); border-radius: 0.7rem; }
  .road-box .label { margin: 0; color: var(--color-muted); }
  .road-box .stat b { font-size: var(--step-3); }
  .meter { display: block; block-size: 0.6rem; border-radius: 0.3rem; background: var(--color-line); overflow: hidden; }
  .meter span { display: block; block-size: 100%; inline-size: 0; background: var(--color-fg); transition: inline-size var(--dur-fast); }
  .road-lines { display: grid; gap: 0.2rem; }
  .road-top { list-style: none; margin: 0; padding: 0; display: grid; }
  .road-top li { display: grid; grid-template-columns: minmax(0, 1fr) 3.5rem 6rem; gap: var(--gap-tight); align-items: center; padding-block: 0.4rem; border-block-start: var(--rule); }
  .road-top a { color: var(--color-fg); font-weight: var(--weight-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .road-top span { text-align: end; font-variant-numeric: tabular-nums; }
  .road-top i { block-size: 0.35rem; border-radius: 0.2rem; background: linear-gradient(90deg, var(--color-fg) var(--w), var(--color-line) var(--w)); }
  .road-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; font-family: ui-monospace, monospace; font-size: 0.75rem; color: var(--color-muted); }
  .road-log li { overflow-wrap: anywhere; }
  .world-waves { display: grid; gap: var(--gap-item); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  @container view (min-width: 40rem) {
    .q-item { --row-lead: 3.4rem; grid-template-columns: var(--row-lead) minmax(0, 1fr) auto; }
    .q-actions { grid-column: auto; justify-content: flex-end; }
    .queue-filters .bulk { margin-inline-start: auto; }
  }

  /* Editor */
  .creator { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--gap-group); align-items: start; }
  .panel { display: grid; gap: var(--gap-item); min-inline-size: 0; font-size: var(--step--1); }
  .panel .field { font-size: var(--step-0); border-block-end-width: 1px; }
  .results { display: grid; gap: 0.2rem; }
  .result { inline-size: 100%; padding-block: 0.35rem; text-align: start; }
  .result[aria-pressed="true"] { color: var(--color-accent); font-weight: var(--weight-label); }
  .genre-form { flex-basis: 100%; align-items: end; }
  .genre-form .row-field { flex: 1 1 16rem; }
  .merge-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--gap-item); }
  .merge-pick [data-pick][aria-pressed="true"] { color: var(--color-accent); font-weight: var(--weight-label); }
  .dup-group > div { flex-wrap: wrap; overflow-wrap: anywhere; }
  .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: center; }
  .compare .disc { inline-size: 100%; }
  .cover-ph { aspect-ratio: 1; display: grid; place-items: center; padding: 0.5rem; text-align: center; border: 1px dashed var(--color-muted); color: var(--color-muted); }
  .toggle { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; }
  .toggle label { margin: 0; text-transform: none; letter-spacing: 0; }
  .chips { display: grid; gap: 0.3rem; }
  .chip { display: flex; align-items: center; gap: 0.7rem; font-variant-numeric: tabular-nums; }
  .chip small { display: inline; }
  .chip[aria-pressed="false"] { opacity: 0.35; text-decoration: line-through; }
  .row-field { display: grid; gap: 0.1rem; color: var(--color-muted); }
  .cover-img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; }

  /* Queue: Vorschau, Korrektur vor der Freigabe, Harvester-Suche, Szenentext */
  .q-thumb { inline-size: var(--row-lead); aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-round); }
  .q-pair { display: grid; gap: var(--gap-tight); align-content: start; }
  .q-pair .q-thumb { border-radius: 0; }   /* Store-Cover über dem Ring daraus */
  .q-edit { display: grid; gap: var(--gap-tight); margin-block-start: var(--gap-tight); }
  .mb-field { flex: 1 1 14rem; inline-size: auto; }
  .scene-form { max-inline-size: var(--measure); }
  .mb-scene { flex: 0 1 14rem; inline-size: auto; font-size: var(--step-0); }

  /* Social */
  .posts { display: grid; border-block-start: var(--rule); }
  .post { display: grid; gap: var(--gap-item); padding-block: var(--gap-group); border-block-end: var(--rule); min-inline-size: 0; }
  .post-images { display: flex; gap: var(--gap-tight); overflow-x: auto; scroll-snap-type: x mandatory; }
  .post-images img { flex: 0 0 auto; inline-size: 9rem; aspect-ratio: 4 / 5; object-fit: cover; scroll-snap-align: start; }
  .post-main { display: grid; gap: var(--gap-tight); min-inline-size: 0; }
  .check { display: inline-flex; align-items: center; gap: 0.4rem; text-transform: none; letter-spacing: 0; }
  .post-new .row-field { flex: 1 1 12rem; }
  @container view (min-width: 48rem) {
    .post { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
  }
}

@layer pages {
  /* New releases: Coming soon als Liste */
  .soon-item { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--gap-item); align-items: baseline; }
  .soon-item time { color: var(--color-muted); font-variant-numeric: tabular-nums; }
  .soon-title { color: var(--color-muted); }
  /* Artists: Musiker in der Suche als eine Zeile */
  .people-line { margin: 0; line-height: 1.9; color: var(--color-muted); }
  .people-line .label { color: var(--color-fg); margin-inline-end: var(--gap-tight); }
  .people-line .textlink { color: var(--color-fg); }
  .people-line small { display: inline; font-size: inherit; }
  .link-more { font: inherit; color: var(--color-fg); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
}

/* ---------- Six degrees of metal (/degrees): „Die Strecke“ ---------- */
@layer pages {
  .deg-label { font-size: var(--step--1); font-weight: var(--weight-label); font-stretch: var(--width-label); letter-spacing: var(--tracking-label); text-transform: uppercase; }
  /* Kopf: Start → Ziel und Fortschritt, klebt unter dem Seitenkopf */
  .deg-head { margin-block-start: calc(var(--gap-tight) - var(--gap-section)); position: sticky; inset-block-start: calc(var(--safe-top, 0px) + var(--chrome-top, var(--header-h))); z-index: 4; display: grid; gap: var(--gap-tight); padding-block: var(--gap-tight); background: var(--color-bg); border-block-end: var(--rule); }
  .deg-head p { margin: 0; }
  .deg-ends { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; }
  .deg-ends .disc { inline-size: 2.1rem; }
  .deg-ends b { font-weight: var(--weight-black); font-stretch: var(--width-tight); font-size: var(--step-1); text-transform: uppercase; line-height: 1; }
  .deg-arrow { color: var(--color-muted); flex: none; }
  .deg-progress { display: flex; align-items: center; gap: 0.35rem; }
  .deg-bar { inline-size: 1.4rem; block-size: 0.38rem; border-radius: 999px; background: color-mix(in srgb, var(--color-fg) 28%, var(--color-bg)); }
  .deg-bar.is-done { background: var(--color-fg); }
  .deg-bar.is-extra { background: none; border: 1px dashed color-mix(in srgb, var(--color-fg) 35%, var(--color-bg)); box-sizing: border-box; }
  .deg-par { inline-size: 2px; block-size: 0.8rem; background: var(--color-accent); margin-inline: 0.1rem; }
  .deg-count { margin-inline-start: auto; font-size: var(--step--1); color: var(--color-muted); }

  .deg-board { margin-block-start: calc(var(--gap-group) - var(--gap-section)); display: grid; gap: var(--gap-group); align-items: start; }
  @container view (min-width: 56rem) { .deg-board:not(:has(> .deg-route[hidden])) { grid-template-columns: minmax(16rem, 2fr) minmax(0, 3fr); } }

  /* Strecke */
  .deg-route { list-style: none; margin: 0; padding: 0; display: grid; }
  .deg-stop { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: var(--gap-item); align-items: center; }
  .deg-stop .disc, .deg-slot { inline-size: 2.6rem; }
  .deg-stop span { display: grid; gap: 0.1rem; min-inline-size: 0; }
  .deg-stop b { font-weight: var(--weight-black); font-stretch: var(--width-tight); font-size: var(--step-1); text-transform: uppercase; line-height: 1.05; }
  .deg-stop small { font-size: var(--step--1); color: var(--color-muted); }
  .deg-stop.is-past b { color: var(--color-muted); }
  .deg-stop.is-here b { font-size: var(--step-2); }
  .deg-here { color: var(--color-accent) !important; font-weight: var(--weight-label); font-stretch: var(--width-label); letter-spacing: var(--tracking-label); text-transform: uppercase; }
  .deg-stop.is-goal .disc { opacity: 0.55; }
  .deg-stop.is-goal b { color: var(--color-muted); }
  .deg-slot { aspect-ratio: 1; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--color-fg) 30%, var(--color-bg)); box-sizing: border-box; }
  .deg-via, .deg-gap { margin-inline-start: calc(1.3rem - 1px); padding: 0.35rem 0 0.35rem calc(var(--gap-item) + 1.3rem - 1px); border-inline-start: 2px solid var(--color-fg); font-size: var(--step--1); color: var(--color-muted); }
  .deg-gap { border-inline-start-style: dashed; border-color: color-mix(in srgb, var(--color-fg) 30%, var(--color-bg)); block-size: 1rem; padding-block: 0; }
  .deg-via a { color: var(--color-fg); text-decoration: underline; text-decoration-color: var(--color-line); text-underline-offset: 0.2em; }

  /* Schmal: Strecke als eine Zeile – gespielte Bands nur als kleine Ringe, die aktuelle mit Namen; Ziel steht schon im Kopf */
  @container view (max-width: 55.99rem) {
    .deg-route { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
    .deg-gap, .deg-stop.is-open, .deg-stop.is-goal { display: none; }
    .deg-via { inline-size: 0.8rem; block-size: 2px; margin: 0; padding: 0; border: 0; background: var(--color-fg); font-size: 0; }
    .deg-via > * { display: none; }
    .deg-stop.is-past { display: block; }
    .deg-stop.is-past > span:last-child { display: none; }
    .deg-stop.is-past .disc { inline-size: 1.7rem; }
    .deg-stop.is-here { flex: 1 1 12rem; min-inline-size: 0; }
  }
  /* Musiker der aktuellen Band */
  .deg-board:has(> .deg-route[hidden]) .deg-sheet { max-inline-size: 46rem; }   /* vor dem ersten Zug: eine Spalte, nicht über die ganze Breite */
  .deg-sheet { display: grid; gap: var(--gap-tight); padding: var(--gap-item); background: var(--color-surface); border-radius: 1.2rem; box-shadow: 0 -0.8rem 2rem -1.4rem rgb(0 0 0 / 0.45); }
  .deg-sheet-title { margin: 0; font-size: var(--step--1); font-weight: var(--weight-label); font-stretch: var(--width-label); letter-spacing: var(--tracking-label); text-transform: uppercase; }
  .deg-people { list-style: none; margin: 0; padding: 0; display: grid; }
  .deg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gap-item); align-items: center; padding-block: 0.6rem; border-block-start: var(--rule); }
  .deg-row.is-dim .deg-who b { color: var(--color-muted); }
  .deg-row.is-hint { box-shadow: inset 3px 0 0 var(--color-accent); padding-inline-start: 0.6rem; }
  .deg-who { display: grid; gap: 0.1rem; min-inline-size: 0; }
  .deg-who small { font-size: var(--step--1); color: var(--color-muted); }
  .deg-hops { display: flex; flex-wrap: wrap; justify-content: end; gap: 0.3rem; max-inline-size: 18rem; }
  .deg-hop { display: grid; justify-items: center; gap: 0.15rem; inline-size: 3.4rem; padding: 0.25rem 0.1rem; border: 0; border-radius: 0.6rem; background: none; color: var(--color-fg); font: inherit; cursor: pointer; }
  .deg-hop .disc { inline-size: 2.2rem; }
  .deg-hop small { font-size: 0.72rem; line-height: 1.1; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .deg-hop:hover:not(:disabled) { background: color-mix(in srgb, var(--color-fg) 8%, transparent); }
  .deg-hop:disabled { opacity: 0.35; cursor: default; }
  .deg-hop.is-goal .disc { border-radius: 50%; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent); }
  .deg-hop.is-goal small { font-weight: var(--weight-black); color: var(--color-accent); }
  .deg-hop.is-hint { box-shadow: 0 0 0 2px var(--color-accent); }
  .deg-more { align-self: center; min-inline-size: 2.6rem; block-size: 2.6rem; border: 1px solid var(--color-line); border-radius: 999px; background: none; color: var(--color-muted); font: inherit; cursor: pointer; }
  .deg-msg { margin: 0; min-block-size: 1.2em; }
  .deg-tools { gap: var(--gap-item); padding-block-start: var(--gap-tight); border-block-start: var(--rule); }
  .deg-giveup { margin-inline-start: auto; color: var(--color-muted); }
  /* Schmal: Ringe unter dem Musiker statt daneben – Name und Bandnamen bekommen die volle Breite */
  @container view (max-width: 40rem) {
    .deg-row { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
    .deg-hops { justify-content: start; max-inline-size: none; margin-inline-start: -0.25rem; }
    .deg-hop { inline-size: 4.4rem; }
  }

  /* Ergebnis */
  .deg-end { gap: var(--gap-item); scroll-margin-block-start: calc(var(--safe-top, 0px) + var(--chrome-top, var(--header-h)) + var(--gap-item)); }
  .deg-head.is-done { position: static; }
  .deg-verdict { margin: 0; font-size: clamp(5rem, 22cqi, 10rem); line-height: 0.86; }
  .deg-best { padding-block: var(--gap-item); border-block-start: var(--rule); }   /* unten schließt die Teilen-Zeile mit ihrer Linie an */
  /* Kürzester Weg: schmal untereinander (Ring, Name, „via“ an der Linie), breit als Ringreihe mit Musikern an den Verbindungen */
  .deg-chain { list-style: none; margin: 0; padding: 0; display: grid; }
  .deg-chain a { color: var(--color-fg); }
  .deg-chain-band a { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: var(--gap-item); align-items: center; text-decoration: none; }
  .deg-chain-band .disc { inline-size: 2.6rem; }
  .deg-chain-band b { font-weight: var(--weight-black); font-stretch: var(--width-tight); font-size: var(--step-1); text-transform: uppercase; line-height: 1.05; overflow-wrap: anywhere; }
  .deg-chain-via { margin-inline-start: calc(1.3rem - 1px); padding: 0.45rem 0 0.45rem calc(var(--gap-item) + 1.3rem - 1px); border-inline-start: 2px solid var(--color-fg); font-size: var(--step--1); color: var(--color-muted); }
  .deg-chain-via::before { content: "via "; }
  .deg-chain-via a { text-decoration: underline; text-decoration-color: var(--color-line); text-underline-offset: 0.2em; }
  @container view (min-width: 40rem) {
    .deg-chain { display: flex; align-items: flex-start; }
    .deg-chain-band { flex: 0 1 8rem; min-inline-size: 0; }
    .deg-chain-band a { grid-template-columns: none; justify-items: center; gap: 0.5rem; text-align: center; }
    .deg-chain-band .disc { inline-size: 4.4rem; }
    .deg-chain-band b { font-size: var(--step-0); }
    .deg-chain-via { flex: 1 1 0; min-inline-size: 3rem; margin: 2.2rem 0 0; padding: 0.4rem 0.2rem 0; border: 0; border-block-start: 2px solid var(--color-fg); text-align: center; overflow-wrap: anywhere; }
    .deg-chain-via::before { content: none; }
  }
}