/* ============================================================================
 * PGS Glas-Optik — v2.28.0
 * ----------------------------------------------------------------------------
 * Additive Schicht. Sie loescht nichts und schreibt nichts um; sie laedt nach
 * pgs-components.css. KEINE Sektionsdatei wurde angefasst, und auch in
 * style.css wurde nichts geaendert — die Knoepfe in Teil 4 setzen sich
 * ausschliesslich ueber hoehere Spezifitaet durch.
 *
 * Sechs Teile:
 *
 *   1. LICHTGRUND  — Facetten hinter dem Inhalt, auf allen 14 Seitenbereichen.
 *                    Das ist der Kern: Glas ohne Licht dahinter hat nichts zu
 *                    brechen und sieht aus wie graues Plastik.
 *                    In v2.21.0 von fliessenden Baendern auf harte diagonale
 *                    Facetten umgestellt (Mert, 04.08.2026, nach Vorlagenbild).
 *
 *   2. ANGLEICHUNG — die Glasflaechen aus v2.19.0 (.pgs-glas, .pgs-rcard)
 *                    bekommen eine Kante, die Licht FAENGT statt gleichmaessig
 *                    zu leuchten, plus eine Spur brightness.
 *
 *   3. AUSWEITUNG  — dieselbe Materialsprache auf allen uebrigen echten
 *                    Flaechen. Bewusst als benannte Liste und nicht als
 *                    [class*="card"]: das Theme hat 146 Selektoren mit
 *                    Hintergrund und Radius, aber die meisten davon sind
 *                    Kleinteile (Etiketten, Listenpunkte, Messbalken).
 *                    Glas darauf saehe kaputt aus.
 *
 *   4. KNOEPFE     — sanftes Milchglas statt deckender Metallplatte, mit
 *                    einem Glanz, der NUR auf der Kante laeuft (v2.21.0).
 *
 *   5. LEISTE      — die laufende Vertrauensleiste verliert ihre Pille und
 *                    laeuft frei, mit weichem Auslaufen an beiden Enden
 *                    (v2.22.0). Sie sass als dritte Pille unter zwei
 *                    Knopf-Pillen und trug noch das Glas von v2.19.
 *
 *   6. KOPF + FUSS — beide liegen AUSSERHALB der 14 Bereiche und hatten
 *                    deshalb nie eine Angleichung bekommen, obwohl man sie
 *                    auf jeder Seite sieht (v2.25.0). Die Kopfleiste bleibt
 *                    deckend — sie liegt ueber dem Inhalt.
 *
 * ----------------------------------------------------------------------------
 * ZWEI BAUENTSCHEIDUNGEN, die man sonst fuer Schlamperei haelt:
 *
 * (a) BEREICHSKLASSEN STEHEN DOPPELT (.pgs-home.pgs-home).
 *     42 der 88 Sektionsdateien bringen ihre eigene CSS in einem <style>-Block
 *     mit — zusammen 343 KB, gegenueber 27 KB in den gemeinsamen Dateien.
 *     Diese Bloecke stehen im BODY, also NACH dieser Datei. Bei gleicher
 *     Spezifitaet gewinnt der spaetere Block. Gemessen betroffen waeren
 *     .sheet (10x), .contact (4x), .pgs-cta (2x) und .pgs-btn-ghost (5x),
 *     alle als '.bereich .klasse' = 0,2,0. Die doppelte Bereichsklasse hebt
 *     diese Schicht auf 0,3,0 und gewinnt ohne ein einziges !important.
 *
 * (b) DIE KANTE IN TEIL 3 LAEUFT UEBER background-clip, NICHT UEBER EIN PSEUDO.
 *     Viele dieser Flaechen belegen ::before oder ::after bereits in ihrer
 *     eigenen Sektions-CSS (.pgs-rcard::before, .pgs-slab::before, .eb::before
 *     und weitere). Ein Pseudo-Element haette sie ueberschrieben.
 * ==========================================================================*/


/* Die 14 Seitenbereiche des Themes — aus den Wurzelelementen aller 88
   Sektionsdateien erhoben, nicht geraten. */
.pgs-home, .pgs-legal, .pgs-article, .pgs-status, .pgs-shop, .pgs-scale,
.pgs-pvp, .pgs-pdb, .pgs-news, .pgs-lgs, .pgs-faq, .pgs-eb, .pgs-about,
.gp-grading{
  /* Notwendig, damit der Lichtgrund (z-index:-1) UEBER dem eigenen
     Hintergrund des Bereichs liegt. Ohne eigenen Stapelkontext malt der
     Browser negative Ebenen VOR dem Bereichshintergrund — der Lichtgrund
     verschwaende dahinter. */
  isolation:isolate;
}


/* ============================ 1. LICHTGRUND ==============================
   ::after ist auf allen 14 Wurzeln frei (::before traegt ueberall das
   Raster — nachgezaehlt). z-index:-1 setzt die Baender ueber den
   Bereichshintergrund und unter jeden Inhalt, also genau dorthin, wo
   backdrop-filter sie aufgreift.

   Farben aus der Theme-Palette: Stahl und Platin mit dem Akzentblau
   (--pgs-accent #5B8CFF), nicht das Elektroblau der Vorlage. Der Lichtgrund
   soll nach PGS aussehen, nicht nach fremder Vorlage.

   AUFBAU DER FACETTEN (v2.21.0, erzeugt in theme-check/muster-lichtgrund.html
   mit Neigung 56°, Dichte 11, Helligkeit 110 %, Lichtkanten 22 %,
   Schliffspuren 70 %):
     - 21 Facetten in einer steilen Schar, Breiten von 0,26 bis 2,15 der
       Grundbreite, damit duenne Splitter neben breiten Flaechen liegen.
     - Die Helligkeit springt: hinter fast jeder hellen Facette steht wieder
       eine fast schwarze. Der Eindruck von Licht entsteht aus diesem Sprung,
       nicht aus leuchtenden Linien.
     - Eine zweite, flachere Schar liegt halbdurchsichtig darueber. Erst
       dadurch werden aus parallelen Streifen Scherben.
     - Feine Schliffspuren laengs der Facetten (pattern 'schliff').

   LESBARKEIT GEHT VOR WIRKUNG. Ein Lichtgrund hebt die Flaeche hinter dem
   Text an. Durchgerechnet wurde der Schlimmstfall: hellste Facette, direkt
   hinter dem gedaempftesten Fliesstext des Themes, ohne Karte darunter.
     Deckkraft .32, Text #A7A7B0 ..... 5,2:1   (Stand 2.23.0)
     Deckkraft .18, Text #EDEEF2 .... 13,8:1   (seit 2.24.0)
   Seit 2.24.0 ist der Grund dunkler UND die Schrift kraeftig — Mert:
   "nichts transparent machen ausser das Glas". Die blassen Grautoene des
   Themes waren fuer einen fast schwarzen Grund entworfen und lasen sich auf
   dem beleuchteten Grund wie ausgeblichen. Sie wurden an der QUELLE
   ersetzt, auch in den Sektionsdateien — Inline-Farben im Markup sind von
   keinem Stylesheet erreichbar. Sicherung: theme-check/_sicherung-vor-2.24.0.
   Wer an den Werten dreht, muss diese Zahl nachrechnen — die Werkbank tut
   das bei jeder Reglerbewegung, der Waechter v221 prueft sie fest.        */

.pgs-home::after, .pgs-legal::after, .pgs-article::after, .pgs-status::after,
.pgs-shop::after, .pgs-scale::after, .pgs-pvp::after, .pgs-pdb::after,
.pgs-news::after, .pgs-lgs::after, .pgs-faq::after, .pgs-eb::after,
.pgs-about::after, .gp-grading::after{
  content:"";
  /* FEST STATT ABSOLUT (v2.23.0). Vorher: position:absolute mit
     `100% auto no-repeat` — das Bild war so hoch wie breit, darunter kam
     nichts mehr. Gemessen deckte es auf einem 3328 px hohen Bereich nur
     25 % ab; auf der rund 21 000 px hohen Startseite waeren es etwa 5 %
     gewesen. Der Rest der Seite hatte gar keinen Lichtgrund — genau deshalb
     wirkte weiter unten alles grau.
     Fest verankert deckt es jede Seitenlaenge ab, der Inhalt zieht darueber
     hinweg. .pgs-home ist KEIN umschliessender Block fuer feste Elemente
     (isolation und overflow zaehlen dafuer nicht), es wird also nicht
     abgeschnitten. */
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.10;
  background:center center / cover no-repeat
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1400' preserveAspectRatio='xMidYMin slice'><defs><linearGradient id='f0' x1='0' y1='1' x2='1' y2='0'><stop offset='0' stop-color='rgb(5,8,15)'/><stop offset='.45' stop-color='rgb(5,8,15)'/><stop offset='1' stop-color='rgb(5,8,15)'/></linearGradient><linearGradient id='f1' x1='0' y1='1' x2='1' y2='0'><stop offset='0' stop-color='rgb(5,8,15)'/><stop offset='.45' stop-color='rgb(9,19,38)'/><stop offset='1' stop-color='rgb(5,8,15)'/></linearGradient><linearGradient id='f2' x1='0' y1='1' x2='1' y2='0'><stop offset='0' stop-color='rgb(9,19,38)'/><stop offset='.45' stop-color='rgb(15,35,70)'/><stop offset='1' stop-color='rgb(9,19,38)'/></linearGradient><linearGradient id='f3' x1='0' y1='1' x2='1' y2='0'><stop offset='0' stop-color='rgb(15,35,70)'/><stop offset='.45' stop-color='rgb(27,69,144)'/><stop offset='1' stop-color='rgb(15,35,70)'/></linearGradient><linearGradient id='f4' x1='0' y1='1' x2='1' y2='0'><stop offset='0' stop-color='rgb(27,69,144)'/><stop offset='.45' stop-color='rgb(52,140,255)'/><stop offset='1' stop-color='rgb(27,69,144)'/></linearGradient><pattern id='schliff' width='7' height='7' patternUnits='userSpaceOnUse' patternTransform='rotate(34)'><rect width='7' height='7' fill='none'/><line x1='0' y1='0' x2='0' y2='7' stroke='rgb(255,255,255)' stroke-width='1' opacity='0.063'/><line x1='3.5' y1='0' x2='3.5' y2='7' stroke='rgb(0,0,0)' stroke-width='1' opacity='0.084'/></pattern><filter id='weich' filterUnits='userSpaceOnUse' x='-200' y='-200' width='1840' height='1800'><feGaussianBlur stdDeviation='0.8'/></filter></defs><rect width='1440' height='1400' fill='rgb(5,8,15)'/><polygon points='-1206,0 -1075,0 -131,1400 -262,1400' fill='url(%23f0)'/><polygon points='-1075,0 -1031,0 -86,1400 -131,1400' fill='url(%23f1)'/><polygon points='-1031,0 -815,0 130,1400 -86,1400' fill='url(%23f0)'/><polygon points='-815,0 -749,0 195,1400 130,1400' fill='url(%23f3)'/><polygon points='-749,0 -468,0 477,1400 195,1400' fill='url(%23f0)'/><polygon points='-468,0 -434,0 511,1400 477,1400' fill='url(%23f1)'/><polygon points='-434,0 -264,0 681,1400 511,1400' fill='url(%23f4)'/><polygon points='-264,0 -172,0 772,1400 681,1400' fill='url(%23f0)'/><polygon points='-172,0 83,0 1028,1400 772,1400' fill='url(%23f1)'/><polygon points='83,0 138,0 1083,1400 1028,1400' fill='url(%23f0)'/><polygon points='138,0 269,0 1214,1400 1083,1400' fill='url(%23f2)'/><polygon points='269,0 314,0 1258,1400 1214,1400' fill='url(%23f0)'/><polygon points='314,0 530,0 1474,1400 1258,1400' fill='url(%23f1)'/><polygon points='530,0 595,0 1539,1400 1474,1400' fill='url(%23f3)'/><polygon points='595,0 877,0 1821,1400 1539,1400' fill='url(%23f0)'/><polygon points='877,0 911,0 1855,1400 1821,1400' fill='url(%23f0)'/><polygon points='911,0 1081,0 2025,1400 1855,1400' fill='url(%23f1)'/><polygon points='1081,0 1172,0 2117,1400 2025,1400' fill='url(%23f4)'/><polygon points='1172,0 1428,0 2372,1400 2117,1400' fill='url(%23f0)'/><polygon points='1428,0 1483,0 2427,1400 2372,1400' fill='url(%23f1)'/><polygon points='1483,0 1614,0 2558,1400 2427,1400' fill='url(%23f0)'/><line x1='-815' y1='0' x2='130' y2='1400' stroke='rgb(52,140,255)' stroke-width='1.0' opacity='0.11' filter='url(%23weich)'/><line x1='-434' y1='0' x2='511' y2='1400' stroke='rgb(52,140,255)' stroke-width='1.2' opacity='0.22' filter='url(%23weich)'/><line x1='530' y1='0' x2='1474' y2='1400' stroke='rgb(52,140,255)' stroke-width='1.0' opacity='0.11' filter='url(%23weich)'/><line x1='1081' y1='0' x2='2025' y2='1400' stroke='rgb(52,140,255)' stroke-width='1.2' opacity='0.22' filter='url(%23weich)'/><g opacity='.5'><polygon points='-1893,0 -1483,0 246,1400 -164,1400' fill='url(%23f1)'/><polygon points='-1358,0 -823,0 905,1400 371,1400' fill='url(%23f2)'/><polygon points='-435,0 -261,0 1467,1400 1293,1400' fill='url(%23f1)'/><polygon points='224,0 328,0 2057,1400 1953,1400' fill='url(%23f3)'/><polygon points='661,0 1072,0 2801,1400 2390,1400' fill='url(%23f1)'/></g><rect width='1440' height='1400' fill='url(%23schliff)'/></svg>");
}

/* Recht und Ratgeber leben vom Lesen, nicht vom Licht. */
.pgs-legal::after, .pgs-article::after{ opacity:.06 }


/* ========================== 2. ANGLEICHUNG ===============================
   Die Kante aus v2.19.0 laeuft gleichmaessig von oben nach unten. Eine
   gleichmaessig helle Linie liest sich wie gedruckt. Echtes Glas faengt
   ringsum unterschiedlich viel Licht: hell oben links, fast weg in der
   Mitte, wieder hell unten rechts. Nur der Verlauf aendert sich —
   Maskentechnik, Staerke und Uebergaenge aus v2.19.0 bleiben unberuehrt. */

.pgs-glas.pgs-glas::after,
.pgs-rcard.pgs-rcard::after{
  background:linear-gradient(147deg,
    rgba(255,255,255,.88) 0%,
    rgba(214,226,248,.34) 22%,
    rgba(255,255,255,.09) 47%,
    rgba(214,226,248,.30) 71%,
    rgba(255,255,255,.64) 100%);
}

/* Eine Spur brightness hebt das Licht dahinter an, wie echtes Glas es tut.
   blur und saturate bleiben auf den Werten aus v2.19.0.

   DUNKLER SCHLEIER: v2.19.0 legte rgba(255,255,255,.05) auf die Flaeche —
   einen AUFHELLENDEN Ton. Das war richtig, solange hinter dem Glas nichts
   leuchtete. Mit dem Lichtgrund waere der Text sonst dort schlecht lesbar,
   wo ein Band direkt hinter der Karte laeuft: die Unschaerfe verwischt das
   Licht, sie dunkelt es nicht ab. Der Schleier liegt UNTER dem alten Glanz,
   der Glanz bleibt unveraendert. Gemessen auf der hellsten Bandmitte:
   #A7A7B0 auf der Karte 5,0:1, #D6D6DC 8,3:1, #F4F4F6 11:1. */
.pgs-glas.pgs-glas,
.pgs-rcard.pgs-rcard{
  background-color:rgba(9,10,14,.88);
  background-image:linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(20px) saturate(150%) brightness(1.06);
          backdrop-filter:blur(20px) saturate(150%) brightness(1.06);
}

/* Der Geisterknopf ist eine Flaeche, aber eine bedienbare: er behaelt
   Rand und Farben und bekommt nur die staerkere Unschaerfe. */
/* (Die Knoepfe sind seit v2.21.0 vollstaendig in Teil 4 geregelt.) */


/* =========================== 3. AUSWEITUNG ===============================
   Dieselbe Materialsprache auf den uebrigen echten Flaechen, in allen
   Bereichen. Die Kante entsteht ueber background-clip:
   Ebene 1 (Flaechenton) wird auf padding-box beschnitten, Ebene 2
   (Kantenverlauf) auf border-box. Der 1px-Rahmen ist durchsichtig und
   zeigt dadurch nur Ebene 2.                                             */

:is(.pgs-home,.pgs-legal,.pgs-article,.pgs-status,.pgs-shop,.pgs-scale,.pgs-pvp,.pgs-pdb,.pgs-news,.pgs-lgs,.pgs-faq,.pgs-eb,.pgs-about,.gp-grading):is(.pgs-home,.pgs-legal,.pgs-article,.pgs-status,.pgs-shop,.pgs-scale,.pgs-pvp,.pgs-pdb,.pgs-news,.pgs-lgs,.pgs-faq,.pgs-eb,.pgs-about,.gp-grading)
:is(.pgs-vcard,.pgs-crit,.pgs-stat,.pgs-quote,.pgs-feat,.pgs-split,.pgs-cta,.pgs-cc-box,.pgs-tbadge,.card,.fcard,.sheet,.contact,.note-pill,.lgs-hero,.gp-card,.gp-slab-card,.gp-cta,.gz-bpln,.panel,.feq,.pgs-slab-win,.lgs-pt,.cc,.cta,.form-box,.gj-panel,.gp-slab,.gz-stage,.lc,.lgs-chartcard,.news-cta,.notice,.pdb-search,.pvp-card,.pvp-cta,.pvp-fair,.req-card,.spec55,.stat,.sticker,.store-embed,.tier,.pdb-card){
  border:1px solid transparent;
  background-image:
    linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.05)),
    linear-gradient(rgba(9,10,14,.88), rgba(9,10,14,.88));
  background-origin:border-box;
  background-clip:padding-box, padding-box;
  box-shadow:none;
  isolation:isolate;
  position:relative;
  -webkit-backdrop-filter:blur(20px) saturate(150%) brightness(1.06);
          backdrop-filter:blur(20px) saturate(150%) brightness(1.06);
  transition:background-image 130ms var(--pgs-ease, cubic-bezier(.22,1,.36,1));
}

/* Hervorheben wie in v2.19.0: nur Helligkeit. Kein Anheben, keine
   Groessenaenderung, kein Schatten — das war dort eine bewusste
   Entscheidung und gilt hier weiter. */
@media (hover:hover) and (pointer:fine){
  :is(.pgs-home,.pgs-legal,.pgs-article,.pgs-status,.pgs-shop,.pgs-scale,.pgs-pvp,.pgs-pdb,.pgs-news,.pgs-lgs,.pgs-faq,.pgs-eb,.pgs-about,.gp-grading):is(.pgs-home,.pgs-legal,.pgs-article,.pgs-status,.pgs-shop,.pgs-scale,.pgs-pvp,.pgs-pdb,.pgs-news,.pgs-lgs,.pgs-faq,.pgs-eb,.pgs-about,.gp-grading)
  :is(.pgs-vcard,.pgs-crit,.pgs-stat,.pgs-quote,.pgs-feat,.pgs-split,.pgs-cta,.pgs-cc-box,.pgs-tbadge,.card,.fcard,.sheet,.contact,.note-pill,.lgs-hero,.gp-card,.gp-slab-card,.gp-cta,.gz-bpln,.panel,.feq,.pgs-slab-win,.lgs-pt,.cc,.cta,.form-box,.gj-panel,.gp-slab,.gz-stage,.lc,.lgs-chartcard,.news-cta,.notice,.pdb-search,.pvp-card,.pvp-cta,.pvp-fair,.req-card,.spec55,.stat,.sticker,.store-embed,.tier,.pdb-card):hover{
    background-image:
      linear-gradient(rgba(255,255,255,.075), rgba(255,255,255,.075)),
      linear-gradient(rgba(9,10,14,.84), rgba(9,10,14,.84));
    transition-duration:170ms;
  }
}


/* --- DER RING (v2.23.0) -------------------------------------------------
   Bis 2.22.0 lag der Kantenverlauf als UNTERSTE Hintergrundebene und war
   auf border-box beschnitten. Das war ein Fehler: CSS malt die erste Ebene
   zuletzt, der Verlauf lag also ganz unten — und die beiden Ebenen darueber
   sind durchsichtig. Nachgerechnet kam die helle Ecke rgba(255,255,255,.88)
   mit 0,95 x 0,54 = 45 % Weiss auf der FLAECHE an. Kein Rand, sondern ein
   diagonaler Schleier ueber alles; auf kleinen Kacheln deutlich sichtbar.

   background-clip beschneidet eben nur die EIGENE Ebene, nicht die darunter
   — derselbe Denkfehler wie beim Knopf-Glanz. Jetzt ein echter Ring per
   Maskendifferenz, 1,6 px (Mert, Fassung 2). ::after ist auf 13 der 15
   betroffenen Klassen frei; die zwei Ausnahmen stehen darunter.          */

:is(.pgs-home,.pgs-legal,.pgs-article,.pgs-status,.pgs-shop,.pgs-scale,.pgs-pvp,.pgs-pdb,.pgs-news,.pgs-lgs,.pgs-faq,.pgs-eb,.pgs-about,.gp-grading):is(.pgs-home,.pgs-legal,.pgs-article,.pgs-status,.pgs-shop,.pgs-scale,.pgs-pvp,.pgs-pdb,.pgs-news,.pgs-lgs,.pgs-faq,.pgs-eb,.pgs-about,.gp-grading)
:is(.pgs-vcard,.pgs-crit,.pgs-stat,.pgs-quote,.pgs-feat,.pgs-split,.pgs-cta,.pgs-tbadge,.card,.fcard,.sheet,.contact,.note-pill,.lgs-hero,.gp-slab-card,.gp-cta,.gz-bpln,.panel,.feq,.pgs-slab-win,.lgs-pt,.cc,.cta,.form-box,.gj-panel,.gp-slab,.gz-stage,.lc,.lgs-chartcard,.news-cta,.notice,.pdb-search,.pvp-card,.pvp-cta,.pvp-fair,.req-card,.spec55,.stat,.sticker,.store-embed,.tier)::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  border-radius:inherit;
  padding:1.6px;                     /* = Ringdicke */
  opacity:.82;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  background:linear-gradient(147deg,
    rgba(255,255,255,.88) 0%,
    rgba(214,226,248,.34) 22%,
    rgba(255,255,255,.09) 47%,
    rgba(214,226,248,.30) 71%,
    rgba(255,255,255,.64) 100%);
  transition:opacity 130ms var(--pgs-ease, cubic-bezier(.22,1,.36,1));
}

/* .pgs-cc-box und .gp-card belegen ihr ::after bereits in der eigenen
   Sektions-CSS. Sie bekommen eine gleichmaessige Linie statt der
   Lichtkante — lieber schlicht als eine fremde Zeichnung ueberschreiben. */
:is(.pgs-home,.pgs-legal,.pgs-article,.pgs-status,.pgs-shop,.pgs-scale,.pgs-pvp,.pgs-pdb,.pgs-news,.pgs-lgs,.pgs-faq,.pgs-eb,.pgs-about,.gp-grading):is(.pgs-home,.pgs-legal,.pgs-article,.pgs-status,.pgs-shop,.pgs-scale,.pgs-pvp,.pgs-pdb,.pgs-news,.pgs-lgs,.pgs-faq,.pgs-eb,.pgs-about,.gp-grading)
:is(.pgs-cc-box,.gp-card,.pdb-card){
  border-color:rgba(255,255,255,.12);
}

@media (hover:hover) and (pointer:fine){
  :is(.pgs-home,.pgs-legal,.pgs-article,.pgs-status,.pgs-shop,.pgs-scale,.pgs-pvp,.pgs-pdb,.pgs-news,.pgs-lgs,.pgs-faq,.pgs-eb,.pgs-about,.gp-grading):is(.pgs-home,.pgs-legal,.pgs-article,.pgs-status,.pgs-shop,.pgs-scale,.pgs-pvp,.pgs-pdb,.pgs-news,.pgs-lgs,.pgs-faq,.pgs-eb,.pgs-about,.gp-grading)
  :is(.pgs-vcard,.pgs-crit,.pgs-stat,.pgs-quote,.pgs-feat,.pgs-split,.pgs-cta,.pgs-tbadge,.card,.fcard,.sheet,.contact,.note-pill,.lgs-hero,.gp-slab-card,.gp-cta,.gz-bpln,.panel,.feq,.pgs-slab-win,.lgs-pt,.cc,.cta,.form-box,.gj-panel,.gp-slab,.gz-stage,.lc,.lgs-chartcard,.news-cta,.notice,.pdb-search,.pvp-card,.pvp-cta,.pvp-fair,.req-card,.spec55,.stat,.sticker,.store-embed,.tier):hover::after{
    opacity:1;
    transition-duration:170ms;
  }
}


/* ============================= 4. KNOEPFE ================================
   Sanftes Milchglas statt deckender Metallplatte. Der Glanz laeuft NUR auf
   der Kante, 8 s durchziehend mit weichem Auf- und Abblenden.
   (Entschieden in theme-check/muster-knoepfe.html, 04.08.2026.)

   WARUM HIER SO VIEL !important STEHT — und warum das kein Schlendrian ist:
   style.css deklariert am Hauptknopf drei Dinge mit !important, alle aus
   guten Gruenden gesetzt, und in style.css wurde dafuer NICHTS geaendert
   oder geloescht:
     Z. 30  color:#0C0C0D !important   Schutz gegen fremde Plugin-Linkfarben
     Z. 43  background:var(--pgs-metal) !important  + background-size:200%
     Z. 45  animation:pgs-metalshift
   Gegen ein !important kommt nur ein !important auf hoeherer Spezifitaet an.
   Die Klassennamen stehen deshalb doppelt: 0,2,0 schlaegt 0,1,0.

   Die dunkle Schriftfarbe MUSS weichen: sie war richtig, solange der Knopf
   eine helle Metallplatte war. Auf durchsichtigem Glas ueber dunkler Seite
   waere dunkle Schrift unlesbar. Gemessen steht #F7F8FC auf dem Glas ueber
   der hellsten Facette bei 8,8:1.

   WARUM DER GLANZ WIRKLICH NUR AUF DER KANTE LANDET: nicht durch
   background-clip — das beschneidet nur die eigene Ebene, und durch eine
   fast durchsichtige Flaeche scheint ein darunterliegendes Lichtband
   einfach hindurch. Es braucht einen echten Ring: ein Element mit
   padding:1.2px und zwei voneinander abgezogenen Masken. Dafuer wird das
   ::after benutzt, das style.css ohnehin schon anlegt.

   WARUM DER GLANZ UEBER EINEN @property-WERT LAEUFT: background-position
   muss hier !important sein (gegen die Kurzschreibweise aus style.css) —
   und !important schlaegt Animationen. Keyframes auf background-position
   waeren wirkungslos. Ein registrierter Eigenwert INNERHALB der
   Deklaration wird dagegen jeden Frame neu eingesetzt.                    */

@property --pgs-wisch{ syntax:'<percentage>'; initial-value:-120%; inherits:false }
@keyframes pgs-randtreib{ from{ --pgs-wisch:-120% } to{ --pgs-wisch:220% } }
@keyframes pgs-randblende{ 0%,100%{ opacity:0 } 16%,84%{ opacity:1 } }

/* --- Hauptknopf: alle drei Namen aus style.css ------------------------- */
.pgs-btn-primary.pgs-btn-primary,
.btn-p.btn-p,
.gp-btn-primary.gp-btn-primary{
  border:1px solid transparent !important;
  background-origin:border-box !important;
  background-clip:padding-box, border-box !important;
  background-size:100% 100% !important;
  background-color:rgba(255,255,255,.055) !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.015) 44%,
      rgba(255,255,255,.04) 100%),
    linear-gradient(147deg, rgba(255,255,255,.36) 0%, rgba(255,255,255,.05) 46%,
      rgba(255,255,255,.20) 100%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(200%) brightness(1.10) !important;
          backdrop-filter:blur(12px) saturate(200%) brightness(1.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 6px 16px -8px rgba(0,0,0,.7),
    0 22px 48px -22px rgba(0,0,0,.9) !important;
  animation:none !important;
  transition:background-color .22s var(--pgs-ease, cubic-bezier(.22,1,.36,1)) !important;
}

/* Helle Schrift statt der fuer die Metallplatte erzwungenen dunklen. */
.pgs-btn-primary.pgs-btn-primary, .pgs-btn-primary.pgs-btn-primary *,
.btn-p.btn-p, .btn-p.btn-p *,
.gp-btn-primary.gp-btn-primary, .gp-btn-primary.gp-btn-primary *{
  color:#F7F8FC !important;
}
.pgs-btn-primary.pgs-btn-primary svg *,
.btn-p.btn-p svg *,
.gp-btn-primary.gp-btn-primary svg *{ stroke:#F7F8FC !important }

/* --- Der Glanzring ----------------------------------------------------- */
.pgs-btn-primary.pgs-btn-primary::after,
.btn-p.btn-p::after,
.gp-btn-primary.gp-btn-primary::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  border-radius:inherit !important;
  padding:1.2px !important;          /* = Ringdicke */
  transform:none !important;         /* gegen translateX(-130%) aus style.css */
  pointer-events:none !important;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite:xor !important;
          mask-composite:exclude !important;
  background:linear-gradient(100deg,
    rgba(255,255,255,0)   22%,
    rgba(255,255,255,.20) 36%,
    rgba(255,255,255,.60) 50%,
    rgba(255,255,255,.20) 64%,
    rgba(255,255,255,0)   78%) !important;
  background-size:230% 100% !important;
  background-position:var(--pgs-wisch,-120%) 0 !important;
  animation:pgs-randtreib 8s linear infinite,
            pgs-randblende 8s ease-in-out infinite !important;
}

/* --- Geisterknopf: dieselbe Sprache, nur leiser ------------------------ */
.pgs-btn-ghost.pgs-btn-ghost,
.btn-g.btn-g,
.gp-btn-ghost.gp-btn-ghost{
  border:1px solid transparent !important;
  background-origin:border-box !important;
  background-clip:padding-box, border-box !important;
  background-size:100% 100% !important;
  background-color:rgba(255,255,255,.03) !important;
  background-image:linear-gradient(147deg, rgba(255,255,255,.22) 0%,
    rgba(255,255,255,.03) 46%, rgba(255,255,255,.13) 100%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(130%) !important;
          backdrop-filter:blur(20px) saturate(130%) !important;
  box-shadow:0 16px 36px -20px rgba(0,0,0,.85) !important;
}

/* Hervorheben: nur Helligkeit, kein Anheben — wie ueberall im Theme.
   style.css hebt den Hauptknopf um 2 px an; das wird hier zurueckgenommen. */
@media (hover:hover) and (pointer:fine){
  .pgs-btn-primary.pgs-btn-primary:hover,
  .btn-p.btn-p:hover,
  .gp-btn-primary.gp-btn-primary:hover{
    transform:none !important;
    background-color:rgba(255,255,255,.115) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.42),
      0 6px 16px -8px rgba(0,0,0,.7),
      0 22px 48px -22px rgba(0,0,0,.9) !important;
  }
  .pgs-btn-ghost.pgs-btn-ghost:hover,
  .btn-g.btn-g:hover,
  .gp-btn-ghost.gp-btn-ghost:hover{
    transform:none !important;
    background-color:rgba(255,255,255,.07) !important;
  }
}

/* Wer Bewegung reduziert hat, bekommt den Ring als ruhendes Glanzlicht in
   der Mitte statt gar keiner Kante — style.css blendet das ::after dort
   ganz aus, was hier den Rand verschlucken wuerde. */
@media (prefers-reduced-motion:reduce){
  .pgs-btn-primary.pgs-btn-primary::after,
  .btn-p.btn-p::after,
  .gp-btn-primary.gp-btn-primary::after{
    display:block !important;
    animation:none !important;
    opacity:1 !important;
    background-position:50% 0 !important;
  }
}


/* ====================== 5. VERTRAUENSLEISTE (v2.22.0) ====================
   Die laufende Leiste im Hero (.pgs-ticker) verliert ihre Pille.

   WARUM: sie trug noch das Glas von v2.19 — gleichmaessiger 13-%-Rahmen,
   blur(16px) OHNE brightness (deshalb grau) und ein ::before, das eine harte
   Glanzhaelfte ueber die obere Haelfte legt. Sie hatte die Angleichung aus
   2.20/2.21 nie bekommen. Dazu die Formfrage: sie sass als dritte Pille
   direkt unter zwei Knopf-Pillen.
   Mert hat sich gegen ein Nachziehen und fuer das Aufloesen entschieden
   (Werkbank theme-check/muster-ticker.html, Variante 3, 04.08.2026).

   SPEZIFITAET: startseite.html bringt eine EIGENE CSS-Kopie des Tickers mit
   — im Body, also nach dieser Datei. Gemessen sind das .pgs-ticker (0,1,0),
   .pgs-ticker::before (0,1,1) und die Kindklassen (0,1,0). Die doppelte
   Klasse hebt uns auf 0,2,0 / 0,2,1 / 0,3,0 und gewinnt ohne !important.
   Betroffen sind nur startseite.html und startseite.en.html.             */

.pgs-ticker.pgs-ticker{
  background:none;
  border:0;
  box-shadow:none;
  padding:4px 0;
  max-width:none;
  -webkit-backdrop-filter:none;
          backdrop-filter:none;
}

/* Die harte Glanzhaelfte faellt mit der Pille weg. */
.pgs-ticker.pgs-ticker::before{ display:none }

/* Ohne Rahmen muessen die Enden weich auslaufen, sonst schneidet das
   overflow:hidden mitten im Wort ab.
   BEWUSSTE ABWEICHUNG: pgs-components.css nimmt die Maske bei
   "Bewegung reduzieren" heraus (dort stand die Leiste in einer Pille, ein
   Verlauf haette wie ein Fehler ausgesehen). Ohne Pille wuerde dann hart
   abgeschnitten — deshalb bleibt die Maske hier in beiden Faellen. Die
   hoehere Spezifitaet sorgt dafuer von selbst; das ist Absicht, kein
   Versehen. */
.pgs-ticker.pgs-ticker .pgs-ticker-vp{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}

/* Ohne Flaeche darf die Zeile zuruecktreten. #A7A7B0 steht auf der hellsten
   Facette bei 5,2:1 — geprueft, nicht geschaetzt. */
.pgs-ticker.pgs-ticker .pgs-ticker-item{
  color:var(--pgs-text-2);
  font-size:13px;
}
.pgs-ticker.pgs-ticker .pgs-ticker-sep{
  box-shadow:none;
  opacity:.7;
}

/* VOLLE FENSTERBREITE (v2.28.0).
   Gemessen war die Leiste nur 472 von 976 px breit — also 48 %. Nicht weil
   zu wenig Inhalt da waere (das Band ist 2363 px lang, ein Durchlauf
   1181 px), sondern weil sie IN DER LINKEN HERO-SPALTE steckte und diese
   vollstaendig ausfuellte.

   Mit einer Breitenangabe allein war das nicht zu loesen: der uebliche
   Ausbruch `width:100vw; margin-left:calc(50% - 50vw)` setzt voraus, dass
   der umgebende Block MITTIG im Fenster sitzt. Die Hero-Spalte tut das
   nicht — der Ausbruch waere um den Abstand zwischen Spaltenmitte und
   Fenstermitte daneben gelandet.
   Deshalb wurde die Leiste im Markup aus der Spalte heraus und direkt
   hinter den Hero gehaengt (startseite.html und startseite.en.html).
   Dort liegt sie in .pgs-wrap — und die IST mittig, damit greift der
   Ausbruch exakt.

   .pgs-home hat overflow:hidden, ein Querbalken kann also nicht entstehen. */
.pgs-ticker.pgs-ticker{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
/* Ueber die volle Breite duerfen die Enden frueher ausblenden. */
.pgs-ticker.pgs-ticker .pgs-ticker-vp{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}


/* ============ 6. KOPF UND FUSS (v2.25.0) =================================
   Kopf- und Fussleiste liegen AUSSERHALB der 14 Seitenbereiche und hatten
   deshalb nie eine Angleichung bekommen — obwohl man sie auf jeder einzelnen
   Seite sieht. Sie bringen eigenes Glas aus header.php / footer.php mit:
     .pgs-hd        rgba(7,7,8,.78) + saturate(140%) blur(16px)
     .pgs-ft-chip   Verlauf + eigener Blur
   Beides ohne brightness und ohne lichtfangende Kante.

   Die KOPFLEISTE bleibt bewusst deckend. Sie liegt ueber dem Inhalt, dort
   darf nichts durchscheinen ("nichts transparent machen ausser das Glas").
   Sie bekommt nur eine Spur brightness und ihre Kante — und die Kante einer
   Leiste ist ihre Unterkante, kein Ring.

   Die Klassen stehen doppelt, weil header.php und footer.php ihre CSS
   INLINE mitbringen — die steht im BODY und damit nach dieser Datei.       */

.pgs-hd.pgs-hd{
  background:rgba(7,7,8,.94);
  -webkit-backdrop-filter:saturate(160%) blur(18px) brightness(1.05);
          backdrop-filter:saturate(160%) blur(18px) brightness(1.05);
}
.pgs-hd.pgs-hd::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,.02) 0%,
    rgba(255,255,255,.32) 24%,
    rgba(214,226,248,.16) 60%,
    rgba(255,255,255,.05) 100%);
}

/* Aufklappmenue und mobile Navigation: darauf steht Text, also deckend. */
.pgs-hd-menu.pgs-hd-menu,
.pgs-hd-nav.pgs-hd-nav{
  background-color:rgba(9,10,14,.96);
  -webkit-backdrop-filter:blur(22px) saturate(160%) brightness(1.05);
          backdrop-filter:blur(22px) saturate(160%) brightness(1.05);
}

/* Fussleisten-Bauteile: dieselbe Materialsprache wie die Flaechen in Teil 3. */
.pgs-ft-chip.pgs-ft-chip,
.pgs-ft-review.pgs-ft-review{
  border:1px solid transparent;
  position:relative;
  isolation:isolate;
  background-origin:border-box;
  background-clip:padding-box, padding-box;
  background-image:
    linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.05)),
    linear-gradient(rgba(9,10,14,.88), rgba(9,10,14,.88));
  -webkit-backdrop-filter:blur(20px) saturate(150%) brightness(1.06);
          backdrop-filter:blur(20px) saturate(150%) brightness(1.06);
}
.pgs-ft-chip.pgs-ft-chip::after,
.pgs-ft-review.pgs-ft-review::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  border-radius:inherit;
  padding:1.6px;
  opacity:.82;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  background:linear-gradient(147deg,
    rgba(255,255,255,.88) 0%,
    rgba(214,226,248,.34) 22%,
    rgba(255,255,255,.09) 47%,
    rgba(214,226,248,.30) 71%,
    rgba(255,255,255,.64) 100%);
}


/* ============================= 7. GRENZEN ================================ */

/* Pflicht-Rueckfallebene aus v2.19.0, auf die neuen Flaechen ausgedehnt.
   Wer weniger Transparenz eingestellt hat, bekommt deckende Flaechen —
   sonst wird die Seite unlesbar. Der Lichtgrund faellt dabei ganz weg. */
@media (prefers-reduced-transparency:reduce){
  .pgs-home::after, .pgs-legal::after, .pgs-article::after, .pgs-status::after,
  .pgs-shop::after, .pgs-scale::after, .pgs-pvp::after, .pgs-pdb::after,
  .pgs-news::after, .pgs-lgs::after, .pgs-faq::after, .pgs-eb::after,
  .pgs-about::after, .gp-grading::after{ display:none }

  :is(.pgs-home,.pgs-legal,.pgs-article,.pgs-status,.pgs-shop,.pgs-scale,.pgs-pvp,.pgs-pdb,.pgs-news,.pgs-lgs,.pgs-faq,.pgs-eb,.pgs-about,.gp-grading):is(.pgs-home,.pgs-legal,.pgs-article,.pgs-status,.pgs-shop,.pgs-scale,.pgs-pvp,.pgs-pdb,.pgs-news,.pgs-lgs,.pgs-faq,.pgs-eb,.pgs-about,.gp-grading)
  :is(.pgs-vcard,.pgs-crit,.pgs-stat,.pgs-quote,.pgs-feat,.pgs-split,.pgs-cta,.pgs-cc-box,.pgs-tbadge,.card,.fcard,.sheet,.contact,.note-pill,.lgs-hero,.gp-card,.gp-slab-card,.gp-cta,.gz-bpln,.panel,.feq,.pgs-slab-win,.lgs-pt,.cc,.cta,.form-box,.gj-panel,.gp-slab,.gz-stage,.lc,.lgs-chartcard,.news-cta,.notice,.pdb-search,.pvp-card,.pvp-cta,.pvp-fair,.req-card,.spec55,.stat,.sticker,.store-embed,.tier,.pdb-card){
    background-image:none;
    background-color:#14141A;
    border-color:rgba(255,255,255,.16);
    -webkit-backdrop-filter:none;
            backdrop-filter:none;
  }
  .pgs-glas.pgs-glas, .pgs-rcard.pgs-rcard{
    -webkit-backdrop-filter:none;
            backdrop-filter:none;
  }

  /* Knoepfe werden deckend, sonst steht heller Text auf durchsichtigem
     Glas ueber einer Facette. */
  .pgs-btn-primary.pgs-btn-primary, .btn-p.btn-p, .gp-btn-primary.gp-btn-primary{
    background-color:#1E2028 !important;
    background-image:linear-gradient(147deg, rgba(255,255,255,.36) 0%,
      rgba(255,255,255,.05) 46%, rgba(255,255,255,.20) 100%) !important;
    -webkit-backdrop-filter:none !important;
            backdrop-filter:none !important;
  }
  .pgs-btn-ghost.pgs-btn-ghost, .btn-g.btn-g, .gp-btn-ghost.gp-btn-ghost{
    background-color:#14141A !important;
    -webkit-backdrop-filter:none !important;
            backdrop-filter:none !important;
  }
  .pgs-btn-primary.pgs-btn-primary::after,
  .btn-p.btn-p::after,
  .gp-btn-primary.gp-btn-primary::after{ display:none !important }
}

/* Handy: Unschaerfe ueber viele Flaechen kostet auf schwachen Geraeten
   spuerbar Bildrate. Der Lichtgrund bleibt, die Unschaerfe wird halbiert. */
@media (max-width:720px){
  .pgs-glas.pgs-glas, .pgs-rcard.pgs-rcard,
  :is(.pgs-home,.pgs-legal,.pgs-article,.pgs-status,.pgs-shop,.pgs-scale,.pgs-pvp,.pgs-pdb,.pgs-news,.pgs-lgs,.pgs-faq,.pgs-eb,.pgs-about,.gp-grading):is(.pgs-home,.pgs-legal,.pgs-article,.pgs-status,.pgs-shop,.pgs-scale,.pgs-pvp,.pgs-pdb,.pgs-news,.pgs-lgs,.pgs-faq,.pgs-eb,.pgs-about,.gp-grading)
  :is(.pgs-vcard,.pgs-crit,.pgs-stat,.pgs-quote,.pgs-feat,.pgs-split,.pgs-cta,.pgs-cc-box,.pgs-tbadge,.card,.fcard,.sheet,.contact,.note-pill,.lgs-hero,.gp-card,.gp-slab-card,.gp-cta,.gz-bpln,.panel,.feq,.pgs-slab-win,.lgs-pt,.cc,.cta,.form-box,.gj-panel,.gp-slab,.gz-stage,.lc,.lgs-chartcard,.news-cta,.notice,.pdb-search,.pvp-card,.pvp-cta,.pvp-fair,.req-card,.spec55,.stat,.sticker,.store-embed,.tier,.pdb-card){
    -webkit-backdrop-filter:blur(10px) saturate(140%);
            backdrop-filter:blur(10px) saturate(140%);
  }
  .pgs-btn-primary.pgs-btn-primary, .btn-p.btn-p, .gp-btn-primary.gp-btn-primary{
    -webkit-backdrop-filter:blur(8px) saturate(180%) brightness(1.10) !important;
            backdrop-filter:blur(8px) saturate(180%) brightness(1.10) !important;
  }
  .pgs-btn-ghost.pgs-btn-ghost, .btn-g.btn-g, .gp-btn-ghost.gp-btn-ghost{
    -webkit-backdrop-filter:blur(12px) saturate(125%) !important;
            backdrop-filter:blur(12px) saturate(125%) !important;
  }
  .pgs-home::after, .gp-grading::after{ opacity:.09 }
}

/* Ohne backdrop-filter (aeltere Browser) traegt der Flaechenton allein.
   Dann muss er deckender sein, sonst steht Text direkt auf dem Lichtgrund. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .pgs-glas.pgs-glas, .pgs-rcard.pgs-rcard{ background:rgba(18,18,24,.82) }
  .pgs-home::after, .pgs-legal::after, .pgs-article::after, .pgs-status::after,
  .pgs-shop::after, .pgs-scale::after, .pgs-pvp::after, .pgs-pdb::after,
  .pgs-news::after, .pgs-lgs::after, .pgs-faq::after, .pgs-eb::after,
  .pgs-about::after, .gp-grading::after{ opacity:.22 }
}