.compare {
    position: absolute;
    right: 15px;
}

#sauger-compare-container {
	width: 48px;
}
.sauger-compare-container-center-right {
	position: fixed;
    top: 50%;
    right: 20px;
	display:none;
}

#sauger-compare-launcher {
	cursor:pointer !important;
	text-align:center;
	transform-origin: center center;
    width: 48px;
}

#sauger-compare-container-new {
	width: 100%;
}

.sauger-compare-container-new-bottom {
	position: fixed;
    left: 0;
    bottom: 0;
	display:none;
	z-index:9999999999;
	padding:2px 0 5px;
	border-top: 1px solid #DBDBDB;
    -webkit-box-shadow: 0 -5px 10px rgb(177 176 176 / 10%);
    box-shadow: 0 -5px 10px rgb(177 176 176 / 10%);
    background: #fff;
	-webkit-transition: all .5s ease;
    transition: all .5s ease;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
}
.sauger-compare-container-new-bottom.showing {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.sauger-compare-container-new-bottom.active {
    display:block;
}
.inner {
	position: relative;
    max-width: 200px;
    margin: 15px auto;
    padding-left: 30px;
    padding-right: 30px;
    text-align: center;
}



.button-compare:before,.button-details:before,.button-testbericht:before,.button-back:before  {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
	background-size: 24px 24px;
    background-position: 5px center;
}

.button-compare, .button-details,.button-testbericht,.button-back {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-font-smoothing: antialiased;
    vertical-align: baseline;
    font-family: inherit;
    transition: all .25s ease-in-out;
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    padding: 7px 12px 6px;
    border: 1px solid transparent !important;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px !important;
    text-align: center;
    text-decoration: none !important;
    border-color: #1a1919 #1f1e1e #2e2c2c !important;
    border-radius: 3px !important;
    box-shadow: 0 1px 0 rgb(255 255 255 / 40%) inset;
    background: linear-gradient(to bottom,#e6e6e6,#b3b3b3) repeat scroll 0 0 rgba(0,0,0,0);
    color: #111 !important;
    position: relative;
    padding-left: 32px;
	min-width: 170px;
    
}

.button-compare:hover, .button-details:hover,.button-testbericht:hover,.button-back:hover {
background: linear-gradient(to bottom,#d9d9d9,#b3b3b3) repeat scroll 0 0 rgba(0,0,0,0);
}

.button-compare:before {
	background-image: url(/wp-content/themes/smart-mag-child/images/compare2.png);
}
.button-details:before {
	background-image: url(/wp-content/themes/smart-mag-child/images/lupe.png);
}
.button-testbericht:before {
	background-image: url(/wp-content/themes/smart-mag-child/images/post.png);
}
.button-back {
	 padding-left: 12px;
}

.sauger-compare-container-center-right {
	position: fixed;
    top: 50%;
    right: 20px;
	display:none;
}


.sauger-compare-launcher-button img {
	width: 48px;
}

.sauger-compare-launcher-message {
	right:61px;
	padding: 14.4px;
	position: absolute;
    color: #fff;
    background: #000;
    cursor: pointer;
    border-radius: 5px;
    transform: translateY(-50%) scaleX(0) translateZ(0);
    opacity: 0;
    pointer-events: none;
    transition: transform 175ms ease-in-out,opacity 175ms ease-in-out;
    top: 50%;
    z-index: 2147481000;
	white-space:nowrap;
	transform-origin: right center;
}
#sauger-compare-launcher:hover .sauger-compare-launcher-message {
    opacity:1;
	transform: translateY(-50%) scaleX(1) translateZ(0);
}
.table-responsive {
    min-height: .01%;
    overflow-x: auto;
	margin:auto;
	width: 100%;
}
.table-sauger {
	border-collapse: collapse;
}
.table-responsive > .table-sauger {
    width: 100%;
    margin-bottom: 10px;
    overflow-x: auto;
    overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
.table-sauger th, .table-sauger td {
	border: 1px solid #a7a7a7;
}
.table-sauger thead th, .table-sauger thead td {
	position: sticky;
	top: 0;
	z-index: 20;
}
.table-sauger > tbody > tr > td {
	text-align:left;
	vertical-align:middle;
}
.table-sauger > tbody > tr > td.padLeft {
	/*padding-left: 40px;
	padding-right: 40px;*/
	text-align:left;
}
.sauger-title {
	font-weight:bold;
}
.sauger-preis{
	font-size:larger;
	font-weight:700;
}
.sauger-preis span {
	font-size: xx-small;
	font-weight: normal;
}
.table-sauger .aawp-button, .table-sauger .kaufen {
	/*width:auto !important;*/
	white-space:nowrap;
}
@media (max-width: 1128px) {
	.table-responsive { 
		width: auto;
	}
	.vergleich {
		display:inline;
	}
	i.compare.fa {
		font-size: large;
	}
	label.compare {
		display:inline;
	}
}
.table-sauger > tbody > tr > td.sauger-features, 
.table-sauger > tbody > tr > td.sauger-zubehor, 
.table-sauger > tbody > tr > td.sauger-sprachsteuerung,
.table-sauger > tbody > tr > td.sauger-wohnsituation
{
    vertical-align: top;
}
.sauger-features p, .sauger-zubehor p {
	margin-bottom:3px;
    padding-left: 1.4em;
}
.sauger-features p i, .sauger-zubehor p i{
	text-indent: -1.4em;
}
span>i.fa.fa-info-circle {
    text-indent: 0.5em;
}
.toggle {
	font-size: xx-small;
    color: darkgray;
	width: 100%;
    
    position: absolute;
    top: 5px;
    right: 10px;  
      z-index: 10;
    text-align:right;
    vertical-align:bottom;
	cursor:pointer;
}
.mt {
	margin-top:20px;
}
.tblinner, .tblinner tr, .tblinner td {
	border:0px;
	background:white;
}
.tblinner .preis { 
overflow: hidden;
}
#sauger-compare-container-new .inner{
  display:flex;
  flex-direction:column;
  gap:10px;
  width: 100%;
  max-width: 800px;   /* oder 100% */
}
#sauger-compare-container-new .compare-preview{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  min-height:44px;
}
#sauger-compare-container-new .compare-preview__item{
  width:44px;height:44px;
  border-radius:5px;
  /*overflow:hidden;*/
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
#sauger-compare-container-new .compare-preview__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
#sauger-compare-container-new .compare-preview__placeholder{
  width:70%;
  height:70%;
  border-radius:8px;
  background:rgba(0,0,0,0.08);
}
/* --- Compare Footer: Layout-Fix --- */
#sauger-compare-container-new.sauger-compare-container-new-bottom{
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
}

#sauger-compare-container-new .inner{
  /* deine globale .inner überschreiben */
  width: 100%;
  max-width: 720px;
  margin: 10px auto;
  padding: 0 12px;            /* symmetrisch + klein */
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  gap: 10px;

  overflow: visible;
}

/* Button-Wrapper volle Breite */
#sauger-compare-container-new #btn-compare{
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Der Link MUSS block-level + box-sizing sein */
#sauger-compare-container-new .button-compare{
  display: block;
  box-sizing: border-box;

  width: 100%;
  max-width: 360px;

  min-width: 0 !important;    /* killt dein min-width:170px in engen Layouts */
}
/* --- iOS Safari safe-area fix --- */
#sauger-compare-container-new.sauger-compare-container-new-bottom{
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  will-change: transform;
}

#sauger-compare-container-new.sauger-compare-container-new-bottom.showing{
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* Button disabled Optik + Klickblock (JS blockt auch) */
#btn-compare.is-disabled .button-compare{
  opacity: .45;
  filter: grayscale(1);
  cursor: not-allowed;
}

/* X Overlay auf Thumbnail */
#sauger-compare-container-new .compare-preview__item{
  position: relative;
  border: 0;
  padding: 0;
}

#sauger-compare-container-new .compare-preview__remove{
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(0,0,0,.75);
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
}