@charset "UTF-8";

/*
Theme Name: verservant
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: Jonas Broschinski & the WordPress team
Author URI: https://wordpress.org/
Description: A custom WordPress boilerplate based on the Twenty Twenty-One WordPress Theme and Bootstrap v5.3.0.
Requires at least: 5.3
Tested up to: 6.8
Requires PHP: 5.6
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: verservant
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready
*/


/* ############################################ */
/* embed fonts local */
/* ############################################ */

@import url('assets/fonts/merriweather/merriweather.css');
@import url('assets/fonts/chela-one/chela-one.css');

/* ############################################ */
/* keyframe animations */
/* ############################################ */

@keyframes move-up-down {
  0% {transform: translateY(0);}
  50% {transform: translateY(-5px);}
  100% {transform: translateY(0);}
}


/* ############################################ */
/* color variables */
/* ############################################ */

.has-primary-background-color,
.bg-primary {
  background-color: var(--primary) !important;
}

.has-primary-color,
.text-primary,
.text-primary a {
  color: var(--primary) !important;
}

.has-secondary-background-color,
.bg-secondary {
  background-color: var(--secondary) !important;
}

.has-secondary-color,
.text-secondary,
.text-secondary a {
  color: var(--secondary) !important;
}

.has-textcolor-background-color,
.bg-textcolor {
  background-color: var(--textcolor) !important;
}

.has-textcolor-color,
.text-textcolor,
.text-textcolor a {
  color: var(--textcolor) !important;
}

.has-white-background-color {
  background-color: var(--white) !important;
}

.text-white,
.text-white a,
.has-white-color {
  color: var(--white) !important;
}

.has-black-background-color {
  background-color: var(--black) !important;
}

.text-black,
.text-black a,
.has-black-color {
  color: var(--black) !important;
}

.border-primary {
  border-color: var(--primary) !important;
}

.border-secondary {
  border-color: var(--secondary) !important; 
}

.border-textcolor {
  border-color: var(--textcolor) !important;
}

.border-white {
  border-color: #fff!important;
}

.border-black {
  border-color: #000 !important;
}


/* ############################################ */
/* button & links: color & decoration */
/* ############################################ */

body * a {
  color: var(--link-color);
  text-decoration: none;
  transition: all ease-in-out .33s;
}

body a:hover:not(.stretched-link):not(.dropdown-menu a) {
  color: var(--link-hover-color);
}

.btn,
.btn a
.btn:hover,
.btn:hover a,
.btn:focus,
.btn:active,
a.wp-block-button__link:hover,
input:hover {
  text-decoration: none !important;
  color: var(--link-hover-color);
}

.btn-primary,
.btn-primary:focus,
a.wp-block-button__link.has-primary-background-color,
input.submit,
input.search-submit,
input.mailpoet_submit {
  color: #fff !important;
  background-color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
}

.btn-secondary, 
.btn-secondary:focus,
a.wp-block-button__link.has-secondary-background-color {
  color: #fff !important;
  background-color: var(--secondary) !important;
  border: 1px solid var(--secondary) !important;
}

.btn-primary:hover,
.btn-primary:hover a,
.btn-primary a:hover,
a.wp-block-button__link.has-primary-background-color:hover,
.btn-secondary:hover,
.btn-secondary:hover a,
.btn-secondary a:hover
.a.wp-block-button__link.has-secondary-background-color:hover,
input.submit:hover,
input.search-submit:hover,
input.mailpoet_submit:hover {
  color: #fff !important;
  filter: brightness(110%);
}

.btn-white, 
.btn-white:focus,
a.wp-block-button__link.has-white-background-color,
a.wp-block-button__link.has-white-background-color:focus  {
  color: var(--primary) !important;
  background-color: #fff !important;
  border: 1px solid var(--primary) !important;
}

.btn-white:hover,
.btn-white:hover a,
.btn-white a:hover,
a.wp-block-button__link.has-white-background-color:hover,
a.wp-block-button__link.has-primary-color.has-white-background-color:hover {
  color: #fff !important;
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
}

.btn-black, 
.btn-black:focus,
a.wp-block-button__link.has-black-background-color,
a.wp-block-button__link.has-black-background-color:focus  {
  color: #fff !important;
  background-color: #000 !important;
  border: 1px solid #fff !important;
}

.btn-black:hover,
.btn-black:hover a,
.btn-black a:hover,
a.wp-block-button__link.has-black-background-color:hover {
  color: #fff !important;
  background-color: #000 !important;
}

.btn-outline, 
.btn-outline:focus {
  color: var(--textcolor) !important;
  background-color: transparent !important;
  border: 1px solid var(--textcolor) !important;
}

.btn-outline:hover,
.btn-outline:hover a,
.btn-outline a:hover {
  color: var(--white) !important;
  background-color: var(--link-hover-color) !important;
}

/* ############################################ */
/* typo */
/* ############################################ */

body {
  font-family: 'Merriweather';
  font-weight: 400;
  font-size: 16px;
  line-height: 1.66;
  letter-spacing: 0.025rem;
  color: var(--textcolor);
  background-color: var(--body-background);
}

body * p:not(.has-huge-font-size):not(.has-large-font-size):not(.has-medium-font-size):not(.has-small-font-size) {
  font-size: 18px;
}

body * p.has-huge-font-size {
 font-size: 30px !important;
}

body * p.has-large-font-size {
  font-size: 25px !important;
}

body * p.has-medium-font-size {
  font-size: 20px !important;
}

body * b,
body * strong {
  font-weight: 800;
}

/* headlines */

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h1 a,
.h1 a,
h2 a,
.h2 a,
h3 a,
.h3 a,
h4 a,
.h4 a,
h5 a,
.h5 a,
a.nav-link,
a.dropdown-item,
#navbar a {
  font-family: 'Chela One';
  font-weight: 400;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
  color: var(--secondary);
}

h1 a,
.h1 a,
h2 a,
.h2 a,
h3 a,
.h3 a,
h4 a,
.h4 a,
h5 a,
.h5 a {
  color: var(--secondary);
}

h1,
.h1 {
  font-size: 1.7rem
}

h2,
.h2 {
  margin-top: 2rem;
  font-size: 1.5rem
}

h3,
.h3 {
  font-size: 1.3rem
}

h4,
.h4 {
  font-size: 1.15rem;
}

h4.subline {
  font-size: .85em;
}


/* ############################################ */
/* lists 
/* ############################################ */

/* ############################################ */
/* custom theme styles */
/* ############################################ */

body {
  min-width: 320px;
  overflow: scroll;
}

/* ############### header ################## */

header#header:not(.no-header) {
  min-height: 400px;
}

header#header.no-header {
  min-height: 0;
  max-height: 0;
}

#header-background img,
#header-background video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  top: 0;
  z-index: -1;
}

#header-background .wp-video,
#header-background .wp-video .wp-video-shortcode {
  width: 100% !important;
  height: 100% !important;
}

#header-background .wp-video .mejs-controls {
  display: none;
}

img.header-image {
  object-fit: cover;
  width: 100%;
}

section#header-textbox {
  bottom: 100px;
}

/* =========================================
   Header Video Desktop / Mobile Swap
========================================= */

.header-video-mobile {
    display: none;
}

.header-video-desktop,
.header-video-desktop video,
.header-video-mobile img {
    width: 100%;
    height: 100%;
}

.header-video-desktop video,
.header-video-mobile img {
    object-fit: cover;
}

/* =========================================
   Mobile: Nur Posterbild
========================================= */

@media (max-width: 991px) {

    .header-video-desktop {
        display: none;
    }

    .header-video-mobile {
        display: block;
        width: 100%;
        height: 100%;
    }
}


/* ############### logo ################## */

section#navbar .logo-wrapper {
  height: auto;
  transition: all ease 0.33s;
  display: flex;
  z-index: 9951;
  position: relative;
  max-width: 100%;
  transform: translateY(0);
  width: 100%;
}

section#navbar nav.open .logo-wrapper {
  z-index: 9951 !important;
}

section#navbar .logo-wrapper {
  height: auto;
  transition: all ease 0.33s;
  display: flex;
  z-index: 9940;
  position: relative;
  max-width: 100%;
  transform: translateY(0);
  width: 100%;
}

section#navbar .logo-wrapper.position-absolute {
  top: 50px;
  left: 0;;
}

section#navbar nav.centered .logo-wrapper {
  left: auto !important;
  top: 50px;
}

section#navbar .logo-wrapper .navbar-brand {
  font-size: 1.0rem;
  white-space: inherit;
  display: flex;
  justify-content: start;
}

body section#navbar .logo-wrapper {
  max-height: calc( var(--logo-height) * 0.85);
}

body section#navbar .logo-wrapper.logo-wrapper.logo-box {
  max-height: calc( var(--logo-height) * 0.85 + 2rem);
}

body.scroll section#navbar:not(.fixed-top) .logo-wrapper {
  max-height: calc( var(--logo-height) * 0.70);
}

body.scroll section#navbar .logo-wrapper,
body.scroll section#navbar .logo-wrapper img.logo {
    height: 1px !important;
}

.logo-wrapper img.logo {
  height: 100%;
  object-fit: contain;
  width: auto;
  max-height: 150px;
}

body.scroll section#navbar nav:not(.open) .logo-wrapper .navbar-brand {
  opacity: 0;
  visibility: hidden;
}

a.logo-mobile {
  opacity: 0;
  height: 0;
  object-fit: contain;
  width: auto;
  transition-delay: .33s;
  transition: opacity ease-in-out .66s;
  z-index: 9990;
  position: relative;
  max-width: 100%;
}

body.scroll section#navbar a.logo-mobile {
  opacity: 1;
  height: 75%;
  visibility: visible;
  max-width: 300px;
  filter: brightness(200);
}

section#navbar.fixed-top a.logo-mobile img {
  height: 70px;
}

section#navbar.fixed-top a.logo-mobile {
  position: fixed;
  top: 0;
  left: auto;
  height: auto !important;
  visibility: hidden;
}

/*section#navbar.fixed-top nav.open a.logo-mobile {
  display: none;
}*/

section#navbar.sticky-top .logo-wrapper {
  transition: all ease-in-out .33s;
  height: 0;;
  opacity: 1;
}

body.scroll section#navbar.sticky-top .logo-wrapper {
  height: 0 !important;
  padding: 0 !important;
  opacity: 0;
}

body.scroll section#navbar.sticky-top .logo-wrapper {
  box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.15);
}

section#navbar.static-top a.logo-mobile {
  display: none;
}

/*body.scroll .logo-wrapper.collapse-mobile img:not(.logo-mobile) {
  width: 0;
  height: 0;
}*/


/* ############### navbar ################## */

section#navbar,
ul#menu-main-nav {
  z-index: 9950 !important;
  transition: all ease-in-out .33s;
}

section#navbar section#menu-top {
  height: 50px;
  z-index: 9952 !important; 
}

section#navbar section#menu-top a {
  transition: all ease-in-out .33s;
}

section#navbar.sticky-top section#menu-nav {
  height: 70px;
}

section#navbar.fixed-top section#menu-nav {
  top: 50px;
}

section#navbar.static-top .navbar.centered section#menu-nav {
  height: calc(var(--logo-height) + 2rem);
}

body.scroll section#navbar:not(.fixed-top) section#menu-nav  {
  min-height: 70px;
  -webkit-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.25); 
  box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.25);
}

body.scroll section#navbar.static-top {
  position: sticky !important;
  top: -300px; /* Die Navbar wird zunächst oberhalb des Bildschirms positioniert */
  height: calc(70px + 50px);
  transition: none;
}

body.scroll.navbar-show section#navbar.static-top {
  top: 0; /* Die Navbar wird sichtbar */
  transition: top ease-in-out .33s;
}

body section#navbar.fixed-top::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  /*height: calc(var(--logo-height) + 50px + 2rem);*/
  height: 5em;
  /*background: var(--primary);*/
  background: linear-gradient(180deg, var(--textcolor) 50%, rgba(0,0,0,0) 100%);
  opacity: 0;
  transition: all ease-in-out .33s;
}

body.scroll section#navbar.fixed-top::after {
  opacity: 1;
}

body.scroll section#navbar.sticky-top .navbar,
section#navbar.sticky-top .navbar.open {
  background-color: var(--mobile-nav-background) !important;
  transition: all ease-in-out .33s; 
}

nav.open #menu-nav {
  transition: ease .66s;
}

body.scroll section#navbar.sticky-top {
  box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.15);
}

.navbar-expand-lg {
  flex-wrap: wrap;
}

#navbar_nav {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  opacity: 0;
  visibility: hidden;
  overflow-x: hidden;
  -webkit-transition: .33s ease-in-out;
  -moz-transition: .33s ease-in-out;
  -o-transition: .33s ease-in-out;
  transition: .33s ease-in-out;
}

#navbar_nav::after {
  content: "";
  position: fixed;
  background-color: var(--mobile-nav-background);
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  z-index: -1;
}

#navbar_nav ul.nav {
  margin-top: calc(var(--logo-height) * .8);
  margin-bottom: 5vh;
  width: 100%;
  justify-content: flex-start;
  flex-flow: column;
  position: absolute;
  top: 0;
  bottom: 0;
  overflow-y: scroll;
}

nav.overlay #navbar_nav ul.nav,
nav.canvas-left #navbar_nav ul.nav,
nav.canvas-right #navbar_nav ul.nav {

}

/*body.scroll #navbar_nav nav.navbar ul.nav {
  padding-top: calc(var(--logo-height) + 70px + 50px);
}*/

nav.overlay #navbar_nav {
  left: 0;
  right: 0;
  width: 100%;
}

nav.canvas-right #navbar_nav {
  transform: translateX(75vw);
  max-width: 80vw;
  right: 0;
}

nav.canvas-left #navbar_nav  {
  transform: translateX(-75vw);
  max-width: 80vw;
  left: 0;
}

nav.overlay #navbar_nav ul.nav,
nav.canvas-right #navbar_nav ul.nav,
nav.canvas-left #navbar_nav ul.nav {
  padding-left: 2em;
  padding-right: 2em;
}

nav.canvas-right #navbar_nav {
  transform: translateX(75vw);
  max-width: 80vw;
}

nav.canvas-left #navbar_nav  {
  transform: translateX(-75vw);
  max-width: 80vw;
}

nav.canvas-right #navbar_nav::after {
  transform: translateX(75vw);
}

nav.canvas-left #navbar_nav::after {
  transform: translateX(-75vw);
}

nav.open.overlay #navbar_nav.show,
nav.open.canvas-right #navbar_nav.show,
nav.open.canvas-left #navbar_nav.show {
  opacity: 1;
  visibility: visible;
  min-width: 80%;
  transform: translateX(0);
}

nav.open.canvas-right #navbar_nav.show::after,
nav.open.canvas-left #navbar_nav.show::after {
  transform: translateX(0);
}

nav.overlay #navbar_nav ul.nav > * {
  width: 100%;
  margin: 0 auto;
}

/* ############### nav links ################## */

nav.navbar #navbar_nav a.nav-link {
  opacity: 0;
  width: 100%;
  transform: translateY(50px);
  color: var(--navbar-text-color);
  border-bottom: 1px dotted var(--navbar-text-color);
  text-decoration: none;
  text-transform: uppercase;
  transition: all ease-in-out .33s;
  font-size: 1.1em;
  padding: 1em;
}

nav.canvas-right #navbar_nav ul.nav a.nav-link ,
nav.canvas-left #navbar_nav ul.nav a.nav-link {
  transform: none;
}

nav.navbar #navbar_nav.show a.nav-link {
  transform: translateY(0);
  opacity: 1;
}

nav.navbar #navbar_nav ul.nav li.menu-item {
  width: 100%;
  margin: 0 auto;
}

nav.navbar #navbar_nav ul.nav ul.dropdown-menu li.menu-item {
  margin: 0 auto;
}

#navbar_nav ul.nav a.nav-link:hover,
li.menu-item.active a.nav-link {
  border-color: var(--primary);
}

nav.navbar li.menu-item.active > a.nav-link,
nav.navbar li.menu-item > a.nav-link.active  {
  font-weight: bolder;
}

nav.navbar li.menu-item:not(.active) a.nav-link:hover {
  color: var(--navbar-hover-text-color);
}

section#navbar.fixed-top nav.navbar ul#menu-main-nav-de > li > a.nav-link:focus {
  color: var(--navbar-text-color);
}

section#navbar.fixed-top nav.navbar ul#menu-main-nav-de > li > a.nav-link:active,
section#navbar.fixed-top nav.navbar ul#menu-main-nav-de > li > a.nav-link:hover {
  color: var(--navbar-hover-text-color);
}

nav.navbar a.nav-link:hover {
  text-decoration: none !important;
}

/*body.scroll nav.navbar a.nav-link,
nav.navbar.open a.nav-link {
  color: var(--primary);
}*/

/* set before-element for active menu item in open overlay/canvas
#navbar_nav ul.nav > li.menu-item.active::before {
  display: block;
  position: relative;
  width: 40px;
  height: 3px;
  border-radius: 5px;
  left: 15vw;
  content: " ";
  background-color: var(--primary);
  top: 24px;
}*/

/* nav link fade-in effects */

nav.navbar:not(.open) #navbar_nav li {
  opacity: .0;
}

nav.navbar.canvas-right:not(.open) #navbar_nav li {
  transform: translateX(2rem) ;
}

nav.navbar.canvas-left:not(.open) #navbar_nav li {
  transform: translateX(-2rem) ;
}

nav.navbar.overlay:not(.open) #navbar_nav li {
  transform: translateY(2rem) ; 
}

/* ############### dropdown menu ################## */

.dropdown, .dropdown-center, .dropend, .dropstart, .dropup, .dropup-center {
  position: unset;
}

li.nav-item.dropdown > a {
  padding-right: 2em !important;
  position: relative;
  top: 0;
  left: 0;
  color: var(--submenu-text-color);
}

li.nav-item.dropdown > a::after {
  content: "\f138";
  font-family: "bootstrap-icons";
  display: block;
  position: absolute;
  top: .40em;
  right: 0;
  font-size: 1.5em;
}

li.nav-item.dropdown:not(.level-1) > a::after {
  top: .20em;
}

li.nav-item.dropdown.is-open > a::after {
  content: "\f659";
}

ul.dropdown-menu.level-1 li.nav-item.dropdown > a::after,
ul.dropdown-menu.level-2 li.nav-item.dropdown > a::after,
ul.dropdown-menu.level-3 li.nav-item.dropdown > a::after,
ul.dropdown-menu.level-4 li.nav-item.dropdown > a::after {
  content: "\f138";
  right: 1.5em;
  font-size: 1.5em;
}

ul.dropdown-menu {
  display: block !important;
  list-style-type: none;
  border: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: none;
  padding: 0 2em;
  position: absolute !important;
  visibility: hidden;
  overflow-x: hidden;
  left: 0;
  right: 0;
  width: 100%;
  bottom: 0;
  top: 0 !important;
  transition: all ease-in-out .33s;
  background-color: transparent;
}

ul.dropdown-menu.level-1.show-submenu,
ul.dropdown-menu.level-2.show-submenu,
ul.dropdown-menu.level-3.show-submenu,
ul.dropdown-menu.level-4.show-submenu {
  visibility: visible;
}

ul.dropdown-menu::after {
  display: block;
  content: " ";
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  right: 0;
  transform: translateX(110vw);
  transition: all ease .33s;
  transition-delay: .33s;
  opacity: 0;
  z-index: -1;
  background-color: transparent;
/*background-image: radial-gradient(circle at top right, var(--white), var(--submenu-bg-color) 66%);*/
  background-repeat: no-repeat;
  background-size: cover;
}

ul.dropdown-menu.show-submenu::after {
  transform: translateX(0);
  opacity: 1;
  transition-delay: 0s;
}

ul.dropdown-menu.show-submenu.level-2::after,
ul.dropdown-menu.show-submenu.level-3::after,
ul.dropdown-menu.show-submenu.level-4::after {
  background-color: var(--submenu-bg-color);
}

ul.dropdown-menu.level-3::after {
  filter: hue-rotate(15deg);
}

ul.dropdown-menu.level-4::after {
  filter: hue-rotate(30deg);
}

#navbar_nav ul.dropdown-menu li {
  width: 0;
  opacity: 0;
  right: -100vw;
  position: relative;
  transition: all ease .66s;
  margin: 0 auto;
}

#navbar_nav ul.dropdown-menu li a.nav-link {
  color: var(--submenu-text-color);
  border-bottom: 1px dotted var(--submenu-text-color) !important;
  padding: .75em 0;
}

#navbar_nav ul.dropdown-menu li:last-child a.nav-link {
  border-bottom: none !important;
}

#navbar_nav ul.dropdown-menu.show-submenu > li {
  opacity: 1;
  right: 0;
  width: 100%;
}

ul.dropdown-menu > .container a.back-button,
ul.dropdown-menu > .container a.goto-page-button,
ul.dropdown-menu > .container hr {
  transition: all ease .66s;
  position: relative;
  opacity: 0;
  right: -100vw;
}

ul.dropdown-menu.show-submenu > .container a.back-button,
ul.dropdown-menu.show-submenu > .container a.goto-page-button,
ul.dropdown-menu.show-submenu > .container hr {
  opacity: 1;
  right: 0;
}

ul.dropdown-menu a.back-button i,
ul.dropdown-menu a.goto-page-button i {
  position: relative;
  top: .20em;
}

/* ############### social nav ################## */

nav.navbar #social_nav,
nav.navbar #social_nav #menu-social-nav {
  position: fixed;
}

nav.navbar:not(.overlay) #social_nav {
  top: 50vh;
  transform: rotate(90deg);
}

nav.navbar.canvas-right #social_nav {
  left: 0;
}

nav.navbar.canvas-left #social_nav {
  right: 0;
}

nav.navbar.overlay #social_nav {
  bottom: 10vh;
}

nav.navbar #social_nav #menu-social-nav {
  left: 0;
  right: 0;
  flex-wrap: inherit;
}

nav.navbar.canvas-right #social_nav #menu-social-nav {
  bottom: 0;
}

nav.navbar.canvas-left #social_nav #menu-social-nav {
  top: 0;
}

nav.navbar #menu-social-nav li {
  transition: margin ease-in-out .33s;
}

nav.navbar:not(.overlay) #menu-social-nav li {
  background: var(--primary);
}

nav.navbar:not(.overlay) #menu-social-nav li {
  display: block;
  transform: rotate(-90deg);
}

nav.navbar.canvas-right:not(.open) #menu-social-nav li {
  margin-bottom: -100px;
}

nav.navbar.canvas-left:not(.open) #menu-social-nav li {
  margin-top: -100px;
}

nav.navbar.overlay:not(.open) #menu-social-nav li {
  margin-top: 100vh;
}


/* ############### navbar toggler ################## */

/* ############### animated burger menu: ################## */
/*  http://kylegoslan.co.uk/bootstrap-4-hamburger-menu-animation/ */

.navbar-toggler {
  z-index: 9998;
  position: relative;
  width: 50px;
  height: 50px;
  padding: 0;
  text-align: center;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  border: 0;
}

nav.navbar .navbar-toggler {
  position: absolute;
  right: 1.5rem;
  top: 0;
}

section#navbar.sticky-top nav.navbar .navbar-toggler {
  top: 40px;
}

#navbar:not(.position-relative) .navbar.centered .navbar-toggler {
  position: fixed;
}

nav.navbar .navbar-toggler {
  margin-top: 1rem;
}

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

.icon-bar {
  width: 30px;
  height: 2px;
  background-color: var(--navbar-toggler-color);
  display: block;
  transition: all 0.2s;
  margin-top: 6px
}

/*body.scroll .navbar-toggler .icon-bar,
.navbar-toggler:not(.collapsed) .icon-bar {
  background-color: var(--primary);
}*/

.navbar-toggler .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}

.navbar-toggler .middle-bar {
  opacity: 0;
}

.navbar-toggler .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}

.navbar-toggler.collapsed .top-bar {
  transform: rotate(0);
}

.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
}

.navbar-toggler.collapsed .bottom-bar {
  transform: rotate(0);
}

/* ###############  modal  ################## */

.modal::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  background-color: var(--black);
  opacity: 0;
}

.modal.show::after {
  opacity: .66;
}

#searchformModal {
  z-index: 9999;
}

#searchformModal button.close {
  background: transparent;
  border: 0;
  font-size: 2rem;
  color: var(--primary);
}

#searchformModal input {
  font-size: 1em;
  border: none;
  outline: none !important;
  border-radius: 0;
  padding: .25em !important;
}

#searchformModal input:focus {
  border-bottom: 2px solid var(--white);
}

#searchformModal button[type=submit] {
  position: relative;
  right: 0;
  bottom: 0;
  padding: .5em .75em;
  margin: 2em 0;
}


/* ############### main content ################## */

main#main.position-relative {
  z-index: 100;
}

#main.main-margin-top /* specific for fixed nav and no headerimage */ {
  margin-top: 9rem;
}

main#main .entry-header h1,
main#main .entry-header > *:not(.alignfull),
main#main .entry-content > *:not(.alignfull),
main#main .comments-area > *,
main#main .post-navigation > *,
main#main #related-posts > *,
.wp-block-group .wp-block-group__inner-container > *:not(.alignfull),
.max-width {
  max-width: none;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

/*main#main .container-fluid .entry-header h1,
main#main .container-fluid .entry-header > *:not(.alignfull):not(.row),
main#main .container-fluid .entry-content > *:not(.alignfull):not(.row),*/
main#main .container-fluid .comments-area > *:not(.row),
main#main .container-fluid .post-navigation > *:not(.row),
.max-width {
  padding-right: calc(var(--bs-gutter-x) * 0.75);
  padding-left: calc(var(--bs-gutter-x) * 0.75);
}

/* adjust col gutter space (default = * 0.5) */
.row > * {
  padding-right: calc(var(--bs-gutter-x) * 0.75);
  padding-left: calc(var(--bs-gutter-x) * 0.75);
}

:where(.wp-block-group.has-background) {
  padding-right: calc(var(--bs-gutter-x) * 0.75) !important;
  padding-left: calc(var(--bs-gutter-x) * 0.75) !important;
}


main#main .post-navigation a.page-numbers,
main#main .post-navigation span.page-numbers {
  text-decoration: none;
  background: var(--textcolor);
  padding: .5rem 1rem;
  border-radius: .5rem;
  color: white;
}

main#main .post-navigation span.page-numbers {
  background: var(--primary);
}

main#main .post-navigation a.prev.page-numbers,
main#main .post-navigation a.next.page-numbers {
  background: transparent;
  color: var(--primary);
  font-size: 2.5rem;
  padding: 0;
  padding-top: 1.3rem;
  position: relative;
  top: .5rem;
}

/* ############### sidebar ################## */

#sidebar {
  position: relative;
  min-height: 300px;
  width: 100%;
  margin-bottom: 2rem;
}

#sidebar ul#menu-social-nav li a {
  color: #fff;
  font-size: 2.0rem;
}

#sidebar ul.next-events {
  list-style-type: none;
}

#sidebar ul.next-events li {
  border-top: 2px solid #fff;
}

#sidebar ul.next-events li:last-child {
  border-bottom: 2px solid #fff;
}

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

/*footer#footer {
  border-top: 1rem solid var(--secondary);
}*/

footer#footer.position-relative {
  z-index: 100;
}

footer section#footer-bottom * {
  font-size: .9rem !important;
}

#footer-contact ul {
  list-style-type: none;
  padding-left: 0;
  line-height: 2;
}

footer .nav a,
footer .nav a:hover {
  color: var(--white);
}

footer ul.social-links a.nav-link {
  color: var(--white);
}

footer nav li:not(:last-child) {
  margin-right: 1rem;
}

footer img.logo {
  max-height: var(--logo-height);
  width: 100%;
  max-width: 400px;
}

footer ul.menu {
  padding-left: 0;
  list-style-type: none;
  font-size: 1.1em;
  font-weight: 900;
  line-height: 2.2;
}

/* ############### comments ################## */

#comments p:not(.comment-form-cookies-consent) label {
  display: block;
}

section.comment-section .comment-respond {
  max-width: 600px;
  margin: 3rem auto 1.5rem;
}

.comment-form * input:not( [type=checkbox] ),
.comment-form textarea {
  width: 100%;
}

#comments * ul,
#comments * ol {
  list-style-type: none;
}

ul.comment-list {
  padding: 0;
}

/*ul.comment-list li.comment {
  border-bottom: 1px solid var(--primary);
  border-top: 1px solid var(--primary);
}*/

.comment-block span.reply {
  top: 1.5rem;
  right: 1.5rem;
}


/* ##################################### */
/*  custom block settings */
/* ##################################### */


/* ############### wordpress-blocks ################## */

.wp-block-image figcaption {
  position: absolute;
  width: 100%;
  background: var(--primary);
  color: #fff;
  padding: 1rem;
  bottom: 0;
  margin: 0;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.wp-block-media-text {
  padding: 0 !important;
}

.wp-block-media-text .wp-block-media-text__content > *,
.wp-block-media-text .wp-block-media-text__media {
  padding-right: calc(var(--bs-gutter-x) * 0.75);
  padding-left: calc(var(--bs-gutter-x) * 0.75);
}

/* override wordpress default settings (switch at 600px) */
@media screen and (max-width: 767px) {
  .wp-block-media-text.is-stacked-on-mobile {
    grid-template-columns: 100% !important;
  }
}

.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding: 0;
}

.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
  grid-column: 1;
  grid-row: 2;
}

.wp-block-media-text .wp-block-media-text__content {
  padding: 0;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.wp-block-media-text__media {
  height: 100%;
  max-height: 300px;
  object-fit: contain;
}

.wp-block-media-text__media img, 
.wp-block-media-text__media video {
  height: 100%;
  object-fit: contain;
}

.container-fluid .alignfull {
  width: 100vw;
  margin-left: calc(var(--bs-gutter-x) * -0.75);
}

section.wp-block-group {
  padding-top: 3em;
  padding-bottom: 3em;
}

.wp-block-group.has-background-image { 
  position: relative;
  background: url(images/bg.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.wp-block-group.has-background-image * { 
  position: relative;
  z-index: 500;
}

.wp-block-group.has-background-image:after {
  content: "";
  display: block;
  position: absolute;
  width: 100vw;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #000;
  opacity: .66;
  z-index: 1;
}

.wp-block-group.has-background-image.background-image-1 {
  background-image: url(/wp-content/uploads/2024/06/image-bilder-home-of-rock-radio_danny-howe-bn-D2bCvpik-unsplash.jpg);
}

.wp-block-group.has-background-image.background-image-2 {
  background-image: url(/wp-content/uploads/2024/06/image-bilder-home-of-rock-radio_markus-spiske-E8M4dlfz0Q4-unsplash.jpg);
}

.wp-block-group.has-background-image.background-image-3 {
  background-image: url(/wp-content/uploads/2024/06/image-bilder-home-of-rock-radio_danny-howe-bn-D2bCvpik-unsplash.jpg);
  background-size: 200%;
  background-position: top left;
}

.wp-block-loginout p label {
  display: block !important;
}

.wp-block-loginout p.login-remember {
  display: none;
}


/* ############### custom blocks ################## */

/* ############### teaser cards ################## */

.card,
.card * {
  transition: ease all .66s;
  overflow: hidden;
}

.card img {
  object-fit: cover;
  width: 100%;
  height: 220px;
}

.card-text * {
  line-height: 1.45 !important;
  font-size: .95em !important;
}

.card-title {
  hyphens: auto;
}

.container .card.tile img {
  height: 90vw;
  width: 100%;
}

.container-fluid .card.tile img {
  height: 90vw;
  width: 100vw;
}

.card:hover {
  transform: translateY(-5px) scale(1.05);
  border-color: var(--link-hover-color) !important;
}

.card:hover .card-title,
.card:hover .card-title a,
.card:hover a {
  color: var(--link-hover-color) !important;
}

.card:hover .btn {
  color: var(--white) !important;
  background-color: var(--link-hover-color) !important;
  border-color: var(--link-hover-color) !important;
}

/*.card:hover .btn-white,
.card:hover .btn-outline {
  color: var(--white) !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}*/

.card .stretched-link:hover {
  cursor: pointer;
}

.entry-content > *:not(.wp-block-card-slider) .card:hover {
  -webkit-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.33) !important;
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.33) !important;
}

.card.horizontal,
.card.tile {
  flex-wrap: wrap;
  flex-direction: row;
}

.card.tile {
  overflow: hidden;
}

.card.tile img {
  height: 90vw;
  transition: all ease-in-out .33s;
}

.card.tile .card-title {
  position: absolute;
  text-align: center;
  color: #fff;
  width: 100%;
  padding: 1rem .5rem;
  z-index: 10;
  height: 100%;
  background: rgba(0,0,0,0.5);
  transition: all ease-in-out .33s;
}

.card.tile:hover .card-title {
  transform: translateY(-5px);
  background: rgba(0,0,0,0);
  color: #000;
}

.card.tile:hover .card-title a {
  text-decoration: none !important;
  text-shadow: 3px 0px 20px #000;
}

.card.tile:hover {
  transform: none !important;
}

.card.tile:hover img {
  scale: 105%;
}

.card.tile .card-title a {
  color: #fff;
}

/* ############### main slider ################## */

#main_slider {
  height: 400px !important;
}

#main_slider img.slider-image,
.wp-block-slider img.slider-image {
  width: 100%;
  object-fit: cover;
}

#main_slider .carousel-caption {
  bottom: 3rem;
  padding: 0;
  left: 1rem;
  right: auto;
  text-align: left;
}

/*.carousel-indicators {
  bottom: 1rem;
}*/

/*.carousel-indicators button {
  width: 15px;
  height: 15px;
  -webkit-border-radius: 20rem;
  -moz-border-radius: 20rem;
  border-radius: 20rem;
  border-top-left-radius: 20rem;
  border-top-right-radius: 20rem;
  border-bottom-left-radius: 20rem;
  border-bottom-right-radius: 20rem;
  border-collapse: separate;
  margin-right: 1.25rem;
  margin-bottom: 1.0rem;
  background-color: var(--textcolor);
  border: 0;
}*/

.carousel-indicators button.active {
  background-color: var(--primary);
}

.carousel-indicators button:not(.active) {
  background-color: #eee;
}

.carousel-indicators button:last-child {
  margin-right: 0;
}

.carousel-control-next,
.carousel-control-prev {
  background-color: transparent;
  box-shadow: none;
  border: 0;
  font-size: 4rem;
  max-width: 80px;
}

.carousel-control-next span {
  position: absolute;
  right: 0;
}

.carousel-control-prev span {
  position: absolute;
  left: 0;
}

/* change transition duration to control the speed of fade effect
.carousel-item {
  transition: 
    opacity .33s ease-in-out, 
    transform .33s ease-in-out;
} */


/* ############### block: slider ################## */

.wp-block-slider,
.wp-block-slider .carousel,
.wp-block-slider .carousel-inner,
.wp-block-slider img.slider-image {
  min-height: 600px;
}

.wp-block-slider .carousel-item {
  position: absolute;
}

.wp-block-slider img.slider-image {
  width: 100%;
  height: 300px;
}

.wp-block-slider .carousel-caption {
  position: relative;
  height: 100%;
  min-height: 300px;
  bottom: 0;
  left: 0;
  background-color: var(--primary);
}

.wp-block-slider .carousel-caption p {
  font-size: 1em !important;
  line-height: 1.3;
}

.wp-block-slider .carousel-indicators {
  bottom: 1em;
}


/* ############### block: card slider ################## */

.wp-block-card-slider.alignfull {
  width: auto;
  margin-left: 0;
  margin-right: 0;
}

.wp-block-card-slider,
.wp-block-card-slider .card-slider-inner {
  width: 100%;
}

.wp-block-card-slider.alignfull .card-slider-inner {
  width: calc(100vw - calc(var(--bs-gutter-x) * 1.5));
}

.wp-block-card-slider.outline-gradient::before {
  max-height: 380px;
  display: none;
}

.wp-block-card-slider .card-slider-inner .card-slider-row {
  position: relative;
  display: flex;
  flex-flow: row;
  flex-wrap: nowrap;
  margin: 0 3rem;
  width: calc(100% - 6em);
  gap: 0;
  overflow-x: scroll;
}

.wp-block-card-slider .card-slider-inner .card {
  flex-basis: calc(100% - calc(var(--bs-gutter-x) * 1.0));
}

.wp-block-card-slider.card-slider-fullsize .card-slider-inner .card {
  flex-basis: calc(100% - calc(var(--bs-gutter-x) * 1.0));
}

.wp-block-card-slider .card-slider-inner figure.card-image img {
  object-position: top;
  height: 100%;
  max-height: 350px;
}

.wp-block-card-slider figure.card-image.rounded,
.wp-block-card-slider figure.card-image.rounded img {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.wp-block-card-slider .card-body.rounded {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.wp-block-card-slider .carousel-control-next,
.wp-block-card-slider .carousel-control-prev,
.wp-block-card-slider .carousel-control-next span,
.wp-block-card-slider .carousel-control-prev span {
  display: inline-block;
  width: auto;
  position: static;
  font-size: 2rem;
}

/* change transition duration to control the speed of fade effect */
.wp-block-card-slider .card-slider-inner {
  transition: 
    opacity 0.33s ease-in-out, 
    transform 0.33s ease-in-out;
} 

/*.wp-block-card-slider .card:hover .card-body {
  -webkit-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.33);
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.33);
}*/


/* ############### block: accordion ################## */

/*.wp-block-accordion .accordion-item,
.accordion-item .accordion-header {
  background-color: transparent;
}*/

.accordion-item {
  color: var(--textcolor);
}

.accordion-item img {
  margin-bottom: 1rem;
}

.accordion-body {
  padding: 1em 2em;
  margin-top: 1rem;
}

/*.accordion-button {
  border-bottom: 5px solid var(--primary);
}*/

.accordion-button:focus {
  border-color: var(--primary);
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  background-color: var(--primary) !important;
  color: #fff;
}

.accordion-button i {
  transition: ease-in-out 0.33s;
  font-size: 1.3rem;
}

.accordion-button:not(.collapsed) i {
  transform: rotate(90deg);
}

.accordion-button::after {
  display: none;
}


/* ############### block: timeline ############### */

.wp-block-timeline {
  position: relative;
}

.wp-block-timeline::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 5px;
  background-color: var(--primary);
  z-index: 0;
}

.wp-block-timeline .timepoint {
  overflow: visible;
  transition: ease-in-out all .33s;
}

.wp-block-timeline .timepoint::after {
  content: " ";
  display: block;
  position: absolute;
  top: 40%;
  left: calc(-45px - 9%);
  height: 30px;
  width: 30px;
  border-radius: 100%;
  background-color: var(--primary);
  border-color: var(--secondary);
  z-index: 999;
}

.wp-block-timeline .accordion-button:not(.collapsed) {
  background-color: transparent !important;
  color: #fff;
}

.wp-block-timeline .accordion-button i {
  transition: ease-in-out 0.33s;
  font-size: 2rem;
  animation-name: move-up-down;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.wp-block-timeline .accordion-button:not(.collapsed) i {
  transform: rotate(-180deg);
  animation: none;
}

/* ############### block: custom gallery  ############### */

.wp-block-custom-gallery.masonry-gallery .grid-item {
  break-inside: avoid;
  margin-bottom: 1rem;
}

.wp-block-custom-gallery.masonry-gallery .grid-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* responsive column count (masonry)*/ 

.wp-block-custom-gallery.masonry-gallery {
  column-count: 1;
  column-gap: 1rem;
}

@media screen and (min-width: 576px) { 
  .wp-block-custom-gallery.masonry-gallery {
    column-count: 2;
  }
}
@media screen and (min-width: 992px) { 
  .wp-block-custom-gallery.masonry-gallery {
    column-count: 3;
  }
}
@media screen and (min-width: 1200px) { 
  .wp-block-custom-gallery.masonry-gallery {
    column-count: 4;
  }
}


/* ############### cpt: contact-person ############### */

.wp-block-group.is-layout-flex {
  flex-wrap: wrap;
  gap: .5em;
}

.wp-block-contactperson {
  max-width: 350px !important;
  margin: 0 auto !important;
}

.wp-block-contactperson .card * {
  flex-basis: 100%;
}

.wp-block-contactperson figure {
  width: 33.33%;
  min-height: 250px;
}

.wp-block-contactperson .card-body {
  width: 66.66%;
}

.wp-block-group.is-layout-flex .wp-block-contactperson {
  flex-basis: 100%;
}

.wp-block-contactperson .card-img i.bi {
  font-size: 8em;
  align-self: center;
}


/* ############### booking press ############### */

.bpa-frontend-main-container {
  padding: 0 !important;
}


/* ############### modern event calendar ############### */

.mec-color, .mec-color-before ::before, .mec-color-hover:hover, .mec-wrap .mec-color, .mec-wrap .mec-color-before ::before, .mec-wrap .mec-color-hover:hover,
.mec-single-event .mec-events-meta-group-booking form > h4::before, .mec-single-event .mec-frontbox-title::before, .mec-single-event .mec-wrap-checkout h4::before {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.mec-event-article > * {
  float: none !important;
  display: block !important;
  width: 100% !important;
  color: #fff !important;
  padding: 0 !important;
  text-align: left !important;
}

.mec-event-list-minimal a.mec-detail-button {
  background-color: #fff;
}

.mec-event-list-minimal h4.mec-event-title {
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
}

h4.mec-event-title a{
  color: #fff !important;
  text-decoration: none;
}

.mec-event-list-minimal .mec-event-date {
  margin-right: 1rem;
}

.mec-bg-color, .mec-bg-color-hover:hover, .mec-wrap .mec-bg-color, .mec-wrap .mec-bg-color-hover:hover {
  background-color: var(--primary);
}

a.mec-detail-button {
  background-color: #fff;
  border-radius: 1rem;
  color: var(--primary) !important;
  margin-top: 1rem;
  width: 100%;
  text-decoration: none;
}

.mec-events-event-image img {
  height: auto;
}

.mec-event-grid-modern .mec-event-article {
  border: 1px solid var(--primary);
  margin-bottom: 1rem;
  padding: 2rem;
  background: #fff;
  color: var(--primary) !important; 
  min-height: 350px;
  border-radius: 1rem;
}

.mec-event-grid-modern .mec-event-article .mec-event-content {
  background-color: transparent;
}

.mec-event-grid-modern .mec-event-article .mec-event-footer {
  position: absolute;
  bottom: 0;
  height: auto;
  margin: 0;
}

.mec-event-grid-modern .mec-event-sharing-wrap {
  left: auto;
  padding-left: 0;
  right: 3rem;
  bottom: 0;
}

.mec-event-sharing-wrap li a, .mec-event-sharing-wrap:hover li ul li a {
  color: var(--white);
  text-decoration: none;
  font-size: 1.25rem;
}

.mec-event-social-icon a {
  color: var(--primary);
}


/* ############### contact-form-7 ############### */

.wpcf7-form.init p,
.wpcf7-text {
  width: 100%;
}

.wpcf7-form.init p *:not( input[type=checkbox], input[type=submit] ),
.wpcf7-text *:not( input[type=checkbox], input[type=submit] ) {
  width: auto;
  max-width: 100%;
}

.wpcf7-form.init p {
  margin: 0 auto 1rem;
  text-align: center;
}

.wpcf7 input,
.wpcf7 textarea {
  font-size: 1rem;
  border: 1px solid var(--primary);
  border-radius: .5rem;
  padding: .5rem .75rem;
  transition: ease all .6s;
}

.wpcf7 input[type=submit] {
  border: 1px solid var(--primary);
  background-color: #fff;
}

.wpcf7-spinner {
  margin: .75rem;
  position: absolute;
}

.wpcf7-form-control.wpcf7-acceptance input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
}

/* ############### featherlight ###############  */

.featherlight-content {
  border-radius: 1em;
}

iframe.featherlight-inner {
  height: 75vh;
  width: 75vw;
  max-height: 900px;
  max-width: 600px;
}

.featherlight-next span, 
.featherlight-previous span {
  display: block;
  background: transparent !important;
  font-size: 3em;
  color: var(--primary);
}

.featherlight-next:hover, 
.featherlight-previous:hover {
  background: transparent;
}

.featherlight .featherlight-close-icon {
  top: .25em;
  right: .25em;
  font-size: 2em;
  line-height: 1em;
}


/* ############### woocommerce ###############  */

.woocommerce .quantity .qty {
  width: 4em;
  text-align: center;
  height: 3em;
}

.woocommerce div.product form.cart .button {
  vertical-align: middle;
  float: left;
  height: 3em;
  background-color: var(--secondary);
}



/* ##################################### */
/* misc */
/* ##################################### */

a.scroll-top {
  z-index: 9996;
  position: fixed;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  right: 1rem;
  bottom: -1rem;
  opacity: 0;
  width: 40px;
  height: 40px;
  font-size: 2rem;
  background-color: var(--white);
  color: var(--primary);
  border: var(--primary) 2px solid;
  border-radius: .33rem;
  -webkit-transition: .33s ease-in-out;
  -moz-transition: .33s ease-in-out;
  -o-transition: .33s ease-in-out;
  transition: .33s ease-in-out;
  animation-name: move-up-down;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

a.scroll-top:hover {
  background-color: var(--primary);
  color: var(--white) !important;
  border-color: var(--white);
}

body.scroll a.scroll-top {
  opacity: 1;
  bottom: 1rem;
}

body.overflow-hidden a.scroll-top {
  display: none;
}

i.bi {
  margin-right: .5rem;
}

hr {
  opacity: 1;
}

input.submit,
input.search-submit,
input.mailpoet_submit,
textarea {
  border: 1px solid var(--textcolor);
  border-radius: .25rem;
  max-width: 100%;
  padding: calc(.667em + 2px) calc(1.333em + 2px) !important;
  transition: all ease-in-out .33s;
}

input:focus,
textarea:focus { 
  outline: 2px solid var(--primary) !important;
  box-shadow: none;
}

.btn,
.btn:focus,
input.submit,
input.search-submit,
input.mailpoet_submit,
a.wp-block-button__link {
  border: 0;
  max-width: 320px;
  padding: calc(.667em + 2px) calc(1.333em + 2px);
  line-height: inherit;
  transition: all ease-in-out .33s;
  border-radius: .25rem;
  border: 1px solid #fff;
}

.btn:focus,
.btn-check:focus + .btn-primary, 
.btn-primary:focus,
input.submit:focus,
input.search-submit:focus,
input.mailpoet_submit:focus { 
  outline: none !important;
  box-shadow: none !important;
}

input.submit,
input.search-submit,
input.mailpoet_submit {
  margin: 0 auto;
}

.is-vertically-aligned-center {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.object-top {
  object-position: top;
}

.object-center {
  object-position: center;
}

.object-bottom {
  object-position: bottom;
}

.pull-up, 
.wp-block-columns.pull-up {
  margin-top: -150px;
  position: relative;
  z-index: 10;
}

.outline-gradient::before {
  content: " ";
  height: 100%;
  width: 100%;
  position: relative;
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, .5) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .5) 75%, rgba(255, 255, 255, 1));
  display: block;
  position: absolute;
  z-index: 1;
}

/* default value: var(--bs-border-radius) */

.rounded,
.rounded img {
  border-radius: 1rem !important;
}

.rounded-top,
.rounded-top img {
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
}

.rounded-bottom,
.rounded-bottom img {
  border-bottom-right-radius: 1rem !important;
  border-bottom-left-radius: 1rem !important;
}

.rounded-left, 
.rounded-left img {
  border-top-left-radius: 1rem !important;
  border-bottom-left-radius: 1rem !important;
}

.rounded-right,  
.rounded-right img {
  border-top-right-radius: 1rem !important;
  border-bottom-right-radius: 1rem !important;
}

.z-index-1 {
  z-index: -1 !important;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
  border-color: var(--textcolor);
}

/* =====================================================
   GLOBAL CUSTOM CHECKBOX / RADIO STYLING
   Überschreibt Standard HTML Inputs überall:
   - native forms
   - Contact Form 7
   - WooCommerce
   - Gutenberg Forms
   - etc.
===================================================== */

/* ---------- Variablen ---------- */
:root{
  --check-size: 1.25rem;
  --check-radius: .35rem;
  --check-border: 2px;
  --check-color: var(--primary);
  --check-bg: #fff;
  --check-border-color: rgba(0,0,0,.25);
  --check-shadow: 0 0 0 .25rem rgba(13,110,253,.18);
  --check-transition: .18s ease;
}

/* ---------- Input verstecken, aber zugänglich lassen ---------- */
input[type="checkbox"],
input[type="radio"]{
  position: absolute !important;
  opacity: 0 !important;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

/* ---------- Label vorbereiten ---------- */
input[type="checkbox"] + label,
input[type="radio"] + label,
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]),
.wpcf7-list-item label,
.woocommerce-form__label{
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: flex-start;
  gap: .65rem;
  line-height: 1.45;
}

/* ---------- Padding wenn Input im Label liegt ---------- */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]),
.wpcf7-list-item label,
.woocommerce-form__label{
  padding-left: calc(var(--check-size) + .6rem);
}

/* ---------- Standard HTML: input + label ---------- */
input[type="checkbox"] + label::before,
input[type="radio"] + label::before,

/* Input innerhalb Label */
label:has(> input[type="checkbox"])::before,
label:has(> input[type="radio"])::before,

/* CF7 */
.wpcf7-list-item label::before,

/* WooCommerce */
.woocommerce-form__label::before{
  content: "";
  width: var(--check-size);
  height: var(--check-size);
  min-width: var(--check-size);
  border: var(--check-border) solid var(--check-border-color);
  background: var(--check-bg);
  transition: all var(--check-transition);
  position: absolute;
  left: 0;
  top: .15rem;
  box-sizing: border-box;
}

/* Checkbox */
input[type="checkbox"] + label::before,
label:has(> input[type="checkbox"])::before,
.wpcf7-list-item label::before,
.woocommerce-form__label::before{
  border-radius: var(--check-radius);
}

/* Radio */
input[type="radio"] + label::before,
label:has(> input[type="radio"])::before{
  border-radius: 50%;
}

/* =====================================================
   CHECKED STATES
===================================================== */

/* Standard HTML */
input[type="checkbox"]:checked + label::before,
input[type="radio"]:checked + label::before,

/* Input im Label */
label:has(> input[type="checkbox"]:checked)::before,
label:has(> input[type="radio"]:checked)::before,

/* CF7 */
.wpcf7-list-item label:has(input[type="checkbox"]:checked)::before,

/* WooCommerce */
.woocommerce-form__label:has(input[type="checkbox"]:checked)::before{
  background: var(--check-color);
  border-color: var(--check-color);
}

/* ---------- Checkmark ---------- */
input[type="checkbox"]:checked + label::after,
label:has(> input[type="checkbox"]:checked)::after,
.wpcf7-list-item label:has(input[type="checkbox"]:checked)::after,
.woocommerce-form__label:has(input[type="checkbox"]:checked)::after{
  content: "";
  position: absolute;
  left: .42rem;
  top: .42rem;
  width: .35rem;
  height: .65rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- Radio Dot ---------- */
input[type="radio"]:checked + label::after,
label:has(> input[type="radio"]:checked)::after{
  content: "";
  position: absolute;
  left: .38rem;
  top: .52rem;
  width: .45rem;
  height: .45rem;
  background: #fff;
  border-radius: 50%;
}

/* =====================================================
   HOVER / FOCUS / ACTIVE
===================================================== */

input[type="checkbox"] + label:hover::before,
input[type="radio"] + label:hover::before,
label:hover::before{
  border-color: var(--check-color);
}

input[type="checkbox"]:focus + label::before,
input[type="radio"]:focus + label::before,
label:has(> input:focus)::before{
  box-shadow: var(--check-shadow);
}

input[type="checkbox"]:disabled + label,
input[type="radio"]:disabled + label,
label:has(> input:disabled){
  opacity: .55;
  cursor: not-allowed;
}

/* =====================================================
   DARK MODE
===================================================== */

/*@media (prefers-color-scheme: dark) {

  :root{
    --check-bg: #1f1f1f;
    --check-border-color: rgba(255,255,255,.28);
  }

}*/

/* =====================================================
   FIXES
===================================================== */

/* CF7 Standard Margin entfernen */
.wpcf7-list-item{
  margin: 0;
}

/* WooCommerce */
.woocommerce-form__label-for-checkbox{
  margin-bottom: 0;
}

/* ############### video Oembed ############### */

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


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

/* ##################################### */
/* small screen / smartphone landscape */
/* ##################################### */
@media screen and (min-width: 576px) {

  /* container */

  body {
    overflow-x: hidden;
  }

  main#main .entry-header > *:not(.alignfull),
  main#main .entry-content > *:not(.alignfull),
  main#main .comments-area > *,
  main#main .post-navigation > *,
  main#main #related-posts > *,
  .wp-block-group .wp-block-group__inner-container > *:not(.alignfull),
  .max-width,
  ul.dropdown-menu > *,
  nav.overlay #navbar_nav ul.nav > * {
    max-width: 540px;
  }

  /* adjust col gutter space (default = * 0.5) */
  .row > * {
    padding-right: calc(var(--bs-gutter-x) * 0.75);
    padding-left: calc(var(--bs-gutter-x) * 0.75);
  }

  .container .card.tile img {
    max-height: 540px;
  }

  body section#navbar:not(.static-top) .logo-wrapper {
  }

  body.scroll section#navbar.sticky-top nav.centered .logo-wrapper {
    box-shadow: none;
  }



}

/* ##################################### */
/* medium sceen / tablet portrait */
/* ##################################### */
@media screen and (min-width: 768px) {

  /* container */

  main#main .entry-header > *:not(.alignfull),
  main#main .entry-content > *:not(.alignfull),
  main#main .comments-area > *,
  main#main .post-navigation > *,
  main#main #related-posts > *,
  .wp-block-group .wp-block-group__inner-container > *:not(.alignfull),
  .max-width,
  ul.dropdown-menu > *,
  nav.overlay #navbar_nav ul.nav > * {
    max-width: 720px;
  }

  /* H */

  h1,
  .h1 {
    font-size: 2.5rem
  }

  h2,
  .h2 {
    font-size: 2.0rem
  }

  h3,
  .h3 {
    font-size: 1.75rem
  }

  h4,
  .h4 {
    font-size: 1.5rem
  }

  body * p.has-huge-font-size {
    font-size: 35px !important;
   }
   
   body * p.has-large-font-size {
     font-size: 30px !important;
   }
   
   body * p.has-medium-font-size {
     font-size: var(--wp--preset--font-size--medium) !important;
   }

  /* header/nav */

  .logo-wrapper img.logo {
    min-height: 180px;
  }

  section#navbar .logo-wrapper.position-absolute {
    left: auto;
  }

  li.menu-item.active::before {
    left: 15vw;
  }

  .container-fluid .card.tile img {
    height: 30vw; /* Je nach Spaltenanzahl anpassen! */
    max-height: 720px;
    width: 100%;
    padding-right: 0;
  }
  
  /*body section#navbar .logo-wrapper {
    max-width: 33%;
    max-height: calc( var(--logo-height) * 0.90 )
  }*/

  body section#navbar .logo-wrapper.logo-box {
    max-height: calc( var(--logo-height) * 0.90 + 2rem )
  } 

  /*body.scroll section#navbar.fixed-top .logo-wrapper {
    max-height: calc( var(--logo-height) * 0.66 )
  }*/

  /* static social nav */

  nav.navbar #social_nav {
    position: static;
  }

  nav.navbar:not(.overlay) #social_nav {
    transform: none;
  }

  nav.navbar #social_nav #menu-social-nav {
    position: static;
    flex-wrap: wrap;
  }

  nav.navbar:not(.overlay) #menu-social-nav li {
    display: block;
    transform: none;
    background: transparent;
  }

  nav.navbar.canvas-right:not(.open) #menu-social-nav li {
    margin-bottom: 0;
  }

  nav.navbar.canvas-left:not(.open) #menu-social-nav li {
    margin-top: 0;
  }

  nav.navbar.overlay:not(.open) #menu-social-nav li {
    margin-top: 0;
  }

  /* main slider heights */

  #main_slider, 
  #main_slider .carousel-inner,
  #main_slider .carousel-item,
  #main_slider img.slider-image {
    height: 100% !important;
  }

  header#header:not(.fixed-header).h-25,
  header#header:not(.fixed-header) #main_slider.h-25,
  header#header:not(.fixed-header) #main_slider.h-25 img.slider-image {
    height: calc(25vh - var(--navbar-height)) !important;
  }
  
  header#header.h-25,
  header#header #main_slider.h-25,
  header#header #main_slider.h-25 img.slider-image {
    height: 25vh !important;
  }

  header#header:not(.fixed-header).h-33,
  header#header:not(.fixed-header) #main_slider.h-33,
  header#header:not(.fixed-header) #main_slider.h-33 img.slider-image{
    height: calc(33vh - var(--navbar-height)) !important;
  }

  header#header.h-33,
  header#header #main_slider.h-33,
  header#header #main_slider.h-33 img.slider-image{
    height: 33vh !important;
  }

  header#header:not(.fixed-header).h-50,
  header#header:not(.fixed-header) #main_slider.h-50,
  header#header:not(.fixed-header) #main_slider.h-50 img.slider-image{
    height: calc(50vh - var(--navbar-height)) !important;
  }

  header#header.h-50,
  header#header #main_slider.h-50,
  header#header #main_slider.h-50 img.slider-image{
    height: 50vh !important;
  }

  header#header:not(.fixed-header).h-66,
  header#header:not(.fixed-header) #main_slider.h-66,
  header#header:not(.fixed-header) #main_slider.h-66 img.slider-image{
    height: calc(66vh - var(--navbar-height)) !important;
  }

  header#header.h-66,
  header#header #main_slider.h-66,
  header#header #main_slider.h-66 img.slider-image{
    height: 66vh !important;
  }

  header#header:not(.fixed-header).h-75,
  header#header:not(.fixed-header) #main_slider.h-75,
  header#header:not(.fixed-header) #main_slider.h-75 img.slider-image {
    height: calc(75vh - var(--navbar-height)) !important;
  }

  header#header.h-75,
  header#header  #main_slider.h-75,
  header#header #main_slider.h-75 img.slider-image {
    height: 75vh !important;
  }

  header#header:not(.fixed-header).h-100,
  header#header:not(.fixed-header) #main_slider.h-100,
  header#header:not(.fixed-header) #main_slider.h-100 img.slider-image {
    height: calc(100vh - var(--navbar-height))!important;
  }

  header#header.h-100,
  header#header #main_slider.h-100,
  header#header #main_slider.h-100 img.slider-image {
    height: 100vh !important;
  }

  /* slider-block */

  .wp-block-slider,
  .wp-block-slider .carousel,
  .wp-block-slider .carousel-inner,
  .wp-block-slider img.slider-image {
    min-height: auto;
  }

  .wp-block-slider .carousel-item {
    position: relative;
  }

  .wp-block-slider img.slider-image {
    max-height: 650px;
  }

  .wp-block-slider .carousel-caption {
    min-height: inherit;
    height: 300px;
  }

  /* timeline-block */

  .wp-block-timeline :not(#timeline-timepoint-1).timepoint {
    margin-top: -10%;
  }

  .wp-block-timeline::after {
    left: calc(50% - 5px);
  }

  .wp-block-timeline .offset-md-0 .timepoint::after {
    left: auto;
    right: -34.5%;
  }

  .wp-block-timeline .offset-md-7 .timepoint::after {
    left: -36.8%;
  }

  /* wp-block-columns */

  /*.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: calc(50% - 2em) !important;
  }*/

  /* wp-block-group */

  .wp-block-group.is-layout-flex {
    flex-wrap: nowrap;
  }

  /* teaser cards */

  .card.horizontal .card-image {
    width: 25%;
  }

  .card.horizontal .card-body {
    width: 75%;
  }

  /* card slider block */

  .wp-block-card-slider:not(.card-slider-fullsize) .card-slider-inner .card{
    flex-basis: calc(50% - 2rem);
  }

  /* contactperson */

  .wp-block-contactperson {
    max-width: none !important;
    margin: 0 !important;
  }

  .wp-block-contactperson .card * {
    flex-basis: auto;
  }

  .wp-block-group.is-layout-flex .wp-block-contactperson {
    flex-basis: calc(50% - 0.5em);
  }

  /* media-text block */

  .wp-block-media-text {
    display: grid;
  }

  .wp-block-media-text:not(.has-media-on-the-right).is-stacked-on-mobile .wp-block-media-text__media {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
  }

  .wp-block-media-text:not(.has-media-on-the-right).is-stacked-on-mobile .wp-block-media-text__content {
    grid-column: 2;
    grid-row: 1;
  }
  
  .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__media {
    grid-column: 2;
    grid-row: 1;
    padding: 0;
  }

  .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__content {
    grid-column: 1;
    grid-row: 1;
  }
  
  .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    padding-right: 1rem;
  }

  .wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content {
    padding-left: 1rem;
  }
  
  .wp-block-media-text__media {
    height: 100%;
    max-height: 500px;
    object-fit: contain;
  }
  
  .wp-block-media-text__media img, 
  .wp-block-media-text__media video {
    height: 100%;
    object-fit: contain;
  }

  /* contact-form 7 */

  /*.wpcf7-form.init p {
    width: 75%;
  }

  .wpcf7-form.init p *:not( input[type=checkbox], input[type=submit] ) {
    width: 100%;
  }*/

}

/* ##################################### */
/* large screen / desktop */
/* ##################################### */
@media screen and (min-width: 992px) {

  /* ############### typo ############### */

  body * p.has-huge-font-size {
    font-size: var(--wp--preset--font-size--huge) !important;
   }
   
  body * p.has-large-font-size {
    font-size: var(--wp--preset--font-size--large) !important;
  }

  /* ############### logo ############### */
  
  body section#navbar:not(.static-top) .logo-wrapper {
    max-width: 25%;
    max-height: calc( var(--logo-height) * 0.95 );
    z-index: 9940;
    height: 100%;
    opacity: 1;
    position: absolute;
    top: -15vh;
  }

  .logo-wrapper img.logo {
    min-height: 230px;
  }

  body section#navbar a.logo-mobile {
    max-width: 25%;
  }

  body section#navbar.sticky-top nav.centered a.logo-mobile {
    position: absolute;
    left: 1em;
    top: 50px;
    width: 25%;
    height: 60% !important;
  } 

  body section#navbar .logo-wrapper.logo-box {
    max-height: calc( var(--logo-height) * 0.95 + 2rem )
  }

  section#navbar.sticky-top nav.centered .logo-wrapper {
    top: calc(70px + 50px);
  }

  section#navbar.fixed-top nav.centered .logo-wrapper {
    top: 120px;
    opacity: 1;
    position: fixed !important;
    transition: all .33s ease;
    transition-delay: .33s;
  }

  section#navbar.static-top .logo-wrapper a.logo-mobile {
    transition: none;
  }
  
  body.scroll section#navbar.fixed-top nav.centered .logo-wrapper {
    opacity: 0;
    transition-delay: 0s;
    /*height: var(--logo-height) !important;
    max-height: none !important;*/
    visibility: collapse;
  }

  body.scroll section#navbar:not(.fixed-top) .logo-wrapper {
    margin: 0 auto !important;
  }

  section#navbar .logo-wrapper .navbar-brand {
    justify-content: start;
  }

  body.scroll section#navbar.static-top .logo-wrapper a.navbar-brand {
    display: none;
  }

  body.scroll section#navbar.static-top .logo-wrapper a.logo-mobile {
    display: block;
  }

  /* ############### nav ############### */ 

  nav {
    height: auto;
    transition: all ease-in-out .33s;
    top: 15vh;
  }

  body.scroll nav {
    top: 0;
  }

  nav #navbar_nav {
    position: static;
    background-color: transparent;
    z-index: auto;
    margin: 0;
    opacity: 1;
    visibility: visible;
    overflow: visible;
    transform: none !important;
    max-width: none !important;
  }

  nav #navbar_nav::after {
    display: none;
  }

  nav #navbar_nav ul.nav {
    justify-content: flex-end;
    flex-flow: row;
    margin: 0;
  }

  nav.overlay #navbar_nav ul.nav > * {
    width: fit-content;
    margin: unset;  
  }

  nav.navbar #navbar_nav a.nav-link {
    width: auto;
    border: none;
  }

  nav.navbar ul#menu-main-nav-de > li > a.nav-link {
    position: relative;
    z-index: 9960;
    right: auto;
  }

  nav.overlay #navbar_nav ul.nav, 
  nav.canvas-left #navbar_nav ul.nav, 
  nav.canvas-right #navbar_nav ul.nav {
    z-index: 1;
  }

  nav.overlay #navbar_nav ul.nav,
  nav.canvas-left #navbar_nav ul.nav,
  nav.canvas-right #navbar_nav ul.nav {
    padding-top: 0;
    position: static;
    overflow: inherit;
    background-color: transparent;
    width: 100%;
    opacity: 1;
    visibility: visible;
  }

  nav.navbar:not(.open) #navbar_nav li {
    transform: none !important;
    opacity: 1 !important;
  }

  nav.navbar.centered #navbar_nav ul.nav {
    justify-content: center;
  }

  nav.navbar:not(.centered) #navbar_nav ul.nav {
    justify-content: end;
  }

  section#navbar.fixed-top .navbar.centered section#menu-nav {
    top: calc(var(--logo-height) + 70px);
    transition: all ease .66s;
  }

  body.scroll section#navbar.fixed-top .navbar.centered section#menu-nav {
    top: 50px;
    transition-delay: .001s;
  }

  section#navbar.static-top .navbar.centered section#menu-nav {
    height: calc(var(--logo-height) + +70px + 2rem);
  }

  body.scroll section#navbar.static-top .navbar.centered section#menu-nav {
    height: calc(var(--logo-height) + 2rem);
  }

  nav.navbar #navbar_nav a.nav-link {
    opacity: 1;
    transform: none;
  }
  
  li.nav-item.dropdown> a::after {
    content: "\f282";
    right: 0;
  }

  /* ############### dropdown-menu ############### */

  a.dropdown-toggle::after {
    display: block;
    position: absolute;
    bottom: 6px;
    left: 45%;
  }

  li.nav-item:not(.level-1) > a:hover,
  a.goto-page-button:hover,
  a.back-button:hover {
    transform: scale(1.04) !important;
    color: var(--submenu-hover-text-color) !important;
  }

  ul.nav li.nav-item.level-1.dropdown:not(.has-megamenu) > a::after {
    content: "\f229";
    font-size: 1.0em;
    top: 1em;
    right: .25em;
  }

  ul.nav li:not(.has-megamenu) ul.dropdown-menu::after {
    display: none;
  }

  #navbar_nav li:not(.has-megamenu) ul.dropdown-menu li {
    width: 100%;
    opacity: 1;
    right: 0;
  }

  ul.nav li.has-megamenu ul.dropdown-menu {
    background-color: transparent !important;
    z-index: -1;
  }

  ul.nav li:not(.has-megamenu) ul.dropdown-menu {
    max-height: none;
    padding: 1em;
    opacity: 0;
    transform: translateY(70px);
    transition: all ease-in-out .33s;
    background: var(--navbar-bg-color);
    width: auto !important;
    position: absolute !important;
    left: auto;
    bottom: auto;
    right: auto;
    top: 15px !important;
    min-width: 250px;
    -webkit-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.25); 
    box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.25);
    border-radius: .25em;
  }

  ul.nav li.has-megamenu ul.dropdown-menu {
    top: 100px !important;
    overflow-x: visible;
  }

  ul.nav li:not(.has-megamenu) ul.dropdown-menu > .container {
    display: none;
  }

  ul.nav li:not(.has-megamenu) ul.dropdown-menu * {
    transition: all ease-in-out .33s;
    transition-delay: 0;
  }

  ul.nav li.nav-item.dropdown:not(.has-megamenu):hover > ul.dropdown-menu {
    transform: translateY(50px);
    visibility: visible;
    opacity: 1;
  }

  ul.dropdown-menu::after {
    top: 0;
  }

  section#navbar.sticky-top ul.dropdown-menu::after {
    top: calc(70px + 50px);
  }

  section#navbar:not(.fixed-top):not(.sticky-top) ul.dropdown-menu::after {
    top: calc(var(--logo-height) * 0.95 + 50px + 2rem);
  }

  section#navbar:not(.fixed-top):not(.sticky-top) .navbar.centered .dropdown-menu::after {
    top: calc(var(--logo-height) + 2rem + 50px + 70px);
  }

  li.dropdown.menu-item-has-children > a.is-open {
    z-index: 2000;
  }

  body.scroll section#navbar:not(.fixed-top):not(.sticky-top) ul.dropdown-menu::after {
    top: calc(70px + 50px) !important;
  }

  ul.dropdown-menu.level-1::after {
    opacity: .95;
  }

  ul.dropdown-menu li a {
    text-align: left;
    border-bottom: 2px solid #fff;
    padding: .75rem 2rem;
  }

  #navbar_nav ul.nav > li.menu-item.active::before {
    display: none;
  }

  /* searchform modal */

  #searchformModal input {
    font-size: 2vw;
  }

  #searchformModal button[type=submit] {
    position: absolute;
    margin: 0 0 .25em 0;
  }


  /* ############### container ############### */

  main#main .entry-header > *:not(.alignfull),
  main#main .entry-content > *:not(.alignfull),
  main#main .comments-area > *,
  main#main .post-navigation > *,
  main#main #related-posts > *,
  .wp-block-group .wp-block-group__inner-container > *:not(.alignfull),
  .max-width,
  ul.dropdown-menu > *,
  nav.overlay #navbar_nav ul.nav > * {
    max-width: 960px;
  }

  .container .card.tile img {
    max-height: 960px;
  }

  .alignwide {
    max-width: 1600px !important;
    margin: 0 auto;
  }

  .alignfull {
    max-width: none !important;
  }

  /* card slider block */

  .wp-block-card-slider.alignfull {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  .wp-block-card-slider:not(.card-slider-fullsize) .card-slider-inner .card{
    flex-basis: calc(33.33% - 2rem);
  }

  .wp-block-card-slider.outline-gradient::before {
    display: block;
  }

  /* ############### sidebar ############### */

  #sidebar {
    position: sticky;
    margin-top: 0;
    top: 1rem;
    margin-bottom: 0;
    left: inherit;
    min-height: 400px;
    width: 100%;
  }

  #sidebar h3 {
    font-size: 1.0rem;
  }

  #sidebar h3 i.bi {
    font-size: 1.5rem;
  }

  /* ############### main ############### */

  #main-content {
    margin-top: 0;
  }

  /* timeline-block */

  .wp-block-timeline .offset-md-0 .timepoint::after {
    right: -30.75%;
  }

  .wp-block-timeline .offset-md-7 .timepoint::after {
    left: -32%;
  }


}

/* ##################################### */
/* extra large screen / wide desktop */
/* ##################################### */
@media screen and (min-width: 1200px) {

  /* H */

  h1,
  .h1 {
    font-size: 3.5rem
  }

  h2,
  .h2 {
    font-size: 3.0rem
  }

  h3,
  .h3 {
    font-size: 2.5rem
  }

  h4,
  .h4 {
    font-size: 2.25rem
  }

  /* container */

  main#main .entry-header > *:not(.alignfull),
  main#main .entry-content > *:not(.alignfull),
  main#main .comments-area > *,
  main#main .post-navigation > *,
  main#main #related-posts > *,
  .wp-block-group .wp-block-group__inner-container > *:not(.alignfull),
  .max-width,
  ul.dropdown-menu > *,
  nav.overlay #navbar_nav ul.nav > * {
    max-width: 1140px;
  }

  /* logo */

  body section#navbar .logo-wrapper {
    max-height: calc( var(--logo-height) )
  }

  body section#navbar .logo-wrapper.logo-box {
    max-height: calc( var(--logo-height) + 2rem );
  } 

  /* navbar / dropdown-menu*/

  section#navbar:not(.fixed-top):not(.sticky-top) ul.dropdown-menu::after {
    top: calc(var(--logo-height) + 50px + 2rem);
  }

  /*  sidebar  */

  #sidebar h3 {
    font-size: 1.2rem;
  }

  #sidebar h3 i.bi {
    font-size: 2rem;
  }

  /* timeline-block */

  .wp-block-timeline .offset-md-0 .timepoint::after {
    right: -28%;
  }

  .wp-block-timeline .offset-md-7 .timepoint::after {
    left: -30%;
  }

  /* contact-form 7 */

  /*.wpcf7-form.init p {
    width: 50%;
  }*/

  /* wp-block-columns */

  /*.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 0 !important;
  }*/

}

/* ##################################### */
/* XXL screen / wide desktop */
/* ##################################### */
@media screen and (min-width: 1400px) {

  /* container */

  main#main .entry-header > *:not(.alignfull),
  main#main .entry-content > *:not(.alignfull),
  main#main .comments-area > *,
  main#main .post-navigation > *,
  main#main #related-posts > *,
  .wp-block-group .wp-block-group__inner-container > *:not(.alignfull),
  .max-width,
  ul.dropdown-menu > *,
  nav.overlay #navbar_nav ul.nav > * {
    max-width: 1320px;
  }

  /* sidebar */ 

  #sidebar h3 {
    font-size: 1.2rem;
  }

  #sidebar h3 i.bi {
    font-size: 2rem;
  }

  /* timeline-block */

  .wp-block-timeline .offset-md-0 .timepoint::after {
    right: -27.5%;
  }

  .wp-block-timeline .offset-md-7 .timepoint::after {
    left: -28.5%;
  }

}


/* ############### XLarge+ only specific height ############### */  
@media screen and (min-width: 1200px) and (min-height: 800px) {}

/* ############### Medium only ############### */
@media screen and (min-width: 768px) and (max-width: 991px) {

  #header,
  #header-background {
    max-height: 66vh !important;
  }

}

/* ############### Small only ############### */
@media screen and (min-width: 576px) and (max-width: 767px) {

  #header,
  #header-background {
    max-height: 66vh !important;
  }

  .wp-block-columns {
    gap: 2em;
    flex-wrap: wrap !important;
    align-items: stretch !important; /* sorgt für gleiche Höhe */
  }

  .wp-block-column {
    align-self: auto !important;
  }

}

/* ############### XSmall only ############### */
@media screen and (max-width: 575px) {

  #header,
  #header-background {
    max-height: 50vh !important;
  }

  .wp-block-columns {
    gap: 2em;
    flex-wrap: wrap !important;
    align-items: stretch !important; /* sorgt für gleiche Höhe */
  }

  .wp-block-column {
    align-self: auto !important;
  }

}




/* ############### BAD IE ############### */
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {

  body {
    border-bottom: 1px solid #fff;
  }

  .compat-object-fit {
    background-size: cover;
    background-position: center center;
  }

  .compat-object-fit img {
    opacity: 0
  }

}