/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE STYLES
   Flowbotics Website - Mobile-First Overrides
   
   Breakpoints:
   - max-width: 900px  → Tablets & große Handys
   - max-width: 480px  → Kleine Handys (iPhone SE, Mini)
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   TABLET & LARGE MOBILE (max-width: 900px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  h1 { font-size: var(--text-7xl); }
  .hero h2 { font-size: var(--text-5xl); }
  .section-header h2 { font-size: var(--text-7xl); }
  .about-content h2 { font-size: var(--text-6xl); }

  /* Hero Mobile Height Fix */
  .hero { 
    min-height: 100svh; 
    padding-top: var(--space-25); 
    padding-bottom: var(--space-10); 
    text-align: center; 
  }
  .hero-actions { flex-direction: column; align-items: center; gap: var(--space-3); margin-bottom: var(--space-10); }
  .hero-stats { flex-direction: row; flex-wrap: wrap; gap: var(--space-5); padding-top: var(--space-6); }
  .stat-num { font-size: var(--text-7xl); margin-bottom: var(--space-1); }
  .stat-label { font-size: var(--text-xs); }
  .stat-sep { display: none; }

  .section-alt, .tech-stack-bar { padding-top: var(--space-15); padding-bottom: var(--space-25); }
  .tech-grid, .about-grid, .bento-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .tech-card, .card, .contact-card, .case-main, .case-details { padding: var(--space-6) var(--space-5); }
  .section { padding: var(--space-15) 0; }
  
  .btn { width: 100%; max-width: 320px; margin: 0 auto; }
  
  /* Tech Stack: Untereinander auf Mobile */
  .stack-row { 
      flex-direction: column;
      align-items: center; 
      gap: var(--space-2); 
  }
  
  /* Höhere Spezifität statt !important */
  .tech-stack-bar .stack-category,
  .section-alt .stack-category { 
      text-align: center;
      min-width: 0;
      width: 100%;
      margin-bottom: var(--space-1); 
  }
  
  .about-grid { 
      display: flex; 
      flex-direction: column; 
      text-align: center; 
      gap: var(--space-10);
  }

  .visual-inner { margin: 0 auto; max-width: 320px; padding: var(--space-12) var(--space-5); }
  .profile-img { width: 150px; height: 150px; }
  
  /* Mobile Cert-Badges - Kompakt für Handy */
  .cert-badge { width: 60px !important; height: 60px !important; }
  .badge-left-top { left: 5%; top: 40px; }
  .badge-right-top { right: 5%; top: 30px; }
  .badge-right-bottom { right: 8%; top: 130px; }

  .contact-form .btn { width: 100%; max-width: 100%; margin-top: var(--space-5); }
  .footer-inner { flex-direction: column; text-align: center; gap: var(--space-6); }
  .footer-links { flex-direction: column; gap: var(--space-3); }
}

/* ═══════════════════════════════════════════════════════════
   SMALL MOBILE (max-width: 480px)
   iPhone SE, Mini, kleine Android-Geräte
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .container { padding: 0 var(--space-4); }
  
  /* Navigation */
  .nav { padding: var(--space-4) 0; }
  .nav-logo-custom { height: 32px; }
  
  /* Hero - Kompakt */
  .hero { padding-top: var(--space-20); }
  .hero h1 { font-size: var(--text-5xl); margin-bottom: var(--space-5); }
  .hero p { font-size: var(--text-lg); margin-bottom: var(--space-10); }
  .badge { font-size: var(--text-sm); padding: var(--space-1) var(--space-4); margin-bottom: var(--space-10); }
  
  /* Hero Stats - Untereinander */
  .hero-stats { flex-direction: column; gap: var(--space-3); }
  .stat { text-align: center; }
  .stat-num { font-size: var(--text-6xl); }
  .stat-sep { display: none; }
  
  /* Buttons - Volle Breite */
  .hero-actions { width: 100%; }
  .btn { width: 100%; max-width: 100%; padding: var(--space-3) var(--space-6); font-size: var(--text-rg); }
  
  /* Tech Tags */
  .tag-list { gap: var(--space-2); }
  .tech-tag { font-size: var(--text-sm); padding: var(--space-1) var(--space-3); }
  .stack-category { font-size: var(--text-xs); }
  
  /* Section Headers */
  .section { padding: var(--space-12) 0; }
  .section-header h2 { font-size: var(--text-5xl); }
  .section-header p { font-size: var(--text-lg); }
  
  /* Fixed Header Anpassung für Mobile */
  .nav { padding: 8px 0 !important; }
  .nav-logo-custom { height: 24px !important; width: auto !important; }
  .btn { padding: 4px 10px !important; font-size: 0.75rem !important; }
  
  /* Cards */
  .tech-card, .card { padding: var(--space-4) var(--space-4); }
  .card h3 { font-size: var(--text-2xl); }
  .card-icon { width: 48px; height: 48px; margin-bottom: var(--space-5); }
  .card-icon svg { width: 20px; height: 20px; }
  
  /* About Section */
  .about-content h2 { font-size: var(--text-6xl); }
  .visual-inner { max-width: 260px; padding: var(--space-10) var(--space-4); }
  .profile-img { width: 120px; height: 120px; margin-bottom: var(--space-6); }
  
  /* Small Mobile Cert-Badges - Noch kompakter */
  .cert-badge { width: 45px !important; height: 45px !important; }
  .badge-left-top { left: 2%; top: 30px; }
  .badge-right-top { right: 2%; top: 20px; }
  .badge-right-bottom { right: 5%; top: 100px; }
  
  /* Fixed Header für kleine Handys */
  .nav { padding: 6px 0 !important; }
  .nav-logo-custom { height: 20px !important; }
  .btn { padding: 3px 8px !important; font-size: 0.7rem !important; }
  
  .visual-text strong { font-size: var(--text-lg); }
  
  /* Case Study */
  .case-header { padding: var(--space-6) var(--space-5); }
  .case-header h3 { font-size: var(--text-3xl); }
  .case-main { padding: var(--space-6) var(--space-5); }
  .case-details { padding: var(--space-6) var(--space-5); }
  .client-logo-img { height: 35px; padding: var(--space-1) var(--space-2); }
  
  /* Contact Form */
  .contact-card { padding: var(--space-6) var(--space-5); }
  .contact-card h2 { font-size: var(--text-4xl); }
  .form-group { margin-bottom: var(--space-5); }
  .form-group label { font-size: var(--text-sm); }
  .form-group input, .form-group textarea { 
    padding: var(--space-3); 
    font-size: var(--text-lg); /* Verhindert iOS-Zoom */
  }
  
  /* Footer */
  .footer { padding: var(--space-10) 0; }
  .footer-inner { gap: var(--space-5); }
  .copyright { font-size: var(--text-sm); }
}