/* Dvalin — Vorschau-Stylesheet
   Setzt DVALIN_HOMEPAGE_GUIDELINES.md um. Farbwerte kommen ausschliesslich aus
   tokens-palette.css (Palette 1a „Schmiede"); hier steht kein Hexwert fuer Farbe. */

/* ---------- Tokens, die die Palette nicht mitliefert (§5) ---------- */
:root {
  --dv-focus: var(--dv-accent-label);
  --dv-scrim: linear-gradient(to top, rgba(16,16,16,.92) 0%, rgba(16,16,16,.55) 45%, transparent 78%);
  --dv-error: #f2705f;

  /* §6 — ueberschreibt die Font-Zeile der Token-Datei: Markenkern sticht */
  --dv-font-display: 'Cinzel', Georgia, serif;
  --dv-font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* §6 — Schriftskala */
  --dv-fs-display: clamp(2.5rem, 7vw, 4.5rem);
  --dv-fs-h1: clamp(2rem, 5vw, 3rem);
  --dv-fs-h2: clamp(1.625rem, 3.5vw, 2.25rem);
  --dv-fs-h3: 1.25rem;
  --dv-fs-lead: 1.125rem;
  --dv-fs-body: 1.0625rem;
  --dv-fs-meta: 0.875rem;
  --dv-fs-micro: 0.8125rem;

  /* §7 — Abstaende */
  --dv-space-1: .25rem; --dv-space-2: .5rem;  --dv-space-3: .75rem;
  --dv-space-4: 1rem;   --dv-space-5: 1.5rem; --dv-space-6: 2rem;
  --dv-space-7: 3rem;   --dv-space-8: 4rem;   --dv-space-9: 6rem;  --dv-space-10: 8rem;
  /* Kompakter als ursprünglich (war clamp(4rem, 10vw, 8rem)) — der Entwurf setzt die
     Abschnitte dicht, und mit einseitigem Abstand trägt der kleinere Wert. */
  --dv-section: clamp(3rem, 6vw, 5rem);

  /* §7 — Container */
  --dv-w-text: 65ch; --dv-w-content: 1120px; --dv-w-wide: 1440px;

  /* §8 — Bewegung */
  --dv-dur-instant: 120ms; --dv-dur-quick: 200ms;
  --dv-dur-medium: 400ms;  --dv-dur-slow: 700ms;
  --dv-ease-out: cubic-bezier(.16, 1, .30, 1);
  --dv-ease-standard: cubic-bezier(.40, 0, .20, 1);
}

/* ---------- Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--dv-bg);
  color: var(--dv-text-2);
  font-family: var(--dv-font-body);
  font-size: var(--dv-fs-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-inline-size: 100%; display: block; }
h1, h2, h3 { font-family: var(--dv-font-display); color: var(--dv-text); margin: 0; text-wrap: balance; }
h1 { font-size: var(--dv-fs-h1); font-weight: 700; line-height: 1.1; }
h2 { font-size: var(--dv-fs-h2); font-weight: 600; line-height: 1.15; letter-spacing: .02em; }
h3 { font-size: var(--dv-fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: .04em; }
p { margin: 0 0 var(--dv-space-4); max-inline-size: var(--dv-w-text); }
/* Absaetze, die Layout tragen statt Text, duerfen die Lesebreite nicht erben */
.hero__actions, .merch__more, .merch-card__title, .merch-card__price { max-inline-size: none; }

/* §12 — Fokusring. outline-offset ist Pflicht: --dv-focus erreicht gegen --dv-accent
   nur 1,59:1 und waere ohne Abstand an einer Akzentkante unsichtbar. */
:focus-visible {
  outline: 2px solid var(--dv-focus);
  outline-offset: 2px;
  border-radius: var(--dv-radius);
}

.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; inset-inline-start: var(--dv-space-4); inset-block-start: -4rem;
  z-index: 100; padding: var(--dv-space-3) var(--dv-space-5);
  background: var(--dv-surface); color: var(--dv-text);
  border: 1px solid var(--dv-accent); border-radius: var(--dv-radius);
  text-decoration: none; transition: inset-block-start var(--dv-dur-quick) var(--dv-ease-out);
}
.skip:focus { inset-block-start: var(--dv-space-4); }

.wrap { inline-size: min(100% - 2rem, var(--dv-w-content)); margin-inline: auto; }
@media (min-width: 768px) { .wrap { inline-size: min(100% - 4rem, var(--dv-w-content)); } }

/* ---------- Vorschau-Hinweis (gehoert nicht zur Seite) ----------
   DERZEIT UNGENUTZT. Der Balken stand bis zum 23.08.2026 ueber allen vier Seiten und
   wurde auf Wunsch entfernt — die Beteiligten wissen, dass es eine Vorschau ist.
   Die Regel bleibt stehen, damit der Hinweis mit einer Zeile Markup zurueckkommt:
     <p class="preview-note"><strong>Vorschau.</strong> …</p>  direkt nach <body>.
   Faellt beim Livegang ersatzlos weg. */
.preview-note {
  background: var(--dv-accent-tint);
  border-block-end: 1px solid var(--dv-line);
  color: var(--dv-text-3);
  font-size: var(--dv-fs-micro);
  padding: var(--dv-space-3) var(--dv-space-4);
  text-align: center;
}
.preview-note strong { color: var(--dv-accent-label); font-weight: 500; }

/* ---------- Kopf und Navigation (§4) ---------- */
/* z-index 60 liegt ueber dem Menue-Overlay (50) — sonst waere der Ausloeser beim
   Schliessen nicht mehr erreichbar. */
.site-header {
  position: relative; z-index: 60;
  padding-block: var(--dv-space-4);
}
.site-header__zeile {
  display: flex; flex-wrap: wrap; gap: var(--dv-space-4);
  align-items: center; justify-content: space-between;
}
/* Nach dem Entwurf ist der Kopf ein eigener dunkler Balken, kein schwebendes Band ueber
   dem Bild. Deshalb darf das Logo hier wieder stehen: Kopf und Hero sind getrennte Zonen,
   die Dopplung von vorher entfaellt. */
.site-header {
  background: var(--dv-bg);
  border-block-end: 1px solid var(--dv-line);
}
.site-header__logo { flex: none; }
/* 160px ist die Untergrenze aus dem Markenkern §5 — darunter verschwinden die
   Knotenmuster. Der Entwurf zeigt das Kopf-Logo kleiner; das gilt nicht. */
.site-header__logo img { inline-size: 160px; }
.site-header--start { justify-content: space-between; }
.site-header__rechts { display: flex; align-items: center; gap: var(--dv-space-4); }

/* §4: Der Sprachumschalter steht rechts aussen und niemals im Burger.
   z-index 51 hob ihn urspruenglich ueber das Menue-Overlay (50). Das war falsch:
   Am Handy stand er dann mitten im aufgeklappten Menue und ueberlagerte den Eintrag
   „Merch" (gemeldet 23.08.2026). Er bleibt auf 51 — sonst blitzt er beim Schliessen
   durch die noch halbdurchsichtige Flaeche —, wird bei offenem Menue aber
   ausgeblendet; siehe die Regel im Medienblock unter 768 px. */
.site-header__lang {
  position: relative; z-index: 51;
  color: var(--dv-text-3); text-decoration: none;
  font-size: var(--dv-fs-meta); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  padding: var(--dv-space-2) var(--dv-space-3);
  border-block-end: 1px solid transparent;
  transition: color var(--dv-dur-instant) var(--dv-ease-out),
              border-color var(--dv-dur-instant) var(--dv-ease-out);
}
.site-header__lang:hover { color: var(--dv-accent-text); border-block-end-color: var(--dv-accent); }

.nav { display: flex; align-items: center; }
.nav__list {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--dv-space-5); margin: 0; padding: 0; list-style: none;
}
/* `:not(.btn)` ist notwendig, nicht kosmetisch: `.nav a` hat höhere Spezifität als
   `.btn--primary` und hat dem Knopf sonst seine Schriftfarbe überschrieben — er stand
   in --dv-text-3 statt in --dv-accent-label und sah dadurch eher nach „aktiv" aus
   als nach Handlungsaufforderung. */
.nav a:not(.btn) {
  color: var(--dv-text-3); text-decoration: none;
  font-size: var(--dv-fs-meta); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  padding-block: var(--dv-space-2);
  border-block-end: 1px solid transparent;
  transition: color var(--dv-dur-instant) var(--dv-ease-out),
              border-color var(--dv-dur-instant) var(--dv-ease-out);
}
.nav a:not(.btn):hover { color: var(--dv-accent-text); border-block-end-color: var(--dv-accent); }
.nav a[aria-disabled="true"] { color: var(--dv-muted-2); cursor: not-allowed; }
.nav a[aria-disabled="true"]:hover { color: var(--dv-muted-2); border-block-end-color: transparent; }
/* Der Knopf trägt die Auszeichnungsschrift der Navigation, aber seine eigene Farbe. */
.nav .btn { font-size: var(--dv-fs-meta); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Burger-Auslöser ---------- */
/* Ohne JavaScript traegt der Knopf `hidden` und erscheint nie; die Liste bleibt
   sichtbar. Deshalb steht hier keine Regel, die die Liste ohne [data-nav-js] versteckt. */
.nav__toggle {
  position: relative; z-index: 51;
  display: none;
  align-items: center; justify-content: center;
  inline-size: 44px; block-size: 44px;      /* §12: Mindestgröße der Klickfläche */
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--dv-text-2);
}
.nav__bars { position: relative; display: block; inline-size: 22px; block-size: 2px; }
.nav__bars, .nav__bars::before, .nav__bars::after {
  background: currentColor;
  transition: transform var(--dv-dur-quick) var(--dv-ease-out),
              background-color var(--dv-dur-instant) var(--dv-ease-out);
}
.nav__bars::before, .nav__bars::after {
  content: ''; position: absolute; inset-inline-start: 0;
  inline-size: 22px; block-size: 2px;
}
.nav__bars::before { inset-block-start: -7px; }
.nav__bars::after  { inset-block-start: 7px; }

.nav[data-open] .nav__bars { background: transparent; }
.nav[data-open] .nav__bars::before { transform: translateY(7px) rotate(45deg); }
.nav[data-open] .nav__bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Menü unter 768 px ---------- */
@media (max-width: 767px) {
  [data-nav-js] .nav__toggle { display: inline-flex; }

  [data-nav-js] .nav__list {
    position: fixed; inset: 0; z-index: 50;
    flex-direction: column; flex-wrap: nowrap;
    justify-content: center; align-items: flex-start;
    gap: var(--dv-space-6);
    padding: var(--dv-space-9) var(--dv-space-6);
    background: var(--dv-bg);
    font-size: var(--dv-fs-lead);
    /* geschlossen: visibility nimmt die Liste aus der Tab-Reihenfolge */
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--dv-dur-medium) var(--dv-ease-out),
                transform var(--dv-dur-medium) var(--dv-ease-out),
                visibility 0s linear var(--dv-dur-medium);
  }
  [data-nav-js] .nav[data-open] .nav__list {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--dv-dur-medium) var(--dv-ease-out),
                transform var(--dv-dur-medium) var(--dv-ease-out),
                visibility 0s linear 0s;
  }
  [data-nav-js] .nav__list a { font-size: var(--dv-fs-lead); }
  [data-nav-js] .nav__list .btn { margin-block-start: var(--dv-space-3); }

  /* Startseiten: Kopf-Logo am Handy ausblenden. Direkt darunter steht dasselbe Logo
     gross im Hero — am Handy stehen beide fast uebereinander und die Dopplung frisst
     einen Bildschirmrand, ohne etwas beizutragen (gemeldet 23.08.2026).
     Der Selektor unterscheidet Start- von Unterseiten ohne zusaetzliche Klasse: Auf den
     Startseiten zeigt das Logo auf `#inhalt`, springt also nur an den eigenen Seitenanfang.
     Auf /musik/ zeigt es auf `../` und ist am Handy der einzige Weg zurueck — dort bleibt
     es deshalb stehen. Wird der href je geaendert, greift diese Regel nicht mehr. */
  .site-header__logo[href^="#"] { display: none; }
  /* Ohne das Logo hat `space-between` nur noch ein Kind und schiebt Burger und
     Umschalter an den linken Rand. Der automatische Rand haelt sie rechts — er wirkt
     auch mit sichtbarem Logo richtig und kommt ohne `:has()` aus. */
  .site-header__rechts { margin-inline-start: auto; }

  /* Sprachumschalter bei offenem Menue ausblenden. Geschwisterselektor statt `:has()`
     — `.nav` und `.site-header__lang` liegen beide in `.site-header__rechts`, und so
     funktioniert die Regel auch in aelteren Browsern.
     `visibility: hidden` nimmt ihn zugleich aus der Tab-Reihenfolge; nav.js darf ihn
     deshalb nicht mehr in die Fokuskette aufnehmen. */
  [data-nav-js] .nav[data-open] ~ .site-header__lang {
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dv-dur-quick) var(--dv-ease-out),
                visibility 0s linear var(--dv-dur-quick);
  }
}

/* ---------- Buttons (§7.1) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--dv-space-2);
  min-block-size: 44px; padding-inline: var(--dv-space-5); padding-block: var(--dv-space-3);
  border-radius: var(--dv-radius); text-decoration: none;
  font-size: var(--dv-fs-meta); font-weight: 500; letter-spacing: .04em;
  border: 1px solid transparent;
  transition: border-color var(--dv-dur-quick) var(--dv-ease-out),
              background-color var(--dv-dur-quick) var(--dv-ease-out),
              color var(--dv-dur-quick) var(--dv-ease-out);
}
/* Primaer: Tintflaeche statt gefuelltem Gold — Regel 1 der Palette verbietet
   grossflaechige Akzentflaechen. Geprueft: 9,86:1. */
.btn--primary { background: var(--dv-accent-tint); border-color: var(--dv-accent); color: var(--dv-accent-label); }
.btn--primary:hover { background: var(--dv-accent-glow); border-color: var(--dv-accent-text); }
.btn--secondary { border-color: var(--dv-line-strong); color: var(--dv-text-2); }
.btn--secondary:hover { border-color: var(--dv-accent); color: var(--dv-accent-text); }
.btn .ext { inline-size: .8em; block-size: .8em; flex: none; }

/* ---------- Hero (§7.2) ----------
   Nach dem Entwurf: kein Buehnenfoto, sondern die Logo-Ornamentik als dunkle Textur,
   die Wortmarke gross und mittig. Das Buehnenfoto zieht in die Band-Sektion um. */
.hero { position: relative; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(228,101,36,.16), transparent 70%),
    linear-gradient(to bottom, rgba(16,16,16,.72), rgba(16,16,16,.86) 55%, var(--dv-bg));
}
.hero__inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  min-block-size: min(68vh, 560px);
  padding-block: var(--dv-space-8);
}
.hero__title { display: flex; flex-direction: column; align-items: center; margin: 0; }
.hero__kicker {
  font-size: var(--dv-fs-meta); font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--dv-text-3);
  margin: 0 0 var(--dv-space-6);
}
.hero__logo { inline-size: clamp(240px, 42vw, 480px); }
.hero__satz {
  margin: var(--dv-space-7) 0 var(--dv-space-6);
  max-inline-size: 52ch; color: var(--dv-text-3);
  font-size: var(--dv-fs-lead); font-weight: 300;
}
.hero__satz em { font-style: italic; color: var(--dv-text-2); }
.hero__satz cite {
  display: block; margin-block-start: var(--dv-space-2);
  font-size: var(--dv-fs-meta); font-style: normal; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--dv-muted);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--dv-space-3); justify-content: center; }
.hero__credit { margin: var(--dv-space-7) 0 0; font-size: var(--dv-fs-micro); color: var(--dv-muted-2); }

/* ---------- Sektionskopf mit auslaufender Linie (Entwurf) ---------- */
/* flex-wrap ist Pflicht: Ohne Umbruch schiebt der „Alle …“-Link auf schmalen Fenstern
   über den rechten Rand hinaus und erzeugt horizontales Scrollen. */
.section__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dv-space-3) var(--dv-space-5); }
.section__zeile h2 { flex: none; }
.section__zeile .rule { flex: 1 1 40px; min-inline-size: 40px; }
.section__mehr {
  flex: none; font-size: var(--dv-fs-meta); color: var(--dv-text-3);
  text-decoration: none; white-space: nowrap;
}
.section__mehr:hover { color: var(--dv-accent-text); }
.badge {
  flex: none; padding: var(--dv-space-1) var(--dv-space-3);
  border-radius: var(--dv-radius-pill); background: var(--dv-accent-tint);
  color: var(--dv-accent-label); font-size: var(--dv-fs-micro);
  font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}

/* ---------- Musik (Entwurf) ---------- */
.musik__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--dv-space-5);
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 768px) { .musik__grid { grid-template-columns: repeat(2, 1fr); } }

.release {
  display: flex; gap: var(--dv-space-5); align-items: center;
  padding: var(--dv-space-5);
  border: 1px solid var(--dv-card-line); border-radius: var(--dv-radius);
  background: linear-gradient(180deg, var(--dv-tile-hi), var(--dv-tile-lo));
}
.release__cover {
  flex: none; inline-size: clamp(88px, 22vw, 120px); aspect-ratio: 1;
  border-radius: var(--dv-radius); overflow: hidden;
}
.release__cover img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.release__meta {
  font-size: var(--dv-fs-micro); font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dv-accent-text); margin: 0;
}
.release__titel {
  font-family: var(--dv-font-display); font-size: var(--dv-fs-h3); font-weight: 600;
  letter-spacing: .04em; color: var(--dv-text); margin: var(--dv-space-2) 0 var(--dv-space-4);
}
.release__links { display: flex; flex-wrap: wrap; gap: var(--dv-space-2); margin: 0; padding: 0; list-style: none; }
.pill {
  display: inline-block; padding: var(--dv-space-1) var(--dv-space-3);
  border: 1px solid var(--dv-line-strong); border-radius: var(--dv-radius-pill);
  font-size: var(--dv-fs-micro); color: var(--dv-text-3); text-decoration: none;
  transition: border-color var(--dv-dur-quick) var(--dv-ease-out),
              color var(--dv-dur-quick) var(--dv-ease-out);
}
.pill:hover { border-color: var(--dv-accent); color: var(--dv-accent-text); }

/* Am Handy war die Kachel viel zu wuchtig: Das Textfeld neben dem 120-px-Cover ist nur
   gut 160 px breit, dadurch brach die Metazeile auf zwei und der Titel auf zwei Zeilen,
   und die drei Pillen standen untereinander statt nebeneinander (gemeldet 23.08.2026).

   Unter 768 px wird die Kachel deshalb ein Raster statt einer Flexzeile:
     Zeile 1+2   kleineres Cover links, daneben Metazeile und Titel — je EINE Zeile
     Zeile 3     die Pillen ueber die volle Kachelbreite, nebeneinander
   `display: contents` auf dem Textcontainer hebt dessen Kinder in dieses Raster, damit
   die Pillen die Kachelbreite bekommen. Das <div> traegt keine Semantik, es geht dabei
   also nichts verloren — und das Markup bleibt in allen vier Seiten unveraendert. */
@media (max-width: 767px) {
  .release {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--dv-space-4); row-gap: var(--dv-space-3);
    padding: var(--dv-space-4);
  }
  .release > div:not(.release__cover) { display: contents; }

  .release__cover { inline-size: 76px; grid-column: 1; grid-row: 1 / span 2; }
  /* Meta und Titel ruecken zusammen: unten- bzw. obenbuendig, damit sie als Block
     neben dem Cover stehen und nicht ueber die ganze Coverhoehe auseinanderfallen. */
  /* 10 px und knappe Sperrung, damit die laengste Metazeile — „Album · 2016 · NoiseArt
     Records" — einzeilig bleibt. Bei 11 px braeuchte sie 215 px und hat 202 px. */
  .release__meta {
    grid-column: 2; grid-row: 1; align-self: end;
    font-size: 0.625rem; letter-spacing: .03em;
  }
  .release__titel {
    grid-column: 2; grid-row: 2; align-self: start;
    margin: 0; font-size: 1.0625rem;
  }
  /* nowrap: Die drei Pillen sollen nebeneinander bleiben, auch wenn es eng wird. */
  .release__links {
    grid-column: 1 / -1; grid-row: 3;
    flex-wrap: nowrap; gap: var(--dv-space-2);
  }
  .release__links .pill { white-space: nowrap; padding-inline: var(--dv-space-2); }
}

/* Sehr schmale Geraete (iPhone SE und aehnlich): Bei 320 px standen die drei Pillen
   16 px ueber die Kachel hinaus, weil `nowrap` sie nicht umbrechen laesst. Engere
   Innenabstaende und eine Stufe kleiner holen das wieder herein.
   Metazeile und Titel duerfen hier zweizeilig werden — das ist die Breite, ab der
   „Album · 2016 · NoiseArt Records" nicht mehr einzeilig unterzubringen ist, ohne die
   Schrift unlesbar klein zu machen. */
@media (max-width: 359px) {
  .release__links .pill { font-size: 0.625rem; padding-inline: var(--dv-space-1); }
  .release__titel { font-size: 1rem; }
}
.pill[aria-disabled="true"] { color: var(--dv-muted-2); border-style: dashed; cursor: not-allowed; }
.pill[aria-disabled="true"]:hover { color: var(--dv-muted-2); border-color: var(--dv-line-strong); }

/* ---------- Unterseite /musik/ ---------- */
.seiten-kopf { padding-block-start: var(--dv-section); }
.seiten-kopf h1 { margin-block-end: var(--dv-space-3); }
.seiten-kopf p { color: var(--dv-text-3); font-size: var(--dv-fs-lead); font-weight: 300; }

.release--seite { margin-block-end: var(--dv-space-6); }

.tracks { list-style: none; margin: 0 0 var(--dv-space-10); padding: 0; }
.track { border-block-end: 1px solid var(--dv-card-line); }

/* Kopfzeile eines Titels — als <summary> aufklappbar, bei Instrumentals als <div>.
   Beide tragen dieselbe Klasse, damit die Zeilen identisch aussehen. */
.track__kopf {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto 1.5rem;
  align-items: center; gap: var(--dv-space-4);
  padding-block: var(--dv-space-4);
  list-style: none;                      /* Standard-Dreieck weg */
  transition: color var(--dv-dur-instant) var(--dv-ease-out);
}
.track__kopf::-webkit-details-marker { display: none; }
summary.track__kopf { cursor: pointer; }
summary.track__kopf:hover .track__titel { color: var(--dv-accent-text); }

.track__nr { font-size: var(--dv-fs-meta); color: var(--dv-muted-2); font-variant-numeric: tabular-nums; }
.track__titel { color: var(--dv-text-2); transition: color var(--dv-dur-instant) var(--dv-ease-out); }
.track__dauer { font-size: var(--dv-fs-meta); color: var(--dv-muted); font-variant-numeric: tabular-nums; }
.track__marke { font-size: var(--dv-fs-micro); color: var(--dv-muted-2); text-align: end; }
summary.track__kopf .track__marke::after {
  content: '▾'; display: inline-block;
  transition: transform var(--dv-dur-quick) var(--dv-ease-out);
}
details[open] > summary.track__kopf .track__marke::after { transform: rotate(180deg); }
details[open] > summary.track__kopf .track__titel { color: var(--dv-accent-text); }

/* Lyrics: <pre> erhält den Zeilenfall des Textes, soll aber wie Fließtext aussehen
   und umbrechen dürfen. */
.track__text {
  font-family: var(--dv-font-body);
  font-size: var(--dv-fs-body); line-height: 1.7; font-weight: 300;
  white-space: pre-wrap; overflow-wrap: break-word;
  color: var(--dv-text-3);
  max-inline-size: 58ch;
  margin: 0 0 var(--dv-space-6);
  padding-inline-start: calc(2.5rem + var(--dv-space-4));
}
@media (max-width: 639px) { .track__text { padding-inline-start: 0; } }

.track--instrumental .track__titel { color: var(--dv-muted); }
/* Der Hinweis sitzt in der Titelspalte und darf mitumbrechen — in der schmalen
   Markierungsspalte würde er die Zeile über den Rand schieben. */
.track__instr {
  font-size: var(--dv-fs-micro); color: var(--dv-muted-2);
  margin-inline-start: var(--dv-space-2); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  summary.track__kopf .track__marke::after { transition: none; }
}

/* ---------- Shows (Entwurf) ---------- */
.shows__liste { list-style: none; margin: 0; padding: 0; }
.show {
  display: grid; grid-template-columns: 1fr auto; gap: var(--dv-space-2) var(--dv-space-5);
  align-items: center;
  padding-block: var(--dv-space-5);
  border-block-end: 1px solid var(--dv-card-line);
}
@media (min-width: 768px) {
  /* DREI Spalten, in beiden Listen dieselben — das ist die Bedingung dafuer, dass
     anstehende Termine und Historie fluchten. Jede Zeile ist ein eigenes Grid; sobald
     eine Liste eine vierte Spalte fuer die Ticketpille reserviert, werden ihre beiden
     `1fr`-Spalten schmaler und die Venue-Spalte rutscht. Genau das war am 02.09.2026 zu
     sehen, als die ersten anstehenden Shows dazukamen: 52 px Versatz. */
  .show { grid-template-columns: 8rem 1fr 1fr; position: relative; }
  /* Die Pille liegt deshalb AUSSERHALB des Rasters, absolut am rechten Rand. So kostet
     sie keine Spaltenbreite und die Zeilen mit und ohne Ticket rechnen identisch. */
  .show .pill {
    position: absolute; inset-inline-end: 0;
    inset-block-start: 50%; transform: translateY(-50%);
  }
  /* Der Platz fuer die Pille wird als Innenabstand der Venue-Zelle freigehalten — in
     BEIDEN Listen, damit die Spaltenbreiten gleich bleiben. Padding sitzt in der Zelle
     und verschiebt den Spaltenanfang nicht. */
  .show__venue { padding-inline-end: 6rem; }
}
.show__datum {
  font-family: var(--dv-font-display); font-size: var(--dv-fs-h3); font-weight: 600;
  letter-spacing: .04em; color: var(--dv-text); margin: 0;
}
.show__ort { font-size: var(--dv-fs-body); color: var(--dv-text-2); margin: 0; }
.show__venue { font-size: var(--dv-fs-meta); color: var(--dv-muted); margin: 0; }
.shows__leer {
  color: var(--dv-text-3); font-size: var(--dv-fs-lead); font-weight: 300;
  margin-block: 0;
}

/* ---------- Gig-Historie ---------- */
.shows__historie { margin-block-start: var(--dv-space-8); }
.shows__jahr {
  font-family: var(--dv-font-display); font-size: var(--dv-fs-h3); font-weight: 600;
  letter-spacing: .06em; color: var(--dv-accent-text);
  margin: var(--dv-space-6) 0 var(--dv-space-2);
}
.shows__historie > .shows__jahr:first-of-type { margin-block-start: var(--dv-space-4); }

/* Vergangene Gigs sind gedämpft — sie sind Beleg, nicht Einladung (§7.3) */
.shows__historie .show__ort { color: var(--dv-text-3); }
.shows__historie .show__datum { color: var(--dv-muted); font-size: var(--dv-fs-body); }

.shows__aelter { margin-block-start: var(--dv-space-6); }
.shows__aelter summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: var(--dv-space-2);
  padding: var(--dv-space-2) 0;
  font-size: var(--dv-fs-meta); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--dv-text-3);
  border-block-end: 1px solid transparent;
  transition: color var(--dv-dur-instant) var(--dv-ease-out),
              border-color var(--dv-dur-instant) var(--dv-ease-out);
}
.shows__aelter summary::-webkit-details-marker { display: none; }
.shows__aelter summary:hover { color: var(--dv-accent-text); border-block-end-color: var(--dv-accent); }
.shows__aelter summary::after {
  content: '▾'; font-size: .8em;
  transition: transform var(--dv-dur-quick) var(--dv-ease-out);
}
.shows__aelter[open] summary::after { transform: rotate(180deg); }
.shows__leer a { color: var(--dv-accent-text); text-underline-offset: .2em; }

/* ---------- Sektionen ----------
   Der Abstand sitzt NUR oben. Trüge jede Sektion ihn oben und unten, addierten sich
   zwischen zwei Sektionen zwei volle Abstände — das ist der Grund, warum die Seite
   vorher auseinandergezogen wirkte. Die letzte Sektion bekommt ihren Fuß zurück. */
.section { padding-block-start: var(--dv-section); }
.section:last-of-type { padding-block-end: var(--dv-section); }
.section__head { margin-block-end: var(--dv-space-7); }
.section__kicker {
  font-size: var(--dv-fs-meta); font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dv-muted); margin: 0 0 var(--dv-space-2);
}
/* §5 Regel: Trennlinien laufen an den Enden aus */
.rule { block-size: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--dv-line), transparent); }

/* ---------- Band (§7.4) ---------- */
/* Das Bühnenfoto, das früher der Hero trug */
.band__buehne { margin: 0 0 var(--dv-space-8); }
.band__buehne img {
  inline-size: 100%; block-size: auto;
  border-radius: var(--dv-radius);
  border: 1px solid var(--dv-card-line);
}
.band__buehne figcaption { text-align: end; }

.band__text { max-inline-size: var(--dv-w-text); }
.band__text > p { margin-block-end: var(--dv-space-5); }
/* Der Leitspruch eröffnet die Biografie und muss stärker stehen als der Fließtext
   darunter — vorher war er blasser und wirkte wie eine Randnotiz. */
.band__lead {
  font-size: 1.25rem; line-height: 1.45; font-weight: 300; font-style: italic;
  color: var(--dv-text);
  margin-block-end: var(--dv-space-6);
}
.band__stand {
  font-size: var(--dv-fs-micro); color: var(--dv-muted-2);
  letter-spacing: .04em;
}

.band__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--dv-space-5);
  list-style: none; margin: var(--dv-space-8) 0 0; padding: 0;
}
@media (min-width: 768px) { .band__grid { grid-template-columns: repeat(3, 1fr); } }

.band-card__frame {
  aspect-ratio: 4 / 5;          /* §7.4: einheitliches Format, sonst wirkt es wie eine Sammlung */
  overflow: hidden;
  border-radius: var(--dv-radius);
  border: 1px solid var(--dv-card-line);
  background: linear-gradient(180deg, var(--dv-tile-hi), var(--dv-tile-lo));
}
.band-card__frame img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Platzhalter, solange die Bildrechte ungeklärt sind (§13). Bewusst ruhig gestaltet —
   er soll nach Absicht aussehen, nicht nach fehlendem Bild. */
/* place-content statt place-items: sonst bekommt jede Zeile die halbe Kachelhoehe
   und Initial und Hinweis stehen weit auseinander. */
.band-card__frame--leer {
  display: grid; place-content: center; justify-items: center;
  gap: var(--dv-space-2);
  text-align: center; padding: var(--dv-space-4);
}
.band-card__initial {
  font-family: var(--dv-font-display); font-weight: 700;
  font-size: clamp(2.5rem, 8vw, 3.5rem); line-height: 1;
  color: var(--dv-line-strong);
}
.band-card__hinweis {
  font-size: var(--dv-fs-micro); color: var(--dv-muted-2); margin: 0;
}
/* Name links, Fotocredit rechts — eine Zeile. Bei schmalen Karten bricht der Credit
   in die nächste Zeile, statt den Namen zu quetschen. */
.band-card__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--dv-space-2);
  margin-block-start: var(--dv-space-4);
}
.band-card__kopf .bild-credit { margin: 0; text-align: end; }

/* Am Handy ist die Karte zu schmal fuer beides in einer Zeile: Der Credit brach um,
   schob den Namen zur Seite und das Instrument aus der Kachel (gemeldet 23.08.2026).
   Unter 768 px steht er deshalb als eigene, noch kleinere Zeile rechtsbuendig direkt
   unter dem Bild — darunter der Name, darunter das Instrument.
   `column-reverse` dreht dafuer nur die Darstellung; das Markup bleibt Name, Credit
   und muss in keiner der vier Seitendateien angefasst werden. */
@media (max-width: 767px) {
  .band-card__kopf {
    flex-direction: column-reverse; flex-wrap: nowrap;
    align-items: stretch; gap: var(--dv-space-1);
    margin-block-start: var(--dv-space-2);
  }
  /* Der Credit MUSS einzeilig bleiben, sonst stehen die Namen einer Rasterzeile
     unterschiedlich hoch. Deshalb tragen die Portraetkarten nur die Quelle, keinen
     Fotografennamen (§9) — gemessen am 23.08.2026: „© dark-art.com – Matthias Mayer"
     braucht auf einer 125 px breiten Karte (320-px-Geraet) selbst bei 8 px zwei Zeilen,
     die Quelle allein passt bei 11 px mit Rand. Wird hier je ein laengerer Credit
     eingetragen, kippt die Ausrichtung wieder. */
  .band-card__kopf .bild-credit { font-size: 0.6875rem; line-height: 1.35; }
}
.band-card__name {
  font-family: var(--dv-font-display); font-size: var(--dv-fs-h3); font-weight: 600;
  letter-spacing: .04em; color: var(--dv-text); margin: 0;
}
.band-card__rolle {
  font-size: var(--dv-fs-meta); color: var(--dv-muted);
  margin: var(--dv-space-1) 0 0;
}

/* ---------- Rechtstexte: Impressum und Datenschutz (§7.10) ----------
   Fliesstext, der gelesen werden muss — deshalb keine Kacheln, keine Akzentflaechen,
   nur Rhythmus. Die Lesebreite kommt aus der globalen p-Regel (65ch). */
.recht h2 {
  font-size: var(--dv-fs-h3); color: var(--dv-accent-text);
  letter-spacing: .04em;
  margin-block: var(--dv-space-7) var(--dv-space-3);
}
.recht h2:first-child { margin-block-start: 0; }
.recht__block { color: var(--dv-text); line-height: 1.7; }
/* Es gibt KEINE globale Regel fuer Links im Fliesstext — jede Stelle bringt ihre
   eigene mit (bisher nur `.shows__leer a`). Ohne diese Zeile stuenden die Mail- und
   Behoerdenlinks hier im Browserblau mitten in der Goldpalette. Bei jedem neuen
   Textblock mit Links daran denken. */
.recht a { color: var(--dv-accent-text); text-underline-offset: .2em; }
.recht a:hover { color: var(--dv-accent-label); }
.recht__liste {
  max-inline-size: var(--dv-w-text);
  margin: 0 0 var(--dv-space-4); padding-inline-start: var(--dv-space-5);
}
.recht__liste li { margin-block-end: var(--dv-space-2); }
.recht__stand {
  margin-block-start: var(--dv-space-8);
  font-size: var(--dv-fs-micro); color: var(--dv-muted-2); letter-spacing: .04em;
}
.recht__hinweis { font-size: var(--dv-fs-meta); color: var(--dv-muted); }
/* Offene Stelle in einem Rechtstext. Golden und in Grossbuchstaben, damit sie beim
   Ueberfliegen nicht durchrutscht — dasselbe Prinzip wie .bild-credit--offen (§13):
   Was fehlt, soll auffallen, nicht unauffaellig mitlaufen. VOR DEM LIVEGANG muss
   diese Klasse aus allen Rechtstexten verschwunden sein. */
.recht__offen {
  color: var(--dv-accent-text);
  border-block-end: 1px dashed var(--dv-accent);
  font-size: var(--dv-fs-meta); letter-spacing: .02em;
}
.recht__offen::before { content: '⚠ '; }

/* ---------- Presse & Booking (§7.9) ---------- */
.booking__text { color: var(--dv-text-2); }
/* `max-inline-size: none` ist noetig, weil die globale p-Regel 65ch setzt — der Knopf
   saesse sonst in einem Textmass statt in der Kachelbreite. Derselbe Stolperstein
   wie bei .merch__more. */
/* Flex statt Textfluss: Die drei Knoepfe stehen untereinander und fuellen die Breite,
   ab 940 px nebeneinander in EINER Zeile. `wrap` bleibt als Fangnetz — sollten die
   Beschriftungen je laenger werden, ist Umbruch besser als Ueberlauf (§7.1). */
.booking__aktion {
  max-inline-size: none; margin-block-start: var(--dv-space-6);
  display: flex; flex-wrap: wrap; gap: var(--dv-space-5);
}
.booking__aktion .btn { flex: 1 1 100%; justify-content: center; }
/* 980 px ist nachgemessen, nicht geraten: Die drei Knoepfe brauchen zusammen 822 px,
   mit zwei Luecken 870 px, dazu 2 rem Rand je Seite und die Scrollleiste. Bei 940 px
   ragte der dritte noch 10 px ueber den .wrap hinaus.
   Der vorherige Wert 640 px war schlicht falsch: Dort passten nur zwei nebeneinander
   und der dritte rutschte in eine zweite Zeile — genau der Zwischenzustand, den es
   nicht geben soll. Entweder alle drei in einer Zeile oder alle drei untereinander.
   Wer die Beschriftungen aendert, muss diesen Wert neu messen. */
@media (min-width: 980px) {
  .booking__aktion { flex-wrap: nowrap; }
  .booking__aktion .btn { flex: 0 0 auto; }
}
/* Dateiformat und Groesse gehoeren an den Knopf: Wer ein PDF von 742 kB laedt, soll
   das vorher wissen — besonders am Mobilfunknetz. */
.btn__meta {
  margin-inline-start: var(--dv-space-2);
  font-size: var(--dv-fs-micro); color: var(--dv-muted); letter-spacing: .02em;
}

/* ---------- Live-Streifen (§7.7) ----------
   Statt einer Galerieseite: sechs Bilder in der Band-Sektion. Am Handy waagerecht
   scrollbar mit Einrastpunkten — das ist dort die natuerliche Geste und kostet keine
   Bildschirmhoehe. Ab 768 px ein 3x2-Raster, weil zum Wischen die Maus fehlt. */
.live__titel {
  font-family: var(--dv-font-display); font-size: var(--dv-fs-h3); font-weight: 600;
  letter-spacing: .06em; color: var(--dv-accent-text);
  margin: var(--dv-space-8) 0 var(--dv-space-4);
}
/* Alle sechs Bilder stammen vom selben Abend. Der Anlass steht deshalb EINMAL unter der
   Ueberschrift statt sechsmal in den Bildunterschriften — und im alt-Text gar nicht:
   Der beschreibt, was im Bild zu sehen ist, und der Veranstaltungsort ist es nicht. */
.live__anlass {
  margin: calc(var(--dv-space-4) * -1) 0 var(--dv-space-4);
  font-size: var(--dv-fs-meta); color: var(--dv-muted); letter-spacing: .02em;
}
.live__streifen {
  display: grid; gap: var(--dv-space-4);
  grid-auto-flow: column; grid-auto-columns: 78%;
  overflow-x: auto; overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  /* Der Streifen laeuft bis an den Bildschirmrand, statt im Textmass zu enden —
     sonst sieht es aus, als waere er zu Ende, obwohl noch Bilder folgen.
     Der negative Rand hebt ihn aus dem .wrap heraus, das Padding gibt erstem und
     letztem Bild denselben Abstand wie dem Text daneben.
     Der Wert muss GENAU dem Seitenrand des .wrap entsprechen (`100% - 2rem`, also
     1rem je Seite) — ist er groesser, ragt der Streifen aus dem Fenster und die
     ganze Seite laesst sich waagerecht schieben. */
  margin-inline: -1rem;
  padding-inline: 1rem;
  padding-block-end: var(--dv-space-2);
  scrollbar-width: thin;
}
.live__bild { margin: 0; scroll-snap-align: start; }
/* `block-size: auto` ist Pflicht, nicht Kosmetik: Ohne diese Zeile gilt das
   HTML-Attribut `height="800"` als Hoehe, und das Bild steht 800 px hoch im
   256 px breiten Streifen. Erst mit `auto` greift `aspect-ratio`. */
.live__bild img {
  inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--dv-radius); border: 1px solid var(--dv-card-line);
  background: var(--dv-surface);
}
.live__bild .bild-credit { margin-block-start: var(--dv-space-2); }

@media (min-width: 768px) {
  .live__streifen {
    grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto;
    overflow-x: visible; scroll-snap-type: none;
    margin-inline: 0; padding-inline: 0;
  }
}

/* Fotocredit (§9): sichtbar unter dem Bild, nie im alt-Text.
   Bewusst die kleinste Stufe der Skala und --dv-muted-2 — der Credit gehoert dazu,
   soll aber die Bildunterschrift nicht dominieren. */
.bild-credit {
  font-size: var(--dv-fs-micro);
  color: var(--dv-muted-2);
  margin: var(--dv-space-2) 0 0;
  letter-spacing: .02em;
}
.bild-credit--offen { color: var(--dv-accent-text); }   /* nur solange ungeklaert */

/* Im Hero liegt der Credit ueber dem Bild und braucht deshalb eigenen Halt */
.hero__credit {
  margin: var(--dv-space-5) 0 0;
  font-size: var(--dv-fs-micro);
  color: var(--dv-muted-2);
}

/* Pressestimme — §4 des Markenkerns: Quelle und Jahr sind Pflicht */
.band__quote {
  margin: var(--dv-space-8) 0 0;
  padding-inline-start: var(--dv-space-5);
  border-inline-start: 2px solid var(--dv-accent);
  max-inline-size: 60ch;
  font-size: var(--dv-fs-lead); font-weight: 300; font-style: italic;
  color: var(--dv-text-3);
}
.band__quote cite {
  display: block; margin-block-start: var(--dv-space-3);
  font-size: var(--dv-fs-meta); font-style: normal; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--dv-muted);
}

/* ---------- Merch (§7.6 / §8.3) ---------- */
.merch__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--dv-space-5);
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 640px) { .merch__grid { grid-template-columns: repeat(3, 1fr); } }

.merch-card { display: block; text-decoration: none; color: inherit; }
.merch-card__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--dv-radius);
  border: 1px solid var(--dv-card-line);
  background: linear-gradient(180deg, var(--dv-tile-hi), var(--dv-tile-lo));
  transition: border-color var(--dv-dur-quick) var(--dv-ease-out);
}
.merch-card__img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
  transform: scale(1);
  transition: transform var(--dv-dur-medium) var(--dv-ease-out);
  will-change: transform;
}
.merch-card__body {
  display: flex; align-items: baseline; gap: var(--dv-space-3);
  padding-block-start: var(--dv-space-4);
}
.merch-card__title {
  font-family: var(--dv-font-body); font-size: var(--dv-fs-body); font-weight: 500;
  color: var(--dv-text-2); margin: 0; flex: 1;
  transition: color var(--dv-dur-quick) var(--dv-ease-out);
}
.merch-card__type {
  display: block; font-size: var(--dv-fs-micro); font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase; color: var(--dv-muted);
  margin-block-start: var(--dv-space-1);
}
.merch-card__price { font-size: var(--dv-fs-body); font-weight: 500; color: var(--dv-accent-text); }
.merch-card__ext {
  position: absolute; inset-block-start: var(--dv-space-3); inset-inline-end: var(--dv-space-3);
  inline-size: 1.5rem; block-size: 1.5rem; padding: .3rem;
  border-radius: var(--dv-radius); background: rgba(16,16,16,.55); color: var(--dv-text-3);
  transition: transform var(--dv-dur-quick) var(--dv-ease-out),
              color var(--dv-dur-quick) var(--dv-ease-out);
}
.merch-card__badge {
  position: absolute; inset-block-end: var(--dv-space-3); inset-inline-start: var(--dv-space-3);
  padding: var(--dv-space-1) var(--dv-space-3); border-radius: var(--dv-radius-pill);
  background: var(--dv-accent-tint); color: var(--dv-accent-label);
  font-size: var(--dv-fs-micro); font-weight: 500; letter-spacing: .06em;
}

/* Hover nur auf Geraeten mit echtem Zeiger — sonst klebt der Zustand nach dem Antippen */
@media (hover: hover) {
  .merch-card:hover .merch-card__img { transform: scale(1.06); }
  .merch-card:hover .merch-card__frame { border-color: var(--dv-accent); }
  .merch-card:hover .merch-card__title { color: var(--dv-accent-text); }
  .merch-card:hover .merch-card__ext { transform: translateX(2px); color: var(--dv-accent-text); }
}
.merch-card:focus-visible .merch-card__img { transform: scale(1.06); }
.merch-card:focus-visible .merch-card__frame { border-color: var(--dv-accent); }
.merch-card:focus-visible .merch-card__title { color: var(--dv-accent-text); }
.merch-card:active .merch-card__img { transform: scale(1.03); }

.merch-card.is-soldout .merch-card__img { opacity: .55; }
.merch-card.is-soldout:hover .merch-card__img { transform: none; }
.merch-card.is-soldout:hover .merch-card__frame { border-color: var(--dv-card-line); }

.merch__more { display: flex; justify-content: center; margin-block-start: var(--dv-space-7); }

/* ---------- Fuss ---------- */
.site-footer {
  background: var(--dv-surface-2);
  border-block-start: 1px solid var(--dv-line);
  padding-block: var(--dv-space-8);
  color: var(--dv-muted);
  font-size: var(--dv-fs-meta);
}
.site-footer a { color: var(--dv-text-3); text-underline-offset: .2em; }
.site-footer a:hover { color: var(--dv-accent-text); }
.site-footer__row { display: flex; flex-wrap: wrap; gap: var(--dv-space-5); align-items: center; }
.site-footer__row + .site-footer__row { margin-block-start: var(--dv-space-4); }

/* ---------- §8: Bewegungsreduktion ist Pflicht ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Zustaende bleiben unterscheidbar, nur ohne Weg dorthin:
     Rahmen- und Textwechsel bleiben, der Bildzoom entfaellt. */
  .merch-card:hover .merch-card__img,
  .merch-card:focus-visible .merch-card__img { transform: none; }

  /* Das Menue erscheint ohne Bewegung — aber es MUSS erscheinen. Die
     visibility-Verzoegerung wird deshalb ebenfalls auf null gesetzt. */
  [data-nav-js] .nav__list,
  [data-nav-js] .nav[data-open] .nav__list { transition: none; }
  .nav__bars, .nav__bars::before, .nav__bars::after { transition: none; }
}