/* Leseformat — im Promptheus-Design (wie der Kalender).

   Die Farbmarken, Schriften und die Glaskarte stammen aus
   _design/promptheus-viz/site/assets/promptheus.css und sind hier auf das
   uebernommen, was diese Oberflaeche braucht. Keine Karten mit Farbrand, keine
   Chamfer: schlichte Glasflaechen, scharfe Ecken, gruene Akzente.

   Eine Abweichung mit Absicht: der Lesetext selbst laeuft in Inter und nicht in
   JetBrains Mono. Mono ist die Stimme der Oberflaeche, nicht die des Textes;
   ueber tausend Woerter liest sich Mono schlecht. */

:root {
  --green: 163,190,140;
  --blue: 122,162,255;
  --base: #2e3440;
  --glass: rgba(26,30,38,0.62);
  --text1: #eceff4;
  --text2: #d8dee9;
  --text3: #9aa3b2;
  --nav-fade: 28,31,40;
  --font-ui: "JetBrains Mono","Cascadia Code",ui-monospace,monospace;
  --font-body: "Inter","Segoe UI",system-ui,sans-serif;

  --corner: 0px;
  --card-border: rgba(var(--green),0.14);
  --card-border-width: 1px;
  --card-blur: 14px;

  --sp-1: 6px; --sp-2: 12px; --sp-3: 18px; --sp-4: 26px;
  --sp-5: 34px; --sp-6: 48px;

  --lesebreite: 34rem;
}

:root[data-theme="light"] {
  --green: 106,138,80;
  --blue: 78,108,158;
  --base: #eceff4;
  --glass: rgba(216,222,233,0.70);
  --text1: #2e3440;
  --text2: #434c5e;
  --text3: #59647a;
  --nav-fade: 236,239,244;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --green: 106,138,80;
    --blue: 78,108,158;
    --base: #eceff4;
    --glass: rgba(216,222,233,0.70);
    --text1: #2e3440;
    --text2: #434c5e;
    --text3: #59647a;
    --nav-fade: 236,239,244;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--base);
  color: var(--text1);
  font-family: var(--font-body);
  line-height: 1.5;
  overscroll-behavior-y: contain;
  transition: background .35s ease, color .35s ease;
}

/* ---------- Kopfzeile ---------- */

.kopf {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 14px clamp(16px,4vw,24px);
  background: linear-gradient(rgba(var(--nav-fade),0.92), rgba(var(--nav-fade),0.72));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(var(--green),0.12);
}

.kopf h1 {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.kopf .zurueck {
  font-family: var(--font-ui);
  font-size: 20px; line-height: 1;
  text-decoration: none; color: rgb(var(--green));
  padding: 2px 8px 4px 0;
}

.kopf .rest {
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: .08em;
  color: var(--text3); white-space: nowrap;
}

/* ---------- Leseliste ---------- */

.huelle { max-width: var(--lesebreite); margin: 0 auto; padding: var(--sp-4) clamp(16px,4vw,24px) var(--sp-6); }

.summe {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-3); padding-bottom: var(--sp-4);
  font-family: var(--font-ui); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text3);
}
/* Die rechte Angabe darf nicht mitten im Wort brechen ("200 W/ MIN"), auf
   schmalen Geraeten sonst gesehen. Lieber enger setzen als umbrechen. */
.summe > div:last-child { white-space: nowrap; letter-spacing: .06em; text-align: right; }
@media (max-width: 380px) { .summe > div:last-child { font-size: 10px; letter-spacing: .02em; } }
.summe strong {
  display: block;
  color: rgb(var(--green));
  font-size: 38px; font-weight: 600; letter-spacing: -.02em;
  text-transform: none; line-height: 1;
  margin-bottom: 4px;
}

/* Glaskarte, wie im Designsystem: Flaeche, ein Rahmen, keine Rundung */
.karte {
  display: block;
  background: var(--glass);
  border: var(--card-border-width) solid var(--card-border);
  border-radius: var(--corner);
  backdrop-filter: blur(var(--card-blur)) saturate(1.05);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
  text-decoration: none; color: inherit;
}

.karte .titel {
  font-family: var(--font-ui);
  font-size: 15px; font-weight: 600;
  color: rgb(var(--green));
  margin-bottom: 2px;
}
.karte .ordner { font-size: 12px; color: var(--text3); }
.karte .unten {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-family: var(--font-ui); font-size: 11px; color: var(--text3);
}

.balken {
  flex: 1; height: 2px;
  background: rgba(var(--green),0.16);
  overflow: hidden;
}
.balken i { display: block; height: 100%; background: rgb(var(--green)); }
.karte .fuellung { flex: 1; }

.quelle {
  font-family: var(--font-ui);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid rgba(var(--green),0.4);
  color: rgb(var(--green));
}
.quelle[data-q="mika"] { border-color: rgba(var(--blue),0.4); color: rgb(var(--blue)); }
.quelle[data-q="flag"] { border-color: rgba(var(--text3),0.4); color: var(--text3); }

.karte.fertig .titel { color: var(--text3); }
.karte.fertig { opacity: .6; }

.warnung {
  font-family: var(--font-ui); font-size: 11px;
  color: #d08770; margin-top: 6px;
}

/* ---------- Suche ---------- */

.suchzeile { display: flex; gap: var(--sp-2); margin: var(--sp-5) 0 var(--sp-2); }
input[type="search"] {
  flex: 1; font: inherit; font-size: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(var(--green),0.22);
  border-radius: var(--corner);
  background: var(--glass);
  color: var(--text1);
}
input[type="search"]:focus { outline: none; border-color: rgba(var(--green),0.55); }

button {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: .04em;
  color: var(--text1);
  border: 1px solid rgba(var(--green),0.5);
  background: rgba(var(--green),0.08);
  border-radius: var(--corner);
  padding: 10px 16px;
  transition: background .15s;
}
button:hover { background: rgba(var(--green),0.18); }
button.haupt {
  background: rgba(var(--green),0.92);
  color: #1b2016; border-color: transparent; font-weight: 600;
}

.treffer { border-top: 1px solid rgba(var(--green),0.12); }
.treffer div {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid rgba(var(--green),0.1);
}
.treffer .pfad { font-size: 11px; color: var(--text3); }

/* ---------- Leseansicht ---------- */

.lesespalte {
  max-width: var(--lesebreite);
  margin: 0 auto;
  padding: var(--sp-4) clamp(16px,4vw,24px) 60vh 34px;
  font-family: var(--font-body);
  font-size: 1.03rem;
  line-height: 1.7;
  color: var(--text2);
}

.abschnitt { position: relative; }
.abschnitt.gelesen { opacity: .4; }
.abschnitt.gesehen-marke::after {
  content: ""; position: absolute; left: -20px; top: 10px;
  width: 5px; height: 5px; background: rgb(var(--blue));
}

.abschnitt h1, .abschnitt h2, .abschnitt h3, .abschnitt h4 {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--text1);
  letter-spacing: -.01em;
  line-height: 1.2;
  margin: var(--sp-5) 0 var(--sp-2);
}
.abschnitt h1 { font-size: 24px; color: rgb(var(--green)); }
.abschnitt h2 { font-size: 18px; }
.abschnitt h3 { font-size: 15px; color: var(--text2); }
.abschnitt h4 { font-size: 14px; color: var(--text3); }
.abschnitt p { margin-bottom: var(--sp-3); }
.abschnitt strong { color: var(--text1); font-weight: 600; }

.abschnitt code {
  font-family: var(--font-ui); font-size: .84em;
  background: rgba(var(--green),0.1);
  padding: .1em .4em;
}
.abschnitt pre {
  font-family: var(--font-ui);
  background: var(--glass);
  border: 1px solid rgba(var(--green),0.14);
  padding: var(--sp-3); overflow-x: auto; font-size: 12px;
  margin-bottom: var(--sp-3);
}
.abschnitt pre code { background: none; padding: 0; }
.abschnitt blockquote {
  margin-bottom: var(--sp-3); padding-left: var(--sp-3);
  border-left: 2px solid rgba(var(--green),0.4);
  color: var(--text3);
}
.abschnitt .wikilink { color: rgb(var(--blue)); }
.abschnitt a { color: rgb(var(--green)); }
.abschnitt hr {
  border: 0; border-top: 1px solid rgba(var(--green),0.16);
  margin: var(--sp-5) 0; width: 40%;
}
.abschnitt ul, .abschnitt ol { margin-bottom: var(--sp-3); padding-left: var(--sp-4); }
.abschnitt li { margin-bottom: 6px; }
.abschnitt li::marker { color: rgb(var(--green)); }
.abschnitt .tabellenzeile {
  font-family: var(--font-ui); font-size: 11px;
  white-space: pre; overflow-x: auto; color: var(--text3);
}

/* ---------- Der Griff am Rand ---------- */

#griff { position: absolute; left: 0; width: 100%; height: 0; z-index: 10; pointer-events: none; }
#griff .linie {
  position: absolute; left: 12px; right: 0; top: 0;
  border-top: 1px solid rgb(var(--green));
  box-shadow: 0 0 8px rgba(var(--green),0.55);
}
#griff .knopf {
  position: absolute; left: 0; top: -14px;
  width: 28px; height: 28px;
  background: rgba(var(--green),0.92);
  color: #1b2016;
  font-family: var(--font-ui); font-size: 13px;
  display: grid; place-items: center;
  pointer-events: auto; touch-action: none; cursor: grab;
}
#griff.zieht .knopf { cursor: grabbing; box-shadow: 0 0 12px rgba(var(--green),0.9); }

/* ---------- Fussleiste ---------- */

.fussleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px clamp(16px,4vw,24px) calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(var(--nav-fade),0.72), rgba(var(--nav-fade),0.95));
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(var(--green),0.12);
  font-family: var(--font-ui); font-size: 11px;
  letter-spacing: .06em;
}
.fussleiste .info { flex: 1; color: var(--text3); }
.fussleiste .info b { color: rgb(var(--green)); font-weight: 600; }
.fussleiste button { padding: 9px 14px; }

.hinweis {
  position: fixed; left: 50%; bottom: 62px; transform: translateX(-50%);
  background: var(--glass);
  border: 1px solid rgba(var(--green),0.4);
  backdrop-filter: blur(var(--card-blur));
  color: var(--text1);
  font-family: var(--font-ui); font-size: 11px;
  padding: 10px 14px;
  opacity: 0; pointer-events: none; transition: opacity .18s;
  max-width: 90vw; text-align: center;
}
.hinweis.an { opacity: 1; }

.leer {
  color: var(--text3); text-align: center; padding: var(--sp-6) var(--sp-3);
  font-family: var(--font-ui); font-size: 12px;
}

/* ---------- Anmerkungen ---------- */

.abschnitt.hat-anmerkung::before {
  content: "";
  position: absolute; left: -20px; top: 8px; bottom: 8px;
  width: 2px; background: rgba(var(--blue),0.55);
}

.anm-liste { margin: var(--sp-2) 0 var(--sp-3); }
.anm {
  border-left: 2px solid rgba(var(--blue),0.5);
  background: var(--glass);
  padding: 8px 12px;
  margin-bottom: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.5;
}
.anm.frage { border-left-color: rgba(var(--green),0.7); }
.anm.erledigt { opacity: .5; }
.anm-art {
  display: inline-block;
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: rgb(var(--blue)); margin-right: 8px;
}
.anm.frage .anm-art { color: rgb(var(--green)); }
.anm-text { color: var(--text1); }
.anm-datum { display: block; font-size: 10px; color: var(--text3); margin-top: 4px; }

/* Dialog */
.blende {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end; justify-content: center;
}
/* Pflicht, sonst schlaegt "display: flex" das hidden-Attribut und der Dialog
   steht dauerhaft offen. Genau so am 2026-08-06 im Bild aufgefallen. */
.blende[hidden] { display: none; }
.anm-dialog {
  width: 100%; max-width: var(--lesebreite);
  background: var(--base);
  border-top: 1px solid rgba(var(--green),0.3);
  padding: var(--sp-3) clamp(16px,4vw,24px) calc(var(--sp-3) + env(safe-area-inset-bottom));
}
.anm-kopf {
  font-family: var(--font-ui); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text3);
}
.anm-kontext {
  font-family: var(--font-ui); font-size: 13px;
  color: rgb(var(--green)); margin: 4px 0 var(--sp-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.anm-dialog textarea {
  width: 100%; font: inherit; font-size: 15px;
  background: var(--glass); color: var(--text1);
  border: 1px solid rgba(var(--green),0.25);
  border-radius: var(--corner);
  padding: 10px 12px; resize: vertical;
}
.anm-dialog textarea:focus { outline: none; border-color: rgba(var(--green),0.6); }
.anm-knoepfe { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.anm-knoepfe button { flex: 1; }

/* ---------- Vorrat für unterwegs ---------- */

.vorrat {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-5); padding-top: var(--sp-3);
  border-top: 1px solid rgba(var(--green),0.12);
  font-family: var(--font-ui); font-size: 11px; color: var(--text3);
}
#vorrat-stand.wartet { color: rgb(var(--blue)); }
.anm.wartet { border-left-style: dashed; }

/* Reihenfolge: die Nummer traegt die Leseliste, der Grund sagt warum */
.karte .rang {
  display: inline-block; min-width: 1.5em;
  color: var(--text3); font-weight: 400;
}
.karte .grund {
  font-size: 12px; line-height: 1.5; color: var(--text2);
  margin-top: 4px; font-family: var(--font-body);
}