/***********************************************/
/*                                             */
/*   CSS-Datei für mobile Devices              */
/*   Schrift Pagella einbinden                 */
/*                                             */
/***********************************************/
@font-face {
  font-family:        "Pagella"; /* regular font */
  src:                url(dorgon_100-dateien/texgyrepagella-regular.otf) format("opentype");
  font-weight:        normal;
  font-style:         normal;
}
@font-face {
  font-family:        "Pagella"; /* bold font */
  src:                url(dorgon_100-dateien/texgyrepagella-bold.otf) format("opentype");
  font-weight:        bold;
  font-style:         normal;
}
@font-face {
  font-family:        "Pagella"; /* italic font */
  src:                url(dorgon_100-dateien/texgyrepagella-italic.otf) format("opentype");
  font-weight:        normal;
  font-style:         italic;
}
@font-face {
  font-family:        "Pagella"; /* bold-italic font */
  src:                url(dorgon_100-dateien/texgyrepagella-bolditalic.otf) format("opentype");
  font-weight:        bold;
  font-style:         italic;
}

/***********************************************/
/*                                             */
/*   Body                                      */
/*                                             */
/***********************************************/
* {
  margin: 0;
  padding: 0;
}
body {
  padding-bottom:     1.5em;
  background-image:   url(Sternenhimmel.gif);
  background-attachment: fixed;
  background-repeat:  repeat;
  font-family:        "Pagella", "Times New Roman", "Times", serif;
  font-size:          medium;
  /*font-size:          14px;*/
  font-style:         normal;
  font-weight:        normal;
  text-align:         left;
  orphans:            2;
  widows:             2;
  hyphens:            auto;
}
p + p { /* Texteinrückung für nicht-erste Absätze */
  text-indent:        1em;
}
img {
  max-width:          100%;
  height:             auto;
}
/* Textauszeichnungen */
.italic {
  font-style:         italic;
}
.center {
  text-align:         center;
}
.bold {
  font-weight:        bold;
}
.left {
  text-align:         left;
}
.right {
  text-align:         right;
}


/***********************************************/
/*                                             */
/*   Formatierung für mobile Ansicht           */
/*   Navigation wird als vertikale Liste       */
/*   über die komplette Breite dargestellt     */
/*                                             */
/***********************************************/
label, input, nav {
  display: none;
}
nav {
  display:            none;
  font-family:        SegoeUI, Arial, Helvetica, sans-serif;
  font-weight:        bold;
}
nav a {
  text-decoration:    none;
  color:              black;
  font-size:          0.8em;
}
nav ul {
  padding:            0;
  margin:             0;
  width:              100%;
}
nav ul li {
  list-style:         none;
  padding:            10px 10px;
  border:             1px solid white;
  background:         linear-gradient(to bottom, #db6363 0%,#ff0000 100%); /* W3C */
}
nav ul li ul li#cover_mobile {
  display:            none;
}
/** Anpassungen Checkbox+Label (Button) **/
input#open-menu {
  display:            none;
}
input[type=checkbox]:checked ~ nav {
  display:            block;
}
label.open-menu-label {
  background:         linear-gradient(to bottom, #db6363 0%,#ff0000 100%); /* W3C */
  padding:            10px 10px;
  border:             1px solid white;
  display:            block;
  font-family:        SegoeUI, Arial, Helvetica, sans-serif;
  font-weight:        bold;
}


/***********************************************/
/*                                             */
/*  Header mit Titelei, ohne Cover auf Mobile  */
/*                                             */
/***********************************************/
header {
  margin:             2em 0;
}
header section#titelei {
  padding:            0.6em;
  border-radius:      1em;
  font-family:        "Helvetica Rounded LT Std", SegoeUI, Arial, Helvetica, sans-serif;
  color:              red;
  text-shadow:        0 0 2em #ff8d8d, 0 0 2em #ff8d8d;
}
header section figure {
  text-align:         center;
  max-width:          100%;
  height:             auto;
}
header section#titelei h2 {
  margin:             0;
  text-align:         center;
  font-size:          3em;
}
header section#titelei h3 {
  margin:             0;
  text-align:         center;
  font-size:          2em;
  color:              #F5FFFA;
}
header section#titelei h4 {
  margin:             0;
  text-align:         center;
  font-weight:        bold;
  font-size:          1.5em;
  color:              #F5FFFA;
}
header section#titelei h5 {
  margin:             0;
  text-align:         center;
  font-size:          1.33em;
  font-style:         italic;
}
header section#titelei h6 {
  margin:             0;
  text-align:         center;
  font-size:          1.33em;
  font-style:         italic;
  color:              #F5FFFA;
}
/* Cover ans Ende setzen */
header section#cover {
  display:            none;
}


/***********************************************/
/*                                             */
/*   Vorspann "Was bisher geschah"             */
/*   und "Hauptpersonen"                       */
/*                                             */
/***********************************************/
aside section {
  margin:             0.3em 0;
  padding:            0.5em;
  border-radius:      0.5em;
  background-color:   #F5FFFA;
}
aside h3 {
  font-style:         normal;
  font-size:          1.05em;
  font-weight:        bold;
  color:              red;
}
aside section#bisher {
  font-style:         italic;
}


/***********************************************/
/*                                             */
/*   Romaninhalt als Akkordeon                 */
/*                                             */
/***********************************************/
details {
  border-top:         1px solid #1d235d;
  background-color:   #F5FFFA;
}
details:first-child {
  border-top: none;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
}
details:last-child {
  border-radius:      0;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}
details h2 {
  padding:            0 0.5em 0.5em 0.5em;
  font-family:        Helvetica, Arial, Calibri, sans-serif;
  font-size:          1.5em;
  font-weight:        bold;
  color:              red;
}
details h2 + h2 {
  margin-top:         0.5em;
}
details h3 {
  padding:            0.5em 0.5em 0 0.5em;
  font-size:          1.5em;
  font-style:         italic;
  font-weight:        bold;
  text-align:         center;
  color:              red;
}
details h4 {
  margin:             0;
  margin-top:         1em;
  padding:            0 0.5em;
  font-size:          1.05em;
  font-weight:        bold;
  text-align:         left;
  color:              red;
}
details h5 { /* Sternchen-Formatierung */
  padding:            1em 0;
  text-indent:        0;
  text-align:         center;
  font-size:          1em;
  font-weight:        bold;
  color:              red;
}
details h6 {
  margin:             0;
  margin-top:         1em;
  padding:            0 0.5em;
  font-size:          1.05em;
  font-style:         italic;
  text-align:         left;
  color:              red;
}
details figure {
  padding:            0.5em;
  text-align:         center;
  max-width:          100%;
  height:             auto;
}
details p {
  margin:             0;
  padding:            0 0.5em;
}
details p.erster_absatz { /* für besondere Zwecke */
  text-indent:        0;
}
details p.signatur {
  text-indent:        0;
  font-style:         italic;
  text-align:         right;
}
details p.bemerkung {
  text-indent:        -3em;
  padding:            0 0 0 3.5em;
}
details p#ende {
  padding:            1em 0 0.5em 0;
  text-align:         center;
  text-transform:     uppercase;
}
details p#abspann {
  text-indent:        0;
  font-style:         italic;
}
details p#next {
  padding:            0.5em;
  text-align:         center;
  font-style:         italic;
  text-transform:     uppercase;
}
details table {
  text-indent:        0;
  margin:             0 0.5em;
  padding:            0;
}
details ul {
  display:            block;
  list-style-type:    disc;
  margin-top:         0.5em;
  margin-bottom:      1em;
  margin-left:        0;
  margin-right:       0;
  padding-left:       2.5em;
}


/***********************************************/
/*                                             */
/*   Fußzeile mit Impressum                    */
/*                                             */
/***********************************************/
footer {
  margin-top:         0.5em;
  margin-bottom:      1em;
  padding:            0.5em;
  padding-bottom:     1em;
  background-color:   #F5FFFa;
  border-radius:      0.5em;
  text-align:         center;
  font-size:          small;
}
footer p {
  padding:            0 0.5em;
}


/***********************************************/
/*                                             */
/*   Button 'Zum Anfang der Seite springen'    */
/*                                             */
/***********************************************/
.button_top {
  position:           relative;
  right:              0;
  bottom:             0.3em;
  margin:             0.7em 0.5em 0 auto;
  padding:            0;
  width:              1.5em;
  text-indent:        0;
  text-align:         center;
  font-size:          x-large;
}
.button_top a {
  color:              red;
  text-decoration:    none;
}
.button_top a:hover,
.button_top a:focus {
  color:              #00ff00;
}


/***********************************************/
/*                                             */
/*   Media Querie für Viewports >= 50em        */
/*                                             */
/***********************************************/
@media screen and (min-width: 50em) {
  body {
    max-width:        50em;
    margin:           0 auto;
    font-size:        larger;
  }


  /***********************************************/
  /*                                             */
  /*   Formatierung für Destop-Ansicht           */
  /*                                             */
  /***********************************************/
  label, input, nav {
    display: none;
  }


  /***********************************************/
  /*                                             */
  /*   Navigation                                */
  /*   Label wird ausgeblendet                   */
  /*                                             */
  /***********************************************/
  label.open-menu-label {
    display:          none;
  }
  nav {
    display:          block;
    position:         absolute;
    top:              0;
    left:             0;
    box-sizing:       border-box;
    float:            left;
    font-size:        1.1em;
    font-family:      SegoeUI, Arial, Helvetica, sans-serif;
    font-weight:      normal;
  }
  /* Menü: 1. Ebene */
  nav ul {
    margin:           0 20px;
    padding:          0;
    width:            auto;
  }
  nav a {
    display:          block;
    color:            red;
    text-decoration:  none;
  }
  nav ul li {
    position:         relative;
    float:            left;
    margin:           0;
    padding:          0;
    list-style:       none;
    border:           none;
    background:       none;
  }
  nav ul li a {
    padding:          5px;
    padding-right:    3em;
  }
  nav ul li:hover > ul {
    top:              100%;
    left:             0;
  }
  nav ul li ul li#cover_mobile {
    display:          block;
  }
  /* Dreieck neben Menü-Einträgen 1. Ebene */
  nav ul li.submenue > a:after {
    position:         relative;
    float:            right;
    content:          '';
    margin-top:       0.5em;
    margin-left:      0.3em;
    border-top:       5px solid red;
    border-left:      5px solid transparent;
    border-right:     5px solid transparent;
    border-bottom:    5px solid transparent;
  }
  /* Menü: 2. Ebene */
  nav ul ul {
    position:         absolute;
    top:              -9999px;
    left:             -9999px;
    background-image: url(Sternenhimmel.gif);
    background-attachment: fixed;
    background-repeat:  repeat;
    border-top-right-radius: 1em;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
  }
  nav ul ul li {
    float:            none;
    padding:          0 3px;
  }
  .inhalt {
    width:            31em;
  }
  .formate {
    width:            21em;
  }
  .goto {
    width:            11em;
  }
  nav ul ul li a:hover {
    color:            #ffffff;
    text-shadow:      0 0 0.8em #ffffff, 0 0 0.8em #ffffff; /* Leuchtschatten unter Schrift */
  }


  /***********************************************/
  /*                                             */
  /*   Titelei                                   */
  /*   jetzt mit Cover rechts                    */
  /*                                             */
  /***********************************************/
  header {
    display:          flex;
    flex-direction:   row;
  }
  header section#titelei {
    flex:             2;
  }
  header section#cover {
    display:          block;
    flex:             1;
  }
  

  /***********************************************/
  /*                                             */
  /*   Vorspann "Was bisher geschah" und         */
  /*   "Hauptpersonen" nebeneinander             */
  /*                                             */
  /***********************************************/
  aside {
    display:          flex;
    flex-direction:   row;
  }
  aside section {
    flex:             1;
    border-right:     thin solid #1d235d;
    padding:          1em;
  }
  aside section#bisher {
    border-radius:    0;
    border-top-left-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
  }
  aside section#personen {
    border-radius:    0;
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
  }
  
  main section {
    padding:          0.5em;
  }
  #cover_am_ende_fuer_mobile {
    display:          none;
  }
}