@font-face {
    font-family: "RUBFlama";
    src: url('../medien/flamapro-basic.woff') format('woff2');
}

/* Überschriften --> */
.md-typeset h1 {
  font-weight: 500;
}

.md-typeset h2 {
  font-weight: 500;
}

.md-typeset h3 { 
  font-weight: 500;
}
/* <-- Überschriften */

/* Footer --> */
.md-footer-meta__inner.md-grid {
  background-color: rgba(0, 0, 0, 0); /*as reference */
}

.md-footer { /* adding this to help troubleshoot wrong display on Safari */
  background-color: white; /* fallback-color */
  background-color: var(--md-footer-bg-color); /* Defines color of the footer, using 'white' above as fallback just in case */
  color: var(--md-footer-fg-color); /* Text-Color in Footer */
  padding-top: var(--pad-main-footer); /* Defines padding (empty space) at the top of the footer */
}

.md-footer-meta {
  background-color: white; /* fallback-color */
  background-color: var(--md-footer-bg-color); /* Defines color of the footer, using 'white' above as fallback just in case */
}

html .md-footer-meta.md-typeset a  {
 color:var(--md-primary-fg-color);
 font-size:.70rem;
}

html .md-footer-meta.md-typeset a:focus {
  color: rgba(var(--high-contrast-bg-for-alpha), 0.8);
}

html .md-footer-meta.md-typeset a:hover {
  color:var(--hover-color);
}

.md-main {
  border-bottom-style: ridge; /* creates visual border between content and footer */
  padding-bottom: var(--pad-main-footer); /* Defines padding (empty space) at the bottom of the content (above footer) */
}

.md-copyright {
 color:var(--md-primary-fg-color);
 font-size:.70rem;
 margin: 0px;
 }

.md-copyright a {
 color:var(--md-primary-fg-color);
 font-size:.70rem;
} 

.md-copyright__highlight {
 color:var(--md-primary-fg-color);
}

@media screen and (max-width: 1219px) {
  .md-copyright__highlight a img {
    max-width: 30%;
  }
}

/*
.md-footer__inner .md-grid {
  height: 0px;
}
*/

.md-footer-meta__inner {
  justify-content: center;
}

.md-social__link {
  margin: 0.3rem;
}
  
.md-social__link svg {
  max-height: 2.8rem;
  fill: rgb(var(--rub-blau));
}

.md-social__link svg:hover {
  fill: var(--hover-color);
}
/* <-- Footer */

.md-header__button.md-logo :-webkit-any(img,svg) {
    height: 2.6rem;
}

.md-header__button.md-logo :is(img, svg) {
    height: 2.6rem;
}

.md-header__button.md-logo {
    padding: 0.2rem;
    margin: 0.2rem;
}

/* more general settings */
.md-main__inner.md-grid {
  max-width: 100vw;
}

.md-typeset {
    font-size: 0.9rem;
}

.md-nav {
    font-size: 0.8rem;
}

.md-typeset a {
    text-decoration:underline;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    color: var(--link-color);
}

.md-typeset a:focus, .md-typeset a:hover {
    color: var(--hover-color);
}

.md-nav__link:is(:focus, :hover) {
    text-decoration:underline;
}

.md-nav__item .md-nav__link--active span{
    color: var(--link-color);
}

.md-nav__link span:is(:focus, :hover) {
    color: var(--hover-color);
}


.md-typeset .tabbed-labels > label {
    font-size: 0.77rem;
    line-height: 1;
    color: var(--md-default-fg-color)

}

.md-typeset :is(.admonition,details) {
    font-size: 0.77rem;
}

.video-container {
    position: relative;
    height: auto;
    width: 100%;
    overflow: hidden;
    border-radius: var(--border-radius);
    display: flex;
    justify-content: center;
}

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

.video-thumbnail {
  max-width: 90%;
  width: auto;
  height: auto;
  max-height: 80vh;
  position: relative;
  top: 0;
  left: 0;
  border-radius: var(--border-radius);
}

.play-button {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url('/medien/play-icon.svg') no-repeat center center;
  border: none;
  cursor: pointer;
  background-size: 10%;
}

.honey
{
    display:none;
}

.sicherheitszeichen {
  font-size: 55px;
}

.md-source-file {
    color: var(--md-default-fg-color--light);
    margin-inline: 0.5ch;
    padding-top: 1ch;
    line-height:  normal;
}

table,
th,
td,
td {
    border-collapse: collapse;
    border: 0.2px solid black;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  visibility: hidden; /* so that the page only appears when header.js finished adjusting it */
/*  background-image: url("../medien/index_2_bg.svg");*/
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
}

/* Slideshow -->*/
.slideshow-wrapper {
  position: relative;
  width: 99.5vw;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  z-index: 2;
}

.slideshow-container {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  background-color: #000;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s;
  z-index: 1;
}

.fade {
  opacity: 1;
  z-index: 2;
}

@keyframes fade {
  from {
      opacity: 0.7;
  }
  to {
      opacity: 1;
  }
}

.slide-image {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

a.prev, a.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  background-color: rgba(0, 0, 0, 0.80);
  border-radius: var(--border-radius);
  padding: 16px;
  margin-top: -22px;
  text-decoration: none;
  color: rgb(0, 0, 0);
  font-size: 28px;
  text-shadow: -1px 0 rgb(255, 255, 255), 0 1px rgb(255, 255, 255), 1px 0 rgb(255, 255, 255), 0 -1px rgb(255, 255, 255);
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  z-index: 3;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

a.prev:hover, a.next:hover {
  background-color: var(--hover-color);
  text-decoration: none; 
  color: white; 
  text-shadow: -1px 0 rgb(0, 0, 0), 0 1px rgb(0, 0, 0), 1px 0 rgb(0, 0, 0), 0 -1px rgb(0, 0, 0);
}

#center-dots {
  position: absolute;
  bottom: 10px;
  width: 100%;
  z-index: 3;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.dot-container {
  width: fit-content;
  text-align: center;
  z-index: 3;
  background-color: rgba(0, 0, 0, 0.80);
  border-radius: var(--border-radius);
  align-items: center;
  display: flex;
  padding: 5px;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 5px;
  background-color: #dfdfdf;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot:hover {
  background-color: var(--hover-color);
}

.dot.active {
  background-color: #17365c;
}

a.slide-button {
  position: absolute;
  left: 70%;
  bottom: 10%;
  max-width: 30%;
  max-height: 60%;
  margin-right: min(5%);
  background-color: rgba(23, 54, 92, 1);
  color: white;
  text-decoration: none;
  font-weight: 500;
  padding: 12px 12px;
  font-size: clamp(0.7rem, 2.2vmin, 1.2rem); 
  /* text-shadow: -1px 0 rgb(0, 0, 0), 0 1px rgb(0, 0, 0), 1px 0 rgb(0, 0, 0), 0 -1px rgb(0, 0, 0); */
  border: none;
  cursor: pointer;
  border-radius: var(--border-radius);
  transition: background-color 0.1s;
  box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);
}

a.slide-button:hover {
  background-color: var(--hover-color);
  color: var(--high-contrast-font);
  text-decoration: none;
}

/* Responsive styles for smartphones */
@media (max-width: 767px) {
  a.slide-button {
    left: 50%;
    max-width: 80%;
    font-size: clamp(0.6rem, 2.2vmin, 1.2rem);
    /* font-size: 1em; */
    padding: 5px 10px;
    transform: translateX(-50%);
  }
}

/* <-- Slideshow */


/* Header Changes (some are also included at the top-->*/
.md-header {
  background-image: var(--header-svg);
  max-height: 35vh;
  width: 100%;
  background-color: var(--header-bg-color);
  background-repeat: repeat-x;
  background-size: cover;
  background-position: top;
  z-index: 4;
}

.md-tabs {
  max-width: fit-content;
  background-color: rgba(0,0,0,0);
  margin: auto;
  z-index: 4;
  overflow: hidden;
}

.md-tabs__link {
  font-size:.77rem;
  margin-top:.4rem;
  color: var(--tabs-font-color);
  opacity: 0.8;
  position: relative;
}

.md-tabs__link::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  translate: 0% 100%;
  background-color: var(--tabs-nav-int);
  border-radius: var(--border-radius) var(--border-radius) 0px 0px;
  transition: top 0.5s ease;
  z-index: -1;
}

.md-tabs__link:hover::before {
  top: 0;
}

.md-tabs__link--active {
  opacity: 1;
  font-weight: 600;
}

.md-tabs__item {
  height:2rem;
  margin: auto;
}

.md-tabs__list {
  background-color: var(--tabs-color);
  border-radius: var(--border-radius) var(--border-radius) 0px 0px;
  margin: 0px;
  margin-left: 0px !important;
  /* padding-left: 5px;
  padding-right: 5px; */
  width: fit-content;
  overflow: hidden;
}


.md-container {
  padding-top: 0;
}

.md-header__inner.md-grid {
  z-index: 4;
  /* min-width: fit-content; */
  visibility: hidden;
  box-sizing: content-box;
  justify-content: start;
  padding: 0px;
}

.md-tabs .md-grid {
  width: fit-content;
  justify-content: center;
}

@media screen and (min-width: 60em) {
  .md-header__source {
    display: block;
    width: fit-content;
  }
}

@media screen and (max-width: 1219px) {
  .md-header {
    background-image: url('../medien/header_mobile.svg');
    width: 100%;
  }

  .md-nav__source {
    color: var(--md-primary-bg-color);
    display: block;
    padding: 0 0.2rem;
  }

  .md-search {
    margin-right: 5%;
  }
}

.md-header__source {
  display: block;
  width: fit-content;
}

.md-nav__source {
  background-color: var(--header-bg-color);
}

.md-search {
  box-sizing: border-box;
}

/* Farbanpassung der "Aufklapp-Navigation" für kleinere Displays */
@media screen and (max-width: 76.1875em) {
  .md-nav--primary .md-nav__title[for=__drawer] {
    background-color: var(--header-bg-color);
    color: var(--md-primary-bg-color);
    font-weight: 700;
  }
}

/*Search changes to make the search more noticeable*/
.md-search__input + .md-search__icon {
  color: var(--high-contrast-font);
}

.md-search__form {
  background-color: var(--high-contrast-bg);
  color: var(--high-contrast-font);
}

.md-search__input::placeholder {
  color:var(--high-contrast-font)
}

.md-search__inner {
  width: 14rem;
  margin-right: 2rem;
  margin-left: 2rem;
}

a.md-header__button.md-logo {
  margin-left: 0px;
}
/* <-- Header Changes */

/* Counter + Text --> */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--md-default-bg-color);
  padding-bottom: 8vh;
}

.text-container {
  text-align: left;
  background-color: var(--counter-grid-color);
  padding: 4vmin;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center the content vertically */
}

.counter-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  min-height: 30vh;
}

.counter-content {
  text-align: center;
}

.counter {
  display: inline-flex;
  align-items: baseline;
  font-size: 4em;
  font-weight: bold;
}

.unit {
  font-size: 0.5em;
  margin-left: 0.25em;
}

.bg-image {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.4; /* Adjust the opacity to control the transparency of the color overlay */
  background-color: var(--keywords-bg); /* Change the color to match the desired overlay color */
}

/* Animated Keywords--> */
.animated-keywords-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative; 
  color: var(--high-contrast-font);
  min-height: 30vh;
}

@keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}

#type-animation {
  /* Adjust the styling as needed */
  font-size: 3em;
  font-weight: bold;
  text-align: center;
  opacity: 1;
  transition: opacity 0.5s;
}

@media only screen and (max-width: 810px) {
  #type-animation {
    font-size: 2em;
  }
}
/* <-- Animated Keywords */


@media (max-width: 1219px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .text-container {
    text-align: center;
    order: 1;
  }

  .animated-keywords-container:nth-child(2) {
    order: 2;
  }

  .counter-container:nth-child(3) {
    order: 4;
  }

  .text-container:nth-child(4) {
    order: 3;
  }
}
/* <-- Counter + Text */

/* Custom Buttons --> */
.custom-button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.custom-button {
  position: relative;
  width: 30%;
  overflow: hidden;
  margin: 1vh;
  border-radius: var(--border-radius);
}

.custom-button::before {
  content: "";
  float: left;
  padding-top: 75%; /* Adjusted based on aspect ratio of frame image */
}

.custom-button a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.custom-inner-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* 
.custom-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: fit-content;
  height: 20%;
  border-radius: 0px 25px 0px 0px;
  padding-right: 25px;
  background-color: var(--header-bg-color);
  z-index: 2;
  mix-blend-mode: multiply;
} */

.custom-inner-image {
  z-index: 0;
}

.custom-heading {
  position: absolute;
  bottom: 0%; 
  left: 0%;
  width: fit-content;
  height: auto;
  max-width: 70%;
  border-radius: 0px var(--border-radius) 0px 0px;
  padding-right: 3%;
  padding-left: 3%;
  padding-bottom: 3%;
  padding-top: 3%;
  background-color: rgba(var(--header-bg-color-for-alpha), 0.85);
  color: white;
  z-index: 3;
  font-weight: bold;
  text-align: left;
  margin: 0;
  font-size: clamp(0.3rem, 3.3vmin, 1.6rem);
  overflow: hidden;
}

.custom-description {
  text-align: center;
  position: absolute;
  width: 80%;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  color: white;
  font-size: clamp(0.1rem, 2.2vmin, 1.2rem);
}

.custom-copyright {
  text-align: right;
  position: absolute;
  bottom: 0%;
  right: 0%;
  z-index: 3;
  color: white;
  font-size: 0.4em;
  padding: 5px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: var(--border-radius) 0px 0px 0px;
}

.custom-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.65);
  z-index: 1;
}



@media only screen and (min-width: 834px) {
  .custom-description{
    opacity: 0;
    transition: opacity .3s;
  }

  .custom-overlay {
    opacity: 0;
    transition: opacity .3s;
  }

  .custom-button:hover .custom-overlay {
    opacity: 1;
  }
  
  .custom-button:hover .custom-description {
    opacity: 1;
  }
}

@media only screen and (max-width: 1600px) {
  .custom-heading {
      font-size: clamp(0.3rem, 3vmin, 1.4rem);  
  }
}

@media only screen and (max-width: 1380px) {
  .custom-button {
      min-width: 40vw;
  }

  .custom-heading {
      font-size: clamp(0.3rem, 3vmin, 1.2rem);  
  }
}

@media only screen and (max-width: 833px) {
  .custom-button {
      min-width: 80vw;
  }

  .custom-heading {
    font-size: clamp(0.8rem, 5vmin, 3.5rem); 
  }

  .custom-description {
    font-size: clamp(0.5rem, 3.5vmin, 2.5rem);
  }

  .custom-copyright {
    font-size: 0.2em;
  }
}

/* Einheitlicher Hintergrund für Fließtexte --> */
.md-content {
  background-color: var(--md-default-bg-color);
}

/* Contact forms --> */
.form {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background-color: var(--md-default-bg-color);
  padding: 20px;
  border-radius: var(--border-radius);
  border: var(--header-bg-color);
}

.form-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 10px;
}

.form-field input,
.form-field textarea {
  width: 100%;
  color:var(--high-contrast-font);
  font-size: 1.3em;
  background-color: var(--high-contrast-bg);
  padding: 2px;
  border-radius: var(--border-radius);
}

.form-field textarea {
  resize: vertical;
}
/* <-- Contact forms */

/* .md-button Änderungen --> */
.md-typeset .md-button {
  border-radius: var(--border-radius);
  background-color: rgba(15, 54, 90, 1);
  color: white;
  hyphens: auto;
  -moz-hyphens: auto;
  text-wrap: balance;
  white-space: pre-wrap;
}

.md-typeset .md-button:is(:focus) {
  border-radius: var(--border-radius);
  background-color: rgba(15, 54, 90, 1);
  color: white;
  border-color: white;
}

.md-typeset .md-button:is(:hover) {
  background-color: var(--hover-color);
  border-color: var(--header-bg-color);
  color: var(--high-contrast-font);
}
/* <-- .md-button Änderungen */

/* images --> */
.image-container {
  display: inline-block;
  vertical-align: top;
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 66.42%;
  border-radius: var(--border-radius);
  margin-bottom: 0.6%;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.custom-copyright {
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 3;
  color: white;
  font-size: 0.4em;
  padding: 5px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: var(--border-radius) 0px 0px 0px;
}
/* <-- images */

.md-banner {
  background-color: rgb(47, 47, 47);
  text-decoration: none;
}

.md-banner a {
  color: white;
  text-decoration: none;
  font-weight: bolder;
}

.md-banner a:hover {
  text-decoration: none;
}

.md-banner__inner {
  font-size: .77rem;
  margin: .45rem auto;
    margin-right: auto;
    margin-left: auto;
}

.md-banner__inner.md-grid.md-typeset {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: 100%;
} 

/* Sidebar-navigation --> */
.md-sidebar__inner {
  border-right-style: solid;
}

/* .custom-nav-header {
  text-decoration-line: underline;
} */


@media screen and (min-width: 76.25em){
  [dir=ltr] .md-nav--lifted>.md-nav__list>.md-nav__item>.md-nav {
      margin-left: -0.4rem;
  }
}
/* <-- Sidebar-navigation */


/* W-Fragen auf Startseite --> */

/* Container for the grid */
.wf-grid-container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Creates 2 columns */
  row-gap: 3vh;
  column-gap: 5vw;
  padding: 20px; /* Padding around the entire grid for some space from the container edges */
  max-width: 1220px;
  margin: auto;
  margin-top: 5vh;
  margin-bottom: 5vh;
  background-color: transparent;
}

/* Styling for each text box */
.wf-text-box {
  background-color: var(--md-default-bg-color); /* Transparent background */
  border: none; /* No border */
  padding: 10px; /* Padding inside the text boxes */
  min-width: 290px;
}

/* Styling for the heading inside each text box */
.wf-text-box h2 {
  text-align: left; /* Heading aligned to the left */
  margin-top: 0; /* Adjust the margin as needed */
  font-weight: bold;
}

.wf-text-box a {
  font-weight: 600;
  text-wrap: nowrap;
}

/* Media query for mobile devices */
@media (max-width: 750px) {
  .wf-grid-container {
    grid-template-columns: 1fr; /* Only 1 box per row on mobile devices */
  }
}

@media (min-width: 1600px) {
  .wf-grid-container {
    max-width: 1350px; 
  }
}

@media (min-width: 1900px) {
  .wf-grid-container {
    max-width: 1500px; 
  }
}

@media (min-width: 2400px) {
  .wf-grid-container {
    max-width: 1700px; 
  }
}

/*<-- W-Fragen auf Startseite */