/* gangl.works - Styles */

/* How to avoid layout shifts caused by webfonts -> https://simonhearne.com/2021/layout-shifts-webfonts/ */
/* change:	font-display: swap -> optional */
/* inter-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: 'FabricMDL2Icons';
  src: url('../css/ms-fabric/fabricmdl2icons-3.70.woff') format('woff'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: optional; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500 - latin */
@font-face {
  font-display: optional; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/inter-v19-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600 - latin */
@font-face {
  font-display: optional; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/inter-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* instrument-sans-regular - latin */
@font-face {
  font-display: optional; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/instrument-sans-v3-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* instrument-sans-500 - latin */
@font-face {
  font-display: optional; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/instrument-sans-v3-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* instrument-sans-600 - latin */
@font-face {
  font-display: optional; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/instrument-sans-v3-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* instrument-sans-700 - latin */
@font-face {
  font-display: optional; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/instrument-sans-v3-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.text-justify-custom {
	text-align: justify;
}
.wordspaced { word-spacing: 1rem; }
.wordspaced-40 { word-spacing: 0.4rem; }
.seo-emphasize-primary { color: #0d6efd!important; }
.seo-emphasize-red { color: red; }
.my-fs-normal { font-size: 1rem!important; }
.my-heading { font-family: "Instrument Sans", sans-serif; line-height: 1.25 !important; font-weight: 700 !important; color: var(--bs-gray-900) !important; }
.my-heading-white { font-family: "Instrument Sans", sans-serif; line-height: 1.25 !important; font-weight: 700 !important; color: rgba(var(--bs-white-rgb)) !important; }

.highlight {
  background-color: #ffeb3b; /* light yellow */
  color: black;
}

/* Eigennamen */
.gangl { font-weight: bold; }
.gangl-de { color: red; }
.OLX { color: red; }
.superscript { font-weight: normal; vertical-align: super; }


/* GoogleTranslate-Switcher */
.gtranslate_wrapper {
	background-color: var(--bs-body-bg);
	width: max-content;
	margin-left: 3rem;
}
.gt_float_switcher {
    background-color: inherit !important;
	color: var(--bs-body-color) !important;
}
.gt-lang-code {
	display: none!important;
}
.gt_float_switcher-arrow {
	display: none!important;
}
.gt_options {
	max-height:  fit-content!important;
}
.gt_options a {
	color: var(--bs-body-color) !important;
}
.gt-selected {
    background-color: inherit !important;
}
.gt-current-lang {
	color: var(--bs-body-color) !important;
	padding: 0!important;
	/* padding-top: 1.2rem!important; */ 
    font-size: small!important;
	font-weight: normal!important;
}
.gt_float_switcher img {
    width: 1.5rem!important;
    margin: 0 1rem 0 0!important;
    border-radius: 0px!important;
	aspect-ratio: 3 / 2; /* Common flag ratio */
}

.carousel-item {
	height: 50vh;
	width: 100%;
	background-size: cover;
	background-position: top;
	z-index: -1!important; 							/* Hinter dem Inhalt */
	overflow: hidden;
}
@media (max-width: 768px) {
  .hero-default {
    background-image: url(../images/2150061957_mobile.webp) !important;
  }
}
.carousel-caption {
	background-color: rgba(0, 0, 0, 0.5);
	padding: 0.5rem;
	border-radius: 0.5rem;
	left: 10%!important;
	right: 10%!important;
}
.carousel-indicators [data-bs-target] {
	background-color: white;
}
.carousel-indicators .active {
	background-color: white!important;
	opacity: 1;
}

.banner-video-caption {
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 0rem!important;
	padding: 0.5rem!important;
	top: auto!important;
	bottom: 1rem!important;
	left: 10%!important;
	right: 10%!important;
	width: auto!important;
	height: auto!important;
	text-align: center!important;
	position: absolute!important;
}

.dropdown-item {
	color: #ffffff; /* Textfarbe */
	/* background-color: #007bff; */
}

/* Hover-Effekt */
.dropdown-item:hover {
	color: #ffffff;
	background-color: #6495ED;
}

.card-img-top-reference {
	height: 200px;
	object-fit: contain;
}

.img-wrapper-reference {
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.img-height-solution { 
	height: 150px!important;          /* Einheitliche Höhe */
	width: auto!important;           /* Einheitliche Breite */
	object-fit: cover!important;      /* Bild wird zugeschnitten, aber füllt den Rahmen */
	display: inline-block!important;
}

.img-height-screenshot { 
	height: 150px!important;          /* Einheitliche Höhe */
	width: auto!important;           /* Einheitliche Breite */
	object-fit: top!important;      /* Bild wird zugeschnitten, aber füllt den Rahmen */
	display: inline-block!important;
}

.card-solutions {
}
.card-solutions img {
  height: 15rem!important;
  object-fit: cover!important;  /* Bild füllt den Container, wird ggf. zugeschnitten */
  display: block!important;
}

.card-screenshots {
}
.card-screenshots img {
  /*
  height: 10%!important;
  max-height: 10%!important;
  */
  object-fit: contain!important;  /* Bild füllt den Container, wird ggf. zugeschnitten */
  display: block!important;
}
.card-screenshot-counter {
	font-size: .6rem; 
	margin-top: 0.1rem!important;
	color: var(--bs-heading-color);
}

/* Bild größer darstellen */

    .mymodal {
      display: none;
      top: 4rem!important;
      left: 1rem!important;
      right: 1rem!important;
      position: fixed;
      z-index: 1000;
      padding-top: 2.5rem;
	  padding-left: 2rem;
	  padding-bottom: 2rem;
	  padding-right: 2.5rem;
      width: fit-content!important;
      height: auto!important;
	  max-height: 90%!important;
      overflow: auto;
      background-color: rgba(0,0,0,0.8);
   }

    .mymodal-content {
      margin: 0 auto!important;
      display: block;
    }
    
	.mymodal-close {
      position: absolute;
      top: -3px;
      right: 5px;
      color: #fff;
      font-size: xx-large;
      font-weight: bold;
      cursor: pointer;
    }

/* Statistics darstellen */

    .mystatistics {
      display: none;
      top: 8rem!important;
      left: 1rem!important;
      right: 1rem!important;
      position: fixed;
      z-index: 1000;
      padding-top: 2.5rem;
	  padding-left: 1rem;
	  padding-bottom: 2rem;
	  padding-right: 1rem;
      width: auto!important;
      height: auto!important;
	  max-height: 90%!important;
      overflow: auto;
      background-color: rgba(0,0,0,0.9);
   }

    .mystatistics-content {
      margin: 0 auto!important;
	  margin-top: 1rem !important;
      display: block;
    }
    
	.mystatistics-close {
      position: absolute;
      top: -3px;
      /* right: 5px; */ 
      color: #fff;
      font-size: xx-large;
      font-weight: bold;
      cursor: pointer;
    }


/* Timeline */

	.timeline {
		position: relative;
		margin: 2rem 0;
		padding: 0;
		list-style: none;
	}
	.timeline::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		width: 4px;
		background: #0d6efd;
		left: 30px;
		margin-left: -2px;
	}
	.timeline-item {
		position: relative;
		margin-bottom: 2rem;
		padding-left: 60px;
	}
	.timeline-item::before {
		content: '';
		position: absolute;
		width: 20px;
		height: 20px;
		/* border-radius: 50%; */				/* eckige Marker */
		background: #0d6efd;
		left: 20px;
		top: 5px;
	}


/* Sitemap */
	.sitemap-item {
		display: inline-block; 
		content: ''; 
		margin-right: .5rem; 
		line-height: .7rem; 
		width: .7rem; 
		height: .7rem; 
		background: #0d6efd;
	}

.text-heading-color {
  color: var(--bs-heading-color);
}

/* CLS-Anpassung Google Lighthouse 
	Weitere Informationen findest du unter https://web.dev/articles/optimize-cls?utm_source=lighthouse&utm_medium=devtools&hl=de */

.my-pt-0 {  padding-top: 0 !important; transform: translateY(0)!important; }
.my-pt-1 {  padding-top: 0 !important; transform: translateY(0.25rem)!important; }
.my-pt-2 {  padding-top: 0 !important; transform: translateY(0.5rem)!important; }
.my-pt-3 {  padding-top: 0 !important; transform: translateY(1rem)!important; }
.my-pt-4 {  padding-top: 0 !important; transform: translateY(1.6rem)!important; }
.my-pt-5 {  padding-top: 0 !important; transform: translateY(2.5rem)!important; }
.my-pt-6 {  padding-top: 0 !important; transform: translateY(3.5rem)!important; }
.my-pt-7 {  padding-top: 0 !important; transform: translateY(4rem)!important; }
.my-pt-8 {  padding-top: 0 !important; transform: translateY(8rem)!important; }
.my-pt-9 {  padding-top: 0 !important; transform: translateY(11rem)!important; }
.my-pe-0 {  padding-right: 0 !important; transform: translateX(0)!important; }
.my-pe-1 {  padding-right: 0 !important; transform: translateX(-0.25rem)!important; }
.my-pe-2 {  padding-right: 0 !important; transform: translateX(-0.5rem)!important; }
.my-pe-3 {  padding-right: 0 !important; transform: translateX(-1rem)!important; }
.my-pe-4 {  padding-right: 0 !important; transform: translateX(-1.6rem)!important; }
.my-pe-5 {  padding-right: 0 !important; transform: translateX(-2.5rem)!important; }
.my-pe-6 {  padding-right: 0 !important; transform: translateX(-3.5rem)!important; }
.my-pe-7 {  padding-right: 0 !important; transform: translateX(-4rem)!important; }
.my-pe-8 {  padding-right: 0 !important; transform: translateX(-8rem)!important; }
.my-pe-9 {  padding-right: 0 !important; transform: translateX(-11rem)!important; }
.my-pb-0 {  padding-bottom: 0 !important; transform: translateY(0)!important; }
.my-pb-1 {  padding-bottom: 0 !important; transform: translateY(0.25rem)!important; }
.my-pb-2 {  padding-bottom: 0 !important; transform: translateY(0.5rem)!important; }
.my-pb-3 {  padding-bottom: 0 !important; transform: translateY(1rem)!important; }
.my-pb-4 {  padding-bottom: 0 !important; transform: translateY(1.6rem)!important; }
.my-pb-5 {  padding-bottom: 0 !important; transform: translateY(2.5rem)!important; }
.my-pb-6 {  padding-bottom: 0 !important; transform: translateY(3.5rem)!important; }
.my-pb-7 {  padding-bottom: 0 !important; transform: translateY(4rem)!important; }
.my-pb-8 {  padding-bottom: 0 !important; transform: translateY(8rem)!important; }
.my-pb-9 {  padding-bottom: 0 !important; transform: translateY(11rem)!important; }
.my-ps-0 {  padding-left: 0 !important; transform: translateX(0)!important; }
.my-ps-1 {  padding-left: 0 !important; transform: translateX(0.25rem)!important; }
.my-ps-2 {  padding-left: 0 !important; transform: translateX(0.5rem)!important; }
.my-ps-3 {  padding-left: 0 !important; transform: translateX(1rem)!important; }
.my-ps-4 {  padding-left: 0 !important; transform: translateX(1.6rem)!important; }
.my-ps-5 {  padding-left: 0 !important; transform: translateX(2.5rem)!important; }
.my-ps-6 {  padding-left: 0 !important; transform: translateX(3.5rem)!important; }
.my-ps-7 {  padding-left: 0 !important; transform: translateX(4rem)!important; }
.my-ps-8 {  padding-left: 0 !important; transform: translateX(8rem)!important; }
.my-ps-9 {  padding-left: 0 !important; transform: translateX(11rem)!important; }

.my-mt-0 {  margin-top: 0 !important; transform: translateY(0)!important; }
.my-mt-1 {  margin-top: 0 !important; transform: translateY(0.25rem)!important; }
.my-mt-2 {  margin-top: 0 !important; transform: translateY(0.5rem)!important; }
.my-mt-3 {  margin-top: 0 !important; transform: translateY(1rem)!important; }
.my-mt-4 {  margin-top: 0 !important; transform: translateY(1.6rem)!important; }
.my-mt-5 {  margin-top: 0 !important; transform: translateY(2.5rem)!important; }
.my-mt-6 {  margin-top: 0 !important; transform: translateY(3.5rem)!important; }
.my-mt-7 {  margin-top: 0 !important; transform: translateY(4rem)!important; }
.my-mt-8 {  margin-top: 0 !important; transform: translateY(8rem)!important; }
.my-mt-9 {  margin-top: 0 !important; transform: translateY(11rem)!important; }

.my-mb-0 {  margin-bottom: 0 !important; transform: translateY(0)!important; }
.my-mb-1 {  margin-bottom: 0 !important; transform: translateY(0.25rem)!important; }
.my-mb-2 {  margin-bottom: 0 !important; transform: translateY(0.5rem)!important; }
.my-mb-3 {  margin-bottom: 0 !important; transform: translateY(1rem)!important; }
.my-mb-4 {  margin-bottom: 0 !important; transform: translateY(1.6rem)!important; }
.my-mb-5 {  margin-bottom: 0 !important; transform: translateY(2.5rem)!important; }
.my-mb-6 {  margin-bottom: 0 !important; transform: translateY(3.5rem)!important; }
.my-mb-7 {  margin-bottom: 0 !important; transform: translateY(4rem)!important; }
.my-mb-8 {  margin-bottom: 0 !important; transform: translateY(8rem)!important; }
.my-mb-9 {  margin-bottom: 0 !important; transform: translateY(11rem)!important; }

.back-top {
	bottom: 70px!important;
}

section {
    padding-top: 0;
    padding-bottom: 0;
}

@media (max-width: 1199.98px) {
    section {
        padding-top: 1rem;
        padding-bottom: 0;
    }
}

/* Breiten per breakpoint/Auflösung */

  .w-xs-screenshot { 
	width: 100% !important; 
	max-width: 100% !important; 
	}
  
  @media (min-width: 576px) {
    .w-sm-screenshot { width: 48% !important; max-width: 48% !important; }
  }
  @media (min-width: 768px) {
    .w-md-screenshot { width: 27% !important; max-width: 27% !important; }
  }
  @media (min-width: 992px) {
    .w-lg-screenshot { width: 27% !important; max-width: 27% !important; }
  }
  @media (min-width: 1200px) {
    .w-xl-screenshot { width: 18% !important; max-width: 18% !important; }
  }
  @media (min-width: 1400px) {
    .w-xxl-screenshot { width: 18% !important; max-width: 18% !important; }
  }


/* Breiten kleine Bilder per breakpoint/Auflösung */

  /* Desktop */
  .my-img { 
	width: auto !important; 
	max-width: 100% !important; 
	height: auto !important;
	object-fit: cover!important;
	}
	
	
/* Mobile */
/*
@media (max-width: 479.98px) {
    .my-img { width: 50% !important; height: auto !important; }
}
*/

/* Hintergrundbild/Banner per breakpoint/Auflösung */

/* Mobile */
@media (min-width: 576px) {
	.bg-image-ganglworks 	{ background-image: url(../images/gangl-works_mobile.webp);	}
	.bg-image-pooldisplay	{ background-image: url(../images/pooldisplay_mobile.webp);	}
}
@media (max-width: 479.98px) {
	.bg-image-ganglworks 	{ background-image: url(../images/gangl-works_mobile.webp);	}
	.bg-image-pooldisplay	{ background-image: url(../images/pooldisplay_mobile.webp);	}
}

/* Desktop */
@media (min-width: 768px) {
	.bg-image-ganglworks {	background-image: url(../images/gangl-works.webp);	}
	.bg-image-pooldisplay {	background-image: url(../images/pooldisplay.webp);	}
}


/* Breiten Anpassung Google Lighthouse 
	Es wurde ein <h1>-Tag, für das keine Schriftgröße angegeben ist, in einem <article>-, <aside>-, <nav>- oder <section>-Tag verwendet. 
	Demnächst wird die Größe dieser Überschrift in diesem Browser geändert. 
	Weitere Informationen findest du unter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#specifying_a_uniform_font_size_for_h1. */
@media (max-width: 479.98px) {
    h1, .h1 {
        font-size: 1.485em;
    }
}
@media (min-width: 1200px) {
    h1, .h1 {
		margin-block: 0.67em;
        font-size: 3.6em;
    }
}