{% load static %}

@namespace exist url(http://exist.sourceforge.net/NS/exist); /* Nötig für Markierungen? Oder wofür? */

@font-face {
    font-family: Libertine;
    /* src: url('/static/fonts/LinLibertine/LinLibertine_Rah.ttf'); */
    src: url('/static/fonts/LinLibertineMWG.ttf');
}

@font-face {
    font-family: Libertine;
    font-weight: bold;
    /* src: url('../fonts/LinLibertine/LinLibertine_RBah.ttf'); */
    src: url('/static/fonts/LinLibertine/LinLibertine_RBah.ttf');
}
@font-face {
    font-family: Libertine;
    font-style: italic;
    /* src: url('../fonts/LinLibertine/LinLibertine_RIah.ttf'); */
    src: url('/static/fonts/LinLibertine/LinLibertine_RIah.ttf');
}
@font-face {
    font-family: Biolinum;
	/* size-adjust: 80%; */
    /* src: url('../fonts/LinLibertine/LinBiolinum_Rah.ttf'); */
    src: url('/static/fonts/LinLibertine/LinBiolinum_Rah.ttf');
}
@font-face {
    font-family: Biolinum;
    font-weight: bold;
	/* size-adjust: 80%; */
    /* src: url('../fonts/LinLibertine/LinBiolinum_RBah.ttf'); */
    src: url('/static/fonts/LinLibertine/LinBiolinum_RBah.ttf');
}
@font-face {
    font-family: NimbusSansL;
	/* size-adjust: 80%; */
    src: url('../fonts/Nimbus/NimbusSanL-Reg.otf');
}
@font-face {
    font-family: NimbusSansL;
    font-style: italic;
	/* size-adjust: 80%; */
    src: url('../fonts/Nimbus/NimbusSanL-RegIta.otf');
}
@font-face {
    font-family: NimbusSansL;
    font-weight: bold;
	/* size-adjust: 80%; */
    src: url('../fonts/Nimbus/NimbusSanL-Bol.otf');
}
@font-face {
    font-family: NimbusSansL;
    font-style: italic;
    font-weight: bold;
	/* size-adjust: 80%; */
    src: url('../fonts/Nimbus/NimbusSanL-BolIta.otf');
}

:root {
    /* Schriften */
    --serif: Libertine, "Linux Libertine", "Liberation Serif", "Times New Roman", Times, serif;
    --sans-serif: Biolinum, "Linux Biolinum", "Helvetica", "Arial", sans-serif;
    --nimbus-sans-serif: NimbusSansL, "Helvetica", "Arial", sans-serif;
    --main-content-font: var(--serif);
    --meta-content-font: var(--sans-serif);
    --nav-font: var(--sans-serif);
    --title-font: var(--sans-serif); /* der Titel des jeweiligen Textes bzw. Bandes am oberen Rand */
    --info-font: var(--nimbus-sans-serif); /* Herausgebertext in Apparaten */
	/* Zeichen und Texte */
	--bi-expansion-closed: "\f27e"; /* bi-chevron-double-down */
	--bi-expansion-open: "\f281";	 /* bi-chevron-double-up */
	/* --bi-expansion-closed: "\f285"; /\* bi-chevron-right *\/ */
	/* --bi-expansion-open: "\f282";	 /\* bi-chevron-down *\/ */
    /* Farben */
    --badw-blue: #003160;	/* von Logo auf Homepage*/
    --html-background: var(--badw-blue);
    --content-background: var(--bs-white); /* ghostwhite */
    --top-background: var(--content-background);
    --top-text: var(--badw-blue);
    --start-top-background: var(--top-text);
    --start-top-text: var(--top-background);
    /* --nav-text: rgba(255, 255, 255, .75); */
    /* --actual-nav-text: var(--content-background); */
    /* --left-nav-text: rgba(255, 255, 255, .75); */
    /* --left-actual-nav-text: var(--bs-white); */
    --content-text: black;
    --link-text: var(--badw-blue);
    /* Größen */
    --big-text: 1.25rem;
    --medium-text: 1rem;
    --small-text: 1rem;
    --info-text: .8rem;
    --title-container-padding: .5rem;
    --title-container-height: 2.5rem;
	/* Überschreiben von Bootstrap-Variablen (sollte wohl besser in SASS geschehen) */
	--bs-body-font-family: var(--sans-serif);
	--bs-body-font-size: 1.25rem;
}

@media (min-width: 992px) {
    :root {
	--title-container-padding: 1rem;
	--title-container-height: 3.5rem;
	/* --bs-body-font-size: 1.25rem; */
    }
}



/* TEST */

/* TEST ENDE */



html {
    /* font-family: var(--sans-serif); /\* Verwendet wird --bs-body-font-family *\/ */
    font-size: 1rem;
    height: 100%;
    /* background-color: var(--html-background); */
}

body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* height: 100%;				/\* Zerstört sticky! *\/ */
    min-height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--html-background);
}
footer {						/* Wie positionieren? */
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: var(--html-background);
    color: var(--bs-white);
}
#footer-link-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    padding: .25em;
}
#footer-link-box a {
    margin-right: .25em;
    margin-left: .25em;
    color: var(--bs-white);
}

#top-box {
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    padding-bottom: .5rem;
    background-color: var(--content-background);
    border-bottom: 1px solid var(--bs-blue);
    /* box-shadow: 0em .25em .5em 0 rgba(0, 0, 0, .25); */
    z-index: 50;
}

#top-box img {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

#top-box div,
#top-box p,
#top-box h1,
#top-box h4
{
    margin: 0;
    color: var(--bs-blue);
}

#top-box p {
    margin: 0;
}

#top-box #logo-box {
    margin-right: 1rem;
}
#top-box #title-box {
    margin-right: 1rem;
    margin-top: .5rem;
    margin-bottom: .5rem;
}
#top-box #right-top-box {
    margin-left: .5rem;
    margin-right: .5rem;
}
#top-box #link-box {
    font-size: 1rem;
}
#top-box #link-box > * {
    margin-right: .5em;
}
#top-box #link-box > *:last-child {
    margin-right: 0;
}
@media (min-width: 768px) {
    #top-box #right-top-box {
	margin-right: 1rem;
    }
    #top-box #link-box > div {
	margin-right: 1em;
    }
    #top-box #link-box > div:last-child {
	margin-right: 0;
    }
}


#right-top-box {
    flex-wrap: wrap;
}

#logo-box {
    width: 120pt;
    padding: 0;
}

@media (min-width: 500px) {
    #logo-box {
	width: 160pt;
    }
}

@media (min-width: 992px) {
    #top-box {
	margin-bottom: 0;
    }
    #logo-box {
	width: 240pt;
	padding: 12pt;
    }
}

@media (max-width: 320px) {
    #link-box {
	display: flex;
	flex-direction: column;
    }
}


#right-top-box {
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
}

#title-box {
    font-family: var(--sans-serif);
    font-size: 2rem;
}

#title-box h1 {
    font-weight: bold;
}

#title-box p {
    font-size: .5em;
    margin-top: -.5em;
    white-space: nowrap;
    padding: 0;
}

#title-box a {
    text-decoration: none;
}

#digital {
    font-size: 1.5rem;
    font-weight: normal;
}

#title-container, #main {
    margin: 0;
    padding: 0;
}

body.edition #content div {
    /* Damit trotz oben fixierter Titelleiste das Sprungziel sichtbar ist. */
    /* Cf. https://discourse.webflow.com/t/setting-scroll-offset-with-sticky-navbar/92189 */
    margin-top: calc(0rem - var(--title-container-height) * 2 - .5em);
    padding-top: calc(var(--title-container-height) * 2 + .5em);
    /* Wenn in der Titelleiste die Zeile umbricht, wird leider noch etwas verdeckt. */
}
body.edition.search #content div {
    margin-top: unset;
    padding-top: unset;
}
body.edition #content div.p, 
body.edition #content div.infotext {
    margin-top: unset;
    padding-top: unset;
}

#title-container {
    background-color: var(--bs-blue);
    color: var(--bs-white);
    padding: var(--title-container-padding);
    /* padding-bottom: var(--title-container-padding-bottom); */
    /* background-color: gainsboro; */
    /* color: black; */
}

#title-container a {
    color: var(--bs-white);
    /* color: lightgreen; */
    text-decoration: none;
}

#title-container h6.toc-head {
    font-family: var(--title-font);
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 0;
}
#title-container h6.toc-head.volume a {
    font-family: var(--title-font);
    font-weight: normal;
    font-size: 1rem;
}

/* #left-nav-container { */
/*     background-color: var(--bs-blue); */
/*     color: var(--bs-white); */
/* } */

#content-container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#content {
    margin: 0;
    padding: 0;
}
#inner-content {
    margin: 0;
    padding: 0;
}

#title-and-nav-container {
    position: sticky;
    top: 0;
    background-color: var(--bs-white);
    display: flex;
    flex-direction: column;
    /* border-bottom: 1px solid var(--bs-blue); */
    box-shadow: 0em .25em .5em 0 rgba(0, 0, 0, .25);
    z-index: 50;
}
/* sticky bereitet in der Mobilansicht manchmal Probleme, aber nur bei
bestimmten Dateien, z. B. "Protestantische Ethik I" oder WuG
"Soziologische Grundbegriffe" - aber auch "Protestantische Askese";
also liegt es wohl nicht an der Dateigröße. Nur ein Problem der
Vorschau-Funktion im Browser? TODO: An aktuellen Dateien mit richtigem
Mobilgerät überprüfen. Wenn Problem sich bestätigt: Warum? Wie
beheben? */

body.list #title-and-nav-container {
	display: none;
}

#title-container {
    height: var(--title-container-height);
    display: flex;
    flex-direction: row;
}
#title-content {
    height: 100%;
    /* width: 90%; */
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    flex-grow: 1;
}
#title-expand {
    width: 1.5em;
    margin-left: .25em;
    margin-right: .25em;
    box-shadow: 0 0 1.5em 1.5em var(--bs-blue);
    clip-path: polygon(1.5em -.25em,
		       -3em -.25em,
		       -3em calc(var(--title-container-height) - .75em),
		       1.5em calc(var(--title-container-height) - .75em));
    /* Falls clip-path nicht unterstützt wird, wird das scheußlich aussehen!
       Gibt es eine bessere Lösung? */
}
#title-container.open #title-expand {
    box-shadow: none;
}
#title-expand:after {
    font-family: "bootstrap-icons";
	content: var(--bi-expansion-closed);
}
#title-container.open #title-expand:after {
    font-family: "bootstrap-icons";
	content: var(--bi-expansion-open);
}

#title-container.open {
    height: unset;
}
#title-container.open #title-content {
    white-space: wrap;
}

@media (hover: hover) {
    #title-container:hover {
	height: unset;
    }
    #title-container:hover #title-content {
	white-space: wrap;
    }
    #title-container:hover #title-expand {
	display: none;
    }
    #nav-label-container > div.open {
	text-decoration: underline;
    }
    #nav-label-container > div.open:after {
	/* content: none !important; */
	/* content: "\f27e" !important;		/\* bi-chevron-double-down *\/ */
	visibility: hidden !important;
    }
}

@media (min-width: 576px) {
    #title-container {
	height: 100%;
    }
    #title-container #title-content {
	overflow: unset;
	white-space: wrap;
    }
    #title-container #title-expand {
	display: none;
    }
}

#title-container .toc-head-volume {
    font-size: .8em;
}


#nav-label-and-links-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}
#links-container{
	display: flex;
	flex-direction: row;	
}

#nav-label-container,
#links-container {
    background-color: var(--bs-white);
    /* height: 2em; */
    display: flex;
    flex-direction: row;
    padding: .25em;
    border-bottom: .5px solid rgba(0, 0, 0, .125);
}
#nav-label-container > div,
#links-container > div {
    background-color: var(--bs-white);
    margin-right: .25em;
    padding: .25em;
    padding-top: .125em;
    padding-bottom: .125em;
    height: fit-content;
    font-size: .8em;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* border: 1px solid var(--bs-blue); */
    /* box-shadow: .125em .125em .5em 0 rgba(0, 0, 0, .5); */
}

#links-container > div > a {
	margin: .125em;
}

#nav-label-container > div:after {
    font-family: "bootstrap-icons";
	content: var(--bi-expansion-closed);
    margin-left: .25em;
}
#nav-label-container > div.open:after {
    font-family: "bootstrap-icons";
	content: var(--bi-expansion-open);
    margin-left: .25em;
}
#nav-volumes, #nav-volume, #nav-text {
    display: none;
}
#nav-volumes.open, #nav-volume.open, #nav-text.open {
    display: block;
}


#nav ul,
#right-nav ul,
#content #volumes ul {
    list-style: disc;
    margin: 0rem;
    padding: 0rem;
}
#nav li,
#right-nav li,
#content #volumes li {
    margin-left: 1rem;
    text-indent: 0rem;
}
#nav li.details,
#right-nav li.details,
#content #volumes li.details {
    margin-left: .67rem;
    list-style: none;
    text-indent: -.7rem;
}

/* #nav li.details::marker, */
/* #right-nav li.details::marker, */
/* #content #volumes li.details::marker { */
/* } */
/* #nav li > details > summary::marker { */
/* 	margin-left: 3rem; */
/* } */

#nav li a {
  /* --bs-link-color: #003160; */
  /* --bs-link-color-rgb: 0, 49, 96; */
    color: var(--bs-link-color);
}
#nav li.actual > details > summary > a,
#nav li.actual > a {
    /* color: rgba(var(--bs-link-color), .8); */ /* Geht nicht. Warum? */
    font-weight: bold;
}
#nav a,
#right-nav a,
#content #volumes a {
    text-decoration: none;
    color: inherit;
}
#nav a:hover,
#right-nav a:hover,
#content #volumes a:hover {
    text-decoration: underline;
}
#nav > ul > li.main > details > summary > a {
    font-weight: bold;
    margin-left: -.125em;	/* Korrektur der kleinen Einrückung, die hier sonst erscheint. Woher kommt die? */
}



#main {
    display: flex;
    flex-grow: 1;
    flex-direction: row;
    justify-content: center;
    overflow: hidden;		/* Schneidet zu weit rechts stehende Anmerkungen ab! */
}
#nav > div {
    padding: .5em;
}
#nav, #nav a {
    background-color: var(--bs-white);
    color:  var(--bs-blue);
}

#nav {
	position: absolute;
    overflow: hidden;
    width: 100%;
    border-bottom: 1px solid var(--bs-blue);
    box-shadow: 0em .25em .5em 0 rgba(0, 0, 0, .25);
}
#nav > div {
    overflow-y: auto;
    max-height: calc(100vh - 8rem);
    background-color: transparent;
}
#title-left-margin {
	display: flex;
	flex-shrink: 0;
	width: 0%;
}



/* #title-and-nav-container { */
/* 	position: relative; */
/* } */
#nav-and-label-container {
	z-index: 40;
	/* display: none; */
}

#content-container {
    background-color: var(--content-background);
    padding: .5em;
	/* z-index: 50; */
}
body.edition #content p,
body.edition #content div.p {
    text-align: left;
}
body.edition.search #content p {
    text-align: left;
}
@media (min-width: 576px) {
    #content-container {
	padding: 2em;
    }
    body.edition #content p,
    body.edition #content div.p {
	text-align: justify;
    }
    #footer-link-box a {
	margin-left: .5em;
	margin-right: .5em;
    }
}
@media (min-width: 768px) {
    #content-container {
	padding: 5em;
    }
    #footer-link-box {
	padding: .5em;
    }
    #footer-link-box a {
	margin-left: 1em;
	margin-right: 1em;
    }
}
@media (min-width: 992px) {
    /* Umschalten auf seitliche Navigation */
    #top-box {
	padding-bottom: 0;
    }
    #nav-text-label {
	display: none !important;
    }
    #nav-text {
	display: block;
    }
    #nav-text.closed {
	display: none;
    }
    body.volume #nav-volume-label {
	display: none !important;
    }
    body.volume #nav-volume {
	display: block;
    }
    body.volume #nav-volume.closed {
	display: none;
    }
    #content-container {
	width: 60%;
	padding: 2em;
    }
	body.list #content-container {
		width: 100%;
		height: 100%;
		/* margin: 0; */
		/* padding: 0; */
	}
    #title-and-nav-container {
	box-shadow: none;
    }
    #nav {
	/* width: 20%; */
	width: 20vw;
	box-shadow: none;
    }
    #nav > div {
	width: 100%;
	max-height: calc(100vh - 5rem);
	padding-bottom: 7.5em;	/* Damit man beim Scrollen immer das untere Ende sehen kann. */
    }
    #nav, #nav a, #nav li a {
	/* background-color: var(--bs-blue); */
	background-color: transparent; /* Weil es sonst in Chrome ein bisschen vom Hauptbereich verdeckt. */
	color: rgba(255, 255, 255, .75);
    }
    #nav, #nav a, #nav li.actual > a,
    #nav, #nav a, #nav li.actual > details > summary > a {
	color: var(--bs-white);
	font-weight: normal;
    }
    #title-container {
	display: flex;
    }
    #title-left-margin {
	/* width: 20%; */
	width: 20vw;
    }
    #title-container #title-content {
	/* flex-direction: row; */
	/* justify-content: center; */
	/* width: 50%; */
	/* padding-left: 5%; */
    }
    /* #footer-link-box { */
    /* 	margin-left: 20vw; */
    /* } */
}
@media (min-width: 1200px) {
    #content-container {
	width: 50%;
    }
	body.list #content-container {
		width: 100%;
		height: 100%;
		/* margin: 0; */
		/* padding: 0; */
	}
    #nav {
	/* width: 25%; */
	width: 25vw;
    }
    #title-left-margin {
	/* width: 25%; */
	width: 25vw;
    }
    /* #footer-link-box { */
    /* 	margin-left: 25vw; */
    /* } */
}
@media (min-width: 1400px) {
    #content-container {
	padding: 4em;
    }
}



/* Darstellung des Hauptinhalts */

body.edition #content .main-text,
body.edition #content .para-text {
    font-family: var(--serif);
    /* font-size: 1.25rem; */
}

body.edition #content a {
    color: var(--link-text);
}
body.edition #content a.footnote,
body.edition #content a.comment,
body.edition #content a.apparatus {
    font-size: .75em;
    vertical-align: super;
    line-height: .5em;
    font-weight: bold;
}
body.edition #content span.index-container {
    /* display: flex; */
    /* flex-wrap: wrap; */
    /* flex-direction: row; */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    /* height: .67em; */
    /* width: max-content; */
    /* min-width: .67em; */
    height: .8em;		/* Warum muss der Wert jetzt größer sein? */
    width: max-content;
    min-width: .8em;
    border: solid var(--link-text) 1px;
    padding-top: .01em;
    margin-left: 1px;
    margin-right: 1px;
}
/* TODO: Korrekte Positionierung des Anmerkungsindex im Rahmen für
alle Browser sicherstellen! Jetzt werden sie in Chrome höher
positioniert. */


body.edition #content span.index {
    font-size: 75%;
    color: var(--link-text);
}

body.edition #content span.index.italic {
    font-style: italic;
}

body.edition #content span.ftn,
body.edition #content a.ftn {
	font-weight: bold;
	font-size: .8em;
	vertical-align: super;
	line-height: .5em;
	color: var(--link-text);
}


body.edition #content span.notes-ftn {
	font-weight: bold;
}


body.edition #content h1 {
    font-size: 1.5em;		/* default: 2em */
    margin-top: 1.5ex;
    margin-bottom: .5ex;
    font-weight: bold;
}
body.edition #content h1.sub,
body.edition #content h2 {
    font-size: 1.25em;		/* default: 1.5rem */
    margin-top: 1.5ex;
    margin-bottom: .5ex;
}
body.edition #content h2.sub,
body.edition #content h3 {
    font-size: 1.125em;		/* default: 1.17rem */
    margin-top: 1.5ex;
    margin-bottom: .5ex;
}
body.edition #content h3.sub,
body.edition #content h4 {
    font-size: 1em;		/* default: 1rem */
    margin-top: 1.5ex;
    margin-bottom: .5ex;
}
body.edition #content h4.sub,
body.edition #content h5 {
    font-size: .8rem;		/* default: 0.83rem */
    margin-top: 1.5ex;
    margin-bottom: .5ex;
}
body.edition #content h5.sub,
body.edition #content h6 {
    font-size: .6rem;		/* default: 0.67rem */
    margin-top: 1.5ex;
    margin-bottom: .5ex;
}

body.edition #content .petit h1 {
    font-size: 1.25rem;
}
body.edition #content .petit h2 {
    font-size: 1.125rem;
}
body.edition #content .petit h3 {
    font-size: 1rem;
}
body.edition #content .petit h4 {
    font-size: .8rem;
}
body.edition #content .petit h5 {
    font-size: .6rem;
}
body.edition #content .petit h6 {
    font-size: .5rem;
}
body.edition #content div[type="text"] h1 + h1.sub,
body.edition #content div[type="text"] h2 + h2.sub,
body.edition #content div[type="text"] h3 + h3.sub,
body.edition #content div[type="text"] h4 + h4.sub,
body.edition #content div[type="text"] h5 + h5.sub,
body.edition #content div[type="text"] h6 + h6.sub {
	/* margin-top: 0rem !important; */
	margin-top: 0rem;
}
body.edition #content div[type="text"] h1 + *,
body.edition #content div[type="text"] h2 + *,
body.edition #content div[type="text"] h3 + *,
body.edition #content div[type="text"] h4 + *,
body.edition #content div[type="text"] h5 + *,
body.edition #content div[type="text"] h6 + *
{
	/* margin-top: 1rem !important; */
	/* margin-top: 1rem; */
}

h1.italic,
h2.italic,
h3.italic,
h4.italic,
h5.italic,
h6.italic {
    font-weight: normal;
    font-style: italic;
}

body.edition #content span[type="pb"] {
    /* color: #404040; */
    color: #606060;
    font-size: 80%;
    margin-left: .125em;
    margin-right: .125em;
}
/* span[type="pb"]:before { */
/*     content: "["; */
/* } */
/* span[type="pb"]:after { */
/*     content: "]"; */
/* } */

/* body.edition #content div { */
/*     margin-top: 1rem; */
/*     margin-bottom: 1rem; */
/* } */
body.edition #content div.extraspace {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

body.edition #content span.marginal-wrapper {
    position: relative;
    float: right;
    width: 0rem;
    height: 0rem;
}
body.edition #content span.marginal.outside {
    position: absolute;
    left: 1.5rem;
    top: .125rem;
    /* color: white; */
    /* float: right; */
	width: calc(20vw - 2.5rem);
    font-size: 75%;
    margin: 0rem;
    padding: 0rem;
	/* margin-left: 14em; */
    /* padding: 0em; */
    /* margin-bottom: .125em; */
    /* padding-top: .4em; */
    /* padding-right: 1em; */
    text-align: left;
}
body.edition #content span.marginal.outside > * {
    vertical-align: baseline;
}
body.edition #content span.marginal.outside > a.ftn {
    vertical-align: super;
}

body.edition #content span.marginal.inline {
    float: left;
    width: 12em;
    font-size: 75%;
    margin: 0em;
    padding: 0em;
    margin-bottom: .125em;
    padding-top: .4em;
    padding-right: 1em;
    text-align: left;
}
body.edition #content span.marginal.inline > * {
    vertical-align: baseline;
}
body.edition #content span.marginal.inline > a.ftn {
    vertical-align: super;
}



body.edition #content p,
body.edition #content div.p {
    margin: 0pt;
    margin-bottom: 1ex;
}

body.edition #content p.line {
    margin: 0pt;
    margin-bottom: 0pt;
    text-align: left;
}
body.edition #content div.indent-00 {
    margin-left: 0em;
}
body.edition #content div.indent-05 {
    margin-left: 1em;
}
body.edition #content div.indent-10 {
    margin-left: 2em;
}
body.edition #content div.indent-15 {
    margin-left: 3em;
}
body.edition #content div.indent-20 {
    margin-left: 4em;
}
body.edition #content div.indent-25 {
    margin-left: 5em;
}
body.edition #content div.indent-30 {
    margin-left: 6em;
}
body.edition #content div.indent-35 {
    margin-left: 7em;
}
body.edition #content div.indent-40 {
    margin-left: 8em;
}
body.edition #content div.indent-45 {
    margin-left: 9em;
}
body.edition #content div.indent-50 {
    margin-left: 10em;
}
body.edition #content div.indent-55 {
    margin-left: 11em;
}
body.edition #content div.indent-60 {
    margin-left: 12em;
}
body.edition #content div.indent-65 {
    margin-left: 13em;
}
body.edition #content div.indent-70 {
    margin-left: 14em;
}
body.edition #content div.indent-75 {
    margin-left: 15em;
}
body.edition #content div.indent-80 {
    margin-left: 16em;
}
body.edition #content div.indent-85 {
    margin-left: 17em;
}
body.edition #content div.indent-90 {
    margin-left: 18em;
}
body.edition #content div.indent-95 {
    margin-left: 19em;
}
body.edition #content div.indent-100 {
    margin-left: 20em;
}
body.edition #content div.indent-105 {
    margin-left: 21em;
}
body.edition #content div.indent-110 {
    margin-left: 22em;
}
body.edition #content div.indent-115 {
    margin-left: 23em;
}
body.edition #content div.indent-120 {
    margin-left: 24em;
}

body.edition #content div.text-indent {
    text-indent: 1em;
}

body.edition #content .left,
body.edition #content div.left {
    text-align: left !important;
}
body.edition #content .centered,
body.edition #content div.centered {
    text-align: center !important;
}
body.edition #content .right,
body.edition #content div.right {
    text-align: right !important;
}

body.edition #content div.marginals p,
body.edition #content div.marginals div.p {
	padding-right: 33%;
}

body.edition #content ul, body.edition #content ol {
    margin: 0rem;
    margin-left: 1em;
    margin-top: 1ex;
    margin-bottom: 1ex;
    padding: 0rem;
}
body.edition #content ul {
    list-style: none;
}
/* body.edition #content text > ul, body.edition #content div > ul  { */
/*     margin-bottom: 1ex; */
/* } */
body.edition #content li {
    margin-left: 1em;
    text-indent: -1em;
}
body.edition #content li div,
body.edition #content li span {
    text-indent: 0; !important;
}


/* body.edition #content li[n]::before { */
/*     content: attr(n) " "; */
/* } */

body.edition #content ol {
    counter-reset: list;
    margin-left: 1em;
}
body.edition #content ol > li {
    list-style: none;
    text-indent: -1em !important;
}
body.edition #content ol > li *{
    text-indent: initial;
}
body.edition #content ol > li:before {
    counter-increment: list;
    margin-right: .25em;
}
body.edition #content ol[type="I."] > li:before {
    content: counter(list, upper-roman) ".";
} /* Mit list-style oder list-style-type lässt sich das folgende
   Satzzeichen nicht bestimmen. */
body.edition #content ol[type="1."] > li:before {
    content: counter(list, decimal) ".";
}
body.edition #content ol[type="a)"] > li:before {
    content: counter(list, lower-alpha) ")";
}
/* body.edition #content ol[type="ɑ)"] > li:before { */
/*     content: counter(list, lower-greek) ")"; */
/* } */
/* Griechisch im Selektor geht nicht. */
body.edition #content ol[type="alpha)"] > li:before {
    content: counter(list, lower-greek) ")";
}
body.edition #content ol[type="alpha2)"] > li:before {
    content: counter(list, lower-greek) counter(list, lower-greek) ")";
}
body.edition #content ol[type="alpha3)"] > li:before {
    content: counter(list, lower-greek) counter(list, lower-greek) counter(list, lower-greek) ")";
}
body.edition #content ol[type="alpha."] > li:before {
    content: counter(list, lower-greek) ".";
}



/* body.edition #content ol[rend="1."] { */
/*     list-style: decimal inside; */
/* } */
/* body.edition #content ol[rend="a)"] { */
/*     list-style: lower-alpha inside; */
/* } */

body.edition #content ul.overview, body.edition #content ul.overview ul  {
    margin: .5em;
    margin-left: 1em;
    /* text-indent: -1em; */
}
body.edition #content ul.overview ul.noindent {
    margin-left: 0em;
}
body.edition #content ul.overview ul.inline > li {
    display: inline;
}
body.edition #content ul.italic {
    font-style: italic;
}
body.edition #content ul.italic > li > ul {
    font-style: normal;
}


body.edition #content .petit {
	font-size: var(--small-text);
}

body.edition #content .big {
	font-size: var(--big-text);
}
body.edition #content .small {
	font-size: var(--medium-text);
}
body.edition #content .bold {
	font-weight: bold;
}
body.edition #content .italic {
	font-style: italic;
}

body.edition #content .superscript {
    /* font-size: smaller; */
    font-size: 75%;
    vertical-align: super;
    line-height: .5em;
}
body.edition #content .subscript {
    /* font-size: smaller; */
    font-size: 75%;
    vertical-align: sub;
    line-height: .5em;
}
body.edition #content .majuscule {
    text-transform: uppercase;
}
body.edition #content .serif {
    font-family: var(--serif);
}
body.edition #content .sans-serif {
    font-family: var(--sans-serif);
}

body.edition #content p.right {
    text-align: right !important;
	/* float: right; */
}
body.edition #content span.right {
    text-align: right !important;
	float: right;
}


body.edition #content em {
	font-style: italic;
}
body.edition #content sup {
	font-size: smaller;			/* Hier auch small möglich, wie bei Bruch? */
	vertical-align: super;
	line-height: .5em;
}
body.edition #content sub {
	/* font-size: smaller; */
}
body.edition #content span[type="fraction"] > sup,
body.edition #content span[type="fraction"] > sub {
	font-size: 66%;
}
body.edition #content span[type="fraction"] > sup {
	position: relative;
	top: 0.1em;
}
body.edition #content span[type="fraction"] > sub {
	position: relative;
	bottom: -0.1em;
}

body.edition #content #digital {
    font-family: var(--sans-serif);
    font-weight: normal;
    font-size: .75em;
    /* margin-left: .5em; */
}

body.edition #content div.petit,
body.edition #content p.petit,
body.edition #content ul.petit {
    margin-left: 4rem;
}


body.edition #content div.petit div.petit,
body.edition #content div.petit p.petit {
    margin-left: 0rem;
}

body.edition #content .space-before,
body.edition #content div.p.space-before {
	margin-top: 5ex;
}

body.edition #content .space-after {
	margin-bottom: 1.5em;
}


body.edition #content span.p {
	display: block;
}
body.edition #content #notes span.p {
	display: inline;
}

body.edition #content span.abbr:before {
    content: "[";
}

body.edition #content span.abbr:after {
    content: "]";
}

body.edition #content span.lem {
    border: 1px solid rgba(0, 0, 0, 0);
}

body.edition #content span.rdg {
	display: none;
}

body.edition #content div.info {
    position: relative;
    margin: 0;
    padding: 0;
    /* font-size: 1rem; */
    font-weight: normal;
    font-style: normal;
    /* font-family: serif; */
    display: inline;
}
body.edition #content div.info > span.index {
}
body.edition #content div.info > div.infotext {
    /* display: none;				/\*!!!*\/ */
    display: block;
    position: absolute;
    visibility: hidden;
    top: 1.5em;
    left: 0em;
    width: max-content;
    max-width: 25vw;
    /* width: fit-content; */
    /* width: -moz-fit-content; */
    text-align: left;
    font-weight: normal;
    color: black;
    background-color: white;
    padding: 6px;
    padding-bottom: 4px;		/* Sonst unten größer. Warum? */
    border: 1px solid DimGrey;
    box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);
    z-index: 10;
}
body.edition #content div.info > div.infotext.open {
    position: relative;
    visibility: visible;
    width: 100%;
    max-width: unset;
    top: 0;
    box-shadow: none;
    text-align: justify;
    margin-top: 3px;
    margin-bottom: 3px;
    z-index: 5;
}
@media (hover: hover) {
    body.edition #content div.info:hover > div.infotext {
	visibility: visible;
    }
}

body.edition #content div.infotext {
    font-size: var(--info-text);
}

body.edition #content div.infotext.sans-serif,
body.edition #content div.infotext .sans-serif,
body.edition #content div.infotext .witness {
    font-family: var(--nimbus-sans-serif);
    /* font-size: calc(var(--info-text) * .85); */
    font-size: calc(var(--info-text) * .95);
	/* Besser bei Schriftart mit size-adjust? Aber dann müsste man viele andere Einstellungen korrigieren! */
}
body.edition #content div.infotext.serif,
body.edition #content div.infotext .serif,
body.edition #content div.infotext .reading {
    font-family: var(--serif);
    font-size: larger;
    font-size: var(--info-text);
}

body.edition #content div.infotext span.original {
    font-family: var(--serif);
    font-size: larger;
}

body.edition #content div.infotext span.reading + span.note {
	/* display: inline; */
	margin-left: 1em;
}

body.edition #content div.info > div.infotext.with-table {
    max-width: fit-content;
    max-width: -moz-fit-content;
}
/* Muss noch verbessert werden; macht Apparat zu schmal, wenn die
Tabelle schmal ist.  */

body.edition #content span.lem.highlight {
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}

body.edition #content table {
    border: none;
    border-collapse: collapse;
    margin-top: .5rem;
    margin-bottom: .5rem;
    font-size: inherit;
    /* width: fit-content; */
    /* width: -moz-fit-content; */
}
body.edition #content table > tbody {
}
/* TODO: Tabellen scrollbar in Kasten. */

body.edition #content table td {
    border: none;
    vertical-align: top;
	padding: 0.25em;
}
body.edition #content table.border {
    border: 1px solid black;
}
body.edition #content table.border td {
    border: 1px solid black;
}

body.edition #content figure {
    padding: 0;
    margin: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
body.edition #content img {
    max-width: 100%;
    width: auto;
    height: auto;
}
body.edition #content figcaption {
    font-family: var(--sans-serif);
	font-size: 75%;
}

body.edition #content mark {
    background-color: #ffec80;	/* Abstimmen mit search.css! */
}

body.search #title-and-nav-container,
body.volumes #title-and-nav-container {
    visibility: hidden;
}

body.edition #content .katex {
    font: inherit;
	white-space: nowrap;
}

.code {							/* Für Beispieldokumente*/
	font-family: monospace;
	font-size: 75%;
	color: var(--badw-blue);
}

/* TODO:
- Bandnavigation für Band bei großem Bildschirm links als Voreinstellung.
- Infokästen müssen ganz sichtbar sein. Für Ansicht ohne Rand neu gestalten.
- Abstandskorrektur für Springen zu Anker korrigieren.
- CMS:
  - Darstellung von CMS-Elementen überprüfen.
  - Bilder in Text einbetten.
  - Farb-Palette anpassen.
 */