:root {
    --dark-text: #2e2e31;
    --gray-text: #71727B;
    --gray-border: #C2C2D0;
    --light-gray-text: #8D8F9B;

    --insta-blue: #4f5bd5;
    --insta-purple: #962FBF;
    --insta-red: #D62976;
    --insta-orange: #FA7E1E;
    --insta-yellow: #FEDA75;

    --fb-blue-1: #7784E3;
    --fb-blue-2: #4047AB;

    --pinterest-red-1: #EA6479;
    --pinterest-red-2: #E60023;

    --ads-yellow: #F4B400;
    --ads-green: #0F9D58;
    --ads-blue: #4285F4;

    --other-yellow: #F4C843;
    --other-orange: #F48643;
    --other-red: #D45B80;
    --other-blue: #5C60E9;
    --other-green: #57D77B;

    --transition-time-short: 0.44s;
    --border-radius-generic: 0.7rem;
    --lr-margin-generic: 4.5rem;
}

@property --a {
        syntax: '<color>';
        inherits: false;
        initial-value: #8D8F9B;
    }

@property --b {
    syntax: '<color>';
    inherits: false;
    initial-value: #8D8F9B;
}

@property --c {
    syntax: '<color>';
    inherits: false;
    initial-value: #8D8F9B;
}

@property --d {
    syntax: '<color>';
    inherits: false;
    initial-value: #8D8F9B;
}

@property --e {
    syntax: '<color>';
    inherits: false;
    initial-value: #8D8F9B;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.25   ;
}

* {
    margin: 0px;
    padding: 0px;
}

a {
    text-decoration: none;
}

.inter-normal {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.block_layout {
    width: 100%;
    margin-top: 2em;
    margin-left: 4.5rem;
    font-family: Inter, sans-serif;
}

.title {
    width: 85%;
}

.title_big{
    font-weight: 700;
    font-size: 2.7rem;
}

.title_small {
    margin-top: 1.2rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--dark-text);
    position: relative;
}

.title_small span {
    font-weight: 600;
    background: -webkit-linear-gradient(0deg, var(--insta-yellow), var(--insta-orange), var(--insta-red), var(--insta-purple), var(--insta-blue));
    background-clip: text;
    -webkit-bacclround-clip: text;
    -webkit-texclfill-color: transparent;
}

.social-spanner {
    background-color: white;
    font-size: 1.6rem;
    color: var(--light-gray-text);
    font-weight: 600;
    margin-top: 2rem;
}

#s_insta, #s_fb, #s_pinterest, #s_ads, #s_uva {
    border-radius: 0.7rem;
    cursor: pointer;
    margin-top: 1rem;
    padding: 0.8rem 2rem;
    background-clip: padding-box;
    border: 1px solid white;
    box-shadow: 6px 6px 15px -11px white;
    transition: --a 0.44s, --b 0.44s, --c 0.44s, --d 0.44s, --e 0.44s, border 0.44s;
}

#s_insta p, #s_fb p, #s_pinterest p, #s_ads p, #s_uva p {
    transition: --a 0.44s, --b 0.44s, --c 0.44s, --d 0.44s, --e 0.44s, border 0.44s;
    display: inline;
}

#s_insta p, #s_uva p {
    --a: var(--light-gray-text);
    --b: var(--light-gray-text);
    --c: var(--light-gray-text);
    --d: var(--light-gray-text);
    --e: var(--light-gray-text);
    background: -webkit-linear-gradient(0deg, var(--a), var(--b), var(--c), var(--d), var(--e));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#s_fb p, #s_pinterest p {
    --a: var(--light-gray-text);
    --b: var(--light-gray-text);
    background: -webkit-linear-gradient(0deg, var(--a), var(--b));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#s_ads p {
    --a: var(--light-gray-text);
    --b: var(--light-gray-text);
    --c: var(--light-gray-text);
    background: -webkit-linear-gradient(0deg, var(--a), var(--b), var(--c));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#s_insta:hover p {
    transition: --a 0.44s, --b 0.44s, --c 0.44s, --d 0.44s, --e 0.44s, border 0.44s;
    --a: var(--insta-yellow);
    --b: var(--insta-orange);
    --c: var(--insta-red);
    --d: var(--insta-purple);
    --e: var(--insta-blue);
    background: -webkit-linear-gradient(0deg, var(--a), var(--b), var(--c), var(--d), var(--e));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#s_fb:hover p {
    transition: --a 0.44s, --b 0.44s, --c 0.44s, --d 0.44s, --e 0.44s, border 0.44s;
    --a: var(--fb-blue-1);
    --b: var(--fb-blue-2);
    background: -webkit-linear-gradient(0deg, var(--a), var(--b));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#s_pinterest:hover p {
    transition: --a 0.44s, --b 0.44s, --c 0.44s, --d 0.44s, --e 0.44s, border 0.44s;
    --a: var(--pinterest-red-1);
    --b: var(--pinterest-red-2);
    background: -webkit-linear-gradient(0deg, var(--a), var(--b));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#s_ads:hover p {
    transition: --a 0.44s, --b 0.44s, --c 0.44s, --d 0.44s, --e 0.44s, border 0.44s;
    --a: var(--ads-yellow);
    --b: var(--ads-green);
    --c: var(--ads-blue);
    background: -webkit-linear-gradient(0deg, var(--a), var(--b), var(--c));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#s_uva:hover p {
    transition: --a 0.44s, --b 0.44s, --c 0.44s, --d 0.44s, --e 0.44s;
    --a: var(--other-yellow);
    --b: var(--other-orange);
    --c: var(--other-red);
    --d: var(--other-blue);
    --e: var(--other-green);
    background: -webkit-linear-gradient(0deg, var(--a), var(--b), var(--c), var(--d), var(--e));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}



#s_fb:hover, #s_ads:hover, #s_pinterest:hover, #s_insta:hover {
    transition: --a 0.44s, --b 0.44s, --c 0.44s, --d 0.44s, --e 0.44s, border 0.44s;
    border: 1px solid var(--gray-border);
    box-shadow: 6px 6px 15px -11px var(--gray-border);
}


.container-flex {
    display: flex;
    gap: 4rem; 
    position: relative; 
    overflow: hidden;
    justify-content: center;
    height: 100vh;
}

.image_layout {
    width: 100%;
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out; /* Fade and scale transition */
    opacity: 1;
    transform: scale(1);
}

.hidden {
    opacity: 0;
}

.image_container {
    margin-right: 3.5em;
}

.active {
    background-clip: text !important;
    -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
}

#s_insta.active p{
    --a: var(--insta-yellow);
    --b: var(--insta-orange);
    --c: var(--insta-red);
    --d: var(--insta-purple);
    --e: var(--insta-blue);
    transition: --a 0.44s, --b 0.44s, --c 0.44s, --d 0.44s, --e 0.44s, border 0.44s;
    background: -webkit-linear-gradient(0deg, var(--a), var(--b), var(--c), var(--d), var(--e)) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
}

#s_insta.active, #s_pinterest.active, #s_fb.active, #s_ads.active {
    border: 1px solid var(--gray-border) !important;
    box-shadow: 6px 6px 15px -11px var(--gray-border) !important;
}

#s_uva.active p{
    --a: var(--other-yellow);
    --b: var(--other-orange);
    --c: var(--other-red);
    --d: var(--other-blue);
    --e: var(--other-green);
    border: none !important;
    transition: --a 0.44s, --b 0.44s, --c 0.44s, --d 0.44s, --e 0.44s, border 0.44s;
    background: -webkit-linear-gradient(0deg, var(--a), var(--b), var(--c), var(--d), var(--e)) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
}

#s_fb.active p{
    --a: var(--fb-blue-1);
    --b: var(--fb-blue-2);
    transition: --a 0.44s, --b 0.44s, --c 0.44s, --d 0.44s, --e 0.44s, border 0.44s;
    background-image: linear-gradient(to right, var(--a), var(--b));
    background-clip: text !important;
    -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
}

#s_pinterest.active p{
    --a: var(--pinterest-red-1);
    --b: var(--pinterest-red-2);
    transition: --a 0.44s, --b 0.44s, --c 0.44s, --d 0.44s, --e 0.44s, border 0.44s;
    background-image: linear-gradient(to right, var(--a), var(--b));
    background-clip: text !important;
    -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
}

#s_ads.active p{
    --a: var(--ads-yellow);
    --b: var(--ads-green);
    --c: var(--ads-blue);
    transition: --a 0.44s, --b 0.44s, --c 0.44s, --d 0.44s, --e 0.44s, border 0.44s;
    background-image: linear-gradient(to right, var(--a), var(--b), var(--c)) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
}

/* --- Was uns ausmacht --- */

.container-flex-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    padding: 0 4.5rem;
}

.title-2 {
    text-align: center;
    margin-bottom: 3rem;
}

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

.text-container-2 {
    height: 12rem;
    width: 45%;
    text-align: left;
    padding-top: 0.8rem;
    padding-right: 2rem;
}

.social-spanner-2 {
    width: 45%;
    transition-duration: 0.5s;
    background-color: white;
    font-size: 1.6rem;
    color: var(--light-gray-text);
    font-weight: 600;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.social-spanner-2 p {
    cursor: pointer;
    border-radius: var(--border-radius-generic);
    margin-top: 1rem;
    padding: 0.8rem 2rem;
    background-clip: padding-box;
    transition: 0.3s ease;    
    border: 1px solid white;
    box-shadow: 6px 6px 15px -11px white;
}

.social-spanner-2 p:hover {
    transition: var(--transition-time-short) ease;
    border: 1px solid var(--gray-border);
    box-shadow: 6px 6px 15px -11px var(--gray-border);
}

.active-2 {
    border: 1px solid var(--gray-border) !important;
    box-shadow: 6px 6px 15px -11px var(--gray-border) !important;
    color: black !important;
}

#legal-container {
    width: 90%;
    margin-left: 5%;
    text-align: justify;
    line-height: 1.7;
}