/**
 * KI-Toolsuite - Mobile Fix für WordPress Theme Twenty Seventeen
 * Version: 2.0.0 - Optimiert für AI-Container Templates
 * Zweck: Behebt Layout-Probleme auf mobilen Geräten (weiße Ränder, Zentrierung)
 * Kompatibel mit: front-page.php und template-ai-container.php
 */

/* ===== CRITICAL: VIEWPORT UND BODY FIXES ===== */
@media (max-width: 768px) {
  
  /* HTML und Body - Keine Margins/Paddings, kein horizontales Scrollen */
  html {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* WordPress Body Classes - alle Margins/Paddings entfernen */
  body.page,
  body.single,
  body.home,
  body.archive {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* ===== TWENTY SEVENTEEN THEME OVERRIDES ===== */
  
  /* Hauptcontainer - Keine Paddings/Margins */
  .site {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .site-content {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .site-content-contain {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Wrap - Volle Breite ohne Einschränkungen */
  .wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Content Area und Site Main */
  #primary.content-area,
  .content-area {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  #main.site-main,
  .site-main {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Articles - Keine Margins */
  article {
    margin: 0 !important;
  }
  
  /* Entry Content - Wird von ai-page-container überschrieben */
  .entry-content {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* ===== AI-CONTAINER SPEZIFISCHE FIXES ===== */
  
  /* AI-Container - Perfekte volle Breite ohne Ränder */
  .ai-page-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Überschreibe Breakout-Effekt auf Mobile */
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Kein Overflow */
    overflow-x: hidden !important;
    /* Box-Shadow auf Mobile reduzieren für bessere Performance */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    /* Keine Border-Radius auf Mobile für volle Breite */
    border-radius: 0 !important;
  }
  
  /* AI-Header - Optimiert für Mobile */
  .ai-page-container .ai-page-header {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 1.25rem 1rem !important;
    text-align: center !important;
    box-sizing: border-box !important;
    /* Kein Border-Radius oben auf Mobile */
    border-radius: 0 !important;
  }
  
  /* AI-Header Titel */
  .ai-page-container .ai-page-header h1 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin: 0 0 0.5rem 0 !important;
    padding: 0 !important;
    word-wrap: break-word !important;
  }
  
  /* AI-Header Untertitel */
  .ai-page-container .ai-page-header-subtitle {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    margin: 0.5rem 0 0 0 !important;
    padding: 0 !important;
  }
  
  /* AI-Content - Optimiert für Mobile */
  .ai-page-container .ai-page-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 1.25rem 1rem !important;
    box-sizing: border-box !important;
    /* Kein Border-Radius unten auf Mobile */
    border-radius: 0 !important;
    /* Border nur links und rechts für visuellen Rahmen */
    border-left: 2px solid #196297 !important;
    border-right: 2px solid #196297 !important;
    border-bottom: 2px solid #196297 !important;
  }
  
  /* AI-Content Entry-Content */
  .ai-page-container .ai-page-content .entry-content {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* ===== ÜBERSCHRIFTEN IM AI-CONTAINER ===== */
  
  .ai-page-container .ai-page-content h2 {
    font-size: 1.3rem !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .ai-page-container .ai-page-content h3 {
    font-size: 1.15rem !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .ai-page-container .ai-page-content h4 {
    font-size: 1.05rem !important;
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  /* ===== BILDER UND MEDIEN IM AI-CONTAINER ===== */
  
  .ai-page-container .ai-page-content img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 1rem auto !important;
  }
  
  .ai-page-container .ai-page-content iframe,
  .ai-page-container .ai-page-content video {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  
  /* WordPress Alignments */
  .ai-page-container .ai-page-content .alignwide,
  .ai-page-container .ai-page-content .alignfull {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* ===== BUTTONS UND LINKS ===== */
  
  /* Buttons im AI-Container - Touch-optimiert */
  .ai-page-container .ai-page-content .wp-block-button,
  .ai-page-container .ai-page-content .button,
  .ai-page-container .ai-page-content a.button {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.75rem 0 !important;
    padding: 0.875rem 1rem !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  
  /* ===== WORDPRESS MENÜ UND NAVIGATION ===== */
  
  .site-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .navigation-top {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .main-navigation {
    width: 100% !important;
  }
  
  /* Menü-Toggle Button */
  .menu-toggle {
    margin: 1rem auto !important;
    display: block !important;
  }
  
  /* ===== FOOTER ===== */
  
  .site-footer {
    width: 100% !important;
    margin: 0 !important;
    padding: 2rem 1rem !important;
    box-sizing: border-box !important;
  }
  
  .site-info {
    text-align: center !important;
    padding: 0 !important;
  }
  
  /* Footer Links und Social Icons */
  .footer-links,
  .social-navigation,
  .social-icons {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    padding: 0 !important;
    margin: 0.5rem 0 !important;
  }
  
  /* ===== TOOLSUITE SPEZIFISCHE ELEMENTE ===== */
  
  /* Module-Listen (z.B. Startseite mit Tool-Übersicht) */
  .toolsuite-module,
  .module-box,
  .content-box {
    width: 100% !important;
    margin: 0.75rem 0 !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
  }
  
  /* Toolsuite Buttons */
  .toolsuite-button,
  .module-button {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.5rem 0 !important;
    padding: 0.875rem 1rem !important;
    text-align: center !important;
  }
  
  /* ===== WORDPRESS BLÖCKE OPTIMIERUNG ===== */
  
  /* Columns auf Mobile stapeln */
  .wp-block-columns {
    flex-direction: column !important;
  }
  
  .wp-block-column {
    flex-basis: 100% !important;
    margin: 0 0 1rem 0 !important;
  }
  
  /* Gutenberg Blocks */
  .wp-block-group,
  .wp-block-cover {
    padding: 1rem !important;
    margin: 0.75rem 0 !important;
  }
  
  /* ===== SAFE AREA INSETS (für Notches/Ränder) ===== */
  
  @supports (padding: max(0px)) {
    body {
      padding-left: max(0px, env(safe-area-inset-left)) !important;
      padding-right: max(0px, env(safe-area-inset-right)) !important;
    }
    
    .site-header {
      padding-left: max(1rem, env(safe-area-inset-left)) !important;
      padding-right: max(1rem, env(safe-area-inset-right)) !important;
    }
    
    .ai-page-container .ai-page-header,
    .ai-page-container .ai-page-content {
      padding-left: max(1rem, env(safe-area-inset-left)) !important;
      padding-right: max(1rem, env(safe-area-inset-right)) !important;
    }
    
    .site-footer {
      padding-left: max(1rem, env(safe-area-inset-left)) !important;
      padding-right: max(1rem, env(safe-area-inset-right)) !important;
      padding-bottom: max(2rem, env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ===== EXTRA SMALL DEVICES (< 480px) ===== */
@media (max-width: 480px) {
  
  /* AI-Container noch kompakter */
  .ai-page-container .ai-page-header {
    padding: 1rem 0.75rem !important;
  }
  
  .ai-page-container .ai-page-content {
    padding: 1rem 0.75rem !important;
  }
  
  /* Schriftgrößen weiter reduzieren */
  .ai-page-container .ai-page-header h1 {
    font-size: 1.35rem !important;
  }
  
  .ai-page-container .ai-page-content h2 {
    font-size: 1.2rem !important;
  }
  
  .ai-page-container .ai-page-content h3 {
    font-size: 1.1rem !important;
  }
  
  /* Buttons kleiner */
  .ai-page-container .ai-page-content .button,
  .toolsuite-button {
    padding: 0.75rem 0.875rem !important;
    font-size: 0.9rem !important;
  }
}

/* ===== LANDSCAPE MODE FIX ===== */
@media (max-width: 768px) and (orientation: landscape) {
  
  /* Bei Landscape-Modus Header kompakter */
  .ai-page-container .ai-page-header {
    padding: 0.875rem 1rem !important;
  }
  
  .ai-page-container .ai-page-header h1 {
    font-size: 1.35rem !important;
  }
  
  /* Content-Padding reduzieren */
  .ai-page-container .ai-page-content {
    padding: 1rem !important;
  }
  
  /* Menü-Button kleiner */
  .menu-toggle {
    padding: 0.5rem 1rem !important;
  }
}

/* ===== TABLET PORTRAIT (481px - 768px) ===== */
@media (min-width: 481px) and (max-width: 768px) {
  
  /* Etwas mehr Padding auf Tablets */
  .ai-page-container .ai-page-header {
    padding: 1.5rem 1.25rem !important;
  }
  
  .ai-page-container .ai-page-content {
    padding: 1.5rem 1.25rem !important;
  }
  
  /* Schriftgrößen etwas größer als auf Smartphones */
  .ai-page-container .ai-page-header h1 {
    font-size: 1.75rem !important;
  }
}

/* ===== DEBUG MODE (auskommentieren wenn nicht benötigt) ===== */
/*
@media (max-width: 768px) {
  * {
    outline: 1px solid rgba(255, 0, 0, 0.1) !important;
  }
  
  body {
    outline: 2px solid blue !important;
  }
  
  .ai-page-container {
    outline: 3px solid green !important;
  }
  
  .ai-page-header {
    outline: 2px solid yellow !important;
  }
  
  .ai-page-content {
    outline: 2px solid orange !important;
  }
}
*/