/*
Mixins
==================================================
The `mixins.less` file contains the imports to all mixin documents that simplify the work with Shopware.

Mixin specific documentation can be found inside each mixin file.

Mixins can be used by adding the mixin class onto an element inside Shopware.

**Example:**<br/>
`.border-radius(3px);`
*/
/*
Appearance mixin
============================================
The mixins provides you a cross-browser compatible method to set the appearance of the element.

Please refer to <http://caniuse.com/appearance> to see the browser support table of the feature.

######Example:
`.appearance([value]);`

`@param {String} type The type you want to use`
*/
/*
Backface visibility mixin
============================================
The mixins provides you a cross-browser compatible method to set the backface-visibility of the element.

Please refer to <http://caniuse.com/transforms3d> to see the browser support table of the feature.

######Example:
`.backface-visibility([value]);`

`@param {String} visibility The visibility you want to use`
*/
/*
Border-radius mixin
=============================================
The mixins provides you a cross-browser compatible method to set a border-radius.

Please refer to <http://caniuse.com/border-radius> to see the browser support table of the feature.

######Syntax:
`@param {String} radius The radius you want to set`<br/>

######Example:
Same border-radius for all edges: <br/>
`.border-radius([pixel-value]);`<br/>

Different border-radius:<br/>
`.border-radius-multi([pixel-value-leftTop], [pixel-value-rightTop], [pixel-value-rightBottom], [pixel-value-leftBottom]);`<br/>

Resetting border radius:<br/>
`.reset-border-radius();`
*/
/*
Box shadow mixin
==============================================
The mixins provides you a cross-browser compatible method to set a box-shadow.

Please refer to <http://caniuse.com/css-boxshadow> to see the browser support table of the feature.

######Example:
`.box-shadow([h-shadow-value], [v-shadow-value], [blur-amount], [spread-amount], [shadow-color]);`

`@param: {Number} x: Offset to the x axis (Default: 0)`<br/>
`@param: {Number} y: Offset to the y axis (Default: 0)`<br/>
`@param: {Number} blur: Bluring radius (Default: 1px)`<br/>
`@param: {String} color: Color of the shadow (Default: #000)`<br/>
*/
/*
Box-sizing mixin
========================================
The mixins provides you a cross-browser compatible method to set the box-sizing which supports IE starting from
version 8 to the newest one.

Please refer to <http://caniuse.com/css3-boxsizing> to see the browser support table of the feature.

######Example:
`.box-sizing:([value]);`

`@param: {String} box-sizing: Box model, which should be used (Default: border-box)`
*/
/*
Clearfix mixin
================================
The clearfix mixin allows the easy integration of the floating-solution method.

The clearfix resolves the problem that occurs when two floating elements are nested inside a parent element, then sometimes the parent elements height disappears.

Add the `.clearfix` class to the parent element.

######Example:
`.clearfix();`

*/
/*
Gradient mixin
====================================================
The mixins provides you a cross-browser compatible method to set a linear gradient which goes from top to bottom.

Please refer to <http://caniuse.com/css-gradients> to see the browser support table of the feature.

Shopware 5 also provides gradient mixins based on the basic color variables that can be changed in the backend theme configuration tool.
######Basic gradients:
`.primary-gradient();`<br/>
`.secondary-gradient();`<br/>
`.white-gradient();`<br/>

######Linear Gradient Example:
`.linear-gradient([startcolor-value], [endcolor-value]);`

`@param {String} start The start color of the gradient`<br/>
`@param {String} end The end color of the gradient`
*/
/*
Opacity
===============================================
The mixins provides you a cross-browser compatible opacity which supports IE starting from version 8 to the
newest one. Safari, Chrome and Firefox are supported in all versions.

Please refer to <http://caniuse.com/css-opacity> to see the browser support table of the feature.

######Example:
`.opacity([value]);`

`@param: {Number} opacity: Value of the opacity, starting from 0 to 1`
*/
/*
Rotate mixin
===============================================
The mixins provides you a cross-browser compatible method to set a transformation which rotates the element. Keep in
mind that you can not mix different transformations.

Please refer to <http://caniuse.com/transforms2d> to see the browser support table of the feature.

######Example:
`.rotate([value]);`

`@param {String} degree The degree value you want to set. Please keep in mind that you need to suffix the unit.`
*/
/*
Scale mixin
===============================
The mixins provides you a cross-browser compatible method to set a transformation which scales the element.
Keep in mind that you can not mix different transformations.

Please refer to <http://caniuse.com/transforms2d> to see the browser support table of the feature.

######Example:
`.scale([value]);`

`@param {String} scale-value The scale value, you want to set`
*/
/*
Touch callout mixin
===========================================
Disables the default callout shown when you touch and hold a touch target.

######Support:
- iOS 2.0<br/>

######Example:
`.touch-callout([value]);`

`@param: {String} type: The type you want to set (Default: none)`
*/
/*
Transform style mixin
======================================
The mixins provides you a cross-browser compatible method to set a transformation style.

Please refer to <http://caniuse.com/transforms3d> to see the browser support table of the feature.

######Example:
`.transform-style([value]);`

`@param {String} Style The style you want for your transformation (Default: preserve-3d)`
*/
/*
Transform origin mixin
======================================
The mixins provides you a cross-browser compatible method to set the transform origin position.

Please refer to <http://caniuse.com/transforms2d> to see the browser support table of the feature.

######Example:
`.transform-origin([x-value],[y-value],[z-value]);`

`@param: x: Sets the origin position on the x axis (Default: 50%)`<br/>
`@param: y: Sets the origin position on the y axis (Default: 50%)`<br/>
`@param: z: Sets the origin position on the z axis (Default: 0)`
*/
/*
Transition mixin
=========================================
The mixins provides you a cross-browser compatible method to set a transition.

Please refer to <http://caniuse.com/css-transitions> to see the browser support table of the feature.

######Example:
`.transition([property], [duration-value], [easing]);`

`@param: {String} properties: The properites which should be animated (Default: all)`<br/>
`@param: {String} duration: Duration of the transition including the unit (Default: 0.3s)`<br/>
`@param: {String} easing: The easing which should be used for the transition (Default: ease-out)`
*/
/*
Translate mixin
============================================
The mixins provides you a cross-browser compatible method to set a transition.

Please refer to <http://caniuse.com/css-transitions> to see the browser support table of the feature.

Keep in mind, that 3d translations are needing an perspective, otherwise the translated elements get skewed up.

######Example:
`.translate([x-value],[y-value],[z-value]);`

`@param: {String} rotateX: The rotation on the x-axis`<br/>
`@param: {String} rotateY: The rotation on the y-axis`<br/>
`@param: {String} rotateZ: The rotation on the z-axis`<br/>
*/
/*
Unitize mixin
================================================
The unitize mixins converts values from px-units to the relative rem-units, providing all the benefits of units like em and rem, without you having to do any calculations yourself.

######Syntax:
`@property` = the property that should be unitized.<br/>
`@value` = pixel-value<br/>
`@baseValue` (optional) = default browser font-size (@remScaleFactor in most cases)<br/>

######Example Unitize mixin with custom property
`.unitize(@property, @value);`<br/>
`.unitize(font-size, 16);`

######Specific built-in functions
In addition to the general `.unitize()` mixin, Shopware contains specific mixins to quickly calculate values which (for example) have more than one property.<br/>
<br/>

`.unitize-height(@value)`<br/>
`.unitize-width(@value)`<br/>
`.unitize-max-height(@value)`<br/>
`.unitize-max-width(@value)`<br/>
`.unitize-min-width(@value)`<br/>
`.unitize-padding(@topValue, @rightValue: @topValue, @bottomValue: @topValue, @leftValue: @rightValue)`<br/>
`.unitize-margin(@topValue, @rightValue: @topValue, @bottomValue: @topValue, @leftValue: @rightValue)`<br/>
`.unitize-variable(@value)`<br/>
*/
/*
User-select mixin
===============================
The mixins provides you a cross-browser compatible method to set a user selection mode.

Please refer to <http://caniuse.com/user-select-none> to see the browser support table of the feature.

######Example:
`.user-select([value]);`

`@param: {String} type: The type you want to set (Default: none)`
*/
/*
Transform mixin
==============================================
The mixins provides you a cross-browser compatible method to set a transformation.

Please refer to <http://caniuse.com/transforms2d> to see the browser support table of the feature.

######Example:
`.transform([value]);`

`@param: {String} properties: The transformation(s) that should be applied`
*/
/*
Tab highlighting mixin
===========================
Sets the color of the highlighting when a link was clicked / tapped.

Please refer to <http://www.browsersupport.net/CSS/-webkit-tap-highlight-color> to see the browser support table of the feature.

######Example:
`.tap-highlight-color([color-value]);`

`@param: {String} color: The color you want to set (Default: rgba(0, 0, 0, 0))`
*/
/*
Keyframe mixin
=============================================
The mixins provides you a cross-browser compatible method to set a keyframe.

Please refer to <http://caniuse.com/#search=keyframe> to see the browser support table of the feature.

######Example:
`.keyframes([name-value], [frames-value]);`

`@param: {String} name: The keyframe animation name`<br/>
`@param: {String} roules: the animation frames`
*/
@-webkit-keyframes keyframe--spin {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes keyframe--spin {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes keyframe--spin-reverse {
  from {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
@keyframes keyframe--spin-reverse {
  from {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
/*
Animations mixin
============================================
The mixins provides you a cross-browser compatible method to set animation values.

Please refer to <http://caniuse.com/css-animation> to see the browser support table of the feature.

######Example:
`.animation([value]);`

`@param: {String} value: All animation values`
*/
/*
Column count mixin
=============================================
This mixin provides you a cross-browser compatible method to set the column count property.

Please refer to <http://caniuse.com/multicolumn> to see the browser support table of the feature.

######Example:
`.column-count([value]);`

`@param: {Number} count: The amount of columns you want to set (Default: auto)`
*/
/*
Hypheration mixin
======================================
The mixins provides you a cross-browser compatible method to set the hyphenation.

Please refer to <http://caniuse.com/css-hyphens> to see the browser support table of the feature.

######Example:
`.hyphens([value]);`

`@param: {String} hyphenation: The hyphenation that should be used (Default: auto)`
*/
/*
Grabbing cursor
==================================
This mixin provides you a cross-browser compatible method to set the cursor grabbing behavior.

######Example:
`.cursorGrab();`<br/>
`.cursorGrabbing();`<br/>

*/
/*
Clear form button mixin
========================
This mixin removes styles from the button element and makes it look like a text link.
*/
/*
All.less
======================================
The `all.less` file imports all style components that will display on the page.

It includes the plugins `normalize` and `pocketgrid`, the open-sans fontface and the specific less files.
*/
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -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 {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
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,
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;
}
/* PocketGrid 1.1.0
* Copyright 2013 Arnaud Leray
* MIT License
*/
/* Border-box-sizing */
.block-group,
.block,
.block-group:after,
.block:after,
.block-group:before,
.block:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* Clearfix */
.block-group {
  zoom: 1;
  /* ul/li compatibility */
  list-style-type: none;
  padding: 0;
  margin: 0;
  /** Nested grid */
}
.block-group:before,
.block-group:after {
  display: table;
  content: "";
  line-height: 0;
}
.block-group:after {
  clear: both;
}
.block-group > .block-group {
  clear: none;
  float: left;
  margin: 0 !important;
}
/* Default block */
.block {
  float: left;
  width: 100%;
}
/* BEGIN Light */
@font-face {
  font-family: 'Open Sans';
  font-display: swap;
  src: local('Open Sans Light'), local('OpenSans-Light'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Light/OpenSans-Light.woff2?da614e0299d38dfa17176df43686595c') format('woff2'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Light/OpenSans-Light.woff?b52ae89c7c86e27145d8ca0f38e31d4e') format('woff'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Light/OpenSans-Light.ttf?850c4c47ecdd4aa88a1147990faf90a4') format('truetype');
  font-weight: 300;
  font-style: normal;
}
/* END Light */
/* BEGIN Regular */
@font-face {
  font-family: 'Open Sans';
  font-display: swap;
  src: local('Open Sans Regular'), local('Open Sans'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Regular/OpenSans-Regular.woff2?abc1dde766bad0de7fdbf89927fbdf50') format('woff2'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Regular/OpenSans-Regular.woff?3a24064dedd0ac24059a715f082e926e') format('woff'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Regular/OpenSans-Regular.ttf?200987e215cc6193bb4734c95d16d908') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* END Regular */
/* BEGIN Semibold */
@font-face {
  font-family: 'Open Sans';
  font-display: swap;
  src: local('Open Sans Semibold'), local('OpenSans-SemiBold'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Semibold/OpenSans-Semibold.woff2?7956103c1c56843768718cfaa81457fc') format('woff2'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Semibold/OpenSans-Semibold.woff?528634fae3f078e07efd758d18b977ef') format('woff'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Semibold/OpenSans-Semibold.ttf?a653d43e419c43b9195e538f493f0a72') format('truetype');
  font-weight: 600;
  font-style: normal;
}
/* END Semibold */
/* BEGIN Bold */
@font-face {
  font-family: 'Open Sans';
  font-display: swap;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Bold/OpenSans-Bold.woff2?77c90833007a9151b6ba950851c07543') format('woff2'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Bold/OpenSans-Bold.woff?c4d47998fab775d8cbe2a60a581fd134') format('woff'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Bold/OpenSans-Bold.ttf?d3621a29d20d45d9ed419ac63b104e53') format('truetype');
  font-weight: bold;
  font-style: normal;
}
/* END Bold */
/* BEGIN Extrabold */
@font-face {
  font-family: 'Open Sans';
  font-display: swap;
  src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/ExtraBold/OpenSans-ExtraBold.woff2?6d32c279ce21105c9b82ebad1fc596ed') format('woff2'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/ExtraBold/OpenSans-ExtraBold.woff?6b1e2b6d315068d5e60652de7e21ade3') format('woff'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/ExtraBold/OpenSans-ExtraBold.ttf?1cfed82e9e55d74e5fd45e365354536b') format('truetype');
  font-weight: 800;
  font-style: normal;
}
/* END Extrabold */
/*
Variables
==================================================
The `variables.less` file contains the imports to all variables that Shopware uses.

Most variables are controllable by using the backend theme manager.

Mixin specific documentation can be found inside each mixin file.
*/
/*
Structure
================================
The variables define the widths for the different viewports.

**Structure**<br/>
`@phoneLandscapeViewportWidth` - viewport phone-landscape width *(default: 480px)*<br/>
`@tabletViewportWidth` - viewport tablet width *(default: 768px)*<br/>
`@tabletLandscapeViewportWidth` - viewport tablet-landscape width *(default: 1024px)*<br/>
`@desktopViewportWidth` - viewport desktop width *(default: 1260px)*<br/>
*/
/*
Typography
================================
The variables define the sizes and weights for typographic elements.

The values can be changed with the backend theme manager.

**Base configuration**<br/>
`@font-size-base` - basic font-size *(default: 14)*<br/>
`@font-base-weight` - basic font-weight *(default: 500)*<br/>
`@font-light-weight` - basic light font-weight *(default: 300)*<br/>
`@font-base-stack` - basic font-family stack *(default: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif)*<br/>
`@font-headline-stack` - basic headline font-family stack *(default: @font-base-stack)*<br/>

**Headling font sizes**<br/>
`@font-size-h1` - h1 element font-size *(default: 26)*<br/>
`@font-size-h2` - h2 element font-size *(default: 21)*<br/>
`@font-size-h3` - h3 element font-size *(default: 18)*<br/>
`@font-size-h4` - h4 element font-size *(default: 16)*<br/>
`@font-size-h5` - h5 element font-size *(default: @font-size-base)*<br/>
`@font-size-h6` - h6 element font-size *(default: 12)*<br/>

**Shopware font directory**<br/>
`@font-directory` - font-directory folder (default: "../../fonts")

**Open Sans font directory**<br/>
`@OpenSansPath` - "Open Sans" font-directory folder (default: "./../fonts/open-sans-fontface")


*/
/*
Z-Index
================================
The z-index variables list all different values for the z-index layers used inside the Shopware responsive theme.

**badge.less**<br/>
`@zindex-badge` - *(default: 500)*<br/>

**checkbox.less**<br/>
`@zindex-checkbox-state` - *(default: 60)*<br/>
`@zindex-checkbox-element` - *(default: 65)*<br/>

**collapse.less**<br/>
`@zindex-collapse-content` - *(default: 1000)*<br/>
`@zindex-collapse-header` - *(default: 1100)*<br/>
`@zindex-collapse-content-collapsed` - *(default: 1200)*<br/>
`@zindex-collapse-header-active` - *(default: 1300)*<br/>

**collapse-cart.less**<br/>
`@zindex-collapse-cart` - *(default: 3000)*<br/>
`@zindex-collapse-cart-offcanvas` - *(default: 8000)*<br/>

**datepicker.less**<br/>
`@zindex-datepicker` - *(default: 8100)*<br/>

**emotions.less**<br/>
`@zindex-emotion-mapping-link` - *(default: 110)*<br/>
`@zindex-emotion-image-slider-title` - *(default: 100)*<br/>
`@zindex-emotion-product-slider-content` - *(default: 400)*<br/>
`@zindex-emotion-product-slider-title` - *(default: 500)*<br/>
`@zindex-emotion-overlay` - *(default: 1000)*<br/>
`@zindex-emotion-video-element` - *(default: 1000)*<br/>
`@zindex-emotion-video-text` - *(default: 1100)*<br/>
`@zindex-emotion-video-play-btn` - *(default: 1200)*<br/>
`@zindex-emotion-video-cover` - *(default: 1300)*<br/>

**filter-panel.less**<br/>
`@zindex-filter-panel-flyout` - *(default: 500)*<br/>
`@zindex-filter-panel-flyout-collapsed` - *(default: 800)*<br/>
`@zindex-filter-panel-checkbox` - *(default: 65)*<br/>
`@zindex-filter-panel-checkbox-state` - *(default: 60)*<br/>
`@zindex-filter-panel-radio` - *(default: 65)*<br/>
`@zindex-filter-panel-radio-state` - *(default: 60)*<br/>
`@zindex-filter-panel-media-checkbox` - *(default: 65)*<br/>
`@zindex-filter-panel-rating-star` - *(default: 65)*<br/>


**image-gallery.less**<br/>
`@zindex-image-gallery-button` - *(default: 1)*<br/>

**image-slider.less**<br/>
`@zindex-image-slider` - *(default: 1000)*<br/>
`@zindex-image-slider-arrow` - *(default: 1000)*<br/>

**image-zoom.less**<br/>
`@zindex-image-zoom-flyout` - *(default: 2500)*<br/>

**loading-indicator.less**<br/>
`@zindex-loading-indicator` - *(default: 6000)*<br/>

**menu-scroller.less**<br/>
`@zindex-menu-scoller-arrow` - *(default: 750)*<br/>

**modal.less**<br/>
`@zindex-modalbox` - *(default: 7000)*<br/>

**offcanvas-menu.less**<br/>
`@zindex-offcanvas` - *(default: 8000)*<br/>
`@zindex-offcanvas-higher-viewport` - *(default: 1000)*<br/>

**overlay.less**<br/>
`@zindex-overlay` - *(default: 5000)*<br/>

**panel.less**<br/>
`@zindex-panel-arrow` - *(default: 2000)*<br/>
`@zindex-panel-link` - *(default: 2000)*<br/>

**product-slider.less**<br/>
`@zindex-product-slider` - *(default: 750)*<br/>

###Modules

**cart.less**<br/>
`@zindex-cart-product-image-element` - *(default: 500)*<br/>
`@zindex-cart-premium-product-badge` - *(default: 750)*<br/>

**compare.less**<br/>
`@zindex-compare-list` - *(default: 4000)*<br/>

**configuration.less**<br/>
`@zindex-configurator-option-label` - *(default: 500)*<br/>
`@zindex-configurator-option-input` - *(default: 1000)*<br/>

**configurator.less**<br/>
`@zindex-configurator-option-label` - *(default: 500)*<br/>
`@zindex-configurator-option-input` - *(default: 1000)*<br/>

**detail.less**<br/>
`@zindex-detail-notification-field-focus` - *(default: 1)*<br/>

**footer.less**<br/>
`@zindex-footer-newsletter-field-focus` - *(default: 1)*<br/>

**header.less**<br/>
`@zindex-header-search-form` - *(default: 3000)*<br/>
`@zindex-header-search-button` - *(default: 2)*<br/>
`@zindex-header-search-results` - *(default: 3500)*<br/>
`@zindex-header-language-flag` - *(default: 900)*<br/>
`@zindex-header-service-list` - *(default: 3500)*<br/>

**listing.less**<br/>
`@zindex-listing-filter-header` - *(default: 1100)*<br/>
`@zindex-listing-filter-header-active` - *(default: 1300)*<br/>

**product-box.less**<br/>
`@zindex-product-box-image-element` - *(default: 500)*<br/>
`@zindex-product-box-product-badge` - *(default: 750)*<br/>

**sidebar.less**<br/>
`@zindex-sidebar-language-flag` - *(default: 900)*<br/>
`@zindex-sidebar-offcanvas-overlay` - *(default: 1200)*<br/>
`@zindex-sidebar-offcanvas-overlay-background` - *(default: 1100)*<br/>
`@zindex-sidebar-offcanvas-higher-viewport` - *(default: 1000)*<br/>

*/
/*
Icons
================================
These variables define the character for each icon.

You can use them in your less instead of the `icon--`-classes.

The variable name is always that of the icon prefixed with `sw-`.

Example:
```less
content: @sw-icon-grid;
content: @sw-icon-facebook;
```

The variable `@sw-icon-fontname` contains the name of the font which will be
used for all icons.

For an overview of available variables, visit the
<a href="https://developers.shopware.com/styletile/components.html#icon-set">docs on available icons</a>.
*/
/*
Mixins
==================================================
The `mixins.less` file contains the imports to all mixin documents that simplify the work with Shopware.

Mixin specific documentation can be found inside each mixin file.

Mixins can be used by adding the mixin class onto an element inside Shopware.

**Example:**<br/>
`.border-radius(3px);`
*/
/*
Icon-element mixin
=====================================================
This mixin provides you a method to set any webfont icon from the Shopware icon-set as a before element.

######Example:
`.icon-element([icon-name], [icon-size]);`
*/
.visible--s,
.visible-inline--s,
.visible-inline-block--s,
.visible--m,
.visible-inline--m,
.visible-inline-block--m,
.visible--l,
.visible-inline--l,
.visible-inline-block--l,
.visible--xl,
.visible-inline--xl,
.visible-inline-block--xl {
  display: none !important;
}
.visible--xs {
  display: block !important;
}
table.visible--xs {
  display: table !important;
}
tr.visible--xs {
  display: table-row !important;
}
th.visible--xs,
td.visible--xs {
  display: table-cell !important;
}
.visible-inline--xs {
  display: inline !important;
}
table.visible-inline--xs {
  display: table !important;
}
tr.visible-inline--xs {
  display: table-row !important;
}
th.visible-inline--xs,
td.visible-inline--xs {
  display: table-cell !important;
}
.visible-inline-block--xs {
  display: inline-block !important;
}
table.visible-inline-block--xs {
  display: table !important;
}
tr.visible-inline-block--xs {
  display: table-row !important;
}
th.visible-inline-block--xs,
td.visible-inline-block--xs {
  display: table-cell !important;
}
.hidden--s,
.hidden--m,
.hidden--l,
.hidden--xl {
  display: inherit !important;
}
.hidden--xs {
  display: none !important;
}
@media screen and (min-width: 30em) {
  .visible--xs,
  .visible-inline--xs,
  .visible-inline-block--xs,
  .visible--m,
  .visible-inline--m,
  .visible-inline-block--m,
  .visible--l,
  .visible-inline--l,
  .visible-inline-block--l,
  .visible--xl,
  .visible-inline--xl,
  .visible-inline-block--xl {
    display: none !important;
  }
  .visible--s {
    display: block !important;
  }
  table.visible--s {
    display: table !important;
  }
  tr.visible--s {
    display: table-row !important;
  }
  th.visible--s,
  td.visible--s {
    display: table-cell !important;
  }
  .visible-inline--s {
    display: inline !important;
  }
  table.visible-inline--s {
    display: table !important;
  }
  tr.visible-inline--s {
    display: table-row !important;
  }
  th.visible-inline--s,
  td.visible-inline--s {
    display: table-cell !important;
  }
  .visible-inline-block--s {
    display: inline-block !important;
  }
  table.visible-inline-block--s {
    display: table !important;
  }
  tr.visible-inline-block--s {
    display: table-row !important;
  }
  th.visible-inline-block--s,
  td.visible-inline-block--s {
    display: table-cell !important;
  }
  .hidden--xs,
  .hidden--m,
  .hidden--l,
  .hidden--xl {
    display: inherit !important;
  }
  .hidden--s {
    display: none !important;
  }
}
@media screen and (min-width: 48em) {
  .visible--xs,
  .visible-inline--xs,
  .visible-inline-block--xs,
  .visible--s,
  .visible-inline--s,
  .visible-inline-block--s,
  .visible--l,
  .visible-inline--l,
  .visible-inline-block--l,
  .visible--xl,
  .visible-inline--xl,
  .visible-inline-block--xl {
    display: none !important;
  }
  .visible--m {
    display: block !important;
  }
  table.visible--m {
    display: table !important;
  }
  tr.visible--m {
    display: table-row !important;
  }
  th.visible--m,
  td.visible--m {
    display: table-cell !important;
  }
  .visible-inline--m {
    display: inline !important;
  }
  table.visible-inline--m {
    display: table !important;
  }
  tr.visible-inline--m {
    display: table-row !important;
  }
  th.visible-inline--m,
  td.visible-inline--m {
    display: table-cell !important;
  }
  .visible-inline-block--m {
    display: inline-block !important;
  }
  table.visible-inline-block--m {
    display: table !important;
  }
  tr.visible-inline-block--m {
    display: table-row !important;
  }
  th.visible-inline-block--m,
  td.visible-inline-block--m {
    display: table-cell !important;
  }
  .hidden--xs,
  .hidden--s,
  .hidden--l,
  .hidden--xl {
    display: inherit !important;
  }
  .hidden--m {
    display: none !important;
  }
}
@media screen and (min-width: 64em) {
  .visible--xs,
  .visible-inline--xs,
  .visible-inline-block--xs,
  .visible--s,
  .visible-inline--s,
  .visible-inline-block--s,
  .visible--m,
  .visible-inline--m,
  .visible-inline-block--m,
  .visible--xl,
  .visible-inline--xl,
  .visible-inline-block--xl {
    display: none !important;
  }
  .visible--l {
    display: block !important;
  }
  table.visible--l {
    display: table !important;
  }
  tr.visible--l {
    display: table-row !important;
  }
  th.visible--l,
  td.visible--l {
    display: table-cell !important;
  }
  .visible-inline--l {
    display: inline !important;
  }
  table.visible-inline--l {
    display: table !important;
  }
  tr.visible-inline--l {
    display: table-row !important;
  }
  th.visible-inline--l,
  td.visible-inline--l {
    display: table-cell !important;
  }
  .visible-inline-block--l {
    display: inline-block !important;
  }
  table.visible-inline-block--l {
    display: table !important;
  }
  tr.visible-inline-block--l {
    display: table-row !important;
  }
  th.visible-inline-block--l,
  td.visible-inline-block--l {
    display: table-cell !important;
  }
  .hidden--xs,
  .hidden--s,
  .hidden--m,
  .hidden--xl {
    display: inherit !important;
  }
  .hidden--l {
    display: none !important;
  }
}
@media screen and (min-width: 78.75em) {
  .visible--xs,
  .visible-inline--xs,
  .visible-inline-block--xs,
  .visible--s,
  .visible-inline--s,
  .visible-inline-block--s,
  .visible--m,
  .visible-inline--m,
  .visible-inline-block--m,
  .visible--l,
  .visible-inline--l,
  .visible-inline-block--l {
    display: none !important;
  }
  .visible--xl {
    display: block !important;
  }
  table.visible--xl {
    display: table !important;
  }
  tr.visible--xl {
    display: table-row !important;
  }
  th.visible--xl,
  td.visible--xl {
    display: table-cell !important;
  }
  .visible-inline--xl {
    display: inline !important;
  }
  table.visible-inline--xl {
    display: table !important;
  }
  tr.visible-inline--xl {
    display: table-row !important;
  }
  th.visible-inline--xl,
  td.visible-inline--xl {
    display: table-cell !important;
  }
  .visible-inline-block--xl {
    display: inline-block !important;
  }
  table.visible-inline-block--xl {
    display: table !important;
  }
  tr.visible-inline-block--xl {
    display: table-row !important;
  }
  th.visible-inline-block--xl,
  td.visible-inline-block--xl {
    display: table-cell !important;
  }
  .hidden--xs,
  .hidden--s,
  .hidden--m,
  .hidden--l {
    display: inherit !important;
  }
  .hidden--xl {
    display: none !important;
  }
}
/*
Components
====================================
The `components.less` contains the imports to all styled elements of Shopware.

The files are destinated inside the `_components` folder.
*/
/*
Buttons
===================================================================
######Basic button layout

Creates a basic button. Button type classes can be added by using multiple classes on the `.btn` element.

Adding the class `is--disabled` changes the element to a disabled button.
```
<button class="btn">
    Basic button
</button>

<button class="btn is--disabled">
    Disabled button
</button>
```
*/
.btn {
  padding: 0.125rem 0.625rem 0.125rem 0.625rem;
  line-height: 2rem;
  border-radius: 3px;
  background-clip: padding-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 0.875rem;
  background-color: #ffffff;
  background-image: linear-gradient(to bottom, #ffffff 0%, #fbfbfb 100%);
  -webkit-font-smoothing: inherit;
  display: inline-block;
  position: relative;
  font-weight: 700;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  border: 1px solid #96c126;
  color: #ffffff;
  /** Button icon font size */
  /** Larger icon */
  /*
######Icon alignment

To work properly the button needs the class `is--icon-left` or `is--icon-right` and an `icon` inside it.
```
<button class="btn is--icon-left">
    <i class="icon--account"></i>
    Icon left
</button>

<button class="btn is--icon-right">
    <i class="icon--account"></i>
    Icon right
</button>
```
*/
  /*
######Button size class
Adding a button-size class creates a larger or smaller button or changes the button properies.

Options: `is--large`, `is--small`, `is--full`, `is--center`
```
<button class="btn is--large">
    Large button
</button>

<button class="btn is--small">
    Small button
</button>
```
*/
  /** State: Small button */
  /** State: Medium button */
  /** State: Large button */
  /** State: Button with 100% width */
  /** State: Button with text align center */
}
.btn [class^="icon--"] {
  font-size: 0.625rem;
}
.btn .is--large {
  font-size: 1rem;
}
.btn.is--icon-right {
  padding-right: 2.25rem;
}
.btn.is--icon-right [class^="icon--"] {
  height: 1rem;
  line-height: 2rem;
  margin: -1rem 0rem 0rem 0rem;
  right: 0.75rem;
  font-weight: 500;
  display: block;
  position: absolute;
  top: 50%;
}
.btn.is--icon-left {
  padding-left: 2.25rem;
}
.btn.is--icon-left [class^="icon--"] {
  height: 1rem;
  line-height: 2rem;
  margin: -1rem 0rem 0rem 0rem;
  left: 0.75rem;
  font-weight: 500;
  display: block;
  position: absolute;
  top: 50%;
}
.btn:disabled,
.btn:disabled:hover,
.btn.is--disabled,
.btn.is--disabled:hover {
  opacity: 0.5;
  background-color: #ffffff;
  background-image: linear-gradient(to bottom, #ffffff 0%, #fbfbfb 100%);
  border: 1px solid #96c126;
  color: #ffffff;
  cursor: not-allowed;
}
.btn:hover {
  background: #ffffff;
  color: #48a2e7;
  border-color: #48a2e7;
}
.btn:focus {
  outline: none;
}
.btn.is--small {
  line-height: 1.75rem;
}
.btn.is--medium {
  line-height: 2rem;
  height: 2.375rem;
}
.btn.is--large {
  line-height: 2.25rem;
  height: 2.625rem;
}
.btn.is--full {
  display: block;
}
.btn.is--center {
  text-align: center;
}
/*
######Button type class

Options: `is--primary`, `is--secondary`
```
<button class="btn is--primary">
    Primary
</button>

<button class="btn is--secondary">
    Secondary
</button>
```
*/
.is--primary {
  padding: 0.125rem 0.75rem 0.125rem 0.75rem;
  line-height: 2.125rem;
  background-color: #48a2e7;
  background-image: linear-gradient(to bottom, #48a2e7 0%, #48a2e7 100%);
  border: 0 none;
  color: #ffffff;
  /** State: Small button */
  /** State: Large button */
}
.is--primary:hover {
  background: #7abef2;
  color: #ffffff;
}
.is--primary.is--small {
  line-height: 1.875rem;
}
.is--primary.is--large {
  line-height: 2.375rem;
}
.is--secondary {
  padding: 0.125rem 0.75rem 0.125rem 0.75rem;
  line-height: 2.125rem;
  background-color: #96c126;
  background-image: linear-gradient(to bottom, #96c126 0%, #648119 100%);
  border: 0 none;
  color: #ffffff;
  /** State: Small button */
  /** State: Large button */
}
.is--secondary:hover {
  background: #648119;
  color: #ffffff;
}
.is--secondary.is--small {
  line-height: 1.875rem;
}
.is--secondary.is--large {
  line-height: 2.375rem;
}
.is--link {
  padding: 0.125rem 0.75rem 0.125rem 0.75rem;
  line-height: 2.125rem;
  border: 0 none;
  background: transparent;
  color: #96c126;
  /** State: Small button */
  /** State: Large button */
}
.is--link:hover {
  color: #48a2e7;
}
.is--link.is--small {
  line-height: 1.875rem;
}
.is--link.is--large {
  line-height: 2.375rem;
}
/*
Basic layout container
======================================
The container element is the parent element for the content section of Shopware 5.

It contains the other content elements and keeps them in place.

It has a set `unitize-max-width` of `1260px` and the clearfix mixin assigned.

```
<div class="container">
    <p>Container element</p>
</div>
```
*/
.container {
  max-width: 78.75rem;
  background: #fff;
  margin: 0 auto;
  width: 100%;
}
.container:after {
  content: "";
  display: table;
  clear: both;
}
#cookie-consent {
  width: 17.5rem;
  -webkit-transition: transform 0.45s cubic-bezier(0.3, 0, 0.15, 1);
  transition: transform 0.45s cubic-bezier(0.3, 0, 0.15, 1);
}
#cookie-consent.off-canvas {
  position: fixed;
  z-index: 8000;
  background: #f8f8f8;
}
#cookie-consent.block-transition {
  transition: none;
}
#cookie-consent .cookie-consent--header {
  cursor: pointer;
}
#cookie-consent .cookie-consent--description {
  padding: 0.9375rem 0.625rem 0.9375rem 0.625rem;
}
#cookie-consent .cookie-consent--configuration .cookie-consent--group {
  padding: 0.9375rem 0.625rem 0.9375rem 0.625rem;
  border-bottom: 1px solid #96c126;
  position: relative;
}
#cookie-consent .cookie-consent--configuration .cookie-consent--group:after {
  content: "";
  display: table;
  clear: both;
}
#cookie-consent .cookie-consent--configuration .cookie-consent--group-title {
  cursor: pointer;
  float: left;
  width: 85%;
}
#cookie-consent .cookie-consent--configuration .cookie-consent--group-title.is--active .cookie-consent--group-arrow {
  transform: rotate(90deg);
}
#cookie-consent .cookie-consent--configuration .cookie-consent--configuration-header-text {
  padding: 0.9375rem 0.625rem 0.9375rem 0.625rem;
  font-weight: 700;
  color: #000000;
  border-bottom: 1px solid #96c126;
}
#cookie-consent .cookie-consent--configuration .cookie-consent--group-description {
  margin-left: 2.625rem;
  color: #ffffff;
}
#cookie-consent .cookie-consent--cookie {
  padding: 0.9375rem 0rem 0.9375rem 0rem;
  position: relative;
}
#cookie-consent .cookie-consent--cookie:after {
  content: "";
  display: table;
  clear: both;
}
#cookie-consent .cookie-consent--cookie .cookie--label {
  cursor: pointer;
}
#cookie-consent .cookie-consent--group-container {
  padding-top: 0.625rem;
  float: none;
  clear: both;
}
#cookie-consent .cookie-consent--group-arrow {
  right: 0.9375rem;
  font-size: 0.75rem;
  top: 1.125rem;
  position: absolute;
}
#cookie-consent .cookie-consent--save {
  padding: 0.9375rem 0.625rem 0.9375rem 0.625rem;
}
#cookie-consent .cookie-consent--save .cookie-consent--save-button {
  text-align: center;
  width: 100%;
}
#cookie-consent .cookie-consent--configuration-main {
  background: #fff;
}
#cookie-consent .cookie-consent--state-label {
  margin-left: 2.5rem;
}
.cookie-consent--state-input {
  display: block;
  position: absolute;
}
.cookie-consent--state-input.cookie-consent--cookie-state {
  top: calc(50% - 10px);
}
.cookie-consent--state-input.cookie-consent--required {
  opacity: 0.4;
}
.cookie-consent--state-input.cookie-consent--required .cookie-consent--state-input-element {
  cursor: default;
}
.cookie-consent--state-input .cookie-consent--state-input-element {
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 0.1875rem;
  border: 1px solid #96c126;
  cursor: pointer;
  display: block;
  position: relative;
}
.cookie-consent--state-input input {
  display: none;
}
.cookie-consent--state-input input:checked + .cookie-consent--state-input-element {
  background: #aeaeae;
}
.cookie-consent--state-input input:checked + .cookie-consent--state-input-element::after {
  width: 0.625rem;
  height: 0.3125rem;
  top: 0.25rem;
  left: 0.1875rem;
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  background: transparent;
  content: '';
  position: absolute;
  transform: rotate(-45deg);
}
.cookie-consent--state-input input:indeterminate + .cookie-consent--state-input-element {
  background: #aeaeae;
}
.cookie-consent--state-input input:indeterminate + .cookie-consent--state-input-element::after {
  width: 0.625rem;
  height: 0.3125rem;
  top: 0.1875rem;
  left: 0.25rem;
  border: 2px none #fff;
  border-bottom-style: solid;
  background: transparent;
  content: '';
  position: absolute;
}
/*
Delivery information
=========================================
Defines the delivery status for products (e.g. detail page, note).

The styling includes the base styling and the delivery states.


```
<div class="product--delivery">
    <p class="delivery--information">
        <span class="delivery--text delivery--text-available">
            <i class="delivery--status-icon delivery--status-available"></i>
            delivery--text-available
        </span>
    </p>
</div>

<div class="product--delivery">
    <p class="delivery--information">
        <span class="delivery--text delivery--text-more-is-coming">
            <i class="delivery--status-icon delivery--status-more-is-coming"></i>
            delivery--text-more-is-coming
        </span>
    </p>
</div>

<div class="product--delivery">
    <p class="delivery--information">
        <span class="delivery--text delivery--text-shipping-free">
            <i class="delivery--status-icon delivery--status-shipping-free"></i>
            delivery--text-shipping-free
        </span>
    </p>
</div>

<div class="product--delivery">
    <p class="delivery--information">
        <span class="delivery--text delivery--text-not-available">
            <i class="delivery--status-icon delivery--status-not-available"></i>
            delivery--text-not-available
        </span>
    </p>
</div>
```
*/
.product--delivery {
  font-size: 0.875rem;
}
.product--delivery p {
  margin: 0;
}
.product--delivery .delivery--status-icon {
  border-radius: 0.5625rem;
  background-clip: padding-box;
  margin: 0rem 0.3125rem 0rem 0rem;
  width: 0.5625rem;
  height: 0.5625rem;
  line-height: 0.625rem;
  display: inline-block;
  position: relative;
}
.product--delivery .delivery--status-shipping-free {
  background: #48a2e7;
}
.product--delivery .delivery--text-shipping-free {
  color: #48a2e7;
}
.product--delivery .delivery--status-available {
  background: #2ecc71;
}
.product--delivery .delivery--text-available {
  color: #2ecc71;
}
.product--delivery .delivery--status-more-is-coming {
  background: #f1c40f;
}
.product--delivery .delivery--text-more-is-coming {
  color: #f1c40f;
}
.product--delivery .delivery--status-not-available {
  background: #e74c3c;
}
.product--delivery .delivery--text-not-available {
  color: #e74c3c;
}
.product--delivery .delivery--text {
  margin: 0;
  display: inline-block;
}
/*
Emotions
=========================================
Contains the basic styles for the Shopware 5 shopping worlds and its elements.

Shopware 5 provides 11 integrated elements inside the shopping worlds that can be chosen and modified inside the backend shopping world editor such as sliders, video elements and blog-articles.
*/
.content-main.is--fullscreen {
  box-shadow: none;
  max-width: none;
  padding: 0;
  margin: 0;
}
.content-main.is--fullscreen .content,
.content-main.is--fullscreen .content-main--inner {
  padding: 0;
  margin: 0 auto;
}
.content-main.is--fullscreen .content--breadcrumb,
.content-main.is--fullscreen .tagcloud--content,
.content-main.is--fullscreen .last-seen-products {
  display: none;
}
.content-main.is--fullscreen .listing--wrapper {
  max-width: 72.5rem;
  padding: 1.25rem 0.625rem 1.25rem 0.625rem;
  margin: 0 auto;
}
@media screen and (min-width: 48em) {
  .content-main.is--fullscreen .listing--wrapper {
    padding: 1.25rem 1.875rem 1.25rem 1.875rem;
  }
}
@media screen and (min-width: 78.75em) {
  .content-main.is--fullscreen .listing--wrapper {
    padding: 1.25rem 0rem 1.25rem 0rem;
  }
}
.emotion--overlay {
  width: 3.125rem;
  height: 3.125rem;
  top: 3.125rem;
  border-radius: 3px;
  background-clip: padding-box;
  margin: 0 auto;
  position: relative;
  left: 0;
  z-index: 1000;
}
.emotion--overlay .emotion--loading-indicator {
  padding: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.emotion--overlay ~ .content-main {
  min-height: 125rem;
  visibility: hidden;
}
.emotion--loading-indicator {
  width: 1.3125rem;
  height: 1.3125rem;
  padding: 3.125rem 0rem 3.125rem 0rem;
  margin: 0 auto;
  display: block;
  position: relative;
  box-sizing: content-box;
}
.emotion--loading-indicator:before {
  border-radius: 100%;
  background-clip: padding-box;
  -webkit-animation: keyframe--spin 1s linear infinite;
  animation: keyframe--spin 1s linear infinite;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: block;
  content: "";
  border-width: 2px;
  border-style: solid;
  border-color: #333 #CCC #CCC #CCC;
}
.content--emotions {
  display: block;
}
body.emotion--preview {
  background: #ffffff;
}
body.emotion--preview .content-main {
  box-shadow: none;
  margin: 0;
}
.emotion--show-listing {
  margin: 1.25rem 0rem 1.25rem 0rem;
}
.emotion--wrapper {
  display: block;
  margin: 0 auto;
  max-width: 1160px;
  overflow: hidden;
}
.emotion--wrapper.is--fullscreen {
  max-width: none;
}
.emotion--container {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  background: #fff;
}
.emotion--container:after {
  content: "";
  display: table;
  clear: both;
}
.emotion--container.emotion--mode-resize {
  -webkit-transform-origin: 0 0 0;
  transform-origin: 0 0 0;
}
.emotion--container.emotion--mode-rows .emotion--sizer,
.emotion--container.emotion--mode-rows .emotion--sizer-xs,
.emotion--container.emotion--mode-rows .emotion--sizer-s,
.emotion--container.emotion--mode-rows .emotion--sizer-m,
.emotion--container.emotion--mode-rows .emotion--sizer-l,
.emotion--container.emotion--mode-rows .emotion--sizer-xl {
  display: none;
}
.emotion--container.emotion--mode-rows .emotion--row:after {
  content: "";
  display: table;
  clear: both;
}
.emotion--container.emotion--column-1 .col-1 {
  width: 100%;
}
.emotion--container.emotion--column-1 .start-col-1 {
  left: 0%;
}
.emotion--container.emotion--column-1 .col-xs-1 {
  width: 100%;
}
.emotion--container.emotion--column-1 .start-col-xs-1 {
  left: 0%;
}
@media screen and (min-width: 30em) {
  .emotion--container.emotion--column-1 .col-s-1 {
    width: 100%;
  }
  .emotion--container.emotion--column-1 .start-col-s-1 {
    left: 0%;
  }
}
@media screen and (min-width: 48em) {
  .emotion--container.emotion--column-1 .col-m-1 {
    width: 100%;
  }
  .emotion--container.emotion--column-1 .start-col-m-1 {
    left: 0%;
  }
}
@media screen and (min-width: 64em) {
  .emotion--container.emotion--column-1 .col-l-1 {
    width: 100%;
  }
  .emotion--container.emotion--column-1 .start-col-l-1 {
    left: 0%;
  }
}
@media screen and (min-width: 78.75em) {
  .emotion--container.emotion--column-1 .col-xl-1 {
    width: 100%;
  }
  .emotion--container.emotion--column-1 .start-col-xl-1 {
    left: 0%;
  }
}
.emotion--container.emotion--column-2 .col-1 {
  width: 50%;
}
.emotion--container.emotion--column-2 .start-col-1 {
  left: 0%;
}
.emotion--container.emotion--column-2 .col-2 {
  width: 100%;
}
.emotion--container.emotion--column-2 .start-col-2 {
  left: 50%;
}
.emotion--container.emotion--column-2 .col-xs-1 {
  width: 50%;
}
.emotion--container.emotion--column-2 .start-col-xs-1 {
  left: 0%;
}
.emotion--container.emotion--column-2 .col-xs-2 {
  width: 100%;
}
.emotion--container.emotion--column-2 .start-col-xs-2 {
  left: 50%;
}
@media screen and (min-width: 30em) {
  .emotion--container.emotion--column-2 .col-s-1 {
    width: 50%;
  }
  .emotion--container.emotion--column-2 .start-col-s-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-2 .col-s-2 {
    width: 100%;
  }
  .emotion--container.emotion--column-2 .start-col-s-2 {
    left: 50%;
  }
}
@media screen and (min-width: 48em) {
  .emotion--container.emotion--column-2 .col-m-1 {
    width: 50%;
  }
  .emotion--container.emotion--column-2 .start-col-m-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-2 .col-m-2 {
    width: 100%;
  }
  .emotion--container.emotion--column-2 .start-col-m-2 {
    left: 50%;
  }
}
@media screen and (min-width: 64em) {
  .emotion--container.emotion--column-2 .col-l-1 {
    width: 50%;
  }
  .emotion--container.emotion--column-2 .start-col-l-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-2 .col-l-2 {
    width: 100%;
  }
  .emotion--container.emotion--column-2 .start-col-l-2 {
    left: 50%;
  }
}
@media screen and (min-width: 78.75em) {
  .emotion--container.emotion--column-2 .col-xl-1 {
    width: 50%;
  }
  .emotion--container.emotion--column-2 .start-col-xl-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-2 .col-xl-2 {
    width: 100%;
  }
  .emotion--container.emotion--column-2 .start-col-xl-2 {
    left: 50%;
  }
}
.emotion--container.emotion--column-3 .col-1 {
  width: 33.33333333%;
}
.emotion--container.emotion--column-3 .start-col-1 {
  left: 0%;
}
.emotion--container.emotion--column-3 .col-2 {
  width: 66.66666667%;
}
.emotion--container.emotion--column-3 .start-col-2 {
  left: 33.33333333%;
}
.emotion--container.emotion--column-3 .col-3 {
  width: 100%;
}
.emotion--container.emotion--column-3 .start-col-3 {
  left: 66.66666667%;
}
.emotion--container.emotion--column-3 .col-xs-1 {
  width: 33.33333333%;
}
.emotion--container.emotion--column-3 .start-col-xs-1 {
  left: 0%;
}
.emotion--container.emotion--column-3 .col-xs-2 {
  width: 66.66666667%;
}
.emotion--container.emotion--column-3 .start-col-xs-2 {
  left: 33.33333333%;
}
.emotion--container.emotion--column-3 .col-xs-3 {
  width: 100%;
}
.emotion--container.emotion--column-3 .start-col-xs-3 {
  left: 66.66666667%;
}
@media screen and (min-width: 30em) {
  .emotion--container.emotion--column-3 .col-s-1 {
    width: 33.33333333%;
  }
  .emotion--container.emotion--column-3 .start-col-s-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-3 .col-s-2 {
    width: 66.66666667%;
  }
  .emotion--container.emotion--column-3 .start-col-s-2 {
    left: 33.33333333%;
  }
  .emotion--container.emotion--column-3 .col-s-3 {
    width: 100%;
  }
  .emotion--container.emotion--column-3 .start-col-s-3 {
    left: 66.66666667%;
  }
}
@media screen and (min-width: 48em) {
  .emotion--container.emotion--column-3 .col-m-1 {
    width: 33.33333333%;
  }
  .emotion--container.emotion--column-3 .start-col-m-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-3 .col-m-2 {
    width: 66.66666667%;
  }
  .emotion--container.emotion--column-3 .start-col-m-2 {
    left: 33.33333333%;
  }
  .emotion--container.emotion--column-3 .col-m-3 {
    width: 100%;
  }
  .emotion--container.emotion--column-3 .start-col-m-3 {
    left: 66.66666667%;
  }
}
@media screen and (min-width: 64em) {
  .emotion--container.emotion--column-3 .col-l-1 {
    width: 33.33333333%;
  }
  .emotion--container.emotion--column-3 .start-col-l-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-3 .col-l-2 {
    width: 66.66666667%;
  }
  .emotion--container.emotion--column-3 .start-col-l-2 {
    left: 33.33333333%;
  }
  .emotion--container.emotion--column-3 .col-l-3 {
    width: 100%;
  }
  .emotion--container.emotion--column-3 .start-col-l-3 {
    left: 66.66666667%;
  }
}
@media screen and (min-width: 78.75em) {
  .emotion--container.emotion--column-3 .col-xl-1 {
    width: 33.33333333%;
  }
  .emotion--container.emotion--column-3 .start-col-xl-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-3 .col-xl-2 {
    width: 66.66666667%;
  }
  .emotion--container.emotion--column-3 .start-col-xl-2 {
    left: 33.33333333%;
  }
  .emotion--container.emotion--column-3 .col-xl-3 {
    width: 100%;
  }
  .emotion--container.emotion--column-3 .start-col-xl-3 {
    left: 66.66666667%;
  }
}
.emotion--container.emotion--column-4 .col-1 {
  width: 25%;
}
.emotion--container.emotion--column-4 .start-col-1 {
  left: 0%;
}
.emotion--container.emotion--column-4 .col-2 {
  width: 50%;
}
.emotion--container.emotion--column-4 .start-col-2 {
  left: 25%;
}
.emotion--container.emotion--column-4 .col-3 {
  width: 75%;
}
.emotion--container.emotion--column-4 .start-col-3 {
  left: 50%;
}
.emotion--container.emotion--column-4 .col-4 {
  width: 100%;
}
.emotion--container.emotion--column-4 .start-col-4 {
  left: 75%;
}
.emotion--container.emotion--column-4 .col-xs-1 {
  width: 25%;
}
.emotion--container.emotion--column-4 .start-col-xs-1 {
  left: 0%;
}
.emotion--container.emotion--column-4 .col-xs-2 {
  width: 50%;
}
.emotion--container.emotion--column-4 .start-col-xs-2 {
  left: 25%;
}
.emotion--container.emotion--column-4 .col-xs-3 {
  width: 75%;
}
.emotion--container.emotion--column-4 .start-col-xs-3 {
  left: 50%;
}
.emotion--container.emotion--column-4 .col-xs-4 {
  width: 100%;
}
.emotion--container.emotion--column-4 .start-col-xs-4 {
  left: 75%;
}
@media screen and (min-width: 30em) {
  .emotion--container.emotion--column-4 .col-s-1 {
    width: 25%;
  }
  .emotion--container.emotion--column-4 .start-col-s-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-4 .col-s-2 {
    width: 50%;
  }
  .emotion--container.emotion--column-4 .start-col-s-2 {
    left: 25%;
  }
  .emotion--container.emotion--column-4 .col-s-3 {
    width: 75%;
  }
  .emotion--container.emotion--column-4 .start-col-s-3 {
    left: 50%;
  }
  .emotion--container.emotion--column-4 .col-s-4 {
    width: 100%;
  }
  .emotion--container.emotion--column-4 .start-col-s-4 {
    left: 75%;
  }
}
@media screen and (min-width: 48em) {
  .emotion--container.emotion--column-4 .col-m-1 {
    width: 25%;
  }
  .emotion--container.emotion--column-4 .start-col-m-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-4 .col-m-2 {
    width: 50%;
  }
  .emotion--container.emotion--column-4 .start-col-m-2 {
    left: 25%;
  }
  .emotion--container.emotion--column-4 .col-m-3 {
    width: 75%;
  }
  .emotion--container.emotion--column-4 .start-col-m-3 {
    left: 50%;
  }
  .emotion--container.emotion--column-4 .col-m-4 {
    width: 100%;
  }
  .emotion--container.emotion--column-4 .start-col-m-4 {
    left: 75%;
  }
}
@media screen and (min-width: 64em) {
  .emotion--container.emotion--column-4 .col-l-1 {
    width: 25%;
  }
  .emotion--container.emotion--column-4 .start-col-l-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-4 .col-l-2 {
    width: 50%;
  }
  .emotion--container.emotion--column-4 .start-col-l-2 {
    left: 25%;
  }
  .emotion--container.emotion--column-4 .col-l-3 {
    width: 75%;
  }
  .emotion--container.emotion--column-4 .start-col-l-3 {
    left: 50%;
  }
  .emotion--container.emotion--column-4 .col-l-4 {
    width: 100%;
  }
  .emotion--container.emotion--column-4 .start-col-l-4 {
    left: 75%;
  }
}
@media screen and (min-width: 78.75em) {
  .emotion--container.emotion--column-4 .col-xl-1 {
    width: 25%;
  }
  .emotion--container.emotion--column-4 .start-col-xl-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-4 .col-xl-2 {
    width: 50%;
  }
  .emotion--container.emotion--column-4 .start-col-xl-2 {
    left: 25%;
  }
  .emotion--container.emotion--column-4 .col-xl-3 {
    width: 75%;
  }
  .emotion--container.emotion--column-4 .start-col-xl-3 {
    left: 50%;
  }
  .emotion--container.emotion--column-4 .col-xl-4 {
    width: 100%;
  }
  .emotion--container.emotion--column-4 .start-col-xl-4 {
    left: 75%;
  }
}
.emotion--container.emotion--column-5 .col-1 {
  width: 20%;
}
.emotion--container.emotion--column-5 .start-col-1 {
  left: 0%;
}
.emotion--container.emotion--column-5 .col-2 {
  width: 40%;
}
.emotion--container.emotion--column-5 .start-col-2 {
  left: 20%;
}
.emotion--container.emotion--column-5 .col-3 {
  width: 60%;
}
.emotion--container.emotion--column-5 .start-col-3 {
  left: 40%;
}
.emotion--container.emotion--column-5 .col-4 {
  width: 80%;
}
.emotion--container.emotion--column-5 .start-col-4 {
  left: 60%;
}
.emotion--container.emotion--column-5 .col-5 {
  width: 100%;
}
.emotion--container.emotion--column-5 .start-col-5 {
  left: 80%;
}
.emotion--container.emotion--column-5 .col-xs-1 {
  width: 20%;
}
.emotion--container.emotion--column-5 .start-col-xs-1 {
  left: 0%;
}
.emotion--container.emotion--column-5 .col-xs-2 {
  width: 40%;
}
.emotion--container.emotion--column-5 .start-col-xs-2 {
  left: 20%;
}
.emotion--container.emotion--column-5 .col-xs-3 {
  width: 60%;
}
.emotion--container.emotion--column-5 .start-col-xs-3 {
  left: 40%;
}
.emotion--container.emotion--column-5 .col-xs-4 {
  width: 80%;
}
.emotion--container.emotion--column-5 .start-col-xs-4 {
  left: 60%;
}
.emotion--container.emotion--column-5 .col-xs-5 {
  width: 100%;
}
.emotion--container.emotion--column-5 .start-col-xs-5 {
  left: 80%;
}
@media screen and (min-width: 30em) {
  .emotion--container.emotion--column-5 .col-s-1 {
    width: 20%;
  }
  .emotion--container.emotion--column-5 .start-col-s-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-5 .col-s-2 {
    width: 40%;
  }
  .emotion--container.emotion--column-5 .start-col-s-2 {
    left: 20%;
  }
  .emotion--container.emotion--column-5 .col-s-3 {
    width: 60%;
  }
  .emotion--container.emotion--column-5 .start-col-s-3 {
    left: 40%;
  }
  .emotion--container.emotion--column-5 .col-s-4 {
    width: 80%;
  }
  .emotion--container.emotion--column-5 .start-col-s-4 {
    left: 60%;
  }
  .emotion--container.emotion--column-5 .col-s-5 {
    width: 100%;
  }
  .emotion--container.emotion--column-5 .start-col-s-5 {
    left: 80%;
  }
}
@media screen and (min-width: 48em) {
  .emotion--container.emotion--column-5 .col-m-1 {
    width: 20%;
  }
  .emotion--container.emotion--column-5 .start-col-m-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-5 .col-m-2 {
    width: 40%;
  }
  .emotion--container.emotion--column-5 .start-col-m-2 {
    left: 20%;
  }
  .emotion--container.emotion--column-5 .col-m-3 {
    width: 60%;
  }
  .emotion--container.emotion--column-5 .start-col-m-3 {
    left: 40%;
  }
  .emotion--container.emotion--column-5 .col-m-4 {
    width: 80%;
  }
  .emotion--container.emotion--column-5 .start-col-m-4 {
    left: 60%;
  }
  .emotion--container.emotion--column-5 .col-m-5 {
    width: 100%;
  }
  .emotion--container.emotion--column-5 .start-col-m-5 {
    left: 80%;
  }
}
@media screen and (min-width: 64em) {
  .emotion--container.emotion--column-5 .col-l-1 {
    width: 20%;
  }
  .emotion--container.emotion--column-5 .start-col-l-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-5 .col-l-2 {
    width: 40%;
  }
  .emotion--container.emotion--column-5 .start-col-l-2 {
    left: 20%;
  }
  .emotion--container.emotion--column-5 .col-l-3 {
    width: 60%;
  }
  .emotion--container.emotion--column-5 .start-col-l-3 {
    left: 40%;
  }
  .emotion--container.emotion--column-5 .col-l-4 {
    width: 80%;
  }
  .emotion--container.emotion--column-5 .start-col-l-4 {
    left: 60%;
  }
  .emotion--container.emotion--column-5 .col-l-5 {
    width: 100%;
  }
  .emotion--container.emotion--column-5 .start-col-l-5 {
    left: 80%;
  }
}
@media screen and (min-width: 78.75em) {
  .emotion--container.emotion--column-5 .col-xl-1 {
    width: 20%;
  }
  .emotion--container.emotion--column-5 .start-col-xl-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-5 .col-xl-2 {
    width: 40%;
  }
  .emotion--container.emotion--column-5 .start-col-xl-2 {
    left: 20%;
  }
  .emotion--container.emotion--column-5 .col-xl-3 {
    width: 60%;
  }
  .emotion--container.emotion--column-5 .start-col-xl-3 {
    left: 40%;
  }
  .emotion--container.emotion--column-5 .col-xl-4 {
    width: 80%;
  }
  .emotion--container.emotion--column-5 .start-col-xl-4 {
    left: 60%;
  }
  .emotion--container.emotion--column-5 .col-xl-5 {
    width: 100%;
  }
  .emotion--container.emotion--column-5 .start-col-xl-5 {
    left: 80%;
  }
}
.emotion--container.emotion--column-6 .col-1 {
  width: 16.66666667%;
}
.emotion--container.emotion--column-6 .start-col-1 {
  left: 0%;
}
.emotion--container.emotion--column-6 .col-2 {
  width: 33.33333333%;
}
.emotion--container.emotion--column-6 .start-col-2 {
  left: 16.66666667%;
}
.emotion--container.emotion--column-6 .col-3 {
  width: 50%;
}
.emotion--container.emotion--column-6 .start-col-3 {
  left: 33.33333333%;
}
.emotion--container.emotion--column-6 .col-4 {
  width: 66.66666667%;
}
.emotion--container.emotion--column-6 .start-col-4 {
  left: 50%;
}
.emotion--container.emotion--column-6 .col-5 {
  width: 83.33333333%;
}
.emotion--container.emotion--column-6 .start-col-5 {
  left: 66.66666667%;
}
.emotion--container.emotion--column-6 .col-6 {
  width: 100%;
}
.emotion--container.emotion--column-6 .start-col-6 {
  left: 83.33333333%;
}
.emotion--container.emotion--column-6 .col-xs-1 {
  width: 16.66666667%;
}
.emotion--container.emotion--column-6 .start-col-xs-1 {
  left: 0%;
}
.emotion--container.emotion--column-6 .col-xs-2 {
  width: 33.33333333%;
}
.emotion--container.emotion--column-6 .start-col-xs-2 {
  left: 16.66666667%;
}
.emotion--container.emotion--column-6 .col-xs-3 {
  width: 50%;
}
.emotion--container.emotion--column-6 .start-col-xs-3 {
  left: 33.33333333%;
}
.emotion--container.emotion--column-6 .col-xs-4 {
  width: 66.66666667%;
}
.emotion--container.emotion--column-6 .start-col-xs-4 {
  left: 50%;
}
.emotion--container.emotion--column-6 .col-xs-5 {
  width: 83.33333333%;
}
.emotion--container.emotion--column-6 .start-col-xs-5 {
  left: 66.66666667%;
}
.emotion--container.emotion--column-6 .col-xs-6 {
  width: 100%;
}
.emotion--container.emotion--column-6 .start-col-xs-6 {
  left: 83.33333333%;
}
@media screen and (min-width: 30em) {
  .emotion--container.emotion--column-6 .col-s-1 {
    width: 16.66666667%;
  }
  .emotion--container.emotion--column-6 .start-col-s-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-6 .col-s-2 {
    width: 33.33333333%;
  }
  .emotion--container.emotion--column-6 .start-col-s-2 {
    left: 16.66666667%;
  }
  .emotion--container.emotion--column-6 .col-s-3 {
    width: 50%;
  }
  .emotion--container.emotion--column-6 .start-col-s-3 {
    left: 33.33333333%;
  }
  .emotion--container.emotion--column-6 .col-s-4 {
    width: 66.66666667%;
  }
  .emotion--container.emotion--column-6 .start-col-s-4 {
    left: 50%;
  }
  .emotion--container.emotion--column-6 .col-s-5 {
    width: 83.33333333%;
  }
  .emotion--container.emotion--column-6 .start-col-s-5 {
    left: 66.66666667%;
  }
  .emotion--container.emotion--column-6 .col-s-6 {
    width: 100%;
  }
  .emotion--container.emotion--column-6 .start-col-s-6 {
    left: 83.33333333%;
  }
}
@media screen and (min-width: 48em) {
  .emotion--container.emotion--column-6 .col-m-1 {
    width: 16.66666667%;
  }
  .emotion--container.emotion--column-6 .start-col-m-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-6 .col-m-2 {
    width: 33.33333333%;
  }
  .emotion--container.emotion--column-6 .start-col-m-2 {
    left: 16.66666667%;
  }
  .emotion--container.emotion--column-6 .col-m-3 {
    width: 50%;
  }
  .emotion--container.emotion--column-6 .start-col-m-3 {
    left: 33.33333333%;
  }
  .emotion--container.emotion--column-6 .col-m-4 {
    width: 66.66666667%;
  }
  .emotion--container.emotion--column-6 .start-col-m-4 {
    left: 50%;
  }
  .emotion--container.emotion--column-6 .col-m-5 {
    width: 83.33333333%;
  }
  .emotion--container.emotion--column-6 .start-col-m-5 {
    left: 66.66666667%;
  }
  .emotion--container.emotion--column-6 .col-m-6 {
    width: 100%;
  }
  .emotion--container.emotion--column-6 .start-col-m-6 {
    left: 83.33333333%;
  }
}
@media screen and (min-width: 64em) {
  .emotion--container.emotion--column-6 .col-l-1 {
    width: 16.66666667%;
  }
  .emotion--container.emotion--column-6 .start-col-l-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-6 .col-l-2 {
    width: 33.33333333%;
  }
  .emotion--container.emotion--column-6 .start-col-l-2 {
    left: 16.66666667%;
  }
  .emotion--container.emotion--column-6 .col-l-3 {
    width: 50%;
  }
  .emotion--container.emotion--column-6 .start-col-l-3 {
    left: 33.33333333%;
  }
  .emotion--container.emotion--column-6 .col-l-4 {
    width: 66.66666667%;
  }
  .emotion--container.emotion--column-6 .start-col-l-4 {
    left: 50%;
  }
  .emotion--container.emotion--column-6 .col-l-5 {
    width: 83.33333333%;
  }
  .emotion--container.emotion--column-6 .start-col-l-5 {
    left: 66.66666667%;
  }
  .emotion--container.emotion--column-6 .col-l-6 {
    width: 100%;
  }
  .emotion--container.emotion--column-6 .start-col-l-6 {
    left: 83.33333333%;
  }
}
@media screen and (min-width: 78.75em) {
  .emotion--container.emotion--column-6 .col-xl-1 {
    width: 16.66666667%;
  }
  .emotion--container.emotion--column-6 .start-col-xl-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-6 .col-xl-2 {
    width: 33.33333333%;
  }
  .emotion--container.emotion--column-6 .start-col-xl-2 {
    left: 16.66666667%;
  }
  .emotion--container.emotion--column-6 .col-xl-3 {
    width: 50%;
  }
  .emotion--container.emotion--column-6 .start-col-xl-3 {
    left: 33.33333333%;
  }
  .emotion--container.emotion--column-6 .col-xl-4 {
    width: 66.66666667%;
  }
  .emotion--container.emotion--column-6 .start-col-xl-4 {
    left: 50%;
  }
  .emotion--container.emotion--column-6 .col-xl-5 {
    width: 83.33333333%;
  }
  .emotion--container.emotion--column-6 .start-col-xl-5 {
    left: 66.66666667%;
  }
  .emotion--container.emotion--column-6 .col-xl-6 {
    width: 100%;
  }
  .emotion--container.emotion--column-6 .start-col-xl-6 {
    left: 83.33333333%;
  }
}
.emotion--container.emotion--column-7 .col-1 {
  width: 14.28571429%;
}
.emotion--container.emotion--column-7 .start-col-1 {
  left: 0%;
}
.emotion--container.emotion--column-7 .col-2 {
  width: 28.57142857%;
}
.emotion--container.emotion--column-7 .start-col-2 {
  left: 14.28571429%;
}
.emotion--container.emotion--column-7 .col-3 {
  width: 42.85714286%;
}
.emotion--container.emotion--column-7 .start-col-3 {
  left: 28.57142857%;
}
.emotion--container.emotion--column-7 .col-4 {
  width: 57.14285714%;
}
.emotion--container.emotion--column-7 .start-col-4 {
  left: 42.85714286%;
}
.emotion--container.emotion--column-7 .col-5 {
  width: 71.42857143000001%;
}
.emotion--container.emotion--column-7 .start-col-5 {
  left: 57.14285714%;
}
.emotion--container.emotion--column-7 .col-6 {
  width: 85.71428571%;
}
.emotion--container.emotion--column-7 .start-col-6 {
  left: 71.42857143000001%;
}
.emotion--container.emotion--column-7 .col-7 {
  width: 100%;
}
.emotion--container.emotion--column-7 .start-col-7 {
  left: 85.71428571%;
}
.emotion--container.emotion--column-7 .col-xs-1 {
  width: 14.28571429%;
}
.emotion--container.emotion--column-7 .start-col-xs-1 {
  left: 0%;
}
.emotion--container.emotion--column-7 .col-xs-2 {
  width: 28.57142857%;
}
.emotion--container.emotion--column-7 .start-col-xs-2 {
  left: 14.28571429%;
}
.emotion--container.emotion--column-7 .col-xs-3 {
  width: 42.85714286%;
}
.emotion--container.emotion--column-7 .start-col-xs-3 {
  left: 28.57142857%;
}
.emotion--container.emotion--column-7 .col-xs-4 {
  width: 57.14285714%;
}
.emotion--container.emotion--column-7 .start-col-xs-4 {
  left: 42.85714286%;
}
.emotion--container.emotion--column-7 .col-xs-5 {
  width: 71.42857143000001%;
}
.emotion--container.emotion--column-7 .start-col-xs-5 {
  left: 57.14285714%;
}
.emotion--container.emotion--column-7 .col-xs-6 {
  width: 85.71428571%;
}
.emotion--container.emotion--column-7 .start-col-xs-6 {
  left: 71.42857143000001%;
}
.emotion--container.emotion--column-7 .col-xs-7 {
  width: 100%;
}
.emotion--container.emotion--column-7 .start-col-xs-7 {
  left: 85.71428571%;
}
@media screen and (min-width: 30em) {
  .emotion--container.emotion--column-7 .col-s-1 {
    width: 14.28571429%;
  }
  .emotion--container.emotion--column-7 .start-col-s-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-7 .col-s-2 {
    width: 28.57142857%;
  }
  .emotion--container.emotion--column-7 .start-col-s-2 {
    left: 14.28571429%;
  }
  .emotion--container.emotion--column-7 .col-s-3 {
    width: 42.85714286%;
  }
  .emotion--container.emotion--column-7 .start-col-s-3 {
    left: 28.57142857%;
  }
  .emotion--container.emotion--column-7 .col-s-4 {
    width: 57.14285714%;
  }
  .emotion--container.emotion--column-7 .start-col-s-4 {
    left: 42.85714286%;
  }
  .emotion--container.emotion--column-7 .col-s-5 {
    width: 71.42857143000001%;
  }
  .emotion--container.emotion--column-7 .start-col-s-5 {
    left: 57.14285714%;
  }
  .emotion--container.emotion--column-7 .col-s-6 {
    width: 85.71428571%;
  }
  .emotion--container.emotion--column-7 .start-col-s-6 {
    left: 71.42857143000001%;
  }
  .emotion--container.emotion--column-7 .col-s-7 {
    width: 100%;
  }
  .emotion--container.emotion--column-7 .start-col-s-7 {
    left: 85.71428571%;
  }
}
@media screen and (min-width: 48em) {
  .emotion--container.emotion--column-7 .col-m-1 {
    width: 14.28571429%;
  }
  .emotion--container.emotion--column-7 .start-col-m-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-7 .col-m-2 {
    width: 28.57142857%;
  }
  .emotion--container.emotion--column-7 .start-col-m-2 {
    left: 14.28571429%;
  }
  .emotion--container.emotion--column-7 .col-m-3 {
    width: 42.85714286%;
  }
  .emotion--container.emotion--column-7 .start-col-m-3 {
    left: 28.57142857%;
  }
  .emotion--container.emotion--column-7 .col-m-4 {
    width: 57.14285714%;
  }
  .emotion--container.emotion--column-7 .start-col-m-4 {
    left: 42.85714286%;
  }
  .emotion--container.emotion--column-7 .col-m-5 {
    width: 71.42857143000001%;
  }
  .emotion--container.emotion--column-7 .start-col-m-5 {
    left: 57.14285714%;
  }
  .emotion--container.emotion--column-7 .col-m-6 {
    width: 85.71428571%;
  }
  .emotion--container.emotion--column-7 .start-col-m-6 {
    left: 71.42857143000001%;
  }
  .emotion--container.emotion--column-7 .col-m-7 {
    width: 100%;
  }
  .emotion--container.emotion--column-7 .start-col-m-7 {
    left: 85.71428571%;
  }
}
@media screen and (min-width: 64em) {
  .emotion--container.emotion--column-7 .col-l-1 {
    width: 14.28571429%;
  }
  .emotion--container.emotion--column-7 .start-col-l-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-7 .col-l-2 {
    width: 28.57142857%;
  }
  .emotion--container.emotion--column-7 .start-col-l-2 {
    left: 14.28571429%;
  }
  .emotion--container.emotion--column-7 .col-l-3 {
    width: 42.85714286%;
  }
  .emotion--container.emotion--column-7 .start-col-l-3 {
    left: 28.57142857%;
  }
  .emotion--container.emotion--column-7 .col-l-4 {
    width: 57.14285714%;
  }
  .emotion--container.emotion--column-7 .start-col-l-4 {
    left: 42.85714286%;
  }
  .emotion--container.emotion--column-7 .col-l-5 {
    width: 71.42857143000001%;
  }
  .emotion--container.emotion--column-7 .start-col-l-5 {
    left: 57.14285714%;
  }
  .emotion--container.emotion--column-7 .col-l-6 {
    width: 85.71428571%;
  }
  .emotion--container.emotion--column-7 .start-col-l-6 {
    left: 71.42857143000001%;
  }
  .emotion--container.emotion--column-7 .col-l-7 {
    width: 100%;
  }
  .emotion--container.emotion--column-7 .start-col-l-7 {
    left: 85.71428571%;
  }
}
@media screen and (min-width: 78.75em) {
  .emotion--container.emotion--column-7 .col-xl-1 {
    width: 14.28571429%;
  }
  .emotion--container.emotion--column-7 .start-col-xl-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-7 .col-xl-2 {
    width: 28.57142857%;
  }
  .emotion--container.emotion--column-7 .start-col-xl-2 {
    left: 14.28571429%;
  }
  .emotion--container.emotion--column-7 .col-xl-3 {
    width: 42.85714286%;
  }
  .emotion--container.emotion--column-7 .start-col-xl-3 {
    left: 28.57142857%;
  }
  .emotion--container.emotion--column-7 .col-xl-4 {
    width: 57.14285714%;
  }
  .emotion--container.emotion--column-7 .start-col-xl-4 {
    left: 42.85714286%;
  }
  .emotion--container.emotion--column-7 .col-xl-5 {
    width: 71.42857143000001%;
  }
  .emotion--container.emotion--column-7 .start-col-xl-5 {
    left: 57.14285714%;
  }
  .emotion--container.emotion--column-7 .col-xl-6 {
    width: 85.71428571%;
  }
  .emotion--container.emotion--column-7 .start-col-xl-6 {
    left: 71.42857143000001%;
  }
  .emotion--container.emotion--column-7 .col-xl-7 {
    width: 100%;
  }
  .emotion--container.emotion--column-7 .start-col-xl-7 {
    left: 85.71428571%;
  }
}
.emotion--container.emotion--column-8 .col-1 {
  width: 12.5%;
}
.emotion--container.emotion--column-8 .start-col-1 {
  left: 0%;
}
.emotion--container.emotion--column-8 .col-2 {
  width: 25%;
}
.emotion--container.emotion--column-8 .start-col-2 {
  left: 12.5%;
}
.emotion--container.emotion--column-8 .col-3 {
  width: 37.5%;
}
.emotion--container.emotion--column-8 .start-col-3 {
  left: 25%;
}
.emotion--container.emotion--column-8 .col-4 {
  width: 50%;
}
.emotion--container.emotion--column-8 .start-col-4 {
  left: 37.5%;
}
.emotion--container.emotion--column-8 .col-5 {
  width: 62.5%;
}
.emotion--container.emotion--column-8 .start-col-5 {
  left: 50%;
}
.emotion--container.emotion--column-8 .col-6 {
  width: 75%;
}
.emotion--container.emotion--column-8 .start-col-6 {
  left: 62.5%;
}
.emotion--container.emotion--column-8 .col-7 {
  width: 87.5%;
}
.emotion--container.emotion--column-8 .start-col-7 {
  left: 75%;
}
.emotion--container.emotion--column-8 .col-8 {
  width: 100%;
}
.emotion--container.emotion--column-8 .start-col-8 {
  left: 87.5%;
}
.emotion--container.emotion--column-8 .col-xs-1 {
  width: 12.5%;
}
.emotion--container.emotion--column-8 .start-col-xs-1 {
  left: 0%;
}
.emotion--container.emotion--column-8 .col-xs-2 {
  width: 25%;
}
.emotion--container.emotion--column-8 .start-col-xs-2 {
  left: 12.5%;
}
.emotion--container.emotion--column-8 .col-xs-3 {
  width: 37.5%;
}
.emotion--container.emotion--column-8 .start-col-xs-3 {
  left: 25%;
}
.emotion--container.emotion--column-8 .col-xs-4 {
  width: 50%;
}
.emotion--container.emotion--column-8 .start-col-xs-4 {
  left: 37.5%;
}
.emotion--container.emotion--column-8 .col-xs-5 {
  width: 62.5%;
}
.emotion--container.emotion--column-8 .start-col-xs-5 {
  left: 50%;
}
.emotion--container.emotion--column-8 .col-xs-6 {
  width: 75%;
}
.emotion--container.emotion--column-8 .start-col-xs-6 {
  left: 62.5%;
}
.emotion--container.emotion--column-8 .col-xs-7 {
  width: 87.5%;
}
.emotion--container.emotion--column-8 .start-col-xs-7 {
  left: 75%;
}
.emotion--container.emotion--column-8 .col-xs-8 {
  width: 100%;
}
.emotion--container.emotion--column-8 .start-col-xs-8 {
  left: 87.5%;
}
@media screen and (min-width: 30em) {
  .emotion--container.emotion--column-8 .col-s-1 {
    width: 12.5%;
  }
  .emotion--container.emotion--column-8 .start-col-s-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-8 .col-s-2 {
    width: 25%;
  }
  .emotion--container.emotion--column-8 .start-col-s-2 {
    left: 12.5%;
  }
  .emotion--container.emotion--column-8 .col-s-3 {
    width: 37.5%;
  }
  .emotion--container.emotion--column-8 .start-col-s-3 {
    left: 25%;
  }
  .emotion--container.emotion--column-8 .col-s-4 {
    width: 50%;
  }
  .emotion--container.emotion--column-8 .start-col-s-4 {
    left: 37.5%;
  }
  .emotion--container.emotion--column-8 .col-s-5 {
    width: 62.5%;
  }
  .emotion--container.emotion--column-8 .start-col-s-5 {
    left: 50%;
  }
  .emotion--container.emotion--column-8 .col-s-6 {
    width: 75%;
  }
  .emotion--container.emotion--column-8 .start-col-s-6 {
    left: 62.5%;
  }
  .emotion--container.emotion--column-8 .col-s-7 {
    width: 87.5%;
  }
  .emotion--container.emotion--column-8 .start-col-s-7 {
    left: 75%;
  }
  .emotion--container.emotion--column-8 .col-s-8 {
    width: 100%;
  }
  .emotion--container.emotion--column-8 .start-col-s-8 {
    left: 87.5%;
  }
}
@media screen and (min-width: 48em) {
  .emotion--container.emotion--column-8 .col-m-1 {
    width: 12.5%;
  }
  .emotion--container.emotion--column-8 .start-col-m-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-8 .col-m-2 {
    width: 25%;
  }
  .emotion--container.emotion--column-8 .start-col-m-2 {
    left: 12.5%;
  }
  .emotion--container.emotion--column-8 .col-m-3 {
    width: 37.5%;
  }
  .emotion--container.emotion--column-8 .start-col-m-3 {
    left: 25%;
  }
  .emotion--container.emotion--column-8 .col-m-4 {
    width: 50%;
  }
  .emotion--container.emotion--column-8 .start-col-m-4 {
    left: 37.5%;
  }
  .emotion--container.emotion--column-8 .col-m-5 {
    width: 62.5%;
  }
  .emotion--container.emotion--column-8 .start-col-m-5 {
    left: 50%;
  }
  .emotion--container.emotion--column-8 .col-m-6 {
    width: 75%;
  }
  .emotion--container.emotion--column-8 .start-col-m-6 {
    left: 62.5%;
  }
  .emotion--container.emotion--column-8 .col-m-7 {
    width: 87.5%;
  }
  .emotion--container.emotion--column-8 .start-col-m-7 {
    left: 75%;
  }
  .emotion--container.emotion--column-8 .col-m-8 {
    width: 100%;
  }
  .emotion--container.emotion--column-8 .start-col-m-8 {
    left: 87.5%;
  }
}
@media screen and (min-width: 64em) {
  .emotion--container.emotion--column-8 .col-l-1 {
    width: 12.5%;
  }
  .emotion--container.emotion--column-8 .start-col-l-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-8 .col-l-2 {
    width: 25%;
  }
  .emotion--container.emotion--column-8 .start-col-l-2 {
    left: 12.5%;
  }
  .emotion--container.emotion--column-8 .col-l-3 {
    width: 37.5%;
  }
  .emotion--container.emotion--column-8 .start-col-l-3 {
    left: 25%;
  }
  .emotion--container.emotion--column-8 .col-l-4 {
    width: 50%;
  }
  .emotion--container.emotion--column-8 .start-col-l-4 {
    left: 37.5%;
  }
  .emotion--container.emotion--column-8 .col-l-5 {
    width: 62.5%;
  }
  .emotion--container.emotion--column-8 .start-col-l-5 {
    left: 50%;
  }
  .emotion--container.emotion--column-8 .col-l-6 {
    width: 75%;
  }
  .emotion--container.emotion--column-8 .start-col-l-6 {
    left: 62.5%;
  }
  .emotion--container.emotion--column-8 .col-l-7 {
    width: 87.5%;
  }
  .emotion--container.emotion--column-8 .start-col-l-7 {
    left: 75%;
  }
  .emotion--container.emotion--column-8 .col-l-8 {
    width: 100%;
  }
  .emotion--container.emotion--column-8 .start-col-l-8 {
    left: 87.5%;
  }
}
@media screen and (min-width: 78.75em) {
  .emotion--container.emotion--column-8 .col-xl-1 {
    width: 12.5%;
  }
  .emotion--container.emotion--column-8 .start-col-xl-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-8 .col-xl-2 {
    width: 25%;
  }
  .emotion--container.emotion--column-8 .start-col-xl-2 {
    left: 12.5%;
  }
  .emotion--container.emotion--column-8 .col-xl-3 {
    width: 37.5%;
  }
  .emotion--container.emotion--column-8 .start-col-xl-3 {
    left: 25%;
  }
  .emotion--container.emotion--column-8 .col-xl-4 {
    width: 50%;
  }
  .emotion--container.emotion--column-8 .start-col-xl-4 {
    left: 37.5%;
  }
  .emotion--container.emotion--column-8 .col-xl-5 {
    width: 62.5%;
  }
  .emotion--container.emotion--column-8 .start-col-xl-5 {
    left: 50%;
  }
  .emotion--container.emotion--column-8 .col-xl-6 {
    width: 75%;
  }
  .emotion--container.emotion--column-8 .start-col-xl-6 {
    left: 62.5%;
  }
  .emotion--container.emotion--column-8 .col-xl-7 {
    width: 87.5%;
  }
  .emotion--container.emotion--column-8 .start-col-xl-7 {
    left: 75%;
  }
  .emotion--container.emotion--column-8 .col-xl-8 {
    width: 100%;
  }
  .emotion--container.emotion--column-8 .start-col-xl-8 {
    left: 87.5%;
  }
}
.emotion--container.emotion--column-9 .col-1 {
  width: 11.11111111%;
}
.emotion--container.emotion--column-9 .start-col-1 {
  left: 0%;
}
.emotion--container.emotion--column-9 .col-2 {
  width: 22.22222222%;
}
.emotion--container.emotion--column-9 .start-col-2 {
  left: 11.11111111%;
}
.emotion--container.emotion--column-9 .col-3 {
  width: 33.33333333%;
}
.emotion--container.emotion--column-9 .start-col-3 {
  left: 22.22222222%;
}
.emotion--container.emotion--column-9 .col-4 {
  width: 44.44444444%;
}
.emotion--container.emotion--column-9 .start-col-4 {
  left: 33.33333333%;
}
.emotion--container.emotion--column-9 .col-5 {
  width: 55.55555556%;
}
.emotion--container.emotion--column-9 .start-col-5 {
  left: 44.44444444%;
}
.emotion--container.emotion--column-9 .col-6 {
  width: 66.66666667%;
}
.emotion--container.emotion--column-9 .start-col-6 {
  left: 55.55555556%;
}
.emotion--container.emotion--column-9 .col-7 {
  width: 77.77777777999999%;
}
.emotion--container.emotion--column-9 .start-col-7 {
  left: 66.66666667%;
}
.emotion--container.emotion--column-9 .col-8 {
  width: 88.88888889%;
}
.emotion--container.emotion--column-9 .start-col-8 {
  left: 77.77777777999999%;
}
.emotion--container.emotion--column-9 .col-9 {
  width: 100%;
}
.emotion--container.emotion--column-9 .start-col-9 {
  left: 88.88888889%;
}
.emotion--container.emotion--column-9 .col-xs-1 {
  width: 11.11111111%;
}
.emotion--container.emotion--column-9 .start-col-xs-1 {
  left: 0%;
}
.emotion--container.emotion--column-9 .col-xs-2 {
  width: 22.22222222%;
}
.emotion--container.emotion--column-9 .start-col-xs-2 {
  left: 11.11111111%;
}
.emotion--container.emotion--column-9 .col-xs-3 {
  width: 33.33333333%;
}
.emotion--container.emotion--column-9 .start-col-xs-3 {
  left: 22.22222222%;
}
.emotion--container.emotion--column-9 .col-xs-4 {
  width: 44.44444444%;
}
.emotion--container.emotion--column-9 .start-col-xs-4 {
  left: 33.33333333%;
}
.emotion--container.emotion--column-9 .col-xs-5 {
  width: 55.55555556%;
}
.emotion--container.emotion--column-9 .start-col-xs-5 {
  left: 44.44444444%;
}
.emotion--container.emotion--column-9 .col-xs-6 {
  width: 66.66666667%;
}
.emotion--container.emotion--column-9 .start-col-xs-6 {
  left: 55.55555556%;
}
.emotion--container.emotion--column-9 .col-xs-7 {
  width: 77.77777777999999%;
}
.emotion--container.emotion--column-9 .start-col-xs-7 {
  left: 66.66666667%;
}
.emotion--container.emotion--column-9 .col-xs-8 {
  width: 88.88888889%;
}
.emotion--container.emotion--column-9 .start-col-xs-8 {
  left: 77.77777777999999%;
}
.emotion--container.emotion--column-9 .col-xs-9 {
  width: 100%;
}
.emotion--container.emotion--column-9 .start-col-xs-9 {
  left: 88.88888889%;
}
@media screen and (min-width: 30em) {
  .emotion--container.emotion--column-9 .col-s-1 {
    width: 11.11111111%;
  }
  .emotion--container.emotion--column-9 .start-col-s-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-9 .col-s-2 {
    width: 22.22222222%;
  }
  .emotion--container.emotion--column-9 .start-col-s-2 {
    left: 11.11111111%;
  }
  .emotion--container.emotion--column-9 .col-s-3 {
    width: 33.33333333%;
  }
  .emotion--container.emotion--column-9 .start-col-s-3 {
    left: 22.22222222%;
  }
  .emotion--container.emotion--column-9 .col-s-4 {
    width: 44.44444444%;
  }
  .emotion--container.emotion--column-9 .start-col-s-4 {
    left: 33.33333333%;
  }
  .emotion--container.emotion--column-9 .col-s-5 {
    width: 55.55555556%;
  }
  .emotion--container.emotion--column-9 .start-col-s-5 {
    left: 44.44444444%;
  }
  .emotion--container.emotion--column-9 .col-s-6 {
    width: 66.66666667%;
  }
  .emotion--container.emotion--column-9 .start-col-s-6 {
    left: 55.55555556%;
  }
  .emotion--container.emotion--column-9 .col-s-7 {
    width: 77.77777777999999%;
  }
  .emotion--container.emotion--column-9 .start-col-s-7 {
    left: 66.66666667%;
  }
  .emotion--container.emotion--column-9 .col-s-8 {
    width: 88.88888889%;
  }
  .emotion--container.emotion--column-9 .start-col-s-8 {
    left: 77.77777777999999%;
  }
  .emotion--container.emotion--column-9 .col-s-9 {
    width: 100%;
  }
  .emotion--container.emotion--column-9 .start-col-s-9 {
    left: 88.88888889%;
  }
}
@media screen and (min-width: 48em) {
  .emotion--container.emotion--column-9 .col-m-1 {
    width: 11.11111111%;
  }
  .emotion--container.emotion--column-9 .start-col-m-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-9 .col-m-2 {
    width: 22.22222222%;
  }
  .emotion--container.emotion--column-9 .start-col-m-2 {
    left: 11.11111111%;
  }
  .emotion--container.emotion--column-9 .col-m-3 {
    width: 33.33333333%;
  }
  .emotion--container.emotion--column-9 .start-col-m-3 {
    left: 22.22222222%;
  }
  .emotion--container.emotion--column-9 .col-m-4 {
    width: 44.44444444%;
  }
  .emotion--container.emotion--column-9 .start-col-m-4 {
    left: 33.33333333%;
  }
  .emotion--container.emotion--column-9 .col-m-5 {
    width: 55.55555556%;
  }
  .emotion--container.emotion--column-9 .start-col-m-5 {
    left: 44.44444444%;
  }
  .emotion--container.emotion--column-9 .col-m-6 {
    width: 66.66666667%;
  }
  .emotion--container.emotion--column-9 .start-col-m-6 {
    left: 55.55555556%;
  }
  .emotion--container.emotion--column-9 .col-m-7 {
    width: 77.77777777999999%;
  }
  .emotion--container.emotion--column-9 .start-col-m-7 {
    left: 66.66666667%;
  }
  .emotion--container.emotion--column-9 .col-m-8 {
    width: 88.88888889%;
  }
  .emotion--container.emotion--column-9 .start-col-m-8 {
    left: 77.77777777999999%;
  }
  .emotion--container.emotion--column-9 .col-m-9 {
    width: 100%;
  }
  .emotion--container.emotion--column-9 .start-col-m-9 {
    left: 88.88888889%;
  }
}
@media screen and (min-width: 64em) {
  .emotion--container.emotion--column-9 .col-l-1 {
    width: 11.11111111%;
  }
  .emotion--container.emotion--column-9 .start-col-l-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-9 .col-l-2 {
    width: 22.22222222%;
  }
  .emotion--container.emotion--column-9 .start-col-l-2 {
    left: 11.11111111%;
  }
  .emotion--container.emotion--column-9 .col-l-3 {
    width: 33.33333333%;
  }
  .emotion--container.emotion--column-9 .start-col-l-3 {
    left: 22.22222222%;
  }
  .emotion--container.emotion--column-9 .col-l-4 {
    width: 44.44444444%;
  }
  .emotion--container.emotion--column-9 .start-col-l-4 {
    left: 33.33333333%;
  }
  .emotion--container.emotion--column-9 .col-l-5 {
    width: 55.55555556%;
  }
  .emotion--container.emotion--column-9 .start-col-l-5 {
    left: 44.44444444%;
  }
  .emotion--container.emotion--column-9 .col-l-6 {
    width: 66.66666667%;
  }
  .emotion--container.emotion--column-9 .start-col-l-6 {
    left: 55.55555556%;
  }
  .emotion--container.emotion--column-9 .col-l-7 {
    width: 77.77777777999999%;
  }
  .emotion--container.emotion--column-9 .start-col-l-7 {
    left: 66.66666667%;
  }
  .emotion--container.emotion--column-9 .col-l-8 {
    width: 88.88888889%;
  }
  .emotion--container.emotion--column-9 .start-col-l-8 {
    left: 77.77777777999999%;
  }
  .emotion--container.emotion--column-9 .col-l-9 {
    width: 100%;
  }
  .emotion--container.emotion--column-9 .start-col-l-9 {
    left: 88.88888889%;
  }
}
@media screen and (min-width: 78.75em) {
  .emotion--container.emotion--column-9 .col-xl-1 {
    width: 11.11111111%;
  }
  .emotion--container.emotion--column-9 .start-col-xl-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-9 .col-xl-2 {
    width: 22.22222222%;
  }
  .emotion--container.emotion--column-9 .start-col-xl-2 {
    left: 11.11111111%;
  }
  .emotion--container.emotion--column-9 .col-xl-3 {
    width: 33.33333333%;
  }
  .emotion--container.emotion--column-9 .start-col-xl-3 {
    left: 22.22222222%;
  }
  .emotion--container.emotion--column-9 .col-xl-4 {
    width: 44.44444444%;
  }
  .emotion--container.emotion--column-9 .start-col-xl-4 {
    left: 33.33333333%;
  }
  .emotion--container.emotion--column-9 .col-xl-5 {
    width: 55.55555556%;
  }
  .emotion--container.emotion--column-9 .start-col-xl-5 {
    left: 44.44444444%;
  }
  .emotion--container.emotion--column-9 .col-xl-6 {
    width: 66.66666667%;
  }
  .emotion--container.emotion--column-9 .start-col-xl-6 {
    left: 55.55555556%;
  }
  .emotion--container.emotion--column-9 .col-xl-7 {
    width: 77.77777777999999%;
  }
  .emotion--container.emotion--column-9 .start-col-xl-7 {
    left: 66.66666667%;
  }
  .emotion--container.emotion--column-9 .col-xl-8 {
    width: 88.88888889%;
  }
  .emotion--container.emotion--column-9 .start-col-xl-8 {
    left: 77.77777777999999%;
  }
  .emotion--container.emotion--column-9 .col-xl-9 {
    width: 100%;
  }
  .emotion--container.emotion--column-9 .start-col-xl-9 {
    left: 88.88888889%;
  }
}
.emotion--container.emotion--column-10 .col-1 {
  width: 10%;
}
.emotion--container.emotion--column-10 .start-col-1 {
  left: 0%;
}
.emotion--container.emotion--column-10 .col-2 {
  width: 20%;
}
.emotion--container.emotion--column-10 .start-col-2 {
  left: 10%;
}
.emotion--container.emotion--column-10 .col-3 {
  width: 30%;
}
.emotion--container.emotion--column-10 .start-col-3 {
  left: 20%;
}
.emotion--container.emotion--column-10 .col-4 {
  width: 40%;
}
.emotion--container.emotion--column-10 .start-col-4 {
  left: 30%;
}
.emotion--container.emotion--column-10 .col-5 {
  width: 50%;
}
.emotion--container.emotion--column-10 .start-col-5 {
  left: 40%;
}
.emotion--container.emotion--column-10 .col-6 {
  width: 60%;
}
.emotion--container.emotion--column-10 .start-col-6 {
  left: 50%;
}
.emotion--container.emotion--column-10 .col-7 {
  width: 70%;
}
.emotion--container.emotion--column-10 .start-col-7 {
  left: 60%;
}
.emotion--container.emotion--column-10 .col-8 {
  width: 80%;
}
.emotion--container.emotion--column-10 .start-col-8 {
  left: 70%;
}
.emotion--container.emotion--column-10 .col-9 {
  width: 90%;
}
.emotion--container.emotion--column-10 .start-col-9 {
  left: 80%;
}
.emotion--container.emotion--column-10 .col-10 {
  width: 100%;
}
.emotion--container.emotion--column-10 .start-col-10 {
  left: 90%;
}
.emotion--container.emotion--column-10 .col-xs-1 {
  width: 10%;
}
.emotion--container.emotion--column-10 .start-col-xs-1 {
  left: 0%;
}
.emotion--container.emotion--column-10 .col-xs-2 {
  width: 20%;
}
.emotion--container.emotion--column-10 .start-col-xs-2 {
  left: 10%;
}
.emotion--container.emotion--column-10 .col-xs-3 {
  width: 30%;
}
.emotion--container.emotion--column-10 .start-col-xs-3 {
  left: 20%;
}
.emotion--container.emotion--column-10 .col-xs-4 {
  width: 40%;
}
.emotion--container.emotion--column-10 .start-col-xs-4 {
  left: 30%;
}
.emotion--container.emotion--column-10 .col-xs-5 {
  width: 50%;
}
.emotion--container.emotion--column-10 .start-col-xs-5 {
  left: 40%;
}
.emotion--container.emotion--column-10 .col-xs-6 {
  width: 60%;
}
.emotion--container.emotion--column-10 .start-col-xs-6 {
  left: 50%;
}
.emotion--container.emotion--column-10 .col-xs-7 {
  width: 70%;
}
.emotion--container.emotion--column-10 .start-col-xs-7 {
  left: 60%;
}
.emotion--container.emotion--column-10 .col-xs-8 {
  width: 80%;
}
.emotion--container.emotion--column-10 .start-col-xs-8 {
  left: 70%;
}
.emotion--container.emotion--column-10 .col-xs-9 {
  width: 90%;
}
.emotion--container.emotion--column-10 .start-col-xs-9 {
  left: 80%;
}
.emotion--container.emotion--column-10 .col-xs-10 {
  width: 100%;
}
.emotion--container.emotion--column-10 .start-col-xs-10 {
  left: 90%;
}
@media screen and (min-width: 30em) {
  .emotion--container.emotion--column-10 .col-s-1 {
    width: 10%;
  }
  .emotion--container.emotion--column-10 .start-col-s-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-10 .col-s-2 {
    width: 20%;
  }
  .emotion--container.emotion--column-10 .start-col-s-2 {
    left: 10%;
  }
  .emotion--container.emotion--column-10 .col-s-3 {
    width: 30%;
  }
  .emotion--container.emotion--column-10 .start-col-s-3 {
    left: 20%;
  }
  .emotion--container.emotion--column-10 .col-s-4 {
    width: 40%;
  }
  .emotion--container.emotion--column-10 .start-col-s-4 {
    left: 30%;
  }
  .emotion--container.emotion--column-10 .col-s-5 {
    width: 50%;
  }
  .emotion--container.emotion--column-10 .start-col-s-5 {
    left: 40%;
  }
  .emotion--container.emotion--column-10 .col-s-6 {
    width: 60%;
  }
  .emotion--container.emotion--column-10 .start-col-s-6 {
    left: 50%;
  }
  .emotion--container.emotion--column-10 .col-s-7 {
    width: 70%;
  }
  .emotion--container.emotion--column-10 .start-col-s-7 {
    left: 60%;
  }
  .emotion--container.emotion--column-10 .col-s-8 {
    width: 80%;
  }
  .emotion--container.emotion--column-10 .start-col-s-8 {
    left: 70%;
  }
  .emotion--container.emotion--column-10 .col-s-9 {
    width: 90%;
  }
  .emotion--container.emotion--column-10 .start-col-s-9 {
    left: 80%;
  }
  .emotion--container.emotion--column-10 .col-s-10 {
    width: 100%;
  }
  .emotion--container.emotion--column-10 .start-col-s-10 {
    left: 90%;
  }
}
@media screen and (min-width: 48em) {
  .emotion--container.emotion--column-10 .col-m-1 {
    width: 10%;
  }
  .emotion--container.emotion--column-10 .start-col-m-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-10 .col-m-2 {
    width: 20%;
  }
  .emotion--container.emotion--column-10 .start-col-m-2 {
    left: 10%;
  }
  .emotion--container.emotion--column-10 .col-m-3 {
    width: 30%;
  }
  .emotion--container.emotion--column-10 .start-col-m-3 {
    left: 20%;
  }
  .emotion--container.emotion--column-10 .col-m-4 {
    width: 40%;
  }
  .emotion--container.emotion--column-10 .start-col-m-4 {
    left: 30%;
  }
  .emotion--container.emotion--column-10 .col-m-5 {
    width: 50%;
  }
  .emotion--container.emotion--column-10 .start-col-m-5 {
    left: 40%;
  }
  .emotion--container.emotion--column-10 .col-m-6 {
    width: 60%;
  }
  .emotion--container.emotion--column-10 .start-col-m-6 {
    left: 50%;
  }
  .emotion--container.emotion--column-10 .col-m-7 {
    width: 70%;
  }
  .emotion--container.emotion--column-10 .start-col-m-7 {
    left: 60%;
  }
  .emotion--container.emotion--column-10 .col-m-8 {
    width: 80%;
  }
  .emotion--container.emotion--column-10 .start-col-m-8 {
    left: 70%;
  }
  .emotion--container.emotion--column-10 .col-m-9 {
    width: 90%;
  }
  .emotion--container.emotion--column-10 .start-col-m-9 {
    left: 80%;
  }
  .emotion--container.emotion--column-10 .col-m-10 {
    width: 100%;
  }
  .emotion--container.emotion--column-10 .start-col-m-10 {
    left: 90%;
  }
}
@media screen and (min-width: 64em) {
  .emotion--container.emotion--column-10 .col-l-1 {
    width: 10%;
  }
  .emotion--container.emotion--column-10 .start-col-l-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-10 .col-l-2 {
    width: 20%;
  }
  .emotion--container.emotion--column-10 .start-col-l-2 {
    left: 10%;
  }
  .emotion--container.emotion--column-10 .col-l-3 {
    width: 30%;
  }
  .emotion--container.emotion--column-10 .start-col-l-3 {
    left: 20%;
  }
  .emotion--container.emotion--column-10 .col-l-4 {
    width: 40%;
  }
  .emotion--container.emotion--column-10 .start-col-l-4 {
    left: 30%;
  }
  .emotion--container.emotion--column-10 .col-l-5 {
    width: 50%;
  }
  .emotion--container.emotion--column-10 .start-col-l-5 {
    left: 40%;
  }
  .emotion--container.emotion--column-10 .col-l-6 {
    width: 60%;
  }
  .emotion--container.emotion--column-10 .start-col-l-6 {
    left: 50%;
  }
  .emotion--container.emotion--column-10 .col-l-7 {
    width: 70%;
  }
  .emotion--container.emotion--column-10 .start-col-l-7 {
    left: 60%;
  }
  .emotion--container.emotion--column-10 .col-l-8 {
    width: 80%;
  }
  .emotion--container.emotion--column-10 .start-col-l-8 {
    left: 70%;
  }
  .emotion--container.emotion--column-10 .col-l-9 {
    width: 90%;
  }
  .emotion--container.emotion--column-10 .start-col-l-9 {
    left: 80%;
  }
  .emotion--container.emotion--column-10 .col-l-10 {
    width: 100%;
  }
  .emotion--container.emotion--column-10 .start-col-l-10 {
    left: 90%;
  }
}
@media screen and (min-width: 78.75em) {
  .emotion--container.emotion--column-10 .col-xl-1 {
    width: 10%;
  }
  .emotion--container.emotion--column-10 .start-col-xl-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-10 .col-xl-2 {
    width: 20%;
  }
  .emotion--container.emotion--column-10 .start-col-xl-2 {
    left: 10%;
  }
  .emotion--container.emotion--column-10 .col-xl-3 {
    width: 30%;
  }
  .emotion--container.emotion--column-10 .start-col-xl-3 {
    left: 20%;
  }
  .emotion--container.emotion--column-10 .col-xl-4 {
    width: 40%;
  }
  .emotion--container.emotion--column-10 .start-col-xl-4 {
    left: 30%;
  }
  .emotion--container.emotion--column-10 .col-xl-5 {
    width: 50%;
  }
  .emotion--container.emotion--column-10 .start-col-xl-5 {
    left: 40%;
  }
  .emotion--container.emotion--column-10 .col-xl-6 {
    width: 60%;
  }
  .emotion--container.emotion--column-10 .start-col-xl-6 {
    left: 50%;
  }
  .emotion--container.emotion--column-10 .col-xl-7 {
    width: 70%;
  }
  .emotion--container.emotion--column-10 .start-col-xl-7 {
    left: 60%;
  }
  .emotion--container.emotion--column-10 .col-xl-8 {
    width: 80%;
  }
  .emotion--container.emotion--column-10 .start-col-xl-8 {
    left: 70%;
  }
  .emotion--container.emotion--column-10 .col-xl-9 {
    width: 90%;
  }
  .emotion--container.emotion--column-10 .start-col-xl-9 {
    left: 80%;
  }
  .emotion--container.emotion--column-10 .col-xl-10 {
    width: 100%;
  }
  .emotion--container.emotion--column-10 .start-col-xl-10 {
    left: 90%;
  }
}
.emotion--container.emotion--column-11 .col-1 {
  width: 9.09090909%;
}
.emotion--container.emotion--column-11 .start-col-1 {
  left: 0%;
}
.emotion--container.emotion--column-11 .col-2 {
  width: 18.18181818%;
}
.emotion--container.emotion--column-11 .start-col-2 {
  left: 9.09090909%;
}
.emotion--container.emotion--column-11 .col-3 {
  width: 27.27272727%;
}
.emotion--container.emotion--column-11 .start-col-3 {
  left: 18.18181818%;
}
.emotion--container.emotion--column-11 .col-4 {
  width: 36.36363636%;
}
.emotion--container.emotion--column-11 .start-col-4 {
  left: 27.27272727%;
}
.emotion--container.emotion--column-11 .col-5 {
  width: 45.45454545%;
}
.emotion--container.emotion--column-11 .start-col-5 {
  left: 36.36363636%;
}
.emotion--container.emotion--column-11 .col-6 {
  width: 54.54545455%;
}
.emotion--container.emotion--column-11 .start-col-6 {
  left: 45.45454545%;
}
.emotion--container.emotion--column-11 .col-7 {
  width: 63.63636364%;
}
.emotion--container.emotion--column-11 .start-col-7 {
  left: 54.54545455%;
}
.emotion--container.emotion--column-11 .col-8 {
  width: 72.72727273%;
}
.emotion--container.emotion--column-11 .start-col-8 {
  left: 63.63636364%;
}
.emotion--container.emotion--column-11 .col-9 {
  width: 81.81818182000001%;
}
.emotion--container.emotion--column-11 .start-col-9 {
  left: 72.72727273%;
}
.emotion--container.emotion--column-11 .col-10 {
  width: 90.90909091%;
}
.emotion--container.emotion--column-11 .start-col-10 {
  left: 81.81818182000001%;
}
.emotion--container.emotion--column-11 .col-11 {
  width: 100%;
}
.emotion--container.emotion--column-11 .start-col-11 {
  left: 90.90909091%;
}
.emotion--container.emotion--column-11 .col-xs-1 {
  width: 9.09090909%;
}
.emotion--container.emotion--column-11 .start-col-xs-1 {
  left: 0%;
}
.emotion--container.emotion--column-11 .col-xs-2 {
  width: 18.18181818%;
}
.emotion--container.emotion--column-11 .start-col-xs-2 {
  left: 9.09090909%;
}
.emotion--container.emotion--column-11 .col-xs-3 {
  width: 27.27272727%;
}
.emotion--container.emotion--column-11 .start-col-xs-3 {
  left: 18.18181818%;
}
.emotion--container.emotion--column-11 .col-xs-4 {
  width: 36.36363636%;
}
.emotion--container.emotion--column-11 .start-col-xs-4 {
  left: 27.27272727%;
}
.emotion--container.emotion--column-11 .col-xs-5 {
  width: 45.45454545%;
}
.emotion--container.emotion--column-11 .start-col-xs-5 {
  left: 36.36363636%;
}
.emotion--container.emotion--column-11 .col-xs-6 {
  width: 54.54545455%;
}
.emotion--container.emotion--column-11 .start-col-xs-6 {
  left: 45.45454545%;
}
.emotion--container.emotion--column-11 .col-xs-7 {
  width: 63.63636364%;
}
.emotion--container.emotion--column-11 .start-col-xs-7 {
  left: 54.54545455%;
}
.emotion--container.emotion--column-11 .col-xs-8 {
  width: 72.72727273%;
}
.emotion--container.emotion--column-11 .start-col-xs-8 {
  left: 63.63636364%;
}
.emotion--container.emotion--column-11 .col-xs-9 {
  width: 81.81818182000001%;
}
.emotion--container.emotion--column-11 .start-col-xs-9 {
  left: 72.72727273%;
}
.emotion--container.emotion--column-11 .col-xs-10 {
  width: 90.90909091%;
}
.emotion--container.emotion--column-11 .start-col-xs-10 {
  left: 81.81818182000001%;
}
.emotion--container.emotion--column-11 .col-xs-11 {
  width: 100%;
}
.emotion--container.emotion--column-11 .start-col-xs-11 {
  left: 90.90909091%;
}
@media screen and (min-width: 30em) {
  .emotion--container.emotion--column-11 .col-s-1 {
    width: 9.09090909%;
  }
  .emotion--container.emotion--column-11 .start-col-s-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-11 .col-s-2 {
    width: 18.18181818%;
  }
  .emotion--container.emotion--column-11 .start-col-s-2 {
    left: 9.09090909%;
  }
  .emotion--container.emotion--column-11 .col-s-3 {
    width: 27.27272727%;
  }
  .emotion--container.emotion--column-11 .start-col-s-3 {
    left: 18.18181818%;
  }
  .emotion--container.emotion--column-11 .col-s-4 {
    width: 36.36363636%;
  }
  .emotion--container.emotion--column-11 .start-col-s-4 {
    left: 27.27272727%;
  }
  .emotion--container.emotion--column-11 .col-s-5 {
    width: 45.45454545%;
  }
  .emotion--container.emotion--column-11 .start-col-s-5 {
    left: 36.36363636%;
  }
  .emotion--container.emotion--column-11 .col-s-6 {
    width: 54.54545455%;
  }
  .emotion--container.emotion--column-11 .start-col-s-6 {
    left: 45.45454545%;
  }
  .emotion--container.emotion--column-11 .col-s-7 {
    width: 63.63636364%;
  }
  .emotion--container.emotion--column-11 .start-col-s-7 {
    left: 54.54545455%;
  }
  .emotion--container.emotion--column-11 .col-s-8 {
    width: 72.72727273%;
  }
  .emotion--container.emotion--column-11 .start-col-s-8 {
    left: 63.63636364%;
  }
  .emotion--container.emotion--column-11 .col-s-9 {
    width: 81.81818182000001%;
  }
  .emotion--container.emotion--column-11 .start-col-s-9 {
    left: 72.72727273%;
  }
  .emotion--container.emotion--column-11 .col-s-10 {
    width: 90.90909091%;
  }
  .emotion--container.emotion--column-11 .start-col-s-10 {
    left: 81.81818182000001%;
  }
  .emotion--container.emotion--column-11 .col-s-11 {
    width: 100%;
  }
  .emotion--container.emotion--column-11 .start-col-s-11 {
    left: 90.90909091%;
  }
}
@media screen and (min-width: 48em) {
  .emotion--container.emotion--column-11 .col-m-1 {
    width: 9.09090909%;
  }
  .emotion--container.emotion--column-11 .start-col-m-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-11 .col-m-2 {
    width: 18.18181818%;
  }
  .emotion--container.emotion--column-11 .start-col-m-2 {
    left: 9.09090909%;
  }
  .emotion--container.emotion--column-11 .col-m-3 {
    width: 27.27272727%;
  }
  .emotion--container.emotion--column-11 .start-col-m-3 {
    left: 18.18181818%;
  }
  .emotion--container.emotion--column-11 .col-m-4 {
    width: 36.36363636%;
  }
  .emotion--container.emotion--column-11 .start-col-m-4 {
    left: 27.27272727%;
  }
  .emotion--container.emotion--column-11 .col-m-5 {
    width: 45.45454545%;
  }
  .emotion--container.emotion--column-11 .start-col-m-5 {
    left: 36.36363636%;
  }
  .emotion--container.emotion--column-11 .col-m-6 {
    width: 54.54545455%;
  }
  .emotion--container.emotion--column-11 .start-col-m-6 {
    left: 45.45454545%;
  }
  .emotion--container.emotion--column-11 .col-m-7 {
    width: 63.63636364%;
  }
  .emotion--container.emotion--column-11 .start-col-m-7 {
    left: 54.54545455%;
  }
  .emotion--container.emotion--column-11 .col-m-8 {
    width: 72.72727273%;
  }
  .emotion--container.emotion--column-11 .start-col-m-8 {
    left: 63.63636364%;
  }
  .emotion--container.emotion--column-11 .col-m-9 {
    width: 81.81818182000001%;
  }
  .emotion--container.emotion--column-11 .start-col-m-9 {
    left: 72.72727273%;
  }
  .emotion--container.emotion--column-11 .col-m-10 {
    width: 90.90909091%;
  }
  .emotion--container.emotion--column-11 .start-col-m-10 {
    left: 81.81818182000001%;
  }
  .emotion--container.emotion--column-11 .col-m-11 {
    width: 100%;
  }
  .emotion--container.emotion--column-11 .start-col-m-11 {
    left: 90.90909091%;
  }
}
@media screen and (min-width: 64em) {
  .emotion--container.emotion--column-11 .col-l-1 {
    width: 9.09090909%;
  }
  .emotion--container.emotion--column-11 .start-col-l-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-11 .col-l-2 {
    width: 18.18181818%;
  }
  .emotion--container.emotion--column-11 .start-col-l-2 {
    left: 9.09090909%;
  }
  .emotion--container.emotion--column-11 .col-l-3 {
    width: 27.27272727%;
  }
  .emotion--container.emotion--column-11 .start-col-l-3 {
    left: 18.18181818%;
  }
  .emotion--container.emotion--column-11 .col-l-4 {
    width: 36.36363636%;
  }
  .emotion--container.emotion--column-11 .start-col-l-4 {
    left: 27.27272727%;
  }
  .emotion--container.emotion--column-11 .col-l-5 {
    width: 45.45454545%;
  }
  .emotion--container.emotion--column-11 .start-col-l-5 {
    left: 36.36363636%;
  }
  .emotion--container.emotion--column-11 .col-l-6 {
    width: 54.54545455%;
  }
  .emotion--container.emotion--column-11 .start-col-l-6 {
    left: 45.45454545%;
  }
  .emotion--container.emotion--column-11 .col-l-7 {
    width: 63.63636364%;
  }
  .emotion--container.emotion--column-11 .start-col-l-7 {
    left: 54.54545455%;
  }
  .emotion--container.emotion--column-11 .col-l-8 {
    width: 72.72727273%;
  }
  .emotion--container.emotion--column-11 .start-col-l-8 {
    left: 63.63636364%;
  }
  .emotion--container.emotion--column-11 .col-l-9 {
    width: 81.81818182000001%;
  }
  .emotion--container.emotion--column-11 .start-col-l-9 {
    left: 72.72727273%;
  }
  .emotion--container.emotion--column-11 .col-l-10 {
    width: 90.90909091%;
  }
  .emotion--container.emotion--column-11 .start-col-l-10 {
    left: 81.81818182000001%;
  }
  .emotion--container.emotion--column-11 .col-l-11 {
    width: 100%;
  }
  .emotion--container.emotion--column-11 .start-col-l-11 {
    left: 90.90909091%;
  }
}
@media screen and (min-width: 78.75em) {
  .emotion--container.emotion--column-11 .col-xl-1 {
    width: 9.09090909%;
  }
  .emotion--container.emotion--column-11 .start-col-xl-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-11 .col-xl-2 {
    width: 18.18181818%;
  }
  .emotion--container.emotion--column-11 .start-col-xl-2 {
    left: 9.09090909%;
  }
  .emotion--container.emotion--column-11 .col-xl-3 {
    width: 27.27272727%;
  }
  .emotion--container.emotion--column-11 .start-col-xl-3 {
    left: 18.18181818%;
  }
  .emotion--container.emotion--column-11 .col-xl-4 {
    width: 36.36363636%;
  }
  .emotion--container.emotion--column-11 .start-col-xl-4 {
    left: 27.27272727%;
  }
  .emotion--container.emotion--column-11 .col-xl-5 {
    width: 45.45454545%;
  }
  .emotion--container.emotion--column-11 .start-col-xl-5 {
    left: 36.36363636%;
  }
  .emotion--container.emotion--column-11 .col-xl-6 {
    width: 54.54545455%;
  }
  .emotion--container.emotion--column-11 .start-col-xl-6 {
    left: 45.45454545%;
  }
  .emotion--container.emotion--column-11 .col-xl-7 {
    width: 63.63636364%;
  }
  .emotion--container.emotion--column-11 .start-col-xl-7 {
    left: 54.54545455%;
  }
  .emotion--container.emotion--column-11 .col-xl-8 {
    width: 72.72727273%;
  }
  .emotion--container.emotion--column-11 .start-col-xl-8 {
    left: 63.63636364%;
  }
  .emotion--container.emotion--column-11 .col-xl-9 {
    width: 81.81818182000001%;
  }
  .emotion--container.emotion--column-11 .start-col-xl-9 {
    left: 72.72727273%;
  }
  .emotion--container.emotion--column-11 .col-xl-10 {
    width: 90.90909091%;
  }
  .emotion--container.emotion--column-11 .start-col-xl-10 {
    left: 81.81818182000001%;
  }
  .emotion--container.emotion--column-11 .col-xl-11 {
    width: 100%;
  }
  .emotion--container.emotion--column-11 .start-col-xl-11 {
    left: 90.90909091%;
  }
}
.emotion--container.emotion--column-12 .col-1 {
  width: 8.33333333%;
}
.emotion--container.emotion--column-12 .start-col-1 {
  left: 0%;
}
.emotion--container.emotion--column-12 .col-2 {
  width: 16.66666667%;
}
.emotion--container.emotion--column-12 .start-col-2 {
  left: 8.33333333%;
}
.emotion--container.emotion--column-12 .col-3 {
  width: 25%;
}
.emotion--container.emotion--column-12 .start-col-3 {
  left: 16.66666667%;
}
.emotion--container.emotion--column-12 .col-4 {
  width: 33.33333333%;
}
.emotion--container.emotion--column-12 .start-col-4 {
  left: 25%;
}
.emotion--container.emotion--column-12 .col-5 {
  width: 41.66666667%;
}
.emotion--container.emotion--column-12 .start-col-5 {
  left: 33.33333333%;
}
.emotion--container.emotion--column-12 .col-6 {
  width: 50%;
}
.emotion--container.emotion--column-12 .start-col-6 {
  left: 41.66666667%;
}
.emotion--container.emotion--column-12 .col-7 {
  width: 58.33333333%;
}
.emotion--container.emotion--column-12 .start-col-7 {
  left: 50%;
}
.emotion--container.emotion--column-12 .col-8 {
  width: 66.66666667%;
}
.emotion--container.emotion--column-12 .start-col-8 {
  left: 58.33333333%;
}
.emotion--container.emotion--column-12 .col-9 {
  width: 75%;
}
.emotion--container.emotion--column-12 .start-col-9 {
  left: 66.66666667%;
}
.emotion--container.emotion--column-12 .col-10 {
  width: 83.33333333%;
}
.emotion--container.emotion--column-12 .start-col-10 {
  left: 75%;
}
.emotion--container.emotion--column-12 .col-11 {
  width: 91.66666667%;
}
.emotion--container.emotion--column-12 .start-col-11 {
  left: 83.33333333%;
}
.emotion--container.emotion--column-12 .col-12 {
  width: 100%;
}
.emotion--container.emotion--column-12 .start-col-12 {
  left: 91.66666667%;
}
.emotion--container.emotion--column-12 .col-xs-1 {
  width: 8.33333333%;
}
.emotion--container.emotion--column-12 .start-col-xs-1 {
  left: 0%;
}
.emotion--container.emotion--column-12 .col-xs-2 {
  width: 16.66666667%;
}
.emotion--container.emotion--column-12 .start-col-xs-2 {
  left: 8.33333333%;
}
.emotion--container.emotion--column-12 .col-xs-3 {
  width: 25%;
}
.emotion--container.emotion--column-12 .start-col-xs-3 {
  left: 16.66666667%;
}
.emotion--container.emotion--column-12 .col-xs-4 {
  width: 33.33333333%;
}
.emotion--container.emotion--column-12 .start-col-xs-4 {
  left: 25%;
}
.emotion--container.emotion--column-12 .col-xs-5 {
  width: 41.66666667%;
}
.emotion--container.emotion--column-12 .start-col-xs-5 {
  left: 33.33333333%;
}
.emotion--container.emotion--column-12 .col-xs-6 {
  width: 50%;
}
.emotion--container.emotion--column-12 .start-col-xs-6 {
  left: 41.66666667%;
}
.emotion--container.emotion--column-12 .col-xs-7 {
  width: 58.33333333%;
}
.emotion--container.emotion--column-12 .start-col-xs-7 {
  left: 50%;
}
.emotion--container.emotion--column-12 .col-xs-8 {
  width: 66.66666667%;
}
.emotion--container.emotion--column-12 .start-col-xs-8 {
  left: 58.33333333%;
}
.emotion--container.emotion--column-12 .col-xs-9 {
  width: 75%;
}
.emotion--container.emotion--column-12 .start-col-xs-9 {
  left: 66.66666667%;
}
.emotion--container.emotion--column-12 .col-xs-10 {
  width: 83.33333333%;
}
.emotion--container.emotion--column-12 .start-col-xs-10 {
  left: 75%;
}
.emotion--container.emotion--column-12 .col-xs-11 {
  width: 91.66666667%;
}
.emotion--container.emotion--column-12 .start-col-xs-11 {
  left: 83.33333333%;
}
.emotion--container.emotion--column-12 .col-xs-12 {
  width: 100%;
}
.emotion--container.emotion--column-12 .start-col-xs-12 {
  left: 91.66666667%;
}
@media screen and (min-width: 30em) {
  .emotion--container.emotion--column-12 .col-s-1 {
    width: 8.33333333%;
  }
  .emotion--container.emotion--column-12 .start-col-s-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-12 .col-s-2 {
    width: 16.66666667%;
  }
  .emotion--container.emotion--column-12 .start-col-s-2 {
    left: 8.33333333%;
  }
  .emotion--container.emotion--column-12 .col-s-3 {
    width: 25%;
  }
  .emotion--container.emotion--column-12 .start-col-s-3 {
    left: 16.66666667%;
  }
  .emotion--container.emotion--column-12 .col-s-4 {
    width: 33.33333333%;
  }
  .emotion--container.emotion--column-12 .start-col-s-4 {
    left: 25%;
  }
  .emotion--container.emotion--column-12 .col-s-5 {
    width: 41.66666667%;
  }
  .emotion--container.emotion--column-12 .start-col-s-5 {
    left: 33.33333333%;
  }
  .emotion--container.emotion--column-12 .col-s-6 {
    width: 50%;
  }
  .emotion--container.emotion--column-12 .start-col-s-6 {
    left: 41.66666667%;
  }
  .emotion--container.emotion--column-12 .col-s-7 {
    width: 58.33333333%;
  }
  .emotion--container.emotion--column-12 .start-col-s-7 {
    left: 50%;
  }
  .emotion--container.emotion--column-12 .col-s-8 {
    width: 66.66666667%;
  }
  .emotion--container.emotion--column-12 .start-col-s-8 {
    left: 58.33333333%;
  }
  .emotion--container.emotion--column-12 .col-s-9 {
    width: 75%;
  }
  .emotion--container.emotion--column-12 .start-col-s-9 {
    left: 66.66666667%;
  }
  .emotion--container.emotion--column-12 .col-s-10 {
    width: 83.33333333%;
  }
  .emotion--container.emotion--column-12 .start-col-s-10 {
    left: 75%;
  }
  .emotion--container.emotion--column-12 .col-s-11 {
    width: 91.66666667%;
  }
  .emotion--container.emotion--column-12 .start-col-s-11 {
    left: 83.33333333%;
  }
  .emotion--container.emotion--column-12 .col-s-12 {
    width: 100%;
  }
  .emotion--container.emotion--column-12 .start-col-s-12 {
    left: 91.66666667%;
  }
}
@media screen and (min-width: 48em) {
  .emotion--container.emotion--column-12 .col-m-1 {
    width: 8.33333333%;
  }
  .emotion--container.emotion--column-12 .start-col-m-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-12 .col-m-2 {
    width: 16.66666667%;
  }
  .emotion--container.emotion--column-12 .start-col-m-2 {
    left: 8.33333333%;
  }
  .emotion--container.emotion--column-12 .col-m-3 {
    width: 25%;
  }
  .emotion--container.emotion--column-12 .start-col-m-3 {
    left: 16.66666667%;
  }
  .emotion--container.emotion--column-12 .col-m-4 {
    width: 33.33333333%;
  }
  .emotion--container.emotion--column-12 .start-col-m-4 {
    left: 25%;
  }
  .emotion--container.emotion--column-12 .col-m-5 {
    width: 41.66666667%;
  }
  .emotion--container.emotion--column-12 .start-col-m-5 {
    left: 33.33333333%;
  }
  .emotion--container.emotion--column-12 .col-m-6 {
    width: 50%;
  }
  .emotion--container.emotion--column-12 .start-col-m-6 {
    left: 41.66666667%;
  }
  .emotion--container.emotion--column-12 .col-m-7 {
    width: 58.33333333%;
  }
  .emotion--container.emotion--column-12 .start-col-m-7 {
    left: 50%;
  }
  .emotion--container.emotion--column-12 .col-m-8 {
    width: 66.66666667%;
  }
  .emotion--container.emotion--column-12 .start-col-m-8 {
    left: 58.33333333%;
  }
  .emotion--container.emotion--column-12 .col-m-9 {
    width: 75%;
  }
  .emotion--container.emotion--column-12 .start-col-m-9 {
    left: 66.66666667%;
  }
  .emotion--container.emotion--column-12 .col-m-10 {
    width: 83.33333333%;
  }
  .emotion--container.emotion--column-12 .start-col-m-10 {
    left: 75%;
  }
  .emotion--container.emotion--column-12 .col-m-11 {
    width: 91.66666667%;
  }
  .emotion--container.emotion--column-12 .start-col-m-11 {
    left: 83.33333333%;
  }
  .emotion--container.emotion--column-12 .col-m-12 {
    width: 100%;
  }
  .emotion--container.emotion--column-12 .start-col-m-12 {
    left: 91.66666667%;
  }
}
@media screen and (min-width: 64em) {
  .emotion--container.emotion--column-12 .col-l-1 {
    width: 8.33333333%;
  }
  .emotion--container.emotion--column-12 .start-col-l-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-12 .col-l-2 {
    width: 16.66666667%;
  }
  .emotion--container.emotion--column-12 .start-col-l-2 {
    left: 8.33333333%;
  }
  .emotion--container.emotion--column-12 .col-l-3 {
    width: 25%;
  }
  .emotion--container.emotion--column-12 .start-col-l-3 {
    left: 16.66666667%;
  }
  .emotion--container.emotion--column-12 .col-l-4 {
    width: 33.33333333%;
  }
  .emotion--container.emotion--column-12 .start-col-l-4 {
    left: 25%;
  }
  .emotion--container.emotion--column-12 .col-l-5 {
    width: 41.66666667%;
  }
  .emotion--container.emotion--column-12 .start-col-l-5 {
    left: 33.33333333%;
  }
  .emotion--container.emotion--column-12 .col-l-6 {
    width: 50%;
  }
  .emotion--container.emotion--column-12 .start-col-l-6 {
    left: 41.66666667%;
  }
  .emotion--container.emotion--column-12 .col-l-7 {
    width: 58.33333333%;
  }
  .emotion--container.emotion--column-12 .start-col-l-7 {
    left: 50%;
  }
  .emotion--container.emotion--column-12 .col-l-8 {
    width: 66.66666667%;
  }
  .emotion--container.emotion--column-12 .start-col-l-8 {
    left: 58.33333333%;
  }
  .emotion--container.emotion--column-12 .col-l-9 {
    width: 75%;
  }
  .emotion--container.emotion--column-12 .start-col-l-9 {
    left: 66.66666667%;
  }
  .emotion--container.emotion--column-12 .col-l-10 {
    width: 83.33333333%;
  }
  .emotion--container.emotion--column-12 .start-col-l-10 {
    left: 75%;
  }
  .emotion--container.emotion--column-12 .col-l-11 {
    width: 91.66666667%;
  }
  .emotion--container.emotion--column-12 .start-col-l-11 {
    left: 83.33333333%;
  }
  .emotion--container.emotion--column-12 .col-l-12 {
    width: 100%;
  }
  .emotion--container.emotion--column-12 .start-col-l-12 {
    left: 91.66666667%;
  }
}
@media screen and (min-width: 78.75em) {
  .emotion--container.emotion--column-12 .col-xl-1 {
    width: 8.33333333%;
  }
  .emotion--container.emotion--column-12 .start-col-xl-1 {
    left: 0%;
  }
  .emotion--container.emotion--column-12 .col-xl-2 {
    width: 16.66666667%;
  }
  .emotion--container.emotion--column-12 .start-col-xl-2 {
    left: 8.33333333%;
  }
  .emotion--container.emotion--column-12 .col-xl-3 {
    width: 25%;
  }
  .emotion--container.emotion--column-12 .start-col-xl-3 {
    left: 16.66666667%;
  }
  .emotion--container.emotion--column-12 .col-xl-4 {
    width: 33.33333333%;
  }
  .emotion--container.emotion--column-12 .start-col-xl-4 {
    left: 25%;
  }
  .emotion--container.emotion--column-12 .col-xl-5 {
    width: 41.66666667%;
  }
  .emotion--container.emotion--column-12 .start-col-xl-5 {
    left: 33.33333333%;
  }
  .emotion--container.emotion--column-12 .col-xl-6 {
    width: 50%;
  }
  .emotion--container.emotion--column-12 .start-col-xl-6 {
    left: 41.66666667%;
  }
  .emotion--container.emotion--column-12 .col-xl-7 {
    width: 58.33333333%;
  }
  .emotion--container.emotion--column-12 .start-col-xl-7 {
    left: 50%;
  }
  .emotion--container.emotion--column-12 .col-xl-8 {
    width: 66.66666667%;
  }
  .emotion--container.emotion--column-12 .start-col-xl-8 {
    left: 58.33333333%;
  }
  .emotion--container.emotion--column-12 .col-xl-9 {
    width: 75%;
  }
  .emotion--container.emotion--column-12 .start-col-xl-9 {
    left: 66.66666667%;
  }
  .emotion--container.emotion--column-12 .col-xl-10 {
    width: 83.33333333%;
  }
  .emotion--container.emotion--column-12 .start-col-xl-10 {
    left: 75%;
  }
  .emotion--container.emotion--column-12 .col-xl-11 {
    width: 91.66666667%;
  }
  .emotion--container.emotion--column-12 .start-col-xl-11 {
    left: 83.33333333%;
  }
  .emotion--container.emotion--column-12 .col-xl-12 {
    width: 100%;
  }
  .emotion--container.emotion--column-12 .start-col-xl-12 {
    left: 91.66666667%;
  }
}
.emotion--container .is--hidden-s,
.emotion--container .is--hidden-m,
.emotion--container .is--hidden-l,
.emotion--container .is--hidden-xl {
  display: block;
}
.emotion--container .is--hidden-xs {
  display: none;
}
.emotion--container .emotion--sizer-s,
.emotion--container .emotion--sizer-m,
.emotion--container .emotion--sizer-l,
.emotion--container .emotion--sizer-xl {
  display: none;
}
.emotion--container .emotion--sizer-xs {
  display: block;
}
.emotion--container .emotion--sizer-xs ~ .emotion--sizer {
  display: none;
}
@media screen and (min-width: 30em) {
  .emotion--container .is--hidden-xs,
  .emotion--container .is--hidden-m,
  .emotion--container .is--hidden-l,
  .emotion--container .is--hidden-xl {
    display: block;
  }
  .emotion--container .is--hidden-s {
    display: none;
  }
  .emotion--container .emotion--sizer-xs,
  .emotion--container .emotion--sizer-m,
  .emotion--container .emotion--sizer-l,
  .emotion--container .emotion--sizer-xl {
    display: none;
  }
  .emotion--container .emotion--sizer-s {
    display: block;
  }
  .emotion--container .emotion--sizer-s ~ .emotion--sizer {
    display: none;
  }
}
@media screen and (min-width: 48em) {
  .emotion--container .is--hidden-xs,
  .emotion--container .is--hidden-s,
  .emotion--container .is--hidden-l,
  .emotion--container .is--hidden-xl {
    display: block;
  }
  .emotion--container .is--hidden-m {
    display: none;
  }
  .emotion--container .emotion--sizer-s,
  .emotion--container .emotion--sizer-xs,
  .emotion--container .emotion--sizer-l,
  .emotion--container .emotion--sizer-xl {
    display: none;
  }
  .emotion--container .emotion--sizer-m {
    display: block;
  }
  .emotion--container .emotion--sizer-m ~ .emotion--sizer {
    display: none;
  }
}
@media screen and (min-width: 64em) {
  .emotion--container .is--hidden-xs,
  .emotion--container .is--hidden-s,
  .emotion--container .is--hidden-m,
  .emotion--container .is--hidden-xl {
    display: block;
  }
  .emotion--container .is--hidden-l {
    display: none;
  }
  .emotion--container .emotion--sizer-xs,
  .emotion--container .emotion--sizer-s,
  .emotion--container .emotion--sizer-m,
  .emotion--container .emotion--sizer-xl {
    display: none;
  }
  .emotion--container .emotion--sizer-l {
    display: block;
  }
  .emotion--container .emotion--sizer-l ~ .emotion--sizer {
    display: none;
  }
}
@media screen and (min-width: 78.75em) {
  .emotion--container .is--hidden-xs,
  .emotion--container .is--hidden-s,
  .emotion--container .is--hidden-m,
  .emotion--container .is--hidden-l {
    display: block;
  }
  .emotion--container .is--hidden-xl {
    display: none;
  }
  .emotion--container .emotion--sizer-s,
  .emotion--container .emotion--sizer-xs,
  .emotion--container .emotion--sizer-m,
  .emotion--container .emotion--sizer-l {
    display: none;
  }
  .emotion--container .emotion--sizer-xl {
    display: block;
  }
  .emotion--container .emotion--sizer-xl ~ .emotion--sizer {
    display: none;
  }
}
.emotion--element {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.emotion--container.emotion--mode-rows .emotion--element {
  position: relative;
  top: 0;
  left: 0;
  float: left;
  vertical-align: top;
}
.emotion--banner {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.emotion--banner .banner--content {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
}
.emotion--banner .banner--content.left.top {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  left: 0;
  top: 0;
}
.emotion--banner .banner--content.left.center {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  left: 0;
  top: 50%;
}
.emotion--banner .banner--content.left.bottom {
  -webkit-transform: translate(0, -100%);
  transform: translate(0, -100%);
  left: 0;
  top: 100%;
}
.emotion--banner .banner--content.center.top {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  left: 50%;
  top: 0;
}
.emotion--banner .banner--content.center.bottom {
  -webkit-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
  left: 50%;
  top: 100%;
}
.emotion--banner .banner--content.right.top {
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
  left: 100%;
  top: 0;
}
.emotion--banner .banner--content.right.center {
  -webkit-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
  left: 100%;
  top: 50%;
}
.emotion--banner .banner--content.right.bottom {
  -webkit-transform: translate(-100%, -100%);
  transform: translate(-100%, -100%);
  left: 100%;
  top: 100%;
}
.emotion--mode-rows .emotion--banner {
  height: auto;
}
.emotion--mode-rows .emotion--banner .banner--content,
.emotion--mode-rows .emotion--banner .banner--content.left.top,
.emotion--mode-rows .emotion--banner .banner--content.left.center,
.emotion--mode-rows .emotion--banner .banner--content.left.bottom,
.emotion--mode-rows .emotion--banner .banner--content.center.top,
.emotion--mode-rows .emotion--banner .banner--content.center.bottom,
.emotion--mode-rows .emotion--banner .banner--content.right.top,
.emotion--mode-rows .emotion--banner .banner--content.right.center,
.emotion--mode-rows .emotion--banner .banner--content.right.bottom {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  position: relative;
  left: 0;
  top: 0;
  float: none;
}
.emotion--mode-rows .emotion--banner .banner--image-src {
  max-height: none;
  width: 100%;
}
.emotion--banner .banner--image {
  width: 100%;
}
.emotion--banner .banner--link {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 110;
}
.emotion--banner .banner--mapping {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.emotion--banner .banner--mapping-link {
  position: absolute;
  display: block;
  z-index: 110;
  background: rgba(0, 0, 0, 0);
}
.emotion--banner-slider {
  width: 100%;
  height: 100%;
}
.emotion--mode-rows .emotion--banner-slider {
  height: auto;
}
.emotion--mode-rows .emotion--banner-slider .banner-slider--container,
.emotion--mode-rows .emotion--banner-slider .banner-slider--slide {
  height: auto;
}
.emotion--mode-rows .emotion--banner-slider .banner-slider--item {
  vertical-align: middle;
}
.emotion--mode-rows .emotion--banner-slider .banner-slider--banner {
  -webkit-transform: none;
  transform: none;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
}
.emotion--banner-slider .banner-slider--title {
  padding: 0.625rem 1.25rem 0.625rem 1.25rem;
  display: block;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  color: #fff;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
}
.emotion--banner-slider .banner-slider--container,
.emotion--banner-slider .banner-slider--slide {
  width: 100%;
  height: 100%;
}
.emotion--banner-slider .banner-slider--container .arrow {
  display: block;
}
.emotion--banner-slider .banner-slider--item {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.emotion--banner-slider .banner-slider--banner {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 100;
}
.emotion--banner-slider .banner-slider--image {
  width: 100%;
}
.emotion--banner-slider .banner-slider--link {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
}
.emotion--banner-slider .image-slider--dots {
  display: none;
}
.emotion--product-slider {
  width: 100%;
  height: 100%;
  position: relative;
}
.emotion--mode-rows .emotion--product-slider {
  height: 22.5rem;
}
.emotion--product-slider .product-slider--title {
  height: 3.4375rem;
  position: relative;
  top: 0;
  left: 0;
  z-index: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.emotion--product-slider .product-slider--content {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 400;
}
.emotion--product-slider .product-slider--title ~ .product-slider--content {
  padding-top: 4.0625rem;
}
.emotion--product-slider .product-slider--arrow.arrow--next {
  border-right: 0 none;
}
.emotion--product-slider .product-slider--arrow.arrow--prev {
  border-left: 0 none;
}
.emotion--product-slider .box--emotion {
  width: 100%;
  height: 100%;
  padding: 0;
  text-align: center;
}
.emotion--product-slider .box--emotion .box--content {
  padding: 0;
  border: 0 none;
}
.emotion--product-slider .box--emotion .product--info {
  height: 100%;
  position: relative;
  overflow: hidden;
}
.emotion--product-slider .box--emotion .product--image {
  height: 60%;
  margin: 0 auto;
}
.emotion--product-slider .box--emotion .product--details {
  max-height: 35%;
  width: 100%;
  margin-top: 5%;
}
.emotion--product-slider .box--emotion .product--title {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: normal;
}
.emotion--product-slider .box--emotion .product--price-info .price--unit {
  height: 0.9375rem;
  font-size: 0.625rem;
}
.emotion--product-slider .box--emotion .product--price .price--default {
  font-size: 0.875rem;
}
.emotion--product {
  width: 100%;
  height: 100%;
}
.emotion--mode-rows .emotion--product {
  height: 22.5rem;
}
.emotion--product.is--no-border .box--content {
  border: 0 none;
}
.emotion--product .product--box {
  width: 100%;
  height: 100%;
  padding: 0;
  float: none;
}
.emotion--product .product--box .box--content {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
}
.emotion--product .product--box .product--info {
  height: 100%;
  position: relative;
  overflow: hidden;
}
.emotion--product .product--box .product--image {
  height: 70%;
  margin: 0 auto;
}
.emotion--product .product--box .product--image.is--large {
  height: 100%;
}
.emotion--product .product--box .product--details {
  max-height: 30%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
.emotion--product .product--box .product--title {
  text-overflow: ellipsis;
}
.emotion--category-teaser {
  width: 100%;
  height: 100%;
}
.emotion--mode-rows .emotion--category-teaser {
  height: 22.5rem;
}
.emotion--category-teaser .category-teaser--link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: transparent;
}
.emotion--category-teaser .category-teaser--title {
  padding: 0.625rem 1.25rem 0.625rem 1.25rem;
  display: block;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.emotion--manufacturer {
  width: 100%;
  height: 100%;
  position: relative;
}
.emotion--mode-rows .emotion--manufacturer {
  height: 16.25rem;
}
.emotion--manufacturer .manufacturer--title {
  height: 3.4375rem;
  position: relative;
  top: 0;
  left: 0;
  z-index: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.emotion--manufacturer .manufacturer--content {
  padding: 0.625rem 1.25rem 0.625rem 1.25rem;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 400;
}
.emotion--manufacturer .manufacturer--title ~ .manufacturer--content {
  padding-top: 4.0625rem;
}
.emotion--manufacturer .manufacturer--slider {
  height: 100%;
}
.emotion--manufacturer .manufacturer--slider .arrow--next {
  right: -1.25rem;
  border-right: 0 none;
}
.emotion--manufacturer .manufacturer--slider .arrow--prev {
  left: -1.25rem;
  border-left: 0 none;
}
.emotion--manufacturer .manufacturer--item {
  padding: 0.625rem 0.9375rem 0.625rem 0.9375rem;
  text-align: center;
  vertical-align: middle;
}
.emotion--manufacturer .manufacturer--link {
  font-size: 1.125rem;
  display: block;
  width: 100%;
  height: 100%;
  color: #ffffff;
  font-weight: 700;
  position: relative;
}
.emotion--manufacturer .manufacturer--link:hover {
  color: #ffffff;
}
.emotion--manufacturer .manufacturer--image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.emotion--youtube {
  width: 100%;
  height: 100%;
}
.emotion--mode-rows .emotion--youtube {
  height: 22.5rem;
}
.emotion--video {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.emotion--mode-rows .emotion--video {
  height: auto;
}
.emotion--mode-rows .emotion--video .video--element {
  height: auto;
  position: relative;
}
.emotion--video video::-moz-media-controls,
.emotion--video video::-webkit-media-controls {
  bottom: 15%;
}
.emotion--video .video--element {
  width: 100%;
  height: 100%;
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
}
.emotion--video .video--cover {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1300;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #000;
  text-align: center;
}
.emotion--video .video--cover .video--play-icon {
  width: 6.25rem;
  height: 6.25rem;
  font-size: 6.25rem;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  color: #fff;
}
.emotion--video .video--play-btn {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  top: 1.5625rem;
  right: 1.5625rem;
  line-height: 2.5rem;
  font-size: 1.3125rem;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 100%;
  background-clip: padding-box;
  position: absolute;
  cursor: pointer;
  color: #fff;
  border: 2px solid #fff;
  text-align: center;
  z-index: 1200;
}
.emotion--video .video--text {
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1100;
  color: #fff;
  text-align: center;
}
.emotion--video .video--text.no--events {
  pointer-events: none;
}
.emotion--iframe {
  width: 100%;
  height: 100%;
}
.emotion--mode-rows .emotion--iframe {
  height: 22.5rem;
}
.emotion--blog {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.emotion--mode-rows .emotion--blog {
  height: auto;
}
.emotion--mode-rows .emotion--blog .blog--image {
  height: 10rem;
}
.emotion--blog .blog--container {
  height: 100%;
  margin: 0 0 0 -1%;
}
.emotion--blog .blog--entry {
  height: 100%;
  padding-left: 1%;
}
.emotion--blog .blog--image {
  height: 40%;
  width: 100%;
  display: block;
  background-position: center center;
  background-size: cover;
  margin-bottom: 2%;
}
.emotion--blog .blog--title {
  font-size: 0.875rem;
  display: block;
  font-weight: 700;
  color: #000000;
  margin-bottom: 2%;
}
.emotion--blog .blog--title:hover {
  color: #ffffff;
}
.emotion--blog .blog--description {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #ffffff;
  height: auto;
  max-height: 60%;
}
.emotion--youtube--gdpr {
  text-align: center;
  min-width: 100%;
  min-height: 100%;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.emotion--youtube--gdpr .emotion--youtube--gdpr--inner {
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 0 none;
}
.emotion--html {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: auto;
}
.emotion--mode-rows .emotion--html {
  height: auto;
}
.emotion--html .html--content :last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 48em) {
  .emotion--blog {
    overflow: hidden;
  }
}
@media screen and (min-width: 78.75em) {
  .emotion--banner-slider .image-slider--dots {
    bottom: 0.625rem;
    top: auto;
    left: 0;
    display: block;
    position: absolute;
    width: 100%;
    text-align: center;
    padding: 0;
  }
  .emotion--banner-slider .image-slider--dots .dot--link {
    border-radius: 100%;
    margin: 0rem 0.125rem 0rem 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background: #648119;
    display: inline-block;
    border: 5px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    text-indent: -99999em;
    background-clip: padding-box;
  }
  .emotion--banner-slider .image-slider--dots .dot--link.is--active {
    background: #48a2e7;
    background-clip: padding-box;
  }
}
/*
Input Types
==========================================
Defines the basic styling of the Shopware input element types.

It contains the different states of the input fields.
```
<div>
    <input type="text" placeholder="Text Input">
</div>

<div>
    <input type="password" placeholder="Password Input">
</div>

<div class="textarea">
    <textarea placeholder="Textarea"></textarea>
</div>
```
*/
textarea,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
#paypal-acdc-form .field {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 3px;
  background-clip: padding-box;
  box-sizing: border-box;
  line-height: 1.1875rem;
  font-size: 0.875rem;
  width: 18.125rem;
  padding: 0.625rem 0.625rem 0.5625rem 0.625rem;
  box-shadow: inset 0 1px 1px #e1e1e1;
  background: #fbfbfb;
  border: 1px solid #96c126;
  border-top-color: #85ac22;
  color: #ffffff;
  text-align: left;
}
textarea:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus {
  box-shadow: 0 0 0 transparent;
  outline: none;
  border-color: #48a2e7;
  background: #ffffff;
  color: #96c126;
}
textarea.has--error,
input[type="text"].has--error,
input[type="search"].has--error,
input[type="password"].has--error,
input[type="number"].has--error,
input[type="email"].has--error,
input[type="tel"].has--error,
#paypal-acdc-form .field.has--error {
  color: #e74c3c;
  background: #faeceb;
  border-color: #e74c3c;
}
textarea.input--field,
input[type="text"].input--field,
input[type="search"].input--field,
input[type="password"].input--field,
input[type="number"].input--field,
input[type="email"].input--field,
input[type="tel"].input--field {
  margin-bottom: 0.625rem;
  width: 100%;
}
textarea.input--field.input--field-zipcode,
input[type="text"].input--field.input--field-zipcode,
input[type="search"].input--field.input--field-zipcode,
input[type="password"].input--field.input--field-zipcode,
input[type="number"].input--field.input--field-zipcode,
input[type="email"].input--field.input--field-zipcode,
input[type="tel"].input--field.input--field-zipcode {
  width: 30%;
  float: left;
}
textarea.input--field.input--field-city,
input[type="text"].input--field.input--field-city,
input[type="search"].input--field.input--field-city,
input[type="password"].input--field.input--field-city,
input[type="number"].input--field.input--field-city,
input[type="email"].input--field.input--field-city,
input[type="tel"].input--field.input--field-city {
  width: 68%;
  float: left;
}
textarea.input--field.input--spacer,
input[type="text"].input--field.input--spacer,
input[type="search"].input--field.input--spacer,
input[type="password"].input--field.input--spacer,
input[type="number"].input--field.input--spacer,
input[type="email"].input--field.input--spacer,
input[type="tel"].input--field.input--spacer {
  margin-right: 2%;
}
textarea.is--small,
input[type="text"].is--small,
input[type="search"].is--small,
input[type="password"].is--small,
input[type="number"].is--small,
input[type="email"].is--small,
input[type="tel"].is--small {
  height: 2.125rem;
}
textarea.is--medium,
input[type="text"].is--medium,
input[type="search"].is--medium,
input[type="password"].is--medium,
input[type="number"].is--medium,
input[type="email"].is--medium,
input[type="tel"].is--medium {
  height: 2.375rem;
}
textarea.is--large,
input[type="text"].is--large,
input[type="search"].is--large,
input[type="password"].is--large,
input[type="number"].is--large,
input[type="email"].is--large,
input[type="tel"].is--large {
  height: 2.625rem;
}
textarea {
  resize: vertical;
}
label {
  font-size: 0.875rem;
  color: #ffffff;
}
label.has--error {
  color: #e74c3c;
  background: #faeceb;
}
/*
Selectfield
==========================================
Creates a styled combobox selection for the basic select element.

```
<div class="select-field">
    <select>
        <option selected="selected" disabled="disabled" value="">Disabled Option</option>
        <option>Option 1</option>
        <option>Option 2</option>
    </select>
</div>
```
*/
.select-field,
.js--fancy-select {
  max-width: 18.125rem;
  height: 2.625rem;
  width: 100%;
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.select-field:hover,
.js--fancy-select:hover {
  color: #48a2e7;
}
.select-field select,
.js--fancy-select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0rem 2.5rem 0rem 0.625rem;
  line-height: 2.5rem;
  border-radius: 3px;
  background-clip: padding-box;
  background-color: #ffffff;
  background-image: linear-gradient(to bottom, #ffffff 0%, #fbfbfb 100%);
  height: 100%;
  width: 100%;
  display: block;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  border: 1px solid #96c126;
}
.select-field select option,
.js--fancy-select select option {
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
  color: #000000;
  background: #fff;
}
.select-field select::-ms-expand,
.js--fancy-select select::-ms-expand {
  display: none;
}
.select-field select:hover,
.js--fancy-select select:hover {
  color: #48a2e7;
  border-color: #48a2e7;
  background: #fff;
}
.select-field select:focus,
.js--fancy-select select:focus {
  outline: none;
  color: #48a2e7;
  border-color: #48a2e7;
}
.select-field select:focus::-ms-value,
.js--fancy-select select:focus::-ms-value {
  color: #48a2e7;
  background: none;
}
.select-field select:disabled,
.js--fancy-select select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.select-field select.has--error,
.js--fancy-select select.has--error {
  color: #e74c3c;
  border-color: #e74c3c;
  background: #faeceb;
}
.select-field:after,
.js--fancy-select:after {
  width: 1.875rem;
  height: 2.5rem;
  top: 0.0625rem;
  -webkit-user-select: none;
  user-select: none;
  line-height: 40px;
  max-height: 100%;
  display: block;
  content: "\e612";
  position: absolute;
  right: 0;
  font-size: 5px;
  border-left: 1px solid #96c126;
  text-align: center;
  font-family: 'shopware';
  pointer-events: none;
}
.select-field:after:hover,
.js--fancy-select:after:hover {
  color: #48a2e7;
}
.select-field.is--disabled select,
.js--fancy-select.is--disabled select,
.select-field.is--disabled:after,
.js--fancy-select.is--disabled:after {
  opacity: 0.5;
  cursor: not-allowed;
}
.select-field.has--error select,
.js--fancy-select.has--error select {
  color: #e74c3c;
  border-color: #e74c3c;
  background: #faeceb;
}
.select-field.has--error:after,
.js--fancy-select.has--error:after {
  color: #e74c3c;
  border-color: #e74c3c;
}
@media screen and (min-width: 48em) {
  /* Standard input fields. */
  .input--field {
    margin-bottom: 0.9375rem;
  }
  .input--field .input--field-zipcode {
    margin-right: 2%;
    width: 20%;
  }
  .input--field .input--field-city {
    width: 78%;
  }
}
@media screen and (min-width: 78.75em) {
  .input--field {
    margin-bottom: 0.9375rem;
  }
}
/*
Icon set
============================================
######Shopware Icon set elements

Accessable with the `i` element and the `icon--` class.

Example: `<i class="icon--cart"></i>`

```
<table style="width: 80%;margin: 20px auto;text-align: center;">
    <tbody>
        <tr>
            <td><i class="icon--percent2"></i><br/>
                icon--percent2
            </td>

            <td><i class="icon--percent"></i><br/>
                icon--percent
            </td>

            <td><i class="icon--coupon"></i><br/>
                icon--coupon
            </td>

            <td><i class="icon--truck"></i><br/>
                icon--truck
            </td>

            <td><i class="icon--logout"></i><br/>
                icon--logout
            </td>

            <td><i class="icon--grid"></i><br/>
                icon--grid
            </td>

            <td><i class="icon--filter"></i><br/>
                icon--filter
            </td>

        </tr>
        <tr>
            <td><i class="icon--clock"></i><br/>
                icon--clock
            </td>

            <td><i class="icon--arrow-up"></i><br/>
                icon--arrow-up
            </td>

            <td><i class="icon--arrow-right"></i><br/>
                icon--arrow-right
            </td>

            <td><i class="icon--arrow-left"></i><br/>
                icon--arrow-left
            </td>

            <td><i class="icon--arrow-down"></i><br/>
                icon--arrow-down
            </td>

            <td><i class="icon--star"></i><br/>
                icon--star
            </td>

            <td><i class="icon--star-half"></i><br/>
                icon--star-half
            </td>
        </tr>

        <tr>
            <td><i class="icon--star-empty"></i><br/>
                icon--star-empty
            </td>

            <td><i class="icon--shopware"></i><br/>
                icon--shopware
            </td>

            <td><i class="icon--service"></i><br/>
                icon--service
            </td>

            <td><i class="icon--search"></i><br/>
                icon--search
            </td>

            <td><i class="icon--numbered-list"></i><br/>
                icon--numbered-list
            </td>

            <td><i class="icon--menu"></i><br/>
                icon--menu
            </td>

            <td><i class="icon--mail"></i><br/>
                icon--mail
            </td>
        </tr>

        <tr>
            <td><i class="icon--list"></i><br/>
                icon--list
            </td>

            <td><i class="icon--layout"></i><br/>
                icon--layout
            </td>

            <td><i class="icon--heart"></i><br/>
                icon--heart
            </td>

            <td><i class="icon--cross"></i><br/>
                icon--cross
            </td>

            <td><i class="icon--compare"></i><br/>
                icon--compare
            </td>

            <td><i class="icon--check"></i><br/>
                icon--check
            </td>

            <td><i class="icon--basket"></i><br/>
                icon--basket
            </td>
        </tr>

        <tr>
            <td><i class="icon--account"></i><br/>
                icon--account
            </td>

            <td><i class="icon--chain"></i><br/>
                icon--chain
            </td>

            <td><i class="icon--delicious"></i><br/>
                icon--delicious
            </td>

            <td><i class="icon--delicious2"></i><br/>
                icon--delicious2
            </td>

            <td><i class="icon--digg"></i><br/>
                icon--digg
            </td>

            <td><i class="icon--phone"></i><br/>
                icon--phone
            </td>

            <td><i class="icon--mobile"></i><br/>
                icon--mobile
            </td>
        </tr>

        <tr>
            <td><i class="icon--mouse"></i><br/>
                icon--mouse
            </td>

            <td><i class="icon--directions"></i><br/>
                icon--directions
            </td>

            <td><i class="icon--paperplane"></i><br/>
                icon--paperplane
            </td>

            <td><i class="icon--pencil"></i><br/>
                icon--pencil
            </td>

            <td><i class="icon--feather"></i><br/>
                icon--feather
            </td>

            <td><i class="icon--paperclip"></i><br/>
                icon--paperclip
            </td>

            <td><i class="icon--drawer"></i><br/>
                icon--drawer
            </td>
        </tr>

        <tr>
            <td><i class="icon--reply"></i><br/>
                icon--reply
            </td>

            <td><i class="icon--reply-all"></i><br/>
                icon--reply-all
            </td>

            <td><i class="icon--forward"></i><br/>
                icon--forward
            </td>

            <td><i class="icon--users"></i><br/>
                icon--users
            </td>

            <td><i class="icon--user-add"></i><br/>
                icon--user-add
            </td>

            <td><i class="icon--vcard"></i><br/>
                icon--vcard
            </td>

            <td><i class="icon--export"></i><br/>
                icon--export
            </td>
        </tr>

        <tr>
            <td><i class="icon--location"></i><br/>
                icon--location
            </td>

            <td><i class="icon--map"></i><br/>
                icon--map
            </td>

            <td><i class="icon--compass"></i><br/>
                icon--compass
            </td>

            <td><i class="icon--location2"></i><br/>
                icon--location2
            </td>

            <td><i class="icon--target"></i><br/>
                icon--target
            </td>

            <td><i class="icon--share"></i><br/>
                icon--share
            </td>

            <td><i class="icon--sharable"></i><br/>
                icon--sharable
            </td>
        </tr>

        <tr>
            <td><i class="icon--thumbsup"></i><br/>
                icon--thumbsup
            </td>

            <td><i class="icon--thumbsdown"></i><br/>
                icon--thumbsdown
            </td>

            <td><i class="icon--chat"></i><br/>
                icon--chat
            </td>

            <td><i class="icon--comment"></i><br/>
                icon--comment
            </td>

            <td><i class="icon--quote"></i><br/>
                icon--quote
            </td>

            <td><i class="icon--house"></i><br/>
                icon--house
            </td>

            <td><i class="icon--popup"></i><br/>
                icon--popup
            </td>
        </tr>

        <tr>
            <td><i class="icon--flashlight"></i><br/>
                icon--flashlight
            </td>

            <td><i class="icon--printer"></i><br/>
                icon--printer
            </td>

            <td><i class="icon--bell"></i><br/>
                icon--bell
            </td>

            <td><i class="icon--link"></i><br/>
                icon--link
            </td>

            <td><i class="icon--cog"></i><br/>
                icon--cog
            </td>

            <td><i class="icon--tools"></i><br/>
                icon--tools
            </td>

            <td><i class="icon--trophy"></i><br/>
                icon--trophy
            </td>
        </tr>

        <tr>
            <td><i class="icon--tag"></i><br/>
                icon--tag
            </td>

            <td><i class="icon--camera"></i><br/>
                icon--camera
            </td>

            <td><i class="icon--megaphone"></i><br/>
                icon--megaphone
            </td>

            <td><i class="icon--moon"></i><br/>
                icon--moon
            </td>

            <td><i class="icon--palette"></i><br/>
                icon--palette
            </td>

            <td><i class="icon--leaf"></i><br/>
                icon--leaf
            </td>

            <td><i class="icon--music"></i><br/>
                icon--music
            </td>
        </tr>

        <tr>
            <td><i class="icon--music2"></i><br/>
                icon--music2
            </td>

            <td><i class="icon--new"></i><br/>
                icon--new
            </td>

            <td><i class="icon--graduation"></i><br/>
                icon--graduation
            </td>

            <td><i class="icon--book"></i><br/>
                icon--book
            </td>

            <td><i class="icon--newspaper"></i><br/>
                icon--newspaper
            </td>

            <td><i class="icon--bag"></i><br/>
                icon--bag
            </td>

            <td><i class="icon--airplane"></i><br/>
                icon--airplane
            </td>
        </tr>

        <tr>
            <td><i class="icon--lifebuoy"></i><br/>
                icon--lifebuoy
            </td>

            <td><i class="icon--eye"></i><br/>
                icon--eye
            </td>

            <td><i class="icon--clock2"></i><br/>
                icon--clock2
            </td>

            <td><i class="icon--microphone"></i><br/>
                icon--microphone
            </td>

            <td><i class="icon--calendar"></i><br/>
                icon--calendar
            </td>

            <td><i class="icon--bolt"></i><br/>
                icon--bolt
            </td>

            <td><i class="icon--thunder"></i><br/>
                icon--thunder
            </td>
        </tr>

        <tr>
            <td><i class="icon--droplet"></i><br/>
                icon--droplet
            </td>

            <td><i class="icon--cd"></i><br/>
                icon--cd
            </td>

            <td><i class="icon--briefcase"></i><br/>
                icon--briefcase
            </td>

            <td><i class="icon--air"></i><br/>
                icon--air
            </td>

            <td><i class="icon--hourglass"></i><br/>
                icon--hourglass
            </td>

            <td><i class="icon--gauge"></i><br/>
                icon--gauge
            </td>

            <td><i class="icon--language"></i><br/>
                icon--language
            </td>
        </tr>

        <tr>
            <td><i class="icon--network"></i><br/>
                icon--network
            </td>

            <td><i class="icon--key"></i><br/>
                icon--key
            </td>

            <td><i class="icon--battery"></i><br/>
                icon--battery
            </td>

            <td><i class="icon--bucket"></i><br/>
                icon--bucket
            </td>

            <td><i class="icon--magnet"></i><br/>
                icon--magnet
            </td>

            <td><i class="icon--drive"></i><br/>
                icon--drive
            </td>

            <td><i class="icon--cup"></i><br/>
                icon--cup
            </td>
        </tr>

        <tr>
            <td><i class="icon--rocket"></i><br/>
                icon--rocket
            </td>

            <td><i class="icon--brush"></i><br/>
                icon--brush
            </td>

            <td><i class="icon--suitcase"></i><br/>
                icon--suitcase
            </td>

            <td><i class="icon--cone"></i><br/>
                icon--cone
            </td>

            <td><i class="icon--earth"></i><br/>
                icon--earth
            </td>

            <td><i class="icon--keyboard"></i><br/>
                icon--keyboard
            </td>

            <td><i class="icon--browser"></i><br/>
                icon--browser
            </td>
        </tr>

        <tr>
            <td><i class="icon--publish"></i><br/>
                icon--publish
            </td>

            <td><i class="icon--progress-3"></i><br/>
                icon--progress-3
            </td>

            <td><i class="icon--progress-2"></i><br/>
                icon--progress-2
            </td>

            <td><i class="icon--progress-1"></i><br/>
                icon--progress-1
            </td>

            <td><i class="icon--progress-0"></i><br/>
                icon--progress-0
            </td>

            <td><i class="icon--sun"></i><br/>
                icon--sun
            </td>

            <td><i class="icon--sun2"></i><br/>
                icon--sun2
            </td>
        </tr>

        <tr>
            <td><i class="icon--adjust"></i><br/>
                icon--adjust
            </td>

            <td><i class="icon--code"></i><br/>
                icon--code
            </td>

            <td><i class="icon--screen"></i><br/>
                icon--screen
            </td>

            <td><i class="icon--infinity"></i><br/>
                icon--infinity
            </td>

            <td><i class="icon--light-bulb"></i><br/>
                icon--light-bulb
            </td>

            <td><i class="icon--creditcard"></i><br/>
                icon--creditcard
            </td>

            <td><i class="icon--database"></i><br/>
                icon--database
            </td>
        </tr>

        <tr>
            <td><i class="icon--voicemail"></i><br/>
                icon--voicemail
            </td>

            <td><i class="icon--clipboard"></i><br/>
                icon--clipboard
            </td>

            <td><i class="icon--box"></i><br/>
                icon--box
            </td>

            <td><i class="icon--ticket"></i><br/>
                icon--ticket
            </td>

            <td><i class="icon--rss"></i><br/>
                icon--rss
            </td>

            <td><i class="icon--signal"></i><br/>
                icon--signal
            </td>

            <td><i class="icon--thermometer"></i><br/>
                icon--thermometer
            </td>
        </tr>

        <tr>
            <td><i class="icon--droplets"></i><br/>
                icon--droplets
            </td>

            <td><i class="icon--uniE680"></i><br/>
                icon--uniE680
            </td>

            <td><i class="icon--statistics"></i><br/>
                icon--statistics
            </td>

            <td><i class="icon--pie"></i><br/>
                icon--pie
            </td>

            <td><i class="icon--bars"></i><br/>
                icon--bars
            </td>

            <td><i class="icon--graph"></i><br/>
                icon--graph
            </td>

            <td><i class="icon--lock"></i><br/>
                icon--lock
            </td>
        </tr>

        <tr>
            <td><i class="icon--lock-open"></i><br/>
                icon--lock-open
            </td>

            <td><i class="icon--login"></i><br/>
                icon--login
            </td>

            <td><i class="icon--minus"></i><br/>
                icon--minus
            </td>

            <td><i class="icon--plus"></i><br/>
                icon--plus
            </td>

            <td><i class="icon--cross2"></i><br/>
                icon--cross2
            </td>

            <td><i class="icon--minus2"></i><br/>
                icon--minus2
            </td>

            <td><i class="icon--cross3"></i><br/>
                icon--cross3
            </td>
        </tr>

        <tr>
            <td><i class="icon--minus3"></i><br/>
                icon--minus3
            </td>

            <td><i class="icon--plus3"></i><br/>
                icon--plus3
            </td>

            <td><i class="icon--erase"></i><br/>
                icon--erase
            </td>

            <td><i class="icon--blocked"></i><br/>
                icon--blocked
            </td>

            <td><i class="icon--info"></i><br/>
                icon--info
            </td>

            <td><i class="icon--info2"></i><br/>
                icon--info2
            </td>

            <td><i class="icon--question"></i><br/>
                icon--question
            </td>
        </tr>

        <tr>
            <td><i class="icon--help"></i><br/>
                icon--help
            </td>

            <td><i class="icon--warning"></i><br/>
                icon--warning
            </td>

            <td><i class="icon--cycle"></i><br/>
                icon--cycle
            </td>

            <td><i class="icon--cw"></i><br/>
                icon--cw
            </td>

            <td><i class="icon--ccw"></i><br/>
                icon--ccw
            </td>

            <td><i class="icon--shuffle"></i><br/>
                icon--shuffle
            </td>

            <td><i class="icon--arrow"></i><br/>
                icon--arrow
            </td>
        </tr>

        <tr>
            <td><i class="icon--arrow2"></i><br/>
                icon--arrow2
            </td>

            <td><i class="icon--retweet"></i><br/>
                icon--retweet
            </td>

            <td><i class="icon--loop"></i><br/>
                icon--loop
            </td>

            <td><i class="icon--history"></i><br/>
                icon--history
            </td>

            <td><i class="icon--back"></i><br/>
                icon--back
            </td>

            <td><i class="icon--list2"></i><br/>
                icon--list2
            </td>

            <td><i class="icon--add-to-list"></i><br/>
                icon--add-to-list
            </td>
        </tr>

        <tr>
            <td><i class="icon--layout2"></i><br/>
                icon--layout2
            </td>

            <td><i class="icon--list3"></i><br/>
                icon--list3
            </td>

            <td><i class="icon--text"></i><br/>
                icon--text
            </td>

            <td><i class="icon--text2"></i><br/>
                icon--text2
            </td>

            <td><i class="icon--document"></i><br/>
                icon--document
            </td>

            <td><i class="icon--docs"></i><br/>
                icon--docs
            </td>

            <td><i class="icon--landscape"></i><br/>
                icon--landscape
            </td>
        </tr>

        <tr>
            <td><i class="icon--pictures"></i><br/>
                icon--pictures
            </td>

            <td><i class="icon--video"></i><br/>
                icon--video
            </td>

            <td><i class="icon--music3"></i><br/>
                icon--music3
            </td>

            <td><i class="icon--folder"></i><br/>
                icon--folder
            </td>

            <td><i class="icon--archive"></i><br/>
                icon--archive
            </td>

            <td><i class="icon--trash"></i><br/>
                icon--trash
            </td>

            <td><i class="icon--upload"></i><br/>
                icon--upload
            </td>
        </tr>

        <tr>
            <td><i class="icon--download"></i><br/>
                icon--download
            </td>

            <td><i class="icon--disk"></i><br/>
                icon--disk
            </td>

            <td><i class="icon--install"></i><br/>
                icon--install
            </td>

            <td><i class="icon--cloud"></i><br/>
                icon--cloud
            </td>

            <td><i class="icon--upload2"></i><br/>
                icon--upload2
            </td>

            <td><i class="icon--bookmark"></i><br/>
                icon--bookmark
            </td>

            <td><i class="icon--bookmarks"></i><br/>
                icon--bookmarks
            </td>
        </tr>

        <tr>
            <td><i class="icon--book2"></i><br/>
                icon--book2
            </td>

            <td><i class="icon--play"></i><br/>
                icon--play
            </td>

            <td><i class="icon--pause"></i><br/>
                icon--pause
            </td>

            <td><i class="icon--record"></i><br/>
                icon--record
            </td>

            <td><i class="icon--stop"></i><br/>
                icon--stop
            </td>

            <td><i class="icon--next"></i><br/>
                icon--next
            </td>

            <td><i class="icon--previous"></i><br/>
                icon--previous
            </td>
        </tr>

        <tr>
            <td><i class="icon--first"></i><br/>
                icon--first
            </td>

            <td><i class="icon--last"></i><br/>
                icon--last
            </td>

            <td><i class="icon--resize-enlarge"></i><br/>
                icon--resize-enlarge
            </td>

            <td><i class="icon--resize-shrink"></i><br/>
                icon--resize-shrink
            </td>

            <td><i class="icon--volume"></i><br/>
                icon--volume
            </td>

            <td><i class="icon--sound"></i><br/>
                icon--sound
            </td>

            <td><i class="icon--mute"></i><br/>
                icon--mute
            </td>
        </tr>


        <tr>
            <td><i class="icon--flow-cascade"></i><br/>
                icon--flow-cascade
            </td>

            <td><i class="icon--flow-branch"></i><br/>
                icon--flow-branch
            </td>

            <td><i class="icon--flow-tree"></i><br/>
                icon--flow-tree
            </td>

            <td><i class="icon--flow-line"></i><br/>
                icon--flow-line
            </td>

            <td><i class="icon--flow-parallel"></i><br/>
                icon--flow-parallel
            </td>

            <td><i class="icon--arrow-left2"></i><br/>
                icon--arrow-left2
            </td>

            <td><i class="icon--arrow-down2"></i><br/>
                icon--arrow-down2
            </td>
        </tr>

        <tr>
            <td><i class="icon--arrow-up-upload"></i><br/>
                icon--arrow-up-upload
            </td>

            <td><i class="icon--arrow-right2"></i><br/>
                icon--arrow-right2
            </td>

            <td><i class="icon--arrow-left3"></i><br/>
                icon--arrow-left3
            </td>

            <td><i class="icon--arrow-down3"></i><br/>
                icon--arrow-down3
            </td>

            <td><i class="icon--arrow-up2"></i><br/>
                icon--arrow-up2
            </td>

            <td><i class="icon--arrow-right3"></i><br/>
                icon--arrow-right3
            </td>

            <td><i class="icon--arrow-left4"></i><br/>
                icon--arrow-left4
            </td>
        </tr>

        <tr>
            <td><i class="icon--arrow-down4"></i><br/>
                icon--arrow-down4
            </td>

            <td><i class="icon--arrow-up3"></i><br/>
                icon--arrow-up3
            </td>

            <td><i class="icon--arrow-right4"></i><br/>
                icon--arrow-right4
            </td>

            <td><i class="icon--arrow-left5"></i><br/>
                icon--arrow-left5
            </td>

            <td><i class="icon--arrow-down5"></i><br/>
                icon--arrow-down5
            </td>

            <td><i class="icon--arrow-up4"></i><br/>
                icon--arrow-up4
            </td>

            <td><i class="icon--arrow-right5"></i><br/>
                icon--arrow-right5
            </td>
        </tr>

        <tr>
            <td><i class="icon--arrow-left6"></i><br/>
                icon--arrow-left6
            </td>

            <td><i class="icon--arrow-down6"></i><br/>
                icon--arrow-down6
            </td>

            <td><i class="icon--arrow-up5"></i><br/>
                icon--arrow-up5
            </td>

            <td><i class="icon--arrow-right6"></i><br/>
                icon--arrow-right6
            </td>

            <td><i class="icon--menu2"></i><br/>
                icon--menu2
            </td>

            <td><i class="icon--ellipsis"></i><br/>
                icon--ellipsis
            </td>

            <td><i class="icon--dots"></i><br/>
                icon--dots
            </td>
        </tr>

        <tr>
            <td><i class="icon--dot"></i><br/>
                icon--dot
            </td>

            <td><i class="icon--cc"></i><br/>
                icon--cc
            </td>

            <td><i class="icon--cc-by"></i><br/>
                icon--cc-by
            </td>

            <td><i class="icon--cc-nc"></i><br/>
                icon--cc-nc
            </td>

            <td><i class="icon--cc-sa"></i><br/>
                icon--cc-sa
            </td>

            <td><i class="icon--cc-nd"></i><br/>
                icon--cc-nd
            </td>

            <td><i class="icon--cc-pd"></i><br/>
                icon--cc-pd
            </td>
        </tr>

        <tr>
            <td><i class="icon--cc-zero"></i><br/>
                icon--cc-zero
            </td>

            <td><i class="icon--cc-share"></i><br/>
                icon--cc-share
            </td>

            <td><i class="icon--cc-share2"></i><br/>
                icon--cc-share2
            </td>

            <td><i class="icon--danielbruce"></i><br/>
                icon--danielbruce
            </td>

            <td><i class="icon--danielbruce2"></i><br/>
                icon--danielbruce2
            </td>

            <td><i class="icon--github"></i><br/>
                icon--github
            </td>

            <td><i class="icon--github2"></i><br/>
                icon--github2
            </td>
        </tr>

        <tr>
            <td><i class="icon--flickr"></i><br/>
                icon--flickr
            </td>

            <td><i class="icon--flickr2"></i><br/>
                icon--flickr2
            </td>

            <td><i class="icon--vimeo"></i><br/>
                icon--vimeo
            </td>

            <td><i class="icon--vimeo2"></i><br/>
                icon--vimeo2
            </td>

            <td><i class="icon--twitter"></i><br/>
                icon--twitter
            </td>

            <td><i class="icon--twitter2"></i><br/>
                icon--twitter2
            </td>

            <td><i class="icon--facebook"></i><br/>
                icon--facebook
            </td>
        </tr>

        <tr>
            <td><i class="icon--facebook2"></i><br/>
                icon--facebook2
            </td>

            <td><i class="icon--facebook3"></i><br/>
                icon--facebook3
            </td>

            <td><i class="icon--googleplus"></i><br/>
                icon--googleplus
            </td>

            <td><i class="icon--googleplus2"></i><br/>
                icon--googleplus2
            </td>

            <td><i class="icon--pinterest"></i><br/>
                icon--pinterest
            </td>

            <td><i class="icon--pinterest2"></i><br/>
                icon--pinterest2
            </td>

            <td><i class="icon--tumblr"></i><br/>
                icon--tumblr
            </td>
        </tr>

        <tr>
            <td><i class="icon--tumblr2"></i><br/>
                icon--tumblr2
            </td>

            <td><i class="icon--linkedin"></i><br/>
                icon--linkedin
            </td>

            <td><i class="icon--linkedin2"></i><br/>
                icon--linkedin2
            </td>

            <td><i class="icon--dribbble"></i><br/>
                icon--dribbble
            </td>

            <td><i class="icon--dribbble2"></i><br/>
                icon--dribbble2
            </td>

            <td><i class="icon--stumbleupon"></i><br/>
                icon--stumbleupon
            </td>

            <td><i class="icon--stumbleupon2"></i><br/>
                icon--stumbleupon2
            </td>
        </tr>

        <tr>
            <td><i class="icon--lastfm"></i><br/>
                icon--lastfm
            </td>

            <td><i class="icon--lastfm2"></i><br/>
                icon--lastfm2
            </td>

            <td><i class="icon--rdio"></i><br/>
                icon--rdio
            </td>

            <td><i class="icon--rdio2"></i><br/>
                icon--rdio2
            </td>

            <td><i class="icon--spotify"></i><br/>
                icon--spotify
            </td>

            <td><i class="icon--spotify2"></i><br/>
                icon--spotify2
            </td>

            <td><i class="icon--qq"></i><br/>
                icon--qq
            </td>
        </tr>

        <tr>
            <td><i class="icon--instagram3"></i><br/>
                icon--instagram3
            </td>

            <td><i class="icon--dropbox"></i><br/>
                icon--dropbox
            </td>

            <td><i class="icon--evernote"></i><br/>
                icon--evernote
            </td>

            <td><i class="icon--flattr"></i><br/>
                icon--flattr
            </td>

            <td><i class="icon--skype"></i><br/>
                icon--skype
            </td>

            <td><i class="icon--skype2"></i><br/>
                icon--skype2
            </td>

            <td><i class="icon--renren"></i><br/>
                icon--renren
            </td>
        </tr>

        <tr>
            <td><i class="icon--sina-weibo"></i><br/>
                icon--sina-weibo
            </td>

            <td><i class="icon--paypal"></i><br/>
                icon--paypal
            </td>

            <td><i class="icon--picasa"></i><br/>
                icon--picasa
            </td>

            <td><i class="icon--soundcloud"></i><br/>
                icon--soundcloud
            </td>

            <td><i class="icon--mixi"></i><br/>
                icon--mixi
            </td>

            <td><i class="icon--behance"></i><br/>
                icon--behance
            </td>

            <td><i class="icon--circles"></i><br/>
                icon--circles
            </td>
        </tr>

        <tr>
            <td><i class="icon--vk"></i><br/>
                icon--vk
            </td>

            <td><i class="icon--smashing"></i><br/>
                icon--smashing
            </td>

            <td><i class="icon--feed"></i><br/>
                icon--feed
            </td>

            <td><i class="icon--feed2"></i><br/>
                icon--feed2
            </td>

            <td><i class="icon--instagram"></i><br/>
                icon--instagram
            </td>

            <td><i class="icon--instagram2"></i><br/>
                icon--instagram2
            </td>

            <td><i class="icon--xing"></i><br/>
                icon--xing
            </td>
        </tr>

        <tr>
            <td><i class="icon--xing2"></i><br/>
                icon--xing2
            </td>

            <td><i class="icon--youtube"></i><br/>
                icon--youtube
            </td>

            <td><i class="icon--youtube2"></i><br/>
                icon--youtube2
            </td>
        </tr>
    </tbody>
</table>
```
*/
@font-face {
  font-family: 'shopware';
  font-display: block;
  src: url('../../themes/Frontend/Responsive/frontend/_public/src/fonts/shopware.woff2?6e5ab86b9509fa8d1bbdaea202317476') format('woff2'), url('../../themes/Frontend/Responsive/frontend/_public/src/fonts/shopware.woff?9af9b618fc3ec2e271d8b7bb5716c839') format('woff'), url('../../themes/Frontend/Responsive/frontend/_public/src/fonts/shopware.ttf?109672a654fcc03b5d42cd113a555064') format('truetype'), url('../../themes/Frontend/Responsive/frontend/_public/src/fonts/shopware.svg?d73e075858baa560bd69b02c3ad277cd') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon--"],
[class*=" icon--"] {
  font-family: 'shopware';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon--percent2:before {
  content: "\e723";
}
.icon--percent:before {
  content: "\e722";
}
.icon--coupon:before {
  content: "\e71c";
}
.icon--truck:before {
  content: "\e71d";
}
.icon--logout:before {
  content: "\e614";
}
.icon--grid:before {
  content: "\e615";
}
.icon--filter:before {
  content: "\e616";
}
.icon--clock:before {
  content: "\e617";
}
.icon--arrow-up:before {
  content: "\e610";
}
.icon--arrow-right:before {
  content: "\e60f";
}
.icon--arrow-left:before {
  content: "\e611";
}
.icon--arrow-down:before {
  content: "\e612";
}
.icon--star:before {
  content: "\e600";
}
.icon--star-half:before {
  content: "\e71e";
}
.icon--star-empty:before {
  content: "\e601";
}
.icon--shopware:before {
  content: "\e602";
}
.icon--service:before {
  content: "\e603";
}
.icon--search:before {
  content: "\e604";
}
.icon--numbered-list:before {
  content: "\e605";
}
.icon--menu:before {
  content: "\e606";
}
.icon--mail:before {
  content: "\e607";
}
.icon--list:before {
  content: "\e608";
}
.icon--layout:before {
  content: "\e609";
}
.icon--heart:before {
  content: "\e60a";
}
.icon--cross:before {
  content: "\e60d";
}
.icon--compare:before {
  content: "\e60b";
}
.icon--check:before {
  content: "\e60c";
}
.icon--basket:before {
  content: "\e60e";
}
.icon--account:before {
  content: "\e613";
}
.icon--chain:before {
  content: "\f0c1";
}
.icon--delicious:before {
  content: "\f1a5";
}
.icon--delicious2:before {
  content: "\e721";
}
.icon--digg:before {
  content: "\f1a6";
}
.icon--phone:before {
  content: "\e619";
}
.icon--mobile:before {
  content: "\e61d";
}
.icon--mouse:before {
  content: "\e61e";
}
.icon--directions:before {
  content: "\e61f";
}
.icon--paperplane:before {
  content: "\e620";
}
.icon--pencil:before {
  content: "\e618";
}
.icon--feather:before {
  content: "\e621";
}
.icon--paperclip:before {
  content: "\e622";
}
.icon--drawer:before {
  content: "\e623";
}
.icon--reply:before {
  content: "\e624";
}
.icon--reply-all:before {
  content: "\e625";
}
.icon--forward:before {
  content: "\e626";
}
.icon--users:before {
  content: "\e627";
}
.icon--user-add:before {
  content: "\e628";
}
.icon--vcard:before {
  content: "\e629";
}
.icon--export:before {
  content: "\e62a";
}
.icon--location:before {
  content: "\e62b";
}
.icon--map:before {
  content: "\e62c";
}
.icon--compass:before {
  content: "\e62d";
}
.icon--location2:before {
  content: "\e62e";
}
.icon--target:before {
  content: "\e62f";
}
.icon--share:before {
  content: "\e630";
}
.icon--sharable:before {
  content: "\e631";
}
.icon--thumbsup:before {
  content: "\e632";
}
.icon--thumbsdown:before {
  content: "\e633";
}
.icon--chat:before {
  content: "\e634";
}
.icon--comment:before {
  content: "\e61a";
}
.icon--quote:before {
  content: "\e635";
}
.icon--house:before {
  content: "\e636";
}
.icon--popup:before {
  content: "\e637";
}
.icon--flashlight:before {
  content: "\e638";
}
.icon--printer:before {
  content: "\e639";
}
.icon--bell:before {
  content: "\e63a";
}
.icon--link:before {
  content: "\e63b";
}
.icon--flag:before {
  content: "\e63c";
}
.icon--cog:before {
  content: "\e63d";
}
.icon--tools:before {
  content: "\e63e";
}
.icon--trophy:before {
  content: "\e63f";
}
.icon--tag:before {
  content: "\e640";
}
.icon--camera:before {
  content: "\e641";
}
.icon--megaphone:before {
  content: "\e642";
}
.icon--moon:before {
  content: "\e643";
}
.icon--palette:before {
  content: "\e644";
}
.icon--leaf:before {
  content: "\e645";
}
.icon--music:before {
  content: "\e646";
}
.icon--music2:before {
  content: "\e647";
}
.icon--new:before {
  content: "\e648";
}
.icon--graduation:before {
  content: "\e649";
}
.icon--book:before {
  content: "\e64a";
}
.icon--newspaper:before {
  content: "\e64b";
}
.icon--bag:before {
  content: "\e64c";
}
.icon--airplane:before {
  content: "\e64d";
}
.icon--lifebuoy:before {
  content: "\e64e";
}
.icon--eye:before {
  content: "\e64f";
}
.icon--clock2:before {
  content: "\e650";
}
.icon--microphone:before {
  content: "\e651";
}
.icon--calendar:before {
  content: "\e652";
}
.icon--bolt:before {
  content: "\e653";
}
.icon--thunder:before {
  content: "\e654";
}
.icon--droplet:before {
  content: "\e655";
}
.icon--cd:before {
  content: "\e656";
}
.icon--briefcase:before {
  content: "\e657";
}
.icon--air:before {
  content: "\e658";
}
.icon--hourglass:before {
  content: "\e659";
}
.icon--gauge:before {
  content: "\e65a";
}
.icon--language:before {
  content: "\e65b";
}
.icon--network:before {
  content: "\e65c";
}
.icon--key:before {
  content: "\e65d";
}
.icon--battery:before {
  content: "\e65e";
}
.icon--bucket:before {
  content: "\e65f";
}
.icon--magnet:before {
  content: "\e660";
}
.icon--drive:before {
  content: "\e661";
}
.icon--cup:before {
  content: "\e662";
}
.icon--rocket:before {
  content: "\e663";
}
.icon--brush:before {
  content: "\e664";
}
.icon--suitcase:before {
  content: "\e665";
}
.icon--cone:before {
  content: "\e666";
}
.icon--earth:before {
  content: "\e667";
}
.icon--keyboard:before {
  content: "\e668";
}
.icon--browser:before {
  content: "\e669";
}
.icon--publish:before {
  content: "\e66a";
}
.icon--progress-3:before {
  content: "\e66b";
}
.icon--progress-2:before {
  content: "\e66c";
}
.icon--progress-1:before {
  content: "\e66d";
}
/*
    for backwards-compatibility
    @deprecated
*/
.icon--brogress-1:before {
  content: "\e66d";
}
.icon--progress-0:before {
  content: "\e66e";
}
.icon--sun:before {
  content: "\e66f";
}
.icon--sun2:before {
  content: "\e670";
}
.icon--adjust:before {
  content: "\e671";
}
.icon--code:before {
  content: "\e672";
}
.icon--screen:before {
  content: "\e673";
}
.icon--infinity:before {
  content: "\e674";
}
.icon--light-bulb:before {
  content: "\e675";
}
.icon--creditcard:before {
  content: "\e676";
}
.icon--database:before {
  content: "\e677";
}
.icon--voicemail:before {
  content: "\e678";
}
.icon--clipboard:before {
  content: "\e679";
}
.icon--box:before {
  content: "\e67a";
}
.icon--ticket:before {
  content: "\e67b";
}
.icon--rss:before {
  content: "\e67c";
}
.icon--signal:before {
  content: "\e67d";
}
.icon--thermometer:before {
  content: "\e67e";
}
.icon--droplets:before {
  content: "\e67f";
}
.icon--uniE680:before {
  content: "\e680";
}
.icon--statistics:before {
  content: "\e681";
}
.icon--pie:before {
  content: "\e682";
}
.icon--bars:before {
  content: "\e683";
}
.icon--graph:before {
  content: "\e684";
}
.icon--lock:before {
  content: "\e685";
}
.icon--lock-open:before {
  content: "\e686";
}
.icon--login:before {
  content: "\e687";
}
.icon--minus:before {
  content: "\e688";
}
.icon--plus:before {
  content: "\e689";
}
.icon--cross2:before {
  content: "\e68a";
}
.icon--minus2:before {
  content: "\e68b";
}
.icon--plus2:before {
  content: "\e68c";
}
.icon--cross3:before {
  content: "\e68d";
}
.icon--minus3:before {
  content: "\e68e";
}
.icon--plus3:before {
  content: "\e68f";
}
.icon--erase:before {
  content: "\e690";
}
.icon--blocked:before {
  content: "\e691";
}
.icon--info:before {
  content: "\e61b";
}
.icon--info2:before {
  content: "\e692";
}
.icon--question:before {
  content: "\e693";
}
.icon--help:before {
  content: "\e694";
}
.icon--warning:before {
  content: "\e695";
}
.icon--cycle:before {
  content: "\e696";
}
.icon--cw:before {
  content: "\e697";
}
.icon--ccw:before {
  content: "\e698";
}
.icon--shuffle:before {
  content: "\e699";
}
.icon--arrow:before {
  content: "\e69a";
}
.icon--arrow2:before {
  content: "\e69b";
}
.icon--retweet:before {
  content: "\e69c";
}
.icon--loop:before {
  content: "\e69d";
}
.icon--history:before {
  content: "\e69e";
}
.icon--back:before {
  content: "\e69f";
}
.icon--list2:before {
  content: "\e6a0";
}
.icon--add-to-list:before {
  content: "\e6a1";
}
.icon--layout2:before {
  content: "\e6a2";
}
.icon--list3:before {
  content: "\e6a3";
}
.icon--text:before {
  content: "\e6a4";
}
.icon--text2:before {
  content: "\e6a5";
}
.icon--document:before {
  content: "\e6a6";
}
.icon--docs:before {
  content: "\e6a7";
}
.icon--landscape:before {
  content: "\e6a8";
}
.icon--pictures:before {
  content: "\e6a9";
}
.icon--video:before {
  content: "\e6aa";
}
.icon--music3:before {
  content: "\e6ab";
}
.icon--folder:before {
  content: "\e6ac";
}
.icon--archive:before {
  content: "\e6ad";
}
.icon--trash:before {
  content: "\e6ae";
}
.icon--upload:before {
  content: "\e6af";
}
.icon--download:before {
  content: "\e6b0";
}
.icon--disk:before {
  content: "\e6b1";
}
.icon--install:before {
  content: "\e61c";
}
.icon--cloud:before {
  content: "\e6b2";
}
.icon--upload2:before {
  content: "\e6b3";
}
.icon--bookmark:before {
  content: "\e6b4";
}
.icon--bookmarks:before {
  content: "\e6b5";
}
.icon--book2:before {
  content: "\e6b6";
}
.icon--play:before {
  content: "\e6b7";
}
.icon--pause:before {
  content: "\e6b8";
}
.icon--record:before {
  content: "\e6b9";
}
.icon--stop:before {
  content: "\e6ba";
}
.icon--next:before {
  content: "\e6bb";
}
.icon--previous:before {
  content: "\e6bc";
}
.icon--first:before {
  content: "\e6bd";
}
.icon--last:before {
  content: "\e6be";
}
.icon--resize-enlarge:before {
  content: "\e6bf";
}
.icon--resize-shrink:before {
  content: "\e6c0";
}
.icon--volume:before {
  content: "\e6c1";
}
.icon--sound:before {
  content: "\e6c2";
}
.icon--mute:before {
  content: "\e6c3";
}
.icon--flow-cascade:before {
  content: "\e6c4";
}
.icon--flow-branch:before {
  content: "\e6c5";
}
.icon--flow-tree:before {
  content: "\e6c6";
}
.icon--flow-line:before {
  content: "\e6c7";
}
.icon--flow-parallel:before {
  content: "\e6c8";
}
.icon--arrow-left2:before {
  content: "\e6c9";
}
.icon--arrow-down2:before {
  content: "\e6ca";
}
.icon--arrow-up-upload:before {
  content: "\e6cb";
}
.icon--arrow-right2:before {
  content: "\e6cc";
}
.icon--arrow-left3:before {
  content: "\e6cd";
}
.icon--arrow-down3:before {
  content: "\e6ce";
}
.icon--arrow-up2:before {
  content: "\e6cf";
}
.icon--arrow-right3:before {
  content: "\e6d0";
}
.icon--arrow-left4:before {
  content: "\e6d1";
}
.icon--arrow-down4:before {
  content: "\e6d2";
}
.icon--arrow-up3:before {
  content: "\e6d3";
}
.icon--arrow-right4:before {
  content: "\e6d4";
}
.icon--arrow-left5:before {
  content: "\e6d5";
}
.icon--arrow-down5:before {
  content: "\e6d6";
}
.icon--arrow-up4:before {
  content: "\e6d7";
}
.icon--arrow-right5:before {
  content: "\e6d8";
}
.icon--arrow-left6:before {
  content: "\e6d9";
}
.icon--arrow-down6:before {
  content: "\e6da";
}
.icon--arrow-up5:before {
  content: "\e6db";
}
.icon--arrow-right6:before {
  content: "\e6dc";
}
.icon--menu2:before {
  content: "\e6dd";
}
.icon--ellipsis:before {
  content: "\e6de";
}
.icon--dots:before {
  content: "\e6df";
}
.icon--dot:before {
  content: "\e6e0";
}
.icon--cc:before {
  content: "\e6e1";
}
.icon--cc-by:before {
  content: "\e6e2";
}
.icon--cc-nc:before {
  content: "\e6e3";
}
.icon--cc-nc-eu:before {
  content: "\e6e4";
}
.icon--cc-nc-jp:before {
  content: "\e6e5";
}
.icon--cc-sa:before {
  content: "\e6e6";
}
.icon--cc-nd:before {
  content: "\e6e7";
}
.icon--cc-pd:before {
  content: "\e6e8";
}
.icon--cc-zero:before {
  content: "\e6e9";
}
.icon--cc-share:before {
  content: "\e6ea";
}
.icon--cc-share2:before {
  content: "\e6eb";
}
.icon--danielbruce:before {
  content: "\e6ec";
}
.icon--danielbruce2:before {
  content: "\e6ed";
}
.icon--github:before {
  content: "\e6ee";
}
.icon--github2:before {
  content: "\e6ef";
}
.icon--flickr:before {
  content: "\e6f0";
}
.icon--flickr2:before {
  content: "\e6f1";
}
.icon--vimeo:before {
  content: "\e6f2";
}
.icon--vimeo2:before {
  content: "\e6f3";
}
.icon--twitter:before {
  content: "\e6f4";
}
.icon--twitter2:before {
  content: "\e6f5";
}
.icon--facebook:before {
  content: "\e6f6";
}
.icon--facebook2:before {
  content: "\e6f7";
}
.icon--facebook3:before {
  content: "\e6f8";
}
.icon--googleplus:before {
  content: "\e6f9";
}
.icon--googleplus2:before {
  content: "\e6fa";
}
.icon--pinterest:before {
  content: "\e6fb";
}
.icon--pinterest2:before {
  content: "\e6fc";
}
.icon--tumblr:before {
  content: "\e6fd";
}
.icon--tumblr2:before {
  content: "\e6fe";
}
.icon--linkedin:before {
  content: "\e6ff";
}
.icon--linkedin2:before {
  content: "\e700";
}
.icon--dribbble:before {
  content: "\e701";
}
.icon--dribbble2:before {
  content: "\e702";
}
.icon--stumbleupon:before {
  content: "\e703";
}
.icon--stumbleupon2:before {
  content: "\e704";
}
.icon--lastfm:before {
  content: "\e705";
}
.icon--lastfm2:before {
  content: "\e706";
}
.icon--rdio:before {
  content: "\e707";
}
.icon--rdio2:before {
  content: "\e708";
}
.icon--spotify:before {
  content: "\e709";
}
.icon--spotify2:before {
  content: "\e70a";
}
.icon--qq:before {
  content: "\e70b";
}
.icon--instagram3:before {
  content: "\e70c";
}
.icon--dropbox:before {
  content: "\e70d";
}
.icon--evernote:before {
  content: "\e70e";
}
.icon--flattr:before {
  content: "\e70f";
}
.icon--skype:before {
  content: "\e710";
}
.icon--skype2:before {
  content: "\e711";
}
.icon--renren:before {
  content: "\e712";
}
.icon--sina-weibo:before {
  content: "\e713";
}
.icon--paypal:before {
  content: "\e714";
}
.icon--picasa:before {
  content: "\e715";
}
.icon--soundcloud:before {
  content: "\e716";
}
.icon--mixi:before {
  content: "\e717";
}
.icon--behance:before {
  content: "\e718";
}
.icon--circles:before {
  content: "\e719";
}
.icon--vk:before {
  content: "\e71a";
}
.icon--smashing:before {
  content: "\e71b";
}
.icon--feed:before {
  content: "\e71f";
}
.icon--feed2:before {
  content: "\e720";
}
.icon--instagram:before {
  content: "\e903";
}
.icon--instagram2:before {
  content: "\e902";
}
.icon--xing:before {
  content: "\e901";
}
.icon--xing2:before {
  content: "\e900";
}
.icon--youtube:before {
  content: "\e905";
}
.icon--youtube2:before {
  content: "\e904";
}
/*
Navigation list styling
=========================================
Defines a global component for navigation lists.

Navigation lists can be extended by custom styling declarations.

```
<ul class="navigation--list">
    <li class="navigation--entry is--active">
        <a class="navigation--link" href="">
            List entry
        </a>
    </li>
    <li class="navigation--entry">
        <a class="navigation--link" href="">
            <span>List entry</span>
        </a>
    </li>
    <li class="navigation--entry">
        <a class="navigation--link" href="">
            <span>List entry</span>
        </a>
    </li>
</ul>
```
*/
.navigation--list {
  list-style: none;
}
/*
Off-canvas menu
=======================================
The off-canvas menu is the default shopping cart menu in Shopware.

It is an expanding menu that displays the shopping cart at the right side of the screen.

It can be enabled/disabled inside the Shopware 5 backend.

The functionality is provided by the `jquery.off-canvas-menu.js` file.
*/
.off-canvas {
  -webkit-transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1);
  transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  width: 17.5rem;
  background: #fff;
  position: fixed;
  top: 0;
  bottom: 0;
  display: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 8000;
}
.off-canvas.is--left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  left: 0;
}
.off-canvas.is--right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  right: 0;
}
.off-canvas.is--active {
  display: block;
}
.off-canvas.is--open {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.off-canvas.is--full-screen {
  width: 100%;
}
.off-canvas.no--transitions {
  -webkit-transition: none;
  transition: none;
}
.off-canvas .buttons--off-canvas {
  display: block;
}
.off-canvas .close--off-canvas {
  padding: 0.125rem 0.625rem 0.125rem 0.625rem;
  line-height: 2.375rem;
  background-color: #96c126;
  background-image: linear-gradient(to bottom, #96c126 0%, #648119 100%);
  display: block;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.off-canvas .close--off-canvas:after {
  content: "";
  display: table;
  clear: both;
}
.off-canvas .close--off-canvas .icon--arrow-left {
  margin: 0rem 0.625rem 0rem 0rem;
  font-size: 0.6875rem;
}
.off-canvas .link--go-main {
  font-size: 1rem;
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  height: 2.625rem;
  font-weight: 700;
  display: block;
  width: 100%;
}
.off-canvas .link--go-main .icon--menu {
  font-size: 1.25rem;
  margin-right: 0.625rem;
  float: left;
}
.off-canvas .sidebar--navigation .navigation--link {
  padding: 0.125rem 0.625rem 0.125rem 0.625rem;
  line-height: 2.375rem;
}
.off-canvas .sidebar--navigation .navigation--link .is--icon-right {
  margin-top: 0;
}
.off-canvas .sidebar--navigation .navigation--link .is--icon-left {
  margin: 0rem 0.625rem 0rem 0rem;
  float: left;
}
.buttons--off-canvas {
  display: none;
}
.page-wrap {
  -webkit-transition: left 400ms cubic-bezier(0.16, 0.04, 0.14, 1);
  transition: left 400ms cubic-bezier(0.16, 0.04, 0.14, 1);
  position: relative;
  left: 0;
}
.navigation--smartphone .navigation--entry {
  padding: 0.75rem 0.625rem 0.75rem 0.625rem;
  background: #fff;
}
.navigation--smartphone .navigation--link {
  display: block;
}
.navigation--smartphone .entry--close-off-canvas,
#cookie-consent .cookie-consent--header {
  padding: 0.125rem 0.625rem 0.125rem 0.625rem;
  line-height: 2.375rem;
  background-color: #96c126;
  background-image: linear-gradient(to bottom, #96c126 0%, #648119 100%);
}
.navigation--smartphone .entry--close-off-canvas .navigation--link,
#cookie-consent .cookie-consent--header {
  font-size: 0.875rem;
  color: #fbfbfb;
  font-weight: 700;
}
.navigation--smartphone .entry--close-off-canvas .navigation--link:after {
  content: "";
  display: table;
  clear: both;
}
.navigation--smartphone .entry--close-off-canvas .navigation--link:active {
  color: #f8f8f8;
}
.navigation--smartphone .entry--close-off-canvas .icon--arrow-right,
#cookie-consent .cookie-consent--header .icon--arrow-right {
  margin: 0.75rem 0rem 0rem 0rem;
  font-size: 0.6875rem;
  float: right;
}
.navigation--headline,
.sidebar--navigation {
  margin: 0rem 0.625rem 0rem 0.625rem;
}
.navigation--headline {
  margin: 1rem 0.625rem 0.375rem 0.625rem;
  line-height: 1.625rem;
  color: #000000;
  font-weight: 700;
  font-size: 1em;
}
.sidebar--navigation {
  border-radius: 3px;
  background-clip: padding-box;
  background: #fff;
  border: 1px solid #96c126;
}
.sidebar--navigation .navigation--entry {
  border-bottom: 1px solid #96c126;
}
.sidebar--navigation .navigation--entry:last-child {
  border-bottom: 0 none;
}
.sidebar--navigation .navigation--link {
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (min-width: 48em) {
  .off-canvas {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: none;
    transition: none;
    display: block;
    background: transparent;
    position: relative;
    width: auto;
    height: auto;
    top: 0;
    left: 0;
    z-index: 1000;
  }
  .off-canvas .sidebar--navigation .navigation--link {
    padding: 0.625rem 0.625rem 0.625rem 0.625rem;
    line-height: inherit;
  }
  .off-canvas .account--menu .navigation--link {
    padding: 0.3125rem 0rem 0.3125rem 0rem;
    line-height: inherit;
  }
  .sidebar-main .entry--close-off-canvas {
    display: none;
  }
  .sidebar-main .icon--arrow-right,
  .sidebar-main .icon--arrow-left {
    display: none;
  }
}
/*
Panels
===================================================================
######Basic panel component for boxes and bordered containers.

The panel can be used with different content structures.

Styling options: `has--border` and `has--shadow`

```
<div class="panel">
    <div class="panel--body">
        Basic panel element
    </div>
</div>

<div class="panel has--border">
    <div class="panel--body">
        Basic panel with border
    </div>
</div>
```
*/
.panel {
  display: block;
  background: #f8f8f8;
}
.panel.has--shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.panel.has--border {
  border: 1px solid #648119;
}
/*
<h6>A header box for a panel.</h6>
<p>Can be used by adding the `panel--header`-element and `primary` or `secondary` classes.</p>
```
<div class="panel">
    <div class="panel--header primary">Panel header primary</div>
    <div class="panel--header secondary">Panel header secondary</div>
    <div class="panel--body">
        Panel body
    </div>
</div>
```
*/
.panel--header {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  font-size: 0.875rem;
  background: #f8f8f8;
  display: block;
  margin: 0;
  font-weight: 700;
  color: #000000;
  border-bottom: 1px solid #648119;
}
.panel--header.secondary {
  color: #ffffff;
  background: #fff;
}
.panel--header.primary {
  color: #48a2e7;
  background: #fff;
}
/*
<h6>A title heading for a panel.</h6>
<p>The `panel--title` can be used as an alternative to the `panel--header` element.</p>
<p>When using the `panel--title` element, make sure that the `panel--body` element has the class `is--wide` assigned in order to work properly. Also the `is--underline` class was added here.
```
<div class="panel">
    <h3 class="panel--title is--underline">Panel title</h3>
    <div class="panel--body is--wide">
        Panel body
    </div>
</div>
```
*/
.panel--title {
  padding: 1.25rem 0rem 0rem 0rem;
  margin: 0rem 1.25rem 0rem 1.25rem;
  font-size: 1rem;
  display: block;
  font-weight: 700;
  color: #000000;
}
.panel--title.is--underline {
  padding: 1.25rem 0rem 0.625rem 0rem;
  border-bottom: 1px solid #648119;
  text-decoration: none !important;
}
.panel--title.is--secondary {
  color: #ffffff;
}
.panel--title.is--primary {
  color: #48a2e7;
}
/*
<h6>The content body for a panel</h6>
<p>Styling options: `is--slim`, `is--wide`, `is--flat`, `is--embossed`.</p>

```
<div class="panel">
<div class="panel--body is--wide">Panel content ...</div>
</div>
```
*/
.panel--body {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  display: block;
  position: relative;
}
.panel--body.has--border {
  border: 1px solid #648119;
}
.panel--body.is--slim {
  padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem;
}
.panel--body.is--wide {
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
}
.panel--body.is--flat {
  background: #f8f8f8;
}
.panel--body.is--embossed {
  box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
  background: #f8f8f8;
}
/*
######A container for action elements
```
<div class="panel--actions">
    <a href="" class="btn">Action Link</a>
    <a href="" class="btn">Action Link</a>
</div>
```
*/
.panel--actions {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  line-height: 2.5rem;
  display: block;
}
.panel--actions.has--border {
  margin: 0.625rem 0rem 0rem 0rem;
  padding: 0.625rem 0rem 0rem 0rem;
  border-top: 1px solid #648119;
}
.panel--actions.is--slim {
  padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem;
}
.panel--actions.is--wide {
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
}
.panel--actions .btn {
  margin: 0rem 0.375rem 0rem 0rem;
}
/*
######A table inside a panel.
```
<div class="panel panel--table">
    <div class="panel--tr">
        <div class="panel--th">Column 1</div>
        <div class="panel--th">Column 2</div>
        <div class="panel--th">Column 3</div>
    </div>
    <div class="panel--tr">
        <div class="panel--td">Value 1</div>
        <div class="panel--td">Value 2</div>
        <div class="panel--td">Value 3</div>
    </div>
</div>
```
*/
.panel--table {
  width: 100%;
  display: block;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}
.panel--table:after {
  content: "";
  display: table;
  clear: both;
}
.panel--table.has--border {
  border: 1px solid #648119;
}
.panel--tr {
  display: block;
  width: 100%;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #648119;
}
.panel--tr:after {
  content: "";
  display: table;
  clear: both;
}
.panel--tr:last-child {
  border-width: 0;
}
.panel--tr.is--odd {
  background: #eeeeee;
}
.panel--tr.is--secondary {
  background: #eeeeee;
}
.panel--tr.is--primary {
  color: #48a2e7;
}
.panel--th,
.panel--td {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  display: inline-block;
  float: left;
}
.panel--th:after,
.panel--td:after {
  content: "";
  display: table;
  clear: both;
}
.panel--th.has--border,
.panel--td.has--border {
  border-width: 0 1px 0 0;
  border-style: solid;
  border-color: #648119;
}
.panel--th.has--border:last-child,
.panel--td.has--border:last-child {
  border-width: 0;
}
.panel--th p,
.panel--td p {
  margin: 0;
}
.panel--th {
  font-weight: 700;
  color: #000000;
}
/*
######A small dot navigation for example for a slider panel.

```
<div class="panel--dot-nav">
    <a href=""></a>
    <a href="" class="is--active"></a>
    <a href=""></a>
</div>
```
*/
.panel--dot-nav {
  height: 0.6875rem;
  position: relative;
}
.panel--dot-nav .dot--link,
.panel--dot-nav a {
  border-radius: 11px;
  background-clip: padding-box;
  margin: 0rem 0.3125rem 0rem 0.3125rem;
  width: 0.6875rem;
  height: 0.6875rem;
  display: inline-block;
  border: 1px solid #96c126;
}
.panel--dot-nav .dot--link.is--active,
.panel--dot-nav a.is--active {
  border-color: #48a2e7;
  background: #48a2e7;
}
/*
######A paging navigation for pagination content.
```
<div class="panel--paging">
    <a href=""><i class="icon--arrow-left"></i></a>
    <a href="">1</a>
    <a href="">2</a>
    <a href="">...</a>
    <a href=""><i class="icon--arrow-right"></i></a>
</div>
```
*/
.panel--paging {
  line-height: 2rem;
  display: inline-block;
}
.panel--paging .paging--link {
  padding: 0rem 0.625rem 0rem 0.625rem;
  margin: 0rem 0.0625rem 0rem 0.0625rem;
  font-size: 0.875rem;
  line-height: 1.875rem;
  border-radius: 3px;
  background-clip: padding-box;
  background-color: #ffffff;
  background-image: linear-gradient(to bottom, #ffffff 0%, #fbfbfb 100%);
  display: inline-block;
  font-weight: 500;
  text-align: center;
  border: 1px solid #96c126;
  color: #ffffff;
}
.panel--paging .paging--link [class^="icon--"] {
  font-size: 0.625rem;
}
.panel--paging .paging--link.is--active,
.panel--paging .paging--link.is--active:hover {
  line-height: 2rem;
  background-color: #48a2e7;
  background-image: linear-gradient(to bottom, #48a2e7 0%, #48a2e7 100%);
  color: #ffffff;
  border: 0 none;
  font-weight: 700;
  cursor: default;
}
.panel--paging .paging--link:hover {
  background: #ffffff;
  color: #48a2e7;
  border-color: #48a2e7;
}
/*
Form
============================

Contains the general layout and styling for the Shopware form elements and fieldsets.

The fieldset padding size is defined with the unitize mixin.

```
<fieldset>
    <form>
        <table>
            <tr>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
            </tr>
        <table>
    <form>
</fieldset>
```

*/
form,
#paypal-acdc-form {
  display: block;
}
form table {
  width: 100%;
}
form table td {
  padding: 10px;
}
fieldset {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  border: 1px solid #96c126;
}
/*
Alerts
===================================================================
######Displays an alert box for status messages to the user.

Alerts always have to have the `.alert` class assigned, and in addition one of four color schemes.

Options: `is--success`, `is--info`, `is--warning`, `is--error`.
```
<p class="alert is--success">Success message</p>
<p class="alert is--info">Info message</p>
<p class="alert is--warning">Warning message</p>
<p class="alert is--error">Error message</p>
```
*/
.alert {
  font-size: 0.875rem;
  line-height: 1.5rem;
  position: relative;
  overflow: hidden;
  /*
######With an Icon inside of the box.</h6>
```
<div class="alert is--success is--rounded">
    <div class="alert--icon">
    <i class="icon--element icon--check"></i>
    </div>
    <div class="alert--content">
    Success message with Icon
    </div>
</div>

<div class="alert is--warning is--rounded">
    <div class="alert--icon">
    <i class="icon--element icon--warning"></i>
    </div>
    <div class="alert--content">
    Warning message with Icon
    </div>
</div>
```
*/
}
.alert:after {
  content: "";
  display: table;
  clear: both;
}
.alert.is--success {
  color: #208e4e;
  background: #def2e7;
}
.alert.is--success .alert--icon {
  background: #2ecc71;
}
.alert.is--info {
  color: #1a7dc8;
  background: #edf4fa;
}
.alert.is--info .alert--icon {
  background: #48a2e7;
}
.alert.is--warning {
  color: #ae8e0a;
  background: #fbf5db;
}
.alert.is--warning .alert--icon {
  background: #f1c40f;
}
.alert.is--error {
  color: #e74c3c;
  background: #faeceb;
}
.alert.is--error .alert--icon {
  background: #e74c3c;
}
.alert.no--cookies {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  right: 0;
}
.alert.no--cookies a.close--alert {
  float: right;
}
.alert.no--cookies a.close--alert:hover {
  cursor: pointer;
  text-decoration: underline;
}
.alert .alert--close {
  position: absolute;
  top: 1.0625rem;
  right: 1.25rem;
  font-size: 0.625rem;
  color: #ffffff;
  cursor: pointer;
}
.alert .icon--element {
  position: absolute;
  top: 50%;
  left: 0;
  width: 15%;
  margin-top: -9px;
}
.alert .alert--icon,
.alert .alert--content {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  float: left;
}
.alert .alert--icon p,
.alert .alert--content p {
  margin-bottom: 0rem;
}
.alert .alert--icon {
  font-size: 1.125rem;
  line-height: 1.625rem;
  width: 15%;
  text-align: center;
  font-weight: 700;
  color: #fff;
  padding-bottom: 9999em;
  margin-bottom: -9999em;
}
.alert .alert--content {
  width: 85%;
}
.alert .alert--content.is--strong {
  font-weight: 700;
}
.alert .alert--list {
  list-style: none;
}
.alert .list--entry {
  display: block;
}
.container--ajax-cart:not(.off-canvas) .alert {
  margin: 0.625rem;
}
.container--ajax-cart .alert .alert--close {
  right: 0.9375rem;
}
.container--ajax-cart .alert .alert--content {
  padding: 0.625rem 1.25rem 0.625rem 1.25rem;
}
@media screen and (min-width: 48em) {
  .alert .alert--icon,
  .alert .icon--element {
    width: 8%;
  }
  .alert .alert--content {
    width: 92%;
  }
}
/*
Counter Badges
==========================================
######Creates a badge to display counts.

The `span` can be modified with 3 different color schemes.

Options: `is--primary`, `is--secondary`, `is--minimal`


```
<p><span class="badge is--primary">1</span> Primary Badge</p>
<p><span class="badge is--secondary">2</span> Secondary Badge</p>
<p><span class="badge is--minimal">3</span> Minimal Badge</p>
```
*/
.badge {
  padding: 0rem 0.3125rem 0rem 0.3125rem;
  margin: 0rem 0.3125rem 0rem 0.3125rem;
  height: 1.25rem;
  min-width: 0.625rem;
  line-height: 1.25rem;
  font-size: 0.75rem;
  border-radius: 50px;
  background-clip: padding-box;
  box-sizing: content-box;
  display: inline-block;
  white-space: nowrap;
  z-index: 500;
  font-weight: 700;
  text-align: center;
  background: #fff;
  color: #48a2e7;
  border: 1px solid #96c126;
}
.badge.is--primary {
  background-color: #7abef2;
  background-image: linear-gradient(to bottom, #7abef2 0%, #48a2e7 100%);
  color: #fff;
  border-color: #fff;
}
.badge.is--secondary {
  background-color: #96c126;
  background-image: linear-gradient(to bottom, #96c126 0%, #648119 100%);
  color: #fff;
  border-color: #fff;
}
.badge.is--minimal {
  border: 0 none;
}
/*
Labels
===================================================================
######Creates a label for displaying a status.

To work properly the `span`-element needs the general `label`-class and a color scheme option:

Options: `success`, `info`, `warning`, `error`.
```
<span class="label success">Success!</span>
<span class="label info">Info!</span>
<span class="label warning">Warning!</span>
<span class="label error">Error!</span>
```
*/
.label {
  padding: 0.1875rem 0.5rem 0.1875rem 0.5rem;
  margin: 0rem 0.3125rem 0rem 0.3125rem;
  font-size: 0.875rem;
  line-height: 1.125rem;
  border-radius: 3px;
  background-clip: padding-box;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  color: #ffffff;
  background: #ffffff;
}
.label.success {
  background: #2ecc71;
}
.label.info {
  background: #48a2e7;
}
.label.warning {
  background: #f1c40f;
}
.label.error {
  background: #e74c3c;
}
/*
Collapse Box
================================================
A collapse box for panels and text elements.

Displays a folding box that responds if the content does not fit the element.

```

<div class="collapse--header">
  Collapse box title
    <span class="collapse--toggler">
    </span>
</div>
<div class="collapse--content is--collapsed">
    This content will be shown by the is--collapsed class.
</div>

<div class="collapse--header">
  Collapse box title
    <span class="collapse--toggler">
    </span>
</div>
<div class="collapse--content">
    Lorem ipsum dolor
</div>

<div class="collapse--header">
  Collapse box title
    <span class="collapse--toggler">
    </span>
</div>
<div class="collapse--content">
    Lorem ipsum dolor
</div>

```
*/
.collapse--header {
  padding: 0.625rem 1.25rem 0.625rem 1.25rem;
  margin: 0.625rem 0rem 0rem 0rem;
  font-size: 1rem;
  line-height: 1rem;
  background-color: #ffffff;
  background-image: linear-gradient(to bottom, #ffffff 0%, #fbfbfb 100%);
  border-radius: 3px;
  background-clip: padding-box;
  box-shadow: 0 1px 1px 0 rgba(236, 238, 241, 0.8);
  display: block;
  position: relative;
  z-index: 1100;
  border: 1px solid #96c126;
  cursor: pointer;
}
.collapse--header .collapse--toggler {
  height: 1rem;
  top: 0.625rem;
  right: 1.25rem;
  font-size: 0.375rem;
  line-height: 1rem;
  position: absolute;
  font-weight: 500;
  font-family: 'shopware';
}
.collapse--header .collapse--toggler:before {
  content: "\e612";
}
.collapse--header:hover {
  color: #48a2e7;
}
.collapse--header.is--active {
  background-color: #96c126;
  background-image: linear-gradient(to bottom, #96c126 0%, #648119 100%);
  box-shadow: 0 1px 3px 0 rgba(95, 114, 133, 0.5);
  color: #fff;
  font-weight: 700;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #648119;
  z-index: 1300;
}
.collapse--header.is--active .collapse--toggler:before {
  content: "\e610";
}
.collapse--content {
  padding: 0.3125rem 0rem 0rem 0rem;
  top: -0.3125rem;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  background-clip: padding-box;
  box-shadow: 0 1px 1px 0 rgba(236, 238, 241, 0.8);
  display: none;
  position: relative;
  z-index: 1000;
  background: #fff;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  border-color: #96c126;
}
.collapse--content.is--collapsed {
  display: block;
  z-index: 1200;
}
.js--collapse-target {
  display: none;
}
.js--collapse-target.is--collapsed {
  display: block;
}
/*
Product Slider
===================================================
######Shopware Product slider element
The Shopware product slider element displays a selection of articles the user chooses inside a slim slider element.

The product slider uses the product box component for displaying and sliding articles.

The slider has `is--vertical` and `is-horizontal` properties to set the layout of the element.

For initializing a product slider the outer `product-slider` wrapper has to have the attribute `data-product-slider="true"`.

```
<div class="product-slider" data-product-slider="true">

    <a class="product-slider--arrow arrow--next is--horizontal"></a>
    <a class="product-slider--arrow arrow--prev is--horizontal"></a>

    <div class="product-slider--container is--horizontal">

        <div class="product-slider--item">
            <!-- Product box will be placed here. -->
        </div>

    </div>

</div>
```
*/
.product-slider {
  display: block;
  padding: 0;
  position: relative;
  top: 0;
  left: 0;
}
.product-slider--container {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: block;
  width: 100%;
  height: 100%;
  font-size: 0;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.product-slider--container:after {
  content: "";
  display: table;
  clear: both;
}
.product-slider--container::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.product-slider--container.is--vertical {
  overflow-y: scroll;
  overflow-x: hidden;
  white-space: normal;
}
.product-slider--container.is--vertical .product-slider--item {
  display: block;
  width: 100%;
}
.product-slider--container.is--horizontal {
  overflow-y: hidden;
  overflow-x: scroll;
  white-space: nowrap;
}
.product-slider--container.is--horizontal .product-slider--item {
  height: 100%;
  display: inline-block;
}
.is--ie .product-slider--container,
.is--firefox .product-slider--container,
.product-slider--container.is--no-scroll {
  overflow-y: hidden;
  overflow-x: hidden;
}
.product-slider--item {
  padding: 0.9375rem 0.9375rem 0.9375rem 0.9375rem;
  font-size: 1rem;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  text-align: center;
  width: 100%;
  display: inline-block;
}
.product-slider--arrow {
  width: 1.875rem;
  height: 3.75rem;
  margin: -1.875rem 0rem 0rem 0rem;
  line-height: 3.75rem;
  font-size: 0.75rem;
  border-radius: 3px;
  background-clip: padding-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background: rgba(255, 255, 255, 0.5);
  display: block;
  position: absolute;
  top: 50%;
  z-index: 750;
  font-family: 'shopware';
  text-align: center;
  color: #ffffff;
  border: 1px solid #96c126;
  cursor: pointer;
}
.product-slider--arrow.arrow--prev {
  border-top-left-radius: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 0;
  background-clip: padding-box;
  left: 0;
}
.product-slider--arrow.arrow--prev:before,
.product-slider--arrow.arrow--prev::before {
  content: "\e611";
}
.product-slider--arrow.arrow--next {
  border-top-left-radius: 3px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 3px;
  background-clip: padding-box;
  right: 0;
}
.product-slider--arrow.arrow--next:before {
  content: "\e60f";
}
.product-slider--arrow:hover {
  color: #48a2e7;
  border-color: #48a2e7;
  background: rgba(255, 255, 255, 0.8);
}
.product-slider--arrow.is--vertical {
  width: 3.75rem;
  height: 1.875rem;
  margin: 0rem 0rem 0rem -1.875rem;
  line-height: 1.875rem;
  font-size: 0.375rem;
  left: 50%;
  top: auto;
}
.product-slider--arrow.is--vertical.arrow--prev {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  background-clip: padding-box;
  top: 0;
}
.product-slider--arrow.is--vertical.arrow--prev:before,
.product-slider--arrow.is--vertical.arrow--prev::before {
  content: "\e610";
}
.product-slider--arrow.is--vertical.arrow--next {
  bottom: 0;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-clip: padding-box;
}
.product-slider--arrow.is--vertical.arrow--next:before {
  content: "\e612";
}
@media screen and (min-width: 30em) {
  .product-slider--item {
    width: 50%;
  }
}
@media screen and (min-width: 48em) {
  .product-slider--item {
    width: 33.33%;
  }
}
@media screen and (min-width: 64em) {
  .product-slider--item {
    width: 25%;
  }
}
@media screen and (min-width: 78.75em) {
  .product-slider--container.is--horizontal,
  .product-slider--container.is--vertical {
    overflow: hidden;
  }
}
/*
Modalbox
==============================================
Creates a transitioned fixed modalbox overlay that displays above all other elements.

The `sizing--content` class lets the modal window get its height from the inner content.

The inline styles are generated by the `jquery.modal.js` file.

```
<div class="js--modal sizing--content" style="width: 600px; height: auto; display: block; opacity: 1;">
    <div class="header">
        <div class="title">This is the header</div>
    </div>
    <div class="content">
        This is the content
    </div>

    <div class="btn icon--cross is--small btn--grey modal--close">
    </div>
</div>

<div class="js--overlay" style="opacity: 0.8; display: block; cursor: pointer;"></div>
```
*/
.js--modal {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  box-shadow: 0px 0px 0px 7px rgba(0, 0, 0, 0.25);
  box-sizing: content-box;
  opacity: 0;
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: padding-box #ffffff;
  max-height: 100%;
  max-width: 100%;
  z-index: 7000;
  overflow-x: hidden;
  overflow-y: auto;
}
.js--modal .header {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  height: 2.625rem;
  border-bottom: 1px solid #96c126;
}
.js--modal .header .title {
  font-size: 1rem;
  font-weight: 700;
}
.js--modal .modal--close {
  height: 1.875rem;
  width: 1.875rem;
  line-height: 1.875rem;
  font-size: 0.625rem;
  right: 0.625rem;
  top: 0.4375rem;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  padding: 0;
  text-align: center;
  position: absolute;
}
.js--modal .content {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.js--modal .content .content--iframe {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  width: 100%;
  height: 100%;
  border: 0 none;
  display: block;
}
.js--modal.sizing--auto.is--fullscreen {
  height: 100% !important;
  width: 100% !important;
}
.js--modal.sizing--fixed {
  max-height: none !important;
  max-width: none !important;
}
.js--modal.sizing--content {
  position: fixed;
  bottom: auto;
  top: auto;
  height: auto;
}
.js--modal.no--header .header {
  display: none;
}
.js--modal.no--border-radius {
  border-radius: 0;
}
@media screen and (min-width: 48em) {
  .js--modal {
    border-radius: 3px;
    background-clip: padding-box;
  }
}
/*
Loading indicator
=============================================
Displays a spinning circle to indicate a loading status.

Can be imported by using the `i` tag with the `icon--loading-indicator` class.

`<i class="icon--loading-indicator"></i>`

The functionality is provided by the `jquery.loading-indicator.js` file.
*/
.js--is-loading {
  position: relative;
}
.js--loading-indicator {
  position: absolute;
  display: none;
  z-index: 6000;
  top: 50%;
  left: 50%;
}
body > .js--loading-indicator {
  position: fixed;
}
.js--loading-indicator.indicator--relative {
  width: 1.875rem;
  height: 1.875rem;
  padding-top: 3.125rem;
  padding-bottom: 3.125rem;
  background: none;
  position: relative;
  display: block;
  left: 50%;
  top: auto;
  border: 0 none;
}
.js--loading-indicator.indicator--absolute {
  width: 1.875rem;
  height: 1.875rem;
  padding-top: 3.125rem;
  padding-bottom: 3.125rem;
  background: none;
  position: relative;
  display: block;
  left: 50%;
  top: auto;
  border: 0 none;
  position: absolute;
  padding: 0;
  top: 50%;
}
.js--loading-indicator.indicator--absolute.js--loading-indicator {
  margin: -0.9375rem 0rem 0rem -0.9375rem;
}
.has--cssanimations .js--loading-indicator {
  margin: -0.8125rem 0rem 0rem -0.8125rem;
}
.has--cssanimations .js--loading-indicator div[class^="icon--"] {
  width: 1.625rem;
  height: 1.625rem;
  display: block;
}
.has--cssanimations .js--loading-indicator .icon--default:before,
.has--cssanimations .js--loading-indicator .icon--default::before {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 100%;
  background-clip: padding-box;
  -webkit-animation: keyframe--spin 1s linear infinite;
  animation: keyframe--spin 1s linear infinite;
  display: block;
  content: "";
  border: 2px solid #96c126;
  border-top: 2px solid #435611;
}
.has--no-cssanimations .js--loading-indicator {
  margin: -0.8125rem 0rem 0rem -0.8125rem;
}
.has--no-cssanimations .js--loading-indicator div[class^="icon--"] {
  width: 1rem;
  height: 1rem;
  display: block;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.has--no-cssanimations .js--loading-indicator .icon--default {
  height: 1rem;
  width: 1rem;
  background-image: url('../../themes/Frontend/Responsive/frontend/_public/src/img/icons/loading-indicator.gif?da4cc11c456bd9f44d5a01d8ae14f59c');
}
/*
Overlay
================================================
Creates a fixed full-screen overlay.

The `js--overlay` element is used when a modal window is shown.

The `js--overlay` element is empty while the html of the modal box will be created just before the closing body-tag.

The opacity of the full-screen overlay can be modified with javascript.

The functionality is provided by the `jquery.overlay.js` file.

```
<div class="js--overlay" style="opacity: 0.8; display: block; cursor: pointer;"></div>
```

default color:`#000000` default opacity (alpha):`0.7`
*/
.js--overlay-relative {
  position: relative;
}
.js--overlay {
  -webkit-transition: opacity 0.45s cubic-bezier(.3,0,.15,1), visibility 0.45s linear;
  transition: opacity 0.45s cubic-bezier(.3,0,.15,1), visibility 0.45s linear;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  opacity: 0.01;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 5000;
  visibility: hidden;
}
.js--overlay.theme--dark {
  background: rgba(0, 0, 0, 0.7);
}
.js--overlay.theme--light {
  background: rgba(255, 255, 255, 0.7);
}
.js--overlay.is--open {
  -webkit-transition-delay: 0;
  transition-delay: 0;
  opacity: 1;
  visibility: visible;
}
.js--overlay.is--closable {
  cursor: pointer;
}
body > .js--overlay {
  position: fixed;
}
/*
Language Flags
==================================================
Displays a country flag the size of 14px x 11px used for language selections purposes.

inspired by: https://github.com/dhanishgajjar/css-flags

en_GB: we need to use svg for en_GB, cause it's smaller than the CSS-Version
*/
.language--flag {
  height: 0.6875rem;
  width: 0.875rem;
  display: inline-block;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.language--flag.de_DE {
  background-position: 0 0;
  background-image: linear-gradient(to bottom, #000000 33%, #dd0000 33%, #dd0000 66%, #ffce00 66%);
}
.language--flag.en_GB {
  background-position: 0 0;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='640' height='480'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M-85 0h682v512H-85z'%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg clip-path='url%28%23a%29' transform='translate%2880%29 scale%28.94%29'%3E%3Cpath fill='%23006' d='M-256 0H768v512H-256z'%2F%3E%3Cpath fill='%23fff' d='M-256 0v57l910 455h114v-57L-141 0h-115zM768 0v57l-909 455h-115v-57L654 0h114z'%2F%3E%3Cpath fill='%23fff' d='M171 0v512h170V0H171zm-427 171v170H768V171H-256z'%2F%3E%3Cpath fill='%23c00' d='M-256 205v102H768V205H-256zM205 0v512h102V0H205zm-461 512L85 341h77l-342 171h-76zm0-512L85 171H9L-256 38V0zm606 171L692 0h76L427 171h-77zm418 341L427 341h76l265 133v38z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.language--flag.nl_NL {
  background-position: 0 0;
  background-image: linear-gradient(to bottom, #dd0000 33%, #ffffff 33%, #ffffff 66%, #21468b 66%);
}
.language--flag.fr_FR {
  background-position: 0 0;
  background-image: linear-gradient(to right, #21468b 33%, #ffffff 33%, #ffffff 66%, #dd0000 66%);
}
.language--flag.es_ES {
  background-position: 0 0;
  background-image: linear-gradient(#dd0000 25%, #ffce00 25%, #ffce00 75%, #dd0000 75%);
}
.language--flag.it_IT {
  background-position: 0 0;
  background-image: linear-gradient(to right, #009246 33%, #ffffff 33%, #ffffff 66%, #dd0000 66%);
}
/*
Tagcloud
=============================================
The tagcloud element shows recent keywords inside a box, ordered in importance by font-size.
```
<div class="panel has--border tagcloud--content">
    <div class="panel--body is--wide tagcloud">
        <a href="#" title="tagcloud-item" class="tag0">Tagcloud-Item</a>
        <a href="#" title="tagcloud-item" class="tag1">Tagcloud-Item</a>
        <a href="#" title="tagcloud-item" class="tag2">Tagcloud-Item</a>
        <a href="#" title="tagcloud-item" class="tag3">Tagcloud-Item</a>
    </div>
</div>
```
*/
.tagcloud a {
  color: #ffffff;
  margin: 0rem 0.625rem 0rem 0rem;
}
.tagcloud a:hover {
  color: #ffffff;
}
.tagcloud .tag0 {
  font-size: 1.3125rem;
  line-height: 1.3125rem;
}
.tagcloud .tag1 {
  font-size: 1rem;
  line-height: 1rem;
  font-weight: 700;
}
.tagcloud .tag2 {
  font-size: 0.875rem;
  line-height: 0.875rem;
}
.tagcloud .tag3 {
  font-size: 0.75rem;
  line-height: 0.75rem;
  font-weight: 700;
}
/*
Last-seen products element
=======================================================
The Last-seen products element fetches the recently viewed articles of the user and displays them inside a slider-element.

The slider contains a title element and a product box with the article-image and price.
*/
.last-seen-products {
  margin: 0.625rem 0rem 0rem 0rem;
  clear: both;
}
.last-seen-products:after {
  content: "";
  display: table;
  clear: both;
}
.last-seen-products .last-seen-products--title {
  padding: 0.625rem 0rem 0.625rem 0rem;
  border-bottom: 1px solid #648119;
  font-size: 1rem;
  display: block;
  font-weight: 700;
  color: #000000;
}
.last-seen-products--slider {
  border-radius: 3px;
  background-clip: padding-box;
  height: auto;
}
.last-seen-products--slider .product--box .product--title {
  text-align: center;
  margin: 0;
  padding: 0;
}
.last-seen-products--slider,
.last-seen-products--container {
  position: relative;
  overflow: hidden;
}
.last-seen-products--container {
  padding: 0.625rem 0rem 0.625rem 0rem;
}
.last-seen-products-item--image {
  line-height: 7.5rem;
  display: block;
}
.last-seen-products--item {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
}
@media screen and (min-width: 48em) {
  .last-seen-products {
    margin: 1.875rem 0rem 0rem 0rem;
  }
}
/*
Lightbox
=========================================
Defines the properties for the lightbox container and image elements.

The lightbox creates a fullscreen overlay to preview product images.

Both components are required in order to make the element work properly.
*/
.lightbox--container {
  display: block;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  position: relative;
}
.lightbox--image {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  vertical-align: middle;
}
/*
Lists
===============================
Example of the default styling for an unordered list.

The `ul` element has to have the `list--unordered` class assigned in order to work properly.

In addition there are 8 list style types Shopware 5 provides that you can choose from.

**Example:**<br/>
`<ul class="list--unordered is--checked">`

```
<ul class="list--unordered">
    <li>Default list</li>
</ul>

<ul class="list--unordered is--checked">
    <li>is--checked</li>
</ul>

<ul class="list--unordered is--disc">
    <li>is--disc</li>
</ul>

<ul class="list--unordered is--arrow-right">
    <li>is--arrow-right</li>
</ul>

<ul class="list--unordered is--star">
    <li>is--star</li>
</ul>

<ul class="list--unordered is--cross">
    <li>is--cross</li>
</ul>

<ul class="list--unordered is--tag">
    <li>is--tag</li>
</ul>

<ul class="list--unordered is--plus">
    <li>is--plus</li>
</ul>
```
*/
.list--unordered {
  padding-left: 1.25rem;
  list-style-type: none;
}
.list--unordered li {
  position: relative;
  line-height: 1.5rem;
}
.list--unordered li:before {
  width: 1.25rem;
  font-size: 0.625rem;
  left: -1.25rem;
  font-family: 'shopware';
  content: "\e6b9";
  position: absolute;
  top: 0;
}
.list--unordered.is--disc li {
  position: relative;
}
.list--unordered.is--disc li:before {
  width: 1.25rem;
  font-size: 0.625rem;
  left: -1.25rem;
  font-family: 'shopware';
  content: "\e656";
  position: absolute;
  top: 0;
}
.list--unordered.is--checked li {
  position: relative;
}
.list--unordered.is--checked li:before {
  width: 1.25rem;
  font-size: 0.625rem;
  left: -1.25rem;
  font-family: 'shopware';
  content: "\e60c";
  position: absolute;
  top: 0;
}
.list--unordered.is--arrow-right li {
  position: relative;
}
.list--unordered.is--arrow-right li:before {
  width: 1.25rem;
  font-size: 0.625rem;
  left: -1.25rem;
  font-family: 'shopware';
  content: "\e60f";
  position: absolute;
  top: 0;
}
.list--unordered.is--star li {
  position: relative;
}
.list--unordered.is--star li:before {
  width: 1.25rem;
  font-size: 0.625rem;
  left: -1.25rem;
  font-family: 'shopware';
  content: "\e600";
  position: absolute;
  top: 0;
}
.list--unordered.is--cross li {
  position: relative;
}
.list--unordered.is--cross li:before {
  width: 1.25rem;
  font-size: 0.625rem;
  left: -1.25rem;
  font-family: 'shopware';
  content: "\e60d";
  position: absolute;
  top: 0;
}
.list--unordered.is--tag li {
  position: relative;
}
.list--unordered.is--tag li:before {
  width: 1.25rem;
  font-size: 0.625rem;
  left: -1.25rem;
  font-family: 'shopware';
  content: "\e640";
  position: absolute;
  top: 0;
}
.list--unordered.is--plus li {
  position: relative;
}
.list--unordered.is--plus li:before {
  width: 1.25rem;
  font-size: 0.625rem;
  left: -1.25rem;
  font-family: 'shopware';
  content: "\e689";
  position: absolute;
  top: 0;
}
.list--unstyled {
  list-style: none;
}
.list--inline {
  list-style: none;
}
.list--inline li {
  display: inline;
}
/*
Image slider element
============================================
Defines the styles for the image slider element that is a part of the basic Shopware 5 shopping world elements.

The element can be added by using the Shopware 5 backend shopping world editor.

The element contains thumbnail image previews, navigation dots and navigation arrows to change the current active image.

It contains the viewport specific styles inside media queries.
*/
.image-slider {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: block;
  z-index: 1000;
  position: relative;
}
.image-slider:after {
  content: "";
  display: table;
  clear: both;
}
.force--3d {
  backface-visibility: hidden;
}
.image-slider--container {
  height: 12.5rem;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: block;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
}
.image-slider--container .arrow {
  width: 1.875rem;
  height: 4.375rem;
  margin-top: -2.1875rem;
  line-height: 4.25rem;
  font-size: 1rem;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 50%;
  z-index: 1000;
  font-family: 'shopware';
  text-align: center;
  color: #ffffff;
  cursor: pointer;
  display: none;
}
.image-slider--container .arrow.is--left {
  left: 0rem;
  border-top-left-radius: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 0;
  background-clip: padding-box;
}
.image-slider--container .arrow.is--left:before,
.image-slider--container .arrow.is--left::before {
  content: "\e611";
}
.image-slider--container .arrow.is--right {
  right: 0rem;
  border-top-left-radius: 3px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 3px;
  background-clip: padding-box;
}
.image-slider--container .arrow.is--right:before {
  content: "\e60f";
}
.image-slider--container .arrow:hover {
  color: #48a2e7;
  border-color: rgba(72, 162, 231, 0.5);
}
.image-slider--container.is--dragging .image-slider--item {
  cursor: move;
}
.image-slider--slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: block;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
  white-space: nowrap;
  font-size: 0;
  -ms-touch-action: pan-y;
}
.image-slider--slide:after {
  content: "";
  display: table;
  clear: both;
}
.image-slider--item {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: inline-block;
  height: 100%;
  width: 100%;
  position: relative;
  text-align: center;
  cursor: pointer;
}
.image-slider--item .image--element {
  display: inline-block;
  max-width: 100%;
  height: 100%;
}
.image-slider--item .image--media {
  margin: 0 auto;
  text-align: center;
}
.image-slider--item .image--media.image--svg img {
  height: 100%;
}
.image-slider--dots {
  padding: 0.625rem 0rem 0.625rem 0rem;
  text-align: center;
}
.image-slider--thumbnails {
  height: 4.375rem;
  top: 27.5rem;
  display: none;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  left: 0;
}
.image-slider--thumbnails .image-slider--thumbnails-slide {
  position: absolute;
  top: 0;
  left: 0;
}
.image-slider--thumbnails .thumbnail--link {
  width: 4.375rem;
  height: 4.375rem;
  padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem;
  margin: 0rem 0.625rem 0rem 0rem;
  line-height: 3.5625rem;
  border-radius: 3px;
  background-clip: padding-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: inline-block;
  text-align: center;
  border: 1px solid #96c126;
}
.image-slider--thumbnails .thumbnail--link.is--active {
  border-color: #48a2e7;
}
.image-slider--thumbnails .thumbnail--image {
  display: inline;
  vertical-align: middle;
}
.image-slider--thumbnails .thumbnails--arrow {
  width: 1.25rem;
  height: 4.375rem;
  line-height: 4.375rem;
  font-size: 0.875rem;
  border-radius: 3px;
  background-clip: padding-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background-color: #ffffff;
  background-image: linear-gradient(to bottom, #ffffff 0%, #fbfbfb 100%);
  display: none;
  position: absolute;
  z-index: 1000;
  font-family: 'shopware';
  text-align: center;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.85);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.85);
}
.image-slider--thumbnails .thumbnails--arrow:hover {
  color: #48a2e7;
  border-color: rgba(72, 162, 231, 0.85);
}
.image-slider--thumbnails .thumbnails--arrow.is--top,
.image-slider--thumbnails .thumbnails--arrow.is--bottom {
  font-size: 0.5rem;
  width: 4.375rem;
  height: 1.5rem;
  padding: 0.125rem 0rem 0rem 0rem;
  line-height: 1.125rem;
  left: 0;
}
.image-slider--thumbnails .thumbnails--arrow.is--top {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  background-clip: padding-box;
  top: 0;
}
.image-slider--thumbnails .thumbnails--arrow.is--top::before {
  content: "\e610";
}
.image-slider--thumbnails .thumbnails--arrow.is--bottom {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-clip: padding-box;
  bottom: 0;
}
.image-slider--thumbnails .thumbnails--arrow.is--bottom::before {
  content: "\e612";
}
.image-slider--thumbnails .thumbnails--arrow.is--left {
  border-top-left-radius: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 0;
  background-clip: padding-box;
  width: 1.5rem;
  top: 0;
  left: 0;
}
.image-slider--thumbnails .thumbnails--arrow.is--left::before {
  content: "\e611";
}
.image-slider--thumbnails .thumbnails--arrow.is--right {
  border-top-left-radius: 3px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 3px;
  background-clip: padding-box;
  width: 1.5rem;
  top: 0;
  right: 0;
}
.image-slider--thumbnails .thumbnails--arrow.is--right::before {
  content: "\e60f";
}
.image-slider--thumbnails .thumbnails--arrow.is--active {
  display: block;
}
@media screen and (min-width: 48em) {
  .image-slider--container {
    height: 25rem;
  }
  .image-slider--container .arrow {
    display: block;
  }
}
@media screen and (min-width: 64em) {
  .image-slider--thumbnails {
    display: block;
  }
  .image-slider--container {
    height: 25rem;
    margin-bottom: 6.875rem;
  }
  .image-slider--container.no--thumbnails {
    margin-bottom: 0;
  }
  .image-slider--container.no--image .image-slider--item {
    cursor: default;
  }
  .image-slider--dots {
    top: 25.3125rem;
    position: absolute;
    width: 100%;
  }
}
@media screen and (min-width: 78.75em) {
  .image-slider--container {
    height: 26.875rem;
    margin-bottom: 0;
  }
  .image-slider--thumbnails {
    width: 4.375rem;
    height: 26.875rem;
    margin: 0rem 1.25rem 0rem 0rem;
    position: relative;
    top: 0;
    left: 0;
    float: left;
  }
  .image-slider--thumbnails .thumbnail--link {
    margin: 0rem 0rem 1.25rem 0rem;
    display: block;
  }
  .image-slider--dots {
    padding: 0.625rem 0rem 0.625rem 5.625rem;
    position: relative;
    top: auto;
    display: block;
  }
}
/*
Image-zoom
====================================================
Defines the styles for the Shopware 5 image-zoom element.

It displays a magnifying glass when hovering the article images on the product detail page.

The functionality is provided by the `jquery.image-zoom.js` file.
*/
.js--img-zoom--container {
  position: relative;
  top: 0;
  left: 0;
}
.js--img-zoom--lens {
  border-radius: 3px;
  background-clip: padding-box;
  display: none;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid #96c126;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}
.js--img-zoom--flyout {
  width: 28.75rem;
  height: 21.25rem;
  right: -30.625rem;
  border-radius: 3px;
  background-clip: padding-box;
  display: none;
  position: absolute;
  top: 0;
  z-index: 2500;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid #96c126;
}
.js--img-zoom--title {
  padding: 0.3125rem 1.25rem 0.3125rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1rem;
  background-color: #96c126;
  background-image: linear-gradient(to bottom, #96c126 0%, #648119 100%);
  color: #fff;
  font-weight: 700;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
}
/*
Menu scroller
==================================
Some styling rules can also be found in the hacks.less!
*/
.js--menu-scroller {
  position: relative;
}
.navigation--list-wrapper {
  position: relative;
  overflow: hidden;
}
.js--menu-scroller--list {
  max-width: none;
  overflow-x: scroll;
  position: relative;
  white-space: nowrap;
  left: 0;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
}
.js--menu-scroller--list::-webkit-scrollbar {
  display: none;
}
.js--menu-scroller--arrow {
  width: 1.375rem;
  height: 2.3125rem;
  line-height: 2.25rem;
  font-size: 0.75rem;
  background-color: #ffffff;
  background-image: linear-gradient(to bottom, #ffffff 0%, #fbfbfb 100%);
  top: 0.0625rem;
  border: 1px solid #96c126;
  position: absolute;
  font-family: 'shopware';
  text-align: center;
  color: #ffffff;
  cursor: pointer;
  z-index: 750;
  display: none;
}
.js--menu-scroller--arrow:hover,
.js--menu-scroller--arrow:active {
  color: #48a2e7;
  border-color: #48a2e7;
  background: #ffffff;
}
.js--menu-scroller--arrow.left--arrow {
  border-top-left-radius: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 0;
  background-clip: padding-box;
  border-left: 0 none;
  left: 0;
}
.js--menu-scroller--arrow.right--arrow {
  border-top-left-radius: 3px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 3px;
  background-clip: padding-box;
  border-right: 0 none;
  right: 0;
}
@media screen and (min-width: 78.75em) {
  .js--menu-scroller--arrow.left--arrow {
    border-radius: 3px;
    background-clip: padding-box;
    border: 1px solid #96c126;
    left: 0;
  }
  .js--menu-scroller--arrow.left--arrow:hover {
    border-color: #48a2e7;
  }
  .js--menu-scroller--arrow.right--arrow {
    border-radius: 3px;
    background-clip: padding-box;
    border: 1px solid #96c126;
    right: 0;
  }
  .js--menu-scroller--arrow.right--arrow:hover {
    border-color: #48a2e7;
  }
}
/*
Filter Panel
===========================================
Defines the styling of the filter panel element.

The styling includes the collapsed and expanded styling and the panel component properties.
```
<div class="filter-panel">
    <div class="filter-panel--flyout">

        <label class="filter-panel--title">
        Preis
        </label>

        <span class="filter-panel--icon"></span>

        <div class="filter-panel--content">
        test test
        </div>

    </div>
</div>
```
*/
.filter-panel {
  height: 2.375rem;
  margin-bottom: 0.625rem;
  border-radius: 3px;
  background-clip: padding-box;
  background-color: #ffffff;
  background-image: linear-gradient(to bottom, #ffffff 0%, #fbfbfb 100%);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: block;
  position: relative;
  border: 1px solid #96c126;
}
.filter-panel:hover {
  border: 1px solid #48a2e7;
  background: #FFF;
}
.filter-panel:hover .filter-panel--icon,
.filter-panel:hover .filter-panel--title {
  color: #48a2e7;
}
.filter-panel.is--disabled {
  background-color: #ffffff;
  background-image: linear-gradient(to bottom, #ffffff 0%, #fbfbfb 100%);
  opacity: 0.5;
  border: 1px solid #96c126;
  color: #ffffff;
}
.filter-panel.is--disabled:hover {
  border: 1px solid #96c126;
  color: #ffffff;
}
.filter-panel.is--disabled:hover .filter-panel--icon,
.filter-panel.is--disabled:hover .filter-panel--title {
  color: #ffffff;
}
.filter-panel.is--disabled .filter-panel--title {
  color: #ffffff;
}
.filter-panel.is--collapsed {
  height: auto;
  border: 0 none;
}
.filter-panel.is--collapsed .filter-panel--flyout {
  height: auto;
  border: 1px solid #48a2e7;
  background: #FFF;
  overflow: visible;
  z-index: 800;
}
.filter-panel.is--collapsed .filter-panel--title {
  color: #48a2e7;
}
.filter-panel.is--collapsed .filter-panel--icon:before {
  color: #48a2e7;
  content: "\e610";
}
.filter-panel .flatpickr-wrapper {
  position: relative;
  display: block;
}
.filter-panel .flatpickr-wrapper .flatpickr-calendar.static {
  top: 2.8125rem;
  display: block;
  width: 100%;
}
.filter-panel .flatpickr-wrapper .flatpickr-calendar.static .flatpickr-rContainer {
  display: block;
}
.filter-panel .flatpickr-wrapper .flatpickr-calendar.static .flatpickr-innerContainer {
  display: block;
  width: 100%;
}
.filter-panel .flatpickr-wrapper .flatpickr-calendar.static .flatpickr-innerContainer .flatpickr-days {
  width: 100%;
}
.filter-panel--flyout {
  height: 2.375rem;
  border-radius: 3px;
  background-clip: padding-box;
  display: block;
  width: 100%;
  overflow: hidden;
  z-index: 500;
}
.filter-panel--title {
  height: 2.25rem;
  line-height: 2.25rem;
  padding: 0rem 1.875rem 0rem 0.625rem;
  margin: 0rem 0rem 0.3125rem 0rem;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.filter-panel--icon {
  width: 1rem;
  height: 1rem;
  top: 0.5rem;
  right: 0.625rem;
  font-size: 0.375rem;
  line-height: 1rem;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: inline-block;
  position: absolute;
  font-family: 'shopware';
  text-align: center;
  cursor: pointer;
  pointer-events: none;
}
.filter-panel--icon:before {
  content: "\e612";
}
.filter-panel--content {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  display: block;
}
.filter-panel--option-list {
  padding-bottom: 0.3125rem;
  list-style: none;
}
.filter-panel--option-list.sub-level {
  margin: 0rem 0rem 0rem 0.5rem;
  padding: 0rem 0rem 0rem 1.125rem;
  border-left: 1px solid #96c126;
}
.filter-panel--option {
  display: block;
  position: relative;
}
.value-tree--option {
  margin: 0rem 0rem 0.625rem 0rem;
}
.sub-level .value-tree--option {
  margin: 0;
}
.filter-panel--label {
  padding: 0.25rem 0rem 0.25rem 1.875rem;
  line-height: 1.125rem;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: block;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filter-panel--range-info {
  padding: 0.625rem 0rem 0.3125rem 0rem;
  text-align: center;
}
.filter-panel--range-info .range-info--label {
  color: #000000;
  font-weight: 700;
}
.filter--date .input-type--date .filter-panel--input {
  display: block;
  width: 100%;
}
.filter-panel--checkbox,
.filter-panel--radio {
  width: 1rem;
  height: 1rem;
  padding: 0.0625rem 0.0625rem 0.0625rem 0.0625rem;
  border-radius: 3px;
  background-clip: padding-box;
  display: inline-block;
  border: 1px solid #96c126;
  cursor: pointer;
  position: relative;
  vertical-align: top;
}
.filter-panel--checkbox:hover,
.filter-panel--radio:hover {
  border-color: #48a2e7;
}
.filter-panel--checkbox input[type="checkbox"],
.filter-panel--radio input[type="checkbox"] {
  opacity: 0;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0 none;
  background: none;
  cursor: pointer;
  z-index: 65;
}
.filter-panel--checkbox input[type="checkbox"]:checked ~ .input--state,
.filter-panel--radio input[type="checkbox"]:checked ~ .input--state,
.filter-panel--checkbox input[type="checkbox"]:checked ~ .checkbox--state,
.filter-panel--radio input[type="checkbox"]:checked ~ .checkbox--state {
  background-color: #7abef2;
  background-image: linear-gradient(to bottom, #7abef2 0%, #48a2e7 100%);
}
.filter-panel--checkbox input[type="checkbox"]:checked ~ .input--state:before,
.filter-panel--radio input[type="checkbox"]:checked ~ .input--state:before,
.filter-panel--checkbox input[type="checkbox"]:checked ~ .checkbox--state:before,
.filter-panel--radio input[type="checkbox"]:checked ~ .checkbox--state:before {
  width: 0.75rem;
  height: 0.75rem;
  line-height: 0.75rem;
  font-size: 0.4375rem;
  display: block;
  font-family: 'shopware';
  font-weight: 500;
  text-align: center;
  color: #fff;
  content: "\e60c";
}
.filter-panel--checkbox input[type="checkbox"]:checked ~ .filter-panel--label,
.filter-panel--radio input[type="checkbox"]:checked ~ .filter-panel--label {
  color: #48a2e7;
  font-weight: 700;
}
.filter-panel--checkbox input[type="checkbox"]:disabled ~ .input--state,
.filter-panel--radio input[type="checkbox"]:disabled ~ .input--state,
.filter-panel--checkbox input[type="checkbox"]:disabled ~ .checkbox--state,
.filter-panel--radio input[type="checkbox"]:disabled ~ .checkbox--state {
  background: #f8f8f8;
}
.filter-panel--checkbox input[type="checkbox"]:disabled ~ .filter-panel--label,
.filter-panel--radio input[type="checkbox"]:disabled ~ .filter-panel--label {
  color: #ffffff;
}
.filter-panel--checkbox .input--state,
.filter-panel--radio .input--state,
.filter-panel--checkbox .checkbox--state,
.filter-panel--radio .checkbox--state,
.filter-panel--checkbox .radio--state,
.filter-panel--radio .radio--state {
  border-radius: 3px;
  background-clip: padding-box;
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 60;
}
.filter-panel--checkbox.filter-panel--radio,
.filter-panel--radio.filter-panel--radio {
  border-radius: 11px;
  background-clip: padding-box;
}
.filter-panel--checkbox input[type="radio"],
.filter-panel--radio input[type="radio"] {
  opacity: 0;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0 none;
  background: none;
  cursor: pointer;
  z-index: 65;
}
.filter-panel--checkbox input[type="radio"]:checked ~ .input--state,
.filter-panel--radio input[type="radio"]:checked ~ .input--state,
.filter-panel--checkbox input[type="radio"]:checked ~ .radio--state,
.filter-panel--radio input[type="radio"]:checked ~ .radio--state {
  background-color: #7abef2;
  background-image: linear-gradient(to bottom, #7abef2 0%, #48a2e7 100%);
}
.filter-panel--checkbox input[type="radio"]:checked ~ .filter-panel--label,
.filter-panel--radio input[type="radio"]:checked ~ .filter-panel--label {
  color: #48a2e7;
  font-weight: 700;
}
.filter-panel--checkbox input[type="radio"]:disabled .input--state,
.filter-panel--radio input[type="radio"]:disabled .input--state,
.filter-panel--checkbox input[type="radio"]:disabled .radio--state,
.filter-panel--radio input[type="radio"]:disabled .radio--state {
  background: #f8f8f8;
}
.filter-panel--checkbox input[type="radio"]:disabled .filter-panel--label,
.filter-panel--radio input[type="radio"]:disabled .filter-panel--label {
  color: #ffffff;
}
.filter-panel--checkbox input[type="radio"] + .input--state,
.filter-panel--radio input[type="radio"] + .input--state,
.filter-panel--checkbox input[type="radio"] + .radio--state,
.filter-panel--radio input[type="radio"] + .radio--state {
  border-radius: 11px;
  background-clip: padding-box;
}
.input-type--media:after {
  content: "";
  display: table;
  clear: both;
}
.input-type--media .option--container {
  height: 2.8125rem;
  max-width: 2.8125rem;
  width: 18%;
  margin: 0 0 2% 2%;
  display: block;
  position: relative;
  float: left;
}
.input-type--media .option--container .filter-panel--label {
  padding: 0;
}
.input-type--media .option--container input.is--disabled ~ label {
  opacity: 0.2;
}
.input-type--media .option--container input[type="checkbox"],
.input-type--media .option--container input[type="radio"] {
  opacity: 0;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0 none;
  background: none;
  cursor: pointer;
  z-index: 65;
}
.input-type--media .option--container input[type="checkbox"]:hover ~ .filter-panel--label,
.input-type--media .option--container input[type="radio"]:hover ~ .filter-panel--label {
  border-color: #48a2e7;
}
.input-type--media .option--container input[type="checkbox"]:checked ~ .filter-panel--label,
.input-type--media .option--container input[type="radio"]:checked ~ .filter-panel--label {
  border-color: #48a2e7;
}
.input-type--media .option--container input[type="checkbox"]:checked ~ .filter-panel--label:after,
.input-type--media .option--container input[type="radio"]:checked ~ .filter-panel--label:after {
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  font-size: 0.4375rem;
  top: -0.25rem;
  right: -0.25rem;
  background-color: #7abef2;
  background-image: linear-gradient(to bottom, #7abef2 0%, #48a2e7 100%);
  border-radius: 8px;
  background-clip: padding-box;
  display: block;
  position: absolute;
  font-family: 'shopware';
  font-weight: 500;
  text-align: center;
  color: #fff;
  content: "\e60c";
}
.input-type--media .option--container input[type="checkbox"]:disabled .filter-panel--label,
.input-type--media .option--container input[type="radio"]:disabled .filter-panel--label {
  opacity: 0.2;
}
.filter--multi-selection .option--container:hover .filter-panel--label,
.filter--value .option--container:hover .filter-panel--label,
.filter--value-tree .option--container:hover .filter-panel--label {
  color: #48a2e7;
}
.filter--multi-selection .option--container:hover .filter-panel--input,
.filter--value .option--container:hover .filter-panel--input,
.filter--value-tree .option--container:hover .filter-panel--input {
  border-color: #48a2e7;
}
.filter--multi-selection .option--container:hover .filter-panel--input.is--disabled,
.filter--value .option--container:hover .filter-panel--input.is--disabled,
.filter--value-tree .option--container:hover .filter-panel--input.is--disabled {
  border-color: #96c126;
}
.filter--multi-selection .filter-panel--checkbox,
.filter--value .filter-panel--checkbox,
.filter--value-tree .filter-panel--checkbox,
.filter--multi-selection .filter-panel--radio,
.filter--value .filter-panel--radio,
.filter--value-tree .filter-panel--radio {
  top: 0.3125rem;
  left: 0rem;
  position: absolute;
}
.filter--multi-selection .filter-panel--checkbox.is--disabled ~ .filter-panel--label,
.filter--value .filter-panel--checkbox.is--disabled ~ .filter-panel--label,
.filter--value-tree .filter-panel--checkbox.is--disabled ~ .filter-panel--label,
.filter--multi-selection .filter-panel--radio.is--disabled ~ .filter-panel--label,
.filter--value .filter-panel--radio.is--disabled ~ .filter-panel--label,
.filter--value-tree .filter-panel--radio.is--disabled ~ .filter-panel--label {
  color: #e1e1e1;
}
.filter--multi-selection .filter-panel--checkbox.is--disabled:hover,
.filter--value .filter-panel--checkbox.is--disabled:hover,
.filter--value-tree .filter-panel--checkbox.is--disabled:hover,
.filter--multi-selection .filter-panel--radio.is--disabled:hover,
.filter--value .filter-panel--radio.is--disabled:hover,
.filter--value-tree .filter-panel--radio.is--disabled:hover {
  border-color: #96c126;
}
.filter-panel--star-rating {
  height: 5.625rem;
  margin-bottom: 0.625rem;
  position: relative;
}
.filter-panel--star-rating:after {
  content: "";
  display: table;
  clear: both;
}
.filter-panel--star-rating .rating-star--outer-container {
  width: 13.75rem;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}
.filter-panel--star-rating .rating-star--outer-container:after {
  content: "";
  display: table;
  clear: both;
}
.filter-panel--star-rating .rating-star--outer-container .icon--star,
.filter-panel--star-rating .rating-star--outer-container .icon--star-empty {
  font-size: 1.125rem;
}
.filter-panel--star-rating .rating-star--outer-container .icon--star {
  color: #f1c40f;
}
.filter-panel--star-rating .rating-star--outer-container .icon--star-empty {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  color: #e1e1e1;
}
.filter-panel--star-rating .rating-star--outer-container .rating-star--suffix {
  margin-left: 0.3125rem;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.filter-panel--star-rating .rating-star--outer-container.is--active .icon--star-empty {
  color: #ffffff;
}
.filter-panel--star-rating .rating-star--outer-container.is--active .rating-star--suffix {
  font-weight: 700;
}
.filter-panel--star-rating .rating-star--outer-container.is--disabled {
  opacity: 0.3;
}
.filter-panel--star-rating .rating-star--outer-container:hover .icon--star-empty {
  color: #ffffff;
}
.filter-panel--star-rating .rating-star--outer-container:hover .rating-star--suffix {
  color: #48a2e7;
}
.filter-panel--star-rating .rating-star--outer-container:hover .is--disabled ~ .icon--star-empty {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  color: #e1e1e1;
}
.filter-panel--star-rating .rating-star--outer-container:hover .is--disabled ~ .rating-star--suffix {
  color: #ffffff;
}
.filter--set-title {
  margin: 1.875rem 0rem 0.625rem 0rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  margin-left: 1%;
  margin-right: 1%;
  border-bottom: 1px solid #96c126;
  clear: both;
}
.filter--value {
  background: #fff;
}
.filter--value .filter-panel--input {
  top: 0.625rem;
  left: 0.625rem;
}
.filter--value .filter-panel--title {
  padding: 0rem 1.875rem 0rem 2.5rem;
}
.filter--value.is--disabled .filter-panel--input:hover {
  border-color: #96c126;
}
.filter--range .filter-panel--content {
  padding: 0.625rem 1.25rem 0.625rem 1.25rem;
}
.filter--active-container {
  padding: 1.25rem 0rem 0rem 0rem;
}
.filter--active,
.search--cat-filter .cat-filter--reset,
.search--cat-filter .cat-filter--reset {
  padding: 0rem 0.625rem 0rem 0.625rem;
  margin: 0rem 0.625rem 0.625rem 0rem;
  line-height: 1.5rem;
  font-size: 0.8125rem;
  border-radius: 3px;
  background-clip: padding-box;
  display: inline-block;
  border: 1px solid #96c126;
  color: #ffffff;
  background: #FFF;
  cursor: pointer;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filter--active .filter--active-icon {
  margin: 0rem 0.625rem 0rem 0rem;
  font-size: 0.5rem;
  top: -0.0625rem;
  position: relative;
  font-family: 'shopware';
  color: #ffffff;
}
.filter--active .filter--active-icon:before {
  content: "\e60d";
}
.filter--active .icon--star {
  color: #f1c40f;
}
.filter--active .icon--star-empty {
  color: #ffffff;
}
.filter--active:hover,
.filter--active[data-filter-param="reset"] {
  color: #48a2e7;
  border-color: #48a2e7;
}
.filter--active:hover .filter--active-icon,
.filter--active[data-filter-param="reset"] .filter--active-icon {
  color: #48a2e7;
}
.action--filter-options.off-canvas.is--open .filter--active {
  max-width: 100%;
}
.filter--actions {
  padding: 0.625rem 0rem 0.625rem 0rem;
  margin-bottom: 0.625rem;
  clear: both;
}
.filter--btn-apply {
  position: relative;
  font-weight: 700;
  width: 100%;
}
.filter--btn-apply.is--icon-right [class^="icon--"] {
  font-size: 0.875rem;
  line-height: 1rem;
  margin: -0.5rem 0rem 0rem 0rem;
}
.filter--btn-apply.is--loading [class^="icon--"] {
  -webkit-animation: keyframe--spin-reverse 1s linear infinite;
  animation: keyframe--spin-reverse 1s linear infinite;
}
.filter--btn-apply .filter--count {
  font-weight: 700;
}
.filter--facet-container {
  padding: 0.625rem 0rem 0rem 0rem;
}
.filter--facet-container:after {
  content: "";
  display: table;
  clear: both;
}
.action--filter-options.is--active-filter .filter--active-container {
  padding: 0.9375rem 0rem 0.3125rem 0rem;
  display: block;
}
.filter--active-container {
  display: none;
}
.listing--wrapper {
  width: 100%;
}
.listing--wrapper.has--sidebar-filter .listing--paging {
  clear: both;
}
.listing--wrapper.has--sidebar-filter .action--filter-btn {
  display: block;
}
.listing--wrapper.has--sidebar-filter .action--sort {
  line-height: 2rem;
  margin: 0rem 0.625rem 0.625rem 0rem;
  width: 100%;
}
.listing--wrapper.has--sidebar-filter .action--sort .sort--label {
  display: none;
}
.listing--wrapper.has--sidebar-filter .action--sort .sort--select {
  width: 100%;
  vertical-align: top;
}
.listing--wrapper .filter--actions.filter--actions-top {
  margin: 0;
}
.listing--wrapper.with--fullscreen-emotion .sidebar-main.off-canvas {
  padding-top: 0;
}
.listing--wrapper.with--fullscreen-emotion .listing--wrapper-inner {
  margin-left: 16.25rem;
}
@media screen and (min-width: 48em) {
  .filter-panel {
    width: 49%;
    margin-left: 1%;
    float: left;
  }
  .filter-panel.is--collapsed {
    height: 2.375rem;
  }
  .filter-panel .flatpickr-wrapper {
    position: static;
  }
  .filter-panel .flatpickr-wrapper .flatpickr-calendar.static {
    top: 100%;
  }
  .is--no-sidebar .filter-panel {
    width: 32%;
  }
  .filter-panel--flyout {
    position: absolute;
    top: 0;
    left: 0;
  }
  .filter-panel--content {
    max-height: 12.5rem;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .filter--active-container {
    padding: 0;
    margin-left: 1%;
    margin-right: 1%;
  }
  .filter--active-container.is--disabled .filter--active:not([data-filter-param="reset"]),
  .filter--active-container.is--disabled .filter--active:not([data-filter-param="reset"]):hover {
    color: #ffffff;
    border-color: #96c126;
    cursor: default;
  }
  .filter--active-container.is--disabled .filter--active:not([data-filter-param="reset"]) .filter--active-icon,
  .filter--active-container.is--disabled .filter--active:not([data-filter-param="reset"]):hover .filter--active-icon {
    color: #ffffff;
  }
  .filter--active-container.is--disabled .filter--active:not([data-filter-param="reset"]) .filter--active-icon:before,
  .filter--active-container.is--disabled .filter--active:not([data-filter-param="reset"]):hover .filter--active-icon:before {
    content: "\e60c";
  }
  .filter--actions {
    margin-left: 1%;
    margin-right: 1%;
  }
  .filter--btn-apply {
    width: auto;
  }
  .filter--facet-container,
  .filter--actions-bottom {
    display: none;
  }
  .filter--actions.filter--actions-top {
    display: none;
  }
  .listing--wrapper.has--sidebar-filter .action--filter-btn {
    display: none;
  }
  .listing--wrapper.has--sidebar-filter .action--sort .sort--select {
    max-width: 12.5rem;
    vertical-align: top;
  }
}
@media screen and (min-width: 64em) {
  .filter-panel {
    width: 32%;
  }
}
@media screen and (min-width: 78.75em) {
  .filter-panel--star-rating .rating-star--input {
    width: 1.25rem;
    height: 1.25rem;
  }
  .filter-panel--star-rating .rating-star--label {
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
    font-size: 1.25rem;
  }
  .listing--wrapper.has--sidebar-filter .action--sort .sort--label {
    margin: 0rem 0.625rem 0rem 0rem;
    display: inline-block;
    font-weight: 700;
  }
}
/*
Range Slider
==========================================
######Range Slider
The range slider element lets the user filter elements by a price-span they decide on.

The slider handlers can be dragged to the numeric value that the user intends. The value is displayed below the element.

The functionality is provided by the `jquery.range-slider.js` file.
```
<div class="range-slider" data-range-slider="true" data-startmin="37.99" data-startmax="349.99" data-rangemin="37.99" data-rangemax="349.99">
    <div class="range-slider--container">
        <div class="range-slider--range-bar" style="left: 0%; width: 100%;">
            <div class="range-slider--handle is--min"></div>
            <div class="range-slider--handle is--max"></div>
        </div>
    </div>
    <input type="hidden" id="min" name="min" data-range-input="min" value="37.99" disabled="disabled">
    <input type="hidden" id="max" name="max" data-range-input="max" value="349.99" disabled="disabled">
    <div class="range-slider--currency" data-range-currency="0,00&nbsp;€"></div>
    <div class="filter-panel--range-info">
        <span class="range-info--min">von</span>
        <label class="range-info--label" for="min" data-range-label="min">35,00&nbsp;€</label>
        <span class="range-info--max">bis</span>
        <label class="range-info--label" for="max" data-range-label="max">350,00&nbsp;€</label>
    </div>
</div>
```
*/
.range-slider {
  -webkit-touch-callout: none;
}
.range-slider--container {
  height: 0.75rem;
  border-radius: 6px;
  background-clip: padding-box;
  display: block;
  width: 100%;
  background: #f8f8f8;
  box-shadow: inset 0 1px 1px #f0f0f0;
  border: 1px solid #96c126;
  -ms-touch-action: none;
}
.range-slider--range-bar {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  box-shadow: inset 0 0 3px #44a0e7;
  height: 100%;
  width: 100%;
  position: relative;
  background: #48a2e7;
}
.range-slider--handle {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 3px;
  background-clip: padding-box;
  background-color: #ffffff;
  background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: absolute;
  border: 1px solid #96c126;
  cursor: pointer;
}
.range-slider--handle.is--min {
  left: -0.625rem;
  top: -0.25rem;
}
.range-slider--handle.is--max {
  right: -0.625rem;
  top: -0.25rem;
}
.range-slider--handle:hover,
.range-slider--handle.is--dragging {
  border-color: #48a2e7;
}
.range-slider--format {
  display: none;
}
/*
Datepicker
=========================================
The datepicker is a calendar overlay tool that simplyfies the selection of dates for input elements.
It creates a calendar widget that simplifies the selection of dates for date input elements.

The datepicker is based on the jQuery Plugin [flatpickr](https://github.com/chmln/flatpickr).
*/
.flatpickr-calendar {
  width: 19.6875rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  border-radius: 5px;
  background-clip: padding-box;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  text-align: center;
  padding: 0;
  animation: none;
  direction: ltr;
  border: 0;
  position: absolute;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 1px 0 0 #e1e1e1, -1px 0 0 #e1e1e1, 0 1px 0 #e1e1e1, 0 -1px 0 #e1e1e1, 0 3px 13px rgba(0, 0, 0, 0.2);
}
.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  max-height: 40rem;
  opacity: 1;
  visibility: visible;
  overflow: visible;
}
.flatpickr-calendar.open {
  display: inline-block;
  animation: flatpickrFadeInDown 300ms cubic-bezier(0, 1, 0.5, 1);
  z-index: 8100;
}
.flatpickr-calendar.inline {
  top: 0.125rem;
  display: block;
  position: relative;
}
.flatpickr-calendar.static {
  position: absolute;
  top: calc(102%);
}
.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}
.flatpickr-calendar.hasWeeks {
  width: auto;
}
.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
  height: 2.5rem;
  border-top: 1px solid #e6e6e6;
}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}
.flatpickr-calendar:before,
.flatpickr-calendar:after {
  left: 1.375rem;
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
}
.flatpickr-calendar.rightMost:before,
.flatpickr-calendar.rightMost:after {
  right: 1.375rem;
  left: auto;
}
.flatpickr-calendar:before {
  margin: 0rem -0.3125rem 0rem -0.3125rem;
  border-width: 5px;
}
.flatpickr-calendar:after {
  margin: 0rem -0.25rem 0rem -0.25rem;
  border-width: 4px;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  bottom: 100%;
}
.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #e6e6e6;
}
.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #fff;
}
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  top: 100%;
}
.flatpickr-calendar.arrowBottom:before {
  border-top-color: #e6e6e6;
}
.flatpickr-calendar.arrowBottom:after {
  border-top-color: #fff;
}
.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}
.flatpickr-month {
  height: 2.5rem;
  line-height: 1.5rem;
  -webkit-user-select: none;
  user-select: none;
  background: transparent;
  color: rgba(0, 0, 0, 0.9);
  fill: rgba(0, 0, 0, 0.9);
  text-align: center;
  position: relative;
}
.flatpickr-prev-month,
.flatpickr-next-month {
  height: 1rem;
  line-height: 1rem;
  top: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
}
.flatpickr-prev-month i,
.flatpickr-next-month i {
  position: relative;
}
.flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-next-month.flatpickr-prev-month {
  /*rtl:begin:ignore*/
  left: calc(2.07%);
  /*rtl:end:ignore*/
}
.flatpickr-prev-month.flatpickr-next-month,
.flatpickr-next-month.flatpickr-next-month {
  /*rtl:begin:ignore*/
  right: calc(2.07%);
  /*rtl:end:ignore*/
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  color: #959ea9;
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
  fill: #f64747;
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  width: 0.875rem;
}
.flatpickr-prev-month svg path,
.flatpickr-next-month svg path {
  transition: fill 0.1s;
  fill: inherit;
}
.numInputWrapper {
  position: relative;
  height: auto;
}
.numInputWrapper input,
.numInputWrapper span {
  display: inline-block;
}
.numInputWrapper input {
  width: 100%;
}
.numInputWrapper input::-ms-clear,
.numInputWrapper input::-ms-expand {
  display: none;
}
.numInputWrapper span {
  width: 0.875rem;
  padding: 0rem 0.25rem 0rem 0.125rem;
  position: absolute;
  right: 0;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(57, 57, 57, 0.05);
  box-sizing: border-box;
}
.numInputWrapper span:hover {
  background: rgba(0, 0, 0, 0.1);
}
.numInputWrapper span:active {
  background: rgba(0, 0, 0, 0.2);
}
.numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
  top: 33%;
}
.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
}
.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(57, 57, 57, 0.6);
}
.numInputWrapper span.arrowDown {
  top: 50%;
}
.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(57, 57, 57, 0.6);
}
.numInputWrapper span svg {
  width: inherit;
  height: auto;
}
.numInputWrapper span svg path {
  fill: rgba(0, 0, 0, 0.5);
}
.numInputWrapper:hover {
  background: rgba(0, 0, 0, 0.05);
}
.numInputWrapper:hover span {
  opacity: 1;
}
.flatpickr-current-month {
  top: 0.625rem;
  font-size: 135%;
  line-height: inherit;
  font-weight: 500;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  display: inline-block;
  text-align: center;
}
.flatpickr-current-month span.cur-month {
  margin-right: 0.625rem;
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  padding: 0;
  max-width: 50%;
}
.flatpickr-current-month .numInputWrapper {
  width: 4.375rem;
  display: inline-block;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(0, 0, 0, 0.9);
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(0, 0, 0, 0.9);
}
.flatpickr-current-month input.cur-year {
  background: transparent;
  box-sizing: border-box;
  color: inherit;
  cursor: default;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline;
  font-size: inherit;
  font-family: inherit;
  font-weight: 500;
  line-height: inherit;
  height: initial;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
}
.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}
.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(0, 0, 0, 0.5);
  background: transparent;
  pointer-events: none;
}
.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
}
.flatpickr-days,
.flatpickr-weeks {
  padding: 0.0625rem 0rem 0rem 0rem;
}
.flatpickr-days {
  width: 19.6875rem;
  padding: 0;
  outline: 0;
  text-align: left;
  box-sizing: border-box;
  display: inline-block;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: justify;
  justify-content: space-around;
}
.flatpickr-day {
  line-height: 2.5rem;
  height: 2.5rem;
  border-radius: 3px;
  background-clip: padding-box;
  background: none;
  border: 0 none;
  margin: 0;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  font-weight: 500;
  width: 14.2857143%;
  flex-basis: 14.2857143%;
  display: inline-block;
  position: relative;
  justify-content: center;
  text-align: center;
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange {
  cursor: pointer;
  outline: 0;
  background: #f8f8f8;
  border-color: #f8f8f8;
}
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #f8f8f8;
  border-color: #f8f8f8;
}
.flatpickr-day.today {
  border-color: #959ea9;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  border-color: #959ea9;
  background: #959ea9;
  color: #fff;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #48a2e7;
  color: #fff;
  border-color: #48a2e7;
}
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
  border-top-left-radius: 3px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 3px;
  background-clip: padding-box;
}
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
  border-top-left-radius: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 0;
  background-clip: padding-box;
}
.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
  border-radius: 3px;
  background-clip: padding-box;
}
.flatpickr-day.inRange {
  border-radius: 0;
  box-shadow: -5px 0 0 #f8f8f8, 5px 0 0 #f8f8f8;
}
.flatpickr-day.inRange.endRange {
  box-shadow: -5px 0 0 #f8f8f8;
}
.flatpickr-day.inRange.startRange {
  box-shadow: 5px 0 0 #f8f8f8;
}
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
  pointer-events: none;
}
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(57, 57, 57, 0.3);
  background: transparent;
  border-color: transparent;
  cursor: default;
}
span.flatpickr-weekday {
  line-height: 1.5rem;
  cursor: default;
  font-size: 90%;
  color: #000000;
  height: 27.333333333333332px;
  margin: 0;
  background: transparent;
  text-align: center;
  display: block;
  float: left;
  width: 14.28%;
  font-weight: 700;
  padding-top: 3.333333333333333px;
}
.rangeMode .flatpickr-day {
  margin-top: 0.0625rem;
}
.flatpickr-weekwrapper {
  display: inline-block;
  float: left;
}
.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0.0625rem 0.75rem 0rem 0.75rem;
  box-shadow: 1px 0 0 #e6e6e6;
}
.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
}
.flatpickr-weekwrapper span.flatpickr-day {
  display: block;
  width: 100%;
  max-width: none;
}
.flatpickr-innerContainer {
  display: block;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
}
.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  box-sizing: border-box;
}
.flatpickr-time {
  line-height: 2.5rem;
  max-height: 2.5rem;
  -webkit-transition: height 0.33s cubic-bezier(0, 1, 0.5, 1);
  transition: height 0.33s cubic-bezier(0, 1, 0.5, 1);
  display: block;
  display: flex;
  text-align: center;
  outline: 0;
  height: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
}
.flatpickr-time .numInputWrapper {
  height: 2.5rem;
  flex: 1;
  width: 40%;
  float: left;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #96c126;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #96c126;
}
.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
}
.flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
}
.flatpickr-time input {
  font-size: 0.875rem;
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  cursor: pointer;
  color: #ffffff;
  position: relative;
  box-sizing: border-box;
  text-align: center;
}
.flatpickr-time input::-ms-clear,
.flatpickr-time input::-ms-expand {
  display: none;
}
.flatpickr-time input.flatpickr-hour {
  font-weight: 700;
}
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
  font-weight: 500;
}
.flatpickr-time input:focus {
  outline: 0;
  border: 0;
}
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  -webkit-user-select: none;
  user-select: none;
  height: inherit;
  display: inline-block;
  float: left;
  line-height: inherit;
  color: #ffffff;
  font-weight: 700;
  width: 2%;
}
.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 500;
}
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
  background: #f0f0f0;
}
.hasWeeks .flatpickr-days,
.hasTime .flatpickr-days {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.hasWeeks .flatpickr-days {
  border-left: 0;
}
@media all and (-ms-high-contrast: none) {
  .flatpickr-month svg {
    top: 0 !important;
  }
}
.flatpickr-input[readonly] {
  cursor: pointer;
}
.slideRight,
.slideLeft {
  display: none;
}
@-moz-keyframes flatpickrFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes flatpickrFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-o-keyframes flatpickrFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes flatpickrFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/*
Collapse cart
=======================================
The collapse cart element is an alternative to the offcanvas shopping cart inside Shopware 5. The collapse cart displays a shopping cart dropdown element similar to the default Shopware 4 cart.

The Settings can be modified in the backend theme manager.

The collapse cart element contains the current items in the users shopping cart and the subtotal price amount.
*/
.container--ajax-cart {
  top: 3.125rem;
  margin-right: 0.625rem;
  padding: 0.9375rem 0rem 0rem 0rem;
  position: absolute;
  text-align: left;
  right: 0;
  z-index: 3000;
  display: none;
}
.container--ajax-cart.off-canvas {
  width: 17.5rem;
  -webkit-transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1);
  transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1);
  margin-right: 0;
  display: block;
  height: 100%;
  left: auto;
  position: fixed;
  top: 0;
  padding: 0;
  background: #fff;
  z-index: 8000;
}
.container--ajax-cart.off-canvas .icon--loading-indicator {
  width: 2.375rem;
  height: 2.375rem;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.container--ajax-cart .icon--loading-indicator {
  width: 1.3125rem;
  height: 1.3125rem;
  padding: 1.25rem 0rem 1.25rem 0rem;
  margin: 0 auto;
  display: block;
  position: relative;
  box-sizing: content-box;
}
.container--ajax-cart .icon--loading-indicator:before {
  border-radius: 100%;
  background-clip: padding-box;
  -webkit-animation: keyframe--spin 1s linear infinite;
  animation: keyframe--spin 1s linear infinite;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: block;
  content: "";
  border: 2px solid #CCC;
  border-top: 2px solid #333;
}
.container--ajax-cart .product--essential-features {
  margin-left: 3rem;
}
.ajax--cart {
  width: 28.125rem;
  border-radius: 3px;
  background-clip: padding-box;
  font-size: 0.875rem;
  border: 1px solid #96c126;
  position: relative;
  background: #fff;
}
.ajax--cart:after,
.ajax--cart:before {
  right: 0.625rem;
  bottom: 100%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ajax--cart:after {
  right: 0.6875rem;
  border-width: 0.5625rem;
  border-bottom-color: #fff;
}
.ajax--cart:before {
  border-width: 0.625rem;
  border-bottom-color: #96c126;
}
.ajax--cart .content--loader {
  width: 1.3125rem;
  height: 1.3125rem;
  padding: 1.25rem 0rem 1.25rem 0rem;
  box-sizing: content-box;
  margin: 0 auto;
}
.ajax--cart .item--container {
  padding: 0rem 0.625rem 0rem 0.625rem;
  max-height: 22.0625rem;
  overflow-y: auto;
}
.ajax--cart .alert {
  border-radius: 0;
  margin-bottom: 0.625rem;
}
.ajax--cart .alert .alert--icon,
.ajax--cart .alert .icon--element {
  width: 15%;
}
.ajax--cart .alert .alert--icon .is--warning,
.ajax--cart .alert .icon--element .is--warning {
  color: #f1c40f;
  background: #f9f3dd;
}
.ajax--cart .alert .alert--icon .is--success,
.ajax--cart .alert .icon--element .is--success {
  color: #2ecc71;
  background: #def2e7;
}
.ajax--cart .alert .alert--content {
  width: 85%;
}
.ajax--cart .cart--item {
  padding: 0.625rem 0rem 0.625rem 0rem;
  line-height: 2.375rem;
  border-bottom: 1px solid #96c126;
  overflow: hidden;
}
.ajax--cart .cart--item:last-child {
  border: 0 none;
}
.ajax--cart .cart--item.is--empty {
  padding-bottom: 0;
}
.ajax--cart .cart--item .thumbnail--container {
  margin: 0rem 0.625rem 0rem 0rem;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 3px;
  background-clip: padding-box;
  float: left;
  position: relative;
}
.ajax--cart .cart--item .thumbnail--container.has--image {
  border: 1px solid #96c126;
  background: #FFFFFF;
}
.ajax--cart .cart--item .thumbnail--container .cart--badge {
  border-top-left-radius: 3px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 3px;
  background-clip: padding-box;
  width: 0.875rem;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  background: #48a2e7;
}
.ajax--cart .cart--item .thumbnail--container .cart--badge .badge--free {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  font-size: 0.5rem;
  line-height: 0.75rem;
  width: 2.5rem;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  display: block;
  position: absolute;
  padding: 0;
  margin: 0;
  top: 0;
  bottom: 0;
}
.ajax--cart .cart--item .thumbnail--container .basket--badge {
  line-height: 2.3125rem;
  font-size: 0.75rem;
  border-radius: 100%;
  background-clip: padding-box;
  height: 2.1875rem;
  width: 2.1875rem;
  margin: 0 auto;
  text-align: center;
  font-weight: 700;
  background: #ffffff;
  color: #fff;
}
.ajax--cart .cart--item .thumbnail--container .basket--badge .icon--arrow-right {
  font-size: 0.625rem;
}
.ajax--cart .cart--item .thumbnail--container .basket--badge .icon--coupon {
  font-size: 1.25rem;
  line-height: 2.3125rem;
}
.ajax--cart .cart--item .thumbnail--image {
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.ajax--cart .cart--item .item--link {
  color: #ffffff;
}
.ajax--cart .cart--item .item--quantity {
  margin: 0rem 0.3125rem 0rem 0rem;
  font-weight: 700;
}
.ajax--cart .cart--item .item--price {
  font-weight: 700;
  float: right;
}
.ajax--cart .cart--item .action--container {
  width: 1.3125rem;
  height: 1.3125rem;
  margin: 0.625rem 0rem 0rem 0.625rem;
  line-height: 1;
  float: right;
}
.ajax--cart .cart--item .action--container .btn {
  height: 1.3125rem;
  width: 1.3125rem;
  padding: 0.25rem 0.3125rem 0.25rem 0.3125rem;
  font-size: 0.5rem;
  line-height: 0.875rem;
}
.ajax--cart .cart--item .action--container *[class*="icon--"] {
  margin: 0;
  padding: 0;
}
.ajax--cart .prices--container {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  border-top: 1px solid #96c126;
}
.ajax--cart .prices--container .prices--articles-amount {
  float: right;
}
.ajax--cart .prices--container .prices--articles {
  color: #000000;
  font-weight: 700;
}
.ajax--cart .prices--container .prices--tax {
  font-size: 12px;
  font-size: 0.75rem;
  margin: 0;
}
.ajax--cart .button--container {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  overflow: hidden;
}
.ajax--cart .button--container *[class*="button--"] {
  width: 13.125rem;
  border-radius: 3px;
  background-clip: padding-box;
  text-align: center;
}
.ajax--cart .button--container .button--checkout {
  float: right;
}
.ajax--cart .button--container .button--open-basket *[class^="icon--"] {
  display: none;
}
.ajax--cart .small--information {
  font-size: 0.75rem;
}
.ajax--cart .small--information .small--prices {
  float: right;
}
.ajax--cart .context--shipping-costs {
  margin-left: 0.625rem;
}
.ajax--cart .table--shipping-costs-trigger {
  font-size: 0.75rem;
  margin-bottom: 0.3125rem;
  font-weight: 700;
}
.ajax--cart .table--shipping-costs-trigger-no-action {
  font-size: 0.75rem;
  margin-bottom: 0.3125rem;
}
.ajax--cart .table--shipping-costs {
  font-size: 0.75rem;
}
.ajax--cart .table--shipping-costs .select-field {
  max-height: 2.5rem;
  margin: 0.3125rem 0.625rem 0.3125rem 0rem;
}
.ajax--cart .table--shipping-costs label {
  font-size: 0.75rem;
  font-weight: 700;
  margin: 0.3125rem 6.25rem 0rem 0rem;
  float: left;
}
.off-canvas .ajax--cart {
  font-size: 0.875rem;
  background: #fff;
  width: auto;
  position: absolute;
  left: 0;
  right: 0;
  border: 0 none;
  min-height: 100%;
}
.off-canvas .ajax--cart .item--container {
  max-height: none;
}
.off-canvas .ajax--cart .cart--item {
  line-height: 1.1875rem;
}
.off-canvas .ajax--cart .cart--item .item--link {
  width: 9.3125rem;
  display: inline-block;
}
.off-canvas .ajax--cart .cart--item .item--price {
  float: none;
  display: block;
}
.off-canvas .ajax--cart .prices--container {
  background: #fff;
  border-bottom: 0 none;
}
.off-canvas .ajax--cart .action--container,
.off-canvas .ajax--cart .action--container .action--remove {
  width: 2.375rem;
  height: 2.375rem;
}
.off-canvas .ajax--cart .action--container {
  margin: 0;
}
.off-canvas .ajax--cart .action--container .action--remove {
  font-size: 0.875rem;
  text-align: center;
  vertical-align: middle;
}
.off-canvas .ajax--cart .action--container .icon--loading-indicator {
  width: 1.3125rem;
  height: 1.3125rem;
  margin: 0.5625rem 0rem 0rem 0rem;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.off-canvas .ajax--cart .action--container *[class*="icon--"] {
  line-height: 1.75rem;
  margin: 0;
  padding: 0;
}
.off-canvas .ajax--cart .button--container {
  text-align: left;
}
.off-canvas .ajax--cart .button--container *[class*="button--"] {
  margin: 0.625rem 0rem 0rem 0rem;
  width: 100%;
}
.off-canvas .ajax--cart .button--container .button--checkout {
  margin: 0;
}
.off-canvas .ajax--cart .button--container .button--open-basket {
  padding-right: 1.875rem;
}
.off-canvas .ajax--cart .button--container .button--open-basket *[class^="icon--"] {
  display: block;
  right: 0.625rem;
}
.off-canvas .ajax--cart .product--essential-features {
  margin-top: 0.3125rem;
}
.product--essential-features {
  line-height: 1.125rem;
  font-size: 0.75rem;
}
@media screen and (min-width: 48em) {
  .container--ajax-cart.is--shown {
    display: block;
  }
}
@media screen and (min-width: 78.75em) {
  .container--ajax-cart {
    margin-right: 0;
  }
}
/*
Table
=========================
Defines the basic table styles.
```
<table>
 <th>
    <tr>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
    </tr>
 </th>
 <tb>
    <tr>
        <td>Table Content</td>
        <td>Table Content</td>
        <td>Table Content</td>
        <td>Table Content</td>
    </tr>
    <tr>
        <td>Table Content</td>
        <td>Table Content</td>
        <td>Table Content</td>
        <td>Table Content</td>
    </tr>
 </tb>
</table>
```
*/
table {
  border-collapse: separate;
  border-spacing: 1px;
}
table th,
table thead td {
  background: #96c126;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
}
table td {
  padding: 0.3125rem 0.625rem 0.3125rem 0.625rem;
  background: #ffffff;
  color: #96c126;
  border: 1px solid #ffffff;
}
table tr:nth-child(even) td {
  background: #f5f5f5;
}
/*
Checkboxes
==========================================
######Checkboxes elements
Changes the default Checkboxes to custom-themed ones that contain the Shopware color variables.

The checkboxes can be used in a `span` element containing an `input` tag or inside a anchor element. (Example inside a panel element)

```

<div class="panel">
    <div class="panel--body">

        <span class="checkbox">
            <input type="checkbox" />
            <span class="checkbox--state"></span>
        </span> Option (actual checkbox)<br/>

        <span class="checkbox">
            <input type="checkbox" />
            <span class="checkbox--state"></span>
        </span> Option (actual checkbox)<br/>

        <a href="#">
            <span class="checkbox">
                <span class="checkbox--state"></span>
            </span>
        </a> Option (inside a link)<br/>

        <a href="#">
            <span class="checkbox">
                <span class="checkbox--state"></span>
            </span>
        </a> Option (inside a link)<br/>

    </div>
</div>

```
*/
.checkbox {
  width: 1rem;
  height: 1rem;
  padding: 0.0625rem 0.0625rem 0.0625rem 0.0625rem;
  line-height: 1rem;
  border-radius: 3px;
  background-clip: padding-box;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  border: 1px solid #96c126;
  cursor: pointer;
}
.checkbox .checkbox--state {
  border-radius: 3px;
  background-clip: padding-box;
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 60;
}
.checkbox input[type="checkbox"] {
  opacity: 0;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0 none;
  background: none;
  cursor: pointer;
  z-index: 65;
}
.checkbox input[type="checkbox"]:checked ~ .checkbox--state {
  background-color: #7abef2;
  background-image: linear-gradient(to bottom, #7abef2 0%, #48a2e7 100%);
}
.checkbox input[type="checkbox"]:checked ~ .checkbox--state:before {
  width: 0.75rem;
  height: 0.75rem;
  line-height: 0.75rem;
  font-size: 0.4375rem;
  display: inline-block;
  font-family: 'shopware';
  font-weight: 500;
  text-align: center;
  vertical-align: top;
  color: #fff;
  content: "\e60c";
}
.checkbox input[type="checkbox"]:disabled ~ .checkbox--state {
  background: #f8f8f8;
}
.checkbox.is--active .checkbox--state,
a:hover .checkbox .checkbox--state {
  background-color: #7abef2;
  background-image: linear-gradient(to bottom, #7abef2 0%, #48a2e7 100%);
}
.checkbox.is--active .checkbox--state:before,
a:hover .checkbox .checkbox--state:before {
  width: 0.75rem;
  height: 0.75rem;
  line-height: 0.75rem;
  font-size: 0.4375rem;
  display: inline-block;
  font-family: 'shopware';
  font-weight: 500;
  text-align: center;
  vertical-align: top;
  color: #fff;
  content: "\e60c";
}
/*
Off-canvas menu button
=======================================
Defines the styling of the off-canvas menu trigger button that is used for the shopping off-canvas cart.

The Shopware 5 off-canvas menu can be enabled/disabled inside the Shopware backend.

The functionality is provided by the `jquery.off-canvas-button.js` file.
*/
.js--off-canvas-button {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  margin-bottom: 0.625rem;
  border-radius: 3px;
  background-clip: padding-box;
  position: relative;
  border: 1px solid #648119;
  cursor: pointer;
  display: block;
}
.js--off-canvas-button .tab--header {
  margin-bottom: 0.625rem;
  position: relative;
}
.js--off-canvas-button .tab--title:after {
  font-size: 0.75rem;
  right: 0.3125rem;
  margin-top: -0.375rem;
  content: "\e60f";
}
.js--off-canvas-button .tab--preview {
  display: block;
}
.js--off-canvas-button .tab--preview p:last-child {
  margin-bottom: 0;
}
.js--off-canvas-button .tab--content {
  cursor: default;
}
.js--off-canvas-button:hover .tab--title {
  color: #ffffff;
}
/*
Tab-menu
==========================================
The Shopware tab-menu allows the creation of multiple tabs filled with content that the user can swtich between.

The functionality is provided by the `jquery.tab-menu.js` file.

    <div class="tab-menu--product js--tab-menu">

        <div class="tab--navigation">
            <a href="#" class="tab--link is--active" title="Tab-1">First Tab</a>
            <a href="#" class="tab--link" title="Tab-2">Second Tab</a>
        </div>

        <div class="tab--container-list">
            <div class="tab--container is--active">
            </div>
            <div class="tab--container">
            </div>
        </div>

    </div>
*/
.js--tab-menu .tab--navigation {
  list-style: none;
}
.js--tab-menu .tab--link {
  padding: 0.625rem 0.9375rem 0.625rem 0.9375rem;
  margin: 0rem 0.3125rem 0rem 0rem;
  line-height: 1.5rem;
  font-size: 0.875rem;
  background-color: #ffffff;
  background-image: linear-gradient(to bottom, #ffffff 0%, #fbfbfb 100%);
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-clip: padding-box;
  top: 0.0625rem;
  display: none;
  position: relative;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
  border: 1px solid #96c126;
  white-space: nowrap;
}
.js--tab-menu .tab--link:hover {
  color: #ffffff;
  background: #fff;
}
.js--tab-menu .tab--link:focus {
  outline: none;
}
.js--tab-menu .tab--link.is--active {
  color: #000000;
  border-bottom-color: #fff;
  background: #fff;
}
.js--tab-menu .tab--link.is--active:hover {
  color: #000000;
}
.js--tab-menu .tab--link.has--content {
  display: inline-block;
}
.js--tab-menu.js--menu-scroller .tab--navigation {
  overflow: hidden;
}
.js--tab-menu.js--menu-scroller .tab--navigation .js--menu-scroller--item {
  top: 0;
}
.js--tab-menu.js--menu-scroller .js--menu-scroller--arrow {
  line-height: 2.875rem;
  height: 2.875rem;
  border-radius: 3px;
  background-clip: padding-box;
  border: 1px solid #96c126;
}
.js--tab-menu.js--menu-scroller .js--menu-scroller--arrow:hover {
  border-color: #48a2e7;
}
.js--tab-menu .tab--container-list .tab--container {
  border: 1px solid #648119;
  display: none;
}
.js--tab-menu .tab--container-list .tab--container.has--content.is--active {
  display: block;
}
/*
Image gallery element
====================================================
Defines the styles for the image gallery element that shows thumbnails of the product pictures in a slim slider element.

It is displayed on the product detail page.
*/
.image--gallery .image-slider--container {
  bottom: 5.625rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  margin: 0;
}
.image--gallery.no--thumbnails .image-slider--container {
  bottom: 0;
}
.image--gallery .image-slider--item {
  display: inline-block;
  height: 100%;
  width: 100%;
  position: relative;
  text-align: center;
  cursor: default;
}
.image--gallery .image-slider--item .image--element {
  display: block;
  max-width: 100%;
  height: auto;
  width: auto;
}
.image--gallery .image-slider--item .image--media,
.image--gallery .image-slider--item img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.image--gallery .image-slider--thumbnails {
  padding: 0.625rem 0rem 0.625rem 0rem;
  height: 5.625rem;
  background: #fff;
  top: auto;
  bottom: 0;
  width: 100%;
  margin: 0;
  position: absolute;
  display: block;
}
.image--gallery .image-slider--thumbnails .thumbnails--arrow {
  top: 0.625rem;
}
.image--gallery .image-slider--thumbnails .thumbnails--arrow.is--left {
  border-left: 0 none;
}
.image--gallery .image-slider--thumbnails .thumbnails--arrow.is--right {
  border-right: 0 none;
}
.image--gallery .image-slider--thumbnails-slide {
  margin: 0rem 0.625rem 0rem 0.625rem;
  left: auto;
  top: auto;
}
.image--gallery .thumbnail--link {
  margin: 0rem 0.625rem 0rem 0rem;
  display: inline-block;
}
.image--gallery .button--zoom-in,
.image--gallery .button--zoom-out,
.image--gallery .button--zoom-reset {
  top: 0.625rem;
  left: 0.625rem;
  font-size: 1.25rem;
  padding: 0.125rem 0.375rem 0.125rem 0.375rem;
  position: absolute;
}
.image--gallery .button--zoom-in:hover,
.image--gallery .button--zoom-out:hover,
.image--gallery .button--zoom-reset:hover {
  z-index: 1;
}
.image--gallery .button--zoom-out {
  border-top-left-radius: 3px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 3px;
  background-clip: padding-box;
}
.image--gallery .button--zoom-reset {
  left: 2.6875rem;
  border-radius: 0;
}
.image--gallery .button--zoom-in {
  border-top-left-radius: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 0;
  background-clip: padding-box;
  left: 4.75rem;
}
.image-gallery--modal .modal--close {
  top: 0.625rem;
  width: 2.125rem;
  height: 2.125rem;
  line-height: 2rem;
}
@media screen and (min-width: 78.75em) {
  .js--image-gallery {
    width: 80%;
    height: 80%;
  }
}
/*
Product quick-view
======================================
Defines the styling of the product quick-view page.

The product quick-view is an element during the checkout process in Shopware 5 that displays the user the important information of his product without having to switch to the product detail page and interrupt the checkout.
*/
.product--quick-view {
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
}
.product--quick-view .quick-view--image {
  height: 12.5rem;
  border-radius: 3px;
  background-clip: padding-box;
  margin: 0rem 0rem 1.25rem 0rem;
  border: 1px solid #96c126;
  width: 100%;
  display: block;
  position: relative;
  float: left;
}
.product--quick-view .quick-view--image img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.product--quick-view .quick-view--title {
  font-size: 1.125rem;
  color: #648119;
  display: block;
  font-weight: 700;
}
.product--quick-view .quick-view--title:hover {
  color: #48a2e7;
}
.product--quick-view .quick-view--supplier {
  font-size: 0.875rem;
  padding: 0.625rem 0rem 0.3125rem 0rem;
  font-weight: 700;
}
.product--quick-view .quick-view--description-title {
  font-size: 1rem;
  padding-bottom: 0.3125rem;
  margin-top: 0.9375rem;
  color: #648119;
  border-bottom: 1px solid #96c126;
  font-weight: 700;
  clear: both;
}
.product--quick-view .quick-view--description {
  font-size: 0.875rem;
  padding-top: 0.625rem;
  color: #96c126;
}
.product--quick-view .quick-view--description,
.product--quick-view .quick-view--description > p {
  margin: 0;
}
@media screen and (min-width: 30em) {
  .product--quick-view {
    padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  }
  .product--quick-view .quick-view--image {
    width: 50%;
  }
  .product--quick-view .quick-view--header {
    padding-left: 1.25rem;
    width: 50%;
    float: right;
  }
  .product--quick-view .quick-view--description-title {
    margin-top: 0;
  }
}
/*
Hidden Captcha
======================================
Hides a form field so a human will omit it while
a bot still fills it in and thus identifies as bot.

Is used to hide the label as well.
*/
.c-firstname-confirmation {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/*
Modules
==================================================
The `modules.less` file contains the imports to all module elements of Shopware.

Mixin specific documentation can be found inside each mixin file.
*/
/*
Global
==========================================
Defines the global styles of Shopware.

It contains the global modifier classes that help working with the Shopware elements and the typographic styles.

######Global modifier classes
Add a `is--` class to an element to easily change the properties.

`.is--rounded` - changes the border-radius to 3pxgi<br/>
`.is--block` - sets element to display: block<br/>
`.is--inline` - sets element to display: inline<br/>
`.is--inline-block` - sets element to display: inline-block<br/>
`.is--hidden` - sets element to display: none<br/>
`.is--invisible` - sets element to  visibility: none<br/>

`.is--align-left` - sets element to text-align: left;<br/>
`.is--align-right` - sets element to text-align: right<br/>
`.is--align-center` - sets element to text-align: center<br/>
`.is--underline` - sets element to text-decoration: underline<br/>
`.is--line-through` - sets element to text-decoration: line-through<br/>
`.is--uppercase` - sets element to text-transform: uppercase<br/>
`.is--strong` - sets element to font-weight: @font-bold-weight<br/>
`.is--bold` - sets element to font-weight: @font-bold-weight<br/>
`.is--italic` - sets element to font-style: italic<br/>
`.is--nowrap` - sets element to white-space: nowrap<br/>

`.is--dark` - changes color to @text-color-dark<br/>
`.is--light` - changes color to darken(@gray-dark, 20%)<br/>
`.is--soft` - changes color to @gray-dark<br/>
*/
* {
  box-sizing: border-box;
}
html {
  width: 100%;
  height: 100%;
}
html.no--scroll {
  position: relative;
  overflow: hidden;
}
html.no--scroll body {
  overflow: hidden;
}
body {
  font-size: 0.875rem;
  font-family: "DaytonaW01", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 500;
  color: #ffffff;
  background: #f8f8f8;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  height: auto;
}
a {
  color: #ffffff;
  text-decoration: none;
}
ul {
  margin: 0;
  padding: 0;
}
.product--rating i[class^=icon] {
  color: #f1c40f;
}
.product--rating i.icon--star-empty {
  color: #96c126;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.625rem;
  margin: 1.75rem 0rem 0.625rem 0rem;
  font-family: "DaytonaW01", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 700;
  color: #000000;
}
h1 {
  font-size: 1.625rem;
  line-height: 1.75rem;
  margin: 2.125rem 0rem 1.25rem 0rem;
  color: #000000;
}
h2 {
  font-size: 1.3125rem;
}
h3 {
  font-size: 1.125rem;
}
h4 {
  font-size: 1rem;
}
h5 {
  font-size: 0.875rem;
}
h6 {
  font-size: 0.75rem;
}
p {
  font-size: 0.875rem;
  line-height: 1.5rem;
  margin: 0rem 0rem 1.25rem 0rem;
}
blockquote {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  border-radius: 3px;
  background-clip: padding-box;
  box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
  background: #f8f8f8;
  text-align: left;
  margin: 0;
}
.ajax-loader {
  display: none;
}
.is--rounded {
  border-radius: 3px;
  background-clip: padding-box;
}
.is--block {
  display: block !important;
}
.is--inline {
  display: inline !important;
}
.is--inline-block {
  display: inline-block !important;
}
.is--hidden {
  display: none !important;
}
.is--invisible {
  visibility: hidden !important;
}
.is--align-left {
  text-align: left !important;
}
.is--align-right {
  text-align: right !important;
}
.is--align-center {
  text-align: center !important;
}
.is--underline {
  text-decoration: underline !important;
}
.is--line-through {
  text-decoration: line-through !important;
}
.is--uppercase {
  text-transform: uppercase !important;
}
.is--strong {
  font-weight: 700 !important;
}
.is--bold {
  font-weight: 700 !important;
}
.is--italic {
  font-style: italic;
}
.is--nowrap {
  white-space: nowrap !important;
}
.is--dark {
  color: #000000 !important;
}
.is--light {
  color: #aeaeae !important;
}
.is--soft {
  color: #e1e1e1 !important;
}
.is--fluid {
  width: 100% !important;
}
.left {
  float: left;
}
.right {
  float: right;
}
::-moz-placeholder {
  color: #ffffff;
}
::-webkit-input-placeholder {
  color: #ffffff;
}
:-ms-input-placeholder {
  color: #ffffff;
}
.page-wrap {
  min-width: 20rem;
}
.content-main:after,
.content--wrapper:after {
  content: "";
  display: table;
  clear: both;
}
.content-main--inner {
  padding: 0rem 0.625rem 1rem 0.625rem;
}
.content-main--inner:after {
  content: "";
  display: table;
  clear: both;
}
.content {
  width: 100%;
  float: left;
}
@media screen and (min-width: 48em) {
  .content-main {
    box-shadow: 0 0 4px 1px #96c126;
  }
  .content-main:not(.is--small) {
    min-height: 46.875rem;
  }
  .content-main--inner {
    padding: 0rem 1.875rem 1rem 1.875rem;
    width: 100%;
  }
}
@media screen and (min-width: 78.75em) {
  .content-main {
    margin-top: 1.25rem;
    margin-bottom: 2.8125rem;
  }
  .content-main:not(.is--small) {
    min-height: 43.75rem;
  }
  .content-main--inner {
    padding: 0rem 3.125rem 3.125rem 3.125rem;
  }
}
/*
Header
==========================================
Defines the styles of the Shopware storeview header and its components.

It contains the viewport specific styles inside media queries.

The header sizes are defined by the unitize mixin.

More precise designations are commented inside the document.
*/
.header-main {
  padding-bottom: 0.625rem;
  background: #fff;
  border-bottom: 1px solid #48a2e7;
}
.header-main .top-bar {
  display: none;
}
.header-main .logo-main {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
}
.header-main .logo-main .logo--link {
  height: 2.1875rem;
  display: inline-block;
  max-width: 100%;
}
.header-main .logo-main .logo--shop {
  height: 2.1875rem;
  width: 50%;
}
.header-main .logo-main .logo--supportinfo {
  display: none;
}
.header-main .header--navigation {
  position: relative;
}
.is--ctl-checkout.is--minimal-header .header-main,
.is--ctl-register.is--minimal-header .header-main,
.is--ctl-register.is--minimal-header.is--target-checkout .header-main {
  border-bottom: 1px solid #48a2e7;
}
.is--ctl-checkout.is--minimal-header .header-main .logo-main,
.is--ctl-register.is--minimal-header .header-main .logo-main,
.is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo-main {
  width: 100%;
}
.is--ctl-checkout.is--minimal-header .header-main .logo--shop,
.is--ctl-register.is--minimal-header .header-main .logo--shop,
.is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--shop {
  width: 50%;
}
.is--ctl-checkout.is--minimal-header .header-main .logo--link,
.is--ctl-register.is--minimal-header .header-main .logo--link,
.is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--link {
  margin-top: 0.625rem;
}
.is--ctl-checkout.is--minimal-header .header-main .logo--supportinfo,
.is--ctl-register.is--minimal-header .header-main .logo--supportinfo,
.is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--supportinfo {
  display: none;
}
.is--ctl-checkout.is--minimal-header .header-main .btn--back-top-shop,
.is--ctl-register.is--minimal-header .header-main .btn--back-top-shop,
.is--ctl-register.is--minimal-header.is--target-checkout .header-main .btn--back-top-shop {
  margin-top: 0.625rem;
  width: 40%;
  float: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop--navigation {
  position: relative;
}
.shop--navigation .navigation--list {
  width: 100%;
  text-align: right;
}
.shop--navigation .navigation--entry {
  margin-right: 0.3125rem;
  display: inline-block;
}
.shop--navigation .navigation--entry .btn {
  height: 2.5rem;
  width: 2.5rem;
  vertical-align: middle;
}
.shop--navigation .navigation--entry .cart--link {
  padding: 0.125rem 0.625rem 0.125rem 0.375rem;
}
.shop--navigation .navigation--entry .account--link {
  padding: 0.125rem 0.625rem 0.125rem 0.5rem;
}
.shop--navigation .navigation--entry .account--link.account--user-loggedin:after {
  width: 1rem;
  height: 1rem;
  top: -0.3125rem;
  right: -0.3125rem;
  line-height: 1.125rem;
  font-size: 0.5rem;
  border-radius: 50%;
  background-clip: padding-box;
  content: "\e60c";
  display: inline-block;
  position: absolute;
  background: #2ecc71;
  font-family: 'shopware';
  color: #fff;
}
.shop--navigation .navigation--entry .icon--basket,
.shop--navigation .navigation--entry .icon--account {
  font-size: 1.3125rem;
  display: inline;
  position: relative;
  vertical-align: middle;
  top: 0;
  left: 0;
}
.shop--navigation .navigation--entry .icon--heart {
  font-size: 1.125rem;
  vertical-align: middle;
}
.shop--navigation .navigation--entry .icon--search {
  font-size: 1.375rem;
  vertical-align: middle;
}
.shop--navigation .cart--quantity,
.shop--navigation .notes--quantity {
  top: -0.25rem;
  left: 1.4375rem;
  position: absolute;
  margin: 0;
}
.shop--navigation .entry--link {
  text-align: center;
  text-decoration: none;
}
.shop--navigation .main-search--form,
.shop--navigation .account--display,
.shop--navigation .cart--display,
.shop--navigation .cart--amount,
.shop--navigation .search--display {
  display: none;
}
.shop--navigation .entry--search .is--active.btn {
  background: #ffffff;
  color: #48a2e7;
  border-color: #48a2e7;
}
.shop--navigation .entry--account {
  position: relative;
}
.shop--navigation .entry--cart {
  margin-right: 0.75rem;
  position: relative;
}
.shop--navigation .entry--menu-left {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  top: 0;
  left: 0;
  position: absolute;
  display: block;
  font-weight: 700;
  text-align: left;
}
.shop--navigation .entry--menu-left .btn {
  padding-left: 3rem;
  line-height: 2.1875rem;
  font-size: 1.0625rem;
  height: 2.5rem;
  color: #96c126;
  width: auto;
  background: 0 none;
  border: 0 none;
}
.shop--navigation .entry--menu-left .icon--menu {
  font-size: 1.25rem;
}
.main-search--form {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
  z-index: 3000;
}
.main-search--form .main-search--field {
  padding: 0.5625rem 2.375rem 0.5625rem 0.5625rem;
  height: 2.5rem;
  background: #fff;
  vertical-align: middle;
  width: 100%;
  position: relative;
}
.main-search--form .main-search--button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  top: 0.625rem;
  bottom: 0.625rem;
  right: 0.625rem;
  font-size: 1.25rem;
  padding: 0rem 0.625rem 0rem 0.625rem;
  line-height: 1;
  position: absolute;
  z-index: 2;
  border: 0 none;
  background: transparent;
  color: #ffffff;
  outline: none;
}
.main-search--form .main-search--text {
  display: none;
}
.account--menu.is--personalized .navigation--logout-personalized {
  display: inline-block;
}
.account--menu.is--personalized .navigation--logout {
  display: block;
}
.account--menu.is--personalized .navigation--link.navigation--personalized {
  padding-top: 0.5625rem;
  padding-left: 1.4375rem;
  padding-bottom: 0.5625rem;
  line-height: 1.25rem;
  position: relative;
  color: #ffffff;
  font-weight: 500;
}
.account--menu.is--personalized .navigation--link.navigation--personalized:before,
.account--menu.is--personalized .navigation--link.navigation--personalized::before {
  width: 1rem;
  height: 1rem;
  left: 0.125rem;
  content: "\e614";
  font-family: 'shopware';
  position: absolute;
}
.account--menu.is--personalized .navigation--link.navigation--personalized [class^="icon--"] {
  margin: 0rem 0.3125rem 0rem 0rem;
  display: inline-block;
}
.account--menu.is--personalized .navigation--link.navigation--personalized .icon--logout {
  position: relative;
  top: 0.625rem;
}
.account--menu.is--personalized .navigation--link.navigation--personalized:hover {
  color: #48a2e7;
}
.off-canvas .account--menu.is--personalized .navigation--signin {
  border-bottom: none;
}
.account--dropdown-navigation {
  display: none;
  text-align: left;
}
.account--dropdown-navigation .navigation--logout-personalized {
  display: inline-block;
}
.account--dropdown-navigation .navigation--logout {
  display: block;
}
.account--dropdown-navigation .navigation--signin {
  padding-top: 0.9375rem;
  padding-bottom: 0.9375rem;
  margin-top: 0.4375rem;
  border-bottom: 1px solid #96c126;
  display: block;
  text-align: center;
}
.account--dropdown-navigation .navigation--signin .navigation--signin-btn.btn {
  margin-bottom: 0.3125rem;
  width: 95%;
  text-align: center;
}
.account--dropdown-navigation .navigation--register {
  font-size: 0.8125rem;
}
.account--dropdown-navigation .navigation--link.link--logout.navigation--personalized {
  line-height: 1.25rem;
  padding-left: 2.0625rem;
  color: #ffffff;
  font-weight: 500;
}
.account--dropdown-navigation .navigation--link.link--logout.navigation--personalized:before,
.account--dropdown-navigation .navigation--link.link--logout.navigation--personalized::before {
  left: 0.625rem;
}
.account--dropdown-navigation .navigation--link.link--logout.navigation--personalized:hover {
  color: #48a2e7;
}
.account--dropdown-navigation.off-canvas {
  background: #f8f8f8;
}
.account--dropdown-navigation.off-canvas .account--menu,
.account--dropdown-navigation.off-canvas .sidebar--navigation {
  text-align: left;
}
.account--dropdown-navigation.off-canvas .account--menu .navigation--entry,
.account--dropdown-navigation.off-canvas .sidebar--navigation .navigation--entry {
  display: block;
  margin: 0;
}
.account--dropdown-navigation.off-canvas .account--menu .navigation--entry .navigation--link.link--logout.navigation--personalized,
.account--dropdown-navigation.off-canvas .sidebar--navigation .navigation--entry .navigation--link.link--logout.navigation--personalized {
  padding-top: 0.5625rem;
  padding-bottom: 0.5625rem;
}
.account--dropdown-navigation.off-canvas .account--menu .navigation--entry .navigation--link.link--logout.navigation--personalized [class^="icon--"],
.account--dropdown-navigation.off-canvas .sidebar--navigation .navigation--entry .navigation--link.link--logout.navigation--personalized [class^="icon--"] {
  margin: 0rem 0.3125rem 0rem 0rem;
  display: inline-block;
}
.account--dropdown-navigation.off-canvas .account--close-off-canvas {
  color: #fff;
  font-weight: 700;
}
.has--csstransforms .entry--search .entry--trigger.is--active::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 0.9375rem;
  height: 0.9375rem;
  margin-top: 0.5rem;
  margin-left: 0.0625rem;
  background: #f3f3f3;
  content: '';
  display: block;
}
.entry--search.is--active .main-search--form {
  top: 3.125rem;
  background: #f3f3f3;
  left: 0;
  display: block;
  position: absolute;
}
.header-main.is--active-searchfield {
  padding-bottom: 4.375rem;
}
.has--cssanimations .form--ajax-loader {
  top: 1.25rem;
  right: 3.4375rem;
  position: absolute;
  display: none;
}
.has--cssanimations .form--ajax-loader::before {
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background-clip: padding-box;
  -webkit-animation: keyframe--spin 1s linear infinite;
  animation: keyframe--spin 1s linear infinite;
  border: 2px solid #96c126;
  border-top: 2px solid #000000;
  display: block;
  content: "";
}
.has--no-cssanimations .form--ajax-loader {
  top: 1.5rem;
  right: 3.4375rem;
  width: 1rem;
  height: 1rem;
  position: absolute;
  display: none;
  background-image: url('../../themes/Frontend/Responsive/frontend/_public/src/img/icons/loading-indicator.gif?da4cc11c456bd9f44d5a01d8ae14f59c');
}
.main-search--results {
  top: 6.875rem;
  position: absolute;
  width: 100%;
  left: 0;
  text-align: left;
  z-index: 3500;
  display: none;
}
.main-search--results:after {
  content: "";
  display: table;
  clear: both;
}
.results--list {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  box-shadow: 0 10px 25px -15px #000000;
  border-top: 1px solid #96c126;
  border-bottom: 1px solid #96c126;
  background: #fff;
  -ms-touch-action: manipulation;
}
.results--list::after {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  width: 0.75rem;
  height: 0.75rem;
  top: -0.375rem;
  content: '';
  display: block;
  position: absolute;
  background: #fff;
  left: 48%;
  border: 1px solid #96c126;
  border-top: 0 none;
  border-right: 0 none;
}
.results--list .list--entry,
.results--list .entry--all-results {
  display: block;
}
.results--list .entry--all-results.is--active {
  font-weight: 700;
}
.results--list .entry--all-results.is--active .entry--all-results-number {
  font-weight: 700;
}
.results--list .list--entry {
  line-height: 1.875rem;
  border-bottom: 1px solid #96c126;
}
.results--list .list--entry:last-child {
  border: 0 none;
}
.results--list .entry--no-results {
  width: 100%;
  text-align: center;
  list-style: none;
  font-weight: 500;
}
.results--list .is--active,
.results--list .list--entry:hover {
  color: #ffffff;
}
.results--list .is--active .entry--name,
.results--list .list--entry:hover .entry--name,
.results--list .is--active .entry--price,
.results--list .list--entry:hover .entry--price {
  color: #ffffff;
}
.results--list .search-result--link {
  padding: 0.375rem 0rem 0.375rem 0rem;
  display: block;
}
.results--list .search-result--link:after {
  content: "";
  display: table;
  clear: both;
}
.results--list .entry--name,
.results--list .entry--all-results-link,
.results--list .entry--all-results-number {
  height: 1.875rem;
  line-height: 1.875rem;
  display: block;
}
.results--list .price--unit {
  font-size: 0.6875rem;
  line-height: 1.125rem;
  float: right;
}
.results--list .entry--media {
  height: 1.875rem;
  width: 10%;
  min-width: 10%;
  position: relative;
  text-align: center;
}
.results--list .entry--media .media--image {
  display: inline-block;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.results--list .entry--name {
  padding-left: 0.625rem;
  width: 60%;
  color: #ffffff;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.results--list .entry--price,
.results--list .entry--all-results-number {
  width: 30%;
  text-align: right;
  color: #ffffff;
  white-space: nowrap;
}
.results--list .entry--all-results {
  padding: 0.375rem 0.3125rem 0.375rem 0.3125rem;
  font-weight: 500;
}
.results--list .entry--all-results-link {
  width: 70%;
  padding: 0;
}
.results--list .entry--all-results-link .icon--arrow-right {
  top: -0.0625rem;
  margin: 0rem 0.5rem 0rem 0rem;
  position: relative;
}
.results--list .entry--all-results-number {
  font-weight: 500;
  color: #ffffff;
}
.off-canvas .mobile--switches .navigation--entry {
  padding: 0;
  border: none;
  background: none;
}
@media screen and (min-width: 30em) {
  .is--ctl-checkout.is--minimal-header .header-main .btn--back-top-shop,
  .is--ctl-register.is--minimal-header .header-main .btn--back-top-shop,
  .is--ctl-register.is--minimal-header.is--target-checkout .header-main .btn--back-top-shop {
    width: auto;
  }
  .entry--search {
    display: inline-block;
    position: absolute;
    left: 26%;
    width: 40%;
  }
  .entry--search.is--active .main-search--form {
    top: 0;
    display: inline-block;
  }
  .entry--search .entry--trigger {
    display: none;
  }
  .entry--search .main-search--form {
    box-shadow: 0 0 0 transparent;
    border-bottom: 0 none;
    padding: 0;
    display: inline-block;
    position: relative;
  }
  .entry--search .main-search--form .main-search--field {
    background: #fbfbfb;
  }
  .entry--search .main-search--form .main-search--field:focus {
    background: #fff;
  }
  .entry--search .main-search--form .main-search--button {
    top: 0rem;
    bottom: 0rem;
    right: 0rem;
    padding: 0rem 0.625rem 0rem 0.625rem;
    height: 2.5rem;
  }
  .main-search--results {
    top: 3.125rem;
    width: 28.125rem;
    margin-left: -6.875rem;
  }
  .main-search--results:after {
    content: "";
    display: table;
    clear: both;
  }
  .results--list {
    border-radius: 3px;
    background-clip: padding-box;
    border: 1px solid #96c126;
    background: #fff;
  }
  .header-main.is--active-searchfield {
    padding-bottom: 0.625rem;
  }
  .has--cssanimations .form--ajax-loader {
    top: 0.625rem;
    right: 2.8125rem;
    position: absolute;
  }
  .has--no-cssanimations .form--ajax-loader {
    top: 0.875rem;
    right: 2.8125rem;
    position: absolute;
  }
}
@media screen and (min-width: 48em) {
  .header-main.is--active-searchfield {
    padding-bottom: 0;
  }
  .header-main {
    padding-bottom: 0;
    border-bottom: 0 none;
  }
  .header-main .container:after {
    content: "";
    display: table;
    clear: both;
  }
  .header-main .top-bar {
    padding: 0.25rem 0rem 0.25rem 0rem;
    display: block;
  }
  .header-main .top-bar--navigation {
    width: auto;
    float: right;
  }
  .header-main .top-bar--navigation .navigation--entry {
    padding: 0rem 0.9375rem 0rem 0.9375rem;
    line-height: 1.5625rem;
    float: left;
    display: block;
  }
  .header-main .top-bar--navigation .navigation--entry li {
    line-height: normal;
  }
  .header-main .top-bar--navigation .navigation--entry,
  .header-main .top-bar--navigation .navigation--link {
    color: #ffffff;
    cursor: pointer;
  }
  .header-main .top-bar--navigation .navigation--entry:hover,
  .header-main .top-bar--navigation .navigation--link:hover {
    color: #48a2e7;
  }
  .header-main .top-bar--navigation .field--select,
  .header-main .top-bar--navigation .navigation--entry {
    height: 1.5625rem;
  }
  .header-main .top-bar--navigation .field--select {
    position: relative;
  }
  .header-main .top-bar--navigation .select-field {
    height: 1.5625rem;
  }
  .header-main .top-bar--navigation .select-field select {
    border-radius: 0;
    padding: 0rem 1.125rem 0rem 0rem;
    line-height: 1.5625rem;
    background: none;
    border: 0 none;
  }
  .header-main .top-bar--navigation .select-field:after {
    height: 1.5625rem;
    line-height: 1.5rem;
    width: auto;
    border: 0 none;
  }
  .header-main .top-bar--navigation .top-bar--language .select-field {
    width: 2rem;
  }
  .header-main .top-bar--navigation .top-bar--language .select-field select {
    text-indent: -9999px;
  }
  .header-main .top-bar--navigation .top-bar--language .language--flag {
    margin-top: -0.375rem;
    position: absolute;
    z-index: 900;
    top: 50%;
    left: 0;
    pointer-events: none;
  }
  .header-main .top-bar--navigation .entry--service {
    position: relative;
  }
  .header-main .top-bar--navigation .entry--service:after,
  .header-main .top-bar--navigation .entry--service::after {
    top: -0.1875rem;
    margin-left: 0.3125rem;
    content: "\e612";
    font-family: 'shopware';
    position: relative;
  }
  .header-main .top-bar--navigation .entry--service.js--is--dropdown-active {
    color: #48a2e7;
  }
  .header-main .top-bar--navigation .service--list {
    min-width: 9.375rem;
    padding: 0.3125rem 0rem 0.3125rem 0rem;
    top: 2rem;
    right: 0.75rem;
    text-align: left;
    position: absolute;
    display: none;
    list-style: none;
    background: #fff;
    z-index: 3500;
    border: 1px solid #96c126;
  }
  .header-main .top-bar--navigation .service--list::after {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    width: 0.5rem;
    height: 0.5rem;
    top: -0.3125rem;
    right: 1.125rem;
    content: '';
    display: block;
    position: absolute;
    background: #fff;
    border-color: #96c126;
    border-width: 0 0 1px 1px;
    border-style: solid;
  }
  .header-main .top-bar--navigation .service--list .service--link {
    padding: 0.3125rem 0.625rem 0.3125rem 0.625rem;
    display: block;
    color: #ffffff;
  }
  .header-main .top-bar--navigation .service--list .service--link:hover {
    color: #48a2e7;
  }
  .header-main .top-bar--navigation .js--is--dropdown-active .service--list {
    display: block;
  }
  .header-main .header--navigation {
    padding: 0.625rem 0rem 0.625rem 0rem;
  }
  .header-main .logo-main {
    padding: 0rem 0rem 0rem 0.625rem;
    width: 35%;
  }
  .header-main .logo-main .logo--link {
    height: 3.125rem;
  }
  .header-main .logo-main .logo--shop {
    height: 3.125rem;
    width: 82%;
  }
  .is--ctl-checkout.is--minimal-header .header-main,
  .is--ctl-register.is--minimal-header .header-main,
  .is--ctl-register.is--minimal-header.is--target-checkout .header-main {
    box-shadow: 0 1px 2px 0 #96c126;
  }
  .is--ctl-checkout.is--minimal-header .header-main .logo-main,
  .is--ctl-register.is--minimal-header .header-main .logo-main,
  .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo-main {
    padding-right: 0.625rem;
    width: 100%;
  }
  .is--ctl-checkout.is--minimal-header .header-main .logo--shop,
  .is--ctl-register.is--minimal-header .header-main .logo--shop,
  .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--shop {
    width: 35%;
  }
  .is--ctl-checkout.is--minimal-header .header-main .logo--link,
  .is--ctl-register.is--minimal-header .header-main .logo--link,
  .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--link {
    margin-top: 0;
    width: 80%;
  }
  .is--ctl-checkout.is--minimal-header .header-main .logo--supportinfo,
  .is--ctl-register.is--minimal-header .header-main .logo--supportinfo,
  .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--supportinfo {
    padding: 0.3125rem 0rem 0.3125rem 0rem;
    display: block;
    width: 35%;
  }
  .logo-main,
  .shop--navigation {
    float: left;
  }
  .shop--navigation {
    width: 65%;
  }
  .shop--navigation .navigation--list {
    background-image: none;
    text-align: right;
  }
  .shop--navigation .navigation--entry {
    border-radius: 3px;
    background-clip: padding-box;
    border: 0 none;
    width: auto;
    float: none;
    display: inline-block;
  }
  .shop--navigation .entry--cart .entry--link {
    padding: 0;
    display: inline-block;
  }
  .shop--navigation .entry--link {
    font-weight: 500;
  }
  .shop--navigation .entry--menu-left {
    display: none;
  }
  .shop--navigation .cart--quantity,
  .shop--navigation .search--display,
  .shop--navigation .entry--account {
    display: inline-block;
  }
  .shop--navigation .entry--search {
    font-size: 0.875rem;
    position: absolute;
    left: 3%;
    margin-right: 10%;
    background: #fff;
    padding: 0;
    border: 0 none;
    width: 50%;
  }
  .shop--navigation .entry--search .entry--trigger {
    display: none;
  }
  .shop--navigation .main-search--form {
    box-shadow: 0 0 0 transparent;
    display: block;
    padding: 0;
    border: 0 none;
  }
  .main-search--form {
    left: auto;
  }
  .account--dropdown-navigation {
    min-width: 12.5rem;
    max-width: 15.625rem;
    padding: 0.3125rem 0rem 0.3125rem 0rem;
    top: 2.8125rem;
    display: none;
    position: absolute;
    right: 0;
    z-index: 3500;
    text-align: left;
  }
  .js--is--dropdown-active .account--dropdown-navigation {
    display: block;
  }
  .account--dropdown-navigation .navigation--signin {
    padding-bottom: 0.375rem;
    margin-bottom: 0.375rem;
    margin-top: 0.3125rem;
    padding-top: 0;
  }
  .account--dropdown-navigation .navigation--signin .navigation--signin-btn.btn {
    width: 100%;
    margin-bottom: 0;
  }
  .account--dropdown-navigation .navigation--smartphone {
    display: none;
  }
  .account--dropdown-navigation .account--menu {
    text-align: left;
    background: #fff;
  }
  .account--dropdown-navigation .account--menu::after {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    width: 0.5rem;
    height: 0.5rem;
    right: 1.125rem;
    content: '';
    display: block;
    position: absolute;
    background: #fff;
    border-color: #96c126;
    border-width: 0 0 1px 1px;
    border-style: solid;
    top: 0;
  }
  .account--dropdown-navigation .account--menu .sidebar--navigation {
    text-align: left;
  }
  .account--dropdown-navigation .account--menu .sidebar--navigation .navigation--entry {
    display: block;
  }
  .account--dropdown-navigation .account--menu .sidebar--navigation .navigation--link {
    padding: 0.1875rem 0rem 0.1875rem 0rem;
  }
  .account--dropdown-navigation .account--menu .sidebar--navigation .link--logout {
    padding: 0.625rem 0rem 0rem 1.4375rem;
  }
  .account--dropdown-navigation .account--menu .sidebar--navigation .link--logout:before {
    left: 0.125rem;
  }
  .account--dropdown-navigation .account--menu .sidebar--navigation .link--abort {
    padding-top: 0rem;
    margin-top: 0rem;
    border-top: 0 none;
    white-space: nowrap;
  }
  .main-search--results {
    width: 28.125rem;
    margin-left: -14.0625rem;
    top: 3.4375rem;
    left: 50%;
  }
  .main-search--results:after {
    content: "";
    display: table;
    clear: both;
  }
}
@media screen and (min-width: 64em) {
  .header-main .logo-main {
    width: 30%;
  }
  .header-main .shop--navigation {
    width: 70%;
  }
  .shop--navigation .entry--search {
    width: 40%;
    margin-right: 8%;
  }
  .is--ctl-checkout.is--minimal-header .header-main,
  .is--ctl-register.is--minimal-header .header-main,
  .is--ctl-register.is--minimal-header.is--target-checkout .header-main {
    box-shadow: 0 1px 2px 0 #96c126;
  }
  .is--ctl-checkout.is--minimal-header .header-main .logo--shop,
  .is--ctl-register.is--minimal-header .header-main .logo--shop,
  .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--shop {
    width: 30%;
  }
  .is--ctl-checkout.is--minimal-header .header-main .logo--supportinfo,
  .is--ctl-register.is--minimal-header .header-main .logo--supportinfo,
  .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--supportinfo {
    width: 35%;
  }
  .is--ctl-checkout.is--minimal-header .header-main .btn--back-top-shop,
  .is--ctl-register.is--minimal-header .header-main .btn--back-top-shop,
  .is--ctl-register.is--minimal-header.is--target-checkout .header-main .btn--back-top-shop {
    display: inline-block;
    float: right;
  }
  .navigation--list .navigation--entry .btn {
    width: auto;
  }
  .navigation--list .entry--cart .cart--link {
    padding-left: 3.125rem;
  }
  .navigation--list .entry--cart .cart--link .cart--quantity {
    display: inline-block;
  }
  .navigation--list .entry--cart .cart--link .cart--amount {
    display: inline-block;
    color: #48a2e7;
    font-weight: 700;
  }
  .navigation--list .entry--cart .icon--basket {
    left: 0.5rem;
    display: block;
    position: absolute;
    top: 50%;
  }
  .navigation--list .entry--account .account--link {
    padding-left: 2.25rem;
  }
  .navigation--list .entry--account .account--link.account--user-loggedin:after {
    content: none;
    display: none;
  }
  .navigation--list .entry--account .icon--account {
    left: 0.5rem;
    display: block;
    position: absolute;
    top: 50%;
  }
  .navigation--list .account--display {
    display: inline-block;
  }
  .navigation--list .account--display.navigation--personalized {
    line-height: 1rem;
    font-size: 0.75rem;
    max-width: 5.625rem;
    margin-top: 0.125rem;
    text-align: left;
  }
  .navigation--list .account--display.navigation--personalized .account--display-greeting {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 700;
  }
}
@media screen and (min-width: 78.75em) {
  .header-main .top-bar {
    margin-bottom: 0.125rem;
  }
  .header-main .logo--shop {
    width: 75%;
  }
  .is--ctl-checkout.is--minimal-header .header-main,
  .is--ctl-register.is--minimal-header .header-main,
  .is--ctl-register.is--minimal-header.is--target-checkout .header-main {
    box-shadow: 0 1px 2px 0 #96c126;
  }
  .is--ctl-checkout.is--minimal-header .header-main .logo-main,
  .is--ctl-register.is--minimal-header .header-main .logo-main,
  .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo-main {
    padding-right: 0;
  }
  .is--ctl-checkout.is--minimal-header .header-main .logo--shop,
  .is--ctl-register.is--minimal-header .header-main .logo--shop,
  .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--shop {
    width: 30%;
  }
  .is--ctl-checkout.is--minimal-header .header-main .logo--supportinfo,
  .is--ctl-register.is--minimal-header .header-main .logo--supportinfo,
  .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--supportinfo {
    width: 35%;
  }
  .is--ctl-checkout.is--minimal-header .header-main .btn--back-top-shop,
  .is--ctl-register.is--minimal-header .header-main .btn--back-top-shop,
  .is--ctl-register.is--minimal-header.is--target-checkout .header-main .btn--back-top-shop {
    display: inline-block;
    float: right;
  }
  .shop--navigation {
    width: 75%;
  }
  .shop--navigation .navigation--link {
    padding: 0.5rem 1rem 1rem 1rem;
  }
  .shop--navigation .entry--link {
    font-size: 0.875rem;
  }
  .shop--navigation .entry--trigger {
    margin-right: 0.875rem;
  }
  .shop--navigation .entry--search {
    width: 40%;
  }
  .shop--navigation .entry--cart {
    margin-right: 0;
  }
  .account--menu.is--personalized .navigation--link.navigation--personalized {
    padding-bottom: 0;
  }
  .header-main .top-bar--navigation .service--list {
    right: 0;
  }
  .header-main .top-bar--navigation .navigation--entry:last-child {
    padding-right: 0;
  }
  .cart--display {
    margin: 0rem 1.5625rem 0rem 0.3125rem;
    font-weight: 700;
    color: #ffffff;
  }
}
/*
Main navigation
==========================================
Contains the styles of the main navigation of the Shopware storefront.

The main navigation is positioned above the content section.

It contains the viewport specific styles inside media queries.
*/
.navigation-main {
  background: #fff;
  display: none;
}
@media screen and (min-width: 48em) {
  .navigation-main {
    border-bottom: 1px solid #48a2e7;
    display: block;
    position: relative;
  }
  .navigation-main .navigation--list {
    padding: 0rem 0.625rem 0rem 0.625rem;
    margin: 0;
    position: relative;
    white-space: nowrap;
  }
  .navigation-main .navigation--list:after {
    content: "";
    display: table;
    clear: both;
  }
  .navigation-main .navigation--entry {
    display: inline-block;
    -ms-touch-action: none;
  }
  .navigation-main .navigation--link {
    -webkit-transition: none;
    transition: none;
    padding: 0.5rem 0.875rem 0.5rem 0.875rem;
    font-size: 1rem;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    background-clip: padding-box;
    margin: 0;
    display: block;
    cursor: pointer;
    color: #ffffff;
  }
  .navigation-main .navigation--link:hover {
    color: #48a2e7;
  }
  .navigation-main .is--active .navigation--link {
    background-color: #7abef2;
    background-image: linear-gradient(to bottom, #7abef2 0%, #48a2e7 100%);
    font-weight: 700;
    color: #fff;
  }
  .navigation-main .is--active .navigation--link:hover {
    color: #fff;
  }
}
@media screen and (min-width: 78.75em) {
  .navigation-main .navigation--list {
    padding: 0;
  }
}
/*
Breadcrumb
=================================
Defines the styling for the content breadcrumb elements that display the page location.

Every breadcrumb entry is followed by a breadcrumb separator list-entry with an arrow icon.

The main breadcrumb is positioned below the main navigation bar.

```
<nav class="content--breadcrumb">
    <ul class="breadcrumb--list" role="menu">
        <li class="breadcrumb--entry" role="menuitem" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
            <a class="breadcrumb--link" href="" itemprop="url">
                <span class="breadcrumb--title" itemprop="title">
                     Breadcrumb entry 1
                </span>
            </a>
        </li>

        <li class="breadcrumb--separator">
            <i class="icon--arrow-right"></i>
        </li>

        <li class="breadcrumb--entry" role="menuitem" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
            <a class="breadcrumb--link" href="" itemprop="url">
                <span class="breadcrumb--title" itemprop="title">
                     Breadcrumb entry 2
                </span>
            </a>
        </li>
    </ul>
</nav>
```
*/
.content--breadcrumb {
  font-size: 0.875rem;
  display: block;
  float: none;
  border-bottom: 1px solid #96c126;
}
.content--breadcrumb:after {
  content: "";
  display: table;
  clear: both;
}
.content--breadcrumb .breadcrumb--list {
  overflow: hidden;
}
.content--breadcrumb .breadcrumb--entry,
.content--breadcrumb .breadcrumb--separator {
  display: none;
  float: left;
  list-style: none;
  white-space: nowrap;
  overflow: hidden;
}
.content--breadcrumb .breadcrumb--entry:last-child,
.content--breadcrumb .breadcrumb--separator:last-child {
  display: list-item;
}
.content--breadcrumb .breadcrumb--link,
.content--breadcrumb .breadcrumb--separator {
  line-height: 1.5rem;
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
}
.content--breadcrumb .breadcrumb--separator {
  font-size: 0.5625rem;
}
.content--breadcrumb .breadcrumb--link {
  display: block;
  color: #ffffff;
}
.content--breadcrumb .breadcrumb--link:hover {
  color: #ffffff;
}
.content--breadcrumb .is--active .breadcrumb--link {
  color: #48a2e7;
}
.content--breadcrumb .breadcrumb--button {
  padding: 0.625rem 0rem 0.625rem 0.625rem;
  display: inline-block;
  float: left;
  list-style: none;
}
.content--breadcrumb .breadcrumb--button .breadcrumb--title {
  padding-right: 1.25rem;
  border-right: 1px solid #96c126;
}
.content--breadcrumb .breadcrumb--button .icon--arrow-left {
  font-size: 0.5625rem;
  margin-right: 0.625rem;
}
@media screen and (min-width: 48em) {
  .content--breadcrumb {
    padding: 0rem 1.25rem 0rem 1.25rem;
  }
  .content--breadcrumb .breadcrumb--list {
    padding-left: 0;
  }
  .content--breadcrumb .breadcrumb--entry,
  .content--breadcrumb .breadcrumb--separator {
    display: list-item;
  }
  .content--breadcrumb .breadcrumb--button {
    margin-right: 0.625rem;
    padding: 0.625rem 1.875rem 0.625rem 0.625rem;
  }
  .content--breadcrumb .breadcrumb--button .breadcrumb--title {
    padding-right: 0rem;
    border-right: 0 none;
  }
}
@media screen and (min-width: 78.75em) {
  .content--breadcrumb {
    padding: 0rem 2.5rem 0rem 2.5rem;
  }
}
/*
Detail
=======================================
Defines the styling for the Shopware 5 detail page elements.

It contains the product actions, the product information such as pictures and details and the user ratings of the product.
*/
.product--details .product--actions {
  margin: 0rem 0rem 0.625rem 0rem;
  padding: 0rem 0rem 0.625rem 0rem;
  border-top: 0 none;
  border-bottom: 1px solid #96c126;
}
.product--details .product--actions:after {
  content: "";
  display: table;
  clear: both;
}
.product--details .product--actions .js--off-canvas-button {
  display: inline-block;
}
.product--details .product--header {
  padding: 0.625rem 0rem 0.625rem 0rem;
  min-height: 4.375rem;
  box-sizing: content-box;
}
.product--details .product--header:after {
  content: "";
  display: table;
  clear: both;
}
.product--details .product--header .product--title {
  font-size: 1.3125rem;
  margin: 0;
  padding: 0;
  font-weight: 700;
  color: #000000;
}
.product--details .product--supplier,
.product--details .product--rating-container {
  width: 50%;
}
.product--details .product--rating-link {
  display: inline-block;
}
.product--details .product--rating-link.js--off-canvas-button {
  border: none;
  margin: unset;
  padding: unset;
}
.product--details .product--rating {
  font-size: 1.1875rem;
  display: block;
  letter-spacing: -1px;
  color: #ffffff;
}
.product--details .product--rating:after {
  content: "";
  display: table;
  clear: both;
}
.product--details .product--rating .rating--count-wrapper {
  font-size: 1rem;
  margin-left: 0.625rem;
  line-height: 1.5625rem;
  vertical-align: text-top;
  letter-spacing: 1px;
}
.product--details .product--supplier {
  height: 2.1875rem;
  text-align: right;
  float: right;
  margin: 0;
}
.product--details .product--supplier .product--supplier-link {
  height: 2.1875rem;
  display: inline-block;
  max-width: 100%;
}
.product--details .product--supplier.image--svg img {
  height: 100%;
}
.product--details .product--rating-container {
  margin: 0.3125rem 0rem 0rem 0rem;
  float: left;
}
.product--details .product--image-container {
  margin: 0rem 0rem 1.25rem 0rem;
  width: 100%;
}
.product--details .product--image-container .image-slider--slide {
  margin-right: -0.5px;
}
.product--details .alert {
  margin: 0rem 0rem 0.625rem 0rem;
}
.product--details .product--tax {
  font-size: 0.75rem;
  margin: 0;
}
.product--details .product--buybox {
  margin: 0rem 0rem 0.625rem 0rem;
  width: 100%;
}
.product--details .product--buybox .product--price {
  margin: 0;
}
.product--details .product--buybox .price--label {
  font-weight: 700;
}
.product--details .product--buybox .price--line-through {
  text-decoration: line-through;
}
.product--details .product--buybox .price--discount .price--content {
  color: #e74c3c;
}
.product--details .product--buybox .price--content {
  font-size: 1.75rem;
  white-space: nowrap;
  color: #000000;
  font-weight: 700;
  display: inline-block;
  line-height: 1;
}
.product--details .product--buybox .content--discount {
  font-size: 0.875rem;
  padding: 0.25rem 0rem 0.25rem 0rem;
  white-space: nowrap;
  display: inline-block;
}
.product--details .product--buybox .price--regulation {
  font-size: 0.875rem;
  padding: 0.25rem 0rem 0.25rem 0rem;
  white-space: nowrap;
}
.product--details .product--buybox .price--discount-icon {
  padding: 0.375rem 0.4375rem 0.375rem 0.4375rem;
  margin: 0rem 0.3125rem 0rem 0.3125rem;
  font-size: 0.8125rem;
  border-radius: 0.1875rem;
  display: inline-block;
  position: relative;
  background: #e74c3c;
  color: #ffffff;
  text-align: center;
  font-weight: 700;
  vertical-align: top;
}
.product--details .product--configurator .reset--configuration {
  margin: 0rem 0rem 1.25rem 0rem;
  white-space: nowrap;
}
.product--details .product--configurator .alert {
  margin: 0.625rem 0rem 0rem 0rem;
}
.product--details .buybox--form {
  padding: 0.625rem 0rem 0.625rem 0rem;
}
.product--details .buybox--quantity {
  margin: 0 2% 0 0;
  width: 35%;
}
.product--details .buybox--quantity .select-field select {
  font-size: 1rem;
  font-weight: 700;
}
.product--details .buybox--button {
  font-size: 1rem;
  white-space: nowrap;
  width: 63%;
}
.product--details .product--base-info {
  margin: 0.625rem 0rem 0.625rem 0rem;
  font-size: 0.875rem;
}
.product--details .product--base-info .entry--label {
  margin: 0rem 0.5rem 0rem 0rem;
  width: 35%;
  display: inline-block;
}
.product--details .content--description,
.product--details .content--product-reviews,
.product--details .content--related-products,
.product--details .content--similar-products {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
}
.product--details .product--properties {
  margin: 0rem 0rem 0.625rem 0rem;
}
.product--details .product--properties .product--properties-table {
  width: 100%;
  background: #ffffff;
}
.product--details .product--properties td {
  padding: 0.3125rem 0.625rem 0.3125rem 0.625rem;
  width: 50%;
  border: 0 none;
}
.product--details .product--properties tr:nth-child(even) td {
  background: #f5f5f5;
}
.product--details .content--title {
  font-size: 1.125rem;
  margin: 0.625rem 0rem 0.3125rem 0rem;
  font-weight: 700;
  color: #000000;
}
.product--details .content--title.title--description-supplier {
  margin-top: 1.5625rem;
}
.product--details .content--link [class^=icon] {
  font-size: 0.625rem;
  margin: -0.125rem 0.5rem 0rem 0rem;
}
.product--details .block-prices--container {
  margin: 0rem 0rem 0.75rem 0rem;
  display: block;
}
.product--details .block-prices--container .block-prices--table {
  width: 100%;
}
.product--details .block-prices--container .block-prices--table td,
.product--details .block-prices--container .block-prices--table th {
  padding: 0.25rem 0.625rem 0.25rem 0.625rem;
}
.product--details .block-prices--container .block-prices--table th {
  color: #fff;
  text-align: left;
}
.product--details .listing .product--box .panel--body {
  border-left: 1px solid #648119;
  border-right: 1px solid #648119;
}
.product--details .action--form {
  float: left;
}
.product--details .action--link {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  margin: 0rem 2.1875rem 0.3125rem 0rem;
  color: #ffffff;
  white-space: nowrap;
}
.product--details .action--link.action--compare {
  display: none;
}
.product--details .action--link:last-child {
  margin-right: 0;
}
.product--details .action--link:hover {
  color: #48a2e7;
}
.product--details .action--link *[class^="icon"] {
  font-size: 0.75rem;
  margin: 0rem 0.3125rem 0rem 0rem;
}
.product--details .action--link *[class="icon--star"] {
  font-size: 0.875rem;
  margin: 0rem 0.3125rem 0rem 0rem;
}
.product--details .action--compare {
  display: none;
}
.product--details .link--notepad:focus {
  outline: none;
}
.product--details .link--notepad.js--is-saved {
  color: #2ecc71;
}
.product--details .price--unit {
  font-size: 0.75rem;
}
.product--details .delivery--text {
  font-size: 0.875rem;
}
.product--details .similar--content .product-slider,
.product--details .viewed--content .product-slider,
.product--details .bought--content .product-slider,
.product--details .related--content .product-slider,
.product--details .product-streams--content .product-slider {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  min-height: 16.875rem;
}
.product--details .similar--content .product-slider--arrow.arrow--prev,
.product--details .viewed--content .product-slider--arrow.arrow--prev,
.product--details .bought--content .product-slider--arrow.arrow--prev,
.product--details .related--content .product-slider--arrow.arrow--prev,
.product--details .product-streams--content .product-slider--arrow.arrow--prev {
  border-left: 0 none;
}
.product--details .similar--content .product-slider--arrow.arrow--next,
.product--details .viewed--content .product-slider--arrow.arrow--next,
.product--details .bought--content .product-slider--arrow.arrow--next,
.product--details .related--content .product-slider--arrow.arrow--next,
.product--details .product-streams--content .product-slider--arrow.arrow--next {
  border-right: 0 none;
}
.product--navigation {
  display: none;
}
.review--form .review--field {
  margin: 0rem 0rem 0.625rem 0rem;
  width: 100%;
}
.review--form .review--field.select-field {
  max-width: 100%;
}
.review--form .review--notice {
  font-size: 0.75rem;
}
.product--description ol,
.product--description ul {
  margin: 0rem 1rem 1rem 1rem;
  padding: 0;
}
.product--description ol li,
.product--description ul li {
  margin: 0rem 0rem 0rem 0.375rem;
}
.review--entry {
  border-radius: 3px;
  background-clip: padding-box;
  margin: 0rem 0rem 1.5625rem 0rem;
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  font-size: 0.875rem;
  background: #fff;
  border: 1px solid #96c126;
}
.review--entry.is--last {
  margin: 0rem 0rem 1.875rem 0rem;
}
.review--entry.has--answer {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-clip: padding-box;
  margin: 0;
}
.review--entry .entry--header,
.review--entry .product--rating {
  margin-bottom: 0.625rem;
}
.review--entry .content--label {
  margin: 0rem 0.5rem 0rem 0rem;
  float: left;
}
.review--entry .content--field:after {
  content: "";
  display: table;
  clear: both;
}
.review--entry .content--title {
  font-size: 1rem;
}
.review--entry .review--content {
  font-size: 0.875rem;
  margin: 0;
}
.review--entry.is--answer {
  margin: 0rem 0.625rem 1.875rem 0.625rem;
  padding: 1.25rem 0.625rem 1.25rem 0.625rem;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  background-clip: padding-box;
  background: #f8f8f8;
  border-top: 0;
}
.review--entry.is--answer .entry--header {
  position: relative;
  border: 0 none;
}
.review--entry.is--answer .entry--header::after {
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
  top: -0.5625rem;
  background: #f8f8f8;
}
.content--product-reviews .alert {
  margin: 0rem 0rem 1rem 0rem;
}
.content--product-reviews .captcha--notice {
  font-size: 0.75rem;
  line-height: 1.2;
}
.product--rating-count {
  margin-left: 0.5rem;
  padding: 0.125rem 0.4375rem 0.125rem 0.4375rem;
  border-radius: 3px;
  background-clip: padding-box;
  background: #96c126;
  color: #fff;
  font-weight: 700;
}
.product--notification {
  margin: 0rem 0rem 1rem 0rem;
}
.product--notification .alert {
  margin: 0rem 0rem 0.5rem 0rem;
  word-wrap: break-word;
}
.product--notification .notification--field {
  border-top-left-radius: 3px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 3px;
  background-clip: padding-box;
  margin: 0rem 0rem 0.625rem 0rem;
  position: relative;
  width: 80%;
}
.product--notification .notification--field:focus {
  z-index: 1;
}
.product--notification .notification--button {
  padding: 0.1875rem 0.625rem 0.1875rem 0.625rem;
  margin: 0rem 0rem 0.625rem 0rem;
  border-top-left-radius: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 0;
  background-clip: padding-box;
  margin-left: -0.0625rem;
  position: relative;
  width: 20%;
}
.product--notification .notification--button .icon--mail {
  font-size: 0.75rem;
}
.product--notification .notification--captcha img {
  display: inline;
}
.product--notification .privacy-information {
  margin: 0rem 0rem 0rem 0rem;
}
.configurator--form {
  padding: 0.625rem 0rem 0.625rem 0rem;
}
.configurator--form .select-field {
  max-width: 100%;
}
.configurator--label {
  margin: 0.375rem 0rem 0.25rem 0rem;
  font-size: 0.875rem;
  font-weight: 700;
}
.is--ctl-detail .content-main--inner {
  background: #fff;
  position: relative;
}
.link--prev-button,
.link--next-button {
  display: none;
}
.base-info--entry {
  margin: 0rem 0rem 0.3125rem 0rem;
}
.tab--navigation {
  display: none;
}
.tab--title {
  color: #ffffff;
  font-weight: 700;
}
.tab--title:hover {
  color: #ffffff;
}
.tab--title:after {
  right: 0.625rem;
  font-size: 1.125rem;
  position: absolute;
  top: 50%;
  margin-top: -9px;
  content: "";
  font-family: 'shopware';
}
.tab-menu--cross-selling .tab--container {
  margin: 0rem 0rem 0.625rem 0rem;
  border-radius: 3px;
  background-clip: padding-box;
  border: 1px solid #648119;
  display: none;
}
.tab-menu--cross-selling .tab--container.has--content {
  display: block;
}
.tab-menu--cross-selling .tab--container:last-child {
  margin: 0rem 0rem 0rem 0rem;
}
.tab-menu--cross-selling .tab--header.is--active {
  border-bottom: 1px solid #648119;
}
.tab-menu--cross-selling .tab--header.is--active .tab--title:after {
  content: "\e68e";
}
.tab-menu--cross-selling .tab--title {
  padding: 0.625rem 2.375rem 0.625rem 0.625rem;
  line-height: 1.25rem;
  position: relative;
  display: block;
}
.tab-menu--cross-selling .tab--title:after {
  content: "\e68f";
}
@media screen and (min-width: 30em) {
  .product--details .configurator--form .select-field {
    height: 2.375rem;
    max-width: 80%;
  }
  .product--details .configurator--form .select-field select {
    line-height: 2.25rem;
  }
  .product--details .configurator--form .select-field:after {
    height: 2.25rem;
  }
  .product--details .configurator--form,
  .product--details .buybox--form {
    width: 80%;
  }
  .tab-menu--product {
    margin: 0rem 0rem 0.625rem 0rem;
  }
  .tab-menu--product .tab--navigation {
    display: block;
  }
  .tab-menu--product .tab--header,
  .tab-menu--product .tab--preview {
    display: none;
  }
}
@media screen and (min-width: 48em) {
  .product--details .product--header {
    padding: 1.875rem 0rem 1.25rem 0rem;
  }
  .product--details .product--header .product--title {
    font-size: 1.75rem;
    line-height: 1.875rem;
    width: 80%;
    float: left;
    border: 0 none;
  }
  .product--details .product--supplier {
    height: 4.375rem;
    width: 20%;
    float: right;
  }
  .product--details .product--supplier .product--supplier-link {
    height: 4.375rem;
  }
  .product--details .action--link.action--compare {
    display: inline-block;
  }
  .product--details .product--rating-container {
    width: 80%;
    float: left;
  }
  .product--details .product--image-container {
    width: 100%;
  }
  .product--details .product--base-info .entry--label {
    margin: 0rem 0.5rem 0rem 0rem;
  }
  .product--details .content--description,
  .product--details .content--product-reviews {
    padding: 1.875rem 1.875rem 1.875rem 1.875rem;
  }
  .product--details .content--related-products,
  .product--details .content--similar-products {
    padding: 1.25rem 2.1875rem 1.25rem 2.1875rem;
  }
  .product--details .product--properties {
    margin: 0rem 0rem 1.25rem 0rem;
  }
  .product--details .block-prices--container {
    margin-top: 0.75rem;
  }
  .product--details .tab--navigation {
    display: block;
  }
  .product--details .tab--header,
  .product--details .tab--preview {
    display: none;
  }
  .product--details .review--entry {
    padding: 1.875rem 1.875rem 1.875rem 1.875rem;
  }
  .product--details .review--entry.is--answer {
    padding: 1.875rem 1.25rem 1.875rem 1.25rem;
  }
  .product--details .tab--container {
    margin: 0rem 0rem 0rem 0rem;
  }
  .product--details .tab-menu--product {
    margin: 0rem 0rem 1.875rem 0rem;
  }
  .product--details .tab-menu--cross-selling .tab--container {
    display: none;
  }
  .product--details .review--form-container {
    width: 80%;
  }
}
@media screen and (min-width: 64em) {
  .product--details .product--image-container {
    width: 58%;
    margin-right: 4%;
    float: left;
  }
  .product--details .product--buybox {
    width: 38%;
  }
  .product--details .configurator--form {
    padding: 0.625rem 0rem 0.625rem 0rem;
  }
  .product--details .buybox--inner {
    width: 100%;
    float: none;
  }
  .product--details .product--base-info {
    margin: 0.625rem 0rem 1.25rem 0rem;
    padding: 0;
    width: 100%;
    float: none;
  }
  .product--details .product--properties {
    width: 50%;
  }
  .product--details .action--link {
    margin-right: 1.5625rem;
  }
  .product--details .review--form-container {
    width: 70%;
  }
  .product--details .product--actions {
    padding: 0rem 0rem 0.3125rem 0rem;
    border-bottom: 1px solid #96c126;
  }
  .product--details .product--buybox {
    border-bottom: 0 none;
  }
  .product--details .configurator--form,
  .product--details .buybox--form {
    width: 100%;
  }
}
@media screen and (min-width: 78.75em) {
  .is--ctl-detail .page-wrap {
    overflow-x: hidden;
  }
  .product--details .product--header {
    padding-top: 2.8125rem;
  }
  .product--details .review--form-container {
    width: 60%;
  }
  .product--navigation {
    display: block;
    position: relative;
  }
  .product--navigation .navigation--link {
    top: 8.75rem;
    display: none;
    position: absolute;
  }
  .product--navigation .link--prev-button,
  .product--navigation .link--next-button {
    width: 2.5rem;
    height: 15.9375rem;
    line-height: 15.9375rem;
    font-size: 1.5625rem;
    -webkit-transition: background 0.3s ease;
    transition: background 0.3s ease;
    background: rgba(150, 193, 38, 0.1);
    text-align: center;
    color: #fff;
    display: block;
  }
  .product--navigation .link--prev-button .link--prev-inner,
  .product--navigation .link--next-button .link--prev-inner,
  .product--navigation .link--prev-button .link--next-inner,
  .product--navigation .link--next-button .link--next-inner {
    display: none;
  }
  .product--navigation .image--wrapper {
    padding: 0.9375rem 0.9375rem 0.9375rem 0.9375rem;
    width: 12.5rem;
    height: 15.9375rem;
    float: left;
    background: #fff;
    position: relative;
  }
  .product--navigation .image--container {
    -webkit-transition: all 0.45s cubic-bezier(0.16, 0.04, 0.14, 1);
    transition: all 0.45s cubic-bezier(0.16, 0.04, 0.14, 1);
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
  }
  .product--navigation .link--prev-button {
    border-top-left-radius: 3px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 3px;
    background-clip: padding-box;
    float: left;
  }
  .product--navigation .link--prev-button:before {
    font-family: 'shopware';
    content: "\e611";
  }
  .product--navigation .link--next-button {
    border-top-left-radius: 0;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 0;
    background-clip: padding-box;
    float: right;
  }
  .product--navigation .link--next-button:before {
    font-family: 'shopware';
    content: "\e60f";
  }
  .product--navigation .link--prev,
  .product--navigation .link--next {
    -webkit-transition: all 0.38s cubic-bezier(0.16, 0.04, 0.14, 1);
    transition: all 0.38s cubic-bezier(0.16, 0.04, 0.14, 1);
  }
  .product--navigation .link--prev:hover .link--prev-button,
  .product--navigation .link--next:hover .link--prev-button,
  .product--navigation .link--prev:hover .link--next-button,
  .product--navigation .link--next:hover .link--next-button {
    background: rgba(150, 193, 38, 0.2);
  }
  .product--navigation .link--prev {
    left: -2.5rem;
  }
  .product--navigation .link--prev .image--container {
    left: 3.125rem;
  }
  .product--navigation .link--prev.can--slide:hover {
    left: -8.75rem;
  }
  .product--navigation .link--prev.can--slide:hover .image--container {
    left: 0;
  }
  .product--navigation .link--next {
    right: -2.5rem;
  }
  .product--navigation .link--next .image--container {
    right: 3.125rem;
  }
  .product--navigation .link--next.can--slide:hover {
    right: -8.75rem;
  }
  .product--navigation .link--next.can--slide:hover .image--container {
    right: 0;
  }
  .product--supplier {
    height: 4.375rem;
  }
  .product--supplier .product--supplier-link {
    height: 4.375rem;
  }
  .content--description,
  .content--product-reviews {
    padding: 0.625rem 2.8125rem 2.8125rem 2.8125rem;
  }
  .content--related-products,
  .content--similar-products {
    padding: 1.875rem 2.8125rem 1.25rem 2.8125rem;
  }
  .product--notification {
    margin: 0rem 0rem 1.25rem 0rem;
  }
  .product--notification .alert {
    margin: 0rem 0rem 0.625rem 0rem;
  }
}
/*
Footer
==========================================
Defines the styles for the storefront footer and its components.

Contains the footer columns, the navigation elements and the vat notice/logo at the bottom of the page.

It contains the viewport specific styles inside media queries.

The footer element sizes are defined with the unitize mixin.
*/
.footer-main {
  background: #fff;
}
.footer-main .footer--phone-link {
  font-size: 1.1875rem;
  font-weight: 700;
  color: #96c126;
}
.footer-main .footer--column {
  padding: 0rem 0.625rem 0rem 0.625rem;
  border-top: 1px solid #96c126;
}
.footer-main .footer--column.is--last {
  border-bottom: 1px solid #96c126;
}
.footer-main .column--headline {
  -webkit-user-select: none;
  user-select: none;
  padding: 0.5rem 0rem 0.5rem 0rem;
  margin: 0;
  font-weight: 700;
  color: #48a2e7;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.625rem;
}
.footer-main .column--headline.is--active::after {
  content: "\e68e";
}
.footer-main .column--headline::after {
  font-size: 1.125rem;
  font-family: 'shopware';
  color: #ffffff;
  font-weight: 700;
  content: "\e68f";
  float: right;
}
.footer-main .column--content {
  display: none;
}
.footer-main .column--content.is--active {
  display: block;
}
.footer-main .footer--bottom {
  font-size: 0.75rem;
  padding: 1.33333333rem 1rem 0rem 1rem;
  text-align: center;
}
.footer-main .footer--copyright {
  font-size: 0.8125rem;
}
.footer-main .footer--logo {
  font-size: 1.75rem;
  color: #009fe3;
}
.footer-main .navigation--list {
  padding: 0rem 0rem 1rem 0rem;
}
.footer-main .navigation--list .is--level1 {
  padding-bottom: 0.625rem;
}
.footer-main .navigation--list .is--level1 .navigation--entry {
  margin-left: 0.625rem;
}
.footer-main .navigation--link {
  padding: 0.625rem 0rem 0.625rem 0rem;
  display: block;
  color: #ffffff;
  cursor: pointer;
}
.footer-main .navigation--link:hover {
  color: #48a2e7;
}
.footer-main .newsletter--form {
  padding: 0rem 0rem 1rem 0rem;
}
.footer-main .newsletter--form:after {
  content: "";
  display: table;
  clear: both;
}
.footer-main .newsletter--field {
  border-top-left-radius: 3px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 3px;
  background-clip: padding-box;
  margin: 0rem 0rem 0.625rem 0rem;
  position: relative;
  width: 87.5%;
  float: left;
}
.footer-main .newsletter--field:focus {
  z-index: 1;
}
.footer-main .newsletter--button {
  box-shadow: 0 0 0 transparent;
  border-top-left-radius: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 0;
  background-clip: padding-box;
  margin: 0rem 0rem 0.625rem 0rem;
  padding: 0.1875rem 0.3125rem 0.1875rem 0.3125rem;
  margin-left: -0.0625rem;
  position: relative;
  width: 12.5%;
  text-align: center;
  float: left;
}
.footer-main .newsletter--button .icon--mail {
  font-size: 0.875rem;
  margin-right: 0rem;
}
.footer-main .newsletter--button .button--text {
  display: none;
}
.footer-main .footer--logo {
  padding: 0.625rem 0rem 0.625rem 0rem;
}
.footer-vat {
  margin-top: 0.625rem;
  padding: 0rem 0.3125rem 0rem 0.3125rem;
  background: transparent;
}
.footer--vat-info .vat-info--text {
  font-size: 0.75rem;
  margin-bottom: 0.625rem;
  text-align: center;
}
.footer-minimal {
  font-size: 0.8125rem;
  padding: 2.5rem 0.625rem 1.25rem 0.625rem;
  background: transparent;
  text-align: center;
}
.footer-main .footer-minimal {
  padding: 0;
}
.footer-minimal .footer--service-menu .service--list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.footer-minimal .footer--service-menu .service--list .service--link {
  padding: 0.5rem 0.125rem 0.5rem 0.125rem;
  display: inline-block;
}
.footer-minimal .footer--service-menu .service--list .service--entry {
  display: inline-block;
}
.footer-minimal .footer--service-menu .service--list .service--entry:after {
  height: 0.625rem;
  width: 0.0625rem;
  margin: 0rem 0.3125rem 0rem 0.3125rem;
  border-left: 1px solid #75961e;
  display: inline-block;
  content: '';
}
.footer-minimal .footer--service-menu .service--list .service--entry:last-child:after {
  display: none;
}
.footer-minimal .footer--vat-info {
  margin: 0.9375rem 0rem 0.625rem 0rem;
}
.footer-minimal .footer--vat-info .vat-info--text {
  line-height: 1.125rem;
  margin: 0;
}
@media screen and (min-width: 48em) {
  .footer-main .footer-minimal {
    display: none;
  }
}
@media screen and (min-width: 48em) {
  .footer-main {
    border-top: 1px solid #96c126;
  }
  .footer-main .column--headline {
    margin: 1.75rem 0rem 0.625rem 0rem;
    padding: 0;
    cursor: text;
  }
  .footer-main .column--headline::after {
    display: none;
  }
  .footer-main .footer--column {
    padding: 0rem 0.625rem 0rem 0rem;
    width: 25%;
    border: 0 none;
  }
  .footer-main .footer--column.is--last {
    padding-right: 0;
    border-bottom: 0 none;
  }
  .footer-main .footer--columns {
    padding: 0rem 1.875rem 0rem 1.875rem;
    border-bottom: 1px solid #96c126;
  }
  .footer-main .column--content {
    display: block;
  }
  .footer-main .navigation--list .is--level1 {
    display: none;
  }
  .footer-main .navigation--entry {
    padding: 0;
  }
  .footer-main .navigation--link {
    line-height: 1.7;
    padding: 0;
  }
  .footer-main .newsletter--field {
    width: 80%;
  }
  .footer-main .newsletter--button {
    width: 20%;
  }
  .footer-main .newsletter--button .icon--mail {
    font-size: 0.75rem;
  }
  .footer-vat {
    padding: 0;
  }
  .footer--vat-info .vat-info--text {
    margin-bottom: 1.25rem;
  }
}
@media screen and (min-width: 78.75em) {
  .footer-main .footer--columns {
    padding: 0rem 0rem 1.25rem 0rem;
  }
  .footer-main .footer--bottom {
    font-size: 0.9375rem;
  }
  .footer-minimal {
    padding-top: 0;
  }
}
/*
Sidebar
==============================================
Defines the styling of the storefront sidebar navigation and its components.

The sidebar is displayed inside the off-canvas menu on small devices.

```
<ul class="sidebar--navigation">
    <li class="navigation--entry is--active has--sub-categories has--sub-children">
        <a class="navigation--link is--active has--sub-categories">
            Sidebar Head
        </a>
        <ul class="sidebar--navigation is--level1">
            <li class="navigation--entry has--sub-children" role="menuitem">
                <a class="navigation--link">
                    Navigation entry
                </a>
                <a class="navigation--link">
                    Navigation entry
                </a>
                <a class="navigation--link">
                    Navigation entry
                </a>
            </li>
        </ul>
    </li>
</ul>
```
*/
body > .sidebar-main {
  padding-bottom: 1.25rem;
  border-right: #96c126;
}
body > .sidebar-main:after {
  content: "";
  display: table;
  clear: both;
}
.sidebar-main.off-canvas,
#cookie-consent,
#cookie-consent {
  background: #f8f8f8;
}
.mobile--switches {
  padding: 0.375rem 0.625rem 0.375rem 0.625rem;
  height: 2.6875rem;
  display: block;
}
.mobile--switches:after {
  content: "";
  display: table;
  clear: both;
}
.mobile--switches .navigation--entry {
  margin-right: 1.25rem;
  float: left;
}
.mobile--switches .field--select,
.mobile--switches .navigation--entry {
  height: 1.875rem;
}
.mobile--switches .field--select {
  position: relative;
}
.mobile--switches .select-field {
  height: 1.875rem;
}
.mobile--switches .select-field select {
  border-radius: 0;
  padding: 0rem 1.125rem 0rem 0rem;
  line-height: 1.75rem;
  font-size: 1rem;
  background: none;
  border: 0 none;
}
.mobile--switches .select-field:after {
  height: 1.5625rem;
  line-height: 1.75rem;
  width: auto;
  border: 0 none;
}
.mobile--switches .top-bar--language .select-field {
  width: 2rem;
}
.mobile--switches .top-bar--language .select-field select {
  text-indent: -9999px;
}
.mobile--switches .top-bar--language .language--flag {
  margin-top: -0.375rem;
  position: absolute;
  z-index: 900;
  top: 50%;
  left: 0;
  pointer-events: none;
}
.campaign--box {
  display: none;
}
.sidebar--navigation {
  border-radius: 0;
  margin: 0;
  border-left: 0 none;
  border-right: 0 none;
}
.sidebar--navigation .navigation--entry {
  position: relative;
}
.sidebar--navigation .navigation--link {
  padding: 0.625rem 1.25rem 0.625rem 1.25rem;
  width: 100%;
  height: 100%;
  display: block;
}
.sidebar--navigation .navigation--link .is--icon-right {
  margin-top: 0.3125rem;
  font-size: 0.625rem;
  display: inline-block;
  float: right;
}
.sidebar--navigation .navigation--link:hover {
  color: #48a2e7;
}
.sidebar--navigation.show--active-items .navigation--link.is--active {
  color: #48a2e7;
  font-weight: 700;
}
.offcanvas--overlay {
  width: 17.5rem;
  top: 2.625rem;
  background: #f8f8f8;
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  left: 0;
  padding: 0;
  z-index: 1200;
  bottom: 0;
}
.offcanvas--overlay.background {
  z-index: 1100;
}
.offcanvas--overlay .overlay--headline {
  margin-bottom: 0.625rem;
  border-bottom: 1px solid #96c126;
  width: 100%;
  background: #fff;
}
.offcanvas--overlay .overlay--category {
  margin: 1rem 0.625rem 0.375rem 0.625rem;
  line-height: 1.625rem;
}
.offcanvas--overlay .overlay--category .category--headline {
  font-size: 0.875rem;
  color: #000000;
  margin: 0;
  padding: 0;
  font-weight: 700;
}
.offcanvas--overlay .is--icon-left {
  margin-top: 0.3125rem;
  margin-right: 0.3125rem;
  font-size: 0.625rem;
  display: inline-block;
}
.offcanvas--overlay .is--icon-right {
  margin-top: 0.3125rem;
  font-size: 0.625rem;
  display: inline-block;
  float: right;
}
.offcanvas--overlay .is--back-button {
  font-weight: 700;
}
.offcanvas--overlay .is--display-button {
  color: #48a2e7;
  font-weight: 700;
}
.has--cssanimations .sidebar--ajax-loader {
  top: 0.75rem;
  right: 0.9375rem;
  position: absolute;
  display: none;
}
.has--cssanimations .sidebar--ajax-loader::before {
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background-clip: padding-box;
  -webkit-animation: keyframe--spin 1s linear infinite;
  animation: keyframe--spin 1s linear infinite;
  display: block;
  content: "";
  border: 2px solid #96c126;
  border-top: 2px solid #000000;
}
.sidebar--ajax-loader {
  top: 0.75rem;
  right: 0.9375rem;
  position: absolute;
  display: none;
}
.sidebar--ajax-loader::before {
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background-clip: padding-box;
  -webkit-animation: keyframe--spin 1s linear infinite;
  animation: keyframe--spin 1s linear infinite;
  display: block;
  content: "";
  border: 2px solid #96c126;
  border-top: 2px solid #000000;
}
.listing--sidebar {
  overflow: hidden;
  width: 0;
  height: 0;
  margin-bottom: 1.25rem;
}
.listing--sidebar .sidebar-filter .off-canvas.is--open.is--ajax-reload {
  overflow: hidden;
}
.listing--sidebar .sidebar-filter .off-canvas.is--open.is--ajax-reload .filter--container {
  overflow: auto;
  position: absolute;
  top: 43px;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
}
.listing--sidebar .sidebar-filter .off-canvas.is--open.is--ajax-reload .filter--close-btn {
  position: absolute;
  width: 100%;
  z-index: 10;
}
.listing--sidebar .sidebar-filter .action--filter-options {
  border-radius: 3px;
  background-clip: padding-box;
  border: 1px solid #96c126;
}
.listing--sidebar .sidebar-filter .filter--active {
  max-width: 100%;
}
.listing--sidebar .sidebar-filter .filter--container {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  margin: 0;
}
.listing--sidebar .sidebar-filter .filter--container .filter-panel {
  margin: 0rem 0rem 0.625rem 0rem;
  float: none;
  width: auto;
}
.listing--sidebar .sidebar-filter .filter--actions {
  width: auto;
  padding: 0;
  margin: 0;
}
.listing--sidebar .sidebar-filter .filter--actions.filter--actions-top {
  margin: 0;
}
.listing--sidebar .sidebar-filter .filter--actions .filter--btn-apply {
  width: 100%;
}
.listing--sidebar .sidebar-filter #filter {
  display: block;
  padding: 0;
}
@media screen and (min-width: 48em) {
  .listing--sidebar {
    width: 14.375rem;
    height: auto;
    display: block;
    float: left;
  }
  .listing--sidebar + .content--wrapper {
    margin-left: 16.25rem;
  }
  .is--no-sidebar .listing--sidebar {
    display: none;
  }
  .is--no-sidebar .listing--sidebar + .content--wrapper {
    margin: 0;
  }
  .offcanvas--overlay {
    display: none;
  }
  .sidebar-main {
    width: 14.375rem;
    margin: 0rem 0rem 0rem 0rem;
    padding-top: 1.875rem;
    display: none;
    float: left;
  }
  .is--ctl-listing .sidebar-main,
  .is--ctl-forms .sidebar-main,
  .is--ctl-tellafriend .sidebar-main,
  .is--ctl-newsletter .sidebar-main,
  .is--ctl-sitemap .sidebar-main,
  .is--ctl-custom .sidebar-main,
  .is--ctl-note.is--user .sidebar-main,
  .is--ctl-address .sidebar-main,
  .is--ctl-account.is--user .sidebar-main {
    display: block;
  }
  .is--ctl-listing .sidebar-main + .content--wrapper,
  .is--ctl-forms .sidebar-main + .content--wrapper,
  .is--ctl-tellafriend .sidebar-main + .content--wrapper,
  .is--ctl-newsletter .sidebar-main + .content--wrapper,
  .is--ctl-sitemap .sidebar-main + .content--wrapper,
  .is--ctl-custom .sidebar-main + .content--wrapper,
  .is--ctl-note.is--user .sidebar-main + .content--wrapper,
  .is--ctl-address .sidebar-main + .content--wrapper,
  .is--ctl-account.is--user .sidebar-main + .content--wrapper {
    margin-left: 16.25rem;
  }
  .is--ctl-blog .sidebar-main,
  .is--ctl-note .sidebar-main,
  .is--ctl-note.is--user.is--one-time-account .sidebar-main,
  .is--ctl-index .sidebar-main,
  .is--ctl-detail .sidebar-main,
  .is--ctl-search .sidebar-main,
  .is--ctl-checkout .sidebar-main,
  .is--ctl-register .sidebar-main,
  .is--ctl-campaign .sidebar-main,
  .is--ctl-account.is--act-logout .sidebar-main,
  .is--ctl-account.is--act-abort .sidebar-main,
  .is--ctl-account.is--act-password .sidebar-main,
  .is--ctl-account.is--act-resetpassword .sidebar-main,
  .is--ctl-listing.is--no-sidebar .sidebar-main {
    display: none;
  }
  .is--ctl-blog .sidebar-main + .content--wrapper,
  .is--ctl-note .sidebar-main + .content--wrapper,
  .is--ctl-note.is--user.is--one-time-account .sidebar-main + .content--wrapper,
  .is--ctl-index .sidebar-main + .content--wrapper,
  .is--ctl-detail .sidebar-main + .content--wrapper,
  .is--ctl-search .sidebar-main + .content--wrapper,
  .is--ctl-checkout .sidebar-main + .content--wrapper,
  .is--ctl-register .sidebar-main + .content--wrapper,
  .is--ctl-campaign .sidebar-main + .content--wrapper,
  .is--ctl-account.is--act-logout .sidebar-main + .content--wrapper,
  .is--ctl-account.is--act-abort .sidebar-main + .content--wrapper,
  .is--ctl-account.is--act-password .sidebar-main + .content--wrapper,
  .is--ctl-account.is--act-resetpassword .sidebar-main + .content--wrapper,
  .is--ctl-listing.is--no-sidebar .sidebar-main + .content--wrapper {
    margin: 0;
  }
  .is--ctl-note .sidebar-main .categories--headline,
  .is--ctl-address .sidebar-main .categories--headline,
  .is--ctl-account .sidebar-main .categories--headline,
  .is--ctl-note .sidebar-main .categories--navigation,
  .is--ctl-address .sidebar-main .categories--navigation,
  .is--ctl-account .sidebar-main .categories--navigation,
  .is--ctl-note .sidebar-main .shop-sites--container,
  .is--ctl-address .sidebar-main .shop-sites--container,
  .is--ctl-account .sidebar-main .shop-sites--container {
    display: none;
  }
  .sidebar-main .mobile--switches,
  .sidebar-main .filter--container,
  .sidebar-main .navigation--smartphone {
    display: none;
  }
  .sidebar-main .sidebar--categories-wrapper {
    display: block;
  }
  .navigation--headline {
    margin: 1.25rem 0.625rem 0.625rem 0.625rem;
  }
  .campaign--box {
    margin: 0rem 0rem 1.25rem 0rem;
    display: block;
  }
  .categories--headline {
    display: none;
  }
  .categories--navigation.is--level0 .navigation--entry:first-child .navigation--link.is--active {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    background-clip: padding-box;
  }
  .categories--navigation.is--level1 .navigation--entry:first-child .navigation--link.is--active {
    border-radius: 0;
  }
  .sidebar--categories-navigation {
    margin-bottom: 1.25rem;
  }
  .sidebar--navigation {
    border-radius: 3px;
    background-clip: padding-box;
    border: 1px solid #96c126;
  }
  .sidebar--navigation .navigation--entry {
    padding: 0rem 0rem 0rem 0rem;
    margin: 0rem 0.625rem 0rem 0.625rem;
  }
  .sidebar--navigation ul.sidebar--navigation {
    border-radius: 0;
  }
  .sidebar--navigation ul.sidebar--navigation .navigation--entry {
    margin: 0rem 0rem 0rem 0.625rem;
  }
  .sidebar--navigation .navigation--link {
    padding: 0.625rem 0.625rem 0.625rem 0.625rem;
    display: block;
  }
  .sidebar--navigation .navigation--link:hover {
    color: #48a2e7;
  }
  .sidebar--navigation .navigation--link.is--active {
    color: #48a2e7;
    font-weight: 700;
  }
  .sidebar--navigation .navigation--link .is--icon-right {
    display: none;
  }
  .sidebar--navigation .is--level1 {
    margin-bottom: 0.625rem;
    border: 0 none;
  }
  .sidebar--navigation .is--level1 .navigation--entry {
    margin: 0rem 0rem 0rem 0rem;
    border: 0 none;
  }
  .sidebar--navigation .is--level1 .navigation--link {
    padding: 0.3125rem 0.625rem 0.3125rem 0.625rem;
  }
  .sidebar--navigation .is--level1 .navigation--link.is--active {
    font-weight: 700;
    text-shadow: none;
    color: #48a2e7;
    background: transparent;
    border: 0 none;
  }
  .sidebar--navigation .is--level2 {
    font-size: 0.75rem;
  }
  .sidebar--navigation .navigation--level-high {
    border: 0 none;
  }
  .shop-sites--container {
    padding: 0.9375rem 0.625rem 0.9375rem 0.625rem;
    margin-bottom: 1.25rem;
    border: 1px solid #96c126;
  }
  .shop-sites--container .shop-sites--headline {
    padding-bottom: 0.66666667rem;
    font-size: 1rem;
    margin-top: 0;
    border-bottom: 1px solid #96c126;
    color: #000000;
    font-weight: 700;
  }
  .shop-sites--container .shop-sites--navigation,
  .shop-sites--container .navigation--entry {
    border: 0 none;
  }
  .shop-sites--container .shop-sites--navigation .navigation--link,
  .shop-sites--container .navigation--entry .navigation--link {
    padding: 0.3125rem 0.625rem 0.3125rem 0.625rem;
  }
  .sidebar-filter .filter--active-container {
    margin: 0;
    padding: 0;
  }
  .sidebar-filter .is--instant-filter .filter--facet-container .filter-panel:last-child {
    margin-bottom: 0;
  }
  .sidebar-filter .filter--facet-container,
  .sidebar-filter .filter--actions-bottom,
  .sidebar-filter .filter--active-container {
    display: block;
  }
  .sidebar-filter .filter--facet-container {
    padding: 0;
  }
  .listing--sidebar .sidebar-filter .filter-panel.is--collapsed {
    height: auto;
  }
  .listing--sidebar .sidebar-filter .filter-panel.is--collapsed .filter-panel--flyout {
    position: relative;
  }
  .listing--sidebar + .search--results {
    margin-left: 16.25rem;
  }
  .listing--sidebar + .search--results .listing--wrapper {
    float: left;
  }
}
@media screen and (min-width: 48em) {
  .is--ctl-forms .sidebar-main .sidebar--categories-navigation,
  .is--ctl-custom .sidebar-main .sidebar--categories-navigation {
    display: none;
  }
  .is--ctl-forms .sidebar-main .shop-sites--container,
  .is--ctl-custom .sidebar-main .shop-sites--container {
    display: block;
  }
  .sidebar-main .shop-sites--container {
    display: none;
  }
  .sidebar-main.off-canvas,
  #cookie-consent,
  #cookie-consent {
    background: transparent;
  }
}
@media screen and (min-width: 78.75em) {
  .sidebar-main {
    padding-top: 2.8125rem;
    display: block;
  }
  .sidebar-main.off-canvas,
  #cookie-consent,
  #cookie-consent {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1000;
  }
}
/*
Listing
==========================================
Contains the styles of the product listing and its components.

The styling defines the listing components such as the product filter element.

It contains the viewport specific styles inside media queries.
*/
.listing--content {
  margin: 1.25rem 0rem 1.25rem 0rem;
}
.banner--container {
  margin: 0rem 0rem 1.25rem 0rem;
}
.category--teaser {
  margin: 0rem 0rem 1.25rem 0rem;
}
.category--teaser .hero--text {
  padding: 0.625rem 1.25rem 0.625rem 1.25rem;
}
.category--teaser .offcanvas--content {
  padding: 1.25rem;
}
.category--teaser .offcanvas--content .content--title {
  font-size: 1.125rem;
  margin: 0.625rem 0rem 0.9375rem 0rem;
  font-weight: 700;
  color: #000000;
}
.vendor--info {
  margin: 0rem 0rem 1.25rem 0rem;
}
.vendor--info:after {
  content: "";
  display: table;
  clear: both;
}
.vendor--info .vendor--image-wrapper {
  margin: 0rem 0rem 0.625rem 0rem;
  max-width: 12.5rem;
  height: 4.375rem;
  margin-left: auto;
  margin-right: auto;
}
.vendor--info .vendor--image {
  margin: 0 auto;
  height: 100%;
}
.vendor--info .vendor--text {
  margin: 0rem 0rem 1.25rem 0rem;
}
.listing--actions {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.listing--actions:after {
  content: "";
  display: table;
  clear: both;
}
.listing--wrapper.js--is-loading .js--loading-indicator {
  top: 9.375rem;
}
.listing {
  -webkit-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
  opacity: 1;
}
.listing.is--loading {
  opacity: 0;
}
.action--filter-btn {
  margin-bottom: 0.625rem;
}
.action--filter-btn .filter--trigger {
  height: 2.125rem;
  padding: 0.25rem 0.25rem 0.25rem 0.625rem;
  line-height: 1.5rem;
  display: block;
  position: relative;
  overflow: hidden;
}
.action--filter-btn .filter--trigger .icon--filter {
  margin-right: 0.5rem;
}
.action--filter-btn .filter--trigger .action--collapse-icon {
  padding: 0rem 0.625rem 0rem 0.625rem;
  line-height: 1.5rem;
  background-color: #7abef2;
  background-image: linear-gradient(to bottom, #7abef2 0%, #48a2e7 100%);
  border-radius: 3px;
  background-clip: padding-box;
  display: inline-block;
  color: #fff;
  float: right;
}
.action--filter-options .filter--container {
  padding: 0rem 0.625rem 0rem 0.625rem;
}
.action--filter-options .filter--close-btn {
  padding: 0.75rem 0.625rem 0.75rem 0.625rem;
  background-color: #96c126;
  background-image: linear-gradient(to bottom, #96c126 0%, #648119 100%);
  display: block;
  color: #fff;
  font-weight: 700;
}
.action--filter-options .filter--close-btn:hover {
  color: #fff;
}
.action--filter-options .filter--close-btn .icon--arrow-right {
  margin: 0.1875rem 0rem 0rem 0rem;
  float: right;
}
.action--filter-options .filter--btn-apply {
  clear: both;
}
.action--filter-options .filter--list {
  list-style: none;
}
.action--filter-options .filter--entry {
  padding: 0.625rem 1.25rem 0.625rem 1.25rem;
  font-size: 1rem;
  display: block;
  border-bottom: 1px solid #96c126;
}
.action--filter-options .filter--entry:last-child {
  border: 0 none;
}
.action--filter-options .filter--link {
  color: #ffffff;
}
.action--filter-options .filter--link:hover {
  color: #48a2e7;
}
.action--sort {
  margin-bottom: 1.25rem;
  display: block;
}
.action--sort .sort--label {
  display: none;
}
.action--sort .sort--select {
  height: 2.125rem;
  max-width: 100%;
}
.action--sort .sort--select:after,
.action--sort .sort--select .sort--field {
  line-height: 2.125rem;
}
.action--per-page {
  display: none;
}
.listing--paging {
  padding: 0.625rem 0rem 0.625rem 0rem;
  display: block;
}
.listing--paging:after {
  content: "";
  display: table;
  clear: both;
}
.listing--paging .paging--label {
  display: none;
}
.listing--paging .paging--display {
  line-height: 1.875rem;
  margin-left: 0.625rem;
}
.listing--bottom-paging {
  margin: 0.625rem 0rem 1.25rem 0rem;
}
.listing--container {
  overflow: hidden;
}
.listing {
  margin: -2% 0 0 -2%;
  padding: 0 0 2% 0;
}
.listing:after {
  content: "";
  display: table;
  clear: both;
}
.infinite--actions {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.infinite--actions .js--load-more,
.infinite--actions .js--load-previous {
  margin-bottom: 1.25rem;
}
@media screen and (min-width: 48em) {
  .category--teaser .hero--headline {
    font-size: 1.625rem;
    padding: 2.5rem 0rem 0rem 0rem;
    margin: 0rem 2.5rem 0rem 2.5rem;
  }
  .category--teaser .hero--text {
    padding: 1.5625rem 2.5rem 0.625rem 2.5rem;
  }
  .listing--content {
    margin: 1.875rem 0rem 1.875rem 0rem;
  }
  .listing--content:after {
    content: "";
    display: table;
    clear: both;
  }
  .vendor--info .vendor--image-wrapper {
    margin: 0rem 1.25rem 1.25rem 0rem;
    float: left;
  }
  .vendor--info .vendor--image-wrapper + .vendor--text {
    margin: 0rem 0rem 0rem 15.625rem;
  }
  .vendor--info .vendor--image-wrapper .vendor--image {
    margin: 0;
  }
  .listing--actions {
    border-radius: 3px;
    background-clip: padding-box;
    margin: 0rem 0rem 1.25rem 0rem;
    padding-top: 0.625rem;
    border: 1px solid #96c126;
    background: #f8f8f8;
  }
  .listing--actions .listing--paging {
    padding: 0.625rem 0.625rem 0.625rem 0.625rem;
    display: block;
    border-top: 1px solid #96c126;
  }
  .listing--actions.without-facets.without-sortings.without-pagination {
    display: none;
  }
  .listing--actions.without-facets.without-sortings {
    padding-top: 0rem;
    border-top: none;
  }
  .action--per-page {
    line-height: 2rem;
    display: inline-block;
    width: 30%;
    text-align: right;
    float: right;
  }
  .action--per-page .per-page--label {
    display: none;
  }
  .action--per-page .per-page--select {
    width: 5rem;
    height: 2rem;
    vertical-align: top;
  }
  .action--per-page .per-page--select:after,
  .action--per-page .per-page--select .per-page--field {
    line-height: 1.875rem;
    text-align: center;
  }
  .action--sort {
    width: 12.5rem;
    margin: 0rem 0.625rem 0rem 0rem;
    display: inline-block;
    text-align: right;
    float: right;
  }
  .action--sort .sort--select {
    max-width: 12.5rem;
  }
  .action--filter-btn {
    width: 11.875rem;
    margin: 0rem 1.25rem 0.625rem 0.625rem;
    float: left;
  }
  .action--filter-btn .filter--trigger .action--collapse-icon {
    display: none;
  }
  .action--filter-btn .filter--trigger:before,
  .action--filter-btn .filter--trigger:after {
    -webkit-transition: margin-top 0.4s cubic-bezier(0.02, 0.01, 0.47, 1);
    transition: margin-top 0.4s cubic-bezier(0.02, 0.01, 0.47, 1);
    width: 1rem;
    height: 1rem;
    right: 0.625rem;
    margin-top: -0.5rem;
    font-size: 0.375rem;
    line-height: 1rem;
    font-family: 'shopware';
    content: "\e612";
    position: absolute;
    text-align: center;
    background: none;
    color: inherit;
    top: 50%;
  }
  .action--filter-btn .filter--trigger:after {
    margin-top: -3rem;
    content: "\e610";
  }
  .action--filter-btn .filter--trigger.is--active {
    padding: 0.125rem 0.75rem 0.125rem 0.75rem;
    line-height: 2.125rem;
    background-color: #48a2e7;
    background-image: linear-gradient(to bottom, #48a2e7 0%, #48a2e7 100%);
    border: 0 none;
    color: #ffffff;
    /** State: Small button */
    /** State: Large button */
  }
  .action--filter-btn .filter--trigger.is--active:hover {
    background: #7abef2;
    color: #ffffff;
  }
  .action--filter-btn .filter--trigger.is--active.is--small {
    line-height: 1.875rem;
  }
  .action--filter-btn .filter--trigger.is--active.is--large {
    line-height: 2.375rem;
  }
  .action--filter-btn .filter--trigger.is--active:before {
    margin-top: 2.5rem;
  }
  .action--filter-btn .filter--trigger.is--active:after {
    margin-top: -0.5rem;
  }
  .action--filter-options {
    width: auto;
    height: auto;
    padding: 0;
    overflow: visible;
    position: relative;
    background: #fff;
    border: 0 none;
    clear: both;
  }
  .action--filter-options.is--collapsed,
  .action--filter-options.is--active-filter {
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: #96c126;
  }
  .action--filter-options.is--active-filter .filter--active-container {
    display: block;
  }
  .action--filter-options.is--instant-filter-active .filter--active-container {
    display: block;
  }
  .action--filter-options .filter--close-btn {
    display: none;
  }
  .action--filter-options .filter--container {
    margin-left: -2%;
    padding-left: 3%;
  }
  .action--filter-options .filter--container:after {
    content: "";
    display: table;
    clear: both;
  }
  .action--filter-options .filter--group {
    height: 2.375rem;
    width: 31%;
    margin: 0 2% 2% 0;
    position: relative;
    float: left;
  }
  .action--filter-options .filter--header {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1100;
  }
  .action--filter-options .filter--header.is--active {
    z-index: 1300;
  }
  .action--filter-options .filter--content {
    top: 2.375rem;
    width: 100%;
    position: absolute;
    left: 0;
  }
  .action--filter-options #filter:after {
    content: "";
    display: table;
    clear: both;
  }
  .listing--bottom-paging {
    padding: 0rem 0.625rem 0rem 0.625rem;
    border-radius: 3px;
    background-clip: padding-box;
    border: 1px solid #96c126;
    background: #f8f8f8;
  }
}
@media screen and (min-width: 78.75em) {
  .listing--content {
    padding-top: 2.8125rem;
    margin: 0rem 0rem 0rem 0rem;
  }
  .action--filter-btn {
    width: 20%;
    margin-right: 2%;
  }
  .action--filter-btn .filter--trigger {
    font-size: 0.875rem;
  }
  .action--filter-btn .filter--trigger .action--collapse-icon {
    margin-top: -0.5rem;
  }
  .action--filter-options {
    background: #fff;
  }
  .action--filter-options.is--collapsed,
  .action--filter-options.is--active-filter {
    border-width: 1px 0 0 0;
  }
  .action--sort {
    line-height: 2rem;
    margin: 0rem 0.625rem 0.625rem 0rem;
    width: 40%;
  }
  .action--sort .sort--label {
    margin: 0rem 0.625rem 0rem 0rem;
    display: inline-block;
    font-weight: 700;
  }
  .action--sort .sort--select {
    max-width: 12.5rem;
    vertical-align: top;
  }
  .action--per-page .per-page--label {
    margin: 0rem 0.625rem 0rem 0rem;
    display: inline-block;
    font-weight: 700;
  }
  .listing--paging {
    display: block;
    clear: both;
  }
  .listing--paging .paging--label {
    margin: 0rem 0.625rem 0rem 0rem;
    font-weight: 700;
  }
  .listing--paging .paging--display {
    line-height: 1.875rem;
  }
}
/*
Product-box
===============================
Defines the element styles of the Shopware product boxes.

Shopware provides 3 product box types:<br/>
`box-basic`<br/>
`box-minimal`<br/>
`box-image`

```
<div class="product--box">
    <div class="box--content is--rounded">
        <div class="product--info">

            <a href="" class="product--image">
                <!-- Article images -->
            </a>

            <div class="product--rating-container">
                <!-- Product rating stars -->
            </div>

            <a href="" class="product--title" title="">
                Product title
            </a>

            <div class="product--description">
                Dux texo propino, hic tres, casus Ubertas, pax Alumnus catena, ut,
                acer tero an, per edo in is arx Arma querul.
            </div>

            <div class="product--price-info">
                <div class="price--unit">
                </div>
                <div class="product--price">
                    <span class="price--default is--nowrap">
                        35,00 €
                    </span>
                </div>
            </div>

            <div class="product--btn-container"">
                <!-- Product buy button
            </div>

            <div class="product--actions">
                <!-- Product action links e.g. product compare
            </div>

        </div>
    </div>
</div>
```
*/
.product--box {
  display: block;
  width: 100%;
  padding: 2% 0 0 2%;
  float: left;
  /*
Product Badges
==========================================
Creates a corner product badge on a product-box.
```
<div class="product--box">
    <div class="product--badges">
        <div class="product--badge badge--discount">
            <i class="icon--percent2"></i>
        </div>
    </div>
</div>

```
*/
}
.product--box:after {
  content: "";
  display: table;
  clear: both;
}
.product--box .box--content {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  height: 100%;
  border: 1px solid #96c126;
  position: relative;
}
.product--box .product--image {
  height: 11.25rem;
  margin: 0rem 0rem 0.3125rem 0rem;
  display: block;
  text-align: center;
}
.product--box .product--image .image--element {
  height: 100%;
  width: 100%;
  display: block;
  margin: 0 auto;
  position: relative;
}
.product--box .product--image .image--element img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: inline-block;
  vertical-align: middle;
  z-index: 500;
}
.product--box .product--rating-container {
  height: 1.5625rem;
  display: block;
}
.product--box .product--title {
  height: 2.5rem;
  margin: 0rem 0rem 0.3125rem 0rem;
  font-size: 1rem;
  line-height: 1.25rem;
  display: block;
  width: 100%;
  color: #000000;
  font-weight: 700;
  overflow: hidden;
}
.product--box .product--title:hover {
  color: #ffffff;
}
.product--box .variant--description {
  height: 2.5rem;
  margin: 0rem 0rem 0.3125rem 0rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
  display: block;
  width: 100%;
  color: #000000;
  overflow: hidden;
  font-weight: 500;
}
.product--box .variant--description .variant--groupName {
  font-weight: 700;
}
.product--box .variant--description .variant--description--line {
  white-space: nowrap;
}
.product--box .product--description {
  height: 4.5rem;
  margin: 0rem 0rem 0.625rem 0rem;
  font-size: 0.875rem;
  line-height: 1.125rem;
  display: block;
  width: 100%;
  overflow: hidden;
}
.product--box .product--price-info {
  height: 3.125rem;
}
.product--box .product--price-info .price--unit {
  height: 1.25rem;
  font-size: 0.6875rem;
  line-height: 1rem;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.product--box .product--price-info .price--unit[title] {
  user-select: none;
}
.product--box .product--price-info .price--unit[title]:hover {
  user-select: auto;
}
.product--box .product--price {
  height: 1.875rem;
}
.product--box .product--price .price--default {
  font-size: 1.125rem;
  line-height: 1.25rem;
  display: inline-block;
  color: #000000;
  font-weight: 700;
}
.product--box .product--price .price--default.is--discount {
  color: #e74c3c;
}
.product--box .product--price .price--pseudo {
  font-size: 0.75rem;
  line-height: 1.25rem;
}
.product--box .product--price .price--discount {
  font-size: 0.75rem;
  line-height: 1.25rem;
  display: inline-block;
  text-decoration: line-through;
  vertical-align: baseline;
}
.product--box .buybox--form {
  height: 2.625rem;
  margin-top: 0.4375rem;
}
.product--box .buybox--form i.icon--basket {
  display: none;
}
.product--box .product--detail-btn {
  height: 2.625rem;
  margin-top: 0.4375rem;
}
.product--box .product--actions {
  margin: 0.9375rem 0rem 0rem 0rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  overflow: auto;
}
.product--box .product--actions form {
  display: inline-block;
}
.product--box .product--action {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  margin: 0rem 1.25rem 0rem 0rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  display: inline-block;
  color: #ffffff;
  word-break: keep-all;
  white-space: nowrap;
}
.product--box .product--action [class^="icon--"] {
  margin: 0rem 0.3125rem 0rem 0rem;
  font-size: 0.75rem;
}
.product--box .product--action:hover {
  color: #ffffff;
}
.product--box .action--compare {
  display: none;
}
.product--box .action--note:focus {
  outline: none;
}
.product--box .action--note.js--is-saved {
  color: #2ecc71;
}
.product--box .product--badges {
  top: 1.25rem;
  left: -0.0625rem;
  position: absolute;
  z-index: 750;
}
.product--box .product--badges .product--badge {
  padding: 0.1875rem 0.625rem 0.1875rem 0.625rem;
  margin: 0rem 0rem 0.3125rem 0rem;
  font-size: 0.875rem;
  line-height: 1rem;
  border-top-left-radius: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 0;
  background-clip: padding-box;
  display: block;
  float: left;
  position: relative;
  text-align: center;
  font-weight: 700;
  clear: both;
}
.product--box .product--badges .badge--discount {
  color: #ffffff;
  background: #e74c3c;
}
.product--box .product--badges .badge--recommend {
  color: #ffffff;
  background: #2ecc71;
}
.product--box .product--badges .badge--newcomer {
  color: #ffffff;
  background: #f1c40f;
}
.product--box .product--badges .badge--esd {
  background: #48a2e7;
  color: #ffffff;
}
.box--minimal {
  width: 50%;
}
.box--minimal .product--image {
  height: 7.5rem;
}
.box--minimal .product--price-info {
  height: 4.375rem;
}
.box--minimal .product--price-info .price--unit {
  height: 1.875rem;
  font-size: 0.625rem;
  line-height: 0.875rem;
  display: block;
}
.box--minimal .product--price-outer {
  height: 2.5rem;
  position: relative;
}
.box--minimal .product--price {
  line-height: 1.25rem;
  position: absolute;
  bottom: 0;
  left: 0;
  height: auto;
}
.box--minimal .product--price .price--default {
  font-size: 1rem;
  line-height: 1.25rem;
  margin: 0rem 0.3125rem 0rem 0rem;
  vertical-align: bottom;
  float: left;
}
.box--minimal .product--price .price--pseudo,
.box--minimal .product--price .price--discount {
  font-size: 0.625rem;
  line-height: 0.875rem;
}
.box--minimal .buybox--form .buy-btn--cart-text {
  display: none;
}
.box--minimal .buybox--form i.icon--basket {
  left: 0.125rem;
  top: 0.0625rem;
  font-size: 0.875rem;
  display: inline-block;
  position: relative;
}
.box--image .product--image {
  margin: 0rem 0rem 0.3125rem 0rem;
  width: auto;
  position: relative;
  height: 12.5rem;
}
.box--image .product--info {
  padding: 0;
}
.box--slider {
  display: block;
  padding: 0;
  position: relative;
  text-align: center;
  float: none;
}
.box--slider:hover .product--title {
  color: #48a2e7;
}
.box--slider .box--content {
  border: 0 none;
  padding: 0;
}
.box--slider .product--price-info {
  height: auto;
}
.box--slider .product--price-info .price--unit {
  height: 0.875rem;
  font-size: 0.625rem;
}
.box--slider .product--price-info .price--default {
  font-size: 0.875rem;
}
.box--slider .product--price-info .price--regulation {
  height: 1.1875rem;
  font-size: 0.875rem;
}
.box--slider .product--price-info .is--discount {
  font-weight: 700;
}
.box--slider .product--image {
  height: 8.75rem;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  margin-bottom: 0.625rem;
  display: block;
  text-align: center;
  position: relative;
}
.box--slider .image--element {
  height: 100%;
  width: 100%;
  display: block;
  margin: 0 auto;
  position: relative;
}
.box--slider .image--element img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: inline-block;
  vertical-align: middle;
  z-index: 500;
}
.box--slider .product--title {
  font-size: 0.875rem;
  height: 2.5rem;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: block;
  color: #ffffff;
  font-weight: 500;
  white-space: normal;
}
.box--list .buybox--form {
  max-width: 17.5rem;
}
.box--list .product--detail-btn {
  max-width: 17.5rem;
}
@media screen and (min-width: 30em) {
  .box--basic .product--image {
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 10rem;
  }
  .box--basic .product--info {
    position: relative;
    padding: 0rem 0rem 0rem 11.25rem;
  }
  .box--minimal {
    width: 33.3%;
  }
  .box--image .product--image {
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
  }
  .box--image .product--info {
    position: relative;
    padding-left: 52%;
  }
  .box--image .product--price-info {
    height: 3.75rem;
  }
  .box--image .product--price-info .price--unit {
    height: 2.5rem;
  }
  .box--list .product--image {
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 11.25rem;
  }
  .box--list .product--info {
    position: relative;
    padding: 0rem 0rem 0rem 12.5rem;
  }
}
@media screen and (min-width: 48em) {
  .product--box .action--compare {
    display: inline-block;
  }
  .box--basic .product--image {
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 10rem;
  }
  .box--basic .product--info {
    position: relative;
    padding: 0rem 0rem 0rem 11.25rem;
  }
  .box--image .product--image {
    margin: 0rem 0rem 0.3125rem 0rem;
    width: auto;
    position: relative;
    height: 15rem;
  }
  .box--image .product--info {
    padding: 0;
  }
  .box--image .product--price-info {
    height: 2.5rem;
  }
  .box--image .product--price-info .price--unit {
    height: 1.25rem;
  }
  .is--ctl-search .box--basic,
  .is--ctl-listing.is--no-sidebar .box--basic {
    width: 50%;
  }
  .is--ctl-search .box--basic .product--image,
  .is--ctl-listing.is--no-sidebar .box--basic .product--image {
    margin: 0rem 0rem 0.3125rem 0rem;
    width: auto;
    position: relative;
    height: 11.25rem;
  }
  .is--ctl-search .box--basic .product--info,
  .is--ctl-listing.is--no-sidebar .box--basic .product--info {
    padding: 0;
  }
  .is--ctl-search .box--minimal,
  .is--ctl-listing.is--no-sidebar .box--minimal {
    width: 25%;
  }
  .is--ctl-search .box--minimal .product--image,
  .is--ctl-listing.is--no-sidebar .box--minimal .product--image {
    height: 11.25rem;
  }
  .is--ctl-search .box--image,
  .is--ctl-listing.is--no-sidebar .box--image {
    width: 50%;
  }
  .is--ctl-search .has--sidebar-filter .box--basic,
  .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--basic {
    width: 100%;
  }
  .is--ctl-search .has--sidebar-filter .box--basic .product--image,
  .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--basic .product--image {
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 10rem;
  }
  .is--ctl-search .has--sidebar-filter .box--basic .product--info,
  .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--basic .product--info {
    position: relative;
    padding: 0rem 0rem 0rem 11.25rem;
  }
  .is--ctl-search .has--sidebar-filter .box--minimal,
  .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--minimal {
    width: 33.3%;
  }
}
@media screen and (min-width: 64em) {
  .box--basic {
    width: 50%;
  }
  .box--basic .product--image {
    margin: 0rem 0rem 0.3125rem 0rem;
    width: auto;
    position: relative;
    height: 11.25rem;
  }
  .box--basic .product--info {
    padding: 0;
  }
  .box--minimal {
    width: 25%;
  }
  .box--image {
    width: 50%;
  }
  .box--image .product--image {
    margin: 0rem 0rem 0.3125rem 0rem;
    width: auto;
    position: relative;
    height: 17.5rem;
  }
  .box--image .product--info {
    padding: 0;
  }
  .is--ctl-search .box--basic .product--image,
  .is--ctl-listing.is--no-sidebar .box--basic .product--image {
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 10.625rem;
  }
  .is--ctl-search .box--basic .product--info,
  .is--ctl-listing.is--no-sidebar .box--basic .product--info {
    position: relative;
    padding: 0rem 0rem 0rem 11.875rem;
  }
  .is--ctl-search .box--minimal,
  .is--ctl-listing.is--no-sidebar .box--minimal {
    width: 20%;
  }
  .is--ctl-search .box--image,
  .is--ctl-listing.is--no-sidebar .box--image {
    width: 33.3%;
  }
  .is--ctl-search .has--sidebar-filter .box--basic,
  .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--basic {
    width: 50%;
  }
  .is--ctl-search .has--sidebar-filter .box--basic .product--image,
  .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--basic .product--image {
    margin: 0rem 0rem 0.3125rem 0rem;
    width: auto;
    position: relative;
    height: 11.25rem;
  }
  .is--ctl-search .has--sidebar-filter .box--basic .product--info,
  .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--basic .product--info {
    padding: 0;
  }
  .is--ctl-search .has--sidebar-filter .box--minimal,
  .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--minimal {
    width: 25%;
  }
}
@media screen and (min-width: 78.75em) {
  .box--basic .product--image {
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 10.625rem;
  }
  .box--basic .product--info {
    position: relative;
    padding: 0rem 0rem 0rem 11.875rem;
  }
  .box--basic .box--content {
    padding: 1.25rem 0.625rem 1.25rem 0.625rem;
  }
  .box--minimal {
    width: 25%;
  }
  .box--minimal .buybox--form .buy-btn--cart-text {
    display: inline-block;
  }
  .box--minimal .buybox--form i.icon--basket {
    display: none;
  }
  .box--image .product--image {
    margin: 0rem 0rem 0.3125rem 0rem;
    width: auto;
    position: relative;
    height: 18.75rem;
  }
  .box--image .product--info {
    padding: 0;
  }
  .is--ctl-search .box--minimal,
  .is--ctl-listing.is--no-sidebar .box--minimal {
    width: 20%;
  }
  .is--ctl-search .has--sidebar-filter .box--basic .product--image,
  .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--basic .product--image {
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 10.625rem;
  }
  .is--ctl-search .has--sidebar-filter .box--basic .product--info,
  .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--basic .product--info {
    position: relative;
    padding: 0rem 0rem 0rem 11.875rem;
  }
}
/*
Last-viewed
==============================================
Defines the styling of the `.viewlast` element.

The viewlast element displays the users recently viewed products inside a slim element that is usually displayed at the bottom of the listing and detail pages.

It contains a thumbnail image and the product name.
*/
.viewlast {
  clear: both;
}
/*
Tell-a-friend
==========================================
Contains the tell-a-friend element styling that can be used to share products.

The option can be enabled in the Shopware backend and is disabled by default.
*/
.tellafriend--content {
  padding-top: 0.625rem;
  width: 100%;
}
.tellafriend--content .tellafriend--field {
  margin: 0rem 0rem 0.625rem 0rem;
  width: 100%;
}
.tellafriend--content .tellafriend--buttons:after {
  content: "";
  display: table;
  clear: both;
}
.tellafriend--content .captcha--placeholder {
  margin-bottom: 0.625rem;
}
.tellafriend--content .captcha--notice {
  margin-bottom: 0.625rem;
  display: block;
}
.tellafriend--content .alert {
  margin-top: 1.875rem;
}
.tellafriend--content .review--notice {
  margin-bottom: 0.625rem;
  font-size: 0.875rem;
}
@media screen and (min-width: 48em) {
  .tellafriend--content {
    padding-top: 1.25rem;
    width: 100%;
  }
  .tellafriend--content .tellafriend--field {
    margin-bottom: 0.9375rem;
  }
  .tellafriend--content .alert {
    margin: 0rem 0rem 1rem 0rem;
  }
}
@media screen and (min-width: 78.75em) {
  .tellafriend--content {
    padding-top: 2.8125rem;
  }
}
/*
Topseller
=========================

The topseller element is a modified product slider that is used to display a selection of best selling articles inside a slim slider element.

*/
.topseller {
  margin: 0rem 0rem 1.25rem 0rem;
}
.topseller:after {
  content: "";
  display: table;
  clear: both;
}
.topseller .topseller--content {
  padding: 0rem 0.625rem 0rem 0.625rem;
}
.topseller .product-slider--arrow.arrow--next {
  right: -0.0625rem;
}
.topseller .product-slider--arrow.arrow--prev {
  left: -0.0625rem;
}
.topseller--product {
  text-align: center;
}
.topseller--product:hover .badge {
  background-color: #7abef2;
  background-image: linear-gradient(to bottom, #7abef2 0%, #48a2e7 100%);
  color: #fff;
  text-shadow: 0 1px 1px #AD1200;
}
.topseller--product:hover .product--title {
  color: #48a2e7;
}
.topseller--number {
  margin: 0.625rem 0rem 0.3125rem 0rem;
}
/*
Register
==========================================
Contains the styles of the registration process form and its components.

The user can see the registration steps, advantages and required information.
*/
.register--message {
  margin-top: 1.25rem;
}
.register--content {
  margin: 0.625rem 0rem 0.625rem 0rem;
  width: 100%;
  display: none;
}
.register--content:after {
  content: "";
  display: table;
  clear: both;
}
.register--content.is--collapsed {
  display: block;
}
.register--content .alert {
  margin: 1.25rem 1.125rem 1.25rem 1.125rem;
}
.register--content .register--check {
  padding-bottom: 0.5rem;
}
.register--content .register--action {
  margin: 1.25rem 1.25rem 1.25rem 1.25rem;
}
.register--content .register--action .register--submit {
  width: 100%;
  text-align: center;
}
.register--content .register--required-info {
  padding-bottom: 1.875rem;
  margin: 0rem 1.625rem 1rem 1.625rem;
  font-size: 0.875rem;
}
.register--content .select-field {
  margin-bottom: 0.625rem;
  max-width: 100%;
}
.register--content .register--field {
  margin-bottom: 0.625rem;
  width: 100%;
}
.register--content .register--customertype {
  display: block;
}
.register--content .register--zip-city .register--field-zipcode {
  width: 28%;
  float: left;
}
.register--content .register--zip-city .register--field-city {
  width: 70%;
  float: left;
}
.register--content .register--zip-city .register--field-city:after {
  content: "";
  display: table;
  clear: both;
}
.register--content .register--zip-city .register--spacer {
  margin-right: 2%;
}
.register--content .birthday--label {
  margin: 0rem 0rem 0.3125rem 0rem;
  display: block;
  font-weight: 700;
}
.register--content .birthday--label:after {
  content: "";
  display: table;
  clear: both;
}
.register--content .register--password-description {
  padding-bottom: 1.25rem;
}
.register--content .register--birthdate .select-field {
  margin-bottom: 0.9375rem;
  max-width: 100%;
  float: left;
}
.register--content .register--birthdate .datepicker {
  margin-bottom: 0.9375rem;
  width: 100%;
  max-width: 100%;
  float: left;
}
.register--content .register--birthdate .register--birthyear,
.register--content .register--birthdate .register--birthyear.select-field {
  margin-right: 0rem;
}
.register--content .register--privacy {
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  margin: 0rem 1.25rem 1.25rem 1.25rem;
  font-size: 0.875rem;
  border: 1px solid #96c126;
}
.register--content .register--privacy input[type="checkbox"] {
  margin: 0rem 0.625rem 0rem 0rem;
}
.register--content .register--personal {
  padding-bottom: 0.625rem;
}
.register--content .register--personal:after {
  content: "";
  display: table;
  clear: both;
}
.register--content #billingCountryBlockedAlert {
  margin-top: 0;
  margin-left: 0;
}
.register--login:after {
  content: "";
  display: table;
  clear: both;
}
.register--login .register--new-customer {
  margin: 1.25rem 0rem 1.25rem 0rem;
}
.register--login .register--new-customer .new-customer-btn {
  display: block;
  width: 100%;
  text-align: center;
  position: relative;
}
.register--login .register--new-customer .new-customer-btn:after {
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  margin-top: -0.5rem;
  font-size: 0.375rem;
  right: 0.625rem;
  position: absolute;
  font-family: 'shopware';
  font-weight: 500;
  content: "\e612";
  color: inherit;
  top: 50%;
}
.register--login .register--new-customer .new-customer-btn.is--active:after {
  content: "\e610";
}
.register--login .register--login-field {
  margin-bottom: 0.625rem;
  width: 100%;
}
.register--login .register--login-description {
  padding-bottom: 1.25rem;
}
.register--login .register--login-lostpassword {
  padding-bottom: 1.25rem;
}
.register--login .register--login-btn {
  width: 100%;
  text-align: center;
}
.register--advantages {
  display: none;
}
.password--success {
  margin: 0.625rem 0rem 1.25rem 0rem;
}
.steps--container {
  background: transparent;
}
.steps--content {
  padding-top: 1rem;
  display: table;
  border-top: 1px solid #96c126;
  width: 100%;
}
.steps--content .steps--list {
  display: table-row;
}
.steps--content .steps--list:after {
  content: "";
  display: table;
  clear: both;
}
.steps--content .steps--entry {
  padding: 0rem 0.625rem 0rem 0.625rem;
  display: table-cell;
  list-style: none;
  vertical-align: top;
  text-align: center;
}
.steps--content .steps--spacer {
  display: none;
  vertical-align: middle;
}
.steps--content .steps--entry .icon {
  background-color: #96c126;
  background-image: linear-gradient(to bottom, #96c126 0%, #648119 100%);
  border-radius: 22px;
  background-clip: padding-box;
  padding: 0.625rem 1rem 0.625rem 1rem;
  width: 2.875rem;
  font-size: 1.25rem;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-weight: 700;
}
.steps--content .is--active .icon {
  background-color: #7abef2;
  background-image: linear-gradient(to bottom, #7abef2 0%, #48a2e7 100%);
  color: #fff;
}
.steps--content .steps--entry .text {
  margin: 0rem 0rem 0rem 0.625rem;
  height: 3.25rem;
  position: relative;
  top: -2px;
  display: none;
  vertical-align: middle;
}
.steps--content .steps--entry .text::after {
  content: '';
  height: 100%;
}
.steps--content .is--active .text {
  color: #48a2e7;
  display: inline-block;
  font-weight: 700;
}
.steps--content .steps--entry .text--inner,
.steps--content .steps--entry .text::after {
  display: inline-block;
  vertical-align: middle;
}
.account--change-payment .payment--method {
  padding: 0.625rem 0rem 0.625rem 0rem;
}
.account--change-payment .payment--selection-input {
  width: 2.5rem;
  float: left;
  text-align: center;
}
.account--change-payment .payment--selection-label,
.account--change-payment .payment--description,
.account--change-payment .payment--content {
  padding: 0rem 0rem 0rem 2.5rem;
  width: 100%;
}
.account--change-payment .payment--content input {
  max-width: 100%;
}
@media screen and (min-width: 48em) {
  .register--message {
    margin-top: 2.8125rem;
  }
  .register--content {
    margin-top: 3.125rem;
    width: 64%;
    float: right;
    display: block;
  }
  .register--content .select-field {
    margin-bottom: 0.9375rem;
  }
  .register--content .select-field .register--birthday {
    margin-right: 2%;
  }
  .register--content .register--field {
    margin-bottom: 0.9375rem;
  }
  .register--content .register--check {
    padding-bottom: 0.5rem;
  }
  .register--content .select-field {
    max-width: 18.125rem;
  }
  .register--content .register--birthdate .select-field {
    width: 32%;
    margin-right: 2%;
  }
  .register--content .register--action {
    text-align: right;
  }
  .register--content .register--action .register--submit {
    width: 35%;
  }
  .steps--content {
    padding: 1.875rem 0rem 1.5rem 0rem;
    background: transparent;
    border: none;
  }
  .steps--content .steps--spacer {
    width: 5rem;
    display: table-cell;
    text-align: center;
  }
  .steps--content .steps--entry .text {
    margin: 0rem 0.625rem 0rem 0.625rem;
    display: inline-block;
    font-weight: 700;
  }
  .register--login {
    margin-top: 3.125rem;
    width: 34%;
    float: left;
  }
  .register--login .register--new-customer {
    display: none;
  }
  .register--login .register--login-field {
    margin-bottom: 0.9375rem;
  }
  .register--login .register--login-btn {
    width: auto;
    text-align: left;
  }
  .register--advantages {
    display: block;
    width: 34%;
    float: left;
  }
  .register--advantages:after {
    content: "";
    display: table;
    clear: both;
  }
  .register--advantages .panel--title {
    margin: 0rem 0rem 0.625rem 0rem;
  }
}
@media screen and (min-width: 78.75em) {
  .steps--content .steps--entry.step--payment {
    width: 30%;
  }
  .steps--content .steps--entry .text {
    margin: 0rem 0rem 0rem 0.625rem;
    width: 70%;
    text-align: left;
  }
  .steps--content .steps--spacer {
    width: 15%;
  }
}
/*
Shopping cart
==============================================
Defines the basic styling of the Shopware 5 shopping cart element.

Shopware offers two different shopping cart element options that can be selected in the Shopware backend.

**Shopping Cart options:**

[`off-canvas cart`](./_components-offcanvas-menu.html>)

[`collapse-cart`](./_components-collapse-cart.html>)

*/
.is--ctl-checkout .panel--body > .alert {
  margin: 1.875rem 0rem 1.875rem 0rem;
}
.is--ctl-checkout .basket--info-messages {
  margin-top: 0.625rem;
}
.is--ctl-checkout .account--billing-address.register--content,
.is--ctl-checkout .account--shipping-address.register--content,
.is--ctl-checkout .account--change-billing.register--content,
.is--ctl-checkout .account--change-shipping.register--content {
  float: none;
  width: 100%;
}
.is--act-shippingpayment .add-product--form {
  display: none;
}
.is--act-shippingpayment .product--table {
  margin-top: 0;
}
.is--act-shippingpayment .product--table .panel--body {
  padding: 1.25rem 1.25rem 0rem 1.25rem;
}
.is--act-shippingpayment .payment--method-list {
  margin-top: 0.625rem;
}
.product--table {
  margin-top: 0.625rem;
}
.product--table .alert {
  margin-bottom: 0.625rem;
}
.product--table .is--no-star {
  margin-left: -0.375rem;
}
.product--table .panel {
  border: 0 none;
}
.product--table .panel--body {
  padding: 0;
}
.product--table .premium-product.panel {
  margin: 0.625rem 0rem 0rem 0rem;
  border: 1px solid #648119;
}
.product--table .delivery--status-icon {
  display: none;
}
.product--table .table--actions {
  margin-top: 0.625rem;
  position: relative;
}
.product--table .table--actions:after {
  content: "";
  display: table;
  clear: both;
}
.product--table .table--actions .btn--checkout-proceed,
.product--table .table--actions .btn--checkout-continue {
  width: 100%;
  text-align: center;
  margin-bottom: 0.625rem;
}
.product--table .actions--bottom .main--actions {
  margin-bottom: 0rem;
}
.product--table .table--header {
  display: none;
}
.product--table .table--tr {
  padding: 0.625rem 0rem 0.5rem 0rem;
  position: relative;
  border-bottom: 1px solid #648119;
  width: 100%;
  height: 100%;
}
.product--table .table--tr:after {
  content: "";
  display: table;
  clear: both;
}
.product--table .table--media,
.product--table .table--content {
  float: left;
}
.product--table .column--product {
  padding-left: 0;
  width: 90%;
}
.product--table .column--product .column--image {
  padding: 0.625rem 0rem 0.625rem 0rem;
  float: left;
  width: 26%;
}
.product--table .table--media {
  width: 100%;
  position: relative;
}
.product--table .table--media .table--media-outer {
  border-radius: 2px;
  background-clip: padding-box;
  max-width: 4.375rem;
  max-height: 4.375rem;
  border: 1px solid #96c126;
  margin: 0 auto;
}
.product--table .table--media .table--media-inner {
  width: 100%;
  position: relative;
  padding-bottom: 100%;
  height: 0;
}
.product--table .table--media img {
  padding: 5%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.product--table .table--content {
  font-size: 0.75rem;
  width: 70%;
}
.product--table .delivery--status-icon {
  font-size: 0.75rem;
  margin: 0;
}
.product--table .delivery--information {
  font-size: 0.875rem;
}
.product--table .content--title {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
}
.product--table .column--actions {
  padding-right: 0;
  position: absolute;
  width: 20%;
  top: 10px;
  right: 0;
  text-align: right;
}
.product--table .column--actions .column--actions-link {
  line-height: 2.5rem;
  padding: 0rem 0.875rem 0rem 0.9375rem;
}
.product--table .column--actions .icon--cross {
  font-size: 0.75rem;
}
.product--table .column--label {
  color: #000000;
  text-align: left;
  margin: 0%;
  float: left;
  font-weight: 700;
}
.product--table .column--label.quantity--label {
  margin-top: 0.6875rem;
}
.product--table .row--rebate .column--label,
.product--table .row--premium-product .column--label,
.product--table .row--voucher .column--label {
  margin: 0;
}
.product--table .row--rebate .table--media,
.product--table .row--premium-product .table--media,
.product--table .row--voucher .table--media {
  width: 4.375rem;
  margin: 0 auto;
  float: none;
}
.product--table .row--rebate .column--image,
.product--table .row--premium-product .column--image,
.product--table .row--voucher .column--image {
  padding: 0.625rem 0rem 0.625rem 0rem;
  width: 24%;
}
.product--table .row--rebate .table--content,
.product--table .row--premium-product .table--content {
  padding-top: 1.3125rem;
}
.product--table .column--total-price {
  font-weight: 700;
}
.product--table .column--product:after {
  content: "";
  display: table;
  clear: both;
}
.product--table .column--product .column--image {
  float: left;
  width: 24%;
}
.product--table .column--quantity .select-field {
  min-width: 6.25rem;
  max-width: 10rem;
  width: auto;
}
.product--table .column--quantity,
.product--table .column--unit-price,
.product--table .column--total-price,
.product--table .column--tax-price {
  padding: 0.3125rem 0rem 0.3125rem 0.625rem;
  margin-left: 22%;
  width: 78%;
}
.product--table .column--quantity {
  padding: 0rem 0rem 0rem 0.625rem;
}
.product--table .column--unit-price {
  padding: 0rem 0rem 0.5625rem 0.625rem;
}
.product--table .product--delivery {
  margin: 0;
}
.product--table .cart--badge {
  border-radius: 3px 0 0 3px;
  background-clip: padding-box;
  display: block;
  position: absolute;
  width: 20px;
  height: 100%;
  top: 0;
  left: 0;
  background: #48a2e7;
}
.product--table .cart--badge span {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  text-align: center;
  line-height: 20px;
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  position: absolute;
  width: 70px;
  top: 0;
  bottom: 0;
}
.product--table .basket--badge {
  line-height: 3rem;
  font-size: 1rem;
  border-radius: 128px;
  background-clip: padding-box;
  height: 3rem;
  width: 3rem;
  margin: 0 auto;
  text-align: center;
  font-weight: 700;
  background: #ffffff;
  color: #fff;
}
.product--table .basket--badge .icon--arrow-right {
  font-size: 0.8125rem;
}
.product--table .basket--badge .icon--coupon {
  font-size: 1.75rem;
  line-height: 3.125rem;
}
.product--table .row--premium-product .basket--badge {
  font-size: 0.6875rem;
}
.product--table .table--actions + .alert {
  margin-top: 0.625rem;
}
.product--table .content {
  font-size: 0.875rem;
  margin: 0;
}
.product--table .add-product--form {
  margin: 1.25rem 0rem 1.25rem 0rem;
}
.product--table .add-product--field,
.product--table .add-voucher--field {
  border-top-left-radius: 3px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 3px;
  background-clip: padding-box;
  height: 2.375rem;
  width: 90%;
}
.product--table .add-voucher--field {
  background: #fff;
}
.product--table .add-product--button,
.product--table .add-voucher--button {
  height: 2.375rem;
  padding: 0.1875rem 0rem 0.1875rem 0rem;
  border-top-left-radius: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 0;
  background-clip: padding-box;
  width: 10%;
}
.product--table .add-voucher--form {
  margin: 0rem 0rem 0.75rem 0rem;
}
.product--table .add-voucher--panel {
  margin: 0.625rem 0rem 0rem 0rem;
}
.product--table .table--aggregation {
  margin: 0rem -0.625rem 0rem -0.625rem;
  padding: 0.75rem 0.625rem 0.75rem 0.625rem;
  background: #fbfbfb;
  border-color: #96c126;
  border-style: solid;
  border-width: 1px 0 0 0;
}
.product--table .table--shipping-costs label {
  font-weight: 700;
}
.product--table .table--shipping-costs .select-field {
  height: 2.375rem;
  line-height: 2.25rem;
  max-width: 100%;
}
.product--table .table--shipping-costs-trigger {
  font-weight: 700;
}
.product--table .main--actions:after {
  content: "";
  display: table;
  clear: both;
}
.product--table .table--footer {
  font-size: 0.875rem;
}
.product--table .table--footer .benefit--text {
  font-size: 0.875rem;
}
.product--table .benefit--headline {
  font-size: 0.875rem;
  color: #000000;
  font-weight: 700;
}
.aggregation--list {
  margin: 0rem -0.625rem 0rem -0.625rem;
  padding: 0.75rem 0.625rem 0.75rem 0.625rem;
  background: #fbfbfb;
  border-bottom: 1px solid #96c126;
}
.aggregation--list .list--entry {
  list-style: none;
}
.aggregation--list .entry--label {
  width: 70%;
}
.aggregation--list .entry--value {
  width: 30%;
  text-align: right;
}
.aggregation--list .entry--total {
  font-weight: 700;
  color: #000000;
}
.aggregation--list .entry--totalnet,
.aggregation--list .entry--taxes {
  font-size: 0.75rem;
}
.premium-product.panel {
  margin: 0.625rem 0rem 0.625rem 0rem;
}
.premium-product--content {
  height: 20rem;
}
.premium-product--content .product-slider--container {
  padding: 0;
}
.premium-product p {
  margin: 0.625rem 0rem 0.625rem 0rem;
}
.premium-product .premium-product--difference {
  border-color: #96c126;
  display: block;
}
.premium-product .premium-product--difference .difference--price {
  font-size: 0.875rem;
}
.premium-product .product-slider--arrow.arrow--next {
  right: -0.0625rem;
}
.premium-product .product-slider--arrow.arrow--prev {
  left: -0.0625rem;
}
.premium-product .product--inner {
  padding: 0.3125rem 1.875rem 0.3125rem 1.875rem;
  margin: 0rem 0rem 0.625rem 0rem;
}
.premium-product .product--inner .product--image {
  border-radius: 3px;
  background-clip: padding-box;
  height: 10.9375rem;
  margin: 0rem 0rem 0.9375rem 0rem;
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  display: block;
  border: 1px solid #96c126;
  position: relative;
  text-align: center;
}
.premium-product .product--inner .product--image .image--element {
  height: 100%;
  width: 100%;
  display: block;
  margin: 0 auto;
  position: relative;
}
.premium-product .product--inner .product--image .image--element img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: inline-block;
  vertical-align: middle;
  z-index: 500;
}
.premium-product .product--inner .premium-product--badge {
  border-radius: 38px;
  background-clip: padding-box;
  height: 2.375rem;
  width: 2.375rem;
  line-height: 2.375rem;
  top: -1.1875rem;
  right: -1.1875rem;
  background: #48a2e7;
  position: absolute;
  color: #fff;
  font-weight: 700;
  z-index: 750;
}
.premium-product .product--inner .premium-product--free {
  color: #2ecc71;
  font-weight: 700;
  text-align: left;
}
.premium-product .product--inner .btn {
  width: 100%;
}
.premium-product .product--inner .premium--variant:after {
  content: "";
  display: table;
  clear: both;
}
.premium-product .product--inner .premium--variant .premium--button {
  border-top-left-radius: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 0;
  background-clip: padding-box;
  height: 2.375rem;
  margin-left: -0.125rem;
  width: 20%;
}
.premium-product .product--inner .premium--variant .select-field {
  margin-right: 0.125rem;
  max-width: 80%;
  float: left;
}
.premium-product .product--inner .premium--variant .select-field .premium--selection {
  border-top-left-radius: 3px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 3px;
  background-clip: padding-box;
  line-height: 2.375rem;
  height: 2.375rem;
  font-weight: 700;
}
.premium-product .product--inner .premium--variant .select-field:after {
  height: 2.25rem;
}
.js--modal .modal--checkout-add-article .link--article-image .image--media {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.js--modal .modal--checkout-add-article .link--article-image .image--media img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.js--modal .modal--checkout-add-article .modal--title {
  padding: 0.625rem 2.5rem 0.625rem 1.25rem;
  font-size: 1rem;
  font-weight: 700;
  border-bottom: 1px solid #96c126;
}
.js--modal .modal--checkout-add-article .modal--error {
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
}
.js--modal .modal--checkout-add-article .modal--article {
  padding: 1.25rem;
}
.js--modal .modal--checkout-add-article .article--info {
  margin-left: 5rem;
}
.js--modal .modal--checkout-add-article .article--info:after {
  content: "";
  display: table;
  clear: both;
}
.js--modal .modal--checkout-add-article .article--image {
  padding: 0.3125rem;
  width: 5rem;
  height: 5rem;
  border-radius: 3px;
  background-clip: padding-box;
  float: left;
  border: 1px solid #96c126;
}
.js--modal .modal--checkout-add-article .article--name {
  width: 100%;
}
.js--modal .modal--checkout-add-article .list--name {
  margin-left: 0.9375rem;
}
.js--modal .modal--checkout-add-article .list--name .entry--name {
  margin-bottom: 0.625rem;
}
.js--modal .modal--checkout-add-article .list--name .link--name {
  color: #ffffff;
  font-weight: 700;
}
.js--modal .modal--checkout-add-article .article--price {
  margin: 0.9375rem 0rem 0rem 0.9375rem;
  width: 100%;
}
.js--modal .modal--checkout-add-article .list--price .entry--price {
  margin-bottom: 0.625rem;
  color: #ffffff;
  font-weight: 700;
}
.js--modal .modal--checkout-add-article .modal--actions {
  margin: 0rem 0rem 1.25rem 0rem;
  padding: 0.625rem 1.25rem 0rem 1.25rem;
}
.js--modal .modal--checkout-add-article .modal--actions:after {
  content: "";
  display: table;
  clear: both;
}
.js--modal .modal--checkout-add-article .modal--actions .btn {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.js--modal .modal--checkout-add-article .modal--actions .btn:last-child {
  margin-top: 0.625rem;
}
.js--modal .modal--checkout-add-article .modal--actions .is--left {
  padding-left: 2.1875rem;
}
.js--modal .modal--checkout-add-article .modal--cross-selling {
  padding: 0rem 1.25rem 1.25rem 1.25rem;
  margin: 0;
}
.js--modal .modal--checkout-add-article .modal--cross-selling .product-slider--container {
  padding: 0;
}
.js--modal .modal--checkout-add-article .modal--cross-selling .item--image {
  padding-bottom: 0.625rem;
  height: 10.625rem;
  border-bottom: 1px solid #96c126;
  margin: 0 auto;
  text-align: center;
}
.js--modal .modal--checkout-add-article .modal--cross-selling .link--image,
.js--modal .modal--checkout-add-article .modal--cross-selling .link--image span {
  overflow: hidden;
  display: block;
  height: 100%;
}
.js--modal .modal--checkout-add-article .modal--cross-selling .link--image img {
  margin: 0 auto;
}
.js--modal .modal--checkout-add-article .modal--cross-selling .image--slider-item,
.js--modal .modal--checkout-add-article .modal--cross-selling .image--no-picture {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}
.js--modal .modal--checkout-add-article .modal--cross-selling .link--name {
  color: #000000;
  font-weight: 700;
}
.js--modal .modal--checkout-add-article .modal--cross-selling .item--price-unit {
  font-size: 0.6875rem;
}
.js--modal .modal--checkout-add-article .modal--cross-selling .price--normal {
  font-size: 1.0625rem;
  color: #000000;
  font-weight: 700;
}
.js--modal .modal--checkout-add-article .modal--cross-selling .price--reduced {
  color: #e74c3c;
}
.js--modal .modal--checkout-add-article .modal--cross-selling .price--pseudo {
  font-size: 0.625rem;
  text-decoration: line-through;
}
.content--confirm .alert {
  margin-top: 0.625rem;
}
.content--confirm .has--border {
  border: 1px solid #648119;
}
.content--confirm .confirm--actions .main--actions {
  text-align: center;
  width: 100%;
}
.content--confirm .payment--method-list,
.content--confirm .dispatch--method-list {
  margin-bottom: 0.625rem;
}
.content--confirm .payment--method,
.content--confirm .dispatch--method {
  padding-bottom: 0.625rem;
  margin-bottom: 0.625rem;
  border-bottom: 1px solid #648119;
}
.content--confirm .payment--method .method_last,
.content--confirm .dispatch--method .method_last {
  border: 0 none;
}
.content--confirm .payment--method.method_last,
.content--confirm .dispatch--method.method_last {
  border: 0 none;
}
.content--confirm .method--input {
  width: 2.5rem;
  text-align: center;
  float: left;
}
.content--confirm .method--label {
  padding-left: 2.5rem;
  width: 100%;
}
.content--confirm .method--description {
  padding-left: 2.5rem;
}
.content--confirm .payment--method-logo {
  margin-left: 2.5rem;
}
.content--confirm .method--bankdata {
  padding-left: 2.5rem;
}
.content--confirm .method--bankdata input[type="text"] {
  max-width: 100%;
}
.content--confirm .table--aggregation,
.content--confirm .add-product--form,
.content--confirm .add-product--field,
.content--confirm .add-product--button {
  display: none;
}
.content--confirm .aggregation--list {
  font-size: 0.875rem;
  line-height: 1.5rem;
  margin: 0rem -0.625rem 0rem -0.625rem;
  border-top: 1px solid #96c126;
}
@media screen and (min-width: 30em) {
  .product--table .column--label {
    text-align: right;
    width: 100%;
    margin: 0;
  }
  .product--table .table--tr {
    padding: 0.625rem 0rem 1.25rem 0rem;
  }
  .product--table .table--content {
    width: 85%;
  }
  .product--table .table--actions .btn--checkout-proceed,
  .product--table .table--actions .btn--checkout-continue {
    width: 49%;
    text-align: center;
    margin-bottom: 0rem;
  }
  .product--table .column--product .column--image {
    width: 15%;
  }
  .product--table .column--quantity,
  .product--table .column--unit-price,
  .product--table .column--total-price {
    float: left;
    width: 28.83%;
  }
  .product--table .column--quantity {
    padding-right: 0.625rem;
    margin-left: 13.5%;
  }
  .product--table .column--quantity .quantity--label {
    margin: 0rem 0rem 0.1875rem 0rem;
    text-align: left;
  }
  .product--table .column--quantity .select-field {
    float: left;
    font-weight: 700;
  }
  .product--table .column--unit-price {
    padding-right: 0.625rem;
    margin: 0;
  }
  .product--table .column--unit-price .unit-price--label {
    margin-bottom: 0.75rem;
  }
  .product--table .column--total-price {
    padding: 0rem 0.625rem 0.3125rem 0.625rem;
    margin: 0;
  }
  .product--table .column--total-price .total-price--label {
    margin-bottom: 0.75rem;
  }
  .product--table .column--tax-price {
    margin: 0;
  }
  .product--table .column--tax-price .tax-price--label {
    margin-bottom: 0.75rem;
  }
  .product--table .row--rebate .column--label,
  .product--table .row--premium-product .column--label,
  .product--table .row--voucher .column--label {
    margin: 0;
  }
  .product--table .row--rebate .column--image,
  .product--table .row--premium-product .column--image,
  .product--table .row--voucher .column--image {
    width: 15%;
  }
  .product--table .row--rebate .column--total-price,
  .product--table .row--premium-product .column--total-price,
  .product--table .row--voucher .column--total-price {
    float: right;
  }
  .product--table .add-product--field {
    width: 55%;
  }
  .product--table .actions--bottom .main--actions {
    margin-bottom: 0.625rem;
  }
  .js--modal .modal--checkout-add-article .article--name {
    width: 75%;
    float: left;
  }
  .js--modal .modal--checkout-add-article .article--price {
    width: 25%;
    float: right;
    margin: 0;
  }
  .js--modal .modal--checkout-add-article .modal--actions {
    margin: 0rem 0rem 1.25rem 0rem;
    padding: 0.625rem 1.25rem 0rem 1.25rem;
  }
  .js--modal .modal--checkout-add-article .modal--actions:after {
    content: "";
    display: table;
    clear: both;
  }
  .js--modal .modal--checkout-add-article .modal--actions .btn {
    width: 49%;
  }
  .js--modal .modal--checkout-add-article .modal--actions .btn:last-child {
    margin-top: 0;
  }
  .js--modal .modal--checkout-add-article .modal--actions .is--left {
    padding-left: 2.1875rem;
  }
}
@media screen and (min-width: 48em) {
  .is--ctl-checkout .basket--info-messages {
    margin: 1.25rem 0rem 0.25rem 0rem;
  }
  .is--ctl-checkout .account--change-billing.register--content,
  .is--ctl-checkout .account--change-shipping.register--content {
    width: 75%;
  }
  .is--act-shippingpayment .product--table .table--actions {
    margin-top: 1.25rem;
  }
  .is--act-shippingpayment .payment--method-list {
    margin-top: 0;
  }
  .is--act-shippingpayment .basket--footer .aggregation--list {
    padding-right: 1.25rem;
  }
  .product--table {
    margin: 1.25rem 0rem 1.25rem 0rem;
  }
  .product--table .alert {
    margin-bottom: 1.25rem;
  }
  .product--table .row--voucher,
  .product--table .row--premium-product {
    height: 100%;
  }
  .product--table .panel--body {
    padding: 1.25rem 1.25rem 1.25rem 1.25rem;
    border: 1px solid #648119;
  }
  .product--table .premium-product--content {
    height: 20.625rem;
    border: 0 none;
  }
  .product--table .premium-product.panel {
    margin: 1.25rem 0rem 0rem 0rem;
  }
  .product--table .column--actions {
    position: static;
    bottom: auto;
    float: right;
  }
  .product--table .column--label {
    display: none;
  }
  .product--table .table--header {
    margin: 0rem 0rem 0.625rem 0rem;
    border-bottom: 1px solid #648119;
    display: block;
  }
  .product--table .table--header .table--column {
    font-size: 1rem;
    padding-bottom: 0;
    font-weight: 700;
    color: #000000;
  }
  .product--table .table--header .panel--th {
    padding: 0.3125rem 0.625rem 0.5625rem 0.625rem;
    font-size: 1rem;
  }
  .product--table .table--header .column--product {
    padding-left: 0;
    width: 52%;
  }
  .product--table .column--product {
    float: left;
    width: 52%;
  }
  .product--table .column--product .column--image {
    width: 8%;
  }
  .product--table .table--tr {
    padding: 0;
    border-bottom: 1px solid #648119;
  }
  .product--table .is--centered {
    display: inline-block;
    vertical-align: middle;
  }
  .product--table .column--actions {
    width: 8%;
    padding-right: 0;
  }
  .product--table .column--product .column--image {
    width: 20%;
  }
  .product--table .table--media,
  .product--table .table--content {
    float: left;
  }
  .product--table .table--media {
    width: 100%;
  }
  .product--table .table--media .table--media-outer {
    margin: 0;
  }
  .product--table .table--content {
    width: 74%;
  }
  .product--table .column--quantity {
    padding: 0.625rem 0.625rem 0.625rem 0.625rem;
    float: left;
    width: 11%;
    margin: 0;
  }
  .product--table .column--quantity .select-field {
    float: right;
    font-weight: 700;
    padding: 0rem 0rem 0rem 1rem;
  }
  .product--table .column--unit-price,
  .product--table .column--total-price {
    padding: 0.625rem 0.625rem 0.625rem 0.625rem;
    width: 14.5%;
  }
  .product--table .row--product .column--quantity {
    padding-top: 1.625rem;
  }
  .product--table .row--product .column--unit-price,
  .product--table .row--product .column--total-price {
    line-height: 2.625rem;
    padding-top: 1.625rem;
  }
  .product--table .row--product .column--actions {
    padding-top: 1.625rem;
  }
  .product--table .content--title {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
  }
  .product--table .column--total-price {
    float: left;
    font-weight: 700;
  }
  .product--table .basket--badge {
    width: 3rem;
    margin: 0 auto;
  }
  .product--table .row--rebate .table--media,
  .product--table .row--premium-product .table--media,
  .product--table .row--voucher .table--media {
    float: left;
  }
  .product--table .row--rebate .column--total-price,
  .product--table .row--premium-product .column--total-price,
  .product--table .row--voucher .column--total-price {
    margin-left: 25.5%;
    float: left;
  }
  .product--table .row--rebate .column--tax-price,
  .product--table .row--premium-product .column--tax-price,
  .product--table .row--voucher .column--tax-price {
    margin: 0;
  }
  .product--table .row--rebate .column--actions,
  .product--table .row--premium-product .column--actions,
  .product--table .row--voucher .column--actions {
    padding-top: 0.8125rem;
  }
  .product--table .row--rebate .table--content,
  .product--table .row--premium-product .table--content {
    padding-top: 1.3125rem;
  }
  .product--table .row--rebate .column--total-price,
  .product--table .row--premium-product .column--total-price {
    padding-top: 1.375rem;
  }
  .product--table .row--voucher .column--total-price {
    padding-top: 1.375rem;
  }
  .product--table .row--premium-product .column--product,
  .product--table .row--rebate .column--product {
    width: 77.5%;
  }
  .product--table .row--premium-product .column--image,
  .product--table .row--rebate .column--image {
    width: 13.3%;
  }
  .product--table .row--premium-product .column--total-price,
  .product--table .row--rebate .column--total-price {
    margin-left: 0;
  }
  .product--table .add-product--form {
    margin: 0.9375rem 0rem 1.25rem 0rem;
    width: 35%;
  }
  .product--table .add-product--field {
    width: 80%;
  }
  .product--table .add-product--button {
    width: 16%;
  }
  .product--table .basket--footer {
    margin: 0rem -1.25rem -1.25rem -1.25rem;
    border-top: 1px solid #648119;
    background: #fbfbfb;
  }
  .product--table .basket--footer:after {
    content: "";
    display: table;
    clear: both;
  }
  .product--table .aggregation--list,
  .product--table .table--aggregation {
    padding: 1.25rem 1.25rem 1.25rem 1.25rem;
    padding-right: 11%;
    border: 0 none;
    background: transparent;
    margin: 0;
    float: left;
    width: 50%;
  }
  .product--table .table--actions {
    padding-bottom: 1.25rem;
    margin: 0;
  }
  .product--table .table--actions .is--secondary {
    margin-right: 1.25rem;
  }
  .product--table .table--actions .btn--inquiry {
    margin-left: -8.125rem;
    width: 16.25rem;
    top: 0;
    position: absolute;
    left: 50%;
  }
  .product--table .table--actions .btn--checkout-proceed,
  .product--table .table--actions .btn--checkout-continue {
    width: 25%;
    text-align: center;
    margin-bottom: 0rem;
  }
  .product--table .actions--bottom .main--actions {
    margin-top: 1.25rem;
  }
  .product--table .table--footer {
    display: block;
  }
  .footer--benefit {
    font-size: 0.875rem;
    padding: 0rem 1.25rem 0rem 0rem;
    width: 33.33332%;
  }
  .footer--benefit.is--last {
    padding: 0;
  }
  .js--modal .modal--checkout-add-article .article--price {
    margin-top: 0;
    margin-left: 0;
  }
  .js--modal .modal--checkout-add-article .modal--actions .btn {
    width: 35%;
    margin-bottom: 0;
  }
  .js--modal .modal--checkout-add-article .modal--actions .btn:last-child {
    margin-top: 0;
  }
  .content--confirm .alert {
    margin: 0;
  }
  .content--confirm .table--aggregation {
    visibility: hidden;
    display: block;
  }
  .content--confirm .confirm--inner-container .payment--method-list,
  .content--confirm .confirm--inner-container .dispatch--method-list {
    margin-bottom: 1.25rem;
  }
  .content--confirm .confirm--inner-container .panel--body {
    border: 0 none;
  }
  .content--confirm .confirm--inner-container .has--border {
    border: 1px solid #648119;
  }
  .content--confirm .confirm--inner-container .basket--footer {
    border: 1px solid #648119;
    margin: 0;
  }
  .content--confirm .confirm--actions .main--actions {
    width: 25%;
  }
}
@media screen and (min-width: 64em) {
  .product--table .table--actions .btn--inquiry {
    left: 50%;
  }
  .product--table .column--product .column--image {
    width: 16%;
  }
  .product--table .column--product .table--content {
    width: 84%;
  }
  .product--table .row--premium-product .column--product .column--image,
  .product--table .row--rebate .column--product .column--image {
    width: 10.7%;
  }
  .product--table .add-product--form {
    width: 25%;
  }
  .product--table .aggregation--list {
    float: right;
    padding-right: 10.5%;
  }
  .product--table .table--aggregation {
    width: 45%;
  }
}
@media screen and (min-width: 78.75em) {
  .is--ctl-checkout .basket--info-messages {
    margin: 2.8125rem 0rem 0rem 0rem;
  }
  .is--act-shippingpayment .product--table {
    margin-top: 1.5625rem;
  }
  .product--table {
    margin-top: 2.8125rem;
  }
  .product--table .column--actions {
    width: 4%;
  }
  .product--table .table--header .column--product {
    width: 55%;
  }
  .product--table .column--product {
    width: 55%;
  }
  .product--table .column--product .column--image {
    width: 14%;
  }
  .product--table .column--product .table--content {
    width: 86%;
  }
  .product--table .row--rebate .column--actions,
  .product--table .row--premium-product .column--actions,
  .product--table .row--voucher .column--actions {
    padding-top: 1.3125rem;
  }
  .product--table .row--product .column--actions {
    padding-top: 2.125rem;
  }
  .product--table .table--tr .column--actions .column--actions-link {
    line-height: 1.125rem;
    padding: 0rem 0.3125rem 0.125rem 0.3125rem;
  }
  .product--table .table--tr .column--actions .icon--cross {
    font-size: 0.5625rem;
  }
  .product--table .row--premium-product .column--product,
  .product--table .row--rebate .column--product {
    width: 80.5%;
  }
  .product--table .row--premium-product .column--product .column--image,
  .product--table .row--rebate .column--product .column--image {
    width: 9.5%;
  }
  .product--table .aggregation--list {
    padding-right: 7.3%;
  }
}
/*
Checkout finish
==========================================
Contains the styles for the finish page.

It is displayed after the Shopware checkout process is finished and contains the important order information, the users information and option to print the order confirmation.
*/
.is--act-finish .content-main {
  margin-top: 1.25rem;
}
.finish--content {
  padding-top: 0.625rem;
}
.finish--content .information--panel-item {
  margin-bottom: 1.25rem;
}
.finish--content .information--panel-item:after {
  content: "";
  display: table;
  clear: both;
}
.finish--content .information--panel-item .panel--body:after {
  content: "";
  display: table;
  clear: both;
}
.finish--content .information--panel-item.information--panel-address .shipping--panel {
  text-align: center;
}
.finish--content .product--table {
  margin-top: 0;
}
.finish--teaser {
  margin: 0rem 0rem 1.25rem 0rem;
}
.teaser--btn-back {
  margin: 0rem 0rem 1.25rem 0rem;
}
.teaser--btn-print,
.teaser--btn-back {
  text-align: center;
  width: 100%;
}
.teaser--btn-print *[class^="icon--"],
.teaser--btn-back *[class^="icon--"] {
  margin: 0.25rem 0rem 0rem 0rem;
  float: left;
}
.finish--table .panel--body {
  border: 1px solid #648119;
}
.finish--table .table--tr {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
}
.finish--table .column--quantity,
.finish--table .column--total-price {
  padding-right: 0;
}
.finish--table .table--aggregation {
  display: none;
}
.finish--table .aggregation--list {
  margin: 0;
  border-bottom: 0 none;
}
.finish--table .basket--footer {
  border-top: 1px solid #648119;
}
.finish--table .is--last-row {
  border-bottom: 0 none;
}
@media screen and (min-width: 30em) {
  .finish--table .table--tr .column--quantity {
    margin-left: 42.3%;
  }
  .finish--table .table--tr .column--quantity .column--label {
    margin-bottom: 0.75rem;
    text-align: right;
  }
}
@media screen and (min-width: 48em) {
  .teaser--btn-print {
    text-align: left;
    width: auto;
  }
  .is--act-finish .content-main {
    margin-top: 2.5rem;
  }
  .finish--content {
    padding-top: 1.25rem;
  }
  .finish--content .information--panel-wrapper {
    margin: -2% 0 0 -2%;
    margin-bottom: 1.25rem;
  }
  .finish--content .information--panel-wrapper .information--panel-item.information--panel-item-billing {
    width: 50%;
  }
  .finish--content .information--panel-wrapper .information--panel-item.information--panel-item-billing .panel {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .finish--content .information--panel-wrapper .information--panel-item.information--panel-item-shipping {
    padding-left: 0;
    width: 50%;
  }
  .finish--content .information--panel-wrapper .information--panel-item.information--panel-item-shipping .panel {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .finish--content .information--panel-wrapper .information--panel {
    margin: 0;
  }
  .finish--content .information--panel-wrapper .information--panel-item {
    padding: 2% 0 0 2%;
    width: 100%;
    float: left;
    margin-bottom: 0;
  }
  .finish--content .information--panel-address .panel--body:after {
    content: "";
    display: table;
    clear: both;
  }
  .finish--content .information--panel-address .panel--body .billing--panel {
    float: left;
    width: 50%;
  }
  .finish--content .information--panel-address .panel--body .shipping--panel {
    float: right;
    width: 50%;
  }
  .teaser--btn-back {
    margin: 0rem 1.25rem 0rem 0rem;
    width: auto;
  }
  .finish--table {
    margin: 1.25rem 0rem 0rem 0rem;
  }
  .finish--table .table--header .panel--th {
    padding-right: 0;
  }
  .finish--table .panel--body {
    padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  }
  .finish--table .column--total-price {
    width: 37%;
  }
  .finish--table .table--tr {
    padding: 0;
  }
  .finish--table .table--tr:last-child {
    border: 0 none;
  }
  .finish--table .table--tr .column--quantity {
    line-height: 2.625rem;
    margin: 0;
  }
  .finish--table .row--rebate .column--total-price,
  .finish--table .row--premium-product .column--total-price {
    width: 22.5%;
  }
  .finish--table .row--voucher .column--total-price {
    margin-left: 0;
    width: 48%;
  }
  .finish--table .table--aggregation {
    display: block;
    width: 50%;
  }
  .finish--table .aggregation--list {
    padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  }
}
@media screen and (min-width: 64em) {
  .finish--content .information--panel-wrapper {
    margin-bottom: 1.25rem;
  }
  .finish--content .information--panel-wrapper .information--panel-item {
    width: 33.3%;
  }
  .finish--content .information--panel-wrapper .information--panel-item.information--panel-item-billing,
  .finish--content .information--panel-wrapper .information--panel-item.information--panel-item-shipping {
    width: 33.3%;
  }
  .finish--content .information--panel-wrapper .information--panel-item.information--panel-address {
    width: 66.6%;
  }
  .finish--content .information--panel-wrapper .information--panel-item-billing .panel {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .finish--content .information--panel-wrapper .information--panel-item-shipping {
    padding-left: 0;
  }
  .finish--content .information--panel-wrapper .information--panel-item-shipping .panel {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
@media screen and (min-width: 78.75em) {
  .finish--content {
    padding-top: 2.8125rem;
  }
  .finish--content .column--total-price {
    width: 34%;
  }
  .finish--content .finish--table .table--header .column--product {
    width: 55%;
  }
  .finish--content .finish--table .row--premium-product .column--total-price,
  .finish--content .finish--table .row--rebate .column--total-price {
    width: 19.5%;
  }
  .finish--content .finish--table .row--voucher .column--total-price {
    width: 45%;
  }
}
@media print {
  body {
    width: auto;
    height: auto;
    overflow: auto;
    background: #ffffff;
  }
  .container {
    max-width: none;
  }
  .is--act-finish .content-main {
    margin-top: 0;
  }
  .finish--teaser,
  .navigation-main,
  .footer--columns,
  .shop--navigation,
  .top-bar,
  .btn--back-top-shop,
  .header-main .container--ajax-cart {
    display: none;
  }
  .is--ctl-checkout.is--minimal-header .header-main,
  .header-main {
    border-bottom: none;
    margin: 0;
    padding: 0;
  }
  .content-main {
    margin-bottom: 0;
  }
  .finish--table {
    clear: both;
  }
  .finish--table .table--tr {
    page-break-inside: avoid;
  }
  .finish--table .table--content {
    width: 85%;
  }
  .finish--table .column--product .column--image {
    width: 15%;
  }
  .finish--table .column--label.quantity--label {
    margin: 0;
  }
  .finish--table .column--product {
    width: 100%;
  }
  .finish--table .column--product:after {
    content: "";
    display: table;
    clear: both;
  }
  .finish--table .column--total-price,
  .finish--table .column--quantity {
    margin-left: 70%;
    width: 30%;
  }
  .footer-minimal .footer--service-menu,
  .footer-main .footer--service-menu,
  .footer-minimal .footer--copyright,
  .footer-main .footer--copyright,
  .footer-minimal .footer--logo,
  .footer-main .footer--logo {
    display: none;
  }
  .footer-minimal .vat-info--text,
  .footer-main .vat-info--text {
    font-size: 0.5625rem;
  }
  .footer-minimal a,
  .footer-main a {
    color: #ffffff;
  }
}
/*
Account
================================================
Defines the styles for the Shopware 5 user account page.

The my-account page displays a dashboard that shows an overview of the user information, payment methods, billing and shipping information inside panel elements.

It allows the user to directly see and change the important information of their account.
*/
.account--content {
  margin: 0.625rem 0rem 0rem 0rem;
}
.partner-statistic .panel--title {
  padding-bottom: 1.25rem;
}
.account--content:after,
.payment_logo_debit:after,
.account-address--container:after,
.account-info--container:after {
  content: "";
  display: table;
  clear: both;
}
.account--logout .logout--headline {
  font-size: 1.5rem;
  margin: 0.625rem 0rem 1.25rem 0rem;
}
.account--logout .logout--actions {
  margin-bottom: 0.625rem;
}
.account--logout .logout-back-to-shop {
  display: block;
}
.account--menu .link--logout {
  font-weight: 700;
  color: #48a2e7;
}
.account--menu .navigation--logout-personalized {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account--box {
  margin: 0rem 0rem 1.25rem 0rem;
}
.account--password input[type="text"],
.account--email input[type="text"],
.account--password input[type="password"],
.account--email input[type="password"],
.account--password input[type="email"],
.account--email input[type="email"] {
  width: 100%;
}
.account--welcome {
  margin-bottom: 1.25rem;
}
.account--welcome .panel--body {
  padding: 0;
}
.account--welcome .panel--title {
  padding: 1.25rem 0rem 1.25rem 0rem;
  margin: 0;
}
.account--welcome .panel--actions {
  padding: 0;
}
.account--error,
.account--success {
  margin: 0rem 0rem 0.625rem 0rem;
}
.register--error-msg {
  color: #e74c3c;
}
.account--actions {
  margin: 0rem 1.25rem 1.25rem 1rem;
}
.account--actions:after {
  content: "";
  display: table;
  clear: both;
}
.account--change-payment.register--content {
  display: block;
  width: 100%;
}
.account--newsletter fieldset {
  border: 0;
  padding: 0;
}
.account--newsletter fieldset input[type="checkbox"] {
  margin: 0rem 0.625rem 0rem 0rem;
}
.account--paging {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  display: block;
  background: #ffffff;
}
.account--paging:after {
  content: "";
  display: table;
  clear: both;
}
.account--paging .paging--display {
  float: right;
}
.account--orders-overview {
  border: 1px solid #648119;
}
.account--orders-overview p {
  font-size: 0.875rem;
}
.account--orders-overview .orders--table-header {
  display: none;
  background: #f8f8f8;
}
.account--orders-overview .orders--table-header .panel--th {
  color: #000000;
}
.account--orders-overview .panel--tr {
  padding: 0.625rem 0rem 0.625rem 0rem;
}
.account--orders-overview .panel--td {
  padding: 0.3125rem 0.625rem 0.3125rem 0.625rem;
  display: block;
  float: none;
}
.account--orders-overview .panel--td:after {
  content: "";
  display: table;
  clear: both;
}
.account--orders-overview .column--info-labels,
.account--orders-overview .column--info-data {
  width: 50%;
  float: left;
  text-align: left;
}
.account--orders-overview .column--info-data {
  padding: 0.3125rem 0.625rem 0rem 0rem;
}
.account--orders-overview .column--summary-labels,
.account--orders-overview .column--summary-data {
  width: 50%;
  float: left;
  text-align: left;
}
.account--orders-overview .column--summary-data {
  padding: 0.3125rem 0.625rem 0rem 0rem;
}
.account--orders-overview .column--label,
.account--orders-overview .column--value {
  width: 50%;
  float: left;
}
.account--orders-overview .column--label {
  font-weight: 700;
}
.is--act-partnerStatistic .content-main--inner {
  padding: 0rem 0rem 1rem 0rem;
}
.is--act-partnerStatistic .account--welcome {
  padding: 0rem 0rem 0rem 0.625rem;
}
.is--act-partnerStatistic .listing--actions {
  padding: 0.625rem 1.125rem 1.5rem 1.125rem;
  border-bottom: 1px solid #96c126;
}
.is--act-partnerStatistic .date-filter {
  font-size: 0.875rem;
  height: 3.125rem;
  display: block;
  width: 100%;
}
.is--act-partnerStatistic .date-filter--label {
  padding: 0.5625rem 0rem 0.625rem 0rem;
  width: 2.5rem;
  display: block;
  float: left;
}
.is--act-partnerStatistic .date-filter--input {
  margin: 0rem 0rem 0rem 2.5rem;
  width: auto;
}
.is--act-partnerStatistic .datepicker {
  padding-right: 2.1875rem;
  width: 100%;
  float: left;
}
.is--act-partnerStatistic .ui-datepicker-trigger {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.625rem 0rem 0rem -1.875rem;
  display: inline;
  border: 0;
  background: transparent;
  text-align: center;
  color: #ffffff;
  padding: 0;
}
.is--act-partnerStatistic .btn--filter {
  width: 100%;
  text-align: center;
  margin: 0;
}
.is--act-partnerStatistic .chart--holder {
  display: none;
}
.is--act-partnerStatistic .panel--th,
.is--act-partnerStatistic .panel--td {
  padding: 0.5rem 0.625rem 0.4375rem 0.625rem;
  width: 25%;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.is--act-partnerStatistic .panel--th:first-child,
.is--act-partnerStatistic .panel--td:first-child {
  text-align: left;
}
.is--act-partnerStatistic .panel--th {
  padding: 0.1875rem 0.625rem 0.125rem 0.625rem;
  font-size: 0.75rem;
  color: #ffffff;
}
.is--act-partnerStatistic .is--odd {
  padding: 0rem 0rem 0.5625rem 0rem;
  border-bottom: 1px solid #96c126;
}
.is--act-partnerStatistic .is--odd .column--price,
.is--act-partnerStatistic .is--odd .column--total {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  width: 100%;
}
.is--act-partnerStatistic .column--label {
  text-align: left;
}
.is--act-partnerStatistic .column--value {
  text-align: right;
}
.is--act-partnerStatistic .column--label,
.is--act-partnerStatistic .column--value {
  width: 50%;
  float: left;
}
.is--act-partnerStatistic .column--item-sum .column--label {
  display: block !important;
}
.order--status-icon {
  width: 0.5rem;
  height: 0.5rem;
  top: 0.5rem;
  display: inline-block;
  position: relative;
}
.order--status-icon.status--0,
.order--status-icon.status--1,
.order--status-icon.status--3,
.order--status-icon.status--6 {
  background: #48a2e7;
}
.order--status-icon.status--2,
.order--status-icon.status--5,
.order--status-icon.status--7 {
  background: #2ecc71;
}
.order--status-icon.status--4,
.order--status-icon.status--8 {
  background: #e74c3c;
}
.order--name {
  color: #000000;
}
.order--details,
.order--price-unit,
.order--current-price {
  display: none;
}
.order--details .panel--tr {
  border-bottom: 1px solid #648119;
}
.order--repeat {
  text-align: center;
  background: #f8f8f8;
  border-bottom: 1px solid #96c126;
}
.order--actions {
  text-align: center !important;
}
.order--user-comments,
.order--shop-comments {
  border-bottom: 1px solid #96c126;
}
.account--downloads {
  border: 1px solid #648119;
}
.account--downloads p {
  font-size: 0.875rem;
}
.account--downloads .downloads--table-header {
  display: none;
}
.account--downloads .panel--tr {
  padding: 0.625rem 0rem 0.625rem 0rem;
}
.account--downloads .panel--td {
  padding: 0.3125rem 0.625rem 0.3125rem 0.625rem;
  display: block;
  float: none;
}
.account--downloads .panel--td:after {
  content: "";
  display: table;
  clear: both;
}
.account--password-reset {
  margin-top: 0.625rem;
}
.account--password-reset p {
  margin: 0;
}
.account--password-reset .password-reset--input {
  margin: 0rem 0rem 1.875rem 0rem;
  width: 100%;
}
.account--password-reset .password-reset--link {
  width: 100%;
  margin: 0;
}
.account--password-reset .password-reset--link:first-child {
  margin: 0rem 0rem 0.625rem 0rem;
}
.account--password-reset .password-reset--captcha img {
  display: inline;
}
.account--password-new {
  margin-top: 0.625rem;
}
.account--password-new .password-new--input {
  margin-bottom: 0.9375rem;
  width: 100%;
}
.account--password-new .password-new--helptext {
  margin-bottom: 0;
}
.account--password-new .password-new--submit {
  display: block;
  width: 100%;
}
.account--profile {
  margin: 0rem;
  padding-top: 1.875rem;
}
.account--profile .profile--email-password-container:after {
  content: "";
  display: table;
  clear: both;
}
.account--profile .profile-password--container {
  float: right;
  width: 100%;
}
.account--profile .profile-email--container {
  float: left;
  width: 100%;
}
.account--profile .alert {
  margin-bottom: 1.25rem;
}
.account--profile .js--loading {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 100%;
  background-clip: padding-box;
  margin: 0rem 0rem 0rem 0.3125rem;
  top: 0.25rem;
  -webkit-animation: keyframe--spin 1s linear infinite;
  animation: keyframe--spin 1s linear infinite;
  border: 2px solid #96c126;
  border-top: 2px solid #000000;
  display: inline-block;
  position: relative;
}
.account--profile .panel {
  margin-bottom: 1.25rem;
}
.account--profile .required-info {
  font-size: 0.875rem;
}
.account--profile .select-field {
  margin-bottom: 0.625rem;
  max-width: 100%;
}
.account--profile .profile--field {
  margin-bottom: 0.625rem;
  width: 100%;
}
.account--profile .profile--zip-city .profile--field-zipcode {
  width: 28%;
  float: left;
}
.account--profile .profile--zip-city .profile--field-city {
  width: 70%;
  float: left;
}
.account--profile .profile--zip-city .profile--field-city:after {
  content: "";
  display: table;
  clear: both;
}
.account--profile .birthday--label {
  margin: 0rem 0rem 0.3125rem 0rem;
  display: block;
  font-weight: 700;
}
.account--profile .profile--birthdate .select-field {
  margin-bottom: 0.9375rem;
  max-width: 100%;
  float: left;
}
.account--profile .profile--birthdate .datepicker {
  margin-bottom: 0.9375rem;
  width: 100%;
  max-width: 100%;
  float: left;
}
.account--profile .profile--birthdate .profile--birthyear,
.account--profile .profile--birthdate .profile--birthyear.select-field {
  margin-right: 0rem;
}
@media screen and (max-width: 48em) {
  .column--info-wrapper:after {
    content: "";
    display: table;
    clear: both;
  }
}
@media screen and (min-width: 30em) {
  .account--password-reset {
    margin-top: 0.625rem;
  }
  .account--password-reset .password-reset--input {
    margin: 0.625rem 0rem 1.875rem 0rem;
  }
  .account--password-reset .password-reset--link {
    margin: 0rem 0rem 0.625rem 0rem;
    width: auto;
  }
  .account--password-reset .password-reset--link:first-child {
    margin: 0rem 0.625rem 0rem 0rem;
  }
  .account--password-new .password-new--submit {
    display: inline-block;
    width: auto;
  }
  .account--logout .logout-back-to-shop {
    display: inline-block;
  }
}
@media screen and (min-width: 48em) {
  .account--content {
    margin: 1.875rem 0rem 0rem 0rem;
  }
  .account--content.is--wide {
    width: 100%;
  }
  .account--password-reset {
    margin: 1.25rem 0rem 0rem 0rem;
  }
  .account--password-new {
    margin-top: 1.25rem;
  }
  .account--password-new .password-new--input {
    width: 20rem;
  }
  .account--menu {
    border: 1px solid #96c126;
  }
  .account--menu .navigation--headline {
    padding: 1.25rem 0rem 0rem 0rem;
    margin: 0rem 1.25rem 0rem 1.25rem;
    font-size: 1rem;
    display: block;
    font-weight: 700;
    color: #000000;
    padding: 1.25rem 0rem 0.625rem 0rem;
    border-bottom: 1px solid #648119;
    text-decoration: none !important;
    border-bottom: 1px solid #96c126;
  }
  .account--menu .navigation--headline.is--underline {
    padding: 1.25rem 0rem 0.625rem 0rem;
    border-bottom: 1px solid #648119;
    text-decoration: none !important;
  }
  .account--menu .navigation--headline.is--secondary {
    color: #ffffff;
  }
  .account--menu .navigation--headline.is--primary {
    color: #48a2e7;
  }
  .account--menu .account--menu-container {
    padding: 0.625rem 0.625rem 0.625rem 0.625rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    display: block;
    position: relative;
    padding: 0.625rem 1.25rem 0.625rem 1.25rem;
  }
  .account--menu .account--menu-container.has--border {
    border: 1px solid #648119;
  }
  .account--menu .account--menu-container.is--slim {
    padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem;
  }
  .account--menu .account--menu-container.is--wide {
    padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  }
  .account--menu .account--menu-container.is--flat {
    background: #f8f8f8;
  }
  .account--menu .account--menu-container.is--embossed {
    box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
    background: #f8f8f8;
  }
  .account--menu .navigation--list {
    padding: 0;
    border: 0 none;
  }
  .account--menu .navigation--entry {
    margin: 0;
    border: 0 none;
  }
  .account--menu .navigation--link {
    padding: 0.3125rem 0rem 0.3125rem 0rem;
  }
  .account--menu .navigation--link.link--logout {
    margin: 0.625rem 0rem 0rem 0rem;
    padding: 0.625rem 0rem 0rem 0rem;
    border-top: 1px solid #96c126;
    font-weight: 700;
    color: #48a2e7;
  }
  .account--menu .navigation--link.link--logout [class^="icon--"] {
    margin: 0rem 0.3125rem 0rem 0rem;
    display: inline-block;
  }
  .account--welcome .panel--title {
    font-size: 1.625rem;
  }
  .account--orders-overview .orders--table-header {
    display: block;
  }
  .account--orders-overview .panel--tr {
    padding: 0;
    border-width: 0 0 1px 0;
  }
  .account--orders-overview .panel--tr.order--repeat {
    padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  }
  .account--orders-overview .panel--td {
    padding: 0.625rem 0.625rem 0.625rem 0.625rem;
    display: inline-block;
    float: left;
  }
  .account--orders-overview .column--label {
    display: none;
  }
  .account--orders-overview .column--value {
    width: 100%;
    float: none;
  }
  .account--orders-overview .column--summary-labels,
  .account--orders-overview .column--summary-data {
    width: 20%;
    text-align: right;
  }
  .account--orders-overview .column--date,
  .account--orders-overview .column--id,
  .account--orders-overview .column--dispatch {
    width: 20%;
  }
  .account--orders-overview .column--status {
    width: 25%;
  }
  .account--orders-overview .column--actions {
    width: 15%;
  }
  .account--orders-overview .column--actions .btn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .account--orders-overview .column--name {
    width: 50%;
  }
  .account--orders-overview .column--quantity {
    width: 10%;
  }
  .account--orders-overview .column--price {
    width: 20%;
  }
  .account--orders-overview .column--total {
    width: 20%;
  }
  .account--orders-overview .column--info-labels {
    width: 20%;
  }
  .account--orders-overview .column--info-data {
    width: 40%;
  }
  .order--item {
    margin: 0;
  }
  .order--pseudo-price {
    font-size: 0.75rem;
  }
  .order--download,
  .order--price-unit,
  .order--current-price {
    display: block !important;
  }
  .order--download {
    margin: 0.625rem 0rem 0rem 0rem;
  }
  .order--quantity {
    text-align: center !important;
  }
  .order--actions,
  .order--price,
  .order--amount {
    text-align: right !important;
  }
  .account--downloads .downloads--table-header {
    display: block !important;
    background: #f8f8f8;
  }
  .account--downloads .downloads--table-header .panel--th {
    color: #000000;
  }
  .account--downloads .panel--tr {
    padding: 0;
    border-width: 0 0 1px 0;
  }
  .account--downloads .panel--td {
    padding: 0.625rem 0.625rem 0.625rem 0.625rem;
    display: inline-block;
    float: left;
  }
  .account--downloads .column--date,
  .account--downloads .column--actions {
    width: 20%;
  }
  .account--downloads .column--info {
    width: 60%;
  }
  .column--label {
    display: none;
  }
  .column--date,
  .column--id,
  .column--dispatch {
    width: 20%;
  }
  .column--status {
    width: 25%;
  }
  .column--actions {
    width: 15%;
  }
  .column--name {
    width: 50%;
  }
  .column--quantity {
    width: 10%;
  }
  .column--price {
    width: 20%;
  }
  .column--total {
    width: 20%;
  }
  .column--info-labels {
    width: 20%;
  }
  .column--info-data {
    width: 40%;
  }
  .column--summary {
    width: 20%;
  }
  .account--password-reset .password-reset--input {
    width: 20rem;
  }
  .account--error,
  .account--success {
    margin: 0rem 0rem 1.25rem 0rem;
  }
  .is--act-partnerStatistic .content-main--inner {
    padding: 0rem 1.25rem 1rem 1.25rem;
  }
  .is--act-partnerStatistic .account--welcome {
    padding: 0rem 0rem 0rem 0rem;
  }
  .is--act-partnerStatistic .listing--actions {
    padding: 0.625rem 0.625rem 0.625rem 0.625rem;
    border-radius: 3px;
    background-clip: padding-box;
    border: 1px solid #96c126;
    background: #fbfbfb;
  }
  .is--act-partnerStatistic .date-filter {
    padding: 0rem 0.625rem 0rem 0.625rem;
    width: 40%;
    float: left;
    height: auto;
  }
  .is--act-partnerStatistic .date-filter--label {
    width: 10%;
  }
  .is--act-partnerStatistic .btn--filter {
    width: 20%;
    float: left;
    height: 40px;
  }
  .is--act-partnerStatistic .chart--holder {
    text-align: center !important;
    display: block !important;
    width: 100%;
  }
  .is--act-partnerStatistic .panel--th,
  .is--act-partnerStatistic .panel--td {
    padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  }
  .is--act-partnerStatistic .column--item-sum {
    width: 75% !important;
  }
  .is--act-partnerStatistic .column--item-sum .column--label,
  .is--act-partnerStatistic .column--item-sum .column--value {
    float: left;
    width: 50%;
  }
  .is--act-partnerStatistic .is--odd {
    border: 0;
    padding: 0;
  }
  .is--act-partnerStatistic .is--odd .column--total {
    width: 25%;
    float: left !important;
  }
  .is--act-partnerStatistic .is--odd .column--total .column--value {
    width: 100%;
  }
  .account--profile {
    margin: 0rem;
  }
  .account--profile .select-field {
    margin-bottom: 0.9375rem;
  }
  .account--profile .profile--field {
    margin-bottom: 0.9375rem;
  }
  .account--profile .select-field {
    max-width: 18.125rem;
  }
  .account--profile .profile--birthdate .select-field {
    width: 32%;
    margin-right: 2%;
  }
}
@media screen and (min-width: 64em) {
  .account--info,
  .account--billing {
    width: 49%;
    float: left;
  }
  .account--payment,
  .account--shipping {
    width: 49%;
    float: right;
  }
  .account--email,
  .account--password,
  .account--userdata {
    display: none;
  }
  .account--email,
  .account--password,
  .account--userdata,
  .account--newsletter {
    clear: both;
  }
  .account--password-reset {
    margin: 1.25rem 0rem 0rem 0rem;
  }
  .account--info .panel--body,
  .account--payment .panel--body {
    height: 7.5rem;
  }
  .account--profile .profile-password--container {
    float: right;
    width: 49%;
  }
  .account--profile .profile-email--container {
    float: left;
    width: 49%;
    margin-right: 2%;
  }
}
@media screen and (min-width: 78.75em) {
  .is--act-partnerStatistic .content-main--inner {
    padding: 0rem 2.8125rem 2.8125rem 2.8125rem;
  }
  .account--profile {
    padding-top: 2.8125rem;
  }
  .account--content {
    margin: 2.8125rem 0rem 0rem 0rem;
  }
  .account--password-reset {
    margin: 2.8125rem 0rem 0rem 0rem;
  }
  .account--password-new {
    margin-top: 2.8125rem;
  }
  .account--error,
  .account--success {
    margin: 0rem 0rem 1.25rem 0rem;
  }
}
.partner-statistic .account--welcome {
  margin-bottom: 0;
}
.partner-statistic .partner-statistic-body {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  margin: 0rem 0rem 1.25rem 0rem;
}
.partner-statistic .date-filter {
  display: inline-block;
}
.partner-statistic .date-filter--input {
  margin: 0rem 0rem 1.25rem 0rem;
}
.partner-statistic .ui-datepicker-trigger {
  padding: 0.125rem 0.625rem 0.125rem 0.625rem;
  line-height: 2rem;
  border-radius: 3px;
  background-clip: padding-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 0.875rem;
  background-color: #ffffff;
  background-image: linear-gradient(to bottom, #ffffff 0%, #fbfbfb 100%);
  -webkit-font-smoothing: inherit;
  display: inline-block;
  position: relative;
  font-weight: 700;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  border: 1px solid #96c126;
  color: #ffffff;
  /** Button icon font size */
  /** Larger icon */
  /*
######Icon alignment

To work properly the button needs the class `is--icon-left` or `is--icon-right` and an `icon` inside it.
```
<button class="btn is--icon-left">
    <i class="icon--account"></i>
    Icon left
</button>

<button class="btn is--icon-right">
    <i class="icon--account"></i>
    Icon right
</button>
```
*/
  /*
######Button size class
Adding a button-size class creates a larger or smaller button or changes the button properies.

Options: `is--large`, `is--small`, `is--full`, `is--center`
```
<button class="btn is--large">
    Large button
</button>

<button class="btn is--small">
    Small button
</button>
```
*/
  /** State: Small button */
  /** State: Medium button */
  /** State: Large button */
  /** State: Button with 100% width */
  /** State: Button with text align center */
  padding: 0.625rem 0.625rem 0.5625rem 0.625rem;
  margin: 0rem 1.5625rem 0rem 0rem;
  line-height: 1.25rem;
}
.partner-statistic .ui-datepicker-trigger [class^="icon--"] {
  font-size: 0.625rem;
}
.partner-statistic .ui-datepicker-trigger .is--large {
  font-size: 1rem;
}
.partner-statistic .ui-datepicker-trigger.is--icon-right {
  padding-right: 2.25rem;
}
.partner-statistic .ui-datepicker-trigger.is--icon-right [class^="icon--"] {
  height: 1rem;
  line-height: 2rem;
  margin: -1rem 0rem 0rem 0rem;
  right: 0.75rem;
  font-weight: 500;
  display: block;
  position: absolute;
  top: 50%;
}
.partner-statistic .ui-datepicker-trigger.is--icon-left {
  padding-left: 2.25rem;
}
.partner-statistic .ui-datepicker-trigger.is--icon-left [class^="icon--"] {
  height: 1rem;
  line-height: 2rem;
  margin: -1rem 0rem 0rem 0rem;
  left: 0.75rem;
  font-weight: 500;
  display: block;
  position: absolute;
  top: 50%;
}
.partner-statistic .ui-datepicker-trigger:disabled,
.partner-statistic .ui-datepicker-trigger:disabled:hover,
.partner-statistic .ui-datepicker-trigger.is--disabled,
.partner-statistic .ui-datepicker-trigger.is--disabled:hover {
  opacity: 0.5;
  background-color: #ffffff;
  background-image: linear-gradient(to bottom, #ffffff 0%, #fbfbfb 100%);
  border: 1px solid #96c126;
  color: #ffffff;
  cursor: not-allowed;
}
.partner-statistic .ui-datepicker-trigger:hover {
  background: #ffffff;
  color: #48a2e7;
  border-color: #48a2e7;
}
.partner-statistic .ui-datepicker-trigger:focus {
  outline: none;
}
.partner-statistic .ui-datepicker-trigger.is--small {
  line-height: 1.75rem;
}
.partner-statistic .ui-datepicker-trigger.is--medium {
  line-height: 2rem;
  height: 2.375rem;
}
.partner-statistic .ui-datepicker-trigger.is--large {
  line-height: 2.25rem;
  height: 2.625rem;
}
.partner-statistic .ui-datepicker-trigger.is--full {
  display: block;
}
.partner-statistic .ui-datepicker-trigger.is--center {
  text-align: center;
}
.partner-statistic .ui-datepicker-trigger:disabled,
.partner-statistic .ui-datepicker-trigger:disabled:hover,
.partner-statistic .ui-datepicker-trigger.is--disabled,
.partner-statistic .ui-datepicker-trigger.is--disabled:hover {
  color: #808080;
}
/*
Note
==============================================
Contains the styling of the note page inside Shopware 5.

The users can add an article to their note list if they are interested in the product and the product will be saved inside the list if the user is logged in inside their account.

The articles are displayed inside a slim product box with an article thumbnail and the general item information.

The styling also contains the viewport specific styles inside media queries.
*/
.note--content {
  margin: 1.25rem 0rem 1.25rem 0rem;
}
.note--overview .panel--td {
  padding: 0;
}
.note--item {
  padding: 1.25rem 0rem 1.25rem 0rem;
  position: relative;
}
.note--info,
.note--sale {
  width: 80%;
}
.note--image-container {
  width: 4.6875rem;
  margin: 0rem 1.25rem 1.25rem 0rem;
  display: table-row;
  float: left;
}
.note--image-link {
  width: 4.6875rem;
  height: 4.6875rem;
  padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem;
  line-height: 4.0625rem;
  border-radius: 3px;
  background-clip: padding-box;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #96c126;
}
.note--image {
  max-width: 4.0625rem;
  max-height: 4.0625rem;
  margin: 0 auto;
}
.note--title {
  margin: 0rem 0rem 0.3125rem 5.9375rem;
  font-size: 1.125rem;
  display: block;
  font-weight: 700;
  color: #000000;
}
.note--title:hover {
  color: #48a2e7;
}
.note--rating {
  margin: 0rem 0rem 0.625rem 5.9375rem;
}
.note--rating [class^="icon--"] {
  color: #f1c40f;
}
.note--supplier {
  display: none;
}
.note--ordernumber,
.note--date,
.note--overview .product--rating {
  margin: 0rem 0rem 0rem 5.9375rem;
  display: block;
}
.note--delivery {
  margin: 0rem 0rem 0rem 5.9375rem;
}
.note--delivery .delivery--status-icon {
  display: none;
}
.note--delivery .delivery--text-available {
  display: block;
}
.note--compare {
  margin: 0.625rem 0rem 0rem 5.9375rem;
  display: none;
}
.note--compare .compare--link {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  color: #ffffff;
}
.note--compare .compare--link:hover {
  color: #ffffff;
}
.note--compare [class^="icon--"] {
  margin: 0rem 0.3125rem 0rem 0rem;
  font-size: 0.75rem;
}
.note--price-unit {
  margin: 0.3125rem 0rem 0rem 5.9375rem;
  font-size: 0.75rem;
  line-height: 1.125rem;
  display: block;
}
.note--price {
  font-size: 1.125rem;
  margin: 0.9375rem 0rem 0rem 5.9375rem;
  color: #000000;
  font-weight: 700;
}
.note--delete {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.625rem;
  line-height: 2.375rem;
  background-color: #ffffff;
  background-image: linear-gradient(to bottom, #ffffff 0%, #fbfbfb 100%);
  border-radius: 3px;
  background-clip: padding-box;
  top: 1.25rem;
  right: 0;
  left: auto;
  display: block;
  position: absolute;
  border: 1px solid #96c126;
  text-align: center;
  font-weight: 500;
  color: #ffffff;
}
.note--delete:hover {
  color: #48a2e7;
  border-color: #48a2e7;
}
@media screen and (min-width: 48em) {
  .note--overview .panel--table {
    padding: 0rem 1.25rem 0rem 1.25rem;
    border: 1px solid #96c126;
  }
  .note--compare {
    display: block;
  }
}
@media screen and (min-width: 64em) {
  .note--info {
    padding-right: 1.25rem;
    width: 70%;
  }
  .note--sale {
    padding-right: 3.4375rem;
    width: 30%;
  }
  .note--zoom {
    font-size: 0.75rem;
    display: block;
    color: #ffffff;
    text-align: center;
  }
  .note--zoom:hover {
    color: #48a2e7;
  }
  .note--title {
    margin: 0rem 0rem 0.3125rem 6.5625rem;
  }
  .note--supplier,
  .note--ordernumber,
  .note--date,
  .note--overview .product--rating {
    margin: 0rem 0rem 0rem 6.5625rem;
    display: block;
  }
  .note--delivery {
    margin: 0rem 0rem 0rem 6.5625rem;
  }
  .note--compare {
    margin: 0.3125rem 0rem 0rem 0rem;
  }
  .note--price {
    margin: 0;
  }
  .note--price-unit {
    padding-right: 3.125rem;
    margin: 0.3125rem 0rem 0rem 0rem;
  }
}
@media screen and (min-width: 78.75em) {
  .note--content {
    margin: 2.8125rem 0rem 0rem 0rem;
  }
}
/*
Forms
==========================================
Defines the general form element styles.

It contains the components as: `capacha`, `description`, `required information` etc.
*/
.forms--content {
  width: 100%;
}
.forms--content .forms--headline {
  margin-bottom: 1.25rem;
}
.forms--content .forms--headline .forms--title {
  margin-top: 0rem;
}
.forms--content .forms--headline .forms--text p {
  margin-bottom: 0.75rem;
}
.forms--content .alert {
  margin: 1.875rem 0rem 0rem 0rem;
}
.forms--content .forms--field {
  margin-bottom: 0.3125rem;
  width: 100%;
}
.forms--content input {
  margin-bottom: 0.625rem;
  width: 100%;
}
.forms--content input[type="checkbox"] {
  width: auto;
}
.forms--content textarea {
  margin-bottom: 0.625rem;
  width: 100%;
}
.forms--content .field--select {
  margin-bottom: 0.625rem;
}
.forms--content .btn {
  float: right;
}
.forms--content .buttons:after {
  content: "";
  display: table;
  clear: both;
}
.forms--content .strasse {
  margin-right: 2%;
  width: 80%;
  float: left;
}
.forms--content .nr {
  width: 18%;
  float: left;
}
.forms--content .plz {
  margin-right: 2%;
  width: 28%;
  float: left;
}
.forms--content .ort {
  width: 70%;
  float: left;
}
.forms--content .ort:after {
  content: "";
  display: table;
  clear: both;
}
.forms--content .forms--required {
  font-size: 0.75rem;
  margin-bottom: 0.625rem;
}
.forms--content .forms--description {
  margin: -0.5rem 0rem 0.625rem 0rem;
  clear: both;
}
.forms--content .forms--captcha strong.captcha--notice {
  margin-bottom: 0.5rem;
  display: block;
}
.forms--content .forms--checkbox label {
  top: -0.125rem;
  position: relative;
}
.forms--content .forms--checkbox input[type="checkbox"] {
  width: auto;
}
@media screen and (min-width: 48em) {
  .forms--content {
    margin-top: 2.8125rem;
  }
  .forms--content input {
    margin-bottom: 0.9375rem;
  }
  .forms--content textarea {
    margin-bottom: 0.9375rem;
  }
  .forms--content .forms--captcha strong.captcha--notice {
    margin-bottom: 1rem;
  }
}
@media screen and (min-width: 78.75em) {
  .forms--content {
    margin-top: 2.8125rem;
  }
  .forms--content .alert {
    margin: 0rem 0rem 0rem 0rem;
  }
}
/*
Sitemap
==========================================
Contains the styles for the the Sitemap.

The sitemap page shows all categories and subpages of the shop in an overview.

The sitemap link is located in the footer information column.
*/
.sitemap--content {
  margin-top: 0.625rem;
}
.sitemap--content .sitemap--headline {
  margin-bottom: 0.625rem;
}
.sitemap--content .sitemap--headline .sitemap--title {
  margin-top: 0;
}
.sitemap--content .sitemap--headline .sitemap--headline-text {
  margin-bottom: 0rem;
}
.sitemap--content .sitemap--category {
  padding-bottom: 0.625rem;
  margin-bottom: 1rem;
  min-height: 3.75rem;
  background-color: #fbfbfb;
}
.sitemap--content .sitemap--category .sitemap--navigation-link {
  padding: 0.25rem 0rem 0.25rem 1.25rem;
  color: #ffffff;
  display: block;
}
.sitemap--content .sitemap--category .sitemap--navigation-link:hover {
  color: #48a2e7;
}
.sitemap--content .sitemap--navigation-entry-inner .sitemap--navigation-link {
  padding-left: 2.1875rem;
}
.sitemap--content .sitemap--navigation-head {
  padding: 0.25rem 0.625rem 0.25rem 0.625rem;
  margin-bottom: 0.5rem;
  background: #96c126;
}
.sitemap--content .sitemap--navigation-head .sitemap--navigation-head-link {
  color: #fff;
}
@media screen and (min-width: 48em) {
  .sitemap--content {
    margin-top: 1.25rem;
  }
  .sitemap--content .sitemap--headline {
    margin-bottom: 1.25rem;
  }
  .sitemap--content .sitemap--category {
    width: 49%;
    float: left;
    margin-right: 2%;
  }
  .sitemap--content .sitemap--category:last-child,
  .sitemap--content .sitemap--category:nth-child(2) {
    margin-right: 0rem;
  }
}
@media screen and (min-width: 64em) {
  .sitemap--content .sitemap--category {
    width: 24%;
    float: left;
    margin-right: 1.25%;
  }
  .sitemap--content .sitemap--category:last-child {
    margin-right: 0rem;
  }
  .sitemap--content .sitemap--category:nth-child(2) {
    margin-right: 1.25%;
  }
}
@media screen and (min-width: 78.75em) {
  .sitemap--content {
    margin-top: 2.8125rem;
  }
}
/*
Search
==========================================
Contains the styles for the main search-box component of the Shopware storefront.

The styling defines the search result page layout and its components.

It contains the viewport specific styles inside media queries.
*/
.search--content {
  padding: 2.5rem 0rem 0rem 0rem;
}
.search--headline {
  margin: 0rem 0rem 2.5rem 0rem;
  text-align: center;
}
.search--cat-filter {
  margin: 0rem 0rem 1.25rem 0rem;
}
.search--cat-filter .cat-filter--headline {
  padding: 0rem 0rem 0.3125rem 0rem;
  margin: 0rem 0rem 1.25rem 0rem;
  font-size: 1rem;
  line-height: 1.5rem;
  border-bottom: 1px solid #96c126;
}
.search--cat-filter .cat-filter--reset {
  margin: 0rem 0rem 0.9375rem 0rem;
  line-height: 1.5rem;
  border-color: #48a2e7;
}
.search--cat-filter .cat-filter--reset [class^="icon--"] {
  top: -0.0625rem;
  margin-right: 0.625rem;
  font-size: 0.5rem;
  position: relative;
}
.search--cat-filter .cat-filter--active-path {
  margin: 0rem 0rem 1.25rem 0rem;
}
.search--cat-filter .cat-filter--label {
  margin: 0rem 0.625rem 0rem 0rem;
  font-weight: 700;
}
.search--cat-filter .cat-filter--path {
  white-space: nowrap;
}
.search--cat-filter .cat-filter--path [class^="icon--"] {
  margin: 0rem 1.25rem 0rem 1.25rem;
  font-size: 0.625rem;
}
.search--cat-filter .cat-filter--link,
.search--cat-filter .cat-filter--sub-cat {
  color: #ffffff;
}
.search--cat-filter .cat-filter--link:hover,
.search--cat-filter .cat-filter--sub-cat:hover {
  color: #ffffff;
}
.search--cat-filter .cat-filter--link .checkbox,
.search--cat-filter .cat-filter--sub-cat .checkbox {
  margin: 0rem 0.3125rem 0rem 0rem;
  top: -0.0625rem;
  position: relative;
}
.search--cat-filter .cat-filter--sub-cat {
  width: 11.25rem;
  line-height: 1.5rem;
  margin: 0rem 0.625rem 0rem 0rem;
  display: block;
}
@media screen and (min-width: 48em) {
  .search--cat-filter {
    margin: 0rem 0rem 2.5rem 0rem;
  }
}
@media screen and (min-width: 78.75em) {
  .search--content {
    padding: 2.8125rem 0rem 0rem 0rem;
  }
}
/*
Custom pages
==============================================
Defines the layout for the custom pages.

The styling defines the basic layout of the Shopware 5 custom pages that can be created and customized for multiple purposes.
*/
.custom-page--content {
  margin-top: 0.625rem;
}
.custom-page--content ul,
.custom-page--content ol {
  padding-left: 1.25rem;
}
.custom-page--content .custom-page--tab-headline {
  margin-top: 0rem;
  font-size: 1.5rem;
}
.custom-page--content .content--custom.panel--body {
  padding: 1.25rem;
}
.custom-page--content .is--active-parent {
  display: block;
}
.ajax-modal--custom {
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
}
@media screen and (min-width: 48em) {
  .custom-page--content {
    margin-top: 1.875rem;
  }
  .custom-page--content .custom-page--tab-headline {
    margin-top: 0.625rem;
  }
  .ajax-modal--custom {
    padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  }
}
@media screen and (min-width: 78.75em) {
  .ajax-modal--custom {
    padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  }
  .custom-page--content {
    margin-top: 2.8125rem;
  }
}
/*
Confirm
================================
Defines the styles for the confirm page on the checkout process.

It is displayed as the third step of the checkout process of Shopware and shows the important checkout information and article details of the order.

*/
.confirm--content > .alert {
  margin: 0.5rem 0rem 0rem 0rem;
}
.confirm--content .body--revocation {
  font-weight: 700;
}
.confirm--content .panel {
  margin: 0.5rem 0rem 0.5rem 0rem;
  border-radius: 3px;
  background-clip: padding-box;
}
.confirm--content .product--table {
  margin: 0;
}
.confirm--content .product--table .panel--body {
  background: #f8f8f8;
  color: #ffffff;
  padding-bottom: 0;
}
.confirm--content .product--table .table--tr,
.confirm--content .product--table .table--media img {
  border-color: #648119;
}
.confirm--content .product--table .basket--footer {
  margin: 0rem -0.625rem 0rem -0.625rem;
  background: #fbfbfb;
  border-color: #648119;
}
.confirm--content .product--table .basket--footer .aggregation--list {
  margin: 0;
  background: transparent;
  border-top: 1px solid #96c126;
}
.confirm--content .product--table .basket--footer .table--aggregation {
  margin-left: 0;
  margin-right: 0;
}
.confirm--content .product--table .is--last-row {
  border-bottom: 0 none;
}
.confirm--content .column--unit-price {
  display: none;
}
.confirm--content .table--tr .column--tax-price {
  padding: 0rem 0rem 0.5625rem 0.625rem;
}
.confirm--content .agb_info,
.confirm--content .list--checkbox {
  margin: 0rem 0rem 1.3125rem 0rem;
}
.confirm--content .list--checkbox .column--checkbox {
  width: 10%;
}
.confirm--content .list--checkbox .column--label {
  width: 90%;
}
.confirm--content .add-product--form {
  margin: 0.75rem 0rem 0.75rem 0rem;
}
.confirm--content .add-voucher--form:after,
.confirm--content .add-product--form:after {
  content: "";
  display: table;
  clear: both;
}
.confirm--content .add-product--field,
.confirm--content .add-voucher--field {
  border-top-left-radius: 3px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 3px;
  background-clip: padding-box;
  width: 90%;
}
.confirm--content .add-product--button,
.confirm--content .add-voucher--button {
  padding: 0.3125rem 0rem 0.3125rem 0rem;
  border-top-left-radius: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 0;
  background-clip: padding-box;
  width: 10%;
  text-align: center;
}
.confirm--content .user-comment--field {
  width: 100%;
}
.confirm--content .table--actions .main--actions {
  margin: 1.25rem 0rem 0.625rem 0rem;
}
.confirm--content .table--actions .btn {
  width: 100%;
}
.confirm--content .table-footer--country-notice {
  margin: 0.6875rem 0rem 0rem 0rem;
}
.confirm--content .js--loading {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 100%;
  background-clip: padding-box;
  right: 0.375rem;
  top: 0.125rem;
  margin: 0.5rem 0.3125rem 0.5rem 0.3125rem;
  -webkit-animation: keyframe--spin 1s linear infinite;
  animation: keyframe--spin 1s linear infinite;
  border: 2px solid #96c126;
  border-top: 2px solid #000000;
  display: block;
  position: absolute;
}
.confirm--content .payment--panel .payment--method-info,
.confirm--content .payment--panel .shipping--method-info {
  margin-bottom: 0.625rem;
}
.confirm--content .payment--panel .payment--description,
.confirm--content .payment--panel .shipping--description {
  white-space: nowrap;
}
.confirm--content .information--panel-item:after {
  content: "";
  display: table;
  clear: both;
}
.confirm--content .information--panel-item .panel--body:after {
  content: "";
  display: table;
  clear: both;
}
.confirm--content .information--panel-item .alert {
  margin-bottom: 0;
}
.confirm--content .information--panel-item.information--panel-address .shipping--panel {
  text-align: center;
}
.confirm--content .information--panel-item.information--panel-address .shipping--panel .btn {
  display: none;
}
.confirm--content .set-default {
  margin-top: 0.9375rem;
}
.confirm--content .choose-different-address {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  vertical-align: bottom;
}
@media screen and (max-width: 30em) {
  .confirm--content .information--panel-item .information--panel-address .shipping--panel {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
  }
  .confirm--content .information--panel-item .information--panel-address .shipping--panel .btn {
    text-align: center;
  }
  .confirm--content .information--panel-item .information--panel-address .panel--actions .choose-different-address {
    display: inline-block;
  }
  .confirm--content .information--panel-item .information--panel-address .panel--body {
    padding-bottom: 0;
  }
  .confirm--content .information--panel-item .choose-different-address {
    margin-top: 0.625rem;
  }
}
@media screen and (min-width: 30em) {
  .confirm--content .product--table .column--quantity {
    width: 26%;
  }
  .confirm--content .product--table .column--total-price {
    width: 28.5%;
  }
  .confirm--content .product--table .column--tax-price {
    padding-right: 0.625rem;
    float: left;
    width: 32%;
  }
  .confirm--content .product--table .row--rebate .column--tax-price,
  .confirm--content .product--table .row--premium-product .column--tax-price,
  .confirm--content .product--table .row--voucher .column--tax-price {
    margin-left: 39.5%;
  }
  .confirm--content .information--panel-address > .panel {
    margin: 0;
  }
  .confirm--content .information--panel-address > .panel .information--panel {
    width: 50%;
    float: left;
  }
}
@media screen and (min-width: 48em) {
  .is--act-shippingpayment .basket--footer {
    border-radius: 3px;
    background-clip: padding-box;
  }
  .confirm--content > .alert {
    margin: 1.25rem 0rem 0rem 0rem;
  }
  .confirm--content .panel {
    margin: 1.25rem 0rem 1.25rem 0rem;
  }
  .confirm--content .product--table .table--header {
    background: #f8f8f8;
    border-color: #648119;
  }
  .confirm--content .product--table .table--header .panel--th {
    color: #000000;
  }
  .confirm--content .product--table .column--product {
    width: 47%;
  }
  .confirm--content .product--table .column--quantity {
    width: 11%;
  }
  .confirm--content .product--table .column--tax-price {
    width: 17%;
  }
  .confirm--content .product--table .column--total-price {
    width: 17%;
  }
  .confirm--content .product--table .column--actions {
    width: 7.5%;
  }
  .confirm--content .product--table .is--last-row {
    border-bottom: 0 none;
  }
  .confirm--content .product--table .row--product .column--tax-price {
    line-height: 2.625rem;
    padding-top: 1.625rem;
  }
  .confirm--content .product--table .panel--body {
    padding-bottom: 1.25rem;
  }
  .confirm--content .product--table .basket--footer {
    margin: 0rem -1.25rem -1.25rem -1.25rem;
  }
  .confirm--content .product--table .row--rebate .column--tax-price,
  .confirm--content .product--table .row--premium-product .column--tax-price,
  .confirm--content .product--table .row--voucher .column--tax-price {
    padding-top: 1.3125rem;
    margin-left: 11%;
  }
  .confirm--content .product--table .row--rebate .column--total-price,
  .confirm--content .product--table .row--premium-product .column--total-price,
  .confirm--content .product--table .row--voucher .column--total-price {
    margin-left: 0;
  }
  .confirm--content .product--table .column--tax-price .tax-price--label {
    margin-bottom: 0.75rem;
    margin: 0;
  }
  .confirm--content .row--premium-product .column--product,
  .confirm--content .row--rebate .column--product {
    width: 58%;
  }
  .confirm--content .row--premium-product .column--product .column--image,
  .confirm--content .row--rebate .column--product .column--image {
    width: 16.2%;
  }
  .confirm--content .product--table .row--premium-product .column--tax-price,
  .confirm--content .product--table .row--rebate .column--tax-price {
    margin-left: 0;
  }
  .confirm--content .tos--panel .column--checkbox {
    margin-right: 0.75rem;
    width: auto;
  }
  .confirm--content .tos--panel .column--label {
    width: 95%;
    display: block;
  }
  .confirm--content .information--panel-wrapper {
    margin: -2% 0 0 -2%;
  }
  .confirm--content .information--panel-wrapper .information--panel {
    margin: 0;
  }
  .confirm--content .information--panel-wrapper .information--panel-item {
    padding: 2% 0 0 2%;
    width: 100%;
    float: left;
  }
  .confirm--content .additional--features .feature--add-product {
    width: 40%;
    margin: -1% 2.5% 0 0;
  }
  .confirm--content .additional--features .feature--user-comment {
    width: 55%;
    margin: 0 0 0 2.5%;
  }
  .confirm--content .additional--features .user-comment--field {
    height: 5.9375rem;
  }
  .confirm--content .product--table .basket--footer .aggregation--list {
    float: right;
    padding-right: 10.4%;
    border-top: 0 none;
  }
  .confirm--content .main--actions .btn {
    width: auto;
    float: right;
  }
  .confirm--content .main--actions .btn:after {
    content: "";
    display: table;
    clear: both;
  }
  .confirm--content .relevant--info {
    display: block;
  }
  .confirm--content .information--panel-wrapper .information--panel-item-billing {
    width: 50%;
  }
  .confirm--content .information--panel-wrapper .information--panel-item-billing .panel {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .confirm--content .information--panel-wrapper .information--panel-item-shipping {
    padding-left: 0;
    width: 50%;
  }
  .confirm--content .information--panel-wrapper .information--panel-item-shipping .panel {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .confirm--content .information--panel-item.information--panel-address .panel--actions .choose-different-address {
    display: none;
  }
  .confirm--content .information--panel-item.information--panel-address .shipping--panel .btn {
    display: inline-block;
  }
  .confirm--content .information--panel-item.information--panel-address .panel--body:after {
    content: "";
    display: table;
    clear: both;
  }
  .confirm--content .information--panel-item.information--panel-address .panel--body .billing--panel {
    float: left;
    width: 50%;
  }
  .confirm--content .information--panel-item.information--panel-address .panel--body .shipping--panel {
    float: right;
    width: 50%;
  }
}
@media screen and (min-width: 64em) {
  .confirm--content .product--table .row--premium-product .column--image,
  .confirm--content .product--table .row--rebate .column--image {
    width: 13%;
  }
  .confirm--content .product--table .aggregation--list {
    padding-right: 10%;
  }
  .confirm--content .information--panel-wrapper .payment--panel .panel--actions {
    position: relative;
  }
  .confirm--content .information--panel-wrapper .payment--panel .btn--change-payment {
    bottom: 1.25rem;
    position: absolute;
  }
  .confirm--content .information--panel-wrapper .information--panel-item {
    width: 33.3%;
  }
  .confirm--content .information--panel-wrapper .information--panel-item.information--panel-address {
    width: 66.6%;
  }
}
@media screen and (min-width: 78.75em) {
  .confirm--content {
    padding-top: 1.5625rem;
  }
  .confirm--content > .alert {
    margin: 2.8125rem 0rem 0rem 0rem;
  }
  .confirm--content .product--table .row--premium-product .column--product,
  .confirm--content .product--table .row--rebate .column--product {
    width: 58%;
  }
  .confirm--content .product--table .row--premium-product .column--image,
  .confirm--content .product--table .row--rebate .column--image {
    width: 11.3%;
  }
  .confirm--content .product--table .row--premium-product .column--tax-price,
  .confirm--content .product--table .row--rebate .column--tax-price {
    margin-left: 0;
  }
  .confirm--content .product--table .aggregation--list {
    padding-right: 9.6%;
  }
}
/*
Newsletter
==========================================
Contains the styles of the newsletter sign-up page and the form element inside it.

It contains the viewport specific styles inside media queries.
*/
.newsletter--content {
  padding-top: 0.625rem;
}
.newsletter--content:after {
  content: "";
  display: table;
  clear: both;
}
.newsletter--content .newsletter--error-messages {
  margin-bottom: 0.625rem;
}
.newsletter--content .newsletter--headline {
  margin-bottom: 0.625rem;
}
.newsletter--content .newsletter--headline .newsletter--title {
  margin-top: 0.625rem;
}
.newsletter--content .newsletter--headline .newsletter--info {
  margin: 0;
}
.newsletter--content .select-field {
  margin-bottom: 0.625rem;
  max-width: 100%;
}
.newsletter--content .newsletter--required-info {
  margin-bottom: 1rem;
}
.newsletter--content .newsletter--action:after {
  content: "";
  display: table;
  clear: both;
}
.newsletter-listing--content {
  margin-top: 0.625rem;
}
.newsletter-listing--content .newsletter-listing--headline {
  margin-bottom: 0.625rem;
}
.newsletter-listing--content .newsletter--title {
  margin: 0.625rem 0rem 0.625rem 0rem;
}
.newsletter-listing--content .newsletter-listing--table-headline .newsletter-listing--headline-name {
  width: 65%;
}
.newsletter-listing--content .newsletter-listing--table-headline .newsletter-listing--headline-button {
  width: 35%;
}
.newsletter-listing--content .newsletter-listing--entry {
  padding: 0.625rem 0rem 0.625rem 0rem;
  border-bottom: 1px solid #96c126;
}
.newsletter-listing--content .newsletter-listing--entry .newsletter-listing--entry-description {
  margin-top: 0.25rem;
  width: 65%;
}
.newsletter-listing--content .newsletter-listing--entry .newsletter-listing--entry-button {
  width: 35%;
}
.newsletter-listing--content .newsletter-listing--entry:last-child {
  border: none;
}
.newsletter-detail--content {
  margin-top: 0.625rem;
}
.newsletter-detail--content .newsletter-detail--container:after {
  content: "";
  display: table;
  clear: both;
}
.newsletter-detail--content .newsletter-detail--container .newsletter-detail--iframe {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.newsletter-detail--content .newsletter-detail--container .newsletter-detail--iframe iframe {
  min-height: 31.25rem;
  width: 100%;
  border: none;
  outline: none;
}
.newsletter-detail--content .newsletter-detail--buttons {
  margin: 0.625rem 0rem 0.625rem 0rem;
}
.newsletter-detail--content .newsletter-detail--buttons .newsletter-detail--backlink {
  width: 100%;
}
.newsletter-detail--content .newsletter-detail--buttons .newsletter-detail--window {
  margin-bottom: 0.625rem;
  width: 100%;
}
@media screen and (min-width: 30em) {
  .newsletter-listing--content .newsletter-listing--table-headline .newsletter-listing--headline-name {
    width: 80%;
  }
  .newsletter-listing--content .newsletter-listing--table-headline .newsletter-listing--headline-button {
    width: 20%;
  }
  .newsletter-listing--content .newsletter-listing--entry .newsletter-listing--entry-description {
    width: 80%;
  }
  .newsletter-listing--content .newsletter-listing--entry .newsletter-listing--entry-button {
    width: 20%;
  }
  .newsletter-detail--content .newsletter-detail--buttons .newsletter-detail--backlink,
  .newsletter-detail--content .newsletter-detail--buttons .newsletter-detail--window {
    width: auto;
    margin: 0;
  }
}
@media screen and (min-width: 48em) {
  .newsletter--content {
    padding-top: 1.25rem;
  }
  .newsletter--content .newsletter--error-messages {
    margin-bottom: 1.25rem;
  }
  .newsletter--content .newsletter--headline {
    margin-bottom: 1.25rem;
  }
  .newsletter--content .select-field {
    margin-bottom: 0.9375rem;
    max-width: 18.125rem;
  }
  .newsletter-listing--content {
    margin-top: 1.25rem;
  }
  .newsletter-listing--content .newsletter-listing--headline {
    margin-bottom: 1.25rem;
  }
  .newsletter-detail--content {
    margin-top: 1.25rem;
  }
  .newsletter-detail--content .newsletter-detail--buttons .newsletter-detail--window {
    width: auto;
    text-align: right;
  }
}
@media screen and (min-width: 78.75em) {
  .newsletter--error-messages {
    padding-top: 0rem;
  }
  .newsletter--content {
    margin-top: 2.8125rem;
    padding: 0;
  }
  .newsletter--content .newsletter--headline .newsletter--title {
    margin-top: 0rem;
  }
  .newsletter-listing--content {
    margin-top: 2.8125rem;
  }
  .newsletter-listing--content .newsletter-listing--table-headline .newsletter-listing--headline-name {
    width: 90%;
  }
  .newsletter-listing--content .newsletter-listing--table-headline .newsletter-listing--headline-button {
    width: 10%;
  }
  .newsletter-listing--content .newsletter-listing--entry .newsletter-listing--entry-description {
    width: 90%;
  }
  .newsletter-listing--content .newsletter-listing--entry .newsletter-listing--entry-button {
    width: 10%;
  }
  .newsletter-detail--content {
    margin-top: 2.8125rem;
  }
}
/*
Blog
================================================
Defines the styles for the blog page and its components.

It contains the sidebar selection, the comment section and the details.

More precise designations are commented inside the document.
*/
.blog--listing {
  margin-top: 1rem;
}
.blog--filter-btn {
  margin-bottom: 1.25rem;
}
.blog--filter-btn .filter--trigger {
  display: block;
}
.blog--filter-options {
  border-right: 1px solid #96c126;
}
.blog--filter-options .filter--container {
  padding: 0rem 0.625rem 0rem 0.625rem;
}
.blog--filter-options .blog--filter-close-btn {
  padding: 0.75rem 0.625rem 0.75rem 0.625rem;
  background-color: #96c126;
  background-image: linear-gradient(to bottom, #96c126 0%, #648119 100%);
  display: block;
  color: #fff;
  font-weight: 700;
}
.blog--filter-options .blog--filter-close-btn:hover {
  color: #fff;
}
.blog--filter-options .blog--filter-close-btn .icon--arrow-right {
  margin: 0.1875rem 0rem 0rem 0rem;
  float: right;
}
.blog--filter-options .blog--subscribe {
  display: none;
}
.blog--filter-options .filter--headline {
  font-size: 1rem;
  line-height: 1.625rem;
  margin: 1rem 0.625rem 0.375rem 0.625rem;
  font-weight: 700;
  color: #000000;
}
.blog--filter-options .filter--entry {
  padding: 0.625rem 1.25rem 0.625rem 1.25rem;
  font-size: 1rem;
  display: block;
  border-bottom: 1px solid #96c126;
}
.blog--filter-options .filter--entry:last-child {
  border: 0 none;
}
.blog--filter-options .filter--link {
  color: #ffffff;
}
.blog--filter-options .filter--link:hover {
  color: #48a2e7;
}
.blog--sidebar {
  width: 100%;
}
.blog--sidebar .block-group {
  width: 100%;
}
.blog--sidebar .blog--navigation .has--border {
  border: none;
}
.blog--sidebar .blog--navigation .collapse--header {
  padding: 0.625rem 1.25rem 0.625rem 1.25rem;
  margin-bottom: 0.3125rem;
  font-weight: 500;
  color: #ffffff;
}
.blog--sidebar .blog--navigation .collapse--header:hover {
  color: #48a2e7;
}
.blog--sidebar .blog--navigation .is--active {
  color: #fff;
  font-weight: 700;
}
.blog--sidebar .blog--navigation .is--active:hover {
  color: #fff;
}
.blog--sidebar .blog--navigation .collapse--content {
  padding: 0rem 0rem 0rem 0rem;
}
.blog--sidebar .blog--navigation .collapse--content .filter--entry-link {
  color: #ffffff;
}
.blog--sidebar .blog--navigation .collapse--content .filter--entry-link:hover {
  color: #48a2e7;
}
.blog--sidebar .blog--filter-content,
.blog--sidebar .blog--subscribe-content {
  display: none;
}
.blog--sidebar .blog--filter-content.is--active,
.blog--sidebar .blog--subscribe-content.is--active {
  display: block;
}
.blog--sidebar .blog--filter-tags:after {
  content: "";
  display: table;
  clear: both;
}
.blog--box {
  margin-bottom: 1.25rem;
}
.blog--box:after {
  content: "";
  display: table;
  clear: both;
}
.blog--box .blog--box-metadata {
  padding-bottom: 0.875rem;
  padding-top: 0.3125rem;
  font-size: 0.75rem;
  margin: 0rem 1.25rem 0rem 1.25rem;
  border-bottom: 1px solid #96c126;
}
.blog--box .blog--box-metadata .blog--metadata {
  padding-right: 0.5rem;
  margin-right: 0.5rem;
  display: inline-block;
  border-right: 1px solid #96c126;
}
.blog--box .blog--box-metadata .blog--metadata:last-child {
  border-right: 0 none;
}
.blog--box .blog--box-metadata .blog--metadata-rating {
  font-size: 0.875rem;
  color: #ffffff;
}
.blog--box .blog--box-headline {
  font-size: 1.125rem;
}
.blog--box .blog--box-link {
  color: #000000;
}
.blog--box .blog--box-link:hover {
  color: #48a2e7;
}
.blog--box .blog--box-picture {
  display: block;
  height: auto;
  width: 100%;
}
.blog--box .blog--picture-preview {
  width: 100%;
}
.blog--box .blog--box-description {
  margin-top: 1rem;
}
.blog--box .blog--box-description .blog--box-description-short {
  margin-bottom: 1rem;
  margin-top: -0.375rem;
}
.blog--box .blog--box-tags {
  margin-top: 0.5rem;
  font-size: 0.75rem;
}
.blog--detail {
  margin-top: 0.625rem;
}
.blog--detail ul,
.blog--detail ol {
  padding-left: 1.875rem;
}
.blog--detail .listing {
  margin: 0;
}
.blog--detail .blog--box {
  margin-bottom: 0;
}
.blog--detail .blog--detail-header {
  margin-bottom: 1.25rem;
}
.blog--detail .blog--detail-headline {
  margin: 0rem 0rem 0.3125rem 0rem;
}
.blog--detail .blog--detail-headline,
.blog--detail .blog--detail-box-headline {
  font-size: 1.125rem;
}
.blog--detail .select-field {
  max-width: 100%;
}
.blog--detail .blog--rating-link {
  font-size: 0.875rem;
  color: #ffffff;
}
.blog--detail .blog--bookmarks-icons {
  margin-top: 0.625rem;
  float: right;
}
.blog--detail .blog--bookmark {
  font-size: 2.5rem;
}
.blog--detail .blog--detail-thumbnails {
  margin-bottom: 0.625rem;
}
.blog--detail .blog--detail-thumbnails .blog--thumbnail-image {
  margin: 0 auto;
}
.blog--detail .blog--detail-thumbnails .block {
  height: 5rem;
  width: 23%;
}
.blog--detail .blog--image {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  width: 100%;
}
.blog--detail .blog--thumbnail {
  padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem;
  margin: 2% 1%;
  display: block;
  float: left;
}
.blog--detail .blog--thumbnail:first-child {
  margin-left: 0;
}
.blog--detail .blog--thumbnail:last-child {
  margin-right: 0;
}
.blog--detail .blog--comments-wrapper {
  padding: 1.25rem 0rem 1.25rem 0rem;
}
.blog--detail .blog--comments {
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
}
.blog--detail .blog--comments .comments--actions .btn--create-entry {
  width: 100%;
}
.blog--detail .blog--comments .comments--list {
  margin-top: 1.875rem;
}
.blog--detail .blog--comments .list--entry {
  margin-top: 0.625rem;
}
.blog--detail .blog--comments .list--entry:after {
  content: "";
  display: table;
  clear: both;
}
.blog--detail .blog--comments .entry--meta {
  width: 100%;
}
.blog--detail .blog--comments .entry--meta .meta--rating {
  margin-bottom: 0.3125rem;
}
.blog--detail .blog--comments .entry--content {
  width: 100%;
}
.blog--detail .blog--comments .content--headline {
  margin: 0.625rem 0rem 0.3125rem 0rem;
  font-size: 1rem;
}
.blog--detail .blog--comments-headline {
  font-size: 1.3125rem;
  margin: 0rem 0rem 1.25rem 0rem;
}
.blog--detail .blog--comments-entry {
  margin-bottom: 1.25rem;
}
.blog--detail .blog--comments-entry:last-child {
  margin: 0;
}
.blog--detail .blog--comments-entry-left {
  padding: 1.25rem 2.5rem 1rem 2.5rem;
  border-bottom: 1px solid #96c126;
}
.blog--detail .blog--comments-entry-left::after {
  margin: 0rem 0rem 0rem -0.5625rem;
  width: 1.125rem;
  height: 1.125rem;
  bottom: -0.5625rem;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  content: '';
  position: absolute;
  left: 50%;
  background: #fff;
  border: 1px solid #96c126;
  border-left: 0 none;
  border-top: 0 none;
}
.blog--detail .blog--comments-rating {
  font-size: 1.125rem;
  color: #f1c40f;
}
.blog--detail .blog--comments-entry-right {
  padding: 1.25rem 2.5rem 1rem 2.5rem;
}
.blog--detail .blog--comments-entry-headline {
  font-size: 1rem;
  color: #000000;
  margin-top: 0;
}
.blog--detail .blog--comments-form .form--comment-add {
  margin-top: 20px;
}
.blog--detail .blog--comments-form-errors .alert {
  margin: 1.25rem 0rem 1.25rem 0rem;
}
.blog--detail .blog--comments-voting {
  margin-bottom: 0.625rem;
  line-height: 1;
}
.blog--detail .collapse--soft-hidden {
  display: none;
}
.blog--detail .collapse--soft-show {
  display: block;
}
@media screen and (min-width: 48em) {
  .blog--listing {
    margin-top: 1rem;
  }
  .blog--listing .panel--title {
    margin: 0rem 1.25rem 0rem 1.25rem;
  }
  .blog--listing .panel--body {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .blog--box .blog--box-metadata {
    font-size: 0.875rem;
  }
  .blog--box .blog--box-picture {
    width: 20%;
    float: left;
  }
  .blog--box .blog--box-description {
    padding-top: 0;
    margin-top: 0;
    width: 76%;
    float: right;
  }
  .blog--box .blog--box-tags {
    font-size: 0.875rem;
  }
  .blog--content {
    margin-top: 2.8125rem;
  }
  .blog--content .blog--navigation {
    padding: 0rem 0rem 0rem 0rem;
  }
  .blog--content .blog--navigation .has--border {
    border: 1px solid #96c126;
  }
  .blog--content .blog--navigation .blog--sidebar-title {
    padding: 1.25rem 0rem 0.625rem 0rem;
    margin: 0rem 1.25rem 0rem 1.25rem;
    border-radius: 0;
    color: #000000;
    border-color: #96c126;
    border-width: 0 0 1px 0;
    display: block;
    font-weight: 700;
    background: none;
    box-shadow: none;
    cursor: default;
  }
  .blog--content .blog--navigation .blog--sidebar-body {
    padding: 1.25rem 1.25rem 1.25rem 1.25rem;
    border: 0 none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  .blog--content .blog--navigation .collapse--header:hover {
    color: #000000;
  }
  .blog--content .blog--navigation .blog--subscribe {
    display: block;
  }
  .blog--content .blog--navigation .blog--subscribe-content,
  .blog--content .blog--navigation .blog--filter-content {
    display: block;
  }
  .blog--content .filter--container {
    padding: 0;
  }
  .blog--content .blog--filter-btn {
    display: none;
  }
  .blog--content .blog--filter-options {
    display: block;
    float: right;
    width: 20%;
    border: none;
    background: none;
  }
  .blog--content .blog--filter-options .filter--group {
    margin: 0rem 0rem 1rem 0rem;
    width: 100%;
    height: auto;
  }
  .blog--content .blog--filter-options .filter--entry {
    font-size: 0.875rem;
    padding: 0;
    border: 0 none;
  }
  .blog--content .blog--filter-options .blog--filter-close-btn {
    display: none;
  }
  .blog--content .blog--filter-options .filter--headline {
    display: none;
  }
  .blog--content .filter--expand-collapse {
    display: none;
  }
  .blog--content .blog--listing {
    margin-top: 0;
    width: 78%;
    float: left;
  }
  .blog--content .blog--box .blog--box-headline {
    font-size: 1.125rem;
  }
  .blog--content .blog--box .blog--box-link {
    color: #000000;
  }
  .blog--content .blog--box .blog--box-link:hover {
    color: #48a2e7;
  }
  .blog--content .blog--box .blog--box-metadata {
    padding-top: 0.3125rem;
  }
  .blog--content .blog--box .blog--box-content .blog--box-description {
    width: 74%;
  }
  .blog--detail {
    margin-top: 1.875rem;
  }
  .blog--detail .blog--detail-headline {
    font-size: 1.125rem;
    margin-bottom: 0.3125rem;
  }
  .blog--detail .blog--box-metadata,
  .blog--detail .panel--title {
    margin: 0;
  }
  .blog--detail .panel--body {
    padding-left: 0;
    padding-right: 0;
  }
  .blog--detail .blog--detail-thumbnails {
    margin-bottom: 0.625rem;
  }
  .blog--detail .blog--detail-thumbnails .blog--thumbnail-image {
    margin: 0 auto;
  }
  .blog--detail .blog--detail-thumbnails .block {
    width: 5rem;
    height: 5rem;
  }
  .blog--detail .blog--comments .entry--meta {
    width: 25%;
    text-align: left;
  }
  .blog--detail .blog--comments .entry--content {
    width: 75%;
    float: left;
  }
  .blog--detail .blog--comments .comments--actions .btn--create-entry {
    width: auto;
  }
  .blog--detail .blog--comments-name,
  .blog--detail .blog--comments-summary {
    padding-right: 0.625rem;
    width: 50%;
    float: left;
  }
  .blog--detail .blog--comments-email,
  .blog--detail .blog--comments-voting {
    padding-left: 0.625rem;
    width: 50%;
    float: right;
  }
  .blog--detail .blog--comments-voting {
    margin-bottom: 0.625rem;
  }
  .blog--detail .blog--comments-opinion {
    clear: both;
  }
  .blog--detail .blog--comments-captcha {
    margin-bottom: 0.625rem;
  }
  .blog--detail .blog--comments-captcha:after {
    content: "";
    display: table;
    clear: both;
  }
  .blog--detail .blog--comments-captcha {
    width: 50%;
  }
  .blog--detail .blog--comments-captcha .captcha--placeholder {
    padding-right: 0.625rem;
    width: 30%;
    float: left;
  }
  .blog--detail .blog--comments-captcha .captcha--code {
    padding-right: 0.625rem;
    width: 70%;
    float: right;
  }
}
@media screen and (min-width: 64em) {
  .blog--detail .blog--detail-description {
    width: 100%;
  }
  .blog--detail .blog--detail-image-container {
    width: 40%;
    margin: 0 0 3% 3%;
    float: right;
  }
}
@media screen and (min-width: 78.75em) {
  .blog--listing .listing--actions {
    margin-top: 0.9375rem;
    padding-top: 0;
    margin-bottom: 0;
  }
  .blog--listing .listing--paging {
    border: 0 none;
  }
  .blog--detail {
    margin-top: 3.125rem;
  }
  .blog--detail .blog--detail-headline {
    font-size: 1.3125rem;
  }
  .blog--detail .blog--bookmark {
    font-size: 2rem;
  }
}
/*
Configurator
==========================================
Defines the styles for the product configuration options element.

The configurator element allows the user to choose from different article variations on the Shopware product detail page and configure his product.
*/
.configurator--variant .variant--group {
  margin: 0rem 0rem 0.625rem 0rem;
}
.configurator--variant .variant--group:after {
  content: "";
  display: table;
  clear: both;
}
.configurator--variant .variant--name {
  margin: 0rem 0rem 0.3125rem 0rem;
  font-weight: 700;
}
.configurator--variant .variant--option {
  height: 3.125rem;
  line-height: 2.5rem;
  margin-bottom: 0.625rem;
  overflow: hidden;
  display: block;
  width: 23%;
  margin-right: 2%;
  position: relative;
  float: left;
}
.configurator--variant .option--input {
  opacity: 0;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  cursor: pointer;
  /**
         * Checkbox/Radio Hack
         * Changes the styling of the next label element
         * based on the state of the radio element.
         */
}
.configurator--variant .option--input:hover ~ label {
  color: #48a2e7;
  border-color: #48a2e7;
}
.configurator--variant .option--input:hover ~ label.is--disabled {
  color: #ffffff;
  border-color: #96c126;
}
.configurator--variant .option--input:checked ~ label {
  color: #48a2e7;
  border-color: #48a2e7;
}
.configurator--variant .option--input:disabled ~ label {
  opacity: 0.5;
}
.configurator--variant .option--input:disabled {
  cursor: not-allowed;
}
.configurator--variant .option--label {
  padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem;
  line-height: 2.5rem;
  border-radius: 3px;
  background-clip: padding-box;
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 500;
  border: 1px solid #96c126;
  font-weight: 700;
  text-align: center;
  overflow: hidden;
}
.configurator--variant .option--label.is--disabled img {
  opacity: 0.3;
}
.configurator--variant .option--label .image--media {
  line-height: 3.125rem;
  vertical-align: middle;
  text-align: center;
}
.configurator--variant .option--label img {
  margin: 0 auto;
}
/*
Compare
==============================================
Defines the styling of the comparison tool and its elements.

The comparision creates a fixed modalbox in that the user can compare multiple articles.

The user can open the tool inside the product detail section.
*/
.top-bar--navigation {
  position: relative;
}
.top-bar--navigation .entry--compare {
  padding: 0rem 0.5rem 0rem 0.5rem;
}
.top-bar--navigation .entry--compare .compare--quantity {
  margin-left: 0.3125rem;
  font-weight: 700;
  display: inline-block;
  color: #48a2e7;
}
.top-bar--navigation .entry--compare .icon--compare {
  font-size: 0.75rem;
}
.top-bar--navigation .compare--list {
  width: 17.5rem;
  padding: 0.3125rem 0.625rem 0.625rem 0.625rem;
  top: 2rem;
  right: 0.75rem;
  text-align: left;
  position: absolute;
  display: none;
  list-style: none;
  background: #fff;
  z-index: 4000;
  border: 1px solid #96c126;
}
.top-bar--navigation .compare--list::after {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  width: 0.5rem;
  height: 0.5rem;
  top: -0.3125rem;
  left: 1.5625rem;
  content: '';
  display: block;
  position: absolute;
  background: #fff;
  border-color: #96c126;
  border-width: 0 0 1px 1px;
  border-style: solid;
}
.top-bar--navigation .compare--list .btn--compare-delete {
  width: 100%;
}
.top-bar--navigation .js--is--dropdown-active .compare--list {
  display: block;
}
.top-bar--navigation .js--is--dropdown-active .compare--list .compare--entry {
  cursor: default;
}
.top-bar--navigation .js--is--dropdown-active .compare--list .compare--entry form {
  display: inline-block;
}
.top-bar--navigation .js--is--dropdown-active .compare--list .compare--link {
  width: 14.375rem;
  padding: 0.625rem 0rem 0.625rem 0rem;
  font-size: 0.875rem;
  color: #ffffff;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-bar--navigation .js--is--dropdown-active .compare--list .compare--link:hover {
  color: #48a2e7;
}
.top-bar--navigation .js--is--dropdown-active .compare--list .compare--button {
  padding: 0.1875rem 0.25rem 0.1875rem 0.25rem;
  margin: 0.1875rem 0rem 0rem 0rem;
  float: right;
}
.top-bar--navigation .js--is--dropdown-active .compare--list .btn--item-delete {
  height: 1.3125rem;
  width: 1.3125rem;
  padding: 0.25rem 0.3125rem 0.25rem 0.3125rem;
  margin: 0.5rem 0rem 0.5rem 0rem;
  font-size: 0.5rem;
  line-height: 0.875rem;
  float: right;
}
.top-bar--navigation .js--is--dropdown-active .compare--list .btn--item-delete .icon--cross {
  padding: 0;
  margin: 0;
}
.top-bar--navigation .js--is--dropdown-active .compare--list .compare--button .icon--cross {
  padding: 0;
  margin: 0;
}
.top-bar--navigation .js--is--dropdown-active .compare--list .btn--compare {
  margin-top: 0.3125rem;
}
.compare--wrapper {
  display: block;
  overflow: auto;
}
.modal--compare {
  font-size: 0.875rem;
  letter-spacing: -0.25rem;
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
}
.modal--compare.is--fluid {
  width: 100%;
  overflow: hidden;
}
.modal--compare .modal--title {
  padding: 0.625rem 2.5rem 0.625rem 1.25rem;
  font-size: 1rem;
  font-weight: 700;
  border-bottom: 1px solid #ffffff;
  letter-spacing: 0;
}
.modal--compare .modal--error {
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  letter-spacing: 0;
}
.modal--compare .list--head {
  background: #fbfbfb;
  font-weight: 700;
}
.modal--compare .compare--group {
  width: 12.5rem;
  display: inline-block;
  white-space: normal;
  vertical-align: top;
  letter-spacing: 0;
}
.modal--compare .group--small {
  width: 12.5rem;
}
.modal--compare .compare--group-list {
  margin: 0;
  padding: 0;
}
.modal--compare .list--entry {
  padding: 0.625rem 1.875rem 0.625rem 0.625rem;
  color: #ffffff;
  border-bottom: 1px solid #96c126;
}
.modal--compare .entry--picture {
  height: 10rem;
  position: relative;
}
.modal--compare .entry--picture .image--element img {
  max-width: 90%;
  max-height: 90%;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.modal--compare .entry--name {
  height: 7.8125rem;
}
.modal--compare .link--name {
  position: relative;
  display: block;
  height: 70px;
  color: #000000;
  font-weight: 700;
}
.modal--compare .entry--voting {
  height: 3.125rem;
}
.modal--compare .entry--voting .icon--star,
.modal--compare .entry--voting .icon--star-empty {
  color: #f1c40f;
}
.modal--compare .entry--description {
  height: 9.375rem;
  text-align: left;
  word-wrap: break-word;
}
.modal--compare .entry--price {
  height: 8.125rem;
}
.modal--compare .entry--price .price--pseudoprice {
  text-decoration: line-through;
}
.modal--compare .entry--price .price--normal {
  font-size: 1rem;
  color: #000000;
  font-weight: 700;
}
.modal--compare .entry--price .price--reduced {
  color: #e74c3c;
}
.modal--compare .entry--property {
  height: auto;
}
@media screen and (min-width: 78.75em) {
  .top-bar--navigation .compare--list {
    right: 0;
  }
}
/*
Home
==============================================
Defines the styling of the home-page content elements.
*/
.content--home {
  margin-top: 1.25rem;
}
@media screen and (min-width: 48em) {
  .content--home {
    margin-top: 1.875rem;
  }
}
@media screen and (min-width: 78.75em) {
  .content--home {
    margin-top: 3.125rem;
  }
}
/*
Payment
==============================================
Defines the styling of the payment-form elements.

The payment page allows the user to choose the prefered payment option and add his personal payment informations inside form elements.

The payment page is a part of the Shopware checkout process.
*/
.payment--form-group {
  margin: 0.625rem 0rem 0.625rem 0rem;
}
.payment--form-group .payment--field {
  margin-bottom: 0.625rem;
  display: block;
  width: 100%;
}
.payment--form-group .register--required-info {
  margin: 0;
}
@media screen and (min-width: 48em) {
  .payment--form-group .payment--field {
    width: 85%;
  }
}
/*
Address
================================
Defines the styles for the address pages and the modals.
*/
.address-manager--modal .header > .title {
  padding-left: 2%;
}
.address-manager--modal.address-manager--editor .address-editor--errors {
  padding: 1.25rem;
  padding-bottom: 0;
}
.address-manager--modal.address-manager--editor .address-editor--body {
  padding: 0;
}
.address-manager--modal.address-manager--selection .content:after {
  content: "";
  display: table;
  clear: both;
}
.address-manager--modal.address-manager--selection .content .modal--container {
  margin: -2% 0 0 -2%;
}
.address-manager--modal.address-manager--selection .content .modal--container:after {
  content: "";
  display: table;
  clear: both;
}
.address-manager--modal.address-manager--selection .content .modal--container .modal--container-item {
  padding: 2% 0 0 2%;
  float: left;
  width: 100%;
}
.address-manager--modal.address-manager--selection .content .panel--actions .btn {
  width: 100%;
  text-align: center;
}
.address-manager--modal.address-manager--selection .content .panel--actions .btn .js--loading {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 100%;
  background-clip: padding-box;
  right: 0.375rem;
  top: 0.125rem;
  margin: 0.5rem 0.3125rem 0.5rem 0.3125rem;
  -webkit-animation: keyframe--spin 1s linear infinite;
  animation: keyframe--spin 1s linear infinite;
  border: 2px solid #96c126;
  border-top: 2px solid #000000;
  display: block;
  position: absolute;
}
.account--address.account--content,
.address-manager--modal.account--content {
  margin: 0rem;
  padding-top: 2.8125rem;
}
.account--address .address--item-body .panel--title,
.address-manager--modal .address--item-body .panel--title {
  margin: 0rem 0rem 1.25rem 0rem;
  padding-top: 0;
}
.account--address .account--welcome,
.address-manager--modal .account--welcome {
  margin-bottom: 0;
}
.account--address.account--address-form .alert,
.address-manager--modal.account--address-form .alert {
  margin: 1.25rem 1.125rem 1.25rem 1.125rem;
}
.account--address .address--form-actions:after,
.address-manager--modal .address--form-actions:after {
  content: "";
  display: table;
  clear: both;
}
.account--address .address--form-actions .address--form-submit,
.address-manager--modal .address--form-actions .address--form-submit {
  margin-bottom: 0.625rem;
  width: 100%;
  text-align: center;
}
.account--address .address--actions-set-defaults,
.address-manager--modal .address--actions-set-defaults {
  margin-bottom: 0.625rem;
  line-height: normal;
}
.account--address .address--actions-set-defaults .btn,
.address-manager--modal .address--actions-set-defaults .btn {
  padding: 0;
  color: #96c126;
}
.account--address .address--actions-set-defaults .btn:hover,
.address-manager--modal .address--actions-set-defaults .btn:hover {
  color: #48a2e7;
}
.account--address .address--required-info,
.address-manager--modal .address--required-info {
  margin: 0rem 1.625rem 1rem 1.625rem;
  font-size: 0.875rem;
}
.account--address .select-field,
.address-manager--modal .select-field {
  margin-bottom: 0.3125rem;
  max-width: 100%;
}
.account--address .address--field,
.address-manager--modal .address--field {
  margin-bottom: 0.625rem;
  width: 100%;
}
.account--address .address--customertype,
.address-manager--modal .address--customertype {
  display: block;
}
.account--address .address--zip-city .address--field-zipcode,
.address-manager--modal .address--zip-city .address--field-zipcode {
  width: 28%;
  float: left;
}
.account--address .address--zip-city .address--field-city,
.address-manager--modal .address--zip-city .address--field-city {
  width: 70%;
  float: left;
}
.account--address .address--zip-city .address--field-city:after,
.address-manager--modal .address--zip-city .address--field-city:after {
  content: "";
  display: table;
  clear: both;
}
.account--address .address--zip-city .address--spacer,
.address-manager--modal .address--zip-city .address--spacer {
  margin-right: 2%;
}
.account--address.address--delete .panel,
.address-manager--modal.address--delete .panel {
  margin-bottom: 1.25rem;
}
.account--address .address--delete-actions .btn.is--primary,
.address-manager--modal .address--delete-actions .btn.is--primary {
  float: right;
}
.account--address .address--content,
.address-manager--modal .address--content {
  margin: -2% 0 0 -2%;
}
.account--address .address--content:after,
.address-manager--modal .address--content:after {
  content: "";
  display: table;
  clear: both;
}
.account--address .address--item-content,
.address-manager--modal .address--item-content {
  width: 100%;
  float: left;
  padding: 2%;
}
.account--address .address--item-content .panel--actions,
.address-manager--modal .address--item-content .panel--actions {
  display: table-cell;
  vertical-align: bottom;
}
.account--address .address--item-create .btn,
.address-manager--modal .address--item-create .btn {
  text-align: center;
}
.account--address .address--item-actions form,
.address-manager--modal .address--item-actions form {
  display: block;
}
.account--address .js--loading,
.address-manager--modal .js--loading {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 100%;
  background-clip: padding-box;
  margin: 0rem 0rem 0rem 0.3125rem;
  top: 0.25rem;
  -webkit-animation: keyframe--spin 1s linear infinite;
  animation: keyframe--spin 1s linear infinite;
  border: 2px solid #96c126;
  border-top: 2px solid #000000;
  display: inline-block;
  position: relative;
}
@media screen and (min-width: 48em) {
  .account--address .address--form-actions .address--form-submit,
  .address-manager--modal .address--form-actions .address--form-submit {
    width: auto;
  }
  .address-manager--modal.address-manager--selection .content .modal--container .modal--container-item {
    width: 50%;
  }
  .account--address.account--content .address--field {
    margin-bottom: 0.9375rem;
    width: 70%;
  }
  .account--address.account--content .select-field {
    max-width: 18.125rem;
  }
  .account--address.account--content .address--form-actions:after {
    content: "";
    display: table;
    clear: both;
  }
  .account--address.account--content .address--item-content {
    width: 50%;
  }
  .account--address.account--content .address--zip-city .address--field-zipcode {
    width: 18%;
    float: left;
  }
  .account--address.account--content .address--zip-city .address--field-city {
    width: 50%;
    float: left;
  }
  .account--address.account--content .address--zip-city .address--field-city:after {
    content: "";
    display: table;
    clear: both;
  }
  .account--address.account--content .address--zip-city .address--spacer {
    margin-right: 2%;
  }
}
@media screen and (min-width: 78.75em) {
  .address-manager--modal.address-manager--selection {
    max-width: 71.5625rem;
  }
  .address-manager--modal.address-manager--selection .content .modal--container .modal--container-item {
    width: 33.3%;
  }
}
.page-wrap--cookie-permission {
  padding: 0.625rem;
  z-index: 8000;
  border-top: 1px solid #e1e1e1;
  background: #fff;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
}
.page-wrap--cookie-permission .cookie-permission--container {
  width: 100%;
  text-align: center;
  position: relative;
}
.page-wrap--cookie-permission .cookie-permission--container:after {
  content: "";
  display: table;
  clear: both;
}
.page-wrap--cookie-permission .cookie-permission--container .cookie-permission--button {
  margin: 0 auto;
  margin-top: 1.25rem;
}
.page-wrap--cookie-permission .cookie-permission--container .cookie-permission--button.cookie-permission--extra-button .cookie-permission--accept-button {
  margin-right: 0.3125rem;
}
.page-wrap--cookie-permission .cookie-permission--container .cookie-permission--decline-button {
  margin-right: 0.3125rem;
}
.page-wrap--cookie-permission .cookie-permission--container .cookie-permission--accept-button,
.page-wrap--cookie-permission .cookie-permission--container .cookie-permission--decline-button,
.page-wrap--cookie-permission .cookie-permission--container .cookie-permission--configure-button {
  margin-top: 0.625rem;
}
.cookie-removal--container {
  padding: 1.5625rem;
}
.cookie-removal--container .cookie-removal--list {
  margin-bottom: 1.25rem;
  list-style-position: inside;
}
.cookie-removal--container .cookie-removal--buttons {
  margin-top: 1.25rem;
}
.cookie-removal--container .cookie-removal--buttons .btn {
  margin-bottom: 0.375rem;
  display: inline-block;
  width: 48%;
  float: right;
}
.cookie-removal--container .cookie-removal--buttons .btn:last-child {
  margin-right: 2%;
}
@media screen and (min-width: 30em) {
  .cookie-removal--container .cookie-removal--footer:after {
    content: "";
    display: table;
    clear: both;
  }
  .cookie-removal--container .cookie-removal--footer .cookie-removal--buttons {
    float: right;
  }
  .cookie-removal--container .cookie-removal--buttons {
    min-width: 16.25rem;
    margin: 0;
  }
  .cookie-removal--container .privacy--notice {
    padding-top: 0.5rem;
    display: inline-block;
  }
  .page-wrap--cookie-permission .cookie-permission--container .cookie-permission--accept-button,
  .page-wrap--cookie-permission .cookie-permission--container .cookie-permission--decline-button,
  .page-wrap--cookie-permission .cookie-permission--container .cookie-permission--configure-button {
    margin-top: 0;
  }
}
@media screen and (min-width: 64em) {
  .page-wrap--cookie-permission .cookie-permission--container {
    width: 100%;
  }
  .page-wrap--cookie-permission .cookie-permission--container:after {
    content: "";
    display: table;
    clear: both;
  }
  .page-wrap--cookie-permission .cookie-permission--container.cookie-mode--1 .cookie-permission--content {
    width: calc(100% - 240px);
    text-align: left;
  }
  .page-wrap--cookie-permission .cookie-permission--container.cookie-mode--1 .cookie-permission--content.cookie-permission--extra-button {
    width: calc(100% - 370px);
  }
  .page-wrap--cookie-permission .cookie-permission--container.cookie-mode--1 .cookie-permission--button {
    width: 15rem;
    right: 0.3125rem;
    position: absolute;
    top: calc(50% - 21px);
  }
  .page-wrap--cookie-permission .cookie-permission--container.cookie-mode--1 .cookie-permission--button.cookie-permission--extra-button {
    width: 23.125rem;
  }
  .page-wrap--cookie-permission .cookie-permission--container .cookie-permission--content {
    padding: 0.75rem;
    float: left;
  }
  .page-wrap--cookie-permission .cookie-permission--container .cookie-permission--button {
    margin: 0;
    float: right;
  }
}
.content-type--head {
  overflow: hidden;
  margin: 1rem 0rem 1rem 0rem;
}
.content-type--head .head--picture {
  max-height: 30em;
  padding: 1rem 1rem 1rem 1rem;
  border-radius: 3px;
  background-clip: padding-box;
}
.content-type--head .head--picture img {
  max-height: 30em;
  object-fit: scale-down;
  margin: 0 auto;
}
.content-type--field {
  display: block;
  width: 100%;
  padding: 1rem 1rem 1rem 1rem;
  border-radius: 3px;
  background-clip: padding-box;
}
.content-type--field:nth-child(odd) {
  background: #fbfbfb;
}
.field--full > .field--label {
  display: none;
}
.field--full > .field--content {
  width: 100%;
  max-width: unset;
  text-align: left;
}
.field--label,
.field--content {
  display: block;
  width: 50%;
  float: left;
}
.field--label > span {
  display: inline-block;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.field--label-separator {
  display: none;
  float: right;
  width: 1px;
  height: 1rem;
  margin: 0 1rem;
  background: #e1e1e1;
}
.field--content {
  text-align: right;
}
.content-type--field-checkbox .icon--check {
  color: #2ecc71;
}
.content-type--field-checkbox .icon--cross {
  color: #e74c3c;
}
.content-type--field-media > .field--label,
.content-type--field-media-grid > .field--label {
  display: none;
}
.content-type--field-media > .field--content,
.content-type--field-media-grid > .field--content {
  width: 100%;
  max-width: unset;
  text-align: left;
}
.content-type--field-media.content-type--field,
.content-type--field-media-grid.content-type--field {
  background: #f8f8f8;
}
.content-type--field-media picture,
.content-type--field-media-grid picture,
.content-type--field-media img,
.content-type--field-media-grid img {
  margin: 0 auto;
  border-radius: 3px;
  background-clip: padding-box;
}
.content-type--field-media-grid .image--gallery {
  min-height: 30em;
}
.content-type--field-textarea > .field--label {
  display: none;
}
.content-type--field-textarea > .field--content {
  width: 100%;
  max-width: unset;
  text-align: left;
}
.content-type--field-textarea.content-type--field {
  background: #f8f8f8;
}
.content-type--field-text > .field--label {
  display: none;
}
.content-type--field-text > .field--content {
  width: 100%;
  max-width: unset;
  text-align: left;
}
.content-type--field-text.content-type--field {
  background: #f8f8f8;
}
.content-type--field-product-field > .field--label {
  display: none;
}
.content-type--field-product-field > .field--content {
  width: 100%;
  max-width: unset;
  text-align: left;
}
.content-type--field-product-field .product--box {
  background-color: #fff;
  padding: unset;
}
.content-type--field-product-field .box--content {
  padding: 1.25rem 1.875rem 1.25rem 1.875rem;
}
.content-type--field-product-grid {
  overflow: hidden;
  padding: 1rem 0rem 1rem 0rem;
}
.content-type--field-product-grid > .field--label {
  display: none;
}
.content-type--field-product-grid > .field--content {
  width: 100%;
  max-width: unset;
  text-align: left;
}
.content-type--field-product-grid .product-slider .product-slider--container {
  padding: 0rem 2rem 0rem 2rem;
}
.content-type--field-product-grid .product-slider .product--description {
  white-space: normal;
}
.content-type--field-product-grid .box--content {
  background-color: #f8f8f8;
}
.content-type--field-tinymce > .field--label {
  display: none;
}
.content-type--field-tinymce > .field--content {
  width: 100%;
  max-width: unset;
  text-align: left;
}
.content-type--field-aceeditor > .field--label {
  display: none;
}
.content-type--field-aceeditor > .field--content {
  width: 100%;
  max-width: unset;
  text-align: left;
}
@media screen and (min-width: 30em) {
  .content-type--head .head--picture {
    max-width: 50%;
    float: left;
  }
  .content-type--head .head--picture img {
    max-height: 30em;
  }
}
@media screen and (min-width: 48em) {
  .field--label {
    max-width: 30%;
    width: 30%;
  }
  .field--label-separator {
    display: inline-block;
  }
  .field--content {
    max-width: 70%;
    width: 70%;
    text-align: unset;
  }
}
@media screen and (min-width: 64em) {
  .content-type {
    width: 75%;
    margin: 0 auto;
  }
}
@media screen and (min-width: 78.75em) {
  .is--content-type .sidebar-main {
    display: none;
  }
}
/*
Hacks
====================================
The `hacks.less` contains all dirty hacks like !important or negative margins, so you get a single place to document and set them.

More precise designations are commented inside the document.
*/
.product--tax a {
  text-decoration: none !important;
}
.product--tax a:hover {
  text-decoration: underline !important;
}
.entry--all-results-link i {
  font-size: 8px;
}
.table--shipping-costs-trigger i {
  margin: -0.25rem 0rem 0rem 0rem;
  font-size: 8px;
}
.table--footer i,
.premium-product--product .btn i,
.compare--button i,
.modal--compare .btn i {
  font-size: 8px;
}
.js--modal.sizing--auto.is--fullscreen {
  height: 100% !important;
  width: 100% !important;
}
.js--modal.sizing--fixed {
  max-height: none !important;
  max-width: none !important;
}
.is--inactive {
  overflow: hidden !important;
}
.btn::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.is--ie .action--sort .sort--select:after {
  line-height: 34px;
}
.is--ie .register--login .register--new-customer .new-customer-btn::after {
  line-height: 16px;
}
.is--ie .filter-panel--input input[type='checkbox']:checked ~ .input--state::before,
.is--ie .filter-panel--checkbox input[type='checkbox']:checked ~ .input--state::before,
.is--ie .filter-panel--radio input[type='checkbox']:checked ~ .input--state::before,
.is--ie .filter-panel--input input[type='checkbox']:checked ~ .checkbox--state::before,
.is--ie .filter-panel--checkbox input[type='checkbox']:checked ~ .checkbox--state::before,
.is--ie .filter-panel--radio input[type='checkbox']:checked ~ .checkbox--state::before {
  line-height: 12px;
}
@media screen and (min-width: 48em) {
  .top-bar--navigation .entry--service:after,
  .top-bar--navigation .entry--service::after {
    font-size: 5px;
  }
  .sidebar--navigation .is--level1 .navigation--entry.has--sub-children.is--active:before,
  .sidebar--navigation .is--level1 .navigation--entry.has--sub-children.is--active::before {
    font-size: 5px;
  }
  .is--ie .header-main .top-bar--navigation .select-field:after {
    line-height: 24px;
  }
  .is--ie .action--filter-btn .filter--trigger:before,
  .is--ie .action--filter-btn .filter--trigger:after {
    line-height: 16px;
  }
  .is--ie .header-main .top-bar--navigation .top-bar--language .select-field select,
  .is--edge .header-main .top-bar--navigation .top-bar--language .select-field select {
    font-size: 0;
  }
  .is--ie .header-main .top-bar--navigation .top-bar--language .select-field select option,
  .is--edge .header-main .top-bar--navigation .top-bar--language .select-field select option {
    font-size: 0.875rem;
  }
}
/** nutritional value  */
#FriedmNutritionalValue table {
  border-collapse: separate;
  border-spacing: 0.0625rem;
}
#FriedmNutritionalValue tbody,
#FriedmNutritionalValue tr {
  display: table;
  width: 100%;
}
#FriedmNutritionalValue td {
  border: none;
}
#FriedmNutritionalValue tr:nth-child(even) td {
  background: #f5f5f5;
}
#FriedmNutritionalValue .product--properties-label {
  width: 30%;
}
#FriedmNutritionalValue .product--properties-value {
  width: 20%;
}
#FriedmNutritionalValue .content--title {
  font-size: 1.125rem;
  margin: 0.625rem 0rem 0.9375rem 0rem;
  font-weight: 700;
  color: #000000;
}
/** nutri-score */
.nutriscore--wrapper .nutriscore {
  width: auto;
  position: relative;
  list-style: none;
  margin-top: 0.9375rem;
  cursor: default;
  display: inline-flex;
}
.nutriscore--wrapper .nutriscore li {
  display: table-cell;
  padding: 0.75rem 0.5rem 0.75rem 0.5rem;
  text-align: center;
  position: relative;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  line-height: 0.875rem;
}
.nutriscore--wrapper .nutriscore li.active:before {
  content: attr(data-score);
  position: absolute;
  padding: 1.125rem 0.625rem 1.125rem 0.625rem;
  top: -0.75rem;
  left: -0.375rem;
  z-index: 1;
  border: solid #fff;
  border-width: 0.125rem;
  border-radius: 0.75rem;
  color: #ffffff;
  font-size: 1.375rem;
  line-height: 1.3125rem;
  font-weight: bold;
}
.nutriscore--wrapper .nutriscore li:first-child {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.nutriscore--wrapper .nutriscore li:last-child {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.nutriscore--wrapper .nutriscore .nutriscore--a,
.nutriscore--wrapper .nutriscore .nutriscore--a.active:before {
  background: #017f3f;
}
.nutriscore--wrapper .nutriscore .nutriscore--b,
.nutriscore--wrapper .nutriscore .nutriscore--b.active:before {
  background: #63be3b;
}
.nutriscore--wrapper .nutriscore .nutriscore--c,
.nutriscore--wrapper .nutriscore .nutriscore--c.active:before {
  background: #fdc528;
}
.nutriscore--wrapper .nutriscore .nutriscore--d,
.nutriscore--wrapper .nutriscore .nutriscore--d.active:before {
  background: #f96d20;
}
.nutriscore--wrapper .nutriscore .nutriscore--e,
.nutriscore--wrapper .nutriscore .nutriscore--e.active:before {
  background: #f21c1e;
}
.nutriscore--wrapper.is--block .nutriscore {
  display: inherit;
}
.nutriscore--wrapper.product-badges .nutriscore {
  margin-top: 0;
}
.nutriscore--wrapper.product-badges .nutriscore li {
  font-size: 0.5rem;
  line-height: 0.625rem;
  padding: 0.375rem 0.5rem 0.375rem 0.5rem;
}
.nutriscore--wrapper.product-badges .nutriscore li.active:before {
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.5625rem 0.5rem 0.5625rem 0.5rem;
  top: -0.5rem;
  left: -0.1875rem;
}
.nutriscore--wrapper.mb {
  margin-bottom: 0.9375rem;
}
.compare--wrapper .entry--nutriScore {
  height: 5.5625rem;
}
.advanced-menu {
  max-width: 78.75rem;
  box-shadow: 0 10px 25px -15px #000000;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background: #f8f8f8;
  width: 100%;
  position: absolute;
  color: #000000;
  z-index: 3000;
}
.advanced-menu:after {
  content: "";
  display: table;
  clear: both;
}
.advanced-menu .menu--list {
  list-style: none;
  display: block;
}
.advanced-menu .content--wrapper {
  margin: 1.25rem 1.25rem 1.25rem 1.25rem;
  position: relative;
}
.advanced-menu .menu--delimiter {
  content: "";
  width: 1px;
  background: #96c126;
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
}
.advanced-menu .menu--teaser {
  padding: 0.625rem 0.625rem 0rem 1.25rem;
  position: relative;
  float: left;
}
.advanced-menu .teaser--image {
  height: 15.625rem;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: block;
}
.advanced-menu .teaser--image + .teaser--headline,
.advanced-menu .teaser--image + .teaser--text {
  margin-top: 2.5rem;
}
.advanced-menu .teaser--headline {
  font-size: 1.3125rem;
  margin: 0rem 0rem 1.25rem 0rem;
  font-weight: bold;
}
.advanced-menu .teaser--text-link {
  color: #ffffff;
}
.advanced-menu .teaser--text-link:hover {
  color: #ffffff;
}
.advanced-menu .menu--list-item {
  -webkit-hyphens: auto;
  hyphens: auto;
  word-break: normal;
  word-wrap: break-word;
}
.advanced-menu .menu--list-item-link {
  padding: 0.3125rem 0rem 0.3125rem 0rem;
  font-size: 1rem;
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
  color: #ffffff;
  display: block;
}
.advanced-menu .menu--list-item-link:hover {
  padding: 0.3125rem 0rem 0.3125rem 0.1875rem;
  color: #ffffff;
}
.advanced-menu .button-container {
  font-size: 1rem;
  padding: 1.25rem 1.875rem 1.25rem 0rem;
  background: #96c126;
  color: #ffffff;
  font-weight: bold;
}
.advanced-menu .button-container .button--category {
  padding: 1.25rem 3.125rem 1.25rem 3.125rem;
  -webkit-transition: padding 0.1s ease;
  transition: padding 0.1s ease;
  color: #ffffff;
  position: relative;
}
.advanced-menu .button-container .button--category:hover {
  padding: 1.25rem 3.125rem 1.25rem 3.4375rem;
}
.advanced-menu .button-container .icon--arrow-right {
  font-size: 0.75rem;
  margin-top: -0.375rem;
  position: absolute;
  top: 50%;
  right: 1.875rem;
}
.advanced-menu .button-container .button--close {
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  margin-top: -1.25rem;
  float: right;
  cursor: pointer;
}
.advanced-menu .menu--container {
  display: none;
}
.advanced-menu .menu--container.menu--is-active {
  display: block;
}
.advanced-menu .menu--level-0 {
  padding: 0.625rem 0.625rem 0rem 0.625rem;
  float: left;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
.advanced-menu .menu--level-0.columns--1 {
  -webkit-column-count: 1;
  column-count: 1;
}
.advanced-menu .menu--level-0.columns--2 {
  -webkit-column-count: 2;
  column-count: 2;
}
.advanced-menu .menu--level-0.columns--3 {
  -webkit-column-count: 3;
  column-count: 3;
}
.advanced-menu .menu--level-0.columns--4 {
  -webkit-column-count: 4;
  column-count: 4;
}
.advanced-menu .menu--level-1 {
  margin: 0.3125rem 0rem 0rem 1.25rem;
}
.advanced-menu .menu--level-2 {
  margin: 0rem 0rem 0.3125rem 1.25rem;
}
.advanced-menu .item--level-0 {
  padding-bottom: 2.5rem;
  display: block;
  position: relative;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
.advanced-menu .item--level-0 .menu--list-item-link {
  font-weight: bold;
}
.advanced-menu .item--level-1:last-child {
  margin: 0;
}
.advanced-menu .item--level-1 .menu--list-item-link {
  padding: 0.3125rem 0rem 0.3125rem 0rem;
  font-size: 1rem;
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
  color: #ffffff;
  display: block;
  font-weight: normal;
}
.advanced-menu .item--level-1 .menu--list-item-link:hover {
  padding: 0.3125rem 0rem 0.3125rem 0.1875rem;
  color: #ffffff;
}
.advanced-menu .item--level-2 .menu--list-item-link {
  font-size: 0.875rem;
}
.advanced-menu .item--level-2 .menu--list-item-link + .menu--level-3 {
  margin: 0rem 0rem 0.3125rem 1.25rem;
}
.advanced-menu .item--level-3 .menu--list-item-link {
  font-size: 0.75rem;
}
.navigation-main .navigation--list .navigation--entry.is--hovered {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-clip: padding-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background: #96c126;
}
.navigation-main .navigation--list .navigation--entry.is--hovered .navigation--link {
  background: #96c126;
  color: #ffffff;
}
@media screen and (min-width: 78.75em) {
  .advanced-menu .content--wrapper {
    margin: 2.5rem 2.5rem 2.5rem 2.5rem;
  }
}
.dtgs-deliverydate--box {
  padding-bottom: 1rem;
}
.dtgs-deliverydate--box label {
  font-weight: bold;
}
@media screen and (min-width: 48em) {
  .dtgs-deliverydate--box {
    float: left;
    padding-right: 1rem;
  }
}
@font-face {
  font-family: 'emz-icons';
  src: url('../../custom/plugins/EmzIconSetPlugin/Resources/frontend/fonts/emz-icons/emz-icons.eot?75610359');
  src: url('../../custom/plugins/EmzIconSetPlugin/Resources/frontend/fonts/emz-icons/emz-icons.eot?75610359#iefix') format('embedded-opentype'), url('../../custom/plugins/EmzIconSetPlugin/Resources/frontend/fonts/emz-icons/emz-icons.woff2?75610359') format('woff2'), url('../../custom/plugins/EmzIconSetPlugin/Resources/frontend/fonts/emz-icons/emz-icons.woff?75610359') format('woff'), url('../../custom/plugins/EmzIconSetPlugin/Resources/frontend/fonts/emz-icons/emz-icons.ttf?75610359') format('truetype');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-emz-"]:before,
[class*=" icon-emz-"]:before {
  font-family: 'emz-icons';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon--percent:before {
  content: '\e85d';
  font-family: 'emz-icons';
}
.icon--plus:before {
  content: '\e801';
  font-family: 'emz-icons';
}
.icon--book:before {
  content: '\e802';
  font-family: 'emz-icons';
}
.icon--air:before {
  content: '\e803';
  font-family: 'emz-icons';
}
.icon--clock:before {
  content: '\e804';
  font-family: 'emz-icons';
}
.icon--heart:before {
  font-family: 'emz-icons';
  content: '\e823';
}
.icon--airplane:before {
  font-family: 'emz-icons';
  content: '\e805';
}
.icon--bell:before {
  font-family: 'emz-icons';
  content: '\e806';
}
.icon--statistics:before {
  font-family: 'emz-icons';
  content: '\e807';
}
.icon--battery:before {
  font-family: 'emz-icons';
  content: '\e808';
}
.icon--drawer:before {
  content: '\e80a';
  font-family: 'emz-icons';
}
.icon--chain:before {
  content: '\e80b';
  font-family: 'emz-icons';
}
.icon--calendar:before {
  content: '\e80c';
  font-family: 'emz-icons';
}
.icon--chat:before {
  content: '\e80d';
  font-family: 'emz-icons';
}
.icon--graduation:before {
  content: '\e80e';
  font-family: 'emz-icons';
}
.icon--paperclip:before {
  content: '\e810';
  font-family: 'emz-icons';
}
.icon--clock2:before {
  content: '\e80e';
  font-family: 'emz-icons';
}
.icon--cup:before {
  content: '\e812';
  font-family: 'emz-icons';
}
.icon--disk:before {
  content: '\e813';
  font-family: 'emz-icons';
}
.icon--compass:before {
  content: '\e814';
  font-family: 'emz-icons';
}
.icon--graduation:before {
  content: '\e80e';
  font-family: 'emz-icons';
}
.icon--screen:before {
  content: '\e815';
  font-family: 'emz-icons';
}
.icon--cone:before {
  content: '\e816';
  font-family: 'emz-icons';
}
.icon--comment:before {
  content: '\e817';
  font-family: 'emz-icons';
}
.icon--filter:before {
  content: '\e818';
  font-family: 'emz-icons';
}
.icon--creditcard:before {
  content: '\e819';
  font-family: 'emz-icons';
}
.icon--coupon:before {
  content: '\e81a';
  font-family: 'emz-icons';
}
.icon--delicious:before {
  content: '\e81b';
  font-family: 'emz-icons';
}
.icon--delicious2:before {
  content: '\e81c';
  font-family: 'emz-icons';
}
.icon--digg:before {
  font-family: 'emz-icons';
  content: '\e81d';
}
.icon--droplet:before {
  font-family: 'emz-icons';
  content: '\e81e';
}
.icon--pencil:before {
  font-family: 'emz-icons';
  content: '\e81f';
}
.icon--arrow-left2:before {
  font-family: 'emz-icons';
  content: '\e820';
}
.icon--arrow-right2:before {
  font-family: 'emz-icons';
  content: '\e821';
}
.icon--cross:before {
  font-family: 'emz-icons';
  content: '\e822';
}
.icon--arrow-left:before {
  font-family: 'emz-icons';
  content: '\e824';
}
.icon--arrow-right:before {
  content: '\e826';
  font-family: 'emz-icons';
}
.icon--search:before {
  content: '\e827';
  font-family: 'emz-icons';
}
.icon--basket:before {
  font-family: 'emz-icons';
  content: '\e828';
}
.icon--account:before {
  content: '\e82a';
  font-family: 'emz-icons';
}
.icon--numbered-list:before {
  font-family: 'emz-icons';
  content: '\e82b';
}
.icon--eye:before {
  font-family: 'emz-icons';
  content: '\e82c';
}
.icon--feather:before {
  content: '\e82d';
  font-family: 'emz-icons';
}
.icon--flag:before {
  font-family: 'emz-icons';
  content: '\e82e';
}
.icon--bolt:before {
  content: '\e82f';
  font-family: 'emz-icons';
}
.icon--flashlight:before {
  font-family: 'emz-icons';
  content: '\e830';
}
.icon--forward:before {
  content: '\e831';
  font-family: 'emz-icons';
}
.icon--gauge:before {
  content: '\e832';
  font-family: 'emz-icons';
}
.icon--graph:before {
  content: '\e865';
  font-family: 'emz-icons';
}
.icon--drive:before {
  content: '\e837';
  font-family: 'emz-icons';
}
.icon--thumbsup:before {
  content: '\e838';
  font-family: 'emz-icons';
}
.icon--house:before {
  content: '\e839';
  font-family: 'emz-icons';
}
.icon--hourglass:before {
  font-family: 'emz-icons';
  content: '\e83a';
}
.icon--vcard:before {
  font-family: 'emz-icons';
  content: '\e83b';
}
.icon--light-bulb:before {
  content: '\e83c';
  font-family: 'emz-icons';
}
.icon--infinity:before {
  content: '\e83d';
  font-family: 'emz-icons';
}
.icon--service:before {
  font-family: 'emz-icons';
  content: '\e83e';
}
.icon--key:before {
  content: '\e83f';
  font-family: 'emz-icons';
}
.icon--keyboard:before {
  content: '\e840';
  font-family: 'emz-icons';
}
.icon--language:before {
  font-family: 'emz-icons';
  content: '\e842';
}
.icon--leaf:before {
  font-family: 'emz-icons';
  content: '\e843';
}
.icon--quote:before {
  content: '\e844';
  font-family: 'emz-icons';
}
.icon--lifebuoy:before {
  content: '\e845';
  font-family: 'emz-icons';
}
.icon--thunder:before {
  content: '\e846';
  font-family: 'emz-icons';
}
.icon--lock:before {
  content: '\e848';
  font-family: 'emz-icons';
}
.icon--login:before {
  font-family: 'emz-icons';
  content: '\e84a';
}
.icon--suitcase:before {
  font-family: 'emz-icons';
  content: '\e84b';
}
.icon--magnet:before {
  font-family: 'emz-icons';
  content: '\e84c';
}
.icon--mail:before {
  font-family: 'emz-icons';
  content: '\e84e';
}
.icon--map:before {
  font-family: 'emz-icons';
  content: '\e84f';
}
.icon--megaphone:before {
  font-family: 'emz-icons';
  content: '\e850';
}
.icon--microphone:before {
  font-family: 'emz-icons';
  content: '\e851';
}
.icon--minus:before {
  content: '\e853';
  font-family: 'emz-icons';
}
.icon--minus2:before {
  font-family: 'emz-icons';
  content: '\e852';
}
.icon--moon:before {
  font-family: 'emz-icons';
  content: '\e854';
}
.icon--mouse:before {
  font-family: 'emz-icons';
  content: '\e855';
}
.icon--music:before {
  font-family: 'emz-icons';
  content: '\e856';
}
.icon--network:before {
  font-family: 'emz-icons';
  content: '\e857';
}
.icon--newspaper:before {
  font-family: 'emz-icons';
  content: '\e858';
}
.icon--cog:before {
  font-family: 'emz-icons';
  content: '\e859';
}
.icon--brush:before {
  font-family: 'emz-icons';
  content: '\e85a';
}
.icon--bucket:before {
  font-family: 'emz-icons';
  content: '\e85b';
}
.icon--palette:before {
  content: '\e85c';
  font-family: 'emz-icons';
}
.icon--percent:before {
  font-family: 'emz-icons';
  content: '\e85d';
}
.icon--phone:before {
  font-family: 'emz-icons';
  content: '\e85e';
}
.icon--camera:before {
  content: '\e860';
  font-family: 'emz-icons';
}
.icon--progress-1:before {
  font-family: 'emz-icons';
  content: '\e861';
}
.icon--location2:before {
  content: '\e863';
  font-family: 'emz-icons';
}
.icon--printer:before {
  content: '\e864';
  font-family: 'emz-icons';
}
.icon--reply-all:before {
  font-family: 'emz-icons';
  content: '\e866';
}
.icon--reply:before {
  font-family: 'emz-icons';
  content: '\e867';
}
.icon--rss:before {
  font-family: 'emz-icons';
  content: '\e869';
}
.icon--browser:before {
  font-family: 'emz-icons';
  content: '\e86a';
}
.icon--database:before {
  font-family: 'emz-icons';
  content: '\e86b';
}
.icon--rss:before {
  content: '\e869';
  font-family: 'emz-icons';
}
.icon--share:before {
  font-family: 'emz-icons';
  content: '\e86d';
}
.icon--export:before {
  font-family: 'emz-icons';
  content: '\e86e';
}
.icon--bag:before {
  font-family: 'emz-icons';
  content: '\e86f';
}
.icon--mobile:before {
  content: '\e871';
  font-family: 'emz-icons';
}
.icon--grid:before {
  content: '\e872';
  font-family: 'emz-icons';
}
.icon--star:before {
  font-family: 'emz-icons';
  content: '\e873';
}
.icon--rocket:before {
  font-family: 'emz-icons';
  content: '\e874';
}
.icon--suitcase:before {
  font-family: 'emz-icons';
  content: '\e875';
}
.icon--sun:before {
  font-family: 'emz-icons';
  content: '\e877';
}
.icon--sun2:before {
  font-family: 'emz-icons';
  content: '\e877';
}
.icon--new:before {
  font-family: 'emz-icons';
  content: '\e878';
}
.icon--tag:before {
  font-family: 'emz-icons';
  content: '\e87a';
}
.icon--target:before {
  font-family: 'emz-icons';
  content: '\e87b';
}
.icon--thermometer:before {
  font-family: 'emz-icons';
  content: '\e87c';
}
.icon--ticket:before {
  content: '\e87d';
  font-family: 'emz-icons';
}
.icon--tools:before {
  font-family: 'emz-icons';
  content: '\e87e';
}
.icon--trophy:before {
  content: '\e87f';
  font-family: 'emz-icons';
}
.icon--truck:before {
  content: '\e880';
  font-family: 'emz-icons';
}
.icon--link:before {
  content: '\e881';
  font-family: 'emz-icons';
}
.icon--lock-open:before {
  font-family: 'emz-icons';
  content: '\e882';
}
.icon--upload:before {
  font-family: 'emz-icons';
  content: '\e883';
}
.icon--voicemail:before {
  font-family: 'emz-icons';
  content: '\e884';
}
.icon--music2:before {
  font-family: 'emz-icons';
  content: '\e885';
}
.icon--droplets:before {
  font-family: 'emz-icons';
  content: '\e886';
}
.icon--code:before {
  font-family: 'emz-icons';
  content: '\e887';
}
.icon--signal:before {
  font-family: 'emz-icons';
  content: '\e889';
}
.icon--earth:before {
  font-family: 'emz-icons';
  content: '\e88a';
}
.icon--check:before {
  font-family: 'emz-icons';
  content: '\e88b';
}
.icon--plus:before {
  font-family: 'emz-icons';
  content: '\e88c';
}
.icon--menu:before {
  font-family: 'emz-icons';
  content: '\e891';
}
.icon--compare:before {
  content: '\e896';
  font-family: 'emz-icons';
}
.icon--twitter:before {
  content: '\f099';
  font-family: 'emz-icons';
}
.icon--facebook:before {
  font-family: 'emz-icons';
  content: '\f09a';
}
.icon--github:before {
  font-family: 'emz-icons';
  content: '\f09b';
}
.icon--googleplus:before {
  content: '\f0d5';
  font-family: 'emz-icons';
}
.icon--youtube:before {
  content: '\f167';
  font-family: 'emz-icons';
}
.icon--instagram:before {
  font-family: 'emz-icons';
  content: '\f16d';
}
.icon--tumblr:before {
  font-family: 'emz-icons';
  content: '\f16d';
}
.icon--dribbble:before {
  font-family: 'emz-icons';
  content: '\f17d';
}
.icon--skype:before {
  font-family: 'emz-icons';
  content: '\f17e';
}
.icon--pinterest:before {
  font-family: 'emz-icons';
  content: '\f231';
}
.icon--whatsapp:before {
  font-family: 'emz-icons';
  content: '\f232';
}
.icon--arrow-up2:before {
  font-family: 'emz-icons';
  content: '\e893';
}
.icon--arrow-down2:before {
  font-family: 'emz-icons';
  content: '\e892';
}
.icon--arrow-up:before {
  font-family: 'emz-icons';
  content: '\e894';
}
.icon--arrow-down:before {
  font-family: 'emz-icons';
  content: '\e895';
}
.icon--bars:before {
  content: '\e836';
  font-family: 'emz-icons';
}
.icon--clipboard:before {
  content: '\e868';
  font-family: 'emz-icons';
}
.icon--directions:before {
  content: '\e870';
  font-family: 'emz-icons';
}
.icon--popup:before {
  content: '\e888';
  font-family: 'emz-icons';
}
.container--ajax-cart {
  position: relative;
}
.container--ajax-cart .cart--loading {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(85, 85, 85, 0.3);
  z-index: 1000;
}
.container--ajax-cart .select-field {
  width: auto;
  min-width: 5rem;
  height: 1.75rem;
  margin: 0.625rem 0rem 0rem 3rem;
  line-height: 1.75rem;
}
.container--ajax-cart .select-field select {
  line-height: 1.75rem;
}
.container--ajax-cart .select-field:after {
  display: flex;
  justify-content: center;
  align-items: center;
}
.price--refund {
  font-size: 0.70rem;
}
.box--minimal .price--refund {
  float: left;
}
.product--refund {
  float: left;
}
.box--slider .priceview--refund {
  display: none;
}
.product--btn-container {
  margin-top: 1.25rem;
}
@media screen and (min-width: 48em) {
  .box--list .price--refund {
    float: left;
    padding-bottom: 3px;
  }
}
@media screen and (min-width: 64em) {
  .box--list .price--refund {
    float: none;
  }
}
.results--list .entry--price,
.results--list .entry--all-results-number {
  white-space: normal;
}
.account--address .welo-address--location {
  display: block;
}
.account--address .welo-address--house-floor {
  display: block;
}
.account--address .welo-address--period {
  display: block;
}
.welo-additional--panel {
  min-height: 300px;
  font-size: .875rem;
  line-height: 24px;
  display: block;
  position: relative;
}
.welo-additional--panel .no--entry {
  color: #d9400b;
}
.welo-additional--panel-table {
  min-height: 340px;
  font-size: .875rem;
  line-height: 24px;
  display: block;
  position: relative;
}
.welo-additional--panel-table .no--entry {
  color: #d9400b;
}
.welo-additional--panel-table table {
  width: 100%;
}
.welo-additional--panel-table table td {
  width: 40%;
  padding: 0px;
}
.welo-address-panel-height {
  min-height: 190px;
}
.welo-payment--content-min {
  min-height: 246px;
}
.welo-payment--content-max_2 {
  max-height: 126px;
}
.welo-payment--content-max {
  max-height: 150px;
}
.welo-panel--title-min {
  min-height: 60px;
}
.welo-help-text {
  font-size: 0.825rem;
  font-weight: 300;
}
.welo-register-additional-title {
  margin-bottom: 20px;
  margin-left: 0px;
}
.welo-register-additional-content {
  margin-bottom: 20px;
}
.welo-register-additional-content .register--welo-location {
  width: 100%;
}
@media screen and (min-width: 78.75em) {
  .welo-register-additional-content .register--welo-location {
    width: 35.9%;
  }
}
.welo-register-additional-content .register--welo-house-floor {
  width: 100%;
}
@media screen and (min-width: 78.75em) {
  .welo-register-additional-content .register--welo-house-floor {
    width: 25%;
  }
}
.welo-register-additional-content .register--welo-period {
  width: 100%;
}
@media screen and (min-width: 78.75em) {
  .welo-register-additional-content .register--welo-period {
    width: 38%;
  }
}
.welo--extend-address-form {
  margin-top: 12px;
}
.welo--extend-address-form .panel--title {
  margin-bottom: 20px;
  margin-left: 0px;
}
.paypal--sidebar .paypal--sidebar-inner {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
}
.paypal--sidebar .logo--image {
  margin: auto;
}
@media screen and (min-width: 48em) {
  .paypal--sidebar {
    margin-bottom: 1.25rem;
    border: 1px solid #648119;
  }
  .paypal--sidebar .paypal--sidebar-inner {
    padding: 0.75rem 0.75rem 0.75rem 0.75rem;
  }
  .paypal--sidebar .paypal--sidebar-inner-returns {
    padding: 0.75rem 0.75rem 0.75rem 1.5rem;
  }
}
.unified-instructions--table {
  margin: 0 auto;
  width: 100%;
  table-layout: fixed;
}
.unified-instructions--table tr {
  width: 100%;
}
.unified-instructions--table tr td {
  background: none;
  width: 50%;
  word-wrap: break-word;
}
.unified-instructions--table tr td.bolder {
  font-weight: bolder;
}
.unified--panel {
  margin: 1.25rem 0rem 1.25rem 0rem;
  width: 100%;
}
.unified--panel .unified--instruction {
  font-weight: bolder;
  text-align: center;
}
.unified--panel .unified-header--left-td {
  width: 45%;
  text-align: right;
}
.unified--panel .unified-header--left-td h3 {
  margin-top: 0.625rem;
}
.unified--panel .unified-header--center-td {
  min-width: 6.25rem;
  width: auto;
}
.unified--panel .unified-header--right-td {
  width: 45%;
}
.unified--panel .unified-legal--message {
  text-align: center;
}
.finish--loading-indicator {
  width: 1.3125rem;
  height: 1.3125rem;
  margin: 0 auto;
  display: block;
  position: relative;
  box-sizing: content-box;
}
.finish--loading-indicator:before {
  border-radius: 100%;
  background-clip: padding-box;
  -webkit-animation: keyframe--spin 1s linear infinite;
  animation: keyframe--spin 1s linear infinite;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: block;
  content: "";
  border-width: 2px;
  border-style: solid;
  border-color: #333 #CCC #CCC #CCC;
}
@media screen and (min-width: 30em) {
  .unified-instructions--container {
    margin: 1.25rem 0rem 1.25rem 0rem;
  }
  .unified-instructions--table {
    width: 80%;
    border: 1px solid #96c126;
    border-radius: 3px;
  }
  .unified-instructions--table tr {
    width: 100%;
  }
  .unified-instructions--table tr td {
    font-size: inherit;
  }
  .unified-instructions--table tr td.bolder {
    font-size: inherit;
    width: 50%;
  }
}
@media screen and (min-width: 64em) {
  .unified-instructions--table {
    width: 50%;
  }
}
.paypal-unified--error {
  margin-bottom: 1.25rem;
}
.paypal--payment-selection .is--plus-container {
  border-bottom: 0;
}
.paypal--payment-selection .is--plus-container .method--label {
  display: none;
}
.paypal--payment-selection .is--plus-container #ppplus {
  padding: 0;
  margin: 0;
}
.paypal--payment-selection .is--plus-container #ppplus iframe {
  top: -1.625rem;
  position: relative;
}
.paypal--payment-selection .is--plus-container .method--description {
  position: relative;
  width: 100%;
  display: block;
}
.paypal--payment-selection .is--plus-container.payment--method {
  margin-bottom: -1.75rem;
  padding: 0;
  height: inherit;
}
.paypal--payment-selection .is--plus-container.payment--method:hover {
  background-color: white;
}
.paypal--payment-selection .is--plus-container.payment--method.js--is-active,
.paypal--payment-selection .is--plus-container.payment--method.is--active {
  background-color: white;
}
.paypal--payment-selection .is--plus-container.payment--method.js--is-active:after,
.paypal--payment-selection .is--plus-container.payment--method.is--active:after {
  display: none;
}
.paypal--payment-selection .method--input {
  display: none;
}
.paypal--payment-selection .payment--method {
  font-size: 0.6875rem;
  padding: 1.25rem 0rem 1.25rem 0rem;
  color: #3f3f3f;
  margin-bottom: 0;
  font-family: Arial, sans-serif;
  position: relative;
  cursor: pointer;
  height: inherit;
}
.paypal--payment-selection .payment--method:after {
  content: "";
  display: table;
  clear: both;
}
.paypal--payment-selection .payment--method:hover {
  background-color: #f9f9f9;
}
.paypal--payment-selection .payment--method.js--is-active,
.paypal--payment-selection .payment--method.is--active {
  cursor: default;
  background-color: #f9f9f9;
}
.paypal--payment-selection .payment--method.js--is-active .method--name,
.paypal--payment-selection .payment--method.is--active .method--name {
  font-weight: bold;
}
.paypal--payment-selection .payment--method.js--is-active .method--label,
.paypal--payment-selection .payment--method.is--active .method--label {
  width: 100%;
}
.paypal--payment-selection .payment--method.js--is-active .method--description,
.paypal--payment-selection .payment--method.is--active .method--description {
  padding-left: 0.5rem;
  display: block;
}
.paypal--payment-selection .payment--method.js--is-active:after,
.paypal--payment-selection .payment--method.is--active:after {
  height: 1.125rem;
  width: 1.4375rem;
  right: 0.5rem;
  top: 0.9375rem;
  content: '';
  position: absolute;
  background: url('https://www.paypalobjects.com/webstatic/ppplus/icons/checkmark.png') no-repeat;
}
.paypal--payment-selection .payment--method:last-child {
  border-bottom: 0;
}
.paypal--payment-selection .method--label {
  padding-left: 0.5rem;
  width: 17%;
  float: left;
}
.paypal--payment-selection .method--description {
  display: none;
  float: left;
  width: 65%;
}
.paypal--payment-selection .method--name {
  font-size: 0.75rem;
  color: #3f3f3f;
  font-weight: normal;
  cursor: pointer;
}
.paypal--payment-selection .method--bankdata {
  text-align: center;
  clear: both;
}
@media screen and (min-width: 48em) {
  .paypal--payment-selection .is--plus-container #ppplus {
    margin-bottom: -2.9375rem;
    padding: 0;
    width: 100%;
  }
  .paypal--payment-selection .is--plus-container #ppplus iframe {
    top: -2.875rem;
  }
  .paypal--payment-selection .payment--method.js--is-active .method--label,
  .paypal--payment-selection .payment--method.is--active .method--label {
    width: 17%;
  }
  .paypal--payment-selection .payment--method.js--is-active .method--description,
  .paypal--payment-selection .payment--method.is--active .method--description {
    width: 66%;
  }
  .paypal--payment-selection .payment--method:last-child {
    border-bottom: 1px solid #648119;
  }
}
.paypal-unified-installments-banner--product-detail {
  margin-bottom: 0.625rem;
}
.paypal-unified-installments-banner--cart {
  margin-top: 1.25rem;
}
.paypal-unified-ec--outer-button-container:after {
  content: "";
  display: table;
  clear: both;
}
.paypal-unified-ec--button-container {
  margin-top: 0.625rem;
}
.product--table .paypal-unified-ec--button-container {
  margin-top: 0rem;
}
.register--login .paypal-unified-ec--outer-button-container {
  line-height: normal;
}
.paypal-unified-ec--button-placeholder {
  height: 2.1875rem;
}
.paypal-unified-ec--button-placeholder-has-pay-later-button {
  height: 4.375rem;
}
@media screen and (min-width: 30em) {
  .product--table .paypal-unified-ec--button-container {
    margin-top: 0.625rem;
  }
}
@media screen and (min-width: 48em) {
  .product--table .paypal-unified-ec--button-container {
    margin-top: -0.3125rem;
    margin-bottom: 0.625rem;
  }
}
.paypal-unified--error-message {
  margin-top: 1rem;
  padding: 1rem 1rem 1rem 1rem;
  border-radius: 3;
  background-clip: padding-box;
  width: 100%;
  border: 1px solid #96c126;
}
.paypal-button-width--small {
  width: 9.375rem;
}
.paypal-button-width--medium {
  width: 15.625rem;
}
.paypal-button-width--large {
  width: 21.875rem;
  max-width: 100%;
}
.paypal-button-width--responsive {
  width: 100%;
  text-align: right;
}
.paypal-unified--smart-payment-buttons {
  float: right;
}
#paypal-acdc-form .paypal--acdc-submit-error {
  margin-bottom: 0.5rem;
}
#paypal-acdc-form .acdc-column-container {
  -webkit-column-count: 2;
  column-count: 2;
}
#paypal-acdc-form input[type="text"] {
  width: 100%;
  margin-bottom: 0.5rem;
}
#paypal-acdc-form .field {
  height: 2.375rem;
  margin-bottom: 0.5rem;
  width: unset;
}
.swag-payment-paypal-unified-pay-upon-invoice-legal-text-container {
  width: 14.9375rem;
}
.swag-payment-paypal-unified-pay-upon-invoice-legal-text-container .swag-payment-paypal-unified-pay-upon-invoice-legal-text {
  font-size: 0.75rem;
  padding-bottom: 0.9375rem;
}
.pay-upon-invoice--extra-fields .pui-extra-field {
  margin-bottom: 0.5rem;
}
.pay-upon-invoice--extra-fields .pui--phone,
.pay-upon-invoice--extra-fields .pui--birthday {
  width: 16.5625rem;
}
.pay-upon-invoice--extra-fields .select-field,
.pay-upon-invoice--extra-fields .js--fancy-select {
  width: auto;
}
/**
 * Bestellabschluss nach der Figma-Vorlage.
 *
 * Durchgaengige Bildsprache der Vorlage:
 *   - Die Seite steht auf hellgrauem Grund, die drei Schritte in weissen
 *     Kaesten mit 15px Radius.
 *   - Alles Waehlbare - Kundenart, Lieferzeitraum, Zahlart - ist ein Kasten
 *     mit hellgrauer Flaeche. Die getroffene Wahl wird weiss und bekommt
 *     einen gruenen Rahmen. Auswahlpunkte der Browser kommen dort nicht vor.
 *   - Eingabefelder haben dieselbe hellgraue Flaeche, keinen Rahmen.
 *   - Schaltflaechen sind blau.
 */
.wc-checkout {
  background: #f8f8f8;
  color: #2b2b2b;
  padding: 34px 20px 70px;
  min-height: 60vh;
}
.wc-checkout--inner {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 30px;
}
.wc-checkout--steps {
  flex: 1 1 901px;
  min-width: 0;
}
.wc-checkout--aside {
  flex: 0 0 340px;
}
.wc-checkout--aside.is--sticky {
  position: sticky;
  top: 20px;
}
/* ============================================================ Kopfzeile */
.wc-header {
  background: #fff;
  border-bottom: 3px solid #48a2e7;
}
.wc-header--inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.wc-header--phone {
  flex: 1 1 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
}
/* Fragezeichen im gruenen Kreis */
.wc-header--phone-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: #96c126;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.wc-header--phone-icon:before {
  content: "?";
}
.wc-header--phone-text {
  display: block;
}
.wc-header--phone-text strong {
  display: block;
  font-weight: 700;
  color: #2b2b2b;
}
.wc-header--phone-text a {
  color: #96c126;
  font-weight: 700;
  text-decoration: none;
}
.wc-header--phone-text a:hover {
  color: #7ba31d;
}
.wc-header--hours {
  color: #8a8a8a;
  font-size: 12px;
}
.wc-header--logo {
  flex: 0 0 auto;
}
.wc-header--logo img {
  display: block;
  max-height: 58px;
  width: auto;
}
/* Rechts als umrandete Schaltflaeche, wie in der Vorlage */
.wc-header--back {
  flex: 1 1 0;
  display: flex;
  justify-content: flex-end;
}
.wc-header--back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  background: #fff;
  color: #2b2b2b;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.wc-header--back-btn:hover {
  border-color: #96c126;
  color: #96c126;
}
/* Die Fortschrittsleiste der Registrierung zeigt dieselben Schritte ein
   zweites Mal. Hier stehen die Nummern links an den Kaesten. */
.is--ctl-wolfscastlecheckout .steps--container,
.is--ctl-checkout.is--act-confirm .steps--container {
  display: none;
}
/* ============================================================= Schritte */
.wc-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}
.wc-step--number {
  flex: 0 0 auto;
  padding-top: 22px;
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  color: #8a8a8a;
  transition: color .2s ease;
}
.wc-step--panel {
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 15px;
  transition: border-color 0.15s ease;
}
.wc-step--head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  cursor: pointer;
}
.wc-step--head:focus-visible {
  outline: 3px solid rgba(72, 162, 231, 0.45);
  outline-offset: -3px;
  border-radius: 15px;
}
.wc-step--title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 400;
  color: #8a8a8a;
}
.wc-step--summary {
  font-size: 14px;
  color: #8a8a8a;
  text-align: right;
  white-space: nowrap;
}
.wc-step--chevron {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform .2s ease;
}
.wc-step--chevron:before {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-right: 2px solid #8a8a8a;
  border-bottom: 2px solid #8a8a8a;
  transform: rotate(45deg);
}
.wc-step--body {
  display: none;
  padding: 0 24px 26px;
}
.wc-step--hint {
  margin: 0 0 16px;
  font-size: 15px;
  color: #2b2b2b;
}
.wc-step--actions {
  margin-top: 22px;
}
.wc-step.is--open .wc-step--panel {
  border-color: #96c126;
}
.wc-step.is--open .wc-step--body {
  display: block;
}
.wc-step.is--open .wc-step--chevron {
  transform: rotate(180deg);
}
.wc-step.is--open .wc-step--title {
  color: #96c126;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
}
/* Erledigt: gruener Rahmen, zugeklappt */
.wc-step.is--done .wc-step--panel {
  border-color: #96c126;
}
.wc-step.is--done .wc-step--title {
  color: #96c126;
}
.wc-step.is--locked .wc-step--panel {
  opacity: .5;
}
.wc-step.is--locked .wc-step--head {
  cursor: not-allowed;
}
/* ==================================================== Auswahl in Kaesten */
/* Grundform aller waehlbaren Kaesten. */
/* --- Kundenart --- */
.wc-choice {
  display: flex;
  gap: 16px;
  margin-bottom: 4px;
}
.wc-choice--tile {
  display: block;
  width: 100%;
  padding: 16px 18px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #f1f1f1;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  flex: 1 1 0;
  padding: 18px 16px;
  text-align: center;
  color: #8a8a8a;
  /* Beide Kaesten stehen zunaechst zur Wahl und tragen deshalb die
       Signalfarbe des Entwurfs. Erst die getroffene Wahl wird gruen -
       so ist auf einen Blick klar, was noch zu tun und was erledigt ist. */
  background: #fff;
  border-color: #48a2e7;
  color: #48a2e7;
  /* Die getroffene Wahl */
}
.wc-choice--tile:hover {
  background: rgba(72, 162, 231, 0.06);
}
.wc-choice--tile:focus-visible {
  outline: 3px solid rgba(72, 162, 231, 0.45);
  outline-offset: 2px;
}
.wc-choice--tile .wc-choice--sub {
  color: #48a2e7;
}
.wc-choice--tile.is--selected {
  background: #fff;
  border-color: #96c126;
  color: #2b2b2b;
}
.wc-choice--tile.is--selected .wc-choice--sub {
  color: #8a8a8a;
}
.wc-choice--title {
  display: block;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 5px;
}
.wc-choice--sub {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: #8a8a8a;
}
/* --- Lieferzeitraum --- */
/* Die Auswahlpunkte selbst treten hinter die Kaesten zurueck. */
.wc-checkout .dispatch--method {
  display: block;
  width: 100%;
  padding: 16px 18px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #f1f1f1;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  margin-bottom: 0;
  padding: 15px 18px;
  /* Datum und Uhrzeit erscheinen nur im gewaehlten Kasten */
}
.wc-checkout .dispatch--method:hover {
  background: #e6e6e6;
}
.wc-checkout .dispatch--method .method--input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.wc-checkout .dispatch--method .method--label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
.wc-checkout .dispatch--method .method--name {
  font-size: 15px;
  font-weight: 700;
  color: #2b2b2b;
  cursor: pointer;
}
.wc-checkout .dispatch--method .panel--group {
  display: none;
}
.wc-checkout .dispatch--method.selected-dispatch {
  background: #fff;
  border-color: #96c126;
}
.wc-checkout .dispatch--method.selected-dispatch .panel--group {
  display: block;
  width: 100%;
  margin-top: 12px;
}
/* Zwischen den beiden Lieferzeiten steht "-oder-" */
.wc-dispatch--oder {
  margin: 10px 0;
  font-size: 14px;
  font-weight: 700;
  color: #2b2b2b;
  text-align: center;
}
.wc-checkout .deliverydate--panel {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
/* Kennzeichnung neben der Versandart */
.wc-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #2b2b2b;
  /* Trennstrich zur Beschriftung */
}
.wc-tag:before {
  content: "";
  width: 1px;
  height: 15px;
  margin-right: 8px;
  background: rgba(0, 0, 0, 0.12);
}
.wc-tag b,
.wc-tag strong {
  color: #96c126;
  font-weight: 700;
}
.wc-tag--icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: #96c126;
}
.wc-tag--icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.wc-tag--info {
  width: 17px;
  height: 17px;
  padding: 0;
  border: 1px solid #96c126;
  border-radius: 50%;
  background: none;
  color: #96c126;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  line-height: 15px;
  cursor: pointer;
}
.wc-tag--info:hover {
  background: #96c126;
  color: #fff;
}
/* --- Zahlungsarten --- */
.wc-checkout .payment--method-list.panel {
  border: 0;
  padding: 0;
  background: none;
}
.wc-checkout .payment--method-headline {
  display: none;
}
.wc-checkout .payment--method {
  display: block;
  width: 100%;
  padding: 16px 18px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #f1f1f1;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
  padding: 12px 16px;
  /* Das Zahlungssymbol steht in der Vorlage links vor der Beschriftung */
  /* Das Theme setzt hier eine Breite von null aus dem alten Aufbau. Der
       Vorrang ist noetig, weil die Regel dort spezifischer formuliert ist. */
  /* Die Vorlage kennt bei den Zahlarten keine Beschreibungen. Der Behaelter
       ist zwar leer, enthaelt aber Leerzeichen - :empty greift dort nicht und
       er schoebe die Beschriftung auf null Breite. */
}
.wc-checkout .payment--method:hover {
  background: #e6e6e6;
}
.wc-checkout .payment--method .method--input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.wc-checkout .payment--method .payment--method-logo {
  order: -1;
  flex: 0 0 46px;
  text-align: center;
}
.wc-checkout .payment--method .payment--method-logo img {
  display: inline-block;
  width: auto;
  max-width: 46px;
  max-height: 26px;
}
.wc-checkout .payment--method .method--label {
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  float: none;
}
.wc-checkout .payment--method .method--name {
  font-size: 15px;
  font-weight: 400;
  color: #2b2b2b;
  cursor: pointer;
}
.wc-checkout .payment--method .method--description {
  display: none;
}
.wc-checkout .payment--method.selected-payment {
  background: #fff;
  border-color: #96c126;
}
/* Kartenlogos gehoeren in der Vorlage unter die Kartenzahlung, nicht als
   Leiste unter die ganze Liste. */
.wc-checkout .footer--payment-icons {
  display: none;
}
.wc-payment--cards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}
.wc-payment--cards img {
  height: 17px;
  width: auto;
}
/* Felder fuer die Lastschrift */
.wc-checkout .debit {
  margin-top: 10px;
}
.wc-checkout .debit p {
  margin: 0 0 8px;
}
/* ======================================================= Eingabefelder */
.wc-checkout {
  /* Eigener Pfeil, damit die Auswahlfelder gleich aussehen */
}
.wc-checkout input[type="text"],
.wc-checkout input[type="email"],
.wc-checkout input[type="password"],
.wc-checkout input[type="tel"],
.wc-checkout input[type="number"],
.wc-checkout select,
.wc-checkout textarea {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  min-height: 46px;
  padding: 11px 14px;
  background: #f1f1f1;
  color: #2b2b2b;
  font-size: 15px;
  appearance: none;
}
.wc-checkout input[type="text"]::placeholder,
.wc-checkout input[type="email"]::placeholder,
.wc-checkout input[type="password"]::placeholder,
.wc-checkout input[type="tel"]::placeholder,
.wc-checkout input[type="number"]::placeholder,
.wc-checkout select::placeholder,
.wc-checkout textarea::placeholder {
  color: #8a8a8a;
}
.wc-checkout input[type="text"]:focus,
.wc-checkout input[type="email"]:focus,
.wc-checkout input[type="password"]:focus,
.wc-checkout input[type="tel"]:focus,
.wc-checkout input[type="number"]:focus,
.wc-checkout select:focus,
.wc-checkout textarea:focus {
  border-color: #96c126;
  background: #fff;
  outline: 0;
}
.wc-checkout input[type="text"].has--error,
.wc-checkout input[type="email"].has--error,
.wc-checkout input[type="password"].has--error,
.wc-checkout input[type="tel"].has--error,
.wc-checkout input[type="number"].has--error,
.wc-checkout select.has--error,
.wc-checkout textarea.has--error {
  border-color: #e74c3c;
  background: rgba(231, 76, 60, 0.05);
}
.wc-checkout textarea {
  min-height: 88px;
  resize: vertical;
}
.wc-checkout select {
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, #2b2b2b 50%), linear-gradient(135deg, #2b2b2b 50%, transparent 50%);
  background-position: calc(81%) calc(52%), calc(86%) calc(52%);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.wc-checkout label {
  font-size: 14px;
}
/* ============================================================ Buttons */
.wc-btn {
  display: inline-block;
  padding: 11px 22px;
  border: 0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  min-height: 42px;
  cursor: pointer;
  background: #48a2e7;
  color: #fff;
  transition: background-color 0.15s ease;
}
.wc-btn:hover:not([disabled]) {
  background: #2f8ed3;
}
.wc-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}
.wc-btn:focus-visible {
  outline: 3px solid rgba(72, 162, 231, 0.45);
  outline-offset: 2px;
}
.wc-submit--hint {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #8a8a8a;
}
/* ========================================================== Hinweise */
.wc-hinweis {
  margin: 0 0 18px;
  padding: 13px 16px;
  border: 1px solid #e74c3c;
  border-left-width: 4px;
  border-radius: 8px;
  background: rgba(231, 76, 60, 0.06);
  color: #cd2a19;
  font-size: 15px;
}
/* Zwischenueberschriften in gruen */
.wc-pane--title {
  margin: 22px 0 6px;
  font-size: 19px;
  font-weight: 700;
  color: #96c126;
}
.wc-pane--hint {
  margin: 0 0 14px;
  font-size: 15px;
  color: #2b2b2b;
}
.wc-pane:first-child .wc-pane--title {
  margin-top: 18px;
}
/* Hinweis mit vorangestelltem Zeichen, etwa zum Leergut */
.wc-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}
.wc-note--icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1px solid #48a2e7;
  border-radius: 50%;
  color: #48a2e7;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}
.wc-note--icon:before {
  content: "i";
}
/* ======================================================= Zustimmungen */
.wc-checkout .agb-and-revocation > .panel--title {
  margin: 24px 0 8px;
  padding: 0;
  font-size: 19px;
  font-weight: 700;
  color: #96c126;
  border: 0;
}
.wc-checkout .body--revocation {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
}
.wc-checkout .body--revocation a {
  color: #96c126;
}
.wc-checkout .list--checkbox {
  margin: 0;
  padding: 0;
  list-style: none;
  /* Auch dieser Behaelter traegt aus dem alten Aufbau die volle Breite und
       draengt die Beschriftung sonst in die naechste Zeile. */
  /* Das Theme blendet die Beschriftung aus, weil der Textbaustein frueher
       leer war. Jetzt steht dort der Zustimmungstext. */
  /* Dasselbe bei der Zustimmung: dort steht eine feste Breite von 133
       Pixeln, die den Text neben den Bestellvorgang schiebt. */
}
.wc-checkout .list--checkbox li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 9px;
}
.wc-checkout .list--checkbox .column--checkbox {
  flex: 0 0 auto;
  width: auto !important;
  padding-top: 1px;
}
.wc-checkout .list--checkbox .column--label {
  display: block;
  flex: 1 1 0;
  width: auto !important;
  float: none;
}
.wc-checkout .list--checkbox label {
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}
.wc-checkout .list--checkbox a {
  color: #96c126;
}
.wc-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 9px 0;
  font-size: 14px;
  line-height: 1.45;
}
/* Ankreuzfelder im Stil der Vorlage */
.wc-checkout input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid #96c126;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
}
.wc-checkout input[type="checkbox"]:checked {
  background: #96c126;
}
.wc-checkout input[type="checkbox"]:checked:after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.wc-checkout input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(72, 162, 231, 0.45);
  outline-offset: 1px;
}
/* ==================================================== Bestelluebersicht */
.wc-summary {
  background: #fff;
  border: 2px solid #96c126;
  border-radius: 15px;
  padding: 18px;
}
.wc-summary--title {
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 20px;
  font-weight: 700;
  color: #48a2e7;
  text-align: center;
}
.wc-summary {
  /* Das Theme faerbt diese Bereiche in der Grundfarbe der Seite ein. In der
       weissen Uebersicht wirkt das wie ein grauer Fleck. */
}
.wc-summary .product--table,
.wc-summary .panel,
.wc-summary .panel--body,
.wc-summary .panel--td,
.wc-summary .table--tr,
.wc-summary .basket--footer,
.wc-summary .table--aggregation,
.wc-summary .aggregation--list,
.wc-summary .free-shipping-container {
  border: 0;
  background: #fff;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.wc-summary .table--tr.row--product {
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.wc-summary .table--tr.row--product.is--last-row {
  border-bottom: 0;
}
.wc-summary .column--product {
  float: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}
.wc-summary .column--image {
  flex: 0 0 52px;
  float: none;
  width: 52px;
  height: auto;
}
.wc-summary .column--image img {
  width: 100%;
  height: auto;
  display: block;
}
.wc-summary .table--content {
  flex: 1 1 0;
  min-width: 0;
  float: none;
  width: auto;
  display: block;
}
.wc-summary .content--title {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
  color: #2b2b2b;
  text-decoration: none;
}
.wc-summary .content--title:hover {
  color: #96c126;
}
.wc-summary .content--sku {
  float: none;
  margin: 4px 0 0;
  font-size: 14px;
  color: #8a8a8a;
}
.wc-summary .product--delivery {
  display: none;
}
.wc-summary .checkout--quantity-price {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0 0 62px;
  width: auto;
}
.wc-summary .column--quantity,
.wc-summary .column--unit-price {
  float: none;
  width: auto;
  margin: 0;
  display: flex;
  align-items: center;
}
.wc-summary .column--label {
  display: none;
}
.wc-summary .column--unit-price {
  font-weight: 700;
  font-size: 14px;
}
.wc-summary .column--tax-price,
.wc-summary .column--total-price {
  display: none;
}
.wc-summary .column--actions {
  float: right;
  margin-top: -30px;
}
.wc-summary .column--actions .btn {
  border: 0;
  background: none;
  color: #8a8a8a;
  padding: 4px;
  min-width: 0;
}
.wc-summary .column--actions .btn:hover {
  color: #e74c3c;
}
.wc-summary .basket--footer {
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.wc-summary .table--aggregation,
.wc-summary .aggregation--list {
  float: none;
  width: 100%;
  font-size: 14px;
}
.wc-summary .list--entry {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
}
.wc-summary .list--entry.entry--total {
  font-weight: 700;
}
.wc-summary .entry--label {
  color: #8a8a8a;
}
.wc-summary .free-shipping-container {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #96c126;
  text-align: center;
}
.wc-summary .free-shipping-container h2 {
  margin: 0 0 2px;
  font-size: 19px;
  font-weight: 700;
  color: #2b2b2b;
}
.wc-summary .free-shipping-container h2 span {
  color: #96c126;
}
/* Hinweis auf die versandkostenfreie Menge, auch im Lieferzeitraum */
.wc-step--body .free-shipping-container {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #96c126;
  text-align: center;
}
.wc-step--body .free-shipping-container h2 {
  margin: 0 0 2px;
  font-size: 21px;
  font-weight: 700;
}
.wc-step--body .free-shipping-container h2 span {
  color: #96c126;
}
.wc-step--body .free-shipping-container .has--info-icon-primary {
  font-size: 14px;
  cursor: pointer;
}
/* ==================================================== Vertrauenspunkte */
.wc-trust {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}
.wc-trust li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.4;
}
.wc-trust--icon {
  flex: 0 0 46px;
}
.wc-trust--icon img {
  width: 46px;
  height: auto;
  display: block;
}
.wc-trust--text {
  flex: 1 1 0;
}
.wc-trust--text strong {
  display: block;
  font-weight: 700;
}
/* ================================================= Hinweis zur Lieferung */
.wc-co2 {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
  /* Ohne diese Zeile schlaegt die Klassenregel das hidden-Attribut und das
       Fenster stuende beim Laden offen. */
}
.wc-co2[hidden] {
  display: none;
}
.wc-co2--box {
  position: relative;
  max-width: 430px;
  width: 100%;
  padding: 32px 30px 28px;
  border-radius: 20px;
  background: #fff;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.wc-co2--close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #8a8a8a;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.wc-co2--close:hover {
  color: #2b2b2b;
}
.wc-co2--icon {
  display: block;
  width: 52px;
  height: 46px;
  margin: 0 auto 12px;
  color: #96c126;
}
.wc-co2--title {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 700;
  color: #96c126;
}
.wc-co2--text {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.55;
  color: #2b2b2b;
}
/* ================================================ Produktempfehlungen */
.wc-suggest {
  max-width: 1360px;
  margin: 0 auto 26px;
}
.wc-suggest--title {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 700;
  color: #96c126;
}
.wc-suggest--row {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Die Pfeile sind dieselben wie in den Produktslidern des Shops: gefuellter
   gruener Kreis, weisser Pfeil, halbdurchsichtig bis zum Darueberfahren
   (Karim, 09:13: "Slider-Pfeile aus dem Shop uebernehmen"). */
.wc-suggest--nav {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #96c126;
  color: #fff;
  font-size: 24px;
  line-height: 48px;
  opacity: .5;
  cursor: pointer;
  transition: opacity .2s;
}
.wc-suggest--nav:hover,
.wc-suggest--nav:focus {
  opacity: 1;
}
.wc-suggest--track {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.wc-suggest--track::-webkit-scrollbar {
  display: none;
}
.wc-suggest--item {
  flex: 0 0 calc(14.5%);
  min-width: 170px;
  padding: 12px;
  border: 2px solid #96c126;
  border-radius: 8px;
  background: #fff;
  display: flex;
  flex-direction: column;
}
/* Zwischen Bild und Text steht im Entwurf eine feine Trennlinie - dieselbe
   wie in den Produktkacheln des Shops (Karim, 09:00: "die Linie unter den
   Flaschen fehlt, die gibt es im Shop ueberall"). */
.wc-suggest--img {
  height: 110px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wc-suggest--img img {
  max-width: 100%;
  max-height: 110px;
  width: auto;
}
.wc-suggest--name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: #2b2b2b;
  text-decoration: none;
}
.wc-suggest--name:hover {
  color: #96c126;
}
.wc-suggest--sub {
  margin: 2px 0 8px;
  font-size: 11px;
  line-height: 1.35;
  color: #8a8a8a;
}
.wc-suggest--foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.wc-suggest--price {
  font-size: 14px;
  font-weight: 700;
}
.wc-suggest--btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: #96c126;
  color: #fff;
  cursor: pointer;
}
.wc-suggest--btn:hover {
  background: #7ba31d;
}
.wc-suggest--btn svg {
  width: 16px;
  height: 16px;
  display: block;
  margin: 0 auto;
}
/* ===================================================== Formularraster */
/* Die Vorlage ordnet die Felder in Zeilen zu je drei Spalten an. Shopware
   liefert sie untereinander; das Raster bringt sie in Form, ohne dass am
   Formular selbst etwas geaendert werden muss. */
.wc-checkout .register--form,
.wc-checkout .register--login {
  /* Die Klasse is--wide steht an jedem dieser Behaelter und macht die Regel
       spezifisch genug, um das Reihenlayout des Themas zu ersetzen - auch in
       den nachgeladenen Bereichen fuer Firma und abweichende Lieferadresse. */
  /* Auch dort setzt das Theme Feldbreiten aus dem alten Reihenlayout. */
  /* Alles, was keine eigene Breite bekommt, nimmt die volle Zeile. */
}
.wc-checkout .register--form .panel--body,
.wc-checkout .register--login .panel--body,
.wc-checkout .register--form .panel--body.is--wide,
.wc-checkout .register--login .panel--body.is--wide,
.wc-checkout .register--form .panel .panel--body,
.wc-checkout .register--login .panel .panel--body {
  /* Das Theme setzt hier ein Reihenlayout mit hoeherer Spezifitaet.
           Ohne Vorrang bliebe das Raster in den nachgeladenen Bereichen fuer
           Firma und abweichende Lieferadresse wirkungslos. */
  display: grid !important;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  padding: 0;
  background: none;
}
.wc-checkout .register--form .panel--body > *,
.wc-checkout .register--login .panel--body > * {
  width: auto !important;
}
.wc-checkout .register--form .panel--body > *,
.wc-checkout .register--login .panel--body > * {
  grid-column: span 12;
}
.wc-checkout .register--form h3,
.wc-checkout .register--login h3,
.wc-checkout .register--form .wc-pane--title,
.wc-checkout .register--login .wc-pane--title {
  grid-column: span 12;
}
/* --- Persoenliche Angaben --- */
.wc-checkout .register--form {
  /* Firmenangaben: Firma und Abteilung in einer Zeile, die
       Umsatzsteuer-Nummer darunter. Die Vorlage kennt sie nicht, Kachouri
       braucht sie fuer Gewerbekunden aber weiterhin. */
  /* Abweichende Lieferadresse: dieselbe Aufteilung wie bei der
       Rechnungsadresse. Die Felder tragen dort teils andere Namen. */
  /* Anschrift */
  /* Strasse und Hausnummer, Postleitzahl und Ort teilen sich je eine
       Zeile. Die Felder liegen in eigenen Behaeltern. */
  /* Etage und Aufzug nebeneinander */
  /* Der Kasten fuer die abweichende Lieferadresse */
  /* Die Absende-Schaltflaeche steht linksbuendig unter dem Formular. */
}
.wc-checkout .register--form .panel--body > .register--customertype {
  grid-column: span 4;
  order: 1;
}
.wc-checkout .register--form .panel--body > .register--salutation {
  grid-column: span 4;
  order: 2;
}
.wc-checkout .register--form .panel--body > .register--firstname {
  grid-column-start: 1;
  grid-column-end: span 4;
  order: 3;
}
.wc-checkout .register--form .panel--body > .register--lastname {
  grid-column: span 4;
  order: 4;
}
.wc-checkout .register--form .panel--body > .register--phone {
  grid-column: span 4;
  order: 5;
}
.wc-checkout .register--form .panel--body > .register--email {
  grid-column-start: 1;
  grid-column-end: span 8;
  order: 6;
}
.wc-checkout .register--form .panel--body > .register--account-information {
  grid-column: span 4;
  order: 7;
}
.wc-checkout .register--form .panel--body > .register--companyname {
  grid-column: span 8;
}
.wc-checkout .register--form .panel--body > .register--department {
  grid-column: span 4;
}
.wc-checkout .register--form .panel--body > .register--ustid {
  grid-column: span 12;
}
.wc-checkout .register--form .panel--body > .register--shipping-salutation,
.wc-checkout .register--form .panel--body > .register--shipping-firstname,
.wc-checkout .register--form .panel--body > .register--shipping-lastname {
  grid-column: span 4;
}
.wc-checkout .register--form .panel--body > .register--shipping-street {
  grid-column: span 12;
}
.wc-checkout .register--form .panel--body > .register--shipping-zip-city {
  grid-column: span 8;
}
.wc-checkout .register--form .panel--body > .register--shipping-country {
  grid-column: span 4;
}
.wc-checkout .register--form .panel--body > .register--street {
  grid-column: span 12;
}
.wc-checkout .register--form .panel--body > .register--zip-city {
  grid-column: span 8;
}
.wc-checkout .register--form .panel--body > .register--country {
  grid-column: span 4;
}
.wc-checkout .register--form .register--street > div,
.wc-checkout .register--form .register--zip-city {
  display: flex;
  gap: 10px;
}
.wc-checkout .register--form .register--street > div > *:first-child {
  flex: 3 1 0;
}
.wc-checkout .register--form .register--street > div > *:last-child {
  flex: 1 1 0;
}
.wc-checkout .register--form .register--zip-city > * {
  flex: 1 1 0;
}
.wc-checkout .register--form .welo-register-additional-content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}
.wc-checkout .register--form .welo-register-additional-content > *:first-child {
  grid-column: span 4;
}
.wc-checkout .register--form .welo-register-additional-content > * {
  grid-column: span 8;
}
.wc-checkout .register--form .welo-register-additional-content > *:first-child {
  grid-column: span 4;
}
.wc-checkout .register--form .register--alt-shipping {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 6px;
}
.wc-checkout .register--form .register--alt-shipping label {
  line-height: 1.45;
}
.wc-checkout .register--form .register--password-description {
  margin: 4px 0 0;
  font-size: 12px;
  color: #8a8a8a;
}
.wc-checkout .register--form .register--action,
.wc-checkout .register--form .action {
  grid-column: span 12;
  margin-top: 8px;
}
/* --- Anmeldung --- */
/* Das Anmeldeformular bringt eigene Behaelter mit. Es traegt keine Klasse,
   deshalb wird es ueber den Bereich angesprochen, in dem es steht. */
.wc-checkout [data-wc-pane="bestand"] {
  /* Die beiden Felder stehen in der Vorlage nebeneinander. */
  /* Darunter der Verweis auf das vergessene Passwort und die
       Schaltflaeche - in der Vorlage untereinander, linksbuendig. */
  /* Der Einleitungssatz steht bereits ueber dem Bereich. */
}
.wc-checkout [data-wc-pane="bestand"] .panel--body {
  display: block;
}
.wc-checkout [data-wc-pane="bestand"] .register--login-flex {
  display: flex;
  gap: 12px;
}
.wc-checkout [data-wc-pane="bestand"] .register--login-flex > * {
  flex: 1 1 0;
}
.wc-checkout [data-wc-pane="bestand"] .register--login-lost-action-flex {
  margin-top: 4px;
}
.wc-checkout [data-wc-pane="bestand"] .register--login-lostpassword {
  margin-bottom: 12px;
  font-size: 14px;
}
.wc-checkout [data-wc-pane="bestand"] .register--login-lostpassword a {
  color: #2b2b2b;
  text-decoration: none;
}
.wc-checkout [data-wc-pane="bestand"] .register--login-lostpassword a:hover {
  color: #96c126;
}
.wc-checkout [data-wc-pane="bestand"] > .wc-pane--hint + form .panel--body > p:first-of-type,
.wc-checkout [data-wc-pane="bestand"] .panel--body > p:first-of-type {
  display: none;
}
.wc-checkout [data-wc-pane="bestand"] .error--list,
.wc-checkout [data-wc-pane="bestand"] .alert {
  display: block;
}
/* Die Schaltflaechen der Formulare im Stil der Vorlage */
.wc-checkout .register--login-btn,
.wc-checkout .register--submit,
.wc-checkout .register-btn,
.wc-checkout [data-wc-pane] button[type="submit"],
.wc-checkout .register--form button[type="submit"] {
  display: inline-block;
  width: auto;
  padding: 11px 22px;
  border: 0;
  border-radius: 6px;
  min-height: 42px;
  background: #48a2e7;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  /* Der Pfeil des Themas passt nicht zur Vorlage. */
}
.wc-checkout .register--login-btn:hover,
.wc-checkout .register--submit:hover,
.wc-checkout .register-btn:hover,
.wc-checkout [data-wc-pane] button[type="submit"]:hover,
.wc-checkout .register--form button[type="submit"]:hover {
  background: #2f8ed3;
}
.wc-checkout .register--login-btn i,
.wc-checkout .register--submit i,
.wc-checkout .register-btn i,
.wc-checkout [data-wc-pane] button[type="submit"] i,
.wc-checkout .register--form button[type="submit"] i {
  display: none;
}
@media screen and (max-width: 47.9375em) {
  /* Auf dem Handy steht jedes Feld fuer sich. Die Angaben brauchen denselben
       Selektor wie die Breiten weiter oben, sonst behalten sie dort Vorrang. */
  .wc-checkout .register--form,
  .wc-checkout .register--login {
    /* Strasse und Hausnummer sowie Postleitzahl und Ort bleiben paarweise
           nebeneinander - getrennt untereinander waere unnoetig lang. */
  }
  .wc-checkout .register--form .panel--body > *,
  .wc-checkout .register--login .panel--body > *,
  .wc-checkout .register--form .panel--body > .register--customertype,
  .wc-checkout .register--login .panel--body > .register--customertype,
  .wc-checkout .register--form .panel--body > .register--salutation,
  .wc-checkout .register--login .panel--body > .register--salutation,
  .wc-checkout .register--form .panel--body > .register--firstname,
  .wc-checkout .register--login .panel--body > .register--firstname,
  .wc-checkout .register--form .panel--body > .register--lastname,
  .wc-checkout .register--login .panel--body > .register--lastname,
  .wc-checkout .register--form .panel--body > .register--phone,
  .wc-checkout .register--login .panel--body > .register--phone,
  .wc-checkout .register--form .panel--body > .register--email,
  .wc-checkout .register--login .panel--body > .register--email,
  .wc-checkout .register--form .panel--body > .register--account-information,
  .wc-checkout .register--login .panel--body > .register--account-information,
  .wc-checkout .register--form .panel--body > .register--companyname,
  .wc-checkout .register--login .panel--body > .register--companyname,
  .wc-checkout .register--form .panel--body > .register--department,
  .wc-checkout .register--login .panel--body > .register--department,
  .wc-checkout .register--form .panel--body > .register--ustid,
  .wc-checkout .register--login .panel--body > .register--ustid,
  .wc-checkout .register--form .panel--body > .register--street,
  .wc-checkout .register--login .panel--body > .register--street,
  .wc-checkout .register--form .panel--body > .register--zip-city,
  .wc-checkout .register--login .panel--body > .register--zip-city,
  .wc-checkout .register--form .panel--body > .register--country,
  .wc-checkout .register--login .panel--body > .register--country,
  .wc-checkout .register--form .panel--body > .register--login-email,
  .wc-checkout .register--login .panel--body > .register--login-email,
  .wc-checkout .register--form .panel--body > .register--login-password,
  .wc-checkout .register--login .panel--body > .register--login-password {
    grid-column-start: 1;
    grid-column-end: -1;
  }
  .wc-checkout .register--form .register--street > div > *:first-child,
  .wc-checkout .register--login .register--street > div > *:first-child {
    flex: 2 1 0;
  }
  .wc-checkout .register--form .register--zip-city > *:first-child,
  .wc-checkout .register--login .register--zip-city > *:first-child {
    flex: 1 1 0;
  }
  .wc-checkout .register--form .welo-register-additional-content > *,
  .wc-checkout .register--login .welo-register-additional-content > *,
  .wc-checkout .register--form .welo-register-additional-content > *:first-child,
  .wc-checkout .register--login .welo-register-additional-content > *:first-child,
  .wc-checkout .register--form .welo-register-additional-content .register--welo-elevator-available,
  .wc-checkout .register--login .welo-register-additional-content .register--welo-elevator-available {
    grid-column-start: 1;
    grid-column-end: -1;
  }
  .wc-checkout .register--form .welo-register-additional-content .register--welo-elevator-available,
  .wc-checkout .register--login .welo-register-additional-content .register--welo-elevator-available {
    flex-wrap: wrap;
  }
  .wc-checkout .register--form .register--password-description,
  .wc-checkout .register--login .register--password-description {
    grid-column-start: 1;
    grid-column-end: -1;
  }
}
/* --- Auswahlfelder des Themas ------------------------------------------ */
/* Das Theme ersetzt jedes Auswahlfeld durch ein eigenes Bedienelement. Damit
   die Formulare einheitlich aussehen, bekommt dieses dieselbe Form wie die
   uebrigen Eingabefelder. */
.wc-checkout .nice-select {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: 8px 38px 8px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f1f1f1;
  color: #2b2b2b;
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
  position: relative;
}
.wc-checkout .nice-select:after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 2px solid #2b2b2b;
  border-bottom: 2px solid #2b2b2b;
  transform: rotate(45deg);
}
.wc-checkout .nice-select.open {
  border-color: #96c126;
  background: #fff;
}
.wc-checkout .nice-select .current {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wc-checkout .nice-select .nice-select-dropdown,
.wc-checkout .nice-select .list {
  border-radius: 8px;
}
.wc-checkout .nice-select .option {
  font-size: 14px;
  line-height: 34px;
  min-height: 34px;
}
/* Das Theme faerbt die Raender der Eingabefelder blau. Die Vorlage kennt
   dort keine Raender. */
.wc-checkout .register--form input[type="text"],
.wc-checkout .register--login input[type="text"],
.wc-checkout .wc-step--body input[type="text"],
.wc-checkout .register--form input[type="email"],
.wc-checkout .register--login input[type="email"],
.wc-checkout .wc-step--body input[type="email"],
.wc-checkout .register--form input[type="password"],
.wc-checkout .register--login input[type="password"],
.wc-checkout .wc-step--body input[type="password"],
.wc-checkout .register--form input[type="tel"],
.wc-checkout .register--login input[type="tel"],
.wc-checkout .wc-step--body input[type="tel"],
.wc-checkout .register--form input[type="number"],
.wc-checkout .register--login input[type="number"],
.wc-checkout .wc-step--body input[type="number"],
.wc-checkout .register--form select,
.wc-checkout .register--login select,
.wc-checkout .wc-step--body select,
.wc-checkout .register--form textarea,
.wc-checkout .register--login textarea,
.wc-checkout .wc-step--body textarea {
  border-color: transparent;
  box-shadow: none;
}
.wc-checkout .register--form input[type="text"]:focus,
.wc-checkout .register--login input[type="text"]:focus,
.wc-checkout .wc-step--body input[type="text"]:focus,
.wc-checkout .register--form input[type="email"]:focus,
.wc-checkout .register--login input[type="email"]:focus,
.wc-checkout .wc-step--body input[type="email"]:focus,
.wc-checkout .register--form input[type="password"]:focus,
.wc-checkout .register--login input[type="password"]:focus,
.wc-checkout .wc-step--body input[type="password"]:focus,
.wc-checkout .register--form input[type="tel"]:focus,
.wc-checkout .register--login input[type="tel"]:focus,
.wc-checkout .wc-step--body input[type="tel"]:focus,
.wc-checkout .register--form input[type="number"]:focus,
.wc-checkout .register--login input[type="number"]:focus,
.wc-checkout .wc-step--body input[type="number"]:focus,
.wc-checkout .register--form select:focus,
.wc-checkout .register--login select:focus,
.wc-checkout .wc-step--body select:focus,
.wc-checkout .register--form textarea:focus,
.wc-checkout .register--login textarea:focus,
.wc-checkout .wc-step--body textarea:focus {
  border-color: #96c126;
}
.wc-checkout .register--form input[type="text"].has--error,
.wc-checkout .register--login input[type="text"].has--error,
.wc-checkout .wc-step--body input[type="text"].has--error,
.wc-checkout .register--form input[type="email"].has--error,
.wc-checkout .register--login input[type="email"].has--error,
.wc-checkout .wc-step--body input[type="email"].has--error,
.wc-checkout .register--form input[type="password"].has--error,
.wc-checkout .register--login input[type="password"].has--error,
.wc-checkout .wc-step--body input[type="password"].has--error,
.wc-checkout .register--form input[type="tel"].has--error,
.wc-checkout .register--login input[type="tel"].has--error,
.wc-checkout .wc-step--body input[type="tel"].has--error,
.wc-checkout .register--form input[type="number"].has--error,
.wc-checkout .register--login input[type="number"].has--error,
.wc-checkout .wc-step--body input[type="number"].has--error,
.wc-checkout .register--form select.has--error,
.wc-checkout .register--login select.has--error,
.wc-checkout .wc-step--body select.has--error,
.wc-checkout .register--form textarea.has--error,
.wc-checkout .register--login textarea.has--error,
.wc-checkout .wc-step--body textarea.has--error {
  border-color: #e74c3c;
}
/* Zwischenueberschriften der Formulare in gruen, wie in der Vorlage */
.wc-checkout .register--form h3,
.wc-checkout .register--form .panel--title {
  grid-column: span 12;
  margin: 18px 0 2px;
  padding: 0;
  border: 0;
  font-size: 19px;
  font-weight: 700;
  color: #96c126;
}
/* Etage, Aufzug und das Feld fuer Hinweise teilen sich eine Flaeche. */
.wc-checkout .welo-register-additional-content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  align-items: start;
  /* Aufzug: Frage und beide Angaben in einer Zeile */
  /* Das Feld fuer Hinweise nimmt die ganze Breite ein. */
}
.wc-checkout .welo-register-additional-content > * {
  grid-column: span 12;
}
.wc-checkout .welo-register-additional-content > *:first-child {
  grid-column: span 4;
}
.wc-checkout .welo-register-additional-content .register--welo-elevator-available {
  grid-column: span 8;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 14px;
  min-height: 46px;
  /* Frage und beide Angaben bleiben in einer Zeile; nur die Frage darf
           umbrechen, damit "Ja" und "Nein" nie auseinandergerissen werden. */
}
.wc-checkout .welo-register-additional-content .register--welo-elevator-available > *:first-child {
  flex: 0 1 auto;
}
.wc-checkout .welo-register-additional-content .register--welo-elevator-available label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  flex: 0 0 auto;
  white-space: nowrap;
  cursor: pointer;
}
.wc-checkout .welo-register-additional-content .register--welo-address-comment {
  grid-column: span 12;
}
.wc-checkout .welo-register-additional-content .register--welo-address-comment textarea {
  width: 100%;
}
/* ============================================================== Handy */
@media screen and (max-width: 63.9375em) {
  .wc-checkout--inner {
    flex-direction: column;
  }
  .wc-checkout--aside {
    flex: 1 1 auto;
    width: 100%;
  }
  .wc-checkout--aside.is--sticky {
    position: static;
  }
  .wc-suggest--item {
    flex-basis: calc(24%);
  }
}
@media screen and (max-width: 47.9375em) {
  .wc-checkout {
    padding: 18px 12px 40px;
  }
  .wc-step {
    gap: 10px;
    margin-bottom: 16px;
  }
  .wc-step--number {
    font-size: 24px;
    padding-top: 18px;
  }
  .wc-step--head {
    padding: 15px 14px;
  }
  .wc-step--title {
    font-size: 20px;
  }
  .wc-step--body {
    padding: 0 14px 18px;
  }
  .wc-step--summary {
    white-space: normal;
  }
  .wc-choice {
    flex-direction: column;
    gap: 10px;
  }
  .wc-btn {
    width: 100%;
  }
  .wc-header--inner {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
  }
  .wc-header--phone {
    order: 3;
    flex: 1 1 100%;
  }
  .wc-header--logo {
    order: 1;
    flex: 1 1 auto;
  }
  .wc-header--back {
    order: 2;
    flex: 0 0 auto;
  }
  .wc-header--logo img {
    max-height: 42px;
  }
  .wc-tag:before {
    display: none;
  }
  .wc-tag {
    flex: 1 1 100%;
  }
  .wc-suggest--item {
    flex-basis: calc(60%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wc-step--panel,
  .wc-step--chevron,
  .wc-choice--tile,
  .wc-btn {
    transition: none;
  }
}
/* ====================================================== Feinschliff */
/* Das Theme gibt diesen Behaeltern einen Innenabstand aus dem alten Aufbau.
   Dadurch stehen Formularfelder und Schaltflaechen um 20 Pixel eingerueckt,
   waehrend Ueberschriften und Kacheln buendig am Rand sitzen. */
.wc-checkout .panel--body,
.wc-checkout .panel--body.is--wide {
  padding: 0;
}
/* Der Behaelter der Neukunden-Abschnitte traegt die Grundfarbe der Seite und
   hebt sich dadurch als grauer Block vom weissen Schritt ab. */
.wc-checkout .panel,
.wc-checkout .panel.has--border,
.wc-checkout .register--company,
.wc-checkout .register--shipping,
.wc-checkout .register--address {
  background: none;
  border: 0;
  box-shadow: none;
}
/* --- Schaltflaechen der Formulare ------------------------------------- */
/* Die Schaltflaechen des Themas bringen eine feste Hoehe, einen Pfeil und
   eine Textausrichtung aus dem alten Aufbau mit. Hier zaehlt die Form der
   Vorlage: blau, kompakt, Beschriftung mittig, kein Pfeil. */
.wc-checkout .register--login-btn,
.wc-checkout .register-btn,
.wc-checkout .register--submit,
.wc-checkout [data-wc-pane] button[type="submit"],
.wc-checkout .register--form button[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  float: none;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 42px;
  padding: 11px 22px !important;
  border: 0;
  border-radius: 6px;
  background: #48a2e7;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
  /* Der Pfeil des Themas gehoert nicht zur Vorlage. */
}
.wc-checkout .register--login-btn:hover:not([disabled]),
.wc-checkout .register-btn:hover:not([disabled]),
.wc-checkout .register--submit:hover:not([disabled]),
.wc-checkout [data-wc-pane] button[type="submit"]:hover:not([disabled]),
.wc-checkout .register--form button[type="submit"]:hover:not([disabled]) {
  background: #2f8ed3;
}
.wc-checkout .register--login-btn[disabled],
.wc-checkout .register-btn[disabled],
.wc-checkout .register--submit[disabled],
.wc-checkout [data-wc-pane] button[type="submit"][disabled],
.wc-checkout .register--form button[type="submit"][disabled] {
  opacity: .45;
  cursor: not-allowed;
}
.wc-checkout .register--login-btn i,
.wc-checkout .register-btn i,
.wc-checkout .register--submit i,
.wc-checkout [data-wc-pane] button[type="submit"] i,
.wc-checkout .register--form button[type="submit"] i,
.wc-checkout .register--login-btn .icon--arrow-right,
.wc-checkout .register-btn .icon--arrow-right,
.wc-checkout .register--submit .icon--arrow-right,
.wc-checkout [data-wc-pane] button[type="submit"] .icon--arrow-right,
.wc-checkout .register--form button[type="submit"] .icon--arrow-right {
  display: none !important;
}
/* --- Mengenwahl in der Bestelluebersicht ------------------------------ */
.wc-summary {
  /* Minus, Menge und Plus als eine zusammenhaengende Einheit. */
  /* Form und Zeichen der beiden Schaltflaechen stehen weiter unten, in
       einer einzigen Fassung. Zwei Regelsaetze mit leicht verschiedenen
       Massen liessen die Striche gegeneinander verrutschen - das Plus sah
       dadurch aus wie ein Pfeil. */
}
.wc-summary .checkout--quantity-price {
  align-items: center;
  padding-top: 10px;
}
.wc-summary .column--quantity,
.wc-summary .column--unit-price {
  height: auto;
  padding: 0;
}
.wc-summary .select-field {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}
.wc-summary .quantity-holder-container {
  display: inline-flex;
  align-items: stretch;
  height: 32px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.wc-summary .prepend,
.wc-summary .append {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f1f1;
  color: #2b2b2b;
  cursor: pointer;
  user-select: none;
}
.wc-summary .prepend:hover,
.wc-summary .append:hover {
  background: #e6e6e6;
}
.wc-summary .quantity-holder,
.wc-summary .quantity--select-new {
  width: 38px;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  /* Die Pfeilchen der Zahleneingabe stoeren neben den Schaltflaechen. */
  appearance: textfield;
}
.wc-summary .quantity-holder::-webkit-outer-spin-button,
.wc-summary .quantity--select-new::-webkit-outer-spin-button,
.wc-summary .quantity-holder::-webkit-inner-spin-button,
.wc-summary .quantity--select-new::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
.wc-summary .quantity-holder:focus,
.wc-summary .quantity--select-new:focus {
  background: #fff;
  border: 0;
  outline: 0;
}
.wc-summary .column--unit-price {
  font-size: 15px;
  font-weight: 700;
}
/* --- Zustimmungen buendig -------------------------------------------- */
.wc-checkout .agb-and-revocation {
  /* Die Ueberschrift des Themas bringt Rahmen und Hoehe aus dem alten
       Aufbau mit. */
  /* Alle Zeilen beginnen an derselben Kante: Text, erste und zweite
       Zustimmung. */
}
.wc-checkout .agb-and-revocation > .panel--title {
  height: auto;
  min-height: 0;
  line-height: 1.3;
  background: none;
  text-decoration: none;
}
.wc-checkout .agb-and-revocation .list--checkbox li,
.wc-checkout .agb-and-revocation .wc-check {
  margin-left: 0;
  padding-left: 0;
}
.wc-checkout .agb-and-revocation .list--checkbox .column--checkbox,
.wc-checkout .agb-and-revocation .wc-check > input[type="checkbox"] {
  margin-left: 0;
}
/* Die zweite Zustimmung steht ausserhalb der Liste und braucht dieselbe
   Einrueckung wie die erste. */
.wc-checkout .wc-check {
  padding-left: 0;
  margin-left: 0;
}
/* Das Theme faerbt die Raender einzelner Felder blau - je nach Behaelter mit
   unterschiedlicher Spezifitaet. In der Vorlage haben Eingabefelder keinen
   Rand, nur beim Tippen einen gruenen. */
.wc-checkout input[type="text"],
.wc-checkout input[type="email"],
.wc-checkout input[type="password"],
.wc-checkout input[type="tel"],
.wc-checkout input[type="number"],
.wc-checkout select,
.wc-checkout textarea {
  border-color: transparent !important;
  box-shadow: none !important;
}
.wc-checkout input:focus,
.wc-checkout select:focus,
.wc-checkout textarea:focus {
  border-color: #96c126 !important;
}
.wc-checkout .has--error {
  border-color: #e74c3c !important;
}
/* Ja/Nein: das Ankreuzfeld steht vor seiner Beschriftung. */
.wc-checkout .register--welo-elevator-available label {
  flex-direction: row-reverse;
}
/* Die Liste der Zustimmungen bringt aus dem Theme eine Einrueckung mit. Sie
   liess die erste Zustimmung zehn Pixel weiter rechts stehen als die zweite
   und als den Text darueber. */
.wc-checkout .agb-and-revocation {
  /* Beide Zustimmungen halten denselben Abstand zwischen Kaestchen und Text. */
}
.wc-checkout .agb-and-revocation .list--checkbox {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.wc-checkout .agb-and-revocation .list--checkbox li,
.wc-checkout .agb-and-revocation .list--checkbox .column--checkbox,
.wc-checkout .agb-and-revocation .list--checkbox .column--label {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.wc-checkout .agb-and-revocation .list--checkbox li {
  gap: 10px;
  /* Die Rasterklassen des Themas setzen unsichtbare Hilfselemente zum
           Aufheben von Umfluessen. In einer Flexbox zaehlen sie als eigene
           Spalte und schieben das Kaestchen um den Spaltenabstand nach
           rechts - genau die zehn Pixel, um die diese Zeile verrutscht war. */
}
.wc-checkout .agb-and-revocation .list--checkbox li:before,
.wc-checkout .agb-and-revocation .list--checkbox li:after {
  display: none;
}
/* ================================================ Abstaende nachgezogen */
/* --- Lieferzeitraum: alles an einer Kante ---------------------------- */
/* Im gewaehlten Kasten sass die Beschriftung an der Innenkante, Datum und
   Uhrzeit dagegen zehn Pixel weiter rechts: der Behaelter darunter bringt
   einen eigenen Innenabstand mit. */
.wc-checkout .dispatch--method {
  /* Das Raster des Themas setzt Spaltenabstaende, die hier ins Leere
       laufen und den Kasten unnoetig hoch machen. */
  /* Der Behaelter bleibt ein Block: er enthaelt neben Beschriftung und
       Auswahlfeld auch freien Text, der sonst als eigene Spalte danebenrutscht. */
  /* Das Auswahlfeld braucht eine sinnvolle Breite, sonst zeigt es nur
       einen Bruchteil des Zeitfensters. */
  /* Der Behaelter des Themas ist auf Inhaltsbreite geschrumpft; das
       Zeitfenster passt dort nicht hinein. */
  /* Der Hinweis darunter mit etwas Luft. */
  /* Leerraum am Kastenende: das Theme haengt ein Element zum Aufheben von
       Umfluessen an, das hier nur Hoehe erzeugt. */
}
.wc-checkout .dispatch--method .panel--group,
.wc-checkout .dispatch--method .deliverydate--panel,
.wc-checkout .dispatch--method .panel--body,
.wc-checkout .dispatch--method .panel--body.is--wide,
.wc-checkout .dispatch--method .grid_15,
.wc-checkout .dispatch--method .dtgs-deliverydate--box {
  padding: 0 !important;
  margin: 0;
  border: 0;
  background: none;
}
.wc-checkout .dispatch--method .grid_5,
.wc-checkout .dispatch--method .grid_10 {
  width: auto;
  margin: 0;
  padding: 0;
}
.wc-checkout .dispatch--method .dtgs-deliverydate--box {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
}
.wc-checkout .dispatch--method .dtgs-deliverydate--box label.description {
  display: block;
  margin: 0 0 4px !important;
  font-size: 14px;
  font-weight: 700;
}
.wc-checkout .dispatch--method .dtgs-deliverydate--box .select-container {
  display: block;
  width: 220px;
  max-width: 100%;
}
.wc-checkout .dispatch--method .dtgs-deliverydate--box .nice-select {
  width: 100%;
  min-width: 180px;
}
.wc-checkout .dispatch--method .dtgs-deliverydate--box .grid_5,
.wc-checkout .dispatch--method .dtgs-deliverydate--box .grid_10 {
  display: block;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}
.wc-checkout .dispatch--method .dtgs-deliverydate--box > strong {
  display: inline-block;
  margin-top: 10px;
}
.wc-checkout .dispatch--method .clear {
  display: none;
}
/* --- Bestelluebersicht: Positionszeile ------------------------------- */
.wc-summary {
  /* Der Produktbereich trug aus dem alten Aufbau eine Breite von gut der
       Haelfte der Spalte. Dadurch blieb dem Titel nur ein schmaler Streifen,
       und er brach auf vier Zeilen um. */
  /* Der Titel bekam nur einen Bruchteil der Breite und brach auf vier
       Zeilen um. */
  /* Mit einer Grundbreite von auto beansprucht der Titel seine volle
       Textbreite und rutscht unter das Bild. Mit null teilt er sich die
       Zeile mit dem Bild und bricht innerhalb seiner Spalte um. */
  /* Menge und Preis stehen linksbuendig unter dem Titel, nicht eingerueckt
       und ohne den grossen Abstand des alten Aufbaus. */
  /* Das Kreuz zum Entfernen sitzt in der oberen rechten Ecke der Zeile. */
}
.wc-summary .table--tr.row--product {
  position: relative;
  padding: 12px 0;
}
.wc-summary .column--product {
  width: 100% !important;
  max-width: none;
}
.wc-summary .table--content {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0;
  max-width: none;
  padding-right: 20px;
}
.wc-summary .column--image {
  padding: 0 !important;
  margin: 0;
}
.wc-summary .checkout--quantity-price {
  padding: 10px 0 0 !important;
  gap: 12px;
}
.wc-summary .column--quantity,
.wc-summary .column--unit-price {
  padding: 0 !important;
  margin: 0 !important;
  height: auto;
}
.wc-summary .column--unit-price {
  margin-left: auto !important;
}
.wc-summary .column--actions {
  position: absolute;
  top: 8px;
  right: 0;
  float: none;
  margin: 0 !important;
  padding: 0 !important;
  height: auto;
}
/* ==================================================== Abstandsskala ====
 *
 * Bis hierher hat jeder Bereich seine eigenen Abstaende mitgebracht - teils
 * aus der Vorlage, teils aus dem Theme. Das Ergebnis waren ungleiche Einzuege
 * und Luecken, die keine Gruppen mehr erkennen liessen.
 *
 * Ab hier gelten drei Stufen, und zwar ueberall dieselben:
 *
 *   eng    (6px)   - was zusammengehoert: Beschriftung und ihr Feld,
 *                    ein Hinweis und das, worauf er sich bezieht
 *   normal (14px)  - Abstand zwischen den Zeilen einer Gruppe
 *   weit   (26px)  - Abstand zwischen zwei Gruppen
 *
 * Waagerecht gibt es genau eine Kante je Kasten. Alles, was darin steht,
 * beginnt dort - ohne eigene Einzuege.
 */
/* --- Schritte gleichmaessig gestaffelt -------------------------------- */
.wc-step {
  margin-bottom: 14px;
}
.wc-step--body {
  padding: 0 24px 22px;
}
/* Die Frage gehoert zur Ueberschrift, nicht zur Auswahl darunter. */
.wc-step--hint {
  margin: 0 0 14px;
}
.wc-step--actions {
  margin-top: 26px;
}
/* --- Lieferzeitraum: eine Kante, klare Gruppen ------------------------ */
.wc-checkout .dispatch--method {
  padding: 14px 18px;
  /* Versandart und ihre Kennzeichnung sind nicht gleichwertig: der Name
       fuehrt, die Kennzeichnung erlaeutert. */
  /* Beschriftung, Feld und Hinweis bilden eine Einheit. */
  /* Datum und Uhrzeit stehen nebeneinander, jedes mit seiner Beschriftung
       direkt darueber. */
}
.wc-checkout .dispatch--method .method--name {
  font-size: 16px;
  font-weight: 700;
}
.wc-checkout .dispatch--method .panel--group {
  margin-top: 14px;
}
.wc-checkout .dispatch--method .dtgs-deliverydate--box {
  margin-top: 0;
}
.wc-checkout .dispatch--method .dtgs-deliverydate--box label.description {
  margin: 0 0 6px !important;
}
.wc-checkout .dispatch--method .dtgs-deliverydate--box > strong {
  margin-top: 6px;
}
.wc-checkout .dispatch--method .deliverydate--panel .grid_5,
.wc-checkout .dispatch--method .deliverydate--panel .grid_10 {
  margin-bottom: 0;
}
/* Die Kennzeichnung tritt gegenueber dem Namen zurueck. */
.wc-tag {
  font-size: 13px;
  color: #8a8a8a;
}
.wc-tag b,
.wc-tag strong {
  color: #96c126;
}
/* Das Zeichen sitzt auf der Grundlinie des Textes. */
.wc-tag--icon {
  align-self: center;
  position: relative;
  top: 1px;
}
/* "-oder-" trennt zwei gleichrangige Moeglichkeiten und darf das zeigen. */
.wc-dispatch--oder {
  margin: 14px 0;
  color: #8a8a8a;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: lowercase;
}
/* --- Hinweis auf die kostenfreie Lieferung --------------------------- */
/* Er gehoert zur Lieferung darueber, nicht zur Schaltflaeche darunter. */
.wc-step--body .free-shipping-container {
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.wc-step--body .free-shipping-container h2 {
  font-size: 19px;
}
.wc-step--body .free-shipping-container .has--info-icon-primary {
  display: inline-block;
  margin-top: 2px;
  font-size: 13px;
  color: #8a8a8a;
}
/* --- Bestelluebersicht: eine Achse ----------------------------------- */
.wc-summary {
  padding: 18px 18px 16px;
  /* Alle Betraege enden an derselben Kante. */
}
.wc-summary .table--tr.row--product {
  padding: 0 0 14px;
}
.wc-summary .content--title {
  line-height: 1.3;
}
.wc-summary .content--sku {
  margin-top: 2px;
  font-size: 13px;
}
.wc-summary .checkout--quantity-price {
  padding-top: 14px !important;
}
.wc-summary .column--unit-price,
.wc-summary .list--entry .entry--value,
.wc-summary .aggregation--list .entry--value {
  text-align: right;
}
.wc-summary .basket--footer {
  margin-top: 0;
  padding-top: 14px;
}
.wc-summary .list--entry {
  padding: 3px 0;
}
.wc-summary .free-shipping-container {
  margin-top: 14px;
  padding-top: 14px;
}
/* --- Vertrauenspunkte als eine Gruppe -------------------------------- */
.wc-trust {
  margin-top: 14px;
}
.wc-trust li {
  margin-bottom: 10px;
  gap: 10px;
}
/* --- Zustimmungen ---------------------------------------------------- */
.wc-checkout .agb-and-revocation > .panel--title {
  margin: 26px 0 6px;
}
.wc-checkout .agb-and-revocation .body--revocation {
  margin-bottom: 14px;
}
.wc-checkout .agb-and-revocation .list--checkbox li {
  margin-bottom: 6px;
}
.wc-checkout .wc-check {
  margin: 6px 0;
}
/* Zahlarten: Abstand einer Gruppe, nicht zweier Bloecke. */
.wc-checkout .payment--method {
  margin-bottom: 6px;
}
.wc-checkout .wc-note {
  margin-bottom: 14px;
}
/* Der Hinweis zur Bestellzeit gehoert zur Zeitauswahl darueber und ruecht
   entsprechend nah heran. */
.wc-checkout .wc-hint--inline {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #8a8a8a;
}
.wc-checkout .wc-hint--inline strong {
  color: #2b2b2b;
}
/* Der Hinweis zum Bestellschluss gehoert zur Auswahl darueber und steht an
   derselben Kante, nicht mittig. */
.wc-checkout #shipping-2 .wc-submit--hint {
  margin: 6px 0 0;
  text-align: left;
}
/* Zwischen der letzten Lieferoption und dem Hinweis auf die kostenfreie
   Lieferung liegt eine Gruppengrenze, keine doppelte Luecke. */
.wc-checkout #shipping-2 {
  margin-top: 0;
}
/* ================================================ Mengenwahl sauber ====
 *
 * Drei Fehler steckten hier zusammen:
 *
 *   - Das Zahlenfeld erbte die Mindesthoehe der uebrigen Eingabefelder
 *     (46px) und ragte damit aus seinem 32px hohen Rahmen heraus. Das war
 *     der Strich, der rechts aus dem Kasten stand, und der Grund, warum die
 *     Zahl zu tief sass.
 *   - Die kleinen Pfeile, die Browser an Zahlenfelder haengen, lagen direkt
 *     ueber der Plus-Schaltflaeche und sahen aus wie ein fremdes Zeichen.
 *   - Das Kreuz zum Entfernen war mit neun Pixeln kaum zu treffen.
 */
.wc-summary {
  /* Der Rahmen richtet sich nach seinem Inhalt. Vorher hatte er eine feste
       Breite, in die Minus, Zahl und Plus zusammen nicht hineinpassten - das
       Plus stand deshalb ueber die rechte Kante hinaus. */
  /* Das Zahlenfeld fuellt genau die Hoehe des Rahmens - nicht mehr. */
  /* Trennlinien zwischen den drei Feldern, innerhalb des Rahmens. */
  /* --- Kreuz zum Entfernen --- */
}
.wc-summary .quantity-holder-container {
  width: auto;
  /* Das Theme begrenzt die Breite auf 100 Pixel; Minus, Zahl und Plus
           brauchen zusammen 104. Die vier fehlenden Pixel liessen das Plus
           ueber die rechte Kante stehen. */
  max-width: none !important;
  min-width: 0;
  height: 34px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
.wc-summary .prepend,
.wc-summary .append {
  width: 32px;
  min-width: 32px;
  height: 100%;
  flex: 0 0 32px;
}
.wc-summary .quantity-holder,
.wc-summary .quantity--select-new,
.wc-summary input.quantity-holder {
  width: 40px;
  flex: 0 0 40px;
  height: 100%;
  min-height: 0 !important;
  max-height: 100%;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: #fff !important;
  line-height: 32px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #2b2b2b;
  /* Die Pfeilchen der Zahleneingabe verschwinden vollstaendig - in
           jeder Browserfamilie. */
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}
.wc-summary .quantity-holder::-webkit-outer-spin-button,
.wc-summary .quantity--select-new::-webkit-outer-spin-button,
.wc-summary input.quantity-holder::-webkit-outer-spin-button,
.wc-summary .quantity-holder::-webkit-inner-spin-button,
.wc-summary .quantity--select-new::-webkit-inner-spin-button,
.wc-summary input.quantity-holder::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0;
  display: none;
}
.wc-summary .quantity-holder:focus,
.wc-summary .quantity--select-new:focus,
.wc-summary input.quantity-holder:focus {
  border: 0 !important;
  background: #fff !important;
  outline: 0;
}
.wc-summary .prepend {
  border-right: 1px solid rgba(0, 0, 0, 0.12);
}
.wc-summary .append {
  border-left: 1px solid rgba(0, 0, 0, 0.12);
}
.wc-summary .column--actions {
  top: 6px;
  /* Das Zeichen des Themas ist winzig; ein eigenes Kreuz aus zwei
           Strichen laesst sich verlaesslich groesser zeichnen. */
}
.wc-summary .column--actions .btn,
.wc-summary .column--actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: #8a8a8a;
  font-size: 0;
  line-height: 1;
}
.wc-summary .column--actions .btn:hover,
.wc-summary .column--actions button:hover {
  background: #f1f1f1;
  color: #e74c3c;
}
.wc-summary .column--actions i {
  position: relative;
  display: block;
  width: 13px;
  height: 13px;
  font-size: 0;
}
.wc-summary .column--actions i:before,
.wc-summary .column--actions i:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 1.5px;
  margin: -1px 0 0 -6.5px;
  background: currentColor;
  border-radius: 1px;
}
.wc-summary .column--actions i:before {
  transform: rotate(45deg);
}
.wc-summary .column--actions i:after {
  transform: rotate(-45deg);
}
/* ========================================== Zeichen vollstaendig selbst
 *
 * Das Theme setzt Minus, Plus und Kreuz als Zeichen einer Symbolschrift.
 * Diese Zeichen sind winzig, sitzen nicht mittig und sehen bei Plus wie ein
 * Pfeil aus. Hier werden sie abgeschaltet und durch Striche ersetzt, die
 * sich verlaesslich ausrichten lassen.
 */
.wc-summary {
  /* Die Elemente des Themas verschwinden ganz: sie tragen eigene
       Hintergrundfarben - grau beim Minus, blau beim Plus - und ein Zeichen
       aus der Symbolschrift, das wie ein Pfeil aussieht. Sichtbar gemacht
       wuerden sie genau das zeigen. */
  /* --- Minus --- */
  /* --- Plus: zwei Striche, exakt uebereinander --- */
  /* --- Kreuz zum Entfernen --- */
}
.wc-summary .prepend i,
.wc-summary .append i,
.wc-summary .column--actions i {
  display: none !important;
}
.wc-summary .prepend {
  position: relative;
}
.wc-summary .prepend:before {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  background: #2b2b2b;
  border-radius: 1px;
}
.wc-summary .prepend:after {
  content: none;
}
.wc-summary .append {
  position: relative;
}
.wc-summary .append:before,
.wc-summary .append:after {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 50%;
  top: 50%;
  background: #2b2b2b;
  border-radius: 1px;
}
.wc-summary .append:before {
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
}
.wc-summary .append:after {
  width: 2px;
  height: 12px;
  margin: -6px 0 0 -1px;
}
.wc-summary .column--actions .btn,
.wc-summary .column--actions button {
  position: relative;
  display: block;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  font-size: 0 !important;
  color: #8a8a8a;
}
.wc-summary .column--actions .btn:before,
.wc-summary .column--actions button:before,
.wc-summary .column--actions .btn:after,
.wc-summary .column--actions button:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background: currentColor;
  border-radius: 1px;
}
.wc-summary .column--actions .btn:before,
.wc-summary .column--actions button:before {
  transform: rotate(45deg);
}
.wc-summary .column--actions .btn:after,
.wc-summary .column--actions button:after {
  transform: rotate(-45deg);
}
.wc-summary .column--actions .btn:hover,
.wc-summary .column--actions button:hover {
  color: #e74c3c;
}
/* Die Zeichnungen der Mengenwahl und des Entfernens werden vom Skript
   gesetzt; die Striche aus dem Stylesheet entfallen dadurch. */
.wc-summary .prepend:before,
.wc-summary .prepend:after,
.wc-summary .append:before,
.wc-summary .append:after,
.wc-summary .column--actions .btn:before,
.wc-summary .column--actions .btn:after,
.wc-summary .column--actions button:before,
.wc-summary .column--actions button:after {
  content: none !important;
  display: none !important;
}
.wc-summary .prepend svg,
.wc-summary .append svg,
.wc-summary .column--actions svg {
  display: block;
  color: #2b2b2b;
}
.wc-summary .column--actions svg {
  color: #8a8a8a;
}
.wc-summary .column--actions button:hover svg,
.wc-summary .column--actions .btn:hover svg {
  color: #e74c3c;
}
/* ============================================ Zeichen als Hintergrundbild
 *
 * Minus, Plus und Kreuz kamen aus der Symbolschrift des Themas. Das Plus
 * erschien dort als Pfeil, und weder das Ausblenden des Zeichens noch ein
 * eigenes Bild im Element hat das zuverlaessig verdraengt.
 *
 * Als Hintergrundbild liegt das Zeichen auf der Flaeche selbst. Es kann von
 * keinem Zeichen und keinem Pseudo-Element mehr ueberlagert werden und ist
 * unabhaengig davon, ob das Skript laeuft.
 */
.wc-summary .prepend,
.wc-summary .append,
.wc-summary .column--actions .btn,
.wc-summary .column--actions button {
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 14px 14px !important;
  font-size: 0 !important;
  color: transparent !important;
  /* Alles, was das Theme oder ein Skript hineinlegt, bleibt unsichtbar. */
}
.wc-summary .prepend > *,
.wc-summary .append > *,
.wc-summary .column--actions .btn > *,
.wc-summary .column--actions button > *,
.wc-summary .prepend i,
.wc-summary .append i,
.wc-summary .column--actions .btn i,
.wc-summary .column--actions button i,
.wc-summary .prepend svg,
.wc-summary .append svg,
.wc-summary .column--actions .btn svg,
.wc-summary .column--actions button svg {
  display: none !important;
}
.wc-summary .prepend:before,
.wc-summary .append:before,
.wc-summary .column--actions .btn:before,
.wc-summary .column--actions button:before,
.wc-summary .prepend:after,
.wc-summary .append:after,
.wc-summary .column--actions .btn:after,
.wc-summary .column--actions button:after {
  content: none !important;
  display: none !important;
}
.wc-summary .prepend {
  background-color: #f1f1f1 !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='7' width='12' height='2' rx='1' fill='%232b2b2b'/%3E%3C/svg%3E") !important;
}
.wc-summary .append {
  background-color: #f1f1f1 !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='7' width='12' height='2' rx='1' fill='%232b2b2b'/%3E%3Crect x='7' y='2' width='2' height='12' rx='1' fill='%232b2b2b'/%3E%3C/svg%3E") !important;
}
/* Das Formular der Mengenwahl heisst im Theme select-field und bekommt
   deshalb den Auswahlpfeil eines Aufklappfeldes angehaengt: ein Zeichen der
   Symbolschrift, 30 mal 40 Pixel, absolut positioniert.

   Es lag ueber der Plus-Flaeche - das war das fremde Zeichen - und ragte
   unten aus dem Rahmen heraus, weil es hoeher ist als dieser. Hier gibt es
   nichts aufzuklappen, also faellt es weg. */
.wc-summary .select-field:before,
.wc-summary .select-field:after {
  content: none !important;
  display: none !important;
}
/* ------------------------------------------------ Kreuz zum Entfernen --
 * Das Theme setzte hier ein Zeichen seiner Symbolschrift, deren Zuordnung
 * verschoben ist: statt eines Kreuzes erschien ein Pfeil nach rechts. Das
 * Template liefert jetzt ein echtes SVG, das hier nur noch sichtbar
 * gemacht und ausgerichtet wird.
 */
.wc-summary .column--actions {
  /* Der Behaelter schrumpfte auf die Breite des Zeichens im Theme (12px).
       Der Knopf ist breiter und lief deshalb ueber die rechte Kante der
       Zeile hinaus, wo er abgeschnitten wurde - vom Kreuz blieb nur eine
       Haelfte stehen, die wie ein Pfeil aussah. */
  width: 26px;
}
.wc-summary .column--actions form {
  width: 26px;
  margin: 0;
  padding: 0;
}
.wc-summary .column--actions .btn,
.wc-summary .column--actions button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none !important;
  color: #8a8a8a;
}
.wc-summary .column--actions .btn svg,
.wc-summary .column--actions button svg {
  display: block !important;
  width: 15px;
  height: 15px;
}
.wc-summary .column--actions .btn i,
.wc-summary .column--actions button i {
  display: none !important;
}
.wc-summary .column--actions .btn:hover,
.wc-summary .column--actions button:hover {
  background: #f1f1f1 !important;
  color: #e74c3c;
}
/* ------------------------------------------- Zeile mit Menge und Preis --
 * Der Zeilenbehaelter war 56px hoch, obwohl der Mengenwaehler nur 34px
 * misst: das Raster des Themas haengt zwei Elemente zum Aufheben von
 * Umfluessen an, die in einem Flex-Behaelter als eigene Spalten zaehlen,
 * und unter dem Waehler blieb die Grundlinienluecke einer Textzeile.
 */
.wc-summary .checkout--quantity-price {
  /* Das Formular um den Waehler bringt den Aussenabstand mit, den das
       Theme allen Formularen gibt. Er blaeht die Zeile auf. */
}
.wc-summary .checkout--quantity-price:before,
.wc-summary .checkout--quantity-price:after {
  content: none !important;
  display: none !important;
}
.wc-summary .checkout--quantity-price .panel--td {
  display: flex;
  align-items: center;
  line-height: 0;
}
.wc-summary .checkout--quantity-price form {
  display: flex !important;
  align-items: center;
  /* Das Theme gibt jedem Formularfeld eine Mindesthoehe; hier steht
           kein Feld, sondern der Waehler mit eigener Hoehe. */
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
  /* Der Waehler ist ein Element im Textfluss; in einem Block bleibt
           unter ihm die Luecke bis zur Grundlinie stehen. Als Flex-Kind
           entfaellt sie. */
}
.wc-summary .checkout--quantity-price form:before,
.wc-summary .checkout--quantity-price form:after {
  content: none !important;
  display: none !important;
}
.wc-summary .checkout--quantity-price .column--unit-price {
  line-height: 1.3;
}
/* Der Waehler brachte oben und unten je vier Pixel Aussenabstand aus dem
   Theme mit; zusammen mit dem Abstand der Zeile wurde die Zeile deutlich
   hoeher als der Waehler selbst. */
.wc-summary .quantity-holder-container {
  margin: 0 !important;
}
/* Waehrend die Menge zum Server geht, bleibt der Waehler bedienbar - er
   zeigt nur, dass etwas laeuft. */
.quantity-holder-container.wc-menge--laeuft {
  opacity: .55;
}
/* ------------------------------- Lieferung heute nach Bestellschluss --
 * Der Kasten verschwindet nicht mehr, sondern bleibt grau stehen. So sieht
 * der Kunde, dass es die Moeglichkeit gibt - und woran es gerade liegt.
 */
.wc-checkout #shipping-2.wc-heute--zu {
  /* Zeitfenster und Hinweise gehoeren zur waehlbaren Fassung. */
}
.wc-checkout #shipping-2.wc-heute--zu .dispatch--method {
  background: #f1f1f1;
  border-color: rgba(0, 0, 0, 0.12);
  color: #8a8a8a;
  cursor: not-allowed;
  /* Die hervorgehobenen Woerter "Heute" bleiben gruen, auch wenn der
           Kasten nach Bestellschluss grau ist - so steht es im Entwurf
           (Karim, 08.09., 17:37). */
}
.wc-checkout #shipping-2.wc-heute--zu .dispatch--method .method--name,
.wc-checkout #shipping-2.wc-heute--zu .dispatch--method .wc-tag {
  color: #8a8a8a;
}
.wc-checkout #shipping-2.wc-heute--zu .dispatch--method .wc-tag b,
.wc-checkout #shipping-2.wc-heute--zu .dispatch--method .wc-tag strong {
  color: #96c126;
}
.wc-checkout #shipping-2.wc-heute--zu .dispatch--method input[type="radio"] {
  cursor: not-allowed;
}
.wc-checkout #shipping-2.wc-heute--zu .panel--group {
  display: none;
}
.wc-heute--grund {
  margin: 6px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f1f1f1;
  font-size: 13px;
  line-height: 1.45;
  color: #8a8a8a;
}
/* ====================================== Schrift der Vorlage ============
 * Der Entwurf ist durchgehend in Montserrat gesetzt (SemiBold fuer
 * Ueberschriften, Regular fuer Fliesstext). Die Schrift liegt bereits im
 * Theme und wird dort an anderer Stelle verwendet - hier wird sie fuer den
 * gesamten Bestellweg uebernommen, damit er dem Entwurf entspricht.
 */
.wc-checkout,
.wc-checkout input,
.wc-checkout select,
.wc-checkout textarea,
.wc-checkout button,
.wc-summary,
.wc-suggest,
.wc-trust,
.wc-head {
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* Ueberschriften stehen im Entwurf halbfett, nicht fett. */
.wc-step--title,
.wc-pane--title,
.wc-suggest--title,
.wc-summary .panel--title,
.wc-choice--title {
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
}
/* ================================== Handyansicht nach Rueckmeldung =====
 *
 * Auf dem Handy steht die Schrittnummer neben einer Ueberschrift, die dann
 * nicht mehr mittig sitzt - und die drei Vertrauenspunkte laufen als schmale
 * Zeilen ueber die ganze Breite. Beides wirkt auf kleinen Schirmen unruhig.
 */
@media screen and (max-width: 47.9375em) {
  /* Auf dem Handy ist links neben dem Kasten kein Platz fuer die Nummer.
       Der Entwurf legt sie deshalb in den Kasten hinein - Karim, 08.09.,
       12:31: "das ist natuerlich auch schlau, die 1, 2, 3 ... hat der jetzt
       quasi in der Ansicht in das Ding reingelegt". */
  .wc-step {
    position: relative;
  }
  .wc-step--number {
    display: block;
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    font-size: 20px;
  }
  .wc-step--head {
    padding-left: 44px;
  }
  .wc-checkout--steps {
    padding-left: 0;
  }
  .wc-step--head {
    padding-left: 16px;
  }
  /* Vertrauenspunkte nebeneinander, Zeichen oben, Text darunter. */
  .wc-trust {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
  }
  .wc-trust li {
    flex: 1 1 0;
    display: block;
    margin: 0;
    text-align: center;
  }
  .wc-trust .wc-trust--icon {
    display: block;
    margin: 0 auto 8px;
  }
  .wc-trust .wc-trust--text {
    display: block;
    font-size: 12px;
    line-height: 1.35;
  }
  .wc-trust b,
  .wc-trust strong {
    display: block;
  }
}
/* --------------------------------------- CO2-Hinweis als Schaltflaeche --
 * Im Entwurf ist der ganze Hinweis anklickbar und zeigt das beim Ueberfahren
 * durch eine Unterstreichung. Bisher liess sich nur das "i" treffen.
 */
.wc-tag--schalter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.wc-tag--schalter .wc-tag--text {
  text-decoration: none;
}
.wc-tag--schalter:hover .wc-tag--text,
.wc-tag--schalter:focus-visible .wc-tag--text {
  text-decoration: underline;
}
.wc-tag--schalter:focus-visible {
  outline: 2px solid rgba(72, 162, 231, 0.55);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Das "i" ist jetzt Teil des Schalters, keine eigene Schaltflaeche mehr. */
.wc-tag--schalter .wc-tag--info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
/* ================================ Groessen nach dem Entwurf ============
 * Im Entwurf steht die Ueberschrift eines Schrittes in 36 Pixeln - deutlich
 * groesser als bisher umgesetzt. Sie traegt den Bestellweg und darf das auch
 * zeigen. Auf schmalen Schirmen faellt sie zurueck.
 */
.wc-step--title {
  font-size: 34px;
  line-height: 1.3;
}
/* Die Kopfzeile bleibt bei der Hausschrift: der Entwurf setzt
   "Zurück zum Shop" ausdruecklich in DaytonaW01. */
.wc-head,
.wc-header,
.wc-head a,
.wc-header a {
  font-family: DaytonaW01, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
@media screen and (max-width: 63.9375em) {
  .wc-step--title {
    font-size: 28px;
  }
}
@media screen and (max-width: 47.9375em) {
  .wc-step--title {
    font-size: 23px;
  }
}
/* ============================ Zeichen aus der Entwurfsdatei ============
 * Haus mit Blatt, Lieferwagen und Info-Kreis stammen jetzt unveraendert aus
 * Figma. Ihre Farbe folgt der Textfarbe, damit sie im gesperrten Zustand
 * mit ergrauen.
 */
.wc-ikon {
  display: block;
  width: 100%;
  height: 100%;
}
.wc-tag--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #96c126;
}
.wc-tag--schalter .wc-tag--info {
  width: 17px;
  height: 17px;
  border: 0;
  color: #96c126;
}
/* Das Datumsfeld traegt im Entwurf keinen Kalender, sondern denselben
   schlichten Aufklapp-Pfeil wie die uebrigen Auswahlfelder. Das Zeichen des
   Themas samt seiner Schattierung entfaellt. */
.wc-checkout .dtgs-deliverydate--box .datepicker,
.wc-checkout input.datepicker,
.wc-checkout .js--datepicker,
.wc-checkout .datepicker--trigger,
.wc-checkout .input--calendar-icon,
.wc-checkout .dtgs-deliverydate--box .icon--calendar {
  background-image: none !important;
  box-shadow: none !important;
}
.wc-checkout .dtgs-deliverydate--box .icon--calendar:before,
.wc-checkout .datepicker--trigger:before {
  content: none !important;
}
/* ================================ Zahlarten wie im Entwurf =============
 * Im Entwurf sehen alle Zahlarten gleich aus - weisser Grund, heller
 * Rahmen. Nur die gewaehlte bekommt einen gruenen Rahmen. Bisher war die
 * nicht gewaehlte grau hinterlegt, was wie "gesperrt" aussah.
 */
.wc-checkout .payment--method {
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 15px;
  transition: border-color 0.15s ease;
}
.wc-checkout .payment--method:hover {
  border-color: rgba(150, 193, 38, 0.55);
}
.wc-checkout .payment--method.is--selected,
.wc-checkout .payment--method.selected-payment {
  background: #fff;
  border-color: #96c126;
}
/* Trennlinien zwischen den Bloecken - dieselbe Bildsprache wie im uebrigen
   Shop. */
.wc-checkout .agb-and-revocation > .panel--title,
.wc-summary .basket--footer,
.wc-checkout .wc-step--actions {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  padding-top: 14px;
}
.wc-checkout .agb-and-revocation > .panel--title {
  margin-top: 26px;
}
/* ---------------------------------- Angaben des angemeldeten Kunden ----
 * Hinter "Angaben bearbeiten" stand bisher ein leerer Kasten. Jetzt steht
 * dort, womit bestellt wird - in drei Spalten wie im uebrigen Bestellweg.
 */
.wc-daten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.wc-daten--titel {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: #2b2b2b;
}
.wc-daten--text {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.5;
  color: #8a8a8a;
}
.wc-daten--link {
  font-size: 13px;
  font-weight: 600;
  color: #48a2e7;
  text-decoration: none;
}
.wc-daten--link:hover {
  text-decoration: underline;
}
@media screen and (max-width: 47.9375em) {
  .wc-daten {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
/* Die Kopfzeile traegt im Entwurf die Signalfarbe: blaue Linie unten und
   blau umrandeter Weg zurueck in den Shop. Bisher war der Rahmen ein kaum
   sichtbares Grau. */
.wc-header--back-btn {
  border: 2px solid #48a2e7 !important;
  color: #48a2e7 !important;
  font-weight: 700;
}
.wc-header--back-btn:hover {
  background: rgba(72, 162, 231, 0.08) !important;
  color: #48a2e7 !important;
}
/* =============================== Warenkorbseite ========================
 * Der Warenkorb hat einen anderen Aufbau als die Bestelluebersicht, und
 * seine Mengenwahl war auseinandergefallen: Das Minus stand links neben der
 * Zeile, das Plus war blau hinterlegt, das Kreuz zum Entfernen nur zwoelf
 * Pixel breit. Hier bekommt er dieselbe Gestalt wie die Uebersicht im
 * Bestellweg - es ist derselbe Warenkorb, er soll auch so aussehen.
 */
.is--ctl-checkout.is--act-cart {
  /* Das Formular um den Waehler bringt Aussenabstand und Mindesthoehe
       aus dem Theme mit - und es fliesst nach rechts, obwohl es breiter ist
       als seine Zelle. Dadurch stand der Waehler links neben der Zeile. */
  /* Menge und Preis stehen unter dem Artikel, wie in der Bestelluebersicht.
       Die Spaltenueberschriften des Themas passen dazu nicht mehr - sie
       kuendigen Spalten an, die es hier nicht gibt. */
  /* Der Betrag stand zweimal uebereinander: einmal neben der Menge, einmal
       in der Spalte rechts. Es bleibt der rechte - dort erwartet man ihn. */
  /* Kreuz zum Entfernen: gleiche Groesse wie im Bestellweg. */
}
.is--ctl-checkout.is--act-cart .quantity-holder-container {
  display: inline-flex !important;
  align-items: center;
  height: 34px;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  vertical-align: middle;
}
.is--ctl-checkout.is--act-cart form.select-field {
  display: inline-flex !important;
  align-items: center;
  float: none !important;
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.is--ctl-checkout.is--act-cart form.select-field:before,
.is--ctl-checkout.is--act-cart form.select-field:after {
  content: none !important;
  display: none !important;
}
.is--ctl-checkout.is--act-cart .column--quantity {
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
.is--ctl-checkout.is--act-cart .checkout--quantity-price {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 12px !important;
}
.is--ctl-checkout.is--act-cart .table--header .column--quantity,
.is--ctl-checkout.is--act-cart .table--header .column--unit-price,
.is--ctl-checkout.is--act-cart .table--header .column--total-price,
.is--ctl-checkout.is--act-cart .panel--th.column--quantity,
.is--ctl-checkout.is--act-cart .panel--th.column--unit-price,
.is--ctl-checkout.is--act-cart .panel--th.column--total-price {
  visibility: hidden;
}
.is--ctl-checkout.is--act-cart .checkout--quantity-price .column--unit-price,
.is--ctl-checkout.is--act-cart .checkout--quantity-price .column--total-price {
  display: none !important;
}
.is--ctl-checkout.is--act-cart .row--product > .column--total-price {
  text-align: right;
  font-weight: 700;
}
.is--ctl-checkout.is--act-cart .prepend,
.is--ctl-checkout.is--act-cart .append {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  flex: 0 0 32px;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  background-color: #f1f1f1 !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 14px 14px !important;
  font-size: 0 !important;
  color: transparent !important;
  cursor: pointer;
}
.is--ctl-checkout.is--act-cart .prepend > *,
.is--ctl-checkout.is--act-cart .append > *,
.is--ctl-checkout.is--act-cart .prepend i,
.is--ctl-checkout.is--act-cart .append i,
.is--ctl-checkout.is--act-cart .prepend svg,
.is--ctl-checkout.is--act-cart .append svg {
  display: none !important;
}
.is--ctl-checkout.is--act-cart .prepend:before,
.is--ctl-checkout.is--act-cart .append:before,
.is--ctl-checkout.is--act-cart .prepend:after,
.is--ctl-checkout.is--act-cart .append:after {
  content: none !important;
  display: none !important;
}
.is--ctl-checkout.is--act-cart .prepend:hover,
.is--ctl-checkout.is--act-cart .append:hover {
  background-color: #e6e6e6 !important;
}
.is--ctl-checkout.is--act-cart .prepend {
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='7' width='12' height='2' rx='1' fill='%232b2b2b'/%3E%3C/svg%3E") !important;
}
.is--ctl-checkout.is--act-cart .append {
  border-left: 1px solid rgba(0, 0, 0, 0.12);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='7' width='12' height='2' rx='1' fill='%232b2b2b'/%3E%3Crect x='7' y='2' width='2' height='12' rx='1' fill='%232b2b2b'/%3E%3C/svg%3E") !important;
}
.is--ctl-checkout.is--act-cart .quantity-holder,
.is--ctl-checkout.is--act-cart .quantity--select-new,
.is--ctl-checkout.is--act-cart input.quantity-holder {
  width: 40px;
  height: 32px;
  min-height: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: #fff !important;
  line-height: 32px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #2b2b2b;
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}
.is--ctl-checkout.is--act-cart .quantity-holder::-webkit-outer-spin-button,
.is--ctl-checkout.is--act-cart .quantity--select-new::-webkit-outer-spin-button,
.is--ctl-checkout.is--act-cart input.quantity-holder::-webkit-outer-spin-button,
.is--ctl-checkout.is--act-cart .quantity-holder::-webkit-inner-spin-button,
.is--ctl-checkout.is--act-cart .quantity--select-new::-webkit-inner-spin-button,
.is--ctl-checkout.is--act-cart input.quantity-holder::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0;
  display: none;
}
.is--ctl-checkout.is--act-cart .quantity-holder:focus,
.is--ctl-checkout.is--act-cart .quantity--select-new:focus,
.is--ctl-checkout.is--act-cart input.quantity-holder:focus {
  border: 0 !important;
  outline: 0;
  background: #fff !important;
}
.is--ctl-checkout.is--act-cart .column--actions {
  width: 30px;
}
.is--ctl-checkout.is--act-cart .column--actions form {
  width: 30px;
  margin: 0;
  padding: 0;
}
.is--ctl-checkout.is--act-cart .column--actions .btn,
.is--ctl-checkout.is--act-cart .column--actions button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none !important;
  color: #8a8a8a;
}
.is--ctl-checkout.is--act-cart .column--actions .btn svg,
.is--ctl-checkout.is--act-cart .column--actions button svg {
  display: block !important;
  width: 15px;
  height: 15px;
}
.is--ctl-checkout.is--act-cart .column--actions .btn i,
.is--ctl-checkout.is--act-cart .column--actions button i {
  display: none !important;
}
.is--ctl-checkout.is--act-cart .column--actions .btn:hover,
.is--ctl-checkout.is--act-cart .column--actions button:hover {
  background: #f1f1f1 !important;
  color: #e74c3c;
}
/* Der Hinweis zum Passwort stand als eigene Rasterzelle neben dem Feld und
   riss eine grosse Luecke in die Zeile. Er gehoert unter sein Feld. */
.wc-checkout .register--password-description,
.wc-checkout .password--description,
.wc-checkout .register--form .register--password + .register--info {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: #8a8a8a;
}
/* Im Entwurf ist das Wort "heute" in der Kennzeichnung gruen - es ist der
   Grund, warum dieser Kasten ueberhaupt auffaellt. */
.wc-tag--today b,
.wc-tag--today strong {
  color: #96c126;
  font-weight: 700;
}
/* ================== Rueckmeldung Karim, Video vom 05.09. ==============
 *
 * Leitgedanke: Der Bestellweg soll aussehen wie der uebrige Shop. Alles
 * hier folgt Punkten aus dem Video, in Klammern die Stelle.
 */
/* --- Lieferzeitraum: Kasten grau, Felder weiss (10:33) ----------------
 * Bisher war es umgekehrt - weisser Kasten, graue Felder. Im Entwurf
 * traegt der Block die Flaeche und die Auswahlfelder heben sich weiss
 * davon ab, jedes mit einem Pfeil, damit erkennbar ist, dass sich etwas
 * auswaehlen laesst.
 */
.wc-checkout .dispatch--method {
  background: #f1f1f1;
}
.wc-checkout .dispatch--method.selected-dispatch,
.wc-checkout .dispatch--method:has(input:checked) {
  background: #f1f1f1;
}
/* Beide Felder weiss, mit Rahmen und Pfeil - auch das Datumsfeld, das
   bisher gar keinen hatte (09:52). */
.wc-checkout .dtgs-deliverydate--box {
  /* Abstand zwischen den beiden Feldern (10:33) */
}
.wc-checkout .dtgs-deliverydate--box input.flatpickr-input,
.wc-checkout .dtgs-deliverydate--box input.text,
.wc-checkout .dtgs-deliverydate--box select,
.wc-checkout .dtgs-deliverydate--box select.better-select {
  background-color: #fff !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M20 1.775L10 11.775L0 1.775L1.775 0L10 8.225L18.225 0L20 1.775Z' fill='%232b2b2b' fill-opacity='0.55'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 8px !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 8px;
  padding-right: 34px !important;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.wc-checkout .dtgs-deliverydate--box > .grid_10 + .grid_5 {
  margin-left: 14px;
}
/* --- Vorschlagsreihe (09:35, 09:52) ----------------------------------
 * Die Ueberschrift stand ueber dem Blaetterpfeil statt ueber der ersten
 * Kachel. Oben war zu viel Luft, zwischen den Bloecken zu wenig.
 */
.wc-suggest {
  margin-top: 0;
  margin-bottom: 44px;
}
.wc-suggest--title {
  /* buendig mit der ersten Kachel, nicht mit dem Pfeil */
  margin-left: 46px;
}
/* --- Trennlinie der Designsprache (10:49, 12:35, 15:11) ---------------
 * Der geschwungene gruene Strich, der im uebrigen Shop Bloecke trennt.
 */
.wc-linie {
  display: block;
  width: 100%;
  height: 14px;
  margin: 14px 0 0;
  background: url("/media/vector/8d/89/3b/Unsere-verleihartikel-divider-gr-n.svg") no-repeat center bottom;
  background-size: 100% auto;
}
/* Die Linie schliesst jeden Schritt ab - so wie im uebrigen Shop ein
   Abschnitt endet. */
.wc-checkout .wc-step--body:after,
.wc-summary .free-shipping-container:after {
  content: "";
  display: block;
  width: 100%;
  height: 12px;
  margin-top: 14px;
  background: url("/media/vector/8d/89/3b/Unsere-verleihartikel-divider-gr-n.svg") no-repeat center bottom;
  background-size: 100% auto;
  opacity: .85;
}
/* Im zugeklappten Zustand gibt es nichts abzuschliessen. */
.wc-checkout .wc-step:not(.is--open) .wc-step--body:after {
  content: none;
}
@media screen and (max-width: 47.9375em) {
  .wc-suggest--title {
    margin-left: 0;
  }
}
/* --- Abstand ueber der Vorschlagsreihe (09:35) ------------------------
 * Zwischen Kopfzeile und erstem Inhalt lagen 154 Pixel: 100 aus dem
 * Seitenrahmen, 20 aus dessen Aussenabstand, 34 aus dem Bestellweg. Das
 * ist fuer eine Seite, die sofort zur Sache kommen soll, zu viel.
 */
.is--ctl-checkout .content-main,
body:has(.wc-checkout) .content-main {
  padding-top: 24px;
  margin-top: 0;
}
.wc-checkout {
  padding-top: 0;
}
/* --- Luft vor den Zustimmungen (15:25) -------------------------------
 * Der Leergut-Hinweis und die AGB standen dicht beieinander; sie gehoeren
 * nicht zusammen und brauchen Abstand.
 */
.wc-checkout .wc-zustimmung {
  margin-top: 26px;
}
/* --- Hinweis zur Zahlung auf Rechnung (13:46) ------------------------
 * Erscheint nur, wenn diese Zahlungsart gewaehlt ist.
 */
.wc-rechnung--hinweis {
  margin: 6px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f1f1f1;
  font-size: 13px;
  line-height: 1.45;
  color: #8a8a8a;
}
/* ============== Hinweisleiste zur Einfuehrung (16:18) =================
 * Waehrend der ersten Wochen soll ein Kunde, bei dem etwas klemmt, uns
 * sofort erreichen koennen - ohne den Bestellweg zu verlassen.
 */
.wc-testhinweis {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
  padding: 11px 18px;
  border: 1px solid rgba(72, 162, 231, 0.35);
  border-radius: 15px;
  background: rgba(72, 162, 231, 0.07000000000000001);
  font-size: 14px;
  color: #2b2b2b;
  text-align: center;
}
.wc-testhinweis--knopf {
  padding: 5px 14px;
  border: 0;
  border-radius: 999px;
  background: #48a2e7;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.wc-testhinweis--knopf:hover {
  background: #2490e2;
}
.wc-testhinweis--knopf:focus-visible {
  outline: 3px solid rgba(72, 162, 231, 0.45);
  outline-offset: 2px;
}
/* --- Fenster mit den Kontaktwegen --- */
.wc-hilfe {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
}
.wc-hilfe[hidden] {
  display: none;
}
.wc-hilfe--box {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 30px 28px 24px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}
.wc-hilfe--schliessen {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: #8a8a8a;
  cursor: pointer;
}
.wc-hilfe--schliessen:hover {
  background: #f1f1f1;
}
.wc-hilfe--titel {
  margin: 0 0 6px;
  font-size: 21px;
  font-weight: 600;
  color: #96c126;
}
.wc-hilfe--text {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #8a8a8a;
}
/* Jeder Kontaktweg ist eine eigene, gut treffbare Flaeche. */
.wc-hilfe--weg {
  display: block;
  margin-bottom: 8px;
  padding: 11px 14px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.wc-hilfe--weg:hover {
  border-color: #96c126;
  background: rgba(150, 193, 38, 0.06);
  text-decoration: none;
}
.wc-hilfe--wegtitel {
  display: block;
  font-size: 12px;
  color: #8a8a8a;
}
.wc-hilfe--wegwert {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #2b2b2b;
}
/* --------------------------------------------------------------------------
   Leerer Warenkorb (Karim, Video 05.09., 02:12)

   Vorher: eine gelbe Hinweisleiste auf sonst leerer Seite, ohne Weg zurueck.
   -------------------------------------------------------------------------- */
.wc-leer {
  max-width: 520px;
  margin: 70px auto 90px;
  padding: 40px 26px;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 15px;
}
.wc-leer--zeichen {
  display: block;
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  color: #8a8a8a;
}
.wc-leer--zeichen svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wc-leer--zeichen svg circle {
  fill: currentColor;
  stroke: none;
}
.wc-leer--titel {
  margin: 0 0 6px;
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #2b2b2b;
}
.wc-leer--text {
  margin: 0 0 26px;
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: #8a8a8a;
}
.wc-leer--knopf {
  display: inline-block;
  padding: 13px 30px;
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #48a2e7;
  text-decoration: none;
  background: #fff;
  border: 2px solid #48a2e7;
  border-radius: 8px;
  transition: background .2s ease, color .2s ease;
}
.wc-leer--knopf:hover,
.wc-leer--knopf:focus {
  color: #fff;
  background: #48a2e7;
  text-decoration: none;
}
/* Ueberschrift ueber den Zahlarten - im Entwurf steht sie zwischen dem
   Leergut-Hinweis und der ersten Zahlart (Karim, 15:53). */
.wc-zahlart--titel {
  margin: 26px 0 14px;
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #96c126;
}
/* Das Barzahlungs-Zeichen steht als SVG im Quelltext und richtet sich nach
   der Textfarbe. Die uebrigen Zahlarten bringen weiterhin Bilddateien mit. */
.wc-checkout .wc-zahlart--zeichen {
  display: block;
  width: auto;
  height: 26px;
  margin: 0 auto;
  color: #2b2b2b;
}
/* --------------------------------------------------------------------------
   Karim, Video 06.09.

   Die Ziffer des offenen Schrittes wird gruen - so sieht man auf einen Blick,
   in welchem Bereich man gerade ist. Die uebrigen bleiben zurueckhaltend.
   Fett ist im Bestellweg nichts mehr; das war vorher uneinheitlich.
   -------------------------------------------------------------------------- */
.wc-checkout .wc-step.is--open > .wc-step--number,
.wc-checkout .wc-step.is--active > .wc-step--number {
  color: #96c126;
}
.wc-checkout .wc-step.is--done > .wc-step--number {
  color: #8a8a8a;
}
.wc-checkout .wc-step--title,
.wc-checkout .method--name,
.wc-checkout .wc-pane--title,
.wc-checkout .wc-choice--title {
  font-weight: 400;
}
/* ==========================================================================
   Karim, Video vom 06.09. - Abstaende und Farben
   ========================================================================== */
/* Lieferzeitraum: mehr Luft zwischen Datum und Uhrzeit, das Datumsfeld darf
   schmaler sein als das Zeitfenster (08:55, 09:10). */
.wc-checkout .dtgs-deliverydate--box {
  /* Das Theme legt die beiden Felder in ein Raster. Das bleibt so - es
       aendern sich nur die Breiten und der Abstand dazwischen: das Datum
       darf schmaler stehen als das Zeitfenster (Karim, 09:10). */
  /* Beide Felder weiss - eines stand vorher dunkler da. */
}
.wc-checkout .dtgs-deliverydate--box > .grid_5 {
  width: 44%;
  padding-right: 26px;
}
.wc-checkout .dtgs-deliverydate--box > .grid_10 {
  width: 56%;
}
.wc-checkout .dtgs-deliverydate--box input.flatpickr-input,
.wc-checkout .dtgs-deliverydate--box input.text,
.wc-checkout .dtgs-deliverydate--box select,
.wc-checkout .dtgs-deliverydate--box select.better-select {
  background-color: #fff !important;
}
/* Die drei Vertrauenspunkte rechts standen zu dicht beieinander (01:54). */
.wc-checkout .wc-trust > * + *,
.wc-checkout--aside .wc-trust > * + * {
  margin-top: 22px;
}
/* Mehr Luft zwischen den Formularfeldern (02:24). */
.wc-checkout .register--field,
.wc-checkout .wc-pane .field--select,
.wc-checkout .register--login-field {
  margin-bottom: 14px;
}
/* Zahlarten: die Symbole sind im Original grau, nicht weiss; das
   Girocard-Zeichen darf etwas groesser sein (10:52, 11:10). */
.wc-checkout .payment--method-logo img {
  max-height: 30px;
}
.wc-checkout .payment--method-logo.payment_logo_8 img {
  max-height: 34px;
}
.wc-checkout .wc-zahlart--zeichen {
  color: #8a8a8a;
}
/* Das Warenkorb-Zeichen der Vorschlagskacheln ist jetzt dasselbe wie in den
   Produktkacheln des Shops - es kommt aus der Symbolschrift des Themes. */
.wc-suggest--btn i.icon--basket {
  display: block;
  font-size: 15px;
  line-height: 1;
}
.wc-suggest--btn svg {
  display: none;
}
/* ==========================================================================
   Bestelluebersicht wie im bisherigen Bestellabschluss
   (Karim, 06.09., 01:20: "die Bubbles fehlen", "die Flaschengroesse ist
   falsch", "auch die Gesamtgroesse der Uebersicht")
   ========================================================================== */
.wc-checkout .wc-summary {
  position: relative;
  overflow: hidden;
  border-color: #48a2e7;
  /* Das Blasenmuster aus dem Shop - es lag bisher nur im alten
       Bestellabschluss und fehlte hier. */
  /* Der Inhalt liegt ueber dem Muster. */
}
.wc-checkout .wc-summary:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 180px;
  height: 100%;
  z-index: 0;
  transform: scaleY(-1);
  background: url("/themes/Frontend/KachouriGetraenke/frontend/_public/src/img/menu-bubbles.svg") -20px 0 no-repeat;
  pointer-events: none;
}
.wc-checkout .wc-summary > * {
  position: relative;
  z-index: 1;
}
/* Titel und Kistenzaehler stehen im Original blau und mittig. */
.wc-checkout .wc-summary--title {
  color: #48a2e7;
  text-align: center;
}
.wc-checkout .wc-summary .free-shipping-container {
  text-align: center;
}
.wc-checkout .wc-summary .free-shipping-container h2 {
  color: #48a2e7;
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 2px;
}
.wc-checkout .wc-summary .free-shipping-container span {
  color: #2b2b2b;
}
/* Die Trennlinie unter den Artikeln ist im Original blau. */
.wc-checkout .wc-summary .wc-summary--sums,
.wc-checkout .wc-summary .table--total-sum,
.wc-checkout .wc-summary .panel--table + * {
  border-top: 2px solid #48a2e7;
}
/* Die Flasche stand im Original deutlich groesser da. Shopware legt das Bild
   absolut in einen 72 Pixel hohen Behaelter und zentriert es ueber
   margin:auto - hoeher darf es nicht werden, sonst wird der Rand negativ und
   die Flasche oben abgeschnitten (Karim, 11.09., 03:01). Die Breite ergibt
   sich aus dem Bild; ueber width:100% wurde es vorher verzerrt. */
.wc-checkout .wc-summary .column--image,
.wc-checkout .wc-summary .table--media {
  width: 54px;
  height: auto;
}
.wc-checkout .wc-summary .column--image img,
.wc-checkout .wc-summary .table--media img {
  width: auto;
  max-width: 100%;
  max-height: 72px;
  object-fit: contain;
}
/* Das Plus ist im Original ein blaues Feld, das Minus bleibt grau. Gefaerbt
   wird die Schaltflaeche, nicht das Zeichen darin. */
.wc-checkout .wc-summary .quantity-holder-container .append {
  background: #48a2e7;
  border-color: #48a2e7;
}
.wc-checkout .wc-summary .quantity-holder-container .append .icon--plus,
.wc-checkout .wc-summary .quantity-holder-container .append:before,
.wc-checkout .wc-summary .quantity-holder-container .append:after {
  color: #fff;
}
/* --------------------------------------------------------------------------
   Die Designsprache-Linie steht nur dort, wo Karim sie genannt hat:
   unter dem Lieferzeitraum und unter der Bezahlung. Unter dem ersten Schritt
   und in der Bestelluebersicht ist sie wieder raus (06.09., 00:36).
   -------------------------------------------------------------------------- */
.wc-checkout #wc-step-1 .wc-step--body:after,
.wc-checkout .wc-summary .free-shipping-container:after {
  content: none;
}
/* --------------------------------------------------------------------------
   Kundenwahl - Abgleich mit dem Entwurf (Karim, 06.09., 01:20)

   Solange nichts gewaehlt ist, stehen beide Kacheln weiss da, mit blauem
   Rahmen und schwarzer Beschriftung. Erst wenn eine gewaehlt wurde, tritt die
   andere zurueck: grau hinterlegt, Schrift blass. Die gewaehlte bekommt den
   gruenen Rahmen.
   -------------------------------------------------------------------------- */
/* Im Entwurf stehen beide Kacheln grau hinterlegt da; erst die gewaehlte wird
   weiss mit gruenem Rahmen. Am 06.09. hatte ich das nach einem Zoom-Vergleich
   auf weiss gestellt - das war falsch (Karim, 08.09., 04:28: "die
   Hintergrundfarbe von diesen Feldern ist falsch, da ist ein Grau
   hinterlegt"). */
.wc-checkout .wc-choice--tile {
  background: #f1f1f1;
  border-color: #48a2e7;
}
.wc-checkout .wc-choice--tile .wc-choice--title {
  color: #2b2b2b;
}
.wc-checkout .wc-choice--tile .wc-choice--sub {
  color: #8a8a8a;
}
.wc-checkout .wc-choice--tile.is--selected {
  background: #fff;
  border-color: #96c126;
}
.wc-checkout .wc-choice--tile.is--selected .wc-choice--title {
  color: #2b2b2b;
}
/* Das Theme faerbt die Mengen-Schaltflaechen selbst und ist dabei
   spezifischer - deshalb hier mit Vorrang. Im bisherigen Bestellabschluss
   ist das Plus ein blaues Feld mit weissem Zeichen, das Minus bleibt grau. */
.wc-checkout .wc-summary .quantity-holder-container .append {
  /* Nur die Flaeche faerben: "background" als Kurzform wuerde auch das
       Plus-Bild loeschen, das auf derselben Flaeche liegt. */
  background-color: #48a2e7 !important;
  border-color: #48a2e7 !important;
}
/* Die Trennlinie zwischen Artikeln und Summen ist im Original blau. */
.wc-checkout .wc-summary .panel--table,
.wc-checkout .wc-summary .table--tr:last-of-type {
  border-bottom: 2px solid #48a2e7;
}
/* --------------------------------------------------------------------------
   Kopfzeile: im Entwurf schliesst sie mit einer blauen Linie ab. Bei uns ging
   das Weiss ohne Kante in die graue Flaeche ueber (Karim, 06.09., 00:33).
   -------------------------------------------------------------------------- */
/* Die Linie wird als eigene Flaeche gezeichnet: Ein border-bottom setzt das
   Theme an dieser Stelle mit Vorrang wieder auf null. */
header.wc-header {
  position: relative;
}
header.wc-header:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #48a2e7;
  pointer-events: none;
}
/* Die noch nicht erreichbaren Schritte stehen im Entwurf klar sichtbar da -
   bei uns waren Rahmen und Schrift so blass, dass sie fast verschwanden. */
.wc-checkout .wc-step:not(.is--open) .wc-step--panel {
  border-color: rgba(43, 43, 43, 0.3);
}
.wc-checkout .wc-step:not(.is--open) .wc-step--title,
.wc-checkout .wc-step:not(.is--open) .wc-step--number,
.wc-checkout .wc-step.is--locked .wc-step--title,
.wc-checkout .wc-step.is--locked .wc-step--number {
  color: rgba(43, 43, 43, 0.75);
}
.wc-checkout .wc-step.is--locked .wc-step--panel {
  border-color: rgba(43, 43, 43, 0.22);
}
/* Der Knopf im CO2-Fenster ist im Entwurf gruen, nicht blau. */
.wc-co2--box .wc-btn--submit,
#wc-co2 .wc-btn--submit {
  background: #96c126;
  border-color: #96c126;
}
.wc-co2--box .wc-btn--submit:hover,
#wc-co2 .wc-btn--submit:hover,
.wc-co2--box .wc-btn--submit:focus,
#wc-co2 .wc-btn--submit:focus {
  background: #7ba31d;
  border-color: #7ba31d;
}
/* Shopwares Versandkosten-Rechner ("zzgl. aktuelle Liefergebühr" mit
   Lieferland, Zahlungsart, Versandart) steht in der Bestelluebersicht ueber
   den Summen. Karim: "Der hier, das muss alles raus, dass er das nicht sieht"
   (08.09., 03:21) - die Angaben trifft der Kunde ja in den Schritten selbst. */
.wc-checkout .wc-summary .table--aggregation,
.wc-checkout .wc-summary .basket--footer > .table--aggregation {
  display: none;
}
/* ==========================================================================
   Karim, Video vom 08.09.

   Fett gehoert an drei Stellen hin - die uebrige Regel "nichts fett" aus dem
   Video davor bleibt bestehen:
   - die Ziffern der Schritte (07:19)
   - die beiden Kacheln "Bestandskunde"/"Neukunde" (04:28)
   - die Ueberschrift des offenen Bereichs, etwa "Neukunde" (07:42)
   ========================================================================== */
.wc-checkout .wc-step--number {
  font-weight: 700;
}
.wc-checkout .wc-choice--title {
  font-weight: 700;
}
.wc-checkout .wc-pane--title {
  font-weight: 700;
}
/* Das Blasenmuster lag hinter dem weissen Grund der Summen und war kaum noch
   zu sehen (Karim, 08.09., 03:13: "diese Blaeschen verschwinden"). */
.wc-checkout .wc-summary:after {
  opacity: 1;
  z-index: 0;
}
.wc-checkout .wc-summary .panel,
.wc-checkout .wc-summary .product--table,
.wc-checkout .wc-summary .basket--footer,
.wc-checkout .wc-summary .table--aggregation {
  background: transparent;
}
/* Zahlarten: im Entwurf sind die Kaesten grau hinterlegt, der Bereich
   drumherum weiss - die gewaehlte wird weiss mit gruenem Rahmen.
   Karim (08.09., 19:33): "Grau innen, der Rest aussen weiss". */
.wc-checkout .payment--method {
  background: #f1f1f1;
}
.wc-checkout .payment--method.selected-payment {
  background: #fff;
  border-color: #96c126;
}
/* Die Zeichen der Zahlarten standen zu klein da (08.09., 19:48). */
.wc-checkout .payment--method-logo img,
.wc-checkout .wc-zahlart--zeichen {
  max-height: 34px;
}
.wc-checkout .payment--method-logo.payment_logo_8 img {
  max-height: 40px;
}
/* Die Flaschen in den Vorschlaegen wurden oben angeschnitten - der Bildbereich
   bekommt mehr Hoehe (08.09., 20:41: "die werden so ein bisschen abgehakt"). */
.wc-checkout .wc-suggest--img {
  height: 132px;
}
.wc-checkout .wc-suggest--img img {
  max-height: 132px;
}
/* ==================================================== Abweichende Lieferanschrift
 *
 * Der Rechnungsblock ordnet seine Felder ueber "order" - und weil die
 * Lieferanschrift dieselben Klassennamen benutzt, hat es dort Anrede,
 * Vorname und Nachname ans Ende geschoben. Karim hat das zu Recht als
 * "Salat" bezeichnet. Hier bekommt der Lieferblock seine eigene Reihenfolge:
 * Firma, Abteilung, dann Anrede/Vorname/Nachname als eine Zeile, danach
 * die Anschrift - also genauso wie oben bei den persoenlichen Angaben.
 */
.wc-checkout .register--form .register--shipping .panel--body > h3,
.wc-checkout .register--form .register--shipping .panel--body > .wc-pane--title {
  order: 0;
}
.wc-checkout .register--form .register--shipping .panel--body > .register--companyname {
  order: 1;
  grid-column: span 8;
}
.wc-checkout .register--form .register--shipping .panel--body > .register--department {
  order: 2;
  grid-column: span 4;
}
.wc-checkout .register--form .register--shipping .panel--body > .register--salutation {
  order: 3;
  grid-column: span 4;
}
.wc-checkout .register--form .register--shipping .panel--body > .register--firstname {
  order: 4;
  grid-column-start: auto;
  grid-column-end: span 4;
}
.wc-checkout .register--form .register--shipping .panel--body > .register--lastname {
  order: 5;
  grid-column: span 4;
}
.wc-checkout .register--form .register--shipping .panel--body > .register--street {
  order: 6;
  grid-column: span 12;
}
.wc-checkout .register--form .register--shipping .panel--body > .register--zip-city {
  order: 7;
  grid-column: span 8;
}
.wc-checkout .register--form .register--shipping .panel--body > .register--country,
.wc-checkout .register--form .register--shipping .panel--body > .register--shipping-country {
  order: 8;
  grid-column: span 4;
}
.wc-checkout .register--form .register--shipping .panel--body > .register--shipping-phone {
  order: 9;
  grid-column: span 12;
}
.wc-checkout .register--form .register--shipping .panel--body > .welo-register-additional-content {
  order: 10;
}
/* ==================================================== Vorschlagsreihe im Shop-Stil
 *
 * Karim vergleicht die Reihe mit "Das könnte dir gefallen" aus dem Shop:
 * dort schwebt ein runder, halbdurchsichtiger Pfeil ueber der Kachelkante
 * und der Warenkorb sitzt oben rechts in der Ecke der Kachel.
 */
.wc-suggest {
  position: relative;
}
/* Die Ueberschrift steht buendig ueber der ersten Kachel - die Pfeile
   nehmen keinen Platz mehr in der Zeile weg. */
.wc-suggest--title {
  margin-left: 0;
}
.wc-suggest--row {
  position: relative;
  gap: 0;
}
.wc-suggest--nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 54px;
  height: 54px;
  margin-top: -27px;
  border-radius: 50%;
  background: rgba(150, 193, 38, 0.55);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.wc-suggest--nav[data-wc-suggest="zurueck"] {
  left: -14px;
}
.wc-suggest--nav[data-wc-suggest="vor"] {
  right: -14px;
}
.wc-suggest--nav:hover,
.wc-suggest--nav:focus {
  background: rgba(150, 193, 38, 0.85);
}
.wc-suggest--nav svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Der Warenkorb sitzt in der oberen rechten Ecke und schliesst buendig mit
   dem Rahmen ab - unten links abgerundet, genau wie im Shop. */
.wc-suggest--item {
  position: relative;
  padding-top: 16px;
}
.wc-suggest--add {
  position: absolute;
  top: -2px;
  right: -2px;
  z-index: 2;
}
.wc-checkout .wc-suggest--btn {
  width: 44px;
  height: 40px;
  border-radius: 0 8px 0 12px;
  background: #96c126;
  color: #fff;
}
.wc-checkout .wc-suggest--btn .icon--basket {
  font-size: 18px;
}
/* Neben dem Preis steht jetzt nichts mehr - der Preis darf die Zeile haben. */
.wc-suggest--foot {
  justify-content: flex-start;
}
@media screen and (max-width: 47.9375em) {
  .wc-suggest--nav[data-wc-suggest="zurueck"] {
    left: -6px;
  }
  .wc-suggest--nav[data-wc-suggest="vor"] {
    right: -6px;
  }
}
/* ==================================================== Fragezeichen im Kopf
 *
 * Karim (05:00): "ob wir das Fragezeichen von hier übernehmen" - im Entwurf
 * ist der Kreis nicht gefuellt, sondern nur umrandet, und das Fragezeichen
 * traegt die Hausfarbe.
 */
.wc-header--phone-icon {
  width: 21px;
  height: 21px;
  margin-top: 0;
  border: 2px solid #96c126;
  background: transparent;
  color: #96c126;
  font-size: 13px;
  line-height: 17px;
}
/* ==================================================== Hinweis oben
 *
 * Karim (10:27): "das wirkt ein bisschen sehr dramatisch". Der Kasten bleibt
 * deutlich sichtbar, verzichtet aber auf die breite Alarmkante und das
 * kraeftige Rot.
 */
.wc-hinweis {
  padding: 11px 14px;
  border: 1px solid rgba(231, 76, 60, 0.45);
  border-left-width: 1px;
  background: rgba(231, 76, 60, 0.04);
  color: #2b2b2b;
  font-size: 14px;
}
.wc-hinweis p {
  margin: 0;
}
.wc-hinweis p + p {
  margin-top: 4px;
}
/* ==================================================== Doppelte Beschriftung
 *
 * Das Adress-Zusatzplugin stellt seinem Auswahlfeld eine Beschriftung voran.
 * Da unsere Felder ihre Beschriftung schon als Platzhalter tragen, stand
 * "Aufzug vorhanden?*" zweimal nebeneinander. Fuer Vorleseprogramme bleibt
 * sie erhalten, sichtbar ist sie nicht mehr.
 */
.wc-checkout .register--welo-elevator-available > label,
.wc-checkout .register--welo-house-floor > label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* ==================================================== Reihenfolge im Lieferzeitraum
 *
 * Im Entwurf steht der Kistenzaehler ganz unten: erst der Knopf, dann die
 * geschwungene Linie, dann "Noch 1 Kiste". Bei uns stand er noch ueber dem
 * Knopf (Karim, 17:57: "hier fehlt komplett der untere Block").
 */
/* Nur der geoeffnete Schritt wird zum Flex-Kasten - sonst gewinnt diese
   Regel gegen das Zuklappen und der Inhalt bleibt stehen. */
.wc-checkout .wc-step.is--open #wc-step-2-body {
  display: flex;
  flex-direction: column;
  /* Der Zaehler steckt im Lieferkasten, nicht direkt im Schritt. Damit die
       Reihenfolge greift, gibt der Kasten seine eigene Box auf und seine
       Kinder ordnen sich mit ein. */
}
.wc-checkout .wc-step.is--open #wc-step-2-body > .wc-lieferung {
  display: contents;
}
.wc-checkout .wc-step.is--open #wc-step-2-body > * {
  order: 0;
}
.wc-checkout .wc-step.is--open #wc-step-2-body > .wc-step--actions {
  order: 1;
}
.wc-checkout .wc-step.is--open #wc-step-2-body:after {
  order: 2;
}
.wc-checkout .wc-step.is--open #wc-step-2-body .free-shipping-container {
  order: 3;
  margin-top: 14px;
}
/* ==================================================== Schrittkopf auf dem Handy
 *
 * Neben "Angaben bearbeiten" blieb fuer die Ueberschrift so wenig Platz, dass
 * sie in drei Zeilen umbrach. Auf schmalen Schirmen steht der Hinweis deshalb
 * unter dem Titel.
 */
@media screen and (max-width: 47.9375em) {
  .wc-checkout .wc-step--head {
    flex-wrap: wrap;
  }
  .wc-checkout .wc-step--title {
    flex: 1 1 100%;
    order: 0;
  }
  .wc-checkout .wc-step--summary {
    flex: 1 1 auto;
    order: 1;
    margin: 2px 0 0;
    text-align: left;
  }
  .wc-checkout .wc-step--chevron {
    order: 2;
  }
}
/* Die Nummer sitzt auf dem Handy im Kasten - der Kopf braucht dafuer links
   Platz. Steht hier am Ende, damit es die allgemeine Innenabstandsregel
   sicher ueberschreibt. */
@media screen and (max-width: 47.9375em) {
  .wc-checkout .wc-step--head {
    padding-left: 46px;
  }
  .wc-checkout .wc-step--number {
    top: 16px;
    left: 16px;
    font-size: 19px;
  }
}
/* ==================================================== Die Unterschrift des Shops
 *
 * Karim nennt den gruenen Pinselstrich unter Ueberschriften "unsere
 * Unterschrift zu jedem einzelnen Wort" und vermisst ihn seit dem 06.09.
 * Bisher stand hier ein gerader Strich (text-decoration). Der Shop benutzt
 * dafuer ueberall dieselbe Zeichnung - genau die kommt jetzt auch hier zum
 * Einsatz.
 */
.wc-checkout .wc-step.is--open .wc-step--title {
  text-decoration: none;
}
.wc-checkout .wc-step--title,
.wc-checkout .wc-suggest--title,
.wc-checkout .wc-summary--title {
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
}
.wc-checkout .wc-step.is--open .wc-step--title:after,
.wc-checkout .wc-suggest--title:after,
.wc-checkout .wc-summary--title:after {
  content: "";
  position: absolute;
  /* Die Zeichnung sitzt in ihrer Flaeche etwas nach rechts versetzt - der
       Ausgleich hier laesst sie mittig unter dem Wort stehen. */
  left: -3%;
  right: 3%;
  bottom: 0;
  height: 11px;
  background: url("/media/vector/40/6a/93/brush.svg") no-repeat left bottom;
  background-size: 100% 100%;
  pointer-events: none;
}
/* Der Titel der Bestelluebersicht steht mittig - der Strich folgt ihm. */
.wc-checkout .wc-summary--title {
  display: block;
}
.wc-checkout .wc-summary--title:after {
  left: 12%;
  right: 12%;
}
/* ==================================================== Blasenmuster
 *
 * Der Kasten schnitt das Muster an seiner Kante mitten durch die Blasen
 * (Karim, 09.09., 11:43: "die sind hier abgecuttet"). Im uebrigen Shop laeuft
 * es ueber den Rand hinaus. Genau so steht es jetzt auch hier: der Kasten
 * schneidet nichts mehr ab, das Muster endet von selbst.
 */
.wc-checkout .wc-summary {
  overflow: visible;
}
.wc-checkout .wc-summary:after {
  right: -38px;
  width: 210px;
  border-radius: 0 15px 0 0;
}
/* Der Inhalt bleibt im Kasten - nur das Muster darf hinaus. */
.wc-checkout .wc-summary > * {
  position: relative;
  z-index: 1;
}
/* ==================================================== Meldungen im Bestellweg
 *
 * Die Meldungen einer fehlgeschlagenen Registrierung erscheinen im
 * Standardkasten von Shopware, nicht in unserem eigenen. Der Feinschliff vom
 * 08.09. lief deshalb ins Leere - Karim sah weiterhin das kraeftige Rot, das
 * er "ein bisschen sehr dramatisch" fand. Beide Kaesten sehen jetzt gleich
 * ruhig aus.
 */
.wc-checkout .alert.is--error,
.is--ctl-checkout .content--wrapper > .alert.is--error {
  margin: 0 0 18px;
  padding: 11px 14px;
  border: 1px solid rgba(231, 76, 60, 0.45);
  border-radius: 8px;
  background: rgba(231, 76, 60, 0.04);
  color: #2b2b2b;
  font-size: 14px;
}
.wc-checkout .alert.is--error .alert--icon,
.is--ctl-checkout .content--wrapper > .alert.is--error .alert--icon,
.wc-checkout .alert.is--error .icon--element,
.is--ctl-checkout .content--wrapper > .alert.is--error .icon--element {
  display: none;
}
.wc-checkout .alert.is--error .alert--content,
.is--ctl-checkout .content--wrapper > .alert.is--error .alert--content {
  padding-left: 0;
}
.wc-checkout .alert.is--error ul,
.is--ctl-checkout .content--wrapper > .alert.is--error ul {
  margin: 0;
  padding-left: 18px;
}
.wc-checkout .alert.is--error li + li,
.is--ctl-checkout .content--wrapper > .alert.is--error li + li {
  margin-top: 3px;
}
/* ==================================================== Pinselstrich unter dem Wort
 *
 * Die Ueberschrift war ein Block ueber die ganze Kopfbreite, das Wort selbst
 * aber deutlich schmaler. Der Strich richtete sich an der Box aus und ragte
 * weit ueber das Wortende hinaus (Karim, 11.09., 02:32: "die verzieht sich
 * hier irgendwie"). Jetzt ist die Box genau so breit wie das Wort - der Strich
 * sitzt darunter wie im uebrigen Shop.
 */
.wc-checkout .wc-step--title,
.wc-checkout .wc-suggest--title,
.wc-checkout .wc-summary--title {
  width: fit-content;
  max-width: 100%;
  flex: 0 1 auto;
}
/* "Angaben bearbeiten" und der Pfeil bleiben rechts, auch wenn der Titel schmal ist. */
.wc-checkout .wc-step--head .wc-step--summary {
  margin-left: auto;
}
.wc-checkout .wc-summary--title {
  margin-left: auto;
  margin-right: auto;
}
.wc-checkout .wc-step.is--open .wc-step--title:after,
.wc-checkout .wc-suggest--title:after,
.wc-checkout .wc-summary--title:after {
  left: -2%;
  right: -2%;
  /* Die Zeichnung des Shops haelt ihr Seitenverhaeltnis (29:1) und wurde in
       der flachen Box nur mittig eingepasst - links und rechts blieb ein
       Drittel leer, der Strich sass versetzt. Diese Kopie darf sich strecken
       und liegt deshalb genau unter dem Wort. */
  background-image: url("/themes/Frontend/KachouriGetraenke/frontend/_public/src/img/pinselstrich.svg");
  background-size: 100% 100%;
}
/* Der Pfeil zum Auf- und Zuklappen gehoert an den rechten Rand - auch dann,
   wenn der Titel nur so breit ist wie sein Wort. */
.wc-checkout .wc-step--head .wc-step--chevron {
  margin-left: auto;
}
.wc-checkout .wc-step--head .wc-step--summary + .wc-step--chevron {
  margin-left: 12px;
}
/* ==================================================== Blasenmuster ohne Kante
 *
 * Die Zeilen der Bestelluebersicht hatten jede fuer sich einen weissen Grund
 * und endeten knapp vor dem Rand. Dort brach das Muster an einer harten,
 * senkrechten Kante ab (Karim, 11.09., 03:01: "immer noch das Problem mit den
 * Bubbles"). Ueber den blauen Rahmen hinauszulaufen war auch keine Loesung.
 *
 * Jetzt: Die Zeilen sind durchsichtig, das Muster bleibt im Kasten und laeuft
 * nach links weich aus, bevor es den Text erreicht - wie im alten Shop.
 */
.wc-checkout .wc-summary {
  overflow: hidden;
}
.wc-checkout .wc-summary *:not(.quantity-holder):not(.quantity-holder *):not(button):not(input) {
  background-color: transparent;
}
.wc-checkout .wc-summary:after {
  right: 0;
  width: 190px;
  opacity: 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000000 38%);
  mask-image: linear-gradient(to right, transparent 0%, #000000 38%);
}
/* ==================================================== Meldung sichtbar, nicht schrill
 *
 * Am 08.09. wirkte der rote Kasten "ein bisschen sehr dramatisch", jetzt war
 * er so zurueckhaltend, dass man ihn uebersah (Karim, 11.09., 06:11:
 * "vielleicht waer's besser, wenn diese Bemerkung in Rot ist"). Der Kasten
 * bleibt ruhig, die Schrift wird rot - so faellt die Meldung auf, ohne zu
 * schreien.
 */
.wc-checkout .alert.is--error,
.wc-checkout .wc-hinweis {
  color: #df2e1b;
  border-color: rgba(231, 76, 60, 0.55);
  font-weight: 500;
}
/* Das Hinweisband ist jetzt ausfuehrlicher und bricht um - der Knopf soll
   dabei nicht an den Rand gedrueckt werden. */
.wc-testhinweis {
  flex-wrap: wrap;
  gap: 8px 12px;
  text-align: center;
  line-height: 1.45;
}
.wc-testhinweis--text {
  flex: 1 1 420px;
  max-width: 760px;
}
/* ============ Linie unter "Bestellübersicht" ===========================
 * Dort lagen zwei Linien uebereinander: die feine graue Randlinie des
 * Themes und der Pinselstrich (Karim, 15.09., 15:55). Die graue faellt
 * weg. Der Strich wird blau wie die Ueberschrift und der Rahmen des
 * Kastens und etwas kraeftiger, damit er nicht so duenn wirkt.
 * ====================================================================== */
.wc-checkout .wc-summary--title {
  padding-bottom: 14px;
  border-bottom: 0;
}
.wc-checkout .wc-summary--title:after {
  height: 14px;
  background-image: url("/themes/Frontend/KachouriGetraenke/frontend/_public/src/img/pinselstrich-blau.svg");
}
/* ============ Hinweis bei Zahlung auf Rechnung ========================
 * "Vielleicht kann man das nur 'n bisschen deutlicher darstellen, unten
 * drunter in Schwarz, dass es auch wirklich gesehen wird" (Karim,
 * 15.09., 21:13). Grau war zu leise fuer einen Hinweis, der eine
 * Bedingung nennt.
 * ====================================================================== */
.wc-checkout .wc-rechnung--hinweis {
  font-size: 14px;
  font-weight: 500;
  color: #2b2b2b;
}
/* ============ Pinselstrich unter den Schritt-Ueberschriften ============
 * "Falls du die 'n bisschen duenner hinbekommst, mach" (Karim, 15.09.,
 * 18:44). Von 11 auf 9 Pixel - sichtbar bleibt sie, sie draengt sich
 * aber nicht mehr vor. Die Regel muss den offenen Schritt mitnehmen,
 * sonst gewinnt dessen eigene Angabe.
 * ====================================================================== */
.wc-checkout .wc-step--title:after,
.wc-checkout .wc-step.is--open .wc-step--title:after {
  height: 9px;
}
/* ============ Lieferzeitraum: Datum und Uhrzeit ========================
 * "Das muss noch weiss. Siehst du, die sind beide weiss, die Felder.
 * Plus der Abstand fehlt hier noch" (Karim, 15.09., 17:01).
 * Das Datumsfeld war weiss, das Ersatz-Bedienelement der Uhrzeit grau -
 * und beide Kaesten standen ohne Luft nebeneinander.
 * ====================================================================== */
.wc-checkout [data-wc-lieferung] .nice-select,
.wc-checkout [data-wc-lieferung] .nice-select .list {
  background-color: #fff;
}
.wc-checkout [data-wc-lieferung] .dtgs-deliverydate--box + .dtgs-deliverydate--box {
  margin-left: 14px;
}
/* ============ Abschluss der Schritte: eine Linie statt zwei ============
 * Unter dem Weiter-Knopf lagen zwei Trenner uebereinander: der gruene
 * Strich und darunter die graue Haarlinie des Kostenfrei-Kastens. Der
 * gruene Strich endete ausserdem vor dem Rand, weil die Zeichnung ihr
 * Seitenverhaeltnis behielt. Jetzt laeuft er durch und ist kraeftiger
 * (Karim, 15.09., 15:55 - im Video an der Stelle unter dem Knopf).
 * ====================================================================== */
.wc-checkout .wc-step--body:after {
  height: 14px;
  background-image: url("/themes/Frontend/KachouriGetraenke/frontend/_public/src/img/pinselstrich.svg");
  background-position: center bottom;
  background-size: 100% 100%;
  opacity: 1;
}
.wc-checkout .wc-step--body .free-shipping-container {
  border-top: 0;
}
/* Ist die kostenfreie Lieferung erreicht, erklaert das Info-Zeichen nichts
   mehr - es faellt weg (Karim, 15.09., 16:21: "das i ist nicht mehr
   relevant"). Solange noch Kisten fehlen, bleibt es stehen. */
.wc-checkout .free-shipping-container h2.primary .has--info-icon-primary:after {
  content: none;
}
.wc-checkout .free-shipping-container h2.primary .has--info-icon-primary {
  cursor: default;
}
/* ======================================================================
 * Feinschliff aus dem Video vom 25.09.
 * ====================================================================== */
/* Die Linie unter dem Knopf war "brutal fett" (10:14) und soll wieder blau
   sein - sie steht im blauen Bereich und passt dort besser (03:50). */
/* Die Linie unter dem Knopf bleibt gruen - blau war falsch
   (Karim, 28.09., 07:43: "die Linie ist einfach nur statt gruen blau"). */
.wc-checkout .wc-step--body:after {
  height: 11px;
  background-image: url("/themes/Frontend/KachouriGetraenke/frontend/_public/src/img/pinselstrich.svg");
}
/* "Kostenfreie Lieferung" einen Ticken groesser (07:32). Der Text steht im
   Feld mit dem Info-Zeichen, nicht in der Ueberschrift selbst. */
.wc-checkout .wc-step--body .free-shipping-container h2 {
  font-size: 21px;
}
.wc-checkout .wc-step--body .free-shipping-container .has--info-icon-primary {
  font-size: 15px;
}
.wc-checkout .wc-step--body .free-shipping-container h2.primary .has--info-icon-primary {
  font-size: 19px;
  color: #2b2b2b;
}
/* Die Zeichen der Zahlarten waren immer noch zu klein (11:15). Eine feste
   Hoehe statt einer Obergrenze - die Grafiken sind kleiner angelegt und
   wuerden sonst nicht mitwachsen. */
.wc-checkout .wc-zahlart--zeichen {
  height: 34px;
  max-height: none;
  width: auto;
}
/* Girocard und Lastschrift liegen als Bild vor und sind jetzt eng
   beschnitten. Die Spalte war nur 46 Pixel breit, dadurch blieben die beiden
   Zeichen winzig - sie bekommt etwas mehr Platz. */
.wc-checkout .payment--method .payment--method-logo {
  flex: 0 0 72px;
  max-width: 72px;
}
.wc-checkout .payment--method-logo img {
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
}
/* Die Kartenzeichen liegen jeweils auf einer weissen Karte mit Rundung, die
   Platz frisst. Solange es sie nur so gibt, hilft mehr Hoehe. */
.wc-checkout .wc-payment--cards img {
  height: 30px;
}
/* ======================================================================
 * Nacharbeit aus dem Video vom 28.09.
 * ====================================================================== */
/* In der Bestelluebersicht lag ueber dem Kistenzaehler eine gruene Linie,
   ueber den Summen eine helle - "einmal grau, einmal gruen" (05:30). Jetzt
   beide gleich. */
.wc-checkout .wc-summary .free-shipping-container {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
/* Der Hinweis zur umweltfreundlichen Lieferung ist kein Schalter mehr, nur
   noch das "i" daneben. */
.wc-checkout .wc-tag--schalter {
  cursor: default;
}
.wc-checkout .wc-tag--schalter .wc-tag--text {
  text-decoration: none;
}
.wc-checkout .wc-tag--schalter:hover .wc-tag--text,
.wc-checkout .wc-tag--schalter:focus-visible .wc-tag--text {
  text-decoration: none;
}
.wc-checkout .wc-tag--info-schalter {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.wc-checkout .wc-tag--info-schalter:focus-visible {
  outline: 2px solid rgba(72, 162, 231, 0.55);
  outline-offset: 2px;
  border-radius: 50%;
}
/* Postleitzahl und Ort des Mandats stehen nebeneinander, wie in der
   Rechnungsadresse. */
.wc-checkout .wc-sepa--ort {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 6px;
}
.wc-checkout .wc-sepa--ort p {
  margin: 0;
}
/* Hinweis, wenn die Bankverbindung unvollstaendig war. */
.wc-checkout .wc-hinweis-zahlung {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 3px solid #48a2e7;
  background: #f1f1f1;
  font-size: 14px;
  line-height: 20px;
  color: #2b2b2b;
}
/* Steht der eigene Hinweis zur Bankverbindung da, braucht es die allgemeine
   rote Meldung von Shopware nicht mehr daneben - sie sagt dasselbe, nur
   unverstaendlicher. */
.wc-checkout--steps.wc-checkout--zahlhinweis > .alert.is--error {
  display: none;
}
/* ======================================================================
 * Abschlusstest vom 30.09.
 * ====================================================================== */
/* Die Kopfzeile schloss mit einer kraeftigen blauen Linie ab. Sie stammt
   nicht vom Rand, sondern von einem eigenen Streifen darunter - deshalb war
   sie nach der letzten Aenderung noch da. Jetzt derselbe feine graue Strich
   wie bei den uebrigen Trennern (Karim, 30.09., 00:34: "die einfach grau,
   so wie du die anderen jetzt auch hinterlegt hast"). */
.wc-header {
  border-bottom: 0;
}
header.wc-header:after {
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
}
@media screen and (max-width: 47.9375em) {
  /* Die drei Punkte unter der Bestelluebersicht standen auf unterschiedlicher
       Hoehe, weil die Zeichen verschieden hoch sind. Mit gleicher Zeichenhoehe
       und oben buendigen Spalten stehen sie sauber nebeneinander
       (Karim, 30.09., 03:39: "vielleicht halt nur zentrieren"). */
  .wc-checkout .wc-trust {
    align-items: flex-start;
  }
  .wc-checkout .wc-trust .wc-trust--icon {
    height: 34px;
  }
  .wc-checkout .wc-trust .wc-trust--icon img {
    height: 100%;
    width: auto;
  }
}
/* Im Schritt "Bezahlung" gehoert der Kistenzaehler nicht mehr hin - im Entwurf
   steht er nur beim Lieferzeitraum (Karim, 30.09., 04:41: "bei Bezahlungen
   soll er das gar nicht mehr zeigen"). */
.wc-checkout--steps:has(#wc-step-3.is--open) ~ .wc-checkout--summary .free-shipping-container,
.wc-checkout--inner:has(#wc-step-3.is--open) .wc-summary .free-shipping-container {
  display: none;
}
/**
 * Bilddarstellung der Verleihartikel.
 *
 * Getraenkeflaschen sind hochformatig fotografiert und fuellen die Bildflaeche
 * aus. Verleihartikel wie Anhaenger, Theken oder Chafing Dishes sind quer oder
 * quadratisch aufgenommen und bleiben dadurch klein.
 *
 * Auf dem Handy kommt in der Listenansicht ein zweites Problem dazu: Shopware
 * gibt der Bildspalte dort nur 2,8125rem, also 45 Pixel. Erst ab 480 Pixel
 * Bildschirmbreite werden daraus 180. Deshalb sind die Bilder auf dem Handy
 * kaum zu erkennen.
 *
 * Nur die Verleihartikel sind betroffen, alle anderen Kategorien bleiben
 * unveraendert.
 */
.is--verleihartikel .product--box .product--image .image--element,
.is--verleihartikel .product--box .product--image .image--media {
  height: 100%;
}
.is--verleihartikel .product--box .product--image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media screen and (max-width: 29.9375em) {
  .is--verleihartikel .box--list .product--image {
    width: 7.5rem;
  }
  .is--verleihartikel .box--list .product--info {
    padding-left: 8.75rem;
  }
}
@media screen and (max-width: 47.9375em) {
  .is--verleihartikel .product--box:not(.box--list) .product--image {
    height: 17rem;
  }
}
@media screen and (min-width: 48em) and (max-width: 63.9375em) {
  .is--verleihartikel .product--box:not(.box--list) .product--image {
    height: 13rem;
  }
}
/*
All.less
======================================
The `all.less` file imports all style components that will display on the page.

It includes the plugins `normalize` and `pocketgrid`, the open-sans fontface and the specific less files.
*/
a,
button {
  transition: 0.2s;
}
a i,
button i {
  transition: 0.2s;
  opacity: 0.8;
}
a:hover > i,
button:hover > i {
  opacity: 1;
}
/*
Modules
==================================================
The `modules.less` file contains the imports to all module elements of Shopware.

Mixin specific documentation can be found inside each mixin file.
*/
body {
  overflow-x: hidden;
}
.js--overlay.is--closable {
  z-index: 6999;
}
nav.navigation-main.main-nav-scrolled {
  position: fixed;
  z-index: 6999;
  top: 0px;
  margin-top: 0px;
  width: 100%;
}
nav.shop--navigation.main-nav-scrolled {
  width: 100%;
  background: #48a2e7;
  border-bottom: 3px solid #f8f8f8;
  box-shadow: 0px 5px 0px 0px #48a2e7;
  padding-right: 0.5rem;
  position: fixed;
  z-index: 7998;
  top: 0px;
  right: 0;
  margin-top: 0px;
}
nav.shop--navigation.main-nav-scrolled .navigation--entry.entry--menu-left {
  top: 0.5rem;
  left: 0.5rem;
}
nav.shop--navigation.main-nav-scrolled .navigation--entry.entry--menu-left .entry--link {
  padding-left: 2.25rem;
  color: #000000;
}
nav.shop--navigation.main-nav-scrolled ul {
  padding: 0.45rem 0;
}
nav.shop--navigation.main-nav-scrolled .main-search--results {
  top: 7.5rem;
}
@media screen and (min-width: 48em) {
  .header-main .logo-main .logo--shop .logo--link {
    height: 5.125rem;
    padding: 5px 0;
    padding-left: 8px;
    width: unset;
    margin-top: unset;
  }
  .header-main .logo--main .logo--shop {
    padding: 0;
    padding-bottom: 2rem;
    padding-top: 2rem;
  }
}
.header-main {
  background: #f2f2f2;
  border-bottom: 4px solid #96c126;
}
.header-main .logo-main {
  width: auto;
  float: left;
  padding: 0.3rem;
}
.header-main .logo-main .logo--shop {
  display: flex;
  align-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 100%;
  padding: 0rem;
  padding-right: 1.5rem;
}
.header-main .logo-main .logo--shop span {
  display: none;
  padding-left: 1em;
  font-weight: 200;
}
.header-main .logo-main .logo--link {
  height: unset;
  padding: 0;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}
.header-main .logo-main .logo--link img {
  margin: auto;
  max-height: 60px;
}
@media screen and (max-width: 48em) {
  .header-main .logo-main .logo--link img {
    max-height: 40px;
  }
}
.header-main .header--navigation .shop--navigation {
  width: auto;
  float: right;
  margin-top: 0.6875rem;
}
.header-main .header--navigation .shop--navigation .navigation--entry.entry--menu-left {
  position: static;
  font-weight: unset;
}
.header-main .header--navigation .shop--navigation .navigation--entry.entry--search {
  width: unset !important;
  left: unset !important;
  padding-left: 0;
  background: none !important;
}
.header-main .header--navigation .shop--navigation .navigation--entry.zip {
  display: none;
}
.header-main .header--navigation .shop--navigation .navigation--entry.zip img {
  display: none !important;
}
.header-main .header--navigation .shop--navigation .navigation--entry.entry--contact {
  padding-right: 0;
}
.header-main .header--navigation .shop--navigation .entry--menu-left .btn {
  padding-left: 2.25rem;
}
.header-main .header--navigation .shop--navigation .entry--menu-left.entry--contact {
  padding-right: 0;
}
.header-main .header--navigation .shop--navigation .entry--menu-left .btn {
  padding-left: 2.25rem;
}
.js--overlay.is--closable {
  z-index: 9997;
}
.main-search--form {
  background-color: #f2f2f2;
}
.main-search--form::before {
  content: "\e827";
  font-family: "emz-icons";
  position: absolute;
  right: 0.5rem;
  color: #000;
  width: 3rem;
  z-index: 100;
  font-weight: 600;
  font-size: 1.5rem;
}
.main-search--form .main-search--field {
  width: 100%;
  font-weight: 300;
}
@media screen and (min-width: 48em) {
  .header-main .logo-main .logo--link img {
    max-height: 100%;
  }
}
@media screen and (min-width: 64em) {
  .header-main {
    border-bottom: 1px solid #48a2e7;
  }
  .header-main .logo-main {
    padding: 0.625rem 0.625rem 0.625rem 0.625rem;
    width: unset;
    float: left;
  }
  .header-main .logo-main .logo--link {
    height: 4.125rem;
    padding: 5px 0;
    padding-left: 26px;
    width: unset;
  }
  .header-main .logo-main .logo--link img {
    margin: unset;
  }
  .header-main .header--navigation .shop--navigation {
    margin-top: unset;
    width: auto;
    float: right;
    padding-top: 1rem;
  }
  .header-main .header--navigation .shop--navigation .navigation--entry.zip {
    display: block !important;
  }
  .header-main .header--navigation .shop--navigation .navigation--entry.entry--contact {
    padding: 0 40px;
  }
  .header-main .header--navigation .shop--navigation .navigation--entry.entry--search {
    padding-left: 25px;
  }
  .js--overlay.is--closable {
    z-index: 99998;
  }
  .main-search--form .main-search--field {
    width: 13.125rem;
  }
}
@media screen and (min-width: 1716px) {
  .header-main .header--navigation .shop--navigation {
    width: 45%;
  }
  .header-main .header--navigation .shop--navigation .navigation--entry.zip img {
    display: block !important;
  }
}
@media screen and (min-width: 1684px) {
  .header-main .header--navigation .shop--navigation .navigation--entry.zip img {
    display: block !important;
  }
}
.shop--navigation .navigation--entry {
  margin-right: 0rem;
}
.shop--navigation .navigation--entry .btn:not(.is--primary) {
  background: #f2f2f2;
}
.shop--navigation .navigation--entry .btn:not(.is--primary):hover i {
  text-shadow: 0 0 3px #48a2e7;
}
.shop--navigation .entry--account,
.shop--navigation .entry--cart,
.shop--navigation .entry--contact,
.shop--navigation .entry--search {
  margin: 0 !important;
}
.header--navigation .navigation--list .navigation--entry > a {
  border: none;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0;
}
.header--navigation .navigation--list .navigation--entry > a i {
  font-weight: 600 !important;
  text-shadow: none !important;
  font-size: 1.75rem !important;
}
.navigation--list .entry--cart .cart--link .cart--amount {
  color: #000000;
}
.navigation--list .entry--account .icon--account {
  left: 0rem;
  display: unset;
  position: unset;
  top: unset;
}
.navigation--list .entry--cart {
  margin-right: 0.3125rem;
}
.navigation--list .entry--cart .icon--basket {
  left: 0rem;
  display: unset;
  position: unset;
  top: unset;
}
.navigation--list .entry--contact .contact--display {
  display: none;
}
.navigation--list .entry--contact .flyout_outer {
  position: fixed;
  top: -10px;
  right: -310px;
  z-index: 999999;
  width: 300px;
  height: 250px;
  transition: right 1s ease-in-out;
}
.navigation--list .entry--contact .flyout_contact {
  position: absolute;
  top: -10px;
  right: 0;
  z-index: 999999;
  width: 300px;
  height: 250px;
  padding: 0 1em;
  overflow: hidden;
  color: #ffffff;
  cursor: default;
  background: #96c126;
  border: 1px solid #648119;
  border-bottom-left-radius: 1em;
}
.navigation--list .entry--contact .flyout_contact h2 {
  color: #ffffff;
}
.navigation--list .entry--contact .flyout_contact a {
  color: #ffffff;
  cursor: pointer;
}
.navigation--list .entry--contact .flyout_contact a:hover {
  color: #000000 !important;
}
.navigation--list .entry--contact .contact-custom {
  overflow: hidden;
}
.navigation--list .entry--contact .contact-custom:hover .flyout_outer {
  right: -11px;
}
.navigation--list .icon--phone {
  font-size: 1.3125rem;
  display: inline;
  position: relative;
  vertical-align: middle;
  top: 0;
  left: 0;
}
.account--dropdown-navigation .account--menu {
  background: #f8f8f8;
}
.account--dropdown-navigation .account--menu::after {
  background: #f8f8f8;
}
.account--dropdown-navigation .navigation--register {
  color: #000000;
}
.account--dropdown-navigation .navigation--register a {
  color: #000000;
}
.account--dropdown-navigation .navigation--register a:hover {
  color: #48a2e7;
}
.sidebar--navigation .navigation--link {
  color: #000 !important;
}
.sidebar--navigation .navigation--link:hover {
  color: #48a2e7 !important;
}
.account--menu-container .sidebar--navigation .navigation--entry {
  border-bottom: 0;
}
.results--list .entry--name,
.results--list .entry--price,
.results--list .entry--all-results-number {
  color: #000000;
}
.results--list .entry--name:hover,
.results--list .entry--price:hover,
.results--list .entry--all-results-number:hover {
  color: #648119;
}
.results--list .is--active,
.results--list .list--entry:hover,
.list--entry:hover {
  color: #648119;
}
.results--list .is--active .entry--name,
.results--list .list--entry:hover .entry--name,
.list--entry:hover .entry--name,
.results--list .is--active .entry--price,
.results--list .list--entry:hover .entry--price,
.list--entry:hover .entry--price {
  color: #648119;
}
@media screen and (min-width: 64em) {
  .header-main .logo-main {
    width: auto;
  }
  .header-main .logo-main .logo--shop span {
    display: unset;
  }
  .header-main .shop--navigation {
    width: 45%;
  }
  .navigation--list .entry--cart .cart--link {
    padding-left: 0.375rem;
  }
  .navigation--list .entry--contact .icon--phone {
    display: inline;
  }
  .navigation--list .entry--contact .contact--display {
    display: none;
  }
  .shop--navigation .main-search--results {
    transform: translate(-50%, 0);
  }
}
@media screen and (min-width: 48em) {
  .shop--navigation .main-search--results {
    transform: translate(-50%, 0);
  }
  nav.navigation-main.main-nav-scrolled {
    width: 70%;
    height: 60px;
    box-shadow: unset;
  }
  nav.shop--navigation.main-nav-scrolled {
    width: 30%;
    height: 60px;
    background: #48a2e7;
    border-bottom: 3px solid #f8f8f8;
    box-shadow: unset;
  }
  .content-main {
    padding-top: 40px !important;
  }
}
@media screen and (min-width: 1350px) {
  .shop--navigation .entry--menu-left {
    display: none;
  }
  .header--container .header-main .header--navigation .logo-main .logo--shop span {
    display: block;
  }
}
.navigation--entry.entry--search {
  position: relative !important;
}
.shop--navigation .main-search--results {
  transform: none !important;
}
.main-search--form .form--ajax-loader {
  display: none !important;
}
@media screen and (min-width: 48em) {
  .content-main {
    padding-top: 85px !important;
  }
}
@media screen and (min-width: 64em) {
  .content-main {
    padding-top: 130px !important;
  }
  nav.navigation-main.main-nav-scrolled {
    width: 80%;
  }
  nav.shop--navigation.main-nav-scrolled {
    width: 20%;
  }
}
@media screen and (min-width: 78.75em) {
  nav.navigation-main.main-nav-scrolled {
    width: 85%;
    box-shadow: 0px 5px 0px 0px #48a2e7;
  }
  nav.shop--navigation.main-nav-scrolled {
    width: 15%;
    box-shadow: 0px 5px 0px 0px #48a2e7;
  }
}
.header--navigation .shop--navigation {
  height: 50px;
  padding: 0 !important;
}
.header--navigation .shop--navigation > .navigation--list {
  height: 50px;
}
.header--navigation .shop--navigation > .navigation--list .navigation--entry {
  line-height: 50px;
}
.main-nav-scrolled .shop--navigation {
  height: unset;
}
.main-nav-scrolled .shop--navigation .navigation--entry {
  line-height: normal;
}
.main-nav-scrolled .shop--navigation > .navigation--list {
  height: unset;
  padding-top: 11px !important;
}
@media screen and (min-width: 30em) {
  .has--cssanimations .form--ajax-loader {
    top: 1rem !important;
    right: 0.8125rem !important;
  }
}
.main-nav-scrolled .entry--search {
  display: none;
}
.main-nav-scrolled .zip {
  display: none;
}
@media screen and (max-width: 30em) {
  .entry--search .main-search--form {
    width: 100%;
  }
  .entry--search .main-search--form::before {
    right: 1rem;
  }
}
.navigation--smartphone .entry--close-off-canvas .navigation--link,
#cookie-consent .cookie-consent--header,
#cookie-consent .cookie-consent--header {
  color: #fbfbfb !important;
}
#selected-zip {
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 700;
}
#selected-zip:hover {
  color: #96c126;
}
.navigation--entry.zip,
.navigation--entry.entry--search {
  position: static;
  height: 50px;
}
.navigation--entry.zip {
  float: left;
}
.navigation--entry.zip .icon--location {
  color: #96c126;
  font-size: 1rem;
  position: relative;
  top: 2px;
}
.logo--shop span > a {
  font-weight: 600;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  border-right: 1px solid #96c126;
  font-size: 0.9rem;
  position: relative;
}
.logo--shop span > a:is(:last-child) {
  border-right: none;
}
.logo--shop span > a::after {
  content: "";
  position: absolute;
  top: 1.5rem;
  height: 2rem;
  width: 100%;
  background: url(/media/image/9f/52/50/Brush_1_.png);
  left: 0;
  background-repeat: no-repeat;
  background-size: 90% 0.25rem;
  background-position-x: center;
}
.logo--shop span > a:hover {
  color: #96c126;
}
.shop--navigation > .navigation--list {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}
.header--container {
  width: 100vw;
  z-index: 9998;
  position: fixed;
  top: 0;
}
.header--container::after {
  content: "";
  background: url(/media/image/96/32/25/Mobile_Linie2x_2.png);
  position: absolute;
  left: 0;
  right: 0;
  height: 0.4rem;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: -6px;
}
@media screen and (min-width: 30em) {
  .header--container::after {
    content: none;
  }
}
.header-main {
  border-bottom: 0;
  padding: 0;
}
.is--ctl-checkout .header--navigation .logo--shop span {
  display: none !important;
}
#one-page-checkout .register--personal-data,
#one-page-checkout .register--shipment-and-payment,
#one-page-checkout .register--overview {
  min-height: 20rem;
}
@media screen and (min-width: 78.75em) {
  #one-page-checkout .register--overview {
    position: fixed;
    width: 24% !important;
  }
}
#one-page-checkout .register--zip-city > input {
  margin-right: 0.25rem;
}
#one-page-checkout .register--zip-city .adress-level2 {
  width: 68%;
}
#one-page-checkout .payment--method-headline {
  padding-bottom: 0.4rem !important;
}
#one-page-checkout .register--login-flex {
  display: flex;
  gap: 0.5rem;
}
#one-page-checkout .register--login-email {
  margin-right: 0.5rem;
}
#one-page-checkout #opc-register .register--privacy input {
  position: relative !important;
  top: 5px;
  margin-right: 0.3rem;
}
#one-page-checkout #opc-register > .panel--body.is--wide {
  display: flex;
  flex-wrap: wrap;
}
#one-page-checkout #opc-register > .panel--body.is--wide .register--customertype {
  width: 29.5%;
}
#one-page-checkout #opc-register > .panel--body.is--wide .register--salutation {
  width: 29.5%;
  max-width: none;
  margin-right: 10rem !important;
}
#one-page-checkout #opc-register > .panel--body.is--wide .register--firstname {
  width: 29.5%;
}
#one-page-checkout #opc-register > .panel--body.is--wide .register--firstname .register--field.is--required {
  padding: 0.7rem;
}
#one-page-checkout #opc-register > .panel--body.is--wide .register--lastname {
  width: 29.5%;
  max-width: none;
  margin-right: 0.9rem;
}
#one-page-checkout #opc-register > .panel--body.is--wide .register--lastname input {
  width: 100%;
}
#one-page-checkout #opc-register > .panel--body.is--wide .register--email {
  width: 29.5%;
  max-width: none;
  margin-right: 1rem;
}
#one-page-checkout #opc-register > .panel--body.is--wide .register--email .register--field {
  width: 100%;
}
#one-page-checkout #opc-register > .panel--body.is--wide .register--account-information {
  width: 29.5%;
}
#one-page-checkout #opc-register > .panel--body.is--wide .register--password-description {
  font-size: 0.7rem;
}
#one-page-checkout #opc-register > .panel--body.is--wide .register--password-description .opc--spacer {
  height: 0;
}
#one-page-checkout #opc-register > .panel--body.is--wide .register--phone {
  width: 29.5%;
}
#one-page-checkout #opc-register > .panel--body.is--wide .register--phone input {
  width: 100%;
}
#one-page-checkout .register--personal-data {
  min-height: 16rem;
}
#one-page-checkout .register--personal-data .select-field {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 0.5rem;
}
#one-page-checkout .register--personal-data input,
#one-page-checkout .register--personal-data select {
  background: #fff;
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 0.5rem;
}
#one-page-checkout .register--personal-data input::placeholder,
#one-page-checkout .register--personal-data select::placeholder {
  color: rgba(0, 0, 0, 0.7);
}
#one-page-checkout .form-padding-bottom {
  padding-bottom: 0.325rem;
}
.is--target-checkout.is--minimal-header .header--container {
  position: static;
}
.is--target-checkout.is--minimal-header .content-main {
  padding-top: 0 !important;
}
.is--target-checkout.is--minimal-header .btn--back-top-shop {
  margin-right: 35px;
}
@media screen and (min-width: 48em) {
  .header-main .header--navigation {
    padding: 0.3rem 0rem 0.3rem 0rem;
  }
  .header-main .logo-main img {
    padding: 4px 0px;
  }
}
.navigation--register {
  display: none;
}
.action--filter-btn {
  width: 10.5rem !important;
}
.is--target-checkout.is--minimal-header .header-main .logo-main .logo--shop span {
  display: none;
}
@media screen and (min-width: 64em) {
  .header-main .logo-main .logo--shop span {
    display: none;
  }
}
@media screen and (min-width: 48em) {
  .header-main .logo-main .logo--shop {
    padding: 0;
    padding-bottom: 2rem;
    padding-top: 2rem;
  }
}
hr {
  box-sizing: content-box;
  height: 0;
  box-shadow: none;
  background: #fff;
  border: 0.2px solid #fff;
}
.flyout_contact a:hover {
  color: #fff !important;
}
.flyout_contact p i {
  font-size: 1.25rem !important;
  margin-right: 0.25em;
  font-weight: 500;
}
.shop--navigation {
  margin-top: 0 !important;
  position: initial;
}
@media screen and (min-width: 30em) {
  .shop--navigation {
    margin-right: 1rem;
  }
}
@media screen and (min-width: 48em) {
  .shop--navigation {
    margin-right: 2rem;
  }
}
.entry--search.is--active .main-search--form {
  top: 4.125rem;
  background: transparent;
  left: 0px;
  display: block;
  position: absolute;
}
@media screen and (min-width: 30em) {
  .entry--search .main-search--form .main-search--field {
    background: #fff;
    border-radius: 3rem;
    padding-left: 1rem;
  }
}
@media screen and (min-width: 64em) {
  .header-main .header--navigation .shop--navigation .navigation--entry.entry--contact {
    padding: 0px 0px;
  }
  .entry--contact .contact-custom .contact--display {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
.entry--contact {
  display: none !important;
}
@media screen and (min-width: 1470px) {
  .entry--contact {
    display: block !important;
  }
  nav.navigation-main.main-nav-scrolled {
    width: 100%;
  }
  nav.shop--navigation.main-nav-scrolled {
    width: auto;
    background: unset;
    border-bottom: unset;
    box-shadow: unset;
    z-index: 7999;
  }
  .entry--contact .contact-custom {
    background: #96c126 !important;
    border-radius: 2.5rem;
  }
  .entry--contact .contact-custom .contact--display {
    display: block;
    color: #fff;
    line-height: 2.3rem;
  }
  .entry--contact:hover .contact-custom {
    background: #648119 !important;
  }
}
.main-search--form {
  width: 11.5rem;
}
@media screen and (min-width: 48em) {
  .main-search--form {
    width: auto;
  }
}
.header-main .logo-main {
  width: 7.5rem;
}
@media screen and (min-width: 48em) {
  .header-main .logo-main {
    width: auto;
  }
}
.header-main .logo-main .logo--shop {
  padding-right: 0rem;
}
@media screen and (min-width: 48em) {
  .header-main .logo-main .logo--shop {
    padding-right: 1.5rem;
  }
}
.navigation--entry.entry--account a {
  padding-right: 0.5rem !important;
}
.navigation--entry.entry--cart a {
  padding-left: 0.5rem !important;
}
.header-main .header--navigation {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 48em) {
  .header-main .header--navigation {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
}
.header-main .header--navigation .logo-main {
  width: inherit !important;
}
.header-main .header--navigation .shop--navigation {
  width: inherit !important;
  flex: auto !important;
}
.header-main .header--navigation > .navigation--entry {
  width: fit-content;
  padding: 0;
  margin: 0;
  height: 1.5rem;
  padding-bottom: 2rem;
}
@media screen and (min-width: 48em) {
  .header-main .header--navigation > .navigation--entry {
    display: none !important;
  }
}
.header-main .header--navigation > .navigation--entry > a {
  height: 100%;
  border: none;
  background: none;
}
.header-main .header--navigation > .navigation--entry > a > i {
  font-weight: 600 !important;
  text-shadow: none !important;
  font-size: 1.75rem !important;
  color: #96c126;
}
.footer-main {
  border-top: 0;
  background: #f2f2f2;
}
.footer-main .footer--column {
  padding: 0;
}
.footer-main .footer--column .logo--link {
  display: block;
  text-align: center;
}
.footer-main .footer--column .logo--link img {
  width: 50%;
  display: inline-block;
}
.footer-main .footer--column .subtitle {
  color: #000000;
  padding: 1em;
  padding-left: 1rem;
  margin-bottom: 0;
}
@media screen and (max-width: 30em) {
  .footer-main .footer--column .subtitle {
    text-align: center !important;
  }
}
.footer-main .footer--column.column--logo {
  border: 0;
  margin-top: 1rem;
}
.footer-main .footer--column.column--logo .review--link {
  display: flex;
  align-items: center;
  width: 90%;
  max-width: 450px;
  padding: 10px 5px;
  border: 1px solid #96c126;
  border-radius: 0.5em;
  margin-bottom: 15px;
  margin-left: 1rem;
}
.footer-main .footer--column.column--logo .review--link img {
  height: 75px;
}
.footer-main .footer--column.column--logo .review--link p {
  margin: 0;
  padding: 0;
}
.footer-main .footer--column.is--last {
  border: 0;
}
.footer-main .footer--column:last-child:not(.column--map) {
  border-bottom: 1px solid #96c126;
}
.footer-main .footer--column.column--map {
  display: none;
}
.footer-main .column--headline {
  overflow: hidden;
  height: auto;
  color: #ffffff;
  background: #96c126;
  cursor: default;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.3em;
  padding: 0.5em 1em;
}
@media screen and (max-width: 30em) {
  .footer-main .column--headline {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
  }
}
.footer-main .column--headline::after {
  color: #fff;
}
.footer-main .column--navigation {
  background: #f2f2f2;
  color: #000000;
  padding: 0.5em 2em;
}
.footer-main .column--navigation .navigation--link {
  font-size: 1em;
  font-weight: normal;
  color: #000000;
}
.footer-main .navigation--link {
  color: #000000;
}
.footer-main .navigation--link:hover {
  color: #96c126;
}
.footer-main .footer-main .footer--bottom {
  font-size: 0.75rem;
  padding: 1.33333333rem 0rem 0rem 0rem;
  text-align: center;
  margin: 0;
}
.footer-main .footer--bottom .footer--copyright {
  max-width: 1800px;
  margin: 0 auto;
  position: relative;
  color: #000000;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  padding-bottom: 1em;
  padding-top: 1em;
  padding-left: 1rem;
  padding-right: 1rem;
}
.footer-main .footer--bottom .footer--copyright .footer--terms {
  display: block;
  top: 1em;
  right: 0;
}
.footer-main .column--hotline {
  background: #96c126;
  overflow: hidden;
}
.footer-main .column--hotline .column--content {
  padding-top: 10px;
  background: #648119;
}
.footer-main .column--hotline .column--content .footer--phone-link,
.footer-main .column--hotline .column--content .footer--mail-link {
  margin: 2rem 0rem 0rem 2rem;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.3em;
  color: #ffffff;
}
.footer-main .column--hotline .column--content .column--opentime,
.footer-main .column--hotline .column--content .column--pin {
  color: #fff;
  margin: 2rem 0rem 0rem 2rem;
  margin-top: 10px;
  font-size: 20px;
}
.footer-main .column--hotline .column--content .column--opentime .icon,
.footer-main .column--hotline .column--content .column--pin .icon {
  display: block;
  width: 2em !important;
  height: 2em !important;
  background-size: contain !important;
  background-repeat: none;
}
.footer-main .column--hotline .column--content .column--opentime .icon.clock,
.footer-main .column--hotline .column--content .column--pin .icon.clock {
  background: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/img/icons/clock.svg');
  background-position: center;
  background-repeat: no-repeat;
}
.footer-main .column--hotline .column--content .column--opentime .icon.location,
.footer-main .column--hotline .column--content .column--pin .icon.location {
  background: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/img/icons/pin.svg');
  background-position: center;
  background-repeat: no-repeat;
}
.footer-main .column--hotline .column--content .column--opentime span,
.footer-main .column--hotline .column--content .column--pin span {
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1em;
  margin-top: 0.625rem;
  color: #ffffff;
}
.footer-main .column--hotline .column--content .column--pin {
  clear: both;
  padding-bottom: 1.5em;
}
.footer-main .column--hotline .column--content .line {
  width: auto;
  height: 2px;
  background: #96c126;
  opacity: 0.5;
  margin: 1em 1em;
}
.footer-main .column--hotline .social {
  position: relative;
  display: none;
}
.footer-main .column--hotline .social .socialWrap {
  position: absolute;
  right: 4em;
  top: 0.3em;
}
.footer-main .column--hotline .social .socialWrap a {
  display: inline-block;
  background: #ffffff;
  border-radius: 0.5em;
  margin: 0.5em 0;
  padding: 1em;
  margin-right: 0.5em;
}
.footer-main .column--hotline .social .socialWrap a:hover {
  background: #648119;
}
.footer-main .column--hotline .social .socialWrap a .icon {
  display: block;
  background-size: contain !important;
  float: none;
}
.footer-main .column--hotline .social .socialWrap a .icon.fb {
  background: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/img/icons/facebook.svg');
  background-repeat: no-repeat;
  background-position: center;
  width: 2em !important;
  height: 2em !important;
}
.footer-main .column--hotline .social .socialWrap a .icon.ig {
  background: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/img/icons/instagram.svg');
  background-repeat: no-repeat;
  background-position: center;
  width: 2em !important;
  height: 2em !important;
}
.footer-main .column--hotline .social .socialWrap a .icon.wa {
  background: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/img/icons/whatsapp.svg');
  background-repeat: no-repeat;
  background-position: center;
  width: 2em !important;
  height: 2em !important;
}
.footer-main .column--hotline .custom_styling {
  display: none;
  position: relative;
}
.footer-main .column--hotline .custom_styling .dots {
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  height: 190px;
  background-image: radial-gradient(#648119 5px, transparent 1.5px);
  background-size: 31px 31px;
}
.footer-main .column--hotline .custom_styling .wave {
  position: absolute;
  background: #648119;
  width: 100%;
  height: 50px;
  bottom: -505px;
  left: -10px;
  border-radius: 2em 100% 0 0;
}
.footer-main .footer--payment-icons {
  min-width: 200px;
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-end;
  padding-top: 1.5625rem;
  gap: 0.625rem;
  row-gap: 0.625rem;
  width: 100%;
  place-content: center;
}
.footer-main .footer--payment-icons img:nth-child(1) {
  width: 80px;
  height: 50px;
  background: #fff;
  padding: 0.5rem;
  border-radius: 0.1rem;
}
@media screen and (min-width: 64em) {
  .footer-main .footer--payment-icons {
    width: max-content;
    place-content: center;
  }
}
.container {
  background: transparent;
  max-width: none;
}
@media screen and (min-width: 48em) {
  .footer-main .fifty {
    width: 50%;
  }
  .footer-main .footer--columns {
    padding: 0;
    border: 0;
  }
  .footer-main .footer--column .footer--phone-link,
  .footer-main .footer--column .footer--mail-link {
    font-size: 1.875rem !important;
  }
  .footer-main .footer--column .column--opentime,
  .footer-main .footer--column .column--pin {
    margin: 2rem 0rem 0rem 2rem;
  }
  .footer-main .footer--column .column--opentime span,
  .footer-main .footer--column .column--pin span {
    font-size: 1.875rem !important;
  }
  .footer-main .footer--column:not(.column--hotline) .column--headline {
    overflow: hidden;
    height: auto;
    color: #96c126;
    background: transparent;
    cursor: default;
    font-size: 1.5em;
    font-weight: 300;
    line-height: auto;
    padding: 0;
  }
  .footer-main .footer--column:not(.column--hotline) .column--headline::after {
    content: '';
    display: block;
    position: absolute;
    height: 2px;
    width: 50px;
    background: #96c126;
  }
  .footer-main .footer--column:last-child:not(.column--map) {
    border-bottom: 0;
  }
  .footer-main .footer--column .subtitle {
    padding-left: 2.5rem;
  }
  .footer-main .footer--column.column--logo {
    padding-left: 5em;
  }
  .footer-main .footer--column.column--logo .review--link {
    margin-left: 2.5rem;
  }
  .footer-main .footer--column.column--menu {
    width: 25%;
  }
  .footer-main .footer--column.column--menu.column-last {
    width: 0%;
    display: none;
  }
  .footer-main .footer--column.column--map {
    display: block;
  }
  .footer-main .column--hotline {
    height: 500px;
  }
  .footer-main .column--hotline .column--content {
    padding-top: 2em;
    background: #96c126;
  }
  .footer-main .column--hotline .column--content a,
  .footer-main .column--hotline .column--content span {
    font-size: 1.175rem !important;
  }
  .footer-main .column--hotline .column--content div i {
    margin-bottom: 1rem;
  }
  .footer-main .column--hotline .column--content .line {
    background: #648119;
  }
  .footer-main .column--hotline .column--content .column--opentime .icon,
  .footer-main .column--hotline .column--content .column--pin .icon {
    width: 3em !important;
    height: 3em !important;
  }
  .footer-main .column--hotline .column--content .column--opentime span,
  .footer-main .column--hotline .column--content .column--pin span {
    margin-top: unset;
  }
  .footer-main .column--hotline .social {
    position: relative;
    display: block;
  }
  .footer-main .column--hotline .social .socialWrap {
    top: 2.3em;
    right: 2em;
  }
  .footer-main .column--hotline .social .socialWrap a .icon.fb {
    width: 2em !important;
    height: 2em !important;
  }
  .footer-main .column--hotline .social .socialWrap a .icon.ig {
    width: 2em !important;
    height: 2em !important;
  }
  .footer-main .column--hotline .social .socialWrap a .icon.wa {
    width: 2em !important;
    height: 2em !important;
  }
  .footer-main .column--navigation {
    background: transparent;
    color: #000000;
    padding: 0;
  }
  .footer-main .column--navigation .navigation--link {
    font-size: 1em;
    font-weight: normal;
    color: #000000;
  }
}
.liefergebiet--footer {
  display: block;
  width: 90%;
  margin: auto;
  padding-bottom: 5px;
}
@media screen and (min-width: 64em) {
  .footer-main .footer--payment-icons {
    display: flex;
  }
}
@media screen and (max-width: 48em) {
  .liefergebiet--footer {
    width: fit-content;
  }
}
@media screen and (min-width: 78.75em) {
  .footer-main .column--navigation {
    color: #000000;
  }
  .footer-main .column--hotline .column--headline {
    padding-left: 2.5em;
    font-size: 1.875rem;
    text-decoration: underline #648119;
    text-underline-offset: 5px;
  }
  .footer-main .column--hotline .column--content {
    padding-left: 3em;
  }
  .footer-main .column--hotline .social .socialWrap {
    top: 25em;
    right: 5em;
  }
  .footer-main .column--hotline .social .socialWrap a .icon {
    width: 4em !important;
    height: 4em !important;
  }
  .footer-main .column--hotline .custom_styling {
    display: block;
  }
  .footer-main .column--hotline .column--content .column--opentime .icon,
  .footer-main .column--hotline .column--content .column--pin .icon {
    width: 4em !important;
    height: 4em !important;
    float: left;
    margin-right: 1em;
  }
  .footer-main .column--hotline .column--content .line {
    width: 50%;
  }
  .footer-main .footer--column.column--menu {
    width: 16%;
  }
  .footer-main .footer--column.column--menu.column-last {
    width: 12%;
    display: block;
  }
  .footer-main .footer--bottom .footer--copyright .footer--terms {
    position: absolute;
    display: block;
  }
}
.trustpilot-widget {
  width: 100%;
  padding-bottom: 1.25rem;
}
@media screen and (min-width: 48em) {
  .footer-main .column--hotline .column--content a,
  .footer-main .column--hotline .column--content span {
    font-size: 1.675rem !important;
  }
  .footer--column.column--logo.is--first.block.fifty .logo--link {
    display: contents;
  }
}
.liefergebiet--footer .icon--location {
  color: #96c126;
  font-size: 1rem;
  position: relative;
  top: 2px;
}
.liefergebiet--footer #selected-zip-2 {
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 700;
}
.liefergebiet--footer #selected-zip-2:hover {
  color: #96c126;
}
@media screen and (min-width: 48em) {
  .footer-main .column--hotline .column--content p,
  .footer-main .column--hotline .column--content span,
  .footer-main .column--hotline .column--content a {
    font-size: 18px !important;
  }
}
.footer--column .column--content .column--phone,
.footer--column .column--content .column--mail,
.footer--column .column--content .column--pin {
  margin: 0rem 0rem 0rem 2rem;
  display: flex;
}
.footer--column .column--content .column--phone img,
.footer--column .column--content .column--mail img,
.footer--column .column--content .column--pin img {
  object-fit: contain;
  width: 1.25rem;
  margin-right: 0.5rem;
}
.footer--column .column--content .column--phone span a,
.footer--column .column--content .column--mail span a,
.footer--column .column--content .column--pin span a {
  margin: 0 !important;
}
.footer--column .footer--contact .column--content {
  display: block;
}
.footer--column .footer--contact .column--content .column--phone,
.footer--column .footer--contact .column--content .column--mail,
.footer--column .footer--contact .column--content .column--opentime,
.footer--column .footer--contact .column--content .column--pin {
  display: flex;
  margin-left: 0;
  margin-bottom: 0.25rem;
}
.footer--column .footer--contact .column--content .column--phone span,
.footer--column .footer--contact .column--content .column--mail span,
.footer--column .footer--contact .column--content .column--opentime span,
.footer--column .footer--contact .column--content .column--pin span {
  font-size: 14px !important;
}
.footer--column .footer--contact .column--content .column--phone img,
.footer--column .footer--contact .column--content .column--mail img,
.footer--column .footer--contact .column--content .column--opentime img,
.footer--column .footer--contact .column--content .column--pin img {
  object-fit: contain;
  width: 1.25rem;
  margin-right: 0.5rem;
}
.footer--column .footer--contact .column--content .column--phone span a,
.footer--column .footer--contact .column--content .column--mail span a,
.footer--column .footer--contact .column--content .column--opentime span a,
.footer--column .footer--contact .column--content .column--pin span a {
  font-weight: normal;
  line-height: 1.3em;
  color: #000;
  font-size: 1em !important;
}
@media screen and (max-width: 48em) {
  .footer--column .footer--contact .column--content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .footer--column .footer--contact .column--content .column--phone,
  .footer--column .footer--contact .column--content .column--mail,
  .footer--column .footer--contact .column--content .column--opentime,
  .footer--column .footer--contact .column--content .column--pin {
    width: 50%;
  }
}
@media screen and (min-width: 48em) {
  .footer-main .footer--column.column--menu.column-last {
    display: block !important;
    width: auto !important;
  }
}
@media screen and (max-width: 30em) {
  .footer-main .footer--column.column--menu.column-last .column--navigation .column--content > p {
    width: 100%;
  }
  .footer-main .container .footer--columns .footer--column {
    margin-bottom: 0.5rem;
  }
}
.footer-main::after {
  content: '';
  background: url(/media/image/db/66/0b/SoEinfachTopperGray_1920x1920.png);
  position: absolute;
  left: 0;
  right: 0;
  top: 0rem;
  height: 3rem;
  background-color: #fff;
  z-index: 10;
  background-repeat: no-repeat;
  background-size: cover;
}
.footer-main {
  position: relative;
  padding-top: 3rem;
}
.configurator--label {
  color: #000000;
}
.product--details .product--tax {
  color: #000000;
  line-height: 1.45;
}
.product--details .product--tax a {
  color: #000000;
}
.product--details .product--tax a:hover {
  color: #48a2e7;
}
.product--details .action--link {
  color: #000000;
}
.product--details .product--base-info {
  color: #000000;
}
.product--details .product--base-info .base-info--entry .entry--content {
  font-size: 0.675rem !important;
}
.product--details .configurator--form {
  width: 100%;
}
.product--details .configurator--form .select-field {
  max-width: 100%;
}
.product--details .configurator--form .select-field option:hover {
  background: #48a2e7;
  color: white;
}
.product--details .buybox--form {
  width: 100%;
}
.product--details .buybox--button {
  width: 100%;
}
.product--details .product--image-container {
  margin-right: unset;
}
.product--details .product--buybox .productPriceFlex {
  width: 100%;
  margin-top: 30px;
}
.product--details .product--buybox .productPriceFlex .productPriceUnitTaxFlex {
  width: 50%;
  padding-left: 0.5rem;
  align-self: center;
}
.product--details .product--buybox .productPriceFlex .productPriceUnitTaxFlex .product--price.price--unit {
  margin-bottom: 0.5rem;
}
.product--details .product--buybox .productPriceFlex .product--price.price--default {
  width: 50%;
}
.product--details .product--buybox .productPriceFlex .price--default.product--price {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  padding-right: 0.5rem;
}
.product--details .product--buybox .price--content.content--default {
  margin-top: 0px;
  margin-bottom: 0.5rem;
}
.is--ctl-detail .page-wrap .content-main .content-main--inner {
  max-width: 1200px;
  margin: 0 auto;
  background: #f8f8f8;
  padding: 0;
}
.is--ctl-detail .page-wrap .content-main .content-main--inner .product--detail-upper {
  padding: 0rem 0.625rem 1rem 0.625rem;
  display: flex;
  flex-wrap: wrap;
}
.is--ctl-detail .page-wrap .content-main .content-main--inner .product--detail-upper .product--title {
  margin-top: 0;
  margin-bottom: 0;
}
.is--ctl-detail .page-wrap .content-main .content-main--inner .product--detail-upper .image-slider--container {
  background: white;
  border: 1px solid #96c126;
  border-radius: 0.5rem;
}
.is--ctl-detail .page-wrap .content-main .content-main--inner .product--header {
  padding: 1rem 0.625rem 1rem 0.625rem;
}
.product--detail-upper > .product--buybox > .buybox--inner > .buybox--inner .select-field {
  height: unset;
}
@media screen and (min-width: 48em) {
  .product--details .product--image-container {
    margin-right: 4%;
  }
  .is--ctl-detail .page-wrap .content-main .content-main--inner .product--detail-upper {
    flex-wrap: nowrap;
  }
}
.product--details .product--base-info .entry--label,
.product--details .product--base-info .entry--content {
  font-weight: 400 !important;
  font-size: 0.7rem !important;
}
.last-seen-products .last-seen-products--title {
  background-color: #96c126;
  border-bottom: 1px solid #96c126;
  padding: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-radius: 10px;
  color: #ffffff;
}
@media screen and (max-width: 48em) {
  .last-seen-products .last-seen-products--title {
    border-radius: 0;
  }
}
.last-seen-products .last-seen-products--slider {
  padding: 0 1em;
}
.last-seen-products .last-seen-products--slider .last-seen-products--container {
  padding: 0;
}
.last-seen-products .last-seen-products--slider .last-seen-products--container .last-seen-products--item {
  background: white;
  border-radius: 3px;
  box-shadow: 0 0 0 5px #96c126;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  margin: 0.625rem 0.625rem 0.625rem 0.4rem;
  max-width: 218px;
}
.last-seen-products .last-seen-products--slider .last-seen-products--container .last-seen-products--item .last-seen-products-item--title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.product--rating-count {
  border: 3px solid #96c126;
}
.product--details .product--actions {
  margin-top: 2.5rem;
}
.tab-menu--cross-selling .product-slider--item .product--title {
  border: 0;
}
.product--details .product--buybox .price--content {
  font-size: unset;
  margin-left: -5px;
  font-weight: normal;
}
.product--details .product--buybox .price--content.content--default {
  width: 100%;
  margin-left: 0;
  font-weight: bold;
  font-size: 1.5rem;
  padding-bottom: 0.3125rem;
}
.product--details .product--buybox .buybox--quantity {
  padding-bottom: 10px;
}
.product--details .product--buybox .configurator--label {
  display: none;
}
.product--details .product--buybox .select-container {
  height: 2.5rem;
}
@media screen and (min-width: 48em) {
  .buybox--button-container {
    margin-top: 20px;
  }
}
.last-seen-products--title,
.tab-menu--cross-selling .tab--container-list .tab--container .tab--header .tab--title,
.tab--container-list .tab--container .tab--header .tab--title,
.last-seen-products .last-seen-products--title {
  font-size: 14px !important;
  padding: 0.625rem 0.9375rem !important;
}
@media screen and (max-width: 48em) {
  .last-seen-products--title,
  .tab-menu--cross-selling .tab--container-list .tab--container .tab--header .tab--title,
  .tab--container-list .tab--container .tab--header .tab--title,
  .last-seen-products .last-seen-products--title {
    padding: 1rem !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
}
.tab-menu--product .tab--container-list .tab--container .tab--header {
  padding-left: 0em !important;
}
.is--ctl-detail .buybox--button .icon--basket {
  font-size: 1.875rem;
  line-height: 1.875rem !important;
}
.is--ctl-detail .buybox--button .icon--basket::after {
  content: "+" !important;
  top: -2px !important;
  left: 13px !important;
  font-size: 0.9375rem !important;
  position: absolute !important;
}
.is--ctl-detail .page-wrap .content-main .content-main--inner .product--header {
  display: none;
}
.content--breadcrumb {
  padding: 0;
}
#FriedmNutritionalValue table td {
  color: #000000;
}
.content--breadcrumb .breadcrumb--entry,
.content--breadcrumb .breadcrumb--separator {
  display: list-item;
}
.review--title .review--text {
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
}
.review--title .review--google {
  margin: 0 auto;
  margin-top: 2rem;
  width: 50%;
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.review--title .review--google .review--logo {
  width: 3rem;
  object-fit: contain;
}
.review--title .review--google .review--points {
  font-size: 2rem;
  color: rgba(0, 0, 0, 0.4);
  margin-left: 1rem;
  margin-right: 1rem;
}
.review--title .review--google .review--stars {
  font-size: 1.5rem;
  color: #ffe000;
  line-height: 2.75rem;
}
.review--title .review--google .review--stars .icon--star:before {
  font-family: "shopware";
  content: "\e600";
}
.review--panel {
  display: flex;
  gap: 2rem;
  padding: 20px;
  flex-wrap: wrap;
  place-content: center;
}
@media screen and (min-width: 48em) {
  .review--panel {
    margin-top: 2rem;
    flex-wrap: inherit;
  }
}
.review--panel .review--box {
  box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.2);
  padding: 1rem;
  position: relative;
  width: 100%;
  margin: 1rem;
}
.review--panel .review--box.bigger {
  transform: scaleY(1.1);
}
@media screen and (min-width: 48em) {
  .review--panel .review--box {
    width: 33.3%;
    margin: 0rem;
  }
}
.review--panel .review--box .review--starts {
  color: #ffd400;
  text-align: center;
  font-size: 2rem;
}
.review--panel .review--box .review--starts .icon--star:before {
  font-family: "shopware";
  content: "\e600";
}
.review--panel .review--box .review--description .review--name {
  font-weight: 600;
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}
.review--panel .review--box .review--description .review--text {
  font-size: 1rem;
  color: rgba(0, 0, 0, 0.7);
}
.review--panel .review--box .review--description .review--text .icon--quote {
  padding: 0.5rem;
  font-size: 4rem;
  color: rgba(0, 0, 0, 0.3);
}
.review--panel .review--box .review--description .review--text .icon--quote::before {
  content: "\e635";
  font-family: "shopware";
}
@media screen and (max-width: 48em) {
  .header-element-1 {
    padding-bottom: 1rem !important;
  }
  .review--google {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .review--panel {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .review--panel .review--box {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .swiper {
    height: 200px !important;
  }
  .swiper .swiper-slide {
    padding: 2rem !important;
    margin-right: 0 !important;
  }
}
.navigation-main {
  background: #48a2e7;
  width: 100%;
  margin-bottom: 5px;
}
.navigation-main .navigation--list {
  text-align: center;
}
.navigation-main .navigation--list li:last-child a::after {
  border: 0px solid #ffffff;
}
.navigation-main .navigation--link {
  padding: 1rem 0rem 1rem 0.875rem;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-clip: padding-box;
}
.navigation-main .navigation--link::after {
  border: 1px solid #ffffff;
  content: " ";
  margin-left: 0.5em;
}
.navigation-main .is--active .navigation--link {
  background: #96c126;
  background-image: none;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.navigation-main::-webkit-scrollbar,
.navigation-main ul::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.navigation-main,
.navigation-main ul {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}
.swiper-slide {
  padding: 3rem;
}
.navigation-main .navigation--list .navigation--entry.is--hovered {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-clip: padding-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background: #96c126;
}
.navigation-main .navigation--list .navigation--entry.is--hovered .navigation--link {
  font-weight: 600;
  background: #f8f8f8;
  color: #48a2e7 !important;
  transition: 0.2s;
}
.navigation-main .container {
  padding: 2px 0 3px 0;
}
.advanced-menu {
  left: 50%;
  transform: translate(-50%, 0);
  max-width: 1600px;
  border: 5px solid #48a2e7;
  border-top: 0;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  box-shadow: 0px 1000px 0px 1000px rgba(0, 0, 0, 0.5);
  position: fixed;
}
@media screen and (min-width: 78.75em) {
  .advanced-menu .content--wrapper {
    margin-top: 0 !important;
  }
}
.advanced-menu::before {
  content: "";
  background: url("../../themes/Frontend/KachouriGetraenke/frontend/_public/src/img/menu-bubbles.svg") left top no-repeat;
  background-position: -180px;
  display: block;
  height: 100%;
  width: 180px;
  position: absolute;
  top: 0;
  left: 0;
  border-bottom-left-radius: 25px;
  background-size: cover;
}
.advanced-menu::after {
  content: "";
  background: url("../../themes/Frontend/KachouriGetraenke/frontend/_public/src/img/menu-bubbles.svg") right top no-repeat;
  background-position: -20px;
  display: block;
  height: 100%;
  width: 180px;
  position: absolute;
  top: 0;
  right: 0;
  border-bottom-right-radius: 25px;
  z-index: -1;
  background-size: cover;
}
.advanced-menu .menu--delimiter {
  background: #000000;
}
.advanced-menu .button-container {
  background: #f8f8f8;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  color: #000000;
}
.advanced-menu .button-container .button--category {
  color: #000000;
}
.advanced-menu .menu--list-item {
  padding: 0;
  margin: 0;
}
.advanced-menu .menu--list-item .menu--list-item-link {
  padding: 0.5em 1em;
  color: #000000;
}
.advanced-menu .menu--list-item .menu--list-item-link:hover {
  padding: 0.5em 1em;
  background: #48a2e7;
  color: #ffffff;
  border-radius: 5px;
}
.teaser--text .icon--check {
  font-size: 8rem;
  margin-bottom: 2rem;
  display: block;
  margin-top: 0.75rem;
  color: #96c126;
}
.box--list .product--image {
  height: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 2.8125rem;
}
.box--list .product--info {
  position: relative;
  padding: 0rem 0rem 0rem 4.0625rem;
}
.is--ctl-listing .product--box .variant--description {
  margin-top: 0rem;
}
.is--ctl-listing .product--box .variant--description .variant--name-title {
  font-size: 0.75rem;
  padding-left: 0.3125rem;
  padding-right: 0.3125rem;
}
.is--ctl-listing .product--box .variant--description .variant--price {
  padding-right: 0.3125rem !important;
  font-size: 0.75rem !important;
}
@media screen and (min-width: 30em) {
  .box--list .product--image {
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 11.25rem;
  }
  .box--list .product--info {
    position: relative;
    padding: 0rem 0rem 0rem 12.5rem;
  }
}
@media screen and (min-width: 48em) {
  .is--ctl-listing .product--box .variant--description {
    margin-top: 0.625rem;
  }
  .is--ctl-listing .product--box .variant--description .variant--name-title {
    font-size: 0.875rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .is--ctl-listing .product--box .variant--description .variant--price {
    padding-right: 1rem !important;
    font-size: 1rem !important;
  }
}
.is--ctl-listing .product--box .product--title {
  border-bottom: 1px solid #96c126;
  height: 2rem;
}
.is--ctl-listing .product--box .product--title:hover {
  color: #48a2e7;
}
.is--ctl-listing .product--box .product--action {
  color: #000000;
}
.is--ctl-listing .product--box .product--action:hover {
  color: #48a2e7;
}
.is--ctl-listing .product--box .box--content {
  background: white;
  border: 1px solid #96c126;
}
.is--ctl-listing .product--box .box--content .product--description {
  display: none;
}
.is--ctl-listing .product--box .box--content .variant--description {
  height: auto;
}
.is--ctl-listing .product--box .box--content .variant--description .variant--entry {
  display: flex;
  align-content: center;
  align-items: stretch;
  justify-content: right;
  border: 1px solid #96c126;
  border-radius: 0.125rem;
  margin-top: 0.5rem;
}
.is--ctl-listing .product--box .box--content .variant--description .variant--entry:hover {
  background: #96c126;
  border: 1px solid #648119;
}
.is--ctl-listing .product--box .box--content .variant--description .variant--entry:hover a {
  color: #ffffff;
}
.is--ctl-listing .product--box .box--content .variant--description .variant--entry:hover .variant--action {
  border-left: 1px solid #648119;
}
.is--ctl-listing .product--box .box--content .variant--description .variant--entry .variant--name {
  width: 100%;
}
.is--ctl-listing .product--box .box--content .variant--description .variant--entry .variant--name a {
  display: flex;
  height: 100%;
}
.is--ctl-listing .product--box .box--content .variant--description .variant--entry .variant--name a .variant--name-title {
  line-height: 14px !important;
  margin: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  line-height: unset;
  font-weight: bold;
  width: 80%;
  align-self: center;
}
.is--ctl-listing .product--box .box--content .variant--description .variant--entry .variant--name a .variant--price {
  font-size: 1rem;
  font-weight: bold;
  padding-right: 1rem;
  align-self: center;
}
.is--ctl-listing .product--box .box--content .variant--description .variant--entry .variant--action {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #96c126;
}
.is--ctl-listing .product--box .box--content .variant--description .variant--entry .variant--action .variant--button form {
  margin-top: 0;
  max-width: unset;
  height: unset;
}
.is--ctl-listing .product--box .box--content .variant--description .variant--entry .variant--action .variant--button form button {
  border-radius: 0;
  font-size: 2rem;
  font-weight: bold;
  color: #ffffff;
  background: #96c126;
  padding: 0.25rem 0.5rem;
  height: unset;
}
.is--ctl-listing .product--box .box--content .variant--description .variant--entry .variant--action .variant--button form button i {
  font-size: 1.25rem;
  display: block;
}
.is--ctl-listing .product--box .box--content .variant--description .variant--entry .variant--action .variant--button form button i:hover {
  transform: scale(1.2);
}
.is--ctl-listing .product--box .box--content .variant--description .variant--entry .variant--action .variant--button form button i:hover::after {
  display: none;
}
@media screen and (min-width: 48em) {
  .is--ctl-listing .product--box .box--content .variant--description .variant--entry {
    align-items: unset;
  }
  .is--ctl-listing .product--box .box--content .variant--description .variant--entry .variant--action {
    background-color: unset;
  }
  .is--ctl-listing .product--box .box--content .variant--description .variant--entry .variant--action .variant--button form button {
    height: 55px;
    padding: 0.25rem 1rem;
  }
  .is--ctl-listing .product--box .box--content .variant--description .variant--entry .variant--action .variant--button form button i {
    font-size: 2rem;
  }
}
.box--list .product--image {
  height: 150px;
}
.box--list .product--info {
  min-height: 150px;
}
.is--ctl-search .content--breadcrumb {
  display: none;
}
.is--ctl-search .product--box .box--content {
  background: white;
}
.is--ctl-search .product--box .box--content .product--info .product--title:hover {
  color: #48a2e7;
}
.is--ctl-search .product--box .box--content .product--info .variant--description {
  display: none;
}
.box--slider .product--title {
  color: #000000;
}
.product--box .variant--description {
  line-height: 100%;
}
.product--box .product--title:hover {
  color: black;
}
.product--box .product--badges .badge--recommend {
  color: #ffffff;
  background: #48a2e7;
}
.page-wrap--cookie-permission {
  color: #000000;
}
.page-wrap--cookie-permission {
  padding: 0.625rem;
  border-top: 1px solid #e1e1e1;
  background: #fff;
  position: fixed;
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
  z-index: 10000000000000000000000;
  background: rgba(0, 0, 0, 0.5);
}
.cookie-permission--container.cookie-mode--1 {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  padding: 1rem;
  transform: translate(-50%, -50%);
  width: 50%;
  z-index: 100000000000;
}
@media screen and (max-width: 48em) {
  .cookie-permission--container.cookie-mode--1 {
    width: 100% !important;
  }
}
.page-wrap--cookie-permission .cookie-permission--container {
  width: 95%;
  text-align: center;
  position: absolute;
  background: #fff;
  padding: 1rem;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 0.5rem;
}
.sidebar--navigation {
  background: #f8f8f8;
  border: none;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}
.sidebar--navigation.is--level0:first-child > li:first-child {
  margin-top: 0px;
}
@media screen and (max-width: 48em) {
  .sidebar--navigation.is--level0:first-child > li:first-child {
    border-top: none;
  }
}
.sidebar--navigation .navigation--entry {
  font-weight: 800;
}
@media screen and (max-width: 48em) {
  .sidebar--navigation .navigation--entry {
    border-bottom: none;
  }
}
@media screen and (max-width: 48em) {
  .sidebar--navigation .navigation--entry:last-child {
    border-bottom: none;
  }
}
.sidebar--navigation .navigation--link {
  color: #000000;
  line-height: 1.8rem;
  font-size: 0.85rem;
}
.sidebar--navigation .navigation--link .is--icon-right {
  margin-top: 0;
  color: #96c126;
  font-size: 1rem;
}
.navigation--link.is--display-button {
  font-size: 1rem !important;
}
aside > .sidebar--categories-wrapper > .shop-sites--container {
  margin-top: 1.875rem;
}
aside > .sidebar--categories-wrapper > .shop-sites--container .navigation--headline {
  font-size: 1.25rem;
}
.shop-sites--navigation.sidebar--navigation.navigation--list.is--drop-down.is--level0 .navigation--entry a {
  display: flex;
}
.shop-sites--navigation.sidebar--navigation.navigation--list.is--drop-down.is--level0 .navigation--entry a img {
  width: 1.4rem;
  object-fit: contain;
  margin-right: 0.3rem;
  height: 1.4rem;
  object-position: bottom;
}
.shop-sites--navigation.sidebar--navigation.navigation--list.is--drop-down.is--level0 .navigation--entry:nth-child(2) a img {
  margin-top: 1rem;
}
.shop-sites--navigation.sidebar--navigation.navigation--list.is--drop-down.is--level0 .navigation--entry:nth-child(3) a img {
  margin-top: -0.2rem;
}
.sidebar-main .overlay--headline {
  display: none !important;
}
.sidebar-main.is--active .shop-sites--navigation.sidebar--navigation.navigation--list.is--drop-down.is--level0 .navigation--entry a img {
  margin-top: 0.4rem !important;
}
.sidebar-main.is--active .shop-sites--navigation.sidebar--navigation.navigation--list.is--drop-down.is--level0 .navigation--entry:nth-child(3) a img {
  margin-top: 0.1rem !important;
}
.sidebar--categories-navigation .sidebar--navigation .navigation--link.is--active {
  color: #48a2e7 !important;
}
.sidebar--categories-navigation .sidebar--navigation > .navigation--entry:last-child {
  border-bottom: 1px solid #96c126 !important;
}
.sidebar--categories-navigation .sidebar--navigation.is--level0 {
  border-top: 1px solid #96c126 !important;
}
.sidebar--categories-navigation .sidebar--navigation.is--level0 .navigation--entry:last-child {
  border-bottom: none !important;
}
.listing--actions {
  background: #f8f8f8;
}
.action--filter-options {
  background: #f8f8f8;
}
.action--sort,
.action--filter-btn {
  margin: 0;
  margin-bottom: 0;
  border-radius: 3px;
}
.minerals--container {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.is--ctl-listing .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions .action--sort,
.is--ctl-search .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions .action--sort {
  display: flex;
}
.minerals {
  border-radius: 3px;
  width: 50%;
  margin-left: 0rem;
  display: block;
  margin-top: 0.5rem;
  font-weight: normal;
  font-size: 16px;
  background-color: #96c126;
  color: white;
  height: 2.125rem;
  padding: 0.25rem 0.25rem 0.25rem 1.25rem;
  line-height: 1.5rem;
  margin-bottom: 10px;
}
.minerals:hover {
  color: #fff;
}
.minerals::after {
  clear: both;
}
.action--sort .sort--select {
  border-radius: 3px;
  width: 100% !important;
}
.action--filter-btn {
  width: 100% !important;
  background: #48a2e7;
  color: white !important;
  font-size: 14px;
}
.action--filter-btn .filter--trigger {
  background: #f8f8f8;
  font-size: 14px;
  color: white !important;
}
.action--filter-btn .filter--trigger .icon--filter {
  color: white !important;
  font-weight: bold;
  font-size: 14px;
}
.action--filter-btn .filter--trigger.is--active .icon--filter {
  color: white !important;
  font-weight: bold;
  font-size: 14px;
}
.is--ctl-search .page-wrap .conent-main .content-main--inner .content-wrapper .listing-actions {
  display: none !important;
}
.is--ctl-listing .page-wrap .content-main .content-main--inner,
.is--ctl-search .page-wrap .content-main .content-main--inner {
  max-width: 1200px;
  margin: 0 auto;
}
.is--ctl-listing .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions,
.is--ctl-search .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions {
  display: flex;
  flex-wrap: wrap;
}
.is--ctl-listing .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions .action--filter-btn,
.is--ctl-search .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions .action--filter-btn {
  display: block;
  width: 49% !important;
  margin-right: 1%;
}
.is--ctl-listing .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions .action--filter-btn .filter--trigger,
.is--ctl-search .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions .action--filter-btn .filter--trigger {
  background: rgba(255, 255, 255, 0);
  border-radius: 0;
  border: 0;
  font-weight: 400;
  font-size: 16px;
}
.is--ctl-listing .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions .action--filter-btn .filter--trigger.is--active,
.is--ctl-search .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions .action--filter-btn .filter--trigger.is--active {
  color: #000000;
}
.is--ctl-listing .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions .action--filter-btn .filter--trigger.is--active .icon--filter,
.is--ctl-search .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions .action--filter-btn .filter--trigger.is--active .icon--filter {
  color: #000000;
}
.is--ctl-listing .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions .action--sort,
.is--ctl-search .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions .action--sort {
  width: 50% !important;
  background: #48a2e7;
  color: white;
}
.is--ctl-listing .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions .action--sort .sort--label,
.is--ctl-search .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions .action--sort .sort--label {
  margin: 0;
  width: 130px;
  padding-left: 0.5rem;
  border-left: none;
  border-right: 1px solid #fff;
  font-weight: normal;
  text-align: left;
  color: white;
}
.is--ctl-listing .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions .action--sort .sort--field,
.is--ctl-search .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions .action--sort .sort--field {
  background: rgba(255, 255, 255, 0);
  border-radius: 0;
  border: 0;
  color: white;
  font-weight: 400;
}
.is--ctl-listing .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions .action--sort::after,
.is--ctl-search .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions .action--sort::after {
  background: rgba(0, 0, 0, 0.5);
}
.is--ctl-listing .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions .action--sort .nice-select::after,
.is--ctl-search .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions .action--sort .nice-select::after {
  color: white;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
}
.is--ctl-listing .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions .action--sort .nice-select .option,
.is--ctl-search .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions .action--sort .nice-select .option {
  color: black;
}
.is--ctl-listing .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions .action--sort .nice-select .option.selected,
.is--ctl-search .page-wrap .content-main .content-main--inner .content--wrapper .listing--actions .action--sort .nice-select .option.selected {
  color: white;
}
form.action--sort {
  width: 100% !important;
}
.action--filter-options .filter--close-btn {
  background-image: none;
}
.kachouri-heading h2 {
  color: #96c126;
  font-size: 1.125rem;
  margin-bottom: 0rem;
  text-align: center;
  font-weight: normal;
}
@media screen and (max-width: 48em) {
  .kachouri-heading h2 {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5rem;
  }
}
.kachouri-heading img {
  text-align: center;
  margin: auto;
  width: 168px;
  margin-bottom: 10px !important;
}
.kachouri-heading-blue h2 {
  color: #045390;
  font-size: 1.625rem;
  margin-bottom: 0rem;
  text-align: center;
  font-weight: normal;
}
.kachouri-heading-blue .html--content {
  background-color: #48a2e7;
}
.kachouri-heading-blue img {
  text-align: center;
  margin: auto;
  width: 200px;
}
@media screen and (min-width: 48em) {
  form.action--sort {
    width: auto !important;
  }
  .action--sort .sort--select {
    width: 168px !important;
  }
  .kachouri-heading h2 {
    font-size: 2.5rem;
    margin-bottom: 0.625rem;
  }
  .kachouri-heading img {
    margin-bottom: 0 !important;
    width: unset;
  }
  .kachouri-heading-blue h2 {
    font-size: 2.5rem;
    margin-bottom: 0.625rem;
  }
  .kachouri-heading-blue img {
    width: unset;
  }
  .kachouri-heading-blue .emotion--html {
    overflow: hidden;
  }
  .listing--actions {
    border: 0;
    align-items: center;
  }
  .action--filter-btn {
    margin: 0;
    width: 110px !important;
  }
  .action--filter-options {
    flex-basis: 100%;
  }
  .action--filter-options .filter--container {
    background: rgba(255, 255, 255, 0.5);
    margin-left: 0;
    padding-left: 1rem;
  }
  .action--filter-options .filter--container .filter-panel {
    margin-left: 0;
    margin-right: 1%;
  }
  .action--filter-options .filter--container .filter--actions,
  .action--filter-options .filter--container .filter--active-container {
    margin-left: 0;
  }
}
.mt-70-arrows .banner--content {
  margin-top: 70px;
}
@media screen and (min-width: 30em) {
  .mt-40-arrows .banner--content {
    margin-top: 40px;
  }
}
.variant--unit {
  font-size: 0.625rem;
  font-weight: 500;
}
.is--ctl-listing .product--box .product--title-container {
  -webkit-tap-highlight-color: transparent;
  border-bottom: none;
  height: unset;
  margin: 0rem 0rem 0.3125rem 0rem;
  line-height: 1.25rem;
  width: 100%;
  font-size: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.is--ctl-listing .product--box .product--title-container .product--title {
  border-bottom: unset;
  height: unset;
  margin: 0;
  line-height: unset;
  width: unset;
  display: inline-block;
}
.is--ctl-listing .product--box .product--title-container > span {
  cursor: pointer;
  text-align: left;
  display: inline-block;
  width: 100%;
}
.is--ctl-listing .product--box .product--title-container > span > span {
  text-align: center;
  width: 3.625rem;
  padding-top: 0rem;
  padding-bottom: 0rem;
  border: 1px solid #96c126;
  display: inline-block;
}
.is--ctl-listing .product--box .product--title-container > span > span:first-child {
  border-bottom-left-radius: 1.25rem;
  border-bottom-right-radius: 0rem;
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 0rem;
}
.is--ctl-listing .product--box .product--title-container > span > span:nth-child(2) {
  border-bottom-left-radius: 0rem;
  border-bottom-right-radius: 1.25rem;
  border-top-left-radius: 0rem;
  border-top-right-radius: 1.25rem;
}
.is--ctl-listing .product--box .product--title-container > span > span.toggled {
  background-color: #96c126;
  color: white;
}
.listing--paging {
  width: 100%;
  padding: 1.625rem 0rem 0.625rem 0rem;
}
@media screen and (min-width: 30em) {
  .is--ctl-listing .product--box .product--title-container > span {
    display: unset;
    width: unset;
    text-align: center;
  }
}
@media screen and (min-width: 64em) {
  .variant--unit {
    font-size: 0.6875rem;
  }
  .listing--paging {
    padding: 1.625rem 0rem 0.625rem 0rem;
    width: 100%;
  }
  .is--ctl-listing .product--box .product--title-container {
    height: 2.625rem;
    border-bottom: 1px solid #96c126;
    flex-wrap: nowrap;
    font-size: 0.875rem;
  }
  .is--ctl-listing .product--box .product--title-container > span > span {
    padding-top: 0.1875rem;
    padding-bottom: 0.1875rem;
  }
}
.is--ctl-listing .buybox--button .icon--basket {
  font-size: 1.875rem;
  line-height: 1.875rem !important;
}
.is--ctl-listing .buybox--button .icon--basket::after {
  content: "+" !important;
  top: 2px !important;
  left: 16px !important;
  font-size: 0.75rem !important;
  position: absolute !important;
}
@media screen and (min-width: 48em) {
  .is--ctl-listing .buybox--button .icon--basket::after {
    content: "+" !important;
    top: 9px !important;
    left: 29px !important;
    font-size: 0.9375rem !important;
  }
}
.filter--actions.filter--actions-bottom {
  display: none;
}
@media screen and (max-width: 48em) {
  .hersteller-slider .swiper {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .lieferbedingung-footer .columns {
    flex-wrap: wrap !important;
  }
  .lieferbedingung-footer .columns div {
    width: 100% !important;
  }
  .lieferbedingung-footer .columns > div {
    width: 100% !important;
    border-bottom: 1px solid #96c126 !important;
    margin-bottom: 1.5rem !important;
  }
}
@media screen and (min-width: 78.75em) {
  .lieferbedingung-footer .columns > div {
    border-right: 1px solid #96c126;
  }
}
.search--cat-filter .cat-filter--reset {
  color: #000000;
}
.filter--active,
.search--cat-filter .cat-filter--reset,
.search--cat-filter .cat-filter--reset {
  color: #000000;
  background: #f8f8f8;
}
.filter--active .filter--active-icon {
  color: #000000;
}
.filter-panel {
  background: #f8f8f8;
}
.filter-panel:hover {
  background: #f8f8f8;
}
.filter-panel.is--collapsed .filter-panel--flyout {
  background: #f8f8f8;
}
.filter-panel--icon {
  color: #000000;
}
.filter--value {
  background: #f8f8f8;
}
.filter--value:hover {
  background: #f8f8f8;
}
.filter--active-container.is--disabled .filter--active:not([data-filter-param="reset"]),
.filter--active-container.is--disabled .filter--active:not([data-filter-param="reset"]):hover {
  color: #000000;
  background: #f8f8f8;
}
.filter--active-container.is--disabled .filter--active:not([data-filter-param="reset"]) .filter--active-icon,
.filter--active-container.is--disabled .filter--active:not([data-filter-param="reset"]):hover .filter--active-icon {
  color: #000000;
}
.product--table .add-voucher--field {
  background: #f8f8f8;
}
.product--table .content--title {
  color: #000000;
}
.product--table .table--aggregation {
  background: #f8f8f8;
}
.aggregation--list {
  background: #f8f8f8;
}
.free-shipping-container {
  border-top: 1px solid #48a2e7;
  text-align: center;
  padding: 1rem 0;
}
.free-shipping-container > h2 {
  margin: 0;
  padding: 0;
  font-size: 20px;
  font-weight: 500;
  position: relative;
}
.free-shipping-container > h2 img {
  position: absolute;
  cursor: pointer;
  right: 106px;
  top: -6px;
  width: 16px;
}
.free-shipping-container > h2.primary {
  color: #96c126;
  padding: 0 !important;
}
.free-shipping-container > h2 > span {
  position: relative;
  pointer-events: none;
}
.free-shipping-container > span {
  display: block;
  font-size: 16px;
  width: 100%;
}
.free-shipping-container .has--info-icon {
  pointer-events: none;
  position: relative;
  padding: 0 !important;
  width: 100%;
  margin: 0 auto;
  max-width: 23.5rem;
}
.free-shipping-container .has--info-icon::after {
  position: absolute;
  cursor: pointer;
  right: 17%;
  transform: translateX(17%);
  bottom: 0.1rem;
  width: 1.25rem;
  height: 1.25rem;
  content: "";
  background: url(/media/image/73/f2/cc/information-1.png);
  background-size: cover;
  pointer-events: all;
}
.has--info-icon-primary {
  pointer-events: none;
  position: relative;
}
.has--info-icon-primary::after {
  position: absolute;
  cursor: pointer;
  width: 1.25rem;
  height: 1.25rem;
  content: "";
  background: url(/media/image/73/f2/cc/information-1.png);
  background-size: cover;
  pointer-events: all;
  top: 0.15rem;
  margin-left: 0.25rem;
  z-index: 0;
}
.container--ajax-cart .free-shipping-container.has--info-icon-primary {
  width: 100%;
}
#one-page-checkout .opc--col-1 .free-shipping-container.has--info-icon-primary::after {
  right: 30%;
  transform: translateX(30%);
}
@media screen and (min-width: 48em) {
  .product--table .content--title {
    color: #000000;
  }
  .product--table .basket--footer {
    background: #f8f8f8;
  }
}
.container--ajax-cart .alert.is--success {
  display: none;
}
.container--ajax-cart.is--open .ajax--cart * {
  z-index: 10;
}
.container--ajax-cart.is--open .ajax--cart .button--container {
  width: 300px;
  margin: auto;
}
.container--ajax-cart.is--open .ajax--cart .button--container * {
  z-index: 10;
}
.container--ajax-cart.is--open .ajax--cart .button--checkout {
  background-color: #96c126 !important;
}
.container--ajax-cart.is--open .ajax--cart .close--off-canvas {
  width: 150px;
  margin: auto;
  font-size: 0.75rem;
  font-weight: 600;
  height: 2rem;
  line-height: 1.75rem;
}
.container--ajax-cart.is--open::after {
  content: "";
  background: url("../../themes/Frontend/KachouriGetraenke/frontend/_public/src/img/menu-bubbles.svg") right top no-repeat;
  background-position: -20px 0;
  display: block;
  height: 100%;
  width: 180px;
  position: absolute;
  top: 0;
  right: 0;
  border-bottom-right-radius: 25px;
  z-index: 9;
  -moz-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  filter: FlipV;
  -ms-filter: "FlipV";
}
.container--ajax-cart .select-field {
  max-width: unset !important;
  width: 100% !important;
}
.container--ajax-cart .select-field .quantity-holder-container {
  float: left !important;
}
.container--ajax-cart .select-field .item--price {
  float: right !important;
}
.container--ajax-cart {
  z-index: 99999 !important;
}
.ajax--cart {
  z-index: 10;
  background: transparent !important;
}
.ajax--cart .cart--title {
  text-align: center;
}
@media screen and (min-width: 48em) {
  .is--ctl-checkout .content-main {
    padding-top: 100px !important;
  }
}
#one-page-checkout {
  display: flex;
  justify-content: space-between;
}
#one-page-checkout .register--personal-data,
#one-page-checkout .register--shipment-and-payment,
#one-page-checkout .register--overview.panel {
  width: 100%;
}
@media screen and (max-width: 48em) {
  #one-page-checkout .panel--td.table--content {
    padding-left: 3.75rem !important;
    padding-top: 0 !important;
  }
}
#one-page-checkout .panel--td.table--content .content--sku.content {
  font-size: 0.9rem;
}
#one-page-checkout .panel--title.is--underline {
  border-bottom: 1px solid #0b3758;
}
#one-page-checkout .opc--col-1 > .register--personal-data {
  display: block;
}
#one-page-checkout .opc--col-1 .register--login-flex {
  gap: 0rem;
}
#one-page-checkout .opc--col-1 .register--login-flex .register--login-email,
#one-page-checkout .opc--col-1 .register--login-flex .register--login-password {
  width: 50%;
}
#one-page-checkout .opc--col-1 .register--login-flex .register--login-email input,
#one-page-checkout .opc--col-1 .register--login-flex .register--login-password input {
  width: 100%;
}
#one-page-checkout .register--overview {
  background-color: #fff;
}
#one-page-checkout .register--overview .aggregation--list {
  padding-bottom: 0 !important;
  background: transparent;
  border: none;
  padding-left: 0rem;
}
#one-page-checkout .register--overview .panel {
  background-color: #fff;
}
#one-page-checkout .register--overview .block {
  z-index: 10;
  position: relative;
}
#one-page-checkout .register--overview .product--table {
  margin: 0.25rem 0rem 0.25rem 0rem;
}
#one-page-checkout .register--overview .product--table .row--product {
  border-bottom: 0;
}
#one-page-checkout .register--overview .panel--title.is--underline {
  padding: 1.25rem 0rem 0.625rem 0rem;
  border-bottom: 1px solid #48a2e7;
  text-decoration: none !important;
  margin: 0;
}
#one-page-checkout .register--overview .product--table .basket--footer {
  margin: 0rem -1.25rem -1.25rem -1.25rem;
  border-top: 1px solid #48a2e7;
  background: #fbfbfb;
  margin: 0;
}
#one-page-checkout .register--overview .add-voucher--field {
  border: 1px solid #48a2e7;
}
#one-page-checkout .register--overview .list--entry:hover {
  color: #48a2e7;
}
#one-page-checkout .register--overview .btn.is--icon-right {
  background: #96c126;
  float: inherit;
  text-align: center;
  margin: 0 auto;
  display: block;
  border-radius: 8px;
}
.is--ctl-checkout.is--minimal-header .header-main .btn--back-top-shop {
  border: 1px solid #48a2e7 !important;
}
@media screen and (max-width: 48em) {
  .is--ctl-checkout.is--minimal-header .header-main .btn--back-top-shop {
    margin-top: 0 !important;
  }
}
#one-page-checkout .product--table .column--quantity {
  margin-bottom: 0rem;
}
.opc--col-1 {
  display: flex;
  row-gap: 20px;
  width: 60%;
  flex-wrap: wrap;
}
.opc--col-1 #opc-register input[type="text"],
.opc--col-1 #opc-register input[type="password"] {
  width: 93%;
  padding: 0.7rem;
}
@media screen and (min-width: 78.75em) {
  .opc--col-1 #opc-register input[type="text"],
  .opc--col-1 #opc-register input[type="password"] {
    width: 95% !important;
  }
}
.opc--col-1 #opc-register .register--field-city {
  width: 65.78%;
}
.opc--col-1 #opc-register .register--customertype {
  margin-right: 1rem !important;
}
.opc--col-1 #opc-register .register--customertype .select-field {
  width: 95% !important;
}
.opc--col-1 > div {
  width: 100%;
}
.opc--col-2 {
  width: 39%;
}
.product--table .table--media {
  width: 3rem;
  height: 4.375rem;
}
@media screen and (max-width: 30em) {
  .product--table .table--media {
    margin-top: 1rem;
  }
}
.product--table .table--media .table--media-outer {
  border: 0px solid #96c126;
}
.product--table .table--media .table--media-outer .table--media-inner {
  height: 4.5rem;
}
#one-page-checkout .register--overview.panel.has--border h2 {
  text-align: center;
  color: #48a2e7;
  border-bottom: 1px solid;
  padding-bottom: 6px;
}
#one-page-checkout .register--overview::after {
  content: "";
  display: block;
  height: 100%;
  width: 180px;
  position: absolute;
  top: 0px;
  right: 0px;
  border-bottom-right-radius: 25px;
  z-index: 9;
  transform: scaleY(-1);
  background: url(/themes/Frontend/KachouriGetraenke/frontend/_public/src/img/menu-bubbles.svg) -20px 0px no-repeat;
  background-position: -20px 0px;
  pointer-events: none;
}
#one-page-checkout .register--overview .product--table .panel .table--tr {
  z-index: 10;
  line-height: 1.1875rem;
  padding: 0rem 0.625rem 0.625rem 0.625rem;
  overflow: hidden;
}
#one-page-checkout .register--overview .product--table .panel .table--tr .column--label.quantity--label {
  display: none;
}
#one-page-checkout .register--overview .product--table .panel .table--tr .column--image {
  width: 100%;
  height: 1.375rem;
  margin: 0rem 0.625rem 0rem 0rem;
  border-radius: 3px;
  float: left;
  position: relative;
}
@media screen and (min-width: 48em) {
  #one-page-checkout .register--overview .product--table .panel .table--tr .column--image {
    width: 10%;
  }
}
#one-page-checkout .register--overview .product--table .panel .table--tr .table--content {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}
@media screen and (min-width: 48em) {
  #one-page-checkout .register--overview .product--table .panel .table--tr .table--content {
    width: 70%;
  }
}
#one-page-checkout .register--overview .product--table .panel .table--tr .column--quantity {
  z-index: 10;
  align-items: center;
  padding: 0rem 0.625rem 0.625rem 0.625rem;
  width: 30%;
  display: flex;
  flex-flow: row wrap;
  margin: 0;
}
#one-page-checkout .register--overview .product--table .panel .table--tr .column--quantity .select-field {
  padding: 0rem;
}
#one-page-checkout .register--overview .product--table .panel .table--tr .column--quantity .select-field::after {
  display: none;
}
#one-page-checkout .register--overview .product--table .panel .table--tr .unit-price--label {
  display: none;
}
#one-page-checkout .register--overview .product--table .panel .table--tr .column--unit-price {
  font-weight: 700;
  width: 57%;
}
@media screen and (min-width: 30em) {
  #one-page-checkout .register--overview .product--table .panel .table--tr .column--unit-price {
    width: 66%;
    margin-right: 2rem;
  }
}
@media screen and (min-width: 48em) {
  #one-page-checkout .register--overview .product--table .panel .table--tr .column--unit-price {
    margin-left: 3.75rem;
    margin-right: 0rem;
    width: 20%;
  }
}
@media screen and (min-width: 64em) {
  #one-page-checkout .register--overview .product--table .panel .table--tr .column--unit-price {
    margin-left: 4.75rem;
    margin-right: 0rem;
  }
}
@media screen and (min-width: 78.75em) {
  #one-page-checkout .register--overview .product--table .panel .table--tr .column--unit-price {
    margin-left: 0rem;
    margin-right: 0rem;
    width: "";
  }
}
#one-page-checkout .register--overview .product--table .panel .table--tr .column--total-price {
  display: none;
}
#one-page-checkout .register--overview .product--table .panel .table--tr .column--product .table--content {
  padding: 0.625rem 0.625rem 0rem 0.625rem;
}
#one-page-checkout .register--overview .product--table .panel .table--tr .panel--td.column--actions {
  display: none;
}
#one-page-checkout .register--overview .product--table .basket--footer {
  background: #fff;
}
#one-page-checkout .checkout--quantity-price {
  display: flex !important;
  width: 100% !important;
  padding-left: 3.15rem;
}
#one-page-checkout .checkout--quantity-price .column--quantity {
  width: auto !important;
}
#one-page-checkout .checkout--quantity-price .column--unit-price {
  width: 70% !important;
  text-align: right !important;
}
#one-page-checkout .panel.has--border {
  border: 1px solid #48a2e7;
  border-radius: 8px;
  background: #fff;
}
#one-page-checkout .register--form,
#one-page-checkout .panel--body {
  background-color: #fff;
}
#one-page-checkout .register--overview .product--table .panel {
  border: none;
}
@media screen and (min-width: 78.75em) {
  .is--ctl-checkout.is--minimal-header .header-main .btn--back-top-shop {
    margin-right: 3rem;
  }
}
.free-shipping-container > h2 {
  color: #000;
  border-bottom: 0 !important;
  margin-top: 0 !important;
}
#one-page-checkout .register--shipment-and-payment,
#one-page-checkout .register--personal-data,
#one-page-checkout .register--shipment-and-payment-order-button {
  margin: 0;
}
#one-page-checkout .register--shipment-and-payment-order-button {
  margin: 0 auto;
  text-align: center !important;
  width: auto !important;
}
#one-page-checkout .payment--method-list > .panel--body {
  display: flex;
  flex-wrap: wrap;
}
#one-page-checkout .payment--method-list > .panel--body .payment--method {
  cursor: pointer;
  border: none;
  width: 50%;
}
#one-page-checkout .payment--method-list > .panel--body .payment--method .method--input {
  display: none;
}
#one-page-checkout .payment--method-list > .panel--body .payment--method .method--label {
  padding-left: 0 !important;
  text-align: center;
  margin-bottom: 1rem;
}
#one-page-checkout .payment--method-list > .panel--body .payment--method .payment--method-logo {
  margin-left: 0 !important;
}
#one-page-checkout .payment--method-list > .panel--body .payment--method .payment--method-logo img {
  object-position: center !important;
  width: 100% !important;
  height: 100px !important;
  object-fit: contain;
}
#one-page-checkout .dispatch--method {
  border: 2px solid rgba(0, 0, 0, 0.2);
  padding: 1rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.02);
  cursor: pointer;
}
#one-page-checkout .dispatch--method.selected-dispatch {
  border: 2px solid #48a2e7;
  background: #48a2e71a;
}
#one-page-checkout .dispatch--method .method--input {
  display: none;
}
#one-page-checkout .dispatch--method .method--label {
  padding-left: 0 !important;
  margin-bottom: 1rem;
  text-align: left;
}
#one-page-checkout .dispatch--method .method--description {
  padding-left: 0 !important;
  margin-bottom: 1rem;
}
#one-page-checkout .dispatch--method > .panel--group .deliverydate--panel {
  border: none;
  background: transparent;
}
#one-page-checkout .dispatch--method > .panel--group .deliverydate--panel > .panel--body.is--wide {
  background: transparent;
}
#one-page-checkout .dispatch--method > .panel--group .deliverydate--panel > .panel--body.is--wide #dtgs_delivery_date {
  width: 100% !important;
}
#one-page-checkout .payment--method-list > .panel--body .payment--method .payment--method-logo img {
  border: 3px solid rgba(0, 0, 0, 0.2);
  border-radius: 11px;
  padding: 0.5rem;
  width: 50% !important;
  margin: 0 auto !important;
}
#one-page-checkout .payment--method-list > .panel--body .payment--method.selected-payment .payment--method-logo img {
  border: 3px solid #48a2e7;
  border-radius: 11px;
  padding: 0.5rem;
  width: 50% !important;
  margin: 0 auto;
}
@media screen and (max-width: 48em) {
  #one-page-checkout .register--address .panel--body .register--field-city {
    margin-right: 0;
  }
  #one-page-checkout .register--address .panel--body .register--field-zipcode {
    width: 25%;
  }
  #one-page-checkout .register--address .panel-body .register--zip-city {
    display: flex;
  }
  #one-page-checkout .register--address .panel-body .register--zip-city .register--field-city {
    width: 73% !important;
  }
  #one-page-checkout {
    flex-direction: column-reverse;
  }
  #one-page-checkout .opc--col-2 {
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 1rem;
  }
  #one-page-checkout .opc--col-2 .aggregation--list {
    padding-bottom: 1.25rem !important;
  }
  #one-page-checkout .opc--col-1 {
    width: 100%;
  }
  #one-page-checkout .opc--col-1 .register--login-flex {
    flex-wrap: wrap;
  }
  #one-page-checkout .opc--col-1 .payment--method-logo {
    margin-left: 0;
    margin-top: 0.5rem;
  }
  #one-page-checkout .opc--col-1 .payment--method-logo img {
    width: 100% !important;
    height: 80px;
    margin-left: 0 !important;
  }
  #one-page-checkout .opc--col-1 .register--login-email,
  #one-page-checkout .opc--col-1 .register--login-password {
    width: 100% !important;
    margin: 0 !important;
  }
  #one-page-checkout .opc--col-1 .register--login-email input,
  #one-page-checkout .opc--col-1 .register--login-password input {
    width: 100%;
  }
  #one-page-checkout .opc--col-1 .panel--body {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    flex-wrap: wrap;
  }
  #one-page-checkout .opc--col-1 .panel--body .payment--method {
    width: 100%;
  }
  #one-page-checkout .opc--col-1 .register--personal-data,
  #one-page-checkout .opc--col-1 .register--shipment-and-payment {
    margin: 0;
    padding: 0;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  #one-page-checkout .opc--col-1 .register--privacy {
    flex-wrap: inherit !important;
  }
  #one-page-checkout .opc--col-1 .register--personal {
    margin-right: 0;
    background: #fff;
    padding-right: 1.25rem;
  }
  #one-page-checkout .opc--col-1 .register--customertype,
  #one-page-checkout .opc--col-1 .register--salutation {
    width: 99% !important;
    margin-right: 0 !important;
  }
  #one-page-checkout .opc--col-1 .register--salutation {
    margin-bottom: 1rem;
  }
  #one-page-checkout .opc--col-1 #opc-register > .panel--body {
    margin: 0;
  }
  #one-page-checkout .opc--col-1 #opc-register > .panel--body .register--customertype .select-field {
    width: 35% !important;
    max-width: 35% !important;
  }
  #one-page-checkout .opc--col-1 #opc-register > .panel--body .register--firstname,
  #one-page-checkout .opc--col-1 #opc-register > .panel--body .register--lastname,
  #one-page-checkout .opc--col-1 #opc-register > .panel--body .register--email,
  #one-page-checkout .opc--col-1 #opc-register > .panel--body .register--account-information,
  #one-page-checkout .opc--col-1 #opc-register > .panel--body .register--phone {
    width: 49.5% !important;
    margin: 0;
  }
  #one-page-checkout .opc--col-1 #opc-register > .panel--body .register--firstname input,
  #one-page-checkout .opc--col-1 #opc-register > .panel--body .register--lastname input,
  #one-page-checkout .opc--col-1 #opc-register > .panel--body .register--email input,
  #one-page-checkout .opc--col-1 #opc-register > .panel--body .register--account-information input,
  #one-page-checkout .opc--col-1 #opc-register > .panel--body .register--phone input {
    width: 100% !important;
    padding: 0.7rem;
  }
  #one-page-checkout .opc--col-1 #opc-register > .panel--body .register--firstname,
  #one-page-checkout .opc--col-1 #opc-register > .panel--body .register--account-information {
    padding-right: 0.25rem;
  }
  #one-page-checkout .opc--col-1 #opc-register > .panel--body .register--lastname,
  #one-page-checkout .opc--col-1 #opc-register > .panel--body .register--phone {
    padding-left: 0.25rem;
  }
  #one-page-checkout .opc--col-1 #opc-register > .panel--body .register--email,
  #one-page-checkout .opc--col-1 #opc-register > .panel--body .register--field.password {
    width: 100% !important;
  }
  #one-page-checkout .opc--col-1 #opc-register > .panel--body .register--email input,
  #one-page-checkout .opc--col-1 #opc-register > .panel--body .register--field.password input {
    padding: 0.7rem;
  }
  #one-page-checkout .opc--col-1 #opc-register > .panel--body .register--password-description {
    line-height: 1.1;
  }
  #one-page-checkout .opc--col-1 #opc-register > .register--address > .panel--body {
    margin-left: 0;
  }
}
.deliverydate--panel .panel--body {
  padding: 10px !important;
}
.deliverydate--panel .panel--title {
  margin-left: 10px !important;
  margin-right: 10px !important;
}
#one-page-checkout .dtgs-deliverydate--box .nice-select {
  width: 100%;
}
#one-page-checkout .text.flatpickr-input.flatpickr-input.form-control.input {
  width: 100% !important;
}
#one-page-checkout .footer--payment-icons {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-right: 1rem;
  flex-wrap: wrap;
}
#one-page-checkout .footer--payment-icons img {
  width: 9%;
  height: 2.75rem;
  object-fit: contain;
}
@media screen and (max-width: 30em) {
  #one-page-checkout .footer--payment-icons img {
    width: 25%;
  }
}
#one-page-checkout .footer--payment-icons > img {
  padding: 0.3rem;
}
#one-page-checkout .panel.register--company .panel--body.is--wide h3 {
  margin-bottom: 0.5rem;
}
#one-page-checkout .nice-select {
  border-radius: 0;
  background: #fff;
  margin-bottom: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  height: inherit;
  width: 89%;
  line-height: 2.5rem;
  font-weight: 400;
  font-size: 14px;
  padding-left: 0;
}
#one-page-checkout .nice-select .nice-select-dropdown {
  border-radius: 0px;
}
#one-page-checkout .nice-select .nice-select-dropdown ul li {
  padding-left: 1rem !important;
}
#one-page-checkout .nice-select .nice-select::after {
  top: 57%;
}
#one-page-checkout .register--customertype .nice-select,
#one-page-checkout .register--salutation .nice-select {
  width: 100%;
}
#one-page-checkout .nice-select .current {
  padding-left: 1rem;
}
#one-page-checkout .nice-select .nice-select-dropdown ul li {
  padding-left: 2.25rem;
}
#one-page-checkout .nice-select .type--bottle::before {
  content: "";
  background: url(/media/vector/72/d6/b9/glass-bottle.svg);
  width: 1.5rem;
  height: 1.8rem;
  position: absolute;
  left: 6px;
  background-size: contain;
  background-repeat: no-repeat;
  top: 5px;
  background-position: center;
}
#one-page-checkout .nice-select .type--box::before {
  content: "";
  background: url(/media/vector/58/e1/db/box-package.svg);
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  left: 6px;
  background-size: contain;
  background-repeat: no-repeat;
  top: 5px;
  background-position: center;
}
@media screen and (min-width: 78.75em) {
  #one-page-checkout .register--shipping div input {
    width: 1rem !important;
  }
  #one-page-checkout .register--shipping .js--fancy-select {
    box-shadow: none !important;
  }
  #one-page-checkout .register--address .panel--body {
    display: flex;
    flex-wrap: wrap;
  }
  #one-page-checkout .register--address .panel--body > h3 {
    width: 100%;
  }
  #one-page-checkout .register--address .panel--body .register--street {
    width: 32.3%;
  }
  #one-page-checkout .register--address .panel--body .register--zip-city {
    width: 30%;
    display: flex;
    padding-top: 0.625rem;
  }
  #one-page-checkout .register--address .panel--body div:nth-child(4) {
    padding-top: 0.625rem;
    width: 30%;
  }
  #one-page-checkout .register--address .panel--body .register--country {
    margin: 0;
    height: 2.75rem;
  }
  #one-page-checkout #opc-register .register--salutation.field--select {
    padding-left: 1rem !important;
  }
  #one-page-checkout #opc-register .register--firstname,
  #one-page-checkout #opc-register .register--account-information {
    margin-right: 1rem;
  }
  #one-page-checkout #opc-register .register--phone input {
    padding: 0.7rem;
    width: 95% !important;
  }
  #one-page-checkout #opc-register .register--firstname .select-field,
  #one-page-checkout #opc-register .register--customertype .select-field {
    width: 100% !important;
    max-width: 100% !important;
  }
  #one-page-checkout #opc-register .register--firstname input,
  #one-page-checkout #opc-register .register--customertype input,
  #one-page-checkout #opc-register .register--firstname select,
  #one-page-checkout #opc-register .register--customertype select {
    width: 100% !important;
  }
  .register--address .welo-register-additional-content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 1rem;
  }
  .register--address .welo-register-additional-content #requiredElevatorCheck {
    opacity: 0;
    position: relative;
    right: 4.5vw;
    z-index: -1;
  }
  .register--address .welo-register-additional-content #registerweloHouseFloor {
    margin-bottom: 0;
  }
  .register--address .welo-register-additional-content .register--welo-elevator-available {
    width: 58%;
  }
  .register--address .welo-register-additional-content .register--welo-elevator-available > label {
    margin-right: 1rem;
  }
  .register--address .welo-register-additional-content .register--welo-address-comment {
    padding-top: 0;
    width: 100% !important;
  }
  .register--address .welo-register-additional-content .register--welo-address-comment textarea {
    width: 100% !important;
    border: 1px solid #48a2e7;
    border-top-color: #48a2e7;
  }
  .register--address .register--welo-elevator-available label {
    line-height: 2.75rem;
  }
  #one-page-checkout .register--shipping div input {
    width: 1rem !important;
  }
}
#one-page-checkout #opc-register .register--salutation.field--select {
  padding-left: 0 !important;
}
@media screen and (max-width: 48em) {
  #one-page-checkout .register--zip-city {
    display: flex;
  }
  #one-page-checkout .register--field-street {
    width: 98%;
  }
  #one-page-checkout .register--shipping .panel--body div input {
    width: 98% !important;
  }
  #one-page-checkout .address-level2 {
    width: 71.25% !important;
  }
  #one-page-checkout #salutation2 .js--fancy-select,
  #one-page-checkout .register--country .js--fancy-select,
  #one-page-checkout .register--salutation .js--fancy-select,
  #one-page-checkout .register--country .js--fancy-select,
  #one-page-checkout .welo-register-additional-content .js--fancy-select,
  #one-page-checkout #salutation2 .field--select.select-field,
  #one-page-checkout .register--country .field--select.select-field,
  #one-page-checkout .register--salutation .field--select.select-field,
  #one-page-checkout .register--country .field--select.select-field,
  #one-page-checkout .welo-register-additional-content .field--select.select-field {
    width: 100% !important;
    max-width: 100% !important;
  }
  .image-slider--container .image-slider--slide .image--box {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}
@media screen and (max-width: 64em) {
  .opc--col-1 #opc-register .register--companyname,
  .opc--col-1 #opc-register .register--department,
  .opc--col-1 #opc-register .register--firstname,
  .opc--col-1 #opc-register .register--lastname,
  .opc--col-1 #opc-register .register--street,
  .opc--col-1 #opc-register .register--zip-city {
    width: 50%;
    padding: 0 !important;
    margin: 0 !important;
  }
  .opc--col-1 #opc-register .register--companyname input[type="text"],
  .opc--col-1 #opc-register .register--department input[type="text"],
  .opc--col-1 #opc-register .register--firstname input[type="text"],
  .opc--col-1 #opc-register .register--lastname input[type="text"],
  .opc--col-1 #opc-register .register--street input[type="text"],
  .opc--col-1 #opc-register .register--zip-city input[type="text"] {
    width: 100% !important;
  }
}
@media screen and (max-width: 48em) {
  .is--ctl-checkout .flatpickr-calendar {
    left: 50% !important;
    transform: translateX(-50%);
  }
}
#shipping-2 {
  text-align: center;
}
.block-group.row--tos {
  position: relative;
  z-index: 10;
}
#one-page-checkout .register--shipping > .panel--body {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
#one-page-checkout .register--shipping h3 {
  width: 100%;
}
#one-page-checkout .register--shipping .register--salutation {
  padding-left: 0 !important;
}
#one-page-checkout .register--shipping .register--salutation div {
  width: 100%;
  max-width: 100% !important;
}
#one-page-checkout .register--shipping div {
  width: 30%;
  padding-top: 0;
  height: fit-content;
}
#one-page-checkout .register--shipping div input[type="text"] {
  width: 100% !important;
}
#one-page-checkout .register--shipping .register--zip-city {
  display: flex;
}
#one-page-checkout .register--shipping .register--zip-city .register--field-city {
  width: 100% !important;
  margin-right: 0 !important;
}
#one-page-checkout .nice-select-dropdown {
  width: 100% !important;
}
#one-page-checkout .register--first--field::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(4px);
  -moz-backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}
#one-page-checkout .register--first--field::before {
  content: "Bitte einloggen oder Kundenkonto erstellen";
  position: absolute;
  z-index: 10;
  text-align: center;
  background: #48a2e7;
  padding: 0.5rem;
  color: #fff;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  border-radius: 3px;
  font-weight: 700;
}
#one-page-checkout .register--password-description {
  display: none;
}
#one-page-checkout .register--lastname {
  margin: 0 !important;
}
#one-page-checkout .opc--col-1 #opc-register input[type="password"] {
  width: 100% !important;
}
#one-page-checkout #shipping-2 {
  background: transparent;
}
.is--ctl-checkout.is--minimal-header .header-main {
  box-shadow: 0 1px 2px 0 #48a2e7 !important;
}
.is--ctl-checkout .review--title .review--google {
  align-items: center !important;
  margin-top: 0.5rem !important;
  width: 70%;
}
.is--ctl-checkout .google--review--link {
  cursor: pointer;
}
.is--ctl-checkout .review--link {
  margin: 0 auto;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  width: 90%;
  max-width: 450px;
  padding: 10px 5px;
  border: 1px solid #96c126;
  border-radius: 0.5em;
  margin-bottom: 2rem;
}
.is--ctl-checkout .review--link img {
  height: 75px;
}
.is--ctl-checkout .review--link p {
  margin: 0;
  padding: 0;
}
.is--ctl-checkout .panel.register--shipping .panel--body.is--wide h3 {
  margin-bottom: 1rem;
}
.is--ctl-checkout text.flatpickr-input.flatpickr-input.form-control.input {
  width: 100%;
}
.is--ctl-checkout .flatpickr-day {
  color: #000;
}
.is--ctl-checkout .flatpickr-day.disabled {
  color: rgba(57, 57, 57, 0.3);
}
.is--ctl-checkout .panel.register--company .panel--body {
  display: flex;
  flex-wrap: wrap;
}
.is--ctl-checkout .panel.register--company .panel--body h3 {
  width: 100%;
  margin-bottom: 0.875rem;
}
.is--ctl-checkout .panel.register--company .panel--body .register--companyname,
.is--ctl-checkout .panel.register--company .panel--body .register--department {
  width: 50%;
}
.is--ctl-checkout .panel.register--company .panel--body .register--companyname {
  padding-right: 0.125rem;
}
.is--ctl-checkout .panel.register--company .panel--body .register--department {
  padding-left: 0.125rem;
}
.is--ctl-checkout .register--ustid.form-padding-bottom {
  display: none;
}
.is--ctl-checkout .register--street.form-padding-bottom {
  display: flex;
}
.is--ctl-checkout .select-field select,
.is--ctl-checkout .js--fancy-select select {
  border: none !important;
}
.is--ctl-checkout header.header-main {
  border: none !important;
}
.is--ctl-checkout .content-main--inner > .content--wrapper {
  max-width: 1200px;
  margin: 0 auto;
  border-bottom: 0;
}
.is--ctl-checkout .action .register-btn,
.is--ctl-checkout .register--shipment-and-payment-order-button button,
.is--ctl-checkout .register--field {
  border-top: 0;
  border: 1px solid #48a2e7;
}
.is--ctl-checkout .select-field:after {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.is--ctl-checkout input[type="text"] {
  border: 1px solid #48a2e7;
  border-top-color: #176fb2;
}
@media screen and (min-width: 78.75em) {
  .opc--col-1 #opc-register input[type="text"] {
    width: 100% !important;
  }
  #one-page-checkout #registerweloElevatorAvailable,
  #one-page-checkout #registerweloElevatorAvailable2 {
    margin-right: 1rem;
    position: relative;
    top: 2px;
  }
  #one-page-checkout #opc-register > .panel--body {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
  }
  #one-page-checkout #opc-register > .panel--body .register--firstname,
  #one-page-checkout #opc-register > .panel--body .register--lastname,
  #one-page-checkout #opc-register > .panel--body .register--email,
  #one-page-checkout #opc-register > .panel--body .register--account-information,
  #one-page-checkout #opc-register > .panel--body .register--phone,
  #one-page-checkout #opc-register > .panel--body .register--customertype,
  #one-page-checkout #opc-register > .panel--body .register--salutation {
    width: 33.3% !important;
    margin: 0 !important;
  }
  #one-page-checkout #opc-register > .panel--body .register--firstname input,
  #one-page-checkout #opc-register > .panel--body .register--lastname input,
  #one-page-checkout #opc-register > .panel--body .register--email input,
  #one-page-checkout #opc-register > .panel--body .register--account-information input,
  #one-page-checkout #opc-register > .panel--body .register--phone input,
  #one-page-checkout #opc-register > .panel--body .register--customertype input,
  #one-page-checkout #opc-register > .panel--body .register--salutation input {
    width: 100% !important;
    padding: 0.7rem;
    margin-bottom: 0rem !important;
  }
  #one-page-checkout #opc-register > .panel--body .register--salutation.field--select {
    margin-right: 1rem !important;
  }
  #one-page-checkout #opc-register > .panel--body .register--phone,
  #one-page-checkout #opc-register > .panel--body .register--salutation {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
  #one-page-checkout #opc-register .register--address .panel--body {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
  }
  #one-page-checkout #opc-register .register--address .panel--body .register--street,
  #one-page-checkout #opc-register .register--address .panel--body .register--country {
    width: 33.3% !important;
  }
  #one-page-checkout #opc-register .register--address .panel--body .register--zip-city {
    width: 33.3% !important;
    padding-left: 0.25rem !important;
  }
  #one-page-checkout #opc-register .register--address .panel--body .register--zip-city input {
    margin-right: 0.25rem !important;
  }
  #one-page-checkout #opc-register .welo-register-additional-content .field--select {
    width: 100% !important;
    max-width: 100% !important;
  }
  #one-page-checkout #opc-register .welo-register-additional-content .field--select .better-select {
    width: 100%;
  }
}
.opc--col-1 #opc-register .register--street input[type="text"].register--field-street {
  width: 60%;
  margin-right: 0.25rem;
}
.opc--col-1 #opc-register .register--street input[type="text"].register--field-housenumber {
  width: 40% !important;
}
@media screen and (min-width: 78.75em) {
  #one-page-checkout #opc-register .register--address .panel--body .register--street,
  #one-page-checkout #opc-register .register--address .panel--body .register--zip-city {
    width: 50% !important;
  }
}
@media screen and (max-width: 78.75em) {
  #one-page-checkout #opc-register .register--address .panel--body .register--street,
  #one-page-checkout #opc-register .register--address .panel--body .register--zip-city {
    width: 100% !important;
  }
}
@media screen and (min-width: 78.75em) {
  #one-page-checkout .register--address .panel--body .register--field-zipcode {
    width: 30% !important;
  }
  #one-page-checkout .register--address .panel--body div:nth-child(4) {
    padding-top: 0;
    margin-bottom: 0.5rem;
  }
}
.product--table .is--no-star {
  margin-left: 0;
}
#one-page-checkout .register--shipping .register--salutation.field--select {
  margin-right: 0;
}
#one-page-checkout .register--shipping div {
  width: 33.3%;
}
#one-page-checkout .register--shipping .section-shipping.shipping.street-address {
  width: 100% !important;
  margin: 0;
}
#one-page-checkout .register--shipping .register--firstname,
#one-page-checkout .register--shipping .register--account-information {
  padding-right: 0.25rem !important;
}
#one-page-checkout .register--shipping .register--welo-elevator-available {
  width: 60% !important;
  line-height: 2.5rem;
}
#one-page-checkout .register--shipping .welo-register-additional-content {
  display: flex;
  flex-wrap: wrap;
  width: 100% !important;
}
#one-page-checkout .register--shipping .welo-register-additional-content .register--welo-address-comment {
  width: 100% !important;
}
#one-page-checkout .register--shipping .welo-register-additional-content .register--welo-address-comment textarea {
  width: 100% !important;
}
@media screen and (max-width: 48em) {
  #one-page-checkout .register--shipping .register--welo-elevator-available {
    display: flex;
    width: 100% !important;
  }
  #one-page-checkout .register--shipping .register--welo-elevator-available label {
    width: 50%;
    text-align: center;
  }
  #one-page-checkout .register--shipping .register--welo-elevator-available label input {
    box-shadow: none;
  }
  #one-page-checkout .register--shipping .register--welo-elevator-available > label {
    width: 100%;
  }
  #one-page-checkout .nice-select.select--country.is--required.better-select {
    width: 100%;
  }
  #one-page-checkout .register--field.register--field-city.is--required {
    width: 72%;
  }
}
#one-page-checkout #opc-register .welo-register-additional-content .field--select {
  width: 34.5% !important;
  max-width: 34.5% !important;
  padding-right: 2.1rem;
}
@media screen and (max-width: 48em) {
  #one-page-checkout #opc-register .welo-register-additional-content .field--select {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0;
  }
  #one-page-checkout #opc-register .welo-register-additional-content .field--select .nice-select.better-select {
    width: 100%;
  }
}
@media screen and (min-width: 64em) {
  .opc--col-1 #opc-register .register--salutation,
  .opc--col-1 #opc-register .register--companyname,
  .opc--col-1 #opc-register .register--department,
  .opc--col-1 #opc-register .register--firstname,
  .opc--col-1 #opc-register .register--lastname,
  .opc--col-1 #opc-register .register--street,
  .opc--col-1 #opc-register .register--zip-city {
    width: 33% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .opc--col-1 #opc-register .register--salutation input[type="text"],
  .opc--col-1 #opc-register .register--companyname input[type="text"],
  .opc--col-1 #opc-register .register--department input[type="text"],
  .opc--col-1 #opc-register .register--firstname input[type="text"],
  .opc--col-1 #opc-register .register--lastname input[type="text"],
  .opc--col-1 #opc-register .register--street input[type="text"],
  .opc--col-1 #opc-register .register--zip-city input[type="text"] {
    width: 100% !important;
  }
  .opc--col-1 #opc-register .register--department {
    padding-left: 0.25rem !important;
  }
  .opc--col-1 #opc-register .register--salutation,
  .opc--col-1 #opc-register .register--firstname {
    padding-right: 0.25rem !important;
  }
  .opc--col-1 #opc-register > .panel--body .register--lastname {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
  .opc--col-1 #opc-register > .panel--body .register--firstname {
    padding: 0 !important;
  }
}
@media screen and (max-width: 30em) {
  #one-page-checkout .opc--col-1 #opc-register > .panel--body .register--firstname {
    padding-right: 0.25rem !important;
  }
  .opc--col-1 #opc-register .register--zip-city input[type="text"] {
    margin-left: 0 !important;
  }
  #one-page-checkout .opc--col-1 #opc-register > .panel--body .register--phone {
    padding-left: 0 !important;
  }
  .opc--col-1 #opc-register .register--companyname {
    padding-right: 0.25rem !important;
  }
  #one-page-checkout .register--overview .product--table .panel .table--tr .column--unit-price {
    margin-left: 0rem;
  }
  .register--welo-elevator-available {
    display: block !important;
  }
  #one-page-checkout .register--shipping .register--welo-elevator-available > label {
    width: -webkit-fill-available !important;
  }
  #one-page-checkout .register--shipping .panel--body div input {
    width: auto !important;
  }
  .is--ctl-checkout > .content-main {
    margin-top: 0;
  }
}
.panel--body h3 {
  margin-bottom: 1rem !important;
}
.register--field.register--field-attribute-welo-address-comment {
  width: 100%;
}
@media screen and (max-width: 64em) {
  .panel.register--personal {
    padding-right: 0;
  }
}
@media screen and (max-width: 30em) {
  .is--ctl-checkout.is--minimal-header .header-main .logo--link {
    margin-top: 1rem;
  }
}
@media screen and (min-width: 48em) {
  .is--ctl-checkout.is--minimal-header .header-main .logo--link {
    margin-top: 0rem;
  }
}
#shipping-2 .dtgs-deliverydate--box {
  text-align: left;
}
#shipping-2 .grid_10.lase.select-container {
  display: flex;
  flex-wrap: wrap;
}
#shipping-2 .grid_10.lase.select-container .nice-select {
  width: 100% !important;
}
@media screen and (min-width: 30em) {
  #shipping-2 .grid_10.lase.select-container .nice-select {
    width: 80% !important;
  }
}
@media screen and (min-width: 48em) {
  #shipping-2 .grid_10.lase.select-container .nice-select {
    width: 40% !important;
  }
}
@media screen and (min-width: 64em) {
  #shipping-2 .grid_10.lase.select-container .nice-select {
    width: 40% !important;
  }
}
@media screen and (min-width: 78.75em) {
  #shipping-2 .grid_10.lase.select-container .nice-select {
    width: 30% !important;
  }
}
.opc--col-1 #opc-register .register--street,
.opc--col-1 #opc-register .register--zip-city {
  width: 50% !important;
  padding-left: 0 !important;
}
@media screen and (max-width: 64em) {
  .opc--col-1 #opc-register .register--street,
  .opc--col-1 #opc-register .register--zip-city {
    width: 100% !important;
  }
}
.opc--col-1 #opc-register .register--street .register--field-zipcode,
.opc--col-1 #opc-register .register--zip-city .register--field-zipcode {
  margin-left: 0.25rem;
}
.opc--col-1 #opc-register .register--street input[type="text"].register--field-street,
.opc--col-1 #opc-register .register--zip-city input[type="text"].register--field-street {
  width: 77% !important;
}
#one-page-checkout .product--table .content--title {
  line-height: 19px;
}
#one-page-checkout .register--companyname,
#one-page-checkout .register--lastname {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important;
}
#one-page-checkout .welo-register-additional-content > .field--select {
  padding-right: 0.7rem;
  margin-right: 1rem;
}
#one-page-checkout .register--login-lost-action-flex {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap;
}
@media screen and (min-width: 48em) {
  #one-page-checkout .register--login-lost-action-flex {
    flex-direction: column;
  }
}
#one-page-checkout .register--login-lost-action-flex .register--login-lostpassword,
#one-page-checkout .register--login-lost-action-flex .action {
  width: 100%;
}
.free-shipping-container > h2.primary {
  color: #000 !important;
}
.free-shipping-container > h2.primary .icon--element.icon--check {
  color: #96c126 !important;
  font-size: 2rem;
  font-weight: 600;
}
.teaser--btn-print {
  display: none;
}
#one-page-checkout .debit {
  text-align: center;
}
#one-page-checkout .debit input {
  border: 1px solid rgba(0, 0, 0, 0.3);
  background: #fff;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
  color: #000;
  border-radius: 0;
}
.checkout--content.finish--content .finish--teaser {
  border: none;
  background: #fff;
  box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.05);
}
.checkout--content.finish--content .finish--teaser .review--link {
  transition: 0.2s;
  justify-content: center;
}
.checkout--content.finish--content .finish--teaser .review--link:hover {
  transform: scale(1.05);
}
.confirm--content .product--table .panel--body {
  color: #000000;
}
.confirm--content .product--table .basket--footer {
  background: #f8f8f8;
}
.is--act-finish .footer--vat-info {
  display: none;
}
.buybox--button .icon--basket:after {
  content: "+";
  top: 14px;
  left: 28px;
  font-size: 18px;
  position: absolute;
}
.ajax--cart .quantity--select {
  display: none;
}
.ajax--cart input[type="number"]::-webkit-inner-spin-button,
.ajax--cart input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ajax--cart input[type=number] {
  padding: 0;
  width: 32px;
  text-align: center;
  font-weight: bold;
  background: none;
  box-shadow: none;
  border: none;
  -moz-appearance: textfield;
  /* Firefox */
}
.ajax--cart .select-field:after {
  display: none;
}
.ajax--cart .item--name {
  font-weight: bold;
}
.quantity-holder-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  min-width: 0;
  max-width: 100px;
}
.quantity-holder-container i {
  cursor: pointer;
  background-color: lightgray;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 8pt;
  font-weight: bold;
  color: white;
}
.quantity-holder-container .append i {
  background-color: #48a2e7;
}
.quantity-holder-container div {
  padding: 0;
}
.quantity-holder-container input[type="number"]::-webkit-inner-spin-button,
.quantity-holder-container input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.quantity-holder-container input[type=number] {
  padding: 0;
  width: 32px;
  text-align: center;
  font-weight: bold;
  background: none;
  box-shadow: none;
  border: none;
  -moz-appearance: textfield;
  /* Firefox */
}
.zip--modal {
  text-align: center;
  padding-bottom: 25px;
  background: url("../../themes/Frontend/KachouriGetraenke/frontend/_public/src/img/menu-bubbles.svg") -210px top no-repeat, url("../../themes/Frontend/KachouriGetraenke/frontend/_public/src/img/menu-bubbles.svg") 110px top no-repeat;
}
.zip--modal.alternative {
  background: url("../../themes/Frontend/KachouriGetraenke/frontend/_public/src/img/menu-bubbles.svg") -210px top no-repeat, url("../../themes/Frontend/KachouriGetraenke/frontend/_public/src/img/menu-bubbles.svg") 530px top no-repeat;
}
.zip--modal .zip-header {
  background-color: #48a2e7;
  padding: 25px 10px;
  font-size: 18pt;
  text-align: center;
  color: #fff;
}
.zip--modal p {
  margin-top: 25px;
  font-size: 16px;
  text-align: center;
}
.zip--modal > p.big {
  font-size: 20px;
}
.zip--modal input {
  background: #fff !important;
  border: 1px solid #cccccc;
  text-align: center;
  font-size: 16px;
  margin: auto;
  max-width: 125px;
}
.zip--modal p.bereits-kunde {
  margin-top: 100px;
  margin-bottom: 10px;
}
.zip--modal a.btn,
.zip--modal button {
  margin: auto;
  font-size: 16px;
  background-color: #96c126;
  background-image: none;
  padding: 0.3rem 1.25rem 0.3rem 1.25rem;
}
.zip--modal a.btn:hover,
.zip--modal button:hover {
  background-color: #afd941;
}
.zip--modal .zip-enter-button {
  margin-top: 10px;
}
.zip--modal .columns {
  width: 100%;
  padding: 0px 20px;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: space-between;
}
.zip--modal .columns > div:first-child {
  padding-bottom: 25px;
}
.zip--modal .columns > div {
  padding: 0 20px;
  width: 100%;
}
.zip--modal .columns > div > h3 {
  margin-top: 0;
}
.zip--modal .columns > div span {
  color: #96c126;
}
.zip--modal .columns > div span.big {
  font-size: 20px;
}
.zip--modal .columns > div span.blue {
  color: #48a2e7;
}
.kachouri .columns {
  width: 100%;
  padding: 0px 20px;
  display: flex;
  flex-wrap: wrap;
  text-align: left;
  justify-content: space-between;
}
.kachouri .columns > div:first-child {
  padding-bottom: 25px;
}
.kachouri .columns > div {
  padding: 0 20px;
  width: 50%;
}
.kachouri .columns > div > h3 {
  margin-top: 0;
}
.kachouri .columns > div span {
  color: #96c126;
}
.kachouri .columns > div span.big {
  font-size: 20px;
}
.kachouri .columns > div span.blue {
  color: #48a2e7;
}
@media screen and (min-width: 48em) {
  .zip--modal .columns {
    flex-wrap: nowrap;
    text-align: left;
  }
  .zip--modal .columns > div:first-child {
    border-right: 1px solid #48a2e7;
    padding-bottom: unset;
  }
  .zip--modal .columns > div {
    width: 50%;
  }
}
.hersteller-slider .swiper {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
@media screen and (max-width: 48em) {
  div.kachouri-start-weiteres {
    padding-bottom: 1rem;
  }
  .js--modal {
    background: transparent;
    width: 100% !important;
  }
  .js--modal .content {
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
  }
  .js--modal .content .zip--modal,
  .js--modal .content .alternative {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
  }
  .js--modal .content .zip--modal .columns h3,
  .js--modal .content .alternative .columns h3,
  .js--modal .content .zip--modal .columns strong,
  .js--modal .content .alternative .columns strong {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .js--modal .content .zip--modal #second-modal-second-column,
  .js--modal .content .alternative #second-modal-second-column {
    border-top: 1px solid #96c126;
    padding-top: 1.5rem;
  }
}
.login--flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
}
.login--flex .login--left {
  background-image: url("https://img.joshua-gerke.de/wpxKZXJ.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
}
.login--flex .login--right {
  width: 100%;
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.login--flex .login--right > img {
  display: none;
}
.login--flex .login--right > div {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.login--flex .login--right > div > div {
  padding-top: 0;
  padding-bottom: 50px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.login--flex .login--right > div > div > h1 {
  font-size: 1.875rem;
  color: #707070;
  margin-top: 0;
  font-weight: bolder;
}
.login--flex .login--right > div > div > p {
  padding-top: 10px;
  font-size: 14px;
  font-weight: normal;
  color: #707070;
  margin-bottom: 0;
  line-height: 20px;
}
.login--flex .login--right > div > div > p a {
  text-decoration: underline;
  color: #707070;
}
@media screen and (min-width: 54em) {
  .login--flex .login--right > div > div > p {
    padding-top: 50px;
  }
}
.login--flex .login--right > div > div #login--form {
  width: 100%;
  margin-bottom: 15px;
}
.login--flex .login--right > div > div #login--form input {
  width: 100%;
  background-color: white;
  border-radius: 0;
  border: none;
  color: #707070;
  font-size: 15px;
  padding: 15px 20px;
  border-left: 5px solid transparent;
  box-shadow: 0 6px 20px #e1e1e1;
  /* FF 4-18 */
  /* FF 19+ */
  /* IE 10+ */
}
.login--flex .login--right > div > div #login--form input:focus {
  border: none;
  border-left: 5px solid #96c126;
}
.login--flex .login--right > div > div #login--form input::placeholder {
  color: #707070;
  font-size: 15px;
  opacity: 1;
}
.login--flex .login--right > div > div #login--form input:focus::-webkit-input-placeholder {
  color: transparent;
}
.login--flex .login--right > div > div #login--form input:focus:-moz-placeholder {
  color: transparent;
}
.login--flex .login--right > div > div #login--form input:focus::-moz-placeholder {
  color: transparent;
}
.login--flex .login--right > div > div #login--form input:focus:-ms-input-placeholder {
  color: transparent;
}
.login--flex .login--right > div > div #login--form input:focus::placeholder {
  color: transparent;
}
.login--flex .login--right > div > div #login--form input::-ms-input-placeholder {
  color: #707070;
  font-size: 20px;
  opacity: 1;
}
.login--flex .login--right > div > div #login--form .register--login-email {
  position: relative;
  margin-bottom: 10px;
  margin-top: 10px;
}
.login--flex .login--right > div > div #login--form .register--login-email span {
  z-index: 10;
  color: #bdbdbd;
  font-size: 13px;
  position: absolute;
  top: 0px;
  left: 25px;
}
.login--flex .login--right > div > div #login--form .register--login-action {
  margin-top: 20px;
}
.login--flex .login--right > div > div #login--form .register--login-action button {
  background-color: #96c126;
  background-image: none;
}
.login--flex .login--right > div > div #login--form .register--login-action button:hover {
  background-color: #648119;
}
@media screen and (min-width: 48em) {
  .login--flex {
    width: 90%;
    margin: 0 auto;
  }
  .login--flex .login--right {
    padding-top: 70px;
  }
  .login--flex > div > div > p {
    font-size: 18px;
  }
  .login--flex > div > div #login--form input {
    width: 100%;
    background-color: white;
    border-radius: 0;
    border: none;
    color: #707070;
    font-size: 20px;
    padding: 20px 20px;
    border-left: 5px solid transparent;
    box-shadow: 0 6px 20px #e1e1e1;
  }
  .login--flex > div > div #login--form input::placeholder {
    color: #707070;
    font-size: 20px;
    opacity: 1;
  }
  .login--flex > div > div #login--form .register--login-email span {
    z-index: 10;
    color: #bdbdbd;
    font-size: 15px;
    position: absolute;
    top: 3px;
    left: 25px;
  }
}
@media screen and (min-width: 64em) {
  .login--flex {
    width: 100%;
    margin: 0 auto;
  }
  .login--flex .login--left {
    width: 33% !important;
  }
  .login--flex .login--right {
    width: 67% !important;
    justify-content: flex-end !important;
  }
  .login--flex .login--right .login--right-inner h1 {
    line-height: 3rem;
  }
  .login--flex .login--right > img {
    display: block;
  }
  .login--flex .login--right > div > div {
    padding-top: 50px;
    width: 600px !important;
    padding-bottom: 100px !important;
  }
  .login--flex .login--right > div > div > h1 {
    font-size: 2.875rem !important;
    margin-top: 2.125rem !important;
  }
  .login--flex .login--right > div > div #login--form {
    width: unset !important;
  }
  .login--flex .login--right > div > div #login--form input {
    width: 450px !important;
  }
}
.is--target-account .content-main--inner {
  padding: 0;
}
.is--target-account .content-main {
  padding-top: 101px !important;
}
@media screen and (max-width: 48em) {
  .is--ctl-register .content-main {
    padding-top: 25px !important;
  }
}
@media screen and (min-width: 78.75em) {
  .is--target-account .content-main {
    margin-bottom: 0;
  }
}
.steps--content .steps--entry .icon {
  background-color: #96c126;
  background-image: none;
}
.steps--content .is--active .icon {
  background-color: #48a2e7;
  background-image: none;
}
.newsletter--content.content.block .newsletter--headline {
  padding-left: 9vw;
}
@media screen and (max-width: 30em) {
  .newsletter--content.content.block .newsletter--headline {
    padding-left: 7vw;
  }
}
.newsletter--content.content.block .panel--body.has--border,
.newsletter--content.content.block .panel.has--border {
  border: none;
  background: #fff;
  box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.03);
}
.newsletter--content.content.block .panel--body.has--border .panel--title,
.newsletter--content.content.block .panel.has--border .panel--title {
  width: fit-content;
}
.newsletter--content.content.block .panel--body.has--border h2,
.newsletter--content.content.block .panel.has--border h2 {
  margin-left: 9vw;
}
@media screen and (max-width: 30em) {
  .newsletter--content.content.block .panel--body.has--border h2,
  .newsletter--content.content.block .panel.has--border h2 {
    margin-left: 7vw;
  }
}
.newsletter--content.content.block .panel--body.has--border select,
.newsletter--content.content.block .panel.has--border select,
.newsletter--content.content.block .panel--body.has--border input,
.newsletter--content.content.block .panel.has--border input {
  background: #fff;
}
.newsletter--content.content.block .panel--body.has--border input,
.newsletter--content.content.block .panel.has--border input {
  padding: 0.65rem;
}
.newsletter--content.content.block .panel--body.has--border form > .panel--body.is--wide,
.newsletter--content.content.block .panel.has--border form > .panel--body.is--wide {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 80%;
}
@media screen and (max-width: 30em) {
  .newsletter--content.content.block .panel--body.has--border form > .panel--body.is--wide,
  .newsletter--content.content.block .panel.has--border form > .panel--body.is--wide {
    max-width: 100%;
  }
}
.newsletter--content.content.block .panel--body.has--border form > .panel--body.is--wide .newsletter--subscription,
.newsletter--content.content.block .panel.has--border form > .panel--body.is--wide .newsletter--subscription,
.newsletter--content.content.block .panel--body.has--border form > .panel--body.is--wide .newsletter--email,
.newsletter--content.content.block .panel.has--border form > .panel--body.is--wide .newsletter--email,
.newsletter--content.content.block .panel--body.has--border form > .panel--body.is--wide .newsletter--required-info,
.newsletter--content.content.block .panel.has--border form > .panel--body.is--wide .newsletter--required-info,
.newsletter--content.content.block .panel--body.has--border form > .panel--body.is--wide .newsletter--captcha-form,
.newsletter--content.content.block .panel.has--border form > .panel--body.is--wide .newsletter--captcha-form,
.newsletter--content.content.block .panel--body.has--border form > .panel--body.is--wide .privacy-information,
.newsletter--content.content.block .panel.has--border form > .panel--body.is--wide .privacy-information,
.newsletter--content.content.block .panel--body.has--border form > .panel--body.is--wide .nesletter--action,
.newsletter--content.content.block .panel.has--border form > .panel--body.is--wide .nesletter--action {
  width: 33%;
  padding-right: 0.2rem;
}
@media screen and (max-width: 30em) {
  .newsletter--content.content.block .panel--body.has--border form > .panel--body.is--wide .newsletter--subscription,
  .newsletter--content.content.block .panel.has--border form > .panel--body.is--wide .newsletter--subscription,
  .newsletter--content.content.block .panel--body.has--border form > .panel--body.is--wide .newsletter--email,
  .newsletter--content.content.block .panel.has--border form > .panel--body.is--wide .newsletter--email,
  .newsletter--content.content.block .panel--body.has--border form > .panel--body.is--wide .newsletter--required-info,
  .newsletter--content.content.block .panel.has--border form > .panel--body.is--wide .newsletter--required-info,
  .newsletter--content.content.block .panel--body.has--border form > .panel--body.is--wide .newsletter--captcha-form,
  .newsletter--content.content.block .panel.has--border form > .panel--body.is--wide .newsletter--captcha-form,
  .newsletter--content.content.block .panel--body.has--border form > .panel--body.is--wide .privacy-information,
  .newsletter--content.content.block .panel.has--border form > .panel--body.is--wide .privacy-information,
  .newsletter--content.content.block .panel--body.has--border form > .panel--body.is--wide .nesletter--action,
  .newsletter--content.content.block .panel.has--border form > .panel--body.is--wide .nesletter--action {
    max-width: 100%;
    width: 100%;
  }
}
.newsletter--content.content.block .panel--body.has--border .privacy-information,
.newsletter--content.content.block .panel.has--border .privacy-information {
  max-width: 100%;
  width: 100%;
  padding: 0;
  margin-bottom: 1rem;
}
.newsletter--content.content.block .panel--body.has--border .newsletter--additional-form,
.newsletter--content.content.block .panel.has--border .newsletter--additional-form {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.newsletter--content.content.block .panel--body.has--border .newsletter--additional-form .newsletter--salutation,
.newsletter--content.content.block .panel.has--border .newsletter--additional-form .newsletter--salutation,
.newsletter--content.content.block .panel--body.has--border .newsletter--additional-form .newsletter--firstname,
.newsletter--content.content.block .panel.has--border .newsletter--additional-form .newsletter--firstname,
.newsletter--content.content.block .panel--body.has--border .newsletter--additional-form .newsletter--lastname,
.newsletter--content.content.block .panel.has--border .newsletter--additional-form .newsletter--lastname,
.newsletter--content.content.block .panel--body.has--border .newsletter--additional-form .newsletter--street,
.newsletter--content.content.block .panel.has--border .newsletter--additional-form .newsletter--street,
.newsletter--content.content.block .panel--body.has--border .newsletter--additional-form .newsletter--zip-city,
.newsletter--content.content.block .panel.has--border .newsletter--additional-form .newsletter--zip-city {
  width: 33%;
  padding-right: 0.2rem;
}
@media screen and (max-width: 30em) {
  .newsletter--content.content.block .panel--body.has--border .newsletter--additional-form .newsletter--salutation,
  .newsletter--content.content.block .panel.has--border .newsletter--additional-form .newsletter--salutation,
  .newsletter--content.content.block .panel--body.has--border .newsletter--additional-form .newsletter--firstname,
  .newsletter--content.content.block .panel.has--border .newsletter--additional-form .newsletter--firstname,
  .newsletter--content.content.block .panel--body.has--border .newsletter--additional-form .newsletter--lastname,
  .newsletter--content.content.block .panel.has--border .newsletter--additional-form .newsletter--lastname,
  .newsletter--content.content.block .panel--body.has--border .newsletter--additional-form .newsletter--street,
  .newsletter--content.content.block .panel.has--border .newsletter--additional-form .newsletter--street,
  .newsletter--content.content.block .panel--body.has--border .newsletter--additional-form .newsletter--zip-city,
  .newsletter--content.content.block .panel.has--border .newsletter--additional-form .newsletter--zip-city {
    max-width: 100%;
    width: 100%;
  }
}
.newsletter--content.content.block .panel--body.has--border .newsletter--additional-form .newsletter--firstname,
.newsletter--content.content.block .panel.has--border .newsletter--additional-form .newsletter--firstname,
.newsletter--content.content.block .panel--body.has--border .newsletter--additional-form .newsletter--lastname,
.newsletter--content.content.block .panel.has--border .newsletter--additional-form .newsletter--lastname,
.newsletter--content.content.block .panel--body.has--border .newsletter--additional-form .newsletter--street,
.newsletter--content.content.block .panel.has--border .newsletter--additional-form .newsletter--street {
  width: 16.66%;
}
@media screen and (max-width: 30em) {
  .newsletter--content.content.block .panel--body.has--border .newsletter--additional-form .newsletter--firstname,
  .newsletter--content.content.block .panel.has--border .newsletter--additional-form .newsletter--firstname,
  .newsletter--content.content.block .panel--body.has--border .newsletter--additional-form .newsletter--lastname,
  .newsletter--content.content.block .panel.has--border .newsletter--additional-form .newsletter--lastname,
  .newsletter--content.content.block .panel--body.has--border .newsletter--additional-form .newsletter--street,
  .newsletter--content.content.block .panel.has--border .newsletter--additional-form .newsletter--street {
    max-width: 100%;
    width: 100%;
  }
}
.forms--content.content.right .forms--headline.panel.panel--body.is--wide.has--border.is--rounded {
  padding-left: 9vw;
}
@media screen and (max-width: 30em) {
  .forms--content.content.right .forms--headline.panel.panel--body.is--wide.has--border.is--rounded {
    padding-left: 7vw;
  }
}
.forms--content.content.right .panel--body.has--border,
.forms--content.content.right .panel.has--border {
  border: none;
  background: #fff;
  box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.03);
}
.forms--content.content.right .panel--body.has--border .panel--title,
.forms--content.content.right .panel.has--border .panel--title {
  width: fit-content;
  margin-left: 9vw;
}
@media screen and (max-width: 30em) {
  .forms--content.content.right .panel--body.has--border .panel--title,
  .forms--content.content.right .panel.has--border .panel--title {
    margin-left: 7vw;
  }
}
.forms--content.content.right .panel--body.has--border select,
.forms--content.content.right .panel.has--border select,
.forms--content.content.right .panel--body.has--border input,
.forms--content.content.right .panel.has--border input {
  background: #fff;
}
.forms--content.content.right .panel--body.has--border input,
.forms--content.content.right .panel.has--border input {
  padding: 0.65rem;
}
.forms--content.content.right .panel--body.has--border form > .forms--inner-form.panel--body,
.forms--content.content.right .panel.has--border form > .forms--inner-form.panel--body {
  margin: 0 auto;
  max-width: 80%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
@media screen and (max-width: 30em) {
  .forms--content.content.right .panel--body.has--border form > .forms--inner-form.panel--body,
  .forms--content.content.right .panel.has--border form > .forms--inner-form.panel--body {
    max-width: 100%;
  }
}
.forms--content.content.right .panel--body.has--border form > .forms--inner-form.panel--body > div,
.forms--content.content.right .panel.has--border form > .forms--inner-form.panel--body > div {
  width: 33%;
  display: block;
  max-width: 30%;
  width: 30%;
}
@media screen and (max-width: 30em) {
  .forms--content.content.right .panel--body.has--border form > .forms--inner-form.panel--body > div,
  .forms--content.content.right .panel.has--border form > .forms--inner-form.panel--body > div {
    max-width: 100%;
    width: 100%;
  }
}
.forms--content.content.right .panel--body.has--border form > .forms--inner-form.panel--body .forms--captcha,
.forms--content.content.right .panel.has--border form > .forms--inner-form.panel--body .forms--captcha,
.forms--content.content.right .panel--body.has--border form > .forms--inner-form.panel--body .textarea,
.forms--content.content.right .panel.has--border form > .forms--inner-form.panel--body .textarea,
.forms--content.content.right .panel--body.has--border form > .forms--inner-form.panel--body .captcha--placeholder,
.forms--content.content.right .panel.has--border form > .forms--inner-form.panel--body .captcha--placeholder,
.forms--content.content.right .panel--body.has--border form > .forms--inner-form.panel--body .panel--body.is--wide,
.forms--content.content.right .panel.has--border form > .forms--inner-form.panel--body .panel--body.is--wide,
.forms--content.content.right .panel--body.has--border form > .forms--inner-form.panel--body .review--captcha,
.forms--content.content.right .panel.has--border form > .forms--inner-form.panel--body .review--captcha,
.forms--content.content.right .panel--body.has--border form > .forms--inner-form.panel--body .forms--required,
.forms--content.content.right .panel.has--border form > .forms--inner-form.panel--body .forms--required,
.forms--content.content.right .panel--body.has--border form > .forms--inner-form.panel--body .privacy-information,
.forms--content.content.right .panel.has--border form > .forms--inner-form.panel--body .privacy-information {
  max-width: 100%;
  width: 100%;
  padding: 0;
}
.forms--content.content.right .panel--body.has--border form > .forms--inner-form.panel--body .buttons,
.forms--content.content.right .panel.has--border form > .forms--inner-form.panel--body .buttons {
  width: auto;
}
.column--status .column--value {
  display: none;
}
/*
Components
====================================
The `components.less` contains the imports to all styled elements of Shopware.

The files are destinated inside the `_components` folder.
*/
.nice-select {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background-color: #fff;
  border-radius: 5px;
  border: solid 1px #e8e8e8;
  box-sizing: border-box;
  clear: both;
  cursor: pointer;
  display: block;
  float: left;
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  height: 38px;
  line-height: 36px;
  outline: none;
  padding-left: 18px;
  padding-right: 30px;
  position: relative;
  text-align: left !important;
  transition: all 0.2s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: auto;
}
.nice-select:hover {
  border-color: #dbdbdb;
}
.nice-select:active {
  border-color: #999;
}
.nice-select:focus {
  border-color: #999;
}
.nice-select:after {
  border-bottom: 2px solid #000;
  border-right: 2px solid #000;
  content: "";
  display: block;
  height: 5px;
  margin-top: -7px;
  pointer-events: none;
  position: absolute;
  right: 14px;
  top: 50%;
  transform-origin: 66% 66%;
  transform: rotate(45deg);
  transition: all 0.15s ease-in-out;
  width: 5px;
}
.nice-select .nice-select-dropdown {
  margin-top: 4px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 0;
  transform-origin: 50% 0;
  transform: scale(0.75) translateY(19px);
  transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  z-index: 9;
  opacity: 0;
}
.nice-select .list {
  border-radius: 5px;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0;
  max-height: 210px;
  overflow-y: auto;
}
.nice-select .list:hover .option:not(:hover) {
  background-color: transparent !important;
}
.nice-select .list::-webkit-scrollbar {
  width: 0;
}
.nice-select .option {
  cursor: pointer;
  font-weight: 400;
  line-height: 40px;
  list-style: none;
  outline: none;
  padding-left: 18px;
  padding-right: 29px;
  text-align: left;
  transition: all 0.2s;
}
.nice-select .option:hover {
  background-color: #48a2e7;
  color: #fff;
}
.nice-select .option.focus {
  background-color: #48a2e7;
}
.nice-select .option.selected.focus {
  background-color: #48a2e7;
}
.nice-select .option.selected {
  font-weight: bold;
  background-color: #48a2e7;
  color: #000 !important;
}
.nice-select .option.selected:hover {
  color: #fff !important;
}
.nice-select .option.disabled {
  background-color: transparent;
  color: #999;
  cursor: default;
}
.nice-select .optgroup {
  font-weight: bold;
}
.nice-select .has-multiple {
  white-space: inherit;
  height: auto;
  padding: 7px 12px;
  min-height: 36px;
  line-height: 22px;
}
.nice-select .has-multiple span.current {
  border: 1px solid #ccc;
  background: #eee;
  padding: 0 10px;
  border-radius: 3px;
  display: inline-block;
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 3px;
  margin-right: 3px;
}
.nice-select .has-multiple .multiple-options {
  display: block;
  line-height: 24px;
  padding: 0;
}
.nice-select .nice-select-search-box {
  box-sizing: border-box;
  width: 100%;
  padding: 5px;
  pointer-events: none;
  border-radius: 5px 5px 0 0;
}
.nice-select .nice-select-search {
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 3px;
  color: #444;
  display: inline-block;
  vertical-align: middle;
  padding: 7px 12px;
  margin: 0 10px 0 0;
  width: 100%;
  min-height: 36px;
  line-height: 22px;
  height: auto;
  outline: 0 !important;
  font-size: 14px;
}
.nice-select.open {
  border-color: #999;
}
.nice-select.open:after {
  transform: rotate(-135deg);
}
.nice-select.open .nice-select-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}
.nice-select.disabled {
  border-color: #ededed;
  color: #999;
  pointer-events: none;
}
.nice-select.disabled:after {
  border-color: #ccc;
}
.nice-select.wide {
  width: 100%;
}
.nice-select.wide .nice-select-dropdown {
  left: 0 !important;
  right: 0 !important;
}
.nice-select.right {
  float: right;
}
.nice-select.right .nice-select-dropdown {
  left: auto;
  right: 0;
}
.nice-select.small {
  font-size: 12px;
  height: 36px;
  line-height: 34px;
}
.nice-select.small:after {
  height: 4px;
  width: 4px;
}
.nice-select.small .option {
  line-height: 34px;
  min-height: 34px;
}
.no-csspointerevents .nice-select .nice-select-dropdown {
  display: none;
}
.no-csspointerevents .nice-select.open .nice-select-dropdown {
  display: block;
}
.tab-menu--cross-selling .tab--navigation,
.tab-menu--product .tab--navigation {
  background-color: #96c126;
  border-bottom: 1px solid #96c126;
  border-radius: 10px;
}
@media screen and (max-width: 48em) {
  .tab-menu--cross-selling .tab--navigation,
  .tab-menu--product .tab--navigation {
    border-radius: 0 !important;
  }
}
.tab-menu--cross-selling .tab--navigation .tab--link,
.tab-menu--product .tab--navigation .tab--link {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  background-image: none;
  transition: 0.2s;
}
@media screen and (max-width: 48em) {
  .tab-menu--cross-selling .tab--navigation .tab--link,
  .tab-menu--product .tab--navigation .tab--link {
    border-radius: 0 !important;
  }
}
.tab-menu--cross-selling .tab--navigation .tab--link:nth-child(2),
.tab-menu--product .tab--navigation .tab--link:nth-child(2) {
  border-radius: 0 !important;
}
.tab-menu--cross-selling .tab--navigation .tab--link:not(.no-hover).is--active,
.tab-menu--product .tab--navigation .tab--link:not(.no-hover).is--active {
  color: #ffffff;
  background: #75961e;
}
.tab-menu--cross-selling .tab--navigation .tab--link:not(.no-hover):hover,
.tab-menu--product .tab--navigation .tab--link:not(.no-hover):hover {
  background: #75961e;
}
.tab-menu--cross-selling .tab--navigation .tab--link.no-hover,
.tab-menu--product .tab--navigation .tab--link.no-hover {
  color: #ffffff;
}
.tab-menu--cross-selling .tab--container-list .tab--container,
.tab-menu--product .tab--container-list .tab--container {
  border: 0;
  padding: 0;
}
.tab-menu--cross-selling .tab--container-list .tab--container .tab--header,
.tab-menu--product .tab--container-list .tab--container .tab--header {
  background-color: #96c126;
  padding: 1em;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.tab-menu--cross-selling .tab--container-list .tab--container .tab--header .tab--title::after,
.tab-menu--product .tab--container-list .tab--container .tab--header .tab--title::after {
  color: #648119;
  right: 1.625rem;
}
.tab-menu--cross-selling .tab--container-list .tab--container .tab--preview,
.tab-menu--product .tab--container-list .tab--container .tab--preview {
  padding: 0 1em;
}
.tab-menu--cross-selling .tab--container-list .tab--container .tab--content,
.tab-menu--product .tab--container-list .tab--container .tab--content {
  padding: 0 1em;
}
.tab-menu--cross-selling .tab--container-list .tab--container .tab--content .viewed--content .product-slider,
.tab-menu--product .tab--container-list .tab--container .tab--content .viewed--content .product-slider {
  padding: 0;
}
.tab-menu--cross-selling .tab--container-list .tab--container .tab--content .viewed--content .product-slider .product-slider--container .product-slider--item,
.tab-menu--product .tab--container-list .tab--container .tab--content .viewed--content .product-slider .product-slider--container .product-slider--item {
  padding: 0.625rem 0.625rem 0.625rem 0.4rem;
}
.tab-menu--cross-selling .tab--container-list .tab--container .tab--content .viewed--content .product-slider .product-slider--arrow.arrow--next,
.tab-menu--product .tab--container-list .tab--container .tab--content .viewed--content .product-slider .product-slider--arrow.arrow--next {
  right: -1rem;
}
.tab-menu--cross-selling .tab--container-list .tab--container .tab--content .viewed--content .product-slider .product-slider--arrow.arrow--prev,
.tab-menu--product .tab--container-list .tab--container .tab--content .viewed--content .product-slider .product-slider--arrow.arrow--prev {
  left: -1rem;
}
.tab-menu--cross-selling .tab--navigation .tab--link {
  display: block !important;
  text-align: left !important;
}
.tab-menu--cross-selling .tab--container-list .tab--container .tab--header {
  padding: 0;
  margin-bottom: 1em;
}
.tab-menu--cross-selling .tab--container-list .tab--container .tab--header .tab--title {
  padding: 1rem !important;
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.product--details .content--description,
.product--details .content--product-reviews {
  padding-bottom: 0 !important;
}
.tab-menu--cross-selling .tab--container-list .tab--container .tab--header .tab--title::after,
.tab-menu--product .tab--container-list .tab--container .tab--header .tab--title::after {
  color: #fff;
  right: 1.625rem;
}
.select-field select,
.js--fancy-select select {
  background: #f8f8f8;
  color: #000000;
}
.select-field select option,
.js--fancy-select select option {
  color: #000000;
}
.select-field select:hover,
.js--fancy-select select:hover {
  background: #f8f8f8;
}
.select-field:after,
.js--fancy-select:after {
  color: #000000;
}
.select-field:after:hover,
.js--fancy-select:after:hover {
  color: #48a2e7;
}
textarea::placeholder,
input::placeholder {
  color: #000000;
}
label {
  color: #000000;
}
textarea,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
#paypal-acdc-form .field {
  background: #f8f8f8;
  color: #000000;
}
.action--filter-btn .filter--trigger.is--active.is--small {
  line-height: 1.5rem;
}
.action--filter-btn .filter--trigger.is--active {
  padding: 0.25rem 0.25rem 0.25rem 0.625rem;
}
.content--breadcrumb {
  max-width: 1200px;
  margin: 0 auto;
  border-bottom: 0;
}
.content--breadcrumb .breadcrumb--link {
  color: #000000;
}
.content--breadcrumb .breadcrumb--link:hover {
  color: #48a2e7;
}
.is--ctl-custom .content-main--inner {
  max-width: 1200px;
  margin: 0 auto;
}
.ordernow {
  margin-top: 1rem;
  margin-bottom: 1rem;
  background: #48a2e7;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  display: block;
  width: 60%;
  margin: 0 auto;
  position: relative;
  left: -1rem;
  text-align: center;
}
.ordernow:hover {
  color: #fff;
  background: #005392;
}
@media screen and (min-width: 48em) {
  .ordernow {
    margin-top: 1rem;
    margin-bottom: 1rem;
    background: #48a2e7;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    display: inline;
    width: 60%;
    margin: 0 auto;
    position: relative;
    left: 0rem;
    text-align: center;
    float: left;
  }
  .ordernow:hover {
    color: #fff;
    background: #005392;
  }
}
.bg-blue {
  background: #48a2e7;
}
.buybox--button-container .select-field:after,
.buybox--button-container .js--fancy-select:after {
  display: none;
}
@media screen and (min-width: 48em) {
  .content--breadcrumb {
    margin-top: 5rem;
  }
}
@media screen and (min-width: 64em) {
  .content--breadcrumb {
    margin-top: 2rem;
  }
}
@media screen and (min-width: 78.75em) {
  .content--breadcrumb {
    margin-top: 1rem;
  }
}
.btn:not(.is--primary) {
  color: #000000;
  background: #f8f8f8;
}
.btn:disabled,
.btn:disabled:hover,
.btn.is--disabled,
.btn.is--disabled:hover {
  color: #808080;
}
.list--unstyled .list--entry a {
  color: #000000;
}
.list--unstyled .list--entry a:hover {
  color: #648119;
}
.image-slider--container {
  position: static;
}
@media screen and (max-width: 64em) {
  .image-slider--container .image-slider--slide .image--box.image-slider--item::after {
    content: "\e827";
    font-family: emz-icons;
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 1.5rem;
    font-weight: 600;
    opacity: 0.5;
  }
}
.image-slider--container .image-slider--slide .image--box {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
@media screen and (min-width: 64em) {
  .image-slider--container .image-slider--slide .image--box {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.image-slider--container .arrow {
  color: #96c126;
  border: none;
  background: none;
  position: absolute;
}
.image-slider--container .arrow.is--left {
  left: -43px;
}
.image-slider--container .arrow.is--right {
  right: -43px;
}
.image-slider--container .arrow:hover {
  color: #48a2e7;
  background: none;
}
.image-slider--thumbnails .thumbnail--link {
  padding: 0;
}
.image-slider--thumbnails .thumbnail--image {
  border-radius: 3px;
}
.emtion--banner-slider {
  position: relative;
}
@media screen and (min-width: 48em) {
  .image-slider--container {
    margin-bottom: 0;
  }
  .image-slider--container .arrow {
    font-size: 3em;
  }
}
.kachouri-banner {
  margin-top: -170px;
}
.bg-white {
  background-color: white;
}
.mt-30 {
  margin-top: 30px;
}
.emotion--mode-rows .emotion--product-slider {
  height: 19.7em;
}
.emotion--product-slider .box--emotion .product--image {
  min-height: 10em;
}
.product-slider .product-slider--arrow {
  border: none;
  width: 3rem;
  height: 3rem;
  text-align: center;
  border-radius: 2rem;
  line-height: 3rem;
  transition: all 0.2s;
  background: #96c126;
  color: #fff;
  opacity: 0.5;
  font-size: 1.5rem !important;
}
.product-slider .product-slider--arrow:hover {
  opacity: 1;
}
.product-slider .product-slider--arrow.arrow--next {
  margin-right: 1rem;
}
.product-slider .product-slider--arrow.arrow--prev {
  margin-left: 1rem;
}
.product-slider .product-slider--item {
  padding: 0.625rem 1.2rem 0.625rem 1.2rem;
}
.product-slider .product-slider--item .product--box {
  background: white;
  border-radius: 0.25px;
  box-shadow: 0 0 0 6px #96c126;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.product-slider .product-slider--item .product--box .product--badges .product--badge {
  margin: 0rem 0rem 0.3125rem 0.1rem;
}
.product-slider .product-slider--item .product--box .product--title {
  text-align: left;
  padding: 0 10px;
  height: auto;
}
.product-slider .product-slider--item .product--box .product--price-info {
  height: auto;
  padding: 0 10px;
}
.product-slider .product-slider--item .product--box .product--price-info .price--unit[title] {
  text-align: left;
  color: #000000;
  opacity: 0.6;
}
.product-slider .product-slider--item .product--box .product--price-info .product--price {
  color: #96c126;
  font-weight: bold;
  text-align: right;
}
.product-slider .product-slider--item .product--box .product--price-info .product--price .price--default {
  color: #96c126;
  font-size: 1rem;
}
.product-slider .product-slider--item .product--box .product--price-info .product--price .price--pseudo {
  color: #96c126;
}
.product-slider .product-slider--item .product--box .product--price-info .product--price .price--pseudo .price--discount {
  text-decoration-color: #648119;
}
.emotion-title-top {
  padding-top: 0.9375rem;
  transform: scale(1.5);
}
@media screen and (min-width: 48em) {
  .product-slider .product-slider--arrow {
    font-size: 3em;
  }
  .emotion-title-top {
    padding-top: 2.03125rem;
    transform: unset;
  }
}
@media screen and (min-width: 48em) {
  .product-slider .product-slider--arrow {
    border: none;
    width: 3rem;
    height: 3rem;
    text-align: center;
    border-radius: 2rem;
    line-height: 3rem;
    transition: all 0.2s;
    background: #96c126;
    color: #fff;
    opacity: 0.5;
    font-size: 1.5rem !important;
  }
  .product-slider .product-slider--arrow:hover {
    opacity: 1;
  }
}
@media screen and (min-width: 64em) {
  .product-slider .product-slider--arrow {
    border: none;
    width: 4rem;
    height: 4rem;
    text-align: center;
    border-radius: 2rem;
    line-height: 4rem;
    transition: all 0.2s;
    background: #96c126;
    color: #fff;
    opacity: 0.5;
    font-size: 2rem !important;
  }
  .product-slider .product-slider--arrow:hover {
    opacity: 1;
  }
}
.product-slider .product-slider--item .product--box {
  box-shadow: none;
  border: 10px solid #96c126;
  border-radius: 5px;
}
.product-slider .product-slider--item .product--box .product--price-info {
  display: flex;
}
.product-slider .product-slider--item .product--box .product--price-info .price--unit {
  width: 70%;
}
.product-slider .product-slider--item .product--box .product--price-info .product--price {
  width: 30%;
}
@media screen and (max-width: 48em) {
  .product-slider .product-slider--item {
    padding: 0.625rem 0.1rem 0.625rem 0.1rem;
  }
}
.emotion--product-slider .box--emotion .product--info {
  padding-top: 1rem;
}
.emotion--product-slider .box--emotion .product--info span.image--media::after {
  position: absolute;
  content: "";
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.15), transparent);
  width: 70%;
  height: 0.15rem;
  bottom: 0;
  z-index: 1000;
  left: 50%;
  transform: translateX(-50%);
}
.emotion--product-slider .box--emotion .product--details {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  place-content: end;
  max-height: 30%;
  width: 100%;
  margin-top: 0%;
  height: 100%;
}
.emotion--product-slider .box--emotion .product--details .product--title {
  margin-bottom: 0.5rem;
  font-size: 0.98rem;
  font-weight: 500;
}
.emotion--product-slider .box--emotion .product--details .product--price-info .price--unity span {
  font-size: 0.7rem;
}
.emotion--product-slider .box--emotion::after {
  position: absolute;
  top: 0.8rem;
  right: 1.3rem;
  font-family: "emz-icons";
  content: "\e828";
  color: #fff;
  background: #96c126;
  padding: 0.4rem;
  padding-right: 0.75rem;
  font-size: 2.5rem;
  border-radius: 0.4rem;
  padding-left: 0.75rem;
}
@media screen and (max-width: 30em) {
  .emotion--product-slider .box--emotion::after {
    right: 0.5rem;
  }
}
.emotion--product-slider .box--emotion .product--image {
  margin-bottom: 0.25rem;
}
.tab-menu--cross-selling .product-slider--container .box--content .product--info {
  padding-top: 1rem;
}
.tab-menu--cross-selling .product-slider--container .box--content .product--info span.product--title-container a {
  height: 2.8rem !important;
}
.tab-menu--cross-selling .product-slider--container .box--content .product--info .variant--description {
  display: none;
}
.tab-menu--cross-selling .product-slider--container .box--content .product--info span.image--media::after {
  position: absolute;
  content: "";
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.15), transparent);
  width: 70%;
  height: 0.15rem;
  bottom: 0;
  z-index: 1000;
  left: 50%;
  transform: translateX(-50%);
}
.tab-menu--cross-selling .product-slider--container .box--content .product--details {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  place-content: end;
  max-height: 30%;
  width: 100%;
  margin-top: 0%;
  height: 100%;
}
.tab-menu--cross-selling .product-slider--container .box--content .product--details .product--title {
  margin-bottom: 0.5rem;
  font-size: 0.98rem;
  font-weight: 500;
}
.tab-menu--cross-selling .product-slider--container .box--content .product--details .product--price-info .price--unity span {
  font-size: 0.7rem;
}
.tab-menu--cross-selling .product-slider--container .box--content::after {
  position: absolute;
  top: -0.2rem;
  right: -0.2rem;
  font-family: "emz-icons";
  content: "\e828";
  color: #fff;
  background: #96c126;
  padding: 0.4rem;
  padding-right: 0.75rem;
  font-size: 2.5rem;
  border-radius: 0.4rem;
  padding-left: 0.75rem;
}
@media screen and (max-width: 30em) {
  .tab-menu--cross-selling .product-slider--container .box--content::after {
    right: 0.5rem;
  }
}
.tab-menu--cross-selling .product-slider--container .box--content .product--image {
  margin-bottom: 0.25rem;
}
.product-slider.product-slider--content::before {
  content: "";
  position: absolute;
  width: 30%;
  height: 100%;
  background: linear-gradient(to right, #f8f8f8, transparent);
  opacity: 0.5;
  left: 0rem;
  pointer-events: none;
  z-index: 1;
  top: 0;
}
@media screen and (max-width: 30em) {
  .product-slider.product-slider--content::before {
    opacity: 0.2;
  }
}
.product-slider.product-slider--content::after {
  content: "";
  position: absolute;
  width: 30%;
  height: 100%;
  background: linear-gradient(to left, #f8f8f8, transparent);
  opacity: 0.5;
  right: 0rem;
  pointer-events: none;
  z-index: 1;
  top: 0;
}
@media screen and (max-width: 30em) {
  .product-slider.product-slider--content::after {
    opacity: 0.2;
  }
}
#cookie-consent .cookie-consent--description {
  color: #000000;
}
#cookie-consent .cookie-consent--configuration .cookie-consent--group-description {
  color: #000000;
}
#cookie-consent .cookie-consent--state-label {
  color: #000000;
}
.off-canvas,
.offcanvas--overlay {
  background: white;
}
.offcanvas--overlay {
  background: #f8f8f8 !important;
}
.offcanvas--overlay .overlay--headline {
  background: #f8f8f8 !important;
}
.mobile--switches {
  display: none;
}
#cookie-consent.off-canvas {
  z-index: 10000000000;
}
.js--menu-scroller--arrow {
  background: #96c126;
  background-image: none;
  top: 7px;
}
.js--menu-scroller--arrow:hover,
.js--menu-scroller--arrow:active {
  color: #648119;
  border-color: #96c126;
  background: #96c126;
}
.emotion--container {
  background: #f8f8f8;
}
.emotion--container .emotion--html {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  overflow: hidden;
}
.bg-white {
  background: white !important;
  width: 100%;
  height: 100%;
}
.bg-white .panel {
  background: white !important;
}
.pl-10 {
  padding-left: 40px !important;
}
.pr-10 {
  padding-right: 40px;
}
.vl-right .emotion--html {
  height: 100% !important;
}
.advanced-menu .teaser--image {
  height: 21rem !important;
  border: 2px solid #48a2e7;
  border-radius: 10px;
}
.emotion--green .emotion--banner {
  border: 2px solid #96c126;
  border-radius: 10px;
}
.emotion-footer {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.emotion--wrapper {
  overflow: unset;
}
.kachouri-divider {
  padding-bottom: 10px;
}
@media screen and (min-width: 78.75em) {
  .is--ctl-campaign .content-main--inner {
    padding: 0rem 3.125rem 0rem 3.125rem;
  }
  .is--ctl-campaign .content-main {
    margin-bottom: 0rem;
  }
}
.emotion--product-slider .box--emotion .product--image {
  padding-top: 5px;
}
.emotion--row.row--1 > .emotion--element {
  z-index: 1;
}
.emotion--element.arrow-down img {
  margin: auto;
  width: 15px !important;
}
.emotion--element .code--element {
  margin-top: 2rem;
  margin-left: 1.25rem;
  margin-right: 1.25rem;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.emotion--element .code--element > p {
  font-size: large;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
}
.emotion--element .code--element .emotion--start-list {
  list-style: none;
  padding-bottom: 1rem;
}
.emotion--element .code--element .emotion--start-list .emotion--start-list-item {
  margin-bottom: 1rem;
}
.emotion--element .code--element .emotion--start-list .emotion--start-list-item svg {
  vertical-align: middle;
  fill: #48a2e7;
  width: 2.5rem;
  height: 2.5rem;
}
.emotion--element .code--element .emotion--start-list .emotion--start-list-item span {
  vertical-align: middle;
  margin-left: 0.5rem;
  font-weight: 500;
  font-size: 1rem;
}
@media screen and (min-width: 78.75em) {
  .emotion--banner-slider .image-slider--dots .dot--link {
    background: #96c126;
  }
  .emotion--banner-slider .image-slider--dots .dot--link.is--active {
    background: #48a2e7;
  }
}
.row--1 .emotion--banner {
  border-radius: 8px;
}
.emotion--row .banner-image-about .emotion--banner .banner--content .banner--mapping {
  border: 3px solid #97c328;
  border-radius: 8px;
}
.kachouri--icons {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 1.25rem;
  padding-bottom: 0.625rem;
}
.kachouri--icons > div {
  width: 47%;
  color: #045390;
  font-weight: bold;
  font-size: 0.75rem;
  text-align: center;
}
.kachouri--icons img {
  margin-bottom: 0.4375rem;
  width: 100%;
}
@media screen and (min-width: 48em) {
  .kachouri--icons > div {
    width: 19%;
  }
}
.img--contain img {
  width: 100% !important;
  object-fit: contain !important;
}
.kachouri-menu-start-buttons {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
}
@media screen and (max-width: 480px) {
  .kachouri-menu-start-buttons {
    grid-row-gap: 0.5rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }
}
.kachouri-menu-start-sub-list {
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  position: absolute;
  z-index: 10;
  right: 0;
  left: 0;
}
@media screen and (max-width: 480px) {
  .kachouri-menu-start-sub-list {
    margin-bottom: 0.2rem;
    padding-left: 0.75rem;
  }
  .kachouri-menu-start-sub-list span {
    padding-left: 0.5rem !important;
    width: 100%;
  }
}
.kachouri-menu-start-buttons .kachouri-menu-start-button {
  width: 50%;
  height: 6.5rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
@media screen and (min-width: 480px) {
  .kachouri-menu-start-buttons .kachouri-menu-start-button {
    width: 50%;
    padding-left: 0.15rem;
    padding-right: 0.15rem;
  }
}
@media screen and (min-width: 768px) {
  .kachouri-menu-start-buttons .kachouri-menu-start-button {
    width: 33.3%;
  }
}
@media screen and (min-width: 1024px) {
  .kachouri-menu-start-buttons .kachouri-menu-start-button {
    width: 25%;
  }
}
@media screen and (min-width: 1260px) {
  .kachouri-menu-start-buttons .kachouri-menu-start-button {
    width: 20%;
  }
}
.kachouri-menu-start-sub-list .kachouri-menu-start-sublist-item {
  width: 100%;
}
@media screen and (min-width: 480px) {
  .kachouri-menu-start-sub-list .kachouri-menu-start-sublist-item {
    width: 50%;
  }
}
@media screen and (min-width: 768px) {
  .kachouri-menu-start-sub-list .kachouri-menu-start-sublist-item {
    width: 33.3%;
  }
}
@media screen and (min-width: 1024px) {
  .kachouri-menu-start-sub-list .kachouri-menu-start-sublist-item {
    width: 25%;
  }
}
@media screen and (min-width: 1260px) {
  .kachouri-menu-start-sub-list .kachouri-menu-start-sublist-item {
    width: 20%;
  }
}
.kachouri-menu-start-sub-list .kachouri-menu-start-sublist-item {
  height: fit-content;
  cursor: pointer;
}
.kachouri-menu-start-sub-list .kachouri-menu-start-sublist-item:hover {
  color: #000 !important;
}
.kachouri-menu-start-sub-list .kachouri-menu-start-sublist-item > span {
  text-align: center;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  display: block;
  margin: 0.15rem;
  border-radius: 5px;
  font-size: 16px;
  font-family: "Montserrat";
  font-weight: 500;
  user-select: none;
  background: #fff;
  transition: 0.2s;
  width: 98%;
}
.kachouri-menu-start-sub-list .kachouri-menu-start-sublist-item > span:hover {
  color: #000 !important;
  transform: scale(1.02);
}
@media screen and (max-width: 480px) {
  .kachouri-menu-start-sub-list .kachouri-menu-start-sublist-item > span {
    border: 0px solid;
    padding-left: 0rem;
    padding-right: 0rem;
    font-size: 14px;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    margin-bottom: 0.2rem;
  }
}
@media screen and (max-width: 480px) {
  .kachouri-menu-start-buttons .kachouri-menu-start-button {
    height: 2.5rem;
  }
}
@media screen and (min-width: 1524px) {
  .kachouri-menu-start-buttons .kachouri-menu-start-button {
    height: 5.5rem;
  }
}
.kachouri-menu-start-buttons .kachouri-menu-start-button > span {
  text-align: center;
  padding-left: 1rem;
  padding-right: 1rem;
  border: 2px solid #96c126;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  display: block;
  margin: 0.15rem;
  border-radius: 5px;
  font-size: 20px;
  font-family: "Montserrat";
  font-weight: 500;
  user-select: none;
  cursor: pointer;
  height: 94%;
  background: #fff;
  transition: 0.2s;
  color: #000;
}
@media screen and (max-width: 480px) {
  .kachouri-menu-start-buttons .kachouri-menu-start-button > span {
    border: 0px solid;
    padding-left: 0rem;
    padding-right: 0rem;
    font-size: 14px;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    margin-bottom: 0.1;
    text-align: left;
    padding-left: 0.5rem;
  }
}
@media screen and (min-width: 48em) {
  .kachouri-menu-start-buttons .kachouri-menu-start-button > span:hover {
    background: #96c126;
    border: 2px solid #96c126 !important;
    transform: scale(1.04);
  }
}
.kachouri-menu-start-title {
  background: #f2f2f2 !important;
}
.kachouri-menu-start {
  background: #f2f2f2 !important;
  padding-top: 0rem;
  padding-bottom: 2rem !important;
  width: 100% !important;
  margin: 0 !important;
}
@media screen and (min-width: 480px) {
  .kachouri-menu-start {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}
@media screen and (min-width: 768px) {
  .kachouri-menu-start {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}
@media screen and (min-width: 1024px) {
  .kachouri-menu-start {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}
@media screen and (min-width: 1524px) {
  .kachouri-menu-start {
    padding-left: 14rem !important;
    padding-right: 14rem !important;
  }
}
.kachouri-menu-start-sub-list {
  display: none;
}
.off-canvas .ajax--cart {
  background: white;
}
.off-canvas .ajax--cart .item--container {
  color: #000000;
}
.off-canvas .ajax--cart .prices--container {
  background: white;
}
.off-canvas .ajax--cart .cart--item .thumbnail--container.has--image {
  border: 0;
}
.off-canvas .ajax--cart .cart--item .item--name {
  width: 100%;
}
.off-canvas .ajax--cart .cart--item .item--link {
  display: flex;
  flex-flow: row wrap;
  width: 10.3125rem;
}
.off-canvas .ajax--cart .cart--item .item--price-single {
  width: 50%;
}
.off-canvas .ajax--cart .cart--item .item--price {
  width: 50%;
  text-align: right;
  align-self: flex-end;
}
.ajax--cart .cart--item {
  border-bottom: 0;
}
.ajax--cart .cart--item .item--link {
  display: flex;
  width: 10.3125rem;
  color: #000000;
}
.ajax--cart .cart--item .item--link .price--container {
  display: flex;
  width: 100%;
}
.ajax--cart .cart--item .item--link .price--container > .item--quantity,
.ajax--cart .cart--item .item--link .price--container > .item--price {
  width: 50%;
}
.ajax--cart .cart--item .item--link .price--container > .item--price {
  text-align: right;
  align-self: flex-end;
}
.ajax--cart .small--information {
  color: #000000;
  display: block;
}
.ajax--cart .table--shipping-costs-trigger {
  color: #000000;
}
.ajax--cart .prices--container .prices--tax {
  color: #000000;
}
.ajax--cart .prices--container .small--information > span {
  font-size: 1rem;
  font-weight: bold;
}
.ajax--cart .prices--container .small--information ~ .small--information > span {
  font-weight: normal;
  font-size: unset;
}
.navigation--smartphone .entry--close-off-canvas,
#cookie-consent .cookie-consent--header {
  border-radius: 0rem 0rem 1rem 1rem;
}
.navigation--smartphone .entry--close-off-canvas,
#cookie-consent .cookie-consent--header {
  background-image: none;
}
.container--ajax-cart.off-canvas {
  width: 20rem;
  border-left: 3px solid #48a2e7;
}
.container--ajax-cart.off-canvas .ajax--cart .prices--container {
  border-top: 1px solid #48a2e7;
}
.container--ajax-cart.off-canvas .ajax--cart .table--shipping-costs-trigger {
  font-weight: normal;
}
.container--ajax-cart.off-canvas .close--off-canvas {
  background: #48a2e7;
  background-image: none;
  border-radius: 0.5rem;
  text-align: center;
  line-height: 2.125rem;
}
.container--ajax-cart.off-canvas .close--off-canvas:hover {
  background-color: #1d8bdf;
}
.container--ajax-cart.off-canvas .cart--title-container {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
}
.container--ajax-cart.off-canvas .cart--title-container .cart--title {
  color: #48a2e7;
  margin: 0;
  padding: 0.625rem 0;
  border-bottom: 1px solid #48a2e7;
}
.container--ajax-cart.off-canvas .button--container .button--checkout {
  background-image: none !important;
  border-radius: 0.5rem;
  padding-right: unset;
}
.container--ajax-cart.off-canvas .button--container .button--checkout.btn.is--icon-right [class^="icon--"] {
  display: none;
}
.container--ajax-cart.off-canvas .button--container .button--checkout:hover {
  background-color: #1d8bdf !important;
}
.container--ajax-cart.off-canvas .button--container .button--checkout.is--disabled {
  border: 0;
}
.container--ajax-cart.off-canvas .button--container .button--checkout.is--disabled:hover {
  background-color: #48a2e7 !important;
}
.container--ajax-cart.off-canvas .alert.is--success {
  color: #ffffff;
  background: #96c126;
}
.container--ajax-cart.off-canvas .alert.is--success .alert--icon {
  background: #648119;
}
.ajax--cart .cart--item .thumbnail--container {
  width: 4.375rem;
  height: 4.375rem;
}
.ajax--cart .action--container {
  display: none;
}
.ajax--cart .cart--item .action--container .btn,
.container--ajax-cart .select-field select {
  background: white;
  border-color: #48a2e7;
}
.container--ajax-cart .select-field:after {
  border-color: #48a2e7;
}
.container--ajax-cart.off-canvas .alert.is--success {
  color: #96c126;
  background: transparent;
}
.container--ajax-cart.off-canvas .alert.is--success .alert--icon {
  color: #96c126;
  background: transparent;
  width: 25%;
}
.container--ajax-cart.off-canvas .alert.is--success .alert--icon .icon--element {
  font-size: 2rem;
  margin-top: -18px;
  width: 25%;
}
.container--ajax-cart.off-canvas .alert.is--success .alert--content {
  width: 75%;
  padding: 0.5rem;
}
@media screen and (min-width: 78.75em) {
  .container--ajax-cart.off-canvas {
    width: 25rem;
  }
  .off-canvas .ajax--cart .cart--item .item--link {
    width: 16.3125rem;
  }
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-ExtraBoldItalic.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-ExtraBoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-MediumItalic.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-MediumItalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-LightItalic.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-Light.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-Medium.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-Black.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-ExtraLight.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-ExtraBold.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-ExtraBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-BoldItalic.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-Thin.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-SemiBoldItalic.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-SemiBoldItalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-Italic.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-Bold.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-Regular.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-ExtraLightItalic.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-ExtraLightItalic.woff') format('woff');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-ThinItalic.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-ThinItalic.woff') format('woff');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-SemiBold.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-BlackItalic.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/Montserrat-BlackItalic.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DaytonaW01-Condensed';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-Condensed.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-Condensed.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DaytonaW04-CondensedThin';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW04-CondensedThin.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW04-CondensedThin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DaytonaW04-CondensedBold';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW04-CondensedBold.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW04-CondensedBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DaytonaW01';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-Regular.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DaytonaW01-CondensedThin';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-CondensedThin.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-CondensedThin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DaytonaW01-CondensedFat';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-CondensedFat.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-CondensedFat.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DaytonaW01';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-Bold.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DaytonaW01';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-Thin.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DaytonaW04-CondensedFat';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW04-CondensedFat.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW04-CondensedFat.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DaytonaW01-CondSemibold';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-CondSemibold.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-CondSemibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DaytonaW01-CondensedBold';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-CondensedBold.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-CondensedBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DaytonaW01-CondensedLight';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-CondensedLight.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-CondensedLight.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DaytonaW01-Fat';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-Fat.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-Fat.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DaytonaW04-CondensedLight';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW04-CondensedLight.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW04-CondensedLight.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DaytonaW01';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-Semibold.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DaytonaW01';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-ThinItalic.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-ThinItalic.woff') format('woff');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DaytonaW04-Condensed';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW04-Condensed.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW04-Condensed.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DaytonaW01';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-Bold.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DaytonaW01';
  src: url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-Light.woff2') format('woff2'), url('../../themes/Frontend/KachouriGetraenke/frontend/_public/src/fonts/DaytonaW01-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
.tablesorter-header {
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: right 5px center;
  background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAAP///////yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
}
.tablesorter-header.sorter-false {
  background-image: none;
  cursor: default;
}
.tablesorter-headerAsc {
  background-color: #96c126;
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
}
.tablesorter-headerDesc {
  background-color: #96c126;
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
}
/* black */
/* white */
.js--modal {
  z-index: 999999;
  box-shadow: none;
}
.panel--paging .paging--link {
  color: #000000;
}
.off-canvas {
  z-index: 9998;
}
.navigation--link.link--go-main {
  display: none;
}
.offcanvas--overlay .overlay--category {
  display: none;
}
.off-canvas .close--off-canvas {
  background-image: none;
}
.categories--headline.navigation--headline {
  display: none;
}
.categories--sublevel.navigation--list {
  border-top: 0 !important;
}
.categories--sublevel.navigation--list > li:first-child {
  border-bottom: 0 !important;
  font-size: 0.75rem;
}
@media screen and (min-width: 48em) {
  .off-canvas {
    z-index: 8000;
  }
  .navigation--link.link--go-main {
    display: block;
  }
  .offcanvas--overlay .overlay--category {
    display: block;
  }
  .categories--headline.navigation--headline {
    display: block;
  }
}
.badge.is--primary {
  background: #48a2e7;
}
.badge.is--secondary {
  background: #96c126;
}
.is--ctl-campaign.is--act-index .breadcrumb--link {
  display: none;
}
.emotion--container.emotion--mode-rows .emotion--row {
  display: flex;
  overflow: hidden;
}
.emotion--container.emotion--mode-rows .header-element-1,
.emotion--container.emotion--mode-rows .header-element-2 {
  padding: 0rem;
}
@media screen and (min-width: 48em) {
  .emotion--container.emotion--mode-rows .header-element-1,
  .emotion--container.emotion--mode-rows .header-element-2 {
    padding: 2rem;
  }
}
.emotion--container.emotion--mode-rows .row--2 {
  overflow: visible;
}
.advanced-menu .teaser--image {
  height: 18.75rem;
}
.is--ctl-campaign .content-main--inner .content--wrapper {
  max-width: 1200px;
  margin: 0 auto !important;
}
.noArticle .categorie-title {
  width: 100%;
  background: #96c126;
  border-radius: 0.3rem;
  text-align: center;
  font-size: 3rem;
  color: #ffffff;
  margin-bottom: 1rem;
}
.noArticle .emotion--category-teaser {
  height: 3.45rem;
}
.noArticle .emotion--category-teaser .category-teaser--link {
  background-image: unset !important;
}
.noArticle .emotion--category-teaser .category-teaser--link .category-teaser--title {
  font-size: 2rem;
  font-weight: 100;
  background: 0;
  color: #4d4d4d;
  border-bottom: 1px solid #808080;
}
.noArticle .emotion--category-teaser .category-teaser--link:hover .category-teaser--title {
  color: #000000;
  background: #96c126;
}
.kachouri .panel.has--border {
  border: 0;
}
.kachouri .panel.has--border .panel--title {
  border-bottom: 0;
  padding-top: 0;
}
.kachouri .panel.has--border .panel--body ul {
  list-style: none;
}
.kachouri .panel.has--border .panel--body ul li {
  line-height: 30px;
  vertical-align: middle;
  display: flex;
  margin-bottom: 5px;
}
.kachouri .panel.has--border .panel--body ul li::before {
  content: "";
  background: url("../../themes/Frontend/KachouriGetraenke/frontend/_public/src/img/icons/check.png");
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 30px;
  height: 30px;
  padding-right: 5px;
}
.kachouri .panel.has--border .panel--body a {
  background: #48a2e7;
  padding: 0.7em 2em;
  border-radius: 10px;
  margin-top: 10px;
  display: inline-block;
  width: auto;
  font-weight: bold;
  color: #ffffff;
  font-size: 1.5em;
}
.is--ctl-campaign.is--act-index.is--no-sidebar .top-hero .swiper.hero-carousel.bg-main-green.swiper-initialized.swiper-horizontal.swiper-pointer-events {
  height: 4.19rem;
}
.is--ctl-campaign.is--act-index.is--no-sidebar .top-hero .swiper.hero-carousel.bg-main-green.swiper-initialized.swiper-horizontal.swiper-pointer-events .swiper-slide {
  margin-top: 0.2rem;
}
.is--ctl-campaign.is--act-index.is--no-sidebar .top-hero .swiper.hero-carousel.bg-main-green.swiper-initialized.swiper-horizontal.swiper-pointer-events .swiper-slide a {
  color: #fff;
  font-family: Montserrat;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
}
.is--ctl-campaign.is--act-index.is--no-sidebar .first-accordion-item-active {
  border-left-width: 1px;
  margin-bottom: 1.25rem !important;
}
.is--ctl-campaign.is--act-index.is--no-sidebar .section-features.flex.flex-col.items-center .flex.flex-wrap.justify-between img {
  content: 'GerkeTest1337';
  width: 9.375rem;
  height: 9.375rem;
  flex-shrink: 0;
}
.is--ctl-campaign.is--act-index.is--no-sidebar .section-features.flex.flex-col.items-center .flex.flex-wrap.justify-between .feature-title {
  color: #000;
  font-family: Montserrat;
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: 3rem;
}
.is--ctl-campaign.is--act-index.is--no-sidebar .section-features.flex.flex-col.items-center .flex.flex-wrap.justify-between .feature-description {
  color: #000;
  text-align: center;
  font-family: Montserrat;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.8rem;
}
.is--ctl-campaign.is--act-index.is--no-sidebar .emotion--element .divider {
  margin-top: 5rem;
  margin-bottom: 2.5rem;
}
.is--ctl-campaign.is--act-index.is--no-sidebar .w-full.absolute.h-0.top-\[-20px\].bg-\[\#F8F8F8\] {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), transparent);
  height: 12rem;
  box-shadow: none !important;
  position: absolute;
  top: -12.6rem;
}
@media screen and (max-width: 48em) {
  .is--ctl-campaign.is--act-index.is--no-sidebar .w-full.absolute.h-0.top-\[-20px\].bg-\[\#F8F8F8\] {
    display: none;
  }
}
.is--ctl-campaign.is--act-index.is--no-sidebar .service-description.relative.w-full {
  margin-top: 20rem;
}
@media screen and (max-width: 48em) {
  .is--ctl-campaign.is--act-index.is--no-sidebar .service-description.relative.w-full {
    margin-top: 0rem;
  }
}
.is--ctl-campaign.is--act-index.is--no-sidebar h1.font-semibold.text-center.text-3xl.py-4 {
  text-align: left;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 2.5rem;
}
.is--ctl-campaign.is--act-index.is--no-sidebar ul.accordion-f.w-full.md\:w-1\/2 .icon--arrow-down {
  display: none;
}
.is--ctl-campaign.is--act-index.is--no-sidebar ul.accordion-f.w-full.md\:w-1\/2 .accordion-f-item {
  padding-top: 0;
  padding-bottom: 1.25rem;
}
.is--ctl-campaign.is--act-index.is--no-sidebar ul.accordion-f.w-full.md\:w-1\/2 .accordion-f-item h4 {
  padding-top: 0;
}
@media screen and (max-width: 48em) {
  .is--ctl-campaign.is--act-index.is--no-sidebar .w-full.md\:w-1\/2.flex.flex-col.items-start.section-4-right {
    margin-left: 0rem;
  }
}
.is--ctl-campaign.is--act-index.is--no-sidebar img.absolute.xl\:right-\[15\%\].h-20 {
  top: -20px;
}
@media screen and (max-width: 48em) {
  .is--ctl-campaign.is--act-index.is--no-sidebar .section-features.flex.flex-col.items-center .flex.flex-wrap.justify-between {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
@media screen and (max-width: 48em) {
  .is--ctl-campaign.is--act-index.is--no-sidebar .service-description.relative.w-full .w-full.pt-20.accordion {
    padding-left: 0.5rem;
  }
}
.is--ctl-campaign.is--act-index.is--no-sidebar img.absolute.xl\:right-\[15\%\].bottom-0.h-20 {
  bottom: -22px;
  top: unset;
}
.is--ctl-campaign.is--act-index.is--no-sidebar h3.text-5xl.font-semibold.pb-4 {
  font-size: 2.5rem;
}
.is--ctl-campaign.is--act-index.is--no-sidebar .our-rental-items-ul .bordered-item span::after {
  width: 10.1875rem;
  height: 0.4375rem !important;
  background-size: contain;
}
.is--ctl-campaign.is--act-index.is--no-sidebar .bg-white.p-5 .w-full.mt-10 .flex.flex-wrap .my-2 {
  margin-top: 2rem;
}
a.rounded-md.bg-main-blue.px-5.font-semibold.text-white.py-3.text-lg {
  border-radius: 0.8rem;
}
.content--wrapper[data-current-route='sFid=24&sViewport=forms'] .forms--inner-form.panel--body {
  display: flex;
  flex-wrap: wrap;
}
.content--wrapper[data-current-route='sFid=24&sViewport=forms'] .forms--inner-form.panel--body .gerke-form-item {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-wrap: wrap;
  flex-direction: column-reverse;
}
.content--wrapper[data-current-route='sFid=24&sViewport=forms'] .forms--inner-form.panel--body .gerke-form-item.forms--checkbox {
  padding-right: 3rem;
  display: flex !important;
  width: auto !important;
  flex-wrap: nowrap !important;
}
.content--wrapper[data-current-route='sFid=24&sViewport=forms'] .forms--inner-form.panel--body .gerke-form-item.forms--checkbox input {
  width: fit-content !important;
  top: -1.25rem !important;
  position: relative;
}
.content--wrapper[data-current-route='sFid=24&sViewport=forms'] .forms--inner-form.panel--body .gerke-form-item.forms--checkbox label {
  left: 1.25rem !important;
}
.content--wrapper[data-current-route='sFid=24&sViewport=forms'] .forms--inner-form.panel--body .gerke-form-item.gerke-form-item-key-124 {
  width: 49.5% !important;
}
.content--wrapper[data-current-route='sFid=24&sViewport=forms'] .forms--inner-form.panel--body .gerke-form-item.gerke-form-item-key-129 input,
.content--wrapper[data-current-route='sFid=24&sViewport=forms'] .forms--inner-form.panel--body .gerke-form-item.gerke-form-item-key-139 input,
.content--wrapper[data-current-route='sFid=24&sViewport=forms'] .forms--inner-form.panel--body .gerke-form-item.gerke-form-item-key-143 input {
  display: none !important;
}
.forms--content .forms--description {
  margin: 0rem 0rem 0.625rem 0rem;
}
* {
  -webkit-tap-highlight-color: transparent;
}
.content-main {
  box-shadow: 0 0 0 0 #96c126;
}
@media screen and (min-width: 48em) {
  .content-main {
    box-shadow: 0 0 0 0 #96c126;
  }
}
body {
  color: #000000;
  overflow-x: hidden;
}
a {
  color: #000000;
}
a:hover {
  color: #48a2e7;
}
.primary-bg {
  background: #48a2e7;
}
.secondary-bg {
  background: #96c126;
}
.scroll--top-wrapper {
  position: fixed;
  right: 10px;
  bottom: 1.125rem;
}
.custom_div_pageMain {
  display: flex;
}
.custom_div_pageMain div {
  position: relative;
  padding: 0 1em;
}
.custom_div_pageMain div h2 {
  font-size: 2em;
  padding: 0;
  margin: 0;
  color: #96c126;
  font-weight: 400;
}
.custom_div_pageMain div p {
  font-size: 1em;
  line-height: 1.5rem;
  margin: 2.5rem 0rem 1.25rem 0rem;
}
.custom_div_pageMain div ul {
  list-style: none;
}
.custom_div_pageMain div ul li {
  font-size: 2em;
}
.custom_div_pageMain div ul li::before {
  font-family: 'emz-icons';
  font-weight: bold;
  content: '\e88b';
  margin-right: 0.5em;
  color: #648119;
}
.custom_div_pageMain div a {
  color: #ffffff;
  background: #48a2e7;
  border-radius: 0.5rem;
  padding: 0.5rem 4rem;
  font-size: x-large;
  display: inline-block;
  position: relative;
  bottom: 0;
}
.custom_div_pageMain div a:hover {
  background: #648119;
}
@media screen and (min-width: 78.75em) {
  .custom_div_pageMain div {
    padding: 0;
  }
  .custom_div_pageMain div a {
    position: absolute;
  }
}
.product--navigation .navigation--link {
  display: none !important;
}
.navigation--link {
  transition: 0.2s;
}
.image-gallery--modal.modal--close {
  z-index: 7999;
}
.container--ajax-cart form {
  display: flex;
  align-items: center;
}
.ajax--cart .cart--item .item--quantity {
  display: none !important;
}
.container--ajax-cart.off-canvas .ajax--cart .prices--container,
.free-shipping-container {
  margin: 0 0.625rem;
}
.container--ajax-cart .select-field {
  margin: 0;
}
.off-canvas .ajax--cart .action--container,
.off-canvas .ajax--cart .action--container .action--remove {
  width: 1.375rem;
  height: 1.375rem;
}
.off-canvas .ajax--cart .action--container *[class*='icon--'] {
  line-height: unset;
}
.ajax--cart .cart--item .action--container .btn {
  padding: 0.155rem 0.3125rem 0.155rem 0.3125rem;
}
.product--delivery .delivery--text {
  display: none;
}
.ajax--cart .table--shipping-costs {
  display: block;
}
div.kachouri-start-weiteres {
  display: flex;
  flex-wrap: wrap;
  background: #f2f2f2 !important;
  margin: 0 !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  width: 100% !important;
  padding-bottom: 4rem !important;
}
@media screen and (min-width: 1024px) {
  div.kachouri-start-weiteres {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}
@media screen and (min-width: 1460px) {
  div.kachouri-start-weiteres {
    padding-left: 14rem !important;
    padding-right: 14rem !important;
  }
}
div.kachouri-start-weiteres a.kachouri-start-weiteres {
  padding: 0.5rem;
  width: 100%;
  height: auto;
  display: block;
  margin: 0rem;
}
@media screen and (max-width: 480px) {
  div.kachouri-start-weiteres a.kachouri-start-weiteres {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 0 !important;
  }
  div.kachouri-start-weiteres a.kachouri-start-weiteres img {
    width: 20% !important;
    border-radius: 5.5px 0px 0px 5.5px !important;
    height: 3.25rem !important;
    padding: 0.3rem !important;
  }
  div.kachouri-start-weiteres a.kachouri-start-weiteres span {
    width: 80% !important;
    border-radius: 0px 5.5px 5.5px 0px !important;
    height: fit-content !important;
    text-align: left !important;
  }
}
div.kachouri-start-weiteres a.kachouri-start-weiteres img {
  height: 6rem;
  position: relative;
  z-index: 0;
  width: 100%;
  background: #fff;
  padding: 0.75rem;
  border-radius: 5.5px 5.5px 0px 0px;
  padding-bottom: 0;
  padding-top: 1.25rem;
}
div.kachouri-start-weiteres a.kachouri-start-weiteres span {
  width: 100%;
  text-align: center;
  display: block;
  background: #fff;
  font-weight: 500;
  padding: 1rem;
  border-radius: 0px 0px 5.5px 5.5px;
}
.bg-gray {
  background: #f2f2f2 !important;
}
.bg-color-gray {
  background-color: #f2f2f2 !important;
}
a.kachouri-start-weiteres {
  width: 100% !important;
  transition: 0.2s;
}
@media screen and (min-width: 480px) {
  a.kachouri-start-weiteres {
    width: 50% !important;
  }
}
@media screen and (min-width: 768px) {
  a.kachouri-start-weiteres {
    width: 33.3% !important;
  }
}
@media screen and (min-width: 1024px) {
  a.kachouri-start-weiteres {
    width: 25% !important;
  }
}
@media screen and (min-width: 1260px) {
  a.kachouri-start-weiteres {
    width: 20% !important;
  }
}
a.kachouri-start-weiteres:hover {
  transform: scale(1.06);
}
.kachouri-heading {
  padding-bottom: 1rem !important;
  margin: 0 !important;
}
.kachouri-heading img {
  text-align: center;
  margin: auto;
  width: 158px !important;
  margin-bottom: 10px !important;
  object-fit: contain;
  height: 16px !important;
}
@media screen and (min-width: 768px) {
  .kachouri-heading img {
    width: 258px !important;
  }
}
@media screen and (min-width: 1260px) {
  .kachouri-heading img {
    width: 300px !important;
  }
}
.account--welcome {
  width: fit-content;
  margin: 0 auto;
}
.js--overlay.is--closable {
  z-index: 5000;
}
.header--container {
  width: 100vw;
  z-index: 9998;
  position: fixed;
  top: 0;
}
.off-canvas {
  z-index: 8000;
}
@media screen and (min-width: 1350px) {
  .header-main .header--navigation .logo-main .logo--shop span {
    display: block;
  }
}
@media screen and (min-width: 64em) {
  .content-main {
    padding-top: 0 !important;
  }
}
.joni-select-img {
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}
/* ==================================================== Gesetzliche Gewaehrleistung
 *
 * Pflichtkennzeichnung seit dem 27.09.2026. Der Hinweis steht unter dem
 * Preisvermerk der Artikelseite, das vollstaendige Blatt oeffnet sich im
 * Fenster.
 */
.kg-gewaehr {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 18px;
}
.kg-gewaehr--link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #4a4a4a;
  text-decoration: none;
}
.kg-gewaehr--link:hover,
.kg-gewaehr--link:focus {
  color: #000;
  text-decoration: underline;
}
.kg-gewaehr--zeichen {
  flex: 0 0 auto;
  width: 26px;
  height: auto;
}
.kg-gewaehr--blatt img {
  display: block;
  width: 100%;
  height: auto;
}