@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');



@font-face {

    font-family: 'Century Gothic';

    src: url('../fonts/centurygothic.woff2') format('woff2');

    font-weight: normal;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'Century Gothic';

    src: url('../fonts/centurygothic_bold.woff2') format('woff2');

    font-weight: bold;

    font-style: normal;

    font-display: swap;

}



:root {

    font-family: 'Inter', system-ui, -apple-system, sans-serif;

    box-sizing: border-box;

}



*,

*::before,

*::after {

    box-sizing: inherit;

}



body {

    font-family: 'Inter', sans-serif;

    margin: 0;

    padding: 0;

    background-color: #F5F5F5;

    -webkit-font-smoothing: antialiased;

    font-size: 14px;

    overflow-x: hidden;

}



/* Utilities */

.hidden {

    display: none !important;

}



@media (min-width: 1024px) {

    .lg\:flex {

        display: flex !important;

    }



    .lg\:hidden {

        display: none !important;

    }

}



/* Header */

.header-main {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 50;

    height: 140px;

    /* Increased for vertical stack breathing room */

    background-color: white;

    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

}



@media (max-width: 1023px) {

    .header-main {

        height: 70px;

    }

}



.header-container {

    height: 100%;

    width: 100%;

    padding: 0 1.5rem;

}



@media (min-width: 1024px) {

    .header-container {

        padding: 0 3rem;

    }

}



.header-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    height: 100%;

    position: relative;

}



/* Logo */

.logo-link {

    display: block;

    margin-bottom: 0;

    /* Reset for mobile centering */

}



@media (min-width: 1024px) {

    .logo-link {

        margin-bottom: 1rem;

    }

}



.logo-img {

    height: 32px;

    width: auto;

    object-fit: contain;

}



/* Navigation */

.desktop-nav {

    display: flex;

    align-items: center;

    gap: 3.5rem;

    /* Slightly wider gap */

}



.nav-link {

    font-family: 'Century Gothic', sans-serif;

    font-size: 1.125rem;

    font-weight: normal;

    letter-spacing: 0.1em;

    text-decoration: none;

    transition: color 0.3s;

    color: #111111;

    position: relative;

}



.nav-link:hover {

    color: #666666;

}



.nav-link.active {

    font-weight: bold;

}



.nav-link.active::after {

    content: '';

    position: absolute;

    left: 0;

    width: 100%;

    height: 7px;

    background-color: #2c2c2c;

    bottom: -30px;

}



/* Mobile Toggle */

#menu-toggle {

    position: absolute;

    right: 1.5rem;

    /* (140/2) - (40/2) - 10px balancing = 40px from top */

    top: 40px;

    padding: 0.5rem;

    border: none;

    background: transparent;

    cursor: pointer;

    outline: none;

    z-index: 60;

    -webkit-appearance: none;

    appearance: none;

    -webkit-tap-highlight-color: transparent;

}



@media (max-width: 1023px) {

    #menu-toggle {

        top: 8px;

        right: 1.25rem;

        /* 10px higher than original 40px */

    }

}



/* Mobile Menu */

#mobile-menu {

    font-family: 'Century Gothic', sans-serif;

    position: fixed;

    inset: 0;

    z-index: 40;

    background-color: white;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 1.5rem;

    transform: translateX(100%);

    transition: transform 0.3s ease-in-out;

}



#mobile-menu.active {

    transform: translateX(0);

}



#mobile-menu .nav-link {

    font-size: 1.5rem;

    color: #111111;

}



#mobile-menu .nav-link.secondary {

    color: #666666;

}



/* Hero Section */

.hero-section {

    position: relative;

    width: 100%;

    overflow: hidden;

    background-color: #1a1a1a;

    height: calc(100vh - 140px);

    min-height: 500px;

    margin-top: 140px;

}



@media (max-width: 1023px) {

    .hero-section {

        height: calc(100vh - 70px);

        margin-top: 70px;

    }

}



.video-container {

    position: absolute;

    inset: 0;

    z-index: 0;

}



.hero-video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    position: absolute;

    top: 0;

    left: 0;

}



.video-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.85);

    z-index: 1;

}



.hero-content {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: white;

    padding: 0 1.5rem;

    z-index: 2;

    text-align: center;

}



.hero-title {

    font-family: 'Playfair Display', serif;

    line-height: 1.15;

    letter-spacing: -0.01em;

    margin-bottom: 2.5rem;

    max-width: 64rem;

    font-size: clamp(32px, 7vw, 72px);

}



.btn-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 1rem 2.5rem;

    background-color: #111111;

    color: white;

    text-decoration: none;

    font-family: 'Century Gothic', sans-serif;

    font-size: 0.75rem;

    font-weight: bold;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    transition: background-color 0.3s;

    border: none;

    cursor: pointer;

}



.btn-primary:hover {

    background-color: #333333;

}



/* Footer */

.footer-main {

    background-color: #F5F5F5;

    padding: 4rem 1.5rem 2rem;

}



.footer-logo-container {

    display: flex;

    justify-content: center;

    margin-bottom: 4rem;

}



.footer-divider {

    border-top: 1px solid #D4D4D4;

    margin-bottom: 1.5rem;

}



.footer-bottom {

    display: flex;

    flex-direction: column;

    gap: 1rem;

    align-items: center;

    justify-content: space-between;

    font-size: 0.875rem;

    color: #666666;

}



@media (min-width: 1024px) {

    .footer-bottom {

        flex-direction: row;

    }

}



.footer-divider,

.footer-bottom {

    max-width: 1280px;

    margin-left: auto;

    margin-right: auto;

    width: 100%;

}





.footer-info {

    display: flex;

    gap: 1.5rem;

    flex-wrap: wrap;

    justify-content: center;

}



.footer-link {

    color: inherit;

    text-decoration: none;

}



.footer-link:hover {

    color: #111111;

}



.social-icon {

    display: inline-flex;

    align-items: center;

}



.copyright-text {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

}



/* Scroll Arrow */

.scroll-arrow {

    position: absolute;

    bottom: 2rem;

    left: 50%;

    transform: translateX(-50%);

    z-index: 10;

    color: white;

    cursor: pointer;

    animation: arrow-bounce 2s infinite ease-in-out;

    opacity: 0.7;

    transition: opacity 0.3s, transform 0.3s;

}



.scroll-arrow:hover {

    opacity: 1;

}



@keyframes arrow-bounce {



    0%,

    20%,

    50%,

    80%,

    100% {

        transform: translateX(-50%) translateY(0);

        opacity: 0.4;

    }



    40% {

        transform: translateX(-50%) translateY(15px);

        opacity: 0.9;

    }



    60% {

        transform: translateX(-50%) translateY(7px);

        opacity: 0.7;

    }

}



/* About Section */

.about-section {

    background-color: #f5f5f5;

    color: black;

    padding: 0;

    overflow: hidden;

}



.about-container {

    max-width: 1280px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    /* Default column for mobile */

    align-items: stretch;

    /* Stretch for full width on mobile */

}



/* Image Block */

.about-image-container {

    height: 600px;

    /* Force height as requested */

    width: 100%;

}



.about-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    /* Attach to center */

    display: block;

}



/* Content Block */

.about-content {

    padding: 4rem 1.5rem;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 1.5rem;

    text-align: left;

}



.about-section-white .about-content {

    text-align: center;

}



@media (max-width: 1023px) {

    .about-section-white .about-content {

        text-align: left;

    }

}



.about-title {

    font-family: 'Playfair Display', serif;

    font-size: clamp(2rem, 3.5vw, 2.5rem);

    line-height: 1.1;

    margin: 0;

    font-weight: 550;

}



.about-text {

    font-family: 'Century Gothic', sans-serif;

    font-size: 1rem;

    line-height: 1.6;

    margin: 0;

    opacity: 0.9;

}



.about-text-quote {

    font-family: 'Playfair Display', serif;

    font-size: 1.125rem;

    line-height: 1.6;

    margin: 2rem 0;

    padding: 0 2rem;

    position: relative;

    color: #000000;

}



/* About Section White */

.about-section-white {

    background-color: #ffffff;

    color: #111111;

    padding: 0.67rem 1.5rem;

}



@media (min-width: 1024px) {

    .about-container {

        flex-direction: row;

        /* Row for desktop */

        height: 600px;

        /* Align container height to image height */

        align-items: stretch;

        /* Stretch children to fill height */

    }



    .about-image-container {

        flex: 1;

        width: 50%;

        /* Half width */

        order: 2;

        /* Image on right */

        height: auto;

        /* Let flex control height or inherit 600px */

    }



    .about-content {

        flex: 1;

        width: 50%;

        /* Half width */

        padding: 0 3rem;

        /* Desktop padding */

        order: 1;

        /* Content on left */

    }

}







/* Chess Pattern Section */

.chess-pattern-section {

    background-color: #ffffff;

    color: #111111;

    padding: 0;

}



.chess-container {

    max-width: 1280px;

    margin: 0 auto;

}



.chess-block {

    display: flex;

    flex-direction: column;

    align-items: stretch;

}



.chess-content {

    flex: 1;

    padding: 3rem 1.5rem;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.chess-image-container {

    width: 100%;

    overflow: hidden;

}



.chess-image {

    width: 100%;

    height: auto;

    display: block;

}



.chess-title {

    font-family: 'Playfair Display', serif;

    font-size: clamp(1.75rem, 3vw, 2.25rem);

    line-height: 1.2;

    margin: 0 0 1.5rem 0;

    font-weight: 550;

    color: #111111;

}



.chess-block:first-child .chess-title {

    margin: -6rem 0 1.5rem 0;

}



.chess-text {

    font-family: 'Century Gothic', sans-serif;

    font-size: 1rem;

    line-height: 1.6;

    margin: 0 0 1.5rem 0;

    opacity: 0.9;

}



.chess-text:last-child {

    margin-bottom: 0;

}



.chess-block:first-child {

    margin-bottom: -4rem;

    position: relative;

    z-index: 2;

}



@media (min-width: 1024px) {

    .chess-block:first-child {

        margin-bottom: -6rem;

        position: relative;

        z-index: 2;

    }

}



.chess-block:last-child {

    margin-top: 0;

}



@media (min-width: 1024px) {

    .chess-block:last-child {

        margin-top: -6rem;

    }

}



.chess-block.chess-reverse {

    background-color: #f5f5f5;

}



.chess-block.chess-reverse .chess-inner-container {

    max-width: 1280px;

    margin: 0 auto;

    display: flex;

    flex-direction: row;

    align-items: stretch;

}



.chess-block.chess-reverse .chess-image-container {

    background-color: #f5f5f5;

    width: 50%;

    flex: none;

}



.chess-block.chess-reverse .chess-content {

    background-color: #2c2c2c;

    color: #ffffff;

    width: 50%;

    flex: none;

}



.chess-block.chess-reverse .chess-title {

    color: #ffffff;

}



.chess-text.quote {

    font-family: 'Century Gothic', sans-serif;

    font-size: 1.125rem;

    line-height: 1.6;

    margin: 2rem 0;

    padding: 0 2rem;

    position: relative;

    color: #111111;

    font-style: italic;

    text-align: center;

}



.chess-block.chess-reverse .chess-text.quote {

    color: #ffffff;

}



.chess-block.chess-reverse .chess-text {

    color: rgba(255, 255, 255, 0.9);

}



@media (max-width: 1023px) {

    .chess-block.chess-reverse .chess-inner-container {

        flex-direction: column;

    }



    .chess-block.chess-reverse .chess-image-container {

        width: 100%;

        order: 1;

        position: relative;

        z-index: 2;

    }



    .chess-block.chess-reverse .chess-content {

        width: 100%;

        order: 2;

    }

}



/* Desktop Layout */

@media (min-width: 1024px) {

    .chess-block {

        flex-direction: row;

        align-items: stretch;

        max-width: 1280px;

        margin: 0 auto;

    }



    .chess-block.chess-reverse {

        max-width: none;

        width: 100vw;

        margin-left: calc(-50vw + 50%);

        margin-right: calc(-50vw + 50%);

    }



    .chess-content {

        padding: 4rem 3rem;

        width: 50%;

        flex: none;

    }



    .chess-image-container {

        width: 50%;

        flex: none;

        overflow: hidden;

    }



    .chess-image {

        width: 100%;

        height: auto;

        display: block;

    }



    /* Reverse layout for second block */

    .chess-block.chess-reverse .chess-content {

        order: 2;

    }



    .chess-block.chess-reverse .chess-image-container {

        order: 1;

    }

}



/* Centered Content Section */

.centered-content-section {

    background-color: #ffffff;

    padding: 4rem 1.5rem;

    color: #111111;

}



.centered-content-container {

    max-width: 1280px;

    margin: 0 auto;

    display: flex;

    justify-content: center;

}



.centered-content {

    max-width: 640px;

    text-align: center;

}



.centered-title {

    font-family: 'Playfair Display', serif;

    font-size: clamp(1.5rem, 2.5vw, 2rem);

    line-height: 1.2;

    margin: 0 0 2rem 0;

    font-weight: 550;

    color: #111111;

}



.centered-text {

    font-family: 'Century Gothic', sans-serif;

    font-size: 1rem;

    line-height: 1.6;

    margin: 0 0 1.5rem 0;

    opacity: 0.9;

}



.centered-text:last-child {

    margin-bottom: 0;

}



@media (max-width: 768px) {

    .centered-content {

        width: 100%;

        max-width: none;

        text-align: left;

    }

}



/* Services Section */

.services-section {

    background-color: #f5f5f5;

    padding: 4rem 1.5rem;

    color: #111111;

    text-align: center;

}



.services-heading {

    font-family: 'Playfair Display', serif;

    font-size: clamp(2rem, 3.5vw, 2.5rem);

    font-weight: 400;

    margin: 0 0 2rem 0;

    color: #111111;

}



.services-button {

    display: inline-block;

    padding: 1rem 2rem;

    background-color: #111111;

    color: #ffffff;

    text-decoration: none;

    border-radius: 4px;

    transition: background-color 0.3s, color 0.3s;

}



.services-button:hover {

    background-color: #333333;

}



@media (max-width: 768px) {

    .services-section {

        padding: 3rem 1.5rem;

    }



    .services-heading {

        font-size: clamp(1.5rem, 4vw, 2rem);

    }

}

.salons-section {

    background-color: #ffffff;

    padding: 4rem 1.5rem;

    color: #111111;

}



.salons-container {

    max-width: 1280px;

    margin: 0 auto;

}



.salons-header {

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 3rem;

    position: relative;

}



.salons-title {

    font-family: 'Playfair Display', serif;

    font-size: clamp(2rem, 3.5vw, 2.5rem);

    font-weight: 400;

    margin: 0;

}



.slider-nav {

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    display: flex;

    gap: 0.5rem;

}



@media (max-width: 767px) {

    .slider-nav {

        display: none;

    }

}



/* Slider Styles */

.salons-slider {

    position: relative;

    overflow: hidden;

}



.salons-slider-track {

    display: flex;

    transition: transform 0.5s ease;

}



.salons-slide {

    min-width: 100%;

    display: grid;

    gap: 2rem;

    padding: 0 1rem;

    grid-template-columns: repeat(3, 1fr);

}



@media (max-width: 767px) {

    .salons-slide {

        grid-template-columns: 1fr;

    }



    .salons-slide .salon-card:nth-child(n+4) {

        display: none;

    }

}



.slider-arrow {

    width: 48px;

    height: 48px;

    background-color: white;

    color: black;

    border: 1px solid black;

    border-radius: 50%;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10;

    transition: background-color 0.3s, color 0.3s;

}



.slider-arrow:hover {

    background-color: #f5f5f5;

}



.slider-dots {

    display: flex;

    justify-content: center;

    gap: 0.5rem;

    margin-top: 2rem;

}



.slider-dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background-color: white;

    border: 1px solid black;

    cursor: pointer;

    transition: background-color 0.3s, color 0.3s;

    box-sizing: border-box;

}



.slider-dot.active {

    background-color: black;

}



.salon-card {

    display: block;

    text-decoration: none;

    color: inherit;

    position: relative;

    padding-bottom: 30px;

    min-height: 120px;

    text-align: center;

}



.salon-card::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 1px;

    background-color: #000000;

    transition: height 0.3s ease;

    pointer-events: none;

}



.salon-card:hover::after,

.salon-card.hover-active::after {

    height: 120px;

}



.salon-image-wrapper {

    width: 100%;

    aspect-ratio: 4/3;

    overflow: hidden;

    margin-bottom: 1rem;

    position: relative;

}



.salon-card:hover .salon-image {

    transform: scale(1.05);

    /* Zoom effect */

}



.salon-info {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    transition: background-color 0.3s, color 0.3s;

    position: relative;

    z-index: 1;

    height: 100%;

    padding-top: 20px;

}



.salon-info:hover .Dienstleistungen,

.salon-info:hover .preise,

.salon-card:hover .Dienstleistungen,

.salon-card:hover .preise,

.salon-card.hover-active .service-category,

.salon-card.hover-active .preise {

    color: #ffffff;

}



.service-category {

    font-family: 'Century Gothic', sans-serif;

    font-size: 0.875rem;

    color: #666666;

    display: block;

}



.preise {

    font-family: 'Century Gothic', sans-serif;

    font-size: 0.875rem;

    color: #666666;

    display: block;

}



/* Responsive Grid */

@media (min-width: 640px) {

    .salons-grid {

        grid-template-columns: repeat(2, 1fr);

        column-gap: 2rem;

        row-gap: 3rem;

    }

}



@media (min-width: 1024px) {

    .salons-section {

        padding: 6rem 3rem;

    }



    .salons-grid {

        grid-template-columns: repeat(3, 1fr);

        column-gap: 3rem;

        row-gap: 4rem;

    }

}



/* FAQ Section */

.faq-section {

    background-color: #ffffff;

    padding: 4rem 1.5rem;

    color: #111111;

}



.faq-container {

    max-width: 1280px;

    margin: 0 auto;

}



.faq-title {

    font-family: 'Playfair Display', serif;

    font-size: clamp(2rem, 3.5vw, 2.5rem);

    text-align: center;

    margin-bottom: 3rem;

    font-weight: 400;

}



.faq-category {

    border-top: 1px solid #e5e5e5;

}





.faq-toggle {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 1.5rem 0;

    background: none;

    border: none;

    cursor: pointer;

    font-family: 'Century Gothic', sans-serif;

    font-size: 1.125rem;

    font-weight: normal;

    color: #111111;

    text-align: left;

    transition: color 0.3s;

}



.faq-toggle:hover {

    color: #666666;

    font-weight: bold;

}



.faq-toggle-text {

    flex: 1;

}



.faq-icon {

    transition: transform 0.3s ease;
}

.faq-toggle.active .faq-icon {
    transform: rotate(180deg);
}

.faq-toggle.active {
    font-weight: bold;
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-content.active {
    max-height: none;
}

.faq-description {
    padding: 1.5rem 1rem 1rem;
    border-bottom: 1px solid #e5e7eb;

}



.faq-description p {

    margin: 0;

    font-size: 0.95rem;

    line-height: 1.6;

    color: #4b5563;

    font-weight: 400;

}



@media (max-width: 640px) {

    .faq-description {

        padding: 1rem 0.75rem 0.75rem;

    }



    .faq-description p {

        font-size: 0.875rem;

        line-height: 1.5;

    }

}



@media (min-width: 768px) {

    .faq-description {

        padding: 2rem 1.5rem 1.5rem;

    }



    .faq-description p {

        font-size: 1rem;

        line-height: 1.7;

    }

}



.faq-table {

    width: 100%;

    border-collapse: collapse;

    padding: 1.5rem 0;

}



.faq-table-wrapper {

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

}



@media (min-width: 768px) {

    .faq-table-wrapper {

        overflow-x: visible;

    }

}



.faq-table th {

    font-family: 'Century Gothic', sans-serif;

    font-weight: normal;

    text-align: left;

    padding: 1rem 0;

    border-bottom: 1px solid #e5e5e5;

    font-size: 0.875rem;

    color: #666666;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.faq-table td {
    font-family: 'Inter', sans-serif;
    padding: 1rem 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 0.9375rem;
    line-height: 1.5;
}



.faq-table td:first-child,

.faq-table th:first-child {

padding-left: 6rem;

}



.faq-table th:nth-child(2),

.faq-table th:nth-child(3),

.faq-table td:nth-child(2),

.faq-table td:nth-child(3) {

    width: 140px;

    text-align: center;

    padding: 1rem 1rem;

}



@media (max-width: 767px) {

    .faq-table td:first-child,

    .faq-table th:first-child {

        padding-left: 1rem;

        padding-right: 0.5rem;

    }

    .faq-table th:nth-child(2),

    .faq-table th:nth-child(3),

    .faq-table td:nth-child(2),

    .faq-table td:nth-child(3) {

        width: 120px;
        padding: 0.5rem 0.25rem;
    }

    .faq-table td {
        line-height: 1.5;
    }
}


.faq-table tr:last-child td {

    border-bottom: none;

}



.faq-table tbody tr:hover {

    background-color: #f5f5f5;

}



.faq-empty {

    font-family: 'Inter', sans-serif;

}



@media (min-width: 1024px) {

    .faq-section {

        padding: 6rem 3rem;

    }

}



.elegance-wrapper {

    background-color: white;

}



.elegance-container {

    max-width: 1280px;

    margin: 0 auto;

    border: 6px solid #2c2c2c;

    padding: 0;

    width: 700px;

}



.elegance-grid {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.elegance-block {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 2rem;

    min-height: 400px;

    width: 100%;

    box-sizing: border-box;

}



.elegance-block-heading {

    border-bottom: 6px solid #2c2c2c;

}



.elegance-block-image {

    padding: 0;

}



.elegance-image-wrapper {

    width: 100%;

    height: auto;

    display: block;

}



.elegance-image {

    width: 100%;

    height: auto;

    display: block;

}



.elegance-image-text {

    padding: 2rem;

    text-align: center;

    margin-bottom: 2rem;

}



.elegance-image-text p {

    font-family: 'Inter', sans-serif;

    font-size: 0.875rem;

    line-height: 1.6;

    color: #111111;

    margin: 0 0 0.75rem 0;

}



.elegance-image-text p:last-child {

    margin-bottom: 0;

}



.elegance-title {

    font-family: 'Playfair Display', serif;

    font-size: clamp(4.5rem, 6vw, 3.5rem);

    font-weight: 400;

    line-height: 1.0;

}



.elegance-years {

    color: #c3975a;

}



.elegance-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.elegance-subtitle {

    font-family: 'Playfair Display', serif;

    font-size: clamp(1rem, 2.5vw, 1.5rem);

    font-weight: 400;

    margin-bottom: 1.5rem;

}



.elegance-text {

    text-align: center;

}



.elegance-text p {

    font-family: 'Inter', sans-serif;

    font-size: 0.875rem;

    line-height: 1.6;

    color: #111111;

    margin: 0 0 0.75rem 0;

}



.elegance-text p:last-child {

    margin-bottom: 0;

}



@media (max-width: 767px) {

    .elegance-grid {

        grid-template-columns: 1fr;

    }



    .elegance-container {

        width: 100%;

        max-width: 100%;

    }



    .elegance-block {

        min-height: auto;

        padding: 1.5rem;

        border-right: none;

        border-bottom: 6px solid #2c2c2c;

    }



    .elegance-block-image {

        padding: 0;

    }



    .elegance-block:last-child {

        border-bottom: none;

    }



    .elegance-title {

        font-size: clamp(2rem, 7vw, 2.5rem);

    }



    .elegance-image-text {

        padding: 1.5rem;

    }



    .elegance-image-text p {

        font-size: 0.8125rem;

    }



    .elegance-subtitle {

        font-size: clamp(1.125rem, 3vw, 1.375rem);

    }

}



.language-select {
    border: none;
    background: none;
    font-family: 'Century Gothic', sans-serif;
    font-size: 1.125rem;
    font-weight: normal;
    color: inherit;
    cursor: pointer;
}

.mobile-language-select {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
}

@media (max-width: 1023px) {
    .mobile-language-select {
        top: 30px;
        left: 0.25rem;
        transform: none;
        margin-top: -13px;
    }

    .mobile-language-select .language-select {
        color: #111111;
        font-weight: 500;
        font-size: 1rem;
        -webkit-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 0.5rem center;
        background-size: 1rem;
        padding-right: 2rem;
    }
}



.booking-section {

    background-color: #2c2c2c;

    color: white;

    padding: 4rem 1.5rem;

    height: 400px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    position: relative;

}



@media (max-width: 767px) {

    .booking-section {

        padding: 3rem 1rem;

        height: auto;

        min-height: 300px;

    }

}



.booking-heading {

    font-family: 'Playfair Display', serif;

    font-size: clamp(2rem, 5vw, 3.5rem);

    font-weight: 400;

    line-height: 1.2;

    margin-bottom: 2rem;

    max-width: 700px;

    position: relative;

    z-index: 1;

}



.booking-button {

    font-family: 'Century Gothic', sans-serif;

    font-size: 0.875rem;

    padding: 1rem 2.5rem;

    letter-spacing: 0.15em;

    position: relative;

    z-index: 1;

}



/* Hero Section Services */

.hero-section-services {

    height: 400px;

    background-color: #2c2c2c;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    padding-top: 140px;

}



@media (max-width: 1023px) {

    .hero-section-services {

        padding-top: 70px;

        height: 300px;

    }

}



.hero-content-services {

    text-align: center;

    color: white;

    padding: 0 1.5rem;

    position: relative;

    z-index: 2;

}



.hero-title-services {

    font-family: 'Playfair Display', serif;

    font-size: clamp(32px, 7vw, 72px);

    line-height: 1.2;

    margin: 0;

    color: white;

}



@media (min-width: 1024px) {

    .hero-title-services {

        font-size: 48px;

    }

}



/* Hero Section Über uns */

.hero-section-ueber-uns {

    height: 560px;

    background-color: #2c2c2c;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

}



#nightSky {

    background: #2c2c2c;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 0;

}



.hero-content-ueber-uns {

    position: relative;

    z-index: 1;

    color: white;

    text-align: center;

    padding: 2rem;

}



.hero-title-ueber-uns {

    font-family: 'Playfair Display', serif;

    font-size: clamp(32px, 7vw, 72px);

    line-height: 1.15;

    letter-spacing: -0.01em;

    margin: 0;

}



@media (max-width: 1023px) {

    .hero-section-ueber-uns {

        padding-top: 70px;

        height: 300px;

    }

}



/* Thalia Gallery Styles */

.thalia-gallery-section {

    background-color: #ffffff;

    padding: 4rem 1.5rem;

}



.thalia-gallery-container {

    max-width: 1280px;

    margin: 0 auto;

}



.thalia-gallery-grid {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 2rem;

}



.thalia-card {

    overflow: hidden;

}



.thalia-card:first-child,

.thalia-card:last-child {

    flex: 0.6;
    /* 60% of the middle image */

}



.thalia-card:nth-child(2) {

    flex: 1;
    /* 100% - the reference size */

}



.thalia-image {

    width: 100%;

    height: auto;

    display: block;

    object-fit: cover;

}



@media (max-width: 768px) {

    .thalia-gallery-grid {

        flex-direction: column;

        gap: 1rem;

    }



    .thalia-card:first-child,

    .thalia-card:nth-child(2),

    .thalia-card:last-child {

        flex: 1;

        width: 100%;

    }

}



.kontakt-section {

    background-color: #ffffff;

    padding: 4rem 1.5rem;

    margin-top: 140px;

    min-height: calc(100vh - 140px);

    position: relative;

}



@media (max-width: 1023px) {

    .kontakt-section {

        margin-top: 70px;

        min-height: calc(100vh - 70px);

    }

}



@media (max-width: 768px) {

    .kontakt-section {

        background-color: #2c2c2c;

        padding: 0;

        margin-top: 70px;

        min-height: calc(100vh - 70px);

    }

}



.kontakt-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 50%;

    height: 100%;

    background-color: #2c2c2c;

    z-index: 0;

}



@media (max-width: 768px) {

    .kontakt-section::before {

        display: none;

    }

}



.kontakt-container {

    max-width: 1280px;

    margin: 0 auto;

    display: flex;

    gap: 4rem;

    min-height: 100%;

    position: relative;

    z-index: 1;

}



@media (max-width: 1024px) {

    .kontakt-container {

        gap: 2rem;

    }

}



@media (max-width: 768px) {

    .kontakt-container {

        flex-direction: column;

        gap: 3rem;

    }

}



.kontakt-left,

.kontakt-right {

    flex: 1;

    min-height: 100%;

}



@media (max-width: 1024px) {

    .kontakt-left,

    .kontakt-right {

        padding: 2rem;

    }

}



@media (max-width: 768px) {

    .kontakt-left,

    .kontakt-right {

        padding: 2rem 1.5rem;

    }

}



.kontakt-left {

    background-color: transparent;

    padding: 3rem;

    display: flex;

    flex-direction: column;

}



.kontakt-right {

    background-color: #ffffff;

    padding: 3rem;

}



@media (max-width: 768px) {

    .kontakt-left {

        background-color: #2c2c2c;

    }

}



.kontakt-title {

    font-family: 'Playfair Display', serif;

    font-size: clamp(2rem, 3vw, 2.5rem);

    font-weight: 400;

    margin: 0 0 2rem 0;

    color: #ffffff;

}



@media (max-width: 1024px) {

    .kontakt-title {

        font-size: clamp(1.75rem, 4vw, 2.25rem);

    }

}



@media (max-width: 768px) {

    .kontakt-title {

        font-size: clamp(1.5rem, 4vw, 2rem);

        color: #ffffff;

    }

}



.kontakt-info {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.kontakt-info-item {

    display: flex;

    align-items: flex-start;

    gap: 1rem;

}



.kontakt-info-icon {

    width: 24px;

    height: 24px;

    flex-shrink: 0;

    color: #ffffff;

}



.kontakt-info-text {

    font-family: 'Century Gothic', sans-serif;

    font-size: 1rem;

    line-height: 1.6;

    color: #ffffff;

}



.kontakt-info-label {

    font-weight: bold;

    margin-bottom: 0.25rem;

}



.kontakt-info-value {

    opacity: 0.9;

}



.kontakt-hours {

    margin-top: 2rem;

    padding-top: 2rem;

    border-top: 1px solid #555555;

}



.kontakt-hours-title {

    font-family: 'Century Gothic', sans-serif;

    font-size: 1.125rem;

    font-weight: bold;

    margin-bottom: 1rem;

    color: #ffffff;

}



.kontakt-hours-list {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.kontakt-hours-item {

    font-family: 'Century Gothic', sans-serif;

    font-size: 0.9375rem;

    display: flex;

    justify-content: space-between;

    color: #ffffff;

}



.kontakt-hours-day {

    font-weight: normal;

}



.kontakt-hours-time {

    font-weight: bold;

}



/* Form Styles */

.kontakt-form {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.form-row {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



@media (max-width: 1024px) {

    .form-row {

        gap: 1.5rem;

    }

}



@media (max-width: 768px) {

    .form-row {

        gap: 1.5rem;

    }



    .form-group {

        flex: none;

    }

}



.form-group {

    display: flex;

    flex-direction: column;

    flex: 1;

}



.form-label {

    font-family: 'Century Gothic', sans-serif;

    font-size: 0.875rem;

    font-weight: bold;

    margin-bottom: 0.5rem;

    color: #111111;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.form-label.required::after {

    content: '*';

    color: #c3975a;

    margin-left: 0.25rem;

}



.form-input,

.form-select,

.form-textarea {

    font-family: 'Century Gothic', sans-serif;

    font-size: 1rem;

    padding: 0.75rem 1rem;

    border: 1px solid #d4d4d4;

    background-color: #ffffff;

    color: #111111;

    transition: border-color 0.3s, box-shadow 0.3s;

}



.form-input:focus,

.form-select:focus,

.form-textarea:focus {

    outline: none;

    border-color: #111111;

    box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.1);

}



.form-textarea {

    resize: vertical;

    min-height: 120px;

}



.form-checkbox-group {

    display: flex;

    align-items: flex-start;

    gap: 0.75rem;

    margin-top: 1rem;

}



.form-checkbox {

    width: 20px;

    height: 20px;

    margin-top: 2px;

    accent-color: #111111;

}



.form-checkbox-label {

    font-family: 'Century Gothic', sans-serif;

    font-size: 0.875rem;

    line-height: 1.5;

    color: #666666;

    cursor: pointer;

}



.form-checkbox-label a {

    color: #111111;

    text-decoration: underline;

    transition: color 0.3s;

}



.form-checkbox-label a:hover {

    color: #666666;

}



.form-submit {

    font-family: 'Century Gothic', sans-serif;

    font-size: 0.875rem;

    font-weight: bold;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    padding: 1rem 2.5rem;

    background-color: #111111;

    color: #ffffff;

    border: none;

    cursor: pointer;

    transition: background-color 0.3s;

    margin-top: 1rem;

}



.form-submit:hover {

    background-color: #333333;

    cursor: pointer;

    transition: background-color 0.3s;

    margin-top: 1rem;

}



/* Mobile Responsive Styles */

@media (max-width: 1024px) {

    .form-row {

        gap: 0.75rem;

    }



    .kontakt-container {

        gap: 2rem;

    }



    .kontakt-left,

    .kontakt-right {

        padding: 2rem;

    }



    .kontakt-title {

        font-size: clamp(1.75rem, 4vw, 2.25rem);

    }

}



@media (max-width: 768px) {

    .form-row {

        flex-direction: column;

        gap: 1.5rem;

    }



    .form-group {

        flex: none;

    }



    .kontakt-container {

        flex-direction: column;

        gap: 3rem;

    }



    .kontakt-left,

    .kontakt-right {

        padding: 2rem 1.5rem;

    }



    .kontakt-left {

        background-color: #2c2c2c;

    }



    .kontakt-title {

        font-size: clamp(1.5rem, 4vw, 2rem);

        color: #ffffff;

    }



    .kontakt-info {

        display: flex;

        flex-direction: column;

        gap: 1.5rem;

    }



    .kontakt-info-item {

        display: flex;

        align-items: flex-start;

        gap: 1rem;

    }



    .kontakt-info-icon {

        width: 24px;

        height: 24px;

        flex-shrink: 0;

        color: #ffffff;

    }



    .kontakt-info-text {

        font-family: 'Century Gothic', sans-serif;

        font-size: 1rem;

        line-height: 1.6;

        color: #ffffff;

    }



    .kontakt-info-label {

        font-weight: bold;

        margin-bottom: 0.25rem;

    }



    .kontakt-info-value {

        opacity: 0.9;

    }



    .kontakt-hours {

        margin-top: 2rem;

        padding-top: 2rem;

        border-top: 1px solid #555555;

    }



    .kontakt-hours-title {

        font-family: 'Century Gothic', sans-serif;

        font-size: 1.125rem;

        font-weight: bold;

        margin-bottom: 1rem;

        color: #ffffff;

    }



    .kontakt-hours-list {

        display: flex;

        flex-direction: column;

        gap: 0.5rem;

    }



    .kontakt-hours-item {

        font-family: 'Century Gothic', sans-serif;

        font-size: 0.875rem;

        display: flex;

        justify-content: space-between;

        color: #ffffff;

    }



    .kontakt-hours-day {

        font-weight: normal;

    }



    .kontakt-hours-time {

        font-weight: bold;

    }



    .kontakt-form {

        display: flex;

        flex-direction: column;

        gap: 1.5rem;

    }



    .form-group {

        display: flex;

        flex-direction: column;

    }



    .form-label {

        font-family: 'Century Gothic', sans-serif;

        font-size: 0.875rem;

        font-weight: bold;

        margin-bottom: 0.5rem;

        color: #111111;

        text-transform: uppercase;

        letter-spacing: 0.05em;

    }



    .form-label.required::after {

        content: '*';

        color: #c3975a;

        margin-left: 0.25rem;

    }



    .form-input,

    .form-select,

    .form-textarea {

        font-family: 'Century Gothic', sans-serif;

        font-size: 1rem;

        padding: 0.75rem 1rem;

        border: 1px solid #d4d4d4;

        background-color: #ffffff;

            color: #111111;

            transition: border-color 0.3s, box-shadow 0.3s;

        }



        .form-input:focus,

        .form-select:focus,

        .form-textarea:focus {

            outline: none;

            border-color: #111111;

            box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.1);

        }



        .form-textarea {

        resize: vertical;

        min-height: 120px;

    }



    .form-checkbox-group {

        display: flex;

        align-items: flex-start;

        gap: 0.75rem;

        margin-top: 1rem;

    }



    .form-checkbox {

        width: 20px;

        height: 20px;

        margin-top: 2px;

        accent-color: #111111;

    }



    .form-checkbox-label {

        font-family: 'Century Gothic', sans-serif;

        font-size: 0.875rem;

        line-height: 1.5;

        color: #666666;

        cursor: pointer;

    }



    .form-checkbox-label a {

        color: #111111;

        text-decoration: underline;

        transition: color 0.3s;

    }



    .form-checkbox-label a:hover {

        color: #666666;

    }



    .form-submit {

        font-family: 'Century Gothic', sans-serif;

        font-size: 0.875rem;

        font-weight: bold;

        letter-spacing: 0.15em;

        text-transform: uppercase;

        padding: 1rem 2.5rem;

        background-color: #111111;

        color: #ffffff;

        border: none;

        cursor: pointer;

        transition: background-color 0.3s;

        margin-top: 1rem;

    }



    .form-submit:hover {

        background-color: #333333;

        cursor: pointer;

        transition: background-color 0.3s;

        margin-top: 1rem;

    }

}

/* --- Added Cookie Popup Styles --- */
/* Floating Glassmorphism Cookie Popup aligned to the left */
.cookie-popup {
    position: fixed;
    bottom: clamp(10px, 2vw, 30px);
    left: clamp(20px, 6vw, 120px);
    width: calc(100% - 40px);
    max-width: 420px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    z-index: 1000;
    padding: 24px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-sizing: border-box;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.cookie-content p {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: #1c1c1e;
    line-height: 1.4;
    font-weight: 400;
    text-align: left;
}
.cookie-buttons {
    display: flex;
    gap: 12px;
}
.cookie-btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cookie-btn.solid {
    background: #000000;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.cookie-btn.solid:hover {
    background: #333333;
}
.cookie-btn.solid:active {
    background: #222222;
    transform: scale(0.98);
}
.cookie-btn.outline {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #000000;
}
.cookie-btn.outline:hover {
    background: rgba(255, 255, 255, 0.4);
}
.cookie-btn.outline:active {
    background: rgba(0, 0, 0, 0.08);
    transform: scale(0.98);
}

@media (max-width: 600px) {
    .cookie-buttons {
        flex-direction: column;
    }
    .cookie-btn {
        max-width: none;
    }
}

/* --- Impressum Typography Additions --- */
.impressum-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 1.5rem;
    color: #333;
    line-height: 1.6;
}
.impressum-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: #111;
}
.impressum-content h3 {
    font-family: 'Century Gothic', sans-serif;
    font-size: 1.25rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #111;
}
.impressum-content p {
    margin-bottom: 1rem;
}
.impressum-content a {
    color: #111;
    text-decoration: underline;
}
.impressum-content a:hover {
    text-decoration: none;
}