/**
 * KuLaDu Custom Elements Styles
 *
 * Styles for all custom Bricks elements.
 * Uses Design System variables from kuladu-variables.css
 *
 * TYPOGRAPHY: Alle Typo-Styles in kuladu-typography.css definiert
 * Nutze Utility-Classes für Font-Sizes (.text-sm, .text-base, etc.)
 */


 /*
 Navigation
 */

 #brxe-wgaoyu .bricks-nav-menu > li > .sub-menu {
    padding-top: var(--space-2);
    padding-bottom: var(--space-3);
}


 /*
 Ausgewählte Elemente in Containern immer 100% Breite
 */
 .brxe-container > .brxe-kuladu-image-bubble{
	width: 100%;
 }

 /*
 Shape Divider Sonderbreite
 */
.bricks-shape-divider{
	width: 100vw !important;
	max-width: 100vw !important;
	min-width: 100vw !important;
}

/* ==========================================================================
   Gallery Element
   ========================================================================== */

.brxe-image-gallery.bricks-layout-wrapper {
    --columns: 3;
    --gutter: var(--space-4);

    flex-flow: row wrap;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* Gallery Items mit Border */
ul.brxe-image-gallery > li.bricks-layout-item:has(img) {
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    border: 2px solid var(--color-black) !important;
}


/* ==========================================================================
   Accordion Element
   ========================================================================== */

.brxe-accordion .accordion-title-wrapper h1, .brxe-accordion .accordion-title-wrapper h2, .brxe-accordion .accordion-title-wrapper h3, .brxe-accordion .accordion-title-wrapper h4, 
.brxe-accordion .accordion-title-wrapper h5, .brxe-accordion .accordion-title-wrapper h6, .brxe-accordion .accordion-title-wrapper p, .brxe-accordion .accordion-title-wrapper .h1, 
.brxe-accordion .accordion-title-wrapper .h2, .brxe-accordion .accordion-title-wrapper .h3, .brxe-accordion .accordion-title-wrapper .h4, .brxe-accordion .accordion-title-wrapper .h5, 
.brxe-accordion .accordion-title-wrapper .h6{
    margin: 0 !important;
} 

.brxe-accordion .accordion-item{
    border-top: 1px solid var(--color-gray-300);
    padding: var(--space-4) 0;
}

.brxe-accordion .accordion-item:last-child{
    border-bottom: 1px solid var(--color-gray-300);
}

:where(.brxe-accordion) .accordion-title .icon{
    font-size: var(--font-size-lg);
}

.brxe-accordion .accordion-title-wrapper .accordion-subtitle{
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    margin-top: var(--space-1);
}




/* ==========================================================================
   Global Video and Image Styling (Border Styles)
   ========================================================================== */

.brxe-image, .brxe-video{
    border-radius: var(--radius-lg);
    border: 2px solid var(--color-black);
}


/* ==========================================================================
   Tabs (Only Horizontal)
   ========================================================================== */

.brxe-tabs ul, .brxe-tabs li{
    border-radius: var(--radius-md);
}

.brxe-tabs ul.tab-menu{
    border-radius: var(--radius-md) var(--radius-md) 0 var(--radius-md);
}

.brxe-tabs ul.tab-content{
    border-radius: var(--radius-md) 0 var(--radius-md) var(--radius-md);
}

ul.tab-menu, ul.tab-content, li.tab-title{
    border-color: var(--color-gray-300) !important;
}

ul.tab-menu{
    border-bottom: 1px solid var(--color-gray-200);
}


li.tab-title{
    background-color: var(--color-sand-50);
}

li.tab-title *{
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: var(--text-size-200);
    color: var(--color-gray-700);
}

li.tab-title.brx-open{
    background-color: var(--color-sand-100);
}

li.tab-title.brx-open *{
    color: var(--color-black);
}

ul.tab-content{
    background-color: var(--color-sand-100);
    border-top: 0 !important;
}


/* ==========================================================================
   Notifications (semantics + neutrals)
   ========================================================================== */

   :where(.brxe-alert).info, :where(.message).info, :where(div).info{
    background-color: var(--color-info-100);
    border: 2px solid var(--color-info-900);
    border-color: var(--color-info-900) !important;
    border-radius: var(--radius-md);
    color: var(--color-info-950);
   }
   :where(.brxe-alert).info *, :where(.message).info *, :where(div).info *{
    color: var(--color-info-950);
   }

   :where(.brxe-alert).success, :where(.message).success, :where(div).success{
    background-color: var(--color-success-50);
    border: 2px solid var(--color-success-900);
    border-color: var(--color-success-900) !important;
    border-radius: var(--radius-md);
    color: var(--color-success-950);
   }
   :where(.brxe-alert).success *, :where(.message).success *, :where(div).success *{
    color: var(--color-success-950);
   }

   :where(.brxe-alert).warning, :where(.message).warning, :where(div).warning{
    background-color: var(--color-warning-100);
    border: 2px solid var(--color-warning-900);
    border-color: var(--color-warning-900) !important;
    border-radius: var(--radius-md);
    color: var(--color-warning-950);
   }
   :where(.brxe-alert).warning *, :where(.message).warninig *, :where(div).warning *{
    color: var(--color-warning-950);
   }

   :where(.brxe-alert).danger, :where(.message).danger, :where(div).danger{
    background-color: var(--color-error-100);
    border: 2px solid var(--color-error-900);
    border-color: var(--color-error-900) !important;
    border-radius: var(--radius-md);
    color: var(--color-error-950);
   }
   :where(.brxe-alert).danger *, :where(.message).danger *, :where(div).danger *{
    color: var(--color-error-950);
   }

   :where(.brxe-alert).muted, :where(.message).muted, :where(div).muted{
    background-color: var(--color-sand-100);
    border: 2px solid var(--color-sand-900);
    border-color: var(--color-sand-900) !important;
    border-radius: var(--radius-md);
    color: var(--color-sand-950);
   }
   :where(.brxe-alert).muted *, :where(.message).muted *, :where(div).muted *{
    color: var(--color-sand-950);
   }


/* ==========================================================================
   Swiper adjustments (Controls, Shadows, Borders)
   ========================================================================== */

   .swiper-button i:before{
    filter:
      drop-shadow(.5px 0 0 var(--color-black))
      drop-shadow(-.5px 0 0 var(--color-black))
      drop-shadow(0 .5px 0 var(--color-black))
      drop-shadow(0 -.5px 0 var(--color-black))
      drop-shadow(.5px .5px 0 var(--color-black))
      drop-shadow(-.5px .5px 0 var(--color-black))
      drop-shadow(.5px -.5px 0 var(--color-black))
      drop-shadow(-.5px -.5px 0 var(--color-black));
   }

   .swiper-slide .image{
    border: 2px solid var(--color-black);
    border-radius: var(--radius-md);
   }



/* ==========================================================================
   Forms
   ========================================================================== */

   form.brxe-form{
    
   }

   form.brxe-form *{
        border-color: var(--color-gray-500);
   }

   form.brxe-form label, form.brxe-form .label{
        font-family: var(--font-mono);
        text-transform: none;
        font-size: var(--text-size-90);
        font-weight: var(--font-weight-normal);
        color: var(--color-gray-900);
        letter-spacing: var(--letter-spacing-tight);
   }

   :where(.brxe-form) .required:after {
        color: var(--color-error-700);
        font-weight: var(--font-weight-bold);
   }

   .input, input:not([type=submit]), select, textarea{
    line-height: 26px !important;
   }

   .input, input:not([type=submit]), select, textarea{
    padding: var(--space-2) var(--space-3);
   }

   :where(.brxe-form) input::placeholder, :where(.brxe-form) textarea::placeholder {
        color: var(--color-gray-500);
   }

   :where(.brxe-form) input, :where(.brxe-form) textarea, :where(.brxe-form) select, :where(.brxe-form) .choose-files {
        border-radius: var(--radius-md);
   }

   :where(.brxe-form) select{
    background-color: var(--color-white);
   }

   :where(.brxe-form) .choose-files{
    background-color: var(--color-info-100);
    color: var(--color-info-950) !important;
    font-weight: var(--font-weight-bold) !important;
    border: 2px solid var(--color-info-900) !important;
   }

   div:has( > label.choose-files) input{
    position: absolute;
   }

   :where(.brxe-form) input {
        font-size: var(--text-size-100);
   }

   :where(.brxe-form) ul.options-wrapper li label {
        font-size: var(--text-size-100);
        line-height: var(--line-height-normal);
        font-family: var(--font-body);
   }

   :where(.brxe-form) ul.options-wrapper li {
        height: auto;
        padding: var(--space-1) 0;
   }

   :where(.brxe-form) .options-wrapper input[type=checkbox], :where(.brxe-form) .options-wrapper input[type=radio]{
        height: 20px;
        width: 20px;
        top: 4px;
        margin-right: var(--space-1);
   }