/* Fehler bei der Verkleinerung. Der Inhalt wird unverkleinert zurückgegeben.
(8212,39): run-time error CSS1030: Expected identifier, found '>'
(8212,59): run-time error CSS1031: Expected selector, found ')'
(8212,59): run-time error CSS1025: Expected comma or open brace, found ')'
(8217,39): run-time error CSS1030: Expected identifier, found '>'
(8217,68): run-time error CSS1031: Expected selector, found ')'
(8217,68): run-time error CSS1025: Expected comma or open brace, found ')'
(8220,39): run-time error CSS1030: Expected identifier, found '>'
(8220,67): run-time error CSS1031: Expected selector, found ')'
(8220,67): run-time error CSS1025: Expected comma or open brace, found ')'
(8223,39): run-time error CSS1030: Expected identifier, found '>'
(8223,67): run-time error CSS1031: Expected selector, found ')'
(8223,67): run-time error CSS1025: Expected comma or open brace, found ')'
(8226,39): run-time error CSS1030: Expected identifier, found '>'
(8226,68): run-time error CSS1031: Expected selector, found ')'
(8226,68): run-time error CSS1025: Expected comma or open brace, found ')'
(8372,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8373,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8384,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8385,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8388,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8389,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8392,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8393,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8396,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8397,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8517,28): run-time error CSS1039: Token not allowed after unary operator: '-nav-accent'
(8634,24): run-time error CSS1039: Token not allowed after unary operator: '-nav-accent'
(8666,28): run-time error CSS1039: Token not allowed after unary operator: '-nav-accent-soft'
(8686,28): run-time error CSS1039: Token not allowed after unary operator: '-nav-accent'
(8730,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8731,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8747,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8748,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8751,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8752,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8755,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8756,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8759,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8760,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8905,28): run-time error CSS1039: Token not allowed after unary operator: '-nav-accent-soft'
(8914,28): run-time error CSS1039: Token not allowed after unary operator: '-nav-accent-soft'
(8929,28): run-time error CSS1039: Token not allowed after unary operator: '-nav-accent'
(8968,28): run-time error CSS1039: Token not allowed after unary operator: '-nav-accent-soft'
(8987,28): run-time error CSS1039: Token not allowed after unary operator: '-nav-accent'
(11156,34): run-time error CSS1030: Expected identifier, found '>'
(11156,47): run-time error CSS1031: Expected selector, found ')'
(11156,47): run-time error CSS1025: Expected comma or open brace, found ')'
(11175,67): run-time error CSS1030: Expected identifier, found '>'
(11175,80): run-time error CSS1031: Expected selector, found ')'
(11175,80): run-time error CSS1025: Expected comma or open brace, found ')'
(11182,67): run-time error CSS1030: Expected identifier, found '>'
(11182,80): run-time error CSS1031: Expected selector, found ')'
(11182,80): run-time error CSS1025: Expected comma or open brace, found ')'
(11508,15): run-time error CSS1039: Token not allowed after unary operator: '-mini-cart-anchor-offset'
(11510,15): run-time error CSS1039: Token not allowed after unary operator: '-mini-cart-anchor-width'
 */
@charset "UTF-8";
/*$font-size-root: 1rem;*/
/* Sorgt fuer Bug beim Compilen, waere aber nicht verkehrt zu setzen, weil damit dann auch die Schriftgroesse des Browsers beachtet werden wuerde */
/* Radius-System */
/* Buttons, Inputs, Selects, Bilder, Badges */
/* bewusst gleich: alpha3 nutzt -lg auch fuer .btn-lg / .input-lg */
/* Checkbox-Box */
/* Formulare */
/* muss hier rein, damit .form-control und die eigenen .input-text/.input-select dieselbe Rahmenfarbe bekommen */
/* war rgba(0,0,0,.15) */
/* Statusfarben */
/* muss hier rein, damit auch Bootstraps eigene Komponenten (.btn-success, .alert-danger, ...) mitziehen */
/* war #5cb85c / #3f8f4f / #3a8347 - auf $surface-sub nur 4.34:1 */
/* war #d9534f */
/* war #5bc0de, dann #3d7f96 - das erreichte gegen Weiss nur 4.49:1 */
/* war #f0ad4e, war optisch nicht von der Markenfarbe zu unterscheiden */
/* Buttons */
/* muss hier rein, weil die Farben intern verdunkelt werden anhand der hier angegebenen Werte */
/* !!! ACHTUNG !!! Es wurden Darken/Lighten-Werte angepasst in Bootstrap/mixinx/_buttons */
/* war #ff8c00, Weiss darauf nur 2.33:1 */
/* Headlines */
/*$spacers: ( 0: ( x: 0, y: 0 ), 1: ( x: $spacer-x, y: $spacer-y ), 2: ( x: ($spacer-x * 1.5), y: ($spacer-y * 1.5) ), 3: ( x: ($spacer-x * 3), y: ($spacer-y * 3) ) ) !default;*/
/* KORN */
/*$grid-breakpoints: ( xs: 0, sm: 544px, md: 768px, lg: 992px, xl: 1200px ) !default;*/
/* KORN */
/* File Paths */
/* Colors */
/* override bootstrap */
/* #eeeeee */
/* Die Markenfarbe erreicht als Schrift auf Weiss nur 2.33:1. Fuer Text auf
   hellem Grund deshalb diese abgedunkelte Variante (4.76:1) verwenden. */
/* #db7800 */
/* #db7800 */
/* Widths */
/* Distances */
/* Forms */
/* ---------- Redesign ---------- */
/* $enable-rounded, $border-radius(-sm/-lg), $input-border-color und die vier
   Statusfarben stehen in external/bootstrap-4.0.0-alpha.3/_custom.scss, weil
   Bootstrap seine abgeleiteten Werte beim eigenen Variablen-Import berechnet. */
/* Radius ueber die Bootstrap-Skala hinaus */
/* .site-panel, Produktkachel, Alerts, Karten */
/* .modal-content, Offside-Panel */
/* Elevation - drei Stufen, ersetzt harte 1px-Rahmen als primaere Abgrenzung */
/* Linien und Flaechen */
/* sichtbare Rahmen, wo noch noetig */
/* interne Trennlinien, h2-Unterstrich */
/* ersetzt $gray-lightest / #f0f0f0 als Flaeche */
/* war #CEC4BB im Attributfilter */
/* Abstaende */
/* .site-panel ab lg */
/* .site-panel unter lg */
/* Navigation */
/* war #656565 */
/* Badges: kraeftige Volltoene, weisse Schrift.
   Die Hintergruende muessen gegen Weiss mindestens 4.5:1 erreichen - die
   Badge-Schrift ist 12px fett und zaehlt damit nicht als grosse Schrift. */
/* war #3f8f4f / #3a8347 */
/* 6.35:1 */
/* 4.82:1 */
/* war #3d7f96, mit 4.49:1 knapp darunter */
/* Alerts: ruhige Tints - bewusst NICHT dieselben Werte wie die Badges */
/* Formulare */
/* NEU, gefuelltes Feld */
/*@mixin reset($element: 'none') {

    @if($element == 'ul') {

        ul.reset, ul.reset li {
            list-style: outside none none;
            margin: 0;
            padding: 0;
        }
    }

    @elseif($element == 'ol') {

        ol.reset, ol.reset li {
            list-style: outside none none;
            margin: 0;
            padding: 0;
        }
    }

    @elseif($element == 'img') {

        img {
            margin: 0;
            padding: 0;
            border: none;
            outline: none;
        }
    }
}*/
/* Headlines */
h1, .h1 {
  border-bottom: 2px solid #ff8c00;
  padding-bottom: 0.5rem;
}

h2, .h2 {
  border-bottom: 1px solid #cccccc;
  padding-bottom: 0.5rem;
}

@media (max-width: 991.9px) {
  h1, .h1 {
    font-size: 1.5em;
  }
}

/* Colors */
.text-green {
  color: #2f7d43;
}

.text-red {
  color: #c9433f;
}

.text-yellow {
  color: #ad5f00;
  /* war $text-orange, auf hellem Grund nur 2.17:1 */
}

.text-orange {
  color: #ad5f00;
  /* war $text-orange, auf hellem Grund nur 2.17:1 */
}

/* Font Sizes */
.font-size-90 {
  font-size: 0.9em;
}

.font-size-80 {
  font-size: 0.8em;
}

.font-size-70 {
  font-size: 0.7em;
}

/* Element Resets */
ul.reset, ul.reset li, ol.reset, ol.reset li {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

a.reset, a.reset:hover, a.reset:focus, a.reset:visited {
  text-decoration: none;
}

img.reset {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

button.reset {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: medium none;
  outline: medium none;
}

h1.reset {
  margin: 0;
  padding: 0;
  border: none;
  font-weight: normal;
  font-size: 1rem;
  line-height: normal;
}

/* Fixes */
.fa-spin {
  -webkit-filter: blur(0);
          filter: blur(0);
  /*-webkit-transform-origin: 50% calc(50% - .5px);
    -moz-transform-origin: 50% calc(50% - .5px);
    -ms-transform-origin: 50% calc(50% - .5px);
    -o-transform-origin: 50% calc(50% - .5px);
    transform-origin: 50% calc(50% - .5px);*/
}

/* Overlay */
#site-overlay {
  z-index: 100;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
  visibility: hidden;
  opacity: 0;
  cursor: pointer;
  -webkit-transition: visibility .15s ease, opacity .15s ease;
  transition: visibility .15s ease, opacity .15s ease;
}

.semi-transparent {
  opacity: 0.5;
}

.semi-transparent a:hover {
  cursor: default !important;
  text-decoration: none !important;
}

/* Global */
p a:not(.reset) {
  text-decoration: underline;
}

/* Global Classes */
img.responsive {
  max-width: 100%;
  height: auto;
}

picture img {
  width: 100%;
}

.no-focus:focus {
  outline: none;
}

.underline {
  text-decoration: underline;
}

.underline-hover:hover {
  text-decoration: underline;
}

.no-text-decoration, .no-text-decoration:hover {
  text-decoration: none !important;
}

.line-through {
  text-decoration: line-through;
}

.nowrap {
  white-space: nowrap;
}

.hidden {
  display: none;
}

.va-top {
  vertical-align: top;
}

.va-middle {
  vertical-align: middle;
}

.no-border {
  border: none !important;
}

.clear {
  clear: both;
}

.cursor-pointer {
  cursor: pointer;
}

.flip-h {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

.flip-v {
  -webkit-transform: scaleY(-1);
          transform: scaleY(-1);
}

@media (min-width: 768px) and (max-width: 991.9px) {
  .hidden-md-only {
    display: none;
  }
}

/* Shared Elements */
.bg-grey {
  background-color: #f0f0f0;
}

.stars {
  color: #373a3c;
}

a i.fa {
  vertical-align: middle;
  line-height: inherit;
}

a.external {
  color: #3366BB;
}

a.external:after {
  content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
}

.spinner-wrapper {
  display: inline-block;
  vertical-align: middle;
}

/*.tag {
    vertical-align: text-bottom;
}*/
.tag-pill {
  /* bootstrap extension */
  border-radius: 10rem;
}

.seal {
  background-repeat: no-repeat;
  background-color: transparent;
  width: 45px;
  height: 45px;
  text-decoration: none !important;
}

.seal.ekomi {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtCAMAAAANxBKoAAAC/VBMVEUAAADdqULTjiDcqEHPkTbdrUbcqEHcpz3jzGHqyGrsy1/XpkHYpEDjvlrgtlTs0W7s1H3lwF3fsEnVlSjkuFLZnjDTjx/kvVjUkyTgtlLXmzHmwl7VkyTlwV/27sDbq0faojzlulHn0o7qy3LXo0bVkybZnzXPhBLhuFTgt1DnxmLZpkHaqUTQjzTgtEnerkfSlDfXoT/MijARWgjtznD15maAUBX6+fvu1lz2zlYxqhnszVfmxlSWZB6QYBx4SA/+/v709fXEw8Tz3H3v0GjiuUzCiDGjbyMteRvv22Hjwl/yzlvjvk+yfSuqdyiIVxgLUATa2drW09fQz9H79sK+vb789qfv1XPz4WTdrETWmDmkdSiabij52WNvQArWnj2BgYEyjBw6sB8wghwzoxswmRjr6uz06av26I/45oP11m04qB710V7suku6lkPfnj7PoT3bmjvGkDS2iTOmezCcaSAoexM2sRzv7/Cpqanv3IiIiYj89G9ubmv11GTVu2NZWlvUuFTzxlPhtlCwjEnqwDWsgTOedi66gS0gaQ4XdgsbYAtkOAbl4ubf3t/+/Lr477Dd0J+go5+Qko/++XX57W/v0GLsx1T03U/Dljo5rx4lnQ0NRAXNyc2ys7GZmZn78Y/VxHb73W/26WpjZGbPrlTGpE/ep0DMmTufeDsngxMejAsVawopUgn+/NBCREM5tB47ux/++bD37pyGp3x4ennPuHfHrnH05F/qwVe3l1fEv1Lwzj47cjGSaS8mYx0rkRUmcxQbggz489Hn26T05p/x4ZbXxJLRvo/o2Y3932Nokl/u0lBYd1Cmgk1MTU2MpEhYnUjQskZNhx8/cRJVKAP//t/8+N/p38W1tbabuZSWq5H++ITGq2Nigl7+1luzs0pSjEdHaEN1nkC6rDutozhDmDUyMjJnjDGLmzBIfiWJgSEdUBkXNA3B2L2817Wpsqavqp7O3IysxIG4tn3v4nBzpmKqiFpUbEdKfjw6OjokRSRfXBVSYBAVLASoAqV/AAAAK3RSTlMACBSj/dq2JP3+/v7rvq0Z/qJLSey+pI2Ign9uZkz89rX+9fXytqFDxMSi0obcgwAABnZJREFUeF59lXOcHlkWhr9mGkmnOx1ngvHuVtVn27bdtm3btu3Yto2x7Vkav62vs5NNOjvz1j9Vt546973n3joHsVJuq4K3euzateu1rcGr3BC/LPfNXi/tuPDmm7v1rZcC13ttdv951O11D9+Y3W+4Lr0+pvVyfj6+4rXX3X4m7qsvX7oco9994eobV+cuXqkc48Xh8YG+r/7f+C+sD+TlX2vVz+04fYHYpo+pnA60T5nwePz6F553sdHXhA/MZx1uqbx6+4pe1XaROJosxUun8XgTfuMKN+4b+Pj4KR5vrvrI4dvHj1y5/f7pklh7Mp5YIi3j5cd6P+PGbYPJl2+azhytOa56qbKydeyw8f3KEiZvyl7Cqik50Lrb++noG/m+41PEZPtU5lhs/gFjftu10TieyUeaGWfnxV46sr9lx8anFujH50+PZyYnM/AmXlycTxvprb6SeFj8uJrYmON/0be2xDxZqtt6fnx1WdmfavjxfN747L++zyOxf/fvpZqkcROvZGxuru30xf3Gl91+Mt3t5/Bh2vzKpPzi1H8OqtU3SKToT9SDS9/yY43GI28RD7dcjo3b8BgP9usez0juYqikfomiQfU8lfpFU6724EJU3eBS+X5jC7Mt5rR9NN4veJn2KC7OnE62d9OLE79V10fmUKlRv+Ua2s9T+8/ilspajDHHK2t8pN3FHsupTpIl1jAcyX2JiV+rs/dSXbqnazZEUKk5/Q0Njv0HYq9lVFcXy5JcSd8sk/VcL7OLaMWf4eb35SxrgKsbujGQk7O3v+Fh3Oh7mdU+13tkss3wGr0SHRmiPh9ZIuVB3d7/auAdDXf4LHyzLwr3+XtmmiSDmeGQebkhVq0upxzry7LLKJ8tRu5bZnMG6g9qdLqPB1wP5x5eT6Qx6BI5RbB6FWLdTiSSpZQ7KJQH9S64P+qLewd/4HCaNe8uuOjIxfsUmq0vy4YEdwYjtqJAJFmuTKXQF+Gpw8MXfuSQSGwSe4jLjaC6vNR/TaHIaEfLLSBqK8IDBKuV6fc/LC9bjAwPDx/4Mye6KZfNiR4pGLoRBQ/sO/+AQkHalCoFCvRAeIMgEgXa/D88UR+ZkBC+cJDD4XJ1uvbJUEP7Qj+Mz2eTKUnltowkAPRGeAOgUmTLSk36yEUnnH+HzebAXkjDpXl5Ynik/2x2T4U/M0uhAAEXDVjAEBRm5nNcVEJC5D02J7cpGjbeXpA38jfXSHbdMQGy4kUkCoBpDwBQzKIYqcB93HxYWPa70dEanUajGy4K7Rj5+HxYWNTiN910pFKpQAKAB2ILBpgVqTJmMcgGMUx/oG3K5Q4bhgyHJkMLbtXDNO5TCVn4IrI63eK/BbEOA/QxszLTMahvGsLCIm7B6ciNziWxDaFFoaeyw8LmcWMTZrA2PTUd9F8H72UIZsYyg8GgPsKJI8QfsHObtTqtRtsB02eyIyLqThm7CAQJHYUC4L108wrBuAQgHQ/rIs6d0mreHmnPKyjdU3Qo9Az8ufoPnYVdZjJdgALgc4LYFAILhumOE+pzEbhPmpsMb3O52ryCggKcWIw7daCws4uwTG9ynW+MC66gSwhdd9XnxN8NNTc1a7WakdDQDpy47oy+s/MxbbEsFxUPNAasONnbS5jo/FRd15DHNRiG24vuTHZ04BrO/L6wsPBmby+cRCDABbuyIqBXneydIJgL7+Jw3x0qmiz9+5df7pk8NCg2HiVMFFZV9dIEKDgjLrn9Sk67WVV1kmCW0I6d+Grw+3/cubMHVulf75p6yBIzGX4nR4K//qlE+EgIR29OmMk0AYAuP/HV0q2O0tLSoj/6JqU+ktNoZHISDO98Utu2mQkEgpnco2RarZ5pachjUqm0ArRaQ4BUW49cLhegQMw2xBP9hnBUQi63ORXONAYjRYiFBaGtaehUS2OmAGUBgZCgp2vsGglNYGExmY2QU6FioVNSPK1WhZLYmCF8NOuPCUGveaaCr11TAWBYnrUiYSNRlSYkqrC1LEYjOos4wyTOoNFr1q7oDUFWKL1RlJbFcgpTWLUiorAxRcVIf5Tu6Qmhg57vVNtegSBsGktEzEpjCZVOtFOhcHo6ayHolScLfNYNGgvVChmsFJWIyExhEK1MbAr0lIsVbrYHYNBYrBCCGCI0JKzFQhAmYPsvNOS1m7xWe2KxaAjOoedqr00r4z7f57dvCQoICAjasv35Pv8fdTV+JbWdnm0AAAAASUVORK5CYII=");
  /* /content/images/logo/ekomi_seal_header2.png */
}

.seal.trustedshops {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtCAMAAAANxBKoAAAC91BMVEUAAABBQUSCg4VUVFYoJypRUFNZWVstLC8lJCdoaGovLjFOTlE7Oj0mJSgsKy40MzZmZ2mIioskIyYnJikwMDIsKy4yMTNJSEw5ODuAgII8Oz+lpqZHRkl9fYBMTE5BQUM6OTwrKi2ampyoqapISEo/PUBYWFoyMTOrq6t+foI+PUB1dnigoKGRkZNYWFqRkZOpqaqlpaeJioyBgYOQkJN7fH0jIiUmJSgAbLQoJyorKSw4Nzn+5qVCQUQ0MzYtLC5QUFL+56cxMDJSUlRHR0n+8+DvznD+9eX84pz/9+r635SIiYr32olxcXNWVlhAP0E8Oz3/+O798Nb95aJqamtdXV/74Zj014J9fX56envy03ruy2llZGZiYWNLS01JSUv/+fH96rqYmJmVlZb22YZ3d3hub3BtbW9NTVBFREc9PT/v7u7q6ejk5OTMzM3Jycm0tLWurq/53pH43I3z1X7x0XbsyWRaWlz98dr+79H+7MeSk5SGhYd/f4H29vb/+fQDaKyqqqugoKEAX6D845+cnJ2OjpB0dHXsyGA3My3//Pny8vL+7czGxsf/8LqwsrGRkZJNRjbX19f968L+8MD/77X96rOnp6iLjI1oZ2fdvFxOST/5+fn98dva2tvT0tH+8MPBwcK/zL28vL1Ij7YQc7QIb7Tm3a/96K766KsCWpUFVo3424sET4OTjHmslE11Z0Td3d357NNroby5ubkbeLP/77H35qakpKXy3aLSw5oKX5nw2ZfhzpCEinial3GonnB0cWyfj2ROYV5YTzbh4eHx58ukvr3x4bna1Lc4h7aVs7IsfbJjnbHb1q7GyKbr2aPt0oSrooNOcXzfxnsfV3d5fnAiT2czV2SBgF/mxF6PfU7++PPd3Nr+7cvg3sPy6L9WlrqatrO1wa6Qr63Ow6yTr6a+uaPezaC5tJyDoJo4eZmFnpTDuo4gZ47TwYmPnYhgdXRnd3IqVmp6eVyQgVmWhVJBVE6AckmXg0hfWEhuYTw/Oi7HGKTxAAAANnRSTlMACv7+5Qc4j4NgSiIV89rMTRD6ybdzWk89NysZ3c3Jt6inpZKShnpmTR707+zs5sK/raR/YEocCsKpAAAFk0lEQVRIx4XVVXQTQRQG4NAWd3d395mVZne7CVAIEUgCCSQpJEQaDxagQltoSymlxWmLu7u7u7u7u/sDs9nAwfmfv/OfOzM3G8HvaVixIJd8hQX/S+XWVRtLrSqdXu2XiUKr1cn3D1uxVZw51WJR6eIma2SMzRAlFlcr/xdbslasxpwq8aRr1dPdrpmcjY4Wyqv8caIGTWPjNLMtRodEKpumtTqQZaZNl9kV8rq/49oxEklGfKJKM3KmlHFZTStRrTRdIyVRauT9BbeMmSwJ8Y716tXpXrctY6xbKlfY/R4fSZr8FFW8yE+4RUyKd6ZGap4ilSVLbOJooV2hILOda1yUNl4upNhieX4aI2VDekyiRe+WMAaxUGTR7mQoipKrFer4KVKnlCbK/HBAY1aKMd7hmu2X2UQmj7NLxw7tpu67u0xOE1mS0ClJBEr+70/SxJSYHKINGWsUMVnOob0CuOvgUUMOLKMIYpKbZUUkXrRSUNcymcZO8UlTYkT+qyN/wON69z6RSwhZ+15HejQelpevjknxSbKca9SibEcQDwriiQs2fsJxn5fSJuM4/6rNJZP3uoxJ7lC96zvetO3Vy22bJi6ICN+Si08yMislOAyUlwyJ02gznS6VzR3EXe/vXnrk0NyEzU8iwpWRW1mFx+mlIIQVkG6jNYeYdepQW1YQrzq3dO6sGePnJ2DYceXwyG67cAgIUkcB7lqqpibFOzJmMyJHEO9etPb6jPGjJ57FsDkId+o3Bkpc8Y4kGIYGSbW4Mx2TJhs0V/gxzi3C9iM8YeF5pBHuu+QttFrHxq6EoLCgoUWVOC3eo4uazh/w4VJsDofXbV2MYfu56s5ncAgnT5dCUEhQEf1Q/DKTWsbjVRcwbBaH179PwA4pUXXnPt3HwEBAWUFbXapXJrKJVfzVnVqMzb3B4d3DsCPHAtXd+6+AG8QhGTQoICih1zhnrkmMTuUf5XQCthrNvP31sHmr5ysju/Vd0qd/j8u4S+f0qTitDpmW6c0UmgN4CLqIzKfbzi9au/ogd9lokO49BryDvnSfhdfSWFtUtHwnh689QEdbtHntzVkLIyLCw4dHdurXp/+A9pchFEMAOO0P5Vbarg8s0qlh2LxZ89cjGhGOdDeuun37FRAloPPJRKhaqDAEFmk70vOR5bByS7C65xgeozspLGIMTLacJA9yW7djGIYd44uVb0536xvAOTgEY9KQLicoydiilu0Tk9RObkWfI30nnCtX7lh8uxM3R8+BH1F1znKk0Q+imUEcJVKQrOIA2ueFzzBs7kalUjn84tLDCA9AeAQaBKTRABRFW1UPTW0nSZZehpY/4gXavMfbd1y8sPkwd0IOL4eAT02kixiEcgVJsQSxCS3/8EfzMCxhWMKc4/368DgnDbK8LiRAqYK0MNOtonM3oveI3HLv6NFbJ/p1Rm/I4Ut7oD4b53DRPJzOJ7TbPUI2VEzkDo9Em9Gpb78lnVFxYOYRnyGYRPv46kCq24WTWC1NEnju1m7Idka2P49z9kCajfIyUTIQhqoD5Y3IFK2RUEhwnN51cknQInxpeRqUmwicTk6CpVA1n3okxdBsBkUwOJ6268xJvjhn+RcISVGyWRa8kGDyVqdYWiskzH6cgJBIG7Piw4o9aTSErEcEmCwQB0DpHz6beYqztFmoisUZDwlJGAwVqtPrALAkKUDYT38QeYvTbKwZNyQm49QGkwFaxTBWhxsBSCYAgCCsCDI/8jIEjstnx3mg3a9OJXxxUGa0xgIg0qCZua/3L7w+OjsBY6CVScFJfRKk9JYMHAAagBoI/5YKxdGsQmikTdCaHafCE4Ga5IoLCf6ccqVxCAEUAQ2EVhAFOFtW8PdUKhNWCnxLqaKlywv+nTxF8pWrkz9//rr1KxT5bd6vB+JaUiyTUSMAAAAASUVORK5CYII=");
  /* /content/images/logo/trustedshops_seal_header2.png */
}

.btn.cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.75rem 0.5rem;
  overflow: hidden;
}

.btn.cta i {
  margin-right: 0.5rem;
}

.btn.cta span {
  white-space: normal;
}

.btn-chevron-left:before {
  content: '\e809';
  font-family: 'font-awesome';
  padding-right: 0.5rem;
  vertical-align: middle;
  font-size: 0.75rem;
}

.btn-chevron-right:after {
  content: '\e80a';
  font-family: 'font-awesome';
  padding-left: 0.5rem;
  vertical-align: middle;
  font-size: 0.75rem;
}

.btn .spinner {
  vertical-align: middle;
  margin-left: 0.5rem;
  display: inline-block;
}

.btn .spinner.hidden {
  display: none;
}

.alert {
  margin: 0.5rem 0 1rem;
}

.alert ul {
  margin: 0;
  padding: 0 1rem;
}

.alert p {
  margin: 0;
}

.product-rating span {
  display: table-cell;
  vertical-align: middle;
}

.product-rating span.stars {
  padding-right: 5px;
  color: #ff8c00;
}

.language {
  background-size: 20px 14px;
  background-repeat: no-repeat;
  background-color: transparent;
  width: 20px;
  height: 14px;
  /*display: inline-block;
    vertical-align: middle;*/
}

.language.de-DE {
  /* /content/images/flags/flag-de.png */
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYBAMAAABpfeIHAAAAJ1BMVEUAAAAAAADKgQDIhQDKgADKgAC9AwLjHRz/0BgnJyfKgAAAAAC6AQBRLfI/AAAABnRSTlPTF84X09X7m77FAAAAPUlEQVR4XsXIoRkAEBRG0V9W7GAGS1jIClZQxZf01yVDyXcAnxOPkkNQZCz5AH8Tu8H5FdbB3kQ1mCqMfAEmntlNmsy/jQAAAABJRU5ErkJggg==");
}

.language.en-GB {
  /* /content/images/flags/flag-en.png */
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAMAAACsjQ8GAAACQFBMVEWCAAtUADmCAA2DAAv39/3///+OAAA3N9YAAImCkZ3rNCnmGRn+/v/y8vzpMSfvOCz+/v7nLyX09P3HDwvtNivoKCju7/v8/P7//v6srO7kLSP88fH7+/3LHxtBQdj29v3y3OFZWd0rLJ1FRtn++fnJyvPuRDr5vrrvWVD1kYs/P9j96unl5fm+vvLua2bpNDTtZl786Of7+/7x8fzykYznMijoOzLwnZz38vjf3/jxjYmOjujrOS/39PrvoaDmOjLzvr/mOzJNTaz86unlLiXsfHj15er12d1CQtjmGhrmGxvygHn19fqmptb13OBmZt/l5/PX1/YDA4qwsdvtOS/wTkT7y8ntNyz6z8zsTEPrUEjtb2rGxvMdHZZHR6rFxfPzwcP+9PP729kKCo2pqe39/f/+/f398/P88fD99/f++/q9vfH++vr6+v7b2/jRJB/QIBrur67+///33NvWPDfOFhHgenr28/nzbmZLS9oZGZT28vjfd3bMFA/TMy/11NPg4ff88/PcYFzMEw7VRkPxkI3g4PlwcOLTQT/JEQzYVVH77+/8/f62uO8+PtfpMzPw8fz4+f3ljYvKFA7NIR3qtLerq+7psbTqOC71o5/ign/+/Pz4+v2DhOXqsLLvu7ree3z28/qpqdcVFZPFDQnIGRTssrHv8PvpUUrGx/L9/v73397PODTFDAjRQ0Hy3uPMMCz119bJy/OTlOiTk+n89PTYX13DCgbIHxt6e8I0NKHv8Pj2t7PpNjY3OKMREZH2C+XnAAAABHRSTlP9gvz9XitHHgAAAa9JREFUeF6t0tO3HEEQBvDZTVV192C917ZtW6Ft27Zt27aNfy3TM/eenSTnJHnI9/Z1/V66TikuhUiINC4jBJFsZpkthGzmWLGeRkz9GYwabQOSc+/YcYhR6YwxA8OaFkaDsUwf5m/wer2mIAqFxudmYPnwCMgbiZidFQqNqTOBEHsbVDVnFkbPGQDJBThzsKqqRd0wZKgJYNhkj+fCxZjoxQEJilHHCRM9nkktAFPauMKnTQeY8cDvLykt0yX4ijEVlf6q6hqofcO4CTirXwaNTc1xrV/QBu1xHZ1dALE9TAIhMBIbOCLE3wGR9ocQ/RcQdqRX0/qcnehffmEYyXP1efMXLBwAi+Ljl+j6UsOMCThnsQDXlq9YibjKBrh6zdp166Fwo7UovqkQNm/Zum076jsC/QB37tq9JwX27bc3CSkHDh46jEeOHjMkOI4nTqLv1OkzZwHOWeB8YvDSZbxyNXIPqVGI1xODN27CrdsK0Z279xDvpzovKunhI3z85Omz59YeXrxE36sk5gSMvU7At+/ef7CPkhI+8l+vmn/6bDW34hpE9I3/Dvh32dyuHxETYdlngvxQAAAAAElFTkSuQmCC");
}

.language.fr-FR {
  /* /content/images/flags/flag-fr.png */
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYBAMAAABpfeIHAAAAJFBMVEVGL55DLJumCgqmCwulCgpFL571+PvlHR1mQvKlCgpGL56CkZ0NOplsAAAABnRSTlPTF9MXztWmhF2bAAAAPklEQVR4Xu3QIRUAIAxF0a9RGBIQhS5UWAU0B7MKq0A5/pkbFsuVTz5ko+2UKlIMEzaoOyF9Dj/ckxdKDO0AOjzAOpJ9ZV4AAAAASUVORK5CYII=");
}

/* Aspect Ratio Sizer */
.aspect-ratio-sizer {
  display: grid;
}

.aspect-ratio-sizer > * {
  grid-area: 1 / 1 / 2 / 2;
}

/* Aspect Ratio Calculator: https://andrew.hedges.name/experiments/aspect_ratio/*/
/* Usage:
     <div class="aspect-ratio-sizer">
        <svg viewBox="0 0 16 9"></svg>
        Content goes here
    </div>
*/
html, body {
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  height: 100%;
}

body {
  background-color: whitesmoke;
  color: #373a3c;
  font-family: 'Roboto', 'Open Sans', Arial, sans-serif;
}

/**************/
/*** Gerüst ***/
/**************/
#site-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  /* Webkit Bugfix */
  min-height: 100%;
}

#site-header, #site-navigation, #site-content, #site-footer, #site-search {
  background-color: #ffffff;
}

.site-container {
  margin: 0 auto;
  max-width: 1440px;
}

/*#site-header {
    order: 1;
}

#site-navigation {
    order: 2;
}

#site-content {
    order: 3;
}

#site-footer {
    order: 4;
}*/
/**************/
/*** Panels ***/
/**************/
.site-panel {
  width: 100%;
  max-width: 1440px;
  padding: 1rem;
  background-color: #ffffff;
  /*border-bottom: 1px solid $gray-light;*/
}

@media (min-width: 992px) {
  .site-panel {
    /*padding: $box-standard-padding;*/
    margin: 1rem auto 0;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.12);
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.12);
    -webkit-transition: opacity .15s ease-out;
    transition: opacity .15s ease-out;
  }
}

/* Bootstrap Addition */
select.form-control {
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-padding-end: 5px;
  -moz-padding-end: 5px;
  -webkit-padding-start: 5px;
  -moz-padding-start: 5px;
  -webkit-box-shadow: none;
          box-shadow: none;
  margin: 0;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: normal;
}

@-webkit-keyframes borderscale {
  50% {
    -webkit-box-shadow: 0 0 0 2px #ff8c00;
            box-shadow: 0 0 0 2px #ff8c00;
  }
}

@keyframes borderscale {
  50% {
    -webkit-box-shadow: 0 0 0 2px #ff8c00;
            box-shadow: 0 0 0 2px #ff8c00;
  }
}

@-webkit-keyframes input-pulse {
  0%, 80% {
    border-bottom: 1px solid #2f7d43;
    -webkit-box-shadow: 0 1px 0 0 #2f7d43;
            box-shadow: 0 1px 0 0 #2f7d43;
  }
  100% {
    border-bottom: 1px solid #dcdde0;
    -webkit-box-shadow: 0 1px 0 0 transparent;
            box-shadow: 0 1px 0 0 transparent;
  }
}

@keyframes input-pulse {
  0%, 80% {
    border-bottom: 1px solid #2f7d43;
    -webkit-box-shadow: 0 1px 0 0 #2f7d43;
            box-shadow: 0 1px 0 0 #2f7d43;
  }
  100% {
    border-bottom: 1px solid #dcdde0;
    -webkit-box-shadow: 0 1px 0 0 transparent;
            box-shadow: 0 1px 0 0 transparent;
  }
}

.lazy-image-wrapper {
  width: 100%;
  height: 0;
  position: relative;
}

.lazy-image-wrapper.r1-1 {
  /* Padding Bottom = (Image Height / Image Width) * 100% */
  /* 16:9 = 56.25% = calc(9 / 16 * 100%) */
  /*  1:1 = 100% */
  padding-bottom: 100%;
}

/*.lazy-image-wrapper img {
    width: 100%;
    position: absolute;
}*/
img.lazyload,
img.lazyloading {
  opacity: 0;
}

img.lazyloaded {
  -webkit-transition: opacity 300ms;
  transition: opacity 300ms;
  opacity: 1;
}

.spinner {
  width: 1rem;
  height: 1rem;
  position: relative;
  border: 2px solid rgba(0, 0, 0, 0.5);
  border-top-color: transparent;
  border-radius: 100%;
  -webkit-animation: spin 1s infinite linear;
  animation: spin 1s infinite linear;
}

.spinner:after {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  top: -5px;
  left: 0px;
  border: 4px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.5);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.btn-primary .spinner, .btn-info .spinner {
  border-color: transparent #ffffff #ffffff;
}

.btn-primary .spinner:after, .btn-info .spinner:after {
  border-bottom-color: #ffffff;
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.accordion.xxl-down .header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  margin: 0 -1rem;
  padding: 1rem;
  border-top: 1px solid #818a91;
}

.accordion.xxl-down .header h2 {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 1.25rem !important;
  border: none !important;
}

.accordion.xxl-down .content {
  display: none;
  padding: 1rem 0;
}

.accordion.xxl-down .content h1 {
  font-size: 1.5rem !important;
}

.accordion.xxl-down.active .header {
  background-color: #f0f0f0;
  border-bottom: 1px solid #cccccc;
}

.accordion.xxl-down.active .header > i {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.accordion.xxl-down.active .content {
  display: block;
}

@media (max-width: 991.9px) {
  .accordion.md-down .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    cursor: pointer;
    margin: 0 -1rem;
    padding: 1rem;
    border-top: 1px solid #818a91;
  }
  .accordion.md-down .header h2 {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 1.25rem !important;
    border: none !important;
  }
  .accordion.md-down .content {
    display: none;
    padding: 1rem 0;
  }
  .accordion.md-down .content h1 {
    font-size: 1.5rem !important;
  }
  .accordion.md-down.active .header {
    background-color: #f0f0f0;
    border-bottom: 1px solid #cccccc;
  }
  .accordion.md-down.active .header > i {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .accordion.md-down.active .content {
    display: block;
  }
}

@media (max-width: 767.9px) {
  .accordion.sm-down .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    cursor: pointer;
    margin: 0 -1rem;
    padding: 1rem;
    border-top: 1px solid #818a91;
  }
  .accordion.sm-down .header h2 {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 1.25rem !important;
    border: none !important;
  }
  .accordion.sm-down .content {
    display: none;
    padding: 1rem 0;
  }
  .accordion.sm-down .content h1 {
    font-size: 1.5rem !important;
  }
  .accordion.sm-down.active .header {
    background-color: #f0f0f0;
    border-bottom: 1px solid #cccccc;
  }
  .accordion.sm-down.active .header > i {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .accordion.sm-down.active .content {
    display: block;
  }
}

#breadcrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

@media (max-width: 991.9px) {
  #breadcrumb {
    border-bottom: 1px solid #cccccc;
    padding-bottom: 1rem;
    margin-bottom: 0;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
  }
}

#breadcrumb li, #breadcrumb a, #breadcrumb i {
  display: table-cell;
  vertical-align: baseline;
}

#breadcrumb li.current a {
  color: #373a3c;
  font-weight: bold;
}

#breadcrumb li i {
  padding: 0 5px;
}

#breadcrumb li:first-of-type i {
  padding-left: 0;
}

#breadcrumb li .tag {
  vertical-align: baseline;
}

#breadcrumb::-WebKit-scrollbar {
  -WebKit-appearance: none;
}

#breadcrumb::-WebKit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.25);
  -WebKit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

#breadcrumb::-webkit-scrollbar:horizontal {
  height: 4px;
}

.bubble {
  position: relative;
  padding: 5px;
  background: #FFFFFF;
  border-radius: 10px;
  border: #ccc solid 1px;
}

.bubble:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 0 10px 10px;
  border-color: #FFFFFF transparent;
  display: block;
  width: 0;
  z-index: 1;
  margin-left: -10px;
  top: -10px;
  left: 70%;
}

.bubble:before {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 0 10px 10px;
  border-color: #ccc transparent;
  display: block;
  width: 0;
  z-index: 0;
  margin-left: -10px;
  top: -11px;
  left: 70%;
}

.checklist {
  /* table-cell trick is not working with IE 11 */
  /* therefore this workaround with padding-left and text-indent */
  /* some icons might bug on the right end of the text if they are inline-block */
}

.checklist ul {
  list-style: none;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 1.5rem;
  text-indent: -1.75rem;
}

.checklist li:before {
  content: '\e804';
  font-family: 'font-awesome';
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.75rem;
  color: #2f7d43;
}

.checklist li.pdf:before {
  content: '\f1c1';
  color: #373a3c;
  font-size: 1rem;
}

.checklist li.print:before {
  content: '\e81f';
  color: #373a3c;
  font-size: 1rem;
}

.checklist li i.fa-external-link {
  margin-left: 0.25rem;
  color: #777777;
}

#checkout-progress {
  position: relative;
}

#checkout-progress .hole {
  /*background-color: $gray-medium-lighter;*/
  background-color: #ffffff;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  position: relative;
  border: 2px solid #777777;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#checkout-progress ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

#checkout-progress ul li {
  -ms-flex: 1 1 20%;
  -webkit-box-flex: 1;
          flex: 1 1 20%;
  max-width: 300px;
}

#checkout-progress ul li.visited .hole i {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  position: relative;
  z-index: 2;
}

#checkout-progress ul li.active {
  font-weight: bold;
}

#checkout-progress ul li.active a .hole {
  color: #ffffff;
}

#checkout-progress ul li.active .hole {
  background-color: #777777;
}

#checkout-progress ul li.disabled a {
  color: #818a91;
  cursor: not-allowed;
}

#checkout-progress ul li.disabled .hole {
  border-color: #cccccc;
}

@media (min-width: 992px) {
  #checkout-progress ul li {
    /*background-color: $gray-lighter;*/
    border: 1px solid #f0f0f0;
  }
  #checkout-progress ul li a {
    color: #373a3c;
    padding: 0.75rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    line-height: 1.25rem;
  }
  #checkout-progress ul li a .hole {
    margin-right: 0.75rem;
  }
  #checkout-progress ul li a .info {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
  }
  #checkout-progress ul li a > i {
    font-size: 1.5em;
  }
  #checkout-progress ul li.visited {
    border-color: #cccccc;
  }
  #checkout-progress ul li.active {
    border-color: #777777;
  }
  #checkout-progress ul li:not(:last-of-type) {
    margin-right: 1rem;
  }
}

@media (max-width: 991.9px) {
  #checkout-progress ul {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #checkout-progress ul li a {
    text-align: center;
    display: block;
    position: relative;
  }
  #checkout-progress ul li a > div {
    position: relative;
    z-index: 2;
  }
  #checkout-progress ul li a hr {
    position: absolute;
    z-index: 1;
    top: 0;
    width: 50%;
  }
  #checkout-progress ul li a hr.left {
    left: 0;
  }
  #checkout-progress ul li a hr.right {
    right: 0;
  }
  #checkout-progress ul li a .hole {
    margin: 0 auto 0.25rem;
  }
  #checkout-progress ul li.visited hr {
    border-color: #777777;
  }
  #checkout-progress ul li.active hr.left {
    border-color: #777777;
  }
  #checkout-progress ul li.active .hole {
    background-color: #777777;
  }
}

@media (max-width: 543.9px) {
  #checkout-progress {
    font-size: 0.7em;
  }
}

/* before script init */
.owl-carousel.standard:not(.owl-loaded) {
  overflow-x: auto;
  white-space: nowrap;
}

.owl-carousel.standard:not(.owl-loaded) > div {
  display: inline-block;
}

.owl-carousel.standard:not(.owl-loaded) a div:first-child {
  height: 115px;
  width: 115px;
}

.owl-carousel.standard {
  margin-bottom: 1rem;
  /* occupy space to reduce moving content while script is being executed */
  /* after script is done, this rule doesn't apply anymore */
}

.owl-carousel.standard .owl-stage-outer {
  margin-bottom: 1rem;
}

.owl-carousel.standard > .item-product {
  min-width: 25%;
  height: 300px;
  /* war 265px, die Kachel in _redesign.scss bringt Padding mit */
}

.owl-carousel.standard .item-product a:hover, .owl-carousel.standard .item-product a:visited, .owl-carousel.standard .item-product a:link, .owl-carousel.standard .item-product a:active {
  text-decoration: none;
}

.owl-carousel.standard .item-product a:hover .name span:last-child {
  text-decoration: underline;
}

.owl-carousel.standard .item-product img {
  width: 115px;
  height: 115px;
  margin: 0 auto;
}

.owl-carousel.standard .item-product .price {
  background-color: #f0f0f0;
  color: #373a3c;
  padding: 5px 0;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.owl-carousel.standard .item-product .product-base-price, .owl-carousel.standard .item-product .product-discount {
  color: #818a91;
}

.owl-carousel.standard .item-product .product-availability {
  margin-top: 0.25rem;
}

.owl-carousel.standard .item-video {
  height: 300px;
}

.owl-carousel.standard .owl-nav {
  position: relative;
  margin-top: 10px;
}

.owl-carousel.standard .owl-nav div {
  position: absolute;
  top: -1rem;
  margin: 10px 0;
}

.owl-carousel.standard .owl-nav .owl-prev {
  left: 0;
}

.owl-carousel.standard .owl-nav .owl-next {
  right: 0;
}

.owl-carousel.standard .owl-nav.disabled + .owl-dots {
  position: relative;
  margin-top: -2.5rem;
}

/*@import "components/category-grid";*/
.content-menu-left {
  margin-bottom: 1rem;
  /*width: 250px;*/
  width: 247px;
  /* to preserve width of category images => _site-content.scss */
  border: 1px solid #cccccc;
}

@media (max-width: 991.9px) {
  .content-menu-left {
    width: 100%;
  }
}

@media (max-width: 991.9px) {
  .content-menu-left.lg-up {
    margin: 0;
    width: auto;
    border: none;
  }
}

.content-menu-left.accordion .header {
  background-color: transparent;
  border: none;
  margin: 0;
}

.content-menu-left.accordion .content {
  padding: 0;
}

.menu-standard a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 2px;
  -webkit-transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: -webkit-transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

.menu-standard a:hover {
  background: #f0f0f0;
  text-decoration: none;
}

.menu-standard ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.menu-standard > ul {
  padding: 8px 10px;
}

.menu-standard li {
  padding-left: 1rem;
}

.menu-standard li.level-1, .menu-standard li.level-2 {
  padding-left: 0;
}

.menu-standard li.level-1 > ul {
  border-top: 1px solid #cccccc;
  padding-top: 4px;
  margin-top: 4px;
}

.menu-standard li.level-1 > a, .menu-standard li.current > a {
  font-weight: bold;
}

.menu-standard li.current:not(.level-1):not(.level-2) > a {
  border-left: 2px solid #373a3c;
  margin-left: -8px;
  padding-left: 8px;
}

/* BANNER */
#cconsent-bar {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.7);
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow-y: auto;
}

#cconsent-bar .cconsent-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: auto;
  background-color: #dff1fa;
  line-height: 1.5rem;
  padding: 1rem;
  border-radius: 8px;
  max-width: 1200px;
}

@media (max-width: 543.9px) {
  #cconsent-bar .cconsent-wrapper {
    display: block;
  }
}

#cconsent-bar .cconsent-wrapper a:hover {
  text-decoration: underline;
}

#cconsent-bar .cconsent-left {
  -ms-flex-item-align: center;
      align-self: center;
  text-align: center;
  padding: 1rem;
}

@media (max-width: 767.9px) {
  #cconsent-bar .cconsent-left {
    -ms-flex-item-align: start;
        align-self: flex-start;
  }
}

#cconsent-bar .cconsent-right {
  -ms-flex-item-align: center;
      align-self: center;
  padding: 2rem 1rem 1rem 1rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

@media (max-width: 767.9px) {
  #cconsent-bar .cconsent-button-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

#cconsent-bar .cconsent-button {
  border: none;
  padding: 0.5rem;
  outline: none;
  margin-bottom: 0.5rem;
  margin-right: 0.5rem;
}

@media (max-width: 767.9px) {
  #cconsent-bar .cconsent-button {
    margin-bottom: 0.75rem;
    margin-right: 0;
    border: 1px solid #777777;
    font-size: 80%;
  }
}

#cconsent-bar .cconsent-button.accept {
  background-color: #2f7d43;
  padding: 0.75rem 1rem;
  color: #fff;
  font-size: 100% !important;
  border: 1px solid #2f7d43 !important;
}

#cconsent-bar .cconsent-button.customize {
  background-color: inherit;
}

#cconsent-bar .cconsent-button.deny {
  background-color: inherit;
}

#cconsent-bar .cconsent-button:hover {
  text-decoration: underline;
}

#site-footer .cconsent-bar-visible {
  padding-bottom: 90px;
}

/* ToDo: mehr padding-bottom im mobile */
#modal-cookie-consent .switch-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

#modal-cookie-consent .info-container {
  border-bottom: 1px solid #f0f0f0;
}

#modal-cookie-consent .info-container.last {
  border-bottom: none;
}

#modal-cookie-consent h4 {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: normal;
}

#modal-cookie-consent h4 i {
  margin-left: 0.25rem;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  -ms-flex-item-align: start;
      align-self: flex-start;
}

#modal-cookie-consent h4.toggle-active i {
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
  -ms-flex-item-align: end;
      align-self: flex-end;
}

@media print {
  #cconsent-bar, #modal-cookie-consent {
    display: none !important;
  }
}

#easycredit-rate-wish {
  position: relative;
  background-color: #fafafa;
  border: 1px solid #ccc;
  margin: 0 0 20px;
  padding: 15px 10px;
}

#easycredit-rate-wish select {
  width: 100%;
  font-weight: 700;
}

#easycredit-rate-wish select option {
  font-weight: 400;
}

#easycredit-rate-wish h1 {
  border-bottom: medium none;
}

#easycredit-rate-wish h1 img {
  width: 90px;
  position: absolute;
  right: 0;
  top: -10px;
}

#easycredit-rate-wish h2 {
  margin-bottom: 10px;
}

#easycredit-rate-wish table {
  width: 100%;
}

#easycredit-rate-wish th {
  width: 50%;
}

#easycredit-rate-wish td {
  vertical-align: top;
}

#easycredit-rate-wish th, #easycredit-rate-wish td {
  padding: 5px;
  text-align: left;
}

#easycredit-rate-wish tbody td:nth-child(3n-1) {
  padding-left: 15px;
}

#easycredit-rate-wish td:nth-child(2) {
  text-align: right;
  white-space: nowrap;
}

@media (min-width: 544px) {
  #easycredit-rate-wish th:nth-child(1) {
    width: 60%;
  }
}

#easycredit-rate-wish td:nth-child(3) {
  width: 100%;
}

@media (max-width: 543.9px) {
  #easycredit-rate-wish td:nth-child(3) {
    display: none;
  }
}

#easycredit-rate-wish span.field-validation-error {
  color: red;
  font-size: 0.8em;
}

#easycredit-rate-wish .bubble {
  font-size: 0.85em;
  margin: 5px 0;
  padding: 15px 10px;
}

#easycredit-rate-wish .bubble:before, #easycredit-rate-wish .bubble:after {
  left: auto;
  right: 20px;
}

#easycredit-rate-wish #easycredit-custom-error {
  color: #d9534f;
  background-color: #fff;
  border-color: #d9534f;
}

#easycredit-rate-wish #easycredit-installment {
  font-weight: 700;
  color: #ff8c00;
}

#easycredit-representative-example .nobr {
  white-space: nowrap;
}

.ellip {
  /*display: block;*/
  height: 100%;
}

.ellip-line {
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  max-width: 100%;
  /*line-height: 1rem;*/
}

.ellip,
.ellip-line {
  position: relative;
  overflow: hidden;
}

.eec-label {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #ffffff;
  display: inline-block;
  font-size: 1.25em;
  font-weight: 700;
  height: 30px;
  line-height: 1.25em;
  margin-right: 18px;
  margin-bottom: 0;
  padding: 2px 4px;
  position: relative;
  top: -4px;
  letter-spacing: -1px;
  cursor: pointer;
}

/* apply inline-block to the next element, which should be the price */
.eec-label + #product-price {
  display: inline-block;
}

.eec-label:after {
  border: 15px solid transparent;
  content: " ";
  display: block;
  left: 100%;
  margin-top: -15px;
  position: absolute;
  top: 50%;
}

.eec-a {
  background-color: #0FB15E;
}

.eec-a:after {
  border-left-color: #0FB15E;
}

.eec-b {
  background-color: #54B95B;
}

.eec-b:after {
  border-left-color: #54B95B;
}

.eec-c {
  background-color: #B4D44B;
}

.eec-c:after {
  border-left-color: #B4D44B;
}

.eec-d {
  background-color: #F6EC3C;
}

.eec-d:after {
  border-left-color: #F6EC3C;
}

.eec-e {
  background-color: #FCB72E;
}

.eec-e:after {
  border-left-color: #FCB72E;
}

.eec-f {
  background-color: #F37731;
}

.eec-f:after {
  border-left-color: #F37731;
}

.eec-g {
  background-color: #EF3236;
}

.eec-g:after {
  border-left-color: #EF3236;
}

.financing-box > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}

.financing-box table {
  display: block;
  width: 100%;
  -ms-flex: 1 1 auto;
  -webkit-box-flex: 1;
          flex: 1 1 auto;
}

.financing-box button {
  -ms-flex-item-align: end;
      align-self: flex-end;
}

#modal-financing {
  /* Financing Modal Content */
}

#modal-financing .modal-dialog {
  max-width: 800px;
}

#modal-financing #financing-container #financing-header .kc-input-container button i {
  color: #656565;
  font-size: 1.75rem;
  line-height: 2rem;
}

#modal-financing #financing-container #commerzfinanz #financing-body {
  overflow-x: auto;
}

#modal-financing #financing-container #commerzfinanz #financing-body table th, #modal-financing #financing-container #commerzfinanz #financing-body table td {
  vertical-align: top;
  text-align: center;
  white-space: nowrap;
  width: 20%;
  padding: 5px;
}

#modal-financing #financing-container #commerzfinanz #financing-body table th {
  border-bottom: 1px solid #333333;
}

#modal-financing #financing-container #commerzfinanz #financing-body table tr:nth-child(2n+1) td {
  background-color: #eeeeee;
}

.kc-input-container {
  /* checkbox / radio */
  /* ToDo: checkbox und radio evtl. mal überarbeiten */
  /* input container */
  /* validation */
}

.kc-input-container input[type="checkbox"],
.kc-input-container input[type="radio"] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.kc-input-container input[type="checkbox"]:active ~ label:before,
.kc-input-container input[type="radio"]:active ~ label:before {
  -webkit-transition-duration: 0;
  transition-duration: 0;
  background-color: #ffc680;
}

.kc-input-container input[type="checkbox"] ~ label,
.kc-input-container input[type="radio"] ~ label {
  position: relative;
  padding: 0.5rem;
  padding-left: 1.75rem;
  vertical-align: middle;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.kc-input-container input[type="checkbox"] ~ label:before,
.kc-input-container input[type="radio"] ~ label:before {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  content: '';
  color: #ff8c00;
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  margin-top: -11px;
  border: 2px solid grey;
  text-align: center;
  background-color: #ffffff;
}

.kc-input-container input[type="checkbox"] ~ label:after,
.kc-input-container input[type="radio"] ~ label:after {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  content: '';
  background-color: #ff8c00;
  position: absolute;
  top: 50%;
  left: 4px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition: transform 200ms ease-out;
  -webkit-transition: -webkit-transform 200ms ease-out;
  transition: -webkit-transform 200ms ease-out;
  transition: transform 200ms ease-out;
  transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;
}

.kc-input-container input[type="checkbox"]:checked ~ label:before {
  -webkit-animation: borderscale 200ms ease-in;
  animation: borderscale 200ms ease-in;
}

.kc-input-container input[type="checkbox"]:checked ~ label:after {
  content: '';
  -webkit-transform: rotate(-45deg) scale(1);
  transform: rotate(-45deg) scale(1);
  -webkit-transition: transform 200ms ease-out;
  -webkit-transition: -webkit-transform 200ms ease-out;
  transition: -webkit-transform 200ms ease-out;
  transition: transform 200ms ease-out;
  transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;
}

.kc-input-container input[type="checkbox"] ~ label:after {
  background-color: transparent;
  top: 50%;
  left: 4px;
  width: 8px;
  height: 3px;
  margin-top: -4px;
  border-style: solid;
  border-color: #ff8c00;
  border-width: 0 0 3px 3px;
  -o-border-image: none;
  border-image: none;
  -webkit-transform: rotate(-45deg) scale(0);
  transform: rotate(-45deg) scale(0);
  -webkit-transition: none;
  transition: none;
}

.kc-input-container input[type="radio"]:checked ~ label:before {
  -webkit-animation: borderscale 300ms ease-in;
  animation: borderscale 300ms ease-in;
  background-color: #ffffff;
}

.kc-input-container input[type="radio"]:checked ~ label:after {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.kc-input-container input[type="radio"] ~ label:before, .kc-input-container input[type="radio"] ~ label:after {
  border-radius: 50%;
}

.kc-input-container .input-field {
  margin-top: 1.25rem;
  position: relative;
  /* standard label */
  /*.select-wrapper ~ label {
            top: 0.25rem;
        }*/
  /* floating label and select label (which is always floating) */
  /* label with focus */
  /* placeholder */
  /* placeholder while label is in focus */
  /* input group */
  /* input general */
  /* input select */
  /* IE 10/11+ - This hides native dropdown button arrow so it will have the custom appearance, IE 9 and earlier get a native select - targeting media query hack via http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5 - looking for better ways to achieve this targeting */
  /* The second rule removes the odd blue bg color behind the text in the select button in IE 10/11 and sets the text color to match the focus style's - fix via http://stackoverflow.com/questions/17553300/change-ie-background-color-on-unopened-focused-select-box */
  /* textarea */
  /* textarea character counter */
  /* file */
}

.kc-input-container .input-field label {
  cursor: text;
  left: 0;
  position: absolute;
  top: 0.5rem;
  -webkit-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
  color: #818a91;
  margin: 0;
  pointer-events: none;
  /* prevents selecting on double click */
}

.kc-input-container .input-field label.active, .kc-input-container .input-field label.stay-active, .kc-input-container .input-field .select-wrapper ~ label {
  font-size: 0.8rem;
  -webkit-transform: translateY(-1.5rem);
          transform: translateY(-1.5rem);
}

.kc-input-container .input-field .input-text:focus:not([readonly]) ~ label {
  color: #ff8c00;
}

.kc-input-container .input-field .d-placeholder ~ label small {
  color: #aaaaaa;
  display: inline-block;
  margin-left: 5px;
  vertical-align: middle;
}

.kc-input-container .input-field .d-placeholder ~ label.active small {
  display: none;
}

.kc-input-container .input-field .input-group .input-group-addon {
  background-color: transparent;
  border: medium none;
  position: absolute;
  right: 0;
  cursor: pointer;
}

.kc-input-container .input-field .input-group .input-group-addon.click-toggle-pw + input {
  margin-right: 50px;
}

.kc-input-container .input-field .input-text, .kc-input-container .input-field .input-select {
  border: none;
  border-bottom: 1px solid #dcdde0;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 1rem;
  height: 2.5rem;
  margin: 0 0 0.5rem 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  width: 100%;
  outline: none;
  caret-color: #373a3c;
  /* on focus */
  /* on de-focus and valid */
  /* on de-focus and invalid */
}

.kc-input-container .input-field .select-wrapper .input-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #373a3c;
}

.kc-input-container .input-field .input-text:focus:not([readonly]), .kc-input-container .input-field .input-select:focus:not([readonly]) {
  border-bottom: 1px solid #ff8c00;
  -webkit-box-shadow: 0 1px 0 0 #ff8c00;
          box-shadow: 0 1px 0 0 #ff8c00;
}

.kc-input-container .input-field .input-text.valid:not(:focus), .kc-input-container .input-field .input-select.valid:not(:focus) {
  -webkit-animation: 1500ms ease-in-out 0s normal none 1 running input-pulse;
  animation: 1500ms ease-in-out 0s normal none 1 running input-pulse;
}

.kc-input-container .input-field .input-text.invalid, .kc-input-container .input-field .input-text.invalid:not(:focus), .kc-input-container .input-field .input-select.invalid, .kc-input-container .input-field .input-select.invalid:not(:focus) {
  border-bottom: 1px solid #c9433f;
  -webkit-box-shadow: 0 1px 0 0 #c9433f;
          box-shadow: 0 1px 0 0 #c9433f;
}

.kc-input-container .input-field .select-wrapper {
  position: relative;
  /* triangle */
}

.kc-input-container .input-field .select-wrapper:after {
  border-left: 0.375em solid transparent;
  border-right: 0.375em solid transparent;
  border-top: 0.625em solid #55595c;
  content: "";
  height: 0;
  padding: 0;
  pointer-events: none;
  position: absolute;
  right: 0.5rem;
  top: 1rem;
  width: 0;
}

.kc-input-container .input-field .select-wrapper .input-select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #ffffff;
  overflow: hidden;
  padding-right: 1.75rem;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.kc-input-container .input-field .select-wrapper .input-select option {
  padding: 0.5rem;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .kc-input-container .input-field select::-ms-expand {
    display: none;
  }
  .kc-input-container .input-field select:focus::-ms-value {
    background: transparent;
    color: grey;
  }
}

.kc-input-container .input-field textarea.input-text {
  width: 100%;
  height: 2.5rem;
  background-color: transparent;
  overflow-y: hidden;
  /* prevents scroll bar flash */
  padding: 0.5rem 0;
  /* prevents text jump on Enter keypress */
  resize: none;
}

.kc-input-container .input-field .character-counter {
  position: absolute;
  right: 0;
}

.kc-input-container .input-field input[type="file"].input-text + label {
  top: 0;
}

.kc-input-container .field-validation.hidden {
  opacity: 0;
  height: 0;
}

.kc-input-container .field-validation {
  color: #c9433f;
  display: block;
  font-size: 0.8rem;
  -webkit-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
}

/* For textarea autoresize */
.hiddendiv {
  display: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: normal;
  overflow-wrap: break-word;
  /* future version of deprecated 'word-wrap' */
  padding-top: 0.5rem;
  /* prevents text jump on Enter keypress */
}

/* alter Kram */
@media (max-width: 767.9px) {
  #last-visited-container {
    padding-top: 0;
    padding-bottom: 0;
  }
}

#carousel-last-visited img {
  width: 100px;
  height: 100px;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
}

#carousel-last-visited a:hover img {
  padding: 1px;
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  filter: grayscale(0%);
}

#carousel-last-visited .item-product {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.list-product-badge {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  z-index: 1;
}

.list-product-badge i {
  float: right;
  padding: 4px;
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 2px;
  color: #808080;
  margin-left: 4px;
}

.login-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  /*.btn {
        margin-top: $box-standard-margin;
    }*/
}

.login-container .input-group .input-group-addon {
  cursor: pointer;
  z-index: 4;
}

@media (max-width: 767.9px) {
  .login-container:not(:last-child) {
    margin-bottom: 1rem;
  }
}

.modal .modal-header .close {
  margin: -0.5rem;
}

.modal .modal-header button.close {
  padding: 0.5rem;
}

.modal .modal-fluid {
  max-width: 1410px;
  /* fallback */
  max-width: calc(1440px - (2 * 1rem)) !important;
}

@media (min-width: 544px) and (max-width: 1439.9px) {
  .modal .modal-fluid {
    margin: 1rem;
  }
}

.modal .modal-footer {
  clear: both;
}

/*@include media-breakpoint-down(sm) {*/
/* => max-width: 767px */
@media (max-width: 991.9px) {
  /* offside-js 1.3.1 22-05-2016
        * Minimal JavaScript kit without library dependencies to push things off-canvas using just class manipulation
        * https://github.com/toomuchdesign/offside.git
        *
        * by Andrea Carraro
        * Available under the MIT license
        */
  /* Off-canvas element CSS */
  .offside {
    position: fixed;
    /* Does not play well with some old browsers (see: README) */
    width: 85%;
    height: 100%;
    top: 0;
    z-index: 9999;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* enables momentum scrolling in iOS overflow elements */
    display: none;
    /* fix for disabled javascript / smartphones with slow javascript execution (1/2) */
  }
  /* Left off-canvas elements default status: out of the page */
  .offside--left {
    left: -85%;
    right: auto;
    display: block;
    /* fix for disabled javascript / smartphones with slow javascript execution (2/2) */
  }
  /* Right off-canvas elements default status: out of the page */
  .offside--right {
    left: auto;
    right: -85%;
    display: block;
    /* fix for disabled javascript / smartphones with slow javascript execution (2/2) */
  }
  /*
     * Left off-canvas element is open:
     * - off-canvas element slides in (100%)
     * - container elements slides out (85%)
     */
  .offside--left.is-open {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  .offside-js--is-left .offside-sliding-element {
    -webkit-transform: translate3d(85%, 0, 0);
    transform: translate3d(85%, 0, 0);
  }
  /*
     * Right off-canvas element is open:
     * - off-canvas element slides in (100%)
     * - container elements slides out (85%)
     */
  .offside--right.is-open {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  .offside-js--is-right .offside-sliding-element {
    -webkit-transform: translate3d(-85%, 0, 0);
    transform: translate3d(-85%, 0, 0);
  }
  /* Elements Transitions */
  .offside-js--interact .offside,
  .offside-js--interact .offside-sliding-element {
    -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: -webkit-transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    /* improves performance issues on mobile*/
    /* but when a scrollbar appears, the content gets blurry */
    /*-webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        -moz-perspective: 1000;
        -ms-perspective: 1000;
        perspective: 1000;*/
  }
  /* Body overflow */
  .offside-js--init {
    overflow-x: hidden;
  }
  /* Just few cosmetic CSS for overlay fade in/out */
  .offside-js--is-open #site-overlay {
    visibility: visible;
    opacity: .7;
    -webkit-transition-delay: delay 0s;
    transition-delay: delay 0s;
  }
  /* General Fixes */
  /* prevent scrolling of #site-wrap while menu is opened */
  body.offside-js--is-open #site-wrap {
    overflow: hidden;
    position: fixed;
  }
  /* Fallback movements for browser not supporting CSS 3d Transitions
        ----------------------------------------------- */
  /* ToDo: Testen */
  /* Modernizr false negative csstransforms3d fix, reset CSS 3d Transitions */
  /*.no-csstransforms3d .offside {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }*/
  /*.no-csstransforms3d .offside-sliding-element {
        overflow-x: hidden;
        position: relative;
    }*/
  /* Element is open: off-canvas element slides in */
  /*.no-csstransforms3d .offside--left.is-open {
        left: 0;
    }*/
  /*.no-csstransforms3d .offside--right.is-open {
        right: 0;
    }*/
  /* Element is open: container elements slide out */
  /*.no-csstransforms3d > .offside-js--is-left .offside-sliding-element {
        right: -200px;
    }*/
  /*.no-csstransforms3d > .offside-js--is-right .offside-sliding-element {
        left: -200px;
    }*/
}

.pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row nowrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-flow: row nowrap;
  overflow: hidden;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0;
}

.pagination .prev {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}

.pagination .next {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 1 auto;
  -webkit-box-flex: 1;
          flex: 1 1 auto;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

@media (max-width: 767.9px) {
  .pagination li a, .pagination select {
    border: 1px solid #777777;
  }
  .pagination select {
    height: 100% !important;
    padding: 0 2rem;
    text-align: center;
    -ms-text-align-last: center;
    -moz-text-align-last: center;
    text-align-last: center;
  }
}

#product-list-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-bottom: 0.5rem;
  /* don't replace with m-b-0_5 */
}

@media (min-width: 992px) {
  #product-list-header #product-list-overview {
    -ms-flex-item-align: center;
        align-self: center;
  }
  #product-list-header #product-list-sort {
    /*display: flex;
            -ms-flex-wrap: nowrap;
            -webkit-flex-wrap: nowrap;
            flex-wrap: nowrap;
            -ms-flex-direction: row;
            -webkit-flex-direction: row;
            flex-direction: row;
            align-items: center;
            align-self: flex-start;*/
    /*padding-left: ($box-standard-padding / 2);*/
    display: table;
  }
  #product-list-header #product-list-sort span {
    display: table-cell;
    /*padding-right: ($box-standard-padding / 2);*/
    padding: 0 0.5rem;
    vertical-align: middle;
  }
  #product-list-header #product-list-sort select {
    display: table-cell;
    vertical-align: middle;
    /* Fix - muss genau so da bleiben */
    /*flex: 1 1 auto;*/
  }
}

@media (max-width: 991.9px) {
  #product-list-header {
    margin-bottom: 1rem;
    /* don't replace with m-b-1 */
  }
  #product-list-header > div {
    width: 50%;
  }
  #product-list-header #product-list-sort {
    padding-right: 0.5rem;
  }
  #product-list-header #product-list-filter {
    padding-left: 0.5rem;
  }
  #product-list-header #product-list-sort > span, #product-list-header #product-list-filter > span {
    font-size: 0.8rem;
  }
}

.product-list .product-list-item-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  width: 100%;
  /* IE Fix */
  position: relative;
}

.product-list .product-list-item-content:hover, .product-list .product-list-item-content:focus {
  border-color: #656565;
  text-decoration: none;
}

.product-list .product-list-item-content:hover .product-info-wrapper, .product-list .product-list-item-content:focus .product-info-wrapper {
  border-color: #656565;
}

.product-list .product-info-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 0 auto;
  -webkit-box-flex: 1;
          flex: 1 0 auto;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  overflow: hidden;
}

.product-list .product-image {
  text-align: center;
}

.product-list .product-base-price, .product-list .product-discount {
  color: #818a91;
}

.product-list .product-price {
  font-weight: bold;
  font-size: 1.25em;
}

@media (min-width: 768px) {
  .product-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -0.5rem;
    /*float: left;*/
    /* IE Fix */
    /*.product-name {
            -ms-flex: 1 0 auto;
            -webkit-flex: 1 0 auto;
            flex: 1 0 auto;
        }*/
  }
  .product-list .product-list-item-content {
    /*margin: ($box-standard-margin / 2) ($box-standard-margin / 2) $box-standard-margin;*/
    margin: 0.5rem;
    padding: 1rem;
    border: 1px solid #cccccc;
  }
  .product-list .product-info-wrapper {
    border-top: 1px solid #cccccc;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
  }
  .product-list .product-info {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  .product-list .product-availability {
    margin: 0.25rem 0;
  }
  .product-list .product-list-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /*flex: 1 1 auto;*/
    /* Fix, wenn nur wenige Items da sind */
    width: 25%;
    max-width: 25%;
  }
}

@media (min-width: 768px) and (max-width: 1199.9px) {
  .product-list .product-list-item {
    font-size: 0.85em;
    width: 33.3333%;
    max-width: 33.3333%;
  }
}

@media (max-width: 767.9px) {
  .product-list {
    margin: 0 -1rem;
    border-top: 1px solid #cccccc;
  }
  .product-list .product-list-item {
    width: 100%;
    border-bottom: 1px solid #cccccc;
    margin: 0;
  }
  .product-list .product-list-item:hover {
    border-top: 1px solid #cccccc;
    border-color: #656565;
    margin-top: -1px;
  }
  .product-list .product-list-item-content {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .product-list .product-list-item-content > div {
    padding: 1rem;
  }
  .product-list .product-info-wrapper {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 60%;
  }
  .product-list .product-image {
    width: 40%;
  }
  .product-list .product-availability {
    margin: 0.5rem 0;
  }
}

#product-list-pager {
  margin-top: 1rem;
}

@media (max-width: 767.9px) {
  #product-list-pager {
    background-color: #cccccc;
    margin: 1rem -1rem 0;
    padding: 1rem;
  }
}

@media (min-width: 992px) {
  #site-header nav.search-wrapper > ul {
    display: block;
  }
}

#site-header #standard-search-input-container {
  border: 1px solid #cccccc;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#site-header #standard-search-input-container:focus-within {
  border-color: #373a3c;
}

#site-header #standard-search-input-container .search-input {
  border: none;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.75rem;
  text-align: left;
  cursor: text;
  color: #373a3c;
}

#site-header #standard-search-input-container .search-input:focus {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

#site-header #standard-search-input-container button {
  padding: 0.75rem;
  background-color: #ff8c00;
}

#site-header #standard-search-input-container button:hover {
  background-color: #db7800;
}

#site-header #standard-search-input-container i {
  color: #ffffff;
  font-size: 1.25em;
}

#site-header #standard-search-result-container {
  display: none;
}

@media (min-width: 992px) {
  #site-header #standard-search-result-container {
    -webkit-box-shadow: 2px 4px 8px -2px #2c3744;
            box-shadow: 2px 4px 8px -2px #2c3744;
    border: 1px solid #ccc;
    border-top: none;
    background-color: #fff;
    position: absolute;
    margin-left: 1rem;
    margin-right: 2rem;
    right: 0;
    left: 0;
  }
  #site-header #standard-search-result-container > ul {
    padding: 0.25rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  #site-header #standard-search-result-container li {
    width: 100%;
  }
  #site-header #standard-search-result-container li.show-all {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid #cccccc;
  }
  #site-header #standard-search-result-container a {
    padding: 0.5rem;
    /* animated underline on hover */
  }
  #site-header #standard-search-result-container a:hover {
    color: #373a3c;
  }
  #site-header #standard-search-result-container a span {
    position: relative;
  }
  #site-header #standard-search-result-container a span:after {
    background-color: currentColor;
    bottom: 0;
    content: ' ';
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    -webkit-transition: width .15s;
    transition: width .15s;
    width: 0;
  }
  #site-header #standard-search-result-container li.selected a, #site-header #standard-search-result-container li.show-all:hover a {
    -webkit-transition: background-color 0.1s ease;
    transition: background-color 0.1s ease;
    background-color: #f0f0f0;
  }
  #site-header #standard-search-result-container li.selected a span:after, #site-header #standard-search-result-container li.show-all:hover a span:after {
    width: 2rem;
  }
}

@media (max-width: 991.9px) {
  #site-header #standard-search-result-container {
    display: none !important;
  }
}

#modal-search #modal-search-input-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 0.5rem;
}

#modal-search #modal-search-input-container > div.input-field {
  margin-top: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

#modal-search #modal-search-input-container #modal-search-input {
  font-size: 1.5em;
  margin-bottom: 0;
}

#modal-search #modal-search-input-container button {
  font-size: 1.5em;
  margin-left: 0.5rem;
}

#modal-search #modal-search-result-container li a {
  padding: 0.5rem 0.25rem;
  display: block;
  outline: none;
}

#modal-search #modal-search-result-container li a:hover {
  text-decoration: none;
}

#modal-search #modal-search-result-container li.selected a {
  background-color: #f0f0f0;
}

#modal-search #modal-search-result-container li.show-all {
  margin-top: 0.5rem;
  border-top: 1px solid #cccccc;
}

#modal-search #modal-search-result-container li.show-all a {
  margin-top: 0.5rem;
}

#shopping-cart {
  margin: 1rem 0;
  border: 1px solid #cccccc;
}

#shopping-cart > div > div {
  padding: 0.5rem;
}

#shopping-cart .total span {
  font-size: 1.25em;
}

#shopping-cart .merged {
  background-color: #fff8e1;
}

#shopping-cart .shopping-cart-item > div {
  vertical-align: top;
}

#shopping-cart .special-item > div {
  vertical-align: middle;
}

#shopping-cart .shopping-cart-item__quantity {
  /* hide arrows */
}

#shopping-cart .shopping-cart-item__quantity > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#shopping-cart .shopping-cart-item__quantity input, #shopping-cart .shopping-cart-item__quantity button {
  width: 50px;
  font-size: 0.85em;
}

#shopping-cart .shopping-cart-item__quantity input[type='number'] {
  -moz-appearance: textfield;
}

#shopping-cart .shopping-cart-item__quantity input::-webkit-outer-spin-button,
#shopping-cart .shopping-cart-item__quantity input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

#shopping-cart .shopping-cart-item__remove i {
  font-size: 1.25em;
  vertical-align: top;
}

#shopping-cart .shopping-cart-item__remove button {
  position: relative;
}

#shopping-cart .shopping-cart-item__remove .spinner-wrapper {
  position: absolute;
  left: 0;
  z-index: 10;
  background-color: #fff;
  width: 100%;
  height: 100%;
  top: -4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#shopping-cart .shopping-cart-item__remove .spinner {
  margin: 0;
}

#shopping-cart .product-base-price {
  color: #818a91;
}

@media (min-width: 992px) {
  #shopping-cart {
    display: table;
    border-top: none;
  }
  #shopping-cart > div {
    display: table-row;
  }
  #shopping-cart > div > div {
    display: table-cell;
    border-top: 1px solid #cccccc;
  }
}

@media (max-width: 991.9px) {
  #shopping-cart .shopping-cart-item {
    border-top: 1px solid #cccccc;
    position: relative;
    /*.shopping-cart-item__price-single {
            }*/
    /*.shopping-cart-item__price-total {
            }*/
  }
  #shopping-cart .shopping-cart-item > div > div {
    margin-left: 130px;
  }
  #shopping-cart .shopping-cart-item .shopping-cart-item__image {
    float: left;
  }
  #shopping-cart .shopping-cart-item .shopping-cart-item__image > div {
    margin-left: 0;
  }
  #shopping-cart .shopping-cart-item .shopping-cart-item__name > div {
    margin-right: 30px;
  }
  #shopping-cart .shopping-cart-item .shopping-cart-item__name p {
    margin-bottom: 0.25rem;
  }
  #shopping-cart .shopping-cart-item .shopping-cart-item__quantity > div {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  #shopping-cart .shopping-cart-item .shopping-cart-item__remove {
    position: absolute;
    right: 0;
    top: 0;
  }
  #shopping-cart .special-item {
    display: table;
    width: 100%;
  }
  #shopping-cart .special-item > div {
    display: table-cell;
    vertical-align: top;
  }
}

@media (max-width: 543.9px) {
  #shopping-cart {
    font-size: 0.85em;
  }
  #shopping-cart .shopping-cart-item > div > div {
    margin-left: 100px;
  }
  #shopping-cart .shopping-cart-item .shopping-cart-item__image img {
    max-width: 90px;
  }
}

.korn-share ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.korn-share li {
  margin-right: 0.5rem;
  margin-top: 0.5rem;
}

.korn-share li a {
  color: #fff;
  display: block;
}

.korn-share li .fa {
  width: 40px;
  line-height: 40px;
  text-align: center;
  vertical-align: middle;
}

.korn-share .mail a {
  background-color: #7c7c7c;
}

.korn-share .mail a:hover {
  background-color: #999999;
}

.korn-share .mail .fa-envelope {
  font-size: 20px;
}

.korn-share .facebook a {
  background-color: #3b5998;
}

.korn-share .facebook a:hover {
  background-color: #4273c8;
}

.korn-share .facebook .fa-facebook {
  font-size: 22px;
}

.korn-share .whatsapp a {
  background-color: #5cbe4a;
}

.korn-share .whatsapp a:hover {
  background-color: #34af23;
}

.korn-share .whatsapp .fa-whatsapp {
  font-size: 28px;
}

.korn-share .twitter a {
  background-color: #55acee;
}

.korn-share .twitter a:hover {
  background-color: #32bbf5;
}

.korn-share .twitter .fa-twitter {
  font-size: 28px;
}

.soundcloud-item {
  background-color: #f0f0f0;
  color: #ff4136;
  padding: 5px;
  margin-bottom: 1rem;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.soundcloud-item .artwork img {
  width: 47px;
}

.soundcloud-item .button {
  padding: 5px 0px 5px 20px;
  border: none;
  -webkit-appearance: none;
  position: relative;
  background-color: transparent;
  border: 1px solid transparent;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
}

.soundcloud-item .play-icon {
  width: 16px;
  height: 16px;
  position: relative;
  vertical-align: middle;
}

.soundcloud-item .title {
  margin: 0 1rem;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.soundcloud-item .logo {
  padding: 5px 15px 5px 5px;
}

/* Toggle Switch Checkbox */
input[type="checkbox"].switch {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 2rem;
  height: 1rem;
  background: #ddd;
  border-radius: 3em;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

input[type="checkbox"].switch:checked {
  background: #0ebeff;
}

input[type="checkbox"].switch:after {
  position: absolute;
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  -webkit-box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.3);
  left: 0;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

input[type="checkbox"].switch:checked:after {
  left: calc(100% - 1rem);
}

/* Medium Style */
input[type="checkbox"].switch.md {
  width: 2.5rem;
  height: 1.25rem;
}

input[type="checkbox"].switch.md:after {
  width: 1.25rem;
  height: 1.25rem;
}

input[type="checkbox"].switch.md:checked:after {
  left: calc(100% - 1.25rem);
}

/* Large Style */
input[type="checkbox"].switch.lg {
  width: 3rem;
  height: 1.5rem;
}

input[type="checkbox"].switch.lg:after {
  width: 1.5rem;
  height: 1.5rem;
}

input[type="checkbox"].switch.lg:checked:after {
  left: calc(100% - 1.5rem);
}

/* Alternative inner circle */
input[type="checkbox"].switch.alt:after {
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}

.d-table {
  display: table;
}

.d-table-row {
  display: table-row;
}

.d-table-cell {
  display: table-cell;
}

.d-table-xs-up {
  display: table;
}

.d-table-row-xs-up {
  display: table-row;
}

.d-table-cell-xs-up {
  display: table-cell;
}

@media (min-width: 544px) {
  .d-table-sm-up {
    display: table;
  }
  .d-table-row-sm-up {
    display: table-row;
  }
  .d-table-cell-sm-up {
    display: table-cell;
  }
}

@media (min-width: 768px) {
  .d-table-md-up {
    display: table;
  }
  .d-table-row-md-up {
    display: table-row;
  }
  .d-table-cell-md-up {
    display: table-cell;
  }
}

@media (min-width: 992px) {
  .d-table-lg-up {
    display: table;
  }
  .d-table-row-lg-up {
    display: table-row;
  }
  .d-table-cell-lg-up {
    display: table-cell;
  }
}

@media (min-width: 1200px) {
  .d-table-xl-up {
    display: table;
  }
  .d-table-row-xl-up {
    display: table-row;
  }
  .d-table-cell-xl-up {
    display: table-cell;
  }
}

@media (min-width: 1440px) {
  .d-table-xxl-up {
    display: table;
  }
  .d-table-row-xxl-up {
    display: table-row;
  }
  .d-table-cell-xxl-up {
    display: table-cell;
  }
}

@media (max-width: 991.9px) {
  #site-header {
    max-width: 100vw;
    border-bottom: 2px solid #db7800;
    background-color: #373a3c;
  }
}

#site-header .site-header__top {
  background-color: #f0f0f0;
  /*border-top: 1px solid $gray-medium-lighter;*/
  border-bottom: 1px solid #cccccc;
}

#site-header .site-header__top nav {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#site-header .site-header__top ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#site-header .site-header__top ul a {
  font-size: 0.8em;
  padding: 0.25rem 1rem;
  font-weight: 700;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#site-header .site-header__top ul a i {
  font-size: 1.25em;
  line-height: 1.25em;
}

#site-header .site-header__top .change-language-container {
  position: absolute;
  right: -1px;
  z-index: 999;
  background-color: #fff;
  border: 1px solid #cccccc;
  border-top: none;
  margin-top: 2px;
  width: 275px;
}

#site-header .site-header__bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  /* Webkit Bugfix */
  margin-right: 1rem;
  height: 65px;
}

#site-header .site-header__bottom nav.left {
  position: relative;
}

@media (min-width: 992px) {
  #site-header .site-header__bottom {
    position: relative;
    z-index: 100;
  }
  #site-header .site-header__bottom nav.left {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  #site-header .site-header__bottom nav.middle {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    margin-left: 1rem;
    margin-top: 60px;
    /* weird */
  }
  #site-header .site-header__bottom nav.right {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
}

@media (max-width: 991.9px) {
  #site-header .site-header__bottom {
    padding: 0;
    height: 50px;
    margin-right: 0;
  }
  #site-header .site-header__bottom nav.left, #site-header .site-header__bottom nav.right {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 40%;
            flex: 1 1 40%;
  }
  #site-header .site-header__bottom nav.middle {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  #site-header .site-header__bottom nav li {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding: 0 0.25rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

#site-header .site-header__bottom ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (max-width: 991.9px) {
  #site-header .site-header__bottom ul {
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
  }
}

#site-header .site-header__bottom ul a, #site-header .site-header__bottom ul button {
  outline: none;
  background-color: transparent;
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#site-header .site-header__bottom ul a:hover, #site-header .site-header__bottom ul a:focus, #site-header .site-header__bottom ul button:hover, #site-header .site-header__bottom ul button:focus {
  color: #ff8c00;
  text-decoration: none;
}

#site-header .site-header__bottom ul a span.label, #site-header .site-header__bottom ul button span.label {
  font-size: 0.9em;
  margin-left: 0.25rem;
  line-height: 1em;
}

#site-header .site-header__bottom ul a i.fa, #site-header .site-header__bottom ul button i.fa {
  line-height: 1em;
}

@media (max-width: 991.9px) {
  #site-header .site-header__bottom ul a, #site-header .site-header__bottom ul button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    line-height: 1;
    color: #f2f2f2;
  }
  #site-header .site-header__bottom ul a span.label, #site-header .site-header__bottom ul button span.label {
    font-size: 0.75em;
    margin-top: 0.25rem;
    margin-left: 0;
  }
}

@media (max-width: 767.9px) {
  #site-header .site-header__bottom ul a, #site-header .site-header__bottom ul button {
    padding: 8px 6px;
  }
}

@media (max-width: 543.9px) {
  #site-header .site-header__bottom ul a, #site-header .site-header__bottom ul button {
    /*i {
                        font-size: 1.5em;
                    }*/
  }
  #site-header .site-header__bottom ul a span.label, #site-header .site-header__bottom ul button span.label {
    font-size: 0.5em;
    /*display: none;*/
  }
}

@media (min-width: 992px) {
  #site-header .site-header__nav {
    position: relative;
    z-index: 50;
  }
}

#site-header a#logo {
  /*position: absolute;
        top: 25px;*/
  /*max-width: 115px;*/
  /*z-index: 1000;
        padding: 0;
        margin-left: 1rem;
        display: block;

@include media-breakpoint-up(lg) {
            border-bottom: 1px solid $gray-medium-light;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
        }

        @include media-breakpoint-down(md) {
            background-color: $gray-medium-light;
            border-bottom-left-radius: 2px;
            border-bottom-right-radius: 2px;
            max-width: 60px;
            left: 50%;
            margin: 0 0 0 -30px;*/
  /* 1/2 max-width */
  /*top: -8px;

            img {
                border: none;
            }
        }*/
}

@media (min-width: 992px) {
  #site-header a#logo {
    padding: 0;
  }
}

@media (max-width: 991.9px) {
  #site-header a#logo {
    max-width: 60px;
    margin: 0;
    padding: 0;
  }
}

#site-header #change-language-wrapper {
  position: relative;
}

#site-header .change-language-container {
  padding: 0.25rem;
}

#site-header .change-language-container ul {
  display: block;
}

#site-header .change-language-container ul li {
  width: 100%;
}

#site-header .change-language-container ul li p {
  margin: 0;
  padding: 0.5rem;
}

#site-header .change-language-container ul li a {
  padding: 0.75rem 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: normal;
  font-size: 1em;
  line-height: 1em;
}

#site-header .change-language-container ul li a:hover {
  text-decoration: none;
  background-color: #f0f0f0;
}

#site-header .change-language-container ul li .language-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-left: 0.5rem;
}

#site-header .change-language-container ul li .language {
  background-size: 20px 13px;
  background-repeat: no-repeat;
  background-color: transparent;
  width: 20px;
  height: 13px;
  display: inline-block;
  vertical-align: middle;
}

#site-header .change-language-container ul li i {
  font-size: 1em;
  line-height: 1em;
}

#site-header #btn-toggle-cart {
  position: relative;
}

#site-header #btn-toggle-cart span.label {
  margin-right: 0.5rem;
}

@media (max-width: 991.9px) {
  #site-header #btn-toggle-cart span.label {
    margin-right: 0;
  }
  #site-header #btn-toggle-cart .tag-pill {
    margin-left: 5px;
    vertical-align: middle;
    position: absolute;
    right: 5px;
    top: 0.75rem;
  }
}

@media (max-width: 767.9px) {
  #site-header #btn-toggle-cart {
    /*padding-right: 0.5rem;*/
  }
  #site-header #btn-toggle-cart .tag-pill {
    font-size: 60%;
    top: 0.25rem;
  }
}

@media (max-width: 991.9px) {
  #site-breadcrumb {
    padding-bottom: 0;
  }
}

/*******************/
/*** Menu (Page) ***/
/*******************/
#site-header {
  position: relative;
}

#site-navigation a, #site-navigation a:hover, #site-navigation a:focus, #site-navigation a:visited {
  text-decoration: none;
}

#site-navigation .nav {
  height: auto;
  width: 100%;
}

#site-navigation .nav__level {
  list-style: none;
  margin: 0;
  padding: 0;
}

#site-navigation .nav__item > .nav__level {
  display: none;
}

#site-navigation .nav__item--active > .nav__level {
  display: block;
}

#site-navigation .nav__item--active > .nav__level--3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#site-navigation .nav__item--active > .nav__title {
  color: #ff8c00;
}

#site-navigation .nav__title {
  -webkit-transition: color .15s ease-out;
  transition: color .15s ease-out;
}

@media (min-width: 992px) {
  #site-navigation {
    /*border-bottom: 2px solid $brand-primary-dark;*/
    /*border-top: 2px solid $brand-primary-dark;*/
    background-color: #656565;
  }
  #site-navigation .nav__level--1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    left: 0;
    position: relative;
    top: 100%;
    width: 100%;
    z-index: 999;
    padding-left: calc(115px + 1rem);
    /* logo width + 1rem margin-left of logo */
  }
  #site-navigation .nav__level--1 > .nav__item {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 25%;
            flex: 1 1 25%;
    /* 100% divided by amount top categories */
    text-align: center;
    /* Kategoriefarben stehen jetzt in _redesign.scss als $nav-category-colors,
                   weil sie dort Balken, Schriftfuellung und Megamenue-Streifen gleichzeitig steuern. */
  }
  #site-navigation .nav__level--1 > .nav__item > .nav__title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    max-width: calc(100vw / 4);
    /* entire viewport width amount top categories */
    padding: 0.75rem;
    color: #ffffff;
    border-bottom: 5px solid;
  }
  #site-navigation .nav__level--1 > .nav__item > .nav__title > span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  #site-navigation .nav__level--1 > .nav__item > div.nav__level {
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
    left: 0;
    position: absolute;
    top: calc(100% + 1px);
    width: 100%;
    z-index: 999;
  }
  #site-navigation .nav__level--1 > .nav__item > div.nav__level > .nav__item {
    -webkit-box-shadow: 2px 4px 8px -2px #2c3744;
            box-shadow: 2px 4px 8px -2px #2c3744;
  }
  #site-navigation .nav__level--1 > .nav__item--active {
    background-color: #5d5d5d;
  }
  #site-navigation .nav__level--2 {
    background-color: #f1f2f4;
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
  }
  #site-navigation .nav__level--2 > .nav__item {
    margin: 1rem 0;
    max-width: 30%;
    padding: 0 1rem;
    text-align: left;
    width: 30%;
  }
  #site-navigation .nav__level--2 > .nav__item > .nav__title {
    background: #fff;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0.5rem;
    text-align: center;
    text-decoration: none;
    -webkit-transition: border-color .15s ease,background-color .15s ease,color .15s ease;
    transition: border-color .15s ease,background-color .15s ease,color .15s ease;
    white-space: nowrap;
    outline: 1px solid #e3e5e9;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #site-navigation .nav__level--2 > .nav__item > .nav__title > img {
    width: 50px;
    margin: -0.25rem 0.5rem -0.25rem 0.25rem;
  }
  #site-navigation .nav__level--2 > .nav__item > .nav__title > span {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    padding-left: 0.5rem;
  }
  #site-navigation .nav__level--2 > .nav__item > .nav__title:hover {
    color: #db7800;
  }
  #site-navigation .nav__level--2 > .nav__item > .nav__title:focus {
    outline-offset: 0;
  }
  #site-navigation .nav__level--2 > .nav__item--active > .nav__title {
    color: #db7800;
    outline: 2px solid #db7800;
    position: relative;
    text-transform: none;
  }
  #site-navigation .nav__level--2 > .nav__item--active > .nav__title:hover {
    cursor: default;
  }
  #site-navigation .nav__level--2 > .nav__item--active.nav__item--with-children > .nav__title:before {
    background-color: #f1f2f4;
    border-color: #db7800;
    border-style: solid;
    border-width: 1px 1px 0 0;
    content: '';
    height: 1rem;
    position: absolute;
    right: -17px;
    top: 50%;
    -webkit-transform: translate(0.5rem, -50%) rotate(45deg);
            transform: translate(0.5rem, -50%) rotate(45deg);
    width: 1rem;
    z-index: 1;
  }
  #site-navigation .nav__level--2 > .nav__item.last {
    font-size: 1.25em;
  }
  #site-navigation .nav__level--2 > .nav__item.last > .nav__title {
    text-decoration: underline;
  }
  #site-navigation .nav__level--3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    height: 100%;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    left: 0;
    margin-left: 30%;
    padding: 0.75rem;
    position: absolute;
    top: 0;
    width: 70%;
  }
  #site-navigation .nav__level--3:before {
    background-color: #db7800;
    bottom: 0;
    content: '';
    display: block;
    left: 0;
    margin: 0.5rem 0;
    position: absolute;
    top: 0;
    width: 1px;
  }
  #site-navigation .nav__level--3 > .nav__item {
    -webkit-box-flex: 0;
        -ms-flex: 0;
            flex: 0;
    /* prevent weird behavior if last column has less items than the others */
    padding: 0 1.5rem;
  }
  #site-navigation .nav__level--3 > .nav__item > .nav__title {
    display: inline-block;
    padding: .5rem .25rem;
    /* animated underline on hover */
  }
  #site-navigation .nav__level--3 > .nav__item > .nav__title:hover {
    color: #db7800;
  }
  #site-navigation .nav__level--3 > .nav__item > .nav__title:hover span:after {
    width: 2rem;
  }
  #site-navigation .nav__level--3 > .nav__item > .nav__title img {
    width: calc(50px + 0.5rem);
    /* counteract padding so img is still 50px in the end */
    padding: 0.25rem;
    margin: -0.25rem 0.5rem -0.25rem 0rem;
    background-color: #ffffff;
  }
  #site-navigation .nav__level--3 > .nav__item > .nav__title span {
    position: relative;
  }
  #site-navigation .nav__level--3 > .nav__item > .nav__title span:after {
    background-color: currentColor;
    bottom: 0;
    content: ' ';
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    -webkit-transition: width .15s;
    transition: width .15s;
    width: 0;
  }
  #site-navigation .nav__level--3 > .nav__item > .nav__title--headline {
    text-transform: uppercase;
    font-weight: bold;
  }
  #site-navigation .nav__title--reset {
    outline: none !important;
    background-color: inherit !important;
    padding: 0.5rem 0.75rem !important;
    margin: 1rem 0 !important;
  }
}

@media (max-width: 991.9px) {
  #site-navigation .nav__item .nav__title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0.75rem;
    border-bottom: 1px solid #ccc;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #site-navigation .nav__item .nav__title img {
    width: calc(50px + 0.5rem);
    /* counteract padding so img is still 50px in the end */
    padding: 0.25rem;
    margin: -0.25rem 1rem -0.25rem 0rem;
    background-color: #ffffff;
  }
  #site-navigation .nav__item .nav__title span {
    color: #373a3c;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0%;
            flex: 1 1 0%;
  }
  #site-navigation .nav__item .nav__title i {
    /*align-self: flex-start;*/
    padding-left: 5px;
  }
  #site-navigation .nav__item .nav__title i.fa-chevron-left {
    position: absolute;
    left: 0.25rem;
    opacity: 0;
  }
  #site-navigation .nav__item .nav__title:hover {
    /*background: $gray-lighter;*/
    /*color: $brand-primary-dark;*/
  }
  #site-navigation .nav__item--active .nav__title {
    padding-left: 2rem;
  }
  #site-navigation .nav__item--active > .nav__title {
    -webkit-transition: padding-left .1s ease-in-out;
    transition: padding-left .1s ease-in-out;
  }
  #site-navigation .nav__item--active > .nav__title > i.fa-chevron-left {
    opacity: 1;
    -webkit-transition: opacity .25s ease-in;
    transition: opacity .25s ease-in;
  }
  #site-navigation .nav__item--active > .nav__title > i.fa-chevron-right {
    display: none;
  }
  #site-navigation .nav__level--active > .nav__item:not(.nav__item--active) {
    display: none;
  }
  #site-navigation .nav__level--2 > .nav__item--active > .nav__title img {
    display: none;
  }
  #site-navigation .nav__level--3 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    /* put first element at the end, because it is always a link to the overview page */
  }
  #site-navigation .nav__level--3 > .nav__item:first-child {
    -webkit-box-ordinal-group: 100;
        -ms-flex-order: 99;
            order: 99;
  }
  #site-navigation .nav__level--3 .nav__title--headline {
    font-weight: bold;
    border-bottom: none !important;
  }
  #site-navigation h6 {
    padding: 1.25rem .75rem;
    background-color: #777777;
    color: #ffffff;
    position: relative;
  }
  #site-navigation .btn-toggle-menu {
    position: absolute;
    right: .25rem;
    color: #ffffff;
    padding: .5rem;
    margin-top: -0.75rem;
    font-size: 1.25em;
  }
  #site-navigation .change-language-container {
    border-bottom: 1px solid #ccc;
    background-color: #f0f0f0;
  }
}

#content-left-category.menu-standard a {
  padding: 0.125rem 0.25rem;
}

#content-left-category.menu-standard li.current:not(.level-1):not(.level-2) > a {
  border-left: 2px solid #db7800;
  margin-left: calc(-0.5rem + 2px);
  padding-left: 0.5rem;
}

#site-content {
  /* stretch content to maximum [Sticky Footer] */
  -ms-flex: 1 0 auto;
  -webkit-box-flex: 1;
          flex: 1 0 auto;
  /*margin-top: 0;*/
  /*padding-bottom: $box-standard-padding;*/
}

@media (min-width: 992px) {
  .with-aside aside {
    float: left;
  }
  .with-aside #content-center {
    /*margin-left: calc(250px + 1rem);*/
    /*margin-left: 250px;*/
    margin-left: 247px;
    /* to preserve width of category images */
    padding-left: 1rem;
  }
}

#brand-detail .cross-selling {
  margin-bottom: 2rem;
}

#bt-summary {
  /*margin-bottom: $box-standard-margin;*/
}

#bt-summary .ta-right {
  text-align: right;
}

#bt-container .hddn {
  display: none;
}

#bt-container .alert p {
  margin: 0;
}

#product-list .product-list-item-content > a {
  text-decoration: none;
  -ms-flex: 1 1 auto;
  -webkit-box-flex: 1;
          flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}

@media (max-width: 767.9px) {
  #product-list .product-list-item-content > a {
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    padding: 0.5rem 0;
  }
  #product-list .product-list-item-content > a .product-image {
    margin: 0.5rem;
  }
}

#bt-product-details {
  /* Duplicate _product-detail.scss */
}

#bt-product-details #product-price {
  font-size: 1.75rem;
  font-weight: bold;
}

#bt-product-details #product-availability .available-text {
  font-size: 1.15rem;
  font-weight: bold;
}

.dd-container label {
  margin: 0;
}

#category-teaser h2 {
  color: #f2f2f2;
  text-shadow: 0px 0px 2px #373a3c;
  text-align: left;
}

#category-teaser h2:before {
  content: '// ';
  color: #ff8c00;
  font-weight: bold;
}

#category-teaser .carousel-caption {
  padding-bottom: 0;
  bottom: 1rem;
  left: 1rem;
}

@media (min-width: 992px) {
  #category-teaser h2 {
    font-size: 2rem;
  }
}

@media (max-width: 543.9px) {
  #category-teaser .row > div {
    padding: 0 !important;
  }
  #category-teaser img {
    padding: 0 0 1rem !important;
  }
}

#category-description {
  /*h1 {
        border-bottom: 1px solid $brand-primary-dark;
    }*/
}

#category-description a {
  text-decoration: underline;
  font-weight: bold;
}

#category-children .product-list .product-price {
  font-weight: normal;
  font-size: 0.9em;
  color: #777777;
}

@media (min-width: 768px) {
  #category-children .product-list {
    /* counter the amount of right-borders in the row minus one */
    margin: 0 -3px 0 0;
  }
  #category-children .product-list .product-list-item {
    margin: -1px 0 0 -1px;
  }
  #category-children .product-list .product-list-item-content {
    margin: 0;
    position: relative;
    z-index: 1;
  }
  #category-children .product-list .product-list-item:hover .product-list-item-content {
    z-index: 2;
  }
  #category-children .product-list .product-info-wrapper, #category-children .product-list .product-list-item-content:hover .product-info-wrapper {
    border-top-color: #db7800;
    border-width: 2px;
  }
}

@media (min-width: 768px) and (max-width: 1199.9px) {
  #category-children .product-list {
    /* counter the amount of right-borders in the row minus one */
    margin: 0 -2px 0 0;
  }
}

/*#category-list-index {
}*/
/*#category-list-header {
    .hidden-md-down, #category-list-sort {
        flex: 1 1 auto;
    }
}*/
#category-products {
  margin-bottom: 1rem;
}

#category-list-description a {
  text-decoration: underline;
}

.tampermonkey .product-list-inventory {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  row-gap: 8px;
  -webkit-column-gap: 8px;
     -moz-column-gap: 8px;
          column-gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 2px;
}

.tampermonkey .product-list-inventory span {
  display: block;
  padding: 5px;
}

.tampermonkey .product-list-inventory span.tag-default {
  background-color: #eeeeee;
  color: #333333;
  font-weight: normal;
}

/* General */
#site-wrap.checkout {
  /*h1 {
        margin-bottom: 1rem;
    }*/
  /*#content-center {
        padding: $box-standard-padding 0 0;
    }*/
  /*@include media-breakpoint-down(sm) {

        #logo {
            margin-left: $box-standard-margin;
        }
    }*/
}

#site-wrap.checkout h2 {
  font-weight: bold;
  border-bottom: none;
}

#site-wrap.checkout .spinner-wrapper.hidden {
  display: none;
}

#site-wrap.checkout .validation-summary-errors ul {
  margin: 0;
}

#site-wrap.checkout .validation-summary-errors.top li:last-of-type {
  margin-bottom: 1rem;
}

#site-wrap.checkout .validation-summary-errors.bottom li:first-of-type {
  margin-top: 1rem;
}

#site-wrap.checkout .rb-wrapper {
  border: 1px solid #cccccc;
  padding: 1rem;
  margin-bottom: 1rem;
}

@media (min-width: 992px) {
  #site-wrap.checkout #site-footer {
    margin-top: 1rem;
  }
}

/* Step 1 : Shopping Cart Index */
#shopping-cart-index {
  /*h1 {
        margin: 0;
    }*/
  /*.form-checkout-paypal {
        margin-top: $box-standard-margin;
    }*/
  /*@include media-breakpoint-up(md) {
        .form-checkout-index, .form-checkout-index > button {
            height: 100%;
        }
    }*/
  /*@include media-breakpoint-down(sm) {
        h1 {
            font-size: 2rem;
            margin-bottom: $box-standard-margin;
        }
    }*/
  /*#btn-paypal-checkout {
        background-color: #ffc439;
        border-color: #ffad00;
    }*/
  /* fuck off, Paypal 1/2 */
  /* fuck off, Paypal 2/2 */
}

#shopping-cart-index .shopping-cart-cta {
  border: 1px solid #cccccc;
}

#shopping-cart-index .shopping-cart-cta > div {
  border-top: 1px solid #cccccc;
}

#shopping-cart-index #paypal-express-container {
  height: 48px;
  max-height: 48px;
}

#shopping-cart-index #PaypalButton > div::before {
  content: "\00a0";
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 999;
  border: 2px solid #fff;
  margin: 0px;
  overflow: hidden;
  pointer-events: none;
}

#shopping-cart-index #PaypalButton > div {
  border-width: 1px;
  border-style: solid;
  /* KORN CHANGED */
  /* KORN CHANGED */
  color: #373a3c;
  background-color: #fff;
  border-color: #ccc;
  overflow: hidden;
}

#shopping-cart-index #PaypalButton > div:hover {
  color: #373a3c;
  background-color: #f2f2f2;
  border-color: #bdbdbd;
}

#shopping-cart-index #PaypalButton > div:focus, #shopping-cart-index #PaypalButton > div.focus {
  color: #373a3c;
  background-color: #f2f2f2;
  border-color: #bdbdbd;
}

#shopping-cart-index #PaypalButton > div:active, #shopping-cart-index #PaypalButton > div.active,
.open > #shopping-cart-index #PaypalButton > div.dropdown-toggle {
  color: #373a3c;
  background-color: #f2f2f2;
  border-color: #bdbdbd;
  background-image: none;
}

#shopping-cart-index #PaypalButton > div:active:hover, #shopping-cart-index #PaypalButton > div:active:focus, #shopping-cart-index #PaypalButton > div:active.focus, #shopping-cart-index #PaypalButton > div.active:hover, #shopping-cart-index #PaypalButton > div.active:focus, #shopping-cart-index #PaypalButton > div.active.focus,
.open > #shopping-cart-index #PaypalButton > div.dropdown-toggle:hover,
.open > #shopping-cart-index #PaypalButton > div.dropdown-toggle:focus,
.open > #shopping-cart-index #PaypalButton > div.dropdown-toggle.focus {
  color: #373a3c;
  background-color: #ebebeb;
  /* KORN CHANGED */
  border-color: #adadad;
  /* KORN CHANGED */
}

#shopping-cart-index #PaypalButton > div.disabled:focus, #shopping-cart-index #PaypalButton > div.disabled.focus, #shopping-cart-index #PaypalButton > div:disabled:focus, #shopping-cart-index #PaypalButton > div:disabled.focus {
  background-color: #fff;
  border-color: #ccc;
}

#shopping-cart-index #PaypalButton > div.disabled:hover, #shopping-cart-index #PaypalButton > div:disabled:hover {
  background-color: #fff;
  border-color: #ccc;
}

#shopping-cart-index #btn-amazon-checkout {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Step 2 : Checkout Index */
#checkout-index {
  /*#checkout-as-guest {
        margin-bottom: $box-standard-margin;
    }*/
}

@media (min-width: 768px) {
  #checkout-index #checkout-as-customer {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  #checkout-index #checkout-as-guest {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    /*margin-bottom: 0;*/
  }
}

/* Step 3: Shipping */
#checkout-shipping {
  /*.kc-input-container {
        input {
            margin-bottom: 0.5rem;
        }
    }*/
  /*h1 {
        margin-bottom: $box-standard-margin;
    }*/
}

#checkout-shipping #shipping-table-container {
  /*.hidden {
            display: none !important;
        }*/
}

#checkout-shipping #shipping-table-container .spinner-wrapper {
  display: block;
  padding: 1rem;
  border: 1px dashed #cccccc;
}

#checkout-shipping #shipping-table .rb-wrapper ~ #store-pickup-wrapper {
  display: none;
}

#checkout-shipping #shipping-table .rb-wrapper.active ~ #store-pickup-wrapper {
  display: block;
}

#checkout-shipping #shipping-table .store-pickup .rb-wrapper.active {
  border-bottom: 0;
  margin-bottom: 0 !important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#checkout-shipping #shipping-table .store-pickup .rb-wrapper.active ~ #store-pickup-wrapper {
  border: 1px solid #ff8c00;
  border-top: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding-top: 2rem;
}

#checkout-shipping .input-select {
  padding-left: 0.25rem;
}

#checkout-shipping .input-select.address-picker {
  background-color: #f0f0f0 !important;
  padding-left: 0.5rem;
}

#checkout-shipping .input-select.address-picker option {
  background-color: #ffffff;
}

/* Step 4: Payment */
#checkout-payment {
  /*#payment-types {
        .row:last-of-type {
            .rb-wrapper {
                margin-bottom: 0;
            }
        }
    }*/
  /*h1 {
        margin-bottom: $box-standard-margin;
    }*/
}

#checkout-payment .rb-wrapper {
  border: 1px solid #cccccc;
  padding: 1rem;
  margin-bottom: 1rem;
  cursor: pointer;
}

#checkout-payment .rb-wrapper label {
  margin-bottom: 0;
}

#checkout-payment .rb-wrapper label.pointer {
  cursor: pointer;
}

#checkout-payment .rb-wrapper .rb-description {
  cursor: default;
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  #checkout-payment .rb-wrapper label {
    padding: 0 1rem 0 1.75rem;
  }
  #checkout-payment .rb-wrapper .rb-description {
    margin-top: 0;
  }
}

@media (max-width: 767.9px) {
  #checkout-payment .rb-wrapper {
    padding: 0.25rem 1rem;
    margin-bottom: 1rem;
  }
}

#checkout-payment .rb-wrapper.active {
  border-color: #777777;
}

#checkout-payment .rb-wrapper.active .rb-description {
  display: block !important;
}

#checkout-payment .rb-wrapper.disabled:after {
  /*background-color: rgba(255, 255, 255, 0.5);*/
  bottom: 0;
  content: "";
  cursor: not-allowed;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

#checkout-payment .rb-wrapper.disabled label {
  opacity: 0.5;
}

/* Step 5: Verify */
#checkout-verify {
  /*h1 {
        margin-bottom: $box-standard-margin;
    }*/
  /*.headline {
        border-bottom: 1px solid $gray-medium-lighter;
        font-weight: bold;
    }*/
}

#checkout-verify table {
  width: 100%;
}

#checkout-verify textarea {
  height: 1rem;
  min-height: 1rem;
  -webkit-transition: none;
  transition: none;
}

#checkout-verify a.popup {
  text-decoration: underline;
}

#checkout-verify .checkout-info-header {
  margin-bottom: 0.5rem;
}

#checkout-verify .checkout-info-header td.first {
  width: 100%;
}

#checkout-verify .checkout-info-header td.second {
  vertical-align: top;
}

@media (max-width: 991.9px) {
  #checkout-verify .checkout-info-header {
    margin-top: 1rem;
  }
}

/* Success */
#checkout-success h4 {
  font-size: 1.5rem;
  margin: 0;
}

#checkout-success .row:first-child {
  margin-bottom: 0.25rem;
}

#checkout-success .card-deck {
  margin: -0.5rem;
}

#checkout-success .card-deck .card {
  margin: 0.5rem;
}

#checkout-success .card-block:first-child {
  background-color: #373a3c;
  color: #ffffff;
}

#checkout-success .card.top .card-block {
  z-index: 2;
}

#checkout-success .card.top .card-block:first-child {
  background-color: #ff8c00;
}

#checkout-success .card.top picture img {
  -webkit-filter: grayscale(75%);
          filter: grayscale(75%);
  z-index: 1;
}

@media (min-width: 1200px) {
  #checkout-success .card.top .card-block:last-child {
    max-width: 60%;
  }
}

@media (min-width: 992px) {
  #checkout-success img.responsive {
    width: 100%;
  }
  #checkout-success .card {
    overflow: hidden;
  }
  #checkout-success .card .card-block {
    /*position: absolute;
                top: $box-standard-margin;*/
  }
  #checkout-success .card .card-block:last-child {
    /*top: ($box-standard-margin * 7);*/
    background-color: rgba(255, 255, 255, 0.9);
    padding: 1rem;
    width: 100%;
  }
}

@media (max-width: 991.9px) {
  #checkout-success h4 {
    font-size: 1.25rem;
  }
  #checkout-success .card .card-block {
    padding: 1rem;
  }
}

#customer-center #order-detail h2 {
  margin-top: 1rem;
}

@media (max-width: 767.9px) {
  #customer-center .product-list .product-image {
    width: 20%;
  }
}

#customer-center .product-list .product-image img {
  max-width: 75%;
  width: 100%;
  /* IE Edge vs Chrome Fix */
}

#customer-center .product-list .product-availability {
  font-weight: bold;
}

#error-page h1 {
  font-size: 3rem;
  font-weight: bold;
}

#error-page a {
  text-decoration: underline;
}

/*#landing-page .fluid-container {
    margin-bottom: 1rem;
}*/
#landing-page .fluid-container img {
  display: block;
  width: 100%;
  height: auto;
}

#landing-page .fluid-container #carousel {
  margin-bottom: 0;
}

/* Slider: Ueberblendung statt Schieben. Die Slides liegen uebereinander, Owl
   laeuft mit Speed 0 und setzt nur .active (siehe frontpage.js). Das neue Bild
   blendet ueber dem alten ein, das alte verschwindet erst danach - so scheint
   in der Mitte der Blende nie der Hintergrund durch.
   Die Uebergaenge tragen !important gegen den Reset fuer "Bewegung reduzieren":
   eine Ueberblendung bewegt nichts, ohne sie springt das Bild hart um. */
#landing-page #carousel .owl-stage {
  display: grid;
  -webkit-transform: none !important;
          transform: none !important;
  width: 100% !important;
  -webkit-transition: none !important;
          transition: none !important;
}

#landing-page #carousel .owl-item {
  grid-area: 1 / 1;
  width: 100% !important;
  margin-right: 0 !important;
  float: none;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-transition: opacity 0s linear 1s !important;
          transition: opacity 0s linear 1s !important;
}

#landing-page #carousel .owl-item.active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
  -webkit-transition: opacity 1s ease-in-out !important;
          transition: opacity 1s ease-in-out !important;
}

#landing-page #spots .spot-2 {
  width: 50%;
  float: left;
}

#landing-page #brand a {
  display: block;
}

#landing-page #brand img {
  width: 100%;
  max-width: 135px;
  margin: 0 auto;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
}

#landing-page #brand .owl-item:after {
  content: "";
  height: 135px;
  width: 1px;
  position: absolute;
  top: 0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 );
  display: block;
}

#landing-page #brand .owl-item:first-child:after {
  background: none;
}

#landing-page #about img {
  margin: 2px 15px 5px 0;
  float: left;
}

#landing-page #about h1 span {
  color: #ff8c00;
  /* wieder das helle Marken-Orange (war zwischenzeitlich $text-orange-dark) */
}

#landing-page #about h2 {
  font-size: 1.5rem;
  border-bottom: 1px solid #cccccc;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  margin-top: 1.5rem;
}

#landing-page #about p {
  margin: 15px 0;
}

@media (min-width: 768px) {
  #landing-page .fluid-container {
    display: inline-block;
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  #landing-page .fluid-container:before {
    content: '';
    display: block;
  }
  #landing-page .fluid-container.outer {
    max-height: 405px;
  }
  #landing-page .fluid-container.outer:before {
    margin-top: 30%;
  }
  #landing-page .fluid-container.inner {
    max-height: 405px;
  }
  #landing-page .fluid-container.inner:before {
    margin-top: 72%;
  }
  #landing-page .wrapper-left {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60%;
  }
  #landing-page .wrapper-right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 40%;
  }
  #landing-page .element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  #landing-page #carousel {
    height: 100%;
  }
  #landing-page #carousel .owl-controls {
    position: relative;
    top: -40px;
  }
  #landing-page #spots > div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  #landing-page #spots .spot-1 {
    height: 66.66%;
    max-height: 270px;
    padding: 0 0 3px 6px;
  }
  #landing-page #spots .spot-2 {
    max-height: 135px;
    height: 33.33%;
    padding: 3px 0 0 6px;
  }
  /*#seals .seal {
        width: 33.33%;
    }

    #seals .seal:nth-child(3n) {
        border-right: none;
        margin-right: 0;
    }*/
}

@media (max-width: 767.9px) {
  /*#landing-page {
        margin-top: -40px;
    }*/
  #landing-page #spots {
    margin-top: 1.6%;
  }
  #landing-page #spots .spot-1 {
    margin-bottom: 1.6%;
    float: left;
    width: 67%;
  }
  #landing-page #spots .spot-2 {
    float: right;
    margin-bottom: 1.6%;
    width: 31.8%;
  }
  #landing-page .wrapper-right {
    margin-top: 1.6%;
  }
  #landing-page #carousel .owl-controls {
    bottom: 0;
    position: absolute;
    width: 100%;
  }
  /*#seals .seal {
        width: 50%;
    }

    #seals .seal:nth-child(2n) {
        border-right: none;
        margin-right: 0;
    }*/
}

@media (max-width: 543.9px) {
  #landing-page #spots .spot-1 {
    margin-bottom: 1.6%;
    float: none;
    width: 100%;
  }
  #landing-page #spots .spot-2 {
    float: left;
    width: 49.2%;
  }
  #landing-page #spots .spot-2:nth-child(2n+1) {
    float: right;
  }
  /*#seals .seal {
        width: 100%;
        border: none;
    }*/
}

.info-center-header i {
  display: none;
}

.f-left {
  float: left;
}

.f-right {
  float: right;
}

.text-content h4 {
  font-weight: bold;
}

#info-center {
  /* AboutUs */
  /* General Stuff */
}

#info-center h1 {
  margin-bottom: 1rem;
}

#info-center h2 {
  font-size: 1.5rem;
  border-bottom: 1px solid #cccccc;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  margin-top: 1.5rem;
}

#info-center a:not(.btn) {
  text-decoration: underline;
}

#info-center .store p > img {
  float: left;
  margin: 0 1rem 0 0;
}

#info-center img.f-left {
  margin: 0 1rem 0 0;
}

#info-center img.f-right {
  margin: 0 0 0 1rem;
}

@media (min-width: 768px) {
  #info-center img.f-left, #info-center img.f-right, #info-center .store p > img {
    max-width: 60%;
  }
}

@media (max-width: 767.9px) {
  #info-center img.f-left, #info-center img.f-right, #info-center .store p > img {
    float: none !important;
    display: block;
    height: 100%;
    width: 100%;
    margin: 1rem 0 1rem;
    max-height: none;
    max-width: none;
  }
}

#info-center ul.history {
  padding-left: 1rem;
  margin-left: 0;
}

#info-center .clear {
  clear: both;
}

#info-center .input-file.field-validation {
  font-size: 1em;
}

#info-center .input-file.field-validation.hidden {
  display: none;
  /* override .kc-input-container standard styles for .hidden */
  opacity: 1;
  height: auto;
}

ol.timeline {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ol.timeline li {
  position: relative;
  margin: 0;
  padding-bottom: 1rem;
  padding-left: 2rem;
}

ol.timeline li::before {
  content: '';
  background-color: #cccccc;
  position: absolute;
  bottom: 0;
  top: 0;
  width: 3px;
  left: 6px;
}

ol.timeline li::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 32 32' focusable='false'%3E%3Ccircle stroke='none' fill='%23888888' cx='12' cy='12' r='12'%3E%3C/circle%3E%3C/svg%3E");
  position: absolute;
  left: 3px;
  top: 8px;
  height: 12px;
  width: 12px;
}

#info-center .timeline p {
  margin-top: 0.5rem;
}

/* *************** */
/* *** von MHK *** */
/* *************** */
#info-center .google-maps {
  max-height: 450px;
  max-width: 600px;
  overflow: hidden;
}

#info-center .google-maps-wrapper {
  position: relative;
  padding-bottom: 75%;
  height: 0;
  overflow: hidden;
}

#info-center .google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/*#info-center #input-file-remove {
    cursor: pointer;
    font-size: 1.75em;
    line-height: 1em;
    padding: 12px;
    position: absolute;
    right: 0;
    top: 0;
}

#info-center .form, #info-center .submit-result {
    margin: 10px 0 25px;
}

    #info-center .form .input-wrapper {
        position: relative;
    }

        #info-center .form .input-wrapper i {
            font-size: 1.5em;
            left: 10px;
            line-height: 1.5em;
            position: absolute;
            top: 5px;
        }

    #info-center .form .input {
        border: 1px solid #ccc;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #333;
        font-size: 1em;
        font-weight: 500;
        line-height: 1.5em;
        padding: 12px 12px 12px 50px;
        width: 100%;
    }

        #info-center .form .input:focus {
            -moz-transition: box-shadow linear 250ms;
            -o-transition: box-shadow linear 250ms;
            -webkit-transition: box-shadow linear 250ms;
            transition: box-shadow linear 250ms;
            border-color: #ff8c00;
            -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 140, 0, 0.5);
            -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 140, 0, 0.5);
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 140, 0, 0.5);
            outline: 0 none;
        }

    #info-center .form select.input {
        padding: 10px 10px 10px 50px;
    }*/
/*@media screen and (-webkit-min-device-pixel-ratio:0) {
    #form-newsletter i.fa-question {
        display: none;
    }
}*/
/*#info-center .form label.validate {
    position: relative;
    top: 5px;
    color: red;
}

#info-center .form textarea {
    height: 150px;
    min-height: 100px;
    resize: vertical;
}

#info-center .form input[type="submit"] {
    margin: 10px 0 15px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

#info-center .submit-result a {
    text-decoration: underline;
}*/
#shipping-overview {
  width: 100%;
}

#shipping-overview .form-control {
  height: 40px;
}

#shipping-overview th {
  background-color: #f0f0f0;
}

#shipping-overview td {
  border-top: none;
}

#shipping-overview th, #shipping-overview td {
  border: 1px solid #ccc;
  padding: 15px;
  text-align: left;
  vertical-align: middle;
  border-left: none;
}

#shipping-overview th:nth-child(2n+1), #shipping-overview td:nth-child(2n+1) {
  border-left: 1px solid #ccc;
  border-right: none;
  white-space: nowrap;
}

#shipping-overview th:nth-child(2n+2), #shipping-overview td:nth-child(2n+2) {
  border-right: none;
  border-left: none;
}

#shipping-overview th:nth-child(2n+3), #shipping-overview td:nth-child(2n+3) {
  border-right: 1px solid #ccc;
  border-left: none;
  width: 100%;
  white-space: normal;
}

#shipping-overview tr:last-child td {
  border-right: 1px solid #ccc;
  white-space: normal;
}

/*#info-center .store p > img {
    float: left;
    height: 100%;
    margin: 0 10px 0 0;
    max-height: 300px;
    max-width: 521px;
    width: 100%;
}*/
@media only screen and (max-width: 767px) {
  /*#info-center .form input[type="submit"] {
        width: 100%;
        float: none;
    }

#info-center .info-center-header {
        padding: 8px 6px;
    }*/
  #shipping-overview th, #shipping-overview td {
    padding: 15px 5px;
  }
  #shipping-overview th:nth-child(2n+2), #shipping-overview td:nth-child(2n+2) {
    display: none;
  }
  /*#info-center .store p > img {
        float: none;
        margin: 10px 0 15px;
        max-height: none;
        max-width: none;
    }*/
}

/* Sitemap */
#info-center #sitemap .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

#info-center #sitemap li {
  padding: 0.25rem 0;
}

@media only screen and (max-width: 767px) {
  #info-center #sitemap .grid {
    display: block;
  }
}

/* Responsive Video */
@media only screen and (min-width: 768px) {
  #info-center .video-wrapper, #info-center .image-wrapper {
    margin: 0 0 15px 15px;
    float: right;
    max-width: 50%;
  }
  #info-center .video-wrapper iframe {
    max-height: 100%;
    max-width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  #info-center .video-wrapper {
    margin-bottom: 15px;
    padding-bottom: 56.25%;
    position: relative;
  }
  #info-center .video-wrapper iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
  #info-center .image-wrapper {
    margin-bottom: 15px;
  }
  #info-center .image-wrapper img {
    max-width: none;
    width: 100%;
  }
}

/* Virtual Tour */
.virtual-tour {
  margin: 25px 0;
}

.virtual-tour iframe {
  max-width: 100%;
}

.virtual-tour .message-outer {
  /*position: relative;*/
  height: 100%;
  width: 100%;
  display: table;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.45);
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  text-shadow: 0 0 10px #0f1011;
}

.virtual-tour .model-title {
  /* bottom: 75%; */
  /* padding: 0 25px; */
  display: block;
  font-size: 40px;
  /* letter-spacing: .75px; */
  margin: 0;
  padding: 0 15px;
  /* hyphens: auto; */
  /* line-height: 45px; */
  top: 10%;
  bottom: auto;
  width: 100%;
  font-weight: 100;
  position: absolute;
  text-align: center;
}

.virtual-tour .message-inner {
  height: 100%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.virtual-tour .message-content {
  width: 100%;
  font-weight: 100;
  display: inline-block;
}

.virtual-tour .button-play {
  /* width: 86px; */
  /* height: 86px; */
  /* display: block; */
  margin: 60px auto 0;
  padding: 20px 0;
  /* border-radius: 100%; */
  /* border: 3px solid #fff; */
  /* box-shadow: 0 0 10px rgba(15,16,17,1),inset 0 0 10px rgba(15,16,17,1); */
  text-align: center;
  font-size: 74px;
  /* letter-spacing: -8px; */
}

.virtual-tour .explore {
  font-size: 24px;
}

.virtual-tour .click-to-load {
  position: relative;
  background-color: #333;
  height: 450px;
  /*background-size: cover;*/
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.virtual-tour h3 {
  text-align: center;
}

@media only screen and (max-width: 479px) {
  .virtual-tour .model-title {
    font-size: 30px;
  }
  .virtual-tour .button-play {
    font-size: 50px;
  }
  .virtual-tour .explore {
    font-size: 16px;
  }
}

/* Case Request */
#info-center #case-request-container h4 {
  font-weight: bold;
}

#info-center #case-request-container ul.radio-option-list {
  /*background-color: #f1f2f4;*/
  /*padding: 0.5rem;*/
  /*margin-top: 15px;*/
  /*display: flex;*/
  /*flex-direction: row;*/
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 1199.9px) {
  #info-center #case-request-container ul.radio-option-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.9px) {
  #info-center #case-request-container ul.radio-option-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 543.9px) {
  #info-center #case-request-container ul.radio-option-list {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

#info-center #case-request-container ul.radio-option-list li {
  /*width: 200px;*/
  /*max-width: 200px;*/
  margin: 0 auto;
  padding: 1rem;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#info-center #case-request-container ul.radio-option-list li:hover {
  cursor: pointer;
  background-color: #f1f2f4;
}

#info-center #case-request-container ul.radio-option-list img {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  margin: 0 auto 0.5rem;
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  cursor: pointer;
  border-bottom: 4px solid transparent;
}

#info-center #case-request-container ul.radio-option-list label {
  margin: 0;
  padding: 0;
  text-align: center;
  cursor: pointer;
}

#info-center #case-request-container ul.radio-option-list input[type="radio"], #info-center #case-request-container ul.radio-option-list label:before, #info-center #case-request-container ul.radio-option-list label:after {
  display: none;
}

#info-center #case-request-container ul.radio-option-list input[type="radio"]:checked + label img {
  -webkit-filter: none;
          filter: none;
  border-bottom-color: #ff8c00;
}

#info-center #case-request-container ul.checkbox-option-list label {
  margin: 0;
  padding-left: 2rem;
}

#info-center #case-request-container ul.checkbox-option-list label:before {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.75rem;
}

#info-center #case-request-container ul.checkbox-option-list label:after {
  left: 5px;
  width: 0.75rem;
  height: 0.25rem;
  margin-top: -5px;
}

#info-center #case-request-container #case-material ul.radio-option-list {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  grid-auto-rows: 1fr;
}

#info-center #case-request-container #case-material ul.radio-option-list :checked + label {
  /*background-color: #eee;*/
  font-weight: bold;
}

#info-center #case-request-container #case-material ul.radio-option-list li {
  margin: 0;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#info-center #case-request-container #case-material ul.radio-option-list label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
}

#info-center #case-request-container #case-material img {
  -webkit-filter: none;
          filter: none;
  width: 100%;
  height: auto;
  -webkit-aspect-ratio: 1 / 1;
          aspect-ratio: 1 / 1;
  -o-object-fit: cover;
     object-fit: cover;
  padding-bottom: 0;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

#info-center #case-request-container #case-material span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  margin: 0.5rem 0 0;
  padding: 0.25rem 0.75rem;
  text-align: left;
  font-size: 0.9em;
  min-height: 5.4em;
}

#content-landingpage img.f-right {
  margin: 15px 0 15px 15px;
}

#content-landingpage img.f-left {
  margin: 15px 15px 15px 0;
}

#content-landingpage img.f-right, #content-landingpage img.f-left {
  max-width: 400px;
}

@media only screen and (max-width: 767px) {
  #content-landingpage img.f-right, #content-landingpage img.f-left {
    width: 100%;
    max-width: 100%;
    float: none;
    margin: 15px 0;
  }
}

#content-landingpage .lp-img-gallery .owl-item img {
  max-width: 250px;
  margin: 0 auto;
}

@media (min-width: 1200px) {
  #content-landingpage .product-list-item {
    width: 20%;
    max-width: 20%;
  }
}

@media (min-width: 992px) and (max-width: 1199.9px) {
  #content-landingpage .product-list-item {
    width: 25%;
    max-width: 25%;
  }
}

/*.product #breadcrumb li.current a {
    font-weight: normal;
}*/
#product {
  /*#product-specification {

        table {

            td {
                padding: 5px 10px 0 0;
            }

            @include media-breakpoint-down(sm) {
                width: 100%;

                tr td:last-of-type {
                    text-align: right;
                }
            }
        }
    }*/
  /*#product-cross-selling {
        .cross-selling .owl-nav {
            top: -2.5rem;
            right: 0;
        }
    }*/
}

#product h1 {
  font-weight: bold;
  margin-bottom: 1rem;
}

#product h1 span {
  display: inline;
  vertical-align: middle;
}

#product h1 .tag {
  font-size: 50%;
}

#product h3 {
  font-weight: bold;
}

@media (min-width: 992px) {
  #product {
    /* horizontal spacers */
  }
  #product > hr {
    border-color: transparent;
  }
}

@media (max-width: 767.9px) {
  #product {
    margin-bottom: -1rem;
  }
}

#product #product-information {
  overflow: hidden;
  /* Layout START */
  /* Layout END */
}

@media (min-width: 768px) {
  #product #product-information {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
  }
  #product #product-information #product-image {
    padding-right: 1rem;
  }
}

@media (min-width: 1200px) {
  #product #product-information {
    /*-ms-flex-wrap: nowrap;
            -webkit-flex-wrap: nowrap;
            flex-wrap: nowrap;*/
  }
  #product #product-information #product-image {
    padding-left: 1rem;
    width: 50%;
    -ms-flex: 1 0 auto;
    -webkit-box-flex: 1;
            flex: 1 0 auto;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  #product #product-information #product-details {
    width: 25%;
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
  #product #product-information #product-features {
    width: 25%;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}

@media (min-width: 768px) and (max-width: 1199.9px) {
  #product #product-information {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  #product #product-information #product-image {
    width: 60%;
    -ms-flex: 1 0 auto;
    -webkit-box-flex: 1;
            flex: 1 0 auto;
  }
  #product #product-information #product-details {
    /*-ms-flex: 1 0 auto;
                -webkit-flex: 1 0 auto;
                flex: 1 0 auto;*/
    width: 40%;
  }
  #product #product-information #product-features {
    width: 100%;
  }
}

@media (max-width: 767.9px) {
  #product #product-information {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #product #product-information #product-details, #product #product-information #product-features {
    margin-top: 1rem;
  }
}

#product #product-information .vertical-blocks {
  /* every block besides last one */
}

@media (min-width: 992px) {
  #product #product-information .vertical-blocks {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    /* last block must consume available space */
    /*.v-block:last-of-type {
                    -ms-flex: 1 0 auto;
                    -webkit-flex: 1 0 auto;
                    flex: 1 0 auto;
                }*/
  }
}

#product #product-information .vertical-blocks .v-block:nth-last-of-type(n+2) {
  margin-bottom: 0.5rem;
}

@media (max-width: 767.9px) {
  #product #product-information .vertical-blocks .v-block:nth-last-of-type(n+2) {
    margin-bottom: 1rem;
  }
}

#product #product-information #product-image {
  overflow: hidden;
  position: relative;
  /* prevent content beneath from resizing */
  /*.royalSlider.slider-init:before {
                content: "";
                width: 100%;
	            display: block;
                padding-top: 100%;
                background-color: gold;
            }*/
  /* no-js stuff */
  /*.royalSlider > .rsImg:first-of-type {
                float: none;

                img {
                    display: block;
                    margin: 0 auto;
                }
            }*/
}

#product #product-information #product-image > div {
  width: 100%;
}

#product #product-information #product-image i.fa-spinner {
  display: none;
}

#product #product-information #product-image .royalSlider {
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}

#product #product-information #product-image .slider-init {
  position: relative;
  max-height: 600px;
}

#product #product-information #product-image .slider-init > i.fa-spinner {
  display: block;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 45%;
}

#product #product-information #product-image .slider-init .royalSlider {
  opacity: 0;
  position: absolute;
  top: 0;
}

#product #product-information #product-image .slider-init:before {
  content: "";
  display: block;
  padding-top: 100%;
}

#product #product-information #product-details {
  /* every block besides last one */
  /*#add-to-cart__container.alternative {
                align-items: center;
                background-color: #ff8c00;
                border: 1px solid #e07b00;

                &:hover {
                    background-color: #e67e00;
                    border-color: #e07b00;
                }

                .add-to-cart__quantity {
                    border: none;
                    margin: 0.35rem 0 0.35rem 0.35rem;
                    padding: 0.5rem;
                }

                #add-to-cart {
                    background-color: transparent;
                    border: none;
                    padding-left: 0.15rem;
                    padding-right: 0.15rem;
                }
            }*/
}

#product #product-information #product-details > div {
  background-color: #f0f0f0;
  padding: 1rem;
  /*&:last-of-type {
                    -ms-flex: none;
                    -webkit-flex: none;
                    flex: none;
                }*/
}

#product #product-information #product-details > div:first-of-type {
  -ms-flex: 1 0 auto;
  -webkit-box-flex: 1;
          flex: 1 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#product #product-information #product-details > div > div:nth-last-of-type(n+2) {
  margin-bottom: 0.5rem;
}

#product #product-information #product-details .product-details__bottom-actions {
  margin-top: auto;
}

#product #product-information #product-details #product-price {
  font-size: 1.75rem;
  font-weight: bold;
}

#product #product-information #product-details #set-price {
  font-size: 0.875rem;
}

#product #product-information #product-details #set-price .tag {
  font-size: 0.875rem;
  vertical-align: baseline;
}

#product #product-information #product-details #product-condition-related {
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
}

#product #product-information #product-details #product-condition-related a {
  text-decoration: underline;
}

#product #product-information #product-details #product-availability .fa-truck {
  font-size: 1.25rem;
  vertical-align: baseline;
}

#product #product-information #product-details #product-availability .available-text {
  font-size: 1.15rem;
  font-weight: bold;
}

#product #product-information #product-details #add-to-cart__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

#product #product-information #product-details #add-to-cart__container .add-to-cart__quantity {
  padding: 0.5rem;
  margin-right: 0.5rem;
  position: relative;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  /* hide arrows */
}

@media (min-width: 1200px) and (max-width: 1439.9px) {
  #product #product-information #product-details #add-to-cart__container .add-to-cart__quantity {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

@media (min-width: 768px) and (max-width: 991.9px) {
  #product #product-information #product-details #add-to-cart__container .add-to-cart__quantity {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

#product #product-information #product-details #add-to-cart__container .add-to-cart__quantity.custom .add-to-cart__quantity--label,
#product #product-information #product-details #add-to-cart__container .add-to-cart__quantity.custom .add-to-cart__quantity--select,
#product #product-information #product-details #add-to-cart__container .add-to-cart__quantity.custom .add-to-cart__quantity--dropdown-icons {
  display: none;
}

#product #product-information #product-details #add-to-cart__container .add-to-cart__quantity.custom .add-to-cart__quantity--input {
  display: block;
  width: 30px;
  position: relative;
}

#product #product-information #product-details #add-to-cart__container .add-to-cart__quantity .add-to-cart__quantity--label {
  padding: 0 0.25rem;
}

#product #product-information #product-details #add-to-cart__container .add-to-cart__quantity .add-to-cart__quantity--select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
  z-index: 1;
}

#product #product-information #product-details #add-to-cart__container .add-to-cart__quantity .add-to-cart__quantity--dropdown-icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#product #product-information #product-details #add-to-cart__container .add-to-cart__quantity .add-to-cart__quantity--dropdown-icons > svg {
  fill: #656565;
  width: 15px;
  height: 15px;
  margin: -3px 0;
}

#product #product-information #product-details #add-to-cart__container .add-to-cart__quantity .add-to-cart__quantity--input {
  border: none;
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  outline: none;
  text-align: center;
  margin: 0px;
  vertical-align: baseline;
  display: none;
}

#product #product-information #product-details #add-to-cart__container .add-to-cart__quantity input[type='number'] {
  -moz-appearance: textfield;
}

#product #product-information #product-details #add-to-cart__container .add-to-cart__quantity input::-webkit-outer-spin-button,
#product #product-information #product-details #add-to-cart__container .add-to-cart__quantity input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

#product #product-information #product-details #add-to-cart__container .add-to-cart__button {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

#product #product-information #product-details #add-to-cart__container .add-to-cart__button #add-to-cart {
  padding-left: 0.15rem;
  padding-right: 0.15rem;
}

@media (min-width: 1200px) and (max-width: 1439.9px) {
  #product #product-information #product-details #add-to-cart__container .add-to-cart__button #add-to-cart i {
    margin-right: 0.25rem;
  }
}

@media (min-width: 768px) and (max-width: 991.9px) {
  #product #product-information #product-details #add-to-cart__container .add-to-cart__button #add-to-cart i {
    margin-right: 0.25rem;
  }
}

#product #product-information #product-details .cta.btn-primary {
  font-weight: bold;
  font-size: 1.25rem;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

#product #product-information #product-details i.fa-map-marker {
  vertical-align: baseline;
}

#product #product-information #product-details .small .small {
  font-size: 90%;
}

#product #product-information #product-details .separator {
  font-size: 0.3em;
  vertical-align: middle;
  color: #373a3c;
}

@media (min-width: 1200px) {
  #product #product-information #product-features {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  #product #product-information #product-features .content {
    -ms-flex: 1 0 auto;
    -webkit-box-flex: 1;
            flex: 1 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  #product #product-information #product-features .v-block.bg {
    border: 2px solid #f0f0f0;
    padding: 1rem;
    -ms-flex: 1 0 auto;
    -webkit-box-flex: 1;
            flex: 1 0 auto;
  }
}

#product #product-information #product-features #product-brand {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#product #product-information #product-features .feature {
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
  padding: 0.5rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (min-width: 1200px) {
  #product #product-information #product-features .feature {
    padding: 0.75rem 1rem;
    background-color: #f0f0f0;
  }
  #product #product-information #product-features .feature.product-rating {
    background-color: #ffffff;
    border: 2px solid #f0f0f0;
  }
}

#product #product-information #product-features .feature > div:first-of-type {
  font-weight: bold;
}

@media (max-width: 1199.9px) {
  #product #product-information {
    /* set accordion stuff again */
    /* set accordion stuff again */
  }
  #product #product-information #product-features .feature, #product #product-information #product-features .small {
    font-size: 1rem;
  }
  #product #product-information #product-features .feature > div:first-of-type, #product #product-information #product-features .small > div:first-of-type {
    font-weight: normal;
  }
  #product #product-information #product-features .header {
    border-bottom: none;
  }
  #product #product-information #product-features.active .header {
    border-bottom: 1px solid #cccccc;
  }
}

#product #product-information #product-tier-price ul {
  display: grid;
  row-gap: 0.5rem;
  -webkit-column-gap: 0.5rem;
     -moz-column-gap: 0.5rem;
          column-gap: 0.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 544px) and (max-width: 767.9px) {
  #product #product-information #product-tier-price ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#product #product-information #product-tier-price li {
  padding: 0.5rem;
  border: 1px solid #cccccc;
  background-color: #ffffff;
  font-size: small;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

#product #product-information #product-tier-price li.selected,
#product #product-information #product-tier-price li:hover {
  border-color: #ff8c00;
}

#product #product-information #product-tier-price li.selected:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  margin: -12px;
  width: 20px;
  height: 20px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  background-color: #ff8c00;
}

#product #product-description {
  /* normalize staff madness */
}

@media (min-width: 768px) {
  #product #product-description .set-description > div > div {
    padding: 1rem;
  }
}

@media (max-width: 767.9px) {
  #product #product-description {
    /*.set-description > div {
                margin-bottom: (2 * $box-standard-margin);
            }

            .set-description > div > div:first-of-type {
                margin-bottom: $box-standard-margin;
            }*/
  }
  #product #product-description h2 {
    font-size: 1.25rem;
  }
  #product #product-description .set-description > div > div {
    padding: 1rem 0;
  }
}

#product #product-description .description {
  /*.set-price-column {
                width: 150px;
            }*/
}

@media (min-width: 768px) {
  #product #product-description .description {
    margin-bottom: 1rem;
  }
}

#product #product-description .description h1, #product #product-description .description h2, #product #product-description .description h3, #product #product-description .description h4, #product #product-description .description h5, #product #product-description .description h6 {
  font-size: 1rem;
}

#product #product-description .description h4 {
  font-weight: bold;
}

#product #product-equipment .left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#product #product-equipment .right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 100%;
          flex: 0 1 100%;
}

#product #product-equipment .table-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
}

#product #product-equipment .table-row:hover {
  background-color: #f7f7f7;
}

#product #product-equipment .table-row.active {
  background-color: #FDF5E6;
}

#product #product-equipment .table-row.active .product-equipment-price {
  color: #373a3c;
}

#product #product-equipment .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 1rem;
}

#product #product-equipment .product-equipment-checkbox input[type="checkbox"] {
  display: none;
}

#product #product-equipment .product-equipment-checkbox label {
  position: relative;
  cursor: pointer;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#product #product-equipment .product-equipment-checkbox label::before {
  content: '';
  width: 1.28571429em;
  height: 1.28571429em;
  border: 2px solid #cccccc;
  font-size: 1.75rem;
  background: #ffffff;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#product #product-equipment .product-equipment-checkbox input[type="checkbox"]:checked + label::before {
  border-color: #888888;
  font-family: 'font-awesome';
  content: '\e804';
  padding: 0;
}

#product #product-equipment .product-equipment-image {
  background-color: #fff;
}

#product #product-equipment .product-equipment-image img {
  width: 75px;
  height: 75px;
  margin: 0.5rem;
}

#product #product-equipment .product-equipment-name {
  display: inline-block !important;
  width: 100%;
  -ms-flex-item-align: center;
      align-self: center;
}

#product #product-equipment .product-equipment-quantity input[type="number"] {
  width: 50px;
  font-size: 0.875rem;
  margin: 0 5px;
  -moz-appearance: textfield;
}

#product #product-equipment .product-equipment-quantity input[type=number]::-webkit-inner-spin-button,
#product #product-equipment .product-equipment-quantity input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#product #product-equipment .product-equipment-quantity .btn {
  background-color: transparent;
  color: #333333;
  line-height: 1;
}

#product #product-equipment .product-equipment-quantity .btn:hover i,
#product #product-equipment .product-equipment-quantity .btn:focus i {
  -webkit-transform: scale(1.25);
          transform: scale(1.25);
}

#product #product-equipment .product-equipment-price {
  color: #aaaaaa;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100px;
          flex: 0 0 100px;
  white-space: nowrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
}

#product #product-equipment .product-equipment-price span {
  margin: 0 0 0 auto;
}

#product #product-equipment #product-equipment-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  position: sticky;
  bottom: 0;
  padding: 1rem 1rem 1.5rem 1rem;
  margin: 0 -1rem !important;
  background-color: #fff;
}

#product #product-equipment #product-equipment-footer.sticky {
  border-top: 1px solid #ccc;
  -webkit-box-shadow: 0 -5px 10px rgba(204, 204, 204, 0.8);
          box-shadow: 0 -5px 10px rgba(204, 204, 204, 0.8);
  padding-top: 1rem;
}

#product #product-equipment #product-equipment-total-price {
  font-weight: bold;
  font-size: 1.5rem;
  border-bottom: 2px solid #e67e00;
}

@media (max-width: 767.9px) {
  #product #product-equipment .left {
    display: block;
  }
  #product #product-equipment .right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #product #product-equipment .product-equipment-name {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    /* flex: 0; */
    width: auto;
    display: block !important;
    -ms-flex-item-align: start;
        align-self: start;
    margin: 0 0 0.5rem 0;
  }
  #product #product-equipment .product-equipment-quantity {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    /* flex: 0; */
    /* align-self: start; */
    margin: 1rem 0 0 -1rem;
  }
  #product #product-equipment .product-equipment-price {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
    -webkit-box-flex: 0;
        -ms-flex: 0;
            flex: 0;
    margin: 0;
  }
  #product #product-equipment .product-equipment-price span {
    margin: 0;
  }
}

#product #product-faq a {
  text-decoration: underline;
}

#product-reviews .stars {
  color: orange;
}

#product-reviews .progressbar {
  border: 1px solid #cccccc;
  height: 1.25rem;
  width: 100%;
}

#product-reviews .progressbar-value {
  background-color: #ff8c00;
  height: 100%;
}

#product-reviews .summary > div:not(.summary__overview) {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  max-width: 400px;
  min-width: 250px;
}

#product-reviews .summary a {
  text-decoration: underline;
}

#product-reviews .summary .third {
  text-align: right;
}

#product-reviews .summary ul, #product-reviews .summary li {
  width: 100%;
}

#product-reviews .summary li div {
  white-space: nowrap;
}

#product-reviews .summary li div.second {
  width: 100%;
  min-width: 100px;
}

#product-reviews .summary .summary__overview__rating {
  font-size: 1.75em;
  line-height: 1em;
}

#product-reviews .summary .summary__overview__average span {
  font-weight: bold;
  font-size: 2.25em;
  color: #333333;
  line-height: 1em;
}

#product-reviews .summary .summary__overview__count {
  font-size: 0.85em;
  color: #777777;
}

@media (min-width: 992px) {
  #product-reviews .summary {
    margin: 2rem 0 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  #product-reviews .summary > div {
    padding: 0 1rem;
  }
}

@media (max-width: 991.9px) {
  #product-reviews .summary {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  #product-reviews .summary > div {
    margin-bottom: 1rem;
  }
  #product-reviews .summary .summary__overview {
    margin-right: 2rem;
  }
}

#product-reviews .settings {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 0 1.5rem;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

#product-reviews .settings .info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-right: 2rem;
}

#product-reviews .settings .info span {
  /*color: $gray-medium-light;*/
}

#product-reviews .settings .sorting, #product-reviews .settings .filtering {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#product-reviews .settings .sorting span, #product-reviews .settings .filtering span {
  display: block;
  margin-right: 0.5rem;
}

#product-reviews .settings .sorting {
  margin-right: 2rem;
}

#product-reviews .settings select {
  width: auto;
}

#product-reviews .settings select option[disabled] {
  color: #cccccc;
}

@media (max-width: 767.9px) {
  #product-reviews .settings {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-bottom: 0;
  }
  #product-reviews .settings .info {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
  }
  #product-reviews .settings > div {
    margin-bottom: 1rem;
  }
}

@media (max-width: 543.9px) {
  #product-reviews .settings .sorting, #product-reviews .settings .filtering {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
    margin-right: 0;
  }
}

#product-reviews .reviews {
  display: grid;
  grid-auto-flow: row dense;
  grid-gap: 1rem;
  /*.collapsed {
            max-height: (3em * $line-height-base);
            overflow: hidden;
        }*/
}

#product-reviews .reviews.no-grid {
  grid-template-columns: none !important;
}

#product-reviews .reviews .review {
  background-color: #fafafa;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  /* necessary for text truncate via javascript (jquery.ellipsis.js) */
  /*max-width: 100%;
            overflow: hidden;*/
}

#product-reviews .reviews .review:hover {
  border-color: #808080;
}

#product-reviews .reviews .review__rating {
  font-size: 1.15em;
}

#product-reviews .reviews .review__title {
  font-size: 0.85em;
}

#product-reviews .reviews .review__description {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  /*min-height: (4.5em * $line-height-base);*/
  /* necessary for text truncate */
  /*-webkit-line-clamp: 3;
            line-clamp: 3;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;*/
  /* hide "show more" label initially */
  /* if the js function discovers a truncated p element, show the label again */
}

#product-reviews .reviews .review__description p {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#product-reviews .reviews .review__description input[type="checkbox"]:checked {
  /* remove line clamp on click to show the entire thing */
  /* hide "show more" label after click */
}

#product-reviews .reviews .review__description input[type="checkbox"]:checked + p {
  -webkit-line-clamp: unset;
}

#product-reviews .reviews .review__description input[type="checkbox"]:checked ~ label {
  display: none;
}

#product-reviews .reviews .review__description label {
  display: none;
  cursor: pointer;
  text-decoration: underline;
}

#product-reviews .reviews .review__description p.truncated + label {
  display: inline-block;
}

#product-reviews .reviews .review__footer {
  font-size: 0.85em;
  font-style: italic;
  color: #777777;
}

@media (min-width: 992px) {
  #product-reviews .reviews {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991.9px) {
  #product-reviews .reviews {
    grid-template-columns: repeat(1, 1fr);
  }
}

#footer-benefits {
  background-color: #eeeeee;
  color: #656565;
  border-top: 2px solid #ff8c00;
  overflow: hidden;
}

#footer-benefits .col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

#footer-benefits i {
  font-size: 2.5em;
  line-height: 1.1em;
}

@media (min-width: 992px) {
  #footer-benefits {
    margin-top: 2rem;
  }
}

#site-footer {
  background-color: #373a3c;
  color: #f2f2f2;
  padding: 1rem;
  /*img.ekomi, img.trusted-shops {
        max-width: 190px;
        max-height: 190px;
    }*/
  /* Bootstraps $text-muted (#818a91) ist fuer helle Hintergruende gedacht und
       erreicht auf dem dunklen Footer nur 3.26:1. $text-muted-light kommt auf
       4.93:1 und wird im Footer ohnehin schon fuer Linien und Icons benutzt.
       Das !important ist noetig, weil die Utility .text-muted selbst eines hat. */
  /*#site-footer__newsletter-container {

        .newsletter {
            padding: ($box-standard-padding / 2) 0;
        }

        .newsletter:first-of-type {

            > div {
                display: table-cell;
                vertical-align: middle;
            }

            i {
                background-color: $brand-info;
                border-radius: 100%;
                font-size: 1.75em;
                line-height: 1;
                margin-right: $box-standard-margin;
                display: block;
                padding: 1rem;
            }
        }

        input {
            margin-bottom: $box-standard-padding;
        }
    }*/
  /* Site Footer Payment Methods */
}

@media (max-width: 767.9px) {
  #site-footer {
    border-top: 2px solid #ff8c00;
  }
}

#site-footer .footer-headline {
  border-bottom: 1px solid #aaaaaa;
  font-weight: bold;
  color: #ff8c00;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.1;
}

#site-footer .footer-withdrawal-link {
  color: #ff8c00;
  font-weight: bold;
  text-decoration: underline;
  font-size: 1.05rem;
}

#site-footer .footer-withdrawal-link:hover, #site-footer .footer-withdrawal-link:focus {
  color: #ff9e29;
  text-decoration: underline;
}

#site-footer a {
  color: #f2f2f2;
}

#site-footer .text-orange {
  color: #ff8c00;
}

#site-footer i.fa-external-link {
  font-size: 0.75em;
  color: #aaaaaa;
}

@media (max-width: 991.9px) {
  #site-footer a:not(.modal-toggle) {
    display: inline-block;
    padding: 0.25rem 0;
  }
}

@media (max-width: 767.9px) {
  #site-footer a:not(.modal-toggle) {
    padding: 0.33333rem 0;
  }
}

#site-footer .col {
  padding: 0.5rem 1rem;
}

#site-footer #site-footer__feedback-container {
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

@media (min-width: 1200px) {
  #site-footer #site-footer__feedback-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media (min-width: 544px) and (max-width: 767.9px) {
  #site-footer #site-footer__feedback-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

#site-footer .row.small,
#site-footer .text-muted {
  color: #aaaaaa !important;
}

#site-footer #site-footer__social-container ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
}

#site-footer #site-footer__social-container a {
  display: inline-block;
  vertical-align: middle;
}

#site-footer #site-footer__social-container a:hover {
  text-decoration: none;
}

#site-footer #site-footer__social-container span.facebook i.fa-square {
  color: #3b5999;
}

#site-footer #site-footer__social-container span.instagram i.fa-square {
  color: #e4405f;
}

#site-footer #site-footer__social-container span.youtube i.fa-square {
  color: #cd201f;
}

#site-footer #site-footer__social-container span.twitter i.fa-square {
  color: #55acee;
}

#site-footer #site-footer__social-container span.rss i.fa-square {
  color: #f57d00;
}

#site-footer #site-footer__social-container i.fa-stack-1x {
  color: #f2f2f2;
}

#site-footer ul.payment-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, 75px);
  grid-gap: 0.5rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#site-footer .payment-bg {
  display: block;
  background: url("/content/images/logo/payment-sprite-v5.png") no-repeat 0 0 transparent;
  width: 100%;
  height: 54px;
}

#site-footer .payment-bg:hover {
  text-decoration: none;
}

#site-footer .payment-cash-in-advance {
  background-position: 0px 0;
}

#site-footer .payment-cash-on-delivery {
  background-position: -75px 0;
}

#site-footer .payment-cash {
  background-position: -150px 0;
}

#site-footer .payment-ec {
  background-position: -225px 0;
}

#site-footer .payment-credit-card {
  background-position: -300px 0;
}

#site-footer .payment-invoice-pi {
  background-position: -375px 0;
}

#site-footer .payment-paypal {
  background-position: -450px 0;
}

#site-footer .payment-amazonpay {
  background-position: -525px 0;
}

#site-footer .payment-klarna {
  background-position: -600px 0;
}

#site-footer .payment-sepa {
  background-position: -675px 0;
}

#site-footer .payment-consorsfinanz {
  background-position: -750px 0;
}

#site-footer .payment-easycredit {
  background-position: -825px 0;
}

#site-footer .payment-easycreditinvoice {
  background-position: -900px 0;
}

/* ============================================================
   Redesign - wird als letzte Partial eingebunden und ueberschreibt
   damit alle vorherigen Regeln. Jeder Block nennt die Datei, zu der
   er inhaltlich gehoert, damit der Diff in einem Schritt zurueck-
   nehmbar bleibt.
   ============================================================ */
/* ============================================================
   gehoert inhaltlich zu: _main.scss
   ============================================================ */
/* Panels: mehr Luft, Schatten statt Rahmen */
.site-panel {
  padding: 1.25rem;
  border-radius: 14px;
}

@media (min-width: 992px) {
  .site-panel {
    padding: 1.5rem;
    -webkit-box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
            box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
  }
}

/* ============================================================
   gehoert inhaltlich zu: _global.scss
   ============================================================ */
/* Ueberschriften: genau eine farbige Linie pro Bildschirm.
   Die Linie folgt der Textbreite, nicht mehr einem festen 48px-Akzent
   und nicht der vollen Panelbreite. .reset bleibt aussen vor. */
h1:not(.reset), .h1:not(.reset) {
  border-bottom: none;
  padding-bottom: 0.5rem;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}

h1:not(.reset):after, .h1:not(.reset):after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 3px;
  background-color: #ff8c00;
}

@media (max-width: 767.9px) {
  h1:not(.reset):after, .h1:not(.reset):after {
    display: none;
  }
}

h2, .h2 {
  border-bottom: 1px solid #ededef;
  /* war #cccccc */
  padding-bottom: 0.5rem;
}

/* Badges - Vollton, weisse Schrift. font-weight bleibt Bootstraps bold,
   weil roboto-v18-latin nur 400 und 700 mitbringt. */
.tag {
  border-radius: 6px;
}

.tag-pill {
  border-radius: 10rem;
  /* unveraendert, hier nur zur Sicherheit */
}

.tag-success {
  background-color: #2f7d43;
  color: #ffffff;
}

.tag-default {
  background-color: #5a6068;
  color: #ffffff;
}

.tag-danger {
  background-color: #c9433f;
  color: #ffffff;
}

.tag-info {
  background-color: #3a7a90;
  color: #ffffff;
}

/* Alerts flaechig statt gerahmt */
.alert {
  border: none;
  border-radius: 14px;
}

.alert-success {
  background-color: #edf6ee;
  color: #2f7d43;
}

.alert-danger {
  background-color: #fbedec;
  color: #a83b37;
}

.alert-info {
  background-color: #ecf4f7;
  color: #2f6b7e;
}

/* Buttons, Inputs und Selects sind eine Familie: gleiche Rundung ueber
   $border-radius, gleiche Dauer, und Hover hebt ueber den Schatten statt ueber
   einen Rahmenwechsel. Geometrie und Farben bleiben, wie sie waren. */
.btn {
  -webkit-transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

/* CTA bekommt eine leichte Elevation, Padding unveraendert */
.btn.cta {
  -webkit-box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
          box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
}

.btn.cta:hover, .btn.cta:focus {
  -webkit-box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 10px 24px rgba(20, 22, 24, 0.1);
          box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 10px 24px rgba(20, 22, 24, 0.1);
}

.btn-primary:hover,
.btn-primary:focus {
  -webkit-box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
          box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
}

/* ============================================================
   gehoert inhaltlich zu: components/_product-list.scss
   ============================================================ */
.product-list {
  /* Verfuegbarkeit als Ankerpunkt.
     700 statt 500, weil nur 400 und 700 als Schriftschnitt geladen sind.
     Der Preis steht gesammelt im Abschnitt "Preis" weiter unten. */
}
@media (min-width: 768px) {
  .product-list .product-list-item-content {
    /* wie die Kategoriekacheln (#category-children): mit $panel-padding
       sass das Bild 8px tiefer als dort */
    padding: 1rem;
    border: 1px solid transparent;
    /* war 1px solid #cccccc */
    border-radius: 14px;
    /* Kachelstufe der Elevation-Leiter - dieselbe wie im Karussell,
       damit Liste und Karussell gleich weit vorn liegen. */
    -webkit-box-shadow: 0 1px 3px rgba(20, 22, 24, 0.06), 0 4px 12px rgba(20, 22, 24, 0.07);
            box-shadow: 0 1px 3px rgba(20, 22, 24, 0.06), 0 4px 12px rgba(20, 22, 24, 0.07);
    -webkit-transition: border-color 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: border-color 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  }
  .product-list .product-list-item-content:hover, .product-list .product-list-item-content:focus {
    border-color: transparent;
    /* war #656565 */
    -webkit-box-shadow: 0 3px 8px rgba(20, 22, 24, 0.09), 0 12px 28px rgba(20, 22, 24, 0.13);
            box-shadow: 0 3px 8px rgba(20, 22, 24, 0.09), 0 12px 28px rgba(20, 22, 24, 0.13);
  }
  .product-list .product-list-item-content:hover .product-info-wrapper, .product-list .product-list-item-content:focus .product-info-wrapper {
    border-color: #ededef;
  }
  .product-list .product-info-wrapper {
    border-top: 1px solid #ededef;
    /* war #cccccc */
  }
}
@media (max-width: 767.9px) {
  .product-list {
    /* Mobil ebenfalls Kacheln statt Trennlinien: dieselbe Karte wie im
       Karussell (weiche Linie, Rundung, Kachel-Elevation), nur als Zeile.
       Die Liste steht jetzt im Panel-Padding. Der Bestand zog sie mit
       0 -1rem an den Rand - seit $panel-padding-sm 1.25rem ist, endete
       sie 4px davor. */
    margin: 0;
    border-top: none;
  }
  .product-list .product-list-item {
    margin: 0 0 0.75rem;
    border-bottom: none;
  }
  .product-list .product-list-item:hover {
    margin-top: 0;
    border-top: none;
  }
  .product-list .product-list-item-content {
    background-color: #ffffff;
    border: 1px solid #ededef;
    border-radius: 14px;
    -webkit-box-shadow: 0 1px 3px rgba(20, 22, 24, 0.06), 0 4px 12px rgba(20, 22, 24, 0.07);
            box-shadow: 0 1px 3px rgba(20, 22, 24, 0.06), 0 4px 12px rgba(20, 22, 24, 0.07);
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: border-color 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: border-color 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    /* :hover bleibt auf Touch nach dem Tippen stehen - kein dunkler Rahmen */
  }
  .product-list .product-list-item-content:hover, .product-list .product-list-item-content:focus {
    border-color: #ededef;
  }
  .product-list .product-list-item-content:active {
    border-color: #e6e7e9;
    -webkit-box-shadow: 0 3px 8px rgba(20, 22, 24, 0.09), 0 12px 28px rgba(20, 22, 24, 0.13);
            box-shadow: 0 3px 8px rgba(20, 22, 24, 0.09), 0 12px 28px rgba(20, 22, 24, 0.13);
  }
  .product-list .product-list-item-content > div {
    padding: 0.75rem;
    /* war 1rem */
  }
}
.product-list .product-image img {
  border-radius: 10px;
}
.product-list .product-availability {
  font-weight: 700;
  /* war normal */
}

/* ============================================================
   gehoert inhaltlich zu: pages/_category-detail.scss
   ============================================================ */
@media (min-width: 768px) {
  #category-children .product-list {
    margin: 0 -0.5rem;
    /* war 0 -3px, Kacheln nicht mehr bündig */
  }
  #category-children .product-list .product-list-item {
    margin: 0;
    /* war -1px 0 0 -1px */
    width: 25%;
    max-width: 25%;
  }
  #category-children .product-list .product-list-item-content {
    margin: 0.5rem;
    padding: 1rem;
    /* war $panel-padding 1.5rem */
    border-radius: 18px;
    /* war $border-radius-panel 14px */
  }
  #category-children .product-list .product-image img {
    border-radius: 14px;
  }
}

@media (min-width: 1200px) {
  #category-children .product-list .product-list-item {
    width: 20%;
    max-width: 20%;
  }
}

/* ============================================================
   gehoert inhaltlich zu: components/_modal.scss
   ============================================================ */
.modal-content {
  border-radius: 16px;
  -webkit-box-shadow: 0 10px 20px rgba(20, 22, 24, 0.1), 0 30px 60px rgba(20, 22, 24, 0.18);
          box-shadow: 0 10px 20px rgba(20, 22, 24, 0.1), 0 30px 60px rgba(20, 22, 24, 0.18);
}

/* ============================================================
   gehoert inhaltlich zu: components/_cookie-consent.scss
   ============================================================ */
#cconsent-bar .cconsent-wrapper {
  border-radius: 16px;
  /* war 8px */
  overflow: hidden;
  -webkit-box-shadow: 0 10px 20px rgba(20, 22, 24, 0.1), 0 30px 60px rgba(20, 22, 24, 0.18);
          box-shadow: 0 10px 20px rgba(20, 22, 24, 0.1), 0 30px 60px rgba(20, 22, 24, 0.18);
}

#cconsent-bar .cconsent-left img {
  border-radius: 14px;
}

#cconsent-bar .cconsent-button {
  border-radius: 10px;
  -webkit-transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

#cconsent-bar .cconsent-button.accept {
  -webkit-box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
          box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
}

#cconsent-bar .cconsent-button.accept:hover, #cconsent-bar .cconsent-button.accept:focus {
  -webkit-box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 10px 24px rgba(20, 22, 24, 0.1);
          box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 10px 24px rgba(20, 22, 24, 0.1);
}

#cconsent-bar .cconsent-button.customize,
#cconsent-bar .cconsent-button.deny {
  border: 1px solid #e6e7e9;
}

#modal-cookie-consent .modal-content {
  overflow: hidden;
}

#modal-cookie-consent .switch-container {
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  background-color: #f7f7f8;
}

#modal-cookie-consent .btn {
  border-radius: 10px;
}

/* ============================================================
   gehoert inhaltlich zu: components/_shopping-cart.scss
   ============================================================ */
#shopping-cart {
  border: none;
  /* war 1px solid #cccccc */
}

@media (min-width: 992px) {
  #shopping-cart > div > div {
    border-top-color: #ededef;
  }
}

@media (max-width: 991.9px) {
  #shopping-cart .shopping-cart-item {
    border-top-color: #ededef;
  }
}

#shopping-cart-index .shopping-cart-cta {
  border: none;
  border-radius: 14px;
  -webkit-box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
          box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
}

#shopping-cart-index .shopping-cart-cta > div {
  border-top-color: #ededef;
}

/* ============================================================
   gehoert inhaltlich zu: components/_checkout-progress.scss
   ============================================================ */
#checkout-progress {
  /* Selektoren muessen ul und li mitfuehren, sonst gewinnt der Bestand */
}

@media (min-width: 992px) {
  #checkout-progress ul li {
    border-radius: 10px;
    border-color: #ededef;
  }
  #checkout-progress ul li.visited {
    border-color: #e6e7e9;
  }
  #checkout-progress ul li.active {
    border-color: #ff8c00;
    background-color: rgba(255, 140, 0, 0.06);
  }
}

#checkout-progress ul li.active .hole {
  background-color: #ff8c00;
  border-color: #ff8c00;
}

#checkout-progress ul li.visited .hole {
  border-color: #2f7d43;
  color: #2f7d43;
}

/* ============================================================
   gehoert inhaltlich zu: components/_pagination.scss
   und components/_product-list-pager.scss
   ============================================================ */
.pagination li a, .pagination li span, .pagination li .page-link {
  border-radius: 10px;
}
@media (max-width: 767.9px) {
  .pagination {
    /* .page-link erfasst auch den deaktivierten Pfeil, der ein <div> ist */
  }
  .pagination li a, .pagination li .page-link, .pagination select {
    border-color: #e6e7e9;
    border-radius: 10px;
    background-color: #ffffff;
  }
}

/* Pager mobil: gerundete Flaeche im Panel statt grauem #ccc-Balken,
   der mit 1rem -1rem bis kurz vor den Rand lief */
@media (max-width: 767.9px) {
  #product-list-pager {
    margin: 1rem 0 0;
    padding: 0.75rem;
    background-color: #f7f7f8;
    border-radius: 14px;
  }
}

/* ============================================================
   gehoert inhaltlich zu: components/_accordion.scss
   Mobil: Kopfzeilen als gerundete Flaeche im Panel, der Pfeil sitzt
   in einem runden weissen Knopf wie die Karussell-Pfeile. Der Bestand
   zog die Kopfzeilen mit 0 -1rem bis kurz vor den Rand und trennte
   sie mit einer dunklen Linie. xxl-down (alle Breiten) bleibt, wie
   es ist - es wird derzeit nirgends verwendet.
   ============================================================ */
@media (max-width: 991.9px) {
  .accordion.md-down .header {
    margin: 0 0 0.5rem;
    /* war 0 -1rem */
    padding: 0.75rem 0.75rem 0.75rem 1rem;
    border-top: none;
    /* war 1px solid $gray-light */
    border-radius: 14px;
    background-color: #f7f7f8;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    /* in Djl/Mbs traegt die h2 sonst ihren Unterstrich in die Flaeche */
  }
  .accordion.md-down .header:active {
    background-color: #ededef;
  }
  .accordion.md-down .header h2 {
    padding-bottom: 0;
    border-bottom: none;
  }
  .accordion.md-down .header > i {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    font-size: 0.75rem;
    text-align: center;
    color: #373a3c;
    background-color: #ffffff;
    border-radius: 50%;
    -webkit-box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
            box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
    -webkit-transition: -webkit-transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: -webkit-transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  }

  /* offen: dieselbe Flaeche, nur der Pfeil dreht sich */
  .accordion.md-down.active .header {
    background-color: #f7f7f8;
    /* war $gray-lighter */
    border-bottom: none;
    /* war 1px solid #cccccc */
  }
}
@media (max-width: 767.9px) {
  .accordion.sm-down .header {
    margin: 0 0 0.5rem;
    /* war 0 -1rem */
    padding: 0.75rem 0.75rem 0.75rem 1rem;
    border-top: none;
    /* war 1px solid $gray-light */
    border-radius: 14px;
    background-color: #f7f7f8;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    /* in Djl/Mbs traegt die h2 sonst ihren Unterstrich in die Flaeche */
  }
  .accordion.sm-down .header:active {
    background-color: #ededef;
  }
  .accordion.sm-down .header h2 {
    padding-bottom: 0;
    border-bottom: none;
  }
  .accordion.sm-down .header > i {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    font-size: 0.75rem;
    text-align: center;
    color: #373a3c;
    background-color: #ffffff;
    border-radius: 50%;
    -webkit-box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
            box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
    -webkit-transition: -webkit-transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: -webkit-transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  }

  /* offen: dieselbe Flaeche, nur der Pfeil dreht sich */
  .accordion.sm-down.active .header {
    background-color: #f7f7f8;
    /* war $gray-lighter */
    border-bottom: none;
    /* war 1px solid #cccccc */
  }
}

/* ============================================================
   gehoert inhaltlich zu: components/_content-menu-left.scss
   und components/_content-menu-left-standard.scss
   ============================================================ */
.content-menu-left {
  border: none;
  /* war 1px solid #cccccc */
  border-radius: 14px;
  background-color: #ffffff;
}
@media (min-width: 992px) {
  .content-menu-left {
    -webkit-box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
            box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
  }
}

.menu-standard li.level-1 > ul {
  border-top-color: #ededef;
  /* war #cccccc */
}

/* Mobil liegt der Baum im Akkordeon "Navigation". 2px Padding ergab
   Zeilen von 28px - zum Tippen zu knapp. Die ID-Variante schlaegt
   _site-menu.scss. */
@media (max-width: 991.9px) {
  .menu-standard a,
#content-left-category.menu-standard a {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-standard a:hover, .menu-standard a:active,
#content-left-category.menu-standard a:hover,
#content-left-category.menu-standard a:active {
    background-color: #f7f7f8;
  }

  /* die aktuelle Kategorie behaelt ihren Strich links, dort keine Rundung */
  .menu-standard li.current:not(.level-1):not(.level-2) > a {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

/* ============================================================
   gehoert inhaltlich zu: pages/_info-center.scss
   Casebau-Anfrage: Kacheln und Felder bleiben in der Content-Spalte,
   statt mit fixer Bildbreite ueber den Panelrand zu laufen.
   ============================================================ */
#info-center #case-request-container {
  min-width: 0;
  max-width: 100%;
}

#info-center #case-request-container ul.radio-option-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 1199.9px) {
  #info-center #case-request-container ul.radio-option-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.9px) {
  #info-center #case-request-container ul.radio-option-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 543.9px) {
  #info-center #case-request-container ul.radio-option-list {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

#info-center #case-request-container ul.radio-option-list li {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#info-center #case-request-container ul.radio-option-list img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

#info-center #case-request-container #case-material ul.radio-option-list {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  grid-auto-rows: 1fr;
}

#info-center #case-request-container #case-material ul.radio-option-list li {
  margin: 0;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#info-center #case-request-container #case-material ul.radio-option-list label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
}

#info-center #case-request-container #case-material ul.radio-option-list img {
  width: 100%;
  height: auto;
  -webkit-aspect-ratio: 1 / 1;
          aspect-ratio: 1 / 1;
  -o-object-fit: cover;
     object-fit: cover;
  padding-bottom: 0;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

#info-center #case-request-container #case-material ul.radio-option-list span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  margin: 0.5rem 0 0;
  min-height: 5.4em;
}

#info-center #case-request-container ul.image-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 767.9px) {
  #info-center #case-request-container ul.image-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

#info-center #case-request-container ul.image-grid li {
  min-width: 0;
}

#info-center #case-request-container ul.image-grid img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

#info-center #case-request-container .input-field,
#info-center #case-request-container .select-wrapper,
#info-center #case-request-container .input-text,
#info-center #case-request-container .input-select {
  max-width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* ============================================================
   gehoert inhaltlich zu: components/_form.scss
   Variante B: das Feld wird als Flaeche lesbar, das Label sitzt
   dauerhaft oben im Feld. Hoehe 3rem und alle Klassennamen bleiben.
   ============================================================ */
.kc-input-container {
  /* Checkbox mit Radius, Radio unveraendert rund */
}

.kc-input-container .input-field {
  /* Vorschlagstext sitzt mittig im leeren Feld.
           Bei Fokus oder Inhalt verschwindet der komplette Text, nicht nur die Klammer. */
}

.kc-input-container .input-field .input-text, .kc-input-container .input-field .input-select {
  border: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-radius: 10px;
  background-color: #f5f5f6;
  padding: 0 0.75rem;
  /* senkrecht mittig, linksbuendig */
  text-align: left;
  color: #373a3c;
  caret-color: #373a3c;
  -webkit-transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

.kc-input-container .input-field .input-text:-moz-focusring, .kc-input-container .input-field .input-select:-moz-focusring {
  color: #373a3c;
  text-shadow: none;
}

.kc-input-container .input-field .input-text:focus:not([readonly]), .kc-input-container .input-field .input-select:focus:not([readonly]) {
  border-color: #ff8c00;
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.15);
          box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.15);
}

.kc-input-container .input-field .input-text.invalid, .kc-input-container .input-field .input-text.invalid:not(:focus), .kc-input-container .input-field .input-select.invalid, .kc-input-container .input-field .input-select.invalid:not(:focus) {
  border-color: #c9433f;
  background-color: #ffffff;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.kc-input-container .input-field label,
.kc-input-container .input-field label.active,
.kc-input-container .input-field label.stay-active {
  left: 0.75rem;
  right: 0.75rem;
  top: 0;
  height: 2.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  font-size: 1rem;
  -webkit-transform: none;
          transform: none;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}

.kc-input-container .input-field label small {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  white-space: nowrap;
}

.kc-input-container .input-field.has-value > label,
.kc-input-container .input-field.has-value .input-group > label,
.kc-input-container .input-field:focus-within > label,
.kc-input-container .input-field:focus-within .input-group > label {
  display: none;
}

.kc-input-container .input-field .select-wrapper ~ label,
.kc-input-container .input-field .select-wrapper ~ label.active,
.kc-input-container .input-field .select-wrapper ~ label.stay-active,
.kc-input-container .input-field.has-value .select-wrapper ~ label,
.kc-input-container .input-field:focus-within .select-wrapper ~ label {
  display: block;
  left: 0;
  right: auto;
  top: 0;
  height: auto;
  font-size: 0.8rem;
  line-height: 1.25;
  -webkit-transform: translateY(-1.5rem);
          transform: translateY(-1.5rem);
  overflow: visible;
  white-space: nowrap;
}

.kc-input-container .input-field .select-wrapper .input-select {
  padding-right: 2.5rem;
  white-space: nowrap;
  cursor: pointer;
  border-color: #cccccc;
  background-color: #ffffff;
}

.kc-input-container .input-field .select-wrapper .input-select option {
  padding: 0;
}

.kc-input-container .input-field .select-wrapper:hover .input-select:not(:focus) {
  border-color: #adadad;
  /* dieselbe Hover-Sprache wie Buttons und Kacheln */
  -webkit-box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
          box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
}

.kc-input-container .input-field .select-wrapper:after {
  top: 50%;
  right: 0.85rem;
  margin-top: -0.22em;
  border-left-width: 0.45em;
  border-right-width: 0.45em;
  border-top-width: 0.45em;
  border-top-color: #656565;
}

.kc-input-container .input-field .input-group .input-group-addon {
  right: 0.5rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.kc-input-container .input-field textarea.input-text {
  background-color: #f5f5f6;
  padding: 0.75rem;
  line-height: 1.5;
  height: auto;
}

.kc-input-container .input-field input[type="file"].input-text {
  padding: 0.45rem 0.75rem;
  line-height: normal;
  cursor: pointer;
  overflow: hidden;
}

.kc-input-container .input-field input[type="file"].input-text::-webkit-file-upload-button,
.kc-input-container .input-field input[type="file"].input-text::file-selector-button {
  margin-right: 0.75rem;
  border: 0;
  border-radius: 5px;
  background-color: #f7f7f8;
  padding: 0.25rem 0.75rem;
  color: #373a3c;
  cursor: pointer;
}

.kc-input-container .input-field input[type="file"].input-text ~ label,
.kc-input-container .input-field input[type="file"].input-text ~ label.active,
.kc-input-container .input-field input[type="file"].input-text ~ label.stay-active,
.kc-input-container .input-field.has-value > input[type="file"].input-text ~ label,
.kc-input-container .input-field:focus-within > input[type="file"].input-text ~ label {
  display: block;
  left: 0;
  right: auto;
  top: 0;
  height: auto;
  font-size: 0.8rem;
  line-height: 1.25;
  -webkit-transform: translateY(-1.5rem);
          transform: translateY(-1.5rem);
  overflow: visible;
  white-space: nowrap;
}

.kc-input-container input[type="checkbox"] ~ label:before {
  border-radius: 5px;
}

.kc-input-container input[type="radio"] ~ label:before,
.kc-input-container input[type="radio"] ~ label:after {
  border-radius: 50%;
}

/* Bemerkungsfeld: Text und Label vertikal mittig, auch nach AutoResize. */
#checkout-verify .kc-input-container .input-field #remarks {
  display: block;
  padding-top: calc(0.5em - 1px);
  padding-bottom: calc(0.5em - 1px);
}

#checkout-verify .kc-input-container .input-field #remarks ~ label {
  height: 100%;
}

/* Native Selects ohne .select-wrapper (Sortierung, Filter-Dropdowns). */
select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpolygon fill='%23656565' points='0,0 12,0 6,8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.75em 0.5em;
  border: 1px solid #cccccc;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

select.form-control::-ms-expand {
  display: none;
}

select.form-control:hover:not(:focus) {
  border-color: #adadad;
  -webkit-box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
          box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
}

select.form-control:focus {
  border-color: #ff8c00;
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.15);
          box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.15);
  outline: none;
}

select.form-control option {
  padding: 0;
  background-color: #ffffff;
}

/* ============================================================
   gehoert inhaltlich zu: _site-header.scss und components/_search.scss
   ============================================================ */
#site-header {
  /* Warenkorb-Button als gefuellte Flaeche */
}
#site-header .site-header__top {
  background-color: #f7f7f8;
  /* war $gray-lighter #f0f0f0 */
  border-bottom-color: #e6e7e9;
  /* war #cccccc */
}
@media (min-width: 992px) {
  #site-header {
    /* Die Such-nav spannt den ganzen Header, das Feld steht in der Seitenmitte. */
    /* Suchfeld: 3rem hoch, max 640px.
       Der Selektor braucht beide IDs, sonst gewinnt components/_search.scss. */
    /* Trefferliste buendig unter dem Feld, ebenfalls in der Seitenmitte. */
    /* Logo-Ueberhang bekommt unten Radius und Elevation */
  }
  #site-header .site-header__bottom {
    padding: 0 1rem;
    margin-right: 0;
    /* war 1rem - Abstand kommt jetzt aus padding */
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    /* Such-nav liegt absolut, Logo und Warenkorb an den Raendern */
  }
  #site-header nav.middle {
    margin-left: 0;
    /* war 1rem - Abstand kommt jetzt aus padding */
    position: relative;
    z-index: 3;
    /* klickbar ueber der zentrierten Suche */
  }
  #site-header nav.right {
    position: relative;
    z-index: 3;
  }
  #site-header nav.left {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    z-index: 2;
    pointer-events: none;
    /* Logo und Warenkorb bleiben erreichbar */
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }
  #site-header nav.left > ul {
    width: 100%;
    max-width: 640px;
  }
  #site-header nav.left > ul > li.hidden-md-down {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  #site-header #standard-search-input-container {
    width: 100%;
    max-width: 640px;
    height: 3rem;
    margin: 0 auto;
    overflow: hidden;
    pointer-events: auto;
    border-color: #dcdde0;
    border-radius: 10px;
    background-color: #f5f5f6;
    -webkit-transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  }
  #site-header #standard-search-input-container:focus-within {
    border-color: #ff8c00;
    background-color: #ffffff;
    -webkit-box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.15);
            box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.15);
  }
  #site-header #standard-search-input-container .search-input {
    height: 100%;
    background-color: transparent;
  }
  #site-header #standard-search-input-container button {
    -ms-flex-item-align: stretch;
        align-self: stretch;
  }
  #site-header #standard-search-result-container {
    top: calc(50% + 1.5rem);
    max-width: 640px;
    left: 50%;
    right: auto;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    pointer-events: auto;
    border-color: #e6e7e9;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    -webkit-box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 10px 24px rgba(20, 22, 24, 0.1);
            box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 10px 24px rgba(20, 22, 24, 0.1);
  }
  #site-header a#logo {
    display: block;
    overflow: hidden;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    -webkit-box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 10px 24px rgba(20, 22, 24, 0.1);
            box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 10px 24px rgba(20, 22, 24, 0.1);
  }
}
#site-header #btn-toggle-cart {
  border-radius: 10px;
  -webkit-transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}
@media (min-width: 992px) {
  #site-header #btn-toggle-cart:hover, #site-header #btn-toggle-cart:focus {
    background-color: #f7f7f8;
  }
}
@media (max-width: 991.9px) {
  #site-header {
    /* Der Header klebt oben am Bildschirmrand, dort ist eine Rundung nur
       eine Kerbe. Unten bleibt sie und nimmt den Markenstrich mit. */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    /* Logo-Ueberhang wie am Desktop: unten Radius und Elevation.
       $border-radius statt -panel, weil das Logo hier nur 60px breit ist. */
    /* Icon-Buttons: Druckzustand als Flaeche, wie die Zeilen im Menue */
  }
  #site-header a#logo {
    display: block;
    overflow: hidden;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    -webkit-box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 10px 24px rgba(20, 22, 24, 0.1);
            box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 10px 24px rgba(20, 22, 24, 0.1);
  }
  #site-header .site-header__bottom ul a,
#site-header .site-header__bottom ul button {
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  }
  #site-header .site-header__bottom ul a:active,
#site-header .site-header__bottom ul button:active {
    background-color: rgba(255, 255, 255, 0.1);
  }
}

/* Servicezeile und Navigationsbalken auf dieselbe Innenkante wie die Panels.
   Nur ab lg: unter lg ist #site-navigation das Offside-Menue, das seine
   Innenabstaende selbst setzt (Abschnitt "Offside-Menue mobil"). */
@media (min-width: 992px) {
  .site-header__top .site-container,
#site-navigation .nav.site-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ============================================================
   gehoert inhaltlich zu: _site-navigation.scss
   ============================================================ */
/* Kategoriefarben. Im Bestand standen sie als border-color am Link, jetzt
   steuern sie Hover-Balken und Schrift der Top-Kategorie.
   "% SALE" bekommt keinen Eintrag: die Kategorie-ID steht erst nach dem Anlegen
   in der Kategorieverwaltung fest, der Standard unten ist bereits weiss. */
@media (min-width: 992px) {
  #site-navigation {
    background-color: #373a3c;
    /* war #656565 */
  }
  #site-navigation .nav__level--1:after {
    content: '';
    position: absolute;
    left: 115px;
    right: -1rem;
    bottom: 0;
    height: 5px;
    background-color: #ffffff;
    pointer-events: none;
    -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    /* waechst wie bisher aus der Mitte nach aussen */
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition: -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.5s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #site-navigation .nav__level--1:has(> .nav__item--active):after {
    -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
            transform: scaleX(1);
  }
  #site-navigation .nav__level--1:has(> .cat-1255.nav__item--active):after {
    background-color: #ff8c00;
  }
  #site-navigation .nav__level--1:has(> .cat-961.nav__item--active):after {
    background-color: #ffff00;
  }
  #site-navigation .nav__level--1:has(> .cat-958.nav__item--active):after {
    background-color: #80dd55;
  }
  #site-navigation .nav__level--1:has(> .cat-1260.nav__item--active):after {
    background-color: #3aaaff;
  }
  #site-navigation .nav__level--1 > .nav__item {
    /* fuenf Top-Kategorien statt vier */
    -webkit-box-flex: 1;
        -ms-flex: 1 1 20%;
            flex: 1 1 20%;
    max-width: 20%;
    position: static;
  }
  #site-navigation .nav__level--1 > .nav__item > .nav__title {
    position: relative;
    max-width: calc(100vw / 5);
    color: #ffffff;
    border-bottom: 5px solid transparent;
    /* Schriftfarbe zieht mit dem Strich mit statt umzuspringen.
                       Kein transform am .nav__item - das wuerde das Megamenue
                       auf eine Spalte stauchen. */
    -webkit-transition: color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  }
  #site-navigation .nav__level--1 > .nav__item > .nav__title:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 5px;
    background-color: #ffffff;
    -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition: -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }
  #site-navigation .nav__level--1 > .nav__item.cat-1255 > .nav__title:before {
    background-color: #ff8c00;
  }
  #site-navigation .nav__level--1 > .nav__item.cat-1255:hover > .nav__title,
  #site-navigation .nav__level--1 > .nav__item.cat-1255.nav__item--active > .nav__title {
    color: #ff8c00;
  }
  #site-navigation .nav__level--1 > .nav__item.cat-961 > .nav__title:before {
    background-color: #ffff00;
  }
  #site-navigation .nav__level--1 > .nav__item.cat-961:hover > .nav__title,
  #site-navigation .nav__level--1 > .nav__item.cat-961.nav__item--active > .nav__title {
    color: #ffff00;
  }
  #site-navigation .nav__level--1 > .nav__item.cat-958 > .nav__title:before {
    background-color: #80dd55;
  }
  #site-navigation .nav__level--1 > .nav__item.cat-958:hover > .nav__title,
  #site-navigation .nav__level--1 > .nav__item.cat-958.nav__item--active > .nav__title {
    color: #80dd55;
  }
  #site-navigation .nav__level--1 > .nav__item.cat-1260 > .nav__title:before {
    background-color: #3aaaff;
  }
  #site-navigation .nav__level--1 > .nav__item.cat-1260:hover > .nav__title,
  #site-navigation .nav__level--1 > .nav__item.cat-1260.nav__item--active > .nav__title {
    color: #3aaaff;
  }
  #site-navigation .nav__level--1 > .nav__item:hover:not(.nav__item--active) > .nav__title:before {
    -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
            transform: scaleX(1);
  }
  #site-navigation .nav__level--1 > .nav__item:hover > .nav__title,
  #site-navigation .nav__level--1 > .nav__item--active > .nav__title {
    background-color: transparent;
  }
  #site-navigation .nav__level--1 > .nav__item--active {
    background-color: transparent;
  }
}

/* ============================================================
   gehoert inhaltlich zu: _site-navigation.scss (aufgeklapptes Megamenue)
   Das Menue schwebt als Karte unter der Leiste statt buendig daran zu
   haengen: Rundung und Elevation wie ein Dialog. Links eine Seitenleiste,
   in der die aktive Zeile als weisse Kachel heraussteht, rechts Pillen
   statt Unterstrich. Markup, Klassen und navigation.js bleiben unveraendert.
   ============================================================ */
/* Schrift auf dem Akzent: Orange, Gelb, Hellgruen und Hellblau tragen
   dunkle Schrift, Weiss waere dort nicht lesbar. */
@-webkit-keyframes nav-mega-in {
  from {
    opacity: 0;
    -webkit-transform: translateY(-0.5rem);
            transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes nav-mega-in {
  from {
    opacity: 0;
    -webkit-transform: translateY(-0.5rem);
            transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@-webkit-keyframes nav-level-in {
  from {
    opacity: 0;
    -webkit-transform: translateX(-0.375rem);
            transform: translateX(-0.375rem);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes nav-level-in {
  from {
    opacity: 0;
    -webkit-transform: translateX(-0.375rem);
            transform: translateX(-0.375rem);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@media (min-width: 992px) {
  #site-navigation {
    /* Akzent des Megamenues. Folgt der Kategoriefarbe der geoeffneten
       Top-Kategorie, damit Karte und 5px-Balken zusammengehoeren. Die
       Schrift bleibt $text - Farbe kommt nur als Flaeche. */
    --nav-accent: #ff8c00;
    --nav-accent-soft: rgba(255, 140, 0, 0.16);
    /* Luft zwischen Leiste und Karte. Als Padding, nicht als top-Versatz:
       so liegt der Streifen noch in .nav__level--1, und ein Klick darauf
       schliesst das Menue nicht. */
    /* Selektor ueber .nav__item, sonst gewinnt der Bestand mit
       .nav__item--active > .nav__level { display: block } */
    /* Ebene 3 als Kachelraster wie die Unterkategorien auf der
       Kategorieseite (#category-children). Mobil bleibt die Textliste. */
    /* Ebene 3 blendet beim Wechsel der Zeile weich ein */
  }
  #site-navigation .nav__level--1 > .cat-1255 {
    --nav-accent: #ff8c00;
    --nav-accent-soft: rgba(255, 140, 0, 0.18);
  }
  #site-navigation .nav__level--1 > .cat-961 {
    --nav-accent: #ffff00;
    --nav-accent-soft: rgba(255, 255, 0, 0.18);
  }
  #site-navigation .nav__level--1 > .cat-958 {
    --nav-accent: #80dd55;
    --nav-accent-soft: rgba(128, 221, 85, 0.18);
  }
  #site-navigation .nav__level--1 > .cat-1260 {
    --nav-accent: #3aaaff;
    --nav-accent-soft: rgba(58, 170, 255, 0.18);
  }
  #site-navigation .nav__level--1 > .nav__item > div.nav__level {
    top: 100%;
    /* war calc(100% + 1px) */
    padding-top: 0.75rem;
  }
  #site-navigation .nav__level--1 > .nav__item > div.nav__level > .nav__item {
    overflow: hidden;
    /* Seitenleiste folgt der Rundung */
    background-color: #ffffff;
    border-radius: 16px;
    -webkit-box-shadow: 0 10px 20px rgba(20, 22, 24, 0.1), 0 30px 60px rgba(20, 22, 24, 0.18);
            box-shadow: 0 10px 20px rgba(20, 22, 24, 0.1), 0 30px 60px rgba(20, 22, 24, 0.18);
    /* war 2px 4px 8px -2px #2c3744 */
    -webkit-animation: nav-mega-in 0.28s cubic-bezier(0.16, 0.68, 0.43, 0.99);
            animation: nav-mega-in 0.28s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  }
  #site-navigation .nav__level--2 {
    /* Seitenleiste ohne eigenes Element: die linken 30 % entsprechen
       der ersten Rasterspalte, rechts steht Ebene 3 auf Weiss */
    background-color: #ffffff;
    /* war #f1f2f4 */
    background-image: -webkit-gradient(linear, left top, right top, color-stop(30%, #f7f7f8), color-stop(30%, transparent));
    background-image: linear-gradient(to right, #f7f7f8 30%, transparent 30%);
    padding: 0.75rem 0;
    /* Raster statt absolut positionierter Ebene 3, damit die Karte mit
       den Kacheln waechst. Die <li> sind display: contents, so werden
       ihre Links (Spalte 1) und die aktive Ebene 3 (Spalte 2) direkt
       zu Rasterzellen. Ebene 3 spannt alle Zeilen; die auto-Zeilen
       richten sich nur nach den Links, weil ein Element, das eine
       fr-Zeile kreuzt, bei ihrer Groesse nicht mitzaehlt. Die fr-Zeile
       am Ende nimmt auf, was die Kacheln hoeher sind als die Liste.
       40 Zeilen reichen fuer jede Ebene 2, leere Zeilen sind 0 hoch.
       Das Raster selbst steht in der Regel darunter. */
    /* Aktive Zeile: weisse Kachel auf der Seitenleiste, der Pfeil
       wird zum Punkt in der Akzentfarbe. Der Bestand zeichnet hier
       eine 2px-Outline und ein gedrehtes Quadrat als Pfeil. */
    /* "alles in ..." als Pille am Ende der Seitenleiste statt
       unterstrichenem Link. Der Bestand setzt Rahmen, Flaeche,
       Padding und Margin mit !important. */
  }
  #site-navigation .nav__level--2 > .nav__item {
    display: contents;
    /* war 30 % breiter Block mit margin 1rem 0 */
  }
  #site-navigation .nav__level--2 > .nav__item > .nav__title {
    grid-column: 1;
    align-self: start;
    margin: 0.125rem 0.75rem;
    /* Grid faltet keine Margins, 2x .125 = .25rem Abstand */
    position: relative;
    padding: 0.5rem 0.625rem 0.5rem 0.5rem;
    color: #373a3c;
    background-color: transparent;
    /* war weisse Kachel mit 1px outline */
    border-radius: 10px;
    outline: none;
    white-space: normal;
    /* lange Namen brechen um statt auf "..." zu enden */
    -webkit-transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  }
  #site-navigation .nav__level--2 > .nav__item > .nav__title > img {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin: -0.125rem 0.25rem -0.125rem 0;
    -o-object-fit: contain;
       object-fit: contain;
    background-color: #ffffff;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 0 1px #ededef;
            box-shadow: 0 0 0 1px #ededef;
  }
  #site-navigation .nav__level--2 > .nav__item > .nav__title > span {
    line-height: 1.25;
  }
  #site-navigation .nav__level--2 > .nav__item > .nav__title > .fa-chevron-right {
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 0.6875rem;
    text-align: center;
    color: #777777;
    border-radius: 50%;
    -webkit-transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  }
  #site-navigation .nav__level--2 > .nav__item > .nav__title:hover {
    color: #373a3c;
    /* war $brand-primary-dark */
    background-color: #ffffff;
    -webkit-box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
            box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
  }
  #site-navigation .nav__level--2 > .nav__item > .nav__title:hover > .fa-chevron-right {
    -webkit-transform: translateX(2px);
            transform: translateX(2px);
  }
  #site-navigation .nav__level--2 > .nav__item > .nav__title:focus-visible {
    -webkit-box-shadow: 0 0 0 2px #373a3c;
            box-shadow: 0 0 0 2px #373a3c;
  }
  #site-navigation .nav__level--2 > .nav__item--active > .nav__title,
#site-navigation .nav__level--2 > .nav__item--active > .nav__title:hover {
    color: #373a3c;
    background-color: #ffffff;
    outline: none;
    -webkit-box-shadow: 0 1px 3px rgba(20, 22, 24, 0.06), 0 4px 12px rgba(20, 22, 24, 0.07);
            box-shadow: 0 1px 3px rgba(20, 22, 24, 0.06), 0 4px 12px rgba(20, 22, 24, 0.07);
  }
  #site-navigation .nav__level--2 > .nav__item--active > .nav__title > .fa-chevron-right,
#site-navigation .nav__level--2 > .nav__item--active > .nav__title:hover > .fa-chevron-right {
    color: #373a3c;
    background-color: var(--nav-accent);
    -webkit-transform: none;
            transform: none;
  }
  #site-navigation .nav__level--2 > .nav__item--active.nav__item--with-children > .nav__title:before {
    content: none;
  }
  #site-navigation .nav__level--2 > .nav__item.last {
    font-size: 1em;
    /* war 1.25em, vererbt trotz display: contents */
  }
  #site-navigation .nav__level--2 > .nav__item.last > .nav__title {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 0.625rem 0.75rem 0.125rem !important;
    /* war 1rem 0 */
    padding: 0.625rem 1rem !important;
    text-decoration: none;
    background-color: #ffffff !important;
    border: 1px solid #e6e7e9;
    border-radius: 10rem;
    -webkit-box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
            box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
  }
  #site-navigation .nav__level--2 > .nav__item.last > .nav__title:hover {
    border-color: transparent;
    -webkit-box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 10px 24px rgba(20, 22, 24, 0.1);
            box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 10px 24px rgba(20, 22, 24, 0.1);
  }
  #site-navigation .nav__item > .nav__level--2 {
    display: grid;
    /* war block */
    grid-template-columns: 30% 70%;
    grid-template-rows: repeat(40, auto) 1fr;
  }
  #site-navigation .nav__level--2 > .nav__item--active > .nav__level--3 {
    grid-column: 2;
    grid-row: 1/-1;
    position: static;
    /* war absolute neben der Liste */
    margin-left: 0;
    /* war 30% */
    width: auto;
    /* war 70% */
    height: auto;
    /* war 100% der Liste */
    display: grid;
    /* war flex, Spalten von oben nach unten */
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.75rem;
    -ms-flex-line-pack: start;
        align-content: start;
  }
  #site-navigation .nav__level--3 {
    padding: 1rem 1.25rem 1.25rem;
    /* war .75rem */
    /* senkrechte Linie in Markenfarbe - Seitenleiste und Flaeche trennen jetzt */
    /* "alles in ..." bleibt Chip und steht allein ueber dem Raster */
  }
  #site-navigation .nav__level--3:before {
    content: none;
  }
  #site-navigation .nav__level--3 > .nav__item {
    padding: 0;
    /* war 0 1.5rem */
    /* Kachel: Bild oben, Name darunter */
  }
  #site-navigation .nav__level--3 > .nav__item > .nav__title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* war inline-block */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100%;
    padding: 0.75rem 0.75rem 0.875rem;
    /* war .5rem .25rem */
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #ededef;
    border-radius: 14px;
    -webkit-box-shadow: 0 1px 3px rgba(20, 22, 24, 0.06), 0 4px 12px rgba(20, 22, 24, 0.07);
            box-shadow: 0 1px 3px rgba(20, 22, 24, 0.06), 0 4px 12px rgba(20, 22, 24, 0.07);
    -webkit-transition: border-color 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: border-color 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    /* Das Bild ist im Markup fuer Desktop als .hidden-lg-up gedacht
       gewesen, deshalb hier ausdruecklich sichtbar. */
    /* Hover-Unterstrich - die Kachel hebt sich stattdessen */
  }
  #site-navigation .nav__level--3 > .nav__item > .nav__title > img {
    display: block !important;
    width: 100%;
    max-width: 7rem;
    height: auto;
    aspect-ratio: 1/1;
    margin: 0 0 0.625rem;
    /* war -.25rem .5rem -.25rem 0 */
    padding: 0;
    -o-object-fit: contain;
       object-fit: contain;
    border-radius: 10px;
  }
  #site-navigation .nav__level--3 > .nav__item > .nav__title > span {
    font-size: 0.875rem;
    line-height: 1.3;
  }
  #site-navigation .nav__level--3 > .nav__item > .nav__title:hover {
    color: #373a3c;
    /* war $brand-primary-dark */
    border-color: var(--nav-accent);
    -webkit-box-shadow: 0 3px 8px rgba(20, 22, 24, 0.09), 0 12px 28px rgba(20, 22, 24, 0.13);
            box-shadow: 0 3px 8px rgba(20, 22, 24, 0.09), 0 12px 28px rgba(20, 22, 24, 0.13);
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
  }
  #site-navigation .nav__level--3 > .nav__item > .nav__title:focus-visible {
    outline: none;
    -webkit-box-shadow: 0 0 0 2px #373a3c;
            box-shadow: 0 0 0 2px #373a3c;
  }
  #site-navigation .nav__level--3 > .nav__item > .nav__title span:after {
    content: none;
  }
  #site-navigation .nav__level--3 > .nav__item:first-child {
    grid-column: 1/-1;
    justify-self: start;
  }
  #site-navigation .nav__level--3 > .nav__item {
    /* "alles in ..." als Chip in der Akzentfarbe */
  }
  #site-navigation .nav__level--3 > .nav__item > .nav__title--headline {
    display: inline-block;
    height: auto;
    margin-bottom: 0.25rem;
    text-align: left;
    border: none;
    -webkit-box-shadow: none;
            box-shadow: none;
    padding: 0.5rem 0.875rem 0.5rem 1rem;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    background-color: var(--nav-accent-soft);
    border-radius: 10rem;
    -webkit-transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    /* Pfeil aus dem Icon-Font, derselbe wie .fa-chevron-right */
  }
  #site-navigation .nav__level--3 > .nav__item > .nav__title--headline:after {
    content: "";
    display: inline-block;
    margin-left: 0.5rem;
    font-family: "font-awesome";
    font-size: 0.625rem;
    font-weight: normal;
    -webkit-transition: -webkit-transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: -webkit-transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  }
  #site-navigation .nav__level--3 > .nav__item > .nav__title--headline:hover {
    color: #373a3c;
    background-color: var(--nav-accent);
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transform: none;
            transform: none;
  }
  #site-navigation .nav__level--3 > .nav__item > .nav__title--headline:hover:after {
    -webkit-transform: translateX(2px);
            transform: translateX(2px);
  }
  #site-navigation .nav__item--active > .nav__level--3 {
    -webkit-animation: nav-level-in 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
            animation: nav-level-in 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  }
}
@media (prefers-reduced-motion: reduce) {
  #site-navigation .nav__level--1 > .nav__item > div.nav__level > .nav__item,
#site-navigation .nav__item--active > .nav__level--3 {
    -webkit-animation: none;
            animation: none;
  }
}

/* ============================================================
   gehoert inhaltlich zu: _site-navigation.scss und
   components/_offside.scss (Offside-Menue mobil)
   Dieselbe Sprache wie das Megamenue: Zeilen als gerundete Flaechen
   ohne Trennlinien, Bilder in weissen Kacheln, Pfeile in runden
   Knoepfen, die geoeffnete Kategorie in ihrer Akzentfarbe.
   Markup, Klassen und navigation.js bleiben unveraendert.
   ============================================================ */
@media (max-width: 991.9px) {
  /* Das Panel schiebt sich als Blatt ueber die Seite. Kein Schatten:
     im geschlossenen Zustand liegt es direkt am linken Rand, der
     Schatten wuerde in die Seite ragen. Das Overlay trennt ohnehin. */
  .offside {
    background-color: #ffffff;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
  }

  #site-navigation {
    /* Akzent wie im Megamenue: Markenfarbe, fuer die vier Hauptkategorien
       deren Farbe. % SALE hat keinen Eintrag und bleibt bei der Markenfarbe. */
    --nav-accent: #ff8c00;
    --nav-accent-soft: rgba(255, 140, 0, 0.16);
    /* Kopf "Unsere Kategorien": dieselbe dunkle Flaeche mit Markenstrich
       wie der Header, statt $gray-medium-light (#777) */
    /* Schliessen als runder Knopf, senkrecht mittig im Kopf */
    /* Zweiter Kopf "Informationen": Abschnittsbeschriftung statt Balken */
    /* Zeilen: gerundete Flaeche beim Tippen statt Linie darunter */
    /* Hauptkategorien: der Pfeil traegt die Kategoriefarbe als Flaeche.
       Auf der hellen Flaeche bleibt die Schrift $text. */
    /* Geoeffnete Zeile (Brotkrumen nach oben): Akzentflaeche, der
       Zurueck-Pfeil sitzt im runden Feld in der Akzentfarbe */
    /* Die naechste Ebene blendet beim Aufklappen weich ein */
    /* "alles in ..." am Ende der Ebene 2 als Pille wie im Megamenue */
    /* "alles in ..." am Ende der Ebene 3 als Chip in der Akzentfarbe */
    /* Sprachauswahl klappt als Flaeche unter ihrer Zeile auf */
  }
  #site-navigation .nav__level--1 > .cat-1255 {
    --nav-accent: #ff8c00;
    --nav-accent-soft: rgba(255, 140, 0, 0.18);
  }
  #site-navigation .nav__level--1 > .cat-961 {
    --nav-accent: #ffff00;
    --nav-accent-soft: rgba(255, 255, 0, 0.18);
  }
  #site-navigation .nav__level--1 > .cat-958 {
    --nav-accent: #80dd55;
    --nav-accent-soft: rgba(128, 221, 85, 0.18);
  }
  #site-navigation .nav__level--1 > .cat-1260 {
    --nav-accent: #3aaaff;
    --nav-accent-soft: rgba(58, 170, 255, 0.18);
  }
  #site-navigation h6 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: 3.5rem;
    padding: 0.75rem 3.75rem 0.75rem 1.25rem;
    /* rechts Platz fuer den Knopf */
    color: #ffffff;
    background-color: #373a3c;
    border-bottom: 2px solid #db7800;
  }
  #site-navigation h6 .btn-toggle-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    top: 50%;
    right: 0.75rem;
    width: 2.5rem;
    height: 2.5rem;
    margin-top: -1.25rem;
    /* war -.75rem */
    padding: 0;
    /* war .5rem */
    font-size: 1rem;
    /* war 1.25em */
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  }
  #site-navigation h6 .btn-toggle-menu:hover, #site-navigation h6 .btn-toggle-menu:active {
    background-color: rgba(255, 255, 255, 0.2);
  }
  #site-navigation .nav.hidden-lg-up > h6 {
    min-height: 0;
    margin-top: 0.5rem !important;
    /* schlaegt die Utility .m-a-0 */
    padding: 1rem 1.25rem 0.25rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #656565;
    /* 5.9:1 auf Weiss */
    background-color: transparent;
    border-top: 1px solid #ededef;
    border-bottom: none;
  }
  #site-navigation .nav > .nav__level {
    padding: 0.125rem 0.5rem;
  }
  #site-navigation .nav > .nav__level--1 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  #site-navigation .nav.hidden-lg-up {
    padding-bottom: 1rem;
  }
  #site-navigation .nav__item .nav__title {
    margin: 0.125rem 0;
    padding: 0.75rem;
    /* war .75rem, aktive Ebene 2rem */
    border-bottom: none;
    /* war 1px solid #cccccc */
    border-radius: 10px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    /* Icons rechts (Pfeil, Mail, Telefon, Abmelden) auf einer Spalte */
    /* Pfeil im runden Feld wie in der Seitenleiste des Megamenues */
    /* der Zurueck-Pfeil erscheint nur an der geoeffneten Zeile */
    /* Bilder wie in der Seitenleiste des Megamenues */
  }
  #site-navigation .nav__item .nav__title:active {
    background-color: #f7f7f8;
  }
  #site-navigation .nav__item .nav__title:focus-visible {
    -webkit-box-shadow: inset 0 0 0 2px #373a3c;
            box-shadow: inset 0 0 0 2px #373a3c;
  }
  #site-navigation .nav__item .nav__title span {
    line-height: 1.3;
  }
  #site-navigation .nav__item .nav__title small {
    color: #656565;
  }
  #site-navigation .nav__item .nav__title > i {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 1.5rem;
    margin-left: 0.5rem;
    padding-left: 0;
    /* war 5px */
    text-align: center;
    color: #656565;
  }
  #site-navigation .nav__item .nav__title > i.fa-chevron-right {
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 0.6875rem;
    color: #777777;
    border-radius: 50%;
  }
  #site-navigation .nav__item .nav__title > i.fa-chevron-left {
    display: none;
    /* war absolut links mit opacity 0 */
  }
  #site-navigation .nav__item .nav__title img {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin: -0.25rem 0.75rem -0.25rem 0;
    /* war -.25rem 1rem -.25rem 0 */
    padding: 0;
    /* war .25rem */
    -o-object-fit: contain;
       object-fit: contain;
    background-color: #ffffff;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 0 1px #ededef;
            box-shadow: 0 0 0 1px #ededef;
  }
}
@media (max-width: 991.9px) and (hover: hover) {
  #site-navigation .nav__item .nav__title:hover {
    background-color: #f7f7f8;
  }
}
@media (max-width: 991.9px) {
  #site-navigation .nav__level--1 > .nav__item > .nav__title > i.fa-chevron-right {
    color: #373a3c;
    background-color: var(--nav-accent-soft);
  }
}
@media (max-width: 991.9px) {
  #site-navigation .nav__item--active > .nav__title,
#site-navigation .nav__item--active > .nav__title:hover {
    padding-left: 0.75rem;
    /* war 2rem fuer den absoluten Pfeil */
    font-weight: 700;
    background-color: var(--nav-accent-soft);
  }
  #site-navigation .nav__item--active > .nav__title > i.fa-chevron-left,
#site-navigation .nav__item--active > .nav__title:hover > i.fa-chevron-left {
    display: inline-block;
    position: static;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    margin: 0 0.75rem 0 0;
    font-size: 0.6875rem;
    text-align: center;
    color: #373a3c;
    background-color: var(--nav-accent);
    border-radius: 50%;
    opacity: 1;
  }
}
@media (max-width: 991.9px) {
  #site-navigation .nav__item--active > .nav__level {
    -webkit-animation: nav-level-in 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
            animation: nav-level-in 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  }
}
@media (max-width: 991.9px) {
  #site-navigation .nav__level--2 > .nav__item.last > .nav__title {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 0.75rem 0.25rem 0.25rem;
    padding: 0.625rem 1rem;
    background-color: #ffffff;
    border: 1px solid #e6e7e9;
    border-radius: 10rem;
    -webkit-box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
            box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
  }
  #site-navigation .nav__level--2 > .nav__item.last > .nav__title > i {
    display: none;
    /* unsichtbarer Platzhalter-Pfeil */
  }
}
@media (max-width: 991.9px) {
  #site-navigation .nav__level--3 > .nav__item:first-child > .nav__title--headline {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin: 0.75rem 0.25rem 0.25rem;
    padding: 0.5rem 0.875rem 0.5rem 1rem;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background-color: var(--nav-accent-soft);
    border-radius: 10rem;
    /* Pfeil aus dem Icon-Font, derselbe wie .fa-chevron-right */
  }
  #site-navigation .nav__level--3 > .nav__item:first-child > .nav__title--headline span {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
  }
  #site-navigation .nav__level--3 > .nav__item:first-child > .nav__title--headline:after {
    content: "";
    display: inline-block;
    margin-left: 0.5rem;
    font-family: "font-awesome";
    font-size: 0.625rem;
    font-weight: normal;
  }
  #site-navigation .nav__level--3 > .nav__item:first-child > .nav__title--headline:active {
    color: #373a3c;
    background-color: var(--nav-accent);
  }
}
@media (max-width: 991.9px) {
  #site-navigation .change-language-container {
    margin: 0.125rem 0 0.5rem;
    background-color: #f7f7f8;
    /* war $gray-lighter */
    border-bottom: none;
    /* war 1px solid #cccccc */
    border-radius: 10px;
  }
  #site-navigation .change-language-container ul li a {
    border-radius: 10px;
  }
  #site-navigation .change-language-container ul li a:hover {
    background-color: #ffffff;
  }
}
@media (prefers-reduced-motion: reduce) {
  #site-navigation .nav__item--active > .nav__level {
    -webkit-animation: none;
            animation: none;
  }
}

/* ============================================================
   gehoert inhaltlich zu: pages/_product-detail.scss
   ============================================================ */
#product > h1 {
  width: auto;
  max-width: none;
}

#product > h1:after {
  content: none;
}

#product > h1 > span:last-child {
  border-bottom: 3px solid #ff8c00;
  padding-bottom: 0.15rem;
}

@media (max-width: 767.9px) {
  #product > h1 > span:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

#product #product-information {
  overflow: visible;
  /* Finanzierungshinweis behält das Markenorange. Die Utility
           .text-orange ist sonst abgedunkelt, damit sie WCAG 4.5:1 schafft. */
}

/* Die beiden Kaesten rechts vom Bild stehen eine Stufe ueber den
   Listen-Kacheln, aber unter dem Dialog. Der Rahmen wird weicher, weil der
   Schatten die Abgrenzung schon traegt. */
#product #product-information #product-details > div {
  background-color: #f7f7f8;
  /* war $gray-lighter */
  border: 1px solid #ededef;
  /* war #e6e7e9 */
  border-radius: 14px;
  position: relative;
  z-index: 1;
  -webkit-box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 14px 28px rgba(20, 22, 24, 0.11), 0 32px 56px rgba(20, 22, 24, 0.09);
          box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 14px 28px rgba(20, 22, 24, 0.11), 0 32px 56px rgba(20, 22, 24, 0.09);
  -webkit-transition: -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

#product #product-information #product-details > div:hover {
  -webkit-box-shadow: 0 4px 10px rgba(20, 22, 24, 0.09), 0 18px 36px rgba(20, 22, 24, 0.14), 0 40px 68px rgba(20, 22, 24, 0.11);
          box-shadow: 0 4px 10px rgba(20, 22, 24, 0.09), 0 18px 36px rgba(20, 22, 24, 0.14), 0 40px 68px rgba(20, 22, 24, 0.11);
}

#product #product-information #product-details #product-condition-related {
  border-top-color: #e6e7e9;
  border-bottom-color: #e6e7e9;
}

#product #product-information #product-details #add-to-cart__container .add-to-cart__quantity {
  border: 1px solid #dcdde0;
  border-radius: 10px;
}

#product #product-information .open-accordion .text-orange {
  color: #ff8c00;
}

#product #product-information #product-features .v-block.bg {
  border-color: #f7f7f8;
  border-radius: 14px;
}

#product #product-information #product-features .feature {
  border-radius: 10px;
}

@media (min-width: 1200px) {
  #product #product-information #product-features .feature {
    background-color: #f7f7f8;
  }
}

#product #product-information #product-features .feature.product-rating {
  border-color: #f7f7f8;
}

#product #product-information #product-tier-price li {
  border-color: #e6e7e9;
  border-radius: 10px;
}

#product #product-information #product-image .royalSlider img,
#product #product-information #product-image .rsImg {
  border-radius: 10px;
}

/* Galerie-Thumbs ziehen mit, aber eine Stufe kleiner: bei 10px waere
           ein 76px-Thumb optisch rund. Nur CSS - Slider-JS bleibt unberuehrt. */
#product #product-information #product-image .rsThumb img {
  border-radius: 5px;
}

/* Vollbild-Knopf: runder weisser Knopf wie die Karussell-Pfeile statt
   halbtransparentem grauem Quadrat. Die Basis liegt in mhk-libs.css. */
#product #product-information #product-image .rsFullscreenIcn:after {
  width: 2.25rem;
  height: 2.25rem;
  margin: 0.25rem;
  /* war 8px, im Vollbild 12px 0 */
  font-size: 1rem;
  /* war 1.25em */
  color: #373a3c;
  background-color: #ffffff;
  border-radius: 50%;
  -webkit-box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
          box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
  opacity: 1;
  /* war .7 */
  -webkit-transition: color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

#product #product-information #product-image .rsFullscreenBtn:hover .rsFullscreenIcn:after {
  color: #ff8c00;
  -webkit-box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 10px 24px rgba(20, 22, 24, 0.1);
          box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 10px 24px rgba(20, 22, 24, 0.1);
}

#product #product-equipment .table-row {
  border-radius: 14px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

#product #product-equipment .product-equipment-image {
  border-radius: 14px;
  overflow: hidden;
}

#product #product-equipment .product-equipment-image img {
  border-radius: 14px;
}

#product #product-equipment .product-equipment-checkbox label::before {
  border-color: #e6e7e9;
  border-radius: 10px;
}

#product #product-equipment .product-equipment-quantity .btn {
  border-radius: 10px;
  background-color: #f7f7f8;
}

#product #product-equipment .product-equipment-quantity input[type="number"] {
  border-radius: 10px;
}

#product #product-equipment #product-equipment-footer {
  border-radius: 14px;
}

/* ============================================================
   gehoert inhaltlich zu: pages/_home.scss
   ============================================================ */
#landing-page {
  /* Ueberblendung: das alte Bild bleibt unter dem neuen stehen, bis dieses
     eingeblendet ist; !important gegen den Reduced-Motion-Reset
     (Begruendung und $carousel-dissolve in pages/_home.scss) */
}

#landing-page #carousel,
#landing-page #spots .spot-1 > a,
#landing-page #spots .spot-2 > a,
#landing-page #spots img {
  border-radius: 10px;
  overflow: hidden;
}

#landing-page #carousel .owl-stage {
  display: grid;
  -webkit-transform: none !important;
          transform: none !important;
  width: 100% !important;
  -webkit-transition: none !important;
          transition: none !important;
}

#landing-page #carousel .owl-item {
  grid-area: 1 / 1;
  width: 100% !important;
  margin-right: 0 !important;
  float: none;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-transition: opacity 0s linear 1s !important;
          transition: opacity 0s linear 1s !important;
}

#landing-page #carousel .owl-item.active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
  -webkit-transition: opacity 1s ease-in-out !important;
          transition: opacity 1s ease-in-out !important;
}

#landing-page #about h2 {
  border-bottom-color: #ededef;
}

#landing-page #about {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid #ededef;
}

@media (max-width: 767.9px) {
  #landing-page #about {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
  }
}

/* ============================================================
   gehoert inhaltlich zu: pages/_checkout.scss
   ============================================================ */
#site-wrap.checkout .rb-wrapper {
  border-color: #e6e7e9;
  border-radius: 10px;
}

#site-wrap.checkout .rb-wrapper.active {
  border-color: #ff8c00;
}

#checkout-shipping #shipping-table .store-pickup .rb-wrapper.active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#checkout-shipping #shipping-table .store-pickup .rb-wrapper.active ~ #store-pickup-wrapper {
  border-color: #ff8c00;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding-top: 2rem;
}

/* PayPal Express: Pille statt Rechteck, damit der Button sich
   vom eckigen Checkout-CTA abhebt. 1.5rem ist die halbe 48px-Hoehe. */
#paypal-express-container,
#PaypalButton,
#PaypalButton > div,
#btn-paypal-checkout {
  border-radius: 1.5rem;
  overflow: hidden;
}

#PaypalButton > div::before {
  border-radius: 1.5rem;
}

#btn-paypal-checkout,
#PaypalButton > div {
  -webkit-box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
          box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
}

/* ============================================================
   gehoert inhaltlich zu: pages/_bundletool.scss
   Set-Konfigurator (Views/Bundle): Kategorie-Kacheln, Artikelraster
   und die Set-Uebersicht - ab lg als mitlaufende Spalte, darunter als
   Leiste am unteren Rand, die sich zum Blatt oeffnet. Loest die alte
   Gestaltung mit ddSlick und pgwModal (legacy/bundletool.css) ab.
   ============================================================ */
/* Leiste mobil, fuer den Abstand unter der Seite */
/* "im Set" ist Gruen, unabhaengig von der Shopfarbe */
/* Warenkorb-Orange #ff8c00, in allen drei Shops */
/* Tastaturfokus sichtbar, Mausklick ohne Ring */
.bt {
  /* Schrittueberschriften 1-3: ohne die h2-Linie, mit Nummernkreis */
}
.bt .bt-intro {
  margin-bottom: 1.5rem;
}
.bt .bt-lead {
  max-width: 48rem;
  margin: 0.75rem 0 0;
  color: #55595c;
}
.bt .bt-step + .bt-step {
  margin-top: 1.75rem;
}
.bt .bt-step-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.625rem;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}
.bt .bt-step-number {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: #373a3c;
  color: #ffffff;
  font-size: 0.875rem;
}

/* Zwei Spalten erst ab lg - darunter liegt das Set als Leiste unten */
@media (min-width: 992px) {
  .bt-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 2rem;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}
@media (min-width: 1200px) {
  .bt-layout {
    grid-template-columns: minmax(0, 1fr) 22.5rem;
  }
}

/* ---- 1. Kategorien: Kacheln mit Bild statt Dropdown ------------------- */
.bt-categories {
  /* mobil eine wischbare Reihe, die Schatten bekommen Platz im Padding */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.75rem;
  margin: -0.25rem -0.25rem 0;
  padding: 0.25rem 0.25rem 0.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -ms-scroll-snap-type: x proximity;
      scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* die Reihe laeuft bis an den Bildschirmrand, damit sie als wischbar erkennbar ist */
}
@media (max-width: 767.9px) {
  .bt-categories {
    margin-right: -1.25rem;
    margin-left: -1.25rem;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    scroll-padding-left: 1.25rem;
  }
}
@media (min-width: 768px) {
  .bt-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    overflow: visible;
    padding-bottom: 0.25rem;
  }
}

.bt-category {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 7.5rem;
          flex: 0 0 7.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0.75rem 0.5rem 0.625rem;
  border: 1px solid #e6e7e9;
  border-radius: 14px;
  background-color: #ffffff;
  color: #373a3c;
  font: inherit;
  text-align: center;
  cursor: pointer;
  scroll-snap-align: start;
  -webkit-transition: border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  /* gewaehlt: dunkler Rahmen statt Shopfarbe - Gelb (DJL) haette auf
     Weiss nicht den noetigen Kontrast */
}
.bt-category:focus {
  outline: 2px solid #373a3c;
  outline-offset: 2px;
}
.bt-category:focus:not(:focus-visible) {
  outline: 0;
}
.bt-category:hover {
  border-color: #cccccc;
  -webkit-box-shadow: 0 1px 3px rgba(20, 22, 24, 0.06), 0 4px 12px rgba(20, 22, 24, 0.07);
          box-shadow: 0 1px 3px rgba(20, 22, 24, 0.06), 0 4px 12px rgba(20, 22, 24, 0.07);
}
.bt-category[aria-pressed=true] {
  border-color: #373a3c;
  -webkit-box-shadow: inset 0 0 0 1px #373a3c;
          box-shadow: inset 0 0 0 1px #373a3c;
  background-color: #f7f7f8;
}

.bt-category-image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 4rem;
  height: 4rem;
}
.bt-category-image img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  /* der weisse Bildgrund verschwindet auf der grauen gewaehlten Kachel */
  mix-blend-mode: multiply;
}

.bt-category-name {
  display: -webkit-box;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
  /* lange deutsche Woerter ("Mikrofonvorverstaerker") mit Silbentrennung statt Bruch mitten im Wort */
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  overflow-wrap: break-word;
}

/* ---- 2. Artikel ------------------------------------------------------- */
.bt-articles-wrap {
  position: relative;
  min-height: 8rem;
}

.bt-articles {
  -webkit-transition: opacity 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: opacity 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}
.bt-articles.is-loading {
  opacity: 0.35;
  pointer-events: none;
}

.bt-loading {
  position: absolute;
  top: 3rem;
  left: 50%;
  z-index: 1;
  margin-left: -1rem;
  color: #55595c;
  font-size: 2rem;
  line-height: 1;
}

.bt-empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 2.5rem 1rem;
  border: 1px dashed #e6e7e9;
  border-radius: 14px;
  background-color: #f7f7f8;
  color: #55595c;
  text-align: center;
}
.bt-empty i {
  color: #cccccc;
  font-size: 2rem;
}
.bt-empty p {
  margin: 0;
}

.bt-toolbar {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.bt-filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.75rem;
}

.bt-filter {
  display: block;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 10rem;
          flex: 1 1 10rem;
  max-width: 20rem;
  margin: 0;
}
.bt-filter select {
  margin: 0;
}

.bt-filter-label {
  display: block;
  margin-bottom: 0.25rem;
  color: #55595c;
  font-size: 0.75rem;
  font-weight: 700;
}

.bt-result-count {
  margin: 0 0 0.625rem auto;
  color: #55595c;
  font-size: 0.8125rem;
  white-space: nowrap;
  /* mobil neben die Beschriftung der Filter statt in eine eigene Zeile */
}
@media (max-width: 767.9px) {
  .bt-result-count {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
  }
}

/* Raster mit festen Spaltenzahlen: 12 Artikel pro Seite gehen immer auf */
.bt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .bt-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}
@media (min-width: 992px) {
  .bt-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .bt-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1360px) {
  .bt-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* dieselbe Kachel wie im Listing: weiche Linie, Kachel-Elevation */
.bt-card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid #ededef;
  border-radius: 14px;
  background-color: #ffffff;
  -webkit-box-shadow: 0 1px 3px rgba(20, 22, 24, 0.06), 0 4px 12px rgba(20, 22, 24, 0.07);
          box-shadow: 0 1px 3px rgba(20, 22, 24, 0.06), 0 4px 12px rgba(20, 22, 24, 0.07);
  -webkit-transition: border-color 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: border-color 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}
@media (min-width: 768px) {
  .bt-card {
    padding: 1rem;
  }
}
.bt-card:hover {
  -webkit-box-shadow: 0 3px 8px rgba(20, 22, 24, 0.09), 0 12px 28px rgba(20, 22, 24, 0.13);
          box-shadow: 0 3px 8px rgba(20, 22, 24, 0.09), 0 12px 28px rgba(20, 22, 24, 0.13);
}
.bt-card.is-in-set {
  border-color: #2f7d43;
  -webkit-box-shadow: inset 0 0 0 1px #2f7d43, 0 1px 3px rgba(20, 22, 24, 0.06), 0 4px 12px rgba(20, 22, 24, 0.07);
          box-shadow: inset 0 0 0 1px #2f7d43, 0 1px 3px rgba(20, 22, 24, 0.06), 0 4px 12px rgba(20, 22, 24, 0.07);
}

.bt-card-link {
  display: block;
  color: inherit;
  cursor: pointer;
}
.bt-card-link:hover, .bt-card-link:focus {
  color: inherit;
  text-decoration: none;
}
.bt-card-link:hover .bt-card-name, .bt-card-link:focus .bt-card-name {
  text-decoration: underline;
}
.bt-card-link:focus {
  outline: 2px solid #373a3c;
  outline-offset: 2px;
}
.bt-card-link:focus:not(:focus-visible) {
  outline: 0;
}

.bt-card-image {
  position: relative;
  display: block;
  margin-bottom: 0.75rem;
}
.bt-card-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 10px;
}

/* Haken oben rechts, sobald der Artikel im Set ist */
.bt-card-check {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: #2f7d43;
  -webkit-box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
          box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
  color: #ffffff;
  font-size: 0.875rem;
  opacity: 0;
  -webkit-transform: scale(0.4);
          transform: scale(0.4);
  -webkit-transition: opacity 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: opacity 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: opacity 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: opacity 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}
.is-in-set .bt-card-check {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.bt-card-name {
  display: -webkit-box;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
}
.bt-card-name .tag {
  margin-right: 0.25rem;
  vertical-align: 0.1em;
}

.bt-card-rating {
  margin-top: 0.375rem;
}

.bt-card-discount {
  margin-top: 0.375rem;
  color: #2f7d43;
  font-size: 0.8125rem;
  font-weight: 700;
}

/* Preis und Knopf haengen unten, damit das Raster buendig bleibt */
.bt-card-footer {
  margin-top: auto;
  padding-top: 0.625rem;
}

.bt-card-availability {
  font-size: 0.8125rem;
  line-height: 1.3;
}

.bt-card-price {
  margin: 0.125rem 0 0.625rem;
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Umschalter "Zum Set hinzufuegen" / "Im Set". Mit Maus zeigt der
   gedrueckte Knopf beim Ueberfahren "Entfernen", auf Touch nicht -
   dort bliebe der Hover nach dem Tippen stehen. */
.bt-toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  min-height: 2.5rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid #cccccc;
  border-radius: 10px;
  background-color: #ffffff;
  color: #373a3c;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  -webkit-transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  /* der Hauptartikel steckt immer im Set */
}
.bt-toggle:focus {
  outline: 2px solid #373a3c;
  outline-offset: 2px;
}
.bt-toggle:focus:not(:focus-visible) {
  outline: 0;
}
.bt-toggle i {
  margin-right: 0.375rem;
}
.bt-toggle .bt-toggle-in,
.bt-toggle .bt-toggle-remove {
  display: none;
}
.bt-toggle:hover {
  border-color: #373a3c;
  -webkit-box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
          box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
}
.bt-toggle[aria-pressed=true] {
  border-color: #2f7d43;
  background-color: #2f7d43;
  color: #ffffff;
}
.bt-toggle[aria-pressed=true] .bt-toggle-add {
  display: none;
}
.bt-toggle[aria-pressed=true] .bt-toggle-in {
  display: inline;
}
.bt-toggle[disabled] {
  cursor: default;
  opacity: 0.75;
  -webkit-box-shadow: none;
          box-shadow: none;
}
@media (hover: hover) {
  .bt-toggle[aria-pressed=true]:not([disabled]):hover {
    border-color: #c9433f;
    background-color: #c9433f;
  }
  .bt-toggle[aria-pressed=true]:not([disabled]):hover .bt-toggle-in {
    display: none;
  }
  .bt-toggle[aria-pressed=true]:not([disabled]):hover .bt-toggle-remove {
    display: inline;
  }
}

.bt-toggle-lg {
  min-height: 3rem;
  font-size: 1rem;
}

/* in den schmalen Kacheln mobil nur "Hinzufuegen" - "Zum Set hinzufuegen"
   braeche dort zweizeilig um */
.bt-label-short {
  display: none;
}

@media (max-width: 767.9px) {
  .bt-card .bt-toggle {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .bt-card .bt-toggle .bt-label-long {
    display: none;
  }
  .bt-card .bt-toggle .bt-label-short {
    display: inline;
  }
}
.bt-pagination {
  margin-top: 1.5rem;
}
.bt-pagination .pagination {
  margin: 0;
}

/* ---- 3. Das Set ------------------------------------------------------- */
.bt-summary-panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 1.25rem;
  border-radius: 14px;
  background-color: #ffffff;
  -webkit-box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 14px 28px rgba(20, 22, 24, 0.11), 0 32px 56px rgba(20, 22, 24, 0.09);
          box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 14px 28px rgba(20, 22, 24, 0.11), 0 32px 56px rgba(20, 22, 24, 0.09);
}
@media (min-width: 992px) {
  .bt-summary-panel {
    /* waechst mit, die Liste scrollt, Summe und Knopf bleiben sichtbar */
    max-height: calc(100vh - 2rem);
  }
}

@media (min-width: 992px) {
  .bt-aside {
    position: sticky;
    top: 1rem;
  }
}

.bt-summary-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.bt-summary-head .bt-step-title {
  margin: 0;
}

.bt-summary-count {
  color: #55595c;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.bt-items {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  min-height: 3rem;
  margin: 0 -0.25rem;
  padding: 0 0.25rem;
  overflow-y: auto;
  list-style: none;
}

/* rechts ist in jeder Zeile Platz fuer den Entfernen-Knopf reserviert,
   auch beim Hauptartikel - so stehen alle Preise buendig */
.bt-item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 2.25rem 0.75rem 0;
  border-bottom: 1px solid #ededef;
  /* frisch hinzugefuegt: kurz gruen hinterlegt */
}
.bt-item.is-new {
  -webkit-animation: bt-item-in 1.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
          animation: bt-item-in 1.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

@-webkit-keyframes bt-item-in {
  0%, 35% {
    background-color: #edf6ee;
  }
  100% {
    background-color: transparent;
  }
}

@keyframes bt-item-in {
  0%, 35% {
    background-color: #edf6ee;
  }
  100% {
    background-color: transparent;
  }
}
.bt-item-image {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 3rem;
          flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  border: 1px solid #ededef;
  border-radius: 10px;
  background-color: #ffffff;
  -o-object-fit: contain;
     object-fit: contain;
}

.bt-item-body {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
}

.bt-item-name {
  display: -webkit-box;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
}

.bt-item-main {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 6px;
  background-color: #f7f7f8;
  color: #55595c;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.bt-item-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.bt-item-price {
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bt-qty {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px solid #e6e7e9;
  border-radius: 10rem;
  background-color: #ffffff;
}

.bt-qty-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: #373a3c;
  font-size: 0.6875rem;
  cursor: pointer;
  -webkit-transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}
.bt-qty-btn:focus {
  outline: 2px solid #373a3c;
  outline-offset: 2px;
}
.bt-qty-btn:focus:not(:focus-visible) {
  outline: 0;
}
.bt-qty-btn:hover {
  background-color: #f7f7f8;
}
.bt-qty-btn[disabled] {
  opacity: 0.35;
  cursor: default;
  background-color: transparent;
}

.bt-qty-input {
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #373a3c;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
}
.bt-qty-input::-webkit-outer-spin-button, .bt-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.bt-qty-input:focus {
  outline: 2px solid #373a3c;
  outline-offset: -2px;
  border-radius: 6px;
}

.bt-item-remove {
  position: absolute;
  top: 0.5rem;
  right: -0.25rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: #55595c;
  cursor: pointer;
  -webkit-transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}
.bt-item-remove:focus {
  outline: 2px solid #373a3c;
  outline-offset: 2px;
}
.bt-item-remove:focus:not(:focus-visible) {
  outline: 0;
}
.bt-item-remove:hover {
  background-color: #fbedec;
  color: #c9433f;
}

.bt-hint {
  margin: 0.75rem 0 0;
  padding: 0.625rem 0.75rem;
  border-radius: 10px;
  background-color: #ecf4f7;
  color: #2f6b7e;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.bt-totals {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin: 0.75rem 0 0;
  -webkit-transition: opacity 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: opacity 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}
.is-pending .bt-totals {
  opacity: 0.5;
}

.bt-total {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  padding: 0.1875rem 0;
  /* noch kein gueltiges Set: der Strich soll nicht wie ein Preis wirken */
}
.bt-total dt {
  color: #55595c;
  font-weight: 400;
}
.bt-total dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.bt-total dd.is-empty {
  color: #cccccc;
  font-size: 1rem;
  font-weight: 400;
}

.bt-total-set {
  margin-top: 0.375rem;
  padding-top: 0.625rem;
  border-top: 1px solid #ededef;
}
.bt-total-set dt {
  color: #373a3c;
  font-weight: 700;
}
.bt-total-set dd {
  font-size: 1.5rem;
  line-height: 1.1;
}

.bt-total-saving dd {
  color: #2f7d43;
}

.bt-total-shipping {
  font-size: 0.8125rem;
}
.bt-total-shipping dd {
  font-weight: 400;
}

.bt-error {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
}
.bt-error p {
  margin: 0;
}

.bt-form {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin: 1rem 0 0;
  /* "Set in den Warenkorb legen" im Orange der Warenkorb-Buttons und mit
     deren Hover-/Druckstufen - in MBS sind die uebrigen Primary-Buttons rot */
}
.bt-form .btn-primary {
  background-color: #ff8c00;
  border-color: #ff8c00;
}
.bt-form .btn-primary:not([disabled]):hover, .bt-form .btn-primary:not([disabled]):focus, .bt-form .btn-primary:not([disabled]).focus, .bt-form .btn-primary:not([disabled]):active, .bt-form .btn-primary:not([disabled]).active {
  background-color: #e67e00;
  border-color: #e07b00;
}
.bt-form .btn-primary:not([disabled]):active:hover, .bt-form .btn-primary:not([disabled]):active:focus, .bt-form .btn-primary:not([disabled]):active.focus, .bt-form .btn-primary:not([disabled]).active:hover, .bt-form .btn-primary:not([disabled]).active:focus, .bt-form .btn-primary:not([disabled]).active.focus {
  background-color: #d67600;
  border-color: #c26a00;
}
.bt-form .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  -webkit-box-shadow: none;
          box-shadow: none;
}

/* Leiste und Blatt gibt es nur unter lg */
.bt-bar,
.bt-backdrop {
  display: none;
}

@media (max-width: 991.9px) {
  /* Platz fuer die Leiste, damit sie das Seitenende nicht verdeckt */
  body.bt-page {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom) + 0.5rem);
  }

  body.bt-sheet-open {
    overflow: hidden;
  }

  /* unter dem Cookie-Hinweis (z-index 1000), ueber dem Seiteninhalt */
  .bt-summary {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 990;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    max-height: 88vh;
  }

  .bt-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 4.5rem;
    margin: 0;
    padding: 0.625rem 1rem;
    padding-bottom: calc(0.625rem + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid #ededef;
    background-color: #ffffff;
    -webkit-box-shadow: 0 -6px 20px rgba(20, 22, 24, 0.1);
            box-shadow: 0 -6px 20px rgba(20, 22, 24, 0.1);
    color: #373a3c;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .bt-bar:focus {
    outline: 2px solid #373a3c;
    outline-offset: 2px;
  }
  .bt-bar:focus:not(:focus-visible) {
    outline: 0;
  }

  .bt-summary-panel {
    display: none;
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    -ms-scroll-chaining: none;
        overscroll-behavior: contain;
    padding: 1.25rem 1rem 1rem;
    border-radius: 16px 16px 0 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }

  .bt-summary.is-open .bt-summary-panel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-animation: bt-sheet-in 0.28s cubic-bezier(0.16, 0.68, 0.43, 0.99);
            animation: bt-sheet-in 0.28s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  }

  .bt-summary.is-open .bt-bar-action i {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

  /* im Blatt scrollt das ganze Blatt, nicht die Liste darin */
  .bt-items {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    overflow: visible;
  }

  /* groessere Tippziele */
  .bt-qty-btn,
.bt-item-remove {
    width: 2.5rem;
    height: 2.5rem;
  }

  .bt-qty-input {
    height: 2.5rem;
  }

  .bt-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 989;
    display: block;
    background-color: rgba(20, 22, 24, 0.45);
  }
  .bt-backdrop[hidden] {
    display: none;
  }
}
@-webkit-keyframes bt-sheet-in {
  0% {
    -webkit-transform: translateY(1.5rem);
            transform: translateY(1.5rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}
@keyframes bt-sheet-in {
  0% {
    -webkit-transform: translateY(1.5rem);
            transform: translateY(1.5rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}
/* das Blatt ist Dekoration, kein Feedback: bei reduzierter Bewegung ohne */
@media (prefers-reduced-motion: reduce) {
  .bt-summary.is-open .bt-summary-panel {
    -webkit-animation: none;
            animation: none;
  }
}
.bt-bar-thumbs {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-right: 0.25rem;
}
.bt-bar-thumbs img,
.bt-bar-thumbs .bt-bar-thumb-empty {
  width: 2.25rem;
  height: 2.25rem;
  border: 2px solid #ffffff;
  border-radius: 10px;
  background-color: #ffffff;
  -webkit-box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
          box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
  -o-object-fit: contain;
     object-fit: contain;
}
.bt-bar-thumbs img + img, .bt-bar-thumbs img + .bt-bar-thumb-empty,
.bt-bar-thumbs .bt-bar-thumb-empty + img,
.bt-bar-thumbs .bt-bar-thumb-empty + .bt-bar-thumb-empty {
  margin-left: -0.875rem;
}

.bt-bar-badge {
  position: absolute;
  top: -0.375rem;
  right: -0.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3125rem;
  border-radius: 10rem;
  background-color: #373a3c;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
}

.bt-bar-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.bt-bar-title {
  overflow: hidden;
  color: #55595c;
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bt-bar-title.is-saving {
  color: #2f7d43;
  font-weight: 700;
}

.bt-bar-price {
  overflow: hidden;
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bt-bar-action {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: 10rem;
  background-color: #373a3c;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}
.bt-bar-action i {
  -webkit-transition: -webkit-transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: -webkit-transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-transform 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

/* ---- Detailansicht im Modal ------------------------------------------ */
.bt-modal .modal-title {
  padding-right: 1rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}
.bt-modal .modal-body {
  padding: 1.25rem;
}

.bt-detail-loading {
  padding: 3rem 0;
  color: #55595c;
  text-align: center;
}

.bt-detail-top {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .bt-detail-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}

.bt-detail-media {
  min-width: 0;
}
.bt-detail-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.bt-detail-price {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.bt-detail-vat {
  margin: 0.25rem 0 0.75rem;
  color: #55595c;
}

.bt-detail-availability {
  margin-bottom: 1rem;
}
.bt-detail-availability small {
  display: block;
  margin-top: 0.125rem;
  color: #55595c;
}

.bt-detail-features {
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
}
.bt-detail-features div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
}
.bt-detail-features div:nth-child(odd) {
  background-color: #f7f7f8;
}
.bt-detail-features dt {
  font-weight: 700;
}
.bt-detail-features dd {
  margin: 0;
  text-align: right;
}

.bt-detail-description {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #ededef;
}

/* ---- Flug ins Set (Kopie des Artikelbilds, per JS bewegt) ------------- */
.bt-fly {
  position: fixed;
  z-index: 2000;
  margin: 0;
  pointer-events: none;
}

.bt-fly-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: #ffffff;
  -webkit-box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 10px 24px rgba(20, 22, 24, 0.1);
          box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 10px 24px rgba(20, 22, 24, 0.1);
  -o-object-fit: contain;
     object-fit: contain;
}

/* ============================================================
   gehoert inhaltlich zu: _site-footer.scss
   ============================================================ */
#footer-benefits {
  background-color: #f7f7f8;
  /* war $gray-lightest */
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  /* border-top: 2px solid $brand-primary bleibt */
}

#site-footer {
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

#site-footer .text-orange {
  color: #ff8c00;
}

#site-footer .payment-bg {
  border-radius: 5px;
}

/* ============================================================
   gehoert inhaltlich zu: legacy/product-filter-slider.css
   Die Slider-Basis liegt in mhk-libs.css, dieses Bundle laedt danach.
   ============================================================ */
.sliders .noUi-handle {
  -webkit-box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 10px 24px rgba(20, 22, 24, 0.1);
          box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 10px 24px rgba(20, 22, 24, 0.1);
  border: 1px solid #e6e7e9;
}

.sliders .noUi-connect {
  background-color: #ff8c00;
}

.sliders .tooltip {
  border-radius: 5px;
}

/* Spanne auch als Zahlen: zwei Felder unter dem Balken, synchron in beide
   Richtungen (ProductFilter/_PricesPartial, _AttributeRangeSliderPartial;
   productFilter.js, sliderBindRangeInputs) */
.range-inputs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 0.75rem;
}

.range-inputs-separator {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  margin: 0 0.5rem;
  color: #55595c;
}

.range-input {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 0;
  margin: 0;
}
.range-input .form-control {
  width: 100%;
  min-width: 0;
  height: 2.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  border-color: #e6e7e9;
  border-radius: 10px;
  -moz-appearance: textfield;
  /* ohne Pfeil-Knoepfe, die Felder sind schmal */
}
.range-input .form-control::-webkit-outer-spin-button, .range-input .form-control::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.range-input .form-control:focus {
  border-color: #ff8c00;
  -webkit-box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.25);
          box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.25);
}

.range-input-unit {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  margin-left: 0.375rem;
  font-size: 0.8125rem;
  color: #55595c;
}

.range-count {
  margin-top: 0.375rem;
  text-align: center;
  color: #55595c;
}

/* Uebernehmen: war grauer Text auf Grau (#attribute-filter-content .btn aus
   legacy/product-filter-attribute.css, das im Bundle danach laedt - deshalb
   die laengeren Selektoren). Jetzt ein Aktions-Button, der beim Erscheinen
   kurz einblendet (Keyframes laufen auch bei reduzierter Bewegung). */
#attribute-filter-content .attribute-body .btn.attribute-btn {
  margin: 0.75rem 0 0;
  padding: 0.5rem 1rem;
  font-weight: 700;
  color: #ffffff;
  background-color: #ff8c00;
  border: 1px solid #ff8c00;
  border-radius: 10px;
  -webkit-box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
          box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
  -webkit-animation: filter-apply-in 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99) both;
          animation: filter-apply-in 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99) both;
}
#attribute-filter-content .attribute-body .btn.attribute-btn:not(.disabled):hover, #attribute-filter-content .attribute-body .btn.attribute-btn:focus {
  color: #ffffff;
  background-color: #db7800;
  border-color: #db7800;
}

@-webkit-keyframes filter-apply-in {
  from {
    opacity: 0;
    -webkit-transform: translateY(-0.25rem);
            transform: translateY(-0.25rem);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes filter-apply-in {
  from {
    opacity: 0;
    -webkit-transform: translateY(-0.25rem);
            transform: translateY(-0.25rem);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

/* ============================================================
   gehoert inhaltlich zu: components/_carousel.scss
   Owls Basis liegt in mhk-libs.css, dieses Bundle laedt danach.
   ============================================================ */
.owl-carousel.standard {
  /* Luft fuer den Schatten. .owl-stage-outer kappt mit overflow: hidden alles,
       was ueber die Buehne hinausragt - ohne das Padding endet der Schatten oben
       und unten an einer geraden Kante. Das negative Margin oben und das
       reduzierte unten halten Pfeile und Dots an ihrer alten Position. */
  /* Die Kachel sitzt auf dem <a> bzw. .item-product-card, nicht auf
       .item-product: dort liegt die Utility p-x-0_5 mit !important, und genau
       dieses Padding ist die Rinne zwischen den Kacheln. Das <a> gibt es noch
       in "Zuletzt angesehen" (productDetail.js), die Produktkarten sind ein
       <div>, seit sie einen Warenkorb-Button haben. */
  /* Gleiche Kachelhoehen. Owl legt die Items als float ab, im Flex-Kontext
       strecken sie sich stattdessen auf die Hoehe der hoechsten Kachel.
       Der Clearfix wird dabei selbst zum Flex-Item und muss weichen. */
  /* Geometrie der Pfeile: gleicher Selektor wie im Bestand, steht nur spaeter */
  /* runde weisse Buttons statt der grauen Owl-Kaestchen */
}

.owl-carousel.standard .owl-stage-outer {
  /* Runde 2: der Kachelschatten streut weiter, also etwas mehr Luft.
       Padding und Margin heben sich weiterhin auf - Pfeile und Dots
       bleiben an ihrer alten Position. */
  padding-top: 0.625rem;
  padding-bottom: 0.875rem;
  margin-top: -0.625rem;
  margin-bottom: 0.125rem;
  /* war 1rem, mit dem Padding zusammen wieder 1rem */
}

.owl-carousel.standard .item-product > a,
.owl-carousel.standard .item-product > .item-product-card {
  /* war inline. Flex-Spalte, damit der Lieferstatus per margin-top: auto
           an der Unterkante haengt und das Raster unten buendig bleibt. */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  /* holt .list-product-badge in die Kachel */
  height: 100%;
  padding: 0.75rem;
  /* Linie zurueckhaltender, der Schatten macht die Abgrenzung */
  border: 1px solid #ededef;
  /* war #e6e7e9 */
  border-radius: 14px;
  background-color: #ffffff;
  /* dieselben Tokens wie .product-list-item-content: Karussell- und
           Listen-Kachel liegen damit auf derselben Stufe */
  -webkit-box-shadow: 0 1px 3px rgba(20, 22, 24, 0.06), 0 4px 12px rgba(20, 22, 24, 0.07);
          box-shadow: 0 1px 3px rgba(20, 22, 24, 0.06), 0 4px 12px rgba(20, 22, 24, 0.07);
  -webkit-transition: border-color 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: border-color 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

.owl-carousel.standard .item-product > a:hover, .owl-carousel.standard .item-product > a:focus, .owl-carousel.standard .item-product > .item-product-card:hover, .owl-carousel.standard .item-product > .item-product-card:focus {
  border-color: #e6e7e9;
  -webkit-box-shadow: 0 3px 8px rgba(20, 22, 24, 0.09), 0 12px 28px rgba(20, 22, 24, 0.13);
          box-shadow: 0 3px 8px rgba(20, 22, 24, 0.09), 0 12px 28px rgba(20, 22, 24, 0.13);
}

.owl-carousel.standard .item-product {
  /* setzt die Kachel etwas kleiner als ihren Slot, damit sie nicht an der
           Kappkante der Buehne klebt */
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  /* war ein graues Band ueber die volle Breite */
  /* Festes Raster: Bild, Preis, zwei Zeilen Name, eine Zeile Bewertung,
           unten der Lieferstatus. Nicht benoetigte Zeilen bleiben leer stehen,
           damit alle Kacheln dieselbe Aufteilung haben. */
  /* haelt die erste Zeile auf Zeilenhoehe: ein inline-block auf der
           Grundlinie wuerde die Zeile sonst aufziehen und Zeile zwei abschneiden */
  /* Grundpreis und Set-Rabatt gibt es nur vereinzelt. Ohne order wuerden
           sie die Bewertung nach unten schieben und das Raster verschieben. */
}

.owl-carousel.standard .item-product img {
  border-radius: 10px;
}

.owl-carousel.standard .item-product .price {
  background-color: #f0f0f0;
  color: #373a3c;
  padding: 0.35rem 0.75rem;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.owl-carousel.standard .item-product .name {
  height: calc(0.5rem + 3em);
  /* p-t-0_5 plus zwei Zeilen a 1.5em */
  overflow: hidden;
}

.owl-carousel.standard .item-product .name .tag {
  vertical-align: middle;
}

.owl-carousel.standard .item-product .product-rating {
  min-height: 1.5em;
  /* eine Zeile, bleibt ohne Bewertung leer */
}

.owl-carousel.standard .item-product .product-base-price, .owl-carousel.standard .item-product .product-discount {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.owl-carousel.standard .item-product .product-availability {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  margin-top: auto;
  /* immer an der Unterkante der Kachel */
}

.owl-carousel.standard .item-product .list-product-badge i {
  border-radius: 5px;
  /* war 2px */
}

.owl-carousel.standard.owl-loaded .owl-stage {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.owl-carousel.standard.owl-loaded .owl-stage:after {
  display: none;
}

.owl-carousel.standard.owl-loaded .owl-item {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  /* Owl setzt die Breiten inline, Flex darf nicht daran ziehen */
}

.owl-carousel.standard.owl-loaded .item-product {
  height: 100%;
}

.owl-carousel.standard .owl-nav div {
  top: -1.5rem;
  /* war -1rem, gleicht die groesseren Buttons aus */
  margin: 0;
  /* war 10px 0 */
}

.owl-carousel.standard .owl-nav .owl-prev {
  left: 0.5rem;
}

.owl-carousel.standard .owl-nav .owl-next {
  right: 0.5rem;
}

.owl-carousel.standard.product-carousel {
  /* Pfeil 2.25rem + Luft */
  width: auto;
  /* Owl setzt 100%, mit dem Rand waere es sonst zu breit */
  margin-left: 2.5rem;
  margin-right: 2.5rem;
  /* das Libs-Bundle (*-libs.css) setzt .owl-carousel { overflow: hidden } und schnitte die
     Pfeile im Rand ab; die Karten clippt .owl-stage-outer selbst */
  /* Bezugsbox der Pfeile: die Kartenzeile. Unten abgezogen: Buehnenrand
     (0.875rem + 0.125rem) und die Punkte-Zeile (0.25rem + 1.5rem) */
  /* Punkte: der aktive wird zur Pille und gleitet beim Blaettern.
     !important gegen den Reduced-Motion-Reset, wie die Ueberblendung
     der Startseite: die kleine Bewegung ist gewollt. */
  /* :not(.disabled) - Owl blendet die Punkte bei nur einer Seite per display: none aus */
  /* ohne Pfeile zog components/_carousel.scss die Punkte 2.5rem hoch */
  /* Handy: fuer Pfeile fehlt der Platz, die Karten waeren schmaler als
     ihre Bilder. Dort wird gewischt, die Punkte zeigen die Position. */
}

.owl-carousel.standard.product-carousel.owl-loaded {
  overflow: visible;
}

.owl-carousel.standard.product-carousel .owl-nav {
  position: absolute;
  top: 0;
  bottom: 2.75rem;
  left: -2.5rem;
  right: -2.5rem;
  margin: 0;
  pointer-events: none;
}

.owl-carousel.standard.product-carousel .owl-nav div {
  top: 50%;
  margin: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  pointer-events: auto;
}

.owl-carousel.standard.product-carousel .owl-nav .owl-prev {
  left: 0;
}

.owl-carousel.standard.product-carousel .owl-nav .owl-next {
  right: 0;
}

.owl-carousel.standard.product-carousel .owl-dots:not(.disabled) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 1.5rem;
  margin-top: 0.25rem;
}

.owl-carousel.standard.product-carousel .owl-nav.disabled + .owl-dots {
  margin-top: 0.25rem;
}

.owl-carousel.standard.product-carousel .owl-dots .owl-dot span {
  width: 8px;
  margin: 0 3px;
  border-radius: 4px;
  -webkit-transition: width 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99) !important;
  transition: width 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99) !important;
}

.owl-carousel.standard.product-carousel .owl-dots .owl-dot.active span {
  width: 24px;
}

@media (max-width: 767.9px) {
  .owl-carousel.standard.product-carousel {
    margin-left: 0;
    margin-right: 0;
  }
  .owl-carousel.standard.product-carousel .owl-nav {
    display: none;
  }
}

.owl-carousel.standard .owl-nav [class*='owl-'] {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  line-height: 2.25rem;
  text-align: center;
  border-radius: 50%;
  background-color: #ffffff;
  color: #373a3c;
  -webkit-box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
          box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
  -webkit-transition: color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

.owl-carousel.standard .owl-nav [class*='owl-']:hover {
  background-color: #ffffff;
  color: #ff8c00;
  -webkit-box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 10px 24px rgba(20, 22, 24, 0.1);
          box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 10px 24px rgba(20, 22, 24, 0.1);
}

.owl-carousel.standard .owl-nav .disabled {
  opacity: .35;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.owl-carousel.standard .owl-dots .owl-dot span {
  width: 8px;
  height: 8px;
  margin: 5px 4px;
  border: none;
  /* war 1px solid #869791 */
  background-color: #e6e7e9;
  -webkit-transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

.owl-carousel.standard .owl-dots .owl-dot.active span,
.owl-carousel.standard .owl-dots .owl-dot:hover span {
  background-color: #ff8c00;
  /* war #869791 */
}

/* ============================================================
   gehoert inhaltlich zu: components/_product-list.scss,
   components/_carousel.scss und pages/_product-detail.scss
   Preis: eine Darstellung fuer Liste, Karussell und Detailseite.
   Der Preis kommt als ein fertiger String ("1.234,00 €"), deshalb
   arbeitet hier alles auf dem ganzen Element - kleine Cents oder ein
   abgesetztes €-Zeichen braeuchten eigenes Markup.
   ============================================================ */
.product-list .product-price,
.owl-carousel.standard .item-product .price,
#product #product-information #product-details #product-price {
  letter-spacing: -.01em;
  /* grosse fette Ziffern laufen sonst auseinander */
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  /* Preise stehen untereinander, kein Tanzen beim Scrub */
}

.product-list .product-price,
.owl-carousel.standard .item-product .price {
  font-size: 1.4em;
}

#product #product-information #product-details #product-price {
  font-size: 2rem;
  margin-top: 0.25rem;
  /* etwas Luft zum Block darueber */
}

/* Reduziert: der Preis selbst traegt die Aktionsfarbe, nicht nur das kleine
   Tag daneben. Das Tag behaelt seine weisse Schrift. */
.product-list .product-price:has(> .tag-danger),
#product #product-information #product-details #product-price:has(> .tag-danger) {
  color: #c9433f;
}

/* UVP unter einem reduzierten Preis: gedaempft, aber ausdruecklich NICHT
   durchgestrichen - eine UVP darf nie als Streichpreis erscheinen.
   In der Liste steht die .product-discount direkt hinter .product-price nur
   im reduzierten Fall - der Set-Rabatt steht weiter oben und bleibt unberuehrt.
   Auf der Detailseite gibt es zwei #set-price: die SET-Ersparnis folgt einem
   Preis ohne Tag und bleibt deshalb unveraendert.
   Zwei getrennte Regeln statt einer Selektorliste: ein nicht unterstuetztes
   :has() wuerde die ganze Liste verwerfen und die Listen-UVP mitnehmen,
   die ohne :has() auskommt. */
.product-list .product-price + .product-discount {
  color: #55595c;
  font-variant-numeric: tabular-nums;
}

#product #product-information #product-details #product-price:has(> .tag-danger) + #set-price {
  color: #55595c;
  font-variant-numeric: tabular-nums;
}

/* Preis und UVP lesen als ein Block: der Bestand setzt jedem Kind der grauen
   Kaesten .5rem Abstand nach unten, zwischen Preis und UVP ist das zu viel. */
#product #product-information #product-details #product-price:has(> .tag-danger) {
  margin-bottom: 0.125rem;
}

/* MiniProfiler laedt sein CSS nach den Bundles, deshalb !important.
   .mp-unit ist 12px #888 auf #222 und lag mit 4.48:1 knapp unter WCAG AA.
   Sichtbar nur bei lokalen Requests, nicht fuer Kunden. */
.mp-unit {
  color: #999 !important;
  /* war #888 */
}

/* Hover-Scrub: Streifen nur beim Hovern, oben im Karten-Padding, nicht auf dem Bild. */
.product-list-item-content .image-scrub-ticks,
.owl-carousel.standard .item-product > a .image-scrub-ticks,
.owl-carousel.standard .item-product > .item-product-card .image-scrub-ticks {
  display: none;
  position: absolute;
  top: 0.4rem;
  left: 0.75rem;
  right: 0.75rem;
  height: 3px;
  gap: 2px;
  pointer-events: none;
  z-index: 1;
}

.product-list-item-content:hover .image-scrub-ticks,
.owl-carousel.standard .item-product > a:hover .image-scrub-ticks,
.owl-carousel.standard .item-product > .item-product-card:hover .image-scrub-ticks {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.image-scrub-tick {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  background-color: rgba(20, 22, 24, 0.2);
  border-radius: 2px;
  /* war 1px */
}

.image-scrub-tick.is-active {
  background-color: #ff8c00;
}

@media (hover: none) {
  .image-scrub-ticks {
    display: none !important;
  }
}

/* ============================================================
   gehoert inhaltlich zu: components/_last-visited.scss
   ============================================================ */
/* Der Graustufen-Filter blendet ueber statt umzuspringen. Das Hover-Padding
   bleibt unveraendert. */
#carousel-last-visited img {
  /* die festen 100px passen seit Kachel-Padding und -Rahmen nicht mehr:
       bei 10 Bildern pro Reihe bleiben innen rund 72px, das Bild ragte rechts
       aus der Kachel. Es schrumpft jetzt mit (die Bilder sind quadratisch),
       margin: 0 auto aus dem Karussell zentriert es. */
  max-width: 100%;
  height: auto;
  -webkit-transition: -webkit-filter 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: -webkit-filter 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: filter 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: filter 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-filter 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

/* ============================================================
   gehoert inhaltlich zu: components/_product-list.scss und components/_carousel.scss
   Warenkorb-Button auf den Produktkarten (Liste und Karussell).
   Die Karte ist ein <div>, weil Button und Versandkosten-Link darin
   liegen. Das Bild hat einen eigenen Link (das Image-Scrub braucht die
   Maus), der Namenslink deckt mit ::after den Infobereich ab. Alles
   Klickbare darin liegt eine Ebene darueber.
   ============================================================ */
.product-list .product-info-wrapper,
.owl-carousel.standard .item-product-info {
  position: relative;
  /* Bezug fuer den ::after des Namenslinks */
}

.product-list .product-image-link,
.owl-carousel.standard .item-product-image-link {
  display: block;
}

.product-list .product-list-item-link,
.owl-carousel.standard .item-product-link {
  color: inherit;
}
.product-list .product-list-item-link:hover, .product-list .product-list-item-link:focus,
.owl-carousel.standard .item-product-link:hover,
.owl-carousel.standard .item-product-link:focus {
  color: inherit;
  text-decoration: none;
}
.product-list .product-list-item-link:after,
.owl-carousel.standard .item-product-link:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.product-price-info .shipping-link,
.list-add-to-cart {
  position: relative;
  z-index: 2;
}

/* Grundpreis, MwSt. und Versandkosten: gedaempft wie die UVP, aber mit
   ausreichendem Kontrast - das sind Pflichtangaben, kein Kleingedrucktes */
.product-price-info {
  color: #55595c;
}
.product-price-info .product-base-price {
  color: inherit;
}
.product-price-info .shipping-link {
  color: inherit;
}

/* Kleiner Warenkorb-Button, nur Icon: zurueckhaltend wie btn-secondary. Beim
   Hovern und nach dem Hinzufuegen (.is-added, 2s mit Haken) in der Farbe der
   Primaer-Buttons des Shops ($primary-action-color in _variables.scss, Djl Orange). */
.list-add-to-cart {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 0.9375rem;
  line-height: 1;
  color: #373a3c;
  border-color: #e6e7e9;
  border-radius: 10px;
  -webkit-transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  /* btn-secondary faerbt :focus grau ein, nach einem Mausklick bliebe er so stehen */
}
.list-add-to-cart:focus {
  outline: 0;
  color: #373a3c;
  background-color: #ffffff;
  border-color: #e6e7e9;
}
.list-add-to-cart:hover, .list-add-to-cart:focus-visible, .list-add-to-cart:active, .list-add-to-cart:active:focus, .list-add-to-cart.is-added {
  color: #ffffff;
  background-color: #ff8c00;
  border-color: #ff8c00;
}

/* Die Medien-Icons (Video, Sound, PDF) sassen unten rechts, dort liegt jetzt
   der Button. Oben rechts ueber der Bildecke, unter den Scrub-Ticks (0.4rem + 3px). */
.product-list .list-product-badge,
.owl-carousel.standard .item-product-card .list-product-badge {
  top: 0.75rem;
  bottom: auto;
}

.product-list-footnote {
  color: #55595c;
  margin-top: 0.5rem;
}

.product-list {
  /* Tastatur: die Karte selbst ist kein Link mehr */
  /* Preis links, Button rechts in derselben Zeile */
}
.product-list .product-list-item-content:focus-within {
  -webkit-box-shadow: 0 3px 8px rgba(20, 22, 24, 0.09), 0 12px 28px rgba(20, 22, 24, 0.13);
          box-shadow: 0 3px 8px rgba(20, 22, 24, 0.09), 0 12px 28px rgba(20, 22, 24, 0.13);
}
.product-list .product-price-info {
  margin-top: 0.125rem;
}
.product-list .product-price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.product-list .product-price .tag {
  margin-left: 0.375rem;
}
.product-list .product-price .list-add-to-cart {
  margin-left: auto;
}

.owl-carousel.standard {
  /* wie bisher "a:hover .name span:last-child" auf der ganzen Kachel */
  /* components/_carousel.scss nimmt allen Links in .item-product die
     Unterstreichung (a:link), der Versandkosten-Link muss als Link erkennbar sein */
  /* Lieferstatus links, Button rechts; die Zeile uebernimmt vom Lieferstatus
     order und margin-top: auto, damit sie weiter an der Unterkante haengt */
}
.owl-carousel.standard .item-product-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}
.owl-carousel.standard .item-product-card:hover .item-product-link span {
  text-decoration: underline;
}
.owl-carousel.standard .item-product > .item-product-card:focus-within {
  border-color: #e6e7e9;
  -webkit-box-shadow: 0 3px 8px rgba(20, 22, 24, 0.09), 0 12px 28px rgba(20, 22, 24, 0.13);
          box-shadow: 0 3px 8px rgba(20, 22, 24, 0.09), 0 12px 28px rgba(20, 22, 24, 0.13);
}
.owl-carousel.standard .item-product .product-price-info {
  text-align: center;
  margin-top: 0.25rem;
}
.owl-carousel.standard .item-product .product-price-info a.shipping-link {
  text-decoration: underline;
}
.owl-carousel.standard .item-product .item-product-foot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  margin-top: auto;
  padding-top: 0.25rem;
  /* order: 2 aus dem Redesign gilt sonst auch innerhalb der Zeile */
}
.owl-carousel.standard .item-product .item-product-foot > .product-availability,
.owl-carousel.standard .item-product .item-product-foot > .d-flex {
  -webkit-box-ordinal-group: 1;
      -ms-flex-order: 0;
          order: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
}
.owl-carousel.standard .item-product .item-product-foot .list-add-to-cart {
  margin-left: 0.5rem;
}

/* vor dem Script-Init: wie "a div:first-child" in components/_carousel.scss */
.owl-carousel.standard:not(.owl-loaded) .item-product-card > div:first-child {
  height: 115px;
  width: 115px;
}

/* Mini-Warenkorb und Merkzettel: auch nach dem Scrollen oben erreichbar, ohne die Seite zu sperren. */
#site-header #btn-toggle-cart.mini-cart-anchor,
#site-header #btn-toggle-leaflet.mini-cart-anchor {
  background-color: #ffffff;
  color: #373a3c;
  /* mobil ist die Kopfzeile dunkel, Icon und Beschriftung sonst hell auf Weiss */
  border-radius: 14px 14px 0 0;
}
#site-header #btn-toggle-cart.mini-cart-anchor::before,
#site-header #btn-toggle-leaflet.mini-cart-anchor::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #e6e7e9;
  border-bottom: 0;
  border-radius: inherit;
  pointer-events: none;
}
.mini-cart {
  position: fixed;
  right: 1rem;
  top: 1rem;
  z-index: 1040; /* unter den Bootstrap-Modals (1050) */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 25rem;
  max-width: calc(100% - 2rem);
  max-height: calc(100vh - 2rem);
  padding: 1rem;
  background-color: #ffffff;
  color: #373a3c;
  border: 1px solid #e6e7e9;
  border-radius: 14px;
  -webkit-box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 10px 24px rgba(20, 22, 24, 0.1);
          box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 10px 24px rgba(20, 22, 24, 0.1);
}
.mini-cart.is-attached {
  border-top-right-radius: 0;
}
.mini-cart.is-attached::before {
  content: "";
  position: absolute;
  top: -1px;
  right: var(--mini-cart-anchor-offset, 0px);
  /* Button nicht ganz rechts: functions.js attachFlyout */
  width: var(--mini-cart-anchor-width);
  max-width: calc(100% - 2rem);
  height: 2px;
  background-color: #ffffff;
  pointer-events: none;
}
.mini-cart.is-attached.is-anchor-inset {
  border-top-right-radius: 14px;
}
.mini-cart[hidden], .mini-cart [hidden] {
  display: none !important;
}
.mini-cart a {
  color: inherit;
}
.mini-cart .mini-cart-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-bottom: 0.5rem;
}
.mini-cart .mini-cart-header.is-title-hidden {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.mini-cart h2 {
  font-size: 1.125rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.mini-cart .mini-cart-count:empty {
  display: none;
}
.mini-cart .mini-cart-close {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: 2rem;
  height: 2rem;
  padding: 0;
  margin-left: 0.5rem;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: #818a91;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.mini-cart .mini-cart-close:hover, .mini-cart .mini-cart-close:focus {
  background-color: #f0f0f0;
  color: #373a3c;
}
.mini-cart .mini-cart-status {
  color: #ffffff;
  background-color: #2f7d43;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 700;
}
.mini-cart .mini-cart-status:empty {
  display: none;
}
.mini-cart .mini-cart-status.is-error {
  background-color: #c9433f;
  color: #ffffff;
}
.mini-cart .mini-cart-content {
  min-height: 0;
  overflow-y: auto;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
}
.mini-cart .mini-cart-items {
  max-height: 32vh;
  overflow-y: auto;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
}
.mini-cart .mini-cart-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #ededef;
  /* Entfernen ohne Neuladen: blass waehrend der Anfrage, dann klappt der Eintrag zu
     (functions.js collapseItem) */
  -webkit-transition: height 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), padding 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-width 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), opacity 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: height 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), padding 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-width 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), opacity 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}
.mini-cart .mini-cart-item.is-removing {
  opacity: 0.4;
  pointer-events: none;
}
.mini-cart .mini-cart-item img {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: 64px;
  height: 64px;
  -o-object-fit: contain;
     object-fit: contain;
  margin-right: 0.75rem;
}
.mini-cart .mini-cart-item-info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  font-size: 0.875rem;
}
.mini-cart .mini-cart-item-heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.5rem;
}
.mini-cart .mini-cart-item-heading > a, .mini-cart .mini-cart-item-heading > strong {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: block;
  font-weight: 700;
}
.mini-cart .mini-cart-remove {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  margin: 0;
}
.mini-cart .mini-cart-remove-button {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #818a91;
  cursor: pointer;
}
.mini-cart .mini-cart-remove-button:hover, .mini-cart .mini-cart-remove-button:focus {
  color: #c9433f;
  background-color: #f0f0f0;
}
.mini-cart .mini-cart-remove-button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.mini-cart .mini-cart-item-price, .mini-cart .mini-cart-total {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.25rem 0.75rem;
  margin-top: 0.5rem;
}
.mini-cart .mini-cart-item-price strong, .mini-cart .mini-cart-total strong {
  white-space: nowrap;
}
.mini-cart .mini-cart-total {
  margin-top: 0.875rem;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  font-size: 0.875rem;
}
.mini-cart .mini-cart-total strong {
  font-size: 1.125rem;
}
.mini-cart .mini-cart-shipping, .mini-cart .mini-cart-hint {
  color: #818a91;
  margin: 0.25rem 0 0.75rem;
}
.mini-cart .mini-cart-shipping a {
  text-decoration: underline;
}
.mini-cart .mini-cart-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.mini-cart .mini-cart-actions .btn {
  min-height: 2.75rem;
  margin: 0;
}
.mini-cart .mini-cart-actions form {
  margin: 0;
}
.mini-cart .mini-cart-actions .mini-cart-checkout .btn, .mini-cart .mini-cart-actions .mini-cart-link {
  height: 100%;
}
.mini-cart .mini-cart-actions .mini-cart-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.mini-cart .mini-cart-actions .mini-cart-paypal {
  grid-column: 1/-1;
  min-width: 0;
}
.mini-cart .mini-cart-paypal-retry {
  min-height: 3rem;
  border-radius: 999px;
  background-color: #ffc439;
  color: #003087;
  border-color: #ffc439;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
}
.mini-cart .mini-cart-paypal-error {
  color: #c9433f;
  margin: 0.5rem 0 0;
}
.mini-cart [aria-disabled=true] {
  opacity: 0.65;
  cursor: default;
}

/* Mobil keine Fenster am Header: Warenkorb- und Merkzettel-Symbol fuehren direkt zu ihrer Seite,
   miniCart.js/leaflet.js zeigen nur kurz den Hinweis unter dem Symbol (.is-toast) */
.mini-cart.is-toast {
  width: auto;
  padding: 0;
  background-color: transparent;
  border: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.mini-cart.is-toast .mini-cart-header,
.mini-cart.is-toast .mini-cart-content,
.mini-cart.is-toast .mini-cart-fallback,
.mini-cart.is-toast .mini-leaflet-consent {
  display: none !important;
  /* fallback setzt miniCart.js per show() */
}
.mini-cart.is-toast .mini-cart-status {
  margin: 0;
  -webkit-box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 10px 24px rgba(20, 22, 24, 0.1);
          box-shadow: 0 2px 6px rgba(20, 22, 24, 0.07), 0 10px 24px rgba(20, 22, 24, 0.1);
}

/* Merkzettel (internal/leaflet.js): Herz auf den Produktkarten und der Detailseite, Button
   im Header, Fenster wie der Mini-Warenkorb angedockt (mit Titel), Seite und Kundencenter. */
/* Header-Button wie der Warenkorb-Button (_site-header.scss, "gefuellte Flaeche" oben).
   Ohne Eintraege bleibt die Zahl leer und verschwindet. */
#site-header #btn-toggle-leaflet {
  position: relative;
  border-radius: 10px;
  -webkit-transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}
#site-header #btn-toggle-leaflet .tag-pill {
  margin-left: 0.25rem;
}
#site-header #btn-toggle-leaflet .tag-pill:empty {
  display: none;
}
@media (min-width: 992px) {
  #site-header #btn-toggle-leaflet:hover, #site-header #btn-toggle-leaflet:focus {
    background-color: #f7f7f8;
  }
}
@media (max-width: 991.9px) {
  #site-header #btn-toggle-leaflet .tag-pill {
    margin-left: 5px;
    vertical-align: middle;
    position: absolute;
    right: 5px;
    top: 0.75rem;
  }
}
@media (max-width: 767.9px) {
  #site-header #btn-toggle-leaflet .tag-pill {
    font-size: 60%;
    top: 0.25rem;
  }
}

/* Herz auf den Produktkarten: oben links ueber der Bildecke, gegenueber den
   Medien-Icons (oben rechts) und unter den Scrub-Ticks (0.4rem + 3px). */
.list-leaflet-toggle {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  /* ueber dem ::after des Namenslinks */
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  color: #373a3c;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #e6e7e9;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), border-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}
.list-leaflet-toggle:focus {
  outline: 0;
}
.list-leaflet-toggle:hover, .list-leaflet-toggle.is-active {
  color: #ff8c00;
}
.list-leaflet-toggle:hover {
  border-color: #ff8c00;
}
.list-leaflet-toggle:focus-visible {
  color: #ffffff;
  background-color: #ff8c00;
  border-color: #ff8c00;
}

#add-to-leaflet.is-active .fa {
  color: #ff8c00;
}

.mini-leaflet {
  /* ohne Summe und PayPal darunter darf die Liste hoeher werden */
}
.mini-leaflet .mini-leaflet-consent p {
  margin-bottom: 0.75rem;
}
.mini-leaflet .mini-cart-items {
  max-height: 50vh;
}
.mini-leaflet .mini-leaflet-availability {
  margin-top: 0.25rem;
  font-weight: 700;
}
.mini-leaflet .mini-cart-item-price {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 0.25rem;
}
.mini-leaflet .product-price-info {
  margin-top: 0.125rem;
}
.mini-leaflet .mini-leaflet-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  /* .mini-cart a erbt die Textfarbe, der Link-Button behaelt sein Weiss */
}
.mini-leaflet .mini-leaflet-actions .btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 2.75rem;
  margin: 0;
  white-space: normal;
}
.mini-leaflet .mini-leaflet-actions a.btn-info, .mini-leaflet .mini-leaflet-actions a.btn-info:hover, .mini-leaflet .mini-leaflet-actions a.btn-info:focus {
  color: #ffffff;
}

/* Hinweis: gespeichert wird nur im Browser, geloeschte Cookies/Websitedaten leeren den Merkzettel */
.leaflet-page-hint {
  color: #818a91;
  margin-bottom: 1rem;
}
.leaflet-page-hint .fa {
  margin-right: 0.25rem;
}

.leaflet-page-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem 1rem;
  margin: 1rem 0;
}
.leaflet-page-actions[hidden] {
  display: none;
}

.leaflet-page-status {
  font-weight: 700;
  color: #2f7d43;
  /* gruen auf Weiss, wie der Text im Erfolgs-Tag */
}
.leaflet-page-status.is-error {
  color: #c9433f;
}

.leaflet-page-consent {
  margin: 1rem 0;
}
.leaflet-page-consent[hidden] {
  display: none;
}

.leaflet-page-content:focus {
  outline: 0;
}

/* ============================================================
   Bewegung abschaltbar: wer im Betriebssystem "Bewegung reduzieren"
   gesetzt hat, bekommt dieselben Zustaende ohne Uebergang. Laufende
   Animationen (Spinner, Lazyload) bleiben, sie sind Rueckmeldung und
   keine Dekoration.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    -webkit-transition-duration: .01ms !important;
            transition-duration: .01ms !important;
    -webkit-transition-delay: 0s !important;
            transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Passwort-Anforderungen (Registrierung, Passwort aendern/zuruecksetzen)
   Jede Regel schaltet beim Tippen sofort von Grau/x auf Gruen/Haken.
   ============================================================ */
.password-requirements {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: .25rem 1.25rem;
  margin: .5rem 0 1rem;
  padding: 0;
  list-style: none;
  font-size: .875rem;
}

.password-requirements li {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: .4rem;
  color: #55595c;
  white-space: nowrap;
  -webkit-transition: color .24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: color .24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

.password-requirements li .fa {
  width: 1em;
  text-align: center;
}

.password-requirements li .fa-times {
  color: #aaaaaa;
}

.password-requirements li .fa-check {
  display: none;
}

.password-requirements li.is-valid {
  color: #2f7d43;
  font-weight: 600;
}

.password-requirements li.is-valid .fa-times {
  display: none;
}

.password-requirements li.is-valid .fa-check {
  display: inline-block;
}

#open-kc-attributes a {
  display: block;
  padding: .5rem 1rem;
}

@media screen and (max-width: 1023px) {
  #attribute-filter {
    display: none;
  }
}

.attribute-container .kc-input-container label {
  display: block;
}

.attribute-container .kc-input-container label.disabled {
  color: #c5c5c5;
  cursor: default;
}

.attribute-container .kc-input-container input[type="checkbox"] ~ label.disabled:before, .attribute-container .kc-input-container input[type="radio"] ~ label.disabled:before {
  background-color: #dadada;
}

.attribute-container .kc-input-container input[type="checkbox"]:hover ~ label.disabled:before, .kc-input-container input[type="radio"]:hover ~ label.disabled:before {
  border-color: #999999;
}

.attribute-container .kc-input-container input[type="checkbox"] + label, .attribute-container .kc-input-container input[type="radio"] + label {
  padding: 0.125rem 1.75rem;
}

@media (max-width: 991px) {
  .attribute-container .kc-input-container input[type="checkbox"] + label, .attribute-container .kc-input-container input[type="radio"] + label {
    padding: 0.25rem 1.75rem;
  }
}

/*
.attribute-container .kc-input-container input[type="checkbox"] + label, .attribute-container .kc-input-container input[type="radio"] + label {
    padding: ($box-standard-padding / 8) ($box-standard-padding * 1.75);

    @include media-breakpoint-down(md) {
        padding: ($box-standard-padding / 4) ($box-standard-padding * 1.75);
    }
}
*/
.attribute-container .kc-input-container input[type="checkbox"] + label::before, .attribute-container .kc-input-container input[type="radio"] + label::before {
  /*background-color: $white;*/
  background-color: #ffffff;
}

/*#attribute-filter {

    }*/
/*#attribute-realtime {
        margin: 5px 0 10px;
    }*/
/* Redesign: Werte sind Literale, weil diese Datei einzeln kompiliert und erst
   nach style.scss ins Bundle gehaengt wird - SCSS-Variablen sind hier nicht sichtbar.
   #e6e7e9 = $line, #f7f7f8 = $surface-sub, #dcdde0 = $input-border-color,
   #f5f5f6 = $input-bg-filled, #55595c = $gray, 10px = $border-radius */
#attribute-filter-header {
  line-height: 1.25em;
  border-bottom: 2px solid #e6e7e9;
  padding: 0.5rem 0 0.75rem;
  margin: 0;
  font-weight: 700;
}

.attribute-container {
  border-bottom: 1px solid #e6e7e9;
}

/*.attribute-container:first-of-type {
        border-top-width: 2px;
    }*/
/*.kc-modal-col .attribute-container:first-of-type {
        border-top: none;
    }*/
.attribute-header {
  padding: 10px 15px 10px 0;
  display: block;
  cursor: pointer;
  position: relative;
}

/*.attribute-header.active {
        color: #ff8c00;
        font-weight: 700;
    }*/
.attribute-header:hover span {
  text-decoration: underline;
}

.attribute-header.active span:before {
  content: '\2713';
  display: inline-block;
  margin-right: 4px;
  font-weight: 700;
  text-decoration: none;
  /*font-size: 0.8em;*/
}

.attribute-header i {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.kc-modal-body .attribute-header {
  padding: 10px 30px 10px 10px;
}

.attribute-body {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .2s ease-in-out;
  transition: opacity .2s ease-in-out;
  height: 0;
  overflow: hidden;
}

.attribute-container > input[type="checkbox"]:checked ~ .attribute-body {
  visibility: visible;
  opacity: 1;
  height: auto;
  padding: 0 0 15px;
  overflow: visible;
}

@media screen and (max-width: 1023px) {
  .attribute-container > input[type="checkbox"]:checked ~ .attribute-body {
    padding: 0 10px 15px;
  }
}

@media only screen and (min-width: 1024px) {
  .attribute-container .kc-input-container {
    display: block;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

.attribute-header i.fa-chevron-down {
  display: block;
}

@media screen and (max-width: 1023px) {
  .attribute-header i {
    margin-right: 5px;
  }
}

.attribute-header i.fa-chevron-up {
  display: none;
}

.attribute-container > .toggle:checked ~ .attribute-header i.fa-chevron-down {
  display: none;
}

.attribute-container > .toggle:checked ~ .attribute-header i.fa-chevron-up {
  display: block;
}

#attribute-filter.realtime .attribute-apply {
  display: none;
}

.attribute-btn {
  margin: 60px 0 5px;
  display: none;
}

#attribute-filter-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#attribute-filter-content .btn {
  background-color: #f7f7f8;
  color: #55595c;
  border-radius: 10px;
  padding: 10px 20px;
  text-decoration: none;
}

#attribute-filter-content .btn.disabled {
  color: #999999;
}

#attribute-filter-content .btn:not(.disabled):hover {
  background: #aaaaaa;
  text-decoration: none;
  cursor: pointer;
  color: #ffffff;
}

#attribute-filter-content .btn.disabled:hover {
  cursor: not-allowed;
}

#attribute-filter-content .btn.fade {
  -webkit-transition: background ease-in-out 150ms, color ease-in-out 150ms;
  transition: background ease-in-out 150ms, color ease-in-out 150ms;
}

#filter-warning {
  border: 1px solid red;
  font-size: 0.85em;
  margin: 0 0 15px;
  padding: 10px 5px;
}

#brand-search-filter {
  position: relative;
  margin: 0 0 10px;
}

#brand-search-filter input {
  width: 100%;
  border: 1px solid #dcdde0;
  border-radius: 10px;
  background-color: #f5f5f6;
  padding: 5px 30px 5px 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 34px;
}

#brand-search-filter i {
  color: #999999;
  position: absolute;
  right: 6px;
  top: 9px;
}

#attribute-ajax-loading {
  display: none;
}

/*.attribute-loading {
        overflow: hidden;
        height: 100%;
    }*/
.attribute-loading #attribute-filter-content {
  opacity: 0.2;
}

.attribute-loading #attribute-ajax-loading {
  background-color: transparent;
  display: table;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

#attribute-ajax-loading > div {
  margin-top: -10px;
}

#attribute-ajax-loading p {
  margin-top: -20px;
  margin-bottom: 5px;
}

.clear-filter {
  cursor: pointer;
}

.kc-modal-footer .clear-filter {
  background-color: #dedede;
}

.kc-modal-body .clear-filter {
  display: none;
}

.clear-filter.hide-tablet {
  background-color: #dedede;
  border: 1px solid #e6e7e9;
  border-radius: 10px;
  margin-top: 10px;
  padding: 8px;
  text-align: center;
}

#load-attribute-ajax {
  background-color: #ff8c00;
}

.mfp-container {
  padding: 0;
}

.mfp-content {
  position: static;
}

/* Redesign: Werte sind Literale, weil diese Datei einzeln kompiliert und erst
   nach style.scss ins Bundle gehaengt wird - SCSS-Variablen sind hier nicht sichtbar.
   #ededef = $line-soft, #e6e7e9 = $line, #f7f7f8 = $surface-sub, #373a3c = $text,
   10px = $border-radius, cubic-bezier(.16,.68,.43,.99) = $ease-soft.
   Der Dialog erscheint nur unter 1024px (darueber steht der Filter links). */
.kc-modal-app {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  background: #FFF;
}

.kc-modal-app .kc-modal-col {
  bottom: 0;
  top: 0;
  width: 100%;
}

.kc-modal-app .kc-modal-row, .kc-modal-app .kc-modal-col, .kc-modal-app .kc-modal-page {
  overflow: hidden;
  position: absolute;
}

/* Kopf weiss mit weicher Linie statt #eee mit gepunkteter Linie */
.kc-modal-app .kc-modal-header.kc-modal-row {
  border-bottom: 1px solid #ededef;
  background-color: #ffffff;
  font-weight: 700;
  font-size: 1.125rem;
  padding: 0 60px 0 16px;
  /* rechts Platz fuer den Schliessen-Knopf */
  height: 56px;
  line-height: 55px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kc-modal-app .kc-modal-header, .kc-modal-app .kc-modal-footer {
  padding: 0 10px;
  height: 44px;
  line-height: 44px;
}

.kc-modal-app .kc-modal-row {
  left: 0;
  right: 0;
}

.kc-modal-app .kc-modal-body.kc-modal-row {
  bottom: 72px;
  /* war 45px, Fuss ist jetzt 72px hoch */
  top: 56px;
  /* war 45px, Kopf ist jetzt 56px hoch */
  padding: 0;
}

.kc-modal-app .scroll-y {
  overflow-y: auto;
}

/* Filterzeilen auf dieselbe 16px-Innenkante wie Kopf und Fuss (war 10px) */
.kc-modal-app .kc-modal-body .attribute-header {
  padding: 12px 48px 12px 16px;
}

.kc-modal-app .kc-modal-body .attribute-header i {
  right: 16px;
  margin-right: 0;
  font-size: 0.875rem;
  color: #656565;
}

.kc-modal-app .kc-modal-body .attribute-container > input[type=checkbox]:checked ~ .attribute-body {
  padding: 0 16px 16px;
}

/* Fuss: zwei gerundete Buttons mit Abstand statt zweier Flaechen auf Stoss */
.kc-modal-app .kc-modal-footer.kc-modal-row {
  bottom: 0;
  border-top: 1px solid #ededef;
  /* war #999 */
  background-color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  padding: 11px 16px 12px;
  height: 72px;
  line-height: 48px;
}

.kc-modal-app .kc-modal-footer.kc-modal-row > div {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  width: auto;
  /* war 50% */
  cursor: pointer;
}

.kc-modal-app .kc-modal-footer .clear-filter,
.kc-modal-app .kc-modal-footer #load-attribute-ajax {
  border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99), box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99), -webkit-box-shadow 0.24s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

.kc-modal-app .kc-modal-footer .clear-filter {
  background-color: #f7f7f8;
  /* war #dedede */
  border: 1px solid #e6e7e9;
  line-height: 46px;
}

.kc-modal-app .kc-modal-footer #load-attribute-ajax {
  font-weight: 700;
  -webkit-box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
          box-shadow: 0 1px 2px rgba(20, 22, 24, 0.04), 0 2px 8px rgba(20, 22, 24, 0.05);
  /* $elevation-1 */
}

/* Schliessen als runder Knopf im Kopf statt freistehendem x */
.kc-modal-app .mfp-close {
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  padding: 0;
  font-size: 24px;
  color: #373a3c;
  background-color: #f7f7f8;
  border-radius: 50%;
  opacity: 1;
  -webkit-transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  transition: background-color 0.18s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

.kc-modal-app .mfp-close:hover,
.kc-modal-app .mfp-close:focus {
  background-color: #ededef;
}

.kc-modal-app .mfp-close:active {
  top: 10px;
  /* Magnific versetzt um 1px, der Knopf bleibt stehen */
}

#open-kc-attributes {
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 1023px) {
  #open-kc-attributes {
    display: block;
  }
  #grid-sorting .f-left, #grid-sorting .f-right {
    width: 45%;
  }
  #grid-sorting .show-tablet {
    margin-bottom: 10px;
  }
  #product-list .grid-header {
    border: 0;
    padding: 0;
    margin: 0;
  }
  #product-list .grid-header .form-control {
    font-size: 1.25em;
    line-height: 1.25em;
    height: 40px;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  #product-list .grid-header .form-control:focus {
    border-color: #ccc;
  }
}

@media only screen and (max-width: 767px) {
  #product-list .grid-header {
    margin: 0;
  }
  /*#grid-sorting .f-left, #grid-sorting .f-right {
        width: 49.2%;
    }*/
}

.attribute-sliders {
  margin: 25px 12px 50px;
}

.standard-sliders {
  margin: 10px 12px;
}

.sliders .noUi-pips .noUi-value {
  white-space: nowrap;
}

.sliders .tooltip {
  font-size: 10px;
  left: -14px;
  position: absolute;
  text-align: center;
  top: -20px;
  width: 50px;
}

/*.sliders .tooltip strong {
        display: none;
        padding: 2px;
    }*/
@media screen and (max-width: 767px) {
  .attribute-sliders {
    margin: 65px 25px 55px;
  }
  /*.standard-sliders {
                margin: 10px 12px;
            }*/
  .sliders .tooltip {
    display: block;
    /*position: absolute;*/
    border: 1px solid #D9D9D9;
    /*font-size: 10px;*/
    border-radius: 5px;
    /* zieht mit $border-radius-sm mit */
    background: #fff;
    /*top: -50px;*/
    /*padding: 5px;*/
    /*left: -9px;*/
    /*text-align: center;*/
    /*width: 50px;*/
    left: -8px;
    padding: 10px 5px;
    top: -50px;
  }
  /*.sliders .tooltip strong {
            display: block;
        }*/
}

.checkout-verify-cta-row { align-items: flex-start; }
.checkout-verify-cta-row__notice { margin-top: 1rem; margin-bottom: 1rem; text-align: center; }
@media (min-width: 992px) {
  .checkout-verify-cta-row__notice { margin-top: 0; margin-bottom: 0; } }
/* Passwort-Anforderungen (Live-Feedback) */
.password-requirements { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: .25rem 0 .5rem; padding: 0; list-style: none; font-size: .875rem; }
.password-requirements li { color: #6c757d; white-space: nowrap; }
.password-requirements li.is-valid { color: #28a745; }
.password-requirements li .fa-times { display: inline-block; margin-left: .25rem; }
.password-requirements li .fa-check { display: none; margin-left: .25rem; }
.password-requirements li.is-valid .fa-times { display: none; }
.password-requirements li.is-valid .fa-check { display: inline-block; }
.checkout-verify-cta-row { align-items: flex-start; }
.checkout-verify-cta-row > [class*="col-"]:last-child { margin-top: .5rem; }
.checkout-verify-cta-row__notice { order: 1; margin-top: 1rem; margin-bottom: 1rem; text-align: center; }
@media (min-width: 992px) {
  .checkout-verify-cta-row > [class*="col-"]:last-child { margin-top: 0; }
  .checkout-verify-cta-row__notice { order: 0; margin-top: 0; margin-bottom: 0; } }
.eu-warranty-notice { display: inline-block; width: 100%; max-width: 400px; border: 1px solid #000; }
.eu-warranty-notice a { display: block; color: inherit; text-decoration: none; }
.eu-warranty-notice img { display: block; width: 100%; height: auto; }