/* math */
@font-face {
    font-family: 'Kumbh Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/kumbh1.woff2) format('woff2');
    unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}

/* symbols */
@font-face {
    font-family: 'Kumbh Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/kumbh2.woff2) format('woff2');
    unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}

/* latin-ext */
@font-face {
    font-family: 'Kumbh Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/kumbh3.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Kumbh Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/kumbh4.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --main-green: #488161;
    --light-green: #E4F1EA;
    --orange: #FEB59D;
    --light-orange: #FFF8EB;
    --dark-orange: #EE8877;
    --font: 'Kumbh Sans', serif;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
    max-width: 100vw;
    /* Prevents elements from extending beyond viewport */
}

body {
    font-family: var(--font);
    margin: 0;
    letter-spacing: 1px;
    font-weight: 300;
}

header {
    padding: 0.7vw 8vw;
}

h1,
h2,
h3,
.green {
    color: var(--main-green);
}

h2 {
    font-size: 34px;
}

h3 {
    font-size: 18px;
    margin: 5px 0;
}


.row {
    display: flex;
    flex-direction: row;
}

.column {
    display: flex;
    flex-direction: column;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

/*HEADER*/
.header-item ul.row {
    list-style-type: none;
    padding-inline-start: 0px;
}

.header-item .row li {
    padding: 0 30px 0 0;
}


.header-item.row>* {
    padding: 0 0 0 25px;
}

.header-item.row {
    align-items: center;
    justify-content: end;
}

.header.row .header-item .logo {
    width: 70px;
}

.header .header-item.row img,
.footer .socials img {
    width: 25px;
    height: 25px;
}

.header .header-item.row .lang-dropdown img.menu-flag,
.header .header-item.row .lang-btn img.menu-flag {
    height: auto;
    width: 20px;
}



.header.row {
    margin-right: auto;
    margin-left: auto;
    position: relative;
    align-items: center;
}

.header-item {
    display: flex;
    flex: 1;
    justify-content: center;
}

/*Language switcher - HEADER */
.language-switcher {
    position: relative;
    display: inline-block;
    z-index: 10;
}

.lang-btn {
    background: #fff;
    border: none;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s ease;
}

.lang-btn:hover {
    background: #d8e8d1;
}

.lang-dropdown {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 100%;
    background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-width: 150px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.language-switcher:hover .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-dropdown li {
    border-bottom: 1px solid #eee;
}

.lang-dropdown li:last-child {
    border-bottom: none;
}

.lang-dropdown a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #333;
    font-size: 15px;
    transition: background 0.3s ease;
}

.lang-dropdown a:hover {
    background: #eef4ec;
}


/*FOOTER*/
.footer {
    margin-top: 10vw;
    padding: 70px 150px 30px;
    background-image: url(/img/footer-veggies.png);
    background-color: var(--light-green);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.footer .kontakt .logo,
.footer .copyright {
    display: flex;
    justify-content: center;
}

.footer.column .kontakt .logo img {
    width: 30%;
}

.footer .kontakt div {
    flex: 1;
    gap: 10px;
}

.footer .kontakt a,
.header .header-item ul a {
    color: #000000;
    text-decoration: none;
}

.footer .kontakt a:hover,
.header .header-item ul a:hover {
    color: var(--main-green);
}

.footer .socials {
    align-items: end;
    display: flex;
    gap: 23px;
}

.footer .kontakt .socials {
    align-items: end;
    display: flex;
    gap: 23px;
}

.footer .kontakt .privacy a {
    margin-left: 10vw;
}

.footer .copyright {
    border-top: 1px var(--main-green) solid;
    margin-top: 30px;
    padding-top: 13px;
}

/*Hero section - HOME*/
.button span,
.flip-button {
    background-color: var(--main-green);
    border-radius: 25px;
}

.button span:hover,
.flip-button:hover {
    background-color: #6a9f80;
}

.button.light a,
.button a {
    text-decoration: none;
    font-weight: 400;
}

.button.light span:hover {
    background-color: #83b798;
    color: #ffffff;
}

.introduction-image {
    background-color: #E4F1EA;
    width: 50%;
}

.introduction-text {
    background-color: #F4F9F6;
    width: 50%;
    overflow: visible;
}

.introduction-text .text {
    padding: 0 10vw 0 8vw;
    position: absolute;
    z-index: 5;
}

.introduction-text .text p {
    padding-right: 11vw;
    font-size: 17px;
    line-height: 32px;
    color: var(--main-green);
}

.hero {
    height: 48vw;
}

.hero .introduction-text {
    display: flex;
    align-items: center;
}

.button span {
    padding: 10px 30px;
    text-transform: uppercase;
    color: white;
}

.hero .introduction-text .button {
    margin-top: 40px;
}

.introduction-image.relative>img:nth-of-type(1) {
    z-index: 2;
    width: calc(100% + 20vw);
    height: 100%;
    object-fit: cover;
    transform: translateX(-20vw);
}

.introduction-image.relative>img:nth-of-type(2) {
    z-index: 1;
    width: 80%;
    transform: translate(15%, 24%);
}

.introduction-image.relative>img:nth-of-type(3) {
    z-index: 3;
    right: 0;
    width: 20%;
}

.introduction-text.relative img:nth-of-type(1) {
    bottom: -2vw;
}

.introduction-text.relative img:nth-of-type(2) {
    width: 50%;
    right: 50px;
}

.introduction-text.relative>img:nth-child(3) {
    position: absolute;
    bottom: 50px;
}

/*About me section - HOME*/
.marquee {
    text-align: center;
    padding: 100px 40px;
    font-size: 24px;
    letter-spacing: 0.4vw;
    color: #FEB59D;
}

.about-me {
    display: flex;
    flex-direction: row;
}

.onion {
    right: 6vw;
    bottom: -49%;
    width: 35%;
}

.about-me .image {
    width: 50%;
    text-align: center;
}

.about-me .text {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: relative;
}

.about-me .text p {
    padding-left: 50px;
    padding-right: 200px;
    line-height: 28px;
}

.about-me .text .button {
    padding-left: 50px;
}

.button.light span {
    background-color: var(--light-green);
    color: var(--main-green)
}


/*Services section - HOME*/
.pakete {
    display: flex;
    flex-direction: row;
    margin-top: 200px;
    position: relative;
}

.pakete .text {
    background-color: #F6EDDB;
    position: relative;
    margin-bottom: 110px;
    width: 50%;
    display: flex;
    align-items: center;
}

.pakete .text h2 {
    margin-block-start: 0;
    margin-block-end: 0;
}

.pakete .text div {
    z-index: 5;
    position: relative;
}

.pakete .text img {
    position: absolute;
    bottom: 0;
    z-index: 1;
}

.pakete h2,
.pakete .text .button {
    padding: 0 105px;
}

.pakete .text .button {
    padding-top: 10px;
}

.pakete ul {
    line-height: 28px;
    padding: 0 105px;
}

.pakete ul li {
    padding: 15px;
}

.pakete ul li span,
.pakete ul li::marker,
.flip-card-back>ul>li::marker {
    color: #E87A3B;
}

.pakete .image {
    margin-top: 110px;
    width: 50%;
}

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

/*Contact me section - HOME*/
.kontaktformular {
    display: flex;
    flex-direction: row;
    margin-top: 13vw;
}

.kontaktformular .image {
    width: 35%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.kontaktformular .image .title {
    font-size: 25px;
    letter-spacing: 0.4vw;
    position: absolute;
    top: -13vw;
    left: 8vw;
    color: #FEB59D;
}

.kontaktformular .image img {
    width: 80%;
}

.kontaktformular .form {
    width: 65%;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
}

.kontaktformular .form input,
.kontaktformular .form textarea {
    background-color: #F4F9F6;
    border-style: none;
    padding-block: 1vw;
    padding-inline: 5vw;
    font-family: 'Kumbh Sans';
    font-weight: 400;
    letter-spacing: 1.5px;
    font-size: 16px;
    border-radius: 25px;
    -webkit-box-shadow: 5px 3px 6px 0px rgba(220, 217, 217, 1);
    -moz-box-shadow: 5px 3px 6px 0px rgba(220, 217, 217, 1);
    box-shadow: 5px 3px 6px 0px rgba(220, 217, 217, 1);
    width: 100%;
    color: var(--main-green);
}

.kontaktformular .form textarea {
    padding-inline: 7vw;
}

.kontaktformular .form input[type="checkbox"] {
    background-color: none;
    padding-block: 0;
    padding-inline: 0;
    border-radius: 0;
    width: auto;
}

.kontaktformular .form textarea {
    resize: none;
    height: 220px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.kontaktformular>.form>form>input[type=submit] {
    background-color: var(--main-green) !important;
    color: #ffffff;
    width: auto;
}

.form img {
    width: 15%;
    top: -9vw;
    right: 17vw;
}

form {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5vw;
    justify-content: space-between;
    max-width: 45vw;
    margin: auto;
}

.form-row {
    display: flex;
    gap: 30px;
    width: 100%;
}

.form-row input {
    flex: 1;
}

/*UBER MICH*/
/*Hero section - UBER MICH*/
.hero.about {
    background-image: url(/img/uber-mich.png);
    justify-content: flex-end;
    background-image: url(/img/uber-mich.png);
    background-size: cover;
}

.about .text-about {
    width: 50%;
    display: flex;
    align-items: center;
    background-color: #F4F9F6AD;
}

.about .text-about .text {
    padding: 0 100px;
    overflow: hidden;
    align-items: center;
}

.about .text-about .text p {
    line-height: 28px;
    font-size: 15px;
}

.about .text-about .text span.highlight {
    color: var(--main-green);
    font-weight: 700;
}

.about .text-about .text img.carrot {
    width: 40%;
}

.about .text-about .text a {
    text-align: center;
}

.about .text-about .text img.arrow-down {
    width: 30%;
}

.about .text-about img.tomato-basil {
    width: 15%;
    position: absolute;
    bottom: -4vw;
    right: 3vw;
}

/*My background - ABOUT ME*/
.about.background.qualification {
    padding: 5vw 8vw 1vw;
}

.absolute.apple {
    width: 11%;
    left: -35px;
}

.about.background.qualification .title h2 {
    color: #E87A3B;
    padding-bottom: 3vw;
}

.about.background.qualification .text.background {
    align-items: center;
}

.about .text.background div.background img {
    width: 70%;
}

.text.background .background {
    flex: 2;
    text-align: center;
}

/* Experiences - UBER MICH*/
ul.experiences {
    padding-left: 15px;
    margin-top: -1px;
    flex: 1;
}

ul.experiences li {
    padding-left: 21px;
    margin-bottom: 2.5em;
    list-style: none;
}

ul.experiences.right li {
    padding-right: 15px;
}

ul.experiences.right li .title {
    text-align: right;
    font-weight: 600;
    color: var(--main-green);
}

ul.experiences.left li .title {
    text-align: left;
    font-weight: 600;
    color: var(--dark-orange);
}

.description {
    display: block;
    margin-top: 0.5em;
}


/* BORDERS AND BULLETS */
p.description {
    margin-bottom: 0;
    line-height: 28px;
    font-size: 15px;
}

ul.experiences li {
    position: relative;
    margin-bottom: 0;
    padding-bottom: 2.5em;
}

ul.experiences li:after {
    /* bullets */
    content: '•';
    font-size: 62px;
    position: absolute;
    top: 0px;
}

ul.experiences.right li:after {
    color: var(--dark-orange);
}

ul.experiences.left li:after {
    color: var(--main-green);
}

ul.experiences.right li:before {
    border-left: 1px solid var(--dark-orange);
}

ul.experiences.left li:before {
    border-left: 1px solid var(--main-green);
}

ul.experiences li:before {
    /* lines */
    content: "";
    position: absolute;
    height: 100%;
    width: 1px;
}

ul.experiences.left li:after {
    left: -26px;
}

ul.experiences.left li:before {
    left: -19px;
}

ul.experiences.right {
    text-align: right;
}

ul.experiences.right li:before {
    right: -20px;
}

ul.experiences.right li:after {
    right: -27px;
}

ul.experiences li:first-child:before {
    top: 40px;
    /* moves the line down so that it disappears under the bullet. Adjust manually */
}

ul.experiences.right li:first-child:before {
    top: 40px;
}

ul.experiences.right li:last-child:before {
    height: 92px;
}

ul.experiences.right li:last-child:after {
    top: 53px;
}

ul.experiences li:last-child:before {
    /* last li's line */
    height: 40px;
    /* shorten the line so it goes only up to the bullet. Is equal to first-child:before's top */
}

/*My Qualification - UBER MICH*/
.about.qualification {
    padding: 2vw 8vw 4vw;
}

.about.qualification .pepper {
    z-index: 1;
    top: -8vw;
    right: 0;
    width: 14%;
}

.about.qualification .title {
    text-align: center;
}

.about .text.qualification {
    gap: 3vw;
    justify-content: center;
    margin-top: 6vw;
}

.about .text.qualification div {
    flex: 1;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.about .text.qualification div img {
    width: 35%;
}

.about .text.qualification div h3 {
    padding: 2vw 4vw 0;
    text-align: center;
}

.about .text.qualification div:nth-of-type(even) h3 {
    color: var(--main-green);
}

.about .text.qualification div:nth-of-type(odd) h3 {
    color: var(--dark-orange);
}

.about .text.qualification div p {
    padding: 0 4vw;
    text-align: center;
    line-height: 28px;
    font-size: 15px;
}

.kontaktformular.about {
    margin-top: 7vw;
}

.kontaktformular.about .title {
    font-size: 25px;
    letter-spacing: 0.4vw;
    color: #FEB59D;
}

.kontaktformular.about .image {
    margin-top: -12vw;
}

.kontaktformular.about .form form {
    margin-top: 5vw;
}

.kontaktformular.about .form img {
    width: 15%;
    top: -5vw;
    left: 3vw;
}


/*PAKETE UND PREISE*/
/*Individual courses - PAKETE UND PREISE*/
/* Flip card container */
.title.courses {
    background-color: #F4F9F6;
    padding: 0.2vw;
    text-align: center;
    margin-bottom: 3vw;
}

.title.courses img {
    transform: rotate(-60deg);
    left: 1vw;
    bottom: -1.5vw;
    width: 5%;
}

.individual-courses {
    padding: 0 50px;
}

.flip-card {
    width: 100%;
    height: auto;
    perspective: 1000px;
    /* Adds 3D effect */
    flex: 1;
}

/* Hide the checkbox */
#flip-toggle1 {
    display: none;
}

#flip-toggle2 {
    display: none;
}

#flip-toggle3 {
    display: none;
}

#flip-toggle4 {
    display: none;
}

/* Inner wrapper for flipping */
.flip-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

/* Flip when checked */
#flip-toggle1:checked+.flip-card-inner {
    transform: rotateY(180deg);
}

#flip-toggle2:checked+.flip-card-inner {
    transform: rotateY(180deg);
}

#flip-toggle3:checked+.flip-card-inner {
    transform: rotateY(180deg);
}

#flip-toggle4:checked+.flip-card-inner {
    transform: rotateY(180deg);
}

/* Front & back sides */
.flip-card-front,
.flip-card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    border-radius: 25px;
}

.flip-card-back {
    text-align: left;
}

.flip-card-front {
    text-align: center;
    line-height: 28px;
}

.flip-card-back ul,
.flip-card-back p,
.flip-card-front h4,
.flip-card-front span {
    padding: 0 50px;
}

.flip-card-front h4,
.flip-card-back strong {
    font-size: 21px;
    color: var(--dark-orange);
}

/* Back side styling */
.flip-card-back {
    transform: rotateY(180deg);
}

/* Flip button styling */
.flip-button {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 25px;
    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
}

.individual-courses {
    padding: 0 80px;
}

.individual-courses .main-foto {
    display: flex;
    justify-content: center;
}

.individual-courses .main-foto img {
    width: 135%;
    z-index: 5;
    position: relative;
    left: -2vw;
    top: 1vw;
}

/*Front side styling*/
.flip-card.light-orange .flip-card-front,
.flip-card.light-orange .flip-card-back {
    background-color: var(--light-orange);
}

.flip-card.light-green .flip-card-front,
.flip-card.light-green .flip-card-back {
    background-color: var(--light-green);
}

.individual-courses .cards.column {
    align-items: center;
    flex: 1;
    gap: 3vw;
}

.individual-courses .main-foto {
    flex: 1;
}

.group-courses {
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 0 23vw;
}

.group-courses img:nth-child(1) {
    width: 16%;
    left: 4vw;
}

.group-courses img:nth-child(2) {
    width: 20%;
    right: 0;
}

.group-courses p,
.group-courses ul,
.title {
    z-index: 5;
    text-align: center;
    line-height: 28px;
}

.group-courses.title {
    padding: 9vw 26vw 0;
}

.group-courses strong {
    color: #EE8877;
}

.kursen.title.courses {
    margin-top: 5vw;
}

/*HIDDEN MOBILE ELEMENTS*/
.header.row.mobile-menu {
    display: none;
}

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

.disclaimer {
    padding: 20px 150px;
    margin-top: 4vw;
    font-size: 12px;
    line-height: 15px;
    background: #f2f2f2;
}

/*IMPRESSUM*/
.impressum {
    padding: 0 6vw;
}

.impressum h2 {
    font-size: 1.3em;
}

.impressum h3 {
    color: var(--main-green);
    font-size: 1.15em;
}

.impressum h4 {
    color: var(--main-green);
    font-weight: 700;
    font-size: 1.05em;
}

.impressum p,
.impressum ul li {
    line-height: 26px;
    font-size: 15px;
}

.impressum a {
    color: var(--main-green);
    text-decoration: none;
}

.impressum a:hover {
    color: #83b798;
}







/*Responsive Styles*/
@media screen and (max-width : 1024px) {

    h1,
    h2 {
        font-size: 1.7em;
    }

    /*Font size on different pages*/
    .home .about-me .text p,
    .home .pakete ul,
    .uber-mich .about .text-about .text p,
    .uber-mich .about.background.qualification .text.background ul li p,
    .uber-mich .about .text.qualification div p,
    .group-courses p,
    .group-courses ul,
    .impressum p {
        line-height: 26px;
        font-size: 14px;
    }

    /*MOBILE MENU*/
    header {
        padding: 1.5vw 8vw;
    }

    .header.row.mobile-menu {
        display: flex;
    }

    .header.desktop-menu,
    .arrow-down {
        display: none;
    }

    .header-item {
        justify-content: space-between;
    }

    .mobile-menu .header-item.logo {
        justify-content: center;
    }

    .header .header-item.row .lang-dropdown img.menu-flag,
    .header .header-item.row .lang-btn img.menu-flag {
        height: auto;
        width: 20px;
    }

    .header .header-item ul a img {
        width: 40%;
    }

    .mobile-menu .header-item ul a {
        padding: 15px;
    }

    .mobile-menu {
        display: block;
    }

    .mobile-menu .lines {
        border-bottom: 8px double #488161;
        border-top: 2.5px solid #488161;
        content: "";
        height: 14px;
        width: 25px;
        padding-right: 15px;
        float: left;
    }

    .lang-dropdown.menu {
        padding: 20px;
        text-align: center;
        min-width: 85vw;
    }

    .lang-dropdown.menu div.column {
        margin-top: 50px;
    }

    .lang-dropdown.menu div.column div.row {
        justify-content: center;
    }

    .lang-dropdown.menu div.column .button {
        margin-top: 20px;
    }

    .header.row.mobile-menu>div:nth-child(1)>div>ul>div>div.button>a {
        background-color: transparent;
    }

    .header.row.mobile-menu>div:nth-child(1)>div>ul>div>div.row>a:nth-child(1),
    .header.row.mobile-menu>div:nth-child(1)>div>ul>div>div.row>a:nth-child(2) {
        padding: 10px 0;
    }

    .lines {
        border-bottom: 15px double #488161;
        border-top: 5px solid #488161;
        content: "";
        height: 5px;
        width: 20px;
        padding-right: 15px;
        float: left;
    }


    /*FOOTER*/
    .footer {
        padding: 7vw 6vw 3vw;
        line-height: 16px;
        margin-top: 14vw;
        font-size: 14px;
    }

    .footer .kontakt {
        gap: 1.5em;
    }

    .footer .kontakt .logo {
        display: block;
        text-align: center;
    }

    .footer.column .kontakt .logo img {
        width: 6em;
    }

    .footer .kontakt .socials {
        justify-content: center;
        margin-top: 20px;
    }

    .footer .kontakt .email-tel,
    .footer .privacy {
        text-align: center;
    }

    .footer .kontakt .privacy a {
        margin-left: 0;
    }

    /*HOMEPAGE*/
    .home .hero.row {
        flex-direction: column;
        height: unset;
    }

    .home .introduction-text.relative {
        height: 400px;
        width: 100%;
    }

    .home .introduction-text.relative img:nth-of-type(1) {
        display: none;
    }

    .home .introduction-text.relative img:nth-of-type(2) {
        width: 40%;
    }

    .home .introduction-text .text {
        text-align: center;
    }

    .home .introduction-text .text p {
        padding: 0 10vw;
    }

    .home .pakete h2,
    .pakete .text .button {
        padding: 0 12vw;
    }

    .home .about-me .text .button {
        padding-left: 6vw;
    }

    .home .introduction-image.relative {
        height: 55vh;
        width: 100%;
    }

    .home .introduction-image.relative>img:nth-of-type(1) {
        z-index: 2;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right;
        transform: unset;
    }

    .home .introduction-image.relative>img:nth-of-type(2) {
        height: 64%;
        top: 9vh;
        object-fit: cover;
        overflow: visible;
        transform: translate(15%, 5%);
    }

    .home .introduction-image.relative>img:nth-of-type(3) {
        width: 16%;
    }

    .home .marquee {
        padding: 9vw 6vw;
        line-height: 33px;
        font-size: 1.1em;
    }

    .home .introduction-text.relative>img:nth-child(3) {
        bottom: 11px;
    }

    .home .hero .introduction-text.relative div h1 {
        margin-block-start: 0
    }

    .home .hero .introduction-text.relative div p {
        font-size: 1em;
    }

    .home .about-me {
        flex-direction: column;
    }

    .home .about-me .image,
    .home .about-me .text {
        width: 100%;
    }

    .home .about-me .image img {
        width: 50%;
    }

    .home .about-me .text p {
        padding: 6vw 6vw 2vw;
    }

    .home .onion {
        width: 25%;
        bottom: -25%;
    }

    .home .pakete {
        flex-direction: column;
        margin-top: 120px;
    }

    .home .pakete .text {
        width: 100%;
        margin-bottom: 0;
    }

    .home .pakete .text div:nth-child(1) {
        padding: 8vw 0 16vw;
    }

    .home .pakete ul {
        padding: 0 12vw 3vw;
    }

    .home .pakete .image {
        margin-top: -25vw;
        width: 100%;
    }

    .home .kontaktformular {
        margin-top: 100px;
    }

    .home .kontaktformular .image .title {
        width: 200%;
        left: 22vw;
        line-height: 33px;
        font-size: 1.2em;
        top: -47px;
    }

    .home .form img {
        top: 54px;
        z-index: 2;
        width: 11%;
    }

    .home .button span {
        font-size: 14px;
    }

    /*UBER MICH page*/
    .uber-mich .introduction-text .text p {
        padding-right: 3vw;
        font-size: 15px;
        line-height: 29px;
    }

    .uber-mich .hero .mobile-image {
        display: block;
    }

    .uber-mich .hero .mobile-image img {
        width: 100%;
        object-fit: cover;
        height: 70vw;
        object-position: left;
    }

    .uber-mich .hero.about.row,
    .uber-mich .about.background.qualification .text.background,
    .uber-mich .about .text.qualification,
    .footer .kontakt,
    .footer .kontakt .email-tel {
        flex-direction: column;
    }

    .uber-mich .hero.about {
        background-image: unset;
        justify-content: unset;
    }

    .uber-mich .hero {
        height: unset;
    }

    .uber-mich .about .text-about {
        width: 100%;
    }

    .uber-mich .about .text-about .text {
        padding: 3vw 6vw 7vw;

    }

    .uber-mich .about.background.qualification {
        padding: 4vw 6vw 1vw;
    }

    .uber-mich .about .text.background div.background img {
        width: 40%;
    }

    .uber-mich .about .text.qualification div img {
        width: 18%;
    }

    .uber-mich .absolute.apple {
        width: 16%;
        left: 0;
    }

    .uber-mich ul.experiences.right li:before {
        right: -5px;
    }

    .uber-mich ul.experiences.right li:after {
        right: -12px;
    }

    .about .text.qualification {
        gap: 7vw;
    }

    .about .text.qualification {
        padding-top: 7vw;
    }

    .about.qualification {
        padding: 6vw 8vw 4vw;
    }


    /*Contact form styling for HOME and UBER MICH pages*/
    .kontaktformular .form input,
    .kontaktformular .form textarea {
        font-size: 14px;
        padding-inline: 40px;
    }

    .kontaktformular .form input[type="checkbox"] {
        padding-inline: 0;
    }

    .home .kontaktformular .form form,
    .uber-mich .kontaktformular.about .form form {
        max-width: 95%;
        margin-top: 12vw;
        transform: translateX(-20%);
        gap: 25px;
    }

    .kontaktformular.about {
        margin-top: 16vw;
    }

    .kontaktformular .form {
        width: 80%;
    }

    .form-row {
        flex-direction: column;
        gap: 25px;
    }

    .kontaktformular .form input {
        padding-block: 1.2em;
    }

    .kontaktformular .form input[type="checkbox"] {
        padding-block: 0;
    }

    .home .kontaktformular.about .title,
    .uber-mich .kontaktformular.about .title {
        font-size: 1.3em;
        line-height: 35px;
        transform: translateX(-7%);
    }

    .home .kontaktformular.about .form img,
    .uber-mich .kontaktformular.about .form img {
        left: -7vw;
    }

    .home .kontaktformular.about .form img {
        top: 7vw;
    }

    .uber-mich .kontaktformular.about .form img {
        top: -5vw;
    }


    /*Contact form styling for PAKETE page*/
    .kursen .kontaktformular.about .form form {
        gap: 25px;
        max-width: 95%;
        transform: translateX(25%);
        margin-top: 40px;
        z-index: 10;
    }

    .kursen .kontaktformular.about {
        margin-top: 20vw;
    }

    .kursen .kontaktformular.about .title {
        padding-left: 6vw;
        text-align: left;
        font-size: 1.3em;
        line-height: 35px;
    }

    .kursen .kontaktformular.about .image {
        margin-top: -17vw;
    }

    .kursen .kontaktformular.about .image img {
        width: 130%;
        opacity: 30%;
        left: -17vw;
        position: relative;
    }


    /*PAKETE UND PREISE page*/
    .kursen .title.courses img {
        width: 10%;
    }

    .kursen .individual-courses.row {
        flex-direction: column;
        position: relative;
        padding: 0 5vw;
        gap: 250px;
    }

    .kursen .individual-courses .cards.column,
    .flip-card {
        position: relative;
    }

    .kursen div.individual-courses.row>div:nth-child(3) {
        top: 300px;
    }

    .kursen .flip-card .flip-card-front,
    .flip-card .flip-card-back {
        height: 400px;
    }

    .flip-card-front,
    .flip-card-back {
        font-size: 13px;
    }

    .kursen div.individual-courses.row>div:nth-child(1)>div.flip-card.light-green,
    .kursen div.individual-courses.row>div:nth-child(3)>div.flip-card.light-orange {
        position: relative;
        top: 400px;
    }

    .kursen .individual-courses .main-foto {
        position: relative;
        height: 412px;
        top: 550px;
    }

    .individual-courses .main-foto img {
        width: 90%;
    }

    .kursen.title.courses {
        margin-top: 1135px;
        position: relative;
    }

    .kursen .group-courses {
        padding: 0 19vw;
    }

    .disclaimer {
        padding: 20px 6vw;
    }
}


.alert.alert-success {
    margin-top: 20px;
    padding: 0 20px 0 0;
    color: green;
    font-size: 1.2em;
}

fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.kontaktformular .alert.alert-danger {
    color: #ff0000;
    padding: 10px 20px
}

.header .header-item ul a.active {
    border-bottom: solid 1px #000;
    padding-bottom: 5px;
}