/* ASA Astroclub Solaris – Design „Nebel“
   Farbige Gasnebel statt schwarzem Himmel: vier weiche Farbwolken treiben langsam im Hintergrund und wechseln mit jedem
   Kapitel die Farbe. Die Inhalte liegen als Kacheln in einem Mosaik («Bento»), über die ein Lichtfleck dem Zeiger folgt.
   Die Navigation ist ein schwebendes Dock am unteren Rand. Nur dunkel. */

/* Registrierte Farb-Eigenschaften: nur so lassen sich die Nebelfarben weich überblenden */
@property --n1 { syntax: "<color>"; inherits: true; initial-value: #ff4fa3; }
@property --n2 { syntax: "<color>"; inherits: true; initial-value: #7a5cff; }
@property --n3 { syntax: "<color>"; inherits: true; initial-value: #22d3ee; }
@property --n4 { syntax: "<color>"; inherits: true; initial-value: #ff9a5c; }

:root {
  color-scheme: dark;
  --bg: #07061a;
  --text: #ffffff;
  --body: rgba(255, 255, 255, .82);
  --muted: rgba(255, 255, 255, .56);
  --line: rgba(255, 255, 255, .14);
  --tile: rgba(16, 13, 38, .56);
  --n1: #ff4fa3; --n2: #7a5cff; --n3: #22d3ee; --n4: #ff9a5c;
  --grad: linear-gradient(100deg, var(--n1), var(--n2) 45%, var(--n3) 90%);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  transition: --n1 1.4s ease, --n2 1.4s ease, --n3 1.4s ease, --n4 1.4s ease;
}
/* Nebelfarben je Kapitel (site.js setzt data-cloud am <html>) */
:root[data-cloud="2"] { --n1: #7a5cff; --n2: #3b82f6; --n3: #2dd4bf; --n4: #c084fc; }
:root[data-cloud="3"] { --n1: #22d3ee; --n2: #34d399; --n3: #a3e635; --n4: #38bdf8; }
:root[data-cloud="4"] { --n1: #ff9a5c; --n2: #ff4f7b; --n3: #ffcf5c; --n4: #c084fc; }
:root[data-cloud="5"] { --n1: #f472b6; --n2: #fbbf24; --n3: #818cf8; --n4: #fb7185; }

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

/* ---------- Nebel ---------- */
.nebula { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(120% 90% at 50% 0%, #120f33 0, var(--bg) 60%); }
.nebula i { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; filter: blur(90px); opacity: .62; mix-blend-mode: screen; animation: float 46s ease-in-out infinite alternate; }
.nebula i:nth-child(1) { left: -18vmax; top: -22vmax; background: radial-gradient(circle, var(--n1), transparent 65%); }
.nebula i:nth-child(2) { right: -22vmax; top: 4vmax; background: radial-gradient(circle, var(--n2), transparent 65%); animation-duration: 58s; animation-direction: alternate-reverse; }
.nebula i:nth-child(3) { left: 8vmax; bottom: -30vmax; background: radial-gradient(circle, var(--n3), transparent 65%); animation-duration: 64s; opacity: .38; }
.nebula i:nth-child(4) { right: 4vmax; bottom: -26vmax; width: 44vmax; height: 44vmax; background: radial-gradient(circle, var(--n4), transparent 65%); animation-duration: 52s; opacity: .34; }
@keyframes float { from { transform: translate(0, 0) scale(1); } to { transform: translate(9vmax, 6vmax) scale(1.18); } }
#stars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; }
/* Lichtfleck, der dem Zeiger folgt */
.nebula b { position: absolute; left: 0; top: 0; width: 46vmax; height: 46vmax; margin: -23vmax 0 0 -23vmax; border-radius: 50%; opacity: .22; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff, transparent 60%); transform: translate(var(--px, 50vw), var(--py, 30vh)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
/* feines Korn gegen Farbstreifen */
.nebula::after { content: ""; position: absolute; inset: 0; opacity: .12;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Logo oben, Dock unten ---------- */
.top { position: absolute; z-index: 20; top: 0; left: 0; right: 0; padding: calc(18px + env(safe-area-inset-top, 0px)) clamp(16px, 4vw, 44px); }
.logo { color: #fff; text-decoration: none; display: inline-flex; align-items: baseline; gap: 10px; }
.logo b { font-weight: 900; font-size: 22px; letter-spacing: .3em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo span { font-size: 14px; color: var(--muted); }
.dock { position: fixed; z-index: 30; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; display: flex; gap: 2px; max-width: calc(100vw - 20px); padding: 6px; overflow-x: auto; scrollbar-width: none;
  border-radius: 999px; background: rgba(14, 12, 34, .86); border: 1px solid var(--line); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .7); }
.dock::-webkit-scrollbar { display: none; }
.dock a { padding: 9px 16px; border-radius: 999px; color: var(--body); text-decoration: none; font-size: 15px; white-space: nowrap; transition: color .25s, scale .25s; }
.dock a:hover { color: #fff; scale: 1.06; }
.dock a[aria-current] { background: var(--grad); color: #0b0920; font-weight: 700; }

/* ---------- Kapitel ---------- */
main { position: relative; z-index: 1; padding: 0 clamp(14px, 3.4vw, 44px) 16vh; }
.cloud { width: min(1240px, 100%); margin: 0 auto; scroll-margin-top: 0; }
.cloud-head { min-height: 68vh; display: flex; flex-direction: column; justify-content: flex-end; padding-block: 18vh 5vh; }
.cloud--1 .cloud-head { min-height: 96vh; min-height: 96svh; justify-content: center; padding-block: 14vh 8vh; }
.cloud-head h1, .cloud-head h2 { margin: 0; font-weight: 900; line-height: .9; letter-spacing: -.05em; text-wrap: balance;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.cloud-head h1 { font-size: clamp(60px, 13vw, 200px); }
.cloud-head h1 span { -webkit-text-stroke: 0; }
.cloud-head h2 { font-size: clamp(46px, 9vw, 136px); }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--body); margin-bottom: 12px; }
.cloud-head > p { margin: 22px 0 0; max-width: 44ch; font-size: clamp(18px, 1.8vw, 23px); line-height: 1.4; color: var(--body); }

/* ---------- Mosaik ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.sec { position: relative; grid-column: span 3; container-type: inline-size; min-width: 0; padding: clamp(20px, 2.6vw, 36px); border-radius: 30px; overflow: hidden; scroll-margin-top: 30px;
  background: var(--tile); border: 1px solid var(--line); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  transition: opacity .7s, translate .7s cubic-bezier(.2, .8, .2, 1), border-color .3s; }
.sec:nth-child(1) { grid-column: span 4; }
.sec:nth-child(2) { grid-column: span 2; }
.sec:nth-child(3):last-child { grid-column: 1 / -1; }
.sec:hover { border-color: rgba(255, 255, 255, .3); }
/* Lichtfleck in der Kachel (Position --mx/--my aus site.js) */
.sec::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .13), transparent 62%); }
.sec:hover::before { opacity: 1; }
.sec > * { position: relative; }
.js .sec.pre { opacity: 0; translate: 0 40px; }
.k { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec h2 { margin: 10px 0 14px; font-size: clamp(26px, 3.2vw, 42px); font-weight: 900; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.sec h3 { margin: 26px 0 6px; font-size: 19px; font-weight: 800; }
.sec p, .sec li { color: var(--body); }
.sec p { margin: 0 0 13px; }
.sec ul:not(.badges) { margin: 0 0 13px; padding-left: 1.2em; }
.sec li::marker { color: var(--n3); }
.lead { font-size: 19px; color: #fff !important; }

.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 22px; margin: 18px 0 0; }
.facts dt, .facts dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); }
.facts dt { font-size: 12px; line-height: 2.2; 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: 12px 0 16px; font-variant-numeric: tabular-nums; }
.prices th, .prices td { padding: 11px 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: 900; font-size: 20px; color: #fff; }
.badges { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 16px; padding: 0; }
.badges li { padding: 5px 13px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 13px; color: #fff; }
.note { margin: 18px 0 0 !important; padding: 13px 17px; border-radius: 18px; background: rgba(255, 255, 255, .07); font-size: 15px; }
.note b { color: #fff; }
.offen { border-bottom: 1px dashed var(--n3); cursor: help; }
.offen::after { content: " · offen"; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--n3); }

.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 12px; }
.cols > div { padding: 14px 16px; 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; }
/* Schmale Kacheln: Listen untereinander statt nebeneinander */
@container (max-width: 460px) {
  .cols { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .facts dd { border-top: 0; padding-top: 0; }
  .facts dt { padding-bottom: 0; }
}

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

.foto { position: relative; margin: 20px 0 0; border-radius: 22px; overflow: hidden; }
.foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.foto::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--grad); mix-blend-mode: soft-light; opacity: .55; }
.foto figcaption { position: absolute; z-index: 1; left: 12px; bottom: 12px; padding: 4px 12px; border-radius: 999px; background: rgba(11, 9, 32, .72); font-size: 13px; }
.foto.leer { aspect-ratio: 16 / 9; display: grid; place-items: center; border: 1px dashed var(--line); }
.foto.leer img, .foto.leer::after { display: none; }
.foto.leer figcaption { position: static; background: none; color: var(--muted); }
.foto.leer figcaption::before { content: "Foto folgt · "; color: var(--n3); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 4px; }
.btn { display: inline-block; padding: 12px 24px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .5); color: #fff; text-decoration: none; font-weight: 700; transition: background .2s, color .2s, translate .2s; }
.btn:hover { background: #fff; color: #0b0920; translate: 0 -2px; }
.btn--solid { border-color: transparent; background: var(--grad); color: #0b0920; }
.btn--solid:hover { background: #fff; }

footer.site { position: relative; z-index: 1; padding: 0 clamp(14px, 3.4vw, 44px) calc(92px + env(safe-area-inset-bottom, 0px)); }
footer.site .legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: 13px; color: var(--muted); }
footer.site a { color: var(--muted); }
footer.site a:hover { color: #fff; }

@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr; }
  .sec, .sec:nth-child(1), .sec:nth-child(2) { grid-column: 1 / -1; border-radius: 24px; }
  .logo span { display: none; }
  .dock a { padding: 8px 13px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :root { transition: none; }
  .nebula i { animation: none; }
  .nebula b { display: none; }
  .sec { transition: none; }
  .js .sec.pre { opacity: 1; translate: none; }
}