/* bySam */
/*
All classes and HTML tags are located within the parent class
.public
Concrete Service Classes in the body Tag
.is-admin
.is-edit-mode
*/
/*
Display Font-Awesome Symbols:
https://fontawesome.com/
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: 900;
font-display: block;
content:'\f054';
*/
/* Animated-Effects - https://animate.style/
Add the class animate__animated to an element, along with any of the animation names (don't forget the animate__ prefix!):
Example:
An animated element
*/
/* @import url("animate.min.css"); */
/* ============================================================ */
/* Vars Example: color:var(--bs-blue); */
/* ============================================================ */
/* urbanist-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Urbanist';
font-style: normal;
font-weight: 400;
src: url('/extern/urbanist-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* urbanist-600 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Urbanist';
font-style: normal;
font-weight: 600;
src: url('/extern/urbanist-v18-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* urbanist-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Urbanist';
font-style: normal;
font-weight: 700;
src: url('/extern/urbanist-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
:root {
/* Bootstrap 5 */
--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 /elements/header.php */
--navi-height-mobile:60px;
--navi-height-desktop:100px;
/* Concrete Header-Height if Admin */
--if-admin:48px;
/* Project Colors */
--color-body:#FFFFFF;
--color-text:#5B5B5B;
--color-primary:#4B9AAA;
--color-primary-text:#FFFFFF;
--color-secondary:#EEEEEE;
--color-secondary-text:#000000;
--color-gray:#BBBBBB;
--color-grey:#BBBBBB;
}
/* ============================================================ */
/* 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) {
}
/* ============================================================ */
/* Global */
/* ============================================================ */
/* Link Colors - look and feel - barrier-free */
.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;
}
}
.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#ex-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;
}
/* Safari Fix */
.public button,
.public a,
.public a:visited {
outline:none !important;
}
/* Select Colors */
::selection {
background:var(--color-primary);
color:var(--color-primary-text);
}
::-moz-selection {
background:var(--color-primary);
color:var(--color-primary-text);
}
::-webkit-selection {
background:var(--color-primary);
color:var(--color-primary-text);
}
/* Body */
body {
background: #FFFFFF;
background: linear-gradient(90deg, rgba(241, 248, 250, 1) 0%, rgba(255, 255, 255, 1) 100%);
color:var(--color-text);
/* font-family:Helvetica, Arial, sans-serif; */
font-family:Urbanist, 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;
}
}
/* Header */
header#ex-header {
position:fixed;
top:0px;
width:100% !important;
height:var(--navi-height-mobile) !important;
z-index:1;
background-color:var(--color-body);
border-bottom:2px solid var(--color-primary);
}
@media (min-width: 992px) {
header#ex-header {
height:var(--navi-height-desktop) !important;
}
}
.is-admin header#ex-header {
top:var(--if-admin) !important; /* Concrete Edit Header draufrechnen */
}
/* Main */
main#ex-main {
min-height:400px;
padding-top:calc( 30px + var(--navi-height-mobile) ) !important;
padding-bottom:20px;
}
@media (min-width: 992px) {
main#ex-main {
padding-top:calc( 30px + var(--navi-height-desktop) ) !important;
}
}
/* Footer */
footer#ex-footer {
position:relative;
color:var(--color-text);
background-color:transparent;
}
footer#ex-footer .footer-wrapper {
}
footer#ex-footer a,
footer#ex-footer a:link,
footer#ex-footer a:visited,
footer#ex-footer a:active {
text-decoration:none;
}
footer#ex-footer a:hover {
text-decoration:underline;
}
footer#ex-footer .footer-col-1,
footer#ex-footer .footer-col-2,
footer#ex-footer .footer-col-3,
footer#ex-footer .footer-col-4 {
font-size:16px;
line-height:1.4;
padding-top:1.5rem;
padding-bottom:1.5rem;
}
footer#ex-footer ul {
list-style:none;
padding:0px;
margin:0px;
}
footer#ex-footer ul li {
margin-bottom:4px;
}
footer#ex-footer h1, .h1,
footer#ex-footer h2, .h2,
footer#ex-footer h3, .h3,
footer#ex-footer h4, .h4,
footer#ex-footer h5, .h5,
footer#ex-footer h6, .h6, {
font-size:12px;
line-height:1.4;
font-weight:bold;
margin-bottom:8px;
}
footer#ex-footer p {
padding:0px;
margin:0px;
}
footer#ex-footer .footer-copyright {
border-top:1px solid var(--color-primary);
padding:15px 15px 15px 15px;
font-size:12px;
line-height:1.4;
text-align:center;
background-color:#FFFFFF;
}
/* hr change only for public area */
.public hr {
height:2px;
background-color:var(--color-primary);
border:0;
color:inherit;
margin:1rem 0;
opacity:1;
}
/* Set default img */
img {
width:auto;
height:auto;
}
/* Headlines change only for public area */
.public h1, .h1 {
color:var(--color-primary);
font-family:Urbanist, Helvetica, Arial, sans-serif;
font-weight:600;
}
.public h2, .h2 {
color:var(--color-primary);
font-family:Urbanist, Helvetica, Arial, sans-serif;
}
.public h3, .h3 {
color:var(--color-primary);
font-family:Urbanist, Helvetica, Arial, sans-serif;
}
.public h4, .h4 {
color:var(--color-primary);
font-family:Urbanist, Helvetica, Arial, sans-serif;
}
.public h5, .h5 {
color:var(--color-primary);
font-family:Urbanist, Helvetica, Arial, sans-serif;
}
.public h6, .h6 {
color:var(--color-primary);
font-family:Urbanist, Helvetica, Arial, sans-serif;
}
/* ============================================================ */
/* Custom Project Classes */
/* ============================================================ */
/* Parallax Effect */
.parallax {
/*pointer-events:none;*/
transition:.45s cubic-bezier(.4, .49, .32, .99);
}
/* Project Colors */
.color-primary {
color:var(--color-primary);
}
.bg-color-primary {
background-color:var(--color-primary);
color:var(--color-primary-text);
}
.bg-color-primary a,
.bg-color-primary a:link,
.bg-color-primary a:visited,
.bg-color-primary a:focus,
.bg-color-primary a:hover,
.bg-color-primary a:active {
color:var(--color-primary-text);
}
.color-secondary {
color:var(--color-secondary);
}
.bg-color-secondary {
background-color:var(--color-secondary);
color:var(--color-secondary-text);
}
.bg-color-secondary a,
.bg-color-secondary a:link,
.bg-color-secondary a:visited,
.bg-color-secondary a:focus,
.bg-color-secondary a:hover,
.bg-color-secondary a:active {
color:var(--color-secondary-text);
}
.color-gray,
.color-grey {
color:var(--color-gray);
}
.bg-color-gray,
.bg-color-grey {
background-color:var(--color-gray);
}
.urbanist {
font-family:Urbanist, Helvetica, Arial, sans-serif;
}
.card,
.fieldset-reset {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px !important;
border-color:var(--color-primary) !important;
}
/* Immobilien */
.sb-label {
min-width: 160px !important;
display: inline-block !important;
}
.sb-button-red {
background-color: #D00000;
color: #FFFFFF;
font-weight: bold;
width: 100%;
}
.sb-button-orange {
background-color: #FFA500;
color: #FFFFFF;
font-weight: bold;
width: 100%;
}
.sb-border-red {
bs-border-opacity: 1;
border-color: #D00000;
}
.sb-border-orange {
border-color: #FFA500;
}
fieldset, legend {
all: revert;
}
.fieldset-reset {
all: revert;
}
.sb-border-orange,
.sb-border-red {
border-color:var(--color-primary);
}
.myhover:hover div {
background-color: #F1F8FA;
color: black;
}
.row-alternate:nth-child(2n) {
background: #F0F0F0;
}
/* ============================================================ */
/* Header Navigation */
/* ============================================================ */
/* Nav Area */
.public nav.navbar.navbar-header {
padding:0px !important;
}
/* Logo */
.public .navbar-header .navbar-brand {
position:absolute;
top:10px;
left:15px;
z-index:1;
padding:0px !important;
margin:0px !important;
color:var(--color-primary);
}
.public .navbar-header .navbar-brand img {
height:40px;
width:auto;
}
@media (min-width: 992px) {
.public .navbar-header .navbar-brand {
top:8px;
left:15px;
}
.public .navbar-header .navbar-brand img {
height:83px;
}
}
/* Burgermenu Mobile */
/* Begin: Standard View Burger Menu
Copy this in elements/header.tpl
*/
.public .navbar-header .navbar-toggler {
border-color:var(--color-gray);
color:var(--color-gray);
position:absolute;
left:130px;
top:10px;
}
.public .navbar-header .navbar-toggler:active,
.public .navbar-header .navbar-toggler:hover,
.public .navbar-header .navbar-toggler:focus {
border-color:var(--color-primary) !important;
color:var(--color-primary) !important;
background-color:transparent !important;
box-shadow:none;
}
.public .navbar-header .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")
}
/* End: Standard View Burger Menu */
/* Begin: Alernative View Burger Menu
Copy this in elements/header.tpl
*/
/*
.public .navbar-header .navbar-toggler {
position:absolute;
left:90px;
top:15px;
border: 0 !important;
}
.public .navbar-header .navbar-toggler:focus,
.public .navbar-header .navbar-toggler:active,
.public .navbar-header .navbar-toggler-icon:focus {
outline: none !important;
box-shadow: none !important;
border: 0 !important;
background-color:transparent !important;
}
.public .navbar-header .toggler-icon{
width: 30px;
height: 3px;
background-color:var(--color-primary);
display: block;
transition: all 0.2s;
}
.public .navbar-header .middle-bar{
margin: 5px auto;
}
.public .navbar-header .navbar-toggler .top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.public .navbar-header .navbar-toggler .middle-bar {
opacity: 0;
filter: alpha(opacity=0);
}
.public .navbar-header .navbar-toggler .bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
.public .navbar-header .navbar-toggler.collapsed .top-bar {
transform: rotate(0);
}
.public .navbar-header .navbar-toggler.collapsed .middle-bar {
opacity: 1;
filter: alpha(opacity=100);
}
.public .navbar-header .navbar-toggler.collapsed .bottom-bar {
transform: rotate(0);
}
.public .navbar-header .navbar-toggler.collapsed .toggler-icon {
background-color:var(--color-gray);
}
.public .navbar-header .navbar-toggler.collapsed:hover .toggler-icon {
background-color:var(--color-primary);
}
/* End: Alernative View Burger Menu */
/* Navigation Mobile / Desktop */
.public .navbar-header #ex-header-navigation {
position:absolute;
top:var(--navi-height-mobile);
left:0px;
right:0px;
width:100%;
border-bottom:2px solid var(--color-primary);
}
@media (min-width: 992px) {
.public .navbar-header #ex-header-navigation {
position:absolute;
top:20px;
left:235px;
right:auto;
width:auto;
border-bottom:none;
}
}
/* Navbar ul */
.public .navbar-header .navbar-nav {
background: #FFFFFF;
background: linear-gradient(90deg, rgba(241, 248, 250, 1) 0%, rgba(255, 255, 255, 1) 100%);
padding-top:15px;
padding-bottom:15px;
}
@media (min-width: 992px) {
.public .navbar-header .navbar-nav {
background:none;
background-color:transparent;
}
}
/* Navitem ul li */
.public .navbar-header .navbar-nav > .nav-item {
}
@media (min-width: 992px) {
.public .navbar-header .navbar-nav > .nav-item {
margin-right:25px;
}
}
.public .navbar-header .navbar-nav .nav-item a {
border-radius:0;
}
@media (min-width: 992px) {
.public .navbar-header .navbar-nav .nav-item a {
border-radius:4px;
}
}
/* Nav-Links in Navitem ul li a */
.public .navbar-header .navbar-nav .nav-link {
padding:6px 15px 6px 15px;
color:var(--color-text);
text-decoration:none;
}
.public .navbar-header .navbar-nav .nav-link:hover {
text-decoration:underline;
}
.public .navbar-header .navbar-nav .nav-link:hover:not(:focus) {
color:var(--color-primary);
}
.public .navbar-header .navbar-nav .nav-link:focus {
color:var(--color-primary-text);
}
/* disabled */
.public .navbar-header .navbar-nav .nav-link.disabled {
color:var(--color-gray);
}
@media (min-width: 992px) {
.public .navbar-header .navbar-nav .nav-link {
white-space:nowrap;
padding-top:0px;
padding-bottom:0px;
padding:0px 2px 0px 2px;
}
}
/* Navi Headline */
.public .navbar-header .navbar-nav .nav-link.nav-headline:hover,
.public .navbar-header .navbar-nav .nav-link.nav-headline:focus,
.public .navbar-header .navbar-nav .nav-link.nav-headline {
color:var(--color-text);
font-weight:bold;
text-decoration:none;
}
/* Navigation Dropdowns ul li ul */
.public .navbar-header .dropdown-menu {
padding:0px;
border:none;
}
@media (min-width: 992px) {
.public .navbar-header .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-header .dropdown-menu .nav-link {
font-size:18px;
line-height:1.4;
}
@media (min-width: 992px) {
.public .navbar-header .dropdown-menu .nav-link {
padding:4px;
margin-top:1px;
margin-bottom:1px;
font-size:20px;
line-height:1.4; }
}
/* Dropdown Animation */
@media (min-width: 768px) {
.public .navbar-header .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;
}
}
.public .navbar-header .dropdown-menu-slideIn {
-webkit-animation-name: dropdown-menu-slideIn;
animation-name: dropdown-menu-slideIn;
}
/* dropdown-submenu-item ul li ul li ul */
.public .navbar-header .dropdown-menu .dropdown-submenu {
list-style:none;
padding-left:15px;
}
/* Navbar Path Colors */
.public .navbar-header .nav-link.nav-selected,
.public .navbar-header .nav-link.nav-path-selected,
.public .navbar-header .dropdown-menu .nav-selected,
.public .navbar-header .dropdown-menu .nav-path-selected {
color:var(--color-primary);
}
/* ============================================================ */
/* Header Service Areas */
/* ============================================================ */
/* Service Area 1 */
.header-service-1 {
position:absolute;
top:5px;
right:15px;
z-index:2;
font-size:14px;
display:none;
}
.header-service-1 p:last-child {
margin-bottom:0px;
}
@media (min-width: 992px) {
.header-service-1 {
display:flex;
position:absolute;
top:20px;
right:15px;
}
}
/* Service Area 2 */
.header-service-2 {
position:absolute;
top:5px;
right:80px;
z-index:100;
font-size:14px;
display:none;
}
.header-service-2 p:last-child {
margin-bottom:0px;
}
@media (min-width: 992px) {
.header-service-2 {
display:flex;
position:absolute;
top:20px;
right:190px;
}
}
/* ============================================================ */
/* 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-text);
}
ol.breadcrumb a {
color:#5B5B5B;
}
ol.breadcrumb a:hover {
text-decoration:underline !important;
}
.breadcrumb>li+li:before {
padding: 0 5px;
color: #5B5B5B;
content: "/\00a0";
}
/* ============================================================ */
/* 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 */
}
/* Pic zoom normal to big */
.public .zoom-img img {
transform: scale(1,1);
-webkit-transition:.25s ease-out;
transition:.25s ease-out;
}
@media (min-width: 992px) {
.public a:focus .zoom-img img,
.public .zoom-img:hover img {
transform: scale(1.05,1.05);
-webkit-transition:.4s ease-out;
transition:.4s ease-out;
}
}
/* Pic zoom small to big */
.public .zoom-img-small img {
transform: scale(0.9,0.9);
-webkit-transition:.25s ease-out;
transition:.25s ease-out;
}
.public a:focus .zoom-img-small img,
.public .zoom-img-small:hover img {
transform: scale(1,1);
-webkit-transition:.4s ease-out;
transition:.4s ease-out;
}
/* Area zoom normal to big */
.public .zoom-area {
transform: scale(1,1);
-webkit-transition:.25s ease-out;
transition:.25s ease-out;
}
@media (min-width: 992px) {
.public a:focus .zoom-area,
.public .zoom-area:hover {
transform: scale(1.1,1.1);
-webkit-transition:.3s ease-out;
transition:.3s ease-out;
}
}
/* Bild an den Rändern ausfaden */
.fading-edge {
width: 100%; /* Oder die gewünschte Breite des Bereichs */
height: auto; /* Oder die gewünschte Höhe des Bereichs */
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;
}
/* 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:calc( var(--navi-height-mobile) * -1 );
visibility:hidden;
}
@media (min-width: 992px) {
.anchor {
top:calc( var(--navi-height-desktop) * -1 );
}
}
/* Cols innerhalb einer row umdrehen */
.row-reverse .row {
flex-direction: row-reverse;
}
/* 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;
}
/* Extra Breiten angaben */
.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; /* damit line-height funktioniert */
font-size:50%;
line-height:1.4;
}
.public .fs-small {
display:inline-block; /* damit line-height funktioniert */
font-size:75%;
line-height:1.4;
}
/* ============================================================ */
/* Barrierefreiheit: */
/* ============================================================ */
/* Screen Reader only */
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
/* Button "zum Hauptinhalt" wird mit Tab aufgerufen */
#skip2content a {
position:absolute;
top:-50px;
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;
}
.is-admin #skip2content a:focus {
top:var(--is-admin);
}
@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 var(--color-body) !important;
border-radius:5px;
}
.public a#scroll2top:hover,
.public a#scroll2top:focus {
background-color:var(--color-primary) !important;
text-decoration:none !important;
}
/* ============================================================ */
/* 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;
}
.ccm-block-social-links ul li a {
padding:8px 8px 0px 8px;
}
/* ============================================================ */
/* 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;
}
/* ============================================================ */
/* 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 */
.public a.btn.btn-primary,
.public .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);
}
.public .btn:focus {
border-color: rgba(75, 154, 170, 0.8);
box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(1, 125, 221, 0.6);
}
.public .btn-schnellsuche,
.public .btn-primary {
background-color:var(--color-primary);
background: #4B9AAA;
background: linear-gradient(90deg, rgba(75, 154, 170, 1) 0%, rgba(113, 176, 189, 1) 66%, rgba(163, 205, 214, 1) 100%);
color:#FFFFFF !important;
text-decoration:none !important;
font-weight:bold;
border:2px solid #FFFFFF;
border-color:transparent;
}
.public .btn-schnellsuche a,
.public .btn-primary a {
color:#FFFFFF !important;
text-decoration:none;
}
.public .btn-schnellsuche:hover,
.public .btn-schnellsuche:focus,
.public .btn-primary:hover,
.public .btn-primary:focus {
background:none;
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);
}
.public .btn-outline-primary {
width:100%;
}
.public .btn-schnellsuche {
width:100%;
min-height:82px;
display:flex;
justify-content:center; /* x */
align-items:center; /* y */
margin-bottom:15px;
}
@media (min-width: 992px) {
.public .btn-schnellsuche {
margin-bottom:8px;
}
}
/* Input */
/* Change Focus Glow */
.public textarea:focus,
.public input[type="text"]:focus,
.public input[type="password"]:focus,
.public input[type="datetime"]:focus,
.public input[type="datetime-local"]:focus,
.public input[type="date"]:focus,
.public input[type="month"]:focus,
.public input[type="time"]:focus,
.public input[type="week"]:focus,
.public input[type="number"]:focus,
.public input[type="email"]:focus,
.public input[type="url"]:focus,
.public input[type="search"]:focus,
.public input[type="tel"]:focus,
.public input[type="color"]:focus,
.public .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(75, 154, 170, 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: 1920px) {
body::after { content:">XXL | >=1920px"; }
}
@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: 2560px) {
body::after { content:">XXL | >=2560px"; }
}
@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; }
}
*/