/* ==========================================================================
   SD Banner — Frontend
   Klassen bewusst identisch zum bisherigen Inline-Block (hero.html),
   damit vorhandenes Customizer-CSS weiter greift.
   Eckenradius / Seitenverhältnis kommen per Inline-Style aus den Einstellungen.
   ========================================================================== */

.sd-banner{position:relative;overflow:hidden;touch-action:pan-y;}
.sd-banner-track{display:flex;height:100%;transition:transform .55s cubic-bezier(.22,.61,.36,1);}
.sd-banner-slide{position:relative;flex:0 0 100%;display:block;height:100%;}
.sd-banner-slide picture{display:contents;}

.sd-banner-img{
	width:100% !important;height:100% !important;max-width:100% !important;
	object-fit:cover !important;object-position:var(--pos,50% 50%) !important;
	display:block;-webkit-user-drag:none;user-select:none;
}

/* Video verhält sich exakt wie ein Bild */
.sd-banner-vid{background:#0b131c;pointer-events:none;}
.sd-banner-vid::-webkit-media-controls{display:none !important;}

.sd-banner-slide::after{
	content:"";position:absolute;left:0;right:0;bottom:0;height:130px;
	background:linear-gradient(to top,rgba(11,19,28,.45),transparent);pointer-events:none;
}

/* Kein Link -> Cursor nicht als Hand */
div.sd-banner-slide{cursor:default;}

/* Button-Pille */
.sd-banner-btn{
	position:absolute;left:28px;bottom:24px;z-index:2;display:inline-flex;align-items:center;gap:10px;
	padding:9px 10px 9px 22px;background:#fff;color:#22384a;font-size:14px;font-weight:700;border-radius:999px;
	box-shadow:0 6px 22px rgba(0,0,0,.28);
	transition:background .22s ease,color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.sd-banner-btn-ic{
	display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
	background:#22384a;color:#fff;flex-shrink:0;transition:background .22s ease,color .22s ease;
}
.sd-banner-btn-ic svg{width:14px;height:14px;transition:transform .22s ease;}
.sd-banner-slide:hover .sd-banner-btn{background:#22384a;color:#fff;transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.35);}
.sd-banner-slide:hover .sd-banner-btn-ic{background:#fff;color:#22384a;}
.sd-banner-slide:hover .sd-banner-btn-ic svg{transform:translateX(2px);}

/* Pfeile */
.sd-banner-arr{
	position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;
	border-radius:50% !important;border:0 !important;padding:0 !important;cursor:pointer;
	background:#fff !important;color:#22384a !important;display:flex;align-items:center;justify-content:center;
	box-shadow:0 4px 16px rgba(0,0,0,.25);opacity:.92;
	transition:opacity .2s ease,transform .2s ease,background .2s ease,color .2s ease;
}
.sd-banner-arr:hover{opacity:1;background:#22384a !important;color:#fff !important;transform:translateY(-50%) scale(1.06);}
.sd-banner-arr svg{width:20px;height:20px;}
.sd-banner-prev{left:18px;}
.sd-banner-next{right:18px;}

/* Punkte */
.sd-banner-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;display:flex;align-items:center;gap:8px;z-index:3;}
.sd-banner-dot{
	width:8px;height:8px;border-radius:999px !important;border:0 !important;padding:0 !important;appearance:none;cursor:pointer;
	background:rgba(255,255,255,.55) !important;box-shadow:0 1px 4px rgba(0,0,0,.25);
	transition:width .25s ease,background .25s ease;
}
.sd-banner-dot:hover{background:rgba(255,255,255,.85) !important;}
.sd-banner-dot.is-active{width:22px;background:#fff !important;}

/* ===== Mobil (≤767px) ===== */
@media (max-width:767px){
	.sd-banner-track,
	.sd-banner-slide{height:auto;}
	.sd-banner-img{height:auto !important;}
	.sd-banner-btn{left:12px;bottom:30px;padding:6px 7px 6px 14px;font-size:11.5px;gap:7px;box-shadow:0 4px 14px rgba(0,0,0,.25);}
	.sd-banner-btn-ic{width:19px;height:19px;}
	.sd-banner-btn-ic svg{width:10px;height:10px;}
	.sd-banner-arr{width:28px;height:28px;box-shadow:0 2px 8px rgba(0,0,0,.25);}
	.sd-banner-arr svg{width:13px;height:13px;}
	.sd-banner-prev{left:8px;}
	.sd-banner-next{right:8px;}
	.sd-banner-dots{bottom:8px;gap:5px;}
	.sd-banner-dot{width:5px;height:5px;}
	.sd-banner-dot.is-active{width:13px;}
}

/* ===== Mobil: Höhe der Medien =====
   Zwei Modi:
   A) "Seitenverhältnis (Mobil)" gesetzt  -> .sd-banner--mfix
      Der Container gibt die Höhe vor, Bild und Video füllen ihn per cover.
   B) leer -> jedes Medium bringt seine eigene Höhe mit.
      Videos bekommen ihr echtes Format erst per JS aus den Metadaten;
      bis dahin greift --sdb-vid-ratio als Platzhalter, damit nichts springt.
*/
@media (max-width:767px){

	/* A) festes Verhältnis */
	.sd-banner--mfix .sd-banner-track,
	.sd-banner--mfix .sd-banner-slide{height:100%;}
	.sd-banner--mfix .sd-banner-img{height:100% !important;aspect-ratio:auto !important;}

	/* B) automatisch */
	.sd-banner:not(.sd-banner--mfix) .sd-banner-vid{
		height:auto !important;
		aspect-ratio:var(--sdb-vid-ratio,16/9);
		object-fit:cover !important;
	}
}

@media (prefers-reduced-motion: reduce){
	.sd-banner-track{transition:none;}
}