.salz-hh-directory {
    --salz-hh-accent: #00a2c8;
    --salz-hh-accent-dark: #087b96;
    --salz-hh-text: #263238;
    --salz-hh-muted: #68747a;
    --salz-hh-border: #dfe7ea;
    --salz-hh-soft: #f5f9fa;
    --salz-hh-radius: 1px;
    width: 100%;
    font-family: Verdana, Geneva, sans-serif;
}

.salz-hh-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 14px;
    align-items: end;
    padding: 18px;
    margin: 0 0 18px;
    background: #00A2C81A;
    border: 1px solid var(--salz-hh-border);
    border-radius: var(--salz-hh-radius);
}

.salz-hh-filter label,
.salz-hh-filter__label {
    display: block;
    margin: 0 0 6px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--salz-hh-text);
}

.salz-hh-filter select,
.salz-hh-filter input[type="search"] {
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid #cbd7db;
    border-radius: 1px;
    background: #fff;
    color: var(--salz-hh-text);
    font: inherit;
    line-height: 1.25;
}

.salz-hh-filter select:focus,
.salz-hh-filter input[type="search"]:focus {
    outline: 2px solid color-mix(in srgb, var(--salz-hh-accent) 35%, transparent);
    outline-offset: 1px;
    border-color: var(--salz-hh-accent);
}

.salz-hh-filter--reset {
    padding-bottom: 1px;
}

.salz-hh-reset,
.salz-hh-more {
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--salz-hh-accent);
    border-radius: 1px;
    background: #fff;
    color: var(--salz-hh-accent-dark);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.salz-hh-reset:hover,
.salz-hh-reset:focus,
.salz-hh-more:hover,
.salz-hh-more:focus {
    background: var(--salz-hh-accent);
    color: #fff;
}

.salz-hh-toolbar {
    min-height: 28px;
    margin: 0 0 12px;
    color: var(--salz-hh-muted);
    font-size: .94rem;
}

.salz-hh-count {
    font-weight: 700;
}

.salz-hh-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.salz-hh-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--salz-hh-border);
    border-radius: var(--salz-hh-radius);
    background: #fff;
    box-shadow: 0 5px 20px rgba(23, 57, 66, .08);
}

.salz-hh-card[hidden] {
    display: none !important;
}

.salz-hh-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--salz-hh-soft);
}

.salz-hh-card__image {
    display: block;
    width: 100%;
    height: 100% !important;
    margin: 0;
    object-fit: cover;
}

.salz-hh-card__image--logo {
    object-fit: contain;
    padding: 28px;
}

.salz-hh-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 28px;
    background: linear-gradient(135deg, var(--salz-hh-soft), #e6f5f8);
    color: var(--salz-hh-accent-dark);
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
}

.salz-hh-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 12px 20px 20px;
}

.salz-hh-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 22px;
}

.salz-hh-tag {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef3f5;
    color: #53656c;
    font-size: .70rem;
    font-weight: 400;
    line-height: 1.2;
}

.salz-hh-tag--category {
    background: #e5f6fa;
    color: var(--salz-hh-accent-dark);
}

.salz-hh-card__title {
    margin: 0 0 10px !important;
    color: #00a2c8;
    font-size: clamp(.94rem, .91rem + .14vw, 1.06rem);
    line-height: 1.24;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .01em;
}

.salz-hh-card__short {
    margin-bottom: 10px;
    color: var(--salz-hh-text);
}

.salz-hh-card__short > :first-child,
.salz-hh-card__details-content > :first-child,
.salz-hh-card__extra > :first-child {
    margin-top: 0;
}

.salz-hh-card__short > :last-child,
.salz-hh-card__details-content > :last-child,
.salz-hh-card__extra > :last-child {
    margin-bottom: 0;
}

.salz-hh-card__details {
    margin: 2px 0 14px;
    border-top: 1px solid var(--salz-hh-border);
    border-bottom: 1px solid var(--salz-hh-border);
}

.salz-hh-card__details summary {
    padding: 10px 0;
    color: #00a2c8;
    font-weight: 600;
    cursor: pointer;
}

.salz-hh-card__details-content {
    padding: 2px 0 14px;
    color: var(--salz-hh-text);
}

.salz-hh-card__extra {
    margin-top: 14px;
}

.salz-hh-card__meta {
    margin-top: auto;
    padding-top: 8px;
}

.salz-hh-card__meta-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 8px;
    padding: 4px 0;
    color: var(--salz-hh-text);
    font-size: .92rem;
    line-height: 1.4;
}

.salz-hh-card__meta-label {
    color: var(--salz-hh-muted);
    font-size: .74rem;
    font-weight: 400;
    line-height: 1.35;
}

.salz-hh-card__meta a {
    color: #00a2c8 !important;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.salz-hh-card__meta a:hover,
.salz-hh-card__meta a:focus {
    color: #00a2c8 !important;
    text-decoration: underline;
}

.salz-hh-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 16px;
}

.salz-hh-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid #b9dfe8;
    border-radius: 1px;
    background: #fff;
    color: #00a2c8 !important;
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
}

.salz-hh-button:hover,
.salz-hh-button:focus {
    background: #eef8fa;
    border-color: var(--salz-hh-accent);
    color: #00a2c8 !important;
}

.salz-hh-button--secondary {
    border-color: #d3dde0;
    color: #52666d !important;
}

.salz-hh-button--secondary:hover,
.salz-hh-button--secondary:focus {
    background: #f5f8f9;
    border-color: #b8c8cd;
    color: #00a2c8 !important;
}

.salz-hh-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 26px;
}

.salz-hh-more[hidden],
.salz-hh-more-wrap[hidden] {
    display: none !important;
}

.salz-hh-empty {
    padding: 24px;
    border: 1px solid var(--salz-hh-border);
    border-radius: var(--salz-hh-radius);
    background: var(--salz-hh-soft);
    text-align: center;
    color: var(--salz-hh-text);
}

@media (max-width: 1150px) {
    .salz-hh-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .salz-hh-filter--reset {
        align-self: end;
    }

    .salz-hh-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .salz-hh-filters {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .salz-hh-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .salz-hh-card__body {
        padding: 17px;
    }
}

@media (max-width: 420px) {
    .salz-hh-card__meta-row {
        grid-template-columns: 1fr;
        gap: 1px;
    }
}


/* Angebots-/Schwerpunktfilter auf der Hauptseite erst nach Bereichsauswahl zeigen. */
.salz-hh-filter--offer[hidden] {
    display: none !important;
}


/* Filter zurücksetzen: Salz-Blau, bewusst dezent */
.salz-hh-reset {
    border-color: #00A2C8;
    background: #fff;
    color: #00A2C8 !important;
}

.salz-hh-reset:hover,
.salz-hh-reset:focus {
    border-color: #00A2C8;
    background: #00A2C81A;
    color: #00A2C8 !important;
}


/* Sichtbare Schwerpunkt-/Angebotsliste */
.salz-hh-filter--offer {
    grid-column: 1 / -1;
    align-self: stretch;
    padding-top: 4px;
}


.salz-hh-offer-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: transparent;
}

.salz-hh-offer-option {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-height: 32px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid #cbd7db;
    border-radius: 1px;
    background: rgba(255, 255, 255, .65);
    color: var(--salz-hh-text);
    font-family: Verdana, Geneva, sans-serif;
    font-size: .82rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.salz-hh-offer-option:hover,
.salz-hh-offer-option:focus {
    border-color: #00A2C8;
    background: #00A2C80D;
    color: #00A2C8;
    outline: none;
}

.salz-hh-offer-option.is-active {
    border-color: #00A2C8;
    background: #00A2C81A;
    color: #00A2C8;
    font-weight: 600;
}

.salz-hh-offer-option[hidden] {
    display: none !important;
}


/* Filter-Reihenfolge 0.9.7:
   Bereich -> Angebote/Schwerpunkte -> Region/Suche/Zurücksetzen */
.salz-hh-filter--category {
    grid-column: 1 / -1;
    max-width: 420px;
}

.salz-hh-filter--offer {
    grid-column: 1 / -1;
    padding: 8px 0 12px;
}

.salz-hh-filter--region {
    grid-column: 1;
}

.salz-hh-filter--search {
    grid-column: 2;
}

.salz-hh-filter--reset {
    grid-column: 3;
}

@media (max-width: 760px) {
    .salz-hh-filter--category,
    .salz-hh-filter--offer,
    .salz-hh-filter--region,
    .salz-hh-filter--search,
    .salz-hh-filter--reset {
        grid-column: 1 / -1;
        max-width: none;
    }

    .salz-hh-offer-list {
        gap: 5px;
    }

    .salz-hh-offer-option {
        width: 100%;
    }
}


/* Karten-Feinschliff 1.1.4 */

/* "Mehr Informationen" bewusst leichter / regular */
.salz-hh-more,
.salz-hh-more-toggle,
.salz-hh-more-link,
.salz-hh-card__more,
.salz-hh-card__more button,
.salz-hh-card__more a {
    font-weight: 400 !important;
}

/* Website / Flyer / PDF wie kleine Labels statt klassische Buttons */
.salz-hh-card__actions,
.salz-hh-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.salz-hh-card__actions a,
.salz-hh-actions a,
.salz-hh-card a.salz-hh-button,
.salz-hh-card .salz-hh-button,
.salz-hh-card__website,
.salz-hh-card__flyer {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    padding: 3px 7px;
    border: 1px solid #bfe6ef;
    border-radius: 1px;
    background: #00A2C81A;
    color: #00A2C8 !important;
    font-family: Verdana, Geneva, sans-serif;
    font-size: .72rem;
    font-weight: 400;
    line-height: 1.25;
    text-decoration: none !important;
    box-shadow: none;
}

.salz-hh-card__actions a:hover,
.salz-hh-actions a:hover,
.salz-hh-card a.salz-hh-button:hover,
.salz-hh-card .salz-hh-button:hover,
.salz-hh-card__website:hover,
.salz-hh-card__flyer:hover {
    border-color: #00A2C8;
    background: #00A2C829;
    color: #007f9e !important;
}


/* Karten-Feinschliff 1.2.0:
   "Mehr Informationen" ist ein <summary>-Element. */
.salz-hh-card__details > summary,
.salz-hh-card__details summary {
    font-weight: 400 !important;
}