/*  EuReD-Anpassungen 
 Synopsis:
We use a three-color color scheme with additional white and black. 
 *  We use custom properties in css that are named as follows:
 *  --zeidMainColor: #54625e;
 *  --zeidAccentColor: #008877; (ULB Green)
 *  --zeidBackColor: #E9ECEB;
*/
  
  
  :root {
  --zeidMainColor: #54625e;
  --zeidAccentColor: #008877;
  --zeidBackColor: #e9eceb;
  /* projektspezifische Farben */
  --euredPersColor:#9f353b ;
  --euredPlaceColor:#497e00;
  
  
    /* neues Farbschema */
  
  --zeidAccentColor: #008877;
  --zeidBackColor: #e9eceb;
  --zeidEntityColor:#3A8677;
  --zeidHeaderColor:#9DC2BB;
  --zeidLineNumberColor:#B9B9B9;
  --zeidMainColor: #235047;
  --zeidWhite: #FFFFFF;
  --zeidPagebreak: #A1A1A1;
 
}

.controls{
    display:none;
}

/* Anpassungen zur korrekten Zentrierung - 2022-09-21 DK */
  header h2 {
      background-color:inherit;
  }

  /*  header-Anpassungen Ende */
  
  header > nav {
      z-index:1000;
  }
aside {
    overflow:hidden;
}
aside nav {
    display:block;
    max-height: calc(100vh - 12rem) !important; 
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
}

#cnt nav {
    display: block;
    flex-wrap: wrap; 
    flex-direction: row; 
    gap: 10px;
    padding: 10px !important;
    width: 100% !important;
    overflow-y: auto !important;
    max-height: 400px; /* Adjust this so it doesn't push the footer away */
}

/* Style the individual list items/buttons to look like tags */
aside > #cnt > div > div > nav ul li {
    display: inline-block !important;
    width: auto !important; /* Let buttons define their own width */
    margin: 0 !important;
    background-color: transparent !important;
}

aside #cnt nav ul li button {
    padding: 5px 10px !important;
    border: 1px solid var(--zeidMainColor) !important;
    border-radius: 4px !important;
    white-space: nowrap !important; /* Keep [Blatt: Ar] on one line */
    cursor: pointer;
    background-color: var(--zeidWhite);
}

.inactive{
    color: var(--zeidLineNumberColor)!important;
    cursor: default; 
    text-decoration: none;   
}



.inactive:hover::after {
    opacity: 1; 
}



/* Padding für Haupttext; 2022-09-21 DK */
main {
  padding: 0 1em;
}


/* Verhindert Einrücken von Texten in den Modulbezeichnungen auf den Text-Seiten */

nav button {
   text-align:unset;
   background-color:var(--zeidWhite);
}

nav li {
    background-color: var(--zeidWhite);
}

nav > ul > li > button:first-child {
    font-weight: 900;
}
  
  /*  generelle Anpassungen */
  a{
      color:var(--zeidAccentColor);
      text-decoration:none;
  }
  a:visited {
      color:var(--zeidAccentColor);
      text-decoration:none;
  }

/* bessere Positionierung Nummer im floating Text */
.floating .fn_number_app {
  color: black;
  font-size: 1em;
  padding-right: .5em;
  white-space: nowrap;
}
    .fn_number_app{
      vertical-align:super;
      color: blue;
      font-size: 0.7em;
  }
  
.fnNumber{
    color:blue;
}

a .fnNumber{

    vertical-align: super;
      font-size: 0.7em;
      display: inline-block;
      margin-left: 1em; 
      margin-right: 0.3em;   
}
  
  
    #doc_footer{
      margin-top: 2rem;
      display:block;
  }
  

.euredTextEditor{
    font-weight:200;
}
 
#euredLogo{
    height: 1.3rem;
    padding-right: 0.4rem;
    vertical-align:middle;
}
 
#marginaliaContainer{
    display:block;
}

/*  display: contents; ergänzt, damit Text umgebrochen werden kann, und
 *   cursor: pointer für besser Sichtbarkeit der Funktion; 2022-09-20 DK */
button.entity{
    background: none;
    border:none;
    cursor: pointer;
    display: contents;
}
.person{
color: var(--euredPersColor);
}
.place{
     color: var(--euredPlaceColor);
 }
 
 /*  Events und Orgs vorerst ausgeblendet: 22-08-2022 */
/*  vorrübergehende Änderungen, zur Unsichtbarmachung d. entsprechenden Tags im Text */
.event,.org{ 
    all:reset;
    color:inherit;
    cursor:text;
    pointer-events:none;
    font-weight:inherit;
}
.bibl {
     color:var(--zeidAccentColor); 
     cursor:pointer;
}

.italic{
    font-style:italic;
}
  
 footer span a {
     color:white;
 }
  /* generelle Anpassungen-Ende */

/* wiederholte Titel (wg. Fußnoten); 2022-09-21 DK */
main h1 {
  text-align: center;
  font-size: 1.5em;
}

  /*  Einleitung-Anpassungen */
  


 #headings {
      display: none;
      border:1px black solid;
      font-size:0.8em;
       margin-bottom:2em;
       background-color:#EEE;
  }
.heading{
      font-size:1rem;
      background-color:inherit;
  }

#doc_header_text{
padding-top:0.2em;
    letter-spacing: 0.2em;
}
  
#caption{
      font-weight: bold;
  }
  
#responsibility {
      font-weight: normal;
  }
  
  
 .content{
      text-align:justify;
      margin-bottom:0.02em;
      position:relative;
     
  }
  ul {
      list-style:none;
  }
  


main > div, main > hr {
  width: 100%;
}

  /* Einleitung */
  
  h2 {
      font-size:1em;
      color:black;
      text-align:left;
      background-color:#EEE;
      padding: 0.3em 0;
      margin-top:1em;
      position:relative;
      width:100%;
      counter-reset: h3;
  }
  
   
 /* Counter in der Einleitung */ 
 body{
     counter-reset: head2;
 }

h2.heading:before{
    counter-increment:  head2;
    content: counter(head2) ". ";
}
h2.heading{
    counter-reset: head3 head4 head5 head6;
}

h3.heading:before{
    counter-increment:head3;
    content:counter(head2) "."counter(head3) " ";
}

h3.heading{
    counter-reset: head4 head5 head6;
}

h4.heading:before{
    counter-increment:head4;
    content:counter(head2)"."counter(head3)"."counter(head4)" ";
}

h4.heading{
    counter-reset: head5 head6;
}

h5.heading:before{
    counter-increment:head5;
    content:counter(head2)"."counter(head3)"."counter(head4)"."counter(head5)" ";
}
h5.heading{
    counter-reset: head6;
}

h6.heading:before{
    counter-increment:head6;
    content:counter(head2)"."counter(head3)"."counter(head4)"."counter(head5)" ."counter(head6)" ";
}


  
 /* Counter-Ende */
  
  #switchlayer{
      cursor:pointer;
  }
  
  #hidden{
      display:none;
  }
  
  /*  Einleitung-Anpassungen Ende */
  
  /*  Anpassungen in Editionen */
  
  .rdg{
      display:none;
  }
  .orig{
      display:none;
  }
  
  /*  wollen wir das wirklich so? */
  #doc_header_text, 
  #doc_header_line{
      display:none;
  }
.dispatcher{
    padding-top:2em;
    display:none;
}
/*  wollen wir das wirklich so - Ende */
 


  .lineNumber{
    color: rgb(219,29,29);
    display: inline-block;
    width: 2.5em;
    margin-left:0;
    padding-left:0;
}

#asdf{
    z-index:9999999;
}



 
button.pagebreak{
    background:var(--zeidBackColor);
 }
  
  
  .pShow{
    position: relative;
    background-color: #EEE;
    border: 1px solid #000;
	min-width: 20px;
	min-height: 20px;
	max-width: 70%;
	margin: 10px;
	padding: 10px;
	border-radius: 5px;
	}
.pShow img { 
	position:absolute; 
	top:-8px; 
	right:-8px; 
	width: 16px;
	cursor: pointer;
	}
 
 .pResp{
   display:block;
   margin:0.4em 0;
   /* text-indent:2.5em; */
 }
 

.pResp::before{
    content:" -----";
    color:var(--zeidBackColor);
 }


.pResp.lineNumber{
   margin-right:0.3em;
}


 .smallcaps{
     font-variant:small-caps;
 }
  
  
  /*  Verweise Anpassungen */
  :target {
/*    background-color: rgb(187, 187, 187);*/
  background-color: lightyellow;
}
  /*  Verweise Ende */
  /*  Editionen-Anpassungen  Ende*/
  
  
  /*  Register-Anpassungen */
  /*  Aufzählung aus Register entfernen */

/*  Ausblenden der register in einzelnen Dateien */
 #info_person{
        display:none;
    }
 #info_place{
        display:none;
    }
body > footer{
    background-color: var(--zeidMainColor);
    color:white;
    /*display:none;*/
    
}



/*  Register-Anpassungen Ende */


/* Anpassungen für das neue Design */

/*  header-Anpassungen */


  
  body{
      grid-template-columns: 5fr 7fr;
  }
  
  body > header {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
    display: grid;
    grid-template-columns: 1fr; /* Single column layout */
    grid-template-rows: auto auto; /* Two rows, one for headerSide and one for headerCentre */
    grid-template-areas:
        "hl" /* Grid area for headerSide:first-of-type */
        "hc" /* Grid area for headerCentre */
        "hr"; /* grid area for headerSide:last-of-type */
    height: 10rem; /* Adjusted height */
    z-index: 1;
    margin-bottom: 20px;
}

.headerCentre {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align items to the start of the column */
    justify-content: center; /* Center content vertically */
    border: none;
    height:6rem;
}

.headerCentre h2 {
    background-color: inherit;
    font-weight: 900;
    font-size: 1rem;
    margin-left: 0;
    text-align: left;
    overflow: hidden;
    padding-left: 12.3rem;
}

.textgrundlage{
    font-weight:50;
    font-family:arial;
    display:block;
    padding-left:12.3rem;
    color: var(--zeidLineNumberColor);
}

.headerSide {
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0;
    height:2rem;
}

.headerSide:last-of-type {
    flex-shrink: 0 !important; 
    min-width: fit-content !important; 
    overflow: visible !important; /* Allows the dropdown to pop out */
}

.headerSide:last-of-type > * > li > a {
    font-family: sans-serif;
    color: var(--zeidMainColor);
}


#showNavLink{
    background: inherit;
    border: none;
    border-left: 1px solid var(--zeidMainColor);
    color: var(--zeidMainColor);
    font-family: sans-serif;
    font-size: 1rem;
    padding-left: 2rem;
}


.zeidLogo {
    margin-left: 1rem;
    height: 1.5rem;
    padding-top: 0.3rem;
}

/* Additional styling for the h2 and h3 tags */
header h2 {
    font-weight: 900;
    font-size: 36px;
    margin-left: 0;
    text-align: left;
    overflow: visible;
    background-color: inherit;
}

.headerCentre h3 {
    color: var(--zeidWhite);
    font-family: "Arial";
    font-weight: 700;
    margin: 0;
    padding-left: 12.3rem;
    }
 
  
 body > header nav {
    display:none;
    height:90vh;
    padding-top:0;
    position:relative;
    top:0;
    z-index: 2;
    border: 1px solid var(--zeidMainColor);
    border-radius: 0.3rem;
    margin:0.7rem;
    margin-right: 1rem;
    padding: 0.6rem;
    background-color: var(--zeidWhite);
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);  
  }
  

  
  
 
#zeidGearMenu{
  /* enthält Werkzeuge zum Manipulieren der Ansicht */
  left:300px;
  top:0;
}

  #zeidGearHeaderButton{
      border:none;
      border-radius: 50%;
      background-color: var(--zeidMainColor);
      display: flex; 
      align-items: center; 
      justify-content: center;
      height:50px;
      width: 50px;
     /* position: absolute;
      top: calc(50vh + 300px);
      left: calc(50vw + 700px);*/
      position: absolute; 
      bottom: 5rem; 
      right: 1.5rem; 
      z-index: 9999;
      }
  
    #zeidGearHeaderButton > img {
       fill: white;
       height: 40px;
       width:auto;
      /* position:center;*/
      margin: auto;
  }
  
/*    #zeidGearDropdownMenu {       
       background-color: white; 
       border: 1px solid #ccc;   
       bottom: 8.5rem;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
       display:none;  
       position: absolute;
       right: 3rem;
       width: 9rem;
       z-index: 999;
       padding: 0;
       margin: 0;
   }*/
   
     #zeidGearDropdownMenu {       
       background-color: white; 
       border: 2px solid var(--zeidEntityColor);   
       border-radius:4px;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
       position: absolute!important;
       right: 1.5rem;
       top:15rem;
       z-index: 10000;
       padding: 0;
       margin: 0;
   }
   
   #zeidGearDropdownMenu li {
        list-style: none;
    }
    
    #zeidGearDropdownMenu ul {
        padding: 0;
        width: 9rem;
    }
   
#zeidGearDropdownMenu h4 {
    margin: 0 0.4rem;
   
}

   
   /*#zeidGearDropdownMenu li:not(:last-child) {
       border-bottom: 1px solid #ccc; 
   }*/
   
    #zeidGearDropdownMenu li button, #zeidGearDropdownMenu li a {
       display: block;
       width: auto;
       padding: 0.6rem;
       text-align: left;
       background: none;
       border: none;
       cursor: pointer;
       font-family: mufi; 
       font-size:0.9rem;
   }
   
      #zeidGearDropdownMenu li button:hover {
       background-color: #f0f0f0;
   }
   
    #zeidGearDropdownMenu li button#cancelQuote,#zeidGearDropdownMenu li button#quote{
      border: 1px solid var(--zeidMainColor);
      display:block;
      margin: 0.3rem;
  }
   
/*   button und #zeidDownload sind gleich gestylt*/
   
   #zeidDownload {
    display: block;
    width: auto;
    padding: 0.6rem;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    color: black;
}
  
 #zeidDownload:hover {
       background-color: #f0f0f0;
   }   



   
   #zeidToggleHeaderButton:hover{
       box-shadow: 0 4px 8px rgba(0,0,0,0.8);
       color: var(--zeidLineNumberColor);
    }
      

    #zeidToggleHeaderButton {
       top:2.8rem;
       height: 50px; 
       width: 50px;
       border-radius: 100%;
       border:none;
       float: right;
       right: 10rem;
       position: absolute;
       margin-bottom: 3rem;
       margin-right:4rem;
    }
    #zeidToggleHeaderButton:hover, #zeidSwitchSideButton:hover{
        background-color:var(--zeidAccentColor);
    }

#zeidToCopy {
    background: white;
    border: 2px solid lightgrey;
    bottom: 15rem;
    display: none;
    padding: 1rem;
    height: 25rem;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999; /* Ensure it's above all other elements /
    / Optional styles for the centered element */
}

#headerSearchBar {
        display: flex;
        justify-content: center;
        align-items: center;
        height: auto;
        max-width: 100%;
        width: 33%;
    }
    
#headerSearchBar div {
        height: auto;
        overflow: auto;
        width: 100%;#dropdown_1, #dropdown_2, #dropdown_3

            
}

.submit {
    background-color: var(--zeidEntityColor);
    border: none;
    border-radius: 10%;
    margin-left:1rem;
}

textarea {
    align-items: center;
    border: 1px solid lightgrey;
    border-radius: 5px;
    justify-content: center;
    vertical-align:top;
    width:60%;
    height: 1.3rem;
}
    
  /*  header-Anpassungen Ende */
  
   /* Layout-Anpassungen */
  
 body > aside { 
      grid-area:left; /* kommt aus view.css */
      background-color: var(--zeidBackColor);
      width:90%;
      /*display:block;*/
  }
  
 body > main {

      background: var(--zeidWhite);    /* kommt aus wdb.css */
      grid-area: right;    /* kommt aus view.css */
      width:auto;
      padding-right: 5rem;
      line-height: 1.7rem;
      
  }
  
   #content_container{
     /*position:relative;*/
     padding-right: 7rem;
  }
  
  .fnNumber, .fn_number_app{
      color: var(--zeidEntityColor);
  }
  
  #marginaliaContainer{
      display:block;
      float:right;
  }
  
   
   /* Layout-Anpassungen Ende */
   
     /* wdbRight-Anpassungen */
    /*  wollen wir vertikale Tabs? */

  

  /* Anpassungen im Text */
 
   button.bibl,
   button.person,
   button.place,
   button.entity{
       color: var(--zeidEntityColor);
       background:inherit;
       font-family: mufi;
       font-size: inherit;
   }
   /*  events unsichtbar gemacht, KW */
   button.entity.event{
       color:black;
   }
   
   button.footnoteNumber{
   /* kommt aus view.css */
       color: var(--zeidEntityColor); 
       display: inline-block;
       font-size: 0.7em;
       margin-left:0; 
       margin-right: 0.3em;
       vertical-align: super;    
}

#dropdown_1, #dropdown_2, #dropdown_3 {
    align-items: center;
    border: 1px solid lightgrey;
    border-radius: 5px;
    justify-content: center;
    /*vertical-align: top;
    width: 60%;*/
    height: 2rem;
}

/*#dropdownForm{
    display:none;
}*/

#dropdownForm > input {
    background-color: var(--zeidAccentColor);
    border:none;
    border-radius: 5px;
    height: 2rem;
}

#dropdownForm > input:hover, #dropdown_1:hover, #dropdown_2:hover, #dropdown_3:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.8);
}
  
 footer {
     z-index: 1;
 }
 
 .footerLeft, .footerRight{
     display:none;
 }
   
.lineNumber{
      color: var(--zeidLineNumberColor);
      display: inline-block;
      margin-left: 2rem;
      margin-right: 1rem;
      width: 2.5em;
      
}
.marginText{
       color: var(--zeidAccentColor);
   }


  
.pResp:before{
      color: var(--zeidWhite);
  }
  
  
  #toggleMenu{
    align-items: center;
    background: var(--zeidWhite);
    border:none;
    display:flex;
    float:right;
    justify-content: center;
    margin-right:1rem;
    height:1.7rem;
    padding-top: 0.3rem;
}

option {
    font-size: 1.2rem;
    border-radius: 5px;
    
    
}


.optionsList{    
    display: inline-block;
    list-style-type: none;
    margin:0;
    width:66%;
    padding-left:11.3rem;
}

.optionsList li {
    display:inline;
    flex: 1;
    margin: 0.5rem;
    margin-right: 1.3rem;
}

button.entity.org {
    color:black;
    font-family: mufi;
}

#switchlayer{
      display:none;
  }


#zeidSidebar{
    background: var(--zeidMainColor);
    box-shadow: -4px 8px 15px rgba(0, 0, 0, 0.4);
    color:white;
    display:flex;
    height: calc(100vh - 2.3rem);
    padding: 1.3rem;
    position: absolute; /* Position relative to the body */
    right: -100%; /* Offscreen initially */
    top: 2.7rem; /* Position below the header */
    transition: right 1s ease; 
    width:15%;
    z-index: 100;
}    

#zeidSidebar > .optionsList {
    display:block;
    list-style-type: none;
    margin:0;
    width:66%;
}
#zeidSidebar > .optionsList > li {
    display: block;
    margin-right:0.3rem;
    margin-top:0.5rem;
}

#zeidSidebar > .optionsList > li > a {
    color: white;
}

#zeidSidebar > .optionsList > li > a:visited{
    color:lightgrey;
}
/* Anpassungen neues Design Ende */

/* Kleine Bildschirme */
@media screen and (max-height: 800px) {

nav {
    z-index:9999;
}


}
/* kleine Bildschirme */

@media screen and (max-height: 800px) {
body {
  grid-template-columns: 5fr 7fr;
}


.marginText{
    font-size:10px;
}

.dispOpts{
height: 2.7rem;
}

.dispOpts form{
padding-top: 1rem;
padding-bottom:1rem;
}


    header {
        display: grid;
        grid-template-columns: 1fr; /* Adjust as needed */
        grid-template-rows: auto auto auto; /* Two rows, one for headerSide and one for headerCentre */
        grid-template-areas:
         "hl" /* Grid area for headerSide:first-of-type */
         "hc" /* Grid area for headerCentre */
         "hr"; /* grid area for headerSide:last-of-type */
        position:sticky;
    z-index:1000;
    }
    .headerLeft {
        grid-area: hl;
    }
    .headerCentre {
        grid-area: hc;
    }
    .headerRight {
        grid-area: hr;
    }
}


/* kleine Bildschirme neues Design */
@media screen and (max-width:1366px) {
/* iPad mini 2019 funktioniert in Browserstack nicht ordentlich, 
 * bei Einstellungen im Browser tut es allerdings */
 
 
aside {
    display:none;
}
body {
    grid-template-columns: 1fr;
}

body > header{
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
    display: grid;
    grid-template-columns: 1fr; /* Single column layout */
    grid-template-rows: auto auto auto; /* Two rows, one for headerSide and one for headerCentre */
    grid-template-areas:
        "hl" /* Grid area for headerSide:first-of-type */
        "hc" /* Grid area for headerCentre */
        "hr"; /* grid area for headerSide:last-of-type */
    position:sticky;
    z-index:1000;
}

body > main{
    width:100%;
    grid-area:left;
}

.headerCentre , .headerSide{
    /*display: inline;*/
    width:100%;
}
.marginText{
    font-size:1rem;
}

.dispOpts{
height: 2.7rem;
}

.dispOpts form{
padding-top: 1rem;
padding-bottom:1rem;
}
/*warum ist #zeidGearDropdownMenu zweimal drin? nochmal oben
 * 
 * Antwort: das hier ist der kleine Viewport
 * */
/*#zeidGearDropdownMenu {       
   background-color: white; 
   border: 1px solid #ccc;   
   bottom: 120px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   display: grid;
   position: fixed;
   right: 30px;
   width: 80px;
   z-index: 999; 
   padding: 0;
}*/
/*
    #zeidGearDropdownMenu {       
       background-color: white; 
       border: 1px solid #ccc;   
       bottom: 10rem;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
       display:none;  
       position: absolute;
       right: 1rem;
       width: 9rem;
       z-index: 999;
       padding: 0;
       margin: 0;
   }*/

#zeidSwitchSideButton{
    display:none;
}

}
  /* Print-Anpassungen, KW 07.10.2020 */
  @media print {

* {
    padding-top:-2em;
    position:static;
    overflow:auto;
   
}

   main {
      
      margin-bottom:2em;
      padding-left:2.4em;
     
      
   }
   #content{
       margin-left:2em;
   }
    body {
  /*    break-before: avoid;
        break-inside: avoid-page;
        break-after: avoid-page;*/      
        color:black;
        display:block;
        grid-template-columns: 1fr 0fr;
        height:auto;
        margin-bottom:2em;
        overflow-x:hidden; 
        font-size:smaller;
        line-height: 1.4em;

    }
    
    .lineNumber{
       position:static;
       line-height:1.4em;
       font-size:smaller;
    }
    aside,main{
       color:black;

    }
    #wdbRight{
        display:block;
    }
    header,.headerSide, .headerCentre {
       display:none;
    }
    #caption *{
       margin:0;
    }
    p{
       overflow:visible;
    }    .pResp::before{
    color: white;
    content:"-----";
    }
    
    .rs-ref.place, .rs-ref.person, .rs-ref, .fnNumber{
       color:black;
    }
    footer, #button_bib {
        display:none;
    }
    .pb{

        overflow:visible;
    }
    #headings, #hidden{
        display: block;
        border:none;
    }
    #wdbContent {
        width: 100%;
        height:auto;
        overflow-x:hidden;
    }   
    #wdbShowHide {
        display:none;
    }
    #fac {
        display:none;
    }
    #ann{
        display:none;
    }
    #doc_header{
        display:none;
    }
     #doc_footer{
        display:none;
    }
    #info_person{
        display:none;
    }
    #info_place{
        display:none;
    }
    .dispatcher{
        display:none;
    }
}

@media screen and (max-width:1366px) {
/* iPad mini 2019 funktioniert in Browserstack nicht ordentlich, 
 * bei Einstellungen im Browser tut es allerdings */
body {
    grid-template-columns: 1fr;
}

aside {
    background: #fff; 
    box-shadow: 4px 8px 15px rgba(0, 0, 0, 0.4);
    height: calc(100vh - 11.1rem); 
    left: -100%; /* Offscreen initially */
    position: absolute; /* Position relative to the body */
    top: 11.5rem; /* Position below the header */
    transition: left 1s ease; 
    width: 60%; 
    z-index: 2; 
}

aside > * {
    font-size:1.6rem;
}

#toggleAside{
    align-items:center;
    background-color:white;
    border:none;
    display:flex;
    float:left;
    height:1.3rem;
    justify-content:center;
    width:auto;
    margin: 0;
    margin-left:1rem;
}
main{
    width:100%;
    grid-area:left;
}




body > header{
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
    display: inline;
    grid-template-columns: 1fr; /* Single column layout */
    grid-template-rows: auto auto auto; /* Two rows, one for headerSide and one for headerCentre */
    grid-template-areas:
        "hl" /* Grid area for headerSide:first-of-type */
        "hc" /* Grid area for headerCentre */
        "hr"; /* grid area for headerSide:last-of-type */
    height:11.1rem;
    position:sticky;
    /*z-index:auto;*/
}

.headerCentre {
    align-items: center;
    
    background-color: var(--zeidMainColor);
    background-image: none;
    background-size:cover, auto;
    background-position: center calc(66%);
    background-repeat: no-repeat;
    border: none;
    display: flex;
    flex-direction: column;
    height:5rem;
    justify-content: center; /* Center content vertically */       
}
.headerCentre h2 {
   color:white;
   font-family:"Source Serif Pro";
   font-size: 1.5rem;
   font-weight:bold;
   letter-spacing: initial;
}

.headerCentre h3{
    display:none;
}

.headerSide {
    background-color: var(--zeidWhite);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0;
    height:2rem;
}


.headerSide:first-of-type{
    grid-area: hl;
    height:2.1rem;
    width:auto;
}
.headerSide:last-of-type{
    display:block;
    height:4rem;
    justify-content:space-between;

}
.headerSide:last-of-type > ul {
    max-width: 100%;
    padding-left: 12rem;
    color:var(--zeidMainColor);
}

.headerCentre , .headerSide{
    /*display: inline;*/
    width:100%;
}
.marginText{
    font-size:0.6rem;
}

.dispOpts{
height: 2.7rem;
}

.dispOpts form{
padding-top: 1rem;
padding-bottom:1rem;
}

#zeidSidebar{
    width:30%; 
}

#zeidGearDropdownMenu li button#zeidSwitchSideButton{
    display:none;
}
}

@media screen and (max-width: 449px), screen and (max-height:767px) {

 body{
      grid-template-columns: 5fr 7fr;
  }

  body >  header {
        display: grid;
        grid-template-columns: 1fr; /* Adjust as needed */
        grid-template-rows: auto auto auto; /* Two rows, one for headerSide and one for headerCentre */
        grid-template-areas:
         "hl" /* Grid area for headerSide:first-of-type */
         "hc" /* Grid area for headerCentre */
         "hr"; /* grid area for headerSide:last-of-type */
        position:sticky;
    z-index:1000;
    }
.headerCentre{
    width:100%;
    margin-bottom: 0;
}


.headerSide:first-of-type {
    width: 100%;
    flex-direction: initial;
    grid-area: hl;
}

.headerSide:last-of-type {
    grid-area: hr;
    width: 100%;
    z-index: 0;
}

.headerSide #toggleMenu{
    float:right;
}


#zeidSidebar{
    z-index:10;
}
#zeidLogo{
    height:0.6rem;
    padding-top:0;
    display:none;
}

}

@media screen and (max-width: 767px), screen and (max-height: 767px){
    
}

@media screen and (max-width: 390px) {
body{
    grid-template-columns:1fr;
}

.headerCentre > h4{
    display:none;
}

#dropdownForm{
    display:block;
}
.lineNumber {
    margin-left: 0;
    margin-right: 0;
    width:2rem;
}

main{
    margin-top:0;
    padding-top:0;
}

#headerSearchBar{
    display:none;
}

#zeidSidebar{
    width:45%;
}

#zeidToggleHeaderButton{
    top:7rem;
    position:sticky;
}
}
.inactive{
    color: var(--zeidLineNumberColor);
    cursor: default; 
    text-decoration: none;
}

.inactive:hover::after {
    opacity: 1; 
}