Systembox mit Text auf Bild

/* --- GRADIENT ACCENT FOR WELCOME BOX --- */
.welcomeBox {
    /* Wir stellen sicher, dass das ::before Element an der Box ausgerichtet wird */
    position: relative !important; 
}

.welcomeBox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px; /* Strichdicke passend zu den Artikel-Karten */
    background: linear-gradient(90deg, #f58220, #009e60, #ad2878, #1e64b4);
    z-index: 20; /* Muss höher sein als .welcomeBoxContent (z-index 1) */
    pointer-events: none;
}

.welcomeBox {
    background-color: rgba(0,0,0,0) !important;
    border-radius: var(--wcfBorderRadius);
    display: grid;
    position: relative;
    padding: 0 !important;
    overflow: hidden;
	min-height: 450px;
    grid-template-areas:
        "welcomeBoxContent"
        "welcomeBoxFooter";
    grid-template-rows: 1fr min-content;

    .boxImage {
        margin: 0;
        overflow: hidden;
        display: flex;
        position: absolute;
        left: 0;
        bottom: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: var(--wcfBorderRadius);
        max-height: initial;

        img {
            object-fit: cover;
            object-position: top;
            width: 100%;
            height: 100%;
            max-width: initial;
            border-radius: var(--wcfBorderRadius);
        }
    }

    /* KORREKTUR: Selektor vereinfacht (ohne doppeltes .welcomeBox) */
    .boxImage::before {
        content: "";
        inset: 0;
        position: absolute;
        background-image: linear-gradient(to right, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0.0) 100%);
        z-index: 0;
    }

    .boxContent {
        display: contents;
    }

    .welcomeBoxContent {
        grid-area: welcomeBoxContent;
        color: #fff;
        padding: 20px;
        @include screen-xl { width: 40%; }
        @include screen-lg-only { width: 80%; }
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-image: linear-gradient(to right, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0.0) 100%);
        z-index: 1;

        h2 {
            @include screen-md-down { font-size: 28px; }
            @include screen-lg { font-size: 36px; }
            font-weight: 700;
            text-transform: uppercase;
        }
        h2 + h2 {
            @include screen-md-down { font-size: 36px; }
            @include screen-lg { font-size: 48px; }
            font-weight: 700;
            text-transform: uppercase;
        }
        p { margin: 20px 0; }
    }

    .welcomeBoxFooter {
        grid-area: welcomeBoxFooter;
        color: #fff;
        display: grid;
        grid-auto-flow: row;
        background-color: rgba(0,0,0,0.5);
        padding: 10px;
        border-radius: 0 0 var(--wcfBorderRadius) var(--wcfBorderRadius);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        @include screen-md-down {
            grid-template-columns: repeat(2, 50%);
            row-gap: 10px;
        }
        @include screen-lg {
            grid-template-columns: repeat(4, 25%);
        }
        .welcomeBoxFooterItem { display: flex; }
        small { color: rgba(255,255,255,0.65); }
        .welcomeBoxFooterItemIcon { flex-basis: 45px; text-align: center; }
    }
}

<div class="welcomeBoxContent">
<h2>Willkommen auf<br />
wsc-user.org</h2>
<p>Die unabhängige Plattform rund um die WoltLab Suite</p>
</div>
<div></div>
<div class="welcomeBoxFooter">
	<div class="welcomeBoxFooterItem">
		<div class="welcomeBoxFooterItemIcon">
			{icon size=16 name='info-circle' type='solid'}
		</div>
		<div class="welcomeBoxFooterItemContent">
			<p>Unabhängig & Privat</p>
          	<p><small>Reine Community-Plattform</small></p>
		</div>
	</div>
	<div class="welcomeBoxFooterItem">
		<div class="welcomeBoxFooterItemIcon">
			{icon size=16 name='shop' type='solid'}
		</div>
		<div class="welcomeBoxFoote<div class="welcomeBoxContent">
<h2>Willkommen auf<br />
wsc-user.org</h2>
<p>Die unabhängige Plattform rund um die WoltLab Suite</p>
</div>
<div></div>
<div class="welcomeBoxFooter">
	<div class="welcomeBoxFooterItem">
		<div class="welcomeBoxFooterItemIcon">
			{icon size=16 name='info-circle' type='solid'}
		</div>
		<div class="welcomeBoxFooterItemContent">
			<p>Unabhängig & Privat</p>
          	<p><small>Reine Community-Plattform</small></p>
		</div>
	</div>
	<div class="welcomeBoxFooterItem">
		<div class="welcomeBoxFooterItemIcon">
			{icon size=16 name='shop' type='solid'}
		</div>
		<div class="welcomeBoxFooterItemContent">
			<p>Keine geschäftliche Verbindung</p>
			<p><small>zur WoltLab GmbH</small></p>
		</div>
	</div>
	<div class="welcomeBoxFooterItem">
		<div class="welcomeBoxFooterItemIcon">
			{icon size=16 name='store' type='solid'}
		</div>
		<div class="welcomeBoxFooterItemContent">
			<p>Keine kommerziellen Interessen</p>
			<p><small>100% privates, werbefreies Projekt</small></p>
		</div>
	</div>
	<div class="welcomeBoxFooterItem">
		<div class="welcomeBoxFooterItemIcon">
			
		</div>
		<div class="welcomeBoxFooterItemContent">
		
		</div>
	</div>	
</div>rItemContent">
			<p>Keine geschäftliche Verbindung</p>
			<p><small>zur WoltLab GmbH</small></p>
		</div>
	</div>
	<div class="welcomeBoxFooterItem">
		<div class="welcomeBoxFooterItemIcon">
			{icon size=16 name='store' type='solid'}
		</div>
		<div class="welcomeBoxFooterItemContent">
			<p>Keine kommerziellen Interessen</p>
			<p><small>100% privates, werbefreies Projekt</small></p>
		</div>
	</div>
	<div class="welcomeBoxFooterItem">
		<div class="welcomeBoxFooterItemIcon">
			
		</div>
		<div class="welcomeBoxFooterItemContent">
		
		</div>
	</div>	
</div>