*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
--mainsize: .85rem;
--mainsize_sm: calc(var(--mainsize) / 1.125);
--mainsize_xs: calc(var(--mainsize) / 1.25);
--space: var(--mainsize);
--space_lg: calc(var(--mainsize) * 2);
--space_xl: calc(var(--mainsize) * 4);
--br: calc(var(--mainsize) / 2);
}


/* #######################################################

V1.1 Updates August 2026

####################################################### */

:root {
    --gap: calc(var(--mainsize) * 1.666); /* equal to root-lineheight */
    --white: var(--colorbg); /* konformität */
    --black: var(--colorfont); /* konformität */
    --mainsize_xxs: calc(var(--mainsize) / 1.5); /* add new size */
}

.white {color: var(--white);}
.black {color: var(--black);}

.carousel small {
    position: absolute;
    right: var(--gap);
    bottom: var(--gap);
    font-size: var(--mainsize_xxs);
    color: var(--white);
    opacity: .666;
    -webkit-user-select: none;
    user-select: none;
}

.text figure,
.text figure img {
    border-radius: var(--br);
}

.text figure figcaption {
  color: var(--color1);
  padding-top: calc(var(--gap) * .25);
  font-size: var(--mainsize_xs);
  line-height: 1.3;
  padding-left: calc(var(--gap) * .25);
  padding-right: calc(var(--gap) * .25);
}

.text figure span {
    color: var(--black);
}

.text figure.small img {
    width: 50%;
    height: auto;
    display: block;
}

@media (min-width: 1200px) {.text figure.small img {width: 40%;}}
@media (min-width: 1400px) {.text figure.small img {width: 30%;}}

figure.image.mainsite_image small {
    position: absolute;
    right: calc(var(--gap) * .5);
    bottom: calc(var(--gap) * .5);
    font-size: var(--mainsize_xxs);
    color: var(--white);
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
    -webkit-user-select: none;
    user-select: none;
}

.blox .w_image {
    position: relative;
    overflow: hidden;
}

.blox .item small {
    position: absolute;
    bottom: calc(var(--gap) * .5);
    right: calc(var(--gap) * .5);
    font-size: var(--mainsize_xxs);
    color: var(--white);
    opacity: .35;
    line-height: 1;
    -webkit-user-select: none;
    user-select: none;
}

.blox .blox--home--row .item small {
    bottom: initial;
    top: calc(var(--gap) * .5);
}

.cover_container small {
    position: absolute;
    bottom: calc(var(--gap) * .5);
    right: calc(var(--gap) * .5);
    font-size: var(--mainsize_xxs);
    color: var(--white);
    line-height: 1;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
    -webkit-user-select: none;
    user-select: none;
}

body.children .cover_container small,
body.darkblue .cover_container small,
body.brown .cover_container small,
body.blue .cover_container small {
    bottom: initial;
    top: calc(var(--gap) * .5);
}

.blox .w_image > img.w_image_bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: all 2.5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.blox .w_image > img.w_image_bg.img_load {
  opacity: 1!important;
  transform: scale(1);
}

body.engagement .row.filialen .filiale:not(:last-of-type) {
  padding-bottom: var(--mainsize);
}

figure.image.engagement_item_image {--w: 5;--h: 3;}

figure.image.engagement_item_image, figure.image.engagement_item_image img {
  border-top-left-radius: var(--br);
  border-top-right-radius: var(--br);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.modal figure.image.engagement_item_image, .modal figure.image.engagement_item_image img {
  border-radius: var(--br);
  -webkit-box-shadow: none;
  box-shadow: none;
}

body.awards .row.filialen .filiale:not(:last-of-type) {
  padding-bottom: var(--mainsize);
}

figure.image.awards_item_image {--w: 5;--h: 3;}

figure.image.awards_item_image, figure.image.awards_item_image img {
  border-top-left-radius: var(--br);
  border-top-right-radius: var(--br);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.modal figure.image.awards_item_image, .modal figure.image.awards_item_image img {
  border-radius: var(--br);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.text figure.video {
  position: relative;
  display: block;
  --w: 16;
  --h: 9;
  padding-bottom: calc(100% / var(--w) * var(--h));
  margin-bottom: 0;
  overflow: hidden;
  border-radius: var(--br);
}

.text figure.video iframe,
.text figure.video video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--br);
  object-fit: cover;
}

figure.video + figure.video {
  margin-top: var(--gap);
}


/* #######################################################

default

####################################################### */


.hyphme {
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust:100%
}

html, body {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  text-rendering: optimizeSpeed;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-size: var(--mainsize);
  font-display: swap;
}

body {
  font-family: "zeitung", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--colorfont);
  line-height: calc(var(--mainsize) * 1.666);
  background: var(--colorfont);
}

::selection {color: var(--colorbg); background: var(--color2);}

.colorfont { color: var(--colorfont)!important;}
.colorbg { color: var(--colorbg);}
.color1 { color: var(--color1);}
.color2 { color: var(--color2);}
.color3 { color: var(--color3);}
.color4 { color: var(--color4);}
.color5 { color: var(--color5);}

.colorfont0 { color: var(--colorfont0);}
.colorbg0 { color: var(--colorbg0);}
.color10 { color: var(--color10);}
.color20 { color: var(--color20);}
.color30 { color: var(--color30);}
.color40 { color: var(--color40);}
.color50 { color: var(--color50);}

.colorfont25 { color: var(--colorfont25);}
.colorbg25 { color: var(--colorbg25);}
.color125{ color: var(--color125);}
.color225 { color: var(--color225);}
.color325 { color: var(--color325);}
.color425 { color: var(--color425);}
.color525 { color: var(--color525);}

.colorfont50 { color: var(--colorfont50);}
.colorbg50 { color: var(--colorbg50);}
.color150{ color: var(--color150);}
.color250 { color: var(--color250);}
.color350 { color: var(--color350);}
.color450 { color: var(--color450);}
.color550 { color: var(--color550);}

.colorfont75 { color: var(--colorfont75);}
.colorbg75{ color: var(--colorbg75);}
.color175{ color: var(--color175);}
.color275 { color: var(--color275);}
.color375 { color: var(--color375);}
.color475 { color: var(--color475);}
.color575 { color: var(--color575);}

.colorfontbg { background: var(--colorfont);}
.colorbgbg { background: var(--colorbg);}
.color1bg { background: var(--color1);}
.color2bg { background: var(--color2);}
.color3bg { background: var(--color3);}
.color4bg { background: var(--color4);}
.color5bg { background: var(--color5);}

.colorfontbg0 { background: var(--colorfont0);}
.colorbgbg0 { background: var(--colorbg0);}
.color1bg0 { background: var(--color10);}
.color2bg0 { background: var(--color20);}
.color3bg0 { background: var(--color30);}
.color4bg0 { background: var(--color40);}
.color5bg0 { background: var(--color50);}

.colorfontbg25 { background: var(--colorfont25);}
.colorbgbg25 { background: var(--colorbg25);}
.color1bg25{ background: var(--color125);}
.color2bg25 { background: var(--color225);}
.color3bg25 { background: var(--color325);}
.color4bg25 { background: var(--color425);}
.color5bg25 { background: var(--color525);}

.colorfontbg50 { background: var(--colorfont50);}
.colorbgbg50 { background: var(--colorbg50);}
.color1bg50{ background: var(--color150);}
.color2bg50 { background: var(--color250);}
.color3bg50 { background: var(--color350);}
.color4bg50 { background: var(--color450);}
.color5bg50 { background: var(--color550);}

.colorfontbg75 { background: var(--colorfont75);}
.colorbgbg75{ background: var(--colorbg75);}
.color1bg75{ background: var(--color175);}
.color2bg75 { background: var(--color275);}
.color3bg75 { background: var(--color375);}
.color4bg75 { background: var(--color475);}
.color5bg75 { background: var(--color575);}




.container-fluid {
  max-width: 1666.666px;
  margin: auto;
}

.holder {
  padding-bottom: calc(var(--mainsize) * 4);
}

body.home .holder {
  padding-bottom: 0;
}

.cover_container {
  padding: 0;
}

.wrapper {
  background: var(--colorbg);
  z-index: 1;
}

main.main {
  padding-top: 117px;
}


h1, h2, h3, h4, h5, h6, .fs-1, .fs-2, .fs-3, .fs-4, .fs-5, .fs-6 {
  font-weight: 700;
  text-transform: uppercase;
}


h1.make_me_p, h2.make_me_p, h3.make_me_p, h4.make_me_p, h5.make_me_p, h6.make_me_p {
  font-size: var(--mainsize);
}

h2.accordion-header {
  font-size: var(--mainsize);
  line-height: 1;
}

h1.page_title {
  font-size: calc(var(--mainsize) * 3);
}

.f700, .fb {font-weight: 700!important;}

.fr, .f400 {font-weight: 400!important;}

.ul {
  text-decoration: underline;
}

.uc {
  text-transform: uppercase;
}

.nuc {
  text-transform:none!important;
}

.br {border-radius: var(--br);}

.shadow {
  -webkit-box-shadow: 0px 15px 10px -10px rgba(0,0,0,.25)!important;
  box-shadow: 0px 15px 10px -10px rgba(0,0,0,.25)!important;
}

hr.md, hr {
margin: calc(var(--mainsize) * 2) 0;
color: inherit;
border: 0;
border-top: 1px solid var(--color1);
opacity: .25;
}

hr.sm {
margin: var(--mainsize) 0;
}

hr.lg {
margin: calc(var(--mainsize) * 3) 0;
}

a {
  box-shadow: none!important;
  text-shadow: none!important;
  text-decoration: none;
  color: inherit;
  outline: none!important;
}

.uppercase {
  text-transform: uppercase;
}

.text, .text p, p.text {
  margin-bottom: var(--mainsize);
}


.text_sm, .text_sm p, p.text_sm, .btn.btn-sm {
  font-size: var(--mainsize_sm);
  line-height: calc(var(--mainsize_sm) * 1.35);
}

.text_xs, .text_xs p, p.text_xs {
  font-size: var(--mainsize_xs);
  line-height: calc(var(--mainsize_xs) * 1.35);
}

.text a {
  text-decoration: underline;
  font-weight: 600;
}

.text a.btn {
  text-decoration: none;
}

.text h1, .text h2, .text h3 {
  font-size: calc(var(--mainsize) * 1.25);
  color: var(--color1);
  margin-bottom: calc(var(--mainsize) * .5);
  margin-top: calc(var(--mainsize) * 2);
}

.text strong {
  color: var(--color1);
  text-transform: uppercase;
}

.text p + figure {
    margin-top: calc(var(--mainsize) * 3);
}

.text figure + p {
  margin-top: calc(var(--mainsize) * 2);
}

.text figure img {
  display: block;
  width: 100%;
  height: auto;
}


.text.mb-0 p, .mb-0.text p, .text.mb-0, .mb-0.text {
  margin-bottom: 0;
}
.lh1 {
  line-height: 1;
}

.lh11 {
  line-height: 1.1;
}

.lh12 {
  line-height: 1.2;
}

.lh13 {
  line-height: 1.3;
}

.lh14 {
  line-height: 1.4;
}

.lhfuckoff {
  line-height: 1.2!important;
}

.btn {
  outline: none!important;
  box-shadow: none!important;
  border-radius: var(--br);
  font-weight: 700;
}


.btn-primary,
.btn-primary:link,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary:active:hover,
.btn-primary:visited  {
  color: var(--colorbg)!important;
  border: 2px solid var(--color1)!important;
  background-color: var(--color1)!important;
}

.btn-secondary,
.btn-secondary:link,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:active:focus,
.btn-secondary:active:hover,
.btn-secondary:visited  {
  color: var(--colorbg)!important;
  border: 2px solid var(--colorbg)!important;
  background-color: transparent!important;
}

.btn-tertiary,
.btn-tertiary:link,
.btn-tertiary:hover,
.btn-tertiary:focus,
.btn-tertiary:active,
.btn-tertiary:active:focus,
.btn-tertiary:active:hover,
.btn-tertiary:visited  {
  color: var(--colorbg)!important;
  border: 2px solid var(--colorbg)!important;
  background-color: transparent!important;
}


.btn-light,
.btn-light:link,
.btn-light:hover,
.btn-light:focus,
.btn-light:active,
.btn-light:active:focus,
.btn-light:active:hover,
.btn-light:visited  {
  color: var(--color1)!important;
  border: 2px solid var(--color1)!important;
  background-color: transparent!important;
}

.btn-dark,
.btn-dark:link,
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark:active:focus,
.btn-dark:active:hover,
.btn-dark:visited  {
  color: var(--colorfont)!important;
  border: 2px solid var(--colorfont)!important;
  background-color: var(--colorfont0)!important;
}


.form-control {
  border-radius: var(--br);
  border: 1px solid var(--color150);
}

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: 1px solid var(--color10);
  outline: 0;
  box-shadow: 0 0 0 calc(var(--mainsize) / 6) var(--color125);
}


.no_btn {
  background: unset;
  border: unset;
  border-radius: unset;
  padding: unset;
  margin: unset;
  color: unset;
  font-family:inherit;
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}



.card {
--bs-card-spacer-y: var(--mainsize);
--bs-card-spacer-x: var(--mainsize);
--bs-card-title-spacer-y: 0.5rem;
--bs-card-title-color: ;
--bs-card-subtitle-color: ;
--bs-card-border-width: var(--bs-border-width);
--bs-card-border-color: var(--bs-border-color-translucent);
--bs-card-border-radius: var(--bs-border-radius);
--bs-card-box-shadow: ;
--bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
--bs-card-cap-padding-y: 0.5rem;
--bs-card-cap-padding-x: 1rem;
--bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
--bs-card-cap-color: ;
--bs-card-height: ;
--bs-card-color: ;
--bs-card-bg: var(--bs-body-bg);
--bs-card-img-overlay-padding: 1rem;
--bs-card-group-margin: 0.75rem;
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
height: var(--bs-card-height);
color: var(--colorfont);
word-wrap: break-word;
background-color: var(--colorbg);
background-clip: border-box;
border: 1px solid var(--color1);
border-radius: var(--br);
}

.card-body {
padding: var(--mainsize);
color: var(--colorfont);
border-radius: var(--br);
}

.card-footer {
padding: var(--mainsize);
padding-top: var(--mainsize);
color: var(--colorfont);
background-color: var(--colorbg);
border-radius: var(--br);
border-top: none;
}

.card-footer:last-child {
border-radius: 0 0 var(--br) var(--br);
}


.p_link a {
  text-decoration: none;;
}

/* ####################################################### navis ####################################################### */

nav.topbar  {
  background: var(--colorfont);
  text-align: right;
  -webkit-transition: padding 0.666s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: padding 0.666s cubic-bezier(0.25, 0.1, 0.25, 1);
}


nav.topbar ul {
  list-style: none;
  display: inline-block;
}

nav.topbar ul li {
  display: inline-block;
}

nav.topbar ul:not(:last-of-type) {
  border-right: 2px dotted var(--colorbg25);
}
nav.topbar ul li {
  padding-right: calc(var(--mainsize) / 2);
}

nav.topbar ul li:first-child {
  padding-left: calc(var(--mainsize) / 2);
}

nav.topbar ul.languages li:last-child {
  padding-right: 0
}

nav.topbar a.nav-link,
nav.topbar a.nav-link:link,
nav.topbar a.nav-link:hover,
nav.topbar a.nav-link:focus,
nav.topbar a.nav-link:active,
nav.topbar a.nav-link:active:focus,
nav.topbar a.nav-link:active:hover,
nav.topbar a.nav-link:visited {
-webkit-transition: color 0.666s cubic-bezier(0.25, 0.1, 0.25, 1);
transition: color 0.666s cubic-bezier(0.25, 0.1, 0.25, 1);
color: var(--colorbg75);
border-bottom: 2px solid var(--colorbg0);
border-top: 2px solid var(--colorbg0);
}

nav.topbar a.nav-link.active,
nav.topbar a.nav-link.show {
  color: var(--colorbg);
  border-bottom: 2px solid var(--colorbg);
}



.mainnav {
  background: var(--colorbg75);
  -webkit-transition: top 1s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: top 1s cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-box-shadow: 0px 15px 10px -10px rgba(0,0,0,.25);
  box-shadow: 0px 15px 10px -10px rgba(0,0,0,.25);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
}

.navbar {
  -webkit-transition: padding 1s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: padding 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.mainnav.nav-up {top: -157px;}

.navbar-brand img {
  height: 20px;
  width: auto;
  display: block;
}

ul.navbar-nav {
  text-transform: uppercase;
}

.mainnav .navbar a.nav-link,
.mainnav .navbar a.nav-link:link,
.mainnav .navbar a.nav-link:hover,
.mainnav .navbar a.nav-link:focus,
.mainnav .navbar a.nav-link:active,
.mainnav .navbar a.nav-link:active:focus,
.mainnav .navbar a.nav-link:active:hover,
.mainnav .navbar a.nav-link:visited {
font-size: var(--mainsize);
font-weight: 700;
-webkit-transition: color 0.666s cubic-bezier(0.25, 0.1, 0.25, 1);
transition: color 0.666s cubic-bezier(0.25, 0.1, 0.25, 1);
color: var(--colorfont75);
border-bottom: 3px solid var(--colorfont0);
}

.mainnav .navbar a.nav-link.active,
.mainnav .navbar a.nav-link.show {
  border-bottom: 3px solid var(--colorfont0);
  color: var(--colorfont);
}

.navbar-toggler {
  border: none;
}

.navbar-toggler {
padding-right: 0;
color: var(--color1);
border-radius: unset;
}

.navbar-toggler i {
  font-size: calc(var(--mainsize) * 2);
}

.offcanvas-backdrop.show {
opacity: 1;
}

.offcanvas.offcanvas-top {
top: 0;
right: 0;
left: 0;
height: auto;
bottom: initial;
max-height: 100%;
border-bottom: none;
background: var(--colorfont);
color: var(--colorbg);
transform: translateY(-100%);
-webkit-transition: all 0.666s cubic-bezier(0.25, 0.1, 0.25, 1);
transition: all 0.666s cubic-bezier(0.25, 0.1, 0.25, 1);
-webkit-box-shadow: 0px 15px 10px -10px rgba(0,0,0,.5);
box-shadow: 0px 15px 10px -10px rgba(0,0,0,.5);
}

.offcanvas-backdrop {
position: fixed;
top: 0;
left: 0;
z-index: 1040;
width: 100vw;
height: 100vh;
background-color: var(--colorbg50);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}

.fade {
  -webkit-transition: opacity 0.666s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: opacity 0.666s cubic-bezier(0.25, 0.1, 0.25, 1);
}


.navbar-nav a i.bi.bi-search {
  font-size: calc(var(--mainsize) * 1.25);
}

a i.bi.bi-search.bi-search-large {
  font-size: calc(var(--mainsize) * 1.5);
}
.zi_closebtn {
  font-size: calc(var(--mainsize) * 1.5);
  padding: calc(var(--mainsize) / 3) calc(var(--mainsize) / 1.5);
  margin-left: auto;
}

nav.submenu {
margin: 0 4px;
-webkit-box-shadow: 0px 15px 10px -10px rgba(0,0,0,.25);
box-shadow: 0px 15px 10px -10px rgba(0,0,0,.25);
background: var(--colorfont);
border-bottom-left-radius: var(--br);
border-bottom-right-radius: var(--br);
-webkit-user-select: none;
user-select: none;
}

.submenu-toggler {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--colorbg);
  font-weight: 700;
  text-transform: uppercase;
  padding: .75rem 1rem;
  border: none;
}

.submenu-toggler:focus {
  box-shadow: none;
}

.submenu-toggler[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}

nav.submenu ul.submenu-list li {
  display: block;
  padding: .5rem 1rem;
  border-top: 1px solid var(--colorbg25);
}

nav.submenu ul.submenu-list li:first-child {
  border-top: none;
}

@media (min-width: 992px) {
  nav.submenu .navbar-collapse {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: contain;
    scroll-snap-type: x mandatory;
    /* scroll-shadow hint: fades only appear when there's actually more to scroll to */
    background:
      linear-gradient(to right, var(--colorfont) 30%, transparent) 0 0 / 40px 100% no-repeat local,
      linear-gradient(to left, var(--colorfont) 30%, transparent) 100% 0 / 40px 100% no-repeat local,
      linear-gradient(to right, rgba(255,255,255,.2), transparent) 0 0 / 20px 100% no-repeat scroll,
      linear-gradient(to left, rgba(255,255,255,.2), transparent) 100% 0 / 20px 100% no-repeat scroll,
      var(--colorfont);
  }

  nav.submenu .navbar-collapse::-webkit-scrollbar {
    height: 0;
    display: none; /* Chrome, Safari, Opera */
  }

  nav.submenu ul.submenu-list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: max-content;
    min-width: 100%;
    white-space: nowrap;
    padding: .5rem 0;
  }

  nav.submenu ul.submenu-list li {
    display: inline;
    padding: 0 1rem;
    border-top: none;
  }
}

.submenu_holder.up {
  top: 0;
  -webkit-transition: top .45s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: top .45s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.submenu_holder.down {
  top: 68px;
  -webkit-transition: top 2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: top 2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

nav.submenu ul {
  list-style: none;
  margin: 0;
}

nav.submenu ul li.nav-item.nav-item-head {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color1);
}

nav.submenu ul li.nav-item {
  color: var(--colorbg);
}

nav.submenu ul li.nav-item a.active {
  font-weight: 700;
  border-bottom: 2px solid var(--colorbg);
}

.come_in {
  animation-name: come_in;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}


  @keyframes come_in {
    0% {
      opacity: 0;
      transform: translateY(-35px);
    }

    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
  }
}





nav.subsubmenu {
  top: calc(var(--mainsize) + 101px);
}

nav.subsubmenu ul li {
  list-style: none;
  text-transform: uppercase;
}

nav.subsubmenu ul li:not(:last-child) {
  padding-bottom: var(--mainsize);
  margin-bottom: var(--mainsize);
  border-bottom: 2px dotted var(--colorfont25);
}

nav.subsubmenu ul li.parent a, nav.subsubmenu ul li.parent_parent a {
  color: var(--colorfont);
}

nav.subsubmenu ul li a {
  color: var(--color1);
  font-weight: 700;
}

nav.subsubmenu ul li a.active {
  cursor:default;
  opacity: .444;
}

/* ####################################################### figure ####################################################### */


figure.image {
  position: relative;
  display: block;
  --w: 5;
  --h: 3;
  padding-bottom: calc(100% / var(--w) * var(--h));
  background-size: 125px auto!important;
  background-repeat: no-repeat!important;
  background-position: center!important;
  margin-bottom: 0;
  overflow: hidden;
  -webkit-box-shadow: 0px 15px 10px -10px rgba(0,0,0,.25);
  box-shadow: 0px 15px 10px -10px rgba(0,0,0,.25);
}

figure.image.page_image, figure.image.mini_image.page_image {
  box-shadow: none;
  --w: 1;
  --h: 1;
}

figure.image.mini_image {--w: 5;--h: 2;}



figure.image img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border: 0;
  opacity: 0;
  -webkit-transition: all 2.5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 2.5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

figure.image img.scale {
transform: scale(1.05);
}

figure.image[data-contain] img {
  object-fit:contain;
}

figure.image img.scale.img_load, figure.image img.img_load {
  opacity: 1!important;
  transform: scale(1);
}


figure.image.article_image {
  --w: 4;
  --h: 5;
}

figure.image.article_image img {
  transform: unset;
  -webkit-transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

figure.image.filiale_image {
  --w: 5;
  --h: 3;
}


figure.image.img11 {
  --w: 1;
  --h: 1;
  box-shadow: none;
  background-size: 50px auto!important;
}

figure.image.img11 img {
  transform: unset;
  -webkit-transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1);
  box-shadow: none;
}


/* ####################################################### page ####################################################### */

.brut ul {
  margin: 0;
  padding: 0;
  font-weight: 700;
  text-transform: uppercase;
  list-style: none;
}

.brut ul li {
  display: inline-block;
  font-size: var(--mainsize_xs);
}

.brut ul li i {
  font-size: var(--mainsize_sm);
}

.brut ul li:last-child i {
  display: none;
}

h1.page_title {
  color: var(--color1);
}

.text.intro {
  font-size: calc(var(--mainsize) * 1.25);
  font-weight: 700;
  color: var(--color1);
  text-transform: uppercase;
}

/* ####################################################### Homepage ####################################################### */
/* ################################## Slider ##################################  */

.cancel > p {
  display: inline-block!important;
}

.carousel-control-next, .carousel-control-prev {
-webkit-transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1);
transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.carousel-control-next-icon, .carousel-control-prev-icon {width: 66%;height: 66%;}

.carousel-control-prev-icon {
  background-image: url("../images/caret-left-fill.svg");
}

.carousel-control-next-icon {
  background-image: url("../images/caret-right-fill.svg");
}


.carousel-indicators [data-bs-target] {
width: 20px;
height: 20px;
margin-right: 4px;
margin-left: 4px;
background-color: var(--colorbg);
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-radius: 100%;
opacity: .5;
-webkit-transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1);
transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}


.carousel-indicators .active {
  opacity: 1!important;
}

.carousel-inner {
  border-bottom-left-radius: var(--br);
  border-bottom-right-radius: var(--br);
}

figure.image.slider_image {--w: 6;--h: 7;}

figure.image.slider_image img.slider_img_load {
animation-name: ComeInBaby;
animation-duration: 2.5s;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
animation-iteration-count: 1;
animation-fill-mode: forwards;
transform: unset;
filter: saturate(115%) contrast(125%);
-webkit-filter: saturate(115%) contrast(125%);
}


@keyframes ComeInBaby {
  0% {opacity: 0; transform: scale(1.2)}
  100% {opacity: 1; transform: scale(1)}
}


.slider .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg,var(--colorfont) 4%, var(--colorfont0) 66%), var(--colorfont50);
   background-clip: padding-box;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 70px;
  left: 15%;
  padding: var(--mainsize);
  color: var(--colorbg);
  text-align: center;


}

.fader {
  animation-name: FadeIn;
  animation-duration: 3s;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  position: relative;
}

@keyframes FadeIn {
  0% {opacity: 0; }
  100% {opacity: 1;}}


/* ################################## Hometext ##################################  */

    .blox.container-fluid {
      --bs-gutter-x: 8px;
    }

    .blox.container-fluid .row, .blox.container-fluid .row>* {
      --bs-gutter-x: 4px;
    }
    .blox.container-fluid .row>* {
      margin: 4px 0;
    }


    .homehero {
      position: relative;
      background: var(--color10);
      color: inherit;
      margin-top: 4px;
      padding: calc(var(--mainsize) * 4) 0;
    }


/* ################################## Home Blox row0 ##################################  */

.blox .inner.home {
color: var(--colorbg);
align-items: flex-end;
background:   linear-gradient(0deg,var(--colorfont) 5%, var(--colorfont0) 75%),
              linear-gradient(67deg,var(--colorfont) 0%, var(--colorfont0) 75%),
              linear-gradient(210deg,var(--colorfont) 0%, var(--colorfont0) 50%)
              ;
}

.blox .w_image {
  filter: saturate(105%) contrast(115%);
-webkit-filter: saturate(105%) contrast(115%);
}


/* ####################################################### Mainsites ####################################################### */


figure.image.mainsite_image {
  --w: 5;
  --h: 3;
}



/* ####################################################### Search ####################################################### */

.search_row .search_item:not(:last-of-type) {
  padding-bottom: var(--mainsize);
  margin-bottom: var(--mainsize);
  border-bottom: 2px dotted var(--color1);
}



/* ####################################################### Aktuelles ####################################################### */

body.articles .card figure {
  -webkit-box-shadow: none;
  box-shadow: none;
  }

body.articles .card figure, body.articles .card figure img.card-img-top {
  border-top-left-radius: var(--br);
  border-top-right-radius: var(--br);
}

body.articles .card.event {
  border: none;
  border-radius: unset;
  padding: 0;
  color: var(--colorfont);
  background: transparent;
}

body.articles .card.event .card-body {
  padding: 0;
  background: transparent;
}

body.articles .row.events .event:not(:last-of-type) {
  margin-bottom: var(--mainsize);
  padding-bottom: var(--mainsize);
  border-bottom: 2px dotted var(--colorfont50);
}

body.article .registrations {
  padding-top: calc(var(--mainsize) * .5);
  padding-bottom: calc(var(--mainsize) * .5);
  border-top: 1px dotted var(--color150);
  border-bottom: 1px dotted var(--color150);
  margin-top: calc(var(--mainsize) * .5);
  margin-bottom: calc(var(--mainsize) * 3);
}

body.article .registrations p {
  margin-bottom: 0;
}

body.article .registrations p.heading {
  font-weight: 700;
  text-transform: uppercase;
}

body.article .registrations .reg {
  display: inline-block;
}

body.article .registrations .reg p {
  display: inline-block;
  font-weight: 400;
  text-transform: none;
  color: var(--colorfont);
}

body.article .registrations .reg:not(:last-of-type)::after {
  content: ' | ';
  margin-left: 3px;
  margin-right: 5px;
  color: var(--color1);
}
/* ####################################################### Filialen ####################################################### */

body.filialen .row.filialen .filiale:not(:last-of-type) {
  padding-bottom: var(--mainsize);
}

figure.image.filiale_image, figure.image.filiale_image img {
  border-top-left-radius: var(--br);
  border-top-right-radius: var(--br);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.modal figure.image.filiale_image, .modal figure.image.filiale_image img {
  border-radius: var(--br);
  -webkit-box-shadow: none;
  box-shadow: none;
}

body.filialen .row.filialen .filiale .card-body {
  padding-bottom: var(--mainsize);
}

/* Karten mit stretched-link (Filialen, Engagement, Awards): der
   stretched-link deckt per Bootstrap-Default (z-index: 1) die gesamte
   Karte ab, nicht nur das Bild - der "Mehr"-Button liegt sonst
   darunter und ist nicht klickbar. Siehe Bootstrap-Doku zu
   .stretched-link fuer dieses Muster. */
.filiale .card-body .btn {
  position: relative;
  z-index: 2;
}

.modal-backdrop {
  background-color: var(--colorfont50);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.modal-backdrop.show {
opacity: 1;
}

.modal-content {
  border-radius: var(--br);
  border: none;
  background: transparent;
  -webkit-box-shadow: 0px 15px 10px -10px rgba(0,0,0,.5);
  box-shadow: 0px 15px 10px -10px rgba(0,0,0,.5);
}
.modal-header {
padding: var(--mainsize);
border-bottom: none;
border-top-left-radius: var(--br);
border-top-right-radius: var(--br);
border: none;
background: var(--colorbg);
}

.modal-body {
padding: var(--mainsize);
border: none;
background: var(--colorbg);
}

body.filialen .modal-body .text p:first-of-type {
  margin-bottom: 0;
}

.modal-footer {
padding: var(--mainsize);
background-color: var(--colorfont);
border-top: 2px solid var(--color1);
border-bottom-right-radius: var(--br);
border-bottom-left-radius: var(--br);

}

.modal-content .text {
  padding: var(--mainsize) 0;
}

.modal-content .text p:last-of-type {
  margin-bottom: 0;
}


/* ####################################################### Booking ####################################################### */

.row.booking .col:not(:last-of-type) {
  padding-bottom: calc(var(--mainsize) * 1.5);
  margin-bottom: calc(var(--mainsize) * 1.5);
  border-bottom: 2px dotted var(--colorfont25);
}

figure.image.booking_image,  figure.image.booking_image{
  border-radius: var(--br);
  box-shadow: none;
}

figure.image.booking_image {
  --w: 5;
  --h: 4;
}


/* ####################################################### reiceipe ####################################################### */

.custom-file-button input[type=file] {
  margin-left: -2px !important;
}
.custom-file-button input[type=file]::-webkit-file-upload-button {
  display: none;
}
.custom-file-button input[type=file]::file-selector-button {
  display: none;
}

.input-group-text {

}
.custom-file-button label {
  background: var(--color3);
  border: none!important;
  cursor: pointer;
  color: var(--colorbg);
}

/* ####################################################### Kontakt ####################################################### */


.contacts .item:first-child {
margin-top: calc(var(--mainsize) * 2.5);
padding-top: calc(var(--mainsize) * 2.5);
border-top: 2px dotted var(--color125);
}

.contacts .item:not(:last-of-type) {
margin-bottom: calc(var(--mainsize) * 2.5);
padding-bottom: calc(var(--mainsize) * 2.5);
border-bottom: 2px dotted var(--color125);
}

.contacts .item .text {
  margin-bottom: 0;
}



/* ####################################################### awards ####################################################### */


section.awards {
  margin-top: calc(var(--mainsize) * 2.5);
  padding-top: calc(var(--mainsize) * 2.5);
  border-top: 2px dotted var(--color150);
}

section.awards .award:not(:last-of-type) {
margin-bottom: calc(var(--mainsize) * 2.5);
padding-bottom: calc(var(--mainsize) * 2.5);
border-bottom: 1px dotted var(--color125);
}

section.awards .award .text p:last-of-type {
  margin-bottom: 0;
}


/* ####################################################### Z learning ####################################################### */


section.trainees {
  margin-top: calc(var(--mainsize) * 2.5);
  border-bottom: 2px dotted var(--color150);
  margin-bottom: calc(var(--mainsize) * 2.5);
  padding-bottom: calc(var(--mainsize) * 2.5);
}

section.trainees.past_trainees {
  margin-top: calc(var(--mainsize) * 2.5);
  padding-top: calc(var(--mainsize) * 2.5);
  border-top: 2px dotted var(--color150);
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;

}

section.trainees .card .number, .more_trainees .card .number {
  position: absolute;
  top: 0;
  right: 0;
  padding: calc(var(--mainsize) * .25) calc(var(--mainsize) * .35);
  background: var(--color1);
  border-top-right-radius: var(--br);
  border-bottom-left-radius: var(--br);
}

section.trainees .card .number p, .more_trainees .card .number p {
  color: var(--colorbg);

}

p.price::before, span.price::before {
  content: '€ ';
}

p.price::after, span.price::after {
  content: ',— p.P.';
}


.text.trainee_text p:nth-child(2) {
  display: inline;
}

.text.trainee_text p:nth-child(3), .text.trainee_text p:nth-child(2) + ul {
  margin-top: var(--mainsize);
}

.past_trainee h2, .past_trainee p {
  color: var(--colorfont50);
}

.past_trainee .card {
  border: 1px solid var(--colorfont25);
}

.past_trainee hr {
  border-top: 1px solid var(--colorfont50);
}

section.trainees .past_trainee .card .number {
  background: var(--colorfont25);
}


.past_trainee .btn-primary,
.past_trainee .btn-primary:link,
.past_trainee .btn-primary:hover,
.past_trainee .btn-primary:focus,
.past_trainee .btn-primary:active,
.past_trainee .btn-primary:active:focus,
.past_trainee .btn-primary:active:hover,
.past_trainee .btn-primary:visited  {
  color: var(--colorbg)!important;
  border: 2px solid var(--colorfont0)!important;
  background-color: var(--colorfont25)!important;
}

/* ####################################################### FAQs ####################################################### */

.accordion {
--bs-accordion-color: var(--colorfont);
--bs-accordion-bg: transparent;
--bs-accordion-border-color: var(--color150);
--bs-accordion-border-width: var(--bs-border-width);
--bs-accordion-border-radius: var(--br);
--bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
--bs-accordion-btn-padding-x: 1.25rem;
--bs-accordion-btn-padding-y: 1rem;
--bs-accordion-btn-color: var(--bs-body-color);
--bs-accordion-btn-bg: var(--bs-accordion-bg);
--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1…p='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
--bs-accordion-btn-icon-width: 1.25rem;
--bs-accordion-btn-icon-transform: rotate(-180deg);
--bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1…p='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
--bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
--bs-accordion-body-padding-x: 1.25rem;
--bs-accordion-body-padding-y: 1rem;
--bs-accordion-active-color: var(--bs-primary-text-emphasis);
--bs-accordion-active-bg: var(--bs-primary-bg-subtle);
}

.accordion-flush,.accordion-item,.accordion-collapse,.accordion-flush>.accordion-item>.accordion-collapse, .accordion-flush>.accordion-item>.accordion-header .accordion-button, .accordion-flush>.accordion-item>.accordion-header .accordion-button.collapsed {
border-radius: var(--br);
}

.accordion-button, .accordion-header {
  border-radius: var(--br);
}

.accordion-button.collapsed {
  background: transparent;
  border-radius: var(--br);
  color: var(--colorfont);
}

.accordion-button:not(.collapsed) {
color: var(--colorbg);
background-color: var(--color1);
box-shadow: none;
border-radius: var(--br);
}

.accordion-button::after {
background-image:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23009fe3'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed)::after {
background-image:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}


/* ####################################################### Downloads ####################################################### */


section.downloads {

}

section.downloads .row_downloads:not(:last-of-type) {
  margin-bottom: calc(var(--mainsize) * 3);
}

section.downloads h2 {
  margin-bottom: calc(var(--mainsize) * 1.5);
}

section.downloads .row_downloads .download:not(:last-of-type) {
  margin-bottom: calc(var(--mainsize) * .75);
}

section.downloads .card, section.downloads .card-body {
  background: var(--color1);
  color: var(--colorbg);
  border: 1px solid var(--color1);
  border-radius: var(--br);
}

section.downloads .card {
-webkit-box-shadow: 0px 15px 10px -10px rgba(0,0,0,.5);
box-shadow: 0px 15px 10px -10px rgba(0,0,0,.5);
}

/* ####################################################### cover ####################################################### */

.cover_container {
  position: relative;
}

.cover_container .overlay .inner {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.cover_container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg,var(--colorbg) 5%, var(--colorbg0) 66%), linear-gradient(67deg,var(--colorbg) 0%, var(--colorbg0) 50%);
}

/* ############################## article cover ##############################  */

.article_image_row {
  -webkit-box-shadow: 0px 15px 10px -10px rgba(0,0,0,.25);
  box-shadow: 0px 15px 10px -10px rgba(0,0,0,.25);
}

.article_image_row figure.image.article_image {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.cover_container .item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom:0;
  width: 100%;
  height: 100%;
}

.cover_container .item1 .overlay {
  background: var(--color175);
}

.cover_container .item2 .overlay {
  background: var(--color150);
}

.cover_container .item3 .overlay {
  background: var(--color125);
}

figure.image.article_image img.img_load {
  opacity: 1!important;
}


.cover_container .item figure.image.article_image img {
  -webkit-transition: opacity 4s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: opacity 4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.cover_container .item.item1 figure.image.article_image img {
  -webkit-transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.cover_container .item.item2 figure.image.article_image img {
  -webkit-transition: opacity 2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: opacity 2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.cover_container .item.item3 figure.image.article_image img {
  -webkit-transition: opacity 3s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: opacity 3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ####################################################### blox ####################################################### */


.blox.container-fluid {
  --bs-gutter-x: 8px;
}

.blox.container-fluid .row, .blox.container-fluid .row>* {
  --bs-gutter-x: 4px;
}
.blox.container-fluid .row>* {
  margin: 4px 0;
}

.blox.container-fluid .row .item:first-of-type {
  margin-bottom: 0;
}
.blox.container-fluid .row .item:nth-child(2) {
  margin-bottom: 0;
}
.blox.container-fluid .row .item:nth-child(3) {
  margin-bottom: 0;
}
.blox.container-fluid .row .item:nth-child(4) {
  margin-bottom: 0;
}

.blox.container-fluid {
  max-width: 100%;
  background: var(--colorbg);

}

.blox .inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blox .newsletter {
  background: var(--color1);
  color: var(--colorbg);
}

.blox .article {
  color: var(--colorbg);
  align-items: flex-end;
  background:   linear-gradient(0deg,var(--colorfont) 0%, var(--colorfont0) 75%),
                linear-gradient(67deg,var(--colorfont) 0%, var(--colorfont0) 75%),
                linear-gradient(-67deg,var(--colorfont25) 0%, var(--colorfont0) 75%)
                ;
}

.blox .article.articleblue {
  color: var(--colorbg);
  align-items: flex-end;
  background:   linear-gradient(0deg,var(--color3) 0%, var(--color30) 75%),
                linear-gradient(67deg,var(--color3) 0%, var(--color30) 75%),
                linear-gradient(-67deg,var(--colorfont) 0%, var(--colorfont0) 75%)
                ;
}

.blox .homepage {
  color: var(--colorbg);
  align-items: flex-end;
  background: linear-gradient(0deg,var(--colorfont) 0%, var(--colorfont0) 75%), linear-gradient(67deg,var(--colorfont) 0%, var(--colorfont0) 75%);
}

.blox .training {
  color: var(--colorfont);
  background: var(--color2);
}

.blox .training img {
  width: auto;
  height: 50px;
  margin-bottom: var(--mainsize);
}

.blox .whatsapp, .blox .filialen {
  background: var(--color1);
  color: var(--colorbg);
}

.blox .booking, .blox .filialen2 {
  background: var(--color3);
  color: var(--colorbg);
}

.blox .receipe, .blox .filialen3 {
  background: var(--colorfont);
  color: var(--colorbg);
}

.blox .filialen4 {
  background: var(--color1);
  color: var(--colorbg);
}

.blox i {
  font-size: calc(var(--mainsize) * 2.5);
}


.blox .item .inner {
  padding: calc(var(--mainsize) * 5) 0;
}



/* ####################################################### footer ####################################################### */




footer {
  background: var(--colorbg);
  color: var(--colorfont);
}

footer .footer_topbar ul {
  list-style: none;
}


footer .footer_bottombar {
  background: var(--colorfont);
  color: var(--colorbg);
}

footer .footer_bottombar ul {
  list-style: none;
}

footer .footer_bottombar ul li {
  display: inline-block;
}

footer .footer_bottombar ul li a, footer .footer_bottombar ul li button.no_btn {
  font-weight: 400;
  text-decoration: underline;
}

footer .footer_bottombar ul li:not(:last-child)::after {
  content: ' • ';
}






/* ####################################################### color themes ####################################################### */
/* ############################## darkblue ##############################  */

body.darkblue  {
  color: var(--colorbg);
  background: var(--colorfont);
}

body.darkblue .holder  {
  color: var(--colorbg);
  background: var(--colorfont);
}

body.darkblue .cover_container .overlay {
  background: linear-gradient(0deg,var(--colorfont) 5%, var(--colorfont0) 66%), linear-gradient(67deg,var(--colorfont) 0%, var(--colorfont0) 50%);
}

body.darkblue .cover_container .overlay .page_header h1,
body.darkblue .cover_container .overlay .page_header .text.intro,
body.darkblue .cover_container .overlay .brut,
body.darkblue .page_header h1,
body.darkblue .page_header .text.intro,
body.darkblue .brut  {
  color: var(--colorbg);
}

body.darkblue nav.subsubmenu ul li:not(:last-child) {
  border-bottom: 2px dotted var(--colorbg25);
}

body.darkblue nav.subsubmenu ul li.parent a, body.darkblue nav.subsubmenu ul li.parent_parent a {
  color: var(--color1);
}

body.articles.darkblue .row.events .event:not(:last-of-type) {
  border-bottom: 2px dotted var(--colorbg25);
}


body.darkblue .row.booking .col:not(:last-of-type) {
  border-bottom: 2px dotted var(--colorbg25);
}


body.darkblue .accordion-button.collapsed {
  background: transparent;
  color: var(--color1);
}

body.darkblue .accordion-button:not(.collapsed) {
color: var(--colorfont);
background-color: var(--color1);
}

body.darkblue .accordion-body .text p {
  color: var(--colorbg);
}

body.darkblue .accordion {
--bs-accordion-color: var(--colorbg);
--bs-accordion-border-color: var(--colorbg25);
}


/* ############################## brown ##############################  */

body.brown  {
  color: var(--colorbg);
  background: var(--colorfont);
}

body.brown .holder  {
  color: var(--colorbg);
  background: var(--color2);
}

body.brown .cover_container .overlay {
  background: linear-gradient(0deg,var(--color2) 5%, var(--color20) 66%), linear-gradient(67deg,var(--color2) 0%, var(--color20) 50%);
}

body.brown .cover_container .overlay .page_header h1,
body.brown .cover_container .overlay .page_header .text.intro,
body.brown .cover_container .overlay .brut,
body.brown .page_header h1,
body.brown .page_header .text.intro,
body.brown .brut {
  color: var(--colorbg);
}

body.brown nav.subsubmenu ul li:not(:last-child) {
  border-bottom: 2px dotted var(--colorbg25);
}

body.brown nav.subsubmenu ul li a {
  color: var(--colorbg);
}


/* ############################## blue ##############################  */

body.blue  {
  color: var(--colorbg);
  background: var(--colorfont);
}

body.blue .holder  {
  color: var(--colorbg);
  background: var(--color1);
}

body.blue .cover_container .overlay {
  background: linear-gradient(0deg,var(--color1) 5%, var(--color10) 66%), linear-gradient(67deg,var(--color1) 0%, var(--color10) 50%);
}

body.blue .cover_container .overlay .page_header h1,
body.blue .cover_container .overlay .page_header .text.intro,
body.blue .cover_container .overlay .brut,
body.blue .page_header h1,
body.blue .page_header .text.intro,
body.blue .brut {
  color: var(--colorbg);
}


body.blue nav.subsubmenu ul li:not(:last-child) {
  border-bottom: 2px dotted var(--colorbg25);
}


body.blue nav.subsubmenu ul li a {
  color: var(--colorbg);
}

body.articles.blue .card.event .color1 {
  color: var(--colorbg);
}


body.articles.blue .card.event .btn-light,
body.articles.blue .card.event .btn-light:link,
body.articles.blue .card.event .btn-light:hover,
body.articles.blue .card.event .btn-light:focus,
body.articles.blue .card.event .btn-light:active,
body.articles.blue .card.event .btn-light:active:focus,
body.articles.blue .card.event .btn-light:active:hover,
body.articles.blue .card.event .btn-light:visited  {
  color: var(--colorbg)!important;
  border: 2px solid var(--colorbg)!important;
}

/* ############################## white ##############################  */

body.white  {
  color: var(--colorbg);
  background: var(--colorfont);
}

body.white .holder  {
  color: var(--colorfont);
  background: var(--colorbg);
}

body.white .brut {
  color: var(--colorfont);
}

body.white nav.subsubmenu ul li:first-child a {
  color: var(--colorfont);
}



/* ####################################################### hover ####################################################### */

@media (hover: hover) {

  .btn,
  .card
  {-webkit-transition: all 0.666s cubic-bezier(0.25, 0.1, 0.25, 1);transition: all 0.666s cubic-bezier(0.25, 0.1, 0.25, 1);}

  .mainnav .navbar a.nav-link:hover,
  .mainnav .navbar a.nav-link:focus,
  .mainnav .navbar a.nav-link:active:hover,
  .mainnav .navbar a.nav-link:active:focus {
    color: var(--colorfont);
  }

  nav.topbar a.nav-link:hover,
  nav.topbar a.nav-link:focus,
  nav.topbar a.nav-link:active:hover,
  nav.topbar a.nav-link:active:focus {
    color: var(--colorbg);
  }

  .btn-primary,
  .btn-primary:link,
  .btn-primary:active,
  .btn-primary:visited  {
    color: var(--colorbg)!important;
    border: 2px solid var(--color10)!important;
    background-color: var(--color175)!important;
  }

  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active:focus,
  .btn-primary:active:hover {
    color: var(--colorbg)!important;
    border: 2px solid var(--color1)!important;
    background-color: var(--color1)!important;
  }



  .past_trainee .btn-primary,
  .past_trainee .btn-primary:link,
  .past_trainee .btn-primary:active,
  .past_trainee .btn-primary:visited {
    color: var(--colorbg)!important;
    border: 2px solid var(--colorfont0)!important;
    background-color: var(--colorfont25)!important;
  }

  .past_trainee .btn-primary:hover,
  .past_trainee .btn-primary:focus,
  .past_trainee .btn-primary:active:focus,
  .past_trainee .btn-primary:active:hover
   {
    color: var(--colorbg)!important;
    border: 2px solid var(--colorfont0)!important;
    background-color: var(--colorfont50)!important;
  }


  .btn-secondary,
  .btn-secondary:link,
  .btn-secondary:visited,
  .btn-secondary:active {
    color: var(--colorbg)!important;
    border: 2px solid var(--colorbg)!important;
    background-color: transparent!important;
  }

  .btn-secondary:hover,
  .btn-secondary:focus,
  .btn-secondary:active:focus,
  .btn-secondary:active:hover {
    color: var(--colorbg)!important;
    border: 2px solid var(--color1)!important;
    background-color: var(--color1)!important;
  }


  .btn-tertiary,
  .btn-tertiary:link,
  .btn-tertiary:active,
  .btn-tertiary:visited  {
    color: var(--colorbg)!important;
    border: 2px solid var(--colorbg)!important;
    background-color: transparent!important;
  }

  .btn-tertiary:hover,
  .btn-tertiary:focus,
  .btn-tertiary:active:focus,
  .btn-tertiary:active:hover {
    color: var(--color1)!important;
    border: 2px solid var(--color1)!important;
    background-color: var(--colorbg)!important;
  }

  .btn-light,
  .btn-light:link,
  .btn-light:visited,
  .btn-light:active {
    color: var(--color1)!important;
    border: 2px solid var(--color1)!important;
    background-color: transparent!important;
  }

  .btn-light:hover,
  .btn-light:focus,
  .btn-light:active:focus,
  .btn-light:active:hover {
    color: var(--colorbg)!important;
    border: 2px solid var(--color1)!important;
    background-color: var(--color1)!important;
  }


  .btn-dark,
  .btn-dark:link,
  .btn-dark:visited,
  .btn-dark:active {
    color: var(--colorfont)!important;
    border: 2px solid var(--colorfont)!important;
    background-color: var(--colorfont0)!important;
  }

  .btn-dark:hover,
  .btn-dark:focus,
  .btn-dark:active:focus,
  .btn-dark:active:hover {
    color: var(--colorbg)!important;
    border: 2px solid var(--colorfont)!important;
    background-color: var(--colorfont)!important;
  }


  body.articles.blue .card.event .btn-light,
  body.articles.blue .card.event .btn-light:link,
  body.articles.blue .card.event .btn-light:visited,
  body.articles.blue .card.event .btn-light:active {
    color: var(--colorbg)!important;
    border: 2px solid var(--colorbg)!important;
    background-color: transparent!important;
  }

  body.articles.blue .card.event .btn-light:hover,
  body.articles.blue .card.event .btn-light:focus,
  body.articles.blue .card.event .btn-light:active:focus,
  body.articles.blue .card.event .btn-light:active:hover {
    color: var(--color1)!important;
    border: 2px solid var(--colorbg)!important;
    background-color: var(--colorbg)!important;
  }



  .card:hover,
  .card:focus {
    border: 1px solid var(--color1);
    box-shadow: 0 0 0 calc(var(--mainsize) / 6) var(--color125);
  }

body.articles .card.event:hover,
body.articles .card.event:focus {
  border: none;
  box-shadow: none;
}
}



/* ####################################################### responsive ####################################################### */

@media (min-width: 576px) {
  :root {--mainsize: .9rem;}
  figure.image.page_image, figure.image.mini_image.page_image {--w: 6;--h: 5;}
  .navbar-brand img {height: 25px;}
  main.main {padding-top: 126px;}
  .submenu_holder.down {top: 74px;}
  .blox .inner {min-height: 400px;}
  .blox .inner.article {min-height: 450px;}
  .blox .training img {height: 55px;}
  figure.image.slider_image {--w: 1;--h: 1;}
  .carousel-control-next-icon, .carousel-control-prev-icon {width: 55%;height: 55%;}
}


@media (min-width: 768px) {
  :root {--mainsize: .95rem;}
  figure.image.mainsite_image {--w: 5;--h: 2;}
  figure.image.page_image, figure.image.mini_image.page_image {--w: 5;--h: 4;}
  .navbar-brand img {height: 30px;}
  main.main {padding-top: 138px;}
  .submenu_holder.down {top: 83px;}
  .blox .inner {min-height: 390px;}
  .blox .inner.article {min-height: 475px;}
  .blox .training img {height: 60px;}
  figure.image.slider_image {--w: 5;--h: 4;}
  .carousel-control-next-icon, .carousel-control-prev-icon {width: 44%;height: 44%;}
}


@media (min-width: 992px) {
  :root {--mainsize: 1rem;}
  figure.image.page_image, figure.image.mini_image.page_image {--w: 5;--h: 3;}
  .mainnav .navbar a.nav-link.active, .mainnav .navbar a.nav-link.show {border-bottom: 3px solid var(--colorfont);}
  .navbar-brand img {height: 35px;}
  main.main {padding-top: 150px;}
  .submenu_holder.down {top: 92px;}
  .blox .inner {min-height: 425px;}
  .blox .inner.article {min-height: 500px;}
  figure.image.mini_image {--w: 4;--h: 1;}
  figure.image.filiale_image {--w: 5;--h: 2;}
  .blox .training img {height: 65px;}
  figure.image.slider_image {--w: 5;--h: 3;}
  .carousel-indicators [data-bs-target] {
  margin-right: 5px;
  margin-left: 5px;
  }
}


@media (min-width: 1200px) {
  :root {--mainsize: 1.05rem;}
  figure.image.mainsite_image {--w: 3;--h: 1;}
  figure.image.page_image,figure.image.mini_image.page_image {--w: 5;--h: 2;}
  figure.image.filiale_image {--w: 3;--h: 1;}
  .navbar-brand img {height: 40px;}
  main.main {padding-top: 161px;}
  .submenu_holder.down {top: 100px;}
  .blox .inner {min-height: 465px;}
  .blox .inner.article {min-height: 550px;}
  .blox .training img {height: 80px;}
  figure.image.slider_image {--w: 5;--h: 3;}
  .carousel-control-next-icon, .carousel-control-prev-icon {width: 33%;height: 33%;}
}


@media (min-width: 1400px) {
  :root {--mainsize: 1.1rem;}
  .submenu_holder.down {top: 104px;}
  .blox .inner {min-height: 470px;}
  .blox .inner.article {min-height: 575px;}
  main.main {padding-top: 167px;}
  .blox .training img {height: 90px;}
  figure.image.slider_image {--w: 7;--h: 3;}
  .carousel-indicators [data-bs-target] {
  margin-right: 7px;
  margin-left: 7px;
  }
}