/* ══════════════════════════════════════════════════════════════════
   LEHRE — die Einführung vor dem allerersten Kampf

   Eine echte Schwarzblende: der Tisch verschwindet ganz, damit nichts
   davon ablenkt. Alles darin benutzt dieselben Werkstoffe wie das Spiel
   — Pergament, Tusche, Gold —, sodass die Einführung nicht wie ein
   fremdes Fenster wirkt, sondern wie eine erste Seite desselben Buchs.
   ══════════════════════════════════════════════════════════════════ */
.lehre{
  position:fixed;inset:0;z-index:900;
  display:grid;place-items:center;padding:20px;
  background:radial-gradient(70% 60% at 50% 42%,#1a140d 0%,#0a0705 70%,#000 100%);
  animation:lehreAuf .32s ease-out;
}
.lehre.weg{animation:lehreZu .26s ease-in forwards;}
@keyframes lehreAuf{from{opacity:0}}
@keyframes lehreZu{to{opacity:0}}

/* **Auf dem Rechner größer.** 560 Punkte waren für sieben schmale
   Tafeln gedacht; mit dreien, die je eine Sache groß zeigen, wirkte das
   Blatt verloren auf einem weiten Schirm. */
.lehre-blatt{
  position:relative;width:min(680px,100%);
  max-height:100%;overflow:auto;
  display:flex;flex-direction:column;gap:14px;
  padding:26px 26px 20px;border-radius:14px;
  border:3px solid var(--ink);
  background:linear-gradient(#f3e2b8,#dcc189);
  box-shadow:0 8px 0 var(--ink),0 26px 60px -14px #000;
  color:#2b1f0c;text-align:center;
}
/* ─── Schriftgrößen ───────────────────────────────────────────────
   **Auf dem Rechner ist Platz, also darf es groß sein.** 26 und 15
   Punkte waren für sieben schmale Tafeln gedacht; auf einem weiten
   Schirm sah die Einführung damit aus wie die Fassung fürs Telefon, nur
   mit Rand drumherum. Die kleineren Werte stehen weiter unten in der
   Regel für schmale Schirme. */
.lehre-blatt h2{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:34px;line-height:1.1;color:#43310f;
}
.lehre-blatt p{
  margin:0;font-size:19px;line-height:1.5;color:#3d2e18;
  /* **Feste Höhe für allen Text.** Ohne sie sprang das Blatt zwischen
     den Tafeln: „Mana wächst" hat zwei Zeilen, „Gewinnen" fünf. Fünf
     Zeilen Platz für alle — lieber etwas Luft als ein Fenster, das bei
     jedem Weiterklicken die Größe wechselt. */
  min-height:7.5em;
}
.lehre-blatt p b{color:var(--red-dk);}

/* Die Bühne der jeweiligen Tafel. Feste Höhe, damit der Kasten beim
   Blättern nicht springt — sonst wandert die Weiter-Taste unter dem
   Finger weg. */
/* **Mitwachsend, nicht fest.** 210 Punkte waren für die alten Tafeln
   gerechnet, die je eine Sache zeigten. Die zusammengefassten brauchen
   mehr: „Spielen und angreifen" stapelt zwei Felder, zwei Pfeile, die
   Hand und eine Beschriftung — nachgerechnet **252 Punkte**, also 42 zu
   viel. Genau die fielen unten heraus.

   Eine feste Höhe ist hier ohnehin die falsche Zusage: sie behauptet,
   jede Tafel zeige gleich viel. */
.lehre-buehne{
  position:relative;min-height:230px;height:230px;padding:8px 0;
  display:grid;place-items:center;
  border-radius:10px;
  background:radial-gradient(60% 70% at 50% 45%,rgba(90,66,32,.22),rgba(60,42,20,.1));
  box-shadow:0 0 0 1.5px rgba(67,49,15,.22) inset;
}

.lehre-fuss{display:flex;align-items:center;justify-content:space-between;gap:14px;}
/* Abstand 16 statt 7: die Klickflächen reichen 7 Punkte über den Punkt
   hinaus, sie brauchen also mindestens 14 dazwischen, um sich nicht zu
   überdecken. Gemessen, nicht geschätzt. */
.lehre-punkte{display:flex;gap:16px;align-items:center;}
/* Die Punkte sind Bedienelemente, keine Anzeige — das muss man ihnen
   ansehen und sie müssen groß genug für einen Finger sein. Deshalb
   sitzt der sichtbare Punkt in einer größeren, unsichtbaren Fläche:
   neun Punkte Durchmesser ließen sich am Handy nicht treffen. */
.lehre-punkte i{
  position:relative;width:10px;height:10px;border-radius:50%;cursor:pointer;
  z-index:1;
  background:rgba(67,49,15,.26);border:1.5px solid rgba(67,49,15,.45);
  transition:background .18s,transform .18s;
}
/* **Die Klickfläche darf den Nachbarn nicht überdecken.** Bei -11
   Punkten überlappten sich die Flächen zweier Punkte; der spätere liegt
   oben, also war der erste nicht mehr zu treffen. Jetzt reicht sie
   knapp bis zur Mitte des Abstands. */
.lehre-punkte i::after{content:"";position:absolute;inset:-7px;border-radius:50%;}
.lehre-punkte i:hover{background:rgba(67,49,15,.5);transform:scale(1.15);}
.lehre-punkte i:focus-visible{outline:2px solid var(--gold-dk);outline-offset:3px;}
.lehre-punkte i.an{background:var(--gold-dk);transform:scale(1.25);}

/* Weiter ist seit 383 eine Banderole wie alle Hauptknöpfe (Wunsch Max);
   Machart und Maß kommen aus css/ui.css (.knopf.banderole). */
.knopf.banderole.lehre-weiter{
  flex:none;width:auto;min-width:200px;--bandhoehe:54px;font-size:20px;
}
.knopf.banderole.lehre-weiter:hover{filter:brightness(1.06);transform:translateY(-1px);}
/* Kein eckiger Fokusrahmen um das Band; mit der Tastatur leuchtet es. */
.knopf.banderole.lehre-weiter:focus{outline:none;}
.knopf.banderole.lehre-weiter:focus-visible{filter:drop-shadow(0 0 6px var(--gold-hi));}
@media (max-width:560px){
  .knopf.banderole.lehre-weiter{min-width:150px;--bandhoehe:46px;font-size:17px;}
}

/* ─── Tafel 1: die Karte mit Zeigern ─────────────────────────────
   Die Karte steht mittig in der Bühne, die Zeiger sind ihre Geschwister
   und liegen absolut darüber. Damit sie **auf der Höhe der Zahl** enden,
   die sie benennen, rechnen sie aus dem Kartenmaß: `--kb`/`--kh` stehen
   an der Bühne und wandern mit, wenn die Karte auf flachen Schirmen
   kleiner wird.

   Wo die Zahlen sitzen, steht in css/ui.css: der Manastein misst 29 %
   der Kartenbreite bei Seitenverhältnis 40:44 und sitzt bei −5 %, seine
   Mitte liegt also bei 6,4 % der Kartenhöhe. Angriff und Leben sind
   25 % breit und stehen unten bündig — Mitte bei 90,2 %. Genau diese
   beiden Werte stehen unten; `translateY(-50%)` setzt die Zeile mit
   ihrer eigenen Mitte darauf. */
.lehre-buehne{--kb:118px;--kh:165px;}
.lehre-karte{
  position:relative !important;left:auto !important;top:auto !important;
  width:var(--kb);height:var(--kh);font-size:10.2px;
}
.lehre-zeiger{
  position:absolute;font-size:11.5px;font-family:var(--display);
  line-height:1;color:#43310f;white-space:nowrap;
  transform:translateY(-50%);
  animation:lehreZeigerAn .4s ease-out backwards;
}
.lehre-zeiger::after{
  content:"";position:absolute;top:50%;width:26px;height:2px;
  background:var(--ink);border-radius:2px;
}
/* Die Zeiger stehen links und rechts der Karte und weisen nach innen.
   Der Strich endet am Rand des jeweiligen Steins, nicht am Kartenrand —
   Mana ragt 5 %, Angriff und Leben ragen 3 % hinaus. */
.lehre-zeiger.kosten {
  right:calc(50% + var(--kb) * .55 + 30px);
  top:calc(50% - var(--kh) * .436);animation-delay:.05s;}
.lehre-zeiger.kosten::after  {right:-30px;}
.lehre-zeiger.angriff{
  right:calc(50% + var(--kb) * .53 + 30px);
  top:calc(50% + var(--kh) * .402);animation-delay:.25s;}
.lehre-zeiger.angriff::after {right:-30px;}
.lehre-zeiger.leben  {
  left:calc(50% + var(--kb) * .53 + 30px);
  top:calc(50% + var(--kh) * .402);animation-delay:.35s;}
.lehre-zeiger.leben::after   {left:-30px;}
/* `translate` statt `transform`: die Einblendung schiebt um sechs
   Punkte, ohne die Verschiebung um die eigene Mitte anzutasten —
   sonst spränge der Zeiger am Ende der Bewegung an seinen Platz,
   und im Raster der schmalen Geräte (`transform:none`) gleich zu
   Beginn. */
@keyframes lehreZeigerAn{from{opacity:0;translate:0 6px;}}

/* ─── Tafel 2: Mana ────────────────────────────────────────────── */
.lehre-mana{display:flex;gap:26px;}
.lehre-runde{display:flex;flex-direction:column;align-items:center;gap:9px;}
.lehre-runde b{font-family:var(--display);font-weight:400;font-size:13px;color:#43310f;}
.lehre-kugeln{display:flex;gap:5px;}
.lehre-kugeln i{
  width:17px;height:17px;border-radius:50%;
  border:2px solid var(--ink);background:#5a5348;
}
.lehre-kugeln i.voll{
  background:radial-gradient(circle at 34% 28%,#9fe0ff,#3fa9dd 52%,#1d5f88);
  box-shadow:0 0 7px rgba(63,169,221,.75);
}

@media (prefers-reduced-motion:reduce){
  .lehre,.lehre-zeiger{animation:none;}
}

/* ══════════════════════════════════════════════════════════════════
   Schmale Geräte

   Die Zeiger stehen seitlich neben der Karte und brauchen dafür Platz:
   132 Punkte Abstand von der Mitte plus die Breite des Wortes, also gut
   356 Punkte Innenbreite. Auf einem Telefon stehen nach Seitenrand und
   Innenabstand aber höchstens 322 zur Verfügung — auf **jedem**
   verbreiteten Gerät ragten sie hinaus.

   Statt sie zu verkleinern, bis niemand sie mehr liest, wechselt die
   Tafel unter 560 Punkten die Anordnung: die Karte rückt nach links,
   die drei Beschriftungen stehen rechts daneben untereinander, und
   jeder Strich zeigt waagerecht auf seine Zahl. Dieselbe Auskunft,
   nur anders gelegt.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:560px){
  .lehre{padding:12px;}
  .lehre-blatt{padding:18px 16px 14px;gap:11px;border-radius:12px;}
  .lehre-blatt h2{font-size:22px;}
  /* Schrift 14; Mindesthöhe und Bühnenhöhe setzt der Block „Auf dem
     Telefon" weiter unten — hier standen sie doppelt und wurden dort
     ohnehin überschrieben. */
  .lehre-blatt p{font-size:14px;}

  /* Karte nach links, Beschriftungen rechts daneben */
  .lehre-buehne:has(.lehre-karte){
    display:grid;grid-template-columns:auto 1fr;
    align-items:center;gap:0;padding:0 10px;
  }
  .lehre-buehne{--kb:102px;--kh:143px;}
  .lehre-karte{font-size:8.8px;justify-self:end;}

  .lehre-zeiger{
    position:static;grid-column:2;justify-self:start;
    margin-left:34px;font-size:12.5px;line-height:1;
    /* Im Raster trägt die Zeile sich selbst — die Mittelpunkt-
       Verschiebung der seitlichen Anordnung entfällt. */
    transform:none;
  }
  /* Die Striche liegen jetzt waagerecht und zeigen von der
     Beschriftung zurück zur Karte. */
  .lehre-zeiger::after{
    top:50%;left:-30px;right:auto;width:24px;transform:translateY(-50%);
  }
  /* Die drei Zeilen sitzen auf der Höhe dessen, was sie benennen:
     Mana oben links, Angriff und Leben unten. Ein Raster mit drei
     Reihen bringt sie in genau diese Ordnung. */
  .lehre-buehne:has(.lehre-karte){grid-template-rows:1fr 1fr 1fr;}
  .lehre-karte{grid-row:1 / span 3;}
  .lehre-zeiger.kosten {grid-row:1;align-self:start;margin-top:10px;}
  .lehre-zeiger.angriff{grid-row:2;align-self:center;}
  .lehre-zeiger.leben  {grid-row:3;align-self:end;margin-bottom:14px;}

  /* Mana-Tafel: enger, damit drei Runden nebeneinander passen */
  .lehre-mana{gap:14px;}
  .lehre-runde{gap:7px;}
  .lehre-kugeln{gap:4px;}
  .lehre-kugeln i{width:15px;height:15px;}

}

/* Sehr flache Fenster (Telefon quer): die Bühne schrumpft weiter,
   damit Text und Weiter-Taste sichtbar bleiben. */
@media (max-height:520px){
  .lehre-blatt{gap:8px;padding:12px 16px 10px;}
  .lehre-blatt h2{font-size:19px;}
  .lehre-blatt p{min-height:0;font-size:13px;}
  .lehre-buehne{--kb:86px;--kh:120px;}
  .lehre-karte{font-size:7.4px;}
}

/* ── Die drei Heldenfähigkeiten ───────────────────────────────────────
   Dieselben Scheiben wie im Spiel, nur nebeneinander: wer sie hier
   sieht, erkennt sie dort wieder. Die Fraktionsfarbe kommt aus dem
   Stilblatt des Spiels, damit es dieselbe bleibt. */
.lehre-kraefte{
  display:flex;gap:22px;justify-content:center;flex-wrap:wrap;
  max-width:100%;
}
.lehre-kraft{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  max-width:12ch;text-align:center;
}
.lehre-kraft .scheibe{
  position:relative;width:74px;height:74px;overflow:hidden;
  display:grid;place-items:center;border-radius:50%;
  border:3px solid var(--ink);
  background:radial-gradient(circle at 36% 30%,#3a2f22 0%,#241c14 70%);
  box-shadow:0 0 0 2.5px var(--tan),0 6px 12px -6px #000;
}
.lehre-kraft .scheibe[data-f="licht"]   {box-shadow:0 0 0 2.5px #d6b24a,0 6px 12px -6px #000;}
.lehre-kraft .scheibe[data-f="orden"]   {box-shadow:0 0 0 2.5px #4a84c8,0 6px 12px -6px #000;}
.lehre-kraft .scheibe[data-f="schatten"]{box-shadow:0 0 0 2.5px #8c56b0,0 6px 12px -6px #000;}
.lehre-kraft .scheibe img{width:48px;height:48px;object-fit:contain;}
.lehre-kraft b{font-family:var(--display);font-size:16px;padding-top:.15em;}
.lehre-kraft span{font-size:11px;color:#6b5423;line-height:1.45;}  /* dunkel: steht auf Pergament */

/* Dieselben drei Fassungen wie im Spiel: Symbol auf Dunkel, Symbol auf
   Hell, oder das Kartenbild rund beschnitten. */
.lehre-kraft .scheibe.hell{background:#fff;}
/* **Der Manastein steht jetzt im Namen, nicht auf der Scheibe.**

   Er ragte bewusst über den Rand, deshalb durfte die Scheibe nichts
   beschneiden — und ein Kartenbild, das den Rahmen genau ausfüllt, war
   damit stets einen Haaresbreite davon entfernt, darüber hinauszustehen.
   Zwei widersprüchliche Anforderungen an dasselbe Element.

   In der Einführung braucht es den Stein nicht: der Preis steht jetzt
   hinter dem Namen („Segen · 2"). Damit darf die Scheibe **beschneiden**,
   und das Bild kann gar nicht mehr herausragen — gleich, wie groß es
   gerechnet wird. */
.lehre-kraft .scheibe.bildhaft{background:#fff;}
/* **Mittig, nicht auf Kopfhöhe.** Hier stehen der Gardist und die
   Flamme, nicht ein Diener: ihr Motiv soll ganz in der Scheibe stehen
   und deren Mitte treffen.

   Die Karten sind 680 × 978; quadratisch beschnitten bleiben 298 Punkte
   Spielraum in der Höhe. Der Ausschnitt ist so gewählt, dass die Mitte
   des gezeichneten Motivs auf die Mitte der Scheibe fällt — beim
   Gardisten liegt sie bei 40, bei der Flamme bei 38 Prozent der
   Kartenhöhe, daraus 17 und 11 Prozent Versatz. `transform-origin`
   steht mittig, damit die leichte Vergrößerung nichts verschiebt. */
.lehre-kraft .scheibe.bildhaft img{
  /* **An den Kreis gebunden** (379): als Rasterkind maß `height:100%`
     nicht die Scheibe, das Bild behielt sein Kartenmaß — `cover` hatte
     nichts zu schneiden, und die ganze Karte samt Rahmen lag im Kreis,
     das Motiv daneben. `inset:0` nagelt das Bild an die Scheibe; erst
     damit greifen `cover` und die gemessene Lage. */
  position:absolute;inset:0;width:100%;height:100%;border-radius:50%;
  object-fit:cover;object-position:50% 14%;
  /* Wie auf dem Spielfeld: etwas näher heran, die Scheibe schneidet. */
  transform:scale(1.12);transform-origin:50% 50%;
}
/* **Gemessen, nicht geschätzt** (379, Befund Max: die Motive saßen
   schief im Kreis). Die Karten sind 680 × 978, der Kreis schneidet ein
   680er-Quadrat, bleiben 298 Punkte Spiel in der Höhe; Lage =
   (Motivmitte − 340) / 298. Gardist: Mitte bei 36 % der Kartenhöhe
   (355) → 5 %. Flamme: Mitte bei 47 % (459) → 40 %. */
/* 383 (Befund Max: der Gardist saß zu tief): wie beim Diener auf dem
   Feld (css/tisch.css, 50 % 30 %), damit Kopf und Brust mittig stehen. */
.lehre-kraft .scheibe.bildhaft[data-f="orden"]    img{object-position:50% 30%;}
.lehre-kraft .scheibe.bildhaft[data-f="schatten"] img{object-position:50% 40%;}

/* ── Überspringen ─────────────────────────────────────────────────────
   Ein Nebenweg: erreichbar, aber ohne mit „Weiter" um Aufmerksamkeit zu
   ringen. Ohne Fläche, nur Text mit Unterstrich, wie die Nebenverweise
   im Hauptmenü. Zurück gibt es seit 383 nicht mehr: dafür die Punkte. */
.lehre-wege{display:flex;align-items:center;gap:12px;}
.lehre-neben{
  background:none;border:0;padding:6px 4px;cursor:pointer;
  font:inherit;font-size:13px;color:#6b5423;
  text-decoration:underline;text-underline-offset:.22em;
  border-radius:5px;
}
.lehre-neben:hover{color:#3a2a08;}
.lehre-neben:focus-visible{outline:2px solid var(--gold-dk);outline-offset:2px;}
.lehre-neben:disabled{opacity:.32;cursor:default;text-decoration:none;}
.lehre-neben[hidden]{display:none;}
@media (max-width:520px){
  .lehre-wege{gap:8px;}
  .lehre-neben{font-size:12px;}
}

/* ── Lesbarkeit auf dem Pergament ─────────────────────────────────────
   Das Blatt hat einen sehr hellen Grund (#f3e2b8 bis #dcc189). Mehrere
   Stellen benutzten aber Farben aus dem Spiel, die für **dunklen** Grund
   gemacht sind: `--parch-hi` ist beinahe Weiß, `--tan` ein helles Braun,
   `--gold-hi` ein helles Gold. Auf Pergament verschwinden sie.

   Hier stehen die dunklen Entsprechungen — dieselbe Familie, nur so weit
   abgedunkelt, dass sie sich klar abheben. */
/* ── Auf dem Telefon ──────────────────────────────────────────────────
   Die Tafel mit den drei Fähigkeiten zeigt am meisten auf einmal; bei
   190 Punkten Bühnenhöhe lief das über den Rand.

   Statt fester Höhen wächst die Bühne hier mit dem Inhalt, und die
   Stücke darin werden kleiner. Der Text bekommt keine Mindesthöhe mehr —
   die war für vier Tafeln gedacht, die alle gleich viel sagten. */
@media (max-width:560px){
  .lehre-blatt{width:100%;max-height:calc(100dvh - 24px);}
  .lehre-blatt p{min-height:0;}
  .lehre-buehne{min-height:150px;height:150px;}
  .lehre-kraefte{gap:14px;}
  .lehre-kraft{max-width:9ch;}
  .lehre-kraft .scheibe{width:56px;height:56px;}
  .lehre-kraft .scheibe img{width:36px;height:36px;}
  .lehre-kraft b{font-size:12px;}
  .lehre-fuss{gap:10px;flex-wrap:wrap;}
}
/* Liegendes Telefon: wenig Höhe, viel Breite. */
@media (max-height:520px){
  .lehre-buehne{min-height:150px;height:150px;}
  .lehre-kraft .scheibe{width:48px;height:48px;}
}

/* ── Tafel 4: Gewinnen ────────────────────────────────────────────────
   Zwei Herzen mit 30, dasselbe Herz wie am Bildnis im Kampf. */
.lehre-ziel{display:flex;align-items:center;gap:26px;}
.lehre-held{display:flex;flex-direction:column;align-items:center;gap:8px;}
.lehre-held b{font-family:var(--display);font-size:16px;color:#3a2a08;}
.lehre-herz{position:relative;width:72px;height:80px;display:grid;place-items:center;}
.lehre-herz svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  stroke:var(--ink);stroke-width:3.6;stroke-linejoin:round;fill:url(#blutVerlauf);}
.lehre-herz span{position:relative;font-family:var(--display);font-size:34px;line-height:1;
  padding-top:.12em;color:#fff;
  text-shadow:-2px 0 0 var(--ink),2px 0 0 var(--ink),0 -2px 0 var(--ink),0 2px 0 var(--ink),
              0 3px 0 rgba(0,0,0,.6);}
.lehre-gegen{font-style:normal;font-size:13px;color:#6b5423;}
@media (max-width:560px){
  .lehre-ziel{gap:16px;}
  .lehre-herz{width:54px;height:60px;}
  .lehre-herz span{font-size:26px;}
}