/* ==========================================================================
   Entwurf B „Inschrift“
   Abgeleitet von der Wortmarke und vom Buch: Die Gemeinde lebt vom Wort,
   also sieht die Seite aus wie eine sorgfältig gesetzte Buchseite.
   Keine Kästen, nur Papier, Schrift und feine Linien. Auszeichnung in
   Rubrikrot, wie in alten Bibeldrucken die Überschriften.
   ========================================================================== */

@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
	src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
	src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 700; font-display: swap;
	src: url("../fonts/newsreader-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300 700; font-display: swap;
	src: url("../fonts/newsreader-latin-wght-italic.woff2") format("woff2"); }

html[data-entwurf="b"] {
	--papier: #FBFAF6; --sand: #F3F1EA; --linie: #D9D6CC; --grau: #63625D; --schwarz: #262624;
	--akzent: #8E2A2A; --akzent-dunkel: #6E1F1F; --akzent-hell: #F6E9E6; --akzent-text: #8E2A2A;
	--erfolg: #4F6B3E; --hinweis: #8A6A2F; --fehler: #8E2A2A;
	--serif: "Instrument Serif", "EB Garamond", Georgia, serif;
	--sans: "Newsreader", Georgia, serif;
	--ecke: 2px; --ecke-gross: 0px; --breite: 1080px;
}
[data-entwurf="b"] body { font-size: 19px; line-height: 30px; font-variant-numeric: oldstyle-nums; }
[data-entwurf="b"] h1 { font: 400 44px/46px var(--serif); letter-spacing: -.01em; }
[data-entwurf="b"] h2 { font: 400 34px/38px var(--serif); }
[data-entwurf="b"] h3 { font: 600 21px/28px var(--sans); }
@media (min-width: 760px) {
	[data-entwurf="b"] h1 { font-size: 76px; line-height: 76px; }
	[data-entwurf="b"] h2 { font-size: 44px; line-height: 48px; }
}
[data-entwurf="b"] .vorspann { font-size: 22px; line-height: 34px; font-style: italic; }
[data-entwurf="b"] .klein { font-size: 16px; }
[data-entwurf="b"] .etikett, [data-entwurf="b"] .angaben dt, [data-entwurf="b"] .bibelzitat figcaption {
	font: 500 15px/20px var(--sans); font-variant-caps: all-small-caps; letter-spacing: .14em; text-transform: none; color: var(--akzent-text); font-size: 17px; }
[data-entwurf="b"] .etikett a { color: inherit; }
[data-entwurf="b"] .knopf { font: 500 18px/24px var(--sans); background: var(--schiefer); border-color: var(--schiefer); padding: 8px 22px; }
[data-entwurf="b"] .knopf:hover { background: var(--schwarz); border-color: var(--schwarz); }
/* Zweitrangige Schaltflächen sind Textverweise mit Pfeil */
[data-entwurf="b"] .knopf-rand, [data-entwurf="b"] .einstieg .knopf-geist { background: none; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; padding: 8px 0 2px; min-height: 0; color: var(--akzent-text); font-style: italic; }
[data-entwurf="b"] .knopf-rand::after, [data-entwurf="b"] .knopf-geist::after { content: "→"; font-style: normal; }
[data-entwurf="b"] .knopf-rand:hover, [data-entwurf="b"] .einstieg .knopf-geist:hover { background: none; color: var(--akzent-dunkel); border-bottom-width: 2px; }
[data-entwurf="b"] .knopf-rand.knopf-klein { font-size: 17px; }

/* Kopf wie ein Buchtitel: Wortmarke mittig, Menü darunter */
[data-entwurf="b"] .kopf { border-bottom: 0; }
[data-entwurf="b"] .kopf-innen { justify-content: center; flex-direction: column; padding-top: 24px; padding-bottom: 0; gap: 16px; }
[data-entwurf="b"] .kopf-marke img { width: 200px; }
[data-entwurf="b"] .menue { border-top: 1px solid var(--linie); border-bottom: 3px double var(--linie); align-self: stretch; }
[data-entwurf="b"] .menue ul { justify-content: center; gap: 0 20px; }
[data-entwurf="b"] .menue a { font: 500 19px/24px var(--sans); font-variant-caps: all-small-caps; letter-spacing: .12em; color: var(--schwarz); border-bottom: 0; }
[data-entwurf="b"] .menue a[aria-current], [data-entwurf="b"] .menue a:hover { color: var(--akzent-text); }
@media (max-width: 859px) { [data-entwurf="b"] .kopf-innen { flex-direction: row; justify-content: space-between; padding-bottom: 16px; } [data-entwurf="b"] .kopf-marke img { width: 150px; } [data-entwurf="b"] .menue ul { align-items: center; } }

/* Einstieg: Titelseite, keine Farbfläche */
[data-entwurf="b"] .einstieg { background: var(--papier); color: var(--schwarz); text-align: center; }
[data-entwurf="b"] .einstieg-innen { display: block; padding-top: 56px; padding-bottom: 56px; }
[data-entwurf="b"] .einstieg h1 { color: var(--schiefer); font-size: 64px; line-height: 64px; margin-bottom: 24px; }
[data-entwurf="b"] .einstieg h1::after { content: ""; display: block; width: 72px; height: 1px; background: var(--akzent); margin: 24px auto 0; }
[data-entwurf="b"] .einstieg .etikett { color: var(--akzent-text); margin-bottom: 16px; }
[data-entwurf="b"] .einstieg .vorspann { color: var(--schwarz); margin-left: auto; margin-right: auto; max-width: 30em; }
[data-entwurf="b"] .einstieg-knoepfe { justify-content: center; align-items: baseline; gap: 16px 32px; }
[data-entwurf="b"] .einstieg .knopf { background: var(--schiefer); border-color: var(--schiefer); color: #fff; }
[data-entwurf="b"] .einstieg .knopf.knopf-geist { background: none; border: 0; border-bottom: 1px solid currentColor; color: var(--akzent-text); }
[data-entwurf="b"] .einstieg .knopf.knopf-geist:hover { background: none; color: var(--akzent-dunkel); }
[data-entwurf="b"] .einstieg-logo { display: none; }
@media (min-width: 760px) { [data-entwurf="b"] .einstieg h1 { font-size: 120px; line-height: 112px; } [data-entwurf="b"] .einstieg-innen { padding-top: 88px; padding-bottom: 88px; } }

[data-entwurf="b"] .zeitband { background: none; border: 0; }
[data-entwurf="b"] .zeitband-innen { border-top: 3px double var(--linie); border-bottom: 3px double var(--linie); justify-content: space-between; text-align: center; padding: 24px 0; margin: 0 var(--rand); max-width: var(--breite); }
@media (min-width: 1130px) { [data-entwurf="b"] .zeitband-innen { margin: 0 auto; } }
[data-entwurf="b"] .zeitband-wann { font: 400 26px/30px var(--serif); }

[data-entwurf="b"] .seitenkopf { background: none; border: 0; text-align: center; padding: 56px 0 0; }
[data-entwurf="b"] .seitenkopf h1 { margin-left: auto; margin-right: auto; }
[data-entwurf="b"] .seitenkopf .vorspann { margin: 0 auto; color: var(--schwarz); }
[data-entwurf="b"] .seitenkopf .rahmen::after { content: ""; display: block; width: 72px; height: 1px; background: var(--akzent); margin: 32px auto 0; }
[data-entwurf="b"] .seitenkopf .angaben { justify-content: center; }

[data-entwurf="b"] .karte { background: none; border: 0; border-top: 1px solid var(--schwarz); border-radius: 0; padding: 16px 0 0; }
[data-entwurf="b"] .karte-predigt h3 { font: 400 38px/40px var(--serif); }
[data-entwurf="b"] .kontakt-raster .karte-breit, [data-entwurf="b"] .karte-breit { background: none; }
[data-entwurf="b"] .gruppen { gap: 40px 32px; }
[data-entwurf="b"] .gruppen h3 { font: 400 30px/32px var(--serif); color: var(--schiefer); }
[data-entwurf="b"] .gruppe-zeit { font-style: italic; font-weight: 400; color: var(--akzent-text); }
[data-entwurf="b"] .band { background: none; border: 0; padding: 0 0 96px; }
[data-entwurf="b"] .band .rahmen { display: block; text-align: center; border-top: 3px double var(--linie); padding-top: 72px; }
[data-entwurf="b"] .band-text { max-width: 34em; margin: 48px auto 0; }
[data-entwurf="b"] .bibelzitat { border: 0; padding: 0; }
[data-entwurf="b"] .bibelzitat blockquote p { font: italic 400 28px/36px var(--serif); color: var(--schwarz); }
[data-entwurf="b"] .bibelzitat-gross blockquote p { max-width: 22em; margin-left: auto; margin-right: auto; }
@media (min-width: 760px) { [data-entwurf="b"] .bibelzitat-gross blockquote p { font-size: 44px; line-height: 52px; } }
[data-entwurf="b"] .hinweis { background: none; border: 0; border-top: 1px solid var(--akzent); border-bottom: 1px solid var(--akzent); border-radius: 0; padding: 16px 0; font-style: italic; }
/* Initiale am Anfang langer Lesetexte */
[data-entwurf="b"] .vorlage-default .text > p:first-of-type::first-letter { font: 400 84px/66px var(--serif); float: left; padding: 6px 10px 0 0; color: var(--akzent); }
[data-entwurf="b"] .text { margin-left: auto; margin-right: auto; max-width: 34em; }
[data-entwurf="b"] .text > h2 { text-align: center; margin-top: 64px; }
[data-entwurf="b"] .text > h3 { font: italic 400 26px/32px var(--serif); color: var(--akzent-text); }
[data-entwurf="b"] .unterseiten { max-width: 34em; margin-left: auto; margin-right: auto; grid-template-columns: 1fr; }

[data-entwurf="b"] .filter { background: none; border: 0; border-top: 1px solid var(--schwarz); border-bottom: 1px solid var(--schwarz); border-radius: 0; padding: 24px 0; }
[data-entwurf="b"] .filter label, [data-entwurf="b"] .formular label, [data-entwurf="b"] .transkript-suche label { font: 500 17px/22px var(--sans); font-variant-caps: all-small-caps; letter-spacing: .12em; }
[data-entwurf="b"] :is(.filter, .formular, .transkript-suche) :is(input, select, textarea) { border: 0; border-bottom: 1px solid var(--schwarz); border-radius: 0; background: transparent; padding-left: 0; font: 400 19px/26px var(--sans); }
[data-entwurf="b"] .filter-suche input { font: italic 400 26px/34px var(--serif); min-height: 52px; }
[data-entwurf="b"] .reihen ul { gap: 4px 24px; }
[data-entwurf="b"] .reihen a { border: 0; background: none; padding: 0; min-height: 36px; font: italic 400 21px/28px var(--sans); color: var(--akzent-text); }
[data-entwurf="b"] .reihen a span { font-style: normal; color: var(--grau); }
[data-entwurf="b"] .zeile { padding: 20px 0; }
[data-entwurf="b"] .zeile-datum, [data-entwurf="b"] .zeile-angaben, [data-entwurf="b"] .zeile-treffer { font-size: 17px; line-height: 26px; }
[data-entwurf="b"] .zeile-titel { font: 400 30px/32px var(--serif); margin-bottom: 6px; }
[data-entwurf="b"] .angabe-stelle { font-weight: 400; font-style: italic; color: var(--akzent-text); }
[data-entwurf="b"] .knopf-hoeren { background: none; border: 1px solid var(--schwarz); color: var(--schwarz); }
[data-entwurf="b"] .knopf-hoeren:hover, [data-entwurf="b"] .knopf-hoeren.spielt { background: var(--schwarz); color: #fff; }
[data-entwurf="b"] .knopf-laden { border-color: transparent; }
[data-entwurf="b"] .zeitmarke { background: none; padding: 0; font: 500 16px/20px var(--sans); font-variant-numeric: tabular-nums lining-nums; color: var(--akzent-text); }
[data-entwurf="b"] button.zeitmarke:hover { background: none; color: var(--akzent-dunkel); text-decoration: underline; }
[data-entwurf="b"] .transkript { border: 0; border-top: 3px double var(--linie); background: none; }
[data-entwurf="b"] .transkript summary { padding-left: 0; }
[data-entwurf="b"] .transkript > :not(summary) { margin-left: 0; margin-right: 0; }
[data-entwurf="b"] .transkript-text p { text-indent: 0; }
[data-entwurf="b"] .termin-tag { font: 400 24px/28px var(--serif); color: var(--schiefer); }
[data-entwurf="b"] .termin-zeit { font-style: italic; }
[data-entwurf="b"] .fuss { text-align: center; padding-top: 72px; }
[data-entwurf="b"] .fuss-raster { justify-items: center; }
[data-entwurf="b"] .fuss .etikett { color: var(--schiefer-hell); font: 500 17px/20px var(--sans); font-variant-caps: all-small-caps; letter-spacing: .14em; }