/* Projekt 149 – dunkel, schlicht, klar. Eine Schrift: Arvo. */
@font-face { font-family: "Arvo"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/arvo-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Arvo"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/arvo-latin-700-normal.woff2") format("woff2"); }

:root {
  --nacht:  #101623;   /* Hintergrund, exakt wie im Bild */
  --marmor: #ece9e2;   /* Schrift und Linien */
  --grau:   #8b93a3;   /* Nebensachen */
  --linie:  #26314a;   /* Trennlinien */
  --feld:   #161f31;   /* Eingabefelder */
  --rand:   #34415e;   /* Ränder von Feldern */
  --fehler: #e5806f;
}

* { box-sizing: border-box; }
html { font-size: 112.5%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--nacht); color: var(--marmor);
  font-family: "Arvo", "Rockwell", "Roboto Slab", Georgia, serif; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--marmor); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--marmor); outline-offset: 3px; }

.kopf { padding: 1.5rem 2rem; }
.kopf a { font-weight: 700; text-decoration: none; }
.fuss { margin-top: auto; padding: 3rem 2rem 1.75rem; text-align: right; }
.fuss a { color: var(--grau); font-size: .9rem; text-decoration: none; }
.fuss a:hover { color: var(--marmor); }

main { width: 100%; max-width: 36rem; margin: 0 auto; padding: 3.5rem 1.5rem 0; }
h1 { font-size: 1.9rem; line-height: 1.2; margin: 0 0 .6rem; font-weight: 700; }
h2 { font-size: 1.1rem; line-height: 1.35; margin: 0; font-weight: 700; }
p { margin: 0 0 1rem; }
.unter { color: var(--grau); font-size: 1.05rem; margin-bottom: 2.6rem; }
.leise { color: var(--grau); }

/* Startseite */
main.start { max-width: 50rem; padding-top: 0; text-align: center; }
.bildrahmen { overflow: hidden; border-radius: 3px; }
.bild { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.vers { margin: .4rem 0 0; font-size: 1.1rem; line-height: 1.65; }

/* Seekarte und Zeitschlösser */
.route { display: grid; grid-template-columns: 1fr auto; column-gap: 1.5rem; row-gap: .4rem;
  padding: 1.3rem 0; border-top: 1px solid var(--linie); }
.route:last-child { border-bottom: 1px solid var(--linie); }
.route p { grid-column: 1 / -1; margin: 0; color: var(--grau); }
.zustand { color: var(--grau); font-size: .9rem; white-space: nowrap; }
.zustand.offen { color: var(--marmor); }
.route.zu h2 { color: var(--grau); }

/* Formulare */
label { display: block; font-weight: 700; margin: 0 0 .45rem; }
input[type=text], textarea {
  font: inherit; color: var(--marmor); background: var(--feld); width: 100%;
  border: 1px solid var(--rand); border-radius: 6px; padding: .6rem .8rem;
}
input[type=text]::placeholder, textarea::placeholder { color: #5f6880; }
input[type=text]:focus, textarea:focus { outline: none; border-color: var(--marmor); }
textarea { resize: vertical; }
.reihe { display: flex; gap: .6rem; }
.reihe input[type=text] { flex: 1; min-width: 0; }
button {
  font: inherit; font-weight: 700; color: var(--nacht); background: var(--marmor);
  border: 0; border-radius: 6px; padding: .6rem 1.15rem; cursor: pointer;
}
button:hover { background: #fff; }
button:disabled { opacity: .5; cursor: default; }
.antwort { min-height: 1.6em; margin: .8rem 0 0; color: var(--grau); }
.antwort.gut { color: var(--marmor); }
.antwort.schlecht { color: var(--fehler); }

/* Lotos */
.frage { margin: 0 0 2.1rem; }
.frage p { margin: 0 0 .6rem; }
.nr { color: var(--grau); margin-right: .35em; }
.felder, .loesungsfeld { display: flex; flex-wrap: wrap; gap: 5px; }
.felder input, .loesungsfeld span {
  width: clamp(1.8rem, calc((100vw - 4rem) / 9.8), 2.4rem); aspect-ratio: 1 / 1.1;
  text-align: center; text-transform: uppercase; font: inherit; font-weight: 700; font-size: 1.05rem;
  color: var(--marmor); background: var(--feld); border: 1px solid var(--rand); border-radius: 5px; padding: 0;
}
.felder input:focus { outline: none; border-color: var(--marmor); }
.felder input.mark, .loesungsfeld span {
  border-color: #6b7690;
  background: radial-gradient(circle, transparent 55%, rgba(236,233,226,.5) 57%, rgba(236,233,226,.5) 60%, transparent 62%), var(--feld);
}
.loesungsfeld { margin: .7rem 0 1.2rem; }
.loesungsfeld span { display: inline-flex; align-items: center; justify-content: center; }
.status { display: block; margin-top: .4rem; font-size: .9rem; color: var(--grau); }
.status.gut { color: var(--marmor); }
.status.schlecht { color: var(--fehler); }
.abschluss { border-top: 1px solid var(--linie); padding-top: 1.6rem; }
.abschluss h2 { margin-top: .4rem; }
.inschrift { font-size: 1.15rem; letter-spacing: .09em; word-spacing: .35em; line-height: 1.9; margin: .5rem 0 .9rem; }

/* Sirenen */
audio.sendung { display: block; width: 100%; margin: 1.6rem 0 1.2rem; color-scheme: dark; }
.vers-klein { margin-top: 2rem; font-style: normal; }

/* Hafen und Zwillinge */
.satz { font-size: 1.15rem; margin: 1.4rem 0 1.2rem; }
pre.zahlen, pre.block {
  font-family: ui-monospace, "SF Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  font-size: .78rem; line-height: 1.55; color: var(--marmor);
  background: var(--feld); border: 1px solid var(--rand); border-radius: 6px;
  padding: .9rem 1rem; margin: 0 0 1rem; overflow-x: auto; white-space: pre;
}
pre.zahlen { max-height: 26rem; }
pre.block { white-space: pre-wrap; word-break: break-all; }
h2.abstand { margin: 2.2rem 0 .7rem; }

/* Die Höhle */
main.weit { max-width: 52rem; }
.warnung { margin-bottom: 1.2rem; }
.terminal {
  background: #0b0f18; border: 1px solid var(--rand); border-radius: 8px;
  padding: .9rem 1rem; height: 32rem; overflow-y: auto; cursor: text;
  font-family: ui-monospace, "SF Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  font-size: .8rem; line-height: 1.5; color: var(--marmor);
}
.terminal #aus > div { white-space: pre-wrap; word-break: break-word; min-height: 1.5em; }
.terminal #aus > div.ein { color: #c9cdd6; }
.terminal .zeile { display: flex; align-items: baseline; }
.terminal #prompt { white-space: pre; }
.terminal input#cmd {
  flex: 1; min-width: 0; background: transparent; border: 0; border-radius: 0; outline: 0; padding: 0;
  font: inherit; color: var(--marmor); caret-color: var(--marmor);
}
.klein { font-size: .85rem; margin-top: .7rem; }

/* Ticket */
.ticket { margin-top: 2rem; border: 1px solid var(--rand); border-radius: 10px; padding: 1.4rem 1.5rem; }
.ticket h2 { font-size: 1.6rem; margin: .2rem 0 .3rem; }
.ticket .wert { font-size: 1.1rem; letter-spacing: .04em; word-spacing: .25em; margin: 0 0 .8rem; }

@media (max-width: 560px) {
  html { font-size: 106%; }
  .kopf { padding: 1.2rem 1.25rem; }
  .fuss { padding: 2.5rem 1.25rem 1.5rem; }
  main { padding-top: 2.4rem; padding-left: 1.25rem; padding-right: 1.25rem; }
  main.start { padding-left: 0; padding-right: 0; }
  .vers { padding: 0 1.25rem; }
  h1 { font-size: 1.65rem; }
  .terminal { height: 26rem; padding: .7rem .75rem; font-size: .78rem; }
  .terminal input#cmd { font-size: 16px; }
}