:root {
    --color-orange: #F4C12D;
    --color-red: #F23E58;
    --color-white: #FFFFFF;
    --color-blue: #005CA9;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Source Sans 3";
    font-size: 24px;
    font-weight: 400;
    font-style: normal;
    line-height: 28px;
    color: #000;
    leading-trim: both;
    text-edge: cap;
}

section{
    scroll-margin-top: 100px;
}

h1 {
    font-family: "Source Sans 3";
    font-size: 56px;
    font-weight: 400;
    font-style: normal;
    line-height: 75px; /* 133.929% */
    color: #005CA9;
    leading-trim: both;
    text-edge: cap;
}

h2 {
    font-family: "Source Sans 3";
    font-size: 56px;
    font-weight: 400;
    font-style: normal;
    line-height: 66px; /* 117.857% */
    color: #005CA9;
    leading-trim: both;
    text-edge: cap;
}

h1.red-line,
h1.orange-line {
    position: relative;
    padding-left: 50px;
}

.page-inner h1.red-line,
.page-inner h1.orange-line {
    margin-left: -40px;
    padding-left: 40px;
}

h2.red-line,
h2.orange-line,
h2.blue-line {
    position: relative;
    margin-bottom: 40px;
    margin-left: 13px;
    padding-left: 35px;
}

h1.red-line:before,
h1.orange-line:before,
h2.red-line:before,
h2.orange-line:before,
h2.blue-line:before {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 4px;
    height: 100%;
    content: '';
    transform: scaleY(0);
    transform-origin: top;
    border-radius: 2px;
}

h1.red-line.animate:before,
h1.orange-line.animate:before,
h2.red-line.animate:before,
h2.orange-line.animate:before,
h2.blue-line.animate:before {
    animation: growDown 2.5s ease-in-out forwards;
}

h1.red-line:before,
h2.red-line:before {
    background-color: var(--color-red);
}

h1.orange-line:before,
h2.orange-line:before {
    background-color: var(--color-orange);
}

h2.blue-line:before {
    background-color: var(--color-blue);
}

@keyframes growDown {
    0% {
        transform: scaleY(0);
        transform-origin: top;
    }
    100% {
        transform: scaleY(1);
        transform-origin: top;
    }
}

@keyframes growDownUpInfinite {
    0% {
        transform: scaleY(0);
        transform-origin: top;
    }
    12.5% {
        transform: scaleY(1);
        transform-origin: top;
    }
    25% {
        transform: scaleY(1);
        transform-origin: bottom;
    }
    37.5% {
        transform: scaleY(0);
        transform-origin: bottom;
    }
    50% {
        transform: scaleY(0);
        transform-origin: top;
    }
    62.5% {
        transform: scaleY(0);
        transform-origin: bottom;
    }
    75% {
        transform: scaleY(1);
        transform-origin: bottom;
    }
    87.5% {
        transform: scaleY(1);
        transform-origin: top;
    }
    100% {
        transform: scaleY(0);
        transform-origin: top;
    }
}

ul.plus {
    padding-left: 0; /* Добавляем отступ для своих маркеров */
    list-style: none; /* Убираем стандартные точки */
}

ul.plus li {
    font-family: "Source Sans 3";
    font-size: 24px;
    font-weight: 400;
    font-style: normal;
    line-height: 28px;
    display: flex;
    color: #000;
    leading-trim: both;
    text-edge: cap;
}

ul.plus li:not(:last-child) {
    margin-bottom: 10px;
}

ul.plus li:before {
    display: inline-block;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    margin-right: 21px; /* Отступ от текста */
    content: "";
    background-image: url("../icon/plus.svg");
    background-repeat: no-repeat;
    background-position: center;
}

.button-yellow {
    font-family: "Source Sans 3";
    font-size: 24px;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    padding: 10px 55px;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    background: #F4C12D;
}

/* Создаем невидимую копию текста с жирным начертанием */
.button-yellow::after {
    font-weight: 700;
    display: block;
    visibility: hidden;
    overflow: hidden;
    height: 0;
    content: attr(data-text);
}

.button-yellow:hover {
    font-weight: 600;
    background-image: url("../icon/arrow.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 50px 30px;
}


section.section-top {
    display: flex;
    align-items: center;
    min-height: 576px;
    background-image: url("../img/verlauf.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
}

.section-top .button-yellow {
    width: fit-content;
    margin-top: 44px;
    margin-left: 100px;
}

.block-mobile-image {
    display: none;
}

.block-mobile-image img {
    width: 100%;
}

.background-gradient-1 {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 20%;
    bottom: 0;
    left: 20%;
    background: linear-gradient(270deg, #FFF 12.02%, #BBDBD0 57.21%, rgba(72, 122, 132, 0.86) 78.37%);
    inset: 0 20%;
}

.background-gradient-2 {
    display: flex;
    height: 60px;
    margin: 0 119px 0 30px;
    background: linear-gradient(270deg, #FFF 25.96%, #F4C12D 56.73%, rgba(72, 122, 132, 0.30) 100%);
}

.background-gradient-3 {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 20%;
    bottom: 0;
    left: 20%;
    background: linear-gradient(270deg, rgba(233, 245, 233, 0.31) 27.88%, #B9DFB8 69.23%, #9AC1B1 87.98%);
    inset: 0 20%;
}

.image-on-background,
.image-on-background-small {
    width: 100%;
    min-height: 481px;
    object-fit: cover;
}

.image-on-background {
    margin: 97px 0 119px 0;
}

.image-on-background-small {
    margin: 65px 0;
}

.section-your-goals {
    margin: 138px 0 111px 0;
}

.section-your-goals h2 {
    margin-top: 60px;
}

.section-learn-german {
    margin: 108px 0;
}

.block-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-learn-german h2 {
    margin-top: 50px;
}

.section-learn-german p {
    margin-left: 52.5px;
}

.section-photo {
    width: 100%;
    min-height: 541px;
    object-fit: cover;
}

.section-optimal-learning-opportunities {
    margin: 108px 0 193px 0;
}

.section-optimal-learning-opportunities h2 {
    margin-top: 113px;
}

.section-learning-environment {
    margin: 190px 0;
}

.section-learning-environment .wrapper {
    position: relative;
}

.section-learning-environment .wrapper img.image-wrapper {
    width: 70%;
    min-height: 700px;
    object-fit: cover;
}

.section-learning-environment .text-overly {
    position: relative;
    top: 0;
    right: 0;
    left: 50%;
    max-width: 50%;
    padding: 90px 0 90px 70px;
    margin-top: -575px;
    background-color: var(--color-white);
}

section.section-service {
    min-height: 544px;
    padding: 85px 0;
    background: linear-gradient(180deg, #319BCB 15.38%, #9AC1B1 45.67%, rgba(255, 255, 255, 0.37) 81.73%, #FFF 100%);
}

section.section-service h2 {
    margin-bottom: 85px;
    color: var(--color-white);
}


section.section-service ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    align-items: flex-start; /* Выравниваем все элементы списка по верху */
}

section.section-service ul li {
    display: flex;
    flex-direction: column;
    padding: 20px;
    flex: 1; /* Равная ширина колонок */
}

section.section-service ul li div {
    display: flex;
    flex-direction: column;
}

section.section-service ul li > div:first-child {
    height: 130px; /* Фиксированная высота под самую большую иконку */
    display: flex;
    align-items: center; /* Центрируем иконку по вертикали */
    justify-content: center; /* Центрируем по горизонтали */
    margin-bottom: 15px; /* Отступ между иконкой и текстом */
}

section.section-service ul li img {
    max-width: 100%; /* Чтобы иконки не выходили за границы */
    height: auto; /* Сохраняем пропорции */
}

.icon-individually {
    width: 130px
}

.icon-demanding {
    width: 94px;
}

.icon-efficient {
    width: 85px;
}

.icon-targeted {
    width: 117px;
}

.icon-targeted-mobile {
    display: none;
    width: 117px;
}

section.section-service ul li h3 {
    font-family: "Source Sans 3";
    font-size: 35px;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    line-height: 66px; /* 188.571% */
    text-align: center;
    color: #005CA9;
    leading-trim: both;
    text-edge: cap;
}

section.section-service ul li p {
    font-family: "Source Sans 3";
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    line-height: 22px;
    text-align: center;
    color: #000;
    leading-trim: both;
    text-edge: cap;
}

section.section-form {
    margin: 118px 0;
}

section.section-form h2 {
    margin-bottom: 75px;
}

section.section-form .text-input,
section.section-form .text-input-email {
    display: flex;
    width: 100%;
    border: none;
    outline: none;
    padding: 0 0 30px 0;
    color: #085DA9;
    font-family: "Source Sans 3";
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px; /* 120% */
    border-bottom: 2px solid #005CA9;
    margin-right: 30px;
}

section.section-form .text-input-textarea {
    display: flex;
    flex-grow: 1;
    height: 390px;
    color: #085DA9;
    font-family: "Source Sans 3";
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px; /* 120% */
    background: linear-gradient(270deg, rgba(233, 245, 233, 0.31) 17.31%, rgba(231, 247, 231, 0.65) 100%);
    border: none;
    outline: none;
    padding: 25px 30px;
    margin-left: 30px;
}

section.section-form button{
    margin-top: 30px;
    outline: none;
    border: none;
}
section.section-footer-image img {
    width: 100%;
    height: 628px;
    object-fit: cover;
    object-position: top;
}

section.section-impressum {
    margin: 178px 0;
}

section.section-impressum h1,
section.section-datenschutz h1 {
    margin-bottom: 50px;
}

section.section-datenschutz {
    margin: 178px 0 81px 0;
}

section.section-datenschutz .main-content h2,
section.section-datenschutz .main-content h3 {
    font-family: "Source Sans 3";
    font-size: 40px;
    font-weight: 400;
    font-style: normal;
    line-height: 66px;
    color: #005CA9;
}

section.section-datenschutz .main-content p {
    margin-bottom: 50px;
}

.page-gradient {
    height: 100%;
    min-width: 10px;
    min-height: 760px;
    background: linear-gradient(180deg, #FFF 12.02%, #DCE8F3 25.48%, #B2CDE4 39.9%, rgba(244, 193, 45, 0.80) 59.62%, #778C6F 73.08%, rgba(8, 93, 169, 0.60) 93.27%);
}

@media all and (min-width: 768px) and (max-width: 1199.8px) {
    h1 {
        font-family: "Source Sans 3";
        font-size: 40px;
        font-weight: 400;
        font-style: normal;
        line-height: 50px; /* 125% */
        color: #005CA9;
        leading-trim: both;
        text-edge: cap;
    }

    h2 {
        font-family: "Source Sans 3";
        font-size: 40px;
        font-weight: 400;
        line-height: 30px; /* 75% */
        color: #005CA9;
        leading-trim: both;
        text-edge: cap;
    }

    p,
    ul.plus li {
        font-family: "Source Sans 3";
        font-size: 20px;
        font-weight: 400;
        font-style: normal;
        line-height: 24px;
        color: #000;
        leading-trim: both;
        text-edge: cap;
    }

    section.section-top {
        min-height: max-content;
    }

    .full-width-left {
        width: calc(50vw - 1px);
        margin-left: calc(-50vw + 50%); /* Выталкиваем влево */
        padding-left: 0;
    }

    .full-width-12-left {
        margin-left: calc(-50vw + 50%); /* Выталкиваем влево */
        padding-left: 0;
    }

    .full-width-right {
        width: calc(50vw - 1px);
        margin-right: calc(-50vw + 50%); /* Выталкиваем вправо */
        padding-right: 0;
    }


    .main-photo {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .section-learning-environment {
        margin: 130px 0 78px 0;
    }

    .section-learning-environment .text-overly {
        padding-bottom: 0;
    }

    section.section-service ul {
        flex-wrap: wrap;
    }

    section.section-service ul li {
        flex-basis: 50%;
    }

    .page-inner h1 {
        margin-left: 0 !important;
    }

    .page-inner .main-content > * {
        margin-left: 40px;
    }
}

@media all and (max-width: 1199.8px) {
    .page-gradient {
        margin-right: calc(((100vw - 960px) / -2) - .5 * var(--bs-gutter-x));
        margin-left: 20px;
    }

    section.section-footer-image img {
        height: 480px;
    }
}

@media all and (max-width: 991.8px) {
    h1 {
        font-size: 32px;
        line-height: 38px; /* 118.75% */
    }

    h2 {
        font-family: "Source Sans 3";
        font-size: 36px;
        font-weight: 400;
        font-style: italic;
        line-height: 30px; /* 83.333% */
        color: #005CA9;
        leading-trim: both;
        text-edge: cap;
    }

    p,
    ul.plus li {
        font-family: "Source Sans 3";
        font-size: 18px;
        font-weight: 400;
        font-style: normal;
        line-height: 20px;
        color: #000;
        leading-trim: both;
        text-edge: cap;
    }

    ul.plus li::before {
        width: 24px;
        height: 24px;
        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_4266_429)'%3E%3Cpath d='M12.1082 0V24' stroke='%2351B04E' stroke-width='4'/%3E%3Cpath d='M0 12.1084H24' stroke='%2351B04E' stroke-width='4'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4266_429'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    }

    h2.red-line, h2.orange-line {
        margin-left: 13.5px;
    }

    .image-on-background,
    .image-on-background-small {
        min-height: 310px;
    }

    .section-top .button-yellow {
        margin-left: 50px;
    }

    .button-yellow {
        font-size: 20px;
    }

    .page-gradient {
        margin-right: calc(((100vw - 720px) / -2) - .5 * var(--bs-gutter-x));
        margin-left: 20px;
    }

    .section-your-goals,
    .section-learn-german,
    .section-optimal-learning-opportunities,
    .section-learning-environment {
        margin: 98px 0;
    }

    .section-learning-environment {
        margin-bottom: 55px;
    }

    .section-learning-environment .wrapper,
    .section-learning-environment .wrapper img.image-wrapper {
        width: 100vw;
        min-height: 350px;
    }

    .section-learning-environment .text-overly {
        left: 30%;
        margin-top: -155px;
        padding-top: 25px;
        max-width: 70%;
    }

    section.section-footer-image img {
        height: 340px;
    }
}

@media all and (max-width: 767.8px) {
    section{
        scroll-margin-top: 10px;
    }

    h1 {
        font-family: "Source Sans 3";
        font-size: 26px;
        font-weight: 400;
        font-style: normal;
        line-height: 30px; /* 115.385% */
        color: #005CA9;
        leading-trim: both;
        text-edge: cap;
    }

    h2 {
        font-family: "Source Sans 3";
        font-size: 26px;
        font-weight: 400;
        font-style: normal;
        line-height: 32px; /* 123.077% */
        color: #005CA9;
        leading-trim: both;
        text-edge: cap;
    }

    ul.plus li,
    p {
        font-family: "Source Sans 3";
        font-size: 16px;
        font-weight: 400;
        font-style: normal;
        line-height: 20px;
        color: #000;
        leading-trim: both;
        text-edge: cap;
    }

    ul.plus li::before {
        width: 18px;
        height: 18px;
        background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6087 2V20' stroke='%2351B04E' stroke-width='4' stroke-linecap='square'/%3E%3Cpath d='M2 11.3913H20' stroke='%2351B04E' stroke-width='4' stroke-linecap='square'/%3E%3C/svg%3E");
    }

    section {
        margin: 0 !important;
    }

    section.section-top {
        position: relative;
        z-index: 10;
        min-height: auto;
        background-image: url("../img/gradient_start.svg");
        background-size: 100% 100%;
    }

    .main-photo {
        max-width: 85%;
        margin: 0 auto 35px auto;
    }

    section.section-top h1 {
        max-width: 85%;
        margin: auto;
    }

    h1.red-line {
        padding-left: 27px;
    }

    .section-top .button-yellow {
        position: relative;
        top: 20px;
        margin-top: 27px;
        margin-right: auto;
        margin-left: auto;
        padding-left: 60px;
    }

    .block-mobile-image {
        position: relative;
        display: flex;
        width: 100vw;
    }

    .block-mobile-image > img {
        position: relative;
        z-index: 1;
        display: flex;
        width: 100%;
        height: 530px;
        object-fit: cover;
    }

    .block-mobile-image .header-overly {
        position: absolute;
        z-index: 2;
        bottom: 0;
        left: 0;
        width: 85%;
        padding-left: calc((100vw - 540px) / 2 + (1.5rem * .5));
        background-color: #FFFFFF;
    }

    .section-your-goals h2,
    .section-learn-german h2,
    .section-optimal-learning-opportunities h2,
    .section-learning-environment h2 {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .section-learn-german p {
        margin-left: 50px;
    }

    .section-learning-environment .wrapper img.image-wrapper {
        display: none;
    }

    .section-learning-environment .block-mobile-image .header-overly {
        bottom: -75px;
    }

    .section-learning-environment .text-overly {
        position: relative;
        top: 0;
        right: 0;
        left: 0;
        padding: 75px 0 0 0;
    }

    section.section-service {
        padding: 28px 0 0 0;
        background: linear-gradient(180deg, #7BC08F 9.62%, #9FCEC7 33.65%, #D0E7E3 56.73%, rgba(255, 255, 255, 0.00) 90.87%);
    }

    section.section-service h2 {
        font-family: "Source Sans 3";
        font-size: 26px;
        font-weight: 400;
        font-style: normal;
        margin-bottom: 44px;
        text-align: left;
        color: #005CA9;
        leading-trim: both;
        text-edge: cap;
    }

    section.section-service ul {
        flex-direction: column;
        padding: 0;
    }

    section.section-service ul li {
        display: flex;
        flex-direction: row;
        padding-right: 0;
        padding-left: 0;
    }

    section.section-service ul li div:first-child {
        display: flex;
        align-items: center;
        flex-basis: 33%;
        justify-content: center;
        min-width: 90px;
    }

    section.section-service ul li div:last-child {
        justify-content: center;
        flex-basis: 66%;
        margin-left: 20px;
    }

    section.section-service ul li img {
        max-width: 100%;
    }

    section.section-service ul li h3 {
        font-family: "Source Sans 3";
        font-size: 20px;
        font-weight: 400;
        font-style: normal;
        line-height: 30px; /* 150% */
        text-align: left;
        color: #005CA9;
        leading-trim: both;
        text-edge: cap;
    }

    section.section-service ul li p {
        font-family: "Source Sans 3";
        font-size: 14px;
        font-weight: 400;
        font-style: normal;
        line-height: 17px;
        text-align: left;
        color: #000;
        leading-trim: both;
        text-edge: cap;
    }

    .icon-individually {
        width: 99px
    }

    .icon-demanding {
        width: 72px;
    }

    .icon-efficient {
        width: 65px;
    }

    .icon-targeted {
        display: none;
        width: 90px;
    }

    .icon-targeted-mobile {
        display: flex;
        width: 90px;
    }

    .block-1,
    .block-2,
    .block-3 {
        padding-top: 19px;
    }

    .section-learning-environment .wrapper {
        width: auto;
    }

    .section-learning-environment .text-overly {
        margin-top: 0;
    }

    .section-footer-image {
        display: none;
    }

    section.section-datenschutz,
    section.section-impressum {
        margin-left: 50px !important;
    }

    .page-gradient {
        margin-right: calc(-50vw + 50%); /* Центрирует относительно экрана */
    }

    section.section-form h2 {
        margin-bottom: 40px;
    }

    section.section-form .text-input,
    section.section-form .text-input-email {
        font-size: 20px;
        line-height: 38px; /* 190% */
        margin-right: 0;
        margin-bottom: 40px;
    }

    section.section-form .text-input-textarea {
        font-size: 20px;
        line-height: 38px; /* 190% */
        height: 254px;
        margin-left: 0;
    }
}

@media all and (max-width: 575.8px) {
    .block-mobile-image > img {
        height: 280px;
    }

    .block-mobile-image .header-overly {
        padding-left: calc(1.5rem * .5);
    }

    .section-learning-environment .wrapper {
        position: static;
        width: 100%;
        height: auto;
    }
}