/* Globals */
@import url("fonts/font-awesome/css/font-awesome.min.css");
@import url("fonts/material-design/material-icons.css");

/* Inter UI
font-family: 'Inter UI';
font-family: 'Inter UI medium';
font-family: 'Inter UI bold';
font-family: 'Inter UI black';
font-family: 'Inter UI black italic';
*/

@import url("fonts/inter_ui/inter-ui.css");

:root {
  --blokks-default-font: "Inter UI", sans-serif;
}


* { box-sizing: border-box; }

body {
  min-height: 100vh;
  text-rendering: geometricPrecision;
  background-color: #FFF;
  color: #000;
  /* font-family: 'Inter UI'; */
  overflow-x: hidden;
}


/* Text global tags */
h1, h2, h3, h4 {font-family: 'Inter UI medium';}
h2 { font-size: calc(1.2rem + .9vw); }
p, button, footer p, footer button.btn { font-size: calc(1.1rem + .3vw); }
footer p, footer button.btn {margin: 0 5px; }
li  { font-size: calc(.9rem + .3vw); }
button, .btn, a.btn, a.btn:hover, a.btn:visited, a.btn:active, a.btn:focus {
  outline: 0 none;
	border-radius:0;
	border: none; border: 0;
	box-shadow:none !important;	
}
/* 
https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
https://codesandbox.io/s/clamp-linear-intepolation-based-on-viewport-width-builder-xgkft
https://die-netzialisten.de/responsive-schriftgroessen-mit-clamp/ 
*/
h1.big, h2.big, h3.big, h4.big, p.big {
  line-height: 0.9em;
  font-size: clamp(2.5rem, 5vw, 4.0rem);
}
h1.red {background: red;} /* wg. JS viewport */

.outline {
  font-family: 'Inter UI bold';
  color: transparent;
  color: rgba(255,255,255,.5);
  -webkit-text-stroke: 1px #000;
}

/* Text tags */
main h1, main h2, main h3, main h4, main p, main ul {
  background: transparent; 
  width: 98%;
}

a {color: #000; text-decoration: none;}
a:hover,a:active, button.btn:hover {color: #666;}
main a {color: #333; text-decoration: underline;}
main a:hover, main a:active {color: #000; text-decoration: none;}

.modal p { font-size: calc(.8rem + .2vw); }

/* /// Company Colors /// */
.color-a { color: #0089b0;}
.color-b { color: #abcddd;}
.color-a-rgb { color: rgba(0,137,176,1);}
.color-b-rgb { color: rgba(171,205,221,1);}
.color-a-bg { background-color: #0089b0;}
.color-b-bg { background-color: #abcddd;}
.color-a-bg-rgb { color: rgba(0,137,176,.5);}
.color-b-bg-rgb { color: rgba(171,205,221,.5);}

/* /// icons google Material /// */
.material-icons { vertical-align: middle; }

.material-icons.md-10 { font-size: 10px; }
.material-icons.md-12 { font-size: 12px; }
.material-icons.md-14 { font-size: 14px; }
.material-icons.md-16 { font-size: 16px; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

/* // CSS --- Full BG Image // als img tag // Cover /////////// */

div.full-cover {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	max-height: 100%;
	overflow: hidden; 
	z-index: 1;
}
div.full-cover img {
	position: relative;
	width: 100%;
	height: 100%; 
	object-fit: cover;
	object-position: center center;
	max-height: 100%;
	min-height: 100%;
	margin: 0;
	z-index: 1;
}
div.full-cover .full-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;	
  background-color: rgba(0,0,0,.5);
	background-color: rgba(255,255,255,.3);
	
	z-index: 2;
	/* display: none; */  
}

/* Cookie Notice */
#cookie-consent {
  position: fixed;
  top: auto;
  right: 0px;
  bottom: 0px;
  left: auto;
  z-index: 5;  
  width: auto;
  max-width: 98%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  display: none; /* Status JS */

  -webkit-border-top-left-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;

  background: rgba(0,0,0,.8);
  margin: 0 8px;
  padding: 20px 10px 15px 10px;
  padding-right: 80px;
}

@media (min-width: 992px) { 
  #cookie-consent { width: 600px; }
}

#cookie-consent p, 
#cookie-consent p a {
  color: #ddd;
  font-size: calc(.8rem + .3vw);
  line-height: 1.6rem;
}
#cookie-consent p {
  display: inline-block;
  margin: 0;
  padding:2px;
}
#cookie-consent p a {
  margin: -6px 2px 2px 2px;
  color: #FFF;  
}
#cookie-consent a:hover { color:#1E90FF; }
#cookie-consent #btn-ok-cookie {
  position: absolute; 
  top: 20px; 
  right: 10px;
  margin: auto;
}


/* //////////////////// BLOCKS //////////////////////// */
header, main, footer {z-index: 3;}

/* //////////// HEADER //////////// */
header {
  text-align: center;
}

header h1.logo-text {
  margin: 0;
  font-family: 'Inter UI medium';
  font-size: clamp(1.8rem, 2.5vw, 3.4rem); /* min,dyn,max // https://die-netzialisten.de/responsive-schriftgroessen-mit-clamp/ */
}

/* //////////// body MAIN //////////// */

body, main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

/* ============= Logo ================= */
main img.logo {
  width: clamp(240px, 50%, 600px);
  height: auto;
}


/* ============= SVG black to HEX filter: Colors // https://codepen.io/sosuke/pen/Pjoqqp ================= */
img.white { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); }
img.dark { filter: invert(6%) sepia(5%) saturate(11%) hue-rotate(335deg) brightness(98%) contrast(83%); }
img.spezial {filter: invert(100%) sepia(76%) saturate(1913%) hue-rotate(49deg) brightness(97%) contrast(77%); }

a:hover img.logo { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); }

/* row height 100% */
.row.full-h { 
  display: flex;
  flex: 1 1 auto;
}
.left,.right {  
  display: flex;
  align-items: center;
  justify-content: center;
}

.left, .right { background-color: transparent; }
.right {
  /* 
  background-clip: content-box;
  background-clip: border-box;
  */
  background-clip: padding-box;
  border: 1.5vw solid transparent;
  background-color: rgb(0,0,0,.1);
  clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 100%, 0 100%, 0 10%);
}


/* /////////////// s.o. // mobile first - ab Desktop size ////////// */
@media (min-width: 992px) { 
  header { text-align: left; }
  header h1.logo-text { margin-left: 2%; }
  main h1, main h2, main h3, main h4, main p, main ul, div.accordion {
    width: 75%;
    max-width: 680px;
  }
  .right { 
    border: none;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;   
    clip-path: circle(50% at 50% 50%); /* Circle */
    clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%, 0 86%, 0 14%);
  }
}

/* ============= divs bg ================= */

body {
  background-color: #efefef; 
  background-color: rgb(237, 237, 237);
}

header,footer, .right {
  background-color: rgb(0,0,0,.1);  
  background-color: rgb(255,255,255,.4);
}

/* ======== Text Line links + rechts ======= */

.bg-line {
  display: flex;
  flex-direction: row;
  margin: 1rem .5rem;  
}
.bg-line::before, .bg-line::after {
  content: "";
  flex: 1 1;
  border-bottom: 1px solid;
  margin: auto;
  margin:auto 0.25em;
  color: #e2001a;
}
.bg-line.dotted:before, .bg-line.dotted:after{
  border-bottom: 2px dotted;
}
.bg-line.dashed:before, .bg-line.dashed:after{
  border-bottom: 1px dashed;
}

/* ============= Accordion ============= */

.accordion, .accordion h2, .accordion p {
  width: 100%;
}
.accordion, .accordion-item {
  background-color: transparent;
  border: none;
}
.accordion-button::after {
  /* */ background-image: none;
  font-family: 'FontAwesome';
}
.accordion-item {
  background-color: rgba(255,255,255,.5);
  margin-bottom: 3px;
}

/* ::after global */
.accordion-button.collapsed::after, 
.accordion-button:not(.collapsed)::after {
  background-image: none;
  border-radius: 50%;
  text-align: center;
  width: 30px;
  height: 30px;
  line-height: 30px;
  background-color: rgba(0,0,0,.2);
}

/* item geschlossen */
.accordion button.accordion-button.collapsed {  
  color: #000;
  background-color: #fff;
}
.accordion button.accordion-button.collapsed:hover {  
  background-color: #efefef;
}
.accordion-button.collapsed::after {
  content: "\f078";
  color: #000;
}
/* item offen */
.accordion button.accordion-button:not(.collapsed) {
  color: #FFF;
  background-color: #e2001a; 
}
.accordion-button:not(.collapsed)::after {  
  content: "\f078";
  color: #FFF;
}


/* ============= Thumbs images ============= */

.gallery {
  background: transparent;
  width: 100%;
}
.gallery.th-square img {
  object-fit: cover;
  width: calc(100vw / 4);
  height: calc(100vw / 4);
}
.gallery.th-square.clip img {
  /* https://bennettfeely.com/clippy/ */  
  clip-path: polygon(100% 0, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0 0);
}

.gallery.th-square img:first-child {
  clip-path: polygon(20% 0%, 100% 0, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
.gallery.th-square img:last-child {
  clip-path: polygon(80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0 0);
}



/* Grosser Bildschirm & 3 x Bilder */
@media (min-width: 992px) { 
  .gallery.th-square img {
    width:calc(100% / 3.333);
    height: auto;
    aspect-ratio: 9/6;    
  }
}

/* ============= SVG ================= */

img.svg-full {
	display: block;
	background: transparent;
}

/* Dimension */
img.svg-full {
	width: 900px!important;
	max-width: 100%!important;
	height: auto;	
}

 /* /// Modal + jQuery /// https://getbootstrap.com/docs/5.0/components/modal/#variables */  
.modal-backdrop {   
  background-color: #000;
}
.modal-content {
  text-align: left; 
  font-size: calc(0.5rem + 1vmin); 
  color: #333;
}
.modal-content p, .modal-content ul li {
  font-size: calc(0.5rem + 1vmin); 	
}
.modal-content a {
  text-decoration: underline;
}
.modal-content div.matomo iframe {
  width: 100%;
  border: 1px dotted #222;
  aspect-ratio: 9/6;
}
@media (min-width: 992px) { 
  .modal-content div.matomo iframe {
    aspect-ratio: 36/6;
  }
}

/* ////////////// IMG faerben /////////////////// */

div.colorize.black img, img.colorize.black {
  -webkit-filter: invert(30%) grayscale(100%) brightness(70%) contrast(4);
        filter: invert(30%) grayscale(100%) brightness(70%) contrast(4);
  }
  
  div.colorize.grey img, img.colorize.grey {
  -webkit-filter: grayscale(100%) brightness(110%) contrast(0.9);
        filter: grayscale(100%) brightness(110%) contrast(0.9);
  }
  
  div.colorize.red img, img.colorize.red {
  -webkit-filter: invert(40%) grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(400%) contrast(2);
        filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
  }
  
  div.colorize.blue img, img.colorize.blue {
  -webkit-filter: grayscale(100%) brightness(30%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(0.8);
        filter: grayscale(100%) brightness(30%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(0.8);
  }
  
  div.colorize.green img, img.colorize.green {
  -webkit-filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(50deg) saturate(1000%) contrast(0.8);
        filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(50deg) saturate(1000%) contrast(0.8);
  }
  
  div.colorize.yellow img, img.colorize.yellow {
  -webkit-filter: grayscale(100%) brightness(120%) sepia(90%) hue-rotate(5deg) saturate(500%) contrast(0.7);
        filter: grayscale(100%) brightness(120%) sepia(90%) hue-rotate(5deg) saturate(500%) contrast(0.7);
  }