/* ============================================================
   Ingbau Fachbereiche – Frontend Stylesheet
   Farben via CSS-Variablen anpassen (Avada → Custom CSS)
   ============================================================ */

:root {
    --ingbau-btn-bg:           #ffffff;
    --ingbau-btn-color:        #000000;
    --ingbau-btn-border:       #000000;
    --ingbau-btn-active-bg:    #000000;
    --ingbau-btn-active-color: #ffffff;
    --ingbau-btn-hover-bg:     #000000;
    --ingbau-btn-hover-color:  #ffffff;
    --ingbau-btn-radius:       4px;
    --ingbau-btn-font-size:    15px;
    --ingbau-btn-padding:      10px 20px;

    --ingbau-image-height:     420px;
    --ingbau-overlay-bg:       rgba(255, 255, 255, 0.88);
    --ingbau-overlay-radius:   var(--ingbau-btn-radius);
    --ingbau-overlay-padding:  20px 24px;
    --ingbau-overlay-maxwidth: 420px;

    --ingbau-leistung-color:   #000000;
    --ingbau-leistung-link:    #000000;
    --ingbau-leistung-size:    16px;

    --ingbau-person-btn-bg:        #ffffff;
    --ingbau-person-btn-color:     #000000;
    --ingbau-person-btn-border:    #000000;
    --ingbau-person-btn-active-bg: #000000;
    --ingbau-person-btn-radius:    4px;

    --ingbau-kontakt-bg:       transparent;
    --ingbau-kontakt-border:   #000000;
    --ingbau-kontakt-radius:   var(--ingbau-btn-radius);
    --ingbau-kontakt-color:    #000000;
}

.ingbau-fb-wrap {
    width: 100%;
    font-family: inherit;
    margin: 0 0 30px 0;
}

.ingbau-fb-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0;
}

.ingbau-fb-btn {
    background:    var(--ingbau-btn-bg);
    color:         var(--ingbau-btn-color);
    border:        1px solid var(--ingbau-btn-border);
    border-radius: var(--ingbau-btn-radius);
    padding:       var(--ingbau-btn-padding);
    font-size:     var(--ingbau-btn-font-size);
    cursor:        pointer;
    transition:    background 0.2s, color 0.2s;
    font-family:   inherit;
    line-height:   1.3;
    text-transform: none;
}

.ingbau-fb-btn:hover {
    background: var(--ingbau-btn-hover-bg);
    color:      var(--ingbau-btn-hover-color);
}

.ingbau-fb-btn--active {
    background:   var(--ingbau-btn-active-bg);
    color:        var(--ingbau-btn-active-color);
    border-color: var(--ingbau-btn-active-bg);
}

.ingbau-fb-panel { margin-top: 0; }
.ingbau-fb-panel[hidden] { display: none; }

.ingbau-fb-image-wrap {
    position:            relative;
    width:               100%;
    height:              var(--ingbau-image-height);
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
    background-color:    #cccccc;
}

.ingbau-fb-textbox {
    position:        absolute;
    top:             20px;
    left:            20px;
    max-width:       var(--ingbau-overlay-maxwidth);
    background:      var(--ingbau-overlay-bg);
    border-radius:   var(--ingbau-overlay-radius);
    padding:         var(--ingbau-overlay-padding);
    backdrop-filter: blur(2px);
}

.ingbau-fb-leistungen {
    list-style: none;
    margin:     0;
    padding:    0;
}

.ingbau-fb-leistung {
    font-size:   var(--ingbau-leistung-size);
    color:       var(--ingbau-leistung-color);
    padding:     4px 0 4px 14px;
    position:    relative;
}

.ingbau-fb-leistung::before {
    content:  '>';
    position: absolute;
    left:     0;
}

.ingbau-fb-leistung a {
    color:           var(--ingbau-leistung-link);
    text-decoration: none;
}
.ingbau-fb-leistung a:hover { text-decoration: underline; }

.ingbau-fb-personen-wrap {
    padding:         16px 0 8px 0;
    display:         flex;
    flex-direction:  column !important;
    align-items:     flex-start !important;
    flex-wrap:       wrap;
    gap:             10px;
}

.ingbau-fb-personen-label {
    font-size:    16px;
    color:        #000000;
    padding-top:  8px;
    white-space:  nowrap;
    margin-right: 4px;
}

.ingbau-fb-personen {
    display:     flex;
    flex-wrap:   wrap;
    gap:         10px;
    flex:        1;
    align-items: flex-start !important;
}

.ingbau-fb-person {
    display:        flex !important;
    flex-direction: column !important;
    position:       static !important;
}

.ingbau-fb-person-btn {
    background:     var(--ingbau-person-btn-bg);
    color:          var(--ingbau-person-btn-color);
    border:         1px solid var(--ingbau-person-btn-border);
    border-radius:  var(--ingbau-person-btn-radius);
    padding:        8px 18px;
    font-size:      16px;
    cursor:         pointer;
    font-family:    inherit;
    transition:     background 0.2s, color 0.2s;
    text-transform: none;
}

.ingbau-fb-person-btn:hover,
.ingbau-fb-person-btn[aria-expanded="true"] {
    background: var(--ingbau-person-btn-active-bg);
    color:      #ffffff;
}

/* Kontaktbox */
.ingbau-fb-person-kontakt {
    background:    var(--ingbau-kontakt-bg) !important;
    border:        1px solid var(--ingbau-kontakt-border) !important;
    border-radius: var(--ingbau-kontakt-radius) !important;
    padding:       12px 16px !important;
    font-size:     16px !important;
    color:         var(--ingbau-kontakt-color) !important;
    position:      static !important;
    width:         100% !important;
    min-width:     unset !important;
    white-space:   normal !important;
    box-sizing:    border-box !important;
    display:       block;
    overflow:      hidden !important;
    max-height:    0 !important;
    margin-top:    0 !important;
    transition:    max-height 0.4s ease, opacity 0.35s ease, margin-top 0.4s ease !important;
}

.ingbau-fb-person-kontakt[hidden] {
    display:        block !important;
    max-height:     0 !important;
    opacity:        0 !important;
    margin-top:     0 !important;
    pointer-events: none !important;
}

.ingbau-fb-person-kontakt.ingbau-fb-open {
    max-height:     200px !important;
    opacity:        1 !important;
    margin-top:     8px !important;
    pointer-events: auto !important;
}

.ingbau-fb-person-kontakt p { margin: 4px 0; }
.ingbau-fb-funktion { font-weight: 600; }
.ingbau-fb-telefon::before { content: ''; }
.ingbau-fb-email::before   { content: ''; }

.ingbau-fb-person-kontakt a {
    color:           var(--ingbau-kontakt-color);
    text-decoration: none;
}
.ingbau-fb-person-kontakt a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .ingbau-fb-image-wrap { height: 280px; }
    .ingbau-fb-textbox { max-width: calc(100% - 40px); }
}