body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } /* Klasse für JS-Zuordnung der Reiterfarbe bei Roll-Over innerhalb Unternavigation ======================= */ .hover { } /* Button ======================= */ .btn { font-size: 1.5em; position: absolute; z-index: 100; left: 3%; top: 0; line-height: 70px; color: #660000; } .btn:hover { color: #C00; } .btn i { margin: 0 0 0 8px; } /* Hauptnavigation ======================= */ nav { position: absolute; left: 0; top: 0; width: 100%; transition-duration: 0.5s; } nav ul { list-style: none; margin: 0; padding: 0; } #nav { position: absolute; top: 70px; left: 0; z-index: 10; width: 70%; min-width: 18em; margin-right: 30%; text-align: left; } #nav a { height: 0; line-height: 0; display: block; border-bottom-width: 0; padding: 0 10px 0 4%; overflow: hidden; color: #660000; text-decoration: none; } #toggle { position: absolute; top: -9999px; left: -9999px; } #toggle:checked ~ #nav { z-index: 101; -webkit-box-shadow: 0px 10px 15px -5px rgba(25,0,0,0.7); -moz-box-shadow: 0px 10px 15px -5px rgba(25,0,0,0.7); -ms-box-shadow: 0px 10px 15px -5px rgba(25,0,0,0.7); -o-box-shadow: 0px 10px 15px -5px rgba(25,0,0,0.7); box-shadow: 0px 10px 15px -5px rgba(25,0,0,0.7); } #toggle:checked ~ #nav a { height: 39px; line-height: 40px; background-color: #fff; border-bottom: 1px solid #e0cccc; position: relative; z-index: 2; } #toggle:checked ~ #nav a:hover { color: #C00; transition-duration: 0.15s; } #toggle:checked ~ #nav #close { position: relative; z-index: 0; } #toggle:checked ~ #nav #close label { background: transparent; border-bottom: 0; position: absolute; left: 0; right: -11%; top: -100em; bottom: -100em; z-index: 0; } #toggle:checked ~ nav #nav li.current a { color: #C00; } #nav li.current a { color: #C00; } .zwischentitel { display: none; } /* Unternavigation ======================= */ #nav .contains-sub i { line-height: 40px; float: right; padding-right: 2%; } #nav .submenu a { padding-left: 4%; } #toggle:checked ~ #nav .submenu li, #toggle:checked ~ #nav .submenu a { height: 0; line-height: 0; border-bottom-width: 0; } #toggle:checked ~ #nav .submenu a { background-color: #ffefe5; } #toggle:checked ~ #nav .submenu.open li, #toggle:checked ~ #nav .submenu.open a { height: 39px; line-height: 40px; color: #660000; border-bottom: 1px solid #e0cccc; } #toggle:checked ~ #nav .submenu a:hover { color: #C00; } #toggle:checked ~ #nav .submenu .zwischentitel { display: block; position: relative; z-index: 1; padding-left: 4%; background-color: #ffefe5; font-weight: 700; } #toggle:checked ~ #nav .submenu .zwischentitel2 { padding-left: 0; } /* ======================================= Responsive ======================================= */ @media screen and (min-width: 769px) { .btn { display: none; } /* Hauptnavigation ======================= */ nav { width: auto; left: 2%; } #nav { top: 0; left: -0.5em; width: 100%; } #nav a { padding: 0 0.5em 0 1em; transition-duration: 0.5s; } #nav > li { position: relative; } #toggle:checked ~ #nav, #nav { position: relative; z-index: 10; list-style: none; text-align: left; -webkit-box-shadow: 0 0 0 0; -moz-box-shadow: 0 0 0 0; -ms-box-shadow: 0 0 0 0; -o-box-shadow: 0 0 0 0; box-shadow: 0 0 0 0; } #toggle:checked ~ #nav li, #nav li { float: left; } #toggle:checked ~ #nav a, #nav a { line-height: 70px; height: 70px; display: block; float: right; border: 0; color: #660000; background-color: transparent; } #toggle:checked ~ #nav a:hover { color: #C00; transition-duration: 0.15s; } #nav a:hover { color: #C00; transition-duration: 0.15s; } #toggle:checked ~ #nav li.current a { color: #C00; } #nav li.current a { color: #C00; } #nav #close { display: none; } /* Unternavigation ======================= */ nav .contains-sub i { display: none; position: absolute; top: -999em; left: -999em; } #nav .submenu a { padding-left: 0; transition-duration: 0s; } #toggle:checked ~ #nav .submenu, #nav .submenu { position: absolute; left: -999em; -webkit-box-shadow: 0px 10px 15px -5px rgba(25,0,0,0.7); -moz-box-shadow: 0px 10px 15px -5px rgba(25,0,0,0.7); -ms-box-shadow: 0px 10px 15px -5px rgba(25,0,0,0.7); -o-box-shadow: 0px 10px 15px -5px rgba(25,0,0,0.7); box-shadow: 0px 10px 15px -5px rgba(25,0,0,0.7); } #toggle:checked ~ #nav li:hover .submenu, #nav li:hover .submenu { left: 0; top: 70px; z-index: 11; width: 18.5em; } #toggle:checked ~ #nav li:hover .submenu li { float: none; } #toggle:checked ~ #nav .submenu a { background: none; padding-left: 1em; width: 17em; } #nav li:hover .submenu a { padding-left: 1em; width: 17em; } #toggle:checked ~ #nav li:hover .submenu a, #nav li:hover .submenu a { height: 39px; line-height: 40px; background-color: #FFF; border-bottom: 1px solid #e0cccc; } /* Extra für schmällere Sprachwahl (geringere Breite bei Untermenü) ======================= */ #toggle:checked ~ #nav li:hover .sprachwahl_01, #nav li:hover .sprachwahl_01 { width: 3.25em; } #toggle:checked ~ #nav .submenu .sprachwahl_02 a { width: 1.25em; padding: 0 1em; } #nav li:hover .submenu .sprachwahl_02 a { width: 1.25em; padding: 0 1em; } /* Fin ======================= */ #toggle:checked ~ #nav .submenu.open li, #toggle:checked ~ #nav .submenu.open a { position: relative; height: 39px; line-height: 40px; } #toggle:checked ~ #nav li:hover .submenu a:hover, #nav li:hover .submenu a:hover { color: #C00; } #toggle:checked ~ #nav li .submenu .zwischentitel, #nav li .submenu .zwischentitel { clear: both; display: block; width: 17.5em; height: 39px; line-height: 40px; background-color: #FFF; border-bottom: 1px solid #e0cccc; padding-left: 1em; font-weight: 700; } } @media screen and (min-width: 1100px) { /* Hauptnavigation ======================= */ #nav a { padding: 0 2em 0 1em; } /* Unternavigation ======================= */ #toggle:checked ~ #nav li:hover .submenu, #nav li:hover .submenu { width: 19em; } #toggle:checked ~ #nav .submenu a { width: 16em; } #nav li:hover .submenu a { width: 16em; } #toggle:checked ~ #nav li .submenu .zwischentitel, #nav li .submenu .zwischentitel { width: 18em; } /* Extra für schmällere Sprachwahl (geringere Breite bei Untermenü) ======================= */ #toggle:checked ~ #nav li:hover .sprachwahl_01, #nav li:hover .sprachwahl_01 { width: 3.25em; } #toggle:checked ~ #nav .submenu .sprachwahl_02 a { padding: 0 1em;} #nav li:hover .submenu .sprachwahl_02 a { padding: 0 1em; } /* Fin ======================= */ }