:root {
    

    --Trappel-Blaudunkel: rgba(0, 176, 240, 1);
    --Trappel-Blauhell: rgba(166, 202, 236, 0.65);
    --Trappel-Gruen: rgba(179, 224, 134, 0.65);
    --Trappel-Orange: rgba(248, 212, 110, 0.80);
    --Trappel-Eierschale: rgba(255, 252, 251, 0.55);
    --Trappel-Rosa: rgba(242, 224, 236, 1);
    --Trappel-Lila: rgba(120, 32, 10, .75);
 
    --header-height: var(--hamburger-space-needed) ;
    --header-color: var(--Trappel-Lila);
    
}

html {
    scroll-behavior: smooth;
}

header {
    position:fixed;
    display:flex;
    justify-content: center;
    z-index:10;
    background-color: var(--header-color);
    top:0; left:0;
    width:100vw;
    height: var(--header-height);
}

#PageCaption {
    color:white;
    font-size: larger;
}

body {
    height:100vh;
    overflow: hidden;
}
main {
   border-top: calc(var(--header-height)) solid rgba(0, 0, 0, 0);
   overflow: scroll;
   height: 100vh;
}



.TwoColumn {
    display:grid;
    grid-template-columns: 0.3fr 1fr;  
}




section {
    min-height: 87vh;
    padding-left: 12em;
    padding-right: 1em;
    padding-top: 5px;
    border-bottom:2px solid black;

    font-size: larger;
}

section p {
    max-width: 50rem;
}

nav a {
    display:block;
}

section#Seite1 {
    background-color:  var(--Trappel-Rosa);
    /* padding-left: 22em; */
    padding-left: max(25vw, 9em);
}
section#Seite2, section#Seite3, section#Seite9 {
    background-color: var(--Trappel-Blauhell);
}

section#Seite4 {
    background-color: var(--Trappel-Gruen);
}

section#Seite5 {
    background-color: var(--Trappel-Orange);
}

section#Seite6, section#Seite7, section#Seite8 {
    background-color: var(--Trappel-Eierschale);
}

section#Seite10 {
    background-color:  var(--Trappel-Blauhell);
}

#Seite1DekorImage1 {
    margin-left: 100px;
}

#Seite1DekorImage2 {
    margin-left: 50px;

}

.SchildFloatRight {
    float:right;
}

#Seite3Frame {
    max-width: fit-content;
}