/* =============================================
   HAARWERK — responsive.css
   Loaded LAST on every view. Two jobs:
   1) Styles for the new "Termin buchen" page.
   2) Full responsive hardening across all pages / screens.
   ============================================= */

/* ─────────────────────────────────────────────
   0. GLOBAL OVERFLOW GUARDS
   ───────────────────────────────────────────── */
img, video, iframe { max-width: 100%; }
img { height: auto; }
.form-input, .form-select, .form-textarea { width: 100%; max-width: 100%; }
/* Dark native date/time pickers */
.form-input[type="date"],
.form-input[type="time"] { color-scheme: dark; }


/* ═════════════════════════════════════════════
   1. TERMIN / BOOKING PAGE
   ═════════════════════════════════════════════ */
.booking-section {
    padding: var(--space-xl) 0;
    background: var(--color-black);
}

.booking-container {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 3rem;
    align-items: start;
}

.booking-form-box {
    background: var(--color-black-card);
    border: 1px solid var(--color-black-border);
    padding: 2.5rem;
}

.booking-aside {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: calc(var(--header-height) + 1.5rem);
}

.booking-card {
    background: var(--color-black-card);
    border: 1px solid var(--color-black-border);
    padding: 1.75rem;
}
.booking-card--call { border-color: var(--color-gold-dim); }

.booking-card-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--color-white);
    margin-bottom: 1.1rem;
}

.booking-card-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-white-dim);
    margin-bottom: 1rem;
}

/* Steps */
.booking-steps {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.booking-step {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.booking-step-num {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border: 1px solid var(--color-gold-dim);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-accent);
    font-size: 0.8rem;
    color: var(--color-gold);
}
.booking-step-text {
    font-size: 0.92rem;
    color: var(--color-white-dim);
}

/* Phone link */
.booking-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-accent);
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    color: var(--color-gold);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.booking-phone:hover { color: var(--color-gold-bright); }

/* Hours */
.booking-hours { list-style: none; margin: 0; padding: 0; }
.booking-hours-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-black-border);
    font-size: 0.9rem;
}
.booking-hours-row:last-child { border-bottom: none; }
.booking-hours-row .hours-day  { color: var(--color-white-dim); }
.booking-hours-row .hours-time { color: var(--color-gold); font-family: var(--font-accent); letter-spacing: 0.05em; }
.booking-hours-row .hours-time.closed { color: var(--color-white-dim); }

/* External embed slot */
.booking-embed iframe { width: 100%; min-height: 640px; border: 0; }

/* Error banner (mirrors .form-success) */
.form-error {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.75rem;
    border: 1px solid #6e3b3b;
    background: rgba(120, 50, 50, 0.12);
    color: #e0b4b4;
}
.form-error svg { flex-shrink: 0; margin-top: 2px; }
.form-error p { margin: 0; color: #e0b4b4; font-size: 0.9rem; }


/* ═════════════════════════════════════════════
   2. RESPONSIVE — ALL PAGES
   ═════════════════════════════════════════════ */

/* ── Tablet / small laptop ── */
@media (max-width: 900px) {
    .booking-container { grid-template-columns: 1fr; gap: 2rem; }
    .booking-aside { position: static; }
}

/* ── Trim huge vertical section padding on smaller screens ── */
@media (max-width: 900px) {
    .services-section, .pricelist-section, .about-section, .gallery-preview-section,
    .story-section, .team-section, .values-section, .stats-section, .gallery-section,
    .contact-section, .legal-section, .booking-section, .blog-grid-section,
    .blog-featured, .hours-strip-section, .cta-strip {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .hero-section { min-height: auto; padding: 3.5rem 0; }
}

@media (max-width: 600px) {
    .services-section, .pricelist-section, .about-section, .gallery-preview-section,
    .story-section, .team-section, .values-section, .stats-section, .gallery-section,
    .contact-section, .legal-section, .booking-section, .blog-grid-section,
    .blog-featured, .hours-strip-section, .cta-strip {
        padding-top: 2.75rem;
        padding-bottom: 2.75rem;
    }
}

/* ── Container side padding on phones ── */
@media (max-width: 600px) {
    .container { padding-left: 1.25rem; padding-right: 1.25rem; }
    .booking-form-box { padding: 1.5rem; }
}
@media (max-width: 380px) {
    .container { padding-left: 1rem; padding-right: 1rem; }
}

/* ── Hero actions / CTA buttons stack & go full-width on phones ── */
.hero-actions { flex-wrap: wrap; }
@media (max-width: 480px) {
    .hero-actions,
    .cta-strip-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .hero-actions .btn-primary,
    .hero-actions .btn-ghost,
    .cta-strip-actions .btn-primary,
    .cta-strip-actions .cta-phone {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    .btn-primary, .btn-ghost { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* ── Hero info strip stacks on very small screens ── */
@media (max-width: 480px) {
    .hero-info-strip { flex-direction: column; gap: 0.75rem; }
    .info-sep { display: none; }
}

/* ── Gallery filter tabs wrap instead of overflowing ── */
@media (max-width: 600px) {
    .gallery-filters { flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
    .gallery-filter-btn { font-size: 0.62rem; padding: 0.5rem 0.9rem; }
}

/* ── Galerie grid: keep 2 columns down to phones ── */
@media (max-width: 640px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
}
@media (max-width: 380px) {
    .gallery-grid { grid-template-columns: 1fr; }
}

/* ── Price list polish on small screens ── */
@media (max-width: 480px) {
    .pricelist-row { gap: 0.5rem; padding: 0.9rem 0.15rem; }
    .pricelist-name { font-size: 1rem; white-space: normal; }
    .pricelist-feature { flex-direction: column; align-items: flex-start; text-align: left; }
    .pricelist-feature-price { font-size: 2rem; }
}

/* ── Booking form fields full width on phones ── */
@media (max-width: 600px) {
    .booking-form .form-row--2col { grid-template-columns: 1fr; }
}

/* ── Contact map keeps a sensible height on mobile ── */
@media (max-width: 700px) {
    .contact-map-frame { min-height: 280px; }
}

/* ── Stats: single row reads better as 2x2, already handled; tidy borders ── */
@media (max-width: 640px) {
    .stat-item { border-right: none !important; }
}

/* ── Legal pages: comfortable reading width on phones ── */
@media (max-width: 600px) {
    .legal-row { flex-direction: column; gap: 0.15rem; }
}

/* ── Footer CTA / contact rows wrap cleanly ── */
@media (max-width: 600px) {
    .footer-cta { width: 100%; text-align: center; }
    .footer-legal-nav { flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
}

/* ── Page hero compact on phones ── */
@media (max-width: 600px) {
    .page-hero { padding-top: 3rem; padding-bottom: 3rem; }
    .page-hero--compact { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}

/* ── Tap-target comfort for small icon buttons ── */
@media (max-width: 600px) {
    .hw-lightbox-close, .hw-lightbox-nav { width: 44px; height: 44px; }
}


/* ═════════════════════════════════════════════
   3. MOBILE MENU — always stacked vertically
   (covers an assigned menu AND the fallback markup)
   ═════════════════════════════════════════════ */
.mobile-nav ul,
.mobile-overlay .mobile-nav-list,
.mobile-overlay .nav-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    margin: 0;
    padding: 0;
}
.mobile-nav li {
    width: 100%;
    border-bottom: 1px solid var(--color-black-border);
}
.mobile-nav li a {
    display: block;
    width: 100%;
    padding: 1rem 0;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--color-white);
    text-decoration: none;
    transition: color var(--transition-fast);
}
/* kill the desktop underline animation if the .nav-menu class is reused on mobile */
.mobile-nav li a::after { display: none; }
.mobile-nav li a:hover,
.mobile-nav li.current-menu-item a { color: var(--color-gold); }


/* ═════════════════════════════════════════════
   4. INSTAGRAM MENU ITEM
   ═════════════════════════════════════════════ */
.menu-item-instagram .menu-ig-icon { flex-shrink: 0; }
.nav-menu .menu-item-instagram a span,
.mobile-nav .menu-item-instagram a span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    justify-content: center;
}
/* desktop: the IG item reads like the rest of the nav */
.nav-menu .menu-item-instagram .menu-ig-icon { width: 14px; height: 14px; }
/* mobile: slightly larger icon to match big links */
.mobile-nav .menu-item-instagram .menu-ig-icon { width: 20px; height: 20px; }


/* ═════════════════════════════════════════════
   5. ÜBER UNS — team members stay side by side
   ═════════════════════════════════════════════ */
@media (max-width: 900px) {
    .team-grid { grid-template-columns: 1fr 1fr; max-width: 540px; gap: 1.25rem; }
}
@media (max-width: 480px) {
    .team-grid { gap: 0.75rem; }
    .team-info { padding: 1rem; }
    .team-name { font-size: 0.95rem; }
    .team-role { font-size: 0.6rem; letter-spacing: 0.15em; }
    .team-bio, .team-spec { font-size: 0.74rem; line-height: 1.5; }
}