/* 20 Jahre MLB – Weltkartenanimation, Fassung ohne iframe.
   Alle Regeln sind auf #mlb-test eingeschränkt, damit nichts auf die
   umgebende Seite wirkt. Insbesondere gibt es hier keine Regeln auf
   body, button, input oder label. */

/* Dreistufiges Layout: je Breite ein Seitenverhältnis UND ein Kartenanteil.
   Auf dem Desktop liegt die Typografie über der Karte – im Pazifik ist Platz.
   Auf schmalen Formaten bekommt sie ein eigenes Band darunter, sonst stünde die
   Jahreszahl mitten auf Südamerika. Die Karte wird dabei nie beschnitten, alle
   105 Länder müssen sichtbar bleiben – das ist die Kernaussage.

   Übernommen aus Prototyp A (dort LAYOUT-Tabelle); beim Umbau auf
   containergesteuerte Größe war die Logik verlorengegangen.

   Die Stufenwerte sind am 26.08.2026 nachgeschärft worden: Das Kartenfenster
   war auf schmalen Breiten ein flacher Streifen (2,26 : 1). Die Kugel wird von
   der Fensterhöhe begrenzt, also blieb links und rechts Platz ungenutzt und sie
   wirkte klein. Jetzt ist das Fenster dort deutlich quadratischer (1,5 : 1),
   die Kugel wird entsprechend größer. Preis: Das flache Schlussbild füllt die
   Höhe nicht mehr ganz aus – dafür wird es auch nicht mehr oben und unten
   beschnitten.

   --mlb-kartenanteil ist die einzige Quelle für den Kartenanteil:
   karte-init.js liest den Wert aus und richtet Zeichenpuffer und
   Kameraverhältnis danach. Nicht in JavaScript verdoppeln. */
#mlb-test{--mlb-merlot:#921925;--mlb-text:#4c4c4c;--mlb-kartenanteil:100%;
          position:relative;width:100%;aspect-ratio:2.35;overflow:hidden;background:#fff;
          font:400 15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
          color:var(--mlb-text)}
@media (max-width:899px){ #mlb-test{aspect-ratio:1.55;--mlb-kartenanteil:78%} }
@media (max-width:559px){ #mlb-test{aspect-ratio:1;--mlb-kartenanteil:66%} }

/* Ausweichlösung für Browser ohne aspect-ratio (Safari vor 15) */
@supports not (aspect-ratio:1/1){
  #mlb-test{height:0;padding-top:42.55%}
  #mlb-test>*{position:absolute}
}

#mlb-test *{box-sizing:border-box}
#mlb-test canvas{display:block;position:absolute;top:0;left:0;
    width:100%!important;height:var(--mlb-kartenanteil)!important}

#mlb-test .mlb-ueberlagerung{position:absolute;inset:0;pointer-events:none;display:flex;
    flex-direction:column;justify-content:flex-end;padding:clamp(16px,3.2vw,44px)}
#mlb-test .mlb-ueberlagerung::before{content:'';position:absolute;inset:auto 0 0 0;height:34%;
    background:linear-gradient(to top,rgba(255,255,255,.90) 0%,rgba(255,255,255,.50) 46%,
    rgba(255,255,255,0) 100%);pointer-events:none}
#mlb-test .mlb-ueberlagerung>*{position:relative}
#mlb-test .mlb-jahr{font-variant-numeric:tabular-nums;font-weight:600;color:var(--mlb-merlot);
    font-size:clamp(34px,6.4vw,88px);line-height:.94;margin:0}
#mlb-test .mlb-zeile{font-size:clamp(12px,1.5vw,18px);margin-top:.3em}
#mlb-test .mlb-zahl{font-variant-numeric:tabular-nums;font-weight:600;color:#222}
#mlb-test .mlb-kapitel{position:absolute;top:clamp(14px,2.6vw,32px);left:clamp(16px,3.2vw,44px);
    font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#a9a29b}

/* ---------------------------------------------------------- SCHLUSSLEISTE
   Erscheint erst, wenn der Durchlauf zu Ende ist: Hinweis auf das freie
   Drehen und der Neustart. Anders als das Testpult gehört sie zur
   Schaufassung und ist live sichtbar. Die Überlagerung selbst nimmt keine
   Mausereignisse an, damit sie die Karte nicht abfängt – hier wird das
   ausdrücklich zurückgenommen, sonst sind die Schaltflächen tot. */
#mlb-test .mlb-schluss{margin-top:.9em;pointer-events:auto;max-width:34em}
#mlb-test .mlb-schluss[hidden]{display:none}
/* padding und text-align ausdrücklich zurückgesetzt: Das <p> ist das einzige
   Element der Fassung, das eine Seitenregel wie p{padding:0 24px} treffen
   kann – auf der Prüfseite ist genau das passiert. */
#mlb-test .mlb-schluss-text{margin:0 0 .5em;padding:0;text-align:left;text-indent:0;
    font-size:clamp(12px,1.35vw,15px);line-height:1.45;color:#6d6862}
#mlb-test .mlb-schluss-knoepfe{display:flex;gap:8px;flex-wrap:wrap}
#mlb-test .mlb-schluss button{font:inherit;font-size:clamp(12px,1.3vw,14px);
    padding:7px 14px;border:1px solid var(--mlb-merlot);border-radius:3px;
    background:#fff;color:var(--mlb-merlot);cursor:pointer;
    margin:0;width:auto;min-width:0;line-height:normal;
    text-transform:none;letter-spacing:normal}
#mlb-test .mlb-schluss button:hover{background:var(--mlb-merlot);color:#fff}
#mlb-test .mlb-schluss button:focus-visible{outline:2px solid var(--mlb-merlot);outline-offset:2px}

/* Der Greifzeiger sagt vor dem ersten Versuch, dass die Kugel anfassbar ist. */
#mlb-test.mlb-dreht{cursor:grab;touch-action:none}
#mlb-test.mlb-dreht.mlb-greift{cursor:grabbing}
#mlb-test.mlb-dreht:focus-visible{outline:2px solid var(--mlb-merlot);outline-offset:-2px}

/* Schmale Formate: Die Typografie sitzt im Band unter der Karte. Dort steht
   kein Kartenbild dahinter, also entfällt auch der Lesbarkeitsverlauf. */
@media (max-width:899px){
  #mlb-test .mlb-ueberlagerung{top:var(--mlb-kartenanteil);justify-content:center}
  #mlb-test .mlb-ueberlagerung::before{display:none}
}

/* Die Schaufassung ist der Auslieferungszustand und deshalb die Vorgabe im
   Stylesheet – nicht etwas, das ein Skript erst herstellt. Bedienung,
   Kapitelmarke und die technische Fehlermeldung sind von Anfang an aus; der
   Test schaltet sie über ?mlbtest ausdrücklich ein.

   Andersherum ginge es auch, war aber falsch: Bis das Skript geladen war,
   blitzte das Testpult kurz auf, weil es im Markup steht und die Seite es
   zeichnet, sobald dieses Stylesheet da ist. Auf der Zielseite gemessen. */
#mlb-test .mlb-pult,
#mlb-test .mlb-kapitel{display:none}
/* Nur ausserhalb des Testmodus hart ausblenden: scheitern() blendet die Box
   per Inline-Stil ein, und ein !important in der Grundregel wuerde das auch im
   Test unterdruecken. */
#mlb-test:not(.mlb-pruefmodus) .mlb-fehler{display:none!important}

#mlb-test.mlb-pruefmodus .mlb-pult{display:block}
#mlb-test.mlb-pruefmodus .mlb-kapitel{display:block}
#mlb-test.mlb-pruefmodus .mlb-pult.mlb-aus{display:none}

/* Testpult – entfällt in der Produktionsfassung ersatzlos */
#mlb-test .mlb-pult{position:absolute;top:10px;right:10px;z-index:5;
    background:rgba(255,255,255,.92);border:1px solid #e2ded8;border-radius:4px;
    padding:8px 10px;font-size:12px;max-width:min(300px,58vw);
    box-shadow:0 1px 4px rgba(0,0,0,.10)}
#mlb-test .mlb-reihe{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
#mlb-test .mlb-pult button{font:inherit;padding:4px 9px;border:1px solid #ccc;background:#fff;
    border-radius:3px;cursor:pointer;color:var(--mlb-text);margin:0;text-transform:none;
    letter-spacing:normal;width:auto;min-width:0;line-height:normal}
#mlb-test .mlb-pult input[type=range]{width:100%;margin:7px 0 0;padding:0;height:auto}
#mlb-test .mlb-fps{font-variant-numeric:tabular-nums;font-weight:600;color:#222;margin-left:auto}
#mlb-test .mlb-pult details{margin-top:6px}
#mlb-test .mlb-pult summary{cursor:pointer;color:#777;font-size:11.5px}
#mlb-test .mlb-werte{margin-top:5px;font-size:11.5px;color:#666;line-height:1.45}
#mlb-test .mlb-werte b{color:#222;font-weight:600}
#mlb-test .mlb-pult.mlb-aus{display:none}

#mlb-test .mlb-fehler{position:absolute;inset:auto 12px 12px;z-index:6;background:#fff4f4;
    border:1px solid #f0c9c9;padding:10px 12px;font-size:12.5px;color:#7a1a24;display:none}

/* Fallback ohne WebGL: dasselbe Texturcanvas, flach */
#mlb-test .mlb-flach{position:absolute;inset:0 0 auto 0;height:var(--mlb-kartenanteil);
    display:none;align-items:center;
    justify-content:center;background:#fff}
#mlb-test .mlb-flach canvas{width:100%;height:auto!important;max-height:100%;display:block}
#mlb-test.mlb-ohne-webgl .mlb-flach{display:flex}