/* ═══════════════════════════════════════════════════════════════════════════
   GROSSE ANSICHT — der Dialog um EINE Karte
   ═══════════════════════════════════════════════════════════════════════════
   Umsetzung von KARTENFLAECHE-SPEZIFIKATION.md § 7.3. Diese Datei malt den
   RAHMEN: Schleier, Dialogkasten, Bühne, Hilfezeile, Knopfleiste. Sie malt
   keine Karte. Die Karte kommt aus `kartenFlaeche.karte()` und wird von
   `karte.css` gestaltet (`.kf-*`, `.stk-*`) — genau ein Bauer, genau ein
   Aussehen (Befund 3: es gab zwei Kartenvorderseiten).

   VIER REGELN, DIE DIESE DATEI DURCHGEHEND EINHÄLT
   ────────────────────────────────────────────────
   1. DER ENDZUSTAND STEHT IM GRUNDSTIL, DIE BEWEGUNG FÜHRT NUR HIN.
      Kein Element beginnt unsichtbar und wird erst von einer Animation an
      seinen Platz gebracht. Fällt die Bewegung weg — `prefers-reduced-motion`,
      versteckter Tab, in dem `rAF` nie feuert —, steht trotzdem das richtige
      Bild da. Das ist die verallgemeinerte Lehre aus B02.

   2. `backface-visibility` WIRD IN DER RUHE NICHT ANGEFASST. Das ist der Kern
      von B02: die alte Ruhe-Fassung setzte `visible` und `transform: none` auf
      die Rückseite, worauf sie unverdreht ÜBER der Vorderseite lag — und die
      Deckkraftwerte, die das aufgelöst hätten, schrieb nur der Bildtakt, der
      in der Ruhe absichtlich schläft. `karte.css` § 12 schreibt die Verdeckung
      inzwischen fest; hier steht KEINE Zeile, die sie wieder aufweicht.

   3. KEINE INLINE-STILE. Discords Activity-Rahmen setzt eine CSP mit Nonce;
      die Seite erschien am 18.08. deshalb einmal weiss. Alles Gestalterische
      steht hier, alles Veränderliche kommt als Custom Property oder als Klasse
      vom Skript — über die CSSOM, nie als `style`-Attribut.

   4. KEIN WORT IN DIESER DATEI LANDET AUF DEM BILDSCHIRM. Es gibt kein
      `content:` mit Buchstaben. Jede Beschriftung kommt aus `optionen.texte`
      in elf Sprachen (§ 1c). Eine Zeichenkette in der CSS wäre eine zwölfte,
      unübersetzte Sprache.

   WER SCHREIBT WAS (§ 2.2 der Spezifikation)
   ──────────────────────────────────────────
   Ansicht (karte-ansehen.js) : --stk-dreh auf .stk-dreh, --kf-w/--kf-e am
                                Träger, die Klassen .ka--gedreht / .ka--ruhig
   Takt (karte-takt.js)       : transform auf .stk-neige, --kf-x/--kf-y/
                                --kf-druck auf .kf-vorn, .kf-ruhig am Träger
   Diese Datei                : liest alles davon, schreibt nichts zurück.

   Jede Marke hat einen Rückfallwert. Läuft das Skript noch nicht oder nicht
   mehr, sieht der Dialog trotzdem nach Dialog aus. Nichts fällt still aus.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ 1 · MARKEN UND ZEITEN ═════════════════════════════════════════════════
   EIN Faktor für ALLE Zeiten dieser Datei, wie in `pack.css`. Wer die Ansicht
   langsamer haben will, ändert eine Zahl — nicht elf Werte, von denen später
   drei vergessen werden. */

.ka {
  --ka-t: 1;                                   /* Zeitfaktor, 0 = sofort */
  --ka-wende: calc(var(--ka-t) * 420ms);       /* die Wendung der Karte */
  --ka-auf: calc(var(--ka-t) * 200ms);         /* das Auftauchen des Dialogs */
  --ka-rand: clamp(12px, 4vw, 28px);
  --ka-lueck: clamp(10px, 2.4vh, 18px);
}


/* ═══ 2 · WURZEL UND SCHLEIER ═══════════════════════════════════════════════
   Die Wurzel liegt fest über allem. `hidden` schaltet sie ab — das Skript
   setzt das Attribut, nicht einen Inline-Stil. `display: none` gegen `hidden`
   ist hier kein Geschmack: ein Dialog, der nur durchsichtig wäre, fienge
   weiter Klicks und Tabstopps. */

.ka {
  position: fixed;
  inset: 0;
  /* [12.09.2026] UEBER die Holztafeln. 900 genuegte, solange dieser
     Dialog nur aus der Sammlung kam. Seit das Auktionshaus ihn oeffnet,
     liegt er UNTER `holz-menue-schicht` (z-index 2147483000) — gemessen:
     die grosse Karte war da, 320 px breit, und man sah nur ihren oberen
     Rand hinter der Tafel.
     Der Wert liegt bewusst EINS ueber der Menueschicht und nicht auf dem
     Maximum: wer spaeter etwas darueber braucht, soll noch Platz haben. */
  z-index: 2147483001;
  display: grid;
  place-items: center;
  padding: var(--ka-rand);
  /* B18: `touch-action: none` gehört genau hierher — unter den Dialog. Wer die
     Karte neigt, soll nicht die Seite dahinter scrollen. Die Knöpfe holen sich
     `manipulation` weiter unten zurück, sonst wartete jeder Tipp 300 ms. */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.ka[hidden] { display: none; }

/* Solange der Dialog offen ist, rollt die Seite darunter nicht mit. Als
   Klasse am Wurzelelement, nicht als Inline-Stil (CSP). */
.ka-offen, .ka-offen body { overflow: hidden; }

.ka-schleier {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 11, .78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}


/* ═══ 3 · DER DIALOGKASTEN ══════════════════════════════════════════════════ */

.ka-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ka-lueck);
  max-inline-size: min(100%, 460px);
  max-block-size: 100%;
  /* § 5.4: 320 × 400 ist das kleinste Fenster, und darin gibt es keinen
     Querlauf. Läuft die Höhe über, rollt DIESER Kasten — nicht die Seite. */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* [12.09.2026] KEIN FENSTER MEHR.
     Betreiber: „das fenster drumrum soll nicht da sein".

     Hier standen Hintergrund (#141922), 1-px-Rahmen, 18 px Radius und ein
     grosser Schlagschatten. Zusammen ein Kasten, der die Karte UMRAHMT hat,
     statt sie zu zeigen — und die Karte bringt Rahmen und Schatten selbst
     mit, es war also doppelt.

     Der Abdunkler auf `.ka` BLEIBT: ohne ihn stünde eine Karte mit dunklem
     Rand auf einer dunklen Stadt, und ihre Kanten wären weg. Er ist kein
     Fenster, sondern Kontrast. */
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text, #e8ecf3);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: none;
}



/* Der Kasten selbst bekommt beim Tabben keinen Rahmen — er ist nur das Gefäss,
   der Fokus gehört auf die Karte. Sichtbar bleibt er trotzdem, wenn ihn ein
   Fehlerfall doch einmal fängt: `:focus-visible` greift dann. */
.ka-dialog:focus { outline: none; }
.ka-dialog:focus-visible {
  outline: 3px solid var(--zyan, #22d3ee);
  outline-offset: 3px;
}

.ka-buehne {
  display: grid;
  place-items: center;
  inline-size: 100%;
}

/* Die Karte im Dialog. Breite und Prozentmass setzt das Skript am Träger
   (Gruppe A aus § 2.2); hier steht nur, dass sie den Fokus sichtbar trägt —
   sie ist das Ding, das die Tastatur bedient.

   B18: `touch-action` hängt am ORT, nicht am Modul. Im Raster ist die Karte
   `manipulation` (ein Tipp soll tippen, nicht 300 ms warten); unter dem Dialog
   ist sie `none`, sonst scrollt der Finger die Seite, statt zu neigen. */
.ka .kf-karte { touch-action: none; }
.ka .kf-karte:focus { outline: none; }
.ka .kf-karte:focus-visible {
  outline: 3px solid var(--zyan, #22d3ee);
  outline-offset: 6px;
  border-radius: 6px;
}

/* EBENE 2 — die Wendung. Einziger Schreiber ist `karte-ansehen.js` über
   `--stk-dreh`; `karte.css` setzt daraus die `transform`. Hier kommt nur die
   Zeit dazu, denn eine Wendung ohne Weg ist ein Sprung. */
.ka .stk-dreh {
  transition: transform var(--ka-wende) cubic-bezier(.22, .8, .3, 1);
}

/* Netz unter dem Netz. In einem `preserve-3d`-Kontext sortiert der Browser
   nach Tiefe und `z-index` bleibt wirkungslos — fällt die 3D-Ebene aber weg
   (alter Browser, `transform-style` von einem Filter plattgedrückt), liegen
   beide Seiten flach übereinander, und dann entscheidet diese Regel, welche
   oben liegt. Das ist genau der Zustand, den B02 sichtbar gemacht hat. */
.ka .stk-dreh > .stk-vorn  { z-index: 2; }
.ka .stk-dreh > .stk-rueck { z-index: 1; }
.ka--gedreht .stk-dreh > .stk-vorn  { z-index: 1; }
.ka--gedreht .stk-dreh > .stk-rueck { z-index: 2; }


/* ═══ 4 · HILFEZEILE ════════════════════════════════════════════════════════
   B15 Punkt 3: die alte Fassung setzte die Hilfezeile ab `max-height: 470px`
   auf `display: none` — also genau im Discord-Fenster. Damit war die
   Beschreibung, auf die `aria-describedby` zeigt, für Vorlesewerkzeuge weg.
   Sie wird hier OPTISCH verborgen und bleibt lesbar. */

.ka-hilfe {
  margin: 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
  color: var(--leise, #9aa5b8);
}

/* Die Standzeile sagt Vorlesewerkzeugen, welche Seite gerade oben liegt. Sie
   ist immer optisch verborgen — sichtbar ist die Karte selbst. */
.ka-stand {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ═══ 5 · KNOPFLEISTE ═══════════════════════════════════════════════════════
   Geometrie und Verhalten hier, Aussehen zurückhaltend — dieselbe Bauart wie
   `.pack-knopf`, damit Pack und Ansicht nicht wie zwei Programme aussehen.
   44 px ist keine Empfehlung, sondern die Untergrenze für einen Daumen. */

.ka-leiste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  inline-size: 100%;
}

.ka-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-block-size: 44px;
  min-inline-size: 44px;
  padding: 0 14px;
  border: 1px solid var(--rand, rgba(255, 255, 255, .08));
  border-radius: 12px;
  background: var(--karte, #141922);
  color: var(--text, #e8ecf3);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  /* Der Dialog sperrt Gesten (`touch-action: none`); ein Knopf darf trotzdem
     sofort tippen statt auf einen Doppeltipp zu warten. */
  touch-action: manipulation;
  transition: transform calc(var(--ka-t) * 120ms) ease,
              border-color calc(var(--ka-t) * 160ms) ease;
}

.ka-knopf:hover { border-color: rgba(255, 255, 255, .20); }
.ka-knopf:active { transform: translateY(1px); }
.ka-knopf:focus-visible {
  outline: 3px solid var(--zyan, #22d3ee);
  outline-offset: 3px;
}

.ka-knopf[aria-pressed="true"] {
  border-color: transparent;
  background: linear-gradient(135deg, var(--violett, #8b5cf6), var(--zyan, #22d3ee));
  color: #0b0e14;
}

/* Das Zeichen im Knopf ist Zierat und wird nicht vorgelesen — die Bedeutung
   steht im `aria-label`, das das Skript aus `optionen.texte` setzt. */
.ka-knopf > i {
  font-style: normal;
  font-size: 15px;
  line-height: 1;
}


/* ═══ 6 · ENGE FENSTER ══════════════════════════════════════════════════════
   B11: unter 360 px wurden aus den Knöpfen abgeschnittene Wörter. Hier fällt
   das WORT weg, nicht der Knopf — der Name steht weiter im `aria-label`, die
   Fläche bleibt bei 44 px. */

@media (max-width: 360px) {
  .ka-knopf > .ka-wort { display: none; }
  .ka-knopf { padding: 0 10px; }
}

/* Flach und niedrig — das Discord-Fenster ist 320 × 400. Die Hilfezeile
   verschwindet aus dem Bild, aber nicht aus dem Baum (B15). */
@media (max-height: 470px) {
  .ka-hilfe {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}


/* ═══ 7 · RUHE — WIRKSAM, NICHT DEKORATIV ═══════════════════════════════════
   Zwei Blöcke, und das ist Absicht, keine Doppelpflege aus Versehen:

   `.ka--ruhig` setzt das Skript aus `karteTakt.ruhigIst()` ODER aus der Klasse
   `.kf-ruhig` am Träger — es gibt EINE Quelle für „Bewegung reduziert" (§ 3.6),
   und das Skript fragt sie, statt eine zweite zu erfinden.

   Der Media-Query-Block darunter trägt denselben Zustand ohne JS: Prüfblatt,
   Fehler beim Laden, Dialog ausserhalb der Activity. Ohne ihn liefe die
   Bewegung trotz Systemeinstellung weiter — das war Befund 7, nur andersherum.

   Was hier NICHT steht, ist der Punkt: keine Zeile fasst `backface-visibility`
   an, keine setzt `transform: none` auf `.stk-dreh`. Die Wendung ist kein
   Effekt, sondern die Handlung des Spielers; sie bleibt stehen, sie wird nur
   nicht mehr angefahren. Genau daran ist B02 gescheitert. */

.ka--ruhig .stk-dreh,
.ka--ruhig .ka-knopf,
.ka--ruhig .ka-dialog {
  transition: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .ka .stk-dreh,
  .ka .ka-knopf,
  .ka .ka-dialog {
    transition: none !important;
    animation: none !important;
  }
}

/* Das Auftauchen. Es steht ABSICHTLICH ganz am Ende und ohne Anfangszustand im
   Grundstil: fällt die Animation weg, ist der Dialog trotzdem da und
   vollständig sichtbar (Regel 1 im Kopf dieser Datei). */
.ka-dialog {
  animation: ka-auftauchen var(--ka-auf) cubic-bezier(.22, .8, .3, 1) 1;
}

@keyframes ka-auftauchen {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   [12.09.2026] HILFEZEILE UND KNOPFLEISTE: IM DOKUMENT, NICHT IM BILD
   ══════════════════════════════════════════════════════════════════════════
   Betreiber: „das fenster drumrum soll nicht da sein".

   Sie stehen AM ENDE der Datei, nicht oben beim Dialog. Der erste Versuch
   setzte sie direkt hinter `.ka-dialog` — und verlor: die urspruenglichen
   Regeln fuer `.ka-hilfe` und `.ka-leiste` stehen weiter unten, und bei
   gleicher Spezifitaet gewinnt die spaetere. Gemessen war die Leiste danach
   immer noch 268 px breit.

   Weggeworfen werden sie NICHT: sie sind der einzige Weg fuer Tastatur und
   Vorlesewerkzeug. Sobald der Fokus auf einem Knopf landet, taucht die
   Leiste wieder auf — wer mit der Tastatur hinkommt, muss sehen, wo er ist.
   ══════════════════════════════════════════════════════════════════════════ */
.ka .ka-hilfe,
.ka .ka-leiste {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ka .ka-leiste:focus-within {
  position: static;
  inline-size: auto;
  block-size: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  padding: 8px;
  border-radius: 12px;
  background: rgba(10, 14, 22, .86);
}

/* Die Karte sagt selbst, dass man sie anfassen darf. */
.ka .ka-buehne { cursor: pointer; }