/* FAQ, animations, responsive, language switcher */

/* ===================== FAQ ===================== */
.faq {
    padding: 7rem 2.5rem 5rem;
    background: var(--cream);
}
.faq-inner { max-width: 800px; margin: 0 auto; }
.faq-header { text-align: center; margin-bottom: 3rem; }
.faq-header h2 { font-size: clamp(2rem, 3.5vw, 2.6rem); margin-bottom: 0.5rem; }
.faq-header p { color: var(--text-muted); font-size: 1.05rem; }
.faq-item {
    border-bottom: 1px solid var(--border);
    padding: 1.5rem 0;
}
.faq-question {
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; gap: 1rem;
    background: none; border: none; width: 100%; text-align: left;
    font-family: 'DM Serif Display', serif; font-size: 1.1rem;
    color: var(--text); padding: 0;
}
.faq-question:hover { color: var(--red); }
.faq-toggle {
    width: 28px; height: 28px; min-width: 28px; border-radius: 50%;
    background: var(--red-light); display: flex; align-items: center; justify-content: center;
    color: var(--red); font-size: 1.2rem; font-weight: 300;
    transition: transform 0.3s;
}
.faq-item.open .faq-toggle { transform: rotate(45deg); }
.faq-answer {
    max-height: 0; overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    font-size: 0.95rem; color: var(--text-muted); line-height: 1.7;
}
.faq-item.open .faq-answer {
    max-height: 300px; padding-top: 1rem;
}

/* ===================== ANIMATIONS ===================== */
.anim { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.anim.visible { opacity: 1; transform: translateY(0); }
.stagger > * { transition-delay: calc(var(--i, 0) * 100ms); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
    .bento { grid-template-columns: 1fr 1fr; }
    .bento-card.featured { grid-column: 1 / -1; grid-row: auto; }
    .flotte-grid { grid-template-columns: 1fr; gap: 3rem; }
    .flotte-features { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr; }
    .kontakt-grid { grid-template-columns: 1fr; }
    .mq-card { width: 300px; }
}
/* Language Switcher — Flag Buttons */
.lang-switcher { display: flex; gap: 6px; align-items: center; margin-left: 0.5rem; }
.lang-btn {
    background: transparent; border: 2px solid transparent;
    padding: 2px; border-radius: 50%; cursor: pointer;
    transition: all 0.25s ease; display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; overflow: hidden;
    opacity: 0.55; filter: grayscale(30%);
}
.lang-btn:hover { opacity: 0.85; filter: grayscale(0%); border-color: var(--border); transform: scale(1.1); }
.lang-btn.active { opacity: 1; filter: grayscale(0%); border-color: var(--red); box-shadow: 0 0 0 2px rgba(196,30,42,0.2); transform: scale(1.1); }
.lang-btn svg, .lang-btn img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; pointer-events: none; }

@media (max-width: 768px) {
    .nav-links { display: none; }
    .hamburger { display: flex; flex-direction: column; }
    .nav-links.open {
        display: flex; flex-direction: column;
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--cream); padding: 2rem; gap: 1.5rem;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    }
    .hero { min-height: 80vh; }
    .hero h1 { font-size: 2.4rem; }
    .bento { grid-template-columns: 1fr; }
    .bento-card.featured { grid-column: auto; grid-row: auto; min-height: 340px; }
    .bf-row { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr; }
    .trust-inner { justify-content: center; }
    .mq-card { width: 280px; }
    .tm-stats { gap: 2rem; }
    .flotte-features { grid-template-columns: 1fr; }
    .flotte-tabs { gap: 0.4rem; }
    .flotte-tab { padding: 0.6rem 1.1rem; font-size: 0.82rem; }
    .flotte-gallery-wide { grid-template-columns: repeat(2, 1fr); }
    .flotte-vehicle-meta { gap: 1rem; }
}