@import url('https://fonts.googleapis.com/css?family=Poppins');

/*@font-face {
    font-family: 'Bristol';
    src: url('fonts/bristol.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}*/

body {
    font-family: 'Poppins', sans-serif;
    padding: 0;
    margin: 0;
    max-width: 100vw;
    overflow-x: hidden;
    scroll-behavior: smooth;
    line-height: 1.6; /* Angenehmer Textabstand */
}

/* Fullscreen Bild */
#fullscreen-image {
    position: relative;
    width: 100vw;
    height: 70vh;
    display: flex;
    align-items: center; /* Vertikale Zentrierung */
    justify-content: center; /* Horizontale Zentrierung */
    background: url('./images/izzy.png') no-repeat center center;
    background-size: contain;
}

#fullscreen-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F3F6FA; /* Hintergrundfarbe */
    z-index: -1;
}


#fullscreen-image {
    background: url('./images/izzy.png') no-repeat center center;
    background-size: contain;
}




/* Kontakt-Button */
.btn_contact {
    text-decoration: none; 
    font-size: 18px;
    font-family: 'Poppins', sans-serif;
    color: #1C3F60;
    background: #8FB3AD;
    border: 3px solid #8FB3AD;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s ease;
}

.btn_contact:hover {
    background: #8FB3AD;
    color: #F3F6FA;
    border: 2px solid #8FB3AD;
    box-shadow: 0px 5px 15px rgba(28, 63, 96, 0.3);
}

/* Instagram Icon */
.social-icon {
    margin-left: 5px;
    font-size: 30px;
    color: #E60023;
    align-items: center; /* Vertikale Zentrierung */
    justify-content: center; /* Falls benötigt */
    transition: color 0.3s ease;
}

.social-icon:hover {
    color: #E08A4F    ; /* Akzentfarbe beim Hover */
}



header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 12px 20px; /* Schlankes Padding */
    background-color: #1C3F60;
    color: #F3F6FA;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 🟢 Header-Inhalt */
#header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
}

/* Logo bleibt links */
#logo {
    text-decoration: none;
    font-size: 36px;
    font-family: 'Bristol', sans-serif;
    align-items: center;  /* Vertikale Zentrierung */
    color: #F3F6FA;
    white-space: nowrap; /* Verhindert Zeilenumbrüche */
}

/* Navigation bleibt rechts */
#navigation {
    z-index: 1000;
    pointer-events: auto;
    display: flex;
    justify-content: flex-end; /* Rechtsbündige Ausrichtung */
    gap: 20px; /* Abstand zwischen den Links */
}

/* Styling der Navigationslinks */
#navigation a {
    color: #F3F6FA;
    text-decoration: none;
    padding: 5px 15px;
    transition: color 0.3s ease;
}

#navigation a:hover {
    border-bottom: 2px solid #F3F6FA;
}

/* 🟢 Hamburger-Menü (Mobilgeräte) */
#nav-toggle {
    font-size: 28px;
    cursor: pointer;
    display: none;
    color: #F3F6FA;
}

/* X-Button innerhalb des Menüs */
#close-toggle {
    font-size: 28px;
    cursor: pointer;
    display: none; /* Standardmäßig versteckt */
    color: #F3F6FA;
    position: absolute;
    top: 10px; /* Abstand vom oberen Rand */
    right: 15px; /* Abstand vom rechten Rand */
    background: none;
    border: none;
}


#magnify {
    width:100vw;
    height:100vh;
    background:#0B1320;
    position:fixed;
    z-index:4;
    display:none;
    flex-direction: column;
    justify-content:center;
}
#magnify h1 {
    position:absolute;
    top:0;
    right:0;
    margin:20px 40px;
    color:#F3F6FA;
    transition:0.4s ease-in-out;
}
#magnify h1:hover{
    color:#1C3F60;
    cursor:pointer;
}
#img_here {
    width:90%;
    height:90%;
    background-size:contain !important;
    background-repeat:no-repeat !important;
    margin:0px auto;
}

#top_part {
    width:100%;
    border:2vh solid #F3F6FA;
}
#top_part tr td{
    width:50%;
}
#about {
    width:84% !important;
    height:95vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:left;
    padding:0px 8%;
}
#about h1 {
    font-size:45px;
    word-wrap:break-word;
}
#about table {
    width:70%;
    margin-top:4vh;
}
#about table tr td {
    width:20% !important;
    text-align:left;
}
.social {
    color:#1C3F60;
    font-size:23px;
    padding:12px 17px;
    border-radius:50%;
    background:transparent;
    transition:0.4s ease-in-out;
    font-weight:bold;
    margin:0px 8px;
}
.social:hover { 
    cursor: pointer;
    color:#F3F6FA;
    background:#1C3F60;
    box-shadow:0px 10px 30px #99A3A5;
}
.btn_one {
    font-size:16px;
    font-family: 'Poppins', sans-serif;
    color:#1C3F60;
    background:#F3F6FA;
    border:3px solid #1C3F60;
    padding:8px 40px;
    width:35%;
    border-radius:10px;
    font-weight:bold;
    margin:2vh 0px;
    transition:0.4s ease-in-out;
}
.btn_one:hover {
    box-shadow:0px 10px 30px #99A3A5;
    cursor:pointer;
    color:#F3F6FA;
    background:#1C3F60;
}
#rightImage {
    width:100%;
    height:95vh;
    background:linear-gradient(0deg,#99A3A5,#99A3A5),url("https://images.unsplash.com/photo-1506057527569-6a0285b2fcc1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=60") center center;
    background-size:cover;
    background-repeat:no-repeat;
}
#work {
    width:80vw;
    font-weight:bold;
    text-align: left;
    margin-left: 10%; /* Abstand zur Überschrift */
    margin-bottom: 100px; 
    padding: 70px 30px 20px 30px;
    border-radius: 10px;


}
#work h1 {
    border-bottom:4px solid #8FB3AD;
    color:#1C3F60;
    display: inline-block;
    left: 10%; /* Abstand links */

}

#overlay {
    width:90vw;
    font-weight:bold;
    text-align: right;
    margin-right: 5%; 
    padding: 20px 30px 50px 30px;
    border-radius: 10px;

}

/* Hauptüberschrift */
#overlay h2 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #1C3F60;
}

/* Beschreibung */
#overlay p {
    font-size: 20px;
    margin-bottom: 30px;
    color: #1C3F60;
}



#moi {
    width:80vw;
    font-weight:bold;
    text-align: left;
    margin-left: 10%; /* Abstand zur Überschrift */
    margin-bottom: 100px; 
    padding: 70px 30px 20px 30px;
    border-radius: 10px;


}
#moi h1 {
    border-bottom:4px solid #8FB3AD;
    color:#1C3F60;
    display: inline-block;

}

/* Flexbox für die Anordnung von Bild und Text */
.moi-container {
    display: flex;
    align-items: center;  /*Vertikale Ausrichtung */
    gap: 20px; /* Abstand zwischen Bild und Text */
}

.bio-image {
    flex: 1; /* Bild nimmt weniger Platz als der Text */
    max-width: 30%; /* Begrenzung der maximalen Breite */
}

.bio-image img {
    width: 100%; /* Bild passt sich dem Container an */
    height: auto; /* Höhe wird automatisch skaliert */
    object-fit: contain; /* Verhindert Verzerrungen */
    border-radius: 10px; /* Optional: Abgerundete Ecken */
}

/* Styling für den Text */
.bio-text {
    flex: 2; /* Text nimmt 2 Teile des Platzes */
    font-size: 18px;
    color: #0B1320;
    line-height: 1.8;
    text-align: justify; 
}

#contract {
    width:80vw;
    font-weight:bold;
    text-align: left;
    margin-left: 10%; /* Abstand zur Überschrift */
    padding: 70px 30px 20px 30px;
    border-radius: 10px;


}
#contract h1 {
    border-bottom:4px solid #8FB3AD;
    color:#1C3F60;
    display: inline-block;
    left: 10%; /* Abstand links */

}

/* Text-Formatierung mit Blocksatz */
.contract-text {
    font-size: 18px;
    color: #0B1320;
    line-height: 1.8;
    text-align: justify; /* Blocksatz */
    hyphens: auto; /* Silbentrennung */
}

.contract-list {
    list-style: none; /* Entfernt die Standard-Nummerierung */
    counter-reset: list-counter; /* Erstellt einen internen Zähler */
    font-size: 18px;
    color: #0B1320;
    line-height: 1.8;
    padding-left: 0; /* Entfernt den Standard-Listenabstand */
}

.contract-list li {
    counter-increment: list-counter; /* Erhöht den Zähler für jedes Element */
    display: flex;
    align-items: center; /* Vertikal zentrieren */
    margin-bottom: 12px; /* Abstand zwischen den Punkten */
    min-height: 40px; /* Mindesthöhe für gleichmäßige Ausrichtung */
}

.contract-list li::before {
    content: counter(list-counter); /* Fügt die Zahlen hinzu */
    font-weight: bold;
    font-size: 18px;
    color: #1C3F60; /* Farbe der Zahl */
    background: #8FB3AD; /* Hintergrundfarbe des Kreises */
    width: 40px; /* Feste Größe für den Kreis */
    height: 40px; /* Feste Größe für den Kreis */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Rund machen */
    margin-right: 15px; /* Abstand zwischen Kreis und Text */
    flex-shrink: 0; /* Verhindert, dass der Kreis schrumpft */
}



#photos {
    width:100%;
    columns:3;
    column-gap:4%;
    z-index:1;
    transition:0.4s ease-in-out;
    margin: 0 auto;


}

#photos img {
    width:100%;
    height:auto;
    margin:4.5% 0px;
    transition:0.4s ease-in-out;
}
#photos img:hover {
    transform: scale(1.1);
    cursor: pointer;
}



#inner_div table{
    width:100%;
}
#inner_div table tr td{
    font-weight:bold;
}
#inner_table tr td{
    padding:10px 20px !important;
}
#contact form {
    width:100%;
}
#contact form input {
    width:96%;
    margin:20px 1%;
    background:transparent;
    border:0px;
    border-bottom:3px solid #99A3A5;
    padding:8px 10px;
    font-family: 'Poppins', sans-serif;
    font-size:18px;
    transition:0.4s ease-in-out;
    color:#000;
    font-weight:bold;
}
#contact form textarea {
    width:96%;
    margin:20px 1%;
    padding:8px 10px;
    border:0px;
    border-bottom:3px solid #99A3A5;
    padding:8px 10px;
    font-family: 'Poppins', sans-serif;
    font-size:18px;
    background:transparent;
    resize:none;
    transition:0.4s ease-in-out;
    color:#000;
    font-weight:bold;
}
#contact form input:focus {
    outline:none;
    border-bottom:3px solid #1C3F60;
}
#contact form textarea:focus {
    outline:none;
    border-bottom:3px solid #1C3F60;
}

#footer {
    width:100%;
    padding:10vh 0px;
    text-align:center;
    font-weight:bold;
}
#footer a {
    color:#1C3F60;
    text-decoration:none;
}
::placeholder {
    color:#000;
}
button:focus {
    outline:none;
}
::-webkit-scrollbar {
    width:5px;
    height:5px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
    background: rgb(0, 0, 0); 
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0,0.8); 
}




/* Versteckter Container für das Formular */
#contact-form-container {
    display: none; /* Standardmäßig ausgeblendet */
    padding: 20px;
    max-width: 600px;
    margin: 20px auto;
    border-radius: 10px;
    background-color: #F3F6FA; /* Hintergrundfarbe */
}
#contact-form-container form button {
    width: 50%; /* Breite des Buttons */
    max-width: 200px; /* Maximale Breite */
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #8FB3AD; /* Dunkelblauer Hintergrund */
    color: #1C3F60; /* Hellblaue Schrift */
    border: 2px solid #8FB3AD;
    border-radius: 10px;
    font-size: 18px;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Überschrift des Formulars */
#contact-form-container h1 {
    font-family: 'Poppins', sans-serif; /* Standard-Schriftart */
    color: #1C3F60; /* Primärfarbe */
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
}

/* Labels für die Felder */
form label {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #0B1320; /* Textfarbe */
    display: block;
    margin-bottom: 8px;
}

/* Eingabefelder, Dropdowns und Textarea */
#contact-form-container form input,
#contact-form-container form select,
#contact-form-container form textarea {
    width: 90%; /* Begrenzte Breite */
    max-width: 500px; /* Absolute maximale Breite */
    margin: 10px auto; /* Abstand und zentriert */
    display: block; /* Zentriert das Element */
    padding: 10px;
    border: 1px solid #F3F6FA; /* Akzentfarbe */
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #0B1320; /* Dunkelblaue Schrift */
    background-color: #fff; /* Hellblauer Hintergrund */
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

form input:focus, form select:focus, form textarea:focus {
    border-color: #1C3F60; /* Primärfarbe */
    box-shadow: 0px 0px 8px rgba(28, 63, 96, 0.3); /* Leuchten */
    outline: none;
}

/* Absendebutton */
form button {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #1C3F60; /* Textfarbe weiß */
    background-color: #8FB3AD; /* Primärfarbe */
    border: 2px solid #8FB3AD;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#contact-form-container form button:hover {
    background-color: #8FB3AD; /* Hellblau beim Hover */
    color: #F3F6FA; /* Textfarbe weiß */
    box-shadow: 0px 5px 15px rgba(28, 63, 96, 0.4);
}

/* Kontakt erstellen Button */
#contact-button-container {
    text-align: center;
    margin: 20px 0;
}

#contact-button {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #1C3F60;
    background-color: #8FB3AD; /* Primärfarbe */
    border: 2px solid #8FB3AD;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#contact-button:hover {
    background-color: #8FB3AD; /* Akzentfarbe */
    color: #F3F6FA;
    box-shadow: 0px 5px 15px rgba(28, 63, 96, 0.3);
}

/* Eingabefelder und Textarea beim Fokus */
#contact-form-container form input:focus,
#contact-form-container form select:focus,
#contact-form-container form textarea:focus {
    border-color: #8FB3AD; /* Primärfarbe */
    box-shadow: 0px 0px 8px rgba(28, 63, 96, 0.3); /* Leichter Leuchteffekt */
    outline: none;
}




/* Dropdown-Filter (gleiche Stile wie Buttons) */
select {
    display: inline-block; /* Gleiche Ausrichtung wie Buttons */
    text-align: center; /* Text zentrieren */
}

/* Container für Filter */
#filters {
    display: flex; /* Elemente nebeneinander */
    justify-content: left; /* Zentriert die Filter */
    align-items: center; /* Vertikal ausgerichtet */
    gap: 20px; /* Abstand zwischen den Dropdowns */
    margin-bottom: 20px;
    margin-top: 20px;

}



/* Galerie-Container */
#photos {
    width: 100%; /* Nimmt die gesamte Breite ein */
    columns: 3; /* 3 Spalten */
    column-gap: 2%; /* Reduzierter Abstand zwischen den Spalten */
    z-index: 1; /* Stellt sicher, dass die Bilder im Vordergrund bleiben */
    transition: 0.4s ease-in-out; /* Sanfte Animation */
}

/* Einzelne Bilder mit Caption */
.photo {
    display: inline-block; /* Behält Masonry-Layout bei */
    margin: 0 0 15px; /* Abstand zwischen Bildern und Captions */
    break-inside: avoid; /* Verhindert, dass Spalten unterbrochen werden */
    text-align: center; /* Zentriert die Caption unter dem Bild */
}

/* Bilder in der Galerie */
.photo img {
    width: 100%; /* Passt die Breite der Bilder an die Spalte an */
    height: auto; /* Beibehaltung der Proportionen */
    /*border: 2px solid #1C3F60;  Rahmen für jedes Bild */
    border-radius: 5px; /* Leicht abgerundete Ecken */
    /*transition: 0.4s ease-in-out;  Sanfte Animation beim Hover */
}

/* Hover-Effekt */
.photo img:hover {
    cursor: pointer; /* Zeigt einen Zeiger an */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3); /* Schatten beim Hover */
}


/* Container für Buttons */
#gallery-controls {
    display: flex;
    flex-direction: row; /* Buttons untereinander */
    align-items: center; /* Zentriert die Buttons */
    gap: 10px; /* Abstand zwischen Buttons */
    margin-top: 20px;
}

/* Button: Mehr */
#show-more {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #1C3F60;
    background-color: #8FB3AD;
    border: 2px solid #8FB3AD;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#show-more:hover {
    background-color: #8FB3AD;
    color: #F3F6FA;
    box-shadow: 0px 5px 15px rgba(28, 63, 96, 0.3);
}

/* Button: Einklappen */
#show-less {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #1C3F60;
    background-color: #8FB3AD;
    border: 2px solid #8FB3AD;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#show-less:hover {
    background-color: #8FB3AD;
    color: #F3F6FA;
    box-shadow: 0px 5px 15px rgba(28, 63, 96, 0.3);
}



/* Scroll-Animationen für Abschnitte */
.section {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s ease-in-out;
}

.section.visible {
    opacity: 1;
    transform: translateY(0);
}


/* Tooltip für Instagram */
.tooltip {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1C3F60;
    color: #F3F6FA;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
}




/* Zurück-Button (gleiches Styling wie Absendebutton) */
.back-button {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #1C3F60; /* Textfarbe */
    background-color: #8FB3AD; /* Primärfarbe */
    border: 2px solid #8FB3AD;
    padding: 10px 20px;
    border-radius: 80px; /* Runde Ecken */
    cursor: pointer;
    text-decoration: none; /* Entfernt Unterstreichung */
    display: inline-block; /* Verhalten wie ein Button */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hover-Effekt für Zurück-Button */
.back-button:hover {
    background-color: #8FB3AD; /* Leicht abgedunkelte Farbe beim Hover */
    color: #F3F6FA; /* Helle Textfarbe beim Hover */
    box-shadow: 0px 5px 15px rgba(28, 63, 96, 0.4); /* Schatteneffekt */
}

#custom-dimensions {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#custom-dimensions input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

/* Popup-Container */
#popup-container {
    display: none; /* Standardmäßig versteckt */
    position: fixed;
    top: 50%;
    left: 50%;
    width: 80vw;  /* 80% der Bildschirmbreite */
    height: 80vh; /* 80% der Bildschirmhöhe */
    background: rgba(28, 63, 96, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(-50%, -50%); /* Perfekt zentriert */
    border-radius: 10px;
    padding: 20px; /* Gleichmäßiger Abstand für Schatten */
    z-index: 9999; /* Höchste Priorität, über allem */
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.6); /* Starker Schatten */
}

/* Popup-Bild */
#popup-img {
    max-width: calc(100% - 40px); /* Verhindert, dass das Bild zu groß wird */
    max-height: calc(100% - 40px);
    object-fit: contain; /* Bild bleibt im richtigen Format */
    border-radius: 8px;
}

/* Schließen-Button */
#close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    background: #1C3F60;
    padding: 10px;
    border-radius: 5px;
    transition: 0.3s ease-in-out;
    z-index: 10000; /* Stellt sicher, dass es über allem liegt */
}

#close-btn:hover {
    background: rgba(255, 255, 255, 0.5);
    color: #1C3F60;
}

.footer-image {
    text-align: center; /* Zentriert das Bild */
}

@keyframes whaleFlip {
    0% { transform: translateY(0) rotate(0deg); }
    10% { transform: translateY(-20px) rotate(-36deg); }
    20% { transform: translateY(-40px) rotate(-72deg); }
    30% { transform: translateY(-60px) rotate(-108deg); }
    40% { transform: translateY(-70px) rotate(-144deg); }
    50% { transform: translateY(-75px) rotate(-180deg); }
    60% { transform: translateY(-70px) rotate(-216deg); }
    70% { transform: translateY(-60px) rotate(-252deg); }
    80% { transform: translateY(-40px) rotate(-288deg); }
    90% { transform: translateY(-20px) rotate(-324deg); }
    100% { transform: translateY(0) rotate(-360deg); }
}



.footer-image img {
    width: 120px;
    height: auto;
    display: block;
    margin: 0 auto;
    cursor: pointer; /* Zeigt an, dass das Bild klickbar ist */
    transition: transform 0.5s ease;
}



/* 📏 Ab max-width: 1024px (Tablets & kleine Laptops) */
@media (max-width: 1040px) {
    header {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1000;
    }

    #nav-toggle {
        display: block; /* Hamburger-Icon sichtbar */
    }
      #close-toggle {
        display: block;
    }

    /* Navigation als kleines Dropdown-Menü rechts unter dem Hamburger */
    #navigation {
        display: none; /* Standardmäßig versteckt */
        position: absolute;
        top: 50px; /* Direkt unter dem Hamburger-Icon */
        right: 20px; /* Rechts ausrichten */
        background: #1C3F60;
        border-radius: 8px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        flex-direction: column;
        text-align: left;
        gap: 10px;
        padding: 10px 0;
        min-width: 180px; /* Kleinere Breite */
    }

    /* Navigation sichtbar, wenn aktiviert */
    #navigation.show {
        display: flex;
    }

    #overlay {
        width: 90vw; /* Größerer Bereich für mobile Ansicht */
        padding: 20px;
        max-width: 900px;
    }

    #navigation a {
        display: block;
        padding: 12px;
        font-size: 18px;
    }

    /* Platz für den Header schaffen */
    body {
        padding-top: 80px; /* Platz für den fixierten Header */
    }

    h1 {
        font-size: 2rem;
    }


    #overlay {
        width: 90vw; /* Größerer Bereich für mobile Ansicht */
        padding: 20px;
    }

    #moi, #contract, #work {
        text-align: left;
    }

    .bio-image {
        width: 50%;
    }

    #gallery-controls {
        gap: 1rem;
    }

    footer {
        text-align: center;
        font-size: 0.9rem;
    }
    #work h2 {
        font-size: 22px;
    }

    .category {
        font-size: 18px;
        height: 50px;
        padding: 12px;
    }

    .category-content {
        font-size: 16px;
        padding: 10px;
    }

    /* Bildergalerie in 2 Spalten */
    .portfolio-gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Zwei Spalten */
        gap: 10px; /* Abstand zwischen den Bildern */
    }

    .image-card {
        width: 100%; /* Bilder nehmen 100% der Spaltenbreite ein */
    }

}

/* 📏 Media Query für max-width: 970px */
@media (max-width: 970px) {
    #nav-toggle {
        display: block; /* Hamburger-Icon sichtbar */
    }
      #close-toggle {
        display: block;
    }

    /* Navigation als kleines Dropdown-Menü rechts unter dem Hamburger */
    #navigation {
        display: none; /* Standardmäßig versteckt */
        position: absolute;
        top: 50px; /* Direkt unter dem Hamburger-Icon */
        right: 20px; /* Rechts ausrichten */
        background: #1C3F60;
        border-radius: 8px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        flex-direction: column;
        text-align: left;
        gap: 10px;
        padding: 10px 0;
        min-width: 180px; /* Kleinere Breite */
    }

    /* Navigation sichtbar, wenn aktiviert */
    #navigation.show {
        display: flex;
    }

    #overlay {
        width: 90vw; /* Größerer Bereich für mobile Ansicht */
        padding: 20px;
        max-width: 800px;
    }

    #navigation a {
        display: block;
        padding: 12px;
        font-size: 18px;
    }

    .category {
        font-size: 17px;
        height: 50px;
        padding: 10px;
    }

    .category-content p {
        font-size: 15px;
    }


    .image-card {
        width: 100%;
    }
    
    #work h2 {
        font-size: 18px;
    }
}


/* 📏 Ab max-width: 768px (Tablets & große Smartphones) */
@media (max-width: 768px) {
    .category {
        font-size: 16px;
        height: 40px;
        padding: 8px;
    }

    .category-content {
        font-size: 15px;
    }

    .image-card {
        width: 100%; /* Jedes Bild nimmt die volle Breite ein */
    }

    body {
        font-size: 0.9rem;
    }

    #overlay {
        width: 90vw; /* Größerer Bereich für mobile Ansicht */
        max-width: 700px; /* Begrenzung der Breite */
        padding: 20px;
    }
    #overlay h2 {
        font-size: 2rem; /* Kleinere Schriftgröße */
    }

    #overlay p {
        font-size: 1.2rem; /* Kleinere Schriftgröße */
    }

    header {
        padding: 1rem;
        justify-content: space-between; 
        text-align: center;
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1000;
    }

    #logo {
        align-items: center;  /* Vertikale Zentrierung */
        margin: 20px;
    }

    #nav-toggle {
        display: block; /* Hamburger-Icon sichtbar */
    }
      #close-toggle {
        display: block;
    }

    /* Navigation als kleines Dropdown-Menü rechts unter dem Hamburger */
    #navigation {
        display: none; /* Standardmäßig versteckt */
        position: absolute;
        top: 50px; /* Direkt unter dem Hamburger-Icon */
        right: 20px; /* Rechts ausrichten */
        background: #1C3F60;
        border-radius: 8px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        flex-direction: column;
        text-align: left;
        gap: 10px;
        padding: 10px 0;
        min-width: 180px; /* Kleinere Breite */
    }

    #navigation.show {
        display: flex; /* Menü anzeigen */
    }

    #navigation a {
        display: block;
        padding: 10px;
    }


    h1 {
        font-size: 1.8rem;
    }

    .bio-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .bio-description {
        font-size: 0.9rem;
        text-align: justify;
    }

    .bio-image {
        width: 60%;
    }

    #gallery-controls {
        flex-direction: row;
        justify-content: center;
        gap: 1rem;
    }

    .carousel-item {
        flex: 0 0 calc(100% / 2);
    }

    form {
        width: 90%;
    }

    #fullscreen-image {
        height: 40vh;
    }

    .moi-container {
        flex-direction: column; /* Bild unter den Text setzen */
        align-items: center;
    }

    .bio-image {
        max-width: 70%; /* Bild größer, aber nicht zu groß */
        margin-top: 20px; /* Abstand nach oben */
    }

    #work h1,
    #contract h1 {
        margin-left: 0;
        padding-left: 10px; /* Optional für einen schöneren Abstand */
    }

    #photos {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 gleich große Spalten */
        column-gap: 2%; /* Reduzierter Abstand zwischen den Spalten */
        gap: 10px; /* Abstand zwischen den Spalten */
    }
    
    #photos {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 gleich große Spalten */
        gap: 10px;
        align-items: start; /* Bilder oben ausrichten */
    }
    
    .photo {
        display: flex;
        justify-content: center;
        align-items: flex-start; /* Oberkante der Bilder ausrichten */
    }

    .category {
        font-size: 16px;
        height: 35px;
        padding: 8px;
    }

    .category-content {
        font-size: 15px;
    }

    .image-card {
        width: 100%;
    }
    
    #work h2 {
        font-size: 18px;
    }
}

/* 📏 Ab max-width: 480px (Smartphones) */
@media (max-width: 480px) {

    .category {
        font-size: 14px;
        height: 25px;
        padding: 8px;
    }

    .category-content {
        font-size: 14px;
        padding: 8px;
    }

    .portfolio-gallery {
        flex-direction: column;
        gap: 5px;
    }

    .image-card {
        width: 100%;
    }

    .pinterest-link {
        font-size: 12px;
    }

    #work h2 {
        font-size: 16px;
    }

    header {
        padding: 1rem;
        justify-content: space-between; 
        align-items: center;
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1000;
    }

    #logo {
        /*font-size: 22px;  Kleinere Schrift */
        display: flex;
        align-items: center;  /* Vertikale Zentrierung */
        margin: 20px; /* Etwas mehr Abstand vom Rand */
    }

    #nav-toggle {
        font-size: 24px; /* Etwas kleiner, damit es nicht zu dominant ist */
        /*padding-right: 15px;  Abstand nach rechts für bessere Platzierung */
    }

    #navigation {
        top: 50px; /* Menü nicht zu weit unten */
    }

    h1 {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    p {
        font-size: 1rem; /* Kleinere Schriftgröße */
    }

    #filters {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    select {
        width: 100%;
        padding: 0.5rem;
        font-size: 1rem;
    }

    #photos {
        display: flex;
        flex-wrap: nowrap; /* Bilder bleiben in einer Zeile */
        overflow-x: auto; /* Ermöglicht horizontales Scrollen */
        scroll-snap-type: x mandatory; /* Snap-Effekt für das Swipen */
        gap: 10px; /* Abstand zwischen Bildern */
        padding-bottom: 10px;
        scrollbar-width: thin; /* Dünne Scrollbar für Firefox */
        -ms-overflow-style: auto; /* Standard-Scrollverhalten für IE */
    }
    
    #photos::-webkit-scrollbar {
        height: 8px; /* Höhe der Scrollbar */
    }
    
    #photos::-webkit-scrollbar-thumb {
        background: #8FB3AD; /* Farbe der Scroll-Leiste */
        border-radius: 10px; /* Abgerundete Scrollbar */
    }
    
    #photos::-webkit-scrollbar-track {
        background: #F3F6FA; /* Hintergrund der Scrollbar */
    }
    
    .photo {
        flex: 0 0 auto; /* Bilder haben eine feste Breite */
        max-width: 300px; /* Maximale Breite der Bilder */
        scroll-snap-align: center; /* Snap-Effekt */
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #F3F6FA; /* Hintergrund sichtbar, falls das Bild kleiner ist */
        border-radius: 10px;
        overflow: hidden;
    }
    
    .photo img {
        width: 100%; /* Bild füllt den Container */
        height: auto; /* Höhe wird automatisch angepasst */
        object-fit: contain; /* Keine Verzerrung – Bild bleibt im richtigen Verhältnis */
        max-height: 60vh; /* Maximale Höhe für große Bilder */
    }
    

    #gallery-controls {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    button {
        padding: 0.75rem 1rem;
        font-size: 1rem;
        border-radius: 8px;
    }

    #moi, #contract, #work {
        width: 80%;
        padding:0%;
    }


    .bio-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .bio-description {
        font-size: 0.9rem;
        text-align: justify;
    }

    .moi-container {
        flex-direction: column; /* Bild unter den Text setzen */
        align-items: center;
    }

    .bio-text {
        font-size: 16px; /* Etwas kleiner für bessere Lesbarkeit */
        width: 100%;
    }

    .bio-image {
        max-width: 80%; /* Bild nimmt mehr Platz ein */
        margin-top: 15px; /* Abstand nach oben */
        
    }

    #contact-form-container {
        width: 80%; /* Mehr Platz auf kleinen Screens */
        padding: 15px;
        margin: 15px auto;
    }

    #contact-form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    input, textarea, select {
        width: 100%;
        padding: 0.75rem;
        font-size: 1rem;
        border-radius: 5px;
    }

    #thank-you-message {
        padding: 1rem;
        font-size: 1rem;
    }

    footer {
        padding: 1rem;
        text-align: center;
        font-size: 0.8rem;
    }

    .carousel-item {
        flex: 0 0 100%;
    }

    form {
        width: 100%;
    }


    .contract-list {
        padding-left: 0;
    }

    .contract-list li {
        font-size: 1rem; /* Etwas kleinere Schrift */
        margin-bottom: 10px;
        align-items: flex-start;
    }

    .contract-list li::before {
        width: 35px;
        height: 35px;
        font-size: 14px;
        margin: 10px;
    }

    #overlay {
        width: 90vw; /* Größerer Bereich für mobile Ansicht */
        max-width: 400px; /* Begrenzung der Breite */
        padding: 20px;
    }
    #overlay h2 {
        font-size: 1.2rem; /* Kleinere Schriftgröße */
    }

    #overlay p {
        font-size: 0.8rem; /* Kleinere Schriftgröße */
    }

}

/* 📏 Ab max-width: 360px (Sehr kleine Smartphones) */
@media (max-width: 360px) {

    #work h2 {
        font-size: 15px;
    }

    .category {
        font-size: 13px;
        height: 25px;
        padding: 5px;
    }

    .category-content {
        font-size: 13px;
        padding: 5px;
    }

    .portfolio-gallery {
        flex-direction: column;
        gap: 5px;
    }

    .image-card {
        width: 100%;
    }

    .pinterest-link {
        font-size: 12px;
    }

    body {
        font-size: 0.8rem; /* Allgemeine Schriftgröße verringert */
    }


    header {
        padding: 1rem;
        justify-content: space-between; 
        align-items: center;
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1000;
    }


    #logo {
        /*font-size: 18px;  Kleinere Schrift */
        display: flex;
        align-items: center;  /* Vertikale Zentrierung */
        margin: 10px; /* Etwas mehr Abstand vom Rand */
    }

    #nav-toggle {
        font-size: 20px; /* Kleineres Hamburger-Menü
        padding-right: 10px; */
    }

    #navigation {
        top: 45px;
        min-width: 140px; /* Menü noch schmaler */
        font-size: 0.8rem;
    }

    /* Allgemeine Texte */
    h1 {
        font-size: 1.2rem; /* Überschrift kleiner */
        margin-bottom: 0.6rem;
    }

    p {
        font-size: 0.8rem;
    }

    #filters {
        flex-direction: column;
        gap: 0.6rem;
        align-items: stretch;
    }

    select {
        width: 100%;
        padding: 0.4rem;
        font-size: 0.85rem;
    }

    #photos {
        display: flex;
        overflow-x: auto; /* Ermöglicht horizontales Scrollen */
        scroll-snap-type: x mandatory; /* Snap-Effekt für das Swipen */
        gap: 10px; /* Abstand zwischen Bildern */
        padding-bottom: 10px;
        scrollbar-width: none; /* Entfernt Scrollbar für Firefox */
        -ms-overflow-style: none; /* Entfernt Scrollbar für Internet Explorer */
    }

    #photos::-webkit-scrollbar {
        display: none; /* Entfernt die Scrollbar für Chrome & Safari */
    }

    .photo {
        flex: 0 0 auto; /* Breite passt sich dem Bild an */
        max-width: 90%; /* Max. 90% der Bildschirmbreite */
        scroll-snap-align: center; /* Zentriert das Bild beim Scrollen */
        transition: transform 0.3s ease-in-out;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #F3F6FA; /* Hintergrund sichtbar, falls das Bild kleiner ist */
        border-radius: 10px;
        overflow: hidden;
    }

    .photo img {
        width: 100%; /* Bild füllt den Container */
        height: auto; /* Höhe passt sich automatisch an */
        object-fit: contain; /* Verhindert Verzerrung, Hintergrund bleibt sichtbar */
        max-height: 60vh; /* Maximale Höhe, damit große Bilder nicht überdimensioniert sind */
    }

    #gallery-controls {
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
    }

    button {
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
        border-radius: 6px;
    }

    #moi, #contract, #work {
        width: 80%;
        padding:0%;
    }

    .bio-container {
        flex-direction: column;
        align-items: center;
        gap: 0.6rem;
    }

    .bio-description {
        font-size: 0.8rem;
        text-align: justify;
    }

    .moi-container {
        flex-direction: column;
        width: 80%;
    }

    .bio-text {
        font-size: 14px;
        width: 100%;
    }

    .bio-image {
        max-width: 85%;
        margin-top: 10px;
    }

    #contact-form-container {
        width: 90%; /* Mehr Platz für kleine Bildschirme */
        padding: 10px;
    }

    #contact-form {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }

    input, textarea, select {
        width: 100%;
        padding: 0.6rem;
        font-size: 0.85rem;
        border-radius: 5px;
    }

    #thank-you-message {
        padding: 0.6rem;
        font-size: 0.85rem;
    }

    footer {
        padding: 0.6rem;
        text-align: center;
        font-size: 0.75rem;
    }

    .carousel-item {
        flex: 0 0 100%;
    }

    form {
        width: 100%;
    }

    .contract-list li {
        font-size: 0.8rem; /* Kleinere Schrift für 360px */
        margin-bottom: 8px;
    }

    .contract-list li::before {
        width: 30px; /* Kleinere Kreise */
        height: 30px;
        font-size: 12px; /* Kleinere Zahlen */
        margin: 8px;
    }

    #overlay {
        width: 95vw;
        font-size: 0.8rem;
    }

    #overlay h2 {
        font-size: 1rem; /* Kleinere Schriftgröße */
    }

    #overlay p {
        font-size: 0.8rem; /* Kleinere Schriftgröße */
    }
}



@media (min-width: 2000px) {
    /* 🟢 Hauptcontainer für besseren Lesefluss */
    .section {
        max-width: 1600px; /* Begrenzung für angenehme Darstellung */
        margin: auto;
    }

    /* 🟢 Navigation bleibt ganz rechts */
    #header-container {
        display: flex;
        justify-content: space-between; /* Logo links, Navigation rechts */
        align-items: center;
        width: 90%;
        max-width: 1800px; /* Begrenzt, damit es nicht zu weit auseinandergezogen wird */
        margin: 0 auto;
    }

    /* 🟢 Logo links mit mehr Abstand */
    #logo {
        font-size: 40px;
        margin-left: 160px; /* Mehr Abstand vom linken Rand */
    }

    /* 🟢 Navigation rechts ausgerichtet */
    #navigation {
        display: flex;
        gap: 40px; /* Mehr Abstand zwischen den Links */
        margin-left: auto; /* Navigation nach rechts schieben */
    }

    /* 🟢 Navigationselemente größer */
    #navigation a {
        font-size: 22px;
        padding: 10px 15px;
    }

    /* 🟢 Header bleibt proportional */
    header {
        padding: 15px 40px;
    }

    #overlay {
        width: 90vw; /* Größerer Bereich für mobile Ansicht */
        padding: 20px;
    }

    /* 🟢 Größere Schriftgrößen für besseren Lesefluss */
    body {
        font-size: 18px;
    }

    .bio-text, .contract-text {
        font-size: 18px;
        max-width: 1400px; /* Begrenzung für bessere Lesbarkeit */
    }

    /* 🟢 Portfolio-Bilder größer anzeigen */
    #photos img {
        max-width: 500px; /* Größere Bilder */
        height: auto;
    }

    /* 🟢 Kontaktformular & Buttons größer */
    #contact-form-container form input,
    #contact-form-container form select,
    #contact-form-container form textarea {
        font-size: 18px;
        padding: 15px;
    }

    form button {
        font-size: 18px;
        padding: 15px 30px;
    }

    /* 🟢 Footer zentrieren */
    #footer {
        font-size: 18px;
    }
}



/* Keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/*Portfolio*/

/* Stil für die Kategorien */
.category-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.category {
    background-color: #F3F6FA;
    color: #1C3F60;
    padding: 15px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
}

/* Hover-Farbeffekt */
.category:hover {
    transform: translateY(-2px); /* Leichter Hover-Lift-Effekt */
    box-shadow: 0px 5px 15px rgba(28, 63, 96, 0.2); /* Schatteneffekt */
}


.toggle-icon {
    font-size: 20px;
}

/* Versteckter Content */
.category-content {
    display: none;
    padding: 15px;
    background: #F3F6FA;
    border-radius: 5px;
    margin-bottom: 10px;
}

.category-content p {
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
}

/* Pinterest Link */
.pinterest-link {
    display: inline-block;
    margin-bottom: 10px;
    color: #8B2C25    ;
    font-weight: bold;
    text-decoration: none;
    font-size: 16px;
}

.pinterest-link:hover {
    text-decoration: underline;
}

/* Galerie */
.portfolio-gallery {
    display: flex;
    gap: 15px;
    
}

.image-card {
    width: 45%;
    /*border: 1px solid #ddd;*/
    padding: 10px;
    border-radius: 5px;
    background: #F3F6FA;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.image-card img {
    max-width: 100%;
    border-radius: 5px;
    height:auto;
    width:auto;
    max-height: 400px;
}



/* Nach oben Button */
#scrollTopBtn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #1C3F60;
    color: white;
    padding: 12px 18px;
    font-size: 16px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#scrollTopBtn:hover {
    background: #8FB3AD;
}

/* Button wird sichtbar beim Scrollen */
#scrollTopBtn.show {
    opacity: 1;
    visibility: visible;
}