html {height:100%;}
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; }
body {
margin: 0; padding: 0 0 80px 0;
height:100%;
background: #f1f1f1 url(img/bodybg.gif) fixed top center;
}
.wrapper {
max-width: 1100px;
width: 100%;
min-height:101%;
margin: 30px auto;
border-radius: 30px 30px 50px 50px;
box-shadow: 0px 20px 40px -10px rgba(0, 0, 0, 0.4);
background: #f1f1f1 url(img/paperbg.jpg);
overflow-y:hidden;
}
.header { width: 100%; padding:5% 0 5% 0; text-align:center; line-height:100%; }
.header img {max-width:70%; opacity:0.2;}
.header a.header-logo span {display:block; padding:20px 0 30px 0; font-size:3em;}
.footer { width: 100%; text-align:center; line-height:120%; padding:0 0 20px 0; }
.footer .page-footer {padding:10px 0 10px 0; }
.footer img {max-width:30%; opacity:0.1;}
.footer .credits {font-size:12px;}
.menubox {padding-bottom:30px;}
.contentbox {margin: 30px 3%; }
.contentnarrow {width:64%; float:left; }
.contentwide {width:100%; float:none; }
.sidebar {width:30%; margin-top:25px; font-size: 0.92em; float:right; background: rgba(160,160,120,0.2); border: 1px solid #fff; border-radius: 10px ;}
.sidebar .inner {margin:10px;}
.top_content, .bottom_content {clear:both; float:none;}
/***********************************
header-menu
************************************/
a#mobilemenu {
display: none;
}
a#mobilemenu span {display:block; padding: 10px 15px ; font-weight: bold;}
/* Link Formatting */
ul#nav {
list-style-type: none;
/* *zoom: 1; */
margin: 0 auto; padding: 0;
position: relative;
width:100%;
/*2026*/
display: flex; /* Macht alle li.lev0 gleich hoch */
list-style: none;
align-items: stretch; /* Standard, sorgt für identische Hoehe */
}
ul#nav li {
list-style-type: none;
list-style-image: none;
position: relative;
font-weight: normal;
margin: 0; padding: 0;
}
ul#nav li.lev0 {
/*2026*/
flex: 1; /* Alle li haben die gleiche Breite */
display: flex; /* Erlaubt dem darin zu wachsen */
}
ul#nav li.menu-first {border-left: none;}
ul#nav li li {background-color:#e9e9e9; width:100%;}
#nav li a {
text-decoration: none;
font-weight: bold;
line-height:120%;
padding: 16px 0 22px 0;
text-align:center;
}
#nav li.lev0 > a {
display: flex;
flex: 1; /* Füllt die volle Hoehe des li aus */
flex-direction: column;
align-items: center; /* X-Achse zentriert */
justify-content: center; /* Y-Achse zentriert */
padding: 12% 5px 14% 5px; /* Platzhalter für die Hintergrundbilder oben/unten */
font-size:1.2em;
font-weight: normal;
/* Multiple Backgrounds: Bild 1 oben, Bild 2 unten */
background-image: url('img/menu-top-40.png'), url('img/menu-bottom-40.png');
background-position: center top, center bottom;
background-repeat: no-repeat, no-repeat;
background-size: 60%, 60%; /* Oder feste px-Werte */
}
/*==============================================*/
/* Hover Formatting */
#nav li a:hover, #nav li a:focus, #nav li a:active, #nav li a.active, #nav a.menu-current, #nav a.menu-parent {
color: var(--color2);
}
/* 2 level */
#nav li ul {
background: none;
width: 120%;
margin-left: -10%; padding:0;
position: absolute;
bottom:0;
box-shadow: 0px 12px 10px -3px rgba(0, 0, 0, 0.3);
opacity:0.1;
transition: margin-top 0, opacity 1s;
}
#nav li ul li {
font-weight: normal;
margin: 0;
padding: 0;
border-bottom: 1px solid #999;
border-left: none;
}
#nav li ul li a {
display:block;
font-weight: normal;
padding: 4px 0;
background-image: none;
text-align:center;
}
#nav li ul li.ultop { height: 25px; background: transparent url(img/ultop.png) no-repeat center top}
/* 2 level hover */
#nav li ul a:hover, #nav li ul a.menu-current { background-color: #fff; color: #000;}
/* Show/Hide */
#nav li ul, #nav li ul ul, #nav li ul ul ul, #nav li:hover ul, #nav li:hover ul ul, #nav li:hover ul ul ul {
left:-9999px;
opacity:0.1;
transition:0.5s opacity;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.isopened ul, #nav li.tabselected ul {
top:50px;
left:0;
opacity:1;
}
#nav li li:hover ul {
top:10px; }
/*
#nav li ul ul { display: none;}
#nav li:hover ul ul {display: none;}
#nav li:hover>ul, #nav li li:hover>ul {display: block; z-index: 1000;}
*/
/* 3 Ebene */
#nav li ul li ul {
margin: -40px 0 0 70%;
padding:0;
z-index: 9999;
width: 11em
}
#nav li ul li ul li {width: 100%;}
/* Positioning hover */
#nav li {position: relative;}
#nav li:hover {
z-index: 10000;
white-space: normal;
}
#nav2, #nav2closer, #nav2opener {display:none;}
/* Menü 2 (Impressum, Datenschutz) */
#nav-footer {text-align:center}
#nav-footer a {display: inline-block; padding: 1px 10px; border-left: 1px solid var(--color1); font-size: 0.85rem; text-decoration: none; opacity: 0.9;}
#nav-footer a:first-child {border-left: none;}
#nav-footer a:hover {opacity: 1; }
#go-up {
position: fixed;
bottom: 20px; /* Abstand vom unteren Rand */
right: 20px; /* Abstand vom rechten Rand */
z-index: 1000; /* Damit er über anderen Elementen schwebt */
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
cursor: pointer;
}
#go-up.show {
opacity: 1;
visibility: visible;
}
#go-up:hover {
bottom: 25px;
}
#go-up img {
display: block;
width: 30px; /* Deine gewünschte Größe */
height: auto;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media screen and (max-width: 600px) {
.wrapper { width: 90%; margin: 20px auto;}
.menubox {display:none;}
.contentbox {margin: 0 3%; }
.contentnarrow, .contentwide, .sidebar {width:100%; float:none; }
.header a.header-logo span {font-size:1.7em;}
/*
h1 { font-size: 1.8em;}
h2 { font-size: 1.5em;}
h3 { font-size: 1.3em; }
*/
#nav2opener {display:block; padding:10px 0; margin-top:-30px; font-size:18px; text-decoration:underline; text-align:center; }
#nav2closer {position:absolute; top: 0px; }
#nav2closer {display:none; width:100%; height:200%; z-index:8888; top: 0; left: 0; background: rgba(0,0,0,0.2); }
#nav2 {
position:fixed;
top:0; left: -300px;
height:100vh;
overflow-y: auto;
z-index:9000;
width:260px;
background: #fff;
box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.3);
transition:1s left;
display:block;
font-size:1.2em;
}
body.nav2open #nav2 {left: 0; }
body.nav2open #nav2closer {display:block;}
ul#nav2ul, ul#nav2ul ul, ul#nav2ul ul li {
display:block;
margin: 0 0 0 0;
padding: 0 0 0 0;
list-style-type: none;
list-style-image: none;
}
/*
#nav2ul>ul {padding-top:50px;}
#nav2ul, #nav2ul ul, #nav2ul ul li {
float: left;
width:100%;
margin: 0; padding: 0;
list-style-type: none;
list-style-image: none;
}
#nav2ul li.lev0 a {
}
*/
#nav2ul li a {
display:block;
padding: 3px 0 8px 0;
border-bottom: 1px solid #ddd;
text-align:center;
}
#nav2ul li a.aeb0 {
font-size: 1.2em;
padding: 30px 0 5px 0;
/* Multiple Backgrounds: Bild 1 oben, Bild 2 unten */
background-image: url('img/menu-top-40.png');
background-position: center 5px;
background-repeat: no-repeat;
background-size: 50%; /* Oder feste px-Werte */
}
#nav2ul li.lev2 a { font-size:0.9em; padding: 1px 0 1px 0;}
#nav2ul li a.menu-current { background-color: #fff; font-weight:bold; color: var(--color2);}
#go-up { right: 10px; }
#go-up img {width: 20px; }
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media screen and (max-width: 440px) {
}