/* ASA Astroclub Solaris – Design „Nachtwache“ (Weiterentwicklung von „Dämmerung“: drei Hügelketten mit Tiefe,
   Wolken, Dorflichter, Milchstrasse, Licht in der Sternwarte, Sonne/Stern auf dem aktiven Navigationslink)
   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. */

/* Vereinsschrift «Solaris Sans» in drei Schnitten (400 Text, 700 Hervorhebungen und Knöpfe, 900 Titel): Montserrat mit Sternen statt i- und Umlautpunkten (OFL 1.1, siehe assets/fonts/OFL.txt,
   gebaut mit tools/schrift/build_solaris_sans.py). Überall mit Sternen statt i- und Umlautpunkten; das O als Sonne (Stil-Variante ss02, gebaut mit --sonne) nur im Wort «Solaris» des Haupttitels. */
@font-face { font-family: "Solaris Sans"; src: url("../fonts/SolarisSans-Regular.woff2?v=2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Solaris Sans"; src: url("../fonts/SolarisSans-Bold.woff2?v=2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Solaris Sans"; src: url("../fonts/SolarisSans-Black.woff2?v=2") format("woff2"); font-weight: 900; font-display: swap; }
/* Ersatzschrift bis zum Laden: Arial, auf die Masse von Solaris Sans angepasst (aus tools/schrift/build_solaris_sans.py),
   damit der Text beim Wechsel der Schrift kaum springt */
@font-face { font-family: "Solaris Sans Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 114.03%; ascent-override: 84.89%; descent-override: 22.01%; line-gap-override: 0%; }

: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: "Solaris Sans", "Solaris Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Navigations-Schmuck als Maske (Idee L, 29.10.2026): Sonne = Vereinslogo mit festen Strahlen (Länge wie bei 35 % im
     Regler der Ideensammlung), Stern = Vierstrahler wie bisher (ohne Strahlen). Vorher: Sonne mit acht
     Strahlen, gesichert in der Ideensammlung (Tafel Vereinslogo, «Zum Zurückstellen») */
  --star-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath id='s' d='M12 0C12.7 7.6 16.4 11.3 24 12C16.4 12.7 12.7 16.4 12 24C11.3 16.4 7.6 12.7 0 12C7.6 11.3 11.3 7.6 12 0Z'/%3E%3Cuse href='%23s' transform='rotate(45 12 12) translate(12 12) scale(.42) translate(-12 -12)'/%3E%3C/svg%3E");
  --sun-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8.2' cy='15.6' r='5.2'/%3E%3Cg stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cline x1='6.20' y1='10.80' x2='12.63' y2='0.14'/%3E%3Cline x1='12.36' y1='10.27' x2='17.89' y2='3.20'/%3E%3Cline x1='13.38' y1='15.18' x2='20.62' y2='8.14'/%3E%3C/g%3E%3C/svg%3E");
}

* { 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); }
/* Sonne mit den drei Strahlen des Vereinslogos (Idee XLVII): beim Untergehen (erste 30 % der Seite) werden sie kürzer */
.sun-rays { position: absolute; left: 50%; top: 50%; width: 263%; height: 263%; translate: -50% -50%; overflow: visible; }
.sun-rays line { stroke: #fff0c4; stroke-width: 7; stroke-linecap: round; opacity: .9; filter: drop-shadow(0 0 6px rgba(255, 200, 120, .9));
  stroke-dasharray: calc(1 - min(1, var(--t, 0) / .3)) 2; }
/* Mond in der tagesaktuellen Phase: 24 Bilder aus dem «Vollmond» von Tobias Röllin, Schatten und Lichthof wie sein «Halbmond»
   (tools/demo/mondphasen.cjs, alle 360 × 360 px). site.js wählt das Bild aus assets/data/mondphasen.json (Test: ?mond=…).
   Die Scheibe füllt 78,3 % des Bildes: Element 16,6vmin gross, damit die Scheibe 13vmin misst. Ohne JavaScript: Erstes Viertel. */
.moon { position: absolute; left: calc(8% - 1.8vmin); top: -1.8vmin; width: 16.6vmin; height: 16.6vmin; transform: translate(var(--moon-x, 0vw), var(--moon-y)); opacity: var(--night);
  background: center / contain no-repeat; }
html:not(.js) .moon { background-image: url("../images/mond/mond-06.webp?v=2"); }
/* Hinweis zur Mondphase beim Darüberfahren mit der Maus (site.js), unter der Mondscheibe */
.moon-tip { position: fixed; z-index: 30; left: 0; top: 0; padding: 5px 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px;
  background: rgba(9, 11, 30, .82); color: #fff; font-size: 13.5px; line-height: 1.4; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .2s; }
.moon-tip.on { opacity: 1; }
.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%); }
/* Sternwarte NOVA-SOLARIS am linken Rand auf dem leichten Hochplateau des vorderen Hügels (bei 5 % der Breite, Boden auf
   ca. 63 % der Hügelhöhe), damit die Inhaltsboxen sie nicht verdecken. Das Plateau reicht bis 22 % der Breite, damit die
   Sternwarte auch auf schmalen Bildschirmen (dort relativ breiter) nicht vom Hang verdeckt wird. Der Sockel reicht nach unten.
   Silhouette nach den Fotos – lange Halle mit niedrigerem Anbau */
.obs { position: absolute; left: max(5%, 32px); bottom: calc(24vh * .63 - 4px); width: clamp(59px, 8vw, 114px); height: auto; translate: -50% 0; overflow: visible; }
.obs-body { fill: var(--ground); }
/* Rolldach: Ab der Blauen Stunde gleitet die obere Hälfte der rechten Gebäudehälfte auf gleicher Höhe nach links über die linke
   Hälfte; die Halle steht dann offen wie ein Cabriolet und das Teleskop wird sichtbar (--night aus site.js).
   Auf dem beweglichen Teil sitzt das Schild mit dem Vereinslogo und fährt mit. */
.obs-roof { --roof: clamp(0, (var(--night, 0) - .5) * 2.5, 1); transform: translateX(calc(var(--roof) * -53px)); }
.obs-lamp { fill: #ff3b2a; opacity: var(--night); filter: drop-shadow(0 0 4px #ff3b2a); }
/* Schild mit dem Vereinslogo auf dem Rolldach (Idee XLVIII): Logo immer weiss sichtbar, nachts zusätzlich mit Leuchten */
.obs-sign rect { fill: var(--ground); stroke: color-mix(in srgb, var(--ground) 70%, #fff); stroke-width: 4; }
.obs-sign-logo { color: #fff; filter: drop-shadow(0 0 6px rgba(255, 240, 200, calc(var(--night, 0) * .9))); }
.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; --logo-fs: 20px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 0 10px rgba(0, 0, 0, .18); } /* knapper Schatten: lesbar vor hellem Himmel, ohne Weichzeichner-Saum */
.logo > b { font-weight: 900; font-size: var(--logo-fs); letter-spacing: .3em; }
.logo span { font-size: var(--logo-fs); white-space: nowrap; }
.logo .logo-sep { margin-left: -.3em; white-space: pre; opacity: .85; } /* gleicht den Buchstabenabstand nach dem letzten A aus */
/* Ausgeschriebener Name gleich gross wie „ASA“; die Anfangsbuchstaben A, S, A so fett wie „ASA“, der Rest leichter */
.logo-name { font-weight: 400; letter-spacing: .025em; }
.logo-name b { font-weight: 900; }
/* Vereinslogo (weiss) rechts vom Namen, so hoch wie die Grossbuchstaben (Versalhöhe 0,72 em, gemessen), auf der Grundlinie */
.logo-mark { flex: none; height: calc(var(--logo-fs) * .72); width: auto; margin-left: calc(var(--logo-fs) * .4); fill: currentColor; color: #fff; overflow: visible; }
.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; }
/* Schrift (03.11.2026): 16 px, volles Weiss mit feinem Schatten (vorher 14 px, 78 % Weiss) */
.nav a { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); text-decoration: none; font-size: 16px; padding: 7px 15px; border-radius: 999px; white-space: nowrap; position: relative; 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: 700; text-shadow: none; }
/* Trennstrich vor eigenen Seiten wie «Aktuelles» und «Galerie» (Idee XXXVII der Ideensammlung; zurzeit nicht in der Navigation) */
.nav-div { flex: none; align-self: stretch; width: 1px; margin: 6px 7px; background: rgba(255, 255, 255, .32); }
/* Auf dem aktiven Link sitzt am oberen Rand ein Himmelskörper, der mit dem Lesefortschritt im Kapitel
   (--p, 0..1, aus site.js) von links nach rechts wandert: bis Sonnenuntergang eine Sonne, danach ein funkelnder Stern
   (data-sky am <html>, aus site.js). Beide liegen übereinander und werden über scale ein- und ausgeblendet. */
.nav a[aria-current]::before, .nav a[aria-current]::after { content: ""; position: absolute; top: -.72em; left: calc(.7em + var(--p, 0) * (100% - 2.8em));
  width: 1.4em; height: 1.4em; pointer-events: none; transition: scale .45s cubic-bezier(.2, 1.4, .4, 1); }
.nav a[aria-current]::before {
  background: radial-gradient(circle, #fffbe8 0 18%, #ffd36b 40%, #ff9a3c 70%);
  -webkit-mask: var(--sun-shape) center / contain no-repeat; mask: var(--sun-shape) center / contain no-repeat;
  filter: drop-shadow(0 0 1px rgba(90, 30, 0, .55)) drop-shadow(0 0 7px rgba(255, 170, 70, .85));
  animation: star-in .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.nav a[aria-current]::after {
  background: radial-gradient(circle, #fff 0 12%, var(--acc) 46%);
  -webkit-mask: var(--star-shape) center / contain no-repeat; mask: var(--star-shape) center / contain no-repeat;
  filter: drop-shadow(0 0 3px var(--acc)) drop-shadow(0 0 9px color-mix(in srgb, var(--acc) 60%, transparent));
  animation: star-in .5s cubic-bezier(.2, 1.6, .4, 1) both, star-twinkle 3.6s ease-in-out .5s infinite; }
html:not([data-sky="night"]) .nav a[aria-current]::after, html[data-sky="night"] .nav a[aria-current]::before { scale: 0; }
/* Eigene Seiten (aria-current="page", z. B. «Aktuelles»): kein Himmelskörper für den Scrollfortschritt, Farbe immer wie
   bei Tag (Akzent der ersten Stützstelle in site.js), unabhängig vom Himmel */
.nav a[aria-current="page"] { background: #ffd08a; }
.nav a[aria-current="page"]::before, .nav a[aria-current="page"]::after { content: none; }
@keyframes star-in { from { opacity: 0; transform: scale(0) rotate(-90deg); } }
@keyframes star-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.78) rotate(18deg); opacity: .8; } }
@media (min-width: 1151px) { .logo { --logo-fs: 25px; } .nav { overflow: visible; } } /* eine Zeile (braucht 1140 px): Schriftzug 25 % grösser */
/* Reicht der Platz nicht (sehr schmale Geräte), fällt „ASA – “ weg und nur der ausgeschriebene Name bleibt */
@media (max-width: 358px) { .logo > b, .logo .logo-sep { display: none; } .sec h2 { font-size: 24px; } }
/* Steht die Navigation in einer eigenen Zeile: Namenszug zentriert über die ganze Breite, darunter die Navigation
   rechtsbündig und nur so breit wie ihre Einträge (Abstand zum Rand wie bei breiten Bildschirmen, Padding der .top).
   Passt sie in die Breite (ab 690 px), scrollt sie nicht und die Sonne/der Stern auf dem aktiven Link darf über den Rand ragen.
   Darunter scrollt sie seitlich und schneidet alles über ihrem Rand ab: dann oben und unten gleich viel Platz für die Sonne. */
@media (max-width: 1150px) { .logo { flex: 0 0 100%; justify-content: center; } .nav { margin-left: auto; } }
@media (min-width: 690px) and (max-width: 1150px) { .nav { overflow: visible; } }
@media (max-width: 689px) { .nav { padding-block: 10px; } }

/* ---------- Szenen ---------- */
main { position: relative; z-index: 1; padding: 0 clamp(16px, 4vw, 48px) 11.5vh; } /* unten: Abstand bis zur Fusszeile (04.11.2026: 30vh → 11.5vh, ca. 75 % weniger) */
.scene { width: min(1120px, 100%); margin: 0 auto; }
.scene-head { min-height: 47vh; display: flex; flex-direction: column; justify-content: center; padding-block: 8vh 3.5vh; text-shadow: 0 2px 26px rgba(40, 14, 40, .28); }
/* Abstände um den Abschnittskopf (25.10.2026 je etwa halbiert): übriger Platz zu 3/5 über und 2/5 unter Titel und Untertitel */
.scene:not(.scene--start) .scene-head::before { content: ""; flex: 3; }
.scene:not(.scene--start) .scene-head::after { content: ""; flex: 2; }
/* Eigene Seiten (Aktuelles, Galerie): erster Abschnitt mit Platz für die feste Kopfzeile */
main > .scene:first-child:not(.scene--start) .scene-head { padding-top: calc(8vh + 110px); }
.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; }
.scene-head h1, .scene-head h2 { margin: 0; font-weight: 900; line-height: .9; letter-spacing: -.04em; text-wrap: balance; }
.scene-head h1 { font-size: clamp(44px, 9vw, 124px); }
.scene-head h1 .sonne { font-feature-settings: "ss02"; } /* Sonnen-O nur im Wort «Solaris» des Haupttitels */
.scene-head h2 { font-size: clamp(36px, 6.6vw, 92px); }
/* Hauptüberschrift eigener Seiten (Aktuelles, 404) so gross wie die Abschnittstitel, nicht wie der grosse Starttitel */
.scene:not(.scene--start) .scene-head h1 { font-size: clamp(36px, 6.6vw, 92px); }
.scene-head p { margin: 26px 0 0; max-width: 42ch; font-size: clamp(18px, 2vw, 22px); line-height: 1.45; font-weight: 400;
  text-shadow: 0 1px 2px rgba(50, 18, 30, .6), 0 2px 22px rgba(50, 18, 30, .55); }

/* ---------- Karten: abwechselnd links / rechts ---------- */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); 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);
  overflow-wrap: anywhere; scroll-margin-top: 90px; transition: opacity .8s, translate .8s cubic-bezier(.2, .8, .2, 1); }
.sec:nth-child(odd) { justify-self: start; }
.sec:nth-child(even) { justify-self: end; }
.js .sec.pre { opacity: 0; translate: 0 50px; }
/* Der Titel steht zuoberst in der Box (die Etiketten .k darüber sind seit 03./04.11.2026 entfernt): ohne Abstand oben */
.sec h2 { margin: 16px 0 14px; font-size: clamp(28px, 4vw, 44px); font-weight: 900; line-height: 1.05; letter-spacing: -.035em; text-wrap: balance; }
.sec > h2:first-child { margin-top: 0; }
.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); }
.sec .lead { font-size: 20px; color: #fff; }

.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: .16em; text-transform: uppercase; color: var(--muted); }
.facts dd { color: #fff; }
.sec .facts ul { margin: 0; }
.facts small { display: inline-block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--muted); } /* mehrzeilig (z. B. Empfängeradresse) mit engem Zeilenabstand */
/* Preistabelle bündig mit dem Fliesstext (ohne Standard-Zellabstand, <th> nicht zentriert) */
.prices { border-collapse: collapse; }
.prices th, .prices td { padding: 3px 0; }
.prices th { padding-right: 24px; text-align: left; }
.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; }
.sec .note { margin: 20px 0 0; padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, .07); font-size: 14px; }
.note b { color: #fff; }
/* Name der Sternwarte nie am Bindestrich umbrechen */
.nobr { white-space: nowrap; }
.offen { border-bottom: 1px dashed var(--acc); cursor: help; }
.offen::after { content: " · offen"; color: var(--acc); font-size: 12px; letter-spacing: .16em; 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; }

.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: 14px; color: #fff; }
/* Blick durchs Okular (aus der Ideensammlung): Das Bild liegt unscharf und dunkel da, eine runde Linse folgt dem
   Zeiger und zeigt den Ausschnitt scharf und doppelt so gross (Lage und Grösse aus site.js). Ohne JavaScript bleibt das Bild normal. */
.js .foto.okular { cursor: none; }
.js .foto.okular img { filter: blur(7px) brightness(.45); scale: 1.05; }
.foto.okular .lens { display: none; }
.js .foto.okular .lens { display: block; position: absolute; left: var(--lx, 50%); top: var(--ly, 50%); width: 38%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .7); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .25), inset 0 0 30px rgba(0, 0, 0, .8);
  background: #000 no-repeat; background-size: var(--bs, 200%); background-position: var(--bp, 50% 50%); pointer-events: none; }
.okular-hint { display: none; }
.js .okular-hint { display: block; position: absolute; right: 12px; top: 12px; padding: 4px 12px; border-radius: 999px; background: rgba(9, 11, 30, .7); font-size: 14px; color: #fff;
  pointer-events: none; transition: opacity .6s; }
.foto.okular.used .okular-hint { opacity: 0; }
@media (hover: none) { .js .foto.okular { cursor: auto; } }
/* Bild fehlt: Platzhalter «Foto folgt» statt Bild, Linse und Hinweis */
.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); }
.js .foto.okular.leer .lens, .foto.leer .okular-hint { display: none; }
/* Lightbox (site.js): Klick auf das Sternwarte-Foto öffnet die Galerie */
.lb-open { display: block; cursor: zoom-in; }
.lb-open:focus-visible { outline: 2px solid var(--acc); outline-offset: -4px; }
html.lb-on { overflow: hidden; }
.lightbox { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(3, 4, 14, .9); color: #fff; }
.lightbox::backdrop { background: rgba(3, 4, 14, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 12px; max-width: calc(100vw - 150px); pointer-events: none; }
.lightbox img { display: block; max-width: 100%; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); background: #000; }
.lightbox figcaption { font-size: 14px; color: rgba(255, 255, 255, .85); text-align: center; }
.lb-count { position: absolute; left: 50%; top: 18px; translate: -50% 0; margin: 0; font-size: 14px; letter-spacing: .16em; color: rgba(255, 255, 255, .7); }
.lb-btn { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; padding: 0 0 4px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08); color: #fff; font: 400 34px/1 var(--sans); cursor: pointer; transition: background .2s, border-color .2s; }
.lb-btn:hover, .lb-btn:focus-visible { background: rgba(255, 255, 255, .18); border-color: var(--acc); outline: none; }
.lb-prev { left: clamp(10px, 3vw, 34px); top: 50%; translate: 0 -50%; }
.lb-next { right: clamp(10px, 3vw, 34px); top: 50%; translate: 0 -50%; }
.lb-close { right: clamp(10px, 3vw, 34px); top: 12px; font-size: 30px; }
@media (max-width: 700px) {
  .lightbox figure { max-width: calc(100vw - 24px); }
  .lightbox img { max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); }
  .lb-prev, .lb-next { top: auto; bottom: 22px; translate: none; }
  .lb-prev { left: calc(50% - 66px); } .lb-next { right: calc(50% - 66px); }
}

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 4px; }
/* Kurzer Text neben Knöpfen (z. B. «(Email senden an …)»), vertikal zum Knopf zentriert */
.actions-text { align-self: center; font-size: 14px; color: var(--body); }
.btn { display: inline-block; padding: 12px 24px; border-radius: 999px; border: 1.5px solid var(--acc); background: var(--acc); color: #0a0c20; text-decoration: none; font-weight: 700; transition: translate .2s; }
.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: 14px; 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 { 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; }
}

/* Ersatz für Browser ohne color-mix() (z. B. Safari vor 16.2): sonst würde der hintere Hügel schwarz,
   die Wolken unsichtbar und der Stern in der Navigation verlöre sein Leuchten */
@supports not (color: color-mix(in srgb, red, blue)) {
  .hills--far path { fill: var(--ground-far); }
  .cloud { background: rgba(255, 255, 255, .35); }
  .nav a[aria-current]::after { filter: drop-shadow(0 0 3px var(--acc)) drop-shadow(0 0 9px var(--acc)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sec { transition: none; }
  .js .sec.pre { opacity: 1; translate: none; }
  .shoot { display: none; }
  .cloud, .village i { animation: none; }
  .nav a[aria-current]::before, .nav a[aria-current]::after { animation: none; transition: none; }
}