/*
@font-face {
  font-family: BlacklightD;
  src: url("../ah/BlacklightD Regular.woff2");
}
*/

* {
  font-size: inherit;
  box-sizing: border-box;
  margin: 0; padding: 0;
  background-color: transparent;
  color: inherit;
  text-decoration: none;
  font-weight: none;
}

html {
  font-family: FreeSans, Arial, Liberation Sans, sans-serif;
  -background-color: #300;
  -color: #CC9
}
body {
  font-size: 12pt;
  -background-color: #CC9;
  color: #A21;
  max-width: 800px;
  margin: 0 auto;
}

header {
  font-family: BlacklightD, Noto Sans, Liberation Sans, sans-serif;
  -color: #CC9;
}

header a#home {
  font-size: 1.875em;
  -background-color: #300;
  display: block;
}

header a#title {
  display: block;
  text-align: center;
  -background-color: #921;
  padding: 1em 1.5em .125em 1.5em;
  -background-image: linear-gradient(rgba(153, 34, 17, .75), rgba(153,34,17,.75));
  background-size: cover;
  border-radius: 0 0 4pt 4pt;
}

header #title h1 {
  display: block;
  font-size: 4em;
  text-shadow: 4pt 4pt 4pt rgba(0, 0, 0, .5);
  -transform: scale(1, 1.5);
  color: #A21;
}
header #title h1 img {
  height: 2em;
  max-width: 100%;
  object-fit: contain;
}
header #title span {
  display: block;
  font-size: 2.25em;
  font-weight: bold;
  opacity: .5;
  transform: scale(1,.625);
}

header #title + img {
  display: inline-block;
  float: right;
}

nav {
  color: #A21;
  font-weight: bold;
  line-height: 1.5em;
  padding: 0 1em;
  margin-bottom: 2em;
  text-align: center;
}
nav li {
  display: inline-block;
  margin: 0 .375em;
}

footer {
  max-width: 800px;
  margin: auto;
  padding-top: 2pt;
  padding-bottom: 4pt;
  text-align: center;
}
footer span {
  display: block;
  font-family: BlacklightD, Noto Sans, Liberation Sans, sans-serif;
  font-weight: bold;
  font-size: 16pt;
  transform: scale(1.5, 1);
  padding-bottom: 1em;
  max-width: 60%;
  margin: auto;
}
footer a[href*=impressum] {
  display: block;
  font-size: 12pt;
}

main {
  font-size: 12pt;
  padding: 0 3em;
}

main h2 {
  font-weight: bold;
  font-size: 1.25em;
  margin-top: 1em;
  margin-bottom: .5em;
}

main h3 {
  font-weight: bold;
  margin-top: .75em;
  margin-bottom: .25em;
}

main iframe {
  width: 100%;
  min-height: 25em;
}

main a {
  color: #F00;
  text-decoration: underline;
}
main a[href^="mailto:"] {
  white-space: nowrap;
}

main p {
  display: inline;
}
main p:after {
  content: '\a\a';
  white-space: pre;
}
main p.address {
  white-space: pre;
}

main p.lang {
  display: block;
  text-align: center;
  margin: 1.5em;
}

main.arnolli img + p {
  text-align: center;
  font-family: BlacklightD, Noto Sans, Liberation Sans, sans-serif;
  font-weight: bold;
  font-size: 16pt;
  padding-bottom: 1em;
}
main.arnolli img[src*=arnolli] {
  display: block;
  margin: auto;
  margin-bottom: .5em;
}

main.links a,
main.press a {
  display: block;
  margin-bottom: .5em;
}

main p.author {
  display: block;
  text-align: right;
}

main ul.cd {
  list-style: none;
  text-align: center;
  margin: 0;
}
main ul.cd >  li {
  vertical-align: top;
  display: inline-block;
  text-align: left;
  width: 32%;
}

main ul {
  margin-left: 1em;
  margin-bottom: 1em;
}

main p + ul { margin-top: -.75em;}

main ul.besetzung {
  list-style: none;
  margin: 0;
  -margin-bottom: 1em;
  text-align: center;
}
main ul.besetzung li {
  display: inline-block;
  vertical-align: top;
  width: calc(25% - .375em);
  min-width: 10em;
  text-align: left;
  margin-bottom: 1em;
}
main ul.besetzung li a {
  display: block;
  width: 100%;
  max-height: 5em;
  overflow: hidden;
  margin-bottom: .5em;
}
main ul.besetzung li img {
  width: 100%;
}

main img[align=left] {
  float: left;
  margin-right: 1em;
}
main img[align=right] {
  float: right;
  margin-left: 1em;
}

img[src="/youtube.png"] {
  max-height: 1.5em;
  vertical-align: bottom;
}
figure.youtube {
  display: block;
  position: relative;
  overflow: hidden;
}
figure.youtube > a > img {
  width: 100%; height: 24em;
  object-fit: contain;
  background-color: #222;
}
figure.youtube > a > span {
  position: absolute;
  top: 50%; left: 0%;
  width: 100%;
  transform: translate(0, -50%);
  font-size: 2em;
  text-align: center;
  padding: 1em;
  background-color: rgba(0, 0, 0, .625);
}

figure.youtube figcaption {
  position: absolute;
  bottom: -6em;
  font-size: .875em;
  padding: 1ex;
  color: #CCC;
  background-color: rgba(0,0,0,.625);
  transition: bottom .25s ease-in .5s;
}
figure.youtube:hover figcaption {
  bottom: 0em;
}
figure.youtube figcaption a {
  text-decoration: underline;
}
