/* bySam */
/* https://animate.style/ */
@import url("animate.min.css");
/*
Add the class animate__animated to an element, along with any of the animation names (don't forget the animate__ prefix!):
An animated element
*/
/* varela-regular - latin */
@font-face {
font-display: swap;
font-family: 'Varela';
font-style: normal;
font-weight: 400;
src: url('/extern/varela-v16-latin-regular.woff2') format('woff2');
}
/* alatsi-regular - latin */
@font-face {
font-display: swap;
font-family: 'Alatsi';
font-style: normal;
font-weight: 400;
src: url('/extern/alatsi-v13-latin-regular.woff2') format('woff2');
}
/* manrope-200 - latin
@font-face {
font-display: swap;
font-family: 'Manrope';
font-style: normal;
font-weight: 200;
src: url('/extern/manrope-v19-latin-200.woff2') format('woff2');
}
*/
/* manrope-300 - latin
@font-face {
font-display: swap;
font-family: 'Manrope';
font-style: normal;
font-weight: 300;
src: url('/extern/manrope-v19-latin-300.woff2') format('woff2');
}
*/
/* manrope-regular - latin */
@font-face {
font-display: swap;
font-family: 'Manrope';
font-style: normal;
font-weight: 400;
src: url('/extern/manrope-v19-latin-regular.woff2') format('woff2');
}
/* manrope-500 - latin
@font-face {
font-display: swap;
font-family: 'Manrope';
font-style: normal;
font-weight: 500;
src: url('/extern/manrope-v19-latin-500.woff2') format('woff2');
}
*/
/* manrope-600 - latin
@font-face {
font-display: swap;
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
src: url('/extern/manrope-v19-latin-600.woff2') format('woff2');
}
*/
/* manrope-700 - latin
@font-face {
font-display: swap;
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
src: url('/extern/manrope-v19-latin-700.woff2') format('woff2');
}
*/
/* manrope-800 - latin
@font-face {
font-display: swap;
font-family: 'Manrope';
font-style: normal;
font-weight: 800;
src: url('/extern/manrope-v19-latin-800.woff2') format('woff2');
}
*/
/* charm-regular - latin
@font-face {
font-display: swap;
font-family: 'Charm';
font-style: normal;
font-weight: 400;
src: url('/extern/charm-v13-latin-regular.woff2') format('woff2');
}
*/
/* ============================================================ */
/* Vars Example: color:var(--bs-blue); */
/* ============================================================ */
:root {
--bs-blue:#0d6efd;
--bs-indigo:#6610f2;
--bs-purple:#6f42c1;
--bs-pink:#d63384;
--bs-red:#dc3545;
--bs-orange:#fd7e14;
--bs-yellow:#ffc107;
--bs-green:#198754;
--bs-teal:#20c997;
--bs-cyan:#0dcaf0;
--bs-white:#fff;
--bs-gray:#6c757d;
--bs-gray-dark:#343a40;
--bs-gray-100:#f8f9fa;
--bs-gray-200:#e9ecef;
--bs-gray-300:#dee2e6;
--bs-gray-400:#ced4da;
--bs-gray-500:#adb5bd;
--bs-gray-600:#6c757d;
--bs-gray-700:#495057;
--bs-gray-800:#343a40;
--bs-gray-900:#212529;
--bs-primary:#0d6efd;
--bs-secondary:#6c757d;
--bs-success:#198754;
--bs-info:#0dcaf0;
--bs-warning:#ffc107;
--bs-danger:#dc3545;
--bs-light:#f8f9fa;
--bs-dark:#212529;
--bs-primary-rgb:13, 110, 253;
--bs-secondary-rgb:108, 117, 125;
--bs-success-rgb:25, 135, 84;
--bs-info-rgb:13, 202, 240;
--bs-warning-rgb:255, 193, 7;
--bs-danger-rgb:220, 53, 69;
--bs-light-rgb:248, 249, 250;
--bs-dark-rgb:33, 37, 41;
--bs-white-rgb:255, 255, 255;
--bs-black-rgb:0, 0, 0;
--bs-body-color-rgb:33, 37, 41;
--bs-body-bg-rgb:255, 255, 255;
--bs-font-sans-serif:sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", 'Open Sans', "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-monospace:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient:linear-gradient(180deg, hsla(0,0%,100%,.15), hsla(0,0%,100%,0));
--bs-body-font-family:var(--bs-font-sans-serif);
--bs-body-font-size:18px;
--bs-body-font-weight:400;
--bs-body-line-height:1.4;
--bs-body-color:#5B5B5B;
--bs-body-bg:#F8F8F8;
/* Header in /elements/header.php */
--navi-height-mobile:60px;
--navi-height-desktop:100px;
/* Project Colors */
--color-primary:#09478B;
--color-primary-text:#FFFFFF;
--color-secondary:#4F190D;
--color-secondary-text:#FFFFFF;
--color-rot:#D80405;
--color-gruen:#31A24C;
--color-blau:#09478B;
}
/* ============================================================ */
/* Bootstrap 5 Grid */
/* ============================================================ */
/* -sm- */
@media (min-width: 576px) {
}
/* -md- */
@media (min-width: 768px) {
}
/* -lg- */
@media (min-width: 992px) {
}
/* -xl- */
@media (min-width: 1200px) {
}
/* -xxl- */
@media (min-width: 1400px) {
}
/* ============================================================ */
/* Custom Project Classes */
/* ============================================================ */
.public .parallax {
/*pointer-events:none;*/
transition:.45s cubic-bezier(.4, .49, .32, .99);
}
.public .color-rot {
color:var(--color-rot);
}
.public .color-gruen {
color:var(--color-gruen);
}
.public .color-blau {
color:var(--color-blau);
}
.public .color-primary {
color:var(--color-blau);
}
.public .bg-color-rot {
background-color:var(--color-rot);
color:var(--color-primary-text);
}
.public .bg-color-gruen {
background-color:var(--color-gruen);
color:var(--color-primary-text);
}
.public .bg-color-blau {
background-color:var(--color-blau);
color:var(--color-primary-text);
}
.public .color-primary {
color:var(--color-primary);
}
.public .bg-color-primary {
background-color:var(--color-primary);
color:var(--color-primary-text);
}
.public .bg-color-primary,
.public .bg-color-primary a,
.public .bg-color-primary a:link,
.public .bg-color-primary a:visited,
.public .bg-color-primary a:active {
color:var(--color-primary-text);
outline:none;
text-decoration:none;
}
.public .bg-color-primary a:focus,
.public .bg-color-primary a:hover {
color:var(--color-primary-text);
background:none;
text-decoration:underline;
}
.public .bg-color-gray {
background-color:#EEEEEE;
padding-top:10px;
margin-bottom:10px;
}
/*
.box-type-2-text > ul {
--icon-space: 1.3em;
list-style:none;
padding:0px;
}
.box-type-2-text > ul li {
padding-left: var(--icon-space);
}
.box-type-2-text > ul li:before {
display: inline-block;
width: var(--icon-space);
margin-left: calc( var(--icon-space) * -1 );
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: 900;
font-display: block;
content: "\f00c";
}
*/
.public .box-type-1 {
margin:15px 0px 15px 0px;
padding:30px;
background-color:#FFFFFF;
border:1px solid var(--color-primary);
-webkit-border-radius:16px;
-moz-border-radius:16px;
border-radius:16px;
-webkit-box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.1);
box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.1);
}
.public .box-type-1 p:last-child {
margin-bottom:0px;
}
.public .box-type-2 {
margin:15px 0px 15px 0px;
padding:0px;
background-color:#FFFFFF;
-webkit-border-radius:16px;
-moz-border-radius:16px;
border-radius:16px;
-webkit-box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.1);
box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.1);
}
.public .box-type-2 p:last-child {
margin-bottom:0px;
}
.public .box-type-2-top {
padding:10px;
background-color:var(--color-blau);
color:var(--color-primary-text);
text-align:center;
}
.public .box-type-2-top p,
.public .box-type-2-top .h3,
.public .box-type-2-top h3 {
color:#FFFFFF;
margin-bottom:0px;
font-weight:normal;
font-size:1.5rem;
}
.public .box-type-2-top .h3,
.public .box-type-2-top h3 {
letter-spacing:0px;
}
.public .box-type-2-top.rot {
background-color:var(--color-rot);
}
.public .box-type-2-top.gruen {
background-color:var(--color-gruen);
}
.public .box-type-2-text {
padding:15px;
font-size:18px;
line-height:1.5;
}
.public .box-type-2-text > ul {
--icon-space:32px;
list-style:none;
padding:0px;
}
.public .box-type-2-text > ul > li {
padding-left: var(--icon-space);
}
.public .box-type-2-text > ul > li:before {
display: inline-block;
width: var(--icon-space);
margin-left: calc( var(--icon-space) * -1 );
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: 900;
font-display: block;
content: "\f00c";
}
.public .box-type-2-text > ul > li.not:before {
content: "\f00d";
}
.public .box-type-2-text > ul > li.empty:before {
content: "";
}
.public .box-type-2-text.rot ul li:before {
color:var(--color-rot);
}
.public .box-type-2-text.gruen > ul > li:before {
color:var(--color-gruen);
}
.public .box-type-2-text.blau > ul > li:before {
color:var(--color-blau);
}
.public .box-type-2-text > ul >li > ul {
list-style:disc;
}
/* -sm- */
@media (min-width: 576px) {
.public .box-type-2-text-height {
min-height:1300px;
}
}
/* -md- */
@media (min-width: 768px) {
.public .box-type-2-text-height {
min-height:1540px;
}
}
@media (min-width: 992px) {
.public .box-type-2-text-height {
min-height:1260px;
}
}
@media (min-width: 1200px) {
.public .box-type-2-text-height {
min-height:1020px;
}
}
@media (min-width: 1400px) {
.public .box-type-2-text-height {
min-height:940px;
}
}
.public .box-type-2-preis {
padding:15px;
}
.public .box-type-2-preis a {
color:#FFFFFF !important;
text-decoration:underline !important;
}
.public .box-type-2-preis.rot {
background-color:var(--color-rot);
color:var(--color-primary-text);
}
.public .box-type-2-preis.gruen {
background-color:var(--color-gruen);
color:var(--color-primary-text);
}
.public .box-type-2-preis.blau {
background-color:var(--color-blau);
color:var(--color-primary-text);
}
.public .box-type-2-text.box-type-2-preis > ul li:before {
color:var(--color-primary-text);
}
.public .pic-box-rot {
width:100%;
height:auto;
border:1px solid var(--color-rot);
-webkit-border-radius:16px;
-moz-border-radius:16px;
border-radius:16px;
-webkit-box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.1);
box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.1);
}
.public .pic-box-gruen {
width:100%;
height:auto;
border:1px solid var(--color-gruen);
-webkit-border-radius:16px;
-moz-border-radius:16px;
border-radius:16px;
-webkit-box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.1);
box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.1);
}
.public .pic-box {
width:100%;
height:auto;
border:1px solid var(--color-blau);
-webkit-border-radius:16px;
-moz-border-radius:16px;
border-radius:16px;
-webkit-box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.1);
box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.1);
}
.onlineshop-1,
.onlineshop-2,
.onlineshop-3,
.onlineshop-4 {
padding: 175px 0px 10px 60px;
}
.onlineshop-1 {
background:url(/extern/1-produktkombinationen-online-shop-erstellung-exsys.png) left top no-repeat;
}
.onlineshop-2 {
background:url(/extern/2-individuelle-produkte-online-shop-erstellung-exsys.png) left top no-repeat;
}
.onlineshop-3 {
background:url(/extern/3-produkt-konfigurator-online-shop-erstellung-exsys.png) left top no-repeat;
}
.onlineshop-4 {
background:url(/extern/4-produkt-mixer-online-shop-erstellung-exsys.png) left top no-repeat;
}
.onlineshop-1 h3,
.onlineshop-2 h3,
.onlineshop-3 h3,
.onlineshop-4 h3 {
font-size:20px;
line-height:1.4;
color:#5B5B5B;
}
a.lb-prev,
a.lb-next {
background-color:transparent !important;
}
h1.start,.h1.start {
letter-spacing:1px;
}
h1.start span.exsys {
display:inline-block;
position:relative;
}
h1.start span.exsys span.reg {
display:inline-block;
position:absolute;
right:-20px;
top:6px;
font-size:18px;
}
@media (min-width: 992px) {
h1.start span.exsys span.reg {
top:6px;
font-size:22px;
}
}
/* ============================================================ */
/* Support / Service */
/* ============================================================ */
/* Float Classes */
.public .left {
float:left !important;
}
.public .right {
float:right !important;
}
.public .clear {
clear:both !important;
}
/* Text-Decoration Classes */
.tdu {
text-decoration:underline !important;
}
.tdn {
text-decoration:none !important;
}
/* Round corners */
.rounded {
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px !important;
}
.rounded-top {
-webkit-border-radius:16px 16px 0px 0px;
-moz-border-radius:16px 16px 0px 0px;
border-radius:16px 16px 0px 0px !important;
}
.rounded-bottom {
-webkit-border-radius:0px 0px 16px 16px;
-moz-border-radius:0px 0px 16px 16px;
border-radius:0px 0px 16px 16px !important;
}
/* Shadow */
.shadow {
/*
Vertikaler Farbe des
Versatz Schatten
| |
box-shadow: 10px 10px 15px silver inset;
| | |
Horizontaler | |
Versatz Größe des optional:
Schatten Schatten nach innen
*/
-webkit-box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.3);
box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.3);
}
/* Desaturate-Effect (Everything in shades of gray and on hover in color) */
.desaturate {
filter: grayscale(100%); /* Standard */
-webkit-filter: grayscale(100%); /* Webkit */
/* filter: url(/elements/grayscale.svg#desaturate); /* Firefox 4-34 */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Old WebKit */
}
.desaturate:hover {
filter: grayscale(0%);
filter: none;
-webkit-filter: grayscale(0); /* Old WebKit */
}
.zoom-pic img {
-webkit-transform: scale(0.9,0.9);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(0.9,0.9);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
transform: scale(0.9,0.9);
transition-timing-function: ease-out;
transition-duration: 250ms;
}
.zoom-pic:hover img {
-webkit-transform: scale(1,1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 400ms;
-moz-transform: scale(1,1);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 400ms;
transform: scale(1,1);
transition-timing-function: ease-out;
transition-duration: 400ms;
}
/* Bild an den Rändern ausfaden */
.fading-image {
width: 100%; /* Oder die gewünschte Breite des Bildes */
height: auto; /* Oder die gewünschte Höhe des Bildes */
display: block; /* Wichtig für die korrekte Maskierung */
/* Kombinierte Maske für alle vier Seiten */
mask-image: linear-gradient(to left, transparent, black 10%, black 90%, transparent),
linear-gradient(to right, transparent, black 10%, black 90%, transparent),
linear-gradient(to top, transparent, black 10%, black 90%, transparent),
linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
-webkit-mask-image: linear-gradient(to left, transparent, black 10%, black 90%, transparent),
linear-gradient(to right, transparent, black 10%, black 90%, transparent),
linear-gradient(to top, transparent, black 10%, black 90%, transparent),
linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
/* Steuert, wie die einzelnen Masken überlagert werden */
mask-composite: intersect; /* Vereint die Masken */
-webkit-mask-composite: source-in; /* Äquivalent für Webkit-Browser */
}
/* No Selection Class */
.deselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently not supported by any browser */
}
.deselect ::selection,
.deselect ::-moz-selection {
background:transparent !important;
color:inherit !important;
}
/* No Outline */
.nool {
outline:none !important;
}
/* Bild in original Größe anzeigen, aber nicht über 100% des Bereichs,
d.h. keine Scroller, auch nicht wenn das Bild grösser ist als der Viewport (einfach im Editor diese Klasse beim Bild mit angeben) */
.max-width-100p {
width:auto !important;
height:auto !important;
max-width:100% !important;
}
/* Bei Bookmarks Header mitrechnen, vor allem für Fixed-Header sinnvoll (jedem Anker diese Klasse mitgeben) und natürlich den Top-Wert auf die Header Größe(n) anpassen */
.anchor {
display:block;
position:relative;
top:-50px;
visibility:hidden;
}
@media (min-width: 992px) {
.anchor {
top:-100px;
}
}
/* Cols innerhalb einer row umdrehen */
.row-reverse .row {
flex-direction: row-reverse;
}
.w-100-lg-50 {
width:100%;
height:auto;
}
@media (min-width: 992px) {
.w-100-lg-50 {
width:50%;
height:auto;
}
}
.w-50-lg-100 {
width:50%;
height:auto;
}
@media (min-width: 992px) {
.w-50-lg-100 {
width:100%;
height:auto;
}
}
/* für Editor */
.public .fs-extra-small {
display:inline-block;
font-size:50%;
line-height:1.4;
}
.public .fs-small {
display:inline-block;
font-size:75%;
line-height:1.4;
}
/* ============================================================ */
/* Barrierefreiheit: */
/* ============================================================ */
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
#skip2content a {
position:absolute;
top:-41px;
left:0px;
z-index:1000;
padding:6px;
color:#FFFFFF;
border-right:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
border-bottom-right-radius:8px;
background:var(--color-primary);
-webkit-transition:top .5s ease-out;
transition:top .5s ease-out;
}
#skip2content a:focus {
position:absolute;
left:0px;
top:0px;
outline-color:transparent;
-webkit-transition: top .05s ease-in;
transition: top .05s ease-in;
}
@media (prefers-reduced-motion: reduce) {
#skip2content a {
transition-duration:0ms !important;
}
}
/* Scroll Top Arrow */
.public a#scroll2top {
position:fixed;
z-index:100;
bottom:30px;
right:20px;
display:none;
justify-content:center;
align-items:center;
width:44px;
height:44px;
font-size:42px;
line-height:42px;
opacity:0.9;
cursor:pointer;
background-color:#939393;
color:#FFFFFF !important;
border:3px solid #F8F8F8 !important;
border-radius:5px;
}
.public a#scroll2top:hover,
.public a#scroll2top:focus {
background-color:var(--color-primary) !important;
text-decoration:none !important;
}
/* ============================================================ */
/* Global */
/* ============================================================ */
/* Link Colors */
.public button,
.public a,
.public a:link,
.public a:visited,
.public a:active {
color:var(--color-primary);
text-decoration:none;
-webkit-transition:background-color .25s linear;
transition:background-color .25s linear;
}
@media (prefers-reduced-motion: reduce) {
.public button,
.public a,
.public a:link,
.public a:visited,
.public a:active {
transition-duration:0ms !important;
}
}
/* a:focus {
a:focus:not([tabindex="-1"]):not(:has(img)) {
*/
.public a:not(:has(img)) {
padding-left:2px;
padding-right:2px;
}
.public button:focus,
.public a:focus:not([tabindex="-1"]):not(:has(img)) {
color:var(--color-primary-text);
background-color:var(--color-primary);
text-decoration:underline;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.public a:focus:has(img) {
}
.public a img {
-webkit-transition:box-shadow .25s linear;
transition:box-shadow .25s linear;
}
@media (prefers-reduced-motion: reduce) {
main a img {
transition-duration:0ms !important;
}
}
.public a:focus img {
-webkit-box-shadow:0px 0px 0px 2px var(--color-primary);
-moz-box-shadow:0px 0px 0px 2px var(--color-primary);
box-shadow:0px 0px 0px 2px var(--color-primary);
}
.public button:hover,
.public a:hover {
color:var(--color-primary);
background:none;
text-decoration:underline;
}
.public button,
.public a,
.public a:visited { outline:none !important; } /* Safari Fix */
/* Select Colors */
::selection {
background:var(--color-primary);
color:#FFFFFF;
}
::-moz-selection {
background:var(--color-primary);
color:#FFFFFF;
}
::-webkit-selection {
background:var(--color-primary);
color:#FFFFFF;
}
/* Body, Header, Main, Footer, etc. */
body {
font-family:Alexandria, Helvetica, Arial, sans-serif;
font-size:18px;
line-height:1.4;
overflow-x:hidden !important;
}
@media (min-width: 992px) {
body {
font-size:20px;
line-height:1.4;
letter-spacing:1px;
}
}
#header {
width:100% !important;
height:var(--navi-height-mobile) !important;
z-index:1;
border-bottom:2px solid var(--color-primary);
position:sticky;
top:0px;
z-index:1;
background-color:#F8F8F8;
}
.is-admin #header {
top:48px !important; /* Concrete Edit Header draufrechnen */
}
@media (min-width: 992px) {
#header {
height:var(--navi-height-desktop) !important;
position:sticky;
top:0px;
}
.is-admin #header {
top:48px !important; /* Concrete Edit Header draufrechnen */
}
}
main {
/*padding-top:var(--navi-height-mobile) !important;
background:url(/extern/germany.png) center 180px no-repeat;
background-attachment:fixed;
background-size:600px;
*/
background-color:var(--bs-body-bg);
position:relative;
padding-bottom:20px;
}
@media (min-width: 992px) {
main {
/*padding-top:var(--navi-height-desktop) !important;*/
}
}
/* Abstand zwischen Header bzw. Teaser Full/Teaser wenn verwendet und dem Content */
main .main-content-wrapper {
padding-top:20px;
}
/* Footer */
.public footer {
position:relative;
z-index:1;
color:#808080;
background-color:var(--bs-body-bg);
}
.public footer .footer-wrapper {
}
.public footer a,
.public footer a:link,
.public footer a:visited,
.public footer a:active {
text-decoration:none;
color:#808080;
}
.public footer a:hover {
text-decoration:underline;
}
.footer-top {
font-size:14px;
line-height:1.2;
}
.footer-col-1,
.footer-col-2,
.footer-col-3,
.footer-col-4 {
font-size:12px;
line-height:1.4;
}
footer ul {
list-style:none;
padding:0px;
margin:0px;
}
footer ul li {
margin-bottom:4px;
}
footer h6 {
font-size:12px;
line-height:1.4;
font-weight:bold;
margin-bottom:8px;
}
footer p {
padding:0px;
margin:0px;
}
.footer-copyright {
border-top:1px solid #808080;
padding:15px 15px 15px 15px;
font-size:12px;
line-height:1.4;
}
/* hr */
.public hr {
height:2px;
background-color:var(--color-primary);
border: 0;
color: inherit;
margin: 1rem 0;
opacity:1;
}
h1,.h1 {
color:var(--color-primary);
font-family: 'Alatsi';
font-weight:400;
letter-spacing:0px;
}
h2,.h2 {
color:var(--color-primary);
font-family: 'Alatsi';
font-weight:400;
letter-spacing:0px;
}
h3,.h3 {
color:var(--color-primary);
font-family: 'Alatsi';
font-weight:400;
letter-spacing:0px;
}
h4,.h4 {
font-family: 'Alatsi';
font-weight:400;
letter-spacing:0px;
}
h5,.h5 {
font-family: 'Alatsi';
font-weight:400;
letter-spacing:0px;
}
@media (min-width: 992px) {
h1,.h1 {
}
h2,.h2 {
}
}
/* ============================================================ */
/* Header Navigation */
/* ============================================================ */
.public .navbar-custom.navbar {
padding:0px !important;
}
.public .navbar-nav {
background-color:#F8F8F8;
padding-top:15px;
padding-bottom:15px;
}
/* Navbar - We want container as display:block not flex for Dropdown-Menus */
.public navbar-custom .navbar > .container,
.public navbar-custom .navbar > .container-fluid,
.public navbar-custom .navbar > .container-lg,
.public navbar-custom .navbar > .container-md,
.public navbar-custom .navbar > .container-sm,
.public navbar-custom .navbar > .container-xl,
.public navbar-custom .navbar > .container-xxl {
display:block;
}
/* Logo */
.public .navbar-brand-wrapper {
position:fixed;
left:0px;
right:0px;
top:0px;
width:100%;
}
.public .navbar-brand {
position:absolute;
top:10px;
left:15px;
padding:0px !important;
margin:0px !important;
}
.is-admin .navbar-brand {
top:calc( 10px + 48px ) !important; /* Concrete Edit Header draufrechnen */
}
.public .navbar-brand,
.public .navbar-brand:focus,
.public .navbar-brand:hover {
color:#5B5B5B;
}
.public .navbar-brand img {
height:35px;
width:auto;
}
@media (min-width: 992px) {
.public .navbar-brand {
top:20px;
left:10px;
}
.is-admin .navbar-brand {
top:calc( 20px + 48px ) !important; /* Concrete Edit Header draufrechnen */
}
.public .navbar-brand img {
height:65px;
}
}
/* Language Area */
.header-service-2 {
position:absolute;
top:5px;
right:80px;
z-index:1;
font-size:13px;
line-height:1.2;
display:none;
}
@media (min-width: 992px) {
.header-service-2 {
display:block;
position:absolute;
top:12px;
right:100px;
}
.header-service-2 div {
margin-top:10px;
}
.header-service-2 p {
margin-bottom:0px;
}
.header-service-2 a,
.header-service-2 a:link {
color:var(--bs-body-color);
}
.header-service-2 a:hover,
.header-service-2 a:focus {
color:var(--color-primary);
}
}
/* Service Area */
.header-service {
position:absolute;
top:8px;
right:15px;
z-index:2;
}
.header-service p:last-child {
margin-bottom:0px;
}
@media (min-width: 992px) {
.header-service {
position:absolute;
top:30px;
right:15px;
}
}
.header-service .contact {
font-size:32px;
}
.header-service .contact a {
margin:0px;
padding:6px 8px 4px 10px;
color:#888888;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
transition:all .6s;
}
.header-service .contact a:focus,
.header-service .contact a:hover {
background-color:var(--color-primary);
color:#FFFFFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
/* Burgermenu Mobile */
.public .navbar-custom .navbar-toggler {
border-color:#5B5B5B;
color:#5B5B5B;
position:absolute;
left:90px;
top:15px;
}
.public .navbar-toggler:focus {
box-shadow: none;
}
.public .navbar-custom .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")
}
/* Begin: Alernative Darstellung Burger Menu
*/
/* Remove border from toggler */
.public .navbar-toggler {
border: 0 !important;
}
.public .navbar-toggler:focus,
.public .navbar-toggler:active,
.public .navbar-toggler-icon:focus {
outline: none !important;
box-shadow: none !important;
border: 0 !important;
}
/* Lines of the Toggler */
.public .toggler-icon{
width: 30px;
height: 3px;
background-color:var(--color-primary);
display: block;
transition: all 0.2s;
}
/* Adds Space between the lines */
.public .middle-bar{
margin: 5px auto;
}
/* State when navbar is opened (START) */
.public .navbar-toggler .top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.public .navbar-toggler .middle-bar {
opacity: 0;
filter: alpha(opacity=0);
}
.public .navbar-toggler .bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
/* State when navbar is opened (END) */
/* State when navbar is collapsed (START) */
.public .navbar-toggler.collapsed .top-bar {
transform: rotate(0);
}
.public .navbar-toggler.collapsed .middle-bar {
opacity: 1;
filter: alpha(opacity=100);
}
.public .navbar-toggler.collapsed .bottom-bar {
transform: rotate(0);
}
/* State when navbar is collapsed (END) */
/* Color of Toggler when collapsed */
.public .navbar-toggler.collapsed .toggler-icon {
background-color: #777777;
}
/* End: Alernative Darstellung Burger Menu */
/* Navigation Mobile / Desktop */
.public #header-navigation {
position:absolute;
left:0px;
right:0px;
top:var(--navi-height-mobile);
padding:0px !important;
margin:0px !important;
border-bottom:2px solid var(--color-primary);
}
.is-admin #header-navigation {
/* top:calc( 48px + var(--navi-height-mobile) ); /* Concrete Edit Header draufrechnen bei fixed */
}
@media (min-width: 992px) {
.public #header-navigation {
position:absolute;
top:25px;
left:160px;
border-bottom:none;
background:none;
}
}
.public .navbar-custom .navbar-nav .nav-item {
}
@media (min-width: 992px) {
.public .navbar-custom .navbar-nav .nav-item {
margin-right:30px;
}
}
.public .navbar-custom .navbar-nav .nav-item a {
border-radius:0;
}
@media (min-width: 992px) {
.public .navbar-custom .navbar-nav .nav-item a {
border-radius:4px;
}
}
/* Navgation Links */
.public .navbar-custom .navbar-nav .nav-link {
padding-left:15px;
padding-right:0px;
padding:6px 15px 6px 15px;
color:#5B5B5B;
text-decoration:none;
letter-spacing:1px;
}
.public .navbar-custom .navbar-nav .nav-link:focus {
color:var(--color-primary-text);
}
.public .navbar-custom .navbar-nav .nav-link:hover {
text-decoration:underline;
}
.public .navbar-custom .navbar-nav .nav-link.disabled {
color:#8B8B8B;
}
.public .navbar-custom .navbar-nav .nav-link.active,
.public .navbar-custom .navbar-nav .show > .nav-link {
color:var(--color-primary);
}
@media (min-width: 992px) {
.public .navbar-custom .navbar-nav .nav-link {
white-space:nowrap;
padding-top:0px;
padding-bottom:0px;
padding:0px 2px 0px 2px;
}
}
/* Navigation Dropdowns */
.public .navbar-custom .dropdown-menu {
padding:0px;
border:none;
}
.public .navbar-custom .dropdown-menu .nav-link {
}
/* Dropdown Animation */
@media (min-width: 768px) {
.dropdown-menu-animate {
animation-duration: .6s;
-webkit-animation-duration: .6s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
}
@keyframes dropdown-menu-slideIn {
0% {
transform: translateY(3rem);
opacity: 0;
}
100% {
transform: translateY(0rem);
opacity: 1;
}
0% {
transform: translateY(3rem);
opacity: 0;
}
}
@-webkit-keyframes dropdown-menu-slideIn {
0% {
-webkit-transform: transform;
-webkit-opacity: 0;
}
100% {
-webkit-transform: translateY(0);
-webkit-opacity: 1;
}
0% {
-webkit-transform: translateY(3rem);
-webkit-opacity: 0;
}
}
.dropdown-menu-slideIn {
-webkit-animation-name: dropdown-menu-slideIn;
animation-name: dropdown-menu-slideIn;
}
@media (min-width: 992px) {
.public .navbar-custom .dropdown-menu {
min-width: 300px;
padding:10px 0px 10px 10px;
margin-top:5px;
background-color:rgba(255,255,255,.95);
border:1px solid var(--color-primary);
}
.public .navbar-custom .dropdown-menu .nav-link {
padding:4px;
margin-top:1px;
margin-bottom:1px;
color:#5B5B5B;
font-size:20px;
line-height:1.4;
}
.public .navbar-custom .dropdown-menu .nav-link:hover{
text-decoration:underline;
}
.public .navbar-custom .dropdown-menu .nav-link:focus {
color:var(--color-primary-text);
}
}
/* Navbar Path Colors */
.public .navbar-custom .nav-selected,
.public .navbar-custom .nav-path-selected,
.public .navbar-custom .dropdown-menu .nav-selected,
.public .navbar-custom .dropdown-menu .nav-path-selected {
color:var(--color-primary);
}
/* ============================================================ */
/* Navi horizontal (footer) */
/* ============================================================ */
ul.navi-horizontal {
padding:0px 0px 5px 0px;
margin:0px;
list-style:none;
}
ul.navi-horizontal li {
}
ul.navi-horizontal li a,
ul.navi-horizontal li a:link,
ul.navi-horizontal li a:visited,
ul.navi-horizontal li a:active { color:#5B5B5B; outline:none; text-decoration:none; }
ul.navi-horizontal li a:focus,
ul.navi-horizontal li a:hover { color:#000000; background:none; text-decoration:underline; }
/* Navi horizontal Path Colors */
ul.navi-horizontal a.nav-link.nav-selected,
ul.navi-horizontal a.nav-link.nav-path-selected {
color:var(--color-primary);
}
/* ============================================================ */
/* Breadcrumb */
/* ============================================================ */
.breadcrumb-wrapper {
background-color:#EEEEEE;
padding-top:15px;
padding-bottom:15px;
margin-top:30px;
border-top:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
}
ol.breadcrumb {
margin-top:0px;
margin-bottom:0px;
font-size:14px;
line-height:1.4;
color:#808080;
}
ol.breadcrumb .active {
color:var(--color-primary);
}
ol.breadcrumb a {
color: #5B5B5B;
}
ol.breadcrumb a:hover {
text-decoration:underline !important;
}
.breadcrumb>li+li:before {
padding: 0 5px;
color: #5B5B5B;
content: "/\00a0";
}
/* ============================================================ */
/* Social Links */
/* ============================================================ */
.ccm-block-social-links {
}
.ccm-block-social-links ul {
}
.ccm-block-social-links ul li {
display:block;
padding-bottom:15px;
font-size:36px;
}
/* ============================================================ */
/* Hero Image */
/* ============================================================ */
.default-block-hero-image .neu-button {
position:absolute;
left:-10px; top:-15px;
z-index:999;
width:95px; height:70px;
background:url(/images/neu-button.png) left top no-repeat;
background-size:95px 70px;
}
.default-block-hero-image .new-button {
position:absolute;
left:-10px; top:-15px;
z-index:999;
width:95px; height:70px;
background:url(/images/new-button.png) left top no-repeat;
background-size:95px 70px;
}
/* default-block-hero-image */
.default-block-hero-image {
padding:15px;
margin-bottom:0px;
}
.default-block-hero-image-image {
width:100%;
text-align:center;
margin-bottom:15px;
}
.default-block-hero-image-image img {
width:100%;
}
.default-block-hero-image-text {
position:static !important;
width:100% !important;
overflow: hidden;
}
.default-block-hero-image-text h1,
.default-block-hero-image-text h2,
.default-block-hero-image-text h3,
.default-block-hero-image-text h4,
.default-block-hero-image-text h5,
.default-block-hero-image-text h6 {
font-size:18px;
font-weight:bold;
}
.default-block-hero-image-button {
}
/* border-block-hero-image */
.border-block-hero-image {
padding:15px 15px 0px 15px;
border:1px solid var(--color-primary);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
margin-bottom:0px;
}
.border-block-hero-image-image {
width:100%;
text-align:center;
margin-bottom:15px;
}
.border-block-hero-image-image img {
width:100%;
}
.border-block-hero-image-text {
position:static !important;
width:100% !important;
overflow: hidden;
}
.border-block-hero-image-text h1,
.border-block-hero-image-text h2,
.border-block-hero-image-text h3,
.border-block-hero-image-text h4,
.border-block-hero-image-text h5,
.border-block-hero-image-text h6 {
font-size:18px;
font-weight:bold;
}
.border-block-hero-image-button {
margin:-8px 0px 30px 0px;
}
/* ============================================================ */
/* Switch language */
/* ============================================================ */
.ccm-region-flag {
width:24px;
height:auto;
margin-right:4px;
}
/* ============================================================ */
/* Video */
/* ============================================================ */
.ccm-video {
text-align:center;
}
.ccm-video h1 {
display:block;
position:absolute;
left:0px; right:0px; top:0px;
padding:15px;
font-size:16px;
text-align:center;
color:#5B5B5B;
background:url(/images/bg/transparent-white-50.png) left top repeat;
}
.ccm-video-outside {
padding:0px 15px 0px 15px;
}
.ccm-video-outside h1 {
text-align:center;
}
/* -lg- */
@media (min-width: 992px) {
.ccm-video h1 {
font-size:22px !important;
line-height:1.4;
}
}
/* -xl- */
@media (min-width: 1200px) {
.ccm-video h1 {
font-size:26px !important;
line-height:1.4;
}
}
/* -xxl- */
@media (min-width: 1400px) {
.ccm-video h1 {
font-size:32px !important;
line-height:1.4;
}
}
@media (min-width: 1600px) {
.ccm-video h1 {
font-size:36px !important;
line-height:1.4;
}
}
/* ============================================================ */
/* exsys Contact Form */
/* ============================================================ */
.captcha-view {
display:inline-block;
padding-right:10px;
font-size:24px;
font-family:var(--bs-font-monospace);
letter-spacing:2px;
}
/* ============================================================ */
/* Forms */
/* ============================================================ */
/* Valid / Invalid Darstellung */
.public .form-control.check:required:invalid {
border:1px solid #E00000;
}
.public .form-control.check:required:valid {
border:1px solid #B4CC1E;
}
.public input.check[type="checkbox"]:required:invalid + label {
color:#E00000;
}
.public input.check[type="checkbox"]:required:valid + label {
color:#869A16;
}
.public #exsys_captcha.check:required:invalid {
border:1px solid #E00000;
}
.public #exsys_captcha.check:required:valid {
border:1px solid #B4CC1E;
}
/* Alternative Darstellung mit Label halb im Formfeld */
.public .form-group {
position:relative;
padding-bottom:1.5rem;
}
.public .form-group .form-label {
font-size:14px;
line-height:14px;
position:absolute;
left:10px; top:-8px;
background-color:#F8F8F8;
padding:0px 5px 0px 5px;
}
.public .form-control::not(textarea),
.public select.form-control,
.public select.form-control[multiple],
.public select.form-control[size] {
height: calc(1.6em + .75rem + 2px);
padding: .475rem .75rem .375rem .75rem;
}
/* ============================================================ */
/* Bootstrap 5 override: ; */
/* ============================================================ */
.w-100 {
width:100%;
height:auto;
}
/* Buttons */
a.btn.btn-primary,
.btn {
padding:15px 30px 15px 30px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.3);
box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.1);
}
.btn:focus {
border-color: rgba(1, 125, 221, 0.8);
box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(1, 125, 221, 0.6);
}
.btn-primary {
background-color:var(--color-primary);
color:#FFFFFF !important;
text-decoration:none !important;
font-weight:bold;
border:2px solid #FFFFFF;
border-color:transparent;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.btn-primary a {
color:#FFFFFF !important;
text-decoration:none;
}
.btn-primary:hover,
.btn-primary:focus {
background-color:#FFFFFF !important;
border:2px solid var(--color-primary);
color:var(--color-primary) !important;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px !important;
-webkit-box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.3);
box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.1);
text-shadow: none;
}
.btn-outline-primary {
width:100%;
}
/* Input */
/* Change Focus Glow */
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
border-color: rgba(1, 125, 221, 0.8);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(1, 125, 221, 0.6);
outline: 0 none;
}
/* ============================================================ */
/* Developement Helper */
/* ============================================================ */
/* Screensize Helper
body::after {
position:fixed;
right:0px; bottom:0px;
background-color:#FFFFFF;
content:"XS | <576px";
z-index:999999;
padding:0px 5px 0px 5px;
}
@media (min-width: 576px) {
body::after { content:"SM | >=576px"; }
}
@media (min-width: 768px) {
body::after { content:"MD | >=768px"; }
}
@media (min-width: 992px) {
body::after { content:"LG | >=992px"; }
}
@media (min-width: 1200px) {
body::after { content:"XL | >=1200px"; }
}
@media (min-width: 1400px) {
body::after { content:"XXL | >=1400px"; }
}
@media (min-width: 1600px) {
body::after { content:">XXL | >=1600px"; }
}
@media (min-width: 1800px) {
body::after { content:">XXL | >=1800px"; }
}
@media (min-width: 2000px) {
body::after { content:">XXL | >=2000px"; }
}
@media (min-width: 2200px) {
body::after { content:">XXL | >=2200px"; }
}
@media (min-width: 2400px) {
body::after { content:">XXL | >=2400px"; }
}
@media (min-width: 2600px) {
body::after { content:">XXL | >=2600px"; }
}
@media (min-width: 2800px) {
body::after { content:">XXL | >=2800px"; }
}
@media (min-width: 3000px) {
body::after { content:">XXL | >=3000px"; }
}
@media (min-width: 3200px) {
body::after { content:">XXL | >=3200px"; }
}
@media (min-width: 3400px) {
body::after { content:">XXL | >=3400px"; }
}
@media (min-width: 3600px) {
body::after { content:">XXL | >=3600px"; }
}
@media (min-width: 3800px) {
body::after { content:">XXL | >=3800px"; }
}
@media (min-width: 4000px) {
body::after { content:">XXL | >=4000px"; }
}
/* Container Helper
.container { background-color:#E0E0E0 !important; }
@media (max-width: 320px) {
}
@media (min-width: 576px) {
.container { background-color:#FFC1FC !important; }
}
@media (min-width: 768px) {
.container { background-color:#FCB1B3 !important; }
}
@media (min-width: 992px) {
.container { background-color:#FFFE9B !important; }
}
@media (min-width: 1200px) {
.container { background-color:#BCFBF8 !important; }
}
*/