/* Aussehen wie die Leseprobe-Datei aus liebesroman/lesepaket.py, hell und
   dunkel je nach Einstellung des Geraets. Farben nur ueber die Variablen. */

:root {
  color-scheme: light dark;
  --grund: #fbfaf8;
  --papier: #ffffff;
  --schrift: #23201d;
  --leise: #6b645c;
  --linie: #e2ddd6;
  --akzent: #7a4a3a;
  --gut-bg: #d9f0d3;
  --gut-rand: #4a9c3e;
  --schlecht-bg: #f8d9d9;
  --schlecht-rand: #b23b3b;
  --notiz-bg: #fbefc5;
  --notiz-rand: #a87a0c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #16151a;
    --papier: #1e1d23;
    --schrift: #e8e4de;
    --leise: #9a938a;
    --linie: #33313a;
    --akzent: #d09a86;
    --gut-bg: #203a24;
    --gut-rand: #6cc35c;
    --schlecht-bg: #452229;
    --schlecht-rand: #e0707a;
    --notiz-bg: #3b3320;
    --notiz-rand: #e0b84a;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.huelle { max-width: 40rem; margin: 0 auto; padding: 1.5rem 1.25rem 6rem; }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 .75rem; }
h2 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--leise); margin: 2.5rem 0 .5rem; font-weight: 600;
}
h3 { font-size: 1.1rem; margin: 1.6rem 0 .25rem; }
h4 { font-size: .95rem; margin: .6rem 0 .2rem; color: var(--leise); }
a { color: var(--akzent); }
.zurueck-weg { margin: 0 0 1rem; font-size: .9rem; }

/* Anleitung oben */
.anleitung {
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: .6rem; padding: 1rem 1.15rem; margin-bottom: 1rem;
}
.anleitung p { margin: .5rem 0; }
.anleitung p:first-child { margin-top: 0; }
.anleitung p:last-child { margin-bottom: 0; }
.anleitung ul { margin: .6rem 0; padding-left: 1.2rem; }
.anleitung li { margin: .35rem 0; }
.warnung { color: var(--akzent); font-weight: 600; }

/* Die Paare, aufklappbar */
details.paar { border-top: 1px solid var(--linie); }
details.paar:last-of-type { border-bottom: 1px solid var(--linie); }
details.paar > summary {
  cursor: pointer; list-style: none; padding: 1rem 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
}
details.paar > summary::-webkit-details-marker { display: none; }
details.paar > summary::before { content: "+"; width: 1rem; color: var(--leise); font-weight: 600; }
details.paar[open] > summary::before { content: "\2212"; }
.paar-titel { font-weight: 600; font-size: 1.05rem; flex: 1 1 14rem; }
.stand { font-size: .8rem; color: var(--leise); }
.stand.fertig { color: var(--gut-rand); font-weight: 600; }
.marke {
  font-size: .75rem; color: var(--akzent); border: 1px solid var(--akzent);
  border-radius: 1rem; padding: .05rem .6rem;
}
details.paar[open] { padding-bottom: 1rem; }

/* Lesetext */
.text {
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: .6rem; padding: 1.25rem 1.4rem; margin: .75rem 0 1rem;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1.06rem; line-height: 1.75;
}
.text.nummeriert { padding-left: 2.5rem; }
.text p.absatz { position: relative; margin: 0 0 1em; }
.text .nr {
  position: absolute; left: -2rem; top: .45em; width: 1.5rem; text-align: right;
  font: 600 .68rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--leise); font-variant-numeric: tabular-nums;
  user-select: none; -webkit-user-select: none;
}
.text .rand {
  font: italic .85rem/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--leise); margin: 0 0 1em;
}
.text .rand:last-child { margin: 1em 0 0; }
.text .rand.mitte { text-align: center; font-style: normal; }

mark { color: inherit; padding: .05em 0; border-radius: .15em; cursor: pointer; }
mark.mark-gut { background: var(--gut-bg); box-shadow: inset 0 -2px 0 var(--gut-rand); }
mark.mark-schlecht { background: var(--schlecht-bg); box-shadow: inset 0 -2px 0 var(--schlecht-rand); }
mark.mark-gut.mark-schlecht { background: linear-gradient(90deg, var(--gut-bg), var(--schlecht-bg)); }
mark.mark-notiz { background: var(--notiz-bg); box-shadow: inset 0 -2px 0 var(--notiz-rand); }

/* Kommentar zu einer Stelle, unter dem Absatz */
.text .notiz {
  display: block; margin: .4rem 0 0; padding: .25rem .6rem;
  border-left: 3px solid var(--notiz-rand); border-radius: 0 .3rem .3rem 0;
  background: var(--notiz-bg); cursor: pointer;
  font: .85rem/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  user-select: none; -webkit-user-select: none;
}
.notiz-zitat { color: var(--leise); font-style: italic; }

/* Steckbrief ueber einer ganzen Geschichte */
.steckbrief {
  background: var(--papier); border: 1px solid var(--linie); border-radius: .6rem;
  padding: .8rem 1rem; margin: .6rem 0 0; font-size: .92rem;
}
.steckbrief p { margin: .4rem 0; }
.steckbrief p:first-child { margin-top: 0; font-weight: 600; }
.steckbrief ul { margin: .4rem 0; padding-left: 1.1rem; }
.steckbrief li { margin: .25rem 0; }
.paar-fragen { border-top: 1px solid var(--linie); padding-top: .5rem; }

/* Fragen und Felder */
.frage { margin: 1rem 0 1.5rem; }
.frage > span { display: block; font-size: .92rem; color: var(--leise); margin-bottom: .4rem; }
.noten { display: flex; gap: .4rem; flex-wrap: wrap; }
.noten label {
  flex: 1 1 5rem; text-align: center;
  border: 1px solid var(--linie); border-radius: .45rem;
  padding: .55rem .3rem; cursor: pointer; background: var(--papier);
}
.noten input { position: absolute; opacity: 0; pointer-events: none; }
.noten input:checked + span { font-weight: 700; }
.noten label:has(input:checked) {
  border-color: var(--akzent); color: var(--akzent);
  box-shadow: inset 0 0 0 1px var(--akzent);
}
textarea, input[type=text], input[type=number], input[type=password] {
  width: 100%; font: inherit; padding: .6rem .7rem; border-radius: .45rem;
  border: 1px solid var(--linie); background: var(--papier); color: inherit;
}
textarea { min-height: 4.5rem; resize: vertical; }
.absatz-felder { display: flex; gap: .75rem; margin-top: .6rem; }
.absatz-felder label { flex: 1; font-size: .85rem; color: var(--leise); }
.absatz-felder input { display: block; margin-top: .25rem; }
.hinweis { font-size: .8rem; color: var(--leise); margin-top: .35rem; }
p.status { color: var(--leise); font-size: .85rem; min-height: 1.2em; margin: .3rem 0 0; }
.name-zeile { display: flex; gap: .5rem; }
.name-zeile input { flex: 1 1 auto; }

button {
  font: inherit; font-weight: 600; padding: .65rem 1.1rem; border-radius: .5rem;
  border: 0; background: var(--akzent); color: var(--grund); cursor: pointer;
}
button:active { opacity: .85; }

/* Leiste unten beim Markieren */
.auswahlleiste {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--papier); border-top: 1px solid var(--linie);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .15);
  padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
  z-index: 10;
}
[hidden] { display: none !important; }
.leiste-knoepfe { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.auswahlleiste button { padding: .6rem .9rem; }
.leiste-notiz { max-width: 40rem; margin: 0 auto; }
.leiste-zitat {
  margin: 0 0 .4rem; font-size: .85rem; font-style: italic; color: var(--leise);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#notiz-feld { min-height: 3.5rem; margin-bottom: .5rem; }
.btn-gut { background: var(--gut-rand); color: #fff; }
.btn-schlecht { background: var(--schlecht-rand); color: #fff; }
.btn-notiz { background: var(--notiz-rand); color: #fff; }
.btn-abbrechen { background: var(--linie); color: var(--schrift); }

.fuss { color: var(--leise); font-size: .85rem; margin-top: 2rem; }

/* Anmeldung */
.login-form { display: flex; flex-direction: column; gap: .6rem; max-width: 20rem; }
p.fehler { color: var(--schlecht-rand); }
p.kurz { color: var(--leise); }

/* Aeltere Einzelseiten (/uebersicht, /sammlung, /text), nicht mehr verlinkt */
.karten { display: flex; flex-direction: column; gap: .7rem; }
a.karte {
  display: block; background: var(--papier); border: 1px solid var(--linie);
  border-radius: .6rem; padding: .8rem 1rem; text-decoration: none; color: var(--schrift);
}
ol.text-liste { list-style: none; margin: 0; padding: 0; }
li.text-eintrag {
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: .6rem; padding: .7rem .9rem; margin-bottom: .6rem;
}
.lesetext { font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; line-height: 1.7; }
.lesetext p.absatz { margin: 0 0 .9em; }
.lesetext .nr { font: .65rem sans-serif; color: var(--leise); margin-right: .6rem; user-select: none; }
p.trenner { text-align: center; color: var(--leise); margin: 1.5em 0; }