/* ════════════════════════════════════════════════════════════════════════════════════════════
   MELOGNITE — GERAETEPROFILE: die zwei Optik-Sparstufen + das Bedienfeld   Stand 2026-08-03
   Gehoert zu /shared/melognite-profile.js. Gemeinsam fuer ALLE Genres.

   ── DIE REGEL, DIE DIESE DATEI TRAEGT ────────────────────────────────────────────────────
   Auf JEDER Stufe bleibt es das Genre. Weggenommen wird nur, was den Compositor beschaeftigt
   und fast keinen Wiedererkennungswert traegt: Dauer-Animationen, mitlaufender Hintergrund,
   Weichzeichner, Schattenstapel, grossflaechige Texturen.
   Es bleiben: Farbpalette, Typografie, Anordnung, Bedienelemente, alle Sinnbilder.

   Gemessen am 2026-08-03 (Live-Instanzen, berechnete Stile ueber ~770 Elemente je Genre):
       Dauer-Animationen  42 in JEDEM Genre
       box-shadow         reggae 123 · hiphop 64 · pop 91 · metalcore 137 · techno 131
       filter             reggae 13 · hiphop 14 · pop 2 · metalcore 34 · techno 14
       background-fixed   1 (body) je Genre

   ── ⚠ DIE ERSATZFARBEN-PFLICHT ───────────────────────────────────────────────────────────
   Die Skins setzen ihre Flaechen mit der Kurzform `background:url(...)`. Diese Kurzform setzt
   `background-color` MIT ZURUECK. Wer nur das Bild entfernt, bekommt eine DURCHSICHTIGE
   Flaeche -- am 2026-08-02 zweimal an einem Abend passiert (Splash durchsichtig, Panels
   durchsichtig).
   Deshalb: JEDE Regel, die hier ein Hintergrundbild entfernt, setzt im selben Atemzug eine
   Farbe. Und zwar nicht irgendeine, sondern die per Canvas gemessene MITTLERE FARBE DER
   TEXTUR SELBST -- die Flaeche wirkt dadurch wie dasselbe Material, nur vereinfacht.

   ⚠ Der SPLASH wird bewusst NICHT entkleidet. Sein Hintergrund besteht nur aus Verlaeufen
   (= background-image); er erscheint einmal vor dem ersten Ton und kostet beim Scrollen
   nichts. Genau hier lag am 02.08. der Durchsichtig-Fehler.

   ── SPEZIFITAET ──────────────────────────────────────────────────────────────────────────
   Die Genre-Skins tragen 453-659 `!important`-Regeln ueber Nachfahren-Selektoren. Ein
   schlichtes `html.x .panel{...!important}` verliert dagegen. `[class][class][class]` hebt die
   Spezifitaet ohne die Abstammung zu aendern (kein neuer Wrapper -- das ist die Bauregel der
   gemeinsamen Schicht).
   ════════════════════════════════════════════════════════════════════════════════════════════ */

/* ══ STUFE "calm" — die Bewegung hoert auf ══════════════════════════════════════════════════
   Trifft die 42 Dauer-Animationen, den mitlaufenden Hintergrund und die Weichzeichner.
   Texturen, Schatten und Farben bleiben vollstaendig. */
/* 07.08. abends: :not(.rlflash) -- das EINMALIGE, ereignisgesteuerte Gold-Aufleuchten des
   Reload-Knopfs (0,5 s, ein Element, Doktrin-2.1-konform) war hier mitgetoetet (Eigentuemer:
   "Feedback defekt"). Die Keyframe-Namen sind je Genre verschieden (rlGold/rlpulse/rlspin),
   darum die Ausnahme am Kill-Selektor statt einer Ersatz-Animation. */
/* 10.08.: zweite Ausnahme, gleiche Begruendung wie .rlflash -- der EINMALIGE
   Taschenlampen-Sweep ueber die Stil-Reiter (.tabs.sweep::before, jetzt 1 x 1,7 s,
   EIN Element, laeuft vor dem ersten Ton). Ohne sie bliebe animation-name:none.
   ⚠ Die Ausnahme haengt am ELTERNTEIL: ein ::before laesst sich nicht selbst
     mit :not() ausnehmen. */
html.mgn-vis-calm[class][class][class] *:not(.rlflash):not(.sweep),
html.mgn-vis-calm[class][class][class] *:not(.sweep)::before,
html.mgn-vis-calm[class][class][class] *:not(.sweep)::after,
html.mgn-vis-flat[class][class][class] *:not(.rlflash):not(.sweep),
html.mgn-vis-flat[class][class][class] *:not(.sweep)::before,
html.mgn-vis-flat[class][class][class] *:not(.sweep)::after{
  animation: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  mix-blend-mode: normal !important;
}
/* Der mitlaufende Hintergrund ist in Doktrin 2.1 namentlich verboten -- er zwingt den
   Compositor, bei JEDEM Scroll-Schritt neu zu zeichnen. */
html.mgn-vis-calm[class][class][class] body,
html.mgn-vis-flat[class][class][class] body{
  background-attachment: scroll !important;
}

/* ══ STUFE "flat" — zusaetzlich: keine Schatten, keine grossen Texturen ════════════════════ */
/* 07.08. abends: :not(.rlflash) auch hier -- die Blitz-Animation des Reload-Knopfs lebt
   von box-shadow-Keyframes; !important schlaegt Animationen, also Ausnahme am Selektor. */
html.mgn-vis-flat[class][class][class] *:not(.rlflash),
html.mgn-vis-flat[class][class][class] *::before,
html.mgn-vis-flat[class][class][class] *::after{
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Die grossen Flaechen: Bild raus, gemessene Materialfarbe rein.
   Kleine Sinnbilder (Knopf-Gesichter, Plaketten, Reiter) bleiben unberuehrt -- sie tragen die
   Bedienung, sind winzig und kosten beim Scrollen praktisch nichts. */
html.mgn-vis-flat[class][class][class] body,
html.mgn-vis-flat[class][class][class] .panel,
html.mgn-vis-flat[class][class][class] details.adv{
  background-image: none !important;
  background-attachment: scroll !important;
}

/* ── Ersatzfarben je Genre (per Canvas aus der jeweiligen Textur gemessen, 2026-08-03) ──────
   Reihenfolge: Grundflaeche (body) und Bedienflaeche (.panel/details.adv).
   Ohne data-genre greift der neutrale Rueckfall am Ende. */

/* reggae — Spanplatte "board.webp" (Mittelwert #c0a484); der Grund bleibt sein Verlauf. */
html[data-genre="reggae"].mgn-vis-flat[class][class][class] .panel,
html[data-genre="reggae"].mgn-vis-flat[class][class][class] details.adv{
  background-color: #c0a484 !important;
}
html[data-genre="reggae"].mgn-vis-flat[class][class][class] body{
  background-color: #17110b !important;   /* mittlerer Stopp des Rahmen-Verlaufs der Skin */
}

/* techno — teilt die Reggae-Werkstatt-Skin. */
html[data-genre="techno"].mgn-vis-flat[class][class][class] .panel,
html[data-genre="techno"].mgn-vis-flat[class][class][class] details.adv{
  background-color: #c0a484 !important;
}
html[data-genre="techno"].mgn-vis-flat[class][class][class] body{
  background-color: #17110b !important;
}

/* ⚠ WICHTIG BEI DEN FOLGENDEN WERTEN: die rohe Textur ist NICHT das, was der Nutzer sieht.
   Jede Skin legt Verlaeufe darueber -- pop hellt mit rgba(255,252,244,.58) auf, metalcore
   dunkelt mit rgba(0,0,0,.66) ab. Ein erster Entwurf nahm die per Canvas gemessene ROHFARBE
   der Textur; pop waere dadurch deutlich zu dunkel und metalcore zu hell geworden. Die Werte
   hier stammen darum aus den zusammengesetzten Verlaufs-Stopps der Skins selbst. */

/* hiphop — Kurzform-Farbe der body-Regel, Panel aus der Mitte seines Verlaufs. */
html[data-genre="hiphop"].mgn-vis-flat[class][class][class] body{
  background-color: #0b0a10 !important;
}
html[data-genre="hiphop"].mgn-vis-flat[class][class][class] .panel,
html[data-genre="hiphop"].mgn-vis-flat[class][class][class] details.adv{
  background-color: #0e0d16 !important;
}

/* pop — das EINZIGE helle Genre. Rohtextur waere #bcab9b, sichtbar ist sie unter zwei
   aufhellenden Verlaufsschichten -- daher die cremefarbenen Werte. */
html[data-genre="pop"].mgn-vis-flat[class][class][class] body{
  background-color: #f6f0e2 !important;
}
html[data-genre="pop"].mgn-vis-flat[class][class][class] .panel,
html[data-genre="pop"].mgn-vis-flat[class][class][class] details.adv{
  background-color: #fcf9f2 !important;
}

/* metalcore — Werkstatt unter 66 % Schwarz; Rostblech-Mitte aus --mtl-lo. */
html[data-genre="metalcore"].mgn-vis-flat[class][class][class] body{
  background-color: #140e07 !important;
}
html[data-genre="metalcore"].mgn-vis-flat[class][class][class] .panel,
html[data-genre="metalcore"].mgn-vis-flat[class][class][class] details.adv{
  background-color: #282219 !important;
}

/* Neutraler Rueckfall, falls ein Genre kein data-genre traegt: lieber eine ruhige dunkle
   Flaeche als eine durchsichtige. */
html.mgn-vis-flat[class][class][class] body{ background-color: #14110d; }
html.mgn-vis-flat[class][class][class] .panel,
html.mgn-vis-flat[class][class][class] details.adv{ background-color: #2a2622; }

/* ⚠ Die Kanten muessen bleiben. Ohne Schatten ist die 1-px-Linie das EINZIGE, was eine
   Bedienflaeche noch als Flaeche lesbar macht (Gestaltgesetz: Umschliessung ersetzt Tiefe).
   Ohne das wirkt "flat" nicht sparsam, sondern kaputt. */
html.mgn-vis-flat[class][class][class] .panel,
html.mgn-vis-flat[class][class][class] details.adv{
  border: 1px solid var(--ln, rgba(255,255,255,.14)) !important;
}


/* ══ SCROLL-KOSTEN: nicht sichtbare Abschnitte ueberspringen ═══════════════════════════════
   Der am Geraet gemeldete Ausloeser ist das SCROLLEN, nicht das Abspielen -- und der Nachhall
   ("braucht 2 Sekunden nach Ende des Scrollens, bis wieder stabil") ist der Rueckstau, der
   abfliesst. Die Seite traegt rund 770 Elemente in einer langen Spalte; beim Scrollen muss der
   Browser fuer jedes davon Layout und Malarbeit vorhalten.

   `content-visibility:auto` laesst ihn Layout UND Malen fuer alles ueberspringen, was gerade
   nicht im Bild ist. Das ist der einzige Hebel hier, der die Scroll-Kosten an der Wurzel senkt,
   statt Dekoration wegzunehmen -- er aendert das Aussehen nicht.

   ⚠ `contain-intrinsic-size: auto <len>` ist PFLICHT: ohne eine Platzhaltergroesse kollabieren
   ausgeblendete Abschnitte auf 0 und die Bildlaufleiste springt beim Scrollen. Das Schluesselwort
   `auto` laesst den Browser die zuletzt gemessene Groesse merken -- nach dem ersten Sichtkontakt
   stimmt sie exakt.

   ⚠ Nebenwirkung, die geprueft werden MUSS: content-visibility erzwingt Paint-Containment und
   BESCHNEIDET damit Ueberlaeufe. Ragt eine Zierde ueber ihren Behaelter hinaus (Schatten,
   ueberstehende Regler-Kappe), waere sie abgeschnitten. Deshalb ist diese Stufe nach dem Bau
   mit einem BILDVERGLEICH gegen den Zustand ohne sie geprueft worden.

   Nur direkte Kinder der Einheit -- verschachtelte Behaelter wuerden ihren Zusammenhang verlieren.
   Tuer: ?cv=0 */
html.mgn-cv .unit > .panel,
html.mgn-cv .unit > details.adv{
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

/* ══ OPTIK-FEINSCHLIFF: zwei am 2026-08-03 per RasterTask-Tracing gemessene Hebel ════════════
   Die flat/calm-Regeln oben decken sie NICHT ab. Deshalb hier, je hinter einer eigenen OPT-IN
   Tuer (Default AUS), bis das Auge des Eigentuemers sie abnimmt -- beide aendern das Bild
   messbar, und ein Hebel, von dem ich WEISS, dass er das Bild aendert, darf nicht unbemerkt
   Standard sein (dieselbe Regel wie beim content-visibility-Hebel). Danach kippt ein Einzeiler
   in melognite-profile.js den Default. Gemessen an metalcore, flat-Basis 107 ms Raster.

   (1) ?before=1  ->  html.mgn-vx-before
   Die Flaechen tragen dekorative ::before-Auflagen (Textur/Verlauf ueber der Grundflaeche). Die
   flat-Regel nullt background-image nur auf .panel/details.adv SELBST, nicht auf deren ::before.
   Messung: .panel/details.adv::before aus = 48 ms (-55 %). */
html.mgn-vx-before.mgn-vis-flat[class][class][class] .panel::before,
html.mgn-vx-before.mgn-vis-flat[class][class][class] details.adv::before{
  content: none !important;              /* die Auflage ganz weglassen -- kein Kasten, keine Malarbeit */
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* (2) ?blend=1  ->  html.mgn-vx-blend
   Die calm/flat-Regel setzt mix-blend-mode:normal, aber NICHT background-blend-mode -- das andere
   fehlt schlicht (in metalcore 93 Elemente, 1308 kpx). Wirkt in ALLEN Genres.
   Messung: 77 ms (-29 %). */
html.mgn-vx-blend.mgn-vis-calm[class][class][class] *,
html.mgn-vx-blend.mgn-vis-calm[class][class][class] *::before,
html.mgn-vx-blend.mgn-vis-calm[class][class][class] *::after,
html.mgn-vx-blend.mgn-vis-flat[class][class][class] *,
html.mgn-vx-blend.mgn-vis-flat[class][class][class] *::before,
html.mgn-vx-blend.mgn-vis-flat[class][class][class] *::after{
  background-blend-mode: normal !important;
}

/* ══ REPARATUR: unlesbare Abschnitts-Ueberschriften in reggae ══════════════════════════════
   Beim Kontrast-Messen am 2026-08-03 aufgefallen und NICHT von den Sparstufen verursacht --
   der Fehler steht seit dem 02.08. auch in der vollen Optik live:

   `melognite-shell.css` setzt `.mgn-sec{ color: inherit }` (bewusst, damit kein Skin
   ueberschrieben werden muss). Die Ueberschriften stehen aber NICHT auf einer Bedienflaeche,
   sondern auf dem GRUND zwischen den Flaechen. In reggae erbt `.unit` eine dunkle Tinte
   (rgb(43,28,8)) -- richtig fuer die helle Spanplatte, unlesbar auf dem dunklen Grund:
   gemessener Kontrast **1,27** (voll) bzw. **1,13** (flach). Betrifft die Titel
   "Sound / Song / Details / Plan / Performance".

   ⚠ Gilt AUSDRUECKLICH NUR fuer reggae (und reggae-next, gleiches data-genre).
   hiphop 17,3 · metalcore 18,95 · techno 17,66 sind bereits hell und in Ordnung.
   Und `--txt` waere fuer **pop** genau falsch: pop ist das einzige helle Genre, dort ergaebe
   die Variable Weiss auf Creme (Kontrast 1,01). Eine pauschale Regel haette pop zerstoert.

   Nicht auf die Sparstufen beschraenkt -- der Fehler existiert in jeder Stufe.
   ⚠ Braucht denselben Spezifitaets-Hebel wie die Sparstufen: ein schlichtes
   `html[data-genre] .mgn-sec` verliert gegen die Skin-Regel (nachgemessen -- die Farbe blieb
   unveraendert bei rgb(43,28,8)).

   ⚠⚠ UND `var(--txt)` ist hier die FALSCHE Quelle -- zweimal nachgemessen, zweimal ohne
   Wirkung. Grund: `--txt` loest am ELEMENT auf, und reggae setzt die Variable im
   `body[data-stil]`-Block auf genau diese dunkle Tinte. Das ist dort auch richtig: reggae ist
   ein "helle Holzflaechen im dunklen Rahmen"-Entwurf, seine Schrift lebt auf den Flaechen.
   Die Abschnitts-Ueberschriften sind der einzige Text, der auf dem RAHMEN steht -- fuer ihn
   gibt es im Token-Satz der Skin schlicht keine Farbe. Deshalb hier ein expliziter Wert aus
   derselben Holz-Palette (heller als die Spanplatte #c0a484), Kontrast ~13,6 auf #17110b. */
html[data-genre="reggae"][class][class][class] .mgn-sec,
html[data-genre="reggae"][class][class][class] .mgn-sec span,
html[data-genre="reggae"][class][class][class] .mgn-sec small{
  color: #e8dcc4 !important;
}


/* ══ DAS BEDIENFELD ════════════════════════════════════════════════════════════════════════
   Erbt Farbe und Schrift aus der Skin (var(--acc) &c.) -- dadurch traegt es in jedem Genre
   dessen Handschrift, ohne dass hier fuenf Fassungen stehen muessten. */
.mgn-prof{
  display: block;
  margin: 0 0 calc(var(--u, 1px) * 18);
  padding: calc(var(--u, 1px) * 14);
  border: 1px solid var(--ln, rgba(255,255,255,.14));
  border-radius: calc(var(--u, 1px) * 10);
  background: var(--surf, rgba(0,0,0,.18));
}
/* <fieldset>/<legend> tragen die Gruppenzugehoerigkeit fuer Bildschirmleser -- ihre
   Browser-Voreinstellungen (Rahmen, Innenabstand, Umbruchverhalten der Legende) muessen dafuer
   zurueckgesetzt werden. */
.mgn-prof-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u, 1px) * 10);
  padding: calc(var(--u, 1px) * 8) 0;
  margin: 0;
  border: 0;
  min-width: 0;
}
.mgn-prof-row + .mgn-prof-row{ border-top: 1px solid var(--ln, rgba(255,255,255,.10)); }
.mgn-prof-lab{
  flex: 1 1 40%;
  min-width: 120px;
  float: left;            /* <legend> ordnet sich sonst ueber die volle Breite an */
  padding: 0;
}
.mgn-prof-lab span{
  display: block;
  font-family: var(--display, system-ui, sans-serif);
  font-size: 15px; line-height: 1.2;
  color: var(--txt, #eee);
}
.mgn-prof-lab small{
  display: block; margin-top: 2px;
  font-size: 12px; line-height: 1.3;
  color: var(--hnt, #999);
}
.mgn-prof-seg{ display: flex; flex: 1 1 55%; gap: calc(var(--u, 1px) * 6); }

/* Trefferflaeche mindestens 44 px hoch (WCAG 2.5.8 / Fitts). Kein Verlauf, kein Schatten --
   die Auswahl wird ueber Farbe und Kante gezeigt, das kostet den Compositor nichts. */
.mgn-prof-btn{
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-height: 44px;
  padding: 6px 8px;
  cursor: pointer;
  text-align: left;
  border: 1px solid var(--ln, rgba(255,255,255,.16));
  border-radius: calc(var(--u, 1px) * 7);
  background: transparent;
  color: var(--lab, #ccc);
  font-family: var(--body-f, system-ui, sans-serif);
  transition: border-color .12s linear, color .12s linear;
}
/* Die echte Eingabe bleibt bedienbar und fokussierbar, wird aber vom Etikett verdeckt --
   nicht `display:none`, das nimmt ihr die Tastaturbedienung. */
.mgn-prof-btn input{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.mgn-prof-btn b{
  display: block;
  font-size: 13px; font-weight: 600; line-height: 1.2;
}
.mgn-prof-btn small{
  display: block; margin-top: 1px;
  font-size: 11px; line-height: 1.25;      /* 11 px ist die Untergrenze des Projekts */
  color: var(--hnt, #8f8f8f);
}
.mgn-prof-btn:has(input:checked){
  border-color: var(--acc, #d8a24a);
  color: var(--txt, #fff);
}
/* ⭐ 06.08. (Eigentuemer, reggae-next): "aktive Auswahl im Performance-Menue braucht hellen Rand".
   Die Akzentfarbe der Reggae-Skin ist ein gedecktes Gold auf dunklem Grund -- als 1-px-Kante gegen
   die ebenfalls gedeckte Ruhekante kaum zu unterscheiden. Heller Rand + minimale Flaechenaufhellung
   machen die Wahl eindeutig, ohne Schatten (flat entfernt box-shadow) und ohne Sprung im Layout
   (gleiche Randstaerke, nur andere Farbe).
   ⚠ AUSDRUECKLICH NUR reggae: pop ist das einzige helle Genre -- ein heller Rand auf seiner
   cremefarbenen Flaeche (#fcf9f2) waere unsichtbar und haette den Punkt dort verschlimmert.
   Dieselbe Ueberlegung wie bei den Ersatzfarben weiter oben. */
/* 06.08. nachgeschaerft (Eigentuemer: "muss deutlicher hervorgehoben sein"): 1px Rand reichte
   nicht. Jetzt heller Doppelrand (border + innenliegende outline -- kein Layout-Sprung),
   deutlich hellere Flaeche und fette Schrift. Weiter NUR reggae (pop ist hell). */
html[data-genre="reggae"][class][class][class] .mgn-prof-btn:has(input:checked){
  border-color: #f2e8cf !important;
  outline: 2px solid #f2e8cf !important;
  outline-offset: -2px !important;
  background: rgba(242,232,207,.20) !important;
}
html[data-genre="reggae"][class][class][class] .mgn-prof-btn:has(input:checked) b{
  color: #ffffff !important;
}
.mgn-prof-btn:has(input:checked) small{ color: var(--lab, #bbb); }
/* Rueckfall fuer Browser ohne :has() -- der Fokusring bleibt in jedem Fall sichtbar. */
.mgn-prof-btn:focus-within{
  outline: 2px solid var(--acc, #d8a24a);
  outline-offset: 2px;
}
.mgn-prof-foot,
.mgn-prof-say{
  margin: calc(var(--u, 1px) * 8) 0 0;
  font-size: 12px; line-height: 1.35;
  color: var(--hnt, #8f8f8f);
}
.mgn-prof-say{ color: var(--acc, #d8a24a); }

/* Wer weniger Bewegung wuenscht, bekommt sie auch hier nicht. */
@media (prefers-reduced-motion: reduce){
  .mgn-prof-btn{ transition: none; }
}