/* ###### KLEIST V3 Stylesheet ###### */
/* ### Die Media-Queries werden inhaltlich den einzelnen Gliederungspunkten #### */
/* ### zugeordnet, soweit nötig #### */
/* ### Media-Queries Breakpoints:  */
/* Darstellungsoptimierung für 414px, 768px, 1024px, 1194/1200, 1600 */
/* ### @media screen and  */
/* ### (max-width: 420px)  */
/* ### (max-width: 767px)
/* ### (min-width: 768) */
/* ### (min-width: 1024px)  */
/* ### (min-width: 1200px)  */
/* ### min-width: 1600px) */
/* GLIEDERUNG */
/* - Minireset */
/* - CSS-Variablen */
/* - Defaults allgemein für die gesamte Site */
/* - Navigation (Header) */
/* - Navigation (Content) */
/* - Im folgenden zu den einzelnen Bereichen */
/* - Dramen */
/* - Briefe */
/* - Erzählungen */

/* ###### */
/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */
/* MINIRESET */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 1rem;
    font-weight: normal;
}

ul {
    list-style: none;
}

button,
input,
select,
textarea {
    /* margin: 1ch; */
    font-size: 16px;
}

html {
    box-sizing: border-box;
    font-size: 1rem;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

img,
embed,
iframe,
object,
audio,
video {
    height: auto;
    max-width: 100%;
}

iframe {
    border: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th {
    padding: 0;
    text-align: left;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    border-radius: 0;
    font-size: 1em;
    width: 100%
}

/**/


/* ++++ KLEIST-DIGITAL ++++ */

/* FONT DEFINITION */

/* @import url('https://fonts.googleapis.com/css?family=Old+Standard+TT|Open+Sans'); */
/* @import url('https://fonts.googleapis.com/css?family=EB+Garamond|Open+Sans|Ubuntu+Mono&subset=latin-ext,latin'); */
/* @import url('https://fonts.googleapis.com/css?family=Noto+Serif|Open+Sans|Ubuntu+Mono'); */

/* @import url('https://fonts.googleapis.com/css?family=Fira+Sans&display=swap'); */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap');

/* CSS-VARIABLES */

@font-face {
    font-family: 'Junicode';
    src: url('Junicode.woff') format('woff');
}

@font-face {
    font-family: 'Junicode-Italic';
    src: url('Junicode-Italic.woff') format('woff');
}

@font-face {
    font-family: 'kleistprinzwilhelm';
    src: url("/static/fonts/KleistPrinzWilhelm-Regular.eot");
    src: url("/static/fonts/KleistPrinzWilhelm-Regular.eot?#iefix") format("embedded-opentype"), url("/static/fonts/KleistPrinzWilhelm-Regular.woff2") format("woff2"), url("/static/fonts/KleistPrinzWilhelm-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kleistghonorez';
    src: url("/static/fonts/KleistGhonorez-Regular.eot");
    src: url("/static/fonts/KleistGhonorez-Regular.eot?#iefix") format("embedded-opentype"), url("/static/fonts/KleistGhonorez-Regular.woff2") format("woff2"), url("/static/fonts/KleistGhonorez-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

.italic_style {
    font-family: "Junicode-Italic";
}

/* @font-face {
    font-family: 'LeedsUni Regular';
    font-style: normal;
    font-weight: normal;
    src: local('LeedsUni Regular'), url('LeedsUni10-12-13.woff') format('woff');
} */

/* ROOT VARs */
:root {
    --font-sans: 'Open Sans', sans-serif;
    --font-serif: 'Junicode', serif;
    /* --font-mono: 'Junicode', serif; */
    /* --font-serif: 'Noto Serif', serif; */
    /* --font-mono: 'Fira Sans', sans-serif; */
    /* --font-mono: 'Ubuntu Mono', mono; */
    --font-color: rgb(74, 74, 74);
    --abstand-links: 10px;
    --abstand-rechts: 10px;
    --abstaende-default: 1%;

    /* Farben */
    /* --kleist-blau:  rgba(44, 62, 105, 0.932); */
    --kleist-blau: rgba(44, 62, 105);
    /* --bkg-color: #f5f5f5; */
    --bkg-color: rgb(232, 232, 232);
    --bkg-color-gray-light: rgb(240, 240, 240);
    --bkg-color-gray-lightest: rgb(248, 248, 248);
    --bkg-color-opac: rgba(245, 245, 245, 0.9);
    --bkg-very-lightgray: #e8e8e8;
    --grau: gray;
    --hellgrau: #E8E8E8;
    --bkg-header: #6E7DAE;
    --bkg-header-opac: rgba(110, 125, 174, 0.9);
    --bkg-header-lila: #7e63ae;
    --bkg-header-lila-opac: rgba(126, 99, 174, 0.9);
    --bkg-header-green: #63ae9b;
    --bkg-header-green-opac: rgba(99, 174, 155, 0.9);
    --link-color: #606c96;

    /* Farben Textkritik */
    --critic-deleted: #c95482;
    --critic-added: #2c8532;
    --critic-add: green;
    --critic-added: var(--bkg-header);

    --navbar-height: 50px;
    --navbar-left-width: 170px;
    --navbar-left-width-plus-margin: 250px;

    --ba-headline-negativ-einzug: -2em;
    --ba-hr-negativ-einzug: -1em;

    --width-default: 980px;
    --width-768: 600px;
    /* text widths */
    --text-width-default: var(--width-default);
    --letter-text-width: var(--width-default);
    --story-text-width: var(--width-default);
    --text-width-drama: var(--width-default);
    --text-width-abendblaetter: var(--width-default);
    --text-width-apparat: var(--width-default);

    --width-content: var(--width-default);
    --width-content-header: var(--width-default);
    --width-content-text: var(--width-default);

    --drama-letterspacing: .2em;
    --drama-width-to-center: 60%;

    --media_smartphone: 767px;
    --media_smartphone_landscape_max: 899px;
    /*iPhone xs Max und iPhone xs R Landscape*/
    --media_tablet_768: 768px;
    /* iPad Portrait */
    --media_tablet_834: 834px;
    /* iPad Portrait (11") */
    --media_tablet_1024: 1024px;
    --media_tablet_1112: 1112px;
    /* iPad 10.5" 11" */
    --media_desktop: 1194px;
    --media_desktop_large: 1600px;
    --media_desktop_very_large: 1920px;

}

/* DEFAULTS allgemein */
html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    font-family: var(--font-serif);
    color: var(--font-color);
    /* background: var(--hellgrau); */
    background: white;

}

body h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-sans);
}

body .antiqua {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 1rem;
    /* letter-spacing: .1em; */
}

body h1 {
    font-size: 1.5rem;
}

.krug-ms h1 {
    font-family: var(--font-serif);
    font-size: 100%;
    padding-left: 3em;
    text-decoration: underline;
}

body h2 {
    font-size: 1.4rem;
}

body h3 {
    font-size: 1.3rem;
}

body h4 {
    font-size: 1.2rem;
}

body h5 {
    font-size: 1.1rem;
}

h4.list-title {
    font-family: var(--font-sans);
    text-align: left;
    margin-left: 0em;
}

footer {
    /* display: flex; */
    font-family: var(--font-sans);
    /* background: var(--bkg-header); */
    /* background:var(--bkg-header); */
    color: white;
    /* min-height: 5em; */
    /* min-width: 375px;
    max-width: 414px; */
    /* padding-top: 1em;
    padding-bottom: 2em;
    padding-left: var(--abstand-links);
    padding-right: var(--abstand-rechts); */
    /* flex-shrink: 0; */
    z-index: 10;
}

.kleist-portrait {
    margin-left: 2em;
    margin-right: 2em;
}

.footer-wrapper {}

.footer-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bkg-header);
    padding-left: var(--abstand-links);
    padding-right: var(--abstand-rechts);
    padding-bottom: 1em;
    /* flex-flow: row wrap; */
    /* justify-content: flex-start; */
}

.footer-part {
    /* padding-right: 1em; */
}

.footer-part ul li {
    padding-bottom: .3em;
}

footer h6 {
    font-family: var(--font-sans);
    color: var(--kleist-blau) !important;
    font-weight: 600;
    letter-spacing: .1rem;
    color: whitesmoke;
    text-align: left;
    margin-left: 0em;
    padding-top: 1em;
    padding-bottom: .5em;
}

footer a {
    color: white;
}

.footer-impressum {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--kleist-blau);
    padding-left: var(--abstand-links);
    padding-right: var(--abstand-rechts);
    padding-top: 1em;
    padding-bottom: 1em;
}

.footer-impressum ul {
    display: grid;
    /* flex-wrap: wrap;
    justify-content:space-evenly; */
}

.page-wrapper {
    /* display: flex; */
    /* min-height: 100vh; */
    /* flex-direction: column;
    justify-content: space-between; */
    /* flex: 1 0 auto; */
}

.nav-content-wrapper {
    /* flex: 1 0 auto; */
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    /* min-width: 375px;
    max-width: 414px; */
}

.content-wrapper {
    height: 100%;
    padding-bottom: 1em;
    padding-left: var(--abstand-links);
    padding-right: var(--abstand-links);
    background-color: var(--bkg-color-gray-light);
}

ul {
    list-style-type: none;
    padding: 0em;
}

/* figure {
    display: flex;
    flex-direction: column;
    align-items: center;
} */
a {
    color: var(--link-color);
    text-decoration: none;
}

.bold {
    font-weight: 600;
}

.italic {
    font-family: "Junicode-Italic";
    /*font-style: italic*/
}

.hide_on_mobile {
    display: none;
}

.note_ref>a {
    color: var(--font-color);
}

.krug-ms .note_ref>a::after {
    content: " [+]";
    font-weight: 600;
    font-size: 80%;
    float: right;
    color: magenta;
}

h4.doc-title {
    font-family: var(--font-sans);
    font-size: 1rem;
    width: 100%;
    text-align: left;
    margin-left: 0em;
    padding: 0em;
}

span.line_no_ebook_style {
    font-family: var(--font-sans);
    font-size: 10px !important;
    vertical-align: 4px;
    color: var(--grau);
}

p.no_indent {
    text-indent: 0em !important;
}

.container {
    margin-left: var(--abstand-links);
    margin-right: var(--abstand-rechts);
}

.list {
    /* margin: auto; */
    font-family: var(--font-sans);
    line-height: 1.9rem;
}

ul.list-literatur li {
    line-height: 1.6rem;
    padding-bottom: .5em;
}

ul.list-literatur li>span.pub_sigle {
    font-weight: 600;
}

.list-works ul li {
    margin-top: .8em;
}

.list-works>ul>li {
    margin-top: 2em;
}

.list-works li {
    line-height: 1.2rem;
}

.kleist_works_genre h4,
.kleist_work_label h5 {
    font-family: var(--font-sans);
    text-align: left;
    font-weight: 600;
}

.content-text {
    font-size: 1.2rem;
    padding-top: .3em;
    line-height: 1.7rem;
}

.content-text .results {
    line-height: 1.4rem;
    margin-left: 3ch;
}

.content-text .results>li {
    margin-top: .4rem;
}

.text-container-stts {
    font-size: 1.3rem;
    margin-top: 1em;
    line-height: 1.7rem;
}

.text-container-stts {
    font-family: var(--font-sans);
}

.controlpanel-stts {
    margin-top: 1em;
}

.controlpanel-stts legend {
    font-size: 1.2rem;
    padding-left: 1em;
    padding-right: 1em;
}

.line {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0em;
    color: var(--grau);
    text-indent: 0em;
    float: right;
}

.small {
    font-size: .86rem;
}

.very_small {
    font-size: .7rem;
}

.verse_lyrics {
    font-size: inherit;
}

.sup {
    vertical-align: super;
    font-size: .8rem;
}

.sup_whithout_underline {
    vertical-align: super;
}

.modal {
    display: none;
}

.pagebreak_firstprint {
    display: block;
    margin-top: 1em;
    margin-bottom: .2em;
    font-size: .86rem;
}

span.initial {
    font-size: 1.6rem !important;
    font-weight: bold;
}

.galery {
    display: flex;
    flex-wrap: wrap;
    margin-right: 2em;
}

.item {
    width: 100%;
    padding-right: 1em;
}

.item>a>h3 {
    margin-top: 0em;
    margin-bottom: 1em;
    margin-left: .2em;
}

.galery>.item {
    flex: 0 50%;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    box-sizing: border-box;
}

.rotate {
    transform: rotate(180deg);
}

.highlight {
    background: #ffebd5
}

.highlight-verse-modified {
    background: var(--bkg-very-lightgray);
    /* padding-right: 17%; */
}

.para {
    margin-bottom: .5em;
}

.spaced_letters {
    letter-spacing: var(--drama-letterspacing)
}

.spaced_letters_strong {
    letter-spacing: .3em;
}

.pb_print {
    display: flex;
    justify-content: center;
    margin-top: 1.5em;
    margin-bottom: 0.3em;
    font-size: .86rem;
}

span.prev_next {
    margin-left: auto;
    opacity: .5;
}

span.prev_next>a:first-child {
    padding-right: 1em;
}

.pagebreak {
    display: block;
}

.pagebreak_firstprint {
    margin-left: -1em;
    margin-right: -1em;
}

.pb_firstprint {
    margin-left: 1em;
}

.page_no_story_inline {
    font-size: .9rem;
    color: var(--grau);
}

.page_no_story_inline::before {
    content: "["
}

.page_no_story_inline::after {
    content: "]"
}

.errata {
    margin-top: 1.5em;
}

.center {
    text-align: center;
}

iframe {
    width: 100%;
    height: 100%;
}

.facsimile>.fa {
    padding-left: .5em;
    display: none;
}

.table.person-refs tr {
    line-height: 1.2rem;
    vertical-align: top;
}

.table.person-refs td {
    padding-top: .5em;
}

#person_biogr_data_,
#person_gnd_etc_,
#table.person-refs {
    width: 100%;
}

#person_gnd_etc_ td,
#person_biogr_data_ td,
#table.person-refs {
    width: 50%;
}

/* response vector-store */

div.response {
    margin-top: 1rem;
}

div.response ul.result li {
    font-family: serif;
}

div.response ul.result {
    margin-bottom: 1.8rem;
}

ul.result li {
    margin-top: 0rem;
}

ul.result li.text {
    margin-top: .2rem;
    margin-bottom: .5rem;
    /* font-style: italic; */
    font-size: 18px;
    line-height: 1.4rem;
}

textarea.textarea-semantic-search {
    width: 100%;
    padding: .3em;
    line-height: 1.5em;
    min-height: 6em;
}

.zahl_vierstellig {
    width: 6ch;
}

#hdl_response {
    text-align: left;
    font-family: sans-serif;
    margin-bottom: 2rem;
    line-height: 1.4rem;
}

#hdl_response span.query-pc {
    font-style: italic;
    font-size: 18px;
    font-family: serif;
    margin-bottom: 1rem;
}

#hdl_response span.query_korpus,
span.query_autor {
    font-size: 14px;
}

/* GUI Elemente *****/
.btn {
    display: block;
    width: 100%;
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 1rem;
    /* color: var(--grau); */
    padding-left: .2em;
    padding-right: .2em;
    margin-right: .2em;
    margin-left: 0em;
    margin-top: .2em;
    margin-bottom: .2em;
    border: #666 solid 1px;
}


/* TEXTKRITIK KLASSEN */
.ex {
    display: none;
    color: var(--critic-deleted);
}

.am {
    display: inline;
    color: var(--critic-deleted);
}

.add {
    color: var(--critic-added);
}

.krug-ms .add,
.krug-ms .add a {
    color: var(--critic-add);
}

.krug-ms .ph-1808 {
    /* background: rgb(249, 255, 220); */
    font-style: oblique;
}

.del {
    color: var(--critic-deleted);
    text-decoration: line-through;
}

.krug-ms .del,
.krug-ms .del a {
    /* color: var(--critic-deleted); */
    color: inherit;
    text-decoration: line-through;
    text-decoration-color: red;
    /* text-decoration-color: rgb(24, 23, 94);
    text-decoration-style: wavy; */
}

.krug-ms .text-crit .del {
    text-decoration: none;
}

.krug-ms .del .add,
.krug-ms .add .del {
    color: var(--critic-add);
    /* text-decoration: line-through; */
    position: relative;
    display: inline-block;
    /* text-decoration-color: rgb(94, 23, 23);
    text-decoration-style: solid; */
}

.krug-ms .del .add::before,
.krug-ms .add .del::before {
    content: '';
    border-bottom: 2px solid red;
    width: 100%;
    position: absolute;
    right: 0;
    top: 50%;
}

/* .krug-ms .del.corr-3 {
    color: var(--critic-deleted);
    text-decoration: line-through;
    text-decoration-color: rgb(24, 23, 94);
    text-decoration-style: double;
}
.krug-ms .del.corr-2 {
    position: relative;
    display: inline-block;
}
.krug-ms .del.corr-2::before {
    content: '';
    border-bottom: 2px solid red;
    width: 100%;
    position: absolute;
    right: 0;
    top: 50%;
} */
.overwritten {
    color: var(--critic-deleted);
    background-color: lightgray;
    text-decoration: line-through;
}

.overwritten_part {
    color: var(--critic-deleted);
    border-top: 1px dotted;
    border-top-color: var(--critic-deleted);
    text-decoration: none;
}

.krug-ms .overwritten {
    margin-right: -.3em;
    background-color: inherit;
}

.add_inline {
    color: var(--critic-added);
    text-decoration: none;
    border-bottom: 1px dotted var(--critic-added);
}

.defaced {
    font-size: 1rem;
    /*color:gray;*/
    text-decoration: line-through;
}

.added {
    color: var(--critic-added);
    /* color:indianred; */
    font-weight: 500;
    font-family: helvetica, sans-serif;
}

.inbetween {
    /* color:indianred; */
    font-size: 1rem;
    /*line-height: 0.5em;*/
    vertical-align: baseline;
    position: relative;
    top: -1rem;
    /* margin-left: -1.5em; */
}

.krug-ms .inbetween {
    top: -1em;
}

.inbetween_sub {
    font-size: .96rem;
    /*line-height: 0.5em;*/
    vertical-align: baseline;
    position: relative;
    top: .9em;
}

.krug-ms .inbetween_sub {
    top: 1em;
}

.inbetween_hide {
    color: indianred;
    font-size: 1rem;
    /*line-height: 0.5em;*/
    vertical-align: baseline;
    position: relative;
    top: 0em;
}

.emph {
    /* text-decoration: underline; */
    border-bottom: solid 1px;
}

.firstprint .emph {
    letter-spacing: .15em;
    border-bottom: none;
}

.sup_double_underline {
    border-bottom: 3px double;
    position: relative;
    vertical-align: baseline;
    top: -0.4em;
    /* font-weight: bold; */
}

.ms_text_spacing {
    letter-spacing: .2em;
}

.faded {
    color: var(--grau);
}

.hidden {
    visibility: hidden;
}

.display-block {
    display: block !important;
}

.underline {
    text-decoration: underline;
}

.underline_double {
    border-bottom: 3px double;
}

.ms_text_spacing_tripple {
    border-bottom: 3px double;
    text-decoration: underline;
}

.text-crit {
    /* display: none;
    font-size: .9rem;
    background-color: var(--bkg-very-lightgray);
    margin: 0em;
    margin-right: 8em;
    padding: .5em; */
}

.text-crit .edit_note::before {
    content: ""
}

.text-crit .edit_note::after {
    content: ""
}

.text-crit .edit_note img {
    width: 900px;
    /*  margin-top: 1em;
    margin-left: -10px;
    padding-left: 0px; */
}

.text-crit .edit_note p {
    max-width: var(--text-width-apparat);
    line-height: 1.1em;
}

.text-crit .del {
    color: var(--font-color);
    position: relative;
    display: inline-block;
    /* text-decoration: underline;
    text-decoration-color: var(--critic-deleted);
    text-decoration-thickness: 2px; */
}

.text-crit .del::before {
    content: '';
    border-bottom: 1px solid red;
    width: 100%;
    position: absolute;
    right: 0;
    top: 70%;
}

.text-crit .del .add {
    color: var(--critic-add);
    text-decoration: none;
    /*text-decoration-color: var(--critic-deleted);
    text-decoration-thickness: 2px; */
}

.krug-ms .text-crit .del .add::before {
    content: '';
    border-bottom: none;
}

.krug-ms .text-crit .add .del::before {
    content: '';
    border-bottom: 1px solid red;
    width: 100%;
    position: absolute;
    right: 0;
    top: 70%;
}

/* .text-crit .add {
    color: var(--font-color) !important;
    text-decoration: underline;
    text-decoration-color: var(--critic-add);
} */
/* Hide and Show selectors */
.reg,
.pb,
.emended_version,
.rdg,
.sic {
    display: none;
}

.corr {
    /* display: none; */
    color: gray;
    font-size: inherit;
}

.corr::before {
    content: "";
}

.corr::after {
    content: "";
}

.correct {
    color: var(--bkg-header-green);
    font-size: inherit;
}

.sic {
    display: none;
    color: #808080;
    font-size: inherit;
}

.sigle_print {
    font-size: .8rem;
    display: block;
}

.no_page_no {
    display: none;
}

.horizontal_line {
    display: flex;
    justify-content: center;
}

.krug-ms .horizontal_line {
    justify-content: left;
}

.hr,
.hr_s,
.hr_l {
    display: block;
}

.hr,
.ba_hr {
    text-indent: 0em;
}

.hr::after,
.ba_hr::after {
    content: "——————";
}

.hr_s,
.ba_hr_s {
    text-indent: 0em;
}

.hr_s::after,
.ba_hr_s::after {
    content: "———";
}

.hr_l,
.ba_hr_l {
    text-indent: 0em;
}

.hr_l::after,
.ba_hr_l::after {
    content: "———————————————";
}

.verse-sigle {
    display: inline-block;
    text-align: right;
    margin-right: .6em;
    font-size: .7rem;
    color: gray;
    width: 6em;
}

.krug-ms .verse-sigle {
    width: 13em;
}

.verse-diff {
    background-color: #D5CEC8;
}

ins {
    text-decoration: none;
    background-color: #D4E6F1;
}

del {
    text-decoration: none;
    background-color: #fbb6c2;
    color: var(--font-color);
}

.ed {
    /* border-top: 1px lightgray solid; */
}

.phoebus {
    border-top: 1px lightgray solid;
}

/* Modal-Box ******/
/* The Modal (background) */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 5%;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.7);
    /* Black w/ opacity */
}

/* Modal Inhalt Bild */
.modal-content {
    margin: auto;
    display: block;
    width: 100%;
    max-width: 400px;
}

/* Add Animation */
.modal-content {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0)
    }

    to {
        -webkit-transform: scale(1)
    }
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/* The Close Button */
.close-btn {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 3rem;
    font-weight: bold;
    transition: 0.3s;
}

.close-btn:hover,
.close-btn:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/** Ende Modal-Box **/

/* ZOOM IMAGES *****/
figure.zoom {
    margin-top: 1em;
    margin-bottom: 1em;
    background-position: 50% 50%;
    position: relative;
    width: 900px;
    overflow: hidden;
    cursor: zoom-in;
}

figure.zoom img:hover {
    opacity: 0;
}

figure.zoom img {
    transition: opacity 0.5s;
    display: block;
    width: 100%;
}

/** END ZOOM **/

/* FORMS *****/
form {
    font-family: var(--font-sans);
}

form legend {
    font-size: 1.1rem;
    margin-left: var(--abstand-links);
    padding-left: 1em;
    padding-right: 1em;
    /* padding-top: 1em; */
}

form .label {
    display: block;
    padding-top: 1em;
}

fieldset {
    padding: 1em;
}

fieldset h5,
fieldset h4,
fieldset h3 {
    font-family: var(--font-sans);
    text-align: left;
    margin-bottom: .5em;
}

fieldset p {
    padding-bottom: 1em;
}

fieldset ul li {
    margin-left: 1em;
    margin-bottom: .5em;
}

fieldset button {
    background-color: var(--bkg-header);
    color: white;
    width: 10em;
    height: 2em;
    margin-top: 1em;
}

input[type=button],
input[type=submit],
input[type=reset] {
    font-size: 1rem;
    background-color: var(--kleist-blau);
    border: none;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

input[type=text] {
    font-size: 1rem;
    border: #bbb 1px solid;
    width: 100%;
    margin-top: .3em;
    margin-bottom: .3em;
    padding: .3em;
}

select {
    width: 100%;
    height: 2em;
    border: 1px solid #bbb;
    padding-left: 1em;
    margin-bottom: .5em;
    /* padding:.75em 1em .5em 1em; */
    box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
    background-color: white;
    background-position: right;
    background-repeat: no-repeat;
}

#distance select {
    width: 20%;
}

select:hover {
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
}

input[type=checkbox],
input[type=radio] {
    vertical-align: middle;
    position: relative;
    bottom: 1px;
    margin-right: 3px;
    padding-top: .5em;
}

input[type=radio] {
    bottom: 2px;
}

.input-text-submit {
    font-size: .9rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 8em;
}

.input-text-submit>input[type=text] {
    height: 2em;
}

.input-text-submit>input[type=submit] {
    height: 1.9em;
    width: 3em;
}

span.klammer {
    display: block;
    margin-left: 13em;
    border-left: solid 1px;
    padding-left: 1em;
    font-size: inherit;
}

/* NAVIGATION *****/

/* Navigation Header */

header {
    font-family: var(--font-sans);
    background: var(--bkg-header);
    /* width: 100%; */
    /* height: var(--navbar-height); */
    /* padding-left: var(--abstand-links);
    padding-right: var(--abstand-rechts); */
    margin-top: 0em;
    /* padding-bottom: .5rem; */
}

span.menu {
    color: white;
}

nav>ul>li>a {
    color: white;
    cursor: pointer;
}

nav.subnav {
    font-family: var(--font-sans);
}

nav.subnav>ul>li {
    padding: .2em;
}

nav.subnav.level-1 {
    margin-bottom: .1em;
}

nav.subnav.level-2>ul {
    font-size: .9rem;
}

nav.subnav>ul>li>a {
    color: var(--kleist-blau);
}

nav.subnav>ul>li.is-active {
    background: white;
    border-bottom: solid 1px var(--kleist-blau);
}

a.logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 9999;
}

a.logo>img {
    width: 60px;
    padding-right: .5em;
    z-index: 9999;
}

a.logo>span.logo-text {
    color: white;
    font-size: 1.1rem;
    z-index: 9999;
}

/* NAVIGATION */
.navbar-left {
    display: none;
}

.navbar {
    /* display: none; */
    margin-left: var(--abstand-links);
    line-height: 2rem;
}

.navbar-mobile {
    display: none;
    margin-left: var(--abstand-links);
    line-height: 2rem;
}

.header-mobile {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.header-mobile>.menu {
    margin-left: auto;
    margin-right: 20px;
    cursor: pointer;
}

/* Elemente verbergen */
.text-navbars-desktop {
    display: none;
}

/* NAVIGATIONJ ENDE*/

/* Navigation Content */
.breadcrumb .fa-caret-right {
    margin-left: 1rem;
}

.breadcrumb>ul {
    display: flex;
    padding-top: .5em;
    padding-bottom: 1em;
    /* margin-left: var(--abstand-links); */
    font-family: var(--font-sans);
}

.breadcrumb>ul>li,
.text-version>ul>li {
    margin-right: 1em;
    font-size: .9rem;
}

.breadcrumb a.is-active {
    border-bottom: 1px solid;
}

.text-version {
    /* margin: auto; */
}

.text-version>ul {
    font-family: var(--font-sans);
    display: flex;
    margin-top: .5em;
    margin-bottom: 1em;
}

.text-version>ul>li.is-active {
    font-weight: 600;
    /* background-color: lightgray;
    padding: .1em; */
    border-bottom: 2px dotted var(--kleist-blau);
}

.text-operations {
    display: none;
    /* display: flex;
    flex-flow: column; */
    line-height: 1.6rem;
    margin: 1em;
    padding: .3em;
    margin-right: 2em;
    background: var(--bkg-very-lightgray);
    transition: all 1s ease-in-out;
}

.text-operations>li {
    /* margin-bottom: 1rem; */
    min-height: 2em;
    border-bottom: solid var(--kleist-blau) 1px;
}

.text-operations>li:hover {
    background: white;
}

.tabs-level-1 {
    color: var(--kleist-blau);
    margin-top: .5em;
    font-size: .9rem;
}

.tabs-level-2 {
    font-size: .9rem;
}

.text-operations-button {
    /* margin-left: 90%; */
    float: right;
    /* padding-right: 10px; */
    cursor: pointer;
    font-size: 1.5rem;
    opacity: .5;
}

.text-navbar-level-2-textlinguistic {
    display: none;
}

.scroll-topbottom {
    position: fixed;
    right: 10px;
    top: 60%;
    font-size: 1.7rem;
    opacity: 0.3;
}

.go-to-next-prev {
    position: fixed;
    right: 10px;
    top: 33%;
    font-size: 1.2rem;
    opacity: 0.3;
}

.go-to-next-prev li {
    padding-bottom: 1em;
}

.go-to-next-prev li:hover {
    cursor: pointer;
}

.navbar-view-top {
    line-height: 1.2rem;
}

.textversions_description {
    font-size: 1rem;
    line-height: 1.2rem;
    display: none;
}

.show_hide_textnav_description {
    cursor: pointer;
}

/* kleist-fonts *****/

.kleist_hs_einfuehrung .hdl_ghon,
.kleist_hs_einfuehrung .zitat_ghon,
.kleist_hs_einfuehrung .bsp1,
.kleist_hs_einfuehrung .abra,
.kleist_hs_einfuehrung .bsp_ghon,
.s5 {
    font-family: 'kleistghonorez';
}

.kleist_hs_einfuehrung .hdl_ghon,
.kleist_hs_einfuehrung .hdl_prinz {
    font-size: 2rem;
}

.kleist_hs_einfuehrung .hdl_prinz,
.kleist_hs_einfuehrung .zitat_prinz,
.kleist_hs_einfuehrung .bsp2,
.kleist_hs_einfuehrung .bsp3,
.kleist_hs_einfuehrung .bsp_prinz,
.s8 {
    font-family: 'kleistprinzwilhelm';
}

.kleist_hs_einfuehrung .s2 {
    font-family: sans-serif;
    font-size: 1.2rem;
}

.kleist_hs_einfuehrung .caption {
    font-family: sans-serif;
    font-size: 1rem;
    margin-left: 4ch;
}

.kleist_hs_einfuehrung h4 {
    font-size: 1.6rem;
}

/* Ende kleist-fonts ******/

/* APPARAT *****/

.kleist-apparat {
    font-family: var(--font-sans);
    line-height: 1.4em;
    margin-top: 4em;
    /* padding-left: var(--abstand-links); */
    /* padding-right: 20%; */
    padding-top: 2em;
    padding-bottom: 2em;
    /* background: var(--hellgrau); */
}

.kleist-apparat h2,
.kleist-apparat h3,
.kleist-apparat h4,
.kleist-apparat h5 {
    font-family: var(--font-sans);
    margin-left: 0em;
}

.kleist-apparat h2,
h3 {
    margin-top: 1em;
    margin-bottom: .2em;
}

.kleist-apparat h6 {
    margin-top: .5em;
    margin-bottom: .1em;
    margin-left: 0em;
}

.kleist-apparat p {
    margin-top: .5em;
}

.kleist-apparat h3,
h4,
h5 {
    padding-top: 1em;
    padding-bottom: .5em;
}

.kleist-apparat h6 {
    padding-top: .5em;
}

.kleist-apparat .hanging_indent {
    margin-top: 0;
}

.kleist-apparat_line_no {
    font-size: 1rem;
    padding-right: 1em;
}

.kleist-apparat .edit_note {
    display: inline;
}

.kleist-apparat a {
    color: #606c96;
}

.lemma_rdg {
    font-size: 1rem;
    padding-right: 1em;
    color: var(--kleist-blau);
    font-style: italic;
}

.lemma_rdg::after {
    content: "] ";
}

.edit_note {
    font-size: 1rem;
    display: none;
}

.krug-ms .edit_note {
    display: none;
    font-family: var(--font-sans);
    color: var(--grau);
    font-size: .9rem;
    line-height: 1.1rem;
    margin-left: 20ch;
    padding-right: 10em;
    margin-bottom: 1em;
}

.edit_note::before {
    content: " ["
}

.edit_note::after {
    content: "]"
}

.annotate {
    /* margin-bottom: .1em; */
}

.apparat_line_no {
    font-size: .8rem;
    padding-right: 1em;
}

.apparat_lemma {
    font-size: .9rem;
    padding-right: 1em;
    color: #808080;
    font-style: italic;
}

/**/

/* Person / Place */
p.title {
    font-family: var(--font-sans);
    font-size: 1.2rem;
    font-weight: 600;
}

/* LETTER *****/

.letter {
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.8em;
}

.letter p {
    text-indent: 3ch;
}

.firstprint.letter {
    font-family: var(--font-serif);
    /* font-size: 1rem; */
    line-height: 1.6rem;
}

.first-line-indent {
    text-indent: 3ch;
}

.letter_pagebreak {
    display: block;
    margin-top: 1em;
}

.letter_pagebreak_inline {
    display: inline;
    font-family: var(--font-sans);
    font-size: .8rem;
    font-weight: 600;
    color: var(--bkg-header-green-opac);
}

.letter_pagebreak_inline::before {
    margin-left: 1em;
}

.letter_pagebreak_inline::after {
    margin-right: 1em;
}

/* .pagebreak:after {
    content: "-----"
} */
/* Ersten Seitenumbruch nicht anzeigen */
.opener>p>.pagebreak {
    display: none;
}

.letter-konstituiert,
.letter-normalisiert,
.prosa,
.letter-ebook,
.firstprint-letter-ebook {
    max-width: 60ch;
}

.letter-ebook {
    /* padding-right: 20ch; */
}

/* Briefliste */
.list-letters {
    font-size: 1rem;
    line-height: 1.6rem;
}

.list-letters>ul {
    margin-top: 1em;
}

.list-letters>ul>li {
    margin-bottom: .7em;
}

.list-letters>ul>li>span {
    margin-right: .5em;
}

.list-letters>ul>li:first-child {
    font-style: italic;
    /* font-size: 1.2rem; */
}

.list-letters>ul>li>span:first-child {
    font-style: italic;
    margin-right: 1em;
}

/**/


/* DRAMA *****/

.drama .title_main {
    font-size: 1.4rem;
}

.drama .castItem {
    display: block;
    padding-top: .5em;
}

.drama .krug-ms .castItem .role_name {
    text-decoration: underline;
}

.drama .curly_braces {
    display: inline;
    float: none;
    border-left: none;
    text-indent: 0em;
    padding-left: 1em;
    padding-top: 0em;
    font-size: 1rem;
}

.drama .speech {
    display: block;
    margin-top: .7em;
}

.drama .speaker {
    display: block;
    text-align: center;
    letter-spacing: var(--drama-letterspacing);
    /* font-variant-ligatures: none; */
}

.drama span.stage_speaker {
    font-size: 1.1rem;
    letter-spacing: .1em;
}

.drama .speaker-stage-inline {
    display: block;
    text-align: center;
}

.drama .speaker-stage-inline>.speaker {
    margin-left: 0em;
}

.drama .speaker_ebook {
    display: inline;
    text-align: left;
    letter-spacing: var(--drama-letterspacing);
}

.krug-ms .speaker {
    text-decoration: underline;
    letter-spacing: normal;
    text-align: left;
    padding-left: 3em;
}

.drama .krug-ms .speaker-stage-inline {
    display: block;
    text-align: left;
}

.drama .verse {
    display: block;
}

.drama .verse_no {
    float: right;
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 10px;
    color: var(--grau);
    padding-left: .5em;
    letter-spacing: 0em;
}

.drama .verse_no_nth {
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 10px;
    color: var(--bkg-very-lightgray);
    padding-left: .5em;
    letter-spacing: 0em;
}

.drama .verse_marker:after {
    content: "|";
    font-size: .7rem;
    color: var(--bkg-very-lightgray);
    margin-left: .3em;
    margin-right: .3em;
}

.drama .verse_marker_100:after {
    content: "|";
    font-size: 1.2rem;
    color: var(--bkg-very-lightgray);
    margin-left: .3em;
    margin-right: .3em;
}

.drama .spaced_letters {
    letter-spacing: var(--drama-letterspacing);
}

.drama .spaced_letters_italic {
    letter-spacing: var(--drama-letterspacing);
    font-family: "Junicode-Italic";
    /*font-style: italic;*/
}

.drama .stage {
    display: block;
    width: 100%;
    text-align: center;
}

.drama .stage_inline {
    display: inline;
}

.drama .speaker_inline {
    display: inline;
}

.drama .horizontal_line {
    /* width: var(--drama-width-to-center); */
}

.drama.titlePage .horizontal_line {
    width: 100%;
}

.drama h3,
h4,
h5,
h5 {
    font-family: var(--font-serif);
    width: 100%;
}

.drama h3.head_act {
    text-align: center;
    letter-spacing: .2em;
    font-size: 1.5rem;
    padding-top: 2em;
    padding-bottom: .5em;
}

.drama .krug-ms h3.head_act {
    text-align: left;
    font-size: 1rem;
    padding-left: 3em;
    text-decoration: underline;
}

.drama h4.head_scene {
    text-align: center;
    letter-spacing: .2em;
    font-size: 1rem;
    padding-top: 2em;
    padding-bottom: .5em;
}

.drama .krug-ms h4.head_scene {
    text-align: left;
    letter-spacing: normal;
    font-size: 1.2rem;
    text-decoration: underline;
    margin-left: 0em;
    padding-left: 3em;
}

.drama .speaker.speaker_inline {
    width: 100%;
}

.drama.titlePage {
    width: 100%;
    text-align: center;
    margin-bottom: 3em;
}

.drama .horizontal_line {
    text-align: center;
}

.drama .krug-ms .horizontal_line {
    text-align: left;
    padding-left: 6em;
}

.pb_print_inline::before {
    content: " ["
}

.pb_print_inline::after {
    content: "] "
}

.pb_print_inline .no_page_no {
    display: none;
}

.kleist-apparat .genre-drama {
    max-width: var(--text-width-drama);
}

.drama .show_speeches>span {
    cursor: pointer;
}

/* KÄTHCHEN */
.drama .kaethchen {
    margin-right: 0em;
}

.drama .kaethchen .speaker,
.drama .kaethchen .speaker_inline {
    width: 100%;
    margin-left: 0em;
}

.drama .kaethchen .speaker,
.drama .kaethchen .stage,
.drama .kaethchen .speaker_inline,
.drama .kaethchen .stage_inline {
    text-align: center;
}

.drama .kaethchen .speaker_inline {
    margin-left: 2em !important;
}

.drama .kaethchen .stage,
.drama .kaethchen .stage_inline {
    font-size: .86rem;
}

.drama .kaethchen .stage_headline {
    font-size: .8rem;
}

.drama .kaethchen .stage_headline span.stage_speaker {
    font-size: 1.2rem !important;
    letter-spacing: 0em !important;
}

.drama .kaethchen .scene h1 {
    font-size: 1rem;
}

.drama .kaethchen .scene_desc {
    display: block;
    font-size: 0.9rem;
    line-height: 1.4em;
}

.drama .kaethchen h3.head_act,
.drama .kaethchen h4.head_scene {
    width: 100%;
}

.drama .kaethchen h3.head_act {
    font-size: 1.4rem;
}

.drama .kaethchen h4.head_scene {
    font-size: 1.2rem;
}

.drama .kaethchen .scene_before_headline {
    font-family: var(--font-serif);
    font-size: 0.9rem;
}

.drama .kaethchen .horizontal_line {
    width: 100%;
    text-align: center;
}

.drama .kaethchen .pb_print {
    margin-left: 0em;
}

.drama .castList_stage {
    display: block;
    text-align: center;
    margin-top: 1em;
}

.drama .kaethchen .verse_break {
    margin-left: 0em;
}

/* KÄTHCHEN ENDE *****/

/* KRUG ****/
.drama .krug {
    line-height: 1.5em;
}

.drama .krug .stage,
.drama .krug .stage_headline,
.drama .krug .stage_inline {
    font-size: .85rem;
}

.drama .krug .stage_headline {
    display: block;
    text-align: center;
}

.drama .krug .stage span.stage_speaker,
.drama .krug .stage_headline span.stage_speaker {
    font-size: 1.2rem !important;
}

.drama .krug .stage_headline span.stage_speaker {
    letter-spacing: 0em;
}

/* KRUG Ende ****/

/* SCHROFFENSTEIN *****/
.drama .schroffenstein {
    font-size: 1.25rem;
}

.drama .schroffenstein .speaker_inline {
    display: inline;
    text-align: center;
    margin-left: 0em !important;
}

.drama .schroffenstein .stage_center {
    display: block;
    font-size: 1.1rem;
    text-align: center;
}

.drama .schroffenstein .stage {
    font-size: 1.1rem;
    line-height: 1.5rem;
    margin-top: 1em;
}

.drama .schroffenstein .stage_inline {
    display: inline;
    margin-left: 0em;
    font-size: 1.1rem;
}

.drama .schroffenstein .stage_headline {
    display: block;
    font-size: 1.2rem;
    text-align: left;
    text-indent: 2em;
}

.drama .schroffenstein .verse_break {
    margin-left: 0em;
}

.drama .schroffenstein .verse_lyrics {
    padding-left: 1em;
}

.drama .schroffenstein .pb_print {
    margin-top: 5em;
    margin-bottom: 1em;
}

.drama .schroffenstein .page_no_ba::before {
    content: "— ";
}

.drama .schroffenstein .page_no_ba::after {
    content: " —";
}

.drama .schroffenstein .align_page_no::before {
    content: "— ";
}

.drama .schroffenstein .align_page_no::after {
    content: " —";
}

.drama .schroffenstein .facsimile {
    display: inline;
    margin-left: 4em;
}

.drama .schroffenstein .sic {
    font-size: inherit;
}

/* SCHROFFENSTEIN ENDE ****+/


/* HERRMANNSSCHLACHT *****/
/* .titleFront.drama.herrmannsschlacht .titlePart {
    font-size: 160%;
} */
.drama .herrmannsschlacht {
    font-size: 1.25rem;
}

.drama .herrmannsschlacht h3.head_act {
    font-size: 1.5rem;
    font-weight: 600;
}

.drama .herrmannsschlacht .speaker_inline {
    display: inline;
    text-align: center;
    margin-left: 0em;
}

.drama .herrmannsschlacht .stage_center {
    display: block;
    font-size: 1rem;
    text-align: center;
    line-height: 1.5rem;
}

.drama .herrmannsschlacht .stage {
    font-size: 1rem;
    line-height: 1.5rem;
    margin-top: 1em;
}

.drama .herrmannsschlacht .stage_inline {
    display: inline;
    margin-left: 0em;
    font-size: 1rem;
}

.drama .herrmannsschlacht .stage_headline {
    display: block;
    font-size: 1.25rem;
    text-align: center;
    text-indent: 2em;
}

.drama .herrmannsschlacht .stage_act {
    display: block;
    font-size: 1.2rem;
    text-align: center;
    text-indent: 2em;
}

.drama .herrmannsschlacht .verse_break {
    margin-left: 0em;
}

.drama .herrmannsschlacht .verse_lyrics {
    padding-left: 1em;
}

.drama .herrmannsschlacht .pb_print {
    margin-top: 5em;
    margin-bottom: 1em;
}

.drama .herrmannsschlacht .page_no_ba::before {
    content: "— ";
}

.drama .herrmannsschlacht .page_no_ba::after {
    content: " —";
}

.drama .herrmannsschlacht .align_page_no::before {
    content: "— ";
}

.drama .herrmannsschlacht .align_page_no::after {
    content: " —";
}

.drama .herrmannsschlacht .facsimile {
    display: inline;
    margin-left: 4em;
}

.drama .herrmannsschlacht .sic {
    font-size: inherit;
}

.drama .herrmannsschlacht .small {
    font-size: 1rem;
}

.drama .herrmannsschlacht span.initial {
    font-size: 1.6rem !important;
}

.drama .herrmannsschlacht .hr::after {
    content: "———————————————————————";
}

/* HERRMANNSSCHLACHT ENDE ****+/

/* KRUG HANDSCHRIFT ******/
.drama .krug-ms {
    font-family: var(--font-serif);
    /*margin-left: -4em;*/
}

.drama .krug-ms .inbetween {
    /* font-size: .9em; */
}

.drama .krug-ms .speaker_inline {
    display: inline;
    text-align: left;
    padding-left: 3em;
}

.drama .krug-ms .stage_center {
    display: block;
    font-size: 1rem;
    text-align: center;
    width: var(--drama-width-to-center);
    /* margin-left: -5em; */
}

.drama .krug-ms .stage {
    font-size: 1.2rem;
    margin-top: 1em;
}

.drama .krug-ms .stage_inline {
    display: inline;
    margin-left: 0em;
    font-size: 1.2rem;
}

.drama .krug-ms .stage_headline {
    display: block;
    font-size: 1rem;
    text-align: left;
    text-indent: 2em;
}

.drama .krug-ms .verse_part_I {
    padding-left: 0em;
}

.drama .krug-ms .verse_part_M {
    padding-left: 10ch;
}

.drama .krug-ms .verse_part_N {
    padding-left: 14ch;
}

.drama .krug-ms .verse_part_F {
    padding-left: 20ch;
}

.drama .krug-ms .verse_break {
    margin-left: 0em;
}

.krug-ms .btn.show-text-crit {
    border: none;
    background: none;
}


/* SHORT STORY *****/

.short_story>h3 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    margin-bottom: 1em;
    padding-right: 2em;
}

.short_story>p {
    margin-bottom: .5em;
    text-indent: 2em;
}

/* SHORT STORY ENDE *****/

/* CHARTS, DIAGRAMME *****/
/*  Sunburst-Chart */
#statistics_drama {
    font-family: var(--font-sans);
}

#statistics_drama .slice {
    cursor: pointer;
}

#statistics_drama .slice .main-arc {
    stroke: #fff;
    stroke-width: 1px;
}

#statistics_drama .slice .hidden-arc {
    fill: none;
}

#statistics_drama .slice text {
    pointer-events: none;
    dominant-baseline: middle;
    text-anchor: middle;
}

#statistics_drama rect+text {
    font-size: 1rem !important;
}

/* Narrative Chart */
#narrative_chart {
    font-family: var(--font-sans);
}

#narrative_chart rect {
    fill: none;
    stroke: #000;
}

#narrative_chart path {
    fill: none;
    stroke-width: 2;
    stroke: #333;
}

#narrative_chart path.light {
    stroke: #3c6da8;
}

#narrative_chart path.dark {
    stroke: #df2929;
}

#narrative_chart path.green {
    stroke: #69A954;
}

#narrative_chart path.lila {
    stroke: #8970A4;
}

#narrative_chart path.yellow {
    stroke: #C8C163;
}

#narrative_chart path.darkgreen {
    stroke: #458A2F;
}

#narrative_chart .intro text:first-child {
    fill: #fff;
    stroke: #f9f9f9;
    stroke-width: 3;
}

#narrative_chart .intro text+text {
    fill: #333;
}

#narrative_chart .intro text+text.dark {
    fill: #df2929;
}

#narrative_chart .intro text+text.light {
    fill: #3c6da8;
}

#narrative_chart .intro text+text.green {
    fill: #69A954;
}

#narrative_chart .intro text+text.lila {
    fill: #8970A4;
}

#narrative_chart .intro text+text.yellow {
    fill: #C8C163;
}

#narrative_chart .intro text+text.darkgreen {
    fill: #458A2F;
}

/* CHARTS ENDE *****/


/* BERLINER ABENDBLÄTTER *****/

.abendblaetter .section.content h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-serif);
    text-align: center;
}

.abendblaetter .ba_subhead {
    text-indent: 0em;
}

.abendblaetter .horizontal_line,
.hr,
.hr_s,
.hr_l,
.ba_hr,
.ba_hr_s,
.ba_hr_l {
    display: flex;
    justify-content: center;
    margin-left: var(--ba-hr-negativ-einzug)
}

.abendblaetter .ba_header {
    text-align: center;
}

.abendblaetter .ba_article h3 {
    text-align: center;
    padding-right: 0em;
    font-size: 1.55rem;
}

.abendblaetter .ba_header a.facsimile {
    margin-left: 0em;
}

/* Font-Sizes */
.abendblaetter .ba_header h1.ba_head {
    font-family: var(--font-serif);
    font-size: 1.7rem;
    line-height: 2rem;
}

.abendblaetter h1.ba_head {
    letter-spacing: -.01em;
}

.abendblaetter h2 {
    font-size: 1.5rem;
}

.abendblaetter h3 {
    font-size: 1.2rem;
}

.abendblaetter h4 {
    font-size: 1.1rem;
}

.abendblaetter p {
    text-indent: 2em;
    font-size: 1.3rem;
    line-height: 1.7rem;
}

.abendblaetter p.ba_copy_m {
    font-size: 1.2rem;
    line-height: 1.4rem;
}

.abendblaetter p.ba_copy_s {
    font-size: 1rem;
    line-height: 1.2rem;
}

.abendblaetter .ba_copy_s_narrow {
    font-size: 1rem;
    line-height: 1rem;
}

.abendblaetter .ba_subline_center,
.ba_subline_right {
    font-size: 1rem !important;
    line-height: 1.2rem;
}

.abendblaetter p.negativ_indent {
    margin-left: 2ch;
    text-indent: -2ch !important;
    margin-top: .3em;
}

/**/
.abendblaetter .ba_subline_right {
    text-align: right;
}

.abendblaetter .ba_subline_center {
    text-align: center;
    margin-left: var(--ba-headline-negativ-einzug);
}

p.ba_subline_center {
    text-indent: 0em;
}

.abendblaetter a.facsimile {
    margin-left: 4em;
}

.abendblaetter a.facsimile>.fa {
    columns: var(--kleist-blau);
}

.abendblaetter .pb_print {
    display: block;
    text-align: center;
}

.abendblaetter .ba_letter_spacing {
    letter-spacing: 0.14em;
    margin-left: .2rem;
}

.abendblaetter .ba_letter_spacing_strong {
    letter-spacing: 0.3em;
}

.abendblaetter .sigle_print {
    text-align: center;
    font-size: 1.3rem;
}

.kleist-apparat .genre-ba {
    padding-left: 2em;
    padding-right: 2em;
}

.abendblaetter .ba_autorsigle {
    font-family: var(--font-sans);
    font-style: italic;
    font-size: 100%;
}

/*** ENDE BERLINER ABENDBLÄTTER ***/

/* Phöbus */
/** Titelseite **/
.ph-titelseite {
    text-align: center;
    margin-top: 3em;
}

.ph-titel {
    font-size: 2rem;
    letter-spacing: 1em;
}

.ph-untertitel {
    display: block;
    font-size: 1.3rem;
    letter-spacing: .5em;
    padding-bottom: 2em;
}

.ph-ort,
.ph-small-spaced {
    display: block;
    line-height: 2em;
    font-size: .9rem;
    letter-spacing: .7em;
}

.ph-hrsg {
    display: block;
    font-size: 1.3rem;
    font-family: "Junicode-Italic";
    /*font-style: italic;*/
    letter-spacing: 0.1em;
}

.ph-jahrgang {
    display: block;
    font-size: 1.3rem;
    letter-spacing: .3em;
    padding-bottom: 2em;
}

.ph-jahrgang-zusatz {
    /*font-style: italic;*/
    letter-spacing: .3em;
}

.ph-heft {
    display: block;
    font-size: 1.3rem;
    font-family: "Junicode-Italic";
    /*font-style: italic;*/
    letter-spacing: .3em;
}

.ph-verlag {
    display: block;
    font-size: .9rem;
    letter-spacing: .5em;
    font-family: "Junicode-Italic";
    /*font-style: italic;*/
    padding-bottom: 4em;
}

.no_spacing {
    letter-spacing: .1em;
}

/** Ende Titelseite **/
/** ph-Inhaltsverzeichnis **/
.ph-article-list,
.ph-article-list h3 {
    font-family: var(--font-sans);
    text-align: left;
    margin-top: 2em;
}

.ph-inhalt {
    font-size: 1rem;
    font-weight: 400;
    padding-top: 2em;
    padding-bottom: 1em;
    color: var(--font-color);
}

ul.ph-articles li {
    padding-top: 1em;
    padding-bottom: .5em;
}

.ph-author-name {
    display: block;
}

.ph-signature {
    text-align: right;
    padding-right: 2em;
    font-size: 1.2rem;
}

.ph-article-link {
    display: block;
}

/** ph-Inhaltsverzeichnis **/

/** Phöbus Artikel **/
.phoebus_article {
    font-size: 1.07rem;
}

.phoebus_article h3 {
    letter-spacing: .3em;
    font-size: 1.2rem;
}

.phoebus_copy_small {
    font-size: .85rem;
    line-height: 1.7rem;
}

/** phoebus_poetics **/
.phoebus_poetics .castItem {
    display: block;
    padding-top: .5em;
}

.phoebus_poetics .castItem .role_name {
    text-decoration: underline;
}

.phoebus_poetics h4 {
    font-size: 1.4rem;
}

.phoebus_poetics .speech {
    display: block;
}

.phoebus_poetics.phoebus_poetics_lese_I .speech,
.phoebus_poetics.phoebus_poetics_lese_II .speech {
    text-indent: 0em;
    margin-left: 0em;
}

.phoebus_poetics .strophe {
    text-indent: -1em;
    margin-left: 1em;
    margin-bottom: 1em;
}

.phoebus_poetics .speaker,
.phoebus_poetics .speaker_ebook {
    font-family: "Junicode-Italic";
    /*font-style: italic;*/
    letter-spacing: .2em;
    margin-right: .5em;
}

.phoebus_poetics .speaker.speaker_inline {
    margin-right: 0em;
}

.phoebus_poetics .stage_inline {
    margin-right: .5em;
}

.phoebus_poetics .castList {
    padding-left: 4em;
}

.phoebus_poetics .spaced_letters_italic {
    font-family: "Junicode-Italic";
    /*font-style: italic;*/
    letter-spacing: .1em;
}

.phoebus_poetics .spaced_letters_strong_italic {
    font-family: "Junicode-Italic";
    /*font-style: italic;*/
    letter-spacing: .3em;
}

.phoebus_poetics .spaced_letters {
    letter-spacing: .12em;
}

.phoebus_poetics .stage {
    display: block;
    font-size: 1.06rem;
}

.phoebus_poetics.phoebus_poetics_lese_I .stage {
    margin-left: 0em;
    text-indent: 0em;
}

.phoebus_poetics .stage_inline {
    font-size: 1.06rem;
}

.phoebus_poetics h2 {
    padding-top: .5em;
}

/** Ende phoebus_poetics **/
.phoebus_poetics.ph_prolog {
    font-size: 1.3rem;
    font-family: "Junicode-Italic";
    /*font-style: italic;*/
}

.phoebus_poetics.ph_prolog h3 {
    letter-spacing: 1em;
}

.phoebus_poetics.ph_prolog .closer {
    text-align: right;
    padding-right: 8em;
}

/* Ende Phöbus */

/* PROSA sonstige */

.prosa {
    font-size: 1.25rem;
}

.prosa p {
    line-height: 1.8rem;
}

.prosa h3 {
    font-size: 1.4rem;
    text-align: left;
    margin-left: 0em;
}

/* Ende PROSA sonstige */

/* EDITION TEXTE ****/
.edition h2,
.edition h3,
.edition h4,
.edition h5 {
    font-family: var(--font-sans);
    font-weight: 600;
    text-align: left;
    margin-left: 0em;
}

.edition p {
    margin-top: 1em;
}

.edition a {
    text-decoration-color: var(--kleist-blau);
    text-decoration-line: underline;
}

.edition ul {
    list-style: circle;
}

.edition img {
    border: 1px solid;
    padding: 0.3rem;
}

/* Landing-Page ****/
.landing-page {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    line-height: 2rem;
}

.landing-page .hero-text {
    font-size: 1.5rem;
    line-height: 2rem;
}

.landing-page h3,
.landing-page h5 {
    font-family: var(--font-sans);
    color: var(--kleist-blau);
    text-align: left;
    margin-left: 0em;
}

.landing-page h3 {
    font-size: 1.6rem;
    margin-left: 0em;
}

.landing-page p {
    padding-bottom: 1rem;
}

.landing-page .accent,
.edition .accent {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 80%;
    letter-spacing: .2rem;
    color: var(--kleist-blau);
}

.landing-page ul {
    list-style-type: square;
    margin-bottom: 2rem;
}

.landing-page ul li {
    margin-left: 2ch;
}

.landing-page a {
    text-decoration: none;
}

.arrow {
    border: solid var(--kleist-blau);
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    /* border-bottom: 1px dotted black; */
    /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    font-family: var(--font-sans);
    font-size: 90%;
    visibility: hidden;
    width: 200px;
    top: 100%;
    left: 50%;
    margin-left: -100px;
    background-color: var(--hellgrau);
    /* color: #fff; */
    /* text-align: center; */
    padding: 5px;
    border: 1px solid var(--kleist-blau);
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

.arrow-button {
    position: fixed;
    bottom: 50px;
    right: 10px;
    width: 20px;
    height: 30px;
    background-color: var(--kleist-blau);
    color: #fff;
    border: none;
    border-radius: 30%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    opacity: 0.3;
    align-items: center;
    justify-content: center;
}

#panel_mobile {
    position: fixed;
    top: 0;
    right: -70%;
    /* Initially hidden to the right */
    width: 70%;
    height: 100%;
    background-color: #d0cece;
    transition: right 0.3s ease-in-out;
    /* Smooth panel animation */
    z-index: 1;
    padding: 20px;
    padding-top: 3rem;
    font-size: 120%;
    line-height: 2em;
}

.doc-navbar-mobile>.operation-panel-more-options>ul>div>h5 {
    font-size: 120%;
    text-align: left;
}

.doc-navbar-mobile>.operation-panel-more-options a span {
    line-height: 1.3em;
    margin-bottom: 1em;
    display: block;
    font-size: 100%;
}

/* MEDIA QUERIES *****/
@media screen and (max-width: 420px) {

    /* Käthchen (nur??) */
    .drama .kaethchen .verse_part_I {
        padding-left: 0em !important;
        margin-left: 0em !important;
    }

    .drama .kaethchen .verse_part_M {
        padding-left: 0em !important;
        margin-left: 0em !important;
    }

    .drama .kaethchen .verse_part_F {
        padding-left: 0em !important;
        margin-left: 0em !important;
    }

    /* Käthchen Ende */

    /* Schroffenstein */
    .drama .schroffenstein .verse_part_I {
        padding-left: 0em !important;
    }

    .drama .schroffenstein .verse_part_M {
        padding-left: 2em !important;
    }

    .drama .schroffenstein .verse_part_N {
        padding-left: 2em !important;
    }

    .drama .schroffenstein .verse_part_F {
        padding-left: 4em !important;
    }

    .drama .schroffenstein .verse-rdg::after {

        /* Verstrenner wird durch xquery erledigt */
        /* content: " |";
        font-size: 10px;
        vertical-align: 4px;
        color: var(--grau); */
    }

    /* Schroffenstein Ende */

    /* Herrmannsschlacht */
    .drama .herrmannsschlacht .verse_part_I {
        padding-left: 0em !important;
    }

    .drama .herrmannsschlacht .verse_part_M {
        padding-left: 2em !important;
    }

    .drama .herrmannsschlacht .verse_part_N {
        padding-left: 2em !important;
    }

    .drama .herrmannsschlacht .verse_part_F {
        padding-left: 4em !important;
    }

    .drama .herrmannsschlacht .verse-rdg::after {
        /* Verstrenner wird durch xquery erledigt */
        /* content: " |";
        font-size: 10px;
        vertical-align: 4px;
        color: var(--grau); */
    }

    /* Herrmannsschlacht Ende */

    /* Krug */
    .drama .krug .verse_part_I {
        padding-left: 0em !important;
    }

    .drama .krug .verse_part_M {
        padding-left: 2em !important;
    }

    .drama .krug .verse_part_N {
        padding-left: 2em !important;
    }

    .drama .krug .verse_part_F {
        padding-left: 4em !important;
    }

    .drama .krug .verse-rdg::after {
        /* Verstrenner wird durch xquery erledigt */
        /* content: " |";
        font-size: 10px;
        vertical-align: 4px;
        color: var(--grau); */
    }

    /* Krug Ende */

    /* Phoebus */
    .phoebus_poetics .castList {
        padding-left: 0em;
    }

    .phoebus_poetics .verse-rdg,
    .phoebus_poetics .speaker {
        font-size: 1.3rem;
    }

    /* Phoebus Ende */
}

/* Smartphone Landscape, Tablet Portrait */
@media screen and (min-width: 768px) {
    .kleist-portrait {
        margin-left: 0em;
        margin-right: 0em;
    }

    .nav-content-wrapper {
        min-width: 600px;
    }

    .text-version .hide_on_mobile {
        display: block;
    }
}

@media screen and (min-width: 1024px) {
    :root {
        /* --abstand-links: 2rem;
        --abstand-rechts: 1rem; */
        --width-content: 1004px;
    }

    .page-wrapper {
        margin: 0 auto;
        /* min-height: 100vh;
        flex-direction: column;
        justify-content: space-between; */
    }

    .landing-page {
        margin-right: 4em;
    }

    .landing-page .hero-text {
        font-size: 1.8rem;
        line-height: 2.5rem;
    }

    /* Landing-Page Grid-Layout */
    body.landing {
        font-family: var(--font-serif);
    }

    .grid-wrapper {
        background-image: url("/static/images/kd-background-image.jpg");
        background-repeat: repeat;
        background-size: cover;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 20px;
        padding: 1em;
        /* background-color: var(--bkg-color); */
        color: var(--kleist-blau);
        min-width: 1004px;
        max-width: 1004px;
    }

    .grid-wrapper div::before {
        /* content: ""; */
        /* padding-bottom: 100%; */
        display: inline-block;
        vertical-align: top;
    }

    .grid-wrapper .box {
        border-radius: 5px;
        padding: 20px;
        font-size: 1.2rem;
        line-height: 1.5rem;
        background-color: var(--bkg-color-opac);
    }

    .box .logo-text {
        font-family: var(--font-sans);
    }

    .box .important {
        font-family: var(--font-sans);
        font-size: .9rem;
    }

    .box span.versal {
        font-family: var(--font-sans);
        text-transform: uppercase;
        font-size: .9rem;
        color: var(--kleist-blau);
    }

    .box p>a {
        display: block;
        color: #610B0B;
        font-family: var(--font-sans);
        font-size: .9rem;
        text-decoration: underline;
    }

    .box.empty {
        background-color: transparent;
    }

    .box.a {
        grid-row: 1 / span 2;
    }

    .box.b,
    .box.f,
    .box.h {
        background-color: var(--bkg-header-opac);
        color: var(--bkg-color);
    }

    .box.c,
    .box.o {
        background-color: var(--bkg-header-lila-opac);
        color: var(--bkg-color);
    }

    .box.d {
        /* background-color: var(--bkg-header-green); */
    }

    .box.e,
    .box.k {
        background-color: var(--bkg-header-green-opac);
    }

    .box.p {
        grid-column: 1 / span 3;
    }

    /* Ende Landing-Page Grid-Layout */

    .hide_on_desktop {
        display: none;
    }

    .hide_on_mobile {
        display: block;
    }

    .nav-content-wrapper {
        /* display: flex; */
    }

    .nav-content-wrapper {
        min-width: var(--media_tablet_1024);
        max-width: var(--media_tablet_1024);
        margin: 0em;
    }

    /* Sidebar */
    .navbar-left {
        display: block;
        /* flex: 0 0 auto; */
        position: fixed;
        height: 100%;
        width: var(--navbar-left-width);
        /* z-index: 9999; */
        top: 0;
        left: auto;
        background-color: var(--bkg-header);
        /* background-color:var(--bkg-color); */
        overflow-x: hidden;
        font-family: var(--font-sans);
        -ms-overflow-style: none;
        scrollbar-width: none;
        border-right: var(--kleist-blau) 2px solid;
    }

    .navbar-left::-webkit-scrollbar {
        display: none;
    }

    .navbar-left a {
        /* padding: 6px 8px 6px 16px; */
        text-decoration: none;
        color: white;
        /* color:var(--font-color); */
        display: block;
    }

    .navbar-left a:hover {
        color: var(--kleist-blau);
    }

    .hr-navbar {
        /* border: 3px solid white; */
        border: 1px solid var(--kleist-blau);
    }

    .nav-edition {
        margin-top: var(--abstand-links);
        margin-left: 10px;
        margin-bottom: 3em;
    }

    .doc-navbar {
        margin-top: 1.5em;
        margin-left: 10px;
    }

    .nav-edition>li,
    .doc-navbar li {
        padding-top: 10px;
    }

    .textversions_description {
        margin-right: 30ch;
    }

    .content-wrapper {
        /* flex: 1 1 auto; */
        /* margin: auto; */
        min-height: 54vh;
        /* Hack, um Footer unten auf der Seite zu haben */
        padding-left: var(--navbar-left-width-plus-margin);
        /* padding-left: var(--abstand-links); */
        padding-bottom: 1em;
        /* min-width: var(--width-content);
        max-width: var(--width-content); */
    }

    .content {
        padding-top: 20px;
        padding-right: 10px;
        /* padding-left: var(--abstand-links); */
    }

    footer {
        /* width: 100%; */
        min-width: var(--media_tablet_1024);
        max-width: var(--media_tablet_1024);
    }

    footer.footer-landingpage {
        margin-left: 3px;
    }

    .footer-main {
        padding-left: var(--navbar-left-width-plus-margin);
        /* grid-template-columns: 1fr 1fr 1fr; */
        /* display: flex;
        flex-direction: row;
        flex-flow: nowrap;
        justify-content: space-between; */
        /* padding-left: 250px; */
        font-size: .95rem;
        /* margin-left: var(--abstand-links); */
        /*  min-width: 1024px;
        max-width: 1004px; */
    }

    .footer-impressum {
        padding-left: var(--navbar-left-width-plus-margin);
        /* padding-left: 250px; */
    }

    footer.footer-landingpage .footer-content {
        margin-left: 1em;
    }

    .footer-part {
        padding-right: 1.5em;
    }

    footer.footer-landingpage .footer-part {
        padding-right: 5em;
    }

    /* Sidebar Ende */

    /* LAYOUT */

    .list {
        line-height: 1.9rem;
    }

    /* LAYOUT ENDE */

    /* Form */
    fieldset {
        margin-right: 5rem;
    }

    div.response {
        margin-right: 5rem;
    }

    /* Pagebreaks */
    .pagebreak {
        display: block;
        margin-top: 1em;
        margin-bottom: 1em;
        background: var(--bkg-color);
        margin-left: -1em;
        margin-right: -1em;
        border: .5em solid var(--bkg-color);
        box-shadow: 2 2px 3px var(--bkg-color);
    }

    .pagebreak_firstprint {
        margin-left: -1em;
        margin-right: -1em;
        border-top: .5em solid var(--bkg-color);
    }

    .pb_firstprint {
        margin-left: 1em;
    }

    .letter_pagebreak {
        margin-left: 20ch;
    }

    /* Pagebreaks Ende */

    /* NAVIGATION HEADER */
    .navbar-mobile {
        display: none;
    }

    header {
        display: none;
        /* dispilay: flex;
        flex-direction: row;
        align-tems: center; */
        /* padding-left: var(--abstand-links);
        padding-right: var(--abstand-rechts); */
    }

    span.menu {
        display: none;
    }

    nav>ul {
        display: flex;
        flex-direction: row;
    }

    nav>ul>li {
        margin-right: 2em;
    }

    .navbar {
        margin-left: auto;
    }

    .navbar>ul>li>a {
        text-transform: uppercase;
    }

    /* Navigation Ende */

    /* GUI Elemente */
    .palette_text_nav {
        /* position: fixed;
        right: var(--abstand-rechts);
        top: 30%; */
        font-family: var(--font-sans);
        font-size: 1rem;
        padding: .3em;
        padding-top: 2em;
        /* background-color: lightgray; */
        border-top: var(--kleist-blau) solid 3px;
        /* opacity: 0.5; */
    }

    .operations-panel {
        position: fixed;
        width: 160px !important;
        /* right: var(--abstand-rechts); */
        right: 150px;
        top: 20%;
        font-family: var(--font-sans);
        font-size: .9rem;
        padding: .3em;
        background-color: lightgray;
        border: #666 solid 1px;
        opacity: 0.5;
    }

    .operation-panel-more-options {
        /* margin-top: 1em; */
        padding-right: 1em;
    }

    .more-options {
        display: flex;
        flex-direction: column;
    }

    .more-options div {
        margin-top: 1em;
    }

    .more-options select {
        padding: .4em;
        background-color: var(--bkg-color);
        font-size: 90%;
    }

    /* GUI Ende */

    /* APPARAT EDITORIAL */
    .lemma_rdg {
        font-size: .9rem;
        padding-right: 1em;
        color: var(--kleist-blau);
        font-style: italic;
    }

    .edit_note {
        font-size: .9rem;
    }

    div.people_places {
        display: flex;
        justify-content: space-between;
        margin-top: 1em;
    }

    .kleist-apparat.genre-story {
        padding-right: 12em;
    }

    .kleist-apparat.genre-letter,
    .kleist-apparat.genre-letter_firstprint,
    .kleist-apparat.genre-prosa {
        padding-right: 6em;
    }

    .kleist-apparat.genre-drama {
        /* padding-left: 5em; */
        padding-right: 15em;
        /* line-height: 1.7em; */
    }

    .kleist-apparat h2,
    .kleist-apparat h3,
    .kleist-apparat h4,
    .kleist-apparat h5,
    .kleist-apparat h6 {
        text-align: left;
    }

    .kleist-apparat h4 {
        margin-top: 1em;
    }

    /* APPARAT EDIT ENDE */

    /* Anzeige Faksimile Modal */
    .modal-content {
        margin: auto;
        display: block;
        width: 100%;
        max-width: 100%;
        padding-left: var(--navbar-left-width);
    }

    /* Ende Modal */

    /* Mapbox */
    #map {
        height: 300px;
        /* position: absolute; 
        top: 0; 
        bottom: 0; 
        width: 100%; */
    }

    /* Person / Place TABLE */

    .table {
        table-layout: fixed;
        font-family: var(--font-sans);
        margin-top: 1em;
    }

    th h2,
    th h3,
    th h4,
    th h5,
    th h6 {
        font-family: var(--font-sans);
        text-align: left;
    }

    .table tr {
        line-height: 1.7em;
        vertical-align: top;
    }

    thead tr th:first-child,
    tbody tr td:first-child {
        width: 300px;
        min-width: 300px;
        max-width: 300px;
        word-break: normal;
        /* text-transform: uppercase; */
        /* font-size: .9rem; */
    }

    .person-refs thead tr th:first-child,
    .person-refs tbody tr td:first-child {
        width: 500px;
        min-width: 500px;
        max-width: 500px;
        word-break: break-all;
    }

    .person-refs tbody tr td:first-child {
        text-transform: none;
        font-size: .9rem;
    }

    .place-refs thead tr th:first-child,
    .place-refs tbody tr td:first-child {
        width: 500px;
        min-width: 500px;
        max-width: 500px;
        word-break: break-all;
    }

    .place-refs tbody tr td:first-child {
        text-transform: none;
        font-size: .9rem;
    }

    /* Letter */
    .letter {
        font-size: 1.2rem;
        line-height: 2rem;
    }

    .firstprint.letter {
        font-family: var(--font-serif);
        /* font-size: 1rem; */
        line-height: 1.7rem;
        /* width: 48rem; */
    }

    .list-letters>ul {
        display: table;
    }

    .list-letters>ul>li {
        display: table-row;
    }

    .list-letters>ul>li>span {
        display: table-cell;
        padding-right: .3em;
        padding-bottom: .5em;
    }

    .letter_no {
        width: 6%;
    }

    .letter_date {
        width: 22%;
    }

    .letter_place {
        width: 22%;
    }

    .letter_addressee {
        width: 50%;
    }

    .kleist-apparat.genre-letter_text_crit {
        padding-right: 10ch;
    }

    /* Letter Ende */

    /* Drama */

    .drama {
        /* width: var(--width-768); */
        line-height: 2.3rem;
    }

    .drama.titlePage {
        width: var(--drama-width-to-center);
        margin-left: var(--abstand-links);
    }

    .drama .castList {
        line-height: 1.6rem;
    }

    .drama .speaker .speaker_inline {
        width: var(--drama-width-to-center);
    }

    .drama .speaker_ebook.speaker_inline {
        width: var(--drama-width-to-center);
        margin-left: 0em !important;
    }

    .drama .stage-italic {
        font-style: italic;
    }

    .drama .verse {
        display: block;
    }

    .drama .verse_no {
        margin-right: 3px;
        text-align: right;
    }

    .drama .verse_no_nth {
        float: none;
        color: var(--bkg-very-lightgray);
        padding-left: .5em;
    }

    /* .drama .verse_part_I {
        padding-left: 0em;
    }
    .drama .verse_part_M {
        padding-left: 5em;
    }
    .drama .verse_part_N {
        padding-left: 6em;
    }
    .drama .verse_part_F {
        padding-left: 9em;
    } */

    .drama a.facsimile {
        margin-left: 30em;
    }

    .drama .krug-ms a.facsimile {
        display: none;
    }

    .drama .krug-ms .pb_print {
        font-size: 1rem;
        justify-content: left;
        padding-left: 3rem;
    }

    span.klammer {
        margin-left: 16em;
    }

    /* Drama Ende */

    /* Käthchen */
    :root {
        --margin-right-kaethchen: 80px;
    }

    .drama .kaethchen {
        margin-right: var(--margin-right-kaethchen);
    }

    .kaethchen .castList {
        margin-right: var(--margin-right-kaethchen);
    }

    .drama .kaethchen .speaker {
        text-align: left;
        padding-left: 5em;
    }

    .drama .kaethchen .stage {
        text-align: left;
        /* padding-left: 6em; */
    }

    .drama .kaethchen .speaker.speaker_inline {
        text-align: left;
        padding-left: 2em !important;
        margin-left: 0em !important;
    }

    .drama .kaethchen .facsimile {
        margin-left: 0em;
        padding-left: 1em;
    }

    .drama .castList_stage {
        width: var(--drama-width-to-center);
    }

    .drama .kaethchen .verse_break {
        margin-left: 10em;
    }

    .drama .kaethchen .pb_print {
        justify-content: left;
        margin-left: 0em;
    }

    .drama .kaethchen .pb_print .page_no_right {
        margin-left: 24em;
    }

    .drama .kaethchen .catchword {
        margin-left: 17em !important;
    }

    .drama .kaethchen .verse_part_I {
        padding-left: 0em;
    }

    .drama .kaethchen .verse_part_M {
        padding-left: 0em;
    }

    .drama .kaethchen .verse_part_N {
        padding-left: 0em;
    }

    .drama .kaethchen .verse_part_F {
        padding-left: 0em;
    }

    /* Käthchen Ende */

    /* KRUG ****/

    .drama .krug {
        margin-right: 200px;
    }

    .drama .krug .speaker {
        /* text-align: left;
        margin-left: 8em; */
    }

    /* Für optisch bessere Zentrierung der Sprecher */
    .drama .krug .speaker,
    .drama .krug .speaker-stage-inline,
    .drama .krug .stage,
    .drama .krug .stage_headline {
        padding-right: 4em;
    }

    .drama .krug .head_act {
        padding-right: 3em;
    }

    .drama .krug .speaker-stage-inline>.speaker {
        margin-left: 0em !important;
        padding-right: 0em !important;
        margin-right: .5em;
    }


    .drama .krug .speaker,
    .drama .krug .speaker-stage-inline {
        /* padding-right: 4em; */
    }

    .drama .krug .speaker_inline {
        /* margin-left: 5em; */
    }

    .drama .krug .verse_part_I,
    .drama .krug .verse_part_M,
    .drama .krug .verse_part_N,
    .drama .krug .verse_part_F {
        margin-left: 0em;
    }

    .drama .krug .verse_break {
        margin-left: 12em;
    }

    .drama .krug .pb_print {
        justify-content: left;
        margin-left: 0em;
        margin-top: 5em;
    }

    .drama .krug .pb_print .page_no_right {
        margin-left: 24em;
    }

    .drama .krug a.facsimile {
        margin-left: 1em;
    }

    .drama .krug .catchword {
        margin-left: 17em !important;
    }

    .drama .krug .sigle_print {
        margin-left: 14em;
    }

    /* KRUG Ende ****/

    /* KRUG MS */
    .drama .krug-ms {
        line-height: 2.9rem;
    }

    .drama .krug-ms .verse.ph,
    .drama .krug-ms .verse.ed,
    .drama .krug-ms .verse.ms {
        font-size: 90%;
        color: var(--grau);
        line-height: 1.7rem;
    }

    .drama .krug-ms .del {
        color: var(--grau);
    }

    /* KRUG MS ENDE */

    /* Penthesilea */
    .drama .penthesilea {
        margin-right: 100px;
    }

    .penthesilea .castList {
        margin-right: 100px;
    }

    .drama .penthesilea .verse_part_I {
        padding-left: 0em;
    }

    .drama .penthesilea .verse_part_M {
        padding-left: 0em;
    }

    .drama .penthesilea .verse_part_N {
        padding-left: 0em;
    }

    .drama .penthesilea .verse_part_F {
        padding-left: 0em;
    }

    /* Penthesilea Ende */

    /* Schroffenstein */
    .drama .schroffenstein {
        padding-right: 250px;
    }

    .titleFront.drama.schroffenstein .castList {
        margin-right: 250px;
    }

    .drama .schroffenstein .verse_break {
        margin-left: 21ch;
    }

    .drama .schroffenstein .speaker {
        margin-left: -6em;
    }

    .drama .schroffenstein .speaker-stage-inline {
        text-align: center;
        margin-left: -3em;
    }

    .drama .schroffenstein .stage {
        text-indent: 2em;
        margin-left: -4em;
    }

    .drama .schroffenstein .stage_center {
        text-align: center;
        margin-left: -6em;
    }

    .schroffenstein .catchword {
        margin-left: 20em;
    }

    .drama .schroffenstein .horizontal_line {
        margin-left: -4em;
    }

    .drama h4.head_scene {
        margin-left: -4em;
    }

    /* Herrmannsschlacht */
    .drama .herrmannsschlacht {
        padding-right: 200px;
    }

    .titleFront.drama.herrmannsschlacht .castList {
        margin-right: 200px;
    }

    .drama .herrmannsschlacht .speech {
        line-height: 1.5em;
    }

    .drama .herrmannsschlacht .verse_break {
        margin-left: 30ch;
    }

    .drama .herrmannsschlacht .speaker {
        margin-left: -4em;
    }

    .drama .herrmannsschlacht .speaker-stage-inline {
        text-align: center;
        margin-left: -3em;
    }

    .drama .herrmannsschlacht .stage {
        text-indent: 0em;
        margin-left: -4em;
    }

    .drama .herrmannsschlacht .stage_center {
        text-align: center;
        margin-left: -1em;
        margin-top: 0em;
    }

    .drama .herrmannsschlacht h4.head_scene {
        font-size: 1.3rem;
        letter-spacing: .35em;
        margin-left: -2em;
    }

    .drama .herrmannsschlacht .stage_headline {
        text-indent: -1em;
        margin-left: 1em;
        line-height: 1.5rem;
        text-align: left;

    }

    .drama .herrmannsschlacht .stage_act {
        font-size: 1.25rem;
        text-indent: 0em;
        margin-left: -4em;
    }

    .drama .herrmannsschlacht .stage_headline .spaced_letters {
        font-size: inherit;
    }

    .herrmannsschlacht .catchword {
        margin-left: 30ch;
    }

    .herrmannsschlacht .sigle_print {
        font-size: 1.25rem;
        margin-left: 20ch;
    }

    .herrmannsschlacht .horizontal_line,
    .hr,
    .hr_s,
    .hr_l {
        display: flex;
        justify-content: center;
        margin-left: -2em;
    }


    /* Erzählungen */
    .short_story {
        /* width: var(--width-content); */
        font-size: 1.35rem;
        padding-right: 230px;
        line-height: 2rem;
    }

    .short_story .page_no_story,
    .short_story .align_page_no {
        padding-right: 1em;
    }

    .short_story .page_no_story {
        margin-left: 0em
    }

    .short_story .pb_print {
        justify-content: left;
    }

    .short_story .pb_print .page_no_right {
        margin-left: 16em;
    }

    .short_story .pb_print .fa {
        padding-right: .5em;
    }

    .short_story .pb_print .facsimile {
        font-size: .86rem;
    }

    .short_story .catchword {
        display: block;
        margin-left: 34ch;
    }

    .short_story .sigle_print {
        display: block;
        margin-top: .5em;
        margin-left: 1em;
        font-size: .8rem;
    }

    .short_story .signature_mark {
        margin-left: 9em;
        font-size: 1.2rem;
    }

    .short_story .text-container-stts {
        padding-left: var(--abstand-links);
    }

    .short_story .content-text,
    .short_story .text-container-stts {
        /* margin: auto; */
        font-size: 1.1rem;
        line-height: 1.6rem;
    }

    .short_story .text-container-stts {
        /* width: 40rem; */
    }

    .short_story .controlpanel-stts {
        float: right;
        font-family: var(--font-sans);
        font-size: .9rem;
        margin-right: 3em;
        margin-left: 2em;
    }

    .short_story .controlpanel-stts fieldset {
        padding: .5em;
    }

    .short_story .controlpanel-stts .stts-tag {
        max-width: 18em;
        ;
        text-indent: -1em;
        margin-left: 1em;
    }

    /* Erzählungen Ende */

    /* Berliner Abendblätter */
    .abendblaetter {
        /* width: var(--width-content); */
        padding-right: 230px;
    }

    .abendblaetter h2,
    .abendblaetter h3,
    .abendblaetter h4,
    .abendblaetter h5,
    .abendblaetter h6 {
        margin-left: var(--ba-headline-negativ-einzug);
    }

    .abendblaetter a.facsimile>.fa {
        display: inline;
    }

    .abendblaetter .ba_article h3 {
        padding-right: 2em;
    }

    .abendblaetter .ba_subline_right {
        /* margin-right: 4em; */
    }

    .abendblaetter .sigle_print {
        padding-right: 4em;
    }

    /* Font-Sizes */
    .abendblaetter .ba_header h1.ba_head {
        font-family: var(--font-serif);
        font-size: 2.4rem;
        line-height: 2rem;
    }

    .abendblaetter .ba_header {
        padding-right: 4em;
    }

    .abendblaetter p {
        /* text-indent: 1em; */
        font-size: 1.3rem;
        line-height: 1.7rem;
    }

    .abendblaetter p.ba_copy_m {
        font-size: 1.2rem;
        line-height: 1.4rem;
    }

    .abendblaetter p.ba_copy_s,
    .abendblaetter span.ba_copy_s {
        font-size: 1.08rem;
        line-height: 1.2rem;
    }

    .abendblaetter .ba_copy_s_narrow {
        font-size: 1rem;
        line-height: 1rem;
    }

    .abendblaetter .ba_subline_center,
    .ba_subline_right {
        font-size: 1.08rem !important;
        /* padding-right: 2em; */
    }

    .abendblaetter .ba_header h1.ba_head {
        font-size: 2.4rem;
    }

    .abendblaetter .ba_subhead {
        /* margin-left: -3em; */
    }

    .abendblaetter .ba_subline_right>.s {
        /* padding-right: 6em; */
    }

    .abendblaetter .ba_subline_right {
        text-align: left;
        margin-left: 28ch;
    }

    .abendblaetter .hanging_indent {
        padding-left: 2em;
        text-indent: -2em;
    }

    .abendblaetter p.line_height_narrow {
        line-height: 1.4rem !important;
    }

    .kleist-apparat.genre-ba {
        padding-right: 150px;
    }

    .abendblaetter .pb_print {
        display: block;
        margin-bottom: 1em;
        /* background: var(--bkg-color); */
        margin-left: -6em;
        margin-right: -2em;
        /* border-top: 2em solid var(--bkg-color); */
    }

    .abendblaetter .verse_break {
        margin-left: 20ch;
    }

    .ba-article-hdl {
        display: block;
        color: white;
        padding-bottom: .5em;
    }

    .ba-navbar-article-list-hdl {
        font-family: var(--font-sans);
        text-align: left;
        color: var(--kleist-blau);
        margin-left: 0em;
        /* padding-bottom: .5em; */
    }

    /* BA ENDE */

    .edition {
        /* width: var(--width-content); */
    }

    /* Phöbus */
    .ph-titelseite {
        margin-left: -4em;
    }

    .kleist-apparat.genre-phoebus_article {
        padding-right: 50px;
    }

    /** Phöbus Artikel **/
    .phoebus_article p {
        font-size: 1.2rem;
    }

    .phoebus_article p.phoebus_copy_small {
        font-size: 1rem;
    }

    .phoebus_article .pb_print,
    .phoebus_article .horizontal_line,
    .phoebus_article h3 {
        margin-left: -6em;
    }

    .ph-articles-in-navbar {
        font-size: .8rem;
    }

    .ph-articles-in-navbar li {
        padding-top: .4em;
    }

    .ph-articles-in-navbar h4 {
        font-family: var(--font-sans);
        font-size: 1.2rem;
        font-weight: 600;
        text-align: left;
        color: var(--bkg-color);
    }

    .phoebus_article_lese_I,
    .phoebus_article_lese_II {
        padding-right: 25ch;
        font-size: 1.2rem;
    }

    .phoebus_poetics_lese_I,
    .phoebus_poetics_lese_II {
        padding-right: 25ch;
        font-size: 1.2rem;
    }

    /** phoebus_poetics **/
    .phoebus_poetics {
        font-size: 1.25rem;
        padding-right: 50px;
    }

    .phoebus_poetics.phoebus_poetics_lese_I,
    .phoebus_poetics.phoebus_poetics_lese_II {
        padding-right: 10em;
    }

    .phoebus_poetics h3 {
        /* margin-left: -8em; */
    }

    .phoebus_poetics .pb_print,
    .phoebus_poetics .horizontal_line {
        /* margin-left: -12em; */
    }

    .phoebus_poetics .speech {
        text-indent: -4em;
        margin-left: 4em;
        margin-top: 1em;
    }

    .phoebus_poetics .stage {
        margin-left: 4em;
        margin-top: .5em;
        text-indent: -2em;
    }

    .phoebus_poetics span.verse_no {
        float: right !important;
        font-style: normal;
        font-size: 10px;
        margin-right: 1%;
        text-align: right;
        letter-spacing: 0em;
    }

    .phoebus_poetics .castList {
        /* padding-left: 6em; */
        margin-left: -4em;
        font-size: 1.1rem;
        margin-right: 0px;
    }

    .phoebus_poetics .verse_part_F .w {
        /* margin-left: 10em !important; */
    }

    .phoebus_poetics .sigle_print {
        margin-left: 50ch;
        margin-top: .5em;
        font-size: 1rem;
    }

    /* Personen */
    .kleist-person-image {
        max-width: 416px;
    }
}


/* HANDSCHRIFTEN-SIMULATOR *********/
#kleistform a.kleisttext {
    margin-left: 0.5em;
    margin-right: 1em;
}

#kleistform input[type='text'] {
    font-size: 36px;
    font-family: kleistprinzwilhelm;
}

#kleistform input[type='radio'] {
    margin-left: 1em;
    margin-right: 0.5em;
}

#kleistform input[type='button'] {
    margin-left: 1em;
    margin-right: 0.5em;
}

#kleistform fieldset.generator {
    /*margin-left: 5%;
      margin-right: 5%;*/
    margin-top: 2em;
}

#kleistform div.input {
    margin-top: 1em;
    width: 96%;
    margin: auto;
}

#kleistform select {
    width: 7em;
    margin-left: 1em;
    margin-right: 2em;
}

#kleistform p span.copyright {
    font-size: .7rem;
}

#kleistform textarea {
    display: block;
    font-size: 36px;
    /*font-family: kleistghonorez;*/
    resize: none;
    /*overflow: hidden;*/
    min-width: 100%;
    min-height: 500px;
    max-height: 680px;
    margin-top: 0.5em;
    padding-left: 0.5em;
    padding-top: 0.3em;
    font-feature-settings: "hlig" 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#kleistform .bold {
    font-weight: 600;
}

#kleistform .inline {
    display: inline-block;
}

#kleistform .kleisttext {
    font-size: .9rem;
}

#kleistform .beispieltexte,
#kleistform .font-download,
#kleistform .displ_desktop,
#kleistform .displ_mobile {
    margin-top: 1em;
}


@media only screen and (max-width: 400px) {
    #kleistform fieldset.generator {
        /*width: 80%;*/
        margin: auto;
        margin-top: 1em;
    }

    #kleistform fieldset.generator legend {
        font-size: 1rem;
    }

    #kleistform textarea {
        font-size: 24px;
        margin-top: 0em;
        min-height: 200px;
        max-height: 200px;
    }

    #kleistform span.radiobutton {
        display: block;
    }

    #kleistform span {
        font-size: .9rem;
    }
}

@media only screen and (max-width: 480px) {
    #kleistform fieldset.generator {
        /*width: 80%;*/
        margin: auto;
        margin-top: 1em;
    }

    #kleistform textarea {
        font-size: 24px;
        margin-top: 0em;
        min-height: 300px;
        max-height: 400px;
    }

    #kleistform div.displ_desktop {
        display: none;
    }

    #kleistform a.kleisttext {
        display: block;
    }

    #kleistform select {
        margin-left: 0.5em;
        margin-right: 1em;
    }

    #kleistform .inline {
        display: block;
        margin-bottom: 0.3em;
    }
}

@media only screen and (min-width: 481px) {
    #kleistform div.displ_mobile {
        display: none;
    }
}

/********* SIMULATOR ENDE ********/

/****** Tailwindcss classes ******/

.flex {
    display: flex;
}

.flex-col-reverse {
    flex-direction: column-reverse;
}

.pt-4 {
    padding-top: 1rem
        /* 16px */
    ;
}

.text-2xl {
    font-size: 1.5rem
        /* 24px */
    ;
    line-height: 2rem
        /* 32px */
    ;
}

.block {
    display: block;
}

.ml-4 {
    margin-left: 1rem
        /* 16px */
    ;
}

.text-base {
    font-size: 1rem
        /* 16px */
    ;
    line-height: 1.5rem
        /* 24px */
    ;
}

.leading-6 {
    line-height: 1.5rem
        /* 24px */
    ;
}

.w-4\/5 {
    width: 80%;
}

.self-center {
    align-self: center;
}

.rounded-full {
    border-radius: 9999px;
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 640px) {
    .sm\:flex-row {
        flex-direction: row;
    }

    .sm\:items-center {
        align-items: center;
    }

    .sm\:w-8\/12 {
        width: 66.666667%;
    }

    .sm\:w-3\/12 {
        width: 25%;
    }

    .sm\:w-4\/12 {
        width: 33.333333%;
    }

    .sm\:pr-12 {
        padding-right: 3rem
            /* 48px */
        ;
    }

    .sm\:-mt-4 {
        margin-top: -1rem
            /* -16px */
        ;
    }

    .mb-4 {
        margin-bottom: 1rem
            /* 16px */
        ;
    }
}