/* ::root */
@import url("_root.css?v=1");

/* Globals */
* { box-sizing: border-box; }

body {
  min-height: 100vh;
  text-rendering: geometricPrecision;
  background-color: var(--clr-body-bg);
  color: var(--clr-text);
  text-shadow: var(--clr-text-shadow);
  font-family: var(--default-font);
  overflow-x: hidden;
}

/* Text global tags */
h1, h2, h3, h4 {font-family: var(--default-font);}
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: var(--outline-bg);
  -webkit-text-stroke: 1px var(--outline-border);
}

/* Text tags */
main h1, main h2, main h3, main h4, main p, main ul, pre {
  background: transparent; 
  width: 98%;
}
pre { 
  border-radius: 8px;
  margin: 4px;
  padding: 4px;
  background: rgba(255,255,255,.5);
  white-space: pre-line;
}

a {color: var(--clr-a); text-decoration: none;}
a:hover,a:active, button.btn:hover {color: var(--clr-a-hov);}
main a {color: var(--clr-a-main); text-decoration: underline;}
main a:hover, main a:active {color: var(--clr-a-main-hov); text-decoration: none;}

/* --- a :: ICON --- */
a.icon {
	display: inline-block;
	text-decoration: none !important;
	text-align: center;
	font-size: 85%;
	line-height: 1.4em;
	vertical-align:middle;
	margin-bottom: .2em;
	padding: 0em .4em .05em .3em;
	border-radius: 500px;
	color: var(--clr-a-icon)!important;
	background-color: var(--clr-a-icon-bg);
}
a.icon:hover { color: var(--clr-a-icon-hov)!important;    }
a.icon::before {  
  font-family: 'FontAwesome';
  font-size: 85%;
  margin-left: .2em;  
  margin-right: .4em;
  content: "\f0c1";
}
a.icon.extern::before { content: "\f08e"; }
a.icon.mail::before { content: "\f003"; }
a.icon.google::before { content: "\f1a0"; }
a.icon.map::before { content: "\f041"; }
a.icon.fb::before { content: "\f09a"; }
a.icon.insta::before { content: "\f16d"; }
a.icon.yt::before { content: "\f16a"; }
a.icon.ytm::before { content: "\f144"; }
a.icon.linked::before { content: "\f0e1"; }
a.icon.xing::before { content: "\f168"; }
a.icon.twitter::before { content: "\f099"; }
a.icon.phone::before { content: "\f095"; }
a.icon.mobile::before { content: "\f10b"; }
a.icon.whatsapp::before { content: "\f232"; }
a.icon.skype::before { content: "\f17e"; }
a.icon.apple::before { content: "\f179"; } /* facetime */
a.icon.video-cam::before { content: "\f03d"; }
a.icon.microsoft::before { content: "\f17a"; } /* teams */
a.icon.wp::before { content: "\f19a"; }
a.icon.download::before { content: "\f019"; }
a.icon.vcard::before { content: "\f2bc"; }
a.icon.date::before { content: "\f133"; }
a.icon.pdf::before { content: "\f1c1"; }
a.icon.video::before { content: "\f04b"; }
a.icon.cloud::before { content: "\f0c2"; }
a.icon.dropbox::before { content: "\f16b"; }
a.icon.send::before { content: "\f1d8"; }

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

/* /// Company Colors /// */
.color-corp-a { color: var(--clr-corporate-a)!important; }
.color-corp-b { color: var(--clr-corporate-b)!important; }
.color-corp-a-rgba { color: var(--clr-corporate-a-rgba)!important; }
.color-corp-b-rgba { color: var(--clr-corporate-b-rgba)!important; }
.color-corp-a-bg { background-color: var(--clr-corporate-a)!important; }
.color-corp-b-bg { background-color: var(--clr-corporate-b)!important; }
.color-corp-a-bg-rgba { background-color: var(--clr-corporate-a-rgba)!important; }
.color-corp-b-bg-rgba { background-color: var(--clr-corporate-b-rgba)!important; }

/* /// 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: var(--bg-full-overlay);	
	z-index: 2;
	/* display: none; */  
}

div.full-cover.pattern {
  background: var(--bg-full-pattern-clr) var(--bg-full-pattern-img) repeat fixed center; 
}

/* 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:var(--cookie-bg);
  margin: 0 8px;
  padding: 20px 10px 15px 10px;
  padding-right: 80px;
}

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

#cookie-consent p, 
#cookie-consent p a {
  color: var(--cookie-text);
  font-size: clamp(.8rem, 2vw, 1.2rem);
  line-height: 1.6rem;
}
#cookie-consent p {
  display: inline-block;
  margin: 0;
  padding:2px;
}
#cookie-consent p a {
  margin: -6px 2px 2px 2px;
  color: var(--cookie-a); 
}
#cookie-consent a:hover { color: var(--cookie-a-hov); }
#cookie-consent #btn-ok-cookie {
  position: absolute; 
  top: 20px; 
  right: 10px;
  margin: auto;
}
/* .light */
#cookie-consent.light {
  background:var(--cookie-bg-light);
}
#cookie-consent.light p {
  color: var(--cookie-text-light); 
}
#cookie-consent.light p a {
  color: var(--cookie-a-light); 
}
#cookie-consent.light a:hover { color: var(--cookie-a-light-hov); }


/* //////////////////// 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;
}

/* ============= COLOR: SVG black to HEX filter: Colors // https://codepen.io/sosuke/pen/Pjoqqp ================= */
img.invert {  filter: invert(1); /* black // white */ }
img.grey { filter: invert(.7); /* grey */ }
img.spezial {filter: invert(100%) sepia(76%) saturate(1913%) hue-rotate(49deg) brightness(97%) contrast(77%); }
/*
img:hover.logo { filter: invert(1); }
*/

/* 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: var(--div-bg-right); 
  clip-path: var(--div-bg-path-small);
}


/* /////////////// 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, .maxwidth {
    width: 75%;
    max-width: 680px;
  }
  .right { 
    border: none;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;  
    clip-path: var(--div-bg-path);
  }
  .ratio {
    width: 75%;
    /* max-width: 680px; */
  }
}

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

header,footer { 
  background-color: var(--divs-bg); 
}

/* ======== position: sticky // https://css-tricks.com/couple-takes-sticky-footer/ ======= */
.stick-top, .stick-bottom {
  position: -webkit-sticky; 
  position: sticky;
  margin: 20px auto; 
}
.stick-top {
  top: 0;
  bottom: auto;
}
.stick-bottom {
  top: auto;
  bottom: 0;
}

/* ======== iframe ratio ======= */

.ratio , .ratio iframe{
  border-radius: 6px;
  background-color: rgba(0,0,0,.8);
  background-color: rgb(30,84,159,.8);  
}

.ratio-dina4 {
  aspect-ratio: 5/7; /* DIN A4 */
}

/* https://loading.io/css/ */
.lds-hourglass {
	position: absolute;
	display: inline-block;
	width: 80px;
	height: 80px;

top: 20%;	
	left: 0; 
	right: 0; 
	margin-left: auto; 
	margin-right: auto; 
}
.lds-hourglass:after {
	content: " ";
	display: block;
	border-radius: 50%;
	width: 0;
	height: 0;
	margin: 8px;
	box-sizing: border-box;
	border: 32px solid #fff;
	border-color: #fff transparent #fff transparent;
	animation: lds-hourglass 1.2s infinite;
}
@keyframes lds-hourglass {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  50% {
    transform: rotate(900deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    transform: rotate(1800deg);
  }
}

/* ======== 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;
}
.bg-line.dotted:before, .bg-line.dotted:after{
  border-bottom: 2px dotted;
}
.bg-line.dashed:before, .bg-line.dashed:after{
  border-bottom: 1px dashed;
}

.bg-line a { text-decoration: none; }

/* ============= Accordion ============= */
.accordion {
  -webkit-box-shadow: var(--shadow-global); 
  box-shadow: var(--shadow-global);
}
.accordion, .accordion h2, .accordion p {
  width: 100%;
}
.accordion, .accordion-item {
  background-color: var(acord-clr-bg);
  border: none;  
}
.accordion-item {
  background-color: var(--acord-clr-bg-item);
  margin-bottom: 3px;
}
.accordion-item:last-child {
  margin-bottom: 0;
}

button.accordion-button {
  padding: var(--acord--btn-padding-y) var(--acord--btn-padding-x);
}
.accordion-button::after {
  /* */ background-image: none;
  font-family: 'FontAwesome';
}

.accordion-item p, 
.accordion-item ul li { 
  font-size: inherit;
  color: var(--acord-clr-text-item);
  /* color: var(--clr-text); */
}

/* ::after global Sign */
.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: var(--acord-btn-bg-sign);
}

/* item >> closed */
.accordion button.accordion-button.collapsed {  
  color: var(--acord-btn-text-item);
  background-color: var(--acord-btn-bg-item);
}
.accordion button.accordion-button.collapsed:hover { 
  color: var(--acord-btn-text-item-hov); 
  background-color: var(--acord-btn-bg-item-hov);  
}
.accordion-button.collapsed::after {
  content: "\f078";
  color: var(--acord-btn-text-item);
}

/* item >> open active */
.accordion button.accordion-button:not(.collapsed) {
  color: var(--acord-btn-text-item-active);
  background-color: var(--acord-btn-bg-item-active); 
}
.accordion-button:not(.collapsed)::after {  
  content: "\f078";
  color: var(--acord-btn-text-item-active);
  background-color: var(--acord-btn-bg-sign-active);
}


/* ============= 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;	
}

footer a, footer .btn {color: var(--clr-a);}

 /* /// 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;

  background-color: var(--modal-bg);
  color: var(--modal-text);
}
.modal-content .btn-close {
  background-color: var(--modal-btn-close);
}
.modal-content p, .modal-content ul li {
  font-size: calc(0.5rem + 1vmin); 
  color: var(--modal-text);	
}
.modal-content a {
  text-decoration: underline;
  color: var(--modal-a);
}
.modal-content a:hover {
  text-decoration: none;
  color: var(--modal-a-hov);
}
.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 | 
https://codepen.io/sosuke/pen/Pjoqqp 
https://isotropic.co/tool/hex-color-to-css-filter/
/////////////////// */

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);
  }