/* Allgemeiner Aufbau/Navigation */

.navigation {
    position:fixed;
    top: 40px;
    left: 0;
    width: 100%;
    display:flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    z-index: 1000;
}

.navigationspunkte {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end; 
    margin-right: 30px;
    list-style: none; 
}

a {
    text-decoration: none;
    color: black;
    font-family: "source-code-variable", sans-serif;
    font-variation-settings: "wght" 400;
    padding-left: 30px;
    padding-right: 30px;
    font-size: clamp(14px, 1.8vw, 30px);
}

a:hover {
    text-decoration: underline;
}

a.active {
    text-decoration: underline;
}

.impressum {
    position: fixed;
    bottom: 70px;
    right: 30px;
    z-index: 1000;
}

body {
    margin: 0;
    padding-top: 80px;
    padding-bottom: 40px;
}

.checkerboard {
    position: fixed;
    left: 0;
    width: 100%;
    height: 40px;
    background-image: url(Bilder/Hintergrund%20Checkerboard.svg);
    background-repeat: repeat-x;
    background-size: auto 100%;
    z-index: 999;
    pointer-events: none;
}

.checkerboard.top {
    top: 0;
}

.checkerboard.bottom {
    bottom: 0;
}

/* Allgemeiner Aufbau/Navigation Ende */

/* Sterne */

.stern {
    position: absolute;
    animation-name: drehen;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: center center;
}

.impstern1 {
    top: 15vw;
    left: 10vw;
    width: 10vw;
    animation-duration: 20s;
}

.impstern2 {
    top: 30vw;
    left: 80vw;
    width: 15vw;
    animation-duration: 8s; 
}

.impstern3 {
    top: 40vw;
    left: 20vw;
    width: 5vw;
    animation-duration: 14s;
}

.constern1 {
    top: 20vw;
    left: 5vw;
    width: 10vw;
    animation-duration: 20s;
}

.constern2 {
    top: 20vw;
    left: 80vw;
    width: 10vw;
    animation-duration: 8s; 
}

.constern3 {
    top: 40vw;
    left: 11vw;
    width: 5vw;
    animation-duration: 14s;
}

.blogstern1 {
    top: 35vw;
    left: 15vw;
    width: 7vw;
    animation-duration: 10s;    
}

.blogstern2 {
    top: 10vw;
    left: 15vw;
    width: 10vw;
    animation-duration: 14s;    
}

.blogstern3 {
    top: 30vw;
    left: 75vw;
    width: 15vw;
    animation-duration: 8s;    
}

.aboutstern1{
    top: 25vh;
    left: 75vw;
    width: 15vw;
    animation-duration: 8s;    
}

.aboutstern2 {
    top: 40vh;
    left: 10vw;
    width: 12vw;
    animation-duration: 12s;    
}

.aboutstern3 {
    top: 65vh;
    left: 75vw;
    width: 7vw;
    animation-duration: 20s;    
}

.homestern1 {
    top: 12vh;
    left: 45vw;
    width: 10vw;
    animation-duration: 20s;    
}

.homestern2 {
    top: 18vh;
    left: 80vw;
    width: 5vw;
    animation-duration: 15s;    
}

.homestern3 {
    top: 55vh;
    left: 5vw;
    width: 10vw;
    animation-duration: 8s;    
}

.homestern4 {
    top: 60vh;
    left: 60vw;
    width: 11vw;
    animation-duration: 9s;    
}

.homestern5 {
    top: 60vh;
    left: 80vw;
    width: 7vw;
    animation-duration: 20s;    
}

.portstern1 {
    top: 12vh;
    left: 10vw;
    width: 14vw;
    animation-duration: 10s;  
}

.portstern2 {
    top: 24vh;
    left: 81vw;
    width: 16vw;
    animation-duration: 9s;      
}

.portstern3 {
    top: 41vh;
    left: 5vw;
    width: 8vw;
    animation-duration: 16s;  
}

@keyframes drehen {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Sterne Ende*/

/* Sonstiges Seitenübergreifendes */

.portfoliovisual, .impressumvisual, .aboutmevisual, .blogvisual, .contactvisual {
    display: flex;
    justify-content: center;
    margin-top: 7vw;
    margin-bottom: 4vw;
}

.contacttext, .abouttext {
    font-family: "source-code-variable", sans-serif;
    font-variation-settings: "wght" 400;
    font-size: 1.4vw;
    max-width: 40vw;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 0;
    margin-bottom: 1vw;
}

p {
    margin-bottom: 5vw;
}

img.Imp, img.contact, img.portfolio, img.about {
    max-width: 40vw;
}

img.blog {
    max-width: 30vw;
}

.contactinfo {
    display: flex;
    align-items: center;
    gap: 2vw;
    justify-content: center;
}

.contactinfo img {
    width: 5vw;
    margin: 0;
    padding; 0;
}

.contactinfo p {
    margin: 0;
    padding: 0;
    font-family: "source-code-variable", sans-serif;
    font-variation-settings: "wght" 400;
    font-size: 1.4vw;
}

.blogtexte {
    margin: 0 auto;
    padding: 0;
    max-width: 40vw
}

.blogtexte h1, .blogtexte p, .blogtexte time {
    text-align: left;
    font-family: "source-code-variable", sans-serif;
}

.blogtexte h1 {
    margin-bottom: 0;
    margin-top: 2vw
}

p, time {
    font-variation-settings: "wght" 400;
    font-size: 1.4vw;
}


time {
    color: grey;
}

.blogtexte h1 {
    font-variation-settings: "wght" 1100;
    font-size: 2vw;
    padding-left: 0;
}

/* Sonstiges Seitenübergreifendes Ende */

/* Startseite */
.homevisual {
    position: fixed;
    top: 0;
    right: 0;
    height: 90vh;
    width: auto;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    margin-top: 4vw;
    overflow:hidden;
}

.danielvolkert {
    height: auto;
    width: 90vw;
    display: block;
    margin: 0;

    padding: 0;
}

/* Startseite Ende */

/* Portfolio */

.sonyspeaker, .topicsplakat, .stuhl, .mcrplakat, .fairy, .materialstudy {
    display: flex;
    align-items: center;
    gap: 5vw;
    justify-content: center;
    margin: 0 auto;
    padding: 2vw 0;
    width: 70vw;
    box-sizing: border-box;
    margin-bottom: 5vw;
}

.speaker-image, .plakat-image, .stuhl-image, .mcr-image, .fairy-image, .material-image {
    width: 30vw;
    height: auto;
    transition: transform 0.3s ease;
    cursor: pointer;
    box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.15)
}

.speaker-image:hover, .plakat-image:hover, .stuhl-image:hover, .mcr-image:hover, .fairy-image:hover, .material-image:hover {
    transform: scale(1.05)
}

.speaker-text, .plakat-text, .stuhl-text, .mcr-text, .fairy-text, .material-text {
    max-width: 60vw;
    
}

.speaker-text h1, .plakat-text h1, .stuhl-text h1, .mcr-text h1, .fairy-text h1, .material-text h1 {
    font-family: "source-code-variable", sans-serif;
    font-variation-settings: "wght" 1100;
    font-size: 2vw;
}

.speaker-text p, .plakat-text p, .stuhl-text p, .mcr-text p, .fairy-text p, .material-text p {
    font-family: "source-code-variable", sans-serif;
    font-variation-settings: "wght" 400;
    font-size: 1.5vw
}

.portfolio-info-text {
    margin-top: 5vw;
    margin-bottom: 10vw;
    font-family: "source-code-variable", sans-serif;
    font-variation-settings: "wght" 400;
    font-size: 1.4vw;
    max-width: 40vw;
    margin-left: auto;
    margin-right: auto;
}

.platzhalter {
    margin-top: 10vw;
    margin-bottom: 5vw;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.overlay:target {
    display: flex;
}

.big-image {
    max-width: 90vw;
    max-height: 90vh;
}

.close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 3rem;
    color: white;
    text-decoration: none;
}

/* Portfolio Ende */

/* Impressum */

.impressuminfo {
    font-family: "source-code-variable", sans-serif;
    font-variation-settings: "wght" 400;
    list-style: none;
    text-decoration: none;
    font-size: 1.5vw;
    max-width: 40vw;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10vw;

}

/* Impressum Ende */