/* Startseite der Everstow UG. Eine durchgehende Miniaturwelt (scrollcraft, Modus worldflight).
   Geist wird selbst gehostet, kein CDN. Schrift steht unter OFL 1.1.
   Farben nach dem Website-Brief: Petrol als einzige Akzentfarbe, dunkles Blaugrau statt Schwarz.
   Das Orange der Lichtspuren gehört zur Szene, nicht zur Oberfläche. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/geist-latin.woff2") format("woff2");
}

:root {
  --sc-canvas:     #0B1518;
  --sc-surface:    #102C2A;
  --sc-ink:        #EEF4F3;
  --sc-ink-soft:   #A9BDBD;
  --sc-accent:     #56707A;
  --sc-accent-text: #9DB4BC; /* Links im Fließtext */
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Geist", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-shadow-color: 190 45% 3%;
  --licht: #F77620;
  --kopf-h: 4.5rem;
}

body { margin: 0; font-weight: 400; letter-spacing: 0; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

/* ---------- Kopf (Markup schreibt build.mjs) ---------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4);
  height: var(--kopf-h); padding-inline: var(--sc-gutter);
}
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sc-ink); }
.marke i { display: block; width: 26px; height: 26px; border-radius: 7px; background: var(--sc-accent); box-shadow: var(--sc-edge); }
.marke b { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
.kopf .menu { display: flex; align-items: center; gap: var(--sc-6); list-style: none; margin: 0; padding: 0; font-size: var(--sc-t-sm); font-weight: 500; }
.kopf .menu a { text-decoration: none; color: var(--sc-ink); transition: color var(--sc-d-fast) var(--sc-ease-out); }
.menue { position: relative; }
.menue > a { display: inline-block; padding-block: var(--sc-2); }
.menue .unter {
  display: none; position: absolute; top: 100%; right: -0.75rem; min-width: 13rem;
  list-style: none; margin: 0; padding: var(--sc-2);
  background: var(--sc-surface); border-radius: var(--sc-r-md); box-shadow: var(--sc-e2), var(--sc-edge);
}
.menue:hover .unter, .menue:focus-within .unter { display: block; }
.menue .unter a { display: block; padding: var(--sc-2) var(--sc-3); border-radius: var(--sc-r-sm); }
@media (hover: hover) and (pointer: fine) {
  .kopf .menu a:hover { color: var(--sc-ink-soft); }
  .menue .unter a:hover { background: color-mix(in oklab, var(--sc-ink) 7%, transparent); color: var(--sc-ink); }
}

/* ---------- Schrift über der Welt ---------- */
/* Ein Band oben, wo Kopf und Text stehen. Kein Vollbild-Schleier. */
.himmel {
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--sc-canvas) 80%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 45%, transparent) 26%,
    transparent 52%);
}
.schatten { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.schatten--links  { background: radial-gradient(88rem 64rem at 0% 0%, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 86%, transparent) 50%, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 76%, transparent 100%); }
.schatten--mitte  { background: radial-gradient(64rem 40rem at 50% 0%, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 86%, transparent) 50%, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 76%, transparent 100%); }
.schatten--spalte { background: linear-gradient(to right, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 88%, transparent) 42%, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 62%, transparent 80%); }
.schatten--rechts { background: radial-gradient(88rem 64rem at 100% 0%, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 86%, transparent) 50%, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 76%, transparent 100%); }

.block {
  position: absolute; top: calc(var(--kopf-h) + clamp(2rem, 9vh, 6rem));
  width: max-content; max-width: min(40rem, 86vw);
  will-change: opacity, transform;
}
.block--links  { left: var(--sc-gutter); }
.block--rechts { right: var(--sc-gutter); }
.block--mitte  { left: 50%; translate: -50% 0; text-align: center; max-width: min(46rem, 90vw); }

.block h1, .block > h2 {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
  color: var(--sc-ink);
}
.block h1 { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 5rem); max-width: 13ch; }
.block > h2 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 4rem); max-width: 16ch; }
.block--mitte > h2 { max-width: 18ch; margin-inline: auto; }
.block--mitte > p { margin-inline: auto; }
/* Freigegebener Satz oben. Ein Satz pro Zeile, nicht vier Bruchstücke. */
.held { max-width: min(50rem, 62vw); }
.block.held h1 { max-width: none; font-size: clamp(2.6rem, 1.2rem + 3.2vw, 4.4rem); }
.held h1 span { display: block; }
.block > p {
  margin: var(--sc-5) 0 0;
  max-width: 34ch;
  font-size: var(--sc-t-lg);
  line-height: 1.5;
  letter-spacing: 0.002em;
  color: color-mix(in oklab, var(--sc-ink) 86%, var(--sc-ink-soft));
  text-wrap: pretty;
  text-shadow: 0 1px 2px rgb(5 12 14 / 0.6), 0 2px 18px rgb(5 12 14 / 0.55);
}
.block h1, .block > h2 { text-shadow: 0 2px 4px rgb(5 12 14 / 0.35), 0 6px 30px rgb(5 12 14 / 0.45); }
.block > p a, .hinweis a { color: var(--sc-accent-text); }

.knopf {
  display: inline-flex; align-items: center; gap: var(--sc-2);
  margin-top: var(--sc-6);
  padding: 0.85rem 1.4rem;
  border-radius: var(--sc-r-sm);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 600; font-size: var(--sc-t-base); text-decoration: none; white-space: nowrap;
  box-shadow: var(--sc-e2), inset 0 1px 0 rgb(255 255 255 / 0.14);
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
button.knopf { border: 0; cursor: pointer; }
.knopf::after { content: "→"; transition: transform 160ms var(--sc-ease-out); }
.knopf:active { transform: translateY(1px) scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { background: color-mix(in oklab, var(--sc-accent) 86%, white); }
  .knopf:hover::after { transform: translateX(3px); }
}

/* Lösungs-Karten und Formularkarte. Dunkles Glas, Rand in Petrol (docs/website-texte.md). */
.kachel, .glas {
  background: color-mix(in oklab, var(--sc-surface) 58%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--sc-accent);
  border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e2), var(--sc-edge);
}
.kacheln { margin-top: var(--sc-6); display: grid; gap: var(--sc-3); max-width: 30rem; }
.kachel {
  display: grid; gap: var(--sc-1);
  padding: var(--sc-4) var(--sc-5);
  border-radius: var(--sc-r-md);
  text-decoration: none; color: var(--sc-ink);
  transition: transform 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.kachel .art { font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.kachel h2 { margin: 0; font-size: var(--sc-t-xl); font-weight: 700; letter-spacing: var(--sc-track-snug); }
.kachel p { margin: 0; font-size: var(--sc-t-sm); line-height: 1.5; color: var(--sc-ink-soft); }
.kachel .unten { display: flex; justify-content: space-between; align-items: center; gap: var(--sc-3); margin-top: var(--sc-2); font-size: var(--sc-t-sm); }
.kachel .pille { color: var(--sc-ink-soft); }
.kachel .weiter { font-weight: 600; color: var(--licht); white-space: nowrap; }
.kachel .weiter::after { content: " →"; }
.kachel:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .kachel:hover { background: color-mix(in oklab, var(--sc-surface) 76%, transparent); transform: translateY(-2px); }
}

/* Schluss. Formular und Fußzeile stehen im letzten Bild, die Seite endet an einem Ort. */
.schluss { width: min(36rem, 86vw); }
.glas.post { margin-top: var(--sc-5); padding: var(--sc-5); }
.formular { display: grid; gap: var(--sc-3); }
.formular .zeile { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-3); }
.formular label { display: grid; gap: var(--sc-1); font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink); }
.formular input, .formular textarea {
  width: 100%; box-sizing: border-box;
  padding: 0.7rem 0.85rem;
  font: inherit; font-size: var(--sc-t-base); font-weight: 400; color: var(--sc-ink);
  background: color-mix(in oklab, var(--sc-surface) 88%, transparent);
  border: 0; border-radius: var(--sc-r-sm);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 22%, transparent);
  transition: box-shadow var(--sc-d-fast) var(--sc-ease-out);
}
.formular textarea { resize: vertical; min-height: 5.5rem; }
.formular input:focus-visible, .formular textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sc-accent-text); }
.formular .knopf { justify-self: start; margin-top: var(--sc-1); }
.fangfeld { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.hinweis { margin: 0; max-width: 46ch; font-size: var(--sc-t-xs); line-height: 1.5; color: var(--sc-ink-soft); }
.antwort { margin: 0; font-size: var(--sc-t-base); line-height: 1.5; color: var(--sc-ink); }
.antwort:empty { display: none; }
.antwort:focus { outline: none; }
.post.gesendet .formular { display: none; }
.antwort.fehler { margin-top: var(--sc-3); font-size: var(--sc-t-sm); color: var(--licht); }
.fuss {
  display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-6); align-items: baseline;
  margin-top: var(--sc-8);
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
}
.fuss nav { display: flex; gap: var(--sc-5); }
.fuss a { color: var(--sc-ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .fuss a:hover { text-decoration: underline; } }

/* ---------- Karte: die Navigation dieser Welt ---------- */
.karte {
  transition: opacity var(--sc-d-base) var(--sc-ease-out);
  position: fixed; left: var(--sc-gutter); bottom: clamp(1.25rem, 4vh, 2.5rem); z-index: var(--sc-z-chrome);
  --stand: 0;
}
.karte ol {
  position: relative; display: flex; gap: clamp(1.25rem, 3vw, 2.75rem);
  list-style: none; margin: 0; padding: 0 0 0.9rem;
}
/* Die Linie unter den Wegpunkten füllt sich wie eine Lichtspur. */
.karte ol::before, .karte ol::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
}
.karte ol::before { background: color-mix(in oklab, var(--sc-ink) 18%, transparent); }
.karte ol::after { background: var(--licht); transform-origin: 0 50%; transform: scaleX(var(--stand)); }
.karte a {
  display: block; padding-block: var(--sc-2);
  font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.04em;
  color: var(--sc-ink-soft); text-decoration: none;
  text-shadow: 0 1px 2px rgb(5 12 14 / 0.8), 0 0 12px rgb(5 12 14 / 0.7);
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.karte a[aria-current="step"] { color: var(--sc-ink); }
@media (hover: hover) and (pointer: fine) { .karte a:hover { color: var(--sc-ink); } }

/* ---------- Signatur: Lichtspur unter dem Zeiger ---------- */
.spur {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 10; pointer-events: none; opacity: 0;
  transition: opacity 600ms var(--sc-ease-out);
  mix-blend-mode: screen;
}
.spur.an { opacity: 1; }

/* ---------- Telefon ---------- */
@media (max-width: 860px) {
  :root { --kopf-h: 3.75rem; }
  .block, .block--rechts, .block--links { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; max-width: none; }
  .block--mitte { translate: none; text-align: left; }
  .block--mitte > h2, .block--mitte > p { margin-inline: 0; }
  .block h1, .block.held h1 { font-size: clamp(2.2rem, 1.2rem + 5vw, 3rem); }
  .held { max-width: none; }
  .held h1 span { display: inline; }
  .block > h2 { font-size: clamp(1.9rem, 1.1rem + 4.4vw, 2.6rem); }
  .block > p { font-size: var(--sc-t-base); }
  .himmel {
    background: linear-gradient(to bottom,
      color-mix(in oklab, var(--sc-canvas) 86%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 55%, transparent) 38%,
      transparent 64%);
  }
  .schatten--spalte {
    background: linear-gradient(to bottom,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 90%, transparent) 72%,
      color-mix(in oklab, var(--sc-canvas) 40%, transparent) 90%,
      transparent 100%);
  }
  .schatten--links, .schatten--rechts {
    background: linear-gradient(to bottom,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 86%, transparent) 50%,
      color-mix(in oklab, var(--sc-canvas) 40%, transparent) 70%,
      transparent 84%);
  }
  .kacheln { max-width: none; }
  .fuss { margin-top: var(--sc-5); }
  .schluss { width: auto; top: calc(var(--kopf-h) + 0.75rem); }
  .glas.post { margin-top: var(--sc-4); padding: var(--sc-4); }
  .formular { gap: var(--sc-2); }
  .formular .zeile { grid-template-columns: 1fr; gap: var(--sc-2); }
  .formular input, .formular textarea { padding: 0.6rem 0.75rem; }
  .formular textarea { min-height: 4.5rem; }
  /* Am Ende braucht das Formular den Platz, die Karte tritt zurück. */
  .am-ende .karte { opacity: 0; pointer-events: none; }
  .karte { left: var(--sc-gutter); right: var(--sc-gutter); }
  .karte ol { justify-content: space-between; gap: 0; }
  .karte a { padding-block: var(--sc-3); }
  /* Querformat-Film auf Hochformat. Der Ausschnitt folgt dem Laden, nicht der Bildmitte. */
  /* --p1 und --p4 setzt start.js aus dem Fortschritt des eigenen Legs. */
  .sc-world__seg:nth-child(1) > :is(video, img) { object-position: calc(15% + var(--p1, 0) * 37%) 50%; }
  .sc-world__seg:nth-child(4) > :is(video, img) { object-position: calc(50% + var(--p4, 0) * 12%) 50%; }
}
@media (max-width: 420px) {
  .karte a { font-size: 0.68rem; letter-spacing: 0.02em; }
}

@media (prefers-reduced-motion: reduce) {
  .spur { display: none; }
  .karte ol::after { transition: none; }
}