/* ASA Astroclub Solaris – Design „Nachtwache“ (Weiterentwicklung von „Dämmerung“: drei Hügelketten mit Tiefe,
   Wolken, Dorflichter, Milchstrasse, Kuppelspalt öffnet sich, Sonnenbogen als Anzeige)
   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%; }
/* Drei Hügelketten: die hinteren sinken beim Scrollen etwas schneller weg -> Tiefe */
.hills--far { height: 34vh; translate: 0 calc(var(--t, 0) * 2.4vh); }
.hills--far path { fill: color-mix(in srgb, var(--ground-far) 62%, var(--s3)); }
.hills--mid { height: 28vh; translate: 0 calc(var(--t, 0) * 1.2vh); }
.hills--mid path { fill: var(--ground-far); }
.hills--near { height: 24vh; }
.hills--near path { fill: var(--ground); }
/* Lichter im Tal gehen in der Dämmerung an */
.village { position: absolute; left: 0; bottom: 0; width: 100%; height: 34vh; translate: 0 calc(var(--t, 0) * 2.4vh); opacity: var(--dusk, 0); }
.village i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #ffd58a; box-shadow: 0 0 6px 1px rgba(255, 200, 120, .8); }
.village i:nth-child(3n) { animation: flicker 4s ease-in-out infinite; }
@keyframes flicker { 50% { opacity: .45; } }
.trees { position: absolute; left: 30%; bottom: calc(24vh * .6 - 4px); width: clamp(70px, 9vw, 130px); fill: var(--ground); }
/* Wolken leuchten im Abendlicht und lösen sich zur Nacht auf */
.cloud { position: absolute; height: 8vh; border-radius: 50%; filter: blur(20px); opacity: calc(var(--day, 0) * .7);
  background: color-mix(in srgb, var(--s3) 55%, #fff); animation: drift 80s ease-in-out infinite alternate; }
.cloud--1 { left: 4%; top: 24%; width: 38vw; }
.cloud--2 { left: 46%; top: 12%; width: 30vw; animation-duration: 110s; }
.cloud--3 { left: 62%; top: 38%; width: 34vw; animation-duration: 95s; animation-direction: alternate-reverse; }
@keyframes drift { from { translate: -4vw 0; } to { translate: 6vw 0; } }
/* Milchstrasse: dreht sich mit den Sternen, erscheint erst in tiefer Nacht */
.milky { position: absolute; left: -30%; top: -30%; width: 160%; height: 160%; opacity: var(--deep, 0); filter: blur(34px);
  transform-origin: 50% 156%; transform: rotate(var(--sky-rot, 0deg));
  background: linear-gradient(112deg, transparent 36%, rgba(170, 185, 255, .13) 45%, rgba(255, 236, 214, .2) 50%, rgba(170, 185, 255, .13) 55%, transparent 64%); }
/* Sonnenbogen: zeigt, wie weit der Abend fortgeschritten ist */
.arc { position: fixed; z-index: 15; right: clamp(14px, 3vw, 34px); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 12px;
  padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(9, 11, 30, .6); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .85); pointer-events: none; }
.arc svg { width: 62px; overflow: visible; }
.arc-line { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 2; stroke-dasharray: 3 5; }
.arc-ground { stroke: rgba(255, 255, 255, .5); stroke-width: 2; }
.arc-dot { fill: var(--acc); filter: drop-shadow(0 0 5px var(--acc)); }
@media (max-width: 600px) { .arc span { display: none; } .arc { padding: 8px 12px; } }
/* 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); transform-box: fill-box; transform-origin: center; transform: scaleX(calc(.2 + var(--night) * .8)); }
.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; }
  .cloud, .village i { animation: none; }
}