/* ═══ MOBILE ══════════════════════════════════════════════════════════════════════
   Alles Handy-Spezifische steht hier, zuletzt geladen. Kein zweiter Ordner, keine
   zweite Kopie der Seite — dieselben Dateien, nur eine Media Query.

   Problem: die Europa-Silhouette füllt nur ~70,5 % ihrer eigenen Box (gemessen), das
   ist auf einem breiten Bildschirm die gewollte Komposition, kostet auf 375 px aber
   14,8 % / 14,7 % toten Rand links und rechts — die Krone wirkt winzig.

   Lösung in zwei Teilen:
   1) hier: die Stage wird höher (1200/890 statt 1200/680), damit die vergrößerte
      Krone vertikal überhaupt hineinpasst und oben nicht abgeschnitten wird;
   2) tree.js crownFill(): skaliert die Projektion um 1,30 — GLEICHMÄSSIG, die
      Proportionen der Krone bleiben also exakt wie am Desktop.
   Ergebnis: ~92 % Breite, ~4 % Rand auf jeder Seite.                              */
@media (max-width:640px){
  .canvas-stage{ aspect-ratio:1200/890; }

  /* Die Stage wird 65 px höher, die Krone selbst wächst nach unten aber nur ~51 px.
     Ohne Korrektur würde das Menü vom Kronenrand abrutschen — es hängt bewusst in
     der Krone. Darum 5 vw mehr Zug nach oben. */
  .tree-wrap{ margin-top:-19vw; }
}