.jlbno-root{
	--jlbno-brand:#185FA5;
	position:fixed;
	inset:0;
	z-index:2147483000;
	font-family:var(--jlbno-font-body,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);
	pointer-events:none;
}
.jlbno-root *{box-sizing:border-box}
.jlbno-locked{overflow:hidden !important;touch-action:none}

.jlbno-backdrop{
	position:absolute;inset:0;
	background:rgba(8,30,55,.55);
	opacity:0;transition:opacity .35s ease;pointer-events:auto;
}
.jlbno-visible .jlbno-backdrop{opacity:1}

/* ============ Modal (mittig) ============ */
.jlbno-mode-modal{
	display:flex;align-items:center;justify-content:center;
	padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));
	overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.jlbno-mode-modal .jlbno-card{
	position:relative;width:100%;max-width:400px;
	max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);
	display:flex;flex-direction:column;
	opacity:0;transform:translateY(16px) scale(.98);
	transition:opacity .35s ease,transform .35s ease;
}
.jlbno-mode-modal.jlbno-visible .jlbno-card{opacity:1;transform:none}

/* ============ Slide-in (Ecke / Bottom-Sheet) ============ */
.jlbno-mode-slidein{display:flex;align-items:flex-end;justify-content:flex-end;padding:20px}
.jlbno-mode-slidein .jlbno-card{
	position:relative;width:360px;max-width:calc(100vw - 40px);
	max-height:calc(100dvh - 40px);display:flex;flex-direction:column;
	opacity:0;transform:translateY(24px);
	transition:opacity .35s ease,transform .35s ease;
}
.jlbno-mode-slidein.jlbno-visible .jlbno-card{opacity:1;transform:none}

/* ============ Card-Bausteine ============ */
.jlbno-card{
	background:var(--jlbno-bg,#fff);border-radius:16px;overflow:hidden;
	box-shadow:0 24px 60px rgba(8,30,55,.28);pointer-events:auto;
}
.jlbno-grabber{display:none}

.jlbno-hero{
	position:relative;height:132px;flex:0 0 auto;
	background:var(--jlbno-brand);background-size:cover;background-position:center;
	display:flex;align-items:center;justify-content:center;
}
.jlbno-mode-slidein .jlbno-hero{height:108px}
.jlbno-hero-icon{font-size:42px;line-height:1;color:#fff}
.jlbno-hero-success{background:var(--jlbno-brand)}

.jlbno-close{
	position:absolute;top:10px;right:10px;width:40px;height:40px;
	border:0;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;
	font-size:24px;line-height:1;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	transition:background .2s ease;-webkit-tap-highlight-color:transparent;
}
.jlbno-close:hover{background:rgba(255,255,255,.4)}
.jlbno-close:focus-visible{outline:3px solid #fff;outline-offset:2px}

.jlbno-body{padding:20px 22px 22px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.jlbno-kicker{margin:0 0 6px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--jlbno-brand)}
.jlbno-headline{
	margin:0 0 8px;
	font-family:var(--jlbno-font-head,"Zain",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
	font-size:23px;line-height:1.15;font-weight:700;color:var(--jlbno-headline,#10243a);
}
.jlbno-text{margin:0 0 16px;font-size:14px;line-height:1.55;color:var(--jlbno-text,#4a5763)}

.jlbno-email{
	width:100%;height:48px;padding:0 14px;font-size:16px;
	border:1.5px solid #d3dae1;border-radius:10px;margin-bottom:10px;
	outline:none;transition:border-color .15s ease,box-shadow .15s ease;
	color:#10243a;background:#fff;
}
.jlbno-email:focus{border-color:var(--jlbno-brand);box-shadow:0 0 0 3px var(--jlbno-glow,rgba(24,95,165,.18))}
.jlbno-invalid{border-color:#d8443b}
.jlbno-invalid:focus{box-shadow:0 0 0 3px rgba(216,68,59,.18)}

.jlbno-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0;pointer-events:none}

.jlbno-cta{
	width:100%;min-height:48px;border:0;border-radius:10px;
	background:var(--jlbno-brand);color:#fff;
	font-family:var(--jlbno-font-head,"Zain",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
	font-size:16px;font-weight:700;cursor:pointer;
	transition:filter .15s ease,transform .1s ease;-webkit-tap-highlight-color:transparent;
}
.jlbno-cta:hover{filter:brightness(1.07)}
.jlbno-cta:active{transform:scale(.99)}
.jlbno-cta:focus-visible{outline:3px solid var(--jlbno-brand);outline-offset:2px}
.jlbno-cta[disabled]{opacity:.65;cursor:default}
.jlbno-loading{position:relative;color:transparent}
.jlbno-loading::after{
	content:"";position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;
	border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;
	animation:jlbno-spin .7s linear infinite;
}
@keyframes jlbno-spin{to{transform:rotate(360deg)}}

/* Zwei-Schritt (Ja/Nein) */
.jlbno-step1{display:flex;flex-direction:column;gap:10px}
.jlbno-yes{min-height:48px;border:0;border-radius:10px;background:var(--jlbno-brand);color:#fff;font-weight:700;font-size:16px;cursor:pointer;font-family:var(--jlbno-font-head,"Zain",-apple-system,sans-serif)}
.jlbno-no{min-height:44px;border:0;border-radius:10px;background:transparent;color:#8a949d;font-size:14px;cursor:pointer;text-decoration:underline}
.jlbno-yes:focus-visible,.jlbno-no:focus-visible{outline:3px solid var(--jlbno-brand);outline-offset:2px}

.jlbno-msg{margin:10px 0 0;font-size:13px;line-height:1.45;color:#10243a}
.jlbno-msg-error{color:#c23a30}
.jlbno-note{margin:12px 0 0;font-size:11px;line-height:1.5;color:#8a949d}
.jlbno-note a{color:var(--jlbno-brand);text-decoration:underline}
.jlbno-note a:focus-visible{outline:2px solid var(--jlbno-brand);outline-offset:2px}

/* ============ Hinweis-Leiste (Bar) ============ */
.jlbno-mode-bartop,.jlbno-mode-barbottom{display:block}
.jlbno-bar{
	position:absolute;left:0;right:0;
	background:var(--jlbno-brand);color:#fff;pointer-events:auto;
	box-shadow:0 6px 24px rgba(8,30,55,.22);
}
.jlbno-mode-bartop .jlbno-bar{top:0;transform:translateY(-100%)}
.jlbno-mode-barbottom .jlbno-bar{bottom:0;transform:translateY(100%);padding-bottom:env(safe-area-inset-bottom)}
.jlbno-bar{transition:transform .35s ease}
.jlbno-visible .jlbno-bar{transform:none}
.jlbno-bar-inner{
	max-width:1100px;margin:0 auto;
	display:flex;align-items:center;gap:14px;
	padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));
}
.jlbno-bar-text{flex:1 1 auto;min-width:0}
.jlbno-bar-text .jlbno-kicker{color:rgba(255,255,255,.85)}
.jlbno-bar-text .jlbno-headline{color:#fff;font-size:18px;margin:0}
.jlbno-bar-text .jlbno-text{color:rgba(255,255,255,.9);margin:2px 0 0;font-size:13px}
.jlbno-bar-form{display:flex;gap:8px;flex:0 0 auto;align-items:center}
.jlbno-bar-form .jlbno-email{margin:0;width:240px;height:44px;background:#fff}
.jlbno-bar-form .jlbno-cta{width:auto;min-height:44px;padding:0 18px}
.jlbno-bar .jlbno-close{position:static;flex:0 0 auto;background:rgba(255,255,255,.18)}
.jlbno-bar .jlbno-msg{position:absolute;left:16px;bottom:2px;margin:0;color:#fff;font-size:12px}
.jlbno-bar-success{padding:14px 16px;text-align:center;font-weight:700}

/* ============ Mobil ============ */
@media (max-width:600px){
	.jlbno-mode-slidein{padding:0}
	.jlbno-mode-slidein .jlbno-card{
		width:100%;max-width:100%;border-radius:18px 18px 0 0;
		padding-bottom:env(safe-area-inset-bottom);
	}
	.jlbno-mode-slidein .jlbno-grabber{
		display:block;width:40px;height:4px;border-radius:999px;
		background:rgba(255,255,255,.7);position:absolute;top:8px;left:50%;
		transform:translateX(-50%);z-index:2;
	}
	.jlbno-mode-slidein .jlbno-hero{height:120px}
	.jlbno-close{width:44px;height:44px}
	.jlbno-headline{font-size:21px}

	/* Bar stapeln */
	.jlbno-bar-inner{flex-wrap:wrap;gap:10px;padding:12px 14px}
	.jlbno-bar-text{flex:1 1 100%}
	.jlbno-bar-form{flex:1 1 100%}
	.jlbno-bar-form .jlbno-email{flex:1 1 auto;width:auto}
	.jlbno-bar .jlbno-close{position:absolute;top:8px;right:8px;width:40px;height:40px}
}

@media (prefers-reduced-motion: reduce){
	.jlbno-backdrop,.jlbno-card,.jlbno-bar{transition:none !important}
	.jlbno-loading::after{animation-duration:1.2s}
}

/* ============ Bild-Varianten: split / cover ============ */
.jlbno-mode-split,.jlbno-mode-cover{
	display:flex;align-items:center;justify-content:center;
	padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));
	overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.jlbno-mode-split .jlbno-card,.jlbno-mode-cover .jlbno-card{
	position:relative;opacity:0;transform:translateY(16px) scale(.98);
	transition:opacity .35s ease,transform .35s ease;
}
.jlbno-mode-split.jlbno-visible .jlbno-card,.jlbno-mode-cover.jlbno-visible .jlbno-card{opacity:1;transform:none}

/* gemeinsamer Bildbereich + Platzhalter */
.jlbno-media{background:var(--jlbno-brand);background-size:cover;background-position:center}
.jlbno-media-ph{
	display:flex;align-items:center;justify-content:center;
	background:linear-gradient(135deg,var(--jlbno-brand),color-mix(in srgb,var(--jlbno-brand) 55%,#000));
}
.jlbno-ph-icon{font-size:60px;color:rgba(255,255,255,.9)}

.jlbno-split .jlbno-close,.jlbno-cover .jlbno-close{background:rgba(0,0,0,.4)}
.jlbno-split .jlbno-close:hover,.jlbno-cover .jlbno-close:hover{background:rgba(0,0,0,.58)}

/* --- split: Bild seitlich --- */
.jlbno-mode-split .jlbno-card{
	width:100%;max-width:720px;max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);
	display:flex;flex-direction:row;
}
.jlbno-split .jlbno-media{flex:0 0 44%;min-height:340px}
.jlbno-split .jlbno-media-ph{min-height:340px}
.jlbno-split .jlbno-panel{
	flex:1 1 56%;display:flex;flex-direction:column;justify-content:center;
	padding:30px 30px 26px;overflow-y:auto;
}

/* --- cover: großes Bild mit Text darüber --- */
.jlbno-mode-cover .jlbno-card{
	width:100%;max-width:440px;max-height:calc(100dvh - 28px);
	display:flex;flex-direction:column;
}
.jlbno-cover .jlbno-media{
	position:relative;flex:1 1 auto;min-height:300px;display:flex;align-items:flex-end;
}
.jlbno-cover .jlbno-media-ph{align-items:flex-end}
.jlbno-cover .jlbno-media-ph .jlbno-ph-icon{position:absolute;top:26px;left:50%;transform:translateX(-50%);opacity:.5;font-size:46px}
.jlbno-cover .jlbno-media::after{
	content:"";position:absolute;inset:0;
	background:linear-gradient(to top,rgba(8,20,35,.88),rgba(8,20,35,.2) 55%,rgba(8,20,35,0));
}
.jlbno-cover .jlbno-media-cap{position:relative;z-index:1;padding:22px 22px 18px}
.jlbno-cover .jlbno-media-cap .jlbno-kicker{color:rgba(255,255,255,.85)}
.jlbno-cover .jlbno-media-cap .jlbno-headline{color:#fff}
.jlbno-cover .jlbno-media-cap .jlbno-text{color:rgba(255,255,255,.92);margin-bottom:0}
.jlbno-cover .jlbno-foot{padding:18px 22px 22px;background:var(--jlbno-bg,#fff)}

/* Erfolgs-Zustand (split/cover, inline im Content-Bereich) */
.jlbno-success-inline{display:flex;gap:13px;align-items:flex-start}
.jlbno-check-inline{
	flex:0 0 auto;width:40px;height:40px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;
	background:color-mix(in srgb,var(--jlbno-brand) 14%,#fff);color:var(--jlbno-brand);
}
.jlbno-success-inline .jlbno-headline{margin-top:0}
.jlbno-success-inline .jlbno-note,.jlbno-success-inline .jlbno-text{margin-top:6px}

@supports not (background:color-mix(in srgb,#000 10%,#fff)){
	.jlbno-media-ph{background:var(--jlbno-brand)}
	.jlbno-check-inline{background:#e8f0f8}
}

@media (max-width:600px){
	.jlbno-mode-split .jlbno-card{flex-direction:column;max-width:400px}
	.jlbno-split .jlbno-media,.jlbno-split .jlbno-media-ph{flex:0 0 auto;min-height:150px}
	.jlbno-split .jlbno-panel{flex:1 1 auto;padding:22px}
	.jlbno-mode-cover .jlbno-card{max-width:400px}
	.jlbno-cover .jlbno-media{min-height:220px}
}

/* ============ Shop-Varianten (Produkt) ============ */
.jlbno-shop .jlbno-card{border-radius:0}
.jlbno-shop .jlbno-close{background:rgba(0,0,0,.42)}
.jlbno-shop .jlbno-close:hover{background:rgba(0,0,0,.58)}
.jlbno-price{font-family:var(--jlbno-font-head,"Zain",-apple-system,sans-serif);font-weight:800;font-size:20px;color:var(--jlbno-brand);line-height:1.1}
.jlbno-pname{margin:0;font-weight:700;font-size:15px;color:var(--jlbno-headline,#10243a)}
.jlbno-shop-cta{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:0;text-transform:uppercase;letter-spacing:.02em}
.jlbno-priceRow{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}

/* Modal-Zentrierung + Reveal für Shop-Modal-Varianten */
.jlbno-mode-shop_spotlight,.jlbno-mode-shop_cover{
	display:flex;align-items:center;justify-content:center;
	padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));
	overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.jlbno-mode-shop_spotlight .jlbno-card,.jlbno-mode-shop_cover .jlbno-card{
	position:relative;width:100%;max-width:400px;max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);
	display:flex;flex-direction:column;
	opacity:0;transform:translateY(16px) scale(.98);transition:opacity .35s ease,transform .35s ease;
}
.jlbno-mode-shop_spotlight.jlbno-visible .jlbno-card,.jlbno-mode-shop_cover.jlbno-visible .jlbno-card{opacity:1;transform:none}

/* Spotlight */
.jlbno-shop-hero{height:210px;flex:0 0 auto}
.jlbno-shop-hero.jlbno-media-ph .jlbno-ph-icon{font-size:60px}

/* Cover */
.jlbno-shop-covermedia{position:relative;flex:1 1 auto;min-height:300px;display:flex;align-items:flex-end}
.jlbno-shop-covermedia.jlbno-media-ph .jlbno-ph-icon{position:absolute;top:24px;left:50%;transform:translateX(-50%);opacity:.5;font-size:44px}
.jlbno-shop-covermedia::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,6,14,.9),rgba(20,6,14,.2) 55%,rgba(20,6,14,0))}
.jlbno-shop_cover .jlbno-media-cap{position:relative;z-index:1;padding:22px}
.jlbno-shop_cover .jlbno-media-cap .jlbno-kicker{color:rgba(255,255,255,.85)}
.jlbno-shop_cover .jlbno-media-cap .jlbno-headline{color:#fff}
.jlbno-shop_cover .jlbno-media-cap .jlbno-text{color:rgba(255,255,255,.92);margin-bottom:0}
.jlbno-shop-foot{padding:16px 20px 18px;background:var(--jlbno-bg,#fff)}
.jlbno-shop-foot .jlbno-priceRow{margin-top:0}
.jlbno-shop-footname .jlbno-pname{margin-bottom:2px}

/* Slide-in */
.jlbno-mode-shop_slidein{display:flex;align-items:flex-end;justify-content:flex-end;padding:20px}
.jlbno-mode-shop_slidein .jlbno-card{position:relative;opacity:0;transform:translateY(24px);transition:opacity .35s ease,transform .35s ease}
.jlbno-mode-shop_slidein.jlbno-visible .jlbno-card{opacity:1;transform:none}
.jlbno-shopcard{width:340px;max-width:calc(100vw - 40px)}
.jlbno-shop-slide{display:flex;gap:14px;padding:16px}
.jlbno-shop-thumb{width:100px;height:100px;flex:0 0 auto}
.jlbno-shop-thumb.jlbno-media-ph .jlbno-ph-icon{font-size:34px}
.jlbno-shop-info{display:flex;flex-direction:column;justify-content:center;min-width:0}
.jlbno-shop-info .jlbno-kicker{margin-bottom:3px}
.jlbno-shop-info .jlbno-price{margin:2px 0 6px}
.jlbno-shop-info .jlbno-shop-cta{align-self:flex-start;height:38px;padding:0 16px;font-size:13px}

@media (max-width:600px){
	.jlbno-mode-shop_slidein{padding:0}
	.jlbno-shopcard{width:100%;max-width:100%}
	.jlbno-mode-shop_spotlight .jlbno-card,.jlbno-mode-shop_cover .jlbno-card{max-width:400px}
	.jlbno-shop-covermedia{min-height:220px}
}