.haev-carousel-viewport {
    overflow: hidden;
    width: auto;
}

.haev-carousel-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    transition: transform 0.5s ease;
}

.haev-carousel-item {
    box-sizing: border-box;
    display: flex;
}

.hk-jobs--cards .hk-jobs__item img,
.haev-carousel-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.haev-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.haev-carousel-arrow {
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    color: #333;
    padding: 0 10px;
}

.haev-carousel-arrow[disabled] {
    opacity: 0.3;
    cursor: default;
}

.haev-carousel-dots {
    display: flex;
    gap: 10px;
}

.haev-carousel-dot {
    background: #e5e7eb;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.haev-carousel-dot[aria-current="true"] {
    background: #0056b3;
    color: #fff;
}

#jobs > div{
    margin-right:10px !important;
}

.fusion-content-box-hover {
    transition: all 0.3s ease;
}

.fusion-content-boxes.content-boxes-icon-on-top a.fusion-read-more {
    color: #0000B4 !important;
    font-weight: bold;
    font-size: 14px;
    position: absolute;
    bottom: 15px;

    /*
    left: 0;
    padding: 2px 20px 4px 20px;
    background: #F3F3F3;
    border-radius: 30px;
    margin-left: 15px;
    */

    text-decoration: none;
    transition: background 0.3s;
}

.fusion-content-boxes.content-boxes-icon-on-top a.fusion-read-more:hover {
    /*
    background: #e5e5e5;
    text-decoration: none;
    */
}

.hk-jobs .content-box-wrapper {
    position: relative;
    padding-bottom: 70px !important; /* Erhöht für bessere Sichtbarkeit des Buttons */
    height: 100%;
    display: flex;
    flex-direction: column;
}

.content-container {
    flex-grow: 1;
}

.hk-jobs__item {
    height: auto;
}

.hk-jobs--cards .hk-jobs__grid {
    display: grid !important;
    gap: 40px;
    align-items: stretch;
    width: 100%;
}

.hk-jobs--cards .hk-jobs__item {
    display: flex;
    height: 100%;
    /*background: #e3f1fe;*/
    background: #FFFFFF;
    border-radius: 25px;
}

.hk-jobs__viewport .fusion-content-boxes.content-boxes-icon-on-top .heading h3{
    padding: 30px 20px 0 20px;
}

.hk-jobs--cols-1 .hk-jobs__grid { grid-template-columns: repeat(1, 1fr) !important; }
.hk-jobs--cols-2 .hk-jobs__grid { grid-template-columns: repeat(2, 1fr) !important; }
.hk-jobs--cols-3 .hk-jobs__grid { grid-template-columns: repeat(3, 1fr) !important; }
.hk-jobs--cols-4 .hk-jobs__grid { grid-template-columns: repeat(4, 1fr) !important; }



@media (max-width: 800px) {
    .hk-jobs--cols-2 .hk-jobs__grid,
    .hk-jobs--cols-3 .hk-jobs__grid,
    .hk-jobs--cols-4 .hk-jobs__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .hk-jobs--cols-2 .hk-jobs__grid,
    .hk-jobs--cols-3 .hk-jobs__grid,
    .hk-jobs--cols-4 .hk-jobs__grid {
        grid-template-columns: 1fr !important;
    }
}

/* Masonry Layout (Pure CSS Columns) */
.hk-jobs--masonry .hk-jobs__masonry {
    column-gap: 40px;
    width: 100%;
}

.hk-jobs--masonry .hk-jobs__item {
    display: inline-block;
    width: 100%;
    margin-bottom: 40px;
    break-inside: avoid;
    background-color: transparent !important;
}

.hk-jobs--masonry .hk-jobs__item > .content-box-wrapper {
    background-color: #ebf3f7;
    border-radius: 25px;
}

.hk-jobs--cols-1.hk-jobs--masonry .hk-jobs__masonry { column-count: 1; }
.hk-jobs--cols-2.hk-jobs--masonry .hk-jobs__masonry { column-count: 2; }
.hk-jobs--cols-3.hk-jobs--masonry .hk-jobs__masonry { column-count: 3; }
.hk-jobs--cols-4.hk-jobs--masonry .hk-jobs__masonry { column-count: 4; }

@media (max-width: 800px) {
    .hk-jobs--masonry .hk-jobs__masonry {
        column-count: 2 !important;
    }
}

@media (max-width: 600px) {
    .hk-jobs--masonry .hk-jobs__masonry {
        column-count: 1 !important;
    }
}

.hk-jobs__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid #e5e7eb;
}

.hk-jobs__list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #e5e7eb;
    text-decoration: none;
    color: inherit;
    transition: color 0.3s;
}

.hk-jobs__list-item:hover {
    color: #0056b3;
}

.hk-jobs__list-title {
    font-weight: 500;
}

.hk-jobs__meta {
    margin-bottom: 12px;
}

.hk-jobs__employer {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: #333;
    margin-bottom: 2px;
}

.hk-jobs__location {
    display: block;
    font-size: 13px;
    color: #666;
}

.hk-jobs__list-content {
    display: flex;
    flex-direction: column;
}

.hk-jobs__list-location {
    font-size: 13px;
    color: #666;
    margin-top: 2px;
}

.hk-jobs__icon-wrapper {
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;
}
.hk-jobs__items .content-container{
    margin-bottom: 0 !important;
}

.hk-jobs__icon {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important;
}

.hk-jobs__list-title-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hk-jobs__list-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.fusion-column .image {
    margin-bottom: 20px;
}

/* Job Management Styles */
.hk-job-management {
    margin: 20px 0;
    font-family: inherit;
}

.hk-job-management__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.hk-job-management__header h2 {
    margin: 0;
}

.hk-job-management__add-btn {
    border-radius: 25px !important;
}
.hk-job-management__add-btn:hover {
 color:  #0000B4 !important;
}
.hk-job-management__filters {
    margin-bottom: 15px;
}

.hk-job-management__search-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.hk-job-management__table-wrapper {
    overflow-x: auto;
}

.hk-job-management__table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.hk-job-management__table th,
.hk-job-management__table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.hk-job-management__table th {
    background: #f9f9f9;
    font-weight: 600;
}

.hk-job-management__actions {
    display: flex;
    gap: 10px;
}

.hk-job-management__edit-btn,
.hk-job-management__delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 5px;
    transition: color 0.2s;
}

.hk-job-management__edit-btn:hover { color: #0073aa; }
.hk-job-management__delete-btn:hover { color: #d63638; }

/* Inline Form Styles */
.hk-job-inline-form {
    background-color: #fcfcfc;
    border: 1px solid #e0e0e0;
    margin: 20px 0;
    border-radius: 8px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.hk-job-form-wrapper {
    padding: 25px;
}

.hk-job-inline-form-row td {
    padding: 0 !important;
}

.hk-job-form-actions {
    margin-top: 30px;
    border-top: 1px solid #eee;
    padding-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.hk-job-form-cancel {
    background-color: #f5f5f5 !important;
    color: #333 !important;
}

.hk-job-form-cancel:hover {
    background-color: #e8e8e8 !important;
}

/* Tabs */
.hk-job-form-tabs-nav {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 20px 0;
    border-bottom: 2px solid #eee;
}

.hk-job-form-tabs-nav li {
    margin-right: 5px;
}

.hk-job-form-tabs-nav a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #666;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -2px;
    font-weight: 500;
}

.hk-job-form-tabs-nav li.active a {
    color: #0073aa;
    border-color: #eee;
    background: #fff;
    border-bottom: 2px solid #0073aa;
}

.hk-job-form-tab-content {
    display: none;
    padding: 20px 0;
}

.hk-job-form-tab-content.active {
    display: block;
}

.hk-job-form-field {
    margin-bottom: 20px;
}

.hk-job-form-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #444;
}

.hk-job-form-field input[type="text"],
.hk-job-form-field input[type="email"],
.hk-job-form-field input[type="date"],
.hk-job-form-field select,
.hk-job-form-field textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.hk-job-form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 0;
}

.hk-job-form-row .hk-job-form-field {
    flex: 1;
}

.hk-job-checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #eee;
}

.hk-job-checkbox-group label {
    font-weight: normal;
    margin-bottom: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}


/* Editor Styling fixes in Inline Form */
.hk-job-inline-form .wp-editor-container {
    border: 1px solid #ddd;
}

@media (max-width: 768px) {
    .hk-job-form-row {
        flex-direction: column;
        gap: 0;
    }
    .hk-job-form-tabs-nav {
        flex-wrap: wrap;
    }
    .hk-job-form-tabs-nav a {
        padding: 8px 12px;
        font-size: 14px;
    }
}

/* ==========================================================================
   HK Content Banner
   ========================================================================== */

.hk-cb {
    width: 100%;
    overflow: visible;
    position: relative;
}

.hk-cb__inner {
    display: grid;
    gap: 0;
}

.hk-cb__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.hk-cb__image {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.hk-cb__image img {
    display: block;
    width: 100%;
    height: 100%;
}

.hk-cb__subtitle {
    display: block;
    margin-bottom: 4px;
    font-weight: 400;
    letter-spacing: 0.03em;
}

.hk-cb__title {
    margin: 0 0 16px;
    line-height: 1.25;
}

.hk-cb__text {
    margin-bottom: 24px;
    line-height: 1.6;
}

.hk-cb__text p:last-child {
    margin-bottom: 0;
}

.hk-cb__btn-wrap {
    margin-top: 8px;
}

.hk-cb__btn {
    display: inline-block;
    text-decoration: none;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    border: none;
    line-height: 1;
}

/* Force 3-col masonry and neutralize any theme 'columns' / 'column-width' */
.hk-jobs.hk-jobs--masonry.hk-jobs--cols-3 .hk-jobs__masonry{
    column-count: 3 !important;
    column-width: auto !important;      /* kills any min column width */
    columns: 3 auto !important;         /* overrides shorthand from theme/plugins */
    column-gap: 40px;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

/* keep your breakpoints, but also reset column-width/shorthand */
@media (max-width: 800px){
    .hk-jobs.hk-jobs--masonry .hk-jobs__masonry{
        column-count: 2 !important;
        column-width: auto !important;
        columns: 2 auto !important;
    }
}
@media (max-width: 600px){
    .hk-jobs.hk-jobs--masonry .hk-jobs__masonry{
        column-count: 1 !important;
        column-width: auto !important;
        columns: 1 auto !important;
    }
}

/* Avada/Fusion often floats columns -> prevent interference inside masonry */
.hk-jobs.hk-jobs--masonry .hk-jobs__item{
    float: none !important;
    width: 100% !important;
}


/* ==========================================================================
   HK Infobox Element
   ========================================================================== */

/* ---------- Container ---------- */
.hk-ib {
    width: 100%;
    position: relative;
}

.hk-ib__grid {
    display: grid;
    gap: var(--hk-ib-row-gap, 24px) var(--hk-ib-col-gap, 24px);
}

/* Carousel: Grid wird zu Slick-Container → kein CSS-Grid */
.hk-ib--carousel .hk-ib__grid {
    display: block;
}

/* ---------- Einzelne Box (Item) ---------- */
.hk-ib__item {
    background-color: var(--hk-ib-bg, #e8f0fe);
    border-radius: var(--hk-ib-radius, 16px);
    padding: var(--hk-ib-padding, 32px);
    min-height: var(--hk-ib-min-h, auto);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: background-color 0.35s ease,
                color 0.35s ease,
                transform 0.35s ease,
                box-shadow 0.35s ease;
    overflow: hidden;
    box-sizing: border-box;
}

.hk-ib__item-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    z-index: 1;
}

/* ---------- Aktiv-Zustand (Checkbox) ---------- */
.hk-ib__item--active {
    background-color: var(--hk-ib-bg-active, #0000aa);
}

.hk-ib__item--active .hk-ib__title {
    color: var(--hk-ib-title-active, #fff);
}

.hk-ib__item--active .hk-ib__desc {
    color: var(--hk-ib-text-active, rgba(255,255,255,0.85));
}

.hk-ib__item--active .hk-ib__icon {
    color: var(--hk-ib-icon-active, #fff);
}

.hk-ib__item--active .hk-ib__icon--image img {
    filter: brightness(0) invert(1);
}

.hk-ib__item--active .hk-ib__link {
    color: var(--hk-ib-link-active, #fff) !important;
}

.hk-ib__item--active .hk-ib__btn {
    background-color: var(--hk-ib-btn-bg-active, rgba(255,255,255,0.2));
    color: var(--hk-ib-btn-color-active, #fff);
}

/* ---------- Hover-Effekte (nur für NICHT-aktive Boxen) ---------- */

/* Farbwechsel */
.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover {
    background-color: var(--hk-ib-bg-active, #0000aa);
}

.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__title,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__title {
    color: var(--hk-ib-title-active, #fff);
}

.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__desc,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__desc {
    color: var(--hk-ib-text-active, rgba(255,255,255,0.85));
}

.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__icon,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__icon {
    color: var(--hk-ib-icon-active, #fff);
}

.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__icon--image img,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__icon--image img {
    filter: brightness(0) invert(1);
}

.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__link,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__link {
    color: var(--hk-ib-link-active, #fff) !important;
}

.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__btn,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__btn {
    background-color: var(--hk-ib-btn-bg-active, rgba(255,255,255,0.2));
    color: var(--hk-ib-btn-color-active, #fff);
}

/* Lift */
.hk-ib--hover-lift .hk-ib__item:not(.hk-ib__item--active):hover,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* ---------- Header (Icon oben links/rechts) ---------- */
.hk-ib__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.hk-ib__header-spacer {
    flex: 1;
}

/* ---------- Icon ---------- */
.hk-ib__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--hk-ib-icon-color, #0000aa);
    transition: color 0.35s ease, filter 0.35s ease;
    line-height: 1;
}

.hk-ib__icon--font i {
    font-size: inherit;
}

.hk-ib__icon--image {
    overflow: hidden;
}

.hk-ib__icon--image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: filter 0.35s ease;
}

/* Icon above title */
.hk-ib__item--icon-above-title > .hk-ib__item-inner > .hk-ib__icon {
    margin-bottom: 12px;
}

/* ---------- Titel ---------- */
.hk-ib__title-row {
    display: flex;
    align-items: center;
}

.hk-ib__title-row--with-icon {
    gap: 12px;
}

.hk-ib__title {
    color: var(--hk-ib-title-color, #333);
    margin: 0 0 12px;
    line-height: 1.3;
    transition: color 0.35s ease;
    font-size: 1.25em;
}

.hk-ib__title-row .hk-ib__title {
    margin-bottom: 0;
}

.hk-ib__title-row {
    margin-bottom: 12px;
}

/* ---------- Beschreibung ---------- */
.hk-ib__desc {
    color: var(--hk-ib-text-color, #666);
    line-height: 1.6;
    margin-bottom: 0;
    transition: color 0.35s ease;
    flex: 1;
}

.hk-ib__desc p:last-child {
    margin-bottom: 0;
}

/* ---------- Link / Button ---------- */
.hk-ib__link-wrap {
    margin-top: auto;
    padding-top: 20px;
}

.hk-ib__link {
    color: var(--hk-ib-link-color, #0000aa);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.35s ease;
    font-size: 0.9em;
}

.hk-ib__link:hover {
    text-decoration: underline;
}

.hk-ib__btn {
    display: inline-block;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
    line-height: 1;
    border: none;
    background-color: var(--hk-ib-btn-bg, transparent);
    color: var(--hk-ib-btn-color, inherit);
    border-radius: var(--hk-ib-btn-radius, 50px);
    padding: var(--hk-ib-btn-padding, 12px 28px);
}

/* Button-Stil Varianten */
.hk-ib--btn-pill .hk-ib__btn {
    border-radius: var(--hk-ib-btn-radius, 50px);
    background-color: var(--hk-ib-btn-bg, rgba(0,0,0,0.06));
}

.hk-ib--btn-outline .hk-ib__btn {
    background-color: transparent;
    border: 2px solid currentColor;
}

.hk-ib--btn-solid .hk-ib__btn {
    border-radius: var(--hk-ib-btn-radius, 4px);
    background-color: var(--hk-ib-btn-bg, rgba(0,0,0,0.06));
}

.hk-ib--btn-text .hk-ib__link-wrap .hk-ib__btn {
    background: none;
    padding: 0;
    border: none;
    font-weight: 700;
    color: var(--hk-ib-link-color, #0000aa);
}

/* ---------- Klickbare Box ---------- */
.hk-ib__item--clickable {
    cursor: pointer;
}

.hk-ib__item--clickable:focus-visible {
    outline: 2px solid var(--hk-ib-bg-active, #0000aa);
    outline-offset: 2px;
}

/* ---------- Pagination ---------- */
.hk-ib__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}

.hk-ib__pagination button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #999;
    padding: 4px 8px;
    transition: color 0.2s;
}

.hk-ib__pagination button:hover {
    color: #333;
}

.hk-ib__page-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background-color 0.3s, color 0.3s;
}

.hk-ib__page-btn[aria-current="true"] {
    background-color: var(--hk-ib-bg-active, #0000aa);
    color: #fff;
}

.hk-ib__load-more {
    display: block;
    margin: 32px auto 0;
    padding: 12px 32px;
    background-color: var(--hk-ib-bg-active, #0000aa);
    color: #fff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 15px;
    transition: opacity 0.3s;
}

.hk-ib__load-more:hover {
    opacity: 0.85;
}

/* ---------- Slick Overrides ---------- */
.hk-ib--carousel .slick-slide {
    padding: 0 calc(var(--hk-ib-col-gap, 24px) / 2);
    box-sizing: border-box;
}

.hk-ib--carousel .slick-list {
    margin: 0 calc(var(--hk-ib-col-gap, 24px) / -2);
}

.hk-ib--carousel .slick-track {
    display: flex !important;
}

.hk-ib--carousel .slick-slide {
    height: auto;
}

.hk-ib--carousel .slick-slide > div {
    height: 100%;
}

.hk-ib--carousel .hk-ib__item {
    height: 100%;
}

/* Slick Dots */
.hk-ib--carousel .slick-dots {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: flex !important;
    justify-content: center;
    gap: 8px;
}

.hk-ib--carousel .slick-dots li button {
    font-size: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s;
}

.hk-ib--carousel .slick-dots li.slick-active button {
    background: var(--hk-ib-bg-active, #0000aa);
}

/* Slick Arrows */
.hk-ib--carousel .slick-prev,
.hk-ib--carousel .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255,255,255,0.9);
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: background 0.3s, box-shadow 0.3s;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.hk-ib--carousel .slick-prev { left: -22px; }
.hk-ib--carousel .slick-next { right: -22px; }

.hk-ib--carousel .slick-prev:hover,
.hk-ib--carousel .slick-next:hover {
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

.hk-ib--carousel .slick-prev::before,
.hk-ib--carousel .slick-next::before {
    font-family: 'Font Awesome 5 Free', 'FontAwesome', sans-serif;
    font-weight: 900;
    font-size: 16px;
    color: #333;
}

.hk-ib--carousel .slick-prev::before { content: '\f053'; }
.hk-ib--carousel .slick-next::before { content: '\f054'; }

.hk-ib--carousel .slick-disabled {
    opacity: 0.3;
    cursor: default;
}

/* ---------- Masonry via CSS columns ---------- */
.hk-ib--masonry .hk-ib__grid {
    display: block;
    column-gap: var(--hk-ib-col-gap, 24px);
}

.hk-ib--masonry .hk-ib__item {
    break-inside: avoid;
    margin-bottom: var(--hk-ib-row-gap, 24px);
}


/* ==========================================================================
   HK Infobox Element
   ========================================================================== */

/* ---------- Container ---------- */
.hk-ib {
    width: 100%;
    position: relative;
}

/* Grid Layout */
.hk-ib--grid .hk-ib__grid,
.hk-ib--masonry .hk-ib__grid {
    display: grid;
    gap: var(--hk-ib-row-gap, 24px) var(--hk-ib-col-gap, 24px);
}

/* Masonry Layout (CSS columns fallback) */
.hk-ib--masonry .hk-ib__grid {
    display: block;
    column-gap: var(--hk-ib-col-gap, 24px);
}

.hk-ib--masonry .hk-ib__item {
    display: inline-block;
    width: 100%;
    margin-bottom: var(--hk-ib-row-gap, 24px);
    break-inside: avoid;
}

/* Carousel Layout – Slick übernimmt */
.hk-ib--carousel .hk-ib__grid {
    display: block;
}

.hk-ib--carousel .hk-ib__item {
    margin: 0 calc(var(--hk-ib-col-gap, 24px) / 2);
}

/* ---------- Einzelne Box ---------- */
.hk-ib__item {
    box-sizing: border-box;
    position: relative;
    transition: background-color 0.35s ease,
                color 0.35s ease,
                transform 0.35s ease,
                box-shadow 0.35s ease;
    background-color: var(--hk-ib-bg, #e8f0fe);
    border-radius: var(--hk-ib-radius, 16px);
    overflow: hidden;
}

.hk-ib__item-inner {
    display: flex;
    flex-direction: column;
    padding: var(--hk-ib-padding, 32px);
    min-height: var(--hk-ib-min-h, auto);
    height: 100%;
    box-sizing: border-box;
}

/* ---------- Aktiver Zustand (Checkbox) ---------- */
.hk-ib__item--active {
    background-color: var(--hk-ib-bg-active, #0000aa) !important;
}

.hk-ib__item--active .hk-ib__title {
    color: var(--hk-ib-title-active, #fff) !important;
}

.hk-ib__item--active .hk-ib__desc {
    color: var(--hk-ib-text-active, rgba(255,255,255,0.85)) !important;
}

.hk-ib__item--active .hk-ib__icon,
.hk-ib__item--active .hk-ib__icon i {
    color: var(--hk-ib-icon-active, #fff) !important;
}

.hk-ib__item--active .hk-ib__icon--image img {
    filter: brightness(0) invert(1);
}

.hk-ib__item--active .hk-ib__link {
    color: var(--hk-ib-link-active, #fff) !important;
}

.hk-ib__item--active .hk-ib__btn {
    background-color: var(--hk-ib-btn-bg-active, rgba(255,255,255,0.2)) !important;
    color: var(--hk-ib-btn-color-active, #fff) !important;
}

/* ---------- Hover: Farbwechsel ---------- */
.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover {
    background-color: var(--hk-ib-bg-active, #0000aa);
}

.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__title,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__title {
    color: var(--hk-ib-title-active, #fff);
}

.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__desc,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__desc {
    color: var(--hk-ib-text-active, rgba(255,255,255,0.85));
}

.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__icon,
.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__icon i,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__icon,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__icon i {
    color: var(--hk-ib-icon-active, #fff);
}

.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__icon--image img,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__icon--image img {
    filter: brightness(0) invert(1);
}

.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__link,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__link {
    color: var(--hk-ib-link-active, #fff);
}

.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__btn,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__btn {
    background-color: var(--hk-ib-btn-bg-active, rgba(255,255,255,0.2));
    color: var(--hk-ib-btn-color-active, #fff);
}

/* ---------- Hover: Lift ---------- */
.hk-ib--hover-lift .hk-ib__item:not(.hk-ib__item--active):hover,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* ---------- Klickbare Box ---------- */
.hk-ib__item--clickable {
    cursor: pointer;
}

/* ---------- Header (Icon top-left / top-right) ---------- */
.hk-ib__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.hk-ib__header-spacer {
    flex: 1;
}

/* ---------- Icon ---------- */
.hk-ib__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--hk-ib-icon-color, #0000aa);
    transition: color 0.35s ease, filter 0.35s ease;
    line-height: 1;
}

.hk-ib__icon i {
    color: inherit;
    transition: color 0.35s ease;
}

.hk-ib__icon--image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: filter 0.35s ease;
}

/* Icon above-title */
.hk-ib__item--icon-above-title > .hk-ib__item-inner > .hk-ib__icon {
    margin-bottom: 12px;
}

/* ---------- Title ---------- */
.hk-ib__title {
    margin: 0 0 12px;
    color: var(--hk-ib-title-color, #333);
    transition: color 0.35s ease;
    line-height: 1.3;
}

.hk-ib__title-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.hk-ib__title-row--with-icon .hk-ib__title {
    margin-top: 0;
}

/* ---------- Description ---------- */
.hk-ib__desc {
    color: var(--hk-ib-text-color, #666);
    transition: color 0.35s ease;
    line-height: 1.6;
    flex-grow: 1;
}

.hk-ib__desc p:last-child {
    margin-bottom: 0;
}

/* ---------- Link / Button ---------- */
.hk-ib__link-wrap {
    margin-top: auto;
    padding-top: 20px;
}

.hk-ib__link {
    color: var(--hk-ib-link-color, #0000aa);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.35s ease;
    font-size: 14px;
}

.hk-ib__btn {
    display: inline-block;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
    line-height: 1;
    border: none;
}

/* Button-Stile (vom Parent geerbt) */
.hk-ib--btn-pill .hk-ib__btn,
.hk-ib--btn-solid .hk-ib__btn {
    background-color: var(--hk-ib-btn-bg, #e8f0fe);
    color: var(--hk-ib-btn-color, #333);
    border-radius: var(--hk-ib-btn-radius, 50px);
    padding: var(--hk-ib-btn-padding, 12px 28px);
}

.hk-ib--btn-solid .hk-ib__btn {
    border-radius: 4px;
}

.hk-ib--btn-outline .hk-ib__btn {
    background-color: transparent;
    color: var(--hk-ib-btn-color, #333);
    border: 2px solid currentColor;
    border-radius: var(--hk-ib-btn-radius, 50px);
    padding: var(--hk-ib-btn-padding, 10px 26px);
}

.hk-ib--btn-text .hk-ib__btn {
    background: none;
    color: var(--hk-ib-link-color, #0000aa);
    padding: 0;
    font-weight: 700;
}

/* ---------- Pagination ---------- */
.hk-ib__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}

.hk-ib__page-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #e5e7eb;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, color 0.3s;
}

.hk-ib__page-btn--active {
    background: var(--hk-ib-bg-active, #0000aa);
    color: #fff;
}

.hk-ib__page-btn--arrow {
    background: transparent;
    color: #999;
    font-size: 18px;
}

.hk-ib__page-btn--arrow:hover {
    color: #333;
}

.hk-ib__load-more {
    display: block;
    margin: 32px auto 0;
    padding: 12px 32px;
    background: var(--hk-ib-bg-active, #0000aa);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 15px;
    cursor: pointer;
    transition: opacity 0.3s;
}

.hk-ib__load-more:hover {
    opacity: 0.85;
}

/* ---------- Slick Overrides ---------- */
.hk-ib--carousel .slick-list {
    margin: 0 calc(var(--hk-ib-col-gap, 24px) / -2);
}

.hk-ib--carousel .slick-track {
    display: flex !important;
}

.hk-ib--carousel .slick-slide {
    height: auto;
}

.hk-ib--carousel .slick-slide > div {
    height: 100%;
}

.hk-ib--carousel .hk-ib__item {
    height: 100% !important;
}

.hk-ib--carousel .slick-arrow {
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: background 0.3s, box-shadow 0.3s;
}

.hk-ib--carousel .slick-arrow:hover {
    background: #f5f5f5;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

.hk-ib--carousel .slick-prev {
    left: -22px;
}

.hk-ib--carousel .slick-next {
    right: -22px;
}

.hk-ib--carousel .slick-prev:before,
.hk-ib--carousel .slick-next:before {
    color: #333;
    font-size: 20px;
}

.hk-ib--carousel .slick-dots {
    bottom: -40px;
}

.hk-ib--carousel .slick-dots li button:before {
    font-size: 10px;
    color: #ccc;
}

.hk-ib--carousel .slick-dots li.slick-active button:before {
    color: var(--hk-ib-bg-active, #0000aa);
}

/* ---------- Masonry column-count responsive ---------- */
.hk-ib--masonry[data-columns="1"] .hk-ib__grid { column-count: 1; }
.hk-ib--masonry[data-columns="2"] .hk-ib__grid { column-count: 2; }
.hk-ib--masonry[data-columns="3"] .hk-ib__grid { column-count: 3; }
.hk-ib--masonry[data-columns="4"] .hk-ib__grid { column-count: 4; }
.hk-ib--masonry[data-columns="5"] .hk-ib__grid { column-count: 5; }
.hk-ib--masonry[data-columns="6"] .hk-ib__grid { column-count: 6; }

@media (max-width: 1024px) {
    .hk-ib--masonry .hk-ib__grid {
        column-count: attr(data-columns-tablet) !important; /* fallback below */
    }
}

@media (max-width: 640px) {
    .hk-ib--masonry .hk-ib__grid {
        column-count: 1 !important;
    }
}


/* ==========================================================================
   HK Infobox Element
   ========================================================================== */

/* ---------- Container ---------- */
.hk-ib {
    width: 100%;
    position: relative;
}

.hk-ib__grid {
    display: grid;
    gap: var(--hk-ib-row-gap, 24px) var(--hk-ib-col-gap, 24px);
}

/* Carousel: grid wird zu Slick-Container, kein CSS-Grid */
.hk-ib--carousel .hk-ib__grid {
    display: block;
}

/* ---------- Einzelne Box (Item) ---------- */
.hk-ib__item {
    background-color: var(--hk-ib-bg, #e8f0fe);
    border-radius: var(--hk-ib-radius, 25px);
    padding: var(--hk-ib-padding, 32px);
    min-height: var(--hk-ib-min-h, auto);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: background-color 0.35s ease,
                transform 0.35s ease,
                box-shadow 0.35s ease;
    overflow: hidden;
    box-sizing: border-box;
}

/* Slick: Item-Margin im Carousel */
.hk-ib--carousel .hk-ib__item {
    margin: 0 calc(var(--hk-ib-col-gap, 24px) / 2);
}

.hk-ib__item-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    z-index: 1;
}

/* ---------- Aktiv-Zustand (Checkbox) ---------- */
.hk-ib__item--active {
    background-color: var(--hk-ib-bg-active, #0000aa);
}

.hk-ib__item--active .hk-ib__title {
    color: var(--hk-ib-title-active, #fff);
}

.hk-ib__item--active .hk-ib__desc {
    color: var(--hk-ib-text-active, rgba(255,255,255,0.85));
}

.hk-ib__item--active .hk-ib__icon,
.hk-ib__item--active .hk-ib__icon i {
    color: var(--hk-ib-icon-active, #fff);
}

.hk-ib__item--active .hk-ib__icon--image img {
    filter: brightness(0) invert(1);
}

.hk-ib__item--active .hk-ib__link {
    color: var(--hk-ib-link-active, #fff) !important;
}

.hk-ib__item--active .hk-ib__btn {
    background-color: var(--hk-ib-btn-bg-active, rgba(255,255,255,0.2));
    color: var(--hk-ib-btn-color-active, #fff);
}

/* ---------- Hover-Effekte (nur für NICHT-aktive Boxen) ---------- */

/* Farbwechsel */
.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover {
    background-color: var(--hk-ib-bg-active, #0000aa);
}

.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__title,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__title {
    color: var(--hk-ib-title-active, #fff);
}

.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__desc,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__desc {
    color: var(--hk-ib-text-active, rgba(255,255,255,0.85));
}

.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__icon,
.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__icon i,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__icon,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__icon i {
    color: var(--hk-ib-icon-active, #fff);
}

.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__icon--image img,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__icon--image img {
    filter: brightness(0) invert(1);
}

.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__link,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__link {
    color: var(--hk-ib-link-active, #fff) !important;
}

.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__btn,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__btn {
    background-color: var(--hk-ib-btn-bg-active, rgba(255,255,255,0.2));
    color: var(--hk-ib-btn-color-active, #fff);
}

/* Lift */
.hk-ib--hover-lift .hk-ib__item:not(.hk-ib__item--active):hover,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* ---------- Titel ---------- */
.hk-ib__title {
    color: var(--hk-ib-title-color, #333);
    margin: 0 0 12px;
    line-height: 1.3;
    transition: color 0.35s ease;
}

/* ---------- Beschreibung ---------- */
.hk-ib__desc {
    color: var(--hk-ib-text-color, #666);
    line-height: 1.6;
    margin: 0 0 16px;
    flex: 1;
    transition: color 0.35s ease;
}

.hk-ib__desc p:last-child {
    margin-bottom: 0;
}

/* ---------- Icon ---------- */
.hk-ib__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.35s ease, filter 0.35s ease;
}

.hk-ib__icon i {
    color: var(--hk-ib-icon-color, #0000aa);
    transition: color 0.35s ease;
}

.hk-ib__icon--image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: filter 0.35s ease;
}

/* Icon-Position: Header (top-left / top-right) */
.hk-ib__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.hk-ib__header-spacer {
    flex: 1;
}

/* Icon-Position: above-title */
.hk-ib__item--icon-above-title > .hk-ib__item-inner > .hk-ib__icon {
    margin-bottom: 12px;
}

/* Icon-Position: inline-left */
.hk-ib__title-row--with-icon {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hk-ib__title-row--with-icon .hk-ib__title {
    margin-bottom: 0;
}

.hk-ib__title-row {
    margin-bottom: 12px;
}

/* ---------- Link / Button ---------- */
.hk-ib__link-wrap {
    margin-top: auto;
    padding-top: 16px;
}

.hk-ib__link {
    color: var(--hk-ib-link-color, #0000aa);
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.35s ease;
}

.hk-ib__link:hover {
    text-decoration: underline;
}

.hk-ib__btn {
    display: inline-block;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    border: none;
    line-height: 1;
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

/* Button-Stile (vom Parent) */
.hk-ib--btn-pill .hk-ib__btn {
    background-color: var(--hk-ib-btn-bg, rgba(0,0,0,0.08));
    color: var(--hk-ib-btn-color, #333);
    border-radius: var(--hk-ib-btn-radius, 50px);
    padding: var(--hk-ib-btn-padding, 12px 28px);
}

.hk-ib--btn-solid .hk-ib__btn {
    background-color: var(--hk-ib-btn-bg, rgba(0,0,0,0.08));
    color: var(--hk-ib-btn-color, #333);
    border-radius: var(--hk-ib-btn-radius, 4px);
    padding: var(--hk-ib-btn-padding, 12px 28px);
}

.hk-ib--btn-outline .hk-ib__btn {
    background-color: transparent;
    color: var(--hk-ib-btn-color, #333);
    border: 2px solid currentColor;
    border-radius: var(--hk-ib-btn-radius, 50px);
    padding: var(--hk-ib-btn-padding, 10px 26px);
}

.hk-ib--btn-text .hk-ib__btn {
    background: none;
    padding: 0;
    color: var(--hk-ib-link-color, #0000aa);
    font-weight: 700;
}

.hk-ib--btn-text .hk-ib__btn:hover {
    text-decoration: underline;
}

/* Aktive Box: Button-Farben */
.hk-ib__item--active .hk-ib__btn,
.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__btn,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__btn {
    background-color: var(--hk-ib-btn-bg-active, rgba(255,255,255,0.2));
    color: var(--hk-ib-btn-color-active, #fff);
    border-color: var(--hk-ib-btn-color-active, #fff);
}

.hk-ib--btn-text .hk-ib__item--active .hk-ib__btn,
.hk-ib--btn-text .hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__btn {
    background: none;
}

/* ---------- Klickbare Box ---------- */
.hk-ib__item--clickable {
    cursor: pointer;
}

.hk-ib__item--clickable:focus-visible {
    outline: 2px solid var(--hk-ib-bg-active, #0000aa);
    outline-offset: 2px;
}

/* ---------- Pagination ---------- */
.hk-ib__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}

.hk-ib__page-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #e5e7eb;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, color 0.3s;
}

.hk-ib__page-btn--active {
    background: var(--hk-ib-bg-active, #0000aa);
    color: #fff;
}

.hk-ib__page-btn--arrow {
    background: transparent;
    font-size: 18px;
    color: #999;
}

.hk-ib__page-btn--arrow:hover {
    color: #333;
}

.hk-ib__page-btn--arrow[disabled] {
    opacity: 0.3;
    cursor: default;
}

.hk-ib__load-more {
    display: block;
    margin: 32px auto 0;
    padding: 12px 32px;
    border: 2px solid #ddd;
    background: transparent;
    border-radius: 50px;
    font-size: 15px;
    cursor: pointer;
    transition: border-color 0.3s, color 0.3s;
}

.hk-ib__load-more:hover {
    border-color: var(--hk-ib-bg-active, #0000aa);
    color: var(--hk-ib-bg-active, #0000aa);
}

/* ---------- Slick Overrides ---------- */
.hk-ib--carousel .slick-track {
    display: flex !important;
}

.hk-ib--carousel .slick-slide {
    height: auto;
}

.hk-ib--carousel .slick-slide > div {
    height: 100%;
}

.hk-ib--carousel .slick-slide .hk-ib__item {
    height: 100%;
}

/* ---------- Carousel Navigation (below carousel) ---------- */

/* Nav wrapper: flex row with prev | dots | next */
.hk-ib__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
}

/* Slick arrows inside nav container */
.hk-ib__nav .slick-prev,
.hk-ib__nav .slick-next {
    position: static !important;
    transform: none !important;
    width: auto;
    height: auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    color: #999;
    font-size: 0;
    line-height: 1;
    transition: color 0.3s;
}

.hk-ib__nav .slick-prev:before,
.hk-ib__nav .slick-next:before {
    color: #999;
    font-size: 28px;
    transition: color 0.3s;
    opacity: 1;
}

.hk-ib__nav .slick-prev:hover:before,
.hk-ib__nav .slick-next:hover:before {
    color: var(--hk-ib-bg-active, #0000aa);
}

.hk-ib__nav .slick-prev.slick-disabled:before,
.hk-ib__nav .slick-next.slick-disabled:before {
    opacity: 0.3;
}

/* Slick dots inside nav container */
.hk-ib__nav .slick-dots {
    position: static !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
    width: auto;
}

.hk-ib__nav .slick-dots li {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
}

.hk-ib__nav .slick-dots li button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e5e7eb;
    border: none;
    padding: 0;
    font-size: 0;
    cursor: pointer;
    transition: background 0.3s;
}

.hk-ib__nav .slick-dots li button:before {
    display: none;
}

.hk-ib__nav .slick-dots li.slick-active button {
    background: var(--hk-ib-bg-active, #0000aa);
}

/* No dots: tighten arrow gap */
.hk-ib__nav--no-dots {
    gap: 12px;
}

/* No arrows: hide them */
.hk-ib__nav--no-arrows .slick-prev,
.hk-ib__nav--no-arrows .slick-next {
    display: none !important;
}

/* ==========================================================================
   HK Infobox – Button Fixes (Aktive Box + Hover)
   Höhere Spezifität, überschreibt Button-Stil-Regeln sicher.
   ========================================================================== */

/* --- Button Hover (Normale Box) --- */
.hk-ib .hk-ib__item:not(.hk-ib__item--active) .hk-ib__btn:hover {
    background-color: var(--hk-ib-btn-hover-bg, var(--hk-ib-btn-bg));
    color: var(--hk-ib-btn-hover-color, var(--hk-ib-btn-color));
}

/* --- Aktive Box: Button Grundzustand --- */
.hk-ib .hk-ib__item--active .hk-ib__btn {
    background-color: var(--hk-ib-btn-bg-active, rgba(255,255,255,0.2)) !important;
    color: var(--hk-ib-btn-color-active, #fff) !important;
    border-radius: var(--hk-ib-btn-radius, 50px);
    padding: var(--hk-ib-btn-padding, 12px 28px);
}

/* --- Aktive Box: Button Hover --- */
.hk-ib .hk-ib__item--active .hk-ib__btn:hover {
    background-color: var(--hk-ib-btn-hover-bg-active, var(--hk-ib-btn-bg-active, rgba(255,255,255,0.35))) !important;
    color: var(--hk-ib-btn-hover-color-active, var(--hk-ib-btn-color-active, #fff)) !important;
}

/* --- Hover-Box (nicht aktiv): Button Grundzustand --- */
.hk-ib--hover-color .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__btn,
.hk-ib--hover-both .hk-ib__item:not(.hk-ib__item--active):hover .hk-ib__btn {
    background-color: var(--hk-ib-btn-bg-active, rgba(255,255,255,0.2)) !important;
    color: var(--hk-ib-btn-color-active, #fff) !important;
    border-radius: var(--hk-ib-btn-radius, 50px);
}

/* --- Text-Stil: Kein Hintergrund auch bei aktiver Box --- */
.hk-ib--btn-text .hk-ib__item--active .hk-ib__btn,
.hk-ib--btn-text .hk-ib__item--active .hk-ib__btn:hover {
    background: none !important;
    padding: 0;
}

/* --- Outline-Stil: Border-Color für aktive Box --- */
.hk-ib--btn-outline .hk-ib__item--active .hk-ib__btn {
    border-color: var(--hk-ib-btn-color-active, #fff) !important;
}