/* Layout: Nachthimmel-Bühne – Text links, Teleskop rechts; Funktionen als Liste wie auf dem Rollup, Technik als Datenblatt. Bewusst nur dunkel. */
:root {
  --nacht: #070b1a;
  --tiefe: #0e1735;
  --tiefe-2: #13204a;
  --signal: #e8173f;
  --signal-hell: #ff6b83;
  --stern: #eef1f8;
  --nebel: #a3aecb;
  --linie: rgba(163, 174, 203, .18);
  --f-anzeige: "Saira", "Arial Narrow", system-ui, sans-serif;
  --f-text: "Open Sans", "Segoe UI", system-ui, sans-serif;
  --f-daten: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --breite: 72rem;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--nacht); color: var(--stern);
  font: 400 1.0625rem/1.65 var(--f-text);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--signal-hell); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--signal-hell); outline-offset: 3px; }
.rahmen {
  max-width: var(--breite); margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
h1, h2, h3 { font-family: var(--f-anzeige); text-wrap: balance; margin: 0; }
.etikett {
  font: 500 .75rem/1 var(--f-daten); letter-spacing: .14em; text-transform: uppercase; color: var(--nebel);
}

/* Kopfzeile */
.kopf { position: relative; z-index: 2; }
.kopf .rahmen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; flex-wrap: wrap; }
.kopf img { height: 44px; width: auto; display: block; }
.kopf nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.kopf nav a { color: var(--nebel); text-decoration: none; font: 600 .9rem/1 var(--f-text); }
.kopf nav a:hover { color: var(--stern); }

/* Bühne */
.buehne { position: relative; overflow: hidden; }
.buehne canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.buehne::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, var(--nacht)); pointer-events: none; }
.buehne .rahmen { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2rem; align-items: center; padding-block: 2.5rem 4rem; }
.buehne-text { min-width: 0; display: grid; gap: 1.4rem; }
.buehne h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); line-height: 1.02; font-weight: 700; letter-spacing: -.01em; }
.buehne h1 em { font-style: normal; color: var(--signal); }
.buehne p.einstieg { margin: 0; max-width: 34rem; font-size: 1.15rem; color: var(--nebel); }
.knoepfe { display: flex; gap: .8rem; flex-wrap: wrap; }
.knopf {
  display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.3rem; border-radius: 2px;
  font: 600 1rem/1 var(--f-text); text-decoration: none; border: 1px solid var(--signal); background: var(--signal); color: #fff; cursor: pointer;
}
.knopf.leise { background: transparent; color: var(--stern); border-color: var(--linie); }
.knopf:hover { filter: brightness(1.1); }
.buehne-bild { position: relative; min-width: 0; justify-self: center; width: min(100%, 26rem); }
.buehne-bild img { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.loesung {
  position: absolute; left: -1.5rem; bottom: 12%; padding: .7rem .9rem; background: rgba(14, 23, 53, .82);
  border: 1px solid var(--linie); border-left: 3px solid var(--signal); backdrop-filter: blur(6px);
  font: 400 .78rem/1.5 var(--f-daten); color: var(--stern); font-variant-numeric: tabular-nums; max-width: 15rem;
}
.loesung b { color: var(--signal-hell); font-weight: 500; letter-spacing: .08em; }
.loesung span { color: var(--nebel); }

/* Abschnitte */
section { padding-block: 4.5rem; }
.kopfzeile { display: grid; gap: .6rem; margin-bottom: 2.6rem; max-width: 40rem; }
.kopfzeile h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.1; font-weight: 600; }

/* Funktionen */
.funktionen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem 2.4rem; }
.funktion { min-width: 0; border-top: 1px solid var(--linie); padding-top: 1.1rem; display: grid; gap: .5rem; align-content: start; }
.funktion h3 { font-size: 1.3rem; font-weight: 600; color: var(--signal); }
.funktion p { margin: 0; color: var(--nebel); }

/* Lichtführung */
.band { background: var(--tiefe); }
.band .rahmen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3rem; align-items: center; }
.band img { width: 100%; max-width: 22rem; height: auto; justify-self: center; display: block; }
.band-text { min-width: 0; display: grid; gap: 1rem; max-width: 36rem; }
.band-text h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 600; line-height: 1.12; }
.band-text p { margin: 0; color: var(--nebel); }

/* Datenblatt */
.datenblatt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
.blatt { min-width: 0; }
.blatt h3 { font-size: 1.5rem; font-weight: 600; display: flex; align-items: baseline; gap: .7rem; padding-bottom: .8rem; border-bottom: 2px solid var(--signal); }
.blatt h3 small { font: 400 .8rem/1 var(--f-daten); color: var(--nebel); letter-spacing: .08em; }
.blatt dl { margin: 0; }
.blatt div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--linie); }
.blatt dt { font: 500 .78rem/1.5 var(--f-daten); text-transform: uppercase; letter-spacing: .1em; color: var(--nebel); }
.blatt dd { margin: 0; font-variant-numeric: tabular-nums; }
.blatt dd code { font: 500 .95em var(--f-daten); color: var(--stern); }
.foto { margin-top: 3rem; position: relative; }
.foto img { width: 100%; height: auto; max-height: 34rem; object-fit: cover; display: block; border-radius: 2px; }
.foto figcaption { margin-top: .6rem; color: var(--nebel); font-size: .9rem; }

/* Geplant + Weg */
.zweispaltig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
.zweispaltig > div { min-width: 0; display: grid; gap: 1rem; align-content: start; }
.zweispaltig h2 { font-size: 1.7rem; font-weight: 600; }
.geplant { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.geplant li { padding-left: 1.4rem; position: relative; color: var(--nebel); }
.geplant li::before { content: ""; position: absolute; left: 0; top: .62em; width: .55rem; height: .55rem; border: 1.5px solid var(--signal); border-radius: 50%; }
.weg { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.weg li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linie); }
.weg strong { font-family: var(--f-anzeige); font-weight: 600; font-size: 1.1rem; }
.weg span { color: var(--nebel); }

/* Anmeldung */
.anmeldung { background: linear-gradient(180deg, var(--tiefe-2), var(--tiefe)); }
.anmeldung .rahmen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.anmeldung h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; line-height: 1.1; }
.anmeldung h2 em { font-style: normal; color: var(--signal-hell); }
.formular { display: grid; gap: .8rem; min-width: 0; }
.formular label { font: 500 .8rem/1 var(--f-daten); letter-spacing: .1em; text-transform: uppercase; color: var(--nebel); }
.zeile { display: flex; gap: .6rem; flex-wrap: wrap; }
.zeile input {
  flex: 1 1 14rem; min-width: 0; padding: .85rem 1rem; border-radius: 2px; border: 1px solid var(--linie);
  background: var(--nacht); color: var(--stern); font: 400 1rem var(--f-text);
}
.formular .hinweis { margin: 0; font-size: .9rem; color: var(--nebel); min-height: 1.5em; }
.formular .hinweis.ok { color: var(--stern); }

/* Fuß */
.fuss { padding-block: 2.5rem; border-top: 1px solid var(--linie); }
.fuss .rahmen { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: center; color: var(--nebel); font-size: .92rem; }
.fuss img { height: 34px; width: auto; display: block; }
.adresse { font-family: var(--f-daten); color: var(--stern); user-select: all; }

@media (max-width: 860px) {
  .buehne .rahmen, .band .rahmen, .anmeldung .rahmen, .zweispaltig, .datenblatt { grid-template-columns: minmax(0, 1fr); }
  .funktionen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buehne-bild { width: min(100%, 20rem); }
  .loesung { left: 0; }
}
@media (max-width: 560px) {
  .funktionen { grid-template-columns: minmax(0, 1fr); }
  .blatt div, .weg li { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .kopf nav { gap: 1rem; }
  section { padding-block: 3.2rem; }
}

/* Ergänzungen für die Website-Fassung */
.zustimmung { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: start; font-size: .9rem; color: var(--nebel); }
.zustimmung input { margin-top: .3rem; accent-color: var(--signal); width: 1.05rem; height: 1.05rem; }
.honig { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formular .hinweis.fehler { color: var(--signal-hell); }
.fuss nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.fuss nav a { color: var(--nebel); }
.fuss nav a:hover { color: var(--stern); }
.textseite { padding-block: 3rem 5rem; }
.textseite .rahmen > * { max-width: 44rem; }
.textseite h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; margin-bottom: 1.6rem; }
.textseite h2 { font-size: 1.35rem; font-weight: 600; margin: 2.2rem 0 .6rem; color: var(--stern); }
.textseite h3 { font-size: 1.05rem; font-weight: 600; margin: 1.4rem 0 .4rem; }
.textseite p, .textseite li { color: var(--nebel); }
.textseite p { margin: 0 0 .9rem; }
.textseite ul { margin: 0 0 .9rem; padding-left: 1.2rem; }
.textseite strong { color: var(--stern); font-weight: 600; }
.textseite .stand { font: 400 .85rem var(--f-daten); color: var(--nebel); margin-top: 2.5rem; }
.meldung { padding-block: 5rem 6rem; }
.meldung .rahmen { display: grid; gap: 1.2rem; max-width: 40rem; margin-left: 0; }
.meldung h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; line-height: 1.1; }
.meldung p { margin: 0; color: var(--nebel); }