#jcl_component .btn-primary:hover,
#jcl_component .btn-primary:focus,
#jcl_component .btn-primary:active,
#jcl_component .btn-primary.active,
#jcl_component .btn-primary.disabled,
#jcl_component .btn-primary[disabled] {
    background-color: rgb(55, 237, 25);
    color: rgb(0, 0, 0);
}

#jcl_component .btn-primary {
    color: #fff;
    background-color: rgb(29, 175, 5);
}


/* TEXT FARBWECHSEL GRÜN */
@keyframes colorTransition {
    0% {
        color: #00C50C;
    }

    50% {
        color: rgb(7, 145, 41);
    }

    100% {
        color: #00C50C;
    }
}

.text-transition-green {
    animation: colorTransition 2s infinite;
    /* Sekunden für den Übergang, wiederholt sich unendlich */
}

/* TEXT FARBWECHSEL ORANGE */
@keyframes colorTransitionOrange {
    0% {
        color: #ff7b00;
    }

    50% {
        color: rgb(145, 145, 145);
    }

    100% {
        color: #ff7b00;
    }
}

.text-transition-orange {
    animation: colorTransitionOrange 2s infinite;
    /* Sekunden für den Übergang, wiederholt sich unendlich */
}

/* CURSOR BLINKEND DUNKELGRÜN TRADITION*/
.blinking-cursor {
    display: inline-block;
    /* Damit es wie ein Text wirkt */
    width: 8px;
    /* Breite des Cursors */
    height: 14px;
    /* Höhe des Cursors */
    background-color: #003300;
    /* Farbe des Cursors */
    animation: blink 0.8s step-start infinite;
    /* Animation für das Blinken */
}

@keyframes blink {
    50% {
        opacity: 0%;
        /* Cursor wird unsichtbar */
    }
}

/* CURSOR BLINKEND GRÜN */
.blinking-cursor-green {
    display: inline-block;
    /* Damit es wie ein Text wirkt */
    width: 9px;
    /* Breite des Cursors */
    height: 9px;
    /* Höhe des Cursors */
    background-color: #04B404;
    /* Farbe des Cursors */
    animation: blink 5s step-start infinite;
    /* Animation für das Blinken */
}

@keyframes blink-green {
    50% {
        opacity: 0%;
        /* Cursor wird unsichtbar */
    }
}

/* SLOGAN VEREIN VERBINDET */
.footer-slogan {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 0;
    /* Optional: Abstand oben und unten */
}

.line {
    flex-grow: 1;
    /* Die Linie soll den verfügbaren Platz einnehmen */
    height: 2px;
    /* Dicke der Linie */
    background-color: #04B404;
    /* Farbe der Linie */
    margin: 0 10px;
    /* Abstand zwischen Linie und Text */
}

.text {
    white-space: nowrap;
    /* Verhindert Zeilenumbrüche */
}

/* BILD OVERLAY MIT TEXT */
.image-container {
    position: relative;
    /* Positionierung für das überlagernde Element */
    display: inline-block;
    /* Damit die Größe des Containers dem Bild entspricht */
}

.image-container img {
    width: 100%;
    /* Bild auf volle Breite skalieren */
    height: auto;
    /* Höhenverhältnis beibehalten */
}

.overlay-text {
    position: absolute;
    /* Positionierung über dem Bild */
    bottom: 10px;
    /* Abstand vom unteren Rand */
    left: 10px;
    /* Abstand vom linken Rand */
    color: white;
    /* Textfarbe */
    font-size: 12px;
    /* Schriftgröße */
    background-color: rgba(0, 0, 0, 0.3);
    /* Hintergrundfarbe mit Transparenz */
    padding: 0px;
    /* Abstand innerhalb des Textcontainers */
    border-radius: 3px;
    /* Abgerundete Ecken (optional) */
    opacity: 0.6;
    /* Weitere Transparenz für den Text */
}


/* ABSCHNITT/ MODUL - HINTERGRUND */
.bg-darkgrey {
    background-color: #929191;
    /* Hellgrau */
}



/* ARTIKEL RAHMEN */
.bordered-article {
    border: 2px solid rgb(1, 128, 18) !important;
    /* Rahmen in schwarz */
    padding: 10px;
    /* Abstand für Inhalte innerhalb des Rahmens */
    border-radius: 5px;
    /* Abgerundete Ecken */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    /* Optional: leichter Schatten */
}

/* #############################
   ARTIKEL BOX GRÜN
################################*/

.bg-article-green {

    background: linear-gradient(to bottom,
            rgba(237, 246, 239, 0.678) 0%,
            rgba(226, 242, 230, 0.567) 45%,
            rgba(200, 234, 207, 0.552) 100%);

    border: 1px solid;
    border-image: linear-gradient(to bottom,
            rgba(35, 193, 71, 0.22),
            rgba(35, 193, 71, 0.39),
            rgba(35, 193, 71, 0.24)) 1;

    padding: 0.6rem;

    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.12),
        inset 0 -1px 2px rgba(255, 255, 255, 0.15);
}




/* SCHRIFT MIT VERLAUF */
.gradient-text-green-black {
    font-size: 30px;
    font-weight: 400;
    background: linear-gradient(to bottom, #049816, darkgreen);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* SCHRIFT H1 MIT VERLAUF */
H1 {
    font-size: 30px;
    font-weight: 400;
    background: linear-gradient(to bottom, #049816, darkgreen);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* SCHRIFT H2 MIT Schatten */
H2 {
    letter-spacing: 0.00em;
    font-weight: 500;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4),
        0 2px 3px rgba(0, 0, 0, 0.15);
}

/* SCHRIFT H7 MIT VERLAUF */
H7 {
    font-size: 35px;
    font-weight: 200;
    background: linear-gradient(to bottom, #ffffff, rgb(183, 252, 183));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* SCHRIFT H7 MIT VERLAUF */
H8 {
    font-size: 25px;
    font-weight: 200;
    background: linear-gradient(to bottom, #ffffff, rgb(186, 255, 186));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

/* SCHRIFT H7 MIT VERLAUF */
H9 {
    font-size: 35px;
    font-weight: 200;
    background: linear-gradient(to bottom, #f6f8f6, rgb(186, 189, 186));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* SCHRIFT H7 MIT VERLAUF */
H10 {
    font-size: 25px;
    font-weight: 200;
    background: linear-gradient(to bottom, #f6f8f6, rgb(186, 189, 186));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* BOX - ABSCHNITT MIT VERLAUF */
.bg-light {
    background: linear-gradient(to bottom, white, #F2F2F2);
    border: 1px solid #FAFAFA;
    /* Heller gelber Rand */
    border-radius: 0.5rem;
    /* Abrundung der Ecken */
    padding: 1rem;
    /* Innenabstand */
}

.bg-flash-red {
    background: linear-gradient(to bottom,
            rgba(220, 80, 80, 0.10) 0%,
            rgba(200, 40, 40, 0.06) 45%,
            rgba(180, 30, 30, 0.14) 100%);

    border: 1px solid;
    border-image: linear-gradient(to bottom,
            rgba(200, 40, 40, 0.145),
            rgba(170, 20, 20, 0.274),
            rgba(200, 40, 40, 0.134)) 1;

    border-radius: 0;
    padding: 0.8rem;

    /* 🔽 Eingelassener Effekt */
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.12),
        /* oberer Innenschatten */
        inset 0 -1px 2px rgba(255, 255, 255, 0.15);
    /* untere Lichtkante */
}

.bg-flash-green {
    background: linear-gradient(to bottom,
            rgba(153, 210, 166, 0.10) 0%,
            rgba(35, 193, 71, 0.06) 45%,
            rgba(35, 193, 71, 0.14) 100%);

    border: 1px solid;
    border-image: linear-gradient(to bottom,
            rgba(35, 193, 71, 0.18),
            rgba(35, 193, 71, 0.35),
            rgba(35, 193, 71, 0.20)) 1;

    border-radius: 0;
    padding: 0.8rem;

    /* 🔽 Eingelassener Effekt */
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.12),
        /* oberer Innenschatten */
        inset 0 -1px 2px rgba(255, 255, 255, 0.15);
    /* untere Lichtkante */
}

.bg-flash-yellow {
    background: linear-gradient(to bottom,
            rgba(255, 245, 170, 0.16) 0%,
            rgba(255, 235, 100, 0.08) 45%,
            rgba(255, 230, 80, 0.18) 100%);

    border: 1px solid;
    border-image: linear-gradient(to bottom,
            rgba(255, 225, 0, 0.347),
            rgba(255, 217, 0, 0.594),
            rgba(255, 225, 0, 0.391)) 1;

    border-radius: 0;
    padding: 0.8rem;

    /* 🔽 Eingelassener Effekt */
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.12),
        /* oberer Innenschatten */
        inset 0 -1px 2px rgba(255, 255, 255, 0.15);
    /* untere Lichtkante */
}

.bg-block-vorstand {
    background: linear-gradient(to bottom,
            rgba(153, 210, 166, 0.10) 0%,
            rgba(35, 193, 71, 0.06) 45%,
            rgba(35, 193, 71, 0.14) 100%);

    border: 1px solid;
    border-image: linear-gradient(to bottom,
            rgba(35, 193, 71, 0.18),
            rgba(35, 193, 71, 0.35),
            rgba(35, 193, 71, 0.20)) 1;

    border-radius: 0;
    padding: 1.2rem 0.8rem;

    /* 🔽 Eingelassener Effekt */
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.12),
        /* oberer Innenschatten */
        inset 0 -1px 2px rgba(255, 255, 255, 0.15);
    /* untere Lichtkante */
}

.bg-block-grey {
    background: linear-gradient(to bottom, #f3f3f34e, #e3e4e349);
    border: 1px solid rgb(212, 214, 212);
    /* Heller grüner Rand */
    border-radius: 0.5rem;
    /* Abrundung der Ecken */
    padding: 0.3rem;
    /* Innenabstand */
}

/* === GRÜNER STANDARD-BUTTON (dezenter Verlauf) === */
.btn.btn-primary.btn-sm,
.btn.btn-primary {
    background: linear-gradient(135deg,
            #3fd35e 0%,
            #32c955 40%,
            #23C147 70%,
            #1fb240 100%);
    color: #ffffff !important;
    border: 1px solid #23C147 !important;
    border-radius: 6px;
    font-size: 11pt;
    font-weight: 200;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    padding: 5px 10px;
    transition: all 0.2s ease-in-out;
}

/* === HOVER-EFFEKT (leicht heller + mehr Tiefe) === */
.btn.btn-primary.btn-sm:hover,
.btn.btn-primary:hover {
    background: linear-gradient(135deg,
            #4dde6a 0%,
            #3bd65e 40%,
            #2ad251 70%,
            #23C147 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
    color: #ffffff !important;
}

/* === ORANGER STANDARD-BUTTON (dezenter Verlauf) === */
.btn.btn-primary-orange.btn-sm,
.btn.btn-primary-orange {
    background: linear-gradient(135deg,
            #ecd13b 0%,
            #efd125 40%,
            #e9c00e 70%,
            #e3ba00 100%);
    color: #000000 !important;
    border: 1px solid #d5a410 !important;
    border-radius: 6px;
    font-size: 11pt;
    font-weight: 200;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    padding: 5px 10px;
    transition: all 0.2s ease-in-out;
}

/* === HOVER-EFFEKT (leicht heller + mehr Tiefe) === */
.btn.btn-primary-orange.btn-sm:hover,
.btn.btn-primary-orange:hover {
    background: linear-gradient(135deg,
            #ecd13b 0%,
            #efd125 40%,
            #e9c00e 70%,
            #e3ba00 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
    color: #000000 !important;
}

/* === DISABLED-ZUSTAND (grau, inaktiv, durchgestrichen) === */
.btn.btn-primary.btn-sm.disabled,
.btn.btn-primary.btn-sm:disabled,
.btn.btn-primary.btn-sm.disabled-link {
    background: linear-gradient(135deg,
            #e0e0e0 0%,
            #cfcfcf 50%,
            #bfbfbf 100%) !important;
    /* Heller bis mittlerer Grauton */
    color: #666666 !important;
    border: 1px solid #bfbfbf !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 0.85 !important;
    transform: none !important;
    pointer-events: none !important;
    text-decoration: line-through !important;
    /* Text durchgestrichen */
}

/* Falls der Text im Inneren in einem <span> oder <b> steht */
.btn.btn-primary.btn-sm.disabled span,
.btn.btn-primary.btn-sm.disabled b,
.btn.btn-primary.btn-sm:disabled span,
.btn.btn-primary.btn-sm:disabled b,
.btn.btn-primary.btn-sm.disabled-link span,
.btn.btn-primary.btn-sm.disabled-link b {
    text-decoration: line-through !important;
    color: #666666 !important;
}

/* 3D Text-Schattierung  */
.headline-main {
    text-shadow: 2px 5px 3px rgba(0, 0, 0, 0.3);

}

/* =====================================================
   SV-KBW GLOBAL FORM STYLE
   Mehr Kontrast für alle Eingabefelder
   ===================================================== */

/* Standard Inputs – ohne Buttons */
input:not([type="submit"]):not([type="button"]):not([type="reset"]),
textarea,
.form-control,
.uk-input,
.uk-textarea {
    background: linear-gradient(to bottom,
            #eef7f0 0%,
            #e5f1e7c7 60%,
            #e1efe4d4 100%) !important;

    color: #222 !important;
    border: 1px solid #cfcfcf !important;
    border-radius: 4px !important;
    padding: 8px 10px !important;
    transition: all 0.2s ease !important;
}

/* Select / Dropdown */
select,
.form-select,
.uk-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    background: linear-gradient(to bottom,
            #eef7f0 0%,
            #e5f1e7c7 60%,
            #e1efe4d4 100%) !important;
    background-color: #e5f1e7 !important;

    color: #222 !important;
    border: 1px solid #cfcfcf !important;
    border-radius: 4px !important;
    padding: 8px 36px 8px 10px !important;
    transition: all 0.2s ease !important;
}

/* Hover */
/* Hover */
input:not([type="submit"]):not([type="button"]):not([type="reset"]):hover,
select:hover,
textarea:hover,
.form-control:hover,
.uk-input:hover,
.uk-select:hover,
.uk-textarea:hover {
    background: #ffffff !important;
}

/* Focus */
input:focus,
textarea:focus,
.form-control:focus,
.uk-input:focus,
.uk-textarea:focus {
    background: #ffffff !important;
    border-color: #1f6f3d !important;
    box-shadow: 0 0 0 3px rgba(31, 111, 61, 0.15) !important;
    outline: none !important;
}

select:focus,
.form-select:focus,
.uk-select:focus {
    background: linear-gradient(to bottom,
            #ffffff 0%,
            #f7fbf8 100%) !important;
    background-color: #ffffff !important;
    border-color: #1f6f3d !important;
    box-shadow: 0 0 0 3px rgba(31, 111, 61, 0.15) !important;
    outline: none !important;
}

/* Placeholder */
input::placeholder,
textarea::placeholder {
    color: #777 !important;
}

/* Disabled */
input:disabled,
select:disabled,
textarea:disabled,
.form-select:disabled,
.uk-select:disabled {
    background: #e0e0e0 !important;
    color: #888 !important;
}


/* =====================================================
   Events Booking – Buttons überall wie Standard-Button
   (Kalender + Kategorienliste + Detailansicht)
   ===================================================== */

body.com-eventbooking .eb-taskbar .btn,
body.com-eventbooking .eb-save-to-calendar-buttons .btn,
body.com-eventbooking .eb-taskbar a.btn,
body.com-eventbooking .eb-save-to-calendar-buttons a.btn,

/* Fallback, falls irgendwo underscore auftaucht */
body.com_eventbooking .eb-taskbar .btn,
body.com_eventbooking .eb-save-to-calendar-buttons .btn,
body.com_eventbooking .eb-taskbar a.btn,
body.com_eventbooking .eb-save-to-calendar-buttons a.btn,

/* zusätzlicher Fallback */
#eb-event-page .eb-taskbar .btn,
#eb-event-page .eb-save-to-calendar-buttons .btn {
    font-size: 11pt !important;
    font-weight: 200 !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    min-height: 34px !important;

    opacity: 1 !important;
    visibility: visible !important;

    background-color: #23C147 !important;
    background-image: linear-gradient(135deg,
            #3fd35e 0%,
            #32c955 40%,
            #23C147 70%,
            #1fb240 100%) !important;

    color: #ffffff !important;
    border: 1px solid #23C147 !important;

    box-shadow: 0 1px 3px rgba(0, 0, 0, .15) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .15) !important;
    transition: all .2s ease-in-out !important;
    text-decoration: none !important;
}

body.com-eventbooking .eb-taskbar .btn:hover,
body.com-eventbooking .eb-save-to-calendar-buttons .btn:hover,
body.com-eventbooking .eb-taskbar .btn:focus,
body.com-eventbooking .eb-save-to-calendar-buttons .btn:focus,
#eb-event-page .eb-taskbar .btn:hover,
#eb-event-page .eb-save-to-calendar-buttons .btn:hover,
#eb-event-page .eb-taskbar .btn:focus,
#eb-event-page .eb-save-to-calendar-buttons .btn:focus {
    background-image: linear-gradient(135deg,
            #4dde6a 0%,
            #3bd65e 40%,
            #2ad251 70%,
            #23C147 100%) !important;

    box-shadow: 0 2px 6px rgba(0, 0, 0, .25) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

/* Falls EB Links als Buttons rendert */
#eb-event-page .eb-taskbar a.btn,
#eb-event-page .eb-save-to-calendar-buttons a.btn {
    text-decoration: none !important;
}

/* Event-Detailseite: Titel erwischen + Überschreiben erzwingen */
.com-eventbooking .eb-page-heading,
.com-eventbooking h1.eb-page-heading,
.com-eventbooking .eb-event-title,
.com-eventbooking h1.eb-event-title {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* ###############################
EB Rand um Eventsuche anpassen 
##################################*/
.eb-search-bar-container {
    background: rgba(35, 193, 71, 0.04) !important;
    padding: 12px 12px 4px 12px !important;
    border: 1px solid rgba(35, 193, 71, 0.10);
}

.eb-search-bar-container .btn,
.eb-search-bar-container button {
    margin-left: 12px !important;
    margin-top: 2px !important;
}

.module-title {
    margin-bottom: 6px !important;
}

#eb_search_form {
    margin-top: 0 !important;
}

.eb-search-bar-container {
    margin-top: 0 !important;
    padding-top: 4px !important;
}


/* Eingelassenes BLOCK  */
.kbw-deep-block {
    border: 1px solid #52525262;
    border-radius: 4px;
    display: block;
    max-width: 100%;
    height: auto;

    /* 🔽 NEU – Innenabstand */
    padding: 15px 15px;

    /* etwas ruhiger / edler */
    filter: saturate(90%);
    transition: filter 0.25s ease, box-shadow 0.25s ease;

    /* eingelassen */
    box-shadow:
        inset 0 2px 6px rgba(131, 133, 132, 0.22),
        inset 0 -2px 4px rgba(255, 255, 255, 0.10),
        0 1px 2px rgba(0, 0, 0, 0.10);
}

.kbw-deep-block:hover {
    filter: saturate(100%);
    /* kein Zoom mehr */
    box-shadow:
        inset 0 2px 20px rgba(49, 201, 87, 0.488),
        inset 0 -2px 5px rgba(255, 255, 255, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.12);
}

/* ##########################################
   CONTENT AREA – SEHR DEZENTER GRAUVERLAUF
############################################# */

.kbw-block-contentarea {
    display: block;
    max-width: 100%;
    height: auto;

    /* Innenabstand */
    padding: 60px 15px;

    /* sehr leichter grauer Hintergrundverlauf */
    background: linear-gradient(to bottom,
            #e7e7e74b 0%,
            #f0f0f00f 70%,
            #ededed52 100%);

    /* 🔽 sehr dezenter 1px Verlauf-Rand */
    border: 1px solid;
    border-image: linear-gradient(to bottom,
            #dffde3,
            #e6e6e6,
            #defce0) 1;
}

/* ##########################################
   BLUR EFFEKT HINTER DEM HAUPTMENÜ (ASTROID)
############################################# */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    background: rgba(1, 134, 35, 0);
    pointer-events: none;
    z-index: 998;
    transition: backdrop-filter 0.25s ease, -webkit-backdrop-filter 0.25s ease, background 0.25s ease;
}

/* Nur wenn über dem Header / Hauptmenü gehovert wird */
body:has(.astroid-nav:hover)::before,
body:has(.uk-navbar:hover)::before {
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    background: rgba(1, 134, 35, 0.06);
}


/* ########################################## 
BLUR EFFEKT SPRÜCHE anpassen 
############################################# */
.blur-background {
    position: relative;
    -webkit-backdrop-filter: blur(6px);
    /* Für Webkit-basierte Browser */
    backdrop-filter: blur(5px);
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    margin: left;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    background-color: rgba(0, 0, 0, 0.1);
    /* Fallback-Hintergrundfarbe */
}

/* ########################################## 
KBW Modern BULLET Heading
############################################# */
.kbw-heading-bullet {
    position: relative;
    padding-left: 22px;
    /* etwas mehr Abstand zum Strich */
}

.kbw-heading-bullet::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    height: 70%;
    transform: translateY(-50%);

    border-left: 7px solid transparent;

    /* KBW Grünverlauf */
    border-image: linear-gradient(to bottom,
            #23C147,
            #04B404,
            #276001) 1;

    /* leichter Glow */
    box-shadow: 0 0 4px rgba(4, 180, 4, 0.35);
}

/* ########################################## 
KBW ARTICLE Abstand Heading
############################################# */
/* Abstand unter Beitragstitel verkleinern */
.blog .item,
.blog .blog-item,
.blog .item-content,
.blog .uk-article {
    margin-top: 20 !important;
    padding-top: 0 !important;
}

.blog .item .page-header,
.blog .blog-item .page-header,
.blog .uk-article .page-header,
.blog .item-title,
.blog .uk-article-title {
    margin-bottom: 2px !important;
    padding-bottom: 0 !important;
}

/* ########################################## 
OFFCANVAS Modul-Box mit Abstand
############################################# */
.bg-offcanvas {
    background: linear-gradient(to bottom,
            rgba(153, 210, 166, 0.10) 0%,
            rgba(35, 193, 71, 0.06) 45%,
            rgba(35, 193, 71, 0.14) 100%);

    border: 1px solid;
    border-image: linear-gradient(to bottom,
            rgba(35, 193, 71, 0.18),
            rgba(35, 193, 71, 0.35),
            rgba(35, 193, 71, 0.20)) 1;

    border-radius: 0;

    padding: 0.6rem;
    /* innen */
    margin: 12px 0 0 0;
    /* außen */

    /* Eingelassener Effekt */
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.12),
        inset 0 -1px 2px rgba(255, 255, 255, 0.15);
}

/* ########################################## 
NEWSFLASH Bilder Effekt
############################################# */

.img-hover-effect-newsflash:hover {
    animation: kbw-wiggle 0.35s ease-in-out infinite;
}

/* Wackelbewegung */
@keyframes kbw-wiggle {

    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(1deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(-1deg);
    }

    100% {
        transform: rotate(0deg);
    }

}

/* ########################################## 
LINK mit Hintergrundfarbe
############################################# */
.kbw-link-highlight {
    color: #1f6f3d;
    text-decoration: none;

    padding: 1px 5px;
    border-radius: 4px;

    background: linear-gradient(to bottom,
            rgba(35, 193, 71, 0.00) 0%,
            rgba(35, 193, 71, 0.06) 60%,
            rgba(35, 193, 71, 0.12) 100%);

    transition: all .2s ease;
}

.kbw-link-highlight:hover {
    background: linear-gradient(to bottom,
            rgba(35, 193, 71, 0.05) 0%,
            rgba(35, 193, 71, 0.12) 60%,
            rgba(35, 193, 71, 0.20) 100%);
}


/* ########################################## 
ARTIKEL Intro Text - Zeilen begrenzen
############################################# */

.kbw-intro-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;      /* max. 4 Zeilen */
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;

    line-height: 1.6;
    max-height: calc(1.6em * 4); /* Fallback */
}