/* Fonts moved to index.html for Klaro consent management */

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --accent: #10b981;
    --bg-light: #f8fafc;
    --text-main: #0f172a;
    --text-muted: #475569;
    --glass: rgba(255, 255, 255, 0.8);
    --shadow-premium: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
.font-display {
    font-family: 'Outfit', sans-serif;
}

/* Glassmorphism Header */
header {
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Carousel Styles */
.carousel-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.carousel-container::-webkit-scrollbar {
    display: none;
}

.carousel-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    position: relative;
}

.carousel-btn {
    opacity: 0;
    transition: opacity 0.3s ease, background 0.3s ease;
}

.service-card:hover .carousel-btn {
    opacity: 1;
}

/* Service Card Layout: Text below card */
.service-card {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Ensure card takes full height of grid cell */
}

.service-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.service-card .card-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    aspect-ratio: 4/5.7;
    /* Visual size increased (+5px vs 5.5) */
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-premium);
}

.service-card:hover .card-image-container img {
    transform: scale(1.05);
}

/* Label Position Fix */
.label-nachher {
    bottom: calc(1.5rem + 25px) !important;
    /* Move up by 25px */
}

/* Custom Buttons */
.btn-primary {
    background-color: #2563eb;
    color: white;
    padding: 1rem 2rem;
    border-radius: 1rem;
    font-weight: 700;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 20px 25px -5px rgba(37, 99, 235, 0.1), 0 8px 10px -6px rgba(37, 99, 235, 0.1);
}

.btn-primary:hover {
    background-color: #1d4ed8;
    transform: translateY(-1px);
}

.btn-whatsapp {
    background-color: #10b981;
    color: white;
    padding: 1rem 2rem;
    border-radius: 1rem;
    font-weight: 700;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 20px 25px -5px rgba(16, 185, 129, 0.1), 0 8px 10px -6px rgba(16, 185, 129, 0.1);
}

.btn-whatsapp:hover {
    background-color: #059669;
    transform: translateY(-1px);
}

/* Service Card Content Padding & Flex */
.service-card .px-2.pt-4 {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Take up remaining space */
}

.service-card .px-2.pt-4 a {
    margin-top: auto;
    margin-bottom: 1.25rem;
    /* Lift it slightly from the absolute bottom */
    justify-content: center;
    /* Centrally align flex content */
    text-align: center;
}

/* Features/USP Grid */
.usp-card {
    padding: 2rem;
    background-color: white;
    border-radius: 1.5rem;
    border: 1px solid #f1f5f9;
    transition: all 0.5s ease;
}

.usp-card:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
    transform: translateY(-0.5rem);
}

/* Marquee Animation */
/* Marquee Container */
.marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Keeping the mask image as it looks nice, unless user explicitly wants it gone. 
       The user provided code didn't have it, but usually people forget it. 
       Actually, strictly following user instruction: "Add this CSS". 
       I will use exactly what they gave me to be safe. */
}

/* Marquee Content - holds the cards */
.marquee-content {
    display: flex;
    gap: 1.5rem;
    animation: marquee 40s linear infinite;
    width: max-content;
    /* Hardware acceleration for Safari/mobile */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Review Card styling */
.review-card {
    flex: 0 0 320px;
    width: 320px;
    background: white;
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    white-space: normal;
    /* Kept from previous to ensure text wraps */
}

.review-stars {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.review-star-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.review-star-icon.active {
    color: #FFD700;
    /* golden yellow */
}

.review-star-icon.inactive {
    color: #cbd5e1;
    /* slate-300 */
}

.review-text {
    color: var(--text-muted);
    margin-bottom: 1rem;
    font-style: italic;
    line-height: 1.625;
}

.review-author {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text-main);
}

.review-location {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
    /* slate-400 */
    font-weight: 400;
}

/* Keyframe animation - using translate3d for GPU acceleration */
@keyframes marquee {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

/* Pause animation on hover */
.marquee-content:hover {
    animation-play-state: paused;
}

/* FAQ Accordion Styling */
details>summary {
    list-style: none;
}

details[open] summary svg {
    transform: rotate(180deg);
}

details {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

details[open] {
    border-color: #2563eb;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.1);
}

/* Section Spacing & Dividers */
section {
    position: relative;
}

/* Custom Scrollbar for non-carousel elements if needed */
::selection {
    background: #2563eb;
    color: white;
}

/* Removed old card overlay gradient as requested */

/* Lightbox Styles */
#lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(10px);
    cursor: zoom-out;
    padding: 2rem;
}

#lightbox.active {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

#lightbox img {
    max-width: 90%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

#lightbox.active img {
    transform: scale(1);
}

#lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: white;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 99px;
    transition: background 0.3s;
}

#lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Uniform Gallery Shadows */
.grid .group {
    border-radius: 1.5rem !important;
    box-shadow: var(--shadow-premium);
}

/* Mobile Optimierung */
@media (max-width: 768px) {
    footer {
        padding-bottom: 5rem;
    }

    h1 {
        font-size: 3.5rem;
        line-height: 1;
    }
}

/* Smooth Image Reveal */
.reveal-image {
    mask-image: linear-gradient(to bottom, black 80%, transparent);
}

/* Legal Content Styling */
.legal-content h1 {
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: #0f172a;
}

@media (min-width: 768px) {
    .legal-content h1 {
        font-size: 3rem;
        line-height: 1;
    }
}

.legal-content h2 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    color: #0f172a;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 0.5rem;
}

.legal-content h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #1e293b;
}

.legal-content p {
    margin-bottom: 1rem;
    line-height: 1.625;
    color: #475569;
}

.legal-content ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
    color: #475569;
}

.legal-content ul li {
    margin-bottom: 0.5rem;
}

.legal-content strong {
    font-weight: 600;
    color: #0f172a;
}