/* -------------------------------------------------------
RESET
------------------------------------------------------- */

*{
	box-sizing:border-box;
	margin:0;
	padding:0;
}

html{
	scroll-behavior:smooth;
}

body{
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
	line-height:1.6;
	color:#333;
	background:#fff;
}


/* -------------------------------------------------------
CONTAINER
------------------------------------------------------- */

.bm-container{
	max-width:1200px;
	margin:auto;
	padding:0 20px;
}


/* -------------------------------------------------------
LOGO
------------------------------------------------------- */

.bm-logo img{
	height:60px;
	width:auto;
	display:block;
}

#home{
	scroll-margin-top:100px;
}


/* -------------------------------------------------------
NAVIGATION
------------------------------------------------------- */

.bm-nav{
	padding:20px 0;
	border-bottom:1px solid #eee;
	background:#fff;
	//position:sticky;
	//top:0;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:1000;
	box-shadow:0 6px 18px rgba(0,0,0,0.06);
}

.bm-nav-inner{
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.bm-logo{
	font-weight:700;
	font-size:20px;
}

.bm-menu{
	display:flex;
	align-items:center;
}

.bm-menu a{
	margin-left:25px;
	text-decoration:none;
	color:#333;
	font-size:15px;
	position:relative;
}

.bm-menu a::after{
	content:"";
	position:absolute;
	left:50%;
	bottom:-6px;
	width:0;
	height:3px;
	background:#c48a3a;
	transform:translateX(-50%);
	transition:width .25s ease;
}

.bm-menu a:hover{
	color:#c48a3a;
}

.bm-menu a:hover::after{
	width:100%;
}


/* -------------------------------------------------------
SECTIONS
------------------------------------------------------- */

.bm-section{
	min-height:100vh;
	padding:80px 0;
	display:flex;
	align-items:center;
}

.bm-section .bm-container{
	width:100%;
}

.bm-section-gray{
	background:#f7f7f7;
}

.bm-section-white{
	background:#fff;
}


/* -------------------------------------------------------
GRID
------------------------------------------------------- */

.bm-grid-2{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:40px;
}

.bm-grid-3{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:40px;
}


/* -------------------------------------------------------
BUTTONS
------------------------------------------------------- */

.bm-button{
	display:inline-block;
	padding:14px 28px;
	background:#c48a3a;
	color:#fff;
	text-decoration:none;
	border-radius:6px;
	font-weight:500;
	transition:.25s;
}

.bm-button:hover{
	background:#a86f27;
}

.bm-button-secondary{
	display:inline-block;
	padding:14px 26px;
	border:1px solid #ddd;
	text-decoration:none;
	border-radius:6px;
	color:#333;
}


/* -------------------------------------------------------
Section Glow
------------------------------------------------------- */

.bm-section-glow{
	position:relative;
	overflow:hidden;
}

.bm-section-glow::before{
	content:"";
	position:absolute;
	width:900px;
	height:900px;
	top:50%;
	transform:translateY(-50%);
	background:radial-gradient(
		circle,
		rgba(196,138,58,0.18) 0%,
		rgba(196,138,58,0.10) 35%,
		rgba(196,138,58,0.04) 55%,
		transparent 70%
	);
	pointer-events:none;
	z-index:0;
}

/* Glow rechts */

.bm-section-glow-right::before{
	right:-300px;
}

/* Glow links */

.bm-section-glow-left::before{
	left:-300px;
}

/* Inhalt über Glow */

.bm-section-glow .bm-container{
	position:relative;
	z-index:1;
}


/* -------------------------------------------------------
HERO
------------------------------------------------------- */

.bm-hero{
	position:relative;
	//overflow:hidden;
	padding:1px 0 80px;
	min-height:calc(100vh - 90px);
	display:flex;
	align-items:center;
	background:linear-gradient(
		180deg,
		#ffffff 0%,
		#faf7f2 100%
	);
}

.bm-hero::before{
	content:"";
	position:absolute;
	width:900px;
	height:900px;
	right:-300px;
	top:-200px;
	background:radial-gradient(
		circle,
		rgba(196,138,58,0.18) 0%,
		rgba(196,138,58,0.10) 35%,
		rgba(196,138,58,0.04) 55%,
		transparent 70%
	);
}

.bm-hero-grid{
	display:grid;
	grid-template-columns:60% 40%;
	gap:60px;
	align-items:center;
	position:relative;
	z-index:1;
}

.bm-hero-title{
	font-size:36px;
	line-height:1.2;
	margin-bottom:20px;
}

.bm-hero-text{
	font-size:18px;
	color:#666;
	margin-bottom:25px;
}

.bm-hero-actions{
	display:flex;
	gap:15px;
}

.bm-hero-image img{
	width:120%;
	max-width:none;
	height:auto;
	filter:
		drop-shadow(0 35px 45px rgba(0,0,0,0.35))
		drop-shadow(0 10px 15px rgba(0,0,0,0.25));
}


/* -------------------------------------------------------
FEATURES
------------------------------------------------------- */

.bm-feature{
	background:#fff;
	padding:30px;
	border-radius:8px;
	box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

.bm-feature h3{
	margin-bottom:10px;
	font-size:20px;
}

.bm-section-title{
	font-size:28px;
	margin-bottom:15px;
	text-align:center;
}

.bm-section-sub{
	max-width:700px;
	margin:0 auto 60px auto;
	color:#666;
	text-align:center;
}

.bm-feature-on{
	color:#333;
}

.bm-feature-off{
	color:#bbb;
	text-decoration:line-through;
	opacity:.6;
}

.bm-feature-on::before{
	content:"✔ ";
	color:#4CAF50;
}

.bm-feature-off::before{
	content:"✖ ";
	color:#bbb;
}


/* -------------------------------------------------------
SCREENSHOTS
------------------------------------------------------- */

.bm-screenshots-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:40px;
	margin-top:60px;
}

.bm-screenshot{
	position:relative;
	overflow:hidden;
	background:#fff;
	border-radius:12px;
	box-shadow:0 10px 30px rgba(0,0,0,0.08);
	transition:
		transform .25s ease,
		box-shadow .25s ease;
}

.bm-screenshot img{
	display:block;
	width:100%;
	height:260px;
	object-fit:cover;
	transition:transform .35s ease;
}

.bm-screen-overlay{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	padding:10px;
	background:linear-gradient(
		to top,
		rgba(0,0,0,0.75),
		rgba(0,0,0,0)
	);
	color:#fff;
}

.bm-screenshot:hover{
	transform:translateY(-6px);
	box-shadow:
		0 20px 45px rgba(0,0,0,0.18),
		0 0 0 2px rgba(196,138,58,0.45);
}

.bm-screenshot:hover img{
	transform:scale(1.05);
}


/* -------------------------------------------------------
PRICING
------------------------------------------------------- */

.bm-pricing-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:40px;
	margin-top:60px;
	align-items:stretch;
}

.bm-pricing-card{
	position:relative;
	background:#fff;
	padding:34px 26px;
	border-radius:12px;
	text-align:center;
	box-shadow:0 10px 30px rgba(0,0,0,0.08);
	border:2px solid transparent;
	transition:
		transform .25s ease,
		box-shadow .25s ease;
	display:flex;
	flex-direction:column;
	height:100%;
	overflow:hidden;
	border:0.5px solid #c48a3a;
}

.bm-pricing-card:hover{
	transform:translateY(-6px);
	box-shadow:
		0 20px 45px rgba(0,0,0,0.18),
		0 0 0 2px rgba(196,138,58,0.45);
}

.bm-pricing-featured{
	z-index:2;
	box-shadow:
		0 25px 60px rgba(0,0,0,0.25),
		0 0 0 2px rgba(196,138,58,0.25);
}

.bm-pricing-featured:hover{
	transform:translateY(-6px) scale(1.03);
}


/* -------------------------------------------------------
TOP SELLER CORNER RIBBON
------------------------------------------------------- */

.bm-ribbon-corner{
	position:absolute;
	top:0;
	left:0;
	width:140px;
	height:140px;
	overflow:hidden;
	z-index:10;
	pointer-events:none;
}

.bm-pricing-ribbon{
	position:absolute;
	top:22px;
	left:-53px;
	width:200px;
	text-align:center;
	background:linear-gradient(
		135deg,
		#e0ad54,
		#c48a3a
	);
	color:#fff;
	font-size:20px;
	font-weight:700;
	padding:7px 0;
	transform:rotate(-45deg);
	box-shadow:
	20px 12px 20px rgba(0,0,0,0.30),
	0 4px 8px rgba(0,0,0,0.18);
}

.bm-pricing-ribbon::after{

	content:"";

	position:absolute;

	left:0;
	right:0;
	top:0;

	height:4px;

background:linear-gradient(
	135deg,
	#e4b15d,
	#c48a3a
	);
	
}

.bm-pricing-ribbon::before{

	content:"";

	position:absolute;

	top:-12px;
	left:-20px;
	right:-20px;

	height:40px;

	background:linear-gradient(
		to bottom,
		rgba(0,0,0,0.18),
		rgba(0,0,0,0.05),
		rgba(0,0,0,0)
	);

	filter:blur(6px);

	z-index:-1;

}

/* -------------------------------------------------------
PLAN TYPE RIBBON
------------------------------------------------------- */

.bm-plan-ribbon{
	position:absolute;
	top:0;
	left:0;
	height:36px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:13px;
	font-weight:600;
	color:#fff;
	z-index:3;
}

.bm-plan-starter{
	background:#777;
	width:25%;
	border-bottom-right-radius:10px;

	box-shadow:6px 8px 18px rgba(0,0,0,0.35);
}


.bm-plan-pro{
	background:#c48a3a;
	width:50%;
	border-bottom-right-radius:10px;
	box-shadow:6px 8px 18px rgba(0,0,0,0.35);

}

.bm-plan-business{
	background:#c48a3a;
	width:75%;
	border-bottom-right-radius:10px;
	box-shadow:6px 8px 18px rgba(0,0,0,0.35);
}

.bm-ribbon-text{
	white-space:nowrap;
}

.bm-pricing-title{
	font-size:20px;
	margin-top:25px;
	margin-bottom:18px;
}

.bm-pricing-subtitle{
	font-size:16px;
	font-weight:400;
	color:#666;
	margin-bottom:18px;
	min-height:52px;
}

.bm-pricing-price{
	margin-bottom:22px;
}

.bm-pricing-features{
	list-style:none;
	margin-bottom:26px;
	flex-grow:1;
}

.bm-pricing-features li{
	margin-bottom:8px;
}

.bm-price-old{
	display:block;
	font-size:16px;
	color:#888;
	margin-top:5px;
	text-decoration:line-through;
}

.bm-price-new{
	display:block;
	font-size:30px;
	font-weight:700;
	color:#3b240f;
	line-height:1.1;
}

.bm-price-period{
	display:block;
	font-size:14px;
	color:#666;
	margin-top:4px;
}

.bm-price-discount{
	display:inline-block;
	background:#e53935;
	color:#fff;
	font-size:12px;
	padding:3px 8px;
	border-radius:4px;
	margin-left:6px;
	vertical-align:middle;
}

.bm-buy-plan{
	margin-top:auto;
	width:100%;
}


/* -------------------------------------------------------
TESTIMONIALS
------------------------------------------------------- */

.bm-testimonials-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:40px;
	margin-top:60px;
}

.bm-testimonial{
	background:#fff;
	padding:30px;
	border-radius:10px;
	box-shadow:0 10px 25px rgba(0,0,0,0.08);
	display:flex;
	flex-direction:column;
	height:100%;
}

.bm-testimonial:hover{
	transform:translateY(-6px);
	box-shadow:
		0 20px 45px rgba(0,0,0,0.18),
		0 0 0 2px rgba(196,138,58,0.25);
}

.bm-testimonial-text{
	flex:1;
	margin-bottom:20px;
}

.bm-testimonial-author strong{
	display:block;
	font-size:15px;
}

.bm-testimonial-author span{
	font-size:13px;
	color:#777;
}


/* -------------------------------------------------------
FOOTER
------------------------------------------------------- */

.bm-footer{
	margin-top:0;
	padding:60px 0 30px;
	position:relative;
	background:#f5f5f5;
}

.bm-footer-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:40px;
	margin-bottom:40px;
}

.bm-footer-col h4{
	margin-bottom:15px;
	font-size:16px;
}

.bm-footer-col ul{
	list-style:none;
}

.bm-footer-col li{
	margin-bottom:8px;
}

.bm-footer-col a{
	text-decoration:none;
	color:#333;
}

.bm-footer-bottom{
	text-align:center;
	font-size:14px;
	color:#777;
	border-top:1px solid #ddd;
	padding-top:20px;
}

.bm-footer::before{
	content:"";
	position:absolute;
	left:50%;
	top:-200px;
	width:900px;
	height:800px;
	transform:translateX(-50%);
	background:radial-gradient(
		circle,
		rgba(196,138,58,0.15) 0%,
		rgba(196,138,58,0.05) 40%,
		transparent 70%
	);
}


/* -------------------------------------------------------
BACK TO TOP
------------------------------------------------------- */

#bm-top{
	position:fixed;
	right:30px;
	bottom:30px;
	width:46px;
	height:46px;
	border:none;
	border-radius:50%;
	background:#c48a3a;
	color:#fff;
	font-size:20px;
	cursor:pointer;
	box-shadow:0 10px 25px rgba(0,0,0,0.2);
	opacity:0;
	visibility:hidden;
	transition:.25s;
}

#bm-top:hover{
	background:#a86f27;
}

#bm-top.active{
	opacity:1;
	visibility:visible;
}


/* -------------------------------------------------------
RESPONSIVE
------------------------------------------------------- */

@media (max-width:900px){

	.bm-hero-grid{
		grid-template-columns:1fr;
		text-align:center;
	}

	.bm-hero-actions{
		justify-content:center;
	}

	.bm-grid-3{
		grid-template-columns:repeat(2,1fr);
	}

	.bm-screenshots-grid{
		grid-template-columns:repeat(2,1fr);
	}

	.bm-pricing-grid{
		grid-template-columns:1fr;
	}

	.bm-testimonials-grid{
		grid-template-columns:repeat(2,1fr);
	}

	.bm-footer-grid{
		grid-template-columns:repeat(2,1fr);
	}
}

@media (max-width:600px){

	.bm-nav-inner{
		flex-direction:column;
		gap:15px;
	}

	.bm-logo img{
		height:34px;
	}

	.bm-menu{
		flex-wrap:wrap;
		justify-content:center;
	}

	.bm-menu a{
		margin:5px 10px;
	}

	.bm-grid-2{
		grid-template-columns:1fr;
	}

	.bm-grid-3{
		grid-template-columns:1fr;
	}

	.bm-screenshots-grid{
		grid-template-columns:1fr;
	}

	.bm-testimonials-grid{
		grid-template-columns:1fr;
	}

	.bm-footer-grid{
		grid-template-columns:1fr;
		text-align:center;
	}

	.bm-section{
		padding:70px 0;
	}
}


.bm-form-help {
	margin: 10px 0 20px;
	padding: 12px 14px;
	background: #f6f7f7;
	border-left: 4px solid #2271b1;
	border-radius: 3px;
	font-size: 13px;
	line-height: 1.4;
	color: #50575e;
}


/* FAQ */

.bm-faq{

	max-width:800px;
	margin:60px auto 0 auto;

}

.bm-faq-item{

	background:#fff;

	border-radius:10px;

	margin-bottom:18px;

	box-shadow:0 8px 25px rgba(0,0,0,0.06);

	overflow:hidden;

	transition:all .25s ease;

}

.bm-faq-item:hover{

	box-shadow:0 12px 35px rgba(0,0,0,0.08);

}


.bm-faq-question{

	width:100%;

	display:flex;
	justify-content:space-between;
	align-items:center;

	padding:22px 26px;

	background:none;
	border:none;

	cursor:pointer;

	font-size:18px;
	font-weight:600;

	text-align:left;

}

.bm-faq-title{

	color:#333;

}

.bm-faq-toggle{

	font-size:26px;
	color:#c48a3a;
	transition:transform .25s ease;

}


.bm-faq-item.active .bm-faq-toggle{

	transform:rotate(45deg);

}


.bm-faq-answer{

	max-height:0;
	overflow:hidden;
	transition:max-height .35s ease;
	padding:0 26px;
	color:#666;
	line-height:1.6;

}

.bm-faq-answer p{

	margin-bottom:20px;

}

/* CTA */

.bm-cta-box {

	text-align: center;
	max-width: 700px;
	margin: 0 auto 40px auto;

}

.bm-cta-actions {

	display: flex;
	gap: 16px;
	justify-content: center;
	margin-top: 24px;

}


/* Trusted */

.bm-trusted {

	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid rgba(0,0,0,0.06);
	text-align: center;

}

.bm-trusted-title {

	font-size: 14px;
	color: #666;
	margin-bottom: 16px;

}

.bm-trusted-logos {

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;

	font-size: 14px;
	color: #777;

}

/* CTA GRID */

.bm-cta-grid {

	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;

	margin-bottom: 40px;

}

.bm-cta-image img {

	max-width: 100%;
	height: auto;

}


/* CTA CONTENT */

.bm-cta-content {

	max-width: 500px;

}

.bm-cta-actions {

	display: flex;
	gap: 16px;
	margin-top: 24px;

}


/* Trusted */

.bm-trusted {

	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid rgba(0,0,0,0.06);
	text-align: center;

}

.bm-trusted-logos {

	display: flex;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;

	font-size: 14px;
	color: #777;

}


/* =========================================================
   CTA
========================================================= */

.bm-cta-grid {

	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;

	margin-bottom: 40px;

}

.bm-cta-image img {

	max-width: 420px;
	width: 100%;
	height: auto;

}

.bm-cta-content {

	max-width: 520px;

}

.bm-cta-actions {

	display: flex;
	gap: 16px;
	margin-top: 24px;

}


/* =========================================================
   TRUSTED
========================================================= */

.bm-trusted {

	margin-top: 40px;
	padding-top: 30px;

	border-top: 1px solid rgba(0,0,0,0.06);

	text-align: center;

}

.bm-trusted-title {

	font-size: 14px;
	color: #666;

	margin-bottom: 16px;

}

.bm-trusted-logos {

	display: flex;
	justify-content: center;
	flex-wrap: wrap;

	gap: 24px;

	font-size: 14px;
	color: #777;

}


/* =========================================================
   FOOTER
========================================================= */

.bm-footer {

	margin-top: 0px;

	padding-top: 60px;
	padding-bottom: 40px;

	background: #f5f3ef;

	border-top: 1px solid rgba(0,0,0,0.08);

}

.bm-footer-grid {

	display: grid;


	width: 100%;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 80px;

}
.bm-footer-grid > div:last-child {

	text-align: right;

}
.bm-footer-grid > div:nth-child(2) {

	text-align: center;

}



/* =========================================================
   FOOTER BOTTOM
========================================================= */

.bm-footer-bottom {

	margin-top: 40px;

	padding-top: 20px;

	border-top: 1px solid rgba(0,0,0,0.08);

	text-align: center;

	font-size: 13px;
	color: #777;

}










/* Setup Plan */

.bm-setup-plan{
text-align:center;
margin-bottom:60px;
}

.bm-setup-plan-meta{
display:flex;
justify-content:center;
gap:40px;
margin-top:20px;
}


/* Setup Grid */

.bm-setup-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:stretch;

}


/* Setup Box */

.bm-setup-box{
background:#fff;
padding:40px;
border-radius:12px;
box-shadow:0 10px 40px rgba(0,0,0,0.06);
height:100%;
display:flex;
flex-direction:column;
}


/* Email */

.bm-setup-user-email{
font-size:14px;
color:#666;
margin-bottom:20px;
}


/* Mobile */

@media (max-width:900px){

.bm-setup-grid{
grid-template-columns:1fr;
}

}

/* Submit Box */

.bm-setup-submit-box{

margin-top:40px;

background:#fff;

padding:30px;

text-align:center;

}


/* großer Button */

.bm-button-large{

padding:16px 40px;

font-size:16px;

}


.bm-setup-intro{
text-align:center;
max-width:700px;
margin:0 auto 40px auto;
color:#666;
}







/* Formular Layout */

.bm-form-row{

	display:grid;

	grid-template-columns:180px 1fr;

	align-items:center;

	margin-bottom:14px;

}


/* Label links */

.bm-form-row label{

text-align:left;

font-size:14px;

color:#444;

}


/* Inputs rechts */

.bm-form-row input,
.bm-form-row select{

	background:#fff;
	border:1px solid #d7d7d7;
	border-radius:6px;

	padding:10px 12px;

	box-shadow:0 2px 4px rgba(0,0,0,0.08);

	transition:all 0.15s ease;
}

.bm-form-row input:hover, select:hover{

	border:1px solid #c48a3a;
	border-radius:6px;
}


/* Zwei Felder nebeneinander */

.bm-form-inline{

	display:grid;
	
	grid-template-columns:120px 1fr;
	
	gap:10px;

}
/* Input Gruppen (z.B. Straße/Nr oder PLZ/Ort) */

.bm-input-group {

	display: flex;
	gap: 10px;
	width: 100%;

}


.bm-input-group input:first-child {

	flex: 4;

}


.bm-input-group input:last-child {

	flex: 1;
	max-width: 110px;

}

/* Straße + Hausnummer */

.bm-input-group-street {

	display: grid;
	grid-template-columns: 1fr 60px;
	gap: 10px;

}


/* PLZ + Ort */

.bm-input-group-city {

	display: grid;
	grid-template-columns: 80px 2fr;
	gap: 10px;

}

.bm-setup-box h3{

	margin-bottom:25px;

}
.bm-form input:focus {

	outline: none;
	border-color: #c48a3a;
	box-shadow: 0 0 0 2px rgba(0,0,0,0.05);

}

.bm-form-name{

	display:grid;

	grid-template-columns:1fr 1fr;

	gap:10px;

}
/* Fehlerbox */

.bm-alert-error{
background: #fff3f2;
border: 1px solid #f3b1aa;
border-left: 5px solid #e5533d;
border-radius: 8px;
padding: 18px 22px;
margin-bottom: 40px;
color: #4a2a28;
position: relative;
}

/* Titel */

.bm-alert-error strong{
display:block;
font-weight:600;
margin-bottom:10px;
}

/* Liste */

.bm-alert-error ul{
margin:0;
padding-left:20px;
}

.bm-alert-error li{
margin:6px 0;
}
#bm-form-errors{
}

/* Grafik unten rechts */

.bm-alert-error::after{
	content: "";
	position: absolute;
	right: 12px;
	bottom: 10px;

	width: 120px;
	height: 120px;

	background-image: url("../images/error-logo.png");
	background-repeat: no-repeat;
	background-size: contain;

	opacity: 0.4;      /* verblasst */
	pointer-events: none;
	
	right:-0px;
	bottom:-0px;
}








/* =========================================================
   SETUP FULLSCREEN LAYOUT
========================================================= */

html, body {
	height: 100%;
}

.bm-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.bm-main {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 40px 20px;
}