/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
*/

/* ===================================================================
   1. HEADER, LOGO & GTRANSLATE FIX (Z-INDEX MASTER)
   =================================================================== */

/* --- DIE EBENEN KORREKT ORDNEN --- */

/* 1. Haupt-Header darf keine Elemente einsperren */
.header-wrapper, .header-main {
    z-index: auto !important;
    overflow: visible !important;
}

/* 2. EBENE 1 (GANZ HINTEN): Das Logo */
#logo {
    position: relative;
    z-index: 1 !important; 
}

.header-top {
    background-color: #003366 !important; /* Auf das neue Dunkelblau angepasst */
    z-index: 9999999;
}

/* 3. EBENE 10 (MITTE): Die orange Leiste */
.header-bottom {
    position: relative;
    z-index: 10 !important;
}

/* 4. EBENE 99999 (GANZ VORNE): Das GTranslate Dropdown */
.flex-col.flex-right { 
    z-index: 99999 !important; 
    overflow: visible !important;
}
.gtranslate_wrapper, .gt_switcher_wrapper, .gt_float_switcher, .gtranslate-menu-item {
    position: relative !important;
    z-index: 999999 !important;
}

/* Das eigentliche Dropdown (die Liste mit den Flaggen) ganz nach vorne holen */
.gtranslate_wrapper .gt_options, .gtranslate_wrapper select, .gt_switcher_wrapper .gt_options {
    position: absolute !important;
    z-index: 999999 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important; 
}

/* Verschiebung des Dropdowns (Nur für Desktop) */
@media screen and (min-width: 850px) {
    .gtranslate_wrapper .gt_options, .gt_switcher_wrapper .gt_options {
        left: 707.25px !important;
        right: auto !important;
    }
}

/* --- LOGO OPTIK FIX (Verhindert Quetschen & zieht es hoch) --- */
#logo a {
    overflow: visible !important;
}
#logo img, .logo img { 
    width: 250px !important; 
    height: auto !important; 
    max-height: 180px !important; 
    margin-top: -26px !important; 
    object-fit: contain !important; 
}

/* ===================================================================
   2. GENERAL LAYOUT, FORMS & TYPOGRAPHY
   =================================================================== */
.button, button, fieldset, input, select, textarea { margin-bottom: 0px; }
.searchform .button.icon i { display: none; }
.absolute-footer { padding: 0px 0 0px; height: 46px; }
.pull-left { margin-top: 15px; }

/* FIX: Sichert ab, dass Logos in dunklen Headern/Bannern sauber ausgerichtet sind */
.page-title-inner .row,
.section-bg-dark .row {
    align-items: center !important; /* Zentriert Text und Logo vertikal auf eine Linie */
}

/* Grid / Spacing Adjustments */
/* FIX: Setzt large-10 auf 100% Breite für maximalen Platz auf Single Pages */
.large-10 { 
    flex-basis: 100% !important; 
    max-width: 100% !important; 
}
.large-3 { flex-basis: 22%; max-width: 22%; }
.large-9 { flex-basis: 78%; max-width: 78%; }
.mb { margin-top: -30px; }
.row-large>.col, .row-large>.flickity-viewport>.flickity-slider>.col { margin-top: 25px; margin-bottom: 0; padding: 0px 30px 30px; }

/* Images & Titles */
.featured-title { height: 100px; }
.has-equal-box-heights .box-image img, .has-format img, .image-cover img, .video-fit iframe, .video-fit video, img.back-image {
    bottom: 0; font-family: "object-fit: cover;"; height: 120%; 
}
.blog-featured-title+#main .post-sidebar { margin-top: 5px; }
.box-list-view .box .box-image, .box-list-view .box .box-text, .box-vertical .box-image, .box-vertical .box-text { display: block; }
.entry-image img { width: 30%; margin-left: 30%; }

/* Spezifische Ausblendungen (Hiding Elements) */
.fill { display: none; }
#main > article > header { display: none; }
#wrapper > div > div.page-title-inner.container.flex-row.dark.is-large { padding-bottom: 178px; }
#main > div > div.portfolio-top > div > div.large-3.col.col-divided > div > p { display:none }
#main > div > div.page-title.normal-title.portfolio-breadcrumb-title > div > div.flex-col.flex-grow > h1 { display:none }
#main > div > div.page-title.normal-title.portfolio-breadcrumb-title > div > div.flex-col.flex-right > div > a:nth-child(3),
#main > div > div.page-title.normal-title.portfolio-breadcrumb-title > div > div.flex-col.flex-right > div > a:nth-child(1),
#main > div > div.page-title.normal-title.portfolio-breadcrumb-title > div > div.flex-col.flex-right > div > span:nth-child(2),
#main > div > div.page-title.normal-title > div > div.flex-col.flex-right > div > a:nth-child(1),
#main > div > div.page-title.normal-title > div > div.flex-col.flex-right > div > a:nth-child(3),
#main > div > div.page-title.normal-title > div > div.flex-col.flex-right > div > span:nth-child(2) { display: none; }

/* ===================================================================
   3. PLUGINS (DataTables, Directorist, Affiliate, etc.)
   =================================================================== */
td.col-title, td.dtr-hidden { display: table-cell !important; }
.dataTables_wrapper { z-index: 0; }
.posts-table-controls .dataTables_filter:first-child, .posts-table-controls .dataTables_length:first-child, .posts-table-controls .posts-table-select-filters:first-child, .posts-table-controls>.posts-table-reset:first-child { width: 300px; }
.listing-with-sidebar__sidebar { max-width: 25%; min-width: 20%; }
.listing-with-sidebar__type-nav { display: none; }
.mejs-controls:not([style*="display: none"]) { display: none; }
.atkp-credits { display: none; }

/* ===================================================================
   4. WOOCOMMERCE STANDARD LISTEN (Außerhalb des Plugins)
   =================================================================== */
.woocommerce-price-suffix { display:none; }
.product-summary .ux-product-brands a { background-color: #fff; border: 0px solid #e0e0e0; max-width: 100px; min-height: 70px; padding: 0px; transition: border-color .2s ease-in-out; }

/* Basis-Listenanpassung für WooCommerce Shortcodes, die nicht von IPC stammen */
.archive ul.products, .search-results ul.products { display: flex; flex-direction: column; gap: 0; padding: 0; margin-bottom: 3em; }
.woocommerce ul.products li.product { width: 100% !important; margin-bottom: 15px !important; padding: 0 !important; box-shadow: none !important; background: transparent !important; border: none !important; }
.woocommerce ul.products li.product:last-child { margin-bottom: 0 !important; }
.woocommerce ul.products li.product .box { box-shadow: none; padding: 0; background: transparent; }
.woocommerce ul.products li.product .box-image { display: none; }
.woocommerce ul.products li.product .box-text { padding: 0 !important; }

/* ===================================================================
   5. RESPONSIVE MEDIA QUERIES (Flatsome Basis)
   =================================================================== */
@media screen and (min-width: 800px) {
    .page-title-bg.fill { height: 134.111px; transform: translate3d(0px, -180.94px, 0px); }
    .searchform-wrapper { width: 100%; margin-left: 40px; }
}

@media screen and (max-width: 849px) {
    .form-flat input:not([type=submit]), .form-flat select, .form-flat textarea {
        background-color: rgba(0, 0, 0, .03); border-color: rgba(0, 0, 0, .09); border-radius: 0px; box-shadow: none; color: currentColor !important; width: 745px; margin-right: -10px; margin-left: -15px; height: 47px; margin-top: -5px;
    }
    .col .live-search-results, .header .search-form .live-search-results, .header-block .live-search-results { margin-top:3px; width: 97%; }
    .flex-row.form-flat .flex-col, .form-flat .flex-row .flex-col { margin-bottom: -5px; }
    .searchform .button.icon i { display:block; font-size: 1.2em; margin-right: 42px; margin-left: -20px; }
    
    /* Bereinigte Container für Mobile (ohne Grid-Zerstörung) */
    .page-wrapper { padding-bottom: 0px; padding-top: 0px; }
    .row-large>.col, .row-large>.flickity-viewport>.flickity-slider>.col { margin-bottom: 0; padding: 0px 0px 0px; }
    .featured-title { height: 110px; }
    #main > div > div.portfolio-top > div > div.large-3.col.col-divided { display:none; }
}

@media screen and (max-width: 549px) {
    .form-flat input:not([type=submit]), .form-flat select, .form-flat textarea { width: 375px; margin-right: 0px; margin-left: -15px; }
    .col .live-search-results, .header .search-form .live-search-results, .header-block .live-search-results { width: 85%; }
    .featured-title { height: 95px; }
    
    /* DataTables Mobile */
    table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before { display: none; }
    table.dataTable>tbody>tr.child { display: none; }
    table.posts-data-table.dtr-inline.collapsed>tbody>tr>td.dtr-control, table.posts-data-table.dtr-inline.collapsed>tbody>tr>th.dtr-control { padding-left: 4px; }
    .box-image { height: 100%; }
    
    /* Directorist Mobile */
    .article-inner { transition: opacity .3s, box-shadow .5s, transform .3s; width: 108%; margin-left: -13px; }
    #Iframe { max-width: 108%; margin-left: -9px; }
    .directorist-row { margin-right: -38px; margin-left: -35px; margin-top: -58px; min-width: 100%; }
    .listing-with-sidebar__searchform .directorist-search-form__box { padding: 0px; }
    .directorist-container, .directorist-container-fluid, .directorist-container-lg, .directorist-container-md, .directorist-container-sm, .directorist-container-xl, .directorist-container-xxl { width: 100%; padding-right: 0px; padding-left: 0px; }
    .directorist-content-active .directorist-listings-header { width: 160%; margin-bottom: 25px; }
    .listing-with-sidebar__sidebar { max-width: 60%; min-width: 20%; }
}

/* ==============================================================================
   NATIVES FLATSOME BLOG ARCHIV - SPARENTO DESIGN (Blau / Orange)
   ============================================================================== */

/* 3-Spalten Grid auf Desktop erzwingen (NUR im Blog-Archiv Bereich) */
@media screen and (min-width: 850px) {
    body.archive.category #post-list .row > .col {
        max-width: 33.33333% !important;
        flex-basis: 33.33333% !important;
    }
}

/* KARTEN-DESIGN - Greift gezielt nur auf die Beiträge (Kacheln) */
body.archive.category .post-item .col-inner {
    background-color: #ffffff !important; 
    border-radius: 12px !important; 
    overflow: hidden !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.06) !important; 
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #eaeaea;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Leichter Hover-Lifting Effekt */
body.archive.category .post-item .col-inner:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important; 
}

/* Alte Flatsome Box-Styles zurücksetzen */
body.archive.category .post-item .box {
    background-color: transparent !important; 
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Unnötige Standard-Flatsome Elemente ausblenden (Datum, Trennstrich etc.) */
body.archive.category .post-item .badge,                
body.archive.category .post-item .is-divider,           
body.archive.category .post-item .post-meta,
body.archive.category .post-item .from_the_blog_excerpt {           
    display: none !important; 
}

/* Bildbereich fixieren */
body.archive.category .post-item .box-image {
    height: 220px;
    overflow: hidden;
}
body.archive.category .post-item .box-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Verhindert das Verzerren von Beitragsbildern */
}

/* TEXT & TITEL BEREICH */
body.archive.category .post-item .box-text {
    padding: 25px !important; 
    text-align: left !important;
    background-color: transparent !important;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Schiebt den Button nach unten */
}

body.archive.category .post-item .box-text .post-title {
    font-size: 1.3rem !important; 
    font-weight: 800 !important; 
    color: #1f3b56 !important; /* Sparento Dunkelblau */
    margin-bottom: 15px !important; 
    line-height: 1.3 !important;
    padding-top: 0 !important;
}

body.archive.category .post-item .box-text .post-title a {
    color: #1f3b56 !important;
}

body.archive.category .post-item .box-text .post-title a:hover {
    color: #f27c00 !important; /* Sparento Orange beim Hover */
}

/* "MEHR ERFAHREN" BUTTON */
body.archive.category .custom-mehr-erfahren-btn {
    background-color: #f27c00 !important; /* Sparento Orange */
    color: #fff !important;
    border: none !important;
    width: auto !important; 
    margin: 0 !important;
    padding: 12px 24px !important;
    text-transform: none !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    border-radius: 6px !important; 
    display: inline-block !important;
    text-align: center;
    transition: background-color 0.2s ease;
}

body.archive.category .custom-mehr-erfahren-btn:hover { 
    background-color: #d66d00 !important; /* Etwas dunkleres Orange */
}

body.archive.category .custom-blog-button-wrap {
    margin-top: auto !important; /* Zwingt den Button an den unteren Rand */
    padding-top: 20px;
}

/* ==============================================================================
   SINGLE BLOG POST - FLATSOME STANDARDS AUSBLENDEN
   ============================================================================== */
/* Versteckt den dunklen, doppelten Standard-Titel und das Datum von Flatsome auf Beiträgen */
.blog-single .page-title,
.blog-single .entry-header,
.blog-single .entry-title,
.blog-single .entry-meta,
.blog-single .entry-image {
    display: none !important;
}

/* Verhindert einen unnötigen weißen Abstand über unserem neuen Hero-Header */
.blog-single #content {
    padding-top: 0 !important;
}

/* ==============================================================================
   IPC SHORTCODE TABELLE: FIX FÜR MOBILE LIST VIEW (Alle Vergleiche Seite)
   ============================================================================== */
@media (max-width: 768px) {
    /* Setzt das Flex-Layout der Liste auf dem Handy auf "untereinander" (Spalte) statt nebeneinander */
    .list-view .ipc-post-list-item {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 15px !important;
    }
    
    /* Bild in voller Breite zentrieren */
    .list-view .ipc-post-list-image {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 15px !important;
    }
    
    .list-view .ipc-post-list-image img {
        height: auto !important;
        max-height: 200px !important;
        width: 100% !important;
        object-fit: contain !important;
    }
    
    /* Text mittig setzen und garantieren, dass er nicht verschwindet */
    .list-view .ipc-post-list-info {
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    
    .list-view .ipc-post-list-name a {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;
        white-space: normal !important; /* Verhindert das Abschneiden von langen Titeln */
    }

    /* Button-Bereich auf volle Breite setzen */
    .list-view .ipc-post-list-right-col {
        width: 100% !important;
        padding-left: 0 !important;
    }
    
    .list-view .ipc-action-button.ipc-button-offer {
        width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
    }
}

.col.medium-3.small-12.large-3 {
    display: none !important;
}