/* ================================================== Variablen ================================================== */
:root {
/*  --bs-body-font-family: "Noto Sans", sans-serif;
  --font-color-h1: #000000;
  --font-color-h2: #000000;
  --font-color-h3: #666666;
  --font-color-h4: #000000;
  --font-color-h5: #666666;
  --font-color-h6: #000000;
  --dark-blue: #21b5d1;
  --light-blue: #a5ddf8;
  --white: #FFFFFF;
  --yellow: #f8f32b;
  --font-size-h1: 20pt;
  --font-size-h2: 18pt;
  --font-size-h3: 18pt;
  --font-size-h4: 16pt;
  --font-size-h5: 16pt;
  --font-size-h6: 14pt;
  --bs-body-font-size: 14pt;*/

  --img-height-top: 50px;
  --img-height-bottom: calc( var( --img-height-top ) * 1.7 );
  --font-size-subtext: 11px;
  --font-size-preview: 14px;
  --spacer: 10px;
  --spacer-sidebar: 20px;
  --font-color-menu: var( --font-color-h1 ) !important;
  --bs-body-color: var( --font-color-h3 ) !important;
  --bs-nav-link-hover-color: var(--light-blue) !important;
  --bs-btn-hover-border-color: var(--dark-blue) !important;
  --bs-btn-active-border-color: var(--dark-blue) !important;
  --bs-btn-active-bg: var(--dark-blue) !important;
  --bs-btn-active-border-color: var(--dark-blue) !important;
  --bs-nav-link-hover-color: var(--light-blue) !important;
  --bs-link-hover-color-rgb: var(--light-blue) !important;

  --font-size-header-top: var( --font-size-h1 );
  --bs-btn-font-size: var( --bs-body-font-size );
  --font-size-header-bottom: calc(var(--bs-body-font-size) - 2pt);
  --font-size-menu: calc(var(--bs-body-font-size) - 2pt);
  --font-size-submenu: calc(var(--bs-body-font-size) - 3pt);
}
/*  X-Small devices (portrait phones, less than 576px)
    Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) { 
  :root {
    --bs-body-font-size: calc(var(--bs-body-font-size) - 3pt);
    --bs-btn-font-size: calc(var(--bs-body-font-size) - 3pt);
    --font-size-header-top: calc(var(--font-size-header-top) - 5pt);
    --font-size-header-bottom: calc(var(var(--font-size-header-bottom)) - 2pt);
    --font-size-h1: calc(var(--font-size-h1) - 4pt);
    --font-size-h2: calc(var(--font-size-h2) - 4pt);
    --font-size-h3: calc(var(--font-size-h3) - 4pt);
    --font-size-h4: calc(var(--font-size-h4) - 4pt);
    --font-size-h5: calc(var(--font-size-h5) - 4pt);
    --font-size-h6: calc(var(--font-size-h6) - 4pt);
    }
}
/*  Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  :root {
    --bs-body-font-size: calc(var(--bs-body-font-size) - 3pt);
    --bs-btn-font-size: calc(var(--bs-body-font-size) - 3pt);
    --font-size-header-top: calc(var(--font-size-header-top) - 4pt);
    --font-size-h1: calc(var(--font-size-h1) - 2pt);
    --font-size-h2: calc(var(--font-size-h2) - 2pt);
    --font-size-h3: calc(var(--font-size-h3) - 2pt);
    --font-size-h4: calc(var(--font-size-h4) - 2pt);
    --font-size-h5: calc(var(--font-size-h5) - 2pt);
    --font-size-h6: calc(var(--font-size-h6) - 2pt);
  }
}
/* ================================================== Generell ================================================== */
html {
  height: -webkit-fill-available !important;
  height: -moz-available !important;
  height: fill-available !important;  
}
body {
  margin: 0px;
  overflow-x: hidden;
  /* magic mobile viewport iOS bug fix */
  /* also see: https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/ */
  /* also see: https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/ */
  min-height: -webkit-fill-available !important;
  min-height: -moz-available !important;
  min-height: fill-available !important;  
  -webkit-overflow-scrolling: touch;    
  top: 0px !important;
  font-family: var( --bs-body-font-family ) !important;
/*  user-select: none;*/
  -webkit-touch-callout: none !important;

}
a, a:link, a:visited, a:active {
  text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
  padding: 10px 0 15px 0;
}
h1, .information, h1 > strong {
  font-size: var( --font-size-h1 ) !important;
  font-weight: bold;
  color: var( --font-color-h1 ) !important;
}
h2, h2 > strong {
  font-size: var( --font-size-h2 ) !important;
  font-weight: bold;
  color: var( --font-color-h2 ) !important;
}
h3, h3 > strong {
  font-size: var( --font-size-h3 ) !important;
  font-weight: bold;
  color: var( --font-color-h3 ) !important;
}
h4, h4 > strong {
  font-size: var( --font-size-h4 ) !important;
  font-weight: bold;
  color: var( --font-color-h4 ) !important;
}
h5, h5 > strong {
  font-size: var( --font-size-h5 ) !important;
  font-weight: bold;
  color: var( --font-color-h5 ) !important;
}
h6, h6 > strong {
  font-size: var( --font-size-h6 ) !important;
  font-weight: bold;
  color: var( --font-color-h6 ) !important;
}
.modal-title {
  padding: 0 !important;
}
.modal-body > p, .form-check-label > p {
  color: var( --font-color ) !important;
}
.btn-primary {
  --bs-btn-bg: var( --dark-blue ) !important;
  --bs-btn-hover-bg: var( --dark-blue ) !important;
  --bs-btn-disabled-bg: var( --dark-blue ) !important;
  --bs-btn-disabled-border-color: var( --dark-blue ) !important;
  --bs-btn-border-color: var( --dark-blue ) !important;
  --bs-btn-color: var(--font-color-menu) !important;
}
button {
  color: var(--font-color-menu) !important;
}
button:hover, .card-hover:hover button {
  color: var( --white ) !important;
}
hr {
  border-top: 2px solid var( --light-blue ) !important;
}
.wp-block-separator {
  border-top: 4px double var( --font-color-menu ) !important;
}
.wp-block-columns .wp-block-column h4 {
  text-align: center;
  border-top: 2px solid var( --dark-blue ) !important;
  border-right: 2px solid var( --dark-blue ) !important;
  border-bottom: 2px solid var( --dark-blue ) !important;
  border-left: 2px solid var( --dark-blue ) !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}

/* ================================================== Header / Footer ================================================== */
.navbar-name, .offcanvas-title {
  font-size: var( --font-size-header-top);
  font-weight: bold;
  color: var( --font-color-menu ) !important;
  letter-spacing: 1px;  
}
#searchfield, input, .input-text {
  color: var( --font-color-menu );
  font-size: var( --font-size-menu ) !important;
}
.headline {
  font-size: var( --font-size-header-bottom );
  font-weight: bold;
  color: var( --font-color-menu );
  letter-spacing: 1px;
}
.headline-underline {
  text-decoration: underline;
}
.bi, .bi-mini {
  color: var( --font-color-menu ) !important;
}
.bi-bottom, .bi {
  font-size: 1rem !important;
  margin-left: 0.3rem !important;
/*  margin-right: 0.3rem !important;*/
}
.bi-menu {
  font-size: 1.6rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.btn-close {
  font-size: 1.6rem !important;
}
.bi-mini, .footer-link2, .click {
  font-size: 0.7rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.bi-mini > strong {
  font-size: 0.7rem !important;
  font-weight: bold;
}

/* ================================================== Navigation ================================================== */
.goog-te-combo, select, option, select option {
  font-family: var( --bs-body-font-family ) !important;
  font-size: var( --font-size-menu ) !important;
  color: var( --font-color-menu ) !important;
}
select, option, select option {
  background: transparent !important;
  border: none !important;
}
#sk_nav > li > a > p {
  font-size: var( --font-size-menu );
  color: var( --font-color-menu );
}
.nav-subitem > .nav-sublink {
  font-size: var( --font-size-submenu );
  color: var( --font-color-menu );
}
/*#sk_nav a:hover > .bi, #sk_nav a:hover > p, #sk_nav a:hover > i, .goog-te-combo:hover, .nav-link:hover, .nav-sublink:hover,*/
.nav-lang:hover .goog-te-combo, .nav-item:hover > a, .nav-item:hover > a > i, .nav-item:hover > a > p, .active
{
  color: var( --white ) !important;
  font-weight: bold;
  text-decoration: none;
}
#google_translate_element { 
  height: 30px !important; 
  overflow: hidden !important; 
  max-width: 180px /* 160px */ !important;
}
.fa-wine-glass-empty {
  -webkit-transform:rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
marquee > p > .fa-solid, marquee > p > .fa-brands {
  min-width: 5px !important;
}
.fa-solid, .fa-brands {
  min-width: 16px !important;
}

#sk_nav > div > div > div {
  -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  -moz-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}


/* ================================================== Inhalt ================================================== */
article {
  min-width: 100% !important;
}
#detail-content {
  user-select: none;
  -webkit-user-select: none !important;  
}
#detail-content a {
  color: var( --white );
}
marquee > p > a {
  color: var( --dark-blue ) !important;
}

#detail-content a:hover {
  color: var( --dark-blue );
}
marquee, .search /*, marquee a */ {
  color: var( --font-color-menu ) !important;
}
marquee p {
  display: inline !important;
}

#Popup a {
  color: var( --white );
}
#Popup a:hover {
  color: var( --dark-blue );
}
#detail-content img:not( .emoji, .zoomImg, .ms-slide, .ms-slide-bgcont > img, .woocommerce-product-gallery__image > a > img ) {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  max-width: 100% !important;
/*  min-width: 50% !important;*/
  height: auto !important;
/*  max-height: 300px;*/
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  aspect-ratio: auto 3/4;
}
.zoomImg {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
.img-full, .img-full > img {
  min-width: 100% !important;
}
.wp-block-embed {
  text-align: center !important;
  justify-content: center !important;
  min-width: 100%;
  width: 100%;
}
.wp-block-embed iframe {
  width: 75%;
}













.bg-dark-blue {
  background-color: var( --dark-blue ) !important;
}
.bg-light-blue {
  background-color: var( --light-blue ) !important;
}
.bg-white {
  background-color: var( --white ) !important;
}
.bg-yellow{
  background-color: yellow !important; 
  background-color: var( --yellow ) !important ;
}
#ui-id-1 {
  z-index: 1100;
}
.ui-widget.ui-widget-content {
  border: none !important;
  border-bottom: 1px solid var( --dark-blue ) !important;
}

p {
  margin: 0 !important;
}
button {
  width: auto !important;
}
.form-check-input:checked {
  background-color: var(--dark-blue);
  border-color: var(--dark-blue);
}
/*.master-slider-parent {
  max-width: 90% !important;
}*/
/*img:not(.img-logo, .img-logo-bottom, .img-logo-top):hover {
  transform: scale(1.5);
}*/
.main-content, .modal-content {
  background: var( --light-blue ) !important; /* linear-gradient(90deg, rgba(183,235,255,1) 10%, rgba(255,255,255,1) 50%, rgba(183,235,255,1) 90%) !important;*/
  -webkit-overflow-scrolling: touch;      
}
/*.detail-content {
  top: 210px !important;
}*/
/* Header, Sidebar */
header, .header {
  top: 0;
  position: -webkit-sticky;
  position: sticky;
  z-index: 999;
}
/*footer {
  z-index: 999;
  position: relative;
}*/
#sidebarMenu {
  z-index: 10000;
}
.sticky-top {
  top: calc( var( --img-height-top ) + var( --spacer ) + var( --spacer-sidebar ) );
  z-index: 900 !important;
}
.navbar-top {
  min-height: 10vh;
}
.navbar-top, .modal-header, .offcanvas-header {
  background-color: var( --dark-blue );
}
.navbar-bottom {
/*  min-height: 15vh;*/
  background-color: var( --light-blue );
/*  border-bottom: 2px solid var( --dark-blue );*/
}
.img-logo-top {
  height: var( --img-height-top ) !important;
}
.img-logo-bottom {
  height: var( --img-height-bottom ) !important;
}
.nav-link {
  padding: 0 !important;
  margin: 0 !important;
  padding-left: 0 /* 0.3rem */ !important;
  padding-top: 0.3rem !important;
}
.nav-link-bold, .goog-te-combo { 
  font-weight: bold;
}
.nav-item{
  max-width: 100% !important;
}
.nav-link-none {
  padding-top: 0 !important;
}

.card-subline-text {
  font-size: var( --font-size-subtext ) !important;
  padding-bottom: 0.5rem !important;
}
.card-text {
  font-size: var( --font-size-preview ) !important;
  padding-bottom: 0.5rem !important;
}
.master-slider-parent, .content > p:last-of-type {
  padding-bottom: 1rem !important;
}
/* Inhalt */
[class*="real3dflipbook"] {
  align-items: center; 
}
[class*="real3dflipbook"] > div > img { 
  max-width: 100% !important;
}
main {
  min-height: 300px !important;
}
.shadow {
  box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.9) !important;
}
/*.detail-content {
  padding-bottom: 3rem !important;
  padding-top: 220px;
}
.content{
  left: 200px;
  position: relative;
  top: 30px;
}*/
/*select, option, select option {
  background: transparent !important;
  border: none !important;
  font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
  font-size: var( --font-size-menu ) !important;
  color: var( --font-color );
}*/
.btn:hover {
  border-color: var( --dark-blue ) !important;
  color: var( --white ) !important;
}

.error, .bi-error {
  font-size: 2rem !important;
}
.form-control:focus {
  box-shadow: none !important;
}
.footer-link {
  font-size: 1.3rem !important;
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}
.footer-link2 {
  display: unset !important;
}
.footer-link:hover, a:hover > .footer-link, .footer-link2:hover, a:hover > .footer-link2 {
  color: var( --white ) !important;
  font-weight: bold;
}
.card-hover:hover, .card-hover > .card:hover/*, button:hover*/ {
  transform: scale(1.1) !important;
  font-weight: normal !important;
}
.m-hidden {
  margin-top: -30px !important;
}
.content > p {
  padding-bottom: 15px;
}
.skiptranslate > iframe, #google_translate_element > div > span, .skiptranslate > *, .skiptranslate > div::after, .goog-logo-link {
  visibility: hidden !important;
}
.skiptranslate > div {
  visibility: visible !important;
}
.profile-card-5 {
  margin-top: 20px;
}
.profile-card-5 .btn {
  border-radius: 2px;
/*  text-transform: uppercase;*/
/*  font-size: var( --font-size-text ) !important;*/
  padding: 7px 20px;
}
.profile-card-5 .card-img-block {
  width: 91%;
  margin: 0 auto;
  position: relative;
  top: -20px;
}
.profile-card-5 .card-img-block img {
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.63);
  width: auto !important;
  max-height: 200px !important;
}
#btnTop {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 90px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: var(--dark-blue);
  color: var( --font-color ); /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}
.btnTop_Hover{
  background-color: var(--light-blue) !important;
}
#btnTop > i {
  font-size: 2rem !important;
  font-weight: bold;
}
#btnTop:hover {
  background-color: var( --dark-blue ); /* Add a dark-grey background on hover */
}
#btnTop:link, #btnTop:visited, #btnTop:active, #btnTop:hover {
  background-color: var( --dark-blue ) !important;
}

.wpforms-submit, div.wpforms-container-full button[type=submit] {
  background-color: var( --dark-blue ) !important;
}
.wpforms-submit:hover, div.wpforms-container-full button[type=submit] {
  transform: scale(1.1) !important;
  font-weight: bold !important;
}
div.wpforms-container-full input, div.wpforms-container-full select, .wp-core-ui div.wpforms-container-full input, .wp-core-ui div.wpforms-container-full select {
  height: 30px !important;  
  max-height: 30px !important;    
}
div.wpforms-container-full .wpforms-field-label, .wp-core-ui div.wpforms-container-full .wpforms-field-label {
  margin: 0 0 5px 0 !important;
}
/*
a:hover, a:hover > .bi, a:hover > .bi > p, #google_translate_element:hover, .goog-te-combo:hover, .goog-te-gadget:hover, li > a:hover > p, li > a:hover > div {
  color: var( --light-blue ) !important;
  font-weight: bold !important;
}*/

.marquee {
  padding-bottom: 1rem!important;
  padding-top: 1rem!important;
}

/*  X-Small devices (portrait phones, less than 576px)
    Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) { 
  .img-logo-bottom {
    height: calc( ( var( --img-height-top ) * 1.2 ) + var( --spacer ) ) !important;
  }
  .headline {
    letter-spacing: normal !important;    
  } 
  .offcanvas-body {
/*    background: linear-gradient(90deg, rgba(183,235,255,1) 10%, rgba(255,255,255,1) 50%, rgba(183,235,255,1) 90%) !important; */
    background: var( --dark-blue ) !important;
  }
  .sticky-top {
    z-index: 1020 !important;
  }
  #btnTop {
    right: 10px; /* Place the button 30px from the right */
  }  
  .master-slider-parent {
    max-width: 100% !important;
  }
  .offcanvas-md.offcanvas-end {
    border-left: none !important;
  }
}
    
    /*  Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  #google_translate_element { 
    height: 26px !important; 
  }  
}