header {
    
    display: flex; /* Flexbox-Modell für das Header-Layout */
    justify-content: center; /* Zentriert Inhalt horizontal */
    align-items: center; /* Zentriert Inhalt vertikal */
    flex-wrap: wrap; /* Lassen Sie den Inhalt umgebrochen werden */
    flex-direction: column; /* Elemente untereinander */
}

.portfolio h1 {
    margin: 50px 0 20px 0;
    text-align: center;
    font-family: "Dancing Script", cursive;
    font-size: 150px;
    color: #5285de;
}

/* Kreiselement */
.circle {
    height: auto; /* Höhe je nach Bildinhalt anpassen */
    width: 80%; /* Breite auf 80% setzen, um Reaktionsfähigkeit sicherzustellen */
    max-height: 80vw; /* Maximalhöhe auf 80% der Viewport-Breite */
    max-width: 80vw; /* Maximalbreite auf 80% der Viewport-Breite */
    display: flex;
    justify-content: center; /* Inhalte horizontal zentrieren */
    align-items: center; /* Inhalte vertikal zentrieren */
    margin: 0 auto; /* Zentriert den Container auf der Seite */
}
@keyframes borderColorChange {
    0% { border-color: rgb(47, 43, 43);}
    20% { border-color: #5285de;; }
    50% { border-color: #3e12ce; }
    70% { border-color: rgb(78, 227, 65); }
    100% { border-color: rgb(32, 146, 32); }
}


.circle img {
    width: 50%; /* Bildbreite auf 100% setzen, um im Container zu bleiben */
    height: auto; /* Höhe automatisch anpassen, um das Seitenverhältnis zu behalten */
    border: 5px solid; /* Rahmen um das Bild */
    animation: borderColorChange 10s infinite; /* Dauer und Wiederholung */
    border-radius: 150px 0px 150px 30px; /* Abgerundete Ecken */
    
}

.text h1 {
  
    display: flex;
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Vertikale Zentrierung, optional */
    color: #5285de;
    margin-bottom: 20px; /* Reduzierung auf 100px für Desktop */
  
    font-family: Arial, Helvetica, sans-serif;
}

.image-container {
    position: relative;
    width: 300px; /* Breite des Containers */
    height: 300px; /* Höhe des Containers */
    
}

.image-container img {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 1; /* Standardmäßig unsichtbar */
    transition: opacity 0.5s ease; /* Weicher Übergang für die Sichtbarkeit */
}

.image-container img.active {
    opacity: 1; /* Aktives Bild sichtbar */
}

/* Kippbewegungen */
@keyframes flipLeft {
    0% {
        transform: perspective(600px) rotateY(0deg);
        opacity: 1;
    }
    50% {
        transform: perspective(600px) rotateY(-90deg);
        opacity: 0; /* Bild wird unsichtbar */
    }
    100% {
        transform: perspective(600px) rotateY(0deg);
        opacity: 1; /* Neues Bild sichtbar */
    }
}



.text2 {
    display: flex;
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Vertikale Zentrierung, optional */
   padding: 0 0 0 20px;
}

.text2 p {
  
    color: #5285de;
    margin-bottom: 100px;
    word-spacing: 5px; /* Abstand zwischen Wörtern */
    width: 400px;
    line-height: 25px;

}


nav {
    margin-bottom: 20px; /* Unteren Außenabstand für Navigation */
    margin-top: 20px;
    margin-left: 20px;
    justify-content: center;
}

nav ul {
    list-style: none; /* Entfernt Aufzählungszeichen der Liste */
    display: flex; /* Flexbox für die Darstellung der Listenpunkte */
    gap: 20px; /* Abstand zwischen den Listenelementen */
}

nav a {
    color: aliceblue; /* Textfarbe der Links */
    text-decoration: none; /* Entfernt Unterstreichung der Links */
    position: relative; /* Ermöglicht Positionierung für Pseudoelemente */
    padding: 7px;/* Innenabstand um den Text der Links */
    font-family: Arial, Helvetica, sans-serif;
}

nav a:hover {
    color: #648de7; /* Textfarbe beim Hover */
}

nav a::after {
    content: ''; /* Leeres Pseudoelement */
    height: 2px; /* Höhe des Pseudoelements */
    width: 0; /* Startbreite */
    background: #648de7; /* Hintergrundfarbe */
    position: absolute; /* Exakte Positionierung */
    bottom: 0; /* Am unteren Rand des Links */
    left: 0; /* Startet am linken Rand */
    transition: 150ms ease-in-out; /* Übergangseffekt */
}

nav a:hover::after {
    width: 100%; /* Breite auf 100% beim Hover */
}

footer {
    background-color: #5285de;
    text-align: center; /* Text zentrieren */
    padding: 1rem; /* Innenabstand hinzufügen */
}

footer .copyright {
   
    color: black; /* Textfarbe für Copyright */
}

footer .copyright2,
footer .copyright3 {
    margin-top: 50px;
    text-align: center;
    color: rgb(240, 233, 233); /* Anpassen der Farbwerte */
    font-family: Arial, Helvetica, sans-serif;
}

main .kontakt {
    margin-bottom: 300px;
}

/* Media Queries für eine responsive Anpassung */
@media (max-width: 800px) {
    header {
        padding: 10px 15px; /* Weniger Padding bei kleineren Geräten */
    }

    .portfolio h1 {
        font-size: 150px; /* Kleinere Schriftgröße für h1 */
    }

    .circle {
        width: 90%; /* Breite für Tablets */
    }
    .circle img{
        margin-top: 10px;
        width: 100%; /* Responsive Bild */
        height: auto; /* Automatische Höhe */
        border-radius: 50px 0px 50px 30px;
    }

    nav ul {
        flex-direction: column; /* Navigation als Spalte bei kleinen Bildschirmen */
        align-items: center; /* Zentriert die Links */
    }

    nav a {
        padding: 10px 0; /* Zusätzlicher Innenabstand für Links */
    }

    text h1 {
        margin-bottom: 50px; /* Reduzierung des Abstands für Tablet-Ansicht */
    }
}

@media (max-width: 480px) {
    .portfolio h1 {
        font-size: 60px; /* Weitere Anpassung der Schriftgröße für sehr kleine Bildschirme */
        
    }
   

    .circle {
        
        width: 90%;
        max-width: 100vw;
        border-width: 3px; /* Dünnerer Rahmen */
    }
    .circle img{
        margin-top: 10px;
        margin-bottom: 70px;
        width: 100%; /* Responsive Bild */
        height: auto; /* Automatische Höhe */
        border-radius: 50px 0px 50px 30px;
    }

    nav ul {
        gap: 10px; /* Weniger Abstand zwischen den Links */
    }

    footer {
        padding: 0.5rem; /* Weniger Innenabstand im Footer */
    }

   
        .text h1 {
            
            text-align: center;
            font-size: 15px;
        }
        .text h1{
            font-size: 30px;
        }
    }