@charset "UTF-8";

html {
  padding:0rem;
  margin:0rem;
  font-family: sans-serif;
  text-align: left
}
body {
  padding:1rem;
  margin:1rem;
}

/* Überschriften, Größe und Außenabstand */
h1 {font-size: 1.5rem; padding: 0; margin:0.5rem}
h2 {font-size: 1.4rem; padding: 0; margin:0.5rem}
h3 {font-size: 1.3rem; padding: 0; margin:0.5rem}
h4 {font-size: 1.2rem; padding: 0; margin:0.5rem}
h5 {font-size: 1.1rem; padding: 0; margin:0.5rem}
h6 {font-size: 1.0rem; padding: 0; margin:0.5rem}

nav h2, article h2 {
  font-size: 1.2rem;
  border: thin solid;
  border-radius: 0.5em;
  padding:0.5em; width: auto;
  width: fit-content
}

/* Abkürzungen und Erläuterungen kenntlich machen */
abbr[title], acronym[title], span[title]
{
 border-bottom: thin dotted
}

/* Schriftfamilie für Abkürzungen und ein paar andere Elemente */
abbr, acronym, kbd, var
{
 font-family: serif
}
/* fette Schrift für diese Elemente */
kbd, var, h6
{
 font-weight: bold
}
code, kbd {
 font-family: monospace
}
q {
  quotes: '»' '«'
}
cite {
 font-style: italic
}

i.Name {
  font-family: serif;
  text-decoration: wavy underline;
}
span.schwach {
  font-family: sans-serif;
  font-weight: lighter;
  font-style: normal;
  opacity: 0.75
}
span.kursiv {
  font-family: cursive;
  font-style: italic
}
span.serif {
  font-family: serif
}
span.sansserif {
  font-family: sans-serif
}

mark.extrastark {
 background: rgba(0, 0, 0, 0.2);
 color: inherit;
 font-weight: bolder;
 font-style: oblique;
 font-family: serif;
 text-decoration: underline;
 border-radius: 0.2em
}

/* Absatz nicht einrücken,
 sondern nach oben und unten Platz lassen */
p {
text-indent: 0;
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
max-width: 80rem
}
pre {
  overflow: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto
}

/* section etc sichtbar machen */
section, article, aside, nav
{
  display: block
}
summary {
 font-style: italic;
 font-weight: bolder
}

section
{
  margin: 0.2em;
  padding: 0.2em;
  border: thin solid;
  border-radius: 0.5em;
  width: auto;
  width: fit-content
}

article {
  margin: 0.2em;
  padding: 0.2em;
  border: 2px dotted;
  border-radius: 0.5em;
  width: auto;
  width: fit-content

}
aside {
  margin: 0.2em;
  border-left: thin dotted;
  border-radius: 0.5em;
  padding-left:1em;
  margin-left:1em
}

.nachricht {
  margin: 0.1em; padding: 0.1em
}

nav {
  border: thin dotted; border-radius: 0.5em
}

summary {
  list-style-type: '⇲';
  font-weight: bolder
}

summary::marker {
  color: #f00;
  text-shadow: #000 0 0 0.2em
}

details[open] > summary {
  list-style-type: '⇱';
}

span[contenteditable='true'] {
 display: inline-block;
 border: 0.25em inset blue;
 border-radius: 0.5em;
 padding: 0.25em;
 margin: 0.25em
}

table th, nav#Hauptmenu h2 {
  text-align: center
}

nav#Hauptmenu, nav#Hauptmenu * {
  padding: 0.1rem;
  margin: 0rem;
}

nav#Hauptmenu {
  width: fit-content;
  text-align: center
}
nav#Hauptmenu h2 {
  min-width: auto
}

nav#Hauptmenu form, nav#Hauptmenu fieldset, nav#Hauptmenu h2, nav#Hauptmenu select, nav#Hauptmenu option  {
  display: inline-block
}
nav#Hauptmenu select {
  height: 2em;
}
nav#Hauptmenu select + br {
  display: none
}

header, footer
{
display: block; border: thin solid; padding: 1em
}
main
{
display: block
}
.centre {
 text-align: center;
 margin-left: auto;
 margin-right: auto
}
.bc {
 margin-left: auto;
 margin-right: auto
}


aside.centre, article.centre, section.centre, div.centre, p.centre, h1.centre, h2.centre {
 margin-left: auto;
 margin-right: auto;
}

li {margin-bottom: 0.7em}

dt {font-weight: bolder; margin-top:0.5ex}
dd {padding-left: 2ex}

/* Figuren und Graphiken, Behälter für eingebettete Strukturen */
figure {display: block; width: fit-content; padding: 1em}
figure.l {float: left; width: auto}
figure.r {float: right; width: auto}
figure.l svg {width: auto; height: auto; max-width: 45vw; max-height: 90vh}
figure.r svg {width: auto; height: auto; max-width: 45vw; max-height: 90vh}
figure.m {width: auto}
figure.m svg {display: block; height: auto; max-height: 90vh; width: auto; max-width: 90vw}

figcaption {display: block; font-family: serif; text-align: center; font-style: italic}

/* Wenn der Darstellungsbereich breiter als hoch ist,
 kann es bei einigen Bildern hilfreich sein, diese neben dem Text anzuordnen*/
figure img {max-width: calc(100vw - 5em); height: auto; max-height: 90vh; width: auto; border-radius: 0.5em}

@media (min-width: 60em)  {
figure.links {display: block; float: left}
figure.rechts {display: block; float: right}
figure.links img, figure.rechts img, img.links, img.rechts {max-width: 50vw; height: auto}
figure.mittig {display: block; text-align: center; margin: auto}

/* wird nicht mehr verwendet:  */
figure img.links {
  float: left;
  margin: 1em;
}
figure img.rechts {
  float: right;
  margin: 1em;
}
figure img.mittig {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
  margin-bottom: 1em;
  text-align: center;
  display: block
}

figure audio {
  border-radius: 0.5em
}

figure.kr {display: block; width: 20%; max-width: 40em; margin: auto; float: right}
figure.kl {display: block; width: 20%; max-width: 40em; margin: auto; float: left}

aside.links {
  display: inline-block;
  float: left;
  width: 30%;
  max-width: 20em;
  overflow: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto
}
aside.rechts {
  display: inline-block;
  float: right;
  width: 30%;
  max-width: 20em;
  overflow: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto}
aside.mittig {width: fit-content; text-align: center; margin: auto}
}

table {border: thin solid; border-spacing:0.1em; border-radius: 0.5em; text-align: center; margin-left: auto; margin-right: auto}
caption {font-family: serif; font-style: italic; text-align: center; caption-side: bottom }
tr, td, th {border: thin solid; border-radius: 0.5em}
td, th {vertical-align: top; text-align:left; padding: 0.1em; margin: 0.1em }

fieldset, form fieldset select {border: thin solid; border-radius: 0.5em}
fieldset {margin: 0.1em; padding:0.1em}
form input, form textarea, form button {border-radius: 0.5em; margin: 0.1em}
form input[type='text'], form input[type='email'], form input[type='password'], form *[type='submit'] {
  min-width: 8em
}
form *[type='submit'] {
  min-width: 8em;
  border-style: outset
}
form *[type='submit']:active {
  border-style: inset
}
form input[type='radio'] {min-width: 1em}
form.inline-block fieldset, form.inline-block *[type='submit'] {min-width: 0; width: auto; width: fit-content}
form {width: auto; width: fit-content; margin-left: auto; margin-right: auto; padding:0}
form select option {white-space: normal}

/* Strophen und Strophenzeilen - Struktur */
section[property~='l:st'] {
  border: none;
  padding: 0 0 0 2em;
  margin: 1em;
}
div[property~='l:sl'] {
  text-indent: -2em
}
div[property~='l:sl']:first-letter {
  font-weight: bolder
}

hr.nurohneCSS {
 display: none
}

section[property~='l:schapter'], section[property~='l:foreword'], section[property~='l:epigraph'], section[property~='l:epilog'], section[property~='l:acting'] {
border-color: transparent
}

/* Schnacken */

html#Schnacken iframe#Schnack {
 display: block;
 box-sizing: border-box;
 width: 100%;
 height: 100%;
 border: none;
 border-radius: 0.5em;
 overflow: auto;
 resize: both;
 position: relative;
 top: 0
}

html#Schnacken figure#f {
 width: 100%;
 height: calc(100vh - 12rem);
 min-height: 8rem;
 padding: 0;
 margin: 0;
 outline: thin solid;
 border-radius: 0.5em
}
html#Schnacken figure#f figcaption {
 width: 100%
}
html#Schnacken form#e {
 display: inline-block;
 width: 100%;
 margin-bottom: 2rem;
 margin-top: 0.5rem;
 padding-bottom: 0.2rem;
 padding-top: 0.2rem;
}

html#Schnacken form#e input[type='text'] {
 display: inline-block;
 width: calc(100vw - 12rem);
 min-width: 10rem
}

html#Schnacken.solo {padding: 0; margin: 0}
html#Schnacken.solo body {padding: 0; margin: 0.5em}
html#Schnacken.solo figure#f {width: 100%; height: 90vh; max-height: calc(100vh - 5.5rem)}
html#Schnacken.solo form#e {margin-bottom: 0}

html#Schnacken nav#Hauptmenu {margin-top: 3em}

html#Gruppe .imFluss .drumrum, html#Profil .imFluss .drumrum {
 border: none;
 overflow: auto;
 padding: 0.7em;
 min-width: 15em;
}
html#Gruppe .imFluss figcaption, html#Profil .imFluss figcaption {
 max-width: 30em;
 margin: auto
}
html#Gruppe .imFluss .drumrumf, html#Profil .imFluss .drumrumf {
 border: none;
 min-width: 15em
}
html#Gruppe .imFluss .drumrumf section, html#Profil .imFluss .drumrumf section {
 overflow: auto;
}
html#Gruppe .imFluss .drumrum figure, html#Profil .imFluss .drumrum figure {
 border: thin solid;
 border-radius: 0.5em
}