#searchbar form {
    display: grid;
    grid-template-columns: auto auto;
    padding: 2ch;
}

#searchbar button {
    width: 2ch;
    height: 2ch;
    border: none;
    background: none;
    margin: 0;
}

#main-menu li{
	border-radius:0 15px;
}
.frontpage main {
    display: grid;
    grid-template-areas:
        "navi navi navi"
        "texte actual upcoming";
    grid-template-columns: 23% 50% 23%;
    grid-gap: 2ch;
}

.frontpage_block {
    grid-area: actual;
}
.frontpage_block_value{
	background: cadetblue;
	min-height: 20em;
	border-radius: 0 15px;
}


.side-navi {
    grid-area: navi;
}

.upcoming {
    grid-area: upcoming;
}

.texte {
    grid-area: texte;
}

.side-navi {
    display: grid;
    grid-auto-flow: column;
}

.side-navi h2, .side-navi .empty {
    opacity: 0;
    width:5ch;    
    background:blue;
}

.side-navi a {
    text-decoration: none;
    display: block;
    box-shadow: 0px 4px 4px 0px aliceblue;
    background: linear-gradient(45deg, black, darkred);
    text-align: center;
    padding-top: 0.3em;
    height: 2em;
    border-radius: 0 0 15px 15px;
    color: white;
}
.second-menu a.upcoming,
.second-menu a.texte{
    grid-area: unset;
}
.frontpage .second-menu .frontpage,
.upcoming .second-menu .upcoming,
.calendar .second-menu .calendar,
.regelmaessige-termine .second-menu .regelmaessige-termine,
.texte .second-menu .texte,
.orte .second-menu .orte,
.gruppen .second-menu .gruppen,
.linx .second-menu .linx,
.second-menu .active {
    box-shadow: 0px 4px 4px 0px red;
    color: var(--bright-color);	
}

body {
	background: linear-gradient(156deg, black, var(--body-bg));
	
}

h1, h2 {
    border-radius: 0 15px 0 15px;
    background: var(--title-bg);
    text-align: center;
}

.frontpage .texte li, .frontpage .upcoming li {
    border-radius: 0 15px 0 15px;
    background: darkcyan;
    border: 2px solid aliceblue;
    /* padding: 7px; */
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    margin-bottom: 0.5em;
}

.frontpage .texte li {
}

ul {
    list-style: none;
    padding: 0;
}

.frontpage .texte h3, 
.upcoming .title,
body.upcoming li .date,
ul.calendar .title,
ul.calendar .date{
    background: black;
    margin-top: 0;
    padding: 1ch;    
}
.frontpage .texte h3 a, 
.frontpage .upcoming .title a,
.upcoming .title a,
body.upcoming li .date,
ul.calendar .title,
ul.calendar .date{
    color:var(--bright-color);
    text-decoration:none;
    display:block;
    width:100%;
}

.frontpage .upcoming li {
    display: grid;
    grid-template-areas:"title" "date" "ort" "kategorie";
}

.frontpage .upcoming .title {
    grid-row-start: 1;
    font-size:large;
    text-align:center;
}
.frontpage .upcoming li div,
.frontpage .texte .summary{
    padding-left:2ch;
    margin-bottom:1ch;
}
.frontpage .upcoming div a {
    color: black;
    font-weight: bold;
}

/*/upcoming*/
.upcoming_repeat_select {
    text-align: center;
    padding: 0;
    margin: 0;
}

input[name=repeat_select] {
    display: none;
}

.upcoming_repeat_select label {
    display: inline-block;
    padding: 2ch;
    background: var(--title-bg);
    border-radius: 0 0 15px 15px;
}

body.upcoming h1,
body.calendar h1 {
    margin-bottom: 0;
}

#repeat_show:checked~.upcoming_repeat_select label[for=repeat_show],
#repeat_hide:checked~.upcoming_repeat_select label[for=repeat_hide],
#repeat_only:checked~.upcoming_repeat_select label[for=repeat_only] {
    box-shadow: 3px 2px 8px 2px aliceblue;
    border: 1px solid;
}

#repeat_hide:checked~ul .repeat, #repeat_only:checked~ul .regular {
    display: none;
}

.upcoming .repeat, 
.upcoming .regular {
    border-radius: 0 0 15px 15px;
    /* max-width: 80vw; */
    margin-bottom: 2px;
    /* padding: 2ch; */
    border: 1px solid;
    border-top: 2px dashed;
    display: grid;
    grid-template-areas:
        "date title"
        "ort kategorie"
        "summary summary";
    grid-template-columns: auto 1fr;
}

.upcoming .upcoming_repeat_select {
    border-left: 1px solid;
    border-right: 1px solid;
    padding: 0;
    margin: 0;
}

body.upcoming .date {
    grid-area: date;
}

body.upcoming .title {
    grid-area: title;
}

body.upcoming .summary {
    grid-area: summary;
}

body.upcoming .ort {
    grid-area: ort;
}

.upcoming .kategorie {
    grid-area: kategorie;
}
.regular,
label[for=repeat_hide] {
    background: antiquewhite;
}
.repeat,
label[for=repeat_only]{
	background: #cde6b7;
}

.upcoming .regular div,.upcoming .repeat div {
    padding-left: 5ch;
}
.upcoming .summary{
    padding-bottom: 1em
}
.calendar h2 {
    border-radius:0;
}


ul.cell_content li:last-child,
#repeat_hide:checked~ul li:nth-last-child(1 of .regular){
    border-radius:0 0 15px 15px;
    padding-bottom: 1em;
}

.calendar .cell_content .date, .calendar .cell_content .title {
    padding-left: 3ch;
    margin-left: -3ch;
    width: unset;
    text-align: center;
}

ul.cell_content {
    overflow: hidden;
}

.cell_content .title a {
    color: var(--bright-color);
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
}
li.no_content{
	background:none;
}
ul.calendar {
    background: rgba(255,255,255,0.1);
}
.main,
body.texte .summary,
body.gruppen .summary {
    background: linear-gradient(125deg, cadetblue, #7478a0);
    padding: 3ch;
    border-radius: 0 0 0 15px;
}
.texte h2, 
body.gruppen h2{
	margin:0;
}
.texte .summary, 
body.gruppen summary{
	margin-left:15px;
}

details {
    background: var(--title-bg);
}

summary {
    cursor: pointer;
    padding-left: 2ch;
}

body.orte li {
    margin-bottom: 0.3em;
    border-radius: 0 15px;
    display: block;
    overflow: hidden;
    width: max-content;
    max-width: 92vw;
    /* padding-right: 2ch; */
}

body.orte summary {
    padding-right: 3ch;
}

body.orte .sumwrap {
    padding: 2ch;
}
.calendar h1 {
    display: grid;
    grid-template-columns: auto 1fr auto;
}

a.calendar_link {
    font-size: small;
    align-self: center;
    margin-right: 5ch;
    margin-left: 1ch;
}

.dashboard main div,
form {
    background: linear-gradient(#374b4c,cadetblue);
    padding-bottom: 1em;
    border-radius: 0 15px;
}

.dashboard main {
    display: grid;
    grid-template-areas:
        "nav nav"
        "mod front"
        "statisch user";
    grid-gap: 10px;
    grid-template-rows: auto auto;
    overflow: auto;
}
.dashboard .nav{
    grid-area:nav;
}
.dashboard .termine_und_texte{
    grid-area:mod;
}
.dashboard .userlist{
    grid-area:user;
}
.dashboard .frontpage_block{
    grid-area:front;
    display: grid;
    grid-template-rows: auto 1fr;
}
.dashboard .staticslist{
    grid-area:statisch;
}

.frontpage_block form {
    display: grid;
    grid-template-rows: 2em 1fr 3em;
}

.dashboard h2, .dashboard h1 {
    margin-top: 0;
}

textarea[name=fp_body] {
	width: 90%;
	height:90%;
	align-self: start;
	justify-self: center;
	min-height: 18em;
}
.dashboard main div.frontpageblock_image_insert{
	width:84%;
	align-self:end;
	justify-self:center;
	border-radius:15px 15px 0 0;
	padding-bottom:0;
	padding-top:0.6em;
	border: 2px solid aliceblue;
	/* border-bottom: none; */
	text-align:right;
	padding-left:2%;
	padding-right:4%;
}

#image_insert_dialog{
	height: 90vh;
	overflow: hidden;
}
.dashboard .fpb_dialog{
	height:100%;
	display:grid;
}
.dashboard #image_insert_list{
	height: 100%;
	overflow-y: scroll;
	padding:1ch;
	margin-top:0;
}

::backdrop {
    background: rgba(0,0,0,0.7);
}

#image_insert_dialog h2 {
    width: 100%;
    border-radius: 0;
    margin-bottom: 0;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}

#image_insert_dialog {
    border-radius: 15px;
    padding: 0;
}

#image_insert_dialog h3 {
    margin: 0;
    font-size: xxx-large;
}

#image_insert_list img {
    max-width: 50vw;
    max-height: 35vh;
}

button.closebutton {
    float: right;
    margin-right: 1ch;
    font-size: large;
    background: darkcyan;
    border-radius: 50%;
}

.dashboard .nav a, 
.dashboard .staticslist a, 
.dashboard .manage_content a, 
.dashboard .userlist a,
.dashboard .manage_site a {
    text-decoration: none;
    color: var(--bright-color);
    background: black;
    display: inline-block;
    padding: 5px;
    margin-left: 1ch;
    margin-bottom: 1em;
    border: 1px solid gray;
    border-radius: 5px;
}
.dashboard .nav a:hover,
.dashboard .staticslist a:hover,
.dashboard .userlist a:hover,
.dashboard .manage_content a:hover,
.dashboard .manage_site a:hover
{
    box-shadow: 5px 5px 15px 2px aliceblue;
}

.dashboard .staticslist, 
.dashboard .userlist,
.dashboard .manage_site {
    font-size: large;
    font-weight: bold;
}
.dashboard .staticslist li,
.dashboard .userlist li,
.dashboard .manage_content li,
.dashboard .manage_site li{
    /* border-bottom: 2px dashed gray; */
    margin-bottom: 0.3em;
    background: rgba(255,255,255,0.3);
    padding-left: 2ch;
    padding-top: 1em;
}
.dashboard .radioarea {
    display: grid;
    grid-template-rows: auto max-content;
    background: none;
    column-gap: 2ch;
}

.dashboard input.check {
    display: block;
    grid-row: 1;
}

.dashboard .radioarea label {
    border-radius: 0;
    background: none;
}

.dashboard .dataentry {
    display: grid;
    grid-template-rows: auto auto;
}

.dashboard .dataentry .overview {
    max-height: 40vh;
    overflow: auto;
}

form li {
    display: grid;
    justify-content: center;
    text-align: center;
    grid-template-rows: auto 1fr auto auto;
    align-items: center;
    border-bottom: 2px dashed aliceblue;
    margin-bottom: 1em;
    padding-bottom: 1em;
    font-size: large;
}

form li label {
    display: block;
    font-size: x-large;
    background: var(--title-bg);
    border-radius: 30px 0 0 0;
}

form li> p {
    margin: 0;
}

form textarea {
    height: 20em;
    width: 90vw;
}

button[type=submit] {
    margin-left: 40%;
    font-size: xx-large;
    background: var(--title-bg);
    cursor: pointer;
}
form .start_datum {
    display: grid;
    grid-template-rows: auto auto;
}

form .start_datum label {
    grid-row: 1;
    padding-left: 1ch;
    padding-right: 1ch;
    border-radius: 0;
}

#end_date_switch:checked ~ .start_datum .end_datum {
    display: grid;
    grid-template-rows: auto auto;
}
#end_date_switch:checked ~ .start_datum label[for=end_date_switch] .checked,
#rrule_switch:checked ~ .start_datum label[for=rrule_switch] .checked,
#rrule_except_switch:checked + label[for=rrule_except_switch] .checked{
	transform: rotate(90deg);
}
form .checked{
	display:inline-block;	
}
select#rrule_freq {
    font-size: xx-large;
}

form .rrule_daily li {
    grid-template-columns: auto auto auto auto auto;
}



#rrule_switch:checked ~ .rrule {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "title title"
        "sel rrule"
        "fin fin";
    background: cadetblue;
    border-radius: 0 15px 0 15px;
    overflow: hidden;
}

.rrule_daily, .rrule_weekly, .rrule_monthly {
    grid-area: rrule;
}

.rrule_fin {
    grid-area: fin;
}

.rrule.freq> label:first-child {
    grid-area: title;
    border-radius: 0;
}

.rrule_except_wrapper {
    display: none;
    grid-template-rows: auto auto auto;
    grid-template-columns: auto auto;
}

#rrule_except_switch:checked~ .rrule_except_wrapper {
    display: grid;
}

.rrule_except_wrapper label {
    grid-column: 1;
}

form .rrule_weekly li{
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(7,auto);
    grid-template-rows: auto;
}

.rrule_monthly_month_select {
    display: grid;
    grid-template-columns: repeat(6,auto);
    border-top: 1px dashed aliceblue;
    margin-top: 5px;
    padding-top: 5px;
    grid-column-start: 1;
    grid-column-end: 3;
}

.rrule.freq.monthly .rrule_monthly {
    display: grid;
    grid-template-columns: auto 1fr;
}

.link_form_wrapper {
    display: grid;
    grid-template-rows: auto auto;
}

.link_form_wrapper label {
    grid-row: 1;
    border-radius: 0;
}
span.ort_frei_db {
    grid-row: 2;
}

input#EditOrt, select[name=ort_in_datenbank] {
    grid-row: 3;
}

label[for=EditOrt] {
    grid-column: 1/3;
}

.node-add p {
    background: linear-gradient(45deg, darkcyan, cadetblue);
    padding: 3ch;
    border-radius: 0 0 0 15px;
    margin-top: 0;
    margin-left: 15px;
}

.node-add h2 {
    margin-bottom: 0;
}
.hidden {
	display:none;
}

input[name=eliminarfotos]:checked+div img{
    opacity:0.5
}
input[name=eliminarfotos]:checked+div {
    background: red;
    border-radius: 15px;
}
li.eliminarFoto label {
    display: grid;
    grid-template-columns: 1fr auto;
    padding-left:1ch;
    padding-right:1ch;
}
li.eliminarFoto label div{
    grid-row:2;
    grid-column:1/3;
}
li.eliminarPdf {
    display: grid;
    grid-template-areas:"text input button";
    background:var(--title-bg);
    width:fit-content;
    margin-left:auto;
    margin-right:auto;
    padding:1ch;
    padding-top:0.7em;
    
}
li.eliminarPdf input{
    grid-area:input;
}
.eliminarPDFButton{
    grid-area:button;
}
li.eliminarPdf input:checked~div{
    background:red;
}
ul.mod_area li {
    background: linear-gradient(45deg, cadetblue, yellow);
    display: block;
}

form .mod_area li label {
    display: inline-block;
    padding-left: 20px;
}

/*page of event and article*/
.bild {
    background: linear-gradient(45deg, darkcyan, cadetblue);
    display: inline-block;
    text-align: center;
    border: 4px solid aliceblue;
    border-radius: 0 15px;
    max-width: 30vw;
}

.bild img {
    width: 100%;
}
.bilder {
	display:grid;
	grid-template-columns: repeat(3,30vw);	
}
.bilder h2 {
	grid-column: 1/4;
}

.bild.first_image {
    float: right;
    max-width: 40vw;
    margin-right: 5ch;
}
.termin img.first_image {
    max-width: 80vw;
}

.pdfs li {
	background: linear-gradient(45deg, darkcyan, cadetblue);
    display: inline-block;
    text-align: center;
    border: 4px solid aliceblue;
    border-radius: 0 15px;
    max-width: 30vw;
    padding:2ch;	
}
.pdfs li a, a.bild{
	color: black;
	font-weight: bold;
}

.bild .bild_title{
	font-style: italic;	
}
.bild_title a{
	text-decoration: none;
}
ul.terminheader {display: grid;grid-template-areas:
"datum datum kategorie"
"ort veranstaltende homepage";padding-left: 4ch;font-size: large;}

.termin .header {
    background: linear-gradient(45deg, darkcyan,cadetblue);
    border-radius: 0 15px;
}

.terminheader .datum {
    grid-area: datum;
    display: grid;
    grid-template-columns: auto auto;
}
.terminheader .datum .date,
.terminheader .kategorie a {
    grid-column: 2;
    font-weight: bold;
}

.terminheader .kategorie {
    grid-area: kategorie;
    display: grid;
    grid-template-columns: auto auto;
}
.terminheader .ort {
    grid-area: ort;
}
.terminheader .homepage {
    grid-area: homepage;
}
.terminheader .veranstaltende {
    grid-area: veranstaltende;
}
.terminheader label{
	margin-right:1ch;
}

.editlist ul {
    display: grid;
    background: linear-gradient(45deg, darkcyan,cadetblue);
    border-radius:0 15px;
    border:1px solid white;
}

.editlist li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    padding: 1ch;
    border-bottom: 1px dashed aliceblue;
}
.editlist li.not-visible{
	background:red;
}
.editlist li> *{
	margin-right:1ch;
}
.more_link {
    display: grid;
    justify-content: end;
    padding-right: 10vw;
    background: linear-gradient(180deg, transparent, cadetblue);
    border-radius: 0 0 0 15px;
    padding-top: 7em;
    margin-top: -7em;
}

.pager {
    background: linear-gradient(45deg, black, darkcyan);
    display: grid;
    border: 1px solid white;
    width: 50vw;
    margin-left: 25vw;
    grid-auto-flow: column;
}

.pager a, .pager span, .editlist main a {
    background: linear-gradient(45deg, black, darkred);
    color: white;
    padding: 1ch;
    font-weight: bold;
    font-style: italic;
}

.searchentry{		
	min-height:5em;
	margin-bottom: 1em;
	background: linear-gradient(45deg, darkcyan, cadetblue);
	border: 1px solid aliceblue;
	boder-radius: 0 15px;
}

.searchentry header{
	display: grid;
	grid-template-columns: 1fr auto;
}
body.search main input[name=search_term] {
    font-size: x-large;
}

body.search main header form {
    display: grid;
    padding:1ch
}
.searchentry a {
    text-decoration: none;
    color: black;
}

.ort main, .gruppe main {
    background: linear-gradient(45deg, darkcyan,cadetblue);
    border: 1px solid aliceblue;
    border-radius: 0 15px;
    margin: 1ch;
    display: grid;
    grid-template-areas:
        "title title"
        "location contact"
        "body body";
}

body.ort h1,
body.gruppe h1 {
    margin: 0;
}

body.ort main h1,
body.gruppe main h1{
    grid-area: title;
}
body.ort main .location,
body.gruppe main .location{
    grid-area: location;
    padding-left:1ch;
}
body.ort main .contact,
body.gruppe main .contact{
    grid-area: contact;
	padding-left:1ch;
}
body.ort main .body,
body.gruppe main .body{
    grid-area: body;
  	padding-left:1ch;
}

.error main, 
.mod_success main,
.success main {
    background: linear-gradient(45deg, darkcyan, cadetblue);
    min-height: 5em;
    text-align: center;
    padding-top: 5em;
    font-size: xx-large;
}

.ort_termine {
    display: grid;
    grid-template-areas:
        "title1 repeat_select"
        "calendar repeat_select"
        "title2 title2"
        "upcoming upcoming";
}
.ort_termine .upcoming_repeat_select+ul.calendar{
    grid-area: calendar;
}
.ort_termine h1{
    grid-area: title1;    
}
.ort_termine h1 a{
    display:none;
}
.ort_termine h1:first-of-type{
    grid-area:title2;
}
.ort_termine .upcoming_repeat_select:nth-of-type(2){
    display:none;
}
.ort_termine .upcoming_repeat_select{
    grid-area:repeat_select;
    display:grid;
    padding:3ch;
    margin:2ch;
    margin-top:0;
    align-self:start;
}
.ort_termine .upcoming_list{
    grid-area:upcoming;
}
.ort_termine .upcoming_repeat_select label{
    border-radius:15px;
    margin-bottom:1ch;
}
body.ort .upcoming_list li,
body.gruppe .upcoming_list li{
	border-bottom: 2px dashed aliceblue;
	padding-bottom: 1em;
	padding-top: 1em;
	padding-left: 1ch;
}


/*mobile stuff*/
@media screen and (max-width:800px){
	.side-navi.second-menu {
	     grid-template-columns: auto auto auto auto;
	     grid-auto-flow: row;
	     grid-gap:2ch;
	}
	.side-navi.second-menu h2{
	     display:none;
	}



	ul.terminheader {
	    grid-template-areas:
	        "datum"
	        "datum"
	        "kategorie"
	        "ort"
	        "veranstaltende"
	        "homepage";
	    grid-gap: 1ch;
	}
	.frontpage main {
	    grid-template-areas:
	        "navi navi"
	        "actual actual"
	        "texte upcoming";
	    grid-template-columns: 1fr 1fr;
	}
	ul#main-menu{
		display: flex;
		flex-flow: row wrap;
		width: var(--header-width);
	}
	#main-menu li{
		margin-top: 1em;
	}
}
@media screen and (max-width:550px){
	.frontpage main {
	    grid-template-areas:
	        "navi"
	        "actual"
	        "upcoming"
	        "texte";
	    grid-template-columns: 1fr
	    ;
	}
	.upcoming_repeat_select {
	    display: grid;
	    grid-template-areas:
	        "regular repeat"
	        "all all";
	}
	
	.upcoming_repeat_select label:first-child{
	    grid-area: regular;
	    justify-self:end;
	}
	
	.upcoming_repeat_select label:last-child{
	    grid-area: repeat;
	    justify-self: start;
	}
	.upcoming_repeat_select label:nth-child(2){
	    grid-area:all;
	    justify-self: center;
	}
	.upcoming_repeat_select label{
	    width: fit-content;
	}
}
.hide_on_small{
	display:none;
}

li.simple_value {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
li.simple_value label{
	width:fit-content;
	padding-left:3ch;
	justify-self:end;
}

.default_list li.arr_item {
    display: grid;
    grid-template-columns: 1fr;
    border-bottom:none;    
}


.multi_lang_language, .lang_select {
    display: none;
}

.lang_select:checked+.multi_lang_language{
    display: grid;
}
.language_selection_wrapper{
	display:grid;
	grid-auto-flow:columns;
}
.language_selection_wrapper label {
    background: linear-gradient(45deg, black, red);
    color: white;
    width: 5ch;
    justify-self: center;
    cursor: pointer;
    padding: 5px;
}
.preview {
    display: grid;
    grid-auto-flow: column;
}

.preview > * {
	background: linear-gradient(45deg, black, red);
	color: white;
	width: fit-content;
	padding: 10px;
	margin: 1ch;
	border-radius: 15px;
}

.arr_wrapper > ul {
	max-height: 18em;
	overflow: scroll;
}

ul.arr_object {
    display: grid;
 	grid-auto-flow:column;
}



.arr_wrapper > ul li {
    border-bottom: none;
    margin-bottom: 5px;
    padding: 0;
}

.arr_wrapper > ul > li {
    background: linear-gradient(45deg, black, red);
    border-radius: 15px;
    padding: 1ch;
}
.arr_wrapper > ul > li:focus-within {
    background: linear-gradient(45deg, black,yellow );
}

.language_selection_wrapper {
    display: inline-grid;
}

.language_selection_wrapper div {
    display: grid;
    grid-auto-flow: column;
}

.lang_select_label.lang_select_active {
    border: 2px solid aliceblue;
    font-size: large;
    grid-column:1;
    grid-row: 1/-1;
}
.lang_select_label, .add_language{
    border-radius: 0;
    font-size: small;
    text-align:center;
    display:block;
    padding:1ch;
    width:fit-content;
    border:2px solid black;
    grid-row:2;
}
li.alias_item {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 20ch 5ch 20ch 20ch 20ch;
    grid-column-gap: 2ch
}
li.alias_item label{
    grid-row:1;
}
li.alias_item select,
li.alias_item input{
    grid-row:2;
}
.alias_item .del_button{
    grid-row:1/3;
}
.alias_item .arrow{
	grid-row:1/3;
	grid-column: 2;
	color: aliceblue;
	font-size: xx-large;
	align-self: end;
}