body {
	display: grid;
	gap: 0.3em;
}
/* 2-spaltiges Layout für breitere Viewports */

@media (min-width: 30em) {
	body {
		grid-template-columns: 1fr 3fr;
		grid-template-rows: auto 1fr min-content;
		padding: 1rem;
	}
}

header,
footer {
	grid-column: 1 / -1;
}

header {
	/*background: #F1F3F4;*/
	background: #bbdbfe;
	border-color: #d5d5d5;
	display: grid;
	grid-template-columns: 1fr;
	float: right;
	clear: right;
	margin: 0 0 1em;
}

main {
	/*background: #ffede0;*/
	background: #ffffff;
	border-color: #df6c20;
}

nav {
	/*background: #ffede0;*/
	background: #bbdbfe;
	border-color: #df6c20;
}

aside {
	background: #e8f3ff;
	border-color: #8db243;
}

footer {
	background: #e4ebf2;
	border-color: #8a9da8;
}

footer * {
	float: right;
	clear: right;
	margin: 0 0 1em;
}

body {
	margin: 0 auto;
	max-width: 80em;
	font-family: sans-serif;
}

header,
nav,
main,
article,
section,
aside,
footer {
	border-radius: 0px 0.5em 0.5em;
	border: 1px solid;
	padding: 10px;
}

/* tonie boxen */
.container {
	display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.box {
	background-color: #FFFFFF;/*#f0f0f0;*/
    border: 1px solid #ccc;
    padding: 1rem;
    flex: 1 1 100%; /* 100% Breite auf kleinen Geräten */
}

button{
background-color: #FFFFFF;
height: 100%;
width: 100%;
border-radius: 10px;
padding: 1rem;
}

.heart-icon {
  color: grey; /* Standardfarbe */
  border-radius: 10px;
  
}

.active {
  /*color: #FF0000;  Farbe, wenn Favorit aktiv */
 background-color: #FF0000;
}
.active2 {
  /*color: #FF0000;  Farbe, wenn Favorit aktiv */
 background-color: #009900;
}
 /*.heart-icon.active {
  color: red; Farbe, wenn Favorit aktiv 
 
}*/


a:link.nav,a:active.nav,a:visited.nav,a.nav{color:#000000;text-decoration:none;font-size: 1.0rem;}