/* ==========================================================================
   1. FONTS (@font-face - Single Line Format)
   ========================================================================== */
@font-face {font-display:swap; font-family:'Roboto'; font-style:normal; font-weight:300; src:url(../../fonts/Foboto/roboto-v49-latin-300.woff2) format("woff2") url(../../fonts/Foboto/roboto-v49-latin-300.ttf) format("truetype");}
@font-face {font-display:swap; font-family:'Roboto'; font-style:normal; font-weight:400; src:url(../../fonts/Foboto/roboto-v49-latin-regular.woff2) format("woff2") url(../../fonts/Roboto/roboto-v49-latin-regular.ttf) format("truetype");}
@font-face {font-display:swap; font-family:'Roboto'; font-style:normal; font-weight:600; src:url(../../fonts/Roboto/roboto-v49-latin-600.woff2) format("woff2") url(../../fonts/Roboto/roboto-v49-latin-600.ttf) format("truetype");}
@font-face {font-display:swap; font-family:'Roboto'; font-style:normal; font-weight:700; src:url(../../fonts/Roboto/roboto-v49-latin-700.woff2) format("woff2") url(../../fonts/Roboto/roboto-v49-latin-700.ttf) format("truetype");}
@font-face {font-display:swap; font-family:'Roboto'; font-style:normal; font-weight:900; src:url(../../fonts/Roboto/roboto-v49-latin-900.woff2) format("woff2") url(../../fonts/Roboto/roboto-v49-latin-900.ttf) format("truetype");}

/* ==========================================================================
   2. BASE RESETS & ROOT STYLE
   ========================================================================== */
*, ::before, ::after {
  box-sizing: border-box;
}

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span, strong, sub, sup, tt, var, legend, fieldset {
  margin: 0;
  padding: 0;
}

html, body {
  font-family: 'Noto Sans', sans-serif;
  font-size: 18px;
  font-weight: 300;
  height: 100%;
  width: 100%;
  color: #333333;
  background-size: cover;
background: #282d30;
}

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

a {
  color: #26a105;
  text-decoration: none;
  font-weight: 400;
}

a:hover {
  color: #333333;
}

table {
  margin-top: 20px;
  font-weight: 400;
  width: 100%;
}

td {
  padding-bottom: 5px;
  vertical-align: top;
  width: 50%;
}

td:nth-child(even) {
  color: #333333;
  font-weight: 700;
  text-align: right;
}

/* ==========================================================================
   3. TYPOGRAPHY & HEADLINES
   ========================================================================== */
h1 {
  color: #26a105;
  font-size: 34px;
  font-weight: 700;
  padding-bottom: 10px;
}

h2 {
  color: #333333;
  font-size: 28px;
  font-weight: 600;
  padding-bottom: 10px;
}

h3 {
  color: #333333;
  font-size: 28px;
  font-weight: 600;
  padding-bottom: 10px;
}

h4 {
  color: #333333;
  font-size: 28px;
  font-weight: 600;
  padding-bottom: 10px;
}

h5 { font-size: 20px;font-weight:600 }
h6 { font-size: .875rem; }

p, ul {
  line-height: 1.6;
}

strong, b {
  font-weight: 600;
}

.headline-flexbox {
  margin: 20px 0 10px;
  padding: 1rem;
}

.font-light { font-weight: 300; }
.font-regular { font-weight: 400; }
.font-heavy { font-weight: 700; }

.font-grey {
  color: #aeb1b2;
  font-size: 1.1em;
  font-weight: 300;
  margin-bottom: 10px;
}

.text-header {
  display: inline-block;
  font-size: .9em;
  line-height: 30px;
  margin-left: 5%;
  min-height: 30px;
}

/* Text alignments */
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
.justify { text-align: justify; }
.slick-slide .card__content .center p { text-align: left !important; }

/* ==========================================================================
   4. LAYOUT CONTAINERS & STRUCTURE
   ========================================================================== */
.site-wrapper {
  margin: 0 auto;
  max-width: 2500px;
  position: relative;
  width: 100%;
  z-index: 0;
}

.header, .main, .footer {
  width: 100%;
}

.header {
  background: #282d30;
}

.main {
  display: inline-block;
  margin-top: 120px;
}

.footer {
  font-size: 16px;
}

.container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 100%;
}

.calc-container {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}

.container-absolute {
  background: #282d30;
  fixed: left 0 right 0;
  margin: 0 auto;
  max-width: 2500px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
}

.container-top, .slider-container {
  margin: 0 auto;
  max-width:1600px;
  position: relative;
  width: 100%;
}

.slider-container {
  height: 100%;
}

/* Width utilities */
.cards__item, .w-16, .w-20, .w-20-middle, .w-25, .w-33, .w-33-middle, .w-50, .w-50-middle, .w-66, .w-75 { width: 100%; }
.w-25-counter { width: 33.3333333333%; }
.w-logo { width: 250px; margin: 0 auto; }
.w-100 { padding: 0 1rem; }
.col-3 .sidebar-big { width: 21%; }

/* Spacing and padding utilities */
.pd-20 { padding: 20px; }
.pt-10 { padding-top: 10px; }
.pt-20 { padding-top: 20px; }
.pt-30 { padding-top: 30px; }
.pt-50 { padding-top: 50px; }
.pt-70 { padding-top: 70px; }
.pt-190 { padding-top: 90px; }
.pb-10 { padding-bottom: 10px; }
.pb-20 { padding-bottom: 20px; }
.pb-30 { padding-bottom: 30px; }
.pb-50 { padding-bottom: 50px; }
.pb-70 { padding-bottom: 70px !important; }

/* ==========================================================================
   5. THEME SCHEMES & BACKGROUND BACKGROUNDS
   ========================================================================== */
.white, .trans-all {
  background: #fff;
  margin-bottom: -1px;
  position: relative;
}

.white-trans {
  background: rgba(255, 255, 255, 0.8);
  position: relative;
}

.darkgrey {
  background: #26a105;
  margin-bottom: -1px;
  position: relative;
}

.darkgrey h1 {
  color: #fff !important;
  font-size: 58px;
  font-weight: 600;
  padding-bottom: 0;
}

.grey {
  background: #eff3f4;
  margin-bottom: -1px;
  position: relative;
}

.darkgrey-footer {
  background: #d5dfe5;
  position: relative;
}

.darkgrey-verlauf {
  background: linear-gradient(#ccc 50%, #fff 50%);
  position: relative;
}

.darkgrey-red {
  background: linear-gradient(#333333 450px, #fff 0%);
  position: relative;
}

.darkgrey-red h2 {
  color: #fff !important;
  font-size: 58px;
  font-weight: 600;
  padding-bottom: 0;
}

.darkgrey-trans {
  background: rgba(51, 51, 51, 0.8);
  position: relative;
}

.darkgrey-content {
  background: #333333;
}

.orange {
  background: #26a105;
  box-shadow: 0 0 0 5px #fff;
}

.green {
  background: #495256;
  box-shadow: 0 0 0 5px #fff;
}

/* Contextual theme background classes */
.bg-blue { background: #26a105; color: #fff !important; border-radius: 20px; }
.bg-grey { background: #333333; color: #fff !important; border-radius: 20px; }
.bg-border { background: #202426; border: 1px solid #454f54; border-radius: 20px;box-shadow: 5px 5px 0px 0px #454f54;}
.bg-orange { background: #fff; border: 1px solid #495256; border-radius: 20px; }
.bg-white, .bg-white-round { background: #fff; border-radius: 20px; }
.bg-white-round { background: none; }
.bg-lightgrey { background: #eff3f4; color: #333333 !important; border-radius: 20px; }
.bg-white-arrow { background: #fff; border: 1px solid #ccc; border-radius: 20px; position: relative; }

.bg-darkgrey {
  background-image: url(bg/grey.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0;
  color: #fff !important;
}

.bg-blue-arrow {
  background: rgba(51, 51, 51, 1);
  color: #fff;
  position: relative;
}

/* Card typography inside colored areas */
.bg-blue .card__content, .bg-blue-arrow .card__content, .bg-grey .card__content { color: #fff !important; }
.bg-blue h3, .bg-white h3, .bg-white-round h3, .bg-white-arrow h3,
.bg-blue h2, .bg-white h2, .bg-white-round h2 { margin: 0; padding: 0; }

.bg-blue h2, .bg-blue-arrow h2, .bg-blue h3, .bg-blue-arrow h3, .bg-blue h1, .bg-blue-arrow h1, .bg-blue h4, .bg-blue-arrow h4, .bg-white-round h2, .bg-grey h2, .bg-grey h3 {
  color: #fff;
  font-size: 32px;
  font-weight: 400;
  padding-bottom: 10px;
}

.bg-white h2, .bg-white-arrow h2, .bg-white h3, .bg-white-arrow h3, .bg-white h1, .bg-white-arrow h1, .bg-white h4, .bg-white-arrow h4, .bg-lightgrey h2, .bg-lightgrey h3 {
  font-size: 28px;
  font-weight: 600;
  padding-bottom: 10px;
}

.bg-blue h3 { padding: 0 0 5px; color: #fff; }
.bg-white p, .bg-blue p, .bg-white-arrow p, .bg-blue-arrow p, .bg-lightgrey p { margin: 10px 0 0; }
.bg-blue ul, .bg-white ul { margin: 0; padding: 0; }

/* Text foreground utilities */
.t-white, .text-white { color: #fff; }
.text-orange { color: #495256; }
.text-green { color: #26a105; }
.text-yellow { color: #f2051a; }

/* ==========================================================================
   6. NAVIGATION & HEADER SYSTEM
   ========================================================================== */
.menu-container {
  height: 70px;
}

.nav-logo {
  margin: 40px auto 0;
  max-width: 200px;
  padding: 0 10px;
}

.logo {
  max-width: fit-content;
}

.logo img {
  max-height: 130px;
  padding: 15px 0 15px 1rem;
  transition: all .5s ease-out;
}

.container-sticky {
  background: #282d30;
  left: 0;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

.sticky {
  background: #282d30;
  left: 0;
  margin: 0 auto;
  position: fixed;
  right: 0;
  top: 0;
  transition: all .5s ease-out;
  z-index: 4;
}

.sticky .logo img {
  max-height: 100px;
  padding: 15px 0 15px 1rem;
  transition: all .5s ease-out;
}

.sticky .navbar-container {
  bottom: 10px;
  transition: all .5s ease-out;
}

.sticky .social-bar-left {
  bottom: 10px;
  transition: all .5s ease-out;
}

.nav-container{position:absolute;z-index:10;right:1rem;bottom:0;}
.toggle,[id^=drop]{display:none}
nav{margin:0;padding:0}
nav:after{content:"";display:table;clear:both}
nav ul{padding:0;margin:0;list-style:none;font-weight:400;background: none}
nav ul li{margin:0;display:inline-block;}
nav ul li a{display:block;color:#000;text-decoration:none;font-weight:400;font-size:20px;padding: 5px 10px;}
nav a:hover{color:#495256;text-decoration: underline 2px solid;text-underline-offset: 3px;}
nav ul ul{display:none;position:absolute;}
nav ul li:hover > ul{display:inherit}
nav ul ul li{width:300px;float:none;display:list-item;position:relative;background:transparent;color:#fff;margin-left:0px}
nav ul ul li a{color:#000;background:#f1f1f1;margin-right:0;line-height:unset;height:auto;font-weight:600;}
nav ul ul li a:hover{background:#fff;box-shadow:none}
nav ul li.parent.active-parent.active a,nav ul li.active.parent a,nav ul li.active a{color:#495256;background:#fff;text-decoration: underline 2px solid;text-underline-offset: 3px;}
nav ul li.parent.active-parent.active ul li a,nav ul li.active.parent ul li a{color:#000;background: #f1f1f1;box-shadow:none;text-decoration: none;}
nav ul li.parent.active-parent.active ul li a:hover,nav ul li.active.parent ul li a:hover,nav ul ul li a:hover{color:#000;background:#f1f1f1;text-decoration: underline 2px solid;text-underline-offset: 3px;}
nav ul li.parent.active-parent.active ul li.active a{color:#495256;background:#f1f1f1;text-decoration: underline 2px solid;text-underline-offset: 3px;}
nav ul ul li:last-child{border-bottom:none}
nav ul ul ul li{position:relative;top:-50px;left:280px}
nav li > a:before{font-family:'Font Awesome 5 Free';font-weight:900;content:"\f107";color:#000;padding-right:8px;display: inline-block;display:none}
nav li > a:hover:before{color:#000}
nav ul li.parent.active-parent.active a:before,nav ul li.active a:before{color:#495256;}
nav li > label:hover::before{color:#000}
nav li > label::after{font-family:'Font Awesome 5 Free';font-weight:900;content:"\f107";color:#000;position:absolute;right:1rem;display:none}
nav li:nth-child(8) a{margin-right:0}
nav li > a:only-child:before{content:'';padding-right:0}
nav ul ul li > a:only-child:after{content:''}
@media all and (max-width : 1300px) {
.menu{width:100%;background:none;position:absolute;top:0px;box-shadow:0 10px 10px -10px rgba(0,0,0,0.7);min-height:100%;overflow-y:scroll;-webkit-overflow-scrolling:touch}
.nav-container{width:100%;right:0rem}
nav{margin:0}
#nav-toggle{width:40px;height:26px;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out;cursor:pointer;position:absolute;bottom:10px;right:1rem}
#nav-toggle:hover{background:none;color:#7cd5ff}
#nav-toggle span{display:block;position:absolute;height:4px;width:100%;background:#000;border-radius:9px;opacity:1;left:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out}
#nav-toggle span:nth-child(1){top:0}
#nav-toggle span:nth-child(2){top:10px}
#nav-toggle span:nth-child(3){top:20px}
#nav-toggle.open span:nth-child(1){top:12px;-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg)}
#nav-toggle.open span:nth-child(2){opacity:0;left:-60px}
#nav-toggle.open span:nth-child(3){top:12px;-webkit-transform:rotate(-135deg);-moz-transform:rotate(-135deg);-o-transform:rotate(-135deg);transform:rotate(-135deg)}
.toggle + a,.menu{display:none}
.toggle{display:block;transition:all 0ms ease-in-out;font-weight:400;cursor:pointer;background:none;color:#000}
.toggle:hover{background:#fff;color:#000;text-decoration: underline 2px solid;text-underline-offset: 3px;}
[id^=drop]:checked + ul{display:block;}
nav ul li{width:100%;padding:0;background:#fff}
nav ul ul ul a{padding:0 80px}
nav a{transition:all 0ms ease-out}
nav ul li a{color:#000}
nav a:hover,nav ul ul ul a,nav ul ul li a.active{background:#fff;color:#495256;box-shadow:none;}
nav ul ul{float:none;position:static;color:#fff}
nav ul ul li:hover > ul,nav ul li:hover > ul{display:none}
nav ul ul li.active a{background:#0b8e2d;color:#fff;box-shadow:none}
nav ul ul li{display:block;width:100%;padding:0;border-bottom:none}
nav ul li a,nav ul li label{line-height:unset;height:auto;padding:10px 0px 10px 1rem;margin-left:0px;background:#fff}
nav ul li ul li a{line-height:unset;height:auto;margin-left:0px;background:#f1f1f1}
nav ul ul ul li{position:static}
nav li > a:after{content:''}
nav ul ul li a{background:#fff}
nav ul ul li a:hover{color:#000;}
nav ul li.parent.active-parent.active{background:#fff;color:#495256;box-shadow:none;cursor:pointer;}
nav ul li.parent.active-parent.active .toggle,nav ul li.active a{background:#fff;color:#495256;box-shadow:none;cursor:pointer;text-decoration: underline 2px solid;text-underline-offset: 3px;}
nav ul li.parent.active-parent.active ul li a,nav ul li.active.parent ul li a{background:#f1f1f1;color:#000;}
nav ul li.parent.active-parent.active ul li a:hover,nav ul li.active.parent ul li a:hover,nav ul ul li a:hover{color:#000;}
nav ul li.parent.active-parent.active ul li.active a{}
nav ul li.parent.active-parent.active > label::after{transform:rotate(90deg);color:#000;background:#fff;}
nav li > label:hover::after{color:#000;}
.on label{color:#000;background:#fff}
.on label::after{color:#000;transform:rotate(180deg)}
}

/* Service Menu */
.service {
  display: inline-block;
}

.service ul {
  list-style-type: none;
}

.service li {
  display: inline-block;
  font-size: 1em;
  font-weight: 300;
  margin: 0 20px 0 0;
  text-align: center;
  text-decoration: none;
  text-transform: none;
}

.service li a {
  background: #fff;
  color: #4a4a49;
  padding: 5px;
}

.service li a:hover {
  color: #05b5ec;
}

/* Sub-Navigation (Childnav) */
.childnav ul {
  background: #fff;
  list-style: none;
}

.childnav li {
  cursor: pointer;
  font-weight: 300;
  list-style: none;
  margin: 0;
}

.childnav li a {
  color: #4a4a49;
  display: inline-block;
  line-height: 40px;
  padding-left: 4%;
  position: relative;
  width: 96%;
}

.childnav li a::after {
  content: "\f054";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  line-height: 40px;
  position: absolute;
  right: 20px;
}

.childnav li a:hover {
  background: #4a4a49;
  color: #fff;
}

/* Metamenu */
ul.metamenu {
  margin: 0;
  padding: 0;
}

.metamenu li {
  line-height: 1.4;
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0;
}

.metamenu li a, .footer a {
  color: #26a105;
  font-weight: 300;
  text-decoration: none;
}

.metamenu li a:hover, .footer a:hover {
  color: #495256;
}

.metamenu li.active a {
  color: #495256;
}

/* ==========================================================================
   7. BUTTONS & UI INTERACTION
   ========================================================================== */
.btn {
  background-color: rgba(228, 232, 234, 1);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
  padding: .5rem;
}

.btn--block {
  display: block;
  width: 100%;
}

/* Master styling generic action button wrappers */
.button-phone, .button-room, .button-red, .button-user, .button-price, .button-archiv, .button-checked, .button-calendar, .button-mail, .button-down, .show-back a, .button-mail-white, .button-phone-white, .button-mobile {
  background: #26a105;
  border: 1px solid #26a105;
  border-radius: 30px;
  color: #fff;
  display: inline-block;
  font-weight: 400;
  margin: 5px;
  padding: .7rem 1rem;
  transition: all .3s;
  width:fit-content
}

.button-mail-white, .button-phone-white {
  background: #fff;
  border: 1px solid #fff;
  color: #333333;
}

.button-mail-white:hover, .button-phone-white:hover {
  background: none;
  border: 1px solid #fff;
  color: #fff;
}

.button-calendar{  background: #495256;
  border: 1px solid #495256;}

.button-phone:hover, .button-room:hover, .button-red:hover, .button-user:hover, .button-price:hover, .button-archiv:hover, .button-checked:hover, .button-calendar:hover, .button-mail:hover, .button-down:hover, .show-back a:hover, .button-mobile:hover, .button-red.active {
  background: #fff;
  border: 1px solid #26a105;
  color: #26a105;
}

.button-calendar:hover{  color: #495256;
  border: 1px solid #495256;background: #fff;}

.card__button {
  background: #26a105;
  border: 1px solid #26a105;
  border-radius: 30px;
  color: #fff;
  display: inline-block;
  font-weight: 400;
  margin: 0 0 1rem 1rem;
  padding: .5rem 1rem;
  transition: all .3s;
  width: fit-content;
}

/* Action button fontawesome icon references */
.button-sort:before { content: "\f0dc"; padding-right: 10px; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
.button-down:before { content: "\f019"; padding-right: 10px; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
.button-mail:before, .button-mail-white:before { content: "\f0e0"; padding-right: 10px; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
.button-calendar:before { content: "\f004"; padding-right: 10px; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
.button-checked:before { content: "\f48b"; padding-right: 10px; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
.button-archiv:before { content: "\f4ff"; padding-right: 10px; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
.button-phone:before, .button-phone-white:before { content: "\f095"; padding-right: 10px; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
.button-room:before { content: "\f08e"; padding-right: 10px; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
.button-user:before { content: "\f007"; padding-right: 10px; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
.button-price:before { content: "\f500"; padding-right: 10px; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
.button-red:before, .slider-red a:before { content: "\f138"; padding-right: 10px; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
.card__button:before { content: "\f138"; padding-right: 5px; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
.show-back a::before { content: "\f137"; margin-right: 5px; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
.button-mobile:before { content: "\f3ce"; padding-right: 10px; font-family: 'Font Awesome 5 Free'; font-weight: 900; }

.button-sort, .btn-sort {
  background: #fff;
  border: none;
  color: #454545;
  display: inline-block;
  font-weight: 300;
  margin-top: 0;
  padding: .5rem 1rem;
  transition: all .3s;
}

.btn-sort { margin: 5px 0; cursor: pointer; }
a.btn-sort { color: #333333; }

.button-sort:hover, a.btn-sort:hover {
  background: #ccc;
  color: #333333;
  font-weight: 300;
  padding: .5rem 1rem;
}

a.btn-sort:hover, .btn-sort.active {
  color: #fff;
  background-color: #333333;
}

#simpleBtn {
  cursor: pointer;
  margin-left: 1rem;
  margin-top: 20px;
  border-radius: 5px;
}

/* ==========================================================================
   8. CARD GRID & MODULE STYLES
   ========================================================================== */
.cards {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cards__item, .picture__item, .sort__item {
  display: flex;
  padding: 1rem;
  flex-grow:0;
}

.cards__item__light {
  display: flex;
}

.flex-padding {
  padding: 0px !important;
}

.card {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
}

.card__content, .card__image__link, .picture__card, .blog__image,.blog__image__next  {
  color: #333333;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1rem;
}

.blog__image{border-radius: 20px;}
.blog__image__next{border-radius: 20px;margin-bottom:20px !important}
.blog .show-back a{margin:0px; margin-left:1rem !important}
.blog-distance{margin-bottom:20px !important}
.cat-nav{margin-left:1rem;}
.cat-nav .button-red {margin: 10px 0px !important}
.cards__item__light .card__content {
  color: #333333;
  display: flex;
  flex-direction: unset;
  padding: 0.1rem;
}

.card__image {
  align-items: end;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  display: flex;
  filter: contrast(100%);
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: filter .5s cubic-bezier(.43, .41, .22, .91);
}

.card__image::before, .blog__image::before,.blog__image__next::before  {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.card__image__light {
  opacity: 1;
  position: relative;
  transition: all .2s;
}

.card__image__light:hover {
  opacity: .6;
}

.card__image__light img {
  border-radius: 5px;
}

.card__image__light::before {
  color: #fff;
  content: "\f00e";
  font-family: 'Font Awesome 5 Free';
  font-size: 16px;
  font-weight: 900;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  right: 20px;
  top: 20px;
  transition: all .3s;
}

.cards__item__light:hover .card__image__light::before {
  font-size: 16px;
  opacity: 1;
}

.bg-white-round .card__image {
  border-radius: 50%;
  height: 350px;
  margin: 20px auto auto;
  width: 350px;
}

.cards img {
  border-radius:20px;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  vertical-align: middle;
}

.cards p img, #post-content .cards img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

.card__title {
  font-size: 1em;
  font-weight: 400;
}

.card__text {
  flex: 1 1 auto;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.card__teaser {
  background: rgba(51, 51, 51, 0.6);
  border: 0 solid #fff;
  color: #fff;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .1em;
  padding: 5px 10px;
  text-align: center;
  width: 100%;
}

/* Horizontal variation blocks */
.bg-middle .card__content {
  color: #333333;
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  padding: 1rem;
}

.bg-middle .card__image {
  border-bottom-left-radius: 5px;
  border-radius: 0;
  border-top-left-radius: 5px;
}

.bg-middle .card__image::before {
  display: block;
  height: 100%;
  min-height: 100px;
  padding-top: 100%;
  width: 150px;
}


.card.bg-middle .col-icons {
  border-radius: 50%;
  height: 80px !important;
  margin: .5rem 0 .5rem 1rem;
  min-width: 80px;
  width: 80px !important;
}

/* Interactive link cards */
a.flex-link, a.flex-link .card, a.flex-link .card__icons {
  color: #333333;
  display: flex;
  font-weight: 300;
  transition: all .3s ease-out;
  width: 100%;
}

a.flex-link:hover .card, a.flex-link:hover .card__icons {
  transform: scale(0.98);
}

a.flex-link:hover .card__image {
  filter: contrast(80%);
}

a.flex-link:hover .card__button {
  background: #fff;
  border: 1px solid #333333;
  color: #333333;
}

/* Icons within boxes */
.col-icons, .card .col-icons {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
}

.card .col-icons {
  border-radius: 50%;
  height: 80px !important;
  margin: 1rem auto 0;
  min-width: 80px;
  width: 80px !important;
}

.icon-white { color: #26a105; background: none; border: none; }
.icon-red { color: #26a105;background: #fff; border: 0px solid #26a105;  }
.icon-grey { color: #fff;background: #454f54; border: 0px solid #454f54;   }



/* Stars rating component */
.stars {
  color: #26a105;
  font-size: 32px;
  letter-spacing: 2px;
  margin: 0 auto;
}

/* ==========================================================================
   9. LIST ELEMENTS & CONTENT REPEATERS
   ========================================================================== */
ul.normal, ol {
  margin-top: 10px;
  padding-bottom: 0;
  padding-left: .9em;
  padding-top: 0;
}

.normal li {
  list-style-position: outside;
  list-style-type: disc;
  padding-bottom: 10px;
  padding-top: 0;
}

ol li {
  list-style: decimal;
  padding-left: 0;
  padding-bottom: 10px;
}

ul.li-green, ul.li-orange, ul.li-white, ul.li-accordion, .ul.li-map, .ul.li-map-green {
  padding-bottom: 10px;
  padding-left: 0;
  padding-top: 10px;
}

ul.li-green ul, ul.li-orange ul, ul.li-white ul, ul.li-accordion ul {
  margin: 10px 0;
}

.li-green li, .li-orange li, .li-white li, .li-accordion li, .li-map li, .li-map-green li {
  list-style: none;
  padding-bottom: 0;
  padding-left: 1.5em;
  padding-top: 0;
}

.li-green li::before, .li-orange li::before, .li-white li::before {
  content: "\f138";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-left: -1.3em;
  padding-top: 0;
  position: absolute;
  width: 1.3em;
}

.li-orange li::before {
  content: "\f00c";
}

.li-accordion li::before {
  color: #d4d7d8;
  content: "\f061";
  display: inline-block;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 100%;
  margin-left: -1.3em;
  width: 1.3em;
}

.li-green li::before { color: #26a105; }
.li-orange li::before { color: #098d41; }
.li-white li::before { color: #fff; }

.li-map li::before {
  color: #26a105;
  content: "\f3c5";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-left: -1.3em;
  padding-top: 0;
  position: absolute;
  width: 1.3em;
}

.li-map-green li::before {
  color: #4c646c;
  content: "\f3c5";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-left: -1.3em;
  padding-top: 0;
  position: absolute;
  width: 1.3em;
}

/* Accordion module style block */
.accordion-list {
  list-style: none;
  width: 100%;
}

.cards.accordion-list {
  padding: 1rem;
}

.accordion-list .cards__item {
  display: block;
  margin-bottom: 5px;
  padding: 0;
}

.accordion-item, .accordion-body-item {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  transition: all .3s;
  width: 100%;
}

.accordion-body-item .accordion-thumb {
  background: #fff;
  border: 1px solid #e3e1e1;
  border-radius: 5px;
}

.accordion-body-item .accordion-thumb:before {
  content: "\f078";
  display: inline-block;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-right: 10px;
  transform: rotate(0deg);
  transition: transform .2s ease-out;
}

.accordion-body-item .accordion-thumb:after {
  content: "";
}

.accordion-item, .accordion-thumb:hover {
  background: #333333;
  color: #fff;
  border: 1px solid #333333;
}

.accordion-thumb, .picture-thumb {
  cursor: pointer;
  font-weight: 400;
  margin: 0;
  padding: 10px 20px;
  width: 100%;
}

.accordion-thumb:after, .picture-thumb:after {
  content: "";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 1.1em;
  position: absolute;
  right: 20px;
  transform: rotate(0deg);
  transition: transform .2s ease-out;
}

.accordion-body-item .accordion-thumb.active {
  background: #333333;
  border: 1px solid #333333;
  color: #fff;
}

.accordion-body-item .accordion-thumb.active:before {
  content: "\f077";
  transform: rotate(0deg);
}

.accordion-panel {
  display: none;
  margin: 0;
  padding: 0;
}

.accordion-body-item .accordion-panel {
  background: #F7F7F5;
  border-radius: 5px;
  display: none;
  margin: 5px 0 0;
  padding: 20px;
  width: 100%;
}

.accordion-item.green .accordion-thumb { background: #26a105; color: #fff; font-weight: 400; font-size: 1em; }
.accordion-item.orange .accordion-thumb { background: #495256; color: #fff; font-weight: 400; font-size: 1em; }

/* ==========================================================================
   10. MEDIA, SLIDERS & GALLERY ELEMENTS
   ========================================================================== */
.video-slide video {
  height: 100% !important;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
}

.flex-video-slide video {
  cursor: pointer;
  height: auto !important;
  width: 100% !important;
}

video[poster] {
  object-fit: cover;
}

.video-slide {
  min-height: 600px;
  transition: all .5s ease-out;
}

.slider.s .slide-content { min-height: 0; }
.slider.m .slide-content { height: 65vh; }
.slider.l .slide-content { min-height: 450px; }


.slider-text {
  bottom: 0px;
  color: #fff;
  left: 0;
  margin: 0 auto;
  max-width:1600px;
  padding: 0 1rem;
  position: absolute;
  right: 0;
  z-index:3
}

.slider-content{
  padding: 20px 20px 150px 20px;}


.text-small { font-size: 64px;line-height: 1.2;color:#26a105;margin-top:10px;font-weight: 700; }
.text-big { font-size: 48px;font-weight: 700;line-height: 1.2;color:#fff; }
.text-black-slider {
  background: rgba(0, 0, 0, 0.8);
  color: #fff !important;
  display: block;
  font-size: 20px;
  letter-spacing: .1em;
  line-height: 1.6;
  margin: 0 auto 5px;
  padding: 10px 15px;
  text-transform: uppercase;
  width: fit-content;
}

.slider-overlay {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 80%);
  height: 100%;
  width: 100%;
}

.button-slider {
  background: #26a105;
  border: 1px solid #26a105;
  border-radius: 30px;
  color: #fff;
  font-weight: 400;
  letter-spacing: 0.2px;
  margin-top: 20px;
  padding: .5rem 1rem;
  transition: all .3s;
  width: fit-content;
}

.button-slider:hover {
  background: #fff;
  border: 1px solid #fff;
  color:#333333;
}

.topslider-wrap, .video-wrap {
  background: none;
  position: relative;
}

.slider-dots {
  background-image: url(/site/assets/files/web/dots.png);
  height: 100%;
  position: absolute;
  width: 100%;
}

.bg-image .flex-image img, .bg-image .card__image {
  border-radius: 20px;
  height: 100%;
}

.bg-image .card__content, .bg-image-slider .card__content {
  display: none;
}

.slideflex-inline .cards__item { padding: .8rem; }
.slick-slider .cards__item { padding: 0.1rem; }

.bg-image-slider .card__image {
  border-radius: 5px;
}

.bg-image-slider .card__image:before {
  content: "";
  display: block;
  min-height: 550px;
  padding-top: 100%;
}

.slideflex-inline .card__image {
  align-items: center;
  border-radius: 5px;
  display: flex;
  filter: contrast(100%);
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: filter .5s cubic-bezier(.43, .41, .22, .91);
}

.slideflex-inline .card__image::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.sort__item .card__image::before {
  content: "";
  display: block;
  min-height: 350px;
  padding-top: 80%;
}

.blog-posts .card__image {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.bg-content-image {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.card__image__hidden, .picture__card {
  display: none;
}

.gallery { padding: 2px; }

.flex-picture {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
}

.flex-picture img {
  max-width: 250px;
  padding: 1rem;
  width: 100%;
}

.lightbox__teaser {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #fff;
  color: #fff;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.1em;
  max-width: 80%;
  padding: 15px 20px;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
}

.light-container {
  align-items: center;
  display: flex;
  justify-content: center;
}

.slick-track, .slick-slide, .slick-slide > div {
  display: flex;
}

.slick-slide, .slick-slide > div {
  flex: 1;
}

.slick-slide > div {
  flex-direction: column;
  height: 100%;
}

/* ==========================================================================
   11. BRAND SOCIALS, MARGIN UTILITIES & COOKIE INFO Banner
   ========================================================================== */
.social-bar-left{position:absolute;right:1rem;top:15px;text-align:right;font-size:16px}
.social-bar-right{position:absolute;top:10px;right:1rem;display:none}
.social-bar-footer{margin-top: 20px;width:100%}
.social-bar-footer .icons{float:left}
.social-bar-flex{margin:0 auto;margin-top:10px}
.social-bar-right a,.social-bar-flex a{color:#fff;font-size:16px;width:30px;height:30px;display:flex;display:-webkit-flex;justify-content:center;-webkit-justify-content:center;flex-wrap:wrap;align-content:center;-webkit-align-items:center;margin: 0px 0px 0px 10px;}
.social-bar-footer a {color:#fff;font-size:16px;width:30px;height:30px;display:flex;display:-webkit-flex;justify-content:center;-webkit-justify-content:center;flex-wrap:wrap;align-content:center;-webkit-align-items:center;margin: 0px 10px 0px 0px;}

.icons { float: right; min-height: 30px; margin-right: 5%; }
.social-bar-footer .icons { float: left; }

.phone, .mail, .xing, .facebook, .instagram, .tiktok {
  background: #26a105;
  float: left;
  border-radius: 50%;
}

.phone:hover, .mail:hover, .social-bar-footer .mail:hover, .social-bar-footer .phone:hover, .social-bar-flex .mail:hover, .social-bar-flex .phone:hover, .social-bar-footer .instagram:hover, .social-bar-footer .facebook:hover, .social-bar-footer .tiktok:hover, .tiktok:hover, .facebook:hover, .instagram:hover {
  background: #495256;
  color: #fff;
}

.xing:hover {
  background-color: #b7df4b;
  color: #333333;
}

.social-bar-left .trenner {margin-right: 10px;}
.social-bar-left{position:absolute;right:1rem;top:15px;text-align:right;font-size:16px}
.social-bar-right{position:absolute;top:10px;right:1rem;display:none}
.phone-top a {background: #26a105;color: #fff;padding: 8px 10px 8px 10px;border-radius: 20px;display: inline-block;font-size: 14px;}
.phone-top a:hover {background: #495256;color: #fff;}

/* Miscellaneous structural decorators */
.totop { position: absolute; bottom: 20px; right: 0; left: 0; margin: 0 auto; width: fit-content; z-index: 1; font-size: 1.5em; }
.contact-right { position: fixed; right: 20px; bottom: 50%; width: fit-content; z-index: 100; font-size: 1.5em; }
.footer .totop a { color: #26a105; }
.footer .totop a:hover { color: #495256; }
.copyright { font-size: 14px; color: #454545;line-height: normal;display: block; }
.more-trigger { color: #495256; cursor: pointer; display: inline-block; font-weight: 400; margin: 20px 0 0; }
.bg-blue .more-trigger, .bg-white .more-trigger { margin: 0 0 20px 20px; }
.more-trigger:hover { color: #26a105; }
.blog-posts p { font-size: .9em; font-weight: 300; }
.image-left { display: inline-block; margin-top: 10px; }
.blog-headline-first{padding:0rem 0rem 0rem 1rem}


.f-image, .f-image-zert { float: left; }
.f-image img { border-radius: 0; padding: 0; max-width: 250px; }
.footer-right img { margin-bottom: 0 !important; float: left; }

.arrow-white {
  background-image: url(/site/assets/files/web/line.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.arrow-blue { border-top: 10px solid #26a105; }
.arrow-down { bottom: -13px; height: 30px; left: 0; margin: 0 auto; position: absolute; right: 0; width: 100%; z-index: 1; }
.bg-arrow-down:before { color: rgba(51, 51, 51, 1); content: "\f078"; font-family: 'Font Awesome 5 Free'; font-weight: 900; }

#simpleDiv {
  background: #333333;
  border-radius: 5px;
  display: none;
  padding: .5rem;
  position: absolute;
  width: 100%;
  z-index: 1;
}

/* Privacywire Framework Banner styling */
.privacywire {
  background: #fff;
  bottom: -250%;
  font-size: 14px;
  left: 0;
  margin: 0 auto;
  opacity: 0;
  padding: 1rem;
  position: fixed;
  right: 0;
  transition: bottom .3s ease-in, opacity .3s ease;
  width: 100%;
  z-index: 1;
}

.show-banner .privacywire-banner, .show-message .privacywire-message, .show-options .privacywire-options { bottom: 0; opacity: 1; }
.privacywire-header, .privacywire-consent-message { font-weight: 300; }
.privacywire-ask-consent-blueprint, .privacywire button[hidden], [data-ask-consent-rendered="1"] { display: none; }
.privacywire-ask-consent { display: flex; flex-direction: column; justify-content: left; }
.privacywire-body li { list-style: none; }
.privacywire-text { margin-bottom: 20px; }

button.privacywire-consent-button, button.save, button.allow-all, button.allow-necessary, button.choose {
  background: #fff;
  border: 1px solid #333333;
  border-radius: 5px;
  color: #333333;
  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  margin: 5px;
  padding: .5rem;
  transition: all .3s;
}

button.privacywire-consent-button:hover, button.save:hover, button.allow-all:hover, button.allow-necessary:hover, button.choose:hover {
  background: #fff;
  border: 1px solid #333333;
  color: #333333;
}

button.privacywire-consent-button:before { content: "\f055"; padding-right: 10px; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
button.privacywire-consent-button { margin-top: 20px; margin-bottom: 0; }
.privacywire-ask-consent button.privacywire-consent-button { margin-top: 10px; width: fit-content; }


@media only screen and (min-width: 33.75em) {
  .container{width:100%}
  .container .container{width:100%}
  .w-20{width:20%}
  .w-25{width:25%}
  .w-33{width:33.333333333%}
  .w-66{width:66.66666666666%}
  .w-33-middle{margin:0 auto}
  .w-75{width:75%}
  .w-50{width:50%}
  .w-50-middle{margin:0 auto}
  .w-20-middle{width:50%;margin:0 auto}
}

.container-left{width:70%;display:inline-block}
.container-right{width:25%;float:right}

@media only screen and (min-width: 1350px) {
  .container{width:100%}
  .w-normal{width:100%;max-width:1350px;margin:0 auto;position:relative}
  .w-big{width:100%;max-width:1600px;margin:0 auto;position:relative}
  .w-bigger{width:100%;max-width:2500px;margin:0 auto;position:relative}
  .w-33-middle{width:50%}
  .w-50-middle{width:80%}
  .w-33{width:33.333333333%}
}

@media all and (max-width : 1350px) {
  .social-bar-footer .icons{float:left;width:100%}
  .w-25-counter{width:33.3333333333333333%}
  .w-33,.w-66{width:50%}
  .cards__item__light{width:25%}
  .w-20{width:20%}
      .w-25{width:50%}
   .w-75{width:50%}
}

@media all and (max-width : 960px) {
  .cards__item__light{width:50%}
  .w-20{width:100%}
  .bg-white-round .card__image{width:250px;height:250px}
  .w-33-middle{width:100%}
  .w-50-middle{width:100%}
  .w-25-counter{width:33.3333333333333333%}
  .social-bar-left{display:none;}
  .social-bar-right{display:block;}
}

@media all and (max-width : 768px) {
  .cards__item,.sort__item{width:100%}
  .cards__item.w-25-counter{width:33.3333333333333333%}
  .w-20-middle{width:80%;margin:0 auto}
  .slider.l .slide-content{min-height:300px}
  .button-slider{margin:unset;margin-top:20px}
  nav a {font-size: 20px;}
  .w-25{width:100%}
   .w-75{width:100%}
}

@media all and (max-width : 550px) {
  .navbar-container{bottom:10px;}
  .social-bar-left{bottom:10px;right:87px}
  html,body{font-size:17px}
  .social-bar .icons{display:none}
  .service li{margin:5px 5px 5px 0}
  .slider.m .slide-content{height:60vh}
  .footer .cards__item{padding:1rem}
  .sort__item .card__image::before{min-height:300px}
  .pt-190{padding-top:90px}
  .social-bar-left a {padding:5px;font-size: 18px;margin:0px 5px 0px 0px;}
  .headline-flexbox{margin:20px 0 10px;padding:1rem}
  .social-bar-left .facebook, .social-bar-left .instagram{display:none}
  .card__teaser{font-size:16px}
  .text-small{font-size:24px}
  .text-big{font-size:28px}
  .slider-content{padding: 20px 20px 0px 20px;}
  .text-black-slider {font-size:16px}
  .cards__item.w-25-counter{width:100%}
  .logo img, .sticky .logo img{max-height:90px;}
  .main{margin-top:90px}


.pt-50 { padding-top: 20px; }
.pt-70 { padding-top: 20px; }
.pt-190 { padding-top: 90px; }
.pb-50 { padding-bottom: 20px; }
.pb-70 { padding-bottom: 20px !important; }
}

@media all and (max-width : 400px) {
  .cards__item__light{width:50%}
  .w-20{width:100%}
  .w-20-middle{width:100%}
  .social-bar-right {display:none}
}

@media all and (max-width : 350px) {
  nav ul li{display:block;width:100%}
      .logo img, .sticky .logo img {
  max-height: 70px;
  padding: 10px 0 10px 1rem;
  transition: all .5s ease-out;
}
.main{margin-top:70px}
}

.responsive-video{position:relative;padding-bottom:56.25%;height:0}
.responsive-video iframe{position:absolute;top:0;left:0;width:100%;height:100%}

.counter{text-align:center;font-size:28px;font-weight:700;color:#54bfd7}
.counter-text{text-align:center;font-size:16px;}

.gallery-masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: 4px;
  gap: 10px;
  padding: 1rem;
}

.gallery-masonry a {
  display: block;
  grid-row: span 35;
  border-radius: 0px;
  overflow: hidden;
  position: relative;
  background: #f2f2f2;
  border-radius: 20px;
}

.gallery-masonry img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease, filter 0.35s ease;
  border-radius: 20px;
}

.gallery-masonry a::after {
  content: "Vergrößern";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-masonry a:hover img {
  transform: scale(1.05);
  filter: brightness(0.9);
  border-radius: 20px;
}

.gallery-masonry a:hover::after {
  opacity: 1;
}

@media all and (max-width: 400px) {
  .gallery-masonry {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

.wave-divider{
position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px; /* Hier kannst du die Gesamthöhe der Welle steuern */
  overflow: hidden;
  line-height: 0;
  z-index:2;
}


.meta-info {
    position: relative;
    display: inline-block;
}

.meta-info-button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s ease;
    font-size: 18px;
}

.meta-info-button:hover {
    background: #333;
    color: #fff;
    transform: scale(1.08);
}


/* Tooltip */
.meta-tooltip {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    padding: 12px 16px;
    background: #fff;
    color: #333;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,.15);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all .25s ease;
    z-index: 20;
}


/* Pfeil */
.meta-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 7px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}


.meta-info:hover .meta-tooltip {
    opacity: 1;
    visibility: visible;
}