#gridcontainer {
  min-height: 100%; 
  height: auto;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  display: grid; 
  grid-template-rows: auto auto auto 1fr auto; 
  grid-template-columns: 1fr; 
  grid-template-areas: 
	"topnavi"
	"header"
	"navi" 
    "content" 
    "footer"; 
}

#topnavi {
	grid-area: topnavi;
}

span.spacer {
	display: inline-block;
	width: 100px;
}

div.vspacer {
	width: 100%;
	height: 10px;
	display: block;
	position: relative;
}

#header {
	height: auto;
	color: #FFF;
	position: relative;
}

header h1 {
	position: relative;
	padding: 0 0 0 10px;
}

#header #logo {
	width: 100%;
	max-width: 600px;
	margin: 10px 0;
	padding: 0;
	height: auto;
	position: relative;
}

#logout {
	cursor: pointer;
	margin: 0 30px;
}

#logout:hover {
	text-decoration: underline;
}

#suche {
	top: 10px;
	margin: 10px 0 0 10px;
	width: 60%;
	max-width: 80vw;
}

nav ul li a.inaktiv {
	background-image: url("/img/auge_verborgen.png");
	background-size: auto 60%;
	background-position: right top;
	background-repeat: no-repeat;
}

#content .button_neu {
	position: relative;
	float: none;
	width: 200px;
	margin: 30px auto;
	background-color: var(--blau1);
}

#content .button_neu a {
	font-size: 110%;
	text-align: center;
	display: block;
	padding: 8px 50px;
	color: #FFF;
	text-decoration: none;
}

.button_neu a:visited {
	color: #FFF;
	text-decoration: none;
}

.button_neu:hover {
	background-color: #090;
	cursor: pointer;
}

.button_neu:hover a,
.button_neu:hover a:visited {
	color: #FFF !important;
}

#topnavi {
	position: relative;
	padding: 10px 0 10px 0;
	margin: 0;
	max-width: 100%;
}

#topnavi li:first-child a {
	padding-right: 0;
}

h1.admin {
	font-size: 300%;
	text-align: center;
	margin:0;
	padding: 0;
}

table.autowidth {
	width: auto;
}

tr.stufe2,
tr.stufe3,
tr.stufe4 {
	display: none;
}

tr.stufe2.show,
tr.stufe3.show,
tr.stufe4.show {
	display: table-row;
}

td.stufe1 {
	background-color: rgba(7, 67, 124, 1.0);
	font-size: 18px;
	color: #FFF;
}

td.stufe2 {
	background-color: rgba(30, 114, 190, 1.0);
	font-size: 16px;
	color: #FFF;
}

td.stufe3 {
	background-color: rgba(102, 161, 213, 1.0);
	font-size: 14px;
	color: #FFF;
}

td.stufe4 {
	background-color: rgba(102, 161, 213, 1.0);
	font-size: 12px;
	color: #FFF;
}

td {
	padding: 0;
}

td.hassub {
	width: 80px;
	background-image: url("/img/hassub.png");
	background-size: 20px;
	background-repeat: no-repeat;
	cursor: pointer;
}

tr.stufe1 td.hassub {
	background-position: 0 center;
}

tr.stufe2 td.hassub {
	background-position: 30px center;
}

tr.stufe3 td.hassub {
	background-position: 60px center;
}

tr.stufe4 td.hassub {
	background-position: 60px center;
}

td.hassub.show {
	background-image: url("/img/hassubview.png");
}

div.ende {
	width: 100%;
	clear: both;
	background-color: #EEE;
	color: #000;
	font-size: 120%;
	text-align: center;
	padding: 10px 0;
	margin-top: 30px;
	cursor: pointer;
}

div.ende:hover {
	background-color: #CCC;
}

td.vorschau {
	width: 30px;
	height: 30px;
	background-image: url("/img/lupe.png");
	background-size: contain;
	background-position: center top;
	background-repeat: no-repeat;
	cursor: pointer;
}

td.keinerechnung {
	width: 30px;
	height: 30px;
	background-image: url("/img/keinerechnung.png");
	background-size: contain;
	background-position: center top;
	background-repeat: no-repeat;
}

.infokeinerechnung {
	width: 20px;
}

#content article.box33 h1,
#content article.box33 h2,
#content article.box33 h3,
#content article.box33 h4,
#content article.box33 p {
	margin-left: 10px;
	margin-right: 10px;
}


.box50 {
	flex: 1;
	padding-right: 20px;
}

article .toolbox {
	position: absolute; 
	left: 0;
	width:auto;
	height:auto;
	background-color: #CCC;
	visibility: hidden;
	transition: all 0.3s ease-in-out;
	z-index: 300;
}

article:hover > .toolbox {
	visibility: visible;
}

article .toolbox div {
	background-position: center center;
	background-size: 90% auto;
	background-repeat: no-repeat;
	width: 30px;
	height: 30px;
	float: left;
}

#register_4 fieldset {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 10px;
	max-width: 100%;
}

#register_4 fieldset .box50 {
	flex: 1;
}

#vorschau_1 {
	width: 200px;
}

article .toolbox .blocknr {
	background-color: #0D2131;
	color: #FFF;
	font-size: 18px;
	width: 20px;
	height: 20px;
	padding: 5px;
}

article .toolbox div:hover {
	cursor: pointer;
}

article .toolbox div.artikelneu {
	background-image: url("/img/artikelneu.png");
}
	
article .toolbox .aktivschalter.aktiv {
	background-image: url(/img/seiteaktiv.png);
}

article .toolbox .aktivschalter.aktiv:hover::after {
	content: "deaktivieren";
	position: absolute;
	top: -30px;
	width: auto;
	padding: 4px;
	color: #FFF;
	background-color: var(--icon);;
}

article .toolbox .aktivschalter.passiv {
	background-image: url(/img/seitepassiv.png);
}

article .toolbox .aktivschalter.passiv:hover::after {
	content: "aktivieren";
	position: absolute;
	top: -30px;
	width: auto;
	padding: 4px;
	color: #FFF;
	background-color: var(--icon);;
}

article .toolbox .aktivlbo.aktiv {
	background-image: url(/img/fuerlbo.png);
}

article .toolbox .aktivlbo.aktiv:hover::after {
	content: "für alle";
	white-space: pre;
	position: absolute;
	top: -30px;
	width: auto;
	padding: 4px;
	color: #FFF;
	background-color: var(--icon);;
}

article .toolbox .aktivlbo.passiv {
	background-image: url(/img/fueralle.png);
}

article .toolbox .aktivlbo.passiv:hover::after {
	content: "nur LBO";
	white-space: pre;
	position: absolute;
	top: -30px;
	width: auto;
	padding: 4px;
	color: #FFF;
	background-color: var(--icon);;
}

article .toolbox .sortUp {
	background-image: url(/img/aufwaerts.png);
}

article .toolbox .sortUp:hover::after {
	content: "aufwärts schieben";
	white-space: pre;
	position: absolute;
	top: -30px;
	width: auto;
	padding: 4px;
	color: #FFF;
	background-color: var(--icon);;
}

article .toolbox .sortDown {
	background-image: url(/img/abwaerts.png);
}

article .toolbox .sortDown:hover::after {
	content: "abwärts schieben";
	white-space: pre;
	position: absolute;
	top: -30px;
	width: auto;
	padding: 4px;
	color: #FFF;
	background-color: var(--icon);;
}

article .toolbox .anzeigezeit {
	background-image: url(/img/anzeigezeit.png);
}

article .toolbox .anzeigezeit:hover::after {
	content: "Zeitbegrenzung";
	position: absolute;
	top: -30px;
	width: auto;
	padding: 4px;
	color: #FFF;
	background-color: var(--icon);;
}

article .toolbox .bearbeiten {
	background-image: url(/img/bearbeiten.png);
}

article .toolbox .bearbeiten:hover::after {
	content: "bearbeiten";
	position: absolute;
	top: -30px;
	width: auto;
	padding: 4px;
	color: #FFF;
	background-color: var(--icon);;
}


article .toolbox .kopieren {
	background-image: url(/img/kopieren.png);
}

article .toolbox .kopieren:hover::after {
	content: "kopieren";
	position: absolute;
	top: -30px;
	width: auto;
	padding: 4px;
	color: #FFF;
	background-color: var(--icon);;
}


article .toolbox .loeschen {
	background-image: url(/img/loeschen.png);
}

article .toolbox .loeschen:hover::after {
	content: "löschen";
	position: absolute;
	top: -30px;
	width: auto;
	padding: 4px;
	color: #FFF;
	background-color: var(--icon);;
}

#bilduploadoeffnen:hover {
	cursor:pointer;
}

.toolbox_pages {
	position: relative; 
	float: right;
	width:auto;
	height:auto;
	background-color: #FFF;
	transition: all 0.3s ease-in-out;
	z-index: 100;
}

.toolbox_pages div {
	background-position: left center;
	background-size: 100% auto;
	background-repeat: no-repeat;
	width: 30px;
	height: 30px;
	float: left;
	margin-right: 5px;
}

.toolbox_pages div:hover {
	cursor: pointer;
}

.toolbox_pages .aktivschalter.aktiv {
	background-image: url(/img/seiteaktiv.png);
}

.toolbox_pages .aktivschalter.aktiv:hover::after {
	content: "deaktivieren";
	position: absolute;
	top: -30px;
	width: auto;
	padding: 4px;
	background-color: #FC6;
}

.toolbox_pages .aktivschalter.passiv {
	background-image: url(/img/seitepassiv.png);
}

.toolbox_pages .aktivschalter.passiv:hover::after {
	content: "aktivieren";
	position: absolute;
	top: -30px;
	width: auto;
	padding: 4px;
	background-color: #FC6;
}

.toolbox_pages .aktivlbo.aktiv {
	background-image: url(/img/fuerlbo.png);
}

.toolbox_pages .aktivlbo.aktiv:hover::after {
	content: "für alle";
	white-space: pre;
	position: absolute;
	top: -30px;
	width: auto;
	padding: 4px;
	background-color: #FC6;
}

.toolbox_pages .aktivlbo.passiv {
	background-image: url(/img/fueralle.png);
}

.toolbox_pages .aktivlbo.passiv:hover::after {
	content: "nur LBO";
	position: absolute;
	top: -30px;
	width: auto;
	padding: 4px;
	background-color: #FC6;
}

input[type='button'].loeschen {
	background-color: var(--orange1);
}

textarea {
	width: 100%;
}

#switch_inserttreelink {
	cursor:pointer;
}

#treelinkdiv {
	width: 589px;
	height: 400px;
	position: absolute;
	z-index: 60;
	display: none;
	overflow: scroll-y;
	background-color: #EFEFEF;
}

#switch_treelink {
	width: 32px;
	height: 32px;
	position: absolute;
	left: 665px;
	top: 240px;
	margin-top: 5px;
	z-index: 55;
	background-image: url(/img/inserttreelink.png);
	background-size: contain;
	background-position: center center;
}

#switch_treelink:hover {
	cursor:pointer;
}

.close {
	width: 35px;
	height: 25px;
	position: absolute;
	z-index: 52;
	top: 10px;
	right: 10px;
	background-image: url(/img/close.png);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

.close:hover {
	cursor:pointer;
}

td {
	vertical-align: top;
}

.spacer td {
	background-color: #999;
	height: 2px;
}

.sortUp,
.sortDown,
.edit,
.del {
	width: 30px;
	height: 30px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}

.sortUp {
	background-image: url("/img/aufwaerts.png");
}

.sortDown {
	background-image: url("/img/abwaerts.png");
}

.edit {
	background-image: url("/img/bearbeiten.png");
}

.del {
	background-image: url("/img/del.png");
}

table ul li {
	list-style: none;
	margin: 20px;
	padding: 0;
}

table th,
table td {
	text-align: left;
	padding: 3px;
}

table td {
	background:none;
}

table tr:nth-child(odd) {
	background: #DDDD;
}

table tr.warteliste {
	background: var(--orange1);
}

table tr.warteliste:nth-child(odd) {
	background: var(--orange2);
}

span.aktiv {
	width: 25px;
	height: 25px;
	display: inline-block;
	border-radius: 100%;
	background-color: #FF0000;
	cursor: pointer;
}

span.aktiv.ein {
	background-color: #090;
}

span.image,
span.attachment,
span.sortUp,
span.sortDown,
span.edit,
span.del {
	display: inline-block;
	width: 25px;
	height: 25px;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #021c2d;
	cursor: pointer;
}

span.image {
	background-image: url("/img/image.png");
}

span.attachment {
	background-image: url("/img/attachment.png");
}

span.attachdel {
	display: inline-block;
	width: 25px;
	height: 25px;
	background-image: url('/img/loeschen.png');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	cursor: pointer;
	margin-left: 10px;
	margin-bottom: -5px;
}
	
#bildbearbeitung {
	height: 0;
	width: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #FFF;
	transition: all 0.5s ease-in-out;
	background-color: rgba(0,0,0,0.7);
	z-index: 3001;
}

#bildbearbeitung.visible {
	height: 100%;
}

#bildbearbeitungiframe {
	width: 800px;
	max-width: 100vw;
	height: 700px;
	max-height: 100vh;
	margin-top: 80px;
	margin-left: calc(50vw - 400px);
	background-color: #FFF;
}

.close {
	width: 40px;
	height: 40px;
	position: absolute;
	right: 10px;
	top: 10px;
	background-image: url('/img/exit.png');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	cursor: pointer;
}

span.status {
	position: relative;
	display: inline-block;
	margin-left: 20px;
	width: 25px;
	height: 25px;
	border-radius: 100%;
	background-color: red;
	cursor: pointer;
}

span.status.active {
	background-color: green;
}

input[type='button'].del {
	background-color: var(--orange1);
	background-position: right center;
	height: 40px;
}

input[type='button'].del:hover {
	background-color: red;
}

.gotomitglieder,
.goback {
	position: absolute;
	top: 10px;
	right: 0;
	font-weight: bold;
}

table.beitragsprognose {
	width: auto;
}

#box_mitgliedersuche {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 5px;
	row-gap: 5px;
	height: auto;
}

#box_mitgliedersuche input[type='text'] {
	box-sizing: border-box;
	max-width: 300px;
	margin-top: 5px;
}

#box_mitgliedersuche button {
	margin-top: 5px;
	padding: 8px 0;
	min-width: 100% !important;
	font-size: 120%;
	color: white;
	background-color: var(--blau1);
	transition: all 0.3s ease-in-out;
}

#box_mitgliedersuche button:hover {
	background-color: var(--blau4);
}

@media only screen and (min-width: 1400px) {

	body {
	  width: 100%;
	  max-width: 1400px;
	  margin: 0 auto;
	  padding: 0;
	  position: relative;
	  display: grid; 
	  grid-template-rows: auto auto 1fr auto; 
	  grid-template-columns: 1fr; 
	  grid-template-areas: 
		"topnavi"
		"header"
		"main" 
		"footer"
		; 
	}

	#header h1 {
		position: absolute;
		right: 10px;
		top: 10px;
	}
}