/* ========================================================================
 * TEMPLATE > NORMALIZE for: lachmannwerft.de
 * Copyright Website-Bauen.de  https://www.website-bauen.de
 * It is unethical to remove copyrights, dont do it !
 * ======================================================================== */
* {margin: 0;padding: 0;vertical-align: top; cursor: default}
*, *:before, *:after {box-sizing: border-box}
html {height: 100%;font-family: Verdana, Geneva, Arial, sans-serif;font-size: 14px;color: #444;line-height: 1.4}
body {width: 100%;height: 100%;min-width: 316px;margin: 0 auto}
div, article, aside, details, figcaption, figure, form, hgroup, nav, 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;} i {font-style: italic;} small {font-size: 84%}
sub {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;bottom: -4px}
sup {font-size: 75%;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;} [hidden] {display: none}
ul, ol  {margin: 0 2px 8px 24px;padding: 0} ul ul, ol ol {margin: 0 0 0 12px}
ul li, ol li {margin: 0;padding: 0}
ul li {list-style-type: disc} ul li ul li {list-style-type: circle}
dl{margin: 10px 0;} dd {margin: 0 0 0 12px}
nav li, nav li {list-style: none;list-style-image: none} nav li a, nav li a { text-decoration: none}
table {border-collapse: collapse;border-spacing: 0;} table tr td {padding: 2px 4px}
table ul {margin: 0 0 4px 18px;padding: 0} table ul li {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(--blk100)}
pre {margin: 6px auto 10px auto;padding: 15px;overflow-x: scroll;background: var(--wht090)}
code, kbd, samp {font-family: "courier new", monospace;font-size: 12px}
hr {width: 90%;height: 1px;margin: 14px auto;border: 0;clear: both;background: var(--blk050)}
blockquote {position: relative;width: 97%;max-width: 720px;margin: 6px auto 10px auto;padding: 6px 6px 3px 36px;color: var(--colPrime)}
blockquote {font-family: Georgia, Arial, serif;font-size: 14px;border: 1px solid var(--blk080);border-radius: 6px;background: var(--wht090)}
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 p {font-family: Georgia, Arial, serif !important;font-size: 14px;margin: 0;padding: 0 0 6px 0}
blockquote cite {display: block;font-size: 14px;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}
input, textarea, label, button, select {font-family: Arial, Verdana, sans-serif}
input {padding: 4px;min-height: 28px;width: auto;cursor: text}
input, textarea, select {outline: 0;background-color: var(--wht090);border-radius: 3px;border: 1px solid var(--blk080)}
input[type="text"], input[type="password"] {background-color: var(--wht090) !important}
input:hover, textarea:hover, select:hover {outline: 0;background-color: var(--wht100);border: 1px solid var(--blk100);cursor: text}
input[type="text"]:hover, input[type="password"]:hover {background-color: var(--wht100) !important}
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} /* default = no border !!! */
legend {font-size: 16px;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: #222}
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 {font-size: 34px;font-weight: 400;padding: 14px 0 8px 0;color: #338}
h2 {font-size: 30px;font-weight: 400;padding: 14px 0 8px 0;color: #338}
h3 {font-size: 24px;font-weight: 400;padding: 14px 0 6px 0;color: #222}
h4 {font-size: 20px;font-weight: 400;padding: 12px 0 4px 0;color: #333}
h5 {font-size: 15px;font-weight: 700;padding: 12px 0 0px 0;color: #444}
h6 {font-size: 14px;font-weight: 700;padding: 12px 0 0px 0;color: #444}
p { /* font-size = use global !!! */text-align: justify;padding: 0 0 12px 0}
a, a:link {color: var(--linkUp);text-decoration: underline}
a:hover, a:focus {color: var(--linkHv);text-decoration: underline;cursor: pointer}
a, li a, a img, a:hover, li a:hover, a img:hover {cursor: pointer} 
.row {width: 100%;margin: 0 auto} .row.maxPage {max-width: 1204px} .row.maxScreen {max-width: 1940px}
.row.scrlBtn {max-width: 1400px;margin: 0 auto;text-align: right}
.row:before {display: table;content: " ";}
.row:after {display: table;content: " "; clear: both}
.clearfix:before {display: table;content: " ";} .clearfix:after {display: table;content: " ";clear: both}
.clear {height: 0;width: 100%;clear: both}


/* ==================  Template-Colors  =======================
 * ============================================================ */ 
 :root {
--bgPrime: #f9f9f9;
--colPrime: #444;  --colSecon: #eee;  --colThird: #555;
--linkUp: #2255dd; --linkHv: #003388;
--boxHdr: #333;    --boxCol: #222;
--boxBdr: #56b;    --boxBgd: #d7d8e1; --boxBrr: 5px;
--blk100: #111;    --blk080: #333;    --blk070: #555; --blk050: #999;
--wht100: #fff;      --wht090: #f0f0f0;     --wht070: #e4e4e4;
--btnPr-upcol: #eee; --btnPr-upbgd: #338;   --btnPr-upbdr: #338;
--btnPr-hvcol: #fff; --btnPr-hvbgd: #56b;   --btnPr-hvbdr: #000;
--btnSc-upcol: #eee; --btnSc-upbgd: #56b;   --btnSc-upbdr: #56b;
--btnSc-hvcol: #fff; --btnSc-hvbgd: #338;   --btnSc-hvbdr: #000;
--btn--bdr-rd: 5px;
--mn1UpBgd-ul: #56b;
--mn1UpBgd-li: #56b;  --mn1UpCol-a: #eee;   --mn1UpBdr-li: 2px solid #56b;
--mn1HvBgd-li: #338;  --mn1HvCol-a: #fff;   --mn1HvBdr-li: none;
--mn1AcBgd-li: #338;  --mn1AcCol-a: #fff;   --mn1AcBdr-li: none;
--mn2UpBgd-ul: #56b;                        --mn2UpBdr-ul: #eee;
--mn2UpBgd-li: #56b;   --mn2UpCol-a: #ddd;  --mn2UpBdr-li: none;
--mn2HvBgd-li: #eee;   --mn2HvCol-a: #444;  --mn2HvBdr-li: none;
--mn2AcBgd-li: #fff;   --mn2AcCol-a: #000;  --mn2AcBdr-li: none;
}

html {background: #d7d8e1}
header, main, footer, section, nav {display: block;width: 100%;height: auto}
header, main, footer {clear: both}
main, section { background: #d7d8e1}
header, footer {background: #333388}

/* HTML-common elements */
p.lead {font-size: 15px;font-weight: 400;color: #222}
p.indent {margin: 0 0 0 16px}
p.small {font-size: 84%;font-weight: 400;padding: 10px 0 4px 0}
span.small {font-size: 84%;padding: 4px 0 0 0}
p strong, span strong, td strong, li strong {color: #666;font-size: 96%}
.left {text-align: left;} .right {text-align: right} .center {text-align: center}
.img-lft {display: inline-block;float: left;margin: 6px 16px 10px 4px}
.img-rgt {display: inline-block;float: right;margin: 6px 4px 10px 16px}
.img-ctr {float: none;position: relative;margin: 0 auto 10px auto}
.img-round {border-radius: 14px}
.img-desc {display: block;margin: 0 0 8px 8px;font-size: 13px;font-style: italic;color: #555}
.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 th {padding: 3px 4px;color: var(--blk070)}
table td {padding: 3px 4px;color: var(--colPrime)}
table.tbl-light,    .table-bordered {margin: 2px 0 16px 0;border: 1px solid var(--blk050);background: transparent} 
table.tbl-light th, .table-bordered th {border-right: 1px solid var(--blk050)} 
table.tbl-light td, .table-bordered td {border: 1px solid var(--blk050)}
table.tbl-dark {margin: 2px 0 16px 0;border: 1px solid var(--blk050);background: var(--wht090)} 
table.tbl-dark th {border-right: 1px solid var(--blk050)}
table.tbl-dark td {border: 1px solid var(--blk050)}
table.striped,    .table-striped {margin: 2px 0 16px 0;border: 1px solid var(--blk050);background: transparent}
table.striped th, .table-striped th {border-right: 1px solid var(--blk050);background: var(--wht090)/*;color: var(--blk070)*/}
table.striped tr:nth-child(odd),  .table-striped tr:nth-child(odd) {background-color: transparent}
table.striped tr:nth-child(even), .table-striped tr:nth-child(even) {background-color: var(--wht090)}
table.striped td, .table-striped td {border: 1px solid var(--blk050)}

/* HTML-spezific elements  */
.typo-btn a.btn {display: inline-block;margin: 8px 12px 8px 0} .mfbtn {margin-top: 7px}
.iframeContainer {position: relative;width: 100%;overflow: hidden;padding: 42% 0 4px 0;margin: -4px 0 30px 0}
.responsiveFrame {position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;border: none}
.lg-block {max-width: 920px;margin: 6px auto}
.pdf-click {background: url(../img/icon-pdf.png) top left no-repeat;min-height: 40px;margin: 12px 0;padding: 0 4px 6px 40px;}
.pdf-click h4 {padding-top: 0} .pdf-click p {text-align: left}


/* ========================================================================
 * TEMPLATE > STYLE-CSS for: lachmannwerft.de
 * Copyright Website-Bauen.de  https://www.website-bauen.de
 * It is unethical to remove copyrights, dont do it !
 * ======================================================================== */
header {position: fixed;top: 0;left: 0;width: 100%;height: 118px;z-index: 888}
header {border-top: 30px solid #d7d8e1;border-bottom: 16px solid #d7d8e1;}
header {-webkit-transition: height 0.25s;-moz-transition: height 0.25s;transition: height 0.25s}
.header-container {width: 100%;max-width: 1204px;height: auto;margin-top: -8px;}
.header-container {border-left: 440px solid transparent;clear: both}
 .brand {width: 436px;height: 75px;margin: 0 0 0 -440px} 
 .brand span {display: block;font-family: Trebuchet, Verdana, sans-serif;color: #eee;line-height: 1;cursor: pointer}
 .brand a, .brand a:hover {color: #fff;text-decoration: none;}
 .logoHdr {padding: 8px 0 0 9px;font-size: 48px;letter-spacing: 1px}
 .slogan { padding: 1px 0 6px 13px;font-size: 11px;letter-spacing: 4px}
 .brand img {max-width: 420px;height: auto;max-height: 73px;margin: 8px 0 0 0;cursor: pointer;overflow: hidden}
 .siteName {padding: 32px 0 0 9px;font-size: 22px}

header.shrink {position: fixed;top: 0;left: 0;width: 100%;height: 74px}
header.shrink {border-top: 9px solid #d7d8e1;border-bottom: 6px solid #d7d8e1}
.shrink .header-container {height: 60px;margin-top: -14px}
.shrink .brand {margin: 0 0 0 -440px;webkit-transition: all 0.25s;-moz-transition: all 0.25s;transition: all 0.25s}
.shrink .logoHdr {padding: 14px 0 0 6px;font-size: 40px}
.shrink .brand img {margin: 6px 0 0 0}

  
/* ***** _______ MAIN-NAV ______ ***** */
 nav.mainNav {float: right;margin: -97px 0 0 0;padding: 0}
 .navToggler {display: none;height: 0}
 ul.main-nav {display: table;table-layout: fixed;width: 100%;height: auto;margin: 0;padding: 14px 8px;}
 ul.main-nav {font-family: Arial, sans-serif;text-align: center;font-size: 14px;font-weight: 400}
 ul.main-nav {background: var(--mn1UpBgd-ul);border-radius: 9px}
 ul.main-nav li {float: none;display: table-cell;width: auto;white-space: nowrap;text-align: center;margin: 0 2px;padding: 4px 0 0 0;outline: none}
 ul.main-nav li span.ardw {background: transparent;width: 0}
 ul.main-nav li span.ardw:before {content:'';pointer-events: none}
/* fix j6, media-css 
   - at this time this site has only navheaders (empty 2nd lvl)
   - therefore many more changes to previous j-5 css */
 ul.main-nav button {}
 .main-nav .mod-menu__sub[aria-hidden="true"] {display: block;text-align: center;}
	/* end j6-fix ... do not delete these 2 lines !!! */
 ul.main-nav li a {position: relative;padding: 34px 8px 36px 0px;text-decoration: none;outline: none}
 ul.main-nav li a {text-transform: uppercase;line-height: 7;letter-spacing: 1px;cursor: pointer}
 ul.main-nav li .nav-header {position: relative;display: block;margin: 4px 0 0px 0;text-align: center}
 ul.main-nav li .nav-header {text-transform: uppercase;line-height: 7;letter-spacing: 1px;cursor: pointer}
 ul.main-nav li .nav-header, ul.main-nav li .nav-header:hover {color: var(--mn1UpCol-a);cursor: default}
 ul.main-nav li {background: var(--mn1UpBgd-li);border-right: var(--mn1UpBdr-li);border-radius: 6px}
 ul.main-nav li:hover {background: var(--mn1HvBgd-li)}
 ul.main-nav li.current {background: var(--mn1AcBgd-li)}
 ul.main-nav li.current:hover {background: var(--mn1HvBgd-li)}
 ul.main-nav li a {color: var(--mn1UpCol-a)}
 ul.main-nav li:hover a {color: var(--mn1HvCol-a)}
 ul.main-nav li.current a {color: var(--mn1AcCol-a)}
 ul.main-nav li.current:hover a {color: var(--mn1AcCol-a)}
 ul.main-nav li:last-child {border-right: 0}
 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: 250px;margin: -8px 0 0 0;padding: 1px}
 ul.main-nav li ul {background: var(--mn2UpBgd-ul);border-radius: 7px;border: 1px solid;border-color: var(--mn2UpBdr-ul)}
 ul.main-nav li:last-child ul {margin-left: -124px}
 ul.main-nav li ul li {float: none;display: block;margin: 1px 0 0 0;padding: 0;text-align: left;border: 0;border-radius: 0;}
 ul.main-nav li ul li:first-child{border-radius: 6px 6px 0 0;margin-top: 0}
 ul.main-nav li ul li:last-child {border-radius: 0 0 6px 6px} 
 ul.main-nav li ul li {background: var(--mn2UpBgd-li)}
 ul.main-nav li ul li:hover {background: var(--mn2HvBgd-li)}
 ul.main-nav li ul li.current, ul.main-nav li ul li.current:hover {background: var(--mn2AcBgd-li)}
 ul.main-nav li ul li a {display: block;font-size: 16px;margin: 0;padding: 4px 1px 4px 14px;line-height: 1.4;Text-transform: none}
 ul.main-nav li.current ul li a, ul.main-nav li.current:hover ul li a,
 ul.main-nav li:hover ul li a,   ul.main-nav li.current ul li:hover a {color: var(--mn2UpCol-a)}
 ul.main-nav li.current ul li:hover a, ul.main-nav li ul li:hover a {color: var(--mn2HvCol-a)}
 ul.main-nav li.current ul li:hover a, ul.main-nav li ul li.current a, 
 ul.main-nav li ul li.current:hover a {color: var(--mn2AcCol-a);text-decoration: underline} 
 ul.main-nav li ul li span, ul.main-nav li ul li ul, ul.main-nav li:hover ul li ul,
 ul.main-nav li ul li:hover ul {display: none;visibility:hidden;height:0;width: 0;margin: 0;padding: 0}
.shrink nav.mainNav {margin: -70px 0 0 0}
.shrink ul.main-nav {height: 80;padding: 8px}
.shrink ul.main-nav li {padding: 4px 0 0 0}
.shrink ul.main-nav li a, .shrink ul.main-nav li .nav-header {line-height: 4}
.shrink ul.main-nav li ul li a {padding: 4px 1px 4px 14px;line-height: 1.4}
 ul.main-nav li .separator {display: none;visibility: hidden;height: 0;padding: 0} 

/* ***** _____ SECTION _____ ***** */
section.secTop {margin-top: 128px;margin-bottom: -128px}

/* ***** _____ MAIN _____ ***** */
main {border-top: 135px solid #d7d8e1;border-bottom: 5px solid #d7d8e1}
.main-container {min-height: 66.5vh;background: var(--bgPrime);border: 2px solid #c4c4c4;border-radius: 8px;padding-bottom: 8px}
 #systemMess, #systemWarn {display: block;width: 100%;margin: 0 auto;padding: 0 5px;height: auto}
 #contents {position: relative}
 #rightCol {height: auto}
 .oneCol #contents {width: 100%;padding: 0 0 20px 0}
 .oneCol #rightCol {display: none}
 .twoCol #contents {float: left;display: inline-block;width: 100%;margin: 0;padding: 0 0 20px 0;border-right: 270px solid transparent}
 .twoCol #rightCol {float:right; display: inline-block;position: relative;width: 248px;margin: 0 2px 0 -268px;padding: 34px 0 10px 0;text-align: center}
 #article {width: 100%;padding: 12px 6px 6px 6px;height: auto}
 #article img {max-width: 99.4%} /* = 1192px */

/* *****_____ FOOTER _____ */
#scrollBtn {display: none;position: fixed;bottom: 160px;right: 12px;padding: 7px;z-index: 99;outline: none;text-decoration: none}
#scrollBtn {width: 40px;height: 36px;font-size: 14px;text-align: center;border: 1px solid;border-radius: 7px}
#scrollBtn {      color: var(--btnSc-upcol);background: var(--btnSc-upbgd);border-color: var(--btnSc-upbdr)}
#scrollBtn:hover {color: var(--btnSc-hvcol);background: var(--btnSc-hvbgd);border-color: var(--btnSc-hvbdr)}
#scrollBtn:hover {text-decoration: none;cursor: pointer}
.footer-container {padding: 6px 10px 0 10px;color: var(--wht090)}
.footer-container a {color: var(--wht090);text-decoration: none}
.footer-container a:hover {color: var(--wht100);text-decoration: underline}
 .ftrbox {min-height: 60px;padding: 4px}
 .ftrbox.lft {}
 .adress-bar {width: 100%;text-align: left}
  .adress-hdr {display: block;padding-left: 36px}
  .company {padding: 0 0 8px 30px;font-size: 18px;}
  .adress-lft {float: left;display: block;width: 250px;padding: 0 0 4px 34px}
  .adress {padding: 6px 0 3px 0; line-height: 1.5}
  .adress-up {display: block;width: 250px;margin: 0 auto}
  .phone {padding: 6px 6px 6px 6px}
  .mail { padding: 6px 6px 3px 6px}
  .adress {background: url(../img/icon_adres-blk28.png) top left no-repeat;padding-left: 32px}
  .phone { background: url(../img/icon_phone-blk28.png) top left no-repeat;padding-left: 32px}
  .mail {  background: url(../img/icon_email-blk28.png) top left no-repeat; padding-left: 32px} 
 .ftrbox.rgt {float: right;width: 200px;margin: -90px 0 0 0;clear: both}
  ul.ftr-nav li {list-style: none;list-style-image: none;display: block}
  ul.ftr-nav li {margin: 0 4px 4px 0;padding: 0;text-align: left}
  ul.ftr-nav li a {      text-decoration: none;     color: var(--wht-090)}
  ul.ftr-nav li a:hover {text-decoration: underline;color: var(--wht-100)}    
  ul.ftr-nav li a.red, ul.ftr-nav li a.red:hover  {color: #f43}
#copyright {margin-top: 16px;padding: 0 30px 6px 0;text-align: center}
#close-tpl {margin: -6px auto 6px auto;padding-right: 8px;font-size: 12px;text-align: right}
#close-tpl a{color: #666} #close-tpl a:hover {color: #111} 

/* ***** ____ MEDIA (all above) ____ */
@media screen and (max-width: 1179px) {ul.main-nav li:last-child ul {margin-left: -134px} }
@media screen and (max-width: 1129px) {ul.main-nav li:last-child ul {margin-left: -140px} }
@media screen and (max-width: 1079px) { 
	header {height: 80px;border-top: 10px solid #d7d8e1;border-bottom: 13px solid #d7d8e1}
	.header-container {height: 62px;margin-top: -23px;border-left: 316px solid transparent}
   .brand {width: 312px;margin: 0 0 0 -316px;text-align: center} 
	 .logoHdr {padding: 26px 0 0 2px;font-size: 36px;letter-spacing: normal;text-align: left}
	 .slogan { padding: 1px 0 4px 4px;font-size: 10px;letter-spacing: 1px;text-align: left}
	 .brand img {max-width: 312px;height: 59px;margin: 22px 0 0 0}
	 .siteName {padding: 40px 0 0 2px;font-size: 18px;text-align: left}
	nav.mainNav {margin-top: -62px}
	 ul.main-nav {height: 78px;padding: 8px 4px;border-radius: 8px 0 0 8px}
	  ul.main-nav li {font-size: 13px;padding: 4px 0 0 0}
	  ul.main-nav li:last-child ul {margin-left: -130px}
	  ul.main-nav li a, ul.main-nav li .nav-header {/*padding: 20px 2px 20px 0;*/margin: 0;line-height: 4}
	section.secTop {margin-top: 73px;margin-bottom: -81px}
	main {border-top: 80px solid #d7d8e1}
	 .main-container {min-height: 72.75vh;padding: 2px;border: 0;border-radius: 0} }
@media screen and (max-width: 999px) {ul.main-nav li:last-child ul {margin-left: -148px} }
@media screen and (max-width: 899px) {ul.main-nav li:last-child ul {margin-left: -162px} }	 
@media screen and (max-width: 839px) {
	header, header.shrink {position: relative;display: block;width: 100%;height: auto;margin: 0;padding: 0;border: 0;background: #f9f9f9}
	.header-container {height: auto;margin: 0;padding: 0;border: 0;}
	.brand {width: 100%;margin: 0;background: #338;}
	.logoHdr {padding: 2px 0 0 10px}
	.slogan { padding: 1px 0 6px 13px;font-size: 11px;letter-spacing: 2px}
	.brand img {position: relative;height: auto;margin: 10px auto 0 10px}
	.siteName {position: relative;padding: 30px 40px 0 0;text-align: center}
	nav.mainNav {margin: 0 0 -5px 0;padding: 0}
	.menu-container {padding: 8px 0 4px 0;background: #f9f9f9}
	.navToggler {display: inline-block;float: right;width: 38px;height: 35px;margin: -44px 15px 5px 10px}
	.navToggler {font-size: 32px;line-height: 0.95;text-align: center;padding: 0;cursor: pointer;outline: none}
	.navToggler {color: #eee;background: #56b;border: 1px solid #338;border-radius: 5px}
	.navToggler:hover {color: #fff;background: #56b;border: 1px solid #000}
	ul.main-nav {display: block;position: relative;height: auto;width: 460px} 
	ul.main-nav {margin: 0 auto;padding: 0;text-align: left;z-index: 999}
	ul.main-nav {border-radius: 6px}
	ul.main-nav li {display: block;position: relative;width: 100%;min-height: 46px;margin: 4px 0;padding: 4px 0}
	ul.main-nav li {border: 0;text-align: left}
	ul.main-nav li:hover, ul.main-nav li.current, ul.main-nav li.current:hover {border: 0}
   ul.main-nav button {width: 100%; margin-bottom: 6px}
   ul.main-nav li a, ul.main-nav li .nav-header {display: block;width: 82%;padding: 4px 0 4px 8px;font-size: 18px;
		text-align: left;line-height: 1.4;text-decoration: none;border: 0}
	ul.main-nav li.current a, ul.main-nav li.current:hover a, ul.main-nav li a:hover,
   ul.main-nav li.current .nav-header, ul.main-nav li.current:hover .nav-header, ul.main-nav li .nav-header:hover {text-decoration: underline;border: 0}
   ul.main-nav li:hover ul {display: none;border: 0}
	ul.main-nav li.subOpen ul, ul.main-nav li.subOpen:hover ul {width: 250px;height: auto;margin: 0 0 5px 25px;padding: 0 1px 1px 1px}
	ul.main-nav li.subOpen ul, ul.main-nav li.subOpen:hover ul {visibility: visible;opacity: 1;display: block;position: relative;border: 1px solid #eee}
	ul.main-nav li:hover ul li {display: none;border: 0}
	ul.main-nav li.subOpen ul li, ul.main-nav li.subOpen:hover ul li,
	ul.main-nav li.subOpen ul li:hover {display: block;margin: 0;padding: 0;border: 0;text-decoration: none}	
	ul.main-nav li.subOpen ul li a, 
	ul.main-nav li.subOpen ul li a:hover {display: block;width: 220px;margin: 2px 0;padding: 2px 2px 0 6px;font-size: 15px;font-weight: 400;text-decoration: none}
	ul.main-nav li.subOpen ul li.current a, ul.main-nav li.subOpen ul li.current:hover a, 
	ul.main-nav li.subOpen ul li.current a:hover {font-weight: 400;text-decoration: underline}
	/* fix j-6, media-css *.main-nav .mod-menu__sub[aria-hidden="true"] {display: none} /* end j6-fix ... = fixed elsewhere */
	ul.main-nav li span.ardw {display: block;position: absolute;top: 0;right: -58px;width: 30px;height: 30px;padding: 6px 0 0 2px}
	ul.main-nav li span.ardw {pointer-events: none !important;text-decoration: none;font-size: 16px;color: #338;text-align: center}
	ul.main-nav li span.ardw {background: #fff;border-radius: 50%}
	ul.main-nav li span.ardw:before {content:'v';pointer-events: none}
	ul.main-nav li a:hover, ul.main-nav li a span.ardw:hover {cursor: pointer}
	section.secTop {margin-top: -4px;margin-bottom: 4px}
	main {margin: -4px 0 0 0;padding: 0;border: 0}
	.main-container {min-height: 72vh} }
@media screen and (max-width: 767px) {	
	.twoCol #contents, .twoCol #rightCol {float: none;display: block;width: 100%;border: 0;margin: 2px 0;padding: 2px}
	.main-container {min-height: 53vh}
	#article {padding: 0 2px 6px 2px}
	pre, blockquote {margin: 6px 0 12px 12px}
	#scrollBtn {display: none;visibility: hidden;bottom: 0;right: 0;padding: 0;z-index: 0;}
	#scrollBtn {width: 0;height: 0;font-size: 0;border: 0}
	.footer-container {text-align: center}
	.ftrbox.lft {max-width: 360px;margin: 4px auto}
	.adress-lft, .adress-up {float: none;width: 250px;margin: 4px auto;padding: 2px 0}
	.ftrbox.rgt {float: none;width: 200px;margin: 4px auto}
	ul.ftr-nav li {padding: 2px 0 4px 0}
	#copyright {padding: 0 0 4px 0}
	.sm-md-only, .md-only {display: block;height: auto} 
	.md-lg-only {display: block; height: auto}
	.lg-only {display: none;height: 0} }
@media screen and (max-width: 639px) {	
	html {font-size: 13px}
	table tr td {padding: 2px}
	h1{font-size: 24px;padding: 12px 0 5px 8px;} h2 {font-size: 22px;padding: 10px 0 5px 6px}
	h3 {font-size: 18px;padding: 8px 0 4px 2px;} h4, h5, h6 {font-size: 15px;padding: 6px 0 4px 2px}
	p {font-size: 13px;text-align: left} p.lead {font-size: 14px} p.small {font-size: 11px}
	blockquote, blockquote p, cite {font-size: 13px} pre, blockquote {margin: 6px 2px 12px 2px}	
	.main-container {min-height: 54.5vh}
	.img-lft, .img-rgt {display: block;float: none;margin: 6px auto;text-align: center}
	.footer-container {padding: 6px}
	.company {font-size: 15px;padding: 0 0 4px 0} #copyright {margin-top: 8px;font-size: 14px}
	.mail {margin-top: 6px}
	.sm-md-only {display: block;height: auto} 
	.md-only, .md-lg-only {display: none;height: 0;margin: 0;padding: 0} }
@media screen and (max-width: 479px) { 
	.brand img {margin: 10px auto 0 auto}
	.navToggler {margin: 4px 15px 5px 10px}
	ul.main-nav {width: 312px;margin-top: 36px;padding: 4px 0}
	ul.main-nav li.subOpen ul, ul.main-nav li.subOpen:hover ul {margin: 4px 0 8px 8px}
	ul.main-nav li span.ardw {right: -47px} }


/* ========================================================================
 * TEMPLATE > JOOMLA-CSS for: lachmannwerft.de
 * Copyright Website-Bauen.de  https://www.website-bauen.de
 * It is unethical to remove copyrights, dont do it !
 * ======================================================================== */
.mainFull, .mainComp {height: auto;margin:  0;padding: 0;text-align: center;clear: both} /* dont add margin or padding */

/* chrome style="class" => passed onto module => "card" OR "plain" */
.card {display: inline-block;height: auto;width: 240px;padding: 2px 6px;background: var(--boxBgd)}
.card {vertical-align: top;border: 1px solid var(--boxBdr);border-radius: 8px}
.card {font-family: Arial, sans-serif;font-size: 13px;text-align: center;color: var(--boxCol)}
.card img {max-width: 220px;margin: 4px auto 6px auto}
.card label.element-invisible {display: none}
.card h3 {margin: 0 -6px 8px -6px;padding: 4px 0;z-index: 50;border-bottom: 1px solid var(--boxBdr)}
.card h3 {font-size: 18px;line-height: 1;font-weight: normal;text-align: center;color: var(--boxHdr)}
.card p {font-size: 13px;line-height: 1.3;margin: 4px 0 4px 0;padding: 0;text-align: left}
.card ul {text-align: left;margin: 0;padding: 0}
.card li, form .form-horizontal ul li {list-style: none;text-align: left;margin: 0;padding: 2px 0}
.card a {text-decoration: none}
.card a:hover, .card li a:hover span{text-decoration: underline}
.card ul.mod-list li {list-style-type: circle;margin-left: 14px}
.card li span.float-end, .card ul li span.badge {float: right;width: 52%;margin-right: 4px;text-align: left;clear: both} 
.card .pretext p, .card .posttext p {font-size: 12px;padding: 6px;text-align: center}
.card.full img {display: block;margin: 0 auto;height: auto;width: 100%}
.card.btn.btn-primary, .card button.btn.btn-primary  {width: 148px;margin: 6px auto}
.card {margin: 4px 12px 16px 12px}
#rightCol .card {margin: 0 auto 16px auto;text-align: left}

 /* ADDITIONEL SUFFIX (where-ever required) */
.card.full {display: block;width: 98.5%;margin: 0 0 12px 0;padding: 0;}
.card.nbdr {border: 0}
.card.nbrr {border-radius: 0}
.card.nbgd {background: #f9f9f9;color: #444} .card.nbgd p {color: #444} .card.nbgd h3 {color: #555}
.card.light {background: #e9e9e9}
.card.dark {background: #56b;color: #eee} .card.dark p, .card.dark a {color: #eee}
.card.dark h3 {color:#fff;border-bottom: 1px solid #eee} .card.dark a:hover {color: #fff}

@media screen and (max-width: 839px){
	.card {display: inline-block;margin: 4px 16px 16px 16px}
	.card.lg-only {   display: none;height: 0;margin: 0;padding: 0;border: 0}
	.card.md-only {   display: block;height: auto}
	.card.sm-md-only {display: block;height: auto}
	#rightCol .card {display: inline-block;margin: 4px 16px 16px 16px} }
@media screen and (max-width: 767px){
	.card.md-only {   display: none;height: 0}
	.card.sm-only {   display: none;height: 0}
	.card.sm-md-only {display: none;height: 0} }
@media screen and (max-width: 639px){
	.card {display: block;margin: 4px auto 16px auto}
	.card.md-lg-only {display: none;height: 0}
	.card.md-only {   display: none;height: 0}
	.card.sm-only  {  display: block;height: auto}
	#rightCol .card {display: block;margin: 4px auto 16px auto}	}



/* ================================================
 *     			Modules WITH SUFFIX                 */
 
 /* BREADCRUMBS => add suffix: "path lg-only" */
.path {display: block;width: 97%;margin: 0;padding-left: 6px;}
.path {border: 0;border-bottom: 1px solid #67c;border-radius: 0;background: var(--bgPrime)}
.path h3 {display: none;visibility: hidden;height: 0;padding: 0}
.mod-breadcrumbs {width: 100%;margin: -5px 0 4px 0;padding: 0;text-align: left;overflow-x: hidden}
.mod-breadcrumbs li {list-style: none;display: inline;margin: 0 4px 0 1px;padding: 0 18px 0 0}
.mod-breadcrumbs li {background: url(../img/arrow-rgt_org10.png) center right no-repeat}
.mod-breadcrumbs li, .mod-breadcrumbs li a, .mod-breadcrumbs li span {font-size: 15px;cursor: pointer}
.mod-breadcrumbs li a {      text-decoration: none;color: var(--linkUp)}
.mod-breadcrumbs li a:hover { text-decoration: none;color: var(--linkHv)}
.mod-breadcrumbs li span {     text-decoration: none;color: var(--linkUp);cursor: pointer}
.mod-breadcrumbs li span:hover {text-decoration: none;color: var(--linkHv)}
.mod-breadcrumbs li.mod-breadcrumbs__here{background: none;margin: 0;padding: 0 0 0 2px;cursor: default}
.mod-breadcrumbs li.active, .mod-breadcrumbs li.active span {color: var(--linkUp);background: none}
.mod-breadcrumbs li.active, .mod-breadcrumbs li.active span {padding: 0;cursor: default}
@media screen and (max-width: 839px) {.path, .card.path, .path.lg-only, .card.lg-only,
	.card.path.lg-only {display: none !important;height: 0 !important;margin: 0 !important;padding: 0 !important;border: 0} }

 /* SEARCH-MODULE => add suffix: _searchHorz  <= displayed horizontaly WITH IMAGE => in header ONLY ! * 
  * the ordinary "search-module" WITH BUTTON gets no suffix, see further below */
.searchHorz {float: right;display: inline-block;width: auto;margin: 0 4px;padding: 4px;text-align: right}
/* activate this line if position is in header:  .searchHorz {background: none;border: 0;} */
.searchHorz .form-search {min-height: 36px;width: 206px;clear: both}
.card.searchHorz h3 {margin: 0 -4px 8px -4px}
.searchHorz .form-search input {float: left;display: inline-block;height: 28px;width: 148px;margin: 0;border-radius: 0;vertical-align: top}
.searchHorz .form-search button.btn {float: right;display: inline-block;height: 18px;width: 30px;margin: 0 14px 0 -14px;padding: 0;vertical-align: top}
.searchHorz .form-search button.btn {background: #f4f4f4;border: 1px solid #333;border-left: 0;border-radius: 0;font-size: 0;overflow: hidden}
.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}
 
 /* if someone puts this module in another position => add suffix: _noFloat */
  .searchHorz.noFloat {float: none;display: inline-block;width: 240px;min-height: 56px;margin: 4px 12px 16px 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} }



/* ================================================
 *     			Modules without suffix              /*
 
 /* SEARCH-MODULE (no-siffix) displayed vertical as "module", with button) */
.form-search {min-height: 56px} 
.form-search label {display: none;height: 0}
.form-search .input-group {margin: 0 auto;text-align: center}
.form-search input {width: 148px}
.form-search button.btn {margin: 6px auto}
.form-search .icon-search {background: none;}
.form-search .mod-finder__advanced {display: none;height: 0}

/* WHOSON-MODULE (no-suffix) */
.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}
 
/* RANDOM-IMAGE (no-suffix) */
.mod-randomimage {min-height: 56px}
.mod-randomimage img {max-width: 188px;height: auto;margin: 4px auto}

/* CUSTOM-MODULE (no-suffix) */
.mod-custom {min-height: 56px}
.mod-custom p {margin: 0;padding: 2px 4px 10px 4px;text-align: left} 

/* LOGIN-MODULE  (no-suffix) */
form.mod-login {margin: 0;padding: 1px 0 2px 0;}
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.visually-hidden {display:block;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: 8px 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}
form.mod-login .btn.input-password-toggle {float: right;width: 28px;height: 28px;margin: -48px 6px 4px 0;padding: 0 4px;background: none}
.icon-eye, .icon-eye-slash  {width: 18px;height: 18px;margin: 0;background: url(../img/icon_eye-blk18.png) center left no-repeat}

 /* LOGOUT-MODULE  (no-suffix) */
form.mod-login-logout {margin: 0;padding: 4px 4px 8px 4px}

/* TAGS-MODULE x2 (no-suffix) */
.mod-tagspopular {min-height: 56px}
.mod-tagspopular .alert {padding-top: 12px}
.mod-tagssimilar {min-height: 52px}
 
/* ARTICLES-ARCHIVED (Module + Result-page, no-suffix) */
.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(--boxBdr)}
@media screen and (max-width: 479px){.com-content-archive .filters button {display: block;margin: 18px 0 0 18px}}

/* Tags in Modules (various, no-suffix) display as buttons */
.tagscloud, .tagspopular {padding-bottom: 10px;}
.tagscloud a.tag-name, .tagspopular a {
	font-size: 13px !important;margin: 6px;padding: 3px 5px;text-align: center;
	color: #fff;background: #3e68e5;border: 1px solid var(--wht100);border-radius: var(--btn--bdr-rd)}


/* ================================================
 *     		          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 {border: 1px solid;border-color: #666;border-radius: var(--btn--bdr-rd)}
a.btn:hover, .btn:hover {/* fallback: */color: #444;text-decoration: none;cursor: pointer}
a.btn-primary, .btn-primary {color: var(--btnPr-upcol);background: var(--btnPr-upbgd);border-color: var(--btnPr-upbdr);box-shadow: 0 2px 6px #777}
a.btn-primary:hover, .btn-primary:hover {color: var(--btnPr-hvcol);background: var(--btnPr-hvbgd);border-color: var(--btnPr-hvbdr)}
a.btn-secondary, .btn-secondary {color: var(--btnSc-upcol);background: var(--btnSc-upbgd);border-color: var(--btnSc-upbdr);box-shadow: 0 2px 6px #888}
a.btn-secondary:hover, .btn-secondary:hover {color: var(--btnSc-hvcol);background: var(--btnSc-hvbgd);border-color: var(--btnSc-hvbdr)}
a.btn-mini, .btn-mini {position: relative;height: 23px;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;color: #fff;background: #27f;border: 0;border-radius: 3px}
a.btn-mini:hover, .btn-mini:hover {color: #fff;background: #16f}
a.btn-info{          color: #fff;background: #3366ff;border-color: var(--blk080)}
a.btn-info:hover {   color: #111;background: #3366ff;border-color: var(--blk080)}
a.btn-success {      color: #fff;background: #237c0c;border-color: var(--blk080)}
a.btn-success:hover {color: #111;background: #26a306;border-color: var(--blk080)}
a.btn-check {       color: #fff;background: #5d636b;border-color: var(--blk080)}
a.btn-check:hover { color: #111;background: #7d838b;border-color: var(--blk080)}
a.btn-warning {     color: #fff;background: #fb6b17;border-color: var(--blk080)}
a.btn-warning:hover{color: #111;background: #fb6b17;border-color: var(--blk080)}
a.btn-danger {      color: #fff;background: #e31818;border-color: var(--blk080)}
a.btn-danger:hover {color: #111;background: #e31818;border-color: var(--blk080)}
.btn:disabled, .btn.disabled, fieldset:disabled .btn {pointer-events: none;opacity: 0.6}
a:not([href]):not([class]), a:not([href]):not([class]):hover {color: var(--colPrime);text-decoration: none}

/* Button-Groups (general) */
.btn-group {display: inline-block;height: 48px;margin: 6px 6px 10px 0;padding: 4px 6px}
.btn-group {border: 1px solid var(--boxBdr);border-radius: var(--boxBrr)}
.btn-group input#filter-search, .btn-group select {margin-top: 5px}

/* LIST-STYLES (general) */
.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}

/* FORMS (general) */
form {font-family: Arial,sans-serif;text-align: left}

	/* 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}

   /* 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)}


/* ================================================
 *  PAGE-Display (specific Joomla pages, NOT Modules) /*
 
/* LOGIN, FORGOT_PASSWORD, FORGOT_USERNAME, USER_REGISTRATION PAGES  */
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}

/* USER-PROFILE PAGE */
.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: 0 4px 1px 5px;width: 40%}
.profile fieldset dd, .profile-edit fieldset dd {display: inline-block;width: 50%;margin: 0 0 1px 2px}
.bg-light {background: #f4f4f4;padding: 6px;color: #000 !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}
	
/* SEARCH PAGE */
.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}

/* SEARCH-RESULTS (at bottom of search-page) */
.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(--colSecon)}
.highlight, mark {background-color: #fe9;color: var(--blk100);padding: 0 3px}

/* ARTICLE-HEADINGs & MENU-HEADINGs ON-PAGE (if switched on) */
.page-header h2,
.subheading-category, .category_title h2, .page-item .item_header h2.item_title,
 h2.item-title  {margin: 6px 0 16px 0;padding: 8px 0 0 0;line-height: 1.1;/*border-top: 1px solid var(--colPrime)*/}
.page-header h2 {padding: 8px 0 0 0 !important} 
.page-header a, .page-header a:hover {text-decoration: none;color: var(--colPrime)}
.blog .page-header h1 {text-align: center}
.item-page .page-header h1 {text-align: center}
.item-page .page-header h2 {}

 /* CATEGORY-BLOG IMAGES: 
  * WARNING: If using the Joomla-Tab to add images, these might appear above the heading. 
  *			 To prevent this add your image in full-size into the text, and if you want 
  *			 text next to the image use the image-class "img-lft" OR "img-rgt".  */
.blog-item {min-height: 180px;padding: 6px;text-align: left;clear: both}
.blog-item img {max-width: 180px;height: auto;margin: 3px auto}
.blog-item img.img-lft {float: left; margin: 3px 6px 6px 0} 
.blog-item img.img-rgt {float: right;margin: 3px 0 6px 6px}
.blog-item img.img-full{display: block;height: auto;max-width: 100%;margin: 0 auto;background-size: 100%}
  /* if you want small images left or right of text in blog-view, but full centered images in article-view, the use: */
 .blog-item img.img-blog-only-lft {float: left; margin: 3px 6px 6px 0}
 .blog-item img.img-blog-only-rgt {float: right;margin: 3px 0 6px 6px}
  /* and then in opened-view it becomes: centered: */
 .item-page img.img-blog-only-lft, .item-pageimg.img-blog-only-rgt {float: none;display: block;margin: 6px auto 12px auto}

/* CATEGORY-BLOG LAYOUT:   WARNING: NOT SAME CLASS AS DEFAULT-JOOMLA4 !!! */
.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}
 /* linked list at bottom of page */
.items-more {padding: 12px 0;color: var(--colPrime)}
.items-more:before {content: "Weitere Berichte:";padding-left: 14px;font-weight: 700}/* is lang-DE ONLY !!! */
.items-more ol li {list-style: none;list-style-image: none}
@media screen and (max-width: 919px) {
	.blog-items.columns-2 .blog-item,
	.blog-items.columns-3 .blog-item {display: block;width: 100%;margin: 10px 0;padding: 4px;border-bottom: 1px solid #888}
	.blog-items.columns-2 .blog-item:last-child,
	.blog-items.columns-3 .blog-item:last-child {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-CONTENTS (table: contents of ONE CATEGORY) */
.category-list {margin: 12px 0 12px 24px}
.content-category label {vertical-align: middle}
.content-category input {margin-top: 5px;height: 30px}
.content-category button.btn-secondary {}
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 !!!  then 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}

@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} }
	
/* CATAGORIES-LIST (div with list of ALL CATEGORIES accessible) */
.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} }

/* SUB-CATEGORY-LIST or BLOG-CHILD */
.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}

/* ARTICLE-ICONS */
a.dropdown-toggle, span.icon-cog, span.caret {display: none;visibility: hidden}
li.email-icon a, li.print-icon a {} /* depricated at time of editing */
.item-page .icons a {font-size: 0;} /* load first, remove Text */
.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(--blk070)}
.item-page .icons a .icon-edit:hover, 
 a.jmodedit:hover {background:  url(../img/icon_edit32.png) top center no-repeat;border: 1px solid var(--blk070)}

/* ARTICLE-INFO (Details-small) */
.btn.dropdown-toggle {display: none;visibility: hidden;height: 0}
dl.article-info {margin: 0 8px 0 0;font-size: 12px;text-decoration: none}
dt.article-info-term {display: none;visibility: hidden;height: 0}
dl.article-info dd, dl.article-info dd a{padding-bottom: 2px;color: var(--blk070)} 
dl.article-info .icon-fw, dl.article-info .hits .icon-eye {display: none}

/* TAGS (tag-btn above/below article - inline) */
ul.tags:before {content: "Tags:";color: var(--colSecon)}
ul.tags {margin: 0 8px 8px 8px;padding: 0}
ul.tags li {list-style: none;list-style-image: none;display: inline-block;margin: 12px 6px;padding: 0}
ul.tags li a {padding: 4px 6px} /* Button = see BUTTONS => btn.info  */
ul.tags li a.btn-info {font-weight: 400;color: var(--blk070);background: var(--wht070);border-color: var(--blk050)}
ul.tags li a.btn-info:hover {color: var(--blk100);background: var(--wht070);border-color: var(--blk080)}

/* TAGS (items-list, catagory-list) */
.tag-category .com-tags-tags__filter label {vertical-align: middle}
.tag-category  ul.list-group li {list-style: none;list-style-image: none}
.tag-category  ul.list-group li h3 {font-size: 15px;padding: 6px 4px}

/* ARTICLE-RATING "Vote" */
.content_rating {margin: 6px 4px 0 4px;max-width: 290px}
 .content_rating .visually-hidden {display: block !important}
 .content_rating p.visually-hidden {display: block;margin: 0;padding: 0 4px 2px 10px;font-size: 12px;color: var(--blk070)} /* don't delete ! */
  /* following 5 lines are from the plugin, do not change them ! */
  .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: #fdb714}
  .content_rating .vote-star-empty svg {width: 1em;height: 1em;fill: #d3d3d3}
  .content_rating .vote-star-half {margin-inline-start: -1em}
form.form-inline .content_vote {margin: -4px 0 30px 16px;padding: 4px 6px;text-align: left;font-size: 12px}
form.form-inline .content_vote label {display: block;height: auto;margin: -8px 0 0 6px;text-align: left;font-size: 14px}
form.form-inline .content_vote select {display: block;width: 120px;margin: 2px auto 10px auto;padding: 0 3px}
form.form-inline .content_vote input.btn {display: block;margin: 4px 0;width: 120px}


/* ================================================
 *     PAGE-NAVIGATION (Joomla-system)             */
 
/* READ-MORE ( Text-only, not button), ELSE DE-ACTIVATE FOR 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: 12px;color: var(--linkUp)}

/* PAGINATION  = "Next | Previous" Buttons, IF ul > li */
.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}

/* PAGIATION  = "Next | Previous" Buttons, if spans */
.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: ">"}

/* PAGER, Summary = "Page 1 of 5"  +  page-blocks */
.com-content-category-blog__navigation {margin: 8px auto 0 auto;text-align: center}
p.counter {padding: 6px 0 2px 0;text-align: center}

/* PAGER  (page-blocks) only */
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 -2px 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: #26e}
nav.pagination__wrapper ul li a:hover {text-decoration: none}
nav.pagination__wrapper ul li a span {cursor: pointer;color: var(--blk070)}
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(--blk100)}
.icon-angle-left:before { content: "<";} .icon-angle-double-left:before { content: "<<"}
.icon-angle-right:before {content: ">";} .icon-angle-double-right:before {content: ">>"}



/* ================================================
 *    System & More (Various)                      */
 
/* SYSTEM-MESSAGES */
#system-message-container {margin: 8px 0}
#system-message-container button {display: none;height: 0}
#close-tpl span {display: block;float: right;margin: 0 6px 0 10px}
#close-tpl a {font-size: 11px;color: #8c8c8c} #close-tpl a:hover {color: #fff;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: 6px 10px;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 0} }
@media screen and (max-width: 639px) {
	.jsMsg, .ieMsg {margin: 6px 0}
	#close-tpl span {float: none;position: relative;margin: 8px auto 4px auto;text-align: center} }

/* hasPopver + hasTooltip (NOT FULLY TESTED !) */
.popover {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 {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}

/* PRINT */
@media print {
.icons ul.dropdown-menu, .content-rating, .content_vote, #nav {display: none;visibility: hidden}
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} }



/* ================================================
 *          Installed Extension Overrdides        * /
 
  /* .moveUp is added @ "1204 and bigger"  ==> pulls div out-of-view when scrolling */
.slider.moveUp {margin: -474px 0 0 0}
@media screen and (max-width: 1179px) {.slider.moveUp {margin: -450px 0 0 0} }
@media screen and (max-width: 1129px) {.slider.moveUp {margin: -376px 0 0 0} }
@media screen and (max-width: 1079px) {.slider.moveUp {margin: -370px 0 0 0} }

 
/* PLUGIN: SIGPLUS ( not Module ! ) */
.slideplus-bottom .slideplus-first,    .slideplus-bottom .slideplus-last,
.slideplus-bottom .slideplus-previous, .slideplus-bottom .slideplus-next {display: none} 
  /* SINGLE-gallery as mini-slider */
 .gallerySingle {display: block;width: 100%;clear: both}
 .gallerySingle .slideplus-container {margin-bottom: 12px !important}
  /* MULTIPLE-galleries, inline-blocks */
 .galleryMulti {margin: 8px auto;text-align: center}
 .galleryMulti .galleryM-frame {display: inline-block;width: 248px;height: 282px;margin: 8px 1.25%} /* width: img+8px, height: img+42px */  
 .galleryMulti .galleryM-frame {text-align: center;border: 1px solid #999;background: #ddd}
 .galleryMulti .galleryM-frame:hover{border: 1px solid #16f;background: #c0ff72}
 .galleryMulti a, .galleryMulti a:hover {color: transparent;text-decoration: none;cursor: pointer}
 .galleryMulti .galleryM-thumb {width: 240px;height: 240px;margin: 3px auto 2px auto;overflow: hidden}
 .galleryMulti .galleryM-thumb img {width: 240px;height: 240px;margin: 0 auto}
 .galleryMulti .galleryM-captn {width: 100%;padding: 6px 2px;font-weight: bold;color: #222;background: #c0ff72} 
 .galleryMulti .galleryM-frame:hover .galleryM-captn {color: #16f}
@media screen and (max-width: 767px){
	.galleryMulti {max-width: 556px;text-align: center}
	.galleryMulti .galleryM-frame {margin: 8px 14px} }

/* ___COOKIEHINT___ */
#redim-cookiehint{position: fixed;bottom: 0;left:0;right: 0;padding: 6px 3px;font-family: Arial, sans-serif;text-align: center}
#redim-cookiehint{z-index: 999999;background: #338;border-top: 4px solid #56b;border-bottom: 4px solid #56b}
#redim-cookiehint .clr {clear: both} #redim-cookiehint.hidden {display: none;visibility: hidden}
#redim-cookiehint .cookiehead, #redim-cookiehint #cookiehintinfo {display: none;visibility: hidden}
.cookiecontent {display: inline-block;max-width: 736px;padding: 0 3px 6px 3px;vertical-align: top}
.cookiecontent {font-size: 13px;line-height: 15px;color: #fff;border-right: 44px solid transparent}
.cookiecontent a, .cookiecontent a:hover {color: #fff !important;padding: 0 3px;text-decoration: underline !important}
.cookiecontent .lgBreak {display: block}
.cookiebuttons {display: inline-block;width: 40px;margin: 0 0 0 -44px;padding: 12px 2px 3px 2px}
.cookiebuttons a.btn {width: 40px;height: auto;padding: 5px 4px 4px 4px;text-align: center;font-size: 13px;line-height: 13px}
.cookiebuttons a.btn {text-decoration: none;color: var(--btnSc-upcol)}
.cookiebuttons a.btn {background-color: var(--btnSc-upbgd);border: 1px solid;border-color: #aaa;border-radius: 4px}
.cookiebuttons a.btn:hover {text-decoration: none;color: var(--btnSc-hvcol)}
.cookiebuttons a.btn:hover {background-color: var(--btnSc-hvbgd);border: 1px solid;border-color: #fff}
@media screen and (max-width: 767px) {.cookiecontent {max-width: 560px;text-align: left} }
@media screen and (max-width: 599px) {.cookiecontent {max-width: 400px} }
@media screen and (max-width: 474px) {.cookiecontent {max-width: 360px;font-size: 12px;line-height: 14px} }
@media screen and (max-width: 399px) {.cookiecontent {max-width: 290px} #redim-cookiehint {overflow-x: hidden} }

/* _____ color-gradients, LOAD AT END of stylesheet !!! _____ */ 
div.gradient-blue {height: 2px;margin: 14px auto;clear: both;background: #338}
div.gradient-blue {background: linear-gradient(90deg, rgba(249,249,249,1) 0%, rgba(51,51,136,1) 50%, rgba(249,249,249,1) 100%)}

/* ==================== EDITING from FRONT-END =============================
 * It requieres full bootstrap-CSS, and bootstrap-JS to work properly !
 * That additional CSS + JS would destroy the purpose of minimizing CSS here,
 * therefore: FRONT-END-EDITING IS NOT POSSIBLE on this Template.
 * Besides, you should not use such unsecure methods to work on your site !
 * if you run a site where it would be necessary, we would've installed it.
 * ======================================================================== 
 *
/* ___________THE END______thankyou for visiting _____ goodbye ___________ */