html,body{ scroll-behavior: smooth} /* body { margin: 0; padding: 0; width: 100%; height: auto; } */ body { background: #f7f3f2 url(/images/pictures/layoutpictures/orig.pic_body.jpg) center center fixed !important; background-repeat: repeat !important; /* background-size: cover !important; */ } /* MuggelClanNav-Beginn */ muggelnav { position: fixed; width: 270px; left: -331px; /* 336px */ top: 10px; /* 50px */ bottom: 10px; /* 50px */ background-color: rgba( 0, 0, 0, .9 ); padding: 25px 20px; margin-left: 15px; /* Abstand linker Rand 20px */ border-style: solid; border-width: 3px; border-color: #ffffff; border-radius: 15px; transition: left 1s ease-in .5s; text-align: center; z-index: 3499; &:after { content: "\2218"; /* Barrieresymbol oder Text geschlossen kann ersetzt werden */ font-weight: 400; font-style: normal; text-decoration: inherit; color: #ffffff; position: absolute; left: 100%; top: 50px; padding: 0px 20px 30px 21px; margin: 0px 0px 0px 0px; /* Hintergrund Berrieresymbol Menue zeigen */ background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100"%3E%3Cg fill-rule="evenodd"%3E%3Cg id="barrierefreiheit" fill="white" fill-opacity="1.0" fill-rule="nonzero"%3E%3Cpath d="M74.131,28.976c-5.681,1.64-10.926,2.833-16.035,3.647c-5.16,0.822-9.817,0.919-14.274,0.3 c-6.072-0.845-12.131-2.176-18.011-3.957c-1.194-0.362-2.231-0.308-3.188,0.148c-1.603,0.767-2.707,2.446-2.882,4.383 c-0.169,1.874,0.553,3.587,1.931,4.584c1.044,0.756,2.325,1.398,3.705,1.856c2.805,0.929,5.671,1.813,8.444,2.668 c1.188,0.367,2.377,0.733,3.564,1.104c2.301,0.719,2.471,0.955,2.273,3.15c-0.344,3.825-0.838,7.641-1.469,11.345 c-0.856,5.024-1.792,10.126-2.698,15.06c-0.487,2.652-0.974,5.305-1.452,7.959c-0.425,2.368,0.771,4.478,3.048,5.365 c0.274,0.107,0.556,0.197,0.837,0.285l0.336,0.107l2.143,0.049l0.269-0.036c2.994-0.834,3.891-3.288,4.373-5.579 c1.207-5.721,2.438-11.396,3.661-16.87c0.175-0.784,0.451-1.555,0.743-2.37c0.111-0.31,0.222-0.619,0.328-0.934 c0.03-0.09,0.067-0.182,0.106-0.271c0.368,0.807,0.715,1.646,0.919,2.484c1.115,4.596,2.192,9.285,3.233,13.818l0.309,1.348 c0.155,0.671,0.282,1.349,0.409,2.023c0.084,0.441,0.167,0.887,0.259,1.326c0.565,2.758,1.965,4.399,4.273,5.021l2.25,0.033 l0.365-0.121c0.109-0.039,0.225-0.077,0.332-0.109c2.699-0.762,4.123-3.018,3.627-5.744c-0.537-2.953-1.092-5.904-1.646-8.854 l-0.656-3.516c-0.205-1.099-0.414-2.193-0.623-3.291c-1.086-5.712-2.211-11.615-2.729-17.487c-0.247-2.794-0.198-2.812,2.322-3.736 c1.854-0.678,3.722-1.323,5.586-1.968c1.494-0.517,2.988-1.033,4.479-1.567l0.501-0.179c1.39-0.494,2.823-1.004,4.179-1.698 c1.496-0.769,2.451-1.832,2.832-3.158c0.403-1.405,0.115-3.041-0.812-4.606C78.15,29.079,76.309,28.348,74.131,28.976z M78.182,35.05c-0.225,0.776-0.838,1.426-1.824,1.933c-1.232,0.633-2.604,1.121-3.935,1.593l-0.505,0.18 c-1.48,0.531-2.969,1.045-4.456,1.56c-1.877,0.648-3.754,1.297-5.619,1.98c-3.411,1.249-3.952,2.115-3.629,5.79 c0.526,5.973,1.66,11.928,2.757,17.686c0.209,1.097,0.416,2.188,0.62,3.285l0.659,3.518c0.553,2.945,1.105,5.895,1.645,8.845 c0.309,1.688-0.518,2.983-2.209,3.463c-0.146,0.042-0.289,0.093-0.435,0.144l-1.567,0.014c-1.475-0.439-2.312-1.514-2.713-3.459 c-0.089-0.432-0.171-0.862-0.252-1.294c-0.133-0.703-0.265-1.407-0.426-2.104l-0.309-1.345c-1.043-4.541-2.121-9.235-3.239-13.847 c-0.293-1.207-0.804-2.338-1.298-3.389c-0.379-0.809-0.891-1.218-1.519-1.218c-0.899,0-1.394,0.875-1.557,1.162 c-0.143,0.252-0.349,0.64-0.491,1.062c-0.102,0.301-0.209,0.602-0.316,0.897c-0.299,0.837-0.609,1.703-0.812,2.606 c-1.224,5.48-2.457,11.164-3.666,16.896c-0.449,2.134-1.061,3.483-2.828,4.028h-1.531l-0.206-0.064 c-0.237-0.072-0.475-0.146-0.706-0.238c-1.369-0.535-2.062-1.742-1.809-3.148c0.477-2.65,0.963-5.303,1.45-7.952 c0.907-4.938,1.845-10.047,2.703-15.084c0.64-3.756,1.141-7.626,1.49-11.502c0.304-3.378-0.697-4.309-3.668-5.238 c-1.19-0.372-2.381-0.739-3.572-1.105c-2.762-0.852-5.619-1.733-8.404-2.656c-1.188-0.394-2.281-0.939-3.161-1.578 c-0.802-0.58-1.217-1.621-1.112-2.785c0.112-1.238,0.784-2.295,1.753-2.759c0.507-0.243,1.037-0.253,1.744-0.039 c5.979,1.812,12.141,3.165,18.315,4.023c1.998,0.278,4.076,0.419,6.175,0.419c2.79,0,5.632-0.237,8.688-0.725 c5.192-0.827,10.517-2.038,16.276-3.7c1.289-0.374,2.193-0.04,2.885,1.121C77.943,32.647,78.52,33.877,78.182,35.05z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'); /* Hintergrund Berrieresymbol Menue zeigen Ende */ background-color: rgba( 0, 0, 0, .9 ); border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: dashed; border-width: 3px; border-color: #ffffff; border-left-width: 6px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; cursor: pointer; } &:hover, &:focus-within { left: 0; border-style: solid; border-width: 3px; border-color: #ffffff; transition: left 1s ease-in 0s; /* 1s */ &:after { content: "\2218"; /* Barrieresymbol oder Text offen kann ersetzt werden */ color: #00ff00; border-left-width: 6px; border-left-color: #000000; margin: 0px 0px 0px 0px; } &:hover:active, &:focus:active { left: -331px; transition-property: left; transition-duration: 0ms; transition-delay: 200ms; } } } /* MuggelClanNav-Ende */ /* Muggelnav Styles-Beginn*/ muggelnav { ul { list-style-type: none; padding: 0; margin: 0; margin-left: 3px; border-radius: 15px; li { position: relative; border-style: solid; border-width: 3px; border-radius: 15px; a { padding: 10px 5px; padding-left: 30px; } &:hover, &:focus-within { border-style: solid; border-width: 3px; border-color: #ffffff; background-color: rgba( 99, 99, 99, 1 ); & > ul { top: 0%; border-style: dotted; border-width: 3px; border-color: #ffffff; } } & > ul { position: absolute; background-color: rgba( 0, 0, 0, .9 ); width: 100%; top: -1999px; left: 15%; /* nav2 100% */ transition: top .5s; z-index: 3501; li { min-width: 120px; } &:hover, &:focus-within { top: 100%; /* nav2 0% */ } } } a { color: #ffffff; text-decoration: none; padding-left: 25px; display: block; &:after { content: "\25B7"; display: block; position: absolute; left: 5px; top: 13px; font-size: 12px; } } } /* First-Level Navigation */ & > ul { margin-top: 32px; } } /* Muggelnav Styles - End */ /* Button-Styles-Beginn */ input[type=button] { background-color: #ffffff ; border: 3px solid green; border-radius: 15px; color: #000000 ; padding: 3px 8px; font-size: 20px; text-decoration: none; margin: 5px 5px; cursor: pointer; } input[type=button]:hover { background-color: black; color: white; } #muggelfarben[type=button]:hover { background-color: #ac667daa; color: white; } input[type=button]:focus { background-color: black; color: white; border: 5px solid gray; } /* Button-Styles-Ende */ h1 { text-shadow: 1px 1px 5px rgba(0,0,0,0.2); } h2 { text-shadow: 1px 1px 3px rgba(0,0,0,0.1); } #navfader { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: #255114; opacity: 0; -webkit-transition: all 0.6s; transition: all 0.6s; visibility: hidden; z-index: 1000; } #navfader.on { opacity: 0.5; visibility: visible; } #navigation { -webkit-transition: all 0.4s; -webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1); transition: all 0.4s; transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1); -webkit-perspective: 600px; perspective: 600px; -webkit-transform: translateY(-481px); transform: translateY(-481px); top:0; display: block; position: fixed; width: 100%; height: 538px; z-index: 1001; } #navc { position: absolute; width: 50%; top: 0; background-color: #6f9a4a; right: 0; height: 480px; /* height: 480px; */ } #nava { position: absolute; width: 50%; top: 0; left: 0; background-color: #255114; height: 480px; } #navb { position: absolute; width: 50%; right: 0; top: 0; height: 480px; } #navigation ul { display: block; list-style: none; margin: 0; padding: 0; height: 480px; } #nava ul { border-right: 1px solid #364d23; } #navtoggle { height: 36px; width: 100%; border-top: 1px solid #364d23; border-buttom: 1px solid #364d23; background-color: #255114; z-index: 1003; position: relative; } #navbutton { width: 114px; height: 57px; cursor: pointer; background: url(./../../styles/opto/img/menu.png) no-repeat left top; position: absolute; bottom: 0; left:0; right:0; margin-left:auto; margin-right:auto; -webkit-animation: bounce 3s; animation: bounce 3s; z-index: 1004; } .open #navbutton, #navbutton:hover { background-position: left bottom; -webkit-animation: bounce 3s; animation: bounce 3s; } @-webkit-keyframes bounce { 0%, 40%, 60%, 80%, 100% {-webkit-transform: translateY(0);} 45%, 65%, 85% {-webkit-transform: translateY(7px);} } @keyframes bounce { 0%, 40%, 60%, 80%, 100% {transform: translateY(0);} 45%, 65%, 85% {transform: translateY(7px);} } #navshadow { /* width: 100%; height: 0; padding-bottom: 2.5%; background: url(./../../styles/opto/img/?f=bowtop&ca=255114) no-repeat center top; position: absolute; left: 0; top: 0; z-index: 1000; */ height: 60px; /* height: 20px; background: url(./../../styles/opto/img/shadow.png) repeat-x; background: url(./../../styles/opto/img/?f=bowtop&ca=ffffff) no-repeat center top; */ background: url(./../../styles/opto/img/?f=bowtop&ca=255114) no-repeat center top; background-size: cover; margin-top: -1px; width: 100%; } #navtoggle img { display: block; position: absolute; left: 8px; top: 0; border: 0; } #nava { text-align: right; } #nava a { display: block; padding: 14px 20px 14px 20px; } #navb a { display: block; padding: 14px 20px 14px 20px; } #navigation li { transition: background-color 0.2s; -webkit-transition: background-color 0.2s; } #navigation ul li a { text-decoration: none; /* text-transform: uppercase; */ color: #ffffff; transition: all 0.2s; -webkit-transition: all 0.2s; } #nava ul li:hover, #nava ul li.active { background-color: #6f9a4a; } #nava ul li:hover a { padding-right: 30px; } #navb ul li:hover { background-color: #255114; } #nava ul li.active, #navb ul li.active { font-weight: bold; } #navb ul li:hover a { padding-left: 30px; } #navigation.open #navtop { -webkit-transform: rotateX(0) ; transform: rotateX(0) ; } #navigation.open { -webkit-transform: translateY(0); transform: translateY(0); } #navigation #navtop { -webkit-transform: rotateX(65deg); -webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1); -webkit-transition: all 0.6s; transform: rotateX(65deg); transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1); transition: all 0.6s; z-index: 1002; height: 480px; } #navtoggle form { width: 140px; height: 24px; display: block; position: absolute; top: 6px; right: 6px; background-color: #ffffff; border-radius: 2px; } #navtoggle form input { width: 110px; display: block; position: absolute; top: 4px; left: 26px; background-color: transparent; border: 0; padding: 0; margin: 0; color: #444444; font: 14px "Corbel", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif; } #navtoggle button { background: url(./../../styles/opto/img/searchbutton.png) no-repeat; display: block; width: 20px; height: 20px; border: none; position: absolute; top: 2px; left: 2px; } input:focus-within { outline: 2px; /* outline: 0; */ } .sqroptologo { background-color: #ffffff; padding: 30px 0; } .sqroptologo img { display: block; border: none; margin: 30px auto 0 auto; } .sqroptologo { /* background-image: url({$backdropsource|escape}) !important; background-color: #ffffff; */ background-size: 100%; background-color: transparent !important; padding: 35px 0px 0px 0px !important; } /* .sqroptologo img { display: block; border: none; margin: 30px auto 0 auto; } */ .sqrmainarea { max-width: 1080px; margin: 0 auto; position: relative; padding: 0 30px; margin-top: -5%; } .sqroptobowtop { width: 100%; position: relative; background-size: 100%; background-position: center bottom; background-repeat: no-repeat; background-image: url(./../../styles/opto/img/?f=fade&ca=b59057&cb=654630); /* background-position: top; background-repeat: x-repeat; background-image: url(https://trachtenverein.donaustauf.info/images/pictures/layoutpictures/eigene/blaetterhintergrund.png); https://trachtenverein.donaustauf.info/images/pictures/layoutpictures/eigene/blaetterhintergrundoben.png */ border-bottom-style: outset; border-bottom-width: 5px; border-bottom-left-radius: 50% 10%; border-bottom-right-radius: 50% 10%; box-shadow:0 2px 2px rgba(0,0,0,0.5); } .sqroptobowtop>div { width: 100%; padding-bottom: 15%; } @media (max-width: 1024px) { .sqroptobowtop { padding-bottom: 15% !important; } .sqroptobowtop>div { padding-bottom: 0px !important; } } @media (min-width: 1024px) { .muggelmobilesqrnav { display: none; } } .sqrnav { width: 100%; z-index: 1000; -webkit-user-select: none; user-select: none; background-color: rgba(0,0,0,0.5); } .sqrnav a { display: block; margin: 0; padding: 10px 22px; color: #ffffff; text-decoration: none; /* text-transform: uppercase; */ -webkit-tap-highlight-color: transparent; line-height: 22px; font-size: 20px; letter-spacing: 1px; -webkit-text-size-adjust:none; transition: background-color 0.2s; } .sqrnav>ul li { display: block; margin: 0; padding: 0; position: relative; } @media (max-width: 1023px) { .sqrnav a.sqrnavshow, .sqrnav a.sqrnavhide { background: url(./../../styles/opto/img/?f=menu&ca=ffffff&cb=255114) right center no-repeat; } .sqrnav li.sqrnavmore>a { background: url(./../../styles/opto/img/?f=moreright&ca=ffffff&cb=255114) right center no-repeat; } .sqrnav li.sqrnavopen>a { background: url(./../../styles/opto/img/?f=moredown&ca=ffffff&cb=255114) right center no-repeat; } .sqrnav .sqrnavshow { display: block; } .sqrnav .sqrnavhide { display: none; } .sqrnavopen>a.sqrnavshow { display: none; } .sqrnavopen>a.sqrnavhide { display: block; } .sqrnav li.sqrnavopen>ul { display: block; } .sqrnav ul { display: none; margin: 0 auto; padding: 0; list-style: none; } .sqrnav ul ul { display: none; } .sqrnav ul li li>a { padding-left: 44px; } .sqrnav ul li li li>a { padding-left: 66px; } .sqrnavopen>ul { display: block; } .sqrmainarea { padding: 0; margin-top: 0; } .sqroptobowcontenttop { display: none; } .sqroptobowtop>div { } .sqrnavopen { background-color: #255114; } } @media (max-width: 1023px) { #nav { display: none !important; } .sqrnav a.sqrnavshow, .sqrnav a.sqrnavhide { background: url(./../../styles/opto/img/?f=menu&ca=ffffff&cb=255114) right center no-repeat; } .sqrnav li.sqrnavmore>a { background: url(./../../styles/opto/img/?f=moreright&ca=ffffff&cb=255114) right center no-repeat; } .sqrnav li.sqrnavopen>a { background: url(./../../styles/opto/img/?f=moredown&ca=ffffff&cb=255114) right center no-repeat; } .sqrnav .sqrnavshow { display: block; } .sqrnav .sqrnavhide { display: none; } .sqrnavopen>a.sqrnavshow { display: none; } .sqrnavopen>a.sqrnavhide { display: block; } .sqrnav li.sqrnavopen>ul { display: block; } .sqrnav ul { display: none; margin: 0 auto; padding: 0; list-style: none; } .sqrnav ul ul { display: none; } .sqrnav ul li li>a { padding-left: 44px; } .sqrnav ul li li li>a { padding-left: 66px; } .sqrnavopen>ul { display: block; } .sqrmainarea { padding: 0; margin-top: 0; } .sqroptobowcontenttop { display: none; } .sqroptobowtop>div { } .sqrnavopen { background-color: #255114; } } // BilderNavigation Anfang /* #navcontainer { height: 64px !important; width: 100% !important; background: #255114 url(./../../styles/opto/img/fade.png) repeat-x !important; margin-bottom: 40px !important; box-shadow:0 2px 2px rgba(0,0,0,0.5) !important; } */ #nav { /* width: 960px; width: 100%; height: 64px; margin: 0 auto; position: relative; */ height: 64px !important; width: 100% !important; background: #255114 url(./../../styles/opto/img/fade.png) repeat-x !important; position: relative; /* margin-bottom: 40px !important; */ box-shadow:0 2px 2px rgba(0,0,0,0.5) !important; } #nav>div { /* width: 191px; */ width: 100%; height: 64px; position: absolute; top: 0; left: 0; border-right: 1px solid rgba(0,0,0,0.4); overflow: hidden; } #nav>div img { display: block; border: 0; } #nav>form { height: 28px; border: 1px solid rgba(0,0,0,0.4); background-color: rgba(0,0,0,0.1); position: absolute; /* width: 192px; */ width: 220px; right: 0; top: 17px; border-radius: 2px; } #nav>form>button { background: url(./../../styles/opto/img/search.png) no-repeat center center; display: block; width: 28px; height: 28px; border: none; position: absolute; top: 0px; right: 0px; cursor: pointer; } #nav>form>input { border: 0; width: 160px; padding: 0; margin: 0; top: 5px; left: 5px; background-color: transparent; font: 13px/18px "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif; height: 18px; position: absolute; color: #eeeeee; } #nav>form>input:focus{ /* outline: 0; */ outline: 3px; } #nav>ul { /* width: 960px; */ /* width: 100%; */ height: 64px; background: #255114 url(./../../styles/opto/img/fade.png) repeat-x; display: block; list-style: none; padding: 0 0 0 230px; font: 19px "Georgia", "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif; line-height: 16px; margin: 0; z-index: 1000; } #nav>ul>li { display: block; float: left; height: 64px; border-right: 1px solid rgba(0,0,0,0.4); } // :active ? #nav>ul>li.active { background: #255114 url(./../../styles/opto/img/active.png) repeat-x; } #nav>ul>li>a { display: block; color: #ffffff; padding: 20px; border-bottom: 6px solid #6f9a4a; text-decoration: none; } #nav>ul>li.rainbow1>a { border-color: #646464; } #nav>ul>li.rainbow2>a { border-color: #ffac00; } #nav>ul>li.rainbow3>a { border-color: #ff0000; } #nav>ul>li.rainbow4>a { border-color: #325072; } #nav>ul>li.rainbow5>a { border-color: #000000; } #nav>ul>li:hover>a { /* background-color: #ffffff; */ background-color: #ffffff; /* background: #255114 url(./../../styles/opto/img/active.png) repeat-x; */ /* border-bottom: 6px solid #ffffff; */ border-bottom: 6px solid #ffffff; border-radius: 50% 50% 0 0; color: #6f9a4a; } #nav>ul>li:focus-within>a { /* background-color: #ffffff; */ background-color: #ffffff; /* background: #255114 url(./../../styles/opto/img/active.png) repeat-x; */ /* border-bottom: 6px solid #ffffff; */ border-bottom: 6px solid #ffffff; border-radius: 50% 50% 0 0; color: #6f9a4a; } #nav>ul>li.rainbow1:hover>a {color: #646464;} #nav>ul>li.rainbow2:hover>a {color: #ffac00;} #nav>ul>li.rainbow3:hover>a {color: #ff0000;} #nav>ul>li.rainbow4:hover>a {color: #325072;} #nav>ul>li.rainbow5:hover>a {color: #000000;} #nav>ul>li>ul { position: absolute; left: 0px; top: 64px; /* width: 960px; */ width: 100%; /* height: 220px; */ height: 300px; /* background-color: #f9f9f9; */ background-color: #e2fccd; list-style: none; margin: 0; padding: 0; display: none; border-bottom: 6px solid #6f9a4a; border-bottom-left-radius: 50% 10%; border-bottom-right-radius: 50% 10%; z-index: 1000; box-shadow:0 2px 2px rgba(0,0,0,0.5); } #nav>ul>li.rainbow1>ul {border-color: #646464;} #nav>ul>li.rainbow2>ul {border-color: #ffac00;} #nav>ul>li.rainbow3>ul {border-color: #ff0000;} #nav>ul>li.rainbow4>ul {border-color: #325072;} #nav>ul>li.rainbow5>ul {border-color: #000000;} #nav>ul>li:hover>ul { display: block; } #nav>ul>li:focus-within>ul { display: block; } #nav>ul>li>ul>li { display: block; width: 230px; /* height: 44px; */ height: 46px; } #nav>ul>li>ul>li>a { line-height: 18px; padding: 13px 20px; display: block; color: #444444; text-decoration: none; } #nav>ul>li>ul>li.hover>a { color: #ffffff; background-color: #6f9a4a; } #nav>ul>li.rainbow1>ul>li.hover>a {background-color: #646464;} #nav>ul>li.rainbow2>ul>li.hover>a {background-color: #ffac00;} #nav>ul>li.rainbow3>ul>li.hover>a {background-color: #ff0000;} #nav>ul>li.rainbow4>ul>li.hover>a {background-color: #325072;} #nav>ul>li.rainbow5>ul>li.hover>a {background-color: #000000;} #nav>ul>li>ul>li:focus-within>a { color: #ffffff; background-color: #6f9a4a; } #nav>ul>li.rainbow1>ul>li:focus-within>a {background-color: #646464;} #nav>ul>li.rainbow2>ul>li:focus-within>a {background-color: #ffac00;} #nav>ul>li.rainbow3>ul>li:focus-within>a {background-color: #ff0000;} #nav>ul>li.rainbow4>ul>li:focus-within>a {background-color: #325072;} #nav>ul>li.rainbow5>ul>li:focus-within>a {background-color: #000000;} #nav>ul>li>ul>li>ul { position: absolute; top: 0; /* left: 192px; */ left: 230px; display: block; /* width: 748px; width: 828px; */ width: 75%; /* height: 200px; */ height: 240px; list-style: none; margin: 0; padding: 10px; display: none; /* background-color: #ffffff; */ background-color: #ffffff; z-index: 1000; } #nav>ul>li>ul>li.hover>ul { display: block; } #nav>ul>li>ul>li:focus-within>ul { display: block; } #nav>ul>li>ul>li>ul>li { display: block; float: left; width: 167px; /* width: 11%; */ /* height: 180px; height: 200px; */ height: auto; padding: 10px; } #nav>ul>li>ul>li>ul>li>a>img { display: block; /* width: 167px; */ /* height: 167px; */ width: 100%; height: auto; border: 0; border-radius: 15px; } #nav>ul>li>ul>li>ul>li:hover { background-color: #6f9a4a; border: 0; border-radius: 25px; } #nav>ul>li.rainbow1>ul>li>ul>li:hover { background-color: #646464; } #nav>ul>li.rainbow2>ul>li>ul>li:hover { background-color: #ffac00; } #nav>ul>li.rainbow3>ul>li>ul>li:hover { background-color: #ff0000; } #nav>ul>li.rainbow4>ul>li>ul>li:hover { background-color: #325072; } #nav>ul>li.rainbow5>ul>li>ul>li:hover { background-color: #000000; } #nav>ul>li>ul>li>ul>li:focus-within { background-color: #6f9a4a; border: 0; border-radius: 25px; } #nav>ul>li.rainbow1>ul>li>ul>li:focus-within { background-color: #646464; } #nav>ul>li.rainbow2>ul>li>ul>li:focus-within { background-color: #ffac00; } #nav>ul>li.rainbow3>ul>li>ul>li:focus-within { background-color: #ff0000; } #nav>ul>li.rainbow4>ul>li>ul>li:focus-within { background-color: #325072; } #nav>ul>li.rainbow5>ul>li>ul>li:focus-within { background-color: #000000; } #nav>ul>li>ul>li>ul>li>span { display: block; color: #666666; padding: 2px 0; font: 80% "Georgia", "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif; text-align: center; line-height: 18px; } #nav>ul>li>ul>li>ul>li:hover>span { color: #ffffff; background-color: #000000; border: 0; border-radius: 5px; } #nav>ul>li>ul>li>ul>li:focus-within>span { color: #ffffff; background-color: #000000; border: 0; border-radius: 5px; } .sqroptobowcontenttop { width: 100%; height: auto !important; padding-bottom: 2.5%; background: url(./../../styles/opto/img/?f=bowbottom&ca=ffffff) no-repeat center top; } // Bildernavigation Ende } .sqroptobowcontenttop { width: 100%; height: 0; padding-bottom: 2.5%; background: url(./../../styles/opto/img/?f=bowbottom&ca=ffffff) no-repeat center top; } .sqrmaincontainer { width: 100%; padding: 0; margin: 0; box-sizing: border-box; } .sqrbreadcrumbs { margin: 0 30px 30px 30px; padding: 0; color: #6e6e6e; font-size: 13px; -webkit-text-size-adjust:none; text-align: center; } .sqrbreadcrumbs a { color: #9a7a4a; font-weight: normal; text-decoration: none; } .sqrbreadcrumbs a:hover { color: #b59057; font-weight: normal; text-decoration: none; } header { margin: 0 30px 30px 30px; padding: 0; position: relative; } header>img { width: 100%; height: auto; } .sqroptoheaderbow { width: 100%; height: 0; padding-bottom: 2.5%; background: url(./../../styles/opto/img/?f=bowtop&ca=ffffff) no-repeat center top; position: absolute; left: 0; top: 0; z-index: 3; } @media (max-width: 1800px) { .sqroptobowtop>div, .sqroptobowcontenttop, .sqroptoheaderbow { background-size: 1800px 45px; } } @media (max-width: 1600px) { .sqroptobowtop>div, .sqroptobowcontenttop, .sqroptoheaderbow { background-size: 1600px 40px; } } @media (max-width: 1400px) { .sqroptobowtop>div, .sqroptobowcontenttop, .sqroptoheaderbow { background-size: 1400px 35px; } } @media (max-width: 1200px) { .sqroptobowtop>div, .sqroptobowcontenttop, .sqroptoheaderbow { background-size: 1200px 30px; } } @media (max-width: 1000px) { .sqroptobowtop>div, .sqroptobowcontenttop, .sqroptoheaderbow { background-size: 1000px 25px; } } @media (max-width: 800px) { .sqroptobowtop>div, .sqroptobowcontenttop, .sqroptoheaderbow { background-size: 800px 20px; } } @media (max-width: 600px) { .sqroptobowtop>div, .sqroptobowcontenttop, .sqroptoheaderbow { background-size: 600px 15px; } } @media (max-width: 400px) { .sqroptobowtop>div, .sqroptobowcontenttop, .sqroptoheaderbow { background-size: 400px 10px; } } @media (max-width: 320px) { .sqroptobowtop>div, .sqroptobowcontenttop, .sqroptoheaderbow { background-size: 320px 8px; } } @media (max-width: 240px) { .sqroptobowtop>div, .sqroptobowcontenttop, .sqroptoheaderbow { background-size: 240px 6px; } } @media (min-width: 2000px) { .sqroptobowtop>div, .sqroptobowcontenttop, .sqroptoheaderbow { background-size: 2400px 60px; } } @media (min-width: 2400px) { .sqroptobowtop>div, .sqroptobowcontenttop, .sqroptoheaderbow { background-size: 2600px 65px; } } body { background-color: #f7f3f2; margin: 0; padding: 0; } #maincontainer { background: url(./../../styles/opto/img/?f=fade2&ca=ffffff&cb=e8e8e8) no-repeat center top; background-color: #ffffffaa; /* opacity: 0.5; */ padding: 0.1px 0; } #sidebarleft, #content, #sidebarright { min-height: 1px; padding-top: 10px; padding-bottom: 20px; } #header { padding: 10px 0 20px 0; } #footer { /* padding: 10px 0 20px 0; */ padding: 0 0 0 0; } @media (min-width: 1024px) { .sqrdesktophidden { display: none; } .sqrallwaysboxed, .sqrmobilefullwidth, .sqrdesktopboxed { box-sizing: border-box; padding-left: 30px; padding-right: 30px; margin-left: auto; margin-right: auto; } .sqrallwaysboxed .sqrallwaysboxed, .sqrdesktopboxed .sqrdesktopboxed, .sqrmobilefullwidth .sqrallwaysboxed, .sqrdesktopboxed .sqrallwaysboxed, .sqrdesktopboxed .sqrmobilefullwidth, .sqrdesktopremovebox .sqrallwaysboxed, .sqrdesktopremovebox .sqrmobilefullwidth { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } .sqrmain3collr, .sqrmain2coll, .sqrmain2colr { display: table; box-sizing: border-box; table-layout: fixed; width: 100%; } .sqrmain3collr>div { box-sizing: border-box; width: 75%; display: table-cell; vertical-align: top; } .sqrmain3collr>div:first-child { width: 75%; border-right: 1px solid #ede8df; } .sqrmain3collr>div:last-child { width: 25%; border-left: 1px solid #ede8df; } .sqrmain2coll>div { box-sizing: border-box; width: 75%; display: table-cell; vertical-align: top; } .sqrmain2coll>div:first-child { width: 75%; border-right: 1px solid #ede8df; } .sqrmain2colr>div { box-sizing: border-box; width: 75%; display: table-cell; vertical-align: top; } .sqrmain2colr>div:last-child { width: 25%; border-left: 1px solid #ede8df; } .sqrallwaysfullwidth .sqrsuppressborders { border-left: 0 !important; border-right: 0 !important; } } @media (max-width: 1023px) { .sqrpanoramicbackground { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important;; } .sqrallwaysboxed, .sqrmobileboxed { box-sizing: border-box; padding-left: 30px; /* 30px*/ padding-right: 30px; /* 30px*/ } .sqrallwaysboxed>.sqrallwaysboxed, .sqrallwaysboxed>.nguiparagraphcontainer>.sqrallwaysboxed { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } .sqrmobileboxedimportant { padding-left: 30px !important; padding-right: 30px !important; } .sqrmobilehidden { display: none; } .sqrallwaysfullwidth .sqrsuppressborders, .sqrmobilefullwidth .sqrsuppressborders { border-left: 0 !important; border-right: 0 !important; } #sidebarleft { border-bottom: 1px solid #ede8df; } #sidebarright { border-top: 1px solid #ede8df; } } #sqrheader { position: relative; padding: 0; } #sqrheader #headercontainer img, #sqrheader #headercontainer video { width: 100%; height: 100%; display: block; border: 0; position: absolute; } #sqrheader #headercontainer img.headersliderpri { z-index: 1; transition: none; -webkit-transition: none; opacity: 1; } #sqrheader #headercontainer img.headerslidersec { z-index: 2; transition: none; opacity: 0; } #sqrheader #headercontainer img.headerslidersecout { transition: opacity 1s linear, transform 1s; opacity: 1; } #headercontainer { width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; position: relative; } #headersliderbullets { box-sizing: border-box; bottom: 0; right: 0; text-align:center; padding: 10px 0; } #headersliderbullets a { width: 20px; height: 20px; background: url(./../../styles/opto/img/?f=navdefault&ca=b59057&cb=81583c) no-repeat left top; display: inline-block; } #headersliderbullets a.active { background-position: left bottom; } footer { /* max-width: 1080px; */ /* max-width: 1140px; */ color: #654630; margin: 0 auto; padding: 15px 0; position: relative; box-sizing: border-box; font-size: 20px; -webkit-text-size-adjust:none; } footer>div>div { padding: 15px 30px; box-sizing: border-box; } footer form { box-sizing: border-box; background-color: #ffffff; width: 100%; border: 0; padding: 0; margin: 0 0 20px 0; outline: none; border-radius: 0; -webkit-appearance: none; } footer form input[type=text] { border: none; font: 15px 'Noto Sans',Tahoma,Helvetica,sans-serif; width: 75%; float: left; box-sizing: border-box; padding: 10px; color: #654630; line-height: 20px; height: 40px; } footer form input[type=submit] { border: none; font: 15px 'Noto Sans',Tahoma,Helvetica,sans-serif; width: 25%; float: left; box-sizing: border-box; padding: 10px; cursor: pointer; outline: none; border-radius: 0; -webkit-appearance: none; background-color: #9a7a4a; color: #ffffff; height: 40px; } footer form input:focus-visible { outline: revert; } #navtoggle form input:focus-visible { outline: revert; } footer form input[type=submit]:hover { background-color: #b59057; } footer form:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .sqrcommonnavhierarchical a, .sqrcommonnav a, .sqrcommon>div a { text-decoration: none; color: #9a7a4a; transition: color 0.3s; text-decoration: none; font-weight: normal; } .sqrcommonnavhierarchical a:hover, .sqrcommonnav a:hover, .sqrcommon>div a:hover { color: #b59057; } .sqrcommonnavhierarchical { display: block; list-style: none; margin: 0; padding: 0; } .sqrcommonnav { display: block; list-style: none; margin: 0; padding: 15px 30px; text-align: center; } .sqrcommonnav>li { display: inline-block; padding: 5px; } .sqrcommonnavhierarchical>li { display: block; box-sizing: border-box; list-style: none; padding: 0 0 5px 0; } .sqrcommonnavhierarchical>li>em { font-style: normal; font-weight: bold; display: block; padding-bottom: 4px; } .sqrcommonnavhierarchical>li>ul { display: block; margin: 0; padding: 5px 0 20px 0; list-style: none; } .sqrcommonnavhierarchical>li>ul>li { margin: 0; padding: 0 0 2px 0; } .sqrcommonnavhierarchical:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } @media (min-width: 1024px) { .sqrfooter2col>div { width: 50%; float: left; padding: 15px 30px; box-sizing: border-box; } .sqrfooter2col:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } } @media (min-width: 768px) { .sqrcommonnavhierarchical2col>li { width: 50%; float: left; padding-right: 20px; } .sqrcommonnavhierarchical2col > li:nth-child(2n+1) { clear: both; } .sqrcommonnavhierarchical2col:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } } #contact { background-color: transparent !important; margin-top: 0px; width: 100%; position: relative; background-size: 100%; background-position: center bottom; background-repeat: no-repeat; background-image: url(./../../styles/opto/img/?f=bowbottom&ca=255114); } #contact>div { max-width: 1080px; padding: 0px 15px; /* 10x 15px */ font-size: 20px; -webkit-text-size-adjust:none; color: #255114; box-sizing: border-box; margin: -1px auto; } #contact a, #contact span { text-decoration: none; -webkit-text-size-adjust:none; /* text-transform: uppercase; **/ display: inline-block; margin: 5px 3px; } #contact a { color: #ffffff; } #contact svg { width: 1.2em; height: 1.2em; display: inline-block; vertical-align: -0.2em; margin-right: 0.1em; margin-left: 0.1em; border: 0; padding: 0; } #contact a:hover { color: #9a7a4a; text-decoration: none; } .mask1 { -webkit-mask-image: url(/images/pictures/layouts/mask1.png); mask-image: url(/images/pictures/layouts/mask1.png); -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } ul.sqrparanav { display: none; } @media (hover: hover) and (min-width: 1024px) { ul.sqrparanav { list-style: none; margin: 0; padding: 0; position: fixed; display: flex; right: 0; top: 0; bottom: 0; flex-direction: column; justify-content: center; z-index: 1900; } ul.sqrparanav>li { display: block; margin: -2px 0; padding: 0 10px 0 0; } ul.sqrparanav>li>a { position: relative; background: #6f9a4a url(./../../styles/opto/img/?f=paranavtri&ca=255114) right center no-repeat; /* background: transparent url(../img/?f=&ca=) right center no-repeat; background: transparent url(./../../styles/opto/img/?f=b59057&cb=654630 right center no-repeat; */ display: block; padding: 7px 0px 7px 18px; text-decoration: none; border-radius: 25px 0 25px 0; text-align: right; opacity: 0.3; font-size: 20px; line-height: 22px; outline: none; transition: opacity 0.5s; } ul.sqrparanav>li>a:hover { z-index: 1901; } ul.sqrparanav>li>a:hover, ul.sqrparanav>li>a.sqractive { opacity: 1; } ul.sqrparanav>li>a>span { display: none; vertical-align: middle; } ul.sqrparanav>li>a>div { display: inline-block; width: 18px; } ul.sqrparanav>li>a:hover, ul.sqrparanav>li>a:focus-visible { background: #fadc00; color: #000000; /* background: #255114; color: #ffffff; */ } @keyframes sqrparanavslide { from { transform: translateX(10px); } to { transform: translateX(0); } } @keyframes sqrparanavfade { from { opacity: 0; } to { opacity: 1; } } ul.sqrparanav>li>a:hover>span, ul.sqrparanav>li>a:focus-visible>span { display: inline-block; animation: 0.3s cubic-bezier(.82,.01,.71,.99) forwards sqrparanavslide; } ul.sqrparanav>li>a:hover, ul.sqrparanav>li>a:focus-visible { animation: 0.3s cubic-bezier(.82,.01,.71,.99) forwards sqrparanavfade; } }