/* 1) Grund-Theme / CSS-Variablen */
/* ========================================================================== */
:root{
  /* Markenfarben */
  --bs-primary: #083E86;            /* Header-/Brand-Blau */
  --bs-secondary: #EC008C;          /* Pink für Akzente/Hover */
  --bs-info: #0D63D5;               /* Link-Blau */

  /* Text/Fläche */
  --bs-body-bg: #F7F6F8;            /* Seitenhintergrund */
  --bs-body-color: #083E86;         /* Textfarbe */
  --bs-body-font-family: Arial, sans-serif;

  /* Links global */
  --bs-link-color: #0D63D5;
  --bs-link-hover-color: #EC008C;

  /* Radius/Look */
  --bs-border-radius: .6rem;
  --bs-btn-border-radius: .6rem;
}
/* 2) Navbar / Header  */
/* ========================================================================== */
.navbar {
   --bs-navbar-color: #F7F6F8;
   --bs-navbar-hover-color: #EC008C;
   --bs-navbar-brand-hover-color: #EC008C;
   background-color: var(--bs-primary);
}

.navbar .container {
   padding-top: .15rem;
   padding-bottom: .05rem;
}

.navbar .text-rotator {
   height: 1.05rem;
   font-size: .95rem;
   line-height: 1.1;
   text-align: center;
}

.navbar .text-rotator .rotator-item {
   color: #F7F6F8;
}

.navbar .navbar-brand {
   font-size: clamp(2rem, 3.2vw, 2.75rem);
   line-height: 1;
   letter-spacing: .5px;
   padding-top: 0;
   padding-bottom: 0;
}

.site-title {
   color: #EC008C;
}

.site-title:hover {
   color: #EC008C !important;
}

.site-title-tld {
   color: #F7F6F8;
}

.site-title .brand-logo svg {
   height: 32px;
   width: auto;
   display: block;
}

.site-nav-links {
   line-height: 1;
   padding-top: 0;
   padding-bottom: 0;
   margin-top: -.1rem;
}

.site-nav-link {
   color: #D2D0D4;
   text-decoration: none;
   padding: .1rem .35rem;
   border-radius: .35rem;
   transition: color .15s ease, background-color .15s ease;
}

.site-nav-link:hover,
.site-nav-link.active {
   color: var(--bs-secondary) !important;
}

.site-nav-link.active {
   background-color: rgba(247, 246, 248, .08);
}
/* 3) Buttons / Links */
/* ========================================================================== */
.btn-primary{
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
}

/* Links mit sauberer Unterstreichung */
a { text-decoration: none; }
a:hover { color: var(--bs-link-hover-color) !important; }

.sort-icons{
   display: inline-flex;
   align-items: center;
   gap: 0;
   white-space: nowrap;
}

.sort-link{
   padding: 0;
   margin: 0;
   line-height: 1;
   font-size: 0.95em;
}

.sort-link + .sort-link{
   margin-left: -3px;
}

a.make-link{
   color: var(--bs-body-color);
}

.external-link::after{
   content: '↗';
   font-size: 0.8em;
   margin-left: 0px;
   position: relative;
   bottom: 2px;
   opacity: 0.5;
}

.external-link:hover::after{
   opacity: 1;
}
/* 4) Cards */
/* ========================================================================== */
.card{
  --bs-card-bg: #fff;
  --bs-card-border-color: #e3e5ea;
  --bs-card-border-radius: 1rem;
  --bs-card-cap-bg: #fff;
}

.product-of-day{
   width: min(100%, 22rem);
   border-radius: .8rem;
   box-shadow: 0 2px 10px rgba(8, 62, 134, .08);
}

.product-of-day .card-body{
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.product-of-day__label{
   color: var(--bs-secondary);
   font-size: .9rem;
   font-weight: 700;
   line-height: 1.1;
}

.product-of-day__category{
   color: var(--bs-body-color);
   font-size: .95rem;
}

.product-of-day__meta{
   display: flex;
   align-items: baseline;
   justify-content: center;
   flex-wrap: wrap;
   gap: .35rem;
   margin-bottom: .15rem;
   text-align: center;
}

.product-of-day__title{
   font-size: 1.15rem;
   line-height: 1.25;
}

.product-of-day__make{
   color: var(--bs-body-color);
   font-size: .85rem;
   font-weight: 700;
   line-height: 1.1;
}

.product-of-day__product{
   display: block;
   color: var(--bs-link-color);
   font-weight: 700;
}

.product-of-day__price{
   flex: 0 0 auto;
}

.product-of-day__range{
   font-size: 1.05rem;
   font-weight: 700;
   margin-top: .35rem;
   white-space: nowrap;
}

.product-of-day__saving{
   display: inline-block;
   color: #fff;
   background-color: #198754;
   border-radius: .45rem;
   padding: .15rem .45rem;
   font-size: .95rem;
   font-weight: 700;
}

.cart-collapse-button{
   color: var(--bs-body-color);
   text-align: left;
   line-height: 1.2;
}

.cart-collapse-button:hover{
   color: var(--bs-secondary);
}

.cart-collapse-icon{
   color: #D2D0D4;
   font-size: .85rem;
   line-height: 1;
}

.cart-collapse-icon{
   position: absolute;
   right: .35rem;
   top: 50%;
   transform: translateY(-50%);
   color: #D2D0D4;
   font-size: .85rem;
   line-height: 1;
}
/* 5) Typografie / Hilfsklassen */
/* ========================================================================== */
.product-name, .brand-name { color: #0D63D5; font-weight: 700; }

.text-pink { color: #EC008C; }

.text-grey { color: #D2D0D4; }

input.form-control::placeholder {
   color: #D2D0D4;
   opacity: 1;
}

.dezenterBGtext{
  color: #D2D0D4;
  text-align: center;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.dezenterBGtext:hover{
  color: #EC008C;
}
/* 6) Tabellen */
/* ========================================================================== */
table{ border-collapse: collapse; box-shadow:0 0 5px rgba(0,0,0,.05); }
th,td{ border:1px solid #ccc; text-align:left; }

.table.table-sm{
  --bs-table-bg: #EAE8EC;          /* Grundzeilen */
  --bs-table-color: var(--bs-body-color);
  line-height: 1.35;
}
.table-striped{
  --bs-table-striped-bg: #F7F6F8;  /* Streifen */
  --bs-table-striped-color: var(--bs-body-color);
}
.table-hover{
  --bs-table-hover-bg: rgba(236, 0, 140, 0.08);
}
.table thead{
  --bs-table-color: var(--bs-body-color);
  line-height: 1.15;
}
/* 7) Footer  */
/* ========================================================================== */
footer[role="contentinfo"] a { color: var(--bs-link-color) !important; }
footer[role="contentinfo"] a:hover { color: var(--bs-link-hover-color) !important; }

footer a.is-current {
    font-weight: 600;
    text-decoration-thickness: .15em;
    text-underline-offset: .18em;
}
/* 8) Text-Rotator (Animation) */
/* ========================================================================== */
.text-rotator{
  position:relative;
  height:2.4rem;
  overflow:hidden;
}

.rotator-item{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0;                      /* Standard: unsichtbar */
  z-index:1;
}

@keyframes slideDownIn   { from { transform: translateY(-100%);} to { transform: translateY(0);} }
@keyframes slideDownOut  { from { transform: translateY(0);}     to { transform: translateY(100%);} }

.rotator-item.is-current,
.rotator-item.is-enter,
.rotator-item.is-exit { opacity:1; }

.rotator-item.is-enter{
  z-index:2;
  animation: slideDownIn .6s ease forwards;
}
.rotator-item.is-exit{
  z-index:1;
  animation: slideDownOut .6s ease forwards;
}

@media (prefers-reduced-motion: reduce){
  .rotator-item{ animation:none !important; }
}
/* 9) Top-Marken / SVG-Rotator*/
/* ========================================================================== */
.topmarken{
  display: flex;
  flex-direction: column;
  align-items: center;  /* horizontal zentriert */
  gap: 0;
}

.topmarken__label{
  color: #D2D0D4;
  text-align: center;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.svg-rotator{
  --logo-size: 96px;
  --logo-height: 50px;
  --gap: 28px;
  --visible: 5;

  position: relative;
  overflow: hidden;
  width: min(
    100%,
    calc(var(--visible) * var(--logo-size) + (var(--visible) - 1) * var(--gap))
  );
  height: calc(var(--logo-height));
  margin-inline: auto;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  color: #D2D0D4;
}

.svg-rotator a.maklogo{
  color: inherit;
  text-decoration: none;
}

.svg-rotator__track{
  display: flex;
  width: max-content;
  will-change: transform;
  animation: rotator-left 15s linear infinite;
}

.svg-rotator__set{
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding-right: var(--gap); /* sorgt für identischen “Abstand” am Set-Ende */
}

@keyframes rotator-left{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.svg-rotator svg{
  height: var(--logo-height);
  width: auto;
  display: block;
}

.svg-rotator .maklogo{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.svg-rotator:hover .svg-rotator__track{
  animation-play-state: paused;
}

.svg-rotator .maklogo:hover svg *{
  fill: #E91E63 !important;
}

@media (prefers-reduced-motion: reduce){
  .svg-rotator__track{ animation: none; }
}
/* 10) SVG Hover / Maklogo (einzelnes SVG inkl. Hotspots) */
/* ========================================================================== */
div.maklogo svg path{
  transition: fill .15s ease
}

div.maklogo svg :is(path, circle, rect, ellipse, polygon, polyline, line):hover{
  fill: #E91E63 !important;
}

div.maklogo svg > g > a > g:hover *{
  fill: #E91E63 !important;
}

div.maklogo{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
/* 11) Accordion */
/* ========================================================================== */
.accordion-button {
  padding-top: .2rem;
  padding-bottom: .2rem;
  line-height: 1.0;
}
/* 12) Marken-Index */
/* ========================================================================== */
.brand-index__link{
  display: inline-block;
  padding: .15rem .45rem;
  border-radius: .4rem;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.15);
}

.brand-index__link--disabled{
  opacity: .35;
  cursor: not-allowed;
}

.brand-link{
  text-decoration: none;
}

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

.brand-group{
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

.brand-columns{
  max-width: 44rem;
  columns: 3;
  column-gap: 1.25rem;
}

.brand-columns__item{
  break-inside: avoid;
  padding: .1rem 0;
}

@media (max-width: 575.98px){
  .brand-columns{ columns: 1; }
}
@media (min-width: 576px) and (max-width: 991.98px){
  .brand-columns{ columns: 2; }
}
/* 13) Warenkorb-Logo-Button */
/* ========================================================================== */
.brand-lockup{
   line-height: 1;
}

.cart-logo-button{
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   border: 0;
   border-radius: 0;
   background: transparent;
   appearance: none;
   cursor: pointer;
   line-height: 1;
   box-shadow: none;
   text-decoration: none;
   transition: transform .15s ease;
}

.cart-logo-button .brand-logo{
   display: inline-flex;
   align-items: center;
   justify-content: center;
   line-height: 1;
}

.cart-logo-button svg{
   height: 32px;
   width: auto;
   display: block;
}

/* Basisverhalten: Produkt-Warenkorb-Logo */
.cart-logo-button svg :is(path, circle, rect, ellipse, polygon, polyline, line){
   fill: var(--bs-primary) !important;
   stroke: var(--bs-primary) !important;
   transition: fill .15s ease, stroke .15s ease;
}

.cart-logo-button:hover,
.cart-logo-button:focus{
   background: transparent;
   border: 0;
   box-shadow: none;
   transform: translateY(-1px);
}

/* Basis-Hover: Produkt-Warenkorb-Logo dunkelblau -> pink */
.cart-logo-button:hover svg :is(path, circle, rect, ellipse, polygon, polyline, line),
.cart-logo-button:focus svg :is(path, circle, rect, ellipse, polygon, polyline, line){
   fill: var(--bs-secondary) !important;
   stroke: var(--bs-secondary) !important;
}

/* Navbar: leer = weiß -> weiß */
.cart-logo-button.cart-logo-button--empty svg :is(path, circle, rect, ellipse, polygon, polyline, line){
   fill: #F7F6F8 !important;
   stroke: #F7F6F8 !important;
}

.cart-logo-button.cart-logo-button--empty:hover svg :is(path, circle, rect, ellipse, polygon, polyline, line),
.cart-logo-button.cart-logo-button--empty:focus svg :is(path, circle, rect, ellipse, polygon, polyline, line){
   fill: #F7F6F8 !important;
   stroke: #F7F6F8 !important;
}

/* Navbar: gefüllt = pink -> hellblau */
.cart-logo-button.cart-logo-button--full svg :is(path, circle, rect, ellipse, polygon, polyline, line){
   fill: var(--bs-secondary) !important;
   stroke: var(--bs-secondary) !important;
}

.cart-logo-button.cart-logo-button--full:hover svg :is(path, circle, rect, ellipse, polygon, polyline, line),
.cart-logo-button.cart-logo-button--full:focus svg :is(path, circle, rect, ellipse, polygon, polyline, line){
   fill: var(--bs-info) !important;
   stroke: var(--bs-info) !important;
}

.cart-logo-button:focus-visible{
   outline: 2px solid var(--bs-secondary);
   outline-offset: 3px;
   border-radius: .2rem;
}

.table .cart-logo-button svg{
   height: 16px;
   width: auto;
}

.table .cart-logo-button .brand-logo{
   height: 16px;
}

.table .cart-logo-button{
   line-height: 1;
   vertical-align: middle;
}
/* 14) Warenkorb-Button */
/* ========================================================================== */
.btn-rp-tight{
   padding: .15rem .8rem;
   font-size: .9rem;
   line-height: 1.15;
   border-radius: .45rem;
}

.cart-refresh-row{
   margin-top: -.75rem;
   margin-bottom: -.75rem;
}
.cart-refresh-row .btn-outline-success:hover,
.cart-refresh-row .btn-outline-success:focus{
   color: #fff !important;
}
/* 15) Warenkorb Bestprice Background */
/* ========================================================================== */
.cart-matrix td.cart-best-price,
.cart-matrix.table-striped > tbody > tr:nth-of-type(odd) > td.cart-best-price,
.cart-matrix.table-hover > tbody > tr:hover > td.cart-best-price{
   --bs-table-bg: rgba(25, 135, 84, .3);
   --bs-table-striped-bg: rgba(25, 135, 84, .01);
   --bs-table-hover-bg: rgba(25, 135, 84, .4);
 /*  background-color: rgba(25, 135, 84, .5) !important;  */
   font-weight: 400;
}

.cart-matrix td.cart-best-price a{
   font-weight: 400;
}
/* 16) Warenkorb Matrix Head and X-Space-Distribution */
/* ========================================================================== */
.cart-matrix th.cart-matrix-empty-head{
   --bs-table-bg: transparent;
   --bs-table-color: inherit;
   background-color: transparent !important;
   border-top-color: transparent;
   border-left-color: transparent;
}

.cart-matrix{
   table-layout: fixed;
   width: 100%;
}

.cart-matrix-nr-col{
   width: 1.3rem;
}

.cart-matrix-product-col{
   width: 14.5rem;
}

.cart-matrix-shop-col{
   width: auto;
}

.cart-matrix-provider-head,
.cart-matrix-shop-head{
   vertical-align: top;
}

.cart-matrix-note{
   --bs-table-bg: transparent;
   --bs-table-color: #D2D0D4;
   background-color: transparent !important;
   font-weight: 400;
   text-align: center;
   white-space: normal;
}