/*Homepage*/

.steuern-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* white at 30% opacity */
    pointer-events: none; /* allows clicks on inner content */
    z-index: 1; /* sits above background but below text */
}

.steuern-bg > * {
    position: relative;
    z-index: 2;
}

.treuhand-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1); /* white at 30% opacity */
    pointer-events: none; /* allows clicks on inner content */
    z-index: 1; /* sits above background but below text */
}

.treuhand-bg > * {
    position: relative;
    z-index: 2;
}

.wirt-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3); /* white at 30% opacity */
    pointer-events: none; /* allows clicks on inner content */
    z-index: 1; /* sits above background but below text */
}

.wirt-bg > * {
    position: relative;
    z-index: 2;
}



/* Make the outer row handle layering */
.wp-block-columns {
  position: relative;
  overflow: visible; /* important: allows overlap */
}

.hero-row {
  position: relative;
  overflow: visible;
}


/* TEXT COLUMN (on top) */
.text-column {
  position: relative;
  z-index: 5;
}

/* Home - Vimeo Embed */

.video-column {
  position: absolute;
  right: 0;
  top: 0;
  width: 80vw !important;
  max-width: 700px;
  z-index: 1;
}

/* This creates the Square (1:1) container for the iframe */
.video-column .vimeo-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* 1:1 Aspect Ratio */
  height: 0;
  overflow: hidden;
}

/* This forces the Vimeo iframe to fill that square */
.video-column iframe {
position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78%; /* (16 / 9) * 100 to ensure no black bars */
  height: 100%;
  transform: translate(-50%, -50%); /* Centers the crop */
  pointer-events: none; /* Optional: prevents clicking the video */
}

.lower-columns {
  margin-top: 7vh !important;
  position: relative;
  z-index: 2;
}


/*Home - Mobile*/

@media screen and (max-width: 767px) {
    /* 1. Ensure the parent container stacks columns */
    .wp-block-columns.hero-row {
        flex-direction: column !important; 
        /* Ensure the container is positioned normally */
        position: static !important;
        /* Reset any container-level negative margins */
        margin: 0 !important;
    }

    /* 2. Target the text column (must be on top, must be static) */
    .wp-block-column.text-column {
        order: 1 !important;
        position: static !important; /* IMPORTANT: Force static positioning */
        z-index: 2 !important;      /* Ensure it sits above the video */
        transform: none !important;  /* Reset any transforms */
        
        /* Ensure content inside the text column is visible */
        overflow: visible !important;
        
        /* Keep original padding/margins for internal content spacing */
        padding: var(--wp--preset--spacing--40) !important;
        margin: 0 !important;
    }

    /* 3. Target the video column (must be below, must be static) */
    .wp-block-column.video-column {
        order: 2 !important;
        position: static !important; /* CRITICAL: Force static positioning */
        z-index: 1 !important;      /* Ensure it sits below the text */
        transform: none !important;  /* Reset any transforms */
        
        /* Override specific layout properties */
        flex-basis: auto !important; 
        width: 100% !important; 
        margin: 0 !important; /* Reset margins */
        padding: 0 !important; /* Reset padding for better fit */
    }

    /* 4. Ensure the video element itself is static and scaled */
    .wp-block-column.video-column figure.wp-block-video video {
        width: 100% !important;
        height: auto !important;
        position: static !important; /* Ensure the video element doesn't float */
        transform: none !important;
        margin-top: 0 !important; /* Reset any top margin causing the video to shift up */
    }
}

/* Easy Tabs Plugin Styles */

.wp-block-easy-tabs-block-tab-button {
    background: #ffffff;
    }

.wp-block-easy-tabs-block-tabs.has-active-etb-bg-color .wp-block-easy-tabs-block-tab-button.etb-active-tab, .wp-block-easy-tabs-block-tabs.has-active-etb-bg-color .wp-block-easy-tabs-block-tab-button[data-etb-active-tab] {
    background: #B3B470 !important;
    }

@media (max-width: 1024px) {
    .wp-block-easy-tabs-block-tab-buttons[class].has-etb-buttons-scrollable {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    gap: 0.5em;
    }
}

/* Trending Section */ 

/* BUTTON ROW */
.menu-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

/* BUTTON STYLE */
.menu-btn {
  padding: 10px 20px;
  background-color: #0073aa;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  transition: 0.3s;
}

.menu-btn:hover,
.menu-btn.active {
  background-color: #005177;
}

/* CONTENT SECTIONS */
.content-section {
  display: none;
  padding: 10px 0;
}

.content-section.active {
  display: block;
}

/* cmt DNA Video */
.vimeo-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.vimeo-container .video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* Aspect ratio 16:9, adjust if needed */
  overflow: hidden;
}

.vimeo-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 1000px) {
  .video-desktop {
    display: none !important;
  }
}

@media (min-width: 1001px) {
  .video-mobile {
    display: none !important;
  }
}

/* Footer */

.footer-year {
  font-size: var(--wp--preset--font-size--x-small);
  color: #fff;
  font-family: var(--wp--preset--font-family--body);
  margin-top: -2em !important;
}

/* Services Grids */

.services-grid .wp-block-cover {
    min-height: 0 !important;
    --wp--style--block-gap: 0px !important;
}

/* Services CTA's */
.cta-kontakt {
  gap: 0rem !important;
}

.button-nowrap {
      white-space: nowrap;
}

/* 2. Target the specific "inner container" where Gutenberg puts text */
.services-grid .wp-block-cover__inner-container {
    padding: 0.25rem 0.25rem!important;    /* Adjust these 4 values to control */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 3. Remove any automatic margins from the text itself */
.services-grid .wp-block-cover p {
    line-height: 1.2 !important;
    margin: 0 !important;
}

.cover-grid:hover {
    background-color: #B3B470 !important;
}

.cover-grid:hover .wp-block-cover__background {
    opacity: 0 !important;
}

.cover-grid p a {
    text-decoration: none !important;
    }
    
.cover-grid p a:hover {
    text-decoration: none !important;
    }

/* Blog */

.categories-list {
    display: flex;
    gap: 1rem;
}

.wp-block-search__label {
   display: none;
   }

.wp-block-search__input:focus {
  border-color: #ffffff !important; 
  box-shadow: 0 0 0 1px #007cba;
  outline: 2px solid transparent;
}

/* Cover Blocks - Mobile - Padding */

@media (min-width: 400px) {
.wp-block-cover-padding-mobile {
  padding: 0.5rem;
}
}