/* css/90-responsive.css
   ---------------------
   Responsive Anpassungen für Layout/Gaps/Spalten
   – deaktiviert die Desktop-Gap-Mechanik auf Mobile
   – bündelt Tablet-/Mobile-Feinschliff
*/

/* ==============================
   Tablet & kleiner (bis 990px)
   ============================== */
@media only screen and (max-width: 990px){
  /* Grundabstand */
  .content { padding-top: 20px; }

  /* Zentrale Container volle Breite + Innenabstand */
  .responsive #top .container,
  .responsive #top .container_wrap .container,
  .responsive #top .main_color .container,
  .responsive #top .template-page .content,
  .responsive #top .entry-content-wrapper.clearfix.standard-content,
  .responsive #top .av-content-small{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: var(--side-padding) !important;
    padding-right: var(--side-padding) !important;
    box-sizing: border-box !important;
  }

  /* (Optional) vertikale Verdichtung der Teaser-Reihen */
  .archive .post-entry,
  .blog .post-entry,
  .template-blog .post-entry{
    margin-bottom: var(--teaser-gap) !important;
  }
  .archive .post-entry:first-child,
  .blog .post-entry:first-child,
  .template-blog .post-entry:first-child{
    margin-top: var(--teaser-first-gap) !important;
  }
  .archive .post-entry:last-child,
  .blog .post-entry:last-child,
  .template-blog .post-entry:last-child{
    margin-bottom: 0 !important;
  }
}

/* ==============================
   HOTFIX Tablet (768–990px)
   – rechts klebender Rand in Kategorie/Blog/Archiv
   – 2 Spalten bleiben erhalten
   ============================== */
@media (min-width: 768px) and (max-width: 990px){
  /* Sicheren Innenabstand direkt am Content erzwingen */
  .responsive #top .content{
    padding-left: var(--side-padding) !important;
    padding-right: var(--side-padding) !important;
    box-sizing: border-box !important;
  }

  /* Falls aus der Desktop-Gap-Logik noch Negativränder übrig sind → neutralisieren */
  .home .template-blog,
  .blog .content,
  .archive .content,
  .category .content,
  .search .content{
    margin-right: 0 !important;
  }
}

/* ==============================
   Smartphones (bis 767px)
   – 1 Spalte & Gap-Mechanik aus
   ============================== */
@media only screen and (max-width: 767px){
  /* Content volle Breite */
  .standard-content,
  .entry-content-wrapper.clearfix.standard-content{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--side-padding) !important;
    padding-right: var(--side-padding) !important;
    box-sizing: border-box !important;
  }

  /* 1) Gap-System für Startseiten-Teaser deaktivieren */
  .home .template-blog{ margin-right: 0 !important; }
  .home .template-blog .post-entry{ padding-right: 0 !important; }

  /* 2) Gap-System für Blog/Archiv/Kategorie/Suche deaktivieren */
  .blog .content,
  .archive .content,
  .category .content,
  .search .content{ margin-right: 0 !important; }
  .blog .content .post-entry,
  .archive .content .post-entry,
  .category .content .post-entry,
  .search .content .post-entry{ padding-right: 0 !important; }

  /* 3) 1/2-Spalten-Gutter deaktivieren (eine Spalte übereinander) */
  .entry-content-wrapper{ margin-right: 0 !important; }
  .entry-content-wrapper .flex_column.av_one_half.no_margin{
    padding-right: 0 !important;
    width: 100% !important; /* falls Enfold nicht automatisch stackt */
  }

  /* 4) Blog-/Archiv-Teaser explizit 1-spaltig erzwingen */
  .home .template-blog .post-entry,
  .blog .content .post-entry,
  .archive .content .post-entry,
  .category .content .post-entry,
  .search .content .post-entry{
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ==============================
   Slider-Pfeile Mobile/Tablet
   (falls benötigt)
   ============================== */
@media (max-width: 990px){
  .avia-content-slider .avia-slideshow-arrows a{
    top: var(--arrow-top-mobile, 100px) !important;
  }
}
@media (max-width: 767px){
  .avia-content-slider .avia-slideshow-arrows a{
    top: var(--arrow-top-mobile, 100px) !important;
  }
}

/* ==============================
   HOTFIX Phone (<= 767px)
   – Startseite: Beitragsslider-Bilder nicht „verlängern“
   – Overlays/Schatten/Margins im Slider aus
   ============================== */
@media (max-width: 767px){
  .home .avia-content-slider .slide-image{
    background: transparent !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
  }

  .home .avia-content-slider .slide-image > img,
  .home .avia-content-slider .slide-image picture > img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    box-shadow: none !important;
    border-radius: var(--radius-small);
  }

  .home .avia-content-slider .image-overlay,
  .home .avia-content-slider .image-overlay-inside{
    display: none !important;
  }
}

/* ==============================
   Bewegungs-Reduktion (global)
   ============================== */
@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ==============================
   iPhone Fix (<= 767px)
   – gleichmäßige Ränder + vollbreite Teaserbilder
   ============================== */
@media (max-width: 767px){

  /* Post-Container selbst: kein seitliches Padding aus der Gap-Logik */
  .blog .content .post-entry,
  .archive .content .post-entry,
  .category .content .post-entry,
  .search .content .post-entry{
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Karte (slide-entry) bekommt verlässliche Innen-Polster */
  .slide-entry{
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Teaserbilder: vollbreit, keine Auto-Margins, kein Transform */
  .post-entry .slide-image,
  .post-entry .slide-image > img,
  .post-entry .slide-image picture > img,
  .post-entry .slide-image > img.wp-post-image{
    width: 100% !important;
    height: auto !important;
    margin: 12px 0 20px 0 !important;
    transform: none !important;
  }
}

/* ==============================
   iPad Fix (768–990px)
   – Kategorie/Blog/Archiv: rechter Rand klebt → neutralisieren
   ============================== */
@media (min-width: 768px) and (max-width: 990px){

  /* Alte Listen-Gap sicher deaktivieren */
  .blog .content,
  .archive .content,
  .category .content,
  .search .content{
    margin-right: 0 !important;
  }
  .blog .content .post-entry,
  .archive .content .post-entry,
  .category .content .post-entry,
  .search .content .post-entry{
    padding-right: 0 !important;   /* sonst schiebt die Desktop-Logik */
    box-sizing: border-box !important;
  }

  /* Gleichmäßige Innen-Polster in der Karte */
  .slide-entry{
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Teaserbilder: vollbreit, ohne asymmetrische Ränder */
  .post-entry .slide-image > img,
  .post-entry .slide-image picture > img,
  .post-entry .slide-image > img.wp-post-image{
    width: 100% !important;
    height: auto !important;
    margin: 12px 0 24px 0 !important;
    transform: none !important;
  }
}

/* =========================================
   iPhone (<= 767px) – Kacheln sauber einrücken
   und Teaserbild wirklich vollbreit
   ========================================= */
@media (max-width: 767px){

  /* Kachel-Typ wie im Snippet: .slide-entry.flex_column.av_one_half */
  .post-entry.slide-entry.flex_column.av_one_half{
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 0 0 var(--teaser-gap) 0 !important;
  }

  /* Gleichmäßige Innen-Polster für angenehme Ränder */
  .post-entry.slide-entry.flex_column.av_one_half .slide-entry{
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Bild wirklich randlos vollbreit, keine Auto-Margins/Transforms */
  .post-entry.slide-entry.flex_column.av_one_half .slide-image,
  .post-entry.slide-entry.flex_column.av_one_half .slide-image > img,
  .post-entry.slide-entry.flex_column.av_one_half .slide-image picture > img,
  .post-entry.slide-entry.flex_column.av_one_half .slide-image > img.wp-post-image{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 12px 0 20px 0 !important;
    transform: none !important;
  }

  /* Sicherheit: Enfold-Overlay aus (falls inline wieder auftaucht) */
  .post-entry.slide-entry.flex_column.av_one_half .image-overlay,
  .post-entry.slide-entry.flex_column.av_one_half .image-overlay-inside{
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* =========================================
   iPad (768–990px) – 2 Spalten behalten,
   aber rechts/links gleichmäßig Luft in der Kachel
   ========================================= */
@media (min-width: 768px) and (max-width: 990px){

  /* Alte Listen-Gap-Polster sicher neutralisieren (rechts-kleben Fix) */
  .category .content .post-entry.av_one_half{
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Innen-Polster direkt an der Karte (wirkt unabhängig vom Grid) */
  .category .post-entry.slide-entry.flex_column.av_one_half .slide-entry{
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Teaserbild ohne asymmetrische Ränder */
  .category .post-entry.slide-entry.flex_column.av_one_half .slide-image > img,
  .category .post-entry.slide-entry.flex_column.av_one_half .slide-image picture > img,
  .category .post-entry.slide-entry.flex_column.av_one_half .slide-image > img.wp-post-image{
    width: 100% !important;
    height: auto !important;
    margin: 12px 0 24px 0 !important;
    transform: none !important;
  }

  /* Overlay-Safety auch hier */
  .category .post-entry.slide-entry.flex_column.av_one_half .image-overlay,
  .category .post-entry.slide-entry.flex_column.av_one_half .image-overlay-inside{
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* =========================================
   iPad-Fix (768–990px) NUR Kategorie-Ansicht
   – Negative Margin der Liste neutralisieren
   – Item-Padding rechts abschalten
   – Innenpolster in der Karte setzen
   – Bilder vollbreit halten
   ========================================= */
@media (min-width: 768px) and (max-width: 990px){

  /* 1) Kategorie-Listen-Container: negative "Gap"-Margin aus */
  .category .content{
    margin-right: 0 !important;
  }

  /* 2) Items: kein rechtes Gap-Padding (kommt aus 20er Gap-System) */
  .category .content .post-entry{
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 3) Gleichmäßige Luft IN der Karte, damit nichts am Rand klebt */
  .category .post-entry.slide-entry .slide-entry{
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* 4) Teaserbild randlos vollbreit innerhalb der Karte */
  .category .post-entry.slide-entry .slide-image,
  .category .post-entry.slide-entry .slide-image > img,
  .category .post-entry.slide-entry .slide-image picture > img,
  .category .post-entry.slide-entry .slide-image > img.wp-post-image{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 12px 0 24px 0 !important;
    transform: none !important;
  }

  /* 5) Safety: Theme-Overlays aus, damit kein pseudo-Rand entsteht */
  .category .post-entry.slide-entry .image-overlay,
  .category .post-entry.slide-entry .image-overlay-inside{
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}