/* Index-only styles extracted from Index.html */

/* Index side-nav: stacked section links (replace single 'GALERIE' label) */
/* Side-nav uses brand-text lines (no custom nav-section-links needed) */
/* tighten for very narrow tall viewports */
@media (max-height:620px){ .nav-section-links { gap:0.55rem; } }

/* Only apply on the Index hero (id="home") to prevent global overrides */
#home.hero-section .hero-content {
    max-width: 100%;
    box-sizing: border-box;
}

/* allow the page hero title to wrap / not be clipped on the index */
#home.hero-section .hero-title {
    overflow: visible;
    white-space: normal;
}

/* ensure hero text container doesn't constrain the heading on index */
#home.hero-section .hero-text {
    max-width: 100%;
}



/* Text container for hero section */
.hero-text-container {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

/* Container for title and logo */
.hero-title-with-logo {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: 100%;
}

/* Hero title styling */
#home.hero-section .hero-title {
    font-size: clamp(2.2rem, 6vw, 4.5rem);
    line-height: 0.95;
    flex: 1;
}

/* Hero logo positioning */
.hero-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hero logo image styling */
.hero-logo .hero-logo-bg img {
    width: 120px;
    height: auto;
    max-width: 120px;
    display: block;
    object-fit: contain;
}

/* On small screens center everything */
@media (max-width: 700px) {
    .hero-text-container {
        flex-direction: column;
        align-items: center;
    }

    .hero-title-with-logo {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        text-align: center;
    }

    #home.hero-section .hero-title {
        font-size: 2.2rem;
    }

    .hero-logo .hero-logo-bg img {
        width: 50px;
        max-width: 50px;
    }
}

/* Medium screens adjustment */
@media (max-width: 900px) and (min-width: 701px) {
    .hero-title-with-logo {
        gap: 1.5rem;
    }

    .hero-logo .hero-logo-bg img {
        width: 100px;
        max-width: 100px;
    }
}

/* Restore normal OS cursor on Index (global stylesheet sets body { cursor: none }) */
html,
body {
    cursor: auto !important;
}

/* Prevent flicker: start hero textual elements hidden until GSAP animates them in */
#home.hero-section .title-line,
#home.hero-section .hero-subtitle,
#home.hero-section .hero-description,
#home.hero-section .hero-scroll {
    opacity: 0;
    transform: translateY(40px);
}

/* Remove dark overlay & blur on Index hero (keep direct image for faster perceived load) */
#home.hero-section::before {
    background: none !important;
    backdrop-filter: none !important;
}

/* Lightweight reveal animation (IntersectionObserver) to replace heavier GSAP ScrollTrigger for index */
.reveal-item {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .6s ease, transform .6s ease;
    will-change: transform, opacity;
}

.reveal-item.in-view {
    opacity: 1;
    transform: none;
}

/* Align hero number same as subpages despite flex logo/text row */
#home.hero-section .hero-number {
    top: 2rem;
    right: 2rem;
}

#home.hero-section {
    position: relative;
}

#home.hero-section .hero-number {
    position: absolute;
    z-index: 4;
}

/* If JS disabled, show them (progressive enhancement) */
noscript #home.hero-section .title-line,
noscript #home.hero-section .hero-subtitle,
noscript #home.hero-section .hero-description,
noscript #home.hero-section .hero-scroll {
    opacity: 1;
    transform: none;
}

/* -----------------------
   Index-only visual fixes
   ----------------------- */

/* Categories (Malerei / Illustration) inline, subtle styling matching subtitle */
#home.hero-section .hero-cats {
    display: inline-flex;
    gap: 0.6rem;
    align-items: center;
}

#home.hero-section .hero-cats .hero-cat-link {
    color: var(--accent-color);
    text-decoration: none;
    font-style: italic;
    font-size: 1rem;
    opacity: 0.98;
    font-weight: 600;
}

#home.hero-section .hero-cats .hero-cat-link:hover {
    text-decoration: underline;
}

#home.hero-section .hero-cats .cat-sep {
    color: var(--accent-color);
    opacity: 0.85;
    margin: 0 0.35rem;
}

/* Quick links as compact CTAs on the right of the text block */
#home.hero-section .hero-quick-links {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.8rem;
}

#home.hero-section .hero-quick-links .quick-link {
    display: inline-block;
    padding: 0.45rem 0.8rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.95);
    border-radius: 2px;
    text-decoration: none;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
}

#home.hero-section .hero-quick-links .quick-link:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

/* Ensure layout works properly on larger viewports */
@media (min-width: 701px) {
    .hero-text-container {
        align-items: flex-start;
    }
}

/* Services grid styling for the Leistungen section */
.services-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:1.25rem; margin-top:1.25rem; align-items:start; grid-auto-rows: 1fr; }
.service-item { background: transparent; padding:1rem; border-radius:6px; display:flex; flex-direction:column; height:100%; min-height:140px; }
.service-body { display:flex; flex-direction:column; flex:1 1 auto; }
.service-item h3 { margin:0 0 .45rem; font-size:1.05rem; }
.service-body p { margin:0 0 .65rem; color:var(--text-light); }
.service-link { margin-top:0; /* link is placed in its own flow; footer alignment handled by flex */ }
/* Placeholder for service items without a visible link so rows align */
.service-link.placeholder { visibility:hidden; height:1.2rem; }

.service-link a { color:var(--accent-color); text-decoration:none; font-weight:600; }
.service-link a:hover { text-decoration:underline; }
.service-contact { grid-column:1 / -1; margin-top:1rem; color:var(--text-light); font-weight:600; }

/* Mobile navigation overlay (Index-only) generalized for all widths */
.mobile-nav {
    display: none;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.92);
    z-index: 1100;
}

.mobile-nav.mobile-open {
    display: flex;
}

.mobile-nav-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 2rem;
    width: 100%;
    max-width: 420px;
}

.mobile-nav-link {
    color: #fff;
    font-size: 1.1rem;
    text-decoration: none;
    padding: .8rem 1rem;
    border-radius: 6px;
    display: block;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
}

.mobile-nav-link+.mobile-nav-link {
    margin-top: .35rem;
}

.mobile-nav-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: #fff;
    font-size: 1.8rem;
    background: transparent;
    border: 0;
    display: block;
    cursor: pointer;
    z-index: 1200;
    padding: 0.5rem;
    line-height: 1;
}

/* When mobile overlay is open, force-hide the desktop side-nav to prevent both being visible */
.side-nav.mobile-forced-closed {
    display: none !important;
    pointer-events: none !important;
}

/* Invertive burger: use difference blend so lines invert against background */
.menu-toggle .menu-line {
    background: #000 !important;
    mix-blend-mode: normal !important;
    transition: background .3s ease;
}

/* Fix for oversized sidebar arrow on Index: match portfolio pages */
.nav-hover-trigger { display: inline-flex; align-items: center; gap: 0.4rem; }
.nav-arrow svg { width: 0.85rem; height: 0.85rem; display: block; fill: none; stroke: currentColor; stroke-width:1.2; opacity: 0.9; transition: transform .18s ease, opacity .18s ease; }
.nav-label:hover .nav-arrow svg { transform: translateX(4px); opacity: 1; }
/* Index: show textual quick-links in the side-nav instead of numbered circles */
.nav-link.text-link {
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    border: 0 !important;
    padding: 0.15rem 0.25rem !important;
    font-size: 0.95rem !important;
    color: var(--text-secondary) !important;
    background: transparent !important;
    justify-content: flex-start !important;
}
/* hide the floating tooltip because the label is visible */
.nav-link.text-link::before { display: none !important; }

/* Ensure hamburger stays white when the mobile menu is open (aria-expanded toggled) */
.menu-toggle[aria-expanded="true"] .menu-line {
    background: #fff !important;
}

/* Position hamburger in top-right on mobile and keep it above the overlay */
@media (max-width:700px) {
    .menu-toggle {
        position: fixed !important;
        top: 2rem !important;
        right: 2rem !important;
        width: 40px;
        height: 40px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        z-index: 1300 !important;
    }

    .mobile-nav-inner {
        padding-top: 4.5rem;
    }
}

/* Tablet Support - Force mobile nav for tablets */
@media (max-width: 1024px) and (min-width: 701px) {
    /* Keep burger menu visible but don't force mobile overlay */
    .menu-toggle {
        position: fixed !important;
        top: 2rem !important;
        right: 2rem !important;
        width: 40px;
        height: 40px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        z-index: 1300 !important;
    }
    
    /* Let sidebar work normally on tablets - don't force hide it */
    
    .mobile-nav-close {
        display: block !important;
    }
}

/* On desktop, fall back to global behaviour (fixed in original stylesheet) */
@media (min-width:701px) {
    .menu-toggle {
        position: fixed;
        top: 2rem;
        right: 2rem;
        z-index: 1300;
    }
}

/* Ensure the desktop side navigation never becomes visible on small screens */
@media (max-width:700px) {
    .side-nav {
        display: none !important;
        pointer-events: none !important;
    }
}

/* About section social quick-links */
.about-social-links {
    margin-top: 1rem;
    display: flex;
    /* sehr enger gap - Icons direkt nebeneinander */
    gap: 0.05rem;
    align-items: center;
}

/* Nudge social links slightly to the left for visual alignment with text */
@media (min-width:701px) {
    .about-social-links { margin-left: -12px; }
}
@media (max-width:700px) {
    .about-social-links { margin-left: -6px; }
}
.about-social-links .social-link {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    /* reduziertes padding für engere Anordnung */
    padding: 0.6rem 0.8rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    color: rgba(255,255,255,0.95);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.0rem;
}
.about-social-links .social-link img {
    display: block;
    width: 56px;
    height: 56px;
}

@media (max-width:700px) {
    .about-social-links .social-link {
        padding: 0.55rem 0.7rem;
    }
    .about-social-links .social-link img {
        width: 48px;
        height: 48px;
    }
}

/* Ensure hamburger stays visible above overlays */