:root{
	--primary:#ed7328;
	--navy:#434f71;
	--amber:#f19337;

	--bg:#f9fafb;
	--surface:#ffffff;
	--muted:#eef1f5;

	--text:#1f2937;
	--text2:#4b5563;

	--radius:18px;
	--shadow: 0 10px 30px rgba(17, 24, 39, .10);
	--shadow2: 0 6px 18px rgba(17, 24, 39, .08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
	background: var(--bg);
	color: var(--text);
	line-height:1.55;
}

a{color:inherit;text-decoration:none}
.container{width:min(1120px, 92vw); margin:0 auto}

.header{
	position:sticky; top:0; z-index:50;
	background: rgba(249,250,251,.8);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(67,79,113,.10);
}

.nav{
	display:flex; align-items:center; justify-content:space-between;
	padding: 14px 0;
	gap: 12px;
}

.brand{
	display:flex; align-items:center; gap:12px;
	font-weight:700;
	color: var(--navy);
}
.brand img{height:60px; width:auto}


.company { 
	filter: brightness(0) invert(1);
	 max-height: 15px; 
	 padding-left:10px; }

.navlinks{
	display:flex; align-items:center; gap:18px;
	font-weight:600;
	color: var(--navy);
}
.navlinks a{opacity:.88}
.navlinks a:hover{opacity:1}

.cta{
	display:flex; align-items:center; gap:10px;
}

.btn{
	display:inline-flex; align-items:center; justify-content:center;
	padding: 12px 16px;
	border-radius: 999px;
	border:1px solid transparent;
	font-weight:700;
	transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
	cursor:pointer;
	user-select:none;
}
.btn:active{transform: translateY(1px)}
.btn-primary{
	background: var(--primary);
	color:#fff;
	box-shadow: 0 10px 22px rgba(237,115,40,.28);
}
.btn-primary:hover{background: var(--amber); transform: translateY(-1px)}
.btn-ghost{
	background: rgba(67,79,113,.08);
	border-color: rgba(67,79,113,.12);
	color: var(--navy);
}
.btn-ghost:hover{background: rgba(67,79,113,.12); transform: translateY(-1px)}

.hamburger{
	display:none;
	width:44px; height:44px;
	border-radius: 12px;
	border:1px solid rgba(67,79,113,.15);
	background: rgba(255,255,255,.7);
	font-size: 20px;
	color: var(--navy);
}
.hamburger:active,
.hamburger:hover {
	color: var(--primary);
}

.hero{
	position:relative;
	padding: 56px 0 28px;
	overflow:hidden;
}
.hero-grid{
	display:grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 26px;
	align-items:center;
}
@media (max-width: 900px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}
.kicker{
	display:inline-flex; gap:10px; align-items:center;
	padding: 8px 12px;
	background: rgba(241,147,55,.18);
	border:1px solid rgba(241,147,55,.35);
	border-radius:999px;
	color: var(--navy);
	font-weight:700;
	width: fit-content;
}
.dot{
	width:10px;height:10px;border-radius:999px;background: var(--primary);
	box-shadow: 0 0 0 6px rgba(237,115,40,.18);
}
h1{
	margin:14px 0 10px;
	font-size: clamp(34px, 4vw, 54px);
	line-height:1.05;
	color: var(--navy);
}
.lead{
	margin:0 0 18px;
	font-size: 18px;
	color: var(--text2);
	max-width: 52ch;
}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top: 10px}

.hero-card{
	background: var(--surface);
	border:1px solid rgba(67,79,113,.10);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 18px;
	position:relative;
}


.pills{
	display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px;
}
.pill{
	padding: 9px 12px;
	border-radius:999px;
	background: rgba(67,79,113,.07);
	border:1px solid rgba(67,79,113,.12);
	color: var(--navy);
	font-weight:700;
	font-size: 14px;
}

.blob{
	position:absolute; inset:auto;
	filter: blur(0px);
	opacity:.9;
	pointer-events:none;
}
.blob.one{
	width: 520px; height: 520px;
	top: -220px; left: -240px;
	background: radial-gradient(circle at 30% 30%, rgba(237,115,40,.28), transparent 60%),
							radial-gradient(circle at 70% 60%, rgba(241,147,55,.18), transparent 55%);
}
.blob.two{
	width: 520px; height: 520px;
	bottom:-260px; right:-260px;
	background: radial-gradient(circle at 30% 30%, rgba(67,79,113,.22), transparent 60%),
							radial-gradient(circle at 70% 60%, rgba(237,115,40,.14), transparent 55%);
}

.section{padding: 44px 0}
.section.alt{background: var(--muted)}
.section h2{
	margin:0 0 8px;
	color: var(--navy);
	font-size: clamp(24px, 2.4vw, 34px);
}
.section p.sub{
	margin:0 0 18px;
	color: var(--text2);
	max-width: 70ch;
}

.grid-3{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.card{
	background: var(--surface);
	border:1px solid rgba(67,79,113,.10);
	border-radius: var(--radius);
	box-shadow: var(--shadow2);
	padding: 18px;
	transition: transform .14s ease, box-shadow .14s ease;
}
.card:hover{transform: translateY(-3px); box-shadow: var(--shadow)}
.icon{
	width:44px;height:44px;border-radius: 14px;
	display:grid; place-items:center;
	background: rgba(237,115,40,.12);
	border:1px solid rgba(237,115,40,.20);
	color: var(--primary);
	font-weight:900;
	margin-bottom: 12px;
	font-size: 24px;
}
.card h3{margin:0 0 6px; color: var(--navy)}
.card p{margin:0; color: var(--text2)}

.split{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	align-items:start;
}
.list{
	display:grid;
	gap: 10px;
}
.li{
	display:flex; gap: 10px;
	background: rgba(255,255,255,.7);
	border:1px solid rgba(67,79,113,.10);
	padding: 12px 14px;
	border-radius: 14px;
}
.check{
	width:25px;height:25px;border-radius:999px;
	background: rgba(237,115,40,.18);
	border:1px solid rgba(237,115,40,.30);
	display:grid; place-items:center;
	color: var(--primary);
	font-weight:900;
	flex: 0 0 auto;
}
.small{font-size:14px; color: var(--text2)}

ul{font-size:14px; color: var(--text2)}

.wave{
	height:36px;
	background: linear-gradient(to right, rgba(237,115,40,.10), rgba(67,79,113,.08), rgba(241,147,55,.10));
	border-top:1px solid rgba(67,79,113,.08);
	border-bottom:1px solid rgba(67,79,113,.08);
	clip-path: polygon(0 50%, 8% 60%, 18% 40%, 28% 62%, 40% 38%, 52% 60%, 62% 40%, 74% 62%, 86% 38%, 100% 55%, 100% 100%, 0 100%);
}

.footer{
	background: var(--navy);
	color: rgba(255,255,255,.9);
	padding: 36px 0;
}
.footer a{color: rgba(255,255,255,.9); text-decoration:underline; text-decoration-color: rgba(255,255,255,.35)}
.footer-grid{
	display:grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 16px;
}
.footer p{margin: 8px 0; color: rgba(255,255,255,.75)}

.badge{
	display:inline-flex; align-items:center; gap:8px;
	padding: 8px 12px;
	border-radius: 999px;
	border:1px solid rgba(255,255,255,.18);
	background: rgba(255,255,255,.08);
	font-weight:700;
}

/* Page header */
.pagehead{
	padding: 34px 0 10px;
}
.pagehead h1{margin:0 0 8px}
.breadcrumbs{color: var(--text2); font-weight:600}
.breadcrumbs a{opacity:.9}
.breadcrumbs a:hover{opacity:1; text-decoration:underline}

/* Contact form */
form{
	background: var(--surface);
	border:1px solid rgba(67,79,113,.10);
	border-radius: var(--radius);
	box-shadow: var(--shadow2);
	padding: 18px;
}
.field{display:grid; gap:6px; margin-bottom: 12px}
label{font-weight:700; color: var(--navy)}
input, textarea{
	padding: 12px 12px;
	border-radius: 14px;
	border:1px solid rgba(67,79,113,.18);
	outline: none;
	font: inherit;
	background: #fff;
}
input:focus, textarea:focus{
	border-color: rgba(237,115,40,.6);
	box-shadow: 0 0 0 4px rgba(237,115,40,.14);
}
textarea{min-height: 120px; resize: vertical}

@media (max-width: 1100px){
	.navlinks{display:none}
	.hamburger{display:inline-flex; align-items:center; justify-content:center}
	.nav.open .navlinks{
		display:flex; flex-direction:column; align-items:flex-start;
		position:absolute; left: 4vw; right: 4vw; top: 64px;
		background: rgba(255,255,255,.92);
		border:1px solid rgba(67,79,113,.14);
		padding: 14px;
		border-radius: 16px;
		box-shadow: var(--shadow);
	}
	.footer-grid{
		display:grid;
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

@media (max-width: 920px){
	.hero-grid{grid-template-columns: 1fr}
	.grid-3{grid-template-columns: 1fr}
	.split{grid-template-columns: 1fr}
	.navlinks{display:none}
	.hamburger{display:inline-flex; align-items:center; justify-content:center}
	.nav.open .navlinks{
		display:flex; flex-direction:column; align-items:flex-start;
		position:absolute; left: 4vw; right: 4vw; top: 64px;
		background: rgba(255,255,255,.92);
		border:1px solid rgba(67,79,113,.14);
		padding: 14px;
		border-radius: 16px;
		box-shadow: var(--shadow);
	}
}

/* Mockup in Hero */

.mock{
	height: 340px;
	border-radius: 16px;
	background:
		radial-gradient(1200px 600px at 20% 0%, rgba(237,115,40,.20), transparent 55%),
		radial-gradient(800px 500px at 90% 30%, rgba(67,79,113,.18), transparent 55%),
		linear-gradient(135deg, rgba(67,79,113,.10), rgba(241,147,55,.10));
		
	border: 1px dashed rgba(67,79,113,.25);
	display:flex; align-items: end; justify-content:center;
	color: rgba(67,79,113,.8);
	font-weight:800;
}

.mock-image{
	height: auto;
	max-height: 340px;
	display: block;
	border-radius: 16px; 
}

/* Mobile Optimierung */
@media (max-width: 1100px){
	.mock-image{
		max-width: 420px;
		transform: rotate(0deg);
	}
}

.mock-image{ max-height: 360px; }

@media (max-width: 900px) {
	.hero-card {
		max-width: 100%;
	}

	.mock-image {
		width: 100%;
		height: auto;
		max-width: 420px;
		margin: 0 auto;
		display: block;
	}
}

/* Lightpick Firebon Theme */
.lightpick__day.is-start-date,
.lightpick__day.is-end-date,
.lightpick__day.is-in-range {
	background: var(--primary) !important;
}

.lightpick__day.is-today {
	border-color: var(--primary);
}

.lightpick__day:hover {
	background: var(--amber);
	color: #fff;
}

/* Radio Cards */
.radio-group{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.radio-card{
	display:flex;
	gap:12px;
	align-items:flex-start;
	padding: 14px 16px;
	border-radius: 14px;
	border:1px solid rgba(67,79,113,.18);
	background:#fff;
	cursor:pointer;
	transition: border .15s ease, box-shadow .15s ease, transform .1s ease;
}

.radio-card input{
	margin-top:4px;
}

.radio-card small{
	display:block;
	color: var(--text2);
}

.radio-card:hover{
	border-color: rgba(237,115,40,.6);
	box-shadow: 0 0 0 4px rgba(237,115,40,.08);
}

.radio-card input:checked + span,
.radio-card:has(input:checked){
	border-color: rgba(237,115,40,.8);
	box-shadow: 0 0 0 4px rgba(237,115,40,.14);
}

@media (max-width: 640px){
	.radio-group{
		grid-template-columns: 1fr;
	}
}

/* Stepper */
.step { display:none; }
.step.is-active { display:block; }

.step-actions{
	display:flex;
	gap:10px;
	margin-top: 16px;
}

.stepper{
	background: rgba(255,255,255,.7);
	border:1px solid rgba(67,79,113,.10);
	border-radius: 16px;
	padding: 12px 14px;
	margin-bottom: 14px;
}

.stepper-bar{
	height:10px;
	background: rgba(67,79,113,.10);
	border-radius:999px;
	overflow:hidden;
}

.stepper-bar-fill{
	height:100%;
	width: 16%;
	background: var(--primary);
	border-radius:999px;
	transition: width .2s ease;
}

.stepper-label{
	margin-top:8px;
	font-weight:800;
	color: var(--navy);
}

/* Select im Input-Stil */
select.select-like{
	/*width:100%;
	padding:12px 12px;
	border-radius:14px;
	border:1px solid rgba(67,79,113,.18);
	background:#fff;
	font: inherit;*/
	padding-right: 38px;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	
	background-image:
		linear-gradient(45deg, transparent 50%, var(--muted) 50%),
		linear-gradient(135deg, var(--muted) 50%, transparent 50%);
	background-position:
		calc(100% - 18px) 50%,
		calc(100% - 12px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat:no-repeat;
}
select.select-like::-ms-expand{ display:none; }
select.select-like:focus{
	border-color: rgba(237,115,40,.6);
	box-shadow: 0 0 0 4px rgba(237,115,40,.14);
	outline:none;
}

.price-table{
	width:100%;
	border-collapse: collapse;
	margin-top: 10px;
}
.price-table td{
	padding: 8px 0;
	border-bottom: 1px solid rgba(67,79,113,.10);
	vertical-align: top;
}
.price-table td.price{
	text-align:right;
	font-weight:800;
	color: var(--navy);
	white-space: nowrap;
}
.price-table .muted{
	color: var(--text2);
	font-weight:700;
	border-bottom: none;
}
.price-table tr.no-border td{
	border-bottom:none;
}

/* Dezenter Hinweis */
.hint{
	margin-top: 8px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px dashed rgba(67,79,113,.18);
	background: rgba(67,79,113,.04);
	color: var(--text2);
	font-size: 13px;
}
.hint a{
	color: var(--navy);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid rgba(67,79,113,.25);
}
.hint a:hover{
	border-bottom-color: rgba(237,115,40,.7);
}

.label-mobile {
	display: none;
}

@media (max-width: 600px) {
	.label-desktop {
		display: none;
	}

	.label-mobile {
		display: inline;
	}
}

@media (max-width: 600px) {
	.btn-request {
		padding: 12px 18px;
	}
}

/* Beispiel: falls du bisher nur input.formInput hast */
input.formInput,
select.formInput {
	width: 100%;
	height: 44px;
	padding: 10px 12px;
	border: 1px solid #d6d6d6;
	border-radius: 12px;
	background: #fff;
	font-size: 16px;
	box-sizing: border-box;
}

select.formInput{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px; /* Platz für Pfeil */
}