/**
 * Tierhilfe Wolfsburg e.V. — Responsive Stylesheet
 * Version: 1.1.0
 * Design Direction A: "Tiergeschichten"
 * Erstellt: 2026-03-01 — Design Agent
 *
 * Mobile-First Approach:
 *   Default (xs):  < 576px   — Mobile, 1-spaltig
 *   sm:  >= 576px  — Small Phones (landscape)
 *   md:  >= 768px  — Tablets
 *   lg:  >= 992px  — Desktop (Hauptumbruch: Nav, Hero)
 *   xl:  >= 1200px — Wide Desktop
 *
 * Wichtige Breakpoints:
 *   < 992px: Hamburger-Nav, Hero gestapelt (Foto oben, Text unten)
 *   < 768px: Tier-Kacheln 1-spaltig, Trust 2-spaltig
 *   < 576px: Buttons gestapelt, Footer 1-spaltig
 */


/* =============================================================================
   XS — DEFAULT MOBILE FIRST BASE (< 576px)
   Gilt für alle Viewports — Overrides folgen für größere Screens
   ============================================================================= */

/* --- Container Override --- */
.container {
    max-width: 100%;
    padding: 0 1.25rem;
    margin: 0 auto;
}

/* --- Topbar --- */
.topbar {
    /* Topbar-Inhalt auf Mobile komprimiert */
    padding: 0.4rem 0;
}

.topbar-inner {
    padding: 0 1.25rem;
    gap: 0.5rem;
}

.topbar-contacts {
    gap: 0.4rem;
}

/* E-Mail auf Mobile ausgeblendet (spart Platz) */
.topbar-email {
    display: none;
}

/* Trennstrich ausgeblendet wenn E-Mail unsichtbar */
.topbar-sep {
    display: none;
}

/* --- Navigation (Mobile: Hamburger + Collapsed Menu) --- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-inner {
    padding: 0 1.25rem;
    min-height: 62px;
}

.site-logo {
    height: 44px;
}

/* Mobile Collapsed Nav */
#primary-menu {
    background-color: var(--color-card);
    border-top: 1px solid var(--color-border);
    padding: 0.75rem 0 1rem;
}

.nav-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

.nav-menu .nav-link {
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border);
    min-height: 52px;
}

/* Kein Underline-Animation auf Mobile */
.nav-menu .nav-link::after {
    display: none;
}

/* Active-Link auf Mobile: linker grüner Streifen */
.nav-menu .nav-link.active {
    border-left: 4px solid var(--color-accent);
    padding-left: calc(1.25rem - 4px);
    color: var(--color-accent-dark);
    background-color: var(--color-accent-light);
}

/* Dropdown auf Mobile: immer sichtbar (kein Hover-Trigger) */
.nav-menu .dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 0 1.5rem;
    margin: 0;
    background-color: transparent;
}

.nav-menu .dropdown-item {
    font-size: 0.9375rem;
    padding: 0.75rem 1.25rem;
    color: var(--color-text-muted);
    border-bottom: 1px solid rgba(232, 228, 223, 0.5);
    min-height: 48px;
}

/* --- Hero (Mobile: Gestapelt — Foto oben, Text darunter) --- */
.hero-layout {
    display: flex;
    flex-direction: column;
    min-height: auto;
}

.hero-photo-block {
    width: 100%;
    height: 45vw;
    min-height: 220px;
    max-height: 380px;
}

.hero-text-block {
    padding: 2.5rem 1.25rem 2.5rem;
    gap: 1.25rem;
}

.hero-title {
    font-size: clamp(1.875rem, 8vw, 2.5rem);
}

.hero-subtitle {
    font-size: 1rem;
}

.hero-actions {
    flex-direction: column;
    align-items: stretch;
}

.hero-actions .btn {
    width: 100%;
    justify-content: center;
}

/* --- Tier-Kacheln (Mobile: 1-spaltig) --- */
.section-tiere {
    padding: var(--section-pad-mob) 0;
}

.tier-kacheln-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

/* Sektions-CTA-Row: Volle Breite auf Mobile */
.section-cta-row .btn {
    width: 100%;
    max-width: 360px;
    justify-content: center;
}

/* --- CTA-Band (Mobile: gestapelt) --- */
.home-cta-band-inner {
    flex-direction: column;
    align-items: flex-start;
}

.home-cta-lead {
    max-width: 100%;
}

.home-cta-actions {
    width: 100%;
}

.home-cta-actions .btn {
    width: 100%;
    justify-content: center;
}

/* --- Trust-Section (Mobile: 2-spaltig) --- */
.section-trust {
    padding: 2.5rem 0;
}

.trust-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.trust-number {
    font-size: 1.5rem;
}

/* --- Happy-End (Mobile: 1-spaltig) --- */
.section-happy-end {
    padding: var(--section-pad-mob) 0;
}

.happy-end-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

/* --- Engagement (Mobile: 1-spaltig) --- */
.section-engagement {
    padding: var(--section-pad-mob) 0;
}

.engagement-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.engagement-card {
    padding: 1.75rem 1.25rem;
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: 1.25rem;
}

.engagement-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
}

.engagement-card > div {
    flex: 1;
}

/* --- Blog-Preview (Mobile: 1-spaltig) --- */
.section-aktuelles {
    padding: var(--section-pad-mob) 0;
}

.blog-preview-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

/* --- Section-Header (Mobile) --- */
.section-header {
    margin-bottom: 2rem;
}

/* --- Footer (Mobile: 1-spaltig) --- */
.site-footer {
    padding-top: 2.5rem;
}

.footer-accent-line {
    margin-bottom: 2.5rem;
}

.footer-inner {
    padding: 0 1.25rem;
}

/* Footer-Bottom */
.footer-bottom {
    margin-top: 2rem;
}

/* --- Buttons Global (Mobile) --- */
.btn {
    padding: 0.75rem 1.25rem;
}


/* =============================================================================
   SM — >= 576px
   Small phones in landscape, larger phones
   ============================================================================= */

@media (min-width: 576px) {

    /* Topbar: E-Mail noch ausgeblendet, aber Trennstrich einblenden wenn nötig */
    .topbar-contacts {
        gap: 0.6rem;
    }

    /* Container */
    .container {
        padding: 0 1.5rem;
    }

    /* Hero Actions nebeneinander wenn Platz */
    .hero-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .hero-actions .btn {
        width: auto;
    }

    /* Tier-Kacheln: 2-spaltig */
    .tier-kacheln-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Engagement: 2-spaltig */
    .engagement-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Engagement-Cards: Vertikal zurück */
    .engagement-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    /* Happy-End: 2-spaltig */
    .happy-end-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Section-CTA-Row: Auto-Breite */
    .section-cta-row .btn {
        width: auto;
    }

    /* CTA-Band: nebeneinander ab sm */
    .home-cta-band-inner {
        flex-direction: row;
        align-items: center;
    }

    .home-cta-lead {
        max-width: 420px;
    }

    .home-cta-actions {
        width: auto;
    }

    .home-cta-actions .btn {
        width: auto;
    }

    /* Footer: 2-spaltig (Bootstrap col-sm-6 greift) */
    .footer-claim {
        max-width: 100%;
    }

}


/* =============================================================================
   MD — >= 768px
   Tablets
   ============================================================================= */

@media (min-width: 768px) {

    /* Topbar: E-Mail sichtbar auf md+ */
    .topbar-email {
        display: inline-flex;
    }

    .topbar-sep {
        display: inline;
    }

    /* Container */
    .container {
        padding: 0 1.5rem;
    }

    /* Hero (Mobile-Modus noch aktiv — lg schaltet auf asymmetrisch) */
    .hero-photo-block {
        height: 50vw;
        max-height: 500px;
    }

    .hero-text-block {
        padding: 3.5rem 2.5rem;
    }

    .hero-title {
        font-size: clamp(2.25rem, 5vw, 2.75rem);
    }

    /* Tier-Kacheln: 2-spaltig auf md */
    .tier-kacheln-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    /* Trust: 4-spaltig auf md */
    .trust-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .trust-number {
        font-size: clamp(1.5rem, 3vw, 2rem);
    }

    /* Happy-End: 2-spaltig */
    .happy-end-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    /* Blog-Preview: 2-spaltig */
    .blog-preview-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    /* Sektions-Abstände */
    .section-tiere,
    .section-happy-end,
    .section-engagement,
    .section-aktuelles {
        padding: 4rem 0;
    }

    /* Engagement: 2-spaltig auf md */
    .engagement-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .engagement-card {
        padding: 2rem 1.75rem;
    }

}


/* =============================================================================
   LG — >= 992px
   Desktop — HAUPT-BREAKPOINT für Navigation und Hero-Layout
   ============================================================================= */

@media (min-width: 992px) {

    /* Container */
    .container {
        max-width: var(--container-max);
        margin: 0 auto;
        padding: 0 var(--container-pad);
    }

    /* --- Navigation: Desktop-Modus --- */

    /* Hamburger ausblenden auf Desktop */
    .nav-toggle {
        display: none;
    }

    /* Bootstrap collapse: immer sichtbar auf Desktop */
    #primary-menu {
        display: flex !important;
        background: transparent;
        border-top: none;
        padding: 0;
    }

    .nav-menu {
        flex-direction: row;
        align-items: center;
        gap: 0.25rem;
        width: auto;
    }

    .nav-menu .nav-link {
        padding: 0.625rem 0.875rem;
        font-size: 0.9375rem;
        border-radius: var(--radius-md);
        border-bottom: none;
        min-height: 44px;
    }

    /* Underline-Animation auf Desktop reaktivieren */
    .nav-menu .nav-link::after {
        display: block;
    }

    /* Active-State: kein linker Rand auf Desktop */
    .nav-menu .nav-link.active {
        border-left: none;
        padding-left: 0.875rem;
        background-color: transparent;
    }

    /* Dropdown auf Desktop: Standard Bootstrap-Verhalten */
    .nav-menu .dropdown-menu {
        position: absolute;
        box-shadow: var(--shadow-lg);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: 0.5rem;
        background-color: var(--color-card);
    }

    .nav-menu .dropdown-item {
        border-bottom: none;
        border-radius: var(--radius-md);
        padding: 0.625rem 1rem;
        font-size: 0.9rem;
    }

    /* --- Hero: Asymmetrisches Desktop-Layout --- */
    .hero-layout {
        display: grid;
        grid-template-columns: 55fr 45fr;
        flex-direction: unset;
        min-height: max(80vh, 560px);
    }

    .hero-photo-block {
        height: auto;
        max-height: none;
        min-height: max(80vh, 560px);
    }

    .hero-text-block {
        padding: var(--space-9) var(--space-7) var(--space-9) var(--space-8);
        gap: var(--space-5);
    }

    .hero-title {
        font-size: clamp(2.5rem, 3.5vw, 3.25rem);
    }

    .hero-subtitle {
        font-size: 1.0625rem;
    }

    .hero-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .hero-actions .btn {
        width: auto;
    }

    /* --- Tier-Kacheln: 3-spaltig auf Desktop --- */
    .tier-kacheln-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
    }

    /* 4 Tiere: 4-spaltig */
    .tier-kacheln-grid:has(> :nth-child(4)) {
        grid-template-columns: repeat(4, 1fr);
    }

    /* --- Sektions-Abstände: Volle Desktop-Werte --- */
    .section-tiere,
    .section-happy-end,
    .section-engagement,
    .section-aktuelles {
        padding: var(--section-pad-y) 0;
    }

    .section-trust {
        padding: var(--space-8) 0;
    }

    /* --- Happy-End: 3-spaltig auf Desktop --- */
    .happy-end-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
    }

    /* --- Engagement: 4-spaltig auf Desktop --- */
    .engagement-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-5);
    }

    .engagement-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: var(--space-6) var(--space-5);
    }

    /* --- Blog-Preview: 3-spaltig auf Desktop --- */
    .blog-preview-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
    }

    /* --- Footer: 4-spaltig (Bootstrap col-lg-3 greift) --- */
    .footer-inner {
        padding: 0 var(--container-pad);
    }

    .footer-claim {
        max-width: 28ch;
    }

    /* Section-Header Ausrichtung */
    .section-header {
        margin-bottom: var(--space-7);
    }

}


/* =============================================================================
   XL — >= 1200px
   Wide Desktop
   ============================================================================= */

@media (min-width: 1200px) {

    /* Container ist nun max-width begrenzt */
    .container {
        max-width: var(--container-max);
    }

    /* Hero: Noch größerer Text */
    .hero-title {
        font-size: 3.5rem;
    }

    .hero-subtitle {
        font-size: 1.125rem;
    }

    /* Tier-Kacheln: 4-spaltig wenn 4 Tiere vorhanden */
    .tier-kacheln-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Trust-Numbers größer */
    .trust-number {
        font-size: 2rem;
    }

    /* Section-Titel größer */
    .section-title {
        font-size: 2.5rem;
    }

    /* Hero Text größer */
    .hero-badge {
        font-size: 0.9375rem;
    }

}


/* =============================================================================
   TIER-FILTER + DETAILSEITE — RESPONSIVE
   ============================================================================= */

/* XS: Filter-Labels über den Buttons */
.filter-group__label {
    min-width: 100%;
}

/* XS: Detail-Layout einspaltig */
.tier-detail-layout {
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

.tier-detail-gallery {
    position: static;
}

.tier-detail-cta .btn {
    min-width: 0;
    flex: 1 1 100%;
}

@media (min-width: 576px) {
    .filter-group__label {
        min-width: 100px;
    }

    .tier-detail-cta .btn {
        flex: 1 1 auto;
    }
}

@media (min-width: 768px) {
    .filter-group__label {
        min-width: 120px;
    }

    .tier-detail-layout {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-7);
    }

    .tier-detail-gallery {
        position: sticky;
        top: calc(80px + var(--space-5));
    }

    .tier-thumb-btn {
        width: 90px;
        height: 68px;
    }
}

@media (min-width: 992px) {
    .tier-detail-layout {
        gap: var(--space-8);
    }
}


/* =============================================================================
   PRINT STYLES
   Minimale Print-Styles — Navigation und Topbar ausblenden
   ============================================================================= */

@media print {

    .topbar,
    .site-header,
    .nav-toggle,
    .hero-actions,
    .section-cta-row,
    .home-cta-band,
    .section-engagement,
    .site-footer {
        display: none !important;
    }

    .hero-layout {
        display: block;
    }

    .hero-photo-block {
        max-height: 300px;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #555;
    }

}

/* ============================================
   LIGHTBOX – Responsive
   ============================================ */

@media (max-width: 767px) {
    .lightbox-prev {
        left: 0.5rem;
        width: 40px;
        height: 40px;
    }

    .lightbox-next {
        right: 0.5rem;
        width: 40px;
        height: 40px;
    }

    .lightbox-close {
        top: 0.5rem;
        right: 0.5rem;
    }

    .lightbox-img {
        max-width: 95vw;
        max-height: 80vh;
    }
}

/* ============================================
   FORM WIZARD – Responsive
   Version: 1.0.0 – Frontend Agent 2026-03-06
   ============================================ */

/* --- Large Desktop (>= 1200px) --- */
@media (min-width: 1200px) {
    .form-wizard {
        max-width: 860px;
        margin: 0 auto;
    }
}

/* --- Tablet (< 992px) --- */
@media (max-width: 991px) {

    .form-wizard-steps-indicator {
        gap: 0.25rem;
    }

    .wizard-step-dot {
        width: 28px;
        height: 28px;
        font-size: 0.6875rem;
    }

    .form-wizard-experience-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3, 0.75rem);
    }

    .form-wizard-summary__row dt {
        min-width: 100px;
    }
}

/* --- Mobile (< 768px) --- */
@media (max-width: 767px) {

    .form-wizard-step-title {
        font-size: 1.25rem;
    }

    .form-wizard-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-2, 0.5rem);
    }

    .form-wizard-nav .btn {
        flex: 1 1 auto;
        min-width: 120px;
        justify-content: center;
        text-align: center;
    }

    .form-wizard-nav__step-label {
        order: -1;
        width: 100%;
        text-align: center;
    }

    .form-wizard-summary__row {
        flex-direction: column;
        gap: var(--space-1, 0.25rem);
    }

    .form-wizard-summary__row dt {
        min-width: unset;
    }

    .form-wizard-info {
        flex-direction: column;
        gap: var(--space-2, 0.5rem);
    }
}

/* --- Small Mobile (< 576px) --- */
@media (max-width: 575px) {

    .form-wizard-steps-indicator {
        gap: 0.2rem;
    }

    .wizard-step-dot {
        width: 26px;
        height: 26px;
        font-size: 0.625rem;
    }

    .form-wizard-nav .btn {
        width: 100%;
    }

    .upload-thumb {
        width: 64px;
    }

    .upload-thumb__img {
        width: 64px;
        height: 48px;
    }

    .form-radio-group {
        flex-direction: column;
        gap: var(--space-2, 0.5rem);
    }
}