/* ==========================================================================
   Entwurf C „Schiefer“
   Abgeleitet von der Negativfassung des Logos: dunkler Stein, das Kreuz als
   Licht, das durch die Fuge fällt. Die Predigt zum Hören steht vorn.
   Schrift: Archivo, breit laufende Versalien wie die Zeile WESTERWALD.
   Akzent: Messing, das auf Schiefer leuchtet.
   ========================================================================== */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
	src: url("../fonts/archivo-latin-standard-normal.woff2") format("woff2"); }

html[data-entwurf="c"] {
	color-scheme: dark;
	--tief: #232B2E; --papier: #2E383C; --sand: #3A464B; --linie: #56636A; --grau: #B9C0C2; --grau-hell: #7E8A8F; --schwarz: #EFEDE6;
	--schiefer: #FFFFFF;
	--akzent: #CDA85F; --akzent-dunkel: #E2C285; --akzent-hell: #4A4636; --akzent-text: #DDBB78;
	--erfolg: #9CC28A; --hinweis: #E0A46A; --fehler: #F0A6A0;
	--knopf-auf-dunkel: var(--akzent); --knopf-auf-dunkel-text: #1D2326; --knopf-auf-dunkel-hover: var(--akzent-dunkel);
	--serif: "Archivo", "Arial", sans-serif;
	--sans: "Archivo", "Arial", sans-serif;
	--ecke: 2px; --ecke-gross: 4px;
}
[data-entwurf="c"] body { font-size: 17px; }
[data-entwurf="c"] h1 { font: 600 34px/38px var(--serif); font-stretch: 112%; letter-spacing: -.01em; }
[data-entwurf="c"] h2 { font: 500 15px/20px var(--serif); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase; color: var(--akzent-text); margin-bottom: 24px; display: flex; align-items: center; gap: 16px; }
[data-entwurf="c"] h2::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
[data-entwurf="c"] h3 { font: 600 20px/28px var(--sans); }
@media (min-width: 760px) { [data-entwurf="c"] h1 { font-size: 60px; line-height: 62px; } [data-entwurf="c"] h2 { font-size: 16px; } }
[data-entwurf="c"] .etikett, [data-entwurf="c"] .angaben dt { font: 500 12px/20px var(--sans); font-stretch: 125%; letter-spacing: .2em; color: var(--grau); }
[data-entwurf="c"] mark { color: #1D2326; background: var(--akzent); }
[data-entwurf="c"] .knopf { color: #1D2326; font: 600 15px/24px var(--sans); font-stretch: 112%; letter-spacing: .06em; text-transform: uppercase; }
[data-entwurf="c"] .knopf:hover { color: #1D2326; }
[data-entwurf="c"] .knopf-rand, [data-entwurf="c"] .einstieg .knopf-geist { background: transparent; border-color: var(--linie); color: var(--schwarz); }
[data-entwurf="c"] .knopf-rand:hover, [data-entwurf="c"] .einstieg .knopf-geist:hover { background: transparent; border-color: var(--akzent); color: var(--akzent-text); }
[data-entwurf="c"] .knopf-hell { background: var(--schwarz); border-color: var(--schwarz); }

/* Die Negativfassung des Logos steht auf Schiefer. Kopf und Fuß tragen genau diesen Ton. */
[data-entwurf="c"] .kopf { background: #48555B; border-bottom: 1px solid var(--linie); }
[data-entwurf="c"] .menue a { color: var(--schwarz); font: 500 14px/24px var(--sans); font-stretch: 118%; letter-spacing: .12em; text-transform: uppercase; }
[data-entwurf="c"] .menue a:hover { color: var(--akzent-text); }
[data-entwurf="c"] .menue-knopf { color: var(--schwarz); border-color: var(--linie); }

/* Einstieg: Steinwand, davor das Kreuz als Lichtfuge */
[data-entwurf="c"] .einstieg { background: var(--tief); position: relative; overflow: hidden; }
[data-entwurf="c"] .einstieg-schmuck { display: block; position: absolute; inset: 0; background: url("../img/bruchstein-dunkel.svg") center / cover; opacity: .55;
	-webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 75%); mask-image: linear-gradient(90deg, transparent 10%, #000 75%); }
[data-entwurf="c"] .einstieg-schmuck::before, [data-entwurf="c"] .einstieg-schmuck::after { content: ""; position: absolute; background: #F4EBD6; box-shadow: 0 0 28px 6px rgba(244, 235, 214, .35); }
[data-entwurf="c"] .einstieg-schmuck::before { top: 0; bottom: 0; right: 22%; width: 5px; }
[data-entwurf="c"] .einstieg-schmuck::after { left: 55%; right: 0; top: 34%; height: 5px; }
[data-entwurf="c"] .einstieg-innen { position: relative; }
/* Auf schmalen Bildschirmen läge das Kreuz über dem Text */
@media (max-width: 859px) { [data-entwurf="c"] .einstieg-schmuck::before, [data-entwurf="c"] .einstieg-schmuck::after { display: none; } [data-entwurf="c"] .einstieg-schmuck { opacity: .3; } }
[data-entwurf="c"] .einstieg h1 { font-size: 44px; line-height: 46px; }
[data-entwurf="c"] .einstieg .etikett { color: var(--akzent-text); }
[data-entwurf="c"] .einstieg .vorspann { color: var(--schwarz); }
[data-entwurf="c"] .einstieg-logo { display: none; }
@media (min-width: 860px) { [data-entwurf="c"] .einstieg-innen { padding-top: 128px; padding-bottom: 128px; } [data-entwurf="c"] .einstieg h1 { font-size: 88px; line-height: 86px; } }

[data-entwurf="c"] .zeitband { background: var(--akzent); border: 0; color: #1D2326; }
[data-entwurf="c"] .zeitband .etikett { color: #1D2326; }
[data-entwurf="c"] .zeitband a { color: #1D2326; }
[data-entwurf="c"] .zeitband-wann { font-stretch: 112%; }
[data-entwurf="c"] .seitenkopf { background: var(--tief); border-bottom: 1px solid var(--linie); }
[data-entwurf="c"] .seitenkopf .vorspann { color: var(--grau); }
[data-entwurf="c"] .band { background: var(--tief); border-color: var(--linie); }
[data-entwurf="c"] .band h2::after { display: none; }
[data-entwurf="c"] .bibelzitat blockquote p { font: 300 24px/34px var(--sans); color: var(--schwarz); }
@media (min-width: 760px) { [data-entwurf="c"] .bibelzitat-gross blockquote p { font-size: 34px; line-height: 46px; } }
[data-entwurf="c"] .bibelzitat figcaption { color: var(--akzent-text); font-stretch: 125%; }

[data-entwurf="c"] .karte { background: var(--sand); border-color: var(--linie); }
[data-entwurf="c"] .karte-predigt { background: var(--tief); border-color: var(--akzent); border-width: 1px 1px 1px 5px; padding: 32px; }
[data-entwurf="c"] .karte-predigt h3 { font: 600 28px/32px var(--sans); font-stretch: 108%; }
[data-entwurf="c"] .kontakt-raster .karte-breit, [data-entwurf="c"] .seitenkopf + .abschnitt .karte-breit { background: var(--sand); }
[data-entwurf="c"] .hinweis { background: var(--sand); border-left-color: var(--akzent); }
[data-entwurf="c"] .marke-fehler { background: #8E2A2A; }
[data-entwurf="c"] .meldung { background: var(--tief); }

[data-entwurf="c"] .filter { background: var(--tief); }
[data-entwurf="c"] :is(.filter, .formular, .transkript-suche) :is(input, select, textarea) { background: var(--papier); color: var(--schwarz); border-color: var(--grau-hell); }
[data-entwurf="c"] .reihen a { background: transparent; color: var(--schwarz); }
[data-entwurf="c"] .reihen a:hover { color: var(--akzent-text); }
[data-entwurf="c"] .zeile-titel { font: 600 21px/26px var(--sans); font-stretch: 106%; }
[data-entwurf="c"] .zeile-titel a:hover { color: var(--akzent-text); }
[data-entwurf="c"] .angabe-stelle { color: var(--schwarz); }
[data-entwurf="c"] .knopf-hoeren { color: #1D2326; }
[data-entwurf="c"] .knopf-laden { color: var(--schwarz); }
[data-entwurf="c"] .zeitmarke { color: var(--akzent-text); }
[data-entwurf="c"] button.zeitmarke:hover { color: #1D2326; }
[data-entwurf="c"] .transkript { background: var(--tief); }
[data-entwurf="c"] .transkript summary h2 { display: inline-flex; }
[data-entwurf="c"] .transkript summary h2::after { display: none; }
[data-entwurf="c"] .transkript-text p.aktiv { color: #fff; }
[data-entwurf="c"] .leer { background: var(--sand); }
[data-entwurf="c"] .fuss, [data-entwurf="c"] .leiste, [data-entwurf="c"] .video { background: var(--tief); }
[data-entwurf="c"] .fuss { background: #48555B; border-top: 1px solid var(--linie); }
[data-entwurf="c"] .fuss h2::after { display: none; }
[data-entwurf="c"] .fuss h2 { display: block; }
[data-entwurf="c"] .knopf-still { color: #fff; }
[data-entwurf="c"] .feld-fehler :is(input, textarea) { border-color: var(--fehler); }