/* ASA Astroclub Solaris – Design „Dämmerung“
   Ein Abend auf der Nütziweid: Die Scroll-Position ist die Uhrzeit. Oben steht die Sonne tief über den Hügeln,
   beim Scrollen geht sie unter, der Himmel wird dunkel, Sterne und Mond erscheinen (Werte kommen aus site.js).
   Sonne, Mond und Sterne wandern dabei im Bogen nach rechts, wie am echten Südhimmel.
   Es gibt deshalb keinen Hell/Dunkel-Schalter – der Verlauf der Seite ist der Wechsel. */

:root {
  color-scheme: dark;
  /* Startwerte = „Blaue Stunde“, falls JavaScript fehlt */
  --s1: #0c1440; --s2: #2c2f72; --s3: #7a4f86;
  --ground: #0b0a1c; --ground-far: #1a1838;
  --acc: #c9bcff;
  --night: .5;
  --sun-y: 120vh; --moon-y: 30vh;

  --card: rgba(9, 11, 30, .7);
  --text: #fff;
  --body: rgba(255, 255, 255, .84);
  --muted: rgba(255, 255, 255, .58);
  --line: rgba(255, 255, 255, .16);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--s2); }
body { margin: 0; color: var(--text); font: 17px/1.65 var(--sans); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--acc); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 60; background: #fff; color: #0a0c20; padding: 8px 14px; border-radius: 999px; }
.skip:focus { left: 16px; }

/* ---------- Himmel (fest hinter dem Inhalt) ---------- */
.sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, var(--s1) 0%, var(--s2) 52%, var(--s3) 88%); }
/* Die Sternfläche ist grösser als das Fenster und dreht sich um einen Punkt weit unter dem Horizont:
   so ziehen die Sterne beim Scrollen im Bogen nach rechts (Blick nach Süden). */
#stars { position: absolute; left: -30%; top: -30%; width: 160%; height: 160%; opacity: var(--night);
  transform-origin: 50% 156%; transform: rotate(var(--sky-rot, 0deg)); }
.sun { position: absolute; left: 56%; top: 0; width: 34vmin; height: 34vmin; margin-left: -17vmin; border-radius: 50%; transform: translate(var(--sun-x, 0vw), var(--sun-y)); opacity: var(--day, 0);
  background: radial-gradient(circle at 50% 45%, #fffbe6 0, #ffe29a 34%, #ffb24d 66%, #ff8a3d 100%);
  box-shadow: 0 0 60px 20px rgba(255, 190, 110, .55), 0 0 220px 90px rgba(255, 150, 70, .35); }
.moon { position: absolute; left: 8%; top: 0; width: 13vmin; height: 13vmin; border-radius: 50%; transform: translate(var(--moon-x, 0vw), var(--moon-y)); opacity: var(--night);
  background:
    radial-gradient(circle at 32% 36%, rgba(120, 124, 140, .35) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 60%, rgba(120, 124, 140, .3) 0 13%, transparent 14%),
    radial-gradient(circle at 56% 26%, rgba(120, 124, 140, .25) 0 6%, transparent 7%),
    radial-gradient(circle at 40% 40%, #fffdf2, #dcdde6 70%, #b9bccb);
  box-shadow: 0 0 50px 8px rgba(220, 228, 255, .28); }
.hills { position: absolute; left: 0; bottom: 0; width: 100%; height: 24vh; }
.hill-far { fill: var(--ground-far); }
.hill-near { fill: var(--ground); }
/* Sternwarten-Kuppel auf der Kuppe des vorderen Hügels (Hügelkuppe bei 22 % der Breite, 63 % der Hügelhöhe) */
.dome { position: absolute; left: 22%; bottom: calc(24vh * .63 - 5px); width: clamp(44px, 6vw, 84px); translate: -50% 0; overflow: visible; }
.dome-body { fill: var(--ground); }
.dome-slit { fill: var(--s2); }
.dome-lamp { fill: #ff3b2a; opacity: var(--night); filter: drop-shadow(0 0 4px #ff3b2a); }
.shoot { position: absolute; width: 140px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #fff); rotate: 28deg; animation: shoot .9s ease-out forwards; }
@keyframes shoot { from { opacity: 0; translate: 0 0; } 20% { opacity: 1; } to { opacity: 0; translate: 260px 138px; } }

/* ---------- Kopfzeile ---------- */
.top { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  padding: calc(12px + env(safe-area-inset-top, 0px)) clamp(14px, 3vw, 34px) 0; }
.top::before { content: ""; position: absolute; z-index: -1; inset: 0 0 -26px; pointer-events: none; background: linear-gradient(180deg, var(--s1) 35%, transparent); }
.logo { margin-right: auto; color: #fff; text-decoration: none; display: flex; align-items: baseline; gap: 10px; text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }
.logo b { font-weight: 900; font-size: 20px; letter-spacing: .3em; }
.logo span { font-size: 14px; opacity: .85; white-space: nowrap; }
.nav { display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: rgba(9, 11, 30, .55); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { color: rgba(255, 255, 255, .78); text-decoration: none; font-size: 15px; padding: 7px 15px; border-radius: 999px; white-space: nowrap; transition: background .25s, color .25s; }
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.nav a[aria-current] { background: var(--acc); color: #0a0c20; font-weight: 600; }
@media (max-width: 900px) { .logo span { display: none; } .nav { flex: 0 0 100%; } }

/* ---------- Szenen ---------- */
main { position: relative; z-index: 1; padding: 0 clamp(16px, 4vw, 48px) 30vh; }
.scene { width: min(1120px, 100%); margin: 0 auto; scroll-margin-top: 0; }
.scene-head { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding-block: 16vh 7vh; text-shadow: 0 2px 26px rgba(40, 14, 40, .28); }
.scene--start .scene-head { min-height: 100vh; min-height: 100svh; padding-block: 120px 26vh; }
.scene:nth-of-type(even) .scene-head { align-items: flex-end; text-align: right; }
.phase { text-shadow: 0 1px 2px rgba(50, 18, 30, .6); display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
.phase i { width: 12px; height: 12px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 14px 2px var(--acc); }
.scene-head h1, .scene-head h2 { margin: 0; font-weight: 900; line-height: .86; letter-spacing: -.055em; text-wrap: balance; }
.scene-head h1 { font-size: clamp(56px, 12.5vw, 176px); }
.scene-head h1 span { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -.03em; }
.scene-head h2 { font-size: clamp(46px, 9.4vw, 132px); }
.scene-head .eyebrow { font-size: 14px; letter-spacing: .2em; text-transform: uppercase; opacity: .85; margin-bottom: 12px; }
.scene-head p:not(.phase) { margin: 26px 0 0; max-width: 42ch; font-size: clamp(18px, 2vw, 22px); line-height: 1.45; font-weight: 500;
  text-shadow: 0 1px 2px rgba(50, 18, 30, .6), 0 2px 22px rgba(50, 18, 30, .55); }

/* ---------- Karten: versetzt links / rechts, leicht gekippt ---------- */
.cards { display: grid; gap: clamp(22px, 4vw, 44px); }
.sec { width: min(720px, 100%); padding: clamp(22px, 4vw, 46px); border-radius: 30px; background: var(--card); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(1.35); backdrop-filter: blur(16px) saturate(1.35); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7);
  scroll-margin-top: 90px; transition: rotate .4s, opacity .8s, translate .8s cubic-bezier(.2, .8, .2, 1); }
.sec:nth-child(odd) { justify-self: start; rotate: -.5deg; }
.sec:nth-child(even) { justify-self: end; rotate: .5deg; }
.sec:hover, .sec:focus-within { rotate: 0deg; }
.js .sec.pre { opacity: 0; translate: 0 50px; }
.k { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #0a0c20; background: var(--acc); padding: 3px 12px; border-radius: 999px; }
.sec h2 { margin: 16px 0 14px; font-size: clamp(28px, 4vw, 44px); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; text-wrap: balance; }
.sec h3 { margin: 28px 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.sec p, .sec li { color: var(--body); }
.sec p { margin: 0 0 14px; }
.sec ul:not(.badges) { margin: 0 0 14px; padding-left: 1.2em; }
.sec li::marker { color: var(--acc); }
.lead { font-size: 20px; color: #fff !important; }

.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 24px; margin: 20px 0 0; }
.facts dt, .facts dd { margin: 0; padding: 11px 0; border-top: 1px solid var(--line); }
.facts dt { font-size: 12px; line-height: 2.3; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.facts dd { color: #fff; }
.facts dd ul { margin: 0 !important; }
.prices { width: 100%; border-collapse: collapse; margin: 14px 0; font-variant-numeric: tabular-nums; }
.prices th, .prices td { padding: 12px 0; border-top: 1px solid var(--line); text-align: left; font-weight: 400; color: var(--body); }
.prices tr:last-child th, .prices tr:last-child td { border-bottom: 1px solid var(--line); }
.prices td { text-align: right; white-space: nowrap; font-weight: 800; font-size: 19px; color: var(--acc); }
.badges { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; padding: 0; }
.badges li { padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 14px; }
.note { margin: 20px 0 0 !important; padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, .07); font-size: 15px; }
.note b { color: #fff; }
.offen { border-bottom: 1px dashed var(--acc); cursor: help; }
.offen::after { content: " · offen"; color: var(--acc); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 8px 0 12px; }
.cols > div { padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .07); min-width: 0; }
.cols b { display: block; color: #fff; }
.cols p { margin: 3px 0 0; color: var(--muted); font-size: 14px; }

.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { cursor: pointer; list-style: none; padding: 14px 36px 14px 0; position: relative; font-weight: 700; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; position: absolute; right: 2px; top: 8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: var(--acc); font-size: 20px; font-weight: 400; transition: rotate .3s; }
.acc details[open] summary::after { rotate: 45deg; }
.acc details > div { padding-bottom: 6px; }

.foto { position: relative; margin: 22px 0 0; border-radius: 20px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.foto figcaption { position: absolute; left: 12px; bottom: 12px; padding: 4px 12px; border-radius: 999px; background: rgba(9, 11, 30, .7); font-size: 13px; color: #fff; }
.foto.leer { aspect-ratio: 16 / 9; display: grid; place-items: center; border: 1px dashed var(--line); }
.foto.leer img { display: none; }
.foto.leer figcaption { position: static; background: none; color: var(--muted); }
.foto.leer figcaption::before { content: "Foto folgt · "; color: var(--acc); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 4px; }
.btn { display: inline-block; padding: 12px 24px; border-radius: 999px; border: 1.5px solid var(--acc); color: var(--acc); text-decoration: none; font-weight: 600; transition: background .2s, color .2s, translate .2s; }
.btn:hover, .btn--solid { background: var(--acc); color: #0a0c20; }
.btn:hover { translate: 0 -2px; }

footer.site { position: relative; z-index: 1; padding: 0 clamp(16px, 4vw, 48px) calc(22px + env(safe-area-inset-bottom, 0px)); }
footer.site .legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: 13px; color: rgba(255, 255, 255, .7); }
footer.site a { color: rgba(255, 255, 255, .7); }
footer.site a:hover { color: var(--acc); }

@media (max-width: 760px) {
  .sec, .sec:nth-child(odd), .sec:nth-child(even) { rotate: 0deg; border-radius: 24px; }
  .scene:nth-of-type(even) .scene-head { align-items: flex-start; text-align: left; }
  .cols { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .facts dd { border-top: 0; padding-top: 0; }
  .facts dt { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sec { transition: none; rotate: 0deg !important; }
  .js .sec.pre { opacity: 1; translate: none; }
  .shoot { display: none; }
}

/* ==========================================================================
   Design „Aufstieg“ – überschreibt die Kulisse von „Dämmerung“:
   Scrollen heisst steigen. Die Seite startet am Boden auf der Nütziweid und führt durch Wolken,
   Stratosphäre und Erdumlaufbahn am Mond und den Planeten vorbei bis zu fernen Galaxien.
   Jedes Objekt (.obj) hängt an einem Inhaltsabschnitt (data-sec) und steht auf der Seite daneben, die gerade frei ist:
   Karte links -> Objekt rechts und umgekehrt. site.js setzt die Position; die Objekte ziehen etwas langsamer als der Inhalt.
   ========================================================================== */
.sky { background: linear-gradient(180deg, var(--s1) 0%, var(--s2) 55%, var(--s3) 100%); }
#stars { left: 0; top: 0; width: 100%; height: 100%; transform: none; opacity: var(--night); }
.deep { position: absolute; inset: 0; background: url("../bilder/milchstrasse.jpg") center top / cover; opacity: var(--deep, 0); mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(#000 45%, transparent 78%); mask-image: linear-gradient(#000 45%, transparent 78%); }
.obj { position: absolute; left: 0; top: 0; transform: translate3d(0, 300vh, 0); will-change: transform; transition: opacity .4s; }
.ground { transform: translate3d(0, var(--y, 0), 0); }
.ground { top: auto; bottom: 0; left: 0; width: 100%; height: 24vh; }
.ground .hills { height: 100%; }
.ground .dome { bottom: calc(24vh * .63 - 5px); }
.dome-lamp { opacity: 1; }
.cloud { width: var(--w); height: 10vh; border-radius: 50%; background: rgba(255, 255, 255, .55); filter: blur(24px); animation: none; opacity: 1; }
.plane { width: clamp(44px, 5vw, 70px); fill: rgba(255, 255, 255, .8); }
.balloon { width: clamp(26px, 3vw, 40px); fill: rgba(255, 255, 255, .9); stroke: rgba(255, 255, 255, .8); stroke-width: 1.5; }
.iss { transition: transform .9s cubic-bezier(.3, .7, .2, 1), opacity .5s; width: clamp(90px, 11vw, 160px); fill: rgba(205, 220, 255, .9); stroke: #0a0c20; stroke-width: 1.2; rotate: -12deg; filter: drop-shadow(0 0 14px rgba(160, 200, 255, .45)); }
.luna { width: 26vmin; height: 26vmin; border-radius: 50%; box-shadow: 0 0 60px 6px rgba(220, 228, 255, .25), inset -4vmin -2vmin 6vmin rgba(0, 0, 0, .55);
  background:
    radial-gradient(circle at 32% 36%, rgba(120, 124, 140, .4) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 60%, rgba(120, 124, 140, .35) 0 13%, transparent 14%),
    radial-gradient(circle at 56% 26%, rgba(120, 124, 140, .3) 0 6%, transparent 7%),
    radial-gradient(circle at 40% 40%, #fffdf2, #dcdde6 70%, #b9bccb); }
.mars { width: 13vmin; height: 13vmin; border-radius: 50%; background: radial-gradient(circle at 34% 34%, #ffb994, #cf5b3c 55%, #7b2c1d); box-shadow: inset -2.4vmin -1.4vmin 3.4vmin rgba(0, 0, 0, .6), 0 0 40px rgba(255, 120, 80, .25); }
.jupiter { width: 32vmin; height: 32vmin; border-radius: 50%; box-shadow: inset -6vmin -3vmin 9vmin rgba(0, 0, 0, .62), 0 0 60px rgba(255, 220, 170, .15); overflow: hidden;
  background: linear-gradient(176deg, #c7a078 0 11%, #ead7b8 11% 23%, #b9875f 23% 32%, #efe0c6 32% 46%, #c08c66 46% 56%, #e9d5b4 56% 70%, #b5855f 70% 82%, #d8bd99 82%); }
.jupiter::after { content: ""; position: absolute; left: 56%; top: 59%; width: 17%; height: 9%; border-radius: 50%; background: #b5553a; box-shadow: 0 0 6px 2px rgba(181, 85, 58, .6); }
.saturn { width: 17vmin; height: 17vmin; border-radius: 50%; box-shadow: inset -3vmin -2vmin 5vmin rgba(0, 0, 0, .6);
  background: linear-gradient(172deg, #d9c08a 0 18%, #efe0b4 18% 40%, #cfae78 40% 58%, #eedcae 58% 78%, #c8a873 78%); }
.saturn i { position: absolute; left: -62%; top: 26%; width: 224%; height: 48%; border-radius: 50%; border: 1.9vmin solid rgba(232, 208, 152, .62); border-left-width: 3.2vmin; border-right-width: 3.2vmin; rotate: -16deg;
  clip-path: polygon(0 46%, 100% 46%, 100% 100%, 0 100%); }
.comet { width: min(24vw, 300px); height: 3px; border-radius: 3px; rotate: -16deg; background: linear-gradient(90deg, transparent, rgba(190, 230, 255, .95)); box-shadow: 0 0 22px 2px rgba(150, 210, 255, .35); }
.comet::after { content: ""; position: absolute; right: -4px; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 0 18px 6px rgba(170, 225, 255, .8); }
.galaxy { width: min(52vw, 620px); border-radius: 50%; mix-blend-mode: screen; opacity: .95;
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); }

/* Höhenmesser */
.alt { position: fixed; z-index: 15; right: clamp(12px, 2.4vw, 30px); top: 50%; translate: 0 -50%; display: flex; align-items: stretch; gap: 14px; height: min(46vh, 380px); pointer-events: none; }
.alt-track { position: relative; width: 2px; background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .12)); border-radius: 2px; }
.alt-track i { position: absolute; left: -5px; bottom: calc(var(--t, 0) * 100%); width: 12px; height: 12px; margin-bottom: -6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 14px 3px var(--acc); }
.alt p { order: -1; align-self: flex-end; margin: 0 0 calc(var(--t, 0) * min(46vh, 380px) - 20px); text-align: right; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .78); text-shadow: 0 1px 10px rgba(0, 0, 0, .7); max-width: 150px; }
.alt b { display: block; font-size: 19px; letter-spacing: 0; text-transform: none; color: #fff; font-variant-numeric: tabular-nums; }
main { padding-right: clamp(16px, 13vw, 210px); }
@media (max-width: 900px) {
  .alt { top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); right: 12px; translate: none; height: auto; padding: 7px 14px; border-radius: 16px; background: rgba(9, 11, 30, .7); border: 1px solid var(--line); }
  .alt-track { display: none; }
  .alt p { margin: 0; max-width: none; }
  main { padding-right: clamp(16px, 4vw, 48px); }
}