/*
Theme Name: Bootstrap Blank
Author: Johannes Stadler
Description:  Standard blank theme (bootstrap 4)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: bootstrap-blank
*/

/* ********************** Allgemein ********************** */

/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(inc/assets/fonts/raleway-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(inc/assets/fonts/raleway-latin-ext.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1340px;
  }
}
*/

/* Farben */
/*
blau:           284388
grau (hell):    e9ecef (neu: dee2e6)
grau (dunkel):  5b5b5b
 */

:root {
  --color-main-1: #284388;
  --color-main-2: #dee2e6;
  --color-default: #292929;
}

html { font-size: 14px; }


body {
font-family: Raleway, sans-serif;
color: #292929;
}

a, a:hover {color: var(--color-main-1); font-weight: bold;}
h3 a, h3 a:hover {color: var(--color-default);}

.bg-main-2 { background-color: var(--color-main-2); }
.border-main-1 {border: 2px solid var(--color-main-1); }
.block-blue { background-color: var(--color-main-1); color: #fff; padding: 10px 15px;}

h2 {margin-top: 30px; font-size: 1.75rem;}
h2.is-style-headline-blue-centered{color: #fff; background-color: var(--color-main-1); margin-bottom: 50px; text-align: center; padding: 5px 0;}
h3 {margin-top: 20px; font-size: 1.25rem; font-weight: bold;}
h4 {margin-top: 20px; font-size: 1.125rem; font-weight: bold;}

.btn-outline-primary { color: var(--color-main-1); border-color: var(--color-main-1);}
.btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--color-main-1);  border-color: var(--color-main-1);}
.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active {background-color: var(--color-main-1);  border-color: var(--color-main-1);}


.btn-link {font-size: 1.25rem; font-weight: bold; padding: 5px 30px; margin: 5px 0 20px 0;}

a.btn-link:hover {color: #fff; text-decoration: none;}

/* ********************** Header / Navigation ********************** */
header {font-size:1rem; font-weight: 600;}



.navi {background-color: #fff;}

.dropdown:hover .dropdown-menu {
  display: block;
}

.navbar-brand {padding: 0 20px; margin-bottom: 10px;}
.navbar-toggler {margin-left: 10px; background-color: var(--color-main-2);}

.row-header-fullsize {background-color: var(--color-main-1); width: 100%; min-height: 50px; margin-bottom: 40px;}

.row-header-fullsize nav.breadcrumb {background-color: transparent; padding-top: 15px; font-size: 0.875rem; color: #fff;}
.row-header-fullsize nav.breadcrumb a{color: #fff; text-decoration: underline;}
.row-header-fullsize nav.breadcrumb .delimiter {margin: 0 3px;}

#main-nav {width:100%; background-color: var(--color-main-2);}
.navi-top {margin: 10px 0;}
.dropdown .dropdown-menu {margin-top: -2px; margin-right: 20px;}

.dropdown-menu li > .dropdown-menu {padding-left: 20px; border: none;}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {color: var(--color-main-1);}
.dropdown-item:focus, .dropdown-item:hover {background-color: var(--color-main-1); color: #fff;}

.navbar .navbar-nav > li.current_page_item > a, .navbar-light .navbar-nav .active>.nav-link {color: var(--color-main-1);}

#main-nav ul#menu-main-top {}
#main-nav ul#menu-main-top > li {margin: 0 0 0 30px;}

.carousel-indicators li { width: 80px; height: 8px;}

.navbar .navbar-nav .nav-link {font-size: 1.125rem; font-weight: bold; color:#000;}

.box-header-image {margin-top: 180px;}
.header-image {position: relative; text-align: center; }
/* .header-image {position: relative; text-align: center; border: 3px solid var(--color-main-2); } */

.header-image img{
  max-width: 2000px;

  display: block;
  /*width: 60%;*/
  margin-left: auto;
  margin-right: auto;
}

/* Nur für Entwuf 2 */
/*
.carousel-item .overlay, .header-image .overlay{
  position:absolute;
  top:80px;
  left: 15%;
  background: rgb(55, 64, 78);
  background: rgba(55,64,78,0.8);
  width:600px;
  text-align:left;
  padding: 10px;
  font-size: 1.25rem;
  color: #fff;
  font-weight: normal;
}
 */
.header-image .carousel-inner .carousel-item .overlay {
  position:absolute;
  bottom: 0;
  left:0;
  height:40px;
  width:300px;
  text-align:left;
  font-size:1.25rem;
  font-style:italic;
  padding: 8px 8px 0 12px;
  background-color:rgba(0,0,0,0.6);
  color:#fff;
}


.carousel-control-next-icon, .carousel-control-prev-icon { width: 40px; height: 50px;}


/* **************************** Content  **************************** */

.entry-content {line-height: 2;}
/*
.entry-content ul {list-style: none;}
.entry-content ul > li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f39e";
  font-weight: 900;
  color: red;
  font-size: 1.5rem;
  padding-right: 4px;
}
*/
a.list-group-item:hover {color: #292929; text-decoration: none; background-color: var(--color-main-2);}
li .fas {color: var(--color-main-1);}

.alert .fa-exclamation {font-size: 3.5rem; margin-top: 20px;}

/* Bilder */
.wp-block-image img, .img-border {border: 2px solid var(--color-main-1);}
.wp-block-image .alignright {margin: 0; float: none;}

figcaption {font-size: 0.75rem;}

/*
.box-news {padding: 20px; background-color: var(--color-main-2);}
.box-news .headline {text-align:center; font-weight: bold; font-size: 1.125rem; margin-bottom: 20px;}
.box-news .headline {display: flex;}
.box-news .headline::before, .box-news .headline::after { content: " "; background-image: linear-gradient(transparent, transparent 49%, #000 49%, #000 51%, transparent 51%, transparent 100%); flex: 1 1 1px; margin: 0 20px;}
.box-news .news .day {font-size: 3rem; margin-top: -10px;}
.box-news .news .month {font-size: 0.875rem; margin-top: -10px;}
.box-news .news .year {font-size: 1.125rem; margin-top: -4px;}
.box-news .news .title {font-size: 0.875rem; margin-top: 10px;}
.box-news .news .teaser {font-size: 0.75rem;}
.box-news .icon {color: var(--color-main-1); margin-top: 15px; font-size: 2.25rem;}
 */
.box-news { margin-bottom: 50px;}
.box-news h3{ margin: 0 0 10px 0;}


.card .image, .card .logo{position:relative;}
.card .logo {background-color: var(--color-main-2); text-align:center;}
.card .logo .fas {padding: 40px 0px 100px 0px; color: var(--color-main-1);}
.card .image .overlay, .card .logo .overlay{
  position:absolute;
  bottom:6px;
  background: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.5);
  width:100%;
  color: #000;
  text-align:center;
  padding: 4px 0;
  font-weight: bold;
  font-size: 1.25rem;
}

.card .card-body {font-size: 0.875rem; /*min-height: 300px;*/}
.card .card-body-link {margin-bottom: 30px;}
.card .card-body .headline {font-weight: bold;}
.card .card-link {position: absolute; bottom: 20px; width: 100%; background-color: var(--color-main-2); font-size: 0.75rem; padding: 4px 10px 4px 0; text-align: right;}


.content-area-stellenangebote h1 {font-size: 1.75rem; font-weight:bold;}
.content-area-stellenangebote h2 {font-size: 1.25rem; font-weight:bold; color: var(--color-main-1);}

.modal-body li {margin-left: -20px;}
.modal-body .table td {padding: 5px;}
/*.content-area-rundschreiben iframe {margin-left: -110px;}*/


/* Inhaber */
/*
div.image {	width: 300px;	height: 200px;	overflow: hidden;}
div.image img {	width: 100%;	height: auto;	-webkit-transform: scale(1);	-moz-transform: scale(1);	-ms-transform: scale(1);	-o-transform: scale(1);	transform: scale(1);	-webkit-transition: all 0.3s linear;	-moz-transition: all 0.3s linear;	-ms-transition: all 0.3s linear;	-o-transition: all 0.3s linear;	transition: all 0.3s linear;}
div.image img:hover {	-webkit-transform: scale(1.2);	-moz-transform: scale(1.2);	-ms-transform: scale(1.2);	-o-transform: scale(1.2);	transform: scale(1.2);}
*/
/* [1] The container */
.img-hover-zoom {
  height: auto; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;

}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.5);
  transform-origin: top;
}


.img-hover-zoom-2 {
  height: auto; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom-2 img {
  transition: transform .5s ease;

}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom-2:hover img {
  transform: scale(1.2);
}



/* Slider */
#myCarousel .list-inline {white-space:nowrap; overflow-x:auto;}

#myCarousel .carousel-indicators {position: static; left: initial; width: initial; margin-left: initial;}

#myCarousel .carousel-indicators > li {width: initial; height: initial; text-indent: initial;}

#myCarousel .carousel-indicators > li.active img {opacity: 0.7;}

#myCarousel .carousel-item>img {max-height: 255px;}

#myCarousel .carousel-control-prev, #myCarousel .carousel-control-next {background-color: var(--color-main-2);}
#myCarousel .carousel-control-prev-icon, #myCarousel .carousel-control-next-icon {filter: invert(100%); width: 40px; height: 40px;}

/* Videos (Vimeo) */
.video {position: relative;}

.video .image .overlay{
  position:absolute;
  bottom:0;

  background: rgb(55, 64, 78);
  background: rgba(55,64,78,0.8);
  width:100%;
  text-align:left;
  padding: 10px;
  font-size: 0.875rem;
  color: #fff;
  font-weight: normal;
}

.video .image .overlay a {color: #7abaff;}

/*
.carousel-item .overlay .title, .header-image .overlay .title {font-size: 1.75rem; border-bottom: 1px solid var(--color-main-2); margin-bottom: 20px; padding-bottom: 20px;}
.carousel-item .overlay .content, .header-image .overlay .content {font-size: 1.125rem;}
*/


/* **************************** Sidebar **************************** */
.box-sidebar {margin-bottom: 40px;}
.box-sidebar .card .card-body {min-height: initial;}
.box-sidebar .card .card-header {font-weight: bold; font-size: 0.875rem;}


/* **************************** Footer  **************************** */
.site-footer {margin: 50px 0 0 0; background-color: var(--color-main-2); padding: 20px 0 0 0; border-top: 10px solid var(--color-main-1);}
.site-footer .title {font-size: 1.125rem; font-weight: bold; margin-bottom: 10px;}
.site-footer .info-business-hours {font-size: 0.875rem; line-height: 1.8;}

.site-footer .site-info {font-size: 0.875rem; margin-top: 20px; padding: 10px; background-color: var(--color-main-1);}
.site-footer .site-info, .site-footer .site-info a, .site-footer .site-info a:hover {color: var(--color-main-2);}
.site-footer .site-info .sep {margin: 0 5px;}

/* ************************* Media Queries ************************* */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  /* Header */
  #main-nav {margin-top: -20px; max-height: 240px; overflow-y: auto;}
  .navbar-brand {padding: 0 0 0 240px;}
  .navbar-toggler {margin-top: -80px;}

  /* Content */

  #myCarousel .carousel-item>img {max-height: 266px;}

}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 550px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  /* Header */
  #main-nav {max-height: 400px;}
  .navbar-brand {padding: 0 0 0 450px;}
  .box-header-image {margin-top: 150px;}
  /* Content */
  .wp-block-image .alignright { float: right; margin: 0.5em 0 0.5em 1em; width: 50%;}
  #myCarousel .carousel-item>img {max-height: 460px;}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /* Header */
  .box-header-image {margin-top: 135px;}
  #main-nav {margin: 50px 0 0 -40px; max-height: none; overflow-y: visible; background-color: transparent;}
  #main-nav ul#menu-main-top > li {margin: 0 0 0 20px;}
  .navbar .navbar-nav .nav-link {font-size: 1rem;}
  .navbar-brand {padding: 10px 40px 10px 10px;}
  .navbar-toggler {margin-top: 0;}
  .dropdown .dropdown-menu {border-top: 1px solid var(--color-main-2); margin-right: 0px;}

  .navbar .navbar-nav > li.current_page_item > a, .navbar .navbar-nav > li.current_page_parent > a {border-bottom: 2px solid black;}
  .navbar .navbar-nav > li.current_page_item > a[title="Karriere"] {color: #fff;}
  .navbar .navbar-nav a[title="Karriere"], .navbar .navbar-nav a[title="Karriere"]:active, .navbar .navbar-nav a[title="Karriere"]:hover {background-color: var(--color-main-1); color: #fff; padding: 8px 25px;}
  .navbar .navbar-nav > li.current_page_item > a, .navbar-light .navbar-nav .active>.nav-link {color: #292929;}


  .row-header-fullsize {min-height: 80px;}
  .row-header-fullsize nav.breadcrumb {padding-top: 30px;}

  /* Content */
  .wp-block-image .alignright { width: auto;}
  #myCarousel .carousel-item>img {max-height: 620px;}

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  /* Header */
  #main-nav {margin-left: 0;}
  #main-nav ul#menu-main-top > li {margin: 0 0 0 30px;}
  .navbar .navbar-nav .nav-link {font-size: 1.125rem;}

  /* Content */
  #myCarousel .carousel-item>img {max-height: 680px;}
}