/* =========================================================
   BEREINIGTE (zusammengeführte) CSS
   - ohne bodybg.png (Body Hintergrund nur weiß)
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

/* Body (ohne Bild) */
body{
	background: #fff;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	color: #525252;
}

/* =========================================================
   Layout / Struktur
   ========================================================= */

.wrapper{
	box-shadow: 0px 20px 40px -20px rgba(0,0,0,0.4);
}

.wrapper,
#topmenubox .m_inner{
	width: 100%;
	max-width: none;
	margin: 0 auto;
}

.topspacer{ padding-top: 120px; width: 100%; }

/* Header */
.topheader{
	position: relative;
	padding-bottom: 12%;
	width: 100%;
	background: #fff url(img/header.jpg) no-repeat fixed center top;
	background-size: 100% auto, auto;
}

.topheader p{
	bottom: 10%;
	width: 100%;
	position: absolute;
	text-align: center;
	padding: 0 5%;
	font-size: 2.6em;
	line-height: 110%;
	color: #fff;
	text-shadow: 0px 2px 30px #000;
	font-weight: 700;
}

/* Frontpage Parallax */
#topparallax{
	width: 100%;
	position: relative;
	padding-top: 30%;
	background: #fff url(img/parallaxheader.jpg) no-repeat center 0;
	background-size: 100% auto, auto;
}

#topparallax .ptext{
	bottom: 20%;
	width: 100%;
	position: absolute;
	text-align: center;
	padding: 3% 5%;
	background: rgba(0,0,0,0.1);
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

#topparallax .ptext *{
	color: #fff !important;
	text-shadow: 0px 2px 30px #000;
}

#topparallax a.topdown img{ width: 100px; margin-top: 20px; }

/* Contentbox */
.contentbox{ background: #fff; padding: 0; }

/* Box */
.box{
	height: 100%;
	background: #f4f4f4;
	padding: 10px 10px 0 10px;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15), 0 2px 3px 0 rgba(0,0,0,0.1);
	border-radius: 10px;
}

/* Container */
.container{
	margin: 0 auto;
	width: 100%;
	max-width: 1200px;
	padding-top: 30px;
}

/* Main layout */
.mainbox{}

.content{
	width: 73%;
	float: left;
	display: inline;
	margin-left: 0;
}

.usegrid3 .content.contentnarrow{ width: 66%; }

.mainbox .contentwide{
	width: 96%;
	margin: 0 0 0 2%;
}

#rightbox{
	width: 25%;
	float: right;
	display: inline;
}

.usegrid3 #rightbox{ width: 30%; }

.clearcontent{ height: 0; clear: both; }

/* Footer */
.footerbox{
	color: #fff;
	background: #003366;
	padding: 20px 4%;
}

.footerbox a:hover{ 
	color: #6fa50f;
	font-weight: 700;
	text-decoration: none !important;
	}
	
.footerbox p,
.footerbox a{ 
	color: #fff !important;
	text-decoration: none !important;
	}

.footerbox .left{ width: 25%; margin: 0; float: left; }
.footerbox .center{ width: 50%; margin: 10px 0 0 0; float: left; text-align: center; }

.footerbox .footer{
	margin: 0 auto;
	width: 100%;
	max-width: 1200px;
	padding-top: 30px;
	min-height: 320px;
}

.footerbox .footer h3{
	font-size: 1.2em;
	border-bottom: 1px solid #fff;
	padding-bottom: 15px;
	margin-bottom: 20px;
	color: #fff;
}

.footerbox .footer p,
.footerbox .footer a,
.footerbox .footer a:hover{ color: #fff; }

#gototopswitch{ float: right; margin: 0 20px 0 0; }

/* =========================================================
   Topmenü / Headerbar
   ========================================================= */

#topmenubox{
	width: 100%;
	height: 120px;
	position: fixed;
	z-index: 5000;
	top: 0;
	left: 0;
	transition: 0.5s all;
	background-color: #fff;
	border-bottom: 1px solid #479cd4;
}

#topmenubox .m_inner{
	position: relative;
	height: 100%;
	background: #fff;
	max-width: 1200px;
	border-bottom: none !important;
}

#topmenubox a.logo img{
	max-height: 80%;
	max-width: 100%;
	position: absolute;
	left: 2%;
	bottom: 5px;
}

#topmenubox.reduced{ height: 48px; transition: 0.5s all; }

li.search_box_li a{ border: none !important; }

.menuebox{ width: 75%; height: 100%; float: left; position: relative; }
.toggleMobileMenu{ display: none; }
#openrightboxswitch, #closerightboxswitch{ display: none; }

/* =========================================================
   Breadcrumbs
   ========================================================= */

.breadcrumbs{
	height: 30px;
	line-height: 100%;
	margin: 0;
	padding: 3px 0;
	clear: both;
}

.innerbc{ font-size: 14px; margin: 10px 0 0 25%; }

.breadcrumbs .innerbc span{
	background: transparent url(img/bclink.gif) no-repeat;
	padding: 6px 2px 0 12px;
	font-weight: normal;
}

.breadcrumbs .innerbc a{
	padding: 1px;
	border-bottom: 1px dotted #505567;
	text-decoration: none;
}

.breadcrumbs .innerbc a:hover{ border-bottom: 1px solid #505567; }
.breadcrumbs .innerbc .menu-current a{ color: #000; }
.frontpage .breadcrumbs{ display: none; }

/* Prev/Next */
#aprevnext{ display: block; width: 90px; height: 27px; float: right; }
#aprevnext a{ display: block; width: 40px; height: 27px; float: right; opacity: 0.5; border: none; }
#aprevnext a.aprev{ background: url(img/prev.png) no-repeat center top; }
#aprevnext a.anext{ background: url(img/next.png) no-repeat center top; }
#aprevnext a:hover{ opacity: 0.8; }

/* =========================================================
   Navigation (Desktop)
   ========================================================= */

#nav{
	position: absolute;
	right: 0;
	bottom: 0;
	border: 0;
	padding: 0;
}

#nav ul, #nav2 ul{
	list-style: none;
	margin: 0;
	padding: 0;
	width: auto;
	position: relative;
	z-index: 800;
	background: #eee;
}

#nav ul li, #nav2 ul li{ margin: 0; padding: 0; }

#nav ul li{
	float: left;
	display: inline;
	color: #aaa;
	text-align: left;
	font-weight: normal;
}

#nav ul li a{
	display: block;
	font-size: 18px;
	border-right: 1px #ddd solid;
	color: #666;
	text-decoration: none;
	background-repeat: no-repeat;
}

#nav ul li a span{ display: block; padding: 11px 12px 10px 12px; }

#nav ul li a:hover,
#nav li a:focus,
#nav li a:active,
#nav ul li a.active,
#nav a.menu-current,
#nav a.menu-parent{
	color: #fff;
	background: #0066cc;
}

#nav a.menu-current{ font-weight: bold; }

/* 2nd level */
#nav li ul{
	position: absolute;
	right: 10000px;
	width: 200px;
	opacity: 0;
	text-transform: none;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #fff;
	font-size: 13px;
	background: #ddd url(img/glitzi.png) no-repeat right 0;
	box-shadow: 0 10px 10px -4px rgba(0,0,0,0.4);
}

#nav li ul li{ text-align: left; font-weight: normal; line-height: 1.2em; }

#nav li ul li a{
	width: 200px;
	text-align: left;
	height: auto;
	text-shadow: none;
	margin: 0;
	padding: 0;
	color: #333;
	border-top: 1px solid #fff;
	font-weight: normal;
	font-size: 16px;
	background: none;
}

#nav li ul li a span{ display: block; padding: 8px; }

#nav li ul a:hover,
#nav li ul a.menu-current{ text-shadow: 1px 2px 4px #000; }

#nav li ul a.menu-expand{ background: transparent url(img/arr-right.png) no-repeat right 5px; }
#nav li ul a.menu-parent{ background: #cc0000 url(img/arr-right.png) no-repeat right 5px; }

/* show/hide */
#nav li:hover ul,
#nav li a:focus ul,
#nav li.tabselected ul{
	right: -20px;
	opacity: 1;
	transition: 0.5s opacity;
}

#nav li ul ul{ margin-left: -10000px; opacity: 0; transition: 0.5s opacity; }

#nav li:hover ul ul,
#nav li.subMenu ul ul{ margin-left: -10000px; opacity: 0; transition: 0.5s opacity; }

#nav li:hover > ul,
#nav li li:hover > ul{
	opacity: 1;
	margin-left: 0;
	transition: 0.5s opacity;
	z-index: 1000;
}

#nav ul li ul li:hover > ul{ margin-left: -30%; opacity: 0.9; }

/* 3rd level */
#nav li ul li ul{ width: 180px; margin: 10px 0 0 -40%; z-index: 2000; }
#nav li ul li ul li{ width: 100%; }
#nav li ul li ul li a{ width: 100%; }

#nav li{ position: relative; }
#nav ul ul ul{ position: absolute; top: 1px; left: 100%; }

#nav li:hover{ z-index: 1000; white-space: normal; }

/* =========================================================
   Footer menu
   ========================================================= */

#footer_menu{ padding-bottom: 10px; }

#footer_menu a{
	display: inline-block;
	padding: 2px 10px;
	border-right: 1px solid #999;
}

#footer_menu a:first-child{ border-left: 1px solid #999; }
#footer_menu a.menu-current{ font-weight: bold; }

/* =========================================================
   Cookie permission
   ========================================================= */

#cookie_permission{
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9950;
	width: 200px;
	padding: 10px;
	background: #555;
	text-align: center;
	font-size: 0.9em;
	line-height: 120%;
	border-radius: 0 0 0 25px;
	box-shadow: 0 10px 50px 0 rgba(0,0,0,0.2);
}

#cookie_permission p,
#cookie_permission a{ color: #fff; }

#cookie_permission a.cookieaccepted{
	color: #000;
	background: #eeb300;
	display: block;
	padding: 5px;
	border-radius: 15px;
	border: 1px solid #fff;
	font-weight: bold;
}

/* =========================================================
   Colorpicker
   ========================================================= */

#colorpickericon{
	display: block;
	width: 24px;
	height: 24px;
	background: url(img/colorpicker.png) no-repeat;
	z-index: 5000;
	position: absolute;
	top: 230px;
	right: 0;
	cursor: pointer;
}

#colorpicker{
	display: none;
	width: 90px;
	background: #ddd;
	position: absolute;
	top: 100px;
	right: 0;
	z-index: 5000;
	font-size: 12px;
	line-height: 100%;
	box-shadow: 0 20px 50px 0 rgba(0,0,0,0.1);
}

.pickerfield{ width: 100%; height: 40px; float: left; }

.pickerfield input[type="color"]{
	width: 100%;
	height: 20px;
	padding: 0;
	border: 0;
	cursor: pointer;
}

.pickerfield input[type="text"]{
	width: 90%;
	height: 20px;
	padding: 1px 3%;
	border: 1px solid #999;
	cursor: text;
}

a.colpick-button{
	display: block;
	clear: both;
	width: 80%;
	margin: 10px auto;
	padding: 3px;
	background: rgba(255,255,255,0.2);
	text-align: center;
	border: 1px solid #666;
	border-radius: 15px;
	cursor: pointer;
}

#colorpicker-info{
	display: none;
	position: absolute;
	width: 160px;
	padding: 10px;
	top: 0;
	left: -180px;
	background: #eee;
	box-shadow: 0 20px 50px 0 rgba(0,0,0,0.1);
}

/* =========================================================
   Login Box
   ========================================================= */

#showlogin{
	display: block;
	float: left;
	position: relative;
	width: 30px;
	text-align: right;
	margin: 10px 6px 0 0;
}

#login-box{
	position: absolute;
	width: 250px;
	left: 10px;
	top: -10px;
	padding: 5px;
	font-size: 11px;
	z-index: 2000;
	background: #eee;
	box-shadow: 0 5px 20px 0 rgba(0,0,0,0.2);
}

#login-box td{ vertical-align: top; }
#login-box .loginsubmit{ border: 0; }

#login-box .inputfield{
	width: 100px;
	border: 1px solid #c9e8f9;
	padding: 1px;
	line-height: 1em;
}

/* Mobile nav container (hidden desktop) */
#nav2{
	width: 250px;
	height: auto;
	position: absolute;
	left: -300px;
}

.showonmobiles{ display: none; }

/* =========================================================
   Zusätze aus Datei2
   ========================================================= */

#home_balken_rot1{
	background-color: #d00b00;
	padding: 50px 6%;
}

#home_balken_rot1 p,
#home_balken_rot1 ul,
#home_balken_rot1 h3,
#home_balken_rot1 a{ color: #fff; }

#home_balken_rot1 ul li{
	padding-bottom: 0;
	list-style: disc;
}

/* Formulare */
input, select, textarea, pre, code, blockquote{
	border: 1px solid #4a4238;
	background-color: #fff !important;
}

/* miniform */
.miniform td{ vertical-align: middle; }

/* =========================================================
   Responsive
   ========================================================= */

@media screen and (max-width: 1024px){

	.mainbox .contentwide{ width: 96%; margin: 0 0 0 2%; }
	#rightbox{ width: 33%; }

	#topmenubox{ height: 60px !important; }
	#topmenubox #nav{ display: none; }

	.toggleMobileMenu{
		display: block;
		float: right;
		width: 20px;
		height: 50px;
		background: url(img/menuswitch.png) no-repeat top right;
		margin: 10px 4% 0 0;
	}

	.topspacer{ padding-top: 60px; }

	.breadcrumbs{ height: 560px; }

	#nav2{
		width: 250px;
		height: auto;
		position: absolute;
		left: -300px;
		top: 100px;
		z-index: 2000;
		transition: left 1s;
		background: #eee url(img/glitzi.png) no-repeat right 0;
		box-shadow: 0 10px 10px 0 rgba(0,0,0,0.4);
	}

	#nav2 li{ width: 250px; }
	#nav2 li a{
		display: block;
		padding: 12px 0 12px 20px;
		font-size: 18px;
		color: #000;
		text-decoration: none;
		border-bottom: 1px solid #fff;
	}

	#nav2 li li a{ padding-left: 30px; font-size: 16px; }
	#nav2 li li li a{ padding-left: 40px; font-size: 14px; }
	#nav2 li li li li a{ padding-left: 50px; font-size: 13px; }

	#nav2 li ul{ display: none; }
	#nav2 li.menu-parent > ul,
	#nav2 li.menu-current > ul,
	#nav2 li.is_opened > ul{ display: block; }

	#nav2 li a.menu-expand{ background: transparent url(img/arr-down.png) no-repeat left center; }

	#nav2 li a.menu-current{
		color: #fff;
		text-shadow: 1px 2px 4px #000;
	}

	#nav2 ul li a.menu-expand.is_opened,
	#nav2 ul li a.menu-parent{
		font-weight: bold;
		background: #ddd url(img/arr-right.png) no-repeat 2px center;
	}

	#nav2close{
		display: none;
		z-index: 1990;
		position: absolute;
		top: 0;
		width: 100%;
		height: 900px;
		background-image: none;
	}

	.breadcrumbs{ width: 100%; height: auto; }
	.innerbc{ margin: 2px 0 5px 2%; width: 96%; }
	.innerbc span{
		display: block;
		float: left;
		padding: 2px 2px 2px 12px;
		margin: 0 0 5px 0;
	}
	.innerbc b{ display: none; }

	.mobilemenuopen #nav2{ left: 0; }
	.mobilemenuopen #nav2close{ display: block; }

	h1{ font-size: 2.2em; }
	h2{ font-size: 1.8em; }
	h3{ font-size: 1.6em; }
}

@media screen and (min-width: 768px){
	.row{ margin-left: -15px; margin-right: -15px; }

	.grid_1{ width: 8.33333333%; }
	.grid_2{ width: 16.66666667%; }
	.grid_3{ width: 25%; }
	.grid_4{ width: 33.33333333%; }
	.grid_5{ width: 41.66666667%; }
	.grid_6{ width: 50%; }
	.grid_7{ width: 58.33333333%; }
	.grid_8{ width: 66.66666667%; }
	.grid_9{ width: 75%; }
	.grid_10{ width: 83.33333333%; }
	.grid_11{ width: 91.66666667%; }
	.grid_12{ width: 100%; }

	.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6,
	.grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12{
		float: left;
		display: block;
	}
}

@media screen and (max-width: 767px){
	.mainbox, .content, .contentwide, .contentwidenarrow, #rightbox, .main{
		float: none;
		width: 98% !important;
		border-left: none;
		display: block;
	}

	#rightbox{
		border-top: 3px solid #999;
		padding-top: 15px;
		margin-top: 15px;
	}

	#rightbox .inner{ margin: 0; }

	.topheader{
		padding-bottom: 30%;
		background-size: 100% auto, auto;
		background-image: url(img/header-mobile.jpg);
	}

	#topparallax{
		padding-top: 80%;
		background-image: url(img/parallaxheader-mobile.jpg);
	}

	#topparallax .ptext{ bottom: 5%; }
	#topparallax a.topdown{ display: none; }

	h1{ font-size: 2.0em; }
	h2{ font-size: 1.6em; }
	h3{ font-size: 1.4em; }

	#topparallax p{ line-height: 120%; }

	.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6,
	.grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12{
		margin-bottom: 40px;
		position: relative;
		min-height: 1px;
		padding-left: 15px;
		padding-right: 15px;
	}
}

@media screen and (max-width: 480px){
	#topparallax .ptext{ bottom: 0; }
	.topheader p{ font-size: 1.4em; }

	h1{ font-size: 1.8em; }
	h2{ font-size: 1.6em; }
	h3{ font-size: 1.3em; }
}


 /* Anpassung Header Offset für Anker */
 
:root { --header-offset: 50px; }   /* anpassen */

html { scroll-padding-top: var(--header-offset); }

/* alle deine Onepager-Ziele */
[id^="wbce_"] { scroll-margin-top: var(--header-offset); }

@media (max-width: 768px) {
  :root { --header-offset: 50px; }
}


/* Button-Wrapper (dein DIV) */


/* Container wie bei naehshopping */
.ce_hyperlink.button{
  margin: 0 0 12px 0;
}

.button_wrap{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;

	justify-content: center;
	align-items: stretch;
}


/* ================================
   BUTTON 1 - 250PX
   ================================ */

.button_1{
	width: 100%;
	max-width: 250px;
	flex: 1 1 250px;
	position: relative;
	overflow: hidden;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;

	color: #0066cc !important;
	background: #fff;

	border: 3px solid #c8c6c3;

	padding: 1em;

	text-decoration: none !important;
	cursor: pointer;

	transition: color 1s, border-color 1s, background-color 1s;
	z-index: 0;
}

/* Swipe Layer */
.button_1::before{
	content: "";
	position: absolute;

	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;

	width: calc(200% + 4px);

	background-image: linear-gradient(90deg, #0066cc 50%, #fff);

	transform: translateX(-100%);
	transition: transform .48s linear;

	backface-visibility: hidden;
	will-change: transform;

	z-index: -1;
}

/* Hover Fix (WICHTIG: Spezifität + !important gegen Fremd-CSS) */
.button_1:hover,
.button_1:focus-visible{
	background-color: #0066cc !important;
	color: #fff !important;
	border-color: #0066cc !important;
	outline: none;
}

/* Swipe aktiv */
.button_1:hover::before,
.button_1:focus-visible::before{
	transform: translateX(0);
}

/* extra Sicherheit für Textfarbe */
.button_1:hover *,
.button_1:focus-visible *{
	color: #fff !important;
}

/* ================================
   BUTTON 2 - 350PX
   ================================ */

.button_2{
	width: 350px;
	position: relative;
	overflow: hidden;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	font-size: 23px;
	font-weight: 600;
	line-height: 1.2;

	color: #0066cc !important;
	background: #fff;

	border: 3px solid #c8c6c3;

	padding: 1em;

	text-decoration: none;
	cursor: pointer;

	transition: color 1s, border-color 1s, background-color 1s;
	z-index: 0;
}

/* Swipe Layer */
.button_2::before{
	content: "";
	position: absolute;

	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;

	width: calc(200% + 4px);

	background-image: linear-gradient(90deg, #0066cc 50%, #fff);

	transform: translateX(-100%);
	transition: transform .48s linear;

	backface-visibility: hidden;
	will-change: transform;

	z-index: -1;
}

/* Hover Fix (WICHTIG: Spezifität + !important gegen Fremd-CSS) */
.button_2:hover,
.button_2:focus-visible{
	background-color: #0066cc !important;
	color: #fff !important;
	border-color: #0066cc !important;
	outline: none;
}

/* Swipe aktiv */
.button_2:hover::before,
.button_2:focus-visible::before{
	transform: translateX(0);
}

/* extra Sicherheit für Textfarbe */
.button_2:hover *,
.button_2:focus-visible *{
	color: #fff !important;
}
.button_2,
.button_2:hover,
.button_2:focus-visible,
.button_2 a,
.button_2 a:hover,
.button_2 a:focus-visible{
	text-decoration: none !important;
}