@import "reset.css";@font-face{font-family:NunitoSans;src:url(/fonts/Nunito_Sans/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf);font-weight:100 900}@font-face{font-family:SourceSans3;src:url(/fonts/Source_Sans_3/SourceSans3-VariableFont_wght.ttf);font-weight:200 900;font-stretch:100%}:root{--spacing-xxs:.1875rem;--spacing-xs:.25rem;--spacing-s:.5rem;--spacing-m:1rem;--spacing-l:1.5rem;--spacing-xl:2rem;--spacing-xxl:4rem;--btn-border-radius-default:1.5rem;--border-radius-xxs:.0625rem;--border-radius-xs:.125rem;--border-radius-s:.25rem;--border-radius-m:.325rem;--primary-color:var(--primary-100-color);--primary-100-color:#1790e1cf;--primary-200-color:#d350c4;--primary-300-color:#eda81e;--primary-400-color:#0fd49c;--neutral-000-color:#fff;--neutral-050-color:#b2b2b2;--neutral-100-color:#919191;--neutral-200-color:#5f5f5f;--neutral-300-color:#393939;--font-primary:"NunitoSans", helvetica, arial, sans-serif;--font-secondary:"SourceSans3", helvetica, arial, sans-serif;--font-tertiary:"Lato", helvetica, arial, sans-serif;--font-decorative:"Courgette", helvetica, arial, sans-serif;--display-lg-size:2.75rem;--display-lg-weight:800;--display-lg-line-height:1.6;--display-lg-letter-spacing:.025em;--display-md-size:1.25rem;--display-md-weight:800;--display-md-line-height:1.6;--display-md-letter-spacing:.025em;--h1-size:2.75rem;--h1-weight:400;--h1-line-height:1;--h1-letter-spacing:-.01em;--hsub-size:.99rem;--hsub-weight:680;--hsub-line-height:1.6;--hsub-letter-spacing:-.02em;--h2-size:3.8rem;--h2-weight:700;--h2-line-height:1.6;--h2-letter-spacing:-.015em;--h2-text-rendering:"optimizeLegibility";--h3-size:1.1rem;--h3-weight:600;--h3-line-height:1.6;--h3-letter-spacing:.03em;--h4-size:1.07rem;--h4-weight:500;--h4-line-height:1.6;--h4-letter-spacing:.03em;--h5-size:1.05rem;--h5-weight:500;--h5-line-height:1.6;--h5-letter-spacing:.03em;--h6-size:1.03rem;--h6-weight:500;--h6-line-height:1.6;--h6-letter-spacing:.03em;--body-xl-size:1.02rem;--body-xl-weight:400;--body-xl-line-height:1.6;--body-xl-letter-spacing:.03em;--body-size:1rem;--body-weight:400;--body-line-height:1.6;--body-letter-spacing:.03em;--body-text-rendering:"optimizeLegibility";--body-sm-size:.98rem;--body-sm-weight:400;--body-sm-line-height:1.65;--body-sm-letter-spacing:.03em;--caption-lg-size:.97rem;--caption-lg-weight:400;--caption-lg-line-height:1.65;--caption-lg-letter-spacing:.03em;--caption-size:.95rem;--caption-weight:400;--caption-line-height:1.65;--caption-letter-spacing:.03em;--caption-sm-size:.94rem;--caption-sm-weight:300;--caption-sm-line-height:1.65;--caption-sm-letter-spacing:.03em;--overline-size:.92rem;--overline-weight:500;--overline-line-height:1.65;--overline-letter-spacing:.03em}#startpage{font-size:3vw;@media (width<=768px){font-size:130%}& .colortab__rectangle{height:calc(var(--hsub-size)*.8)}& .colortab__label{height:fit-content}& .headline-1{height:auto;color:var(--neutral-100-color)}& .mainnavi,& .mainnavi__tabgroup{width:auto;height:auto;padding-bottom:5.5vh}}body.grahics{--primary-color:var(--primary-100-color)}body.photo{--primary-color:var(--primary-200-color)}body.film{--primary-color:var(--primary-300-color)}body.\33 d-graphics{--primary-color:var(--primary-400-color)}body{--step-1:color-mix(in srgb, var(--primary-color), white 10%);--step-2:color-mix(in srgb, var(--primary-color), black 2%);--step-3:color-mix(in srgb, var(--primary-color), black 15%);--primary-gradient:linear-gradient(180deg, var(--primary-color) 0%, var(--step-1) 27.88%, var(--step-2) 44.23%, var(--step-3) 100%)}.mainnavi{justify-content:center;gap:calc(var(--spacing-xs)/2);flex-direction:column;width:202px;height:76px;text-decoration:none;display:flex;& a{text-decoration:none}}.mainnavi__tabgroup{gap:var(--spacing-xxs);object-fit:contain;flex-direction:row;justify-content:center;height:30px;display:flex;overflow:hidden}.mainnavi__colortab{gap:calc(var(--spacing-xxs));flex-direction:column;display:flex}.colortab__rectangle{background-color:var(--neutral-100-color);border-radius:var(--border-radius-xxs);width:100%;height:12px;display:inline-block}.colortab__label{font-family:var(--headline-2);font-family:var(--font-secondary);font-size:var(--hsub-size);text-transform:uppercase;letter-spacing:var(--hsub-letter-spacing);font-variation-settings:"wght" var(--hsub-weight),"wdth" 10;white-space:nowrap;text-decoration:none}.mainnavi__colortab.grafiktab{color:var(--neutral-300-color);& .colortab__rectangle{background-color:var(--neutral-300-color)}}.mainnavi__colortab.fototab{color:var(--neutral-200-color);& .colortab__rectangle{background-color:var(--neutral-200-color)}}.mainnavi__colortab.filmtab{color:var(--neutral-100-color);& .colortab__rectangle{background-color:var(--neutral-100-color)}}.mainnavi__colortab.cgrafiktab{color:var(--neutral-050-color);& .colortab__rectangle{background-color:var(--neutral-050-color)}}.mainnavi__colortab.markcolored{color:var(--primary-color);& .colortab__rectangle{background-color:var(--primary-color)}}.mainnavi__colortab{&.grafiktab:hover{color:var(--primary-100-color);& .colortab__rectangle{background-color:var(--primary-100-color)}}&.fototab:hover{color:var(--primary-200-color);& .colortab__rectangle{background-color:var(--primary-200-color)}}&.filmtab:hover{color:var(--primary-300-color);& .colortab__rectangle{background-color:var(--primary-300-color)}}&.cgrafiktab:hover{color:var(--primary-400-color);& .colortab__rectangle{background-color:var(--primary-400-color)}}}*{box-sizing:content-box}body{width:100%;min-height:100vh;font-family:var(--font-primary);letter-spacing:var(--body-letter-spacing);background:radial-gradient(circle,#fff 0%,#d5d5e6 88%) 50%;flex-direction:row;justify-content:center;align-items:center;margin:-2vh 0 0;font-weight:400;display:flex}#mainframe{border-radius:var(--spacing-m);background:#fffaff40;position:relative;box-shadow:0 5px 30px #aaa3}.grid{box-sizing:border-box;width:88vw;height:80vh;padding:calc(var(--spacing-xl) + var(--spacing-s)) var(--spacing-xxl);grid-template-rows:max-content 1fr 40px;grid-template-columns:200px 1fr 160px;gap:3rem;display:grid;overflow:hidden}.header{grid-area:1/1/2/2;justify-content:center;align-items:center;overflow:visible}.nav-subcategories{grid-area:2/1/3/2;justify-content:flex-start;display:flex}footer{flex-direction:column;grid-area:2/1/4/2;justify-content:flex-end;gap:3rem;display:flex;overflow:visible}.artwork{flex-direction:column;grid-area:1/2/3/3;justify-content:center;align-items:center;width:100%;display:flex;overflow:visible}.artwork .fullscreen{z-index:5;background:#c8c8c8f2;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}figure{flex-direction:column;justify-content:center;place-items:center;display:flex;overflow:hidden}img,video{object-fit:contain;max-width:100%;height:fit-content;max-height:100%}svg{shape-rendering:geometricprecision;text-rendering:optimizelegibility}video{max-height:90%}.artwork iframe{width:100%;max-width:100%;max-height:100%}.aside{grid-area:1/3/3/4;justify-content:flex-start;display:flex}.controls{gap:var(--spacing-xs);-ms-flex-direction:row;flex-direction:row;grid-area:3/2/4/3;justify-content:center;align-items:flex-end;display:flex}@media (width<=1280px){body{margin-top:0}#mainframe{height:85vh}.grid{gap:var(--spacing-xl) var(--spacing-xl);width:90vw;min-height:80vh;padding:var(--spacing-xl) calc(var(--spacing-s) * 6);box-sizing:border-box;grid-template-columns:min-content 1fr;display:grid}.header{grid-area:1/1/2/2;justify-self:center;align-items:center;position:sticky;top:0;overflow:visible}.header #mainnavi{align-items:center}.nav-subcategories{justify-content:top;width:max-content;height:0;padding:var(--spacing-s);grid-area:1/1/1/2;display:none!important;overflow:hidden!important}.nav-subcategories--showmobile{z-index:100;justify-self:center;align-items:center;margin-top:5rem;animation:1s ease-in-out forwards rollout;overflow:hidden;display:flex!important;&>*{width:180px}}.nav-subcategories--hidemobile{z-index:100;justify-self:center;align-items:center;margin-top:5rem;animation:1s ease-in-out forwards rollout-hide;overflow:hidden}@keyframes rollout-hide{0%{opacity:1;height:270px;transform:translateY(0%)}to{opacity:0;height:0;transform:translateY(-100%)}}@keyframes rollout{0%{opacity:0;height:0;transform:translateY(-100%)}to{opacity:1;height:270px;transform:translateY(0%)}}footer{flex-direction:column;grid-area:4/1/5/2;align-items:flex-start;gap:3rem;display:flex;position:absolute;bottom:0;overflow:hidden;&>.links{display:none}}.artwork{grid-area:1/2/4/3;max-height:100%}figure{flex-direction:column;justify-content:center;place-items:center;display:flex;&>img{max-width:100%;height:auto}}.aside{grid-area:2/1/4/2;justify-content:left;align-self:center;display:flex;overflow-y:scroll;-webkit-mask-image:linear-gradient(#000 88%,#0000);mask-image:linear-gradient(#000 88%,#0000)}#info_txt{text-align:left;max-height:1fr;padding-bottom:var(--spacing-l);justify-content:flex-start!important;max-width:100%!important}.info-txt__tools>*{display:inline}.controls{grid-area:4/2/5/3}}@media (width<=1024px){#mainframe{height:100vh;padding:var(--spacing-l);padding-bottom:var(--spacing-xxl);border:none;border-radius:0}.grid{gap:var(--spacing-xl) 0;width:100vw;padding:var(--spacing-l) var(--spacing-l);box-sizing:border-box;grid-template-rows:max-content min-content auto;grid-template-columns:auto;display:grid}.header{grid-area:1/1/2/3;align-items:center;position:sticky;top:0;overflow:visible}.nav-subcategories{justify-content:top;width:max-content;height:0;padding:var(--spacing-s);grid-area:1/1/1/3;display:none!important;overflow:hidden!important}.nav-subcategories--showmobile{z-index:100;justify-self:center;align-items:center;margin-top:5rem;animation:1s ease-in-out forwards rollout;overflow:hidden;display:flex!important;&>*{width:180px}}.nav-subcategories--hidemobile{z-index:100;justify-self:center;align-items:center;margin-top:5rem;animation:1s ease-in-out forwards rollout-hide;overflow:hidden}footer{flex-direction:column;grid-area:3/1/4/3;align-self:end;align-items:flex-start;gap:3rem;display:none;position:absolute;bottom:0;overflow:hidden}.artwork{grid-area:2/1/3/3;max-height:40vh}figure{flex-direction:column;justify-content:center;place-items:center;display:flex;&>img{max-width:100%;height:auto}}.aside{grid-area:3/1/4/3;justify-content:center;display:flex;-webkit-mask-image:linear-gradient(#000 88%,#0000);mask-image:linear-gradient(#000 88%,#0000)}#info_txt{text-align:center;max-height:18vh;padding-bottom:var(--spacing-l);justify-content:flex-start!important;max-width:100%!important}.info-txt{font-size:var(--body-sm-size)}.info-txt__tools>*{display:inline}.controls{grid-area:4/1/5/3}}img[src*=logo]{shape-rendering:geometricprecision;max-width:80%;height:85%}img[src*=assets][src*=icon]{padding:var(--spacing-xl);max-width:85%}.body{color:var(--neutral-200-color);letter-spacing:.01rem;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;font-family:NunitoSans,helvetica,arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5}.headline-1{height:44px;font-family:var(--font-secondary);font-size:var(--h1-size);font-variation-settings:"wght" 200, "wdth" 83;text-transform:uppercase;color:var(--neutral-100-color);font-kerning:auto;letter-spacing:var(--h1-letter-spacing);margin-left:-.1rem}.headline-2{font-family:var(--font-secondary);font-size:var(--h2-size);text-transform:uppercase;color:var(--primary-color);letter-spacing:var(--h2-letter-spacing);font-variation-settings:"wght" var(--h2-weight),"wdth" 10;text-rendering:var(--h2-text-rendering);flex-direction:column;justify-content:flex-end;display:flex}.\33 d-graphics .headline-2{font-size:var(--h1-size);text-wrap:nowrap}.headline-3{font-family:NunitoSans,helvetica,arial,sans-serif;font-size:var(--h3-size);font-variation-settings:"wght" 700, "wdth" 95;color:var(--neutral-200-color);font-kerning:auto;line-height:1.3}.headline-4{font-kerning:auto;color:var(--primary-color);font-variant-ligatures:common-ligatures;padding-bottom:var(--spacing-xs);font-size:1rem;line-height:1.3}.info-txt__tools{color:var(--primary-color)}.info-txt__tools__title{text-wrap:nowrap;padding-bottom:var(--spacing-xs);font-weight:640}.category-txt img{display:none}:focus-visible{outline:.2rem solid var(--neutral-100-color);outline-offset:.15rem;z-index:10}.fa{width:calc((var(--body-size))*1.5);height:calc((var(--body-size))*1.5);background-color:var(--primary-color);display:inline-flexbox}.fa-play,.fa-caret-right,#btn-play .fa-caret-left{mask-image:url(/assets/ui-icons/play-arrow-right-icon.svg)}.fa-pause{mask-image:url(/assets/ui-icons/play-pause-icon.svg)}.fa-caret-left{mask-image:url(/assets/ui-icons/play-arrow-left-icon.svg)}#btn-play .fa-caret-right{display:none}button:hover,.stdBtn:hover,div.grafiklink:hover,div.fotolink:hover,div.cglink:hover,div.filmlink:hover{background-blend-mode:darken;filter:saturate(.8)}.btn-default{min-width:100px;max-height:2rem;padding:var(--spacing-s) var(--spacing-l);color:var(--neutral-000-color);cursor:pointer;text-align:center;background:var(--primary-gradient);border:none;flex-direction:row;justify-content:center;gap:.25rem;text-decoration:none;display:flex;box-shadow:0 1px 3px #817f7f9e}.btn-default__label{font-variation-settings:"wght" 700, "wdth" 83;letter-spacing:.01rem;align-items:center;line-height:.5rem;display:flex}.btn-open:before{content:"";font-family:FontAwesome}.controls .btn-default:first-child{border-radius:2px;border-top-left-radius:var(--btn-border-radius-default);border-bottom-left-radius:var(--btn-border-radius-default);padding-left:.75rem}.controls .btn-default:first-child .btn-default__label:before{content:url(/assets/ui-icons/arrow-left-med-icon.svg);color:#fff;margin-left:.2rem;font-size:.8rem;display:flex}.controls .btn-default:first-child:hover .btn-default__label:before{content:url(/assets/ui-icons/arrow-left-med-active-icon.svg);color:#fff;margin-left:.2rem;font-size:.8rem;display:inline-block;position:relative;left:-.35rem}.controls .btn-default:last-child{border-radius:2px;border-top-right-radius:var(--btn-border-radius-default);border-bottom-right-radius:var(--btn-border-radius-default);padding-right:.75rem}.controls .btn-default:last-child .btn-default__label:after{content:url(/assets/ui-icons/arrow-right-med-icon.svg);color:#fff;margin-left:.2rem;font-size:.8rem;display:flex}.controls .btn-default:last-child:hover .btn-default__label:after{content:url(/assets/ui-icons/arrow-right-med-active-icon.svg);color:#fff;margin-left:.2rem;font-size:.8rem;display:inline-block;position:relative;left:0}.btn-default:hover{color:#fff;filter:saturate(80%);text-decoration:none}.btn-play{justify-content:center;align-items:center;gap:var(--spacing-xxs);cursor:pointer;color:var(--primary-color);flex-direction:row;padding:1rem;font-weight:600;display:flex}.nav-subcategories{flex-direction:column;gap:6px;display:flex;overflow:visible}.nav-subcategories__tab{background:var(--primary-gradient);text-align:left;cursor:pointer;color:#fff;border-radius:var(--border-radius-xs);padding:.5rem .75rem;font-size:11pt;font-weight:600;text-decoration:none;display:flex;position:relative;left:0}.nav-subcategories__tab:hover{cursor:pointer;animation:.2s ease-in-out balkenAni;left:6px}.links ul{flex-direction:column;gap:.5rem;display:flex}.links li{flex-direction:row;gap:1rem;display:flex}.contact-link{vertical-align:text-top;color:var(--neutral-200-color);line-height:100%;text-decoration:none;position:relative;left:1.25rem}.contact-link:hover{filter:saturate(.5);text-decoration:underline}.contact-link:before{content:"";background-color:var(--primary-color);width:.75rem;height:.75rem;display:inline-block;position:absolute;top:.03rem;left:-1.25rem}#info_txt{color:var(--neutral-200-color);letter-spacing:.2pt;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;flex-direction:column;justify-content:center;gap:1rem;max-width:10rem;line-height:1.4;overflow:visible;display:flex!important}.info-txt__project{flex-direction:column;gap:.5rem;display:flex}.markCurrentSection{text-align:right;padding-right:12px;left:6px!important}@keyframes balkenAni{0%{left:0}to{left:6px}}#fw_icon{cursor:pointer;position:absolute;top:0;right:0}#grafik-mini_{width:52px;height:25px;position:absolute;top:43px;left:0}#foto-mini_{width:37px;height:25px;position:absolute;top:43px;left:52px}#film-mini_{width:33px;height:25px;position:absolute;top:43px;left:89px}#film_mini{filter:brightness(.94)drop-shadow(0 0 4px #fff)}#grafik_logo{-webkit-margin-top-collapse:separate;-webkit-margin-bottom-collapse:separate;opacity:.85;filter:alpha(opacity=85);-moz-opacity:.85;-khtml-opacity:.85;margin-top:18px;margin-left:0;top:93px;left:0}.u-animate-softblend-from-top,figure{opacity:1;filter:blur();width:100%;height:auto;animation:1.5s softblend-from-top-animation;-webkit-mask-image:linear-gradient(#000 100%,#0000);mask-image:linear-gradient(#000 100%,#0000)}@keyframes softblend-from-top-animation{0%{opacity:0;filter:blur(3px);-webkit-mask-image:linear-gradient(#000 0%,#0000)}to{opacity:1;linear-gradient:(180deg, #000 100%, #000 100%, #000 58%, #000 100%);filter:blur()}}video[poster*=flavor]{scale:1.1;-webkit-mask-image:url(/assets/graphics/flavor-fusion-landingpage.webp);mask-image:url(/assets/graphics/flavor-fusion-landingpage.webp);-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}video[poster*=kaffee]{scale:1.1;-webkit-mask-image:url(/assets/graphics/kaffeedorfshop.webp);mask-image:url(/assets/graphics/kaffeedorfshop.webp);-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}body #artwork.artwork:has(img:not([src*=logo i]):not([src*=icon i])),video{filter:drop-shadow(0 1px 2px #b1b1b1);& img:not([src*=logo i]):not([src*=icon i]){border-radius:var(--border-radius-s)}}.ecoso-iPhone:after{content:url(Inhalte/Grafikdesign/banner-startpage-iPhone-Animation.png);z-index:5;filter:drop-shadow(.2vw .6vw .2vw #b7b7b7);width:16.37%;height:auto;font-size:58px;animation:10s rotateAnimation;display:block;position:absolute;top:45%;right:17.5%;transform:rotate(3deg)scale(1)}@keyframes rotateAnimation{0%{filter:drop-shadow(.2vw .6vw .3vw #aaa);transform:rotate(1deg)scale(.85)}50%{filter:drop-shadow(.3vw .1.2vw 1.5vw #bbb);transform:rotate(5deg)scale(1)}80%{filter:drop-shadow(.2vw 1.2vw .4vw #ababab);transform:rotate(3deg)scale(.98)}1000%{filter:drop-shadow(.2vw .6vw .3vw #b7b7b7);transform:rotate(3deg)scale(1)}}