#sort { float:right;text-align:center;margin:0;}
#sort::before { content:"\21F5"; }
#menu { margin:0; padding:0; position:absolute; bottom:0px; right:0; width:calc(100% - 266px); height:50px; color:#fff; background-color:#000; font-weight:normal; text-decoration:none; clear: right; }
#menu ul{ list-style:none; margin:0; padding:0; border:0; }
#menu ul li { display: block; position: relative; float: left; }
#menu li ul { z-index:1999; display: none; }
#menu ul li a { display: block; cursor: pointer; text-align: left; font-style:unset; height:24px; text-decoration: none; color: #fff; font-size:15pt; font-weight: normal; padding: 13px 10px 13px 10px; white-space: nowrap; }
#menu .more::after { content: ""; } /* \2026 */
#menu li.current a { color:#fff; background-color:#555; }
#menu li:hover li.current a { color:#fff; background-color:#555; }
#menu li a:hover{ color:#fff; background-color:#555; }
#menu li a:hover{ color:#fff; background-color:#555; }
#menu ul li a:hover {	color: #fff; background-color: #555; }
#menu li:hover ul { z-index:1999; display: block; position: absolute; margin:0; padding:0; }
#menu li:hover li { float: none; }
#menu li:hover a { color: #fff; background-color: #000; }
#menu li:hover li a:hover { color: #fff; background-color: #555; }

/* Global */
.small { font-size:0.8em; }
.box {height:430px; position:relative; overflow:hidden;}
.half{position:relative; width:calc(50% - 10px); float:left; margin:5px; }
.wgrad a { display:table-cell; color:black; vertical-align: middle; font-size:0.9em; font-weight:bold; position:absolute; width:calc(100% - 10px); min-height:25%; bottom:0; left:0; padding:5px; background-image: linear-gradient(0deg, rgba(255,255,255,1) 25%, rgba(255,255,255,0.7) 75%);text-align:center; }

.datum { border:1px solid black; display:table-cell; text-align:center; width:35px; vertical-align:top; position:absolute; top:5px; right:5px; margin:0 0 5px 5px; font-weight:bold; }
.datum #monat, .date #monat { background-color:rgba(0,0,0,1);color:white; padding:0; font-size:0.8em; float:left; width:100%; }
.datum #tag, .date #tag { background-color:rgba(255,255,255,1);color:black; padding:0; font-size:1.3em; float:left; width:100%; }
.datum #more, .date #more { background-color:rgba(255,255,255,1);color:black;padding:0;font-size:0.35em; font-weight:normal; float:left;width:100%; }

#body picture.left {float:left;margin: 0 10px 10px 0;max-width:50%;}
#body picture.right {float:right;margin: 0 0 10px 10px;max-width:50%;}
picture img { width:100%; }
#goTop { position:fixed; color:rgba(0,0,0,0.5); bottom:20px; right:20px; }
#goTop.show { display:block; }
#goTop.hide { display:none; }

/* clear:both automatisch bei body, anm,... */
#body:after, #anm:after, #kv:after, #kv2:after { content:"";clear:both;display:block; }
/* Home -> Vorstellung (skr) */
#skr { padding:0; float:none; width:calc(100% - 4px); height:400px; background: url('img/Stadtkunst.webp') top right/auto 100% no-repeat; border-color:black; border-style:solid; border-width:0 2px 2px 2px; }
#skr a { color:white; }
#skr #grad {width:50%; height:100%; background-image: linear-gradient(90deg, #000 90%, rgba(0,0,0,0) 100%); color:#fff; display:table;}
#skr #txt {display:table-cell; vertical-align: middle; padding: 0 60px 0 10px;}
/* Home -> Kommende Kurse (kkurse) */
#kkurse { float:left; width:calc(66.6% - 29px); padding:0 10px 0 10px; margin:10px 0 0 5px; background-color:#cbffc9; border:2px solid #588056; }
#kkurse ul { list-style:none; margin:0; padding:0; width:calc(100% - 4px); }
#kkurse ul li { display:table; margin: 0 0 10px 10px; width:calc(33% - 12px); height:140px; border:1px solid black; float:left; background-color:black; background-position:top center; background-size:100% auto; position:relative; }
#kkurse a { display:table-cell; color:white; vertical-align: middle; font-size:0.9em; font-weight:bold; position:absolute; width:calc(100% - 10px); min-height:25%; bottom:0; left:0; padding:5px; background-image: linear-gradient(0deg, rgba(0,0,0,1) 25%, rgba(0,0,0,0.7) 75%);text-align:center; }
/* Home -> News (news) */
#news { float:left; width:calc(33.3% - 29px); padding:0 10px 0 10px; margin:10px 5px 0 0; background-color:#ffd3d3; border:2px solid #805656; }
/* Home -> Footer */
#footer { text-align:right; padding:0; margin:0; clear:both; }
#footer a { font-size:0.8em; text-decoration:none; }
/* Kurse */
.kurse { display:grid; width:100%; grid-template-columns:repeat(2,1fr); flex-direction: row; box-sizing:border-box; height:auto; flex-wrap: wrap; gap:1rem; padding-top:10px; }
section { display:flex; flex-direction:column; position:relative; width:calc(100% - 4px); background-position: right -2px top -2px; background-size: auto calc(100% + 4px); background-repeat: no-repeat; height:300px; border:2px solid black; }
/*section:nth-child(odd) { margin: 5px 5px 5px 0; }
section:nth-child(even) { margin: 5px 0 5px 5px; }*/
section .blend { padding:10px; width:calc(60% - 20px); height:calc(100% - 20px); position:absolute; top:0; left:0; overflow:hidden; }
section #bott { position:absolute; bottom:0; left:0; padding:10px; width:90%; }
#details { background-color:#ebffeb; float:left; width:66%; padding-right:20px; }
.details {border:2px solid black; padding:5px;background-color:white; color:black; position:absolute; bottom:5px; right:5px; margin:0; width:auto;cursor:pointer;}
/* Datenschutz */
#ds { padding:10px 0 0 0; font-size:0.8em; column-count:2; column-rule:0; column-gap:20px; }
/* Anmeldung */
#anm { position:relative; display:flex; gap:10px; justify-content: space-between; align-items:stretch; margin:0; padding:0; width:calc(100% + 10px); background-color:#ffebeb; }
#anm > div { display:block; width:33.333%; }
#anm #info { background-position: right -2px top -2px; background-size:auto calc(100% + 4px); background-repeat: no-repeat; }
#afrm { width:calc(100% + 2px); clear:left; overflow:hidden; position:relative; padding:15px; margin:0 17px 0 -17px; border:2px solid #565d7e; background-color:#dde3ff; }
#ontop{ justify-content:center; align-items:center; display:none; margin:0; position:absolute; height: 100%; width: 100%; z-index:999; padding:0px; left:0px; top:0px; clear:none; background-color:rgba(0,255,0,0.5); }
#ontopinfo{ display:flex; flex-basis:0; align-self:center; min-width:50%; height:auto; border:2px solid black; border-radius:10px; background:#fff; padding:10px; }

#ftop{ justify-content:center; align-items:center; display:none; margin:0; position:absolute; height: 100%; width: 100%; z-index:999; padding:0px; left:0px; top:0px; clear:none; background-color:rgba(255,255,255,0.8); }
#ftopinfo{ display:flex; flex-basis:0; align-self:center; min-width:50%; height:auto; }
#form { margin:0; width:calc(50% - 15px); float:left; padding:0; position:relative; }
#form:nth-child(odd) { padding-right:15px; }
#form:nth-child(even) { padding-left:15px;}
#form label { float:left; margin:0 10px 10px 0; width:calc(100% - 10px); font-size:0.9em; }
#form label.half { width:calc(50% - 10px); }
#form label input[type=text] { width:calc(100% - 8px); } 
#form label select { width:calc(100% - 2px); } 
#form label.nl { clear:left; }
#form input, #form select { margin-right:10px; }
#afrm input[type=button] {background-color:black;color:white;padding:5px;width:calc(100% - 36px);border:2px solid white;}
#afrm #form input[type=button] {width:100%;}
#afrm input[type=button]:disabled { background-color:inherit;color:#999; }
#form input[type=checkbox] { width:20px; height:20px;vertical-align:middle;margin-right:5px; }

/* Kursansicht */
#kv { position:relative; background-position: right top; background-size: auto 100%; background-repeat: no-repeat; margin:0; padding:0 33.3% 0 0; width:66.7%; }
#details1 { background-color:#ebffeb; width:calc(100% - 20px); overflow:hidden; padding-right:20px; min-height:300px; }
#kv2 { position:relative; background-position: left center; background-size: 33.3% auto; background-repeat: no-repeat; margin:0; padding:0 0 0 33.3%; width:66.7%; }
#details2 { background-color:#ebffeb; width:calc(100% - 20px); float:right; padding-left:20px; min-height:200px; }
#afrm p { margin-block-start:0.3em; margin-block-end:0.3em; }

/* Galerie */
#onTop{ margin:0; position:fixed; height: 100%; z-index:999; padding:0px; width:100%; left:0px; top:0px; clear:none; background-color:rgba(0,0,0,0.7); display:none;  background-position: center; background-repeat: no-repeat; background-size: contain; }
#picinfo { position:absolute; left:50%; margin-left:-250px; top:50px; width:500px; padding:10px; height:auto; min-height:300px; overflow:auto; max-height:80%; text-align:left; background-color:rgb(255,255,255); color:rgb(0,0,0); border:2px solid rgb(100,100,100); }
.entry { width:300px; height:300px; float:left; position:relative; margin:1em 15px 0 15px; padding:0; cursor:pointer; background-position: center; background-repeat: no-repeat; background-size: contain; }
.mytitle { position:absolute; bottom:0px; width:100%; font-size:0.9em; text-align:center; background-color:rgba(255,255,255,0.8); }
#galerie { margin:10px 0 10px 0; }
#preview { width:50%; position:absolute; bottom:10px; left:25%; padding:10px; margin:0; height:auto; min-height:20px; overflow:auto; max-height:40%; text-align:left; background-color:rgba(255,255,255,0.7); color:rgb(0,0,0); border:0; border-radius: 20px; }
#preview p { margin-block-start:0.3em; margin-block-end: 0; }
#preview h1 { font-size:1.3em; margin-block-start:0; margin-block-end: 0.3em; }

#body { clear:both; margin:0; padding-bottom:10px; position:unset; min-height:calc(100% - 100px); }

@media screen {
	#logo { height:100px; }
	body {text-align:left;}
	#page { width:1000px; margin: auto; padding:1em 1em 0 1em; }
}
@media screen and (max-width: 1050px) {
	#page { width: 100%; margin:0; padding:0; }
	#afrm { width:calc(100% - 24px); position:relative; margin:0; padding:10px; }
	#form { width:calc(50% - 20px); }
	#form:nth-child(odd) { padding:10px; }
	#form:nth-child(even) { padding:10px;}
	p { padding:0 10px 0 10px; }
	h1 { padding: 0 10px 0 10px; overflow:hidden;}
	h2 { padding: 0 10px 0 10px; overflow:hidden;}
	h3 { padding: 0 10px 0 10px;}
	h4 { padding: 0 10px 0 10px;}
	.box>h1, .box>h2, .box>p, .box>ul>li { margin-left:5px; margin-right:5px; }
	#skr #txt {display:table-cell; vertical-align: middle; padding: 0 5px 0 5px;}
}
@media screen and (max-width: 700px) {
	body {margin:0;font-size:0.9em;}
	#page { padding-bottom:0; }

	h4 { margin-block-start:0; margin-block-end:0; }
	.box { height:unset; overflow:unset; }
	.half{ width:calc(100% - 14px); }
	.kurse{ grid-template-columns: 1fr; padding:5px; }
	section { }

	/* Home -> Vorstellung (skr) */
	#skr { width:100%; border:0; height:auto; padding: 350px 0 0 0; background-position: top center; background-size:auto 350px; }
	#skr #grad {width:100%; height:auto; background-color:#000; color:#fff; display:table;}
	/* Home -> Kommende Kurse (kkurse) */
	#kkurse { float:none; width:100%; height:auto; margin:0; padding:0; border:0; }
	#kkurse ul li { width:calc(50% - 16px); }
	/* Home -> News (news) */
	#news { float:none; width:100%; height:auto; padding:0; margin:0; border:0; }
	/* Anmeldung */
	#anm { width:100%; flex-direction:column; gap:0; }
	#anm > div { width:100%; margin:0; padding:0 5px 0 5px; min-height:250px; }
	#anm #info { background-position: center; background-size:cover; background-repeat: no-repeat; }
	#afrm #form { margin:0; width:calc(100% - 14px); float:unset; }
	/* Datenschutz */
	#ds { padding:10px 0 0 0; font-size:0.8em; column-count:1; }
	/* Kursansicht */
	#kv, #kv2 { background-position: top center; background-size:contain; padding:300px 0 0 0; margin:0; width:100%; }
/*	#kv img, #anm img { display:inline; width:100%; height:auto; } */
	#details1, #details2 { width:calc(100% - 20px); float:unset; padding:0 10px 0 10px; min-height:unset; }

	.entry { width:calc(50% - 30px); height:200px; float:left; position:relative; margin:1em 15px 0 15px; padding:0; cursor:pointer; background-position: center; background-repeat: no-repeat; background-size: contain; }
	#preview { width:calc(100% - 40px); left:10px; padding:10px; }
}

@media screen and (max-width: 400px) {
	#menu ul li a { display: block; cursor: pointer; text-align: left; font-style:unset; height:24px; text-decoration: none; color: #fff; font-size:13pt; font-weight: normal; padding: 13px 6px 13px 6px; white-space: nowrap; }
}

@media print {
	#menu, #topmenu { display:none; }
	body{text-align:left;background-color:#fff;margin:auto; -webkit-print-color-adjust: exact; color-adjust: exact; }
	#body { margin:0; padding:0; }
	#logo { margin:0; padding:0; text-align:right; }
	#page { width:19cm; margin: auto; }
	#skr { width:100%; border:0; }
	.box {height:auto;}
	#afrm { width:calc(100% - 14px); position:relative; margin:0; padding:5px; }
	#anm { background-color:#fff; }
	#anm .info { width:50%; float:left; margin-right:0; background-color:#fff; }
	#kv, #kv2 { background-color:#fff; padding:0; margin:0; width:100%; }
	#details1, #details2 {background-color:#fff; min-height:unset;}
	.kurse { display:block; }
	section { float:left; break-inside: avoid-page; }
	.noprint { display:none; }
	#afrm input[type=button] {width:100%;}
	#kkurse, #news { overflow:visible; }
	#goTop { visibility:hidden; }
}