/* ***** Mobiles (first) mit viewport | Portrait **** klein = Smartphones: Breite oder Höhe kleiner 450 (bis iPhone 13 pro) ************ */

body {margin: -2vmin 4vmin 6vmin 4vmin;
	font-family:sans-serif,Verdana,Arial,Helvetica; 
	font-size:4.4vmin; 
	line-height: 1.2;
 	color: #005473; /* #01627E;  #003366;  #002C38; */
	background-image: url("images/pflanze-hell.jpg");
	background-size: 100%;
	background-attachment: fixed;
	vertical-align: top;
}

p {margin-bottom: -8px;}

div {border-collapse:separate;
	border-radius: 0.8rem;
}	 /* border:rgba(239, 251, 245, 0.4) 1px;  */

iframe { margin-left:-1vmin; 
	margin-bottom:-4vmin;
	width: 105%;
	height:39rem; 
	border: none;}  /* sonst auf Mate 10pro nur einspaltig */

/* Markierung der Zellen zur Problemerkennung: border:dotted blue 2px; */
/* Markierungen zur Problemerkennung s.a. td!! */
/* table {border:dotted red 2px;} 
div {border:dashed green 2px;} */
/* td:hover   {border:dotted black 1px;} */  /* Button-Rand bei hover */

a {cursor: pointer;}
a:link    {color:#005473; text-decoration:none;}
a:visited {color:#005473; text-decoration:none;}
a:hover   {color:#007099; text-decoration:none;}
a:active  {color:#005473; text-decoration:none;}
a:focus   {color:#005473; text-decoration:none;}

.themenbild {width:30vmin; 
	height:30vmin; 
	margin-left:2vmin;
}

.rechts {float: right; display:inline-block;}  
.links {float: left; display:inline-block;}    
.mittig {
	max-width: 960px;
	margin: auto; /* sonst linksbündig */
}

.header {/* font-family: sans-serif; */ /* für Mobiles das Beste, Verdana gibt es nicht unter Android */
	font-size: 8vmin;
	font-weight: normal;
	letter-spacing:0;
	padding: 6vmin 0 1vmin 0;
	white-space: nowrap; 
	cursor: pointer;
}

.headline {font-size:6vmin; 
	font-weight: 500;
	padding:0vmin 0 1.5vmin 0;  /* 1.5 */
	text-align: left;		
}
.titel {font-size:5vmin; 
	font-weight: bold;
	padding: 0vmin 0 0.5vmin 0; 
	color: #015F7A;
}

.inhalt {font-size: 4.4vmin;
	vertical-align:top;
	background-color: rgb(255,255,255,0.98);
	padding: 2vmin 6vmin 5vmin 6vmin;
	column-gap: 30px;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;	
	-o-hyphens: auto;	
	-ms-hyphens: auto;	
	hyphens: auto;	
	text-align: justify;	
}

.printPictures {background-color: rgb(255,255,255,0.95);}

.no-column {column-span: all; 
	text-decoration: 1px underline dashed; 
	text-underline-offset: 6px;
}

.button {height:8.4vmin;} 
.menu {	padding: 2vmin;
	position:fixed; 
	top: 2vmin;
	z-index: 1; /* sonst schlägt der Navi-Pfeil bei opacity: 0.4 durch */
	font-size: 4.8vmin; 
	/* overflow-x: hidden; 
	overflow-y: hidden; doch weg wegen tooltip über [data-title] */
	white-space: nowrap;    
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s ease-in-out;
	/* border:1px solid; */ /* Test */
}
.showMenu {	background-color: #ececec;
	padding: 4vmin; 
	right: 2vmin;
}
.showMenuButton {
	background-color: none; 
	padding: 2vmin; 
	right: 1vmin; 
	border: none;
}

.search {	padding: 2vmin;
	position:fixed; 
	top: 2vmin;
	z-index: 1;
	font-size: 4.8vmin; 
	/* overflow-x: hidden; 
	overflow-y: hidden;  */
	white-space: nowrap;    
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s ease-in-out;
}
.showSearch { background-color: #dcdcdc;
	padding: 4vmin; 
	right: 12vmin;
}
.showSearchButton {	padding: 2vmin; 
	right: 12vmin; 
}

.menu-ul {font-size:4.5vmin; font-weight:normal;}

.close-button {position:fixed; 
	top:5vmin; 
	right:4.5vmin; 
	cursor:pointer; 
}
.close-search {position:fixed; 
	top:5vmin; 
	right:14.5vmin; 
	cursor:pointer; 
}
.knopf {height:6.6vmin; 
	cursor:pointer;
	top:5vmin; 
	right:4.5vmin; 
}
.nav {font-size: 9vmin; 
	color: #bbbbbb;
	cursor:pointer;
}
.nav:hover {color: #777;}
.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.footer {font-size: 3.6vmin;
	white-space: nowrap;
}
.footer-impressum {line-height:3.5vmin; display: inline;}

hr {border-top: 1px dashed rgb(0,0,0,0.9);}

ul {margin-top:0vw; margin-bottom:0vw; padding-left:3vw; margin-left:3vw;}
li {padding-top:0.3vw; padding-bottom:0.3vw;}

/* ************************************************** Bilder-Carousel auf der Startseite ********************** */

.carouselContainer {
  width: 100%;
  cursor: grab;  /* falls Pfeilbilder nicht funktionieren */
  margin: auto;
  overflow-x: scroll;
  white-space: nowrap;  /* damit Bilder horizontal zusammenhängen */
  scroll-snap-type: x mandatory;
  /* scroll-behavior: smooth;  s. index.php schneller Wechsel	Anfang/Ende */
}

img.carousel  { 
  width: 100%;
  height: 100%;
  margin: 0px 0px 1px 0px;  /* für kleinen Abstand Scrollbalken */
  scroll-snap-align: start;
  scroll-snap-stop: always;  /* kein schnelles Durchscrollen möglich */
}	

/* ************** Querformat alle Größen  **************************** body{color:red;} zum Testen **************** */

@media only screen and (orientation: landscape)
{
	.inhalt {columns: 2;}	
	.showSearch {columns: 2;}	
}		

/* ************************* Hochformat alle Größen ******** body{color:green;} zum Testen ************************** */

@media only screen and (orientation: portrait) 
{
	.inhalt {columns: 1;}
	.showSearch {columns: 1;}	
}		
	
 /* ************************* Mobiles (first) mit viewport **** mittel=Tablets, bisher nicht nötig ******************** */

/* @media only screen and (min-width:770px) and (min-height:770px) {

} */

/* ************************* Notebooks oder PCs, normale Bildschirme, bisher auch Tablets ****************************** */
/*                           Breite und Höhe größer 450 (darunter, also das obige CSS, reicht bis iPhone 13 Pro               */

@media only screen and (min-width:450px) and (min-height:450px)
{
	body	{font-family:Verdana,Arial,Helvetica; 
	font-size: 16px; /* alle anderen relativ hierzu mit rem (root em), bezogen auf .inhalt */
	margin: 0px 30px 15px 30px;
	}
	
	iframe { margin-left:-1px; 
		margin-bottom:-10px;
		width: 100%;
		height:39rem; 
		border: none;}  /* sonst auf Mate 10pro nur einspaltig */

	.themenbild-start { height:100%;}
 	.themenbild {width:7rem; height:7rem;}
	
	.header {font-size: 2.4rem; padding: 1rem 0 0.5rem 0;}
	.headline {font-size:24px; padding:0px 0px 0.4rem 0px;}
	.titel {font-size:18px; padding: 0px 0 6px 0;} /*  */

	.inhalt {font-size: 15px; 		
		padding: 0.6rem 1.4rem 1.0rem 1.4rem;
	}
	
	::-webkit-scrollbar {height: 0.6em; width: 0.8em;}   /* height: waagerecht, width: senkrecht */
	::-webkit-scrollbar-track {background: #e7e7e7; border-radius: 0.6em; opacity: 1.0;}
	::-webkit-scrollbar-thumb {background: #bbb; border-radius: 0.6em; cursor: normal;}
	::-webkit-scrollbar-thumb:hover {background: #777;}

	.button {height:2.4rem;}
	.menu {top: 0.6rem;  
		right: 0.8rem;
		font-size:1.1rem;
	}
	.showMenu {	padding: 1rem;}
	.showMenu a:hover {color:#0088aa; text-decoration:none;}  /* Sonderfall, bei Menus etwas helleres hover */
	.showMenuButton {padding: 0.6rem; /* Lageausgleich, 'top' führt zum Verrutschen am Ende */
		right: -2.6rem;
	}

	.search {top: 0.6rem;  
		right: 4.6rem;
		font-size:1.1rem;
	}
	.showSearch {padding: 1rem;}
	.showSearch a:hover {color:#0088aa; text-decoration:none;} 
	.showSearchButton {padding: 0.6rem;
		right: -3.2rem;
	}

	.menu-ul {font-size:1rem;}

	.knopf {height:1.6rem;}
	.nav {font-size: 1.8rem;}
	.close-button {top:1.4rem; right:1.4rem;}
	.close-search {top:1.4rem; right:5.2rem;}

	.footer {font-size: 0.7rem;}
	.footer-impressum {line-height:1.3rem;}

	ul {margin-top:0.1rem; margin-bottom:0.1rem; padding-left:1rem; margin-left:1rem;}
	li {padding-top:0.1rem; padding-bottom:0.1rem;}	

	/* ************************************************** Tooltips über [data-title] ********************** */

	[data-title]:hover:after {
		opacity: 1;
		transition: all 0.6s ease 0.6s;
		visibility: visible;
	}
	[data-title]:after {
		content: attr(data-title);
		background-color: white;
		color:  #003366;
		font-size: 14px;
		position: relative;
		padding: 1px 5px 1px 5px;
		bottom: -19px;
		left: -45px;
		white-space: nowrap;
		opacity: 0;
		border: 1px solid #003366;
		border-radius: 6px;
		z-index: 20;
		visibility: hidden;
	}
}

@media print {
  body, div, .inhalt, .footer {
    color: #000;
    background-color: #fff;
	font-size: 14px; /* noch viel Chaos */
  }

  .noprint {display: none;}

  .header {font-size: 24px;}
  .headline {font-size: 20px;}
  .titel {font-size: 18px; color: black;}
  .inhalt {columns: 2; padding: 0;}
  .nav, .menu, .search {display: none;}  
  .printPictures {columns: 1; width: 80%;}
}