/*
 * Stilblatt fuer die Rahmenseiten von spiritwissen.de (Buecheruebersicht,
 * Kapitelseiten, Abo, Widerruf: buecher.seite_mit_rahmen setzt den Inhalt in
 * den echten Kopf- und Fussbereich der Startseite ein). Diese Seiten
 * verlinken web/stil.css nicht mehr - dessen globale Regeln fuer body, h2,
 * label/input/textarea/button und button ueberschrieben sonst Schrift und
 * Gestalt des Rahmens. Deshalb ausschliesslich Regeln, deren Selektor mit
 * .ekr-rahmen-inhalt beginnt (auch innerhalb von @media), dazu hoechstens
 * :root-Variablen. Die Seitenueberschrift (h1) uebernimmt Schrift, Groesse
 * und Farbe von der echten h1-Regel des Rahmens; diese Datei setzt dafuer
 * nur den Abstand darunter.
 */
:root {
  --abstand-xs: 0.375rem;
  --abstand-s: 0.75rem;
  --abstand-m: 1rem;
  --abstand-l: 1.5rem;
  --abstand-xl: 2.5rem;
  --schrift-klein: 0.875rem;
  --farbe-hintergrund: #ffffff;
  --farbe-flaeche: #ffffff;
  --farbe-text: #333333;
  --farbe-text-leise: #56616d;
  --farbe-linie: #c3dcef;
  --farbe-akzent: #1d71b8;
  --farbe-akzent-dunkel: #155a91;
  --farbe-akzent-hell: #e3f2fb;
  --farbe-fehler: #9b2c2c;
  --farbe-schatten: rgba(36, 48, 42, 0.08);
  --rundung-mittel: 0.9rem;
  --rundung-gross: 1.4rem;
  --breite-inhalt: 75rem;
  --mindestflaeche: 2.75rem;
  --schatten: 0 0.75rem 2.5rem var(--farbe-schatten);
}

.ekr-rahmen-inhalt.seite { width: 100%; margin: 0 auto; padding: var(--abstand-s) 0 var(--abstand-xl); }
.ekr-rahmen-inhalt h1 { margin: 0 0 var(--abstand-s); }
.ekr-rahmen-inhalt section { margin-bottom: var(--abstand-l); }

.ekr-rahmen-inhalt .dialog { border: 1px solid var(--farbe-linie); border-radius: var(--rundung-gross); background: var(--farbe-flaeche); box-shadow: var(--schatten); padding: var(--abstand-l); }

.ekr-rahmen-inhalt button { font: inherit; min-height: 2.4rem; border: 1px solid var(--farbe-akzent); border-radius: 0.35rem; padding: 0.55rem 1rem; background: var(--farbe-flaeche); color: var(--farbe-akzent-dunkel); cursor: pointer; font-weight: 650; }
.ekr-rahmen-inhalt button:hover { background: var(--farbe-akzent-hell); }

.ekr-rahmen-inhalt .status { min-height: 1.4em; margin: var(--abstand-xs) 0 0; font-size: var(--schrift-klein); }
.ekr-rahmen-inhalt .status.fehler { color: var(--farbe-fehler); }
.ekr-rahmen-inhalt .zustimmungszeile { display: flex; align-items: flex-start; gap: var(--abstand-s); margin: var(--abstand-s) 0; color: var(--farbe-text-leise); font-size: var(--schrift-klein); font-weight: 400; }
.ekr-rahmen-inhalt .zustimmungszeile input { flex: none; width: 1em; height: 1em; margin: 0.275em 0 0; }

.ekr-rahmen-inhalt .leseansicht-fundort { margin: 0 0 var(--abstand-m); color: var(--farbe-text-leise); font-weight: 650; }
.ekr-rahmen-inhalt .leseansicht-text-rahmen { position: relative; overflow-wrap: anywhere; }
.ekr-rahmen-inhalt .leseansicht-text { margin: 0; color: var(--farbe-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.ekr-rahmen-inhalt .leseansicht-text-rahmen h2 {
  margin: var(--abstand-l) 0 0;
  color: var(--farbe-akzent-dunkel);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.25;
}
.ekr-rahmen-inhalt .leseansicht-text-rahmen h3 {
  margin: var(--abstand-l) 0 0;
  color: var(--farbe-akzent-dunkel);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
}
.ekr-rahmen-inhalt .leseansicht-text-rahmen > :first-child { margin-top: 0; }
.ekr-rahmen-inhalt .leseansicht-text-rahmen > p,
.ekr-rahmen-inhalt .leseansicht-text-rahmen > ul,
.ekr-rahmen-inhalt .leseansicht-text-rahmen > ol,
.ekr-rahmen-inhalt .leseansicht-text-rahmen > blockquote {
  margin: var(--abstand-m) 0 0;
}
.ekr-rahmen-inhalt .leseansicht-text-rahmen h2 + p,
.ekr-rahmen-inhalt .leseansicht-text-rahmen h2 + ul,
.ekr-rahmen-inhalt .leseansicht-text-rahmen h2 + ol,
.ekr-rahmen-inhalt .leseansicht-text-rahmen h2 + blockquote,
.ekr-rahmen-inhalt .leseansicht-text-rahmen h3 + p,
.ekr-rahmen-inhalt .leseansicht-text-rahmen h3 + ul,
.ekr-rahmen-inhalt .leseansicht-text-rahmen h3 + ol,
.ekr-rahmen-inhalt .leseansicht-text-rahmen h3 + blockquote {
  margin-top: 0;
}
.ekr-rahmen-inhalt .leseansicht-text-rahmen ul,
.ekr-rahmen-inhalt .leseansicht-text-rahmen ol {
  padding-left: 1.35rem;
}
.ekr-rahmen-inhalt .leseansicht-text-rahmen li + li {
  margin-top: var(--abstand-xs);
}
.ekr-rahmen-inhalt .leseansicht-text-rahmen blockquote {
  padding-left: var(--abstand-m);
  border-left: 3px solid var(--farbe-linie);
  color: var(--farbe-text-leise);
}
.ekr-rahmen-inhalt .leseansicht-text-rahmen blockquote > p:first-child {
  margin-top: 0;
}
.ekr-rahmen-inhalt .leseansicht-fund { background: var(--farbe-akzent-hell); color: var(--farbe-akzent-dunkel); border-radius: 0.2rem; padding: 0 0.15rem; }
.ekr-rahmen-inhalt .leseansicht-fade { height: 4.5rem; margin-top: -4.5rem; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--farbe-hintergrund)); pointer-events: none; }
.ekr-rahmen-inhalt .leseansicht-knoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-s); margin-top: var(--abstand-l); }
.ekr-rahmen-inhalt .leseansicht-grenzhinweis { margin: 0 0 var(--abstand-m); }
.ekr-rahmen-inhalt .leseansicht-abschluss { margin: var(--abstand-m) 0 var(--abstand-s); color: var(--farbe-text-leise); font-size: 1.3rem; text-align: center; }

.ekr-rahmen-inhalt .kapitel-navigation { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--abstand-s); margin-top: var(--abstand-l); padding-top: var(--abstand-m); border-top: 1px solid var(--farbe-linie); }
.ekr-rahmen-inhalt .kapitel-navigation-link { color: var(--farbe-akzent-dunkel); font-weight: 650; text-decoration: none; }
.ekr-rahmen-inhalt .kapitel-navigation-link:hover { text-decoration: underline; }

.ekr-rahmen-inhalt.buecheruebersicht section + section { margin-top: var(--abstand-l); }
.ekr-rahmen-inhalt .buecheruebersicht-liste li + li { margin-top: var(--abstand-xs); }
.ekr-rahmen-inhalt .buecheruebersicht-liste a { color: var(--farbe-akzent-dunkel); font-weight: 650; text-decoration: none; }
.ekr-rahmen-inhalt .buecheruebersicht-liste a:hover { text-decoration: underline; }

@media (max-width: 38rem) {
  .ekr-rahmen-inhalt.seite { width: min(100% - 1.25rem, var(--breite-inhalt)); padding: var(--abstand-s) 0 var(--abstand-xl); }
  .ekr-rahmen-inhalt .leseansicht-knoepfe { flex-direction: column; }
  .ekr-rahmen-inhalt .leseansicht-knoepfe .button { justify-content: center; }
  .ekr-rahmen-inhalt .kapitel-navigation { flex-direction: column; }
}