/* ================================================
   PROBLEM 3: TABLET-OPTIMIERUNG (769px - 1024px)
   Neue Media Query für Tablet-Ansicht
   ================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Hero Section - Tablet */
  .page-hero {
    min-height: 80vh !important;
    padding: 200px var(--spacing-lg) var(--spacing-2xl) !important;
  }

  .page-hero-content {
    max-width: 90% !important;
  }

  .page-hero h1 {
    font-size: 2.75rem !important;
  }

  .page-hero p {
    font-size: 1.15rem !important;
    max-width: 600px !important;
  }

  /* Social Sidebar - Tablet */
  .social-sidebar {
    top: 190px !important;
    right: 0 !important;
    gap: 3px !important;
  }

  .social-sidebar-btn {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .social-sidebar-btn svg {
    width: 12px !important;
    height: 12px !important;
    stroke: #ffffff !important;
    fill: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    stroke-width: 2 !important;
  }

  .a11y-trigger {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .a11y-trigger svg {
    width: 12px !important;
    height: 12px !important;
    fill: #ffffff !important;
    stroke: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

  /* Chat FAB - Tablet */
  .chat-fab {
    width: 60px !important;
    height: 60px !important;
    border-radius: 12px !important;
  }

  .chat-fab svg {
    width: 26px !important;
    height: 26px !important;
  }


  /* Hero Background Toggle - Tablet */
  .hero-bg-toggle {
    bottom: 20px !important;
    right: 20px !important;
    width: 42px !important;
    height: 42px !important;
  }

  /* Segment R1 Screenshots - Tablet */
  .r1-screenshots {
    height: 400px !important;
  }

  .r1-case-study .r1-screenshot {
    width: 200px !important;
  }

  /* Segment R3 Grid - Tablet bleibt 2 Spalten */
  .r3-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--spacing-xl) !important;
  }

  /* Terminologie Section - Tablet */
  .terminology-container {
    padding: 0 var(--spacing-xl) !important;
  }

  .terminology-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--spacing-md) !important;
  }

  /* FAQ Section - Tablet */
  .faq-section-homepage {
    padding: var(--spacing-3xl) var(--spacing-xl) !important;
  }
}

/* ================================================
   PROBLEM 1: BURGERMENÜ - MOBILE FIXES
   ================================================ */
@media (max-width: 768px) {
  /* Burger Menu Links - linksbündig und untereinander */
  .burger-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
    gap: 12px !important;
    width: 100% !important;
    text-align: left !important;
  }

  .burger-link svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }

  /* Burger Menu Dropdown */
  .burger-dropdown {
    min-width: 220px !important;
  }

  /* Theme Switcher Label */
  .burger-theme-label {
    font-size: 0.9rem !important;
    margin-bottom: 10px !important;
  }

  .burger-theme-label svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Theme Buttons GRÖßER - HÖCHSTE SPEZIFITÄT */
  .burger-menu-container .burger-dropdown .burger-theme-switcher .burger-theme-options .burger-theme-btn,
  .burger-theme-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    padding: 3px !important;
    border-radius: 6px !important;
    border-width: 2px !important;
  }

  .burger-theme-switcher {
    padding: 12px 16px !important;
  }

  .burger-theme-options {
    gap: 8px !important;
  }

  /* Theme Dot auch anpassen */
  .burger-theme-btn .theme-dot {
    border-radius: 4px !important;
  }
}

/* ================================================
   PROBLEM 4: CHAT-BUTTON ICON - MOBILE FIX
   ================================================ */
@media (max-width: 480px) {
  /* Chat FAB Icon kleiner auf kleinen Handys */
  .chat-fab svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    stroke-width: 2 !important;
  }

  /* Theme Buttons für sehr kleine Displays - GUT SICHTBAR */
  .burger-menu-container .burger-dropdown .burger-theme-switcher .burger-theme-options .burger-theme-btn,
  .burger-theme-btn {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    padding: 2.5px !important;
    border-radius: 5px !important;
    border-width: 1.5px !important;
  }

  .burger-theme-options {
    gap: 7px !important;
  }

  .burger-theme-switcher {
    padding: 10px 14px !important;
  }

  .burger-theme-label {
    font-size: 0.9rem !important;
    margin-bottom: 8px !important;
  }

  /* Theme Dot auch anpassen */
  .burger-theme-btn .theme-dot {
    border-radius: 3px !important;
  }

  /* Burger Menu Links - linksbündig */
  .burger-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
    gap: 10px !important;
    width: 100% !important;
    text-align: left !important;
  }

  .burger-link svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }

  .burger-dropdown {
    min-width: 200px !important;
  }
}

/* ================================================
   PROBLEM 5: FLOATING BUTTONS OVERLAP FIX
   Icons bleiben zwischen Header und Chat-Button
   ================================================ */

/* Mobile Viewport (max-width: 768px) */
@media (max-width: 768px) {
  /* Chat FAB UNTER social-sidebar positionieren */
  .chat-fab-container {
    bottom: 20px !important;
  }

  /* Social Sidebar Icons - kompakter aber Position bleibt */
  .social-sidebar {
    gap: 5px !important;
  }

  .social-sidebar-btn {
    width: 42px !important;
    height: 42px !important;
  }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
  /* Chat FAB UNTER social-sidebar - mehr Abstand nach unten */
  .chat-fab-container {
    bottom: 20px !important;
    right: 8px !important;
  }

  .chat-fab {
    width: 50px !important;
    height: 50px !important;
  }

  /* Social Sidebar - Icons kleiner und kompakter */
  .social-sidebar {
    right: 8px !important;
    gap: 3px !important;
  }

  .social-sidebar-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  .social-sidebar-btn svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* A11y Trigger - gleiche Größe wie Social Sidebar Buttons */
  .a11y-trigger {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  .a11y-trigger svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* Very Small Mobile (max-width: 360px) */
@media (max-width: 360px) {
  /* Chat FAB UNTER social-sidebar auch auf sehr kleinen Displays */
  .chat-fab-container {
    bottom: 20px !important;
    right: 6px !important;
  }

  .chat-fab {
    width: 48px !important;
    height: 48px !important;
  }

  /* Social Sidebar - maximal komprimiert */
  .social-sidebar {
    right: 6px !important;
    gap: 2px !important;
  }

  .social-sidebar-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  .social-sidebar-btn svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* A11y Trigger - gleiche Größe wie Social Sidebar Buttons */
  .a11y-trigger {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  .a11y-trigger svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* ================================================
   ZUSÄTZLICHE VERBESSERUNGEN
   ================================================ */


/* Tablet landscape spezifisch (iPad Pro, etc.) */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  .page-hero {
    min-height: 100vh !important;
  }

  .social-sidebar {
    top: 190px !important;
  }
}

/* Sehr große Tablets (iPad Pro 12.9") */
@media (min-width: 1025px) and (max-width: 1366px) {
  .page-hero h1 {
    font-size: 3rem !important;
  }

  .page-hero p {
    font-size: 1.2rem !important;
  }
}

/* ================================================
   FINALE OVERRIDES - 481px-768px
   ================================================ */
@media (min-width: 481px) and (max-width: 768px) {
  .social-sidebar {
    top: auto !important;
    bottom: 130px !important;
    right: 0 !important;
    gap: 3px !important;
  }
  
  .social-sidebar-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    border-radius: 4px 0 0 4px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .social-sidebar-btn svg {
    width: 14px !important;
    height: 14px !important;
    stroke: #ffffff !important;
    stroke-width: 2 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }
  
  .a11y-trigger {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    border-radius: 4px 0 0 4px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    right: 0 !important;
  }
  
  .a11y-trigger svg {
    width: 14px !important;
    height: 14px !important;
    fill: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }
  
  .contact-header-btn,
  .contact-header-btn-transparent {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    border-radius: 4px 0 0 4px !important;
  }
  
  .contact-header-btn svg,
  .contact-header-btn-transparent svg {
    width: 14px !important;
    height: 14px !important;
  }
  
  .chat-fab-container {
    bottom: 20px !important;
    right: 10px !important;
  }

  .chat-fab {
    width: 48px !important;
    height: 48px !important;
  }

  .chat-fab svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* ================================================
   CHAT-BUTTON POSITION FIX - UNTER SOCIAL SIDEBAR
   Chat-Button soll unter den Social Icons sein
   ================================================ */

/* 481px - 768px: Chat unter Social Sidebar */
@media (min-width: 481px) and (max-width: 768px) {
  .chat-fab-container {
    bottom: 20px !important;
    right: 10px !important;
  }
}

/* ================================================
   FINALE OVERRIDES - 769px-1024px (HÖCHSTE PRIORITÄT)
   ================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .social-sidebar {
    top: 190px !important;
    right: 0 !important;
    gap: 3px !important;
  }
}