body { background-color: #00a9fb; margin: 0; padding: 0; } /** * * * */ /** 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 */ /** * * * */ /** Main-Wrapper */ lubotzki { position: fixed; width: 350px; left: -355px; top: 0; bottom: 0; background-color: #222222ee; /** background-color: rgba( 0, 0, 0, .9 ); */ padding: 15px 0; transition: left 1s ease-in .5s; z-index: 3500; &:after { content: "\2261"; /** content: "\21E8 Seiteneinstellungen"; content: "\f0c9"; */ font-family: "FontAwesome"; font-weight: 400; font-style: normal; text-decoration: inherit; color: #dedbd9; /** color: #ffffff; */ position: absolute; left: 100%; top: 130px; padding: 20px 20px 20px 20px; margin: 0px 0px 0px 0px; background-color: #222222ee; /** 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: #dedbd9; /** border-color: #ffffff; */ border-left-width: 6px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; cursor: pointer; } &:hover, &:focus-within { left: 0; transition: left 1s ease-in 0s; &:after { content: "\2716"; /** content: "\21E6 Seiteneinstellungen"; content: "\f00d"; */ } &:hover:active, &:focus:active { left: -355px; transition-property: left; transition-duration: 0ms; transition-delay: 200ms; } } } /** Main-Wrapper - End */ /** Global Styles */ lubotzki { ul { list-style-type: none; padding: 0; margin: 0; z-index: 3510; li { position: relative; a { padding: 10px 5px; padding-left: 30px; } &:hover, &:focus-within { background-color: #999999; & > ul { top: 0%; } } & > ul { position: absolute; background-color: #222222ee; /** background-color: rgba( 0, 0, 0, .9 ); */ width: 100%; top: 1999px; left: 100%; transition: top .5s; li { min-width: 120px; } &:hover, &:focus-within { top: 0%; } } } a { color: #dedbd9; /** color: #ffffff; */ text-decoration: none; padding-left: 25px; display: block; &:after { content: "\25B7"; /** Symbole vor nav-Links kann ersetzt werden */ font-family: "FontAwesome"; display: block; position: absolute; left: 5px; top: 18px; /** font-size: 12px; */ } } } /** First-Level Navigation */ & > ul { margin-top: 32px; } } /** Global Styles - End */ /** * * * */ .eyecatchercontainer { grid-area: eyecatcher; display: grid; justify-content: start; } #eyecatchercontainer { z-index: -10; position: relative; width: 100vw !important; height: auto !important; } #eyecatchercontainer img { display: block; position: fixed; width: 100vw !important; height: auto !important; top: 0; left: 0; } <!-- p ? --> /** */ h1,h2,h3,p,.teaser { padding: 5px 5px 5px 5px; } /** */ .teaser { display: grid; } /** */ .teaserhaspicture { margin-left: 12% !important; } /** */ .column { width: 100% !important; } /** */ [class^="paragraphborder_"] { width: 80% !important; } /** */ a.ngpar { display: none; } /** h2 { position: relative !important; float: left; } */ .paragraph { display: grid; align-items: center; justify-items: center; place-items: center; } /** * * * */ @media screen and (max-width: 1023px) { nav.sqrnav { display: none; } } nav.sqrnav { /** grid-area: nav; */ background: #22222255; box-sizing: border-box; max-width: 1024px; margin: 0 auto; padding: 30px 20px 10px 20px; border-radius: 15px; z-index: 1; } nav.sqrnav>ul { list-style: none; margin: 0; padding: 0; display: block; } nav.sqrnav>ul:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } nav.sqrnav>ul>li { display: block; float: left; margin: 0; padding: 0; } nav.sqrnav>ul>li>a { float: left; padding: 8px 30px 8px 0; font-size: 36px; /** text-transform: uppercase; */ text-decoration: none; font-weight: bold; letter-spacing: -1px; line-height: 48px; color: #dddddd; transition: color 0.2s; } .sqpnavicon { margin-right: 0.2em !important; } /** nav.sqrnav>ul li em.ngshopcartindicator { display: none; background-color: #c79f01; color: #ffffff; font-style: normal; padding-right: 8px; padding-left: 8px; border-radius: 3px; margin-left: 8px; font-weight: normal; } nav.sqrnav>ul li em.ngshopcartindicatoractive { display: inline-block; } */ nav.sqrnav>ul>li.sqrnavlogo>a { padding: 0 30px 0 0; } nav.sqrnav>ul>li.sqrnavlogo>a>img { display: block; border: none; } nav.sqrnav>ul>li>a:hover { color: #666666; } nav.sqrnav>ul>li.active>a { color: #c79f01; } /** * * * */ /** @media (min-width: 1024px) { header.sqrheader { background-color: #00a9fb; position: sticky; top: 0; } } */ header.sqrheader { /** grid-area: header; */ box-sizing: border-box; max-width: 1024px; margin: 0 auto; padding: 0 20px; z-index: 101; } header.sqrheader>h1 { letter-spacing: -1px; } header.sqrheader>h1>span { font-weight: normal; color: #888888; } #breadcrumbs { padding: 4px 0 10px 0; font-style: italic; } #breadcrumbs a { color: #dddddd; text-decoration: none; } #breadcrumbs a:hover { color: #666666; } /** * * * */ @media screen and (max-width: 1023px) { #maincontainer { grid-template-columns: repeat(1, minmax(75px, 1fr)); grid-template-areas: "eyecatcher" "sidebarnav" "oben" "sidebarleft" "content" "sidebarright" "unten" ; display: grid; padding: 5px 5px 5px 5px; } #header { grid-area: oben; border-radius: 15px; margin: 10px 0 0 0; } #sidebarleft { grid-area: sidebarleft; background: #000000cc; border-radius: 15px; margin: 10px 0 0 0; } #content { grid-area: content; border-radius: 15px; margin: 10px 0 0 0; } #sidebarright { grid-area: sidebarright; background: #000000cc; border-radius: 15px; margin: 10px 0 0 0; } #footer { grid-area: unten; background: #000000cc; border-radius: 15px; margin: 10px 0 10px 0; } } /** * * * */ @media screen and (min-width: 1024px) { #maincontainer { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; /** grid-template-columns: repeat(12, minmax(min(325px, 100%), 1fr)); grid-template-columns: repeat(12, minmax(75px, 1fr)); */ grid-template-areas: "eyecatcher eyecatcher eyecatcher eyecatcher eyecatcher eyecatcher eyecatcher eyecatcher eyecatcher eyecatcher eyecatcher eyecatcher" "oben oben oben oben oben oben oben oben oben oben oben oben" "content content content content content content content content content content content content" "unten unten unten unten unten unten unten unten unten unten unten unten" ; display: grid; /** grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); */ align-items: start; justify-content: start; grid-auto-flow: row dense; align-content: start; column-gap: 10px; padding: 5px 10px 5px 10px; } #header { grid-area: oben; display: grid; padding: 0 40px; border-radius: 15px; } muggel { grid-area: sidebarnav; display: grid; width: 345px; } #sidebarleft { grid-area: sidebarleft; display: grid; margin: 10px 30px 10px 20px; background: #000000cc; border-radius: 15px; } #content { grid-area: content; display: grid; /** grid-column-start: 3; grid-column-end: 11; */ grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); column-gap: 30px; padding: 0 40px; margin: 10px 0 0 0; border-radius: 15px; } #content { grid-area: content; /** display: grid; */ padding: 0 40px; border-radius: 15px; } #sidebarright { grid-area: sidebarright; display: grid; margin: 10px 20px 10px 30px; background: #000000cc; border-radius: 15px; } #footer { grid-area: unten; display: grid; padding: 0 20px; background: #000000cc; border-radius: 15px; } } /** * * * */ @media screen and (min-width: 1600px) { #maincontainer { /** grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-columns: repeat(12, minmax(min(325px, 100%), 1fr)); grid-template-columns: repeat(12, minmax(75px, 1fr)); */ grid-template-areas: "eyecatcher eyecatcher eyecatcher eyecatcher eyecatcher eyecatcher eyecatcher eyecatcher eyecatcher eyecatcher eyecatcher eyecatcher" "oben oben oben oben oben oben oben oben oben oben oben oben" "content content content content content content content content content content content content" "unten unten unten unten unten unten unten unten unten unten unten unten" ; display: grid; /** grid-template-columns: repeat(auto-fit, minmax(min(200px, 50%), 1fr)); */ align-items: start; justify-content: start; grid-auto-flow: row dense; align-content: start; column-gap: 10px; padding: 5px 10px 5px 10px; } } /** * * * */ footer.sqrcommon { /** grid-area: footer; */ max-width: 1024px; margin: 0 auto; padding: 20px 20px 0 20px; box-sizing: border-box; background: #000000cc; border-radius: 15px; } footer.sqrcommon>ul { list-style: none; margin: 0; padding: 0 0 20px 0; display: block; } footer.sqrcommon>ul:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } footer.sqrcommon>ul>li { display: block; float: left; margin: 0; padding: 0; } footer.sqrcommon>ul>li>a { float: left; padding: 0 10px 0 0; /** text-transform: uppercase; */ text-decoration: none; letter-spacing: -1px; color: #dddddd; } footer.sqrcommon>ul>li>a:hover { color: #666666; } footer.sqrcommon>div { padding: 0 0 20px 0; } /** * * * */ muggel { background-color: #222222cc; padding: 10px; margin: 0 30px 10px 20px; border-radius: 15px; } #nav { /** width: fit-content; */ /** height: 100%; */ position: relative; background-color: #22222255; z-index: 10; } #nav img { border: 0; padding-top: 25px; padding-left: 25px; } #nav ul { padding: 0; margin: 0; list-style: none; display: block; /** width: 320px; */ } #nav ul.commonnav { /** position: absolute; bottom: 0; */ background-repeat: no-repeat; background-position: 45px 0; padding: 20px 0; } #nav li { font-family: 'Amarante',Verdana,Helvetica,sans-serif; font-weight: 400; font-size: 36px; display: block; } #nav li.navback { font-size: 36px; background-color: #222222; } #nav li:hover { background-color: #999999; } #nav li.navactive { background-color: #999999; } #nav li a { display: block; color: #dedbd9; padding: 15px 15px 15px 45px; text-decoration: none; } #nav form { background-color: #999999; /** width: 270px; */ margin: 25px 25px 40px 25px; padding: 0; height: 38px; position: relative; display: block; } #nav form button { background-color: #999999; display: block; width: auto; height: 38px; border: none; position: absolute; top: 0; right: 0; cursor: pointer; } #nav form input { border: 0; width: 250px; padding: 0; margin: 0; top: 10px; left: 10px; background-color: transparent; font: 20px / 24px 'Trebuchet MS',Optima,Arial,sans-serif; position: absolute; color: #dedbd9; } #nav form input:focus { outline: 3; } #nav form input::-webkit-input-placeholder { color:#dddddd; } #nav form input:-moz-placeholder { color:#dddddd; } #nav form input:-ms-input-placeholder { color:#dddddd; } /** * * * */ .nav { display: none; } #nav-toggle:checked ~ .nav { display: block; } .menu { display: inline-block; cursor: pointer; } .linie1, .linie3 { width: 70px; height: 10px; background-color: #dedbd9; margin: 12px 0; transition: 0.4s; } .linie2 { width: 55px; height: 10px; background-color: #dedbd9; margin: 12px 0; transition: 0.4s; } .change .linie1 { background-color: red; transform: translate(0, 22px) rotate(-45deg); } .change .linie2 {opacity: 0;} .change .linie3 { background-color: red; transform: translate(0, -22px) rotate(45deg); } /** * * * @media (min-width: 1024px) { .sqrallwaysboxed, .sqrmobilefullwidth, .sqrdesktopboxed { box-sizing: border-box; padding-left: 20px; padding-right: 20px; max-width: 1024px; 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; } .sqrmain2col>div { box-sizing: border-box; width: 48%; float: left; margin-right: 4%; } .sqrmain2col>div:last-child { margin-right: 0; } .sqrmain3col>div { box-sizing: border-box; width: 30.6666666666%; float: left; margin-right: 4%; } .sqrmain3col>div:last-child { margin-right: 0; } .sqrmain3collr>div { box-sizing: border-box; width: 50%; float: left; } .sqrmain3collr>div:first-child { width: 21%; margin-right: 4%; } .sqrmain3collr>div:last-child { width: 21%; margin-left: 4%; } .sqrmain2coll>div { box-sizing: border-box; width: 75%; float: left; } .sqrmain2coll>div:first-child { width: 21%; margin-right: 4%; } .sqrmain2colr>div { box-sizing: border-box; width: 75%; float: left; } .sqrmain2colr>div:last-child { width: 21%; margin-left: 4%; } .sqrmain3col:after, .sqrmain2col:after, .sqrmain3collr:after, .sqrmain2coll:after, .sqrmain2colr:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .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: 20px; padding-right: 20px; } .sqrallwaysboxed>.sqrallwaysboxed, .sqrallwaysboxed>.nguiparagraphcontainer>.sqrallwaysboxed { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } .sqrmobileboxedimportant { padding-left: 20px !important; padding-right: 20px !important; } .sqrmobilehidden { display: none; } .sqrallwaysfullwidth .sqrsuppressborders, .sqrmobilefullwidth .sqrsuppressborders { border-left: 0 !important; border-right: 0 !important; } } * * * */