* {
    box-sizing: border-box;
    font-family: Arial;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    scroll-behavior: smooth;
}
:root {
    --max-width: 1280px;
}
HTML, BODY {
    padding: 0;
    margin: 0;
    border: 0;
    background: #fff;
    width: 100%;
    height: 100%;
    font-size: 18px;

}

BODY {
    overflow-x: hidden;
}

MAIN A,
MAIN A:visited {
    color:  #369;
}


LI A {
    text-decoration: none;


}

LI A:hover {
    border-bottom: 2px solid #f93;
    text-decoration: none;
}


#navicontainer {
    position: fixed;
    border: 0;
    margin: 0;
    z-index: 9999;
    width: 100%;
    color: #f00;
    background: rgba(0, 0, 0, 0.9);
    top: 0px;
    box-shadow: 0px 0px 8px #0008;
}

#navi {
    display: flex;
    flex-flow: row nowrap;
    max-width: 980px;
    font-size: 16px;
    padding: 0px 32px;
    margin: 0 auto;
    align-items: left;
    justify-content: space-around;
    height: 48px;
    gap: 24px;
    overflow: hidden;
}

#navi SPAN {

    display: none;
    font-size: 24px;
    line-height: 48px;
    color: #fff;
    background: url("../_gfx/icon_menu.svg") top left no-repeat;
    width: 48px;
    white-space: nowrap;
    padding-left: 56px;


}

#navi A {
    color: #ccc;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    align-self: center;
}

#navi A#indx {
    font-weight: bold;
}

#navi A:hover {
    color: #fff;
    cursor: pointer;
}

#navi .active {
    color: #fff;
    border-bottom: 2px solid #f90;

}

#navi[open] {
    height: 48px;
}

@media only screen and (max-width: 960px) {

    #navi {
        transition: height 0.5s ease-out;
        flex-flow: column nowrap;
        gap: 16px;
        justify-content: flex-start;
    }

    #navi[open] {
        height: 100vh;
    }

    #navi SPAN {
        display: block;
    }

    #navi A {
        display: block;
        font-size: 32px;
        align-self: flex-start;
        width: 100%;
    }

}

HEADER {
    position: relative;
    padding: 0;
    margin: 0; border: 0;
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
    top: 0px;
    z-index: 1;

}

HEADER #overlay {
    position: absolute;
    top: 40%;
    width: 100%;
}

HEADER #overlay DIV {
    position: relative;
    text-align: center;
    /* max-width: 980px; */
    margin: 0 auto;
    color: #fff;
    cursor: default;
    white-space: nowrap;

}

HEADER #overlay #title    { font-size: 9vw; letter-spacing: 0.10rem; }
HEADER #overlay #subtitle { font-size: 2vw; letter-spacing: 0.14rem;}

HEADER #overlay2 {
    position: absolute;
    top: 50%;
    width: 100%;
}

HEADER #overlay2 DIV {
    position: relative;
    text-align: left;
    max-width: var(--max-width);

    padding-left: 10%;
    color: #fffc;
    cursor: default;
    white-space: nowrap;
}

HEADER #overlay2 #title    { font-size: 6vw; letter-spacing: 0.10rem; color: #fff; text-shadow: 0px 0px 2px #0008; }
HEADER #overlay2 #subtitle { font-size: 2vw; letter-spacing: 0.14rem;}

HEADER #teaser {
    width: 100%;
    overflow: hidden;
    object-fit: contain;
    object-position: center center;
    box-shadow: 0px 2px 8px #0008;
}

MAIN {
    display: block;
    position: relative;
    width: 100%;

    background: #fff;
    padding: 32px;
    max-width: var(--max-width);
    margin: 0 auto;

}


MAIN DETAILS {
    margin-top: 1rem;
}

MAIN H1 {
    color: #369;
    font-weight: normal;
    font-size: 2.5rem;
    display: block;
    text-transform: uppercase;


}

MAIN H2 {
    color: #369;
    font-weight: normal;
    font-size: 1.5rem;
}

MAIN H2.large {
    font-size: 2.0rem;
    display: block;
    text-transform: uppercase;
    hyphens: none;
}

MAIN .cattitle {

    color: #fff;
    background: #369;
    margin: 0px;
    text-transform: uppercase;
    padding: 8px 16px;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}

MAIN .list {
    color: #fff;
    background: #369;
}

MAIN .more {
    color: #369;
    background: #eee;
    font-size: 1.2rem;
    cursor: default;
    border: 0px;
    font-weight: bold;
    padding: 16px;
}

MAIN .fullwidth {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
}

MAIN H3 {
    color: #369;
    font-weight: normal;
    font-size: 1.3rem;
}

MAIN H4 {
    color: #369;
    font-weight: normal;
    font-size: 1.2rem;
}



MAIN .indexmenu A {
    display: block;
    background-color: #eee;
    margin: 4px 0px;
    padding: 0.7rem 1rem 0.7rem 3rem;
    text-decoration: none;
    color: #369;
    font-weight: bold;
    font-size: 1.1rem;
    background-size: 2.0rem;

}

SUP.plus {
    vertical-align: 0.32rem;
}

DFN {
	cursor: help;
    text-decoration: underline;
    text-decoration-style: dashed; 
}
 
DFN[data-tooltip]:after {

	content: attr(data-tooltip);

	position: absolute;
	left: var(--ttx);
	top: var(--tty);

	display: block;
	width: 15rem;
	padding: 8px; 
	color: #fff; 
	background-color: #333;
	border: solid 1px #fff8;
	border-radius: 5px; 
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.5s;
	z-index: 1000;

}
 
DFN[data-tooltip]:hover:after {

	opacity: 1;
}

SUMMARY:hover {
    cursor: pointer !important;
}

.labor { background: url("../_gfx/icon-labor.svg") }
.bodensanierung { background: url("../_gfx/icon-bodensanierung.svg") }
.wassersanierung { background: url("../_gfx/icon-grundwassersanierung.svg") }
.tiefenprofil { background: url("../_gfx/icon-tiefenprofil.svg") }
.landmanagement { background: url("../_gfx/icon-landmanagement.svg") }
.wasserproben { background: url("../_gfx/icon-wasserprobenentnahme.svg")  }
.grundwassermessstellen { background: url("../_gfx/icon-grundwassermessstellen.svg") }
.one-tech { background: url("../_gfx/icon-one-technologie.svg") }
.bioclean { background: url("../_gfx/icon-bioclean.svg") }
.frog-tech { background: url("../_gfx/icon-frog-tech.svg") }
.fp600-tech { background: url("../_gfx/icon-fp600-tech.svg") }
.qpcr-analyse { background: url("../_gfx/icon-qpcr-analyse.svg") }
.rio-analyse { background: url("../_gfx/icon-rio-analyse.svg") }
.avatox-analyse { background: url("../_gfx/icon-avatox-analyse.svg") }
.world { background: url("../_gfx/icon-world.svg") }
.services { text-transform: uppercase; }

.cta { background: #eee; padding: 16px; margin: 0; text-align: center; }

.icon {
    background-repeat: no-repeat;
    background-position: 8px center;
}

a.icon {
    transition: transform 0.13s;
}



a.icon.active {
    color: #ffffff;
    background-color: #444444;
}

a.imgtitle {

    display: block;
    text-decoration: none;
    transition: transform 0.2s;
}

a.icon:not(.active):hover, a.imgtitle:not(.active):hover {
    transform: scale(1.075);
}




MAIN .submenu {
    margin-bottom: 32px;
}


MAIN P {
    font-size: 1.0rem;
    line-height: 1.5;
    text-align: justify;
    color: #222;
    margin: 0;

}

MAIN .spacer {
    height: 1px;
    margin: 3rem 0;
}

MAIN .spacer-10 {
    height: 1px;
    margin: 6rem 0;
}


MAIN .spacerhalf {
    height: 1px;
    margin: 1rem 0;
}

MAIN UL {
  list-style: none;
  color: #333;
  line-height: 1.5;
  padding: 0px;
  background: #eee;
  margin: 0px;
}

UL > LI {
    color: #222;
    background: url("../_gfx/icon_check.svg") 16px 50% no-repeat;
    background-size: 24px;
    padding: 16px;
    padding-left: 3rem;
}

UL > LI:nth-child(odd) {
    background-color: #ddd;
}

MAIN OL {
    list-style: disc;
    color: #333;
    line-height: 1.5;
    padding: 0px;
    margin: 1.5rem 0px 1.5rem 1.2rem;
}

MAIN OL > LI {
    padding: 0 0 0.2rem 0;

}

MAIN .mcol {
    column-count: 2;
    column-gap: 32px;
}

MAIN .map {
    position: relative;
    background: #ccc url(../_gfx/world-map.jpg) no-repeat;
    background-size: 5120px 2560px;
    border-radius: 5px;
    min-height: 256px;
    height: auto;
    /* box-shadow: inset 0px 0px 32px #0008; */

}

MAIN .map > IMG {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-100%);
}

MAIN #map-svg {
    position: relative;
}

MAIN #map-image {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

MAIN #map-svg .pin {

    position:absolute;
    display: block;
    top: 0px;
    left: 0px;
    transform: translate(-50%,-100%);
    width: 16px;
    height: 22px;
    background: url(../_gfx/icon-pin.svg) no-repeat;
    background-size: contain;

}

.pill {

    white-space: nowrap;
    background:#8888;
    color:#fff;
    border-radius:1rem;
    border: 2px solid #8884;
    padding: 4px 8px;
}


.flx {
    display: flex;
    flex-flow: row wrap;
    gap: 32px;

}

.flx > DIV {
    flex: 1 1 400px;

}


.diagonal {
    --skew-angle: -5deg;
    --background: linear-gradient(
        45deg, #12c2e9, #c471ed, #f64f59
    );
    position: relative;
    isolation: isolate;

}

.diagonal::after {
    content: '';
    background: var(--background); 
    position: absolute;
    z-index: -1;
    inset: 0;
    transform: skewY(var(--skew-angle));
}


.flx:nth-of-type(odd) > DIV:first-child {

    order: 2;
}

.flx.flowleft > DIV:first-child {

    order: 2;
}


@media only screen and (max-width: 895px) {

    .flx:nth-of-type(odd) > DIV:first-child {
        order: 0;
    }
}


FOOTER {
    display: block;
    font: normal 1.0rem Arial;
    background: #222;
    color: #ccc;
    padding: 32px 0px;
    line-height: 150%;
}


FOOTER > SECTION * A {
    color: #ccc;
    text-decoration: none;
    margin-bottom: 8px;
}

FOOTER > SECTION * A:hover {
    color: #fff;
    cursor: pointer;
}

FOOTER > SECTION {
    max-width: var(--max-width);
    padding: 8px 32px;
    margin: 0 auto;
}

FOOTER .navigation {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    flex-basis: 1 1 50%;

}

FOOTER .navigation > NAV {
    display: flex;
    flex-flow: column wrap;
    min-width: 220px;
    margin-bottom: 32px;
}

FOOTER .navigation > NAV > A:first-child {
    font-weight: bold;
    margin-bottom: 16px;
}



FOOTER .legal {
    border-top: 1px solid #666;
}

FOOTER .legal > NAV {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

FOOTER .legal > NAV > SPAN > A {
    margin-right: 8px;

}

FOOTER .active {
    opacity: 0.3;

}

A .button {
    display:inline-block;
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.refs {
    border-bottom: 1px solid #ccc;
	border-collapse: collapse;
    width: 100%;
	background: #f8f8f8;
    font-size: 0.9rem;
}


.refs thead {
    background: #369;
    color: #fff;
    font-size: 1rem;
}

.refs thead th:first-child {
    width: 60%;
    border-top-left-radius: 8px;
    text-align: left;
}

.refs thead th:nth-child(2) {
    width: 20%;
}

.refs thead th:last-child {
    border-top-right-radius: 8px;
}

.refs th {
    background: #369;
    padding: 12px 8px;
}

.refs td {
    border: 1px solid #ccc;
    border-top: 0px;
    border-bottom: 0px;
    padding: 12px 8px;
}

.refs a {
    font-weight: bold;
}

.refs tbody td:nth-child(2),
.refs tbody td:nth-child(3) {
	text-align: center;

}

.refs tbody tr {
    cursor: pointer;
}

.refs tbody tr:nth-child(odd) {
	background: #ddd;
}

.refs tbody tr:hover {
    color: #fff;
    background: #555;
    
}

.refs tbody tr:hover a {
    color:#fff;
}

.ref-entry H2 {
    margin-top: 0px;
    font-weight: bold;
}

.ref-entry STRONG {
    display:block;
    color:#369;
    line-height:2rem;
    background:#eee;
}

.ref-entry OL {
    background:#eee0;
    margin:0;
    padding: 1rem 0 0 1rem;
}

.ref-entry B {
    color:#369;
}


.phone {
    background: url(../_gfx/icon-phone.svg) center left no-repeat;
    background-size: 24px 24px;
    padding-left: 32px;
}

.mobile {
    background: url(../_gfx/icon-mobile.svg) center left no-repeat;
    background-size: 24px 20px;
    padding-left: 32px;
}

a.email {
    color: #369;
    text-decoration: none;
}
.email {
    background: url(../_gfx/icon-email.svg) center left no-repeat;
    background-size: 24px 24px;
    padding-left: 32px;
}

#partner-title {
    text-align: center;
    padding: 16px;

}

#partner-logos {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 32px;
    border: 3px solid #eee;
    padding: 16px 0px;
}

#partner-logos IMG {
  min-height: 48px;
  height: 48px;
  width: auto;   

  flex: 1 1 auto;
  cursor: pointer;    
}


#contact {

    padding: 8px 0px 16px 0px;
 
    
}

#contact input, #contact textarea {
    display: block;
    width: 100%;
    font: normal 1.1rem Arial;

    border: 0;
    border-bottom: 1px solid #69c;
 
    padding: 8px;
    margin-bottom: 16px;
    background: transparent;
    
}

#contact input:focus, #contact textarea:focus {
    outline: none;
    border-bottom: 1px solid #f93;
    background-color: #eee;
}

#contact input[type=submit] {

    border-radius: 5px;
    background: #369;
    color: #fff;
    padding: 8px;
}

#contact input[type=submit]:hover {

    background: #69c;
    color: #fff;
    padding: 8px;
}

#contact textarea {
    height: 200px;
 
}