/* Global Variables */
:root {
    --bg_main: #EFEFEF;
    --text_main: #151415;
    --text_secondary: #1e1e1e;
    --font_urbanist: 'Urbanist';
    --col_accent: #F5DB71; /* Akzentfarbe */
    --col_sec: #D0C2D1; /*light purple*/
    --col_prim: #7E5B6A;
    --spacing_lg: 16px; /* Variable für den Abstand */
    --spacing_sm: 8px; /* Variable für den Abstand */
    --spacing_xxl: 80px; /* Variable für den Abstand */
}
/* nur mobil */
#about_me{display: none;}
#headermobil{display: none;}
.onlymob {display: none;}

/* Global Styles */
* {
    margin: 0;
    padding: 0;
    font-family: var(--font_urbanist);
    box-sizing: border-box;
}


a {
    color: inherit; /* Vererbt die Farbe vom übergeordneten Element */
    text-decoration: none; /* Entfernt Unterstreichungen */
    cursor: pointer; /* Ändert den Cursor in einen Zeiger */
}

button {
    /* Setzen Sie alle vorgegebenen Stile zurück */
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
    margin: 0;
    /* Weitere Stile nach Bedarf zurücksetzen */
}

section{
    margin-top: var(--spacing_lg);
}

.divider {
    width: 16px; /* Breite des Abstands */
    background-color: transparent;
}

.separator{
    height: var(--spacing_lg);
    background-color: transparent;
    width: 100%;
}

html, body {
    height: 100%;
    background-color: var(--bg_main);
    color: var(--text_main);
}

header {
    padding: 20px 0;
    width: 100%;
    background-color: var(--bg_main);
    position: fixed;
    z-index: 2000;
}

#headerbox {
    width: 80%; /* Breite der Headerbox auf 90% des Bildschirms festlegen */
    margin: 0 auto; /* Zentrieren der Headerbox */

}

nav {
    display: flex;
    align-items: center;
    gap: 48px;
    margin: 0 auto;
    height: 48px;
}

.nav_item {
    position: relative; /* Relativ positionieren */
    font-family: var(--font_urbanist);
    font-style: normal;
    font-weight: 600;
    font-size: 120%;
    line-height: 29px;
    display: flex;
    align-items: center;
    min-width: 150px;
    height: 29px;
    color: var(--text_main);
    z-index: 1;
}

.nav_item.active {
    position: relative; /* Relativ positionieren */
}

.nav_item.extended {
    display: flex; /* Flexbox für das erweiterte Nav-Element */
    align-items: center; /* Zentriert die Elemente vertikal */
}

.nav_item.active:after {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--col_accent);
    position: absolute;
    top: 50%;
    left: calc(50% - 50px); /* Position relativ zum linken Rand des aktiven Nav-Elements */
    transform: translateY(-50%); /* Zentriert das Element vertikal */
    z-index: -1;
}


.nav_item a:hover {
    text-decoration: underline;
}

.nav_left {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-right: auto; /* Elemente in nav_left ganz nach links setzen */
}

.nav_right {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto; /* Elemente in nav_right ganz nach rechts setzen */
}

#wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;

}

#content {
    width: 70%;
    max-width: 900px;
    margin: auto;
    height: auto;
    box-sizing: border-box; /* Stellen Sie sicher, dass das Padding in die Breite einbezogen wird */
}

.container {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing_lg);
    margin: auto;
    margin-bottom: var(--spacing_lg);
}

.column {
    flex: 1;
    box-sizing: border-box; /* Ensure padding is included in the width */
    display: flex;
    flex-direction: column;
    gap: var(--spacing_lg);
}

.column.wide {
    position: relative; /* Position relativ setzen, damit die Buttons relativ dazu positioniert werden können */
    flex: 2; /* Doppelt so breit wie die anderen Spalten */
}


.skill_card {
    padding: 16px;
    position: relative;
    background-color: white;
    width: 100%;
    height: auto; /* Hier können Sie die Höhe nach Bedarf ändern */
    border-radius: 4px;
    box-sizing: border-box;
    _display: flex;
    flex-direction: column;
    gap: var(--spacing_sm);
    transition: transform 0.5s;
}



.skill_card.mob{
    display: none;
}


.skill_card .front,
.skill_card .back {
        display: flex;
    flex-direction: column;
    gap: var(--spacing_sm);
}
/*
.skill_card .front {
    background-color: white;
    z-index: 2;
}

.skill_card .back {
    position: absolute; /* Absolute Positionierung, um die Rückseite über der Vorderseite zu platzieren *//*
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotateY(180deg); /* Karte umdrehen, um die Rückseite anzuzeigen */
/*    background-color: var(--col_accent);
    z-index: -1; /* Stellen Sie sicher, dass die Rückseite unter der Vorderseite liegt */
    
 /*   align-items: center; /* Vertikale Ausrichtung zentrieren */
 /*   justify-content: center; /* Horizontale Ausrichtung zentrieren */
 /*   text-align: center;} /* Text horizontal zentrieren */
}


/* Wenn die Karte gedreht ist */
.skill_card.flipped {
    transform: rotateY(180deg);
}

/* Wenn die Karte umgedreht ist, zeigen Sie die Rückseite an */
.skill_card.flipped .back {
    z-index: 3;
     display: flex;
}

/* Stellen Sie sicher, dass die Vorderseite über der Rückseite angezeigt wird */
.skill_card.flipped .front {
    z-index: 0;/* Stellen Sie sicher, dass die Vorderseite über der Rückseite liegt */
}


.skill_card p{
    font-weight: 500;
    font-size: 90%;
    line-height: 150%;
}

.skill_card img{
    width: 24px;
    height: auto;
}

.main-img-container{
}

.main-image {
    width: 100%;
    border-radius: 4px;
}

.main-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


h1 {
    font-style: normal;
    font-weight: 600;
    font-size: 200%;
    line-height: 58px;
}

h2
{
    font-weight: 600;
    font-size: 130%;
}

h4 , h3{
    font-weight: 600;
    font-size: 120%;
    line-height: 26px;
}

p, li {
    font-weight: 300;
    font-size: 100%;
    font-weight: 500;
    line-height: 32px;
}

ul{
    list-style: outside;
    margin-left: 12px;
}


.button-container {
    left: 50%; /* Horizontal zentrieren */
    transform: translateX(-50%); /* Horizontal zentrieren */
    display: flex; /* Flexbox verwenden */
    justify-content: center; /* Zentrieren der Buttons horizontal */
    z-index: 1000; /* Stellen Sie sicher, dass die Buttons über anderen Inhalten liegen */
    gap:var(--spacing_lg);
}


.sticky-button, .mob_btn {
        width: 180px;
    height: 40px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 100%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* X-Versatz, Y-Versatz, Blur, Farbe */
}

.sticky-button.primary{
    
    background-color: var(--col_accent);
}
.sticky-button.secondary{
    
    background-color: white;
    _border: 2px solid var(--col_sec);
}

.sticky-button:hover{
    color: white;
    background-color: var(--text_main);
    border: 2px solid var(--bg_main);
}


/* PORTFOLIO */


#case-wrapper{
    margin-top: calc(2*var(--spacing_lg));
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.sep-line{
    width: 100%;
    border-top: 4px dotted var(--col_sec);
}

.portfolio{
    font-size: 300%;
    margin-bottom: calc(2*var(--spacing_lg));
    margin-top: calc(2*var(--spacing_lg));
}

section a{
    width: 100%;
}

.case-container h2, .case-section h2{
    font-size: 250%;
    font-weight: 400;
    padding: 
}
.case-container h4, .case-container h3{
    font-size: 120%;
    font-weight: 500;
    color: var(--text_secondary);
}

section.case-container{
    margin-top: calc(2*var(--spacing_lg));
    margin-bottom: calc(2*var(--spacing_lg));
}
.case-container{
    padding: calc(2*var(--spacing_lg));
    border-radius: 16px;
    width: 100%;
    _background: rgba(166, 155, 167, 0.2);
    border: 1px solid #E5E5E5;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.case-container:hover{
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    background-color: #F5F5F4;
}


.case-column{
    display: flex;
    flex-direction: column;
    gap: calc(1*var(--spacing_lg));
    width: 100%;
}

.case-row
{
    display: flex;
    flex-direction: row;
    gap: calc(1*var(--spacing_lg));
}

.case-top{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 8px;
}

.badges-row{
    display: flex;
    flex-direction: row;
    gap: calc(var(--spacing_lg)/2);
}

.badge{
display: flex;
flex-direction: column;
min-width: 64px;
background: var(--col_sec);
border-radius: 4px;
padding: 4px;
font-size: 80%;
font-weight: 600;
justify-content: center;
align-items: center;
}

.flex-100{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.flex-100 .nav_item {
    display: flex;
    align-self: flex-end; /* Hier setzen wir align-self auf flex-end, um den Link unten auszurichten */
    border-radius: 4px;
}

.flex-100 .nav_item a{
    margin: 0;
    text-align: left;
    font-size: 90%;
}

/* PORTFOLIO ENDE */


/* Cases Detail */

.content-case {
    width: 70%;
    max-width: 900px;
    margin: auto;
    height: auto;
    box-sizing: border-box; /* Stellen Sie sicher, dass das Padding in die Breite einbezogen wird */
}

.dotted{
    border: 1px dashed #7E5B6A;
    border-radius: 16px;
    padding: calc(2*var(--spacing_lg));
    _background-color: rgba(255,255,255,.5);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.case-section{
    margin-top: var(--spacing_xxl);
    margin-bottom: var(--spacing_xxl);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.case-section:not(.dotted){
    
}

.case-section em{
    font-style: normal;
    font-weight: 600;
}

.img-cent {
    width: 100%;
    display: flex;
    justify-content: center; /* Horizontale Ausrichtung zentrieren */
}

.img-cent img {
    max-width: 100%; /* Optional: Begrenzt die Bildbreite auf 100% des Containers */
}

.box-em{
    _background-color: var(--col_sec);
    border-radius: 16px;
    margin: auto;
    border: 1px dashed #7E5B6A;
    padding: calc(2*var(--spacing_lg));
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.icon-list img{
    padding: var(--spacing_lg);
    width: 10%;
}

.case-section ul,.case-section ol{
    list-style-position: outside;
    padding: var(--spacing_lg);
    min-width: 80%;
}

.case-section h3{
    margin-top: var(--spacing_lg);
    }

.icon-list{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: var(--spacing_lg);
}

.icon-list li, .insights-list li{
        margin-left: var(--spacing_lg);
}


.full-size{
    width: 100%;
}

.full-size img{
    width: 100%;

}


.breadcrumb {
    color: var(--col_prim);
    font-weight: 600;
    font-size: 16px;
    margin-left: 16px; /* Abstand zwischen dem Link und dem Text */
    
}


.text-image {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
}

.text-copy {
    width: 50%; /* Der Text nimmt 50% der Breite ein */
    display: flex; /* Aktiviert Flexbox für den Textcontainer */
    flex-direction: column; /* Legt die Ausrichtung der flexiblen Elemente auf eine Spalte fest */
    justify-content: center; /* Zentriert den Inhalt vertikal */
    gap: var(--spacing_lg);
}

.image-container {
    width: 50%; /* Das Bild nimmt den Rest der Breite ein */
    max-width: calc(50% - 16px); /* Berücksichtigt den Abstand von 16px */
    border-radius: 4px;
    overflow: hidden;
    text-align: bottom;
}

.image-container.img-bottom {
    align-content: flex-end;
}

.image-container img {
    width: 100%; /* Das Bild nimmt 100% der Breite seines Containers ein */
    height: auto; /* Das Bild passt sich proportional an die Breite an, um Verzerrungen zu vermeiden */
}

.img-description{
    font-size: 80%;
    line-height: 100%;
    font-weight: 500;
    color: var(--col_prim);
}

.wave-separator{
    width: 100%;
    overflow: hidden;
}


/* Cases Detail ENDE */



/* MODAL */
/* Style for modal */
.modal {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 48px;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(21, 20, 21, 0.7);
}

/* Style for modal content */
.modal-content {
    padding-top: 46px;
    padding-bottom: 5%;
    display: block;
    max-height: calc(100% - 48px - 20px); /* Adjusted max-height considering header height and padding */
    margin-left: auto;
    margin-right: auto;
    background-color: var(--bg_main);
}

/* Style for images within modal content */
.modal-content img {
    width: 100%; /* Ensure the image takes the full width of its container */
    height: auto; /* Automatically adjust the height to maintain aspect ratio */
    object-fit: contain; /* Resize the image to fit its container while preserving aspect ratio */
}



/* Style for close button */
.close {
    color: var(--col_accent);
    position: absolute;
    top: calc(48px + 10px); /* Adjusted top position considering header height and padding */
    right: 48px;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/*Footer*/

#footer-box {
    display: flex;
    justify-content: center; /* Horizontale Zentrierung der Kinderelemente */
    width: 100%;
    background-color: #151415;
    color: white;
    padding:  24px;
    box-sizing: border-box;
}


#copyright{
   display: flex;
    flex-direction: row;
    line-height: 16px;
    gap: 8px;
    font-size: 90%;
}

#copyright img{
    max-width: 16px;
    max-height: 16px;
}



/*SLIDER ENDE */

@media screen and (max-width: 768px) {
    #headerbox {
        display: none;
    }

    .skill_card img {
        float: right;

    }
    
    .skill_card h4{
        float: left;
        font-size: 90%;
        padding-right: 8px;
    }

    
.skill_card p{
    clear: both;
    font-weight: 400;
    font-size: 90%;
}
        
    
h1 {
    font-style: normal;
    font-weight: 600;
    font-size: 130%;
    line-height: 36px;
}
    

#content {
    width: 100%;
    padding: 16px;
    margin: 0;
}
    
    #wrapper{
        padding: 0;
    }
    
.column.wide {
    display: none;
}
    
.skill_card {
    padding: 8px;
}

.skill_card img{
    width: 24px;
    }
    
.skill_card.mob{
    display: block;
    margin-bottom: var(--spacing_lg);
    }
   
    
    #about_me{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    
.onlymob{
        display: block;
    }

.disclaimer{
        padding: 16px;
        background-color: #3c3c3c;
        color: white;
        border-radius: 4px;
        margin-top: 32px;
        display: flex;
        box-shadow:  0px 4px 4px rgba(0, 0, 0, 0.25);
        gap: 8px;
          }
    
    .disclaimer img{
        width: 48px;
    }
    
.mob_image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}
#headermobil{
    display: flex;
    justify-content: space-between;
    text-align: center;
    align-content: center;
    }
    
#headermobil a{
    font-weight: 600;
    font-size: 120%;
    align-self: center;
    }
    
    #headermobil img{
        width: 36px;
        height: 36px;
    }
    
    .back{
        width: 36px;
        height: 36px;
    }
    
    header{
        box-sizing: border-box;
        padding: 8px;
            background-color: var(--col_accent);
    }
    
.mob_btn {
    width: 100%;

}
    
    .mob_btn.primary{
        background-color: var(--col_accent);
    }

    .mob_btn.secondary{
            background-color: white;
        border: 1px solid var(--text_main)
    }
    
    .case-container{
        padding: 0;
        border: none;
    }


    .case_slide {
        flex-direction: column; /* Set the direction to row */
        gap: var(--spacing_lg); /* Add some gap between the slides */
    }
    
    .description {
        width: 100%; /* Ensure they take full width */
        font-size: 80%;
    }
  /*  .image-container{
        display: none;
    } */
    
    .image-container img{
        height: 465px;
        object-fit: contain; 
        border: none;
    }
    
/* PORTFOLIO */
    
    p{
        line-height: 24px;
        font-size: 90%;
    }
    
   h1.portfolio{
        font-size: 200%;
       margin: 0;
       margin-bottom: 16px;
    }
    

#case-wrapper{
    margin-top: calc(1*var(--spacing_lg));
    gap: var(--spacing_lg);
}
.case-container h2, .case-section h2{
    font-size: 150%;
    font-weight: 600;
    padding: 0;
}
.case-container h4, .case-container h3{
    font-size: 100%;
    font-weight: 500;
    color: var(--text_secondary);
}

section.case-container{
    margin-top: calc(1*var(--spacing_lg));
    margin-bottom: calc(1*var(--spacing_lg));
}
.case-container{
    padding: 0;
    border: none;
    box-shadow:none;
}
.case-container:hover{
    box-shadow: none;
    background-color: none;
}
.case-column{
    gap: calc(.5*var(--spacing_lg));
}

.flex-100 img{
display: none;
}

.flex-100 .nav_item a{
text-decoration: underline;
}

/* PORTFOLIO ENDE */
    
/* Cases Detail MOBIL */

.content-case {
    width: 100%;
    padding: 16px;
}

.dotted{
    border: 1px dashed #7E5B6A;
    border-radius: 16px;
    padding: calc(1*var(--spacing_lg));
    _background-color: rgba(255,255,255,.5);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.case-section{
    margin-top: var(--spacing_lg);
    margin-bottom: var(--spacing_lg);
}

.box-em{
    _background-color: var(--col_sec);
    border-radius: 16px;
    margin: auto;
    border: 1px dashed #7E5B6A;
    padding: calc(2*var(--spacing_lg));
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.icon-list{
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacing_lg);
}

    
.icon-list img{
    padding: var(--spacing_lg);
    width: 20%;
    max-width: 80px;
}

.case-section ul,.case-section ol{
    list-style-position: outside;
    padding: var(--spacing_lg);
    min-width: 80%;
}

.case-section h3{
    margin-top: var(--spacing_lg);
    }

.icon-list li, .insights-list li{
        margin-left: var(--spacing_lg);
    font-size: 90%;
    line-height: 24px;
}


.full-size{
    width: 100%;
}

.full-size img{
    width: 100%;

}


.breadcrumb {
    color: var(--col_prim);
    font-weight: 600;
    font-size: 16px;
    margin-left: 16px; /* Abstand zwischen dem Link und dem Text */
    
}


.text-image {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.text-copy {
    width: 100%; 
}

.image-container {
    width: 100%; /* Das Bild nimmt den Rest der Breite ein */
    height: auto;
}
    
.image-container img{
        width: 100%;
    height: auto;
    }


.wave-separator{
    width: 100%;
    max-height: 100px;
    overflow: hidden;
}
    
.insights-list li{
    margin: 0;
    font-size: 95%;
    }
    
    ol.insights-list{
        padding: 0;
    }



    
}