: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('');
	--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');

	--FooterFgColor: #CCCCCC;
	--FooterBgColor: #333333;
	--FooterLinkFgColor: #FFFFFF;
	--FooterActiveLinkFgColor: #FFFFFF;

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

	--HeadingFgColor: #212121;
	--MetaDataColor: #727272;
	--AccentColor: #88B0DC;
	--LinkFgColor: #6E91B7;
	--SeparatorColor: #DDDDDD;
	--ImageBorderColor: #DDDDDD;
	--ButtonFgColor: #FFFFFF;
	--ButtonBgColor: #6E91B7;
	--ButtonBgColorHover: #88B0DC;
	--NavButtonFgColor: #FFFFFF;
	--NavButtonBgColor: #AAB6C4C0;
	--NavButtonBgColorHover: #AAB6C4;
	--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;

	--PopupFgColor: #333333;
	--PopupBgColor: #F3F5F7;
	--PopupBorderColor: #999999;

	--TableFgColor: #333333;
	--TableBgColor: #6F7B8714;
	--TableBgColorHead: #6F7B8738;

	--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"
		"footer-left-space"
		"footer-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"
			"footer-left-space   footer              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; }
.footer-left-space { grid-area: footer-left-space; }
.footer-right-space { grid-area: footer-right-space; }

/**** 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);
	z-index: 99;
}

nav {
	color: var(--MenuFgColor);
	text-align: right;
	border-bottom: 1px solid var(--MenuShadowColor); /* [2] */
	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.menu {
	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,
nav div.menu button.link {
	padding-left: 15px;
	padding-right: 15px;
	text-decoration: none;
	display: inline-block;
	color: inherit;
}

nav div.menu button.link {
	width: 100%;
	display: block;
}

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

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

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

nav div.menu a[href]:not(.active):hover,
nav div.menu button.link:not(.active):hover {
	text-decoration-color: color-mix(in srgb, var(--AccentColor), transparent 50%);
}

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,
nav.opened div.menu div button.link {
	padding-left: 10px;
	position: relative;
	left: 10px;
}
nav.opened div.menu div a::before,
nav.opened div.menu div button.link::before {
	content: "\276F";
	position: absolute;
	left: -10px;
	display: inline-block;
	text-decoration-line: none;
}

/* 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,
.footer-left-space,
.footer-right-space {
	color: var(--FooterFgColor);
	background-color: var(--FooterBgColor);
}

footer a {
	text-decoration: none;
}
footer a:link,
footer a:visited {
	color: var(--FooterLinkFgColor);
}
footer a:active,
footer a:hover {
	color: var(--FooterActiveLinkFgColor);
}
footer button.link {
	text-decoration: none;
	color: var(--FooterLinkFgColor);
}
footer button.link:hover {
	color: var(--FooterActiveLinkFgColor);
}

footer .infotext {
	font-size: 0.8em;
	text-align: center;
}

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: 1.0em; /*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);*/
}

/* Überschriften allgemein */

h1, h2, h3, h4, h5, h6 {
	color: var(--HeadingFgColor);
	font-weight: normal;
	text-align: center;
}

/* Artikel-Überschriften */

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
	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 h5 {
	letter-spacing: 1px;
}

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 {
	/*padding-left: 0.25em;*/
}
article ul li li {
	/*list-style-type: "⮞  ";*/ /* auf Android nicht sichtbar */
	/*list-style-type: "➤  ";*/
	/*list-style-type: "►  ";*/
	list-style-type: ">  ";
}
article ul li li::marker {
	font-weight: bold;
}

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; /* [3] */
}

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

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

div.widget h1 {
	text-align: left;
	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;
}

div.widget > a {
	color: var(--ContentFgColor);
}

/* 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);
}

/* Card-Widget */

div.widget:has(> div.widget-card) {
	padding: 0;
	> h1 { display: none; }
}
div.widget-card {
	img {
		border-bottom-left-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}
	div {
		padding: 0 20px 20px 20px;
		color: var(--ContentFgColor);
		p:last-child {
			margin-bottom: 0;
		}
	}
}

/* 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);
}

/* Link-Icons */

@media not print {
	article a:not(.normal)[href^="http"]::after,
	article a:not(.normal)[href^="http"] span.button-link::after,
	div#popup a:not(.normal)[href^="http"]::after {
		content: "➜";
		transform: rotate(-45deg);
		display: inline-block;
		text-decoration-line: none;
	}
	article a:not(.normal):not(.toc *)[href^="#"]::after,
	div#popup a:not(.normal):not(.toc *)[href^="#"]::after {
		content: "➜";
		transform: rotate(90deg);
		display: inline-block;
		text-decoration-line: none;
	}
	a.above::after {
		transform: rotate(-90deg) !important;
	}
	article .website a[href^="http"]::after,
	article a:has(> img)[href^="http"]::after {
		content: none !important;
	}
}

/* Diverse Textauszeichnungen */

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;
	}
}

div.p {
	margin: 1em 0px;
}
.stick {
	white-space: nowrap;
}
.nowrap {
	display: inline-block;
}
.info {
}
.error {
	color: var(--ErrorFgColor);
}
.warning {
}
.center {
	text-align: center;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}
.justify {
	text-align: justify;
}
.upper {
	text-transform: uppercase;
}
.bigger {
	font-size: 110%;
	line-height: 1.5em;
}
.smaller {
	font-size: 90%;
	line-height: 1.5em;
}
.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;
}

.link {
	color: var(--LinkFgColor);
	text-decoration: underline;
	cursor: pointer;
}
.link:hover {
	color: var(--AccentColor);
}
button.link {
	display: inline;
    border: none;
	border-radius: 0;
    outline: none;
	color: var(--LinkFgColor);
    background: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	line-height: inherit;
	text-transform: inherit;
	text-align: inherit;
	cursor: pointer;
}
button.link:hover {
	color: var(--AccentColor);
    background: none;
}

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 */
	margin-top: 2em;
	border-top: 1px solid var(--SeparatorColor);
}

/* 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;
}

/* Link-Popups */

a.popup {
	color: var(--LinkFgColor);
	text-decoration: underline dashed;
	text-underline-offset: 0.33em;
	cursor: help;
}
a.popup:hover {
	color: var(--AccentColor);
}
div#popup-window {
	text-align: justify;
	border-radius: var(--DefaultBorderRadius);
	background-color: var(--PopupBgColor);
	border: 1px solid var(--PopupBorderColor);
	color: var(--PopupFgColor);
	position: absolute;
	z-index: 1;
	padding: 0.5em 1em;
	visibility: hidden;
	opacity: 0;
	scale: 0 0;
	transition: visibility 0.5s, opacity 0.5s, scale 0.5s;
}
div#popup-window.show {
	visibility: visible;
	opacity: 1;
	scale: 1 1;
	transition: visibility 0.25s, opacity 0.25s, scale 0.25s;
}
div#popup-window p,
div#popup-window h2,
div#popup-window h3,
div#popup-window h4 {
	margin: 0.5em 0;
}
div#popup-arrow {
	background-color: var(--PopupBgColor);
	position: absolute;
	z-index: 2;
	width: 28px;
	height: 28px;
	transform: rotate(45deg) translateX(-3px) translateY(16px);
	visibility: hidden;
	opacity: 0;
	transition: visibility 0.5s, opacity 0.5s;
}
div#popup-arrow.top {
	border-top: 1px solid var(--PopupBorderColor);
	border-left: 1px solid var(--PopupBorderColor);
	clip-path: polygon(10% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 10%);
}
div#popup-arrow.bottom {
	border-bottom: 1px solid var(--PopupBorderColor);
	border-right: 1px solid var(--PopupBorderColor);
	clip-path: polygon(0% 100%, 0% 90%, 90% 0%, 100% 0%, 100% 100%);
}
div#popup-arrow.show {
	visibility: visible;
	opacity: 1;
	transition: visibility 0.25s, opacity 0.25s;
}

/* Cookie-Dialog */

div#keksdialog {
	position: fixed;
	top: 0px;
	bottom: 0px;
	width: 100%;
	height: 100vh;
	background-color: #00000080;
	align-items: center;
	justify-content: center;
	text-align: justify;
	display: flex;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0.5s, opacity 0.5s;
	> div {
		position: relative;
		width: 600px;
		max-width: 100%;
		border-radius: var(--DefaultBorderRadius);
		background-color: var(--PopupBgColor);
		color: var(--PopupFgColor);
		padding: 0 1em;
	}
}
div#keksdialog.show {
	visibility: visible;
	opacity: 1;
	transition: visibility 0.25s, opacity 0.25s;
}

/* Bilder und IFrames */

iframe {
	border: none;
}

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

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

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;
}

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

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

@supports (x: attr(x type(*))) {
	iframe[src^="http"][width][height],
	iframe[data-src^="http"][width][height] {
		aspect-ratio: attr(width type(<number>))/attr(height type(<number>));
		height: 100%;
	}
}

@supports not (x: attr(x type(*))) {
	iframe[src^="http"]:not([width]),
	iframe[src^="http"]:not([height]),
	iframe[data-src^="http"]:not([width]),
	iframe[data-src^="http"]:not([height]) {
		aspect-ratio: 4/3;
		height: 100%;
	}
	iframe[src^="http"][width="560"][height="315"],
	iframe[data-src^="http"][width="560"][height="315"] {
		aspect-ratio: 560/315;
		height: 100%;
	}
	iframe[src^="http"][width="600"][height="450"],
	iframe[data-src^="http"][width="600"][height="450"] {
		aspect-ratio: 600/450;
		height: 100%;
	}
	iframe[src^="http"][width="640"][height="360"],
	iframe[data-src^="http"][width="640"][height="360"] {
		aspect-ratio: 640/360;
		height: 100%;
	}
	iframe[src^="http"][width="640"][height="480"],
	iframe[data-src^="http"][width="640"][height="480"] {
		aspect-ratio: 640/480;
		height: 100%;
	}
}

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

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

audio::-webkit-media-controls-panel {
	background-color: var(--QuoteBgColor);
}

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

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

/* Audioclip für Playlist */

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

/* Tabellen */

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

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

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

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

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

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

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

/*	table:not(.nostyle) tr:last-child th:last-child,	*/
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-radius: 50%;
	font-family: icomoon;
	font-size: 1.5em;
	color: var(--NavButtonFgColor);
	background-color: var(--NavButtonBgColor);
}
div.image-carousel + div button:hover {
	background-color: var(--NavButtonBgColorHover);
}

/* 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;
		border-radius: 0;
	}
	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 */

a.button-link,
span.button-link,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	font-family: sans-serif;
	font-size: 1.125em;
	line-height: 1.25em;
	background-color: var(--ButtonBgColor);
	color: var(--ButtonFgColor);
	text-decoration: none;	/* für a.button-link */
	display: inline-block; /* für .button-link */
	border: none; /* für button und input */
	border-radius: 9999px;
	padding: calc(0.5em + 2px) calc(1em + 2px);
	margin: 0.5em 0.2em;
	cursor: pointer;
}

a.button-link:hover,
span.button-link:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
	background-color: var(--ButtonBgColorHover);
}

textarea,
input[type="text"],
input[type="date"],
input[type="email"],
input[type="tel"],
input[type="url"],
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: calc(var(--DefaultBorderRadius) / 2);
}
textarea:focus,
input[type="text"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus {
	border-color: var(--MetaDataColor);
}
input[type="checkbox"],
input[type="radio"] {
	transform: scale(1.5);
}
input.error,
textarea.error,
select.error {
	border-color: var(--ErrorFgColor);
	color: var(--InputFgColor);
}
input[type="checkbox"].error,
input[type="radio"].error {
	box-shadow: 0 0 0 calc(1px / 1.5) var(--ErrorFgColor);
}
select {
	padding: 8px 6px;
}
::placeholder {
	color: var(--InputFgColor);
	opacity: 0.75;
}
fieldset {
/*	border-color: var(--MetaDataColor);*/
	border: 1px solid var(--MetaDataColor);
}

/* Suchformular */
form.search {
	display: flex;
}
form.search > * {
}
form.search input[type="text"] {
	font-size: calc(1em / 0.72); /* Ausgleich für kleinere Schriftgröße in Widgets [3] */
	margin: 0 10px 0 0;
	width: 100%;
}
form.search input[type="submit"] {
	font-family: 'icomoon';
	font-size: 1.5em;
	padding-left: 0.7em;
	padding-right: 0.7em;
	margin: 0;
	border-radius: calc(var(--DefaultBorderRadius) / 2);
}

/* Elemente (z.B. Bilder) für den Hell- oder Dunkel-Modus */
html:not(.dark) .light {
	display: none;
}
html.dark .dark {
	display: none;
}

/* 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) {
	.menu-left-space,
	.menu-right-space {
		border-bottom: 1px solid var(--MenuShadowColor); /* [2] */
	}
	.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; }

	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 figure:has(iframe) {
		max-width: 70%;
	}

/*
	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:not(.button-link) {
		text-decoration: underline dotted;
		text-underline-offset: 0.33em;
	}
	main article div.article-content a.button-link {
		font-size: 1em;
		border: 1px solid grey;
	}

	.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;
	}

	u {
		text-underline-offset: 0.33em;
	}

	/* 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; }
	.footer-left-space { display: none; }
	.footer-right-space { display: none; }
	main article div.article-header { display: none; }

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

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