/* ===== Basis ===== */
.scx { --gap:16px; --desktop-margin:5vw; }
.scx .scx-track{ display:flex; gap:var(--gap); -webkit-user-drag:none; }

/* Viewport: horizontales Scrollen, Scrollbar verstecken */
.scx .scx-viewport{
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    padding:0 8vw;                 /* Mobil & Tablet: Peek links/rechts */
    cursor:grab;
    user-select:none; -webkit-user-select:none;
    touch-action:pan-y;
    -ms-overflow-style:none; scrollbar-width:none;
    -ms-touch-action:pan-y;
}
.scx .scx-viewport::-webkit-scrollbar{ display:none; width:0; height:0; }
.scx .scx-viewport.scx-grabbing{ cursor:grabbing; }

/* Slides: auf Mobil 1 Hauptkarte mit Peeks */
.scx .scx-slide{
    flex:0 0 calc(100% - 16vw);
    transform:translateZ(0); backface-visibility:hidden; -webkit-user-drag:none;
}

/* ===== Karte ===== */
.scx .scx-card{
    position:relative;
    display:grid;
    grid-template-rows:auto auto;
    background:#000;                 /* schwarzer Hintergrund */
    border:2px solid #fff;           /* weißer Rahmen */
    border-radius:0;                 /* keine Abrundung */
    min-height:300px;
    row-gap:0;
    padding: 20px;
}

/* Titel oben */
.scx .scx-head{ padding: 0px; min-height: 80px;}
.scx .scx-title{
    margin:0;
    color:#fff;
    font:500 clamp(1.25rem, 1.2rem + 1.4vw, 2.25rem)/1.2;
    margin-bottom: 0 !important;
    text-align: center;
}

/* Bild darunter */
.scx .scx-media{ position:relative; margin-bottom: 0 !important; }
.scx .scx-img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio: 16/9;}
.scx .scx-img--placeholder{ height:240px; background:#222 linear-gradient(135deg,#3b82f6 0,#22c55e 100%); }

/* Toggle-Button (über dem Bild rechts unten) */
.scx .scx-toggle{
    position:absolute; right:0px; bottom:0px;
    width:40px; height:40px; display:grid; place-items:center;
    background:#2a732e; color:#fff; border:0; border-radius:0;
    cursor:pointer;
}
.scx .scx-toggle:focus{ outline:2px solid #fff; outline-offset:2px; }
.scx .scx-icon{ width:28px; height:28px; fill:currentColor; display:block; }
.scx .scx-icon-minus{ display:none; }
.scx .scx-toggle[aria-expanded="true"] .scx-icon-plus{ display:none; }
.scx .scx-toggle[aria-expanded="true"] .scx-icon-minus{ display:block; }

/* Overlay: verdeckt Titel + Bild */
.scx .scx-overlay{
    position:absolute; inset:-2px; /* über den Rahmen legen */
    background:#0b0b0b; color:#fff; display:none;
    align-items:center; justify-content:center; text-align:left;
    border:2px solid #fff; z-index:2; padding:24px;
}
.scx .scx-card.is-open .scx-overlay{ display:flex; }

.scx .scx-overlay-inner{ max-width:60ch; }
.scx .scx-overlay-text{ margin:0 0 16px 0; line-height:1.6; color:#e5e7eb; font-size:14px; hyphens: auto; }

/* Actions (Buttons unter dem Text) */
.scx .scx-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.scx .scx-action{
    display:inline-block;
	font-size: 14px;
	font-weight: 600;
    padding:10px 14px;
    background:#2a732e;
    color:#fff;
    text-decoration:none;
    border:0px solid #fff;
    border-radius:0;
    line-height:1;
	transition: all 0.3s;
}
.scx .scx-action:hover {
	background-color: rgba(42,115,46,0.8);
}
.scx .scx-action:focus{ outline:2px solid #fff; outline-offset:2px; }

/* ===== Tablet: 2 Karten + Peek links/rechts ===== */
@media (min-width:641px) and (max-width:1299px){
    .scx .scx-viewport{ padding:0 8vw; } /* Peek */
    /* 100% Breite minus beidseitigem Peek (16vw) minus 1 Gap, geteilt durch 2 Karten */
    .scx .scx-slide{ flex:0 0 calc((100% - 16vw - var(--gap))/2); }
}

/* ===== Desktop: 5 nebeneinander – kein Karussell + Außenabstand ===== */
@media (min-width:1300px){
    .scx{ margin:0 var(--desktop-margin); }   /* << Außenabstand links/rechts nur Desktop */
    .scx .scx-viewport{ padding:0; cursor:default; }
    .scx .scx-track{ gap:var(--gap); }
    .scx .scx-slide{ flex:1 1 calc((100% - 4*var(--gap))/5); }
    .scx .scx-title{ font-size: 28px; }
		.scx .scx-card{              /* keine Abrundung */
    min-height:320px;
}
}