/* import fonts: "Open-Sans" => Light 300 + Regular 400 + Bold 600 */ @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: italic;font-weight: 300; src: url('../fonts/OpenSans-LightItalic.eot') format('eot'), url('../fonts/OpenSans-LightItalic.woff2') format('woff2'), url('../fonts/OpenSans-LightItalic.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: 600; src: url('../fonts/OpenSans-Bold.eot') format('eot'), url('../fonts/OpenSans-Bold.woff2') format('woff2'), url('../fonts/OpenSans-Bold.ttf') format('ttf'); } /* special-page css, set in menu */ .com-content-article.noContents {margin-bottom: -60px} .links666 a, .links666 a:link {color: var(--txtPrime);font-weight: 300;} .links666 h4 {padding-bottom: 0} /* NORMALIZE = Reset Browser CSS * Copyright Website-Bauen.de https://www.website-bauen.de * ============================================================ */ * {margin: 0;padding: 0;vertical-align: top; cursor: default} *, *:before, *:after, div {box-sizing: border-box} html {font-family: 'Open Sans', sans-serif;font-size: 18px;font-weight: 300;color: var(--txtPrime);line-height: 1.4;background: var(--bgdPrime)} body {width: 100%;max-width: 2340px;min-width: 312px;margin: 0 auto} article, aside, details, figcaption, figure, form, footer, header, hgroup, nav, main, section, summary {display: block} audio, canvas, video, span { display: inline-block;} audio:not([controls]) {display: none;height: 0} b, strong {font-weight: 400} u {text-decoration: underline;} em {font-style: italic;font-weight: 300} small {font-size: 84%} sub {font-size: 70%;line-height: 0;position: relative;vertical-align: baseline;bottom: -4px} sup {font-size: 70%;line-height: 0;position: relative;vertical-align: baseline;top: -4px} abbr[title] {border-bottom: 1px dotted;} dfn {font-style: italic} q {quotes: none;} q:before, q:after {content: "";content: none;} [hidden] {display: none} ul, ol {margin: 0 6px 6px 18px;padding: 0} ul ul, ol ol {margin: 0 0 0 12px} ul li, ol li {margin: 0;padding: 0 1px 1px 1px} ul li a {list-style-type: disc} ul li ul li a {list-style-type: circle} dl{margin: 10px 0;} dd {margin: 0 0 0 8px} nav ul, nav ol {list-style: none;list-style-image: none} table {border-collapse: collapse;border-spacing: 0;} table tr td {padding: 2px} table ul {margin: 0 0 4px 10px;padding: 0} table ul li {line-height: 1.4;list-style-type: circle} table ul li ul {display: none} hr {width: 96%;height: 0;margin: 0 auto;padding: 0 14px;border: 0;border-top: 1px solid var(--bdrPrime)} pre, blockquote {position: relative;width: 97%;max-width: 720px;margin: 6px auto 10px auto} pre, blockquote {border: 1px solid var(--bdrLights);border-radius: 6px;background: var(--bgdLight)} pre {white-space: pre;white-space: pre-wrap;word-wrap: break-word;padding: 8px;overflow-x: scroll} pre, code, kbd, samp {font-family: "courier new", monospace;font-size: 12px;color: var(--black080)} blockquote {padding: 6px 6px 3px 36px;} blockquote {font-family: Georgia, serif;font-size: 15px;color: #777} 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 !important;font-size: 13px;margin: 0;padding: 0} blockquote cite {display:block;font-size: 15px;font-style: normal;line-height: 1;text-align: right;padding-right: 30px} blockquote cite {font-family:'Book Antiqua', Palatino, Papyrus, Georgia, serif;font-style: italic} input, textarea, label, button, select {font-family: Arial, sans-serif;line-height: 1.4} input {padding: 4px;min-height: 28px;width: auto;cursor: text} input, textarea, select {outline: 0;color: var(--txtDarkes);background: var(--inpUpBgd);border-radius: 3px;border: 1px solid var(--inpUpBdr)} input:hover, textarea:hover, select:hover {outline: 0;cursor: text;background: var(--inpHvBgd);border: 1px solid var(--inpHvBdr)} input[type="button"], input[type="reset"], input[type="submit"] {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: 16px;padding: 0 6px;margin: 4px;white-space: normal} select {min-height: 28px;border-radius: 0} select option {margin: 0;padding: 4px 2px 2px 2px;font-size: 13px;color: #222} button {cursor: pointer;-webkit-appearance: button;letter-spacing: 0.6px} 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: 38px;font-weight: 300;padding: 12px 0 8px 0;color: var(--txtPrime);text-transform: uppercase} h2 {font-size: 32px;font-weight: 300;padding: 12px 0 8px 0;color: var(--txtPrime)} h3 {font-size: 26px;font-weight: 400;padding: 12px 0 8px 0;color: var(--txtPrime)} h4 {font-size: 20px;font-weight: 400;padding: 10px 0 8px 0;color: var(--txtLight)} h5 {font-size: 16px;font-weight: 600;padding: 10px 0 4px 0;color: var(--txtLight)} h6 {font-size: 15px;font-weight: 600;padding: 10px 0 4px 0;color: var(--txtLight)} p {font-size: 18px;font-weight: 300;text-align: justify;padding: 0 0 20px 0} a, a:link {color: var(--linksHv);font-weight: 400;text-decoration: none} a:hover, a:focus {color: var(--linksHv);text-decoration: underline;cursor: pointer} /* _____ Template-Colors _____*/ :root { --bgdPrime: #ffffff; /* wht-100 */ --bgdLight: #f8f8f8; /* wht--90 */ --bgdDark: #3e454c; /* blk--80 */ --bgdLightr: #29acf2; /* blu-med */ --bgdLights: #ffffff; /* wht-100 */ --bgdDarker: #2f343a; /* blk--85 */ --bgdDarkes: #2e3338; /* blk--90 */ --txtPrime: #666666; /* primary */ --txtLight: #29acf2; /* light */ --txtDark: #4c4c4c; /* dark */ --txtLightr: #f2f2f2; /* lighter */ --txtLights: #ffffff; /* very light */ --txtDarker: #3b3b3b; /* darker */ --txtDarkes: #222222; /* darkest */ --bdrPrime: #29acf2; /* blu-med */ --bdrLightr: #777777; --bdrLights: #bbbbbb; --bdrDarker: #444444; --bdrDarkes: #222222; --linksUp: #0099ee; /* link-up */ --linksHv: #006699; /* link-hover */ --inpUpCol: #444444; /* up color */ --inpUpBgd: #f2f2f2; /* up backgr */ --inpUpBdr: #777777; /* up border */ --inpHvCol: #111111; /* in color */ --inpHvBgd: #ffffff; /* in backgr */ --inpHvBdr: #111111; /* in border */ --white080: #f0f0f0; /* White 80% */ --black080: #333333; /* Black 80% */ --bdr-r3: 3px; /* sm box */ --bdr-r5: 5px; /* md box */ --bdr-r7: 7px; /* lg box */ --info: #3e68e5; /* J- blue */ --success: #26a306; /* J- green */ --check: #888888; /* J- grey */ --warning: #fc9603; /* J- orange */ --danger: #fc3403; /* J- red */ } /* ======================================================================== * TEMPLATE > GENERAL-CSS * Copyright Website-Bauen.de https://www.website-bauen.de * ======================================================================== */ header, nav, main, footer, section {display: block;width: 100%;height: auto} .row {margin: 0 auto;padding: 0;width: 100%;max-width: 1220px} .row.container2340 {max-width: 2340px} .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} .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} .page-header h2 {border-top: 1px solid var(--txtPrime)} .page-header a, .page-header a:hover {text-decoration: none;font-size: 90%;color: var(--txtLight)} p.lead {font-size: 106%;color: #222} p.indent {display: block;margin: 0 0 0 16px} p.small {font-size: 84%;font-weight: normal;padding: 10px 0 4px 0} li .small {font-size: 84%;padding: 2px 0 0 0} span.red {color: #fc3403} iframe.map {width: 100%;max-width: 804px;height: 436px;border: 0;padding: 2px} hr.light{width: 100%;height: 0;margin: 10px auto 32px auto;border: 0;border-top: 1px solid #c8b165;clear: both} .btn a, .btn a:link, a.btn, a .btn, a:link.btn {text-decoration: none !important} .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-des {font-family: Arial, sans-serif;font-style:italic;font-size: 14px;padding: 6px 4px} .vbot {vertical-align: baseline} .upcase {text-transform: uppercase} .space20 {height: 20px;} .space40 {height: 40px} .visually-hidden {display: none;height:0;padding:0;font-size: 0} /* Tables */ table {margin: 2px 0 16px 0} table th, table td {padding: 3px 5px} table.tbl-light, .table-bordered {border: 1px solid var(--bdrLights);background: #fcfcfc} table.tbl-light th, .table-bordered th {border-right: 1px solid var(--bdrLights)} table.tbl-light td, .table-bordered td {border: 1px solid var(--bdrLights)} table.tbl-dark {border: 1px solid var(--bdrPrime);background: #f2f2f2} table.tbl-dark th {border-right: 1px solid var(--bdrPrime)} table.tbl-dark td {border: 1px solid var(--bdrPrime)} table.striped, .table-striped {border: 1px solid var(--bdrPrime);background: transparent} table.striped th, .table-striped th {border-right: 1px solid var(--bdrPrime);background: var(--bgdLightr);color: var(--txtLights)} table.striped td, .table-striped td {border: 1px solid var(--bdrPrime)} table.striped tr:nth-child(odd), .table-striped tr:nth-child(odd) {background: transparent} table.striped tr:nth-child(even), .table-striped tr:nth-child(even){background: #f2f2f2} /* Hide Or Show */ .lg-hidden {display: none} .lg-visible {display: block} @media screen and (max-width: 767px) { .md-visible {display: block} .md-hidden {display: none} } @media screen and (max-width: 639px) { .sm-visible {display: block} .sm-hidden {display: none} } @media screen and (max-width: 639px) { .img-lft, .img-rgt {display: block;float: none;margin: 6px auto;text-align: center} } @media screen and (max-width: 599px) { html {font-size: 15px} h1{font-size: 26px;padding: 14px 0 6px 2px;} h2 {font-size: 22px;padding: 10px 0 5px 2px} h3 {font-size: 20px;padding: 8px 0 4px 2px} h4 {font-size: 18px;padding: 7px 0 4px 2px} h5, h6 {font-size: 16px;padding: 6px 0 4px 2px} p {font-size: 15px;text-align: left} p.lead {font-size: 16px} p.small {font-size: 12px} blockquote, blockquote p, cite {font-size: 13px} } /* _____ HEADER _____ */ header{border-top: 44px solid #2e3338;border-bottom: 12px solid #29acf2} .headerSmalls {padding: 48px 0 24px 0} .hdrLft {float: left;width: 100%;border-right: 254px solid transparent;min-height: 60px;padding: 0 4% 8px 4%} .hdrRgt {float: right;width: 244px;height: auto;margin: 0 2px 0 -250px;padding: 0;text-align: center} .hdrLft a .brand {font-size: 22px;padding: 10px 4px 10px 5%;font-weight: 600;color: #3e454c} .hdrLft a:hover, .hdrLft img:hover {text-decoration: none;cursor: pointer} .hdrRgt .card.phoneTop {background: none;border:0;border-radius:0;padding: 20px 0 6px 0;text-align: left} .hdrRgt .card.phoneTop .mod-custom a {color: #3e454c;font-size: 24px} .hdrRgt .card.phoneTop .mod-custom img {margin: 0 12px 0 0;} @media screen and (max-width: 980px) { .headerSmalls {padding: 38px 0 16px 0} .hdrLft {padding: 0 6px 6px 6px} } @media screen and (max-width: 767px) { header {border-top: 50px solid #2e3338} .headerSmalls {padding: 10px 0 4px 0} .hdrLft, .hdrRgt {float: none;display: block;border: 0;width: 96%;margin: 0 auto;padding:0} .hdrLft a .brand {font-size: 18px} .hdrRgt .card.phoneTop {padding-top: 6px} } @media screen and (max-width: 599px) {header{border-bottom: 6px solid #29acf2} } /* ___ NAV ___ */ nav.row.center {margin-top: -44px;text-align: center} .navToggler, ul.main-nav li span.nav-header, ul.main-nav li a .ardw {display: none;width: 0;height: 0} .menu-container, .menu-container.navClosed {display: block} ul.main-nav {display: table;width: 100%;table-layout: fixed} ul.main-nav {font-family: Arial, sans-serif;margin: 0;padding: 0} ul.main-nav li {list-style: none;list-style-image: none;text-align: center} ul.main-nav li {float: none;display: table-cell;white-space: nowrap;padding: 28px 2px} /* fix j6, media-css */ ul.main-nav button {display:none;visibility: hidden;height: 0;width: 0;padding: 0} .main-nav .mod-menu__sub[aria-hidden="true"] {display: block} /* end j6-fix ... do not delete these 2 lines !!! */ ul.main-nav li a, ul.main-nav li.divider span {position: relative;margin: 0;padding: 20px 14px} ul.main-nav li a, ul.main-nav li.divider span {font-size: 16px;font-weight: normal;text-decoration: none;outline: none} :root { /* 1.lvl */ --mn1UpBgd-li: #454c54; --mn1UpBdr-li: #2e3338; --mn1UpCol-a: #ffffff; --mn1HvBgd-li: #2e3338; --mn1HvBdr-li: #2e3338; --mn1HvCol-a: #ffffff; --mn1AcBgd-li: #29acf2; --mn1AcBdr-li: #29acf2; --mn1AcCol-a: #ffffff; /* 2.lvl */ --mn2UpBgd-ul: #3e454c; --mn2UpBdr-ul: none; --mn2UpBgd-li: green; --mn2UpBdr-li: none; --mn2UpCol-a: #ffffff; --mn2HvBgd-li: brown; --mn2HvBdr-li: none; --mn2HvCol-a: #29acf2; --mn2AcBgd-li: #d0f; --mn2AcBdr-li: none; --mn2AcCol-a: #29acf2; } ul.main-nav li {background: var(--mn1UpBgd-li);border-left: 1px solid var(--mn1UpBdr-li)} ul.main-nav li:last-child {border-right: 1px solid var(--mn1UpBdr-li)} ul.main-nav li:hover { background: var(--mn1HvBgd-li);border-left: 1px solid var(--mn1HvBdr-li)} ul.main-nav li:last-child:hover {border-right: 1px solid var(--mn1HvBdr-li)} ul.main-nav li.active {background: var(--mn1AcBgd-li);border-left: 1px solid var(--mn1AcBdr-li);border-right: 1px solid var(--mn1AcBdr-li)} ul.main-nav li a, ul.main-nav li.divider span {color: var(--mn1UpCol-a)} ul.main-nav li:hover a { color: var(--mn1HvCol-a)} ul.main-nav li.active a {color: var(--mn1AcCol-a);text-decoration: none} ul.main-nav li ul {visibility: hidden;position: absolute;z-index: 900;height: 0;background: var(--mn2UpBgd-ul)} ul.main-nav li:hover ul {visibility: visible;height: auto;width: 282px;margin: 28px 0 0 -3px;padding: 8px 0} ul.main-nav li:last-child ul {margin-left: -27px} ul.main-nav li ul li {float: none;display: block;margin: 4px 0;padding: 0;border: 0;text-align: left;} ul.main-nav li ul li:last-child {border-right: 0} ul.main-nav li ul li, ul.main-nav li.active ul li, ul.main-nav li ul li:hover, ul.main-nav li.active ul li:hover, ul.main-nav li.active ul li.current:hover {background: none;border: 0} ul.main-nav li ul li a {display: block;font-size: 16px;margin: 0;padding: 4px 1px 4px 12px} ul.main-nav li ul li a {text-decoration: 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(--mn2UpCol-a)} ul.main-nav li ul li a:hover, ul.main-nav li.active ul li a:hover {color: var(--mn2HvCol-a)} ul.main-nav li.active ul li.current a {text-decoration: underline; color: var(--mn2AcCol-a)} ul.main-nav li.active ul li.current a:hover {color: var(--mn2AcCol-a);cursor: default} 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: 998px) { ul.main-nav li {padding: 16px 1px} ul.main-nav li a, ul.main-nav li.divider span {position: relative;margin: 0;padding: 12px 6px} ul.main-nav li:hover ul {width: 272px;margin: 16px 0 0 -3px} ul.main-nav li:last-child ul {margin-left: -90px} ul.main-nav li ul li a {padding: 4px 1px 4px 5px} } @media screen and (max-width: 767px) { .navToggler {display: block;float:right;width: 36px;height: 32px;margin: 2px 10px 4px 0;outline: none} .navToggler {font-size: 30px;line-height: 0.9;text-align: center;cursor: pointer;outline: none} .navToggler {color: #fff;background: var(--bgdLightr);border: 1px solid #fff;border-radius: 6px} ul.main-nav {display: block;height: auto;width: 460px} ul.main-nav {margin: 41px auto 8px auto;padding: 2px 0;text-align: left} ul.main-nav {border: 0;z-index: 999} ul.main-nav li {display: block;position: relative;width: 100%;margin: 0;padding: 4px 0;border: 0;text-align: left} ul.main-nav li:last-child, ul.main-nav li:hover, ul.main-nav li.active, ul.main-nav li.active:hover {margin: 0;padding: 4px 0;border: 0} ul.main-nav li a {display: block;width: 85%;padding: 6px 2px 6px 10px;font-size: 16px} ul.main-nav li:hover ul, ul.main-nav li:hover:last-child ul, ul.main-nav li:hover ul li {display: none;border: 0} ul.main-nav li:hover ul, ul.main-nav li:hover:last-child ul, ul.main-nav li.subOpen ul, ul.main-nav li.subOpen:hover ul {width: 282px;height: auto;margin: 0 0 0 30px;padding: 0 3px 3px 3px} ul.main-nav li.subOpen ul, ul.main-nav li.subOpen:hover ul {visibility: visible;display: block;position: relative;border: 0} ul.main-nav li.subOpen ul li, ul.main-nav li.subOpen:hover ul li, ul.main-nav li.subOpen ul li:last-child, ul.main-nav li.subOpen ul li:hover {display: block;margin:0 0 7px 0;padding: 0;border: 0} ul.main-nav li.subOpen ul li a {width: 99%;font-size: 16px;font-weight: normal;margin: 0;padding: 3px 2px} ul.main-nav li.subOpen ul li a:hover {color: #fff} ul.main-nav li.subOpen ul li.current a{color: #fff;text-decoration: underline} /* fix j-6, media-css */.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: 2px;right: -46px;width: 32px;height: 32px;padding: 4px 0} ul.main-nav li a span.ardw {pointer-events: none !important;text-decoration: none;font-size: 16px;color: #000;text-align: center} ul.main-nav li a span.ardw {background: #eee;border-radius: 50%} ul.main-nav li a span.ardw:before {content:'v';pointer-events: none} 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} 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 {top: 1px;right: -50px} } /* _____ MAIN _____*/ main {min-height: 500px;width: 100%;margin: 0 auto;padding: 4px 4px 16px 4px} /*;border: 1px solid red*/ #contents.oneCol {display: block;margin: 4px 0} #contents.twoCol {float: left;width: 100%;margin: 4px 0;border-right: 270px solid transparent} #rightCol { float: right;width: 248px;height: auto;margin: 4px 0 0 -274px;padding: 2px 0 18px 0;text-align: center} #theComponent {padding: 4px 10px 16px 10px;clear: both} #rightCol.addColPadding {/* to align top of the first module, if both both positions are used */} @media screen and (max-width: 839px) { #contents.twoCol {display: block;margin: 4px 0;padding: 0;border:0;clear: both} #theComponent {padding: 4px 4px 16px 4px} #rightCol {float: none;display: block;width: 99%;margin: 4px auto;clear: both;} #rightCol, #rightCol.addColPadding {padding: 4px 0} } @media screen and (max-width: 599px) {#theComponent {padding: 4px 2px 14px 2px} } /* _____ FOOTER _____ */ footer {font-family: Arial, sans-serif;font-size: 16px;} footer {padding: 6px 5px 0 5px;margin: 0;color: var(--txtLights);background: var(--bgdLightr)} footer a {font-weight: normal;color: var(--txtLights);text-decoration: none} footer a:hover {color: var(--black080);text-decoration: underline} footer hr {width: 99%;max-width: 1080px} #copyright {margin:0 auto;padding: 8px 0 0 0;color: #111;} #scrollBtn {display: none;position: fixed;bottom: 88px;right: 10px;padding: 7px;z-index: 99;color: #fff} #scrollBtn {border: 1px solid #fff;border-radius: 7px;outline: none;background: var(--bgdLightr)} #scrollBtn {width: 40px;height: 36px;font-size: 14px;color: var(--txtLights)} #scrollBtn:hover {border: 1px solid #16f;background-color: #16f;color: #fff;text-decoration: none;cursor: pointer} #close-tpl {margin: -6px auto 6px auto;padding-right: 8px;font-size: 12px;text-align: right} #close-tpl a, #close-tpl a:hover {color: transparent} .ftrBox-outer {margin-top: 12px} .ftrBox {display: inline-block;height: auto;max-width: 360px;min-width: 220px} .ftrBox.lft {width: 30%; margin: 8px 0; text-align: left} .ftrBox.ctr {width: 36%; margin: 8px 18px;text-align: center} .ftrBox.rgt {width: 28%; margin: 8px 0; text-align: center} .ftrBoxFull {width: 100%;margin: 8px auto;text-align: center} .ftrAdr-outer {} .ftrAdrBox1 {width: 220px} .ftrAdrBox2 {width: 240px;margin: 0 0 0 54px;text-align: left} span.adrLine1, span.adrLine2, span.adrLine3 {padding: 0 0 6px 30px;text-align: left} span.adrLine4, span.adrLine5, span.adrLine6 {padding: 0 0 6px 30px;text-align: left} span.adrLine4 a, span.adrLine5 a, span.adrLine6 a {color: var(--txtLights)} span.adrLine1 {background: url(../img/fa-home_wht20.png) top left no-repeat} span.adrLine4 {background: url(../img/fa-phon_wht20.png) top left no-repeat} span.adrLine5 {background: url(../img/fa-prnt_wht20.png) top left no-repeat} span.adrLine6 {background: url(../img/fa-envl_wht20.png) top left no-repeat} @media screen and (max-width: 899px) { .ftrBox.ctr {margin: 8px 9px} .ftrAdrBox2 {margin: 0 0 0 22px} } @media screen and (max-width: 767px) { .ftrBox.lft, .ftrBox.ctr, .ftrBox.rgt {position: relative;display: block;text-align: center} .ftrBox.lft, .ftrBox.ctr, .ftrBox.rgt {width: 100%;margin: 4px auto;padding: 0 0 0 20px} .ftrAdrBox1,.ftrAdrBox2 {width: 250px;margin: 0 auto 8px auto;text-align: left} .md-visible {display: block} .md-hidden {display: none} } @media screen and (max-width: 639px) { .img-lft, .img-rgt {display: block;float: none;margin: 6px auto;text-align: center} .sm-visible {display: block} .sm-hidden {display: none} } @media screen and (max-width: 599px) { .ftrbox.lft {padding-left: 30px} .ftrbox.rgt {padding-left: 5px} #copyright {padding-left: 6px;} #close-tpl {margin: 4px 0 6px 0} } /* ======================================================================== * Styling additional HTML * Copyright Website-Bauen.de https://www.website-bauen.de * ======================================================================== */ /* sub-pages "LEISTUNGEN" */ .leist-outer {margin: 0 auto;text-align: center;clear: both} .leist-inner {clear: both;margin: 8px auto} .leist-inner:first-child {min-height: 224px;max-width: 934px;} .leist-inner.framed {border: 1px solid #ddd;margin-top: 24px;padding: 0 2px 8px 2px;background: #f2f2f2} .leist-rgt {float: right;width: 100%;min-height: 120px;margin: 0;padding: 20px 2px 28px 5%;border-left: 308px solid transparent;text-align: left} .leist-lft {float: left;width: 300px;min-height: 120px;margin: 0 -302px 0 0;padding: 8px 2px 28px 0;text-align: center} .leist-btn1 {margin: 4px 0 8px 18px} .leist-btn2 {margin: 12px auto} .leist-btn2 a.btn.btn-primary.arwr {padding: 21px 52px 21px 6px; text-align: center;} .top-empty .leist-btn2 a.btn.btn-primary.arwr {margin-left: 47px} /* add a

above the */ .leist-hdr1 {font-size: 34px;padding-bottom: 16px} .leist-hdr2 {font-size: 30px} .leist-refBlock {display: inline-block;width: 305px;min-height: 194px;margin: 16px 2% 8px 2%} .leist-refBlock {border: 2px solid #3e454c;background: #3e454c;text-align: center} .leist-refBlock:hover {border: 2px solid #09e;background: #eee;color: #09e !important;cursor: pointer} .leist-refBlock a span {display: block;width: 100%;height: 30px;padding: 4px 2px 2px 2px;line-height: 1.1;overflow: hidden;color: #fff} .leist-refBlock:hover a span, .leist-refBlock a span:hover {color: #09e !important;cursor: pointer} .leist-refBlock img {display: block;position: relative;width: 299px;height: 168px;margin: 2px} .leist-refBlock img:hover {cursor: pointer} /* page (2) "Ref_LISTEN" + "Ref_PROJEKTE" */ .listOuter {max-width: 1240px;margin: 0 auto;padding-bottom: 20px;text-align: center;clear: both} .listOuter h1 {text-align: left} .listBlock {float: left;width: 282px;height: auto;margin: 6px 7px 14px 7px} .listBlock {border: 2px solid #3e454c;background: #3e454c;text-align: center} .listBlock:hover {border: 2px solid #09e;background: #eee;cursor: pointer} .listBlock a span {display: block;width: 100%;height: 47px;padding: 4px 2px 4px 2px;line-height: 1.1;overflow: hidden;color: #fff} .listBlock:hover a span, .leist-refBlock a span:hover {color: #09e;cursor: pointer} .listBlock img {display: block;position: relative;width: 272px;height: auto;margin: 3px auto} .listBlock img:hover {cursor: pointer} /* float will not cover background-color for "inverted" !!! undo the float here: */ .listOuter.inverted h1 {padding-left: 10px;color: #fff} .listOuter.inverted .listBlock {Float: none;display: inline-block;width: 286px;margin: 6px 14px 14px 0} .listOuter.inverted .listBlock {border: 2px solid #09e;background: #4c545d} .listOuter.inverted .listBlock:hover {background: #6a788d;cursor: pointer} .listOuter.inverted .listBlock a span {font-size: 16px;color: #fff} .listOuter.inverted .listBlock:hover a span, .leist-refBlock a span:hover {color: #fff;cursor: pointer} .listOuter.inverted .listBlock img {width: 274px;height: auto;margin: 4px auto} /* sub-pages "LISTE" */ .refListe ul li {list-style: none;padding: 6px 0 8px 0} .refListe ul li strong {font-weight: bold} /* sub-pages "PROJEKTE" */ .splitProject {clear: both;} .splitProject .blockLft {display: inline-block;float: left; width: 64%} .splitProject .blockRgt {display: inline-block;float: right;width: 32%;margin-bottom: 20px} .splitProject .blockRgt img {width: 100%;max-width: 374px;margin: 0} .holdBlocks {width: 100%;text-align: center;clear: both} .holdBlocks .img-blockInline {display: inline-block;margin: 0 5.1%} .splitProject .blockRgt .img-des, .holdBlocks .img-blockInline .img-des {display: block} @media screen and (max-width: 1240px) { .listOuter {max-width: 919px} .holdBlocks .img-blockInline {margin: 8px 20px 4px 0 } } @media screen and (max-width: 939px) { .listOuter {max-width: 616px} .splitProject .blockLft {width: 55%} .splitProject .blockRgt {width: 40%} } @media screen and (max-width: 767px) { .splitProject .blockLft, .splitProject .blockRgt {float: none;display: block;width: 100%} .splitProject .blockRgt {text-align: center;} .splitProject .blockRgt img {max-width: 420px;margin: 6px auto} .leist-inner, .leist-inner:first-child, .leist-inner.framed {margin: 0 auto;border: 0;} .leist-lft, .leist-rgt {float: none;display: block;width: 100%;margin: 0 auto;} .leist-rgt {border: 0;padding: 0} .top-empty .leist-btn2 {text-align: left} .top-empty .leist-btn2 a.btn.btn-primary.arwr{margin: 4px 0 4px 18px} } @media screen and (max-width: 639px) { .leist-hdr1 {font-size: 24px} .leist-hdr2 {font-size: 20px} .listBlock, .listBlock.inverted {float: none;display: block;position: relative;width: 282px;height: auto;margin: 18px auto} .listOuter h1 {text-align: center} .listOuter.inverted h1 {padding-left: 0} } /* ======================================================================== * JOOMLA-SYSTEM CSS * Copyright Website-Bauen.de https://www.website-bauen.de * ====================================================================== */ .no-card {display: block;width: 100%;border: 0;border-radius:0;margin: 0;text-align: left} .mainLine, .compLine {width: 100%;max-width: 1220px;height: auto;margin: 4px auto 8px auto;padding: 4px 0;clear: both} .card {display: inline-block;height: auto;width: 240px;padding: 2px 6px;background:var(--bgdLight)} .card{vertical-align: top;border: 1px solid var(--bdrPrime);border-radius: 7px} .card {font-family: Arial, sans-serif;font-size: 13px;text-align: center;color: var(--txtPrime)} .card img {max-width: 220px;margin: 4px auto 6px auto} .card label.element-invisible {display: none} .card h3 {margin: 0 -1px 8px -1px;padding: 4px 0;z-index: 50} .card h3 {font-size: 18px;line-height: 1;font-weight: normal;text-align: center;color: var(--txtLight)} .card p {font-size: 13px;line-height: 1.3;margin: 4px 0 4px 0;padding: 0;text-align: left} .card ul li { list-style: none;list-style-image: none;text-align: left;margin: 0;padding: 1px 0} .card a, .card li a {font-size: 13px;text-decoration: none} .card a:hover, .card li a:hover, .card li a:hover span{text-decoration: underline} .card .pretext p, .card .posttext p {font-size: 13px;padding: 6px 0;text-align: center} .card .btn.btn-primary {width: 156px} #rightCol .card {display: block;margin: 4px auto 24px auto} .mainLine .card {display: inline-block;margin: 0 16px 12px 0} .compLine .card {display: inline-block;margin: 0 12px 12px 0} .wide {width: 100%;max-width: 2340px;height: auto;margin: 4px 0 0 0;padding: 0;clear: both} .wide .card {width: 100%;border: 0;border-radius: 0;margin: 0 auto} .wide .card.mod-custon {max-width: 1220px} /* only the background goes wide */ .wide .card.slider {max-width: 2340px;padding: 0} /* all goes wide */ .wide .p25_top-wide {margin-top: -4px;} /* ADDITIONAL SUFFIX (where-ever required) */ .card.full {display: block;width: 98.5%;margin: 0 auto;padding: 0} .card.full img {display: block;margin: 0 auto;height: auto;width: 100%;max-width: 1220px} .card.nbdr {border: 0} .card.nbrr {border-radius: 0} .card.nbgd {background: none} .card.light{background: var(--bgdLights)} .card.dark {background: var(--bgdDark);color: var(--txtLights)} .card.dark h3, .card.dark p {color: var(--txtLights) !important} .card.bigPad {padding-top: 30px;padding-bottom: 30px} .card.fontNormal {font-family: 'Open Sans', sans-serif} /* Hide or show */ #rightCol .card {margin: 20px auto 6px auto;text-align: left} .lg-only, .card.lg-only { display: block; height: auto} .md-lg-only, .card-md-lg-only {display: block; height: auto} .md-only, .card.md-only { display: none;height: 0} .sm-md-only, .card.sm-md-only {display: none;height: 0} .sm-only, .card.sm-only { display: none;height: 0} @media screen and (max-width: 1180px){ .mainLine .card, .compLine .card {margin: 14px 8px 12px 8px} } @media screen and (max-width: 767px){ #rightCol .card {display: inline-block;margin: 14px 8px 12px 8px} .lg-only, .card.lg-only {display: none;height: 0} .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, .mainLine .card {display: block;position: relative;margin: 10px auto 25px auto} #rightCol .card:last-child, .mainFull .card:last-child, .mainLine .card:last-child {margin-bottom: 10px} .md-lg-only, .card.md-lg-only {display: none;height: 0} .md-only, .card.md-only {display: none;height: 0} .sm-only, .card.sm-only {display: block;height: auto} } /* Modules WITH SUFFIX * * LANGUAGE-SWITCHER => add suffix: _lang => in header ! */ .card.lang {float: right;display: inline-block;width: auto;margin: 3px;padding: 4px;text-align: right} .card.lang {background: none;border: 0;} .card.lang .mod-languages {height: 20px;width: 60px;background: red} /* set width acc. to how many flags */ .card.lang .mod-languages ul {margin: 0;padding: 0} .card.lang .mod-languages li {margin: 0 6px 0 1px;padding: 0} .card.lang .mod-languages li a, .card.lang .card.lang li a:hover {text-decoration: none;cursor: pointer;} .card.lang .mod-languages li a img {border: 1px solid var(--black080)} .card.lang .mod-languages li:hover a img, .card.lang .card.lang li.lang-active a img {border: 1px solid var(--white080)} /* SEARCH-MODULE => add suffix: _searchHorz <= displayed horizontaly WITH IMAGE => in header ! * * the ordinary "search-module" WITH BUTTON gets no suffix */ .card.searchHorz {float: right;display: inline-block;width: auto;margin: 0 4px;padding: 4px;text-align: right} .card.searchHorz {background: none;border: 0;} .card.searchHorz .form-search {min-height: 36px;width: 206px;clear: both} .card.searchHorz .form-search label {} .card.searchHorz .form-search input {float: left;display: inline-block;height: 28px;width: 148px;margin: 0 -2px 0 6px;border-radius: 0;vertical-align: top} .card.searchHorz .form-search button.btn {float: right;display: inline-block;height: 28px;width: 26px;margin: 0 6px 0 -2px;padding: 0 0 0 3px} .card.searchHorz .form-search button.btn {min-height: 28px;border: 1px solid var(--inpUpCol)} .card.searchHorz .form-search button.btn {border-left: 0;border-radius: 0;font-size: 0;overflow: hidden;vertical-align: top;} .card.searchHorz .form-search button.btn.btn-primary:hover {background: var(--bgdLightr);border: 1px solid var(--inpHvCol);border-left: 0} .card.searchHorz .form-search span.icon-search {display: block;width: 18px;height: 18px;margin: 0;padding: 0} .card.searchHorz .form-search span.icon-search {background: url(../img/icon_search-blk18.png) center right no-repeat} /* BUT IF .searchHorz is in rightCol: */ #rightCol .card.searchHorz {float: none;display: block;width: 240px;min-height: 56px;margin: 24px auto 24px auto} #rightCol .card.searchHorz {border: 1px solid var(--bdrPrime);background: var(--bgdLight)} #rightCol .card.searchHorz .form-search input {margin: 0 -2px 0 28px} /* both seach-modules */ .card .mod-finder__advanced.js-finder-advanced {display: none;height: 0;padding: 0} /* Slider => add suffix: _slider */ .card.slider img {width: 100%;max-width: 2340px;padding: 0} /* BREADCRUMBS => add suffix: _path */ .card.path {display: block;width: 99%;border: none;border-radius:0;margin: 12px 0;clear: both;padding: 8px 0 4px 0;background: #eee} .card.path h3 {display: none;visibility: hidden} .breadcrumb {width: 100%;margin: 0;padding: 0;text-align: left;overflow-x: hidden} .breadcrumb li {list-style: none;display: inline;margin: 0 1px;padding: 0} .breadcrumb li {color: var(--txtPrime)} .breadcrumb li, .breadcrumb li a span {font-size: 16px} .breadcrumb li.mod-breadcrumbs__here {} .breadcrumb li a, .breadcrumb li a span {color: var(--linksUp);text-decoration: none} .breadcrumb li span {color: var(--linksUp);text-decoration: none} .breadcrumb li a span:hover {cursor: pointer;color: var(--linksHv)} .breadcrumb li.active, .breadcrumb li.active span {color: var(--linksUp)} .breadcrumb li a span {background: url(../img/arrow-rgt_org10.png) center right no-repeat;padding: 0 16px 0 1px} /* FOOTER-MENU => add suffix: _ftrMenu +++ add menuclass-suffix: _ftr-nav */ .card.ftrMenu {float: right;display: block;width: 98%;max-width: 220px;padding: 0 0 0 8px} .card.ftrMenu {border: 0;border-radius: 0;background: none} .card.ftrMenu h3 {display: none;height: 0;padding: 0} ul.ftr-nav {margin: 0;padding: 0;text-align: left} ul.ftr-nav li {list-style: none;list-style-image: none;display: block} ul.ftr-nav li {margin: 0 2px 6px 0;padding: 0} ul.ftr-nav li a {position: relative;padding: 3px 6px 3px 6px;font-size: 16px;line-height: 1.4;outline: none} ul.ftr-nav li a {color: var(--txtLights);text-decoration: none} ul.ftr-nav li a.red {color: red} ul.ftr-nav li a:hover {color: #000;text-decoration: underline} ul.ftr-nav li.active a {text-decoration: underline;cursor: default} ul.ftr-nav ul, ul.ftr-nav ul ul {display: none;visibility: hidden;height: 0} @media screen and (max-width: 839px){ #rightCol {display: block;margin: 4px auto 16px auto} #rightCol .card, #rightCol .card.searchHorz {display: inline-block;margin: 0 8px 12px 12px} } @media screen and (max-width: 767px){ .mainLine {display: block;clear: both;width: 100%;margin: 4px auto} .card.path {display: none;visibility: hidden;margin: -12px 0} .card.ftrMenu {position: relative;float: none;margin: 0 auto 8px auto} } @media screen and (max-width: 599px){ #rightCol .card, #rightCol .card.searchHorz, .mainLine .card, .compLine .card {display: block;margin: 0 auto 12px auto} } /* Modules - WITHOUT suffix */ .card .form-search {min-height: 56px} .card .form-search label {display: none;height: 0} .card .form-search .input-group {margin: 0 auto;text-align: center} .card .form-search input {width: 148px} .card .form-search button.btn {margin: 6px auto} .card .form-search .icon-search {background: none;} .card .form-search .mod-finder__advanced {display: none;height: 0} .card .mod-whosonline, .card .mod-whosonline-disabled {min-height: 56px} .card .mod-whosonline p, .card .mod-whosonline-disabled p {width: 134px;margin: 0 auto;padding: 12px 0 0 0;text-align: center} .card .mod-randomimage {min-height: 56px} .card .mod-randomimage img {max-width: 188px;height: auto;margin: 4px auto} .card .mod-custom {min-height: 56px} .card .mod-custom p {margin: 0;padding: 2px 4px 10px 4px;text-align: left} .card .mod-custom p strong {font-weight: bold} .card .mod-custom img {max-width: 2340px} 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: 12px} 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 input {display: inline-block;width: 20px;vertical-align: middle;margin-bottom: 3px} form.mod-login .form-group .form-check label {display: inline-block;margin: 0 0 0 13px;padding-top: 10px} form.mod-login .form-group button {margin-left: 10px} form.mod-login .btn.input-password-toggle {margin: -3px 6px 4px 2px} form.mod-login-logout {margin: 0;padding: 4px 4px 8px 4px} .card .mod-tagspopular .alert, .card .mod-tagssimilar .alert {padding-top: 12px} .card .mod-tagspopular, .card .mod-tagssimilar {min-height: 56px} .card .tagspopular ul, .card .mod-tagssimilar ul {margin: 0 2px 8px 2px;} .card .tagspopular li, .card .mod-tagssimilar li {padding: 0} .card .tagspopular a, .card .mod-tagssimilar a {font-size: 12px;padding: 3px 5px;text-align: center;border-radius: 5px;background: var(--bgdLights)} .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(--bdrPrime)} @media screen and (max-width: 479px){.com-content-archive .filters button {display: block;margin: 18px 0 0 18px}} /* BUTTONS */ a.btn, a.btn-primary, a.btn-secondary, a.btn-mini {display: inline-block;text-decoration: none} a.btn:hover, a.btn-primary:hover, a.btn-secondary:hover, a.btn-mini:hover {text-decoration: none} .btn, a.btn {position: relative;min-height: 28px;width: auto;max-width: 230px;margin: 4px auto;padding: 7px 6px 5px 6px} .btn, a.btn {font-family: Arial, sans-serif;font-size: 14px;font-weight: bold;text-align: center;letter-spacing: 0.8px;} .btn, a.btn {overflow-x: hidden;text-decoration: none;border: 1px solid;/*border-radius: 5px*/} a.btn-primary, .btn-primary {min-height: 40px;padding: 10px 6px} a.btn-primary, .btn-primary { color: var(--txtLights);background: var(--bgdLightr)}/* ;border-color: var(--white080); min-width: 140px;*/ a.btn-primary:hover, .btn-primary:hover {color: var(--txtLights);background: var(--bgdDark)} /* ;border-color: var(--bdrPrime) */ a.btn-primary.arwr:after, .btn-primary.arwr:after {position: absolute;right: 0;top: 0;height: 100%;width: 44px; background: url(../img/btn_marker.png) 50% 50% no-repeat #3e454c;content: '';} a.btn-primary.arwr, .btn-primary.arwr {min-width: 240px;max-width: 276px;min-height: 48px;padding: 14px 50px 10px 6px} a.btn-secondary, .btn-secondary {min-height: 40px;padding: 10px 6px} a.btn-secondary, .btn-secondary { color: var(--txtLight);background: var(--inpUpBgd);border-color: var(--bdrPrime)}/*min-width: 140px;*/ a.btn-secondary:hover, .btn-secondary:hover {color: var(--txtDarkes);background: var(--bgdLights);border-color: var(--bdrPrime)} a.btn-mini, .btn-mini {position: relative;height: 21px;max-width: 80px;margin: 1px 6px;padding: 5px 4px 0 4px} a.btn-mini, .btn-mini {font-size: 12px;font-weight: normal;border-radius: 3px} a.btn-mini, .btn-mini { color: var(--txtDarkes); background: var(--bgdLight); border-color: var(--bdrPrime)} a.btn-mini:hover, .btn-mini:hover {color: var(--txtDarkes);background: var(--bgdLights);border-color: var(--bdrDarkes)} .btn-info, .btn-success, .btn-check, .btn-warning, .btn-danger {min-width: 124px;border-radius: 4px;background: var(--inpUpBgd);box-shadow: 1px 2px 3px #888} a.btn-info, a.btn-info:hover { color: var(--info); border-color: var(--info)} a.btn-success,a.btn-success:hover{color: var(--success);border-color: var(--success)} a.btn-check, a.btn-check:hover { color: var(--check); border-color: var(--check)} a.btn-warning,a.btn-warning:hover{color: var(--warning);border-color: var(--warning)} a.btn-danger, a.btn-danger:hover {color: var(--danger); border-color: var(--danger)} a.btn-info:hover, a.btn-success:hover, a.btn-check:hover, a.btn-warning:hover, a.btn-danger:hover {background: var(--bgdLights)} a.btn:disabled, a.btn.disabled, fieldset:disabled a.btn, a.disabled .btn:disabled, .btn.disabled, fieldset:disabled .btn, .btn:disabled:hover, .btn.disabled:hover, fieldset:disabled .btn:hover, a.disabled:hover a.btn:disabled:hover, a.btn.disabled:hover, fieldset:disabled a.btn:hover {cursor: not-allowed;opacity: 0.5} a:not([href]):not([class]), a:not([href]):not([class]):hover {color: var(--txtPrime);text-decoration: none} .btn.input-password-toggle {float: right;width: 28px;height: 26px;padding: 0 4px;background: var(--bgdLights)} .icon-eye, .icon-eye-slash {width: 18px;height: 18px;margin: 0;background: url(../img/icon_eye-blk18.png) center left no-repeat} .btn-group {display: inline-block;min-height: 48px;margin: 6px 6px 6px 0;padding: 4px 6px} .btn-group {border: 1px solid var(--bdrLights);border-radius: var(--bdr-r5)} .btn-group input#filter-search, .btn-group select {margin-top: 5px} .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} /* 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(--white080)} /* ===================================================== * PAGE-Display (specific Joomla pages, NOT Modules) * ===================================================*/ form {font-family: Arial,sans-serif;font-size: 13px;text-align: left} 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(--bdrPrime);border-radius: var(--bdr-r7);background: var(--bgdLights)} form#member-registration input, form#user-registration input, .form-validte 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 {} .com-users-login fieldset {max-width: 316px;margin-bottom: 4px;padding: 0 6px 6px 6px} .com-users-login fieldset {border: 1px solid var(--bdrPrime);border-radius: var(--bdr-r5);background: var(--bgdLightr)} .com-users-login__input input {width: 220px;margin: 2px 3px 10px 6px} .com-users-login__submit .btn.btn-primary {width: 220px;margin: 4px 0 10px 6px} .com-users-login__remember {margin-left: 8px} .com-users-login .btn.input-password-toggle {margin: 2px 26px 0 4px} .com-users-login__options a {display: block;padding-left: 12px} .profile fieldset, .profile-edit fieldset {max-width: 376px;margin-bottom: 24px;padding: 0 6px 6px 6px} .profile fieldset, .profile-edit fieldset {border: 1px solid var(--brdPrime);border-radius: var(--bdr-r5)} .profile fieldset legend, .profile-edit fieldset legend {font-weight: bold} .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: bold;padding: 14px 0 0 0} .profile-edit a.btn.btn-sm {border: 0;font-weight: normal} .finder fieldset {max-width: 479px;margin: 6px auto;padding: 8px 4px;font-family: Arial, sans-serif} .finder fieldset legend {font-weight: bold} .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: bold;} .com-finder__results a cite {display: none; height: 0} .com-finder__results .result__date {font-style: italic;padding-right: 12px;color: var(--txtPrime)} .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(--txtLight)} .highlight, mark {background-color: #fe9;color: var(--black080);padding: 0 4px} .field-calendar .input-group button.btn {margin-top: 0;width: 28px;height: 24px;overflow: hidden;} .field-calendar .input-group button.btn {background: url(../img/icon_cladr-blk20.png)top center no-repeat;} .field-calendar .input-group button.btn {border: 1px solid var(--bdrPrime);} #finder-filter-window .hasTooltip {display: block;margin-bottom: -14px;font-weight: bold} .btn-group button.js-btn {width: auto;padding: 1px 4px} /* CATEGORY-BLOG */ .blog .page-header h1 {border-bottom: 0} .blog-items.items-leading {display: block;margin: 0 0 20px 0;clear: both} .blog-items.columns-2, .blog-items.columns-3 {position: relative;margin: 10px auto;text-align: center;clear:both} .blog-items.columns-2 .blog-item {display: inline-block;width: 47.5%;margin: 10px 12px 10px 0;padding: 4px 12px 8px 10px} .blog-items.columns-3 .blog-item {display: inline-block;width: 30%;margin: 10px 8px 10px 0;padding: 4px 8px 8px 8px} .blog-items.columns-2 .blog-item:last-child, .blog-items.columns-3 .blog-item:last-child {margin-right: 0} .blog-items.columns-2 .blog-item p, .blog-items.columns-3 .blog-item p {text-align: left} .blog-items.columns-4 .blog-item, .blog-items.columns-5 .blog-item, .blog-items.columns-6 .blog-item {} .blog-item {min-height: 180px;text-align: left;clear: both} .items-more {padding: 12px 0;color: var(--txtPrime)} .items-more:before {content: "Weitere Berichte:";padding-left: 14px;font-weight: bold}/* lang-DE ONLY !!! */ .items-more li {list-style: none;list-style-image: none} .items-more li a:hover {text-decoration: underline} /* CATEGORY-BLOG => Images * WARNING: If using the Joomla-Tab to add images, images might appear above the heading. * To prevent this add your image in full-size into the text. If you want * text next to the image use the image-class "img-lft" OR "img-rgt". */ .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} @media screen and (max-width: 1023px) { .blog-items.columns-3 img.img-lft, .blog-items.columns-3 img.img-rgt {display: block;float: none;margin: 6px auto;text-align: center} } @media screen and (max-width: 919px) { .page-header h2 {font-size: 24px} .blog-items.columns-3 .blog-item {display: block;width: 100%;margin: 10px 0;padding: 4px} .blog-items.columns-3 img.img-lft {float: left; margin: 3px 6px 6px 0} .blog-items.columns-3 img.img-rgt {float: right;margin: 3px 0 6px 6px} .blog-items.columns-2 img.img-lft, .blog-items.columns-2 img.img-rgt {display: block;float: none;margin: 6px auto;text-align: center} } @media screen and (max-width: 839px) { .blog-items.columns-2 .blog-item {display: block;width: 100%;margin: 10px 0;padding: 4px} } @media screen and (max-width: 639px) { .blog-items.columns-3 img.img-lft, .blog-items.columns-3 img.img-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;} .content-category button.btn-secondary {} /* This table has a "th" horz AND vert !!! */ table.category {max-width: 780px} table.category th {padding: 5px 3px;border-bottom: 1px solid var(--bdrPrime)} /* = all */ table.category td {text-align: center} table.category thead th a {display: inline-block;padding: 0 2px;text-align: center;color: var(--txtLihgtr)} table.category thead th:after {content: "v"; padding-right: 3px;} table.category tbody th.list-title {background: none;} table.category tbody th.list-title a {font-weight: normal} table.category tbody th.list-title a:hover {text-decoration: underline} .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} .categories-list .com-content-categories__items {background: var(--bgdLight);border: 1px solid var(--bdrPrime)} .categories-list .com-content-categories__item {padding: 6px;border: 0;border-bottom: 1px solid var(--bdrPrime)} .categories-list .com-content-categories__item:last-child {border: 0} .categories-list .com-content-categories__item a {display:inline-block;min-width: 170px;padding-right: 6px} @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: 0 0 12px 0} .categories-list h3 a {max-width: 140px;font-weight: normal} } .com-content-category-blog__child h3 span {font-weight: normal;font-size: 14px;padding-left: 18px} .com-content-category__children h3 span {display: none;font-size: 0} a.dropdown-toggle, span.icon-cog, span.caret {display: none;visibility: hidden} .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 #777} .item-page .icons a .icon-edit:hover, a.jmodedit:hover {background: url(../img/icon_edit32.png) top center no-repeat;border: 1px solid #777} .btn.dropdown-toggle {display: none;visibility: hidden;height: 0} dl.article-info {margin: 0 8px 8px 0;font-size: 13px;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(--txtPrime)} dl.article-info .icon-fw, dl.article-info .hits .icon-eye {display: none} .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} ul.tags:before {content: "Tags:";clear: both} ul.tags {margin: 0 0 16px 0;padding: 0} ul.tags li {list-style: none;list-style-image: none;display: inline-block;margin: -3px 4px 6px 0;padding: 0} ul.tags li a {padding: 2px 4px;font-weight: normal} ul.tags.list-inline a.btn.btn-sm.btn-info {min-height: 20px;min-width: 90px;font-size: 12px} /* Button = btn.info (as default), restyled here !!! */ ul.tags.list-inline a.btn.btn-sm.btn-info { color: var(--txtLightr); background: var(--bgdLightr); border-color: var(--bdrLightr)} ul.tags.list-inline a.btn.btn-sm.btn-info:hover {color: var(--txtDarkes);background: var(--bgdLights);border-color: var(--bdrDarkes)} .content_rating {margin: 10px 4px -4px 0;width: 140px} .content_rating p {display: none} /* following 5 lines are from the plugin, do not change them ! */ .content_rating ul {list-style: none;padding-inline-start: 0;margin-bottom: 0;} .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: #d5b224} .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: 0 0 20px 4px;padding: 4px;text-align: left;font-size: 12px} form.form-inline .content_vote label {display: block;height: auto;margin: -3px 0 0 8px;text-align: left;font-size: 14px} form.form-inline .content_vote select {display: block;width: 120px !important;margin: 2px 0 10px 0;padding: 0 3px} form.form-inline .content_vote input.btn.btn-primary {display: block;margin: 4px 0 10px 0;width: 120px;min-width: 110px} /* ===================================================== * PAGE-NAVIGATION (Joomla-system) * =================================================== */ .readmore a.btn {width: auto;margin: 0 0 0 8px;padding: 0;text-decoration: none;} .readmore a.btn {text-align: left;font-weight: bold;background: none;border: 0;color: var(--linksUp)} .readmore a.btn:hover {text-decoration: underline;background: none;border: 0;color: var(--linksHv)} .readmore a .icon-chevron-right:before {content: ">> ";font-size: 12px;color: var(--linksUp)} .pagenavigation, p.counter, nav.pagination__wrapper ul li {font-family: Arial, sans-serif;font-size: 14px} .pagenavigation {margin: 20px auto 8px auto;text-align: center;clear: both} .pagenavigation ul.pagination {display: inline-block;margin: 0;padding: 0;background: var(--white100);border: 1px solid var(--black080)} .pagenavigation ul.pagination li {display: inline-block;margin: 0;padding: 0;border-right: 1px solid var(--black080)} /* add bg here */ .pagenavigation ul.pagination li:last-child {border: 0;text-decoration: none;} .pagenavigation ul.pagination li a {padding: 4px 6px 3px 6px} /* <= "li a" = link, linkable */ .pagenavigation ul.pagination li a:hover {text-decoration: none} .pagenavigation span.pagination {display: inline-block;margin: 0;padding: 0} .pagenavigation span.pagination a {display: inline-block;max-width: 240px !important;padding-left: 10px;padding-right: 10px;border-radius: 0} .pagenavigation span.pagination a.next { margin: 8px 0 8px -3px} .pagenavigation span.pagination a.previous {margin: 8px -3px 8px 0} /* change colors btn.secondary to btn.primary */ .pagenavigation span.pagination a.btn-secondary {font-weight: normal;} .pagenavigation span.pagination a.btn-secondary:hover {} /* for additional arrows de/activate following lines, OR "display none" */ .pagenavigation span.pagination a.btn-secondary span.icon-chevron-left, .pagenavigation span.pagination a.btn-secondary span.icon-chevron-right {display: none} .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 -2px 0 -2px;padding: 0;} nav.pagination__wrapper ul li {text-align: center;border: 1px solid var(--bdrPrime);border-left: 0;background-color: var(--bgdLight)} nav.pagination__wrapper ul li:first-child {border-left: 1px solid var(--bdrPrime)} nav.pagination__wrapper ul li a {padding: 10px 4px 2px 4px;line-height: 1.7;} nav.pagination__wrapper ul li a {text-decoration: none;cursor: pointer;color: var(--linksUp)} nav.pagination__wrapper ul li a:hover {text-decoration: none} nav.pagination__wrapper ul li a span {cursor: pointer;color: var(--linksUp)} 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(--txtPrime)} nav.pagination__wrapper ul li.active a:hover {cursor: default} .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 Functions */ #system-message-container {display: block;margin: 8px 0} #system-message-container button {display: none;height: 0;} /* "Close X = NW " */ 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: bold} .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: normal} .alert-message {color: #111} .alert-danger, .alert-warning, .alert-error {background: #ffeeee;color: #ff0000;border-radius: 8px} /* error + warning = red */ .alert-info, .alert-notice { background: #e1ecfa;color: #0040ff;border-radius: 8px} /* notice + info = blue */ .alert-success { background: #e8f5e2;color: #26a306;border-radius: 8px} /* message + succ = green */ .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} } .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: normal;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} .data-bs-original-title {display: none !important} /* PRINTING */ @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, #headerLft, #headerRgt, #headerCtr, #nav, #main, #contents {background: none;border: 0} #scrollBtn, .card {display: none;visibility: hidden;height: 0} } /* ___COOKIEHINT___ */ #redim-cookiehint{position: fixed;bottom: 0;left:0;right: 0;padding: 6px 3px;z-index: 999999;text-align: center} #redim-cookiehint{font-family: Arial, sans-serif;background: #3e454c;border-top: 4px solid #2e3338;border-bottom: 3px solid #3e3338} #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: 730px;padding: 2px 5px 4px 3px;vertical-align: top} .cookiecontent {font-size: 14px;line-height: 17px;color: #fff;border-right: 50px solid transparent} .cookiecontent a, .cookiecontent a:hover {color: #fff !important;padding: 0 3px;text-decoration: underline !important} .cookiecontent span {display: block} .cookiebuttons {display: inline-block;width: 46px;margin: 0 0 0 -48px;padding: 12px 2px 3px 2px} .cookiebuttons a.btn {width: auto;height: auto;padding: 6px 5px 2px 5px;text-align: center;font-size: 14px;line-height: 14px;color: #fff} .cookiebuttons a.btn {text-decoration: none;border: 1px solid #fff;border-radius: 7px;outline: none;background: var(--bgdLightr)} .cookiebuttons a.btn:hover {text-decoration: none;border: 1px solid #16f;background-color: #16f;color: #fff;cursor: pointer} @media screen and (max-width: 767px) {.cookiecontent {max-width: 560px;text-align: left} .cookiecontent span {display: inline} } @media screen and (max-width: 599px) {.cookiecontent {max-width: 400px} } @media screen and (max-width: 474px) {.cookiecontent {max-width: 360px;font-size: 13px;line-height: 14px} } @media screen and (max-width: 399px) {.cookiecontent {max-width: 290px} #redim-cookiehint {overflow-x: hidden} } /* ==================== 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 ____ remember the COPYRIGHT ____goodbye ____ */