:root {
	color-scheme: only light;
}

* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

html {
	--WebsiteIcon: url('media/default-favicon.png');

	--DefaultFgColor: #000000;
	--DefaultBgColor: #E6E9EC;
	--DefaultBgImage: url(media/bg.png);
	--DefaultBorderRadius: 7px;

	--MenuFgColor: #333333;
	--MenuBgColor: #FFFFFFF0;
	--MenuBorderColor: #DDDDDD;
	--MenuShadowColor: #66666633;
	--MenuSelectFgColor: #333333;
	--MenuSelectBgColor: #88B0DC33;

	--HeaderFgColor: #FFFFFF;
	--HeaderBgColor: #E6E9EC;
	--HeaderImage: url('media/default-header-image.jpg');

	--ContentFgColor: #424242;
	--ContentBgColor: #FFFFFF;
	--ContentBgImageColor: #B2C5DA;
	--ContentBgImage: url('media/default-article-image.jpg');

	--HeadingFgColor: #212121;
	--MetaDataColor: #727272;
	--AccentColor: #88B0DC;
	--LinkFgColor: #6E91B7;
	--ButtonLinkFgColor: #FFFFFF;
	--SeparatorColor: #DDDDDD;
	--ImageBorderColor: #DDDDDD;
	--NavButtonFgColor: #FFFFFF;
	--NavButtonBgColor: #AFB7BF;
	--ActiveItemBgColor: #88B0DC33;

	--ImgOverlayFgColor: #EEEEEE;
	--ImgOverlayBgColor: #00000040;
	--ImgOverlayFgColorHover: #FFFFFF;
	--ImgOverlayBgColorHover: #00000060;

	--InputFgColor: #666666;
	--InputBgColor: #FFFFFF;
	--InputBorderColor: #999999;

	--ErrorFgColor: red;

	--QuoteFgColor: #333333;
	--QuoteBgColor: #F3F5F7;
	--QuoteFgColorPale: #AAB6C4;
	--QuoteBorderColor: #E6E9EC;

	--TableFgColor: #333333;
	--TableBgColor: #F3F5F7;
	--TableBgColorHead: #DFE2E5;

	--MarkFgColor: black;
	--MarkBgColor: yellow;

	--BibleQuoteBgImage: url('media/default-biblequote-bg.png');

	--MenuHeight: 3em; /* Default; genauer Wert wird durch JavaScript ermittelt und zugewiesen. */
	scroll-padding-top: var(--MenuHeight); /* damit Anchor-Sprungziele nicht hinter dem fixed Menü verschwinden */
}

/**** Fonts ****/

/* Download unter: https://icomoon.io/app/ */
/* Achtung: Bei Font-Update die Versionsnummer hinter ? erhöhen! */
@font-face {
	font-family: 'icomoon';
	src: url('fonts/icomoon.eot?v5');
	src: url('fonts/icomoon.eot?v5#iefix') format('embedded-opentype'),
	url('fonts/icomoon.ttf?v5') format('truetype'),
	url('fonts/icomoon.woff?v5') format('woff'),
	url('fonts/icomoon.svg?v5#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

/**** Seiten-Layout (grid) ****/

body {
	display: grid;

	/* Anordnung der Grid-Bereiche für kleine Displays: */
	grid-template-areas:
		"menu"
		"header"
		"main"
		"sidebar"
		"footer"
		"left-space"
		"right-space"
		"menu-left-space"
		"menu-right-space";
}

@media screen and (min-width: 800px) {
	body {
	/* Anordnung der Grid-Bereiche für große Displays: */
		grid-template-areas:
			"menu-left-space     menu                menu                menu-right-space"
			"header              header              header              header"
			"left-space          main                sidebar             right-space"
			"left-space          footer              footer              right-space";
	/* Breite der Grid-Bereiche für große Displays: */
		grid-template-columns:
			auto                 minmax(auto, 800px) 280px               auto;
	}
}

/* Zuordnung der Elemente zu den Grid-Bereichen: */
nav { grid-area: menu; }
.menu-left-space { grid-area: menu-left-space; }
.menu-right-space { grid-area: menu-right-space; }
header { grid-area: header; }
.left-space { grid-area: left-space; }
.right-space { grid-area: right-space; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }

/**** Seiten-Design ****/

body {
	margin: 0;
	color: var(--DefaultFgColor);
	background-color: var(--DefaultBgColor);
	background-image: var(--DefaultBgImage);
	font-family: sans-serif;
	font-size: 1em;
	line-height: 1.5em;
	hyphens: auto;
}

/* Menü */

nav,
.menu-left-space,
.menu-right-space {
	position: sticky;
	top: 0;
	color: var(--MenuFgColor);
	background-color: var(--MenuBgColor);
	_box-shadow: 0px 1px 1px var(--MenuShadowColor);
	border-bottom: 1px solid var(--MenuShadowColor); /* [2] */
	z-index: 99;
}

nav {
	color: var(--MenuFgColor);
	text-align: right;
	height: calc(0.8 * 4em + 1px); /* fixe Höhe, damit Seite beim Laden nicht "hüpft"; muss der Menühöhe [1] + dem unteren Rahmen [2] entsprechen */
}

nav.opened {
	text-align: left;
}

nav * {
	user-select: none;
}

nav div.menu,
nav div.menu-empty {
	text-transform: uppercase;
	font-size: 0.8em; /* [1] */
	line-height: 4em; /* [1] */
}

nav div.menu {
	visibility: hidden; /* Initialwert; wird nach Aufbau des Menüs zurückgesetzt */
}

nav div.menu-empty {
	display: none;
}

nav.opened div.menu-empty,
nav.closed div.menu-empty {
	display: inline-block;
}

nav div.logo {
	float: left;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	text-transform: uppercase;
	font-weight: 1000;
	padding-left: 15px;
}

nav div.logo a {
	text-decoration: none;
	color: var(--AccentColor);
}

nav div.logo a::after {
    content: "";
    background-image: var(--WebsiteIcon);
    background-size: 25px 25px;
    display: inline-block;
	width: 25px;
	height: 25px;
	vertical-align: middle;
	margin-left: 4px;
}

nav div.logo img {
	vertical-align: middle;
	width: 25px;
	height: 25px;
	margin-left: 4px;
}

nav div.menu {
	_background-color: var(--MenuBgColor);
	display: inline-block;
}

nav.opened div.menu {
	position: absolute;
	width: 100%;
	max-height: 100vh;
	overflow-y: auto;
	scrollbar-width: none;
	background-color: var(--MenuBgColor);
	border-bottom: 1px solid var(--MenuShadowColor);
}

nav.opened div.menu::-webkit-scrollbar {
	display: none;
}

nav.closed div.menu {
	display: none;
}

nav div.menu a {
	padding-left: 15px;
	padding-right: 15px;
	text-decoration: none;
	display: inline-block;
	color: inherit;
}

nav.opened div.menu a {
	display: block;
}

nav div.menu a:hover {
	color: var(--MenuSelectFgColor);
	background-color: var(--MenuSelectBgColor);
}

nav div.menu a[href]:hover {
	text-decoration: underline;
	text-decoration-thickness: 4px;
	text-underline-offset: 8px;
	text-decoration-color: var(--AccentColor);
}

nav div.menu a[href].active {
	text-decoration: underline;
	text-decoration-thickness: 4px;
	text-underline-offset: 8px;
	text-decoration-color: var(--AccentColor);
}

nav div.menu-open-button,
nav div.menu-close-button {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5em;
	padding: 15px;
	cursor: pointer;
	user-select: none;
	display: none;
}

nav.closed div.menu-open-button {
	display: inline-block;
}

nav.opened div.menu-close-button {
	display: inline-block;
}

nav div.menu div {
	display: none;
	position: fixed;
	margin-left: 15px;
	background-color: var(--MenuBgColor);
	outline: 1px solid var(--MenuBorderColor);
	text-align: left;
}

nav.closed div.menu div {
}

nav div.menu > div {
	margin-left: 0;
}

nav div.menu div a {
	display: block;
}

nav div.menu div.opened {
	display: inline-block;
}

nav div.menu div.closed {
	display: none;
}

nav.opened div.menu div.opened {
	position: relative;
	display: block;
	margin-left: 15px;
	background-color: transparent;
	outline: none;
}

nav.opened div.menu div a {
	display: list-item;
	list-style-type: "\276F  ";
	margin-left: 10px;
	padding-left: 10px;
}

/* Header */

header {
	color: var(--HeaderFgColor);
	background-image: var(--HeaderImage);
	background-color: var(--HeaderBgColor);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	/*overflow-wrap: anywhere;*/
	user-select: none;
}

header p:nth-child(1) {
	text-align: center;
	font-size: clamp(14pt, 6vw, 42pt);
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin-top: 1em;
	margin-bottom: 0.5em;
	text-shadow: rgba(255,255,255,.1) -1px -1px 1px, rgba(0,0,0,.5) 1px 1px 1px, rgba(0,0,0,1) 0 0 2em;
}

header p:nth-child(2) {
	text-align: center;
	font-size: clamp(0.8em, 2vw, 1em);
	font-weight: 400;
	padding: 0.2em 0em;
	letter-spacing: 0.315em;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	text-shadow: rgba(255,255,255,.1) -1px -1px 1px, rgba(0,0,0,.5) 1px 1px 1px, rgba(0,0,0,1) 0 0 2em;
}

/* Hauptinhalt */

main,
.sidebar,
footer {
	padding-left: 15px;
	padding-right: 15px;
}

main {
	padding-top: 30px;
	container-type: inline-size;
}

main h1.filter {
	font-size: 1.2em;
	color: var(--HeadingFgColor);
	font-weight: normal;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.5;
	margin-top: 0;
	margin-bottom: 0.5em;
}

footer {
	font-size: 0.8em;
	text-align: center;
	margin-bottom: 2em;
}

article {
	margin-bottom: 30px;
	border-radius: var(--DefaultBorderRadius);
}

article .article-header {
}

article.image .article-header {
	width: 100%;
	max-height: 200px;
	aspect-ratio: 1/1;
	background-color: var(--ContentBgImageColor);
	background-image: var(--ContentBgImage);
	background-position: center center;
	background-size: cover;
	border-radius: var(--DefaultBorderRadius) var(--DefaultBorderRadius) 0 0;
}

article div.article-content {
	position: relative;
	color: var(--ContentFgColor);
	background-color: var(--ContentBgColor);
	border-radius: var(--DefaultBorderRadius);
	padding: 1px 20px;
	text-align: justify;
	font-size: 0.9em;
}

article.image .article-content {
	border-radius: 0 0 var(--DefaultBorderRadius) var(--DefaultBorderRadius);
}

article.pinned div.article-content::before {
	font-family: 'icomoon';
	content: "\E946";
	color: var(--AccentColor);
	font-size: 1.2em;
	position: absolute;
	top: 8px;
	right: 12px;
	transform: rotate(-20deg);
	_left: 10px;
	_transform: rotate(-90deg);
}

/* Artikel-Überschriften */

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
	color: var(--HeadingFgColor);
	font-weight: normal;
	text-align: center;
	line-height: 1.5;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

h1 { font-size: 1.6em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.33em; }
h4 { font-size: 1.16em; }
h5 { font-size: 1em; }
h6 { font-size: 0.82em; }

article h1 {
	margin-top: 0.5em;
	letter-spacing: 2px;
	text-transform: uppercase;
	hyphens: none;
	word-break: break-word;
}

article h6 {
	color: var(--MetaDataColor);
	letter-spacing: 2px;
	margin-top: 0;
}

article h6::after {
	background: var(--AccentColor);
	content: "";
	height: 2px;
	display: block;
	width: 50px;
	margin: 20px auto;
}

/* Aufzählungslisten */

article ul,
article ol,
article li {
	margin-top: 0.75em;
	margin-bottom: 0.75em;
}
article ul {
	padding-left: 1.5em;
}
article ul li {
	list-style-type: "●  ";
	_padding-left: 0.25em;
}
article ul li li {
	_list-style-type: "⮞  "; /* auf Android nicht sichtbar */
	_list-style-type: "➤  ";
	list-style-type: "►  ";
}

article ol li { 
	display: block;
}
article ol {
	padding-left: 1.1em;
	text-indent: -1.1em;
}
article ol li ol {
	padding-left: 2.1em;
	text-indent: -1.9em;
}
article ol li ol li ol {
	padding-left: 2.1em;
	text-indent: -1.9em;
}

article *:not(li) > ol { counter-set: level1 level2 level3 level4 level5 level6; }
article *:not(li) > ol ol { counter-set: level2 level3 level4 level5 level6; }
article *:not(li) > ol ol ol { counter-set: level3 level4 level5 level6; }
article *:not(li) > ol ol ol ol { counter-set: level4 level5 level6; }
article *:not(li) > ol ol ol ol ol { counter-set: level5 level6; }
article *:not(li) > ol ol ol ol ol ol { counter-set: level6; }
article ol > li::before { counter-increment: level1; content: counter(level1) ".\2009"; }
article ol ol > li::before { counter-increment: level2; content: counter(level1) "." counter(level2) ".\2009"; }
article ol ol ol > li::before { counter-increment: level3; content: counter(level1) "." counter(level2) "." counter(level3) ".\2009"; }
article ol ol ol ol > li::before { counter-increment: level4; content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) ".\2009"; }
article ol ol ol ol ol > li::before { counter-increment: level5; content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) "." counter(level5) ".\2009"; }
article ol ol ol ol ol ol > li::before { counter-increment: level6; content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) "." counter(level5) "." counter(level6) ".\2009"; }


/* Fußnoten */

article ul.footnote,
article ol.footnote {
	padding-left: 1.2em;
}

.footnote::before {
	background: var(--SeparatorColor);
	content: "";
	height: 1px;
	display: block;
	width: 100px;
	margin: 20px 0;
}

ul.footnote::before,
ol.footnote::before {
	margin-left: -1.2em;
}

ul.footnote > :not(li),
ol.footnote > :not(li) {
	margin-left: -1.2em;
}

article ul.footnote li {
	list-style-type: "*) ";
}

/* Widgets */

div.widget {
	color: var(--ContentFgColor);
	background-color: var(--ContentBgColor);
	border-radius: var(--DefaultBorderRadius);
	padding: 16px 20px 20px 20px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	max-width: 400px;
	font-size: 0.72em;
}

div.widget > :first-child {
	margin-top: 0;
}

div.widget > :last-child {
	margin-bottom: 0;
}

div.widget h1 {
	color: var(--HeadingFgColor);
	font-weight: normal;
	text-transform: uppercase;
	position: relative;
	margin-bottom: 2em;
	hyphens: none;
}

div.widget h1::after {
	position: absolute;
	width: 50px;
	display: block;
	height: 4px;
	bottom: -15px;
	background-color: var(--AccentColor);
	content: "";
}

div.widget p,
div.widget li {
	font-size: 1.25em;
}

div.widget ul {
	list-style: none;
	padding-left: 0;
}

div.widget li {
	border-bottom: 1px solid var(--SeparatorColor);
	padding: 0.5em 0;
}

div.widget li:first-child {
	padding-top: 0;
}

div.widget li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

div.widget a {
	text-decoration: none;
}

/* Schlagwortwolke-Widget */

div.widget p.tag-cloud {
	text-align: center;
}

div.widget p.tag-cloud a {
	display: inline-block;
}

div.widget p.tag-cloud a:not(:first-child) {
	margin-left: 5px;
	hyphens: none;
}

/* Archiv-Widget */

div.widget details {
	border-bottom: 1px solid var(--SeparatorColor);
}
div.widget details:first-of-type {
	margin-top: -1em;
}
div.widget details:last-of-type{
	border-bottom: none;
	margin-bottom: -1em;
}
div.widget details div span {
	display: inline-block;
}
div.widget .item {
	display: inline-block;
	width: calc(200px / 4 - 16px);
	font-size: 1.25em;
	margin: 0.625em 0 0.625em 16px;
}
div.widget details div a {
	font-weight: bold;
}
div.widget details summary {
	padding: 0.625em 0;
	font-size: 1.25em;
}
div.widget details summary .summary {
	color: var(--LinkFgColor);
}
div.widget details summary .summary:hover {
	color: var(--AccentColor);
}
div.widget details summary::marker {
	color: var(--LinkFgColor);
}

/* Kategorien und Tags unterhalb des Artikels */

div.article-links {
	border-top: 1px solid var(--SeparatorColor);
	margin-top: 1em;
}

p.cats::before {
	font-family: 'icomoon';
	content: "\E930";
	color: var(--AccentColor);
}

p.tags::before {
	font-family: 'icomoon';
	content: "\E936";
	color: var(--AccentColor);
	position: relative;
	top: 0.15em;
	left: -0.3em;
	margin-right: -0.3em;
}

p.cats a:not(:first-child)::before,
p.tags a:not(:first-child)::before {
	content: ', ';
}

p.cats a,
p.tags a {
	text-decoration: none;
}

p.cats a:not(:hover),
p.tags a:not(:hover) {
	color: inherit;
}

/* Links */

a:link,
a:visited {
	color: var(--LinkFgColor);
}
a:active,
a:hover {
	color: var(--AccentColor);
}
article a {
	word-break: break-word;
}
article h1 a {
	text-decoration: none;
}
article h1 a:not(:hover) {
	color: inherit;
}

main article.hover:hover {
	outline: 1px solid var(--DefaultBgColor);
	box-shadow: 0 0 10px 7px var(--ContentBgColor);
}

a.button-link,
span.button-link {
	background-color: var(--LinkFgColor);
	color: var(--ButtonLinkFgColor);
	text-decoration: none;
	line-height: 1em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;

	border-radius: 9999px;
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
	font-size: 1.125em;

	cursor: pointer;
	display: inline-block;
}

a.button-link:hover,
span.button-link:hover {
	background-color: var(--AccentColor);
}

mark {
	background-color: var(--MarkBgColor);
	padding: 0.2em;
	margin: -0.2em;
}

pre,
code {
	font-size: 1.2em;
	line-height: 1.2em;
	white-space: pre-wrap;
	_line-break: anywhere; /* Zeilen werden an jeder beliebigen Stelle umgebrochen */
	word-wrap: break-word; /* Zeilen werden an jedem Wortanfang umgebrochen */
	_word-break: break-all; /* Zeilen werden mitten im Wort, aber erst nach anhängende Whitespaces umgebrochen */
	hyphens: none;
	tab-size: 2;
	text-align: left;
}
pre.smaller,
code.smaller {
	font-size: 0.9em;
	line-height: 1.5em;
}

sub, sup {
	line-height: 0;
}

.toc li {
	text-align: left;
}
.toc:not(.normal) > ol > li > a {
	font-weight: bold;
}
.toc > ol > li > ol > li > ol > li > a {
	font-style: italic;
}

details summary {
	user-select: none;
	cursor: pointer;
	text-align: left;
}

article details summary {
	display: flex;
	justify-content: space-between;
	&::marker {
		content: "";
	}
	&::after {
		content: "+";
		font-size: 2em;
	}
	[open] &::after {
		content: "−";
		font-size: 2em;
	}
}

.nowrap {
	display: inline-block;
}
.info {
}
.error {
	color: var(--ErrorFgColor);
}
.warning {
}
.center {
	text-align: center;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}
.upper {
	text-transform: uppercase;
}
.bigger {
	font-size: 110%;
}
.hidden {
	display: none;
}
.mirror {
	display: inline-block;
	-moz-transform: scale(-1, 1);
	-webkit-transform: scale(-1, 1);
	-o-transform: scale(-1, 1);
	-ms-transform: scale(-1, 1);
	transform: scale(-1, 1);
}
.outline {
	text-shadow: 0px 1px black, 0px -1px black, 1px 0px black, -1px 0px black, 0.7px -0.7px black, -0.7px -0.7px black, 0.7px 0.7px black, -0.7px 0.7px black;
}

.tooltip {
	color: var(--LinkFgColor);
	text-decoration: underline dotted;
	cursor: help;
}

figure.thinframe img,
div.thinframe img {
	border: 1px solid var(--ImageBorderColor);
}
iframe.thinframe {
	border: 1px solid var(--ImageBorderColor);
	border-radius: var(--DefaultBorderRadius);
}

/* Zitate */
blockquote {
	background-color: var(--QuoteBgColor);
	background-image: url('media/quotemarks-on.png'), url('media/quotemarks-off.png');
	background-position: left 16px top 16px, right 16px bottom 16px;
	background-repeat: no-repeat, no-repeat;
	padding: 5px 2em 5px 1.5em;
	color: var(--QuoteFgColor);
	margin: 1em 0;
	font-size: 1em;
	border-left: 10px solid var(--QuoteBorderColor);
	border-radius: var(--DefaultBorderRadius);
}

blockquote cite {
	display: inline-block;
	font-size: 0.8em;
	font-style: normal;
	line-height: 1.7em;
	margin-bottom: 1em;
}

blockquote span.pale { /* blasse Schrift z.B. für Versnummern innerhalb eines Bibeltextes */
	color: var(--QuoteFgColorPale);
}

p.article-source { /* Artikel-URL am Ende für Druck */
}

/* Bibelzitate */
blockquote.biblequote,
blockquote.bibelzitat {
	background-color: transparent;
	background-image: var(--BibleQuoteBgImage);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
	padding: 50px 14% 1em 13%;
	text-align: center;
	margin: 1em auto;
	border: 0;
}

blockquote.biblequote cite,
blockquote.bibelzitat cite {
}

.textbox {
	background-color: var(--QuoteBgColor);
	color: var(--QuoteFgColor);
	padding: 0.5em 1em;
	border-radius: var(--DefaultBorderRadius);
	margin-top: 1em;
	margin-bottom: 1em;
}

/* Bilder und IFrames */

iframe {
	border: none;
}

article figure {
	display: table;
	margin: 10px auto;
}

article figure figcaption {
	display: table-caption;
	caption-side: bottom;
	text-align: center;
	font-size: 0.9em;
	line-height: 1.5em;
	margin-top: 0.5em;
}

article img:not(.nostyle),
div.widget img,
div.widget iframe {
	vertical-align: bottom;
	max-width: 100%;
	border-radius: var(--DefaultBorderRadius);
}

img.noradius {
	border-radius: 0 !important;
}

article figure:has(iframe) {
	width: 100%;
}

article iframe {
	display: block;
	width: 100%;
	border-radius: var(--DefaultBorderRadius);
}

article iframe[src^="https://www.google.com/maps"] {
	aspect-ratio: 1/1;
	height: 100%;
}

article iframe[src^="https://www.youtube.com"][width="640"][height="360"] {
	aspect-ratio: 640/360;
	height: 100%;
}

article iframe[src^="https://www.youtube.com"][width="640"][height="480"] {
	aspect-ratio: 640/480;
	height: 100%;
}

article iframe[src^="https://www.youtube.com"][width="560"][height="315"] {
	aspect-ratio: 560/315;
	height: 100%;
}

article figure:has(audio) {
	width: 100%;
	text-align: center;
}

article audio {
	width: 400px;
	min-width: 200px;
	max-width: 100%;
	vertical-align: middle;
	border-radius: 20px; /* für Firefox */
	height: 40px; /* für Chrome */
}

article figure:has(video) {
	width: 100%;
	text-align: center;
}

article video {
	width: 100%;
	border-radius: var(--DefaultBorderRadius);
}

/* Audioclip für Playlist */

article figure.playlist {
	line-height: 1.2em;
	border: 2px solid var(--ImageBorderColor);
	border-radius: var(--DefaultBorderRadius);
	padding: 0 1em;
}
article figure.playlist:hover {
	/*background-color: var(--DefaultBgColor);*/
}
article figure.playlist:has(audio.playing) {
	border-color: var(--AccentColor);
	background-color: var(--ActiveItemBgColor);
}
article figure.playlist audio {
	width: 100%;
}

/* Tabellen */

article table:not(.nostyle) {
	border-collapse: separate;
	border-spacing: 4px;
	border-radius: var(--DefaultBorderRadius);
	margin: -4px;
}

article table:not(.nostyle) th,
article table:not(.nostyle) td {
	padding: 0.5em 0.75em;
	vertical-align: top;
	color: var(--TableFgColor);
}

article table:not(.nostyle) th {
	background-color: var(--TableBgColorHead);
	hyphens: none;
}

article table:not(.nostyle) td {
	background-color: var(--TableBgColor);
}

article table:not(.nostyle) tr:first-child th:first-child	/*,
article table tr:first-child td:first-child	*/ {
	border-top-left-radius: var(--DefaultBorderRadius);
}

article table:not(.nostyle) tr:first-child th:last-child	/*,
article table:not(.nostyle) tr:first-child td:last-child	*/ {
	border-top-right-radius: var(--DefaultBorderRadius);
}

/*	article table:not(.nostyle) tr:last-child th:first-child,	*/
article table:not(.nostyle) tr:last-child td:first-child {
	border-bottom-left-radius: var(--DefaultBorderRadius);
}

/*	article table:not(.nostyle) tr:last-child th:last-child,	*/
article table:not(.nostyle) tr:last-child td:last-child {
	border-bottom-right-radius: var(--DefaultBorderRadius);
}

/* Überbreite Tabellen horizontal scrollen (diese dazu in ein div mit der folgenden Klasse stecken) */
div.table-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 4px;
}
div.table-scroll > table {
	margin-left: auto;
	margin-right: auto;
}

/* Bilder-Karussell (ImageCarousel) */
div.image-carousel {
	display: flex;
	overflow-x: auto;
	gap: 20px;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
div.image-carousel::-webkit-scrollbar {
	display: none;
}
div.image-carousel.top {
	align-items: start;
}
div.image-carousel.middle {
	align-items: center;
}
div.image-carousel.bottom {
	align-items: end;
}
div.image-carousel > * {
	flex-shrink: 0;
	flex-basis: 100%;
	scroll-snap-align: center;
}
div.image-carousel figure {
	margin-top: 0;
	margin-bottom: 10px;
}
div.image-carousel + div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1em;
}
div.image-carousel + div button {
	margin: 0;
	width: 50px;
	height: 50px;
	padding: 0;
	border: none;
	border-radius: 50%;
	font-family: icomoon;
	font-size: 1.5em;
	color: var(--NavButtonFgColor);
	background-color: var(--NavButtonBgColor);
	opacity: 0.7;
}
div.image-carousel + div button:hover {
	opacity: 1.0;
}

/* Bildbetrachter (ImageViewer) */
html.noscroll {
	height: 100%;
	overflow: hidden;
}
div.view {
	position: fixed;
	top: 0px;
	bottom: 0px;
	width: 100%;
	height: 100vh;
	background-color: #000000E0;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;

	img {
		max-width: 100%;
		max-height: 100%;
		position: relative;
		user-select: none;
	}
	img.fit {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	div.caption {
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 5px 10px;
		width: 100%;
		background-color: #00000080;
		color: #CCCCCC;
		text-align: center;
		user-select: none;
		transition: opacity 0.5s;
		a {
			color: #C8A500;
		}
		a:hover {
			color: #FFD100;
		}
	}
	button {
		margin: 0;
		width: 50px;
		height: 50px;
		padding: 0;
		border: none;
		border-radius: 50%;
		font-family: icomoon;
		font-size: 1.5em;
		background-color: #00000080;
		color: #CCCCCC;
		user-select: none;
		transition: opacity 0.5s;
	}
	@media (hover: hover) { button:hover {
		color: #FFFFFF;
		opacity: 1.0 !important;
	}}
	button.prev {
		position: absolute;
		left: 10px;
		top: 50%;
		transform: translateY(-50%);
	}
	button.next {
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
	}
	button.close {
		position: absolute;
		right: 10px;
		top: 10px;
	}
	button.newtab {
		position: absolute;
		left: 10px;
		top: 10px;
		cursor: pointer;
	}
	button.fitimg {
		position: absolute;
		left: 70px;
		top: 10px;
	}
	button.fullscreen {
		position: absolute;
		left: 130px;
		top: 10px;
	}
}
div.view.open {
	display: flex;
}
div.viewer-img-container {
	display: inline-block;
	vertical-align: top; /* damit der durch "inline-block" entstandene Abstand unter dem DIV wieder verschwindet */
	position: relative;
}
@media not print {
div.viewer-img-container::after {
	position: absolute;
	bottom: 10px;
	right: 10px;
	content: "+";
	font-family: sans-serif;
	font-weight: bold;
	font-size: 22px;
	width: 24px;
	height: 24px;
	line-height: 24px;
	border-radius: 50%;
	margin: 0;
	text-align: center;
	user-select: none;
	background-color: var(--ImgOverlayBgColor);
	color: var(--ImgOverlayFgColor);
}
div.viewer-img-container:hover::after {
	background-color: var(--ImgOverlayBgColorHover);
	color: var(--ImgOverlayFgColorHover);
}}

/* Bildraster (ImageGrid) */
div.image-grid {
	--Size: 200px; /* Diese Variablen können in einer style-Angabe zum DIV übersteuert werden. */
	--Gap: 10px;
	--Radius: 7px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--Size)), 1fr));
	grid-auto-rows: 1fr;
	grid-auto-flow: dense;
	gap: var(--Gap);
	text-align: center;

	img {
		width: 100%;
		aspect-ratio: 1/1;
		border-radius: var(--Radius);
		object-fit: contain;
		margin: 0;
		padding: 0;
		display: block;
		background-color: var(--QuoteBgColor);
	}
	figure {
		width: 100%;
		height: 100%;
		margin: 0;
		figcaption {
			display: none;
		}
	}
}
div.image-grid.cover img {
	object-fit: cover;
	height: 100%;
}

/* Cards für interne Artikel und externe Websites */
div.websites {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 -10px;
}
div.website {
	flex: 50%;
	padding: 0 10px 20px 10px;
}
@container (max-width: 700px) {
	div.website {
		flex: 100%;
	}
}
div.website a {
	text-decoration: none;
}
div.website img {
	width: 100%;
	border-radius: 20px 20px 0 0;
	display: block;
}
div.website div {
	border-radius: 0 0 20px 20px;
	background-color: var(--QuoteBgColor);
	padding: 20px;
}
p.website-title {
	margin: 0;
	color: var(--HeadingFgColor);
	font-size: 1.2em;
	font-weight: bold;
	text-align: left;
}
p.website-date {
	margin: 0.5em 0 0 0;
	color: var(--QuoteFgColor);
	font-size: 0.8em;
	letter-spacing: 0.1em;
}
p.website-description {
	margin: 0.5em 0 0 0;
	color: var(--QuoteFgColor);
}

/* Tageslosungs-Widget */
.losung-datum {
}
.losung-zitat {
	margin-bottom: 0;
	font-style: italic;
}
.losung-vers {
	margin-top: 0;
	text-align: right;
	white-space: nowrap;
}
.losung-einleitung {
	font-style: normal;
}
.losung-betont {
	font-weight: bold;
}
.losung-copy {
	font-size: 0.9em !important;
	line-height: 1.7em;
	text-align: center;
}
.losung-link {
	text-align: center;
}

/* Formularelemente allgemein */
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	font-family: sans-serif;
	font-size: 1em;
	padding: 10px 20px;
	margin: 10px;
}
textarea,
input[type="text"],
input[type="password"],
input[type="number"],
select {
	font-family: sans-serif;
	font-size: 1em;
	line-height: 1.5em;
	color: var(--InputFgColor);
	background-color: var(--InputBgColor);
	border: 1px solid var(--InputBorderColor);
	outline: none;
	padding: 8px 10px;
	border-radius: 0;
}
select {
	padding: 8px 6px;
}
::placeholder {
	color: var(--InputFgColor);
	opacity: 0.75;
}

/* Kontaktformular */
form.contact textarea {
	width: 100%;
	resize: vertical;
}

form.contact #input-name,
form.contact #input-email,
form.contact #input-subject {
	width: 100%;
}

/* Suchformular */
form.search {
	display: flex;
}
form.search > * {
}
form.search input[type="text"] {
	font-size: 1.25em;
	padding: 10px;
	margin: 0 10px 0 0;
	width: 100%;
}
form.search input[type="submit"] {
	font-family: 'icomoon';
	font-size: 1.5em;
	padding: 10px;
	margin: 0;
}

/* Gästebuch */

.signature {
	font-family: Segoe Script, Segoe Print, MV Boli, Ink Free, Comic Sans, Comic Sans MS, Brush Script MT, cursive;
	font-size: 1.9em;
	color: var(--AccentColor);
}

/* Google-Translate-Widget */

#google_translate_element select {
	font-size: 1.25em;
	color: var(--InputFgColor);
	background-color: var(--InputBgColor);
	border: 1px solid var(--InputBorderColor);
	padding: 10px;
	width: 100%;
	outline: none;
	border-radius: 0;
}

/* Mehrspaltige Layouts */
div.columns {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
div.columns.top {
	align-items: start;
}
div.columns.middle {
	align-items: center;
}
div.columns.bottom {
	align-items: end;
}
div.columns > * {
	/* Alle Flex-Items sollen dieselbe Breite haben! */
	flex-basis: 0;
	flex-grow: 1;
}
div.columns > * {
	margin-left: auto;
	margin-right: auto;
}
@container (min-width: 600px) {
	div.columns {
		flex-direction: row;
	}
	div.columns > *:not(:last-child) {
		padding-right: 20px;
	}
}

/* Galerie: Alle Bilder innerhalb eines DIVs mit dieser Klasse werden zentriert nebeneinander dargestellt.
Unterschiede zur Klasse "colums": Wenn <div class="gallery"> statt <div class="columns"> verwendet wird,
dann werden soviele Bilder nebeneinander angezeigt, wie Platz vorhanden ist. Allerdings werden die Bilder
dann nicht gleichmäßig über die gesamte Breiter verteilt, sondern haben immer denselben Abstand zueinander.
Zudem werden die Bilder nicht bei Bedarf verkleinert dargestellt, um sie nebeneinander anzuzeigen. */

div.gallery {
	text-align: center;
	margin: -10px;
}
div.gallery > * {
	display: inline-block;
	margin: 10px !important;
}
div.gallery figure {
	margin: 0;
}
div.gallery.top > * {
	vertical-align: top;
}
div.gallery.middle > * {
	vertical-align: middle;
}
div.gallery.bottom > * {
	vertical-align: bottom;
}

/* Alle obigen Angaben gelten für schmale Displays ("mobile first"). */
/* Ab hier kommen Angaben für breitere Displays: */

@media screen and (min-width: 800px) {
	.sidebar {
		padding-top: 30px;
	}
}

@container (min-width: 400px) and (max-width: 600px) {
	article div.article-content {
		padding: 10px 40px;
	}

	p.biblequote,
	p.bibelzitat,
	blockquote.biblequote,
	blockquote.bibelzitat {
		width: calc(100% - 2em);
	}
}

@container (min-width: 600px) {
	article div.article-content {
		font-size: 1em;
		line-height: 1.7em;
		padding: 20px 60px;
	}

	article h1 { font-size: 2em; }
	article h2 { font-size: 1.7em; }
	article h3 { font-size: 1.4em; }
	article h4 { font-size: 1.2em; }
	article h5 { font-size: 1em; }
	article h6 { font-size: 0.83em; }

	article figure {
		margin: 20px auto;
	}

	p.biblequote,
	p.bibelzitat,
	blockquote.biblequote,
	blockquote.bibelzitat {
		width: calc(100% - 4em);
	}
}

/* Styles für den Ausdruck */
@media print {
	:root {
		color-scheme: only light !important;
	}
	body {
		display: initial;
		color: initial;
		background-color: initial;
		background-image: none;
	}

	body * {
		color: initial !important;
	}

	body,
	main,
	main article,
	main article div.article-content {
		margin: 0;
		padding: 0;
		background-color: initial;
	}

	main article div.article-content blockquote,
	main article div.article-content pre,
	main article div.article-content .textbox {
		background-image: none;
		background-color: #E0E0E0;
		border-left-color: #808080;
	}

	main article div.article-content .biblequote {
		break-inside: avoid;
	}

	main article div.article-content figure {
		break-inside: avoid;
	}

	blockquote.biblequote,
	blockquote.bibelzitat {
		width: calc(100% - 8em);
		padding: 5px 2em 5px 2em;
		border-radius: 20px;
		hyphens: none;
	}

	main article div.article-content * {
		background-color: initial;
	}

	main article div.article-content table {
		border-collapse: collapse;
	}

	main article div.article-content table tr {
		break-inside: avoid;
	}

	main article div.article-content table td,
	main article div.article-content table th {
		border-width: 1px;
		border-style: solid;
	}

	main article div.article-content img {
		max-height: 40vh;
	}
	main article div.article-content img[x-print-small] {
		max-height: 25vh;
	}

/*
	main article div.article-content a {
		text-decoration: none;
	}

	main article div.article-content a[href^="http"]:not([href*="bibleserver.com"])::after {
		content: " " attr(href);
		line-break: anywhere;
		font-weight: normal;
		font-style: italic;
		size: 80%;
		word-break: break-all;
		border: 1px dotted black;
	}
*/
	main article div.article-content a {
		text-decoration: underline dotted;
		text-underline-offset: 0.33em;
	}

	.tooltip {
		text-underline-offset: 0.33em;
	}

	main article div.article-content a[x-print="true"]::after {
		content: " ► " attr(href);
		line-break: anywhere;
		font-weight: normal;
		_font-style: italic;
		_size: 80%;
		word-break: break-all;
		_border: 1px dotted black;
	}

	h1, h2, h3, h4, h5 {
		break-after: avoid;
	}

	.print-normal {
		break-after: auto;
	}

	p {
		orphans: 2;
		widows: 2;
	}

	/* Störende Elemente ausblenden: */
	nav { display: none; }
	.menu-left-space { display: none; }
	.menu-right-space { display: none; }
	header { display: none; }
	.left-space { display: none; }
	.right-space { display: none; }
	.sidebar { display: none; }
	footer { display: none; }
	main article div.article-header { display: none; }

	/* manueller Seitenumbruch */
	.nextpage {
		break-before: page;
		margin-top: 0;
	}

	/* Elemente manuell ausblenden */
	.noprint {
		display: none !important;
	}
	.print {
		display: block !important;
	}
}
.print {
	display: none;
}
