/*  Allgemein  */

:root
{
    --mainColor: #458B00;
    --headerFont: #ffffff;
    --mainFont: rgb(74, 76, 85);
  	--mainBackground: #ebffd6;
  	--mainLink: #587e32;
  	--lineColor: #80a075;
}

body
{
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
  	min-height: 100vh;
  	background-color: var(--mainBackground);
  	font-size: 1rem;
}

hr
{
  	min-height: 1rem;
  	border-radius: 14px;
  	border: 0;
  	background-color: var(--lineColor);
}

/*  Header  */

header
{
    background-color: var(--mainColor);
    color: var(--headerFont);
    display: flex;
    justify-content: center;
    flex-direction: column;
    grid-area: Header;
}

header *
{
    padding: 0;
    margin: 0;
}

header h1
{
    font-size: 5.5vw;
    display: flex;
    justify-content: center;
}

/*  Navigation  */

header .Navigation
{
    grid-area: Navigation;
}

header .Navigation ul
{
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

header .Navigation ul li
{
    display: inline;
    user-select: none;
    word-break: break-all;
}

header .Navigation ul li a
{
    color: var(--headerFont);
    text-decoration: none;
    cursor: pointer;
    border: 4px solid var(--headerFont);
    margin: 0.25rem 0.1rem 0.25rem 0.1rem;
}

header .Navigation ul li ul a
{
  	display: flex;
}

/*  Informationen  */

main .Informationen
{
    grid-area: Informationen;
}

main .Informationen a
{
  	color: var(--mainLink);
}

/*  Seiteninhalt  */

main
{
  	width: 100vw;
    display: flex;
  	flex-direction: column;
  	justify-content: center;
    color: var(--mainFont);
  	margin: 0 4rem 0 4rem;
    max-width: calc(100vw - 8rem);
}

main .Hauptinhalt
{
    grid-area: Hauptinhalt;
  	margin-bottom: 4rem;
}

main .Hauptinhalt *
{
    max-width: calc(100vw - 8rem);
  	height: auto;
}

main .com-content-article item-page
{
  	display: flex;
  	justify-content: center;
  	flex-direction: column;
  	justify-content: center;
  	align-items: center;
}

/*main .Hauptinhalt div div div
{
  	display: flex;
  	flex-direction: column;
  	justify-content: center;
}*/

/*  Seitentitel  */

.page-header h1
{
  	background-color: #a5dd6c;
  	padding: 1rem;
  	border-radius: 8px;
  	color: var(--mainLink);
  	border: 4px solid var(--mainLink);
  	text-align: center;
  	margin-bottom: 3rem;
}

/*  Link nach oben  */

.top
{
  	grid-area: Nach_oben;
    position: sticky;
  	bottom: 0;
}

.top a
{
  	background-color: var(--mainBackground);
  	padding: 0.5rem 1rem 0.5rem 1rem;
  	text-decoration: none;
  	color: var(--mainLink);
}

/*  Sonstige Formatierung  */

.umrandet a
{
  	border: 4px solid var(--mainLink);
  	padding: 0.5rem 1rem 0.5rem 1rem;
  	border-radius: 10rem;
}

.umrandet *
{
  	margin-top: 2rem;
}

/*  Links zu Social Media  */

.socialmedia
{
  	margin-bottom: 3rem;
}

.socialmedia a
{
  	background-color: var(--headerFont);
  	padding: 1rem;
  	border-radius: 12rem;
  	box-shadow: 0px 2px 20px 4px #d6cdb8;
  	text-decoration: none;
}

.socialmedia *
{
  	color: var(--mainLink);
}

.socialmedia img
{
  	margin-right: 1rem;
}