/* __________ Template Fonts & Colors  __________  */
@font-face {
    font-family: 'Open Sans';font-style: normal;font-weight: 300;
    src: url('../fonts/OpenSans-Light.eot') format('eot'),
			url('../fonts/OpenSans-Light.woff2') format('woff2'),	 
			url('../fonts/OpenSans-Light.ttf') format('ttf');}
@font-face {
    font-family: 'Open Sans';font-style: normal;font-weight: 400;
    src: url('../fonts/OpenSans-Regular.eot') format('eot'),
			url('../fonts/OpenSans-Regular.woff2') format('woff2'),	 
			url('../fonts/OpenSans-Regular.ttf') format('ttf');}
@font-face {
    font-family: 'Open Sans';font-style: normal;font-weight: 700;
    src: url('../fonts/OpenSans-Bold.eot') format('eot'),
			url('../fonts/OpenSans-Bold.woff2') format('woff2'),
	      url('../fonts/OpenSans-Bold.ttf') format('ttf');}
@font-face {
    font-family: 'Open Sans';font-style: italic;font-weight: 400;
    src: url('../fonts/OpenSans-Italic.ttf') format('ttf');}			
 
  :root {
--colPrime: #555;  --colBurgu: #b62929;
--blk100: #000;  --blk090: #222;  --blk080: #444;  --blk070: #555;  --blk060: #777; --blk050: #999;
--wht100: #fff;  --wht090: #f4f4f4;  --wht080: #ececec;  --wht070: #dcdcdc;  --wht060: #cccccc; --wht050: #b3b3b3;
--linkUp: #14e;  --linkHv: #039;
--btnPriUp: #16e;  --btnPriHv: #15c;  --btnSecUp: #fc0;  --btnSecHv: #333;  --btn--bdr-rd: 5px;
--boxBdr: #888;  --boxBrr: 6px;  
}
 
/* =====================  NORMALIZE  ==========================
 * SHORT VERSION, Reset for all browsers
 * Copyright Website-Bauen.de  http://www.website-bauen.de
 * ============================================================ */
* {margin: 0;padding: 0;vertical-align: top; cursor: default}
*, *:before, *:after {box-sizing: border-box}
html {font-family: 'Open Sans', sans-serif;font-size: 108%;font-weight: 400}
html {color: var(--colPrime);line-height: 1.4;background: var(--wht100)}
body {height: 99%;width: 100%;max-width: 1920px;margin: 0 auto;text-align: left;clear: both;background: var(--wht100)}
header, nav, main, footer, section {width: 100%;display: block;clear: both}
div, article, aside, details, figcaption, figure, form, hgroup, summary {display: block}
audio, canvas, video{display: inline-block} audio:not([controls]) {display: none;height: 0}
span {display: inline-block}  p span{display: inline}
b, strong {font-weight: 700;} u {text-decoration: underline;} em {font-style: italic;font-weight: 400} small {font-size: 90%}
sub {font-size: 76%;line-height: 0;position: relative;vertical-align: baseline;bottom: -4px}
sup {font-size: 76%;line-height: 0;position: relative;vertical-align: baseline;top: -4px}
abbr[title] {border: 0} dfn {font-style: italic}
q {quotes: none} q:before, q:after {content: "";content: none}
ul, ol{margin: 2px 4px 4px 18px;padding: 0} ul ul, ol ol {margin: 0 0 0 14px}
ul li, ol li {margin: 1px 0;padding: 0 1px 1px 1px;line-height: 1.33}
ul li {list-style-type: disc} ul li li, ol li li {list-style-type: circle}
dl{margin: 10px 0} dd{margin: 0 0 0 12px}
nav li, nav li li {list-style: none;list-style-image: none} nav li a, nav li a {text-decoration: none}
table {border-collapse: collapse;border-spacing: 0;margin: 2px 0 16px 0}
table th {padding: 2px 3px;font-size: 1.1rem;color: var(--blk040);text-align: center;font-weight: 700}
table tr td, table tr td p {padding: 2px 3px;text-align: left}
table ul li{line-height: 1.3;list-style-type: circle} table ul li ul, table ul li ul li {display: none}
pre {white-space: pre;white-space: pre-wrap;word-wrap: break-word}
pre {display: block;position: relative;width: 97%;max-width: 980px;border: 1px solid var(--blk080)}
pre {margin: 6px auto 10px auto;padding: 15px;overflow-x: scroll;background: var(--wht090)}
code, kbd, samp {font-family: 'courier new', monospace;font-size: 0.75rem;color: #222}
blockquote {position: relative;width: 97%;max-width: 720px;margin: 6px auto 10px auto;padding: 6px 6px 3px 36px}
blockquote {border: 1px solid var(--blk070);border-radius: 6px;background: var(--wht070);color: var(--blk070)}
blockquote:before {content:"\201C";font-style: italic;font-family: Georgia, serif}
blockquote:before {font-size: 52px;left: 6px;line-height: 1;position: absolute;top: 0}
blockquote, blockquote p {font-family: Georgia, Arial, serif !important;font-size: 0.9rem;margin: 0 auto;padding: 8px 0 4px 32px}
blockquote cite {display: block;font-size: 1rem;font-style: normal;line-height: 1;text-align: right;padding-right: 30px;border: 0}
blockquote cite {font-family:'Book Antiqua', Palatino, Papyrus, Georgia, serif;font-style: italic;text-decoration: none}
input, textarea, label, button {font-family: Arial, Verdana, sans-serif;font-size: 0.9rem}
select {font-family: Arial, Verdana, sans-serif;font-size: 0.8rem}
input {padding: 4px;min-height: 28px;width: auto;cursor: text}
input, textarea, select {outline: 0;background: var(--wht090);border-radius: 3px;border: 1px solid var(--blk070)}
input:hover, textarea:hover, select:hover {outline: 0;background: var(--wht100);border: 1px solid var(--blk090);cursor: text}
input[type="button"], input[type="reset"], input[type="submit"] {border: 0;cursor: pointer;-webkit-appearance: button}
input[disabled] {cursor: not-allowed}
input[type="search"] {-webkit-appearance: textfield}
input[type="checkbox"], input[type="radio"] {width: 20px;height: 12px;text-align: center;margin: 0 4px}
input[type="checkbox"], input[type="radio"] {box-sizing: border-box;padding: 0}
textarea {overflow: auto;cursor: text;vertical-align: top;resize: none}
label {margin: 6px 2px 0 2px;text-align: left}
fieldset {margin: 0 2px;padding: 8px;border: 0}
legend {font-size: 22px;padding: 0 6px;margin: 4px;white-space: normal}
select {min-height: 28px;background: var(--wht090);border-radius: 0;border: 1px solid var(--blk080)}
select option {margin: 0;padding: 4px 2px 2px 2px;font-size: 13px;color: var(--blk090)}
button {cursor: pointer;-webkit-appearance: button}
iframe {margin: 8px 0;border: none;background: transparent}
[hidden] {display: none}
img, img a, a img {height: auto;max-width: 100%;border: 0;background-size: 100%}
h1, h2, h3, h4, h5, h6 {text-align: left}
h1 {font-size: 1.9rem; padding: 20px 0 0 0; color: #333333;font-weight: 300}
h2 {font-size: 1.7rem; padding: 20px 0 0 0; color: #333333;font-weight: 300}
h3 {font-size: 1.5rem; padding: 20px 0 0 0; color: #444444;font-weight: 400}
h4 {font-size: 1.2rem; padding: 18px 0 0 0; color: #444444;font-weight: 400}
h5 {font-size: 1.1rem; padding: 16px 0 0 0; color: #b62929;font-weight: 700}
h6 {font-size: 1.0rem; padding: 16px 0 0 0; color: #b62929;font-weight: 700}
p  {text-align: justify;padding: 0 0 1rem 0}


/* ========================================================================
 * TEMPLATE > STYLE-CSS for: www.buergerverein-wettelbrunn.de
 * Copyright Website-Bauen.de  https://www.website-bauen.de
 * ======================================================================== */
p strong, span strong, li strong {color: var(--blk060)}
p.lead {font-size: 1.1rem;color: var(--blk070)}
p.indent {display: block;margin: 0 0 0 16px}
p.small, span.small {padding: 8px 0 4px 0;font-size: 0.8rem}
li .small {padding: 3px 2px 0 2px;font-size: 0.8rem}
li , li p, table p {text-align: left}
a, a strong, a:link {color: var(--linkUp);cursor: pointer;text-decoration: underline}
a:hover, a:focus {color: var(--linkHv);text-decoration: underline}
a, a:link:hover, li a, a img, a:hover, li a:hover, a:hover img {cursor: pointer} 
hr {width: 86%;height: 1px;margin: 14px auto;border: 0;clear: both;background: var(--wht060);clear: both}
hr.wh-black {height: 1px;width: 90%;border: 0;background: #fcfcfc;
		background: linear-gradient(to right,  #fcfcfc 0%,#7c7c7c 30%,#7c7c7c 70%,#fcfcfc 100%)}
span.star{color: #e20}
.row {max-width: 1920px;margin: 0 auto}
.row:before {display: table;content: " "}
.row:after {display: table;content: " "; clear: both}
.row.row1188 {max-width: 1188px;padding: 0 4px}
.row.rowGrey {background: #363636}
.row.rowBlack {background: #1d1d1d}
.clear {height: 0;width: 100%;clear: both}
.clearfix:before {display: table;content: " "}
.clearfix:after {display: table;content:" ";clear: both}
.left {text-align: left} .right {text-align: right} .center {text-align: center}
.img-lft {display: inline-block;float: left;margin: 0 16px 6px 4px}
.img-rgt {display: inline-block;float: right;margin: 0 4px 6px 16px}
.img-ctr {float: none;position: relative;margin: 6px auto}
.img-inline {display: inline-block;width: 360px;height: 240px;margin: 6px}
.img-desc {display: block;margin: 0 0 8px 8px;font-size: 0.9rem;font-style: italic}
.vbot {vertical-align: baseline} .vtop {vertical-align: top}
.space20 {height: 20px} .space40 {height: 40px}
.sm-only, .md-only {display: none;height: 0;margin: 0;padding: 0} 
.md-lg-only, .lg-only {display: block}
.visually-hidden {display: none}
table.tbl-light,    .table-bordered {border: 1px solid var(--blk050);background: var(--wht090)} 
table.tbl-light th, .table-bordered th {border-right: 1px solid var(--blk050)} 
table.tbl-light td, .table-bordered td {border: 1px solid var(--blk000)}
table.tbl-dark {border: 1px solid var(--blk060);background: var(--wht060)}
table.tbl-dark th {border-right: 1px solid var(--wht060);color: var(--blk080)}
table.tbl-dark td {border: 1px solid var(--wht060);color: var(--blk080)}
table.striped,    .table-striped {border: 1px solid var(--blk050);background: var(--wht090)}
table.striped th, .table-striped th {border-right: 1px solid var(--blk050);background: var(--wht090)}
table.striped td, .table-striped td {border: 1px solid var(--blk050)}
table.striped tr:nth-child(odd),  .table-striped tr:nth-child(odd) { background-color: var(--wht070)}
table.striped tr:nth-child(even), .table-striped tr:nth-child(even) {background-color: var(--wht090)}
@media screen and (min-width: 1440px) {body {box-shadow: 1px 3px 6px 4px #bbb} }
@media screen and (max-width: 767px) {
	html {font-size: 100%}
	.img-lft, .img-rgt, .img-rgt-mb20, .img-rgt-mb40 {display: block;float: none;margin: 6px auto;text-align: center} 
	.sm-md-only, .card-sm-md-only, .md-only, .card.md-only {display: block;height: auto} 
	.md-lg-only, .card-md-lg-only {display: block; height: auto}
	.lg-only, .card.lg-only {display: none;height: 0} }
@media screen and (max-width: 599px) {
	html {font-size: 94%}
	.sm-hide {display: none;visibility: hidden}
	.sm-md-only, .card.sm-md-only {display: block;height: auto} 
	.md-only, .card.md-only, .md-lg-only, .card.md-lg-only {display: none;height: 0;margin: 0;padding: 0}	}
@media screen and (max-width: 399px) {
	body {min-width: 319px !important;overflow-x: hidden !important} }

header, main, footer {width: 100%;height: auto;clear: both}
header {max-width: 1520px;margin: 4px auto 0 auto;padding: 10px 4px 0 4px}							
#hdrLft {float: left;margin: 0 -80px 10px 0;text-align: left;width: 300px;height: 190px} 
#hdrRgt {float: right;width: 66%;height: auto;margin: 0;padding: 10px 0 8px 2px;text-align: right}
 #logo {width: 300px;height: 190px}
 #logo a {display: block;width: 100%;height:100%}
 #logo img {width: 290px;height:auto}
 a span.brand {padding: 24px 0 0 2px;z-index: 600}
 a span.brand {font-size: 1.2rem;font-weight: 700;color: #0676a1}
 a span.brand:hover, #logo img:hover {text-decoration: none;cursor: pointer}
#hdrRgtBot {width: 99%;height: auto;margin-top: 86px;min-height: 10px}
@media screen and (max-width: 919px) {
	#hdrLft {width: 228px;height: 141px}
	#hdrRgt {width: 70%}
	#hdrRgtBot {margin-top: 72px} }	
@media screen and (max-width: 767px) {
	header {padding: 4px 2px}
	#hdrLft {float: none;display: block;margin: 4px auto;width: 72%;text-align: center}
	#hdrRgt {float: none;display: block;margin: -24px auto 4px auto;width: 100%;height: auto;text-align: center;border: 0}
	#logo {margin: 0 auto} }

nav {text-align: center;margin-bottom: 10px}
.navToggler {display: none;height: 0}
.menu-container, .menu-container.navClosed {display: block} 
ul.main-nav {font-family: Arial, sans-serif;margin: 0;padding: 0}
ul.main-nav {display: table;width: 100%;max-width: 800px;text-align: center;margin: 0;padding: 0}
ul.main-nav li {list-style: none;list-style-image: none;display: inline-block;text-align: center}
ul.main-nav li {float: none;display: table-cell;white-space: nowrap;margin: 0;padding: 0;outline: none}
ul.main-nav li {border-right: 0} 
 /* fix joomla-6, media-css */ ul.main-nav button {display:none;visibility: hidden;height: 0;width: 0;padding: 0}
:where(.main-nav .mod-menu__sub[aria-hidden="true"]) {display: block} /* end j6-fix ... do not delete these 2 lines !!! */
ul.main-nav li a, li.divider span, li span.nav-header {font-size: 1.1rem;line-height: 1.3;font-weight: normal}	
ul.main-nav li a, li.divider span, li span.nav-header {display: block;position: relative;margin: 0;padding: 9px 10px 8px 9px}
ul.main-nav li a:first-child {padding-left: 2px} /* only if there is no vissible border */
ul.main-nav li a, li.divider span, li span.nav-header {text-decoration: none;outline: none}
ul.main-nav li a .ardw {display: none;width: 0}
ul.main-nav li {}        ul.main-nav li a {color: var(--blk070)}
ul.main-nav li:hover {}  ul.main-nav li:hover a {color: var(--blk100)}
ul.main-nav li.active {} ul.main-nav li.active a {color: var(--colBurgu);text-decoration: none}
ul.main-nav li ul {visibility: hidden;position: absolute;z-index: 900;height: 0}
ul.main-nav li:hover ul {visibility: visible;height: auto;width: 232px;margin: -10px 0 0 0;padding: 8px 0 12px 8px}
ul.main-nav li:hover ul {background: var(--wht100);box-shadow: 1px 2px 4px 2px var(--wht070)}
ul.main-nav li:last-child ul {width: 210px}
ul.main-nav li:nth-child(6) ul {display: none;visibility:hidden;height:0;width: 0}
ul.main-nav li ul li {float: none;display: block;margin: 0;padding: 0;border: 0;text-align: left}
ul.main-nav li.active ul li.active {}
ul.main-nav li ul li a {display: block;font-size: 0.9rem;margin: 0;padding: 4px 4px 4px 10px}
ul.main-nav li ul li a {text-decoration: none;background: none;outline: none}
ul.main-nav li ul li a, ul.main-nav li:hover ul li a,
ul.main-nav li.active ul li a {color: var(--blk080)}
ul.main-nav li.active:hover ul li a {color: var(--blk080)}
ul.main-nav li.active ul li.active a {color: var(--blk100);text-decoration: underline}
ul.main-nav li ul li ul, ul.main-nav li:hover ul li ul {display: none;visibility:hidden;height:0;width: 0}
@media screen and (max-width: 1379px) {ul.main-nav li:last-child ul {right: 12px} }
@media screen and (max-width: 919px) {ul.main-nav li:last-child ul {right: 11px}
	ul.main-nav li a, li.divider span, li span.nav-header, ul.main-nav li ul li a {font-size: 0.9rem} }
@media screen and (max-width: 767px) { /* Jquery_Drop-Down (click-action) */
	.navToggler {display: block;float:right;width: 36px;height: 32px;margin: -30px 6px 0 6px;outline: none;}
	.navToggler {font-size: 32px;line-height: 0.96;text-align: center;cursor: pointer;outline: none}
	.navToggler {color: var(--wht100);background: var(--btnPriUp);border: 1px solid #fff;border-radius: 6px}
	.navToggler:hover {background: var(--btnPriHv)}
	ul.main-nav {display: block;height: auto;width: 460px}
	ul.main-nav {margin: 8px auto 6px auto;padding: 2px 0 0 4px;text-align: left;z-index: 999}
	ul.main-nav {border: 1px solid var(--blk050);border-radius: 4px;background: var(--wht080)}		
	ul.main-nav li {display: block;position: relative;width: 100%;margin: 0}
	ul.main-nav li {text-align: left;padding-left: 6px;border: 0;border-bottom: 1px solid var(--wht070)}
	ul.main-nav li:last-child {border: 0;margin: 0}
	ul.main-nav li a {width: 85%;padding: 10px;font-size: 1.3rem;text-decoration: none}
	ul.main-nav li:hover ul {display: none;background: none;border: 0} ul.main-nav li:hover ul li {display: none}
	ul.main-nav li.subOpen ul,    ul.main-nav li.subOpen:hover ul    {visibility: visible;display: block;position: relative;border: 0;box-shadow: none}
	ul.main-nav li.subOpen ul,    ul.main-nav li.subOpen:hover ul    {width: 240px;height: auto;margin: 0 0 0 10%;padding: 0 3px 3px 3px}
	ul.main-nav li.subOpen ul li, ul.main-nav li.subOpen:hover ul li {display: block;margin: 4px 0;border: 0;background: none} 	
	ul.main-nav li.subOpen ul li a {font-size: 1rem;font-weight: normal;margin: 1px 0;padding: 2px 2px 2px 10px}
	/* fix joomla-6, media-css */ :where(.main-nav .mod-menu__sub[aria-hidden="true"]) {display: none}/* end j6-fix ... do not delete this line !!! */	
	ul.main-nav li a span.ardw {display: block;position: absolute;top: 6px;right: -46px;width: 34px;height: 34px;padding: 6px 0}
	ul.main-nav li a span.ardw {pointer-events: none !important;text-decoration: none;font-size: 16px;color: var(--wht090);text-align: center}
	ul.main-nav li a span.ardw {background: var(--btnPriUp);border-radius: 50%;}
	ul.main-nav li a span.ardw:before {content: 'v'; pointer-events: none !important}
	ul.main-nav li a:hover, ul.main-nav li a span.ardw:hover {cursor: pointer} }
@media screen and (max-width: 599px) {
	ul.main-nav {width: 300px;padding: 8px 0;text-align: left}
	ul.main-nav li a {width: 80%;padding: 10px 2px 10px 6px}
	ul.main-nav li.subOpen ul,    ul.main-nav li.subOpen:hover ul {margin: 0 0 0 8px}
	ul.main-nav li a span.ardw {right: -50px} }

main {max-width: 1920px;margin: 0 auto;padding: 4px 0/*;border: 1px solid green*/}
main .vStretch {min-height: 49vh}
#contents.oneCol {margin: -20px 0 0 0}
#contents.twoCol {float: left;width: 100%;margin: 4px 0;border-right: 250px solid transparent}
#rightCol {float: right;width: 240px;height: auto;margin: 4px 0 0 -244px;padding: 2px 0 18px 0;text-align: center}
#theComponent {min-height: 300px;padding: 0 10px 20px 10px;clear: both} 
@media screen and (max-width: 839px) {	
	#contents.twoCol {display: block;padding: 0;border: 0;clear: both}
	#theComponent {padding: 0 4px 24px 4px}
	#rightCol {float: none;display: block;width: 99%;margin: 4px auto;clear: both} }
@media screen and (max-width: 599px) {
	main .vStretch {min-height: 25vh}
  #theComponent {min-height: 200px}
  p {text-align: left}
	.img-lft, .img-rgt {display: block;float: none;margin: 6px auto;text-align: center}
	.sm-hide, .row.sm-hide {display: none;visibility: hidden}
	#theComponent {padding: 4px 2px 14px 2px} }
@media screen and (max-width: 479px) {
	.xsm-hide {display: none;visibility: hidden} }

footer {max-width: 1920px;margin: 30px auto 0 auto;padding: 10px 4px 0 4px;color: #fff;background: #1d1d1d}		
.ftrBox-outer {width: 100%;height: auto;clear: both}  
.ftrBox  {display: inline-block;height: auto}
 .ftrLft {width: 28%;max-width: 320px;						 margin: 8px 0 8px -2px; text-align: left}
 .ftrCtr {width: 28%;max-width: 260px;						 margin: 8px 11%;			 text-align: center}
 .ftrRgt {width: 28%;max-width: 320px;min-width: 274px;margin: 8px -2px 8px 0; text-align: center}
.ftrAdr-outer {float:right;margin: 8px auto 0 auto;text-align: left}
span.adrLine4, span.adrLine5 {display: block}
span.adrLine4, span.adrLine5 {height: 36px;padding: 2px 0 8px 30px;font-size: 14px;text-align: left}
span.adrLine4 a, span.adrLine5 a {color: var(--wht080);text-decoration: none}
span.adrLine4 a:hover, span.adrLine5 a:hover {color: var(--wht100);text-decoration: underline}
span.adrLine4 {background: url(../img/icon_call-eee.png) top left no-repeat}
span.adrLine5 {background: url(../img/icon_mail-eee.png) top left no-repeat}
.ftrNetw {float: right;clear: both;width: 244px;margin: 4px 0;padding: 14px 0 6px 0;text-align: right}
 .NetwFB, .NetwIG, .NetwYT, .NetwTX, .NetwPR, .NetwLI {display: inline-block;height: 34px;width: 34px;margin: 0 10px 2px 0}
 .NetwFB, .NetwIG, .NetwYT, .NetwTX, .NetwPR, .NetwLI {border: 2px solid var(--wht060);border-radius: 4px;text-align: right}
 .NetwFB:hover, .NetwIG:hover, .NetwYT:hover, .NetwTW:hover, .NetwPR:hover, .NetwLI:hover  {border: 2px solid var(--wht100);cursor: pointer}
 .NetwFB {background: url(../img/social_fb.png) top center no-repeat}
 .NetwIG {background: url(../img/social_ig.png) top center no-repeat}
 .NetwYT {background: url(../img/social_yt.png) top center no-repeat}
 .NetwTX {background: url(../img/social_tx.png) top center no-repeat}
 .NetwPR {background: url(../img/social_pr.png) top center no-repeat}
 .NetwLI {background: url(../img/social_li.png) top center no-repeat}
#copyright {font-size: 15px;margin:0 auto;padding: 8px 0 0 0}
#scrollBtn {display: none;position: fixed;bottom: 88px;right: 20px;padding: 7px;z-index: 99}
#scrollBtn {border: 1px solid transparent;border-radius: 8px;outline: none;background-color: var(--btnPriUp)}
#scrollBtn {width: 40px;height: 36px;font-size: 14px;color: var(--wht100);text-align: center;cursor: pointer}
#scrollBtn:hover {background-color: var(--btnPriHv);color: var(--wht100);text-decoration: none}
@media screen and (max-width: 1188px){.ftrCtr {margin: 8px 6%} }
@media screen and (max-width: 920px){ .ftrCtr {margin: 8px 3%} }
@media screen and (max-width: 767px){
	.ftrBox {display: block;position: relative;margin: 8px auto;width: 274px}
	.ftrCtr {max-width: 274px}
	.ftrAdr-outer, .ftrNetw {float: none;margin: 20px auto}
	span.adrLine4, span.adrLine5 {text-align: left}
	.ftrNetw {text-align: center;margin: 4px auto} }


/* ========================================================================
 * Additional HTML-Styles for www.buergerverein-wettelbrunn.de
 * Copyright Website-Bauen.de  https://www.website-bauen.de
 * ======================================================================== */
/* Two-Boxes inline, add centered diff around all this */
.twoBox-outer {margin: 0 -4px;overflow-x: hidden}
.twoBox {border: 1px solid var(--wht050);background: var(--wht090);overflow-x: hidden}
.twoBox {display:inline-block;width: 40%;min-height: 160px;padding: 6px 0}
.twoBox h3 {font-size: 18px;padding: 8px 0 10px 0;text-align: center}
.twoBox p {font-size: 13px;padding: 8px 12px;text-align: left;line-height: 1.66}
.twoBox ul {margin-left: 12px;font-size: 13px;text-align: left}
.twoBox ul li {font-size: 13px;text-align: left;list-style-type: circle}
.twoBox ul li li, .twoBox ul li p {display: none}
.twoBox img, .twoBox img.img-lft, .twoBox img.img-rgt, .twoBox img.img-ctr {display: block;margin: 3px -0 4px 0}
.twoBox.lft {margin: 16px 4% 10px 0}
.twoBox.rgt {margin: 16px 0 10px 4%}

/* Three-Boxes inline, add centered diff around all this  */
.threeBox-outer {margin: 0 -16px;overflow-x: hidden}
.threeBox {border: 1px solid var(--wht050);background: var(--wht090);overflow-x: hidden}
.threeBox {display:inline-block;width: 30%;min-height: 160px;padding: 6px 0}
.threeBox h3{font-size: 16px;padding: 8px 0 10px 0;text-align: center}
.threeBox p, p.teaserP {font-size: 13px;padding: 8px 8px;text-align: left;line-height: 1.6}
.threeBox ul {margin-left: 12px;font-size: 13px;text-align: left}
.threeBox ul li {font-size: 13px;text-align: left;list-style-type: circle}
.threeBox ul li li, .threeBox ul li p {display: none}
.threeBox img, .threeBox img.img-lft, .threeBox img.img-rgt, .threeBox img.img-ctr {display: block;margin: 3px 0 4px 0}
.threeBox.lft {margin: 16px 0 10px -8px}
.threeBox.ctr {margin: 16px 2.4% 10px 2.4%;position: relative}
.threeBox.rgt {margin: 16px -8px 10px 0}	
@media screen and (max-width: 767px) { 
	.twoBox img.img-lft, .threeBox img.img-lft {display: inline-block;float: left;margin: 0 6px 4px 0}
	.twoBox img.img-rgt, .threeBox img.img-rgt {display: inline-block;float: right;margin: 0 0 4px 6px}
	.twoBox-outer, .threeBox-outer {margin: 8px auto}
	.twoBox.lft, .twoBox.rgt {display: block;position: relative;width: 100%;max-width: 639px;margin: 12px auto;padding: 10px}
	.threeBox.lft, .threeBox.ctr, .threeBox.rgt {display: block;position: relative;width: 100%;max-width: 639px;min-height: 160px}
	.threeBox.lft, .threeBox.ctr, .threeBox.rgt {margin: 12px auto;padding: 10px;clear: both}
	.twoBox.lft, .twoBox.lft {display: block;width: 100%;max-width: 639px;margin: 12px auto}
	.twoBox.rgt, .twoBox.rgt {display: block;width: 100%;max-width: 639px;margin: 12px auto} }
@media screen and (max-width: 599px) {
	.twoBox.lft, .twoBox.rgt, .threeBox.lft, .threeBox.ctr, .threeBox.rgt {padding: 6px}
	.twoBox img.img-lft, .threeBox img.img-lft {display: block;float: none;margin: 4px auto}
	.twoBox img.img-rgt, .threeBox img.img-rgt {display: block;float: none;margin: 4px auto} }


/* ========================================================================
 * JOOMLA > STYLE-CSS for: www.buergerverein-wettelbrunn.de
 * Copyright Website-Bauen.de  https://www.website-bauen.de
 * ======================================================================== */
.plain{display: block;width: 100%;border: 0;border-radius:0;margin: 0;text-align: left}
.mainFull, .mainComp {height: auto;margin: 8px 0 4px 0;padding: 0;text-align: center;clear: both}
.mainFull .card, .mainComp .card {margin: 4px 3.5% 16px 3.5%}
.rowGrey .mainFull .card {margin: 24px 3.5px 24px 3.5px}
.card {display: inline-block;height: auto;width: 232px;padding: 2px 4px 2px 7px;background: var(--wht080)}
.card {border: 1px solid var(--boxBdr);border-radius: var(--boxBrr)}
.card {font-family: Arial, sans-serif;font-size: 13px;text-align: center;color: var(--colPrime)}
.card img {max-width: 220px;height: auto;margin: 4px auto}
.card label.element-invisible {display: none}
.card h3 {margin: -6px -5px 6px -8px;padding: 10px 2px;z-index: 50}
.card h3 {font-size: 15px;line-height: 1;font-weight: 700;text-align: center;color: var(--wht100)}
.card h3 {border-radius: 8px 8px 0 0;background: #363636}
.card p, .card p strong {font-size: 13px;line-height: 1.33;margin: 0 4px 6px 4px;padding: 0;text-align: left;color: var(--colPrime)}
.card ul {text-align: left;margin: 2px;padding: 0}
.card li, form .form-horizontal ul li {list-style: none;text-align: left;margin: 0;padding: 2px 0}
.card a, .card a img {border: 0;text-decoration: none}
.card a:hover, .card li a:hover span{text-decoration: underline}
.card a img:hover {text-decoration: none}
.card ul.mod-list li {list-style-type: circle;margin-left: 15px;font-size: 14px}
.card li span.float-end, .card ul li span.badge {float: right;width: 50%;max-width: 170px;margin-right: 4px}
.card li span.float-end, .card ul li span.badge {text-align: left;clear: both;overflow-x: hidden !important}
.card.btn.btn-primary, .card button.btn.btn-secondary {width: 148px;margin: 6px auto}
#rightCol .card {margin: 8px auto 16px auto;text-align: left}
@media screen and (max-width: 1180px){
	.mainFull .card, .mainComp .card {margin: 4px 7px 16px 7px}
	.rowGrey .mainFull .card {margin: 24px 7px 24px 7px} }
@media screen and (max-width: 839px){
	#rightCol .card {display: inline-block;margin: 4px 7px 16px 7px}
	.md-only,    .card.md-only {   display: none;height: 0}
	.sm-only,    .card.sm-only {   display: none;height: 0}
	.sm-md-only, .card.sm-md-only {display: none;height: 0} }
@media screen and (max-width: 767px){
	.card, .mainComp .card {display: inline-block;margin: 4px 16px 16px 16px}
	.lg-only,    .card.lg-only {    display: none;height: 0;visibility: hidden}
	.md-only,    .card.md-only {   display: block;height: auto}
	.sm-md-only, .card.sm-md-only {display: block;height: auto} }
@media screen and (max-width: 639px){
	#rightCol .card, .mainFull .card, .mainComp .card,
	.rowGrey .mainFull .card {display: block;position: relative;margin: 20px auto}
	.md-lg-only, .card.md-lg-only {display: none;height: 0;visibility: hidden}
	.md-only,    .card.md-only {   display: none;height: 0;visibility: hidden}
	.sm-only,    .card.sm-only {  display: block;height: auto} }

/* ____________ Modules WITH SUFFIX _____________________*/
.card.nbdr {border: 0} .card.nbdr h3 {margin: -4px -4px 6px -5px}
.card.nbrr {border-radius: 0} .card.nbrr h3 {margin: -4px -4px 6px -5px;border-radius: 0}
.card.nbgd {background: none} .card.nbdr h3 {}
.card.full {width: 96%;margin: 10px auto;border: 0;border-radius: 0;background: none}
.card.full img {display: block;height: auto;width: 100%;margin: 0 auto}
.card.full.wbdr {border: 1px solid var(--boxBdr)} 
.card.dark {background: #363636;border: 1px solid transparent;border-radius: 6px} 
.card.dark h3{color: var(--wht070);text-shadow: none}
.card.dark p, .card.dark p span {color: var(--wht090)} .card.dark p strong {color:  var(--wht070)}
.card.dark a {color: var(--wht080);text-decoration: underline;}.card.dark a:hover {color: var(--wht100);text-decoration: underline}
.card.light {background: var(--wht080)} 
.card.light h3 {margin: -4px -4px 6px -5px;background: var(--wht080);color: var(--blk080);text-shadow: none}  
.card.path {display: block;width: 99%;background: none;border: 0;border-radius:0;margin: -4px 0 0 0;text-align: left}
.path .mod-breadcrumbs {border-top: 1px solid var(--wht060);border-bottom: 1px solid var(--wht060);overflow-x: hidden}
.path .mod-breadcrumbs h3 {display: none;visibility: hidden}
.path .breadcrumb {width: 100%;height: auto;margin: 8px 0;padding: 8px 2px 8px 0;overflow: hidden}
.path .breadcrumb {font-size: 14px;text-align: left}
.path .breadcrumb li {list-style: none;display: inline;margin: 0;padding: 2px 0 8px 0;color: var(--blk090)}
.path .breadcrumb li:last-child {color: var(--linkUp)}
.path .breadcrumb li a {background: url(../img/arrow-rgt_org14.png) center right no-repeat}
.path .breadcrumb li a {padding: 0 18px 0 2px;text-decoration: none;color: var(--linkUp)}
.path .breadcrumb li a span:hover {text-decoration: underline;cursor: pointer}
.card .menu-rgt {margin-bottom: 8px}
.card .menu-rgt li.current a {text-decoration: underline}

 /* SEARCH-MODULE (no-siffix) displayed vertical with button. needs to be first in css */
.form-search {min-height: 56px}
.form-search label {display: none;height: 0}
.form-search input {width: 144px}
.form-search span.visually-hidden {display: none;height: 0}
.form-search button.btn {width: 146px;margin: 6px auto 0 auto}
.form-search .icon-search {background: none}
.form-search .mod-finder__advanced {display: none;height: 0}

/* SEARCH-MODULE => add suffix: _searchHorz  <= displayed horizontaly WITH IMAGE => in header ONLY ! */
.searchHorz {float: right;display: inline-block;width: auto;margin-right: 8%;padding: 2px;text-align: right}
.searchHorz {background: var(--wht100);border: 0;border-radius: 0;}
.searchHorz .form-search {min-height: 32px;width: 190px;clear: both}
.searchHorz .form-search input {float: left;display: inline-block;height: 28px;width: 156px;margin: 2px}
.searchHorz .form-search input {border: 1px solid var(--blk050);border-radius: 0;background: none}
.searchHorz .form-search label {display: none;height: 0}
.searchHorz .form-search button.btn-primary {float: right;display: inline-block;height: 18px;width: 30px}
.searchHorz .form-search button.btn-primary {margin: 2px 2px 0 -10px;padding: 0;font-size: 0;box-shadow: none;overflow: hidden}
.searchHorz .form-search button.btn-primary {background: var(--wht100);border: 1px solid var(--blk050);border-left: 0;border-radius: 0}
.searchHorz .form-search span.icon-search {display: block;width: 20px;height: 18px;margin: 0;padding: 0}
.searchHorz .form-search span.icon-search {background: url(../img/icon_search_blk18.png) center right no-repeat;cursor: pointer}
.searchHorz .form-search .mod-finder__advanced {display: none;height: 0}
 /* if someone puts this module in another position => add additional suffix: " noFloat" */
  .searchHorz.noFloat .form-search {float: none;display: inline-block;width: 240px;min-height: 56px;margin: 4px 12px 16px 0}

 /* FOOTER-MENU => add module-suffix: " ftrMenu" +++ add menuclass-suffix: "ftr-nav" */
.ftrMenu {margin: 0;text-align: left;background: none;border: 0}
.ftrMenu ul.ftr-nav {margin: 0;padding: 0}
.ftrMenu ul.ftr-nav li {list-style: none;list-style-image: none;display: block}
.ftrMenu ul.ftr-nav li {margin: 4px 2px;padding: 0}
.ftrMenu ul.ftr-nav li a {position: relative;padding: 2px 6px 0 2px;font-size: 15px;line-height: 1.7;outline: none}
.ftrMenu ul.ftr-nav li a {color: var(--wht070);text-decoration: none}
.ftrMenu ul.ftr-nav li a:hover {color: var(--wht100);text-decoration: underline}
.ftrMenu ul.ftr-nav li.active a {text-decoration: underline;cursor: default}
.ftrMenu ul.ftr-nav ul, ul.ftr-nav ul ul {display: none;visibility: hidden;height: 0}

@media screen and (max-width: 839px){
	.searchHorz.noFloat {margin: 4px 16px 16px 16px} }
@media screen and (max-width: 639px){
	.searchHorz.noFloat {display: block;margin: 4px auto 16px auto} 
    .card.path {display: none;height: 0;margin: -12px 0} }
@media screen and (max-width: 767px){
	.searchHorz {margin-right: 4px}
	.mainFull {display: block;clear: both;width: 100%;margin: 4px auto} }

/* _______________ Modules without suffix _____________ */
.mod-stats.list-group li.list-group-item span {width: 144px;max-width: 144px;overflow-x: hidden !important}
.mod-whosonline,   .mod-whosonline-disabled  {min-height: 56px}
.mod-whosonline p, .mod-whosonline-disabled p  {width: 134px;margin: 0 auto;padding: 12px 0 0 0;text-align: center}
.mod-randomimage {min-height: 56px}
.mod-randomimage img {max-width: 214px;height: auto;margin: 4px auto}
.mod-custom {min-height: 56px}
.mod-custom p {margin: 0;padding: 2px 4px 10px 4px;text-align: left} 
form.mod-login {margin: 0;padding: 1px 0 2px 0;background: var(--wht090)}
form.mod-login li {font-size: 11px;line-height: 11px;margin: 3px 0 0 0}
form.mod-login li {list-style: none;list-style-image: none;display: block}
form.mod-login .userdata {margin: -4px 0 0 0;padding: 0;text-align: left}
form.mod-login .userdata li a {font-size: 11px}
form.mod-login .form-group {margin: 6px 0 1px 6px}
form.mod-login .form-group label {font-size: 12px;line-height: 1.15}
form.mod-login .form-group input {width: 160px;margin: 1px 0 1px 8px}
form.mod-login .form-group .form-check {margin-top: 8px;}
form.mod-login .form-group .form-check label {display: inline-block;margin: 10px 0 0 4px}
form.mod-login .form-group .form-check input {display: inline-block;max-width: 20px;vertical-align: middle;margin-bottom: 3px}
form.mod-login .mod-login__submit {display: block;width: 96%;text-align: center;padding-right: 6px}
button.btn.btn-secondary.input-password-toggle {float: right;width: 28px;height: 28px;margin: 2px 6px 4px 0;padding: 0 4px;background: var(--linkUp)}
.icon-eye, .icon-eye-slash  {width: 18px;height: 18px;margin: 0;background: url(../img/icon_eye-wht18.png) center left no-repeat}
form.mod-login-logout {margin: 0;padding: 4px 4px 8px 4px}
.mod-tagspopular {min-height: 56px}
.mod-tagspopular .alert {padding-top: 12px}
.mod-tagspopular .visually-hidden  {display: none;height: 0}
ul.mod-tagssimilar {min-height: 52px}
.tagscloud, .tagspopular {padding-bottom: 10px}
.tagscloud a.tag-name, .tagspopular a {
	font-size: 13px !important;margin: 6px;padding: 3px 5px;text-align: center;
	color: var(--linkUp);background: var(--wht080);border: 1px solid var(--boxBdr);border-radius: var(--boxBrr)}
.tag-category {}
.tag-category .com-tags-tags__filter.btn-group {margin: 6px 0 8px 0;padding: 4px 6px;border: 1px solid var(--boxBdr)}
.tag-category .com-tags-tags__filter label {vertical-align: middle}
.tag-category .com-tags-tags__filter button {max-width: 100px}
.tag-category .btn-group.float-end {display: none}
.tag-category  ul.list-group li {list-style: none;list-style-image: none}
.com-content-archive fieldset {max-width: 392px;margin: 12px 0; padding: 18px 8px 14px 8px}
.com-content-archive .filters label {margin: 0 16px 0 12px}
.com-content-archive .filters input {margin: 0 0 16px 2px}
.com-content-archive .filters span {margin: 0 0 0 10px}
.com-content-archive .filters span {margin: 0 0 0 10px}
.com-content-archive .filters button {margin: 0 0 0 12px}
.com-content-archive__items .row0, .com-content-archive__items .row1, .com-content-archive__items .row2, 
.com-content-archive__items .row3, .com-content-archive__items .row4,.com-content-archive__items .row5, 
.com-content-archive__items .row6, .com-content-archive__items .row7, .com-content-archive__items .row8, 
.com-content-archive__items .row9 {margin-bottom: 10px;padding: 10px 0;border-bottom: 2px dashed var(--blk050)}
@media screen and (max-width: 479px){.com-content-archive .filters button {display: block;margin: 18px 0 0 18px} }

/* __________________Buttons ________________ */
a.btn, .btn {position: relative;min-height: 28px;width: auto;max-width: 240px;margin: 4px auto;padding: 5px 6px}
a.btn, .btn {font-size: 14px;font-weight: 700;text-align: center;overflow-x: hidden;text-decoration: none}
a.btn, .btn {color: var(--blk090);border: 1px solid;border-color: var(--blk080);border-radius: 5px;cursor: pointer}
a.btn:hover, .btn:hover {color: var(--blk090);text-decoration: none}
a.btn-primary, .btn-primary {color: var(--wht080);background: var(--btnPriUp);box-shadow: 0 3px 6px #777}
a.btn-primary:hover, .btn-primary:hover {color: var(--wht100);background: var(--btnPriHv);border-color: var(--blk090)}
a.btn-secondary, .btn-secondary {color: var(--blk090);background: var(--btnSecUp);border-color: transparent}
a.btn-secondary:hover, .btn-secondary:hover {color: var(--wht070);background: var(--btnSecHv);border-color: transparent}
a.btn-mini, .btn-mini {position: relative;height: 22px;min-width: 40px;max-width: 80px;margin: 1px 6px;padding: 2px 3px 3px 3px}
a.btn-mini, .btn-mini {font-size: 11px;font-weight: 400;border: 0;border-radius: 3px}
a.btn-mini, .btn-mini {color: var(--blk100);background: var(--wht060)}
a.btn-mini:hover, .btn-mini:hover {color: var(--wht100);background: var(--blk070)}
a.btn-info {color: #fff;background: #1177ff} a.btn-info:hover {color: #111;background: #1177ff}
a.btn-success {color: #fff;background: #237c0c} a.btn-success:hover {color: #111;background: #26a306}
a.btn-check {color: #fff;background: #5d636b} a.btn-check:hover {color: #111;background: #7d838b}
a.btn-warning {color: #fff;background: #fb6b17} a.btn-warning:hover {color: #111;background: #fb6b17}
a.btn-danger {color: #fff;background: #e31818} a.btn-danger:hover {color: #111;background: #e31818}
.btn:disabled, .btn.disabled, fieldset:disabled .btn {cursor: not-allowed;opacity: 0.6}
a:not([href]):not([class]), a:not([href]):not([class]):hover {color: #444;text-decoration: none}
  .typoBtns a {margin-right: 16px !important} /* display on Typography-page */
  .card button.btn.btn-secondary.w-100.plg_system_webauthn_login_button {max-width: 74px !important;font-size: 11px;font-weight: 400}

/* READ-MORE ( styled for text-only, not button, else deactivate this to get button */
.readmore {margin: -9px 0 0 9px;padding: 0}
.readmore a.btn {display: inline-block;width: auto;margin: 0 0 0 8px;padding: 0}
.readmore a.btn {text-align: left;font-weight: 700;background: none;border: 0;color: var(--linkUp)}
.readmore a.btn:hover {text-decoration: underline;background: none;border: 0;color: var(--linkHv)}
   /* for arrows before text,  de/activate following line */
   .readmore .icon-chevron-right:before {content: ">> ";font-size: 13px;color: var(--linkUp)}

.btn-group {display: inline-block;height: 48px;margin: 6px 6px 10px 0;padding: 4px 6px}
.btn-group {border: 0}
.btn-group input#filter-search, .btn-group select {margin-top: 5px}
	/* NAV-TABS,  (NOT-TESTED !) */
	#contents.row ul.nav-tabs li {list-style: none;list-style-image: none;display: block;margin: -4px 12px;padding: 0}
	#contents.row ul.nav-tabs li a{font-size: 12px;padding: 0}

/* __________ PAGE-Display (specific Joomla pages, NOT Modules)  */
form#member-registration, form#user-registration {max-width: 316px;margin: 24px 0 10px 0;padding: 8px 4px}
form#member-registration, form#user-registration {border: 1px solid var(--boxBdr);border-radius: var(--boxBrr)}
form#member-registration input, form#user-registration input {width: 220px}
form#member-registration .btn.btn-primary, form#user-registration .btn.btn-primary {width: 220px;margin: -6px 0 10px 10px}
form#member-registration .btn.input-password-toggle {margin-top: -2px}
.com-users-login {margin: 24px 0 10px 0}
.com-users-login fieldset {max-width: 316px;margin-bottom: 4px;padding: 0 6px 6px 6px}
.com-users-login fieldset {border: 1px solid var(--boxBdr);border-radius: var(--boxBrr)}
.com-users-login .btn.input-password-toggle {margin: -1px 0 0 2px}
.com-users-login__options a {display: block;padding-left: 12px}
.profile fieldset, .profile-edit fieldset {max-width: 316px;margin-bottom: 24px;padding: 0 6px 6px 6px}
.profile fieldset, .profile-edit fieldset {border: 1px solid var(--boxBdr);border-radius: var(--boxBrr)}
.profile fieldset legend, .profile-edit fieldset legend {font-weight: 700}
.profile fieldset dt, .profile-edit fieldset dt {display: inline-block;margin: 6px 2px 4px 5px;width: 40%}
.profile fieldset dd, .profile-edit fieldset dd {display: inline-block;width: 50%;margin: 8px 0 6px 2px;font-size: 12px}
.bg-light {background: var(--wht090);padding: 6px;color: var(--blk100) !important}
.profile-edit .btn.input-password-toggle {margin-top: -2px} 
.profile-edit h2 span {font-size: 16px;font-weight: 700;padding: 14px 0 0 0}
.profile-edit a.btn.btn-sm {border: 0;font-weight: 400}
.finder fieldset {max-width: 479px;margin: 6px auto;padding: 8px 4px;font-family: Arial, sans-serif}
.finder fieldset .card {width: 96%;}
.finder fieldset legend {font-weight: 700}
.finder fieldset.word {padding-left: 3%}
.finder fieldset.word label.me-2 {display: none;height: 0;}
.finder fieldset.word input {width: 290px}
.finder fieldset.word .awesomplete span.visually-hidden {display: block;width: 100%;font-size: 11px}
.finder fieldset.word button[type="submit"] {margin: 0 0 12px 8px}
.finder fieldset.word button.btn-secondary{margin: 0;display: none}
.finder fieldset.collapse p {padding: 0 2px 2px 2px;text-align: left;font-size: 13px}
.finder fieldset.collapse .control-label {display: inline-block;width: 160px; margin-left: 3%}
.finder fieldset.collapse .controls  {display: inline-block;padding-left: 15px}
.finder fieldset.collapse .controls select  {width: 120px}
.com-finder__results {margin-top: 24px}
.com-finder__results .com-finder__explained p {font-size: 17px;text-align: center}
.com-finder__results .com-finder__explained p a {text-decoration: none}
.com-finder__results p.result__title {padding: 6px 0;font-weight: 700}
.com-finder__results a cite {display: none; height: 0}
.com-finder__results .result__date {font-style: italic;padding-right: 12px;color: var(--colPrime)}
.com-finder__results ul.result__taxonomy {margin: 0;padding: 0}
.com-finder__results ul.result__taxonomy li {margin: 8px 0 -4px 6px;padding: 0 6px;color: var(--blk090)}
.com-finder__results ul li {list-style: none;list-style-image: none}
.highlight, mark {background-color: #adf;color: #000;padding: 0 3px}
.list-unstyled {padding-left: 0;list-style: none}
.list-inline {padding-left: 0;list-style: none}
.list-inline-item {display: inline-block}
.list-inline-item:not(:last-child) {margin-right: 12px}
.fields-container li {list-style: none}
form {font-family: Arial,sans-serif;text-align: left}

   /* CONTROL_GRUOPS  (NOT_TESTED !) */
	.control-group {margin: 8px 0 8px 6px}
	.controls label.radio {margin-right: 9px}
	.controls a.btn {margin: 4px 0;padding: 0 4px}
	.control-label .required .form-control-feedback {padding: 2px;color: red;background: var(--wht100)}


/* _____________ HEADINGs, ICONs, TAGs, INFOs  (ON-PAGE if switched on) */
.page-header {display: block;margin: 0 0 8px 0;padding: 4px 0 6px 0;line-height: 1.2}
.page-header h1 {color: #b62929}
.page-header h2 {color: #b62929;font-size: 1.5rem;padding-top: 0;margin-top: 26px;border-top: 1px solid #b62929} 
.page-header h1 a, .page-header h1:hover a,
.page-header h2 a, .page-header h2:hover a {color: #b62929;text-decoration: none;}
.blog .page-header h1 {}
.item-page .page-header h1 {}
.item-page .page-header h2 {}
.blog h1, .blog h2, .blog h3 {padding-top: 6px}
.blog .blog-items .page-header h2 {margin-top: 20px}
a.dropdown-toggle, span.icon-cog, span.caret {display: none;visibility: hidden}
.item-page .icons a {font-size: 0}
.item-page .icons a .icon-edit, a.jmodedit {float: right;width: 34px;height: 34px;margin: 8px;z-index: 800;font-size: 0}
.item-page .icons a .icon-edit, a.jmodedit {background: url(../img/icon_edit32.png) top center no-repeat;border: 1px solid var(--boxBdr)}
.item-page .icons a .icon-edit:hover, 
 a.jmodedit:hover {background:  url(../img/icon_edit32.png) top center no-repeat;border: 1px solid var(--boxBdr)}
.btn.dropdown-toggle {display: none;height: 0;visibility: hidden}
dl.article-info {margin: 0 8px 0 0;font-size: 12px;text-decoration: none}
dt.article-info-term {display: none;height: 0;visibility: hidden}
dl.article-info dd, dl.article-info dd a {padding-bottom: 4px;color: var(--blk060)}
dl.article-info .icon-fw {display: none}
dl.article-info .hits .icon-eye {display: none}

.content_rating {margin: 0 4px 0 15px}
.content_rating p {margin: 0;padding: 0 4px 2px 20px;font-size: 12px;color: var(--blk060)}
.content_rating ul {list-style: none;padding-inline-start: 0;margin-bottom: 0.5em}
.content_rating .vote-star, .content_rating .vote-star-empty, .content_rating .vote-star-half {display: inline-block}
.content_rating .vote-star svg, .content_rating .vote-star-half svg {width: 1em;height: 1em;fill: #fd7e14}
.content_rating .vote-star-empty svg {width: 1em;height: 1em;fill: #d3d3d3}
.content_rating .vote-star-half {margin-inline-start: -1em}
form.form-inline {} /* bottom-part  NOTE: There might be other apps with same name, dont style this here */
form.form-inline span{margin: -4px 0 30px 28px;padding: 4px 6px;text-align: left;font-size: 12px}
form.form-inline span label {display: block;text-align: left;font-size: 12px;color: var(--colPrime)}
form.form-inline span select {display: block;width: 119px;margin: 4px auto 9px auto;padding: 0 3px;border: 1px solid var(--boxBdr)}
form.form-inline span input {display: block;margin: 4px 0}
ul.tags {margin: 2px 4px 4px 36px;padding: 0}
ul.tags li {list-style: none;list-style-image: none;display: inline-block;margin: 0;padding: 0}
ul.tags li a {padding: 1px 8px}/* Button = see BUTTONS (btn.info) */

/* ___________ CATEGORY, CATEGORIES, LISTS, BLOG ___________*/
.blog-item {min-height: 180px;padding: 6px;text-align: left;clear: both}
.blog-items.items-leading {display: block;margin: 0 0 20px 0}
.blog-items.columns-2 {position: relative;margin: 10px auto;text-align: center}
.blog-items.columns-2 .blog-item {display: inline-block;width: 48%;margin: 10px 12px 10px 0;padding: 4px 12px 8px 10px;text-align: left}
.blog-items.columns-2 .blog-item p {text-align: left}
.blog-items.columns-3 .blog-item, .blog-items.columns-4 .blog-item, .blog-items.columns-5 .blog-item {display: none}
.items-more {padding: 12px 0}
.items-more li {list-style: none;list-style-image: none}
.items-more:before {content: "Weitere Berichte:";padding-left: 14px} /* lang-DE ONLY, echos = "Weitere Berichte" */
.items-more ol li {list-style: none;list-style-image: none}
@media screen and (max-width: 839px) {
	.blog-items.columns-2 .blog-item {display: block;width: 100%;margin: 20px 0 10px 0;padding: 4px} 
	.blog-item img {max-width: 240px}
	.page-header h2,.subheading-category, .category_title h2, .page-item .item_header h2.item_title, 
	h2.item-title {border-bottom: 0} }
@media screen and (max-width: 639px) {
	.blog-item img.img-lft, .blog-item img.img-blog-only-lft,
	.blog-item img.img-rgt, .blog-item img.img-blog-only-rgt {display: block;float: none;margin: 6px auto;text-align: center} }
.category-list {margin: 12px 0 12px 24px}
.content-category label {vertical-align: middle}
.content-category input {margin-top: 5px;height: 30px}
table.category {max-width: 780px}
table.category th, table.category thead td {padding: 3px 4px}
table.category thead th {                 border-bottom: 1px solid var(--blk050)}
table.category tbody th {text-align: left;border-bottom: 1px solid var(--blk050)}
table.category tbody th.list-title a {font-weight: 400;text-decoration: none}
table.category.table-striped tbody tr:nth-child(odd) th {background: transparent}

 /* DO: language-override => clear the stupid text !!!  now add sorting-img to remove those weird popovers:  */
  th#categorylist_header_title a, th#categorylist_header_date a, th#categorylist_header_author a,
  th#categorylist_header_ratings a, th#categorylist_header_hits a,
  th#categorylist_header_votes a {background: url(../img/arrow-dwn_org16.png) center right no-repeat;padding-right: 20px;color: var(--blk060)}
 
@media screen and (max-width: 767px) {
	.category-list {margin: 12px 0} 
	.content-category .btn-group {display: none;visibility: hidden}
	table.category {font-size: 12px} .cat-children {margin: 30px 0 8px 6px}
	table.category  th, table.category td {padding: 2px} }
.categories-list {margin: 6px 0 12px 34px}
.categories-list .base-desc {margin: 4px 4px 12px 4px;clear: both}
.categories-list .category-desc {margin: 4px;clear: both} .categories-list .category-desc p {padding: 0}
.categories-list .com-content-categories__items {max-width: 780px;margin: 4px;border: 1px solid var(--boxBdr);border-radius: var(--boxBrr)}
.categories-list .com-content-categories__item {border: 0;border-bottom: 1px solid var(--boxBdr);padding: 6px}
.categories-list .com-content-categories__item:last-child {border: 0} 
.categories-list .com-content-categories__item a {display:inline-block;min-width: 130px;padding-right: 6px}
@media screen and (max-width: 767px) {
	.categories-list {margin: 0 0 12px 0}
	.categories-list h3 a {max-width: 140px;font-weight: 400} }
.com-content-category-blog__child h3 span {font-weight: 400;font-size: 14px;padding-left: 18px}
.com-content-category__children h3 span {display: none;font-size: 0}


/* _________________ PAGE-NAVIGATION _______________*/
.pagenavigation {margin: 20px auto 8px auto;font-size: 14px;text-align: center;clear: both}
.pagenavigation ul.pagination {display: inline-block;margin: 0;padding: 0;background: var(--wht070);border: 1px solid var(--blk080)}
.pagenavigation ul.pagination li {display: inline-block;margin: 0;padding: 0;border-right: 1px solid var(--blk080)}
.pagenavigation ul.pagination li:last-child {border: 0;text-decoration: none}
.pagenavigation ul.pagination li a {padding: 4px 6px 3px 6px}
.pagenavigation ul.pagination li a:hover {text-decoration: none}
.pagenavigation {margin: 12px auto 8px auto;font-size: 14px;text-align: center;clear: both}
.pagenavigation span.pagination {display: inline-block;margin: 0;padding: 0}
.pagenavigation span.pagination a {display: inline-block;max-width: 240px !important}
.pagenavigation span.pagination a.next {    margin: 8px 0 8px -3px;padding-left: 16px; border-radius: 0}
.pagenavigation span.pagination a.previous {margin: 8px -3px 8px 0;padding-right: 16px;border-radius: 0}
  /* change btn.secondary colors: */
  .pagenavigation span.pagination a.btn-secondary {font-weight: 400;color: var(--blk070);background: var(--wht070);border-color: var(--blk050)}
  .pagenavigation span.pagination a.btn-secondary:hover {color: var(--blk100);background: var(--wht090);border-color: var(--blk050)}
  /* for additional arrows de/activate following 2 lines: */
  .pagenavigation span.pagination .icon-chevron-left:before {content: "<"}
  .pagenavigation span.pagination .icon-chevron-right:before {content: ">"}  
.com-content-category-blog__navigation {margin: 8px auto 0 auto;text-align: center}
p.counter {padding: 6px 0 2px 0;text-align: center} 
nav.pagination__wrapper ul {margin: 0 auto;padding: 0;text-align: center}
nav.pagination__wrapper ul li {display: inline-block;min-height: 26px;min-width: 28px;margin: 0 -2.3px 0 -1.5px;padding: 0;font-size: 14px}
nav.pagination__wrapper ul li {text-align: center;border: 1px solid var(--blk050);border-left: 0;background-color: var(--wht070)}
nav.pagination__wrapper ul li:first-child {border-left: 1px solid var(--blk050)}
nav.pagination__wrapper ul li a {padding: 10px 4px 2px 4px;font-size: 14px;line-height: 1.7}
nav.pagination__wrapper ul li a {text-decoration: none;cursor: pointer;color: var(--linkUp)}
nav.pagination__wrapper ul li a:hover {text-decoration: none}
nav.pagination__wrapper ul li a span {cursor: pointer;color: var(--linkUp)}
nav.pagination__wrapper ul li.disabled {cursor: default}
nav.pagination__wrapper ul li.disabled .page-link span {display: none;visibility: hidden;cursor: default}
nav.pagination__wrapper ul li.active a {text-decoration: none;color: var(--blk080)}
.icon-angle-left:before { content: "<";} .icon-angle-double-left:before { content: "<<"}
.icon-angle-right:before {content: ">";} .icon-angle-double-right:before {content: ">>"}

/* _________ SYSTEM-MESSAGES & MORE ________ */
#system-message-container {display: block;margin: 8px 0;padding: 0}
button.joomla-alert--close {display: none} /* "CLose X = NW " */
#close-tpl.row {max-width: 1240px;margin: 0 auto}
#close-tpl span {display: block;float: right;margin:0 6px 6px 0}
#close-tpl a {font-size: 11px;color: #888} #close-tpl a:hover {color: #eee;text-decoration: underline}
joomla-alert[type="danger"],	joomla-alert[type="message"],
joomla-alert[type="warning"], joomla-alert[type="error"] { background: #ffeeee;color: #ff0000;border: 2px solid #ff0000}
joomla-alert[type="info"],    joomla-alert[type="notice"] {background: #e1ecfa;color: #0040ff;border: 2px solid #0040ff}
										joomla-alert[type="success"]{background: #e8f5e2;color: #26a306;border: 2px solid #26A306}
.alert {display: block;margin: 6px 0;padding: 6px 4px 10px 4px}
.alert-heading {display: block;margin-top: -16px;height: auto;font-size: 16px;font-weight: 700}
.alert-heading .visually-hidden {/*display: none;margin:0;padding: 0;height: 0;visibility: hidden*/}
.alert-danger, .alert-message, .alert-warning, .alert-error,
.alert-info, .alert-notice, .alert-success {font-size: 16px;font-weight: 400}
.alert-message {color: #111}
.alert-danger,
.alert-warning, .alert-error {background: #ffeeee;color: #ff0000;border-radius: 5px}
.alert-info, .alert-notice {  background: #e1ecfa;color: #0040ff;border-radius: 5px}
.alert-success {              background: #e8f5e2;color: #26a306;border-radius: 5px}
.jsMsg, .ieMsg {margin: 8px 4px;padding: 4px;background: #ffe;border: 2px solid #ea2001;color: #ea2001;text-align: center}
.jsMsg a, .ieMsg a, .jsMsg a:hover, .ieMsg a:hover {color: #0040ff;text-decoration: underline}
@media screen and (max-width: 919px) {#system-message-container, .jsMsg, .ieMsg {margin: 12px 2px} }

/* hasPopver + hasTooltip (NOT FULLY TESTED !) */
.popover {/*display: none;*/position: absolute;top: 10px;left: 10px;z-index: 1060;/max-width: 276px;padding: 4px;white-space: normal}
.popover {text-align: left;background-color: #fff;-webkit-background-clip: padding-box;-moz-background-clip: padding;background-clip: padding-box}
.popover {border: 1px solid #24f;border-radius: 6px;box-shadow: 0 5px 10px rgba(0,0,0,0.4)}
.popover-title {color: #000 !important;margin: 0;padding: 8px 14px;font-size: 15px;font-weight: 400;line-height: 18px}
.popover h1, .popover h2, .popover h3 {color: #000 !important}
.popover.top {margin-top: -10px}.popover.right {margin-left: 10px}.popover.bottom {margin-top: 10px}.popover.left {margin-left: -10px}
.popover-title:empty {display: none}.popover-content {padding: 9px}
.popover .arrow, .popover .arrow:after {position: absolute;display: block;width: 0;height: 0;border-color: transparent;border-style: solid}
.popover .arrow {border-width: 11px} .popover .arrow:after {border-width: 10px;content: "";}
.popover.top .arrow {left: 50%;margin-left: -11px;border-bottom-width: 0;border-top-color: #999;border-top-color: rgba(0,0,0,0.25);bottom: -11px}
.popover.top .arrow:after {bottom: 1px;margin-left: -10px;border-bottom-width: 0;border-top-color: #fff;}
.popover.right .arrow {top: 50%;left: -11px;margin-top: -11px;border-left-width: 0;border-right-color: #999;border-right-color: rgba(0,0,0,0.25)}
.popover.right .arrow:after {left: 1px;bottom: -10px;border-left-width: 0;border-right-color: #fff}
.popover.bottom .arrow {left: 50%;margin-left: -11px;border-top-width: 0;border-bottom-color: #999;border-bottom-color: rgba(0,0,0,0.25);top: -11px}
.popover.bottom .arrow:after {top: 1px;margin-left: -10px;border-top-width: 0;border-bottom-color: #fff}
.popover.left .arrow {top: 50%;right: -11px;margin-top: -11px;border-right-width: 0;border-left-color: #999;border-left-color: rgba(0,0,0,0.25)}
.popover.left .arrow:after {right: 1px;border-right-width: 0;border-left-color: #fff;bottom: -10px}
.hasTooltip {/*display: none;*/position: absolute;top: 10px;left: 10px;z-index: 1060;max-width: 276px;padding: 4px;white-space: normal}
.hasTooltip {text-align: left;background-color: #fff;-webkit-background-clip: padding-box;-moz-background-clip: padding;background-clip: padding-box}
.hasTooltip {border: 1px solid #24f;border-radius: 6px;box-shadow: 0 5px 10px rgba(0,0,0,0.4)}
a.hasTooltip {position: relative;top: 0;left: 0;border: 0;border-radius: 0;background-color: transparent;box-shadow: none;text-decoration: none} 
a.hasTooltip:hover {text-decoration: underline}
.hasTooltip-title {color: #000 !important;margin: 0;padding: 8px 14px;font-size: 15px;font-weight: 400;line-height: 18px}
.hasTooltip h1,.hasTooltip h2, .hasTooltip h3 {color: #000 !important}

@media print {
  .icons ul.dropdown-menu, .content-rating, .content_vote, nav {display: none;visibility: hidden;height: 0}
  body {font-family: Arial, Verdena, sans-serif;font-size: 13px;line-height: 1.4;color: #444}
  body #contents {background: none;border: 0}
  #scrollBtn {display: none;visibility: hidden;height: 0} }

/* ___________ PLUGIN   COOKIEHINT _____________________________
 *  Set style to "non-selected" then the following will aplly */
#redim-cookiehint{position: fixed;bottom: 0;left:0;right: 0;padding: 6px 0;text-align: center}
#redim-cookiehint{z-index: 999999; background: #0c1115;border-top: 3px solid #27f;border-bottom: 3px solid #27f}
#redim-cookiehint{font-family: Arial, sans-serif;font-size: 13px}
#redim-cookiehint .clr {clear: both}
#redim-cookiehint.hidden {display: none;visibility: hidden}
#redim-cookiehint .cookiehead {display: none;visibility: hidden}
#redim-cookiehint #cookiehintinfo {display: none;visibility: hidden}
.cookiecontent {display: inline-block;max-width: 756px;padding: 0 3px 6px 3px}
.cookiecontent {font-size: 14px;line-height: 15px;color: #eee;border-right: 44px solid transparent}
.cookiecontent a, .cookiecontent a:hover {color: #eee;padding: 0 3px;text-decoration: underline}
.cookiecontent .lgBreak {display: block}
.cookiebuttons {display: inline-block;width: 40px;margin: 0 0 0 -44px;padding: 12px 2px 3px 2px}
.cookiebuttons a.btn {max-width: 40px;height: auto;margin: 0 2px 6px 0;padding: 5px 4px 4px 4px;text-align: center}
.cookiebuttons a.btn {font-size: 13px;line-height: 13px;box-shadow: none;border: 1px solid #ddd;color: #fff}
.cookiebuttons a.btn:hover {border: 1px solid #fff;color: #fff;text-decoration: none}
@media screen and (max-width: 767px) {.cookiecontent {max-width: 566px;text-align: left;}.cookiecontent {display: inline} }
@media screen and (max-width: 589px) {.cookiecontent {max-width: 399px} }
@media screen and (max-width: 479px) {.cookiecontent {max-width: 348px;font-size: 12px;line-height: 14px} }
@media screen and (max-width: 479px) {.cookiecontent {max-width: 312px} #redim-cookiehint {overflow-x: hidden} }

/* ========================================================================
 * EDITING from FRONT-END of THIS Joomla-Template:
 * it requieres full bootstrap-CSS, and bootstrap-JS to work properly !
 * that additional CSS + JS would defeat the purpose of minimizing CSS here,
 * therefore: FRONT-END-EDITING IS NOT POSSIBLE on this Template
 * if you run a site where it would be necessary, we would've installed it.
 * ======================================================================== *

/* _______________THE END______thankyou for visiting _____ goodbye ________________ */