/* markt.info - Baustein „Was ist am Wochenende los?“ (templates/startseite/_wochenende.php): dunkles Band, Reiter, Orte je Bundesland. */

.mi .mi-wochenende { --we-nacht: #0b1d36; --we-nacht-2: #12294a; padding: 72px 0; background: var(--we-nacht); color: #e7edf6; border-top: 0; }
.mi-wochenende h2, .mi-wochenende h3 { color: #fff; }
.mi-wochenende .mi-schmal { color: #b7c4d8; }

.mi-we-reiter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; list-style: none; padding: 0; margin: 28px 0 24px; }
.mi .mi-we-reiter a { display: block; height: 100%; box-sizing: border-box; padding: 16px 18px; border-radius: 12px; background: var(--we-nacht-2);
                      border: 1px solid rgba(255, 255, 255, .08); color: #fff; text-decoration: none; transition: background .15s; }
.mi .mi-we-reiter a:hover { background: #1a3560; color: #fff; }
.mi .mi-we-reiter .uk-active a { background: #fff; }
.mi-we-reiter b { display: block; font-size: 1.05rem; }
.mi-we-reiter span { display: block; font-size: .82rem; color: #9fb0c8; margin-top: 2px; }
.mi .mi-we-reiter .uk-active b { color: var(--mi-blau); }
.mi .mi-we-reiter .uk-active span { color: var(--mi-neben); }

.mi-we-laender { columns: 3 300px; column-gap: 34px; }
.mi-we-land { break-inside: avoid; padding: 16px 0 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
.mi-we-land h3 { margin: 0 0 8px; font-size: 1rem; display: flex; justify-content: space-between; }
.mi-we-land h3 span { color: var(--mi-gruen); }
.mi-we-land p { margin: 0; line-height: 2; }
.mi .mi-we-land a { display: inline-block; margin-right: 12px; color: #dfe6f1; text-decoration-color: rgba(255, 255, 255, .3); white-space: nowrap; }
.mi .mi-we-land a:hover { color: #fff; text-decoration-color: var(--mi-gruen); }
.mi-we-land small { color: var(--mi-gruen); font-weight: bold; }
.mi-we-mehr { color: #8394ad; font-size: .85rem; white-space: nowrap; }
.mi .mi-we-pfeil { font-weight: bold; text-decoration: none; color: var(--mi-gruen); }
.mi .mi-we-pfeil:hover { color: #8fd63a; }
.mi-we-pfeil::after { content: " →"; }

@media (max-width: 959px) {
    .mi-we-reiter { grid-template-columns: 1fr 1fr; }
}