/* ══════════════════════════════════════════════════════════
   „Entdecken" — Europa-Karte (js/explore-map.js, seit 02.10.2026)
   Tinte & Elfenbein (DESIGN.md v2): Hauptaktion .btn-ink, Glas-Chips,
   Grün nur als Signal (Zielkreis), keine farbigen Flächen.
   ══════════════════════════════════════════════════════════ */
#view-explore {
  position: fixed; inset: 0; z-index: 35; overflow: hidden;
  background: var(--ivory); color: var(--ink); font-family: 'Inter', sans-serif;
}
#view-explore[hidden] { display: none; }
@media (max-width: 1023px) {
  /* Platz für die Tab-Leiste (css/style.css .tabbar: 10 + 52 + max(18 px, Safe Area)) */
  #view-explore { bottom: calc(62px + max(18px, var(--sai-bottom, 0px))); }
}
/* Desktop: Platz für die Sidebar kommt von .view { margin-left: 180px } (style.css) */
/* maplibre-gl.css lädt nach dieser Datei und setzt .maplibregl-map { position: relative }
   — ohne den doppelten Selektor wäre die Karte 0 px hoch (wie bei .nav3d) */
.xe__map, .xe__map.maplibregl-map { position: absolute; inset: 0; transition: opacity .35s ease; }

/* Quellenangabe der Karte (© OpenStreetMap · OpenFreeMap, Gelände von Mapterhorn, „Powered by Geoapify" — Pflicht im
   Free-Tarif): links UNTER dem Titel, ausgeschrieben (explore-map.js: AttributionControl, compact: false, 'top-left').
   Unten läge sie unter etwas: dem Erstellen-Knopf der Tab-Leiste (ragt ~16 px in die Ansicht), rechts dem Nächstes-Ziel-
   Chip, in der Mitte der Stadtkarte. Der Titel bricht bei 320 px auf zwei Zeilen um — explore-map.js misst seine
   Unterkante (watchCreditTop → --xe-credit-top); 72 px gelten bis zur ersten Messung. maplibre-gl.css lädt nach dieser
   Datei und gewänne bei gleicher Spezifität, deshalb steht #view-explore vorn. z-index 7: über Kopf (5) und Stadtkarte
   (6), falls beide je zusammenträfen. Schrift wie die Zeile im Rundflug (10 px / 500, Tinte zu 68 %, Links
   unterstrichen), dazu ein Elfenbein-Grund: über Wald, Schummerung und Gletscher bleibt sie ≥ 4,5 : 1 lesbar.
   Gate: tests/geoapify-attribution-source.test.js, Browser-Prüfung: npm run check:attribution -- --only=explore */
#view-explore .xe__map .maplibregl-ctrl-top-left { top: var(--xe-credit-top, 72px); left: 11px; right: 16px; z-index: 7; }
#view-explore .xe__map .maplibregl-ctrl-top-left .maplibregl-ctrl-attrib {
  margin: 0; padding: 1px 5px; border-radius: 6px; background: rgba(250, 249, 245, .86);
  font: 500 10px/1.45 'Inter', sans-serif; color: rgba(27, 28, 26, .68);
}
#view-explore .xe__map .maplibregl-ctrl-top-left .maplibregl-ctrl-attrib a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Kopf — ein leichter Elfenbein-Verlauf darunter hält den Titel über Wahrzeichen lesbar */
#view-explore::before {
  content: ""; position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: calc(104px + var(--sai-top, 0px));
  pointer-events: none; background: linear-gradient(rgba(250, 249, 245, .92), rgba(250, 249, 245, .6) 55%, rgba(250, 249, 245, 0));
}
.xe--list::before { display: none; }
.xe__head {
  position: absolute; z-index: 5; left: 16px; right: 16px; top: calc(14px + var(--sai-top, 0px));
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; pointer-events: none;
}
.xe__head .eyebrow-ink { margin: 0; }
.xe__title { margin: 4px 0 0; font-size: 32px; line-height: .95; text-shadow: 0 1px 12px rgba(250, 249, 245, .95), 0 0 2px rgba(250, 249, 245, .9); }
.xe__goal {
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 1px 2px rgba(27, 28, 26, .06), 0 6px 16px rgba(27, 28, 26, .10);
}
.xe__count::before { content: ' · '; }
.xe__slot { display: flex; align-items: center; pointer-events: auto; }
.xe__count[hidden] { display: none; }

/* Zielkreis — liegt eine Stadt darin, wird er grün (Signal) */
.xe__ring {
  position: absolute; z-index: 3; left: 50%; top: 50%; width: 78px; height: 30px; margin: -15px 0 0 -39px;
  border-radius: 50%; border: 1.5px dashed rgba(27, 28, 26, .45); pointer-events: none;
  transition: border-color .25s ease, transform .25s ease;
}
.xe--near .xe__ring { border-style: solid; border-color: var(--signal); transform: scale(1.08); }

.xe__hint {
  position: absolute; z-index: 4; left: 50%; top: calc(50% + 30px); transform: translateX(-50%); margin: 0;
  padding: 8px 14px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: rgba(27, 28, 26, .8); color: var(--night-ink); font: 500 13px/1.3 'Inter', sans-serif;
}
.xe__hint[hidden] { display: none; }
/* liegt schon eine Stadt im Kreis (Karte offen), ist der Hinweis überflüssig — er bleibt aber „ungesehen" */
.xe--sheet .xe__hint { display: none; }

/* Nächstes Ziel */
.xe__goal { position: absolute; z-index: 5; right: 14px; bottom: 16px; display: flex; gap: 10px; align-items: center; padding: 7px 14px 7px 8px; border-radius: 999px; }
.xe__goal[hidden], .xe--sheet .xe__goal { display: none; }
.xe__goal-arrow { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; transition: transform .2s ease; }
.xe__goal-arrow svg { width: 14px; height: 14px; }
.xe__goal-label { display: block; font: 600 9.5px 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.xe__goal b { display: block; font: 400 17px/1.1 'Bebas Neue', sans-serif; letter-spacing: .04em; color: var(--ink); }

/* Stadtkarte */
.xe__sheet {
  position: absolute; z-index: 6; left: 12px; right: 12px; bottom: 12px; max-width: 440px; margin: 0 auto;
  padding: 16px 18px 18px; border-radius: 28px; background: var(--paper); box-shadow: var(--float);
  transform: translateY(calc(100% + 32px)); transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.xe__sheet.is-open { transform: none; }
.xe__sheet-row { display: flex; gap: 14px; align-items: center; }
.xe__sheet-icon { flex: none; width: 52px; height: 64px; color: var(--ink); display: grid; place-items: center; }
.xe__sheet-icon svg { width: 100%; height: 100%; }
.xe__sheet-icon svg .cut, .xe__list-icon svg .cut { fill: var(--paper); }
.xe-sheet__dot { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--ivory-3); }
.xe__sheet .eyebrow-ink { margin: 0; }
.xe__sheet-name { margin: 3px 0 0; font: 400 32px/1 'Bebas Neue', sans-serif; letter-spacing: .02em; }
.xe__sheet-meta { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.xe__sheet .btn-ink { width: 100%; margin-top: 14px; }

/* Marker: nicht antippbar — man fliegt hin (Nutzerentscheid 02.10.2026) */
.xe-mk { pointer-events: none !important; }
.xe-mk__lm { position: relative; width: 40px; height: 50px; transform: scale(var(--xe-s, 1)); transform-origin: 50% 100%; }
.xe-mk__lm svg { display: block; width: 40px; height: 50px; color: var(--ink); overflow: visible;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 3px 4px rgba(27, 28, 26, .35)); }
.xe-mk__lm svg .cut { fill: var(--ivory); }
.xe-mk__gnd { position: absolute; left: 6px; right: 6px; bottom: -4px; height: 8px; border-radius: 50%; background: radial-gradient(rgba(27, 28, 26, .35), transparent 70%); }
.xe-mk__name {
  position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); white-space: nowrap;
  padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .95); box-shadow: 0 2px 6px rgba(27, 28, 26, .15);
  font: 400 15px/1.2 'Bebas Neue', sans-serif; letter-spacing: .06em; color: var(--ink);
}
.xe-mk.is-here .xe-mk__name { background: var(--ink); color: var(--paper); }
.xe-mk--de { width: 10px; height: 10px; }
.xe-mk__dot { display: block; box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(27, 28, 26, .4); }
.xe-mk__label { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  font: 600 11px 'Inter', sans-serif; color: var(--ink-2); text-shadow: 0 0 3px #fff, 0 0 6px #fff; }
.xe-mk--de.is-here .xe-mk__dot { box-shadow: 0 0 0 4px rgba(27, 28, 26, .18); }
.xe-mk--de.is-here .xe-mk__label { color: var(--ink); font-weight: 700; }
.xe--far .xe-mk__label { display: none; }

/* Übergabe an den Rundflug (js/explore-map.js handoff): Die App zeigt schon die
   Vorschau (showView setzt hidden), die Karte bleibt trotzdem stehen — über deren
   Bühne (#preview-3d-stage, z 60), unter dem Rundflug (9450), auf dem ganzen
   Bildschirm (wie er: Tab-Leiste und Sidebar liegen darunter). Gesten aus, die
   Kamera gehört der Übergabe; Kopf, Kreis, Ziel und Wahrzeichen blenden aus. */
#view-explore.xe--handoff { z-index: 80; inset: 0; margin-left: 0; }
#view-explore.xe--handoff[hidden] { display: block !important; }
.xe--handoff .xe__map, .xe--handoff .xe__slot { pointer-events: none; }
.xe--handoff::before, .xe--handoff .xe__head, .xe--handoff .xe__ring, .xe--handoff .xe__goal,
.xe--handoff .xe__hint, .xe--handoff .xe-mk { opacity: 0; transition: opacity .45s ease; }
/* Rundflug kommt nicht: Karte weg, darunter zeigt die App ihre Bühne */
.xe--handoff-out .xe__map, .xe--handoff-out .xe__board { opacity: 0; transition: opacity .4s ease; }

/* Ladeanzeige der Übergabe — Glas über der Karte, Fortschritt grün (Signal) */
.xe__board {
  position: absolute; z-index: 6; left: 50%; bottom: max(28px, calc(var(--sai-bottom, 0px) + 18px));
  width: min(300px, calc(100% - 48px)); padding: 12px 18px 14px; border-radius: 22px;
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: var(--float); pointer-events: none;
  opacity: 0; transform: translate(-50%, 12px); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.xe__board.is-in { opacity: 1; transform: translate(-50%, 0); }
.xe__board[hidden] { display: none; }
.xe__board-text { display: block; text-align: center; font: 600 13.5px/1.35 'Inter', sans-serif; color: var(--ink); }
.xe__board-bar { display: block; height: 3px; margin-top: 10px; border-radius: 2px; background: rgba(27, 28, 26, .1); overflow: hidden; }
/* Übergänge setzt js/explore-map.js (boardPhase) — auf dem Compositor, also flüssig,
   auch wenn der Aufbau des Rundflugs den Browser kurz anhält */
.xe__board-bar i { display: block; height: 100%; background: var(--signal); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }

/* Liste: ohne Karte sichtbar, sonst nur für Screenreader (und bei Tastaturfokus) */
.xe__list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.xe--list .xe__list, .xe__list:focus-within {
  z-index: 7; left: 0; right: 0; bottom: 0; top: calc(92px + var(--sai-top, 0px)); width: auto; height: auto;
  clip: auto; clip-path: none; white-space: normal; overflow: auto; padding: 4px 16px 24px; background: var(--ivory);
}
.xe--list .xe__ring, .xe--list .xe__map, .xe--list .xe__goal, .xe--list .xe__hint, .xe--list .xe__sheet { display: none; }
.xe__list-note { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-3); }
.xe__list-note:empty { display: none; }
.xe__list ul { list-style: none; margin: 0; padding: 0; }
.xe__list-btn { display: flex; width: 100%; gap: 14px; align-items: center; padding: 12px 2px; border: 0; border-bottom: 1px solid var(--hair);
  background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.xe__list-btn[disabled] { opacity: .55; }
.xe__list-icon { flex: none; width: 34px; height: 42px; color: var(--ink); display: grid; place-items: center; }
.xe__list-icon svg { width: 100%; height: 100%; }
.xe__list-text b { display: block; font: 400 22px/1 'Bebas Neue', sans-serif; letter-spacing: .03em; }
.xe__list-text small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .xe__sheet, .xe__ring, .xe__map, .xe__goal-arrow { transition: none; }
}