/* alegreya-sans-regular - latin */
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/alegreya-sans-v20-latin-regular.eot');
  /* IE9 Compat Modes */
  src: local(''),
    url('../fonts/alegreya-sans-v20-latin-regular.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('../fonts/alegreya-sans-v20-latin-regular.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('../fonts/alegreya-sans-v20-latin-regular.woff') format('woff'),
    /* Modern Browsers */
    url('../fonts/alegreya-sans-v20-latin-regular.ttf') format('truetype'),
    /* Safari, Android, iOS */
    url('../fonts/alegreya-sans-v20-latin-regular.svg#AlegreyaSans') format('svg');
  /* Legacy iOS */
}

/* source-serif-pro-regular - latin */
@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/source-serif-pro-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/source-serif-pro-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-serif-pro-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-serif-pro-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-serif-pro-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-serif-pro-v11-latin-regular.svg#SourceSerifPro') format('svg'); /* Legacy iOS */
}

/* source-serif-pro-italic - latin */
@font-face {
  font-family: 'Source Serif Pro';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/source-serif-pro-v11-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/source-serif-pro-v11-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-serif-pro-v11-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-serif-pro-v11-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-serif-pro-v11-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-serif-pro-v11-latin-italic.svg#SourceSerifPro') format('svg'); /* Legacy iOS */
}

/* source-serif-pro-600 - latin */
@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/source-serif-pro-v11-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/source-serif-pro-v11-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-serif-pro-v11-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-serif-pro-v11-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-serif-pro-v11-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-serif-pro-v11-latin-600.svg#SourceSerifPro') format('svg'); /* Legacy iOS */
}

/* source-serif-pro-600italic - latin */
@font-face {
  font-family: 'Source Serif Pro';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/source-serif-pro-v11-latin-600italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/source-serif-pro-v11-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-serif-pro-v11-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-serif-pro-v11-latin-600italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-serif-pro-v11-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-serif-pro-v11-latin-600italic.svg#SourceSerifPro') format('svg'); /* Legacy iOS */
}
  
* {
  text-rendering: optimizeLegibility;
  font-kerning: auto
}

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%
}

body {
  -webkit-font-smoothing: antialiased;
  background: #fffff8;
  color: #858583;
  counter-reset: sidenote-counter;
  font: 1.4rem/2rem 'Alegreya Sans';
  height: 100%;
  margin: 0 auto;
  max-width: 1440px;
  padding-left: 12.5%;
  padding-top: 5rem;
  width: 87.5%
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Source Serif Pro', 'Georgia', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: italic;
  line-height: 1.5;
  margin: 0;
  max-width: 55%;
  color: #B05468;
  align-items: center;
}

h1 {
  font-size: 2.2rem;
  font-style: normal;
  margin-top: 4rem
}

/* Buchtitel */
h2 {
  font-size: 2.2rem;
  margin-top: 4rem;
  line-height: 1.2;
  clear: left;
}

/* Newstitel */
h3 {
  font-size: 2.2rem;
  margin-top: 4rem;
  line-height: 1.2;
  clear: left;
}

p, table, blockquote, pre, img, hr, .mini-note, ul li, ol li {
  box-sizing: border-box;
  max-width: 55%
}

.MathJax_SVG_Display {
  max-width: 55% !important
}

li ul li, li ol li {
  max-width: 100%
}

p {
  position: relative;
/*   Damit bei einem Zeilenumbruch mit Return innerhalb von <p></p> eine neue Zeile beginnt. */
  white-space: pre-line;  
}

a, a:visited {
  color: #B05468
}

a:hover, a:visited:hover {
  color: #dc2828
}

blockquote {
  font-style: italic;
  margin: 0;
  padding: 2rem 0 2rem 4rem
}

blockquote footer {
  font-style: normal;
  font-size: 1.1rem;
  text-align: right
}

figure {
  align-items: flex-start;
  display: flex;
  margin: 0;
  padding: 0;
  position: relative
}

/*hr {
  background: #111;
  border: 0;
  height: 1px;
  margin: 4rem 0; 
  width: 100%
}*/

pre {
  font-size: 80%;
  margin: 0;
  padding: 1rem;
  overflow-x: auto
}

code {
  font-size: 80%
}

/* Abstand der Bilder zum Text */
/* img { */
/*   margin-right: 2rem; */
/*   margin-bottom: 2rem; */
/*   margin-top: 2rem; */
/*   float: left; */
/*   } */
  
table {
  border-collapse: separate;
  border-spacing: 1.5rem .5rem;
  margin: 0 6rem 0 -1.5rem;
  text-align: left;
  width: 100%
}

table th, table td {
  font-weight: bold;
  padding: 0
}

table th:not(:first-child), table td:not(:first-child) {
  text-align: right
}

table thead th {
  border-bottom: 1px solid #111
}

.datum_news {
  font-size: 1rem;
/*   font-style: italic color; */
  text-align: left;
  margin-top: -1.5rem;
  margin-bottom: 0rem;
/*   clear: both; */
}

hr {
  height: 1.5px;
  width: 55%;
  background-color:#666;
  opacity: 10%;
  margin-top: 4rem;
  margin-bottom: 0rem;
  border: 0;
  margin: 4rem 0; 
  width: 100%
}

.sans {
  font-family: 'Alegreya Sans';
  letter-spacing: .5em text-transform uppercase;
}

.caps {
  font-variant: small-caps
}

.italics {
  font-style: italic
}

.marginnote, .sidenote, figcaption {
  font-size: 80%;
  left: calc(100% + 4rem);
  line-height: 1.3rem;
  max-width: 400px;
  padding-top: 1rem;
  position: absolute;
  top: 0;
  width: 50%
}

.sidenote:before {
  content: counter(sidenote-counter) " ";
  font-family: et-book-roman-old-style;
  position: relative;
  top: -0.5rem;
  vertical-align: baseline
}

.sidenote-number {
  counter-increment: sidenote-counter
}

.sidenote-number:after {
  content: counter(sidenote-counter);
  font-family: et-book-roman-old-style;
  font-size: 80%;
  left: 0.1rem;
  position: relative;
  top: -0.5rem;
  vertical-align: baseline
}

figure .marginnote, figure .sidenote, figure figcaption {
  left: auto;
  position: relative
}

.mini-note {
  display: block;
  font-size: 80%;
  font-style: italic
}

.epigraph {
  margin: 4rem 0
}

.epigraph blockquote {
  font-style: italic;
  margin: 2rem 0
}

.epigraph blockquote footer {
  font-style: normal
}

.bottom-footer {
  margin: 6rem 0
}

nav {
  margin-bottom: 1rem;
  margin-top: 1rem;
}

nav .menu-icon {
  cursor: pointer;
  display: none;
  text-decoration: underline
}

nav .menu-btn {
  display: none
}

nav .menu-btn:checked~.site-nav {
  display: block
}

nav ul.site-nav {
  list-style: none;
  margin: 0;
  padding: 0
}

nav ul.site-nav a, nav ul.site-nav a:visited {
  text-decoration: none;
  /* relative Angabe über EM */
  color: #666666;
}

div.wahlmenue li.selected a { 
/*  color: #B05468; */
/*   filter: invert(6); */
  text-decoration: underline;
} 

nav ul.site-nav li {
  display: inline-block;
  margin: 0 1.5rem 0 0;
}

nav ul.site-nav a:hover {
  text-decoration: underline;
/*   color: #B05468; */
}

.tags {
  color: #B05468;
  max-width: 55%;
  line-height: 1.5;
  clear: right;
}

.pressezitat {
  color: #B05468;
  max-width: 30%;
  line-height: 1.5;
  margin-left: 24rem;
  margin-bottom: 3rem;
}
 
/*.Stempel_Hintergrund {
  background-image: url('../bilder/Stempel_Welle.png');
  background-repeat: no-repeat;
  background-position: 53%
}*/

.news_voll {
    margin-top: 0rem;
    margin-bottom: 0rem;
    max-width: 55%
}

/* Da ich die Bilder innerhalb des <p></p> der Newsmeldung platziere,
ist hier margin-right: 0, sonst müsste es 45% sein, wenn die Bilder
einen eigenen Absatz bilden. */
.news_rechts {
    margin-top: 0.5rem;
    margin-bottom: 1.5%;
    margin-right: 0;
    margin-left: 3%;
    max-width: 30%;
    float: right;
}

.news_links {
    margin-top: 0.5rem;
    margin-bottom: 1.5%;
    margin-right: 3%;
    max-width: 30%;
    float: left;
}

.news_links_kl {
    margin-top: 0.5rem;
    margin-bottom: 1.5%;
    margin-right: 3%;
    max-width: 20%;
    float: left;
}

.news_volloben {
    margin-top: 1.8rem;
    max-width: 55%
}

.news_rechtsoben {
    margin-top: 1.8rem;
    margin-bottom: 1.5%;
    margin-right: 45%;
    margin-left: 3%;
    max-width: 30%;
    float: right;
}

.news_linksoben {
    margin-top: 1.8rem;
    margin-bottom: 1.5%;
    margin-right: 3%;
    max-width: 30%;
    float: left;
}

.news_linksoben_kl {
    margin-top: 1.8rem;
    margin-bottom: 1.5%;
    margin-right: 3%;
    max-width: 20%;
    float: left;
}

@media (max-width: 850px) {
  body {
    padding: 10px;
    width: calc(100% - 20px)
  }

  h2.title {
    margin-top: 1rem;
    max-width: 100%
  }

  h2, h3 {
    margin-top: 3rem;
    max-width: 100%
  }
  
  /* Newstitel */
  h3 {
  line-height: 1.2;
  }

  p, table, blockquote, pre, img, hr, .mini-note, ul li, ol li {
    max-width: 100%
  }

  .MathJax_SVG_Display {
    max-width: 100% !important
  }

  .news_voll {
    margin-top: 0rem;
    margin-bottom: 0rem;
    max-width: 100%
  }
  
  .news_volloben {
    margin-top: 1.8rem;
    max-width: 100%
  }
  
  .news_rechts {
    margin-top: 0.5rem;
    margin-bottom: 1.5%;
    margin-right: 0;
    margin-left: 3%;
    max-width: 50%;
    float: right;
  }

  .news_links {
    margin-top: 0.5rem;
    margin-bottom: 1.5%;
    margin-right: 3%;
    max-width: 50%;
    float: left;
  }

  .news_links_kl {
    margin-top: 0.5rem;
    margin-bottom: 1.5%;
    margin-right: 3%;
    max-width: 50%;
    float: left;
  }
  
  .news_rechtsoben {
    margin-top: 1.8rem;
    margin-bottom: 1.5%;
    margin-right: 0;
    margin-left: 3%;
    max-width: 50%;
    float: right;
  }

  .news_linksoben {
    margin-top: 1.8rem;
    margin-bottom: 1.5%;
    margin-right: 3%;
    max-width: 50%;
    float: left;
  }

  .news_linksoben_kl {
    margin-top: 1.8rem;
    margin-bottom: 1.5%;
    margin-right: 3%;
    max-width: 50%;
    float: left;
  }

  nav ul.site-nav li {
    margin: 0.3rem 0.3rem;
  }

  
/*  nav .menu-icon {
    display: inline-block
  }

  nav ul.site-nav {
    display: none
  }

  nav ul.site-nav li {
    display: block;
    margin: 1rem 0;
    width: 100%
  }

  nav ul.site-nav li a, nav ul.site-nav li a:visited {
    display: block;
    width: 100%
  }*/

  figure {
    flex-direction: column
  }

  .marginnote, .sidenote, figcaption {
    display: block;
    left: auto;
    margin-top: 1rem;
    position: relative;
    top: auto;
    width: 100%
  }
  
  .tags {
    color: #B05468;
    max-width: 100%;
    line-height: 1.5;
    clear: right;
  }

  .pressezitat {
    color: #B05468;
    max-width: 80%;
    line-height: 1.5;
    margin-left: 4rem;
    margin-bottom: 3rem;
  }
  
/*  .Stempel_Hintergrund {
    background-image: none;
   }*/
  
}

@media (prefers-color-scheme: dark) {
  body {
    background: #191919;
    filter: invert(1)
  }

  .highlight {
    border-color: grey !important
  }

  img, iframe, .highlight, a:hover, a:focus {
    filter: invert(1)
  }
}

.autorenfoto {
  float: left;
  max-width: 40%;
  margin-top: 2rem;
  margin-right: 2%;
/*   padding-right: 12.5% */
}

.lesungsfoto {
  float: center;
  margin-top: 2rem;
}

.pressefotos {
  height: 100;
  margin-right: 1rem;
}


.books {
  margin-top: 2rem;
  margin-bottom: 1.5%;
  height: 100;
  margin-right: 3%;
  max-width: 50%;
  float: left;
}

audio {
    filter: opacity(40%);
    width: 300px
}

.bs {
  align-content: left;
}

.brand {
  font-family: 'Source Serif Pro', 'Georgia', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 3.2rem;
  margin-top: 2.6rem;
  color: #B05468;
}

.brand a {
  text-decoration: none;
}

div.brand a:hover { 
/*  color: #B05468; */
/*   filter: invert(6); */
  text-decoration: underline;
  color: #B05468;
} 

.main {
  text-transform: uppercase;
}

/* .fahne{ */
/*     height: 1rem; */
/*     width: 2.8rem; */
/*     float: right; */
/*     border-radius: 50%; */
/*     overflow: hidden; */
/*     margin-top: -6px; */
/* } */

.main_largeScreen {
  text-transform: uppercase;
}

.main_smallScreen {
  text-transform: uppercase;
}

/* auf großen Bildschirmen Text verbergen */
@media only screen and (min-width: 851px) {
    .main_smallScreen {display: none;}
  }

@media (max-width: 850px) {
/* auf kleinen Bildschirmen Text verbergen */
  .main_largeScreen {display: none;}
  }
  
.sub {
  font-size: 0.8em;
}

dt {
  display: block;
  margin-top: 3rem !important;
}

.footer {
  text-transform: uppercase;
  margin-top: 12rem;
  clear: left;
}

.kontakt {
  text-transform: uppercase;
  text-align: right;
}

.datum {
  text-transform: uppercase;
  margin-top: 5rem;
  font-weight: bold;
  color: #B05468;
}

.link {
  text-decoration: none;
}

/*.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #B05468;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #B05468;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}*/

/*HTML
<p class="hover-underline-animation">Hover this text to see the effect!</p>*/