/* noto-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/noto-sans-v36-latin-regular.eot"); /* IE9 Compat Modes */
  src: url("../fonts/noto-sans-v36-latin-regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/noto-sans-v36-latin-regular.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/noto-sans-v36-latin-regular.woff") format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/noto-sans-v36-latin-regular.ttf") format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/noto-sans-v36-latin-regular.svg#NotoSans") format("svg"); /* Legacy iOS */
}

/* carlito-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Carlito";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/carlito-v3-latin-regular.eot"); /* IE9 Compat Modes */
  src: url("../fonts/carlito-v3-latin-regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/carlito-v3-latin-regular.woff2") format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/carlito-v3-latin-regular.woff") format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/carlito-v3-latin-regular.ttf") format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/carlito-v3-latin-regular.svg#Carlito") format("svg"); /* Legacy iOS */
}

/* alexandria-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Alexandria";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/alexandria-v3-latin-regular.eot"); /* IE9 Compat Modes */
  src: url("../fonts/alexandria-v3-latin-regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/alexandria-v3-latin-regular.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/alexandria-v3-latin-regular.woff") format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/alexandria-v3-latin-regular.ttf") format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/alexandria-v3-latin-regular.svg#Alexandria") format("svg"); /* Legacy iOS */
}

/* alexandria-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Alexandria";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/alexandria-v3-latin-900.eot"); /* IE9 Compat Modes */
  src: url("../fonts/alexandria-v3-latin-900.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/alexandria-v3-latin-900.woff2") format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/alexandria-v3-latin-900.woff") format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/alexandria-v3-latin-900.ttf") format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/alexandria-v3-latin-900.svg#Alexandria") format("svg"); /* Legacy iOS */
}

/* libre-franklin-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/libre-franklin-v14-latin-regular.eot"); /* IE9 Compat Modes */
  src: url("../fonts/libre-franklin-v14-latin-regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/libre-franklin-v14-latin-regular.woff2")
      format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
      url("../fonts/libre-franklin-v14-latin-regular.woff") format("woff"),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
      url("../fonts/libre-franklin-v14-latin-regular.ttf") format("truetype"),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
      url("../fonts/libre-franklin-v14-latin-regular.svg#LibreFranklin")
      format("svg"); /* Legacy iOS */
}

/* Globale Einstellungen */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  font-style: normal;
  overflow-x: hidden;
  position: relative;
  font-size: 17px;
  font-family: "Libre Franklin";
  color: var(--black);
  background-color: var(--bg);
  hyphens: auto;
}

/* Allgemeine Farbeinstellungen, Größen, etc. */
:host {
  --swiper-theme-color: white !important;
}
:root {
  /* Voreingestellte Farben, diese sind von Projekt zu Projekt unterschiedlich. Also anpassen!
    Hauptfarben: */
  --lightblue: #6bb9e8;
  --darkblue: #15152e;
  --red: #e2555d;
  --peach: #fa6d76;
  --textred: #e3555d;
  --gray: #3c3c3b;
  --lighterblue: #c1d9ee;

  /* Farben für Schriften */
  /* Schriftfarbe für Fließtexte, reines Schwarz vermeiden -> Kann zu einer Überanstrengung der Augen führen, wenn Nutzer den Text über einen längeren Zeitraum lesen. */
  --black: #15152e;

  /* Hintergrundfarbe, Abwandlung von weiß, reines Weiß vermeiden -> starke Helligkeit von reinem Weiß kann einen hohen Kontrast zu den umgebenden Elementen erzeugen => "White Glare-Effect" */
  --bg: #fefefe;

  /* Abstandswerte */
  /* Sehr kleiner Abstand */
  --g-xs: 8px;
  /* Kleiner Abstand */
  --g-m1: 16px;
  /* Mittlerer Abstand */
  --g-m2: 24px;
  /* Großer Abstand */
  --g-m3: 32px;
  /* Sehr großer Abstand */
  --g-l1: 40px;
  --g-l2: 48px;
  --g-xl: 56px;
  --g-xxl: 64px;

  /* Abstand zwischen Paragraphen */
  --p-gap: 20px;

  /* Abstand von Überschriften zur Section */
  --h-gap: 2rem;
}

/* @media screen and (min-width:768px){
  :root{
    --h-gap:2rem;
  }
} */

/* Voreinstellung von Abständen */
/* Abstand zwischen Paragraphen */
.p-gap {
  margin-top: var(--p-gap);
}

/* Abstand Überschriften nach oben und nach unten */
.h-all {
  margin-top: var(--h-gap);
  margin-bottom: var(--h-gap);
}

/* Abstand Überschrift nach oben */
.h-top {
  margin-top: var(--h-gap);
}

.h-top-md {
  margin-top: var(--h-gap);
}

@media screen and (min-width: 768px) {
  .h-top-md {
    margin-top: unset;
  }
  /* Damit Abstand zwischen Referenzen/Leistungen ist, da nur margin wegen pos absolute beim Bild nicht ausreicht */
  .pa-top{
    padding-top:var(--h-gap);
  }
  .ma-top{
    margin-top:var(--h-gap);
  }
}

@media screen and (min-width:1400px){
  #leistungen .pa-top{
    padding-top:4rem;
  }

  #leistungen .ma-top{
    margin-top:6rem;
    padding-bottom:3.5rem;
  }
}



/* Abstand Überschrift nach unten */
.h-bot {
  margin-bottom: var(--h-gap);
}

/* Allgemeine Gestaltung */
a {
  text-decoration: none;
  color: unset;
}

a:hover,
a li:hover {
  transition: 0.4s;
  color: var(--peach);
}

h1,
h2,
h3,
h4 {
  margin-bottom: var(--g-m2);
  font-size: 1.9rem;
  text-transform: uppercase;
  color: var(--lightblue);
  font-family: "Libre Franklin";
}

.upper {
  text-transform: uppercase;
}

section {
  margin-bottom: var(--g-l2);
  padding: var(--g-m3) 0;
}

.sec-pad {
  padding: var(--g-m3) 0;
}

.sec-pad-bot {
  padding-bottom: var(--g-m3);
}

.sec-pad-top {
  padding-top: var(--g-m3);
}

.small {
  color: white;
  font-size: 1.4rem;
}

.dunkelblau h2 {
  color: white;
}

#hero_start {
  padding: unset;
  margin-bottom: unset;
}

#hero_start_w_bot {
  margin-bottom: var(--g-l2);
  padding: unset;
  background-color: #15152e;
}

#welcome_container {
  margin-bottom: 0;
}

footer section {
  margin-bottom: unset;
}

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

.align_mob {
  text-align: left;
}

@media screen and (min-width: 768px) {
  .align_mob {
    text-align: right;
  }
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

.float_mob {
  float: right;
}

@media screen and (min-width: 768px) {
  .float_mob {
    float: unset;
  }
}

.active {
  font-weight: 800;
  text-decoration: underline 3px !important;
  text-underline-offset: 0.94rem;
  display: block ruby;
}

.img_mob {
  margin-top: 2rem;
}

@media screen and (min-width: 768px) {
  .img_mob {
    margin-top: unset;
  }
}
/* Hauptbereich: > Header > Short-Info oben */
.short-infos {
  background-color: var(--gray);
  color: white;
  font-size: 14.5px;
}

.short-item img {
  width: 20px;
}

.short-item {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
}

@media screen and (min-width: 1101px) {
  .short-item img {
    margin: var(--g-m1);
  }
}

.trennstrich {
  margin: var(--g-m1);
  font-size: var(--g-m1);
  display: none;
  visibility: hidden;
}

@media screen and (min-width: 1101px) {
  .trennstrich {
    display: block;
    visibility: visible;
  }
}

.icon_short {
  width: 10px !important;
}

.short-individual {
  display: none;
  visibility: hidden;
}

@media screen and (min-width: 1101px) {
  .short-individual {
    display: block;
    visibility: visible;
  }
}

/* .dropdown-menu {
    position: absolute;
    top:42px;
    right:19.5rem;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: var(--gray);
  } */

/* .dropdown-menu {
  position: absolute; */
/* top: 100px;
  right: 0; */
/* z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  width: 100vw;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: var(--gray);
} */

.dropdown-menu {
  position: absolute;
  top: 94%;
  right: -20px;
  left: unset;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  width: 295px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: var(--gray);
}

@media screen and (min-width: 1128px) {
  .dropdown-menu {
    left: 0;
    right: unset;
  }
}

/* @media screen and (min-width: 373px) {
  .dropdown-menu {
    top: 52px;
  }
}

@media screen and (min-width: 373px) {
  .dropdown-menu {
    top: 52px;
    width: unset;
  }
}

@media screen and (min-width: 625px) {
  .dropdown-menu {
    right: 50px;
  }
}*/

.dropdown-menu li {
  padding: 5px 20px;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background-color: #4b4b4b;
}

.dropdown-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: right;
}

.dropdown li {
  float: right;
}

.dropdown-toggle {
  transition: transform 0.3s;
  cursor: pointer;
}

.dropdown-toggle.open {
  transform: rotate(-180deg);
}

/* Text-Animation */
html.js .box {
  transform: translateY(100px);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
html.js .box.visible {
  transform: translateY(0);
  opacity: 1;
}
html.js .image {
  transform: scale(1);
  transition: transform 1s ease-in-out;
}
html.js .image.visible {
  transform: scale(1.1);
}
/* Navigationsbar */

.menu {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  padding: 0;
  position: absolute;
  left: 0rem;
  top: 0rem;
}
@media only screen and (min-width: 974px) {
  .menu {
    display: none;
  }
}

.line {
  fill: none;
  stroke-width: 6;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
  stroke: white;
}

.line1 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}

.line2 {
  stroke-dasharray: 60 60;
  stroke-width: 6;
}

.line3 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}

.opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 6;
}

.opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

.neue-klasse {
  background-color: var(--darkblue);
  min-height: 100vh !important;
  z-index: 40;
  position: relative;
}
.neue-klasse ul {
  display: flex !important;
  flex-flow: column;
  padding-left: 1rem;
  text-align: start;
  padding-top: 2rem;
  height: 100vh;
  justify-content: space-evenly;
}
.neue-klasse ul li {
  padding: 1rem;
}
.neue-klasse ul li a {
  font-size: 1.5rem;
}
.neue-klasse > a {
  display: none;
}
.wrap-oheader {
  background-color: var(--red);
}

.wrap-oheader {
  position: relative;
  transition: top 0.2s ease-in-out;
}

.wrap-oheader.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}
@media only screen and (min-width: 974px) {
  .wrap-oheader {
    height: auto;
  }
}
.wrap-oheader nav {
  position: relative;
}
.wrap-oheader nav ul {
  display: none;
}
@media only screen and (min-width: 974px) {
  .wrap-oheader nav ul {
    display: flex;
    justify-content: center;
    padding: 0 2rem 0rem;
    align-items: center;
    gap: 2rem;
  }
}
@media only screen and (min-width: 1180px) {
  .wrap-oheader nav ul {
    padding: 0 5rem 0rem;
  }
}
@media only screen and (min-width: 1620px) {
  .wrap-oheader nav ul {
    padding: 0 8rem 0rem;
  }
}
@media only screen and (min-width: 1620px) {
  .wrap-oheader nav ul {
    padding: 0 12rem 0rem;
  }
}
.wrap-oheader nav ul > li {
  list-style-type: none;
}
.wrap-oheader nav ul > li > a {
  text-decoration: none;
  text-transform: uppercase;
  color: white;
}
@media only screen and (min-width: 860px) {
  .wrap-oheader nav ul > li > a {
    font-size: 1.2rem;
  }
}
.wrap-oheader nav ul > li > a:hover {
  font-weight: 600;
}

.nav-logo {
  width: 254px;
  padding-left: 3rem;
}

/* Startseite: Hero */
#hero_start {
  max-height: 628px;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero_start_schrift {
  width: 100%;
  max-width: 458px;
  object-fit: contain;
  padding: 20px;
  top: 0;
  right: 0;
  position: absolute;
}

@media screen and (min-width: 978px) {
  .hero_start_schrift {
    width: 614px;
    right: 9rem;
    top: -6rem;
    max-width: 614px;
    padding: unset;
    position: unset;
  }
}
@media screen and (min-width: 978px) {
  .schrift_wrapper {
    transform: translate(140px);
    position: absolute;
    overflow-x: hidden;
    overflow-y: hidden;
    top: -5rem;
  }
}

@media screen and (min-width: 1380px) {
  .schrift_wrapper {
    transform: translate(361px);
  }
}

/* @media screen and (min-width: 978px) {
  .swiper-horizontal > .swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal,
  .swiper-pagination-custom,
  .swiper-pagination-fraction {
    top: 28rem;
    right: 25rem;
  }
} */
/* 
.swiper-pagination-bullet-active {
  background: var(--red) !important;
} */

/* Willkommentext-Startseite */
.firm_name {
  font-family: "Carlito";
}

.blauer_kasten {
  background-color: var(--lightblue);
  padding: 20px;
  margin-top: -5rem;
  margin-left: auto;
  margin-right: auto;
  z-index: 20;
  width: 90%;
  color: white;
}

.blauer_kasten h1,
.blauer_kasten p {
  text-align: center;
}


.blauer_kasten h1{
  font-size:1.3rem;
}

@media screen and (min-width:768px){
  .blauer_kasten h1{
    font-size:1.9rem;
  }
}
.dunkelblau {
  background-color: var(--darkblue);
  color: white;
}

.dunkel {
  color: var(--darkblue);
}

.hellblau {
  background-color: var(--lightblue);
}

.lighterblue{
  background-color:var(--lighterblue)
}

.hell {
  color: var(--lightblue);
}


.white {
  color: white !important;
}

.transform-none {
  text-transform: none;
}

.textred {
  color: var(--textred);
}

.breit {
  width: 100%;
  object-fit: cover;
}

.max-h{
  max-height:300px;
}

.max {
  max-width: 350px;
  max-height: 350px;
  object-fit: contain;
}

.center {
  text-align: center;
}

/* @media screen and (min-width: 768px) {
  .center {
    text-align: unset;
  }
} */

.rounded {
  border-radius: 10px;
}

/* #leistungen_short .breit {
} */

@media screen and (min-width: 1400px) {
  #leistungen_short .breit {
    min-width: 380px;
  }
}

.low_opacity_heading {
  font-size: 2.4rem;
  margin-top: -4.6rem;
  color: var(--lightblue);
  opacity: 0.2 !important;
  text-transform: uppercase;
  font-weight: 900;
  font-family: "Alexandria";
  position: absolute;
}

@media screen and (min-width: 362px) {
  .low_opacity_heading {
    font-size: 3.4rem;
    margin-top: -5rem;
    opacity: 0.09 !important;
  }
}

@media screen and (min-width: 570px) {
  .low_opacity_heading {
    font-size: 4.4rem;
    margin-top: -5rem;
  }
}

@media screen and (min-width: 768px) {
  .low_opacity_heading {
    font-size: 7rem;
    margin-top: -6rem;
  }
}

@media screen and (min-width: 994px) {
  .low_opacity_heading {
    font-size: 8rem;
    margin-top: -6rem;
  }
}

@media screen and (min-width: 1422px) {
  .low_opacity_heading {
    font-size: 8rem;
    margin-top: -5rem;
  }
}

.under_loheading {
  margin-top: -1.9rem;
}

@media screen and (min-width: 362px) {
  .under_loheading {
    margin-top: -0.5rem;
  }
}

@media screen and (min-width: 570px) {
  .under_loheading {
    margin-top: 1rem;
  }
}

@media screen and (min-width: 768px) {
  .under_loheading {
    margin-top: 3.5rem;
  }
}

@media screen and (min-width: 994px) {
  .under_loheading {
    margin-top: 3.4rem;
  }
}

@media screen and (min-width: 1442px) {
  .under_loheading {
    margin-top: 4.9rem;
  }
}

.orange_text {
  color: var(--textred);
  text-transform: uppercase;
  text-align: center;
  padding-top: var(--g-m1);
  padding-bottom: var(--g-m1);
  font-size: 1.2rem;
}

.calibri {
  font-family: "Calibri";
  font-weight: bold;
}

/* Leistungen Short */
.leistung_short {
  margin-bottom: 1rem;
}

.leistung_short img {
  /* width:400px;
  height:400px; */
  width: 350px;
  height: 350px;
  object-fit: cover;
}

@media screen and (min-width: 768px) {
  .leistung_short img {
    width: 200px;
    height: 200px;
    object-fit: cover;
  }
}

@media screen and (min-width: 1200px) {
  .leistung_short img {
    width: 300px;
    height: 300px;
  }
}

@media screen and (min-width: 1400px) {
  .leistung_short img {
    width: 350px;
    height: 350px;
  }
}

/* .leistung_short:hover {
  background-color: #6bb8e80c;
} */

#leistungen_short {
  margin-bottom: unset;
}

#news {
  width: 90%;
}

#news p {
  padding: 20px;
}

.news_bild {
  position: relative;
  bottom: 1rem;
  width: 100%;
}

/* @media screen and (min-width:){
  .news_bild {
    position: relative;
    bottom: 2rem;
  }
} */

footer {
  background-image: url("../img/cover/footer.webp");
  background-size: cover;
  padding-top: 2rem;
  background-color: #15152e;
  color: white;
}

.footer_logo {
  width: 230px;
}

@media screen and (min-width: 768px) {
  .footer_logo {
    width: 100%;
    max-width: 230px;
  }
}

.footer_logo2 {
  width: 130px;
}

.tag {
  margin-right: var(--g-m2);
  width: var(--g-m2);
}

footer h4 {
  border-left: 1mm solid var(--textred);
  padding-left: var(--g-m1);
  height: 60px;
  display: flex;
  align-items: center;
  color: var(--textred);
  margin-bottom: var(--g-m1);
  text-transform: uppercase;
  font-weight: 200;
  font-size: 1rem;
}

@media screen and (min-width: 768px) {
  footer h4 {
    margin-left: -1rem;
    margin-bottom: 2rem;
    font-size: 1.2rem;
  }
}

footer p,
footer address,
.uhrzeiten_wrapper,
#rechtlich {
  font-size: 0.9rem;
}

@media screen and (min-width: 768px) {
  footer p,
  footer address,
  .uhrzeiten_wrapper,
  #rechtlich {
    font-size: 1rem;
  }
}

.rechtl-item:nth-child(2) {
  text-align: center;
}

#my01 {
  padding-bottom: 2rem;
}

.uhrzeiten_wrapper,
footer p,
footer address {
  padding-bottom: var(--g-m1);
}

address {
  font-style: unset;
}
.icon {
  width: 50px;
}

.rechtl-wrapper {
  background-color: var(--darkblue);
}

#rechtlich {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

#scrollToTopButton:hover {
  background-color: var(--light-blue);
}

#scrollToTopButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: white;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 999;
}

#showBtn {
  opacity: 1;
  transform: translateY(0);
}

/* .image-wrapper {
  height: 158px; 
  width:100%;
  position:relative;
}

.image-wrapper img{
  position:absolute;
  right:0;
  width:100%;
  height:100%;
}

@media screen and (min-width:400px){
  .image-wrapper {
    height: 473px; /* or set a fixed height, e.g. 300px */
/* width:773px;
  }
  .image-wrapper img{
    position:absolute;
    right:0;
  }
}  */
/* .zeitstrahl{
    width:1100px;
    padding-top:70px;
  }

  .linien{
    margin-top:6px;
  }

  .punkt{
    width:20px;
    height:20px;
    border-radius:10px;
  }
  .linie, .punkt {
    background: var(--red);
    z-index: 0;
    position: relative;
}

.linie{
  height: 235px;
  width: 3px;
  margin-left: 8px;
}

.karte{
    width: 85%;
    padding-bottom: 15px;
    padding-left: 30px;
    margin-bottom: 100px;
} */

.timeline {
  position: relative;
  margin: 40px auto;
  padding: 0;
  list-style: none;
}

.timeline-item {
  position: relative;
  margin-bottom: 2rem;
  padding-top: var(--g-xs);
}

.timeline-dot {
  position: absolute;
  top: 9px;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: var(--red);
  border-radius: 50%;
}

/* .timeline-item::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 100%;
  height: 2px;
  background-color: #ccc;
  z-index: -1;
} */

.timeline-item:first-child::before {
  display: none;
}

.timeline-date {
  position: relative;
  top: 0;
  left: 3rem;
  font-size: 16px;
  font-weight: bold;
}

.timeline-date h3 {
  margin-bottom: 0.5rem;
  color: var(--bg);
  font-size: 1.3rem;
}

.timeline-item p {
  margin-left: 3rem;
}

.strich {
  height: calc(100% + 2rem);
  width: 2px;
  top: 10px;
  margin-left: 8.5px;
  position: absolute;
  background-color: var(--red);
}

.bio_name h3, .job h3 {
  color: var(--darkblue);
  font-weight: 900;
  text-transform: none;
  margin-bottom: 0.1rem;
  font-size: 1.4rem;
  margin-top: var(--g-xs);
}

@media screen and (min-width: 768px) {
  .bio_name h3, .job h3 {
    margin-top: unset;
  }
}

.bio_name p {
  font-size: 1.2rem;
}

#biografie .timeline-date h4 {
  color: unset;
  font-size: 1.3rem;
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
  text-transform: none;
}

#biografie .timeline-date {
  top: 4px;
}

@media (min-width: 768px) {
  .md-flex-none {
    display: block !important;
  }
}

.moretxt {
  display: none; /* hide by default */
}

.moretxt.show {
  display: block; /* show when.show class is added */
}

.weiterlesen {
  cursor: pointer;
  color: var(--textred);
  margin-top: var(--g-m1);
  margin-bottom: var(--g-m1);
}

.weiterlesen2 {
  cursor: pointer;
  color: var(--textred);
  margin-top: var(--g-m1);
  margin-bottom: var(--g-m1);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.3rem;
}

.lesen-icon img {
  width: 30px;
  margin-left: var(--g-xs);
}

#ref_ov img {
  width: 270px;
  height: 270px;
  filter:brightness(0.5)
}

#rev_ov .row:hover{
  filter:unset !important;
}

@media screen and (min-width: 768px) {
  #ref_ov img {
    width: 210px;
    height: 210px;
  }
}

@media screen and (min-width: 992px) {
  #ref_ov img {
    width: 260px;
    height: 260px;
  }
}

@media screen and (min-width: 1400px) {
  #ref_ov img {
    width: 300px;
    height: 300px;
  }
}

@media screen and (min-width: 1420px) {
  #ref_ov img {
    max-width: 422px;
    max-height: 422px;
  }
}

.reffig {
  position: relative;
  display: flex;
  justify-content: center;
}

.reffig figcaption {
  position: absolute;
  color: var(--bg);
  font-size: 1.5rem;
  font-weight: 800;
  z-index: 2;
  top: 0;
  display: flex;
  height: 100%;
  align-items: center;
  text-align:center
}


.bilder-more {
  display: none;
}

/* Add styles for the lightbox */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 3000;
}

.lightbox-content {
  position: relative;
  /* margin: 40px auto; */
  max-width: 940px;
  max-height:100vh;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  overflow-y:hidden;
  display:flex;
}

.fix-h{
  height:100%;
}

.var-h{
  max-height:100% !important;
}

.lightbox-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  cursor: pointer;
  color:var(--peach);
  font-weight:800;
  font-size:3rem;
}

.news-card,
.card_hor {
  background-color: var(--lighterblue);
}

.news-card figure > img {
  width: 100%;
  padding: var(--g-m1);
}

.news-card figcaption {
  position: absolute;
  margin-top: -55px;
  margin-left: 28px;
  background-color: var(--red);
  color: white;
  border-radius: 25px;
  padding: 4px 15px;
  font-size: 0.9rem;
  display: flex;
  gap: 0.5rem;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.news-card p,
.news-card h3,
.news-card .weiterlesen {
  padding: 0 var(--g-m1);
}

.news-card p:last-child,
.news-card .weiterlesen {
  padding-bottom: 1rem;
}

.news-card h3 {
  color: var(--black);
  text-transform: none;
  margin-bottom: 0.3rem;
  font-size: 1.2rem;
}

.card_hor {
  padding: var(--g-m1);
}

.hor-arrow {
  width: 30px;
  height: 17px;
  cursor: pointer;
}

#weiteres_card {
  display: none;
  margin-top:2rem;
}

.hor-arrow {
  transition: transform 0.5s; /* add transition effect */
}

/* .red-btn{
  color:var(--peach)
} */

#red-btn{
  display: inline-block;
  outline: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  border-radius: 500px;
  transition-property: background-color,border-color,color,box-shadow,filter;
  transition-duration: .3s;
  border: none;
  letter-spacing: 2px;
  min-width: 160px;
  text-transform: uppercase;
  white-space: normal;
  font-weight: 700;
  text-align: center;
  padding: 16px 14px 18px;
  color: var(--bg);
  box-shadow: 0 0 2px 2px #61646727;
  background-color: var(--peach);
  height: 40px;
  font-family: "Libre Franklin";
  padding-top:13px;
  margin-top:2rem;
}

#red-btn:hover{
    color: #fff;
    background-color: #616467;
}

.job-ausschreibung {
  display: none;
  margin-top:2rem;
}

.job-ausschreibung.show {
  display: block;
}


.contain {
  background-color: var(--lighterblue);
  /* max-width: 1170px; */
  margin-left: auto;
  margin-right: auto;
  padding: var(--g-m2);

}

div.form {
  background-color: var(--lighterblue);
}
.contact-wrapper {
  margin: auto 0;
}

.submit-btn {
  float: left;
}
.reset-btn {
  float: right;
}

.form-headline:after {
  content: "";
  display: block;
  width: 10%;
  padding-top: 10px;
  border-bottom: 3px solid #ec1c24;
}

.highlight-text {
  color: #ec1c24;
}

.hightlight-contact-info {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
}

.highlight-text-grey {
  font-weight: 500;
}

.email-info {
    margin-top: 20px;
}

::-webkit-input-placeholder { /* Chrome */
  font-family: 'Roboto', sans-serif;
}

.required-input {
  color: black;
}
/* @media (min-width: 600px) {
  .contain {
    padding: 0;
  }
} */

h3,
ul {
  margin: 0;
}

h3 {
  margin-bottom: 1rem;
}

.form-input:focus,
textarea:focus{
  outline: 1.5px solid var(--lightblue);
}

input::placeholder{
  margin-top:-2rem;
}

.form-input,
textarea {
  width: 100%;
  border: 1px solid var(--black);
  border-radius: 21px;
}

.wrapper > * {
  padding: 1em;
}
/* @media (min-width: 700px) {
  .wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
  .wrapper > * {
    padding: 2em 2em;
  }
} */

ul {
  list-style: none;
  padding: 0;
}

.form {
  background: #fff;
}

form{

}

@media screen and (min-width:574px){
  form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
  }
}
form label {
  display: block;
}
form p {
  margin: 0;
}

.full-width {
  grid-column: 1 / 3;
}

button,
.submit-btn,
.form-input,
textarea {
  padding: 1em;
}

button, .submit-btn {
  background: transparent;
  border: 1px solid #ec1c24;
  color: #ec1c24;
  border-radius: 15px;
  padding: 5px 20px;
  text-transform: uppercase;
}
button:hover, .submit-btn:hover,
button:focus , .submit-btn:focus{
  /* background: var(--lightblue); */
  outline: 0;
  color: #eee;
}
.error {
  color: #ec1c24;
}

.padding-check{
  margin-left:1rem;
  width:100%;
  padding-right:1rem;
}

#submit-form .bez-form{
  position: absolute;
  background: linear-gradient(180deg, var(--lighterblue) 52%, transparent 49%);
  background-size: 50% auto;
  margin-left: 1rem;
  margin-top: -0.5rem;
  /* height: 17px; */
}

.proj_bez{
  margin-bottom:0.3rem;
}

.proj_kunde{
  font-size:1.3rem;
  font-weight:200;
  color:var(--darkblue);
}

.ref-max{
  max-width:416px;
  height:255px;
  object-fit: cover;
}

@media screen and (min-width:768px){
  .ref-max{
    width:416px;
    height:255px;
  }
}

.ref-max img{
  height:100%;
}


@media screen and (min-width:1280px)
{
  /* .no-margin-left{
    margin-left:0 !important;
  }
  .no-padding-left{
    padding-left:0 !important;
    margin-left:-1rem;
  }

  .no-margin-right{
    margin-right:-1rem;
  }
  .no-padding-right{
    padding-right:0;
    margin-right:-1rem;
  } */
  .full-img-right{
    position:absolute;
    max-width:630px;
    max-height:300px;
    right:-20px;
  }
  .full-img-left{
    position:absolute;
    max-width:630px;
    max-height:300px;
    left:-16px;
  }
  
}

.gender{
  font-size:1.1rem;
  font-weight:300;
}

.kontakt_firma{
  text-transform: none;
  font-size:1.2rem;
  margin-bottom:unset;
}

.anrede-h{
  position:absolute;
  z-index:-2;
}

#mitteilung{
  margin-bottom:0;
  padding:0;
}

#mitteilung p{
  color:var(--textred);
}

input, textarea{
  font-family:'Libre Franklin';
  font-size:16px;
}