/* ==========================================================================
   AKM · leistungen.html — Zusatz-Layer (Social-Media-Seite)
   --------------------------------------------------------------------------
   Wird NACH sections.css geladen. Eigener .lp-*-Namensraum, kollisionsfrei zu
   base/tokens/sections/frames. Ausschliesslich Tokens aus tokens.css — kein Hex.
   Enthaelt:
     A) System-Galerie „Einblick ins System" (+ markierte Platzhalter-Frames)
     B) Aggregat-Datenvisualisierung als token-basiertes Inline-SVG
   Baut auf geteilten Klassen auf (.frame*, .pg-figure, .pg-statband/.pg-stat),
   definiert diese nicht neu. Reduced-motion-fest (keine Pflicht-Animation).
   ========================================================================== */

/* ==========================================================================
   A) GALERIE „EINBLICK INS SYSTEM"
   ========================================================================== */

/* Hero-Screenshot der Galerie — zentriert, ruhig, ueber volle Textbreite */
.lp-figure--feature{
  max-width:940px;
  margin-inline:auto;
  margin-top:clamp(var(--sp-8), 6vw, var(--sp-16));
}

/* Kompaktes Raster fuer die weiteren (noch offenen) Ansichten */
.lp-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:clamp(var(--sp-6), 4vw, var(--sp-12));
  margin-top:clamp(var(--sp-8), 6vw, var(--sp-16));
}

/* Platzhalter-Frame: gleiche Browser-Anmutung, aber bewusst LEER und markiert.
   Kein Fake-Screenshot — ein gestricheltes Feld mit Label „Weitere Ansicht folgt". */
.lp-frame--ph{
  background:var(--bg-elev);
  box-shadow:0 20px 60px -34px rgba(0,0,0,.9);   /* flacher, ohne Akzent-Glow der echten Frames */
}
.lp-frame--ph:hover{
  transform:none;                                /* Platzhalter hebt nicht ab */
  border-color:var(--hairline-strong);
  box-shadow:0 20px 60px -34px rgba(0,0,0,.9);
}
.lp-shot-ph{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:1512 / 982;                       /* identisch zu den Screenshots → kein Layout-Shift */
  margin:var(--sp-3);
  border:1px dashed var(--hairline-strong);
  border-radius:var(--r-md);
  /* zarte diagonale Schraffur signalisiert „Platzhalter, keine echten Daten" */
  background:
    repeating-linear-gradient(135deg,
      var(--accent-faint) 0, var(--accent-faint) 1px,
      transparent 1px, transparent 12px);
}
.lp-shot-ph__tag{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  padding:.55em 1.1em;
  border-radius:var(--r-pill);
  border:1px dashed var(--text-dim);
  background:var(--bg-elev);
  font-family:var(--font-display);
  font-size:.78rem;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--text-muted);
}
.lp-shot-ph__tag::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--text-dim);
  flex:0 0 auto;
}

/* ==========================================================================
   B) AGGREGAT-DATENVISUALISIERUNG (Inline-SVG, rein token-basiert)
   Ein Akzent fuer Datenflaechen, Hairline fuer Achsen/Raster, Display-Font +
   tabular-nums fuer Werte. Kein erfundener Verlauf — nur reale Aggregatsummen.
   ========================================================================== */
.lp-chartwrap{
  margin:clamp(var(--sp-8), 5vw, var(--sp-12)) auto 0;
  max-width:780px;
  padding:clamp(var(--sp-6), 4vw, var(--sp-8));
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  background:
    radial-gradient(130% 120% at 50% 0%, var(--accent-faint), transparent 55%),
    var(--bg-elev);
}
.lp-chart{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
}
.lp-chart__grid{ stroke:var(--hairline); stroke-width:1; }
.lp-chart__axis{ stroke:var(--hairline-strong); stroke-width:1; }
.lp-chart__bar{ fill:var(--accent); }
.lp-chart__cat{
  fill:var(--text-muted);
  font-family:var(--font-display);
  font-size:15px;
  letter-spacing:.02em;
}
.lp-chart__val{
  fill:var(--accent);
  font-family:var(--font-display);
  font-size:22px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.lp-chart__tick{
  fill:var(--text-dim);
  font-family:var(--font-display);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}
.lp-chartwrap figcaption{
  margin-top:var(--sp-4);
  font-family:var(--font-display);
  font-size:.82rem;
  letter-spacing:.02em;
  color:var(--text-dim);
  text-align:center;
}

/* Kennzahlband unter dem Diagramm nutzt die geteilten .pg-statband/.pg-stat. */
.lp-statband{ margin-top:clamp(var(--sp-8), 5vw, var(--sp-12)); }