Extract value from HTML with http binding and REGEX

Hi there,

i´m currently trying to extract some values for gas prices from the Clever Tanken website.
The TankerKönig binding can´t be used as Super Plus is not offered.

I created a Thing with the base URL

https://www.clever-tanken.de/tankstelle_details/

then created a Channel with a state extension URL and the following state transformation

REGEX:<span.*id="current-price-4">(.*)<\/span>

because the value i want to extract is 1.95 from

<span id="current-price-4">1.94</span>

I tested the REGEX with this tester and it seems to work.
But maybe there´s something different for openHAB.

All i get is this warning entry:

2022-11-02 13:21:34.065 [WARN ] [.transform.SingleValueTransformation] - Transformation service REGEX for pattern <span.*id="current-price-4">(.*)<\/span> not found!

kind regards
Michael

Did you create your thing with a service-id? this URL doesn’t show prices for a specific service, but only the search entry for it: You want to retrieve the HTML for a specific service-id like https://www.clever-tanken.de/tankstelle_details/12345

I only used the base URL to use a state extension URL for each Channel instead of creating a new thing for every station.
So openHAB should combine the base URL + state extension URl and receive the data of the station related URL.

Example

Base URL: https://www.clever-tanken.de/tankstelle_details/
State extension URL: 1234
Combined: https://www.clever-tanken.de/tankstelle_details/1234

I also tried to use the complete URL as base URL but the warning is the same.
Even when using the DEBUG mode of the http binding i don´t get any information like the RAW data received by the binding.

Off topic:
SuperPlus is not supported by Tankerkönig because it’s not supported by the “Markttransparenz Stelle für Kraftstoffe” and therefore gas stations do not have to regularly provide an update on super plus.

Even it’s visible on clevertanken the actual price might be outdated and should be based on other people manually reporting the price.
Just keep this in mind …

Remove your regex and you should be able to store the full response into an item to generally test the connection and response

Yes i know.
Atleast my local station is always up to date.

Atleast this works and i was able to store the complete html in a String item.

Now i need to know why the regex doesn´t work in openHAB whole working in other testers.

In OH the regex works in a slightly different manner. First, the entire string has to match, then you can narrow it down to a capture. In practice this usually just means that you need to put .* in front of and at the end of your regex:

.*<span.*id="current-price-4">(.*)<\/span>.*

Also, if the string you’re transforming is complete html, you may find it useful to look into using the xpath transform instead.

Just found your comment in a similiar thread and tested the .* in front and at the end of my regex.
REGEX:.*<span.*id="current-price-4">(.*)<\/span>.*

Transformation service REGEX for pattern .*<span.*id="current-price-4">(.*)<\/span>.* not found!

I had a look at the XPath but not really sure how to get the span tag with the id ``
I tried this XPath:/span[@id='current-price-4']/text() and the result is the same as the REGEX.

Transformation service XPATH for pattern /span[@id='current-price-4']/text() not found!

Already tried it without text() and it´s the same.
XPath:/span[@id='current-price-4']

Transformation service XPATH for pattern /span[@id='current-price-4'] not found!

The transforms are not installed by default. You have to go to Settings → Add-ons → Other Add-ons and install the transform service you want to use.

Damn it…
Just installed the XPath and REGEX transformations.

XPath doesn´t work with my pattern XPath:/span[@id='current-price-4']

Executing transformation ChannelStateTransformation{pattern='/span[@id='current-price-4']', serviceName='XPATH'} failed: transformation throws exceptions

REGEX is working partly.
I´m getting the value plus the complete HTML site after the value :frowning:
REGEX:.*<span.*id="current-price-4">(.*)<\/span>.*

How can i limit the result to just the price?

To answer my previous question.
When only using <\/span>.* at the end, the REGEX will use everything until the last </span> on the website.
I reworked the REGEX and now it´s working.

Final result:
REGEX:.*<span id="current-price-4">(.*)<\/span>.*<sup id="suffix-price-4">.*

Thanks!

Just for completeness, your Xpath should also work with the just addition of a single /. When you start with only one / that is an absolute position in the document, in this case the root. Since your root element is not, I’m guessing, a <span> then the path doesn’t match anything. You double slashes // searches all children of the current location regardless of the their root. So:

XPath://span[@id='current-price-4']

should work as well.

Nope, same result.

Executing transformation ChannelStateTransformation{pattern='//span[@id='current-price-4']', serviceName='XPATH'} failed: transformation throws exceptions

Maybe because this is an HTML document and not pure XML?

That shouldn’t matter. Without seeing the html you’re trying to parse I’d only be guessing at what the problem is.

Example






<html lang="de">
<head>

  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, minimum-scale=1">
  <title>Shell Tankstelle Shell Berlin Berliner Str. 83 Berliner Str. 83  in 13189 Berlin - Öffnungszeiten</title>
  <meta name="description" content="Aktuelle Spritpreise und Öffnungszeiten der Shell Tankstelle Shell Berlin Berliner Str. 83, Berliner Str. 83  in 13189 Berlin">
  <meta name="keywords" content="Shell, Shell Berlin Berliner Str. 83, Tankestelle, Berliner Str. 83 , 13189, Berlin, Öffnungszeiten, Angebote">
  <meta name="robots" content="index,follow">
  
  <meta name="author" content="inforoad GmbH">
  <meta name="content-language" content="de">

  <script>
    // Google Analytics Opt Out Code
    var gaProperty = 'UA-578696-1';
    var disableStr = 'ga-disable-' + gaProperty;
    if (document.cookie.indexOf(disableStr + '=true') > -1) {
    window[disableStr] = true;
    }
    // Google Analytics Code
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', gaProperty]);
    _gaq.push(['_gat._anonymizeIp']);  // Ip Anonymization
    _gaq.push(['_trackPageview']);
</script>

  
  <link rel="apple-touch-icon" href="/static/apple-touch-icon.c39c5d549a4a.png">
  <link rel="shortcut icon" href="/static/favicon.c39c5d549a4a.png">
  <link rel="manifest" href="/static/manifest.b259339f4174.json">
  <meta name="apple-itunes-app" content="app-id=300763441">

  
  <link rel="stylesheet" href="/static/css/main.99de00faa078.css" type="text/css">
  <link rel="stylesheet" type="text/css" href="/static/libs/dygraph/dygraph.98c816a4fe77.css">

  <link rel="preconnect" href="//www.asadcdn.com"/>
  <link rel="dns-prefetch" href="//www.asadcdn.com"/>


  <!-- Sourcepoint CMP -->
  <script type="text/javascript">
    !function () { var e = function () { var e, t = "__tcfapiLocator", a = [], n = window; for (; n;) { try { if (n.frames[t]) { e = n; break } } catch (e) { } if (n === window.top) break; n = n.parent } e || (!function e() { var a = n.document, r = !!n.frames[t]; if (!r) if (a.body) { var i = a.createElement("iframe"); i.style.cssText = "display:none", i.name = t, a.body.appendChild(i) } else setTimeout(e, 5); return !r }(), n.__tcfapi = function () { for (var e, t = arguments.length, n = new Array(t), r = 0; r < t; r++)n[r] = arguments[r]; if (!n.length) return a; if ("setGdprApplies" === n[0]) n.length > 3 && 2 === parseInt(n[1], 10) && "boolean" == typeof n[3] && (e = n[3], "function" == typeof n[2] && n[2]("set", !0)); else if ("ping" === n[0]) { var i = { gdprApplies: e, cmpLoaded: !1, cmpStatus: "stub" }; "function" == typeof n[2] && n[2](i) } else a.push(n) }, n.addEventListener("message", (function (e) { var t = "string" == typeof e.data, a = {}; try { a = t ? JSON.parse(e.data) : e.data } catch (e) { } var n = a.__tcfapiCall; n && window.__tcfapi(n.command, n.version, (function (a, r) { var i = { __tcfapiReturn: { returnValue: a, success: r, callId: n.callId } }; t && (i = JSON.stringify(i)), e.source.postMessage(i, "*") }), n.parameter) }), !1)) }; "undefined" != typeof module ? module.exports = e : e() }();
  </script>
  <script src="/static/js/sourcepoint_cmp.881a812f3a0d.js"></script> 
  <script src="https://gdpr-tcfv2.sp-prod.net/wrapperMessagingWithoutDetection.js"></script>

  
  
  <!-- Adds -->
    <!-- IVW - INFOnline Measurement Manager -->
    <link rel='preload' href='https://data-56b1bc19e7.clever-tanken.de/iomm/latest/manager/base/es6/bundle.js' as='script' id='IOMmBundle'>
    <link rel='preload' href='https://data-56b1bc19e7.clever-tanken.de/iomm/latest/bootstrap/loader.js' as='script'>
    <script type='text/javascript' src="https://data-56b1bc19e7.clever-tanken.de/iomm/latest/bootstrap/loader.js"></script>
    

  <script type="text/javascript" src="https://script.ioam.de/iam.js"></script>
  <script type="text/javascript">

    var adnexus_page_name='clevertanken_ros';

    var screenWidth = window.screen && screen.availWidth || window.innerWidth;
    var view = (screenWidth <= 800) ? 'm' : 'd';

    var adPlacements = {
        d: ["superbanner","sky","billboard","billboard_btf","mrec", "mrec_btf"],
        m: ["banner","mrec","mrec_btf", "mrec_btf_2"]
    };

    function skyAdSlotSizes(maxWidth) {
        // maxWidth = 1000;
        return  [[160,600],[120,600],[300,600],[500,1000],[1000,1000]].filter(function(slot) {
            return slot[0] <= maxWidth;
        })
    }

    var adSlotSizes = {
        d:{
            "superbanner": [{
                "minWidth": 1,
                "sizes": [[728,90],[728,600],[1000,600]]
            }],

            "sky": [{
                "minWidth": 1,
                "sizes": skyAdSlotSizes((screenWidth-1200)/2)
                // "sizes": [[160,600],[120,600],[300,600],[500,1000],[1000,1000]]
            }],

            "billboard": [
                {
                    "minWidth": 1,
                    "sizes": [[800,250]]
                },{
                    "minWidth": 969,
                    "sizes": [[970,250],[800,250]]
                }
            ],

            "billboard_btf": [{
                "minWidth": 799,
                "sizes": [[800,250]]
            },{
                "minWidth": 969,
                "sizes": [[970,250],[800,250]]
            }],

            "mrec": [{
                "minWidth": 1,
                "sizes": [[300,250], [300,600]]
            }],

            "mrec_btf": [{
                "minWidth": 1,
                "sizes": [[300,250]]
            }],

        },
        m: {
            "banner": [{
                "minWidth": 1,
                "sizes": [[320,50],[320,75],[320,80]]
            }],

            "mrec": [{
                "minWidth": 1,
                "sizes": [[300,250],[320,50],[320,75],[320,160],[300,300]]
            }],

            "mrec_btf": [{
                "minWidth": 1,
                "sizes": [[300,250],[320,50],[320,75],[320,160],[300,300]]
            }],
        },
    };

    var adPlaceholder = {
            disablePlaceholders: false, // false enables placeholder(s)
            default: {
                // Alle Farben auf transparent gesetzt (border, background, font).
                "border-color": "#FFFFFF00",
                "background-color": "#40808000",
                admarkPosition: "bottom right",
                color: "#ffffff00",
                "font-size": "12px",
                "font-family": "Tahoma"
            },
        }

    var adSSetup = {
        // 1. Set the viewport of the website. Use for desktop "d" and for mobile "m"
        view: view, // has to fit the design of the page, please use m for mobile and d for desktop

        // 2. Switch for the 3th party scripts. We strictly recommend to set it as "false" only on pages for directsales campaign only the max out the revenue
        partners: true,

        // 3. Define the ad placements for the website
        adPlacements: adPlacements[view],

        // 4. Define the sizes for every ad placement:
        adSlotSizes: adSlotSizes[view],

        // 5. Page configuration
        colorBg: false, // enable/disable coloring of the page-background
        bgClick: true, // enable/disable click on page-background
        stickySky: true, // enable/disable stickiness for skyscraper
        pageName: adnexus_page_name, // init channel/article name (overwritten in the different pages),
        isArticle: false, // it shows us if the page is an article
        target: '',
        colorBG: false,
        placeholder: adPlaceholder
    };
  </script>
  <script type="text/javascript" src="https://www.asadcdn.com/adlib/pages/clevertanken.js"></script>
  

</head>
<body class="">

  <!--[if lt IE 11]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  

    <div id="wrapper">

        <div id="native-app-visibility-container">
            <div id="native-app-banner-container" class="d-flex justify-content-between align-items-center">
                <div class="d-flex flex-nowrap align-items-center">
                    <button id="dismissButton" type="button" class="dismissButton">X</button>

                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="/static/img/ct_logo_192.0e0c7f7def7e.png" id="native-app-banner-image" class="b-lazy">
                </div>
                <div class="ml-2 mr-2">Möchten Sie unsere Android App installieren?</div>

                <button id="installButton" type="button"
                            class="btn native-install-button background-payment-blue text-color-white-gray">Ja
                </button>
            </div>
        </div>
    </div>

    <div id="header-container" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" class="full-width b-lazy" data-src="/static/img/stock-image-header.637701d5765f.jpg" data-src-small="/static/img/stock-image-header-mob.9e0a8093597b.jpg">
       
       
        <div id="superbanner-container" class="ad-container ad-container-desktop">
            <div id="superbanner"></div>
        </div>




        <!-- tisoomi -->
        <div class="d-flex justify-content-center">
            <script type="text/javascript"> //bSUQDza("Super") </script>
            <span class='bSUQDza_end'></span>
        </div>

        <div id="banner-container" class="ad-container ad-container-mobile">
            <div id="banner"></div>
        </div>


        <div class="d-flex">
       
            <div class="full-width" id="search-bar-sticky-wrapper">

                    
                <!-- sticky search -->
                <div id="background-sticky-search"></div>

                <div id="navbar-wrapper">
                    <div id="navbar" class="pipe-container full-width">
                        <div class="nav-container d-flex p-0 mt-2 ml-3 mr-3 justify-content-between">
                            <div id="brand-container-wrapper">
                                <a href="/"><div id="brand-container" class="mr-3 b-lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="/static/img/ct-logo.37627ea4dede.png"></div></a>
                            </div>
                            <div class="d-flex align-items-center">
                                <!-- Sozialmedia links BEGIN -->
                                <div class="partner-logo-container mr-2 mr-md-3">
                                    <a href="https://www.facebook.com/clevertanken.de/" target="_blank">
                                        <div id="sm-partner-logo-wrapper">
                                            
                                            <svg id="sm-facebook-logo" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M21.15,24.13h-3a1,1,0,0,1-1-.95V17.1h2.47l.28-2H17.13V12.81a1.39,1.39,0,0,1,1.38-1.38h1.24a.08.08,0,0,0,.08-.08h0V9.66l-1.89.05a2.64,2.64,0,0,0-2.66,2.64v0h0v2.8h-2v1.89a.07.07,0,0,0,.08.07h1.89v6.05a1,1,0,0,1-1,.95H8.71A2.92,2.92,0,0,1,5.8,21.22V8.78A2.92,2.92,0,0,1,8.71,5.87H21.15a2.93,2.93,0,0,1,2.91,2.91V21.22A2.93,2.93,0,0,1,21.15,24.13ZM18,17.94v5.24a.11.11,0,0,0,.11.11h3a2.07,2.07,0,0,0,2.07-2.07h0V8.78a2.07,2.07,0,0,0-2.07-2.07H8.71A2.07,2.07,0,0,0,6.64,8.78h0V21.22a2.07,2.07,0,0,0,2.07,2.07h5.61a.12.12,0,0,0,.11-.11V18h-1a.91.91,0,0,1-1-.88v0h0V15a.67.67,0,0,1,.67-.67h1.3V12.38a3.52,3.52,0,0,1,3.51-3.52h1.94a.85.85,0,0,1,.79.85v1.68a.93.93,0,0,1-.93.93h-1.2a.55.55,0,0,0-.54.53v1.47h2a.84.84,0,0,1,.84.84v.08l-.23,2a.89.89,0,0,1-.89.79Z"/></svg>
                                        </div>
                                    </a>
                                </div>

                                <div class="partner-logo-container mr-3 mr-md-4">
                                    <a href="https://www.instagram.com/clevertanken/?hl=de" target="_blank">
                                        <div id="sm-partner-logo-wrapper">
                                            
                                            <svg id="sm-instagram-logo" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><circle cx="19.74" cy="10.1" r="0.78"/><path d="M18,24.13H12A6.12,6.12,0,0,1,5.87,18V12A6.12,6.12,0,0,1,12,5.87h6A6.12,6.12,0,0,1,24.13,12v6A6.12,6.12,0,0,1,18,24.13ZM12,6.87A5.13,5.13,0,0,0,6.87,12h0v6A5.13,5.13,0,0,0,12,23.13h6A5.13,5.13,0,0,0,23.13,18V12A5.13,5.13,0,0,0,18,6.87Z"/><path d="M15,19.47A4.47,4.47,0,1,1,19.47,15h0A4.47,4.47,0,0,1,15,19.47Zm0-7.94A3.47,3.47,0,1,0,18.47,15,3.47,3.47,0,0,0,15,11.53Z"/></svg>
                                        </div>
                                    </a>
                                </div>
                                <!-- Sozialmedia links END  -->
                                <div class="partner-logo-container mr-3 mr-md-4">
                                    <a href="//www.autobild.de" target="_blank">
                                        <div id="ab-partner-logo-wrapper">
                                            <img id="ab-partner-logo" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="/static/img/ab_print_rgb.1d05277b6afa.jpg" class="b-lazy" alt="">
                                        </div>
                                    </a>
                                </div>
                                <div id="username-header">
                                    
                                </div>

                                <a class="menu-icon-container d-flex flex-column justify-content-center"
                                    onclick="openNav()">
                                    <div><img id="menu-icon" class="b-lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="/static/img/icon_menu.ee4bc6270788.svg" alt=""></div>
                                    
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="searchbar"
                     class="pipe-container float-left d-flex flex-column flex-grow-1 align-items-center justify-content-start full-width mt-3">
                     <div id="main-headline-text">
                        <div class="float-left d-flex flex-column align-items-center justify-content-start ">
                            
                                <div class="row strong-title title text-center mr-2 ml-2">Jetzt günstig tanken!</div>
                                <div class="row headline subtitle mr-2 ml-2 text-center">Tankstellen in Deiner Umgebung
                                    finden</div>
                            
                        </div>
                    </div>
                      
                    <div class="search-container">
                        <form id="searchform" class="form-group" onsubmit="search(event)" action="/tankstelle_liste">
                            <div id="wrapper-search-bar">
                                <div id="search-bar" class="form-row ort">
                                    <div class="input-group ort">
                                        <img id="geolocation-icon" class="geolocation b-lazy"
                                        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="/static/img/icon_location_gray.55382a4bbcd0.svg" alt="">
                                        <input type="text" id="search-bar-input" class="form-control searchbox typeahead"
                                            data-provider="typeahead" placeholder="PLZ und/oder Ort" autocomplete="off">
                                        <button oonsubmit="search()" ttype="submit" id="search-bar-input-button" class="btn input-group-append d-block">
                                            <div id="icon-search-wrapper">
                                                <img id="icon-search" class="b-lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="/static/img/icon_suche.e2fde1847b05.svg" alt="">
                                            </div>
                                        </button>
                                    </div>
                                    <input type="text" class="hidden lat" name="lat">
                                    <input type="text" class="hidden lon" name="lon">
                                    <input type="text" class="hidden ort" name="ort">
                                </div>
                            </div>
                            <div class="form-row buttons" id="buttons-search">
                                <div class="dropdown-buttons">
                                    <div class="dropdown spritsorte mr-1">
                                        <button class="btn strong-body button-search-component d-flex justify-content-between align-items-center"
                                                type="button" data-toggle="dropdown" aria-haspopup="true"
                                                aria-expanded="false">
                                            <span>Spritsorte</span>
                                            <img class="icons-dropdown-buttons-right b-lazy"
                                            src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="/static/img/icon_arrow.19008c538e45.svg" alt="">
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                            
                                                <a class="dropdown-item" value="3" href="#">Diesel</a>
                                            
                                                <a class="dropdown-item" value="5" href="#">Super E10</a>
                                            
                                                <a class="dropdown-item" value="7" href="#">Super E5</a>
                                            
                                                <a class="dropdown-item" value="6" href="#">SuperPlus</a>
                                            
                                                <a class="dropdown-item" value="12" href="#">Premium Diesel</a>
                                            
                                                <a class="dropdown-item" value="264" href="#">GTL-Diesel</a>
                                            
                                                <a class="dropdown-item" value="2" href="#">LKW-Diesel</a>
                                            
                                                <a class="dropdown-item" value="1" href="#">LPG</a>
                                            
                                                <a class="dropdown-item" value="8" href="#">CNG</a>
                                            
                                                <a class="dropdown-item" value="262" href="#">LNG</a>
                                            
                                                <a class="dropdown-item" value="4" href="#">Bioethanol</a>
                                            
                                                <a class="dropdown-item" value="266" href="#">AdBlue PKW</a>
                                            
                                                <a class="dropdown-item" value="13" href="#">AdBlue LKW</a>
                                            
                                                <a class="dropdown-item" value="246" href="#">Wasserstoff</a>
                                            
                                        </div>
                                        <input type="text" class="hidden" name="spritsorte" value="3">
                                    </div>
                                    <div class="dropdown radius">
                                        <button class="btn strong-body button-search-component d-flex justify-content-between align-items-center"
                                                type="button" data-toggle="dropdown" aria-haspopup="true"
                                                aria-expanded="false">
                                            <span>Radius</span>
                                            <img class="icons-dropdown-buttons-right b-lazy"
                                            src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="/static/img/icon_arrow.19008c538e45.svg" alt="">
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                            <a class="dropdown-item" value="1" href="#">1 km</a>
                                            <a class="dropdown-item" value="2" href="#">2 km</a>
                                            <a class="dropdown-item" value="5" href="#">5 km</a>
                                            <a class="dropdown-item" value="10" href="#">10 km</a>
                                            <a class="dropdown-item" value="15" href="#">15 km</a>
                                            <a class="dropdown-item" value="20" href="#">20 km</a>
                                            <a class="dropdown-item" value="25" href="#">25 km</a>
                                        </div>
                                        <input type="text" class="hidden" name="r" value="15">
                                    </div>
                                </div>
                                <div class="favoriten">
                                    <button class="btn strong-body button-search-component d-flex align-items-center"
                                            type="button" data-toggle="dropdown" aria-haspopup="true"
                                            
                                            onclick="openNav(authMessage='Bitte loggen Sie sich ein, um die Favoriten zu nutzen.')">
                                        
                                            <img class="icons-dropdown-buttons-left mr-2 b-lazy"
                                            src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="/static/img/icon_favorit.698380cb2d1f.svg" alt="">
                                        
                                        Favoriten
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                
                <div id="sky-container" class="float-left" style="margin-left: 44px;">
                    <div id="sky"></div>
                </div>
                <!-- tisoomi -->
                <div id="sky-tisoomi-wrapper">
                    <script type="text/javascript"> //bSUQDza("Sky") </script>
                    <span class='bSUQDza_end'></span>
                </div>
            </div>
        </div>
    </div>
    <div id="mrec-container" class="ad-container ad-container-mobile">
        <div id="mrec"></div>
    </div>
    <!-- tisoomi -->
    <div class="d-flex justify-content-center">
        <script type="text/javascript"> //bSUQDza("Super2") </script>
        <span class='bSUQDza_end'></span>
    </div>


    <div id="body-container">
        
    <div id="tankstellen-detail-container">


        <div id="billboardWrapper" class="container">
            <div id="billboard"></div>
        </div>
  

        <div class="pipe-container">
            <div class="headline-banner-container">
                <div class="row m-0">
                    <div class="col-12 background-white-gray text-color-ct-blue d-flex align-items-center justify-content-between" itemscope itemtype="http://schema.org/GasStation">
                        <div class="headline-banner-name flex-column justify-content-center">
                            <span class="strong-title" itemprop="name">Shell</span>
                        </div>
                        
                            <div class="headline-banner-icon-mtsk">
                                <img class="icons-dropdown-fuel-name" src="/static/img/icon_troete.b61f6afccfc2.svg" alt="">
                            </div>
                        
                    </div>
                </div>
            </div>

            <div class="location-map-container mt-0 mt-md-4">
                <div class="row">
                    <div class="map-container col-12 col-md-7 order-md-2">
                            <div id="map_id"></div>
                    </div>
                    <div class="location-container col-12 col-md-5 order-md-1 d-flex flex-column justify-content-between">
                        <a href="geo:0,0?q=52.556313,13.41506" target="_blank">
                            <div class="location-address headline mt-4 mt-md-0">
                                <div itemprop="http://schema.org/address" itemscope itemtype="http://schema.org/PostalAddress">
                                    <span itemprop="streetAddress">Berliner Str. 83 </span>
                                    <br />
                                    <span itemprop="http://schema.org/postalCode">13189</span>
                                    <span itemprop="http://schema.org/addressCountry">Berlin</span>
                                </div>
                            </div>
                        </a>

                        
                        <div>
                            <span class="headline">Öffnungszeiten</span>
                        </div>
                        
                        <div>
                            
                                
                                <div class="d-flex justify-content-between weak-body">
                                    <span>Samstag</span>
                                    <span>7:00-20:00</span>
                                </div>
                                
                                <div class="d-flex justify-content-between weak-body">
                                    <span>Sonntag</span>
                                    <span>8:00-20:00</span>
                                </div>
                                
                                <div class="d-flex justify-content-between weak-body">
                                    <span>Mo-Fr</span>
                                    <span>6:00-20:00</span>
                                </div>
                                
                            
                        </div>
                        
                        <div>
                            <button onclick="changeFavorite('8577')" class="btn favorite-button background-ice-blue d-flex justify-content-start align-items-center">
                                <div id="icon-button-favorite-top" class=" icon-button"></div>
                                <div class="loading-spinner-fav">
                                    <div class="d-flex justify-content-center align-items-center loading-spinner-wrapper"><span class="loader"></span></div>
                                </div>
                                <span id="icon-text-favorite-top" class="body text-color-ct-blue">
                                    Zu Favoriten hinzufügen
                                </span>
                            </button>
                            <div class="alert-fav text text-color-ice-blue">Im Moment können leider keine Favoriten bearbeitet werden.</div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="mrec-btf-container-mobile" class="ad-container ad-container-mobile">
                <div id="mrec-btf"></div>
            </div>

            <hr class="horizontal-line mt-5 mb-5 margin-lr">

            <div class="chart-prices-container row margin-lr">
                <div id="prices-container" class="col-md-6 order-md-2">
                    
                        <div class="price-row row d-flex align-items-center">
                            <div class="price-type col-6 d-flex flex-column justify-content-start headline">
                                <div class="price-type-name">Diesel</div>
                                <div class="price-type-mtsk"> MTS-K Preis</div>
                            </div>
                            <div class="price-box col-6">
                                <div id="price-input-1" class="price-input d-flex justify-content-between align-items-center">
                                    <span onclick="reportPrice('decrease', 1)" class="change-price strong-title text-color-ct-blue ml-2">
                                        <img class="icon-plus-minus" src="/static/img/icon_minus.df7437982dfb.svg" alt="-"/>
                                    </span>
                                    <div class="price-field">
                                        
                                            <span id="current-price-1">2.05</span>
                                            <sup id="suffix-price-1">9</sup>
                                        
                                    </div>
                                    <span onclick="reportPrice('increase', 1)" class="change-price strong-title text-color-ct-blue mr-2">
                                        <img class="icon-plus-minus" src="/static/img/icon_plus.9ef75ad550a5.svg" alt="+"/>
                                    </span>
                                </div>
                                <button
                                    id="price-report-button-1"
                                    class="btn btn-block price-report-button background-ice-blue" type="button"
                                    data-toggle="modal" data-target="#modal-complain-mtsk-1"
                                    onclick="melden('True','8577', '3', '1')">
                                        <div class="text d-flex text-color-ct-blue align-items-center">
                                            
                                                <img class="icon-button" src="/static/img/icon_complaint.svg"/>
                                                <div class="price-report-text">MTS-K Beschwerde</div>
                                            
                                        </div>
                                </button>

                                <!-- Modal -->
                                <div class="modal" id="modal-complain-mtsk-1">
                                    <div class="modal-dialog">
                                        <div class="modal-content background-ct-blue">
                                            <div class="modal-header d-flex justify-content-between">
                                                <div class="headline">MTS-K Beschwerde</div>
                                                <span class="headline close-button" data-dismiss="modal">&times;</span>
                                            </div>
                                            <div class="modal-body">
                                                <p>Bei Preisabweichungen oder anderen Störungen bei Tankstellen mit MTS-K Übermittlung haben Sie hier die Möglichkeit eine Beschwerdemeldung zu machen. Bitte beachten Sie, dass diese erst in der Meldestelle geprüft werden müssen. Daher werden Ihre Korrekturen nicht sofort sichtbar sein.</p>
                                                <p>Wir danken für Ihre Zusammenarbeit</p>
                                                <br>
                                                <div class="error-message-modal mb-2" id="error-message-1"></div>
                                                <div><span>Art der Störung:</span></div>
                                                <select id="select-complain-1" class="select-complain form-control col-12">
                                                        <option value="" disabled selected>Bitte wählen</option>
                                                        <option value="wrongPriceE5">Falscher Preis E5</option>
                                                        <option value="wrongPriceE10">Falscher Preis E10</option>
                                                        <option value="wrongPriceDiesel">Falscher Preis Diesel</option>
                                                        <option value="wrongPetrolStationName">Falscher Tankstellenname</option>
                                                        <option value="wrongPetrolStationBrand">Falsche Tankstellenmarke</option>
                                                        <option value="wrongPetrolStationStreet">Falsche Straße</option>
                                                        <option value="wrongPetrolStationHouseNumber">Falsche Hausnummer</option>
                                                        <option value="wrongPetrolStationPostcode">Falsche Postleitzahl</option>
                                                        <option value="wrongPetrolStationPlace">Falscher Ort</option>
                                                        <option value="wrongStatusOpen">Tankstelle nicht geschlossen</option>
                                                        <option value="wrongStatusClosed">Tankstelle nicht geöffnet</option>
                                                </select>
                                                <textarea id="text-area-complain-1" rows="5" class="text-area-complain form-control" maxlength="255"></textarea>
                                                <br>
                                            </div>
                                            <div class="modal-footer">
                                                <button class="btn background-ice-blue text-color-white-gray" onclick="submitComplain('8577', '1')">Nachricht abschicken</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    
                        <div class="price-row row d-flex align-items-center">
                            <div class="price-type col-6 d-flex flex-column justify-content-start headline">
                                <div class="price-type-name">Super E10</div>
                                <div class="price-type-mtsk"> MTS-K Preis</div>
                            </div>
                            <div class="price-box col-6">
                                <div id="price-input-2" class="price-input d-flex justify-content-between align-items-center">
                                    <span onclick="reportPrice('decrease', 2)" class="change-price strong-title text-color-ct-blue ml-2">
                                        <img class="icon-plus-minus" src="/static/img/icon_minus.df7437982dfb.svg" alt="-"/>
                                    </span>
                                    <div class="price-field">
                                        
                                            <span id="current-price-2">1.75</span>
                                            <sup id="suffix-price-2">9</sup>
                                        
                                    </div>
                                    <span onclick="reportPrice('increase', 2)" class="change-price strong-title text-color-ct-blue mr-2">
                                        <img class="icon-plus-minus" src="/static/img/icon_plus.9ef75ad550a5.svg" alt="+"/>
                                    </span>
                                </div>
                                <button
                                    id="price-report-button-2"
                                    class="btn btn-block price-report-button background-ice-blue" type="button"
                                    data-toggle="modal" data-target="#modal-complain-mtsk-2"
                                    onclick="melden('True','8577', '5', '2')">
                                        <div class="text d-flex text-color-ct-blue align-items-center">
                                            
                                                <img class="icon-button" src="/static/img/icon_complaint.svg"/>
                                                <div class="price-report-text">MTS-K Beschwerde</div>
                                            
                                        </div>
                                </button>

                                <!-- Modal -->
                                <div class="modal" id="modal-complain-mtsk-2">
                                    <div class="modal-dialog">
                                        <div class="modal-content background-ct-blue">
                                            <div class="modal-header d-flex justify-content-between">
                                                <div class="headline">MTS-K Beschwerde</div>
                                                <span class="headline close-button" data-dismiss="modal">&times;</span>
                                            </div>
                                            <div class="modal-body">
                                                <p>Bei Preisabweichungen oder anderen Störungen bei Tankstellen mit MTS-K Übermittlung haben Sie hier die Möglichkeit eine Beschwerdemeldung zu machen. Bitte beachten Sie, dass diese erst in der Meldestelle geprüft werden müssen. Daher werden Ihre Korrekturen nicht sofort sichtbar sein.</p>
                                                <p>Wir danken für Ihre Zusammenarbeit</p>
                                                <br>
                                                <div class="error-message-modal mb-2" id="error-message-2"></div>
                                                <div><span>Art der Störung:</span></div>
                                                <select id="select-complain-2" class="select-complain form-control col-12">
                                                        <option value="" disabled selected>Bitte wählen</option>
                                                        <option value="wrongPriceE5">Falscher Preis E5</option>
                                                        <option value="wrongPriceE10">Falscher Preis E10</option>
                                                        <option value="wrongPriceDiesel">Falscher Preis Diesel</option>
                                                        <option value="wrongPetrolStationName">Falscher Tankstellenname</option>
                                                        <option value="wrongPetrolStationBrand">Falsche Tankstellenmarke</option>
                                                        <option value="wrongPetrolStationStreet">Falsche Straße</option>
                                                        <option value="wrongPetrolStationHouseNumber">Falsche Hausnummer</option>
                                                        <option value="wrongPetrolStationPostcode">Falsche Postleitzahl</option>
                                                        <option value="wrongPetrolStationPlace">Falscher Ort</option>
                                                        <option value="wrongStatusOpen">Tankstelle nicht geschlossen</option>
                                                        <option value="wrongStatusClosed">Tankstelle nicht geöffnet</option>
                                                </select>
                                                <textarea id="text-area-complain-2" rows="5" class="text-area-complain form-control" maxlength="255"></textarea>
                                                <br>
                                            </div>
                                            <div class="modal-footer">
                                                <button class="btn background-ice-blue text-color-white-gray" onclick="submitComplain('8577', '2')">Nachricht abschicken</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    
                        <div class="price-row row d-flex align-items-center">
                            <div class="price-type col-6 d-flex flex-column justify-content-start headline">
                                <div class="price-type-name">Super E5</div>
                                <div class="price-type-mtsk"> MTS-K Preis</div>
                            </div>
                            <div class="price-box col-6">
                                <div id="price-input-3" class="price-input d-flex justify-content-between align-items-center">
                                    <span onclick="reportPrice('decrease', 3)" class="change-price strong-title text-color-ct-blue ml-2">
                                        <img class="icon-plus-minus" src="/static/img/icon_minus.df7437982dfb.svg" alt="-"/>
                                    </span>
                                    <div class="price-field">
                                        
                                            <span id="current-price-3">1.78</span>
                                            <sup id="suffix-price-3">9</sup>
                                        
                                    </div>
                                    <span onclick="reportPrice('increase', 3)" class="change-price strong-title text-color-ct-blue mr-2">
                                        <img class="icon-plus-minus" src="/static/img/icon_plus.9ef75ad550a5.svg" alt="+"/>
                                    </span>
                                </div>
                                <button
                                    id="price-report-button-3"
                                    class="btn btn-block price-report-button background-ice-blue" type="button"
                                    data-toggle="modal" data-target="#modal-complain-mtsk-3"
                                    onclick="melden('True','8577', '7', '3')">
                                        <div class="text d-flex text-color-ct-blue align-items-center">
                                            
                                                <img class="icon-button" src="/static/img/icon_complaint.svg"/>
                                                <div class="price-report-text">MTS-K Beschwerde</div>
                                            
                                        </div>
                                </button>

                                <!-- Modal -->
                                <div class="modal" id="modal-complain-mtsk-3">
                                    <div class="modal-dialog">
                                        <div class="modal-content background-ct-blue">
                                            <div class="modal-header d-flex justify-content-between">
                                                <div class="headline">MTS-K Beschwerde</div>
                                                <span class="headline close-button" data-dismiss="modal">&times;</span>
                                            </div>
                                            <div class="modal-body">
                                                <p>Bei Preisabweichungen oder anderen Störungen bei Tankstellen mit MTS-K Übermittlung haben Sie hier die Möglichkeit eine Beschwerdemeldung zu machen. Bitte beachten Sie, dass diese erst in der Meldestelle geprüft werden müssen. Daher werden Ihre Korrekturen nicht sofort sichtbar sein.</p>
                                                <p>Wir danken für Ihre Zusammenarbeit</p>
                                                <br>
                                                <div class="error-message-modal mb-2" id="error-message-3"></div>
                                                <div><span>Art der Störung:</span></div>
                                                <select id="select-complain-3" class="select-complain form-control col-12">
                                                        <option value="" disabled selected>Bitte wählen</option>
                                                        <option value="wrongPriceE5">Falscher Preis E5</option>
                                                        <option value="wrongPriceE10">Falscher Preis E10</option>
                                                        <option value="wrongPriceDiesel">Falscher Preis Diesel</option>
                                                        <option value="wrongPetrolStationName">Falscher Tankstellenname</option>
                                                        <option value="wrongPetrolStationBrand">Falsche Tankstellenmarke</option>
                                                        <option value="wrongPetrolStationStreet">Falsche Straße</option>
                                                        <option value="wrongPetrolStationHouseNumber">Falsche Hausnummer</option>
                                                        <option value="wrongPetrolStationPostcode">Falsche Postleitzahl</option>
                                                        <option value="wrongPetrolStationPlace">Falscher Ort</option>
                                                        <option value="wrongStatusOpen">Tankstelle nicht geschlossen</option>
                                                        <option value="wrongStatusClosed">Tankstelle nicht geöffnet</option>
                                                </select>
                                                <textarea id="text-area-complain-3" rows="5" class="text-area-complain form-control" maxlength="255"></textarea>
                                                <br>
                                            </div>
                                            <div class="modal-footer">
                                                <button class="btn background-ice-blue text-color-white-gray" onclick="submitComplain('8577', '3')">Nachricht abschicken</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    
                        <div class="price-row row d-flex align-items-center">
                            <div class="price-type col-6 d-flex flex-column justify-content-start headline">
                                <div class="price-type-name">Shell V-Power Racing</div>
                                
                            </div>
                            <div class="price-box col-6">
                                <div id="price-input-4" class="price-input d-flex justify-content-between align-items-center">
                                    <span onclick="reportPrice('decrease', 4)" class="change-price strong-title text-color-ct-blue ml-2">
                                        <img class="icon-plus-minus" src="/static/img/icon_minus.df7437982dfb.svg" alt="-"/>
                                    </span>
                                    <div class="price-field">
                                        
                                            <span id="current-price-4">1.99</span>
                                            <sup id="suffix-price-4">9</sup>
                                        
                                    </div>
                                    <span onclick="reportPrice('increase', 4)" class="change-price strong-title text-color-ct-blue mr-2">
                                        <img class="icon-plus-minus" src="/static/img/icon_plus.9ef75ad550a5.svg" alt="+"/>
                                    </span>
                                </div>
                                <button
                                    id="price-report-button-4"
                                    class="btn btn-block price-report-button background-ice-blue" type="button"
                                    data-toggle="modal" 
                                    onclick="melden('False','8577', '12', '4')">
                                        <div class="text d-flex text-color-ct-blue align-items-center">
                                            
                                                <img class="icon-button" src="/static/img/icon_complaint.svg"/>
                                                <div class="price-report-text">Diesen Preis melden</div>
                                            
                                        </div>
                                </button>

                                <!-- Modal -->
                                <div class="modal" id="modal-complain-mtsk-4">
                                    <div class="modal-dialog">
                                        <div class="modal-content background-ct-blue">
                                            <div class="modal-header d-flex justify-content-between">
                                                <div class="headline">MTS-K Beschwerde</div>
                                                <span class="headline close-button" data-dismiss="modal">&times;</span>
                                            </div>
                                            <div class="modal-body">
                                                <p>Bei Preisabweichungen oder anderen Störungen bei Tankstellen mit MTS-K Übermittlung haben Sie hier die Möglichkeit eine Beschwerdemeldung zu machen. Bitte beachten Sie, dass diese erst in der Meldestelle geprüft werden müssen. Daher werden Ihre Korrekturen nicht sofort sichtbar sein.</p>
                                                <p>Wir danken für Ihre Zusammenarbeit</p>
                                                <br>
                                                <div class="error-message-modal mb-2" id="error-message-4"></div>
                                                <div><span>Art der Störung:</span></div>
                                                <select id="select-complain-4" class="select-complain form-control col-12">
                                                        <option value="" disabled selected>Bitte wählen</option>
                                                        <option value="wrongPriceE5">Falscher Preis E5</option>
                                                        <option value="wrongPriceE10">Falscher Preis E10</option>
                                                        <option value="wrongPriceDiesel">Falscher Preis Diesel</option>
                                                        <option value="wrongPetrolStationName">Falscher Tankstellenname</option>
                                                        <option value="wrongPetrolStationBrand">Falsche Tankstellenmarke</option>
                                                        <option value="wrongPetrolStationStreet">Falsche Straße</option>
                                                        <option value="wrongPetrolStationHouseNumber">Falsche Hausnummer</option>
                                                        <option value="wrongPetrolStationPostcode">Falsche Postleitzahl</option>
                                                        <option value="wrongPetrolStationPlace">Falscher Ort</option>
                                                        <option value="wrongStatusOpen">Tankstelle nicht geschlossen</option>
                                                        <option value="wrongStatusClosed">Tankstelle nicht geöffnet</option>
                                                </select>
                                                <textarea id="text-area-complain-4" rows="5" class="text-area-complain form-control" maxlength="255"></textarea>
                                                <br>
                                            </div>
                                            <div class="modal-footer">
                                                <button class="btn background-ice-blue text-color-white-gray" onclick="submitComplain('8577', '4')">Nachricht abschicken</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    
                        <div class="price-row row d-flex align-items-center">
                            <div class="price-type col-6 d-flex flex-column justify-content-start headline">
                                <div class="price-type-name">Shell V-Power Diesel</div>
                                
                            </div>
                            <div class="price-box col-6">
                                <div id="price-input-5" class="price-input d-flex justify-content-between align-items-center">
                                    <span onclick="reportPrice('decrease', 5)" class="change-price strong-title text-color-ct-blue ml-2">
                                        <img class="icon-plus-minus" src="/static/img/icon_minus.df7437982dfb.svg" alt="-"/>
                                    </span>
                                    <div class="price-field">
                                        
                                            <span id="current-price-5">2.26</span>
                                            <sup id="suffix-price-5">9</sup>
                                        
                                    </div>
                                    <span onclick="reportPrice('increase', 5)" class="change-price strong-title text-color-ct-blue mr-2">
                                        <img class="icon-plus-minus" src="/static/img/icon_plus.9ef75ad550a5.svg" alt="+"/>
                                    </span>
                                </div>
                                <button
                                    id="price-report-button-5"
                                    class="btn btn-block price-report-button background-ice-blue" type="button"
                                    data-toggle="modal" 
                                    onclick="melden('False','8577', '13', '5')">
                                        <div class="text d-flex text-color-ct-blue align-items-center">
                                            
                                                <img class="icon-button" src="/static/img/icon_complaint.svg"/>
                                                <div class="price-report-text">Diesen Preis melden</div>
                                            
                                        </div>
                                </button>

                                <!-- Modal -->
                                <div class="modal" id="modal-complain-mtsk-5">
                                    <div class="modal-dialog">
                                        <div class="modal-content background-ct-blue">
                                            <div class="modal-header d-flex justify-content-between">
                                                <div class="headline">MTS-K Beschwerde</div>
                                                <span class="headline close-button" data-dismiss="modal">&times;</span>
                                            </div>
                                            <div class="modal-body">
                                                <p>Bei Preisabweichungen oder anderen Störungen bei Tankstellen mit MTS-K Übermittlung haben Sie hier die Möglichkeit eine Beschwerdemeldung zu machen. Bitte beachten Sie, dass diese erst in der Meldestelle geprüft werden müssen. Daher werden Ihre Korrekturen nicht sofort sichtbar sein.</p>
                                                <p>Wir danken für Ihre Zusammenarbeit</p>
                                                <br>
                                                <div class="error-message-modal mb-2" id="error-message-5"></div>
                                                <div><span>Art der Störung:</span></div>
                                                <select id="select-complain-5" class="select-complain form-control col-12">
                                                        <option value="" disabled selected>Bitte wählen</option>
                                                        <option value="wrongPriceE5">Falscher Preis E5</option>
                                                        <option value="wrongPriceE10">Falscher Preis E10</option>
                                                        <option value="wrongPriceDiesel">Falscher Preis Diesel</option>
                                                        <option value="wrongPetrolStationName">Falscher Tankstellenname</option>
                                                        <option value="wrongPetrolStationBrand">Falsche Tankstellenmarke</option>
                                                        <option value="wrongPetrolStationStreet">Falsche Straße</option>
                                                        <option value="wrongPetrolStationHouseNumber">Falsche Hausnummer</option>
                                                        <option value="wrongPetrolStationPostcode">Falsche Postleitzahl</option>
                                                        <option value="wrongPetrolStationPlace">Falscher Ort</option>
                                                        <option value="wrongStatusOpen">Tankstelle nicht geschlossen</option>
                                                        <option value="wrongStatusClosed">Tankstelle nicht geöffnet</option>
                                                </select>
                                                <textarea id="text-area-complain-5" rows="5" class="text-area-complain form-control" maxlength="255"></textarea>
                                                <br>
                                            </div>
                                            <div class="modal-footer">
                                                <button class="btn background-ice-blue text-color-white-gray" onclick="submitComplain('8577', '5')">Nachricht abschicken</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    

                    
                        <div class="price-footer row col-12 text text-color-ice-blue d-flex flex-column">
                            <span>Letzte MTS-K Preisänderung: 02.11.2022 15:11</span>
                            <span>Letzte Aktualisierung: 02.11.2022 16:12</span>
                        </div>
                    
                </div>
                <div class="table-container text-color-white-gray col-md-6 order-md-1 mb-4 mt-5 mt-md-0">

                        <div class="city-fuel-type d-flex justify-content-center align-items-baseline">
                            <div class="city-fuel-type-label mr-3">Preise für</div>
                            <div class="city-fuel-type-dropdown">
                                <div class="dropdown">
                                    
                                        
                                        <button value="3" id="fuel-name" class="btn background-ct-blue text-color-white-gray dropdown-toggle d-flex justify-content-around align-items-center mr-3" type="button" data-toggle="dropdown">
                                            <span id="button-fuel-value">Diesel</span>
                                            <img class="icons-dropdown-fuel-name" src="/static/img/icon_arrow.19008c538e45.svg" alt="">
                                        </button>
                                        <div class="dropdown-menu text-color-ct-blue background-white-gray">
                                            <a id="3" class="dropdown-item menu-item-fuel-type" onclick=changeFuelType(event)>Diesel</a>
                                        
                                    
                                        
                                            <a id="5" class="dropdown-item menu-item-fuel-type" onclick=changeFuelType(event)>Super E10</a>
                                        
                                    
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="price-change-container d-flex justify-content-center align-items-center mt-3 mb-1">
                            <img id="arrow-left" class="price-change-icon-left" src="/static/img/icon_arrow_long.svg" alt="" onclick="updateGraph('minus')">
                            <!-- <button class="btn btn-primary" onclick="updateGraph('minus')">Minus</button> -->
                            <span class="text-price-change">Preisentwicklung</span>
                            <button value="day" id="modus-name" class="btn background-ct-blue text-color-white-gray dropdown-toggle d-flex justify-content-around align-items-center" type="button" data-toggle="dropdown">
                                <span id="button-modus-value">24h</span>
                            </button>
                            <div class="dropdown-menu text-color-ct-blue background-white-gray">
                                <a id="day" class="dropdown-item menu-item-modus-type" onclick=changeModus(event)>24h</a>
                                <a id="week" class="dropdown-item menu-item-modus-type" onclick=changeModus(event)>1W</a>
                            </div>
                            <img id="arrow-right" class="price-change-icon-right" src="/static/img/icon_arrow_long.svg" alt="" onclick="updateGraph('plus')">
                        </div>
                        <div id="text-date" class="d-flex justify-content-center text-color-payment-blue mb-1"></div>
                        <br>
                        <div class="chart-container">
                            <div id="loading-spinner">
                                <div class="d-flex justify-content-center align-items-center loading-spinner-wrapper">
                                    <img src="/static/img/ring-loader.55e493b0fd3c.svg" alt="laoding...">
                                </div>
                            </div>
                            <div id="chart-data-available">
                                <div id="chart" class="chart-container-item"></div>
                                <div class="text text-color-ice-blue mt-2">
                                    Alle Preisprognosen sind ohne Gewähr. Tatsächliche Preise können abweichen.<br/>
                                    Bitte Öffnungszeiten berücksichtigen. Rote Bereiche kennzeichnen Schließzeiten der Tankstelle.
                                </div>
                                <a href="/tankstellen/stadt-berlin" class="body float-right mt-2">Zur Städtestatistik</a>
                            </div>
                            <div id="chart-data-not-available" class="align-items-center text-center">
                                <span>Für Ihre Auswahl stehen im Moment leider keine Tagespreisentwicklungen zur Verfügung</span>
                            </div>
                  
                        </div>
                </div>

            </div>
        </div>


        <div class="services-container background-mat-blue">
            <div class="container-content">
                <div class="pipe-container">
                    <div class="services-row">
                        <div class="mb-3">
                            <div class="strong-title mb-3">Serviceleistungen</div>
                            <div class="d-flex row">
                                
                                    <div class="icon-name-container d-flex align-items-center col-23 col-sm-6 col-md-4 mb-4">
                                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" class="icon-service b-lazy" data-src="/static/img/hat_shop.svg" alt="Shop" title="Shop"/>
                                        <span class="body-highlight name-service">Shop</span>
                                    </div>
                                
                                    <div class="icon-name-container d-flex align-items-center col-23 col-sm-6 col-md-4 mb-4">
                                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" class="icon-service b-lazy" data-src="/static/img/hat_geldautomat.svg" alt="Geldautomat" title="Geldautomat"/>
                                        <span class="body-highlight name-service">Geldautomat</span>
                                    </div>
                                
                                    <div class="icon-name-container d-flex align-items-center col-23 col-sm-6 col-md-4 mb-4">
                                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" class="icon-service b-lazy" data-src="/static/img/hat_wc.svg" alt="WC" title="WC"/>
                                        <span class="body-highlight name-service">WC</span>
                                    </div>
                                
                                    <div class="icon-name-container d-flex align-items-center col-23 col-sm-6 col-md-4 mb-4">
                                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" class="icon-service b-lazy" data-src="/static/img/hat_waschanlage.svg" alt="Portal-Waschanlage" title="Portal-Waschanlage"/>
                                        <span class="body-highlight name-service">Portal-Waschanlage</span>
                                    </div>
                                
                            </div>
                        </div>
                        
                        <div class="">
                            <div class="headline">Weitere Services</div> <span>Tankwart-Service, Quick-lube, Shell CLUBSMART; Tankkarten: Google Pay, Apple Pay</span>
                        </div>
                        
                        <div class="">
                            
                            
                            
                            
                            
                        </div>
                    </div>

                    <div class="highway-info-container services-row row">
                        
                            <div class="mt-4 mb-3 d-flex">
                                <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" class="icon-highway b-lazy" data-src="/static/img/ist_autobahntankstelle.fb70b96576f3.svg"/>
                                <span class="description d-flex align-items-center ml-3">Diese Tankstelle liegt nahe der B96a</span>
                            </div>
                        
                    </div>

                    <hr class="horizontal-line-hide">

                    <div class="payment-buttons-container row">
                        <div class="payment-container col-md-8">
                            
                                <div class="strong-title headline-payments">Akzeptierte Zahlungsmittel</div>
                                
                                    
                                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" class="icon-payment b-lazy" data-src="/static/img/maestro.svg" alt="Maestro"/>
                                    
                                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" class="icon-payment b-lazy" data-src="/static/img/dinersclub.svg" alt="Diners Club"/>
                                    
                                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" class="icon-payment b-lazy" data-src="/static/img/mastercard.svg" alt="EuroCard/MasterCard"/>
                                    
                                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" class="icon-payment b-lazy" data-src="/static/img/visa.svg" alt="VISA"/>
                                    
                                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" class="icon-payment b-lazy" data-src="/static/img/americanexpress.svg" alt="American Express"/>
                                    
                                        <br/>
                                
                                <div class="accepted-payments-text">
                                    Bar, euroShell Tankkarte, EC
                                </div>
                            
                        </div>
                        <div class="buttons-container col-md-4 d-flex flex-column justify-content-first">
                            
                                <button class="btn fav-feed-compl-button background-ice-blue text-color-ct-blue d-flex justify-content-start align-items-center"
                                onclick="melden('True','8577', '', 'general')"
                                data-toggle="modal" data-target="#modal-complain-mtsk-general">
                                    <img class="icon-button" src="/static/img/icon_complaint.svg"/>
                                    <span class="fav-feed-compl-button-text body">MTS-K Beschwerde</span>
                                </button>

                                <!-- Modal -->
                                <div class="modal" id="modal-complain-mtsk-general">
                                    <div class="modal-dialog">
                                        <div class="modal-content background-ct-blue">
                                            <div class="modal-header d-flex justify-content-between">
                                                <div class="headline">MTS-K Beschwerde</div>
                                                <span class="headline close-button" data-dismiss="modal">&times;</span>
                                            </div>
                                            <div class="modal-body">
                                                <p>Bei Preisabweichungen oder anderen Störungen bei Tankstellen mit MTS-K Übermittlung haben Sie hier die Möglichkeit eine Beschwerdemeldung zu machen. Bitte beachten Sie, dass diese erst in der Meldestelle geprüft werden müssen. Daher werden Ihre Korrekturen nicht sofort sichtbar sein.</p>
                                                <p>Wir danken für Ihre Zusammenarbeit</p>
                                                <br>
                                                <div class="error-message-modal mb-2" id="error-message-general"></div>
                                                <div><span>Art der Störung:</span></div>
                                                <select id="select-complain-general" class="select-complain form-control col-12">
                                                        <option value="" selected>Bitte wählen</option>
                                                        <option value="wrongPriceE5">Falscher Preis E5</option>
                                                        <option value="wrongPriceE10">Falscher Preis E10</option>
                                                        <option value="wrongPriceDiesel">Falscher Preis Diesel</option>
                                                        <option value="wrongPetrolStationName">Falscher Tankstellenname</option>
                                                        <option value="wrongPetrolStationBrand">Falsche Tankstellenmarke</option>
                                                        <option value="wrongPetrolStationStreet">Falsche Straße</option>
                                                        <option value="wrongPetrolStationHouseNumber">Falsche Hausnummer</option>
                                                        <option value="wrongPetrolStationPostcode">Falsche Postleitzahl</option>
                                                        <option value="wrongPetrolStationPlace">Falscher Ort</option>
                                                        <option value="wrongStatusOpen">Tankstelle nicht geschlossen</option>
                                                        <option value="wrongStatusClosed">Tankstelle nicht geöffnet</option>
                                                </select>
                                                <textarea id="text-area-complain-general" rows="5" class="text-area-complain form-control" maxlength="255"></textarea>
                                                <br>
                                            </div>
                                            <div class="modal-footer">
                                                <button class="btn background-ice-blue text-color-white-gray" onclick="submitComplain('8577', 'general')">Nachricht abschicken</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            
                            <button class="btn fav-feed-compl-button background-ice-blue text-color-ct-blue d-flex justify-content-start align-items-center" onclick="window.location.href='mailto:infoservice@clever-tanken.de?subject=Feedback%20zu%20Shell Berlin Berliner Str. 83%20Berliner Str. 83 %2013189%20Berlin'">
                                <img class="icon-button" src="/static/img/icon_feedback.svg"/>
                                <span class="fav-feed-compl-button-text body">Tankstellen-Feedback geben</span>
                            </button>
                            <button onclick="changeFavorite('8577')" class="btn fav-feed-compl-button background-ice-blue d-flex justify-content-start   align-items-center favorit-button">
                                <div id="icon-button-favorite-down" class=" icon-button"></div>
                                <div class="loading-spinner-fav">
                                    <div class="d-flex justify-content-center align-items-center loading-spinner-wrapper"><span class="loader"></span></div>
                                </div>
                                <span id="icon-text-favorite-down" class="body text-color-ct-blue">Zu Favoriten hinzufügen</span>
                            </button>
                            <div class="alert-fav text text-color-ice-blue">Im Moment können leider keine Favoriten bearbeitet werden.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    </div>
    <div id="footer-container" class="margin-lr">
        <div class="pipe-container">
            
            <!-- Social media buttons nur unterhalb des body_containers, wenn kein "wirklicher" content (bei Quickfinder Seiten).
                Buttons bei Quickfinder-Seiten über eigenens include eingebaut
                 -->
            
                
<div id="fb-root"></div>
<div id="footer-social-buttons-container" class="mb-5">
    <div class="social-button" id="facebook-social-button" style="display: none;">
        <div class="fb-like" data-href="https://www.clever-tanken.de" data-layout="button_count"
            data-action="like" data-show-faces="true" data-share="true"></div>
    </div>
    <div class="social-button" id="twitter-social-button" style="display: none;">
        <a href="https://twitter.com/share" class="twitter-share-button"
        data-url="https://www.clever-tanken.de" data-hashtags="clevertanken"></a>
    </div>
</div>
            

            
            

            <div id="quickfinder">
                <h3 class="headline">Quickfinder</h3>
                <div class="quickfinder-list d-flex justify-content-between row">
                    <div class="quickfinder-list-item body col-12 col-sm-4 text-left text-sm-center text-md-left"><a
                            class="text-color-payment-blue" href="/tankstellen">Finden Sie die
                        besten Tankstellen</a></div>
                    <div class="quickfinder-list-item body col-12 col-sm-4 text-left text-sm-center "><a
                            class="text-color-payment-blue" href="/spritpreise">Finden Sie die
                        günstigsten Spritpreise</a></div>
                    <div class="quickfinder-list-item body col-12 col-sm-4 text-left text-sm-center text-md-right "><a
                            class="text-color-payment-blue" href="/marken">Finden Sie Ihre bevorzugte
                        Marke</a></div>
                </div>
            </div>

            <div class="divider"></div>
            
            <div id="disclaimer" class="d-none d-sm-block body">
                Diese Informationen sind für Privatanwender kostenlos. Alle Angaben ohne Gewähr. Jegliches
                Weiterverarbeiten oder Zitieren unserer Informationen -auch auszugsweise- bedarf der ausdrücklichen
                Genehmigung von clever-tanken.de. Preisangaben und Grunddaten von Tankstellen mit der MTS-K werden
                bereitgestellt von der Markttransparenzstelle für Kraftstoffe (MTS-K). Alle genannten Produktnamen,
                Logos und eingetragene Warenzeichen sind Eigentum der jeweiligen Rechteinhaber.
            </div>
            <div id="disclaimer" class="accordion d-sm-none">
                <div id="disclaimer-accordion" class="accordion">
                    <div class="card">
                        <div class="card-header background-ice-blue">
                            <button class="btn headline text-color-ct-blue background-ice-blue d-flex align-items-center"
                                    type="button" data-toggle="collapse" data-target="#disclaimer-content">
                                Disclaimer
                                <div class="disclaimer-arrow ml-3">
                                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="/static/img/icon_arrow_ct_blue.39ccc415f93f.svg" class="b-lazy" alt="">
                                </div>
                            </button>
                        </div>
                        <div id="disclaimer-content" class="collapse background-ct-blue"
                             data-parent="#disclaimer-accordion">
                            <div class="card-body body text-justify">
                                Diese Informationen sind für Privatanwender kostenlos. Alle Angaben ohne Gewähr.
                                Jegliches Weiterverarbeiten oder Zitieren unserer Informationen -auch auszugsweise-
                                bedarf der ausdrücklichen Genehmigung von clever-tanken.de. Preisangaben und Grunddaten
                                von Tankstellen mit der MTS-K werden bereitgestellt von der Markttransparenzstelle für
                                Kraftstoffe (MTS-K). Alle genannten Produktnamen, Logos und eingetragene Warenzeichen
                                sind Eigentum der jeweiligen Rechteinhaber.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="footer">
                <div class="footer-row d-flex flex-wrap text-left text-sm-center">
                    <div class="col-12 col-sm-6 col-md"><a href="/impressum"
                                                           class="font-body-highlights-bold-light">Impressum</a></div>
                    <div class="col-12 col-sm-6 col-md"><a href="/agb"
                                                           class="font-body-highlights-bold-light">AGB</a></div>
                    <div class="col-12 col-sm-6 col-md"><a href="/datenschutz"
                                                           class="font-body-highlights-bold-light">Datenschutz</a></div>
                    <div class="col-12 col-sm-6 col-md"><a href="/privatsphaere"
                                                           class="font-body-highlights-bold-light">Privatsphäre</a></div>
                    <div class="col-12 col-sm-6 col-md"><a href="/kontakt"
                                                           class="font-body-highlights-bold-light">Kontakt</a></div>
                    <div class="col-12 col-sm-6 col-md"><a href="/media_partner"
                                                           class="font-body-highlights-bold-light">Media</a></div>
                    <div class="col-12 col-sm-6 col-md"><a href="/presse"
                                                            class="font-body-highlights-bold-light">Presse</a></div>                                                           
                    <div class="col-12 col-sm-6 col-md"><a href="/faq"
                                                           class="font-body-highlights-bold-light">FAQ</a></div>
                </div>
                <div class="d-flex justify-content-center mt-5">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="/static/img/powered-by-google-on-non-white.2c1d18d0e7d2.png" class="b-lazy" alt="Powered by Google">
                </div>
            </div>
        </div>
    </div>

    <div id="sidemenu-container" class="d-flex flex-column justify-content-between">
        <div id="side-menu-links">
            <a href="javascript:void(0)" class="side-menu-item side-menu-link-item" onclick="closeNav()">&times;</a>
            <a href="/" class="side-menu-item side-menu-link-item">Home</a>
            <a href="/favoriten" class="side-menu-item side-menu-link-item">Favoriten</a>
            <a href="/statistik/historie/diesel" class="side-menu-item side-menu-link-item">Statistiken</a>
            <a href="/clever-deal" class="side-menu-item side-menu-link-item">clever-deal</a>
        </div>


        
            <form id="account-login-form" class="account-form" method="post" autocomplete="on"
                  action="/accounts/login/?next=/tankstelle_details/8577">
                <div class="login-height login-sidebar-wrapper">
                    <div id="auth-message" class="text-color-ct-blue mb-2 mt-1"></div>
                    
                    <div class="row">
                        <div class="col-3">
                            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" class="login-sidebar-img b-lazy" data-src="/static/img/userlogin_avatar.19a6662ae960.svg" alt="User">
                        </div>
                        <div class="col-9">
                            <input type="hidden" name="csrfmiddlewaretoken" value="j2P7tWdEMyZMSgMbSSgnGOGdWfhtuBfF2zmZGF2Q4hPOoD0ZdJVDs2UlUUIazKnE">
                            <input type="text" class="form-control login-sidebar-input" name="login"
                                   autofocus="autofocus" required="" placeholder="Benutzername" id="id_login"
                                   maxlength="150">
                            <input type="password" class="form-control login-sidebar-input" name="password" required=""
                                   placeholder="Passwort" id="id_password">
                            <!-- TODO redirect_field_value ??? -->
                            <!--  -->
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3">
                        </div>
                        <div class="col-9 d-flex justify-content-between">
                            <div class="login-sidebar-keeplogin">Angemeldet bleiben:</div>
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" name="remember" id="id_remember" class="custom-control-input">
                                <label class="custom-control-label" for="id_remember"></label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <button type="submit" class="btn btn-block mt-4 login-sidebar-button side-menu-item">Login
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 d-flex justify-content-between">
                            <a class="side-menu-item login-sidebar-pswreset" href="/accounts/signup/">Jetzt
                                registrieren</a>
                            <a class="side-menu-item login-sidebar-pswreset" href="/accounts/password/reset/">Passwort
                                vergessen?</a>
                        </div>
                    </div>
                </div>
            </form>
        

    </div>




  
  <script type="text/javascript" src="/static/libs/jquery-3.3.1.slim.min.ac0e50590d92.js"></script>
  <script type="text/javascript" src="/static/libs/popper.min.a22f3f7e61af.js"></script>
  <script type="text/javascript" src="/static/libs/bootstrap/dist/js/bootstrap.min.67176c242e1b.js"></script>
  <script type="text/javascript" src="/static/libs/bootstrap3-typeahead.min.1103b8a37a6f.js"></script>
  <script type="text/javascript" src="/static/libs/dygraph/dygraph.min.cb01edba9a48.js"></script>

  

  
<link rel=stylesheet type="text/css" href="/static/123maps/map123.aac16e6e3bbd.css">


  
    
    <script type="text/javascript" src="/static/js/search.0d47892d9538.js"></script>
    <script async defer type="text/javascript" src="/static/js/sidenav.6a06e5d26608.js"></script>
    <script async defer type="text/javascript" src="/static/js/native_app_banner.ec02c1083e2f.js"></script>
    
    <script>
        var ort, lat, lon, spritsorte, radius;
        var test = '';
        
            spritsorte = '7'
        
        initSearch(ort, lat, lon, spritsorte, radius);
    </script>

    <!-- Facebook and Twitter CMP -->
    <script id="facebook-script-place"></script>
    <script id="twitter-script-place"></script>


    <script type="text/javascript" src="/static/js/dygraph_shared.bea7ee338da9.js"></script>
    <script type="text/javascript" src="/static/js/tankstellen_details.f6e416f735fb.js"></script>

    <script type="text/javascript" src="/static/123maps/map123v1.min.24cb718e7c4e.js"></script>
    <script type="text/javascript" src="/static/js/map.7d93a62e6224.js"></script>
    <script>
        // map
        addPoi('52,556313', '13,41506','','Shell',null,2207,2208,60);
        initMap('map_id', '52,556313','13,41506', '1200', 'map_id', true, [])

        // favorit
        var isFavoriteStr = 'False'
        var isFavorite = isFavoriteStr === 'False' ? false : true;

        // dygraph
        var object_id = '8577'
        toggleMenuItemsFuel()
        toggleMenuItemsModus()
        updateGraph()

    </script>



  <!-- Lazy loading pictures (library blazy.js) -->
  <script type="text/javascript" src="/static/libs/blazy.min.d7a104dfea87.js" ></script>
  <script>
    var bLazy;
    ;(function() {
        bLazy = new Blazy({
            breakpoints: [{
                width: 576,
                src: 'data-src-small'
            }]
        });
    })();

  </script>

  
  <!-- Adds body -->
  <script type="text/javascript">
    var ads = document.querySelectorAll('.ad-container, #sky-container');
    for (var i=0; i < ads.length; i++) {
        var display = window.getComputedStyle(ads[i])['display'];
        if(display == 'none') {
            ads[i].remove();
        }
    }
  </script>

<script type='text/javascript'>
    var ivw_mm_prefix = ''
    var ivw_mm_site = 'autobild'
    if (Math.max(document.documentElement.clientWidth, window.innerWidth || 769) < 768) {
        ivw_mm_prefix = 'mob-'
        ivw_mm_site = 'mobaubi'
    }
    IOMm('configure', { 
        st: ivw_mm_site, // 
        dn: 'data-56b1bc19e7.clever-tanken.de', // 
        mh: 5,
        cn: 'de', // 
        dc: 'web', // 
        dg: false // 
    });
  </script>
  
  <script type='text/javascript'> IOMm('pageview', { cp: ivw_mm_prefix+"clever_content" }); </script>
  

  
  <script type="text/javascript">
    var viewdesktop = Math.max(document.documentElement.clientWidth, window.innerWidth || 769) >= 768;
    if (viewdesktop) {
      var ivw_prefix = '';
      var ivw_sv = 'in';
      var ivw_st = 'autobild';
    }
    else {
      var ivw_prefix = 'mob-';
      var ivw_sv = 'mo';
      var ivw_st = 'mobaubi';
    }
  </script>
</body>

OK, yeah, that page seems to have several elements that not compatible with xpath and are throwing errors, so in this case regex is your better option.