:root {

/* Farben für das neue Design */
  --zeidAccentColor: #008877;
  --zeidBackColor: #e9eceb;
  --zeidEntityColor:#3A8677;
  --zeidHeaderColor:#9DC2BB;
  --zeidLineNumberColor:#B9B9B9;
  --zeidMainColor: #235047;
  --zeidWhite: #FFFFFF;
   --overlayColor: 34, 84, 74;
}

#euredLogo{
    height: 1.3rem;
    padding-right: 0.4rem;
    vertical-align:middle;
}

h3 {
    text-align:center;
}

nav >ul > li > button {
    font-weight:600;
}

nav button {
   text-align:unset;
}

/* Kooperationspartner */

/* Kooperationspartner- Ende */
/* Slider für  Startseite  */



.slideImage{
    border-radius: 0.2rem;
    filter:
    brightness(0.6)
    sepia(2)
    hue-rotate(116deg)
    saturate(1);
}
.start > h2 {
    display:none;
}

/*  Slider Ende */

/* Responsiveness */

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


aside{
    margin-top:4.6em;
    
}

/\*main{
   display:none;
}*\/
nav {
    z-index:9999;
}


}*/

/* Anpassungen für neues Design */
/*  neues Design */



#cookieConsent{
    height:8rem;
}


body {
    background: white;
}

body > aside, body > main {
    margin-top:1.2rem;
    background: white;
}

/* header */

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 */
    z-index:1;
    height:10rem;
    width:100%;
}

body > header > #zeidSidebar {
    z-index:1200;
}

#copy, #zeidToCopy{
    display:block;
}

.headerCentre {
    align-items: center;
    background-color: var(--zeidMainColor);
    border: none;
    display: block;
    height:6rem;
    justify-content: center; /* Center content vertically */       
    width:100%;
}


.headerCentre > h2 {
   color:white;
   font-family:"Arial";
   font-size: 1.4rem;
   letter-spacing: 0.3rem;
   font-weight:bold;
   float: left;
   margin-bottom: 0rem;
   margin-top: 1rem;
   padding-left: 11rem;

   
}

.headerCentre > h3 {
   color:white;
   font-family:"Poppins";
   font-size: 1rem;
   font-weight:400;
   float:left;
   padding-left: 12.3rem;
   width: 100%;
   display:block;
   text-align:initial;
   margin-bottom: 1rem;
}



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


.headerSide:last-of-type{
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.4);
    display: block;
    flex-direction: column;
    margin: auto; 
    margin-bottom: 0.7rem;
    padding-top: 1rem;
    width: 100%;
    z-index: -1;
}

.headerSide:last-of-type > * {
    max-width: 100%;
    padding-left: 12rem;
}

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



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

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

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

}

#people{
    width:auto;
    position:absolute;
    bottom:100px;
}

.people{
    padding:0;
}
.people > *{
    box-sizing: border-box;
    font-size: 14px;
    margin: 0;
    padding:0;
    text-align:left;
}

.submit {
    background-color: var(--zeidEntityColor);
    border: none;
    border-radius: 6%;
    height:2.3rem;
    padding: 0.4rem;
    width: 2.3rem;
}
#toggleAside{
    display:none;
}

#zeidToCopy, #zeidToCopy > *{
    color:white;
}

#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;
}

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

#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.3rem; /* Position below the header */
    transition: right 1s ease; 
    width:15%; 
}    

.optionsList li:nth-child(2) > a {
    border-left: 1px solid var(--zeidMainColor);
    padding-left: 2rem;
}



/*  header Ende */


/* aside nav */

aside {
    margin-left:4rem;
    margin-top:24.2rem;
}
main {
    margin-top:24.2rem;
    margin-right:4rem;
}


aside > nav > ul * {
    margin-top: 0.5rem;
}

aside > nav button {
    padding-left:1rem;
    border-radius: 0.3rem;
}

aside > nav button:hover {
    background-color:var(--zeidBackColor);
}
/* aside nav ende */




/*  Anpassungen rechte Seite */

#startRight {
    background: var(--zeidWhite);
    
}

#startRight > h1 {
    padding-bottom: 0;
}

#nav {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    margin-top:0;
}

#nav button {
    font-weight:700;
    border:none;
    background:none;  
}

#nav > ul {
    flex-wrap:wrap;
    list-style-type: none;
    padding-top: 2rem; 
    width: 66%;
    justify-content: center;
}

#nav > ul > li {
    box-sizing: border-box;
    font-size: 1.1rem;
    min-height: 10rem;
    margin: 2rem;
    padding:2rem;
    width: auto;
    background: var(--zeidWhite);
    border: 1px solid var(--zeidLineNumberColor);   
    border-radius: 2%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#nav > ul > li > .wdbNav.level{
    font-size:1.5rem;
    padding-bottom:1rem;
}

#nav > ul > li:hover {
    background-color:var(--zeidBackColor);  
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    color: var(--zeidAccentColor);
}

#nav > ul > li > ul {
    list-style-type: none;
    min-width:200px;
}


#nav > ul > li > * :hover{
    color: var(--zeidAccentColor);
}
form{
    margin-top:1.5rem;
    position:absolute;
}

textarea {
    align-items: center;
    border: 1px solid lightgrey;
    border-radius: 5px;
    justify-content: center;
    vertical-align:top;
    width:44%;
}


/* Ende Anpassungen rechte Seite */


/* kleinere Viewports */


@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:first-of-type{
    grid-area: hl;
    height:2.1rem;
    width:auto;
}
.headerSide:last-of-type{
    display:block;
    height:4rem;
    justify-content:space-between;

}

.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%; 
}

}

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

body > header {
    position:initial;
}
.headerSide {
}
.headerSide:first-of-type {
    width: 100%;
    
}

.headerSide form {
    margin:1.5rem;
}
}
/*  neues Design Ende */

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