@font-face {
	font-family: 'Roboto';
    src: url('fonts/Roboto-VariableFont_wdth\,wght.ttf') format('truetype');
	font-weight: 100 900;	
}

* {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Menu */
header {
    position: fixed;
    display: flex;
    left: 0;
    top: 0;
    width: 100vw;
    height: 3rem;
    align-items: center;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    gap: 4rem;
    background: white;
    z-index: 1;
}
header a {
    text-decoration: none;
    cursor: pointer;
}
h1 {
    font-size: 1.2rem;
    font-variation-settings: 'wght' 850, 'wdth' 100;
    line-height: auto;
    text-transform: uppercase;
}
.uebermich-kontakt {
    font-size: 1.2rem;
    font-variation-settings: 'wght' 850, 'wdth' 100;
    text-transform: uppercase;
    line-height: auto; 
}
/* Menu Ende */

body {
	font-family: 'Roboto';
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: white;
}
h2 {
    font-size: 6rem;
    font-variation-settings: 'wght' 650, 'wdth' 100;
}
p  {  
    font-size: 1.2rem;
    font-variation-settings: 'wght' 350, 'wdth' 100;
    margin-top: 0.3rem;
}
a {
    color: black;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    cursor: pointer;
}
a:hover{
    filter: grayscale(100%);
}
img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
main {
    margin-top: 1.5rem;
    margin-right: 2rem;
    margin-left: 2rem;
    margin-bottom: 1.5rem;
    flex: 1;
}
.kontakt{
    padding-top: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: baseline;
    align-items: baseline;
    hyphens: auto;
    width: 96vw;
}
.kontakt p {
    font-size: 2rem;
    font-variation-settings: 'wght' 310, 'wdth' 100;
    padding-bottom: 2rem;
}
summary{
    font-size: 2rem;
    font-variation-settings: 'wght' 310, 'wdth' 100;
    color: black;
    list-style: none;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px; 
    cursor: pointer;
}
summary::-webkit-details-marker {
    display: none;
}
li{
    font-size: 2rem;
    font-variation-settings: 'wght' 310, 'wdth' 100;
    list-style: none;
}
ul {
    padding-bottom: 2rem;
    list-style: none;
}

footer{
    position: static;
    padding-top: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 1.5rem;
}

/* Kapitels */
.parallax {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    cursor: pointer;
}
.anchor::before {
    content: "";
    display: block;
    height: 12rem;
    margin-top: -4rem;
    visibility: hidden;
}
.titel{
    position: absolute;
    margin-top: 1.75rem;
    margin-left: 2rem;
}
.inhalt {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(6rem, auto);
    grid-gap: 2rem;
    padding: 6rem;
    background: white;
}

/* Kapitel 1 */
#schneeball {
    margin-top: -4rem;
    grid-column: 1 / span 5;
    grid-row: 2 / span 4;
    cursor: pointer;
}
#jura {
    margin-top: -4rem;
    grid-column: 7 / span 6;
    grid-row: 1 / span 3;
    cursor: pointer;
}
#feuer {
    margin-top: -4rem;
    grid-column: 8 / span 4;
    grid-row: 4 / span 4;
    cursor: pointer;
}
#chberge {
    margin-top: -4rem;
    grid-column: 2 / span 6;
    grid-row: 7 / span 2;
    cursor: pointer;
}
#hypostase {
    margin-top: -4rem;
    grid-column: 8 / span 5;
    grid-row: 9 / span 3;
    cursor: pointer;
}
#flaschengeist{
    margin-top: -4rem;
    grid-column: 3 / span 4;
    grid-row: 10 / span 3;
    cursor: pointer;
}
#etang{
    margin-top: -4rem;
    grid-column: 7 / span 5;
    grid-row: 12 / span 3;
    cursor: pointer;
}
#wald{
    margin-top: -4rem;
    grid-column: 1 / span 4;
    grid-row: 13 / span 3;
    cursor: pointer;
}
#waldsee{
    margin-top: -4rem;
    grid-column: 5 / span 6;
    grid-row: 15 / span 3;
    cursor: pointer;
}
#zoom{
    margin-top: -4rem;
    grid-column: 3 / span 5;
    grid-row: 18 / span 6;
    cursor: pointer;
}

/* Kapitel 2 */
#genua{
    margin-top: -4rem;
    grid-column: 2 / span 4;
    grid-row: 1 / span 4;
    cursor: pointer;
}
#spachtel2{
    margin-top: -4rem;
    grid-column: 7 / span 5;
    grid-row: 2 / span 4;
    cursor: pointer;
}
#spachtel3{
    margin-top: -4rem;
    grid-column: 1 / span 6;
    grid-row: 5 / span 4;
    cursor: pointer;
}
#mannei{
    margin-top: -4rem;
    grid-column: 9 / span 4;
    grid-row: 6 / span 3;
    cursor: pointer;
}
#figuren{
    margin-top: -4rem;
    grid-column: 3 / span 5;
    grid-row: 9 / span 4;
    cursor: pointer;
}
#maschinerie{
    margin-top: -4rem;
    grid-column: 9 / span 3;
    grid-row: 11 / span 4;
    cursor: pointer;
}
#tor{
    margin-top: -4rem;
    grid-column: 1 / span 6;
    grid-row: 13 / span 3;
    cursor: pointer;
}
#figurenreihe{
    margin-top: -4rem;
    grid-column: 7 / span 6;
    grid-row: 15 / span 4;
    cursor: pointer;
}
#figuren2{
    margin-top: -4rem;
    grid-column: 3 / span 8;
    grid-row: 19 / span 6;
    cursor: pointer;
}

/* Kapitel 3 */
#vierkopfvogel{
    margin-top: -4rem;
    grid-column: 5 / span 4;
    grid-row: 1 / span 3;
    cursor: pointer;
}
#kaffeebohne{
    margin-top: -4rem;
    grid-column: 9 / span 4;
    grid-row: 2 / span 3;
    cursor: pointer;
}
#wasserwellen{
    margin-top: -4rem;
    grid-column: 3 / span 5;
    grid-row: 4 / span 3;
    cursor: pointer;
}
#wasserskulptur{
    margin-top: -4rem;
    grid-column: 8 / span 4;
    grid-row: 6 / span 3;
    cursor: pointer;
}
#guerkli{
    margin-top: -4rem;
    grid-column: 1 / span 4;
    grid-row: 7 / span 3;
    cursor: pointer;
}
#kommunikationsfluss{
    margin-top: -4rem;
    grid-column: 6 / span 5;
    grid-row: 9 / span 4;
    cursor: pointer;
}
#wienerli{
    margin-top: -4rem;
    grid-column: 2 / span 4;
    grid-row: 12 / span 3;
    cursor: pointer;
}
#maschinerie2{
    margin-top: -4rem;
    grid-column: 8 / span 5;
    grid-row: 13 / span 3;
    cursor: pointer;
}
#ufo2{
    margin-top: -4rem;
    grid-column: 3 / span 4;
    grid-row: 15 / span 3;
    cursor: pointer;
}
#torbogen{
    margin-top: -4rem;
    grid-column: 7 / span 4;
    grid-row: 17 / span 3;
    cursor: pointer;
}
#traeumende{
    margin-top: -4rem;
    grid-column: 1 / span 4;
    grid-row: 18 / span 3;
    cursor: pointer;
}
#nasenvogel{
    margin-top: -4rem;
    grid-column: 3 / span 4;
    grid-row: 21 / span 3;
    cursor: pointer;
}
#nasenvogel2{
    margin-top: -4rem;
    grid-column: 7 / span 4;
    grid-row: 22 / span 3;
    cursor: pointer;
}
#weitsicht{
    margin-top: -4rem;
    grid-column: 2 / span 4;
    grid-row: 24 / span 3;
    cursor: pointer;
}
#babelgum{
    margin-top: -4rem;
    grid-column: 8 / span 5;
    grid-row: 26 / span 4;
    cursor: pointer;
}
#ausserirdische{
    margin-top: -4rem;
    grid-column: 3 / span 4;
    grid-row: 28 / span 3;
    cursor: pointer;
}
#vierwelten{
    margin-top: -4rem;
    grid-column: 7 / span 4;
    grid-row: 30 / span 3;
    cursor: pointer;
}
#spekulation{
    margin-top: -4rem;
    grid-column: 8 / span 4;
    grid-row: 33 / span 3;
    cursor: pointer;
}
#rabea{
    margin-top: -4rem;
    grid-column: 2 / span 4;
    grid-row: 32 / span 6;
    cursor: pointer;
}
#alex{
    margin-top: -4rem;
    grid-column: 4 / span 6;
    grid-row: 38 / span 7;
    cursor: pointer;
}

/* Kapitel 4 */
#alltaeglich2{
    margin-top: -4rem;
    grid-column: 2 / span 4;
    grid-row: 2 / span 4;
    cursor: pointer;
}
#alltaeglich3{
    margin-top: -4rem;
    grid-column: 7 / span 4;
    grid-row: 4 / span 4;
    cursor: pointer;
}
#alltaeglich4{
    margin-top: -4rem;
    grid-column: 3 / span 4;
    grid-row: 7 / span 4;
    cursor: pointer;
}
#alltaeglich5{
    margin-top: -4rem;
    grid-column: 9 / span 4;
    grid-row: 9 / span 5;
    cursor: pointer;
}
#alltaeglich6{
    margin-top: -4rem;
    grid-column: 1 / span 4;
    grid-row: 11 / span 3;
    cursor: pointer;
}
#alltaeglich7{
    margin-top: -4rem;
    grid-column: 3 / span 4;
    grid-row: 14 / span 3;
    cursor: pointer;
}
#alltaeglich8{
    margin-top: -4rem;
    grid-column: 8 / span 4;
    grid-row: 15 / span 5;
    cursor: pointer;
}
#alltaeglich9{
    margin-top: -4rem;
    grid-column: 2 / span 4;
    grid-row: 18 / span 5;
    cursor: pointer;
}
#alltaeglich10{
    margin-top: -4rem;
    grid-column: 7 / span 4;
    grid-row: 21 / span 5;
    cursor: pointer;
}
#alltaeglich11{
    margin-top: -4rem;
    grid-column: 1 / span 4;
    grid-row: 24 / span 5;
    cursor: pointer;
}
#alltaeglich12{
    margin-top: -4rem;
    grid-column: 9 / span 4;
    grid-row: 27 / span 5;
    cursor: pointer;
}
#alltaeglich13{
    margin-top: -4rem;
    grid-column: 3 / span 5;
    grid-row: 30 / span 6;
    cursor: pointer;
}
/* Kapitel 5 */
#einsamermensch2{
    margin-top: -4rem;
    grid-column: 8 / span 5;
    grid-row: 1 / span 3;
    cursor: pointer;
}
#einsamermensch3{
    margin-top: -4rem;
    grid-column: 2 / span 4;
    grid-row: 2 / span 4;
    cursor: pointer;
}
#einsamermensch4{
    margin-top: -4rem;
    grid-column: 7 / span 4;
    grid-row: 5 / span 4;
    cursor: pointer;
}
#einsamermensch5{
    grid-column: 1 / span 4;
    grid-row: 7 / span 4;
    cursor: pointer;
}
#einsamermensch6{
    margin-top: -4rem;
    grid-column: 5 / span 4;
    grid-row: 9 / span 4;
    cursor: pointer;
}
#einsamermensch7{
    margin-top: -4rem;
    grid-column: 9 / span 4;
    grid-row: 10 / span 4;
    cursor: pointer;
}
#einsamermensch8{
    margin-top: -4rem;
    grid-column: 2 / span 4;
    grid-row: 14 / span 4;
    cursor: pointer;
}
#einsamermensch9{
    margin-top: -4rem;
    grid-column: 8 / span 4;
    grid-row: 16 / span 4;
    cursor: pointer;
}
#einsamermensch10{
    grid-column: 3 / span 4;
    grid-row: 19 / span 4;
    cursor: pointer;
}
#einsamermensch11{
    margin-top: -4rem;
    grid-column: 7 / span 4;
    grid-row: 21 / span 4;
    cursor: pointer;
}
#einsamermensch12{
    margin-top: -4rem;
    grid-column: 1 / span 4;
    grid-row: 24 / span 4;
    cursor: pointer;
}
#einsamermensch13{
    margin-top: -4rem;
    grid-column: 5 / span 4;
    grid-row: 26 / span 4;
    cursor: pointer;
}
#einsamermensch14{
    margin-top: -4rem;
    grid-column: 9 / span 4;
    grid-row: 25 / span 4;
    cursor: pointer;
}
#einsamermensch15{
    margin-top: -4rem;
    grid-column: 8 / span 4;
    grid-row: 31 / span 4;
    cursor: pointer;
}
#einsamermensch16{
    margin-top: -4rem;
    grid-column: 2 / span 4;
    grid-row: 31 / span 4;
    cursor: pointer;
}
#einsamermensch17{
    margin-top: -4rem;
    grid-column: 9 / span 4;
    grid-row: 38 / span 4;
    cursor: pointer;
}
#einsamermensch18{
    margin-top: -4rem;
    grid-column: 5 / span 4;
    grid-row: 36 / span 4;
    cursor: pointer;
}
#einsamermensch19{
    margin-top: -4rem;
    grid-column: 1 / span 4;
    grid-row: 37 / span 4;
    cursor: pointer;
}
#einsamermensch20{
    margin-top: -4rem;
    grid-column: 7 / span 4;
    grid-row: 43 / span 4;
    cursor: pointer;
}
#einsamermensch21{
    margin-top: -4rem;
    grid-column: 2 / span 4;
    grid-row: 42 / span 4;
    cursor: pointer;
}
#einsamermensch22{
    margin-top: -4rem;
    grid-column: 1 / span 4;
    grid-row: 47 / span 4;
    cursor: pointer;
}
#einsamermensch23{
    margin-top: -4rem;
    grid-column: 8 / span 4;
    grid-row: 48 / span 6;
    cursor: pointer;
}

/* Bilder Seiten */
button {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: none;
    border: none;
    cursor: pointer;
}
.weiter{
    position: fixed;
    right: 0;
    top: 10%;
    width: 50%;  
    height: 80%;
    cursor: url('bilder/cursor-e-resize.svg'), e-resize;
}
.zurück{
    position: fixed;
    left: 0;
    top: 10%;
    width: 50%;  
    height: 80%;
    cursor: url('bilder/cursor-w-resize.svg'), w-resize;
}
.weiter img{
    margin-top: 40%;
    margin-left: 90%;
    width: 10%;  
    height: 20%;
    opacity: 0;
}
.zurück img{
    margin-top: 40%;
    width: 10%;  
    height: 20%;
    opacity: 0;
}
.bilder-seiten{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80vh;
}
.bilder-seiten img{
    width: 60%;
    height: auto;
    object-fit: contain;
    padding: 2rem;
}
.bilder-seiten2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: -2rem;
    margin-bottom: 2rem;
    width: 100vw;
}
.bilder-seiten2 img{
    width: 60%;
    height: auto;
    object-fit: contain;
    padding: 2rem;
}
/* Desktop Ende */


/* iPad */
@media (max-width: 1080px){
    :root {
        font-size: 85%;
    }
    .kontakt {
        width: 90vw;
    }
    .anchor::before {
        height: 10rem;
        margin-top: -2rem;
      }
    .bilder-seiten img{
        width: 100%;
    }
    .bilder-seiten2 img{
        width: 94%;
        padding: 2rem;
    }
    .parallax{
        height: 60vh;
    }
    .inhalt{
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

/* Kapitel 1 */
    #schneeball {
        grid-column: 1;
        grid-row: 1;
    }
    #jura {
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 2;
    }
    #feuer {
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 3;
    }
    #chberge {
        margin-top: -7rem;
        grid-column: 1;        
        grid-row: 4;
    }
    #hypostase {
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 5;
    }
    #flaschengeist{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 6;
    }
    #etang{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 7;
    }
    #wald{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 8;
    }
    #waldsee{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 9;
    }
    #zoom{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 10;
    }
    
    /* Kapitel 2 */
    #genua{
        grid-column: 1;
        grid-row: 1;
    }
    #spachtel2{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 2;
    }
    #spachtel3{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 3;
    }
    #mannei{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 4;
    }
    #figuren{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 5;
    }
    #maschinerie{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 6;
    }
    #tor{
        margin-top: -7rem;
        grid-column: 1;        
        grid-row: 7;
    }
    #figurenreihe{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 8;
    }
    #figuren2{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 9;
    }
    
    /* Kapitel 3 */
    #vierkopfvogel{
        grid-column: 1;
        grid-row: 1;
    }
    #kaffeebohne{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 2;
    }
    #wasserwellen{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 3;
    }
    #wasserskulptur{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 4;
    }
    #guerkli{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 5;
    }
    #kommunikationsfluss{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 6;
    }
    #wienerli{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 7;
    }
    #maschinerie2{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 8;
    }
    #ufo2{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 9;
    }
    #torbogen{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 10;
    }
    #traeumende{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 11;
    }
    #nasenvogel{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 12;
    }
    #nasenvogel2{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 13;
    }
    #weitsicht{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 14;
    }
    #babelgum{
        margin-top: -7rem;
        grid-column: 1;        
        grid-row: 15;
    }
    #ausserirdische{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 16;
    }
    #vierwelten{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 17;
    }
    #spekulation{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 18;
    }
    #rabea{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 19;
    }
    #alex{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 20;
    }
    
    /* Kapitel 4 */
    #alltaeglich2{
        grid-column: 1;
        grid-row: 1;
    }
    #alltaeglich3{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 2;
    }
    #alltaeglich4{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 3;
    }
    #alltaeglich5{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 4;
    }
    #alltaeglich6{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 5;
    }
    #alltaeglich7{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 6;
    }
    #alltaeglich8{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 7;
    }
    #alltaeglich9{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 8;
    }
    #alltaeglich10{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 9;
    }
    #alltaeglich11{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 10;
    }
    #alltaeglich12{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 11;
    }
    #alltaeglich13{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 12;
    }
    /* Kapitel 5 */
    #einsamermensch2{
        grid-column: 1;
        grid-row: 1;
    }
    #einsamermensch3{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 2;
    }
    #einsamermensch4{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 3;
    }
    #einsamermensch5{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 4;
    }
    #einsamermensch6{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 5;
    }
    #einsamermensch7{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 6;
    }
    #einsamermensch8{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 7;
    }
    #einsamermensch9{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 8;
    }
    #einsamermensch10{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 9;
    }
    #einsamermensch11{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 10;
    }
    #einsamermensch12{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 11;
    }
    #einsamermensch13{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 12;
    }
    #einsamermensch14{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 13;
    }
    #einsamermensch15{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 14;
    }
    #einsamermensch16{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 15;
    }
    #einsamermensch17{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 16;
    }
    #einsamermensch18{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 17;
    }
    #einsamermensch19{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 18;
    }
    #einsamermensch20{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 19;
    }
    #einsamermensch21{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 20;
    }
    #einsamermensch22{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 21;
    }
    #einsamermensch23{
        margin-top: -7rem;
        grid-column: 1;
        grid-row: 22;
    }
}
/* iPad Ende */

/* Mobile */
@media (max-width: 750px){
    :root {
        font-size: 75%;
    }
    header {
        gap: 2rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    a, summary {
        text-decoration-thickness: 1.5px;
        text-underline-offset: 3px;
    }
    .titel{
        font-size: 2.8rem;
        margin-top: 0.8rem;
        margin-left: 1.8rem;
    }
    .bilder-seiten img{
        padding-top: 0.5rem;
    }
    .bilder-seiten2 img{
        width: 85%;
        padding: 1rem;
    }
    .kontakt{
        padding-top: 5rem;
        width: 85vw;
    }
    .kontakt p,
    .kontakt a,
    .kontakt li,
    summary {
        font-size: 1.65rem;
    }
    .anchor::before {
        height: 8rem;
        margin-top: -2rem;
    }
    .parallax{
        height: 80vh;
    }
    .inhalt{
        padding: 2rem;
    }
    #glut,
    #schneeball,
    #genua,
    #vierkopfvogel,
    #alltaeglich2,
    #einsamermensch2{
        margin-top: -3rem;
    }
    #jura,
    #feuer ,
    #chberge,
    #hypostase,
    #flaschengeist,
    #etang,
    #wald,
    #waldsee,
    #zoom,
    #spachtel2,
    #spachtel3,
    #mannei,
    #figuren,
    #maschinerie,
    #tor,
    #figurenreihe,
    #figuren2,
    #kaffeebohne,
    #wasserwellen,
    #wasserskulptur,
    #guerkli,
    #kommunikationsfluss,
    #wienerli,
    #maschinerie2,
    #ufo2,
    #torbogen,
    #traeumende,
    #nasenvogel,
    #nasenvogel2,
    #weitsicht,
    #babelgum,
    #ausserirdische,
    #vierwelten,
    #spekulation,
    #rabea,
    #alex,
    #alltaeglich3,
    #alltaeglich4,
    #alltaeglich5,
    #alltaeglich6,
    #alltaeglich7,
    #alltaeglich8,
    #alltaeglich9,
    #alltaeglich10,
    #alltaeglich11,
    #alltaeglich12,
    #alltaeglich13,
    #einsamermensch3,
    #einsamermensch4,
    #einsamermensch5,
    #einsamermensch6,
    #einsamermensch7,
    #einsamermensch8,
    #einsamermensch9,
    #einsamermensch10,
    #einsamermensch11,
    #einsamermensch12,
    #einsamermensch13,
    #einsamermensch14,
    #einsamermensch15,
    #einsamermensch16,
    #einsamermensch17,
    #einsamermensch18,
    #einsamermensch19,
    #einsamermensch20,
    #einsamermensch21,
    #einsamermensch22,
    #einsamermensch23{
        margin-top: -6rem;
    }
    button {
        padding: 0.8rem;
    }
    button svg{
        width: 68%;
    }
    .weiter{
      cursor: none;
    }
    .weiter img{
        position: fixed;
        right: 0.5rem;
        top: 21.5vh;
        width: 15%;  
        animation: sicht 1.5s 0.1s forwards;
        opacity: 1;
    }
    .zurück{
        cursor: none;
    }
    .zurück img{
        position: fixed;
        left: 0.5rem;
        top: 21.5vh;
        width: 15%;         
        animation: sicht 1.5s 0.1s forwards;
        opacity: 1;
    }
    @keyframes sicht{
        from { opacity: 1;}
        to { opacity: 0;}
    }
}

/* Mobile */
@media (max-width: 428px){
    .kontakt{
        padding-top: 3.5rem;
    }
    main {
        margin-top: 2rem;
    }
    button{
        margin: -1.75rem;
    }
}