/* ============================================================
   TITO.TRADE – RESPONSIVE
   Bewusst gestaltet – Mobile ist ein eigenes Layout,
   kein zusammengeschobenes Desktop-Layout.
   Breakpoints: 320 / 375 / 390 / 430 / 768 / 1024 / 1280 / 1440 / 1920
   ============================================================ */

/* --- ≤ 1024px: Tablet --- */
@media (max-width: 1024px) {
    .bento { grid-template-columns: repeat(2, 1fr); }
    .project-card.size-large, .project-card.size-wide { grid-column: span 2; }
    .skills-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; }
    .about-grid { grid-template-columns: 1fr; gap: 2rem; }
    .affiliate-wrap { grid-template-columns: 1fr; gap: 2.5rem; }
    .repo-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-row { grid-template-columns: repeat(3, 1fr); }
}

/* --- ≤ 860px: Mobile Navigation übernimmt --- */
@media (max-width: 860px) {
    .nav-links { display: none; }
    .nav-burger { display: block; }
    .lang-toggle.nav-lang { display: none; } /* im overlay menu sichtbar */
    .section-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .stats-row { gap: 1.25rem 1rem; }
}

/* --- ≤ 640px: Smartphone --- */
@media (max-width: 640px) {
    :root { --spacing-section: clamp(4.5rem, 14vw, 6rem); }

    /* Hero mobil bewusst gestaltet */
    .hero { min-height: 100svh; align-items: center; padding-block: 6rem 3rem; }
    .hero-title { font-size: clamp(4rem, 22vw, 6rem); }
    .hero-actions { flex-direction: column; align-items: stretch; max-width: 360px; }
    .hero-actions .btn { justify-content: center; padding-block: 1rem; } /* 48px Touch-Targets */
    .hero-scroll-hint { display: none; }
    .hero-glow { filter: blur(70px); opacity: 0.8; } /* weniger Bewegung, ruhiger */

    .bento { grid-template-columns: 1fr; }
    .project-card.size-large, .project-card.size-wide, .project-card.size-normal {
        grid-column: span 1;
        min-height: auto;
    }
    .project-card { padding: 1.25rem; gap: 0.75rem; }
    .project-links { flex-wrap: wrap; }

    .repo-grid { grid-template-columns: 1fr; }
    .repo-card.is-loading { min-height: 120px; }

    .skills-grid { grid-template-columns: 1fr; gap: 2rem; }
    .stats-row { grid-template-columns: 1fr; gap: 1.5rem; }
    .stat { padding-left: 1rem; }

    .about-meta-row { flex-direction: column; gap: 0.15rem; }
    .about-meta-label { flex-basis: auto; }

    .triad { gap: 0.6rem; }
    .triad-item { padding: 0.8rem 1rem; font-size: 0.95rem; }

    .contact-links { flex-direction: column; align-items: stretch; max-width: 360px; }
    .contact-link { justify-content: center; }

    .footer-inner { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
}

/* --- kleiner Screens 320px --- */
@media (max-width: 360px) {
    .btn { padding-inline: 1.1rem; }
    .triad-item { font-size: 0.85rem; }
    .mobile-menu a { font-size: 1.9rem; }
}

/* --- große Screens --- */
@media (min-width: 1440px) {
    :root { --container: 1280px; }
}
@media (min-width: 1920px) {
    :root { --fs-body: 1.15rem; --container: 1400px; }
}

/* ---------- Touch-Geräte: Cursor + Spotlight aus ---------- */
@media (pointer: coarse), (hover: none) {
    .cursor-dot { display: none !important; }
}