/* =============================================================================
   Design „Zeichnung" — technischer Zeichnungssatz. Tokens + alle Keyframes,
   1:1 aus der Referenz. Gescopet auf .pit-zeichnung, damit NavyAmber/Dossier
   unberührt bleiben. Keyframes sind global (müssen top-level stehen).
   ========================================================================== */
.pit-zeichnung {
  --z-paper: #F7F7F4;
  --z-desk: #E9EAE6;
  --z-grid: #E4E5E0;
  --z-ink: #121417;
  --z-ink-2: #2A2E33;
  --z-muted: #5A5F66;
  --z-muted-dark: #B4B8BD;
  --z-amber: #F6C445;
  --z-amber-light: #FFE89A;
  --z-off: #C3C6C9;
  --z-ok: #2E9E5F;
  --z-warn: #F0A23B;
  --z-alarm: #E0644F;
  --z-error: #B3261E;

  --z-cond: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif;
  --z-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --z-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* pit.css setzt global h1..h5{color:var(--text-strong);font-family:var(--font-display)},
     body{color:var(--text-body)}, a{color:var(--text-link)} — hier auf Zeichnung drehen. */
  --font-display: var(--z-cond);
  --font-body: var(--z-sans);
  --font-label: var(--z-mono);
  --font-mono: var(--z-mono);
  --text-strong: var(--z-ink);
  --text-body: var(--z-ink-2);
  --text-muted: var(--z-muted);
  --text-link: var(--z-ink);
  --text-link-hover: var(--z-ink);
  --focus-ring: var(--z-amber);

  background: var(--z-desk);
  color: var(--z-ink);
  font-family: var(--z-sans);
  font-size: 17px;
  line-height: 1.6;
  padding: clamp(8px, 2vw, 28px) 0 60px;
}
.pit-zeichnung a { color: var(--z-ink); text-underline-offset: 3px; }
.pit-zeichnung a:hover { text-decoration-color: var(--z-amber); text-decoration-thickness: 3px; }

/* ── Keyframes (aus der Referenz, unverändert) ── */
@keyframes pgflow { to { background-position: 14px 0; } }
@keyframes pgflowv { to { background-position: 0 14px; } }
@keyframes pgspark { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes pgflash { 0% { opacity: .9; } 100% { opacity: 0; } }
@keyframes pgshake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-6px,2px); } 40% { transform: translate(5px,-3px); } 60% { transform: translate(-4px,1px); } 80% { transform: translate(3px,-1px); } }
@keyframes pgnudge { 0% { transform: rotate(0) translateY(0); } 12% { transform: rotate(-3deg) translateY(-8px) scale(1.02); } 24% { transform: rotate(2.6deg) translateY(-8px) scale(1.02); } 36% { transform: rotate(-2deg) translateY(-6px); } 48% { transform: rotate(1.2deg) translateY(-4px); } 62% { transform: rotate(-.5deg) translateY(-2px); } 100% { transform: rotate(0) translateY(0); } }
@keyframes pgwiggle { 0%,82%,100% { transform: rotate(0) translateY(0); } 85% { transform: rotate(-2.2deg) translateY(-4px); } 88% { transform: rotate(2deg) translateY(-4px); } 91% { transform: rotate(-1.4deg) translateY(-2px); } 94% { transform: rotate(.8deg); } 97% { transform: rotate(0); } }
@keyframes pgwipe { 0% { clip-path: inset(0 100% 0 0); opacity: .2; } 100% { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes pgpop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes pgslam { 0% { transform: rotate(-14deg) scale(2.4); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotate(-14deg) scale(1); opacity: 1; } }
@keyframes pgarrL { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-7px); } }
@keyframes pgarrR { 0%,100% { transform: translateX(0); } 50% { transform: translateX(7px); } }
@keyframes pgprint { 0% { clip-path: inset(0 0 100% 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes pgblink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes pgpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(246,196,69,.7); } 50% { box-shadow: 0 0 0 8px rgba(246,196,69,0); } }

@media (prefers-reduced-motion: reduce) {
  .pit-zeichnung * { animation: none !important; transition: none !important; }
}