/* css/20-layout-containers.css
   ----------------------------
   Basis-Layout (Desktop):
   - Kartenhintergrund auf .slide-entry
   - EIN Gap-System per „negativer Rand am Container“ + „Padding am Item“
   - Vertikaler Abstand via margin-bottom an den Items
   - KEINE Media Queries hier (alles Responsive in 90)
   - KEINE Sidebar-, Heading- oder Bild-Regeln
*/

/* Hintergrundflächen */
body, #wrap_all, .main_color, #header_main{
  background-image: var(--bg-pattern);
  background-repeat: var(--bg-pattern-repeat);
  background-position: var(--bg-pattern-position);
  background-color: var(--hell, #fff);
}

/* Footer */
#footer { background: var(--footer-bg) !important; }

/* Globale Innenabstände zentraler Container */
#top #wrap_all .content,
#top #wrap_all .container,
#top .container_wrap .container,
#top .template-page .content,
#top .template-blog .content,
#top .template-archive .content,
#top .template-page .container,
#top .template-blog .container,
#top .template-archive .container{
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
}

/* Inhaltsspalte – zusätzlicher Gutter */
.entry-content-wrapper.clearfix.standard-content{
  padding: 0 var(--page-gutter) !important;
}

/* Helle Hintergründe für Eingabeflächen */
#aiowps-captcha-answer,
#archives-dropdown-4,
#author, #comment, #email, #url, input#s,
.sbi_follow_btn,
.wrap-menu-container{
  background: var(--hgf) !important;
}

/* Optional: Außenabstand des Content-Bereichs */
#top #wrap_all .content{
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
}

/* Transparente Wrapper/Overlays (stabil, unkritisch) */
#sb_instagram .sbi_follow_btn,
.albumlist .album,
.av_slideshow_full .avia-caption-title,
.avia-caption-title .header_title,
.news-thumb,
.relThumWrap,
.slide-image,
.template-page .avia_image img,
.thumblist .thumb{
  background: transparent !important;
}

/* =========================
   Karten-Optik
   ========================= */
.slide-entry,
.single-post .standard-content{
  background: rgba(239,237,208,0.3);
  border-radius: var(--radius-large);
  border: 2px solid var(--hgf) !important;
  padding: 16px !important;
  overflow: hidden;
}

/* Bild-Container darf Schatten nicht abschneiden */
.home .template-blog .post-entry .slide-image,
.blog .content .post-entry .slide-image,
.archive .content .post-entry .slide-image,
.category .content .post-entry .slide-image,
.search .content .post-entry .slide-image{
  overflow: visible !important;
}

/* =========================
   Spaltenabstände – Gap-Stabilisierung
   (Container: negativer Rand, Item: rechtes Padding)
   ========================= */

/* A) Startseite – Blog-Teaser */
.home .template-blog{
  margin-right: calc(var(--home-col-gap) * -1) !important;
}
.home .template-blog .post-entry{
  padding-right: var(--home-col-gap) !important;    /* horizontaler Gap */
  margin-bottom: var(--home-row-gap) !important;    /* vertikaler Gap   */
  box-sizing: border-box;
}

/* B) Listenansichten – Blog/Archiv/Kategorie/Suche */
.blog .content,
.archive .content,
.category .content,
.search .content{
  margin-right: calc(var(--list-col-gap) * -1) !important;
}
.blog .content .post-entry,
.archive .content .post-entry,
.category .content .post-entry,
.search .content .post-entry{
  padding-right: var(--list-col-gap) !important;     /* horizontaler Gap */
  margin-bottom: var(--list-row-gap) !important;     /* vertikaler Gap   */
  box-sizing: border-box;
}

/* =========================
   Enfold 1/2-Spalten (.av_one_half.no_margin) – fester Gutter
   Technik: Parent bekommt negativen Rand, Items rechtes Padding
   ========================= */

/* Parent: bündig halten */
.entry-content-wrapper{
  margin-right: calc(var(--columns-gap) * -1) !important;
}

/* Items: künstlicher Gutter als rechtes Padding */
.entry-content-wrapper .flex_column.av_one_half.no_margin{
  padding-right: var(--columns-gap) !important;
  box-sizing: border-box !important;
}

/* Abstand zwischen Content und Sidebar */
/* Rechter Sidebar (Standard): Luft zwischen Content und Sidebar-Inhalt */
#top .sidebar { 
  padding-left: var(--content-sidebar-gap) !important;
}

/* Falls du eine linke Sidebar verwendest: spiegeln */
#top.sidebar_left .sidebar {
  padding-left: 0 !important;
  padding-right: var(--content-sidebar-gap) !important;
}

/* Kleiner Zusatz: etwas Abstand im Sidebar-Inneren beibehalten */
#top .sidebar .inner_sidebar{
  /* falls vorhanden, leichtes Basis-Polster */
  padding-left: 0; /* oder belassen, wenn du hier schon Werte nutzt */
}

/* Mobile: Sidebar unter Content – horizontale Gaps weg, vertikal Luft */
@media (max-width: 990px){
  #top .sidebar{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 24px; /* vertikaler Abstand unter dem Content */
  }
}

/* =========================================
   Responsive Fix: Sidebar unter Content (≤ 990px)
   – stellt Enfold-Standard wieder her
   – deaktiviert Gap-System mobil/tablet
   ========================================= */
@media (max-width: 989.98px){

  /* Gap-System (negativer Rand / Padding) aus */
  .home .template-blog,
  .blog .content,
  .archive .content,
  .category .content,
  .search .content{
    margin-right: 0 !important;
  }
  .home .template-blog .post-entry,
  .blog .content .post-entry,
  .archive .content .post-entry,
  .category .content .post-entry,
  .search .content .post-entry{
    padding-right: 0 !important;
  }

  /* Container-Reihe neutralisieren (falls aufgezogen) */
  .sidebar_right #top .container_wrap .container{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Content & Sidebar stapeln, volle Breite */
  #top .content,
  #top .sidebar{
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* etwas Luft oberhalb der Sidebar */
  #top .sidebar{ margin-top: 24px !important; }
}