/* ============================================================
   DIE SCHWELLE — die Seite vor dem Abend

   Sie laeuft auf den Stufen, Farben und Schriften von stil.css;
   hier steht nur, was es drinnen nicht gibt. Eine einzige
   Bildschirmhoehe, kein Scrollen, ein Wort.

   Drei Dinge, die hier anders sind als drinnen:

   1. Der Mond ist kein Hintergrund, sondern das einzige
      Bedienteil, das sich selbst erklaert. Er haengt an einem
      Finger statt am Scrollstand.

   2. Das Portraet hat keine Kante. Es ist ganzflaechig und an
      allen Seiten in die Nacht ausgeblendet -- so gibt es keinen
      Beschnitt, der auf einem Hochformat schiefginge.

   3. Alles, was leuchtet, faellt im sparsamen Modus und bei
      prefers-reduced-motion weg, ohne dass ein Wort verschwindet.
   ============================================================ */

.schwelle {
  /* Eine Buehne, kein Dokument -- aber kein overflow: hidden.
     Auf einem kurzen Schirm (ein iPhone SE, ein liegendes
     Telefon, ein Laptop mit 700 Pixeln Hoehe) passt der Satz
     nicht immer, und was dann abgeschnitten waere, waere das
     Eingabefeld. Lieber ein kurzes Stueck Scrollen als eine Tuer,
     die man nicht erreicht. */
  min-height: 100svh;
  overscroll-behavior: none;
}

/* ── Der Staub ───────────────────────────────────────────────
   Auf der Schwelle liegt er eine Ebene hoeher als auf der
   Einladung: Dort deckt das Kirchenfenster ihn im Kopf ab, hier
   gibt es nichts abzudecken, und vor dem Mond funkelt er besser
   als dahinter. Alles andere steht in stil.css. */
.staub { z-index: 0; }

/* ── Der Mond ───────────────────────────────────────────────
   Hintergrundelement, fest am Fenster, hinter allem: dieselbe
   Rolle wie auf der Einladung. Er haengt quer ueber dem Titel --
   screen laesst sein Schwarz in der Nacht verschwinden, und was
   bleibt, ist eine Scheibe hinter dem Namen.

   --zug-x und --zug-y kommen aus dem Skript und sind der Finger;
   --schweb ist der ruhige Atem, der ohne Finger weiterlaeuft. */

.gestirn {
  position: fixed; z-index: -1;
  top: clamp(-1rem, 1svh, 2rem);
  left: 50%;
  /* translate statt margin-left: Das nennt die Breite nicht ein
     zweites Mal, und jede Stufe weiter unten bleibt eine
     einzige Zeile. */
  translate: -50% 0;
  width: clamp(220px, 42vw, 540px);
  aspect-ratio: 1;
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}
.gestirn.zieht { cursor: grabbing; }

.gestirn-scheibe {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  /* closest-side, nicht der voreingestellte farthest-corner:
     Der reicht bis in die Ecken des quadratischen Kastens und
     laesst dessen Kanten stehen. Uebrig blieb ein schwarzes
     Quadrat um die Scheibe. */
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%,
    #000 0%, #000 86%, rgba(0,0,0,0.6) 96%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(circle closest-side at 50% 50%,
    #000 0%, #000 86%, rgba(0,0,0,0.6) 96%, rgba(0,0,0,0) 100%);
  transform: translate3d(var(--zug-x, 0px), calc(var(--zug-y, 0px) + var(--schweb, 0px)), 0);
  animation: gestirnKommt 2.8s var(--aus) 0.8s forwards;
}

@keyframes gestirnKommt { to { opacity: 0.42; } }

/* ── Die Buehne ──────────────────────────────────────────────
   Eine Spalte, mittig. Passt sie in den Schirm, steht sie in
   dessen Mitte; passt sie nicht, wird gescrollt. */

.tor {
  /* Der weiche Grund unter dem Satz ragt ueber den Satzspiegel
     hinaus. Ohne clip waere die Seite bei 434 Pixeln 498 breit.
     clip statt hidden: Es entsteht kein neuer Scrollbehaelter. */
  overflow-x: clip;
  min-height: 100svh;
  display: flex;
  align-items: center; justify-content: center;
  padding-block: clamp(2rem, 5vh, 4rem);
  padding-inline: var(--rand);
  /* Die Buehne nimmt keine Zeiger an, nur der Satz in ihrer
     Mitte. Sonst laege sie ueber dem Mond und niemand kaeme an
     ihn heran -- er liegt hinter ihr. */
  pointer-events: none;
}

/* ── Der Satz ────────────────────────────────────────────────── */

.tor-satz {
  position: relative; z-index: 3;
  isolation: isolate;
  pointer-events: auto;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(1rem, 2.4vh, 1.7rem);
  width: 100%;
  max-width: 34rem;
  text-align: center;
}

/* Ein weicher, dunkler Grund unter dem Satz. Ohne ihn haengt die
   Lesbarkeit daran, wo im Portraet gerade ein helles Stueck
   liegt -- und das ist auf jedem Format woanders. Er hat keine
   Kante, also sieht man ihn nicht, man liest nur besser. */
.tor-satz::before {
  content: '';
  position: absolute;
  inset: -12% -22%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 62% 54% at 50% 48%,
    rgba(7, 5, 14, 0.9) 0%, rgba(7, 5, 14, 0.62) 46%, rgba(7, 5, 14, 0) 76%);
}

.tor-kicker {
  margin: 0;
  font-family: var(--fell-sc);
  font-size: var(--t-marke);
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(243, 236, 224, 0.6);
  line-height: 1.8;
}

.tor-titel {
  margin: 0;
  font-family: 'CCSBjork', var(--fell), serif;
  font-weight: 300;
  /* Eine Stufe unter dem Titel drinnen: Hier steht er nicht
     allein auf einer Seite, sondern ueber einem Eingabefeld. */
  font-size: clamp(2.8rem, 10vw, 6.2rem);
  line-height: 1.12;
  padding-bottom: 0.06em;
  letter-spacing: 0.02em;
  color: var(--creme);
  text-shadow: 0 2px 34px rgba(4, 3, 8, 0.95), 0 0 12px rgba(4, 3, 8, 0.8);
}

.tor-text {
  margin: 0;
  font-family: var(--garamond);
  font-size: var(--t-vorspann);
  font-style: italic;
  line-height: 1.68;
  color: rgba(243, 236, 224, 0.82);
  max-width: 30ch;
  text-wrap: balance;
}

.tor-zeile {
  margin: 0;
  font-family: var(--fell);
  font-size: var(--t-gross);
  line-height: 1.4; letter-spacing: -0.01em;
  color: var(--ocker);
  max-width: 24ch;
  text-wrap: balance;
}

/* ── Der Spruch ──────────────────────────────────────────────
   Eine Linie, kein Kasten. Das Feld traegt keinen Platzhalter:
   Eine graue Geisterschrift im Feld waere das Einzige auf dieser
   Seite, das nach Formular aussieht. */

.spruch {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.6rem;
  width: 100%;
  margin-top: clamp(0.5rem, 1.6vh, 1.2rem);
}

.spruch-marke {
  font-family: var(--fell-sc);
  font-size: var(--t-marke);
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--akzent);
}

.spruch-zeile {
  display: flex; align-items: center; gap: 0.5rem;
  width: min(22rem, 100%);
  border-bottom: 1px solid rgba(212, 165, 116, 0.42);
  transition: border-color 500ms var(--aus), box-shadow 500ms var(--aus);
}
.spruch-zeile:focus-within {
  border-bottom-color: var(--akzent-hell);
  box-shadow: 0 10px 26px -18px rgba(212, 165, 116, 0.9);
}

.spruch-feld {
  flex: 1 1 auto;
  min-width: 0;
  /* 44 Pixel hoch, damit ein Daumen sie trifft. */
  min-height: 44px;
  padding: 0.5rem 0.2rem;
  border: 0; background: none;
  color: var(--creme);
  font-family: var(--fell);
  /* Mindestens 16px, sonst zoomt iOS beim Hineintippen die ganze
     Seite heran und die Buehne steht schief. */
  font-size: max(1rem, var(--t-text));
  letter-spacing: 0.1em;
  text-align: center;
  caret-color: var(--akzent);
}
.spruch-feld:focus { outline: none; }
.spruch-feld::selection { background: rgba(212, 165, 116, 0.35); }

.spruch-knopf {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 0; background: none;
  color: rgba(212, 165, 116, 0.75);
  cursor: pointer;
  transition: color 400ms var(--aus), transform 400ms var(--aus);
}
.spruch-knopf svg { width: 22px; height: 22px; }
.spruch-knopf:hover { color: var(--akzent-hell); transform: translateX(3px); }
.spruch-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

.spruch-hinweis {
  margin: 0;
  font-family: var(--garamond); font-style: italic;
  font-size: var(--t-klein);
  color: rgba(245, 241, 232, 0.42);
}

.spruch-antwort {
  position: absolute;
  left: 50%; top: calc(100% + 0.25rem);
  transform: translateX(-50%);
  width: max-content; max-width: 100%;
  margin: 0;
  font-family: var(--garamond); font-style: italic;
  font-size: var(--t-klein);
  color: rgba(224, 138, 102, 0.9);
  opacity: 0;
  transition: opacity 500ms var(--aus);
}
.spruch-antwort.da { opacity: 1; }

/* Ein kurzes Zoegern statt eines roten Randes. */
.spruch-zeile.irrt { animation: zoegern 520ms ease-in-out; }
@keyframes zoegern {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  62% { transform: translateX(-3px); }
  82% { transform: translateX(2px); }
}

/* ── Das Bildnis ───────────────────────────────────────────
   Eine quadratische Platte unter dem Titel, Haarlinie statt
   Rahmen. Die Vorlage ist 620 Pixel breit; bei hoechstens 272
   gezeigter Breite bleibt auch auf einem Schirm mit doppelter
   Dichte Luft. */

.bildnis {
  margin: 0;
  width: min(17rem, 62%);
  border: 1px solid rgba(212, 165, 116, 0.22);
}
.bildnis img {
  display: block;
  width: 100%; height: auto;
  /* Die Aufnahme ist waermer als diese Nacht. Ein Hauch
     Entfaerbung holt sie in denselben Raum wie den Mond. */
  filter: saturate(0.86) brightness(0.9);
}

/* ── Die Musik ──────────────────────────────────────────────
   Hinter der Tuer: Sie steht unter dem Passwortfeld, damit das
   Feld das erste ist, was man sucht und findet. Dadurch darf das
   Fenster gross sein -- es kostet keine Hoehe mehr, die oben
   fehlen wuerde. */

.musik {
  width: min(34rem, 100%);
  aspect-ratio: 16 / 9;
  margin-top: clamp(0.4rem, 1.4vh, 1.2rem);
  border: 1px solid rgba(212, 165, 116, 0.22);
  background: #06040c;
  overflow: hidden;
}

.musik-fenster {
  display: block;
  width: 100%; height: 100%;
  border: 0;
}

@media (min-width: 1000px) {
  .musik { width: min(44rem, 64vw); }
  /* Eine Zeile statt zweier -- auf einem Laptop sind das 80
     Pixel, die das Passwortfeld ueber den Rand heben wuerden. */
  .tor-text { max-width: 54ch; }
  .tor-zeile { max-width: 46ch; }
  .tor-titel { font-size: clamp(2.8rem, 6.4vw, 4.8rem); }
}

/* ── Ohne Skript ─────────────────────────────────────────── */

.ohne-skript {
  position: fixed; z-index: 30;
  left: 50%; bottom: var(--rand);
  transform: translateX(-50%);
  max-width: min(34rem, calc(100vw - 2 * var(--rand)));
  margin: 0;
  padding: 1rem 1.2rem;
  border: 1px solid var(--linie);
  background: rgba(10, 8, 16, 0.92);
  text-align: center;
  font-family: var(--garamond); font-style: italic;
  font-size: var(--t-klein);
  color: var(--text-weich);
}
.ohne-skript a { color: var(--akzent); }

/* ── Wer es ruhiger braucht ──────────────────────────────────
   Der Mond steht still. Den Staub nimmt stil.css zurueck. Kein
   Wort, kein Bild und kein Bedienteil verschwindet. */

@media (prefers-reduced-motion: reduce) {
  .gestirn-scheibe { opacity: 0.42; animation: none; }
  .spruch-zeile.irrt { animation: none; }
}

@media (prefers-contrast: more) {
  .gestirn-scheibe { opacity: 0.28; }
  .tor-text { color: var(--creme); }
  .spruch-hinweis { color: rgba(245, 241, 232, 0.7); }
  .spruch-zeile { border-bottom-color: var(--akzent-hell); }
  .bildnis, .musik { border-color: rgba(212, 165, 116, 0.5); }
}

/* ── Stehende Telefone ───────────────────────────────────────
   Die Spalte ist hier laenger als der Schirm. Sie darf scrollen
   -- aber die Tuer soll man sehen, ohne danach zu suchen.
   Deshalb ruecken Bildnis, Titel und Abstaende zusammen.
   Gemessen bei 360x640, 390x844 und 414x896. */

@media (max-width: 859px) {
  .bildnis { width: min(11rem, 46%); }
  .tor { padding-block: clamp(1rem, 2.6vh, 1.8rem); }
  .tor-satz { gap: clamp(0.6rem, 1.5vh, 1.05rem); }
  .tor-titel { font-size: clamp(2.4rem, 9vw, 4rem); }
  .tor-text { font-size: var(--t-text); line-height: 1.56; }
  .tor-zeile { font-size: var(--t-vorspann); }
}

/* ── Kurze Schirme ─────────────────────────────────────────── */

@media (max-height: 800px) {
  .tor { padding-block: clamp(0.9rem, 2.2vh, 1.5rem); }
  .tor-satz { gap: clamp(0.5rem, 1.3vh, 0.95rem); }
  .tor-titel { font-size: clamp(2.2rem, 8vw, 3.8rem); }
}

/* Kurze Schirme: Das Bildnis gibt nach, denn es steht ueber dem
   Passwortfeld. Das Fenster bleibt, wie es ist -- es steht
   darunter und nimmt dem Feld keine Hoehe mehr weg. */
@media (max-height: 800px) {
  .bildnis { width: min(10rem, 42%); }
}

@media (min-width: 1000px) and (max-height: 800px) {
  .bildnis { width: min(13rem, 20vw); }
  .tor-titel { font-size: clamp(2.4rem, 5.2vw, 4rem); }
}

/* ── Liegende Telefone ───────────────────────────────────────
   Es gibt keine Hoehe. Das Bildnis tritt neben den Satz statt
   darueber, damit die Spalte nicht doppelt so lang wird wie der
   Schirm. */

@media (max-height: 560px) and (orientation: landscape) {
  .tor { padding-block: 1rem; }
  .tor-satz { gap: 0.45rem; }
  .tor-titel { font-size: clamp(1.9rem, 6.4vh, 3rem); }
  .tor-kicker { font-size: 0.6rem; }
  .tor-text { display: none; }
  .bildnis { display: none; }
  .musik { width: min(20rem, 100%); }
  .spruch { margin-top: 0.2rem; gap: 0.4rem; }
  .gestirn { width: clamp(160px, 46svh, 300px); }
}