/**
 * KI-Toolsuite - Mobile Fix für WordPress Theme Twenty Seventeen
 * Version: 2.4.0 - Mit Fix für Standard-Template Seiten (Shortcode-Container)
 * Zweck: Behebt Layout-Probleme auf mobilen Geräten (weiße Ränder, Zentrierung, Header-Größe)
 * Kompatibel mit: front-page.php, template-ai-container.php, page.php (Standard) und alle Twenty Seventeen Seiten
 */

/* ===== 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;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Wrap - Volle Breite ohne Einschränkungen */
  .wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Content Area und Site Main */
  #primary.content-area,
  .content-area {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }
  
  #main.site-main,
  .site-main {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Articles - Keine Margins */
  article {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  article.page,
  article.post {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Entry Content - Standard mit Padding (wird für AI-Container überschrieben) */
  .entry-content {
    margin: 0 !important;
    padding: 0 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Entry Header (Seitentitel) */
  .entry-header {
    padding: 0 16px !important;
    margin: 16px 0 !important;
  }
  
  /* 
   * WICHTIG: Wenn .entry-content einen AI-Container/Shortcode enthält,
   * soll das Padding entfernt werden, damit der Container volle Breite hat.
   * Wir setzen hier eine Klasse, die per CSS :has() greift.
   */
  
  /* Wenn entry-content AI-Container enthält: kein Padding */
  .entry-content:has(.ai-page-container),
  .entry-content:has(.ai-page-header) {
    padding: 0 !important;
  }
  
  /* Fallback für alle Seiten: Seiten-Container volle Breite */
  body.page .site-content-contain,
  body.page .wrap,
  body.page .content-area,
  body.page .site-main,
  body.page article,
  body.page .entry-content {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* ===== TWENTY SEVENTEEN HEADER/LOGO FIX ===== */
  /* Ziel: Logo links über dem Hintergrundbild, wie auf der Landing Page */
  
  /* Site Header Container - relative für absolute Positionierung des Logos */
  .site-header {
    position: relative !important;
  }
  
  /* Custom Header Media Container - Hintergrundbild volle Breite */
  .custom-header-media {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Höhe begrenzen auf Mobile */
    height: 80px !important;
    max-height: 80px !important;
    overflow: hidden !important;
    position: relative !important;
  }
  
  /* Das Header-Bild selbst - volle Breite, kein Rand */
  .wp-custom-header,
  .custom-header {
    width: 100% !important;
    max-width: 100% !important;
    height: 80px !important;
    max-height: 80px !important;
    position: relative !important;
  }
  
  .wp-custom-header img,
  .custom-header img {
    width: 100% !important;
    height: 80px !important;
    max-height: 80px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
  }
  
  /* Site Branding - Logo absolut positioniert über dem Hintergrundbild */
  .site-branding {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 10 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    text-align: left !important;
    background: transparent !important;
  }
  
  /* Custom Logo im Header - klein, links */
  .custom-logo-link {
    display: block !important;
    width: auto !important;
    max-width: 200px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .custom-logo-link img,
  .custom-logo {
    width: auto !important;
    max-width: 200px !important;
    height: auto !important;
    max-height: 55px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    /* Leichter Schatten für bessere Sichtbarkeit auf dem Hintergrundbild */
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3)) !important;
  }
  
  /* Site Title und Description */
  .site-branding-text {
    padding: 8px 16px !important;
    text-align: center !important;
  }
  
  .site-title {
    font-size: 1.4rem !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .site-description {
    font-size: 0.85rem !important;
    margin: 4px 0 0 0 !important;
  }
  
  /* ===== BLOG & POST CONTENT FIXES ===== */
  
  /* Blog-Artikel Inhalt - Padding für bessere Lesbarkeit */
  .post-content,
  .entry-content,
  .page-content,
  .single-post .entry-content,
  .blog .entry-content,
  article .entry-content {
    padding: 0 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Blog-Artikel Titel */
  .entry-title,
  .post-title,
  article h1,
  .single-post h1.entry-title {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    padding: 0 16px !important;
    margin: 16px 0 !important;
  }
  
  /* Blog-Artikel Meta (Datum, Autor) */
  .entry-meta,
  .post-meta,
  .byline {
    padding: 0 16px !important;
    font-size: 0.8rem !important;
  }
  
  /* Blog-Text Schriftgröße reduzieren */
  .entry-content p,
  .post-content p,
  article p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }
  
  /* Blog Überschriften */
  .entry-content h2,
  .post-content h2 {
    font-size: 1.3rem !important;
    margin: 1.5rem 0 0.75rem 0 !important;
  }
  
  .entry-content h3,
  .post-content h3 {
    font-size: 1.15rem !important;
    margin: 1.25rem 0 0.5rem 0 !important;
  }
  
  /* Site Main - Padding für gesamten Content-Bereich */
  .site-main,
  #main.site-main {
    padding: 0 !important;
  }
  
  /* Post Navigation */
  .post-navigation,
  .posts-navigation,
  .navigation {
    padding: 16px !important;
  }
  
  /* Kommentare */
  .comments-area {
    padding: 0 16px !important;
  }

  /* ===== AI-CONTAINER SPEZIFISCHE FIXES ===== */
  
  /* 
   * WICHTIG: Wenn .ai-page-container oder .ai-page-header innerhalb des 
   * Standard-Templates (page.php) via Shortcode gerendert wird, müssen 
   * alle Parent-Container volle Breite haben.
   * 
   * Problem: :has() hat eingeschränkten Browser-Support (z.B. Samsung Internet)
   * Lösung: Wir setzen .entry-content auf body.page Seiten generell auf 
   * padding: 0 und lassen den Content selbst das Padding handhaben.
   */
  
  /* 
   * FALLBACK für alle Browser (ohne :has()):
   * Auf allen Seiten (body.page) wird .entry-content ohne Padding gerendert.
   * Das Padding wird stattdessen im AI-Content oder im Text selbst gehandhabt.
   */
  body.page .entry-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Für Browser MIT :has() Support - zusätzliche Spezifität */
  .entry-content:has(.ai-page-container),
  .entry-content:has(.ai-page-header),
  .post-content:has(.ai-page-container),
  .post-content:has(.ai-page-header) {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* 
   * AI-Container selbst - volle Breite 
   * Verwendet width: 100% statt 100vw um Scrollbar-Probleme zu vermeiden
   */
  .ai-page-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Kein Overflow */
    overflow-x: hidden !important;
    /* Box-Shadow auf Mobile entfernen */
    box-shadow: none !important;
    /* Keine Border-Radius auf Mobile für volle Breite */
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* AI-Page-Header (blauer Bereich) - direkt oder innerhalb Container */
  .ai-page-header {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 1.25rem 1rem !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
  }
  
  /* AI-Page-Header Titel */
  .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;
    overflow-wrap: break-word !important;
  }
  
  /* AI-Page-Header Untertitel/Beschreibung */
  .ai-page-header p,
  .ai-page-header-subtitle {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    margin: 0.5rem 0 0 0 !important;
    padding: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* AI-Page-Content (weißer/heller Bereich unter dem Header) */
  .ai-page-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 1.25rem 1rem !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
  }
  
  /* Nested entry-content innerhalb AI-Container */
  .ai-page-container .entry-content,
  .ai-page-content .entry-content {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ===== ÜBERSCHRIFTEN IM AI-CONTAINER ===== */
  
  .ai-page-container .ai-page-content h2,
  .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,
  .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;
    width: 100% !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(0px, env(safe-area-inset-left)) !important;
      padding-right: max(0px, 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) {
  
  /* Header noch kompakter auf sehr kleinen Screens */
  .custom-header-media {
    height: 70px !important;
    max-height: 70px !important;
  }
  
  .wp-custom-header,
  .custom-header {
    height: 70px !important;
    max-height: 70px !important;
  }
  
  .wp-custom-header img,
  .custom-header img {
    height: 70px !important;
    max-height: 70px !important;
  }
  
  /* Logo noch kleiner */
  .site-branding {
    padding: 6px 10px !important;
  }
  
  .custom-logo-link,
  .custom-logo-link img,
  .custom-logo {
    max-width: 160px !important;
    max-height: 50px !important;
  }
  
  /* Blog-Text noch kompakter */
  .entry-content p,
  .post-content p,
  article p {
    font-size: 0.9rem !important;
  }
  
  .entry-title,
  .post-title,
  article h1 {
    font-size: 1.35rem !important;
    padding: 0 12px !important;
  }
  
  .entry-content,
  .post-content {
    padding: 0 12px !important;
  }
  
  /* 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) {
  
  /* Header in Landscape noch kompakter */
  .custom-header-media {
    height: 60px !important;
    max-height: 60px !important;
  }
  
  .wp-custom-header,
  .custom-header {
    height: 60px !important;
    max-height: 60px !important;
  }
  
  .wp-custom-header img,
  .custom-header img {
    height: 60px !important;
    max-height: 60px !important;
  }
  
  /* Logo in Landscape kleiner */
  .custom-logo-link img,
  .custom-logo {
    max-width: 150px !important;
    max-height: 45px !important;
  }
  
  /* 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) {
  
  /* Header etwas größer auf Tablets */
  .custom-header-media {
    height: 90px !important;
    max-height: 90px !important;
  }
  
  .wp-custom-header,
  .custom-header {
    height: 90px !important;
    max-height: 90px !important;
  }
  
  .wp-custom-header img,
  .custom-header img {
    height: 90px !important;
    max-height: 90px !important;
  }
  
  /* 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;
  }
}
*/