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

   Diese Datei ist die EINZIGE Stelle, an der das Kartenlayout steht: Galerie
   (karten.html), A4-Bogen (drucken.html) und Druckerei-Seite (druckerei.html)
   laden alle dieselbe Datei. 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 hängen an
   der Bildschirmauflösung und würden im PDF wandern.

   Der Gedanke hinter der Karte (Plan: ../../gestaltung.md):
   Die Stationsnummer ist die Marke. Sie ist keine Zierziffer, sondern der Ort
   auf dem Weg — deshalb steht sie groß im Band, und darunter läuft der Weg
   selbst als feine Linie mit fünfzehn Marken quer über die Karte; die volle
   Marke sitzt auf dieser Station. Vorderseite, Rückseite, Reisepass und
   Rückenbild tragen dieselbe Linie: ein Satz, ein Spiel.

   Schmal (Barlow Condensed) steht alles, was Nummer, Marke oder Messwert ist.
   Breit (Barlow) steht alles, was jemand liest.

   Die Rubrikfarbe kommt zur Laufzeit aus fragen.json und wird als --rubrik
   auf die Karte gesetzt; im CSS steht keine einzige Rubrikfarbe.
   --------------------------------------------------------------------------- */

@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")}

.kk{
  /* Maße */
  --k-breit:63mm; --k-hoch:88mm; --k-rand:4.2mm; --k-beschnitt:3mm;
  --k-band:11mm; --k-linie:.22mm;

  /* Marke — dieselben Werte wie quiz.css, hier noch einmal, damit die Karte
     ohne die Bildschirmdatei auskommt (Druckerei-Seite lädt nur karte.css). */
  --papier:#ffffff; --papier-tief:#f7f5f0;
  --tinte:#14202b; --leise:#556878; --linie:#dee3e3;
  --marke:#B8CC3A; --marke-tief:#5a6918; --weg-linie:#c9d1d0;

  /* Buchstabenfarben der vier Antworten — fest, auf allen Geräten gleich */
  --a:#1f6b93; --b:#c0392b; --c:#8f6400; --d:#2e8b57;

  --sans:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --eng:"Barlow Condensed","Barlow",var(--sans);

  /* Rubrik: von karte.js gesetzt. Ohne Angabe die Tinte — nie eine Ersatzfarbe. */
  --rubrik:var(--tinte); --rubrik-schrift:#ffffff; --weg-pos:0;

  /* Typoskala. Sie ist nicht gewählt, sondern gemessen: die längste Frage im
     Satz (102 Zeichen, AUS-07) und die längste Antwort (60 Zeichen, ORT-07)
     müssen ohne Überlauf stehen. Fragen über 110 Zeichen bekommen von
     karte.js data-lang="1" und fallen eine Stufe. */
  --gr-frage:8.5pt; --gr-antwort:7.5pt;
}

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

.kk{
  /* Die Karte ist IMMER Papier, auch wenn die Seite drumherum dunkel ist:
     Sie zeigt ein Druckerzeugnis, und Papier wird nicht dunkel. */
  position:relative; box-sizing:border-box;
  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:var(--k-linie) solid var(--linie); border-radius:.8mm;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.kk *{box-sizing:border-box}
.kk[data-lang="1"]{--gr-frage:7.5pt; --gr-antwort:7pt}

/* Galerie und Druckbogen laden zusätzlich quiz.css, und dort heißen mehrere
   Bausteine des Bildschirms genauso wie hier: .band, .weg, .frage, .antworten,
   .antwort, .stufe. Deren Werte (Rahmen links am Band, Polster am Weg, Raster
   am Antwortknopf) haben auf der Karte nichts verloren. Die Karte verlässt sich
   deshalb nicht auf die Reihenfolge der Dateien, sondern setzt zuerst alles
   zurück, was sie danach selbst setzt. Wer eine Zeile hier löscht, sieht den
   Fehler nur in der Galerie — die Druckerei-Seite lädt quiz.css nicht. */
.kk .band, .kk .band .nr, .kk .weg, .kk .frage, .kk .antworten, .kk .antworten li,
.kk .stufe, .kk .stufe i, .kk.hinten .antwort, .kk.hinten .buchstabe, .kk .kartenfuss{
  margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none;
  min-height:0; max-width:none; width:auto; transition:none; color:inherit;
  text-transform:none; letter-spacing:normal; text-wrap:wrap; display:block;
  font:inherit; overflow:visible;
}

/* --- Das Band: Stationsnummer, Rubrik, Punkte ---------------------------- */

.kk .band{
  flex:0 0 auto; height:var(--k-band);
  background:var(--rubrik); color:var(--rubrik-schrift);
  display:flex; align-items:center; gap:2mm;
  padding:0 var(--k-rand);
}
.kk .band .nr{
  font-family:var(--eng); font-weight:600; font-size:15pt; line-height:1;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums;
  flex:0 0 auto; margin-top:-.3mm;
}
.kk .band .name{
  flex:1 1 auto; min-width:0;
  font-family:var(--eng); font-weight:600; font-size:6.6pt; line-height:1.05;
  letter-spacing:.15em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Die Punkte sind zugleich die Stufe und der Zug im „Wettlauf": ein Punkt,
   ein Schritt. Auf dem farbigen Band stehen sie weiß, nicht in den drei
   Stufenfarben vom Bildschirm — die kämen auf fünfzehn Untergründen
   fünfzehnmal anders heraus. */
.kk .stufe{flex:0 0 auto; display:flex; gap:.9mm; align-items:center}
.kk .stufe i{
  width:1.5mm; height:1.5mm; border-radius:50%;
  border:.25mm solid currentColor; background:transparent;
}
.kk .stufe i.voll{background:currentColor}

/* --- Der Weg: fünfzehn Marken, eine davon ist diese Karte ---------------- */

/* Die letzten 4 mm gehören dem Ziel; die fünfzehn Stationen teilen sich den
   Rest. Sonst läge die Station 15 auf dem grünen Punkt der Neuen Welt. */
.kk .weg{
  flex:0 0 auto; position:relative; height:3.4mm;
  margin:0 var(--k-rand);
  --weg-lauf:calc(100% - 4mm);
  /* Die Grundlinie: der Weg von der Schöpfung bis zur Neuen Welt. */
  background:linear-gradient(var(--weg-linie), var(--weg-linie)) 0 1.62mm / var(--weg-lauf) .16mm no-repeat;
}
/* Fünfzehn Striche — die fünfzehn Stationen, gleich weit auseinander. */
.kk .weg::before{
  content:""; position:absolute; left:0; right:4mm; top:1.05mm; height:1.3mm;
  background:repeating-linear-gradient(90deg, var(--weg-linie) 0 .22mm, transparent .22mm calc(100% / 15));
}
.kk .weg i{
  position:absolute; top:.5mm; width:2.4mm; height:2.4mm; border-radius:50%;
  background:var(--rubrik);
  left:calc(var(--weg-lauf) * var(--weg-pos) / 100); margin-left:-1.2mm;
}
/* Das Ziel steht als grüner Punkt am Ende der Linie — die Neue Welt. */
.kk .weg::after{
  content:""; position:absolute; right:0; top:.95mm;
  width:1.5mm; height:1.5mm; border-radius:50%; background:var(--marke);
}

/* --- Vorderseite: Frage und vier Antworten ------------------------------- */

.kk .frage{
  flex:0 0 auto; margin:2.4mm 0 0; padding:0 var(--k-rand);
  font-weight:700; font-size:var(--gr-frage); line-height:1.28;
  letter-spacing:-.005em; hyphens:auto;
}
.kk .antworten{
  flex:1 1 auto; list-style:none; margin:0; padding:1.8mm var(--k-rand) 0;
  display:flex; flex-direction:column; justify-content:space-evenly; gap:1.1mm;
}
.kk .antworten li{
  display:flex; align-items:flex-start; gap:1.6mm;
  font-size:var(--gr-antwort); line-height:1.24;
}
.kk .antworten li b{
  flex:0 0 auto; width:3.9mm; height:3.9mm; margin-top:.15mm;
  border-radius:.5mm; background:var(--wahl, var(--tinte)); color:var(--papier);
  font-family:var(--eng); font-weight:600; font-size:6.6pt; line-height:3.9mm;
  text-align:center; letter-spacing:0;
}
.kk .antworten li:nth-child(1){--wahl:var(--a)}
.kk .antworten li:nth-child(2){--wahl:var(--b)}
.kk .antworten li:nth-child(3){--wahl:var(--c)}
.kk .antworten li:nth-child(4){--wahl:var(--d)}

/* --- Der Fuß: dieselbe Zeile auf jeder Karte ----------------------------- */

.kk .kartenfuss{
  flex:0 0 auto; display:flex; justify-content:space-between; align-items:baseline;
  gap:2mm; margin:0 var(--k-rand); padding:1.3mm 0 2.2mm;
  border-top:.18mm solid var(--linie);
  font-family:var(--eng); font-weight:600; font-size:5pt; line-height:1;
  letter-spacing:.2em; text-transform:uppercase; color:var(--leise);
}
.kk .kartenfuss .id{color:var(--rubrik); font-variant-numeric:tabular-nums}

/* --- Rückseite: die Auflösung -------------------------------------------- */

/* Die Rückseite ist zweigeteilt: oben laut die Auflösung, unten leise der
   Beleg. Dazwischen steht Luft — sie gehört zum Aufbau, nicht zum Rest. Der
   Beleg wird über margin-top:auto nach unten gedrückt und wächst nach oben,
   wenn der Erklärsatz lang ist. */
/* Der freie Raum liegt nicht unter der Antwort, sondern um sie herum: die
   auto-Ränder der Auflösung teilen ihn gleichmäßig auf. Der Beleg bleibt
   dadurch unten am Rand — er schließt die Karte ab — und die Antwort steht
   mittig im weißen Feld statt oben zu kleben. */
.kk.hinten .loesung{
  flex:0 0 auto; margin:auto 0; display:flex; align-items:baseline; gap:2.2mm;
  padding:0 var(--k-rand); text-align:left;
}
.kk.hinten .buchstabe{
  flex:0 0 auto; width:9.5mm;
  font-family:var(--eng); font-weight:600; font-size:28pt; line-height:.86;
  color:var(--wahl, var(--tinte)); letter-spacing:-.02em;
}
.kk.hinten[data-buchstabe="A"]{--wahl:var(--a)}
.kk.hinten[data-buchstabe="B"]{--wahl:var(--b)}
.kk.hinten[data-buchstabe="C"]{--wahl:var(--c)}
.kk.hinten[data-buchstabe="D"]{--wahl:var(--d)}
/* „Gott" in derselben Größe wie ein 60-Zeichen-Satz sähe verloren aus. Die
   drei Stufen sind an den Daten gemessen: bis 18 Zeichen (rund die Hälfte
   aller Antworten) eine Zeile in 16 pt, bis 34 Zeichen 13 pt, darüber 11 pt —
   die längste Antwort im Satz hat 60 Zeichen. karte.js setzt data-antwort. */
.kk.hinten .antwort{
  flex:1 1 auto; min-width:0; text-align:left;
  font-weight:600; font-size:11pt; line-height:1.18; letter-spacing:-.01em;
}
.kk.hinten[data-antwort="mittel"] .antwort{font-size:13pt; line-height:1.15}
.kk.hinten[data-antwort="kurz"] .antwort{font-size:16pt; line-height:1.1}
/* Der Beleg ist ein eigenes Feld am Fuß der Karte: Bibelstelle und Erklärsatz
   liegen auf leicht getöntem Grund, damit im Streitfall sofort klar ist, wo
   die Antwort herkommt. Er wird nach unten gedrückt und wächst nach oben. */
.kk.hinten .beleg{
  flex:0 0 auto;
  background:var(--papier-tief); border-top:.18mm solid var(--linie);
  padding:2.6mm var(--k-rand) 0;
}
/* Die Bibelstelle ist die Schiedsstelle des Spiels — sie steht deshalb als
   eigene Zeile mit der Rubrikfarbe als Marke davor, nicht als Nachsatz. */
.kk.hinten .stelle{
  margin:0; padding-left:2mm;
  border-left:.9mm solid var(--rubrik);
  font-family:var(--eng); font-weight:600; font-size:8pt; line-height:1.15;
  letter-spacing:.06em; text-transform:uppercase;
}
.kk.hinten .erklaerung{
  margin:1.8mm 0 0; padding:0;
  font-size:7pt; line-height:1.38; color:var(--leise); hyphens:auto;
}
.kk.hinten .kartenfuss{
  margin:0; padding:2.2mm var(--k-rand); border-top:0;
  background:var(--papier-tief);
}
/* --- Der Reisepass ------------------------------------------------------- */

.kk.pass{--rubrik:var(--tinte)}
.kk.pass .band .name{letter-spacing:.24em}
.kk.pass .band .wortmarke{
  margin-left:auto;
  font-family:var(--eng); font-weight:600; font-size:6pt; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--marke);
}
.kk.pass .weg i{display:none}
.kk.pass .namenszeile{
  flex:0 0 auto; display:flex; align-items:baseline; gap:1.6mm;
  margin:1.6mm var(--k-rand) 0;
  font-family:var(--eng); font-weight:600; font-size:5.4pt;
  letter-spacing:.2em; text-transform:uppercase; color:var(--leise);
}
.kk.pass .namenszeile em{font-style:normal}
.kk.pass .namenszeile span{flex:1 1 auto; border-bottom:.25mm dotted var(--linie); height:3.4mm}

.kk.pass .felder{
  flex:0 0 auto; list-style:none; margin:2.4mm 0 0; padding:0 var(--k-rand);
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5mm .8mm;
}
.kk.pass .feld{
  display:flex; align-items:center; gap:1.1mm; min-width:0;
  --rubrik:var(--tinte);
}
/* Das Feld ist der Stempelplatz: ein leerer Kreis in der Rubrikfarbe mit der
   Stationsnummer. Wer die Station geschafft hat, hakt ihn ab. */
.kk.pass .feld em{
  flex:0 0 auto; width:5.6mm; height:5.6mm; border-radius:50%;
  border:.35mm solid var(--rubrik); color:var(--rubrik);
  font-family:var(--eng); font-weight:600; font-size:6.4pt; line-height:5mm;
  font-style:normal; text-align:center; font-variant-numeric:tabular-nums;
}
.kk.pass .feld span{
  font-family:var(--eng); font-weight:600; font-size:5.6pt; line-height:1.1;
  letter-spacing:.1em; text-transform:uppercase; color:var(--rubrik);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.kk.pass .schrittzaehler{
  flex:0 0 auto; margin:2.6mm var(--k-rand) 0;
}
.kk.pass .schrittzaehler h3{
  margin:0 0 1mm; font-family:var(--eng); font-weight:600; font-size:5.4pt;
  letter-spacing:.2em; text-transform:uppercase; color:var(--leise);
}
.kk.pass .schrittzaehler ol{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(15, 1fr); gap:.5mm;
}
.kk.pass .schrittzaehler li{
  height:3.4mm; border:.2mm solid var(--linie); border-radius:.4mm;
  font-family:var(--eng); font-weight:600; font-size:5pt; line-height:3mm;
  text-align:center; color:var(--leise); font-variant-numeric:tabular-nums;
}
/* Die sieben Rangschwellen sind im Zähler markiert — der Weg hat Stufen. */
.kk.pass .schrittzaehler li.schwelle{border-color:var(--marke-tief); color:var(--marke-tief); background:var(--papier-tief)}
.kk.pass .raenge{
  flex:1 1 auto; margin:1.6mm var(--k-rand) 0; padding:0;
  font-family:var(--eng); font-weight:600; font-size:5pt; line-height:1.5;
  letter-spacing:.04em; color:var(--leise);
}
.kk.pass .raenge .paar{white-space:nowrap}
.kk.pass .raenge b{color:var(--marke-tief); font-weight:600}

/* --- Die Regelkarten ----------------------------------------------------- */

.kk.regel{--rubrik:var(--tinte)}
.kk.regel .band .name{letter-spacing:.24em}
.kk.regel .band .blattnr{
  margin-left:auto;
  font-family:var(--eng); font-weight:600; font-size:6.4pt; line-height:1;
  letter-spacing:.1em; font-variant-numeric:tabular-nums;
}
.kk.regel .weg i{display:none}
.kk.regel .regeltitel{
  flex:0 0 auto; margin:2.6mm 0 0; padding:0 var(--k-rand);
  font-weight:700; font-size:10pt; line-height:1.15; letter-spacing:-.01em;
}
.kk.regel .regeltext{
  flex:1 1 auto; margin:2mm 0 0; padding:0 var(--k-rand);
  font-size:7pt; line-height:1.42; hyphens:auto;
}
.kk.regel[data-lang="1"] .regeltext{font-size:6.5pt; line-height:1.38}

/* --- Der gemeinsame Rücken (Pass und Regelkarten) ------------------------ */

.kk.ruecken{
  background:var(--tinte); color:var(--papier);
  align-items:center; justify-content:center; gap:2.6mm; padding:var(--k-rand);
  /* Das Muster ist der Weg selbst, fünfzehnmal wiederholt und sehr leise. */
  background-image:
    radial-gradient(circle at center, rgba(255,255,255,.07) .5mm, transparent .55mm);
  background-size:6mm 6mm;
}
.kk.ruecken .wort{
  font-family:var(--eng); font-weight:600; font-size:19pt; line-height:1;
  letter-spacing:.16em; text-transform:uppercase; text-align:center;
}
.kk.ruecken .strecke{
  display:flex; align-items:center; gap:.8mm; width:44mm;
}
.kk.ruecken .strecke i{flex:1 1 auto; height:1.6mm; border-radius:50%}
.kk.ruecken .strecke i.ziel{flex:0 0 auto; width:2.6mm; height:2.6mm; background:var(--marke)}
.kk.ruecken .unterzeile{
  font-family:var(--eng); font-weight:600; font-size:5.4pt; line-height:1;
  letter-spacing:.24em; text-transform:uppercase; opacity:.7; text-align:center;
}

/* --- Druck --------------------------------------------------------------- */

@media print{
  .kk{border:none; border-radius:0}
}