@charset "UTF-8";
/* CSS Document */
/*

dunkelblau = #93BE55
hellblau = #C2D468
grün = #007c30

--KTGIS akzentfarbe1: #93BE55;
--KTGIS akzentfarbe2: #C2D468;

*/

/* -- wurden für IE-Test ersetzt durch die eigentlichen Werte
:root {
--schriftfarbe: #222;
--akzentfarbe1: #93BE55;
--akzentfarbe2: #C2D468;
--hintergrundfarbe: rgba(255,255,255,0.95);
--mouseoverfarbe: rgba(255,255,255,0.10);
--shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
--tooltip: rgba(238,223,131,0.95);
}
*/


/*** Openlayers ****/
.ol-zoom { top:100px; left:10px;  padding:0; background:none}
.ol-zoom button, #locateme { width:30px; height:30px; background:#93BE55; box-sizing:border-box; margin:1px 0; box-shadow:0px 3px 5px 0px rgba(0,0,0,0.25);}

#locateme { position:absolute; top:170px; left:10px; background-image:url(img/locateme.svg); background-repeat:no-repeat; background-position:center center; background-size:75% 75%; cursor:pointer}

.rotate-north {top: 210px; left: 10px;}
#rotateMapNorth {display:none;}

.ol-attribution { bottom:12px !important}
.ol-attribution ul {font-size:12px; position:relative;background:rgb(255, 255, 255);}

.ol-mouse-position{top:500px;right:8px;position:absolute}

#maptools {position:absolute; top:130px; left:10px}
#maptools > div { margin-bottom:5px }

/* für den Button*/
.layer-control {top: 65px;left: .5em;}
.ol-touch .layer-control {top: 80px;}

#map {position: relative;}
  
#infoWFSTooltip {position: absolute;height: 1px;width: 1px;	z-index: 100;}

/*****************************************************/

body {font-family: 'Source Sans Pro', sans-serif; font-size:14px; line-height:1.3; color:#222;}
html,body, #map { height:100%}

	
img { max-width:100% !important; height:auto;}
iframe { box-sizing:border-box; border:0;}
	
input[type=text] { border-radius:2px; height:28px; position:relative;  border:1px solid #ddd; box-sizing:border-box; float:left; width:100%; padding:2px 6px; color:#999;}
input[type=text]:hover { border-color:#ccc}
input[type=submit] {box-sizing:border-box; float:left; height:28px; width:28px;  margin-left:-28px; position:relative; z-index:2; border:0; color:rgba(255,255,255,0.95); border-radius:0px 2px 2px 0px; display:block; text-align:center; padding:0;}
    
.button { height:30px; width:30px; color:rgba(255,255,255,0.95); border-radius:2px; box-sizing:border-box; line-height:30px; text-align:center; box-shadow:0px 3px 5px 0px rgba(0,0,0,0.25);  cursor:pointer; text-align:center}

.button img { width:auto; height:70%; display:inline-block; }
.button i { color:rgba(255,255,255,0.95); line-height:30px; display:block; width:100%; height:100%; box-sizing:border-box}
.button i:before { display:block; box-sizing:border-box}
	
html,body {overflow:hidden; position:relative;}
body.page { overflow:auto; padding:20px; height:auto;}

#mainwrapper { position:absolute; width:100%; left:0; top:0; z-index:10; }
	
#header { position:absolute; left:0px; top:5px;  height:40px; box-sizing:border-box;box-shadow:0px 3px 5px 0px rgba(0,0,0,0.25); z-index:20000 }
#header > div { float:left}

#logo {  position:relative; top:-5px; left:10px; background:#fff; box-shadow:0px 3px 5px 0px rgba(0,0,0,0.25);}
#logo a {  position:relative; padding:0px; display:block}
#logo a img { width:188px; height:auto;}
.logo_mobil { display:none}
	
#funktionen { margin:0 0 0 20px}
#funktionen > div { float:left; height:40px; color:#fff; width:40px; text-align:center;box-sizing:border-box; overflow:hidden}
#funktionen > div > * {color:#fff;  display:inline-block; height:100%; width:100%; text-align:center; line-height:42px; font-size:19px; cursor:pointer;  box-sizing:border-box}

.no-touch #locate { display:none}

#f_search, #f_inhalte, #f_map { display:none}
		
#header_suche {margin:6px 0 0 10px; width:200px}
#header_suche input[type=submit], #suche input[type=submit] {font-family: FontAwesome;  }

.inner {padding:15px 15px 15px 35px;}
.inner:after { display:block; clear:both; content:" ";}

#karten{ display:none}

#layertree{display:none}
#layertree li { list-style:none; padding:5px 15px 5px 15px; border-bottom: 1px solid rgba(0,0,0,0.1);}
#layertree li > span {cursor: pointer; display:block; line-height:25px}
#layertree li > span.inaktiv { color:#999}
#layertree li > span:after { content:" "; display:block; clear:both;}
#layertree .inner { padding-bottom:0}
#layertree input[type=checkbox] { margin-right:5px; display:none}
#layertree input.parentcheck { float:left; display:none; margin-right:5px; margin-left:20px; position:relative; top:3px }

#layertree label { display:block}
#layertree h3 { font-size:14px; cursor:pointer; margin:0; margin-bottom:8px; }
#layertree h3 span.plus:before { font-size:20px; opacity:0.5; content:"+"; display:inline-block; margin-left:-35px; width:15px; text-align:center }
#layertree h3.open span.plus:before { content:"-"; }
#layertree h3 span.headline {display:inline-block; font-size:14px; margin-left:20px}

#layertree h5 { margin-top:0; margin-bottom:15px; opacity: 0.7 }
      
.sublayerbox { display:none; background: rgba(0,0,0,0.05); padding:0px ; margin:0 -15px; } 
.sublayerbox > span > span { display:inline-block; }
.sublayerbox * {font-size:13px}
.sublayerbox > span {border-bottom: 1px solid rgba(0,0,0,0.1); display:block; padding:5px 15px 5px 60px;}
.sublayerbox > span:last-child { border:0}  .labelopacity { display:inline-block !important; float:right; margin-top:-22px; font-size:11px; cursor:pointer}
input[type=range] { /*display:none*/ opacity:0.4; margin-bottom:5px } 

/*tabs*/
#tabbox { position:absolute; left:-60px;top:0; z-index:1 }
#tabbox > div { width:60px; height:40px; line-height:40px; text-align:center; cursor:pointer;  box-shadow:0px 3px 5px 0px rgba(0,0,0,0.25); margin-bottom:1px; transition:all 0.2s; background:#fff;}
.no-pseudotouch #tabbox > div:hover {width:70px;margin-left:-10px}
#tabbox > div.open { color:#fff; pointer-events: none;}
.no-pseudotouch  #tabbox > div.open {  width:70px; margin-left:-10px}
  
#infoWMS { word-wrap:break-word; position:relative; clear:both; }
#infoWMS > ul { list-style:none; padding:0; margin:0}
#infoWMS > ul > li { list-style:none; padding:10px 0px 10px 0px; margin:0; border-bottom:1px solid #ccc; cursor:pointer}
#infoWMS > ul > li > id { display:block;}
#infoWMS > ul > li span {  display:block; margin:3px 0; padding-right:25px;  }
#infoWMS > ul > li.open { border:0;}
#infoWMS > ul > li:before {content:"+"; float:right; font-size:20px}
#infoWMS > ul > li.open:before {content:""; }
#infoWMS > ul > li >ul { display:none; margin-left:0; padding-left:0;}.button_close { background:url(img/close.svg) no-repeat center center ; background-size:15px 15px; position:absolute; right:0px; top:5px; width:30px; height:30px; display:none; cursor:pointer}
#infoWMS > ul > li.open .button_close { display:block;}.tooltip { opacity:1 !important }
    
.infoGrid{display: grid; grid-template-rows: auto; grid-row-gap:10px; }
.headerImage {margin: 10px 0; grid-row: 1 / 4; grid-column: 1 / 5; content: '';}
.headerInfo {background-color: rgba(255,255,255,0.9); grid-row: 3; grid-column: 1 / 5;}
.headerText {margin-bottom:10px; padding:10px 15px; grid-row: 3; grid-column: 1 / 4;}
.headerKat {grid-row:3; grid-column: 4 / 5; justify-self:center; align-self:center;color:#fff;margin: 0 10px 10px 0;}
.headerKat img{width:35px; height:35px;}
.infoBeschreibung {grid-column: 1 / 5; margin: 0 10px 10px 10px; padding: 10px;}
.infoIcon {justify-self: center; grid-column: 1 / 2; align-self:center; min-height:20px !important; min-width:20px !important; margin-right:10px;}
.infoIcon img{width:20px; height:20px;}

.tooltip-inner {background:rgba(255,255,255,0.95) !important; border:0;box-shadow:0px 3px 5px 0px rgba(0,0,0,0.25);color:#222 !important; font-weight:bold;}
.tooltip.top .tooltip-arrow {border-top-color:rgba(255, 255, 255, 0.95) !important;  }
	
.kartenbox { position:relative; overflow:hidden;transition:all 0.5s; box-shadow:0px 3px 5px 0px rgba(0,0,0,0.25); display:block; margin-bottom:15px }
.kartenbox .info { opacity:0.95; color:rgba(255,255,255,0.95); box-sizing:border-box;  position:absolute; width:100%; bottom:0; left:0; padding:15px 15px 0 15px;}
.kartenbox h2 { font-size:15px; font-weight:normal; text-transform:uppercase; margin:0 0 15px 0;}
.kartenbox h3 { font-size:13px; font-weight:normal; height:0;  margin: 0; transition:all 0.5s; overflow:hidden; }
.loader {width: 0;display:block;background:rgba(255,255,255,0.95);height:3px;content:""; position:absolute; bottom:0; left:0;}
.kartenbox:hover h3{ height:70px}

.sublayerbox > span > span:before { font-family: FontAwesome;display:inline-block; margin:0 5px;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);}

.box .button_close, .frame .button_close { display:block}
.box {position:absolute; width:650px; left:50%; margin-left:-325px; top:50px; background:rgba(255,255,255,0.95); box-sizing:border-box;box-shadow:0px 3px 5px 0px rgba(0,0,0,0.25); padding:40px; z-index:20000; bottom:100px; height:calc( 100vh - 100px); display:none; overflow-y:auto; overflow-x:hidden; }
.frame .button_close { right:15px}
.box h1, .frame h1 { margin:0 0 18px 0; font-size:30px;}

.frame { position:absolute; right:-30%; top:0;background:rgba(255,255,255,0.95); box-sizing:border-box;box-shadow:0px 3px 5px 0px rgba(0,0,0,0.25);  z-index:20000; height:100%; width:30%;  }
.pseudotouch .frame { display:none !important}
.innerframe {height:100%; overflow:auto; padding:20px;}
.innerframe p{text-align: justify;}

.lightbox .lb-image
{
  max-width: inherit !important;
}


.poi_search { position:relative;}
.poi_search .button_close {  right:27px; top:0; opacity:0.5 }

#namelayer2 > span:before { content:"\f10c"; color:rgba(255,0,0,1); }
#namelayer3 > span:before { content:"\f111"; color: rgba(0,255,0,1); }
#namelayer4 > span:before { content:"\f096"; color:rgba(0,0,255,1); }



.preloader{position:fixed; top:0; left:0;width:100%; height:100%;background:#fff;z-index: 2000;background-size:cover;background-position:center;background-repeat: no-repeat;
}
.preloader .bg {position: absolute;left: 0;top: 0;width: 100%;height: auto;opacity: 0.4;}
.willkommen {width:50%; height: fit-content; padding: 10px; top:10%; position:absolute;left:25%;margin:auto;text-align:center; color:#fff; font-size: large;font-weight: bold;}
.attr {width:fit-content; height: fit-content; padding: 5px; bottom:5px; position:absolute;right:5px;margin:auto;text-align:center;background-color: #fff; color:#000; font-size: 11px;}


@media only screen and (max-width: 1024px) {    
    .ol-zoom { top:50px; left:auto; right:10px }
    #locateme {top:140px; left:auto; right:10px }
    .ol-zoom button, #locateme { width:40px; height:40px}
    .rotate-north {top: 190px !important;}

    #header { left:0px; top:0px; width:100%}
    #boxwrapper { top:40px; right:-100%; width:100%; background:rgba(255,255,255,0.95);}
    #tabbox { left:0px; position:relative; width:100%;}
    #tabbox:after { clear:both; display:block; content:" ";}
    #tabbox > div { display:block; float:left; width:33.3333% !important}
    #tabbox > div:hover {width:33.3333%;margin-left:0}
    #boxes { width:100%; background:none; min-height:auto; height:calc(100vh - 81px)}
    #header_suche { width:auto}
    #f_search, #f_inhalte { display:block}
    #funktionen { margin:0; float:right !important}
    #header_suche { display:none; position:absolute; top:40px; left:30px; right:60px; padding:5px; background:rgba(255,255,255,0.95); box-sizing:border-box;box-shadow:0px 3px 5px 0px rgba(0,0,0,0.25);}

    .logo_mobil { display:block}
    .logo_desktop { display:none}
    .box { width:96% !important; left:0; top:50px; margin:0 2%; padding:20px; height:calc( 100vh - 50px); }
    .box h1, .frame h1 { font-size:24px}
    #logo { top:0; left:0px; box-shadow:none}
    #logo a { padding:0 10px}
    #logo a img { height: 40px; width:auto }

    #karten img { width:100%; }

    #tabbox > div {  box-shadow:0px 1px 1px 0px rgba(0,0,0,0.25); }
}

@media print { 

    a[href]:after {
        content: none !important;
      }
    #funktionen, #suche, #boxwrapper { display:none}
    #logo { background-color:white !important; }
    }