* {
    box-sizing: border-box;
}

html, body {
    --background-colour: #F1F1EB;
    --font-highlight-colour: #CC00FF;
    --font-standard-colour: #464646;
    --font-marker-colour: #CC00FF20;
    --a-highlight-colour1: #cc00ff80;
    --a-highlight-colour2: #46464680;

    margin: 0;
    padding: 0;
    background: var(--background-colour);
    color: var(--font-standard-colour);
    font-size: 3.6vw;
    font-family: "obliqua", sans-serif;
    font-weight: 400;
    font-style: normal;
    width: 100%;
}

h1 {
    font-size: 1.5rem;
    margin: 0;
    font-family: "gyst-variable", sans-serif;
    font-variation-settings: "wght" 700;
}

h2 {
    font-size: 0.7rem;
    color: var(--font-highlight-colour);
    margin: 0;
    font-family: sans-serif;
    font-family: "obliqua", sans-serif;
    font-weight: 400;
    font-style: normal;
}

a {
    color: var(--font-standard-colour);
    text-decoration: none;
    transition: color 0.5s; /* transition der a:hover color funktion */
    will-change: color; /* bugging für die transition verhindern */
}

p {
    font-size: 1rem;
}

section {
    position: relative;
    display: flex; /* applies flexible box layout to element. section = flex container --> by default row - flex items will fill the free space that is available */
    width: 100%;
    max-width: 100vw;
    height: 100%;
    max-height: 100vh;  /* Stellt sicher, dass die Section innerhalb des Viewports bleibt */
    overflow: hidden;   /* Verhindert, dass Inhalt überläuft */
    padding: 3.125vw;
    z-index: 1;
}

section.sticky {
    position: sticky;
}

section.nonsticky {
    z-index: 2;
}

/* navigation */

nav {
    position: fixed; /* default --> own fixed layer */
    width: 100%; /* das ganze Element, nicht nur Schrift*/
    height: 10vh; /* siehe Layout */
    top: 0;
    left: 0;
    z-index: 100; /* Stelle sicher, dass es über anderen Elementen liegt */
}

nav ul {
    display: flex; 
    align-items: center; /* align all children to center */
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

nav ul li {
    list-style: none; /* kein Listenzeichen */
    margin-left: 3.125vw; /* Platz zwischen den Textelementen */
}

nav ul li a {
    color: var(--font-highlight-colour);
    font-size: 0.7rem;
    font-family: sans-serif;
    font-family: "obliqua", sans-serif;
    font-weight: 400;
    font-style: normal;
}

nav ul li a:hover {
    color: var(--a-highlight-colour1);
}

/* about section */

section.about article {
    display: flex;
    flex-direction: column;
    align-items: center; /* align-items: Steuert die vertikale Ausrichtung innerhalb des Containers (z. B. center, stretch, flex-start) */
    justify-content: center; /* justify-content: Steuert die horizontale Ausrichtung (z. B. center, space-between, space-around) */
    text-align: center;
    height: 100vh;
}

section.about article .description {
    width: 93.75%;
    margin: 0;
}
  
/* contact section */

section.contact {
  
    top: 0; /* Bleibt oben im Viewport haften */
    z-index: 10; /* stellt sicher, dass das Bild danach darunter liegt */
    display: flex;
    flex-direction: column;
    align-items: center; /* align-items: Steuert die vertikale Ausrichtung innerhalb des Containers (z. B. center, stretch, flex-start) */
    justify-content: center; /* justify-content: Steuert die horizontale Ausrichtung (z. B. center, space-between, space-around) */
    text-align: center;
    height: calc(100vh - 10vh);
}

section.contact article .mail,
section.contact article .instagram {
    display: flex; /* macht alle Kinder innerhalb von class mail zu flex items, die in default row ausgerichtet sind, also h2 und a */
    justify-content: center;
    align-items: baseline; /* Richtet Text an der Grundlinie aus */
    gap: 1.5625vw; /* Abstand zwischen den Elementen */
    padding: 1.5625vw;
}

section.contact article .mail a:hover,
section.contact article .instagram a:hover {
    color: var(--a-highlight-colour2);
}

/* image section */

section.image-container {
    position: relative;
    width: 100%;  /* Nutze die gesamte Breite des Viewports */
    padding: 0;
    z-index: 5; /* weniger als die contact Section, damit sie sich darüber bewegt */
    height: 200vh; /* Doppelte Höhe, damit es über die contact Section gleiten kann */
}

section.image-container img {
    width: 100%;  /* Nutzt gesamte Breite des Containers */
    height: 100%;  /* Verhindert Verzerrung */
    display: block;  /* Entfernt Lücken unter dem Bild */
    object-fit: cover; /* Füllt den Container ohne weiße Ränder */
}

/* Textplatzierung */

.Bildrecht {
    position: absolute;
    bottom: 3.125vh; /* Abstand vom unteren Rand relativ zur Viewport-Höhe */
    right: 3.125vw;  /* Abstand vom rechten Rand relativ zur Viewport-Breite */
    color: var(--font-highlight-colour);
    font-size: 0.7rem;
    font-family: "obliqua", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: right; /* Textausrichtung sicherstellen */    
}

.Bildrecht a {
    color: var(--font-highlight-colour); 
}

.Bildrecht a:hover {
    color: var(--a-highlight-colour1);
}

/* responsive mobile settings */

/* Falls du möchtest, dass die Schrift auch auf kleineren Geräten gut aussieht, nutze CSS Media Queries: */

@media only screen and (max-width: 480px) and (max-height: 768px) { /* Hochformat */
    html, body {
        font-size: 5vw;
    }
    
    nav {
        height: 8vh;
    }

    nav ul li a {
        font-size: 1rem;
    }

    h1 {
        font-size: 1.7rem;
        }
    
    h2 {
        font-size: 1rem;
        }

    p {
        font-size: 1.2rem;
    }

    section.contact article {
        transform: rotate(90deg);
     }

     section.contact article .mail,
    section.contact article .instagram {
        display: flex; /* macht alle Kinder innerhalb von class mail zu flex items, die in default row ausgerichtet sind, also h2 und a */
        justify-content: center;
        align-items: baseline; /* Richtet Text an der Grundlinie aus */
        gap: 1rem;
    }

    section.image-container .Bildrecht {
        font-size: 1rem;
        bottom: 2vh;
    }
}


@media only screen and (max-width: 768px) and (max-height: 480px) { /* Querformat */
    
    html, body {
        font-size: 2.6vw;
        }
        
        nav {
            height: 16vh;
        }
    
        nav ul li a {
            font-size: 1rem;
        }
    
        h1 {
            font-size: 1.7rem;
            }
        
        h2 {
            font-size: 1rem;
            }
    
        p {
            font-size: 1.2rem;
        }
        
    section.about {
        align-items: center;
    }
    
    section.contact {
        transform: none; /* Optional */
        flex-direction: row; /* Oder andere Anpassungen */
        align-items: center;
        justify-content: center;
    }

    section.contact article .mail,
    section.contact article .instagram {
        display: flex; /* macht alle Kinder innerhalb von class mail zu flex items, die in default row ausgerichtet sind, also h2 und a */
        justify-content: center;
        align-items: baseline; /* Richtet Text an der Grundlinie aus */
        gap: 1rem;
    }

   section.image-container img {
            width: 100%;  /* Nutzt gesamte Breite des Containers */
            height: 100%;  /* Verhindert Verzerrung */
            display: block;  /* Entfernt Lücken unter dem Bild */
            object-fit: cover; /* Füllt den Container ohne weiße Ränder */
    }

    section.image-container .Bildrecht {
        font-size: 1rem;
        bottom: 2vh;
    }
}