/* ═══════════════════════════════════════════════════════════
   BFI Standorte – Stylesheet v1.2
   Design-Tokens aus Figma:
     Primary:    #B60025
     Navy:       #003770
     Light-Blue: #5B9BD5
     BG:         #E8EDF2
     Body-Font:  Helvetica Neue, Helvetica, Arial, sans-serif
   ═══════════════════════════════════════════════════════════ */

.bfi-standorte {
    --clr-primary:   #B60025;
    --clr-navy:      #003770;
    --clr-ltblue:    #5B9BD5;
    --clr-bg:        #E8EDF2;
    --clr-text:      #343434;
    --clr-muted:     #55575e;
    --font:          'Helvetica Neue', Helvetica, Arial, sans-serif;

    font-family:     var(--font);
    background:      var(--clr-bg);
    padding:         48px 24px;
    box-sizing:      border-box;
}

/* ── Titel ── */
.bfi-standorte__title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--clr-navy);
    margin: 0 0 24px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Layout ── */
.bfi-standorte__layout {
    display: flex;
    gap: 36px;
    align-items: flex-start;
    max-width: 1100px;
    margin: 0 auto;
}
.bfi-standorte__map-col {
    flex: 0 0 520px;
    max-width: 520px;
}
.bfi-standorte__accordion-col {
    flex: 1 1 320px;
    min-width: 0;
}

/* ═══ KARTE ═══════════════════════════════════════════════ */

.bfi-standorte__map-wrap {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/*
 * .bfi-standorte__map
 *   aspect-ratio 675:463 = Figma Karte-Frame
 *   --map-bg wird per wp_add_inline_style gesetzt → url(steiermark.svg)
 *   Marker werden absolut positioniert darüber
 */
.bfi-standorte__map {
    position: relative;
    width: 100%;
    aspect-ratio: 675 / 463;
    background-image: var(--map-bg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 2px;
}

/* ═══ MARKER / PIN ════════════════════════════════════════ */

.bfi-standorte__pin {
    position: absolute;
    width: 3.56%;            /* 24 / 675 */
    aspect-ratio: 1;
    border-radius: 4px;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    z-index: 2;
    outline: none;
}
.bfi-standorte__pin:hover,
.bfi-standorte__pin:focus {
    transform: translate(-50%, -50%) scale(1.25);
    box-shadow: 0 3px 8px rgba(0,0,0,.3);
    z-index: 10;
}
.bfi-standorte__pin--active {
    transform: translate(-50%, -50%) scale(1.3);
    box-shadow: 0 0 0 3px rgba(182,0,37,.3), 0 3px 8px rgba(0,0,0,.3);
    z-index: 10;
}

.bfi-standorte__pin--bz { background: var(--clr-primary); }
.bfi-standorte__pin--gf { background: var(--clr-navy); }
.bfi-standorte__pin--bu { background: var(--clr-ltblue); }

.bfi-standorte__pin-icon {
    width: 54%;
    height: auto;
    pointer-events: none;
}

/* ═══ LEGENDE ═════════════════════════════════════════════ */

.bfi-standorte__legend {
    margin-top: 14px;
    padding-left: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bfi-standorte__legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bfi-standorte__legend-item span:last-child {
    font-size: 15px;
    font-weight: 700;
    color: var(--clr-navy);
}
.bfi-standorte__legend-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 32px;
    border-radius: 4px;
    flex-shrink: 0;
}
.bfi-standorte__legend-marker--bildungszentrum   { background: var(--clr-primary); }
.bfi-standorte__legend-marker--geschaeftsfuehrung { background: var(--clr-navy); }
.bfi-standorte__legend-marker--business-unit     { background: var(--clr-ltblue); }

/* ═══ ACCORDION ═══════════════════════════════════════════ */

.bfi-standorte__accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bfi-standorte__item {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    border: 1px solid transparent;
    transition: box-shadow .25s, border-color .25s;
}
.bfi-standorte__item--open {
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    border-color: #e0e4e8;
}

.bfi-standorte__item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 18px 14px 18px 22px;
    gap: 14px;
    text-align: left;
    font-family: var(--font);
}
.bfi-standorte__item-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--clr-text);
}

/* Plus/Minus */
.bfi-standorte__item-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--clr-primary);
    border-radius: 4px;
    flex-shrink: 0;
}
.bfi-standorte__icon-h,
.bfi-standorte__icon-v {
    position: absolute;
    background: #fff;
    border-radius: 1px;
}
.bfi-standorte__icon-h { width: 14px; height: 2px; }
.bfi-standorte__icon-v {
    width: 2px; height: 14px;
    transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .28s;
}
.bfi-standorte__item--open .bfi-standorte__icon-v {
    transform: rotate(90deg);
    opacity: 0;
}

/* Panel */
.bfi-standorte__item-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.4,0,.2,1);
}
.bfi-standorte__item--open .bfi-standorte__item-panel {
    max-height: 320px;
}

/* Info */
.bfi-standorte__item-body {
    padding: 0 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.bfi-standorte__info-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.bfi-standorte__info-icon { flex-shrink: 0; margin-top: 1px; }
.bfi-standorte__info-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bfi-standorte__info-text strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--clr-navy);
    line-height: 1.5;
}
.bfi-standorte__info-text span,
.bfi-standorte__info-text a {
    font-size: 14px;
    color: var(--clr-muted);
    line-height: 1.5;
}
.bfi-standorte__info-text a { text-decoration: underline; }

/* CTA */
.bfi-standorte__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 8px 20px;
    background: var(--clr-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .42px;
    border-radius: 4px;
    text-decoration: none;
    font-family: var(--font);
    margin: 20px 22px 26px;
    transition: background .2s, box-shadow .2s;
}
.bfi-standorte__cta:hover {
    background: #8f001c;
    box-shadow: 0 2px 6px rgba(182,0,37,.35);
}

/* ═══ RESPONSIVE ══════════════════════════════════════════ */

@media (max-width: 960px) {
    .bfi-standorte__layout { flex-direction: column; }
    .bfi-standorte__map-col { flex: none; width: 100%; max-width: 100%; }
}
@media (max-width: 600px) {
    .bfi-standorte { padding: 32px 16px; }
    .bfi-standorte__title { font-size: 22px; }
}