/*@viewport{width:device-width;zoom:1}*/
*{box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif,Verdana;margin:0;padding:0}
img{border:0;max-width:100%;height:auto}
#adr,#logo{position:absolute}
#adr{margin:4.5em 0 1em 3.5em;}
#logo{width:150px;}
#b{margin:3em auto;max-width:55em}
#k{padding:0.5em 0 0;margin:0em auto;max-width:1200px;}
#suche{clear:right;margin:1.5em 0;line-height:2.5em}
a,.rck:hover,.vor:hover,.xrck:hover,.xvor:hover,.rck a,.vor a,.xrck a,.xvor a,.{text-decoration:none}
a{text-decoration:none;color:#039}
a:hover{text-decoration:underline;color:#03C}
#adr{text-align:left}
.lnav{text-align:right}
.rck,.vor,.xrck,.xvor{text-align:center}
.rck,.xrck,.xvor,.fl,.ff{float:left}
.fl{padding:0 1em 1em 0}
#langnav,#suche,.vor{float:right}
footer,.w,.cl,.clearfix:after{clear:both}
.lnav,input[type=submit],.rck,.vor,.xrck,.xvor{-webkit-appearance:none;-moz-appearance:none;-webkit-appearance:none;appearance:none;}
.lnav{border:1px solid #ccc;cursor:pointer}
h2,h3{margin-top:2em}
#f{padding-top:1em}
.rck,.vor,.xrck,.xvor{padding:0.5em 2em}
h1,h2,h3{color:#333}
h1{font-size:170%;margin:0 0 1em}
h2{font-size:150%}
h3{font-size:125%}
#adr{font-size:80%}
.rck,.vor,.xrck,.xvor,INPUT,SELECT,TEXTAREA{font-size:90%}
.ff{padding-right:3em}
SELECT{background-color:#fff}
,input,TEXTAREA,SELECT{border:1px solid #999}
input[type=submit]{height:2em;padding:0.25em}
input{height:2em}
SELECT{width:12em;height:2em}
.rck,.vor,.xrck,.xvor,.rck a,.vor a,.xrck a,.xvor a,.rck:hover,.vor:hover,.xrck:hover,.xvor:hover{color:#000}
.rck,.vor,.xrck,.xvor{background-color:#CCC;border:1px outset #aaa;}
.rck a,.vor a,.xrck a,.xvor a{display:block}
.rck:hover,.vor:hover,.xrck:hover,.xvor:hover{background-color:#FF6;border:1px outset #F93;cursor:pointer}
#gal{width:600px}
.rck,.vor,.xrck,.xvor{font-weight:bold}
.rck,.vor,.xrck,.xvor{border-radius:0.25em;}
.xvor{margin-left:2em}
.rck::before,.xrck::before{content:"zurück"}
.vor::after,.xvor::after{content:"weiter";}
#f{margin:5em 0;padding:1em 0;border-top:3px solid #ccc}
#f ul li{list-style:none}
#f ul {padding:0;margin:0}
/* =========================================================
   NAVIGATION (NEU) – Desktop first
========================================================= */
#navi{width:100%;background:#ccc;position:relative;z-index:1000;clear:both}
#navi .navbar{max-width:1200px;margin:0 auto;position:relative}
#navi ul{list-style:none;margin:0;padding:0}
#navi a,#navi a:link,#navi a:visited{color:#000;text-decoration:none}
#navi a:hover,#navi a:active{color:#00f;text-decoration:underline}
#navi ul.menu{display:flex;justify-content:center;align-items:center}
#navi ul.menu>li>a,#navi ul.menu>li>.menu-label{display:block;padding:.9em 1em;white-space:nowrap;color:#444}
#navi ul.menu>li:hover>a,#navi ul.menu>li>a:hover{background:#fff;color:#00f;text-decoration:underline}
#navi ul.menu>li:hover>.menu-label{background:#fff;color:#000;text-decoration:none}
#navi input[type=checkbox],#navi .toggle-main,#navi .toggle-close{display:none}
#navi .menu-label{cursor:pointer}
#navi li.has-mega>ul{display:none;position:absolute;top:100%;left:0;width:100%;background:#fff;border:2px solid #ccc;box-sizing:border-box}
#navi li.has-mega:hover>ul{display:block}
#navi .mega-inner{display:flex;gap:1.25em;padding:1.4em 1em 2em 2em;align-items:flex-start}
#navi .mega-inner-4 .mega-col{flex:0 0 calc(25% - .95em)}
#navi .mega-col{flex:1 1 0;min-width:0;text-align:left}
#navi .mega-head,#navi .mega-subhead{font-weight:700}
#navi .mega-head{margin-bottom:.45em}
#navi .mega-subhead{margin:1.5em 0 .45em}
#navi .mega-list{margin:0;padding:0;list-style:none;text-align:left}
#navi .mega-list li a{display:block;padding:.32em 0;white-space:normal;line-height:1.25;font-size:.95em}
#navi .mega-columns{columns:2;column-gap:1em}
#navi .mega-columns li{break-inside:avoid}
#navi .mega-columns-4{columns:4}
#navi .mega-sep{border:0;border-top:1px solid #d7d7d7;margin:.9em 0 .7em}

/****** bis 900 Pixel Breite *******/
@media all and (max-width:1000px) {
body{margin:0.5em;}
#b{margin:2em 0.5em;max-width:900px}
input.textarea{font-size:100%}
input.select{font-size:125%}
input.select{-webkit-appearance:none}
#f,.liste{line-height:1.75em}

/* =========================================================
   NAVIGATION (NEU)  mobil
========================================================= */
#navi .navbar{width:100%}
#navi #drop~ul.menu{display:none}
#navi ul.menu{display:block;margin:0}
#navi ul.menu>li{display:block}
#navi ul.menu>li>a,#navi ul.menu>li>.menu-label{white-space:normal}
#navi li.has-mega:hover>ul{display:none}
#navi li.has-mega>ul{position:static;top:auto;left:auto;width:100%;min-width:0;border:0}
#navi li.has-mega>input[type=checkbox]:checked~ul{display:block}
#navi .mega-inner,#navi .mega-inner-4{display:block}
#navi .mega-col,#navi .mega-inner-4 .mega-col{flex:none;width:100%;min-width:0}
#navi .mega-columns,#navi .mega-columns-4{columns:1}
#navi .toggle-main{display:block;padding:.9em 1em;line-height:1.2}
#navi .toggle-close{display:none;position:absolute;top:0;right:0;padding:.9em 1em;font-size:1.4rem;line-height:1;cursor:pointer;z-index:1002}
#navi #drop:checked~ul.menu{display:block;position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - 3.1em);overflow-y:auto;z-index:1001;background:#FFF}
#navi #drop:checked~.toggle-close{display:block}
#navi #drop:checked~.toggle-main{display:none}
}

/*********** bis 600 Pixel Breite ***********/
@media all and (max-width:600px) {
#suche{padding-top:3em}
.liste,.li-eng{padding-left:1em}
#gal{width:100%}
h1{font-size:150%;margin:0 0 1em}
h2{font-size:125%;margin-top:1em}
h3{font-size:110%;margin-top:0em}
#gal{text-align:left}
.rck{float:left;}
.vor,.xvor{float:right;}
.rck,.vor,.xrck,.xvor{width:45%}
.rck::before,.xrck::before{content:"<<"}
.vor::after,.xvor::after{content:">>"}
}