/* ══════════════════════════════════════════════════════════════════
   landkarte.css — die Landkarte des Feldzugs (kampagne.html).

   Pfade hier sind relativ zum Stilblatt: `../assets/…`.
   ══════════════════════════════════════════════════════════════════ */
/* Eigene Bühnenmaße nach dem Seitenverhältnis der Landkarte
   (1462 : 1076), damit nichts abgeschnitten wird. */
/* Die Bühnenhöhe folgt dem Seitenverhältnis der jeweiligen Karte —
   jedes Land bringt seine eigene mit. */
.buehne.karte{width:1000px;height:var(--kh,736px);}
.land{position:absolute;inset:0;border-radius:16px;overflow:hidden;}
.land img{width:100%;height:100%;object-fit:cover;display:block;}
.land::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 45%,transparent 40%,rgba(20,14,8,.5));}

/* Wegpunkte: die Route zwischen den Orten, als Tupfenspur.

   Sie liegen unter den Marken (z-index 4 gegen 5) und sind **weiß und
   deckend**: die Spur läuft über gemalte Landschaft — Wiese, Wald,
   Lava, Verderbnis —, und ein gebrochener Pergamentton ging auf dem
   hellen Grasgrün von Pandoria und im Violett der unheiligen Länder
   gleichermaßen unter. Weiß kommt in keinem der drei Kartenbilder
   flächig vor und hebt sich deshalb überall ab; der dunkle Ring hält
   es auch über Schnee und Wolken zusammen. */
.wegpunkt{
  position:absolute;transform:translate(-50%,-50%);z-index:4;
  width:7px;height:7px;border-radius:50%;pointer-events:none;
  background:#fff;
  box-shadow:0 0 0 1.5px rgba(20,14,8,.75),0 1px 3px rgba(0,0,0,.55);
  animation:wegpunktAn .3s ease-out backwards;
}
@keyframes wegpunktAn{from{opacity:0;transform:translate(-50%,-50%) scale(.3)}}
/* Der Abschnitt, der gerade zurückgelegt wurde: jeder Tupfen setzt
   sich einzeln, golden und mit einem kurzen Aufleuchten. Danach fällt
   er auf das ruhige Weiß der übrigen zurück — das Gold sagt „diesen
   Schritt gerade eben" und soll nicht auf der Karte stehen bleiben. */
.wegpunkt.laeuft{
  animation:wegpunktTritt .5s cubic-bezier(.2,.9,.3,1.5) backwards;
}
@keyframes wegpunktTritt{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.2);}
  45% {opacity:1;transform:translate(-50%,-50%) scale(1.9);
       background:radial-gradient(circle at 36% 32%,#fff5cf,var(--gold-hi) 60%,var(--gold-dk));
       box-shadow:0 0 0 1.5px rgba(20,14,8,.55),0 0 12px -1px var(--gold-hi);}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1);}
}
@media (prefers-reduced-motion:reduce){
  .wegpunkt,.wegpunkt.laeuft{animation:none;}
  .marke{animation:none !important;}
}

/* Ortsmarken. Sichtbar ist nur, was man schon erreicht hat — wohin es
   danach geht, zeigt sich erst nach dem Sieg. */
.marke{position:absolute;transform:translate(-50%,-50%);z-index:5;
  background:none;border:0;padding:0;cursor:default;
  animation:markeAn .35s cubic-bezier(.2,.9,.3,1.4);}
@keyframes markeAn{from{opacity:0;transform:translate(-50%,-50%) scale(.4)}}
.marke .scheibe{
  /* 38 -> 48 Punkte, ein Viertel größer. Das Bild des Anführers ist
     das, woran man den Ort wiedererkennt; bei 38 war davon kaum mehr
     als eine Farbe zu sehen. */
  /* Auf dem Telefon (`--s` um 0,4) hält die untere Schranke die Marke
     auf Fingergröße, ohne dass sie ein Sechstel der Karte deckt. */
  position:relative;border-radius:50%;overflow:hidden;
  width:max(54px,calc(30px / var(--s,1)));
  height:max(54px,calc(30px / var(--s,1)));
  border:3px solid var(--ink);background:#fff;
  box-shadow:0 0 0 2px #3f7a43,0 4px 8px -3px #000;
}
/* **1,94 — fast das Doppelte.** Die Scheibe misst nur 54 Punkte; ohne
   kräftige Vergrößerung stand der Diener halb darin und das Gesicht war
   kaum mehr als ein Fleck.

   **Der Ausschnitt gehört zur Vergrößerung.** `transform` skaliert um
   den Mittelpunkt der Scheibe; was nahe am oberen Rand liegt, wandert
   dabei hinaus. Je stärker die Vergrößerung, desto weniger darf oben
   weggeschnitten werden — bei 1,94 halten 4 Prozent auch die Gehörnten
   und Behelmten im Bild: Höllenfürst, Schnitter, Oger. Viel weiter
   geht es nicht: die Kartenbilder sind für die Hand gezeichnet, nicht
   für ein Medaillon, und darüber werden die Konturen weich. */
/* ─── Wie hoch das Bild in der Scheibe sitzt ──────────────────────
   `--hoch` verschiebt es nach oben, in Anteilen der Scheibenhöhe; ein
   negativer Wert setzt es tiefer. `--quer` tut dasselbe waagerecht:
   positiv nach rechts, negativ nach links — für Motive, die in ihrer
   Karte nicht mittig stehen. Die Reihenfolge im `transform` ist
   entscheidend: `scale` steht **rechts** und wirkt zuerst, `translateY`
   danach — dadurch bezieht sich das Prozent auf die Scheibe selbst und
   nicht auf das vergrößerte Bild.

   Die Vorgabe gilt für die Porträts. Einzelne Karten sitzen von sich
   aus richtig und tragen ihr eigenes `hoch` in js/kampagne.js. */
.marke .scheibe img{width:100%;height:100%;object-fit:cover;
  object-position:50% 4%;
  transform:translate(var(--quer,0%),calc(-1 * var(--hoch,30%))) scale(1.94);
  display:block;}
/* **Was kein Gesicht hat, wird nicht herangeholt.** Greifennest,
   Portal, Relikttafel und Beutel füllen die ganze Bildbreite; dort gibt
   es nichts zu vergrößern, und jeder weitere Schritt schnitte nur die
   Ränder ab. Sie stehen mittig statt auf Kopfhöhe und bleiben bei 1,17.
   `durchgang` ist die letzte Station eines durchgespielten Landes, die
   das Portalbild trägt — derselbe Fall. */
.marke.weit .scheibe img,.marke.durchgang .scheibe img{
  transform:translate(var(--quer,0%),calc(-1 * var(--hoch,0%))) scale(1.17);
  object-position:50% 50%;}

/* Ein Durchgang statt eines Gegners: die letzte Station eines
   durchgespielten Landes führt weiter. Ein leichter Schimmer sagt, dass
   dort etwas offen steht. */
.marke.durchgang .scheibe{
  border-color:#c9a24a;
  box-shadow:0 0 0 3px rgba(201,162,74,.45),0 6px 14px -6px #000;
  animation:durchgangAtmet 2.8s ease-in-out infinite;
}
@keyframes durchgangAtmet{
  0%,100%{box-shadow:0 0 0 3px rgba(201,162,74,.4),0 6px 14px -6px #000;}
  50%    {box-shadow:0 0 0 6px rgba(201,162,74,.18),0 6px 14px -6px #000;}
}
@media (prefers-reduced-motion: reduce){
  .marke.durchgang .scheibe{animation:none;}
}
/* **Wie weit das Motiv im Bild oben sitzt, ist je Karte verschieden.**
   Ein fester Wert für alle traf keines richtig: das Greifennest saß am
   oberen Rand mit Luft darunter, das Portal ebenso, nur weniger.

   `--oy` gibt die Lage je Marke an; die Zahl steht bei ihrem Fundort
   in js/kampagne.js. Nachgesehen, nicht geschätzt: beide Bilder in
   vier Lagen nebeneinandergelegt und die mittigste genommen. */
.marke.weit .scheibe img{object-position:50% var(--oy, 50%);}
/* Ein verstecktes Feld: **unsichtbar und ohne jeden Hinweis**. Kein
   Rahmen, kein Zeigerwechsel, kein Titel — ein Osterei mit Wegweiser
   wäre eine Aufgabe. Die Fläche ist groß genug zum Treffen, aber sie
   verrät sich nicht. */
.suchfeld{
  position:absolute;transform:translate(-50%,-50%);
  width:calc(74px / var(--s,1));height:calc(74px / var(--s,1));
  background:none;border:0;padding:0;cursor:default;
  -webkit-tap-highlight-color:transparent;
}
.suchfeld:focus{outline:none;}
/* Der Stern sitzt in einem eigenen Kind: die Klickfläche selbst darf
   sich nicht bewegen, sonst wandert das Ziel unter dem Finger weg. */
.suchfeld .funke{
  position:absolute;left:50%;top:50%;width:0;height:0;
  animation:aufblitzen 2.7s linear infinite;
}
/* ─── Das Funkeln ─────────────────────────────────────────────────
   **Es wächst mit dem Weg.** `--fg` geht von 0 bis 1: frisch
   freigeschaltet ist es ein Lichtpunkt von drei Bildpunkten, am Ende
   des Landes ein Stern mit vier Spitzen, der sich beim Aufgehen
   langsam dreht.

   Der Gedanke dahinter: ein Hinweis, der von Anfang an laut ist, nimmt
   den Fund weg — einer, der nie lauter wird, macht ihn unfindbar. Also
   wird er in dem Maß deutlicher, in dem man das Land hinter sich
   bringt.

   Drei Größen hängen an `--fg`: die Länge der Strahlen (18 → 44), ihre
   Helligkeit (0,55 → 0,95) und die Dauer des Aufblitzens. Der Kern
   bleibt klein — er ist der Punkt, der gemeint ist. */
.suchfeld .funke::before,.suchfeld .funke::after{
  content:"";position:absolute;left:50%;top:50%;
  background:#fffdf4;
}
/* Der Kern — klein und rund, wächst nur wenig mit. */
.suchfeld .funke::before{
  --k:calc((5px + 3px * var(--fg,0)) / var(--s,1));
  width:var(--k);height:var(--k);
  margin:calc(var(--k) / -2) 0 0 calc(var(--k) / -2);
  border-radius:50%;
}
/* Die Strahlen: vier Spitzen aus zwei gekreuzten Haarlinien, zu den
   Enden auslaufend. Mit `--fg` werden sie länger und heller. */
.suchfeld .funke::after{
  --l:calc((34px + 22px * var(--fg,0)) / var(--s,1));
  --h:calc(.85 + .13 * var(--fg,0));
  /* Die Linien werden mit der Karte mitskaliert, bleiben aber
     mindestens einen ganzen Bildpunkt dick — eine halbe Linie
     verschluckt der Bildschirm. */
  --d:max(1px, calc(1.4px / var(--s,1)));
  width:var(--l);height:var(--l);
  margin:calc(var(--l) / -2) 0 0 calc(var(--l) / -2);
  background:
    linear-gradient(90deg,
      rgba(255,253,244,0) 0%,rgba(255,253,244,var(--h)) 50%,rgba(255,253,244,0) 100%)
      center / 100% var(--d) no-repeat,
    linear-gradient(180deg,
      rgba(255,253,244,0) 0%,rgba(255,253,244,var(--h)) 50%,rgba(255,253,244,0) 100%)
      center / var(--d) 100% no-repeat;
}
@keyframes aufblitzen{
  /* 2,7 Sekunden gesamt, sichtbar von 74 bis 100 Prozent — das sind
     **0,7 Sekunden, also gut ein Viertel der Zeit**.

     Der Weg dahin ging über 9,4 und 5,3 Sekunden; beide Male sah man
     es nicht. Ein Hinweis, den man nur findet, wenn man ohnehin
     hinschaut, ist keiner. */
  0%,74%{opacity:0;transform:translate(-50%,-50%) scale(.2);}
  80%   {opacity:1;transform:translate(-50%,-50%) scale(1);}
  86%   {opacity:.12;transform:translate(-50%,-50%) scale(.6);}
  92%   {opacity:.65;transform:translate(-50%,-50%) scale(.88);}
  100%  {opacity:0;transform:translate(-50%,-50%) scale(.45);}
}
/* Voll aufgedreht: das Aufblitzen dauert länger, geht weiter auf und
   **dreht sich** dabei. Eine Achtelumdrehung genügt — eine ganze sähe
   nach Mühlrad aus, ein Achtel nach einem Lichtreflex, der wandert. */
.suchfeld .funke.voll{animation-name:aufblitzenVoll;}
@keyframes aufblitzenVoll{
  0%,66%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0deg);}
  73%   {opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(12deg);}
  80%   {opacity:.2;transform:translate(-50%,-50%) scale(.8) rotate(22deg);}
  88%   {opacity:.95;transform:translate(-50%,-50%) scale(1.1) rotate(32deg);}
  95%   {opacity:.35;transform:translate(-50%,-50%) scale(.9) rotate(40deg);}
  100%  {opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(45deg);}
}
@media (prefers-reduced-motion: reduce){
  .suchfeld .funke{animation:none;opacity:0;}
}
/* ─── Das blasse „!“ (380) ─────────────────────────────────────────
   Im Betatest fanden nur drei von zehn die Funde: das Funkeln blitzt,
   und wer gerade nicht hinsieht — oder auf dem Telefon nicht drüberfährt
   —, sieht nichts. Darum steht jetzt **dauerhaft** ein Ausrufezeichen
   über dem Lichtpunkt: in der Schrift des Spiels, gelb, sehr blass,
   halb durchsichtig. Es ruft nicht, es wartet. Die Größe hält sich auf
   dem Schirm gleich (`/ var(--s)`), damit es auch klein zu sehen ist. */
.suchfeld::after{
  content:"!";position:absolute;left:50%;bottom:calc(50% + 6px / var(--s,1));
  transform:translateX(-50%);pointer-events:none;
  font-family:var(--display);font-size:calc(24px / var(--s,1));line-height:1;
  color:rgba(255,226,120,.42);
  text-shadow:0 0 calc(3px / var(--s,1)) rgba(40,26,8,.35);
  animation:ausrufAtmet 4.2s ease-in-out infinite;
}
@keyframes ausrufAtmet{0%,100%{opacity:.75;}50%{opacity:1;}}
@media (prefers-reduced-motion: reduce){ .suchfeld::after{animation:none;} }
/* Gefundene Orte sitzen etwas kleiner auf der Karte: sie gehören nicht
   zum Weg, sondern sind Beiwerk. */
/* Versteckte Orte sind **so groß wie alle anderen**. Sie kleiner zu
   zeichnen war der Gedanke „Beiwerk"; auf der Karte sah es aber nach
   einem Fehler aus. Wer einen findet, hat einen richtigen Gegner vor
   sich. */

.marke .haken{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(43,87,48,.72);color:#eafbe8;
  font-family:var(--display);font-size:max(23px,calc(18px / var(--s,1)));padding-top:.1em;}
/* ─── Bezwungen ──────────────────────────────────────────────────────
   Ein gefallener Gegner behält keinen Platz auf der Karte: aus der
   Scheibe wird ein grüner Punkt mit weißem Haken, kaum größer als ein
   Wegpunkt. Vierzehn Porträts nebeneinander sagten nichts darüber, wo
   man gerade steht, und verdeckten die Landschaft, auf der sie liegen.
   Der Punkt sagt „erledigt" und gibt sie wieder frei.

   Das Bild bleibt im Markup (`display:none`) — der Haken liegt darüber
   wie bisher, nur ohne grünen Schleier, weil der Punkt selbst schon
   grün ist. `title` und `alt` nennen den Gegner weiterhin. */
.marke.bezwungen .scheibe{
  width:max(22px,calc(13px / var(--s,1)));
  height:max(22px,calc(13px / var(--s,1)));
  border:calc(2px / var(--s,1)) solid var(--ink);
  background:#3f7a43;
  box-shadow:0 0 0 calc(1.5px / var(--s,1)) rgba(20,14,8,.75),
             0 calc(2px / var(--s,1)) calc(4px / var(--s,1)) rgba(0,0,0,.5);
}
.marke.bezwungen .scheibe img{display:none;}
.marke.bezwungen .haken{
  background:none;color:#fff;
  font-size:max(15px,calc(9px / var(--s,1)));
  padding-top:0;line-height:1;
}

.marke.hier{z-index:6;}
.marke.hier .scheibe{
  width:max(78px,calc(44px / var(--s,1)));
  height:max(78px,calc(44px / var(--s,1)));
  box-shadow:0 0 0 3px var(--gold-hi),0 0 22px -1px var(--gold),0 5px 10px -4px #000;
  animation:pochen 1.4s infinite;cursor:pointer;
}
/* **Fundorte haben alle dasselbe Maß.** Die Bildtafel pocht nicht — sie
   ist kein Kampf —, war dadurch aber die einzige kleine Scheibe neben
   Portal und Beutel und sah aus wie ein Rest. Größe und Betonung sind
   deshalb getrennt: das Maß gilt für jeden Fundort, der Goldrand und das
   Pochen weiterhin nur für `hier`. */
.marke.geheim:not(.bezwungen) .scheibe{
  width:max(78px,calc(44px / var(--s,1)));
  height:max(78px,calc(44px / var(--s,1)));
}
.marke.hier::after{
  content:attr(data-name);position:absolute;left:50%;top:calc(100% + 6px);
  transform:translateX(-50%);white-space:nowrap;
  /* Von 14 auf 17 Punkte. Die Namen stehen auf einer gemalten
     Landschaft und müssen sich gegen sie behaupten — auf dem Telefon
     ist die Karte zudem stark verkleinert. */
  font-family:var(--display);font-size:17px;padding-top:.3em;
  color:var(--parch-hi);text-shadow:0 2px 3px #000,0 0 6px #000;
}
/* **Tief liegende Marken beschriften sich nach oben.** Quelldorf sitzt
   bei y=0,92 am Flussufer — dort fiel der Name aus dem Bild. Die Marke
   zu verschieben hätte den Tiefenwächter vom Wasser weggeholt, und das
   war ja der Grund für die Stelle. Also klappt der Name um. */
.marke.hier.tief::after{
  top:auto;bottom:calc(100% + 6px);padding-top:0;padding-bottom:.3em;
}

/* Unten rechts, wo im Hauptmenü auch die Wege hinausführen. Die Größe
   hängt am Maßstab, damit der Knopf auf dem Telefon nicht mitwächst. */
/* ══════════════════════════════════════════════════════════════════
   Die Bedienung liegt ÜBER der Karte

   Blätterpfeile, Weg hinaus und Windrose sind **Menüpunkte**, keine
   Bestandteile der Landschaft. Nichts, was die Karte mit sich macht,
   darf sie erreichen: kein Hitzeflimmern, kein Glutschleier, keine
   Verderbnisfarbe.

   Im Aufbau ist das schon so — die drei hängen an der Bühne, nicht an
   der Tischplatte, und die Effekte liegen samt Leinwand **in** der
   Tischplatte. Hier steht es zusätzlich ausdrücklich da:

     `isolation:isolate` auf der Tischplatte schließt jeden Mischmodus
     darin ein. `.land .hitze` mischt mit `screen`; ohne Riegel wäre die
     Mischgruppe die Bühne, und dann hinge es von der Zeichenreihenfolge
     ab, was mitgemischt wird. Mit Riegel kann es die Platte nicht
     verlassen.

     Die Zahlen sind weit auseinandergezogen (30, 31, 32 gegen die 4 bis
     6 auf der Karte). Eine 6 neben einer 6 entscheidet die
     Dokumentreihenfolge — und die ist zu leicht aus Versehen zu
     ändern.

   `filter:none` steht bewusst da: es ist die Stelle, an der jemand
   sonst eines Tages einen Filter erbt, den er nicht bestellt hat. */
.buehne.karte .tisch{isolation:isolate;}
.blaetterleiste,a.knopf.heimweg,.adminweg.atmoweg,.atmofeld{filter:none;}

/* ─── Der Weg hinaus ──────────────────────────────────────────────
   Dieselbe Banderole wie die Wege im Hauptmenü (css/ui.css). Dort
   führen Bänder hinein, hier führt eines hinaus — ein anderer Knopf
   für dieselbe Art von Weg wäre eine zweite Sprache.

   Die Höhe hängt am Maßstab, damit das Band auf jedem Gerät gleich
   groß ankommt; alles andere (Endstücke, Körpermitte) rechnet der
   Bandknopf daraus selbst. */
a.knopf.heimweg{
  /* `left`/`top` ausdrücklich zurücksetzen: der Knopf hängt in der
     Bühne, und was dort sonst noch an Lageregeln greift, soll ihn
     nicht überbestimmen. Ein überbestimmter Kasten zieht in dieser
     Leserichtung nach links — der Knopf landete schon einmal mitten
     auf der Karte. */
  position:absolute;left:auto;top:auto;
  right:calc(16px / var(--s,1));
  bottom:calc(14px / var(--s,1));z-index:30;
  --bandhoehe:calc(48px / var(--s,1));
  width:calc(168px / var(--s,1));
  font-size:calc(16px / var(--s,1));
}

/* Die Blätterleiste unten links — dieselbe Machart wie die
   Speicherleiste gegenüber: schlichter Text, der da ist, wenn man ihn
   sucht, und sonst nicht stört. Die Größe hängt am Maßstab, damit sie
   überall gleich groß ankommt. */
/* ─── Die Blätterseiten ───────────────────────────────────────────
   Man blättert durch Landkarten, also sollen es **Seiten** sein und
   keine Textlinks. Zwei gemalte Pfeile, links und rechts.

   Sie sind **Bilder**, keine gezeichneten Winkel. Eine CSS-Ecke in
   einer Lederscheibe war der Versuch, mit Formularmitteln etwas
   Handgemachtes nachzubauen; die Tuschedreiecke gehören derselben
   Feder wie die Karten, auf denen sie liegen. Die schwarze Kontur
   trägt dabei die Arbeit: sie hebt den Pfeil gegen Gras, Lava und
   Wasser gleichermaßen ab, und es braucht keine Scheibe mehr darunter.

   Ein dritter Pfeil („zurück zu deinem Stand") ist entfallen: beim
   Blättern gibt es nur vor und zurück, und ein drittes Zeichen
   verlangte eine Erklärung, die kein Knopf geben kann.

   Der Kasten ist quadratisch und größer als das Dreieck darin — so
   bleibt die Fläche zum Antippen fingergerecht, auch wenn der Pfeil
   selbst schmal ist. */
.blaetterleiste{
  position:absolute;left:calc(16px / var(--s,1));
  bottom:calc(14px / var(--s,1));z-index:30;
  display:flex;align-items:center;gap:calc(12px / var(--s,1));
}
.blaetterleiste button{
  --d:calc(64px / var(--s,1));
  width:var(--d);height:var(--d);padding:0;cursor:pointer;
  display:grid;place-items:center;
  background:none;border:0;border-radius:0;box-shadow:none;
  transition:transform .16s ease, filter .16s ease;
}
.blaetterleiste button img{
  width:100%;height:100%;object-fit:contain;display:block;
  /* Ein weicher Schatten löst den Pfeil vom Untergrund, ohne ihn zu
     umranden — die Tuschekante besorgt das Umranden schon. */
  filter:drop-shadow(0 calc(2px / var(--s,1)) calc(4px / var(--s,1)) rgba(0,0,0,.55));
}
.blaetterleiste button:hover{transform:translateY(calc(-2px / var(--s,1))) scale(1.05);}
.blaetterleiste button:hover img{
  filter:drop-shadow(0 calc(3px / var(--s,1)) calc(7px / var(--s,1)) rgba(0,0,0,.6))
         brightness(1.08);
}
.blaetterleiste button:active{transform:translateY(0) scale(.94);}
/* Ausgegraut: der Pfeil behält Platz, Form und Größe — nur Farbe und
   Deckkraft fallen zurück. Dass er stehen bleibt, ist der Zweck: die
   Leiste soll nicht wandern, bloß weil es in eine Richtung gerade
   nicht weitergeht. Hover und Klick werden ausdrücklich mit abgeräumt
   — CSS wendet `:hover` auch auf abgeschaltete Knöpfe an. */
.blaetterleiste button.aus,
.blaetterleiste button.aus:hover,
.blaetterleiste button.aus:active{cursor:default;transform:none;}
.blaetterleiste button.aus img,
.blaetterleiste button.aus:hover img{
  opacity:.42;
  filter:grayscale(1) brightness(.75)
         drop-shadow(0 calc(1.5px / var(--s,1)) calc(3px / var(--s,1)) rgba(0,0,0,.4));
}
.blaetterleiste button:focus-visible{
  outline:calc(2px / var(--s,1)) solid var(--gold-hi);
  outline-offset:calc(3px / var(--s,1));
  border-radius:calc(6px / var(--s,1));
}

/* ─── Größen, die am Maßstab hängen ──────────────────────────────
   Nicht an einer Fenstergröße. Das war der Fehler der letzten beiden
   Anläufe: `@media (max-height:560px)` trifft ein Telefon quer
   (Maßstab 0,53), aber ebenso ein flaches Fenster am Rechner (0,70)
   — dieselben Punkte wirken dort deutlich größer, und die Werte
   gerieten außer Rand und Band.

   `calc(N / var(--s))` beschreibt dagegen unmittelbar, was ankommen
   soll. `max()` setzt zusätzlich eine Untergrenze für den großen
   Bildschirm, wo die Karte vergrößert wird und die Marken sonst
   schrumpften.

   Diese Regeln stehen am **Ende** des Stilblocks: bei gleicher
   Spezifität gewinnt die letzte, und zuvor überschrieben die weiter
   unten notierten `.marke`-Regeln sie stillschweigend. */

/* Ortsnamen: mindestens 17 Punkte, auf dem Telefon rund 28. */
.marke::after{font-size:max(17px,calc(15px / var(--s,1)));}

/* Die Marken selbst stehen oben bei `.marke .scheibe`, mit derselben
   Rechnung. */

/* Die übrigen Bedienelemente der Karte: nur auf schmalen und flachen
   Fenstern größer, aber maßvoll — sie stehen im Fluss und werden nicht
   mitskaliert. */
@media (max-width:560px),(max-height:560px){

  /* Nicht in der Questtafel (seit 347): dort setzen Titel, Zeit und Lohn
     ihre Größen selbst (css/tafel.css → .qtafel). */
  .tafel:not(.qtafel) b{font-size:20px;}
  .tafel:not(.qtafel) span{font-size:15px;}
  .knopf{font-size:19px;min-height:50px;}
  .knopf.klein{font-size:18px;min-height:46px;padding:0 20px;}
}

/* ─── Was über dem Landbild liegt (js/atmosphaere.js) ───────────────
   Drei Schichten, alle unter den Marken und alle ohne Zeigerereignisse.

   `.glut` ist die Leinwand und gilt **für jedes Land**: dort malt
   js/atmosphaere.js Licht, Wasser, Rauch, Getier und Asche. `.hitze`
   und `.schleier` sind dagegen aus dem Stilblatt und gehören allein
   Demonica — sie hängen an der Klasse `glueht`. */
.land .hitze,.land .schleier{
  position:absolute;inset:0;pointer-events:none;display:none;
}
.land .glut{
  position:absolute;inset:0;pointer-events:none;
  width:100%;height:100%;
}
.land.glueht .hitze,.land.glueht .schleier{display:block;}
.land.glueht img{filter:saturate(1.05) contrast(1.04) brightness(.94);}
/* Das Hitzeflimmern kommt als SVG-Filter dazu, nicht an seiner Stelle:
   ohne die zweite Regel verlöre Demonica beim Einschalten seine
   Farbstimmung. */
.land img.flimmert{filter:url(#hitzeflimmern);}
.land.glueht img.flimmert{
  filter:url(#hitzeflimmern) saturate(1.05) contrast(1.04) brightness(.94);}
/* Glutflecken über Lava und Burg: wandern langsam, wie Hitze über Stein. */
.land .hitze{
  mix-blend-mode:screen;opacity:.16;
  background:
    radial-gradient(ellipse at 72% 31%,rgba(255,70,10,.7),transparent 19%),
    radial-gradient(ellipse at 54% 78%,rgba(255,55,0,.5),transparent 24%),
    radial-gradient(ellipse at 30% 45%,rgba(255,75,10,.35),transparent 20%);
  animation:hitze 5s ease-in-out infinite alternate;
}
@keyframes hitze{
  from{transform:translate3d(-.5%,.3%,0) scale(1);}
  to  {transform:translate3d(.7%,-.5%,0) scale(1.02);}
}
/* Vignette: dunkler Rand, dunkler Saum oben und unten. Liegt über dem
   allgemeinen `.land::after`, das für alle Länder gilt. */
.land .schleier{
  inset:-5%;
  background:
    radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.16) 73%,rgba(0,0,0,.78) 100%),
    linear-gradient(180deg,rgba(0,0,0,.22),transparent 20%,transparent 80%,rgba(0,0,0,.3));
}
@media (prefers-reduced-motion:reduce){
  .land .hitze{animation:none;}
}
/* ─── Qualität (js/qualitaet.js) und Ruhe unter Tafeln ─────────────
   `.ruht`: eine Tafel liegt über der Karte — alle CSS-Bewegungen der
   Karte halten an (js/atmosphaere.js, `ruhen`).
   „mittel“: die Glutflecken ohne Mischmodus (`screen` zwang den
   Browser, die ganze Karte je Bild neu zu mischen), das Portal ohne
   dreifachen Leuchtfilter. „niedrig“: keine Glutflecken, das Portal
   steht still. */
.land.ruht *,.land.ruht::after{animation-play-state:paused !important;}
html[data-qualitaet="mittel"] .land .hitze{mix-blend-mode:normal;opacity:.09;}
html[data-qualitaet="niedrig"] .land.glueht .hitze{display:none;}
html[data-qualitaet="mittel"] .land .portal,
html[data-qualitaet="niedrig"] .land .portal{filter:drop-shadow(0 0 6px var(--main));}
html[data-qualitaet="mittel"] .land .portal .aura,
html[data-qualitaet="niedrig"] .land .portal .aura{filter:none;}
html[data-qualitaet="mittel"] .land .portal .spark,
html[data-qualitaet="niedrig"] .land .portal .spark{filter:none;}
html[data-qualitaet="niedrig"] .land .portal *{animation:none !important;}

/* ─── Ortsnamen ausgeblendet ─────────────────────────────────────────
   Die Marken tragen keine Beschriftung mehr: auf der gemalten Karte
   standen sie über Wald, Fels und Verderbnis und verdeckten genau das
   Gelände, das die Marke einordnet.

   **Ausgeblendet, nicht entfernt.** `data-name` steht weiter an jeder
   Marke, `title` und `alt` nennen Ort und Gegner, und die Regeln zur
   Lage des Namens (`.marke.hier::after`, `.marke.hier.tief::after`,
   Schriftgröße) bleiben unangetastet. Wer die Namen zurückhaben will,
   löscht diese eine Regel — sonst ändert sich nichts. Vorlesewerkzeuge
   und der Mauszeiger nennen den Ort ohnehin. */
.marke::after,.marke.hier::after{content:none;}

/* ══════════════════════════════════════════════════════════════════
   Die Bedienung im freien Rand

   Die Karte hat ein festes Seitenverhältnis (1000 × `--kh`). Ist das
   Fenster deutlich breiter, bleibt links und rechts schwarze Fläche
   stehen — auf einem quer gehaltenen Telefon sind das je gut achtzig
   Punkte. Dort gehören die Knöpfe hin: auf der Karte decken sie Wald
   und Wege zu, im Rand decken sie nichts zu.

   **Liegendes Telefon**, also breiter als 7:4 und höchstens 520 Punkte
   hoch — dieselbe Schranke, mit der auch lehre.css und tisch.css das
   quer gehaltene Telefon erkennen. Die Seitenlage allein genügte nicht:
   16:9 liegt bei 1,778 und damit so dicht an jeder Schwelle um 1,8, dass
   ein Rechnerfenster beim Ziehen hin und her spränge. Die Höhe trennt
   sauber — Telefone liegen bei 360 bis 430, Rechner bei 700 aufwärts.

   **Nur die Lage ändert sich, nicht das Aussehen.** Die Pfeilscheiben
   und der Weg hinaus bleiben genau die Knöpfe, die sie auf dem Rechner
   auch sind — ein zweites Aussehen für dieselbe Bedienung wäre eine
   Fehlerquelle mehr und sähe nach zwei Spielen aus.

   `--rand` kommt aus js/buehne.js und nennt die Breite **eines**
   Randes in Bildschirmpunkten; geteilt durch `--s` ergibt das
   Bühnenpunkte. Beide Blöcke stehen auf halber Höhe und auf halber
   Randbreite — links die Pfeile als Paar, rechts der Weg hinaus.
   Zwei gleich schwere Punkte, einer je Seite.

   Platz: die Pfeilscheiben messen 64 Punkte, der Weg hinaus rund 80.
   Auf den verbreiteten Geräten stehen 158 bis 173 Punkte Rand zur
   Verfügung. In der engsten Lage, die überhaupt unter die Regel fällt
   (667 × 375, Rand 79), füllt der Weg hinaus den Rand genau aus und
   berührt die Kartenkante — abgeschnitten wird nichts, die Bühne
   beschneidet ihre Kinder nicht.
   ══════════════════════════════════════════════════════════════════ */
@media (min-aspect-ratio: 7/4) and (max-height: 520px){
  .blaetterleiste{
    left:calc(-1 * var(--rand,0px) / var(--s,1) / 2);
    top:50%;bottom:auto;
    transform:translate(-50%,-50%);
    flex-direction:column;
    gap:calc(14px / var(--s,1));
  }
  /* Seit 371 unten im rechten Rand: der Weg hinaus steht dort, wo man
     ihn sucht — unten, wie am Rechner. Mittig rechts stehen Post und
     Beutel (css/monster.css), oben das Konto. */
  a.knopf.heimweg{
    right:calc(-1 * var(--rand,0px) / var(--s,1) / 2);
    top:auto;bottom:calc(14px / var(--s,1));
    transform:translateX(50%);
    /* Im schmalen Rand etwas kürzer — das Band trägt nur ein Wort. */
    width:calc(150px / var(--s,1));--bandhoehe:calc(44px / var(--s,1));
  }
}

/* Ist der Rand schmal (unter 2 : 1, z. B. 667 × 375: 79 Punkte), passt
   kein Band hinein — dann ein runder Knopf mit Pfeil zurück, in derselben
   Machart wie Post und Beutel darüber (seit 371). */
@media (min-aspect-ratio: 7/4) and (max-aspect-ratio: 1999/1000) and (max-height: 520px){
  a.knopf.heimweg{width:calc(48px / var(--s,1));height:calc(48px / var(--s,1));--bandhoehe:calc(48px / var(--s,1));
    border:calc(1.5px / var(--s,1)) solid rgba(232,190,110,.6);border-image:none;border-radius:50%;
    background:rgba(20,14,8,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 5 3.5 11l6 6M4 11h10a6 6 0 0 1 0 12h-2' fill='none' stroke='%23f3e7c8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' transform='translate(1 -1.5)'/%3E%3C/svg%3E") center / 54% no-repeat;}
  a.knopf.heimweg span{display:none;}
}

/* Der Vorrat für den SVG-Filter steht außerhalb der Bühne und darf
   nirgends Platz einnehmen — er trägt nur die Vorschrift, kein Bild. */
.filtervorrat{position:fixed;left:0;top:0;width:0;height:0;
  overflow:hidden;pointer-events:none;}

/* ══════════════════════════════════════════════════════════════════
   Werkstatt der Karte: die Atmosphäre einstellen

   Die Windrose sitzt oben rechts an der Bühne, in derselben Machart
   wie im Hauptmenü — der Stil dort steht in index.html, hier steht nur
   die Lage. Sie hängt an der **Bühne**, nicht an der Tischplatte:
   deren `overflow:hidden` schnitte sie ab, sobald sie im freien Rand
   steht.

   Das Feld selbst liegt am rechten Rand und lässt die linke Hälfte der
   Karte frei: dort sieht man beim Schieben, was sich ändert. Ein Feld
   in der Mitte verdeckte genau das, was es einstellt.
   ══════════════════════════════════════════════════════════════════ */
/* Das Zahnrad der Einstellungen steht ganz oben rechts wie im Duell;
   die Windrose rückt daneben. Beide bleiben auf jedem Gerät gleich groß. */
.zahnrad.kartenoptionen{right:calc(12px / var(--s,1));top:calc(12px / var(--s,1));z-index:32;
  width:calc(40px / var(--s,1));height:calc(40px / var(--s,1));border-width:calc(3px / var(--s,1));}
.zahnrad.kartenoptionen svg{width:calc(20px / var(--s,1));height:calc(20px / var(--s,1));}
/* **Dieselbe Eichenmedaille wie im Duell** (381, Wunsch Max): das
   gemalte Zahnrad (assets/tisch/knopf-zahnrad.webp) statt der dunklen
   Scheibe mit Strichzeichnung — ein Zeichen, überall gleich. */
.zahnrad.kartenoptionen{border:0;border-radius:50%;box-shadow:none;
  width:calc(44px / var(--s,1));height:calc(44px / var(--s,1));
  background:url(../assets/tisch/knopf-zahnrad.webp) center/100% 100% no-repeat;
  filter:drop-shadow(0 calc(3px / var(--s,1)) 0 rgba(20,16,11,.85));}
.zahnrad.kartenoptionen svg{display:none;}
.zahnrad.kartenoptionen:hover{filter:drop-shadow(0 calc(3px / var(--s,1)) 0 rgba(20,16,11,.85)) brightness(1.12);}
.kartenoptionenfeld{z-index:60;}
/* Telefon quer (seit 373): die Einstellungen liegen in der gezoomten
   Bühne und kamen mit 0,53 an — Schalter von 13 Punkten. Ihr Inhalt
   nimmt den Maßstab wieder heraus (wie die Tafeln, css/tafel.css). */
@media (max-height:520px){
  .kartenoptionenfeld{gap:10px;overflow:auto;justify-content:safe center;}
  .kartenoptionenfeld > *{zoom:calc(.9 / var(--s,1));flex:0 0 auto;}
  .kartenoptionenfeld h2{font-size:26px;}
  .kartenoptionenfeld .optionsfeld{min-width:330px;gap:11px;padding:14px 22px;}
}
/* Der Kontostand: Gold und Mana, dauerhaft links neben Windrose und
   Zahnrad (js/landkarte.js, `kontoZeichnen`). Gleich groß auf jedem
   Gerät, wie die Knöpfe daneben. */
.kartenkonto{position:absolute;z-index:31;top:calc(14px / var(--s,1));right:calc(62px / var(--s,1));
  display:flex;align-items:center;gap:calc(12px / var(--s,1));padding:calc(4px / var(--s,1)) calc(12px / var(--s,1)) calc(3px / var(--s,1));
  border-radius:999px;background:rgba(24,17,10,.82);border:calc(2px / var(--s,1)) solid rgba(214,170,90,.75);
  box-shadow:0 calc(2px / var(--s,1)) calc(6px / var(--s,1)) rgba(0,0,0,.45);pointer-events:none;
  color:#f6e7c4;font-family:var(--display);font-size:calc(19px / var(--s,1));line-height:1;}
.kartenkonto span{display:inline-flex;align-items:center;gap:calc(5px / var(--s,1));}
/* Steht die Windrose (Admin, eingeschaltet), rückt das Konto ihr aus dem Weg. */
.buehne:has(#atmoWeg) .kartenkonto{right:calc(106px / var(--s,1));}
.kartenkonto b{font-weight:400;font-variant-numeric:tabular-nums;padding-top:.12em;}
.kartenkonto img,.kartenkonto .manakugel{width:calc(22px / var(--s,1));height:calc(22px / var(--s,1));object-fit:contain;}
.adminweg.atmoweg{
  position:absolute;right:calc(62px / var(--s,1));top:calc(15px / var(--s,1));
  z-index:31;width:calc(34px / var(--s,1));height:calc(34px / var(--s,1));
  padding:0;background:none;border:0;cursor:pointer;
  color:var(--parch-hi);opacity:.14;
  transition:opacity .25s ease,transform .25s ease;
}
.adminweg.atmoweg svg{width:100%;height:100%;display:block;
  fill:none;stroke:currentColor;stroke-width:1.1;stroke-linejoin:round;}
.adminweg.atmoweg svg path{fill:currentColor;fill-opacity:.55;stroke-width:.8;}
.adminweg.atmoweg:hover{opacity:.72;transform:rotate(45deg);}
.adminweg.atmoweg:focus-visible{opacity:.72;outline:2px solid var(--gold-hi);
  outline-offset:3px;border-radius:50%;}
/* Im freien Rand, sobald dort Platz ist — dieselbe Schranke wie für
   die Blätterpfeile. **Das Zahnrad** (seit 371) steht dann unten im
   linken Rand: oben links die Orte, in der Mitte die Pfeile, unten die
   Einstellungen — die Karte bleibt frei, das Konto hat oben rechts den
   Platz für sich. Die Windrose (nur Admin) rückt neben das Zahnrad. */
@media (min-aspect-ratio: 7/4) and (max-height: 520px){
  .zahnrad.kartenoptionen{right:auto;top:auto;left:calc(-1 * var(--rand,0px) / var(--s,1) / 2);bottom:calc(14px / var(--s,1));
    transform:translateX(-50%);width:calc(44px / var(--s,1));height:calc(44px / var(--s,1));}
  .zahnrad.kartenoptionen svg{width:calc(22px / var(--s,1));height:calc(22px / var(--s,1));}
  .adminweg.atmoweg{right:auto;top:auto;left:calc(-1 * var(--rand,0px) / var(--s,1) / 2 + 30px / var(--s,1));
    bottom:calc(64px / var(--s,1));transform:none;}
  .adminweg.atmoweg:hover{transform:rotate(45deg);}
  .kartenkonto,.buehne:has(#atmoWeg) .kartenkonto{right:calc(12px / var(--s,1));}
  /* Unter einer offenen Tafel treten die Knöpfe der Ränder zurück, bleiben
     aber knapp zu sehen (seit 373; 371 verschwanden sie ganz, und beim
     Öffnen sprang das Bild). */
  .buehne:has(> .tafelfeld) :is(.abenteuerleiste,.monsterleiste,.blaetterleiste,a.knopf.heimweg,.zahnrad.kartenoptionen,.adminweg.atmoweg){opacity:.45;pointer-events:none;}
}
/* **Der Kontostand im rechten Rand** (seit 354; seit 363 nebeneinander,
   nur Gold und Mana): auf dem Telefon quer steht er nicht über der Karte,
   sondern oben im freien Rand rechts. Erst ab Seitenverhältnis 2 : 1 —
   darunter (667 × 375) ist der Rand zu schmal für eine Zeile, dort bleibt
   er oben auf der Karte wie am Rechner. */
@media (min-aspect-ratio: 2/1) and (max-height: 520px){
  .kartenkonto{right:calc(-1 * var(--rand,0px) / var(--s,1) / 2);top:calc(12px / var(--s,1));transform:translateX(50%);
    gap:calc(10px / var(--s,1));padding:calc(5px / var(--s,1)) calc(10px / var(--s,1)) calc(4px / var(--s,1));
    font-size:calc(min(19px, (var(--rand,160px) - 24px) / 7.2) / var(--s,1));}
  .kartenkonto img,.kartenkonto .manakugel{width:1.15em;height:1.15em;}
  .kartenkonto span{gap:.25em;}
  .buehne:has(#atmoWeg) .kartenkonto{right:calc(-1 * var(--rand,0px) / var(--s,1) / 2);}
  /* Auch unter einer Tafel bleibt das Konto oben rechts (seit 371; von
     359 bis 370 wich es nach unten aus): das Kreuz der Tafel steht
     darunter im Rand. */
}

.atmofeld{
  position:absolute;z-index:32;display:none;
  right:calc(14px / var(--s,1));top:calc(56px / var(--s,1));
  width:calc(268px / var(--s,1));max-height:calc(78% / 1);
  overflow:auto;
  padding:calc(12px / var(--s,1));
  font-size:calc(12px / var(--s,1));line-height:1.4;
  color:var(--tan);background:rgba(13,10,7,.93);
  border:calc(2px / var(--s,1)) solid var(--ink);
  border-radius:calc(10px / var(--s,1));
  box-shadow:0 calc(8px / var(--s,1)) calc(22px / var(--s,1)) -6px #000;
}
.atmofeld.an{display:block;}
.atmokopf{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:calc(8px / var(--s,1));}
.atmokopf b{font-family:var(--display);font-weight:400;
  font-size:calc(17px / var(--s,1));color:var(--parch-hi);}
/* Welches Land eingestellt wird — Tempo und Stärke gelten je Land. */
.atmokopf b i{font-style:normal;font-family:var(--ui);
  font-size:calc(11px / var(--s,1));color:var(--tan);opacity:.8;
  margin-left:calc(6px / var(--s,1));}
.atmozu{background:none;border:0;color:var(--tan);cursor:pointer;
  font:inherit;font-size:calc(18px / var(--s,1));line-height:1;padding:0 calc(4px / var(--s,1));}
.atmozu:hover{color:var(--gold-hi);}

.atmoregel{display:block;margin:0 0 calc(8px / var(--s,1));}
.atmoregel em{float:right;font-style:normal;color:var(--parch-hi);
  font-variant-numeric:tabular-nums;}
.atmoregel input[type=range]{width:100%;margin:calc(4px / var(--s,1)) 0 0;
  accent-color:var(--gold);}

/* Ein Schalter je Schicht, mit ihrer Kennung und ihrem Typ — genau die
   Wörter, die auch in SCHICHTEN stehen. Wer etwas ändern lassen will,
   kann sie so abschreiben. */
.atmoliste{display:flex;flex-direction:column;gap:calc(1px / var(--s,1));
  margin:calc(6px / var(--s,1)) 0;padding:calc(6px / var(--s,1)) 0;
  border-top:1px solid rgba(238,220,171,.16);
  border-bottom:1px solid rgba(238,220,171,.16);}
.atmoschicht{display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:calc(7px / var(--s,1));cursor:pointer;
  padding:calc(2px / var(--s,1)) 0;}
.atmoschicht input{accent-color:var(--gold);margin:0;
  width:calc(13px / var(--s,1));height:calc(13px / var(--s,1));cursor:pointer;}
.atmoschicht span{color:var(--parch-hi);}
.atmoschicht i{font-style:normal;opacity:.55;font-size:calc(10.5px / var(--s,1));}
.atmoschicht:hover span{color:var(--gold-hi);}

/* Die Portalfarbe: drei Knöpfe, der gewählte in seiner eigenen Farbe
   hinterlegt — man sieht auf einen Blick, welcher gilt, und muss dafür
   kein Häkchen suchen. */
.atmoportal{display:flex;align-items:center;gap:calc(6px / var(--s,1));
  margin:calc(2px / var(--s,1)) 0 calc(8px / var(--s,1));}
.atmoportal[hidden]{display:none;}
.atmoportal span{flex:0 0 auto;font-size:calc(12px / var(--s,1));color:var(--parch-hi);
  margin-right:calc(4px / var(--s,1));}
.atmoportal button{flex:1;cursor:pointer;font:inherit;
  font-size:calc(11.5px / var(--s,1));
  background:rgba(0,0,0,.25);border:1px solid rgba(238,220,171,.25);
  border-radius:calc(5px / var(--s,1));
  padding:calc(5px / var(--s,1)) calc(4px / var(--s,1));}
.atmoportal button[data-farbe="rot"] {color:#ff6a50;}
.atmoportal button[data-farbe="lila"]{color:#d58cff;}
.atmoportal button[data-farbe="blau"]{color:#6ccfff;}
.atmoportal button:hover{background:rgba(238,220,171,.1);}
.atmoportal button.an{border-color:currentColor;
  box-shadow:0 0 calc(8px / var(--s,1)) currentColor inset;}
.atmoportal button[data-farbe="rot"].an {background:rgba(120,30,20,.55);}
.atmoportal button[data-farbe="lila"].an{background:rgba(80,30,110,.6);}
.atmoportal button[data-farbe="blau"].an{background:rgba(18,62,88,.65);}

.atmowege{display:flex;gap:calc(8px / var(--s,1));
  margin-top:calc(8px / var(--s,1));}
.atmowege button{flex:1;background:none;cursor:pointer;font:inherit;
  font-size:calc(11.5px / var(--s,1));color:var(--tan);
  border:1px solid rgba(238,220,171,.25);
  border-radius:calc(5px / var(--s,1));
  padding:calc(5px / var(--s,1)) calc(6px / var(--s,1));}
.atmowege button:hover{color:var(--gold-hi);background:rgba(238,220,171,.1);}
.atmomeldung{display:block;min-height:1.3em;margin-top:calc(6px / var(--s,1));
  font-style:normal;font-size:calc(11px / var(--s,1));
  color:var(--gold-hi);opacity:.85;}

/* ══════════════════════════════════════════════════════════════════
   Das Portal über dem Kettentor (Demonica)

   Übernommen aus der Vorlage portal_lavakarte.php: vier Ellipsen —
   Schein, Hauptring, heißer Ring, innerer Ring — und drei Funken. Der
   Innenraum bleibt leer; man soll durch den Ring hindurch aufs Tor
   sehen. Lage und Größe setzt js/atmosphaere.js in Anteilen der Karte.

   Drei Farben, jede mit eigenem Charakter und nicht nur eigenem Farbton:
     rot   die Glut selbst — die Ringe stehen, nur das Innere atmet
     lila  Rissenergie — wandernde Wellen, violette Funken (Vorgabe)
     blau  kalte Energie — die Striche fließen in beide Richtungen

   **Über allem auf der Karte (z 90), aber ohne Zeiger.** Ein Klick auf
   das Portal soll bei der Karte ankommen wie jeder andere — dort steigt
   dann der Qualm auf. */
.land .portal{
  position:absolute;transform:translate(-50%,-50%);z-index:4;
  pointer-events:none;overflow:visible;
  --main:#ff2a08;--hot:#ff6a2a;--deep:#ff1700;--glow:rgba(255,30,0,.42);
  filter:drop-shadow(0 0 3px var(--main)) drop-shadow(0 0 9px var(--main))
         drop-shadow(0 0 20px var(--glow));
}
.land .portal svg{width:100%;height:100%;overflow:visible;display:block;}
.land .portal .ring{fill:none;stroke-linecap:round;transform-box:fill-box;transform-origin:center;}
.land .portal .ring-main {stroke:var(--main);stroke-width:7;  stroke-dasharray:30 8 8 5;}
.land .portal .ring-hot  {stroke:var(--hot); stroke-width:2.4;stroke-dasharray:7 13 3 18;opacity:.95;}
.land .portal .ring-inner{stroke:var(--deep);stroke-width:3;  stroke-dasharray:15 9 3 12;opacity:.9;
  animation:portalPuls 1.7s ease-in-out infinite;}
.land .portal .aura{fill:none;stroke:rgba(255,30,0,.22);stroke-width:13;filter:blur(3px);
  transform-box:fill-box;transform-origin:center;
  animation:portalSchein 1.3s ease-in-out infinite;}
.land .portal .spark{fill:var(--hot);filter:drop-shadow(0 0 4px var(--main));
  transform-box:fill-box;transform-origin:center;
  animation:portalFlackern 1s ease-in-out infinite alternate;}
.land .portal .spark.s1{animation-delay:-.2s;}
.land .portal .spark.s2{animation-delay:-.6s;}
.land .portal .spark.s3{animation-delay:-.85s;}

/* Blau */
.land .portal.blau{--main:#21a7ff;--hot:#79dcff;--deep:#0877ff;--glow:rgba(0,130,255,.5);}
.land .portal.blau .ring-main {animation:portalFluss 1.35s linear infinite;}
.land .portal.blau .ring-hot  {animation:portalFlussZurueck 2s linear infinite;}
.land .portal.blau .ring-inner{animation:portalPuls 1.15s ease-in-out infinite,portalFluss 2.5s linear infinite;}
.land .portal.blau .aura{stroke:rgba(20,140,255,.24);animation:portalSchein 1.8s ease-in-out infinite;}
.land .portal.blau .spark{fill:#8be7ff;filter:drop-shadow(0 0 5px #159cff);
  animation:portalBlauFunke .8s ease-in-out infinite alternate;}

/* Lila */
.land .portal.lila{--main:#b65cff;--hot:#f0a2ff;--deep:#7b20e8;--glow:rgba(172,40,255,.55);}
.land .portal.lila .ring-main {stroke-dasharray:5 8 2 13 1 7;animation:portalDrift 3s ease-in-out infinite;}
.land .portal.lila .ring-hot  {stroke-dasharray:2 11 9 5;animation:portalLilaPuls 1.2s ease-in-out infinite;}
.land .portal.lila .ring-inner{stroke-dasharray:3 7 1 10;animation:portalLilaPuls .9s ease-in-out infinite;}
.land .portal.lila .aura{stroke:rgba(190,70,255,.3);animation:portalWelle 2s ease-in-out infinite;}
.land .portal.lila .spark{fill:#efb5ff;filter:drop-shadow(0 0 6px #a52cff);
  animation:portalLilaFunke 1.5s ease-in-out infinite;}
.land .portal.lila .spark.s2{animation-delay:-.5s;}
.land .portal.lila .spark.s3{animation-delay:-1s;}

@keyframes portalPuls       {0%,100%{opacity:.55;transform:scale(.97)} 50%{opacity:1;transform:scale(1.03)}}
@keyframes portalSchein     {0%,100%{opacity:.25;transform:scale(.96)} 50%{opacity:.75;transform:scale(1.04)}}
@keyframes portalFlackern   {from{opacity:.2;transform:scale(.65)} to{opacity:1;transform:scale(1.25)}}
@keyframes portalFluss      {to{stroke-dashoffset:-80;}}
@keyframes portalFlussZurueck{to{stroke-dashoffset:70;}}
@keyframes portalBlauFunke  {from{opacity:.25;transform:translateY(2px) scale(.7)} to{opacity:1;transform:translateY(-4px) scale(1.35)}}
@keyframes portalDrift      {0%,100%{stroke-dashoffset:0;opacity:.75} 50%{stroke-dashoffset:-28;opacity:1}}
@keyframes portalLilaPuls   {0%,100%{opacity:.35;filter:brightness(.9)} 50%{opacity:1;filter:brightness(1.7)}}
@keyframes portalWelle      {0%,100%{opacity:.18;transform:scale(.92)} 50%{opacity:.9;transform:scale(1.08)}}
@keyframes portalLilaFunke  {0%{opacity:0;transform:translate(0,5px) scale(.2)} 45%{opacity:1;transform:translate(-2px,-4px) scale(1.3)} 100%{opacity:0;transform:translate(4px,-10px) scale(.4)}}

/* Ruhige Bewegung: das Portal bleibt, pulst aber viermal langsamer — es
   ganz anzuhalten, nähme ihm das Einzige, was es als Portal kennzeichnet. */
@media (prefers-reduced-motion:reduce){
  .land .portal .ring,.land .portal .aura,.land .portal .spark{animation-duration:4s !important;}
}

/* ─── Die Fläche über dem gemalten Portal ─────────────────────────────
   Unsichtbar, aber anklickbar: den Ring zeichnet die Atmosphäre. Eine
   Ellipse statt eines Rechtecks, damit ein Klick knapp neben den Ring
   nicht versehentlich ins andere Land führt. Beim Überfahren ein
   violetter Schein — das Portal soll zeigen, dass es sich öffnen lässt,
   ohne eine zweite Marke über den Ring zu legen. */
.portalfeld{
  position:absolute;transform:translate(-50%,-50%);z-index:5;
  border:0;padding:0;margin:0;background:none;cursor:pointer;
  border-radius:50%;
  transition:box-shadow .25s ease,background .25s ease;
}
.portalfeld:hover,.portalfeld:focus-visible{
  background:radial-gradient(ellipse at center,rgba(190,90,255,.28),rgba(190,90,255,0) 70%);
  box-shadow:0 0 calc(18px / var(--s,1)) rgba(190,90,255,.55);
  outline:none;
}

/* ─── Der Blutkreis (Demonica) ────────────────────────────────────────
   Unsichtbar und ohne Zeiger — der Kreis soll aussehen wie immer. Erst
   wer die Folge richtig beginnt, sieht das Zeichen entstehen: glühende
   Punkte an den berührten Stellen, verbunden durch rote Linien. Unter
   den Marken (3 gegen 5), damit der Altar in der Mitte seine Marke
   behält. */
.ritualfeld{
  position:absolute;transform:translate(-50%,-50%);z-index:3;
  border-radius:50%;cursor:inherit;
  -webkit-tap-highlight-color:transparent;
}
.ritualfeld svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  pointer-events:none;}
.ritualfeld line{stroke:#ff3a1a;stroke-width:2;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 3px #ff2a00) drop-shadow(0 0 7px rgba(255,40,0,.6));
  animation:ritualLinie .35s ease-out;}
@keyframes ritualLinie{from{opacity:0;}}
/* Vollendet: das Zeichen flammt auf und vergeht — dann steht der
   Höllenfürst an seiner Stelle. */
.ritualfeld.vollendet svg{animation:ritualFlamme .9s ease-out forwards;}
@keyframes ritualFlamme{
  0%  {filter:brightness(1);opacity:1;}
  35% {filter:brightness(2.6) drop-shadow(0 0 14px #ff5a1a);opacity:1;}
  100%{filter:brightness(1.4);opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .ritualfeld line{animation:none;}
  .ritualfeld.vollendet svg{animation-duration:.3s;}
}

/* ─── Hinweis nach dem Kampf ─────────────────────────────────────────
   Was ein Sieg freigeschaltet hat (js/landkarte.js → hinweisZeigen):
   eine dunkle Tafel mit Bild, einer Zeile groß, einer klein, und dem
   Band „Weiter“. */
.feldzughinweis{position:absolute;inset:0;z-index:50;display:grid;place-items:center;background:rgba(8,6,4,.72);
  animation:feldzugHinweisAuf .25s ease-out;}
@keyframes feldzugHinweisAuf{from{opacity:0;}}
/* Seit 379 in der Sprache der „?“-Erklärungen (Wunsch Max): derselbe
   dunkle Grund, dieselbe Goldüberschrift wie `.ladenhilfe` — ein
   Hinweis ist ein Hinweis, egal ob ihn ein „?“ oder ein Sieg öffnet. */
.feldzugtafel{width:400px;padding:24px 28px 18px;display:flex;flex-direction:column;align-items:center;gap:12px;
  text-align:center;border-radius:14px;color:#f3e7c8;
  background:rgba(24,17,10,.96);
  box-shadow:0 24px 44px -18px #000;animation:feldzugTafelAuf .35s cubic-bezier(.3,1.3,.5,1);}
@keyframes feldzugTafelAuf{from{opacity:0;transform:scale(.9);}}
.feldzugtafel img{height:84px;width:auto;}
.feldzugtafel p{margin:0;display:flex;flex-direction:column;gap:8px;}
.feldzugtafel p b{font-family:var(--display);font-weight:400;font-size:24px;color:var(--gold-hi);padding-top:.12em;}
.feldzugtafel p span{font-size:14.5px;line-height:1.5;}
.feldzugtafel .knopf.banderole{--bandhoehe:50px;width:200px;font-size:19px;margin-top:4px;}
@media (max-height:560px){ .feldzugtafel{zoom:1.3;} }
@media (prefers-reduced-motion:reduce){ .feldzughinweis,.feldzugtafel{animation:none;} }

/* ─── Etwas Blaues eingesammelt ──────────────────────────────────────
   Nach dem Schnitter (js/landkarte.js → manaFundZeigen): weißer Text am
   Ort, der aufsteigt und vergeht; oben rechts leuchtet kurz eine
   Manakugel auf, zu der die Lichtpunkte fliegen. */
.manafund{position:absolute;z-index:12;transform:translate(-50%,-140%);pointer-events:none;white-space:nowrap;
  font-family:var(--display);font-size:calc(22px / var(--s,1));color:#fff;padding-top:.12em;
  text-shadow:0 0 6px rgba(120,200,255,.9),0 2px 0 rgba(0,0,0,.6);
  opacity:0;transition:opacity .35s ease,transform 2.4s cubic-bezier(.2,.7,.3,1);}
.manafund.steigt{opacity:1;transform:translate(-50%,-320%);animation:manafundAus 2.9s ease forwards;}
@keyframes manafundAus{0%{opacity:0;}12%,65%{opacity:1;}100%{opacity:0;}}
.manablitz{position:absolute;z-index:32;right:calc(108px / var(--s,1));top:calc(12px / var(--s,1));pointer-events:none;
  opacity:0;transition:opacity .4s ease;}
.manablitz.an{opacity:1;}
.manablitz .manakugel{width:calc(34px / var(--s,1));height:calc(34px / var(--s,1));}
/* Gold für eine Station: derselbe Aufstieg, goldener Schein, die Münze
   hinter der Zahl (js/landkarte.js → goldLohnZeigen). */
.goldfund{text-shadow:0 0 6px rgba(255,205,90,.95),0 2px 0 rgba(0,0,0,.6);}
.goldfund img{width:1.05em;height:1.05em;object-fit:contain;vertical-align:-.18em;margin-left:.15em;}
@media (prefers-reduced-motion:reduce){ .manafund{transition:none;} .manafund.steigt{animation:none;opacity:1;} }

/* Die Höhle in den Zwergenbergen füllt die Scheibe ganz — sie ist ein
   Ausschnitt der Karte, kein freigestelltes Motiv. */
.marke.durchgang.eigenbild .scheibe img{transform:none;object-fit:cover;object-position:50% 50%;}
/* Der Beutel am Ort des Geistes: so groß wie Portal und Postkasten. */
.marke.geheim.beutelort .scheibe{width:max(54px,calc(30px / var(--s,1)));height:max(54px,calc(30px / var(--s,1)));}
/* „mittel“: das Lila pulst nur noch in der Deckkraft — `brightness` im
   Schlüsselbild hieß Filter neu rechnen, dreißigmal in der Sekunde. */
html[data-qualitaet="mittel"] .land .portal.lila .ring-hot,
html[data-qualitaet="mittel"] .land .portal.lila .ring-inner{animation-name:portalLilaPulsLeicht;}
@keyframes portalLilaPulsLeicht{0%,100%{opacity:.35} 50%{opacity:1}}

/* ─── Die Holzquest: die Bäume (seit 378, ohne Axt seit 379) ────────
   Solange der Schmied auf sein Holz wartet, liegt über zehn
   gezeichneten Bäumen je eine Fläche, die sich fällen lässt. Sie trägt
   kein eigenes Bild: der Baum ist schon da, ein Zeichen darüber wäre
   doppelt. Beim Überfahren hellt sie ihn auf, damit man merkt, dass er
   mitspielt. Die Axt am Zeiger ist weg — sie hat mehr verwirrt als
   geführt (Befund Max, 379). */
.baumfeld{
  position:absolute;transform:translate(-50%,-50%);z-index:14;
  width:66px;height:74px;padding:0;border:0;border-radius:50% 50% 42% 42%;
  background:radial-gradient(circle at 50% 42%,rgba(255,246,205,.22),rgba(255,246,205,0) 68%);
  cursor:pointer;
  transition:background .18s ease,transform .12s ease;
}
.baumfeld:hover,.baumfeld:focus-visible{
  background:radial-gradient(circle at 50% 42%,rgba(255,246,205,.5),rgba(255,246,205,0) 70%);
  outline:none;
}
.baumfeld:active{transform:translate(-50%,-50%) scale(.94);}
/* Gefällt: er kippt kurz zur Seite und verschwindet. */
.baumfeld.faellt{animation:baumFaellt .42s cubic-bezier(.4,0,.7,1) forwards;pointer-events:none;}
@keyframes baumFaellt{
  0%  {transform:translate(-50%,-50%) rotate(0);opacity:1;}
  30% {transform:translate(-50%,-50%) rotate(-7deg);}
  100%{transform:translate(-50%,-40%) rotate(-78deg);opacity:0;}
}
@media (prefers-reduced-motion:reduce){ .baumfeld.faellt{animation:none;opacity:0;} }
/* Der Stumpf bleibt stehen, wo ein Baum fiel — der Fortschritt auf der
   Karte selbst. Er nimmt keine Klicks an. */
.baumstumpf{
  position:absolute;transform:translate(-50%,-30%);z-index:13;pointer-events:none;
  width:38px;height:auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));
  animation:stumpfDa .4s ease-out backwards;
}
@keyframes stumpfDa{from{opacity:0;transform:translate(-50%,-60%) scale(.7);}}
@media (prefers-reduced-motion:reduce){ .baumstumpf{animation:none;} }