/* FF Edits – Stylesheet
   Farben gemessen in den Plattenladen-Motiven (Stand 21.10.2026).
   Die Seite arbeitet mit Rollen (Grund, Fläche, Text, Akzent …). Festgelegt am
   21.10.2026: Stufe "Aufgehellt", Schrift Anton für Überschriften und Titel.
   Kontraste stehen jeweils dabei. */

/* ---------- Schriften (lokal, keine Anfrage an Google) ---------- */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/anton-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/anton-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Farben ---------- */

:root {
  /* Palette aus den Motiven */
  --ff-nacht: #0B0E0D;           /* dunkelste Bildstellen */
  --ff-ladengruen: #142426;      /* Sockel des Schaufensters */
  --ff-lampenlicht: #F0C892;     /* Schriftzug im Fenster, Lampen */
  --ff-licht-gedaempft: #C8B08A; /* abgeleitet: Nebentext */
  --ff-glut: #D98A3E;            /* Schaufensterlicht, aufgehellt */
  --ff-backstein: #5A3224;       /* Fassade */
  --ff-daemmerblau: #7090B8;     /* Himmel */
  --ff-linie-dunkel: rgba(240, 200, 146, .25); /* Trennlinie auf dem Grund */
  --ff-vu-rot: #9E3B22;          /* abgeleitet: Backstein, aufgehellt, für die Übersteuerung im VU-Meter */

  /* Rollen außerhalb der Inhaltsfläche: Kopfleiste, Abschluss, Fußzeile.
     Kontrast auf #1A2122: Lampenlicht 10,4:1, Licht gedämpft 7,8:1, Fokus 6,9:1 */
  --ff-grund: #1A2122;
  --ff-fokus: #8FAAD0;           /* Dämmerblau, aufgehellt */

  --ff-font-text: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Anton für Überschriften, Titel und Logo; Montserrat für Text */
  --ff-font-display: "Anton", "Arial Narrow", sans-serif;
  --ff-display-weight: 400;
  --ff-display-tracking: .04em;
  --ff-title-transform: uppercase;
  --ff-title-tracking: .02em;
  --ff-title-size: 1.15rem;
  --ff-title-weight: 400;
  --ff-logo-size: 2.05rem;

  /* Bewegung: kurz und entschieden, nur für Rückmeldung und Zustand.
     Starke Ease-out-Kurve nach Emil Kowalski; alles unter 300 ms. */
  --ff-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ff-dauer-druck: 160ms;
  --ff-dauer-farbe: 150ms;
  --ff-dauer-zustand: 220ms;

  --ff-wrap: 1140px;

  color-scheme: dark;
  accent-color: var(--ff-glut);
  scrollbar-color: var(--ff-licht-gedaempft) var(--ff-grund);
}

/* Rollen der Inhaltsfläche. Kontrast auf #26403F: Text 7,1:1,
   Nebentext 5,3:1, Akzent #E39A52 4,8:1, Fokus #8FAAD0 4,7:1 */
.sheet {
  --ff-flaeche: #26403F;         /* Ladengrün, aufgehellt */
  --ff-text: var(--ff-lampenlicht);
  --ff-text-neben: var(--ff-licht-gedaempft);
  --ff-akzent: #E39A52;          /* Glut, aufgehellt */
  --ff-auf-akzent: var(--ff-nacht);
  --ff-linie: rgba(240, 200, 146, .22);
  --ff-hover: rgba(240, 200, 146, .06);
  --ff-aktiv: rgba(11, 14, 13, .3);
  --ff-uebergang: 3px solid var(--ff-backstein);
}

/* Heller Bogen für Impressum und Datenschutz (längerer Fließtext).
   Kontrast auf #F3EAD8: Text 13,4:1, Nebentext 6,2:1, Akzent #8A4A14 5,7:1, Fokus #3E5F8A 5,5:1 */
.sheet.papier {
  --ff-flaeche: #F3EAD8;
  --ff-text: var(--ff-ladengruen);
  --ff-text-neben: #5E5446;
  --ff-akzent: #8A4A14;
  --ff-auf-akzent: #F3EAD8;
  --ff-linie: rgba(20, 36, 38, .16);
  --ff-hover: rgba(20, 36, 38, .05);
  --ff-aktiv: rgba(20, 36, 38, .08);
  --ff-uebergang: 14px solid var(--ff-ladengruen);
  --ff-fokus: #3E5F8A;
}

/* ---------- Grundlagen ---------- */

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

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--ff-grund);
  color: var(--ff-lampenlicht);
  font-family: var(--ff-font-text);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

a {
  color: var(--ff-glut);
  text-underline-offset: .18em;
  transition: color var(--ff-dauer-farbe) ease;
}
a:hover { color: var(--ff-lampenlicht); }

:focus-visible {
  outline: 3px solid var(--ff-fokus);
  outline-offset: 2px;
}

/* Browser-Flächen, die sonst im Standard-Look bleiben */
::selection { background: var(--ff-glut); color: var(--ff-nacht); }

/* Umbruch: Überschriften ausgeglichen, Fließtext ohne einzelnes Wort in der letzten Zeile */
h1, h2, h3, .claim { text-wrap: balance; }
p, li { text-wrap: pretty; }

.wrap { max-width: var(--ff-wrap); margin: 0 auto; padding: 0 22px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  background: var(--ff-lampenlicht); color: var(--ff-nacht);
  padding: 10px 16px; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

h1, h2, .wordmark, .claim, .logo {
  font-family: var(--ff-font-display);
  font-weight: var(--ff-display-weight);
  letter-spacing: var(--ff-display-tracking);
  text-transform: uppercase;
  line-height: 1.05;
}

/* ---------- 1 Kopfleiste ---------- */

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 22px;
}
.wordmark {
  color: var(--ff-lampenlicht); text-decoration: none; font-size: 1.05rem;
  display: inline-flex; align-items: center; min-height: 44px;
  white-space: nowrap; /* FF Edits gehört immer zusammen */
}
.topbar-right { display: flex; align-items: center; gap: 18px; }
.topbar ul { display: flex; gap: 14px; }

/* Sprachumschalter DE | EN: die aktive Sprache in Lampenlicht, die andere gedämpft */
.lang { display: flex; align-items: center; }
.lang button {
  min-width: 44px; min-height: 44px; padding: 0 6px;
  font-size: .8rem; font-weight: 600; letter-spacing: .06em;
  color: var(--ff-licht-gedaempft);
  transition: color var(--ff-dauer-farbe) ease;
}
.lang button + button { border-left: 1px solid var(--ff-linie-dunkel); }
.lang button[aria-pressed="true"] { color: var(--ff-lampenlicht); text-decoration: underline; text-underline-offset: .3em; }
.lang button:hover { color: var(--ff-lampenlicht); }

/* Englische Besucher: Seite erst zeigen, wenn i18n.js die Texte getauscht hat */
html.i18n-wait body { visibility: hidden; }

@media (max-width: 480px) {
  .topbar { padding: 6px 12px 6px 16px; }
  .topbar-right { gap: 6px; }
  .topbar ul { gap: 4px; }
  .topbar nav a { padding: 0 6px; }
}
/* Sehr schmale Handys: "Edits" weglassen, die Liste steht direkt unter dem Banner */
@media (max-width: 360px) {
  .topbar nav li:first-child { display: none; }
}
/* Tippfläche mindestens 44 px hoch */
.topbar nav a {
  color: var(--ff-licht-gedaempft); text-decoration: none;
  font-size: .875rem; font-weight: 500;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
}
.topbar nav a:hover { color: var(--ff-lampenlicht); }

/* ---------- 2 Banner ---------- */

.banner img {
  width: 100%;
  /* 3,8 : 1 entspricht dem Bild; erst über 1444 px und unter 912 px wird minimal beschnitten */
  height: clamp(240px, 26.3vw, 380px);
  object-fit: cover;
  object-position: 60% 30%;
}
@media (max-width: 820px) {
  .banner img { height: auto; }
}

/* ---------- Inhaltsfläche ---------- */

.sheet {
  background: var(--ff-flaeche);
  color: var(--ff-text);
  border-top: var(--ff-uebergang);
  padding-bottom: 56px;
}
.sheet a { color: var(--ff-akzent); }
.sheet a:hover { color: var(--ff-text); }

/* ---------- 3 Identitätszeile ---------- */

.ident {
  display: grid;
  grid-template-columns: auto 1fr;
  /* Abstand rechnet die ausgefahrene Platte mit ein (ragt 14 % über das Logo hinaus) */
  gap: 44px;
  align-items: end;
  padding: 0 0 22px;
}
/* Plattenteller: Logo und Schallplatte dahinter. Läuft Musik, kommt die Platte
   hervor und dreht sich mit 33⅓ U/min, das Logo ist ihr Etikett (Drehung in app.js). */
.platte { position: relative; width: 148px; height: 148px; margin-top: -74px; }
.vinyl {
  position: absolute; inset: -14%; /* bleibt innerhalb des Seitenrands von 22 px */
  border-radius: 50%;
  background:
    /* Lichtreflex: steht still, während die Platte sich dreht, wie bei einer echten */
    conic-gradient(from 25deg, transparent 0 6%, rgb(240 200 146 / .14) 11%, transparent 16% 50%,
                   rgb(240 200 146 / .09) 61%, transparent 66%),
    /* glatte Einlaufrille am Rand und Rillen mit feiner Lichtkante */
    radial-gradient(circle, transparent 0 93%, #2b3230 93.5% 95%, transparent 95.5%),
    repeating-radial-gradient(circle, var(--ff-nacht) 0 1px, #1b201f 1px 1.6px, #262c2a 1.6px 2px);
  box-shadow: inset 0 0 0 2px #232927, inset 0 0 0 3px rgb(255 255 255 / .05), 0 10px 24px rgb(0 0 0 / .45);
  transform: scale(.78); opacity: 0; /* versteckt hinter dem Logo */
  transition: transform 700ms var(--ff-ease-out), opacity 200ms ease;
}
.platte.is-on .vinyl { transform: scale(1); opacity: 1; }

/* Rundes Logo: Plakette in festen Farben, unabhängig von der Helligkeitsstufe */
.logo {
  position: relative; /* über der Platte */
  width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #1f3538, var(--ff-ladengruen) 62%);
  border: 3px solid var(--ff-lampenlicht);
  box-shadow: inset 0 0 0 9px var(--ff-ladengruen), inset 0 0 0 11px var(--ff-glut);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--ff-lampenlicht);
  font-size: var(--ff-logo-size);
  line-height: 1;
  gap: .08em;
}
/* Sperrung hängt auch hinter dem letzten Buchstaben an; links ausgleichen, damit mittig */
.logo span { padding-left: var(--ff-display-tracking); }
/* Neben der Platte: Tagline, darunter der Ort (der Name steht im Logo) */
.who .claim { font-size: clamp(1.45rem, 3.2vw, 2.3rem); color: var(--ff-text); }
@media (max-width: 820px) { .who .claim span { display: block; } } /* Umbruch nach dem Komma */
@media (max-width: 400px) { .who .claim { font-size: 1.3rem; } }
@media (max-width: 340px) { .who .claim { font-size: 1.16rem; } }
@media (max-width: 820px) { .who { padding-top: 14px; } } /* Luft zur Kante des Banners */
.who .ort { color: var(--ff-text-neben); font-size: .95rem; margin-top: 8px; }

.acts { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-block; text-decoration: none;
  font-weight: 600; font-size: .875rem;
  padding: 11px 18px;
  border: 2px solid var(--ff-text);
  /* Druck sofort spürbar machen, Farbwechsel weich */
  transition:
    transform var(--ff-dauer-druck) var(--ff-ease-out),
    background-color var(--ff-dauer-farbe) ease,
    border-color var(--ff-dauer-farbe) ease,
    color var(--ff-dauer-farbe) ease;
}
.btn:active { transform: scale(0.97); }
.sheet .btn { color: var(--ff-text); }
.sheet .btn-solid { background: var(--ff-akzent); border-color: var(--ff-akzent); color: var(--ff-auf-akzent); }
/* Hover nur bei Maus: auf Touch-Geräten bliebe die Füllung nach dem Tippen hängen */
@media (hover: hover) and (pointer: fine) {
  .sheet .btn:hover { background: var(--ff-text); color: var(--ff-flaeche); }
  .sheet .btn-solid:hover { background: var(--ff-text); border-color: var(--ff-text); color: var(--ff-flaeche); }
}

@media (max-width: 820px) {
  .ident { grid-template-columns: auto 1fr; gap: 6px 34px; }
  .platte { width: 104px; height: 104px; margin-top: -52px; align-self: start; }
  .logo {
    font-size: calc(var(--ff-logo-size) * .7);
    box-shadow: inset 0 0 0 7px var(--ff-ladengruen), inset 0 0 0 9px var(--ff-glut);
  }
  .who { align-self: end; }
}

/* ---------- 4 Reiter ---------- */

.tabs {
  display: flex; gap: 26px;
  border-bottom: 1px solid var(--ff-linie);
  overflow-x: auto;
}
.tabs [role="tab"] {
  padding: 14px 0 12px;
  font-weight: 600; font-size: .95rem;
  color: var(--ff-text-neben);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--ff-dauer-farbe) ease, border-color var(--ff-dauer-farbe) ease;
}
.tabs [role="tab"]:hover { color: var(--ff-text); }
.tabs [role="tab"][aria-selected="true"] { color: var(--ff-text); border-color: var(--ff-akzent); }

/* ---------- 5 Zwei Spalten ---------- */

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  gap: 44px;
  padding-top: 26px;
}
@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; gap: 36px; }
}

/* Abspielbereich: eigener Player, immer dunkel wie ein Gerät im Laden */
.player { margin-bottom: 22px; }
.deck {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px 20px;
  align-items: center;
  padding: 14px 18px;
  /* Gehäuse wie die Front eines Hi-Fi-Geräts: fein gebürstet, Licht von oben */
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .012) 0 1px, transparent 1px 3px),
    linear-gradient(#171c1b, var(--ff-nacht) 70%);
  border: 1px solid var(--ff-linie);
  border-radius: 10px; /* Gerät; die gedruckten Flächen bleiben eckig */
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), 0 10px 24px rgb(0 0 0 / .35);
  color: var(--ff-lampenlicht);
}
.meters { display: flex; gap: 10px; }
.vu {
  display: block; width: 120px; height: 72px;
  border-radius: 4px;
  /* Rahmen des Instruments, leicht eingelassen */
  box-shadow: 0 0 0 2px #232927, 0 0 0 3px #39403d, 0 4px 10px rgb(0 0 0 / .6);
}

/* VU-Meter: beleuchtete Skala in Lampenlicht, Zeichnung in Nacht, Übersteuerung in Backstein.
   Kontrast Zeichnung auf Skala 12,4:1, Rot auf Skala 4,3:1 */
.vu-face { fill: url(#vu-licht); }
.vu-bogen { fill: none; stroke: var(--ff-nacht); stroke-width: 1.1; }
.vu-rot { fill: none; stroke: var(--ff-vu-rot); stroke-width: 3; }
.vu-ticks line { stroke: var(--ff-nacht); stroke-width: 1; }
.vu-ticks line.rot { stroke: var(--ff-vu-rot); }
.vu-ticks text {
  font: 600 6px var(--ff-font-text);
  fill: var(--ff-nacht);
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}
.vu-ticks text.rot { fill: var(--ff-vu-rot); }
.vu-sockel { fill: var(--ff-ladengruen); }
.vu-name {
  font: 400 7.5px var(--ff-font-display);
  letter-spacing: .12em;
  fill: var(--ff-lampenlicht);
  text-anchor: middle;
}
.vu-label { font: 600 5.5px var(--ff-font-text); fill: var(--ff-licht-gedaempft); text-anchor: middle; }
.vu-nadel { stroke: var(--ff-nacht); stroke-width: 1.2; stroke-linecap: round; }
.vu-schatten { stroke: rgb(60 35 10 / .28); stroke-width: 1.6; } /* fällt auf die Skala */

.deck-title {
  font-family: var(--ff-font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 1.3rem;
  line-height: 1.15;
}
.deck-sub { color: var(--ff-licht-gedaempft); font-size: .85rem; margin-top: 2px; }
.deck-controls { display: flex; align-items: center; gap: 12px; margin-top: 10px; }

.deck-play {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  /* gewölbter Knopf, Licht von oben links */
  background: radial-gradient(circle at 35% 28%, #F4B575, var(--ff-glut) 55%, #B4692A);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 2px 5px rgb(0 0 0 / .5);
  color: var(--ff-nacht);
  transition: transform var(--ff-dauer-druck) var(--ff-ease-out), background-color var(--ff-dauer-farbe) ease;
}
.deck-play:active { transform: scale(0.95); }
.deck-play:disabled { opacity: .4; cursor: default; transform: none; }
.deck-play svg { width: 16px; height: 16px; fill: currentColor; }
.deck-play .ic-pause { display: none; }
.deck-play.is-playing .ic-pause { display: block; }
.deck-play.is-playing .ic-play { display: none; }
@media (hover: hover) and (pointer: fine) {
  .deck-play:not(:disabled):hover { background: var(--ff-lampenlicht); }
}

.deck-seek { flex: 1; min-width: 0; height: 24px; accent-color: var(--ff-glut); cursor: pointer; }
.deck-seek:disabled { opacity: .4; cursor: default; }
.deck-time {
  flex: none;
  color: var(--ff-licht-gedaempft); font-size: .85rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .deck { grid-template-columns: 1fr; }
  .meters { justify-content: center; }
  .vu { width: calc(50% - 4px); max-width: 150px; height: auto; }
}

/* Trackliste */
.tracks { border-top: 1px solid var(--ff-linie); }
.track {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr) auto;
  gap: 4px 14px;
  align-items: baseline;
  width: 100%;
  padding: 13px 8px;
  text-align: left;
  border-bottom: 1px solid var(--ff-linie);
  transition: background-color var(--ff-dauer-zustand) ease;
}
.track:active { background: var(--ff-hover); }
@media (hover: hover) and (pointer: fine) {
  .track:hover { background: var(--ff-hover); }
}
.track .no {
  color: var(--ff-text-neben); font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
.track .ttl {
  font-family: var(--ff-font-display);
  font-weight: var(--ff-title-weight);
  text-transform: var(--ff-title-transform);
  letter-spacing: var(--ff-title-tracking);
  font-size: var(--ff-title-size);
  line-height: 1.3;
  transition: color var(--ff-dauer-zustand) ease;
}
.track .meta {
  color: var(--ff-text-neben); font-size: .85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.track[aria-current="true"] { background: var(--ff-aktiv); }
.track[aria-current="true"] .ttl { color: var(--ff-akzent); }
/* Laufender Titel: gezeichnetes Abspielzeichen statt Unicode-Glyphe */
.track[aria-current="true"] .no::before {
  content: "";
  display: inline-block;
  width: .62em; height: .72em;
  margin-right: .4em;
  background: var(--ff-akzent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M1 1.2v9.6c0 .5.5.8.9.5l7.6-4.8c.4-.3.4-.8 0-1.1L1.9.7C1.5.4 1 .7 1 1.2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M1 1.2v9.6c0 .5.5.8.9.5l7.6-4.8c.4-.3.4-.8 0-1.1L1.9.7C1.5.4 1 .7 1 1.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 560px) {
  .track { grid-template-columns: 2em minmax(0, 1fr); }
  .track .meta { grid-column: 2; }
}
.tracks-status { margin-top: 14px; color: var(--ff-text-neben); font-size: .9rem; }

/* ---------- Mini-Player ----------
   Leiste am unteren Rand, sobald die Titel geladen sind; vor dem ersten Abspielen
   steht dort Titel 1. Kleine Platte dreht mit, das Pegelband zeigt das VU-Signal (L oben, R unten). */
.mini {
  position: fixed; z-index: 200; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 14px;
  /* Inhalt auf breiten Schirmen in der Breite der Seite, nicht am Rand */
  padding: 12px max(22px, calc((100% - var(--ff-wrap)) / 2 + 22px));
  background: linear-gradient(#171c1b, var(--ff-nacht) 60%);
  border-top: 2px solid var(--ff-backstein);
  border-radius: 12px 12px 0 0; /* Gerät, das von unten hereinkommt */
  box-shadow: 0 -8px 24px rgb(0 0 0 / .4);
  transform: translateY(110%); visibility: hidden;
  transition: transform 260ms var(--ff-ease-out), visibility 0s linear 260ms;
}
.mini.is-an { transform: none; visibility: visible; transition: transform 260ms var(--ff-ease-out); }
html.mini-offen body { padding-bottom: 92px; } /* Fußzeile bleibt erreichbar */
.mini-platte {
  flex: none; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background:
    conic-gradient(from 25deg, transparent 0 6%, rgb(240 200 146 / .14) 11%, transparent 16% 50%,
                   rgb(240 200 146 / .09) 61%, transparent 66%),
    repeating-radial-gradient(circle, var(--ff-nacht) 0 1px, #1b201f 1px 1.6px, #262c2a 1.6px 2px);
  box-shadow: inset 0 0 0 1px #2a302e, 0 2px 6px rgb(0 0 0 / .6);
}
.mini-etikett {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ff-ladengruen);
  box-shadow: 0 0 0 2px var(--ff-lampenlicht);
  color: var(--ff-lampenlicht);
  font-family: var(--ff-font-display); font-size: .78rem; letter-spacing: .04em;
}
.mini-titel {
  flex: 1; min-width: 0; min-height: 44px;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  text-align: left; color: var(--ff-lampenlicht);
}
.mini-name {
  font-family: var(--ff-font-display); text-transform: uppercase; letter-spacing: .02em;
  font-size: 1.2rem; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-zeit { color: var(--ff-licht-gedaempft); font-size: .8rem; font-variant-numeric: tabular-nums; }
.mini-pegel { display: grid; gap: 3px; width: 100%; max-width: 560px; }
.mini-pegel span {
  height: 4px; border-radius: 2px;
  /* Bis 0 VU Lampenlicht, darüber Rot, wie auf der Skala */
  background: linear-gradient(90deg, var(--ff-lampenlicht) 0 70.8%, var(--ff-vu-rot) 70.8%);
  clip-path: inset(0 100% 0 0);
}
.mini-play { flex: none; width: 56px; height: 56px; }
.mini-play svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) {
  .mini, .mini.is-an { transition: visibility 0s; }
}

.about h2 { font-size: 1.4rem; margin-bottom: 14px; }
.about p { max-width: 62ch; margin-bottom: 12px; }

/* Seitenspalte */
.side-block { padding: 18px 0; border-top: 1px solid var(--ff-linie); }
.side-block:first-child { border-top: 0; padding-top: 0; }
.side h2 {
  font-family: var(--ff-font-text);
  font-weight: 600; font-size: .95rem;
  letter-spacing: 0; text-transform: none;
  color: var(--ff-text-neben);
  margin-bottom: 8px;
}
.side p { font-size: .95rem; }
.nums { display: flex; gap: 30px; }
.nums p { color: var(--ff-text-neben); font-size: .875rem; display: flex; flex-direction: column-reverse; }
.nums b {
  font-family: var(--ff-font-display);
  font-weight: var(--ff-display-weight);
  font-size: 2rem; line-height: 1.1;
  color: var(--ff-text);
  font-variant-numeric: tabular-nums;
}
/* E-Mail in der Seitenspalte: Tippfläche mindestens 44 px hoch */
.side-block > p > a[href^="mailto:"] {
  display: inline-flex; align-items: center; min-height: 44px;
}

/* ---------- Trennstreifen ---------- */

.stripes {
  height: 21px;
  background:
    linear-gradient(var(--ff-backstein), var(--ff-backstein)) top / 100% 5px no-repeat,
    linear-gradient(var(--ff-glut), var(--ff-glut)) center / 100% 5px no-repeat,
    linear-gradient(var(--ff-lampenlicht), var(--ff-lampenlicht)) bottom / 100% 5px no-repeat;
}

/* ---------- 6 Abschluss ---------- */

.closing { position: relative; overflow: hidden; }
.closing-img img {
  width: 100%; height: clamp(260px, 22vw, 360px);
  object-fit: cover; object-position: 50% 40%;
}
.closing::after {
  /* stark abgedunkelt, damit der Text darüber lesbar bleibt */
  content: ""; position: absolute; inset: 0;
  background: rgba(11, 14, 13, .8);
}
.closing-text {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 24px 22px;
}
/* Abschlussband: nur noch der Beschreibungstext, die Tagline steht oben neben der Platte */
.closing-text p {
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem); line-height: 1.55;
}

/* ---------- 7 Fußzeile ---------- */

.footer { padding: 26px 0 40px; font-size: .875rem; color: var(--ff-licht-gedaempft); }
.footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0 12px; }
.footer ul { display: flex; gap: 18px; }
.footer a {
  color: var(--ff-licht-gedaempft);
  display: inline-flex; align-items: center; min-height: 44px;
}
.footer a:hover { color: var(--ff-lampenlicht); }

/* Weniger Bewegung: Druck-Skalierung und weiches Scrollen entfallen,
   Farb- und Deckkraftwechsel bleiben, weil sie den Zustand zeigen. */
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
  .vinyl { transition: opacity 200ms ease; } /* Platte erscheint, gleitet aber nicht */
}

/* Ohne JavaScript bleibt das Banner im noscript-Ersatz; die Bilder mit Tageszeit-Wahl haben dann keine Quelle */
html:not(.js) .banner picture { display: none; }

/* ---------- Impressum und Datenschutz ---------- */

.legal { max-width: 72ch; padding-top: 44px; }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 26px; }
.legal h2 { font-size: 1.35rem; margin: 34px 0 10px; }
.legal h3 { font-size: 1rem; font-weight: 600; margin: 20px 0 6px; }
.legal p, .legal ul { margin-bottom: 12px; }
.legal ul { list-style: disc; padding-left: 1.3em; }
.legal address { font-style: normal; margin-bottom: 12px; }
.legal .back { margin-top: 40px; }
.legal .lang-hinweis { color: var(--ff-text-neben); font-size: .9rem; margin: -14px 0 22px; }

/* Platzhalter: auffällig, damit vor dem Livegang nichts übersehen wird */
.platzhalter {
  background: #FFE07A;
  color: #1A1A1A;
  padding: 0 .25em;
  font-weight: 600;
}