/* -----------ok_style--------------- */

:root {
  --ok-dark: #212529;
  --ok-black: #000;
  --ok-light: #f8f9fa;
  --ok-whithe: #fff;
  --ok-ibc: red;
  --ok-card-max-width: 300px;
  --ok-card-max-height: 450px;
  --ok-card-box-shadow-light: 0 2px 5px 2px rgba(0, 0, 0, 0.1);
  --ok-card-background: rgba(179, 204, 212, 0.3);
  --ok-card-border-radius: 5px;
  /*Simplecard: Abstand zwischen den Elementen;*/
  --ok-simple-gutter-x: 0.5rem;
  --ok-simple-gutter-y: 0.5rem;
  --ok-border: 2px solid rgba(174, 174, 174, 0.2);
  --ok-border-radius: .25rem;
}

/* allgemeine Einstellungen */

/* reset */

html, body, div, ul, li {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

*, :after, :before {
  box-sizing: border-box;
}

.ok_text_block {
  font-style: italic;
}

.ok_text_SmallCaps {
  font-variant: small-caps;
}

.ok_text_shadow {
  text-shadow: 2px 2px 6px var(--ok-black);
}

.ok_text_shadow_dark {
  text-shadow: 2px 2px 6px var(--ok-dark);
}

.ok_text_shadow_light {
  text-shadow: 2px 2px 6px var(--ok-light);
}

.ok_boxshadow-dark {
  box-shadow: -3px 5px 15px var(--ok-dark);
}

.ok_boxshadow-light {
  box-shadow: -3px 5px 15px var(--ok-light);
}

.aspect-ratio-box {
  aspect-ratio: 3 / 2;
}

.aspect-ratio-box-16-9 {
  aspect-ratio: 16 / 9;
}

.ok_line {
  border: 2px solid var(--bs-dark);
}

.ok_fit-cover {
  object-fit: cover;
}

/* allgemeine Einstellungen */

/* Footer */

.social_svg {
  height: 32px !important;
  width: 32px !important;
}

/* Footer */

/* Nav */

nav {
  height: 80px;
  background-color: rgb(0, 0, 0, 0.3);
}

.navbar-toggler {
  border-radius: 5px;
}

.okmenutabs {
  width: 100px;
  font-weight: 600;
  letter-spacing: 3px;
  font-variant: small-caps;
}

.okmenutabs:hover {
  background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}

.okbutton:hover {
  background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}

.ok_logo {
  height: 39px;
}

.ok_line {
  border: 2px solid var(--bs-dark);
}

@media (max-width: 300px) {
  .ok_logo {
    height: 15px;
  }
}

@media (min-width: 300px) and (max-width:349px) {
  .ok_logo {
    height: 20px;
  }
}

@media (min-width: 350px) {
  .ok_logo {
    height: 25px;
  }
}

@media (min-width: 575.98px) {
  .ok_logo {
    height: 32px;
  }
}

@media (min-width: 576px) {
  .ok_logo {
    height: 35px;
  }
}

@media (min-width: 768px) {
  .ok_logo {
    height: 35px;
  }
}

@media (max-width: 766px) {
  .okmenutabs {
    min-width: 100%;
    opacity: 0.7;
  }
}

/* Nav */

/* -----------ok_style--------------- */

/* -----------ok_crousel-slider------ */

.carousel-item img {
  object-fit: cover;
}

.ok_carousel-height {
  height: 650px;
}

.ok_indicator {
  width: 100px!important;
  object-fit: cover;
}

.ok_indicator img {
  width: 100px!important;
  aspect-ratio: 3/2;
  border: 1px solid var(--ok-whithe);
}

.ok_indicator.active img {
  border: 1px solid var(--ok-ibc);
}

.ok_indicator_pos {
  bottom: 10%;
}

.ok_indicator_bullets {
  width: 10px!important;
  height: 10px!important;
  border-radius: 100%!important;
}

@media (max-width: 300px) {
  .ok_indicator {
    width: 50px;
  }
}

@media (max-width: 300px) {
  .ok_carousel-height {
    height: 400px;
  }
}

@media (min-width: 300px) and (max-width: 767.98px) {
  .ok_indicator {
    width: 50px;
  }
}

@media (min-width: 300px) and (max-width: 767.98px) {
  .ok_carousel-height {
    height: 400px;
  }
}

@media (min-width: 768px) {
  .ok_indicator {
    width: 100px;
  }
}

/* -----------ok_crousel-slider------ */

/* -----------ok_jarallax------------ */

/* Zentral Funktion Jarallax "keep-img"-Einstellungen */

.jarallax-keep-img {
  position: relative;
  z-index: 0;
}

.jarallax-keep-img > .jarallax-img {
  position: relative;
  display: block;
  max-width: 100%;
  height: auto;
  /*z-index: -100;*/
  opacity: 0;
}

/* keep-img Einstellungen end */

/* hero block */

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 500px;
  height: calc(100vh - 220px);
}

.hero h1 {
  font-size: 60px;
  font-size: clamp(32px,5.5vw,60px);
  max-width: 1200px;
  margin: 0;
  line-height: 1;
  letter-spacing: -0.01em;
  font-weight: 400;
}

/* die ursprüngliche Version aus der Demo */

/* .hero.jarallax > .jarallax-img img,
.hero.jarallax > .jarallax-container img {
  filter: blur(3px); 
} */

.hero-blur-1 {
  filter: blur(1px);
}

.hero-blur-2 {
  filter: blur(2px);
}

.hero-blur-3 {
  filter: blur(3px);
}

.hero-name {
  font-size: 20px;
  font-size: clamp(17px,2vw,20px);
  font-weight: 300;
  letter-spacing: 1.1em;
  letter-spacing: clamp(1em,2vw,1.1em);
  margin-bottom: 20px;
  text-transform: uppercase;
}

.hero-content {
  color: white;
}

/* hero block */

/* Höhe Vollbildparallax */

.okpxh-5 {
  height: 100vh;
}

.okpxh-4 {
  height: 80vh;
}

.okpxh-3 {
  height: 60vh;
}

.okpxh-2 {
  height: 50vh;
}

.okpxh-1 {
  height: 40vh;
}

/* Höhe Vollbildparallax */

/* Overlay-Kasten mit Bild auf Parallax-Hintergrund */

.ok_overlay-content {
  position: absolute;
  text-align: center;
  /*border: 1px solid white;*/
  background-color: rgba(255, 255, 255, 0.8);
  max-width: clamp(35%,350px, 36%);
  max-width: 350px;
  max-width: clamp(320px,35%,400px);
  padding: 5px 15px 0px 15px;
}

.ok_overlay-position-center-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ok_overlay-position-down-right {
  position: absolute;
  right: 60px;
  bottom: 30px;
}

.ok_overlay-position-down-left {
  position: absolute;
  left: 60px;
  bottom: 30px;
}

.ok_overlay-position-up-left {
  position: absolute;
  top: 30px;
  left: 60px;
}

.ok_overlay-position-up-right {
  position: absolute;
  top: 30px;
  right: 60px;
}

/* Overlay-Kasten mit Bild auf Parallax-Hintergrund */

/* ok_floated (ein Bild, welches von Text umflossen wird) */

.ok_floated {
  overflow: hidden;
}

.ok_floated h1, .ok_floated h2, .ok_floated h3 {
  text-align: center;
}

.ok_floated .container {
  max-width: 800px;
  margin: 0 auto;
}

/* ok_floated Content */

.ok_floated-content {
  padding-left: clamp(40px, 60%, 80px,);
  padding-right: clamp(40px, 60%, 80px,);
}

/* Float */

.ok_floated-float-left {
  float: left;
}

.ok_floated-float-right {
  float: right;
}

.ok_floated-float-left.jarallax-keep-img {
  margin-right: 15px;
  margin-left: -60px;
}

.ok_floated-float-right.jarallax-keep-img {
  margin-left: 15px;
  margin-right: -60px;
}

.jarallax-keep-img.ok_floated-float-left {
  margin-right: 15px;
  margin-left: -60px;
}

.jarallax-keep-img.ok_floated-float-right {
  margin-left: 15px;
  margin-right: -60px;
}

@media screen and (max-width: 600px) {
  .jarallax-keep-img.ok_floated-float-left, .jarallax-keep-img.ok_floated-float-right {
    margin-right: 0;
    margin-left: 0;
    float: none;
  }
}

/* ok_floated (ein Bild, welches von Text umflossen wird) */

/* Größen und Modal für eingebettete Bilder */

.ok_small-image-1 {
  width: 100px;
  height: auto;
  margin: 5px;
}

.ok_small-image-1-modal {
  width: 100px;
  height: auto;
  margin: 5px;
  cursor: pointer;
}

.ok_small-image-2 {
  width: 200px;
  height: auto;
  margin: 5px;
}

.ok_small-image-2-modal {
  width: 200px;
  height: auto;
  margin: 5px;
  cursor: pointer;
}

.ok_small-image-3 {
  width: 300px;
  height: auto;
  margin: 5px;
}

.ok_small-image-3-modal {
  width: 300px;
  height: auto;
  margin: 5px;
  cursor: pointer!important;
}

.ok_small-image-4 {
  width: 400px;
  height: auto;
  margin: 5px;
}

.ok_small-image-4-modal {
  width: 400px;
  height: auto;
  margin: 5px;
  cursor: pointer!important;
}

.ok_image-modal {
  cursor: pointer!important;
}

/* Größen und Modal für eingebettete Bilder */

/* -----------ok_jarallax------------ */

/* -----------spotlight Anpassung--------- */

#spotlight {
  background-color: rgba(0, 0, 0, 0.9);
}

.spl-pane img {
  transform: translate(-50%, -50%) scale(0.8)!important;
  border: 1px solid white;
  box-shadow: -3px 5px 15px #ffffffb7;
  border-radius: .5rem !important;
}

/* -----------spotlight Anpassung--------- */

/* -----------ok_masonry Galerie------------ */

.ok_masonry_photo-gallery {
  background-color: rgba(0, 0, 0, 0);
}

.ok_masonry {
  column-count: 4;
  column-gap: 20px;
}

.ok_masonry-item a {
  break-inside: avoid;
  margin-bottom: 1em;
}

.ok_masonry-item a img {
  width: 100%;
  height: auto;
  margin: 4% auto;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: -3px 5px 15px #6f6f6f;
}

@media (min-width:1501px) {
  .ok_masonry {
    column-count: 6;
    column-gap: 20px;
  }
}

@media (max-width:1500px) {
  .ok_masonry {
    column-count: 4;
    column-gap: 20px;
  }
}

@media (max-width:1200px) {
  .ok_masonry {
    column-count: 3;
    column-gap: 20px;
  }
}

@media (max-width:800px) {
  .ok_masonry {
    column-count: 2;
    column-gap: 20px;
  }
}

@media (max-width:600px) {
  .ok_masonry {
    column-count: 1;
  }
}

/* -----------ok_masonry Galerie------------ */

/* -----------ok_Square Galerie------------ */

.ok_square {
  position: relative;
  width: 100%;
  padding-top: 100%;
  background-color: #0e1d13;
  margin: 0;
  overflow: hidden;
}

.ok_square_content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ok_square_content a {
  display: block;
  width: 100%;
  height: 100%;
}

.ok_square_content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s ease, filter 1s ease;
}

.ok_square:hover .ok_square_content img {
  filter: brightness(0.65);
  transform: scale(1.05);
}

/* falls doch einmal ein Titel benötigt wird nur das h3-Tag aktivieren */

.ok_square h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.5em;
  font-weight: 600;
  letter-spacing: 3px;
  font-variant: small-caps;
  z-index: 1;
  opacity: 0;
  transition: opacity 1s ease;
}

.ok_square:hover h3 {
  opacity: 1;
  transition: opacity 1s ease;
}

/* -----------ok_Square Galerie------------ */

/* -----------ok_cards Galerie------------ */

.ok_cards {
  display: flex;
  flex-wrap: wrap;
  gap: 25px 20px;
  margin: 0 auto;
  padding: 0px 15px 80px 15px;
  box-sizing: border-box;
  justify-content: center;
}

.ok_cards .card {
  width: 100%;
  max-width: var(--ok-card-max-width);
  max-height: var(--ok-card-max-height);
  background: var(--ok-card-background);
  border-radius: var(--ok-card-border-radius);
  box-shadow: var(--ok-card-box-shadow-light);
  overflow: hidden;
}

.ok_cards .card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 3px solid white;
  border-radius: var(--ok-card-border-radius);
}

.ok_cards .card-text {
  padding: 2px 20px 10px 20px;
}

.ok_cards .card a {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* -----------ok_cards Galerie------------ */

/* -----------ok_simplecards Galerie mit max vier Bildern (container) pro Zeile und Lightbox-Baguettebox ---- */

.ok_simplecards {
  display: flex;
  flex-wrap: wrap;
  /*gap: 20px 0px;*/
  margin: 0 auto;
  padding: 0px 15px 80px 15px;
  box-sizing: border-box;
  justify-content: center;
}

.ok_simplecard {
  position: relative;
  min-width: 250px;
  aspect-ratio: 2/3;
}

.ok_simplecard_content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ok_simplecard_content .card {
  width: 100%;
  height: 100%;
}

.ok_simplecard_content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*border: 3px solid white;*/
  /*border-radius: var(--ok-card-border-radius);*/
}

.ok_simplecard_content a {
  width: 100%;
  height: 100%;
  overflow: hidden;
  flex-grow: 1;
}

.ok_simplecard .card {
  border: var(--ok-border);
  border-radius: var(--ok-border-radius);
}

.ok_gutter.ok_simplecards.row {
  --bs-gutter-x: var(--ok-simple-gutter-x);
  --bs-gutter-y: var(--ok-simple-gutter-y);
}

.ok_simplecards.ok_cardshadow .card {
  box-shadow: -3px 5px 15px #6f6f6f;
}

.ok_simplecard h1, h2, h3, h4, h5 {
  /*position: absolute;*/
  /*top: 10%;*/
  /*left: 50%;*/
  /*transform: translate(-50%, -50%);*/
  /*color: white;*/
  /*background-color: rgba(255, 255, 255, 0.5);*/
}

/* -----------ok_simplecards Galerie mit max vier Bildern (container) pro Zeile und Lightbox-Baguettebox ---- */