Automatisches Übersetzen einer Seite ohne JS 1
Guten Tag,
ich verkaufe auf ebay Artikel und der Textinhalt ist dabei auf Deutsch.
Ich möchte bei einem deutschen Kunden Text A anzeigen lassen und bei einem englischen Kunden Text B.
Wie kann ich das machen? Die Seite darf dabei nicht verlassen werden.
Ich stelle mir das so vor, dass es fertige Textbausteine gibt und der Browser nach dem prüfen das Richtige anzeigt.
Es gibt dabei noch ein paar Regeln, an die ich mich halten muss.
Der hier verwendete Code
<html>
<head>
<title>eBay</title>
</head>
<body marginwidth="0" marginheight="0">
<table align="center" style="border-spacing: 0px; width: 100%;">
<tbody>
<tr>
<td>
<div id="ds_div">
<font rwr="1" style="font-family:Arial" size="4"><font rwr="1" style="font-family:Arial" size="4"><font rwr="1" style="font-family:Arial" size="4"><font rwr="1" style="font-family:Arial" size="4"><font rwr="1" style="font-family:Arial" size="4"><font rwr="1" style="font-family:Arial" size="4"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="/css_webseite/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700|Roboto:300,400,500,600,700" rel="stylesheet">
<style>
/* v1.0 */
.codiva{max-width:1378px;margin:0 auto;line-height:1.5em;color:#3e3e3e;font-size:16px}
.codiva *{-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.codiva .container-fluid{padding-right:20px;padding-left:20px}
.codiva .row{margin-right:-20px;margin-left:-20px}
.codiva .col-xs-1,.codiva .col-sm-1,.codiva .col-md-1,.codiva .col-lg-1,.codiva .col-xs-2,.codiva .col-sm-2,.codiva .col-md-2,.codiva .col-lg-2,.codiva .col-xs-3,.codiva .col-sm-3,.codiva .col-md-3,.codiva .col-lg-3,.codiva .col-xs-4,.codiva .col-sm-4,.codiva .col-md-4,.codiva .col-lg-4,.codiva .col-xs-5,.codiva .col-sm-5,.codiva .col-md-5,.codiva .col-lg-5,.codiva .col-xs-6,.codiva .col-sm-6,.codiva .col-md-6,.codiva .col-lg-6,.codiva .col-xs-7,.codiva .col-sm-7,.codiva .col-md-7,.codiva .col-lg-7,.codiva .col-xs-8,.codiva .col-sm-8,.codiva .col-md-8,.codiva .col-lg-8,.codiva .col-xs-9,.codiva .col-sm-9,.codiva .col-md-9,.codiva .col-lg-9,.codiva .col-xs-10,.codiva .col-sm-10,.codiva .col-md-10,.codiva .col-lg-10,.codiva .col-xs-11,.codiva .col-sm-11,.codiva .col-md-11,.codiva .col-lg-11,.codiva .col-xs-12,.codiva .col-sm-12,.codiva .col-md-12,.codiva .col-lg-12{padding-right:20px;padding-left:20px}
.codiva .row{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}
.codiva .row>[class*='col-']{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.codiva .row:after,.codiva .row:before{display:inline-block}
.codiva img{max-width:100%}
.codiva p{margin:0 0 10px}
.codiva ul{padding-left:1.8em}
.codiva li{overflow:initial}
.codiva strong{font-weight:700}
.codiva .flex-end{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}
.codiva h1,.codiva h2,.codiva h3,.codiva h4,.codiva h5{margin-top:0;line-height:1.3em}
.codiva .button{position:relative;text-transform:uppercase;font-size:16px;width:350px;max-width:100%;line-height:38px;-webkit-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;display:block;text-align:center;background:black;color:white}
.codiva .button:focus,.codiva .button:active,.codiva .button:hover{background:black;color:white}
.codiva .button svg{position:absolute;right:12px;top:50%;margin-top:-5px;height:10px}
@media(max-width:991px){.codiva .button{width:100%}
}.codiva .hidden{display:none;visibility:hidden}
.codiva a{color:black;font-weight:600;text-decoration:none;-webkit-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;cursor:pointer}
.codiva a:hover,.codiva a:focus,.codiva a:active{text-decoration:none;background-color:inherit;color:inherit;opacity:.7}
@media(min-width:768px){.codiva .vertical-align{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
}.codiva .margin-bottom-30{margin-bottom:30}
.codiva .hidden{display:none;visibility:hidden}
@media(max-width:1199px){.codiva .mobile-column-reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}
}.codiva .table{display:table}
.codiva .table-row{display:table-row}
.codiva .table-cell{display:table-cell;vertical-align:middle}
.codiva .overflow-visible,.codiva .overflow-visible *{overflow:visible}
.codiva .white-box{border:1px solid #e8e7e6;padding:30px 20px}
.codiva .white-box.big{padding:50px}
.codiva .flex-grow{flex-grow:1;-ms-flex-positive:1}
@media(max-width:991px){.codiva .white-box{margin:20px 0}
}.codiva .flex-center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.codiva .header{text-align:center;min-height:120px;width:100%}
.codiva .header .logo{padding:30px 35px;margin:0;text-align:left}
.codiva .header .logo h1{max-width:400px;width:100%;height:75px;margin-bottom:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}
.codiva .header .logo img{max-height:100%;max-width:100%;height:auto;-ms-flex-negative:0;flex-shrink:0}
.codiva .sidebar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;z-index:1;-webkit-box-shadow:0px 1px 3px lightgrey;box-shadow:0px 1px 3px lightgrey;border-bottom-right-radius:4px;margin-bottom:2px;}
@media(min-width:1200px){.codiva .sidebar{padding-left:0;padding-right:0}
}.codiva .newsletter{text-align:center;width:100%;font-size:15px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding-top:30px;padding-bottom:30px;-ms-flex-wrap:wrap;flex-wrap:wrap}
.codiva .newsletter p{text-align:left;margin:0}
.codiva .newsletter-field{display:inline-block;width:350px;max-width:100%;text-align:left;margin:0 auto;padding:.8em 1.2em;position:relative;background:whitesmoke}
.codiva .newsletter-field:active,.codiva .newsletter-field:hover,.codiva .newsletter-field:focus{background:whitesmoke;opacity:1}
@media(max-width:420px){.codiva .newsletter-field{width:100%}
}.codiva .newsletter-field .btn{position:absolute;top:0;background:black;color:white;right:0;height:100%;width:5em;border-radius:1px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
@media(max-width:991px){.codiva .newsletter p,.codiva .newsletter{text-align:center}
}.codiva .footer{min-height:130px;text-align:left;font-size:14px;min-height:120px;width:100%;padding:25px 50px 50px 50px}
.codiva .footer .title_type2{margin-top:20px}
@media(max-width:991px){.codiva .footer{text-align:center}
}.codiva .wrapper{margin:30px 20px}
@media(max-width:991px){.codiva .wrapper{margin:0}
}.codiva .mainmenu{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;min-height:50px;text-align:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.codiva .mainmenu .glyphicon{margin-top:-2px;margin-right:20px}
.codiva .mainmenu,.codiva .mainmenu li{margin:0;padding:0}
.codiva .mainmenu li{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 14px;height:50px;line-height:50px;list-style-type:none;text-transform:uppercase;position:relative;-webkit-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}
.codiva .mainmenu li:last-child{border:0}
@media(max-width:767px){.codiva .mainmenu .glyphicon{display:none}
.codiva .mainmenu{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;text-align:center}
.codiva .mainmenu li{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border:0;width:100%;height:35px;line-height:35px;text-align:center;border-bottom:1px solid lightgrey}
}.codiva .mainmenu li a{text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;line-height:52px;font-weight:500;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.codiva .services ul,.codiva .services li{padding:0;margin:0;list-style-type:none;text-align:left}
.codiva .header .services,.codiva .topbar .services{text-align:right}
.codiva .header .services ul,.codiva .topbar .services ul{position:relative;text-align:right;display:inline-block;margin-bottom:10px;margin-top:10px;display:-webkit-box;display:-ms-flexbox;display:flex;flex-wrap:wrap}
.codiva .header .services li,.codiva .topbar .services li{display:inline-block;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.codiva .services li:before{content:"\e013";position:relative;top:-1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:400;line-height:1;margin-right:5px}
@media(max-width:767px){.codiva .header .services{margin-bottom:20px}
.codiva .header .services,.codiva .header .services li{text-align:center}
.codiva .header .services ul{padding:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
}@media(max-width:990px){.codiva .topbar .services ul{justify-content:center}
}@media(max-width:767px){.codiva .topbar .services{font-size:12px}
}.codiva .categories ul{padding:0}
.codiva .categories ul li{list-style-type:none;padding:5px 0}
.codiva .categories>ul>li{border-bottom:1px solid #e8e8e8;position:relative}
.codiva .categories>ul>li:last-child{border-bottom:0}
.codiva .categories ul ul{display:none}
.codiva .categories ul ul li{position:relative}
.codiva .categories ul ul li a:before{position:absolute;content:"-";left:20px;top:-2px;font-weight:800;font-size:22px}
.codiva .categories>ul>li input[type=checkbox]{display:none}
.codiva .categories>ul>li label{position:absolute;right:10px;top:5px;width:30px;height:30px;padding:7px;cursor:pointer}
.codiva .categories>ul>li input[type=checkbox]:checked ~ ul{display:block}
.codiva .categories ul li a{font-weight:normal;-webkit-transition:color .2s ease;-o-transition:color .2s ease;transition:color .2s ease;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.codiva .generic_infos ul{padding:0}
.codiva .generic_infos ul li{list-style-type:none;padding:5px 0;border-bottom:1px solid #e8e8e8}
@media(max-width:991px){.codiva .sidebar .payment,.codiva .sidebar .shipping,.codiva .generic_infos,.codiva .generic_infos ul li{text-align:center}
}.codiva .merkmale .table{padding:0;width:100%;font-size:14px}
.codiva .merkmale .table .table-row{list-style-type:none;padding:3px 0}
.codiva .merkmale .table .table-cell{padding:10px 20px 10px 0;border-bottom:1px solid #e8e8e8}
.codiva .merkmale .table .table-row>.table-cell:first-child{font-weight:500}
.codiva .title_type1{margin-bottom:35px;line-height:1.2em}
.codiva .title_type2{margin-bottom:25px;line-height:1.5em}
@media(max-width:991px){.codiva .title_type1,.codiva .title_type2{text-align:center}
.codiva .title_type1_after,.codiva .title_type2_after{margin-left:auto;margin-right:auto}
}.codiva .xseller-item{text-align:center;padding-top:25px;padding-bottom:25px;-webkit-transition:border-color .2s ease;-o-transition:border-color .2s ease;-webkit-transition:border-color .2s ease;-o-transition:border-color .2s ease;transition:border-color .2s ease;border:1px solid transparent}
.codiva .xseller-inner{text-align:center;margin-bottom:10px;display:block}
.codiva .price .xseller-inner{font-weight:bold;font-size:1.2em}
.codiva .xseller-inner img{width:100%;max-height:100%;height:auto}
.codiva .maincontent .price{word-wrap:break-word;margin-top:30px}
.codiva .price sub{top:-10px;font-weight:400;font-style:normal;font-size:.7em}
.codiva .maincontent .price .ust_hinweis{display:block;line-height:30px}
.codiva .maincontent .price .ust_hinweis a{font-weight:400}
@media(max-width:991px){.codiva .maincontent .price,.codiva .maincontent .buy-now{text-align:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
}.codiva .maincontent .actions{margin:10px 0 20px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}
.codiva .maincontent .actions a{font-size:13px;font-weight:400;margin-right:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
@media(max-width:991px){.codiva .maincontent .actions{text-align:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
}.codiva .maincontent .buy-now{margin-top:30px}
.codiva .tabs{position:relative}
.codiva .tabs input[name=tab-control]{display:none}
.codiva .tabs>ul{list-style-type:none;padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:5px}
.codiva .tabs>ul>li{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1;flex:1;width:25%;padding:0 10px;text-align:center}
@media(max-width:767px){.codiva .tabs>ul>li{width:100%;-ms-flex-preferred-size:100%;flex-basis:100%}
}.codiva .tabs>ul>li>label{-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;font-weight:500;font-size:22px;line-height:1.5em;padding:5px auto;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:block;cursor:pointer;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;white-space:nowrap;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
@media(max-width:1199px){.codiva .tabs>ul>li>label{font-size:18px}
}.codiva .tabs>ul>li>label .glyphicon{font-size:16px}
.codiva .tabs ul li>label br{display:none}
.codiva .tabs>ul>li>label:hover,.codiva .tabs>ul>li>label:focus,.codiva .tabs>ul>li>label:active{outline:0}
.codiva .tabs .slider{position:relative;width:25%;-webkit-transition:all .33s cubic-bezier(0.38,0.8,0.32,1.07);-o-transition:all .33s cubic-bezier(0.38,0.8,0.32,1.07);transition:all .33s cubic-bezier(0.38,0.8,0.32,1.07)}
.codiva .tabs .slider.three{width:33%}
.codiva .tabs .slider.two{width:50%}
.codiva .tabs .slider.one{display:none}
@media(max-width:767px){.codiva .tabs .slider{display:none}
}.codiva .tabs .slider .indicator{position:relative;width:80px;max-width:100%;margin:0 auto;height:3px;border-radius:1px}
.codiva .tabs .content{margin-top:40px;padding:0 25px}
@media(max-width:767px){.codiva .tabs>ul>li{padding:0}
}.codiva .tabs .content section{display:none;-webkit-animation-name:content;animation-name:content;-webkit-animation-direction:normal;animation-direction:normal;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1;line-height:1.4}
.codiva .tabs input[name=tab-control]:nth-of-type(1):checked ~ .slider{-webkit-transform:translateX(0%);-ms-transform:translateX(0%);transform:translateX(0%)}
.codiva .tabs input[name=tab-control]:nth-of-type(2):checked ~ .slider{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}
.codiva .tabs input[name=tab-control]:nth-of-type(3):checked ~ .slider{-webkit-transform:translateX(200%);-ms-transform:translateX(200%);transform:translateX(200%)}
.codiva .tabs input[name=tab-control]:nth-of-type(4):checked ~ .slider{-webkit-transform:translateX(300%);-ms-transform:translateX(300%);transform:translateX(300%)}
.codiva .tabs input[name=tab-control]:nth-of-type(4):checked ~ .content>section:nth-child(4),.codiva .tabs input[name=tab-control]:nth-of-type(3):checked ~ .content>section:nth-child(3),.codiva .tabs input[name=tab-control]:nth-of-type(1):checked ~ .content>section:nth-child(1),.codiva .tabs input[name=tab-control]:nth-of-type(2):checked ~ .content>section:nth-child(2){display:block}
@media(max-width:767px){.codiva .tabs input[name=tab-control]:nth-of-type(4):checked ~ ul>li:nth-child(4)>label,.codiva .tabs input[name=tab-control]:nth-of-type(3):checked ~ ul>li:nth-child(3)>label,.codiva .tabs input[name=tab-control]:nth-of-type(2):checked ~ ul>li:nth-child(2)>label,.codiva .tabs input[name=tab-control]:nth-of-type(1):checked ~ ul>li:nth-child(1)>label{color:white;background:black}
}@-webkit-keyframes content{from{opacity:0;-webkit-transform:translateY(5%);transform:translateY(5%)}
to{opacity:1;-webkit-transform:translateY(0%);transform:translateY(0%)}
}@keyframes content{from{opacity:0;-webkit-transform:translateY(5%);transform:translateY(5%)}
to{opacity:1;-webkit-transform:translateY(0%);transform:translateY(0%)}
}.codiva .options{margin-top:20px;font-weight:400}
.codiva .option_title{display:inline-block;vertical-align:middle}
.codiva .option_list{list-style-type:none;display:inline-block;vertical-align:middle;margin:4px 10px;font-size:13px;line-height:13px}
.codiva .option_list li{display:inline-block;padding:10px;margin:2px;border:1px solid lightgrey}
.codiva .shippings,.codiva .payments{margin:0;margin-top:10px;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.codiva .subfooter .shippings,.codiva .subfooter .payments{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.codiva .sidebar .shippings,.codiva .sidebar .payments{opacity:.5}
.codiva .shippings,.codiva .shippings li,.codiva .payments,.codiva .payments li{list-style-type:none}
.codiva .shippings li,.codiva .payments li{display:inline-block;padding:0;width:150px;text-align:center}
.codiva .subfooter .shippings li,.codiva .subfooter .payments li{width:150px}
.codiva .shippings li svg,.codiva .payments li svg,.codiva .shippings li img,.codiva .payments li img{width:100%;height:auto;max-height:95px;max-width:95px}
@media(max-width:991px){.codiva .shippings,.codiva .payments{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
}.codiva .gallery{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:40px}
.codiva .gallery .thumbnails{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;line-height:0;list-style-type:none;padding:0;margin-bottom:0}
.codiva .gallery .thumbnails li{-webkit-box-flex:1;-ms-flex:1;flex:1;border:1px solid transparent;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:10px;-webkit-transition:border-color .2s ease;-o-transition:border-color .2s ease;transition:border-color .2s ease}
.codiva .gallery .thumbnails li img{-webkit-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease}
.codiva .gallery .thumbnails li:hover{border:1px solid}
.codiva .gallery .slides{overflow:hidden;margin:0;padding:0;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;margin:0 0 10px 0}
.codiva .gallery label{margin:0}
.codiva .gallery .slides li{width:100%;overflow:hidden;height:auto;z-index:1;list-style-type:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-preferred-size:0;flex-basis:0;width:0;-webkit-transition:opacity 1.2s ease;-o-transition:opacity 1.2s ease;transition:opacity 1.2s ease;opacity:0}
.codiva .gallery #rSlide8:checked ~ .slides li#slide8,.codiva .gallery #rSlide7:checked ~ .slides li#slide7,.codiva .gallery #rSlide6:checked ~ .slides li#slide6,.codiva .gallery #rSlide5:checked ~ .slides li#slide5,.codiva .gallery #rSlide4:checked ~ .slides li#slide4,.codiva .gallery #rSlide3:checked ~ .slides li#slide3,.codiva .gallery #rSlide2:checked ~ .slides li#slide2,.codiva .gallery #rSlide1:checked ~ .slides li#slide1,.codiva .gallery #rSlide0:checked ~ .slides li#slide0{-ms-flex-preferred-size:100%;flex-basis:100%;width:100%;opacity:1}
.codiva .gallery .slides img{width:100%;height:auto}
.codiva.codiva-editor .services li:before{display:none}
/* ARY */
.codiva{
font-family:"Roboto",sans-serif;
background-image:url(gfx/bg.jpg);
font-weight:400;
}
.codiva.codiva-editor{
background-image:url(https://assets.codiva.de/images/bgs/bg.jpg);
}
.codiva .button{
color:#fff;
background:#21262c;
border:1px solid transparent;
}
.codiva .button:focus,
.codiva .button:active,
.codiva .button:hover{
background:#21262c;
opacity:0.8;
}
.codiva a{
color:#e9a50b;
}
.codiva .header .logo h1{
font-family:"Oswald","Impact",sans-serif;
color:#e9a50b;
}
@media (max-width:767px){
.codiva .header .logo{
padding:10px 35px;
}
.codiva .header .logo h1{
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
margin:0 auto;
}
.codiva .header .logo img{
max-width:100%;
max-height:75px;
width:auto;
}
}
.codiva .white-box{
background:#fff;
padding:30px 25px;
}
@media (max-width:767px){
.codiva .white-box,
.codiva .white-box.big{
padding:20px;
}
}
.codiva .header{
background:#2e3740;
border-bottom:1px solid #13a8dd;
}
.codiva .newsletter{
background:#2e3740;
color:white;
}
.codiva .newsletter-field{
color:#2e3740;
font-size:14px;
border-radius:1px;
background:whitesmoke;
}
.codiva .newsletter-field:active,
.codiva .newsletter-field:hover,
.codiva .newsletter-field:focus{
background:whitesmoke;
opacity:1;
}
.codiva .newsletter-field .btn{
background:#13a8dd;
color:#2e3740;
}
.codiva .footer{
background:#2e3740;
color:white;
border-top:1px solid #13a8dd;
}
.codiva .maincontent{
padding-top:15px;
}
.codiva .menu{
background-color:#21262c;
}
.codiva .mainmenu{
font-family:"Oswald","Impact",sans-serif;
}
.codiva .mainmenu li a{
color:#fff;
font-size:20px;
}
.codiva .mainmenu li:hover a{
color:#13a8dd;
opacity:1;
}
.codiva .services li{
color:#fff;
font-weight:500;
}
.codiva .generic_infos ul{
font-size:14px;
}
.codiva .categories ul li a{
color:#13a8dd;
font-weight:500;
}
.codiva .categories li .glyphicon {
font-size: 14px;
}
.codiva .services li {
font-weight:400;
text-transform:uppercase;
font-size:13px;
margin-right:16px;
}
.codiva .categories ul li:active a,
.codiva .categories ul li:focus a,
.codiva .categories ul li:hover a{
color:#3e3e3e;
opacity:1;
}
@media (max-width:991px){
.codiva .categories ul li{
text-align:center;
}
}
.codiva .title_type1{
font-family:"Oswald","Impact",sans-serif;
font-weight:500;
font-size:24px;
}
.codiva .title_type1_after{
background:#13a8dd;
width:80px;
height:3px;
display:block;
margin-top:20px;
}
.codiva .title_type2{
font-family:"Oswald","Impact",sans-serif;
font-size:22px;
font-weight:500;
}
.codiva .title_type2_after{
background:#13a8dd;
width:80px;
height:3px;
display:block;
margin-top:-15px;
margin-bottom:20px;
}
.codiva .xseller-item:active,
.codiva .xseller-item:focus,
.codiva .xseller-item:hover{
border-color:#f9b61e;
}
.codiva .xseller-item .title a{
color:#3e3e3e;
font-size:17px;
line-height:26px;
font-family:"Oswald","Impact",sans-serif;
font-weight:500;
}
.codiva .xseller-item .title a:after{
content:"";
height:3px;
width:40%;
margin:10px auto 0;
background:#e8e8e8;
display:block;
}
.codiva .maincontent .price .ust_hinweis{
font-size:12px;
font-weight:600;
}
.codiva .gallery .thumbnails li:hover{
border:1px solid #f9b61e;
}
.codiva .tabs > ul > li{
font-family:"Oswald","Impact",sans-serif;
}
.codiva .tabs > ul > li > label:hover,
.codiva .tabs > ul > li > label:focus,
.codiva .tabs > ul > li > label:active{
color:#13a8dd;
}
@media (max-width:767px){
.codiva .tabs input[name=tab-control]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label,
.codiva .tabs input[name=tab-control]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label,
.codiva .tabs input[name=tab-control]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label,
.codiva .tabs input[name=tab-control]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label{
background:#13a8dd;
}
}
.codiva .payments,
.codiva .shippings{
opacity:0.5;
}
.codiva .maincontent .price {
font-size: 28px;
font-weight: 800;
color: #13a8dd;
}
.codiva .tabs .slider .indicator {
background:#13a8dd;
}
@media (max-width:767px){
.codiva .tabs .content{
padding:0;
}
}
.codiva .maincontent .price .ust_hinweis {
color: #3e3e3e;
font-weight: 500;
}
@media (min-width:991px){
.codiva .gallery{
margin:0 40px;
}
}
</style>
<div class="codiva codiva-editor">
<div class="container-fluid">
<div class="row">
<div class="header vertical-align">
<div class="col-xs-12 col-sm-4 col-md-4 logo">
<h1><img alt="CODIVA TEMPLATES" src="/image/AryLogo.png"></h1>
</div>
<div class="col-xs-12 col-sm-8 col-md-8 vertical-align flex-end">
<div class="services">
<ul>
<li><span class="glyphicon glyphicon-time"></span> 24/7 Support</li>
<li><span class="glyphicon glyphicon-ok"></span> Professionelles Design</li>
<li><span class="glyphicon glyphicon-lock"></span> HTTPS/SSL</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid menu">
<div class="row">
<div class="col-xs-12">
<div class="menurow">
<ul class="mainmenu">
<li><a href="#" target="_blank"><span class="glyphicon glyphicon-shopping-cart"></span>Shop</a></li>
<li><a href="https://feedback.ebay.de/ws/eBayISAPI.dll?ViewFeedback2&userid=codiva" target="_blank">Bewertungen</a></li>
<li><a href="https://www.ebay.de/sch/codiva/m.html" target="_blank">Weitere Auktionen</a></li>
<li><a href="https://www.ebay.de/usr/codiva" target="_blank">MichSeite</a></li>
<li><a href="https://contact.ebay.de//ws/eBayISAPI.dll?FindAnswers&frm=284&requested=codiva" target="_blank">Kontakt</a></li>
</ul>
</div>
</div>
</div>
</div>
<main>
<style>
.checkboxen{
position:absolute;
top:-1000px;
left:-1000px;
}
label{
cursor:pointer;
}
.eng{
display:none;
}
#englisch:checked ~div .eng,
#englisch:checked div .eng
{
background:green;
display:block;
}
#englisch:checked ~div .deu,
#englisch:checked div .deu
{
display:none;
}
img{
width:80px
}
</style>
<label for="englisch" title="Schalten sie hier von Deutsch in Englischer Sprache um">
<img src="/image/englisch_deuzsch.jpg"></label>
<br>
<br>
<input class="checkboxen" type="checkbox" id="englisch">
<div class="wrapper">
<div class="eng"><h3>Englischer text</h3>
this is englisch gelaber
</div>
<div class="deu"><h3>Deutscher text</h3>
Und hier detsches gequatsche
</div>
<div class="container-fluid maincontent">
<div class="row">
<div class="col-sm-12">
<div class="white-box big">
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="gallery">
<input checked="checked" class="hidden" id="rSlide0" name="gallery2061" type="radio">
<input class="hidden" id="rSlide1" name="gallery2061" type="radio">
<input class="hidden" id="rSlide2" name="gallery2061" type="radio">
<ul class="slides">
<li id="slide0"><img src="https://assets.codiva.de/images/codiva/artikel/Codiva_Ary_Gallery1.jpg"></li>
<li id="slide1"><img src="https://assets.codiva.de/images/codiva/artikel/Codiva_Ary_Gallery2.jpg"></li>
<li id="slide2"><img src="https://assets.codiva.de/images/codiva/artikel/Codiva_Ary_Gallery3.jpg"></li>
</ul>
<ul class="thumbnails">
<li><label for="rSlide0"><img src="/image/Codiva_Ary_Gallery1.jpg"></label></li>
<li><label for="rSlide1"><img src="/image/Codiva_Ary_Gallery2.jpg"></label></li>
<li><label for="rSlide2"><img src="/image/Codiva_Ary_Gallery3.jpg"></label></li>
</ul>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="title_type1">
561035150A VW Composition Color Radio Bluetooth CC Jetta Passat Tiguan 2012"
<div class="title_type1_after bgcolor"> </div>
</div>
<div class="row">
<div class="price col-xs-12 maincolor">ab 59,90 € <span class="ust_hinweis">inkl. 19% MwSt. <a> zzgl. Versandkosten</a></span>
</div>
</div>
<div class="row">
<div class="col-xs-12 buy-now">
<a href="#" target="_blank" class="button">
Sofort kaufen
</a>
</div>
<div class="col-xs-12 actions">
<a href="https://cgi3.ebay.de/ws/eBayISAPI.dll?MakeTrack&item=132830823816" target="_blank"> <span class="glyphicon glyphicon-eye-open"></span>
<div class="deu">
Artikel beobachten
</div>
<br><br>
<div class="eng">
Watch Article
</div>
</a>
<a href="https://contact.ebay.de/ws/eBayISAPI.dll?FindAnswers&redirect=0&iid=132830823816&requested=codiva" target="_blank"> <span class="glyphicon glyphicon-question-sign"></span>
<div class="deu">
Fragen zum Artikel?
</div>
<br><br>
<div class="eng">
Questions about the article?
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-3">
<div class="white-box margin-bottom-30">
<div class="categories">
<div class="eng">
<div class="title_type2">Categories</div>
</div>
<div class="deu">
<div class="title_type2">Kategorien</div>
</div>
<div class="title_type2_after bgcolor"> </div>
<ul>
<li><a href="#" target="_blank"><span class="glyphicon glyphicon-chevron-right"></span> Kategorie 1</a></li>
<li><a href="#" target="_blank"><span class="glyphicon glyphicon-chevron-right"></span> Kategorie 2</a></li>
<li><a href="#" target="_blank"><span class="glyphicon glyphicon-chevron-right"></span> Kategorie 3</a></li>
<li><a href="#" target="_blank"><span class="glyphicon glyphicon-chevron-right"></span> Kategorie 4</a></li>
<li><a href="#" target="_blank"><span class="glyphicon glyphicon-chevron-right"></span> Kategorie 5</a></li>
<li><a href="#" target="_blank"><span class="glyphicon glyphicon-chevron-right"></span> Kategorie 6</a></li>
</ul>
</div>
</div>
<div class="white-box margin-bottom-30">
<div class="generic_infos">
<div class="deu">
<div class="title_type2">Ihre Vorteile </div>
</div>
<div class="eng">
<div class="title_type2">Your advantages</div>
</div>
<div class="title_type2_after bgcolor"> </div>
<ul>
<div class="deu">
<li> Ebay-Richtlinienkonform</li>
<li> Einfache Anpassung mit Editor</li>
<li> Professionelles Design</li>
<li> Schnelle Auslieferung</li>
<li>JTL eazyAuction</li>
</div>
<br><br>
<div class="eng">
<li> Ebay policy compliant </ li>
<li> Easy customization with editor </ li>
<li> Professional Design </ li>
<li> Fast delivery </ li>
<li> JTL eazyAuction </ li>
</div>
</ul>
</div>
</div>
<div class="white-box margin-bottom-30">
<div class="services2">
<div class="title_type2">
<div class="deu">
Further information
</div>
<br><br>
<div class="eng">
Weitere Infos
</div>
</div>
<div class="title_type2_after bgcolor"> </div>
<div class="deu">
Diesen Bereich können Sie nutzen um weitere Infos zu Ihrem Artikel zu hinterlegen.
</div>
<br><br>
<div class="eng">
You can use this area for further information about your article.
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-9">
<div class="tabs white-box">
<input type="radio" id="tab1" name="tab-control" checked="">
<input type="radio" id="tab2" name="tab-control">
<input type="radio" id="tab3" name="tab-control">
<input type="radio" id="tab4" name="tab-control">
<ul>
<li><label for="tab1" role="button"><span class="glyphicon glyphicon-align-justify"></span>
<div class="deu">
Beschreibung deutsch
</div>
<div class="eng">
Beschreibung englisch
</div>
</label></li>
<li><label for="tab2" role="button"><span class="glyphicon glyphicon"></span> </label></li>
<li><label for="tab3" role="button"><span class="glyphicon glyphicon"></span> </label></li>
<li><label for="tab4" role="button"><span class="glyphicon glyphicon "></span> </label></li>
</ul>
<div class="slider">
<div class="indicator"></div>
</div>
<div class="content">
<section class="sIe">
<div class="eng">
Description
<h1 class="hidden sIe sIeR">Tab1 Content</h1>
<p>
<b>VW 561035150A Composition Color Radio Bluetooth CC Jetta Passat Tiguan 2012</b>
<br><br>
Volkswagen's Composition Color Radio comes with a 6.5-inch touchscreen that has a resolution of 400 x 240 pixels, with up to eight speakers playing the sound and the personal music of the user or passengers One of the options is the optional CD drive, and the standard built-in SD card reader makes it easier to do so, supporting the widespread MP3 format in both cases Another option is to connect a player directly to an Aux cable, and in conjunction with the Connectivity package, you can also connect a smartphone via Bluetooth, allowing music to be streamed wirelessly and controlled via the vehicle's interface ,
<br>
<br>
<b>Compatible vehicles:</b><br>
VW Beetle 2017 - 2018<br>
- VW Beetle Cabrio 2017 - 2018<br>
- VW CC 2012 - 2017<br>
- VW Jetta 2015 - 2018<br>
- VW Tiguan 2012 - 2018<br>
<br>
<br>
Other models can also be compatible. Please contact us for a check.
<br>
<br>
All information without warranty.
</p><br>
<p>
</div>
<div class="deu">
Beschreibung text deutsch
<h1 class="hidden sIe sIeR">Tab1 Content</h1>
<p>
<b>VW 561035150A Composition Color Radio Bluetooth CC Jetta Passat Tiguan 2012</b>
<br><br>
Das Composition Color Radio von Volkswagen kommt mit einem 6,5" großen Touchscreen, der eine Auflösung von 400 x 240 Pixeln besitzt. Der Sound wird dabei mit bis zu acht Lautsprechern wiedergegeben. Die persönliche Musik des Benutzers oder der Mitfahrer kann dabei durch unterschiedliche Arten eingespeist werden. Eine der Möglichkeiten ist das optional erhältliche CD-Laufwerk, einfacher geht es mit dem serienmäßig verbauten SD-Kartenleser, wobei in beiden Fällen das weitverbreitete MP3-Format unterstützt werden. Eine andere Variante ist das direkte Anbinden eines Abspielgerätes über ein Aux-Kabel. In Verbindung mit dem Connectivity-Paket ist auch die Verbindung eines Smartphones über Bluetooth möglich, wodurch Musikstücke drahtlos gestreamed und über das Interface im Fahrzeug gesteuert werden können.
<br>
<br>
<b>Kompatible Fahrzeuge:</b><br>

- VW Beetle 2017 - 2018<br>
- VW Beetle Cabrio 2017 - 2018<br>
- VW CC 2012 - 2017<br>
- VW Jetta 2015 - 2018<br>
- VW Tiguan 2012 - 2018<br>
<br>
<br>
Andere Modelle können auch kompatibel sein. Bitte kontaktieren Sie uns, damit wir es überprüfen können.
<br>
<br>
Alle Angaben ohne Gewähr.
</p><br>
<p>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<div class="wrapper">
<div class="container-fluid xseller">
<div class="row">
<div class="col-xs-12">
<div class="white-box">
<div class="title_type2">Weitere Artikel</div>
<div class="title_type2_after bgcolor"> </div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 xseller-item">
<div class="img_wrapper"><a class="xseller-inner" href="https://www.ebay.de/itm/133052832283" target="_blank">
<img src="/image/Drago_Original.jpg"> </a></div>
<div class="title"><a class="xseller-inner" href="https://www.ebay.de/itm/133052832283" target="_blank">eBay Template "Codiva Drago"</a></div>
<div class="price"><a class="xseller-inner" href="https://www.ebay.de/itm/133052832283" target="_blank">ab 59,90 €</a></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 xseller-item">
<div class="img_wrapper"><a class="xseller-inner" href="https://www.ebay.de/itm/133052831004" target="_blank">
<img src="/image/Color_Original.jpg"> </a></div>
<div class="title"><a class="xseller-inner" href="https://www.ebay.de/itm/133052831004" target="_blank">eBay Template "Codiva Color"</a></div>
<div class="price"><a class="xseller-inner" href="https://www.ebay.de/itm/133052831004" target="_blank">ab 59,90 €</a></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 xseller-item">
<div class="img_wrapper"><a class="xseller-inner" href="https://www.ebay.de/itm/132830821111" target="_blank">
<img src="/image/Style_Original.jpg"> </a></div>
<div class="title"><a class="xseller-inner" href="https://www.ebay.de/itm/132830821111" target="_blank">eBay Template "Codiva Style"</a></div>
<div class="price"><a class="xseller-inner" href="https://www.ebay.de/itm/132830821111" target="_blank">ab 49,90 €</a></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 xseller-item">
<div class="img_wrapper"><a class="xseller-inner" href="https://www.ebay.de/itm/132830823816" target="_blank">
<img src="/image/Ary_Original.jpg"> </a></div>
<div class="title"><a class="xseller-inner" href="https://www.ebay.de/itm/132830823816" target="_blank">eBay Template "Codiva Ary"</a></div>
<div class="price"><a class="xseller-inner" href="https://www.ebay.de/itm/132830823816" target="_blank">ab 59,90 €</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="newsletter container-fluid">
<div class="row">
<div class="col-xs-12 col-md-6">
<p>Abonnieren Sie unseren Newsletter und verpassen Sie keine Neuigkeit mehr!</p>
</div>
<div class="col-xs-12 col-md-6">
<a href="https://my.ebay.de/ws/eBayISAPI.dll?AcceptSavedSeller&sellerid=codiva&ssPageName=STRK:MEFS:ADDSTR&rt=nc" target="_blank" class="newsletter-field">
<span class="input">Email-Adresse</span>
<span class="btn"><span class="glyphicon glyphicon-ok"></span></span>
</a>
</div>
</div>
</div>
<div class="footer container-fluid">
<div class="row">
<div class="col-xs-12 col-md-3 infos">
<div class="title_type2">Ãœber uns</div>
<div class="title_type2_after bgcolor"> </div>
<p>Diesen Bereich können Sie nutzen um Ihre Firma in ein paar Sätzen zu beschreiben.<br>
In der JTL eazyAuction Version wird diese Box automatisch mit den im Angebot hinterlegten eBay-Merkmalen gefüllt.</p>
</div>
<div class="col-xs-12 col-md-3 infos">
<div class="title_type2">Hinweis</div>
<div class="title_type2_after bgcolor"> </div>
Diesen Bereich können Sie nutzen um weitere Hinweise zu hinterlegen.<br>
In der JTL eazyAuction Version wird diese Box automatisch mit den im Angebot hinterlegten eBay-Merkmalen gefüllt.
</div>
<div class="col-xs-12 col-md-3 infos">
<div class="title_type2">Garantie</div>
<div class="title_type2_after bgcolor"> </div>
Diesen Bereich können Sie nutzen um Hinweise zur Garantie zu hinterlegen.<br>
In der JTL eazyAuction Version wird diese Box automatisch mit den im Angebot hinterlegten eBay-Merkmalen gefüllt.
</div>
<div class="col-xs-12 col-md-3 infos">
<div class="title_type2">Rückgaberecht</div>
<div class="title_type2_after bgcolor"> </div>
Diesen Bereich können Sie nutzen um Hinweise zum Rückgaberecht zu hinterlegen.<br>
In der JTL eazyAuction Version wird diese Box automatisch mit den im Angebot hinterlegten eBay-Merkmalen gefüllt.
</div>
</div>
</div>
<div class="subfooter container-fluid">
<div class="row">
<div class="col-xs-12 payment">
<ul class="payments">
<li><img src="/image/paypal.svg"></li>
<li><img src="/image/visa.svg"></li>
<li><img src="/image/mastercard.svg"></li>
<li><img src="/image/ueberweisung.svg"></li>
<li><img src="/image/barzahlung.svg"></li>
<li><img src="/image/klarna.svg"></li>
<li><img src="/image/sofort.svg"></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 shipping">
<ul class="shippings">
<li><img src="/image/kostenlos.svg"></li>
<li><img src="/image/dhl.svg"></li>
<li><img src="/image/deutschepost.svg"></li>
<li><img src="/image/hermes.svg"></li>
<li><img src="/image/fedex.svg"></li>
<li><img src="/image/abholung.svg"></li>
</ul>
</div>
</div>
</div>
</div></font></font>
</font>
</font>
</font>
</font>
</div>
</td>
</tr>
</tbody>
</table><span id="closeHtml"></span>
</body>
</html>