/* ============================================================================
   styles.css — "In den Himmel"
   ========================================================================== */

:root{
  --ui-bg: rgba(10, 18, 35, 0.78);       /* opaker -> sichtbar gegen schwarzen Weltraum UND blauen Himmel */
  --ui-border: rgba(140, 200, 255, 0.45); /* leicht blau angehaucht -> klarer Akzent gegen jeden Hintergrund */
  --ui-text: #eaf2ff;
  --accent: #6fc4ff;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: auto; }            /* wird nach Init auf smooth gesetzt */
html.ready{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--font);
  color: var(--ui-text);
  background: #060c20;
  overflow-x: hidden;
}

/* --- Hintergrund-Canvas --- */
#bg{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  display: block;
}

/* --- Szene --- */
#scene{ position: relative; width: 100%; }
/* Szene erst zeigen, wenn der Aufbau fertig ist (verhindert Layout-Shift beim Init) */
html:not(.ready) #scene{ visibility: hidden; }

#atmosphere-layer,
#cloud-layer,
#milestone-layer,
#objects-layer{
  position: absolute;
  inset: 0;
  width: 100%;
}

/* --- Boden / Horizont --- */
#ground{
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 260px;
  background: linear-gradient(180deg,
    rgba(120,180,90,0) 0%,
    rgba(120,180,90,0.55) 28%,
    #6aa84f 55%, #4d7c36 100%);
  border-top: 2px solid rgba(255,255,255,0.25);
  pointer-events: none;
}
.ground-label{
  position: absolute;
  left: 50%; top: 14px;
  transform: translateX(-50%);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* --- Atmosphären-Bänder --- */
.atmo-band{
  position: absolute;
  left: 0; right: 0;
  border-top: 1px dashed rgba(255,255,255,0.14);
  pointer-events: none;
}
.atmo-band .atmo-label{
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  white-space: nowrap;
}

/* --- Akt-Banner (Sektionen) --- */
.section-banner{
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  pointer-events: none;
  border-top: 1px solid rgba(255,255,255,0.16);
}
.section-banner .section-title{
  display: inline-block;
  margin-top: 18px;
  padding: 8px 26px;
  font-size: clamp(1.1rem, 2.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  background: rgba(10,18,35,0.45);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

/* --- Wolken --- */
.cloud{
  position: absolute;
  font-size: 4rem;
  filter: blur(0.3px) drop-shadow(0 6px 18px rgba(0,0,0,0.15));
  opacity: 0.9;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* --- Meilenstein-Marker --- */
.milestone{
  position: absolute;
  left: 0; right: 0;
  border-top: 2px solid rgba(255,255,255,0.28);
  pointer-events: none;
}
.milestone .milestone-label{
  position: absolute;
  right: 16px;
  top: 6px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  background: var(--ui-bg);
  padding: 2px 8px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}

/* --- Fliegende Objekte --- */
.sky-item{
  position: absolute;
  margin: 0;
  width: 200px;
  transform: translateX(-50%);
  text-align: center;
  cursor: pointer;
  content-visibility: auto;
  contain-intrinsic-size: 200px 220px;
  transition: filter 0.2s ease;
}
.sky-item.side-left{ left: 26%; }
.sky-item.side-right{ left: 74%; }
.sky-item:hover{ filter: drop-shadow(0 0 12px rgba(120,200,255,0.6)); }
.sky-item:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 8px;
}

.sky-item img{
  display: block;
  width: auto;
  max-width: 160px;
  height: 150px;                /* feste Höhe reserviert Platz -> kein Layout-Shift beim Lazy-Load */
  margin: 0 auto 8px;
  object-fit: contain;
}

/* Emoji-Platzhalter (wenn kein Bild geladen werden kann) */
.sky-item .placeholder{
  width: 120px;
  height: 120px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.6rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.12);
}

/* Dunkle Plakette hinter der Beschriftung -> lesbarer Kontrast unabhängig vom
   wechselnden Himmel-Hintergrund (vorher nur ~1,5:1 über dem hellen Bereich). */
.sky-item figcaption{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 9px;
  background: rgba(8,14,30,0.62);
  backdrop-filter: blur(2px);
}
.sky-item figcaption .name{
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: #ffffff;
}
.sky-item figcaption .alt{
  display: block;
  font-size: 0.82rem;
  color: #9fd4ff;
}

/* Kategorie-Akzente am Platzhalter */
.cat-bird     .placeholder{ box-shadow: inset 0 0 0 2px rgba(140,210,255,0.35); }
.cat-insect   .placeholder{ box-shadow: inset 0 0 0 2px rgba(180,255,150,0.35); }
.cat-bat      .placeholder{ box-shadow: inset 0 0 0 2px rgba(200,160,255,0.35); }
.cat-spider   .placeholder{ box-shadow: inset 0 0 0 2px rgba(255,200,140,0.35); }
.cat-aircraft .placeholder{ box-shadow: inset 0 0 0 2px rgba(255,255,255,0.4); }
.cat-manned   .placeholder{ box-shadow: inset 0 0 0 2px rgba(255,180,90,0.5); }
.cat-unmanned .placeholder{ box-shadow: inset 0 0 0 2px rgba(120,255,220,0.45); }
.cat-reference .placeholder{ background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15); }
.cat-planet   .placeholder{ box-shadow: inset 0 0 0 2px rgba(255,200,120,0.4); }
.cat-star     .placeholder{ background: radial-gradient(circle at 40% 35%, rgba(255,240,180,0.55), rgba(255,170,70,0.12)); box-shadow: inset 0 0 0 2px rgba(255,210,120,0.55); }
.cat-cosmic   .placeholder{ background: radial-gradient(circle at 40% 35%, rgba(190,150,255,0.4), rgba(90,60,160,0.12)); box-shadow: inset 0 0 0 2px rgba(180,140,255,0.5); }
.cat-exoplanet .placeholder{ box-shadow: inset 0 0 0 2px rgba(120,220,180,0.45); }
.cat-nebula   .placeholder{ background: radial-gradient(circle at 40% 35%, rgba(255,140,200,0.35), rgba(120,40,120,0.12)); box-shadow: inset 0 0 0 2px rgba(255,150,210,0.45); }
.cat-cluster  .placeholder{ box-shadow: inset 0 0 0 2px rgba(200,220,255,0.5); }
.cat-blackhole .placeholder{ background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.85), rgba(255,150,40,0.25)); box-shadow: inset 0 0 0 2px rgba(255,160,50,0.5); }
.cat-galaxy   .placeholder{ background: radial-gradient(circle at 40% 35%, rgba(180,200,255,0.4), rgba(80,60,150,0.12)); box-shadow: inset 0 0 0 2px rgba(170,180,255,0.5); }

/* Jahreszahl (Rekordverlauf, ab dem Weltraum) */
.year{
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--accent);
  margin-left: 6px;
  opacity: 0.85;
  vertical-align: middle;
}

/* Notiz-Badge */
.note-badge{
  display: inline-block;
  margin-top: 4px;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.78);
}
.note-extremereignis{ background: rgba(255,90,90,0.18);  border-color: rgba(255,120,120,0.4); }
.note-extremwert{     background: rgba(255,170,60,0.18);  border-color: rgba(255,190,90,0.4); }
.note-laborwert{      background: rgba(150,120,255,0.18); border-color: rgba(170,150,255,0.4); }
.note-bodenhoehe{     background: rgba(120,200,150,0.18); border-color: rgba(150,220,170,0.4); }
.note-unsicher{       background: rgba(160,160,170,0.18); border-color: rgba(190,190,200,0.4); font-style: italic; }

/* --- Höhenmesser --- */
#altimeter{
  position: fixed;
  top: 16px; right: 16px;
  z-index: 20;
  width: 150px;
  padding: 12px 14px;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  text-align: right;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);   /* klare Abhebung gegen jeden Hintergrund */
}
#altimeter .alt-value{
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
#altimeter .alt-layer{
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 2px;
}
#altimeter .alt-bar{
  margin-top: 10px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
}
#altimeter .alt-bar-fill{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2a4a9a, var(--accent));
  border-radius: 3px;
}

/* --- Controls --- */
#controls{
  position: fixed;
  top: 16px; left: 16px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
#lang-toggle{
  display: flex;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(8px);
}
#lang-toggle button{
  background: none;
  border: none;
  color: var(--ui-text);
  padding: 7px 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
}
#lang-toggle button.active{ background: var(--accent); color: #061026; }
#lang-toggle button:focus-visible,
#teleport-menu summary:focus-visible{ outline: 2px solid var(--accent); outline-offset: -2px; }

#teleport-menu{
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  font-size: 0.88rem;
}
#teleport-menu summary{
  list-style: none;
  cursor: pointer;
  padding: 8px 14px;
  font-weight: 600;
}
#teleport-menu summary::-webkit-details-marker{ display: none; }
#teleport-list{
  list-style: none;
  margin: 0;
  padding: 4px 6px 8px;
}
#teleport-list li{ margin: 0; }
#teleport-list li button{
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--ui-text);
  font-family: var(--font);
  font-size: 0.88rem;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}
#teleport-list li button:hover{ background: rgba(255,255,255,0.12); }
#teleport-list li button:focus-visible{ outline: 2px solid var(--accent); outline-offset: -2px; }

/* --- Objekt-Navigation (Pfeil-Buttons unten Mitte) --- */
#object-nav{
  position: fixed;
  bottom: 22px;
  right: 16px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#object-nav button{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  transition: transform 0.12s ease, background 0.12s ease;
}
#object-nav button:hover{
  background: rgba(30, 50, 95, 0.85);
  transform: translateY(-2px);
}
#object-nav button:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
#object-nav button:disabled{
  opacity: 0.35;
  cursor: default;
  transform: none;
}

/* --- Scroll-Hinweis --- */
#scroll-hint{
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.9rem;
  backdrop-filter: blur(8px);
  animation: bob 2.4s ease-in-out infinite;
  transition: opacity 0.6s ease;
}
@keyframes bob{ 0%,100%{ transform: translate(-50%, 0);} 50%{ transform: translate(-50%, -6px);} }

/* --- Detail-Modal --- */
#detail-modal{
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2,6,18,0.7);
  backdrop-filter: blur(4px);
}
#detail-modal[hidden]{ display: none; }
.modal-card{
  position: relative;
  max-width: 480px;
  width: calc(100% - 40px);
  max-height: calc(100dvh - 48px);     /* dvh = dynamic viewport — robust gegen mobile address bar */
  overflow-y: auto;
  overscroll-behavior: contain;        /* Wheel/Touch im Modal scrollt NICHT die Seite dahinter */
  -webkit-overflow-scrolling: touch;   /* iOS-Trägheit */
  background: linear-gradient(160deg, #14213f, #0a1430);
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
.modal-close{
  position: sticky;          /* bleibt bei langen Inhalten oben sichtbar */
  top: 0;
  float: right;
  margin: -6px -6px 0 8px;
  width: 36px; height: 36px;
  background: rgba(10,18,35,0.55); border: 1px solid var(--ui-border);
  border-radius: 50%;
  color: var(--ui-text);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}
.modal-close:hover{ background: rgba(30,44,75,0.7); }
.modal-close:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.modal-emoji{ font-size: 3rem; }
.modal-name{ margin: 8px 0 2px; font-size: 1.4rem; }
.modal-sci{ margin: 0 0 10px; font-style: italic; color: rgba(255,255,255,0.6); }
.modal-alt{ margin: 0 0 14px; color: var(--accent); font-weight: 600; font-size: 1.1rem; }

/* Ausführlicher Rumpf: Beschreibungs-Absätze + kategorisierte Key-Facts */
.modal-body{ margin: 0 0 14px; }
.modal-para{ margin: 0 0 12px; line-height: 1.6; }
.modal-para:last-child{ margin-bottom: 0; }
.modal-group{ margin-top: 16px; }
.modal-group-title{
  margin: 0 0 6px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.modal-rows{
  margin: 0;
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  column-gap: 16px;
  row-gap: 4px;
}
.modal-rows dt{ color: rgba(255,255,255,0.55); font-size: 0.88rem; }
.modal-rows dd{ margin: 0; font-size: 0.88rem; }

.modal-meta{ margin: 14px 0 0; font-size: 0.8rem; color: rgba(255,255,255,0.5); }
.modal-meta a{ color: var(--accent); }

/* --- Größen-Skala (Murmel-Vergleich) --- */
.scale-card{
  margin: 0 0 18px;
  padding: 14px 16px;
  background: linear-gradient(160deg, rgba(40, 70, 130, 0.55), rgba(20, 36, 78, 0.55));
  border: 1px solid rgba(140, 200, 255, 0.35);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.scale-card-title{
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.scale-row{
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  column-gap: 14px;
  row-gap: 4px;
  margin: 6px 0;
  align-items: baseline;
}
.scale-row-label{
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
}
.scale-row-value{
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
}
.scale-row--note{
  display: block;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
  font-style: italic;
  margin-top: 8px;
}

/* --- Größen-Treppe (SVG-Paar-Sequenz für Mega-Objekte) --- */
.compare-card{
  margin: 0 0 18px;
  padding: 14px 14px 10px;
  background: linear-gradient(160deg, rgba(50, 30, 80, 0.45), rgba(20, 16, 50, 0.55));
  border: 1px solid rgba(200, 160, 255, 0.35);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.compare-card-title{
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(220, 190, 255, 0.95);
}
.compare-step{
  margin: 4px 0;
}
.compare-step svg{
  display: block;
  width: 100%;
  height: auto;
}

/* --- Hover-Popup (kompakte Vorschau) --- */
#hover-popup{
  position: fixed;
  z-index: 40;
  max-width: 260px;
  padding: 10px 14px;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  pointer-events: none;            /* darf mouseout am Item nicht stören */
  animation: hp-in 0.12s ease;
}
#hover-popup[hidden]{ display: none; }
#hover-popup .hp-name{ font-weight: 700; font-size: 0.95rem; }
#hover-popup .hp-alt{ color: var(--accent); font-size: 0.82rem; margin: 1px 0 6px; font-variant-numeric: tabular-nums; }
#hover-popup .hp-fact{ font-size: 0.82rem; line-height: 1.45; color: rgba(255,255,255,0.85); }
@keyframes hp-in{ from{ opacity: 0; } to{ opacity: 1; } }

/* --- Start-Overlay --- */
#start-overlay{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #87ceeb 0%, #5aa0d8 60%, #3f7fb8 100%);
  transition: opacity 0.8s ease;
}
.is-loading #start-overlay{ opacity: 1; }
#start-overlay.hide{ opacity: 0; pointer-events: none; }
.overlay-inner{
  text-align: center;
  max-width: 540px;
  padding: 30px;
  color: #07203a;
}
.overlay-inner h1{ font-size: clamp(2.4rem, 7vw, 4rem); margin: 0 0 12px; }
.overlay-inner p{ font-size: 1.1rem; line-height: 1.5; margin: 0 0 24px; }
#start-btn{
  font-size: 1.15rem;
  font-weight: 700;
  padding: 14px 38px;
  border: none;
  border-radius: 999px;
  background: #07203a;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  transition: transform 0.15s ease;
}
#start-btn:hover{ transform: translateY(-2px); }
.overlay-hint{ font-size: 0.95rem !important; opacity: 0.8; margin: 0 0 6px !important; }
.overlay-credit{ font-size: 0.85rem !important; opacity: 0.65; margin-top: 26px !important; }

/* --- Responsive --- */
@media (max-width: 600px){
  .sky-item{ width: 140px; contain-intrinsic-size: 140px 170px; }
  .sky-item img{ max-width: 110px; height: 110px; }
  .sky-item .placeholder{ width: 86px; height: 86px; font-size: 2.6rem; }
  .sky-item.side-left{ left: 28%; }
  .sky-item.side-right{ left: 72%; }
  #altimeter{ width: 116px; padding: 9px 10px; }
  #altimeter .alt-value{ font-size: 1.15rem; }
  #object-nav button{ width: 42px; height: 42px; font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce){
  html, html.ready{ scroll-behavior: auto; }
  #scroll-hint{ animation: none; }
  .cloud{ will-change: auto; }
  #hover-popup{ animation: none; }
}