:root {
    /* Home of Nails Color Scheme */
    --bg-color: #FAF7F5;
    /* Creme Hintergrund */
    --surface-color: #FFFFFF;
    /* White for cards */
    --primary-color: #C8A46E;
    /* Gold Akzent */
    --rose-nude: #E7C6C2;
    /* Rosé Nude */
    --dusty-blue: #8BB8CC;
    /* Dusty Blue */

    /* Gradients */
    --gold-gradient: linear-gradient(135deg, #C8A46E 0%, #E7C6C2 50%, #8BB8CC 100%);
    --gold-text-gradient: linear-gradient(to right, #C8A46E, #E7C6C2, #8BB8CC);
    --rose-gradient: linear-gradient(135deg, #E7C6C2 0%, #FAF7F5 100%);
    --blue-gradient: linear-gradient(135deg, #8BB8CC 0%, #E7C6C2 100%);

    --text-color: #2C2C2C;
    /* Dark text for light background */
    --text-dark: #1A1A1A;
    --text-muted: #666666;

    /* Typography */
    --font-heading: 'Instrument Serif', serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;

    --transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    --border-radius-lg: 20px;
    --border-radius-pill: 50px;
    --border-radius-arch: 200px 200px 0 0;
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* html {
    visibility: hidden;
}

html.fonts-loaded {
    visibility: visible;
} */

body {
    font-family: var(--font-body), -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.7;
    overflow-x: hidden;
    background-image: linear-gradient(135deg, #FAF7F5 0%, #FFFFFF 100%);
    font-display: swap;
}

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    font-weight: 600;
    z-index: 10000;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading), Georgia, 'Times New Roman', serif;
    font-weight: 400;
    line-height: 1.2;
    /* Gradient Text Effect with new colors */
    background: linear-gradient(135deg, #C8A46E 0%, #8BB8CC 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--primary-color);
    /* Fallback */
    display: inline-block;
    font-display: swap;
}

/* Ensure headings wrap correctly with inline-block, or revert to block if issues arise */
h1,
h2 {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* Text that shouldn't be metallic (if any) can override this */

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

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
    object-fit: cover;
    height: 390px;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Top Bar */
.top-bar {
    background-color: var(--dusty-blue);
    padding: 10px 0;
    font-size: 0.85rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(200, 164, 110, 0.3);
    color: #FFFFFF;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 600px) {
    .top-bar {
        padding: 8px 0;
        font-size: 0.75rem;
    }

    .top-bar .container {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .top-bar-info {
        gap: 12px;
    }

    .container {
        padding: 0 15px;
    }

    .hero-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .hero-buttons .btn {
        flex: 1;
        min-width: 100px;
        text-align: center;
        font-size: 0.85rem;
        padding: 8px 12px;
    }
}

.top-bar-info {
    display: flex;
    gap: 20px;
}

.top-bar span,
.top-bar a,
.top-bar i {
    color: #FFFFFF;
}

.top-bar-info a:hover {
    color: var(--rose-nude);
    opacity: 0.9;
}

.route-btn {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    transition: all 0.3s;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #FFFFFF;
    font-weight: 500;
}

.route-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #FFFFFF !important;
}

/* Header & Nav */
/* Header & Nav */
header {
    width: 100%;
    background-color: rgba(250, 247, 245, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    padding: 8px 0;
    transition: var(--transition);
    border-bottom: 1px solid rgba(200, 164, 110, 0.2);
}

header.scrolled {
    background-color: rgba(250, 247, 245, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--primary-color);
    padding: 5px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 15px;
    width: auto;
    max-width: none;
    height: auto;
    background: none;
    -webkit-text-fill-color: initial;
    text-shadow: none;
}

.logo img {
    width: auto;
    height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.logo-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--dusty-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
    display: block;
    white-space: nowrap;
    letter-spacing: 1px;
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-color);
    position: relative;
    padding: 5px 0;
}

.nav-links a:hover {
    color: var(--dusty-blue);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--dusty-blue));
    transition: var(--transition);
}

.nav-links a:hover::after {
    width: 100%;
}

/* Termin Buchen Button im Header */
.nav-links .btn {
    padding: 5px 20px;
    color: #FFFFFF !important;
    font-weight: 500;
    font-size: 0.95rem;
    text-align: center;
    line-height: 1.7;
    vertical-align: baseline;
}

.nav-links .btn:hover {
    color: #FFFFFF !important;
}

.nav-links .btn::after {
    display: none;
}

.mobile-menu-btn {
    display: none;
    font-size: 1.5rem;
    color: var(--primary-color);
    cursor: pointer;
}

.mobile-menu-close {
    display: none;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--dusty-blue) 100%);
    background-size: 200% auto;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: var(--border-radius-pill);
    border: none;
    transition: 0.5s;
    box-shadow: 0 5px 15px rgba(200, 164, 110, 0.3);
}

.btn:hover {
    background-position: right center;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(200, 164, 110, 0.5);
}

.btn-outline {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    position: relative;
    z-index: 1;
}

/* Optional: Gradient border for outline button */
.btn-outline::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-pill);
    padding: 1px;
    /* border thickness */
    background: var(--gold-gradient);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.btn-outline {
    border: none;
}

/* Remove solid border if using mask trick, or just keep solid for simplicity. Let's stick to gradient border trick above or simple solid. Let's check simplicity. Mask trick is good but solid is safe. Let's use solid for now with gold color */
.btn-outline:hover {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--dusty-blue) 100%);
    color: #FFFFFF;
    border-color: transparent;
}


/* Sections General */
section {
    padding: 70px 0;
}

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px;
}

.section-header h2 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.section-header p {
    font-size: 1.1rem;
    color: var(--text-muted);
}

/* Hero Section */
.hero {
    display: flex;
    align-items: center;
    padding: 40px 0 70px;
    min-height: 85vh;
    background: radial-gradient(circle at top right, rgba(231, 198, 194, 0.2), transparent 40%);
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* Fix h1 gradient display block issue */
.hero-content h1 {
    font-size: 5rem;
    line-height: 1.05;
    margin-bottom: 20px;
    display: block;
    background: none;
    -webkit-text-fill-color: initial;
    color: var(--text-color);
    width: 100%;
}

.hero-content h1 span {
    font-style: italic;
    display: block;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--dusty-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 25px;
    max-width: 90%;
    color: var(--text-muted);
}

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--text-color);
    margin-bottom: 20px;
    opacity: 0.8;
}

.hero-image {
    position: relative;
    height: 600px;
    width: 100%;
    padding: 5px;
    background: linear-gradient(135deg, var(--rose-nude) 0%, var(--dusty-blue) 100%);
    border-radius: var(--border-radius-arch);
    box-shadow: 0 10px 30px rgba(200, 164, 110, 0.2);
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 195px 195px 0 0;
    /* Slightly smaller to fit inside padding */
    display: block;
}

/* About Section */
.about {
    background-color: var(--surface-color);
    border-radius: 40px;
    margin: 0 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.about-section {
    text-align: center;
    padding: 80px 0;
}

.about-container {
    max-width: 900px;
    margin: 0 auto;
    display: block;
}

.about-text {
    margin-top: 0;
    padding-top: 0;
}

.owner-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    margin-bottom: 0;
}

.owner-intro img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.owner-intro-text {
    text-align: center;
    max-width: 600px;
}

.owner-name {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--dusty-blue);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.owner-intro-subtitle {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--dusty-blue);
    margin-bottom: 0;
    font-weight: 500;
    text-align: center;
    background: none;
    -webkit-text-fill-color: var(--dusty-blue);
    display: block;
}

.owner-quote {
    font-size: 1.15rem;
    color: var(--text-color);
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto;
}

.owner-quote:first-of-type {
    margin-top: 0;
}

.stats-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 30px;
    border-top: 1px solid rgba(200, 164, 110, 0.3);
    padding-top: 30px;
}

.stat-item {
    text-align: center;
}

.stat-label {
    font-family: var(--font-body);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 2px;
    margin-bottom: 10px;
    color: var(--dusty-blue);
}

.stat-value {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--text-color);
}

/* Hero buttons moved to after image - defined in grid above */

/* Subtle gold shimmer line on top */
.about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--gold-gradient);
    opacity: 0.5;
}

.about .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-image {
    padding: 3px;
    background: var(--gold-gradient);
    border-radius: var(--border-radius-lg);
}

.about-image img {
    width: 100%;
    border-radius: 18px;
    /* Inner radius */
    aspect-ratio: 4/5;
    background: #000;
}

.about-text h2 {
    font-size: 3.5rem;
    margin-bottom: 30px;
    display: inline-block;
    /* For gradient */
}

.about-text p {
    color: var(--text-muted);
}

/* Services / Price List */
.pricelist {
    background-color: var(--bg-color);
}

.price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
}

.price-card {
    background-color: var(--surface-color);
    padding: 15px;
    border-radius: 200px 200px 20px 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transition: var(--transition);
    cursor: pointer;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.price-card:hover {
    transform: translateY(-10px);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: linear-gradient(45deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.5;
    pointer-events: none;
}

/* Service item hover effect */
.service-item:hover .service-name {
    color: var(--primary-color);
    padding-left: 5px;
}

.service-name {
    transition: all 0.3s ease;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--dusty-blue);
}

/* Text Gradient Utility */
.text-gradient {
    background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Gradient border on hover using ::after */
.price-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 200px 200px 20px 20px;
    padding: 2px;
    background: var(--gold-gradient);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.price-card:hover::after {
    opacity: 1;
}

.price-card img {
    width: 100%;
    height: 450px;
    border-radius: 190px 190px 10px 10px;
    object-fit: cover;
    background-color: #2a2a2a;
    transition: 0.3s;
}

.price-card h3 {
    text-align: center;
    margin-top: 20px;
    font-size: 1.5rem;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 100%;
}

/* Special styling for "Impressionen" which is maybe not arch shaped? 
   No, sticking to consistency is better. */

/* Contact Section */
.contact {
    padding-bottom: 0;
}

.contact-wrapper {
    background: linear-gradient(135deg, var(--rose-nude) 0%, var(--dusty-blue) 100%);
    color: var(--text-color);
    border-radius: 40px 40px 0 0;
    padding: 70px 20px;
    text-align: center;
    border-top: 3px solid var(--primary-color);
}

.contact-wrapper h2 {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--dusty-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 4rem;
    margin-bottom: 40px;
    display: inline-block;
}

.contact-grid {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.contact-item h3 {
    font-family: var(--font-body);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.contact-item p,
.contact-item a {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--text-color);
}

/* Footer */
footer {
    background-color: var(--text-dark);
    color: var(--text-muted);
    text-align: center;
    padding: 30px 0 50px;
    font-size: 0.9rem;
    border-top: 1px solid rgba(200, 164, 110, 0.2);
}

.footer-link {
    color: var(--text-muted);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--dusty-blue);
}

/* Mobile Responsive */
@media (max-width: 900px) {

    /* Reduce section padding on mobile */
    section {
        padding: 40px 0;
    }

    .section-header {
        margin-bottom: 30px;
    }

    .hero {
        padding: 30px 0 50px;
    }

    .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 25px;
    }

    .hero-content h1 {
        font-size: 3.5rem;
        margin-bottom: 15px;
    }

    .hero-content h1 span {
        width: 100%;
    }

    .hero-subtitle {
        margin-bottom: 15px;
    }

    /* Center buttons on mobile */
    .hero-buttons {
        justify-content: center;
        gap: 10px;
    }

    .about-section {
        padding: 50px 0;
    }

    .about-container {
        gap: 20px;
    }

    .owner-intro {
        gap: 12px;
        margin-bottom: 0;
    }

    .owner-intro img {
        width: 200px;
        height: 200px;
    }

    .owner-intro-text {
        margin-top: 5px;
    }

    .owner-intro-subtitle {
        margin-bottom: 0;
    }

    .about-text {
        margin-top: 0;
        padding-top: 0;
    }

    .about-text .reveal-text {
        margin-top: 0;
    }

    .owner-quote {
        margin-bottom: 12px;
    }

    .owner-quote:first-of-type {
        margin-top: 0;
    }

    .stats-container {
        flex-direction: column;
        gap: 20px;
        margin-top: 20px;
        padding-top: 20px;
    }

    .spar-pakete-section {
        padding: 15px 10px;
        margin-bottom: 25px;
    }

    .spar-pakete-title {
        font-size: 1.8rem;
        margin-bottom: 15px;
    }

    .tabs-header {
        flex-direction: column;
        gap: 5px;
        margin-bottom: 15px;
    }

    .tab-button {
        width: 100%;
        padding: 10px 15px;
        font-size: 0.85rem;
    }

    .tab-panel-inner {
        padding: 15px 10px;
    }

    .tab-panel-inner h4 {
        padding: 15px 15px;
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .tab-panel-inner .service-list {
        padding: 10px 15px 15px 15px;
    }

    .price-content-grid {
        gap: 15px;
    }

    .accordion-header {
        padding: 12px 15px;
    }

    .accordion-content .service-list {
        padding: 12px 15px 15px 15px;
    }

    .gallery-section {
        padding: 50px 0;
    }

    .gallery-grid {
        gap: 10px;
        margin-top: 25px;
    }

    .contact-wrapper {
        padding: 50px 15px;
    }

    .contact-wrapper h2 {
        margin-bottom: 30px;
        font-size: 3rem;
    }

    .contact-grid {
        gap: 30px;
        margin-bottom: 30px;
        flex-direction: column;
    }

    .highlight-package {
        transform: scale(1);
    }

    .highlight-package:hover {
        transform: scale(1.02);
    }

    .hero-image {
        height: 400px;
    }
}

/* iPhone / Small Mobile - Further reduce spacing */
@media (max-width: 600px) {
    .top-bar {
        padding: 8px 0;
        font-size: 0.75rem;
    }

    .top-bar .container {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .top-bar-info {
        gap: 12px;
    }

    /* Further reduce spacing on very small screens */
    section {
        padding: 30px 0;
    }

    .hero {
        padding: 20px 0 40px;
    }

    .hero-content h1 {
        font-size: 2.5rem;
        margin-bottom: 12px;
    }

    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 12px;
    }

    .about-section {
        padding: 40px 0;
    }

    .owner-intro {
        gap: 10px;
        margin-bottom: 0;
    }

    .owner-intro img {
        width: 180px;
        height: 180px;
    }

    .owner-intro-subtitle {
        margin-bottom: 0;
        font-size: 1rem;
    }

    .about-text {
        margin-top: 0;
        padding-top: 0;
    }

    .about-text .reveal-text {
        margin-top: 0;
    }

    .owner-quote {
        margin-bottom: 10px;
        font-size: 1rem;
    }

    .owner-quote:first-of-type {
        margin-top: 0;
    }

    .spar-pakete-section {
        padding: 12px 8px;
        margin-bottom: 20px;
    }

    .spar-pakete-title {
        font-size: 1.5rem;
        margin-bottom: 12px;
    }

    .section-header h2 {
        font-size: 2.2rem;
        margin-bottom: 15px;
    }

    .section-header p {
        font-size: 0.95rem;
    }

    .contact-wrapper {
        padding: 40px 10px;
    }

    .contact-wrapper h2 {
        font-size: 2.5rem;
        margin-bottom: 25px;
    }

    .contact-item p,
    .contact-item a {
        font-size: 1.4rem;
    }

    .about .container {
        grid-template-columns: 1fr;
    }

    .mobile-menu-btn {
        display: block;
    }

    .mobile-menu-btn {
        display: block;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        /* Full Width */
        height: 100vh;
        background-color: rgba(10, 10, 10, 0.98);
        /* Deep dark background */
        backdrop-filter: blur(15px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* Center Items Horizontally */
        text-align: center;
        border-left: none;
        /* Remove border for full screen look */
        transition: right 0.4s ease;
        z-index: 1001;
        gap: 20px;
        /* Reduced gap */
        padding: 0;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links a {
        font-size: 1.5rem;
        margin: 5px 0;
        /* Reduced margin */
    }

    .mobile-menu-close {
        display: block;
        position: absolute;
        top: 30px;
        right: 30px;
        font-size: 2.5rem;
        color: var(--dusty-blue);
        cursor: pointer;
        z-index: 1002;
    }

    /* Specific style for Termin Buchen button in Mobile Menu */
    .nav-links .btn {
        padding: 15px 40px;
        /* Wider button */
        color: #000 !important;
        /* Force black text */
        width: auto;
        margin-top: 15px;
        font-weight: 600;
        letter-spacing: 1px;
    }
}

/* Lightbox */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    display: flex;
    opacity: 1;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 0 50px rgba(191, 149, 63, 0.2);
    border: 1px solid #BF953F;
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 3rem;
    color: var(--primary-color);
    cursor: pointer;
    font-family: var(--font-heading);
}

/* Text-Based Price List Styles */
.price-content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

.service-category {
    background-color: var(--surface-color);
    border: 1px solid rgba(200, 164, 110, 0.3);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    padding: 0;
    overflow: hidden;
}

/* SPAR-PAKETE Section */
.spar-pakete-section {
    margin-bottom: 50px;
    padding: 30px;
    background: linear-gradient(135deg, rgba(231, 198, 194, 0.1) 0%, rgba(139, 184, 204, 0.1) 100%);
    border-radius: 20px;
    border: 2px solid var(--primary-color);
    box-shadow: 0 10px 30px rgba(200, 164, 110, 0.2);
}

.spar-pakete-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 30px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--dusty-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Tab System für SPAR-PAKETE */
.tabs-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.tabs-header {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(200, 164, 110, 0.3);
    justify-content: center;
    flex-wrap: wrap;
}

.tab-button {
    padding: 15px 30px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tab-button:hover {
    color: var(--primary-color);
    background: rgba(200, 164, 110, 0.1);
}

.tab-button.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: rgba(200, 164, 110, 0.1);
}

.tabs-content {
    position: relative;
    min-height: 200px;
}

.tab-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-panel.active {
    display: block;
}

.tab-panel-inner {
    background-color: var(--surface-color);
    border: 1px solid rgba(200, 164, 110, 0.3);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.tab-panel-inner h4 {
    font-size: 1.8rem;
    margin-bottom: 12px;
    padding: 15px 20px;
    background-color: rgba(255, 255, 255, 0.02);
    border-bottom: 2px solid var(--dusty-blue);
    color: var(--primary-color);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--dusty-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: left;
    padding-bottom: 8px;
    display: block;
}

.tab-panel-inner .service-list {
    padding: 15px 20px 20px 20px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.highlight-package {
    border: 3px solid var(--primary-color) !important;
    box-shadow: 0 8px 30px rgba(200, 164, 110, 0.5) !important;
    background: linear-gradient(135deg, rgba(200, 164, 110, 0.1) 0%, rgba(231, 198, 194, 0.1) 100%) !important;
    transform: scale(1.02);
    transition: all 0.3s ease;
}

.highlight-package:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 40px rgba(200, 164, 110, 0.6) !important;
}

.highlight-package .accordion-header {
    background: linear-gradient(135deg, rgba(200, 164, 110, 0.15) 0%, rgba(139, 184, 204, 0.15) 100%);
    border-bottom: 2px solid var(--primary-color);
}

.highlight-package .accordion-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    background: none;
    -webkit-text-fill-color: var(--primary-color);
}

.highlight-package .service-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.accordion-header {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.02);
    transition: background-color 0.3s ease;
}

.accordion-header:hover {
    background-color: rgba(231, 198, 194, 0.1);
}

.accordion-header h3 {
    margin-bottom: 10px;
}

/* Specific Hero Buttons */
.btn-hero {
    padding: 12px 30px;
    /* Uniform larger padding */
    font-size: 1rem;
    /* Uniform larger font */
    text-transform: none;
    /* Title Case */
    font-weight: 500;
}

/* WhatsApp gold button specific */
.btn-whatsapp-gold {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--dusty-blue) 100%);
    color: #FFFFFF;
    padding: 12px 30px;
    font-size: 1rem;
    box-shadow: 0 5px 15px rgba(200, 164, 110, 0.3);
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.btn-whatsapp-gold:hover {
    background: linear-gradient(135deg, var(--dusty-blue) 0%, var(--primary-color) 100%);
    transform: translateY(-2px);
}

/* Footer Route Button */
/* Footer Route Button */
.btn-footer-route {
    background: var(--gold-gradient);
    color: #000 !important;
    /* Force black text always */
    border: none;
    font-weight: 600;
    padding: 5px 15px;
    /* Even smaller padding */
    font-size: 0.8rem;
    /* Smaller font */
    margin-top: 10px;
    display: inline-block;
    border-radius: 50px;
    text-transform: none;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(191, 149, 63, 0.2);
}

.btn-footer-route:hover {
    transform: scale(1.05);
    color: #000 !important;
    /* Ensure black on hover */
}

/* Floating WhatsApp Button */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #BF953F;
    color: #000;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 0 5px 15px rgba(191, 149, 63, 0.4);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    background-color: #AA771C;
    color: #000;
}

.accordion-header i {
    color: var(--dusty-blue);
    transition: transform 0.3s ease;
}

.service-category.active .accordion-header i {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background-color: rgba(0, 0, 0, 0.1);
}

/* Add padding inside content wrapper for styling */
.accordion-content .service-list {
    padding: 15px 20px 20px 20px;
}

.accordion-content .service-subcategory {
    padding: 0 20px;
    margin-top: 20px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.service-category h3 {
    font-size: 1.8rem;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--dusty-blue);
    padding-bottom: 8px;
    display: block;
}

.service-subcategory {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--dusty-blue);
    margin: 15px 0 8px;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.service-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.service-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.1);
    padding-bottom: 5px;
}

.service-name {
    font-weight: 500;
    color: var(--text-color);
}

.service-price {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--primary-color);
    white-space: nowrap;
    margin-left: 10px;
    font-weight: 600;
}

.service-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 5px;
    font-style: italic;
}

/* --- ANIMATIONS --- */
.reveal-text {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-text.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.fade-in.visible {
    opacity: 1;
}

/* Staggered delays */
.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

/* --- REFINED TYPOGRAPHY --- */
h1,
h2,
h3 {
    letter-spacing: -0.02em;
    /* Tighter for elegance */
}

h2 {
    font-size: 3rem;
    /* Larger headings */
    margin-bottom: 30px;
}

/* --- GALLERY SECTION --- */
.gallery-section {
    padding: 70px 0;
    background-color: var(--bg-color);
    position: relative;
    border-top: 1px solid rgba(212, 175, 55, 0.1);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    margin-top: 35px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    /* Minimal radius */
    aspect-ratio: 4/5;
    /* Portrait orientation for elegance */
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
    filter: grayscale(20%);
    /* Artistic touch */
}

.gallery-item:hover img {
    transform: scale(1.05);
    filter: grayscale(0%);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-item {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.gallery-item:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
}

.gallery-item:focus:not(:focus-visible) {
    outline: none;
}

/* Instagram Widget Styling */
.instagram-widget-container {
    margin-top: 30px;
    width: 100%;
    min-height: 400px;
    display: flex;
    justify-content: center;
}

.instagram-widget-container iframe {
    width: 100% !important;
    border: none !important;
    border-radius: 10px;
}

/* Elfsight Widget Styling */
.elfsight-app-64f6a6b0-8e90-407d-99a7-05437317dd9d {
    width: 100%;
}

/* Fallback Gallery wird ausgeblendet wenn Widget geladen */
.instagram-widget-container:has(.elfsight-app-64f6a6b0-8e90-407d-99a7-05437317dd9d:not(:empty))~#fallback-gallery {
    display: none;
}

/* Alternative für Browser ohne :has() Support */
.instagram-widget-container .elfsight-app-64f6a6b0-8e90-407d-99a7-05437317dd9d:not(:empty) {
    display: block;
}

#fallback-gallery {
    display: block;
}

/* Verstecke Fallback wenn Elfsight Widget geladen ist */
.instagram-widget-container:not(:empty)~#fallback-gallery,
.elfsight-app-64f6a6b0-8e90-407d-99a7-05437317dd9d:not(:empty)~#fallback-gallery {
    display: none;
}