/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif; -webkit-text-size-adjust:100%} body{margin:0} article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block} audio,canvas,progress,video{display:inline-block; vertical-align:baseline} audio:not([controls]){display:none; height:0} [hidden],template{display:none} a{background-color:transparent} a:active,a:hover{outline:0} abbr[title]{border-bottom:1px dotted} b,strong{font-weight:bold} dfn{font-style:italic} h1{font-size:2em; margin:0.67em 0} mark{background:#ff0; color:#000} small,.small{font-size:84%} sub,sup{font-size:75%; line-height:0; position:relative; vertical-align:baseline; color:currentcolor!important; } sup{top:-0.5em} sub{bottom:-0.25em} img{border:0} svg:not(:root){overflow:hidden} figure{margin:1em 40px} hr{box-sizing:content-box; height:0} pre{overflow:auto} code,kbd,pre,samp{font-family:monospace,monospace; font-size:1em} button,input,optgroup,select,textarea{color:inherit; font:inherit; margin:0} button{overflow:visible} button,select{text-transform:none} button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button; cursor:pointer} button[disabled],html input[disabled]{cursor:default} button::-moz-focus-inner,input::-moz-focus-inner{border:0; padding:0} input{line-height:normal} input[type="checkbox"],input[type="radio"]{box-sizing:border-box; padding:0} input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto} input[type="search"]{-webkit-appearance:textfield; box-sizing:content-box} input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none} fieldset{border:1px solid #c0c0c0; margin:0 2px; padding:0.35em 0.625em 0.75em} legend{border:0; padding:0} textarea{overflow:auto} optgroup{font-weight:bold} table{border-collapse:collapse; border-spacing:0} td,th{padding:0} /* Grid by Gridly * https://github.com/IonicaBizau */.row{display:flex} .col{flex:1} @media(max-width:42em){.row{flex-direction:column} .col{flex:0 0 100%} } .col-tenth{flex:0 0 10%} .col-fifth{flex:0 0 20%} .col-quarter{flex:0 0 25%} .col-third{flex:0 0 33.3333334%} .col-half{flex:0 0 50%} /* Skeleton V2.0.4 * Copyright 2014, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 12/29/2014 * ! Grid removed ! */.container {position:relative; width:100%; max-width:1141px; margin:0 auto; padding:0 21px; box-sizing:border-box} html {font-size:62.5%} body {font-size:1.5em; line-height:1.6; } body * {color:#222} h1, h2, h3, h4, h5, h6 {margin-top:0; margin-bottom:2rem; font-weight:600} h1 {font-size:3.0rem; line-height:1.2; letter-spacing:-.05rem} h2 {font-size:2.6rem; line-height:1.25; letter-spacing:-.05rem} h3 {font-size:2.3rem; line-height:1.3; letter-spacing:-.05rem} h4 {font-size:2.0rem; line-height:1.35; letter-spacing:-.05rem} h5 {font-size:1.8rem; line-height:1.5; letter-spacing:-.05rem} h6 {font-size:1.5rem; line-height:1.6; letter-spacing:0} @media (min-width:550px) {h1 {font-size:3.0rem} h2 {font-size:2.6rem} h3 {font-size:2.3rem} h4 {font-size:2.0rem} h5 {font-size:1.8rem} h6 {font-size:1.5rem} } p {margin-top:0} a {color:#0b4ead} a:hover {color:#0b4ead} .button,button,input[type="submit"],input[type="reset"],input[type="button"] {display:inline-block; min-height:38px; padding:0 30px; color:#555; text-align:center; font-size:11px; font-weight:600; line-height:38px; letter-spacing:.05rem; text-transform:uppercase; text-decoration:none; white-space:nowrap; background-color:transparent; border-radius:4px; border:1px solid #bbb; cursor:pointer; box-sizing:border-box} .button:hover,button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover,.button:focus,button:focus,input[type="submit"]:focus,input[type="reset"]:focus,input[type="button"]:focus {color:#333; border-color:#888; outline:0} .button.button-primary,button.button-primary,input[type="submit"].button-primary,input[type="reset"].button-primary,input[type="button"].button-primary {color:#FFF; background-color:#33C3F0; border-color:#33C3F0} .button.button-primary:hover,button.button-primary:hover,input[type="submit"].button-primary:hover,input[type="reset"].button-primary:hover,input[type="button"].button-primary:hover,.button.button-primary:focus,button.button-primary:focus,input[type="submit"].button-primary:focus,input[type="reset"].button-primary:focus,input[type="button"].button-primary:focus {color:#FFF; background-color:#0b4ead; border-color:#0b4ead} input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea,select {height:38px; padding:6px 10px; background-color:#fff; border:1px solid #D1D1D1; border-radius:4px; box-shadow:none; box-sizing:border-box} input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea {-webkit-appearance:none; -moz-appearance:none; appearance:none} textarea {min-height:65px; padding-top:6px; padding-bottom:6px} input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="text"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="password"]:focus,textarea:focus,select:focus {border:1px solid #33C3F0; outline:0} label,legend {display:block; margin-bottom:.5rem; font-weight:600} fieldset {padding:0; border-width:0} input[type="checkbox"],input[type="radio"] {display:inline} label > .label-body {display:inline-block; margin-left:.5rem; font-weight:normal} ul {list-style:circle inside} ol {list-style:decimal inside} ol, ul {padding-left:0; margin-top:0} ul ul,ul ol,ol ol,ol ul {margin:1.5rem 0 1.5rem 3rem; font-size:90%} li {margin-bottom:1rem; padding-left:1em; text-indent:-1em} code {padding:.2rem .5rem; margin:0 .2rem; font-size:90%; white-space:nowrap; background:#F1F1F1; border:1px solid #E1E1E1; border-radius:4px} pre > code {display:block; padding:1rem 1.5rem; white-space:pre} th,td {padding:12px 15px; text-align:left; border-bottom:1px solid #E1E1E1} th:first-child,td:first-child {padding-left:0} th:last-child,td:last-child {padding-right:0} button,.button {margin-bottom:1rem} input,textarea,select,fieldset {margin-bottom:1.5rem} p input[type="checkbox"] {margin:0 .25em 0 0} pre,blockquote,dl,figure,table,p,ul,ol,form {margin-bottom:1.5rem} .u-full-width {width:100%; box-sizing:border-box} .u-max-full-width {max-width:100%; box-sizing:border-box} .u-pull-right {float:right} .u-pull-left {float:left} hr {margin-top:3rem; margin-bottom:3.5rem; border-width:0; border-top:1px solid #E1E1E1} .container:after,.row:after,.u-cf {content:""; display:table; clear:both} iframe{overflow:hidden; border:0px none} @media (min-width:400px) {} @media (min-width:550px) {} @media (max-width:940px) {.container {padding:0} } @media (min-width:750px) {} @media (min-width:1000px) {} @media (min-width:1200px) {} @media (max-width:1141px) {body > .container{overflow-x:visible} } @media (max-width:500px) {body > .container{overflow-x:hidden} } .hidden{display:none} html{scroll-behavior:smooth} body{position:relative; overflow-x:hidden} /** Scroll to top link */.scrolltop-wrap {box-sizing:border-box; position:absolute; top:12rem; right:2rem; bottom:0; pointer-events:none; -webkit-backface-visibility:hidden; backface-visibility:hidden; z-index:1} @supports (-moz-appearance:meterbar) {.scrolltop-wrap {clip:rect(0,3rem,auto,0)} } .scrolltop-wrap a {position:fixed; position:-webkit-sticky; position:sticky; top:-5rem; width:3rem; height:3rem; margin-bottom:-5rem; transform:translateY(100vh); -webkit-backface-visibility:hidden; backface-visibility:hidden; display:inline-block; text-decoration:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; pointer-events:all; outline:none; overflow:hidden} .scrolltop-wrap a svg {display:block; border-radius:50%; width:100%; height:100%} .scrolltop-wrap a svg path {transition:all 0.1s} .scrolltop-wrap a #scrolltop-arrow {transform:scale(0.66); transform-origin:center} @media print {.scrolltop-wrap {display:none!important} } i.chevron {border:solid black; border-width:0 3px 3px 0; display:inline-block; padding:3px} i.chevron.right {transform:rotate(-45deg)} i.chevron.left {transform:rotate(135deg); margin-left:2px} i.chevron.up {transform:rotate(-135deg)} i.chevron.down {transform:rotate(45deg)} .hyphenate, .hyphenate p,.hyphenate li,.hyphenate h4 {word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; -webkit-hyphenate-before:2; -webkit-hyphenate-after:3; -webkit-hyphenate-limit-lines: 2; -webkit-hyphenate-limit-chars:auto 3} .no-hyphens, .no-hyphens * {-ms-word-break:break-all; word-break:break-all; word-break:break-word; -webkit-hyphens:none; -moz-hyphens:none; hyphens:none} .nobr {white-space:nowrap} .cf:before,.cf:after,.clearfix:before,.clearfix:after {content:" "; display:table} .cf:after,.clearfix:after {clear:both} .footer {position:absolute; right:0; bottom:0; left:0} /* Footer will always be at the bottom, even if the page does not have enough content to push it there; but it is not sticky. */ @media print {.container:after,.row:after,.u-cf {content:""; display:block; clear:both} html, body {border:1px solid #fff; height:99%; page-break-after:avoid; page-break-before:avoid} header,footer,#menu{display:none!important} } :root { --ON: initial; --OFF: ; --blau: #242e7c; --rot: #c90c0f; --gelb: #fd0; --weiss: #fff; --grauton: 210, 13%; --l0: 0%; --l1: 17%; --l2: 32%; --l3: 47%; --l4: 64%; --l5: 81%; --l6: 93%; --l7: 100%; --grau0: hsl(var(--grauton), var(--l0)); --grau1: hsl(var(--grauton), var(--l1)); --grau2: hsl(var(--grauton), var(--l2)); --grau3: hsl(var(--grauton), var(--l3)); --grau4: hsl(var(--grauton), var(--l4)); --grau5: hsl(var(--grauton), var(--l5)); --grau6: hsl(var(--grauton), var(--l6)); --grau7: hsl(var(--grauton), var(--l7)); --touch-target:44px; --content-width:70rem; --box-width:1140px; --text-width:45rem; --padding:2rem; --double-padding: calc(var(--padding) * 2); --half-padding: calc(var(--padding) / 2); --negative-padding: calc(var(--padding) * -1); --background:#eee; --text:#333; --text-inverted:#fff; --block-background:#fff; --border-radius:.5rem; --footer-height:6rem; --floating-links:2; --transition: .2s ease-in-out; --blur:3px; --close4:calc(var(--touch-target) / -4) } *.only-ie {display:none} /* Only IE10+ */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .slideshow.container.main-slideshow,.slideshow.container.main-slideshow > *,.slideshow.container.main-slideshow > * > ul {padding:0; height:375px; overflow:auto hidden} *.only-ie {display:block; padding:2em 0; max-width:1141px; margin:2em auto} main {display:none; } } :nth-child(1):nth-last-child(1), :nth-child(1):nth-last-child(1) ~ * {--siblings: 1; } :nth-child(1):nth-last-child(2), :nth-child(1):nth-last-child(2) ~ * {--siblings: 2; } :nth-child(1):nth-last-child(3), :nth-child(1):nth-last-child(3) ~ * {--siblings: 3; } :nth-child(1):nth-last-child(4), :nth-child(1):nth-last-child(4) ~ * {--siblings: 4; } :nth-child(1):nth-last-child(5), :nth-child(1):nth-last-child(5) ~ * {--siblings: 5; } :nth-child(1):nth-last-child(6), :nth-child(1):nth-last-child(6) ~ * {--siblings: 6; } :nth-child(1):nth-last-child(7), :nth-child(1):nth-last-child(7) ~ * {--siblings: 7; } :nth-child(1):nth-last-child(8), :nth-child(1):nth-last-child(8) ~ * {--siblings: 8; } :nth-child(1):nth-last-child(9), :nth-child(1):nth-last-child(9) ~ * {--siblings: 9; } :nth-child(1):nth-last-child(10), :nth-child(1):nth-last-child(10) ~ * {--siblings: 10; } :nth-child(1):nth-last-child(11), :nth-child(1):nth-last-child(11) ~ * {--siblings: 11; } :nth-child(1):nth-last-child(12), :nth-child(1):nth-last-child(12) ~ * {--siblings: 12; } body {font-size:1.4em} hr {width:100%} /* -------------------------------- */ .clearer,.float-clear {clear:both} .spacer0 {margin:0; padding:0; border:0; pointer-events:none; opacity:0} .spacer21 {margin:0; padding:21px 0 0; border:0; pointer-events:none; opacity:0} .spacer35 {margin:0; padding:35px 0 0; border:0; pointer-events:none; opacity:0} .spacer70 {margin:0; padding:70px 0 0; border:0; pointer-events:none; opacity:0} hr.padding {margin:0; padding:var(--padding) 0 0; border:0; pointer-events:none; opacity:0} br.only.mobile {display:none} @media (min-width:48em) and (hover: hover) {.mobile-only{display:none} } @media (max-width:48em){.no-mobile{display:none} } .no-sr{display:none} @media screen,print {.sr-only{display:none} .no-sr{display:unset} } .float-left {float:left; margin-right:1em; width:auto; height:auto} /* Bilder im Text: Breite 360px */ .float-right {float:right; margin-left:1em; width:auto; height:auto} @media (max-width:400px) {.float-left,.float-right{margin-left:0; margin-right:0} } @media (max-width:600px) {.float-left,.float-right{width:100%; max-height:none!important; float:none; margin-left:0; margin-right:0} } @media (min-width:400px) {.float-left,.float-right{max-height:600px} } @media (min-width:600px) {.float-left,.float-right{max-width:50%} } @media (min-width:900px) {.float-left,.float-right{max-width:35%} } div.col img {width:100%; object-fit:contain} img {width:100%; margin-bottom: 1.5em} input[type="checkbox"].toggle {display:none} h1 {font-size:2.25em; hyphens:none} .hyphenate .no-hyphens {hyphens:none} .info {float:right; clear:right; width:auto; height:auto; margin:0 0 var(--padding) var(--padding)} img.info {max-height:743px; min-height:0!important} @media (max-width:399px) {.info{display:none} } @media (min-width:400px) {img.info{max-width:20%} div.info{max-width:100%} } @media (min-width:500px) {img.info{max-width:21%} div.info{max-width:100%} } @media (max-width:600px) {div.info{float:none; margin:0 0 21px} } @media (min-width:600px) {img.info{max-width:22.5%} div.info{max-width:40%} } @media (min-width:900px) {img.info{max-width:25%} div.info{max-width:30%} } .big {transform:scale(1.3333)} .center {text-align:center; width:100%; display:block; } .right {text-align:right} .margin {margin-top:3em; margin-bottom:3em} /* Header */ div#top {float: right; max-width: calc(100vw - var(--touch-target) - var(--padding)); text-align: right; ;} div#top a {padding: .5em 1.5em; line-height:2em; display:inline-block; flex:1 0 10%; text-align: center; white-space: nowrap; } div#top a#gmbh,div#top a#dd,div#top a#dg {flex-basis:56%; text-align:right} body.deterding__dd #dd,body.deterding__dg #dg {display:none} div#top a,div#top a:hover {text-decoration:none} div#top a:hover {opacity:.7} @media (max-width:699px) {div#top {width:80%} } @media (max-width:599px) {div#top a#gmbh span,div#top a#dd span,div#top a#dg span {display:none} } @media (max-width:559px) {div#top a#gmbh,div#top a#dd,div#top a#dg {display:none} } header {width:100%; height:auto; margin:0; background:#fff; position:-webkit-sticky; position:sticky; z-index:700} div#logos {width:90%; padding:90px 5% 45px; display:flex; flex-direction:row-reverse; justify-content:space-between; height:auto} a#deterding img,a#deterding svg {height:110px; max-width:100%; margin:0} a#kaerchercenter img,a#kaerchercenter svg {height:105px; width: auto; margin:20px 0 0} a#deterding img,a#deterding svg {height:7vw; margin:0; width:auto; max-width:35em; } /* {height:69px; margin:0} */ a#qualitaet-erleben svg {height:7vw; margin:0; width:auto; } .deterding__dg a#deterding svg {height: 11vw; margin-bottom: -3.5vw; } @media (max-width:749px) {header {position:static} } @media (max-width:599px) { div#logos {flex-direction:column; padding-top:45px} div#logos a#deterding,div#logos a#kaerchercenter {display:block; text-align:center} header div#logos a img,header div#logos a svg {height:100px; width:auto; max-width:80%} a#kaerchercenter img {margin-right:28px} /* 399 */ } /* Breadcrumb */ #breadcrumb {padding:14px 21px} #breadcrumb a,#breadcrumb span {color:rgb(74,84,94); font-size:14px; font-weight:normal; text-decoration:none; background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 170"%3E%3Cpath fill="none" stroke="rgb(74,84,94)" stroke-width="35" stroke-linecap="square" d="M35 135l50-50-50-50"/%3E%3C/svg%3E'); background-position:14px 50%; background-repeat:no-repeat; background-size:10.5px; padding-left:35px} #breadcrumb a:hover {text-decoration:underline; color:#000; background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 170"%3E%3Cpath fill="none" stroke="%23000" stroke-width="35" stroke-linecap="square" d="M35 135l50-50-50-50"/%3E%3C/svg%3E')} /* MENÜ -------------------------------------------------------------------------------------------------------------------- */ /* Ziel: Für jedes Menü-Element, bei dem sich Eigenschaften ändern sollen, werden drei Werte angegeben: 1: Hover-State, 2: Active-State, 3: Normal-State Diese werden zunächst alle definiert, Hover und Active danach mittels …:initial geleert. Aktiviert werden können sie dann einfach durch --XXX-hover:revert; --menu0-bg-shape:var(--m0bgs-h,var(--m0bgs-a,var(--m0bgs-n))); --menu0-color:var(--m0c-h,var(--m0c-a,var(--m0c-n))); --m0bgs-h:initial; --m0c-h:initial; --m0bgs-a:initial; --m0c-a:initial; */ #menu li#top {background-color:#ddd!important; } #menu li#top p a {background-color:transparent!important; } #menu li#top p a:hover {color:#fff!important} header {background:#fff; } nav { --menu0-bg-color:var(--grau4); } #menu { --m0bgs-n:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1920" height="49"%3E%3Cpath fill="hsl(210,13%25,64%25)" d="M24 0h1894v49H0z"/%3E%3C/svg%3E'); --m0c-n:var(--grau7); --m0bgs-h:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1920" height="49"%3E%3Cpath fill="hsl(210,13%25,32%25)" d="M24 0h1894v49H0z"/%3E%3C/svg%3E'); --m0c-h:var(--grau7); --m0bgs-a:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1920" height="49"%3E%3Cpath fill="hsl(210,13%25,93%25)" d="M24 0h1894v49H0z"/%3E%3C/svg%3E'); --m0c-a:var(--grau0); --m0bg-home:url('data:image/svg+xml,%3Csvg version="1.1" xmlns="http://www.w3.org/2000/svg" width="292" height="206"%3E%3Cstyle%3Epath%7Bfill:hsl(210,13%25,100%25); %7D%3C/style%3E%3Cpath d="M125 0L93 58c-7 11-19 11-19 11H0l26-47C38 0 61 0 61 0h64zm20 137s-14 0-19 9l-34 60h67s19 0 25-12l32-57h-71zM215 0s-8 0-13 9l-34 60h74s12 0 19-12l31-57h-77z"/%3E%3C/svg%3E'); --m1bg-n:transparent; --m1c-n:var(--grau1); --m1bg-h:var(--grau2); --m1c-h:var(--grau7); --m1bg-a:var(--grau5); --m1c-a:var(--grau7); } nav.container {padding:0; } /* Menu Icon (nur mobil) */ .menu__icon {cursor:pointer; position:absolute; z-index:100; top:2px; right:2px; display:inline-block; } .menu__icon.collapsed {padding:14px 0 0; width:42px; height:21px; } .menu__icon.expanded {padding:0; width:44px; height:44px; background:transparent; } .menu__icon.collapsed span,.menu__icon span:before,.menu__icon span:after {cursor:pointer; height:5px; width:42px; position:absolute; display:block; content:''; } .menu__icon.collapsed span:before {top:-10px; } .menu__icon.collapsed span:after {bottom:-10px; } .menu__icon.collapsed span,.menu__icon span:before,.menu__icon span:after {transition:all 250ms ease-in-out; } #menu .menu__icon.collapsed {display:block; pointer-events:all; } #menu .menu__icon.expanded {display:none; } #menu:target {width:100%; } #menu:target .menu__icon.collapsed {pointer-events:none; } #menu:target .menu__icon.expanded {display:block; } #menu:target .menu__icon span {background-color:rgba(255,255,255,0); margin-top:7px; } #menu:target .menu__icon span:before,#trigger:checked + .menu__icon span:after {top:0px; } #menu:target .menu__icon span:before {transform:rotate(45deg); background-color:rgba(255,255,255,1); } #menu:target .menu__icon span:after {transform:rotate(-45deg); bottom:0; background-color:rgba(255,255,255,1); } .menu__icon {position:absolute; top:3px; left:9px; border-radius:3.5px; background:transparent} .menu__icon span,.menu__icon span:before,.menu__icon span:after {background:var(--menu-icon-dark)} .menu__icon {border-radius:3.5px; } .menu__icon span,.menu__icon span:before,.menu__icon span:after {background:rgba(74,84,94,1); } .menu__icon {background:transparent; } @media (min-width:750px) and (hover: hover) {#menu .menu__icon.collapsed,#menu .menu__icon.expanded {display:none; } } /* MENU */ #menu {position:absolute; top:0; margin:0 auto; z-index:210; overflow:visible} #menu * {transition:var(--menu-transition)} #menu ul {width:100%; list-style:none; margin:0; padding:0; overflow:hidden} #menu ul.menu__submenu {overflow:hidden; padding-left:0; margin:0} #menu > ul {position:absolute; top:0; left:-100%; padding:70px 0 2em; font-size:1.4em; max-width:350px; box-shadow:0px 2px 5px hsla(var(--grauton),var(--l0),.5)} #menu:target > ul {left:0; background:var(--grau2); width:100%; } #menu:target > ul > li {background-size:cover; background-position:5% 0} #menu li {margin:0; padding:0; text-indent:0; position:relative; min-height:var(--touch-target)} #menu li:nth-last-child(2) li a {padding:.7em .35em .7em 1.4em; } #menu li#home a::before {content:'Zur Startseite'} #menu li > button {position:absolute; width:var(--touch-target); height:var(--touch-target); top:0; right:0; pointer-events:none; z-index:100; background:transparent; text-indent:-9999em} #menu li > button::after {position:absolute; width:0; height:0; top:0; right:1em; pointer-events:none; z-index:100; content:''; border:solid var(--grau7); border-width:0 3px 3px 0; display:inline-block; padding:3px; transform:rotate(45deg)} #menu li:focus > button,#menu li:focus-within > button:not(:focus) {z-index: 10; pointer-events:all} #menu li ul,#menu li:focus-within > button:focus~ul {max-height:0} #menu li {position:sticky} #menu li:focus-within > ul {max-height:unset} #menu li:not(:focus-within) > button::after,#menu li:focus-within > button:focus::after{transform:rotate(45deg); margin-top:24px; transition:.2s ease-in-out} #menu li:focus-within > button:not(:focus)::after{transform:rotate(225deg); margin-top:28px; transition:.2s ease-in-out} #menu #subnavigation li {padding:0; text-indent:0; } #menu li {color:var(--grau7)} #menu li a,#subnavigation li a {display:block; text-decoration:none; padding:1em; color:currentcolor} /* var(--grau7); */ #menu li a {background:transparent} #menu li li a {margin-left:1em; padding:.7em 1.4em .7em .35em; } #menu li li li a {margin-left:2em; } #menu > ul > li {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between} #menu li .menu__submenu li {background:var(--grau5)} #menu li .menu__submenu li > a {color:var(--grau0)} #menu li:focus,#menu li .menu__submenu li:focus,#menu li li:focus, #menu li .menu__submenu li li:focus {background-color:var(--m1bg-a); color:var(--m1c-a)} #menu li .menu__submenu li:focus > a,#menu li .menu__submenu li:focus-within > a {color: inherit; } #menu li a + ul {max-height:0} #menu:target li#suche {padding-top:var(--padding)} #menu:target li#suche input[type="submit"] {height:38px; padding:.25em 1em!important} #menu > ul > li > a:not(:last-child)::before {border-top-color:currentcolor; } #menu > ul > li:hover > a:not(:last-child)::before, #menu > ul > li:focus > a:not(:last-child)::before {border-top-color:transparent!important; } #menu > ul > li {flex-basis:15%; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { nav {position:sticky; top:0; left:0; width:100%; height:auto; background:var(--menu0-bg-color); padding:0; z-index:999} } @media (min-width:750px) and (hover: hover) { #menu {position:relative; margin:0 auto 20px; padding: 0 calc((100vw - 1141px) / 2)} /* Alle Ebenen */ #menu ul,#menu ul.menu__submenu {overflow:visible} #menu li > button {display:none} #menu li {text-align:center; flex:1; border:0px none; min-height:0} #menu li a,#subnavigation li a {color:var(--grau2); } #menu li a,#menu ul li,#menu ul li a,#menu ul li li a,#subnavigation li a {margin:0; border:0px none} #menu li a {height:28px} /* Ausklapp-Dreieck */ #menu li a:not(:last-child)::before {content:''; position:absolute; height:0; width:0; top:50%; right:5px} /* Erste Ebene */ #menu > ul {display: flex; flex-direction: row; position: static; background: transparent; padding-bottom: 0; font-size: 1em; height: 49px; width: 100%; max-width: var(--box-width); box-shadow: none; padding-top: 0; padding-left: 24px; } #menu > ul > li {display:block} #menu:target > ul > li {background-position:unset; background-size:unset} #menu > ul > li > a:not(:last-child):before {border:5px solid transparent; right:auto; left:50%; top:auto; bottom:2px; } #menu > ul > li > a:not(:last-child):before {border-top-color:currentcolor; } #menu > ul > li:hover > a:not(:last-child):before, #menu > ul > li:focus > a:not(:last-child)::before {border:5px solid transparent; } #menu > ul > li,#menu > ul::after {background:transparent top left no-repeat; margin-left:-24px; } #menu > ul > li,#menu > ul::after {background-color:transparent!important; background-image:var(--m0bgs-n)} #menu > ul::after {content: ''; max-width: 3.25%; pointer-events: none; border-bottom: 0px none; position: relative; z-index: 100; width: 100%; margin-right: -16px; } #menu li > a {color:inherit} #menu > ul > li:hover, #menu > ul > li:focus {background-image:var(--m0bgs-h)!important} #menu > ul > li > a, #menu > ul > li > a:hover, #menu > ul > li:focus > a, #menu > ul > li > a:focus {background:transparent; font-weight:normal; font-size:1.25em; padding:10.5px; } #menu > ul > li {color:var(--m0c-n)} #menu > ul > li:hover, #menu > ul > li:focus {color:var(--m0c-h)!important} #menu > ul > li#home {max-width:12%; } li#home a {background:var(--m0bg-home) 56% 49% no-repeat!important; background-size:28px!important; } #menu li#home a::before {content:''} li#suche {max-width:10%; } /* ab zweiter Ebene */ #menu li ul {left:0; width:14.25em; margin-left:0; border-left: 4px solid var(--grau2); } #menu li > ul {opacity:0; pointer-events:none} #menu li a:hover + ul, #menu li a + ul:hover, #menu li:focus > a + ul, #menu li a:focus + ul, #menu li:focus-within > ul {max-height: unset; opacity: 1; transition: max-height, opacity .1s ease-in-out .25s; z-index:1000; pointer-events: all; } #menu li li {text-align:left} #menu li li a {height:auto; } /**/ /* Die Definitionen der Farben müssen zusammengefasst werden! */ #menu li li:hover, #menu li li:focus {background-color: var(--m1bg-h)!important; color: var(--m1c-h)!important; } #menu li li:hover > a, #menu li li:focus > a {color:inherit} /**/ #menu li li a:not(:last-child):before {border:5px solid transparent; margin-top:-5px} #menu li li:hover > a:not(:last-child)::before, #menu li li:focus > a:not(:last-child)::before {border:5px solid transparent; right:10px; } #menu li li ul {z-index:300; position:absolute; top:0; left:calc(15.5em + 3px); width:21em; } #menu li li a:not(:last-child):before {border-left-color:currentcolor} #menu li li:hover > a:not(:last-child)::before, #menu li li:focus > a:not(:last-child)::before {border-right-color:currentcolor; } #menu ul ul {background:hsla(var(--grauton),var(--l6),.95); box-shadow:3.5px 7px 14px -7px hsla(var(--grauton),var(--l0),1); } #menu li .menu__submenu li:not(:hover) {background-color:transparent} } /* Suchfeld überlagert das Hauptmenü */ li#suche form {padding:21px} li#suche input[type="text"] {width:60%; border-radius:7px 0 0 0; } li#suche input[type="submit"] {width:40%; margin:0; border-radius:0 0 7px 0; } @media (min-width:750px) { li#suche form {padding:0; width:auto; } li#suche {margin:-63px 0 0; display:inline-block; height:49px; float:right; padding:0; position:relative; overflow:hidden} li#suche:focus-within {position:absolute; max-width:1141px; width:3000px; margin: 0 auto; transition:width .4s cubic-bezier(0.000,0.795,0.000,1.000); } li#suche:focus-within form {position:absolute; right:0; max-width:100%; width:3000px; } li#suche:focus-within form input[type="text"] {border-bottom-left-radius:0; background: transparent url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1920" height="49"%3E%3Cpath fill="%23fff" d="M24 0h1894v49H0z"/%3E%3C/svg%3E') top left no-repeat; } #menu input[type="text"] {height:49px; width:0px; font-size:28px; display:inline-block; font-weight:100; border:none; outline:none; color:#555; padding:10px 80px 10px 35px; position:absolute; top:0; right:0; background:none; z-index:3; transition:width .4s cubic-bezier(0.000,0.795,0.000,1.000); cursor:pointer; border-radius:0; } li#suche input[type="text"]:focus {width:100%; z-index:1; border:0px none; cursor:text; background-color:rgba(255,255,255,1); } li#suche input[type="submit"] {width:135px; height:49px; display:inline-block; float:right; background:transparent url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 317 205"%3E%3Cstyle%3Epath%7Bfill:none; stroke:%23fff; %7D%3C/style%3E%3Cpath stroke-width="31" d="M65.4 174.5a82.9 82.9 0 1066.2-152 82.9 82.9 0 00-66.2 152z"/%3E%3Cpath stroke-width="38" stroke-linecap="round" d="M297.3 184.9l-114.6-49.8"/%3E%3C/svg%3E') 65% 50% no-repeat; background-size:28px; text-indent:-10000px; border:none; position:absolute; top:0; right:0; z-index:2; cursor:pointer; border-radius:0; opacity:1; transition:opacity .4s ease; } li#suche input[type="submit"]:hover {background-color:transparent!important; opacity:0.5; } li#suche:focus-within input[type="submit"] {width:135px; height:49px; display:inline-block; float:right; background:transparent url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 317 205"%3E%3Cstyle%3Epath%7Bfill:none; stroke:%23535E69; %7D%3C/style%3E%3Cpath stroke-width="31" d="M65.4 174.5a82.9 82.9 0 1066.2-152 82.9 82.9 0 00-66.2 152z"/%3E%3Cpath stroke-width="38" stroke-linecap="round" d="M297.3 184.9l-114.6-49.8"/%3E%3C/svg%3E') 66.667% 50% no-repeat; background-size:28px; } #menu li:nth-child(3) .menu__submenu li:nth-last-child(3) ul.menu__submenu {transform:translateY(calc(var(--touch-target) * 8 * -1))} #menu li:nth-child(3) .menu__submenu li:nth-last-child(6) ul.menu__submenu {transform:translateY(calc(var(--touch-target) * 6 * -1))} #menu li:nth-child(3) .menu__submenu li:nth-last-child(7) ul.menu__submenu {transform:translateY(calc(var(--touch-target) * 4 * -1))} #menu li:nth-child(3) .menu__submenu li:nth-last-child(8) ul.menu__submenu {transform:translateY(calc(var(--touch-target) * 3 * -1))} #menu li:nth-child(3) .menu__submenu li:nth-last-child(10) ul.menu__submenu {transform:translateY(calc(var(--touch-target) * 2 * -1))} #menu li:nth-child(4) .menu__submenu li:nth-last-child(1) ul.menu__submenu {transform:translateY(calc(var(--touch-target) * 5 * -1))} } /* Sticky Dropshadow /// based on https://stijndewitt.com/2018/06/12/pure-css-drop-shadow-on-scroll/ */ nav {position:absolute; top:0; left:0; width:100%; height:auto; background:var(--menu0-bg-color); padding:0; } nav > .container {padding:0; } @media (min-width:750px) and (hover: hover) { nav {position:sticky; top:0; z-index:500; width:100%; height:49px; margin:0; padding:0; -webkit-backface-visibility:hidden; } nav::before,nav::after {content:''; position:sticky; -webkit-position:sticky; display:block; height:14px; margin-bottom:-14px} nav::before {top:35px; box-shadow:0px 2px 5px rgba(0,0,0,0.5); } nav > div::before {content:''; position:absolute; background:var(--grau4); top:0; right:0; bottom:0; left:0; width:100vw; height:49px} nav > div {position:sticky; -webkit-position:sticky; top:0px; z-index:3; width:100%; height:49px; background:#a9aeb4; margin-top:-14px; } nav > div ul {margin-top:-14px} .menu__sticky #menu {top:0; position:fixed; width:100%; } .menu__sticky #menu > ul {top:0; background:rgba(255,255,255,0.9); } .menu__sticky [id]::before {content:''; display:block; height:125px; margin:-105px 0 0; pointer-events:none; visibility:hidden; } } nav {max-height:unset; overflow:visible} /* Bei einer bestimmten Breite werden beim letzten Menüpunkt die Untermenüs der dritten Ebene aus Platzgründen links statt rechts angezeigt.*/ @media only screen and (min-width:750px) and (max-width:1280px) { #menu li:nth-last-child(2) li > a:not(:last-child):before {border:5px solid transparent; left:0px; } #menu li:nth-last-child(2) li:hover > a:not(:last-child):before {left:5px; } #menu ul li:nth-last-child(2) li ul {top:0; left:calc(-22em + 7px); width:21em; border:0px none; border-right:4px solid #535E69; } #menu li:nth-last-child(2) li a:not(:last-child):before {border-left-color:transparent; border-right-color:currentcolor; } #menu li:nth-last-child(2) li:hover > a:not(:last-child):before {border-left-color:#fff; border-right-color:transparent; } } /* Header */ div#top {background: var(--grau6); color: var(--text); } div#top .partner {background-color: var(--grau3); color: var(--text-inverted)!important; } div#top a.partner::before {content: 'zum '; } body.deterding__dd div#top span.partner.dd, body.deterding__dg div#top span.partner.dg {display: none; } div#top a#gmbh,div#top a#dg {background-color:#a9aeb4; color:#fff!important; } div#top a#gmbh:hover,div#top a#dg:hover {background-color:#535E69; } div#top a#gmbh,header div#top a#dd {background-color:#a9aeb4; color:#fff!important; } div#top a#gmbh:hover,header div#top a#dd:hover {background-color:#535E69; } a#qualitaet-erleben,a#jubilaeum-fachmarkt-nienburg {display:none} @media (min-width:42em) { a#qualitaet-erleben {display:flex; width:240px} a#jubilaeum-fachmarkt-nienburg {display:flex; max-width:120px; width:100%} } /* Submenü, bspw. Grills */ div#submenu {height:50px; overflow:hidden; margin-bottom:-50px; pointer-events:none; position:relative; z-index:100} div#submenu:hover {overflow:visible; pointer-events: all; height: auto; } div#submenu.nohover {overflow:hidden; pointer-events:none} div#submenu > div {border:1px solid rgba(221,221,221,0); min-height:50px; overflow:hidden; background:rgba(255,255,255,0); transition: all .2s; margin:0; max-width:100vw; width:100%; position:absolute; right:0} div#submenu:hover > div {border:1px solid rgba(221,221,221,1); min-height:425px; height:auto; width:100.1%; background:rgba(255,255,255,1); transition: all .2s} #submenu > div > a.menu__icon {right:var(--padding); left:unset} #submenu .menu__icon {cursor:auto} #submenu .menu__icon.collapsed span {margin-top:3px} #submenu .menu__icon.collapsed span,#submenu .menu__icon.collapsed span::after,#submenu .menu__icon.collapsed span::before {background-color:rgba(221,221,221,1)} #submenu .menu__icon span,#submenu .menu__icon span:before,#submenu .menu__icon span:after {background-color:#ccc!important; } #submenu > div > a:first-child {pointer-events:all; text-transform:uppercase; font-weight:bold; font-size:calc(var(--touch-target) * .7); color:#ccc; position:absolute; right:calc(var(--touch-target) * 1.7); text-decoration:none} div#submenu > div > ul {opacity:0; padding:calc(var(--touch-target) * 1.5) calc(var(--touch-target) / 2) calc(var(--touch-target) / 2)} div#submenu:hover > div > ul {opacity:1} #submenu ul {column-count:3; column-gap:var(--padding); list-style-type:none; max-width:100vw; width:auto} #submenu ul li {display:inline-block; width:calc(100% - var(--padding)); border:1px solid rgba(221,221,221,1); padding:.5rem 1rem; text-indent:0; background:rgba(221,221,221,.7); margin:0 0 calc(var(--padding) / 2); overflow-x:hidden} #submenu ul li:hover {background:rgba(221,221,221,.3)} #submenu ul li a {display:inline-block; width:100%; text-decoration:none; font-weight:bold; color:#333} .main-slideshow {max-height:var(--slider-height); opacity:1; transition:all .2s ease-in-out .7s} .menu__icon.collapsed span,.menu__icon span:before,.menu__icon span:after {transition:all 250ms ease-in-out; } @media (hover:none) { #submenu .menu__icon.collapsed,#submenu {display:block; pointer-events:all; } #submenu .menu__icon.expanded {display:none; } .menu__icon {position:absolute; z-index:10000; top:2px; right:2px; display:inline-block; } .menu__icon.collapsed {padding:14px 0 0; width:42px; height:21px; } .menu__icon.expanded {padding:0; width:44px; height:44px; background:transparent; } .menu__icon.collapsed span,.menu__icon span:before,.menu__icon span:after {height:5px; width:42px; position:absolute; display:block; content:''; } .menu__icon.collapsed span:before {top:-10px; } .menu__icon.collapsed span:after {bottom:-10px; } div#submenu {margin-bottom:0!important} div#submenu:not(:target) a.menu__icon.collapsed {display:block} div#submenu:target a.menu__icon.collapsed {display:block} div#submenu:not(:target) a.menu__icon.expanded {display:none} div#submenu:target a.menu__icon.expanded {display:block} div#submenu:target a.menu__icon.collapsed span {background-color:transparent!important; margin-top:-5px} div#submenu:not(:target) {height:50px; overflow:hidden; margin-bottom:-50px; pointer-events:none; position:relative; z-index:1000} div#submenu:target {overflow:visible; } div#submenu:target > div {border:1px solid rgba(221,221,221,1); min-height:425px; height:auto; width:100.1%; background:rgba(255,255,255,1); transition: all .2s} div#submenu:target > div > ul {opacity:1} #submenu:target .menu__icon.collapsed {pointer-events:none; } #submenu:target .menu__icon.expanded {display:block; } #submenu:target .menu__icon span:before,#trigger:checked + .menu__icon span:after {top:10px; } #submenu:target .menu__icon span:before {transform:rotate(45deg); } #submenu:target .menu__icon span:after {transform:rotate(-45deg); } } @media (max-width:500px) { div#submenu {margin-bottom:0} div#submenu + #breadcrumb {display:none} #submenu ul {column-count:2} }