/*================================ Responsive Styles ================================*/

/*-----------------------------------------------------------------------------------*/
/*	1.	Table of Contents
/*-----------------------------------------------------------------------------------*/
/*  1.	Table of Contents
/*  2.	Typography
/*  3.	Header (Navigation)
/*  4.	Navigation
/*  5.	Buttons
/*  6.	Start Header
/*  7.	Start Main
/*  8.	Work Single Page
/*  9.	Work Single Page: Picture Zoom
/*  10.	Archives
/*  11.	About
/*  12.	Imprint
/*  13.	Footer
/*  14.	Sobnstiges

/*
	#Tablet – 1024px Landscape
    #Tablet - 768px Portrait
    #Mobile - 900px Landscape 
    #Mobile - 430px Portrait

    2025
    (#Desktop – 1200px Landscape)
    #Tablet – 992px Landscape
    #Tablet - 768px Portrait
    #Mobile - 576px  
    #Mobile - 400px klein 
*/

/*-----------------------------------------------------------------------------------*/
/*	2.	Typography
/*-----------------------------------------------------------------------------------*/


/* ========== Smartphone Portrait (bis ~576px) ========== */
@media (max-width: 576px) {

	h1 {    
        font-size: clamp(2.2rem, 8.37vw, 5rem);
        line-height: clamp(2.5rem, 9.55vw, 5.3rem);
        margin: 0;
    }

}


/*-----------------------------------------------------------------------------------*/
/*	3.	Header (Navigation)
/*-----------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------*/
/*	4.	Navigation
/*-----------------------------------------------------------------------------------*/

/* ========== Tablet Portrait (bis 768px) ========== */
@media (max-width: 768px) {

	#header .percent-three-fourth {
        width: 100%;
        clear: both;
        margin-bottom: 0px;
    }

    #navigation {
        display: none;
        margin-top: 15px;
        width: 100%;
        background-color: #fff;
        box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 3px;
    }
    
    #navigation.active {
        display: block;
    }

    ul#mainnav {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
        display: none;
    }

    #navigation.active ul#mainnav {
        display: block;
    }

    ul#mainnav > li {
        background: none !important;
        width: 100%;
        border-bottom: 1px solid #EFEFEF;
        padding: 5px;
    }

    ul#mainnav li a {
        display: block;
        padding: 12px 16px;
        width: 100%;
        color:#000;
        text-decoration: none;      
    }

    ul#mainnav > li:last-child {
        border: 0;
        background: #fff;

    }

    .nav-btn {
        display: block;
        font-size: 30px;
        cursor: pointer;
        background: none;
        border: none;
        color:black;
        padding: 10px;
        right: 15px;
        top: 5px;
        position: absolute;
        z-index: 5000;
    }
        
    .nav-btn:hover {
        color: #a38a17;
    }
}


/*-----------------------------------------------------------------------------------*/
/*	5.	Buttons
/*-----------------------------------------------------------------------------------*/

/* ========== Tablet Portrait (bis 768px) ========== */
@media (max-width: 768px) {

	.btn-see-more {
        border-width: 1.5px;
        padding: 16px 36px;
    }

    .btn-back, .btn-next {
        border-width: 1.5px;
        padding: 16px 36px;
    }

}

/*-----------------------------------------------------------------------------------*/
/*	6.	Start Header
/*-----------------------------------------------------------------------------------*/

/* ========== Tablet Landscape (bis 992px) ========== */
@media (max-width: 992px) {

    .row-full-height-tinted {
        min-height: 75vh;
        padding-top: 11.35rem;        
        padding-bottom: 7.375rem;
    }
}

/* ========== Tablet Portrait (bis 768px) ========== */
@media (max-width: 768px) {

	.row-full-height-tinted {
        padding-top: 9.75rem;        
        padding-bottom: 0;     
    }
}


/*-----------------------------------------------------------------------------------*/
/*	7.	Start Main
/*-----------------------------------------------------------------------------------*/

/* ========== Tablet Landscape (bis ~992px) ========== */
@media (max-width: 992px) {

    .section-title::after {
        width: 10.75vw;
    }
}

/* ========== Tablet Portrait (bis 768px) ========== */
@media (max-width: 768px) {

    .section-title-about::after {
        width: 14vw;
    }

    .section-title {
        letter-spacing: 1px;
    }

    .section-title::after {
        width: 13.25vw;
    }

    .grid {
        grid-template-columns: repeat(2, 1fr);  
    }
}

/* ========== Smartphone Portrait (bis ~576px) ========== */
@media (max-width: 576px) {

    .centered-wrapper {
        margin: 0 8vw;
    }
    .section-title {
        letter-spacing: 1px;
    }

    .section-title::after {
        width: 17.5vw;
    }

    .grid {
        grid-template-columns: repeat(1, 1fr);  
    }
}

/* ========== Smartphone Portrait (bis ~430px) ========== */
@media (max-width: 430px) {

    .headline {
        margin: 15.15vw 8vw 0;
    }

    .section-title::after {
        width: 25.75vw;
    }
}


/*-----------------------------------------------------------------------------------*/
/*	8.	Work Single Page
/*-----------------------------------------------------------------------------------*/

/* ========== Tablet Landscape (bis ~992px) ========== */
@media (max-width: 992px) {

    .work-subline {
        margin-top: -0.35rem;
        margin-left: 3.75vw;
    }   

    .portfolio-year-title::after {
        width: 10.75vw;
    }

    .portfolio-grid {
	    grid-template-columns: repeat(3, 1fr);
	}
}

/* ========== Tablet Portrait (bis 768px) ========== */
@media (max-width: 768px) {
	
    .work-subline {
        margin-left: 3.8vw;
        margin-top: -0.25rem;
    }

    .portfolio-year-title {
        letter-spacing: 1px;
    }

    .portfolio-year-title::after {
        width: 13.25vw;
    }

    .portfolio-grid {
	    grid-template-columns: repeat(2, 1fr);
	}

    /*.big3x3 {
        grid-column: span 2; 
    }*/

    .big3x3 {
        display: none; /* Desktop-Bild verstecken */
    }

    .lang2x4 {
        display: block !important; /* Tablet-Bild zeigen */
        grid-row: span 4;
        grid-column: span 2;
    }
}

/* ========== Smartphone Portrait (bis ~576px) ========== */
@media (max-width: 576px) {

    .work-subline {
        margin-left: 4vw;
    }

    .portfolio-year-title::after {
        width: 17.5vw;
    }

    .portfolio-grid {
	    grid-template-columns: 1fr;
	}

    .big {
        grid-row: auto; 
    }

    .big,
    .big3x3,
    .tall,
    .lang2x4 {
        grid-row: auto !important; /* span aufheben */
        grid-column: auto !important; /* ggf. column span aufheben */
    }

    /*.big3x3 {
        grid-column: span 1; 
    }*/
}

/* ========== Smartphone Portrait (bis ~430px) ========== */
@media (max-width: 430px) {

    .work-subline {
        margin-left: 5.7vw;
    }

    .portfolio-year {
        margin: 17.15vw 8vw 0;
    }
      
    .portfolio-year-title::after {
        width: 25.75vw;
    }
}


/*-----------------------------------------------------------------------------------*/
/*	9.	Work Single Page: Picture Zoom
/*-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------*/
/*	10.	Archives
/*-----------------------------------------------------------------------------------*/

/* ========== Desktop (bis 1200px) ========== */
@media (max-width: 1200px) {

    .archive-subline {
        margin-left: 5.5vw;
    }
}

/* ========== Tablet Landscape (bis 992px) ========== */
@media (max-width: 992px) {

	.grid-kundenteppich {
        grid-template-columns: repeat(5, 1fr);
        gap: 4.5vw;
    }

    .grid-kundenteppich img {
        width: 11.7vw;
        height: 5.4vw;
    }
}   


/* ========== Tablet Portrait (bis 768px) ========== */
@media (max-width: 768px) {

	.grid-kundenteppich {
        display: grid;
        grid-template-columns: repeat(3, 1fr);  
        gap: 4.5vw;
    }

    .grid-kundenteppich img {
        max-width: 14.5vw;
        max-height: 7.15vw;
        object-fit: contain;
        display: block;
    }
}

/* ========== Smartphone Portrait (bis ~576px) ========== */
@media (max-width: 576px) {

    .archive-subline {
        margin-left: 6vw;
        letter-spacing: 3px;
    }

    .centered-wrapper-archives {
        margin: 17.15vw 8vw 0;
    }
}

/* ========== Smartphone Portrait (bis ~430px) ========== */
@media (max-width: 430px) {

    .archive-subline {
        margin-left: 9vw;
    }

    .grid-kundenteppich {
        display: grid;
        grid-template-columns: repeat(3, 1fr);  
        gap: 4.5vw;
    }

    .grid-kundenteppich img {
        max-width: 24.5vw;
        max-height: 10.15vw;
        min-width: 24.5vw;
        min-height: 10.15vw;
        object-fit: contain;
        display: block;
    }
}

/*-----------------------------------------------------------------------------------*/
/*	11.	About
/*-----------------------------------------------------------------------------------*/

/* ========== Tablet Landscape (bis 1440px) ========== */
@media (max-width: 1440px) {

    .percent-one-three {
        flex: 0 0 25vw;
    }
}

@media (max-width: 1389px) {

    .single-image-img-wrapper img {
        object-position: -2vw center;
    }
}

@media (max-width: 1330px){

    .percent-one-three {
        flex: 0 0 27.5vw;
    }
}

@media (max-width: 1230px) {

    .percent-one-three {
        flex: 0 0 29.5vw;
    }
}

@media (max-width: 1160px) {

    .single-image-img-wrapper img {
        object-position: -3vw center;
    }
}

@media (max-width: 1128px) {

    .single-image-img-wrapper img {
        object-position: -5vw center;
    }
}

@media (max-width: 1100px) {

    .percent-one-three {
        flex: 0 0 30vw;
    }

    .single-image-img-wrapper img {
        object-position: -4vw center;
    }
}

@media (max-width: 1073px) {

    .single-image-img-wrapper img {
        object-position: -5.5vw center;
    }
}

@media (max-width: 1059px) {

    .single-image-img-wrapper img {
        object-position: -7.5vw center;
    }
}

@media (max-width: 1024px) {
	
    .percent-one-three {
        flex: 0 0 32.5vw;
    }

    .single-image-img-wrapper img {
        object-position: -8vw center;
    }
}

/* ========== Tablet Landscape (bis 992px) ========== */
@media (max-width: 992px) {

    .single-image-img-wrapper img {
        object-position: -10vw center;
    }

    .grid-about {
        gap: 5.5vw;
    }

    .work-experience {
        width: 47vw
    }

    .grid-programms {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-about-creativefields {
        gap: 5.5vw;
    }
}

@media (max-width: 959px) {

    .single-image-img-wrapper img {
        object-position: -14vw center;
    }
}

@media (max-width:900px) {

    .single-image-img-wrapper img {
        object-position: -16vw center;
    }
}

@media (max-width:890px) {

    .vita {
        padding: 2em 1.5em 0 1.5em;
    }

    .single-image-img-wrapper img {
        object-position: -12.5vw center;
    }
}

@media (max-width:870px) {

    .single-image-img-wrapper img {
        object-position: -13.5vw center;
    }
}

@media (max-width:840px) {

    .single-image-img-wrapper img {
        object-position: -14.5vw center;
    }
}

@media (max-width:825px) {

    .single-image-img-wrapper img {
        object-position: -17.5vw center;
    }

    .work-experience {
        width: 35vw;
    }
}

@media (max-width:800px) {

    .single-image-img-wrapper img {
        object-position: -18.5vw center;
    }
}

@media (max-width:775px) {

    .single-image-img-wrapper img {
        object-position: -21.5vw center;
    }
}

/* ========== Tablet Portrait (bis 768px) ========== */
@media (max-width: 768px) {

    .percent-one-three {
        flex: 0 0 34.5vw;
    }

    .vita {
        padding: 6.5vw 4.5vw 0 4.5vw;
    }

    .single-image-img-wrapper img {
        object-position: -19.5vw center;
    }

    .work-experience {
        width: 100%;
    }   

    .grid-about{
        grid-template-columns: repeat(1, 1fr);
        gap: 11.15vw
    }

    .grid-programms {
        grid-template-columns: repeat(4, 1fr);
        gap: 5vw;
    }
    
    .grid-about-creativefields {
        grid-template-columns: repeat(1, 1fr);
        gap: 4vw;
    }
}

@media (max-width: 735px) {

    .single-image-img-wrapper img {
        object-position: -24.5vw center;
    }
}

@media (max-width: 703px) {

    .single-image-img-wrapper img {
        object-position: -28.5vw center;
    }
}

@media (max-width: 690px) {

    .single-image-img-wrapper img {
        object-position: -31.5vw center;
    }
}

@media (max-width: 660px) {

    .single-image-img-wrapper img {
        object-position: -39vw center;
    }
}

@media (max-width: 630px){

    .single-image-img-wrapper img {
        object-position: -41.5vw center;
    }
}

@media (max-width: 610px) {

    .single-image-img-wrapper img {
        object-position: -41.5vw center;
    }
}

@media (max-width: 590px) {

    .single-image-img-wrapper img {
        object-position: -47.5vw center;
    }
}

/* ========== Mobile Portrait (bis 576px) ========== */
@media (max-width: 576px) {

    .centered-wrapper-about-header {
        display: flow-root;
    }

    .centered-wrapper-about {
        margin: 20vw 10vw;
    }

    .vita {
        padding: 6.5vw 4.5vw 9vw;
    }

    .percent-one-three {
        width: 100vw;
    }

    .single-image-img-wrapper img {
        object-position: center;
    }


    .grid-about {
        gap: 20vw;

    }

    .grid-programms {
        grid-template-columns: repeat(3, 1fr);
        gap: 4vw;
    }

    .centered-wrapper-about-contact {
        margin: 20vw 10vw 10vw;
    }

}

/* ========== Smartphone Portrait (bis ~430px) ========== */
@media (max-width: 430px) {
	
    .centered-wrapper-about-header {
        display: flow-root;
    }
    
    .vita {
        padding: 10vw 8vw;
    }

    .percent-one-three {
        width: 100%;
    }

    .single-image-img-wrapper {
        max-height: 100vw; 
    }

    .single-image-img-wrapper img {
        width: 100%;
    }

    .centered-wrapper-about {
        margin: 30vw 8vw;
    }

    .centered-wrapper-about-contact {
        margin: 30vw 8vw 8vw;
    }

    .section-title-about::after {
        width: 23.5vw;
    }

    .section-title-about {
        letter-spacing: 1px;
    }
    
    .section-tagline-fat {
        letter-spacing: 0.5px;
      }

    .grid-about {
        grid-template-columns: repeat(1, 1fr);
        gap: 30vw;
    }

    .grid-programms {
        grid-template-columns: repeat(3, 1fr);
        gap: 4vw;
    }

    .grid-about-creativefields {
        grid-template-columns: repeat(1, 1fr);
        gap: 1.1em;
    }

    .grid-languages {
        gap: 4vw;
    }

    .img-aligncenter {
        max-height: 2.88em;
        padding-bottom: 1.08em;
    }
}

/*-----------------------------------------------------------------------------------*/
/*	12.	Imprint
/*-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------*/
/*	13.	Footer
/*-----------------------------------------------------------------------------------*/

/* ========== Smartphone Portrait (bis ~430px) ========== */
@media (max-width: 430px) and (orientation: portrait) {

    #footer {
        padding: 8vw 0;
    }

    .footer {
        padding-top: 8vw;
    }
}
/*-----------------------------------------------------------------------------------*/
/*	14.	Sonstiges
/*-----------------------------------------------------------------------------------*/