/* ============================================
 * RESPONSIVE MOBILE STYLES - glocalSpirit
 * Mobile-First Approach
 * Konsolidiert: tablets.css, smallscreens.css, 
 *               spenden-mobile.css, team-mobile.css, jobs-mobile-v2.css
 * ============================================ */

/* ============================================
 * SECTION 1: SMALL TABLETS & MOBILE (≤900px)
 * iPad Portrait (768px) and smaller get vertical card layout
 * iPad Landscape (1024px+) and Desktop get SVG with cards side-by-side
 * ============================================ */

@media screen and (max-width: 900px) {
    /* Burger Menu Button */
    .menu-toggle-button {
        display: block;
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 1000;
        background: transparent;
        border: none;
        padding: 0.5rem;
        cursor: pointer;
    }

    .menu-toggle-button .burger-icon,
    .menu-toggle-button .close-icon {
        width: 2rem;
        height: 2rem;
    }

    /* Roadmap Optimizations - Hide SVG on tablets */
    .roadmap {
        padding-bottom: 200px;
    }

    .roadmap svg,
    .roadmap_svg {
        display: none !important; /* Hide SVG completely on tablets */
    }

    .roadmap .cards__wrapper {
        position: relative !important; /* Override absolute positioning */
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }

    .roadmap .card {
        position: relative !important; /* Override absolute positioning */
        top: auto !important;
        left: auto !important;
        transform: none !important;
        opacity: 1 !important; /* Ensure cards are visible */
        margin-bottom: 2rem;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Card Toggle Behavior */
    .card {
        transform: translate(0px);
        width: clamp(29ch, 55vw, 200ch);
        height: 3.5rem;
        padding-top: 10px;
        overflow: hidden;
        display: flex;
        gap: 1rem;
        justify-content: flex-start;
        transition: height 1s ease;
        position: relative;
    }

    .card div {
        display: flex;
        flex-flow: column;
        justify-content: space-between;
    }

    .card div h4 {
        font-weight: 450;
        font-size: 0.6rem;
    }

    .card h3 {
        font-size: clamp(1rem, 1.2vw, 1.5rem);
        white-space: nowrap;
    }

    .card p {
        font-weight: 300;
        font-size: clamp(0.7rem, 1vw, 1rem);
    }

    /* Expanded state */
    .card.expanded {
        height: fit-content;
    }

    /* Toggle indicator */
    .card::after {
        content: "+";
        position: absolute;
        right: 10px;
        top: 0.5rem;
        font-size: 1.2rem;
        font-weight: bold;
        cursor: pointer;
    }

    .card.expanded::after {
        top: 0.5rem;
        content: "-";
    }

    .cards__wrapper {
        position: relative;
        flex-flow: column nowrap;
        justify-content: flex-start;
        gap: 1rem;
    }

    /* Footer */
    .footer__content h2 {
        margin-top: 15%;
    }

    /* Forms */
    .forms__content {
        flex-flow: column nowrap;
    }
}

/* ============================================
 * SECTION 2: SMALL SCREENS & MOBILE (≤700px)
 * Navigation, Hero, About
 * ============================================ */

@media screen and (max-width: 700px) {
    /* Hide nav by default and show when burger button expanded */
    .header__nav {
        display: none;
    }

    .menu-toggle-button[aria-expanded="true"] ~ .header__nav {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        width: 280px;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        height: 100dvh;
        max-height: 100vh;
        max-height: calc(var(--vh, 1vh) * 100);
        max-height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background-color: rgba(247, 247, 247, 0.025);
        padding: 1rem;
        z-index: 999;
        transform: translateX(0);
        transition: transform 0.5s ease-in-out;
        justify-content: flex-start;
        gap: 1.5rem;
    }

    /* Hero */
    .hero {
        height: calc(90vh - 5rem);
        height: calc(var(--vh, 1vh) * 90 - 5rem);
        height: calc(90dvh - 5rem);
        margin-top: 5rem;
        gap: 5rem;
    }

    .hero .hero__image {
        width: 60vw;
    }

    /* About 1st content */
    .about__wrapper {
        display: flex;
        flex-flow: column nowrap;
        gap: 1rem;
    }

    .about__wrapper .about__description {
        text-align: center;
        padding: 2rem;
        width: fit-content;
    }

    .about .about__wrapper--glasmorphism {
        margin-top: 4rem;
        width: 80%;
    }

    .about .about__scroller {
        width: 100%;
        overflow: hidden;
        -webkit-mask: linear-gradient(transparent 0%, white 20%, white 60%, transparent);
        mask: linear-gradient(to right, transparent 20%, white 50%, white 50%, transparent 80%);
    }

    .about__scroller--inner {
        display: flex;
        flex-flow: row nowrap;
    }

    .about__scroller--inner img {
        width: 100px;
        height: 100%;
    }

    @keyframes scroll {
        to {
            transform: translateX(-50%);
        }
    }

    /* About 2nd content */
    .about__content {
        margin: 0;
        padding: 1rem 0;
    }

    .about__content .about__item {
        flex-flow: column nowrap;
        text-align: center;
    }

    .about__content .about__item .about__item-text {
        gap: 1rem;
    }

    /* Buttons position */
    .wrapper__content .btn__slider {
        top: 70%;
    }

    /* Mobile navigation styling */
    .header__nav .header__links {
        flex-flow: column nowrap;
        gap: 1.5rem;
        padding: 0.5rem 0;
        list-style: none;
        margin: 0;
        width: 100%;
    }

    .header__nav .header__links .header__link {
        font-size: clamp(1.2rem, 1.5vw, 1.5rem);
        font-weight: 400;
        letter-spacing: 3px;
        color: rgb(var(--secondary-links-color));
        filter: drop-shadow(0 0 4.8px rgb(var(--secondary-links-color)));
        text-align: center;
        width: 100%;
        display: block;
        margin: 0 auto;
        padding: 0.5rem;
    }

    /* Navigation-Link-Styling auch auf rechte Sektion anwenden */
    .header__nav .header__right-section {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding: 0.5rem;
        width: 100%;
        margin-top: auto;
    }

    .header__nav .header__right-section > * {
        width: 100%;
        text-align: center;
    }

    .header__nav .header__right-section .header__link,
    .header__nav .header__beta-link {
        font-size: clamp(1.2rem, 1.5vw, 1.5rem);
        padding: 0.5rem;
        margin: 0;
    }

    .header__beta-tester .header__beta-link {
        font-size: 1.4rem !important;
    }

    .header__language-switcher .language-select {
        width: auto;
        font-size: 1.2rem !important;
        padding: 0.5rem !important;
        text-align: center;
    }

    .footer__content h2 {
        margin-top: 25%;
    }

    /* Logo im Mobile-Menü */
    .header__nav .header__logo {
        height: 48px;
        min-height: 48px;
        padding: 4px 0;
    }

    .header__nav .header__logo img {
        height: 100%;
        width: auto;
        max-height: 40px;
    }

    /* Verbesserte Scrollbar für das Mobile-Menü */
    .header__nav {
        scrollbar-width: thin;
        scrollbar-color: rgba(var(--secondary-links-color), 0.3) transparent;
    }

    .header__nav::-webkit-scrollbar {
        width: 6px;
    }

    .header__nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .header__nav::-webkit-scrollbar-thumb {
        background-color: rgba(var(--secondary-links-color), 0.3);
        border-radius: 3px;
    }

    /* Mobile-specific roadmap */
    .roadmap {
        padding-bottom: 100px;
    }

    .roadmap h2 {
        font-size: clamp(2rem, 10vw, 4rem);
        text-align: center;
        padding: 1rem;
    }

    .roadmap svg {
        margin: 0 auto;
        width: 90vw;
        height: auto;
        min-width: unset;
    }

    .roadmap__content {
        padding: 0 1rem;
        overflow-x: hidden;
    }

    .cards__wrapper {
        width: 100%;
        padding: 0 1rem;
        box-sizing: border-box;
    }
}

/* ============================================
 * SECTION 3: MOBILE CAROUSEL BASE (≤699px)
 * Shared pattern für Spenden, Team, Jobs
 * ============================================ */

@media screen and (max-width: 699px) {
    /* Override ALLE globalen Styles für Carousels */
    body,
    html {
        overflow: visible !important;
        overflow-x: hidden !important;
    }

    /* ========================================
     * SHARED: Swipe Indicators
     * ======================================== */
    .swipe-indicators {
        display: flex !important;
        gap: 8px !important;
        justify-content: center !important;
        padding: 1rem 0 0.5rem !important;
        margin: -1rem 0 1rem 0 !important;
        list-style: none !important;
    }

    .swipe-dot {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.3) !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
        border: none !important;
        padding: 0 !important;
    }

    .swipe-dot.active {
        background: rgba(255, 200, 87, 0.9) !important;
        width: 24px !important;
        border-radius: 4px !important;
        transform: scale(1.3) !important;
    }

    /* ========================================
     * SHARED: Touch Feedback
     * ======================================== */
    .donate-button,
    .frequency-btn,
    .apply-button {
        transition: all 0.2s ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .donate-button:active,
    .frequency-btn:active,
    .apply-button:active {
        transform: scale(0.95) !important;
        opacity: 0.8 !important;
    }

    /* ========================================
     * PAGE: SPENDEN (Donations)
     * ======================================== */
    .donate-screen,
    .donate-screen .hero,
    .donate-screen section {
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .donate-screen {
        min-height: 100vh !important;
    }

    .donate-screen .hero {
        padding: 5rem 0 3rem !important;
        gap: 2rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Donation Carousel */
    .donation-options {
        display: flex !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        overflow-x: scroll !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        width: 100vw !important;
        max-width: 100vw !important;
        gap: 1.5rem !important;
        padding: 1rem 1.5rem 2rem 1.5rem !important;
        margin-left: -1.5rem !important;
        margin-right: -1.5rem !important;
        min-height: 600px !important;
        height: auto !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .donation-options::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Donation Cards */
    .donation-card {
        flex: 0 0 calc(100vw - 3rem) !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        width: calc(100vw - 3rem) !important;
        max-width: 380px !important;
        min-width: 280px !important;
        height: auto !important;
        min-height: 550px !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
        padding: 2rem 1.5rem !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .package-badge {
        top: 15px !important;
        right: 15px !important;
        padding: 0.4rem 0.75rem !important;
        font-size: 0.7rem !important;
    }

    .card-title {
        margin-bottom: 0.5rem !important;
    }

    .custom-amount-container {
        gap: 1.25rem !important;
        margin: 0.75rem 0 !important;
    }

    .amount-input {
        font-size: 1.5rem !important;
        padding: 1rem 1rem 1rem 2.5rem !important;
    }

    .currency-symbol {
        left: 1rem !important;
        font-size: 1.5rem !important;
    }

    .frequency-btn {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
    }

    .package-features li {
        font-size: 0.9rem !important;
        margin-bottom: 0.75rem !important;
    }

    .donate-button {
        padding: 1rem 1.5rem !important;
        font-size: 0.95rem !important;
        position: relative !important;
    }

    .donate-button:active::after {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border-radius: inherit !important;
        pointer-events: none !important;
    }

    .frequency-btn:active {
        background: rgba(255, 200, 87, 0.3) !important;
    }

    .donation-info {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        max-width: 400px !important;
        margin-top: 2rem !important;
    }

    .info-card {
        padding: 1.25rem !important;
    }

    .info-card h3 {
        font-size: 1.1rem !important;
    }

    .info-card p {
        font-size: 0.9rem !important;
    }

    .message-container {
        left: 10px !important;
        right: 10px !important;
        top: 10px !important;
        max-width: none !important;
    }

    /* ========================================
     * PAGE: TEAM
     * ======================================== */
    
    /* Leadership Section - bleibt statisch */
    .leadership-section {
        width: 100% !important;
        padding: 2rem 1rem !important;
        margin-bottom: 2rem !important;
    }

    .leadership-triangle {
        width: min(400px, 90vw) !important;
        height: min(346px, 78vw) !important;
        margin: 0 auto !important;
        background: linear-gradient(
            135deg,
            rgba(139, 123, 191, 0.25) 0%,
            rgba(255, 200, 87, 0.2) 100%
        ) !important;
        backdrop-filter: blur(20px) !important;
        border: 2px solid rgba(255, 200, 87, 0.3) !important;
        border-radius: 24px !important;
        padding: 1.5rem !important;
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.3),
            0 0 60px rgba(255, 200, 87, 0.3) !important;
    }

    .triangle-shape {
        width: 75% !important;
        height: 75% !important;
    }

    .leader-card {
        gap: 0.35rem !important;
    }

    .leader-card .hexagon-avatar {
        width: 70px !important;
        height: 70px !important;
    }

    .leader-card .member-name {
        font-size: 0.9rem !important;
    }

    .leader-card .member-role {
        font-size: 0.75rem !important;
    }

    .triangle-label {
        bottom: 0.75rem !important;
    }

    /* Team Container als Carousel */
    .team-container {
        display: flex !important;
        overflow-x: scroll !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        width: 100vw !important;
        max-width: 100vw !important;
        gap: 1.5rem !important;
        padding: 2rem 1.5rem !important;
        margin: 0 calc(-50vw + 50%) !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .team-container::-webkit-scrollbar {
        display: none !important;
    }

    /* Team Member Cards */
    .team-member {
        flex: 0 0 280px !important;
        min-width: 280px !important;
        max-width: 320px !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
        height: auto !important;
        min-height: 420px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 2rem 1.5rem !important;
        background: linear-gradient(
            135deg,
            rgba(139, 123, 191, 0.2) 0%,
            rgba(255, 200, 87, 0.15) 100%
        ) !important;
        backdrop-filter: blur(20px) !important;
        border: 2px solid rgba(255, 200, 87, 0.2) !important;
        border-radius: 24px !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
    }

    .team-member .hexagon-avatar {
        width: 120px !important;
        height: 120px !important;
        margin-bottom: 1.5rem !important;
    }

    .team-member .member-info {
        text-align: center !important;
        width: 100% !important;
    }

    .team-member .member-name {
        font-size: 1.3rem !important;
        margin-bottom: 0.5rem !important;
    }

    .team-member .member-role {
        font-size: 0.95rem !important;
        margin-bottom: 1rem !important;
        color: rgba(255, 200, 87, 0.9) !important;
    }

    .team-member .member-bio {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        color: rgba(255, 255, 255, 0.8) !important;
    }

    /* ========================================
     * PAGE: JOBS
     * ======================================== */
    
    .jobs-screen,
    .jobs-screen .hero,
    .jobs-screen section {
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .jobs-screen {
        min-height: 100vh !important;
    }

    .jobs-screen .hero {
        padding: 5rem 0 3rem !important;
        gap: 2rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Jobs Carousel */
    .job-opportunities {
        display: flex !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        overflow-x: scroll !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        width: 100vw !important;
        max-width: 100vw !important;
        gap: 1.5rem !important;
        padding: 1rem 1.5rem 2rem 1.5rem !important;
        margin: 0 calc(-50vw + 50%) !important;
    }

    .job-opportunities::-webkit-scrollbar {
        display: none !important;
    }

    /* Job Cards */
    .job-card {
        flex: 0 0 85vw !important;
        min-width: 85vw !important;
        max-width: 85vw !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
        height: auto !important;
        min-height: 500px !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 2rem 1.5rem !important;
        background: linear-gradient(
            135deg,
            rgba(139, 123, 191, 0.2) 0%,
            rgba(255, 200, 87, 0.15) 100%
        ) !important;
        backdrop-filter: blur(20px) !important;
        border: 2px solid rgba(255, 200, 87, 0.2) !important;
        border-radius: 24px !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
        position: relative !important;
        overflow: visible !important;
    }

    .job-card .job-header {
        margin-bottom: 1.5rem !important;
    }

    .job-card .job-title {
        font-size: 1.4rem !important;
        margin-bottom: 0.5rem !important;
    }

    .job-card .job-type {
        font-size: 0.85rem !important;
        padding: 0.4rem 0.75rem !important;
    }

    .job-card .job-description {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1.5rem !important;
    }

    .job-card .job-requirements {
        margin-bottom: 1.5rem !important;
    }

    .job-card .job-requirements li {
        font-size: 0.85rem !important;
        margin-bottom: 0.5rem !important;
    }

    .apply-button {
        padding: 1rem 1.5rem !important;
        font-size: 0.95rem !important;
        width: 100% !important;
        margin-top: auto !important;
    }
}

/* ============================================
 * MOBILE-FIRST ENHANCEMENTS
 * Zusätzliche Mobile-Optimierungen
 * ============================================ */

/* iOS Auto-Zoom Prevention: Handled globally in safari-fixes.css */
/* Removed redundant font-size: 16px declaration to avoid specificity conflicts */

/* Optimierte Touch-Targets (mindestens 44x44px für iOS) */
@media screen and (max-width: 699px) {
    button,
    a,
    .clickable,
    .swipe-dot {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Safe Area Insets für iPhone X+ */
@supports (padding: max(0px)) {
    @media screen and (max-width: 699px) {
        .header__nav {
            padding-left: max(1rem, env(safe-area-inset-left));
            padding-right: max(1rem, env(safe-area-inset-right));
            padding-bottom: max(1rem, env(safe-area-inset-bottom));
        }

        .donation-options,
        .job-opportunities,
        .team-container {
            padding-left: max(1.5rem, env(safe-area-inset-left));
            padding-right: max(1.5rem, env(safe-area-inset-right));
        }
    }
}

/* Performance: GPU-Beschleunigung für Animationen */
@media screen and (max-width: 699px) {
    .donation-card,
    .job-card,
    .team-member,
    .swipe-dot {
        transform: translateZ(0);
        will-change: transform;
    }

    /* Reduziere Animationen wenn "Reduce Motion" aktiviert */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}