/* 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, #06070a 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 „Mondlauf“ – überschreibt die Kulisse von „Dämmerung“:
   Schwarz und Silber, ein warmer Akzent, Serifenschrift. Rechts steht ein grosser Mond (echtes Foto),
   der beim Scrollen von Neumond bis Vollmond zunimmt (Schattengrenze aus site.js).
   ========================================================================== */
:root { --acc: #e8c27a; --line: rgba(233, 231, 225, .16); --body: rgba(233, 231, 225, .82); --muted: rgba(233, 231, 225, .5); --moon-w: min(82vh, 50vw); }
html { background: #06070a; }
body { color: #e9e7e1; }
.sky { background: radial-gradient(90% 80% at 80% 50%, #15161d 0, #08090c 55%, #040405 100%); }
#stars { left: 0; top: 0; width: 100%; height: 100%; opacity: .55; transform: none; }
.moonstage { position: absolute; right: calc(var(--moon-w) * -.14); top: 50%; translate: 0 -50%; width: var(--moon-w); }
.bigmoon { display: block; width: 100%; overflow: visible; filter: drop-shadow(0 0 calc(20px + var(--lit, 0) * 70px) rgba(236, 230, 208, calc(.06 + var(--lit, 0) * .3))); }
/* Mondscheibe: echtes Vollmondfoto (assets/bilder/vollmond.jpg), im SVG auf den Kreis eingepasst */
.disc { fill: #8f8f8f; }
/* Nachtseite: nicht ganz schwarz – das schwache Erdlicht lässt die Oberfläche erahnen */
.shade { fill: rgba(6, 8, 14, .93); }
.rim { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.phase-read { position: absolute; left: 0; right: calc(var(--moon-w) * .14); top: 100%; margin: 14px 0 0; text-align: center; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.phase-read b { display: block; font: 400 34px/1 var(--serif); letter-spacing: 0; color: var(--acc); font-variant-numeric: tabular-nums; margin-bottom: 6px; }

.nav { background: rgba(8, 9, 12, .7); }
.logo b { font-weight: 600; }
main { padding-right: calc(var(--moon-w) * .8); }
.scene { width: min(700px, 100%); margin-left: clamp(0px, 5vw, 90px); }
.scene-head, .scene:nth-of-type(even) .scene-head { align-items: flex-start; text-align: left; text-shadow: none; }
.scene-head h1, .scene-head h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.025em; line-height: .96; }
.scene-head h1 { font-size: clamp(54px, 8vw, 124px); }
.scene-head h1 span { color: var(--acc); }
.scene-head h2 { font-size: clamp(42px, 6vw, 88px); font-style: italic; }
.scene-head p:not(.phase) { font-weight: 400; text-shadow: none; color: var(--body); }
.phase { text-shadow: none; color: var(--acc); }
.phase i { background: transparent; box-shadow: inset -4px 0 0 var(--acc); }

/* Abschnitte: keine Glaskarten, sondern ruhige Spalte mit Haarlinien */
.cards { gap: 0; }
.sec, .sec:nth-child(odd), .sec:nth-child(even) { width: 100%; justify-self: stretch; rotate: 0deg; padding: clamp(28px, 4vw, 46px) 0; background: none; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.k { padding: 0; background: none; color: var(--acc); font-weight: 600; }
.sec h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; font-size: clamp(30px, 3.6vw, 46px); }
.sec h3 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 24px; }
.lead { color: #f4f2ec !important; font-family: var(--serif); font-size: 22px; line-height: 1.5; }
.facts dd, .cols b, .note b, .badges li { color: #f4f2ec; }
.prices td { font-family: var(--serif); font-weight: 400; font-size: 22px; }
.badges li, .cols > div, .note { background: rgba(233, 231, 225, .06); border-radius: 4px; }
.foto { border-radius: 4px; }
.foto img { filter: grayscale(1) contrast(1.1) brightness(.9); }
.foto figcaption { border-radius: 2px; background: rgba(6, 7, 10, .8); }
.acc summary { font-weight: 500; }
.acc summary::after { background: none; }
.btn { border-radius: 2px; border-width: 1px; letter-spacing: .06em; font-weight: 500; }
.btn:hover, .btn--solid { color: #0a0b0f; }

@media (max-width: 1000px) {
  :root { --moon-w: 92vw; }
  .moonstage { right: -34vw; top: 38%; opacity: .5; }
  .phase-read { display: none; }
  main { padding-right: clamp(16px, 4vw, 48px); }
  .scene { margin-left: auto; }
  .cards { padding: 0 18px; border-radius: 6px; background: rgba(6, 7, 10, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}