/* ASA Astroclub Solaris – Ideensammlung (Gestaltung übernommen aus der verworfenen Variante „Sternatlas“)
   Ein alter Himmelsatlas: Papier, Tinte, Kupferstich-Rahmen. Jedes Kapitel ist eine „Tafel“ mit eigenem Sternbild.
   Links eine feste Randleiste mit Skala; ein Stern wandert darauf mit dem Lesefortschritt.
   Hell = Tagkarte (Papier), Dunkel = Nachtkarte (Nachtblau mit Gold). */

:root {
  color-scheme: light;
  --paper: #f0e6d0;
  --paper-2: #e6d9bb;
  --ink: #1b2340;
  --soft: #3d4460;
  --muted: #7b745f;
  --rule: rgba(27, 35, 64, .6);
  --hair: rgba(27, 35, 64, .14);
  --accent: #9a2b1f;
  --gold: #9c7424;
  --photo: sepia(.6) saturate(.75) contrast(1.05);
  --grain: .2;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
  --rail: 250px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0d152c;
    --paper-2: #091022;
    --ink: #efe5cb;
    --soft: #cdc4ab;
    --muted: #8f8973;
    --rule: rgba(217, 182, 92, .6);
    --hair: rgba(217, 182, 92, .13);
    --accent: #e9bd62;
    --gold: #d9b65c;
    --photo: sepia(.35) saturate(.7) brightness(.82);
    --grain: .35;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0d152c;
  --paper-2: #091022;
  --ink: #efe5cb;
  --soft: #cdc4ab;
  --muted: #8f8973;
  --rule: rgba(217, 182, 92, .6);
  --hair: rgba(217, 182, 92, .13);
  --accent: #e9bd62;
  --gold: #d9b65c;
  --photo: sepia(.35) saturate(.7) brightness(.82);
  --grain: .35;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); font: 18px/1.65 var(--serif); overflow-x: hidden;
  /* Kartennetz wie auf einem Atlasblatt */
  background:
    linear-gradient(var(--hair) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(90deg, var(--hair) 1px, transparent 1px) 0 0 / 96px 96px var(--paper); }
/* Papierkorn */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--grain);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--ink); color: var(--paper); padding: 8px 14px; }
.skip:focus { left: 16px; }

/* ---------- Randleiste ---------- */
.rail { position: fixed; z-index: 10; inset: 0 auto 0 0; width: var(--rail); display: flex; flex-direction: column; gap: 34px;
  padding: 30px 26px 26px; border-right: 4px double var(--rule); background: var(--paper); }
.logo { color: var(--ink); text-decoration: none; display: block; }
.logo b { display: block; font-size: 44px; font-weight: 400; letter-spacing: .28em; line-height: 1; }
.logo span { display: block; margin-top: 8px; font-variant: small-caps; letter-spacing: .14em; font-size: 15px; color: var(--muted); }
/* Navigation als Skala: Teilstriche links, der Stern markiert den Lesefortschritt (--prog aus site.js) */
.nav { position: relative; display: flex; flex-direction: column; border-left: 1px solid var(--rule); margin-left: 8px; }
.nav::after { content: "✦"; position: absolute; left: -.5em; top: calc(var(--prog, 0) * 100%); translate: 0 -50%; width: 1em; text-align: center;
  font-size: 22px; line-height: 1; color: var(--accent); background: var(--paper); border-radius: 50%; }
.nav a { position: relative; display: grid; grid-template-columns: 2.1em 1fr; align-items: baseline; padding: 11px 0 11px 22px; color: var(--soft); text-decoration: none; line-height: 1.25; }
.nav a::before { content: ""; position: absolute; left: 0; top: 0; width: 12px; border-top: 1px solid var(--rule); }
.nav a:last-child::after { content: ""; position: absolute; left: 0; bottom: 0; width: 12px; border-top: 1px solid var(--rule); }
.nav i { color: var(--gold); font-size: 15px; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--accent); font-style: italic; }
.rail-foot { margin-top: auto; }
.coords { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.theme-btn { font: inherit; font-size: 15px; font-variant: small-caps; letter-spacing: .12em; color: var(--ink); background: transparent; border: 1px solid var(--rule); padding: 5px 14px; cursor: pointer; }
.theme-btn:hover { background: var(--ink); color: var(--paper); }

/* ---------- Tafeln ---------- */
main { position: relative; z-index: 1; margin-left: var(--rail); padding: clamp(28px, 4.5vw, 64px) clamp(18px, 4.5vw, 64px) 0; }
.plate { position: relative; max-width: 1060px; margin: 0 auto clamp(56px, 8vw, 110px); padding: clamp(22px, 4vw, 56px); scroll-margin-top: 24px;
  border: 1px solid var(--rule); outline: 1px solid var(--rule); outline-offset: 5px;
  background: color-mix(in srgb, var(--paper) 88%, transparent); }
.plate::before { content: "✦"; position: absolute; top: 0; left: 50%; translate: -50% -58%; padding: 0 .7em; background: var(--paper); color: var(--gold); font-size: 20px; line-height: 1; }
.tafel { margin: 0 0 14px; font-variant: small-caps; letter-spacing: .16em; font-size: 16px; color: var(--accent); }
.plate-head { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.plate--title .plate-head { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
.plate-title h1, .plate-title h2 { margin: 0; font-weight: 400; line-height: .98; letter-spacing: -.015em; text-wrap: balance; }
.plate-title h1 { font-size: clamp(50px, 6.6vw, 104px); }
.plate-title h1 span { font-style: italic; color: var(--accent); }
.plate-title h2 { font-size: clamp(38px, 5.6vw, 76px); font-style: italic; }
.plate-title .eyebrow { font-variant: small-caps; letter-spacing: .14em; color: var(--muted); font-size: 16px; margin-bottom: 6px; }
.plate-title p:not(.tafel) { margin: 20px 0 0; max-width: 46ch; color: var(--soft); font-style: italic; }

/* Sternbilder und Planisphäre (SVG aus site.js) */
.constellation svg, .planisphere svg { display: block; width: 100%; height: auto; overflow: visible; }
.constellation .line { fill: none; stroke: var(--ink); stroke-width: .5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s ease .15s; }
.constellation.in .line { stroke-dashoffset: 0; }
.constellation .dot { fill: var(--ink); opacity: 0; transition: opacity .5s; }
.constellation.in .dot { opacity: 1; }
.constellation .main { fill: var(--accent); }
.constellation .faint { fill: var(--muted); }
.constellation text, .planisphere text { font: italic 4.2px var(--serif); fill: var(--muted); }
.planisphere { aspect-ratio: 1; }
.planisphere .ring { fill: none; stroke: var(--rule); stroke-width: .35; }
.planisphere .ring--thin { stroke: var(--hair); stroke-width: .5; }
.planisphere .tick { stroke: var(--rule); stroke-width: .35; }
.planisphere .star { fill: var(--ink); }
.planisphere .pole { fill: var(--accent); }
.planisphere .disc { transform-origin: 100px 100px; transform: rotate(var(--rot, 0deg)); }
.planisphere .window { fill: none; stroke: var(--accent); stroke-width: .6; stroke-dasharray: 2 1.5; }

/* ---------- Abschnitte: Stichwort in der Randspalte, Inhalt daneben ---------- */
.sec { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); column-gap: 2rem; margin-top: 2.6rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); scroll-margin-top: 24px; }
.sec > * { grid-column: 2; min-width: 0; }
.sec > .k { grid-column: 1; grid-row: 1 / span 30; }
.k { font-variant: small-caps; letter-spacing: .12em; color: var(--accent); font-size: 17px; line-height: 1.3; padding-top: .35em; }
.k::before { content: "§ "; color: var(--gold); }
.sec h2 { margin: 0 0 .5em; font-weight: 400; font-size: clamp(27px, 3.2vw, 40px); line-height: 1.1; text-wrap: balance; }
.sec h3 { margin: 1.6em 0 .3em; font-weight: 400; font-style: italic; font-size: 23px; }
.sec h3:first-of-type:nth-child(2) { margin-top: 0; }
.sec p { margin: 0 0 .9em; max-width: 62ch; }
.sec ul:not(.badges) { margin: 0 0 .9em; padding-left: 1.1em; }
.sec li::marker { color: var(--gold); }
.lead { font-size: 21px; }
.lead::first-letter { float: left; font-size: 3.3em; line-height: .82; padding: .06em .09em 0 0; color: var(--accent); }

.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 1.3em 0 0; }
.facts dt, .facts dd { margin: 0; padding: .55em 0; border-bottom: 1px dotted var(--rule); }
.facts dt { padding-right: 2em; font-variant: small-caps; letter-spacing: .1em; color: var(--muted); }
.facts dd ul { margin: 0; }
.prices { width: 100%; border-collapse: collapse; margin: 1.1em 0; font-variant-numeric: tabular-nums; }
.prices th, .prices td { padding: .55em 0; border-bottom: 1px dotted var(--rule); text-align: left; font-weight: 400; }
.prices td { text-align: right; white-space: nowrap; font-style: italic; color: var(--accent); }
.badges { list-style: none; margin: .9em 0 1.1em; padding: 0; font-style: italic; color: var(--soft); }
.badges li { display: inline; }
.badges li + li::before { content: "  ✦  "; color: var(--gold); font-style: normal; font-size: .7em; vertical-align: .15em; }
.note { margin: 1.3em 0 0 !important; padding: .1em 0 .1em 1em; border-left: 4px double var(--accent); font-style: italic; font-size: 17px; color: var(--soft); }
.note b { font-style: normal; color: var(--ink); }
.offen { border-bottom: 1px dashed var(--accent); cursor: help; }
.offen::after { content: " (offen)"; font-variant: small-caps; letter-spacing: .08em; color: var(--accent); font-size: .85em; }

.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2em 2em; margin: .4em 0 1em; }
.cols > div { border-top: 1px solid var(--rule); padding-top: .5em; min-width: 0; }
.cols b { display: block; font-weight: 400; font-size: 21px; }
.cols p { margin: .15em 0 0; color: var(--soft); font-size: 16px; font-style: italic; }

.acc { border-top: 1px dotted var(--rule); }
.acc details { border-bottom: 1px dotted var(--rule); }
.acc summary { cursor: pointer; list-style: none; padding: .6em 2em .6em 0; position: relative; font-variant: small-caps; letter-spacing: .1em; font-size: 19px; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "✦"; position: absolute; right: 4px; top: .7em; font-size: 14px; color: var(--gold); transition: rotate .3s; }
.acc details[open] summary::after { rotate: 45deg; color: var(--accent); }
.acc details > div { padding-bottom: .4em; }

/* Abbildungen wie eingeklebte Stiche */
.foto { margin: 1.4em 0 .4em; padding: 7px 7px 0; border: 1px solid var(--rule); background: var(--paper); }
.foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: var(--photo); }
.foto figcaption { padding: 7px 0 8px; text-align: center; font-style: italic; font-size: 15px; color: var(--muted); }
.foto figcaption::before { content: "Abb. — "; font-variant: small-caps; letter-spacing: .1em; font-style: normal; }
.foto.leer { border-style: dashed; }
.foto.leer img { display: none; }
.foto.leer figcaption { padding: 3em 1em; }
.foto.leer figcaption::before { content: "Abbildung folgt — "; color: var(--accent); }

.actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 1.3em 0 .4em; }
.btn { display: inline-block; padding: .5em 1.3em; border: 1px solid var(--ink); color: var(--ink); background: var(--paper); text-decoration: none;
  font-variant: small-caps; letter-spacing: .12em; font-size: 18px; box-shadow: 4px 4px 0 var(--ink); transition: translate .15s, box-shadow .15s; }
.btn:hover { translate: 2px 2px; box-shadow: 2px 2px 0 var(--ink); }
.btn--solid { background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--accent); }
.btn--solid:hover { box-shadow: 2px 2px 0 var(--accent); }

footer.site { position: relative; z-index: 1; margin-left: var(--rail); padding: 0 24px calc(34px + env(safe-area-inset-bottom, 0px)); }
footer.site .legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; font-variant: small-caps; letter-spacing: .1em; font-size: 15px; color: var(--muted); }
footer.site a { color: var(--muted); }
footer.site a:hover { color: var(--accent); }

/* ---------- Schmal: Randleiste wird Kopfleiste ---------- */
@media (max-width: 1000px) {
  .rail { position: sticky; inset: 0 auto auto; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 0; border-right: 0; border-bottom: 4px double var(--rule); }
  .logo { margin-right: auto; }
  .logo b { display: inline; font-size: 24px; }
  .logo span { display: none; }
  .rail-foot { margin: 0; }
  .coords { display: none; }
  .nav { order: 3; flex: 0 0 100%; flex-direction: row; margin: 0; border-left: 0; border-top: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav::after, .nav a::before, .nav a:last-child::after { display: none; }
  .nav a { display: block; flex: none; padding: 9px 14px 10px 0; font-size: 16px; white-space: nowrap; }
  .nav i { margin-right: .4em; }
  main, footer.site { margin-left: 0; }
  .plate { scroll-margin-top: 112px; }
  .sec { scroll-margin-top: 112px; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .plate-head, .plate--title .plate-head { grid-template-columns: 1fr; }
  .plate--title .planisphere { max-width: 320px; margin-inline: auto; }
  .constellation { max-width: 240px; }
  .sec { grid-template-columns: 1fr; }
  .sec > *, .sec > .k { grid-column: 1; grid-row: auto; }
  .k { padding: 0 0 .3em; }
  .cols { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .facts dt { border-bottom: 0; padding-bottom: 0; }
  .facts dd { padding-top: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .constellation .line, .constellation .dot { transition: none; }
}

/* ---------- Ideensammlung: Zusätze zur Atlas-Gestaltung ---------- */
.back { display: inline-block; margin-bottom: 14px; font-variant: small-caps; letter-spacing: .1em; font-size: 16px; }
.plate--title .planisphere { cursor: grab; touch-action: none; }
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 3vw, 34px); margin: 1.2em 0 .6em; }
@media (max-width: 760px) { .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .figs .constellation { max-width: none; } }
button.btn { font-family: inherit; cursor: pointer; }
.constellation.noanim .line, .constellation.noanim .dot { transition: none; }

/* ---------- Zehn Spielereien ---------- */
.plate-head--wide { grid-template-columns: 1fr; }
.toys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px); margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
@media (max-width: 860px) { .toys { grid-template-columns: 1fr; } }
.toy { min-width: 0; }
.toy-no { margin: 0; font-variant: small-caps; letter-spacing: .14em; color: var(--accent); font-size: 16px; }
.toy h3 { margin: .1em 0 .6em; font-weight: 400; font-size: 27px; line-height: 1.15; }
.toy > p:last-child { margin: .8em 0 0; font-size: 16.5px; color: var(--soft); }
/* Bühne: ein Stück Nachthimmel, in beiden Farbmodi dunkel */
.stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--rule); background: radial-gradient(120% 100% at 50% 0%, #17204a, #070a1c 75%); color: #eef1f8; font-family: system-ui, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
.stage--plain, .stage--row { display: grid; place-items: center; touch-action: auto; padding: 16px; }
.stage--row { grid-auto-flow: column; gap: 18px; }
.stage .hint { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; text-align: center; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(238, 241, 248, .55); pointer-events: none; }
.stage .count { position: absolute; left: 12px; top: 10px; margin: 0; font-size: 13px; color: #ffd58a; }
.stage .btn { background: transparent; color: #eef1f8; border-color: #eef1f8; box-shadow: 4px 4px 0 #ff5a48; }
.readout { margin: 0; text-align: center; font-size: 12px; letter-spacing: .08em; color: rgba(238, 241, 248, .7); }
.readout b { display: block; font: 600 clamp(24px, 3.4vw, 36px)/1.1 ui-monospace, Menlo, Consolas, monospace; color: #ffd58a; letter-spacing: 0; }
.readout span { display: block; }
.toy-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 15px; font-variant: small-caps; letter-spacing: .1em; color: var(--muted); }
.toy-row input[type="text"] { flex: 1; min-width: 0; font: inherit; font-variant: normal; letter-spacing: 0; padding: 6px 10px; border: 1px solid var(--rule); background: transparent; color: var(--ink); }
.toy-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.toy-row .btn { font-size: 15px; padding: .3em 1em; box-shadow: 3px 3px 0 var(--ink); }
/* III Rotlicht: alles ausser Schwarz wird rot */
html.rotlicht body { filter: grayscale(1) sepia(1) saturate(9) hue-rotate(-48deg) brightness(.72) contrast(1.1); background-color: #000; }
html.rotlicht { background: #000; }
/* IV Mond */
.toy-moon { width: min(38%, 120px); }
.toy-moon .md { fill: #1b2140; stroke: rgba(255, 255, 255, .25); }
.toy-moon .ml { fill: #f4efdc; }
/* VI Sternschnuppe */
.toy-shoot { cursor: pointer; }
.toy-shoot .streak { position: absolute; width: 38%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #fff); rotate: 24deg; animation: toy-shoot .8s ease-out forwards; pointer-events: none; }
@keyframes toy-shoot { from { opacity: 0; translate: -30% -60%; } 25% { opacity: 1; } to { opacity: 0; translate: 90% 160%; } }
/* VII Sternenstaub */
.toy-dust i { position: absolute; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px #ffd58a; animation: toy-dust 1s ease-out forwards; pointer-events: none; }
@keyframes toy-dust { to { opacity: 0; scale: .2; translate: var(--dx, 0) var(--dy, 20px); } }
/* VIII Sternbild zeichnen */
.toy-draw { cursor: crosshair; }
.toy-draw svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.toy-draw polyline { fill: none; stroke: rgba(238, 241, 248, .7); stroke-width: 1; vector-effect: non-scaling-stroke; }
.toy-draw text { font: italic 13px Georgia, serif; fill: #ffd58a; text-anchor: middle; }
/* IX Okular */
.toy-lens { background: #000 url("../bilder/galaxie.jpg") center / cover; cursor: none; }
.toy-lens::before { content: ""; position: absolute; inset: 0; -webkit-backdrop-filter: blur(7px) brightness(.45); backdrop-filter: blur(7px) brightness(.45); }
.toy-lens .lens { 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 url("../bilder/galaxie.jpg") no-repeat; background-size: var(--bw, 200%) auto; background-position: var(--bx, 50%) var(--by, 50%); pointer-events: none; }
/* X Himmel */
.toy-sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* XI Alter */
.toy-age { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.toy-age input { width: 5em; font: 600 18px ui-monospace, Menlo, monospace; padding: 4px 8px; border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: #ffd58a; }
.ages { display: grid; grid-template-columns: repeat(5, auto); gap: 4px 16px; margin: 0; text-align: center; font-size: 12px; letter-spacing: .06em; }
.ages dt { grid-row: 2; color: rgba(238, 241, 248, .65); }
.ages dd { margin: 0; font: 600 clamp(15px, 2vw, 20px) ui-monospace, Menlo, monospace; color: #ffd58a; }
/* XII Licht */
.toy-light { display: grid; align-content: center; gap: 12px; padding: 14px 18px; touch-action: auto; }
.toy-light .track { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.toy-light .track i { position: relative; height: 1px; background: rgba(255, 255, 255, .3); }
.toy-light .track i::after { content: ""; position: absolute; top: -4px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px #ffd58a; animation: toy-light 2.3s linear infinite; }
/* 1,28 s Flugzeit, danach kurze Pause bis zum nächsten Lichtpunkt */
@keyframes toy-light { 0% { left: 0; opacity: 1; } 55.7% { left: calc(100% - 9px); opacity: 1; } 56%, 100% { left: calc(100% - 9px); opacity: 0; } }
.toy-light ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; font-size: 13px; color: rgba(238, 241, 248, .8); }
.toy-light li b { color: #ffd58a; font-family: ui-monospace, Menlo, monospace; }
@media (prefers-reduced-motion: reduce) { .toy-light .track i::after { animation: none; left: 50%; } }

/* ---------- Bewegte Plakatformen (aus dem Entwurf „Plakat“): r = Akzent, k = Tinte, p = Papier, l = Linie; --p = Scroll-Fortschritt 0..1 ---------- */
.formbox { border: 1px solid var(--rule); padding: clamp(14px, 3vw, 30px); overflow: hidden; }
.art { display: block; width: 100%; height: auto; overflow: visible; --red: var(--accent); }
.art .r { fill: var(--red); } .art .k { fill: var(--ink); } .art .p { fill: var(--paper); }
.art .l { fill: none; stroke: var(--ink); stroke-width: 3; }
.art .lr { fill: none; stroke: var(--red); stroke-width: 7; }
.art--eclipse .moon { transform: translateX(calc((var(--p, .3) - .5) * 780px)); }
.art--eclipse .corona { fill: none; stroke: var(--red); stroke-width: 5; stroke-dasharray: 3 13; opacity: var(--tot, 0); }
.art--dome .slit { transform-origin: 300px 440px; transform: rotate(calc((var(--p, .5) - .5) * 70deg)); }
.art--dome .star { transform: translate(calc((var(--p, .5) - .5) * -180px), calc((var(--p, .5) - .5) * 60px)); }
.art--orbits g { transform-origin: 300px 300px; }
.art--orbits .o1 { transform: rotate(calc(var(--p, 0) * 620deg)); }
.art--orbits .o2 { transform: rotate(calc(var(--p, 0) * 380deg + 120deg)); }
.art--orbits .o3 { transform: rotate(calc(var(--p, 0) * 230deg + 220deg)); }
.art--orbits .o4 { transform: rotate(calc(var(--p, 0) * 120deg + 40deg)); }
.art--dots .dot { fill: none; stroke: var(--ink); stroke-width: 3; transition: fill .25s; }
.art--dots .dot.on { fill: var(--ink); }
.art--dots .dot.me { fill: var(--red); stroke: var(--red); }
.art--coords text { font: 900 150px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.06em; }
.art--coords .cross { transform: translate(calc((1 - var(--p, .5)) * 150px - 60px), calc((var(--p, .5) - .5) * -150px)); }

/* ---------- Planetenuhr (aus dem Entwurf „Planetenuhr“) ---------- */
.orrery-demo { aspect-ratio: 16 / 11; display: grid; place-items: center; margin: 1.2em 0; touch-action: auto; --c: #c9c1b4; }
.orrery-demo svg { position: absolute; inset: 3%; width: 94%; height: 94%; }
.orbit-ring { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 1; stroke-dasharray: 2 6; }
.orbit-ring.active { stroke: var(--c); stroke-dasharray: none; stroke-opacity: .65; }
.sun-core { fill: #ffcf6b; }
.planet { cursor: pointer; }
.planet .halo { fill: none; stroke-width: 1.5; opacity: 0; transition: opacity .3s; }
.planet.active .halo { opacity: .9; }
.planet text { font: 600 13px system-ui, sans-serif; fill: rgba(238, 241, 248, .6); }
.planet.active text, .planet:hover text { fill: #fff; }
.planet .moonlet { fill: #cfd6e6; }
.pointer { stroke: var(--c); stroke-width: 1; stroke-dasharray: 3 5; opacity: .55; }
.orrery-demo .orrery-cap { position: absolute; left: 14px; bottom: 10px; margin: 0; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(238, 241, 248, .6); }
.orrery-demo .orrery-cap b { display: block; font-size: 20px; letter-spacing: .02em; text-transform: none; color: var(--c); }