/*Bildschirmbreiten unter 35em werden als einspaltiges Layout dargestellt */
body 
{
	background-color: whitesmoke;	
	margin-left: 1em; /*Außenabstand*/
	margin-right: 1em;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; /*Einbinden von Systemschriften für eine gute Qualtität der Schrift auf allen Seiten zu erhalten*/
}	

header, nav, main, aside, footer
{
	background-color: white;
	border-radius: 1em;
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: .5em;
	padding-top: .1em;
	margin-top: .5em;
	margin-right: .5em;	
}

main
{
	gap: .5em;
}

section
{
	background-color: whitesmoke;
	border-style: double;
	border-color: #866a00;
	border-radius: .5em;
	margin-top: .5em;
	padding: .5em;
	position: relative;
}

/*Ab einer Bildschirmbreite von 35 em geldetn folgende Werte zusätzlich */
@media (min-width: 35em)
{	
	body
	{
		display: grid;
		max-width: 90em;
		grid-template-columns: minmax(15em, 1fr) 15em;
		box-sizing: border-box;
		margin: 1em; 
		/*justify-content: center;*/
	}

	header
	{
		grid-column: 1 / 3;
		max-height: 16rem;
	}  

	nav
	{
		grid-column: 1 / 3;
	}

	/*Vormatvorlage speziell für Hauptseiten von Projekten auf naj*/
	.mainindex
	{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
	}
	
		
	article
	{
		grid-column: 1 / -1; /*Der Artikel soll unabhängig davon ob Main eine oder 
		mehrer Spalten hat immer den kompletten Bereich abdecken. Mit 1/-1 wird die erste und die letzte Gitternetzlinie angesprochen.*/
	}

	footer
	{
		grid-column: 1 / 3;
	}
}



/*Buttons im Bereich NAV*/

.nav 
{
	display: inline; /*macht, dass die elemente in einer Reihe dargestellt werden */
	list-style: none;
	margin-right: 1em;	
	line-height: 3;
    background-color: #ffffd4;
    border: 3px solid #ffffff;
    border-radius: .5em;
    box-shadow: .2em .2em .5em rgb(218,228,145);
    margin: 1em;
    padding: .3em 1em;
    box-decoration-break: slice;
}


 /*gehört zum Logo*/
.div0 {
	margin: 5px;	
	display: flex;
	justify-content: center;
}

.div1 {
	display: block;
	width: 50%;
}

.div2 {
	display: flex;
	justify-content: right;
	align-items: center;
	width: 50%;
}

.naj
{
	font-size: clamp(1rem, 3.5vw, 2rem);
	font-family: Georgia, serif;
	transform: scale(1, 2);
}

.gespiegelt
{
	font-size: clamp(1rem, 3.5vw, 2rem);
	font-family: Georgia, serif;
	transform: rotate(180deg) scale(-1, 2);
	display: inline-block;
	color: #3f953d;	
}

/*Abstände mal sehen wo die fehlen....
.strong1 {
	position: relative;
	top: 10px;
}

.spann
{
	display: inline;
	text-align: middle;
}
*/
/*Links*/
a:link
{
	color: #3f953d;
}

a:visited
{
	color: #89b458;
}

a:focus
{
	color: green;
}

a:hover
{
	background-color: white;
	color: black;
}

a:active
{
	background-color: white;
	color: black;
}

/*Tabellendefinition*/
/*border-collapse seperate jede Zelle hat einen eigenen Rahmen collaps die Rahmen Fallen zusammen */
table {
	border-collapse: collapse;
	caption-side: top; /*auch bottom möglich. Definiert ob das Caption Element oberhalb oder unter der Tabelle zu finden ist.*/
	margin: 2em .5em 2em .5em; /*Außenabstand zu anderen Elementen*/
	border: thin solid black;
}

caption
{
	background-color: #89b458;
}
thead
{
	background-color: #dae491;
}
tr:nth-child(odd) {  /*mit diesem Ausdruck enthält jede ungerade Tabellenzeile eine ander Hintergrundfarbe (Child meint ein Kindelement*/
	background-color:#ffffd4;;
}

caption, th, td{
		padding: 0.5em; /*padding bestimmt alle Innenabstände eines Elements*/
		text-align: center;
}

th 
{
	background-color: #dae491;
}

tfoot
{
	background-color: #dae491;
}

.fuss{
	font-size: xx-small;
	text-align: center;
}

/*Zeilen beim Überfahren mit der Maus in einer anderen Farbe*/
tbody tr:hover, tfoot tr:hover 
{ 
  background-color:#fffbf0;
}
/*Zelle beim Überfahren in einer anderen Farbe*/
tbody td:hover, tfoot td:hover { 
  background-color: #fce4a2; 
}


p, h2 /*macht einen bliebigen Textumbruch, auch mitten im Word, wenn der Viewport das notwendig macht. Zum Beispiel bei langen URLS*/
{
	word-wrap: break-word;
}

/*Ab einer Bildschirmbreite unter 75em wird das Tabellenlayout aufgehoben Der Kopf wird in die erste Spalte geschrieben und die Werte 
in die zweite Spalten. Dies wird wiederholt bis alle Werte angezeigt wurden. https://kulturbanause.de/blog/tabellen-im-responsive-webdesign/*/
@media (max-width: 75em)
{
	table 
	{
		border: none;
	}
	thead, caption, tfoot /*Überschrift als auch der Tabellenkopf und Fuß werden ausgeblendet */
	{
		display: none;
	}

	tr
	{
		float: left;
		width: 100%;
		margin-bottom: 1em;
	}

	td
	{
		float: left;
		width: 80%;
		padding: .5em;
	}

	td::before 
	{
		content:attr(data-label);
		word-wrap: break-word;
		width: 40%;
		float: left;
		padding: .5em;
		margin: -.5em .5em -.5em -.5em;
	}
}

/*Bilder, Bilder, Bilder, Bilder
/*Standardmäßig wird ein Bild in voller Größe dargestellt*/
.bild
{
	float: right;
	margin-right: 1em;
	padding: .5em;   
}

img
{
	border-radius: 1em;
	width: 100%;
	height: auto;	
	
}


/*Eine medienabfragen an den Browser lässt das Bild bei einer Viewport-Breite von mehr als 40 em auf 75% der vollen Breite schrumpfen und
mit Float an die linke Seite floaten (Text fließt rechts vorbei), für die figcaption */
@media (min-width: 40em)
{
	.bild
	{
		width: 75%;		
	}
}

@media (min-width: 50em)
{
	.bild
	{
		width: 40%;
	}
}

@media (min-width: 80em)
{
	.bild
	{
		width: 30%;
	}
}

figcaption /*Für eine Bildunterschrift */
{
	background-color: #ffffd4;
	text-align: center;
	font-size: 0.75em; /*Font-Size 0.75em sagt, dass die Schriftgröße halb so groß ist wie die Schriftgröße die vom User eingestellt wurde. */
}

/*display: inline-block passt den "Kasten der hier steht an den Text an. Der Kasten enden also nach dem lezten Wort 
im Text und nicht am Bildschirmende. */
.kode
{
	margin-right: .5em;
	margin-bottom: .5em;
	margin-top: .5em;
	padding: 1em;	
	background-color: #ffffd4;
	/*word-wrap: break-word;*/
	word-break: break-all;
	display: inline-block;
}

.rezepte
{
	border-radius: 2em;
}

.abstaende
{
	border: 1px solid green;
	overflow: visible;
	text-align: center;
	margin: 5%; 
	background-color: #fffbf0;
}

/*Steinau*/
.imgsteinau {
    height: 300px;
    border: solid 4px whitesmoke;
    border-radius: 0em;
}

.container
{
    border: solid 1px blach;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: black;
	border-radius: 1.5em;
	padding: .2em;
}

.item 
{
    margin: 1vw 0.5vw 1vw 0.5vw;
    
}

.figcaption_steinau
{
    color: black;
    text-align: center;
    background-color: white;
    margin: 0 0 0 0;
}
/*Formulare*/

form
{
	width: 100%;
}

label::after
{
	content: ' :'; /*Damit kann die Bezeichnung in HTML ohne Doppelpunkt erfolgen. :after setzt diesen.*/
}
#mitfahrer:in-range /* mit einer Raute vorweg werden CSS eigenschaften über die ID des Elements vermittelt */
{
	background-color: #89b458;
}

/*Bei Mitfahrer wird hinter dem Eingabefeld bei passender Eingabe ein Haken bzw. ein Erklärungstext bei ungültiger Eingabe angezeigt */
#mitfahrer:out-of-range
{
	background-color: red;
}

#mitfahrer:in-range + ::after
{
	content: ' ✔';
}

#mitfahrer:out-of-range + ::after
{
	content: 'Nur 5 Pers. erlaubt!';
}


/*Rechnen mit JS*/
.fieldsetgrid
{
	display: grid;
	grid-template-columns: 1fr 1fr;
}

/*Berechnungne zum BMI*/
/*Elemen und Klasse Kombiniert!*/
p.gut {
	background-color: green;
}

.leicht {
	background-color: blueviolet;
}

.schwer {
	background-color: red;
	font-weight: bolder;
	font-family: fantasy;
}

/*CSS mit Javascript manipulieren*/
#li1:hover, #li2:hover, #li3:hover, #li4:hover {
	background-color: blue;
	color: #ffffd4;
}

.hervorheben {
	background-color: green;
}

/*CSS manipulieren 2 */
.liste:hover {
	background-color: #89b458;
	text-shadow: #dae491;
	font-weight: bolder;
}

.abst
{
	border: 1px solid green;
	overflow: visible;
	text-align: center;
	margin: 5%; 
}

.nehmen {
	background-color: #dae491;
}

/*Formulare*/

label {
	display: block;
	margin-bottom: bottom 0.25em;
	font-weight: normal;
}

input, textarea, select {
	display: block;
	padding: 0.5em;
	box-sizing: border-box;
	margin-bottom: 1em;
}

/*Buttons für meine Schalte*/
.relay-btn {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 18px;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Farben und Verhalten */
.btn-on {
    background-color: #5cb85c; /* grün */
}
.btn-on:hover {
    background-color: #4cae4c;
    transform: scale(1.03);
}

.btn-off {
    background-color: #ff5c5c; /* rot */
}
.btn-off:hover {
    background-color: #e04b4b;
    transform: scale(1.03);
}

.btn-unknown {
    background-color: #999;
    cursor: not-allowed;
}

.relay-status {
    margin-top: 10px;
    font-family: sans-serif;
}