/* ── Map-Control-Knöpfe (gemeinsame Optik: blau = inaktiv · orange = .is-active) ──
   Eine Quelle für ALLE Karten der Seite. Trifft absichtlich auch die bestehenden
   Knopf-Klassen (.ap-map-controls .map-btn auf der Landing, .arw-ctrls .arw-btn
   auf den Flughafen-Unterseiten), damit weder Markup noch JS angefasst werden
   müssen. MUSS nach pages/airport.css geladen werden, damit die Vereinheitlichung
   die alten seitenspezifischen Regeln überschreibt.
   Die Position (Detail: links · Landing: rechts) bleibt bewusst unangetastet —
   vereinheitlicht wird nur das Aussehen der Knöpfe. */

.mapctrl {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  display: flex; flex-direction: column; gap: 6px;
}

.mapctrl-btn,
.ap-map-controls .map-btn,
.arw-ctrls .arw-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 10px; cursor: pointer; color: #fff; position: relative;
  background: linear-gradient(180deg, rgba(19,145,176,.88), rgba(14,98,136,.93), rgba(10,65,93,.98));
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
          backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  /* Filter/opacity im Übergang lassen: die alten Knöpfe nutzten sie für Hover/Zustände */
  transition: background 180ms cubic-bezier(.2,.8,.2,1), transform 180ms cubic-bezier(.2,.8,.2,1),
              box-shadow 180ms cubic-bezier(.2,.8,.2,1);
}

.mapctrl-btn:hover,
.ap-map-controls .map-btn:hover,
.arw-ctrls .arw-btn:hover {
  background: linear-gradient(180deg, rgba(45,170,205,.90), rgba(22,120,158,.94), rgba(14,84,116,.98));
  transform: translateY(-1px); filter: none; border-color: transparent;
}

.mapctrl-btn:focus-visible,
.ap-map-controls .map-btn:focus-visible,
.arw-ctrls .arw-btn:focus-visible { outline: 2px solid rgba(244,169,50,.55); outline-offset: 2px; }

.mapctrl-btn svg,
.ap-map-controls .map-btn svg,
.arw-ctrls .arw-btn svg { width: 20px; height: 20px; stroke-width: 1.9; }

/* AN / aktiv: Orange mit Verlauf + 3D-Optik, Icon weiß mit Schatten.
   Höhere Spezifität als die alten *.is-active-Regeln (die cyan/blau setzten),
   damit hier durchgängig Orange gewinnt. */
.mapctrl-btn.is-active,
.ap-map-controls .map-btn.is-active,
.arw-ctrls .arw-btn.is-active {
  background: linear-gradient(180deg, #f8b84f 0%, #ef9410 100%);
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(150,75,0,.42);
}
.mapctrl-btn.is-active svg,
.ap-map-controls .map-btn.is-active svg,
.arw-ctrls .arw-btn.is-active svg { filter: drop-shadow(0 1px 2px rgba(60,30,0,.7)); }
.mapctrl-btn.is-active:hover,
.ap-map-controls .map-btn.is-active:hover,
.arw-ctrls .arw-btn.is-active:hover { filter: brightness(1.05); }

/* Text-Knopf (2D / 3D) — Schriftbild vereinheitlicht */
.mapctrl-txt,
.ap-map-controls .map-btn--text .map-btn-text {
  font-family: "Avenir Next","Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-weight: 600; font-size: 14px; letter-spacing: .04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Kompassnadel (Flughafen-Detailseite) auf die neue Knopfgröße bringen — die
   alte HUD-Nadel war 26px und sprengte den 40px-Knopf. Farbe/Drehung bleiben. */
.arw-ctrls .arw-compass-needle,
.arw-ctrls .arw-compass-needle svg { width: 20px; height: 20px; }