/* Gestaltung 2026 – gemeinsame Regeln für Leseseiten (Offenbarungen, später Buch). Aus Gestaltung-Muster-2026/lesen.css übernommen. */

.leseseite { width: min(100% - 4rem, 70rem); display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 4.5rem; margin-top: 3.5rem; }

/* Seitenleiste */
.seitenspalte { font-family: var(--schrift-ui); align-self: start; }
.verzeichnis summary { display: none; }
.verzeichnis h2 { font-family: var(--schrift-ui); font-size: .95rem; color: var(--leise); font-weight: 400; margin: 0 0 .5rem; }
.verzeichnis select { font: inherit; width: 100%; padding: .4rem .5rem; margin-bottom: 1rem; color: var(--tinte); background: var(--karte); border: 1px solid var(--linie); border-radius: 6px; }
.verzeichnis ol { list-style: none; margin: 0; padding: 0; }
.verzeichnis li a { display: block; padding: .32rem .7rem; color: var(--tinte); text-decoration: none; border-left: 2px solid var(--linie); }
.verzeichnis li a:hover { background: var(--flaeche); }
.verzeichnis li a[aria-current] { border-left-color: var(--link); font-weight: 600; }

/* Weitere Blöcke der Seitenspalte (früher rechte Spalte): Impuls, Hören, Verteiler */
.spaltenblock { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.spaltenblock h2 { font-family: var(--schrift-ui); font-size: .95rem; color: var(--leise); font-weight: 400; margin: 0 0 .5rem; }
.spaltenblock p { font-size: .92rem; line-height: 1.45; color: var(--leise); margin: 0 0 .6rem; }
.spaltenblock ul { list-style: none; margin: 0; padding: 0; }
.spaltenblock li a { display: block; padding: .25rem 0; }

/* Kopfzeile über dem Text: vor / zurück, klein */
.blaettern { display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; align-items: baseline; font-family: var(--schrift-ui); font-size: .92rem; color: var(--leise); }
.blaettern a { color: var(--leise); }
.blaettern a:hover { color: var(--tinte); }
.blaettern .datum { color: var(--tinte); font-size: 1.05rem; margin-right: auto; }
.blaettern .aus { opacity: .55; }
.blaettern.lang { justify-content: flex-end; }
.blaettern.lang .datum { flex-basis: 100%; }

/* Werkzeugleiste */
.lesewerkzeuge {
	position: sticky; top: var(--kopfhoehe); z-index: 10; margin: 1.2rem 0 3rem; padding: .6rem 0;
	background: var(--grund); border-block: 1px solid var(--linie);
	display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-family: var(--schrift-ui);
}
.lesewerkzeuge .knopf { padding: .42rem .95rem; }
/* Vorlesen mit angesetztem Pfeil für die Stimmenwahl */
.geteilt { display: inline-flex; }
.geteilt.mit-pfeil [data-vorlesen] { border-radius: 999px 0 0 999px; }
.geteilt .pfeil { border-radius: 0 999px 999px 0; padding-inline: .45rem .6rem; border-left-color: color-mix(in srgb, var(--grund) 35%, var(--link)); }
.geteilt .pfeil svg { width: 1rem; height: 1rem; }
.geteilt .menue { max-height: 60vh; overflow-y: auto; }
.lesewerkzeuge [data-merken] .menue { min-width: 18rem; }

/* Weiterlesen, wo ich war */
.weiterlesen { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1rem; margin: -1.8rem 0 2.5rem; padding: .6rem .5rem .6rem 1rem; background: var(--flaeche); border-radius: 8px; font-family: var(--schrift-ui); }
.weiterlesen[hidden] { display: none; }
.weiterlesen a { font-weight: 600; }
.weiterlesen .auszug { flex: 1; min-width: 12rem; color: var(--leise); font-size: .92rem; }
.weiterlesen .knopf-rund { width: 2rem; height: 2rem; color: var(--leise); }
.weiterlesen .knopf-rund svg { width: 1rem; height: 1rem; }

.lesewerkzeuge .rechts { margin-left: auto; display: flex; gap: .2rem; align-items: center; }
.lesewerkzeuge .groesse { font-family: "Times New Roman", Times, serif; font-size: 1.05rem; width: 2.3rem; height: 2.3rem; }
.lesewerkzeuge .groesse.gross { font-size: 1.35rem; }

/* ---------- Offenbarungstext: Regeln aus Gestaltung.css (#WORT) übernommen ---------- */
.wort { font-size: var(--lesegroesse); color: var(--tinte); hyphens: auto; display: flow-root; }
.wort h1, .wort h3 { text-align: center; margin: 0 0 15px; padding: 0; font: bold 1.75em/1.2 Georgia, "Times New Roman", Times, serif; }
.wort h3 { margin-top: .6em; }
.wort h2 { text-align: center; font: bold 1em/1.3 Georgia, "Times New Roman", Times, serif; margin: 0 0 5px; padding: 0; }
/* Kreisname und Datumszeile als eine h1 (Umstellung.php, Lesetext): die Zeile sieht aus wie die frühere h2 darunter */
.wort h1.mit-unterzeile { margin-bottom: 5px; }
.wort h1 .unterzeile { display: block; margin-top: 15px; font: bold calc(1em / 1.75)/1.3 Georgia, "Times New Roman", Times, serif; }
.wort h2.Emblem { height: 75px; background: url(../../Bilder/Symbol_LLKorig_webKleiner.gif) no-repeat center center; margin: 20px 0; }
.wort p { margin: 0 0 .45em; padding: 0; text-align: justify; text-indent: 15px; font: 1em/1.6 var(--schrift-text); }
/* Kopfblatt: umschließt h1 bis zur Titelbox der .htm-Datei, der Inhalt bleibt unverändert */
.wort .kopfblatt { background: var(--flaeche); border-radius: 12px; padding: 3.2rem clamp(1rem, 4vw, 3.5rem) 2.6rem; margin: 0 0 3rem; text-align: center; }
.wort .kopfblatt h2.Emblem { margin: 18px 0 22px; }
.wort .kopfblatt p.Abstaendle, .wort .kopfblatt p.Abstand { display: none; }
.wort p.Liebemystik {
	max-width: 46rem; margin: 0 auto; padding: 1.2rem 0 0; border: 0; border-top: 1px solid var(--linie);
	text-align: center; text-indent: 0; font: .78em/1.65 var(--schrift-ui); color: var(--leise); hyphens: manual;
}
.wort p.Liebemystik b { color: var(--tinte); font-weight: 600; }
.wort p.Initialzeile { text-indent: -7px; }
.wort p.Initialzeile::first-letter {
	float: left; font: bold 340%/75% "Times New Roman", Times, serif; text-transform: uppercase;
	padding: 0; margin: -1px 6pt 0 -20px; color: #7c7e7b; text-shadow: #bdbdbd 3px 3px 2px;
}
.wort .Amen { margin: 5px 0 .45em; padding: 0; text-align: center; text-indent: 0; font: bold 1em var(--schrift-text); }
.wort p.Abstand { margin: 35px 0; font-size: 30px; color: transparent; }
.wort p.Abstaendle { margin: 15px 0; font-size: 30px; color: transparent; }
.wort p.Anmerkung { font: 1rem/1.5 Arial, Helvetica, sans-serif; text-indent: 0; margin-bottom: 15px; }
/* Klassen aus älteren Texten (aus Gestaltung.css) */
.wort .MsoOffenbarung, .wort .JesuChristiTitel, .wort .Monatstitel { text-align: center; text-indent: 0; margin: 0 0 15px; font: bold 1.75em/1.2 Georgia, "Times New Roman", Times, serif; }
.wort .mittig, .wort .MsoNormalmittig { text-align: center; text-indent: 0; margin-top: 5px; margin-bottom: 10px; }
.wort .fett { font-weight: bold; }
.wort .Grossbuchstaben { text-transform: uppercase; }
.wort .Kapitaelchen { font-variant: small-caps; }
.wort img { display: inline-block; max-width: 100%; height: auto; }
.wort p.fehlt { text-align: center; text-indent: 0; color: var(--leise); }
/* Sprunganker je Absatz (Links aus Suche und Impuls) */
.wort .anker { scroll-margin-top: calc(var(--kopfhoehe) + 4.5rem); }
.wort .merkvorschau, .wort .anker:target + * { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.wort p.liest, .wort .Amen.liest { background: color-mix(in srgb, var(--gold) 18%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wort h2.Emblem { filter: invert(1); } }
:root[data-theme="dark"] .wort h2.Emblem { filter: invert(1); }

@media (max-width: 900px) {
	.leseseite { width: min(100% - 2rem, 70rem); grid-template-columns: 1fr; gap: 0; margin-top: 2rem; }
	.seitenspalte { order: 2; margin-top: 3rem; }
	.verzeichnis summary { display: list-item; cursor: pointer; font-size: 1.1rem; padding: .6rem 0; }
	.wort h1, .wort h3 { font-size: 1.4em; }
	.wort h1 .unterzeile { font-size: calc(1em / 1.4); }
	.wort p.Initialzeile::first-letter { margin-left: 0; }
}
@media (max-width: 520px) {
	.blaettern .datum { flex-basis: 100%; }
	.lesewerkzeuge .knopf.zart .text { display: none; }
}
@media (max-width: 400px) {
	.lesewerkzeuge { gap: .25rem; }
	.lesewerkzeuge .knopf { padding: .42rem .65rem; }
	.lesewerkzeuge .groesse { width: 2rem; }
}