/* ==================================================================
   PGS KAUFPROZESS · HOLO-FOIL  (eingebaut in den Shop)
   Vorlage: grading-konfigurator-neu.html — von Mert abgenommen.
   Die Sprache der Sammler: Was gewählt ist, glänzt wie eine Holo-Karte
   — in Blau-Silber, nie im Regenbogen. Alles andere bleibt Anthrazit.
   Holo heißt in dieser Ansicht immer nur eins: „das ist gewählt".

   KAPSELUNG: Die Ansicht läuft im Theme. Jede Regel hängt an der
   Wurzelklasse .pgs-kn, jede eigene Klasse beginnt mit kn-, jede
   Variable mit --kn-, jede Animation mit kn-. Nichts hier wirkt
   außerhalb der Wurzel.

   GEWICHT: Die Wurzelklasse steht in jeder Regel DOPPELT
   (.pgs-kn.pgs-kn …). Das ändert nicht, was getroffen wird — es gibt
   den Regeln nur genug Gewicht, damit Element-Regeln eines Themes
   (.entry-content p, button, input …) hier nie gewinnen, egal in
   welcher Reihenfolge die Blätter geladen werden. Fokus-Regeln stehen
   dreifach, sie müssen auch die Shop-Regel für a/button/input schlagen.

   SCHRIFT UND LAUFWEITE: Der Shop setzt für JEDES Element in seiner
   Hülle Schriftart und Laufweite mit !important fest
   (shop.css: #pgs-shop-root *{font-family…;letter-spacing:normal}).
   Dagegen hilft kein Gewicht ohne !important. Deshalb trägt jede Regel
   hier, die eine Schriftart oder Laufweite setzt, denselben Wert noch
   einmal als Variable (--kn-ff, --kn-ls), und EINE Regel am Ende dieses
   Abschnitts gibt sie mit !important und höherem Gewicht zurück. Die
   Variablen vererben sich wie die Eigenschaften selbst. Wer hier eine
   Mono-Schrift oder Laufweite ergänzt, setzt die Variable dazu — der
   Prüfstand (tests/v1172-konfigurator-neu-check.js) verlangt es.
   ================================================================== */
@property --kn-foil-a{syntax:'<angle>';inherits:false;initial-value:0deg}

.pgs-kn{
  --kn-bg:#070809;
  --kn-line:rgba(255,255,255,.08);
  --kn-line-2:rgba(255,255,255,.13);
  --kn-line-3:rgba(255,255,255,.2);
  --kn-ink:#f3f4f6;          /* Titel, Zahlen          18,2:1 auf --kn-bg */
  --kn-txt:#c7cad1;          /* Fließtext              12,2:1 */
  --kn-muted:#8f949e;        /* Nebeninfo               6,6:1 (6,1:1 auf Glas) */
  --kn-acc:#5B8CFF;          /* Shop-Blau, der einzige Akzent */
  --kn-acc-hi:#6FA8FF;
  --kn-acc-glow:#8CC4FF;
  --kn-acc-ink:#a9cdff;      /* Akzent als Schrift     11,3:1 auf Glas */
  --kn-ok:#3FBF8F; --kn-warn:#E2B14C; --kn-err:#E06B6B;
  --kn-r-lg:20px; --kn-r:14px;
  --kn-ease:cubic-bezier(.22,1,.36,1);
  --kn-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --kn-mono:ui-monospace,"SF Mono",SFMono-Regular,Consolas,"Liberation Mono",monospace;
  --kn-foil:linear-gradient(135deg,#eef2f8 0%,#8CC4FF 30%,#f7f9fc 52%,#6FA8FF 74%,#c9d2e0 100%);
  --kn-metal:linear-gradient(105deg,#9aa0ad 0%,#e9ebf0 16%,#ffffff 30%,#c3c7d1 46%,#9aa0ad 60%,#eef0f4 76%,#c3c7d1 92%);
  --kn-oben:0px;             /* Unterkante einer klebenden Kopfzeile des Themes (setzt das Skript) */
  --kn-ausweich:0px;         /* Platz NEBEN einem Schwebeknopf unten rechts (setzt das Skript) */
  --kn-heben:0px;            /* … oder Abstand ÜBER ihm, wenn daneben zu wenig Platz ist */

  position:relative;isolation:isolate;
  margin:0;padding:0 0 8px;
  color:var(--kn-txt);
  font:400 15px/1.5 var(--kn-sans);--kn-ff:var(--kn-sans);
  letter-spacing:normal;--kn-ls:normal;text-align:left;text-transform:none;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;
}
/* Platz halten, bis das Skript gezeichnet hat — der Seitenfuß springt nicht nach. */
.pgs-kn:not(.is-bereit){min-height:70vh}

/* Ruhiger Grund: zwei weiche Lichtinseln, feines Korn. Liegt als eigene Ebene
   hinter dem Inhalt; im Shop läuft sie randlos über die ganze Breite (die
   Shop-Hülle schneidet sie ab), sonst bleibt sie in der Wurzel. */
.pgs-kn::before,.pgs-kn::after{content:"";position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1;pointer-events:none}
.pgs-portal .pgs-kn::before,.pgs-portal .pgs-kn::after{left:-100vw;right:-100vw}
.pgs-kn::before{
  background:
    radial-gradient(900px 520px at calc(50% - 360px) 340px,rgba(255,255,255,.05),transparent 62%),
    radial-gradient(760px 560px at calc(50% + 420px) 380px,rgba(91,140,255,.07),transparent 64%),
    var(--kn-bg);
}
.pgs-kn::after{
  opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------- Schutz gegen Theme-Stile ---------------- */
.pgs-kn,.pgs-kn.pgs-kn *,.pgs-kn.pgs-kn *::before,.pgs-kn.pgs-kn *::after{box-sizing:border-box}
.pgs-kn.pgs-kn p,.pgs-kn.pgs-kn ul,.pgs-kn.pgs-kn ol,.pgs-kn.pgs-kn li,.pgs-kn.pgs-kn figure,.pgs-kn.pgs-kn figcaption,.pgs-kn.pgs-kn section,.pgs-kn.pgs-kn header,.pgs-kn.pgs-kn aside{margin:0;padding:0;border:0;background:none;box-shadow:none;float:none;max-width:none}
.pgs-kn.pgs-kn ul,.pgs-kn.pgs-kn ol,.pgs-kn.pgs-kn li{list-style:none}
.pgs-kn.pgs-kn li::before,.pgs-kn.pgs-kn li::marker{content:none}
.pgs-kn.pgs-kn b{font-weight:700}
.pgs-kn.pgs-kn small{font-size:inherit}
.pgs-kn.pgs-kn label{margin:0;padding:0;font-weight:inherit;color:inherit}
.pgs-kn.pgs-kn button,.pgs-kn.pgs-kn input,.pgs-kn.pgs-kn textarea{
  margin:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:none;text-shadow:none;
  min-width:0;min-height:0;max-width:none;float:none;
}
.pgs-kn.pgs-kn button{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background:none;border:0;border-radius:0;padding:0;box-shadow:none;width:auto;height:auto;line-height:inherit;text-decoration:none;
}
.pgs-kn.pgs-kn input,.pgs-kn.pgs-kn textarea{-webkit-appearance:none;appearance:none;border-radius:0;box-shadow:none}
.pgs-kn.pgs-kn a{color:inherit;text-decoration:none;box-shadow:none;border:0;background:none}
/* fill:none nur an der svg-Wurzel: Formen mit eigenem fill-Attribut (alle Zeichnungen, jede Label-Zeile)
   behalten es; Symbole ohne eigenes fill erben nichts Fremdes (ein Theme mit svg{fill:…} färbte sie sonst zu). */
.pgs-kn.pgs-kn svg{display:block;max-width:none;height:auto;fill:none;--kn-ff:Helvetica,Arial,sans-serif;--kn-ls:normal}
/* Die Produktbilder: gegen Bild-Regeln eines Themes (max-width:100 %, Rahmen, Schatten, runde Ecken, Abstände). */
.pgs-kn.pgs-kn img{display:block;max-width:none;height:auto;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none}
/* hidden muss auch gegen display:flex der Hinweis-Kästen gewinnen. */
.pgs-kn.pgs-kn [hidden]{display:none !important}
/* Ein Klick genau auf ein Symbol im Knopf landet beim Knopf. */
.pgs-kn.pgs-kn button svg,.pgs-kn.pgs-kn a svg{pointer-events:none}
.pgs-kn.pgs-kn .kn-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pgs-kn.pgs-kn .kn-symbole{position:absolute;width:0;height:0;overflow:hidden}

/* Gegen die Schutzregel des Shops (#pgs-shop-root *{font-family…!important;letter-spacing:normal !important}):
   Schriftart und Laufweite kommen aus den Variablen, die jede Regel dieses Blatts neben ihrem Wert setzt.
   Ohne Variable gilt die Grundschrift ohne Laufweite — also genau das, was sonst geerbt würde.
   Die Label-Schrift der Slab-Zeichnungen (Helvetica, wie der echte Druck) setzt die svg-Regel oben. */
#pgs-shop-root .pgs-kn *{font-family:var(--kn-ff,var(--kn-sans)) !important;letter-spacing:var(--kn-ls,normal) !important}

/* Sichtbarer Fokus für die Tastatur — überall gleich, gegen die Shop-Regel gesichert. */
.pgs-kn.pgs-kn.pgs-kn :focus-visible{outline:2px solid var(--kn-acc-glow);outline-offset:3px;box-shadow:none}

.pgs-kn.pgs-kn .kn-laden,.pgs-kn.pgs-kn .kn-ohne-js{padding:48px 0;color:var(--kn-muted);font-size:15px;text-align:center}
.pgs-kn.pgs-kn .kn-ohne-js a{color:var(--kn-acc-ink);text-decoration:underline;text-underline-offset:3px}

/* ============================ Gerüst ============================ */
.pgs-kn.pgs-kn .kn-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;min-height:64px}
.pgs-kn.pgs-kn .kn-back{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;margin-left:-4px;border-radius:10px;
  color:var(--kn-muted);font-size:14px;font-weight:600;transition:color .2s;
}
.pgs-kn.pgs-kn .kn-back:hover{color:var(--kn-ink)}
.pgs-kn.pgs-kn .kn-vorschau{
  display:inline-flex;align-items:center;min-height:26px;padding:4px 10px;border-radius:999px;
  border:1px solid rgba(226,177,76,.42);background:rgba(226,177,76,.12);
  color:#f2d492;font:600 11px/1.3 var(--kn-mono);--kn-ff:var(--kn-mono);letter-spacing:.06em;--kn-ls:.06em;text-transform:uppercase;
}
.pgs-kn.pgs-kn .kn-cols{display:grid;grid-template-columns:minmax(0,1fr) 368px;gap:40px;align-items:start}
.pgs-kn.pgs-kn .kn-main{min-width:0}

.pgs-kn.pgs-kn .kn-kicker{color:var(--kn-muted);font:600 11px/1.3 var(--kn-mono);--kn-ff:var(--kn-mono);letter-spacing:.14em;--kn-ls:.14em;text-transform:uppercase}

/* Schrittkopf: die Nummer steckt in einer Mini-Karte — wie die Sammelnummer
   unten auf jeder Karte. Erledigt = Holo-Rand. */
.pgs-kn.pgs-kn .kn-sec{margin-top:56px;scroll-margin-top:calc(var(--kn-oben) + 16px)}
.pgs-kn.pgs-kn .kn-sec:first-of-type{margin-top:0}
.pgs-kn.pgs-kn .kn-step{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-bottom:20px}
.pgs-kn.pgs-kn .kn-pip{
  position:relative;flex:none;width:22px;height:30px;border-radius:4px;
  display:grid;place-items:center;
  border:1px solid var(--kn-line-3);background:rgba(255,255,255,.03);
  color:var(--kn-txt);font:600 12px/1 var(--kn-mono);--kn-ff:var(--kn-mono);
  transition:background .3s,color .3s;
}
.pgs-kn.pgs-kn .kn-pip::after{content:"";position:absolute;inset:2px;border-radius:2px;border:1px solid rgba(255,255,255,.06)}
.pgs-kn.pgs-kn .kn-pip.is-done{border-color:transparent;background:rgba(111,168,255,.08);color:var(--kn-ink)}
.pgs-kn.pgs-kn .kn-pip.is-done::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:var(--kn-foil);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
}
.pgs-kn.pgs-kn .kn-pip.is-done::after{border-color:rgba(140,196,255,.22)}
.pgs-kn.pgs-kn .kn-h{
  margin:0;padding:0;border:0;background:none;
  color:var(--kn-ink);font-family:var(--kn-sans);--kn-ff:var(--kn-sans);font-weight:700;text-transform:none;text-shadow:none;
  font-size:clamp(22px,2.3vw,28px);letter-spacing:-.022em;--kn-ls:-.022em;line-height:1.15;
  flex:0 1 auto;min-width:0;overflow-wrap:break-word;
}
.pgs-kn.pgs-kn .kn-h::before,.pgs-kn.pgs-kn .kn-h::after{content:none}
.pgs-kn.pgs-kn .kn-h--1{font-size:clamp(28px,3.1vw,36px);letter-spacing:-.026em;--kn-ls:-.026em;line-height:1.1}
.pgs-kn.pgs-kn .kn-h--3{flex:none;min-width:0;font-size:18px;letter-spacing:-.01em;--kn-ls:-.01em}
.pgs-kn.pgs-kn .kn-step .kn-badge{flex:none}
.pgs-kn.pgs-kn .kn-lede{margin:-10px 0 20px 36px;color:var(--kn-muted);font-size:14px}

.pgs-kn.pgs-kn .kn-badge{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  font:700 11px/1 var(--kn-mono);--kn-ff:var(--kn-mono);letter-spacing:.08em;--kn-ls:.08em;text-transform:uppercase;white-space:nowrap;
}
/* Fast deckender Grund: die Folie läuft über die Plakette, und auf halb-
   durchsichtigem Blau fiel „NEU" dabei auf 2,2 : 1. */
.pgs-kn.pgs-kn .kn-badge--new{background:rgba(14,24,48,.88);border:1px solid rgba(140,196,255,.5);color:#d6e7ff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pgs-kn.pgs-kn .kn-badge--opt{background:rgba(255,255,255,.05);border:1px solid var(--kn-line-2);color:var(--kn-txt)}
.pgs-kn.pgs-kn .kn-badge--must{background:rgba(226,177,76,.12);border:1px solid rgba(226,177,76,.42);color:#f2d492}
.pgs-kn.pgs-kn .kn-badge--weg{background:rgba(40,16,18,.88);border:1px solid rgba(224,107,107,.5);color:#f6c4c4}

/* Das Holo-Siegel ersetzt den Radiokreis — rund wie der Hologramm-Sticker
   auf einem Grading-Label. Leer = Ring, gewählt = Folie mit Haken. */
.pgs-kn.pgs-kn .kn-seal{
  position:relative;flex:none;width:22px;height:22px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.28);background:rgba(6,7,9,.5);
  transition:background .3s,box-shadow .3s,border-color .3s;
}
.pgs-kn.pgs-kn .kn-seal::after{
  content:"";position:absolute;left:50%;top:45%;width:5px;height:10px;
  border:solid #0a0c10;border-width:0 2px 2px 0;
  transform:translate(-50%,-50%) rotate(45deg) scale(.3);opacity:0;
  transition:transform .3s var(--kn-ease),opacity .2s;
}
.pgs-kn.pgs-kn input:checked + .kn-face .kn-seal,
.pgs-kn.pgs-kn input:checked + .kn-opt__box .kn-seal{
  border-color:transparent;
  background:conic-gradient(from 210deg,#8CC4FF,#f5f8fc,#6FA8FF,#b3bdcd,#8CC4FF,#ffffff,#5B8CFF,#dfe6f0,#8CC4FF);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 0 16px rgba(111,168,255,.5);
}
.pgs-kn.pgs-kn input:checked + .kn-face .kn-seal::after,
.pgs-kn.pgs-kn input:checked + .kn-opt__box .kn-seal::after{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(1)}

/* ================ SCHRITT 1: die Kacheln wie Karten ================ */
.pgs-kn.pgs-kn .kn-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pgs-kn.pgs-kn .kn-tile{
  position:relative;display:flex;border-radius:var(--kn-r-lg);
  --kn-rx:0deg;--kn-ry:0deg;--kn-mx:.5;--kn-my:.3;--kn-px:0;--kn-py:0;
  /* Wie eine Karte, die man im Licht dreht: die Neigung setzt das Skript. */
  transform:perspective(1000px) rotateX(var(--kn-rx)) rotateY(var(--kn-ry));
  transition:transform .7s var(--kn-ease);
}
.pgs-kn.pgs-kn .kn-tile.is-live{transition:transform .12s ease-out}
/* Flächig statt 1 × 1 px: beim Fokus holt der Browser dann die ganze Kachel
   ins Bild, nicht nur einen Punkt oben links. */
.pgs-kn.pgs-kn .kn-tile > input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}

.pgs-kn.pgs-kn .kn-face{
  /* v1.1.75 (Mert 12.10.2026): oben die Bildfläche mit dem ganzen, aufrechten Slab (--kn-ah = Höhe des Bilds),
     darunter der Text, unten der Knopf. 52 px Kopf: dort stehen „Neu" und das Auswahl-Zeichen, ohne den Slab zu verdecken. */
  position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-start;
  --kn-ah:340px; /* v1.1.76 (Mert 12.10.2026, Beispiel B): ganzer Slab, größer — vorher 264px */
  min-height:392px;padding:52px 20px 88px;border-radius:inherit;
  overflow:hidden;isolation:isolate;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.018) 60%);
  border:1px solid var(--kn-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 48px -24px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(20px) saturate(1.15);backdrop-filter:blur(20px) saturate(1.15);
  transition:border-color .3s var(--kn-ease),box-shadow .5s var(--kn-ease),background .5s var(--kn-ease);
}
.pgs-kn.pgs-kn .kn-face:hover{border-color:var(--kn-line-2)}
.pgs-kn.pgs-kn .kn-face::before{
  content:"";position:absolute;inset:7px;z-index:5;border-radius:13px;pointer-events:none;
  border:1px solid rgba(255,255,255,.045);transition:border-color .4s;
}
.pgs-kn.pgs-kn .kn-tile > input:checked + .kn-face{
  border-color:transparent;
  background:linear-gradient(180deg,rgba(111,168,255,.09),rgba(255,255,255,.02) 60%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(140,196,255,.1),0 28px 60px -22px rgba(64,112,230,.55);
}
.pgs-kn.pgs-kn .kn-tile > input:checked + .kn-face::before{border-color:rgba(190,220,255,.14)}
.pgs-kn.pgs-kn.pgs-kn .kn-tile > input:focus-visible + .kn-face{outline:2px solid var(--kn-acc-glow);outline-offset:4px}
/* Gerade nicht buchbar: die Kachel bleibt stehen, lässt sich aber nicht wählen. */
.pgs-kn.pgs-kn .kn-tile.is-weg .kn-face{cursor:not-allowed}
.pgs-kn.pgs-kn .kn-tile.is-weg .kn-art,.pgs-kn.pgs-kn .kn-tile.is-weg .kn-face__body{opacity:.5}

.pgs-kn.pgs-kn .kn-spot{position:absolute;inset:0;z-index:0;background:radial-gradient(78% 46% at 50% 30%,rgba(255,255,255,.07),transparent 72%)}
.pgs-kn.pgs-kn .kn-tile > input:checked + .kn-face .kn-spot{background:radial-gradient(78% 46% at 50% 30%,rgba(111,168,255,.22),transparent 72%)}

/* v1.1.75 (Mert 12.10.2026: „die Slabs sollen senkrecht von oben nach unten, nicht mehr schräg, da reinpassen"):
   Der Slab steht AUFRECHT (Label oben), gerade und GANZ in der Bildfläche der Kachel — nichts dreht ihn, nichts
   schneidet ihn an. Die Bildfläche ist bei allen drei Kacheln gleich hoch (--kn-ah); das schmalere Booster-Case
   steht darin mittig. Vorher: ca. 45° gedreht, nah herangeholt und angeschnitten — das gilt nicht mehr.
   Zwei Hüllen wie bisher: Parallaxe (Maus) und das leise Schweben der gewählten Kachel — beide verschieben nur
   um wenige Pixel, sie drehen nicht. */
.pgs-kn.pgs-kn .kn-art{position:relative;z-index:1;flex:none;display:flex;justify-content:center;height:var(--kn-ah);margin:0 0 18px;pointer-events:none}
.pgs-kn.pgs-kn .kn-art__par{display:block;transform:translate3d(calc(var(--kn-px) * -8px),calc(var(--kn-py) * -6px),0);transition:transform .7s var(--kn-ease)}
.pgs-kn.pgs-kn .kn-tile.is-live .kn-art__par{transition:transform .12s ease-out}
.pgs-kn.pgs-kn .kn-art__glide{
  display:block;transform:none;transform-origin:50% 50%;
  filter:drop-shadow(0 14px 16px rgba(0,0,0,.6));
}
.pgs-kn.pgs-kn .kn-tile > input:checked + .kn-face .kn-art__glide{animation:kn-glide 7s ease-in-out infinite}
@keyframes kn-glide{
  0%,100%{transform:translate3d(0,0,0)}
  50%    {transform:translate3d(0,-4px,0)}
}
/* Bild und Rückfall-Zeichnung in der Kachel: feste Höhe, Breite aus dem Seitenverhältnis — so bleibt der Slab ganz. */
.pgs-kn.pgs-kn .kn-art .kn-sb{display:block}
.pgs-kn.pgs-kn .kn-art .kn-sb > .kn-sb__img,
.pgs-kn.pgs-kn .kn-art .kn-sb > svg{display:block;width:auto;max-width:none;height:var(--kn-ah)}
/* v1.1.77 (Mert 12.10.2026: „bei Booster Grading auch so anpassen, kann ruhig in die Schrift eingehen"): Das Booster-Case ist
   schmaler und höher als die Karten-Schale und wirkte bei gleicher Höhe kleiner. Jetzt ist es so BREIT wie die anderen Slabs
   (Faktor 0,5981 / 0,4755 = 1,2578) und ragt dafür unten in den Textbereich hinein. */
.pgs-kn.pgs-kn .kn-prod--booster .kn-art{align-items:flex-start}
.pgs-kn.pgs-kn .kn-prod--booster .kn-art .kn-sb > .kn-sb__img,
.pgs-kn.pgs-kn .kn-prod--booster .kn-art .kn-sb > svg{height:calc(var(--kn-ah) * 1.2578)}

/* Das echte Produktbild statt der Zeichnung (Mert 12.10.2026) — das Foto steht hochkant, Label oben.
   Form „quer" (Kachel, Kopf des Details-Fensters): das Foto liegt um −90° gedreht im selben Quer-Kasten wie die
   Zeichnung (135 × 80, Label links). Drehung, Gleiten und jede Bildschirmbreite der Kachel gelten damit unverändert,
   und das Label sitzt genau dort, wo das gezeichnete saß: Maßstab aus der Label-Länge (69 von 135), Lage aus der
   Label-Mitte (15,5 | 40). --kn-bw = Breite des stehenden Bilds, --kn-bl = seine Mitte, beides in % der Kastenbreite
   (Zahlen aus dem Erzeuger-Werkzeug der Bilder). Das Booster-Case ist größer als die Karten-Schale: bei gleich großem
   Label ragt es über den Kasten hinaus — die Kachel schneidet es ab wie die anderen.
   Form „hoch": aufrecht und ganz. Mit .is-zeichnung steht die Zeichnung im Kasten (das Bild hat nicht geladen). */
.pgs-kn.pgs-kn .kn-sb{display:block;position:relative}
.pgs-kn.pgs-kn .kn-sb--quer{height:0;padding-top:59.259%;--kn-bw:61%;--kn-bl:50.77%}
.pgs-kn.pgs-kn .kn-sb--quer.kn-sb--booster{--kn-bw:69.28%;--kn-bl:66.79%}
.pgs-kn.pgs-kn .kn-sb--quer > .kn-sb__img{position:absolute;left:var(--kn-bl);top:50%;width:var(--kn-bw);transform:translate(-50%,-50%) rotate(-90deg)}
.pgs-kn.pgs-kn .kn-sb--quer.is-zeichnung{height:auto;padding-top:0}
.pgs-kn.pgs-kn .kn-sb--hoch > .kn-sb__img{width:100%}

/* Schleier: oben Bühne, unten ruhiger Grund für die Schrift. Er beginnt erst UNTER dem Slab (52 px Kopf + Bildhöhe)
   — der Slab selbst wird nicht abgedunkelt. */
.pgs-kn.pgs-kn .kn-scrim{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(9,10,12,0) calc(var(--kn-ah) + 52px),rgba(9,10,12,.8) calc(var(--kn-ah) + 84px),rgba(9,10,12,.92) 100%);
}

/* Die Folie: Blau-Silber-Bänder + Glitzerkorn, per „screen" aufgehellt.
   Über der Schrift nimmt die Maske sie auf 12–16 % zurück. */
.pgs-kn.pgs-kn .kn-foil,.pgs-kn.pgs-kn .kn-glare{
  position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  opacity:0;transition:opacity .6s var(--kn-ease);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(var(--kn-ah) + 32px),rgba(0,0,0,.4) calc(var(--kn-ah) + 62px),rgba(0,0,0,.16) calc(var(--kn-ah) + 96px),rgba(0,0,0,.12) 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 calc(var(--kn-ah) + 32px),rgba(0,0,0,.4) calc(var(--kn-ah) + 62px),rgba(0,0,0,.16) calc(var(--kn-ah) + 96px),rgba(0,0,0,.12) 100%);
}
.pgs-kn.pgs-kn .kn-foil{
  mix-blend-mode:screen;
  background-image:linear-gradient(115deg,
    transparent 16%,rgba(111,168,255,.42) 28%,rgba(238,243,251,.62) 34%,rgba(140,196,255,.4) 40%,transparent 50%,
    rgba(164,174,192,.2) 60%,rgba(140,196,255,.42) 68%,rgba(246,249,253,.5) 72%,transparent 82%);
  background-size:280% 280%;background-position:10% 10%;
}
/* v1.1.76 (Mert 12.10.2026: „die Punkte in der Animation weg"): Die Glitzer-Punkte der Folie sind abgeschaltet — der weiche
   Lichtlauf bleibt. Die Regel darunter bleibt stehen (nichts gelöscht), „display:none" nimmt sie aus dem Bild. */
.pgs-kn.pgs-kn .kn-foil::after{display:none !important}
.pgs-kn.pgs-kn .kn-foil::after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.95) 0 .7px,transparent 1.4px),
    radial-gradient(circle at 70% 80%,rgba(214,232,255,.9) 0 .6px,transparent 1.3px),
    radial-gradient(circle at 45% 55%,rgba(255,255,255,.8) 0 .5px,transparent 1.1px);
  background-size:17px 19px,23px 29px,37px 31px;
  -webkit-mask-image:linear-gradient(115deg,transparent 22%,#000 32%,transparent 44%,transparent 62%,#000 70%,transparent 80%);
          mask-image:linear-gradient(115deg,transparent 22%,#000 32%,transparent 44%,transparent 62%,#000 70%,transparent 80%);
  -webkit-mask-size:280% 280%;mask-size:280% 280%;
  -webkit-mask-position:10% 10%;mask-position:10% 10%;
}
.pgs-kn.pgs-kn .kn-tile > input:checked + .kn-face .kn-foil{opacity:1;animation:kn-foil 8s ease-in-out infinite alternate}
.pgs-kn.pgs-kn .kn-tile > input:checked + .kn-face .kn-foil::after{animation:kn-foil-m 8s ease-in-out infinite alternate}
@keyframes kn-foil{from{background-position:0% 0%}to{background-position:100% 100%}}
@keyframes kn-foil-m{
  from{-webkit-mask-position:0% 0%;mask-position:0% 0%}
  to  {-webkit-mask-position:100% 100%;mask-position:100% 100%}
}
.pgs-kn.pgs-kn .kn-tile.is-live > input:checked + .kn-face .kn-foil{animation:none;background-position:calc(var(--kn-mx) * 100%) calc(var(--kn-my) * 100%)}
.pgs-kn.pgs-kn .kn-tile.is-live > input:checked + .kn-face .kn-foil::after{
  animation:none;
  -webkit-mask-position:calc(var(--kn-mx) * 100%) calc(var(--kn-my) * 100%);
          mask-position:calc(var(--kn-mx) * 100%) calc(var(--kn-my) * 100%);
}
.pgs-kn.pgs-kn .kn-glare{z-index:4;background:radial-gradient(circle at calc(var(--kn-mx) * 100%) calc(var(--kn-my) * 100%),rgba(255,255,255,.15) 0%,rgba(255,255,255,.05) 26%,transparent 52%)}
.pgs-kn.pgs-kn .kn-tile.is-live .kn-glare{opacity:1}

.pgs-kn.pgs-kn .kn-face__top{position:absolute;z-index:6;top:18px;left:18px;right:60px;display:flex;flex-wrap:wrap;gap:6px}
.pgs-kn.pgs-kn .kn-face .kn-seal{position:absolute;z-index:6;top:12px;right:14px;width:34px;height:34px;border-width:2px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pgs-kn.pgs-kn .kn-face .kn-seal::after{width:8px;height:15px;border-width:0 2.5px 2.5px 0}
.pgs-kn.pgs-kn .kn-face__body{position:relative;z-index:6;display:block;margin-top:auto}
.pgs-kn.pgs-kn .kn-face__name{display:block;overflow-wrap:anywhere;color:var(--kn-ink);font-size:24px;font-weight:700;letter-spacing:-.022em;--kn-ls:-.022em;line-height:1.12;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.pgs-kn.pgs-kn .kn-face__meta{display:block;margin-top:8px;color:var(--kn-txt);font-size:13px;line-height:1.45}
.pgs-kn.pgs-kn .kn-face__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px;margin-top:16px}
.pgs-kn.pgs-kn .kn-face__eur{color:var(--kn-ink);font-size:22px;font-weight:700;letter-spacing:-.02em;--kn-ls:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pgs-kn.pgs-kn .kn-face__eur.is-quote{font-size:16px}
.pgs-kn.pgs-kn .kn-face__per{color:var(--kn-txt);font-size:13px;white-space:nowrap}

/* Holo-Leuchtkante der gewählten Kachel — ein Ring, der langsam kreist. */
.pgs-kn.pgs-kn .kn-ring{
  position:absolute;inset:0;z-index:7;border-radius:inherit;padding:1px;pointer-events:none;
  opacity:0;transition:opacity .5s var(--kn-ease);
  background:conic-gradient(from var(--kn-foil-a),#8CC4FF,#f2f5fa 12%,#6FA8FF 25%,#8f98a8 37%,#8CC4FF 50%,#ffffff 62%,#5B8CFF 75%,#c9d2e0 87%,#8CC4FF);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
}
.pgs-kn.pgs-kn .kn-tile > input:checked ~ .kn-ring{opacity:1;animation:kn-spin 9s linear infinite}
@keyframes kn-spin{to{--kn-foil-a:360deg}}

/* „Details" liegt AUSSERHALB des <label> — sein Klick wählt nichts mit aus. */
.pgs-kn.pgs-kn .kn-more{
  position:absolute;z-index:8;left:20px;bottom:20px;
  /* v1.1.75 (Mert 12.10.2026: „die Buttons sollen größer"): 48 px hoch, 15 px Schrift, deutlicher Rand. */
  display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 22px 0 16px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.34);color:var(--kn-ink);
  font-size:15px;font-weight:600;line-height:1;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:background .2s,border-color .2s;
}
.pgs-kn.pgs-kn .kn-more:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55)}
.pgs-kn.pgs-kn .kn-more svg{width:19px;height:19px;color:var(--kn-acc-glow)}

/* ======================== Glasflächen ======================== */
.pgs-kn.pgs-kn .kn-panel{
  position:relative;padding:24px;border-radius:var(--kn-r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.022));
  border:1px solid var(--kn-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(24px) saturate(1.15);backdrop-filter:blur(24px) saturate(1.15);
}

/* „Position ändern" steht über allem, damit klar ist, was gerade bearbeitet wird. */
.pgs-kn.pgs-kn .kn-posedit{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-bottom:24px;padding:10px 10px 10px 16px;border-radius:14px;
  background:rgba(91,140,255,.1);border:1px solid rgba(140,196,255,.35);
  color:#d6e7ff;font-size:14px;font-weight:600;
  scroll-margin-top:calc(var(--kn-oben) + 16px);
}
.pgs-kn.pgs-kn .kn-posedit svg{color:var(--kn-acc-glow)}
.pgs-kn.pgs-kn .kn-posedit__l{display:inline-flex;align-items:center;gap:10px}
.pgs-kn.pgs-kn.pgs-kn .kn-posedit:focus{outline:none}
.pgs-kn.pgs-kn.pgs-kn .kn-posedit:focus-visible{outline:2px solid var(--kn-acc-glow);outline-offset:3px}

/* ======================== Menge ======================== */
.pgs-kn.pgs-kn .kn-qty{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.pgs-kn.pgs-kn .kn-stepper{display:inline-flex;align-items:stretch;height:56px;border-radius:16px;overflow:hidden;background:rgba(0,0,0,.35);border:1px solid var(--kn-line-2)}
.pgs-kn.pgs-kn .kn-stepper button{width:52px;border:0;background:none;color:var(--kn-ink);font-size:22px;line-height:1;transition:background .2s}
.pgs-kn.pgs-kn .kn-stepper button:hover{background:rgba(111,168,255,.12)}
.pgs-kn.pgs-kn.pgs-kn .kn-stepper button:focus-visible{outline-offset:-3px}
.pgs-kn.pgs-kn .kn-stepper input{
  width:72px;height:auto;padding:0;border:0;border-left:1px solid var(--kn-line);border-right:1px solid var(--kn-line);background:none;
  color:var(--kn-ink);text-align:center;font:600 24px/1 var(--kn-mono);--kn-ff:var(--kn-mono);-moz-appearance:textfield;
}
.pgs-kn.pgs-kn .kn-stepper input::-webkit-outer-spin-button,.pgs-kn.pgs-kn .kn-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pgs-kn.pgs-kn.pgs-kn .kn-stepper input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--kn-acc-glow)}
.pgs-kn.pgs-kn .kn-chips{display:flex;flex-wrap:wrap;gap:8px}
.pgs-kn.pgs-kn .kn-chip{
  min-width:56px;height:48px;padding:0 16px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--kn-line-2);color:var(--kn-txt);
  font:600 14px/1 var(--kn-mono);--kn-ff:var(--kn-mono);transition:border-color .2s,color .2s,background .2s;
}
.pgs-kn.pgs-kn .kn-chip:hover{border-color:var(--kn-line-3);color:var(--kn-ink);background:rgba(255,255,255,.07)}
.pgs-kn.pgs-kn .kn-chip.is-active{border-color:rgba(140,196,255,.6);color:var(--kn-ink);background:rgba(111,168,255,.14)}
.pgs-kn.pgs-kn .kn-rabatt{margin-top:20px;padding-top:18px;border-top:1px solid var(--kn-line);color:var(--kn-txt);font-size:14px;min-height:40px}
.pgs-kn.pgs-kn .kn-rabatt b{color:var(--kn-ink);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pgs-kn.pgs-kn .kn-rabatt .kn-acc{color:var(--kn-acc-ink)}
.pgs-kn.pgs-kn .kn-rabatt .kn-dot{margin:0 6px;color:var(--kn-muted)}
.pgs-kn.pgs-kn .kn-rabatt .kn-mit{color:var(--kn-muted)}
.pgs-kn.pgs-kn .kn-rabatt .kn-spar{
  display:inline-flex;align-items:center;height:20px;margin-left:8px;padding:0 7px;border-radius:999px;
  background:rgba(63,191,143,.12);border:1px solid rgba(63,191,143,.36);
  color:#8fe3c0;font:700 11px/1 var(--kn-mono);--kn-ff:var(--kn-mono);vertical-align:1px;white-space:nowrap;
}
/* Die Mengenstufen stehen immer da — kein Aufklapper mehr (Mert 12.10.2026). Als umbrechende Zeile statt eines
   Rasters: die letzte Reihe füllt die Breite, auf schmalen Bildschirmen bleibt so kein leeres Feld stehen
   (5 Stufen in 2 Spalten). Die Überschrift darüber gibt es nur für B2B-Kunden. */
.pgs-kn.pgs-kn .kn-tiers{margin-top:14px}
.pgs-kn.pgs-kn .kn-tiers__t{margin-bottom:8px}
.pgs-kn.pgs-kn .kn-tgrid{display:flex;flex-wrap:wrap;gap:1px;border-radius:12px;overflow:hidden;background:var(--kn-line);border:1px solid var(--kn-line)}
.pgs-kn.pgs-kn .kn-tgrid > div{flex:1 1 104px;min-width:0;padding:10px 12px;background:#0f1013}
.pgs-kn.pgs-kn .kn-tgrid span{display:block;color:var(--kn-muted);font:500 12px/1.2 var(--kn-mono);--kn-ff:var(--kn-mono)}
.pgs-kn.pgs-kn .kn-tgrid b{display:block;margin-top:4px;color:var(--kn-ink);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.pgs-kn.pgs-kn .kn-tgrid .is-now{background:linear-gradient(180deg,rgba(111,168,255,.12),#0f1013)}
.pgs-kn.pgs-kn .kn-tgrid .is-now span{color:var(--kn-acc-ink)}
.pgs-kn.pgs-kn .kn-qtyhint{margin-top:6px;color:var(--kn-txt);font-size:13px}
.pgs-kn.pgs-kn .kn-qtyhint a{display:inline-flex;align-items:center;min-height:44px;color:var(--kn-acc-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ======================== Optionen (Tempo, Art) ======================== */
.pgs-kn.pgs-kn .kn-opts{display:grid;gap:8px}
.pgs-kn.pgs-kn .kn-opts--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pgs-kn.pgs-kn .kn-opt{position:relative;display:block}
.pgs-kn.pgs-kn .kn-opt > input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.pgs-kn.pgs-kn .kn-opt__box{
  position:relative;display:grid;align-items:center;column-gap:16px;row-gap:2px;
  grid-template-columns:22px minmax(0,1fr) minmax(150px,auto) 84px;
  grid-template-areas:"seal main time price";
  min-height:64px;padding:12px 20px 12px 18px;border-radius:var(--kn-r);cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--kn-line);
  transition:background .2s,border-color .2s;
}
.pgs-kn.pgs-kn .kn-opts--2 .kn-opt__box{grid-template-columns:22px minmax(0,1fr) auto;grid-template-areas:"seal main price"}
.pgs-kn.pgs-kn .kn-opt__box:hover{background:rgba(255,255,255,.05);border-color:var(--kn-line-2)}
.pgs-kn.pgs-kn .kn-opt__box::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  opacity:0;transition:opacity .3s;
  background:linear-gradient(100deg,rgba(140,196,255,.95),rgba(242,246,251,.85) 22%,rgba(111,168,255,.55) 48%,rgba(150,160,178,.4) 72%,rgba(140,196,255,.85));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
}
.pgs-kn.pgs-kn .kn-opt > input:checked + .kn-opt__box{border-color:transparent;background:linear-gradient(90deg,rgba(111,168,255,.1),rgba(255,255,255,.025) 70%)}
.pgs-kn.pgs-kn .kn-opt > input:checked + .kn-opt__box::before{opacity:1}
.pgs-kn.pgs-kn.pgs-kn .kn-opt > input:focus-visible + .kn-opt__box{outline:2px solid var(--kn-acc-glow);outline-offset:3px}
/* Nur eine Stufe: nichts zu wählen, aber Zeit und Preis bleiben sichtbar. */
.pgs-kn.pgs-kn .kn-opt__box.is-single{
  grid-template-columns:minmax(0,1fr) minmax(150px,auto) 84px;grid-template-areas:"main time price";
  cursor:default;border-color:transparent;background:linear-gradient(90deg,rgba(111,168,255,.08),rgba(255,255,255,.025) 70%);
}
.pgs-kn.pgs-kn .kn-opt__box.is-single::before{opacity:.7}
/* Stufe gerade nicht buchbar */
.pgs-kn.pgs-kn .kn-opt.is-weg .kn-opt__box{cursor:not-allowed;background:rgba(255,255,255,.015)}
.pgs-kn.pgs-kn .kn-opt.is-weg .kn-opt__box:hover{border-color:var(--kn-line)}
.pgs-kn.pgs-kn .kn-opt.is-weg .kn-seal,.pgs-kn.pgs-kn .kn-opt.is-weg .kn-opt__price{opacity:.45}
.pgs-kn.pgs-kn .kn-opt__box > .kn-seal{grid-area:seal}
.pgs-kn.pgs-kn .kn-opt__main{grid-area:main;min-width:0}
.pgs-kn.pgs-kn .kn-opt__name{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;overflow-wrap:anywhere;color:var(--kn-ink);font-size:16px;font-weight:600;line-height:1.3}
.pgs-kn.pgs-kn .kn-opt__sub{display:block;margin-top:2px;color:var(--kn-muted);font-size:13px;line-height:1.35}
.pgs-kn.pgs-kn .kn-opt__time{grid-area:time;color:var(--kn-txt);font:500 13px/1.35 var(--kn-mono);--kn-ff:var(--kn-mono)}
.pgs-kn.pgs-kn .kn-opt__time small{display:block;margin-top:2px;color:var(--kn-warn);font:500 12px/1.35 var(--kn-sans);--kn-ff:var(--kn-sans);white-space:normal}
.pgs-kn.pgs-kn .kn-opt__price{grid-area:price;justify-self:end;color:var(--kn-ink);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pgs-kn.pgs-kn .kn-opt__price.is-incl{color:var(--kn-muted);font-size:14px;font-weight:500}

/* ======================== Karten benennen ======================== */
.pgs-kn.pgs-kn .kn-nrow{display:grid;grid-template-columns:28px minmax(0,1fr) 48px;align-items:center;gap:8px;margin-bottom:8px}
.pgs-kn.pgs-kn .kn-nrow.hat-foto{grid-template-columns:28px minmax(0,1fr) 24px 48px}
.pgs-kn.pgs-kn .kn-nrow__i{color:var(--kn-muted);font:500 13px/1 var(--kn-mono);--kn-ff:var(--kn-mono);text-align:center}
.pgs-kn.pgs-kn .kn-nrow__foto{display:grid;place-items:center;color:var(--kn-acc-glow)}
/* Mit Foto-Knopf hat JEDE Zeile dieselben vier Spalten — ob ein Foto da ist oder nicht (nichts springt). */
.pgs-kn.pgs-kn .kn-nrow.mit-foto{grid-template-columns:28px minmax(0,1fr) 48px 48px}
.pgs-kn.pgs-kn .kn-fotobtn{
  position:relative;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.04);border:1px solid var(--kn-line-2);color:var(--kn-txt);
  transition:background .2s,border-color .2s,color .2s;
}
.pgs-kn.pgs-kn .kn-fotobtn:hover{background:rgba(255,255,255,.08);border-color:var(--kn-line-3);color:var(--kn-ink)}
.pgs-kn.pgs-kn .kn-fotobtn > svg{width:18px;height:18px}
/* Foto da: der Knopf leuchtet im Akzent und trägt oben rechts einen Haken. */
.pgs-kn.pgs-kn .kn-fotobtn.is-da{background:rgba(111,168,255,.14);border-color:rgba(140,196,255,.55);color:var(--kn-acc-glow)}
.pgs-kn.pgs-kn .kn-fotobtn__ok{
  position:absolute;top:-5px;right:-5px;width:16px;height:16px;border-radius:50%;display:none;place-items:center;
  background:var(--kn-ok);color:#06140e;
}
.pgs-kn.pgs-kn .kn-fotobtn__ok svg{width:10px;height:10px}
.pgs-kn.pgs-kn .kn-fotobtn.is-da .kn-fotobtn__ok{display:grid}
/* Lädt hoch oder erkennt gerade: das Zeichen tritt zurück, ein Ring dreht sich davor. */
.pgs-kn.pgs-kn .kn-fotobtn.is-laedt{cursor:progress}
.pgs-kn.pgs-kn .kn-fotobtn.is-laedt > svg{opacity:.3}
.pgs-kn.pgs-kn .kn-fotobtn.is-laedt .kn-fotobtn__ok{display:none}
.pgs-kn.pgs-kn .kn-fotobtn.is-laedt::after{
  content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
  border:2px solid rgba(255,255,255,.2);border-top-color:var(--kn-acc-glow);animation:kn-dreh .8s linear infinite;
}
@keyframes kn-dreh{to{transform:rotate(360deg)}}
.pgs-kn.pgs-kn .kn-fotoerr{margin:4px 0 0;padding:10px 12px;border-radius:10px;background:rgba(224,107,107,.08);border:1px solid rgba(224,107,107,.32);color:#f2cccc;font-size:13px;line-height:1.45}
.pgs-kn.pgs-kn .kn-fototipp{display:flex;align-items:flex-start;gap:8px;margin-top:12px;color:var(--kn-muted);font-size:13px;line-height:1.45}
.pgs-kn.pgs-kn .kn-fototipp svg{flex:none;margin-top:2px;color:var(--kn-acc-glow)}
.pgs-kn.pgs-kn .kn-field{
  display:block;width:100%;height:48px;padding:0 14px;border-radius:12px;
  background:rgba(0,0,0,.32);border:1px solid var(--kn-line-2);color:var(--kn-ink);font-size:15px;line-height:1.3;
  transition:border-color .2s,box-shadow .2s;
  scroll-margin-bottom:104px;scroll-margin-top:calc(var(--kn-oben) + 16px);
}
.pgs-kn.pgs-kn .kn-field::placeholder{color:#80858f;opacity:1}
.pgs-kn.pgs-kn.pgs-kn .kn-field:focus{outline:none;border-color:var(--kn-acc);box-shadow:0 0 0 3px rgba(91,140,255,.28)}
.pgs-kn.pgs-kn .kn-field.is-filled{border-color:rgba(140,196,255,.28)}
.pgs-kn.pgs-kn textarea.kn-field{height:auto;min-height:104px;padding:12px 14px;line-height:1.5;resize:vertical}
.pgs-kn.pgs-kn .kn-xbtn{
  width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
  background:transparent;border:1px solid transparent;color:var(--kn-muted);transition:.2s;
}
.pgs-kn.pgs-kn .kn-xbtn:hover{color:var(--kn-ink);background:rgba(255,255,255,.05);border-color:var(--kn-line)}
.pgs-kn.pgs-kn .kn-names__foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;margin-top:16px;padding-top:16px;border-top:1px solid var(--kn-line)}
.pgs-kn.pgs-kn .kn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--kn-line-2);color:var(--kn-ink);
  font-size:14px;font-weight:600;line-height:1.2;transition:background .2s,border-color .2s;
}
.pgs-kn.pgs-kn .kn-ghost:hover{background:rgba(255,255,255,.08);border-color:var(--kn-line-3)}
.pgs-kn.pgs-kn .kn-ghost svg{color:var(--kn-acc-glow)}
.pgs-kn.pgs-kn .kn-count{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 10px;color:var(--kn-txt);font-size:13px}
.pgs-kn.pgs-kn .kn-count.is-open{color:#f2d492}
.pgs-kn.pgs-kn .kn-count__weg{color:var(--kn-warn)}
.pgs-kn.pgs-kn .kn-minis{display:inline-flex;flex-wrap:wrap;gap:4px;max-width:180px}
/* v1.1.74 (Mert 12.10.2026: „verbuggter Indikator“): Die kleinen Karten des Zählers trugen als „benannt“ den schrägen
   Folien-Verlauf — auf 10 × 14 px sah das aus wie ein schief liegender, kaputter Balken. Jetzt eine ruhige, volle Fläche;
   dazu fest gegen Stilregeln des Themes für <i> (kursiv, Symbolschrift, Abstände). */
.pgs-kn.pgs-kn .kn-minis i{display:block;flex:none;box-sizing:border-box;width:10px;height:14px;margin:0;padding:0;border-radius:2px;border:1px solid rgba(255,255,255,.28);background:none;font-style:normal;font-size:0;line-height:0;transform:none}
.pgs-kn.pgs-kn .kn-minis i::before,.pgs-kn.pgs-kn .kn-minis i::after{content:none}
.pgs-kn.pgs-kn .kn-minis i.on{border-color:var(--kn-acc-glow);background:var(--kn-acc-glow)}

/* ======================== Dein Motiv ======================== */
/* Das FusionArt™-Slab steht hochkant neben den drei Schritten: aufrecht, gerade, ganz (Mert 12.10.2026). */
.pgs-kn.pgs-kn .kn-motiv__grid{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:28px;align-items:center}
.pgs-kn.pgs-kn .kn-motiv__lab{display:block;margin:16px 0 8px}
.pgs-kn.pgs-kn .kn-motiv__vis{display:block;filter:drop-shadow(0 16px 18px rgba(0,0,0,.65))}
.pgs-kn.pgs-kn .kn-motiv__note{display:flex;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--kn-line);color:var(--kn-txt);font-size:13.5px;line-height:1.5}
.pgs-kn.pgs-kn .kn-motiv__note svg{flex:none;margin-top:2px;color:var(--kn-acc-glow)}
.pgs-kn.pgs-kn .kn-motiv__note b{color:var(--kn-ink);font-weight:600}
/* Der Weg zum Motiv: drei Schritte, der mittlere gehört dem Kunden. */
.pgs-kn.pgs-kn .kn-motiv__weg{display:grid;gap:14px;counter-reset:knw}
.pgs-kn.pgs-kn .kn-motiv__weg li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;color:var(--kn-txt);font-size:14.5px;line-height:1.5;counter-increment:knw}
.pgs-kn.pgs-kn .kn-motiv__weg li::before{
  content:counter(knw);width:22px;height:26px;margin-top:-1px;border-radius:3px;display:grid;place-items:center;
  border:1px solid rgba(140,196,255,.42);background:rgba(111,168,255,.08);color:var(--kn-ink);font:600 12px/1 var(--kn-mono);--kn-ff:var(--kn-mono);
}
.pgs-kn.pgs-kn .kn-motiv__weg b{color:var(--kn-ink);font-weight:600}
.pgs-kn.pgs-kn .kn-motiv__oder{display:block;margin-top:6px;color:var(--kn-muted);font-size:13px;line-height:1.45}
.pgs-kn.pgs-kn .kn-afdrop{margin-top:8px;color:var(--kn-warn);font-size:13px}

/* ======================== Hinzufügen ======================== */
.pgs-kn.pgs-kn .kn-addbar{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:40px;padding:16px 16px 16px 20px;
  border-radius:var(--kn-r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  border:1px solid var(--kn-line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 30px 60px -30px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(28px) saturate(1.2);backdrop-filter:blur(28px) saturate(1.2);
}
.pgs-kn.pgs-kn .kn-addbar__sum{flex:1;min-width:180px}
.pgs-kn.pgs-kn .kn-addbar__k.is-open{color:#f2d492}
.pgs-kn.pgs-kn .kn-addbar__v{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:4px;min-height:36px}
.pgs-kn.pgs-kn .kn-addbar__v b{color:var(--kn-ink);font-size:28px;font-weight:700;letter-spacing:-.022em;--kn-ls:-.022em;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}
.pgs-kn.pgs-kn .kn-addbar__v span{color:var(--kn-txt);font-size:13px}
.pgs-kn.pgs-kn .kn-btn-add{
  flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:52px;padding:0 22px;border-radius:14px;
  border:1px solid rgba(170,210,255,.7);
  background:linear-gradient(180deg,#86b6ff 0%,#5B8CFF 100%);
  color:#050a16;font-size:15px;font-weight:700;line-height:1.2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px rgba(91,140,255,.25),0 12px 30px -10px rgba(91,140,255,.75);
  transition:filter .2s,transform .2s var(--kn-ease);
}
.pgs-kn.pgs-kn .kn-btn-add > span{display:inline-flex;align-items:center}
.pgs-kn.pgs-kn .kn-btn-add:hover{filter:brightness(1.07)}
.pgs-kn.pgs-kn .kn-btn-add:active{transform:translateY(1px)}
.pgs-kn.pgs-kn .kn-btn-add--sm{height:48px;padding:0 18px;font-size:15px}
.pgs-kn.pgs-kn .kn-btn-add[aria-disabled="true"]{
  background:rgba(255,255,255,.05);border-color:var(--kn-line-2);color:var(--kn-muted);box-shadow:none;cursor:not-allowed;filter:none;
}
.pgs-kn.is-wartet .kn-btn-add,.pgs-kn.is-wartet .kn-pos__act button,.pgs-kn.is-wartet .kn-posweg .kn-ghost{cursor:progress}
/* Rückmeldung nach dem Hinzufügen — ohne sie klickt man zweimal. */
.pgs-kn.pgs-kn .kn-addbar__ok,.pgs-kn.pgs-kn .kn-addbar__err{
  display:flex;flex-basis:100%;align-items:center;gap:10px;
  padding-top:12px;border-top:1px solid var(--kn-line);
  font-size:13.5px;font-weight:600;
}
.pgs-kn.pgs-kn .kn-addbar__ok{color:#8fe3c0}
.pgs-kn.pgs-kn .kn-addbar__err{color:#f6c4c4}

.pgs-kn.pgs-kn .kn-trust{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:20px;padding:0 4px;color:var(--kn-muted);font-size:13px}
.pgs-kn.pgs-kn .kn-trust span{display:inline-flex;align-items:center;gap:8px}
.pgs-kn.pgs-kn .kn-trust svg{flex:none;color:var(--kn-acc-hi)}

/* ======================== Dein Auftrag ======================== */
.pgs-kn.pgs-kn .kn-order{position:sticky;top:calc(var(--kn-oben) + 24px);scroll-margin-top:calc(var(--kn-oben) + 16px);min-width:0}
/* Die Karte klebt, darf aber nie mehr verschlucken als sie zeigt: in
   niedrigen Laptop-Fenstern scrollt die ganze Karte, statt die Positions-
   liste auf 0 px zu drücken. */
.pgs-kn.pgs-kn .kn-order__card{
  position:relative;display:flex;flex-direction:column;max-height:calc(100vh - var(--kn-oben) - 48px);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;
  padding:24px;border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03) 40%,rgba(255,255,255,.025));
  border:1px solid var(--kn-line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 40px 80px -40px rgba(0,0,0,.95);
  -webkit-backdrop-filter:blur(32px) saturate(1.2);backdrop-filter:blur(32px) saturate(1.2);
}
.pgs-kn.pgs-kn .kn-order__card::before{
  content:"";position:absolute;top:-1px;left:18%;right:18%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(140,196,255,.7),transparent);
}
.pgs-kn.pgs-kn .kn-order__head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;padding-bottom:16px;border-bottom:1px solid var(--kn-line)}
.pgs-kn.pgs-kn .kn-order__n{color:var(--kn-muted);font:500 12px/1 var(--kn-mono);--kn-ff:var(--kn-mono);letter-spacing:.04em;--kn-ls:.04em;white-space:nowrap}
.pgs-kn.pgs-kn .kn-poslist{flex:1 1 auto;min-height:min(220px,30vh);overflow-y:auto;margin:0 -8px;padding:0 8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
/* Leerer Auftrag: keine Mindesthöhe, sonst klafft unter „Noch nichts im Auftrag" eine Lücke. */
.pgs-kn.pgs-kn .kn-poslist:has(.kn-posempty){min-height:0}
.pgs-kn.pgs-kn .kn-posweg{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin:10px 0;padding:8px 8px 8px 16px;
  border-radius:12px;border:1px dashed rgba(255,255,255,.18);color:var(--kn-muted);font-size:13.5px;
}
.pgs-kn.pgs-kn .kn-posweg .kn-ghost{padding:0 14px}
/* Links das kleine Produktbild der Position, hochkant (52 px breit; das höhere Booster-Case schmaler, damit alle gleich hoch stehen). */
.pgs-kn.pgs-kn .kn-pos{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;padding:16px 8px 8px;margin:0 -8px;border-bottom:1px solid var(--kn-line);border-radius:12px;transition:background .3s}
.pgs-kn.pgs-kn .kn-pos.is-edit{background:rgba(91,140,255,.1)}
.pgs-kn.pgs-kn .kn-pos.is-new{animation:kn-pos-in 1.4s var(--kn-ease)}
@keyframes kn-pos-in{0%{background:rgba(63,191,143,.2)}100%{background:transparent}}
.pgs-kn.pgs-kn .kn-pos__slab{display:block;padding-top:3px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.pgs-kn.pgs-kn .kn-pos__slab .kn-sb--booster > .kn-sb__img{width:80.8%;margin:0 auto}
.pgs-kn.pgs-kn .kn-pos__n{color:var(--kn-ink);font-size:15px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.pgs-kn.pgs-kn .kn-pos__m{margin-top:2px;color:var(--kn-muted);font-size:13px;line-height:1.4}
.pgs-kn.pgs-kn .kn-pos__warn{margin-top:4px;color:#f2d492;font-size:13px;line-height:1.4}
.pgs-kn.pgs-kn .kn-pos__calc{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:2px 8px;margin-top:8px;color:var(--kn-txt);font-size:13px}
.pgs-kn.pgs-kn .kn-pos__calc b{color:var(--kn-ink);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pgs-kn.pgs-kn .kn-pos__act{display:flex;flex-wrap:wrap;gap:0 4px;margin:2px 0 0 -10px}
.pgs-kn.pgs-kn .kn-pos__act button{min-height:48px;padding:0 10px;border-radius:8px;color:var(--kn-acc-ink);font-size:13px;font-weight:600;line-height:1.2;text-align:left;transition:.2s}
.pgs-kn.pgs-kn .kn-pos__act button:hover{background:rgba(255,255,255,.05);color:var(--kn-ink)}
.pgs-kn.pgs-kn .kn-pos__act .kn-del{color:var(--kn-muted)}
.pgs-kn.pgs-kn .kn-pos__act .kn-del:hover{color:#f3b4b4;background:rgba(224,107,107,.08)}
.pgs-kn.pgs-kn .kn-posempty{
  margin:16px 0 4px;padding:22px 16px;border-radius:14px;text-align:center;
  border:1px dashed rgba(255,255,255,.14);color:var(--kn-muted);font-size:13.5px;line-height:1.5;
}
.pgs-kn.pgs-kn .kn-andere{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:8px;color:var(--kn-muted);font-size:13px}
.pgs-kn.pgs-kn .kn-andere a{display:inline-flex;align-items:center;min-height:44px;color:var(--kn-acc-ink);text-decoration:underline;text-underline-offset:3px}
.pgs-kn.pgs-kn .kn-andere b{color:var(--kn-txt);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.pgs-kn.pgs-kn .kn-sum{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;padding-top:18px}
.pgs-kn.pgs-kn .kn-sum > span{color:var(--kn-txt);font-size:14px;font-weight:600}
.pgs-kn.pgs-kn .kn-sum small{display:block;margin-top:2px;color:var(--kn-muted);font:500 12px/1.3 var(--kn-mono);--kn-ff:var(--kn-mono);letter-spacing:.02em;--kn-ls:.02em}
.pgs-kn.pgs-kn .kn-sum b{margin-left:auto;color:var(--kn-ink);font-size:32px;font-weight:700;letter-spacing:-.025em;--kn-ls:-.025em;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.pgs-kn.pgs-kn .kn-tax{margin-top:2px;text-align:right;color:var(--kn-muted);font-size:12px}

/* Hinweise: blau = gut zu wissen, gold = beachten, rot = hält die Kasse an. */
.pgs-kn.pgs-kn .kn-note{
  display:flex;gap:10px;margin-top:16px;padding:12px 14px;border-radius:12px;
  font-size:13px;line-height:1.45;
}
.pgs-kn.pgs-kn .kn-note > span:first-child{flex:none;margin-top:1px}
.pgs-kn.pgs-kn .kn-note > span:last-child{min-width:0}
.pgs-kn.pgs-kn .kn-note b{font-weight:700}
.pgs-kn.pgs-kn .kn-note--info{background:rgba(91,140,255,.07);border:1px solid rgba(111,168,255,.2);color:#cfdcf2}
.pgs-kn.pgs-kn .kn-note--info > span:first-child{color:var(--kn-acc-glow)}
.pgs-kn.pgs-kn .kn-note--warn{background:rgba(226,177,76,.07);border:1px solid rgba(226,177,76,.26);color:#ecdcb4}
.pgs-kn.pgs-kn .kn-note--warn > span:first-child{color:var(--kn-warn)}
.pgs-kn.pgs-kn .kn-note--todo{background:rgba(224,107,107,.08);border:1px solid rgba(224,107,107,.32);color:#f2cccc}
.pgs-kn.pgs-kn .kn-note--todo > span:first-child{color:#f09a9a}
.pgs-kn.pgs-kn .kn-note .kn-pos__act{margin:6px 0 0 -10px}
.pgs-kn.pgs-kn .kn-note .kn-pos__act button{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* Meldung beim Öffnen der Ansicht (steht über den Schritten). */
.pgs-kn.pgs-kn .kn-start{margin:0 0 24px}
.pgs-kn.pgs-kn .kn-note__rest{display:block;margin-top:10px}
.pgs-kn.pgs-kn .kn-kontakt{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pgs-kn.pgs-kn .kn-kontakt .kn-ghost{color:#e3ecfb;overflow-wrap:anywhere}

/* Der EINE Chrom-Knopf der Ansicht. Gebürstet: feine Längsrillen über dem Verlauf. */
.pgs-kn.pgs-kn .kn-cta{
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:56px;margin-top:16px;border:0;border-radius:16px;
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.03) 0 1px,transparent 1px 3px),var(--kn-metal);
  color:#0b0c10;font-size:16px;font-weight:700;letter-spacing:-.005em;--kn-ls:-.005em;line-height:1.2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.45),
             0 16px 36px -14px rgba(0,0,0,.95),0 0 40px -18px rgba(220,228,240,.35);
  transition:transform .2s var(--kn-ease);
}
.pgs-kn.pgs-kn .kn-cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.6) 50%,transparent 62%);
  background-size:260% 100%;background-position:130% 0;transition:background-position 1s var(--kn-ease);
}
.pgs-kn.pgs-kn .kn-cta:hover::after{background-position:-30% 0}
.pgs-kn.pgs-kn .kn-cta:active{transform:translateY(1px)}
.pgs-kn.pgs-kn .kn-cta > span{position:relative;z-index:1}
/* Gesperrt heißt gesperrt: kein Chrom, kein Glanz, kein Zeigefinger. */
.pgs-kn.pgs-kn .kn-cta[aria-disabled="true"]{
  background:rgba(255,255,255,.05);background-image:none;
  color:var(--kn-muted);box-shadow:inset 0 0 0 1px var(--kn-line-2);cursor:not-allowed;
}
.pgs-kn.pgs-kn .kn-cta[aria-disabled="true"]::after{display:none}
.pgs-kn.pgs-kn .kn-cta[aria-disabled="true"]:active{transform:none}
.pgs-kn.pgs-kn .kn-ctawhy.is-ping{animation:kn-ping .5s var(--kn-ease)}
@keyframes kn-ping{30%{transform:translateX(-4px)}60%{transform:translateX(4px)}}
.pgs-kn.pgs-kn.pgs-kn .kn-cta:focus-visible,.pgs-kn.pgs-kn.pgs-kn .kn-btn-add:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(7,7,8,.9),0 0 0 5px rgba(140,196,255,.8)}
.pgs-kn.pgs-kn .kn-ctawhy{margin-top:10px;text-align:center;color:#f2d492;font-size:13px}
.pgs-kn.pgs-kn .kn-cta-note{margin-top:10px;text-align:center;color:var(--kn-muted);font-size:13px}

/* Telefon: Summe und Weg zum Auftrag bleiben immer in Reichweite. Die Leiste
   klebt am unteren Rand, solange diese Ansicht im Bild ist. */
.pgs-kn.pgs-kn .kn-mbar{
  display:none;position:sticky;z-index:40;bottom:calc(12px + var(--kn-heben) + env(safe-area-inset-bottom));
  align-items:center;gap:12px;margin:20px var(--kn-ausweich) 0 0;padding:10px 10px 10px 16px;border-radius:18px;
  background:rgba(14,15,18,.94);border:1px solid var(--kn-line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 40px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);
}
.pgs-kn.pgs-kn .kn-mbar__t{flex:1;min-width:0}
.pgs-kn.pgs-kn .kn-mbar__t .kn-kicker{display:block}
.pgs-kn.pgs-kn .kn-mbar__v{display:block;margin-top:2px;color:var(--kn-ink);font-size:15px;font-weight:600;line-height:1.3}
.pgs-kn.pgs-kn .kn-mbar__v b{font-variant-numeric:tabular-nums;white-space:nowrap}
.pgs-kn.pgs-kn .kn-mbar__go{
  flex:none;display:inline-flex;align-items:center;height:48px;padding:0 16px;border-radius:12px;
  background:rgba(91,140,255,.16);border:1px solid rgba(140,196,255,.5);color:#d6e7ff;font-size:14px;font-weight:600;
}

/* ======================== Details-Fenster (kompakt) ======================== */
.pgs-kn.pgs-kn .kn-modal{
  width:min(680px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);
  margin:auto;padding:0;border:0;background:transparent;color:var(--kn-txt);overflow:visible;
  font:400 15px/1.5 var(--kn-sans);--kn-ff:var(--kn-sans);
}
.pgs-kn.pgs-kn .kn-modal::backdrop{background:rgba(3,3,5,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pgs-kn.pgs-kn .kn-modal[open]{animation:kn-pop .35s var(--kn-ease)}
@keyframes kn-pop{from{opacity:0;transform:translateY(12px) scale(.98)}}
/* Sehr alte Browser ohne showModal(): als festes Fenster über der Seite. */
.pgs-kn.pgs-kn .kn-modal.is-ersatz{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100000;height:-moz-fit-content;height:fit-content;display:block;box-shadow:0 0 0 100vmax rgba(3,3,5,.72)}
.pgs-kn.pgs-kn .kn-mcard{
  position:relative;overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);border-radius:24px;
  background:linear-gradient(180deg,rgba(28,30,35,.97),rgba(14,15,18,.99));
  border:1px solid var(--kn-line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 50px 100px -30px rgba(0,0,0,.95);
}
.pgs-kn.pgs-kn .kn-mcard__head{position:relative;isolation:isolate;overflow:hidden;flex:none;min-height:100px;padding:16px 70px 12px 22px;border-bottom:1px solid var(--kn-line)}
/* v1.1.73 (Mert 12.10.2026: „Slab bei den Details nie schräg“): Im Kopf des Details-Fensters lag das Slab quer und um 8° gedreht.
   Jetzt steht es aufrecht und gerade; sichtbar ist der obere Teil mit dem Label, der Rest verschwindet unter der Kante des Kopfs. */
.pgs-kn.pgs-kn .kn-mcard__slab{position:absolute;z-index:0;right:70px;top:14px;width:168px;transform:none;filter:drop-shadow(0 20px 22px rgba(0,0,0,.7))}
.pgs-kn.pgs-kn .kn-mcard__head .kn-foil{z-index:1;opacity:.85;-webkit-mask-image:linear-gradient(90deg,transparent 34%,#000 72%);mask-image:linear-gradient(90deg,transparent 34%,#000 72%);animation:kn-foil 8s ease-in-out infinite alternate}
.pgs-kn.pgs-kn .kn-mcard__head::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(22,23,27,.98) 0%,rgba(22,23,27,.93) 50%,rgba(22,23,27,.3) 78%,transparent 100%);
}
.pgs-kn.pgs-kn .kn-mcard__t{position:relative;z-index:3;max-width:64%}
.pgs-kn.pgs-kn .kn-mcard__title{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;overflow-wrap:anywhere;color:var(--kn-ink);font-size:24px;font-weight:700;letter-spacing:-.022em;--kn-ls:-.022em;line-height:1.15}
.pgs-kn.pgs-kn .kn-mcard__lead{margin-top:6px;color:var(--kn-txt);font-size:13.5px;line-height:1.45}
.pgs-kn.pgs-kn .kn-mcard__x{
  position:absolute;z-index:4;top:14px;right:14px;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;background:rgba(10,11,13,.65);border:1px solid var(--kn-line-2);color:var(--kn-ink);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s;
}
.pgs-kn.pgs-kn .kn-mcard__x:hover{background:rgba(40,42,48,.8)}
/* max-content: sonst quetscht das Raster in niedrigen Fenstern den Slab
   (overflow:hidden → Mindesthöhe 0), statt zu scrollen. */
.pgs-kn.pgs-kn .kn-mcard__body{display:grid;grid-auto-rows:max-content;gap:14px;min-height:0;padding:14px 22px 16px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.pgs-kn.pgs-kn .kn-mcard__body .kn-kicker span{color:var(--kn-txt);letter-spacing:.04em;--kn-ls:.04em;text-transform:none;font-weight:500}
.pgs-kn.pgs-kn .kn-mcard__foot{flex:none;display:flex;justify-content:flex-end;gap:10px;padding:12px 22px;border-top:1px solid var(--kn-line);background:rgba(0,0,0,.22)}

/* Beispiel-Slab im Details-Fenster: stehend, Text daneben. */
.pgs-kn.pgs-kn .kn-mprod{display:grid;grid-template-columns:196px minmax(0,1fr);gap:22px;align-items:start}
/* Innenabstand seitlich 12 px: Spalte 196 − 2 × 12 − 2 × 1 (Rahmen) = 170 px für das Bild. Mit 14 px blieben nur
   166 px — die 170 px des Bilds wurden nie erreicht, und das Booster-Bild stand 6 px höher als die anderen. */
.pgs-kn.pgs-kn .kn-mslab{margin:0;padding:12px 12px 10px;border-radius:14px;border:1px solid var(--kn-line);text-align:center;
  background:radial-gradient(90% 60% at 50% 0%,rgba(140,196,255,.1),transparent 70%),#0c0d10}
.pgs-kn.pgs-kn .kn-mslab .kn-kicker{text-align:left}
/* Das echte Bild trägt rundum einen schmalen durchsichtigen Rand: es steht deshalb 170 px breit (der Slab darin
   bleibt 166 px breit wie die Zeichnung zuvor), und der Lichtstreif darüber endet an der Kante des Slabs. Das höhere
   Booster-Case steht schmaler (137 px), damit alle drei gleich hoch sind (284 px). */
.pgs-kn.pgs-kn .kn-mslab__img{position:relative;max-width:170px;margin:10px auto 0;border-radius:4px;overflow:hidden;filter:drop-shadow(0 14px 18px rgba(0,0,0,.7))}
.pgs-kn.pgs-kn .kn-mslab--booster .kn-mslab__img{max-width:137px}
.pgs-kn.pgs-kn .kn-mslab__img::after{
  content:"";position:absolute;inset:.7% 1.2%;border-radius:2.8%/1.7%;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.26) 46%,rgba(140,196,255,.2) 52%,transparent 66%);
  background-size:260% 100%;animation:kn-sheen 6s ease-in-out infinite;
}
@keyframes kn-sheen{0%{background-position:140% 0}60%,100%{background-position:-40% 0}}
.pgs-kn.pgs-kn .kn-mslab figcaption{margin-top:8px;color:var(--kn-muted);font:500 11px/1.3 var(--kn-mono);--kn-ff:var(--kn-mono);letter-spacing:.02em;--kn-ls:.02em}
.pgs-kn.pgs-kn .kn-mprod__txt{display:grid;gap:16px;align-content:start;min-width:0}
.pgs-kn.pgs-kn .kn-checks li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px;margin-top:6px;color:var(--kn-txt);font-size:13px;line-height:1.4}
.pgs-kn.pgs-kn .kn-checks svg{margin-top:3px;color:var(--kn-acc-glow)}
.pgs-kn.pgs-kn .kn-flowline{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px;counter-reset:knf}
.pgs-kn.pgs-kn .kn-flowline li{position:relative;display:flex;align-items:center;gap:8px;color:var(--kn-txt);font-size:12.5px;line-height:1.3;counter-increment:knf}
.pgs-kn.pgs-kn .kn-flowline li::before{
  content:counter(knf);position:static;flex:none;width:18px;height:24px;border-radius:3px;
  display:grid;place-items:center;border:1px solid rgba(140,196,255,.42);background:rgba(111,168,255,.08);
  color:var(--kn-ink);font:600 12px/1 var(--kn-mono);--kn-ff:var(--kn-mono);
}

/* ======================== Anpassungen ======================== */
@media (hover:hover){
  .pgs-kn.pgs-kn .kn-face:hover .kn-spot{background:radial-gradient(70% 48% at 70% 26%,rgba(255,255,255,.09),transparent 72%)}
}
@media (pointer:coarse){
  /* Unter 16 px zoomt das iPhone beim Antippen in das Feld hinein. */
  .pgs-kn.pgs-kn .kn-field,.pgs-kn.pgs-kn .kn-stepper input{font-size:16px}
  .pgs-kn.pgs-kn .kn-stepper input{font-size:24px}
  .pgs-kn.pgs-kn .kn-pos__act{gap:0 10px}
}

/* Niedriges Laptop-Fenster (z. B. 1280 × 720 bei 150 %): nicht kleben. */
@media (min-width:1101px) and (max-height:780px){
  .pgs-kn.pgs-kn .kn-order{position:static}
  .pgs-kn.pgs-kn .kn-order__card{max-height:none;overflow:visible}
  .pgs-kn.pgs-kn .kn-poslist{overflow:visible;min-height:0}
}

@media (max-width:1100px){
  .pgs-kn.pgs-kn .kn-cols{grid-template-columns:minmax(0,1fr)}
  .pgs-kn.pgs-kn .kn-order{position:static}
  .pgs-kn.pgs-kn .kn-order__card{max-height:none;overflow:visible}
  .pgs-kn.pgs-kn .kn-poslist{overflow:visible;min-height:0}
  .pgs-kn.pgs-kn .kn-mbar{display:flex}
  .pgs-kn.pgs-kn .kn-mbar.is-empty{display:none}
  .pgs-kn.pgs-kn .kn-face{min-height:404px}
}

@media (max-width:760px){
  /* Die Kachel wird zur Querzeile: Text links, rechts der Slab — aufrecht, gerade und GANZ (v1.1.75, vorher schräg
     und halb angeschnitten). --kn-aw = Breite der Bildspalte (Karten-Schale 372 : 622); das schmalere Booster-Case
     steht darin mittig. Der Text bekommt genau den Platz daneben, bei jeder Breite. */
  .pgs-kn.pgs-kn .kn-tiles{grid-template-columns:minmax(0,1fr);gap:12px}
  .pgs-kn.pgs-kn .kn-face{--kn-ah:clamp(170px,54vw,212px);--kn-aw:calc(var(--kn-ah) * .5981);min-height:calc(var(--kn-ah) + 60px);justify-content:center;padding:18px 18px 80px}
  .pgs-kn.pgs-kn .kn-face__top{position:relative;top:auto;left:auto;right:auto;z-index:6;margin-bottom:10px;max-width:calc(100% - var(--kn-aw) - 14px)}
  .pgs-kn.pgs-kn .kn-face__body{max-width:calc(100% - var(--kn-aw) - 14px);margin-top:0}
  .pgs-kn.pgs-kn .kn-face__name{font-size:22px}
  .pgs-kn.pgs-kn .kn-face__price{margin-top:12px}
  /* Der Slab steht 14 px unter der Mitte: darüber bleibt Platz für das Auswahl-Zeichen, es verdeckt ihn nicht. */
  .pgs-kn.pgs-kn .kn-art{position:absolute;right:16px;top:calc(50% + 14px);width:var(--kn-aw);margin:0;translate:0 -50%}
  /* v1.1.77: Booster am Smartphone mittig — es darf oben und unten etwas überstehen. */
  .pgs-kn.pgs-kn .kn-prod--booster .kn-art{align-items:center}
  .pgs-kn.pgs-kn .kn-face .kn-seal{top:8px;right:10px;width:30px;height:30px}
  .pgs-kn.pgs-kn .kn-face .kn-seal::after{width:7px;height:13px}
  .pgs-kn.pgs-kn .kn-tile > input:checked + .kn-face .kn-art__glide{animation-name:kn-glide-m}
  .pgs-kn.pgs-kn .kn-scrim{background:linear-gradient(90deg,rgba(9,10,12,.92) 0%,rgba(9,10,12,.88) calc(100% - var(--kn-aw) - 72px),rgba(9,10,12,0) calc(100% - var(--kn-aw) - 24px))}
  .pgs-kn.pgs-kn .kn-foil,.pgs-kn.pgs-kn .kn-glare{
    -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.12) 50%,#000 76%);
            mask-image:linear-gradient(90deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.12) 50%,#000 76%);
  }
  .pgs-kn.pgs-kn .kn-more{left:18px;bottom:16px}
  .pgs-kn.pgs-kn .kn-lede{margin-left:0}
  .pgs-kn.pgs-kn .kn-sec{margin-top:44px}
  .pgs-kn.pgs-kn .kn-mprod{grid-template-columns:minmax(0,1fr);gap:16px}
  .pgs-kn.pgs-kn .kn-mslab__img{max-width:144px}
  .pgs-kn.pgs-kn .kn-mslab--booster .kn-mslab__img{max-width:116px}
}
@keyframes kn-glide-m{
  0%,100%{transform:translate3d(0,0,0)}
  50%    {transform:translate3d(0,-3px,0)}
}

@media (max-width:600px){
  .pgs-kn.pgs-kn .kn-top{min-height:52px}
  .pgs-kn.pgs-kn .kn-opt__box{
    grid-template-columns:22px minmax(0,1fr) auto;
    grid-template-areas:"seal main price" "seal time price";
    padding:14px 16px;column-gap:14px;
  }
  .pgs-kn.pgs-kn .kn-opt__box.is-single{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main price" "time price"}
  .pgs-kn.pgs-kn .kn-opt__time{margin-top:2px}
  .pgs-kn.pgs-kn .kn-opts--2{grid-template-columns:minmax(0,1fr)}
  .pgs-kn.pgs-kn .kn-opts--2 .kn-opt__box{grid-template-areas:"seal main price"}
  .pgs-kn.pgs-kn .kn-panel{padding:18px}
  /* Smartphone: die drei Schritte brauchen die volle Breite — neben dem Slab bliebe ihnen bei 375 px rund 200 px
     (13 statt 9 Zeilen). Das Bild steht zwei Schritte darüber in der Kachel und ganz im Details-Fenster. */
  .pgs-kn.pgs-kn .kn-motiv__grid{grid-template-columns:minmax(0,1fr)}
  .pgs-kn.pgs-kn .kn-motiv__vis{display:none}
  .pgs-kn.pgs-kn .kn-addbar{padding:16px}
  .pgs-kn.pgs-kn .kn-addbar__sum{min-width:0;flex-basis:100%}
  .pgs-kn.pgs-kn .kn-btn-add{width:100%}
  .pgs-kn.pgs-kn .kn-order__card{padding:20px}
  .pgs-kn.pgs-kn .kn-sum b{font-size:28px}
  .pgs-kn.pgs-kn .kn-mcard__head{min-height:0;padding:96px 18px 14px}
  .pgs-kn.pgs-kn .kn-mcard__slab{width:176px;right:72px;top:12px}
  .pgs-kn.pgs-kn .kn-mcard__head .kn-foil{-webkit-mask-image:linear-gradient(180deg,#000 20%,transparent 60%);mask-image:linear-gradient(180deg,#000 20%,transparent 60%)}
  .pgs-kn.pgs-kn .kn-mcard__head::after{background:linear-gradient(0deg,rgba(22,23,27,.98) 0%,rgba(22,23,27,.9) 42%,rgba(22,23,27,.2) 80%,transparent 100%)}
  .pgs-kn.pgs-kn .kn-mcard__t{max-width:none}
  .pgs-kn.pgs-kn .kn-mcard__title{font-size:22px}
  .pgs-kn.pgs-kn .kn-mcard__body{padding:18px}
  .pgs-kn.pgs-kn .kn-mcard__foot{flex-direction:column-reverse;padding:12px 18px calc(12px + env(safe-area-inset-bottom))}
  .pgs-kn.pgs-kn .kn-mcard__foot button{width:100%;justify-content:center}
  .pgs-kn.pgs-kn .kn-modal{width:100%;max-height:92vh;max-height:92dvh;margin:auto 0 0}
  .pgs-kn.pgs-kn .kn-modal .kn-mcard{max-height:92vh;max-height:92dvh;border-radius:24px 24px 0 0}
}
@media (max-width:380px){
  /* v1.1.75: Breite des Textes und Lage des Slabs regelt die Bildspalte (--kn-aw) oben — hier nur der Rand. */
  .pgs-kn.pgs-kn .kn-art{right:12px}
  .pgs-kn.pgs-kn .kn-face__body{max-width:calc(100% - var(--kn-aw) - 8px)}
  .pgs-kn.pgs-kn .kn-pos{grid-template-columns:44px minmax(0,1fr);gap:12px}
  .pgs-kn.pgs-kn .kn-flowline{grid-template-columns:minmax(0,1fr)}
  .pgs-kn.pgs-kn .kn-stepper button{width:48px}
  /* Sehr schmal: Mit Foto-Knopf fällt die Zeilennummer weg (das Feld nennt sie Vorlesern weiter) — sonst
     bliebe für den Namen kaum Platz. */
  .pgs-kn.pgs-kn .kn-nrow.mit-foto{grid-template-columns:minmax(0,1fr) 48px 48px}
  .pgs-kn.pgs-kn .kn-nrow.mit-foto .kn-nrow__i{display:none}
}

/* Wer Bewegung abgeschaltet hat, bekommt eine stille Karte — Folie und
   Slab stehen, gewählt ist trotzdem eindeutig (Ring + Siegel). */
@media (prefers-reduced-motion:reduce){
  .pgs-kn.pgs-kn .kn-tile{transform:none !important;transition:none}
  .pgs-kn.pgs-kn .kn-tile > input:checked + .kn-face .kn-art__glide,
  .pgs-kn.pgs-kn .kn-tile > input:checked + .kn-face .kn-foil,
  .pgs-kn.pgs-kn .kn-tile > input:checked + .kn-face .kn-foil::after,
  .pgs-kn.pgs-kn .kn-tile > input:checked ~ .kn-ring,
  .pgs-kn.pgs-kn .kn-mcard__head .kn-foil,
  .pgs-kn.pgs-kn .kn-mslab__img::after,
  .pgs-kn.pgs-kn .kn-pos.is-new,
  .pgs-kn.pgs-kn .kn-fotobtn.is-laedt::after,
  .pgs-kn.pgs-kn .kn-ctawhy.is-ping,
  .pgs-kn.pgs-kn .kn-modal[open]{animation:none !important}
  .pgs-kn.pgs-kn .kn-art__par{transform:none !important}
  .pgs-kn.pgs-kn *,.pgs-kn.pgs-kn *::before,.pgs-kn.pgs-kn *::after{transition-duration:.01ms !important}
}

/* v1.1.91: Halloween-Sale (PGS_Shop_Aktion) — Aktionspreise orange mit Kürbis, der normale Preis durchgestrichen davor. */
.pgs-kn.pgs-kn .kn-face__statt{flex-basis:100%;color:var(--kn-muted);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
.pgs-kn.pgs-kn .kn-face__statt[hidden]{display:none}
.pgs-kn.pgs-kn .kn-face__eur.is-aktion{color:#FF8A1F}
.pgs-kn.pgs-kn .kn-face__eur.is-aktion::before{content:"🎃 "}
.pgs-kn.pgs-kn .kn-opt__price.is-aktion{color:#FF8A1F}
.pgs-kn.pgs-kn .kn-opt__price.is-aktion{text-align:right}
.pgs-kn.pgs-kn .kn-opt__price.is-aktion::before{content:attr(data-statt);display:block;color:var(--kn-muted);font-size:12px;font-weight:500;text-decoration:line-through}
.pgs-kn.pgs-kn .kn-opt__price.is-aktion::after{content:" 🎃"}
.pgs-kn.pgs-kn .kn-rabatt.is-aktion b{color:#FF8A1F}
.pgs-kn.pgs-kn .kn-addbar__v.is-aktion b{color:#FF8A1F}
.pgs-kn.pgs-kn .kn-addbar__v.is-aktion b::after{content:" 🎃";font-size:22px}
/* v1.1.92 (Mert 30.10.2026: „der Rahmen mehr Halloween-lastiger"; gezeichnete Deko war ihm zu hässlich): Rahmen als Grafik aus Canva, per border-image auf jede Kachelgröße gezogen. Auswahl-Zeichen, „Neu" und „Details" rücken neben die Ecken. */
.pgs-kn.pgs-kn .kn-tile.is-aktion::after{
  content:"";position:absolute;inset:-5px;z-index:7;pointer-events:none;box-sizing:border-box;
  border:66px solid transparent;border-image:url("../img/kaufprozess/halloween-rahmen.webp") 28% / 66px stretch;
  opacity:.82;transition:opacity .3s var(--kn-ease);
}
.pgs-kn.pgs-kn .kn-tile.is-aktion > input:checked ~ .kn-ring{opacity:0;animation:none}
.pgs-kn.pgs-kn .kn-tile.is-aktion > input:checked + .kn-face{
  border-color:transparent;
  background:linear-gradient(180deg,rgba(255,122,15,.07),rgba(255,255,255,.02) 60%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 34px -8px rgba(255,122,15,.8),0 24px 48px -24px rgba(0,0,0,.9);
}
.pgs-kn.pgs-kn .kn-tile.is-aktion:has(> input:checked)::after{opacity:1}
.pgs-kn.pgs-kn .kn-tile.is-aktion .kn-face{border-color:transparent}
.pgs-kn.pgs-kn .kn-tile.is-aktion .kn-face::before{display:none}
.pgs-kn.pgs-kn .kn-tile.is-aktion > input:checked + .kn-face .kn-spot{background:radial-gradient(78% 46% at 50% 30%,rgba(255,122,15,.12),transparent 72%)}
.pgs-kn.pgs-kn .kn-tile.is-aktion .kn-face .kn-seal{right:62px;top:10px}
.pgs-kn.pgs-kn .kn-tile.is-aktion .kn-face__top{left:62px;top:14px;right:100px}
.pgs-kn.pgs-kn .kn-tile.is-aktion .kn-more{left:62px}
@media (max-width:760px){
  .pgs-kn.pgs-kn .kn-tile.is-aktion::after{border-width:48px;border-image-width:48px}
  .pgs-kn.pgs-kn .kn-tile.is-aktion .kn-face{padding-left:30px}
  .pgs-kn.pgs-kn .kn-tile.is-aktion .kn-face .kn-seal{right:44px;top:8px}
  .pgs-kn.pgs-kn .kn-tile.is-aktion .kn-face__top{left:auto;top:auto;right:auto}
  .pgs-kn.pgs-kn .kn-tile.is-aktion .kn-more{left:44px}
}

/* v1.1.95 (Prüfung 01.11.2026, Befund 40): Dauerschleifen stehen still, wie im Theme seit 2.35.6 (Mert 22.10.2026: Mac/Safari langsam). Ruhelage wie bei „Bewegung reduzieren":
   Slab ohne Schweben, Folie als ruhendes Band (opacity aus der Regel oben), Ring als ruhende Kante, gewählt bleibt eindeutig. Alte Regeln und Keyframes bleiben stehen.
   Ladekreisel (kn-dreh), Einblendungen (kn-pos-in, kn-ping, kn-pop) und der Lichtlauf unter dem Mauszeiger (.is-live) bleiben. */
.pgs-kn.pgs-kn .kn-tile > input:checked + .kn-face .kn-art__glide,
.pgs-kn.pgs-kn .kn-tile > input:checked + .kn-face .kn-foil,
.pgs-kn.pgs-kn .kn-tile > input:checked + .kn-face .kn-foil::after,
.pgs-kn.pgs-kn .kn-tile > input:checked ~ .kn-ring,
.pgs-kn.pgs-kn .kn-mcard__head .kn-foil{animation:none}
/* Der Streifen ruht außerhalb des Bilds (Stand 0 % von kn-sheen); ohne diese Lage läge ein Rest davon am rechten Rand. */
.pgs-kn.pgs-kn .kn-mslab__img::after{animation:none;background-position:140% 0}