/* ═══════════════════════════════════════════════════════════════════════════
   Powerkapsel — ÜBERSTEUERUNGS-SCHICHT. Lädt als LETZTES Stylesheet.

   WARUM ES DIESE DATEI GIBT
       pk-original.css ist der eingefrorene Original-Look der React-Seite und
       wird nicht angefasst. Alles, was danach am Verhalten oder am Bild
       korrigiert wurde, steht HIER — jede Übersteuerung mit Begründung.

       TEIL A · Scroll-Sanftheit (2026-08-08) — Abschnitte 1 bis 8.
                Diese Abschnitte löschen = exakt das alte, zitternde Verhalten.
       TEIL B · Bildwelt (2026-08-10) — Abschnitt 9.
                Diesen Abschnitt löschen = doppelte Schatten und falsche Größen.

   DER KERN-BEFUND (2026-08-08, Ultracode-Diagnose nach Olivers Zitter-Meldung)
       Zwei BILDSCHIRMFESTE Schichten trugen einen MISCH-MODUS:
         · das Filmkorn über der ganzen Seite  (#root:after, mix-blend-mode:overlay)
         · das Zeiger-Leuchten                 ([data-leuchten], mix-blend-mode:screen)
       Ein Misch-Modus auf einem position:fixed-Element zwingt den Browser,
       die feste Schicht bei JEDEM Scroll-Bild neu mit dem darunter
       durchlaufenden Seiteninhalt zu verrechnen — das Scrollen verliert
       seinen schnellen Compositor-Weg. DAS war das Ganzseiten-Zittern;
       JavaScript-Bremsen konnten daran nichts ändern.
       ⛔ Regel für alle künftigen Seiten: FEST + MISCH-MODUS = VERBOT
       (Effekt-Bibliothek Teil A, Scroll-Sanftheit).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Filmkorn: bleibt, aber ohne Misch-Modus und nicht mehr bildschirmfest.
       Als absolute Schicht wird es EINMAL mit in die Seite gemalt und kostet
       beim Scrollen nichts mehr. Ohne den Overlay-Modus wirkt dieselbe
       Körnung eine Spur direkter, daher Deckkraft von .04 auf .03. */
#root:after{
  position:absolute;
  mix-blend-mode:normal;
  opacity:.03;
}

/* ── 2 · Zeiger-Leuchten: Misch-Modus raus (Screen-Aufhellung → normale
       Transparenz). Es folgt dem Zeiger und MUSS fest bleiben, also muss
       der Misch-Modus weichen. Der goldene Schein über den durchgehend
       dunklen Flächen dieser Seite sieht ohne Screen fast gleich aus.
       Eigene Schicht, weil es dauerhaft gleitet. */
[data-leuchten]{
  mix-blend-mode:normal !important;   /* !important: übersteuert den Inline-Stil im HTML */
  will-change:transform;
}

/* ── 3 · Glas-Leiste: der Weichzeichner wird NIE animiert (Effekt-Bibliothek
       Regel 3). Die Original-Transition blendete backdrop-filter über 0.3 s
       ein — 18 Bilder lang wird die Unschärfe dabei jedes Bild komplett neu
       gerechnet, exakt an der 40-px-Schwelle kurz nach Scroll-Beginn. Dieser
       Einbruch war der Zünder für das Strich-Flackern (die alte Feder wurde
       unter 37,5 Bildern/s instabil). padding ebenfalls raus: eine
       Innenabstands-Animation layoutet die fixierte Leiste 0.3 s lang je
       Bild. Glas und Höhe springen jetzt, nur Tönung und Linie faden. */
._nav_y87dt_1{
  transition:background .3s ease, border-color .3s ease;
}

/* ── 4 · Goldener Fortschrittsstrich: eigene Compositing-Schicht. Sein
       Mitlaufen (transform:scaleX, direkt vom Scroll gesetzt) bleibt damit
       eine reine Compositor-Bewegung ohne Neuzeichnen. */
[data-fortschritt]{
  will-change:transform;
}

/* ── 5 · Hero: das Sektions-Korn lag ÜBER der Partikel-Leinwand. Das Korn
       trägt einen Misch-Modus, die Leinwand malt 60 Bilder je Sekunde —
       jedes Canvas-Bild machte das Misch-Ergebnis der GANZEN Hero-Fläche
       ungültig. Korn unter die Leinwand: es mischt nur noch mit den
       statischen Hintergrund-Schichten, das Ergebnis ist cachebar.
       (Sichtbarer Unterschied: die goldenen Pünktchen tragen kein
       4-Prozent-Korn mehr — unter der Wahrnehmungsschwelle.) */
._grain_mm51f_14{ z-index:1 }
._canvas_mm51f_13{ z-index:2 }

/* ── 6 · Orb-Bühne: der Licht-Sweep (blur + mix-blend-mode:screen, rotiert
       endlos) hatte keinen isolierenden Stapel-Kontext — seine Misch-Gruppe
       reichte bis zur Seitenwurzel, die große Fläche wurde je Bild neu
       verrechnet. isolation begrenzt das auf die 440-px-Bühne. */
._orbStage_8gyis_8{ isolation:isolate }

/* ── 7 · Schichten-Hygiene: dauerhaftes will-change auf Elementen, die nur
       bei Berührung animieren, hält ihre GPU-Texturen permanent im Speicher
       (Effekt-Bibliothek Regel 11). Der Browser befördert beim Start der
       Transition von selbst. Nebel (_mesh_) und Bildspalte behalten ihres:
       die animieren bei jeder Zeigerbewegung. */
._btn_59hhu_1,
._tilt_sp1o0_10,
._flipInner_mm51f_53{ will-change:auto }

/* ── 8 · Offscreen-Ruhe (Effekt-Bibliothek Regel 4, Muster aus 9010-WEB-0002):
       pk-effekte.js setzt .ruht auf die Orb-Bühne (sieben Endlos-
       Animationen), sobald sie das Bild verlässt — pausiert statt
       unsichtbar weiterzulaufen. */
.ruht, .ruht *{ animation-play-state:paused !important }


/* ═══════════════════════════════════════════════════════════════════════════
   TEIL B · BILDWELT — echte Freisteller statt CSS-Schatten (2026-08-10)

   WAS SICH GEÄNDERT HAT
       Die beiden Produktbilder kommen seit heute als freigestellte PNGs
       direkt aus dem 3D-Renderer (Michał). Sie tragen ihren Schatten bereits
       IM Bild — physikalisch korrekt gerechnet, mit weichem Verlauf statt
       einer nachträglich verwaschenen Kante. Gemessen am 6-fach vergrößerten
       Ausschnitt: die alte Kante wellte sich und trug einen dunklen Saum,
       die neue ist eine saubere Linie (2,8 Mio. weiche Kantenpixel = echtes
       Antialiasing des Renderers). Nebenbei fielen 63 KB weg.

   WARUM ES DIESE ÜBERSTEUERUNGEN BRAUCHT — drei Dinge kollidieren sonst:

   (a) DOPPELTER SCHATTEN. Beide Bilder trugen im Original einen schwarzen
       drop-shadow. Über einem Bild, das seinen Schatten schon mitbringt,
       ergibt das einen sichtbaren Halo. Der schwarze Anteil fliegt raus,
       der GOLDENE Schein bleibt — er ist Markenlicht, keine Schattenwirkung.

   (b) VERSCHOBENE MITTE. Ein eingebrannter Schatten hängt nur UNTEN am
       Objekt. Damit ist die Bildmitte nicht mehr die Objektmitte: die
       Kapsel säße 35 px zu hoch im Orb-Zentrum, das zerlegte Produkt 20 px
       zu hoch. Gelöst NICHT hier, sondern in der Bilddatei — beim Ableiten
       wird oben so viel transparenter Rand angefügt, dass Objektmitte und
       Bildmitte wieder zusammenfallen (gemessen: Versatz 0,00 %). Das ist
       robuster als ein CSS-Versatz und lässt die schwebende Kapsel um ihre
       eigene Mitte kippen statt um einen versetzten Punkt.

   (c) GEÄNDERTES SEITENVERHÄLTNIS. Durch Rand und Schatten sind die Rahmen
       höher als vorher. Ohne Nachführung würde das Produkt schrumpfen und
       die Kapsel wachsen. Die Werte unten sind so gerechnet, dass das
       OBJEKT exakt so groß und an derselben Stelle erscheint wie vorher.

   ⛔ Regel für alle künftigen Seiten: Ein Bild bringt seinen Schatten mit
      ODER bekommt ihn per CSS — nie beides. Und wer einen Schatten
      einbrennt, gleicht den Rahmen aus, sonst wandert das Motiv.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 9a · Schwebende Kapsel (Orb-Bühne).
       Rahmen 1000×863 statt 1000×455, Objekt füllt 97,5 % der Breite statt
       92,5 % → 78 % × 0,9487 = 74 %, damit die Kapsel gleich groß bleibt. */
img[class*="_capsule_"]{
  width:74%;
  filter:drop-shadow(0 0 26px #dabe7366);   /* schwarzer Schatten raus, Gold bleibt */
}

/* ── 9b · Zerlegtes Produkt (Schluss-Sektion).
       Rahmen 1400×404 statt 1200×271. Das Verhältnis MUSS mitgeführt werden,
       sonst passt background-size:contain das Bild an der Höhe ein und das
       Produkt wird schmaler. margin-top gleicht die 41 px größere Rahmenhöhe
       zur Hälfte aus, damit das Produkt auf seiner alten Linie sitzt. */
[class*="_product_"]{
  aspect-ratio:1400 / 404;
  margin-top:28px;
  filter:drop-shadow(0 0 40px rgba(218,190,115,.12));
}
@media (max-width: 620px){
  [class*="_product_"]{ margin-top:16px }
}