.khl-showcase{
    --khl-accent:#7d9300;
    --khl-text:#17202a;
    --khl-muted:#65707b;
    --khl-card:#f7f9fa;
    --khl-line:rgba(30,45,55,.12);
    width:100%;
}

.khl-showcase__subtitle{
    text-align:center;
    color:#535e67;
    font-size:clamp(1rem,1.3vw,1.2rem);
    margin:-10px 0 34px;
}

/* Highlights */
.khl-highlight-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px;
    align-items:stretch;
}

.khl-highlight-card{
    min-width:0;
    background:var(--khl-card);
    border-radius:5px;
    overflow:hidden;
    box-shadow:0 4px 16px rgba(0,0,0,.11);
    display:flex;
    flex-direction:column;
}

.khl-highlight-card__image{
    display:block;
    aspect-ratio:4/3;
    overflow:hidden;
    background:#e6eaec;
}

.khl-highlight-card__image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.khl-highlight-card__placeholder{
    display:block;
    width:100%;
    height:100%;
    background:linear-gradient(135deg,#edf0f2,#dce2e5);
}

.khl-highlight-card__body{
    padding:20px 18px 14px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.khl-highlight-card__category{
    color:var(--khl-accent);
    text-transform:uppercase;
    font-size:.76rem;
    font-weight:700;
    margin-bottom:9px;
}

.khl-highlight-card__title{
    margin:0 0 12px;
    font-size:clamp(1.08rem,1.35vw,1.35rem);
    line-height:1.28;
    font-weight:600;
}

.khl-highlight-card__title a,
.khl-highlight-card__footer a{
    color:var(--khl-accent);
    text-decoration:none;
}

.khl-highlight-card__meta{
    color:var(--khl-muted);
    font-size:.9rem;
    margin-bottom:12px;
}

.khl-highlight-card__excerpt{
    color:#56606a;
    font-size:.96rem;
    line-height:1.5;
    margin-bottom:14px;
}

.khl-highlight-card__footer{
    margin-top:auto;
    padding-top:11px;
    border-top:1px solid var(--khl-line);
    text-align:right;
}

/* Trenner */
.khl-divider{
    display:flex;
    align-items:center;
    gap:18px;
    margin:44px 0 26px;
    color:#68737d;
}
.khl-divider:before,.khl-divider:after{
    content:"";
    height:1px;
    background:var(--khl-line);
    flex:1;
}

.khl-list-title{
    margin:0 0 10px;
    color:var(--khl-text);
    font-size:1.25rem;
}

/* Liste */
.khl-event-list{
    border-top:1px solid var(--khl-line);
}

.khl-event-row{
    display:grid;
    grid-template-columns:64px minmax(0,1fr) 28px;
    gap:20px;
    align-items:center;
    padding:10px 4px;
    border-bottom:1px solid var(--khl-line);
    color:inherit;
    text-decoration:none !important;
}

/*
 * DESKTOP-ZUSAMMENSPIEL
 * Nur exakt die Termine, die oben als Highlight-Karte stehen,
 * werden unten ausgeblendet.
 */
.khl-has-top .khl-event-row.khl-is-highlight{
    display:none;
}

.khl-date-tile{
    width:58px;
    border:1px solid var(--khl-accent);
    border-radius:4px;
    overflow:hidden;
    text-align:center;
    background:#fff;
}

.khl-date-tile__month{
    display:block;
    padding:3px 2px;
    background:var(--khl-accent);
    color:#fff;
    font-size:.75rem;
    font-weight:700;
}

.khl-date-tile__day{
    display:block;
    padding:4px 2px 5px;
    color:#26313a;
    font-size:1.45rem;
    line-height:1.15;
    font-weight:600;
}

.khl-event-row__title{
    display:block;
    color:var(--khl-text);
    font-size:1rem;
    line-height:1.35;
    font-weight:600;
    margin-bottom:5px;
}

.khl-event-row__meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px 24px;
    color:var(--khl-muted);
    font-size:.84rem;
}

.khl-event-row__arrow{
    color:#39444c;
    font-size:2rem;
    line-height:1;
    text-align:right;
}

.khl-all-events{
    text-align:center;
    margin-top:28px;
}

.khl-all-events a{
    display:inline-block;
    padding:10px 20px;
    background:var(--khl-accent);
    color:#fff !important;
    border-radius:4px;
    text-decoration:none !important;
    font-weight:600;
}

/* Tablet */
@media(max-width:900px) and (min-width:621px){
    .khl-highlight-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

/*
 * HANDY-ZUSAMMENSPIEL
 * Standard: mobile_highlights="1"
 * => nur Karte 1 bleibt oben.
 * Karten 2+3 verschwinden oben und erscheinen dafür automatisch unten.
 */
@media(max-width:620px){

    .khl-showcase__subtitle{
        margin-bottom:22px;
    }

    .khl-highlight-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    /* Auf Mobil zunächst alle Highlight-Termine in der Liste wieder freigeben. */
    .khl-has-top .khl-event-row.khl-is-highlight{
        display:grid;
    }

    /* Alle großen Highlight-Karten auf Mobil ausblenden ... */
    .khl-has-top .khl-highlight-card{
        display:none;
    }

    /* ... und je nach mobile_highlights wieder einblenden. */
    .khl-mobile-highlights-1 .khl-highlight-pos-1,
    .khl-mobile-highlights-2 .khl-highlight-pos-1,
    .khl-mobile-highlights-2 .khl-highlight-pos-2,
    .khl-mobile-highlights-3 .khl-highlight-pos-1,
    .khl-mobile-highlights-3 .khl-highlight-pos-2,
    .khl-mobile-highlights-3 .khl-highlight-pos-3,
    .khl-mobile-highlights-4 .khl-highlight-pos-1,
    .khl-mobile-highlights-4 .khl-highlight-pos-2,
    .khl-mobile-highlights-4 .khl-highlight-pos-3,
    .khl-mobile-highlights-4 .khl-highlight-pos-4,
    .khl-mobile-highlights-5 .khl-highlight-pos-1,
    .khl-mobile-highlights-5 .khl-highlight-pos-2,
    .khl-mobile-highlights-5 .khl-highlight-pos-3,
    .khl-mobile-highlights-5 .khl-highlight-pos-4,
    .khl-mobile-highlights-5 .khl-highlight-pos-5,
    .khl-mobile-highlights-6 .khl-highlight-pos-1,
    .khl-mobile-highlights-6 .khl-highlight-pos-2,
    .khl-mobile-highlights-6 .khl-highlight-pos-3,
    .khl-mobile-highlights-6 .khl-highlight-pos-4,
    .khl-mobile-highlights-6 .khl-highlight-pos-5,
    .khl-mobile-highlights-6 .khl-highlight-pos-6{
        display:flex;
    }

    /* Nur die auf Mobil tatsächlich sichtbaren Highlight-Karten
       werden in der Liste ausgeblendet. */
    .khl-mobile-highlights-1 .khl-highlight-list-pos-1,
    .khl-mobile-highlights-2 .khl-highlight-list-pos-1,
    .khl-mobile-highlights-2 .khl-highlight-list-pos-2,
    .khl-mobile-highlights-3 .khl-highlight-list-pos-1,
    .khl-mobile-highlights-3 .khl-highlight-list-pos-2,
    .khl-mobile-highlights-3 .khl-highlight-list-pos-3,
    .khl-mobile-highlights-4 .khl-highlight-list-pos-1,
    .khl-mobile-highlights-4 .khl-highlight-list-pos-2,
    .khl-mobile-highlights-4 .khl-highlight-list-pos-3,
    .khl-mobile-highlights-4 .khl-highlight-list-pos-4,
    .khl-mobile-highlights-5 .khl-highlight-list-pos-1,
    .khl-mobile-highlights-5 .khl-highlight-list-pos-2,
    .khl-mobile-highlights-5 .khl-highlight-list-pos-3,
    .khl-mobile-highlights-5 .khl-highlight-list-pos-4,
    .khl-mobile-highlights-5 .khl-highlight-list-pos-5,
    .khl-mobile-highlights-6 .khl-highlight-list-pos-1,
    .khl-mobile-highlights-6 .khl-highlight-list-pos-2,
    .khl-mobile-highlights-6 .khl-highlight-list-pos-3,
    .khl-mobile-highlights-6 .khl-highlight-list-pos-4,
    .khl-mobile-highlights-6 .khl-highlight-list-pos-5,
    .khl-mobile-highlights-6 .khl-highlight-list-pos-6{
        display:none;
    }

    .khl-divider{
        margin:32px 0 20px;
    }

    .khl-event-row{
        grid-template-columns:56px minmax(0,1fr) 18px;
        gap:12px;
        padding:9px 0;
    }

    .khl-date-tile{
        width:52px;
    }

    .khl-date-tile__day{
        font-size:1.25rem;
    }

    .khl-event-row__meta{
        display:block;
    }

    .khl-event-row__meta span{
        display:block;
        margin-top:2px;
    }

    .khl-event-row__arrow{
        font-size:1.6rem;
    }

    /* Wenn mobile_highlights=0: Untertitel/Highlight-Bereich nicht unnötig aufblasen */
    .khl-mobile-highlights-0 .khl-highlight-grid{
        display:none;
    }
    .khl-mobile-highlights-0 .khl-showcase__subtitle{
        display:none;
    }
}


/* Hover-Effekt: anklickbare Bereiche leicht hervorheben */
@media (hover:hover) and (pointer:fine) {
    .khl-highlight-card {
        transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    .khl-highlight-card:hover {
        background-color: rgba(255,255,255,.78);
        box-shadow: 0 6px 20px rgba(0,0,0,.14);
        transform: translateY(-2px);
    }

    .khl-event-row {
        transition: background-color .18s ease;
    }

    .khl-event-row:hover {
        background-color: rgba(255,255,255,.48);
    }
}