/* ---------------------------------------------------------------------------
   Die Karte — 63 × 88 mm, das Maß einer Pokerkarte.

   Diese Datei ist die EINZIGE Stelle, an der das Kartenlayout steht. Die
   Galerie (index.html) und der Druckbogen (drucken.html) laden beide sie.
   Deshalb kann die Bildschirmansicht nicht vom Druck abweichen: Es ist
   dieselbe Geometrie, in denselben Millimetern.

   Alle Maße in mm, alle Schriftgrößen in pt. Kein einziges px — px sind an
   die Bildschirmauflösung gebunden und würden im PDF wandern.

   Farben und Schrift kommen aus dem Stil von neuewelt.me: Barlow, das
   Markengrün B8CC3A, Moos und Rot als die beiden Urteilsfarben.
   --------------------------------------------------------------------------- */

@font-face{font-family:"Barlow"; font-weight:400; font-style:normal; font-display:swap;
  src:url("schrift/Barlow-400.ttf") format("truetype")}
@font-face{font-family:"Barlow"; font-weight:600; font-style:normal; font-display:swap;
  src:url("schrift/Barlow-600.ttf") format("truetype")}
@font-face{font-family:"Barlow"; font-weight:700; font-style:normal; font-display:swap;
  src:url("schrift/Barlow-700.ttf") format("truetype")}
@font-face{font-family:"Barlow Condensed"; font-weight:600; font-style:normal; font-display:swap;
  src:url("schrift/BarlowCondensed-600.ttf") format("truetype")}

:root{
  --k-breit:63mm; --k-hoch:88mm; --k-rand:4mm; --k-beschnitt:3mm;

  /* Aus neuewelt.me übernommen, unverändert */
  --papier:#ffffff; --papier-tief:#f7f5f0;
  --tinte:#14202b; --tinte-leise:#556878;
  --linie:#dee3e3;
  --marke:#B8CC3A; --marke-tief:#5a6918;
  --moos:#3c5a3f;          /* gerecht */
  --rot:#a8412a;           /* ungerecht */
  --grau:#7c8a94;          /* neutral — zwischen den beiden, nicht farbig */
  --sans:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --eng:"Barlow Condensed","Barlow",var(--sans);
  --rand:3px;              /* fast eckig: Papier hat keine Radien */
}

/* --- Die Karte ---------------------------------------------------------- */

.kk{
  /* Die Karte ist IMMER Papier, auch wenn die Seite drumherum im Dunkelmodus
     steht: Sie zeigt ein Druckerzeugnis, und Papier wird nicht dunkel. */
  position:relative; width:var(--k-breit); height:var(--k-hoch);
  background:var(--papier); color:var(--tinte);
  font-family:var(--sans); font-size:7pt; line-height:1.35;
  display:flex; flex-direction:column; overflow:hidden;
  border:.25mm solid var(--linie); border-radius:var(--rand);
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}

/* Das Urteil steht als Band über der Karte — vor jedem Wort. */
.kk-band{height:1.6mm; flex:0 0 auto; background:var(--grau)}
.kk[data-stufe="gerecht"] .kk-band{background:var(--moos)}
.kk[data-stufe="ungerecht"] .kk-band{background:var(--rot)}

.kk-kopf{padding:2.6mm var(--k-rand) 1.8mm; flex:0 0 auto}
.kk-gruppe{
  font-family:var(--eng); font-size:5.4pt; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--marke-tief);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Alle 48 Namen stehen in DERSELBEN Größe und IMMER in einer Zeile. Die Größe
   ist nicht gewählt, sondern gemessen: Sie ist die größte, bei der auch der
   längste Name — „Der Pharao zur Zeit Josephs“ bzw. „The Pharaoh of Joseph's
   day“ — noch in die 55 mm Satzbreite passt.

   Unterschiedlich große Namen sahen aus wie ein Fehler, und Umbrüche haben
   die Karten unterschiedlich hoch aussehen lassen, obwohl sie es nie waren.

   Gemessen am 2026-08-03: Satzbreite 206 px (54,5 mm). Bei 13 pt ist genau
   ein Name zu breit — „The Pharaoh of Joseph's day“ mit 216 px. Bei 12 pt
   passen alle 96 Namen (48 × zwei Sprachen), der längste mit 201 px.
   Gesetzt sind 11,8 pt: ein Hauch Reserve, weil das PDF minimal anders setzt.
   Wer einen längeren Namen aufnimmt, misst neu (Anleitung in CLAUDE.md). */
.kk-name{
  font-size:var(--k-name, 11.8pt); font-weight:700; letter-spacing:-.025em;
  line-height:1.15; margin:.6mm 0 0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Das Bildfeld bleibt frei, bis die Bilder da sind. Es trägt keine
   Aufforderung, sondern nur eine leise Kennung — eine leere Fläche auf einer
   gedruckten Karte sieht absichtlich aus, ein „BILD FOLGT" nie. */
.kk-bild{
  flex:0 0 auto; height:27mm; margin:0 var(--k-rand);
  background:var(--papier-tief); border-radius:1px;
  display:grid; place-items:center; overflow:hidden;
}
.kk-bild img{width:100%; height:100%; object-fit:cover; display:block}
.kk-bild .platz{
  font-family:var(--eng); font-size:5pt; letter-spacing:.22em;
  text-transform:uppercase; color:#b4bfc6;
}

/* Die sechs Zeilen verteilen sich über die Resthöhe, statt oben zu kleben:
   Sonst steht unter der letzten Zeile ein Loch, und die Karte kippt nach oben. */
.kk-werte{
  flex:1 1 auto; list-style:none; margin:1.6mm 0 0; padding:0 var(--k-rand);
  display:flex; flex-direction:column; justify-content:space-between;
}
.kk-werte li{
  display:flex; align-items:baseline; gap:1.2mm;
  padding:.75mm 0; border-bottom:.18mm solid var(--linie);
}
.kk-werte li:last-child{border-bottom:none}
.kk-nr{
  font-family:var(--eng); font-size:5.2pt; font-weight:600; color:var(--marke-tief);
  width:2.6mm; flex:0 0 auto;
}
/* Das Label darf nie umbrechen: „Machtbereich" in zwei Zeilen zerreißt die
   ganze Werteliste, und zwar nur bei den paar Karten mit langem Klartext. */
.kk-lab{
  flex:1 1 auto; font-size:6.4pt; color:var(--tinte-leise); letter-spacing:.01em;
  white-space:nowrap;
}
.kk-val{
  flex:0 0 auto; font-size:7.6pt; font-weight:600; text-align:right;
  font-variant-numeric:tabular-nums; line-height:1.15;
}
.kk-val.leer{font-weight:400; font-size:6.2pt; color:var(--tinte-leise); font-style:italic}
/* Der Klartext zum Machtbereich steht UNTER der Zahl, nicht daneben — daneben
   drückt er das Label aus der Zeile. */
.kk-val .zusatz{
  display:block; font-weight:400; font-size:5.4pt; color:var(--tinte-leise);
  letter-spacing:.02em; margin-top:-.15mm;
}
.kk-punkt{
  display:inline-block; width:1.5mm; height:1.5mm; border-radius:50%;
  background:var(--grau); margin-right:.8mm;
}
.kk[data-stufe="gerecht"] .kk-punkt{background:var(--moos)}
.kk[data-stufe="ungerecht"] .kk-punkt{background:var(--rot)}

.kk-fuss{
  flex:0 0 auto; margin:0 var(--k-rand); padding:1.4mm 0 2.4mm;
  border-top:.35mm solid var(--marke);
  display:flex; justify-content:space-between; gap:1.5mm;
  font-family:var(--eng); font-size:5.4pt; letter-spacing:.055em;
  text-transform:uppercase; color:var(--tinte-leise);
}
.kk-fuss span:last-child{text-align:right; white-space:nowrap}

/* Der Gruppenbuchstabe steht als stille Marke in der Ecke — beim Sortieren
   des Stapels sieht man ihn, ohne die Karte zu drehen. */
.kk-mark{
  position:absolute; top:2.6mm; right:var(--k-rand);
  font-family:var(--eng); font-size:8pt; font-weight:600;
  color:var(--marke); letter-spacing:.04em;
}

/* Die vier Karten des Königreichs Gottes tragen kein Urteil, sondern einen
   Rahmen: Sie stechen alles, und das darf man sehen. */
.kk[data-trumpf="1"]{box-shadow:inset 0 0 0 .5mm var(--marke)}

/* --- Die vier Beikarten -------------------------------------------------- */
/* Titel, zwei Regeln, Quellen. Sie füllen den Satz auf 52 — das Format, das
   die Druckereien anbieten; 48 kennen sie nicht. Gleiche Größe, gleiche
   Schrift, aber Fließtext statt Werteliste: Sie werden gelesen, nicht
   ausgespielt. */
.kk-info{
  position:relative; width:var(--k-breit); height:var(--k-hoch);
  background:var(--papier); color:var(--tinte);
  font-family:var(--sans); font-size:6.6pt; line-height:1.42;
  display:flex; flex-direction:column; overflow:hidden;
  border:.25mm solid var(--linie); border-radius:var(--rand);
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.kk-info .kk-band{background:var(--marke)}
.kk-info-kopf{padding:3mm var(--k-rand) 1.6mm}
.kk-info-kopf .oben{
  font-family:var(--eng); font-size:5.4pt; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--marke-tief);
}
.kk-info-kopf h3{
  font-size:11.8pt; font-weight:700; letter-spacing:-.025em; line-height:1.12;
  margin:.8mm 0 0;
}
.kk-info-text{
  flex:1 1 auto; padding:1.4mm var(--k-rand) 0; margin:0;
  display:flex; flex-direction:column; gap:1.6mm;
}
.kk-info-text p{margin:0}
.kk-info-text .zitat{
  font-style:italic; color:var(--tinte-leise);
  padding-left:1.6mm; border-left:.4mm solid var(--marke);
}
.kk-info-text b{font-weight:600}
.kk-info-fuss{
  flex:0 0 auto; margin:0 var(--k-rand); padding:1.4mm 0 2.4mm;
  border-top:.35mm solid var(--marke);
  font-family:var(--eng); font-size:5.2pt; letter-spacing:.055em;
  text-transform:uppercase; color:var(--tinte-leise);
}

/* --- Rückseite ---------------------------------------------------------- */

.kk-rueck{
  width:var(--k-breit); height:var(--k-hoch); border-radius:var(--rand);
  border:.25mm solid var(--linie); overflow:hidden; position:relative;
  background:
    repeating-linear-gradient(45deg, transparent 0 2.4mm,
      color-mix(in srgb, var(--marke) 13%, transparent) 2.4mm 2.8mm),
    linear-gradient(180deg, #dbe9f5 0%, #fbfaf6 48%, #f4eee3 82%, #efe6d6 100%);
  display:grid; place-items:center; text-align:center;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.kk-rueck .titel{
  font-family:var(--sans); font-weight:700; font-size:14pt; line-height:1.02;
  letter-spacing:-.03em; color:var(--tinte); padding:0 6mm;
}
.kk-rueck .titel em{
  display:block; font-style:normal; font-family:var(--eng); font-weight:600;
  font-size:5.6pt; letter-spacing:.28em; text-transform:uppercase;
  color:var(--marke-tief); margin-bottom:2.2mm;
}
.kk-rueck .amp{color:var(--marke-tief)}
.kk-rueck .fuss{
  position:absolute; bottom:5mm; left:0; right:0;
  font-family:var(--eng); font-size:5pt; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tinte-leise);
}