/* DE: Der Bastelbogen (Papierfassung des Erzählwürfels): je Würfel ein Kreuznetz zum Ausschneiden und Falten.
   Die Bildschirmfassung zeigt bewusst dasselbe wie der Druck — wer sehen will, was aus dem Drucker kommt, soll
   nicht erst drucken müssen. Auf Papier bekommt jedes Netz ein eigenes Blatt.

   Die Feldgröße ist in MILLIMETERN gesetzt, nicht in Pixeln: ein Würfel mit 42 mm Kante liegt gut in einer
   Kinderhand, und das ist eine Angabe über Papier, keine über Bildschirme.
   EN: The cut-out sheet (paper side of the story dice): one cross net per die to cut and fold. The screen shows
   deliberately the same as the print — nobody should have to print in order to see what they get. On paper each
   net gets its own sheet.

   The face size is set in MILLIMETRES, not pixels: a die with a 42 mm edge sits well in a child's hand, and
   that is a statement about paper, not about screens. */

.cutsheet { margin-block-start: var(--sp-lg); }
.cutsheet__head { margin-block-end: var(--sp-lg); }
.cutsheet__lead { color: var(--text-muted); margin-block-start: var(--sp-xs); max-width: 60ch; }
.cutsheet__back { margin-block-start: var(--sp-sm); }

/* Die Legende zeigt die beiden Stricharten, statt sie zu benennen — „gepunktet" hilft niemandem, der die Linie
   nicht daneben sieht. */
.cutsheet__legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs);
  color: var(--text-muted); font-size: var(--step--1); margin-block-start: var(--sp-sm); }
.cutsheet__key { display: inline-block; inline-size: 3rem; block-size: 0; margin-inline-start: var(--sp-sm); }
.cutsheet__key--cut { border-block-start: 2px dashed var(--text); }
.cutsheet__key--fold { border-block-start: 2px dotted var(--text-muted); }

.cutsheet__sheets { list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--sp-2xl); }
.cutsheet__title { font-size: var(--step-0); margin: 0 0 var(--sp-sm); }

/* DE: Das Netz ist ein 4×3-RASTER, keine absolut gesetzten Kästchen: die Seite verbietet `style`-Attribute
   (CSP), und ein verworfenes Inline-`left` meldet sich nicht, es legt einfach alle Felder oben links
   übereinander. Zeile und Spalte kommen als `data-`-Werte aus demselben Dienst, der auch die Linien vermisst.

   Der Rand (0,3 Feldkanten) muss die Laschen fassen; dieselbe Zahl steht als `MARGIN_RATIO` im Dienst, weil
   das SVG-viewBox mit ihr rechnet. Ändert sich eine, muss die andere mit — deshalb steht sie hier benannt.
   EN: The net is a 4×3 GRID, not absolutely placed boxes: the page forbids `style` attributes (CSP), and a
   dropped inline `left` does not announce itself — it simply stacks every cell top-left. Row and column arrive
   as `data-` values from the same service that measures the lines.

   The margin (0.3 face edges) has to hold the tabs; the same number lives as `MARGIN_RATIO` in the service,
   because the SVG viewBox is built from it. */
.cutsheet__net { --cutsheet-face: clamp(16mm, 17vw, 40mm); --cutsheet-margin: calc(var(--cutsheet-face) * 0.3);
  position: relative; display: grid; padding: var(--cutsheet-margin);
  grid-template-columns: repeat(4, var(--cutsheet-face));
  grid-template-rows: repeat(3, var(--cutsheet-face)); inline-size: max-content; }

.cutsheet__face[data-col="0"] { grid-column: 1; } .cutsheet__face[data-col="1"] { grid-column: 2; }
.cutsheet__face[data-col="2"] { grid-column: 3; } .cutsheet__face[data-col="3"] { grid-column: 4; }
.cutsheet__face[data-row="0"] { grid-row: 1; } .cutsheet__face[data-row="1"] { grid-row: 2; }
.cutsheet__face[data-row="2"] { grid-row: 3; }

/* Die Zeichnung liegt über dem ganzen Kasten INKLUSIVE Rand — dort stehen die Laschen. */
.cutsheet__lines { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
/* Geschnitten wird gestrichelt und kräftig, gefalzt gepunktet und leicht: ein Kind muss die beiden Linienarten
   auf dem Papier auseinanderhalten können, ohne die Legende zu lesen. Farbe allein trüge das nicht (WCAG). */
.cutsheet__cut { stroke: var(--text); stroke-width: 2; stroke-dasharray: 10 6; fill: none; }
.cutsheet__fold { stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 2 6;
  stroke-linecap: round; fill: none; }
/* Die Lasche ist nur die getönte Fläche — „wo der Klebstoff hinkommt". Ihr Umriss läuft als Schnittlinie
   daneben, damit die Basis gefalzt und nicht geschnitten wird. */
.cutsheet__tab { fill: var(--surface-2); stroke: none; }

/* Ein Feld: Bild oben, Wort darunter — dieselbe Anordnung wie auf dem Würfel am Schirm, damit die gebastelte
   Seite und die gedrehte Seite als dasselbe erkennbar sind. */
.cutsheet__face { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem; padding: 6%; text-align: center; overflow: hidden; min-inline-size: 0; }
.cutsheet__face img { max-inline-size: 100%; max-block-size: 50%; object-fit: contain; }
/* Die Schrift wächst mit der Feldkante, nicht mit dem Fenster: das Feld ist eine Papiergröße. */
.cutsheet__word { font-family: var(--font-display); font-weight: 700; line-height: 1.1;
  font-size: calc(var(--cutsheet-face) * 0.13); hyphens: auto; overflow-wrap: break-word;
  max-inline-size: 100%; }

.cutsheet__empty { color: var(--text-muted); }

@media print {
  /* Auf Papier trägt der Bogen sich selbst: Kopf, Legende und Rückweg sind Bildschirmsache. */
  .cutsheet__lead, .cutsheet__legend, .cutsheet__back { display: none; }
  /* Ein Netz je Blatt — zwei nebeneinander wären kleiner als eine Kinderhand. */
  .cutsheet__sheet { break-after: page; break-inside: avoid; }
  .cutsheet__sheet:last-child { break-after: auto; }
  /* 38 mm Kante → 4,6 × 38 = 175 mm breit: das passt in den bedruckbaren Bereich von A4 hochkant, ohne dass
     der Drucker den Bogen verkleinert — ein verkleinerter Bogen ergäbe einen Würfel in falscher Größe. */
  .cutsheet__net { --cutsheet-face: 38mm; }
  /* Schwarz auf Weiß: gestrichelt/gepunktet trägt die Bedeutung, nicht der Grauwert eines Sparmodus. Die
     Laschen behalten eine helle Tönung — sie sagt einem Kind, wo der Klebstoff hinkommt. */
  .cutsheet__cut { stroke: #000; }
  .cutsheet__fold { stroke: #555; }
  .cutsheet__tab { fill: #eee; }
}