/*
Theme Name: CeramOptec
Description: A theme for CeramOptec
Version: 1.0
Author: cambium.digital
Author URI: https://cambium.digital
Template: enfold
*/



/*===============================================
=            0. Root-Variablen                =
===============================================*/
:root {
  /* Farben */
  --color-primary:   #223c76;
  --color-secondary: #f0c725;
  --color-bg:        #ffffff;
  --color-border:    #e6e6e6;
  --color-text:      #223c76;
  --color-text-light:#ffffff;
  
  /* Abstände & Radien */
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --radius-sm: 0.5rem;
  --radius-lg: 1rem;
  
  /* Transition */
  --transition-fast: all 0.3s ease;
  --transition-med:  all 0.5s ease;
}

/*===============================================
=            1. Basis-Strukturen               =
===============================================*/
#main {
  background-color: var(--color-bg);
}

/*===============================================
=            2. Karten (.ef-card)              =
===============================================*/
.ef-card {
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-med);
}
.ef-card:hover {
  transform: scale(1.1);
}
.ef-card__title {
  color: var(--color-primary);
  font-weight: bold;
  font-size: 1.25rem;
  margin: var(--spacing-lg) 0 var(--spacing-md);
}

/*===============================================
=      3. Checkliste (.ef-checklist)           =
===============================================*/
.ef-checklist {
  list-style: none;
  padding-left: 0;
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.5;
}
.ef-checklist li::marker {
  display: none;
}
.ef-checklist li::before {
  content: "✔︎";
  color: var(--color-primary);
  margin-right: var(--spacing-sm);
  font-weight: bold;
}

/*===============================================
=        4. Masonry-Layout                    =
===============================================*/
/* Sort-Buttons */
.ef-masonry-sort {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-text-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-sm) var(--spacing-md);
}
.ef-masonry-sort a {
  color: var(--color-text-light);
  margin: 0 var(--spacing-sm);
  font-weight: 400;
}
.ef-masonry-sort .active {
  font-weight: bold;
}

/* Masonry-Einträge */
.ef-masonry-entry {
  box-sizing: border-box;
}
.ef-masonry-entry .ef-masonry-box {
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ef-masonry-entry img {
  display: block;
  width: 100%;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

/*===============================================
=       5. Formulare & Buttons                 =
===============================================*/
.ef-form__field,
.ef-form__textarea {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-secondary);
  padding: var(--spacing-md);
  background-color: var(--color-primary);
  color: var(--color-text-light);
}
.ef-form__field::placeholder,
.ef-form__textarea::placeholder {
  color: #ccc;
}

.ef-btn {
  display: inline-block;
  background-color: var(--color-secondary);
  color: var(--color-primary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-secondary);
  padding: var(--spacing-md) var(--spacing-lg);
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
  transition: var(--transition-fast);
}
.ef-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-secondary);
}

/*===============================================
=            6. Produkt-Boxen                  =
===============================================*/
.ef-product-container {
  max-width: 1310px;
  margin: 0 auto;
  background-color: #f1f1f1;
  border-radius: 50px;
}
.ef-product-box {
  background-color: var(--color-bg);
}
.ef-product-box__column {
  border: 1px solid #faf9fb; /* Korrektur statt ungültigem svh */
}

/*===============================================
=            7. Footer-Bereich                 =
===============================================*/
#footer {
  border: 0;
  padding-bottom: 0;
}
#footer .container {
  max-width: 96%;
  background-color: var(--color-primary);
  border-bottom: 2px solid var(--color-bg);
}
#footer .widget{
  margin-block:15px;
}
#socket .container {
  max-width: 96%;
  background: var(--color-primary);
  border: 0;
}
/* Spaltenverteilung */
#footer .flex_column:first-child {
  width: 30%;
}
#footer .flex_column:nth-child(n+2):nth-child(-n+5) {
  width: 17%;
}

/*===============================================
=      8. Sticky Header (Enfold-kompatibel)    =
===============================================*/

@media screen and (min-width:768px){
    #header {
    position: relative;
    width: 100%;
    transform: translateY(0);
    transition: transform 0.25s ease, opacity 0.25s ease;
    z-index: 4;
    }
    .ef-header-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-100%);
    opacity: 0;
    }
    .ef-header-sticky.ef-header-show {
    transform: translateY(0);
    opacity: 1;
    }
}

/*===============================================
=      9. Header / Navigation
===============================================*/


.sub_menu>ul>li>a{
    display: flex;
    align-items: center;
    padding-block: 2px;
}

#top .pll-parent-menu-item > a > span{
    padding-left: .2em;
}

.html_av-overlay-side #top .av-burger-overlay li {
    border: 0px solid #fff;
    border-top-width: 1px;
}

.html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul a{
    color: #fff;
}

.pll-parent-menu-item:before{
  content: ' ';
  width: 16px;
  height: 16px;
  float: left;
  margin-right: 4px;
  background: transparent url("/wp-content/uploads/2025/06/White_Globe_Icon.png") no-repeat;
  background-size: 14px;
}

#top .sub_menu li ul{
  top: 17px;
}

/*===============================================
=     10. Search
===============================================*/


.header_color .ajax_search_excerpt { display: none; }

.header_color .av_ajax_search_image {display: none;}

.search .post-meta-infos {
    display: none!important;
}

.header_color .av_ajax_search_title {
    text-transform: none;
}

.header_color .av_ajax_search_content {
    border-left: 2px solid var(--color-secondary);
    padding-left: 8px;
}

.header_color .ajax_search_response h4{
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-border);
    padding-block: 2px 6px;
    margin-bottom: 6px;
}


/* 11. Blog */
.av-alb-blogposts.template-blog .av-heading-wrapper{
  display: flex;
  flex-direction: column-reverse;
}

.av-alb-blogposts.template-blog .post-meta-infos .more-link{
  font-size: 0;
border-width: 2px;}

#top .fullsize .template-blog .post-title{
  margin: 0;
}

.more-link-arrow.avia-svg-icon svg:first-child{
    font-size: 1.8em;
    margin: 4px 0 0px 3px;
}

.main_color .alternate_color .iconbox_content *{
  color: inherit;
}

#top .main_color .alternate_color .iconbox_content svg:first-child,
#top .main_color .alternate_color .iconbox_icon.heading-color.avia-svg-icon svg:first-child{
  fill: #fff;
}

.avia_transform.js_active .avia_animated_image .av-display-hotspot .av-permanent-tooltip-single{
  opacity: inherit !important;
}

/* News */

#top .avia-content-slider.avia-content-grid-active .slide-entry-title{
  padding-top: 0;
  padding-bottom: 0;
  font-size: 1.5em;

}

#top .avia-content-slider.avia-content-grid-active .blog-categories,
#top .avia-content-slider.avia-content-grid-active .entry-footer{
  display: none;
}

#top .avia-content-slider.avia-content-grid-active .slide-content{
  background-color: var(--enfold-main-color-bg2);
  padding: 4%;
  border-radius: 16px;
}

#top .avia-content-slider.avia-content-grid-active .slide-entry{
    border: 2px solid var(--enfold-main-color-primary);
    border-radius: 16px;
}

#top .avia-content-slider.avia-content-grid-active .slide-entry.av_one_third{
  margin-left: 0;
  width:32.99999999%
}

#top .avia-content-slider.avia-content-grid-active .slide-entry.av_one_third.first{
  margin-left: 0;
}

#top .avia-content-slider.avia-content-grid-active .slide-entry-wrap{
  background-color: var(--enfold-main-color-bg2);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  gap: 2%;
}

#top .avia-content-slider.avia-content-grid-active .slide-image{
  border-radius: 16px 16px 0;
}