/* =========================================================================
   Galabau Groß Kreutz – Shared Component Styles
   Genutzt von index.html und allen Leistungs-Unterseiten.
   ========================================================================= */

:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---------- Hero entrance (staggered) ---------- */
.fade-in-up {
    animation: fadeUp 0.9s var(--ease-out) forwards;
    opacity: 0;
    transform: translateY(24px);
}
.delay-200 { animation-delay: 0.15s; }
.delay-400 { animation-delay: 0.30s; }
.delay-600 { animation-delay: 0.45s; }
.delay-800 { animation-delay: 0.60s; }

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

/* ---------- Scroll reveal ---------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
    will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Soft hover cards ---------- */
.soft-card {
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.soft-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px -10px rgba(15,41,30,0.10), 0 28px 64px -24px rgba(15,41,30,0.20);
}

/* ---------- Navigation base + scrolled state ---------- */
#main-nav { transition: background-color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; }
#main-nav.nav-scrolled {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: rgba(15,41,30,0.08);
    box-shadow: 0 10px 30px -18px rgba(15,41,30,0.30);
}
#main-nav.nav-scrolled .nav-logo-main { color: #0f291e; }
#main-nav.nav-scrolled .nav-link { color: #4b5563; }
#main-nav.nav-scrolled .nav-link:hover { color: #0f291e; }
#main-nav.nav-scrolled .nav-burger { color: #0f291e; }

.nav-link { position: relative; }
.nav-link::after {
    content: ''; position: absolute; left: 0; bottom: -5px;
    height: 1px; width: 0; background: currentColor;
    transition: width 0.35s var(--ease-out);
}
.nav-link:hover::after,
.nav-link[aria-expanded="true"]::after { width: 100%; }

/* ---------- Mega menu ---------- */
.mega-panel {
    position: fixed;
    left: 0; right: 0; top: 5rem;            /* unter der h-20 Navbar */
    z-index: 49;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), visibility 0.3s;
    pointer-events: none;
}
.mega-item.mega-open .mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.mega-card {
    transition: background-color 0.25s ease, transform 0.25s var(--ease-out), border-color 0.25s ease;
}
.mega-card:hover { transform: translateY(-2px); }
.mega-chevron { transition: transform 0.3s var(--ease-out); }
.mega-item.mega-open .mega-chevron { transform: rotate(180deg); }

/* ---------- Mobile menu accordion ---------- */
.m-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease-out);
}
.m-accordion.open .m-accordion-body { max-height: 40rem; }
.m-accordion-chevron { transition: transform 0.3s var(--ease-out); }
.m-accordion.open .m-accordion-chevron { transform: rotate(180deg); }

/* ---------- FAQ accordion ---------- */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s var(--ease-out);
}
.faq-item.open .faq-answer { /* max-height via JS (scrollHeight) */ }
.faq-chevron { transition: transform 0.3s var(--ease-out); }
.faq-item.open .faq-chevron { transform: rotate(45deg); }

/* ---------- Interactive option chips (forms) ---------- */
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip .chip-box {
    transition: all 0.25s var(--ease-out);
}
.chip input:checked + .chip-box {
    border-color: #2d6a4f;
    background: rgba(45,106,79,0.06);
    box-shadow: 0 6px 18px -8px rgba(45,106,79,0.35);
}
.chip input:focus-visible + .chip-box {
    outline: 2px solid #2d6a4f;
    outline-offset: 2px;
}
.chip .chip-check { opacity: 0; transform: scale(0.6); transition: all 0.2s var(--ease-out); }
.chip input:checked + .chip-box .chip-check { opacity: 1; transform: scale(1); }

/* ---------- Modal (legal etc.) ---------- */
.modal { opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; }
.modal.active { opacity: 1; visibility: visible; }
.modal-content { transform: scale(0.96); transition: transform 0.3s var(--ease-out); }
.modal.active .modal-content { transform: scale(1); }

/* ---------- Lightbox (gallery) ---------- */
#lightbox { opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; }
#lightbox.active { opacity: 1; visibility: visible; }
#lightbox img { transform: scale(0.97); transition: transform 0.4s var(--ease-out); }
#lightbox.active img { transform: scale(1); }

/* ---------- Preloader ---------- */
#preloader { transition: opacity 0.7s ease-out, visibility 0.7s ease-out; }
#preloader.hide { opacity: 0; visibility: hidden; }

/* ---------- Cookie banner ---------- */
#cookie-banner { transition: transform 0.5s var(--ease-out); }

/* ---------- Toast ---------- */
#toast.toast-show { transform: translateY(0); opacity: 1; }

/* ---------- Gallery grid ---------- */
@media (min-width: 1024px) {
    #gallery-grid { grid-template-rows: auto; height: auto; }
    .span-2-row { grid-row: span 2 / span 2; }
    .span-2-col { grid-column: span 2 / span 2; }
}

/* ---------- Decorative dotted / grid backgrounds (kein Bild) ---------- */
.bg-dots {
    background-image: radial-gradient(rgba(212,163,115,0.18) 1px, transparent 1px);
    background-size: 22px 22px;
}
.bg-grid {
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 48px 48px;
}
.text-gradient {
    background: linear-gradient(120deg, #2d6a4f, #d4a373);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Process timeline connector */
.step-line::before {
    content: '';
    position: absolute;
    left: 1.75rem; top: 3.5rem; bottom: -1.5rem;
    width: 2px;
    background: linear-gradient(to bottom, rgba(212,163,115,0.5), rgba(212,163,115,0.05));
}
.step-line:last-child::before { display: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    .fade-in-up { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* =========================================================================
   Premium-Foto-Komponenten (echte Bilder, KEINE Deko-Gradients/Glows/Gitter)
   ========================================================================= */

/* Kicker mit kurzer Linie statt Glow */
.kicker { display:inline-flex; align-items:center; gap:.7rem; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; }
.kicker::before { content:''; width:32px; height:1px; background:currentColor; opacity:.6; flex:none; }

/* Bild-Rahmen mit dezentem Zoom beim Hover */
.media { overflow:hidden; }
.media img { display:block; width:100%; height:100%; object-fit:cover; transition: transform 1s var(--ease-out); will-change:transform; }
.group:hover .media img, .media:hover img { transform: scale(1.05); }

/* Flacher Scrim über Foto-Heros – nur für Lesbarkeit, kein Verlaufs-Effekt */
.scrim       { position:absolute; inset:0; background:rgba(15,41,30,.50); }
.scrim-soft  { position:absolute; inset:0; background:rgba(15,41,30,.38); }
.scrim-base  { position:absolute; inset:0; box-shadow: inset 0 -160px 120px -90px rgba(15,41,30,.85); }

/* Laufband mit Projektfotos (lebendig, ohne Gitter/Glow) */
.marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.marquee-track { display:flex; gap:14px; width:max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track img { height:230px; width:auto; border-radius:14px; object-fit:cover; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Bildunterschrift / kleine Tafel */
.cap { position:absolute; left:0; bottom:0; padding:1rem 1.25rem; color:#fff; font-weight:600; }

/* Vertikales „Sticky"-Bild in Editorial-Splits */
.sticky-img { position:sticky; top:6rem; }

@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none !important; }
}