/* ============================================
   Cassiopeia_fve v3 — Förderverein Kita Herrenshoff
   Design-Variante C "Verspielt & bunt":
   - Navy #13254B + Hellgrün #C7E570 (Vereinsfarben)
   - Weißer Header: Logo + Login/Mitglied-werden
   - Navy-Menüleiste (sticky) mit grünem Active-Tab
   - Hero mit Blob-Grafiken, Info-Strip, Karten
   - Navy-Footer mit hellgrünen Headings
   Fonts: Nunito (Text) + Baloo 2 (Headlines)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700;800&display=swap');

:root {
    --fve-navy: #13254B;          /* Vereins-Navy */
    --fve-navy-hell: #1d3466;     /* Hover-Navy */
    --fve-gruen: #C7E570;         /* Vereins-Hellgrün */
    --fve-gruen-dunkel: #b8d95c;  /* Hover-Hellgrün */
    --fve-gruen-schmal: #5d7d1f;  /* dunkles Grün für Text */
    --fve-orange: #FF8C42;        /* Akzent-Orange */
    --fve-orange-dunkel: #f07c30;
    --fve-gelb: #FFD166;          /* Blob-Gelb */
    --fve-blau: #B3D9FF;          /* Blob-Blau */
    --fve-bg: #fbfcf8;            /* Seitenhintergrund */
    --fve-rahmen: #eef1e6;        /* helle Kanten */
    --fve-text: #333333;
    --fve-text-weich: #6b7a70;
    --fve-white: #FFFFFF;
}

body.fve-theme {
    background: var(--fve-bg);
    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--fve-text);
    min-height: 100vh;
}

h1, h2, h3, h4, h5, .fve-site-title {
    font-family: "Baloo 2", "Nunito", sans-serif;
    color: var(--fve-navy);
    font-weight: 700;
}

/* ============================================
   HEADER: weiß, Logo links, Buttons rechts
   ============================================ */
.fve-theme .container-header {
    background: var(--fve-white);
    box-shadow: 0 2px 14px rgba(19,37,75,.08);
}

.fve-theme .container-header .grid-child {
    max-width: 1180px;
    margin: 0 auto;
}

.fve-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 14px 24px;
    max-width: 1180px;
}

.fve-brand .brand-logo {
    display: block;
    text-decoration: none;
}

.fve-brand .fve-logo {
    max-height: 58px;
    width: auto;
    background: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.fve-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fve-header-actions .btn {
    font-family: "Nunito", sans-serif;
    font-weight: 800 !important;
    font-size: .9rem !important;
    padding: 10px 20px !important;
    border-radius: 12px !important;
    border: 0 !important;
    text-decoration: none !important;
    transition: all .18s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: none !important;
}

.fve-btn-ghost {
    background: #f1f4ea !important;
    color: var(--fve-navy) !important;
}

.fve-btn-ghost:hover {
    background: #e5e9dc !important;
    color: var(--fve-navy) !important;
}

.fve-btn-dark {
    background: var(--fve-navy) !important;
    color: #fff !important;
}

.fve-btn-dark:hover {
    background: var(--fve-navy-hell) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.fve-btn-primary {
    background: var(--fve-gruen) !important;
    color: var(--fve-navy) !important;
}

.fve-btn-primary:hover {
    background: var(--fve-gruen-dunkel) !important;
    color: var(--fve-navy) !important;
}

/* Burger (nur auf Mobile sichtbar) */
.fve-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: var(--fve-navy);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
    transition: background .15s ease;
}

.fve-burger:hover { background: var(--fve-navy-hell); }

.fve-burger span {
    display: block;
    width: 22px;
    height: 3px;
    background: #fff;
    border-radius: 3px;
    transition: transform .22s ease, opacity .22s ease;
}

.fve-burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.fve-burger.is-open span:nth-child(2) { opacity: 0; }
.fve-burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile-Actions (nur im aufgeklappten Menü sichtbar) */
.fve-mobile-actions {
    display: none;
}

/* ============================================
   NAV: Navy-Leiste mit grünem Active-Tab
   ============================================ */
.fve-nav-row {
    background: var(--fve-navy);
    max-width: 1180px;
    padding: 0 16px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(19,37,75,.22);
    margin: 0 auto;
}

.fve-theme .header.position-sticky.sticky-top .fve-nav-row,
.fve-theme .container-header.position-sticky.sticky-top .fve-nav-row {
    position: sticky;
    top: 0;
    z-index: 60;
}

/* Menü selbst */
.fve-theme .fve-nav-row .mod-menu {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
    align-items: center;
}

.fve-theme .fve-nav-row .mod-menu > li > a {
    display: block;
    color: #dbe4f5;
    padding: 13px 10px;
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0;
    transition: background .15s ease, color .15s ease;
    white-space: nowrap;
}

.fve-theme .header .fve-nav-row .mod-menu > li > a,
.fve-theme .header .fve-nav-row .mod-menu > li > a:link,
.fve-theme .header .fve-nav-row .mod-menu > li > a:visited {
    color: #dbe4f5 !important;
}

.fve-theme .fve-nav-row .mod-menu > li > a:hover,
.fve-theme .fve-nav-row .mod-menu > li > a:focus {
    background: rgba(255,255,255,.08);
    color: #fff !important;
}

/* Aktiver Menüpunkt = hellgrüner Tab (gleicher Radius wie Suchfeld: 999px) */
.fve-theme .fve-nav-row .mod-menu > li.current > a,
.fve-theme .fve-nav-row .mod-menu > li.active > a,
.fve-theme .fve-nav-row .mod-menu > li.current > a:link,
.fve-theme .fve-nav-row .mod-menu > li.current > a:visited,
.fve-theme .fve-nav-row .mod-menu > li.active > a:link,
.fve-theme .fve-nav-row .mod-menu > li.active > a:visited {
    background: var(--fve-gruen) !important;
    color: var(--fve-navy) !important;
    border-radius: 999px;
}

.fve-theme .fve-nav-row .mod-menu > li.current > a:hover,
.fve-theme .fve-nav-row .mod-menu > li.current > a:focus,
.fve-theme .fve-nav-row .mod-menu > li.active > a:hover,
.fve-theme .fve-nav-row .mod-menu > li.active > a:focus {
    background: var(--fve-gruen-dunkel) !important;
    color: var(--fve-navy) !important;
}

/* Eltern-Punkte mit Pfeil */
.fve-theme .fve-nav-row .mod-menu li.parent > a::after {
    content: " ▾";
    font-size: .78em;
    opacity: .75;
}

/* Dropdowns: Hover zeigt Untermenü */
.fve-theme .fve-nav-row .mod-menu li.parent {
    position: relative;
}

.fve-theme .fve-nav-row .mod-menu li.parent > .mod-menu__sub,
.fve-theme .fve-nav-row .mod-menu li.parent > ul.nav-child {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 70;
    background: #fff;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 16px 34px rgba(19,37,75,.22);
    min-width: 210px;
    padding: 8px;
    list-style: none;
    margin: 0;
    display: none;
}

.fve-theme .fve-nav-row .mod-menu li.parent:hover > .mod-menu__sub,
.fve-theme .fve-nav-row .mod-menu li.parent:hover > ul.nav-child {
    display: block;
}

.fve-theme .fve-nav-row .mod-menu .mod-menu__sub li a,
.fve-theme .fve-nav-row .mod-menu ul.nav-child li a {
    display: block;
    padding: 9px 14px;
    color: var(--fve-navy) !important;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    background: transparent !important;
}

.fve-theme .fve-nav-row .mod-menu .mod-menu__sub li a:link,
.fve-theme .fve-nav-row .mod-menu .mod-menu__sub li a:visited,
.fve-theme .fve-nav-row .mod-menu ul.nav-child li a:link,
.fve-theme .fve-nav-row .mod-menu ul.nav-child li a:visited {
    color: var(--fve-navy) !important;
}

.fve-theme .fve-nav-row .mod-menu .mod-menu__sub li a:hover,
.fve-theme .fve-nav-row .mod-menu ul.nav-child li a:hover {
    background: #f1f4ea !important;
    color: var(--fve-navy) !important;
}

/* CTA rechts in der Leiste (entfernt: Menüpunkt „Basar" reicht) */

/* ============================================
   HERO (Banner-Modul): Headline + Blobs
   ============================================ */
.fve-banner {
    background: linear-gradient(180deg, #ffffff 0%, #f3f9e3 100%);
    border-bottom: 1px solid var(--fve-rahmen);
}

.fve-hero {
    max-width: 1180px;
    margin: 0 auto;
    padding: 44px 24px 56px;
}

.fve-hero-inner {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 40px;
    align-items: center;
}

.fve-hero h1 {
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    line-height: 1.15;
    color: var(--fve-navy);
    margin: 0 0 14px;
    font-weight: 800;
}

.fve-hero h1 .hl {
    color: var(--fve-gruen-schmal);
}

.fve-hero p {
    font-size: 1.08rem;
    color: #55615a;
    max-width: 34rem;
    margin: 0 0 24px;
}

.fve-hero .fve-hero-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
}

.fve-hero .fve-hero-ctas .btn {
    font-size: .92rem !important;
    padding: 12px 24px !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    border: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: none !important;
}

/* Blob-Grafik rechts */
.fve-hero-blobs {
    position: relative;
    min-height: 300px;
}

.fve-hero-blobs .blob {
    position: absolute;
    border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 800;
    color: var(--fve-navy);
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    font-size: 1rem;
    line-height: 1.3;
}

.fve-hero-blobs .blob .emoji {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 4px;
}

.fve-hero-blobs .blob-1 { width: 170px; height: 170px; background: var(--fve-gruen); top: 0; left: 8%; padding: 20px; }
.fve-hero-blobs .blob-2 { width: 130px; height: 130px; background: var(--fve-gelb); top: 92px; left: 47%; padding: 16px; }
.fve-hero-blobs .blob-3 { width: 150px; height: 150px; background: var(--fve-blau); top: 140px; left: 12%; padding: 18px; }

/* ============================================
   INFO-STRIP: 4 Kacheln unter dem Hero
   ============================================ */
.fve-info-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1180px;
    margin: -18px auto 0;
    padding: 0 24px 8px;
    position: relative;
    z-index: 5;
}

.fve-info-strip .info-item {
    display: flex;
    gap: 12px;
    align-items: center;
    background: #f7f9f1;
    border: 1px solid var(--fve-rahmen);
    border-radius: 14px;
    padding: 14px 16px;
}

.fve-info-strip .info-item .emoji { font-size: 1.6rem; line-height: 1.2; }

.fve-info-strip .info-item strong {
    display: block;
    color: var(--fve-navy);
    font-size: .88rem;
    font-weight: 800;
}

.fve-info-strip .info-item span {
    color: var(--fve-text-weich);
    font-size: .78rem;
}

/* ============================================
   SITE-GRID: weiße Kartenbox statt grüner Fläche
   ============================================ */
.fve-theme .site-grid {
    max-width: 1180px;
    margin: 0 auto;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.fve-theme .container-banner {
    flex: 0 0 100%;
    order: -1;
    width: 100%;
}

.fve-theme .container-component {
    flex: 1 1 0;
    min-width: 0;
    background: var(--fve-white);
    border: 1px solid var(--fve-rahmen);
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(0,0,0,.05);
    padding: 28px;
}

.fve-theme .container-sidebar-right {
    flex: 0 0 320px;
    max-width: 320px;
}

.fve-theme .container-sidebar-left {
    flex: 0 0 240px;
    max-width: 240px;
}

.fve-theme .container-top-a,
.fve-theme .container-top-b,
.fve-theme .container-bottom-a,
.fve-theme .container-bottom-b {
    flex: 1 1 100%;
}

/* ============================================
   CONTENT
   ============================================ */
.fve-theme .container-component h1 { font-size: 26px; margin-top: 0; }
.fve-theme .container-component h2 { font-size: 21px; }
.fve-theme .container-component h3 { font-size: 17px; }

.fve-theme .container-component a {
    color: var(--fve-navy);
    font-weight: 600;
}

.fve-theme .container-component a:hover {
    color: var(--fve-gruen-schmal);
}

/* Buttons im Content */
.fve-theme .container-component .btn,
.fve-theme .container-component a.btn {
    background: var(--fve-gruen);
    color: var(--fve-navy);
    border: 0;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    padding: 9px 20px;
    transition: background .15s ease;
}

.fve-theme .container-component .btn:hover,
.fve-theme .container-component a.btn:hover {
    background: var(--fve-gruen-dunkel);
    color: var(--fve-navy);
}

.fve-theme .container-component .btn.btn-primary {
    background: var(--fve-navy);
    color: #fff;
}

/* Artikel-Titel */
.fve-theme .container-component .article-header h2,
.fve-theme .container-component .item-page h2 {
    font-size: 24px;
    border-bottom: 3px solid var(--fve-gruen);
    padding-bottom: 8px;
    display: inline-block;
}

/* Bilder im Content abrunden */
.fve-theme .container-component img {
    border-radius: 14px;
    max-width: 100%;
    height: auto;
}

/* ============================================
   BREADCRUMBS
   ============================================ */
.fve-theme .mod-breadcrumbs__wrapper {
    background: #f7f9f1;
    border: 1px solid var(--fve-rahmen);
    border-radius: 12px;
    padding: 8px 16px;
    margin-bottom: 18px;
    font-size: .82rem;
}

.fve-theme .mod-breadcrumbs a {
    color: var(--fve-navy);
    font-weight: 600;
    text-decoration: none;
}

.fve-theme .mod-breadcrumbs a:hover { text-decoration: underline; }

.fve-theme .mod-breadcrumbs__here {
    color: var(--fve-text-weich);
}

/* ============================================
   SIDEBAR: Karten mit hellgrünem Touch
   ============================================ */
.fve-theme .container-sidebar-right {
    padding: 0;
    min-width: 0;
}

.fve-theme .container-sidebar-right .card,
.fve-theme .container-sidebar-left .card {
    background: #f7f9f1;
    border: 1px solid var(--fve-rahmen);
    border-radius: 16px;
    margin-bottom: 18px;
    box-shadow: none;
    overflow: hidden;
}

.fve-theme .container-sidebar-right .card-header,
.fve-theme .container-sidebar-left .card-header {
    background: transparent;
    color: var(--fve-navy);
    font-family: "Baloo 2", "Nunito", sans-serif;
    font-size: 16px;
    font-weight: 700;
    border-bottom: 1px solid var(--fve-rahmen);
    border-radius: 16px 16px 0 0;
    padding: 12px 16px;
}

.fve-theme .container-sidebar-right .card-body,
.fve-theme .container-sidebar-left .card-body {
    padding: 12px 16px;
    overflow: hidden;
}

/* Sidebar-Formulare (Login etc.) */
.fve-theme .container-sidebar-right > *,
.fve-theme .container-sidebar-left > * {
    background: #f7f9f1;
    border: 1px solid var(--fve-rahmen);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 18px;
    overflow: hidden;
}

.fve-theme .container-sidebar-right > script,
.fve-theme .container-sidebar-left > script,
.fve-theme .container-sidebar-right > style,
.fve-theme .container-sidebar-left > style {
    display: none;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
}
.fve-theme .container-sidebar-right input[type="text"],
.fve-theme .container-sidebar-right input[type="email"],
.fve-theme .container-sidebar-right input[type="password"],
.fve-theme .container-sidebar-right input[type="search"],
.fve-theme .container-sidebar-right select,
.fve-theme .container-sidebar-left input[type="text"],
.fve-theme .container-sidebar-left input[type="email"],
.fve-theme .container-sidebar-left input[type="password"],
.fve-theme .container-sidebar-left select {
    width: 100%;
    max-width: 100%;
    border-radius: 10px;
    border: 1px solid #d8ded2;
    padding: 7px 12px;
    font-size: 13px;
}

.fve-theme .container-sidebar-right .btn,
.fve-theme .container-sidebar-left .btn {
    border-radius: 10px;
    font-size: 13px;
    padding: 7px 16px;
    background: var(--fve-gruen);
    border: 0;
    color: var(--fve-navy);
    font-weight: 800;
}

.fve-theme .container-sidebar-right a,
.fve-theme .container-sidebar-left a {
    color: var(--fve-navy);
    font-weight: 600;
}

/* ============================================
   FOOTER: Navy, hellgrüne Headings
   ============================================ */
.fve-footer,
.fve-theme .container-footer {
    background: var(--fve-navy);
    color: #b9c6e0;
    max-width: 100%;
    margin: 0;
    padding: 40px 0 0;
    border-top: 0;
}

.fve-footer .grid-child {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.fve-footer h3,
.fve-footer h4,
.fve-theme .container-footer h3,
.fve-theme .container-footer h4 {
    color: var(--fve-gruen);
    font-family: "Baloo 2", "Nunito", sans-serif;
    font-size: .95rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.fve-footer a,
.fve-theme .container-footer a {
    color: #b9c6e0;
    text-decoration: none;
    font-size: .88rem;
}

.fve-footer a:hover,
.fve-theme .container-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.fve-footer .mod-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.fve-footer .mod-menu li {
    display: inline-block;
    width: auto;
}

.fve-footer .mod-menu li a {
    padding: 3px 0;
    display: block;
}

.fve-footer .mod-menu li a::before {
    content: "";
}

/* Footer-Hinweise (Impressum/IBAN) */
.fve-footer .fve-footer-info {
    font-size: .84rem;
    color: #8a9ac0;
    padding-bottom: 20px;
}

/* PayPal-Spenden-Button */
.fve-paypal-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffc439;
    border: 0;
    border-radius: 12px;
    padding: 10px 18px;
    font-family: "Nunito", sans-serif;
    font-size: .9rem;
    font-weight: 800;
    color: #1a1a2e;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
    width: 100%;
    justify-content: center;
}

.fve-paypal-btn:hover {
    background: #f3b52e;
    transform: translateY(-1px);
}

.fve-paypal-icon { font-size: 1.2rem; }

/* ============================================
   COOKIEHINT kompakter + konsistente Farben
   ============================================ */
#redim-cookiehint-bottom {
    background: #fff !important;
    border-top: 3px solid var(--fve-gruen) !important;
    box-shadow: 0 -8px 30px rgba(19,37,75,.15) !important;
    font-family: "Nunito", sans-serif !important;
    padding: 8px 18px !important;
    font-size: .78rem !important;
    color: var(--fve-text) !important;
    z-index: 999 !important;   /* unter Kalender-Toolbar (1001), aber ueber Content */
    max-height: 160px;
    overflow-y: auto;
}

#redim-cookiehint-bottom .cookiehead .headline {
    font-family: "Baloo 2", "Nunito", sans-serif !important;
    color: var(--fve-navy) !important;
    font-size: .95rem !important;
    font-weight: 800 !important;
}

#redim-cookiehint-bottom .cookiecontent p {
    margin: 4px 0 8px !important;
    line-height: 1.45 !important;
}

#redim-cookiehint-bottom .cookiebuttons .btn {
    font-family: "Nunito", sans-serif !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    font-size: .82rem !important;
    padding: 8px 16px !important;
}

#redim-cookiehint-bottom .cookiebuttons #cookiehintsubmit {
    background: var(--fve-navy) !important;
    color: #fff !important;
    border: 0 !important;
}

#redim-cookiehint-bottom .cookiebuttons #cookiehintsubmitno {
    background: #f1f4ea !important;
    color: var(--fve-navy) !important;
    border: 1px solid var(--fve-rahmen) !important;
}

#redim-cookiehint-bottom a {
    color: var(--fve-navy) !important;
}

/* ============================================
   JEVENTS (Kalender) ans Farbschema anpassen
   ============================================ */
.fve-theme .ev_navigation {
    background: #f7f9f1;
    border: 1px solid var(--fve-rahmen);
    border-radius: 14px;
    padding: 10px 14px;
    margin-bottom: 14px;
}

.fve-theme .ev_navigation .button_bar {
    background: transparent;
}

.fve-theme .ev_navigation table td,
.fve-theme .ev_navigation td {
    border: 0;
}

.fve-theme .jevbootstrap .table {
    border: 1px solid var(--fve-rahmen);
    border-radius: 14px;
    overflow: hidden;
}

.fve-theme .jevbootstrap .table th {
    background: var(--fve-navy) !important;
    color: #fff !important;
    border: 0 !important;
    font-weight: 700;
}

.fve-theme .jevbootstrap .table td {
    border-color: var(--fve-rahmen);
}

.fve-theme .jevbootstrap td.today,
.fve-theme .jevbootstrap td .today,
.fve-theme .jevbootstrap .today {
    background: var(--fve-gruen) !important;
    color: var(--fve-navy) !important;
}

.fve-theme .jevbootstrap td a,
.fve-theme .jevbootstrap .table a {
    color: var(--fve-navy);
    font-weight: 600;
}

.fve-theme .jevbootstrap td a:hover {
    color: var(--fve-gruen-schmal);
}

/* Toolbar-Buttons dezenter */
.fve-theme .ev_navigation .btn,
.fve-theme .jevbootstrap .btn {
    border-radius: 10px !important;
    border: 1px solid var(--fve-rahmen) !important;
    background: #fff !important;
    color: var(--fve-navy) !important;
}

/* ============================================
   JEVENTS Monatskalender (klassisches maintable-Layout)
   ============================================ */

/* Monatstabelle als moderne Karte */
.fve-theme table.maintable {
    background: #fff;
    border: 1px solid var(--fve-rahmen);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(19,37,75,.06);
    border-collapse: separate;
    border-spacing: 0;
    position: relative;
    z-index: 1001;   /* über Cookie-Banner (z-index 1000) */
}

/* Toolbar über dem Cookie-Banner klickbar machen */
.fve-theme .ev_navigation {
    position: relative;
    z-index: 1001;
}

/* Kopfzeile („Monatsansicht" + Datum) */
.fve-theme table.maintable td.tableh1 {
    background: var(--fve-navy) !important;
    padding: 14px 18px !important;
}

.fve-theme table.maintable td.tableh1 h2,
.fve-theme table.maintable td.tableh1 .gsl-h2 {
    color: #fff !important;
    font-family: "Baloo 2", "Nunito", sans-serif;
    font-size: 1.35rem;
    margin: 0;
}

.fve-theme table.maintable td.tableh1 td.today,
.fve-theme table.maintable td.tableh1 .today {
    color: var(--fve-gruen) !important;
    background: transparent !important;
    font-weight: 700;
    font-size: .9rem;
}

/* Monatsnavigation: Vormonat / aktueller Monat / Folgemonat */
.fve-theme table.maintable td.previousmonth,
.fve-theme table.maintable td.nextmonth {
    background: #f2f6ea !important;
    padding: 6px 10px !important;
}

.fve-theme table.maintable td.previousmonth a,
.fve-theme table.maintable td.nextmonth a {
    color: var(--fve-navy) !important;
    font-weight: 700;
    text-decoration: none;
    font-size: .88rem;
}

.fve-theme table.maintable td.previousmonth a:hover,
.fve-theme table.maintable td.nextmonth a:hover {
    color: var(--fve-gruen-schmal) !important;
}

.fve-theme table.maintable td.currentmonth {
    background: var(--fve-gruen) !important;  /* überschreibt Inline-Style */
    color: var(--fve-navy) !important;
    font-weight: 800;
    font-size: .9rem;
}

/* Monats-Pfeile: GIF-Icons ausblenden, CSS-Pfeile davor */
.fve-theme table.maintable td.previousmonth img,
.fve-theme table.maintable td.nextmonth img {
    display: none;
}

.fve-theme table.maintable td.previousmonth a::before {
    content: "◀ ";
    color: var(--fve-navy);
}

.fve-theme table.maintable td.nextmonth a::after {
    content: " ▶";
    color: var(--fve-navy);
}

/* Wochentage (Mo–So) */
.fve-theme table.maintable td.weekdaytopclr {
    background: var(--fve-gruen) !important;
    color: var(--fve-navy) !important;
    font-weight: 800;
    font-size: .8rem;
    padding: 8px 4px !important;
    border-bottom: 2px solid #fff;
}

/* Tageszellen */
.fve-theme table.maintable td.weekdayclr,
.fve-theme table.maintable td.weekdayemptyclr,
.fve-theme table.maintable td.sundayemptyclr,
.fve-theme table.maintable td.sundayclr,
.fve-theme table.maintable td.todayclr {
    background: #fff;
    border: 1px solid #f0f3e8;
    padding: 4px !important;
    vertical-align: top;
}

.fve-theme table.maintable td.weekdayemptyclr,
.fve-theme table.maintable td.sundayemptyclr {
    background: #fafbf6;
    color: #b8c0ae;
}

/* Tageszahlen */
.fve-theme table.maintable td.caldaydigits {
    padding: 2px 4px;
}

.fve-theme table.maintable td.caldaydigits a {
    color: var(--fve-navy) !important;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    display: inline-block;
    min-width: 26px;
    text-align: center;
    border-radius: 50%;
    padding: 2px 0;
}

.fve-theme table.maintable td.caldaydigits a:hover {
    background: var(--fve-gruen);
    color: var(--fve-navy) !important;
}

/* Heutiger Tag hervorheben */
.fve-theme table.maintable td.todayclr {
    background: var(--fve-gruen) !important;
}

.fve-theme table.maintable td.todayclr td.caldaydigits a {
    background: var(--fve-navy);
    color: #fff !important;
}

/* Event-Links in Tageszellen */
.fve-theme table.maintable td.weekdayclr a,
.fve-theme table.maintable td.todayclr a {
    color: var(--fve-navy);
    font-weight: 600;
}

.fve-theme table.maintable td.weekdayclr a:hover,
.fve-theme table.maintable td.todayclr a:hover {
    color: var(--fve-gruen-schmal);
}

/* Toolbar (ev_navigation): Retro-Icons ausblenden, Text-Buttons modern */
/* Wochentags-Kopfzeile: Desktop = volle Namen, Kürzel ausgeblendet */
.fve-theme table.maintable td.weekdaytopclr .jev-wd-short {
    display: none;
}
.fve-theme table.maintable td.weekdaytopclr .jev-wd-long {
    display: inline;
}
.fve-theme .ev_navigation {
    z-index: 1 !important; /* JEvents setzt 1001 -> Toolbar läge über dem sticky Menü (z-60) */
}
/* Monatsraster: JEvents setzt z-index 1001 -> auch über dem sticky Menü -> senken */
.fve-theme table.maintable {
    z-index: 1 !important;
    position: relative;
}
/* Drucken-Icon der Toolbar (z-999) ebenfalls unter dem Menü halten */
.fve-theme ul.actions {
    z-index: 1 !important;
}
.fve-theme .ev_navigation img {
    display: none;
}

.fve-theme #jevents_body .ev_navigation a.buttontext,
.fve-theme .ev_navigation a.buttontext {
    color: var(--fve-navy) !important;
    font-weight: 700;
    font-size: .85rem !important;
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    margin: 3px 4px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--fve-navy);
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(19,37,75,.08);
}

.fve-theme .ev_navigation a.buttontext:hover {
    background: var(--fve-gruen);
    color: var(--fve-navy) !important;
}

/* Drucker-/Standard-Icons in der Toolbar ausblenden */
.fve-theme .ev_navigation .print,
.fve-theme .ev_navigation a[title*="ruck"],
.fve-theme .ev_navigation a[title*="rint"],
.fve-theme .ev_navigation a[title*="rint"],
.fve-theme .ev_navigation a img[alt*="rint"],
.fve-theme .ev_navigation a img[alt*="rint"],
.fve-theme .ev_navigation a img[alt*="ruck"],
.fve-theme .ev_navigation a img[alt="Print"],
.fve-theme .ev_navigation a img[alt="Drucken"],
.fve-theme .ev_navigation a:has(> img[alt*="rint"]),
.fve-theme .ev_navigation a:has(> img[alt*="ruck"]) {
    display: none;
}

/* ============================================
   JEVENTS MINI-KALENDER (Sidebar-Modul)
   ============================================ */
/* Äußere Tabelle: Inline-Style (grauer Rahmen) überschreiben */
.fve-theme #extcal_minical > table {
    border: 1px solid var(--fve-navy) !important;
    background-color: #fff !important;
    border-radius: 16px !important;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 4px;
}

/* Navigationszeile: Navy-Band, Monatsname weiß+fett */
.fve-theme #extcal_minical .extcal_navbar {
    background: var(--fve-navy);
    border-radius: 12px;
    margin-bottom: 2px;
}

.fve-theme #extcal_minical .extcal_navbar td {
    color: #fff;
}

.fve-theme #extcal_minical .extcal_month_label,
.fve-theme #extcal_minical .extcal_month_label a {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none;
}

/* GIF-Pfeile ausblenden, CSS-Pfeile als Ersatz */
.fve-theme #extcal_minical .extcal_navbar img.mod_events_link {
    display: none;
}

.fve-theme #extcal_minical .extcal_navbar td:first-child::before {
    content: "‹";
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    cursor: pointer;
}

.fve-theme #extcal_minical .extcal_navbar td:last-child::before {
    content: "›";
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    cursor: pointer;
}

/* Wochentage: Hellgrün-Band */
.fve-theme #extcal_minical .extcal_weekdays {
    margin-bottom: 2px;
}

.fve-theme #extcal_minical td.extcal_weekdays {
    background: var(--fve-gruen);
    color: var(--fve-navy);
    font-weight: 700;
    font-size: 12px;
    border-radius: 8px;
    padding: 4px 2px;
}

/* KW-Spalte dezent */
.fve-theme #extcal_minical td.extcal_weekcell {
    width: 14px;
    padding: 0;
}

.fve-theme #extcal_minical td.extcal_weekcell img {
    display: none;
}

/* Tageszellen: abgerundet, Navy-Ziffern */
.fve-theme #extcal_minical td.extcal_daycell,
.fve-theme #extcal_minical td.extcal_sundaycell {
    background: #fff;
    border: 1px solid var(--fve-rahmen) !important;
    border-radius: 8px;
    padding: 4px 2px;
    min-height: 30px;
}

/* JEvents setzt alle Zellen-TDs auf 9px — auf lesbare Größe anheben */
.fve-theme #extcal_minical td.extcal_daycell,
.fve-theme #extcal_minical td.extcal_todaycell,
.fve-theme #extcal_minical td.extcal_sundaycell,
.fve-theme #extcal_minical td.extcal_othermonth {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* JEvents-Eigenregel (9px!) überschreiben — ID-Selektor schlägt Klasse */
.fve-theme #extcal_minical .extcal_daylink,
.fve-theme #extcal_minical .extcal_sundaylink,
.fve-theme #extcal_minical .extcal_busylink {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: var(--fve-navy) !important;
    font-weight: 600;
    text-decoration: none;
    display: block;
}

.fve-theme #extcal_minical td.extcal_daycell a,
.fve-theme #extcal_minical td.extcal_sundaycell a {
    color: var(--fve-navy);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    display: block;
}

.fve-theme #extcal_minical td.extcal_daycell a:hover,
.fve-theme #extcal_minical td.extcal_sundaycell a:hover {
    color: var(--fve-gruen-schmal);
}

/* Andere Monate: ausgegraut */
.fve-theme #extcal_minical td.extcal_othermonth {
    background: #f5f6f2;
    border-radius: 8px;
    color: #c0c5b8;
}

.fve-theme #extcal_minical td.extcal_othermonth a {
    color: #c0c5b8;
    text-decoration: none;
}

/* Heutiger Tag: Hellgrün statt Standard-Orange */
.fve-theme #extcal_minical td.extcal_todaycell {
    background: var(--fve-gruen) !important;
    border: 2px solid var(--fve-navy) !important;
    border-radius: 8px;
}

.fve-theme #extcal_minical td.extcal_todaycell a {
    color: var(--fve-navy) !important;
    font-weight: 800 !important;
}

/* ============================================
   SUCHE IN DER MENÜLEISTE (mod_virtuemart_search)
   ============================================ */
.fve-theme .fve-nav-row form[action*="virtuemart"],
.fve-theme .fve-nav-row form .search {
    margin: 0 4px 0 auto;
    display: flex;
    align-items: center;
}

.fve-theme .fve-nav-row #mod_virtuemart_search {
    background: #fff;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: .85rem;
    color: var(--fve-navy);
    width: 160px;
    outline: none;
    transition: box-shadow .2s ease, width .2s ease;
}

.fve-theme .fve-nav-row #mod_virtuemart_search::placeholder {
    color: #8a94a6;
}

.fve-theme .fve-nav-row #mod_virtuemart_search:focus {
    box-shadow: 0 0 0 3px rgba(199,229,112,.45);
    width: 230px;
}

/* ============================================
   JOOMGALLERY DETAILANSICHT: nur großes Bild
   (Metadaten per Config deaktiviert; leeres
   "Bildinformationen"-h3 + Feldblock ausblenden)
   ============================================ */
.fve-theme .item_fields {
    display: none !important;
}

.fve-theme .joom-image img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(19,37,75,.12);
}

.fve-theme a.jg-link.btn {
    border-radius: 999px;
    border-color: var(--fve-navy);
    color: var(--fve-navy);
    font-weight: 700;
    padding: 8px 18px;
    margin-bottom: 8px;
}

.fve-theme a.jg-link.btn:hover {
    background: var(--fve-gruen);
    color: var(--fve-navy);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 991.98px) {
    /* Burger sichtbar, Menü standardmäßig zugeklappt */
    .fve-burger { display: flex; }

    /* Header über dem Cookie-Banner (z-index-Hierarchie) */
    .fve-theme .container-header {
        position: relative;
        z-index: 1002;
    }

    .fve-theme .site-grid {
        flex-direction: column;
    }
    .fve-theme .container-sidebar-right {
        flex: 1 1 auto;
        max-width: none;
    }
    .fve-header-row {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
    }
    .fve-brand .fve-logo {
        max-height: 50px;
    }
    .fve-theme .fve-nav-row {
        padding: 0 16px;
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .fve-theme .fve-nav-row.fve-nav-open {
        display: flex;
        position: relative;
        z-index: 1001;
        background: var(--fve-navy);
        margin: 0;
        max-width: 100%;
        box-shadow: 0 12px 30px rgba(19,37,75,.3);
    }
    .fve-mobile-actions {
        display: flex;
        gap: 10px;
        width: 100%;
        padding: 10px 0 4px;
    }
    .fve-mobile-actions .btn {
        flex: 1;
        justify-content: center;
        text-align: center;
        font-size: .85rem !important;
        padding: 10px 12px !important;
    }
    .fve-theme .fve-nav-row .mod-menu {
        flex-direction: column;
        width: 100%;
        align-items: stretch;
    }
    /* Mobile: Suche volle Breite, linksbündig */
    .fve-theme .fve-nav-row form[action*="virtuemart"],
    .fve-theme .fve-nav-row form .search {
        margin: 12px 0 4px;
        width: 100%;
    }
    .fve-theme .fve-nav-row #mod_virtuemart_search {
        width: 100%;
        max-width: none;
    }
    .fve-theme .fve-nav-row #mod_virtuemart_search:focus {
        width: 100%;
    }
    .fve-theme .fve-nav-row .mod-menu > li > a {
        width: 100%;
        border-radius: 8px;
        padding: 13px 12px;
    }
    .fve-theme .fve-nav-row .mod-menu > li.current > a,
    .fve-theme .fve-nav-row .mod-menu > li.active > a {
        border-radius: 8px;
    }
    .fve-hero-inner {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .fve-hero-text {
        text-align: center;
        padding: 0 4px;
    }
    .fve-hero-ctas {
        justify-content: center;
    }
    /* Blobs auf Mobile: kompakte Pillen-Badges untereinander — keine Überlappung möglich */
    .fve-hero-blobs {
        min-height: 0;
        height: auto;
        margin: 12px 0 20px;
        transform: none;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0;
    }
    .fve-hero-blobs .blob {
        position: static;
        width: auto;
        height: auto;
        min-width: 190px;
        max-width: 100%;
        margin: 0;
        padding: 8px 18px;
        font-size: .8rem;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 999px;
        text-align: center;
    }
    .fve-hero-blobs .blob .emoji {
        font-size: 1.1rem;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .fve-hero-blobs .blob-1,
    .fve-hero-blobs .blob-2,
    .fve-hero-blobs .blob-3 {
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;
        width: auto;
        height: auto;
    }
    .fve-hero-blobs .blob-1 { background: var(--fve-gruen); }
    .fve-hero-blobs .blob-2 { background: var(--fve-gelb); }
    .fve-hero-blobs .blob-3 { background: var(--fve-blau); }
    .fve-info-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .fve-theme .fve-nav-row .mod-menu li.parent > .mod-menu__sub,
    .fve-theme .fve-nav-row .mod-menu li.parent > ul.nav-child {
        position: static;
        display: none;
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 4px 14px rgba(19,37,75,.25);
        min-width: 0;
        padding: 6px;
        margin: 4px 8px 8px 18px;
    }
    /* Hover aus Mobile aus — nur Tap-Toggle über .fve-open */
    .fve-theme .fve-nav-row .mod-menu li.parent:hover > .mod-menu__sub,
    .fve-theme .fve-nav-row .mod-menu li.parent:hover > ul.nav-child {
        display: none;
    }
    .fve-theme .fve-nav-row .mod-menu li.parent.fve-open > .mod-menu__sub,
    .fve-theme .fve-nav-row .mod-menu li.parent.fve-open > ul.nav-child {
        display: block;
    }
    .fve-theme .fve-nav-row .mod-menu li.parent.fve-open > a::after {
        transform: rotate(180deg);
        opacity: 1;
    }
    .fve-theme .fve-nav-row .mod-menu .mod-menu__sub li a,
    .fve-theme .fve-nav-row .mod-menu ul.nav-child li a {
        color: var(--fve-navy) !important;
        font-weight: 700 !important;
        font-size: .86rem;
        padding: 10px 12px;
        text-align: left;
        background: transparent !important;
        border-radius: 8px;
    }
    .fve-theme .fve-nav-row .mod-menu .mod-menu__sub li a:link,
    .fve-theme .fve-nav-row .mod-menu .mod-menu__sub li a:visited,
    .fve-theme .fve-nav-row .mod-menu ul.nav-child li a:link,
    .fve-theme .fve-nav-row .mod-menu ul.nav-child li a:visited {
        color: var(--fve-navy) !important;
    }
    .fve-theme .fve-nav-row .mod-menu .mod-menu__sub li a:hover,
    .fve-theme .fve-nav-row .mod-menu ul.nav-child li a:hover {
        background: var(--fve-gruen) !important;
        color: var(--fve-navy) !important;
    }
    /* Header-Actions kompakter */
    .fve-header-actions .btn {
        padding: 8px 14px !important;
        font-size: .84rem !important;
    }
}

@media (max-width: 575.98px) {
    /* Mobile: Header-Buttons ins Menü verlagert, nur Logo + Burger bleiben */
    .fve-header-actions .btn {
        display: none;
    }
    .fve-header-actions .btn {
        padding: 7px 12px !important;
        font-size: .78rem !important;
    }
    .fve-header-actions .btn:last-of-type {
        max-width: 130px;
        overflow: hidden;
        white-space: nowrap;
    }
    .fve-brand .fve-logo {
        max-height: 38px;
    }
    .fve-header-row {
        padding: 10px 14px;
        gap: 8px;
    }
    .fve-info-strip {
        grid-template-columns: 1fr;
    }
    .fve-theme .site-grid {
        padding: 12px;
    }
    .fve-hero {
        padding: 28px 16px 40px;
    }
    .fve-hero h1 {
        font-size: 1.6rem;
    }
    .fve-hero-blobs {
        margin: 10px 0 16px;
        gap: 6px;
        transform: none;
    }
    .fve-hero-blobs .blob,
    .fve-hero-blobs .blob-1,
    .fve-hero-blobs .blob-2,
    .fve-hero-blobs .blob-3 {
        width: auto;
        height: auto;
        min-width: 0;
        padding: 7px 14px;
        font-size: .76rem;
    }
    .fve-header-actions {
        gap: 6px;
    }
    /* ===== Mobile-Responsive-Härtung: keine horizontalen Überläufe ===== */
    body {
        overflow-x: hidden;
    }
    .fve-theme .site-grid {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden;
    }
    .fve-theme .container-component,
    .fve-theme .container-sidebar-right {
        min-width: 0 !important;
        max-width: 100%;
    }
    /* JEvents-Tabellen: Toolbar + Monatsraster kompakt (sonst erzwingen
       nowrap-Zellen min-content ~587px und blähen das Grid auf) */
    .fve-theme .jevbootstrap,
    .fve-theme .jev_pretoolbar {
        max-width: 100%;
        overflow-x: auto;
    }
    .fve-theme table.ev_navigation {
        table-layout: fixed;
        width: 100% !important;
    }
    .fve-theme table.ev_navigation td {
        white-space: normal !important;
        padding: 4px 2px !important;
    }
    .fve-theme table.ev_navigation a.buttontext {
        display: inline-block;
        padding: 5px 8px;
        font-size: .75rem !important;
    }
    .fve-theme table.ev_navigation img {
        display: none !important;
    }
    .fve-theme table.maintable {
        table-layout: fixed;
        width: 100% !important;
    }
    .fve-theme table.maintable td {
        padding: 2px 1px !important;
        overflow: hidden;
    }
    /* Wochentags-Kopfzeile: volle Namen in 36px-Zellen -> Schrift verkleinern */
    .fve-theme table.maintable td.weekdaytopclr {
        font-size: 8.5px !important;
        padding: 6px 1px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
        line-height: 1.2;
    }
    .fve-theme table.maintable td.weekdaytopclr span {
        font-size: inherit;
    }
    /* Mobile: Kürzel (Mo, Di, Mi...) statt voller Namen */
    .fve-theme table.maintable td.weekdaytopclr .jev-wd-long {
        display: none;
    }
    .fve-theme table.maintable td.weekdaytopclr .jev-wd-short {
        display: inline;
        font-weight: 700;
    }
    /* Monatsnavi (Juli / Datum / September) kompakt */
    .fve-theme table.maintable td.previousmonth,
    .fve-theme table.maintable td.currentmonth,
    .fve-theme table.maintable td.nextmonth {
        font-size: .72rem !important;
        padding: 3px 2px !important;
        white-space: nowrap;
        overflow: hidden;
    }
    .fve-theme table.maintable td.caldaydigits a {
        min-width: 20px;
        font-size: .8rem;
        padding: 1px 0;
    }
    .fve-theme table.maintable td.todayclr td.caldaydigits a {
        min-width: 20px;
    }
    .fve-theme .mod_events_latest_table {
        max-width: 100%;
    }
    .fve-theme .mod_events_latest_table td {
        word-wrap: break-word;
    }
    .fve-theme .container-sidebar-right form,
    .fve-theme .container-sidebar-right table,
    .fve-theme .container-sidebar-right div {
        max-width: 100%;
    }
    .fve-theme .plg_system_webauthn_login,
    .fve-theme button.btn-secondary {
        width: 100%;
        max-width: 100%;
    }
}

/* ===== Galerie: Bilder füllen Kacheln komplett ===== */
.fve-theme .jg-gallery img.jg-image-thumb {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    transform: none !important;
    top: 0 !important;
    left: 0 !important;
}
/* Galerie: engere Kacheln, 2 Spalten auf Tablet/Mobile */
@media (max-width: 991.98px) {
    .fve-theme .jg-images[class*="columns-"],
    .fve-theme .jg-images[class*="masonry-"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}
@media (max-width: 575.98px) {
    .fve-theme .jg-images[class*="columns-"],
    .fve-theme .jg-images[class*="masonry-"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}