/* =========================================================
   TRVECOLOR · components.css
   Wiederverwendbare Bausteine. Jeder Block nutzt nur Tokens.
   Reihenfolge: Marke · Navigation · Ring · Karten · Listen ·
   Formulare · Buttons · Teilen · Admin
   ========================================================= */

@layer components {
  /* =========== Marke =========== */
  .logo { font-size: var(--step-2); letter-spacing: -0.04em; line-height: 1; text-transform: uppercase; }
  .logo b { font-weight: var(--weight-black); }
  .ring-o { display: inline-block; inline-size: 0.78em; block-size: 0.78em; vertical-align: -0.02em; margin-inline: 0.02em; }
  .ring-o .disc { inline-size: 100%; }

  /* =========== Textlinks =========== */
  /* Versal-Label mit feiner Unterstreichung; Links nach außen bekommen ↗ */
  .textlink {
    font-size: var(--step--1);
    font-weight: var(--weight-label);
    font-stretch: var(--width-label);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
    text-decoration-color: var(--color-muted);
  }
  .textlink:hover, .textlink:focus-visible { text-decoration-color: currentColor; }
  .textlink[target="_blank"]::after { content: " ↗"; text-decoration: none; display: inline-block; margin-inline-start: 0.2em; }
  .links, .genres { display: flex; flex-wrap: wrap; gap: var(--gap-tight) var(--gap-item); }

  /* =========== Navigation =========== */
  .nav, .tabs, .crumbs, .tabbar a {
    font-size: var(--step--1);
    font-weight: var(--weight-label);
    font-stretch: var(--width-label);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
  }
  .nav-items { display: flex; flex-wrap: wrap; gap: 0.3rem 1.3rem; }
  [aria-current="page"]:is(.nav a, .tabs a) { color: var(--color-accent); }

  /* Unternavigation einer Rubrik */
  .tabs {
    display: flex;
    gap: var(--gap-item);
    padding-block-end: var(--gap-tight);
    border-block-end: var(--rule);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { padding-block: 0.3rem; }

  /* Brotkrumen: rücken nah an die Headline */
  .crumbs { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; color: var(--color-muted); }
  .crumbs > * + *::before { content: "/"; margin-inline-end: 0.6rem; color: var(--color-line); }
  .crumbs a { color: var(--color-fg); text-decoration: underline; text-decoration-color: var(--color-line); text-underline-offset: 0.25em; }
  .crumbs [aria-current] { color: var(--color-muted); }

  /* Vor / Zurück */
  .prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-item); border-block: var(--rule); }
  .pn { display: flex; align-items: center; gap: var(--gap-item); padding-block: var(--gap-item); min-block-size: 4.5rem; }
  .pn-next { flex-direction: row-reverse; justify-content: flex-start; text-align: end; }
  .pn-arrow { font-size: var(--step-3); line-height: 1; transition: transform var(--dur-fast); }
  .pn b { display: block; font-weight: var(--weight-black); font-stretch: var(--width-tight); font-size: var(--step-1); line-height: 1.1; }
  @media (hover: hover) {
    .pn-prev:hover .pn-arrow { transform: translateX(-0.3rem); }
    .pn-next:hover .pn-arrow { transform: translateX(0.3rem); }
  }

  /* Konto-Knopf im Kopf */
  .account { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--step--1); font-weight: var(--weight-label); border: 1px solid var(--color-fg); border-radius: var(--radius-pill); padding: 0.3rem 0.9rem; }
  .account svg { inline-size: 1.2rem; }
  .account:not([href$="/account"]) { font-stretch: var(--width-label); text-transform: uppercase; letter-spacing: var(--tracking-label); }   /* „SIGN IN“ wie alle Buttons; der Spitzname bleibt, wie er ist */

  /* Tab-Bar-Einträge (sichtbar nur am Telefon, siehe layout.css) */
  .tabbar a { display: grid; justify-items: center; gap: 0.25rem; min-block-size: 3.2rem; padding-block-start: 0.35rem; font-size: 0.68rem; letter-spacing: 0.08em; color: var(--color-muted); }
  .tabbar a[aria-current="page"] { color: var(--color-fg); }
  .tab-ico { inline-size: 1.5rem; block-size: 1.5rem; display: grid; place-items: center; }
  .tab-ico svg { inline-size: 100%; block-size: 100%; }
  .icon .f { fill: currentColor; stroke: none; }
  .icon { transition: stroke-width var(--dur-fast); }
  [aria-current="page"] > .tab-ico .icon { stroke-width: 2.4; }
  .tab-ico .disc { box-shadow: 0 0 0 1.5px currentColor; border-radius: var(--radius-round); }

  /* =========== Ring =========== */
  .disc { display: block; inline-size: var(--disc); max-inline-size: 100%; aspect-ratio: 1; overflow: visible; transition: transform var(--dur-med) var(--ease-out); }
  .disc-xl { --disc: min(30rem, 86vw); }
  .disc-md { --disc: 9rem; }
  .ghost-ring { inline-size: var(--disc); aspect-ratio: 1; border-radius: var(--radius-round); border: 1px dashed var(--color-muted); flex: none; }

  /* Player auf der Plattenseite (erst nach Klick auf „Play here“) */
  .player { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-tight) var(--gap-item); }
  .player-frame { display: block; inline-size: 100%; border: 0; border-radius: 0.5rem; background: var(--color-surface); }

  /* =========== Karten =========== */
  /* Platte: Ring + Titel + Band. Kompakt: Ring links, Text rechts. */
  .record { position: relative; display: grid; justify-items: center; align-content: start; gap: 0.2rem; text-align: center; }
  /* „New“: feste Höhe, Text per Grid mittig (Versalhöhe getrimmt, wo der Browser es kann), Laufweite links ausgeglichen */
  .badge-new { position: absolute; inset-block-start: 0; inset-inline-end: 0; z-index: 1; display: grid; place-items: center; box-sizing: border-box; block-size: 1.9em; padding: 0 0.7em 0 calc(0.7em + var(--tracking-label));
    border: 1px solid currentColor; border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-fg);
    font-size: 0.62rem; line-height: 1; text-box: trim-both cap alphabetic; font-weight: var(--weight-label); font-stretch: var(--width-label); text-transform: uppercase; letter-spacing: var(--tracking-label); white-space: nowrap; }
  /* Timeline (Ring links): an der Ecke des Rings, nicht im Raster – sonst verrutschen Titel und Band */
  .record.is-compact .badge-new { inset-inline: calc(4.5rem - 1.6rem) auto; inset-block-start: calc(50% - 2.25rem); }
  /* Feine Kontur: dunkle Ringe verschwinden sonst auf dunkel eingefärbten Seiten */
  .record > .disc { margin-block-end: var(--gap-tight); border-radius: 50%; box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); }
  /* Namen in Listen: schmale Breite, ausgeglichener Umbruch, höchstens zwei Zeilen */
  .record b { font-weight: var(--weight-black); font-stretch: var(--width-tight); font-size: var(--step-1); letter-spacing: -0.01em; line-height: 1.05; max-inline-size: 12rem; text-wrap: balance;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .record small { font-variant-numeric: tabular-nums; }
  .record:is(:focus-visible, :active) .disc { transform: scale(1.06); }
  /* Große Raster: Karten außerhalb des Bildschirms rendert der Browser nicht */
  /* content-visibility schneidet alles ab, was über die Karte ragt – auch den vergrößerten Ring beim Hover.
     Darum Luft rundum (3 % Vergrößerung je Seite + Kontur), mit negativem Rand ausgeglichen: das Raster bleibt gleich */
  .grid > .record { --hover-room: calc(var(--disc) * 0.03 + 3px); content-visibility: auto; contain-intrinsic-size: auto calc(var(--disc) + 4rem + 2 * var(--hover-room));
    padding: var(--hover-room); margin: calc(-1 * var(--hover-room)); }
  @media (hover: hover) { .record:hover .disc { transform: scale(1.06); } }
  @media (hover: none) { .record:active .disc { transform: scale(1.06); } }   /* Telefon: kurzes Feedback beim Antippen */
  .record.is-compact { grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; align-content: center; column-gap: var(--gap-item); row-gap: 0.15rem; text-align: start; }
  .record.is-compact > .disc { margin-block-end: 0; }
  .record.is-compact .disc { --disc: 4.5rem; grid-row: 1 / span 2; align-self: center; }
  .record.is-compact b { max-inline-size: none; align-self: end; }
  .record.is-compact small { align-self: start; }

  /* Zeilen-Liste mit Trennlinien (Kapitel, Künstler, Bestenliste, Queue) */
  .rows { display: grid; border-block-start: var(--rule); }
  .row { display: grid; grid-template-columns: var(--row-lead, 3.4rem) minmax(0, 1fr) auto; gap: var(--gap-item); align-items: center; padding-block: var(--gap-item); border-block-end: var(--rule); }
  .row > .disc, .row > .ghost-ring { --disc: var(--row-lead, 3.4rem); }
  .row-title { font-weight: var(--weight-black); font-stretch: var(--width-tight); font-size: var(--step-1); letter-spacing: -0.02em; line-height: 1.1; }

  /* Kennzahlen */
  .stats { display: flex; flex-wrap: wrap; gap: var(--gap-item) var(--gap-group); }
  .stat span { display: block; margin-block-start: var(--gap-tight); }
  .stat b { display: block; font-size: var(--step-4); font-weight: var(--weight-black); font-stretch: var(--width-tight); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
  .stat span { font-size: var(--step--1); color: var(--color-muted); text-transform: uppercase; letter-spacing: var(--tracking-label); }

  /* Abzeichen */
  .badge { font-size: 0.65rem; font-weight: var(--weight-label); text-transform: uppercase; letter-spacing: 0.1em; padding: 0.15rem 0.5rem; border: 1px solid var(--color-muted); border-radius: var(--radius-pill); color: var(--color-muted); white-space: nowrap; }
  .badge.is-ed { border-color: var(--color-accent); color: var(--color-accent); }

  /* Review mode (ui/reviewer.js): Vollbild-Modal, Karte links, Kontext rechts, Aktionen unten */
  .reviewer { inline-size: min(100vw - 2 * var(--gutter), 72rem); max-inline-size: none; block-size: min(100dvh - 2rem, 56rem); max-block-size: none; padding: 0; border: 1px solid var(--color-line); border-radius: 0.8rem; background: var(--color-bg); color: var(--color-fg);
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
  /* Immer hell wie der Creator – auch auf eingefärbten Platten- und Bandseiten und im Dunkelmodus */
  .reviewer { --color-bg: var(--paper-200); --color-fg: var(--char-900); --color-accent: var(--blood-700); --color-surface: var(--paper-100); --color-on-accent: var(--white);
    --color-muted: color-mix(in srgb, var(--color-fg) 55%, var(--color-bg)); --color-line: color-mix(in srgb, var(--color-fg) 16%, var(--color-bg)); --rule: 1px solid var(--color-line); color-scheme: light; }
  .reviewer:not([open]) { display: none; }
  .reviewer:focus { outline: none; }
  .reviewer::backdrop { background: color-mix(in srgb, var(--color-fg) 45%, transparent); }
  .rv-head { display: flex; align-items: center; gap: var(--gap-item); padding: 0.8rem var(--gap-item); border-block-end: var(--rule); }
  .rv-head .label { margin: 0; }
  .rv-keys { margin: 0 0 0 auto; font-size: 0.75rem; color: var(--color-muted); }
  .rv-close { font-size: 1.6rem; line-height: 1; background: none; border: 0; color: inherit; cursor: pointer; padding: 0 0.2rem; }
  .rv-body { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; min-block-size: 0; }
  .rv-card { overflow: auto; padding: var(--gap-item) var(--gap-group); display: grid; align-content: start; gap: var(--gap-item); }
  .rv-context { overflow: auto; padding: var(--gap-item); border-inline-start: var(--rule); display: grid; align-content: start; gap: var(--gap-tight); }
  .rv-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-tight); margin: 0; }
  .rv-title { margin: 0; font-size: var(--step-2); font-weight: var(--weight-black); font-stretch: var(--width-tight); line-height: 1.05; }
  .rv-lead { display: flex; gap: var(--gap-item); align-items: center; }
  .rv-lead .disc { inline-size: 9rem; }
  .rv-cover, .rv-photo { inline-size: 9rem; block-size: 9rem; object-fit: cover; border-radius: 0.4rem; }
  .rv-photo { inline-size: auto; max-inline-size: 100%; block-size: 14rem; }
  .rv-text, .rv-diff .prose { max-inline-size: 42rem; }
  .rv-diff { display: grid; gap: var(--gap-tight); }
  .rv-diff .label { margin: var(--gap-tight) 0 0; color: var(--color-muted); }
  .rv-old { color: var(--color-muted); }
  .reviewer del { background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-fg); text-decoration: line-through; }
  .reviewer ins { background: color-mix(in srgb, #2f8f4e 22%, transparent); color: var(--color-fg); text-decoration: none; }
  .rv-fields { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--gap-tight) var(--gap-item); margin: 0; }
  .rv-fields dd { margin: 0; overflow-wrap: anywhere; }
  .rv-url, .rv-detail { overflow-wrap: anywhere; }
  .rv-band .disc, .rv-context > .disc { inline-size: 5rem; }
  .rv-band-name { margin: 0; font-weight: var(--weight-label); }
  .rv-records { list-style: none; margin: var(--gap-tight) 0 0; padding: 0; display: grid; gap: 0.35rem; }
  .rv-records li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.5rem; align-items: center; font-size: 0.85rem; }
  .rv-records small { display: block; color: var(--color-muted); }
  .rv-records .disc { inline-size: 1.6rem; }
  .rv-rec-none { inline-size: 1.6rem; aspect-ratio: 1; border-radius: 50%; border: 1px dashed var(--color-line); }
  .rv-ai, .rv-warn { margin: var(--gap-tight) 0 0; font-size: 0.85rem; padding: 0.5rem 0.6rem; border-radius: 0.4rem; background: var(--color-surface); }
  .rv-ai.is-reject, .rv-warn { border-inline-start: 3px solid var(--color-accent); }
  .rv-ai.is-approve { border-inline-start: 3px solid #2f8f4e; }
  .rv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-tight) var(--gap-item); padding: 0.8rem var(--gap-item); border-block-start: var(--rule); }
  .rv-actions[hidden] { display: none; }
  .rv-nav { margin-inline-start: auto; display: flex; gap: var(--gap-item); }
  .rv-groups { display: flex; flex-wrap: wrap; gap: var(--gap-item); }
  /* Bearbeiten-Modus (ui/editmode.js): Änderbares gestrichelt, von Hand Gesetztes durchgezogen; Blatt immer hell */
  .is-editing [data-edit-target] { outline: 1.5px dashed var(--color-accent); outline-offset: 0.35rem; border-radius: 0.3rem; cursor: pointer; }
  .is-editing [data-edit-target][data-edit-locked] { outline-style: solid; }
  @media (hover: hover) { .is-editing [data-edit-target]:hover { background: color-mix(in srgb, var(--color-accent) 7%, transparent); } }
  .is-editing [data-edit-target][data-edit-shown]:empty::before, .is-editing [data-edit-target]:empty::before { content: attr(data-edit-label); color: var(--color-muted); font-size: var(--step--1); }
  .edit-sheet { --color-bg: var(--paper-200); --color-fg: var(--char-900); --color-accent: var(--blood-700); --color-surface: var(--paper-100); --color-on-accent: var(--white);
    --color-muted: color-mix(in srgb, var(--color-fg) 55%, var(--color-bg)); --color-line: color-mix(in srgb, var(--color-fg) 16%, var(--color-bg)); --rule: 1px solid var(--color-line); color-scheme: light;
    inline-size: min(100vw - 2 * var(--gutter), 34rem); max-block-size: min(100dvh - 2rem, 48rem); padding: 0; border: 1px solid var(--color-line); border-radius: 0.8rem;
    background: var(--color-bg); color: var(--color-fg); }
  .edit-sheet::backdrop { background: color-mix(in srgb, var(--char-900) 40%, transparent); }
  .ed-form { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; max-block-size: inherit; }
  .ed-head { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem var(--gap-item); border-block-end: var(--rule); }
  .ed-head .label { margin: 0; }
  .ed-body { overflow: auto; padding: var(--gap-item); display: grid; gap: var(--gap-item); align-content: start; }
  .ed-body > p { margin: 0; }
  .ed-field { display: grid; gap: 0.3rem; }
  .ed-field .label { color: var(--color-muted); }
  .ed-check { display: flex; align-items: center; gap: 0.5rem; }
  .ed-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-item); }
  .ed-lock { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; font-size: var(--step--1); color: var(--color-accent); }
  .ed-lock .text-button { font-size: inherit; }
  .ed-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .ed-chips li { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.2rem 0.3rem 0.2rem 0.7rem; border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-surface); }
  .ed-chips li:first-child { border-color: var(--color-accent); }
  .ed-chips .text-button { min-inline-size: 1.6rem; }
  .ed-add { display: flex; gap: var(--gap-tight); }
  .ed-add .field { flex: 1; }
  .ed-rows { list-style: none; margin: 0; padding: 0; display: grid; }
  .ed-rows li { display: grid; gap: 0.4rem; padding-block: var(--gap-tight); border-block-end: var(--rule); }
  .ed-rows li > .text-button { justify-self: start; color: var(--color-muted); }
  .ed-log li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .ed-log li small:first-child { grid-column: 1 / -1; color: var(--color-muted); }
  .ed-new { margin: 0; padding: var(--gap-item); border: 1px dashed var(--color-line); border-radius: 0.6rem; display: grid; gap: var(--gap-tight); }
  .ed-status { margin: 0; padding: 0 var(--gap-item); font-size: var(--step--1); color: var(--color-accent); }
  .ed-status:empty { display: none; }
  .ed-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-tight) var(--gap-item); padding: 0.7rem var(--gap-item); border-block-start: var(--rule); }
  .ed-history { margin-inline-start: auto; }
  .admin-bar-edit[aria-pressed="true"] { color: var(--color-accent); }
  /* Telefon: Blatt von unten, volle Breite */
  @media (max-width: 40rem) {
    .edit-sheet { inline-size: 100%; max-inline-size: 100%; margin: auto 0 0; border-radius: 0.9rem 0.9rem 0 0; max-block-size: 88dvh; }
  }

  /* Befehlspalette (ui/palette.js) – immer hell wie der Creator */
  .palette { --color-bg: var(--paper-200); --color-fg: var(--char-900); --color-surface: var(--paper-100); --color-muted: color-mix(in srgb, var(--color-fg) 55%, var(--color-bg));
    --color-line: color-mix(in srgb, var(--color-fg) 16%, var(--color-bg)); --rule: 1px solid var(--color-line);
    inline-size: min(100vw - 2 * var(--gutter), 38rem); margin: 12vh auto auto; padding: 0; border: 1px solid var(--color-line); border-radius: 0.8rem; background: var(--color-bg); color: var(--color-fg); }
  .palette::backdrop { background: color-mix(in srgb, var(--char-900) 45%, transparent); }
  .palette-input { inline-size: 100%; border: 0; border-block-end: var(--rule); background: none; color: inherit; font: inherit; font-size: var(--step-1); padding: 0.9rem 1rem; outline: none; }
  .palette-list { list-style: none; margin: 0; padding: 0.3rem; max-block-size: 60vh; overflow: auto; }
  .palette-list li { display: flex; justify-content: space-between; gap: var(--gap-item); padding: 0.55rem 0.7rem; border-radius: 0.4rem; cursor: pointer; }
  .palette-list li[aria-selected="true"] { background: var(--color-surface); }
  .palette-list small { color: var(--color-muted); white-space: nowrap; }
  .palette-none { color: var(--color-muted); cursor: default; }
  .palette-status { margin: 0; padding: 0 1rem 0.7rem; }
  .palette-status:empty { display: none; }
  .rv-card { transition: transform 0.15s ease-out; touch-action: pan-y; }
  .rv-card[data-swipe="approve"] { box-shadow: inset 6px 0 0 #2f8f4e; }
  .rv-card[data-swipe="reject"] { box-shadow: inset -6px 0 0 var(--color-accent); }
  .reviewer kbd { font: inherit; font-size: 0.7em; opacity: 0.6; margin-inline-start: 0.3em; }
  .rv-toast { position: absolute; inset-inline: 0; inset-block-end: 4.2rem; margin-inline: auto; inline-size: fit-content; max-inline-size: calc(100% - 2rem); padding: 0.55rem 0.9rem; border-radius: var(--radius-pill); background: var(--color-fg); color: var(--color-bg); font-size: 0.85rem; }
  .rv-toast .text-button { color: inherit; }
  .rv-empty { padding-block: var(--gap-group); text-align: center; }
  .rv-empty .display { font-size: var(--step-4); margin: 0; }
  .rv-edit { display: grid; gap: var(--gap-tight); }
  .rv-rewrite { display: flex; flex-wrap: wrap; gap: var(--gap-tight); max-inline-size: 42rem; }
  .rv-rewrite .field { flex: 1 1 16rem; }
  .rv-edit textarea { min-block-size: 22rem; }
  .rv-loading { color: var(--color-muted); }
  /* Text-Studio (ui/studio.js): links schreiben, rechts Vorschau / Änderungen */
  .studio { inline-size: min(100vw - 2 * var(--gutter), 84rem); block-size: min(100dvh - 2rem, 62rem); }
  .studio .rv-head .label { display: flex; align-items: center; gap: var(--gap-tight); min-inline-size: 0; }
  .studio .rv-head .disc { inline-size: 1.8rem; flex: none; }
  .st-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-block-size: 0; }
  .st-edit { overflow: auto; padding: var(--gap-item); display: flex; flex-direction: column; gap: var(--gap-tight); }
  .st-text { inline-size: 100%; flex: 1 0 24rem; min-block-size: 24rem; resize: vertical; field-sizing: content; font: inherit; font-size: 1rem; line-height: 1.55; padding: 0.8rem 0.9rem; }
  .st-meta { margin: 0; }
  .st-versions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .st-version { display: grid; text-align: start; gap: 0.1rem; padding: 0.35rem 0.6rem; border: 1px solid var(--color-line); border-radius: 0.4rem; background: var(--color-surface); color: inherit; font: inherit; font-size: 0.8rem; cursor: pointer; max-inline-size: 16rem; }
  .st-version span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .st-version small { color: var(--color-muted); }
  .st-version[aria-pressed="true"] { border-color: var(--color-fg); box-shadow: inset 0 0 0 1px var(--color-fg); }
  .st-ai { display: grid; gap: var(--gap-tight); padding: 0.7rem; border-radius: 0.5rem; background: var(--color-surface); }
  .st-ai p { margin: 0; }
  .st-ai .field { font-size: 0.95rem; padding-block: 0.5rem; }
  .st-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
  .st-chip { cursor: pointer; background: none; font: inherit; font-size: 0.65rem; }
  .st-chip:hover { color: var(--color-fg); border-color: var(--color-fg); }
  .st-status { margin: 0; min-block-size: 1.2em; font-size: 0.85rem; }
  .st-side { overflow: auto; padding: var(--gap-item) var(--gap-group); border-inline-start: var(--rule); display: grid; align-content: start; gap: var(--gap-item); }
  .st-tabs { display: flex; gap: var(--gap-item); margin: 0; }
  .st-tabs [aria-selected="true"] { text-decoration: underline; text-underline-offset: 0.3em; }
  .st-tabs button:disabled { opacity: 0.4; }
  .st-preview { max-inline-size: 42rem; }
  .st-preview .lede { font-size: var(--step-1); line-height: 1.45; }
  .st-view { margin-inline-start: auto; }
  .review-start { margin: 0; color: var(--color-muted); font-size: 0.9rem; max-inline-size: 42rem; }
  @media (max-width: 48rem) {
    .st-body { grid-template-columns: minmax(0, 1fr); overflow: auto; }
    .st-edit, .st-side { overflow: visible; }
    .st-side { border-inline-start: 0; border-block-start: var(--rule); padding: var(--gap-item); }
    .st-text { min-block-size: 50dvh; }
    .reviewer { inline-size: 100vw; block-size: 100dvh; border-radius: 0; border: 0; }
    .rv-body { grid-template-columns: minmax(0, 1fr); overflow: auto; }
    .rv-card, .rv-context { overflow: visible; }
    .rv-context { border-inline-start: 0; border-block-start: var(--rule); }
    .rv-keys { display: none; }
    .rv-close { margin-inline-start: auto; }
    .rv-actions { gap: var(--gap-tight); }
    .rv-actions .button { padding-inline: 0.9rem; }
    .reviewer kbd { display: none; }
    .rv-card { padding: var(--gap-item); }
  }

  /* Farbanteile */
  .credits { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--gap-tight) var(--gap-item); font-size: var(--step--1); align-items: baseline; }
  .credits dt { color: var(--color-muted); }
  .credits dd { display: flex; flex-wrap: wrap; gap: 0.15rem var(--gap-item); margin: 0; }
  .credits dd small { color: var(--color-muted); }   /* Instrument im Line-up */
  .person-bands .row-line { padding-block: var(--gap-tight); border-block-end: var(--rule); }
  .swatches { display: grid; gap: var(--gap-tight); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
  .swatch { display: grid; grid-template-columns: 1.4rem 5rem 1fr 2.6rem; gap: 0.9rem; align-items: center; }
  .dot { inline-size: 1.4rem; aspect-ratio: 1; border-radius: var(--radius-round); box-shadow: 0 0 0 1px var(--color-line); }
  .bar { block-size: 3px; background: var(--color-line); }
  .bar span { display: block; block-size: 100%; background: var(--color-fg); }

  /* Figur mit Bildunterschrift */
  .figure { display: grid; gap: var(--gap-item); font-size: var(--step--1); color: var(--color-muted); }
  .figure .disc { --disc: 100%; }
  .photo-img { inline-size: 100%; aspect-ratio: 1.45; object-fit: cover; }
  /* Schmal: Ring bzw. Foto höchstens ~ein Drittel der Bildschirmhöhe – der Name steht so schon im ersten Bild */
  @container view (max-width: 40rem) {
    .split > .disc, .split > .figure .disc { max-inline-size: min(100%, 32svh); justify-self: center; }
    .split > .figure .photo-img { aspect-ratio: auto; max-block-size: 32svh; }
  }
  .photo { aspect-ratio: 1.45; background: var(--color-line); display: grid; place-items: center; color: var(--color-muted); }

  /* Herkunft der Daten: ganz klein, ganz unten über dem Fuß */
  .notice { padding: var(--gap-tight) var(--gutter); border: 1px solid var(--color-accent); color: var(--color-accent); font-size: var(--step--1); }
  .notice a { text-decoration: underline; }
  .provenance { margin-block-start: var(--gap-section); font-size: 0.68rem; font-weight: var(--weight-label); font-stretch: var(--width-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-muted); }
  .provenance:empty { display: none; }
  .provenance a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
  .provenance a:hover { color: var(--color-fg); }

  /* =========== Formulare =========== */
  .form { display: grid; gap: var(--gap-tight); max-inline-size: 30rem; align-content: start; }
  .form > .page-head { margin-block-end: var(--gap-group); }
  .form label { margin-block-start: var(--gap-item); color: var(--color-muted); }
  .form .button { margin-block-start: var(--gap-item); justify-self: start; }
  .form .fine { margin-block-start: var(--gap-item); }
  .field { inline-size: 100%; padding-block: 0.5rem; font-size: var(--step-1); border: 0; border-block-end: 2px solid var(--color-fg); border-radius: 0; background: transparent; }
  .field::placeholder { color: var(--color-muted); }
  /* Textfelder (Queue, Review-Modal, Text-Studio, Social, Seiten): großzügig, wachsen mit dem Text, von Hand größer ziehbar.
     :where hält die Spezifität niedrig, damit eigene Größen (.st-text, .rv-edit) gewinnen */
  :where(textarea).field { resize: vertical; min-block-size: 12rem; max-block-size: 80dvh; field-sizing: content; font-size: var(--step-0); line-height: 1.55; border: 1px solid var(--color-line); padding: 0.7rem 0.8rem; }
  .error { color: var(--color-accent); min-block-size: 1.4em; font-weight: var(--weight-label); }

  .search { flex: 1 1 16rem; max-inline-size: 24rem; }
  .search input { inline-size: 100%; font-size: 1rem; padding: 0.7rem 1.1rem; border: 1px solid var(--color-fg); border-radius: var(--radius-pill); background: transparent; }
  .search input::placeholder { color: var(--color-muted); }
  .search-wide { max-inline-size: 40rem; display: block; }

  /* Filterleisten: Label + Chips, am Telefon seitlich scrollbar */
  .filters { display: grid; gap: var(--gap-item); }
  .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-tight) var(--gap-item); }
  .filter-bar .search { flex: 1 1 18rem; max-inline-size: 36rem; }
  .filter-toggle { gap: 0.5em; }
  .filter-toggle .chevron { inline-size: 1.1em; block-size: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-med) var(--ease-out); }
  .filter-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
  .filter-n { font-variant-numeric: tabular-nums; }
  .active-filters { display: flex; flex-wrap: wrap; gap: var(--gap-tight); }
  .active-filters:empty { display: none; }
  .active-filters .pill { display: inline-flex; align-items: center; gap: 0.5em; text-transform: none; letter-spacing: 0.04em; }
  .active-filters .dot { inline-size: 0.9rem; }
  .pill.is-on { background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg); }

  /* Ausklappen: Höhe weich animiert über grid-template-rows 0fr → 1fr */
  .filter-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-med) var(--ease-out); }
  .filter-panel[data-open="true"] { grid-template-rows: 1fr; }
  .filter-panel-inner { display: grid; gap: var(--gap-tight); min-block-size: 0; overflow: hidden; }
  .filter-panel[data-open="true"] .filter-panel-inner { padding-block: 0.25rem; }
  .filter-row { display: flex; align-items: center; gap: var(--gap-tight); overflow-x: auto; scrollbar-width: none; padding-block: 0.15rem; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent); }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-row > * { flex: none; }
  .filter-label { inline-size: 4.5rem; font-size: var(--step--1); font-weight: var(--weight-label); font-stretch: var(--width-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-muted); }
  .filter-letters .pill { min-inline-size: 2.1rem; padding-inline: 0.5rem; text-align: center; }

  /* Nachladen */
  .lazy-sentinel { block-size: 1px; }
  .lazy-more { justify-self: center; }

  /* 6-stelliger Code (für Webviews: der Link öffnet sonst einen anderen Browser) */
  .code-form { display: grid; gap: var(--gap-tight); justify-items: center; inline-size: min(22rem, 100%); }
  .code-input { inline-size: 100%; text-align: center; font-size: var(--step-4); font-weight: var(--weight-black); letter-spacing: 0.35em; padding: 0.4rem 0 0.4rem 0.35em; border: 0; border-block-end: 3px solid var(--color-fg); border-radius: 0; background: transparent; font-variant-numeric: tabular-nums; }
  .code-input::placeholder { color: var(--color-line); }

  /* Schalter */
  .switch { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--gap-item); align-items: start; max-inline-size: 40rem; cursor: pointer; text-transform: none; letter-spacing: 0; font-size: var(--step-0); font-weight: var(--weight-text); font-stretch: var(--width-text); color: var(--color-fg); }
  .switch input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
  .switch-track { position: relative; inline-size: 3.2rem; block-size: 1.8rem; margin-block-start: 0.1rem; border-radius: 1rem; background: var(--color-line); transition: background-color var(--dur-fast); }
  .switch-track::after { content: ""; position: absolute; inset: 0.2rem auto auto 0.2rem; inline-size: 1.4rem; block-size: 1.4rem; border-radius: var(--radius-round); background: var(--color-bg); box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); transition: transform var(--dur-fast); }
  .switch input:checked + .switch-track { background: var(--color-fg); }
  .switch input:checked + .switch-track::after { transform: translateX(1.4rem); }
  .switch input:focus-visible + .switch-track { outline: 2px solid var(--color-accent); outline-offset: 3px; }
  .switch-text { display: grid; gap: 0.2rem; }
  .switch.is-disabled { opacity: 0.4; cursor: not-allowed; }
  .switch-text b { font-weight: var(--weight-black); font-stretch: var(--width-tight); font-size: var(--step-1); letter-spacing: -0.02em; }

  /* =========== Buttons =========== */
  .button, .pill, .text-button, .next {
    font-size: var(--step--1);
    font-weight: var(--weight-label);
    font-stretch: var(--width-label);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
  }
  .button { display: inline-flex; justify-content: center; align-items: center; gap: 0.4em; padding: 0.95rem 1.6rem; border: 1px solid var(--color-fg); border-radius: var(--radius-pill); background: var(--color-fg); color: var(--color-bg); }
  .button:hover, .button:focus-visible { color: var(--color-bg); background: var(--color-accent); border-color: var(--color-accent); }
  .button.ghost { background: none; color: var(--color-fg); }
  .button.ghost:hover, .button.ghost:focus-visible { color: var(--color-accent); border-color: var(--color-accent); background: none; }
  .button.small { padding: 0.55rem 1.1rem; }
  .button.danger { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
  .text-button { text-decoration: underline; text-underline-offset: 0.2em; color: var(--color-muted); text-transform: none; letter-spacing: 0.02em; }
  .pill { border: 1px solid var(--color-muted); border-radius: var(--radius-pill); padding: 0.3rem 0.9rem; }
  .pill[aria-pressed="true"] { background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg); }
  .next { color: var(--color-muted); }

  /* Antwort-Knöpfe (Quiz, Daily) */
  /* Antworten: immer zwei Spalten, Titel groß, Band klein */
  .answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-tight); inline-size: min(40rem, 100%); }
  .answer { display: grid; align-content: center; gap: 0.1rem; min-block-size: 3.5rem; padding: 0.7rem 1rem; border: 1px solid var(--color-fg); border-radius: 1.25rem; text-align: center; line-height: var(--leading-snug); transition: background-color var(--dur-fast), color var(--dur-fast); }
  .answer b { font-weight: var(--weight-label); }
  .answer small { color: inherit; opacity: 0.65; }
  @media (hover: hover) { .answer:not(:disabled):hover { background: var(--color-fg); color: var(--color-bg); } }
  .answer.is-right { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
  .answer.is-wrong { opacity: 0.35; text-decoration: line-through; }
  .answer.is-out { opacity: 0.35; }
  .answer:disabled { cursor: default; }

  /* Stempel über dem Ring */
  .stage { position: relative; display: grid; place-items: center; }
  .stamp {
    position: absolute;
    display: grid;
    justify-items: center;
    color: var(--color-on-disc);
    font-size: clamp(3rem, 19vw, 9rem);
    line-height: 0.8;
    letter-spacing: -0.04em;
    text-shadow: 0 2px 4px rgb(0 0 0 / 0.35), 0 6px 28px rgb(0 0 0 / 0.45);
    transform: rotate(-12deg);
    pointer-events: none;
    font-variation-settings: "wght" 900, "wdth" 72;
  }
  .stamp-line { display: block; white-space: nowrap; }
  .stamp-ch { display: inline-block; }

  /* richtig: Stempel knallt rein, Buchstaben laufen einzeln durch die Achsen, dann atmet das Gewicht */
  .stamp.is-yeah { animation: stamp-in 0.55s var(--ease-spring) both; }
  .stamp.is-yeah .stamp-ch {
    animation:
      yeah-axes 0.9s var(--ease-out) both,
      yeah-breathe 1.6s ease-in-out 1.1s infinite alternate;
    animation-delay: calc(var(--i) * 45ms), calc(1.1s + var(--i) * 80ms);
  }
  @keyframes stamp-in {
    0%   { transform: rotate(-24deg) scale(2.6); opacity: 0; }
    60%  { transform: rotate(-9deg) scale(0.94); opacity: 1; }
    100% { transform: rotate(-12deg) scale(1); }
  }
  @keyframes yeah-axes {
    0%   { font-variation-settings: "wght" 100, "wdth" 125; transform: translateY(-0.25em); opacity: 0; }
    45%  { font-variation-settings: "wght" 900, "wdth" 62;  transform: translateY(0.06em); opacity: 1; }
    70%  { font-variation-settings: "wght" 760, "wdth" 92;  transform: translateY(-0.03em); }
    100% { font-variation-settings: "wght" 900, "wdth" 72;  transform: none; }
  }
  @keyframes yeah-breathe {
    from { font-variation-settings: "wght" 900, "wdth" 72; }
    to   { font-variation-settings: "wght" 640, "wdth" 96; }
  }

  /* falsch: fällt schwer rein, sackt dünn und schmal zusammen */
  .stamp.is-nope { animation: nope-drop 0.5s var(--ease-out) both; }
  .stamp.is-nope .stamp-ch { animation: nope-axes 1.2s var(--ease-out) both; animation-delay: calc(0.25s + var(--i) * 60ms); }
  @keyframes nope-drop {
    0%   { transform: rotate(-12deg) translateY(-0.6em); opacity: 0; }
    70%  { transform: rotate(-12deg) translateY(0.08em); opacity: 1; }
    100% { transform: rotate(-12deg); }
  }
  @keyframes nope-axes {
    0%   { font-variation-settings: "wght" 900, "wdth" 125; }
    55%  { font-variation-settings: "wght" 900, "wdth" 72; }
    100% { font-variation-settings: "wght" 200, "wdth" 62; transform: translateY(0.04em); }
  }
  .stamp.is-nope.is-static .stamp-ch { font-variation-settings: "wght" 200, "wdth" 62; }
  .stamp.is-static, .stamp.is-static .stamp-ch { animation: none; }

  /* Bühne: Beben (richtig) und Kopfschütteln (falsch) */
  .stage.is-quake { animation: quake 0.55s var(--ease-out); }
  .stage.is-shake { animation: shake 0.6s var(--ease-out); }
  @keyframes quake {
    0%, 100% { transform: none; }
    12% { transform: translate(0, 10px) scale(0.985); }
    24% { transform: translate(-6px, -5px) rotate(-1.2deg); }
    36% { transform: translate(5px, 4px) rotate(1deg); }
    50% { transform: translate(-3px, -2px) rotate(-0.5deg); }
    66% { transform: translate(2px, 1px); }
    82% { transform: translate(-1px, 0); }
  }
  @keyframes shake {
    0%, 100% { transform: none; }
    15% { transform: translateX(-14px) rotate(-2deg); }
    30% { transform: translateX(12px) rotate(1.6deg); }
    45% { transform: translateX(-9px) rotate(-1deg); }
    60% { transform: translateX(6px) rotate(0.6deg); }
    75% { transform: translateX(-3px); }
  }

  /* Schritte (About, Content-Seiten) */
  .steps { display: grid; gap: var(--gap-group); }
  @container view (min-width: 40rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .steps > div { display: grid; gap: var(--gap-tight); align-content: start; padding-block-start: var(--gap-item); border-block-start: 1px solid var(--color-fg); }
  .step-n { font-size: clamp(4rem, 10vw, 7rem); font-weight: var(--weight-black); font-stretch: var(--width-tight); letter-spacing: -0.06em; line-height: var(--leading-tight); }

  /* =========== Teilen (Social Card) =========== */
  .share-card { display: grid; gap: var(--gap-item); justify-items: start; }
  .share-toggle { cursor: pointer; }
  .share-toggle[aria-expanded="true"] { text-decoration-color: currentColor; }
  /* Links und „Share“ in einer Zeile; die Vorschau der Social Card öffnet darunter in voller Breite */
  .link-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gap-tight) var(--gap-item); }
  .link-row > .links, .link-row > .share-slot, .link-row .share-card { display: contents; }
  .link-row .share-preview { flex-basis: 100%; margin-block-start: var(--gap-tight); }
  .share-preview { display: grid; gap: 0.7rem; max-inline-size: 34rem; }
  .share-preview img { inline-size: 100%; block-size: auto; box-shadow: var(--shadow-card); }
  .share-preview figcaption { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; font-size: var(--step--1); }
  .share-url { overflow-wrap: anywhere; color: var(--color-muted); }

  /* =========== Chrome: Kopf, Tab-Bar, Fuß =========== */
  /* ---------- Kopf ---------- */
  .header {
    position: sticky;
    inset-block-start: var(--safe-top);
    z-index: var(--z-header);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-tight) var(--gap-group);
    padding-block: var(--gap-item);
    background: var(--color-bg);
    border-block-end: var(--rule);
    transition: background-color var(--dur-slow);
  }
  .header .nav { margin-inline-start: auto; }

  /* ---------- Tab-Bar (nur Telefon) ---------- */
  .tabbar { display: none; }

  /* ---------- Fuß ---------- */
  /* Fuß: Marke links, Spalten rechts, Kleingedrucktes unten */
  .footer {
    display: grid;
    gap: var(--gap-group);
    padding-block: var(--gap-group) calc(var(--gap-group) + var(--safe-bottom));
    margin-block-start: var(--gap-group);
    border-block-start: var(--rule);
    font-size: var(--step--1);
    color: var(--color-muted);
  }
  .footer a { color: var(--color-fg); }
  .footer a:hover, .footer a:focus-visible { color: var(--color-accent); }
  .footer-brand { display: grid; gap: var(--gap-tight); align-content: start; justify-items: start; }
  .footer-logo { font-size: var(--step-3); }
  .footer-claim { max-inline-size: 18rem; margin-block-start: -0.15em; }
  .footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-group) var(--gap-item); }
  .footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gap-tight); }
  .footer-title { margin-block-end: var(--gap-item); font-weight: var(--weight-label); font-stretch: var(--width-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-muted); }
  .footer-col a { font-size: var(--step-0); }
  /* Admin-Leiste: nur mit Admin-Sitzung (ui/adminbar.js) */
  .admin-bar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gap-tight) var(--gap-item); margin: 0; padding-block-start: var(--gap-item); border-block-start: var(--rule); font-size: 0.8rem; }
  .admin-bar .text-button { color: inherit; }
  .admin-bar-status { color: var(--color-muted); }
  .footer-fine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--gap-tight) var(--gap-group); padding-block-start: var(--gap-item); border-block-start: var(--rule); font-size: 0.72rem; }
  @media (min-width: 48rem) {
    .footer { grid-template-columns: minmax(14rem, 1fr) minmax(0, 2.4fr); column-gap: var(--gap-section); }
    .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .footer-fine { grid-column: 1 / -1; }
  }

  /* Telefon: Menü wandert in die Tab-Bar */
  @media (max-width: 48rem) {
    .header { padding-block: var(--gap-tight); }
    .header .nav { display: none; }
    .header .account { margin-inline-start: auto; }
    .tabbar {
      position: fixed;
      inset: auto 0 0 0;
      z-index: var(--z-tabbar);
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      padding: 0.4rem 0.5rem calc(0.4rem + var(--safe-bottom));
      background: var(--color-veil);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      border-block-start: var(--rule);
      transition: background-color var(--dur-slow);
    }
  }

  /* Funktion aus → zugehörige Elemente weg: macht js/core/nav.js → applyFeatures() */

  /* =========== Hilfen =========== */
  .visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .empty { color: var(--color-muted); }
}