/* LAYOUT */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');


body { color: #333; position: relative; bottom: 8px; }
.header-bg { background:#fff; margin:0; padding:0;  background-color: #1d6ac0; background-image: linear-gradient(135deg, #1d6ac0 0%, #195aa3 60%, #174f90 100%); color: #fff; }
.footer-bg { background:#1d6ac0; margin:0; padding:0; }
.content-bg { background: #0a1720 url("https://cdn2.goodwheel.de/ebay-data/goodpart-ebay/img/gp_bg_3.jpg") no-repeat fixed top center; background-size: contain;}
p, .container, .container-fluid, .row { font-size:14px; font-family: 'Roboto', sans-serif; }
	p {padding: 10px !important;}
.container { padding-bottom: 6px; }
.maincontent, .sidebar { margin:0; padding:0; }
.man_logo_wb { margin: 20px 0 0; padding: 5px; }

/* HEADER */
.logo-pos { margin-bottom: 10px; }
.logo-icon { float:left; margin:0; padding:0; padding-top:7px; font-size:28px; width:100px; }
.logo { float: none; font-family: 'Roboto', sans-serif; font-size:42px; line-height:28px; font-weight: 400; color:#fff; padding:0; margin: 0; text-align:left; }
.slogan { color:#3e3e3e; font-weight: 400; font-size:12px; }
.header-info { margin-top:12px; padding:0; text-align:right; font-family: 'Roboto', sans-serif; font-weight: 400; font-size:14px; color:#fff; line-height:30px; float: right; }
.header-link { margin:0; padding:0; margin-top:39px; font-family: 'Roboto', sans-serif; font-weight: 400; font-size:18px; }
.header-link a { color:#3e3e3e !important; text-decoration:none !important; }

/* MENU */
.menubar { display: block; position: relative; margin-top: 10px; }
ul.menu { margin:0; padding:0; }
ul.menu li { float:left; width:160px; height:50px; line-height:50px; list-style-type:none; margin:0; padding:0; font-family: 'Roboto', sans-serif; font-weight: 700; font-size:16px; }
ul.menu li a { display:block; color: #fff; }
ul.menu li a:hover { text-decoration:none; border-bottom: 6px solid #fff; }
.dropdown { margin:10px; padding:0; }
.dropdown .form-control { background:#fff; color:#83888d; font-weight: 400; font-family: 'Roboto', sans-serif; }

/* SUCHE */
.header-suche { float: right; margin: 0; padding: 10px 10px 0; }
.suchen { width:100%; margin:0; padding:0; }
.suchfeld { width:250px; height:50px; font-family: 'Roboto', sans-serif; background:#666; color:#eee; line-height:50px; margin:0; padding:0 20px; border:none; }
.suchbutton { border:none; width:50px; height:50px; background:#666; color:#eee; font-size:20px; text-align:center; margin:0; padding:0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; margin-top:-2px !important; }
.suchbutton:hover { background:#666; color:#83888d; }

/* ARTIKELBILDER */
.vob { margin:0; padding:0 10px; }
.img-responsive { display: block; width:100%; height:auto; }

/* TEXT & ÜBERSCHRIFTEN */
.textbox { margin:20px 0 20px 0; padding:0 0 10px 0; background:#fff; text-align:left; font-family: 'Roboto', sans-serif; border: 1px solid #dadae5; border-radius: 6px; }
.textbox p { margin:0; padding:20px 20px 10px 20px; }
.sidebar h1, .textbox h1 { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight:700; border-bottom: 1px solid #1d6ac0; margin: 0; padding: 14px 0 10px 20px; text-align:left; color: #333; }
.sidebar p, .textbox p { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 700; margin: 0; padding: 10px 0 10px 20px; text-align:left; color: #3e3e3e; line-height: 1.5em; }

/* SHOPKATEGORIEN */
ul.katmenu { margin:0; padding:10px 0 0 0; text-align:left; }
ul.katmenu li { margin:0; padding:0; list-style-type:none; font-family: 'Roboto', sans-serif; font-weight: 700; font-size:16px; }
ul.katmenu li a { display:block; margin:0; padding:5px 20px; color:#333; text-decoration:none; }
ul.katmenu li a:hover { color:#fff; background:#1d6ac0; }
ul.katmenu li a:hover i { color:#fff; }
ul.katmenu li.ukat a { padding-left:35px; }

/* SERVICE */
.service { height:40px; margin:20px; padding:0; color:#333; text-align: left; font-size:14px; font-weight: 700; }
.service-1 { float:left; margin:0; margin-top:7px; margin-right:8px; padding:0; color:#bfbfbf; font-size:30px; text-align:center; }
.service-2 { margin:0; padding:0; color:#1d6ac0; line-height: 20px; font-size:16px; font-weight: 700; }

/* ARTIKELBESCHREIBUNG */
.artdesc, .artdesc-2 { margin:0; padding:0; }
.artdesc-2 { padding:20px; }
.artdesc-3 { padding-right:20px; }
.artdesc h2 { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 18px; color: #1d6ac0; text-align:left; line-height: 24px; }
.artdesc h3 { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 14px; color: #333; text-align:left; }
.artdesc h4 { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 42px; color: #333; text-align:center; padding:10px 0 0 0; }
ul.artdetail { margin: 0 0 20px 0; padding:0; font-size:14px; border:1px solid #e6e6e6; border-bottom:none; }
ul.artdetail li { list-style-type:none; background:#fcfcfc; margin:1px 0; padding:7px 12px; border-bottom:1px solid #e6e6e6; line-height:20px; font-family: 'Roboto', sans-serif; display: flex; }
ul.artdetail li:before { font-family: 'FontAwesome'; content: '\f105'; font-size:14px; padding-right:10px; color:#000; }
.artdesc .mwst { font-size:12px; color:#909090; font-weight:300; }
a.buys { display:block; font-weight: 400; font-size:16px; background:#25ae00; margin:0; padding:10px; color:#fff; text-decoration: none; text-align:center; border-bottom:5px solid #1d6ac0; }
a.buys:hover { background:#666; }
.buysinfo { margin:0; margin-top:15px; padding:0; text-align:center; font-family: 'Roboto', sans-serif; font-weight:400; font-size: 14px; }
.buysinfo a { display:block; text-decoration:none; color:#3e3e3e; padding:0; margin:0; }
.buysinfo a:hover { color:#333; }

/* CROSS-SELL */
.xsell { margin:0; padding:20px 20px 10px 20px; }
.xsell img { border:1px solid #eee; border-bottom:none; }
.maincontent a { text-decoration:none; }
.xsell h1 { font-family: 'Roboto', sans-serif; font-size:14px; color:#fff !important; text-align:center; margin:0; padding:10px; border:none; border-top:5px solid #1d6ac0; line-height:14px; }
.xsell h1:hover { background:#666; }
.xsell h2 { font-family: 'Roboto', sans-serif; font-size:16px; text-align:center; margin:10px 0; padding:0; color:#333; font-weight: 400; }

/* FOOTER */
.footer { padding:0; margin:0; font-family: 'Roboto', sans-serif; font-size:12px; color:#fff; }
.footer p { font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 16px; border-bottom:1px solid #fff; padding:15px 0; margin:0 10px; margin-top:5px; text-align:center; color:#fff; }
.footer h1 { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; background:#3e3e3e; border-bottom:5px solid #666; padding:15px 0; margin:0 10px; margin-top:5px; text-align:center; color:#fff; }
.footer ul.katmenu li { margin:0; padding:0; }
.footer ul.katmenu li a { color:#fff; }
.footer ul.katmenu li a:hover { color:#fff; }
.footer ul.katmenu li a:hover i { color:#fff; }
.sm-icon { margin:0; padding:5px 10px 5px 30px; font-size:20px; overflow:hidden; vertical-align: middle; color:#fff; }
.r24_eu_label { max-width: 200px !important; }
.r24_eu_label img { max-width: 200px !important; }

#ds_div .accordion { 
  margin-left: 0;
}

/* ========= Bootstrap 3 Breakpoints, sauber & konsistent =========
   XS:   0–767px       (Default Styles außerhalb der Media Queries)
   SM:   768–991px
   MD:   992–1199px
   LG:   ≥1200px
   EXTRA: XS-Mini ≤375px (optionale Feintuning-Regel)
==================================================================*/

/* LG ≥1200px */
@media (min-width: 1200px) {
  .logo { width: 250px; margin-top: 35px; float: left; }
  .header-link { font-size: 18px; }
  .header-info { padding-left: 150px; }
  ul.menu li { width: 160px; }              /* Desktop: breite Menüpunkte ok */
  .suchfeld { width: 260px; }
  .service { font-size: 12px; }
  .artdesc h4 { font-size: 36px; }
  .footer p { font-size: 14px; }
    .main { margin-right: 0 !important; margin-left: 20px; }
	
}

/* MD 992–1199px */
@media (min-width: 992px) and (max-width: 1199px) {
  .logo { width: 334px; margin-top: 0; }
  .header-link { font-size: 16px; }
  .header-info { padding-left: 125px; }
  ul.menu li { width: 120px; }              /* schmalere Menüpunkte */
  .suchfeld { width: 180px; }
  .service { font-size: 11px; }
  .buysinfo { font-size: 11px; }
  .artdesc h4 { font-size: 30px; }
  .footer p { font-size: 12px; }
}

/* SM 768–991px (Tablets) */
@media (min-width: 768px) and (max-width: 991px) {
  .logo { width: 324px; margin-top: 20px; }
  .header-info { padding-left: 0; }
  ul.menu li { font-size: 12px; width: 125px; } /* etwas kompakter als Desktop */
  .suchfeld { width: 360px; }
  .artdesc h2 { padding-top: 0; }
}

/* Ab MD (≥ 992px): Desktop-Offset */
@media (min-width: 992px) {
  #ds_div .accordion { 
    margin-left: 20px;
  }
}

/* XS ≤767px (Phones) */
@media (max-width: 767px) {
  .logo-pos { margin: 0; padding: 0; }
  .logo { width: 300px; margin-top: 20px; text-align: center; }
  .logo img {margin-bottom: 20px;}
  .slogan { font-size: 10px; }

  /* Tabs/Content */
  .tab label { display: block; float: none; margin-bottom: 5px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
  .tab input:checked + label { margin-bottom: 5px; }
  .tab .content { border: none; margin: 0; padding: 0 15px; }

  /* Fußtext kleiner */
  .footer p { font-size: 12px; }
}

/* XS-Mini ≤375px (Feintuning für sehr kleine Geräte – optional) */
@media (max-width: 375px) {
  .logo { width: 260px; }
  .header-info { font-size: 13px; line-height: 24px; }
  .suchfeld { width: 220px; }
  .main { margin-right:0 !important; margin-left: 0;}
}


/* Define Accordion box */
.accordion { margin-bottom: 20px; color: #3e3e3e; text-align:left; margin-top:-5px; padding:0; background:#fff; font-family: 'Roboto', sans-serif; border: 1px solid #dadae5; border-radius: 6px; }
.accordion p { font-family: 'Roboto', sans-serif; }

.accordion section:target { background:#FFF; padding:30px 20px 20px 20px; border-radius: 6px; }
.accordion section:target:hover { background:#FFF; }
.accordion section:target h2 { background: #1d6ac0 none repeat scroll 0 0; border-radius: 6px; width:100%; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 18px; margin: 0 0 10px; padding: 0.6em 0 0 0; color: #3e3e3e; }
.accordion section:target h2 a { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; margin: 0; padding: 0 0 10px 15px; text-align:left; color: #fff; }
.accordion section:target p { display:block; }
.accordion section h2 a { padding: 13px 10px 15px 15px; display:block; font-family: 'Roboto', sans-serif; font-size:16px; font-weight: 700; color:#1d6ac0; text-decoration:none; }
.accordion section h2 a:hover { color: #fff; border-radius: 6px; }
.accordion section { float:left; overflow:hidden; cursor:pointer; margin:3px; }
.accordion section:hover { background:#333; border-radius: 6px; }
.accordion section p { display:none; }
.accordion section:after { position:relative; font-size:24px; color:#000; font-weight:bold; }

.vertical section { width:100%; height:40px; margin: 0; }
/* Set height of the slide */
.vertical :target { height:auto; width:100%; }
.vertical section h2 { position:relative; left:0; top:-22px; }
/* Set position of the number on the slide */
.vertical section:after { top:-60px; left:810px; }
.vertical section:target:after { left:-9999px; }

table.gridtable {
  font-family: 'Roboto', sans-serif;
  font-size:11px;
  color:#333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
  width: 100%;
}
table.gridtable th {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #dedede;
}
table.gridtable td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
}

ul.magna_properties_list {
  margin: 0 0 20px 0;
  list-style: none;
  padding: 0;
  display: inline-block;
  width: 100%;
}
ul.magna_properties_list li {
  border-bottom: none;
  width: 100%;
  height: 20px;
  padding: 6px 5px;
  float: left;
  list-style: none;
}
ul.magna_properties_list li.odd {
  background-color: rgba(0, 0, 0, 0.05);
}
ul.magna_properties_list li span.magna_property_name {
  display: block;
  float: left;
  margin-right: 10px;
  font-weight: bold;
  color: #000;
  line-height: 20px;
  text-align: left;
  font-size: 12px;
  width: 50%;
}
ul.magna_properties_list li span.magna_property_value {
  color: #666;
  line-height: 20px;
  text-align: left;
  font-size: 12px;
  width: 50%;
}

.cg_badge img { margin-top: 20px; }
.cg_container_wrapper { box-shadow: 0 12px 14px rgba(0, 0, 0, 0.35); position: relative; z-index: 5000; border: 1px solid #1d6ac0; }
.textbox {box-shadow: 0 12px 14px rgba(0, 0, 0, 0.5);}
#vertabout a { border-bottom: 1px solid #dadae5; }
ul.magna_properties_list li,
ul.magna_properties_list li.odd { height: 34px; }
ul.magna_properties_list li span.magna_property_name { width: 20%; }
ul.magna_properties_list li span.magna_property_value { width: 80%; }
#ds_div { width: 100%; }
.artdesc img { max-width: 400px; }
.artdesc-check { background-color: #333; color: #fff; padding: 10px 25px; }
.artdesc-check span { font-family: 'Roboto',sans-serif; font-size: 20px; font-weight: 700; }
.artdesc-check p { font-weight: normal; color: #fff; font-size: 16px; padding: 15px 20px 0 42px; }
.check-1 { color: #fff; float: left; font-size: 30px; margin: 0 8px 0 0; padding: 0; text-align: center; }

/* =========================
   Mobile Width Fix (safe)
   – lässt container-fluid unverändert
   ========================= */

/* Nichts soll horizontal überlaufen, ohne die Breite zu begrenzen */
#ds_div { overflow-x: hidden; }

/* 1) Bilder/Medien immer responsive – keine weitere Layout-Änderung */
#ds_div img,
#ds_div iframe,
#ds_div video {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* 2) Tabellen passen sich an – nur Breite/Breaks, sonst nix */
#ds_div table { width: 100% !important; border-collapse: collapse; }
#ds_div th, #ds_div td { word-break: break-word; }

/* 3) Versand-Tabelle (#vertblog) war zu breit durch inline width:%  */
#vertblog { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#vertblog .gridtable {
  width: 100% !important;
  table-layout: fixed;     /* gleichmäßige Spalten bei wenig Platz */
  min-width: 520px;        /* lesbar auf sehr schmalen Geräten, sonst scrollbar */
}
/* Inline-Breiten in Kopf/Zellen neutralisieren, ohne andere Bereiche zu treffen */
#vertblog .gridtable th,
#vertblog .gridtable td {
  width: auto !important;
}

/* 4) Menü: feste Li-Breiten nur auf XS abschalten, horizontal scrollbar erlauben */
@media (max-width: 767px) {
  .menubar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  ul.menu {
    margin: 0; padding: 0; list-style: none;
  }
  ul.menu li {
    float: none !important;
    display: inline-block;
    width: auto !important;   /* killt starre 160px o.ä. nur mobil */
    height: auto;
    line-height: inherit;
    padding: 0 12px;
  }
}

/* 5) (Optional, aber hilfreich) iOS-Fix für fixed Backgrounds */
@media (max-width: 767px) {
  .content-bg {
    background-attachment: scroll;  /* verhindert iOS-Jank/Überbreite */
    background-size: cover;
  }
}
/* ===== XS-Only Fixes für Layout-Breite ===== */
@media (max-width: 767px) {
  /* 1) Accordion: Pseudoelement, das nach rechts "zieht", abschalten */
  .accordion section:after,
  .vertical section:after {
    content: none !important;
  }

  /* 2) Menü: auf Mobile stacken statt feste 160px nebeneinander */
  .menubar { overflow-x: visible; white-space: normal; }
  ul.menu { margin: 0; padding: 0; list-style: none; }
  ul.menu li {
    float: none !important;
    display: block;
    width: 100% !important;     /* volle Zeile, kein Horizontal-Overflow */
    height: auto;
    line-height: 1.5;
  }
  ul.menu li a { padding: 8px 12px; }

  /* 3) Versandtabelle: nicht breiter als Screen werden lassen */
  #vertblog { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #vertblog .gridtable {
    min-width: 0 !important;    /* falls vorher >0 gesetzt wurde */
    table-layout: auto;         /* flexibler als fixed bei wenig Platz */
    width: 100% !important;
  }
  #vertblog .gridtable th,
  #vertblog .gridtable td { width: auto !important; }

  /* 4) Lange Wörter/URLs dürfen umbrechen, damit nichts “drückt” */
  #ds_div, #ds_div table, #ds_div p, #ds_div li {
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }

  /* 5) iOS-Bug vermeiden: fixed Background nicht auf Phones */
  .content-bg {
    background-attachment: scroll;
    background-size: cover;
  }
}