/* Desktop-Zentrierung für 'Über mich' */
.nav-link--about {
    width: auto;
    text-align: center;
    justify-content: center;
    display: inline-flex;
    align-items: center;
}

/* Base and Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Font Awesome Debug */
.fas,
.fa {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    display: inline-block !important;
    text-rendering: auto !important;
}

html {
    scroll-behavior: smooth;
    /* Use CSS custom properties for dynamic viewport height */
    --vh: 1vh;
}

:root {
    --color-background: #F1D1F1;
    --color-background-alt: #AD784C;
    --color-surface: #FFF7FB;
    --color-surface-elevated: #FFEFF8;
    --color-accent: #836C0A;
    --color-accent-contrast: #ffffff;
    --color-text: #2B1810;

    .footer-section a {
        display: inline;
        min-height: 0;
        padding: 0;
        align-items: baseline;
    }

    --color-text-muted: #4D2C1C;
    --color-text-soft: #66402B;
    --color-text-inverse: #ffffff;
    --color-text-inverse-muted: rgba(255, 255, 255, 0.92);
    --color-border: rgba(92, 65, 7, 0.28);
    --shadow-soft: 0 12px 30px rgba(58, 24, 9, 0.14);
    --shadow-strong: 0 22px 50px rgba(58, 24, 9, 0.22);
    --gradient-accent: linear-gradient(135deg, #836C0A 0%, #AD784C 58%, #5F4206 100%);
    --gradient-soft: linear-gradient(135deg, rgba(131, 108, 10, 0.2) 0%, rgba(173, 120, 76, 0.28) 100%);
    /* 3-stufige Gradients (dunkel–hell–dunkel) analog Massagen */
    --gradient-footcare: linear-gradient(135deg, #B0A79A 0%, #D8D2C9 55%, #8E8577 100%);
    --gradient-footcare-soft: linear-gradient(135deg, rgba(176, 167, 154, 0.22) 0%, rgba(244, 241, 237, 0.65) 55%, rgba(142, 133, 119, 0.28) 100%);
    --gradient-manicure: linear-gradient(135deg, #B45C8A 0%, #D989B8 55%, #7A2E5A 100%);
    --gradient-manicure-soft: linear-gradient(135deg, rgba(180, 92, 138, 0.2) 0%, rgba(248, 223, 243, 0.6) 55%, rgba(122, 46, 90, 0.26) 100%);
}

body {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-background);
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}



body.mobile-menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Arial';
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1rem;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.75rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

p {
    margin-bottom: 1rem;
    color: var(--color-text-muted);
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

button,
.btn,
.nav-link,
.service-cta {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 14px 24px;
    border-radius: 50px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid;
    font-size: 1rem;
    text-align: center;
}

.btn-primary {
    background: var(--gradient-accent);
    color: var(--color-accent-contrast);
    text-shadow: 0 2px 6px rgba(47, 25, 4, 0.45);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(131, 108, 10, 0.35);
}

.btn-outline {
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
    background: transparent;
}

.btn-outline:hover {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    transform: translateY(-2px);
}

.btn-large {
    padding: 16px 32px;
    font-size: 1.1rem;
}

/* Navigation */
.header {
    background: rgba(241, 209, 241, 0.9);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 20px rgba(173, 120, 76, 0.2);
    transition: background 0.3s ease, backdrop-filter 0.3s ease;
    min-height: 64px;
}

.navbar {
    padding: 0.5rem 0;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.nav-logo {
    display: flex;
    align-items: center;
}

.nav-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-accent);
    min-height: auto;
}

.nav-logo-link:hover,
.nav-logo-link:focus {
    color: var(--color-accent);
}

.nav-logo-link i {
    margin-right: 0;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(14px) saturate(120%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1200;
}

.nav-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

body.mobile-menu-open .header {
    backdrop-filter: blur(14px) saturate(130%);
}

body .header~* {
    filter: none;
    transition: filter 0.3s ease;
}

body.mobile-menu-open .header~* {
    filter: blur(12px);
}

.nav-link {
    font-weight: 500;
    color: var(--color-text);
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--color-accent);
}

.nav-item.has-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.nav-dropdown-icon {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    display: none;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 220px;
    padding: 1rem 1.25rem;
    background: var(--color-surface-elevated);
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(173, 120, 76, 0.25);
    z-index: 999;
    transition: opacity 0.18s ease, transform 0.18s ease;
    opacity: 0;
    transform: translateY(-4px);
}

.nav-item.has-dropdown:hover .dropdown-menu,
.nav-item.has-dropdown.open .dropdown-menu {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.nav-item.has-dropdown:hover .nav-dropdown-icon,
.nav-item.has-dropdown.open .nav-dropdown-icon {
    transform: rotate(180deg);
}

.nav-item.has-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -6px;
    right: -6px;
    height: 12px;
    background: transparent;
}

.dropdown-link {
    color: var(--color-text);
    font-weight: 500;
    padding: 0.35rem 0;
    border-radius: 8px;
}

.dropdown-link:hover,
.dropdown-link:focus {
    color: var(--color-accent);
    padding-left: 0.25rem;
}

.nav-cta {
    background: var(--gradient-accent);
    color: var(--color-accent-contrast);
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 500;
    transition: all 0.3s ease;
    text-shadow: 0 2px 6px rgba(47, 25, 4, 0.45);
    gap: 0.5rem;
}

.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(131, 108, 10, 0.3);
}

.nav-toggle {
    display: none;
    position: relative;
    width: 36px;
    height: 28px;
    cursor: pointer;
    padding: 6px;
    z-index: 1300;
}

.nav-toggle span {
    display: block;
    position: absolute;
    left: 6px;
    right: 6px;
    height: 3px;
    background: var(--color-text);
    transition: transform 300ms cubic-bezier(.2, .9, .2, 1), opacity 200ms ease;
    border-radius: 3px;
    transform-origin: center;
}

.nav-toggle span:nth-child(1) {
    top: 6px;
}

.nav-toggle span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.nav-toggle span:nth-child(3) {
    bottom: 6px;
}

.nav-toggle.active span:nth-child(1),
.nav-toggle.active span:nth-child(3) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.nav-toggle.active span:nth-child(3) {
    transform: translateY(-50%) rotate(-45deg);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-menu.mobile-active {
    display: flex !important;
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100vh;
    background: rgba(241, 209, 241, 0.96);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 64px 24px 2rem;
    gap: 0.65rem;
    z-index: 1300;
    transform: translateX(100%);
    animation: slideInRight 0.3s ease forwards;
    box-shadow: -5px 0 20px rgba(173, 120, 76, 0.25);
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.nav-menu.mobile-active .nav-link {
    font-size: 1.1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(43, 24, 16, 0.12);
    width: 100%;
    text-align: left;
    transition: background-color 0.2s ease;
}

.nav-menu.mobile-active .nav-link:hover {
    background-color: rgba(173, 120, 76, 0.15);
}

.nav-menu.mobile-active .nav-cta {
    margin-top: 2rem;
    font-size: 1rem;
    padding: 12px 20px;
    text-align: center;
}

/* Shared Service Card Styles */
.services-grid {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-bottom: 3rem;
}

.service-category-block {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.service-category-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.service-category-title h3 {
    margin-bottom: 0.3rem;
    color: var(--color-text);
}

.service-category-title p {
    margin: 0;
    color: var(--color-text-soft);
    font-size: 1rem;
}

.service-category-count {
    font-weight: 600;
    color: var(--color-accent);
    background: rgba(131, 108, 10, 0.18);
    padding: 0.4rem 1rem;
    border-radius: 999px;
}

.service-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.service-card {
    background: var(--color-surface);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: var(--shadow-soft);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
}

/* Touch: prevent accidental selection/copy on cards and images; allow via body.allow-selection (long-press) */
@media (pointer: coarse) {

    .service-card,
    .service-card * {
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    .service-card img,
    img {
        -webkit-user-drag: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    body.allow-selection .service-card,
    body.allow-selection .service-card * {
        -webkit-user-select: text !important;
        -ms-user-select: text !important;
        user-select: text !important;
    }

    body.allow-selection img,
    body.allow-selection .service-card img {
        -webkit-user-drag: auto;
        -webkit-user-select: text !important;
        user-select: text !important;
    }
}

.service-card-image {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    aspect-ratio: 4 / 3;
    background: rgba(173, 120, 76, 0.15);
    max-height: 200px;
    width: 100%;
}

.service-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-card[data-seo-url="nagelpilzbehandlung-therapie"] .service-card-image img {
    object-position: 0px -220px;
}

.service-card[data-seo-url="wellness-fussreflexzonenmassage"] .service-card-image img {
    object-position: 0px -130px;
}

.related-services .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.75rem;
    margin-bottom: 0;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-strong);
    border-color: var(--color-accent);
}

.service-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.service-category {
    --service-category-bg: var(--gradient-accent);
    --service-category-color: var(--color-accent-contrast);
    --service-category-shadow: rgba(47, 25, 4, 0.35);
    --service-category-border: rgba(92, 65, 7, 0.32);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--service-category-bg);
    color: var(--service-category-color);
    padding: 0.35rem 1.05rem;
    border-radius: 18px;
    border: 1px solid var(--service-category-border);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 3px var(--service-category-shadow);
    box-shadow: 0 14px 24px -18px var(--service-category-shadow);
    transition: transform 0.25s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.service-card:hover .service-category,
.service-card:focus-within .service-category {
    transform: translateY(-2px);
    box-shadow: 0 18px 28px -18px var(--service-category-shadow);
    filter: saturate(1.05);
}

.service-category--massagen {
    --service-category-bg: var(--gradient-accent);
    --service-category-color: var(--color-accent-contrast);
    --service-category-shadow: rgba(47, 25, 4, 0.28);
    --service-category-border: rgba(92, 65, 7, 0.35);
}

.service-category--fusspflege {
    --service-category-bg: var(--gradient-footcare);
    --service-category-color: #3A2F28;
    --service-category-shadow: rgba(128, 121, 112, 0.28);
    --service-category-border: rgba(208, 202, 194, 0.6);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
}

.service-category--manikuere {
    --service-category-bg: var(--gradient-manicure);
    --service-category-color: #fff7fb;
    --service-category-shadow: rgba(180, 92, 138, 0.3);
    --service-category-border: rgba(212, 142, 177, 0.55);
}

.service-price {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-accent);
}

.service-title {
    font-size: 1.4rem;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.service-duration {
    color: var(--color-text-soft);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.service-description {
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.service-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.service-cta {
    color: var(--color-accent);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.service-cta:hover {
    color: #5F4206;
}

.text-center {
    text-align: center;
    margin-top: 3rem;
}

.loading {
    text-align: center;
    padding: 4rem 0;
    color: var(--color-text-muted);
}

.loading i {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--color-accent);
}

/* Footer */
.footer {
    background: var(--color-background-alt);
    color: var(--color-accent-contrast);
    padding: 3rem 0 1rem;
}

.footer-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    /* allow footer columns to wrap uniformly */
}

/* Give the logo/brand column a fixed visual presence so there's a clear gap
   between the logo and the following sections on desktop. On small screens
   we keep the flexible wrapping defined in the mobile media query. */
.footer-content .footer-section:first-child {
    flex: 0 0 260px;
    /* fixed-ish column for logo/brand */
    max-width: 260px;
    margin-right: 1.25rem;
    /* explicit gap to the next columns */
}

.footer-section h3,
.footer-section h4 {
    color: var(--color-text-inverse);
    margin-bottom: 1rem;
}

.footer-section p,
.footer-section li {
    color: var(--color-text-inverse-muted);
    margin-bottom: 0.5rem;
}

.footer-section ul {
    list-style: none;
}

/* Make footer columns shrink uniformly and avoid one element wrapping earlier than others */
.footer-section {
    flex: 1 1 180px;
    /* grow, shrink, base width */
    min-width: 140px;
    /* prevent too small columns */
}

.footer-section i {
    margin-right: 0.5rem;
    color: #f7e7a8;
}

/* Keep contact icon + link on a single line in the contact column only */
.footer-section.contact p,
.footer-section.contact li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    margin-bottom: 0.35rem;
}

/* Use an inner grid for footer sections so wrapping produces full rows:
   each "row" will contain as many columns as fit, and when one column
   grows or moves, the next item simply flows into the next grid cell
   below it, preventing uneven stacking. */
.footer-content {
    display: grid;
    grid-template-columns: 260px repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem 2rem;
    /* row-gap / column-gap */
    align-items: start;
}

/* Remove page-level contact background/padding when .contact is used inside footer */
.footer .footer-section.contact {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.footer .footer-section.contact h4 {
    /* keep same heading spacing as other footer sections */
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .footer-section.contact p,
    .footer-section.contact li {
        white-space: normal;
        display: block;
        /* allow wrapping on very small screens */
    }
}

.footer-bottom {
    border-top: 1px solid rgba(255, 245, 251, 0.3);
    padding-top: 1rem;
    text-align: center;
    color: var(--color-text-inverse-muted);
}

/* Impressum links section */
#impressum-links {
    padding: 2.5rem 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(241, 209, 241, 0.04));
}

/* Compact primary impressum section */
.impressum-section {
    padding: 1.5rem 0 1rem;
}

.impressum-links-grid {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    justify-content: center;
}

.impressum-link-item h4 {
    margin-bottom: 0.5rem;
    color: var(--color-accent);
}

.impressum-link-item p a {
    color: var(--color-text-soft);
}

@media (max-width: 768px) {
    .footer-content {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1.25rem;
    }

    /* On small screens the logo column should no longer use the fixed desktop width */
    .footer-content .footer-section:first-child {
        flex: 1 1 auto;
        max-width: none;
        margin-right: 0;
    }
}

/* Ensure footer sticks to bottom on Impressum page using margin-top:auto */
.impressum-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.impressum-page main {
    flex: 1 1 auto;
    padding-top: 6rem;
}

.impressum-page .footer {
    margin-top: auto;
}

/* Footer link hover & focus styles for clear affordance */
.footer a {
    color: inherit;
    /* keep base color; we'll change on hover */
    text-decoration: none;
    cursor: pointer;
}

.footer a:hover,
.footer a:active {
    color: var(--color-accent-contrast);
    text-decoration: underline;
}

.footer a:focus {
    outline: none;
}

.footer a:focus-visible {
    box-shadow: 0 0 0 3px rgba(131, 108, 10, 0.18);
    border-radius: 6px;
    text-decoration: underline;
}

/* Exclude the footer logo link from the generic footer hover/focus styles */
.footer-section h3>a,
.footer-section h3>a:hover,
.footer-section h3>a:focus,
.footer-section h3>a:focus-visible {
    color: var(--color-text-inverse);
    text-decoration: none;
    box-shadow: none;
}