/*
  Mannaz — die Akte.

  Grund Tanne, Akzent Bernstein, Schrift Leinen. Rot ausschliesslich fuer
  Fristen; es ist die einzige weitere Farbe im Haus und verliert seine
  Wirkung, sobald es auch fuer anderes benutzt wird.

  Die App soll aussehen wie eine gut gefuehrte Akte, nicht wie ein
  Startup-Dashboard: eine Schrift, wenige Groessen, viel Weissraum. Keine
  Fortschrittsbalken, keine Prozentzahlen, keine Abzeichen — Mannaz kennt
  keine Punktestaende.

  Alle Zustaende laufen ueber Klassen. Es gibt in dieser App keinen einzigen
  Inline-Style; die CSP laesst keinen zu, und das ist Absicht.
*/

:root {
  /* Tanne, zweite Fassung (26.07.2026): dunkler und zugleich gesaettigter.
     Der erste Wert #0E2518 lag bei 10 % Helligkeit und 45 % Saettigung — er
     war heller als noetig und rutschte dabei ins Graugruene. Dunkler allein
     haette ihn ins Schwarze gezogen und von Helgis Nacht ununterscheidbar
     gemacht; deshalb geht die Saettigung mit hoch. Ergebnis: tiefer und
     trotzdem eindeutig gruen. */
  --tanne: #0a1f14; /* der Grund — 149° / 51 % / 8 % */
  --tanne-hoch: #103221; /* gehobene Flaeche: Karten, Leisten (~5 % heller) */
  --tanne-tief: #06110b; /* Vertiefungen: Eingabefelder */
  --bernstein: #d4b366; /* der Akzent — geteilt mit allen Knoten */
  --leinen: #ece5d3; /* die Schrift */
  --leinen-matt: rgba(236, 229, 211, 0.52);
  --rot: #cf6f5c; /* NUR Fristen und Fehler */
  --linie: rgba(212, 179, 102, 0.18); /* haarfein — dickere Linien wirken billig */

  --schrift: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Runen in einer Serifenschrift, wie bei Helgi. Eine Rune ist ein Zeichen
     mit Geschichte; in einer Grotesk sieht sie aus wie ein Symbol aus einer
     Werkzeugleiste. */
  --schrift-rune: Georgia, "Times New Roman", serif;
  --gross: 1.0625rem;
  --klein: 0.8125rem;

  --rand: 1.25rem;
  --luft: 1rem;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--tanne);
  color: var(--leinen);
  font-family: var(--schrift);
  font-size: var(--gross);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

#wurzel {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

noscript {
  display: block;
  padding: var(--rand);
  color: var(--leinen-matt);
}

/* -------------------------------------------------------------------- */
/* Rahmen: Kopfleiste, Inhalt, Reiter                                    */
/* -------------------------------------------------------------------- */

.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--luft);
  padding: max(0.75rem, env(safe-area-inset-top)) var(--rand) 0.75rem;
  border-bottom: 1px solid var(--linie);
  background: var(--tanne);
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Rueckweg ganz links, „Abmelden" ganz rechts. Nebeneinander waren sie eine
   Falle: der eine Knopf beendet die Sitzung, der andere verlaesst die App. */
.kopf-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.marke {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: var(--klein);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--leinen-matt);
}

.marke .rune {
  font-family: var(--schrift-rune);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--bernstein);
  letter-spacing: 0;
  text-transform: none;
}

/* Der einzige Weg nach draussen: die Rune ᚺ in Helgis Gold fuehrt zum Hub.
   Keine Leiste, keine Direktverbindung zu Kvasir — alle Wege laufen ueber
   Helgi, und das soll man beim Gehen merken. */
.rueckweg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--linie);
  border-radius: 50%;
  color: var(--bernstein);
  font-family: var(--schrift-rune);
  font-size: 1.25rem;
  text-decoration: none;
}

.rueckweg:active {
  background: var(--tanne-hoch);
}

.inhalt {
  flex: 1;
  padding: var(--rand);
  padding-bottom: 5.5rem;
  max-width: 44rem;
  width: 100%;
  margin: 0 auto;
}

.reiter {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  border-top: 1px solid var(--linie);
  background: var(--tanne);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 2;
}

.reiter button {
  flex: 1;
  appearance: none;
  background: none;
  border: none;
  color: var(--leinen-matt);
  font: inherit;
  font-size: var(--klein);
  letter-spacing: 0.06em;
  padding: 0.9rem 0.25rem;
  cursor: pointer;
}

.reiter button.aktiv {
  color: var(--bernstein);
  box-shadow: inset 0 2px 0 0 var(--bernstein);
}

/* -------------------------------------------------------------------- */
/* Ueberschriften und Karten                                             */
/* -------------------------------------------------------------------- */

.rubrik {
  margin: 1.75rem 0 0.75rem;
  font-size: var(--klein);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--leinen-matt);
}

.rubrik:first-child {
  margin-top: 0;
}

.karte {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  font: inherit;
  color: inherit;
  background: var(--tanne-hoch);
  border: 1px solid var(--linie);
  border-radius: 4px;
  padding: var(--luft);
  margin-bottom: 0.75rem;
  cursor: pointer;
}

.karte:active {
  border-color: var(--bernstein);
}

.karte-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.karte-titel {
  color: var(--bernstein);
  font-size: var(--klein);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Der naechste Schritt steht gross, das Ziel klein — die Umkehrung der
   ueblichen Projektkachel. So haelt es Mannaz' STATUS-Vorlage: „Naechster
   Schritt: genau einer, konkret und ausfuehrbar" ist die operative Zeile. */
.schritt {
  margin: 0.4rem 0 0;
}

.ziel {
  margin: 0.6rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px dotted var(--linie);
  font-size: var(--klein);
  color: var(--leinen-matt);
}

.fehlt {
  color: var(--leinen-matt);
  font-style: italic;
}

/* -------------------------------------------------------------------- */
/* Fristen — der einzige Ort mit Rot                                     */
/* -------------------------------------------------------------------- */

.frist-marke {
  color: var(--rot);
  font-size: var(--klein);
  white-space: nowrap;
}

.frist {
  border-left: 2px solid var(--rot);
  padding-left: var(--luft);
  margin-bottom: 1.25rem;
}

.frist-datum {
  color: var(--rot);
  font-size: var(--klein);
}

.frist-text {
  margin: 0.2rem 0 0;
}

.frist-schritt {
  margin: 0.35rem 0 0;
  font-size: var(--klein);
  color: var(--leinen-matt);
}

.leer {
  color: var(--leinen-matt);
  font-size: var(--klein);
  margin: 0 0 1.25rem;
}

/* -------------------------------------------------------------------- */
/* Fussnote: Alter des Spiegels                                          */
/* -------------------------------------------------------------------- */

.spiegel-stand {
  margin-top: 2rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--linie);
  font-size: var(--klein);
  color: var(--leinen-matt);
  display: flex;
  justify-content: space-between;
  gap: var(--luft);
}

/* Aelter als sieben Tage: die Zeile wird rot. Die App zeigt einen Spiegel —
   wenn der zwei Wochen alt ist, muss man das sehen. */
.spiegel-stand.alt {
  color: var(--rot);
}

/* -------------------------------------------------------------------- */
/* Akte — das volle Blatt                                                */
/* -------------------------------------------------------------------- */

.zurueck {
  appearance: none;
  background: none;
  border: none;
  color: var(--bernstein);
  font: inherit;
  font-size: var(--klein);
  padding: 0 0 1rem;
  cursor: pointer;
}

.blatt-titel {
  margin: 0 0 1.5rem;
  font-size: 1.375rem;
  font-weight: 600;
}

.feld {
  margin-bottom: 1.25rem;
}

.feld-name {
  font-size: var(--klein);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--leinen-matt);
  margin: 0 0 0.2rem;
}

/* Reiner Text, kein gerendertes Markdown. Zeilenumbrueche des Blattes
   bleiben erhalten, weil sie Bedeutung tragen (Aufzaehlungen im Verlauf). */
.feld-wert,
.abschnitt-text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.abschnitt-text {
  font-size: var(--klein);
  color: var(--leinen-matt);
}

/* -------------------------------------------------------------------- */
/* Faenge — der Trichter                                                 */
/* -------------------------------------------------------------------- */

textarea,
select,
input {
  width: 100%;
  font: inherit;
  color: var(--leinen);
  background: var(--tanne-tief);
  border: 1px solid var(--linie);
  border-radius: 4px;
  padding: 0.75rem;
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

textarea:focus-visible,
select:focus-visible,
input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--bernstein);
  outline-offset: 2px;
}

.feld-block {
  margin-bottom: var(--luft);
}

.handeln {
  appearance: none;
  font: inherit;
  color: var(--tanne);
  background: var(--bernstein);
  border: none;
  border-radius: 4px;
  padding: 0.8rem 1.25rem;
  width: 100%;
  cursor: pointer;
}

.handeln[disabled] {
  opacity: 0.5;
  cursor: default;
}

.fang-zeile {
  border-top: 1px solid var(--linie);
  padding: 0.75rem 0;
}

.fang-kopf {
  font-size: var(--klein);
  color: var(--leinen-matt);
}

.fang-text {
  margin: 0.2rem 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.zaehler {
  font-size: var(--klein);
  color: var(--leinen-matt);
  text-align: right;
}

/* -------------------------------------------------------------------- */
/* Das Tor                                                               */
/* -------------------------------------------------------------------- */

/* Aufbau wie Helgis Anmeldung: eine Karte, ein Feld, ein Knopf. Der Grund
   ist kein gestalterischer — ein einzelnes Passwortfeld kann der
   Passwortspeicher ausfuellen, ein Ziffern-Gitter nicht. */

.tor {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rand);
}

.tor-karte {
  width: 100%;
  max-width: 21rem;
  text-align: center;
  background: var(--tanne-hoch);
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 2.75rem 1.75rem 2rem;
}

.tor-rune {
  font-family: var(--schrift-rune);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--bernstein);
}

.tor-name {
  margin: 0.75rem 0 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.tor-unterzeile {
  margin: 0.15rem 0 0;
  font-size: var(--klein);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--leinen-matt);
}

.tor-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* Mindestens 16 px, sonst zoomt iOS beim Antippen in das Feld hinein. */
.tor-feld {
  text-align: center;
  letter-spacing: 0.25em;
  font-size: 1.0625rem;
}

.tor-feld::placeholder {
  letter-spacing: 0.1em;
  color: var(--leinen-matt);
}

.hinweis {
  min-height: 1.5rem;
  font-size: var(--klein);
  color: var(--rot);
  text-align: center;
  margin: 0;
}

.hinweis.ruhig {
  color: var(--leinen-matt);
}