@import url("schriften.css");
:root {
  --nacht: #14060f;
  --glut: #ff4a1c;
  --kern: #ffd9a6;
  --tusche: #2a0509;
  --schein: #fbeee2;
  --dunst: #c0a6a4;
  --anzeige: "Unbounded", system-ui, sans-serif;
  --text: "Geist", system-ui, sans-serif;
  --seite: clamp(22px, 6vw, 64px);
}
* { box-sizing: border-box; }
/* Die Seite öffnet in dunklem Orange, das sich zum Punkt zusammenzieht. Das gilt schon vor Schrift und Shader. */
html { -webkit-text-size-adjust: 100%; background: #361605; }
html.bekannt, html.nacht { background: var(--nacht); }
html, body { overflow-x: clip; }
body { position: relative; margin: 0; color: var(--schein); font: 400 1.0625rem/1.55 var(--text); }
a { color: inherit; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.wortmarke { display: block; height: 2.25rem; width: auto; flex: none; align-self: flex-start; }

.buehne { position: relative; height: 100svh; min-height: 600px; }
.licht { position: absolute; inset: 0; display: flex; flex-direction: column; padding: max(22px, env(safe-area-inset-top)) var(--seite) calc(7svh + 34px); color: var(--tusche); opacity: 0; }
.mitte { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.fuer { margin: 0; font: 600 clamp(1.125rem, 4.6vw, 1.75rem)/1 var(--anzeige); letter-spacing: -.01em; }
h1 { margin: .35em 0 0; font: 700 3rem/1.04 var(--anzeige); letter-spacing: -.035em; }
.notiz { max-width: 30em; margin: 1.1rem 0 0; line-height: 1.45; font-weight: 500; white-space: pre-line; }
.von { margin: .55rem 0 0; font-weight: 600; }
.hinab { align-self: flex-start; font-weight: 600; text-underline-offset: .25em; padding-block: .3rem; }
@media (min-width: 820px) { .licht { padding-bottom: calc(7svh + 34px + 11vw); } }

.schweif { position: relative; padding-inline: var(--seite); max-width: 72rem; margin-inline: auto; }
.linie { position: absolute; left: calc(var(--seite) + 3px); top: -5svh; width: 3px; border-radius: 3px; background: #ff7a2b30; opacity: 0; }
.linie i { position: absolute; left: 0; top: 0; width: 3px; height: 100%; transform: scaleY(0); transform-origin: 0 0; will-change: transform; border-radius: 3px; background: linear-gradient(#ff4a1c, #ff8a3c); }
#kopf { position: absolute; left: 0; top: 0; z-index: 2; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px #bcd4ffcc; pointer-events: none; opacity: 0; will-change: transform; }

/* Die Seite scrollt frei. Nur der Begleiter springt von Ring zu Ring, der aktive Halt leuchtet auf. */
.halt { position: relative; padding-left: clamp(26px, 6vw, 56px); padding-bottom: clamp(2.5rem, 7svh, 4.5rem); }
.halt::before { content: ""; position: absolute; left: -2px; top: 14px; width: 13px; height: 13px; border-radius: 50%; background: var(--nacht); border: 2px solid #5a2a2a; transition: border-color 500ms ease, box-shadow 500ms ease, transform 500ms cubic-bezier(.16, 1, .3, 1); }
.halt.erreicht::before { border-color: #ff8a3c; }
.halt.aktiv::before { border-color: var(--kern); box-shadow: 0 0 18px 3px #ff5a1f; transform: scale(1.45); }
.halt::after { content: ""; position: absolute; left: -2px; top: 14px; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--kern); opacity: 0; pointer-events: none; }
.halt.gelandet::after { animation: welle 900ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes welle { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(7); } }
.halt h2 { margin: 0; font: 700 clamp(2rem, 9.2vw, 4.25rem)/1.04 var(--anzeige); letter-spacing: -.035em; color: #c9b0ad; transition: color 500ms ease; overflow-wrap: anywhere; }
.halt.aktiv h2, .halt.erreicht h2 { color: var(--schein); }
.halt p { margin: .7rem 0 1rem; max-width: 31em; color: #ecdcd2; white-space: pre-line; }
.tun { display: inline-block; padding: .72rem 1.2rem; border-radius: 99px; background: var(--glut); color: var(--tusche); font-weight: 600; text-decoration: none; transition: transform 300ms cubic-bezier(.16, 1, .3, 1), background 200ms; }
.tun:hover { background: #ff6a3a; transform: scale(1.04); }
.tun:active { transform: scale(.97); }
.schirm { margin-top: 1.3rem; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: #1e2026; }
.schirm img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (min-width: 820px) {
  .halt.bild { display: grid; grid-template-columns: 1fr minmax(0, 1.4fr); grid-template-rows: auto 1fr; column-gap: 3.5rem; align-items: start; }
  .halt.bild .schirm { margin-top: 0; grid-column: 2; grid-row: 1 / span 2; max-height: 62svh; }
}
.schluss h2 { font-size: clamp(1.625rem, 7.2vw, 3.5rem); margin-bottom: 1.3rem; }
.halt.schluss { padding-bottom: 2.5rem; }
.gespraech { display: inline-block; padding: 1rem 1.6rem; border-radius: 99px; background: var(--schein); color: var(--tusche); font-weight: 600; font-size: 1.125rem; text-decoration: none; transition: transform 300ms cubic-bezier(.16, 1, .3, 1); }
.gespraech:hover { transform: scale(1.04); }
.klein, .halt p.klein { font-size: .9375rem; color: var(--dunst); max-width: 36em; }
details.klein summary { cursor: pointer; padding-block: .3rem; }
details ul { margin: .5rem 0; padding-left: 1.1rem; }
.leise { font: inherit; background: none; border: 0; padding: .4rem 0; color: inherit; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }

/* Code eingeben und Hinweise */
.eingang { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 1.4rem; padding: 2rem var(--seite); max-width: 34rem; margin-inline: auto; }
.eingang-marke { margin: 0; color: var(--schein); }
.eingang-marke .wortmarke { height: clamp(4rem, 19vw, 6.5rem); }
.eingang p { margin: 0; color: #ecdcd2; }
.feld { display: grid; gap: .4rem; }
.feld label { font-weight: 600; }
input { font: 600 1.125rem/1.3 var(--text); padding: .85rem 1rem; width: 100%; border-radius: 12px; border: 1.5px solid #6b5358; background: #241019; color: var(--schein); }
#code { font-family: var(--anzeige); letter-spacing: .04em; font-size: 1rem; }
input:focus { outline: 2px solid var(--kern); outline-offset: 1px; }
button.tun { font: inherit; font-weight: 600; border: 0; cursor: pointer; }
.fehler { color: #ffb3a7; }
.melden { display: grid; gap: .7rem; max-width: 28rem; }
.unten { padding: 0 var(--seite) 2rem; max-width: 72rem; margin-inline: auto; }
@media (prefers-reduced-motion: reduce) {
  .tun, .gespraech, .halt::before, .halt h2 { transition: none; }
  .halt.gelandet::after { animation: none; }
}
.offen { margin-top: 2.5rem; }
.stand { margin: .6rem 0 0; min-height: 1.4em; }
.halt p.stand.fehler { color: #ffb3a7; }
button.tun:disabled { opacity: .6; cursor: default; }
.halt .text > .tun:first-child, .halt .text > .gespraech:first-child { margin-top: .9rem; }
.uebergang { position: fixed; inset: 0; z-index: 10; background: #25112f; clip-path: circle(0 at 50% 50%); }
.uebergang.offen { clip-path: none; }
.rechte { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .35rem; max-width: 26rem; }
.rechte li { display: flex; align-items: center; gap: .45rem; padding: .45rem 0; border-top: 1px solid #ffffff1c; flex-wrap: wrap; }
.rechte-name { font-weight: 600; flex: 1 1 auto; }
.recht { font-size: .8125rem; padding: .05rem .55rem; border-radius: 99px; background: #ffffff14; color: var(--kern); }