/* Athanor: Gestaltung nach der Eisenglut-Palette v2 (04b_eisenglut-palette.md).
   Die Farbwelt der App-Sigille: fast schwarzes Eisen und dunkle Erde als Grund,
   Schmiedelicht für Überschriften, Rost für Interaktion, Glut ausschließlich
   für den Moment der Ziehung. Alle Kontraste sind in der Palette-Doku gerechnet
   (AA bis AAA, Rot-Grün-sicher). Typografie wie beim ERK-Begleiter:
   Georgia-Serifen für Überschriften, Systemschrift im Fließtext. */

:root {
  --eisen-grund: #120D09;          /* Seitenhintergrund: fast schwarzes Eisen */
  --eisen-flaeche: #1D1610;        /* Karten, Eingabefelder */
  --eisen-linie: #3A2D20;          /* dekorative Trennlinien */
  --eisen-linie-stark: #75604B;    /* Ränder interaktiver Komponenten */
  --eisen-text: #EDE4D6;           /* Fließtext */
  --eisen-text-sekundaer: #B5A68D; /* Nebentext, Metadaten */
  --eisen-hell: #D8C8AE;           /* Überschriften: Schmiedelicht */
  --eisen-rost: #C97B4B;           /* Interaktion */
  --eisen-glut: #E3A85C;           /* nur die Ziehung */
}

* { box-sizing: border-box; }

html { background: var(--eisen-grund); }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--eisen-text);
  background: var(--eisen-grund);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0 0 0.4em 0;
  color: var(--eisen-hell);
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }

p { margin: 0.5em 0; }

.sekundaer { color: var(--eisen-text-sekundaer); }
.klein { font-size: 0.85rem; }

header {
  padding: 1.2rem 1.2rem 0.4rem;
  text-align: center;
}

header h1 { margin-bottom: 0.1em; }
.kopf-untertitel { margin-top: 0; }

.kopf-sigille {
  display: block;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  border: 1px solid var(--eisen-linie);
}

nav {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.4rem 0.6rem 0.8rem;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  background: var(--eisen-grund);
  border-bottom: 1px solid var(--eisen-linie);
  z-index: 5;
}

nav button {
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--eisen-text-sekundaer);
  font: inherit;
  font-size: 0.95rem;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
}

nav button.aktiv {
  color: var(--eisen-grund);
  background: var(--eisen-rost);
}

nav button:not(.aktiv):hover { color: var(--eisen-text); border-color: var(--eisen-linie-stark); }

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 1rem 1.2rem 3rem;
}

.login-rahmen {
  max-width: 420px;
  margin: 0 auto;
  padding: 8vh 1.4rem 3rem;
  text-align: left;
}

.login-rahmen h1 { text-align: center; }

.login-sigille {
  display: block;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 1px solid var(--eisen-linie);
}

.karte {
  background: var(--eisen-flaeche);
  border: 1px solid var(--eisen-linie);
  border-radius: 10px;
  padding: 1.2rem 1.3rem;
  margin: 0 0 1rem 0;
}

.karte.hinweis { border-color: var(--eisen-linie-stark); }

.datum-zeile {
  text-align: center;
  color: var(--eisen-text-sekundaer);
  margin: 0.2rem 0 1rem;
}

.vorzeile {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--eisen-text-sekundaer);
  margin: 0 0 0.5em 0;
}

.phasenwort {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--eisen-hell);
  margin-top: 0.6em;
}

.zahlenreihe {
  display: flex;
  gap: 1.5rem;
  text-align: center;
}

.zahlenreihe > div { flex: 1; }

.zahl {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.6rem;
  color: var(--eisen-hell);
  display: block;
  line-height: 1.1;
}

/* Die Ziehung: der einzige Ort des Goldes */

.impuls-karte {
  background: var(--eisen-flaeche);
  border: 1px solid var(--eisen-glut);
  border-radius: 10px;
  padding: 1.4rem 1.5rem;
  margin: 0 0 1rem 0;
}

.impuls-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--eisen-glut);
  margin: 0.4em 0;
}

.impuls-text.klein { font-size: 1.05rem; }

.knopf.ziehen {
  background: var(--eisen-glut);
  color: var(--eisen-grund);
}

.knopf.ziehen:hover { background: #EBB877; }

/* Formulare und Aktionen */

label { display: block; margin: 0.8rem 0 0.25rem; }

input, textarea, select {
  width: 100%;
  background: var(--eisen-grund);
  border: 1px solid var(--eisen-linie-stark);
  border-radius: 8px;
  color: var(--eisen-text);
  font: inherit;
  padding: 0.6rem 0.7rem;
}

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

textarea { resize: vertical; }

.knopf {
  display: inline-block;
  background: var(--eisen-rost);
  border: none;
  border-radius: 999px;
  color: var(--eisen-grund);
  font: inherit;
  font-size: 0.95rem;
  padding: 0.55rem 1.3rem;
  margin-top: 0.9rem;
  cursor: pointer;
  text-decoration: none;
}

.knopf:hover { background: #D68A5C; }

.knopf.nebenrolle {
  background: none;
  border: 1px solid var(--eisen-linie-stark);
  color: var(--eisen-text-sekundaer);
}

.knopf.nebenrolle:hover { color: var(--eisen-text); border-color: var(--eisen-text-sekundaer); }

.meldung {
  border: 1px solid var(--eisen-linie-stark);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin-top: 0.9rem;
  font-size: 0.92rem;
}

.datenschutz { margin-top: 1rem; }

.zeile-verteilt {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Typwahl im Arbeitsbuch */

.typwahl {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.4rem 0 0.6rem;
}

.typwahl button {
  background: none;
  border: 1px solid var(--eisen-linie-stark);
  border-radius: 999px;
  color: var(--eisen-text-sekundaer);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.3rem 0.9rem;
  cursor: pointer;
}

.typwahl button.aktiv {
  background: var(--eisen-rost);
  border-color: var(--eisen-rost);
  color: var(--eisen-grund);
}

/* Filter in der Rückschau */

.filterzeile {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.6rem 0 0.4rem;
}

.filterzeile label {
  margin: 0;
  flex: 1;
  min-width: 140px;
  font-size: 0.85rem;
  color: var(--eisen-text-sekundaer);
}

.filterzeile select { margin-top: 0.2rem; }

/* Einträge */

.eintrag {
  border-top: 1px solid var(--eisen-linie);
  padding: 0.8rem 0;
}

.eintrag:first-of-type { border-top: none; }

.eintrag .meta { font-size: 0.85rem; color: var(--eisen-text-sekundaer); margin: 0 0 0.2em; }

.eintrag h3 { margin-bottom: 0.15em; }

.eintrag .impuls-zitat {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--eisen-glut);
  margin: 0.3em 0;
}

.eintrag .aktionen { margin-top: 0.3rem; display: flex; gap: 0.8rem; flex-wrap: wrap; }

.textknopf {
  background: none;
  border: none;
  color: var(--eisen-rost);
  font: inherit;
  font-size: 0.88rem;
  padding: 0.2rem 0;
  cursor: pointer;
}

.textknopf:hover { text-decoration: underline; }

.buch-knopf {
  background: none;
  border: none;
  color: var(--eisen-text-sekundaer);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.2rem 0 0.8rem;
  cursor: pointer;
}

.buch-knopf:hover { color: var(--eisen-text); }
.buch-knopf::before { content: "\2039\00a0"; }

/* Glossar */

.glossar-eintrag {
  border-top: 1px solid var(--eisen-linie);
  padding: 0.2rem 0;
}

.glossar-eintrag:first-of-type { border-top: none; }

.glossar-eintrag summary {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  color: var(--eisen-hell);
  padding: 0.6rem 0;
  cursor: pointer;
}

.glossar-eintrag summary::marker { color: var(--eisen-rost); }

.glossar-eintrag p { margin: 0.2em 0 0.8em; }

.glossar-quelle { font-size: 0.8rem; color: var(--eisen-text-sekundaer); }

/* Ritual-Fenster */

.fensterliste { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.6rem; }

.fensterzeile {
  background: var(--eisen-flaeche);
  border: 1px solid var(--eisen-linie);
  border-radius: 10px;
  padding: 0.8rem 1rem;
}

.fensterzeile .tage { color: var(--eisen-hell); }

footer {
  max-width: 640px;
  margin: 0 auto;
  padding: 1rem 1.2rem 2.5rem;
  border-top: 1px solid var(--eisen-linie);
  text-align: center;
}