/* parioo_tpl – Bootstrap 5 / Joomla 5 (Design 1:1 aus dem Protostar-Template) */
:root { --parioo-link: #413c32; --parioo-brand: #004466; --parioo-yellow: #fedb36; --parioo-dark: #38342b; }

body.site {
	padding: 20px;
	background: url("../images/all_bg.gif") no-repeat scroll #d4d5d1;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #797677;
}
body.site a { color: var(--parioo-link); text-decoration: none; }
body.site a:hover, body.site a:focus { color: var(--parioo-link); text-decoration: underline; }
body.site p { margin: 0 0 10px; }
body.site ul, body.site ol { padding: 0; margin: 0 0 10px 25px; }
body.site li { line-height: 20px; }
body.site img { max-width: 100%; height: auto; vertical-align: middle; }
body.site hr { margin: 20px 0; border: 0; border-top: 1px solid #eee; border-bottom: 1px solid #fff; opacity: 1; }

h1, h2, h3, h4, h5, h6, .site-title {
	font-family: "Open Sans", sans-serif;
	font-weight: 700;
	line-height: 20px;
	margin: 12px 0;
	color: inherit;
}
h1 { font-size: 26px; line-height: 28px; }
h2 { font-size: 36px; line-height: 36px; }
h3 { font-size: 18px; line-height: 20px; }
h4 { font-size: 14px; line-height: 16px; }
h5 { font-size: 13px; line-height: 15px; }
h6 { font-size: 12px; line-height: 14px; }
.page-header { padding-bottom: 8px; margin: 20px 0 30px; border-bottom: 1px solid #eee; }

/* Kopfbereich */
.header { margin: 0 auto 30px; max-width: 1050px; }
.header.startpage {
	width: 1050px;
	height: 616px;
	background: url("../images/header_block.png");
}
.header .brand { color: var(--parioo-brand); margin: 10px 0 0 40px; }
.header .brand:hover { color: #0088cc; text-decoration: none; }
.header .site-title { font-size: 1.6rem; }
.header-search { margin: 10px 20px 0 0; }
.header-search form { margin: 0; }
.header-search input[type="search"], .header-search input[type="text"] {
	width: 171px;
	padding: 4px 14px;
	font-size: 13px;
	line-height: 18px;
	color: #555;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 15px;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.header-search .btn { display: none; }

/* Blasen auf der Startseite */
.bubble-text { float: left; width: 219px; font-size: 10px; line-height: 15px; text-transform: uppercase; color: #fff; }
.bubble-text a, .bubble-text p, .bubble-text h3 { color: inherit; font-size: inherit; line-height: inherit; }
.bubble-text .moduletable > h3 { display: none; }
#design-header { margin: 85px 0 0 60px; }
#ideas-header { margin: 0 0 0 55px; }
#usability-header { margin: 90px 0 0 80px; }
#development-header { margin: 285px 0 0 -75px; color: #000; }
a#start-header {
	display: block;
	left: 920px;
	top: 500px;
	position: relative;
	width: 107px;
	height: 98px;
	background: url("../images/start.png");
	z-index: 99999;
}
a#start-header:hover, a#start-header:focus, a#start-header:active { background: url("../images/start_hover.png"); }

/* Hauptmenü */
.navigation { max-width: 1070px; margin: 0 auto; padding: 0; position: relative; z-index: 10; }
.navigation ul.mod-menu, .navigation ul.menu, .navigation > ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--parioo-dark);
	border-top-left-radius: 30px;
	border-top-right-radius: 20px;
}
.navigation ul.mod-menu > li, .navigation ul.menu > li { position: relative; line-height: 20px; border-right: 1px solid #4d4a42; }
.navigation ul.mod-menu > li:last-child { border-right: 0; }
.navigation ul.mod-menu > li > a, .navigation ul.mod-menu > li > span,
.navigation ul.menu > li > a, .navigation ul.menu > li > span {
	display: block;
	width: 145px;
	margin: 0;
	padding: 20px 0;
	color: #fff;
	text-align: center;
	border-radius: 0;
	text-decoration: none;
}
.navigation ul.mod-menu > li:first-child > a { border-top-left-radius: 30px; }
.navigation ul.mod-menu > li.current > a, .navigation ul.mod-menu > li.active > a,
.navigation ul.mod-menu > li > a:hover, .navigation ul.mod-menu > li > a:focus,
.navigation ul.mod-menu > li.active > span, .navigation ul.mod-menu > li.current > span {
	background: var(--parioo-yellow);
	color: #3c382e;
	text-decoration: none;
}
/* Untermenü (Dropdown) */
.navigation ul.mod-menu__sub {
	display: none;
	position: absolute;
	top: 95%;
	left: 0;
	z-index: 1000;
	min-width: 160px;
	padding: 5px 0;
	margin: 2px 0 0;
	list-style: none;
	background: #fff;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 6px;
	box-shadow: 0 5px 10px rgba(0,0,0,.2);
	background-clip: padding-box;
}
.navigation ul.mod-menu > li:hover > ul.mod-menu__sub,
.navigation ul.mod-menu > li:focus-within > ul.mod-menu__sub { display: block; }
.navigation ul.mod-menu__sub li { margin: 0; line-height: 20px; }
.navigation ul.mod-menu__sub a {
	display: block;
	padding: 3px 20px;
	font-size: 14px;
	line-height: 20px;
	color: #333;
	white-space: nowrap;
	text-decoration: none;
}
.navigation ul.mod-menu__sub a:hover, .navigation ul.mod-menu__sub a:focus,
.navigation ul.mod-menu__sub li.active > a {
	color: #3c382e;
	background: var(--parioo-yellow);
	text-decoration: none;
}

/* Inhalt */
.body .container, .body .container-fluid {
	box-sizing: content-box;
	max-width: 1010px;
	margin: 0 auto;
	padding: 30px;
	background: #fff;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	box-shadow: 0 0 6px rgba(0,0,0,.05);
}
.body .container .row { --bs-gutter-x: 20px; }
.body .container .row > * { padding-left: calc(var(--bs-gutter-x) * .5); padding-right: calc(var(--bs-gutter-x) * .5); }
.well {
	min-height: 20px;
	padding: 19px;
	margin-bottom: 20px;
	background: #f5f5f5;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}
.well h3.page-header { margin-top: 0; }
.breadcrumb, .mod-breadcrumbs { background: transparent; padding: 0; margin: 0 0 10px; }
.mod-breadcrumbs__wrapper ol, ol.mod-breadcrumbs { margin-left: 0; list-style: none; display: flex; flex-wrap: wrap; }
.img_caption, figure.pull-left, figure.pull-right { margin: 0 0 10px; }
.pull-left { float: left; }
.pull-right { float: right; }
.clearfix::after { content: ""; display: table; clear: both; }
.search span.highlight { background: #ffc; font-weight: bold; }

/* Newsfeed (Sidebar) */
.feed h2 { font-size: 24px; }
.feed ul.newsfeed { margin: 0; padding: 0; list-style: none; }
.feed ul.newsfeed tbody tr td:first-child { display: none; }
ul#why-us { margin: 5px 0 25px 15px; }
ul#why-us li { line-height: 27px; }

/* Formulare */
body.site label { display: inline-block; margin-bottom: 5px; }
body.site legend { font-size: 20px; line-height: 36px; color: #333; border-bottom: 1px solid #e5e5e5; margin-bottom: 20px; }
body.site .btn-primary { background: #006dcc; border-color: #0044cc; color: #fff; }
body.site .btn-primary:hover { color: #fff; text-decoration: none; }

/* Footer */
.footer { margin: 60px -20px 0 -20px; background: #c4c5c1; }
.footer .container {
	box-sizing: border-box;
	max-width: none;
	margin: 0 auto;
	padding: 50px 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}
body.site .footer ul { width: 200px; margin: 0 auto; padding: 0; list-style: none; }
.footer ul::after { content: ""; display: table; clear: both; }
.footer ul li { float: left; margin: 0; padding: 10px; }
.footer div#copyright { background: #d4d5d1; text-align: center; padding-top: 10px; }
.footer div#copyright p { margin: 0; }

/* Responsive */
@media (max-width: 979px) {
	.bubble-text, a#start-header { display: none; }
	.header.startpage { width: 100%; height: 100px; background: none; }
	.navigation ul.mod-menu > li > a { width: auto; padding: 15px 18px; }
}
@media (max-width: 767px) {
	body.site { padding: 0; }
	.header.startpage { height: 100px; }
	.header .brand { margin-left: 10px; }
	.footer { margin: 40px 0 0; }
	.navigation ul.mod-menu { border-radius: 0; flex-direction: column; }
	.navigation ul.mod-menu > li { border-right: 0; }
	.navigation ul.mod-menu > li > a { width: auto; text-align: left; padding: 10px 15px; }
	.navigation ul.mod-menu__sub { position: static; display: block; box-shadow: none; border: 0; border-radius: 0; background: #4d4a42; margin: 0; }
	.navigation ul.mod-menu__sub a { color: #fff; }
	.body .container { padding: 20px 15px; }
}

/* Hilfsklassen aus Joomla 3 (Legacy-Module) */
.element-invisible { position: absolute; padding: 0; margin: 0; border: 0; height: 1px; width: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.header-search .search-query { max-width: 171px; }