body {
	font-family: arial;
	background-color: white;
}

.container {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(4, 1fr);
	grid-gap: 10px;
	position: absolute;
	top: 8vw;
	bottom: 20px;
	left: 20px;
	right: 20px;
}



/* header
=========================================================== */

.header {
	font-size: 1vw;
	line-height: 1;
	position: absolute;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
	padding-bottom: 40px;
}

span.headline {
	color: black;
	font-weight: bold;
}

span.tag {
	color: gray;
	line-height: 1.4;
	border-bottom: 1px solid;
	font-style: italic;
}

span.tag:hover {
	color: green;

}



/* photo
=========================================================== */
.element {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.element-3:hover {
	background-image: url("../img/photo-03.png");
}

.element-4:hover {
	background-image: url("../img/photo-04.png");
}

.element-6:hover {
	background-image: url("../img/photo-06.png");
}

.element-11:hover {
	background-image: url("../img/photo-11.png");
}

.element-13:hover {
	background-image: url("../img/photo-13.png");
}

.element-15:hover {
	background-image: url("../img/photo-15.png");
}

.element-16:hover {
	background-image: url("../img/photo-16.png");
}

.element-17:hover {
	background-image: url("../img/photo-17.png");
}

.element-18:hover {
	background-image: url("../img/photo-18.png");
}

.element-19:hover {
	background-image: url("../img/photo-19.png");
}

.element-20:hover {
	background-image: url("../img/photo-20.png");
}

.element-22:hover {
	background-image: url("../img/photo-22.png");
}

.element-23:hover {
	background-image: url("../img/photo-23.png");
}

.element-25:hover {
	background-image: url("../img/photo-25.png");
}

.element-29:hover {
	background-image: url("../img/photo-29.png");
}

.element-31:hover {
	background-image: url("../img/photo-31.png");
}



/* element
=========================================================== */

.element {
	border: solid 1px;
	padding: 10px;
	font-size: 1.3vw;
	line-height: 1.2;
	color: green;
}



/* element hover
=========================================================== */

body.is-special {
	background-color: white;
	color: black;
}

body.is-special .tag{
	color: gray;
}

p-3.text-special {
	opacity: 0;
}

p-4.text-special {
	opacity: 0;
}

p-6.text-special {
	opacity: 0;
}

p-11.text-special {
	opacity: 0;
}

p-13.text-special {
	opacity: 0;
}

p-15.text-special {
	opacity: 0;
}

p-16.text-special {
	opacity: 0;
}

p-17.text-special {
	opacity: 0;
}

p-18.text-special {
	opacity: 0;
}

p-19.text-special {
	opacity: 0;
}

p-20.text-special {
	opacity: 0;
}

p-22.text-special {
	opacity: 0;
}

p-23.text-special {
	opacity: 0;
}

p-25.text-special {
	opacity: 0;
}

p-29.text-special {
	opacity: 0;
}

p-31.text-special {
	opacity: 0;
}



/* tags aktiviert
==================================== */

/* Herkunft */
body.show-südamerika .element,
body.show-mittelamerika .element,
body.show-südostasien .element,
body.show-südasien .element,
body.show-ostasien .element,
body.show-australien .element,

/* Familie */
body.show-araceae .element,
body.show-begoniaceae .element,
body.show-clusiaceae .element,
body.show-arecaceae .element,
body.show-piperaceae .element,
body.show-marantaceae .element,
body.show-oxalidaceae .element,
body.show-apocynaceae .element,
body.show-urticaceae .element,

/* Farbe */
body.show-hellgrün .element,
body.show-sattgrün .element,
body.show-dunkelgrün .element,
body.show-weiss .element,
body.show-rosa .element,
body.show-dunkelrot .element,
body.show-gelb .element,
body.show-schwarz .element,

/* Blattform */
body.show-eiförmig .element,
body.show-gefiedert .element,
body.show-gelappt .element,
body.show-herzförmig .element,
body.show-oval .element,
body.show-pfeilförmig .element,
body.show-rund .element,
body.show-lanzettlich .element,

/* Standort/Licht */
body.show-sonnig .element,
body.show-hell .element,
body.show-halbschattig .element,
body.show-wenig-licht .element,

/* Wasser */
body.show-austrocknen .element,
body.show-wenig-wasser .element,
body.show-maessig-feucht .element,
body.show-feucht .element,

/* Gift */
body.show-giftig .element,
body.show-nicht-giftig .element {
	display: none;
}


/* Herkunft */
body.show-südamerika .element.südamerika,
body.show-mittelamerika .element.mittelamerika,
body.show-südostasien .element.südostasien,
body.show-südasien .element.südasien,
body.show-ostasien .element.ostasien,
body.show-australien .element.australien,

/* Familie */
body.show-araceae .element.araceae,
body.show-begoniaceae .element.begoniaceae,
body.show-clusiaceae .element.clusiaceae,
body.show-arecaceae .element.arecaceae,
body.show-piperaceae .element.piperaceae,
body.show-marantaceae .element.marantaceae,
body.show-oxalidaceae .element.oxalidaceae,
body.show-apocynaceae .element.apocynaceae,
body.show-urticaceae .element.urticaceae,

/* Farbe */
body.show-hellgrün .element.hellgrün,
body.show-sattgrün .element.sattgrün,
body.show-dunkelgrün .element.dunkelgrün,
body.show-weiss .element.weiss,
body.show-rosa .element.rosa,
body.show-dunkelrot .element.dunkelrot,
body.show-gelb .element.gelb,
body.show-schwarz .element.schwarz,

/* Blattform */
body.show-eiförmig .element.eiförmig,
body.show-gefiedert .element.gefiedert,
body.show-gelappt .element.gelappt,
body.show-herzförmig .element.herzförmig,
body.show-oval .element.oval,
body.show-pfeilförmig .element.pfeilförmig,
body.show-rund .element.rund,
body.show-lanzettlich .element.lanzettlich,

/* Standort/Licht */
body.show-sonnig .element.sonnig,
body.show-hell .element.hell,
body.show-halbschattig .element.halbschattig,
body.show-wenig-licht .element.wenig-licht,

/* Wasser */
body.show-austrocknen .element.austrocknen,
body.show-wenig-wasser .element.wenig-wasser,
body.show-maessig-feucht .element.maessig-feucht,
body.show-feucht .element.feucht,

/* Gift */
body.show-giftig .element.giftig,
body.show-nicht-giftig .element.nicht-giftig {
	display: block;
}


/* Herkunft */
body.show-südamerika .tag-südamerika,
body.show-mittelamerika .tag-mittelamerika,
body.show-südostasien .tag-südostasien,
body.show-südasien .tag-südasien,
body.show-ostasien .tag-ostasien,
body.show-australien .tag-australien,

/* Familie */
body.show-araceae .tag-araceae,
body.show-begoniaceae .tag-begoniaceae,
body.show-clusiaceae .tag-clusiaceae,
body.show-arecaceae .tag-arecaceae,
body.show-piperaceae .tag-piperaceae,
body.show-marantaceae .tag-marantaceae,
body.show-oxalidaceae .tag-oxalidaceae,
body.show-apocynaceae .tag-apocynaceae,
body.show-urticaceae .tag-urticaceae,

/* Farbe */
body.show-hellgrün .tag-hellgrün,
body.show-sattgrün .tag-sattgrün,
body.show-dunkelgrün .tag-dunkelgrün,
body.show-weiss .tag-weiss,
body.show-rosa .tag-rosa,
body.show-dunkelrot .tag-dunkelrot,
body.show-gelb .tag-gelb,
body.show-schwarz .tag-schwarz,

/* Blattform */
body.show-eiförmig .tag-eiförmig,
body.show-gefiedert .tag-gefiedert,
body.show-gelappt .tag-gelappt,
body.show-herzförmig .tag-herzförmig,
body.show-oval .tag-oval,
body.show-pfeilförmig .tag-pfeilförmig,
body.show-rund .tag-rund,
body.show-lanzettlich .tag-lanzettlich,

/* Standort/Licht */
body.show-sonnig .tag-sonnig,
body.show-hell .tag-hell,
body.show-halbschattig .tag-halbschattig,
body.show-wenig-licht .tag-wenig-licht,

/* Wasser */
body.show-austrocknen .tag-austrocknen,
body.show-wenig-wasser .tag-wenig-wasser,
body.show-maessig-feucht .tag-maessig-feucht,
body.show-feucht .tag-feucht,

/* Gift */
body.show-giftig .tag-giftig,
body.show-nicht-giftig .tag-nicht-giftig {
	color: black;
}