* {
	box-sizing:border-box;
	margin:0;
    /* -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
         -o-transition: all .5s ease;
            transition: all .5s ease; */
}

::after, ::before {
	box-sizing:border-box;
}

html {
	height:100%;
}

body { width:100%; height: 100%; font-family: "Open Sans",sans-serif; color: #000; font-weight: normal;
  font-style: normal;line-height: 13px;}

h4 {padding-bottom: 5px;} /* in messgeraete-boxen */

/* im fliesstext */
a { text-decoration:none; display:inline; }
a:link { color:#000;}
a:visited { color:#000;}
a:hover { color:#666;}
a:focus { color:#666;}
a:active { color:#666;}

/* BEGIN Seitengeruest mit content, Navigation unten und Subnavigation unten links als css-grid */

.container {
  height:100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows:  minmax(calc(100% - 52px), auto) 52px;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "content"
    "navigation";
}
@media (max-width: 1200px) {
  .container {
    grid-template-rows:  minmax(calc(100% - 74px), auto) 74px;
  }
}

.content {
  grid-area: content;
  background-color: unset;
}

.navigation { grid-area: navigation; background-color: unset; overflow:hidden; }
.navbox {outline: none; height: 48px; width: 100%; position: relative; box-sizing: border-box; white-space: nowrap; padding: 0px; display: inline-block; overflow: auto hidden;}
@media (max-width: 1200px) {
  .navbox {
      height: 70px;
    }
}

.coverme {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#subnav {
	width:120px;
	height:156px;
	display:none;
	position:absolute;
	bottom:52px;
	left:0;
	background-color:unset;
	z-index:5;
	width:100px;
	padding:2px;
	font-weight: bold;
	font-size:13px;
}
@media (max-width: 1200px) {
  #subnav {
      bottom:74px;
  }
}

.navButton {
	height: 40px;
	width: 117px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-direction: column;
	border-radius: 10px;
	position:absolute;
	font-weight: bold;
	font-size:12px;
	bottom: 0px;
}
.navButton.active {
	height: 48px;
}

.subnavButton {
	height: 48px;
	width: 117px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-direction: column;
	border-radius: 10px;
	position:absolute;
	font-weight: bold;
	font-size:12px;
	bottom: 0px;
}

/* END Seitengeruest */

.vollbild {width:100%; height:100%;}
.vollbild > img,.vollbild > video,.vollbild > svg,.vollbild > object {
	width:100vw;
	height:100vh;
	object-fit:contain;
}

.slide01 { /* background:url(../media/startseite/Startseite_Ulm_1_mobil_Hintergrundbild_fruehling.jpg) center center / cover no-repeat; */ z-index:-2; }
	
.bild2_txt_breit {height:100%; width:100%; object-fit:contain;display:none;}
.bild2_txt_mobil {height:100%; width:100%; object-fit:contain;display:block;}
.bild2_font_normal {font-size:12px;}
.bild2_font_klein {font-size:12px;}

/* Slide2 1.php Der Baum / Tree */
.baum-zusatzinfo { width:100%; padding:0px 0px 10px 0px; float:left; }
.tree, .tree_text_overlay_desktop, .tree_text_overlay_mobil  {
    opacity: 1;
    z-index: 2;
    position: absolute;
	object-fit:contain;
	top:0;
}

.extra02 { font-size: 18px; width: 80%; max-width: 700px; height: max-content; background-color: white; padding: 10px; overflow: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; z-index: -1; max-height: 80%; }


/* BEGIN CO2 Info alle medien */
.c_info {
	height: 45vh;
	padding: 2vh 0 0 2vw;
	background-color: white;
	overflow: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	z-index: -1;
	width: 51vw;
	border: 1px solid black;
}
.co2-grid {
	display: grid;
	grid-template-rows: 12vh 9vh 9vh 9vh;
	grid-template-columns: auto 11vw 11vw 11vw;
	grid-template-areas:
	'corner  birch pine spruce' 
	'co2top  i11   i12  i13   ' 
	'co2jahr i21   i22  i23   ' 
	'co2aero i31   i32  i33   ';
	width: 48vw;
	height: min-content;
	grid-gap: 5px;
	font-size:1.5vw;
	line-height:1.5vw;
}

.co2-grid div { 
  justify-self: center;
  align-self: center; }
  
#corner { grid-area: corner; }
#birch  { grid-area: birch; }
#pine   { grid-area: pine; }
#spruce { grid-area: spruce; }
#co2top      { grid-area: co2top; }
#item-11 { grid-area: i11; }
#item-12 { grid-area: i12; }
#item-13 { grid-area: i13; }
#co2jahr     { grid-area: co2jahr; }
#item-21 { grid-area: i21; }
#item-22 { grid-area: i22; }
#item-23 { grid-area: i23; }
#co2aero { grid-area: co2aero; }
#item-31 { grid-area: i31; }
#item-32 { grid-area: i32; }
#item-33 { grid-area: i33; }

.little_tree { height: 10vh;}

/* END CO2 Info alle medien */

.biomasse_icon, .jahresmasse_icon, .aequivalent_icon {
	display:grid;
	justify-content: center;
	align-items: center;
	margin:5px;
}
.biomasse_icon { grid-area:biomasse_icon; background:url(../media/kohlenstoffspeicherung/Icon_Biomasse.png) center center / contain no-repeat;}
.jahresmasse_icon { grid-area:jahresmasse_icon; background:url(../media/kohlenstoffspeicherung/Icon_Zeitraum.png) center center / contain no-repeat;}
.aequivalent_icon { grid-area:aequivalent_icon; background:url(../media/kohlenstoffspeicherung/Icon_Aequi.png) center center / contain no-repeat;}

.biomasse, .jahresmasse, .aequivalent {
	display:grid;
	justify-content: start;
	align-content: center;
}
.biomasse { grid-area:biomasse; }
.jahresmasse { grid-area:jahresmasse; }
.aequivalent { grid-area:aequivalent; }

.livebox { opacity:0; width:100%;height:66%;position:absolute; top:17%; left:0;
display: grid;
justify-content: center;
align-items: center;
z-index:-1;
}
.livebox_01, .livebox_02, .livebox_03 { opacity: 0; z-index: -1; }
.livebox_01 svg,.livebox_01 img {
	width:100%;
	height:100%;
	object-fit:contain;
	background-color:white;
}

.live-iframe {position:absolute;width:100%;height:100%;border:none;}

.trockenstress-btn-mp4 {cursor:pointer; font-size:20px; background-color:#F49B00; position:absolute; top:0; left:0; opacity:0; z-index:-1; padding: 10px;}
.trockenstress-btn-svg {cursor:pointer; font-size:20px; background-color:#F49B00; position:absolute; top:0; right:0; opacity:1; z-index:2; padding: 10px;}
.trockenstress-slide01 { position:absolute; top:0; left:0; opacity:1; z-index:-1;}

.trockenstress-diagramm01 {
	opacity:0;
	width:66%;
	height:66%;
	position:absolute;
	top:16%;left:16%;
display: grid;
justify-content: center;
align-items: center;
z-index:-1;
}

.transpiration {
	width:100%;
	height:100%;
	object-fit:contain;
}

.transpiration-bg {background:url(../media/transpiration/Slide_13_Transpiration-empty.svg) center center / contain no-repeat;}
.c_speicher_bg {background:url(../media/kohlenstoffspeicherung/Slide_Kohlenstoffspeicherung-bg.svg) center center / contain no-repeat;}

.livewerte_bg_1 {background:url(../media/livewerte/Slide_2_1.svg) center center / contain no-repeat;} /* gruen */
.livewerte_bg_2 {background:url(../media/livewerte/Slide_2_2.svg) center center / contain no-repeat;} /* blau */
.livewerte_bg_3 {background:url(../media/livewerte/Slide_2_3.svg) center center / contain no-repeat;} /* braun */

.thermografie {
	width:100%;
	height:100%;
	display:grid;
	grid-template-rows: 1fr minmax(20px, auto);
	grid-template-columns: 100%;
	grid-template-areas:
		"waermefilm"
		"waermetext";
	
}
.waermefilm {
	width:100%;
	height:100%;
	display:grid;
	grid-area:waermefilm;
	justify-content: center;
	align-items: center;
}
.waermefilm>img {
	width:100%;
	height:100%;
	object-fit:contain;
}
.waermetext {
	width:100%;
	height:100%;
	display:grid;
	grid-area:waermetext;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size:14px;
}

.lleno { width:100%; height:100%; object-fit:contain;}

.messtechnik {
	border-radius: 10px;
	padding:5px;
	position:absolute;
	background-color:#FFFFFFcc;
	width:80%;
    max-height: 100%;
	overflow:auto;
	font-size:13px;
	line-height: 13px;
}
.messtech-bild  { width:100%; padding:0px 0px 10px 0px; float:left; }
.messtechnik_box01 {
	/* display:grid; 
	grid-template-rows: 100%;
	grid-template-columns: 50% 50%;
	grid-template-areas:
		"box01_li box01_re";*/
	top:0; left:0;
	z-index:-1; opacity:0;
}
/*  .messbox01_links {display:grid; grid-area:box01_li;}
  .messbox01_rechts {display:grid; grid-area:box01_re;} */
  
.messtechnik_box02 {z-index:-1; opacity:0; top:0; left:0;}
.messtechnik_box03 {z-index:-1; opacity:0; top:0; left:0;}
.messtechnik_box04 {z-index:-1; opacity:0; top:0; left:0;}
.messtechnik_box05 {z-index:-1; opacity:0; top:0; left:0;}
.messtechnik_box06 {z-index:-1; opacity:0; top:0; left:0;}

.slide10 { background:url(../media/HG_allgemein_mobil.svg) center center / cover no-repeat; }
.fazit-svg-mobil { display:block; background:url(../media/fazit/Fazit_mobil_ohne_text.svg) center center / contain no-repeat; 

    position: absolute;
    width: 100%;
	height:100%;
	object-fit:contain;
	top:0;}
.fazit-svg-quer { display:none; background:url(../media/fazit/Fazit_ohne_text.svg) center center / contain no-repeat;

    position: absolute;
    width: 100%;
	height:100%;
	object-fit:contain;
	top:0;}
.fazit-svg-mobil_text {height:100%; width:100%; object-fit:contain;display:block;}
.fazit-svg-quer_text {height:100%; width:100%; object-fit:contain;display:none;}
.fazit_font {font-size: 14px;
    font-weight: bold;}

/* mediaqueries */

@media (min-width: 576px) {
	.bild1 {
		opacity: 1;
		z-index: 2;
	}
	.bild2 {
		opacity: 0;
		z-index: 1;
	}
	.start_text_overlay {
		opacity: 1;
		z-index: 3;
	}
	.bild2_txt_breit {display:block;}
	.bild2_txt_mobil {display:none;}
	.bild2_font_normal {font-size:14px;}
	.bild2_font_klein {font-size:14px;}

	.extra02 { font-size: 16px; }
	.baum-zusatzinfo { width:50%; padding:0px 10px 10px 0px; }
	
	.messtechnik { width:500px; font-size:13px; line-height:13px; }
	.messtech-bild { width:50%; padding:0px 10px 10px 0px; }
	
	.slide10 { background:unset; }
	.fazit-svg-mobil { display:none; }
	.fazit-svg-quer { display:block; }
	.fazit-svg-mobil_text {height:100%; width:100%; object-fit:contain;display:none;}
	.fazit-svg-quer_text {height:100%; width:100%; object-fit:contain;display:block;}
.fazit_font {font-size: 14px;
    font-weight: bold;}
}

@media only screen and (min-width: 768px) {
	.livebox { width:66%; left:17%; }
}

@media only screen and (min-width: 992px) {
}

@media (min-width: 1200px) {
}