@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Gelasio:ital,wght@0,400..700;1,400..700&family=Goudy+Bookletter+1911&family=Headland+One&family=Lora:ital,wght@0,400..700;1,400..700&family=Play:wght@400;700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap'); /* Sieht aus wie Futura. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

:root {
	--font-text-body: var(--font-source-sans-3), sans-serif;
	--font-text-sidebar: var(--font-roboto-slab), sans-serif;
	--font-headings-body: var(--font-crimson-pro), sans-serif;
	--font-headings-sidebar: var(--font-bebas-neue), sans-serif;
	--font-code: var(--font-jetbrains-mono), monospace;
	--font-bodywrapper-code: var(--font-code);
	--font-mermaid: var(--font-jost), monospace;
	
	--font-crimson-pro: 'Crimson Pro';
	--font-bebas-neue: 'Bebas Neue';
	--font-jetbrains-mono: 'JetBrains Mono';
	--font-jost: 'Jost';
	--font-poppins: 'Poppins';
	--font-roboto: 'Roboto';
	--font-roboto-slab: 'Roboto Slab';
	--font-source-code-pro: 'Source Code Pro';
	--font-source-sans-3: 'Source Sans 3';
	
	--font-size-body: 16px;
	
	--background-color-bodywrapper-code: var(--background-color-code);
	--background-color-box-default: whitesmoke; /* Wenn sonst keine Farbe für eine Box vergeben ist. */
	--background-color-box-note: azure;
	--background-color-box-important: lightyellow;
	--background-color-box-warning: peachpuff;
	--background-color-box-error: pink;
	--background-color-code: #eeffcc;
	--background-color-sidebar: #fafaf0;
	--background-color-toc: #fafaf0;
	
	--color-blogimg: #DDD;
	--color-body1: #444;
	--color-body2: #888;
	--color-body3: #DDD;
	--color-bodywrapper-code: green;
	--color-heading-code: #DDD;
	--color-link: royalblue; /* cornflowerblue; */
	--color-footer: var(--color-body2);
}

.logo {
/*	height: 64px;*/ /* Nutzen, nur wenn ein Logo-Bild eingeschaltet ist per conf.py. Sonst wird die Home-Schrift die statt dessen angezeigt wird, wenn sie einzeilig ist, großen Abstand zum nächsten Element haben. */
}

a,
a:hover,
a:visited {
	color: var(--color-link);
	text-decoration: none;
}

a.external::after {
	content: " \f35d"; /* fa-external-link-alt */
	font-family: "Font Awesome 6 Free";
	font-size: 80%;
	font-weight: bold; /* Muss sein, sonst wird es kaputt angezeigt. */
}

a.headerlink {
	color: var(--color-body3);
	font-family: "Font Awesome 6 Free";
	font-size: 80%;
	font-weight: bold; /* Muss sein, sonst wird es kaputt angezeigt. */
}

a.headerlink::before { /* Weil das Theme Alabaster kein html_permalinks_icon="" in der conf.py beachtet, löschen wir den Inhalt per JavaScript und setzen ein Zeichen per CSS als ::before. */
	content: "\f1dd"; /* fa-paragraph */
}

a.headerlink:hover {
	color: var(--color-body1);
/*	background-color: transparent;*/
}

a.reference {
	text-decoration: none;
	border-bottom: none;
}

a.reference:hover {
	border-bottom: 1px solid var(--color-link);
}

.section.ablog__blog_comments a {
	color: var(--color-footer);
}

/*.section.ablog__prev-next { # Nicht merhr nötig, da post_show_prev_next=False in conf.py gesetzt wurde.
	display: none !important;
}*/

body {
/*	background-color: antiquewhite;*/
	color: var(--color-body1);
	font-family: var(--font-text-body);
	font-size: var(--font-size-body);
}

@media screen and (max-width: 1200px) {
	body {
		margin: 0;
		padding: 20px 20px 20px 20px;
	}
}

div.body {
	background-color: transparent;
	color: var(--color-body1);
	max-width: 100%;
}

div.document,
div.footer {
/*	width: 1200px;*/ /* Inklusive Sidebar-Width die bei ablog standardmäßig 220px hat. */ /* Wird in conf.py gesetzt. */
	margin: 15px 10px 30px 10px;
}

div.footer {
	color: var(--color-footer);
	text-align: center;
	padding: 18px 10px;
}

@media screen and (max-width: 1200px) {
	div.document,
	div.footer {
		margin: 0;
		width: 100%;
	}
}

@media screen and (max-width: 1200px) {
	div.documentwrapper {
		background-color: transparent;
	}
}

div.sphinxsidebar {
	background-color: var(--background-color-sidebar);
}

@media screen and (max-width: 1200px) {
	div.sphinxsidebar {
		color: var(--color-body1);
/*		margin: 40px -20px -50px -40px;*/ /* Nutzen, wenn sidebar nicht fixed ist per conf.py. */
		margin: -20px -30px 20px -30px; /* Nutzen, wenn sidebar fixed ist per conf.py. */
/*		padding: 0px 20px;*/
	}
}


div.sphinxsidebar a {
	color: var(--color-body1);
	border-bottom: 1px dotted;
}
div.sphinxsidebar a:hover {
	border-bottom: 1px solid;
}

@media screen and (max-width: 1200px) {
	div.sphinxsidebar a {
		color: var(--color-body1);
		border-bottom: 1px dotted;
	}
	div.sphinxsidebar a:hover {
		border-bottom: 1px solid;
	}
}

div.sphinxsidebar ol,
div.sphinxsidebar ul {
	color: inherit; /* Ist bei ablog standardmäßig #000. Aber bei kleineren Bildschirmen ist der Hintergrund der Sidebar #333. So sieht man das dann nicht. */
	font-family: var(--font-text-sidebar);
}

div.sphinxsidebar ul li.toctree-l1 > a {
	font-size: 100%;
}

div.sphinxsidebarwrapper {
	padding: 20px 15px;
}

@media screen and (max-width: 1200px) {
	div.sphinxsidebarwrapper {
		padding: 10px 15px 5px 15px;
	}
}

div.sphinxsidebarwrapper h1.logo {
	margin-bottom: 0;
	margin-top: -10px;
}

@media screen and (max-width: 1200px) {
	div.sphinxsidebarwrapper h1.logo {
		margin-bottom: 0;
		margin-top: 0;
	}
}

div.body h1,
div.body h2,
div.body h3,
div.body h4,
div.body h5,
div.body h6 {
	font-family: var(--font-headings-body);
	font-weight: bold;
}

div.body h1 {
	background-color: var(--background-color-toc);
	padding: 0px 10px 5px 10px;
}

@media screen and (max-width: 1200px) {
	div.body h1 {
		background-color: transparent;
		padding: 0;
	}
}

div.body h2 {
	background-color: var(--background-color-toc);
	border-bottom: 1px dotted;
/*	color: white;*/
	padding: 0px 10px 5px 10px;
}

div.sphinxsidebar h1,
div.sphinxsidebar h2,
div.sphinxsidebar h3,
div.sphinxsidebar h4,
div.sphinxsidebar h5,
div.sphinxsidebar h6 {
	color: var(--color-body1);
	font-family: var(--font-headings-sidebar);
	font-weight: bold;
}

div.sphinxsidebar h1,
div.sphinxsidebar h2,
div.sphinxsidebar h3,
div.sphinxsidebar h4,
div.sphinxsidebar h5,
div.sphinxsidebar h6,
div.sphinxsidebar h1 a,
div.sphinxsidebar h2 a,
div.sphinxsidebar h3 a,
div.sphinxsidebar h4 a,
div.sphinxsidebar h5 a,
div.sphinxsidebar h6 a,
div.sphinxsidebar p {
	color: var(--color-body1);
}
	
@media screen and (max-width: 1200px) {
	div.sphinxsidebar h1,
	div.sphinxsidebar h2,
	div.sphinxsidebar h3,
	div.sphinxsidebar h4,
	div.sphinxsidebar h5,
	div.sphinxsidebar h6,
	div.sphinxsidebar h1 a,
	div.sphinxsidebar h2 a,
	div.sphinxsidebar h3 a,
	div.sphinxsidebar h4 a,
	div.sphinxsidebar h5 a,
	div.sphinxsidebar h6 a,
	div.sphinxsidebar p {
		color: var(--color-body1);
	}
}

h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
	background-color: var(--color-heading-code);
}

nav.contents, aside.topic, div.topic {
	background-color: var(--background-color-toc);
	border: none;
	padding: 5px 18px 18px 18px;
}

div.body p {
	text-align: justify;
}

div.bodywrapper em {
/*	color: tomato;*/
}

pre {/* Aus dem Theme Classic. */
	padding: 5px;
	background-color: unset;
	color: unset;
	line-height: 120%;
	border: 1px solid #ac9;
	border-left: none;
	border-right: none;
	font-family: var(--font-code);
	font-size: 14px;
	tab-size: 4;
}

pre.mermaid {
	background-color: transparent;
	border: 0;
}

pre.mermaid hr {
	border-bottom: 0;
	border-top: 1px solid black;
	color: black;
}

pre.mermaid .node rect,
pre.mermaid .node circle,
pre.mermaid .node ellipse,
pre.mermaid .node polygon,
pre.mermaid .node path {
	fill: transparent !important;
	stroke: black !important;
}

div.bodywrapper tt,
div.bodywrapper code {
	background-color: var(--background-color-bodywrapper-code);
	border-radius: 6px;
	color: var(--color-bodywrapper-code);
	font-family: var(--font-bodywrapper-code);
	font-size: 85%;
	padding: .1em .3em;
	white-space: break-spaces;
}

.highlight {
	background-color: var(--background-color-code);
}

/* Info-Boxen etc. */

div.admonition { /* Das muss forne stehen, weil diese Klasse mit den nachfolgendne kombiniert wird. */
	margin: 20px 0px;
	padding: 10px 30px;
	background-color: var(--background-color-box-default);
	border: 1px dashed #CCC;
}

div.warning {
	background-color: var(--background-color-box-warning);
	border: 1px dashed #FAA;
}

div.danger {
	background-color: var(--background-color-box-warning);
	border: 1px dashed #FAA;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

div.error {
	background-color: var(--background-color-box-error);
	border: 1px dashed #FAA;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

div.caution {
	background-color: var(--background-color-box-important);
	border: 1px dashed #FAA;
}

div.attention {
	background-color: var(--background-color-box-important);
	border: 1px dashed #FAA;
}

div.important {
	background-color: var(--background-color-box-important);
	border: 1px dashed #CCC;
}

div.note {
	background-color: var(--background-color-box-note);
	border: 1px dashed #CCC;
}

div.tip {
	background-color: var(--background-color-box-note);
	border: 1px dashed #CCC;
}

div.hint {
	background-color: var(--background-color-box-note);
	border: 1px dashed #CCC;
}

div.seealso {
	background-color: var(--background-color-box-default);
	border: 1px dashed #CCC;
}

div.topic {
	background-color: var(--background-color-box-default);
}

img.bloghead {
/*	filter: brightness(10) grayscale(1);*/
	transition: filter 0.3s ease; /* für weichen Übergang */
	width: 100%;
}

img.bloghead:hover {
	filter: none;
}

img.blogimg {
	border: 4px double var(--color-blogimg);
}

img.blogimg2 {
	border: 0;
}

div.figure p.caption, figcaption {
	padding: 0;
	text-align: left;
}

figcaption p {
	margin: 0;
}

img.align-left, figure.align-left, .figure.align-left, object.align-left,
img.align-center, figure.align-center, .figure.align-center, object.align-center,
img.align-default, figure.align-default, .figure.align-default {
	padding: 0;
}

/*.mermaid {
transform: scale(0.5);
transform-origin: top left;
}*/
svg.flowchart {
/*	width: 50%;*/
}

ul, ol {
	margin: 0 0 0 30px; /* Null Abstand oben und unten, damit eine zweite Liste an die ersten dran gehängt werden kann in der bspw. ein Link "more..." stehen kann. */
}

.ablog__tagcloud {
	text-transform: capitalize;
}

/*.todo {
	background-color: yellow;
	color: green;
}
.todo::before {
	content: "TODO";
}*/
p.todo {
	background-color: yellow;
}

.draft-banner::before,
.draft-banner {
	background-color: tomato;
	color: white;
	content: "⚠️ Draft -";
	font-weight: bold;
	margin-bottom: 10px;
	text-align: left;
}

.draft-banner {
	filter: grayscale(1);
	opacity: 0.5;
	padding: 0.3em 0.3em 0.3em 0.3em;
}

.draft-banner::before {
	padding-right: 0.3em;
	text-transform: uppercase;
}

/* Geht nicht
.mermaid {
    font-family: var(--font-mermaid), monospace !important;
}*/

span.linenos {
	color: #ac9;
	border-right: 1px solid;
	margin-right: .3em;
}