@charset "UTF-8";
/** 
 *  style definition for website
 * 
 *  based on default scss version 17.03 
 *
 *  supports this sizes: 
 *      XS  = Smartphone        (devices-width <740px, design width: 320px)  
 *       S  = Tablet portrait   (devices-width  740px, design width: 720px)  
 *       M  = Tablet landscape  (devices-width  980px, design width: 960px)  
 *       L  = Desktop           (devices-width 1220px, design width: 1200px)    
 *      XL  = XL-Desktop        (devices-width 1580px, design width: 1560px)
 *  
 *  all font-sizes in rem 
 */
/* ================ VARIABLES ===================== */
/* ================ Definitions for MEDIA-QUERIES ========================== */
/* ========= SPECIAL COLOR DEFINITIONS ============== */
/* color palette */
/* colors for boxes and more */
/* default definitions */
/* base for 1 rem */
/* cookie info */
/* left, right */
/* borders */
/* Website-definitions */
/* Carousel */
/* ================ FONTS ===================== */
/** define all used fonts **/
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("/media/fonts/roboto-v30-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: local(""), url("/media/fonts/roboto-v30-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  src: local(""), url("/media/fonts/roboto-v32-latin-300.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 700;
  src: local(""), url("/media/fonts/roboto-condensed-v27-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 700;
  src: local(""), url("/media/fonts/roboto-condensed-v27-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 300;
  src: local(""), url("/media/fonts/Assistant-300.woff2") format("woff2");
}
@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("/media/fonts/Assistant-400.woff2") format("woff2");
}
@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 700;
  src: local(""), url("/media/fonts/Assistant-700.woff2") format("woff2");
}
/* ================ MIXIN-FUNCTIONS ===================== */
/**
  *  base functions for P.I.C.S. Websites
  *    P.I.C.S. Version 17.03
  */
/* Gradient:  
    linear gradient from/to
    @include gradient($color1, $color2); 
*/
/* Gradient4:  
    linear gradient from/to with center step
    @include gradient4($color1, $color2, $color3, $color4); 
*/
/* ================ CSS RESET ===================== */
/**
  *  CSS-Reset from Eric Meyer
  *    P.I.C.S. Version 17.03
  *    
  *    Eric Meyer's Reset CSS v2.0 - http://cssreset.com
  */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del,
dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
  display: block;
}

body {
  line-height: 1;
}

nav ul {
  list-style: none;
  border: 0;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

strong, b {
  font-weight: bold;
}

* {
  box-sizing: border-box;
}

/* ================ BASE STYLES by P.I.C.S. ===================== */
/**
  *  base styles for P.I.C.S. Websites
  *    P.I.C.S. Version 24.03
  */
body {
  font-family: Roboto, Arial, sans-serif;
  color: var(--colorTextDefault);
  font-size: 16px;
  background-color: var(--colorBackBody);
}

/* ============================ predefine CSS-Vars ================================== */
:root {
  --colorDefault: #FFCC00;
  --colorBackBody: #ffffff;
  --colorBackFooter: #333333;
  --colorTextDefault: #333333;
  --colorLogo: #FFCC00;
  /* variables for klaro */
  --green1: #6CB71E;
}

.contrast {
  --colorDefault: #000000;
  --colorBackBody: #ffff00;
  --colorBackFooter: #ffff00;
  --colorTextDefault: #000000;
}

/* ============================ headlines ================================== */
h1, h2, h3, h4, h5, h6 {
  color: inherit;
  font-weight: normal;
  margin-bottom: 0.75rem;
}

h1 {
  font-size: 1.25rem;
}

h2 {
  font-size: 1.125rem;
}

h3 {
  font-size: 1rem;
}

h4 {
  font-size: 1rem;
}

h5 {
  font-size: 1rem;
}

/* ============================ links ================================== */
a {
  text-decoration: none;
  color: #05869A;
  cursor: pointer;
}

a:hover {
  text-decoration: underline;
}

*[data-link] {
  cursor: pointer;
}

*[data-link] {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
}

/* ============================ images ================================== */
div > img {
  max-width: 100%;
  height: auto;
}

img {
  max-width: 100%;
  height: auto;
  line-height: 0;
  display: block;
}

/* ============================ floating ================================== */
.clear {
  clear: both;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

@media screen and (min-width: 740px) {
  .right {
    float: right !important;
  }

  .left {
    float: left !important;
  }
}
/* ============================ text-formating ================================== */
.text-right {
  text-align: right;
}

/* ============================ navigation ================================== */
nav a:hover {
  text-decoration: none;
  color: #333333;
}
nav li > a {
  color: inherit;
  display: inline-block;
}
nav ul {
  border: 0 none;
  list-style: outside none none;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

/* ============================ forms / form elements ================================== */
input, select, textarea {
  border: 1px solid #666666;
}

input, select, textarea, button {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  padding: 5px;
  margin: 5px 0;
  border-radius: 3px;
}

input.error, select.error, textarea.error {
  color: #CC0000 !important;
  border-color: #CC0000 !important;
  background-color: #ffe6e6 !important;
}

.form .row > label, .form .row > div > input, .form .row > div > textarea {
  width: 100%;
}
.form .row > div > input.captcha {
  width: 100px;
}
.form .row {
  margin-top: 10px;
}

button {
  background: #FEFEFE;
  /* Old browsers */
  background: -webkit-linear-gradient(top, #FEFEFE 0%, #EEEEEE 100%);
  /* Chrome10+,Safari5.1+ */
  background: linear-gradient(to bottom, #FEFEFE 0%, #EEEEEE 100%);
  /* W3C */
  border: none;
  font-size: 1rem;
  color: #333333;
}
button :hover {
  filter: saturate(20%);
}

/* form label.error { color: $colorRed !important; } */
section.closed > div {
  display: none;
}

/* ============================ infobox / message boxes ================================== */
.infobox {
  width: 90%;
  margin: 10px 5%;
  padding: 20px;
  text-align: center;
  border: 1px solid #AAAAAA;
}

.infobox.error {
  border: 1px solid #CC0000;
  color: #CC0000;
}

.infobox.success {
  border: 1px solid #6CB71E;
  color: #6CB71E;
}

.infobox ul {
  display: inline-block;
  list-style-position: inside;
  margin: auto;
  text-align: left;
}

/* ============================ Cookie-Info ================================== */
div.cookie {
  background-color: #E2E2E2;
  color: #333333;
  display: none;
  padding: 10px;
  position: fixed;
  bottom: 10px;
  width: 90%;
  left: 5%;
  font-family: Tahoma, Arial, Helvetica;
  font-size: 1rem;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  border: 3px solid #333333;
  border-radius: 6px;
}
div.cookie button {
  font-size: 1rem;
  padding: 4px 10px;
  background: #333333;
  color: #E2E2E2;
  margin-left: 10px;
  min-width: auto;
}
div.cookie a {
  color: #333333;
  text-decoration: underline;
}

body.showcookie div.cookie {
  display: flex;
}

/* ============================ modal overlay windows ================================== */
.modal_back {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  text-align: center;
}

.modal_window {
  position: fixed;
  width: 96%;
  height: 95%;
  left: 2%;
  top: 2%;
  text-align: center;
}

.modal_title {
  width: 100%;
  height: 24px;
  position: relative;
  text-align: center;
  font-weight: bold;
  color: #FFFFFF;
  font-size: 1rem;
}
.modal_title > span {
  width: 16px;
  height: 16px;
  position: absolute;
  right: 4px;
  top: 4px;
  cursor: pointer;
  display: inline-block;
  font-family: Tahoma, Arial, Helvetica;
  background-image: url("/media/s/std/img/icons.png");
  background-position: 0px 0px;
  background-repeat: no-repeat;
}
.modal_title > iframe {
  width: 100%;
  height: 100%;
}

/* ============================ BUBBLES ================================== */
#bubble_container {
  position: fixed;
  right: 0;
  bottom: 0;
  display: none;
}
#bubble_container > div {
  background: #ffffff;
  /* Old browsers */
  background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
  /* Chrome10+,Safari5.1+ */
  background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
  /* W3C */
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  font-size: 1rem;
  line-height: 150%;
  color: #333333;
  width: 300px;
  min-height: 60px;
}
#bubble_container > div.p-bubble-info {
  background: #cdeb8e;
  /* Old browsers */
  background: -webkit-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
  /* Chrome10+,Safari5.1+ */
  background: linear-gradient(to bottom, #cdeb8e 0%, #a5c956 100%);
  /* W3C */
  color: #000000;
}
#bubble_container > div.p-bubble-warning {
  background: #ffc578;
  /* Old browsers */
  background: -webkit-linear-gradient(top, #ffc578 0%, #fb9d23 100%);
  /* Chrome10+,Safari5.1+ */
  background: linear-gradient(to bottom, #ffc578 0%, #fb9d23 100%);
  /* W3C */
  color: #FFFFFF;
}
#bubble_container > div.p-bubble-error {
  background: #ff3019;
  /* Old browsers */
  background: -webkit-linear-gradient(top, #ff3019 0%, #cf0404 100%);
  /* Chrome10+,Safari5.1+ */
  background: linear-gradient(to bottom, #ff3019 0%, #cf0404 100%);
  /* W3C */
  color: #FFFFFF;
}

#responsive-debug {
  z-index: 9999;
}

/* ============================ WACG - hide text for screen-reader ================================== */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* ================ RESPONSIVE STYLES by P.I.C.S. ===================== */
/**
  *  basic responsive styles 
  *    P.I.C.S. Version 17.03
  *    supports XS, S, M, L, XL
  */
/* ========= toggle-button for smartphone ========= */
button.navtoggle {
  position: absolute;
  top: 0;
  margin: 15px;
  padding: 5px;
  background-color: transparent;
  height: 38px;
  border: 1px solid #666666;
  border-radius: 4px;
  cursor: pointer;
}
button.navtoggle > i {
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px 0;
  max-width: 100%;
}

@media screen and (min-width: 740px) {
  button.navtoggle {
    display: none;
  }
}
@media screen and (max-width: 740px) {
  .hide-XS, .show-S, .show-M, .show-L, .show-XL {
    display: none !important;
  }
}
@media screen and (min-width: 740px) and (max-width: 980px) {
  .show-XS, .hide-S, .show-M, .show-L, .show-XL {
    display: none !important;
  }
}
@media screen and (min-width: 980px) and (max-width: 1200px) {
  .show-XS, .show-S, .hide-M, .show-L, .show-XL {
    display: none !important;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1580px) {
  .show-XS, .show-S, .show-M, .hide-L, .show-XL {
    display: none !important;
  }
}
@media screen and (min-width: 1580px) {
  .show-XS, .show-S, .show-M, .show-L, .hide-XL {
    display: none !important;
  }
}
#responsive-debug {
  position: fixed;
  left: 0;
  top: 0;
  padding: 3px;
  background-color: rgba(255, 255, 0, 0.5);
}

/* ================ GRID ===================== */
/* ======= GRID ============================================================================================ */
.c12, .c25, .c50, .c75, .c100,
.c33, .c66, .c20 {
  width: 100%;
  padding: 0 10px;
  flex: 0 0 auto;
}

.o12, .o25, .o50, .o75,
.o33, .o66, .o20 {
  margin-left: inherit;
}

@media screen and (min-width: 740px) {
  .c100 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .c75 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .c66 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .c50 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .c33 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .c25 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .c12 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .o75 {
    margin-left: 50%;
  }

  .o66 {
    margin-left: 50%;
  }

  .o50 {
    margin-left: 50%;
  }

  .o33 {
    margin-left: 25%;
  }

  .o25 {
    margin-left: 25%;
  }
}
@media screen and (min-width: 980px) {
  .c100 {
    flex: 100%;
  }

  .c75 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .c66 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .c50 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .c33 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .c25 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .c20 {
    flex-basis: 20%;
    max-width: 20%;
  }

  .c12 {
    flex-basis: 12.5%;
    max-width: 12.5%;
  }

  .o75 {
    margin-left: 75%;
  }

  .o66 {
    margin-left: 66.6666666667%;
  }

  .o50 {
    margin-left: 50%;
  }

  .o33 {
    margin-left: 33.3333333333%;
  }

  .o25 {
    margin-left: 25%;
  }

  .o12 {
    margin-left: 12.5%;
  }
}
@media screen and (min-width: 1580px) {
  .c12, .c25, .c50, .c75, .c100,
.c33, .c66, .c20 {
    padding: 0 20px;
  }
}
/* ================ individual styles for current web project ===================== */
/** 
 *  style definition for P.I.C.S. Homepage 2024
 *
 *  NOTE: // are silent commands in SCSS we use them just for the block endings
 */
/* ======= GLOBAL ELEMENTS ================================================================================== */
html {
  overflow-x: hidden;
  overflow-y: scroll;
}

body {
  margin: 0;
  font-family: Assistant, Calibri, Arial, Helvetica;
}

a {
  text-decoration: none;
  color: #CC0000;
}

a:hover {
  text-decoration: underline;
  color: #FF9933;
}

h1 {
  font-size: 1.875rem;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.375rem;
}

h6 {
  font-size: 1.25rem;
}

main {
  font-size: 1.25rem;
}

hgroup {
  margin: 30px 0;
}
hgroup h1 {
  line-height: 100%;
  margin: 0;
  padding: 0;
}
hgroup h2 {
  font-size: 1.75rem;
}
hgroup p {
  font-size: 1.25rem;
}
hgroup small {
  font-size: 75%;
}

/* ======= ICONS ================================================================================== */
.icon {
  width: 48px;
  height: 48px;
  margin: auto;
  vertical-align: middle;
  background: url("/media/s/std/img/icons.png");
  background-size: 240px;
  background-color: rgba(0, 0, 0, 0);
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat: no-repeat;
}
.icon.i16 {
  background-size: 80px;
  height: 16px;
  width: 16px;
}
.icon.i16.contrast {
  background-position: 0 0 !important;
}
.icon.i16.fontsize {
  background-position: -16px 0 !important;
}
.icon.i16.search {
  background-position: -32px 0 !important;
}

span.icon {
  display: inline-block;
}

/* ================================ Style dependend colors ================================ */
.backgreen {
  background-color: #6CB71E;
  color: #FFFFFF;
}

.backgrey {
  background-color: #E2E2E2;
  color: #333333;
}

.backyellow {
  background-color: #FFCC00;
  color: #333333;
}

.backturquois {
  background-color: #05869A;
  color: #FFFFFF;
}

.backorange {
  background-color: #FF9933;
  color: #FFFFFF;
}

.backred {
  background-color: #CC0000;
  color: #FFFFFF;
}

/* ================================ HEADER ================================ */
header {
  width: 100%;
  background: var(--colorLogo);
}
header .logo {
  line-height: 0px;
  padding: 10px;
  width: 300px;
  max-width: 75%;
}
header .logo img {
  height: auto;
}
header a {
  color: inherit;
}

header nav {
  display: none;
  height: 0;
}
header nav.show {
  display: block;
  height: auto;
  transition: all 0.5s;
  margin: 10px -10px;
}

/* in small resolutions we show typical buttons like on mobile, starting form L we show a full-screen overlay */
nav.main a {
  padding: 10px;
  color: #FFFFFF;
  font-size: 1.5rem;
}
nav.main a:hover {
  color: #FFCC00;
  text-decoration: none;
}
nav.main > ul {
  border-bottom: 1px solid #FFFFFF;
  background-color: #FFCC00;
  position: relative;
}
nav.main > ul li {
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 0;
  border-top: 1px solid #FFFFFF;
}
nav.main > ul li:last-child {
  border-bottom: none;
}
nav.main li > a {
  display: inline-block;
  color: #FFFFFF;
  font-size: 1.5rem;
  padding: 20px 40px;
  width: 100%;
  border-top: 1px solid #EAEAEA;
  transition: all 0.5s ease-in-out;
  text-align: left;
}
nav.main li.active > a {
  background-color: var(--colorDefault);
  color: #FFFFFF;
}
nav.main li:hover > a {
  background-color: var(--colorDefault);
  color: #FFFFFF;
  text-decoration: none;
}
nav.main li button {
  border: none;
  background: transparent;
  padding: 18px 22px;
  position: absolute;
  right: 20px;
  top: 0;
  cursor: pointer;
}
nav.main li button > i {
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 6px;
  transform: rotate(45deg);
  transition: all 0.5s ease-in-out;
}
nav.main li:hover button > i {
  border: solid #FFCC00;
  border-width: 0 2px 2px 0;
}
nav.main li.open button > i {
  transform: translate(0, 5px) rotate(-135deg);
}
nav.main ul.sub {
  transition: all 1s ease-in-out;
  background-color: #FFFFFF;
  width: 100%;
  height: 0;
  display: none;
  /*                li          { border-bottom: 1px solid $colorLighterGrey; font-weight: normal; width: 100%; } */
}
nav.main ul.sub li > a {
  font-weight: normal;
  text-align: left;
  color: inherit;
}
nav.main ul.sub li:hover > a {
  color: #FFFFFF;
}
nav.main li.open ul.sub {
  height: auto;
  display: block;
}
nav.main ul.sub li i {
  border: solid #000000;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  margin: 2px 10px;
}

/* do this to prevent override the "not .open" by hover on ipad */
@media (hover: hover) {
  nav.main li:hover ul.sub {
    height: auto;
    display: block;
  }
}
.navtoggle {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: transparent;
  height: 40px;
  cursor: pointer;
}
.navtoggle > i {
  background-color: #FFFFFF;
  display: block;
  width: 30px;
  height: 4px;
  margin: 0;
  border-radius: 2px;
  max-width: 100%;
  transition: all 0.5s;
}
.navtoggle > i:nth-child(2) {
  margin: 7px 0;
}
.navtoggle.close > i:nth-child(1) {
  transform: translateY(10px) rotate(-45deg);
}
.navtoggle.close > i:nth-child(2) {
  opacity: 0;
}
.navtoggle.close > i:nth-child(3) {
  transform: translateY(-12px) rotate(45deg);
}

@media screen and (min-width: 740px) {
  header {
    position: fixed;
    height: 90px;
    z-index: 9999;
  }
  header .logo {
    margin: 20px;
    padding: 0;
  }
  header .logo img {
    width: 250px;
  }
  header .contact {
    display: inherit;
    right: 0px;
    top: 5px;
    position: absolute;
    column-count: 1;
  }
  header .contact a {
    padding: 0 15px 0 0;
  }

  div.headspace {
    height: 90px;
  }

  .navtoggle {
    top: 30px;
    right: 30px;
  }

  h1 {
    font-size: 2rem;
    padding: 10px 0;
    line-height: 3rem;
    margin: 0;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  .subhead {
    font-size: 1rem;
  }
}
@media screen and (min-width: 980px) {
  header .logo {
    margin: 15px 20px;
  }
  header .logo img {
    width: auto;
  }

  nav.main {
    /* display: inherit !important; position: absolute; top: 40px; right: 20px; height: auto; */
    /*

            &>ul li         { border-top: none; }
            ul		        { border-bottom: none;  background-color: transparent; display: flex;}
            li , nav.main a { display: inline-block; }
            li>a            { font-size: 1.5rem; padding: 18px 30px; text-align: center; border: none; }
            button          { display: none; }
            ul.sub
            {
                width: 240px; position: absolute; left: 0; top: 100%; right: auto;

                li
                {
                    border: 1px solid #EAEAEA; margin-bottom: -1px;

                    i      { display: none; }
                    &>a    { padding: 20px 10px; font-size: 1rem; }
                }
            }
    */
  }
}
@media screen and (min-width: 1200px) {
  nav.main {
    background: #FFFFFF;
    min-height: calc(100vh - 80px);
  }
  nav.main.show {
    display: flex;
    justify-content: center;
  }
  nav.main li:active ul.sub {
    height: auto;
    display: block;
  }
  nav.main > ul li {
    border-top: none;
  }
  nav.main ul {
    border-bottom: none;
    background-color: transparent;
    display: flex;
  }
  nav.main li, nav.main nav.main a {
    display: inline-block;
  }
  nav.main button {
    display: none;
  }
  nav.main li.active > a {
    background-color: inherit;
    color: inherit;
  }
  nav.main li:hover > a {
    background-color: inherit;
    color: inherit;
  }
  nav.main ul {
    display: block;
    width: 100%;
    margin: auto;
    /* remove this from demo */
  }
  nav.main ul li {
    width: 50%;
    height: auto;
  }
  nav.main ul li > a {
    color: var(--colorTextDefault);
    font-size: 2.5rem;
    text-align: right;
  }
  nav.main ul li a > span {
    position: relative;
  }
  nav.main ul li a > span::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background-color: currentColor;
    transition: all 0.15s linear;
  }
  nav.main ul li.theme-p a > span::before {
    background-color: #FFCC00;
  }
  nav.main ul li.theme-i a > span::before {
    background-color: #FF9933;
  }
  nav.main ul li.theme-c a > span::before {
    background-color: #CC0000;
  }
  nav.main ul li.theme-s a > span::before {
    background-color: #6CB71E;
  }
  nav.main ul li.theme-x a > span::before {
    background-color: #E2E2E2;
  }
  nav.main ul li.theme-b a > span::before {
    background-color: #05869A;
  }
  nav.main ul li.theme-yellow a > span::before {
    background-color: #FFCC00;
  }
  nav.main ul li.theme-orange a > span::before {
    background-color: #FF9933;
  }
  nav.main ul li.theme-red a > span::before {
    background-color: #CC0000;
  }
  nav.main ul li.theme-green a > span::before {
    background-color: #6CB71E;
  }
  nav.main ul li.theme-grey a > span::before {
    background-color: #E2E2E2;
  }
  nav.main ul li.theme-turquois a > span::before {
    background-color: #05869A;
  }
  nav.main ul li > a:hover > span::before {
    width: 100%;
  }
  nav.main ul.sub {
    position: absolute;
    left: 100%;
    top: 10px;
    right: auto;
    width: 100%;
  }
  nav.main ul.sub li {
    border: none;
    margin: 0;
    width: 100%;
  }
  nav.main ul.sub li > a {
    font-weight: normal;
    text-align: left;
    font-size: 2rem;
    color: inherit;
    padding: 10px;
  }
  nav.main ul.sub li:hover > a {
    color: inherit;
  }
}
@media screen and (min-width: 1580px) {
  nav.main li > a {
    font-size: 1.25rem;
    padding: 18px 35px;
    text-align: center;
    border: none;
  }
}
/* ================================ CONTENT ================================ */
main {
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 160%;
  min-height: 70vh;
}

article {
  margin-bottom: 50px;
}

section {
  clear: both;
}

.container {
  margin: 0 10px;
  position: relative;
}

.container.carousel {
  width: 100%;
  margin: 0;
}

.content {
  padding: 20px 10px;
}

.content.center {
  text-align: center;
}

@media screen and (min-width: 740px) {
  .container {
    width: 720px;
    margin: auto;
  }
}
@media screen and (min-width: 980px) {
  main {
    font-size: 1.375rem;
    line-height: 160%;
  }

  .container {
    width: 960px;
  }

  /*    .content > p    { margin-bottom: 50px; } */
  .cc2 {
    column-count: 2;
  }

  .cc2 .break {
    break-after: column;
  }
}
@media screen and (min-width: 1200px) {
  .container {
    width: 1180px;
  }
}
@media screen and (min-width: 1580px) {
  .container {
    width: 1180px;
  }

  .container.standard {
    width: 1560px;
  }
}
/* ================================ BLOG ================================ */
.blog article {
  flex: 1 1 780px;
  max-width: 780px;
  margin-top: 30px;
}
.blog aside {
  flex: 1 1 390px;
  max-width: 390px;
}
.blog .textimage {
  padding-bottom: 30px;
}
.blog .teaser.list {
  line-height: 150%;
}

@media screen and (min-width: 980px) {
  .blog {
    display: flex;
  }
}
.tagbox {
  background: #EFEFEF;
  padding: 10px;
  margin: 30px 10px;
  line-height: 100%;
}
.tagbox ul {
  border: 0 none;
  list-style: outside none none;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  font-size: 1rem;
}
.tagbox li {
  width: 100%;
  background-color: #FFFFFF;
  position: relative;
  margin: 2px 0;
  padding: 3px 5px;
}
.tagbox li span {
  display: block;
  width: 32px;
  position: absolute;
  right: 0;
  top: 1px;
  background-color: #F6F6F6;
  margin: 2px;
  text-align: center;
}
.tagbox a {
  color: #444;
}
.tagbox li.active {
  background-color: #FFCC00;
}

/* ======= CAROUSEL ========================================================================================= */
.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 470px;
  margin: 10px 0;
}
.carousel:first-child {
  margin-top: 0;
}
.carousel figure {
  margin: 0;
  padding: 20px;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.carousel figure:nth-child(n+2) {
  left: 100%;
}
.carousel figcaption {
  margin: 0;
  order: 3;
  margin-bottom: 10px;
}
.carousel picture {
  margin: 0;
  order: 2;
}
.carousel h2 {
  font-size: 2rem;
  line-height: 100%;
  font-weight: 400;
  margin: 0 0 10px 0;
  color: #FFFFFF;
  text-transform: uppercase;
}
.carousel p {
  font-size: 1.125rem;
  line-height: 120%;
}
.carousel figcaption.left {
  order: 1;
  margin-top: 0;
}
.carousel figcaption.right {
  order: 3;
}
.carousel div.button {
  display: none;
  position: absolute;
  width: 50px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.carousel div.button.prev {
  left: 0;
}
.carousel div.button.next {
  right: 0;
}
.carousel div.button.prev::after, .carousel div.button.next::after {
  content: "";
  position: absolute;
  top: calc( 50% - 2*10px );
  width: 40px;
  height: 40px;
  transform: translateZ(1px) rotate(45deg);
  border-style: solid;
  color: #FFFFFF;
}
.carousel div.button.prev::after {
  left: 15px;
  border-width: 0 0 5px 5px;
}
.carousel div.button.next::after {
  right: 15px;
  border-width: 5px 5px 0 0;
}
.carousel:hover div.button {
  display: block;
}
.carousel nav {
  position: absolute;
  bottom: calc( 10px - 5px/2 );
  height: 5px;
  width: 100%;
}
.carousel nav > ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.carousel nav > ul > li {
  width: 50px;
  height: 5px;
  background-color: #333333;
  margin: 0 5px;
  opacity: 0.5;
  cursor: pointer;
}
.carousel nav > ul > li:hover,
.carousel nav > ul > li.active {
  opacity: 1;
}

@media screen and (min-width: 740px) {
  .carousel {
    height: 290px;
  }
  .carousel figure {
    flex-direction: row;
    justify-content: center;
  }
  .carousel figcaption {
    width: 290px;
    order: 1;
    margin: 20px;
  }
  .carousel figcaption.left {
    margin-right: 30px;
    margin-left: 0;
    margin-top: 20px;
  }
  .carousel figcaption.right {
    margin-left: 30px;
    margin-right: 0;
  }
  .carousel picture {
    width: 380px;
  }
}
@media screen and (min-width: 980px) {
  .carousel {
    height: 400px;
  }
  .carousel figcaption {
    width: 380px;
    order: 1;
  }
  .carousel figcaption.left {
    margin-right: 20px;
  }
  .carousel figcaption.right {
    margin-left: 20px;
  }
  .carousel picture {
    width: 540px;
  }
  .carousel h2 {
    font-size: 3rem;
  }
  .carousel p {
    font-size: 1.375rem;
    line-height: 140%;
  }
}
@media screen and (min-width: 1200px) {
  .carousel {
    height: 510px;
    margin: 20px 0;
  }
  .carousel figure {
    padding: 40px 0;
  }
  .carousel figcaption {
    width: 480px;
    margin: 20px;
  }
  .carousel figcaption {
    width: 480px;
  }
  .carousel figcaption.left {
    margin-right: 40px;
    margin-left: 0;
  }
  .carousel figcaption.right {
    margin-left: 40px;
    margin-right: 0;
  }
  .carousel picture {
    width: 640px;
    margin: 0;
  }
  .carousel nav {
    bottom: calc(2*10px - 5px/2 );
  }
  .carousel h2 {
    font-size: 4.5rem;
  }
  .carousel p {
    font-size: 1.75rem;
  }
}
@media screen and (min-width: 1580px) {
  .carousel {
    height: 640px;
  }
  .carousel figcaption {
    width: 640px;
  }
  .carousel figcaption.left {
    margin-left: 0;
  }
  .carousel figcaption.right {
    margin-right: 0;
  }
  .carousel picture {
    width: 840px;
  }
  .carousel h2 {
    font-size: 5rem;
    line-height: 5.5rem;
    margin-bottom: 2rem;
  }
  .carousel p {
    font-size: 1.75rem;
  }
}
/* ======= Theme-styles ========================================================================================== */
/* ======= defined COLUMNS ========================================================================================== */
.flexcontainer {
  display: flex;
  flex-wrap: wrap;
}
.flexcontainer.image_right {
  flex-direction: row-reverse;
}
.flexcontainer.image_right hgroup {
  width: 250%;
  z-index: 1;
}
.flexcontainer.ti11 {
  padding: 20px 0;
}

.c33, .c50, .c66 {
  width: 100%;
  padding: 0 10px;
  flex: 0 0 auto;
}

.middle {
  align-content: center;
}

@media screen and (min-width: 740px) {
  .flexcontainer.ti11 > picture {
    flex-basis: 50%;
    max-width: 50%;
  }
  .flexcontainer.ti12 > picture {
    flex-basis: 66%;
    max-width: 66%;
  }
  .flexcontainer.ti21 > picture {
    flex-basis: 33%;
    max-width: 33%;
  }

  .c33, .c50 {
    flex-basis: 50%;
    max-width: 50%;
  }
}
@media screen and (min-width: 980px) {
  .c25 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .c33 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .c50 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .c66 {
    flex-basis: 66%;
    max-width: 66%;
  }

  .c100 {
    flex-basis: 100%;
    max-width: 100%;
  }
}
@media screen and (min-width: 1580px) {
  .c33, .c50, .c66 {
    padding: 0 20px;
  }
}
/* ======= NORMAL CONTENT BLOCK  ========================================================================================== */
.textimage {
  /*    p           { font-size: 1.375rem; line-height: 175%; } */
  /*    hgroup>p    { font-size: 1.25rem; margin-top: -1rem; } */
}
.textimage picture.left {
  padding: 0 20px 20px 0;
}
.textimage picture.right {
  padding: 0 0 20px 20px;
}

@media screen and (min-width: 740px) {
  .textimage picture {
    max-width: 33%;
  }
}
/* ======= TEASER ========================================================================================== */
.teaserarea {
  --gap: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  padding: 40px 0;
}

.teaser {
  margin-bottom: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  /*
      .price {
          font-size: 0.875rem; text-align: right; padding: 0 $gridMargin $gridMargin $gridMargin; margin-top: auto;
          b       { font-size: 1.5rem; color: $defaultPriceColor; }
      }
  */
}
.teaser p {
  text-align: left;
}
.teaser.default {
  padding: 20px 20px;
  background: #FFFFFF;
  flex-basis: calc(25% - var(--gap));
  margin: 0;
}
.teaser.default h3 {
  color: #a47764;
  padding: 20px 0;
  margin: 0;
}
.teaser.c33 {
  flex-basis: calc(33% - var(--gap));
}
.teaser.c50 {
  flex-basis: calc(50% - var(--gap));
}
.teaser .inner {
  position: relative;
  display: flex;
  flex-direction: column;
  outline: 1px solid #AAAAAA;
  overflow: hidden;
  height: 100%;
}
.teaser .carousel {
  width: 100%;
  height: 200px;
  margin-bottom: 0;
}
.teaser .carousel img {
  height: 100%;
  max-height: 100%;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: unset;
  width: auto;
}
.teaser .carousel nav > ul > li {
  width: 8px;
  height: 8px;
  border-radius: 4px;
}
.teaser .carousel div.button::before {
  height: 30px;
  width: 30px;
  border-radius: 15px;
  top: calc(50% - 15px);
}
.teaser .carousel div.button::after {
  content: "";
  position: absolute;
  top: calc( 50% - 6px );
  width: 10px;
  height: 10px;
  transform: translateZ(1px) rotate(45deg);
  border-style: solid;
  color: #FFCC00;
}
.teaser .carousel div.button:hover::before {
  background-color: #e6b800;
}
.teaser .carousel div.button.prev::before {
  left: 5px;
}
.teaser .carousel div.button.prev::after {
  left: 15px;
  right: auto;
  border-width: 0 0 3px 3px;
}
.teaser .carousel div.button.next::before {
  right: 5px;
}
.teaser .carousel div.button.next::after {
  left: auto;
  right: 15px;
  border-width: 3px 3px 0 0;
}
.teaser:hover .carousel div.button {
  display: block;
}
.teaser .desc {
  padding: 10px;
  line-height: 140%;
  font-size: 1rem;
}
.teaser .desc > a:hover {
  text-decoration: none;
}
.teaser .desc h3 {
  color: #6CB71E;
}
.teaser .desc p {
  margin-top: 0;
}
.teaser .infoButton {
  z-index: 5;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 2px solid #FFCC00;
  border-radius: 15px;
  cursor: pointer;
  /* background: rgba(255,255,255,0.3); */
}
.teaser .infoButton::after {
  content: "i";
  width: 100%;
  height: 100%;
  font-weight: bold;
  color: #FFCC00;
  display: flex;
  justify-content: center;
  align-items: center;
}
.teaser .infoButton:hover {
  border-color: #e6b800;
}
.teaser .infoButton:hover::after {
  color: #e6b800;
}
.teaser .details {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  margin-left: calc(-100% - 20px);
  overflow: hidden;
  background-color: #FFFFFF;
  transition: all 1s linear;
  font-size: 1rem;
}
.teaser .details > div {
  padding: 10px;
}
.teaser .details p.head {
  width: calc( 100% - 40px );
  /* keep close button in mind */
  margin-top: 5px;
  font-size: 1.5rem;
  line-height: 1.75rem;
  margin-bottom: 0;
  color: #6CB71E;
}
.teaser.openDetails .infoButton {
  border-color: #6CB71E;
}
.teaser.openDetails .infoButton::after {
  content: "×";
  font-size: 1.25rem;
  color: #6CB71E;
}
.teaser.openDetails .details {
  margin-left: -20px;
}
.teaser.list {
  display: flex;
  text-align: left;
  background-color: #EFEFEF;
  padding: 20px;
  margin: 0;
  position: relative;
  transition: height 1s ease;
}
.teaser.list picture {
  flex-basis: 25%;
  max-width: 25%;
}
.teaser.list div {
  flex-basis: 75%;
  max-width: 75%;
  padding-left: 20px;
  font-size: 1rem;
  align-content: center;
}
.teaser.list h3 {
  color: #CC0000;
  padding: 0;
  margin: 0;
}
.teaser.list .date {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 0.75rem;
}
.teaser.list:hover.green {
  background-color: #6CB71E;
  color: #FFFFFF;
}
.teaser.list:hover.grey {
  background-color: #E2E2E2;
  color: #333333;
}
.teaser.list:hover.yellow {
  background-color: #FFCC00;
  color: #333333;
}
.teaser.list:hover.turquois {
  background-color: #05869A;
  color: #FFFFFF;
}
.teaser.list:hover.orange {
  background-color: #FF9933;
  color: #FFFFFF;
}
.teaser.list:hover.red {
  background-color: #CC0000;
  color: #FFFFFF;
}
.teaser.list.anim {
  transition: 1s ease all;
}

.hidden {
  height: 0px;
  display: none !important;
  opacity: 0;
  transition: 10s ease all;
}

/* .visible        { height: unset; opacity: 1; } */
span.btn {
  display: block;
  margin: auto;
  padding: 10px;
  background-color: #E2E2E2;
  border-radius: 5px;
}

@media screen and (min-width: 740px) {
  .teaser.c33 .carousel {
    width: 340px;
    height: 228px;
    margin: 0 auto;
  }
  .teaser.c25 .carousel {
    width: 340px;
    height: 228px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 980px) {
  .teaser.c33 .carousel {
    width: 300px;
    height: 201px;
  }
  .teaser.c25 .carousel {
    width: 220px;
    height: 147px;
  }
}
@media screen and (min-width: 1200px) {
  .teaser.c33 .carousel {
    width: 373px;
    height: 250px;
  }
  .teaser.c25 .carousel {
    width: 275px;
    height: 184px;
  }
}
@media screen and (min-width: 1580px) {
  .teaser {
    margin-bottom: 40px;
  }
  .teaser.c33 .carousel {
    width: 480px;
    height: 256px;
  }
  .teaser.c25 .carousel {
    width: 350px;
    height: 234px;
  }
  .teaser.image .carousel, .teaser.product .carousel {
    width: 350px;
    height: 234px;
  }
}
@media screen and (min-width: 740px) and (max-width: 980px) {
  .teaser.c33 {
    flex-basis: 50%;
    max-width: 50%;
  }
}
.teaserarea.standard {
  gap: 0;
  padding: 40px 0 20px 0;
  margin: 0;
}

.teaser.standard {
  margin-bottom: 20px;
}
.teaser.standard > div {
  background-color: #E2E2E2;
  height: 100%;
  position: relative;
}
.teaser.standard div.text {
  background-color: #E2E2E2;
  padding-bottom: 48px;
  position: relative;
  flex-grow: 1;
  border-top: 10px solid rgba(0, 0, 0, 0);
  line-height: 110%;
}
.teaser.standard p {
  padding: 0 20px 20px 20px;
  margin: 0;
  font-size: 1rem;
}
.teaser.standard h2 {
  padding: 20px;
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0;
  color: #333333;
  font-weight: lighter;
  text-align: left;
  line-height: 140%;
}
.teaser.standard a.arrow {
  width: 32px;
  height: 32px;
  background: #333333;
  display: inline-block;
  position: absolute;
  right: 20px;
  bottom: 20px;
}
.teaser.standard a.arrow i {
  display: block;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(315deg);
  position: absolute;
  top: 10px;
  left: 7px;
  width: 12px;
  height: 12px;
}
.teaser.standard a.arrow u {
  display: none;
}

@media screen and (min-width: 740px) {
  .teaserarea.standard {
    margin: auto;
  }

  .teaser.standard p {
    font-size: 1.25rem;
  }
  .teaser.standard h2 {
    font-size: 1.75rem;
  }
  .teaser.standard div.text {
    line-height: 140%;
  }
}
@media screen and (min-width: 980px) {
  .teaser.standard.c25 {
    flex-basis: 50%;
    max-width: 50%;
  }
  .teaser.standard p {
    font-size: 1.25rem;
  }
  .teaser.standard h2 {
    font-size: 1.75rem;
  }
}
@media screen and (min-width: 1200px) {
  .teaser.standard.c25 {
    flex-basis: 25%;
    max-width: 25%;
  }
  .teaser.standard p {
    font-size: 1.125rem;
  }
  .teaser.standard h2 {
    font-size: 1.75rem;
  }
}
@media screen and (min-width: 1580px) {
  .teaser.standard p {
    font-size: 1.375rem;
  }
  .teaser.standard h2 {
    font-size: 2rem;
  }
  .teaser.standard div.text {
    line-height: 160%;
  }
}
/* ======= STYLES ======= */
.style-grey a.arrow {
  background: #E2E2E2 !important;
}
.style-grey.teaser.standard div.text {
  border-color: #E2E2E2 !important;
}
.style-yellow a.arrow {
  background: #FFCC00 !important;
}
.style-yellow.teaser.standard div.text {
  border-color: #FFCC00 !important;
}
.style-orange a.arrow {
  background: #FF9933 !important;
}
.style-orange.teaser.standard div.text {
  border-color: #FF9933 !important;
}
.style-red a.arrow {
  background: #CC0000 !important;
}
.style-red.teaser.standard div.text {
  border-color: #CC0000 !important;
}
.style-green a.arrow {
  background: #6CB71E !important;
}
.style-green.teaser.standard div.text {
  border-color: #6CB71E !important;
}
.style-turquois a.arrow {
  background: #05869A !important;
}
.style-turquois.teaser.standard div.text {
  border-color: #05869A !important;
}

/* ================================ FORM  ================================ */
.contact .group {
  margin-top: 10px;
  border: 0;
}
.contact .group > label, .contact .group > input, .contact .group > textarea {
  width: 100%;
  display: block;
}
.contact .group > input.captcha {
  width: 100px;
}
.contact label.option {
  padding-left: 24px;
}
.contact label.option input {
  margin-left: -24px;
}
.contact button {
  background: var(--colorDefault);
  border: 1px solid #333;
  border-radius: 5px;
  padding: 10px;
  color: var(--colorTextDefault);
  font-size: inherit;
}
.contact button:hover {
  background: var(--colorDefault);
  color: #FFFFFF;
}
.contact .cpt input {
  width: 100px;
  margin-right: 10px;
  display: inline-block;
}

.privacy {
  font-size: 0.875rem;
  line-height: 130%;
  padding-top: 5px;
}

@media screen and (min-width: 980px) {
  .team {
    width: calc(50% - 15px);
  }
}
/* ================================ FOOTER ================================ */
footer {
  background-color: #333333;
  color: #FFFFFF;
  font-size: 1.25rem;
  line-height: 140%;
}
footer > div {
  padding: 20px 0;
}
footer a {
  color: #FFFFFF;
}
footer nav {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 10px;
}
footer nav > ul {
  font-size: 1.25rem;
  margin-top: 10px;
}
footer nav a {
  display: inline-block;
  padding: 5px 20px;
}
footer nav a:hover {
  color: #FFCC00;
}

.footerline {
  margin: 10px 0 0 0;
  background-color: #FFCC00;
  color: #FFFFFF;
  padding: 15px;
  text-align: center;
}
.footerline > div {
  margin: auto;
}
.footerline a {
  color: inherit;
}

.br::before {
  content: "\a";
  white-space: pre;
}

@media screen and (min-width: 740px) {
  footer > div {
    display: flex;
    padding: 30px 0;
    justify-content: space-between;
  }
  footer nav {
    font-size: 1.75rem;
  }
  footer nav a {
    padding: 5px 0;
  }

  .footerline {
    margin: auto;
    border-top: none;
  }
}
@media screen and (min-width: 980px) {
  footer nav > ul {
    font-size: 1.125rem;
  }

  .br::before {
    content: " | ";
    white-space: unset;
  }
}
@media screen and (min-width: 1200px) {
  footer nav {
    font-size: 2rem;
    margin: 0 20px;
  }

  footer nav > ul {
    font-size: 1.25rem;
  }
}
/* ================================ SCROLL-BUTTON  ================================ */
a.scrolltop {
  display: none;
  background-color: var(--colorDefault);
  position: fixed;
  bottom: 20px;
  left: 20px;
  text-align: center;
  cursor: pointer;
  z-index: 300;
  border-radius: 2px;
  width: 40px;
  height: 40px;
  color: #FFFFFF;
  font-size: 0.875rem;
  padding: 15px 0;
}
a.scrolltop i {
  border: solid #fff;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 6px;
  transform: rotate(-135deg);
}

.scrolled_down a.scrolltop {
  display: block;
}

/* ================================ COOKIE BOX ================================ */
div.cookie {
  background-color: #666;
  color: #fff;
  font-size: 1rem;
  line-height: 1.25rem;
  text-align: center;
  display: none;
  padding: 10px;
  position: fixed;
  bottom: 10px;
  width: 90%;
  left: 5%;
  flex-direction: column;
  justify-content: center;
  border: 3px solid #333;
  border-radius: 6px;
  z-index: 99;
}

div.cookie button {
  font-size: 1rem;
  padding: 4px 10px;
  background: #fff;
  color: #666;
  margin: 10px;
  min-width: auto;
}

div.cookie a {
  color: #fff;
  text-decoration: underline;
}

body.showcookie div.cookie {
  display: block;
}

/* ================================ WACG for CONTRAST und FONTSIZE ================================ */
.contrast a {
  text-decoration: underline;
}
.contrast nav.main a {
  text-decoration: none;
}
.contrast img {
  filter: grayscale(1) !important;
}

html.fontsize {
  font-size: 20px;
}

/* ================================ styles for pics-scquares ================================ */
:root {
  --shine-degree: 120deg;
  --shine-color: rgba(255, 255, 255, 0.2);
  --shine-effect: linear-gradient( var(--shine-degree), transparent, var(--shine-color), transparent );
  --shine-transition: all 0.65s ease-in-out;
}

.squares {
  text-align: center;
  background-color: var(--colorLogo);
  height: calc(100vh - 180px);
  padding-top: calc(50vh - 250px);
  display: none;
}

.squares > hgroup {
  opacity: 0;
}

.pics_square {
  width: 240px;
  height: 240px;
  margin: 10px;
  display: inline-block;
  font-family: Assistant, Calibri, Arial, Helvetica;
  font-size: 250px;
  color: #FFFFFF;
  font-weight: bold;
  background-color: #FFFFFF;
  border-radius: 40px;
  transform-style: preserve-3d;
  overflow: hidden;
  perspective: 500px;
  /* shine animation for pics-square */
}
.pics_square .content {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  background-color: #FFCC00;
  border: 7px solid #FFFFFF;
  border-radius: 40px;
}
.pics_square:hover .content {
  transform: rotateX(180deg);
}
.pics_square .front, .pics_square .back {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pics_square .back {
  background: white;
  line-height: 140%;
  color: #333333;
  text-align: left;
  font-size: 1.25rem;
  transform: rotateX(180deg);
}
.pics_square .front > img {
  height: 80%;
}
.pics_square::before, .pics_square::after {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
}
.pics_square::before {
  background: rgba(255, 255, 255, 0.5);
  width: 60px;
  left: 0;
  filter: blur(30px);
  animation: shine-alt1 5s ease-in-out infinite;
}
.pics_square::after {
  background: rgba(255, 255, 255, 0.2);
  width: 30px;
  left: 30px;
  filter: blur(5px);
  animation: shine-alt2 5s ease-in-out infinite;
}

/* hide logo for pics-squares when unscrolled */
body.logo_scroll .logo {
  opacity: 0;
}
body.logo_scroll.scrolled .logo {
  opacity: 1;
  transition: 1s ease all;
}

@media screen and (min-width: 1200px) {
  .squares {
    display: block;
  }
}
@media screen and (min-width: 1580px) {
  .pics_square {
    width: 300px;
    height: 300px;
    border-radius: 45px;
  }
  .pics_square .content {
    border: 10px solid #FFFFFF;
    border-radius: 44px;
  }
}
@-webkit-keyframes shine-alt1 {
  0% {
    opacity: 0.5;
    transform: translateX(-100px) skewX(-15deg);
    transition-property: opacity, transform;
  }
  11%, 100% {
    opacity: 0.6;
    transform: translateX(300px) skewX(-15deg);
    transition-property: opacity, transform;
  }
}
@keyframes shine-alt1 {
  0% {
    opacity: 0.5;
    transform: translateX(-100px) skewX(-15deg);
    transition-property: opacity, transform;
  }
  11%, 100% {
    opacity: 0.6;
    transform: translateX(300px) skewX(-15deg);
    transition-property: opacity, transform;
  }
}
@-webkit-keyframes shine-alt2 {
  0% {
    opacity: 0;
    transform: translateX(-100px) skewX(-15deg);
    transition-property: opacity, transform;
  }
  11%, 100% {
    opacity: 1;
    transform: translateX(300px) skewX(-15deg);
    transition-property: opacity, transform;
  }
}
@keyframes shine-alt2 {
  0% {
    opacity: 0;
    transform: translateX(-100px) skewX(-15deg);
    transition-property: opacity, transform;
  }
  11%, 100% {
    opacity: 1;
    transform: translateX(300px) skewX(-15deg);
    transition-property: opacity, transform;
  }
}
/* ================ add claro cookie manager ===================== */
/**
  *  custom styles for klaro cookie management
  */
.klaro {
  font-family: inherit;
  font-family: var(--font-family, inherit);
  font-size: 14px;
  font-size: var(--font-size, 14px);
  line-height: 200%;
}

.klaro button {
  font-family: inherit;
  font-family: var(--font-family, inherit);
  font-size: 14px;
  font-size: var(--font-size, 14px);
}

.klaro .cn-body {
  /* background-color: $colorCookieBack; */
}

.klaro .cookie-notice {
  background-color: #E2E2E2;
}

.klaro.cm-as-context-notice {
  height: 100%;
  padding-bottom: 12px;
  padding-top: 12px;
}

.klaro .cookie-modal,
.klaro .context-notice,
.klaro .cookie-notice {
  /* The switch - the box around the slider */
}

.klaro .cookie-modal .cm-switch-container,
.klaro .context-notice .cm-switch-container,
.klaro .cookie-notice .cm-switch-container {
  border-bottom-style: solid;
  border-bottom-style: var(--border-style, solid);
  border-bottom-width: 1px;
  border-bottom-width: var(--border-width, 1px);
  border-bottom-color: #E2E2E2;
  display: block;
  position: relative;
  padding: 10px;
  padding-left: 66px;
  line-height: 20px;
  vertical-align: middle;
  min-height: 40px;
}

.klaro .cookie-modal .cm-switch-container:last-child,
.klaro .context-notice .cm-switch-container:last-child,
.klaro .cookie-notice .cm-switch-container:last-child {
  border-bottom: 0;
}

.klaro .cookie-modal .cm-switch-container:first-child,
.klaro .context-notice .cm-switch-container:first-child,
.klaro .cookie-notice .cm-switch-container:first-child {
  margin-top: 0;
}

.klaro .cookie-modal .cm-switch-container p,
.klaro .context-notice .cm-switch-container p,
.klaro .cookie-notice .cm-switch-container p {
  margin-top: 0;
}

.klaro .cookie-modal .cm-switch,
.klaro .context-notice .cm-switch,
.klaro .cookie-notice .cm-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 30px;
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider {
  background-color: #818084;
  background-color: var(--green1, #FFCC00);
}

.klaro .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input.half-checked:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.half-checked:checked + .cm-list-label .slider {
  background-color: #818084;
  background-color: var(--green1, #FFCC00);
  opacity: 0.6;
}

.klaro .cookie-modal .cm-list-input.half-checked:checked + .cm-list-label .slider::before,
.klaro .context-notice .cm-list-input.half-checked:checked + .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-input.half-checked:checked + .cm-list-label .slider::before {
  -ms-transform: translateX(10px);
  transform: translateX(10px);
}

.klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider,
.klaro .context-notice .cm-list-input.only-required + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.only-required + .cm-list-label .slider {
  background-color: #333333;
  background-color: var(--green2, #333333);
  opacity: 0.8;
}

.klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider::before,
.klaro .context-notice .cm-list-input.only-required + .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-input.only-required + .cm-list-label .slider::before {
  -ms-transform: translateX(10px);
  transform: translateX(10px);
}

.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .context-notice .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input.required:checked + .cm-list-label .slider {
  background-color: #333333;
  background-color: var(--green2, #333333);
  opacity: 0.8;
  cursor: not-allowed;
}

.klaro .cookie-modal .slider,
.klaro .context-notice .slider,
.klaro .cookie-notice .slider {
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 0 rgba(0, 0, 0, 0.19);
}

.klaro .cookie-modal .cm-list-input,
.klaro .context-notice .cm-list-input,
.klaro .cookie-notice .cm-list-input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 50px;
  height: 30px;
}

.klaro .cookie-modal .cm-list-title,
.klaro .context-notice .cm-list-title,
.klaro .cookie-notice .cm-list-title {
  font-size: 0.9em;
  font-weight: 600;
}

.klaro .cookie-modal .cm-list-description,
.klaro .context-notice .cm-list-description,
.klaro .cookie-notice .cm-list-description {
  color: #7c7c7c;
  color: var(--dark3, #7c7c7c);
  font-size: 0.9em;
  padding-top: 4px;
}

.klaro .cookie-modal .cm-list-label .cm-switch,
.klaro .context-notice .cm-list-label .cm-switch,
.klaro .cookie-notice .cm-list-label .cm-switch {
  position: absolute;
  left: 0;
}

.klaro .cookie-modal .cm-list-label .slider,
.klaro .context-notice .cm-list-label .slider,
.klaro .cookie-notice .cm-list-label .slider {
  background-color: #f2f2f2;
  background-color: var(--white2, #f2f2f2);
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 0.4s;
  width: 50px;
  display: inline-block;
}

.klaro .cookie-modal .cm-list-label .slider::before,
.klaro .context-notice .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-label .slider::before {
  background-color: #e6e6e6;
  background-color: var(--white3, #e6e6e6);
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 5px;
  bottom: 5px;
  transition: 0.4s;
}

.klaro .cookie-modal .cm-list-label .slider.round,
.klaro .context-notice .cm-list-label .slider.round,
.klaro .cookie-notice .cm-list-label .slider.round {
  border-radius: 30px;
}

.klaro .cookie-modal .cm-list-label .slider.round::before,
.klaro .context-notice .cm-list-label .slider.round::before,
.klaro .cookie-notice .cm-list-label .slider.round::before {
  border-radius: 50%;
}

.klaro .cookie-modal .cm-list-label input:focus + .slider,
.klaro .context-notice .cm-list-label input:focus + .slider,
.klaro .cookie-notice .cm-list-label input:focus + .slider {
  /* box-shadow: 0 0 1px var(color, green3); */
}

.klaro .cookie-modal .cm-list-label input:checked + .slider::before,
.klaro .context-notice .cm-list-label input:checked + .slider::before,
.klaro .cookie-notice .cm-list-label input:checked + .slider::before {
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

.klaro .cookie-modal .cm-list-input:focus + .cm-list-label .slider,
.klaro .context-notice .cm-list-input:focus + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:focus + .cm-list-label .slider {
  box-shadow: 0 4px 6px 0 rgba(125, 125, 125, 0.2), 5px 5px 10px 0 rgba(125, 125, 125, 0.19);
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before,
.klaro .context-notice .cm-list-input:checked + .cm-list-label .slider::before,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider::before {
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

.klaro .cookie-modal .slider,
.klaro .context-notice .slider,
.klaro .cookie-notice .slider {
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 0 rgba(0, 0, 0, 0.19);
}

.klaro .cookie-modal a,
.klaro .context-notice a,
.klaro .cookie-notice a {
  color: #E30513;
  color: var(--green1, #E30513);
  text-decoration: none;
}

.klaro .cookie-modal p,
.klaro .cookie-modal strong,
.klaro .cookie-modal h1,
.klaro .cookie-modal h2,
.klaro .cookie-modal ul,
.klaro .cookie-modal li,
.klaro .context-notice p,
.klaro .context-notice strong,
.klaro .context-notice h1,
.klaro .context-notice h2,
.klaro .context-notice ul,
.klaro .context-notice li,
.klaro .cookie-notice p,
.klaro .cookie-notice strong,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2,
.klaro .cookie-notice ul,
.klaro .cookie-notice li {
  color: #fafafa;
  color: var(--light1, #fafafa);
}

.klaro .cookie-modal p,
.klaro .cookie-modal h1,
.klaro .cookie-modal h2,
.klaro .cookie-modal ul,
.klaro .cookie-modal li,
.klaro .context-notice p,
.klaro .context-notice h1,
.klaro .context-notice h2,
.klaro .context-notice ul,
.klaro .context-notice li,
.klaro .cookie-notice p,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2,
.klaro .cookie-notice ul,
.klaro .cookie-notice li {
  display: block;
  text-align: left;
  margin: 0;
  padding: 0;
  margin-top: 0.7em;
}

.klaro .cookie-modal h1,
.klaro .cookie-modal h2,
.klaro .cookie-modal h3,
.klaro .cookie-modal h4,
.klaro .cookie-modal h5,
.klaro .cookie-modal h6,
.klaro .context-notice h1,
.klaro .context-notice h2,
.klaro .context-notice h3,
.klaro .context-notice h4,
.klaro .context-notice h5,
.klaro .context-notice h6,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2,
.klaro .cookie-notice h3,
.klaro .cookie-notice h4,
.klaro .cookie-notice h5,
.klaro .cookie-notice h6 {
  font-family: inherit;
  font-family: var(--title-font-family, inherit);
}

.klaro .cookie-modal .cm-link,
.klaro .context-notice .cm-link,
.klaro .cookie-notice .cm-link {
  margin-right: 0.5em;
  vertical-align: middle;
}

.klaro .cookie-modal .cm-btn,
.klaro .context-notice .cm-btn,
.klaro .cookie-notice .cm-btn {
  color: #FFFFFF;
  color: var(--button-text-color, #FFFFFF);
  background-color: #333333;
  background-color: var(--dark2, #333333);
  background-image: none;
  border-radius: 4px;
  border-radius: var(--border-radius, 4px);
  padding: 6px 10px;
  margin-right: 0.5em;
  border-style: none;
  padding: 0.4em;
  font-size: 1em;
  cursor: pointer;
}

.klaro .cookie-modal .cm-btn:disabled,
.klaro .context-notice .cm-btn:disabled,
.klaro .cookie-notice .cm-btn:disabled {
  opacity: 0.5;
}

.klaro .cookie-modal .cm-btn.cm-btn-close,
.klaro .context-notice .cm-btn.cm-btn-close,
.klaro .cookie-notice .cm-btn.cm-btn-close {
  background-color: #c8c8c8;
  background-color: var(--light2, #c8c8c8);
}

.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .context-notice .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success {
  background-color: #FFCC00;
  color: #FFFFFF;
}

.klaro .cookie-modal .cm-btn.cm-btn-success-var,
.klaro .context-notice .cm-btn.cm-btn-success-var,
.klaro .cookie-notice .cm-btn.cm-btn-success-var {
  background-color: #FFCC00;
  color: #FFFFFF;
}

.klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro .context-notice .cm-btn.cm-btn-info,
.klaro .cookie-notice .cm-btn.cm-btn-info {
  background-color: #FFCC00;
  color: #FFFFFF;
}

.klaro .context-notice {
  border-radius: 4px;
  border-radius: var(--border-radius, 4px);
  border-style: solid;
  border-style: var(--border-style, solid);
  border-width: 1px;
  border-width: var(--border-width, 1px);
  border-color: #c8c8c8;
  border-color: var(--light2, #c8c8c8);
  background-color: #fafafa;
  background-color: var(--light1, #fafafa);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 12px;
  height: 100%;
}

.klaro .context-notice.cm-dark {
  background-color: #333;
  background-color: var(--dark1, #333);
  border-color: #5c5c5c;
  border-color: var(--dark2, #5c5c5c);
}

.klaro .context-notice.cm-dark p {
  color: #fafafa;
  color: var(--light1, #fafafa);
}

.klaro .context-notice.cm-dark p a {
  color: #459cdc;
  color: var(--blue2, #459cdc);
}

.klaro .context-notice p {
  color: #333333;
  color: var(--dark1, #333333);
  flex-grow: 0;
  text-align: center;
  padding-top: 0;
  margin-top: 0;
}

.klaro .context-notice p a {
  color: #333333;
  color: var(--green2, #333333);
}

.klaro .context-notice p.cm-buttons {
  margin-top: 12px;
}

.klaro .cookie-modal {
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: hidden;
  left: 0;
  top: 0;
  z-index: 1000;
}

.klaro .cookie-modal.cm-embedded {
  position: relative;
  height: inherit;
  width: inherit;
  left: inherit;
  right: inherit;
  z-index: 0;
}

.klaro .cookie-modal.cm-embedded .cm-modal.cm-klaro {
  position: relative;
  -ms-transform: none;
  transform: none;
}

.klaro .cookie-modal .cm-bg {
  background: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.klaro .cookie-modal .cm-modal.cm-klaro {
  background-color: #E2E2E2;
  background-color: var(--dark1, #E2E2E2);
  color: #fafafa;
  color: var(--light1, #fafafa);
  z-index: 1001;
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 0 rgba(0, 0, 0, 0.19);
  width: 100%;
  max-height: 98%;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  position: fixed;
  overflow: auto;
}

@media (min-width: 660px) {
  .klaro .cookie-modal .cm-modal.cm-klaro {
    border-radius: 4px;
    border-radius: var(--border-radius, 4px);
    position: relative;
    margin: 0 auto;
    max-width: 640px;
    height: auto;
    width: auto;
  }
}
.klaro .cookie-modal .cm-modal .hide {
  border-style: none;
  background: none;
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
}

.klaro .cookie-modal .cm-modal .hide svg {
  stroke: #fafafa;
  stroke: var(--light1, #fafafa);
}

.klaro .cookie-modal .cm-modal .cm-footer {
  border-top-color: #5c5c5c;
  border-top-color: var(--dark2, #5c5c5c);
  border-top-width: 1px;
  border-top-width: var(--border-width, 1px);
  border-top-style: solid;
  border-top-style: var(--border-style, solid);
  padding: 1em;
}

.klaro .cookie-modal .cm-modal .cm-footer-buttons {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}

.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by {
  font-size: 0.8em;
  padding-top: 4px;
  text-align: right;
  padding-right: 8px;
}

.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a {
  color: #5c5c5c;
  color: var(--dark2, #5c5c5c);
}

.klaro .cookie-modal .cm-modal .cm-header {
  border-bottom-width: 1px;
  border-bottom-width: var(--border-width, 1px);
  border-bottom-style: solid;
  border-bottom-style: var(--border-style, solid);
  border-bottom-color: #5c5c5c;
  border-bottom-color: var(--dark2, #5c5c5c);
  padding: 1em;
  padding-right: 24px;
}

.klaro .cookie-modal .cm-modal .cm-header h1 {
  margin: 0;
  font-size: 2em;
  display: block;
}

.klaro .cookie-modal .cm-modal .cm-header h1.title {
  padding-right: 20px;
}

.klaro .cookie-modal .cm-modal .cm-body {
  padding: 1em;
}

.klaro .cookie-modal .cm-modal .cm-body ul {
  display: block;
}

.klaro .cookie-modal .cm-modal .cm-body span {
  display: inline-block;
  width: auto;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes {
  padding: 0;
  margin: 0;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose .cm-services .cm-caret,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services .cm-caret {
  color: #878787;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose .cm-services .cm-content,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services .cm-content {
  margin-left: -40px;
  display: none;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose .cm-services .cm-content.expanded,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services .cm-content.expanded {
  margin-top: 10px;
  display: block;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose {
  position: relative;
  line-height: 20px;
  vertical-align: middle;
  padding-left: 60px;
  min-height: 40px;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service:first-child,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose:first-child,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service:first-child,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose:first-child {
  margin-top: 0;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service p,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose p,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service p,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose p {
  margin-top: 0;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service p.purposes,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose p.purposes,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service p.purposes,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose p.purposes {
  color: #a0a0a0;
  color: var(--light3, #a0a0a0);
  font-size: 0.8em;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service.cm-toggle-all,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose.cm-toggle-all,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service.cm-toggle-all,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose.cm-toggle-all {
  border-top-width: 1px;
  border-top-width: var(--border-width, 1px);
  border-top-style: solid;
  border-top-style: var(--border-style, solid);
  border-top-color: #E2E2E2;
  padding-top: 1em;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-list-title,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-list-title,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-list-title,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-list-title {
  font-weight: 600;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-opt-out,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-required,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-opt-out,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-required,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-opt-out,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-required,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-opt-out,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-required {
  color: #5c5c5c;
  color: var(--dark2, #5c5c5c);
  padding-left: 0.2em;
  font-size: 0.8em;
}

.klaro .cookie-notice:not(.cookie-modal-notice) {
  background-color: #E2E2E2;
  z-index: 999;
  position: fixed;
  width: 100%;
  bottom: 0;
  right: 0;
}

@media (min-width: 1024px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    border-radius: 4px;
    border-radius: var(--border-radius, 4px);
    position: fixed;
    position: var(--notice-position, fixed);
    right: 20px;
    right: var(--notice-right, 20px);
    left: auto;
    left: var(--notice-left, auto);
    bottom: 20px;
    bottom: var(--notice-bottom, 20px);
    top: auto;
    top: var(--notice-top, auto);
    max-width: 400px;
    max-width: var(--notice-max-width, 400px);
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 0 rgba(0, 0, 0, 0.19);
  }
}
@media (max-width: 1023px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    border-style: none;
    border-radius: 0;
  }
}
.klaro .cookie-notice:not(.cookie-modal-notice).cn-embedded {
  position: relative;
  height: inherit;
  width: inherit;
  left: inherit;
  right: inherit;
  bottom: inherit;
  z-index: 0;
}

.klaro .cookie-notice:not(.cookie-modal-notice).cn-embedded .cn-body {
  padding-top: 0.5em;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
  margin-bottom: 0;
  margin-right: 0;
  bottom: 0;
  padding: 1em;
  padding-top: 0;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
  margin-bottom: 0.5em;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p.cn-changes {
  text-decoration: underline;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more {
  display: inline-block;
  flex-grow: 1;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
  display: inline-block;
  margin-top: -0.5em;
}

@media (max-width: 384px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
    width: 100%;
  }
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
  margin-top: 0.5em;
}

@media (max-width: 384px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
    width: calc(50% - 0.5em);
  }
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
  margin-top: -0.5em;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: right;
  align-items: baseline;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok a,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok div {
  margin-top: 0.5em;
}

.klaro .cookie-modal-notice {
  background-color: #E2E2E2;
  background-color: var(--dark1, #E2E2E2);
  color: #333333;
  color: var(--light1, #333333);
  z-index: 1001;
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 0 rgba(0, 0, 0, 0.19);
  width: 100%;
  max-height: 98%;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  position: fixed;
  overflow: auto;
  padding: 1em;
  padding-top: 0.2em;
}

@media (min-width: 400px) {
  .klaro .cookie-modal-notice {
    border-radius: 4px;
    border-radius: var(--border-radius, 4px);
    position: relative;
    margin: 0 auto;
    max-width: 400px;
    height: auto;
    width: auto;
  }
}
.klaro .cookie-modal-notice .cn-ok {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 1em;
}

.klaro .cookie-notice-hidden {
  display: none !important;
}

/*# sourceMappingURL=default.css.map */