:root{
  --mx-radius: 16px;
  --mx-radius-sm: 12px;
  --mx-shadow: 0 18px 50px rgba(17,24,39,.10);
  --mx-border: rgba(17,24,39,.10);
}

/* =========================================================================
   Default Nova Suche komplett ausblenden (Desktop + Mobile)
   – wir nutzen ausschließlich unseren Lupen-Toggle.
   ========================================================================= */
.main-search-wrapper,
.search-wrapper-dropdown,
#search.nav-item > .search-wrapper,
#search.nav-item form[role="search"],
.search-form-wrapper-fixed,
.fixed-search.smoothscroll-top-search,
#search-header-mobile-top,
#search-header-mobile-fixed,
#mobile-search-dropdown{
  display:none !important;
}
/* Kompletter Wrapper des NOVA-Mobile-Suchbalkens */
.navbar .search-form-wrapper-fixed,
header .search-form-wrapper-fixed,
header .fixed-search{
  display:none !important;
  height:0 !important;
  padding:0 !important;
  margin:0 !important;
}
/* …aber unser neuer Lupen-Toggle darf natürlich bleiben */
li#mx-search-toggle,
li#mx-search-toggle *{ display: revert; }
li#mx-search-toggle .mx-search-toggle{ display: inline-flex !important; }

/* =========================================================================
   Header search toggle (Lupe bündig zum Account-Icon)
   – übernimmt Farbe/Font-Size vom umgebenden .nav-link-Kontext,
     damit Lupe und User-Icon exakt gleich aussehen.
   ========================================================================= */
ul#shop-nav{
  align-items:center;
  flex-wrap:nowrap;
}
li#mx-search-toggle.mx-search-toggle-slot,
ul#shop-nav > li#mx-search-toggle.mx-search-toggle-slot{
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  align-self:center !important;
  position:relative !important;
  vertical-align:middle !important;
}
.mx-search-toggle{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:.5rem .75rem !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  color:inherit !important;
  font-size:inherit !important;
  line-height:1 !important;
  border-radius:999px !important;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.mx-search-toggle > i{
  font-size:1em;
  line-height:1;
}
.mx-search-toggle:hover,
.mx-search-toggle:focus,
.mx-search-toggle[aria-expanded="true"]{
  background:transparent !important;
  color:var(--nv-primary, #ffa300) !important;
}

/* =========================================================================
   Such-Panel (Dropdown unter der Lupe)
   ========================================================================= */
.mx-search-panel{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:min(640px, calc(100vw - 24px));
  background:#fff;
  border:1px solid rgba(17,24,39,.08);
  border-radius:var(--mx-radius-sm, 12px);
  box-shadow:0 20px 48px rgba(17,24,39,.18);
  padding:.85rem;
  z-index:1060;
  overflow:visible;
}
@media (min-width: 1200px){
  .mx-search-panel{
    width:min(720px, calc(100vw - 32px));
  }
}
.mx-search-panel[hidden]{ display:none !important; }

@media (max-width: 576px){
  .mx-search-panel{
    position:fixed;
    top:64px;
    right:8px;
    left:8px;
    width:auto;
  }
}

.mx-search__form{ margin:0; }
.mx-search__inputwrap{
  position:relative;
  display:flex;
  align-items:center;
}
.mx-search__icon{
  position:absolute;
  left:.75rem;
  top:50%;
  transform:translateY(-50%);
  color:rgba(17,24,39,.55);
  pointer-events:none;
  font-size:.95rem;
}
.mx-search__input{
  width:100%;
  padding:.65rem .75rem .65rem 2.25rem;
  border:1px solid rgba(17,24,39,.14);
  border-radius:999px;
  background:#f9fafb;
  font-size:1rem;
  line-height:1.2;
  color:#0b1220;
  outline:none;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.mx-search__input:focus{
  border-color:var(--nv-primary, #ffa300);
  background:#fff;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--nv-primary, #ffa300) 22%, transparent);
}
.mx-search__clear{
  position:absolute;
  right:.4rem;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:rgba(17,24,39,.55);
  cursor:pointer;
}
.mx-search__clear:hover{ color:#0b1220; background:rgba(17,24,39,.06); }
.mx-search__clear[hidden]{ display:none !important; }

.mx-search__suggest{
  margin-top:.65rem;
  /* Kein eigenes Scrollen: Liste wächst mit (max. 6 Treffer in JS) – Seite scrollt ggf. */
  max-height:none;
  overflow:visible;
}
.mx-search__suggest[hidden]{ display:none !important; }
.mx-search__state{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem .5rem;
  color:rgba(17,24,39,.7);
  font-size:.9rem;
}
.mx-search__state[hidden]{ display:none !important; }

.mx-search__list{
  list-style:none;
  margin:0;
  padding:0;
  overflow-x:hidden;
}
.mx-search__list > li{
  position:relative;
  z-index:0;
  isolation:isolate;
  margin:0 0 .18rem;
}
.mx-search__list > li:last-child{
  margin-bottom:0;
}
/* Hohe Spezifität + !important: NOVA-Regeln wie `nav a { display:block }`
   würden sonst unser Flex-Layout überschreiben (das Such-Panel liegt im
   <nav id="shop-nav">). */
.mx-search-panel .mx-search__list a.mx-search__item,
.mx-search-panel a.mx-search__item{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:.75rem;
  padding:.45rem .55rem;
  border-radius:10px;
  color:#0b1220;
  text-decoration:none !important;
  cursor:pointer;
  position:relative;
  z-index:0;
  width:100%;
  box-sizing:border-box;
  white-space:normal;
  /* Hover-Fläche exakt auf diese Zeile begrenzen (kein Übermalen des nächsten Thumbnails) */
  overflow:hidden;
}
.mx-search-panel a.mx-search__item:hover,
.mx-search-panel a.mx-search__item.is-active,
.mx-search-panel a.mx-search__item:focus{
  background:color-mix(in srgb, var(--nv-primary, #ffa300) 12%, transparent);
  outline:none;
  z-index:0;
}
.mx-search-panel .mx-search__item-thumb{
  width:48px !important;
  height:48px !important;
  max-width:48px !important;
  max-height:48px !important;
  border-radius:8px;
  object-fit:contain;
  background:#f1f5f9;
  flex-shrink:0 !important;
  flex-grow:0 !important;
  border:1px solid rgba(17,24,39,.06);
  display:block;
}
.mx-search-panel .mx-search__item-thumb--placeholder{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:48px !important;
  height:48px !important;
  color:rgba(17,24,39,.4);
}
.mx-search-panel .mx-search__item-body{
  flex:1 1 0% !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:.15rem;
  padding-right:.25rem;
  overflow:hidden;
}
.mx-search-panel .mx-search__item-title{
  display:block !important;
  font-weight:600;
  font-size:.9rem;
  line-height:1.25;
  /* Einzeilige Ellipsis – die robuste, browserübergreifende Variante. */
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:100%;
  width:100%;
}
.mx-search-panel .mx-search__item-price{
  display:block;
  color:rgba(17,24,39,.88);
  font-size:.82rem;
  font-weight:600;
  margin-top:0;
  line-height:1.2;
  white-space:nowrap;
}
.mx-search-panel .mx-search__item-arrow{
  color:rgba(17,24,39,.35);
  flex-shrink:0 !important;
  flex-grow:0 !important;
  margin-top:0;
  transition:transform .15s ease, color .15s ease;
}
.mx-search-panel a.mx-search__item:hover .mx-search__item-arrow,
.mx-search-panel a.mx-search__item.is-active .mx-search__item-arrow{
  transform:translateX(3px);
  color:var(--nv-primary, #ffa300);
}

/* Mini cart dropdown: never force-open */
.cart-dropdown,
#cart-dropdown,
.mini-cart-dropdown{
  display:none;
}
.dropdown.show .cart-dropdown,
.dropdown.show #cart-dropdown,
.dropdown.show .mini-cart-dropdown{
  display:block;
}

/* Topbar / USP bar */
.mx-usp-bar{
  background:linear-gradient(180deg, #0b1220, #0f172a);
  color:rgba(255,255,255,.9);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mx-usp-bar__inner{
  max-width:1320px;
  margin:0 auto;
  padding:.65rem 1rem;
  display:grid;
  grid-template-columns:1fr;
  gap:.6rem;
}
@media (min-width:992px){
  .mx-usp-bar__inner{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; }
}
.mx-usp{ display:flex; gap:.6rem; align-items:flex-start; }
.mx-usp i{ color:var(--nv-primary, #ffa300); margin-top:.1rem; }
.mx-usp__title{ font-weight:800; line-height:1.15; font-size:.95rem; }
.mx-usp__sub{ color:rgba(255,255,255,.72); font-size:.86rem; line-height:1.2; }

/* Hero slider */
.mx-hero-slider{ position:relative; overflow:hidden; }
.mx-hero-slider__track{ position:relative; }
.mx-hero-slide{
  position:relative;
  min-height: clamp(340px, 44vw, 520px);
  display:none;
}
.mx-hero-slide.is-active{ display:block; }
.mx-hero-slide__inner{
  max-width:1320px;
  margin:0 auto;
  padding:2rem 1rem;
  display:grid;
  gap:1.25rem;
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:992px){
  .mx-hero-slide__inner{ grid-template-columns: 1.05fr .95fr; padding:3.1rem 1rem; }
}
.mx-hero-slide__title{
  font-weight:900;
  letter-spacing:-.02em;
  font-size:clamp(2rem, 3.8vw, 3.8rem);
  line-height:1.05;
  margin:0 0 .6rem;
}
.mx-hero-slide__eyebrow{
  font-weight:800;
  color:rgba(255,255,255,.88);
  opacity:.95;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.78rem;
  margin-bottom:.55rem;
}
.mx-hero-slide__lead{
  color:rgba(255,255,255,.82);
  font-size:1.05rem;
  max-width:55ch;
  margin:0 0 1.2rem;
}
.mx-hero-slide__actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
.btn-hero-ghost{
  border:1px solid rgba(255,255,255,.28);
  color:#fff !important;
  background:rgba(255,255,255,.06);
}
.btn-hero-ghost:hover{ background:rgba(255,255,255,.12); }
.mx-hero-slide__media{ position:relative; min-height:240px; }
.mx-hero-slide__pattern{
  position:absolute; inset:0;
  border-radius:var(--mx-radius);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
}
.mx-hero-slide__pattern--dots{
  background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 18px 18px;
}
.mx-hero-slide__pattern--rays{
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 2px, transparent 2px 14px);
  opacity:.75;
}
.mx-hero-slide__pattern--plain{ opacity:.55; }
.mx-hero-slide--primary{
  background:
    radial-gradient(900px 420px at 18% 20%, color-mix(in srgb, var(--nv-primary, #ffa300) 34%, transparent), transparent 62%),
    linear-gradient(180deg, #ffffff, #f8fafc);
  color:#0b1020;
}
.mx-hero-slide--service{
  background:
    radial-gradient(900px 420px at 18% 20%, rgba(34,197,94,.18), transparent 62%),
    linear-gradient(180deg, #ffffff, #f8fafc);
  color:#0b1020;
}
.mx-hero-slide--promo{
  background:
    radial-gradient(900px 420px at 18% 20%, rgba(59,130,246,.14), transparent 62%),
    linear-gradient(180deg, #ffffff, #f8fafc);
  color:#0b1020;
}

.mx-hero-slide__eyebrow{ color: rgba(11,16,32,.78); }
.mx-hero-slide__lead{ color: rgba(11,16,32,.72); }
.btn-hero-ghost{
  border:1px solid rgba(11,16,32,.16);
  color:#0b1020 !important;
  background:rgba(255,255,255,.65);
}
.btn-hero-ghost:hover{ background:rgba(255,255,255,.9); }

/* Trust bar */
.mx-trust-bar{
  background:#fff;
  border-top:1px solid rgba(17,24,39,.06);
  border-bottom:1px solid rgba(17,24,39,.06);
}
.mx-trust-bar__inner{
  max-width:1320px;
  margin:0 auto;
  padding:.9rem 1rem;
  display:grid;
  grid-template-columns:1fr;
  gap:.65rem;
}
@media (min-width:992px){
  .mx-trust-bar__inner{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.mx-trust{ display:flex; gap:.6rem; align-items:center; font-weight:700; }
.mx-trust i{ color:var(--nv-primary, #ffa300); }

/* Newsletter / Brand story */
.mx-newsletter__card{
  border:1px solid rgba(17,24,39,.08);
  border-radius:var(--mx-radius);
  background:linear-gradient(120deg, rgba(245,158,11,.10), rgba(255,255,255,1) 55%);
  padding:1.4rem 1.25rem;
  box-shadow:0 14px 40px rgba(17,24,39,.08);
}
.mx-brand-story__inner{
  border:1px solid rgba(17,24,39,.08);
  border-radius:var(--mx-radius);
  background:#fff;
  padding:1.4rem 1.25rem;
  box-shadow:0 14px 40px rgba(17,24,39,.06);
}

/* Copyright strip + hide default footer copyright */
.mx-copyright-strip{ background:#0b1220; color:rgba(255,255,255,.82); }
.mx-copyright-strip__inner{
  max-width:1320px;
  margin:0 auto;
  padding:.85rem 1rem;
  display:grid;
  grid-template-columns:1fr;
  gap:.5rem;
  font-size:.9rem;
}
@media (min-width:992px){
  .mx-copyright-strip__inner{ grid-template-columns:1fr auto 1fr; align-items:center; }
  .mx-copyright-strip__center{text-align:center;}
  .mx-copyright-strip__right{text-align:right;}
}
#copyright{ display:none; }

/* =========================================================================
   Social proof rotator – 5 Produkte nebeneinander, gemeinsamer Cross-Fade
   ========================================================================= */
:root{
  --nv-proof-thumb: clamp(48px, 5vw, 72px);
  --nv-proof-cols: 5;
}
.mx-proof-rotator{
  background:#0b1220;
  color:rgba(255,255,255,.9);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:1.15rem 0;
  font-size:.85rem;
}
.mx-proof-rotator__inner{
  max-width:1320px;
  margin:0 auto;
  padding:.6rem 1rem;
  display:flex;
  align-items:center;
  gap:.9rem;
}
.mx-proof-rotator__pulse{
  width:8px;height:8px;border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.7);
  animation: mxPulse 2s infinite;
  flex-shrink:0;
}
@keyframes mxPulse{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.6); }
  70%{ box-shadow:0 0 0 10px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}
.mx-proof-rotator__label{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.72rem;
  font-weight:800;
  color:rgba(255,255,255,.7);
  padding-right:.6rem;
  border-right:1px solid rgba(255,255,255,.14);
  flex-shrink:0;
  white-space:nowrap;
}
@media (max-width: 576px){
  .mx-proof-rotator__label{ display:none; }
}

/* Viewport: trägt alle Pages, eine gleichzeitig sichtbar.
   Wichtig: Keine `height:100%`-Kette + absolute Pages – das kann dazu führen,
   dass die Flex-Zeilenhöhe (.mx-proof-rotator__inner) nicht zur Produkt-Höhe passt
   und die Kacheln optisch „über“ dem Container schweben. */
.mx-proof-rotator__viewport{
  position:relative;
  flex:1;
  min-width:0;
  overflow:hidden;
}
.mx-proof-rotator__pages{
  list-style:none;
  margin:0; padding:0;
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:1fr;
}
.mx-proof-rotator__page{
  grid-column:1;
  grid-row:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.25rem 0;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
  pointer-events:none;
}
.mx-proof-rotator__page.is-active{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .45s ease, transform .45s ease, visibility 0s;
  pointer-events:auto;
}
/* Flex-Layout: Items liegen IMMER in EINER Zeile nebeneinander.
   Jedes Item ist genau so breit, dass exakt --nv-proof-cols Stück ins
   Viewport passen. Überzählige Items laufen rechts raus und werden sauber
   per overflow:hidden geclippt – kein Umbruch, keine Überlagerung. */
.mx-proof-rotator__page-grid{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-wrap:nowrap;
  gap:.75rem;
  align-items:center;
  overflow:hidden;
  width:100%;
}
.mx-proof-rotator__item{
  /* (100% - (cols-1)*gap) / cols  – exakte Breite für eine Spalte */
  flex: 0 0 calc((100% - (var(--nv-proof-cols) - 1) * .75rem) / var(--nv-proof-cols));
  max-width: calc((100% - (var(--nv-proof-cols) - 1) * .75rem) / var(--nv-proof-cols));
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  text-align:center;
}

.mx-proof-rotator__imglink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  line-height:0;
  border-radius:10px;
  background:#fff;
  padding:4px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:transform .15s ease, box-shadow .15s ease;
}
.mx-proof-rotator__imglink:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.mx-proof-rotator__thumb{
  width: var(--nv-proof-thumb);
  height: var(--nv-proof-thumb);
  object-fit: contain;
  display:block;
  border-radius:6px;
  background:#fff;
  flex-shrink:0;
}
.mx-proof-rotator__thumb--placeholder{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#22c55e;
  padding:0;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
}

.mx-proof-rotator__time{
  color:rgba(255,255,255,.82);
  font-weight:600;
  font-size:.72rem;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

/* Dots (Seiten-Indikator) */
.mx-proof-rotator__dots{
  display:inline-flex;
  gap:.3rem;
  align-items:center;
  flex-shrink:0;
  padding-left:.4rem;
  border-left:1px solid rgba(255,255,255,.14);
}
.mx-proof-rotator__dot{
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.25);
  transition:background-color .25s ease, transform .25s ease;
}
.mx-proof-rotator__dot.is-active{
  background:#22c55e;
  transform:scale(1.25);
}

/* Responsive Stufen: Spaltenanzahl je Breakpoint.
   Die Breite jedes Items skaliert automatisch mit --nv-proof-cols (Flex-Formel oben). */
@media (max-width: 1199px){
  :root{ --nv-proof-cols: 5; }
}
@media (max-width: 991px){
  :root{ --nv-proof-cols: 4; --nv-proof-thumb: clamp(44px, 6vw, 56px); }
  .mx-proof-rotator__dots{ display:none; }
}
@media (max-width: 767px){
  :root{ --nv-proof-cols: 3; --nv-proof-thumb: clamp(40px, 10vw, 52px); }
  .mx-proof-rotator__label{ display:none; }
  .mx-proof-rotator__inner{ gap:.6rem; padding:.25rem .75rem; }
  .mx-proof-rotator{ padding:.45rem 0; font-size:.78rem; }
  .mx-proof-rotator__time{ font-size:.66rem; }
}
@media (max-width: 480px){
  :root{ --nv-proof-cols: 2; --nv-proof-thumb: 44px; }
  .mx-proof-rotator__page-grid{ gap:.5rem; }
}

/* Zeittext strikt einzeilig mit Ellipsis – niemals Umbruch */
.mx-proof-rotator__time{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Item-Höhe weich begrenzen – der Viewport setzt die eigentliche Sektionshöhe.
   Wir lassen Bild + Text hier komplett durchrutschen, damit nichts abgeschnitten wird. */
.mx-proof-rotator__item{
  max-height: none;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce){
  .mx-proof-rotator__page{ transition:none; transform:none; }
  .mx-proof-rotator__pulse{ animation:none; }
}

/* PDP trust chips */
.mx-trust-chips{
  margin-top:.85rem;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.5rem;
}
@media (min-width:992px){
  .mx-trust-chips{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.mx-trust-chip{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem .7rem;
  border:1px solid var(--mx-border);
  border-radius:999px;
  background:rgba(255,255,255,.65);
  backdrop-filter:saturate(140%) blur(8px);
  font-size:.9rem;
}
.mx-trust-chip i{ opacity:.85; }

/* Cart trust bar */
.mx-cart-trust{
  margin-top:1rem;
  border:1px solid var(--mx-border);
  border-radius:var(--mx-radius);
  background:#fff;
  box-shadow:var(--mx-shadow);
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  overflow:hidden;
}
@media (min-width:992px){
  .mx-cart-trust{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.mx-cart-trust__item{
  display:flex;
  gap:.75rem;
  padding:1rem 1.05rem;
  border-top:1px solid var(--mx-border);
}
.mx-cart-trust__item:first-child{ border-top:0; }
@media (min-width:992px){
  .mx-cart-trust__item{ border-top:0; border-left:1px solid var(--mx-border); }
  .mx-cart-trust__item:first-child{ border-left:0; }
}
.mx-cart-trust__item i{ font-size:1.1rem; margin-top:.15rem; opacity:.9; }
.mx-cart-trust__title{ font-weight:700; line-height:1.2; }
.mx-cart-trust__sub{ color:rgba(33,37,41,.75); font-size:.9rem; line-height:1.2; }

/* Checkout stepper */
.mx-checkout-stepper{
  margin: .75rem 0 1rem;
  padding:.75rem 1rem;
  border:1px solid var(--mx-border);
  border-radius:var(--mx-radius);
  background:#fff;
  box-shadow:0 10px 28px rgba(17,24,39,.06);
}
.mx-checkout-stepper__list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.5rem;
  counter-reset: mxstep;
}
.mx-checkout-stepper__item{
  counter-increment: mxstep;
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.55rem .65rem;
  border-radius:999px;
  background:rgba(15,23,42,.04);
  color:rgba(33,37,41,.8);
  font-size:.92rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.mx-checkout-stepper__dot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(33,37,41,.35);
  flex:0 0 auto;
}
.mx-checkout-stepper__item.is-active{
  background:rgba(245,158,11,.14);
  color:#92400e;
}
.mx-checkout-stepper__item.is-active .mx-checkout-stepper__dot{ background:#f59e0b; }
.mx-checkout-stepper__item.is-done .mx-checkout-stepper__dot{ background:#22c55e; }

/* --- Mobile-Variante: nummerierte Kreise + Label darunter, verbunden per Linie --- */
@media (max-width: 767px){
  .mx-checkout-stepper{
    margin:.5rem 0 .9rem;
    padding:.6rem .5rem;
  }
  .mx-checkout-stepper__list{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:0;
    align-items:start;
  }
  .mx-checkout-stepper__item{
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    gap:.35rem;
    padding:.2rem .15rem;
    background:transparent;
    color:rgba(33,37,41,.75);
    border-radius:0;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    position:relative;
    font-size:.72rem;
    line-height:1.15;
    text-align:center;
  }
  /* Dot wird zum nummerierten Kreis */
  .mx-checkout-stepper__dot{
    width:26px;
    height:26px;
    border-radius:50%;
    background:#e5e7eb;
    color:#374151;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:.78rem;
    font-weight:700;
    position:relative;
    z-index:1;
  }
  .mx-checkout-stepper__dot::before{
    content: counter(mxstep);
    color: inherit;
  }
  .mx-checkout-stepper__item.is-active .mx-checkout-stepper__dot{
    background:#f59e0b;
    color:#fff;
    box-shadow:0 0 0 4px rgba(245,158,11,.15);
  }
  .mx-checkout-stepper__item.is-done .mx-checkout-stepper__dot{
    background:#22c55e;
    color:#fff;
  }
  /* Label: 2 Zeilen erlauben, Ellipsis als letzte Rettung */
  .mx-checkout-stepper__label{
    display:-webkit-box;
    -webkit-line-clamp:2;
            line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    max-width:100%;
    font-size:.7rem;
    line-height:1.15;
    hyphens:auto;
    word-break:break-word;
  }
  .mx-checkout-stepper__item.is-active{
    background:transparent;
    color:#92400e;
  }
  .mx-checkout-stepper__item.is-active .mx-checkout-stepper__label{
    font-weight:700;
  }
  /* Verbindungslinie zwischen den Kreisen (auf Höhe der Kreismitte, ca. 13px) */
  .mx-checkout-stepper__item:not(:last-child)::after{
    content:"";
    position:absolute;
    top:calc(.2rem + 13px - 1px);
    left:calc(50% + 14px);
    right:calc(-50% + 14px);
    height:2px;
    background:#e5e7eb;
    z-index:0;
  }
  .mx-checkout-stepper__item.is-done:not(:last-child)::after{
    background:#22c55e;
  }
}

@media (max-width: 360px){
  .mx-checkout-stepper__label{ font-size:.66rem; }
}

/* Footer trust strip + footer main */
.mx-footer-trust{
  border-top:1px solid rgba(17,24,39,.06);
  border-bottom:1px solid rgba(17,24,39,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,250,252,1));
}
.mx-footer-trust__inner{
  max-width:1320px;
  margin:0 auto;
  padding:1.2rem 1rem;
  display:grid;
  grid-template-columns:1fr;
  gap:.75rem;
}
@media (min-width:992px){
  .mx-footer-trust__inner{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.mx-footer-trust__card{
  display:flex;
  gap:.75rem;
  padding:1rem;
  border:1px solid rgba(17,24,39,.08);
  border-radius:var(--mx-radius);
  background:#fff;
  box-shadow:0 10px 22px rgba(17,24,39,.06);
}
.mx-footer-trust__card i{ font-size:1.2rem; opacity:.9; margin-top:.05rem; }
.mx-footer-trust__title{ font-weight:800; line-height:1.15; }
.mx-footer-trust__sub{ color:rgba(33,37,41,.75); font-size:.92rem; line-height:1.2; }

.mx-footer-main{
  background:#0b1220;
  color:rgba(255,255,255,.88);
}
.mx-footer-main__inner{
  max-width:1320px;
  margin:0 auto;
  padding:2.2rem 1rem;
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
}
@media (min-width:992px){
  .mx-footer-main__inner{ grid-template-columns:1.5fr 1fr 1fr 1fr; }
}
.mx-footer-main__brand-title{ font-weight:900; letter-spacing:.2px; font-size:1.2rem; }
.mx-footer-main__brand-sub{ margin:.6rem 0 0; color:rgba(255,255,255,.72); max-width:36ch; }
.mx-footer-main__heading{ font-weight:800; margin-bottom:.6rem; }
.mx-footer-main__links{
  list-style:none;
  margin:0;
  padding:0;
  display:block;
  column-gap: 1.25rem;
}
.mx-footer-main__links > li{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 .4rem;
}
.mx-footer-main__links > li:last-child{ margin-bottom: 0; }
@media (min-width: 992px){
  /* „wie vorher“: Links nicht alle untereinander, sondern kompakt mehrspaltig */
  .mx-footer-main__links{ column-count: 2; }
}
.mx-footer-main__links:empty{ display:none; }
.mx-footer-main__links a{ color:rgba(255,255,255,.8); text-decoration:none; }
.mx-footer-main__links a:hover{ color:#fff; text-decoration:underline; }
.mx-footer-main__payments{ display:flex; flex-wrap:wrap; gap:.45rem; }
.mx-pay-chip{
  display:inline-flex;
  align-items:center;
  padding:.35rem .6rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.85);
  font-size:.88rem;
}

/* =========================================================================
   Footer #footer-boxes: Linkgruppen (z. B. „Gesetzliche Informationen“)
   – volle Zeilenbreite, Links in 3 Spalten (ab sm).
   Nutzt :has() – moderne Browser (kein IE11).
   ========================================================================= */
@media (min-width: 992px){
  #footer #footer-boxes.row > [class*="col-"]:has(.box-linkgroup){
    flex:0 0 100%;
    max-width:100%;
  }
}
@media (min-width: 576px){
  #footer #footer-boxes .box-linkgroup .nav-panel ul.nav,
  #footer #footer-boxes .box-linkgroup .nav-panel ul.navbar-nav{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    column-gap:1.25rem;
    row-gap:.35rem;
    width:100%;
    flex-direction:unset;
    flex-wrap:unset;
  }
  #footer #footer-boxes .box-linkgroup .nav-panel ul.nav > li,
  #footer #footer-boxes .box-linkgroup .nav-panel ul.navbar-nav > li{
    margin-bottom:.35rem;
    break-inside:avoid;
  }
}
@media (max-width: 575.98px){
  #footer #footer-boxes .box-linkgroup .nav-panel ul.nav,
  #footer #footer-boxes .box-linkgroup .nav-panel ul.navbar-nav{
    display:grid !important;
    grid-template-columns:1fr;
    width:100%;
  }
}