/* Volkssternwarte Ellerholz. Seitenstil. Die Engine-Klassen (.sc-*, [data-sc-*])
   bleiben unangetastet; hier stehen Marke, der feste Himmel und die Bühnen. */
:root {
  --sc-canvas:     #06080C;
  --sc-surface:    #0B0E14;
  --sc-ink:        #ECE7DC;
  --sc-ink-soft:   #AEB6C1;
  --sc-accent:     #E0574A;
  --sc-accent-ink: #160A09;
  --sc-font-display: "Tenor Sans", Georgia, serif;
  --sc-font-text:    "Golos Text", system-ui, sans-serif;
  --sc-font-mono:    "Golos Text", system-ui, sans-serif;
  --sc-shadow-color: 222 40% 2%;
  --papier: #E9E3D5;
  --papier-tinte: #23201B;
  --horizont: 75vh;
  --horizont-px: 75vh;
  color-scheme: dark;
}
html { background: var(--sc-canvas); scrollbar-color: #2C323C var(--sc-canvas); }
body { font-family: var(--sc-font-text); background: var(--sc-canvas); color: var(--sc-ink); }
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 3px; }

/* Anzeige: Tenor Sans hat nur einen Schnitt. Heller Text auf Nacht bekommt etwas
   mehr Laufweite und Zeilenabstand statt mehr Gewicht. */
.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.04;
  text-wrap: balance;
}
.sc-display--xl { font-size: clamp(2.6rem, 1.5rem + 4.2vw, 5.6rem); }
.sc-display--lg { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.8rem); line-height: 1.06; }
.sc-body { color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.62; letter-spacing: .006em; max-width: 34ch; }
@media (max-width: 860px) {
  .sc-display--xl { font-size: clamp(2.1rem, 1.3rem + 4.4vw, 2.9rem); }
  .sc-display--lg { font-size: clamp(1.75rem, 1.2rem + 2.8vw, 2.3rem); }
  .sc-body { font-size: 1.04rem; max-width: 36ch; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .sc-display--xl { font-size: 1.95rem; }
  .sc-display--lg { font-size: 1.6rem; }
  .sc-body { font-size: .98rem; line-height: 1.55; }
}

/* ---------- Der feste Himmel ---------- */
.himmel {
  position: fixed; inset: 0; height: 100lvh; z-index: 0; pointer-events: none;
  --abend: .85; --morgen: 0;
  background:
    radial-gradient(70vw 48vh at 0% var(--horizont), rgb(40 62 104 / calc(var(--abend) * .55)), transparent 70%),
    radial-gradient(60vw 44vh at 100% var(--horizont), rgb(52 74 112 / calc(var(--morgen) * .6)), transparent 70%),
    radial-gradient(90vw 70vh at var(--pol-x, 60%) 30%, #0A0E16, transparent 75%),
    var(--sc-canvas);
}
.ebene { position: fixed; top: 0; left: 0; pointer-events: none; max-width: none; }
.ebene--spuren { z-index: 1; }
.ebene--sterne { z-index: 2; }
.ebene--erde   { z-index: 3; }
.sc-grain { z-index: 4; }
main { position: relative; z-index: 5; }

/* ---------- Kopf: Wortmarke, Uhr der Nacht, Nachtplan ---------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.6rem);
  padding: 16px var(--sc-gutter);
  background: linear-gradient(color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 88%, transparent) 62%, transparent 100%);
  padding-bottom: 26px;
}
.wortmarke {
  font: 400 1.22rem/1 var(--sc-font-display); letter-spacing: .04em;
  color: var(--sc-ink); text-decoration: none; white-space: nowrap;
}
.wortmarke span { color: var(--sc-ink-soft); font-size: .78em; letter-spacing: .14em; text-transform: uppercase; margin-left: .3em; }
.uhr { margin: 0; display: flex; align-items: baseline; gap: .7rem; white-space: nowrap; }
.uhr__zeit { font: 400 1.22rem/1 var(--sc-font-display); font-variant-numeric: tabular-nums; color: var(--sc-ink); letter-spacing: .04em; }
.uhr__belichtet { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.nachtplan { margin-left: auto; position: relative; }
.nachtplan__knopf { display: none; }
.nachtplan__liste { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(.8rem, 1.6vw, 1.7rem); }
.nachtplan__liste a {
  display: flex; align-items: baseline; gap: .45rem; text-decoration: none;
  color: var(--sc-ink-soft); font-size: var(--sc-t-sm); padding: 6px 0; white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.nachtplan__liste time { font-variant-numeric: tabular-nums; color: color-mix(in oklab, var(--sc-ink-soft) 80%, var(--sc-canvas)); }
.nachtplan__liste a[aria-current] { color: var(--sc-ink); border-bottom-color: var(--sc-accent); }
.nachtplan__liste a[aria-current] time { color: var(--sc-accent); }
@media (hover: hover) and (pointer: fine) { .nachtplan__liste a:hover { color: var(--sc-ink); } }
@media (max-width: 1180px) { .nachtplan__liste span { display: none; } .nachtplan__liste time { color: inherit; } }
@media (max-width: 860px) {
  .kopf { gap: .9rem; padding: 12px 16px; }
  .wortmarke { font-size: 1.08rem; }
  .wortmarke span { display: none; }
  .uhr { gap: .5rem; }
  .uhr__zeit { font-size: 1.08rem; }
  .uhr__belichtet { font-size: .82rem; }
  .nachtplan__knopf {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
    border: 1px solid color-mix(in oklab, var(--sc-ink) 30%, transparent); border-radius: 3px;
    background: transparent; color: var(--sc-ink); font-size: .9rem; cursor: pointer;
  }
  .nachtplan__liste {
    position: absolute; right: 0; top: calc(100% + 8px); flex-direction: column; gap: 0;
    min-width: 13.5rem; padding: 6px 14px; border-radius: 3px;
    background: #0B0E14; border: 1px solid color-mix(in oklab, var(--sc-ink) 16%, transparent);
    box-shadow: 0 10px 30px hsl(var(--sc-shadow-color) / .6);
    opacity: 0; visibility: hidden; translate: 0 -4px;
    transition: opacity 180ms var(--sc-ease-out), translate 180ms var(--sc-ease-out), visibility 0s 180ms;
  }
  .nachtplan__liste.ist-offen { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
  .nachtplan__liste span { display: inline; }
  .nachtplan__liste a { padding: 10px 0; font-size: .95rem; }
}
@media (max-width: 520px) { .uhr__wort { display: none; } .uhr__belichtet { font-size: .78rem; } }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 24px; border-radius: 3px; cursor: pointer;
  font: 600 1rem/1 var(--sc-font-text); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  color: var(--sc-ink); background: transparent;
  border: 1.5px solid color-mix(in oklab, var(--sc-ink) 50%, transparent);
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.knopf:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .knopf:hover { border-color: var(--sc-accent); } }
/* Der volle Knopf: Rotlicht, darin ein feines Raster, über das ein Lichtstreif läuft. */
.knopf--voll {
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--sc-accent-ink); background: var(--sc-accent); border-color: var(--sc-accent);
}
.knopf--voll::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgb(22 10 9 / .16) 0.8px, transparent 1.2px);
  background-size: 5px 5px;
}
.knopf--voll::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgb(255 236 228 / .34) 50%, transparent 70%);
  translate: -120% 0; animation: streif 4.6s var(--sc-ease-in-out) infinite 1.2s;
}
@keyframes streif { 0%, 62% { translate: -120% 0; } 100% { translate: 120% 0; } }
@media (hover: hover) and (pointer: fine) { .knopf--voll:hover { background: #E86A5D; border-color: #E86A5D; } }
@media (prefers-reduced-motion: reduce) { .knopf--voll::after { animation: none; display: none; } }

/* ---------- Bühnen und Schleier ---------- */
/* .buehne erbt position: sticky von .sc-stage, hier nichts überschreiben */
.schleier { position: absolute; pointer-events: none; z-index: 0; }
.schleier--links, .schleier--ecke { -webkit-mask-image: linear-gradient(transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 12%, #000 88%, transparent 100%); }
.schleier--links {
  inset: 0 auto 0 0; width: min(58vw, 54rem);
  background: linear-gradient(90deg, color-mix(in oklab, var(--sc-canvas) 82%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 62%, transparent) 55%, transparent 100%);
}
.schleier--ecke {
  inset: auto auto 0 0; width: min(64vw, 58rem); height: 70%;
  background: radial-gradient(100% 100% at 0% 100%, color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 62%, transparent) 50%, transparent 78%);
}
.schleier--block {
  inset: -3rem -4rem; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--sc-canvas) 86%, transparent) 55%, transparent);
}
.schleier--band {
  inset: auto 0 0 0; height: 62%;
  background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 55%, transparent 100%);
}

.text { position: absolute; z-index: 2; left: var(--sc-gutter); max-width: min(36rem, 44vw); }
.text > div { position: absolute; inset: 0 auto auto 0; width: 100%; }
.text .sc-body { margin-top: 1.1rem; }
.text .knopf { margin-top: 1.8rem; }
.text--start { top: 24vh; max-width: min(40rem, 48vw); }
.text--bilder { top: 26vh; width: min(32rem, 40vw); }
.text--nacht { bottom: 7vh; width: min(34rem, 42vw); height: 15rem; }
.text--nacht > div { inset: auto auto 0 0; }
.text--abzug { top: 20vh; max-width: min(36rem, 44vw); }

@media (max-width: 860px) {
  .schleier--links, .schleier--ecke {
    inset: auto 0 0 0; width: auto; height: 64%;
    background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 72%, transparent) 60%, transparent 100%);
  }
  .text, .text--start, .text--bilder, .text--nacht, .text--abzug {
    top: auto; left: 16px; right: 16px; width: auto; max-width: none;
    bottom: calc(22px + env(safe-area-inset-bottom));
  }
  .text--bilder, .text--nacht { height: 12.5rem; }
  .text--bilder > div, .text--nacht > div { inset: auto 0 0 0; }
  .text .knopf { margin-top: 1.3rem; }
}

/* ---------- Erste Spuren ---------- */
.spuren { padding-block: clamp(6rem, 22vh, 14rem) clamp(5rem, 16vh, 10rem); }
.spuren__wrap { position: relative; }
.spuren__wrap > h2, .spuren__text { position: relative; z-index: 1; max-width: 40rem; }
.spuren__text { margin-top: 1.6rem; }
.spuren__wrap .schleier--block { inset: -5rem auto -5rem -6rem; width: min(56rem, 120vw); }
.spuren__rot { color: var(--sc-ink); border-left: 1px solid var(--sc-accent); padding-left: 1rem; }

/* ---------- Abzüge: drei Fotoabzüge, auf den Himmel gelegt ---------- */
.abzuege { padding-block: clamp(4rem, 12vh, 8rem) clamp(6rem, 18vh, 12rem); }
.abzuege__raster {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2vw, 2rem);
  align-items: start; position: relative;
}
.abzuege__kopf { grid-column: 1 / span 5; position: relative; padding-top: 2rem; }
.abzuege__kopf > :not(.schleier) { position: relative; z-index: 1; }
.abzuege__kopf .schleier--block { inset: -4rem -5rem; }
.abzug {
  margin: 0; position: relative; padding: 12px 12px 0;
  background-color: var(--papier);
  background-image:
    radial-gradient(rgb(35 32 27 / .05) 1px, transparent 1px),
    radial-gradient(rgb(255 255 255 / .35) 1px, transparent 1px);
  background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 5px;
  box-shadow: 0 1px 0 rgb(255 255 255 / .5) inset, 0 18px 40px -12px hsl(var(--sc-shadow-color) / .85), 0 4px 10px hsl(var(--sc-shadow-color) / .5);
}
.abzug img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.abzug figcaption { color: var(--papier-tinte); font-size: .95rem; line-height: 1.5; padding: 14px 4px 18px; max-width: 34ch; }
.abzug--a { grid-column: 7 / span 5; rotate: 1.1deg; }
.abzug--b { grid-column: 2 / span 4; margin-top: -8rem; rotate: -1.6deg; }
.abzug--c { grid-column: 7 / span 4; margin-top: 4rem; rotate: .7deg; }
@media (max-width: 860px) {
  .abzuege__raster { grid-template-columns: 1fr; row-gap: 2.6rem; }
  .abzuege__kopf, .abzug--a, .abzug--b, .abzug--c { grid-column: 1; margin-top: 0; }
  .abzug--a { margin-right: 10%; } .abzug--b { margin-left: 12%; } .abzug--c { margin-right: 6%; }
  .abzuege__kopf .schleier--block { inset: -3rem -2rem; }
}

/* ---------- Programm: seitlich über den Himmel ---------- */
.buehne--programm { display: flex; align-items: flex-end; }
.buehne--programm::before { content: none; }
.schiene {
  display: flex; align-items: flex-end; gap: clamp(2.4rem, 4vw, 4.4rem);
  padding: 0 var(--sc-gutter) clamp(2.5rem, 9vh, 6rem); position: relative; z-index: 2;
  width: max-content;
}
.angebot { flex: 0 0 auto; width: clamp(15rem, 19vw, 19rem); position: relative; padding-top: 1.1rem; border-top: 1px solid color-mix(in oklab, var(--sc-ink) 26%, transparent); }
.angebot h3 { margin: 0; font: 400 clamp(1.6rem, 1.2rem + 1vw, 2.2rem)/1.1 var(--sc-font-display); color: var(--sc-ink); }
.angebot p { margin: .8rem 0 0; color: var(--sc-ink-soft); font-size: 1rem; line-height: 1.58; }
.angebot .angebot__preis { color: var(--sc-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.angebot--kopf { width: clamp(18rem, 28vw, 27rem); border-top: 0; padding-top: 0; }
.angebot--kopf .sc-body { font-size: var(--sc-t-base); }
.angebot--schluss { width: clamp(16rem, 22vw, 22rem); border-top-color: var(--sc-accent); }
.angebot--schluss .sc-body { color: var(--sc-ink); font-size: var(--sc-t-base); }
/* Dunkles Band unter der Schiene, damit Spuren den Text nicht überstrahlen */
.buehne--programm .programm__band {
  position: absolute; inset: auto 0 0 0; height: 70%; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 78%, transparent) 50%, transparent 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .schiene > .angebot:not(:first-child) {
    opacity: calc(.55 + .45 * min(1, max(0, var(--sc-p, 0) * 3.2 - var(--i, 0) * .5)));
  }
}
@media (max-width: 860px) {
  .angebot { width: 78vw; }
  .angebot--kopf { width: 84vw; }
  .schiene { padding: 0 16px calc(28px + env(safe-area-inset-bottom)); gap: 2rem; }
}

/* ---------- Dein Abzug ---------- */
.text--abzug .sc-body b { color: var(--sc-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.hinweis { margin: .8rem 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); min-height: 1.4em; max-width: 40ch; }
.karte {
  position: absolute; z-index: 2; right: var(--sc-gutter); bottom: 12vh; width: min(21rem, 26vw);
  padding: 20px 22px 18px; color: var(--papier-tinte); rotate: -1.2deg;
  background-color: var(--papier);
  background-image:
    radial-gradient(circle at 0 50%, transparent 9px, transparent 9px),
    radial-gradient(rgb(35 32 27 / .05) 1px, transparent 1px);
  background-size: auto, 7px 7px;
  -webkit-mask: radial-gradient(circle 9px at 0 62%, transparent 98%, #000) , radial-gradient(circle 9px at 100% 62%, transparent 98%, #000);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  box-shadow: 0 20px 40px -14px hsl(var(--sc-shadow-color) / .9);
}
.karte p { margin: 0; }
.karte__kopf { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #6E3A33; padding-bottom: .7rem; border-bottom: 1px dashed rgb(35 32 27 / .35); }
.karte__datum { font: 400 1.5rem/1.15 var(--sc-font-display); margin-top: .8rem !important; }
.karte__zeit { font-weight: 600; margin-top: .3rem !important; font-variant-numeric: tabular-nums; }
.karte__text { font-size: .93rem; line-height: 1.5; margin-top: .7rem !important; color: #3B362E; }
.karte .knopf { margin-top: 1rem; color: var(--papier-tinte); border-color: rgb(35 32 27 / .6); min-height: 46px; }
@media (hover: hover) and (pointer: fine) { .karte .knopf:hover { border-color: #A33A2F; background: rgb(163 58 47 / .08); } }
.karte .hinweis { color: #4A443A; font-size: .85rem; }
.fuss {
  position: absolute; z-index: 2; left: var(--sc-gutter); right: var(--sc-gutter); bottom: 14px;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .8rem; color: var(--sc-ink-soft);
}
@media (max-width: 860px) {
  .buehne--abzug { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 0 16px calc(12px + env(safe-area-inset-bottom)); }
  .buehne--abzug .text--abzug, .karte, .fuss { position: relative; inset: auto; width: auto; max-width: none; }
  .text--abzug .sc-display--xl { font-size: 2rem; }
  .text--abzug .knopf { margin-top: 1rem; }
  .karte { rotate: -.6deg; padding: 14px 16px 12px; }
  .karte__text { display: none; }
  .karte__datum { font-size: 1.2rem; }
  .karte .knopf { min-height: 42px; margin-top: .7rem; }
  .fuss { font-size: .72rem; flex-direction: column; gap: 2px; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .karte__kopf { display: none; }
  .karte__datum { margin-top: 0 !important; }
  .hinweis { margin-top: .4rem; }
  .fuss span:last-child { display: none; }
}