/* ==================================================================
   PAIN-GRAFIKEN 01–04 · INDUSTRIE-FEINSCHLIFF          (24.09.2026)
   ==================================================================
   Wird NACH final.css und mobil.css geladen. Aendert ausschliesslich
   die Bildsprache der vier Grafiken in #lage — kein Layout, keine
   Groessen, keine Copy.

   Vorlage: jmvision.de/entscheider-vertriebs-system. Uebernommen ist
   nur die Zeichensprache (massive Navy-Piktogramme, Tiefe durch
   gestaffelte Flaechen), nicht deren Unschaerfe.

   AUSDRUECKLICH NICHT angetastet (Melvin, 24.09.):
   Grafikflaeche und Rahmen bleiben wie im Original — #F2F4F7,
   Radius 2px, keine Haarlinie.

   ANIMATION: Alle vier Karten behalten ihre Bewegung. Die Regeln
   unten spiegeln die Zustaende aus final.css (.anim / .anim .in)
   mit derselben Selektorform plus #lage, damit sie per Quellreihen-
   folge gewinnen statt die Bewegung totzulegen.
   ================================================================== */

/* ---- 1 · Radien eine Stufe runter -----------------------------------
   Blaetter und Karten 4 -> 3, Chips und Zaehler 4 -> 2, der grosse
   Block 6 -> 3. Messbar kantiger, ohne dass Bauteile brechen. */
#lage .pq__c,
#lage .pst__m,
#lage .pfn__doc{border-radius:3px}
#lage .pw__s,
#lage .pw__s--main{border-radius:3px}
#lage .pq__ico,
#lage .pfn__ico,
#lage .pst__n{border-radius:2px}

/* ---- 2 · Piktogramme: Navy massiv statt Blau getoent -----------------
   Der eigentliche Uebertrag. Blau traegt jetzt nur noch Preis und
   Sterne — dort sagt es etwas. Im Kartenkopf war es Dekoration. */
#lage .pq__ico,
#lage .pfn__ico--on{background:rgba(11,37,87,.07);color:#0B2557}
#lage .pq__ico svg path[fill="currentColor"]{fill:#0B2557}
#lage .pfn__ico--on svg{stroke-width:1.7}
#lage .pfn__ico{background:#E7EAEF}

/* ---- 3 · Schatten gefasst statt schwebend ---------------------------
   Weit auslaufende Weichzeichnung liest billig, Haarlinie plus kurzer
   tiefer Schatten liest gefertigt. Gleiche Familie auf allen vier. */
#lage .pq__c{box-shadow:0 0 0 1px rgba(10,23,48,.07),0 6px 14px -7px rgba(11,27,43,.26)}
#lage .pst__m--front{box-shadow:0 0 0 1px rgba(10,23,48,.07),0 8px 16px -8px rgba(11,27,43,.28)}
#lage .pfn__doc--front{box-shadow:0 0 0 1px rgba(10,23,48,.07),0 10px 20px -9px rgba(11,27,43,.26)}
#lage .pw__s{box-shadow:0 0 0 1px rgba(10,23,48,.08)}

/* ---- 4 · Karte 01 · das teure Angebot ------------------------------
   Mechanismus bleibt der aus final.css (Deckkraft + Graustufen),
   damit "wird beim Einblenden grau" weiter laeuft. Geaendert sind nur
   die Zielwerte: etwas weniger milchig (.55 -> .62) und statt eines
   Schlagschattens eine innenliegende Haarlinie — das Angebot liegt
   damit IN der Flaeche, das gewaehlte DARAUF. */
#lage .pq__c--weg{opacity:.62;filter:grayscale(1);
  box-shadow:inset 0 0 0 1px rgba(10,23,48,.16)}
/* Startzustand der Bewegung: noch voll da und erhaben */
.anim #lage .pm-card .pq__c--weg{opacity:1;filter:none;
  box-shadow:0 0 0 1px rgba(10,23,48,.07),0 6px 14px -7px rgba(11,27,43,.26);
  transition:opacity .9s var(--ease) .7s,filter .9s var(--ease) .7s,
             box-shadow .9s var(--ease) .7s}
/* Endzustand nach dem Einblenden */
.anim #lage .pm-card.in .pq__c--weg{opacity:.62;filter:grayscale(1);
  box-shadow:inset 0 0 0 1px rgba(10,23,48,.16)}
@media(prefers-reduced-motion:reduce){
  .anim #lage .pm-card .pq__c--weg{opacity:.62;filter:grayscale(1);
    box-shadow:inset 0 0 0 1px rgba(10,23,48,.16);transition:none}}

/* ---- 5 · Karte 02 · Flaeche statt Politur ---------------------------
   Der Verlauf war der glaenzendste Punkt der Sektion. Flaches Blau,
   kuerzerer Schatten — der Block steht, statt zu schweben.
   Deckkraft und Skalierung bleiben unberuehrt, die Bewegung laeuft. */
#lage .pw__s--main{background:#185BED;
  box-shadow:0 16px 30px -14px rgba(11,27,43,.32),0 1px 2px rgba(11,27,43,.08)}
/* Die leeren Plaetze etwas praesenter, damit sie als Plaetze lesen.
   :not(--main) ist Pflicht — ohne das zieht die Regel das weisse
   Zeichen im blauen Block mit ins Grau. */
#lage .pw__s:not(.pw__s--main) svg circle,
#lage .pw__s:not(.pw__s--main) svg path{fill:#AEB6C4}
#lage .pw__s:not(.pw__s--main) svg path.x{fill:none;stroke:#AEB6C4}

/* ---- 6 · Karte 03 · Zaehler als Marke, Lagen als Lagen --------------
   Die Transform-Bewegung der hinteren Lagen bleibt unberuehrt. */
#lage .pst__n{box-shadow:none;padding:5px 8px;letter-spacing:.01em}
#lage .pst__m--b2{background:#FBFCFD;box-shadow:inset 0 0 0 1px rgba(10,23,48,.09)}
#lage .pst__m--b3{background:#F7F8FA;box-shadow:inset 0 0 0 1px rgba(10,23,48,.08)}

/* ---- 7 · Karte 04 · drei Blaetter, klar als Blaetter -----------------
   Aufbau bleibt: vorne das eigene Dokument, dahinter zwei schraege.
   Die hinteren bekommen Kanten. Das Auffaechern (rotate) und das
   Zeichnen der Kurve bleiben unberuehrt.
   Der blaue Halo um den Kurvenpunkt faellt weg — das war der einzige
   echte Glow im Original. */
#lage .pfn__doc--l,
#lage .pfn__doc--r{background:#FBFCFD;
  box-shadow:inset 0 0 0 1px rgba(10,23,48,.085),0 4px 10px -5px rgba(11,27,43,.14)}
#lage .pfn__bars i{background:rgba(10,23,48,.14);border-radius:0}
#lage .pfn__bars i + i{background:rgba(10,23,48,.09)}
#lage .pfn__row{background:rgba(10,23,48,.075);border-radius:0}
#lage .pfn__dot{box-shadow:0 0 0 2.4px #185BED}