:root {
    --link-color: #0066cc;
    --soft-jade: #33a37c;
    --very-soft-jade: #b3e1ce;
    --deep-berry-red: #7b0030;
    --teal-blue: #007b79;
    --spring-green: #4ca300;
    --soft-gray: #E0E0E0;
    --nlk-green: #007b4c;
    --dark-neutral: #1a1a1a;
    --mid-neutral: #666666;
    --light-neutral: #f5f5f5;
    --dark-text: #333333;

    --light-rosa: #ffebec;
    --pastel-rosa: #ffd1d3;
    --light-mint: #E7EBE5;
    --light-violet: #e1dce6;
    --pastel-violet: #c2b9cd;
}

html {
    font-size: 16px; 
    scroll-behavior: smooth;
}

body {
    font-family: 'Jost', sans-serif; 
    margin: 0;
    padding: 0;
    background-color: var(--light-neutral);
    font-size: 1rem; 
}

header {
    background-color: var(--nlk-green);
    text-align: center;
    flex-direction: column;
    padding: 2% 5%;
    box-sizing: border-box;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

h1 {
    margin: 5vh 0 5vh 0;
    color: var(--dark-neutral);
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
    text-shadow:
    -1px -1px 0px var(--nlk-green),  
    1px -1px 0px var(--nlk-green),
    -1px  1px 0px var(--nlk-green),
    1px  1px 0px var(--nlk-green);
}

p {
    text-align: center;
    color: var(--dark-text);
    font-size: 1rem;
}

a {
    text-decoration: none;
    color: var(--link-color)
}

section {
    height: auto;
    padding: 12vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--dark-neutral);
    z-index: 0;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    max-width: 1200px;
    margin: auto;
    gap: 20px;
}

.header-content h2 {
    color: var(--teal-blue);
    margin-top: 5px;
}

.header-logo {
    flex-shrink: 0;
}

.header-emblem {
    width: 12vw; 
    height: 12vw; 
}

.header-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 1.5vw;
    border-left: 2px solid white;
}

.header-text h1 {
    font-size: 2.5rem; 
    color: white;
}

.fixed-menu .toggle-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 7vh;
    left: 1.5vw;
    z-index: 1001;
    transition: transform 0.3s ease; 
}

.fixed-menu a {
    color: var(--dark-neutral);
}

.menu-toggle-button {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 30vh;
    left: 2vw;
    background: none;
    border: none;     
    padding: 0;       
    margin: 0;        
    cursor: pointer;  
    z-index: 1001;    
    justify-content: center;
    align-items: center;
    transition: box-shadow 0.3s ease, transform 0.3s ease; 
}

.menu-toggle-button:hover {
    transform: scale(1.05); 
}

.toggle-menu.hidden {
    transform: translateX(-150%);
}

.fixed-menu a:hover {
    color: var(--teal-blue);
}

.fixed-menu a.active {
    color: var(--soft-jade);
}

.fixed-menu a {
    margin: 1% 0;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.5vw; 
    transition: color 0.3s, background-color 0.3s;
}

.emblem {
    width: 5vw; 
    height: 5vw; 
    margin-bottom: 2%;
    border-radius: 1vw; 
    background-color: inherit;
}

#program {
    margin-top: 0;
    padding-top: 0;
}

#program h1 {
    margin-top: 3vh;
}

.program-text {
    text-align: left;
    margin: 10vh auto 7vh auto;
    box-sizing: border-box; 
}

.program-text div {
    max-width: 64%;
    margin: 0 auto;
    padding: 0;
    font-size: 1.3rem;
    color: var(--dark-text);
}

.program-info {
    width: 64%;
    font-size: 1.3rem;
    color: var(--dark-text);
    margin-bottom: 3vh; 
}

.offer-boxes {
    display: flex;
    justify-content: space-between;
    gap: 2%;
    width: 90%; 
    height: 100%;
    padding: 0 5%; 
    margin-top: 3vh;
    box-sizing: border-box; 
}

.flip-card {
    background-color: transparent;
    width: calc(33.33% - 2%); 
    perspective: 1000px;
    margin-bottom: 2%; 
    height: 50vh;
    transition: transform 0.3s ease;
}

.flip-card:hover {
    cursor: pointer;
    transform: translateY(-5px);
}

.flip-card-inner {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%; 
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 1.5vw; 
    overflow-y: auto; 
    box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1); 
}

.flip-card-front {
    background-color: var(--soft-gray);
    color: var(--dark-text);
    display: flex;
    padding: 3.5vh 1.5vw 0 1.5vw;
    flex-direction: column;
    justify-content: normal;
    box-sizing: border-box;
}

.flip-card-back {
    background-color: var(--soft-jade);
    color: white;
    transform: rotateY(180deg);
    display: flex;
    align-items: top;
    justify-content: center;
    box-sizing: border-box;
}

.offer-image {
    width: 100%;
    height: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1vw;
}

.offer-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.offer-text h2 {
    margin: 4vh 0 0 0; 
    color: white;
}

.offer-text h3 {
    color: white;
}

.offer-text a:hover {
    text-decoration: underline;
}

.flip-card .offer-text h2 {
    font-size: 1.5rem; 
}

.offer-text div {
    padding: 1vw;
    font-size: 1.1rem;
}

.flip-button {
    z-index: 20;
    width: 2.5vw;
    height: 2.5vw;
    position: absolute;
    top: 15px;
    right: 5px;
    color: var(--light-mint);
}

.flip-button:hover {
    background-color: transparent;
    color: var(--pastel-mint);
}

.back-content {
    text-align: left;
    width: 100%;
    height: auto; 
    overflow-y: auto; 
    padding: 3vh 1vw 1vh 2vw;
    font-size: 1.1rem;
    line-height: 1.6;
}

.back-content h3 {
    margin: 1% 0; 
    color: white;
}

.back-content ul {
    padding-left: 2%; 
    list-style-type: none;
    color: white;
   
}

.back-content ul li {
    margin-top: 1vh;
    list-style-position: outside; 
}

.back-content ul li::before {
    content: ""; 
    display: inline-block;
    width: 25px; 
    height: 25px; 
    background-image: url('content/icons/leave.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center; 
    margin-right: 10px; 
    vertical-align: middle; 
}

.indikation-hover-text {
    position: relative;
    cursor: pointer;
    font-weight: bold;
    color: var(--link-color); 
}

.indikation-hover-box {
    position: fixed;
    display: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    width: 25vw; 
    background-color: white;
    color: var(--dark-text); 
    padding: 0 1vw 0 1vw;
    border-radius: 0.5vw;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
    z-index: 9999; 
    font-size: 1rem; 
}

.indikation-hover-box h3 {
    padding-left: 1vw;
    font-size: 1.2rem;
}

.indikation-hover-box ul {
    padding-left: 2%; 
    list-style-type: none;
    color: var(--dark-text);
    white-space: pre-line; 
}

.indikation-hover-box ul li {
    list-style-position: outside;
}

.indikation-hover-box ul li::before {
    content: ""; 
    display: inline-block;
    width: 22px; 
    height: 22px; 
    background-image: url('content/icons/focus.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center; 
    margin-right: 10px; 
    vertical-align: middle; 
}

.indikation-hover-text:hover .indikation-hover-box {
    display: block;
}

.project-text {
    text-align: center;
    box-sizing: border-box;
}

.project-text div {
    text-align: left;
    margin: 0 auto;
    padding: 0;
    font-size: 1.3rem;
    color: var(--dark-text);
    width: 64%;
}

.project-boxes {
    display: flex;
    justify-content: center;
    width: 90%; 
    gap: 2%; 
    margin-top: 3vh; 
}

.project-card-1 {
    background-color: var(--soft-jade);
    border-radius: 1.5vw;
    padding: 2%;
    text-align: center;
    width: calc(25% - 2%);
    height: 25vh;
    box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    background-image:
        linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url('content/images/NFS_chruezweg.png'); 

    background-size: auto, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;

    text-shadow: 
    -0.5px -0.5px 0 var(--nlk-green),  
    0.5px -0.5px 0 var(--nlk-green),
    -0.5px  0.5px 0 var(--nlk-green),
    0.5px  0.5px 0 var(--nlk-green);
}

.project-card-2 {
    background-color: var(--soft-jade);
    border-radius: 1.5vw;
    padding: 2%;
    text-align: center;
    width: calc(25% - 2%);
    height: 25vh;
    box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    background-image:
        linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url('content/images/jaeteinsatz.jpg'); 

    background-size: auto, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;

    text-shadow: 
    -0.5px -0.5px 0 var(--nlk-green),  
    0.5px -0.5px 0 var(--nlk-green),
    -0.5px  0.5px 0 var(--nlk-green),
    0.5px  0.5px 0 var(--nlk-green);
}

.project-card-3 {
    background-color: var(--soft-jade);
    border-radius: 1.5vw;
    padding: 2%;
    text-align: center;
    width: calc(25% - 2%);
    height: 25vh;
    box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    background-image:
        linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)),
        url('content/images/jahresprogramm_2025/jahresprogramm_2025_thumbnail.png'); 

    background-size: auto, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;

    text-shadow: 
    -0.5px -0.5px 0 var(--nlk-green),  
    0.5px -0.5px 0 var(--nlk-green),
    -0.5px  0.5px 0 var(--nlk-green),
    0.5px  0.5px 0 var(--nlk-green);
}

.project-card-1:hover, 
.project-card-2:hover, 
.project-card-3:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-3px); 
}

.project-card-link {
    text-decoration: none; 
    color: white;
    display: block;
    width: 100%;
    transition: transform 0.3s ease;
}

#presse {
    padding: 4vw 2%;
    background-color: #f9f9f9; 
    text-align: center;
}

#presse h1 {
    font-size: clamp(2.2rem, 3.5vw, 3.5rem);
    margin-bottom: 2vw;
    color: #333;
}

.presse-container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    align-items: stretch; 
    gap: 2vw; 
    max-width: 1200px;
    margin: 0 auto;
}

.presse-vorschau {
    width: calc(25% - 2vw); 
    height: 30vh;
    min-width: 280px;
    flex-grow: 1;
    border-radius: 1.5vw;
    box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5vw;
    text-decoration: none;
    color: white;
    text-align: center;
}

.presse-vorschau:hover {
    transform: translateY(-8px) scale(1.08);
    box-shadow: 0 0.8vw 1.5vw rgba(0, 0, 0, 0.15);
}

.presse-vorschau .vorschau-text {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 0.5vw;
    padding: 0.5vw 1vw;
}

.presse-vorschau h3 {
    font-size: clamp(1.1rem, 1.3vw, 1.2rem);
    margin: 0 0 0.5vw 0;
    font-weight: 600;
}

.presse-vorschau p {
    font-size: clamp(0.9rem, 1vw, 1rem);
    margin: 0;
    color: white;
    font-weight: 300;
}

#ueber-uns {
    padding: 4vw 2%;
    background-color: #f9f9f9;
    text-align: center;
}

.ueber-uns-text {
    max-width: 800px;
    margin: 0 auto 3vw auto;
    line-height: 1.7;
}

.ueber-uns-text div {
    text-align: left;
    margin: 0 auto;
    padding: 0;
    font-size: 1.3rem;
    color: var(--dark-text);
    width: 64%;
}

.ueber-uns-text h1 {
    margin-bottom: 1.5vw;
    color: #333;
}

.ueber-uns-text p {
    color: #555;
}

.ueber-uns-text a {
    color: #0056b3;
    font-weight: 600;
    text-decoration: none;
}
.ueber-uns-text a:hover {
    text-decoration: underline;
}

.team-main-image {
    max-width: 1000px;
    margin: 0 auto 4vw auto;
    border-radius: 1.5vw;
    box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.team-main-image img {
    width: 100%;
    max-height: 60vh;
    height: auto;
    display: block;
    object-fit: cover;
}

.team-members-container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    gap: 2vw;
    max-width: 1200px;
    margin: 0 auto;
}

.team-member-card {
    background-color: var(--soft-jade, #ffffff);
    border-radius: 1.5vw;
    padding: 2vw;
    box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex-basis: 280px; 
    flex-grow: 1;
    min-height: 15vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.team-member-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.8vw 1.5vw rgba(0, 0, 0, 0.15);
}

.team-member-card h3 {
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    color: #333;
    margin: 0 0 0.5vw 0;
}

.team-member-card p {
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    color: #555;
    margin: 0;
    line-height: 1.5;
}

.team-member-card a {
    color: #0056b3;
    font-weight: 600;
    text-decoration: none;
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    margin-top: 0.5vw;
}

.team-member-card a:hover {
    text-decoration: underline;
}

#kontakt {
    padding: 4vw 2%;
    background-color: #f9f9f9;
    text-align: center;
}

#kontakt h1 {
    font-size: clamp(2.2rem, 3.5vw, 3.5rem);
    margin-bottom: 2vw;
    color: #333;
}

.kontakt-container {
    background-color: var(--soft-jade, #ffffff);
    border-radius: 1.5vw;
    padding: 3vw;
    box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1);
    max-width: 700px;
    margin: 0 auto;
    text-align: center; 
}

.kontakt-container h2 {
    font-size: clamp(1.5rem, 2.2vw, 2.2rem);
    margin-bottom: 1.5vw;
    color: white;
}

.kontakt-text {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.7;
    color: white;
}

.kontakt-text a {
    color: #007bff;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.kontakt-text a:hover {
    color: #0056b3;
    text-decoration: underline;
}

.kontakt-text .fa-solid {
    margin-right: 0.5em;
    color: white;
}

footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: var(--soft-jade);
    color: var(--dark-text);
    position: relative;
}

.footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.footer-links a {
    color: var(--dark-text);
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--pastel-rosa);
}

.footer-logo img {
  max-height: 50px;   /* adjust size */
  width: auto;
  padding-left: 3vw;
}

#impressum {
    text-align: left; 
    align-items: center;
    flex: 1;
    box-sizing: border-box;
    margin-top: 0px;
    padding-top: 0px;
}

#impressum h1 {
    font-size: 2.3rem; 
}

#impressum .impressum-text {
    font-size: 1.3rem; 
    line-height: 1.6; 
    margin: 0 auto;
}

#impressum .impressum-text p {
    margin-bottom: 1rem; 
}

#impressum .impressum-text a {
    color: inherit; 
}

#impressum .impressum-text a:hover {
    text-decoration: underline; 
}

#impressum i.fa-solid {
    margin-right: 5px; 
}

#impressum .impressum-text img {
    vertical-align: middle; 
}

#datenschutz {
    padding: 5vh; 
    margin-top: 5vh; 
    position: relative; 
    text-align: left; 
    align-items: center;
    flex: 1;
    box-sizing: border-box;
    margin-top: 0px;
}

.datenschutz-text {
    max-width: 800px; 
    margin: 0; 
    text-align: left; 
    position: relative; 
    padding-left: 20px; 
}

.datenschutz-text h1 {
    font-size: 2rem; 
}

.datenschutz-section {
    margin-bottom: 20px; 
}

.datenschutz-title {
    font-weight: bold; 
    font-size: 1.3rem; 
    margin-bottom: 10px; 
}

.datenschutz-content {
    font-size: 1.1rem; 
    line-height: 1.6; 
    margin-bottom: 10px; 
}

.datenschutz-content a {
    color: #007bff; 
    text-decoration: none; 
}

.datenschutz-content a:hover {
    text-decoration: underline; 
}


@media (max-width: 1200px) {

    html {
        font-size: 14px; 
    }

    header {
        background-image: url('content/images/header_mobile.jpg');
        padding: 10px;
        text-align: center; 
    }

    body {
        font-size: 0.875rem; 
    }

    section {
        height: auto;
        padding: 0 22px 0 80px;
    }

    h1 {
        font-size: 2rem; 
        text-align: center; 
    }

    h2 {
        font-size: 1.5rem; 
    }

    .header-content {
        display: block; 
        padding: 0;
    }

    .header-text {
        margin-left: auto;
        margin-right: auto;
    }

    .header-text h1 {
        font-size: 2.5rem;
        margin-left: auto;
        margin-right: auto;
    }

    .header-text h2 {
        margin-left: auto;
        margin-right: auto;
    }

    .header-emblem {
        width: 15vw;
        height: 15vw;
    }

    .citation {
        margin: 5vh 0 10px 0;
        padding: 1;
    }

    .fixed-menu .toggle-menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        bottom: 11vh;
        left: 2.5vw;
        z-index: 1001;
        background-color: whitesmoke;
        border-radius: 1vh;
        transition: transform 0.3s ease; 
        will-change: transform;
    }

    .menu-toggle-button {
        position: fixed;
        display: flex;    
        bottom: 35vh;
        left: 2.5vw;
        background: none; 
        border: none;     
        padding: 0;       
        margin: 0;        
        cursor: pointer;  
        z-index: 1001;    
        text-align: left;  
        align-items: flex-start; 
        will-change: transform; 
    }

    .emblem {
        width: 10%; 
        height: 10%; 
        border-radius: 1.5vw; 
        margin-left: 0;
    }

    .fixed-menu a {
        padding: 15px;
        text-align: center;
        font-size: 1em; 
    }

    .fixed-menu a:hover {
        color: var(--medium-text);
    }
    
    .fixed-menu a.active {
        color: darkgrey;
    }

    .toggle-menu.hidden {
        transform: translateX(1.5%);        
    }

    .toggle-menu {
        transform: translateX(-150%);
    }

    .program-text {
        margin-bottom: 5vh;
    }

    .program-text p {
        font-size: 1.2rem;
    }

    .offer-boxes {
        display: flex;
        flex-direction: row; 
        overflow-x: auto; 
        scroll-snap-type: x mandatory; 
        gap: 10px; 
        width: 100%;
        padding: 0 10px; 
        margin: 0 0 3vh 0;
        box-sizing: border-box;
    }

    .flip-card, .flip-card-inner, .flip-card-front, .flip-card-back {
        z-index: 10;
    }

    .flip-card {
        width: 35vh; 
        height: 35vh;
        flex-shrink: 0; 
        scroll-snap-align: start; 
        margin-bottom: 0;
    }

    .flip-card-inner {
        height: 100%; 
    }

    .flip-card .offer-text h2 {
        font-size: 1.5rem; 
    }

    .flip-card .offer-text div {
        font-size: 1.1rem; 
    }

    .flip-button {
        top: 15px;
        right: 25px;
        font-size: 2rem;
    }

    .back-content {
        font-size: 1.3rem;
        padding: 3vh 2vw 1vh 3vw;
    }

    .back-content ul li::before {
        width: 13px; 
        height: 13px;
    }

    .tarif-text {
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .tarif-text-section {
        padding-left: 5vw;
        margin: 0;
        max-width: 90%;
    }

    .tarif-boxes {
        display: flex;
        flex-direction: row; 
        overflow-x: auto; 
        scroll-snap-type: x mandatory; 
        gap: 10px; 
        width: 100%; 
        padding: 0 10px;
        box-sizing: border-box;
    }

    .tarif-card {
        width: 45%; 
        flex-shrink: 0; 
        scroll-snap-align: start; 
        margin-bottom: 0; 
        box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1); 
    }

    .project-boxes {
        display: flex;
        flex-direction: row; 
        overflow-x: auto; 
        scroll-snap-type: x mandatory; 
        gap: 10px; 
        width: 100%; 
        padding: 0 10px; 
        justify-content: space-between;
        box-sizing: border-box;
    }

    .project-card {
        width: 50%;
        flex-shrink: 0; 
        scroll-snap-align: start; 
        margin-bottom: 0;
        box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1);
    }

    .about-content {
        display: flex;
        flex-direction: column; 
        width: 90%;
        padding: 10px;
        box-sizing: border-box; 
    }

    .about-image {
        flex: 1;
        padding: 2%;
        box-sizing: border-box; 
    }
    
    .about-image img {
        max-width: 50%;
        max-height: 50%;
        height: auto;
        margin: 0 auto 0 auto;
        border-radius: 1.5vw; 
        display: block; 
    }

    .about-text, .about-image {
        width: 100%; 
        padding: 10px;
        box-sizing: border-box;
    }

    
    .footer-links {
        text-align: center; 
    }

    .footer-links a {
        display: block;
        margin-bottom: 10px; 
    }

    .footer-links span {
        display: block;
        margin-top: 10px;
    }
}


@media (max-width: 768px) {

    html {
        font-size: 14px; 
    }

    body {
        font-size: 0.875rem; 
    }

    section {
        height: auto;
        padding: 22px;
    }

    h1 {
        font-size: 2rem; 
        text-align: center; 
    }

    h2 {
        font-size: 1.5rem; 
    }

    .header-content {
        display: block; 
        padding: 0;
    }

    .header-text {
        align-items: center;
        padding-left: 6vw;
    }

    .header-text h1 {
        font-size: 1.5rem; 
        text-align: center;
    }

    .header-text h2 {
        text-align: center;
    }

    .header-emblem {
        width: 17vw;
        height: 17vw;
    }

    .citation-container {
        margin-top: 3vh;
        margin-bottom: 3vh;
    }

    .citation {
        margin: 0 0 10px 0;
    }

    .button-project {
        font-size: 15px;
        text-align: center;
        align-items: center;
        vertical-align: middle;
        margin-left: 7px;
        padding: 5px 18px;
        border-radius: 7px;
    }

    .menu-toggle-button {
        position: fixed;
        display: flex;    
        bottom: 35vh;
        left: 2.5vw;
        background: none; 
        border: none;     
        padding: 0;       
        margin: 0;        
        cursor: pointer;  
        z-index: 1001;    
        text-align: left;  
        align-items: flex-start; 
        will-change: transform; 
    }

    .fixed-menu .toggle-menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        bottom: 1.5vh;
        left: 2.5vw;
        z-index: 1001;
        background-color: whitesmoke;
        border-radius: 1vh;
        transition: transform 0.3s ease; 
        will-change: transform;
    }

    .emblem {
        width: 15%; 
        height: 15%; 
        border-radius: 1.5vw; 
        margin-left: 0;
        margin-bottom: 22vw;
    }

    .fixed-menu a {
        padding: 15px;
        text-align: center;
        font-size: 1em; 
    }

    .fixed-menu a:hover {
        color: var(--medium-text);
    }
    
    .fixed-menu a.active {
        color: darkgrey;
    }

    .toggle-menu.hidden {
        transform: translateX(1.5%);        
    }

    .toggle-menu {
        transform: translateX(-150%);
    }

    .program-text {
        margin-bottom: 5vh;
    }

    .program-text p {
        font-size: 1.2rem;
    }

    .offer-image {
        height: 50%;
        border-radius: 3vw;
    }

    .offer-text h2 {
        margin: 2.5vh 0 0 0;
    }

    .offer-boxes {
        display: flex;
        flex-direction: row; 
        overflow-x: auto; 
        scroll-snap-type: x mandatory; 
        gap: 10px; 
        width: 100%; 
        padding: 0 10px; 
        box-sizing: border-box;
    }

    .flip-card-front {
        padding: 3.5vh 8vw 2vw 8vw;
        border-radius: 5vw;
    }

    .flip-card, .flip-card-inner, .flip-card-front, .flip-card-back {
        z-index: 10;
        border-radius: 3vw;
    }

    .flip-card {
        width: 80%; 
        height: 35vh;
        flex-shrink: 0; 
        scroll-snap-align: start; 
        margin-bottom: 0;
    }

    .flip-card-inner {
        height: 100%; 
    }

    .flip-card .offer-text h2 {
        font-size: 1.2rem; 
    }

    .flip-card .offer-text div {
        font-size: 0.9rem; 
    }

    .flip-button {
        top: 15px;
        right: 20px;
        font-size: 1.2rem;
    }

    .back-content {
        font-size: 1rem;
        padding: 3vh 2vw 1vh 3vw;
    }

    .back-content ul li::before {
        width: 13px; 
        height: 13px;
    }

    .project-boxes {
        display: flex;
        flex-direction: row; 
        overflow-x: auto; 
        scroll-snap-type: x mandatory; 
        gap: 10px; 
        width: 100%; 
        padding: 0 10px; 
        justify-content: space-between;
        box-sizing: border-box;
    }

    .project-card-1,
    .project-card-2,
    .project-card-3 {
        width: 70%;
        flex-shrink: 0; 
        scroll-snap-align: start; 
        margin-bottom: 0;
        border-radius: 3vw;
        box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1); 
    }

    .presse-vorschau {
        max-width: calc(25% - 2.5vw); 
        height: 30vh;
        min-width: 280px;
    }

    .ueber-uns-text h1 {
        font-size: 2.5rem;
        margin-bottom: 4vw;
    }

    .ueber-uns-text {
        margin-bottom: 6vw;
    }

    .team-main-image {
        border-radius: 4vw;
        max-width: 80vw;
        margin: 0 auto 8vw auto;
    }
    
    .team-members-container {
        gap: 4vw;
        max-width: 70vw;
    }

    .team-member-card {
        width: 60vw; 
        margin: 0 auto 0 auto; 
        border-radius: 4vw;
        min-height: auto;
    }

    .team-member-card h3 {
        font-size: 1.4rem;
        margin-bottom: 2vw;
    }

    .team-member-card p {
        font-size: 1rem;
    }

    .team-member-card a {
        font-size: 1rem;
        margin-top: 2vw;
    }

    .footer-links {
        text-align: left; 
    }

    .footer-links a,
    .footer-links span {
        display: block; 
        max-width: fit-content; 
        margin-left: auto; 
        margin-right: auto;
        margin-bottom: 10px; 
    }

    .footer-links span[style*="display: inline-block"] {
        display: inline-block !important;
        max-width: none;
        margin: 0; 
    }
}

@media (max-width: 480px) {
    html {
        font-size: 13px; 
    }

    body {
        font-size: 0.8125rem; 
    }

    h1 {
        font-size: 1.75rem; 
    }

    h2 {
        font-size: 1.375rem; 
    }
    
    .menu-toggle-button {
        bottom: 29vh;
        left: 3vw;
        width: 50px; 
        height: 50px; 
    }

    .emblem {
        width: 50px; 
        height: 50px;
    }
  
    .fixed-menu {
        bottom: 1vh;
        left: 50vw;
        width: 90vw; 
        padding: 15px; 
    }

    .fixed-menu .toggle-menu a {
        font-size: 14px; 
        padding: 10px; 
    }

    .offer-image {
        height: 40%;
    }

    .program-text div {
        max-width: 80%;
    }

    .presse-vorschau {
        max-width: 70vw; 
    }

    .back-content {
        padding: 2vh 2vw 1vh 4vw;
    }
}

@media (max-width: 360px) {
    .menu-toggle-button {
        bottom: 35vh;        
    }

    .tarif-text {
        margin-bottom: 3vh;
    }

    .project-card {
        padding-top: 2vh;
    }
}