/* ---------------------------------------------------------------------------
   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;
  /* Die Ampel — kräftig, damit sie über den Tisch hinweg lesbar ist.
     Gelb trägt als einzige Farbe dunkle Schrift: Weiß auf Gelb liegt bei
     etwa 1,9 : 1 und wäre auf einer gedruckten Karte unlesbar. */
  --a-rot:#c0392b; --a-gelb:#e6a100; --a-gruen:#2e8b57; --a-blau:#1f6b93;
  --a-orange:#cf6414;   /* nur im Quartett „Mutig“: der Mut kam spät, kein Urteil */
  --a-rot-schrift:#fff; --a-gelb-schrift:#3a2c00; --a-orange-schrift:#fff;
  --a-gruen-schrift:#fff; --a-blau-schrift:#fff;
  --moos:#3c5a3f; --rot:#a8412a; --grau:#7c8a94;   /* Alttöne, noch für den Anschnitt */
  --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 Band trägt die Ampelfarbe — vor jedem Wort sichtbar. Es ist zugleich
   der Ursprung der Registerfahne rechts: Band und Nummer sind ein Element. */
.kk-band{height:2.4mm; flex:0 0 auto; background:var(--a-gelb)}
.kk[data-ampel="rot"]    .kk-band{background:var(--a-rot)}
.kk[data-ampel="orange"] .kk-band{background:var(--a-orange)}
.kk[data-ampel="gelb"]  .kk-band{background:var(--a-gelb)}
.kk[data-ampel="gruen"] .kk-band{background:var(--a-gruen)}
.kk[data-ampel="blau"]  .kk-band{background:var(--a-blau)}

.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. */
/* 31 mm hoch: Bei 55 mm Satzbreite ergibt das genau 16:9, das Format, in dem
   die Bilder erzeugt werden. Vorher waren es 27 mm — dann hätte jedes Bild
   beschnitten werden müssen, und beschnitten wird immer die Bildmitte, also
   genau das, worauf es ankommt. */
.kk-bild{
  flex:0 0 auto; height:31mm; margin:0 var(--k-rand);
  background:var(--papier-tief); border-radius:1px;
  display:grid; place-items:center; overflow:hidden;
  box-shadow:inset 0 0 0 .2mm rgba(20,32,43,.10);
}
.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);
  white-space:nowrap; overflow:hidden;
}
.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}
/* Auf der Karte bricht nichts um. Der Klartext zum Machtbereich steht in
   derselben Zeile und VOR der Zahl — die Zahlenspalte rechts bleibt damit
   bündig, und die Zeile liest sich wie ein Satz: „ein ganzes Volk 5". */
.kk-val .zusatz{
  font-weight:400; font-size:5.4pt; color:var(--tinte-leise);
  letter-spacing:.02em; margin-right:1mm;
}
/* Der Punkt ist die Ampel im Kleinen — er steht direkt vor der Zahl, damit
   Farbe und Wert zusammen gelesen werden. Etwas größer als früher, sonst
   verschwindet die Farbe im Druck. */
.kk-punkt{
  display:inline-block; width:1.9mm; height:1.9mm; border-radius:50%;
  background:var(--a-gelb); margin-right:1mm; vertical-align:-.15mm;
}
.kk[data-ampel="rot"]    .kk-punkt{background:var(--a-rot)}
.kk[data-ampel="orange"] .kk-punkt{background:var(--a-orange)}
.kk[data-ampel="gelb"]  .kk-punkt{background:var(--a-gelb)}
.kk[data-ampel="gruen"] .kk-punkt{background:var(--a-gruen)}
.kk[data-ampel="blau"]  .kk-punkt{background:var(--a-blau)}

.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);
  white-space:nowrap; overflow:hidden;
}
.kk-fuss span{overflow:hidden; text-overflow:ellipsis}
.kk-fuss span:last-child{text-align:right; flex:0 0 auto}

/* Die Kartennummer — A1, A2, B1 … — als Registerfahne, die oben rechts aus
   dem Farbband herausläuft. Sie trägt die Farbe des Urteils, ist also schon
   von der Seite lesbar, wenn die Karten aufgefächert in der Hand liegen: Wer
   sammelt, sucht nach Buchstabe, wer sticht, sieht die Farbe.

   Weiße Schrift steht hier auf Moos und Rot (beide dunkel genug), niemals auf
   dem Markengrün — dort läge der Kontrast bei 1,79 : 1. */
.kk-nr-fahne{
  position:absolute; top:0; right:var(--k-rand); z-index:2;
  min-width:9mm; padding:2.4mm 1.6mm 1.5mm;
  background:var(--grau); color:#fff; text-align:center;
  font-family:var(--eng); font-weight:600; font-size:10pt;
  letter-spacing:.06em; line-height:1;
  border-bottom-left-radius:1mm; border-bottom-right-radius:1mm;
  box-shadow:0 .3mm .8mm rgba(20,32,43,.18);
}
.kk[data-ampel="rot"]    .kk-nr-fahne{background:var(--a-rot);    color:var(--a-rot-schrift)}
.kk[data-ampel="orange"] .kk-nr-fahne{background:var(--a-orange); color:var(--a-orange-schrift)}
.kk[data-ampel="gelb"]  .kk-nr-fahne{background:var(--a-gelb);  color:var(--a-gelb-schrift)}
.kk[data-ampel="gruen"] .kk-nr-fahne{background:var(--a-gruen); color:var(--a-gruen-schrift)}
.kk[data-ampel="blau"]  .kk-nr-fahne{background:var(--a-blau);  color:var(--a-blau-schrift)}
/* Der Kartenkopf weicht der Fahne aus, sonst läuft ein langer Gruppenname
   darunter durch. */
.kk-kopf{padding-right:12mm}

/* 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)}

/* --- Nur im Quartett „Mutig“: Stärke und Schwäche ------------------------ */
/* Der Kern dieses Spiels steht auf der Karte selbst, nicht nur in der
   Großansicht: Wer die Karte in der Hand hält, soll beides lesen.

   **Das Bildfeld bleibt 31 mm — genau wie drüben.** Es war zwischenzeitlich
   auf 20 mm gekürzt, um Platz zu schaffen; damit war es aber 2,75 : 1 statt
   16 : 9, und jedes erzeugte Bild hätte beschnitten werden müssen. Das Maß ist
   eine Eigenschaft der Karte, keine Stellschraube.

   Der Platz kommt stattdessen aus der Werteliste: Sie rückt eng zusammen und
   gibt ihren Dehnraum ab. Bei sechs Zeilen sind das gut 6 mm — genug für zwei
   Sätze, wenn diese kurz gehalten sind (siehe „Länge" in konzept.md). */
.kk[data-spiel="mutig"] .kk-kopf{padding-top:2mm; padding-bottom:1.2mm}
.kk[data-spiel="mutig"] .kk-werte{margin-top:.8mm; flex:0 0 auto}
.kk[data-spiel="mutig"] .kk-werte li{padding:.1mm 0}
.kk[data-spiel="mutig"] .kk-fuss{padding:1mm 0 1.8mm}
.kk[data-spiel="mutig"] .kk-lab{font-size:6.2pt}
.kk[data-spiel="mutig"] .kk-val{font-size:7.2pt}
.kk[data-spiel="mutig"] .kk-fuss{margin-top:auto}
.kk-staerke, .kk-schwaeche{
  flex:0 0 auto;
  margin:0 var(--k-rand); padding:.75mm 0 0;
  font-size:5.2pt; line-height:1.22; color:var(--tinte-leise);
  display:flex; gap:1.2mm; align-items:flex-start;
}
.kk-staerke{padding-top:1.2mm}
.kk-staerke .zeichen, .kk-schwaeche .zeichen{
  flex:0 0 auto; font-family:var(--eng); font-weight:600; font-size:7pt;
  line-height:1; width:2.4mm; text-align:center;
}
.kk-staerke .zeichen{color:var(--a-gruen)}
.kk-schwaeche .zeichen{color:var(--a-orange)}
.kk-staerke b, .kk-schwaeche b{color:var(--tinte); font-weight:600}

/* --- 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 ---------------------------------------------------------- */
/* Sie ist für alle Karten dieselbe und liegt beim Spielen oben — also das
   Bild, das man am häufigsten sieht. Deshalb trägt sie das Wappen und nicht
   nur Schrift. Dunkler Grund: Ein heller Rücken zeigt jeden Fingerabdruck
   und jede Schnittkante, ein dunkler trägt beides mit Würde. */
.kk-rueck{
  width:var(--k-breit); height:var(--k-hoch); border-radius:var(--rand);
  border:.25mm solid rgba(255,255,255,.10); overflow:hidden; position:relative;
  background:radial-gradient(120% 80% at 50% 34%, #1d3350 0%, #14202b 58%, #0d1620 100%);
  color:#eef3f7; display:grid; place-items:center; text-align:center;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
/* Ein feines Rautenmuster aus zwei gekreuzten Streifenscharen. Es ist einzeln
   nicht zu sehen und entscheidet trotzdem, ob die Fläche als Material gelesen
   wird oder als Loch — dieselbe These wie beim Korn auf der Webseite. */
.kk-rueck-muster{
  position:absolute; inset:0; opacity:.16;
  background:
    repeating-linear-gradient(45deg, transparent 0 2.6mm, var(--marke) 2.6mm 2.75mm),
    repeating-linear-gradient(-45deg, transparent 0 2.6mm, var(--marke) 2.6mm 2.75mm);
}
.kk-rueck-mitte{position:relative; z-index:1; padding:0 5mm}
.kk-wappen{width:26mm; height:auto; display:block; margin:0 auto 3.4mm}
.w-sonne{fill:var(--marke); opacity:.14}
.w-horizont{stroke:var(--marke); stroke-width:1.6; opacity:.5; fill:none; stroke-linecap:round}
.w-krone, .w-band, .w-perle{fill:var(--marke)}
/* Das Wegwappen des zweiten Quartetts: zwei Hügel in Markengrün, der Weg
   dazwischen im Grund ausgespart — dieselbe Machart wie bei der Krone. */
.w-huegel{fill:var(--marke)}
.w-hinten{fill:var(--marke); opacity:.42}
.w-weg{fill:#14202b}
.w-sonne-voll{fill:var(--marke); opacity:.85}
.w-stein{fill:#14202b}
.kk-rueck-titel{
  font-family:var(--sans); font-weight:700; font-size:13pt; line-height:1.02;
  letter-spacing:-.03em;
}
.kk-rueck-titel .amp{color:var(--marke)}
/* Drei Zeilen brauchen weniger Größe als zwei Wörter. */
.kk-rueck-titel.klein{font-size:11pt; line-height:1.12}
.kk-rueck-unter{
  margin-top:1.8mm; font-family:var(--eng); font-weight:600; font-size:5.6pt;
  letter-spacing:.28em; text-transform:uppercase; color:var(--marke);
}
.kk-rueck-fuss{
  position:absolute; bottom:4.6mm; left:0; right:0; z-index:1;
  font-family:var(--eng); font-size:5pt; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(238,243,247,.45);
}