/* --- FONTS ------------------------ */

@font-face {
  font-family: 'Fredoka Light';
  src: local(''), url('../fonts/Fredoka-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Fredoka SemiCondensed Light';
  src: local(''), url('../fonts/Fredoka_SemiCondensed-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Fredoka Regular';
  src: local(''), url('../fonts/Fredoka-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Fredoka Medium';
  src: local(''), url('../fonts/Fredoka-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Fredoka SemiBold';
  src: local(''), url('../fonts/Fredoka-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Font Awesome 6 Solid';
  font-style: normal;
  font-weight: 900;
  src: local(''), url('/libraries/fontawesome/webfonts/fa-solid-900.woff2') format('woff2');
}

/* ??? */
/*
@font-face {
  font-family: 'Fredoka Regular';
  src: local(''), url('../fonts/38CD11_3_0.ttf') format('truetype');
}

@font-face {
  font-family: 'Fredoka Medium';
  src: local(''), url('../fonts/38CD11_3_0.ttf') format('truetype');
}

@font-face {
  font-family: 'Fredoka SemiBold';
  src: local(''), url('../fonts/38CD11_3_0.ttf') format('truetype');
}
*/

@font-face {
  font-family: 'OpenSans Light'; /* 300 */
  src: local(''), url('../fonts/OpenSans-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'OpenSans Regular'; /* 400 */
  src: local(''), url('../fonts/OpenSans-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'OpenSans Medium'; /* 500 */
  src: local(''), url('../fonts/OpenSans-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'OpenSans SemiBold'; /* 600 */
  src: local(''), url('../fonts/OpenSans-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'OpenSans Bold'; /* 700 */
  src: local(''), url('../fonts/OpenSans-Bold.ttf') format('truetype');
}

/*
*/
:root {
  --font-text: Arial, sans-serif;
  --font-light: "Fredoka SemiCondensed Light", Arial, sans-serif; 
  --font-regular: "Fredoka Regular", Arial, sans-serif;
  --font-medium: "Fredoka Medium", Arial, sans-serif;
  --font-semibold: "Fredoka SemiBold", Arial, sans-serif;
}

/*
:root {
  --font-light: "OpenSans Light", Arial, sans-serif; 
  --font-regular: "OpenSans Regular", Arial, sans-serif;
  --font-medium: "OpenSans Medium", Arial, sans-serif;
  --font-semibold: "OpenSans SemiBold", Arial, sans-serif;
  --font-bold: "OpenSans Bold", Arial, sans-serif;
}
*/

:root {
  --font-size-roofline: 11pt;
  --font-size-text-normal: 13pt;
  --font-size-text-small: 11pt;
}

@media (min-width: 0px) and (max-width: 640px) {
  :root {
    --font-size-roofline: 10pt;
    --font-size-text-normal: 12pt;
    --font-size-text-small: 10pt;
  }
}

/* --- COLOR ------------------------ */

:root {
  --color-background: #fff;
  --color-problems: rgb(232,88,88);
  --color-solutions: rgb(107,216,250);
  --color-lightgreen:    rgba(186,250,107,1);  /* #BAFA6B */
  --color-lightgreen-op: rgba(186,250,107,0.2);
  --color-lightgreen-op5: rgba(186,250,107,0.5);
  --color-yellow:    rgba(251,237,33,1);  /* #FBED21 */
  --color-yellow-op: rgba(251,237,33,0.2);
  --color-yellow-op5: rgba(251,237,33,0.5);
  --color-purple:    rgba(210,151,249,1); /* #D297F9 */
  --color-purple-op: rgba(210,151,249,0.2);
  --color-purple-op5: rgba(210,151,249,0.5);
  --color-orange:    rgba(244,181,72,1); /* #F4B548 */
  --color-orange-op: rgba(244,181,72,0.2);
  --color-orange-op5: rgba(244,181,72,0.5);
  --color-red:    rgba(255,123,139,1); /* #FF7B8B */
  --color-red-op: rgba(255,123,139,0.2);
  --color-red-op5: rgba(255,123,139,0.5);
  --color-green:    rgba(122, 198, 186, 1); /* #7AC6BA */
  --color-green-op: rgba(122, 198, 186, 0.2);
  --color-green-op5: rgba(122, 198, 186, 0.5);
  --color-blue:  rgba(153, 248, 251, 1); /*99F8FB */ 
  --color-blue-op: rgba(153, 248, 251, 0.19);
  --color-blue-op5: rgba(153, 248, 251, 0.5);
  --color-purple-zero: rgba(210,151,249,0);
  --color-dark-green: rgba(41, 64, 28, 1); /* #29401C */
  --color-dark-green-op: rgba(41, 64, 28, 0.6); /* #29401C */
  --color-text: var(--color-dark-green);
  --color-text-inactive: var(--color-dark-green-op);
  --color-text-menu2: var(--color-dark-green-op);
  --color-mobilemenu-back: rgba(216,255,128);

  --color-products-communication: rgba(186,250,107,0.5); /* lightgreen */
  --color-products-plan: rgba(251,237,33,0.5); /* yellow */
  --color-products-all_in_one: rgba(153, 248, 251, 0.5); /* blue */
  --color-products-bundles: rgba(210,151,249,0.5); /* purple */
}

/* --- BASE SETTINGS -------- */

*, ::before, ::after {
  margin: 0px;
  padding: 0px;
}

.placeit-invisible {
  display: none !important;
}

.placeit-body {
  box-sizing: border-box;
  font-family: var(--font-medium);
  font-size: 15pt;
  color: var(--color-text);
  max-width: 1300px;
  margin: auto;
}

.placeit-body h1 {
  font-family: var(--font-medium);
  font-size: 38pt;
}

.placeit-body h2 {
  font-family: var(--font-medium);
  font-size: 27pt;
  padding-bottom: 12px;
}

.placeit-body h3 {
  font-family: var(--font-medium);
  font-size: 18pt;
}

.placeit-body h4 {
  font-family: var(--font-medium);
  font-size: 15pt;
}

.placeit-body h5 {
  font-family: var(--font-regular);
  font-size: 12pt;
}

.placeit-body p {
  font-family: var(--font-text);
  font-size: var(--font-size-text-normal);
  /* line-height: 15pt; */
  line-height: 1.2;
}

b,strong {
  /* font-family: var(--font-medium); */
}

img, video {
  display: block;
  max-width: 100%;
  height: auto;
}
  

@media (min-width: 641px) and (max-width: 1024px) {
  .placeit-body h1 { font-size: 30pt; }
  .placeit-body h2 { font-size: 22pt; }
  .placeit-body h3 { font-size: 20pt; }
  .placeit-body h4 { font-size: 16pt; }
  .placeit-body h5 { font-size: 12pt; }
}

@media (min-width: 0px) and (max-width: 640px) {
  .placeit-body h1 { font-size: 22pt; }
  .placeit-body h2 { font-size: 20pt; }
  .placeit-body h3 { font-size: 18pt; }
  .placeit-body h4 { font-size: 13pt; }
  .placeit-body h5 { font-size: 9pt; }
  html, body {
    overflow-x: hidden;
  }
  .placeit-header-language-mobile ul.links li a[hreflang="en"] {
    font-size: 0pt;
  }

  .placeit-header-language-mobile ul.links li a[hreflang="de"] {
    font-size: 0pt;
  }
}

.placeit-debug {
  background-color: red;
  font-size: 15pt;
}

/* ---- Editor Styles ----- */

.placeit-text-greenback {
  background-color: var(--color-lightgreen);
  border-radius: 20px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 12px;
  padding-right: 12px;
  margin-left: -10px;
  margin-right: -10px;
  font-style: normal;
}

/* ---- HEADER -------- */

header {
  max-width: 1300px;
  width: 100%;
  height: 79px;
  max-height: 79px;
  position: fixed;
  background: var(--color-background);
  z-index: 10;
}

.placeit-header-left {
  float: left;
}

.placeit-header-right {
  float: right;
}

.placeit-header-entry {
  padding-top: 36px;
  float: left;
}

.placeit-header-logo {
  padding-left: 99px;
  padding-top: 25px;
}

.placeit-header-navigation,.placeit-header-navigation-mobile {
  line-height: 0.7;
}

.placeit-header-navigation .menu-item, .placeit-header-navigation-mobile .menu-item {
  display: block;
  padding-top: unset;
  float: left;
  margin-left: 30px;
}

.placeit-header-navigation ul.menu > li > ul.menu, .placeit-header-navigation-mobile ul.menu > li > ul.menu {
  position: absolute;
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  box-shadow: 0px 0px 3px grey;
  background-color: #FFF;
  margin-left: -30px;
  margin-top: 4px;
  padding-bottom: 4px;
  max-width: 500px;
}

.placeit-header-navigation ul.menu li ul.menu li a, .placeit-header-navigation-mobile ul.menu li ul.menu li a {
  color: var(--color-text-menu2);
}

.placeit-header-navigation .menu-item > ul, .placeit-header-navigation-mobile .menu-item > ul {
  margin-left: 0px;
}

.placeit-header-navigation ul li ul li.menu-item, .placeit-header-navigation-mobile ul li ul li.menu-item {
  flex: 40%;
  padding-top: 5px;
  padding-bottom: 5px;
}

.placeit-header-language {
  margin-right:70px;
  line-height: 0.9;
}

.placeit-header-language-mobile {
  margin-left:120px;
  line-height: 0.6;
}

.placeit-header-language ul, .placeit-header-language-mobile ul {
  list-style-type: none
}

.placeit-header-language li, .placeit-header-language-mobile li {
  color: lightgrey;
  float: left;
  padding-left: 5px;
}

.placeit-header-language ul.links li a, .placeit-header-language-mobile ul.links li a {
  font-family: var(--font-medium);
  font-size: 10.5pt;
  text-decoration: unset;
  color: lightgrey;
}

.placeit-header-language ul.links li:nth-child(1):after, .placeit-header-language-mobile ul.links li:nth-child(1):after {
  content:"|";
  padding-left: 5px;
}

[data-lang=de] [hreflang=de] a,
[data-lang=en] [hreflang=en] a,
.placeit-header-language ul.links li.is-active a,
.placeit-header-language-mobile ul.links li.is-active a {
  color: var(--color-text);
}

.placeit-header-nav2 {
  margin-right:70px;
}

.placeit-header-nav3 {
  margin-right: 10px;
}

.placeit-header-menuright,
.placeit-header-menumobile {
  display: none;
  cursor: pointer;
}

.placeit-header-language-mobile {
  display: none;
  cursor: pointer;
}

.placeit-header-navigation-mobile {
  display: none;
}

/* .placeit-button1, */
.placeit-button1 a {
  background-color: var(--color-lightgreen);
  border-radius: 20px;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0;
  line-height: 0;
}


.placeit-link-button a {
  background-color: var(--color-lightgreen);
  border-radius: 20px;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0;
  line-height: 0;
  text-decoration: none;
  color: var(--color-text);
  font-family: var(--font-semibold);
}

.placeit-header-navigation .menu-item span, .placeit-header-navigation-mobile .menu-item span,
.placeit-header-navigation a,.placeit-header-navigation-mobile a,.placeit-header-nav2 a, .placeit-header-nav3 a {
  font-family: var(--font-medium);
  font-size: 10.5pt;
  color: var(--color-text);
  text-decoration: unset;
}

.placeit-headerelement {
  padding-right: 10px;
}

@media (min-width: 641px) and (max-width: 1024px) {
  .placeit-header-right {
    position: absolute;
    right: 0;
    margin-top: 35px;
    margin-right: 10px;
    display: none;
    box-shadow: 0px 0px 3px grey;
    background-color: #FFF;
    margin-left: -30px;
    max-width: 500px;
    padding-bottom: 10px;
  }
  .placeit-header-left .placeit-header-navigation-mobile {
    right: 0;
  }
  .placeit-header-logo {
    padding-left: 20px;
  }
  .placeit-header-navigation .menu-item {
    margin-left: 20px;
  }
  .placeit-header-language {
    margin-right:40px;
  }
  .placeit-header-nav2 {
    margin-right:40px;
  }
  .placeit-header-language ul {
    padding-left: 20px;
  }
  .placeit-header-nav3 {
    margin-right: 20px;
  }
  .placeit-header-menuright {
    font: var(--fa-font-solid);
    position: absolute;
    right: 32px;
    padding-top: 40px;
    display: block;
  }
}

@media (min-width: 0px) and (max-width: 640px){
  .placeit-header-right {
    position: absolute;
    right: 0;
    margin-top: 35px;
    display: none;
    box-shadow: 0px 0px 3px grey;
    background-color: #FFF;
    margin-left: -30px;
    max-width: 500px;
  }
  .placeit-header-left .placeit-header-navigation-mobile {
    position: absolute;
    right: 0;
    display: none;
    box-shadow: -2px 2px 5px grey;
    background-color: #FFF;
    padding-top: 30px;
    padding-right: 40px;
    padding-bottom: 30px;
    margin-top: 20px;
    margin-right: 10px;
    background-color: var(--color-mobilemenu-back);
  }
  .placeit-header-left .placeit-header-navigation-mobile ul a {
    font-size: 13pt;
    line-height: 1.8em;
  }
  .placeit-header-logo {
    padding-left: 20px;
  }
  .placeit-header-navigation-mobile {
    display: unset;
  }
  .placeit-header-navigation {
    display: none;
  }
  .placeit-header-navigation-mobile .menu-item {
    float: unset;
  }
  .placeit-header-menumobile {
    font: var(--fa-font-solid);
    position: absolute;
    right: 20px;
    padding-top: 31px;
    display: block;
  }
  .placeit-header-language-mobile {
    display: block;
  }
}


/* ---- CONTENT ---- */

section.placeit-main {
  padding-top: 80px;
  padding-bottom: 20px;
}

section.placeit-main .layout {
  padding-left: 123px;
}

@media (min-width: 0px) and (max-width: 640px) {
  section.placeit-main .layout {
    padding-left: 33px;
    padding-right: 33px;
  }
  section.placeit-main .layout.placeit-shop-tab {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  section.placeit-main .layout {
    padding-left: 43px;
    padding-right: 33px;
  }
}

/* ---- SUB CONTENT ---- */
/* Call To Action */

/*
.placeit-calltoaction -> .placeit-subcontent 
*/
.placeit-subcontent {
  background-image: url("/sites/default/files/2023-07/calltoaction-back.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
  margin-top: 100px;
  text-align: center;
}

.placeit-subcontent p {
  max-width: 33%;
  padding-top:10px;
  padding-bottom:30px;
  margin: 0 auto;
  line-height: 30pt;
}

.placeit-subcontent p a {
  border: unset;
  background-color: var(--color-lightgreen);
  color: var(--color-text);
  border-radius: 20px;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 20px;
  padding-right: 20px;
  text-decoration: none;
  font-family: var(--font-semibold);
  font-size: 13pt;
}

.placeit-subcontent p:first-child {
  font-family: var(--font-medium);
  font-size: 27pt;
  max-width: 644px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
}

@media (min-width: 0px) and (max-width: 1024px) {
  .placeit-subcontent p {
    max-width: 90%;
   }
}
@media (min-width: 0px) and (max-width: 640px) {
  .placeit-subcontent {
    padding-bottom: 10px;
    padding-top: unset;
  }
  .placeit-subcontent a {
    font-size: 10.5pt;
  }
  .placeit-subcontent p {
    padding-top: 14px;
    max-width: 100%;
    margin-left:0;
    text-align: center;
    line-height: 1.5;
  }
  .placeit-subcontent h2 {
    max-width: 88%;
  }
  .placeit-subcontent p:first-child {
    margin-bottom: unset;
    font-size: 16pt;
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 30px;
    padding-bottom: unset;
  }
}


/* ---- SUB CONTENT ---- */

/*---- FOOTER ---------- */

footer {
  font-size: 12pt;
  padding-left: 139px;
  color: var(--color-lightgreen);
  background-color: var(--color-dark-green); 
  font-family: var(--font-text); 
  font-size: var(--font-size-text-small); 
}

footer a {
  color: var(--color-lightgreen);
  text-decoration: unset;
}

.placeit-footer-address1, .placeit-footer-socialmedia {
  float: left;
  width: 66%;
}

.placeit-footer-line1 {
  padding-top: 50px;
}

.placeit-footer-line2 {
  padding-top: 20px;
}

.placeit-footer-line2 p {
}

.placeit-footer-line3 {
  padding-top: 70px;
  padding-bottom: 50px;
}

.placeit-footer-logo img {
  width:82px;
  height:auto;
}

.placeit-footer-socialmedia {
  font-size: 20pt;
}

.placeit-footer-socialmedia svg {
  padding-right: 26px;
}

.placeit-footer-socialmedia svg.ext {
  display: none;
}

.placeit-footer-menu li {
  display: inline;
  margin: 0px;
  margin-right: 20px;
}

.placeit-footer-menu ul.menu a.is-active {
  color: #fff;
}

.placeit-spacebottom {
  height: 50px;
  background-color: var(--color-background);
}


@media (min-width: 641px) and (max-width: 1024px) {
}

@media (min-width: 641px) and (max-width: 1024px) {
  footer {
    padding-left: 100px;
  }
  .placeit-footer-address1, .placeit-footer-socialmedia {
    width: 50%;
  }
}

@media (min-width: 0px) and (max-width: 640px) {
  footer {
    padding-left: 50px;
  }
  .placeit-footer-address1, .placeit-footer-socialmedia {
    width: 100%;
    float: unset;
  }
  .placeit-footer-line1 {
    padding-top: 38px;
  }
  .placeit-footer-line2 p {
    font-size: var(--font-size-text-small);
  }
  .placeit-footer-line3 {
    padding-top: 20px;
    padding-bottom: 30px;
  }
  .placeit-footer-menu ul.menu {
    margin-left: 0px;
    margin-top: 20px;
  }
  .placeit-footer-menu ul.menu li {
    margin-left: 0px;
    padding-right: 10px;
    font-size: 0.8em;
  }
  .placeit-spacebottom {
    height: 0px;
  }
  .placeit-footer-address1 .region-footer-address1 {
	  padding-bottom: 10px;
  }
}


/* Pager */

nav.pager {
  font-family: var(--font-text);
  font-size: var(--font-size-text-normal);
  font-weight: bold;
}

nav.pager li.is-active a {
  text-decoration: underline;
}


nav.pager a {
  color: var(--color-text);
  text-decoration: none;
}

@media (min-width: 0px) and (max-width: 640px) {
  nav.pager {
    font-size: var(--font-size-text-small);
  }
  nav.pager li.pager__item--first, nav.pager li.pager__item--previous, nav.pager li.pager__item--next, nav.pager li.pager__item--last {
    font-size: 0pt;
  }
  nav.pager li.pager__item--first a::before {
    font-size: var(--font-size-text-small);
    content: "<<";
    padding-right: 5px;
    padding-left: 5px;
  }
  nav.pager li.pager__item--previous a::before {
    font-size: var(--font-size-text-small);
    content: "<";
    padding-right: 5px;
    padding-left: 5px;
  }
  nav.pager li.pager__item--next a::before {
    font-size: var(--font-size-text-small);
    content: ">";
    padding-right: 5px;
    padding-left: 5px;
  }
  nav.pager li.pager__item--last a::before {
    font-size: var(--font-size-text-small);
    content: ">>";
    padding-right: 5px;
    padding-left: 5px;
  }
}

.placeit-header-logo img {
  height: 45px;
  width: auto;
}

.placeit-product-asdf { }

.placeit-product-asdf .view-content {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 20px;
}

.placeit-product-asdf .views-row {
  border: 1px solid lightgreen;
  width: 20vw;
  padding: 20px;
  margin-top: 20px;
  box-shadow: 1px 1px 4px grey;
}

.placeit-header-language ul.links li a[hreflang="en"] {
  font-size: 0pt;
}

.placeit-header-language ul.links li a[hreflang="de"] {
  font-size: 0pt;
}

.language-link[hreflang="en"]:after {
  font-size: 10.5pt;
  content: "EN";
}

.language-link[hreflang="de"]:after {
  font-size: 10.5pt;
  content: "DE";
}

ul.menu a.is-active {
	text-decoration: underline;
}