:root {
	--pad:clamp(12px,calc(14vw - 96px),48px);
	--gap:20px;
	--hgapm:var(--gap);
	--hgapp:0;
	--transition:0.5s;
	--headerpadding:8px;
	--headerheight:44px;
	--menuwidth:320px;
	--orange:#ff8940;
	--blue:#003377;
	--text:#777;
	--bg:#ffffff;
	--menu0:#888;
	--menu1:#000;
	--menuh:#f7931e;
	--box_bg:#0001;
	--highlight:#000;
	--menulayerbg:#fff;
	--logo:var(--blue);
	--textinput:#000;
	--menuhover:#b8632e;
	--adminbg:#ccf;
	--adminborder:#999;
	--adminb1:#fff;
	--adminb2:#777;
	--adminb3:#eee;
	--adminb4:#666;
	--pagebg:#fff;
	--f-button-color:#888;
	--mincardwidth:200px;
	--cards: max(1, round(up, 100cqw / var(--mincardwidth)));
}

body {
	display:grid;
/* 
	min-height:100vh;
	min-height:100dvh;
 */
	max-width:110em;
	grid-template:
	"head head head" 15em
	"top top top" min-content
	"left . right" 1fr
	"bottom bottom bottom" min-content /
	minmax(0,7fr) clamp(34px,calc(12vw - 44px),100px) minmax(0,13fr);
	padding:0 var(--pad);
	margin:0 auto;
	font-size:12px;
	font-family:"Arial";
	color:var(--text);
	background:var(--pagebg);
	transition:background 0.3s ease-in-out;
}
header {
	grid-area:head;
	width:100%;
	height:100%;
	background:var(--pagebg);
	transition:background 0.3s ease-in-out;
	position:relative;
}

#logo {
	position:absolute;
	aspect-ratio:189/96;
	width:16rem;
	left:calc(var(--pad) * -1 - 17px);
}
#buttons {
	position:absolute;
	top:20px;
	right:0;
	font-size:2em;
}
#buttons a { color:var(--menu0); }
#buttons a.active { color:var(--menu1); }
#buttons a:hover { color:var(--menuh); text-decoration:none; }
#buttons ul { list-style-type:none; display:inline-block; margin:0; padding:0 }
#buttons ul li { display:inline-block; margin:0 0 0 1rem; padding:0; }

.languageselect { font-weight:bold; font-size:1.5rem; }

#content_top,#content_left,#content_right,#content_bottom { container-type: inline-size; }
#content_top { grid-area:top; display:flex; flex-wrap:wrap; gap:var(--gap); align-content:flex-start; position:relative; font:400 1.2em/1.7em Arial; margin-bottom:var(--gap); }
#content_left { grid-area:left; display:flex; flex-wrap:wrap; gap:var(--gap); align-content:flex-start; position:relative; font:400 1.2em/1.7em Arial; margin-bottom:70px; }
#content_right { grid-area:right; display:flex; flex-wrap:wrap; gap:var(--gap); align-content:flex-start; position:relative; font:400 1.2em/1.7em Arial; margin-bottom:70px; }
#content_bottom { grid-area:bottom; margin-bottom:4rem; display:flex; flex-wrap:wrap; gap:var(--gap); align-content:flex-start; position:relative; font:400 1.2em/1.7em Arial; }
#content_top:empty { display:none; }
#content_left:empty { display:none; }
#content_right:empty { display:none; }
input,textarea { color:var(--textinput); }
input.edit, textarea.edit { font-size:1rem; padding:1px; margin:0; border:1px solid var(--adminborder); box-sizing:border-box; width:100%; }
input.warn, textarea.warn { font-size:1rem; padding:1px; margin:0; border:1px solid red; background-color:#fdd; }
h1,h2,h3,h4,h5,h6 { margin:0; }
h1 { font-weight:700; font-size:2em; line-height:1.2em; color:inherit; display:block; margin:0; padding:0; letter-spacing:2px; }
h2 { display:block; padding:0; color:inherit; font-size:inherit; letter-spacing:1px; }
h4 { font-size:11px; color:#fff; background-color:#f70; padding:1px 1px 1px 3px; letter-spacing:1px; }
h5 { font-size:10px; font-weight:normal; color:#666; display:block; text-align:center; margin:0 auto; padding:2px 10px; }

h3 { display:inline-block; padding:0; color:inherit; font-size:inherit; letter-spacing:1px; position:relative; }
h3::before { content:""; background:var(--menuh); height:4px; width:100%; position:absolute; top:-6px; }

img { border:none; display:block; }
p { margin:0; padding:0; }
pre { font-family:monospace; }
.admin { color:#33c; margin:0 0 0 4px; }
.adminbox {  background-color:var(--adminbg); border-color:var(--adminborder); border-width:1px 0 1px 0; border-style:solid; padding:0; }
.box { padding-left:1rem; }
.xsgalcontainer { display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fill, minmax(var(--w),1fr)); }
.thumbnail { aspect-ratio:var(--a); outline:none; position:relative; }
.thumbnail>img { width:100%; height:auto; }
.thumbnail .xsicon { position:absolute; width:28px; background:#aaa; text-align:center; bottom:0; font:normal 20px/24px x-siter; }
.thumbnail .xsicon:hover { text-decoration:none; color:var(--bg); background:#bbb; }
.pup { left:0; border-radius:0 8px 0 0; }
.pdown { right:0; border-radius:8px 0 0 0; }

.xsslideshow img { width:100%; height:auto; }
.caption { background:#fff9; position:absolute; bottom:0; width:100%; padding:2px 4px; -webkit-backdrop-filter:blur(5px); }
.zoomblendgal .f-carousel__slide { display:flex; align-items:center; justify-content:center; background:#fff; }
.zoomblendgal .f-carousel__slide img { width:initial; max-height:100%; max-width:100%; }
.f-thumbs__slide { filter:saturate(0%) contrast(0.4) brightness(1.45); transition:filter 0.25s ease-in-out; }
.f-thumbs__slide.is-nav-selected, .f-thumbs__slide:hover { filter:saturate(100%) contrast(1) brightness(1); }

div.hr { background-color:#999; border:none; height:1px; margin:7px 0; }
hr { display:none; }
ul.list { list-style-type:none; padding:0; margin:0; }
ul.list li { padding-left:1rem; margin-bottom:0.7rem; }
ul.list li:before { content:"\f192"; margin-left:-1rem; position:absolute; font:400 1rem/1rem x-siter; color:#ff9b5c; margin-top:3px; }

#menu ul { list-style-type:none; padding:0; margin:0 0 11px 0; border-bottom:1px solid #999; }
#menu ul ul { margin-bottom:0; border:none; }
A { text-decoration:none; }
A:hover { text-decoration:underline; }
A.icon { margin:0 1px; }
A.icon:hover { text-decoration:none; }

A.navigation { color:#888; }
A.url { color:#888; text-decoration:none; }
A.url:before { content:"\f101"; font-family:x-siter; padding-right:0.25rem; }
A.download { color:#888; text-decoration:none; }
A.download:before { content:"\f0f6 "; font-family:x-siter; padding-right:0.25rem; }
A.back { color:#888; text-decoration:none; }
A.back:before { content:"\f100 "; font-family:x-siter; padding-right:0.25rem; }
A.prev { color:#888; text-decoration:none; }
A.prev:before { content:"\f100 "; font-family:x-siter; padding-right:0.25rem; }
A.next { color:#888; text-decoration:none; }
A.next:after { content:"\f101 "; font-family:x-siter; padding-left:0.25rem; }
A.navigation:hover,A.url:hover,A.download:hover,A.back:hover,A.prev:hover,A.next:hover { color:#f00; }
A.dir { color:#888; text-decoration:none; }
A.dir:hover { color:#888; text-decoration:none; }
A.dir:before { content:"\f114  "; font-family:x-siter; padding-right:0.25rem; }
A.dir:hover:before { content:"\f115  "; font-family:x-siter; padding-right:0.25rem; }

A.menu0 { background-color:#ddd; border-color:#999; border-width:1px 1px 0 0; border-style:solid; padding:2px 0; display:block; font-size:12px; font-weight:bold; color:#888; }
A.menu1 { background-color:#bbb; border-color:#999; border-width:1px 1px 0 0; border-style:solid; padding:2px 0; display:block; font-size:12px; font-weight:bold; color:#c00; }
A.menu0:hover,A.menu1:hover { background-color:#fff; color:#c00; text-decoration:none; }

A.submenu0 { background-color:#ccc; border-color:#999; border-width:1px 1px 0 0; border-style:solid; padding:2px 0; display:block; font-size:10px; color:#777; }
A.submenu1 { background-color:#aaa; border-color:#999; border-width:1px 1px 0 0; border-style:solid; padding:2px 0; display:block; font-size:10px; color:#c00; }
A.submenu0:hover,A.submenu1:hover { background-color:#fff; color:#c00; text-decoration:none; }


A.thread0 { font-size:10px; color:#777; font-weight:bold; margin:1px; }
A.thread1 { font-size:10px; color:#c00; font-weight:bold; margin:1px; }
A.thread0:hover,A.thread1:hover { color:#c00; text-decoration:none; }
div.thread0 { padding:2px 0; color:#c00; background-color:#e0e0e0 }
div.thread1 { padding:2px 0; color:#c00; background-color:#ccc; }
div.posting { background-color:#eeeeee; padding:2px; }
div.posting h4, div.posting .postinghead { color:#333; background-color:#ccc; display:block; margin:0; padding:1px; font-size:11px; text-transform:none; letter-spacing:0; }

#guestbookhead h2 { float:left; }
#guestbookhead a { float:right; color:#999; font-size:11px; margin:'.$xs_layout['content']['steg'].'px '.$xs_layout['content']['steg'].'px 0 0; }

.foldhead { color: var(--orange); display:block; font:400 15px/18px "Open Sans"; letter-spacing:1px; margin:0; padding:0; border-bottom:1px solid #d8d8d8; }
.foldheadhigh { color: var(--blue); display:block; font: 600 15px/18px "Open Sans"; letter-spacing:1px; margin:0; padding:0; border-bottom:2px solid #ff9b5c; }
.foldhead:hover { text-decoration:none; color:var(--blue); }
.foldhead:hover:after { content:"[+] Details"; float:right; font:400 12px/14px "Open Sans"; letter-spacing:0; color:#ff9b5c; }
.foldheadhigh:hover { text-decoration:none; color:var(--blue); }
.foldheadhigh:hover:after { content:"[–] Details"; float:right; font:400 12px/14px "Open Sans"; letter-spacing:0; color:#ff9b5c; }
.foldbody { display:none; }

.xsicon { font-family:x-siter; font-size:14px; line-height:16px; }
.xsicon2 { font:400 1.6rem/1.6rem x-siter; vertical-align:-3px; }
.quote { margin:0 0 0 16px; color:#0000BE; }
.small { font:inherit; font-size:12px; color:inherit; }
.big { font-size:14px; }
.c { color:#66f; }
.subtxt { color:#999; font-weight:bold; }
.u { text-decoration:underline; }

.zoomicon { display:block; bottom:0; left:0; width:13px; height:13px; position:absolute; background:url(images/zoom.gif) no-repeat 0 0; }

a.logo { display:block; width:189x; height:96px; background:url(images/logo.svg) no-repeat 0 0; }

.zoom { position:relative; }
.zoom::after { content:"\F002"; position:absolute; background:var(--bg); color:var(--blue); width:1.4rem; display:block; text-align:center; bottom:0; left:0; font:400 0.8rem/1.4rem x-siter; }

.zoomvid { position:relative; display:block; }
.zoomvid::after { content:"\F0A9"; position:absolute; background:var(--bg); color:#ffffffc0; width:60px; display:block; text-align:center; top:50%; left:50%; font:400 60px/0.9rem x-siter; transform:translate(-50%,-50%); border-radius:50%; padding-bottom:0.1rem; background-color:#0000008c; -webkit-backdrop-filter:blur(17.5px); }
video,img { outline:none; }

#topmenu { text-align:right; top:7em; position:absolute; right:0; font-size:1.2em; }
#topmenu ul { list-style-type:none; }
#topmenu ul li { display:inline-block; position;relative; margin-top:1em; }
#topmenu ul li+li::before { content:"|"; text-align:center; width:0.92rem; display:inline-block; }
A.topmenu0 { position:relative; color:var(--menu0); font-weight:700; }
A.topmenu1 { position:relative; color:var(--menu1); font-weight:700; }
A.topmenu0:hover { text-decoration:none; }
A.topmenu1:hover { text-decoration:none; }
A.topmenu0:hover::before,A.topmenu1::before { content:""; background:var(--menuh); height:4px; width:100%; position:absolute; top:-6px; }

#menu { position:absolute; left:0; top:148px; width:200px; }
#maincontent { position:absolute; left:216px; top:148px; background-color:#fff; border:1px solid #999; width:'.ct_width($xs_layout['content']['spalten'],'content',2).'px; }
#maincontent > section { padding:'.$xs_layout['content']['steg'].'px 0 0 '.$xs_layout['content']['steg'].'px; }
#marginal { position:absolute; left:890px; top:148px; background-color:#fff; border:1px solid #999; width:'.ct_width($xs_layout['margin']['spalten'],'margin',1).'px; padding:'.$xs_layout['margin']['steg'].'px 0 0 '.$xs_layout['margin']['steg'].'px; }
#banner { position:absolute; left:216px; top:0; height:120px; width:640px; }
#subnavi { position:absolute; right:0; bottom:2em; font-size:1.2em; }
#searchsubmit { font-family:x-siter; font-size:20px; border:none; background:none; outline:none; }
#searchsubmit:focus,#searchsubmit:hover { color:red; }

#burgermenu { position:fixed; top:0; right:max(-300px,-100vw); width:min(300px,100vw); height:100vh; }
#mobilemenu { overflow-y:scroll; height:100%; padding:20px; box-sizing:border-box; transition:transform 0.3s ease-in-out,box-shadow 0.3s ease-in-out; transform:translateX(0%); background:#fff; box-shadow:0 0 0 #000f; }
#burger { width:31px; height:31px; position:absolute; left:-51px; top:20px; display:none; }
#burger div { width:27px; height:3px; position:absolute; background:var(--menu0); }
#burger:hover div { background:var(--menuh); }
#burger .line1 { top:7px; left:2px; transition:transform 0.3s ease-in-out; transform-origin:5.05px 5px; }
#burger .line2 { top:14px; left:2px; transition:opacity 0.3s ease-in-out; }
#burger .line3 { top:21px; left:2px; transition:transform 0.3s ease-in-out; transform-origin:5.05px -2px; }
body.openmenu #burger .line1 { transform:rotateZ(45deg); }
body.openmenu #burger .line2 { opacity:0; }
body.openmenu #burger .line3 { transform:rotateZ(-45deg); }
#burgerbuttons ul { list-style:none; display:flex; gap:1em; margin:0 0 20px; padding:0; }
#burgerbuttons a { color:var(--menu0); }
#burgerbuttons a:hover { color:var(--menuh); text-decoration:none; }
#burgerbuttons a.active { color:var(--menu1); }
#burgermenucontent ul { margin:50px 0; list-style:none; padding:0; display:flex; gap:20px; flex-direction:column; font-size:1.6em; }

.block { display:block; }
.fileselection { margin-left:32px; display:none; }
.language a  { display:block; float:left; padding:0; margin-right:8px; font-weight:bold; font-size:11px;  line-height:11px; color:#888; }
.language a:hover { color:#c00; }
.language span  { display:block; float:left; padding:0; margin-right:8px; font-weight:bold; font-size:11px;  line-height:11px; color:#c00; }

.galnav { position:relative; margin-top:4px; }
.galnav a { display:block; background:var(--bg); padding:0; margin:0 7px 0 0; width:8px; height:8px; float:left; border-radius:4px; }
.galnav a:hover, .galnav a.activeSlide { background:#000; }


.contactform { margin-bottom:1em; }
.contactform span {font-size:1em;display: block; color:var(--text); }
.contactform .full { width:100%; box-sizing:border-box; font-size:1em; line-height:1.8em; outline:none; border-style:solid; border-width:0 0 2px; border-color:#bbb; background:#f9f9f9; padding:0 4px; color:var(--highlight); }
.contactform .full:focus { border-color:#000; }
.contactform label { font-size:1em; line-height:1.4em;}
.contactform input[type=submit] { color:var(--text); font-weight:bold; font-size:1em; line-height:1.4em; outline:none; border-style:solid; border-width:4px 0 0; border-color:var(--orange); background:none; padding:0 4px; }
.contactform input[type=submit]:hover { color:#000; }
.contactform.right { text-align:right; }
.contactform.error span { color:var(--orange); }



.edit_wrapper { margin:0; padding:0; overflow:hidden; }
.edit_wrapper div, .edit_wrapper textarea { width:100%; box-sizing:border-box; }

span.playbutton { position:absolute; width:64px; height:64px; margin:-32px 0 0 -32px; top:50%; left:50%; background:url(images/video_play_button.png) no-repeat 0 0; }
span.playbutton:hover { background-position:0 -64px; }

sub,sup { line-height:1px; font-size:0.6em; font-weight:700; }
div.markup { border:1px inset #eee; background-color:#ddd; padding:3px 0; }
div.markup a { border:1px outset #eee; padding:2px; margin:0; color:#444; text-decoration:none; cursor:pointer; }
div.markup a:hover { border:1px inset #eee; background-color:#ccc; text-decoration:none; }

.cttadmin div.markup { border:1px inset #eee; background-color:#ddd; padding:3px 0; }
.cttadmin div.markup a { border:1px outset #eee; padding:2px; margin:0; color:#444; }
.cttadmin div.markup a:hover { border:1px inset #eee; background-color:#ccc; }
.cttadmin div.imgpos { border:none; background:none; padding:0; }
.cttadmin div.imgpostd { border:none; background:#e0e7ff; padding:0; } /* Farbe 50% zwischen Content und adminbox */

.ctradmin div.markup { border:1px inset #eee; background-color:#ddd; padding:3px 0; }
.ctradmin div.markup a { border:1px outset #eee; padding:2px; margin:0; color:#444; }
.ctradmin div.markup a:hover { border:1px inset #eee; background-color:#ccc; }
.ctradmin div.imgpos { border:none; background:none; padding:0; }
.ctradmin div.imgpostd { border:none; background:#e0e7ff; padding:0; } /* Farbe 50% zwischen Content und adminbox */

.cttadmin span { display:block; height:17px; border-bottom:1px solid #999; display:block; background-color:#fff; margin-bottom:1ex; padding-top:1px; }
.cttadmin span a { display:block; height:16px; float:left; border-width:1px 1px 0 1px; border-style:solid; border-color:#999; background-color:#bbb; color:#444; text-decoration:none; margin:0 2px; padding:0 2px; cursor:pointer; }
.cttadmin span a:hover { background-color:#ccc; }
.cttadmin span a.active { background-color:#ccf; color:#000; padding-bottom:1px; }
.cttadmin span a input { margin:0 2px; padding:0; font-size:10px; display:block; float:left; }

.ctradmin span { display:block; height:17px; border-bottom:1px solid #999; display:block; background-color:#fff; margin-bottom:1ex; padding-top:1px; }
.ctradmin span a { display:block; height:16px; float:left; border-width:1px 1px 0 1px; border-style:solid; border-color:#999; background-color:#bbb; color:#444; text-decoration:none; margin:0 2px; padding:0 2px; cursor:pointer; }
.ctradmin span a:hover { background-color:#ccc; }
.ctradmin span a.active { background-color:#ccf; color:#000; padding-bottom:1px; }
.ctradmin span a input { margin:0 2px; padding:0; font-size:10px; display:block; float:left; }

.adminbox span.blind { color:#9e9ef0; display:inline; background:none; border:none; }
.adminbox span.info { color:#000; display:inline; background:none; border:none; }

abbr.info, abbr.blind, span.blind { display:block; float:left; height:18px; margin:1px 0 1px 0; padding:0 4px; font-size:10px; line-height:18px; border-style:solid; border-width:1px; border-color:#fff  #777 #777 #fff; color:#777; background-color:#95a0f0; background-image:url(images/admin0.gif); font-family:Verdana; }
abbr.info { color:#000; }
.ctadmin i { color:red; }
.clear  { clear:both; }
.ctclear { clear:both; }

.ctrl_prev { position:absolute; left:0; width:32px; z-index:1000; height:100%; display:none; }
.gal_prev { position:absolute; left:0; width:32px; height:100%; background:#fff url(images/banner-prev.gif) no-repeat 50% 50%; opacity:0.2; filter:alpha(opacity=20); }
.ctrl_next { position:absolute; right:0; width:32px; z-index:1000; height:100%; display:none; }
.gal_next { position:absolute; right:0; width:32px; height:100%; background:#fff url(images/banner-next.gif) no-repeat 50% 50%; opacity:0.2; filter:alpha(opacity=20); }
.gal_ct { position:absolute; bottom:0; left:0; background:#fff; opacity:0.6; filter:alpha(opacity=60); width:100%; }
.gal_ct2 { padding:10px 32px; }
.comment_delete { background:red; padding:6px 10px 6px 6px; border-radius:15px; margin:10px 0 0 0; display:inline-block; font-family:Verdana; color:#fff; font-weight:bold; line-height:18px; }
.comment_publish { background:green; padding:6px 10px 6px 6px; border-radius:15px; margin:10px 0 0 0; display:inline-block; font-family:Verdana; color:#fff; font-weight:bold; line-height:18px; }
.comment_go { background:#333333; float:right; padding:6px 15px; border-radius:15px; margin:10px 0 0 0; display:none; font-family:Verdana; color:#fff; font-weight:bold; line-height:18px; border:none; }

.prjmenu { display:block; }
.prjfilters { --filtergap:0.92rem; display:flex; flex-wrap:wrap; align-items:flex-start; gap:0.7em var(--filtergap); font-size:1em; overflow:hidden; flex-direction:column; }
.prjfilter { appearance:none; border:0; background:transparent; color:var(--menu0); font:inherit; font-weight:700; line-height:1.2; padding:0.5em 0 1em 0; margin:0; cursor:pointer; text-align:left; position:relative; }
.prjfilter::before { content:"|"; color:var(--menu0); display:block; font-weight:400; position:absolute; left:calc(var(--filtergap) * -0.5); top:0.5em; transform:translateX(-50%); }
.prjfilter:first-child::before { content:none; }
.prjfilter b { position:relative; display:inline-block; }
.prjfilter:hover { color:var(--menu0); }
.prjfilter.active { color:var(--menu1); }
.prjfilter:hover b::before, .prjfilter.active b::before { content:""; background:var(--menuh); height:4px; width:100%; position:absolute; top:-0.5em; left:0; }
.prjlist { list-style-type:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(var(--cards),1fr); width:100%; }
.prjlist li { display:inline-block; vertical-align:top; width:100%; }
.prjlist li:hover { z-index:10; position:relative; }
.prjlist a { position:relative; display:block; width:100%; transition:transform 0.25s ease-in-out; color:inherit; }
.prjlist a:hover { transform:scale(1.2); box-shadow:#0006 0 0 20px; }
.prjlist a:hover::after { box-shadow:#0006 0 0 20px; opacity:1; }
.prjlist a::after { pointer-events:none; content:attr(data-name); display:block; background:#fff; width:100%; position:absolute; opacity:0; transition:opacity 0.25s ease-in-out; padding:0.3em 0.5em 0.5em; line-height:1.3em; box-sizing:border-box; font-size:0.8em; }
.prjlist a:not([data-name])::after, .prjlist a[data-name=""]::after { content:none; }
.prjlist img { display:block; width:100%; filter:saturate(0) contrast(0.5) brightness(1.4); transition:filter 0.25s ease-in-out; }
.prjlist a:hover img { filter:saturate(1.2) contrast(1) brightness(1); }

aside { position:absolute; right:0; width:30%; background:#7776; display:flex; flex-wrap:wrap; gap:var(--gap); padding:var(--gap); }

.cttbox, .ctlbox, .ctrbox, .ctbbox { --spalten:6; flex-basis:calc( (100% + var(--gap)) / 6 * var(--spalten) - var(--gap) ); width:100%; }
.mgbox { --spalten:2; flex-basis:calc( (100% + var(--gap)) / 2 * var(--spalten) - var(--gap) ); }
.cttcol, .ctlcol, .ctrcol, .ctbcol { width:100%; }

.cttbox1, .ctrbox1, .ctbbox1 { --spalten:1; }
.cttbox2, .ctrbox2, .ctbbox2 { --spalten:2; }
.cttbox3, .ctrbox3, .ctbbox3 { --spalten:3; }
.cttbox4, .ctrbox4, .ctbbox4 { --spalten:4; }
.cttbox5, .ctrbox5, .ctbbox5 { --spalten:5; }
.cttbox6, .ctrbox6, .ctbbox6 { --spalten:6; }

.ctlbox1, .ctlbox2, .ctlbox3, .ctlbox4, .ctlbox5, .ctlbox6 { --spalten:6; }

.mgbox1 { --spalten:1; }
.mgbox2 { --spalten:2; }

.cttadmin, .ctladmin, .ctradmin, .ctbadmin, .mgadmin { overflow:hidden; background-color:var(--adminbg); border-color:var(--adminborder); border-width:1px 0 1px 0; border-style:solid; padding:0; line-height:18px; }

.xs_icon_facebook::before { content:"\f09a"; }
.xs_icon_linkedin::before { content:"\f0e1"; }
.xs_icon_instagram::before { content:"\f16d"; }
.xs_icon_xing::before { content:"\f168"; }
.xs_icon_e600::before { content:"\e600"; }
.xs_icon_e601::before { content:"\e601"; }
.xs_icon_e602::before { content:"\e602"; }
.xs_icon_f002::before { content:"\f002"; }
.xs_icon_f007::before { content:"\f007"; }
.xs_icon_f0c0::before { content:"\f0c0"; }

a.admin { display:block; float:left; height:18px; margin:1px 0; padding:0 4px; font-size:10px; line-height:18px; border-style:solid; border-width:1px; border-color:#fff #777 #777 #fff; color:#000; background-color:#95a0f0; background-image:url(images/admin0.gif); font-family:Verdana; }
a.admin:hover { display:block; float:left; height:18px; margin:1px 0; padding:0 4px; font-size:10px; line-height:18px; border-style:solid; border-width:1px; border-color:#666 #eee #eee #666; color:#fff; background-color:#95a0f0; background-image:url(images/admin1.gif); text-decoration:none; }
.submit { display:block; float:left; height:20px; margin:1px 0; padding:0 4px; font-size:10px; line-height:18px; border-style:solid; border-width:1px; border-color:#fff #777 #777 #fff; color:#000; background-color:#95a0f0; background-image:url(images/admin0.gif); font-family:Verdana; }
.submit:hover { display:block; float:left; height:20px; margin:1px 0; padding:0 4px; font-size:10px; line-height:18px; border-style:solid; border-width:1px; border-color:#666 #eee #eee #666; color:#fff; background-color:#95a0f0; background-image:url(images/admin1.gif); text-decoration:none; }
.search { display:block; float:left; margin:1px; padding:0 2px; font-size:10px; line-height:18px; font-family:Verdana; border-style:solid; border-width:1px; border-color:#888 #eee #eee #888; color:#000; background-color:#95a0f0; background-image:url(images/admin2.gif); text-decoration:none; }

@media (max-width:800px) {
	.ctrbox1, .ctrbox2, .ctrbox3, .ctrbox4, .ctrbox5, .ctrbox6 { --spalten:6; }
/* 
	.prjmenu { --icons:8; }
	.prjlist.open { --r:var(--r8); }
	.prjlist.morethan8:not(.open) { overflow:unset; aspect-ratio:calc(var(--icons) / 0.75); overflow-y:hidden; }
	.prjlist.morethan8:not(.open) a { pointer-events:none; }
	.prjmenu span.morethan8:not(.open)::after { content:''; }
	.prjmenu span.morethan8.open::after { content:''; }
 */
}

@media (max-width:740px) {
/* 
	.prjmenu { --icons:6; }
	.prjlist.open { --r:var(--r6); }
	.prjlist.morethan6:not(.open) { overflow:unset; aspect-ratio:calc(var(--icons) / 0.75); overflow-y:hidden; }
	.prjlist.morethan6:not(.open) a { pointer-events:none; }
	.prjmenu span.morethan6:not(.open)::after { content:''; }
	.prjmenu span.morethan6.open::after { content:''; }
 */
}

@media (max-width:680px) {
	body {
		grid-template:
			"head" 15em
			"top" min-content
			"right" min-content
			"left" 1fr
			"bottom" min-content / minmax(0,1fr);
	}
	body.panel {
		grid-template:
			"head" 15em
			"top" min-content
			"left" min-content
			"right" 1fr
			"bottom" min-content / minmax(0,1fr);
	}
	body.panel h3 { margin-bottom:1em; }
	.ctlbox3, .ctrbox3 { --spalten:3; }
/* 
	.prjmenu { grid-template-columns:1fr; --icons:8; }
	.prjlist.open { --r:var(--r8); }
	.prjlist.morethan8:not(.open) { overflow:unset; aspect-ratio:calc(var(--icons) / 0.75); overflow-y:hidden; }
	.prjlist.morethan8:not(.open) a { pointer-events:none; }
	.prjmenu span.morethan8:not(.open)::after { content:''; }
	.prjmenu span.morethan8.open::after { content:''; }
 */
	.prjfilters { flex-direction:row; }
	#content_left { margin-bottom:1em; }
	#content_right { margin-bottom:1em; }

	#burger { display:block; }
	#buttons { display:none; }
	#topmenu { display:none; }
	body.openmenu { --pagebg:#ddd; }
	body.openmenu #mobilemenu { transform:translateX(-100%); box-shadow:0 0 10px #0003; }
}

@media (max-width:600px) {
	.cttbox1, .cttbox2, .cttbox4, .cttbox5 { --spalten:6; }
	.ctbbox1, .ctbbox2, .ctbbox4, .ctbbox5 { --spalten:6; }
/* 
	.prjmenu { --icons:7; }
	.prjlist.open { --r:var(--r7); }
	.prjlist.morethan7:not(.open) { overflow:unset; aspect-ratio:calc(var(--icons) / 0.75); overflow-y:hidden; }
	.prjlist.morethan7:not(.open) a { pointer-events:none; }
	.prjmenu span.morethan7:not(.open)::after { content:''; }
	.prjmenu span.morethan7.open::after { content:''; }
 */
}

@media (max-width:512px) {
	.cttbox3, .ctlbox3, .ctrbox3, .ctbbox3 { --spalten:6; }
	#buttons { text-align:right; line-height:1.4em; }
	#buttons ul { display:block; }
/* 
	.prjmenu { --icons:6; }
	.prjlist.open { --r:var(--r6); }
	.prjlist.morethan6:not(.open) { overflow:unset; aspect-ratio:calc(var(--icons) / 0.75); overflow-y:hidden; }
	.prjlist.morethan6:not(.open) a { pointer-events:none; }
	.prjmenu span.morethan6:not(.open)::after { content:''; }
	.prjmenu span.morethan6.open::after { content:''; }
 */
}

@media only screen and (max-device-width:480px){
	* { -webkit-text-size-adjust:none; }
}


@media only screen and (-webkit-min-device-pixel-ratio:2) {
	.zoomicon { background:url(images/zoom_2x.gif) no-repeat 0 0; background-size:13px 13px; }
	abbr.blind, span.blind { background-image:url(images/admin0_2x.gif); background-size:32px 18px; }
	a.admin { background-image:url(images/admin0_2x.gif); background-size:32px 18px; }
	a.admin:hover { background-image:url(images/admin1_2x.gif); background-size:32px 18px; }
	.submit { background-image:url(images/admin0_2x.gif); background-size:32px 18px; }
	.submit:hover { background-image:url(images/admin1_2x.gif); background-size:32px 18px; }
	.search { background-image:url(images/admin2_2x.gif); background-size:32px 18px; }
}

@font-face {
	font-family:'x-siter';
	src: url('fonts/x-siter.eot');
	src: url('fonts/x-siter.woff') format('woff'),url('fonts/x-siter.svg#x-siter') format('svg'),url('fonts/x-siter.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}