/* =====================================
   📱 mobil-only.css – helle Variante
   (FINALE VERSION MIT GEZIELTEM ADMIN-BUGFIX: Aggressive Puffer)
===================================== */

@media (max-width: 950px), (hover: none) and (pointer: coarse), (orientation: portrait) {

  /* === Fixierter Header (Öffentliche Seiten) === */
  #mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: #fff;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.8rem;
    z-index: 10000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-bottom: 1px solid #e5e7eb;
  }
  
  /* 💡 Admin-Header-Styling (Notwendig für die Korrektur der Admin-Seiten) */
  header.admin-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 60px; /* Admin Header Höhe */
      padding: 0 0.8rem;
      z-index: 10000;
      background: #ffffff;
      border-bottom: 1px solid #e5e7eb;
  }
  
  /* Desktop Navigation in Admin ausblenden */
  header.admin-header .admin-nav { 
      display: none; 
  }
  
  /* Burger Button im Admin-Header anzeigen */
  header.admin-header .burger-menu-icon {
      display: block !important;
      z-index: 10001;
      color: #111827;
  }
  
  /* Burger Button der öffentlichen Seiten anzeigen */
  header.admin-header .burger {
      display: block;
      z-index: 10001; 
  }

  .mobile-header-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }

  /* === Burger Buttons / Menüs === */
  .burger {
    font-size: 1.8rem;
    background: none;
    border: none;
    color: #000;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
  }

  .sort-burger {
    font-size: 1.4rem;
  }
  
  /* 🚨 FIX: Standard Mobile Menu (Öffentliche Seiten) */
  .mobile-menu {
    display: none;
    position: fixed; 
    top: 50px; 
    left: 0;
    width: 100%;
    
    /* FIX: Dynamische Höhe + 2px Überlappung */
    height: auto; 
    max-height: calc(100vh - 50px - 80px + 2px); 
    
    flex-direction: column;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    z-index: 10001; 
    overflow-y: auto; 
    
    opacity: 0; 
    transition: opacity 0.25s ease-in-out;
  }

  .mobile-menu.open {
    display: flex;
    opacity: 1; 
  }
  
  /* 🚨 FIX: Admin Mobile Nav (Muss für Admin-Seiten enthalten sein) */
  #mobile-nav {
    position: fixed; 
    top: 60px; /* Startet unter dem 60px Admin Header */
    left: 0;
    right: 0;
    
    /* FIX: Dynamische Höhe + 2px Überlappung */
    height: auto; 
    max-height: calc(100vh - 60px - 80px + 2px); 
    
    z-index: 100000; 
    background: #fff;
    display: none; 
    flex-direction: column;
    padding: 1rem 0;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    overflow-y: auto;
    
    transform: translateY(-100%);
    transition: transform 0.3s ease-out, visibility 0.3s ease-out;
    visibility: hidden;
  }

  #mobile-nav.open {
    display: flex;
    transform: translateY(0);
    visibility: visible;
  }

  #mainMenu a,
  #mobile-nav a { /* Menü-Link Styles zusammengefasst */
    color: #111;
    text-decoration: none;
    padding: 1rem;
    border-bottom: 1px solid #f0f0f0;
    text-align: center;
  }

  #mainMenu a:hover,
  #mobile-nav a:hover {
    background: #f9fafb;
  }

  .sort-menu button {
    background: #fff;
    color: #111;
    border: 1px solid #ddd;
    padding: 0.9rem;
    font-size: 1rem;
    text-align: center;
    border-radius: 6px;
    margin: 4px 8px;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .sort-menu button:hover {
    background: #f3f4f6;
  }

  .sort-menu button.active {
    background: #e5e7eb;
    font-weight: 600;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
  }


  /* ================================================= */
  /* Scrollen und Header/Footer-Abstand (WICHTIG!) */
  /* ================================================= */

  /* KORREKTUR: HTML darf nicht scrollen blockieren */
  html {
    height: auto; 
    overflow-y: visible; 
  }
  
  /* Body scrollt und erhält Puffer für fixierte Elemente */
  body {
      overflow-y: auto !important; 
      -webkit-overflow-scrolling: touch;
      height: auto; 
      min-height: 100vh;
      
      /* FIX: padding-top für 60px Admin Header */
      padding-top: 60px !important; 
      /* FIX: Standard Footer-Platz (80px Footerhöhe + ca. 70px Puffer) */
      padding-bottom: 150px !important; 
      margin-top: 0;
      overflow-x: hidden !important;
  }

  main {
      padding-top: 0 !important; 
      padding-bottom: 0 !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      
      /* 🚨 FIX: Aggressivere Mindesthöhe für den Bug: 100vh - 60px Header + 1px */
      min-height: calc(100vh - 60px + 1px) !important; 
      z-index: 1; 
  }
  
  /* 🚨 FIX: Aggressiverer Puffer für das letzte Kindelement. */
  main > *:last-child,
  #content > *:last-child,
  .content-wrapper > *:last-child {
      /* Puffer für flüssiges Auslaufen (170px) */
      margin-bottom: 170px !important; 
  }
  
  /* Horizontales Padding für Text-Content (Datenschutz/Cookie) */
  .content-wrapper {
      padding-left: 1rem !important; 
      padding-right: 1rem !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
  }

  
  /* === Galerie-Area (Als statischer Grid-Container im scrollenden Body) === */
  .gallery-area {
    /* WICHTIG: Überschreibt Desktop-Fixed-Positionierung */
    position: static !important; 
    top: auto !important;
    bottom: auto !important;
    height: auto !important;
    overflow-y: visible !important; /* Lässt den Body scrollen */

    margin-top: 10px !important; 
    margin-bottom: 0px !important; 
    padding: 0.5rem !important; 
    
    /* NEU: Aggressivere Hardware-Beschleunigung für flüssigeres Grid-Scrollen auf iOS */
    transform: translateZ(0);
    will-change: transform, scroll-position;
    
    /* Grid-Korrektur: Macht die Kacheln wieder flexibel */
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important; 
    
    /* NEU: Fixiert die Zeilenhöhe im Mobilmodus */
    grid-auto-rows: 166px !important; 
    gap: 1rem;
  }
  
  /* NEU: Darstellung der Kacheln */
  .gallery-area .card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0; 
    height: 100%; 
  }
  
  .gallery-area .card img {
    width: 100%;
    height: 130px; 
    object-fit: contain;
    padding-top: 5px; 
    box-sizing: border-box; 
  }
  
  .gallery-area .card-info {
    margin-top: 4px; 
    margin-bottom: 5px; 
    font-size: 0.9rem;
  }


  /* ================================================= */
  /* 💡 KORRIGIERT: Footer WIEDER fixieren */
  /* ================================================= */

  footer, .main-footer {
      position: fixed; /* WIEDER fixiert */
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10000; /* Hoher Z-Index */
      height: 80px; 
      background-color: #f8f8f8; 
      border-top: 1px solid #e5e7eb;
      display: flex; 
      flex-direction: column; 
      justify-content: center;
      align-items: center;
      
      font-size: 0.75rem;
      padding: 0.5rem 1rem; 
  }


  /* Desktop-Header der öffentlichen Seiten im Mobilmodus ausblenden */
  .main-header {
    display: none !important;
  }
  
  /* Desktop-Header der Admin-Seiten im Mobilmodus ausblenden */
  header.admin-header .admin-nav {
    display: none !important;
  }
  
  /* Burger Icon im Admin-Header */
  .burger-menu-icon {
      display: block !important;
  }


  /* ================================================= */
  /* 💡 Admin-Bereich Mobile Kompression (Muss drinbleiben) */
  /* ================================================= */

  /* Hauptcontainer des Dashboards/Formulars (max-w-4xl/6xl) */
  .max-w-4xl, .max-w-6xl {
      padding: 0.75rem !important;
      margin-top: 0.5rem !important;
      margin-bottom: 0.5rem !important;
  }

  /* === Dashboard (admin.php) Kompression === */
  .max-w-4xl .flex.justify-between.items-center {
      margin-bottom: 0.5rem !important;
      align-items: flex-start !important;
  }

  .max-w-4xl h1 { font-size: 1.25rem !important; font-weight: 700 !important; }
  #clock { font-size: 0.875rem !important; }
  #date { font-size: 0.65rem !important; color: #6b7280 !important; }

  .grid.lg\:grid-cols-3 { 
      gap: 0.4rem !important;
      margin-bottom: 0.8rem !important; 
  }
  .grid > div.rounded-lg { padding: 0.5rem !important; }
  .grid > div.rounded-lg p.text-2xl { font-size: 1.3rem !important; font-weight: 800 !important; }
  .grid > div.rounded-lg p.text-sm { font-size: 0.7rem !important; font-weight: 500 !important; }

  .max-w-4xl h2 {
      font-size: 1rem !important;
      padding-top: 0.5rem !important; 
      border-color: #e5e7eb !important;
      margin-bottom: 0.5rem !important; 
  }

  .public-links a {
      padding: 0.4rem 0.7rem !important;
      font-size: 0.75rem !important;
      box-shadow: none !important;
      border-radius: 4px !important;
  }

  .max-w-4xl > p.text-center {
      margin-top: 0.5rem !important;
      font-size: 0.7rem !important;
  } 

  /* === Upload-Formular (upload.php) Kompression === */
  .max-w-6xl .bg-white.p-6 { padding: 0.75rem !important; border-radius: 10px !important; }
  #uploadForm.space-y-6 { gap: 0.5rem; }
  #uploadForm label.block.text-sm { font-size: 0.75rem !important; margin-bottom: 0.1rem !important; color: #4b5563 !important; }
  #uploadForm input, #uploadForm select { padding: 0.4rem 0.6rem !important; font-size: 0.85rem !important; border-radius: 6px !important; }
  #uploadForm .grid.grid-cols-2.gap-2 { gap: 0.4rem !important; }
  #uploadForm button[type="submit"] { padding: 0.5rem 1.2rem !important; font-size: 0.9rem !important; border-radius: 6px !important; }
  .max-w-6xl .bg-white.border.border-gray-300 { padding: 0.5rem !important; margin-bottom: 0.5rem !important; font-size: 0.8rem !important; border-radius: 6px !important; }
}