/* ==========================================================================
   Entwurf A „Bruchstein“
   Abgeleitet vom Fenster im Logo: geschnittene Steine, helle Fugen.
   Flächen stoßen mit einer Fuge aneinander, nichts ist abgerundet.
   Akzent: Steinzeugkobalt, das Blau der Westerwälder Töpferei auf grauem Grund.
   ========================================================================== */

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap;
	src: url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2"); }

html[data-entwurf="a"] {
	--papier: #F7F8F8; --sand: #ECEEEE; --linie: #D2D6D7; --grau: #5F696D; --schwarz: #23292C;
	--akzent: #2C5F8A; --akzent-dunkel: #21486A; --akzent-hell: #E3EBF2; --akzent-text: #21486A;
	--erfolg: #4F6B3E; --hinweis: #9A5B12; --fehler: #8E2A2A;
	--knopf-auf-dunkel: #FFFFFF; --knopf-auf-dunkel-text: #23292C; --knopf-auf-dunkel-hover: #D2D6D7;
	--serif: "Bricolage Grotesque", "Arial Narrow", sans-serif;
	--sans: "Instrument Sans", system-ui, sans-serif;
	--ecke: 0px; --ecke-gross: 0px; --fuge: 6px;
}
[data-entwurf="a"] body { font-size: 17px; }
[data-entwurf="a"] h1 { font: 700 40px/42px var(--serif); letter-spacing: -.02em; }
[data-entwurf="a"] h2 { font: 700 28px/32px var(--serif); letter-spacing: -.015em; }
[data-entwurf="a"] h3 { font: 600 20px/28px var(--sans); }
@media (min-width: 760px) {
	[data-entwurf="a"] h1 { font-size: 64px; line-height: 62px; }
	[data-entwurf="a"] h2 { font-size: 36px; line-height: 40px; }
}
/* Ein kleiner Stein vor jeder Abschnittsüberschrift */
[data-entwurf="a"] main h2::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .35em; background: var(--akzent); clip-path: polygon(8% 0, 100% 12%, 88% 100%, 0 82%); }
[data-entwurf="a"] .transkript summary h2::before, [data-entwurf="a"] .karte-link h2::before { display: none; }
[data-entwurf="a"] h2.etikett { font: 700 13px/20px var(--sans); letter-spacing: .04em; }
[data-entwurf="a"] main h2.etikett::before { display: none; }
[data-entwurf="a"] .etikett { letter-spacing: .04em; font-weight: 700; color: var(--grau); }
[data-entwurf="a"] .knopf { font-weight: 700; border-width: 2px; padding: 8px 20px; }
[data-entwurf="a"] .knopf-rand { border-color: var(--schwarz); color: var(--schwarz); }
[data-entwurf="a"] .knopf-rand:hover { background: var(--schwarz); color: #fff; }

[data-entwurf="a"] .kopf { border-bottom: var(--fuge) solid #fff; background: var(--sand); }
[data-entwurf="a"] .menue a { font-weight: 600; border-bottom-width: 3px; }

/* Einstieg: heller Stein links, das Mosaik als Fenster rechts */
[data-entwurf="a"] .einstieg { background: #fff; color: var(--schwarz); position: relative; }
[data-entwurf="a"] .einstieg-innen { padding-top: 48px; padding-bottom: 48px; }
[data-entwurf="a"] .einstieg h1, [data-entwurf="a"] .einstieg .vorspann { color: var(--schwarz); }
[data-entwurf="a"] .einstieg .etikett { color: var(--akzent-text); }
[data-entwurf="a"] .einstieg .knopf { background: var(--akzent); border-color: var(--akzent); color: #fff; }
[data-entwurf="a"] .einstieg .knopf:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
[data-entwurf="a"] .einstieg .knopf-geist { background: transparent; border-color: var(--schwarz); color: var(--schwarz); }
[data-entwurf="a"] .einstieg .knopf-geist:hover { background: var(--schwarz); color: #fff; }
[data-entwurf="a"] .einstieg-logo { display: none; }
[data-entwurf="a"] .einstieg-schmuck { display: block; height: 120px; background: url("../img/bruchstein-hell.svg") center / cover; }
@media (min-width: 860px) {
	[data-entwurf="a"] .einstieg-innen { grid-template-columns: 7fr 5fr; padding-top: 112px; padding-bottom: 112px; min-height: 520px; }
	[data-entwurf="a"] .einstieg-schmuck { position: absolute; top: 0; bottom: 0; right: 0; width: 38%; height: auto; border-left: var(--fuge) solid #fff; }
}

/* Drei Steine nebeneinander */
[data-entwurf="a"] .zeitband { background: #fff; border: 0; padding: var(--fuge) 0; }
[data-entwurf="a"] .zeitband-innen { max-width: none; padding: 0; gap: var(--fuge); grid-template-columns: 1fr; justify-content: stretch; }
[data-entwurf="a"] .zeitband-innen > div { padding: 24px var(--rand); }
[data-entwurf="a"] .zeitband-innen > div:nth-child(1) { background: var(--schiefer); color: #fff; }
[data-entwurf="a"] .zeitband-innen > div:nth-child(1) .etikett { color: var(--schiefer-hell); }
[data-entwurf="a"] .zeitband-innen > div:nth-child(2) { background: var(--schiefer-hell); }
[data-entwurf="a"] .zeitband-innen > div:nth-child(2) .etikett, [data-entwurf="a"] .zeitband-innen > div:nth-child(3) .etikett { color: var(--schwarz); }
[data-entwurf="a"] .zeitband-innen > div:nth-child(3) { background: var(--sand); }
[data-entwurf="a"] .zeitband-wann { font: 700 24px/28px var(--serif); }
@media (min-width: 760px) {
	[data-entwurf="a"] .zeitband-innen { grid-template-columns: 5fr 4fr 3fr; }
	[data-entwurf="a"] .zeitband-innen > div { padding: 32px 40px; }
}

[data-entwurf="a"] .seitenkopf { background: var(--schiefer); border: 0; border-bottom: var(--fuge) solid #fff; padding: 64px 0 40px; }
[data-entwurf="a"] .seitenkopf h1 { color: #fff; }
[data-entwurf="a"] .seitenkopf .vorspann { color: var(--schiefer-hell); }
[data-entwurf="a"] .seitenkopf .etikett, [data-entwurf="a"] .seitenkopf .etikett a { color: var(--schiefer-hell); }
[data-entwurf="a"] .seitenkopf .angaben dt { color: var(--schiefer-hell); }
[data-entwurf="a"] .seitenkopf .angaben dd, [data-entwurf="a"] .seitenkopf .angaben a { color: #fff; }

[data-entwurf="a"] .karte { border: 0; background: var(--sand); }
[data-entwurf="a"] .gruppen { gap: var(--fuge); background: #fff; }
[data-entwurf="a"] .gruppen .karte:nth-child(3n+1) { background: var(--schiefer-hell); }
[data-entwurf="a"] .gruppen .karte:nth-child(4n+2) { background: var(--schiefer); color: #fff; }
[data-entwurf="a"] .gruppen .karte:nth-child(4n+2) :is(h3, .gruppe-zeit) { color: #fff; }
[data-entwurf="a"] .gruppen .karte:nth-child(4n+2) :is(.leise, a) { color: var(--schiefer-hell); }
[data-entwurf="a"] .karte-predigt { background: var(--schiefer); color: #fff; padding: 32px; }
[data-entwurf="a"] .karte-predigt h3 { font: 700 28px/32px var(--serif); }
[data-entwurf="a"] .karte-predigt h3 a { color: #fff; }
[data-entwurf="a"] .karte-predigt :is(.etikett, .leise) { color: var(--schiefer-hell); }
[data-entwurf="a"] .band { background: var(--schiefer-hell); border: 0; border-top: var(--fuge) solid #fff; }
[data-entwurf="a"] .bibelzitat { border-left: var(--fuge) solid var(--akzent); }
[data-entwurf="a"] .bibelzitat blockquote p { font: 600 24px/32px var(--serif); color: var(--schwarz); letter-spacing: -.01em; }
@media (min-width: 760px) { [data-entwurf="a"] .bibelzitat-gross blockquote p { font-size: 34px; line-height: 42px; } }
[data-entwurf="a"] .bibelzitat figcaption { color: var(--akzent-text); }

[data-entwurf="a"] .filter { border: 0; background: var(--schiefer-hell); }
[data-entwurf="a"] .filter :is(input, select) { border: 2px solid var(--schwarz); }
[data-entwurf="a"] .reihen a { border: 0; background: var(--sand); }
[data-entwurf="a"] .reihen a:hover { background: var(--akzent); color: #fff; }
[data-entwurf="a"] .reihen a:hover span { color: #fff; }
[data-entwurf="a"] .liste { border-top: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fuge); }
[data-entwurf="a"] .zeile { border: 0; background: var(--sand); padding: 0 16px 0 0; gap: 0 16px; align-items: stretch; }
[data-entwurf="a"] .zeile-datum { background: var(--schiefer); color: #fff; padding: 8px 16px; font-weight: 700; }
[data-entwurf="a"] .zeile { grid-template-columns: minmax(0, 1fr) auto; }
[data-entwurf="a"] .zeile-datum { margin-right: -16px; }
[data-entwurf="a"] .reihen h2::before { display: none; }
[data-entwurf="a"] .reihen h2 { font: 700 13px/20px var(--sans); letter-spacing: .04em; }
[data-entwurf="a"] .zeile-text { padding: 12px 0 12px 16px; }
[data-entwurf="a"] .zeile-knoepfe { align-self: center; }
[data-entwurf="a"] .zeile-titel { font: 700 22px/26px var(--serif); letter-spacing: -.01em; }
[data-entwurf="a"] .zeile-titel a { color: var(--schwarz); }
[data-entwurf="a"] .knopf-hoeren, [data-entwurf="a"] .knopf-laden { border-radius: 0; }
[data-entwurf="a"] .knopf-laden { border: 2px solid var(--schwarz); color: var(--schwarz); }
@media (min-width: 760px) {
	[data-entwurf="a"] .zeile { grid-template-columns: 120px minmax(0, 1fr) auto; }
	[data-entwurf="a"] .zeile-datum { display: grid; place-items: center; padding: 16px 8px; margin-right: 0; }
	[data-entwurf="a"] .zeile-text { padding-left: 8px; }
}
[data-entwurf="a"] .zeitmarke { border-radius: 0; }
[data-entwurf="a"] .transkript { border: 0; border-top: var(--fuge) solid var(--schiefer); }
[data-entwurf="a"] .termin-neuer-tag { border-top: 2px solid var(--schwarz); }
[data-entwurf="a"] .termin-tag { font-family: var(--serif); font-weight: 700; color: var(--schwarz); }
[data-entwurf="a"] .fuss { background: var(--schiefer) url("../img/bruchstein-dunkel.svg") right center / auto 100% no-repeat; border-top: var(--fuge) solid #fff; }
[data-entwurf="a"] .fuss-raster { background: var(--schiefer); padding-top: 24px; padding-bottom: 24px; }
@media (min-width: 1100px) { [data-entwurf="a"] .fuss .rahmen { margin-left: max(0px, calc((100vw - 1248px) / 2)); max-width: 880px; } [data-entwurf="a"] .fuss-zeile { background: var(--schiefer); } }