/* =====================================================================
   Szene „agenturreport“ · 3a · Was Agenturen liefern
   (V: Ein typischer Agentur-Monatsreport auf Papier: Kennzahlen mit grünen Pfeilen, Linien-, Balken- und
   Ringdiagramm, „Starker Monat!“. Beim Scrollen zählen die Zahlen hoch und die Diagramme wachsen. Zum Schluss
   wird alles blass, nur das Fazit leuchtet: Neue Anfragen 0, Gewonnene Aufträge 0 €.)
   Grundstile = Endzustand (ohne JS / reduziert komplett lesbar). Bewegung nur unter .ar-on.
   Eigene Agentur-Farbwelt (Violett), damit der Report fremd wirkt; Make-It-Orange nur im Fazit.
   ===================================================================== */

.ar-run{position:relative}
.ar-wrap{position:relative}
/* Das Blatt passt immer in die Bildschirmhöhe: Breite aus der verfügbaren Höhe abgeleitet (Blatt ca. 4:3) */
.ar{width:min(100%,calc((100svh - var(--hdr-h,72px) - 110px) * 1.38));margin-left:auto}

.ar{--ar-ink:#17161c;--ar-soft:#6b6879;--ar-line:#e6e4ee;--ar-vio:#6d5dfc;--ar-up:#14975a;margin:0;perspective:1400px}
.ar__sheet{position:relative;padding:clamp(18px,2.2vw,30px);border-radius:10px;color:var(--ar-ink);
  background:linear-gradient(180deg,#ffffff,#f6f5fa);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 50px 80px -40px rgba(0,0,0,.9),0 18px 30px -18px rgba(0,0,0,.7);
  transform:rotate(-1.2deg);transform-origin:50% 0}

/* Kopf */
.ar__top{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--ar-line)}
.ar__brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.875rem;letter-spacing:-.01em}
.ar__logo{width:22px;height:22px;border-radius:6px;background:conic-gradient(from 210deg,#6d5dfc,#c86dfc,#ff6fae,#6d5dfc)}
.ar__meta{display:flex;flex-direction:column;margin-left:auto;text-align:right;font-size:.75rem;line-height:1.3;color:var(--ar-soft)}
.ar__meta b{color:var(--ar-ink);font-size:.875rem}
.ar__tag{position:absolute;top:-11px;right:18px;padding:3px 10px;border-radius:999px;background:var(--bg,#0b0b0c);color:var(--fg,#f3efe8);
  box-shadow:inset 0 0 0 1px rgba(255,137,0,.6);font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.ar__hello{margin:14px 0 12px;font-size:clamp(1rem,1.4vw,1.25rem);font-weight:700;letter-spacing:-.015em;color:var(--ar-vio)}

/* Kennzahlen */
.ar__kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.ar__kpi{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px var(--ar-line)}
.ar__k{font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ar-soft)}
.ar__v{font-size:clamp(1.05rem,1.55vw,1.45rem);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.ar__d{font-size:.75rem;font-weight:700;color:var(--ar-up)}

/* Diagramme */
.ar__charts{display:grid;grid-template-columns:1.5fr 1fr;gap:8px;margin-top:8px}
.ar__chart{padding:10px 12px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px var(--ar-line);min-width:0}
.ar__chart--line{grid-row:auto}
.ar__ch{margin:0 0 6px;font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ar-soft)}
.ar__chart--line svg{display:block;width:100%;height:clamp(80px,min(9vw,13svh),140px)}
.ar__grid line{stroke:var(--ar-line);stroke-width:1;vector-effect:non-scaling-stroke}
.ar__line{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--ar-l,1))}
.ar__area{opacity:var(--ar-l,1)}
.ar__bars{display:flex;align-items:flex-end;gap:8px;height:clamp(80px,min(9vw,13svh),140px);margin:0;padding:0;list-style:none}
.ar__bars li{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%;min-width:0}
.ar__bars i{display:block;width:100%;max-width:30px;height:calc(var(--h) * 78% * var(--ar-b,1));border-radius:4px 4px 1px 1px;background:linear-gradient(180deg,#8b7dfd,#6d5dfc)}
.ar__bars span{font-size:.5625rem;color:var(--ar-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ar__donut-row{display:flex;align-items:center;gap:10px}
.ar__donut{width:62px;height:62px;flex:none;transform:rotate(-90deg)}
.ar__seg{stroke-dasharray:calc(var(--len) * var(--ar-r,1)) 100;stroke-dashoffset:calc(var(--off) * -1 * var(--ar-r,1))}
.ar__legend{margin:0;padding:0;list-style:none;display:grid;gap:3px;font-size:.6875rem;color:var(--ar-soft)}
.ar__legend li{display:flex;align-items:center;gap:6px;white-space:nowrap}
.ar__legend i{width:8px;height:8px;border-radius:2px;flex:none}

/* Fazit: der einzige Teil, der zählt */
.ar__fazit{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 0}
.ar__f{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:8px;background:#fff4e6;box-shadow:inset 0 0 0 1.5px var(--accent,#ff8900)}
.ar__f dt{font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#7a3f00}
.ar__f dd{margin:0;font-size:clamp(1.5rem,2.4vw,2.2rem);font-weight:700;line-height:1;color:var(--accent,#ff8900);font-variant-numeric:tabular-nums}
.ar__cap{margin:clamp(18px,2.2vw,30px) 0 0;max-width:22em;font-size:clamp(1.25rem,2vw,1.75rem);font-weight:500;line-height:1.25;letter-spacing:-.015em;color:var(--fg-2)}
.ar__cap b{color:var(--fg);font-weight:600}

/* ---------- Bewegung (agenturreport.js setzt .ar-on) ---------- */
.ar-on .ar__sheet{transform:translate3d(0,calc((1 - var(--ar-in,1)) * 70px),0) rotate(calc(-3deg + var(--ar-in,1) * 1.8deg));opacity:var(--ar-in,1)}
.ar-on .ar__top,.ar-on .ar__hello,.ar-on .ar__kpis,.ar-on .ar__charts{opacity:calc(1 - var(--ar-dim,0) * .72);transition:none}
.ar-on .ar__f{opacity:var(--ar-f,1);transform:scale(calc(.94 + var(--ar-f,1) * .06))}
.ar-on .ar__cap{opacity:var(--ar-c,1);transform:translate3d(0,calc((1 - var(--ar-c,1)) * 14px),0)}

@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  html.motion:not(.reduced) .ar-run.ar-on{height:calc(100svh + 110vh)}
  html.motion:not(.reduced) .ar-run.ar-on .ar-pin{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;padding-top:var(--hdr-h)}
  html.motion:not(.reduced) .ar-run.ar-on .ar-grid{width:100%}
}

@media (max-width:899px){.ar{width:100%;margin:0}}
@media (max-width:599px){
  .ar__kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ar__charts{grid-template-columns:1fr}
  .ar__chart--line{grid-row:auto}
  .ar__meta span{display:none}
  .ar__f{flex-direction:column;align-items:flex-start;gap:4px}
}