/* -------------------------------------------------------------------------------------------------------- h1 Home */

@media only screen and (max-width : 1136px) {

    /* Typography */

    .heading-arachne {
        font-size: var(--fs-130);
    }

}


/* -------------------------------------------------------------------------------------------------------- Small Screen */

@media only screen and (max-width : 1040px) {

    /* Circular-Menu */

    .heading-menu {
        font-size: 40px;
    }

    /* Hero Pages*/

    .hero-page-headline-wrapper {
        width: 100%;
        height: auto;
        justify-content: flex-start;
    }

    .hero-page-paragraph-wrapper {
        width: 100%;
        height: auto;
        align-self: flex-start;
        margin: var(--space-70) 0 0 0;
    }


    /* Full Width Paragraph */

    .full-width-paragraph {
        font-size: var(--fs-121);
    }

    
    /* Service */

    .service-wrapper {
        flex-direction: column;
    }

    .service-content-left, .service-content-right {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .service-content-left {
        padding-right: none;
    }

    .service-content-right {
        padding-left: none;
        border-left: none;
    }

    .service-button {
        width: 100%;
        text-align: right;
    }

    .service-wrapper-paragraph {
        display: flex;
        flex-direction: row;
        border-top: 1px solid var(--clr-gray);
        align-items: center;
    }

    .service-lottie {
        display: none;
    }

    .service-paragraph {
        padding: 0;
        margin-top: var(--space-80);
        max-width: 512px;
    }

    .service-wrapper-img {
        height: 352px;
    }


    /* Event */

    .event-wrapper-first {
        margin: var(--space-100) 0 var(--space-80) 0;
    }

    .event-wrapper-second {
        align-items: flex-end;
    }

    .event-wrapper-third {
        align-items: flex-start;
    }

    .event-wrapper-headline {
        width: 100%;
        text-align: left;
    }

    .event-wrapper-button {
        width: 100%;
        text-align: right;
    }

    .event-wrapper-paragraph {
        width: 100%;
    }

    .event-paragraph {
        padding: var(--space-60) 0;
    }
    
    .accordion-case-studies-content {
        flex-direction: column;
    }
    
    .case-study-content {
        width: 100%;
        padding: var(--space-80);
        border-bottom: 1px var(--clr-gray) dotted;
        border-right: none;
    }
    
    .case-study-content:last-child {
        border-bottom: none;
    }


    /* Agency */

    .agency-wrapper-first {
        margin: var(--space-100) 0;
    }

    .agency-wrapper-second {
        align-items: flex-end;
    }

    .agency-wrapper-third {
        flex-direction: column;
    }

    .agency-wrapper-headline {
        width: 100%;
        text-align: left;
    }

    .agency-wrapper-paragraph {
        width: 75%;
    }

    .agency-paragraph {
        padding: var(--space-60) 0;
    }

    .agency-wrapper-button {
        align-items: flex-start;
        width: 100%;
        margin-bottom: var(--space-80);
    }


    /* CTA */
   
    .cta-wrapper-bottom {
        flex-direction: column;
    }

    .cta-wrapper-headline, .cta-wrapper-paragraph {
        width: 100%;
        justify-content: left;
    }

    .cta-paragraph {
        max-width: 440px;
        padding: var(--space-60) 0;
    }


    /* Quick Links */

    .quick-links-wrapper {
        flex-direction: column;
    }

    .quick-links-content-left, .quick-links-content-right {
        width: 100%;
        padding-top: 0;
        padding-bottom: 0;
    }
    
    .quick-links-content-left {
        padding-right: 0;
    }
    
    .quick-links-content-right {
        padding-left: 0;
        border-left: none;
    }

    .quick-links-wrapper-spark {
        padding-top: var(--space-110);
        padding-bottom: var(--space-110);
    }


    /* ---------------------------------------------------------- Full Service */

    .full-service-cta-portfolio-wrapper {
        display: flex;
        flex-direction: column;
    }
    
    .full-service-cta-portfolio, .full-service-cta-portfolio-paragraph-wrapper {
        width: 100%;
    }
    
    .full-service-cta-portfolio {
        margin-bottom: var(--space-100);
    }
    
    .full-service-cta-portfolio-paragraph-wrapper {
        justify-content: center;
    }
    
    .accordion-services-list-content {
        flex-direction: column;
    }
    
    .services-list-content {
        width: 100%;
        padding: var(--space-80);
        border-bottom: 1px var(--clr-gray) dotted;
        border-right: none;
    }
    
    .services-list-content:last-child {
        border-bottom: none;
    }

    .cta-agency-paragraph {
        font-size: var(--fs-121);
    }

    /* ---------------------------------------------------------- Agentur */
    
    .team-member {
        width: 50%;
    }


    /* ---------------------------------------------------------- Personalservice */

    .personal-offering-paragraph-wrapper {
        justify-content: left;
    }


    /* ---------------------------------------------------------- Karriere */

    .virtues-wrapper {
        justify-content: flex-start;
    }

    .virtues {
        text-align: center;
        width: 100%;
    }

    .accordion-jobs-content-wrapper {
        display: flex;
        justify-content: flex-end;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s cubic-bezier(0.65,0.05,0.36,1);
        -o-transition: max-height 0.35s cubic-bezier(0.65,0.05,0.36,1);
        -ms-transition: max-height 0.35s cubic-bezier(0.65,0.05,0.36,1);
        -moz-transition: max-height 0.35s cubic-bezier(0.65,0.05,0.36,1);
        -webkit-transition: max-height 0.35s cubic-bezier(0.65,0.05,0.36,1);
    }
    
    .accordion-jobs-content {
        width: 100%;
        padding: var(--space-70) var(--space-70) var(--space-70) var(--space-100);
    }
    
    .job-short, .job-benefits-content {
        margin-bottom: var(--space-70);
    }
    
    .job-requirement-content {
        margin-bottom: var(--space-110);
    }
    
    .job-benefits-headline, .job-requirement-headline {
        margin-bottom: var(--space-40);
    }
    
    .job-benefits-list, .job-requirements-list {
        display: list-item;
        margin-left : 1em;
    }
    
    .button-jobs, .job-mail {
        font-size: var(--fs-120);
    }
    
    .accordion-spacing {
        height: var(--space-110);
    }
    

}


/* -------------------------------------------------------------------------------------------------------- Smartphone */

@media only screen and (max-width : 740px) {

    /* General */

    .site-main {
        padding: 0 var(--space-80) 0 var(--space-80);
    }
   
    .hidden {
        display: none;
    }

    /* Accordion */

    .accordion {
        font-size: var(--fs-120);
    }

    /* Circular-Menu */

    .menu-button {
        left: auto;
        right: var(--space-80);
        /* margin-left: 0; */
        top: auto;
        bottom: var(--space-80);
    }

    .menu-content {
        width: 100%;
    }

    .menu-img-wrapper {
        display: none;
    }

    /* Typography */

    .heading-sombra-small {
        font-size: var(--fs-125);
    }

    .heading-sombra-big {
        font-size: var(--fs-130);
    }

    .heading-arachne {
        font-size: var(--fs-125);
    }

    /* Separators */

    .separator-wrapper {
        margin: var(--space-80) 0;
    }

    /* Menu-Hero */

    .menu-hero-links-wrapper {
        display: none;
    }

    /* Lottie */

    .lottie-player {
        width: 100%;
        height: auto;
    }

    /* Quick Links */

    .quick-links {
        margin-right: 0;
    }


    /* Hero Home*/

    .hero-home-wrapper {
        height: 60vh;
        margin: var(--space-80) 0;
    }

    .hero-home-logo {
        width: 100%;
        margin-top: var(--space-50);
    }

    #lottie-player-hero-home {
        height: 16px;
    }


    /* Hero Pages Alternate */

    .hero-page-alternate-wrapper {
        flex-direction: column-reverse;
    }

    .hero-page-alternate-headline, .hero-page-alternate-links-wrapper {
        width: 100%;
    }

    .hero-page-alternate-links-wrapper {
        height: 100%;
    }

    .hero-page-alternate-links {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }


    /* Full Width Image */

    .full-width-img {
        height: 320px;
    }

    /* Marquee Section */

    .marquee-text-content p {
        font-size: 6vw;
    }


    /* Full Width Paragraph */

    .full-width-paragraph {
        font-size: var(--fs-120);
        line-height: var(--lh-90);
    }


    /* Event */

    .event-wrapper-img {
        height: 320px;
    }

    /* Agency */

    .agency-wrapper-paragraph {
        width: 100%;
    }

    .agency-wrapper-img {
        height: 320px;
    }

    /* Clients */

    .clients-wrapper {
        flex-direction: column;
        padding: 0 var(--space-100);
    }

    .client-logo-wrapper {
        width: 100%;
        border-left: none;
        border-bottom: 1px solid var(--clr-gray);
    } 

    .client-logo-wrapper:first-child {
        border-bottom: 1px solid var(--clr-gray);
    }

    .client-logo-wrapper:last-child {
        border: none;
    }


    /* Social */

    .social-content-wrapper {
        flex-direction: column-reverse;
    }

    .social-claim-wrapper, .social-spark-wrapper {
        width: 100%;
        border: none;
        padding: 0;
    }

    .social-claim-wrapper {
        margin-top: var(--space-70);
    }

    .social-claim-lottie {
        width: 100%;
    }
    
    .social-spark-lottie {
        width: 24%;
    }



    /* ---------------------------------------------------------- Full Service */

    .section-cta-agency-wrapper {
        flex-direction: column;
    }
    
    .cta-agency-left {
        width: 100%;
        margin-bottom: var(--space-90);
    }
    
    .cta-agency-right {
        width: 100%;
        justify-content: right;
    }
    
    .cta-agency-paragraph {
        font-size: var(--fs-120);
    }


    /* ---------------------------------------------------------- Agentur */

    .section-team-wrapper {
        justify-content: flex-start;
        margin: var(--space-150) 0 var(--space-80) 0;
    }
    
    .section-team-content {
        width: 100%;
    }
    
    .team-member {
        width: 100%;
        padding-right: 0;
        max-width: 100%;
    }


    /* ---------------------------------------------------------- Personalservice */

    .section-personal-offering-wrapper {
        flex-direction: column;
    }

    .personal-offering-cta-wrapper, .personal-offering-content-wrapper {
        width: 100%;
    }

    .personal-offering-cta {
        margin-bottom: var(--space-90);
    }

    .personal-offering-paragraph-wrapper {
        justify-content: center;
    }

    .personal-offering {
        margin-top: var(--space-90);
    }



    /* ---------------------------------------------------------- Kontakt */
    
    .contact-info {
        width: 100%;
        flex-direction: column;
    }
    
    .contact, .address {
        width: 100%;
        padding-right: 0;
    }
    
    .kicker-contact-info {
        margin-top: var(--space-80);
    }


    /* ---------------------------------------------------------- Footer */

    .site-footer {
        padding: var(--space-110) var(--space-80) var(--space-70) var(--space-80);
    }

    .footer-wrapper {
        flex-direction: row-reverse;
    }

    .footer-links-wrapper {
        display: flex;
        flex-direction: column;
        width: 75%;
    }

    .footer-links {
        width: 100%;
        margin-bottom: 0;
        padding-bottom: var(--space-70);
    }

    .footer-logo-wrapper {
        width: 25%;
    }

    .logo-footer {
        width: 75vh;
        min-width: 128px;
        max-width: 512px;
        top: var(--space-70);
        transform-origin: 0 0;
        transform: rotate(-90deg) translate(-100%, 0);
    }







    /* Now */

    .now-heading {
        font-size: 24px;
    }

}