@charset "UTF-8";
@import url("../fonts/krone/placard-condbold/placard-condbold.css");
@import url("../fonts/krone/roboto/roboto.css");
/*@import url("../fonts/krone/open-sans/open-sans.css");*/
@import url("../fonts/krone/material-symbols/material-symbols.css");
/******************************************************
******************** ALLGEMEIN ************************
*******************************************************/
html {
  font-size: 13px;
  margin: 0;
  padding: 0;
  height: 100%;
}

#krn-trinity-modal-root {
  font-size: 16px;
}

body {
  background-color: #FFFFFF;
  color: #222222;
  font-family: "Roboto", Verdana, Geneva, sans-serif;
  line-height: 1.5;
}

sub, sup, .small, small {
  font-size: 80%;
}

hr {
  background-color: #EBDBC9;
  border: none;
  display: block;
  height: 1px;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.default-color {
  color: #222222 !important;
}

.border-grey {
  border: 1px solid #CCCCCC;
}

.border-red {
  border: 1px solid #E3000F !important;
}

.scroll-top {
  background-color: #222222;
  color: #FFFFFF !important;
  cursor: pointer;
  display: none;
  position: fixed;
  bottom: 10px;
  right: 105px;
  z-index: 999;
  text-align: center;
  padding: 0.6rem 0.7rem;
  border-radius: 1.5rem;
}

.btn-livechat {
  background-color: #E3000F !important;
  color: #FFFFFF !important;
  cursor: pointer;
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 999;
  text-align: center;
  padding: 0.6rem 1rem;
  border-radius: 1.5rem;
}
.btn-livechat:hover {
  background-color: #E3000F !important;
  color: #FFFFFF !important;
  cursor: pointer;
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 999;
  text-align: center;
  padding: 0.6rem 1rem;
  border-radius: 1.5rem;
}

.custom-file-label::after {
  content: "Suchen";
}

.bg-grey {
  background-color: #EBEBEB !important;
}

.credit-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url("../../img/teaser_bg.png");
  background-repeat: repeat;
  color: #FFFFFF;
  display: inline-block;
  padding: 2px 4px;
}

.soldout_flash {
  position: absolute;
  top: 90px;
  right: 70px;
  padding: 5px;
  transform: rotate(320deg);
  font-size: 2rem;
  font-weight: bold;
  border: 1px solid #E3000F;
  background-color: #E3000F !important;
  color: #FFFFFF;
}

.soldout-card {
  background-color: rgba(255, 255, 255, 0.4);
  opacity: 0.1;
}

.navi-wrapper {
  max-width: 970px !important;
}

.siteHeader {
  letter-spacing: 0.0262rem;
  position: relative;
  top: 0;
  z-index: 1000;
  background: #FFFFFF;
}
.siteHeader .top-bar {
  height: 3rem;
  display: grid;
  grid-template-columns: 1fr min-content 1fr;
  padding-inline: 0.5rem 1rem;
  align-items: center;
  position: relative;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0);
  transition: box-shadow 0.2s ease-out;
  transition-duration: 0.2s;
}
.siteHeader a {
  color: #222222;
}
.siteHeader a:hover, .siteHeader a:focus, .siteHeader a:active {
  color: #222222;
}
.siteHeader a.logo img {
  aspect-ratio: 204/48;
  width: 128px;
}

.header-container {
  padding: 0.5rem 0 0.5rem 1rem;
  font-size: 14px;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.header-container a {
  color: #222222 !important;
}
.header-container .btn {
  font-size: 14px;
  background: rgba(0, 0, 0, 0);
  padding: 4px 6px;
}
.header-container .btn:hover {
  background: var(--secondary, #F5F5F5);
  position: relative;
  border-radius: 2rem;
  transition: background 0.1s ease-out;
}
.header-container .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: 2rem;
  border-bottom-right-radius: 2rem;
}
.header-container .dropdown-menu .btn:hover {
  position: relative;
  border-radius: 0;
  transition: background 0.1s ease-out;
}
.header-container .dropdown-menu a.dropdown-item, .header-container .dropdown-menu a.dropdown-item:hover, .header-container .dropdown-menu a.dropdown-item:visited, .header-container .dropdown-menu a.dropdown-item:active {
  color: #222222;
}
.header-container::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 1rem;
  height: 1px;
  width: calc(100% - 2rem);
  background: #FFFFFF;
}
.header-container .fal {
  font-size: 14px;
}

.dropdown-menu-right {
  background-color: #EBEBEB;
  border-radius: 4px;
  border: 0;
  z-index: 2020;
  color: #222222;
}

.user_icon {
  display: inline-block;
  background: url("../../img/krone_user_icon.svg") no-repeat;
  height: 32px;
  width: auto;
  padding: 12px 12px;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  line-height: 1;
}

/******************************************************
*************  (Header) *************************
*******************************************************/
.site-header .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: #FFFFFF;
  border-bottom: 1px solid #DDDDDD;
  position: relative;
  z-index: 100; /* Damit Hamburger über dem Inhalt sitzt */
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.menu-toggle {
  font-size: 1.2rem;
  color: #222222;
}

.region-link {
  font-size: 0.9rem;
  color: #555555;
}

.logo-link {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.logo-link img {
  height: 40px;
}

.login-link,
.subscribe-link {
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #222222;
}

.subscribe-link {
  padding: 5px 12px;
  border: 1px solid #E3000F;
  border-radius: 20px;
  color: #E3000F;
  font-weight: 700;
  transition: background-color 0.2s;
}

.subscribe-link:hover {
  background-color: rgba(200, 0, 0, 0.05);
}

/*****************************************************
				CORNERS
*****************************************************/
.btn-danger, .btn-outline-secondary, .btn-dark, .btn-outline-danger, .btn-light, .btn-success, .btn-outline-dark {
  border-radius: 2rem;
  padding: 0.165rem 0.75rem;
}

.card-rounded {
  border-radius: 1rem;
  overflow: hidden;
}

.card-rounded-image {
  border-radius: 1rem;
}

.btn-outline-secondary, .btn-dark, .btn-outline-danger {
  font-weight: 700;
}

/******************************************************
**************** ÜBERSCHRIFTEN ************************
*******************************************************/
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "PlacardKroneCond", Verdana, Geneva, sans-serif;
}

h1, .h1 {
  font-size: 2.1rem;
}

h2, .h2 {
  font-size: 1.97rem;
}

h3, .h3 {
  font-size: 1.4rem;
}

h4, .h4 {
  font-size: 1.2rem;
}

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small {
  font-size: 65%;
}

/******************************************************
************************ LABEL ************************
*******************************************************/
label {
  font-weight: 700;
  margin-bottom: 8px;
}
label[for], label.custom-control {
  cursor: pointer;
}

/******************************************************
****************** LIST-GROUPS ************************
*******************************************************/
.list-group-item label {
  font-weight: normal;
}

.list-group {
  margin-left: 0 !important;
}

.list-group-item:first-child, .list-group-item:last-child {
  border-radius: 0;
}

[box_typ="23"] .list-group-item {
  width: 33% !important;
  color: #222222 !important;
  text-decoration: none !important;
}
[box_typ="23"] .list-group-item:hover {
  width: 33% !important;
  color: #222222 !important;
  text-decoration: none !important;
}
[box_typ="23"] .list-group-item .arrow-after {
  border-bottom: 19px solid transparent;
  border-left: 10px solid rgba(0, 0, 0, 0.125);
  border-top: 19px solid transparent;
  content: " ";
  display: block;
  height: 0;
  top: 40%;
  right: -11px;
  margin-top: 0;
  position: absolute;
  width: 0;
  z-index: 3;
}
[box_typ="23"] .list-group-item .arrow-before {
  border-bottom: 19px solid transparent !important;
  border-left: 10px solid #FFFFFF !important;
  border-top: 19px solid transparent !important;
  content: " ";
  display: block;
  height: 0;
  top: 40%;
  left: -1px;
  margin-top: 0;
  position: absolute;
  width: 0;
  z-index: 4;
}

/********************************
******* LINKS
*********************************/
a {
  color: #E3000F;
  cursor: pointer;
  text-decoration: none;
}
a:focus, a:visited, a:active {
  color: #E3000F;
  cursor: pointer;
  text-decoration: none;
}
a:hover {
  cursor: pointer;
  text-decoration: none;
  color: #AF0014 !important;
}
a.text-danger {
  color: #E3000F !important;
}
a:hover.text-danger {
  color: #AF0014 !important;
}
a.text-dark, a:hover.text-dark {
  color: #222222 !important;
}
a.dropdown-toggle, a:hover.dropdown-toggle, a:active.dropdown-toggle {
  color: #222222 !important;
}
a.dropdown-item, a:hover.dropdown-item, a:active.dropdown-item {
  color: #222222 !important;
}

.text-link {
  color: #E3000F;
  cursor: pointer;
  font-weight: 600;
}
.text-link:hover {
  color: #AF0014 !important;
}

label a {
  text-decoration: underline;
}
label a:focus, label a:visited, label a:active, label a:hover {
  text-decoration: underline;
}

.link-livechat {
  cursor: pointer;
}
.link-livechat:hover {
  color: #E3000F !important;
}

.btn-livechat.link-livechat:hover, .footer-wrapper .link-livechat:hover {
  color: #FFFFFF !important;
}

.link-black a {
  color: #222222;
  cursor: pointer;
  font-weight: 600;
}
.link-black a:focus, .link-black a:visited, .link-black a:active {
  color: #222222;
  cursor: pointer;
  font-weight: 600;
}
.link-black a:hover {
  cursor: pointer;
  font-weight: 600;
  color: #222222 !important;
}

/**** LINK OVERWRITE ****/
.card-header a {
  text-decoration: none !important;
}

.card-title-link {
  color: #222222 !important;
  text-decoration: none !important;
}
.card-title-link:hover {
  color: #222222 !important;
}

.card-title-link-white {
  color: #FFFFFF !important;
  text-decoration: none !important;
}
.card-title-link-white:hover {
  color: #FFFFFF !important;
}

.footer-wrapper a {
  color: #000000 !important;
  text-decoration: none !important;
}
.footer-wrapper a:hover {
  text-decoration: underline !important;
}

/********************************
******* ALERTS & LISTS
*********************************/
ul {
  list-style: none;
}

.alert {
  padding: 9px 16px 8px 16px;
}
.alert a {
  color: inherit !important;
}
.alert ul {
  margin-bottom: 0;
  margin-left: -25px;
}
.alert ul li {
  margin-left: -15px;
}

.alert-black {
  background-color: #000000;
  color: #fff;
}

.alert-beige {
  background-color: #F8F4ED;
  color: #5C554E;
}

.card-body ul, .card-body ol {
  margin-left: -25px;
}

.card-text ul {
  color: #222222;
  margin-left: -20px;
}

.content-grid ul li:before {
  color: #222222;
  content: "●";
  margin: 0 5px 0 -15px;
}
.content-grid .content-listitem-point-red ul li:before {
  color: #E3000F;
  content: "●";
  margin: 0 5px 0 -15px;
}
.content-grid .content-listitem-check-green ul li:before {
  color: #2FAA4B;
  content: "\f00c";
  font-family: "Font Awesome 5 Pro", sans-serif;
  margin: 0 5px 0 -19px;
}
.content-grid .content-listitem-check-red ul li:before {
  color: #E3000F;
  content: "\f00c";
  font-family: "Font Awesome 5 Pro", sans-serif;
  margin: 0 5px 0 -15px;
}
.content-grid .content-listitem-check-black ul li:before {
  color: #000000;
  content: "\f00c";
  font-family: "Font Awesome 5 Pro", sans-serif;
  margin: 0 5px 0 -15px;
  font-weight: bold !important;
}
.content-grid .content-listitem-bullseye-green ul li:before {
  color: #2FAA4B;
  content: "\f192";
  font-family: "Font Awesome 5 Pro", sans-serif;
  margin: 0 5px 0 -15px;
}
.content-grid .content-listitem-bullseye-red ul li:before {
  color: #E3000F;
  content: "\f192";
  font-family: "Font Awesome 5 Pro", sans-serif;
  margin: 0 5px 0 -15px;
}
.content-grid .content-listitem-exclamation-green ul li:before {
  color: #2FAA4B;
  content: "\f06a";
  font-family: "Font Awesome 5 Pro", sans-serif;
  margin: 0 5px 0 -19px;
}
.content-grid .content-listitem-exclamation-red ul li:before {
  color: #E3000F;
  content: "\f06a";
  font-family: "Font Awesome 5 Pro", sans-serif;
  margin: 0 5px 0 -19px;
}
.content-grid .content-listitem-caret-circle-right-green ul li:before {
  color: #2FAA4B;
  content: "\f330";
  font-family: "Font Awesome 5 Pro", sans-serif;
  margin: 0 5px 0 -15px;
  font-weight: bold;
}
.content-grid .content-listitem-caret-circle-right-red ul li:before {
  color: #E3000F;
  content: "\f330";
  font-family: "Font Awesome 5 Pro", sans-serif;
  margin: 0 5px 0 -15px;
  font-weight: bold;
}
.content-grid .content-listitem-close ul li:before {
  color: #E3000F;
  content: "\f00d";
  font-family: "Font Awesome 5 Pro", sans-serif;
  margin: 0 5px 0 -15px;
}
.content-grid ul.list-group li:before, .content-grid .alert ul li:before, .content-grid .bootstrap-datetimepicker-widget ul li:before {
  content: none;
}

.modal ul, .modal ol {
  color: #222222;
  margin-left: -25px;
}
.modal ul li {
  margin-bottom: 8px;
}
.modal ul li:before {
  color: #222222;
  content: "●";
  margin: 0 5px 0 -15px;
}
.modal .carousel ul, .modal .carousel ol {
  margin-left: 15% !important;
}

.sidebar-div {
  background-color: transparent;
  border-top: 1px solid #CCCCCC;
  box-shadow: none;
  color: #222222 !important;
  padding: 35px 20px 20px 20px;
  transition: none;
  position: relative;
}

.sidebar-div-first {
  padding: 20px 20px 15px 20px;
  border-top: 1px solid #FFFFFF;
}

.sidebar-div-arrow, .sidebar-div-arrow2 {
  position: absolute;
  left: 40%;
  top: 0;
  width: 0;
  height: 0;
  z-index: 3;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  content: " ";
}

.sidebar-div-arrow {
  border-top: 15px solid #CCCCCC;
  top: -1px;
}

.sidebar-div-arrow2 {
  border-top: 15px solid #FFFFFF;
  top: -2px;
}

/*******************************
******* Corner
*******************************/
.carousel {
  border-radius: 1rem;
  overflow: visible;
  background-color: transparent;
}

/*******************************
******* Width
*********************************/
.w-10 {
  width: 10%;
}

.w-20 {
  width: 20%;
}

.w-25 {
  width: 25%;
}

.w-50 {
  width: 37%;
}

.w-75 {
  width: 70%;
}

.w-90 {
  width: 80%;
}

/********************************
******* FORMULARE
*********************************/
.form-group {
  margin-bottom: 20px;
}

.article_amount_minus, .article_amount_plus {
  display: -ms-flexbox;
  display: flex;
  cursor: pointer !important;
}

.article_amount_minus {
  margin-right: -1px;
}

.article_amount_plus {
  margin-left: -1px;
}

.form-control, .input-group-append button, .custom-select {
  font-size: 16px;
}

audio {
  box-shadow: none !important;
}
audio.focus, audio:focus, audio.active, audio:active {
  box-shadow: none !important;
}

.form-control {
  border: 1px solid #CCCCCC;
  padding: 10px 12px;
  height: calc(2.25rem + 11px);
}

.custom-select {
  border: 1px solid #CCCCCC;
  height: calc(2.25rem + 11px);
  padding: 7px 12px 10px 12px;
}
.custom-select.radius {
  border-radius: 1.25rem;
}

.input-group-append .input-group-text {
  background-color: #E3000F;
  border-color: #E3000F;
  color: #FFFFFF;
}

/*
*   PLACEHOLDER COLOR CHANGE
*   do not group these rules
*/
.form-control::-webkit-input-placeholder, .form-control:-moz-placeholder, .form-control::-moz-placeholder, .form-control:-ms-input-placeholder {
  color: #BBBBBB;
}

.form-group {
  position: relative;
}

.form-control {
  padding: 12px;
  font-size: 14px;
  border: 1px solid #c6c6c6;
  width: 100%;
  margin-bottom: 18px;
  color: #888;
  font-weight: 300;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

label {
  position: absolute;
  left: 5px;
  top: 10px;
  width: 85%;
  color: #999;
  font-size: 0.8rem;
  display: inline-block;
  padding: 4px 10px;
  font-weight: 400;
  background-color: rgba(255, 255, 255, 0);
  -moz-transition: color 0.3s, top 0.3s, background-color 0.8s;
  -o-transition: color 0.3s, top 0.3s, background-color 0.8s;
  -webkit-transition: color 0.3s, top 0.3s, background-color 0.8s;
  transition: color 0.3s, top 0.3s, background-color 0.8s;
}
label.active {
  top: -11px;
  color: #555;
  width: auto;
  height: 25px;
  /*background: linear-gradient(0deg, rgba(255, 0, 0, 0) 70%, white 30%);*/
  background-color: #FFFFFF;
}

/* FF 4-18 */
/* FF 19+ */
/* IE 10+ */
/********************************
******* TABLES
*********************************/
.current-list hr {
  border-color: #D0D0D0 !important;
  background-color: #D0D0D0 !important;
}

.table {
  border-bottom: 1px solid #F2F2F2;
}
.table.table-borderless {
  border-bottom: none !important;
}
.table thead {
  background-color: #E3000F;
  color: #FFFFFF;
}
.table td {
  padding: 5px 10px;
  vertical-align: middle;
}
.table th {
  padding: 5px 10px;
  vertical-align: middle;
  font-weight: 600;
}

.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #FFFFFF;
}
.table-striped > tbody > tr:nth-child(even) > td, .table-striped > tbody > tr:nth-child(even) > th {
  background-color: #F2F2F2;
}

.table-price {
  width: 100% !important;
}
.table-price thead {
  background-color: #EEEEEE !important;
  color: #222222 !important;
}
.table-price th, .table-price td {
  text-align: left !important;
}
.table-price th {
  white-space: nowrap !important;
}

/******************************************************
***************** CUSTOM CONTROLS *********************
*******************************************************/
/*.custom-checkbox .custom-control-input:checked ~ .custom-control-label:before {
	background-color: $white;
	border-color: $black;
	color: $black;
}

.custom-radio .custom-control-input {
	&:checked ~ .custom-control-label:before {
		background-color: $white;
		border: 4px solid $black;
		color: $black;
	}

	~ .custom-control-label:before {
		background-color: $white;
		border: 1px solid $black;
		color: $black;
	}
}

.custom-checkbox .custom-control-input ~ .custom-control-label:before {

	border-radius: 0 !important;
}
.custom-radio .custom-control-input:checked~.custom-control-label::before {
	background-color: $black;
}
*/
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #000000;
}

.custom-control-input:checked ~ .custom-control-label::before {
  color: #FFFFFF;
  background-color: #000000;
}

.custom-control-label {
  cursor: pointer;
  font-weight: normal;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: block;
  font-size: 1rem;
  left: 0;
  top: 0;
  width: auto;
  color: #000000;
  padding: 0;
}
.custom-control-label .fa {
  color: #0275D8;
}

.custom-radio {
  margin: 1rem 1.6rem 1rem 0;
  border-color: #000000;
  color: #000000;
}
.custom-radio .custom-control-label {
  margin-left: 5px;
  padding-left: 0.6rem;
}
.custom-radio .custom-control-label::after, .custom-radio .custom-control-label::before {
  transform: scale(1.5);
}
.custom-radio .custom-control-label::after {
  color: #000000;
}

.custom-checkbox {
  margin: 1rem 1.6rem 1rem 0;
  border-color: #000000;
}
.custom-checkbox .custom-control-label {
  margin-left: 5px;
  padding-left: 0.6rem;
}
.custom-checkbox .custom-control-label::after, .custom-checkbox .custom-control-label::before {
  transform: scale(1.4);
}

/******************************************************
********************* TOOLTIPS ************************
*******************************************************/
.tooltip-icon {
  cursor: pointer;
  color: #000000;
  font-size: 1.1rem;
}

/******************************************************
********************** BUTTONS ************************
*******************************************************/
.btn {
  cursor: pointer;
  padding: 10px 16px;
  text-decoration: none !important;
}
.btn.btn-responsive {
  display: block !important;
  width: 100% !important;
}
.btn:hover {
  text-decoration: none !important;
}

.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-info, .btn-dark, .btn-primary:hover, .btn-secondary:hover, .btn-success:hover, .btn-danger:hover, .btn-info:hover, .btn-dark:hover {
  color: #FFFFFF !important;
}

.btn-warning, .btn-light, .btn-warning:hover, .btn-light:hover {
  color: #222222 !important;
}

.btn-link {
  color: #E3000F;
  font-weight: 600;
  padding-left: 0;
  text-align: left;
}
.btn-link:hover {
  color: #AF0014;
}

.btn-danger {
  background-color: #E3000F;
  border-color: #E3000F;
  color: #FFFFFF;
  font-weight: 600;
}
.btn-danger:hover {
  background-color: #D1000E;
  border-color: #AF0014;
  color: #FFFFFF;
}
.btn-danger:disabled {
  background-color: #c2c2c2;
  border-color: #c2c2c2;
  color: #9f9f9f;
}

.btn-light {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: #000000;
  font-weight: 400;
}
.btn-light:hover {
  background-color: #EBEBEB;
  border-color: #EBEBEB;
  color: #222222;
}

.btn-secondary {
  background-color: #41484E;
  border-color: #41484E;
  color: #FFFFFF;
}

.btn-outline-primary {
  color: #007BFF !important;
}

.btn-outline-secondary {
  color: #222222 !important;
}
.btn-outline-secondary:disabled {
  color: rgba(102, 102, 102, 0.38);
  border-color: rgba(102, 102, 102, 0.38);
  background-color: #FFFFFF;
}
.btn-outline-secondary:hover {
  color: #222222 !important;
  border-color: #222222;
  background-color: #EBEBEB;
}

.btn-outline-success {
  color: #2FAA4B !important;
}

.btn-outline-danger {
  border-color: #E3000F !important;
  color: #E3000F !important;
}
.btn-outline-danger:hover {
  border-color: #E3000F !important;
  color: #E3000F !important;
  background-color: #E3000F !important;
}
.btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active {
  color: #FFFFFF !important;
  background-color: #E3000F !important;
  border-color: #E3000F !important;
}
.btn-outline-danger:disabled {
  border-color: #c2c2c2;
  color: #9f9f9f;
  background-color: #c2c2c2;
}

.show > .btn-outline-danger.dropdown-toggle {
  color: #FFFFFF !important;
  background-color: #E3000F !important;
  border-color: #E3000F !important;
}

.btn-outline-info {
  color: #17A2B8 !important;
}

.btn-outline-dark {
  color: #343A40 !important;
}

.btn-outline-warning {
  color: #FFC107 !important;
}

.btn-outline-light {
  color: #222222 !important;
}

.btn-outline-primary:hover, .btn-outline-success:hover, .btn-outline-danger:hover, .btn-outline-info:hover, .btn-outline-dark:hover {
  color: #FFFFFF !important;
}

.btn-outline-warning:hover, .btn-outline-light:hover {
  color: #222222 !important;
}

.btn.focus, .btn:focus {
  box-shadow: none !important;
}

.btn-passwort-toggle.focus, .btn-passwort-toggle:focus {
  box-shadow: none !important;
}

.btn-iban-toggle.focus, .btn-iban-toggle:focus {
  box-shadow: none !important;
}

.btn-success.focus, .btn-success:focus {
  box-shadow: none !important;
}

.btn-danger.focus, .btn-danger:focus {
  box-shadow: none !important;
}

.btn-secondary.focus, .btn-secondary:focus {
  box-shadow: none !important;
}

.btn-warning.focus, .btn-warning:focus {
  box-shadow: none !important;
}

.btn-info.focus, .btn-info:focus {
  box-shadow: none !important;
}

.btn-outline-success.focus, .btn-outline-success:focus {
  box-shadow: none !important;
}

.btn-outline-danger.focus, .btn-outline-danger:focus {
  box-shadow: none !important;
}

.btn-outline-secondary.focus, .btn-outline-secondary:focus {
  box-shadow: none !important;
}

.btn-outline-warning.focus, .btn-outline-warning:focus {
  box-shadow: none !important;
}

.btn-outline-info.focus, .btn-outline-info:focus {
  box-shadow: none !important;
}

.btn .fa {
  margin-right: 5px;
}

.input-group input.group-button-right {
  border-right: none;
}
.input-group input.group-button-left {
  border-left: none;
}

.btn-passwort-toggle, .btn-iban-toggle {
  background-color: transparent;
  border: 1px solid #CCCCCC;
}

.btn-passwort-toggle {
  border-left: none;
}

.btn-iban-toggle {
  border-right: none;
}

.btn-delete .text-link {
  margin-top: 10px;
}

.btn-transparent {
  background-color: transparent !important;
  cursor: default !important;
}

.card-header .btn .fa {
  margin-right: 0;
}

.btn-bookmark {
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #E3000F !important;
}
.btn-bookmark:before {
  font-family: "Font Awesome 5 Pro", sans-serif;
  content: "\f004";
}
.btn-bookmark:hover {
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #E3000F !important;
}
.btn-bookmark.active:before {
  font-family: "Font Awesome 5 Pro", sans-serif;
  content: "\f004";
  font-weight: bold;
}

.btn-disabled {
  background-color: #c2c2c2 !important;
  border-color: #c2c2c2 !important;
  color: #9f9f9f !important;
}
.btn-disabled:hover {
  color: #9f9f9f !important;
}

/**** SHARE-BUTTONS ****/
.social-media .title-wrapper {
  margin-top: -4px;
}
.social-media a {
  text-decoration: none !important;
}
.social-media .btn {
  padding: 2px;
}
.social-media .btn-recommend-icon, .social-media .btn-recommend-text {
  float: left;
}
.social-media .btn-recommend-icon {
  font-size: 1.5rem;
}
.social-media .btn-recommend-text {
  font-size: 0.7rem;
  line-height: 0.7;
  text-align: left;
  padding-left: 10px;
}
.social-media .btn-success {
  background-color: #3EA434 !important;
  border-color: #3EA434 !important;
}
.social-media .btn-success:hover {
  background-color: #3EA434 !important;
  border-color: #3EA434 !important;
}
.social-media .btn-primary {
  background-color: #283583 !important;
  border-color: #283583 !important;
}
.social-media .btn-primary:hover {
  background-color: #283583 !important;
  border-color: #283583 !important;
}

.share-options {
  width: auto;
  height: auto;
  color: #FFFFFF;
}

.social-media-btn.fab, .social-media-btn.fas {
  padding: 10px;
  font-size: 27px;
  width: 50px;
  text-align: center;
  margin: 5px 2px;
  border-radius: 50%;
  text-decoration: none !important;
}
.social-media-btn:hover {
  opacity: 0.7;
  text-decoration: none !important;
  color: white !important;
}

a:link.social-media-btn, a:visited.social-media-btn {
  text-decoration: none !important;
}

.social-media-btn.fa-whatsapp {
  background: #2BD266;
  color: #FFFFFF;
}
.social-media-btn.fa-copylink {
  background: #0275D8;
  color: #FFFFFF;
}
.social-media-btn.fa-sms {
  background: #28CB75;
  color: #FFFFFF;
}
.social-media-btn.fa-facebook-messenger {
  background: #0669FC;
  color: #FFFFFF;
}
.social-media-btn.instagram {
  background: #1877F2;
  color: #FFFFFF;
}
.social-media-btn.fa-facebook-f {
  background: #0075FA;
  color: #FFFFFF !important;
}
.social-media-btn.fa-twitter {
  background: #000000;
  color: #FFFFFF;
  font-size: 30px;
}
.social-media-btn.fa-twitter:before {
  content: "𝕏";
  background: #000000;
  color: #FFFFFF;
}
.social-media-btn.fa-linkedin-in {
  background: #0A66C2;
  color: #FFFFFF;
}
.social-media-btn.fa-envelope {
  background: #0DBEF3;
  color: #FFFFFF;
}
.social-media-btn.fa-facebook-f.bg-black {
  background: #000000 !important;
  color: #FFFFFF;
}
.social-media-btn.fa-spotify {
  background: #2B3F59;
  color: #1DB954 !important;
}

/******************************************************
********************** FLASH **************************
*******************************************************/
.flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 95px solid #E3000F;
  border-bottom: 95px solid transparent;
  border-right: 95px solid transparent;
}

.flash-text {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 8px;
  width: 120px;
  left: -28px;
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  transform: rotate(-45deg);
  height: 44px;
  max-height: 44px;
}

.flash_right {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 95px solid #E3000F;
  border-bottom: 95px solid transparent;
  border-left: 95px solid transparent;
  z-index: 10;
}

.flash-text_right {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 8px;
  width: 120px;
  right: -28px;
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  transform: rotate(45deg);
  height: 44px;
  max-height: 44px;
  z-index: 11;
}

.flash_abo_right {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 120px solid #E3000F;
  border-bottom: 120px solid transparent;
  border-left: 120px solid transparent;
  z-index: 10;
}

.flash-text_abo_right {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 18px;
  width: 120px;
  right: -25px;
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  transform: rotate(45deg);
  height: 44px;
  max-height: 44px;
  z-index: 11;
}

/******************************************************
********************** RABATT-FLASH **************************
*******************************************************/
.rabattflash {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 50px;
  height: 50px;
  background: #000000;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

.rabatt-text {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 8px;
  width: 44px;
  right: 8px;
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  height: 44px;
  max-height: 44px;
}

/******************************************************
************ BUTTONS FÜR BESTELLSTRECKE ***************
*******************************************************/
.btn-breadcrumb-3 .btn {
  width: 33%;
}
.btn-breadcrumb-3 .btn:last-of-type {
  width: 34%;
}

.btn-breadcrumb-4 .btn {
  width: 25%;
}

.btn-breadcrumb-5 .btn, .btn-breadcrumb-6 .btn {
  width: 20%;
}

.btn-breadcrumb a {
  cursor: default !important;
}
.btn-breadcrumb .btn:not(:last-child):after {
  border-bottom: 20px solid transparent;
  border-left: 10px solid #CCCCCC;
  border-top: 20px solid transparent;
  content: " ";
  display: block;
  height: 0;
  left: 100%;
  margin-top: -20px;
  position: absolute;
  top: 50%;
  width: 0;
  z-index: 3;
}
.btn-breadcrumb .btn:not(:last-child):before {
  border-bottom: 20px solid transparent;
  border-left: 10px solid #CCCCCC;
  border-top: 20px solid transparent;
  content: " ";
  display: block;
  height: 0;
  left: 100%;
  margin-left: 1px;
  margin-top: -20px;
  position: absolute;
  top: 50%;
  width: 0;
  z-index: 3;
}
.btn-breadcrumb .btn-danger:not(:last-child):before {
  margin-left: 0;
}
.btn-breadcrumb .btn {
  padding: 10px 0;
}
.btn-breadcrumb .btn.btn-secondary {
  background-color: #F8F8F8;
  border-color: #CCCCCC;
  color: #222222 !important;
  transition: none;
  cursor: default;
}
.btn-breadcrumb .btn.btn-secondary:hover {
  background-color: #F8F8F8;
  transition: none;
}
.btn-breadcrumb .btn.btn-secondary.active, .btn-breadcrumb .btn.btn-secondary:active, .btn-breadcrumb .btn.btn-secondary.focus, .btn-breadcrumb .btn.btn-secondary:focus {
  border-color: #CCCCCC !important;
}
.btn-breadcrumb .btn.btn-danger {
  transition: none;
}
.btn-breadcrumb .btn.btn-danger:hover {
  transition: none;
}
.btn-breadcrumb .btn:first-child, .btn-breadcrumb .btn:last-child {
  padding: 10px 0;
}
.btn-breadcrumb .btn.btn-secondary:not(:last-child):after, .btn-breadcrumb .btn.btn-secondary:hover:not(:last-child):after {
  border-left: 10px solid #F8F8F8;
}
.btn-breadcrumb .btn.btn-secondary:not(:last-child):before, .btn-breadcrumb .btn.btn-secondary:hover:not(:last-child):before {
  border-left: 10px solid #CCCCCC;
}
.btn-breadcrumb .btn.btn-secondary.bg-white:not(:last-child):after {
  border-left: 10px solid #FFFFFF;
}
.btn-breadcrumb .btn.btn-danger:not(:last-child):after {
  border-left: 9px solid #E3000F;
}
.btn-breadcrumb .btn.btn-danger:not(:last-child):before {
  border-left: 10px solid #CCCCCC;
}
.btn-breadcrumb .btn.btn-danger:hover:not(:last-child):after {
  border-left: 10px solid #AF0014;
}
.btn-breadcrumb .btn.btn-danger:hover:not(:last-child):before {
  border-left: 10px solid #CCCCCC;
}

/** The Magic **/
/** Default button **/
/** The Spacing **/
/** Danger button **/
.btn-arrow-down {
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC;
  box-shadow: 0 2px 4px 0 rgba(162, 162, 162, 0.5);
  color: #222222 !important;
  padding: 20px;
  transition: none;
}
.btn-arrow-down:hover {
  background-color: #EBEBEB;
  transition: none;
}

.btn-arrow-down-active {
  border: 2px solid #2FAA4B;
}
.btn-arrow-down-active:after {
  border-left: 19px solid transparent;
  border-right: 19px solid transparent;
  border-top: 10px solid #FFFFFF;
  bottom: -8px;
  content: " ";
  display: block;
  height: 0;
  left: 45%;
  margin-top: 0;
  position: absolute;
  width: 0;
  z-index: 3;
}
.btn-arrow-down-active:before {
  border-left: 19px solid transparent;
  border-right: 19px solid transparent;
  border-top: 10px solid #CCCCCC;
  bottom: -8px;
  content: " ";
  display: block;
  height: 0;
  left: 45%;
  margin-bottom: -2px;
  position: absolute;
  width: 0;
  z-index: 3;
}
.btn-arrow-down-active:hover:after {
  border-top: 10px solid #EBEBEB;
}
.btn-arrow-down-active:before {
  border-top: 10px solid #2FAA4B;
}

.btn-arrow-down.btn-disabled {
  opacity: 0.5;
}

.btn-adress-switch {
  height: 155px;
}

/******************************************************
********** BUTTONS ALS CHECKBOXEN STYLE ***************
*******************************************************/
.btn-checkbox {
  display: block;
}
.btn-checkbox .btn {
  white-space: normal !important;
}
.btn-checkbox .btn + .btn {
  margin-left: 0;
  margin-top: -1px;
}
.btn-checkbox .btn-light, .btn-checkbox .active {
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC;
  box-shadow: none;
  color: #222222 !important;
  padding: 15px;
  transition: none;
  width: 100%;
  border-radius: 0;
}

.btn-extraoffer-checkbox, .btn-extraoffer-checkbox-abonnent {
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC;
  box-shadow: none;
  color: #222222 !important;
  padding: 15px;
  transition: none;
  width: 100%;
  border-radius: 0;
}
.btn-extraoffer-checkbox.active, .btn-extraoffer-checkbox-abonnent.active {
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC;
  box-shadow: none;
  color: #222222 !important;
  padding: 15px;
  transition: none;
  width: 100%;
  border-radius: 0;
}

.btn-extraoffer-checkbox, .btn-extraoffer-checkbox-abonnent {
  border-radius: 0.25rem;
  border: 1px solid #CCCCCC;
  white-space: normal;
  position: relative;
}
.btn-extraoffer-checkbox.active, .btn-extraoffer-checkbox-abonnent.active {
  border-radius: 0.25rem;
  border: 1px solid #CCCCCC;
  white-space: normal;
  position: relative;
}

.btn-checkbox .btn-light:hover, .btn-extraoffer-checkbox:hover, .btn-extraoffer-checkbox-abonnent:hover {
  background-color: #EBEBEB;
  transition: none;
}

.btn-checkbox .btn-light:not(:disabled):not(.disabled).active, .btn-extraoffer-checkbox:not(:disabled):not(.disabled).active, .btn-extraoffer-checkbox-abonnent:not(:disabled):not(.disabled).active {
  border: 1px solid green;
  background-color: #FFFFFF;
}

.btn-checkbox .btn-light .fas, .btn-extraoffer-checkbox .fas, .btn-extraoffer-checkbox-abonnent .fas {
  display: none;
}

.btn-checkbox .active .fas, .btn-extraoffer-checkbox.active .fas, .btn-extraoffer-checkbox-abonnent.active .fas {
  display: inline-block;
  position: absolute;
  right: 10px;
  bottom: 10px;
}

/******************************************************
******************* AUSWAHLBOX ************************
*******************************************************/
.option-choose-wrapper li.active {
  border-color: green;
  background-color: #FFFFFF;
  color: #222222;
}
.option-choose-wrapper li .fas {
  margin-top: 4px;
  margin-left: 30px;
  color: #FFFFFF !important;
}
.option-choose-wrapper li.active .fas {
  color: green !important;
}

/******************************************************
*********************** HEADER ************************
*******************************************************/
.desktop-navi-wrapper {
  position: fixed;
  width: 100%;
  margin-top: 0 !important;
  top: 0;
  z-index: 999;
}

/* MOBILE NAVI */
.mobile-navigation {
  position: fixed;
  background-color: #FFFFFF;
  z-index: 999;
  width: 100%;
  font-size: 1.2rem !important;
}
.mobile-navigation div {
  padding: 0;
}

ul.navigation-icons-ul {
  margin: 0 !important;
  padding: 0 !important;
}

.navigation-icons-ul li {
  display: inline-block !important;
  list-style-type: none !important;
  border-right: 1px solid #F1F1F1;
}
.navigation-icons-ul li a, .navigation-icons-ul li .autofill {
  /*padding: 0 0.9rem 0 0.5rem !important;*/
}

div.navigation-icons-logout {
  padding: 0 !important;
  font-size: 1rem !important;
}

.navbar {
  background-color: #fcfbf7 !important;
  padding: 0;
}
.navbar .redbar {
  background-color: #E3000F !important;
  padding: 6px 25px;
  position: fixed;
  z-index: 99;
  top: 37px;
}
.navbar a.nav-link {
  color: #222222;
  border-bottom: 2px solid transparent;
}
.navbar .navi-spacer {
  border-bottom: 2px solid transparent;
}

.navbar-brand {
  color: #000000 !important;
  font-family: "PlacardKroneCond", Verdana, Geneva, sans-serif;
  font-size: 1.6rem;
  text-decoration: none;
}
.navbar-brand:hover {
  color: #000000 !important;
}

.navbar-toggler {
  border: none;
  cursor: pointer;
  left: 15px;
  padding: 0;
  position: absolute;
  top: 15px;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='4' stroke-linecap='square' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

.navbar-nav {
  padding-bottom: 0;
  padding-top: 5px;
}
.navbar-nav li a {
  color: #222222 !important;
  font-size: 1rem;
  padding: 10px;
  padding-bottom: 5px;
  text-decoration: none !important;
}
.navbar-nav li a:hover {
  background-color: #F8F8F8;
}
.navbar-nav .nav-item {
  margin-left: 5px;
  margin-right: 5px;
}
.navbar-nav a.nav-link {
  font-weight: 500;
  border-bottom: 4px solid transparent;
}
.navbar-nav a.nav-link:hover {
  background: none;
  border-bottom: 4px solid #000000;
}
.navbar-nav a.nav-link.active {
  background: none;
  border-bottom: 4px solid #E3000F;
}
.navbar-nav a.nav-link.active:hover {
  background: none;
  border-bottom: 4px solid #E3000F;
}
.navbar-nav .nav-link.dropdown-toggle::after {
  display: inline-block;
  margin-top: 0.255em;
  margin-left: 0;
  vertical-align: 0.255em;
  font-family: "Font Awesome 5 Pro", sans-serif;
  content: "\f107";
  border: none;
}
.navbar-nav a.nav-link.dropdown-toggle {
  background-color: transparent;
  border-radius: 2rem;
  padding-left: 15px;
  padding-bottom: 6px;
  border-bottom: none;
}
.navbar-nav a.nav-link.dropdown-toggle:hover {
  background-color: #EBEBEB;
  border-radius: 2rem;
  border-bottom: none;
}
.navbar-nav a.nav-link.loginlnk {
  background-color: transparent;
  border-radius: 2rem;
  border-bottom: none;
}
.navbar-nav a.nav-link.loginlnk:hover {
  background-color: #EBEBEB;
  border-radius: 2rem;
  border-bottom: none;
}

#userDropdownMobile.dropdown-toggle::after {
  display: inline-block;
  margin-top: 0.255em;
  margin-left: 0;
  vertical-align: 0.255em;
  /*font-family: $font-awesome;
  content: '\f0c9';*/
  content: "";
  border: none;
}

.navbar-no-wrap {
  text-wrap: nowrap;
  white-space: nowrap;
}

.navbar-collapse {
  margin-bottom: 0.1rem !important;
  padding-left: 5px;
}

.navbar-nav-scroll {
  max-width: 100%;
  height: 50px;
  overflow: hidden;
  overflow-x: auto;
  align-content: flex-start;
}

#menu-trigger .btn {
  padding: 10px 0;
}
#menu-trigger .fa-bars {
  margin: 0;
  padding: 10px;
}
#menu-trigger .fa-bars:hover {
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 2.25rem;
}

.btn#menu-trigger {
  padding-top: 10px;
  padding-right: 0;
  padding-bottom: 10px;
  padding-left: 15px;
}

.background-gradient {
  position: absolute;
  display: inline-block;
  top: 0;
  height: 700px;
  width: 100%;
  background: #C1B2A4;
  background: linear-gradient(180deg, rgb(193, 178, 164) 0%, rgb(255, 255, 255) 51%, rgb(255, 255, 255) 100%);
  z-index: -99;
}

.navi-spacer {
  background-color: transparent;
  height: 10px;
  border-bottom: 2px solid transparent;
  padding: 10px;
}

.raetselkrone-navi-spacer {
  background-color: transparent;
  height: 90px;
  border-bottom: 2px solid transparent;
  padding: 10px;
}

@media (min-width: 992px) {
  .navi-spacer {
    height: 10px;
    padding: 10px;
  }
  .navbar-collapse {
    padding-left: 15px;
  }
  .raetselkrone-navi-spacer {
    height: 130px;
  }
}
.navigation-icons-logout .logout-dropdown {
  background-color: #F1F1F1;
  border-radius: 0 !important;
  border: none;
  top: 2px !important;
  right: 0 !important;
  padding: 0 !important;
  z-index: 2020;
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
  min-width: 170px;
  border-top: 1px solid #E2E2E2;
}
.navigation-icons-logout .logout-dropdown .navbar-nav {
  padding: 0 !important;
}
.navigation-icons-logout .logout-dropdown li {
  padding: 0 !important;
}
.navigation-icons-logout .logout-dropdown li a {
  display: block;
  color: #222222 !important;
  border-radius: 0;
  background-color: #F1F1F1;
  margin-left: 0;
  line-height: 24px !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  padding: 12px 12px;
  border-left: none !important;
}

#mobile-navi {
  position: fixed;
  top: 93px;
  width: 100%;
  height: 100vh;
  z-index: 999;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
}
#mobile-navi .navbar-nav {
  max-height: 78vh;
  overflow-y: scroll;
}

.logout-name {
  padding: 0 1rem !important;
}

/* DESKTOP NAVI */
.navi-top-bar {
  font-size: 1rem;
  background-color: #FDF7E3;
  font-family: "Roboto", Verdana, Geneva, sans-serif;
  color: #222222;
}
.navi-top-bar div {
  color: #222222;
  font-weight: 300;
  line-height: 40px;
  padding: 0 15px 0 3px;
}
.navi-top-bar div strong {
  font-weight: 600;
}

@media (min-width: 992px) {
  .navi-top-bar {
    background-color: #FDF7E3;
  }
}
@media (min-width: 992px) {
  .navi-top-bar div {
    padding: 0 45px;
  }
}
.navi-registrieren {
  border-left: 1px solid #222222;
  margin-left: 10px;
  padding-left: 10px;
}

.navi-top-bar a {
  padding: 8px 12px 5px 12px;
  border-radius: 12px;
  display: inline-block;
  font-size: 0.86rem;
  line-height: 16px;
  font-weight: normal;
  color: #222222;
  text-decoration: none !important;
}
.navi-top-bar a:hover {
  background-color: #FFECAC;
  text-decoration: none !important;
  color: #222222 !important;
}

.navi-bottom-bar {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #FFFFFF;
  color: #222222;
  font-family: "Roboto", Verdana, Geneva, sans-serif;
}

.navi-logo img {
  height: 102px;
}

.sticky-bottom-bar {
  padding-top: 0;
}
.sticky-bottom-bar img {
  height: 70px !important;
}

.navi-link-wrapper {
  margin-left: 20px;
}

.navi-symbols {
  font-weight: 500;
  color: #222222;
  text-align: right;
  margin-bottom: 7px;
}
.navi-symbols ul {
  margin: 0;
  padding: 0;
  display: inline-block;
}
.navi-symbols li {
  list-style-type: none;
  display: inline-block;
}
.navi-symbols li a {
  display: inline-block;
  text-decoration: none;
  color: #222222;
  border-radius: 50%;
  background-color: #FFFFFF;
  padding: 8px;
  padding-bottom: 0;
  margin-left: 20px;
  line-height: 24px !important;
}
.navi-symbols li a:hover {
  color: #222222 !important;
  background-color: #EFEFEF;
}
.navi-symbols li > div {
  padding: 6px 12px 0 6px;
  border-radius: 15px;
  cursor: pointer;
}
.navi-symbols li div:hover {
  color: #222222 !important;
  background-color: #EFEFEF;
}
.navi-symbols .logout-dropdown {
  padding: 0 !important;
  min-width: 170px;
  max-width: 170px;
  background-color: #F1F1F1;
  border-radius: 4px !important;
  border: none;
  z-index: 2020;
}
.navi-symbols .logout-dropdown ul {
  margin: 0 !important;
  display: block;
  border-radius: 4px !important;
  padding: 5px 0 !important;
}
.navi-symbols .logout-dropdown li {
  list-style-type: none;
  display: block;
  padding: 0 !important;
}
.navi-symbols .logout-dropdown li a {
  display: block;
  color: #222222 !important;
  border-radius: 0;
  background-color: #F1F1F1;
  margin-left: 0;
  line-height: 24px !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  padding: 12px 12px;
  border-left: none !important;
}
.navi-symbols .logout-dropdown li a:hover {
  background-color: #E2E2E2 !important;
}

.navi-links {
  font-weight: 500;
  color: #222222;
}
.navi-links ul {
  margin: 0;
  padding: 0;
  width: 100%;
  border-top: 1px solid #E3E3E3;
  border-bottom: 1px solid #E3E3E3;
  display: block;
}
.navi-links li {
  list-style-type: none;
  display: inline-block;
  border-bottom: 4px solid transparent !important;
}
.navi-links li:last-child {
  float: right;
}
.navi-links li:first-child a {
  width: 45px;
}
.navi-links li a {
  font-size: 14px !important;
  line-height: 20px;
  font-weight: 500;
  padding: 14px 12px 6px 12px;
  display: inline-block;
  text-decoration: none;
  color: inherit;
}
.navi-links li a:hover {
  color: #222222 !important;
}
.navi-links li:hover, .navi-links li.active {
  border-bottom: 4px solid #222222 !important;
  color: #222222 !important;
}

.filterMenuButton {
  margin-left: 10px;
}

.filterMenuButton-mobile {
  position: relative;
  padding-right: 20px !important;
}

.shoppingcard-counter, .bookmark-counter {
  position: relative;
}

.shoppingcard-item-number, .bookmark-item-number, .filter-item-number {
  font-size: 0.6rem;
  line-height: 1;
  font-weight: normal;
  border-radius: 9px;
  background: #E3000F;
  color: #FFFFFF;
  padding: 1px 3px !important;
  position: absolute;
  top: 0;
  right: 10px;
}

@media (min-width: 992px) {
  .shoppingcard-item-number, .bookmark-item-number, .filter-item-number {
    top: 5px;
    right: 5px;
  }
}
.header-suche {
  width: 250px;
}
.header-suche .form-control {
  background-color: #FFECAC;
  border-color: #FFECAC;
  color: #222222 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.header-suche .input-group-append {
  background-color: #FFECAC;
  border-color: #FFECAC;
  color: #222222 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.header-suche .input-group-append button {
  background-color: #FFECAC;
  border-color: #FFECAC;
  color: #222222 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.header-suche .form-control, .header-suche .input-group-append {
  font-size: 14px;
}
.header-suche .form-control::-webkit-input-placeholder, .header-suche .form-control:-moz-placeholder, .header-suche .form-control::-moz-placeholder, .header-suche .form-control:-ms-input-placeholder {
  color: #999999;
}

/******************************************************
	 OFFCANVAS
******************************************************/
.offcanvas-menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  max-width: 340px;
  height: 100%;
  background-color: #FFFFFF;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  z-index: 2147483999;
  transition: transform 0.3s ease-in-out;
}

/* Wenn geöffnet: vollständig eingeblendet */
.offcanvas-menu.open {
  left: 0;
}

/* Overlay hinter dem Offcanvas */
.offcanvas-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  z-index: 150;
}

.offcanvas-overlay.visible {
  opacity: 1;
  visibility: visible;
}

/******************************************************
   Offcanvas HEADER
******************************************************/
.offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 15px;
  border-bottom: 1px solid #EEEEEE;
  background-color: #fcfbf7;
}

.offcanvas-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #222222;
}

.offcanvas-close {
  font-size: 1.2rem;
  color: #222222;
}

/******************************************************
   Offcanvas BODY
******************************************************/
.offcanvas-body {
  padding: 15px;
}

.offcanvas-subscribe-btn {
  display: block;
  text-align: center;
  background-color: #E3000F;
  color: #FFFFFF;
  font-weight: 700;
  border-radius: 25px;
  padding: 12px 0;
  margin-bottom: 20px;
  text-decoration: none;
  transition: background-color 0.2s;
}

.offcanvas-subscribe-btn:hover, .offcanvas-subscribe-btn a:hover {
  background-color: #C20000;
  color: #FFFFFF !important;
}

.offcanvas-quick-links {
  margin-bottom: 20px;
  margin-left: 1px;
  padding-left: 0;
}

.offcanvas-quick-links li {
  margin-bottom: 15px;
}

.offcanvas-quick-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.95rem;
  color: #222222;
}

.offcanvas-quick-links a .right-arrow {
  font-size: 0.8rem;
  color: #888888;
}

/*.offcanvas-quick-links .bookmark-counter, .offcanvas-quick-links .shoppingcard-counter {
	padding-right: 0px !important;
}*/
.offcanvas-quick-links .shoppingcard-item-number, .offcanvas-quick-links .bookmark-item-number {
  left: 10px;
  right: initial;
  top: 9px;
}

a.offcanvas-elem-hover {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1em 1em;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  border-radius: 2em;
  transition: background-color 0.3s ease;
}
a.offcanvas-elem-hover .text-content {
  flex-grow: 1;
  text-align: center;
}
a.offcanvas-elem-hover:hover {
  background-color: #EBEBEB;
  color: #222222 !important;
}
a.offcanvas-elem-hover .offcanvas-icon-left {
  margin-left: 0.5em;
}
a.offcanvas-elem-hover .offcanvas-icon-right {
  margin-right: 0.5em;
}

.notifications-item a {
  gap: 5px;
}

.notifications-item .badge-new {
  background-color: #E30000;
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 8px;
}

/******************************************************
   Suchfeld im Offcanvas
******************************************************/
.offcanvas-search {
  margin-bottom: 20px;
}

.search-wrapper {
  position: relative;
}

.search-wrapper .search-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #888888;
  font-size: 1rem;
}

.search-wrapper input {
  width: 100%;
  padding: 10px 40px 10px 35px;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  font-size: 0.95rem;
}

.search-wrapper .search-close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1rem;
  color: #888888;
}

.offcanvas-body hr {
  border: none;
  border-top: 1px solid #EEEEEE;
  margin: 10px 0;
}

.offcanvas-nav ul {
  padding-left: 0;
}

/* Direktlinks */
.primary-list li {
  margin-bottom: 15px;
}

.primary-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  color: #222222;
}

.offcanvas-nav .collapsible-list .collapsible-item {
  display: block;
  width: 100%;
  margin-bottom: 15px;
}
.offcanvas-nav .collapsible-list .collapsible-item .toggle-icon {
  padding: 5px;
}
.offcanvas-nav .collapsible-list .collapsible-item .toggle-icon:hover {
  background-color: #CCCCCC;
  border-radius: 2.25rem;
}
.offcanvas-nav .collapsible-list .collapsible-main-link {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.offcanvas-nav .collapsible-list .collapsing {
  height: auto !important;
}
.offcanvas-nav .collapsible-list .collapsible-toggle {
  width: 100%;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 500;
  color: #222222;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 1em;
  background: none;
  border: none;
}
.offcanvas-nav .collapsible-list .collapsible-toggle:hover {
  border-radius: 2em;
  background-color: #EBEBEB;
  color: #222222 !important;
}
.offcanvas-nav .collapsible-list .collapsible-toggle .toggle-icon {
  transition: transform 0.2s ease-in-out;
  font-size: 0.9rem;
  color: #888888;
}
.offcanvas-nav .collapsible-list .collapsible-toggle .expanded {
  border-radius: 2em;
  background-color: #EBEBEB;
}
.offcanvas-nav .service-links li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1em 1em;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  border-radius: 2em;
  transition: background-color 0.3s ease;
  font-weight: 700;
}
.offcanvas-nav .service-links li .text-content {
  flex-grow: 1;
  text-align: center;
}
.offcanvas-nav .service-links li a {
  text-decoration: none;
  color: inherit;
}
.offcanvas-nav .service-links li:hover {
  background-color: #EBEBEB;
  color: #222222 !important;
}
.offcanvas-nav .service-links li .offcanvas-icon-left {
  margin-left: 0.5em;
  padding-right: 0.8em;
}

/* Untermenü (hidden) */
.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  padding-left: 15px !important;
}

.submenu li {
  margin-bottom: 8px;
}

.submenu li a {
  font-size: 0.9rem;
  color: #444444;
}

.submenu li a.active {
  font-weight: 600;
}

/******************************************************
********************** FOOTER ************************
*******************************************************/
.footer-wrapper {
  font-family: "Roboto", Verdana, Geneva, sans-serif;
  font-size: 12px;
  color: #000000 !important;
  font-weight: 300;
}

.footer-top-wrapper {
  background-color: #F2F2F2;
}

.footer-bottom-wrapper {
  background-color: #FFFFFF;
}

.footer-links div {
  margin-bottom: 9px;
}

.footer-wrapper .label-wrapper {
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

.footer-divider {
  margin: 10px 0;
  height: 1px;
  border-bottom: 1px solid #CCCCCC;
}

/******************************************************
********************** CONTENT ************************
*******************************************************/
.container-fluid {
  max-width: 970px !important;
  margin: auto !important;
}

.container-fluid-navi {
  max-width: 1680px !important;
  width: 100%;
  margin: auto !important;
}

.title-wrapper {
  border-top: 1px solid #EBEBEB;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header-wrapper {
  border-bottom: 2px solid #CCCCCC;
  color: #222222 !important;
  position: relative;
  transition: border-color 0.4s ease-in-out;
  -webkit-transition: border-color 0.4s ease-in-out;
  border-bottom: 2px solid #FFFFFF;
  margin: 7px 0 5px 45px;
}

.title-wrapper h1, .title-wrapper h2, .title-wrapper h3 {
  font-family: "Roboto", Verdana, Geneva, sans-serif;
  line-height: 24px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 12px 12px 12px 4px;
  display: flex;
  align-items: center;
}
.title-wrapper h2 {
  font-size: 1.29rem;
}

.card-header-wrapper h1, .card-header-wrapper h2, .card-header-wrapper h3 {
  border-bottom: 2px solid #E3000F;
  display: inline-block;
  margin: 0 0 -2px 0;
  transition: border-color 0.4s ease-in-out;
  -webkit-transition: border-color 0.4s ease-in-out;
  /* Safari */
}

.title-wrapper h1, .card-header-wrapper h1, .title-wrapper h2, .card-header-wrapper h2 {
  line-height: 1.3;
}

.title-wrapper h3, .card-header-wrapper h3 {
  line-height: 1.5;
}

.voucher-redeem-wrapper {
  border-top: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
  cursor: pointer;
}

.card-header .card-header-wrapper h1, .card-header .card-header-wrapper h2, .card-header .card-header-wrapper h3 {
  border-bottom: 2px solid #FFFFFF;
}

.abo-title-aendern {
  color: #E3000F;
  cursor: pointer;
  font-family: "Roboto", Verdana, Geneva, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  display: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.step-change {
  color: #E3000F;
  cursor: pointer;
  font-family: "Roboto", Verdana, Geneva, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: block;
  position: absolute;
  right: 0;
  bottom: 4px;
  text-decoration: none;
}

/*
.card-warenkorb-info{
	background-color:$white !important;
	border:none !important;
	position:fixed !important;
	bottom:0 !important;
	left:0 !important;
	z-index:98;
	width:100%;
	-webkit-box-shadow:0px 0px 6px 4px rgba(0, 0, 0, 0.26) !important;
	box-shadow:0px 0px 6px 4px rgba(0, 0, 0, 0.26) !important;
}
 */
.card-warenkorb-info {
  background-color: #FFFFFF !important;
}
.card-warenkorb-info hr {
  background-color: #EBDBC9;
}
.card-warenkorb-info .card-footer {
  background-color: #FFFFFF !important;
  border-top: none !important;
}

.hero-section .container {
  max-width: 1590px;
  height: auto;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}
.hero-section .container .card .card-title {
  font-size: 2.97rem;
}

@media (min-width: 992px) {
  .card-warenkorb-info {
    margin-top: 42px !important;
  }
  .container-fluid-navi {
    width: 100%;
  }
}
/******************************************************
********************* CAROUSEL ************************
*******************************************************/
.slider-wrapper {
  padding: 0 !important;
}

@media (min-width: 992px) {
  .slider-wrapper {
    padding: 0 15px !important;
  }
}
.carousel-control-prev, .carousel-control-next {
  width: 30px;
}

.carousel-control-prev {
  left: 10px;
}

.carousel-control-next {
  right: 10px;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23222' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23222' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

.carousel-indicators {
  bottom: -50px;
}

.carousel ul, .carousel ol {
  margin-left: 15% !important;
}

.carousel-indicators > li {
  border-radius: 50%;
  cursor: pointer;
  height: 12px;
  opacity: 0.55;
  width: 12px;
  background-color: #222222;
}
.carousel-indicators > li.active {
  opacity: 1;
}

.modal .carousel-control-prev, .modal .carousel-control-next {
  margin-bottom: 60px;
}

.gewinnspielcarousel .carousel-control-prev, .gewinnspielcarousel .modal .carousel-control-next {
  margin-bottom: 60px;
}

.modal .carousel-indicators {
  bottom: -47px;
}

.carousel-caption {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px;
  text-align: left;
  background-color: transparent;
  font-size: 0.8rem;
  height: 40px;
}
.carousel-caption span {
  background-image: url("../../img/teaser_bg.png");
  background-repeat: repeat;
  color: #FFFFFF;
  display: inline-block;
  padding: 4px 10px;
}

.carousel-caption-imagetext {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px;
  text-align: right;
  background-color: transparent;
  font-size: 1.2rem;
}
.carousel-caption-imagetext span {
  background-image: url("../../img/teaser_bg.png");
  background-repeat: repeat;
  color: #FFFFFF;
  display: inline-block;
  padding: 4px 10px;
}

/*** EIGENE GALLERY ***/
.gallery-preview {
  position: relative;
  width: 100%;
}

.gallery-copyrighttext {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px;
  text-align: left;
  background-color: transparent;
  font-size: 0.8rem;
  height: 40px;
}
.gallery-copyrighttext span {
  background-image: url("../../img/teaser_bg.png");
  background-repeat: repeat;
  color: #FFFFFF;
  display: inline-block;
  padding: 4px 10px;
}

.gallery-imagetext {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px;
  text-align: right;
  background-color: transparent;
  font-size: 1.2rem;
}
.gallery-imagetext span {
  background-image: url("../../img/teaser_bg.png");
  background-repeat: repeat;
  color: #FFFFFF;
  display: inline-block;
  padding: 4px 10px;
}

.img-thumbnail {
  border-radius: 0 !important;
  -webkit-transition: border 500ms ease-out;
  -moz-transition: border 500ms ease-out;
  -o-transition: border 500ms ease-out;
  transition: border 500ms ease-out;
}

.gallery-thumbnail {
  border-bottom-width: 2px;
  margin-bottom: 0.5rem;
}
.gallery-thumbnail.active {
  border-bottom: 2px solid #E3000F;
}

/******************************************************
************************* CARD ************************
*******************************************************/
.card {
  background-color: #FFFFFF;
  border-style: none;
  box-shadow: 0 2px 4px 0 rgba(162, 162, 162, 0.5);
  display: block;
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
}
.card.table-danger {
  background-color: #F5C6CB;
}

.card-price {
  color: #E3000F;
  font-family: "Roboto", Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: 1.57rem;
}

.card-price-black {
  color: #000000;
  font-family: "Roboto", Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: 1.57rem;
}

.card-txt-red {
  color: #E3000F;
  font-family: "Roboto", Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: 1.27rem;
}

.card-price-instead {
  color: #222222;
  font-family: "Roboto", Verdana, Geneva, sans-serif;
  font-size: 1rem;
}

.card-with-image-badge {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
}
.card-with-image-badge img {
  flex-grow: 1;
  height: 100%;
  object-fit: cover;
}

.advantage_box_gap {
  column-gap: 0.85rem;
}

.card-price-badge {
  color: #FFFFFF;
  font-family: "PlacardKroneCond", Verdana, Geneva, sans-serif;
  font-size: 1rem;
  /*font-weight: 700;*/
  background-color: #E3000F;
  position: absolute;
  bottom: 2px;
  margin-left: auto;
  margin-right: auto;
  padding: 2px 6px;
}

.card-align-content-bottom {
  display: flex;
  justify-content: left;
  align-items: flex-end;
}

.card-bordered {
  overflow: visible;
}

.card-header {
  background-color: #FFFFFF;
  border-bottom: none;
  padding: 10px 12px 7px 12px;
  position: relative;
}
.card-header .abo-title-aendern {
  bottom: 1px;
  display: none;
  padding: 14px 0 8px 14px;
  position: absolute;
  right: 13px;
}
.card-header .text-icons {
  font-size: 1.6rem;
  margin-left: 5px;
  margin-top: 10px;
}
.card-header .btn {
  margin-top: 0;
  padding: 8px 13px;
  position: absolute;
  text-align: center;
}
.card-header .btn span {
  transform: rotate(0deg);
  transition: transform 0.2s ease-in-out;
  -webkit-transition: transform 0.2s ease-in-out;
  /* Safari */
}

.card-body {
  padding: 1rem;
}

.card-symbol {
  margin-bottom: 10px;
  text-align: right;
}

.card-text {
  text-align: left;
}

.card-title, .card-subtitle {
  font-family: "PlacardKroneCond", Verdana, Geneva, sans-serif;
  font-size: 1.97rem;
  line-height: 1.2em;
  margin-bottom: 0;
}

.doppel-box div.card-title, .doppel-box div.card-subtitle {
  font-family: "Roboto", Verdana, Geneva, sans-serif !important;
}

#accordion .card-body {
  margin-left: 5px;
  margin-right: 5px;
}

.accordion-link .btn-danger, #heading_warenkorbhistory .btn-danger {
  margin-top: 3px;
  padding: 5px 12px;
}

.box .card-footer {
  background-color: transparent;
  border-top: 0;
  padding: 0 1rem 1rem 1rem;
}

.card.box-transparent {
  background-color: transparent;
  border-style: none;
  box-shadow: none;
  border-radius: 0;
}
.card.box-transparent.radius {
  border-radius: 1rem;
}
.card.box-transparent .card-body, .card.box-transparent .card-footer {
  padding: 0;
}
.card.box-white {
  background-color: #FFFFFF;
  /*border: 1px solid $beige;*/
  box-shadow: 0 2px 4px 0 rgba(162, 162, 162, 0.5);
}
.card.box-beige {
  background-color: #f8f4ed;
  border: 1px solid #f8f4ed;
  box-shadow: none;
}

.card-disabled, .price-disabled, .box-disabled {
  opacity: 0.4;
}

.card-bg-light {
  background-color: #f8f4ed;
}
.card-bg-light .btn-outline-secondary {
  font-weight: 500;
}
.card-bg-light .btn-danger {
  font-weight: 500;
}

.card-badge-beige {
  background-color: #D0C4C2;
  font-family: "Roboto", Verdana, Geneva, sans-serif;
  color: white;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 6px;
  max-width: 80%;
  align-self: end;
}

/******************************************************
********************** ABOBOX *************************
*******************************************************/
.abobox .collapse-campaign-info {
  border-top: 1px solid #D9D9D9 !important;
}

.abobox .carousel-indicators {
  bottom: -60px;
}

.abobox .carousel-control-next-icon, .abobox .carousel-control-prev-icon {
  display: none;
}

.box_2_slider .carousel-control-next-icon, .box_2_slider .carousel-control-prev-icon {
  display: none;
}

/******************************************************
************** Shop-Box & Artikelseite ****************
*******************************************************/
.shop-modal .modal-dialog {
  max-width: 430px !important;
}

.shop-modal-content .product-status-info {
  font-weight: bold;
  font-size: 17px;
  margin: 15px 0 30px 0;
}

.advantagebox-link {
  text-decoration: none !important;
  color: #222222 !important;
}
.advantagebox-link:hover {
  text-decoration: none !important;
  color: #222222 !important;
}

.advantagebox .card-body {
  padding: 0;
}
.advantagebox .flags {
  position: absolute;
  right: 15px;
  top: 15px;
  color: #E3000F;
  display: inline-block;
}
.advantagebox .box-beige {
  background-color: #f8f4ed;
  border-style: none;
  box-shadow: none;
}

.fa-stack-1x {
  color: #FFFFFF !important;
}

.fa-stack-2x {
  color: #E3000F !important;
  text-shadow: 0 2px 4px rgba(162, 162, 162, 0.5);
}

.fa-heart.fa-stack-1x {
  line-height: 2.2 !important;
}

.advantagebox .card-content {
  padding: 0.75rem 0.75rem 0 0.75rem;
}

.teaserbox .card-content {
  /*	background-image: url("../../img/teaser_bg.png");
  	background-repeat: repeat;*/
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
  width: 100%;
  margin-top: 170px;
}

.advantagebox .card-title {
  font-family: "Roboto", Verdana, Geneva, sans-serif;
  font-weight: 800;
  font-size: 1.29rem;
  margin-bottom: 10px;
}
.advantagebox .card-title:hover, .advantagebox .card-title .fa-star {
  color: #E3000F;
}
.advantagebox .card-subtitle {
  font-size: 1.14rem;
  font-family: "Roboto", Verdana, Geneva, sans-serif;
  line-height: 1.4;
}
.advantagebox .card-price {
  white-space: nowrap;
  overflow: hidden;
}
.advantagebox .card-footer {
  background-color: transparent;
  border-top: 0;
  padding: 0.75rem;
}
.advantagebox .restmenge {
  background-image: url("../../img/teaser_bg.png");
  background-repeat: repeat;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.75rem 0.75rem 0.55rem 0.75rem;
}
.advantagebox .restmenge .card-subtitle {
  line-height: 1;
  font-weight: normal;
  font-family: "Roboto", Verdana, Geneva, sans-serif;
  color: #FFFFFF !important;
}

.advantage_bonusbox a {
  color: #FFFFFF !important;
}

.teaserbox, .bonusbox {
  min-height: 300px;
}

.teaserbox .card-body {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: #FFFFFF !important;
}
.teaserbox .card-title {
  font-size: 1.57rem;
  margin-bottom: 4px;
  line-height: 1.8;
}
.teaserbox .card-title:hover {
  color: #FFFFFF !important;
}
.teaserbox .card-subtitle {
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 10px;
}
.teaserbox .card-price {
  color: #E3000F;
  font-family: "Roboto", Verdana, Geneva, sans-serif;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.4;
}

.bonusbox {
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
  color: #FFFFFF !important;
}
.bonusbox .card-content {
  /*		background-image: url("../../img/teaser_bg.png");
  		background-repeat: repeat;*/
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.75rem;
}
.bonusbox .card-title {
  font-size: 1.57rem;
  margin-bottom: 4px;
  line-height: 1.8;
}
.bonusbox .card-title:hover {
  color: #FFFFFF !important;
}
.bonusbox .card-subtitle {
  font-size: 1.15rem;
  line-height: 1.4;
  margin-bottom: 10px;
}

.advantage-article-title {
  margin-bottom: 2px;
}

.advantage-article-subtitle {
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
  color: #222222 !important;
}

.advantage-productdescription ul {
  margin-left: -20px;
  margin-top: 5px;
}

.advantage-channel-item, .advantage-download-item, .advantage-bdl-item {
  color: #222222 !important;
  text-decoration: none !important;
  padding: 0.5rem 0.8rem !important;
}
.advantage-channel-item:hover, .advantage-download-item:hover, .advantage-bdl-item:hover {
  color: #222222 !important;
  text-decoration: none !important;
  padding: 0.5rem 0.8rem !important;
}

.advantage-channel-item {
  background-color: rgba(0, 0, 0, 0.125) !important;
  padding: 0.5rem 0.8rem !important;
  font-size: 0.9rem;
  border: none !important;
}
.advantage-channel-item:hover {
  background-color: rgba(0, 0, 0, 0.125) !important;
  padding: 0.5rem 0.8rem !important;
  font-size: 0.9rem;
  border: none !important;
}

.advantage-download-item {
  width: 100%;
}
.advantage-download-item:hover {
  width: 100%;
}

.advantage-bdl-item:hover {
  color: #FFFFFF !important;
  background-color: #E3000F !important;
  border-color: #E3000F !important;
  text-decoration: none !important;
}
.advantage-bdl-item.active {
  color: #FFFFFF !important;
  background-color: #E3000F !important;
  border-color: #E3000F !important;
  text-decoration: none !important;
}
.advantage-bdl-item.active:hover {
  color: #FFFFFF !important;
  background-color: #E3000F !important;
  border-color: #E3000F !important;
  text-decoration: none !important;
}

.advantage-channel-item:hover {
  color: #FFFFFF !important;
  background-color: #222222;
  border-color: #222222 !important;
  text-decoration: none !important;
}
.advantage-channel-item.active {
  color: #FFFFFF !important;
  background-color: #222222;
  border-color: #222222 !important;
  text-decoration: none !important;
}
.advantage-channel-item.active:hover {
  color: #FFFFFF !important;
  background-color: #222222;
  border-color: #222222 !important;
  text-decoration: none !important;
}

/*** FILTER START ***/
.filter-region-dropdown a {
  color: #222222 !important;
}
.filter-region-dropdown .dropdown-item.active, .filter-region-dropdown .dropdown-item:active, .filter-region-dropdown .dropdown-item:focus, .filter-region-dropdown .dropdown-item.focus {
  background-color: #F0F0F0;
  color: #222222;
}

.filter-dropdown {
  display: none;
  font-size: 1rem;
  font-family: "Roboto", Verdana, Geneva, sans-serif;
  width: 100% !important;
  position: absolute;
  left: 0;
  top: 39px;
  color: #222222 !important;
  z-index: 9999;
}

.aboadd-info {
  font-size: 1rem;
  font-family: "Roboto", Verdana, Geneva, sans-serif;
  width: 100% !important;
  color: #FFFFFF !important;
  z-index: 9999;
}
.aboadd-info .alert {
  border-radius: 1rem;
  background: #fff7f8;
}
.aboadd-info .lead {
  font-size: 1.2rem;
}

@media (min-width: 992px) {
  .filter-dropdown {
    top: 43px;
  }
}
.filter-form {
  position: fixed;
  margin: 0 -20px;
  background-color: #F1F1F1 !important;
  border-top: 1px solid #E2E2E2 !important;
  height: calc(100vh - 39px);
  overflow-y: scroll;
  padding-top: 68px;
  padding-bottom: 53px;
}

@media (min-width: 992px) {
  .filter-form {
    position: relative;
    top: 0;
    margin: 0;
    height: auto;
    overflow-y: auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
.filter-header {
  margin: 0 -15px;
  width: 100%;
  background-color: #F1F1F1;
  padding: 1rem 1.5rem 0.5rem 1.5rem;
  position: fixed;
  top: 40px;
  z-index: 9999;
}

@media (min-width: 992px) {
  .filter-header {
    margin: 0;
    position: static;
    padding: 0 0 1rem 0;
  }
}
.btn-filter-remove {
  position: absolute;
  top: 15px;
  left: 170px;
  padding: 0.5rem !important;
  color: #222222 !important;
  background-color: transparent;
  border-color: #222222 !important;
}
.btn-filter-remove:hover, .btn-filter-remove:active, .btn-filter-remove.active, .btn-filter-remove:focus, .btn-filter-remove.focus {
  border-color: #222222;
  background-color: #F1F1F1;
  color: #222222 !important;
}

@media (min-width: 992px) {
  .btn-filter-remove {
    top: 17px;
    left: 220px;
  }
}
.filter-button {
  margin: 0 -15px;
  width: 100%;
  background-color: #F1F1F1;
  padding: 1rem;
  position: fixed;
  bottom: 0;
  -webkit-box-shadow: 0 0 6px 4px rgba(0, 0, 0, 0.26);
  box-shadow: 0 0 6px 4px rgba(0, 0, 0, 0.26);
}
.filter-button .btn {
  font-size: 15px !important;
}

@media (min-width: 992px) {
  .filter-button {
    margin: 0;
    width: 100%;
    background-color: inherit;
    padding: 0;
    position: static;
    bottom: auto;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
  }
}
.filterMenuCloseButton {
  color: #222222 !important;
  cursor: pointer !important;
  font-size: 2rem;
  position: relative;
  right: 0;
}

@media (min-width: 992px) {
  .filterMenuCloseButton {
    right: 0;
  }
}
.filterMenuScrollUpButton {
  color: #222222 !important;
  cursor: pointer !important;
  font-size: 1.5rem;
  position: fixed;
  right: 18px;
  top: 102px;
  z-index: 9999;
}

.filterMenuScrollDownButton {
  color: #222222 !important;
  cursor: pointer !important;
  font-size: 1.5rem;
  position: fixed;
  right: 18px;
  bottom: 83px;
  z-index: 9999;
}

.filter-dropdown .advantage-channel-item {
  color: #222222;
  background-color: #E2E2E2;
  cursor: pointer;
  margin-bottom: 1rem;
  line-height: 1.4 !important;
  padding: 0 !important;
  font-size: 15px;
  border: 1px solid #E2E2E2;
  width: 85% !important;
}
.filter-dropdown .advantage-channel-item:hover, .filter-dropdown .advantage-channel-item:active, .filter-dropdown .advantage-channel-item:focus, .filter-dropdown .advantage-channel-item.focus {
  background-color: #C2C2C2;
  color: #222222 !important;
  border: 1px solid #C2C2C2;
}
.filter-dropdown .advantage-channel-item.active {
  background-color: #C2C2C2;
  color: #222222;
}
.filter-dropdown .advantage-channel-item .custom-checkbox {
  padding-left: 0;
}
.filter-dropdown .advantage-channel-item .custom-checkbox .custom-control-label {
  width: 100% !important;
  padding-top: 1rem;
  padding-bottom: 0.8rem;
  padding-left: 3.5rem;
}
.filter-dropdown .advantage-channel-item .custom-checkbox .custom-control-label::after, .filter-dropdown .advantage-channel-item .custom-checkbox .custom-control-label::before {
  margin-top: 1rem;
  margin-bottom: 0.8rem;
  left: 1.3rem !important;
  transform: scale(1.3);
}
.filter-dropdown .advantage-channel-item .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  color: #000000;
  border-color: #000000;
  background-color: #000000;
}

@media (min-width: 992px) {
  .filter-dropdown .advantage-channel-item:hover {
    background-color: #C2C2C2 !important;
    color: #222222;
    border: 1px solid #C2C2C2;
  }
}
@media (min-width: 768px) {
  .filter-dropdown .advantage-channel-item {
    width: 100% !important;
  }
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: none;
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: transparent;
}

/***************************************************
****************** Filter Custom Color Highlight
****************************************************/
.channel_highlight_grey {
  color: #FFFFFF !important;
  background-color: #AAAAAA !important;
  border: none !important;
}

.channel_highlight_red {
  color: #FFFFFF !important;
  background-color: #E3000F !important;
  border: none !important;
}

.channel_highlight_green {
  color: #FFFFFF !important;
  background-color: #28A745 !important;
  border: none !important;
}

.channel_highlight_black {
  color: #FFFFFF !important;
  background-color: #000000 !important;
  border: none !important;
}

/*** FILTER ENDE ***/
.custom-control-input:checked ~ .custom-control-label::before {
  color: #000000;
  border-color: #000000;
  background-color: #000000;
}

.list-group-price .list-group-item {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top: none;
  border-bottom: none;
  font-size: 11px !important;
}
.list-group-price .list-group-item:first-child {
  border-left: none;
  border-right: none;
  padding-left: 0;
}
.list-group-price .list-group-item:last-child {
  border-right: none;
}

/* DOWNLOAD DROPDOWN */
.advantage-download-group {
  width: 100% !important;
  max-width: 100% !important;
}
.advantage-download-group .choose-label {
  background-color: #FFFFFF;
  color: #222222 !important;
  border-color: #DDDDDD;
  border-right-color: #FFFFFF;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-align: left;
  white-space: normal !important;
  border-radius: 0;
  font-weight: 600;
  font-size: 1.2rem;
  padding: 1rem;
}
.advantage-download-group .choose-label.btn-light:not(:disabled):not(.disabled).active, .advantage-download-group .choose-label.btn-light:not(:disabled):not(.disabled):active {
  background-color: #FFFFFF !important;
  color: #222222 !important;
  border-color: #DDDDDD;
  border-right-color: #FFFFFF;
}
.advantage-download-group .dropdown-toggle {
  background-color: #FFFFFF;
  border-color: #DDDDDD;
  border-left-color: #FFFFFF;
  color: #222222 !important;
  border-radius: 0;
}
.advantage-download-group .dropdown-toggle.btn-light:not(:disabled):not(.disabled).active, .advantage-download-group .dropdown-toggle.btn-light:not(:disabled):not(.disabled):active {
  background-color: #FFFFFF;
  border-color: #DDDDDD;
  border-left-color: #FFFFFF;
  color: #222222 !important;
  border-radius: 0;
}
.advantage-download-group a.dropdown-toggle, .advantage-download-group a.dropdown-toggle:visited, .advantage-download-group a.dropdown-toggle:active {
  color: #222222;
}
.advantage-download-group.show > .dropdown-toggle.btn-light.dropdown-toggle {
  background-color: #FFFFFF;
  border-color: #DDDDDD;
  border-left-color: #FFFFFF;
  color: #222222 !important;
  border-radius: 0;
}
.advantage-download-group .dropdown-menu {
  padding: 0;
  border-radius: 4px;
}
.advantage-download-group .dropdown-item {
  padding: 1rem 1.25rem;
  cursor: pointer;
  white-space: nowrap !important;
  text-decoration: none;
}
.advantage-download-group .dropdown-item.active, .advantage-download-group .dropdown-item:active, .advantage-download-group .dropdown-item:focus, .advantage-download-group .dropdown-item.focus {
  background-color: #F0F0F0 !important;
  color: #222222 !important;
}

/* CUSTOM SELECT */
.custom-choose {
  width: 100% !important;
  max-width: 100% !important;
}
.custom-choose .choose-label {
  background-color: #FFFFFF;
  color: #222222 !important;
  border-color: #DDDDDD;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-align: left;
  white-space: normal !important;
}
.custom-choose .choose-label.btn-light:not(:disabled):not(.disabled).active, .custom-choose .choose-label.btn-light:not(:disabled):not(.disabled):active {
  background-color: #FFFFFF !important;
  color: #222222 !important;
  border-color: #DDDDDD;
}
.custom-choose .dropdown-toggle {
  background-color: #E3000F;
  border-color: #E3000F;
  color: #FFFFFF !important;
}
.custom-choose .dropdown-toggle.btn-light:not(:disabled):not(.disabled).active, .custom-choose .dropdown-toggle.btn-light:not(:disabled):not(.disabled):active {
  background-color: #E3000F;
  border-color: #E3000F;
  color: #FFFFFF !important;
}
.custom-choose.show > .dropdown-toggle.btn-light.dropdown-toggle {
  background-color: #E3000F;
  border-color: #E3000F;
  color: #FFFFFF !important;
}

.advantage-channels-choose .dropdown-toggle::after {
  display: inline-block;
  margin-top: 0.255em;
  margin-left: 0;
  vertical-align: 0.255em;
  font-family: "Font Awesome 5 Pro", sans-serif;
  content: "\f0c9";
  border: none;
}

.custom-choose .dropdown-menu {
  width: 100%;
  overflow: hidden;
  padding: 0;
}
.custom-choose .dropdown-divider {
  margin: 0;
}
.custom-choose .dropdown-item {
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  white-space: normal !important;
  text-decoration: none;
  color: #222222 !important;
}
.custom-choose .dropdown-item.active {
  background-color: #F0F0F0 !important;
  color: #222222 !important;
}

.advantage-shoppingcard .btn-link {
  padding: 0;
  color: #222222 !important;
}

/******************************************************
********************** DATETIMEPICKER *****************
*******************************************************/
.bootstrap-datetimepicker-widget {
  border-color: #CCCCCC;
  box-shadow: 0 2px 4px 0 rgba(162, 162, 162, 0.5);
  border-radius: 0.1rem !important;
}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
  border-bottom: 7px solid #AAAAAA;
}
.bootstrap-datetimepicker-widget.dropdown-menu.top:before {
  border-top: 7px solid #AAAAAA;
}
.bootstrap-datetimepicker-widget table thead th {
  background-color: #FFFFFF;
  color: #000000;
}
.bootstrap-datetimepicker-widget table td.today:before {
  border-bottom-color: #E3000F;
}
.bootstrap-datetimepicker-widget table td.active {
  background-color: #E3000F;
  color: #FFFFFF;
}
.bootstrap-datetimepicker-widget table td.active:hover {
  background-color: #E3000F;
  color: #FFFFFF;
}
.bootstrap-datetimepicker-widget table td span.active {
  background-color: #E3000F;
}
.bootstrap-datetimepicker-widget [data-action=clear] {
  font-size: 1.2rem;
}
.bootstrap-datetimepicker-widget * {
  border-radius: 0.1rem !important;
}
.bootstrap-datetimepicker-widget table td, .bootstrap-datetimepicker-widget table th {
  padding: 5px;
}
.bootstrap-datetimepicker-widget .today {
  background-color: #EEEEEE;
}
.bootstrap-datetimepicker-widget table td.disabled {
  background: none;
  color: #DDDDDD;
  cursor: not-allowed;
}
.bootstrap-datetimepicker-widget table td.disabled:hover {
  background: none;
  color: #DDDDDD;
  cursor: not-allowed;
}

/******************************************************
******************* BREADCRUMB ************************
*******************************************************/
.breadcrumb {
  background-color: transparent;
  font-size: 0.8rem;
  padding: 0;
}
.breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: inherit;
  cursor: default;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: #E3000F;
  content: ">";
}

/******************************************************
********************** COOKIE MELDUNG *****************
*******************************************************/
.optanon-alert-box-wrapper {
  background-color: #FFFFFF !important;
}
.optanon-alert-box-wrapper .optanon-button-more .optanon-alert-box-button-middle button {
  color: #000000 !important;
}
.optanon-alert-box-wrapper .optanon-button-more .optanon-alert-box-button-middle button::before {
  color: #000000 !important;
}

#optanon {
  font-family: "Roboto", Verdana, Geneva, sans-serif !important;
  font-weight: 400 !important;
}
#optanon *, #optanon div, #optanon span, #optanon ul, #optanon li, #optanon a, #optanon p {
  font-family: "Roboto", Verdana, Geneva, sans-serif !important;
  font-weight: 400 !important;
}

.optanon-alert-box-wrapper *, .optanon-alert-box-body {
  font-family: "Roboto", Verdana, Geneva, sans-serif !important;
  font-weight: 400 !important;
}

.optanon-alert-box-wrapper .optanon-alert-box-button-middle button {
  font-weight: bold !important;
  padding: 0.375rem 0.75rem !important;
  border-radius: 0.25rem !important;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.accept-cookie-container button, .optanon-alert-box-wrapper * {
  border-radius: 0.25rem !important;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#optanon #optanon-popup-wrapper .optanon-button-wrapper button {
  border-radius: 0.25rem !important;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
#optanon #optanon-menu li .preference-menu-item button, #optanon #optanon-menu li .preference-menu-item a {
  color: #000000 !important;
  font-weight: bold !important;
}
#optanon .fieldset input:checked + label, #optanon #optanon-popup-more-info-bar p {
  font-weight: bold !important;
}
#optanon #optanon-popup-bottom-logo::before, #optanon #optanon-popup-bottom-logo::after {
  font-size: 11px !important;
}

.optanon-alert-box-wrapper .optanon-button-more .optanon-alert-box-button-middle button::before {
  content: "❯";
  font-size: 1.1em;
  font-weight: normal;
  padding-right: 5px;
  color: #000000;
  position: absolute;
  left: -10px !important;
  top: 4px !important;
}

/******************************************************
******************* DIVERSES ************************
*******************************************************/
.searched-adress {
  font-weight: bold;
}

#productdescription > ul {
  padding-left: 15px;
}

/******************************************************
*********************** HELPER ************************
*******************************************************/
.display-none {
  display: none;
}

.pointer, .fa, .close, .input-group.pointer input {
  cursor: pointer !important;
}

.cursor-default {
  cursor: default !important;
}

.zoom-in {
  cursor: zoom-in !important;
}

.modal .gallery-image.zoom-in {
  cursor: default !important;
}

.border-top-1 {
  border-top: 1px solid #DDDDDD;
}

.bg-danger {
  background-color: #E3000F !important;
}

.bg-secondary {
  background-color: #41484E !important;
}

.bg-white {
  background-color: #FFFFFF !important;
}

.save-feedback {
  color: #2FAA4B;
  display: none;
  font-size: 15px;
  margin-left: 3px;
  margin-top: 3px;
}

.contest-article-choose-image {
  max-width: 200px;
  float: right;
}

/******************************************************
*********************** Autocomplete ********************
*******************************************************/
.autocomplete-suggestions {
  color: #222222 !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #DDDDDD;
  background: #FFFFFF;
  cursor: default;
  overflow: auto;
  -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
  -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
  box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
}

.autocomplete-suggestion {
  padding: 2px 5px;
  white-space: nowrap;
  overflow: hidden;
}

.autocomplete-no-suggestion {
  padding: 2px 5px;
}

.autocomplete-selected {
  background: #F0F0F0;
}

.autocomplete-suggestions strong {
  font-weight: bold;
  color: #000000;
}

.autocomplete-group {
  padding: 2px 5px;
  font-weight: bold;
  font-size: 16px;
  color: #000000;
  display: block;
  border-bottom: 1px solid #000000;
}

/******************************************************
******************** Digitale Karte *******************
*******************************************************/
.digital-card-wrapper {
  border: none;
  background-color: #E30513;
  border-radius: 1rem;
  padding: 0 !important;
  color: #FFFFFF !important;
  line-height: 1.3 !important;
  font-size: 1.5rem;
  font-weight: 800;
}
.digital-card-wrapper a {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

.digital-card-headerlogo {
  width: 100%;
  border-radius: 1rem;
}

.digital-card-data {
  width: 100%;
  font-weight: bold;
  padding: 0.7rem 1rem 0 1rem;
}

.digital-card-kundennummer {
  font-size: 70%;
  padding-top: 1.5rem;
  font-weight: 600;
  color: #000000 !important;
}

.digital-card-info {
  font-size: 50%;
  font-weight: 600;
  padding-top: 0.8rem;
  line-height: 1.2rem;
}

.digital-card-logo {
  width: 80%;
  padding: 0.8rem 0 0.2rem 0;
}

.digital-card-barcode {
  padding-top: 0.5rem;
  padding-bottom: 0.3rem;
  background-color: #FFFFFF !important;
}

/*****************************************************
******************** DIDOMI **************************
******************************************************/
#didomi-host .didomi-popup-footer .didomi-popup-actions div, #didomi-host #didomi-host .didomi-popup-footer .didomi-popup-actions button {
  margin-right: 10px;
}
#didomi-host .didomi-popup-container {
  border-radius: 14px !important;
}
#didomi-host .didomi-learn-more-button, #didomi-host .didomi-disagree-button, #didomi-host .didomi-dismiss-button {
  border-radius: 20px !important;
}
#didomi-host .didomi-popup-footer .standard-button {
  border-radius: 20px !important;
}

/******************************************************
******************** DEAL DES TAGES *******************
*******************************************************/
.box-deal-wrapper {
  width: 100%;
  height: 100%;
  background-color: blue;
  padding: 1rem;
}

/******************************************************
************* GOOGLE MATERIAL FONTS *******************
*******************************************************/
.material-symbols {
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
.material-symbols.ms--filled, .material-symbols.material-symbols-filled {
  font-family: "Material Symbols Filled";
}
.material-symbols.ms--outlined, .material-symbols.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
}

@media (min-width: 992px) {
  .material-symbols {
    font-size: 24px;
    line-height: 1;
  }
}
/******************************************************
********************** Piano Offer Temaplate Override *
*******************************************************/
.tp-backdrop.tp-active {
  opacity: 0.4 !important;
}

/******************************************************
********************** MEDIA **************************
*******************************************************/
/* extra Small devices (horizontal phones, 350px and up) */
@media (min-width: 350px) {
  .btn-textsize {
    width: 100%;
    display: block;
  }
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .advantage-download-item {
    width: auto;
  }
  .advantage-download-item:hover {
    width: auto;
  }
  .btn-textsize {
    width: 100%;
    display: block;
  }
  .soldout_flash {
    position: absolute;
    top: 150px;
    right: 150px;
    padding: 10px;
    transform: rotate(320deg);
    font-size: 2.5rem;
    font-weight: bold;
    border: 1px solid #E3000F;
    background-color: #E3000F;
    color: white;
  }
  .contest-article-choose-image {
    max-width: 50px;
    float: right;
  }
  .digital-card-data {
    padding: 0.7rem 2rem 0 2rem;
  }
  .digital-card-logo {
    width: 70%;
  }
  /******************************************************
  ********************** Countdown  *****************
  *******************************************************/
  .countdown {
    font-size: 1.1rem;
  }
  .counter_wrapper h1 {
    font-size: 1.6rem;
  }
  .countdown h1 {
    font-size: 1.8rem;
  }
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  html {
    font-size: 12px;
  }
  #krn-trinity-modal-root {
    font-size: 16px;
  }
  .btn.btn-responsive {
    display: inline-block !important;
    width: auto !important;
  }
  .btn-textsize {
    width: 100%;
    display: block;
  }
  .btn-checkbox {
    display: inline-flex;
  }
  .btn-checkbox .btn + .btn {
    margin-left: -1px;
    margin-top: 0;
  }
  .btn-checkbox .btn-light {
    min-width: 49.5%;
    max-width: 49.5%;
  }
  .soldout_flash {
    position: absolute;
    top: 80px;
    right: 350px;
    padding: 10px;
    transform: rotate(320deg);
    font-size: 2rem;
    font-weight: bold;
    border: 1px solid #E3000F;
    background-color: #E3000F;
    color: white;
  }
  .contest-article-choose-image {
    max-width: 50px;
    float: right;
  }
  .digital-card-logo {
    width: 80%;
  }
  label.active {
    /*background: linear-gradient(0deg, rgba(255, 0, 0, 0) 68%, white 32%);*/
    background-color: #FFFFFF;
  }
  /******************************************************
  ********************** Countdown  *****************
  *******************************************************/
  .countdown {
    font-size: 1.5rem;
  }
  .counter_wrapper h1 {
    font-size: 2.4rem;
  }
  .countdown h1 {
    font-size: 2.5rem;
  }
}
/* Medium to Large devices (Tablet, 810px and up */
@media (min-width: 810px) {
  .btn-textsize {
    width: auto;
    display: inline-block;
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  html {
    font-size: 14px;
  }
  #krn-trinity-modal-root {
    font-size: 16px !important;
  }
  .form-control, .input-group-append button, .custom-select {
    font-size: 1rem;
  }
  h1, .h1 {
    font-size: 3rem;
  }
  h1.advantage-article-title, .h1.advantage-article-title {
    font-size: 2.2rem;
    font-weight: 700;
  }
  h2, .h2 {
    font-size: 1.97rem;
  }
  h3, .h3 {
    font-size: 1.5rem;
  }
  h4, .h4 {
    font-size: 1.3rem;
  }
  .card-title, .card-subtitle {
    font-size: 1.97rem;
  }
  .title-wrapper h1, .card-header-wrapper h1, .title-wrapper h2, .card-header-wrapper h2 {
    line-height: 1.2;
  }
  .title-wrapper h3, .card-header-wrapper h3 {
    line-height: 1.4;
  }
  .title-wrapper h1 small, .title-wrapper h2 small, .title-wrapper h3 small {
    display: inline-block;
  }
  .card-header-wrapper h1 small, .card-header-wrapper h2 small, .card-header-wrapper h3 small {
    display: inline-block;
  }
  #accordion .card-body {
    margin-left: 40px;
    margin-right: 40px;
  }
  .card-header-wrapper {
    margin: 7px 42px 5px 45px;
  }
  .card-header .abo-title-aendern {
    right: 160px;
  }
  .footer-links.unternehmen div {
    display: inline-block;
    padding-right: 50px;
  }
  .list-group-price .list-group-item {
    font-size: 14px !important;
  }
  .contest-article-choose-image {
    max-width: 200px;
    float: right;
  }
  label.active {
    /*background: linear-gradient(0deg, rgba(255, 0, 0, 0) 72%, white 28%);*/
    background-color: #FFFFFF;
  }
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .container-fluid-navi {
    max-width: 1680px !important;
    padding-left: 45px;
    padding-right: 45px;
    width: 100%;
  }
  label.active {
    /*background: linear-gradient(0deg, rgba(255, 0, 0, 0) 68%, white 32%);*/
    background-color: #FFFFFF;
  }
}
/********************************************************
****************** PRINT VIEW ***************************
*********************************************************/
@media print {
  .cookiealert, .scroll-top, .btn-livechat, .printbutton, .navi-spacer, .mobile-navi-wrapper, .navi-top-bar, .navi-bottom-bar, .breadcrumb, .footer-wrapper {
    display: none !important;
  }
  img {
    display: block !important;
    width: 100% !important;
  }
}
/********************************************************
***************** Krone.at Boxen ***********************
********************************************************/
.krone-box-wrapper {
  background-color: #f7f2e9;
  font-family: "Roboto", Verdana, Geneva, sans-serif;
}
.krone-box-wrapper .header-title {
  font-weight: bold;
}
.krone-box-wrapper .header-subtitle {
  font-size: 1.2rem;
  font-weight: bold;
}
.krone-box-wrapper .product-title {
  font-weight: bold;
}
.krone-box-wrapper .offer-card {
  border: 1px solid #DECBB9;
  border-radius: 1rem;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #FFFFFF;
  color: #222222;
  box-shadow: 0 1px 16px 0 rgba(0, 0, 0, 0.16);
}
.krone-box-wrapper .offer-card:hover {
  border: 1px solid grey;
}
.krone-box-wrapper .offer-card.selected {
  border: 1px solid #E3000F;
}
.krone-box-wrapper .offer-header {
  position: absolute;
  top: -10px;
  left: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.krone-box-wrapper .badge-offer {
  background-color: #E3000F;
  color: white;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 4px;
}
.krone-box-wrapper .badge-save {
  position: absolute;
  background-color: #FEEBAE;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  line-height: 11px;
  flex-shrink: 0;
  left: 50%;
  top: -15px;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  white-space: nowrap;
}
.krone-box-wrapper .price-old {
  font-size: 1.1em;
  text-decoration-color: #E3000F;
  text-decoration-line: line-through;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  color: rgb(204, 204, 204);
  font-weight: bold;
  font-family: "PlacardKroneCond", Verdana, Geneva, sans-serif;
}
.krone-box-wrapper .offer-btn-wrapper {
  align-items: center;
  align-content: space-around;
  justify-content: space-between;
}
.krone-box-wrapper .btn-aligner {
  position: relative;
}
.krone-box-wrapper .btn-danger {
  background-color: #E3000F;
  color: white;
  font-weight: bold;
  text-align: center;
  padding: 8px 14px;
  border-radius: 2rem;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.08), 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
  display: block;
  margin-top: 35px;
}
.krone-box-wrapper .btn-danger:hover {
  background-color: #AF0014;
}
.krone-box-wrapper .alert {
  border-radius: 12px;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.08), 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
}

.krone-gewinnspiel-card {
  border: 1px solid #ddd;
  border-radius: 1rem;
  padding: 20px;
  text-align: center;
  background: linear-gradient(to bottom, #f9f9f9, #fff);
  margin: auto;
}
.krone-gewinnspiel-card img {
  max-width: 100%;
  height: auto;
}
.krone-gewinnspiel-card .text-black {
  color: #222;
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .krone-box-wrapper .offer-btn-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column-reverse;
    align-content: space-around;
    justify-content: space-between;
  }
  .krone-box-wrapper .btn-danger {
    margin-top: 4px;
  }
  .krone-box-wrapper .badge-save {
    top: -15px;
    left: 50%;
  }
  .krone-box-wrapper .btn-danger {
    padding: 8px 14px;
  }
}

/*# sourceMappingURL=frontend_krone_new_scss.css.map */