/* ============================================================
   HWS Firmenverzeichnis – Frontend
   Design angelehnt an das HWS-Webdesign (Rot / Anthrazit,
   Grossbuchstaben-Titel, klare Karten).
   Pin-/Badge-Farben kommen als CSS-Variablen aus dem Backend.
   ============================================================ */

.hfv-app {
    --hfv-red: #e30613;
    --hfv-dark: #3a3a3a;
    --hfv-panel: #f2f2f2;
    --hfv-border: #e3e3e3;
    --hfv-text: #333;
    --hfv-muted: #6b6b6b;
    --hfv-mitglied: #e30613;
    --hfv-partner: #1f6fb2;
    --hfv-contact-icon: #e30613;

    font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    color: var(--hfv-text);
    max-width: 1280px;
    margin: 0 auto;
}
.hfv-app *, .hfv-app *::before, .hfv-app *::after { box-sizing: border-box; }

/* ---------- Werkzeugleiste ---------- */
.hfv-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.hfv-filters, .hfv-viewtoggle {
    display: inline-flex;
    border: 1px solid var(--hfv-border);
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}
.hfv-filters button, .hfv-viewtoggle button {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    border-right: 1px solid var(--hfv-border);
    background: #fff;
    color: var(--hfv-dark);
    font: inherit;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 10px 16px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.hfv-filters button:last-child, .hfv-viewtoggle button:last-child { border-right: 0; }
.hfv-filters button:hover, .hfv-viewtoggle button:hover { background: #fff; color: var(--hfv-red); }
.hfv-filters button.is-active, .hfv-viewtoggle button.is-active {
    background: var(--hfv-red);
    color: #fff;
}

/* ---------- Suchfeld ---------- */
.hfv-searchbar { margin-bottom: 16px; }
.hfv-search {
    width: 100%;
    max-width: 440px;
    padding: 12px 16px;
    border: 1px solid var(--hfv-border);
    border-radius: 4px;
    font: inherit;
    font-size: 15px;
    background: #fff;
    color: var(--hfv-text);
}
.hfv-search:focus { outline: 2px solid var(--hfv-red); outline-offset: 1px; }

/* ---------- Karte ---------- */
.hfv-map {
    width: 100%;
    min-height: 320px;
    border: 1px solid var(--hfv-border);
    border-radius: 4px;
    background: var(--hfv-panel);
}
.hfv-map[hidden] { display: none; }

/* ---------- Kacheln ---------- */
.hfv-cards[hidden] { display: none; }
.hfv-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 8px;
}
.hfv-map-app .hfv-cards-grid { margin-top: 4px; }

/* Ansicht "Karte + Liste gleichzeitig" (Shortcode-Attribut layout="split") */
.hfv-map-app--split .hfv-cards-grid { margin-top: 24px; }

/* Neutrale Karte mit normalem Rahmen (wie die übrigen Seiten).
   Beim Hover kommt zusätzlich eine rote Linie links + leichter Schatten –
   ohne Layout-Versatz (inset-Schatten statt Rand-Wechsel). */
.hfv-app .hfv-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--hfv-border);
    border-radius: 4px;
    padding: 22px 24px 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.hfv-app .hfv-card:hover {
    border-color: #d9d9d9;
    box-shadow: inset 3px 0 0 0 var(--hfv-red), 0 6px 20px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}
.hfv-card[hidden] { display: none; }

.hfv-card-logo {
    height: var(--hfv-logo-h, 46px);
    display: flex;
    align-items: center;
    justify-content: var(--hfv-logo-justify, flex-start);
    margin-top: var(--hfv-logo-top-extra, 0px);
    margin-bottom: calc(2px + var(--hfv-logo-gap-extra, 0px));
}
.hfv-card-logo img { max-height: var(--hfv-logo-h, 46px); max-width: 170px; width: auto; object-fit: contain; }

.hfv-badge {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #fff;
    background: var(--hfv-mitglied);
    padding: 3px 10px;
    border-radius: 2px;
}
.hfv-badge-partner { background: var(--hfv-partner); }

.hfv-app .hfv-card-name {
    margin: 0;
    padding: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--hfv-dark);
    border-bottom: 2px solid var(--hfv-red);
    align-self: flex-start;
}
.hfv-app .hfv-card-addr {
    margin: 0;
    color: var(--hfv-muted);
    font-size: 14px;
    line-height: 1.5;
}
.hfv-app .hfv-card-contact {
    list-style: none;
    margin: auto 0 0;
    padding: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hfv-app .hfv-card-contact li { margin: 0; padding: 0; }
.hfv-app .hfv-card-contact li::before { content: none; }
.hfv-card-contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--hfv-text);
    text-decoration: none;
    font-size: 14px;
}
.hfv-card-contact a span { word-break: break-word; }
.hfv-card-contact a svg {
    flex: 0 0 auto;
    color: var(--hfv-contact-icon);
}
.hfv-card-contact a:hover { color: var(--hfv-contact-icon); }
.hfv-card-contact a:hover span { text-decoration: underline; }

/* ---------- Meldungen ---------- */
.hfv-count { color: var(--hfv-muted); font-size: 13px; margin: 0 0 14px; }
.hfv-empty {
    padding: 30px;
    text-align: center;
    color: var(--hfv-muted);
    background: var(--hfv-panel);
    border-radius: 4px;
}
.hfv-empty[hidden] { display: none; }
.hfv-notice {
    background: #fff4d6;
    border: 1px solid #e8cf7a;
    color: #7a5b00;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 14px;
}

/* ---------- Leaflet / MapTiler ---------- */
.hfv-leaflet-pin { background: none; border: none; }
.leaflet-popup-content-wrapper { border-radius: 4px; }
.leaflet-popup-content { margin: 12px 14px; }

/* ---------- InfoWindow ---------- */
.hfv-iw {
    font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    width: 240px;
    max-width: 100%;
    line-height: 1.5;
    overflow: hidden;
}
.hfv-iw-logo { margin-bottom: 8px; }
.hfv-iw-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;   /* passt sich der Breite an … */
    max-height: 70px;  /* … Seitenverhältnis bleibt erhalten */
}
.hfv-iw .hfv-badge { margin-bottom: 6px; }
.hfv-iw-name { display: block; font-size: 15px; text-transform: uppercase; color: #3a3a3a; margin-bottom: 4px; }
.hfv-iw-addr { color: #6b6b6b; font-size: 13px; margin-bottom: 6px; }
.hfv-iw-links { display: flex; flex-direction: column; gap: 2px; }
.hfv-iw-links a { color: #e30613; text-decoration: none; font-size: 13px; }
.hfv-iw-links a:hover { text-decoration: underline; }

/* ---------- Mobil ---------- */
@media (max-width: 600px) {
    .hfv-toolbar { flex-direction: column; align-items: stretch; }
    .hfv-filters, .hfv-viewtoggle { width: 100%; }
    .hfv-filters button, .hfv-viewtoggle button { flex: 1; }
    /* "Mitglieder" ist am laengsten und bricht bei gleich breiten Buttons (flex:1) um -
       statt umzubrechen lieber kleinere Schrift/weniger Innenabstand, bleibt einzeilig. */
    .hfv-filters button {
        font-size: 11px;
        letter-spacing: .2px;
        padding: 10px 6px;
        white-space: nowrap;
    }
}