/* Reiki-Wissensbank — „Ruhe“. Abgenommen am 06.10.2026 (ADR-003): Moos, Linie statt Kasten, viel Raum.
   Layout: mobil eine Spalte mit Leiste unten; ab 900px Seitenleiste links + Lesespalte. */
:root {
  --papier: #f4f5f1;
  --flaeche: #fbfbf9;
  --tusche: #262a27;
  --tusche-leise: #5d655f;
  --linie: #d5d9d2;
  --akzent: #4f6b55;
  --akzent-hauch: #e5ebe3;
  --resonanz: #6e627a;
  --resonanz-hauch: #ece8ef;
  --schutz: #86683f;
  --schutz-hauch: #f1ebe1;
  --warnung: #9a4a3c;

  --schrift-titel: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --schrift-text: "Zen Kaku Gothic New", -apple-system, "Hiragino Sans", "Segoe UI", sans-serif;

  --s-1: .8125rem; --s0: 1rem; --s1: 1.1875rem; --s2: 1.5rem; --s3: 2rem; --s4: 2.5rem;
  --strich: 1.5px;
  --leiste-unten: 4.25rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #161917; --flaeche: #1d211e; --tusche: #e6e9e4; --tusche-leise: #a3aba4; --linie: #343a35;
    --akzent: #93b39a; --akzent-hauch: #233027; --resonanz: #b5a8c2; --resonanz-hauch: #2a2630;
    --schutz: #cfae7f; --schutz-hauch: #2e281f; --warnung: #e09a8c; color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--tusche);
  font-family: var(--schrift-text); font-size: var(--s0); line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
#inhalt:focus { outline: none; } /* Fokus nach Seitenwechsel nur für Screenreader */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

h1, h2, h3 { font-family: var(--schrift-titel); font-weight: 600; margin: 0; text-wrap: balance; line-height: 1.3; }
h1 { font-weight: 500; font-size: var(--s3); }
h2 { font-size: var(--s1); }
.leise { color: var(--tusche-leise); }
.klein { font-size: var(--s-1); }
.kanji { font-family: var(--schrift-titel); letter-spacing: .1em; }

/* ── Gerüst ────────────────────────────────────────────────────────── */
.rahmen { min-height: 100vh; }
.seitenleiste { display: none; }
.kopfzeile {
  position: sticky; top: 0; z-index: 5; background: var(--papier);
  padding: calc(env(safe-area-inset-top, 0px) + .75rem) 16px .75rem;
  border-bottom: 1px solid var(--linie);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.marke { display: flex; align-items: baseline; gap: .6rem; text-decoration: none; }
.marke .kanji { color: var(--akzent); font-size: var(--s1); }
.marke b { font-family: var(--schrift-titel); font-weight: 600; }
.haupt {
  padding: 1.5rem 16px calc(var(--leiste-unten) + env(safe-area-inset-bottom, 0px) + 2.5rem);
  max-width: 46rem; margin-inline: auto;
}
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  background: var(--flaeche); border-top: 1px solid var(--linie);
  padding: .35rem 8px calc(env(safe-area-inset-bottom, 0px) + .35rem);
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.leiste a {
  display: grid; justify-items: center; gap: .1rem; padding: .35rem 0; text-decoration: none;
  font-size: .6875rem; color: var(--tusche-leise);
}
.leiste a svg { width: 22px; height: 22px; }
.leiste a[aria-current="page"] { color: var(--akzent); }
.leiste a.notieren span.rund {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--resonanz); color: var(--resonanz); margin-top: -.15rem;
}

@media (min-width: 900px) {
  .rahmen { display: grid; grid-template-columns: 15rem minmax(0, 1fr); }
  .kopfzeile, .leiste { display: none; }
  .seitenleiste {
    display: flex; flex-direction: column; gap: 1.75rem; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    padding: 2rem 1.25rem; border-right: 1px solid var(--linie);
  }
  .haupt { padding: 3rem 2.5rem 5rem; max-width: 50rem; margin: 0; }
}
.nav { display: grid; gap: .1rem; }
.nav-titel { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tusche-leise); margin: 0 0 .4rem .6rem; }
.nav a {
  display: flex; align-items: center; gap: .7rem; padding: .35rem .6rem; border-radius: 4px;
  text-decoration: none; color: var(--tusche-leise);
}
.nav a:hover { color: var(--tusche); }
.nav a[aria-current="page"] { background: var(--akzent-hauch); color: var(--tusche); }
.nav a .zahl { margin-left: auto; font-size: var(--s-1); font-variant-numeric: tabular-nums; }
.nav svg { width: 20px; height: 14px; flex: none; }
.seitenleiste .notieren-gross { margin-top: auto; }

/* ── Bausteine ─────────────────────────────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-weight: 500; border-radius: 999px; padding: .55rem 1.25rem; cursor: pointer; text-decoration: none;
  border: 1px solid var(--akzent); background: var(--akzent); color: var(--flaeche); min-height: 2.75rem;
}
.knopf.still { background: none; color: var(--akzent); }
.knopf.leise { border-color: transparent; background: none; color: var(--tusche-leise); }
.knopf.resonanz { background: none; border-color: var(--resonanz); color: var(--resonanz); }
.knopf.warnung { background: none; border-color: var(--warnung); color: var(--warnung); }
.knopf.klein { min-height: 2.25rem; padding: .3rem .95rem; font-size: var(--s-1); }
.knopf:disabled { opacity: .5; cursor: default; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

.seitenkopf { display: grid; gap: .4rem; margin-bottom: 2rem; }
.seitenkopf .ueber { font-size: var(--s-1); letter-spacing: .14em; text-transform: uppercase; color: var(--tusche-leise); display: flex; gap: .5rem; align-items: center; }
.seitenkopf .zeile { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }

.abschnitt { display: grid; gap: 1rem; margin-top: 2.5rem; }
.abschnitt > h2 { padding-bottom: .6rem; border-bottom: 1px solid var(--linie); }
.abschnitt-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding-bottom: .6rem; border-bottom: 1px solid var(--linie); }

/* Grade-Raster */
.grade { display: grid; gap: 1px; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--linie); border: 1px solid var(--linie); border-radius: 6px; overflow: hidden; }
@media (min-width: 640px) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grad-kachel { background: var(--flaeche); padding: 1rem; display: grid; gap: .3rem; text-decoration: none; align-content: start; min-height: 8.5rem; }
.grad-kachel:hover { background: var(--akzent-hauch); }
.grad-kachel:last-child { grid-column: span 2; } /* 5 Grade: Lehrergrad füllt die letzte Reihe */
.grad-kachel svg { width: 2rem; height: 1.5rem; }
.grad-kachel .kanji { font-size: var(--s1); }
.grad-kachel b { font-weight: 500; }
.grad-kachel small { color: var(--tusche-leise); font-size: var(--s-1); font-variant-numeric: tabular-nums; }
.grad-kachel.still { color: var(--tusche-leise); }
.strich { stroke: var(--akzent); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.strich.leise { stroke: var(--tusche-leise); }

/* Listen */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { border-bottom: 1px solid var(--linie); }
.liste a { display: flex; gap: 1rem; align-items: baseline; padding: .85rem .1rem; text-decoration: none; }
.liste a:hover .titel { color: var(--akzent); }
.liste .titel { font-weight: 500; }
.liste .jp { font-family: var(--schrift-titel); color: var(--tusche-leise); letter-spacing: .08em; }
.liste .rechts { margin-left: auto; display: flex; gap: .6rem; align-items: center; color: var(--tusche-leise); font-size: var(--s-1); white-space: nowrap; }
.liste svg { width: 24px; height: 18px; flex: none; align-self: center; }
.leer { color: var(--tusche-leise); padding: 1.5rem 0; }

/* Hinweisleisten */
.hinweis { border-radius: 4px; padding: .9rem 1.1rem; display: flex; gap: .9rem; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--akzent-hauch); }
.hinweis.resonanz { background: var(--resonanz-hauch); }
.hinweis.konflikt { background: var(--schutz-hauch); }
.hinweise { display: grid; gap: .6rem; margin-bottom: 2rem; }

/* Formulare */
.formular { display: grid; gap: 1.5rem; }
.feld { display: grid; gap: .35rem; }
.feld > label, .feld > .label { font-size: var(--s-1); color: var(--tusche-leise); }
.feld input[type="text"], .feld input[type="date"], .feld input[type="search"], .feld select, .feld textarea {
  width: 100%; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 4px;
  padding: .6rem .75rem; font-size: 1rem; /* 16px verhindert Zoom auf dem iPhone */
}
.feld textarea { min-height: 7rem; resize: vertical; line-height: 1.7; }
.feld textarea.gross { min-height: 14rem; }
.feld > .knopf, .feld > div > .knopf { justify-self: start; }
.feld .hilfe { font-size: var(--s-1); color: var(--tusche-leise); }
.felder-2 { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .felder-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.haken { display: flex; gap: .6rem; align-items: center; }
.haken input { width: 1.15rem; height: 1.15rem; accent-color: var(--akzent); }
.textfeld-mit-mikro { position: relative; }
.mikro {
  position: absolute; right: .5rem; bottom: .5rem; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--tusche-leise); cursor: pointer; display: grid; place-items: center;
}
.mikro[aria-pressed="true"] { border-color: var(--resonanz); color: var(--resonanz); background: var(--resonanz-hauch); }
.formular-fuss { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid var(--linie); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem; font-size: var(--s-1); border-radius: 999px;
  padding: .2rem .75rem; border: 1px solid var(--linie); background: var(--flaeche); cursor: pointer; min-height: 2rem;
}
.chip[aria-pressed="true"] { background: var(--resonanz-hauch); border-color: var(--resonanz); color: var(--resonanz); }
.chip.akzent[aria-pressed="true"] { background: var(--akzent-hauch); border-color: var(--akzent); color: var(--akzent); }
.chip button { border: 0; background: none; padding: 0 .1rem; cursor: pointer; color: var(--tusche-leise); font-size: 1rem; line-height: 1; }

/* Schritte im Editor */
.schritt-edit { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .75rem; padding: 1rem 0; border-bottom: 1px solid var(--linie); }
.schritt-edit .nr { font-family: var(--schrift-titel); color: var(--akzent); font-size: var(--s1); }
.schritt-edit .innen { display: grid; gap: .6rem; }
.schritt-edit .unten { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.schritt-edit .unten input { max-width: 9rem; }
.mini-bild { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 3px; border: 1px solid var(--linie); }
.bilder-edit { display: flex; flex-wrap: wrap; gap: .75rem; }
.bilder-edit figure { position: relative; }
.bilder-edit .weg { position: absolute; top: -.5rem; right: -.5rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--linie); background: var(--flaeche); cursor: pointer; }

.impuls { background: var(--akzent-hauch); border-radius: 4px; padding: 1.15rem 1.35rem; }
.impuls h4, .geschuetzt h4 { margin: 0 0 .45rem; font-size: var(--s-1); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--akzent); }
.impuls ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.impuls button { all: unset; cursor: pointer; text-decoration: underline; text-decoration-color: var(--linie); text-underline-offset: 3px; }
.geschuetzt { background: var(--schutz-hauch); border-radius: 4px; padding: 1rem 1.35rem; display: flex; gap: 1rem; align-items: flex-start; }
.geschuetzt h4 { color: var(--schutz); }
.geschuetzt p { margin: 0; }
.schloss { stroke: var(--schutz); stroke-width: 1.4; fill: none; stroke-linecap: round; }
.platzhalter {
  aspect-ratio: 4 / 3; max-width: 100%; width: 18rem; border: 1px dashed var(--linie); border-radius: 4px;
  display: grid; place-items: center; text-align: center; color: var(--tusche-leise); font-size: var(--s-1); padding: 1rem;
}

/* ── Eintrag ───────────────────────────────────────────────────────── */
.eintrag { display: grid; gap: 2.25rem; }
.eintrag-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: var(--s-1); color: var(--tusche-leise); align-items: center; }
.eintrag-meta .grad-mini { display: inline-flex; gap: .4rem; align-items: center; color: var(--akzent); text-decoration: none; }
.eintrag-meta svg { width: 20px; height: 12px; }
.eintrag-kanji { font-family: var(--schrift-titel); font-size: clamp(2.75rem, 11vw, 4rem); letter-spacing: .14em; line-height: 1.1; color: var(--akzent); }
.eintrag-titel { font-weight: 500; font-size: var(--s3); }
.eintrag-text { max-width: 36rem; }
.text p, .text ul { margin: 0 0 1rem; }
.text p:last-child, .text ul:last-child { margin-bottom: 0; }
.text ul { padding-left: 1.2rem; }
.eintrag h2 { padding-bottom: .6rem; border-bottom: 1px solid var(--linie); margin-bottom: 1rem; }
.galerie { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.galerie img, .zoombar { cursor: zoom-in; border-radius: 3px; }
.schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
.schritte li { counter-increment: schritt; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: .5rem .75rem; padding-block: .9rem; border-bottom: 1px solid var(--linie); align-items: baseline; }
.schritte li::before { content: counter(schritt); font-family: var(--schrift-titel); color: var(--akzent); font-size: var(--s1); }
.schritte .dauer { font-size: var(--s-1); color: var(--tusche-leise); white-space: nowrap; font-variant-numeric: tabular-nums; }
.schritte .schritt-bild { grid-column: 2 / -1; max-width: 18rem; }
.verwandt { display: flex; flex-wrap: wrap; gap: .4rem; }
.verwandt a { text-decoration: none; }
.quelle { font-size: var(--s-1); color: var(--tusche-leise); border-top: 1px solid var(--linie); padding-top: 1rem; }

/* Resonanz-Verlauf */
.resonanz-kopf h2 { color: var(--resonanz); border: 0; padding: 0; margin: 0; }
.verlauf { list-style: none; margin: 0; padding: 0 0 0 1.5rem; border-left: 1px solid var(--resonanz); display: grid; gap: 1.6rem; }
.verlauf > li { position: relative; }
.verlauf > li::before { content: ""; position: absolute; left: calc(-1.5rem - 4px); top: .6rem; width: 7px; height: 7px; border-radius: 50%; background: var(--papier); border: 1px solid var(--resonanz); }
.verlauf > li.meilenstein::before { background: var(--resonanz); }
.verlauf time, .notiz-datum { font-size: var(--s-1); color: var(--resonanz); font-variant-numeric: tabular-nums; }
.verlauf .text { margin: .2rem 0 .45rem; max-width: 36rem; }
.verlauf a.bearbeiten { font-size: var(--s-1); color: var(--tusche-leise); }
.marken { display: flex; flex-wrap: wrap; gap: .4rem; }
.marken span { font-size: .75rem; background: var(--resonanz-hauch); color: var(--resonanz); padding: .05rem .6rem; border-radius: 999px; }
.marken span.offen { background: var(--schutz-hauch); color: var(--schutz); }
.seiten { display: flex; gap: .5rem; flex-wrap: wrap; margin: .4rem 0; }
.seiten img { width: 5rem; height: 6.5rem; object-fit: cover; border: 1px solid var(--linie); border-radius: 3px; cursor: zoom-in; }

/* Tagebuch als Buch */
.buch { display: grid; gap: 3rem; }
.buch article { display: grid; gap: .75rem; }
.buch .notiz-datum { letter-spacing: .08em; }
.buch .text { font-size: 1.0625rem; line-height: 1.9; max-width: 36rem; }
.pruef { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .pruef { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

/* Monats-Gruppen */
.monat { font-family: var(--schrift-titel); font-size: var(--s1); margin: 2rem 0 1rem; color: var(--tusche-leise); }

/* Entwürfe */
.entwuerfe { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.entwurf { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 6px; padding: 1rem; display: grid; gap: .75rem; }

/* Dialog, Lightbox, Meldung */
.schleier { position: fixed; inset: 0; z-index: 20; background: color-mix(in srgb, var(--papier) 82%, transparent); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; }
.dialog { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 1.5rem; max-width: 26rem; width: 100%; display: grid; gap: 1.25rem; }
.lightbox img { max-height: 88vh; width: auto; border-radius: 3px; }
.meldung {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 30;
  bottom: calc(var(--leiste-unten) + env(safe-area-inset-bottom, 0px) + 1rem);
  background: var(--tusche); color: var(--papier); border-radius: 999px; padding: .55rem 1.2rem;
  display: flex; gap: 1rem; align-items: center; font-size: var(--s-1); max-width: calc(100vw - 32px);
}
.meldung button { all: unset; cursor: pointer; text-decoration: underline; }
@media (min-width: 900px) { .meldung { bottom: 2rem; } }

/* Anmeldung */
.anmelden { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.anmelden form { width: 100%; max-width: 22rem; display: grid; gap: 1.5rem; }
.anmelden .kanji-gross { font-family: var(--schrift-titel); font-size: 3.5rem; letter-spacing: .14em; color: var(--akzent); line-height: 1; }
.fehler { color: var(--warnung); font-size: var(--s-1); }