/* Gutenachtgeschichten - Aussehen
   Abendlich und ruhig. Grosse Schrift, viel Abstand, wenig Farbe. */

:root {
  --nacht:        #1b2233;
  --nacht-tief:   #141a28;
  --karte:        #222b40;
  --karte-hell:   #2b3650;
  --schrift:      #f2ece0;
  --schrift-matt: #b9b2a4;
  --warm:         #f0c674;
  --warm-tief:    #c99b3f;
  --gruen:        #8fbf72;
  --rand:         #37425e;
  --lesegroesse:  1.5rem;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--nacht);
  color: var(--schrift);
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  -webkit-text-size-adjust: 100%;
}

body { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }

/* Seitlicher Abstand berücksichtigt die abgerundeten Ecken und die
   Aussparung oben bei neueren iPhones. */
.huelle {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.25rem max(1rem, env(safe-area-inset-left)) 1.25rem max(1rem, env(safe-area-inset-right));
}

/* --- Kopf --- */

header.kopf {
  padding: max(1.5rem, calc(env(safe-area-inset-top) + 0.75rem)) 1rem 0.75rem;
  text-align: center;
}

header.kopf h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: normal;
  letter-spacing: 0.02em;
  color: var(--warm);
}

header.kopf p {
  margin: 0.4rem 0 0;
  color: var(--schrift-matt);
  font-size: 0.95rem;
}

/* --- Liste --- */

.liste { list-style: none; margin: 0; padding: 0; }

.liste li { margin-bottom: 0.85rem; }

.geschichte-knopf {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
  color: var(--schrift);
  font-family: inherit;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background 0.15s;
}

.geschichte-knopf:hover,
.geschichte-knopf:focus { background: var(--karte-hell); outline: none; }

.geschichte-knopf .nummer {
  color: var(--warm-tief);
  font-size: 0.9rem;
  display: block;
  margin-bottom: 0.2rem;
}

.geschichte-knopf .zusatz {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.85rem;
  color: var(--schrift-matt);
}

.marke {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.1rem 0.5rem;
  border-radius: 0.6rem;
  background: var(--rand);
  color: var(--schrift-matt);
  margin-right: 0.4rem;
}

.marke.ton { background: var(--warm-tief); color: var(--nacht-tief); }

/* --- Geschichte --- */

/* Antippflächen mindestens 44 mal 44 Pixel. Darunter trifft man auf dem
   Handy schlecht, besonders mit weniger sicherer Hand. */
.zurueck {
  background: none;
  border: none;
  color: var(--warm);
  font-family: inherit;
  font-size: 1.05rem;
  padding: 0.75rem 0;
  min-height: 44px;
  cursor: pointer;
}

h2.titel {
  font-size: 1.9rem;
  font-weight: normal;
  margin: 0.5rem 0 1.5rem;
  color: var(--warm);
}

.text {
  font-size: var(--lesegroesse);
  line-height: 1.4;
}

.text p { margin: 0 0 1.4rem; }

/* Ein Satz je Element. Der Abstand zwischen zwei Sätzen ist grösser als der
   zwischen zwei Zeilen desselben Satzes. Beim Vorlesen ist damit auf einen
   Blick erkennbar, wo ein Satz endet und der nächste beginnt. */
.text .satz {
  display: block;
  margin-bottom: 0.55rem;
}

.text p.refrain {
  background: var(--karte);
  border-left: 4px solid var(--warm);
  border-radius: 0 0.6rem 0.6rem 0;
  padding: 0.9rem 1.1rem;
  margin: 1.4rem 0;
  font-style: italic;
}

.text p.refrain::after {
  content: 'Vor dem letzten Wort eine Pause machen.';
  display: block;
  font-style: normal;
  font-size: 0.95rem;
  color: var(--schrift-matt);
  margin-top: 0.5rem;
}

.text p.formel { color: var(--schrift-matt); }

/* --- Kästen unter dem Text --- */

.kasten {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
  margin-top: 1.5rem;
}

.kasten h3 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: normal;
  color: var(--warm);
}

.kasten p.hinweis {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  color: var(--schrift-matt);
}

.kasten dl { margin: 0; font-size: 1.05rem; }
.kasten dt { color: var(--warm); margin-top: 0.7rem; }
.kasten dt:first-child { margin-top: 0; }
.kasten dd { margin: 0.15rem 0 0; color: var(--schrift-matt); }

.kasten ol { margin: 0; padding-left: 1.3rem; font-size: 1.05rem; line-height: 1.65; }
.kasten ol li { margin-bottom: 0.6rem; }

/* --- Knöpfe --- */

.knopfreihe {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

button.tat {
  flex: 1 1 10rem;
  background: var(--warm);
  color: var(--nacht-tief);
  border: none;
  border-radius: 0.8rem;
  padding: 0.9rem 1.1rem;
  font-family: inherit;
  font-size: 1.05rem;
  cursor: pointer;
}

button.tat.still {
  background: transparent;
  color: var(--schrift);
  border: 1px solid var(--rand);
}

button.tat.laeuft { background: #d36a6a; color: #fff; }

button.tat:disabled { opacity: 0.45; cursor: default; }

/* --- Abspieler --- */

audio { width: 100%; margin-top: 0.8rem; }

.aufnahme-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--schrift-matt);
  margin-top: 0.4rem;
}

.aufnahme-zeile button {
  background: none;
  border: none;
  color: var(--schrift-matt);
  font-family: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

/* --- Schriftgrösse --- */

.groessenwahl {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
  color: var(--schrift-matt);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.groessenwahl button {
  background: var(--karte);
  border: 1px solid var(--rand);
  color: var(--schrift);
  border-radius: 0.5rem;
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
  font-family: inherit;
  cursor: pointer;
}

/* --- Meldungen --- */

.meldung {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border-radius: 0.7rem;
  font-size: 0.95rem;
}

.meldung.gut  { background: rgba(143,191,114,0.18); color: var(--gruen); }
.meldung.hin  { background: rgba(240,198,116,0.15); color: var(--warm); }
.meldung.weg  { background: rgba(211,106,106,0.18); color: #f0a0a0; }

.leer {
  text-align: center;
  color: var(--schrift-matt);
  padding: 3rem 1rem;
  line-height: 1.7;
}

footer {
  text-align: center;
  color: var(--schrift-matt);
  font-size: 0.8rem;
  padding: 2rem 1rem 1rem;
}

footer a { color: var(--schrift-matt); }

@media (max-width: 30rem) {
  :root { --lesegroesse: 1.35rem; }
  header.kopf h1 { font-size: 1.5rem; }
  h2.titel { font-size: 1.6rem; }
}