/* ------------------------------------------------------------------------------
  FLATAUCTION EBAY TEMPLATE MADE BY PIXELSAFARI
  Template Name: FlatAuction
  Version: 2.95 (Cleaned)

  STRUCTURE:
  1. General & Wrapper
  2. Header & Navigation
  3. Gallery & Zoom
  4. Content Columns (Upper Body)
     4a. Middle Column (Title, Description, Variations)
     4b. Right Column (Brand Info)
  5. Tab Bar & Content
     5a. CSS-Only Slider
  6. "Why Choose Us" Section
	 6a. Footer Banner
  7. Cross-Selling
  8. Footer
  9. Legal Notice & Safety Icons
  10. Tools & Utilities
     10a. Animations
     10b. Icon List
     10c. Video Wrapper
  11. Media Queries
------------------------------------------------------------------------------ */

/* Ganz oben in flatAuction_style.css */
*, *::before, *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------
   1. General & Wrapper
-------------------------------------------------- */

#wrapper {
  max-width: 1390px;
  margin: 0 auto;
  padding: 0 20px;
  font-family: 'Lato', sans-serif;
}

.clearer {
  clear: both;
}

hr.divider {
  border: none;           /* Standard-Rand entfernen */
  height: 2px;            /* Linienstärke */
  background-color: #FEC200; /* Linienfarbe */
  margin: 16px 0;         /* Abstand ober- und unterhalb der Linie */
}

/* --------------------------------------------------
   2. Header & Navigation
-------------------------------------------------- */

.header {
  margin-bottom: 50px;
}

.logoContainer {
  width: 100%;
  max-width: 1390px;
  margin: 0 auto;
  aspect-ratio: 2048 / 542;
  background-image: url('https://assets.ebay.baer.tools/_Layout/BAER_ebay_Header.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: block;
}

.navigationContainer {
  display: block;
  margin-top: 25px;
  height: 50px;
  border-top: 2px solid #fec200;
  border-bottom: 2px solid #fec200;
  background-color: #fec200;
}

.navigationContainer ul {
  margin: 0;
  padding: 0;
  line-height: 50px;
}

.navigationContainer ul li {
  display: inline-block;
  margin-left: 40px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 16px;
}

.navigationContainer a,
.navigationContainer a:visited {
  color: #fff;
  text-decoration: none;
}

.navigationContainer ul li:hover,
.navigationContainer ul li a:hover {
  cursor: pointer;
  text-decoration: underline;
}


/* --------------------------------------------------
   3. Gallery & Zoom
-------------------------------------------------- */

.gallery {
  width: 43%;
  margin-right: 2%;
  float: left;
  position: relative;
  padding-top: 630px;
}

.gallery input[type=radio] {
  visibility: hidden;
  margin: 0;
  padding: 0;
  height: 0;
  width: 0;
  position: absolute;
}

/* Big Picture Display */
.bigPic {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 630px;
  text-align: center;
  opacity: 0;
  background-color: #fff;
  transition: opacity 0.5s;
  margin: 0;
  z-index: -99;
}

.bigPic img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  display: inline;
}

#big-pic-1:checked~.bigPic:nth-of-type(1),
#big-pic-2:checked~.bigPic:nth-of-type(2),
#big-pic-3:checked~.bigPic:nth-of-type(3),
#big-pic-4:checked~.bigPic:nth-of-type(4),
#big-pic-5:checked~.bigPic:nth-of-type(5),
#big-pic-6:checked~.bigPic:nth-of-type(6),
#big-pic-7:checked~.bigPic:nth-of-type(7),
#big-pic-8:checked~.bigPic:nth-of-type(8),
#big-pic-9:checked~.bigPic:nth-of-type(9),
#big-pic-10:checked~.bigPic:nth-of-type(10),
#big-pic-11:checked~.bigPic:nth-of-type(11),
#big-pic-12:checked~.bigPic:nth-of-type(12) {
  opacity: 1;
  display: block;
  z-index: 10;
}

/* Thumbnails */
.galleryThumb {
  position: relative;
  display: inline-block;
  margin-right: 1%;
  margin-left: -4px;
  width: 24%;
  height: 140px;
  text-align: center;
  margin-bottom: 5px;
  transition: all 0.2s;
}

.galleryThumb:nth-of-type(4n+1) {
  margin-left: 0;
}

.galleryThumb:nth-of-type(4n) {
  margin-right: 0;
}

.galleryThumb:hover {
  opacity: 0.7;
  cursor: pointer;
  transition: all 0.2s;
}

.galleryThumb img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  display: inline;
}

/* Zoom Overlay */
.overlay {
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
}

#zoompic-1:target,
#zoompic-2:target,
#zoompic-3:target,
#zoompic-4:target,
#zoompic-5:target,
#zoompic-6:target,
#zoompic-7:target,
#zoompic-8:target,
#zoompic-9:target,
#zoompic-10:target,
#zoompic-11:target,
#zoompic-12:target {
  display: block;
}

.zoom-bigPic {
  width: 70%;
  height: auto;
  margin: 0 auto;
  background: #fff;
  text-align: center;
  padding: 2%;
  margin-top: 20px;
}

.zoom-bigPic img {
  max-width: 100%;
  max-height: 600px;
  display: inline;
}

.overlay a.close-text {
  margin-top: 20px;
  color: #555 !important;
  text-decoration: underline;
  font-size: 15px;
  clear: both;
  display: block;
  font-weight: normal;
}

.overlay a i.fa-close {
  color: #555 !important;
  font-size: 40px;
  margin-bottom: 20px;
  z-index: 2000;
  float: right;
}


/* --------------------------------------------------
   4. Content Columns (Upper Body)
-------------------------------------------------- */

/* 4a. Middle Column (Title, Description, Variations) */
.midColumn {
  float: left;
  max-width: 390px;
}

.midColumn h1 {
  color: #333;
  font-weight: 400;
  font-size: 26px;
  margin-bottom: 0;
}

.underline {
  margin: 15px 0;
  width: 380px;
  height: 1px;
  background-color: #ebebeb;
}

.shortdescription {
  float: left;
}

.shortdescription p,
.shortdescription ul,
.shortdescription li {
  color: #555;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

#variationContainer {
  margin: 20px 0 0 0;
  padding-bottom: 45px;
  padding-left: 0;
  width: 345px;
  font-family: 'montserrat', sans-serif;
}

#variationContainer h5 {
  margin-top: 25px;
  margin-bottom: 10px;
  font-weight: 400;
  font-size: 14px;
}

.varList1,
.varList2 {
  margin: 0;
  padding: 0;
  list-style: none;
}

.varList1 li,
.varList2 li {
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 5px;
  padding: 5px 10px;
  border: 1px solid #333;
  color: #333;
  font-size: 12px;
}

.varList1 li:hover,
.varList2 li:hover {
  background-color: #000;
  color: #fff;
  cursor: default;
}


/* 4b. Right Column (Brand Info) */
.rightColumn {
  float: right;
  padding-left: 20px;
  width: 18% !important;
  border-left: 1px solid #ebebeb;
}

.brandContainer {
  margin: 5px 0 20px 0;
  padding-bottom: 22px;
  border-bottom: 1px solid #ebebeb;
  text-align: center;
}

.brandContainer img {
  max-width: 150px;
  max-height: 74px;
  display: inline;
}

.brandContainer span {
  margin-top: 12px;
  font-size: 14px;
  display: inline-block; /* To apply margin-top */
}

.trustViewDescription {
  clear: both;
  margin-bottom: 15px;
  font-size: 14px;
  height: 40px;
  overflow: hidden;
}

.rightColumn .circle {
  float: left;
  margin-right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: #fec200;
  text-align: center;
}

.rightColumn .circle i {
  color: #ffffff;
  font-size: 18px;
  line-height: 40px;
}

.trustViewDescription p {
  margin: 0;
  padding: 0;
  line-height: 20px;
}


/* --------------------------------------------------
   5. Tab Bar & Content
-------------------------------------------------- */

.tabBar {
  width: 100%;
  max-width: 1390px;
  margin: 40px auto 0 auto;
  padding: 0 20px;
  clear: both;
}

.tabBar input[type=radio] {
  visibility: hidden;
  margin: 0;
  padding: 0;
  height: 0;
  width: 0;
  position: absolute;
}

.tablinks {
  display: inline-block;
  margin: 0 1% -4px -4px;
  padding-top: 0;
  width: 24.25%;
  height: 45px;
  line-height: 45px;
  background-color: #EFF0EB;
  color: #666666;
  text-align: center;
  /* Minimal 14px, maximal 18px, dazwischen je 2.5 % der Viewport-Breite */
  font-size: clamp(14px, 2.5vw, 18px) !important;
  transition: all 0.1s;
  margin-bottom: 10px;
}

.tabBar label:last-of-type {
  margin-right: 0;
}

.tablinks:hover {
  background-color: #fec200;
  color: #fff;
  cursor: pointer;
}
/* Aktives Tab gelb hinterlegen */
.tabBar input[type=radio]:checked + label.tablinks {
  background-color: #fec200;
  color: #fff;
}

#tab1, #tab2, #tab3, #tab4 {
	display: none; }

#tab1-btn:checked ~ #tab1,
#tab2-btn:checked ~ #tab2,
#tab3-btn:checked ~ #tab3,
#tab4-btn:checked ~ #tab4 {
  display: block;
  color: #fff;
  cursor: pointer;
}

.tabContent {
  clear: both;
  color: #222;
  text-align: left;
  overflow: auto;
  font-size: 16px;
  line-height: 1.5;
  padding-top: 0;
  display: block;
}

.tabContent p {
  margin: 0;
  padding: 0;
}

.tabContent a,
.tabContent a:visited {
  color: #fec200;
  text-decoration: none;
}

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

.tabContent h2 {
  font-weight: 300;
  font-size: 28px;
  transition: all 0.1s;
  margin-top: 0 !important;
  padding-top: 0 !important;
  }

.tabContent h2:hover {
  color: #fec200;
  cursor: default;
  margin-top: 0 !important;
  padding-top: 0 !important;
  }
  
.tabContent img {
  max-width: 100%;
  height: auto;
}

#tab1 .tabContent > div > h2 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.tabContent ul,
.tabContent ol {
  display: block;
  text-align: left;
  margin: 0 0 1em 0;
  position: relative;
  line-height: 1.5;
  padding-left: 40px;
  list-style: none;    /* entfernt Punkt/Bullet */
  }

.tabContent ul,
.tabContent li,
.tabContent p {
  word-break: break-word;
}

.contentImgLeft {
  float: left;
  margin: 0 25px 15px 0;
  max-width: 45%;
}

.contentImgRight {
  float: right;
  margin: 0 0 15px 25px;
  max-width: 45%;
}

.contentImgInline {
  display: inline-block;
  vertical-align: top;
  margin: 0 0 15px 15px;
}

.contentImgLeft img,
.contentImgRight img,
.contentImgInline img {
  max-width: 100%;
  height: auto;
}

.contentImgInline img {
  display: inline;
}

/* 5a. CSS-Only Slider */
.baerSliderCSS {
  width: 100%;
  max-width: 1390px;
  margin: 10px auto 30px auto; /* Abstand nach unten halbiert */ 
  aspect-ratio: 1390 / 250; /* z.B. 1390px Breite auf 250px Höhe */
  /* aspect-ratio: 2048 / 542; */
  overflow: hidden;
  /* margin-bottom: 0 !important; */
  }

.slide-track {
  display: flex;
  width: 200%; /* Double length for loop */
  animation: scroll 20s linear infinite;
}

.baerSliderCSS:hover .slide-track {
  animation-play-state: paused;
}

.slide {
  flex: 0 0 calc(100% / 3); /* 3 Slides visible */
}

.slide img {
  width: 100%;
  display: block; /* block is better for seamless slider */
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- statisches Bild für mobile Endgeräte --- */
.baerMobileStaticImage {
  display: none;
  width: 100%;
  /* Höhe ggf. anpassen oder mit padding-top (%) arbeiten */
  padding-top: 40%;
  background-image: url("https://assets.ebay.baer.tools/_Layout/BAER_ebay_Header_schwarz_dezent.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* --------------------------------------------------
   6. "Why Choose Us" Section
-------------------------------------------------- */

.whyChooseUs {
  margin: 30px 0 !important;      /* oben und unten je 30px Außenabstand */
  padding: 20px 0 30px 0 !important; /* innen unten 30px, oben weiter 10px */
  overflow: auto;                 /* verhindert, dass margin-bottom kollabiert */
  width: 100%;
  background-color: #fec200;
}

.whyChooseUs h2 {
  color: #fff;
  margin-top: 0px !important;
  margin-bottom: 30px !important;   /* statt 8px jetzt 20px */
  text-align: center;
  font-weight: 400;
  font-size: 36px;
  font-family: 'Roboto Slab', serif;
}

.whyChooseUsBlockContainer {
  display: grid !important;
  /* mind. 200px pro Spalte, max. 1fr (=Restaum) – so bist du bei 4 Spalten */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 20px !important;            /* horizontaler + vertikaler Abstand */
  padding: 0 20px !important;      /* Rand links/rechts wie Row-Gap */
  align-items: stretch !important; /* gleiche Höhe aller Blocks */
  box-sizing: border-box !important;
  text-align: center !important;
}

.whyChooseUsBlock {
  /* Inhalt in der Spalte per Flex vertikal anordnen */
  display: flex !important;
  flex-direction: column !important;
  /* fülle die Spalte komplett – Höhe macht das Grid via align-items */
  flex: 1 0 auto !important;
  min-height: 335px !important;    /* deine ursprüngliche Mindesthöhe */
  padding: 0 1% !important;
  background-color: #fff !important;
  border-radius: 5px !important;
  transition: all 0.2s !important;
}

.whyChooseUsBlock:hover {
  color: #fec200;
  cursor: default;
}

.whyChooseUs .circle {
  position: relative;
  top: -38px;
  display: block;
  margin: 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background-color: #fec200;
}

.whyChooseUs .circle i {
  margin-top: 20px;
  color: #ffffff;
  font-size: 36px;
}

.whyChooseUsBlock h3 {
  margin-top: 0;
  text-align: center;
  font-weight: 400;
  font-size: 20px;
  font-family: 'Roboto Slab', serif;
  color: #fec200 !important;
}

.whyChooseUsBlock p {
  margin-top: 25px;
  color: #666666;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
}
/* --------------------------------------------------
   6a. Footer Banner
-------------------------------------------------- */

.footerBanner {
  width: 100%;
  max-width: 100%;           /* ← statt 1390px */
  margin: 30px auto 50px auto;
  aspect-ratio: 2048 / 542;
  background-image: url('https://assets.ebay.baer.tools/_Layout/BAER_ebay_Footer_Versand.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: block;
}

/* --------------------------------------------------
   7. Cross-Selling
-------------------------------------------------- */

.crossSellerContainer {
  clear: both;
  margin-top: 60px;
  width: 100%;
  text-align: left;
}

.crossSellerContainer::after {
  content: "";
  display: table;
  clear: both;
}

#csc2 {
  margin-bottom: 80px;  /* Abstand zum Footer */
}

.crossSellerContainerHeading {
  padding: 0;
  border-bottom: 3px solid #333;
}

.crossSellerContainer h2 {
  position: relative;
  top: 3px;
  display: inline-block;
  margin: 0;
  padding: 0 0 8px 0;
  border-bottom: 3px solid #fec200;
  color: #333;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 24px;
}

.crossSellerItem {
  display: inline-block;
  overflow: hidden;
  margin-top: 30px;
  margin-right: 3%;
  padding: 0;
  width: 22.2%;
  min-height: 305px; /* genug Platz für Standard-Inhalte */
  height: auto;      /* Box wächst bei Bedarf mit */
  vertical-align: top;
  cursor: pointer;
  transition: all 0.2s;
  float: left;
  }

.crossSellerItem:last-child {
  margin-right: 0;
}

.crossSellerItemImgContainer {
  position: relative;
  width: 100%;
  height: 233px;
  text-align: center;
}

.crossSellerItemImgContainer img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  transition: all 0.5s;
  display: inline;
}

.crossSellerItem a {
  color: #000;
  text-decoration: none;
}

.crossSellerItem span {
  float: left;
  margin-top: 9px;
  width: 100%;
  text-align: center;
}

.crossSellerItem h3 {
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: 16px;
  transition: all 0.2s;
  white-space: normal;
  overflow: visible;
  line-height: 1.4;  
}

.crossSellerItem p {
  margin-top: 7px;
  padding: 0;
  color: inherit;
  font-size: 15px;
  transition: all 0.2s;
  white-space: normal;
  overflow: visible;
  line-height: 1.4;  
}

.crossSellerItem:hover h3,
.crossSellerItem:hover p,
.crossSellerItem:hover a {
  color: #fec200;
}

.crossSellerItem:hover img {
  opacity: 0.7;
}


/* --------------------------------------------------
   8. Footer
-------------------------------------------------- */

.footerContainer {
  width: 100% !important;          
  max-width: none !important;      
  margin: 0 !important;            

  display: grid !important;
  /* jede Spalte mind. 220px, max. 260px breit */
  grid-template-columns: repeat(auto-fit,minmax(220px, 280px)) !important;
  justify-content: center !important; /* Spalten zentriert ausrichten */
  column-gap: 100px !important;  /* horizontaler Abstand */
  row-gap:    40px !important;  /* vertikaler Abstand */
  padding: 40px 20px;                  
  box-sizing: border-box;              
  background-color: #000000;           
}

.footerColumn {
  margin: 0;
}

.footerColumn h2 {
  margin: 0 0 26px 0;
  padding: 0 0 8px 0;
  border-bottom: 2px solid #fec200;
  color: #f0f0f0;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 17px;
  font-family: 'Montserrat', Arial, sans-serif;
  letter-spacing: normal;
  text-align: left;
  /* neu: Platz für zwei Zeilen erzwingen */
  line-height: 1.2 !important;
  /* min-height: 60px !important; */
  }

.footerColumn p {
  color: #D6D6D6;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 1em 0;
}

.footerColumn a {
  color: #fec200;
  font-weight: 300;
  text-decoration: none;
}

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

.footerRow {
  margin-bottom: 12px;
  text-align: left;
}

.footerRow i {
  float: left;
  color: #d6d6d6;
  font-size: 20px;
  line-height: 18px;
  margin-right: 10px;
}

.footerRow span {
  color: #f0f0f0;
  font-size: 15px;
  font-family: Lato, sans-serif;
  font-weight: 400;
  line-height: 1.35;
  margin-left: 3px;
  text-align: left;
  display: inline;
}

#copyright {
  margin-top: 12px;
  color: #D6D6D6;
  font-size: 9px;
}

#copyright a {
  color: #ffffff;
  text-decoration: underline;
}


/* --------------------------------------------------
   9. Legal Notice & Safety Icons
-------------------------------------------------- */

.Notice {
  background-color: #FFFFFF;
  color: #000000;
  text-align: center;
  padding: 20px;
  font-size: 12px;
  line-height: 1.6;
}

.Notice a {
  color: #000000;
  text-decoration: underline;
}

.Notice a:hover {
  color: #fec200;
}

.Notice p {
  margin: 10px 0;
}

.Notice .noticeIntro {
  font-size: 16px;
  font-weight: bold;
  margin: 20px 0;
}

.safetyIcons,
.warningIcons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  margin: 20px 0;
}

.iconBlock {
  text-align: center;
  max-width: 100px;
}

.iconBlock img {
  width: 50px;
  height: auto;
  display: inline;
}

.iconBlock p {
  margin-top: 5px;
  font-size: 11px;
  color: #000000;
}


/* --------------------------------------------------
   10. Tools & Utilities
-------------------------------------------------- */

/* 10a. Animations */
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fadeInRight {
  animation-name: fadeInRight;
}

/* 10b. Icon List */
.icon-list {
  list-style: none;
  padding-left: 0; /* Let's align it left */
  margin: 20px 0;
}

.icon-list li {
  margin-bottom: 10px;
  font-size: 16px;
  padding-left: 0; /* Remove default list padding */
}

.icon-list li i {
  margin-right: 10px;
  color: #fec200;
  min-width: 26px;
  text-align: center;
  display: inline-block;
}

.icon-baer-yellow {
  color: #fec200 !important;
}

/* 10c. Video Wrapper */
.ytvideo {
  margin: .5em auto;
  max-width: 480px;
  font-family: arial;
  text-align: center;
  position: relative;
  min-height: 120px;
  overflow: hidden;
  background-color: #555;
}

.ytvideo p {
  position: absolute;
  margin: 0;
  color: white;
  background-color: rgba(0, 0, 0, .5);
}

.ytvideo .yt_ft {
  font-size: 11px;
  width: 100%;
  bottom: 0;
  left: 0;
}

.ytvideo img {
  display: block;
  max-width: 100%;
  border: 0;
}

.ytvideo a:after {
  content: "\A0\25BA";
  position: absolute;
  width: 60px;
  height: 50px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 0;
  border-radius: 10px;
  color: white;
  background: rgba(0, 0, 0, .6);
  font-size: 24px;
  line-height: 50px;
  cursor: pointer;
}

.ytvideo a:hover:after {
  background: #cc181e;
}


/* --------------------------------------------------
   11. Media Queries
-------------------------------------------------- */

/* @media only screen and (max-width: 1292px) {
  .bigPic {
    height: 540px;
  }
  .gallery {
    padding-top: 540px;
  }
}

@media only screen and (max-width: 1215px) {
  .gallery {
    width: 40%;
  }
  .bigPic {
    height: 520px;
  }
}

@media only screen and (max-width: 1200px) {
  .gallery {
    padding-top: 500px;
  }
  .galleryThumb {
    height: 130px;
  }
} */

@media only screen and (max-width: 1440px) {
  .rightColumn {
    padding-left: 10px;
    width: 14%;
  }
  .rightColumn .trustViewDescription {
    height: 45px;
  }
  .rightColumn .trustViewDescription p {
    font-size: 11px;
    line-height: 1.3;
  }
  .rightColumn .circle {
    width: 30px;
    height: 30px;
  }
  .rightColumn .circle i {
    font-size: 14px;
    line-height: 30px;
  }
  .bigPic {
    height: 450px;
  }
  .gallery {
    padding-top: 460px;
  }
  .galleryThumb {
    height: 120px;
  }
  .footerContainer {
    /* erzwinge genau drei Spalten, jede flexibel bis 1fr */
    grid-template-columns: repeat(3, minmax(200px, 1fr)) !important;
    /* engeren Zwischenraum, damit es reinpasst */
    column-gap: 30px !important;
    row-gap:    30px !important;
  }  
}

@media only screen and (max-width: 1200px) {
  .galleryAndShortdescriptionContainer {
    float: none;
    margin: 0 auto;
    width: 100%;
  }
  .gallery {
    display: block;
    margin: 0 auto;
    width: 50%;
    padding-top: 510px;
  }
  .bigPic {
    height: 530px;
  }
  .midColumn {
    float: left;
    margin: 0 auto 0 20px;
    width: 47%;
  }
  .rightColumn {
    clear: both;
    margin: 40px auto 0 auto;
    padding-top: 20px;
    width: 100% !important;
    max-width: 100%;
    border: none;
    border-top: 1px solid #ddd;
    text-align: center;
  }
  .trustViewDescription {
    display: inline-block;
    width: 40%;
    vertical-align: top;
    text-align: left;
    margin-right: 20px;
  }
  .tabBar {
  margin-bottom: 0 !important;
  }

  .whyChooseUsBlockContainer {
    /* links/rechts je 20px Rand */
    padding: 0 20px !important;
    box-sizing: border-box !important;
    /* weniger Mindestbreite, damit sie schmaler werden können */
    grid-template-columns: repeat(auto-fit,minmax(180px, 1fr)) !important;
    gap: 20px !important;
  }
  
/*   .whyChooseUsBlock {
    width: 30%;
  } */
}

@media only screen and (max-width: 1020px) {
  .footerContainer {
    /* wieder flexibel so viele Spalten einfügen, wie Platz ist */
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    /* engerer Gap, damit es in 1020 px + Padding passt */
    column-gap: 20px !important;
    row-gap:    30px !important;
    /* links/rechts je 20px Rand */
    padding:    40px 20px !important;
    box-sizing: border-box !important;
  }
}

@media only screen and (max-width: 992px) {

/*   /* Elemente für mobile Ansicht ausblenden */
  .whyChooseUs {
    display: none !important;
  }
  
  .bigPic {
    height: 360px;
  }
  .gallery {
    padding-top: 370px;
  }
  .contentImgLeft,
  .contentImgRight {
    float: none;
    clear: both;
    margin: 0 auto 10px auto;
    max-width: 100%;
  }  
}

@media only screen and (max-width: 768px) {
  
  /* „Was uns auszeichnet“-Container ausblenden */
  .whyChooseUsBlockContainer,
  .whyChooseUs {
    display: none !important;
  }
  
  .gallery,
  .midColumn {
    width: 100%;
    margin: 20px auto;
    float: none;
  }
  .midColumn h1,
  .shortdescription p,
  #variationContainer {
    text-align: center;
  }
  #variationContainer {
    margin: 0 auto;
    width: auto;
  }
  
  /* Tab-Bar als flexibles Grid mit Wrap */
  .tabBar {
    display: flex;
    flex-wrap: wrap;             /* mehrere Zeilen erlauben */
    justify-content: space-between;
    padding: 0 10px;             /* optional: etwas Innenabstand */
	margin-bottom: 10px !important;
  }

  /* Je zwei Tabs pro Zeile */
  .tablinks {
    /* Tab-Buttons zu Flex-Containern machen */
    display: flex !important;
    align-items: center;      /* vertikal zentrieren */
    justify-content: center;  /* horizontal zentrieren */

    /* Höhe definieren, damit alle gleich hoch sind */
    height: 40px !important;
    line-height: normal;      /* Zeilenhöhe zurücksetzen */

    /* Schriftgröße noch etwas kleiner */
    font-size: 18px !important;   /* oder 1rem / 1.1rem, ganz nach Geschmack */
    line-height: 1.3;              /* sorgt für etwas mehr Platz in der Höhe */

    /* Innenabstand beibehalten oder anpassen */
    padding: 0 6px !important;
  }   

/*   .contentImgLeft,
  .contentImgRight {
    float: none;
    clear: both;
    margin: 15px auto;
    max-width: 100%;
    width: 100%;
    text-align: left; /* Optional: Stellt sicher, dass der Text linksbündig ist */
  }  */ 
  
  .footerColumn h2 {
    /* Platz für zwei Zeilen erzwingen */
    min-height: 60px !important;
  }    
}

@media only screen and (max-width: 720px) {
  .footerContainer {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    column-gap: 20px !important;
    padding:    40px 20px !important;
    box-sizing: border-box !important;
  }
}

/* =================================================================== */
/* || STYLES FÜR MOBILE ANSICHT (FINAL & CLEANED)                     || */
/* =================================================================== */
@media only screen and (max-width: 600px) {

  /* 1. Grund-Layout und Ausblenden von Elementen */
  html, body {
  overflow-x: hidden !important;
  touch-action: pan-y;            /* nur vertikales Scrollen erlauben */
  margin: 0;
  padding: 0;
  }

#wrapper {
  width: 100% !important; /* Nutze die volle verfügbare Breite */
  max-width: 360px !important;
  margin: 0 auto !important;
  padding: 0 15px !important; /* Setze Padding spezifischer */
  box-sizing: border-box !important; /* Stelle sicher, dass Padding eingerechnet wird */
  overflow-x: hidden !important;
}

  /* Unnötige Elemente für mobile Ansicht ausblenden */
  .rightColumn,
  .navigationContainer,
  .controls,
  .whyChooseUs,
  .footerContainer {
    display: none !important;
  }
  
  /* Nur die beiden Cross-Seller-Container verbergen */
  #csc1,
  #csc2 {
    display: none !important;
  }
  
  /* 2. Layout der Tab-Reiter anpassen */
  .tabBar label {
    width: 48%; 
    margin: 1%;
    box-sizing: border-box;
    /* Min. 12px, max. 16px, dazwischen 4 % der Viewport-Breite */
    font-size: clamp(12px, 4vw, 16px) !important;	
  }

  /* Slider ausblenden, statisches Bild einblenden */
  .baerSliderCSS {
    display: none;
  }
  .baerMobileStaticImage {
    display: block;
    width: 100%;
    max-width: 1390px;
    margin: 10px auto;
    padding-top: 26.5%;
    background-image: url("https://assets.ebay.baer.tools/_Layout/BAER_ebay_Header_schwarz_dezent.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 10px !important;
  }

  /* 3. Globale Regeln für den Tab-Inhalt */
  .tabContent {
    /* Allgemeine Regel für den Wortumbruch bei normalen Absätzen und Überschriften */
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .tabContent .contentImgLeft,
  .tabContent .contentImgRight {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
  }

  .tabContent .contentImgRight h2,
  .tabContent .contentImgRight p {
      text-align: left; /* Stellt sicher, dass der Text linksbündig ist */
  }  

  .tabContent ul,
  .tabContent ol {
    padding-left: 0;
    margin-left: 0;
    list-style-position: inside;
  }

  /* 4. DIE EINE, ENTSCHEIDENDE KORREKTUR */
  /* Wir überschreiben die Desktop-Regel und deaktivieren das Flexbox-Verhalten für die Icon-Liste. */
  .icon-list li {
    display: block; /* Statt 'flex' wird dies zu einem normalen Block-Element */
  }

}

@media only screen and (max-width: 480px) {
  .gallery {
    padding-top: 250px;
  }
  .bigPic {
    height: 230px;
  }
  .priceTagBox {
    height: auto;
    padding-bottom: 20px; /* [cite: 133] */
  }
}