/* ============================================================
   ProtoPiece – Zeichnungsblatt (nur protopiece.html)
   Ergaenzt protoframe.css, ersetzt es nicht.

   Grundsatz: Das Blatt ist Protoframe (Papier, Graphit, Signalblau).
   Das Schild ist ProtoPiece. "Das Schild traegt die Identitaet,
   das Papier traegt die Entstehung." (ProtoPiece/protopiece/README.md)

   Die --pp-* Tokens unten sind eine Kopie aus
   ../../../ProtoPiece/protopiece/tokens.css und gelten ausschliesslich
   innerhalb von .pp-schild. Massstab dort: 16 px = 1 mm.
   Aendert sich das Schild, wird hier nachgezogen.
   ============================================================ */

/* --- Kopf: eigene Wortmarke, Protoframe als Absender darunter --- */
.pp-mark {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-decoration: none;
}
.pp-mark:hover { text-decoration: none; }
.pp-mark__wort {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pf-text-primary);
}
.pp-mark__haus {
  font: var(--pf-type-dimension);
  letter-spacing: var(--pf-tracking-label);
  text-transform: uppercase;
  color: var(--pf-text-faint);
}
.pp-mark__haus a { color: var(--pf-text-accent); }

/* --- Das Blatt --- */
.pp-sheet {
  position: relative;
  scroll-margin-top: 92px;
  background: var(--pf-surface-card);
  border: var(--pf-border-hairline);
  /* Unten bewusst ohne Polsterung, damit das Schriftfeld buendig in der
     Ecke sitzt wie auf einer Zeichnung. Blaetter, die nicht damit enden,
     brauchen den Abstand aber - sonst klebt die letzte Zeile am Rand. */
  padding: var(--pf-space-7) var(--pf-space-7) 0;
  margin: var(--pf-space-7) 0 var(--pf-space-9);
}
/* Blattecken als Anrisse */
.pp-sheet::before,
.pp-sheet::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--pf-line-accent);
  border-style: solid;
  opacity: 0.55;
  pointer-events: none;
}
.pp-sheet::before { top: 7px; left: 7px; border-width: 1px 0 0 1px; }
.pp-sheet::after { bottom: 7px; right: 7px; border-width: 0 1px 1px 0; }

.pp-sheet > :last-child:not(.pp-field) { margin-bottom: var(--pf-space-7); }

.pp-sheet__head {
  display: flex;
  align-items: baseline;
  gap: var(--pf-space-5);
  flex-wrap: wrap;
  border-bottom: var(--pf-border-construction);
  padding-bottom: 10px;
  margin-bottom: var(--pf-space-7);
}
.pp-sheet__title {
  font: var(--pf-type-dimension);
  letter-spacing: var(--pf-tracking-stamp);
  text-transform: uppercase;
  color: var(--pf-text-muted);
}
.pp-sheet__rev {
  margin-left: auto;
  font: var(--pf-type-dimension);
  color: var(--pf-text-faint);
}

.pp-sheet__body {
  display: grid;
  grid-template-columns: auto minmax(280px, 1fr);
  gap: var(--pf-space-8);
  align-items: start;
}

/* --- Positionsnummer --- */
.pp-pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid var(--pf-line-accent);
  border-radius: var(--pf-radius-pill);
  font: var(--pf-type-dimension);
  color: var(--pf-text-accent);
  flex: none;
}
.pp-posline {
  display: flex;
  align-items: center;
  gap: var(--pf-space-3);
  margin-bottom: var(--pf-space-4);
}
.pp-posline__label {
  font: var(--pf-type-dimension);
  letter-spacing: var(--pf-tracking-label);
  text-transform: uppercase;
  color: var(--pf-text-muted);
}

/* --- Position 1: das Typenschild, 1:1 --- */
.pp-plate { display: flex; flex-direction: column; gap: var(--pf-space-4); }
.pp-stage {
  --pp-scale: 1;
  width: calc(640px * var(--pp-scale));
  max-width: 100%;
}
.pp-stage__inner {
  width: 640px;
  transform: scale(var(--pp-scale));
  transform-origin: top left;
}

.pp-schild {
  /* Tokens aus dem ProtoPiece-Schildsystem – nur hier gueltig */
  --pp-plate: #26272a;
  --pp-rule: #5c5d60;
  --pp-engrave-100: #d9d6ce;
  --pp-engrave-200: #bdbab2;
  --pp-mm-0-5: 8px;
  --pp-mm-1: 16px;
  --pp-mm-2-25: 36px;
  --pp-mm-2-5: 40px;

  width: 640px;            /* 40 mm */
  height: 240px;           /* 15 mm */
  box-sizing: border-box;
  background: var(--pp-plate);
  border-radius: 16px;     /* 1 mm */
  padding: var(--pp-mm-2-25) var(--pp-mm-2-5);
  display: flex;
  flex-direction: column;
  gap: var(--pp-mm-1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 3px 10px rgba(0,0,0,0.20);
}
.pp-schild__wort {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 34px; line-height: 1; font-weight: 600; letter-spacing: 0.2em;
  color: var(--pp-engrave-100);
}
.pp-schild__rule { height: 1px; background: var(--pp-rule); }
.pp-schild__daten { display: flex; flex-direction: column; gap: var(--pp-mm-0-5); }
.pp-schild__typ {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 22px; line-height: 1.3; font-weight: 400; letter-spacing: 0.06em;
  color: var(--pp-engrave-200);
}
.pp-schild__nr {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: 0.06em;
  color: var(--pp-engrave-100);
}

/* Bemassung unter dem Schild */
.pp-dim {
  display: flex;
  align-items: center;
  gap: 10px;
  font: var(--pf-type-dimension);
  color: var(--pf-text-faint);
}
.pp-dim__line {
  flex: 1;
  height: 1px;
  background: var(--pf-line-hairline);
  position: relative;
  min-width: 40px;
}
.pp-dim__line::before, .pp-dim__line::after {
  content: ""; position: absolute; top: -4px; width: 1px; height: 9px;
  background: var(--pf-line-hairline);
}
.pp-dim__line::before { left: 0; } .pp-dim__line::after { right: 0; }
.pp-scale-note--gross, .pp-scale-note--klein { display: none; }
.pp-plate.is-1zu1 .pp-scale-note--gross { display: inline; }
.pp-plate:not(.is-1zu1) .pp-scale-note--klein { display: inline; }
/* Ohne JS bleibt nur "40 x 15 mm" stehen - das stimmt immer. */

/* --- Text rechts --- */
.pp-text p {
  font: var(--pf-type-body-lg);
  color: var(--pf-text-secondary);
  text-wrap: pretty;
  margin: 0 0 var(--pf-space-5);
}
.pp-text .pp-lead {
  font: var(--pf-type-body-lg);
  color: var(--pf-text-primary);
}
.pp-satz {
  border-left: 2px solid var(--pf-line-accent);
  padding-left: var(--pf-space-5);
  margin: var(--pf-space-6) 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--pf-text-primary);
}

/* Beschriftung der Animation: feste Breiten.
   Ohne sie bricht die Zeile um, sobald aus "Im Aufbau" "Schild eingelegt"
   wird - und weil die Beschriftung an der Unterkante haengt, waechst sie
   dabei nach oben. Der laengste Zustand ist "Schild eingelegt". */
#pf-buildup-layer {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#pf-buildup-state {
  white-space: nowrap;
  min-width: 16ch;
  text-align: right;
}

/* --- Position 2: Entstehung, kleiner --- */
.pp-figure { max-width: 520px; }
.pp-figure .figure { min-height: 210px; }

/* --- Schriftfeld unten rechts --- */
.pp-field {
  margin-top: var(--pf-space-8);
  margin-left: auto;
  width: max-content;
  max-width: 100%;
  border: var(--pf-border-hairline);
  border-right: 0; border-bottom: 0;
  display: grid;
  grid-template-columns: auto auto;
}
.pp-field__k, .pp-field__v {
  border-right: var(--pf-border-hairline);
  border-bottom: var(--pf-border-hairline);
  padding: 7px 14px;
  font: var(--pf-type-dimension);
  letter-spacing: var(--pf-tracking-label);
  text-transform: uppercase;
}
.pp-field__k { color: var(--pf-text-faint); }
.pp-field__v { color: var(--pf-text-primary); }
.pp-field__v--signal { color: var(--pf-text-signal); }

/* --- Schmal --- */
@media (max-width: 900px) {
  .pp-sheet__body { grid-template-columns: 1fr; gap: var(--pf-space-7); }
}
@media (max-width: 720px) {
  .pp-sheet { padding: var(--pf-space-6) var(--pf-space-5) 0; }
  /* Rueckfall ohne JS - massstab.js misst genauer und ueberschreibt das */
  .pp-stage { --pp-scale: 0.42; height: calc(240px * 0.42); }
  .pp-stage__inner { height: 240px; }
  .pp-field { margin-left: 0; }
}
@media (max-width: 420px) {
  .pp-stage { --pp-scale: 0.34; height: calc(240px * 0.34); }
}

/* ============================================================
   Eigenstaendige Website – zusaetzlich zum Blatt oben
   ============================================================ */

/* Mehrere Blaetter untereinander */
.pp-sheet + .pp-sheet { margin-top: var(--pf-space-9); }

/* Abschnitt ohne Zeichnungsrahmen: reiner Text */
.pp-prose { max-width: 62ch; }
.pp-prose p {
  font: var(--pf-type-body-lg);
  color: var(--pf-text-secondary);
  text-wrap: pretty;
  margin: 0 0 var(--pf-space-5);
}

/* Datenliste im Zeichnungsstil (Nummernlogik, Material) */
.pp-liste {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0;
  border-top: var(--pf-border-hairline);
  margin: var(--pf-space-6) 0 0;
}
.pp-liste dt, .pp-liste dd {
  border-bottom: var(--pf-border-hairline);
  padding: 10px var(--pf-space-5) 10px 0;
  margin: 0;
}
.pp-liste dt {
  font: var(--pf-type-dimension);
  letter-spacing: var(--pf-tracking-label);
  text-transform: uppercase;
  color: var(--pf-text-faint);
  padding-right: var(--pf-space-7);
  white-space: nowrap;
}
.pp-liste dd { font: var(--pf-type-body); color: var(--pf-text-secondary); }
.pp-liste dd code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  color: var(--pf-text-primary);
}

/* Schildzeilen erklaert: Aufbau des Typenschilds */
.pp-zeilen {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--pf-space-4) var(--pf-space-6);
  margin-top: var(--pf-space-6);
}
.pp-zeilen__wert {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.92rem;
  color: var(--pf-text-primary);
  white-space: nowrap;
}
.pp-zeilen__was { font: var(--pf-type-body); color: var(--pf-text-secondary); }

/* Fuss der eigenen Seite */
.pp-footer__haus {
  font: var(--pf-type-dimension);
  letter-spacing: var(--pf-tracking-label);
  text-transform: uppercase;
  color: var(--pf-text-faint);
}
.pp-footer__haus a { color: var(--pf-text-accent); }

@media (max-width: 560px) {
  .pp-liste, .pp-zeilen { grid-template-columns: 1fr; }
  .pp-liste dt { border-bottom: 0; padding-bottom: 0; }
  /* max-content sprengt sonst die Breite, sobald ein Wert lang wird */
  .pp-field { width: 100%; grid-template-columns: auto minmax(0, 1fr); }
  .pp-field__v { overflow-wrap: anywhere; }
  .pp-zeilen__wert { white-space: normal; overflow-wrap: anywhere; }
}

/* ============================================================
   Auslage unter dem Spot

   Das Stueck wird ausgestellt, nicht vermessen. Ein Lichtpool liegt auf
   der Flaeche, zum Rand hin faellt sie deutlich ab - ohne diese
   Abdunklung waere auf Papier (#fbfbf9) kein Licht darstellbar.
   Kein Lichtkegel: ein gezeichneter Kegel bleibt flach und verraet sich.

   --pp-x / --pp-y sind die Position des Strahlers; spot.js schiebt sie
   dem Zeiger nach. Ohne JS bleibt der Spot an seinem Standardplatz.

   Jedes Blatt ist eine Platte mit sichtbarer Dicke. --pp-h ist die
   Lagehoehe: sie steuert Kante, Schlagschatten und Verlauf am Rand.
   ============================================================ */
:root {
  --pp-x: 50%;
  --pp-y: 14%;

  --pp-kern: rgba(255, 252, 244, 0.95);   /* Lichtpool, leicht warm */
  --pp-rand: rgba(28, 27, 24, 0.38);      /* Abfall zum Blattrand */

  --pp-kante: rgba(31, 31, 29, 0.16);
  --pp-punkt: rgba(31, 31, 29, 0.32);   /* Notizbuchraster */
  --pp-schlag: rgba(24, 23, 20, 0.55);      /* Kernschatten */
  --pp-schlag-weit: rgba(24, 23, 20, 0.36); /* weiter Wurf */
  --pp-firnis: rgba(31, 31, 29, 0.035);
  --pp-grat: rgba(255, 255, 255, 0.9);
}
[data-pf-theme="dark"] {
  --pp-kern: rgba(214, 232, 255, 0.16);
  --pp-rand: rgba(0, 0, 0, 0.78);

  --pp-kante: rgba(0, 0, 0, 0.62);
  --pp-punkt: rgba(226, 232, 240, 0.26);
  /* Invertiert: auf dunklem Grund ist ein dunkler Schatten unsichtbar.
     Die Platte wirft stattdessen Licht ab - sie liegt im Strahler und
     gibt es an die Flaeche weiter. Geometrie bleibt gleich, nur die
     Farbe kehrt sich um. */
  --pp-schlag: rgba(206, 228, 255, 0.115);      /* Kernlicht */
  --pp-schlag-weit: rgba(188, 216, 255, 0.055); /* weiter Schein */
  --pp-firnis: rgba(0, 0, 0, 0.18);
  --pp-grat: rgba(255, 255, 255, 0.08);
}

/* --- Flaeche: Lichtpool und Abfall zum Rand --- */
.pp-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(64% 52% at var(--pp-x) var(--pp-y),
      var(--pp-kern) 0%, transparent 62%),
    radial-gradient(118% 96% at var(--pp-x) var(--pp-y),
      transparent 0%, transparent 26%, var(--pp-rand) 100%);
  transition: background-position 120ms linear;
}

/* --- Punktraster wie im Notizbuch ---
   Liegt auf der Flaeche, nicht auf den Blaettern. Die Maske haengt am
   Spot: im Licht steht es, zum Rand loest es sich auf. Dadurch gibt es
   Struktur, ohne sich in den Vordergrund zu draengen. */
.pp-bg__raster {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, var(--pp-punkt) 1.1px, transparent 1.35px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(102% 85% at var(--pp-x) var(--pp-y),
    #000 0%, rgba(0,0,0,0.62) 58%, transparent 92%);
          mask-image: radial-gradient(102% 85% at var(--pp-x) var(--pp-y),
    #000 0%, rgba(0,0,0,0.62) 58%, transparent 92%);
}

/* --- Die Platte --- */
/*
   Keine gezeichnete Materialkante: ein harter Balken unter dem Blatt
   liest sich als Strich, nicht als Dicke. Das Gewicht tragen die
   Schatten allein.

   --pp-h      Lagehoehe ueber der Flaeche - steuert Wurf und Streuung.
   --pp-lx/-ly Lichtrichtung, von spot.js je Blatt gesetzt.
*/
.pp-sheet {
  --pp-h: 1;
  --pp-wurf: calc(var(--pp-h) * 22px);
  --pp-lx: 0;
  --pp-ly: 1;

  background:
    linear-gradient(158deg, transparent 0%, transparent 48%, var(--pp-firnis) 100%),
    var(--pf-surface-card);

  box-shadow:
    /* belichtete Oberkante */
    inset 0 1px 0 var(--pp-grat),
    /* Kernschatten - dicht am Blatt, traegt das Gewicht */
    calc(var(--pp-lx) * var(--pp-wurf) * 0.55)
    calc(var(--pp-ly) * var(--pp-wurf) * 0.65)
    calc(var(--pp-wurf) * 1.05)
    calc(var(--pp-wurf) * -0.22)
    var(--pp-schlag),
    /* weiter Wurf - macht die Masse */
    calc(var(--pp-lx) * var(--pp-wurf) * 1.5)
    calc(var(--pp-ly) * var(--pp-wurf) * 1.6)
    calc(var(--pp-wurf) * 3.8)
    calc(var(--pp-wurf) * -0.45)
    var(--pp-schlag-weit);

  transition: box-shadow 90ms linear;
}

/* Lagehoehen - Blatt 01 traegt das Stueck und liegt am hoechsten */
.pp-sheet#stueck     { --pp-h: 2.1; }
.pp-sheet#schild     { --pp-h: 1.5; }
.pp-sheet#entstehung { --pp-h: 1.5; }
.pp-sheet#kontakt    { --pp-h: 0.85; }

.pp-sheet + .pp-sheet { margin-top: calc(var(--pf-space-9) + var(--pp-wurf)); }

@media (max-width: 720px) {
  /* Die ID-Regeln oben sind spezifischer als .pp-sheet - hier muss
     dieselbe Spezifitaet her, sonst bleibt die Lagehoehe vom Desktop
     stehen und die Schatten werden auf dem Handy viel zu wuchtig. */
  .pp-sheet#stueck     { --pp-h: 1.2; }
  .pp-sheet#schild     { --pp-h: 0.9; }
  .pp-sheet#entstehung { --pp-h: 0.9; }
  .pp-sheet#kontakt    { --pp-h: 0.6; }
}