:root {
    --soil-brown: #9E6D44;
    --sky-blue: #E7F3F9;
    --concrete-gray: #A5A5AD;
    --light-gray: #EBEBEB;
    --grass-green: #3ba310;
    --dark-text: #202028;
    --link-color: #0066cc;
}

/* ROOT ELEMENT STYLES */

html {
    font-size: 16px; /* Base size, 1rem = 16px */
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif; /* Roboto */
    margin: 0;
    padding: 0;

    font-size: 1rem; /* 16px by default */
}

header {
    background-image: url('content/images/header.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color:  white;
    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(--grass-green);
    font-size: 2.5rem; /* 40px by default */
}

h2 {
    font-size: 2rem; /* 32px by default */
}

p {
    text-align: center;
    color: var(--dark-text);
    font-size: 1rem; /* 16px by default */
}

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(--grass-green);
    z-index: 0;
}

/* HEADER STYLES */

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

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

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

.header-emblem {
    width: 8vw; /* Dynamic width */
    height: 8vw; /* Dynamic height */
}

.header-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.header-text h1 {
    font-size: 3.5rem; /* Dynamic font size */
    margin-bottom: 10px;
}

/* Base styles for the side menu */
.fixed-menu .toggle-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 10vh;
    left: 2.5vw;
    z-index: 1001;
    transition: transform 0.3s ease; /* Smooth transition for slide-in/out */
}

.fixed-menu a {
    color: var(--grass-green);
}

.menu-toggle-button {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 25vh;
    left: 2vw;
    background: none;
    border: none;     /* Remove border */
    padding: 0;       /* Remove padding */
    margin: 0;        /* Remove margin */
    cursor: pointer;  /* Change cursor on hover */
    z-index: 1001;    /* Ensure it’s above the menu items */
    justify-content: center;
    align-items: center;
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Smooth transitions */
}

.menu-toggle-button:hover {
    transform: scale(1.05); /* Slightly increase size */
}

/* Hide the menu initially on small screens */
.toggle-menu.hidden {
    transform: translateX(-150%);
}

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

.fixed-menu a.active {
    color: var(--pastel-violet);
}

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

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

/* HOF STYLES */

.hof-text {
    width: 60vw;
    text-align: left;
    box-sizing: border-box; /* Ensure padding is included in width calculations */
    margin-bottom: 3vh;
    color: var(--dark-text);
}

.hof-text-section {
    max-width: 80%; /* Percentage width */
    margin-left: auto;
    margin-right: auto;
    position:relative;
    font-size: 1.3rem;
}

.carousel {
    display: flex; /* Flexbox for alignment */
    overflow: hidden; /* Hide overflow for a clean carousel look */
    position: relative; /* Positioning for absolute elements if needed */
    width: 50vw; /* Set carousel width */
    height: auto; /* Set a height for the carousel (adjust as needed) */
}

.carousel-item {
    position: relative; /* Positioning context for the image */
    flex: 0 0 auto; /* Prevent items from shrinking */
    width: 100%; /* Set width to 100% to fill the carousel */
    padding-top: 56.25%; /* Maintain 16:9 aspect ratio (adjust as needed) */
    overflow: hidden; /* Hide overflow for clean edges */
}

.carousel-image {
    position: absolute; /* Position the image absolutely within the item */
    top: 0; /* Align to the top */
    left: 0; /* Align to the left */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    object-fit: cover; /* Ensure it covers the entire area */
    border-radius: 1.5vw; /* Optional: add border radius */
}

/* Styles for carousel controls */
.carousel-controls {
    position: absolute; /* Position controls absolutely within the carousel */
    top: 50%; /* Center vertically */
    left: 0; /* Align to the left */
    right: 0; /* Align to the right */
    display: flex; /* Use flexbox for alignment */
    justify-content: space-between; /* Space out the buttons */
    transform: translateY(-50%); /* Center the buttons */
    z-index: 10; /* Ensure controls are on top of images */
}

.carousel-controls button {
    background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
    border: none; /* Remove border */
    border-radius: 50%; /* Round buttons */
    width: 40px; /* Set width */
    height: 40px; /* Set height */
    font-size: 24px; /* Increase font size for arrows */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s; /* Smooth background transition */
}

.carousel-controls button:hover {
    background-color: rgba(255, 255, 255, 1); /* Fully opaque on hover */
}

.hof-boxes {
    display: flex;
    justify-content: space-between;
    width: 80%; /* Percentage width */
    gap: 2%; /* Percentage gap */
    margin: 3vh 1vw 2vh 1vw; /* Percentage margin */
}

.hof-card {
    background-color: var(--pastel-mint);
    border-radius: 1.5vw; /* Dynamic border radius */
    padding: 2%;
    text-align: center;
    width: calc(35% - 2%); /* Adjust width to fit three cards minus gap */
    box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1); /* Dynamic shadow */
}

.hof-details {
    height: 90%;
    text-align: center; /* Center align the text */
    align-items: center;
    padding: 10px; /* Padding around the content */
    margin-left: auto;
    margin-right:auto;
    background-color: var(--light-bg-color); /* Background color for contrast */
    border-radius: 8px; /* Rounded corners */
}

.hof-details h2 {
    font-size: 1.75rem;
    color: var(--light-violet)
}

.hof-details h3 {
    font-size: 1.65rem;
}

.hof-title {
    font-size: 1.5rem; /* Adjust title font size */
    font-weight: bold;
    margin-bottom: 10px;
}

.hof-duration {
    font-size: 1.25rem; /* Medium font size */
    margin-left: auto;
    margin-right: auto;
}

.hof-note {
    font-size: 0.9rem; /* Small font size */
    margin-top: 5px;
}

/* ANGEBOT SECTION STYLES */

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

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

.angebot-text {
    width: 80%;
    text-align: left;
    margin: 4% auto 5% auto;
    box-sizing: border-box; /* Ensure padding is included in width calculations */
}

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

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

.flip-card {
    background-color: transparent;
    width: calc(33.33% - 2%); /* Use 1/3 of the container width minus gap */
    perspective: 1000px;
    height: 45vh;
}

.flip-card:hover {
    cursor: pointer;
}

.flip-card-inner {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%; /* Adjust height dynamically */
    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; /* Dynamic border radius */
    overflow-y: auto; /* Add vertical scrollbar if content overflows */
    box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1); /* Dynamic shadow */
}

.flip-card-front {
    background-color: white;
    color: var(--dark-text);
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    padding: 5.5vh 2vw; /* Remove top padding to adjust for centering */
    box-sizing: border-box;
}

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

.offer-image img {
    width: 40%;
    height: auto;
    margin-top: 1vh;
    border-radius: 1.5vw; /* Dynamic border radius */
    object-fit: cover; /* Ensures the image covers the area without distortion */
}

.offer-text {
    margin-top: 2%; /* Percentage margin */
}

.offer-text h2 {
    margin: 1% 0; /* Percentage margin */
}

.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; /* Adjust height to fit within card */
    overflow-y: auto; /* Add vertical scrollbar if content overflows */
    padding: 3vh 1vw 1vh 2vw;
    font-size: 1.1rem;
    line-height: 1.6;
}

.back-content h3 {
    margin: 1% 0; /* Percentage margin */
    color: var(--dark-text);
}

.back-content img.back-image {
    width: 100%; /* Adjust the width to fit within the container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 1.5vw; /* Optional: Match the style with other elements */
    margin: 1vh 0; /* Add some margin for spacing */
}

.back-content ul {
    padding-left: 2%; /* Percentage padding */
    list-style-type: none;
    color: var(--dark-text);
   
}

.back-content ul li {
    margin-top: 1vh;
    list-style-position: outside; /* Ensure the bullet is outside the text area */
}

.back-content ul li::before {
    content: ""; /* Required for the pseudo-element */
    display: inline-block;
    width: 22px; /* Width of the custom bullet */
    height: 22px; /* Height of the custom bullet */
    background-image: url('content/icons/milk-can-ul.png'); /* Custom image as list item marker */
    background-size: contain; /* Ensure the image fits within the specified size */
    background-repeat: no-repeat; /* Prevent image from repeating */
    background-position: center; /* Center the image */
    margin-right: 10px; /* Space between the custom bullet and the list item text */
    vertical-align: middle; /* Align with the text vertically */
}

.button-nav {
    display: inline-block;
    background-color: var(--light-violet);
    color: var(--dark-text);
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid var(--dark-violet);
    margin-left: 20px;
}

.button-nav:hover {
    border-color: var(--grass-green);
    color: var(--grass-green);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.button-nav:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* General styling for the collapsible section */
.collapsible-section {
    position: relative;
    margin-top: 0px;
    margin-bottom: 0px; /* Add margin to separate sections if needed */
}

.collapsible-header {
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--grass-green);
}

.collapsible-content {
    max-height: 0; /* Start with zero height to hide content */
    overflow: hidden; /* Hide overflow */
    transition: max-height 0.5s ease, padding 0.5s ease;
    line-height: 1.6;
    font-size: 1rem;
    padding: 0 15px; /* Adjust padding as needed */
}

.collapsible-content div {
    padding-left: 0px;
    margin-left: 0px;
}

.collapsible-content ul {
    padding-left: 4%; /* Percentage padding */
    list-style-type: none;
    color: var(--dark-text);
}

.collapsible-content.expanded {
    max-height: 1000px; /* Set to a value larger than the content */
    padding: 15px; /* Adjust padding when expanded */
}

/* Rotate the toggle button when expanded */
.collapsible-header.expanded .toggle-button img {
    transform: rotate(45deg); /* Rotates the + symbol into an x symbol */
}

.toggle-button {
    font-size: 1rem; /* Adjusted font size for a more balanced look */
    font-weight: bold;
    color: var(--light-violet); /* Text color */
    border: 2px solid var(--primary-color); /* Border with primary color */
    border-radius: 50%; /* Circular button */
    width: 30px; /* Width and height to make it circular */
    height: 30px;
    margin-right: 0.75vw;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.toggle-button img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ensure the image maintains its aspect ratio */
    vertical-align: middle; /* Vertically center the image */
    transition: transform 0.5s ease; /* Smooth transition for rotation */
}

.toggle-button:hover {
    border: 2px solid var(--primary-color);
}

/* KONTAKT STYLES */
#kontakt {
    margin-top: 0;
    padding-top: 0;
}

.kontakt-container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.kontakt-text {
    width: 40vw;
    text-align: center;
    box-sizing: border-box; /* Ensure padding is included in width calculations */
}

.kontakt-text p {
    font-size: 1.40rem;
    margin: 0 auto 3vh auto;
    text-align: left; 
    position:relative;
    font-size: 1.3rem;
}

.map-container {
    border-radius: 15px;
    margin-top: 20px;
    height: 100%;
    min-height: 600px;
    width: 60%;
}

iframe {
	height: 100%;
}

footer {
    text-align: center;
    padding: 20px;
    background-color: var(--light-violet);
    color: var(--dark-text);
    position: relative;
}

.socials a, .footer-links a {
    margin: 0 10px;
    color: var(--dark-text);
    text-decoration: none;
}

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

/* IMPRESSUM */

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

#impressum h1 {
    font-size: 2.3rem; /* Adjust heading size as needed */
}

#impressum .impressum-text {
    font-size: 1.3rem; /* Standard font size for the content */
    line-height: 1.6; /* Line height for readability */
    margin: 0 auto;
}

#impressum .impressum-text p {
    margin-bottom: 1rem; /* Space between paragraphs */
}

#impressum .impressum-text a {
    color: inherit; /* Keep link color consistent with text */
}

#impressum .impressum-text a:hover {
    text-decoration: underline; /* Underline links on hover */
}

#impressum i.fa-solid {
    margin-right: 5px; /* Space between icons and text */
}

#impressum .impressum-text img {
    vertical-align: middle; /* Align images with text if needed */
}

/* DATENSCHUTZ */

/* Ensure the section takes up full height and is not centered */
#datenschutz {
    padding: 5vh; /* Add some padding around the section */
    margin-top: 5vh; /* Add margin to push it down from the top if needed */
    position: relative; /* Ensure positioning context for the section */
    text-align: left; /* Align text to the left */
    align-items: center;
    flex: 1;
    box-sizing: border-box;
    margin-top: 0px;
}

.datenschutz-text {
    max-width: 800px; /* Maximum width for the text area */
    margin: 0; /* No extra margins to center the content */
    text-align: left; /* Align text to the left */
    position: relative; /* Ensure positioning context */
    padding-left: 20px; /* Buffer for toggle-menu */
}

.datenschutz-text h1 {
    font-size: 2rem; /* Adjust the font size for the heading */
}

.datenschutz-section {
    margin-bottom: 20px; /* Space between sections */
}

.datenschutz-title {
    font-weight: bold; /* Make section titles bold */
    font-size: 1.3rem; /* Adjust font size for section titles */
    margin-bottom: 10px; /* Space below section titles */
}

.datenschutz-content {
    font-size: 1.1rem; /* Adjust the font size for the content text */
    line-height: 1.6; /* Line height for readability */
    margin-bottom: 10px; /* Space between content blocks */
}

.datenschutz-content a {
    color: #007bff; /* Link color */
    text-decoration: none; /* Remove underline from links */
}

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

/* Media Queries for Mobile Devices */
@media (max-width: 1200px) {

    html {
        font-size: 14px; /* Adjust base size for tablets and smaller screens */
    }

    header {
        padding: 10px;
        text-align: center; /* Center align header content on small screens */
    }

    body {
        font-size: 0.875rem; /* 14px */
    }

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

    h1 {
        font-size: 2rem; /* 32px */
        text-align: center; /* Center align headings on small screens */
    }

    h2 {
        font-size: 1.5rem; /* 24px */
    }

    .header-content {
        display: block; /* Stack header content vertically */
        padding: 0;
    }

    .header-text h1 {
        font-size: 2.5rem; /* Dynamic font size */
    }

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

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

    /* Side menu */

    .fixed-menu .toggle-menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        bottom: 2vh;
        left: 2.5vw;
        z-index: 1001;
        background-color: whitesmoke;
        border-radius: 1vh;
        transition: transform 0.3s ease; /* Smooth transition for slide-in/out */
        will-change: transform;
    }

    .menu-toggle-button {
        position: fixed;
        display: flex;    /* Use flexbox for alignment */
        bottom: 25vh;
        left: 2.5vw;
        background: none; 
        border: none;     
        padding: 0;       
        margin: 0;        
        cursor: pointer;  
        z-index: 1001;    
        text-align: left;  
        align-items: flex-start; /* Align items to the start (top-left) */
        will-change: transform; /* Ensure the button remains fixed during scrolling */
    }

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

    .fixed-menu a {
        padding: 15px;
        text-align: center;
        font-size: 1em; /* Adjust font size for readability */
    }

    .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%);
    }

    /* Angebot */
    .angebot-text {
        margin-bottom: 5vh;
    }

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

    /* Flip Cards Container */
    .offer-boxes {
        display: flex;
        flex-direction: row; 
        overflow-x: auto; /* Enable horizontal scrolling */
        scroll-snap-type: x mandatory; /* Snap scroll to cards */
        gap: 10px; 
        width: 100%; 
        padding: 0 10px; /* Optional: slight padding for better spacing */
        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 */
    .flip-card {
        width: 80%; 
        height: 35vh;
        flex-shrink: 0; /* Prevent cards from shrinking */
        scroll-snap-align: start; /* Snap each card to the start of the container */
        margin-bottom: 0;
    }

    .flip-card-inner {
        height: 100%; /* Ensure inner content matches card height */
    }

    /* Optional: Modify the text and image size within cards to fit better */
    .flip-card .offer-text h2 {
        font-size: 1.5rem; 
    }

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

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

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

    /* hofE PER TERMIN */

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

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

    .hof-boxes {
        display: flex;
        flex-direction: row; /* Arrange all cards in a single row */
        overflow-x: auto; /* Enable horizontal scrolling */
        scroll-snap-type: x mandatory; /* Snap scroll to cards */
        gap: 10px; 
        width: 100%; 
        padding: 0 10px;
        box-sizing: border-box;
    }

    .hof-card {
        width: 45%; /* Set each card to take 80% of the viewport width */
        flex-shrink: 0; /* Prevent shrinking of cards */
        scroll-snap-align: start; /* Snap to start of each card */
        margin-bottom: 0; /* Remove bottom margin */
        box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1); /* Dynamic shadow */
    }

    /* TERMIN BUCHEN */

    .termin-boxes {
        display: flex;
        flex-direction: row; /* Arrange all cards in a single row */
        overflow-x: auto; /* Enable horizontal scrolling */
        scroll-snap-type: x mandatory; /* Snap scroll to cards */
        gap: 10px; /* Add a small gap between each card */
        width: 100%; /* Full viewport width for container */
        padding: 0 10px; /* Optional: slight padding on the sides */
        justify-content: space-between;
        box-sizing: border-box;
    }

    .termin-card {
        width: 50%;
        flex-shrink: 0; /* Prevent shrinking of cards */
        scroll-snap-align: start; /* Snap to start of each card */
        margin-bottom: 0;
        box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1); /* Dynamic shadow */
    }

    /* UEBER MICH */

    .about-content {
        display: flex;
        flex-direction: column; /* Stack text and image vertically */
        width: 90%;
        padding: 10px;
        box-sizing: border-box; /* Ensure padding does not affect width */
    }

    .about-image {
        flex: 1;
        padding: 2%;
        box-sizing: border-box; /* Ensure padding is included in width calculations */
    }
    
    .about-image img {
        max-width: 50%;
        max-height: 50%;
        height: auto;
        margin: 0 auto 0 auto;
        border-radius: 1.5vw; /* Dynamic border radius */
        display: block; /* Ensure the image scales properly within its container */
    }

    .about-text, .about-image {
        width: 100%; /* Full width for mobile */
        padding: 10px;
        box-sizing: border-box;
    }

    /* KONTAKT */

    .kontakt-text {
        width: 82%;
        text-align: center;
        box-sizing: border-box; /* Ensure padding is included in width calculations */
    }

    .map-container {
        width: 80%;
    }

    .map-container iframe {
        width: 100%; /* Make the map responsive */
        height: auto;
        max-height: 45vh;
    }

    .footer-links {
        text-align: center; /* Center align footer links */
    }

    .footer-links a {
        display: block;
        margin-bottom: 10px; /* Add space between footer links */
    }

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

/* Media Queries for Mobile Devices */
@media (max-width: 768px) {

    html {
        font-size: 14px; /* Adjust base size for tablets and smaller screens */
    }

    body {
        font-size: 0.875rem; /* 14px */
    }

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

    h1 {
        font-size: 2rem; /* 32px */
        text-align: center; /* Center align headings on small screens */
    }

    h2 {
        font-size: 1.5rem; /* 24px */
    }

    .header-content {
        display: block; /* Stack header content vertically */
        padding: 0;
    }

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

    .header-text h1 {
        font-size: 2.5rem; /* Dynamic font size */
        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-nav {
        font-size: 15px;
        text-align: center;
        align-items: center;
        vertical-align: middle;
        margin-left: 7px;
        padding: 5px 18px;
        border-radius: 7px;
    }

    /* Side menu */

    .fixed-menu .toggle-menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        bottom: 10vh;
        left: 2.5vw;
        z-index: 1001;
        background-color: whitesmoke;
        border-radius: 1vh;
        transition: transform 0.3s ease; /* Smooth transition for slide-in/out */
        will-change: transform;
    }

    .menu-toggle-button {
        position: fixed;
        display: flex;    /* Use flexbox for alignment */
        bottom: 32vh;
        left: 2.5vw;
        background: none; 
        border: none;     
        padding: 0;       
        margin: 0;        
        cursor: pointer;  
        z-index: 1001;    
        text-align: left;  
        align-items: flex-start; /* Align items to the start (top-left) */
        will-change: transform; /* Ensure the button remains fixed during scrolling */
    }

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

    .fixed-menu a {
        padding: 15px;
        text-align: center;
        font-size: 1em; /* Adjust font size for readability */
    }

    .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%);
    }

    /* Angebot */
    .angebot-text {
        margin-bottom: 5vh;
    }

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

    /* Flip Cards Container */
    .offer-boxes {
        display: flex;
        flex-direction: row; 
        overflow-x: auto; /* Enable horizontal scrolling */
        scroll-snap-type: x mandatory; /* Snap scroll to cards */
        justify-content: flex-start;
        gap: 10px; 
        width: 85vw;
        margin-left: 5vw;
        padding: 0 10px; /* Optional: slight padding for better spacing */
        box-sizing: border-box;
    }

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

    /* Flip Card */
    .flip-card {
        width: 80%; 
        height: 35vh;
        flex-shrink: 0; /* Prevent cards from shrinking */
        scroll-snap-align: start; /* Snap each card to the start of the container */
        margin-bottom: 0;
    }

    .flip-card-inner {
        height: 100%; /* Ensure inner content matches card height */
    }

    /* Optional: Modify the text and image size within cards to fit better */
    .flip-card .offer-text h2 {
        font-size: 1.2rem; 
    }

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

    .flip-button {
        top: 15px;
        right: 20px;
    }

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

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

    /* hofE PER TERMIN */

    .hof-text {
        padding: 0;
        margin: 0;
        width: 80vw;
    }

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

    .hof-boxes {
        display: flex;
        flex-direction: row; /* Arrange all cards in a single row */
        overflow-x: auto; /* Enable horizontal scrolling */
        scroll-snap-type: x mandatory; /* Snap scroll to cards */
        gap: 10px; 
        width: 100%; 
        padding: 0 10px;
        box-sizing: border-box;
    }

    .hof-card {
        width: 80%; /* Set each card to take 80% of the viewport width */
        flex-shrink: 0; /* Prevent shrinking of cards */
        scroll-snap-align: start; /* Snap to start of each card */
        margin-bottom: 0; /* Remove bottom margin */
        border-radius: 3vw;
        box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1); /* Dynamic shadow */
    }

    .carousel {
        margin-top: 2vh;
        width: 70vw;
    }

    .carousel-controls button {
        width: 20px; /* Set width */
        height: 20px; /* Set height */
        font-size: 12px; /* Increase font size for arrows */
    }

    /* KONTAKT */

    .kontakt-text {
        width: 70vw;
        text-align: center;
        box-sizing: border-box; /* Ensure padding is included in width calculations */
    }

    .map-container {
        width: 100%;
    }

    .map-container iframe {
        width: 100%; /* Make the map responsive */
        height: auto;
        max-height: 45vh;
    }

    .footer-links {
        text-align: center; /* Center align footer links */
    }

    .footer-links a {
        display: block;
        margin-bottom: 10px; /* Add space between footer links */
    }

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

@media (max-width: 480px) {

    html {
        font-size: 13px; /* Adjust base size for mobile phones */
    }

    body {
        font-size: 0.8125rem; /* 13px */
    }

    h1 {
        font-size: 1.75rem; /* 28px */
    }

    h2 {
        font-size: 1.375rem; /* 22px */
    }

    /* Adjust the position and size of the menu button */
    .menu-toggle-button {
        bottom: 29vh;
        left: 3vw;
        width: 50px; /* Adjust the size */
        height: 50px; /* Adjust the size */
    }

    .emblem {
        width: 50px; /* Make the emblem smaller */
        height: 50px;
    }

    /* Adjust the position and size of the fixed menu */
    .fixed-menu {
        bottom: 1vh;
        left: 50vw;
        width: 90vw; /* Make it responsive */
        padding: 15px; /* Add padding for smaller touch targets */
    }

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

    .angebot-text div {
        max-width: 100%;
    }

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

    .map-container {
        min-height:550px;
        width: 85%;
    }
}

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

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

    .map-container {
        width: 75%;
    }

    .map-container iframe {
        max-height: 50vh;
    }

}