/* Versteckte Elemente wirklich verstecken (früher von der Artefakt-Umgebung erledigt) */
[hidden]:not([hidden=until-found i]) { display: none !important; }

/* Layout: eine Vollbild-Himmelskarte; alle Bedienelemente schweben als dünne Glasschichten
   an den Rändern, damit das Bild die Hauptsache bleibt. Bewusst nur dunkel. */
:root {
  --void: #020308;
  --ink: #efe8da;
  --ink-dim: #a3a7b8;
  --ink-faint: rgba(239, 232, 218, .55);
  --line: rgba(239, 232, 218, .13);
  --glass: rgba(6, 8, 18, .66);
  --glass-strong: rgba(6, 8, 18, .86);
  --accent: #f2cf95;
  --accent-ink: #1a1206;
  --f-display: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --f-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --panel-w: min(460px, max(380px, 34vw));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; background: var(--void); color: var(--ink);
  font: 400 15px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 3px; }
em { font-style: italic; }

#sky { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
body.is-dragging #sky { cursor: grabbing; }
body.is-pointer #sky { cursor: pointer; }

/* ---------- Laden ---------- */
#loader {
  position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px;
  background: var(--void); z-index: 50; transition: opacity 1s ease, visibility 1s;
}
#loader p { margin: 0; font: italic 400 1.05rem var(--f-display); color: var(--ink-dim); letter-spacing: .01em; }
.ld-dot { width: 6px; height: 6px; border-radius: 50%; background: #9cc2ff; box-shadow: 0 0 18px 4px rgba(120, 170, 255, .6); animation: ld 2.4s ease-in-out infinite; }
@keyframes ld { 50% { transform: scale(1.8); opacity: .55; } }
body:not(.is-loading) #loader { opacity: 0; visibility: hidden; }

/* ---------- Kopfzeile ---------- */
.bar {
  position: fixed; z-index: 20; top: 0; left: 0; right: 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) var(--gutter) 0;
  pointer-events: none; transition: opacity .8s ease;
}
.bar > * { pointer-events: auto; }
.mark { display: grid; gap: 3px; text-decoration: none; color: var(--ink); min-width: 0; }
.mark-name { font: italic 500 1.7rem/1 var(--f-display); letter-spacing: -.01em; }
.mark-sub { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.tool {
  appearance: none; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 999px; padding: 7px 14px; font-size: .82rem; letter-spacing: .01em; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; transition: border-color .25s, background .25s, color .25s;
}
.tool:hover { border-color: rgba(242, 207, 149, .5); }
.tool-sky { border-color: rgba(242, 207, 149, .45); color: var(--accent); }
.tool-quiet { color: var(--ink-dim); }
.tool-toggle[aria-pressed="false"] { color: var(--ink-dim); }
.tool-toggle[aria-pressed="true"] { border-color: rgba(242, 207, 149, .5); }
body.is-sky .tool-sky { background: var(--accent); color: var(--accent-ink); }
.snd { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.snd i { width: 2px; height: 4px; background: currentColor; border-radius: 1px; }
.tool[aria-pressed="true"] .snd i { animation: snd 1.2s ease-in-out infinite; }
.tool[aria-pressed="true"] .snd i:nth-child(2) { animation-delay: .2s; }
.tool[aria-pressed="true"] .snd i:nth-child(3) { animation-delay: .4s; }
@keyframes snd { 50% { height: 11px; } }

/* ---------- Hotspots ---------- */
#hotspots, #labels { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.hs {
  --p: 0;
  position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none;
  pointer-events: none; will-change: transform, opacity;
}
.hs-dot {
  position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 8px 1px var(--c); opacity: .55; transition: opacity .3s, transform .3s;
}
.hs-ring {
  position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--c); opacity: calc(.12 + var(--p) * .75);
  transform: scale(calc(.55 + var(--p) * .7)); transition: border-width .25s;
}
.hs-halo {
  position: absolute; left: -34px; top: -34px; width: 68px; height: 68px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 30%, transparent), transparent 62%);
  opacity: calc(var(--p) * .8);
}
.hs.is-hot .hs-dot, .hs.is-sel .hs-dot { opacity: 1; transform: scale(1.3); }
.hs.is-hot .hs-ring { animation: ring 1.6s ease-out infinite; opacity: 1; border-width: 1.5px; }
@keyframes ring { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }
.hs.is-sel .hs-ring { opacity: .9; transform: scale(1.25); }
.hs-label {
  position: absolute; left: 20px; top: -14px; width: max-content; max-width: 250px;
  display: grid; gap: 1px; padding: 8px 12px 9px; border-radius: 10px;
  background: var(--glass-strong); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: clamp(0, calc((var(--p) - .4) * 2.4), 1);
  transform: translateX(calc((1 - var(--p)) * -6px)); transition: opacity .15s;
}
.hs-label small { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.hs-label b { font: 500 1.02rem/1.25 var(--f-display); }
.hs-label span, .hs-label em { display: none; }
.hs.is-hot .hs-label { opacity: 1; }
.hs.is-sel:not(.is-hot) .hs-label { opacity: 0; }
.hs.is-hot .hs-label span { display: block; font-size: .78rem; line-height: 1.4; color: var(--ink-dim); margin-top: 3px; }
.hs.is-hot .hs-label em { display: block; font-style: normal; font-size: .7rem; letter-spacing: .06em; color: var(--c); margin-top: 6px; }
.hs.is-hot .hs-label em::after { content: ' →'; }
.hs.flip .hs-label { left: auto; right: 20px; }
body.is-intro .hs, body.is-intro #tip { display: none; }

.tip { position: fixed; left: 0; top: 0; z-index: 6; pointer-events: none; }
.tip-ring { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255, 230, 176, .8); animation: ring 1.6s ease-out infinite; }
.tip-label {
  position: absolute; left: 16px; top: -12px; width: max-content; max-width: 260px; padding: 6px 10px; border-radius: 8px;
  background: var(--glass-strong); border: 1px solid var(--line); display: grid; gap: 1px;
}
.tip-label b { font: 500 .95rem var(--f-display); }
.tip-label span { font-size: .72rem; color: var(--ink-dim); }
.tip.flip .tip-label { left: auto; right: 16px; }

#labels .con {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; white-space: nowrap;
  font: italic 400 .8rem var(--f-display); color: rgba(160, 190, 255, .55); translate: -50% -50%;
}
#labels .cmp {
  position: absolute; left: 0; top: 0; white-space: nowrap; translate: -50% -130%;
  font: 500 .78rem var(--f-mono); letter-spacing: .1em; color: rgba(242, 207, 149, .75);
}

.here { position: fixed; left: 0; top: 0; z-index: 7; pointer-events: none; }
.here-ring { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #9cc2ff; box-shadow: 0 0 12px #6fa4ff; }
.here-ring::after { content: ''; position: absolute; inset: -1.5px; border-radius: 50%; border: 1px solid #9cc2ff; animation: ring 2.4s ease-out infinite; }
.here-label {
  position: absolute; left: 14px; top: 10px; white-space: nowrap; font: 500 .66rem var(--f-mono); letter-spacing: .18em; text-transform: uppercase;
  color: #b9d3ff; text-shadow: 0 0 8px #000;
}
.here-label::before { content: ''; position: absolute; left: -9px; top: -6px; width: 8px; height: 8px; border-left: 1px solid #9cc2ff; border-bottom: 1px solid #9cc2ff; opacity: .6; }

/* ---------- Bildunterschrift (Meilensteine) ---------- */
.caption {
  position: fixed; z-index: 8; left: 50%; bottom: calc(max(128px, 17vh) + env(safe-area-inset-bottom, 0px)); translate: -50% 0;
  width: min(760px, calc(100% - 32px)); margin: 0; text-align: center; pointer-events: none;
  font: 400 clamp(1.15rem, 2.4vw, 1.7rem)/1.35 var(--f-display); color: var(--ink); text-wrap: balance;
  text-shadow: 0 0 30px rgba(0, 0, 0, .9), 0 0 6px rgba(0, 0, 0, .8);
  opacity: 0; transform: translateY(8px); transition: opacity 1.1s ease, transform 1.1s ease;
}
.caption em { color: var(--accent); }
.caption.show { opacity: 1; transform: none; }
body.panel-open .caption { left: calc((100% - var(--panel-w)) / 2); }

/* ---------- Anzeigen unten links ---------- */
.hud {
  position: fixed; z-index: 10; left: var(--gutter); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: grid; gap: 6px; max-width: min(420px, calc(100% - 32px)); transition: opacity .8s;
}
.hud-scale { display: flex; align-items: center; gap: 10px; font: 500 .8rem var(--f-mono); }
.h-bar { height: 7px; border: 1px solid var(--ink-faint); border-top: 0; transition: width .2s; min-width: 1px; }
.h-earth, .h-speed { margin: 0; font-size: .8rem; color: var(--ink-dim); }
.h-earth b, .h-speed b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.h-speed:empty { display: none; }
.h-home {
  justify-self: start; margin-top: 4px; display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 999px; padding: 6px 14px 6px 10px; font-size: .82rem; color: var(--ink-dim);
}
.h-home b { color: var(--ink); font-weight: 500; }
.h-dot { width: 8px; height: 8px; border-radius: 50%; background: #7fb4ff; box-shadow: 0 0 10px #7fb4ff; }

/* ---------- Größenleiter ---------- */
.ladder {
  position: fixed; z-index: 10; right: var(--gutter); top: 50%; translate: 0 -50%; height: min(58vh, 520px); width: 150px;
  transition: opacity .8s;
}
.lad-track { position: absolute; right: 3px; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, var(--line) 8%, var(--line) 92%, transparent); }
.lad-now { position: absolute; right: -4px; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); transition: top .25s ease; }
.ladder button {
  position: absolute; right: 0; top: var(--pos); translate: 0 -50%; display: grid; justify-items: end; gap: 0;
  border: 0; background: none; padding: 3px 16px 3px 6px; cursor: pointer; text-align: right; color: var(--ink-dim);
}
.ladder button::after { content: ''; position: absolute; right: 1px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--ink-faint); }
.ladder button span { font-size: .78rem; transition: color .2s; }
.ladder button small { font: .64rem var(--f-mono); opacity: .7; }
.ladder button:hover span { color: var(--ink); }

/* ---------- Blickwinkel ---------- */
.views {
  position: fixed; z-index: 11; left: 50%; translate: -50% 0; top: calc(78px + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: 999px;
  width: max-content; max-width: calc(100% - 32px); white-space: nowrap;
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity .6s;
}
.views.show { opacity: 1; pointer-events: auto; }
.views span { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); margin-right: 4px; }
.views button { border: 0; background: none; border-radius: 999px; padding: 5px 11px; font-size: .78rem; cursor: pointer; color: var(--ink-dim); }
.views button:hover { color: var(--ink); }
.views button[aria-pressed="true"] { background: rgba(242, 207, 149, .16); color: var(--accent); }
body.panel-open .views { left: calc((100% - var(--panel-w)) / 2); }
body.is-intro .views { display: none; }

/* ---------- Hinweise ---------- */
.hint {
  position: fixed; z-index: 9; right: var(--gutter); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); margin: 0;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 14px; max-width: 52vw;
  font-size: .74rem; color: var(--ink-dim); transition: opacity 1.2s; pointer-events: none;
}
.hint kbd { font: 500 .64rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; margin-right: 4px; color: var(--ink); }
.hint-glow { color: var(--accent); }
body.has-moved .hint { opacity: .35; }
body.panel-open .hint, body.is-sky .hint { opacity: 0; }

/* ---------- Nachthimmel ---------- */
.skybar {
  position: fixed; z-index: 12; left: 50%; translate: -50% 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px;
  width: max-content; max-width: calc(100% - 32px); padding: 10px 12px 10px 18px; border-radius: 16px;
  background: var(--glass-strong); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.sk-head { display: grid; gap: 0; }
.sk-head b { font: italic 500 1.05rem var(--f-display); }
.sk-head span { font: .72rem var(--f-mono); color: var(--ink-dim); }
.sk-field { display: grid; gap: 2px; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.sk-field select, .sk-field input { font: 400 .85rem var(--f-body); color: var(--ink); letter-spacing: 0; text-transform: none; }
.sk-field select { background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
.sk-range input { width: 160px; accent-color: var(--accent); }
body.is-sky .ladder, body.is-sky .hud .hud-scale .h-bar { opacity: 0; pointer-events: none; }
body.is-sky .hud { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
body.is-sky .caption { bottom: auto; top: calc(96px + env(safe-area-inset-top, 0px)); font-size: clamp(1rem, 1.9vw, 1.35rem); }

/* ---------- Infobereich ---------- */
.panel {
  position: fixed; z-index: 30; top: 0; right: 0; bottom: 0; width: var(--panel-w);
  display: grid; grid-template-rows: 1fr auto; background: linear-gradient(180deg, rgba(6, 8, 18, .9), rgba(4, 5, 12, .95));
  border-left: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transform: translateX(104%); transition: transform .6s cubic-bezier(.2, .8, .2, 1); --c: var(--accent);
}
.panel.open { transform: none; }
.icon-btn {
  appearance: none; border: 1px solid var(--line); background: var(--glass); width: 34px; height: 34px; border-radius: 50%;
  cursor: pointer; font-size: .85rem; color: var(--ink-dim); display: grid; place-items: center;
}
.icon-btn:hover { color: var(--ink); border-color: var(--ink-faint); }
#p-close { position: absolute; z-index: 2; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; }
.p-scroll { overflow-y: auto; padding: calc(28px + env(safe-area-inset-top, 0px)) 28px 32px; overscroll-behavior: contain; min-height: 0; scrollbar-width: thin; }
.p-cat { margin: 0 0 14px; display: flex; align-items: center; gap: 8px; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
.p-cat i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.panel h2 { margin: 0; font: 400 clamp(2rem, 3.4vw, 2.8rem)/1.02 var(--f-display); letter-spacing: -.015em; text-wrap: balance; padding-right: 36px; }
.p-kicker { margin: 8px 0 0; font: italic 400 1.1rem/1.35 var(--f-display); color: var(--ink-dim); }
.p-dist { margin: 26px 0 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.p-dist small, .panel h3 { display: block; font: 500 .66rem var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 6px; }
.p-dist div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.p-dist b { font: 400 2.6rem/1 var(--f-display); font-variant-numeric: lining-nums; color: var(--ink); }
.p-dist span { font-size: .9rem; color: var(--ink-dim); }
.p-dist b.p-dist-word { font-size: 1.9rem; font-style: italic; }
.p-light { margin: 16px 0 0; font-size: .88rem; line-height: 1.55; color: var(--ink-dim); padding-left: 14px; border-left: 1px solid var(--c); }
.p-text { margin-top: 22px; }
.p-text p { margin: 0 0 14px; font-size: .98rem; line-height: 1.65; }
.p-wow { margin: 24px 0 0; padding: 18px 18px 16px; border-radius: 14px; background: color-mix(in srgb, var(--c) 9%, transparent); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); }
.p-wow h3 { color: var(--c); }
.p-wow p { margin: 0; font: 400 1.2rem/1.42 var(--f-display); text-wrap: pretty; }
.p-cmp, .p-travel, .p-facts, .p-near { margin-top: 30px; }
.p-cmp svg { display: block; width: 100%; max-width: 300px; height: auto; margin: 4px auto 6px; overflow: visible; }
.p-cmp .svg-t { font: 11px var(--f-mono); fill: var(--ink-dim); }
.p-cmp p { margin: 0; font-size: .88rem; color: var(--ink-dim); }
.p-travel table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.p-travel th, .p-travel td { padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.p-travel th { text-align: left; font-weight: 500; }
.p-travel th small { display: block; font-weight: 400; font-size: .72rem; color: var(--ink-dim); }
.p-travel td { text-align: right; font: .84rem var(--f-mono); font-variant-numeric: tabular-nums; }
.p-facts dl { margin: 0; display: grid; }
.p-facts dl div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.p-facts dt { color: var(--ink-dim); font-size: .85rem; }
.p-facts dd { margin: 0; font-size: .88rem; text-align: right; }
.p-near div { display: flex; flex-wrap: wrap; gap: 6px; }
.p-near button {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: transparent; border-radius: 999px;
  padding: 5px 12px 5px 9px; font-size: .8rem; cursor: pointer; color: var(--ink);
}
.p-near button:hover { border-color: var(--c); }
.p-near button i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.p-more { display: inline-flex; gap: 6px; margin-top: 30px; color: var(--c); text-decoration: none; font-size: .88rem; border-bottom: 1px solid color-mix(in srgb, var(--c) 40%, transparent); padding-bottom: 2px; }
.p-nav { display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.p-nav button { appearance: none; border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 7px 14px; cursor: pointer; font-size: .82rem; }
.p-nav button:disabled { opacity: .3; cursor: default; }
#p-next { margin-left: auto; border-color: color-mix(in srgb, var(--c) 45%, transparent); color: var(--c); max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#p-count { font: .7rem var(--f-mono); color: var(--ink-dim); }

/* ---------- Atlas ---------- */
.atlas {
  position: fixed; z-index: 31; top: 0; left: 0; bottom: 0; width: min(400px, 100%);
  display: grid; grid-template-rows: auto auto 1fr; gap: 12px;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 20px 0; background: rgba(4, 5, 12, .94);
  border-right: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transform: translateX(-104%); transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.atlas.open { transform: none; }
.atlas header { display: flex; align-items: center; justify-content: space-between; }
.atlas h2 { margin: 0; font: italic 400 1.8rem var(--f-display); }
#atlas-q {
  width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04);
  color: var(--ink); font: 400 .92rem var(--f-body);
}
#atlas-q::placeholder { color: var(--ink-dim); }
.atlas-list { overflow-y: auto; padding-bottom: 30px; min-height: 0; scrollbar-width: thin; }
.atlas-list section { margin-top: 18px; }
.atlas-list h3 { margin: 0 0 6px; font: 500 .66rem var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); }
.atlas-list button {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 8px 8px; border-radius: 8px; min-width: 0;
}
.atlas-list button:hover, .atlas-list button:focus-visible { background: rgba(255, 255, 255, .05); }
.atlas-list button i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.atlas-list button span { display: grid; min-width: 0; }
.atlas-list b { font: 500 .98rem var(--f-display); }
.atlas-list small { font-size: .74rem; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atlas-more, .atlas-empty { font-size: .78rem; color: var(--ink-dim); margin: 10px 8px; }

/* ---------- Intro ---------- */
.intro { position: fixed; inset: 0; z-index: 25; pointer-events: none; display: none; }
body.is-intro .intro { display: block; }
body.is-intro .bar, body.is-intro .hud, body.is-intro .ladder, body.is-intro .hint { opacity: 0; pointer-events: none; }
body.is-intro .caption { bottom: 22vh; font-size: clamp(1.3rem, 2.8vw, 2rem); }
.intro-line {
  position: absolute; left: 50%; bottom: 22vh; translate: -50% 0; width: min(760px, calc(100% - 32px)); margin: 0; text-align: center;
  font: 400 clamp(1.5rem, 3.4vw, 2.5rem)/1.3 var(--f-display); text-wrap: balance;
  opacity: 0; transform: translateY(10px); transition: opacity 1.2s ease, transform 1.2s ease; text-shadow: 0 0 30px #000;
}
.intro-line em { color: #9cc2ff; }
.intro-line.show { opacity: 1; transform: none; }
.intro::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 58vh; opacity: 0; transition: opacity 2s ease;
  background: linear-gradient(to top, rgba(2, 3, 8, .92), rgba(2, 3, 8, .55) 55%, transparent);
}
.intro.final::before { opacity: 1; }
.intro-end {
  position: absolute; left: 50%; bottom: calc(7vh + env(safe-area-inset-bottom, 0px)); translate: -50% 0; width: min(680px, calc(100% - 32px)); text-align: center;
  opacity: 0; transform: translateY(14px); transition: opacity 1.6s ease, transform 1.6s ease; pointer-events: none;
}
.intro.final .intro-end { opacity: 1; transform: none; pointer-events: auto; }
.intro.final .intro-line { opacity: 0; }
.eyebrow { margin: 0; font: 500 .72rem var(--f-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.intro-end h1 { margin: 14px 0 0; font: 400 clamp(2.3rem, 6.4vw, 4.6rem)/1.02 var(--f-display); letter-spacing: -.02em; text-wrap: balance; text-shadow: 0 0 40px rgba(0, 0, 0, .8); }
.intro-end h1 em { color: var(--accent); }
.intro-end > p:not(.eyebrow) { margin: 18px auto 0; max-width: 480px; color: var(--ink-dim); font-size: 1.02rem; text-shadow: 0 0 20px #000; }
.intro-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.btn-main, .btn-ghost, .btn-skip { appearance: none; border-radius: 999px; cursor: pointer; font-size: .92rem; }
.btn-main { border: 0; background: var(--accent); color: var(--accent-ink); padding: 12px 28px; font-weight: 600; box-shadow: 0 0 40px rgba(242, 207, 149, .35); }
.btn-ghost { border: 1px solid rgba(242, 207, 149, .45); background: var(--glass); color: var(--ink); padding: 11px 22px; }
.btn-skip {
  position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); pointer-events: auto;
  border: 1px solid rgba(242, 207, 149, .5); background: var(--glass); color: var(--ink); padding: 9px 18px; font-size: .86rem; white-space: nowrap;
}
.btn-skip:hover { border-color: var(--accent); }
.intro.final .btn-skip, .intro.gone { display: none; }

/* ---------- Über die Karte ---------- */
.about { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 24px 16px; background: rgba(2, 3, 8, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.about[hidden] { display: none; }
.about-card {
  position: relative; width: min(760px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; padding: 32px 32px 28px;
  border-radius: 20px; background: rgba(8, 10, 20, .96); border: 1px solid var(--line);
}
#about-close { position: absolute; top: 16px; right: 16px; }
.about-card h2 { margin: 10px 0 18px; font: 400 clamp(1.6rem, 3vw, 2.2rem)/1.1 var(--f-display); text-wrap: balance; padding-right: 40px; }
.about-card h3 { margin: 0 0 8px; font: 500 .66rem var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.about-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px 28px; margin-bottom: 22px; }
.about-cols section { min-width: 0; }
.about-card ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: .9rem; color: var(--ink); }
.about-card li::marker { color: var(--ink-dim); }
.about-keys { font-size: .86rem; line-height: 2; color: var(--ink-dim); margin: 0; }
.about-keys kbd { font: 500 .66rem var(--f-mono); padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); }
.about-note { margin: 16px 0 0; font-size: .8rem; color: var(--ink-dim); }

/* ---------- Startbildschirm ---------- */
.gate {
  position: fixed; inset: 0; z-index: 27; display: grid; place-content: center; justify-items: center; gap: 0;
  padding: 24px 16px; text-align: center;
  background: radial-gradient(ellipse at center, rgba(2, 3, 8, .35), rgba(2, 3, 8, .88) 70%);
}
.gate[hidden] { display: none; }
.gate h1 { margin: 16px 0 0; max-width: 720px; font: 400 clamp(2.2rem, 6vw, 4.2rem)/1.04 var(--f-display); letter-spacing: -.02em; text-wrap: balance; }
.gate h1 em { color: var(--accent); }
.gate > p:not(.eyebrow) { margin: 16px 0 0; color: var(--ink-dim); font-size: 1rem; }
.gate .intro-actions { margin-top: 30px; }
.btn-link { margin-top: 22px; border: 0; background: none; color: var(--ink-dim); font-size: .82rem; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); }
.btn-link:hover { color: var(--ink); }
body.gate-open .btn-skip, body.gate-open .intro-line { display: none; }

/* ---------- Fallback ---------- */
.fallback { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; text-align: center; padding: 24px; background: var(--void); }
.fallback[hidden] { display: none; }
.fallback h2 { font: italic 400 2rem var(--f-display); margin: 0 0 8px; }
.fallback p { color: var(--ink-dim); max-width: 440px; margin: 0 auto; }

/* ---------- Schmal (Telefon) ---------- */
@media (max-width: 900px) {
  .panel {
    top: auto; left: 0; width: auto; height: 64vh; border-left: 0; border-top: 1px solid var(--line); border-radius: 18px 18px 0 0;
    transform: translateY(104%);
  }
  .panel.open { transform: none; }
  .p-scroll { padding: 24px 20px 24px; }
  body.panel-open .caption { left: 50%; }
  .ladder { display: none; }
  .hint { display: none; }
  body.panel-open .views { left: 50%; }
}
@media (max-width: 640px) {
  .bar { flex-direction: column; gap: 10px; }
  .mark-name { font-size: 1.4rem; }
  .mark-sub { display: none; }
  .tools { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 4px; scrollbar-width: none; }
  .tool { padding: 6px 12px; font-size: .78rem; white-space: nowrap; }
  .views { top: calc(104px + env(safe-area-inset-top, 0px)); }
  .views span { display: none; }
  .hud { gap: 4px; }
  .h-earth { font-size: .74rem; }
  .skybar { gap: 8px 12px; padding: 10px 12px; }
  .sk-range input { width: 120px; }
  body.is-sky .hud { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  .caption { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* petpedia.fun: Link zur Erde, eingebettete Reise */
.tool-earth { text-decoration: none; display: inline-flex; align-items: center; }
body.is-embedded #gate { display: none !important; }
#i-earth { display: none; }
body.is-embedded #i-earth { display: inline-flex; }