@charset "utf-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

@font-face {
    font-family: 'sertigregular';
    src: url('../font/sertig/sertig-webfont.eot');
    src: url('../font/sertig/sertig-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/sertig/sertig-webfont.woff') format('woff'),
         url('../font/sertig/sertig-webfont.ttf') format('truetype'),
         url('../font/sertig/sertig-webfont.svg#sertigregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'franchiseregular';
    src: url('../font/franchise-bold/franchise-bold-webfont.eot');
    src: url('../font/franchise-bold/franchise-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/franchise-bold/franchise-bold-webfont.woff') format('woff'),
         url('../font/franchise-bold/franchise-bold-webfont.ttf') format('truetype'),
         url('../font/franchise-bold/franchise-bold-webfont.svg#franchiseregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body { height: 100%; }

/*share button bottom*/

li.facebook, li.gplus, li.linkedin, li.mail, li.pinterest, li.twitter, li.xing, li.settings_info { width: 12.5% !important;}
.social_share_privacy_area.line li div.gplusone, .social_share_privacy_area.line li div.pinit, .social_share_privacy_area.line li div.tweet, .social_share_privacy_area.line .xing img.xing_privacy_dummy, .social_share_privacy_area.line .facebook .fb_like { width: auto !important; margin: 0 0 0 5px !important;}

@media screen and (max-width: 980px) { 
	.share { padding-left: 2%;}
	li.pinterest {clear: both;}
	li.facebook, li.gplus, li.linkedin, li.mail, li.pinterest, li.twitter, li.xing, li.settings_info { width: 25% !important; height: 40px !important;}
}

@media screen and (max-width: 510px) {
	li.linkedin, li.pinterest, li.xing {clear: both;}
	li.facebook, li.gplus, li.linkedin, li.mail, li.pinterest, li.twitter, li.xing, li.settings_info { width: 50% !important; height: 40px !important;}
}

/*share button bottom end*/

/*
body { background-image: url(../image/hg.jpg);}
*/

body {
    display: table;
    margin:0;
    padding:0;
    width: 100%;
    background: no-repeat bottom center fixed;
    -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;
}
.page-row {display: table-row;}
.page-row-expanded { height: 100%; }

@media screen and (max-width: 480px) { body { background-image: none; background-color: #999;}}

h1 {
    font-size:55px;
    min-height: 65px;
    color: #fff;
    text-transform: uppercase;
}

@media screen and (max-width: 700px) { h1 { font-size: 40px;}}

h2 {
    font-size:30px;
    color: #fff;
    text-transform: uppercase;
}

@media screen and (max-width: 700px) { h2 { font-size: 25px;}}

h3 {
    font-size:20px;
    color: #fff;
}

@media screen and (max-width: 700px) { h3 { font-size: 18px;}}

a {
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

a:hover {text-decoration: none;}

.sertig {
    font-family: 'sertigregular', Arial, Helvetica, sans-serif;
    font-weight:normal;
}

.franchise {
    font-family: 'franchiseregular', Arial, Helvetica, sans-serif;
    font-weight:normal;

}

.uppercase {text-transform: uppercase;}

.center {
    margin: 0px auto;
    width: 100%;
    max-width: 980px;
    min-height: 100%;
}

.highlight { color: #FFDE00}

.meldung {
    width: 96%;
    padding: 2%;
    margin: 10px 0 10px 0;
    float: left;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
}

.meldung a { color: #fff;}

.meldung-ok { background-color: #12A01E;}
.meldung-ok:before{content:url(../image/meldung-ok.png); margin: 0 8px 0 0;}

.meldung-false { background-color: #FB0004;}
.meldung-false:before{content:url(../image/meldung-false.png); margin: 0 5px 0 0;}

.meldung-warn { background-color: #CCCC00;}
.meldung-warn:before{content:url(../image/meldung-false.png); margin: 0 5px 0 0;}

#tanzahl, #aanzahl, #wanzahl, #nanzahl {
	color: #fff !important;
	margin: -10px 0 30px 0;
}

/*GRID SYSTEM*/
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

.group:before, .group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}
/*GRID SYSTEM END*/

section#search header, section#search #mask {margin-top: 25px;}

section#search {
    width: 100%;
    min-height: 385px;
    background-image: url(../image/hg-search.png);
    float: left;
    z-index: 1;
}

/*MENU*/
section#search header {
    position: absolute;
    width: 370px;
    float: left;
}

@media screen and (max-width: 700px) {
    section#search header {
        position: relative;
        max-width: 700px;
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }

    section#search header #nav-naver {
        max-width: 700px;
        width: 100%;
        float: left;
        margin: 23px 0 30px 0;
    }
}

section#search header img {
    margin: 20px 0 20px 0; /*bottom 26px*/
}

@media screen and (max-width: 990px) {section#search header img {margin-left: 10px;}}

@media screen and (max-width: 700px) {section#search header img {margin: 0px;}}

section#search header nav {text-transform: uppercase;}

section#search header nav ul {
    list-style-type: none;
    text-align: justify;
}

@media screen and (max-width: 700px) {section#search header nav ul {margin: 0;}}

section#search header nav ul li a {
    width: 300px;
    height: 40px;
    float: left;
    background-color: #2A7290;
    margin: 0 0 10px 0;
    padding: 10px 0 0 10px;

    font-size:25px;
    text-decoration: none;
    color: #fff;
}

@media screen and (max-width: 700px) {
    section#search header nav ul li a {
        max-width: 700px;
        width: 100%;
    }
}

section#search header nav ul li a:hover {width: 340px;}

@media screen and (max-width: 700px) {
    section#search header nav ul li a:hover {
        max-width: 700px;
        width: 100%;
    }
}

section#search header nav ul li a.fix {
    width: 340px;
    background: url(../image/kreuz-weiss.png) no-repeat right #2A7290;
}

@media screen and (max-width: 700px) {
    section#search header nav ul li a.fix {
        max-width: 700px;
        width: 100%;
    }
}

/*SPRACHE*/
section#search #sprache {
    position: absolute;
    max-width: 980px;
    width: 100%;
    margin: 5px 0 0 0;
}

@media screen and (max-width: 700px) {
    section#search #sprache {
        display: none;
    }
}

@media screen and (min-width: 700px) {
    section#search #sprache_kl {
        display: none;
    }
}

@media screen and (max-width: 700px) {
    section#search #sprache_kl {
        position: relative;
        max-width: 700px;
        width: 100%;
        text-align: right;
        margin: 5px 0 0 0;
    }
}


/*LOGIN*/
section#search #login {
    position: absolute;
    max-width: 980px;
    width: 100%;
    margin: 5px 0 0 0;
}

@media screen and (max-width: 700px) {
    section#search #login {
        display: none;
    }

    section#search #login-naver {
        margin: 0 0 0 50.7%;
        position: absolute;
    }
}

@media screen and (min-width: 700px) {section#search #login-naver {display: none;}}

section#search #login a.anmelden, section#search #login-naver a.anmelden {
    width: 100px; /*90px*/
    height: 30px; /*40px*/
    display: block;
    background-color: #2A7290;
    padding: 8px 0 0 0;
    text-align: center;
    text-transform: uppercase;
    float: right;

    font-size:20px; /*25px*/
    text-decoration: none;
    color: #fff;
}

section#search #login-naver a.anmelden {
    width: 70px;
    height: 30px;
    font-size:20px;
    padding: 10px 0 0 0;
}

section#search #login a.login-right, section#search #login-naver a.login-right {
	float: right;
	text-decoration: none;
	margin: 45px -83px 0 0;
	color: #2A7290;
}

section#search #login-naver a.login-right {
	margin: 45px -69px 0 0;
}


/*MASK*/
section#search #mask-header-placeholder {
    width: 100%;
	max-width: 370px;
    height: 1px;
    float: left;
}

@media screen and (max-width: 700px) {
    section#search #mask-header-placeholder {
        visibility: hidden;
        height: 0px;
    }
}

section#search #mask {
    width: 100%;
    float: left;
    margin-left: -370px;
    font-size:20px;
    color: #2A7290;
}

section#search #mask .fluid {margin-left: 370px;}

@media screen and (max-width: 700px) {
    section#search #mask {
        max-width: 700px;
        width: 100%;
        margin: 0px;
    }

    section#search #mask .fluid {
        margin-left: 0px;
    }
}

/* section#search #mask img {} */

section#search #mask #head {
    max-width: 610px;
    height: 82px;
    width: 100%;
    margin: 25px 0 0 0;
}

@media screen and (max-width: 700px) {
    section#search #mask #head {
        max-width: 700px;
        margin-top: -20px;
        height: 122px;
    }
}
section#search #mask #head img {margin: 0 10px 0 0;}

@media screen and (max-width: 700px) {
    section#search #mask #head img {
        visibility: hidden;
        margin: 0px;
    }
}

section#search #mask .titel-mask {
    font-size:55px;
    color: #fff;
    text-transform: uppercase;
}

@media screen and (max-width: 700px) {
    section#search #mask .titel-mask {
        text-align: center;
        clear: both;
        display: block;
        font-size: 50px;
    }
}

section#search #mask .small-titel-mask {color: #fff;}

@media screen and (max-width: 930px) {
    section#search #mask .small-titel-mask {
        margin: -12px 0 0 35px;
        display: block;
    }
}

@media screen and (max-width: 700px) {
    section#search #mask .small-titel-mask {
        text-align: center;
        display: block;
        margin: 0;
    }
}

section#search #mask #map_canvas iframe, section#search #map {
     max-width: 610px;
     width: 100%;
     height: 250px;
}

/*ERGEBNISSE*/
section#search #ausgabe-ergebnisse {
    max-width: 980px;
    width: 99%;
    margin: 0 0 0 1%;
}

section#search #ausgabe-ergebnisse .linie-block { width: 100%; float: left; margin:0;}

section#search #ausgabe-ergebnisse .linie, section#search #ausgabe-ergebnisse .linie-titel {height: 35px; float: left;}

section#search #ausgabe-ergebnisse .linie { width: 39.8%;}

section#search #ausgabe-ergebnisse .linie hr {
    border: none;
    border-top: 1px solid #fff;
}

section#search #ausgabe-ergebnisse .linie-titel {
    width: 20.4%;
    text-align: center;
    font-size: 20px;
    color: #fff;
    margin: -4px 0 0 0;
}

@media screen and (max-width: 810px) {
    section#search #ausgabe-ergebnisse .linie {width: 37%;}
    section#search #ausgabe-ergebnisse .linie-titel {width: 26%;}
}
@media screen and (max-width: 670px) {
    section#search #ausgabe-ergebnisse .linie {width: 35%;}
    section#search #ausgabe-ergebnisse .linie-titel {width: 30%;}
}
@media screen and (max-width: 590px) {
    section#search #ausgabe-ergebnisse .linie {width: 33%;}
    section#search #ausgabe-ergebnisse .linie-titel {width: 34%;}
}
@media screen and (max-width: 510px) {
    section#search #ausgabe-ergebnisse .linie {width: 30%;}
    section#search #ausgabe-ergebnisse .linie-titel {width: 40%;}
}
@media screen and (max-width: 440px) {
    section#search #ausgabe-ergebnisse .linie {width: 27%;}
    section#search #ausgabe-ergebnisse .linie-titel {width: 46%;}
}
@media screen and (max-width: 370px) {
    section#search #ausgabe-ergebnisse .linie {width: 25%;}
    section#search #ausgabe-ergebnisse .linie-titel {width: 50%;}
}
@media screen and (max-width: 340px) {
    section#search #ausgabe-ergebnisse .linie {width: 20%;}
    section#search #ausgabe-ergebnisse .linie-titel {width: 60%;}
}

section#search #ausgabe-ergebnisse .block-zeile {
    max-width: 980px;
    width: 100%;
    float: left;
    margin: 0 0 10px 0;
}

section#search #ausgabe-ergebnisse .block-zeile:last-child {margin: 0px;}

section#search #ausgabe-ergebnisse .marke, section#search #ausgabe-ergebnisse .adresse, section#search #ausgabe-ergebnisse .art, section#search #ausgabe-ergebnisse .datum, section#search #ausgabe-ergebnisse .preis, section#search #ausgabe-ergebnisse .preis_b, section#search #ausgabe-ergebnisse .distanz {min-height: 70px; float: left; font-size: 20px; color: #2A7290; margin-right: 1%}

@media screen and (max-width: 650px) {
    section#search #ausgabe-ergebnisse .marke, section#search #ausgabe-ergebnisse .adresse, section#search #ausgabe-ergebnisse .art, section#search #ausgabe-ergebnisse .datum, section#search #ausgabe-ergebnisse .preis, section#search #ausgabe-ergebnisse .preis_b, section#search #ausgabe-ergebnisse .distanz { min-height: 0px; float: none; margin-right: 0px; margin-bottom: 10px}

    section#search #ausgabe-ergebnisse .resp-hidden { display: none;}

    section#search #ausgabe-ergebnisse .resp-left { float: left; width: 80%}
}

section#search #ausgabe-ergebnisse .marke {width: 9.2%; float: left;}

@media screen and (max-width: 650px) {section#search #ausgabe-ergebnisse .marke {width: 20%; float: left;}}

section#search #ausgabe-ergebnisse .adresse { width: 37.4%}
section#search #ausgabe-ergebnisse .adresse-plus-zeile { width: 25.6%}

section#search #ausgabe-ergebnisse .art { width: 7.8%}

section#search #ausgabe-ergebnisse .datum { width: 14.8%}

section#search #ausgabe-ergebnisse .preis { width: 12.4%}

section#search #ausgabe-ergebnisse .preis_b { width: 13.4%; margin-right: 0px}

section#search #ausgabe-ergebnisse .distanz { width: 10.8%; margin-left: 1%; margin-right: 0px}

@media screen and (max-width: 650px) {
    section#search #ausgabe-ergebnisse .adresse, section#search #ausgabe-ergebnisse .art, section#search #ausgabe-ergebnisse .datum, section#search #ausgabe-ergebnisse .preis, section#search #ausgabe-ergebnisse .preis_b, section#search #ausgabe-ergebnisse .distanz { width: 99%; float: left; margin-left: 0px;}
}

section#search #ausgabe-ergebnisse #menu {
    max-width: 980px;
    width: 100%;
    float: left;
    text-align: center;
    font-size: 15px;
    color: #2C728C;
}

section#search #ausgabe-ergebnisse #menu img {margin: 0 5px -2px 5px;}

section#search #ausgabe-ergebnisse #menu .text {margin: 0 5px 0 5px;}

section#search #ausgabe-ergebnisse #info {
    max-width: 980px;
    width: 100%;
    float: left;
    margin: 25px 0 25px 0;
}

/*CONTENT*/
.hg-content {
	background-image: url(../image/hg-content.png);
	width: 100%;
    min-height: 660px;
	float: left;
}
section#content {
    width: 100%;
    /*min-height: 100%;*/
    /*background-image: url(../image/hg-content.png);*/
    padding: 0 0 20px 0; /*bottom 20px*/
    float: left;
}

/*
section#content.suche-height, section#content.suche-kanton-height {min-height: 65%;}
section#content.suche-umgebung-height {min-height: 65%;}
section#content.benzinrechner-height {min-height: 65%;}

@media screen and (max-width: 800px) {
    section#content.suche-height, section#content.suche-kanton-height {min-height: 75%;}
    section#content.suche-umgebung-height {min-height: 82%;}
    section#content.benzinrechner-height {min-height: 87%;}
}
@media screen and (max-width: 650px) {
    section#content.suche-height, section#content.suche-kanton-height {min-height: 95%;}
    section#content.suche-umgebung-height {min-height: 89%;}
    section#content.benzinrechner-height {min-height: 97%;}
}
*/


#first-line {
	width: 100%;
	float: left;
}

section#vergleich, section#aktionen, section#werbung1, section#werbung2 {
    margin: 68px 0 0 0;
    display: block;
}

/*WERBUNG 01 + 02*/
section#werbung1 { width: 44.9%; float: right; text-align: right;}

section#werbung2 { width: 53.1%; padding-right: 2%; float: left;}

@media screen and (max-width: 700px) {
    section#werbung1, section#werbung2 {
        float: left;
        margin-left: 2%;
		width: 96%;
		padding: 0;
    }
}
@media screen and (max-width: 420px) {
    section#werbung1, section#werbung2 {
        /*
        display:none;
        visibility:hidden;
        */
        float: left;
        margin-left: 2%;
		width: 96%;
		padding: 0;
        
    }
}

/*WERBUNG oben*/
section#werbungoben { 
    background-color: #e64710;
    display: inline-block;
    position: sticky;
    /* float: left; */
    top:0;
    width:100%;
    z-index: 4; 
}
/*WERBUNG oben img 1*/
section#werbungobenimg1 { 
    display: inline-block;
    position: relative;
    /* float: left; */
    top:0;
    width:100%;
    z-index: 1; 
}
/*WERBUNG oben img 2*/
section#werbungobenimg2 { 
    display:none;
    position: relative;
    float: left;
    top: 0;
    width:100%;
    z-index: 1; 
}

/*VERGLEICH*/
section#vergleich {    width: 55.1%; float: left;}

@media screen and (max-width: 990px) {
    section#vergleich {
        width: 53.1%;
        margin: 68px 1% 0 1%;
    }
}

@media screen and (max-width: 700px) {
    section#vergleich {
        clear: both;
        max-width: 700px;
        width: 98%;
    }
}

section#vergleich h2 {margin: 0 0 5px 0;}

section#vergleich h3 a {
    color: #FFF;
    text-decoration: none;
}

section#vergleich h3 .sorte {font-size: 23px;}

@media screen and (max-width: 700px) {section#vergleich h3 .sorte {font-size: 20px;}}

section#vergleich h3 .datum {
    font-size: 15px;
    float: left;
}

/*AKTIONEN*/
section#aktionen {
    width: 44.9%;
    min-height: 550px;
    float: right;
}

@media screen and (max-width: 990px) {
    section#aktionen {
        width: 43.9%;
        margin-right: 1%;
    }
}

@media screen and (max-width: 700px) {
    section#aktionen {
        clear: both;
        max-width: 700px;
        width: 98%;
        margin-left: 1%;
        margin-top: 80px;
        min-height: 0px;
    }
}

section#aktionen h3 a {
    color: #FFF;
    text-decoration: none;
}

section#aktionen article {margin: 0 0 35px 0;}

section#aktionen article .anbieter {font-size:30px; text-transform: uppercase;}

@media screen and (max-width: 700px) {section#aktionen article .anbieter {font-size: 25px;}}

section#aktionen article .zeitraum {font-size:15px;}

#aktion1 {display:block; visibility:visible;}
#aktion2 {display:none; visibility:hidden;}
#aktion3 {display:none; visibility:hidden;}
#aktion4 {display:none; visibility:hidden;}
#aktion5 {display:none; visibility:hidden;}
#aktion6 {display:none; visibility:hidden;}

/*CHART*/
section#chart {
    max-width: 980px;
    width: 100%;
    float: left;
    margin: 80px 0 0 0;
}

@media screen and (max-width: 990px) {
    section#chart {
        margin-left: 2%;
        width: 96%;
    }
}

/*css for chartbox*/
section#chart .line {
    width: 49%;
    float: left;
    margin: 0 1% 1% 0;
}

@media screen and (max-width: 500px) { section#chart .line {width: 100%;}}

/*css for chartbox end*/

/*NEWS*/
section#news {
    max-width: 980px;
    width: 100%;
    float: left;
    margin: 80px 0 0 0;
    min-height: 400px;
}

@media screen and (max-width: 990px) {
    section#news {
        margin-left: 1%;
        width: 98%;
    }
}

@media screen and (max-width: 700px) {section#news {min-height: 0px;}}

section#news article {margin: 0 0 25px 0;}

section#news article a {
    color: #FFF;
    text-decoration: none;
}

section#news article .datum {font-size:15px;}

#article1 {display:block; visibility:visible;min-height: 128px;}
#article2 {display:none; visibility:hidden;min-height: 128px;}
#article3 {display:none; visibility:hidden;min-height: 128px;}
#article4 {display:none; visibility:hidden;min-height: 128px;}
#article5 {display:none; visibility:hidden;min-height: 128px;}
#article6 {display:none; visibility:hidden;min-height: 128px;}
#article7 {display:none; visibility:hidden;min-height: 128px;}
#article8 {display:none; visibility:hidden;min-height: 128px;}
#article9 {display:none; visibility:hidden;min-height: 128px;}
#article10 {display:none; visibility:hidden;min-height: 128px;}
#article11 {display:none; visibility:hidden;min-height: 128px;}
#article12 {display:none; visibility:hidden;min-height: 128px;}
#article13 {display:none; visibility:hidden;min-height: 128px;}
#article14 {display:none; visibility:hidden;min-height: 128px;}
#article15 {display:none; visibility:hidden;min-height: 128px;}
#article16 {display:none; visibility:hidden;min-height: 128px;}
#article17 {display:none; visibility:hidden;min-height: 128px;}
#article18 {display:none; visibility:hidden;min-height: 128px;}
#article19 {display:none; visibility:hidden;min-height: 128px;}
#article20 {display:none; visibility:hidden;min-height: 128px;}
#article21 {display:none; visibility:hidden;min-height: 128px;}
#article22 {display:none; visibility:hidden;min-height: 128px;}
#article23 {display:none; visibility:hidden;min-height: 128px;}
#article24 {display:none; visibility:hidden;min-height: 128px;}
#warticle1 {display:block; visibility:visible;min-height: 128px;}
#warticle2 {display:none; visibility:hidden;min-height: 128px;}
#warticle3 {display:none; visibility:hidden;min-height: 128px;}
#warticle4 {display:none; visibility:hidden;min-height: 128px;}
#warticle5 {display:none; visibility:hidden;min-height: 128px;}
#warticle6 {display:none; visibility:hidden;min-height: 128px;}
#warticle7 {display:none; visibility:hidden;min-height: 128px;}
#warticle8 {display:none; visibility:hidden;min-height: 128px;}
#warticle9 {display:none; visibility:hidden;min-height: 128px;}
#warticle10 {display:none; visibility:hidden;min-height: 128px;}
#narticle1 {display:block; visibility:visible;min-height: 128px;}
#narticle2 {display:none; visibility:hidden;min-height: 128px;}
#narticle3 {display:none; visibility:hidden;min-height: 128px;}
#narticle4 {display:none; visibility:hidden;min-height: 128px;}
#narticle5 {display:none; visibility:hidden;min-height: 128px;}
#narticle6 {display:none; visibility:hidden;min-height: 128px;}
#narticle7 {display:none; visibility:hidden;min-height: 128px;}
#narticle8 {display:none; visibility:hidden;min-height: 128px;}
#narticle9 {display:none; visibility:hidden;min-height: 128px;}
#narticle10 {display:none; visibility:hidden;min-height: 128px;}

/*detail*/
section#Detail #mask #map_canvas iframe, section#Detail #map {
     max-width: 980px;
     width: 100%;
     height: 250px;
}

section#Detail #content1 {
    float: none;
    width: 100%;
    height: 100px; /* 100%;800px; */
    /*margin: 0 10% 0 10%;*/
    /*background-color: #558888;*/
    margin: 20px 0 0 0; /*fe neu*/
}

section#Detail .pics img { /*ohne img*/
    float: left;
    width: 6%;
    margin-right: 2%; /*left*/
}

section#Detail .pictures {
    width: 100%;
    height: auto;
}






/*Detail Ergebnisse*/
section#Detail #ausgabe-ergebnisse .block-zeile {
    max-width: 980px;
    width: 100%;
    float: left;
    margin: 0 0 10px 0;
}
section#Detail #ausgabe-ergebnisse .block-zeile:last-child {margin: 0px;}

section#Detail #ausgabe-ergebnisse .art, section#Detail #ausgabe-ergebnisse .preis, section#Detail #ausgabe-ergebnisse .origin, section#Detail #ausgabe-ergebnisse .datum, section#Detail #ausgabe-ergebnisse .genau, section#Detail #ausgabe-ergebnisse .preis_b {min-height: 70px; float: left; font-size: 20px; color: #2A7290; margin-right: 1%; text-align: left;}

@media screen and (max-width: 650px) {
    section#Detail #ausgabe-ergebnisse .art, section#Detail #ausgabe-ergebnisse .preis, section#Detail #ausgabe-ergebnisse .origin, section#Detail #ausgabe-ergebnisse .datum, section#Detail #ausgabe-ergebnisse .genau, section#Detail #ausgabe-ergebnisse .preis_b { min-height: 0px; float: none; margin-right: 0px; margin-bottom: 10px}

    section#Detail #ausgabe-ergebnisse .resp-hidden { display: none;}

    section#Detail #ausgabe-ergebnisse .resp-left { float: left; width: 100%}
}

section#Detail #ausgabe-ergebnisse .art { width: 10%; float: left;} /*1. spalte*/

@media screen and (max-width: 650px) {section#Detail #ausgabe-ergebnisse .art {width: 39%; float: left;}}

section#Detail #ausgabe-ergebnisse .preis { width: 15.6%} /*2. spalte*/

section#Detail #ausgabe-ergebnisse .origin { width: 15.6%} /*3. spalte*/

section#Detail #ausgabe-ergebnisse .datum { width: 15.6%} /*4. spalte*/

section#Detail #ausgabe-ergebnisse .genau { width: 21.2%} /*5. spalte*/

section#Detail #ausgabe-ergebnisse .preis_b { width: 15.6%; margin-right: 0px} /*6. spalte*/


@media screen and (max-width: 650px) {
    section#Detail #ausgabe-ergebnisse .preis, section#Detail #ausgabe-ergebnisse .origin, section#Detail #ausgabe-ergebnisse .datum, section#Detail #ausgabe-ergebnisse .genau, section#Detail #ausgabe-ergebnisse .preis_b { width: 61%; float: right; margin-left: 0px;}
}
/*Detail Ergebnisse ENDE*/





/*aendern max Breite*/
section#aendern {
    max-width: 710px;
}
/*Aendern ERGEBNISSE*/
section#aendern #ausgabe-ergebnisse {
    max-width: 980px;
    width: 99%;
    margin: 0 0 0 1%;
}

section#aendern #ausgabe-ergebnisse .linie-block { width: 100%; float: left; margin:0;}

section#aendern #ausgabe-ergebnisse .linie {height: 35px; float: left;}

section#aendern #ausgabe-ergebnisse .linie { width: 39.8%;}

section#aendern #ausgabe-ergebnisse .linie hr {
    border: none;
    border-top: 1px solid #fff;
}

section#aendern #ausgabe-ergebnisse .linie-titel {
    width: 20.4%;
    text-align: center;
    font-size: 20px;
    color: #fff;
    margin: -4px 0 0 0;
}

@media screen and (max-width: 810px) {
    section#aendern #ausgabe-ergebnisse .linie {width: 37%;}
    section#aendern #ausgabe-ergebnisse .linie-titel {width: 26%;}
}
@media screen and (max-width: 670px) {
    section#aendern #ausgabe-ergebnisse .linie {width: 35%;}
    section#aendern #ausgabe-ergebnisse .linie-titel {width: 30%;}
}
@media screen and (max-width: 590px) {
    section#aendern #ausgabe-ergebnisse .linie {width: 33%;}
    section#aendern #ausgabe-ergebnisse .linie-titel {width: 34%;}
}
@media screen and (max-width: 510px) {
    section#aendern #ausgabe-ergebnisse .linie {width: 30%;}
    section#aendern #ausgabe-ergebnisse .linie-titel {width: 40%;}
}
@media screen and (max-width: 440px) {
    section#aendern #ausgabe-ergebnisse .linie {width: 27%;}
    section#aendern #ausgabe-ergebnisse .linie-titel {width: 46%;}
}
@media screen and (max-width: 370px) {
    section#aendern #ausgabe-ergebnisse .linie {width: 25%;}
    section#aendern #ausgabe-ergebnisse .linie-titel {width: 50%;}
}
@media screen and (max-width: 340px) {
    section#aendern #ausgabe-ergebnisse .linie {width: 20%;}
    section#aendern #ausgabe-ergebnisse .linie-titel {width: 60%;}
}

section#aendern #ausgabe-ergebnisse .block-zeile {
    max-width: 980px;
    width: 100%;
    float: left;
    margin: 0 0 10px 0;
}

section#aendern #ausgabe-ergebnisse .block-zeile:last-child {margin: 0px;}

section#aendern #ausgabe-ergebnisse .marke, section#aendern #ausgabe-ergebnisse .adresse, section#aendern #ausgabe-ergebnisse .active, section#aendern #ausgabe-ergebnisse .art, section#aendern #ausgabe-ergebnisse .datum, section#aendern #ausgabe-ergebnisse .preis, section#aendern #ausgabe-ergebnisse .preis_b, section#aendern #ausgabe-ergebnisse .distanz {min-height: 70px; float: left; font-size: 20px; color: #2A7290; margin-right: 1%}

@media screen and (max-width: 650px) {
    section#aendern #ausgabe-ergebnisse .marke, section#aendern #ausgabe-ergebnisse .adresse, section#aendern #ausgabe-ergebnisse .active, section#aendern #ausgabe-ergebnisse .art, section#aendern #ausgabe-ergebnisse .datum, section#aendern #ausgabe-ergebnisse .preis, section#aendern #ausgabe-ergebnisse .preis_b, section#aendern #ausgabe-ergebnisse .distanz { min-height: 0px; float: none; margin-right: 0px; margin-bottom: 10px}

    section#aendern #ausgabe-ergebnisse .resp-hidden { display: none;}

    section#aendern #ausgabe-ergebnisse .resp-left { float: left; width: 80%}
}

section#aendern #ausgabe-ergebnisse .marke {width: 9.2%; float: left;}

@media screen and (max-width: 650px) {section#aendern #ausgabe-ergebnisse .marke {width: 20%; float: left;}}

section#aendern #ausgabe-ergebnisse .adresse { width: 33.4%}
section#aendern #ausgabe-ergebnisse .adresse-plus-zeile { width: 21.6%}

section#aendern #ausgabe-ergebnisse .active { width: 4%}

section#aendern #ausgabe-ergebnisse .art { width: 7.8%}

section#aendern #ausgabe-ergebnisse .datum { width: 14.8%}

section#aendern #ausgabe-ergebnisse .preis { width: 12.4%}

section#aendern #ausgabe-ergebnisse .preis_b { width: 13.4%; margin-right: 0px}

section#aendern #ausgabe-ergebnisse .distanz { width: 10.8%; margin-left: 1%; margin-right: 0px}

@media screen and (max-width: 650px) {
    section#aendern #ausgabe-ergebnisse .adresse, section#aendern #ausgabe-ergebnisse .art, section#aendern #ausgabe-ergebnisse .datum, section#aendern #ausgabe-ergebnisse .preis, section#aendern #ausgabe-ergebnisse .preis_b, section#aendern #ausgabe-ergebnisse .distanz { width: 99%; float: left; margin-left: 0px;}
}

section#aendern #ausgabe-ergebnisse #menu {
    max-width: 980px;
    width: 100%;
    float: left;
    text-align: center;
    font-size: 15px;
    color: #2C728C;
}

section#aendern #ausgabe-ergebnisse #menu img {margin: 0 5px -2px 5px;}

section#aendern #ausgabe-ergebnisse #menu .text {margin: 0 5px 0 5px;}

section#aendern #ausgabe-ergebnisse #info {
    max-width: 980px;
    width: 100%;
    float: left;
    margin: 25px 0 25px 0;
}


/*APP*/
section#app {
    max-width: 980px;
    width: 100%;
    float: left;
    margin: 55px 0 0 0;
}

@media screen and (max-width: 990px) {
    section#app {
        margin-left: 1%;
        width: 98%;
    }
}

section#app article h2 {font-size:20px;}

@media screen and (max-width: 990px) {section#app article h2 {font-size: 18px;}}

section#app img {
    float: left;
}

@media screen and (max-width: 630px) {
    section#app img.logo {
        visibility: hidden;
    }
    section#app img {
        max-width: 464px; width:100%
    }
}

/*UNTERSEITEN*/
.unterseiten {margin: 68px 0 0 0;}

@media screen and (max-width: 990px) {.unterseiten {margin-left: 1%;}}

.unterseiten ul {margin: 20px 0 0 20px;}
.unterseiten li {margin: 0 0 10px 0;}

.unterseiten a {
    text-decoration: none;
    color: #000000;
}
.unterseiten a:hover {color: #fff;}

.unterseiten hr {
    border: 0;
    color: #2A7290;
    background-color: #2A7290;
    height: 1px;
    margin: 50px 0 20px 0;
}

.unterseiten p {margin: 0 0 20px 0;}

.unterseiten strong {
    font-family: 'franchiseregular', Arial, Helvetica, sans-serif;
    font-weight:normal;
    font-size: 30px;
}


/*FOOTER*/

footer {
    width: 100%;
    background-image: url(../image/hg-footer.png);

    position: relative;
    height: 120px;
    clear:both;
}

@media screen and (max-width: 800px) {
    footer {
        /* margin-top: -170px; negative value of footer height */
        height: 170px;
    }
}

@media screen and (max-width: 650px) {
    footer {
        /* margin-top: -390px; negative value of footer height */
        height: 390px;
    }
}

footer #left, footer #right {margin: 20px 0 0 0;}

/*LEFT*/
footer #left {
    width: 100%;
    margin-right: -610px;
    float: left;
}

@media screen and (max-width: 990px) {
    footer #left {
        width: 99%;
        margin-left: 1%;
    }
}

footer #left .fluid {margin-right: 610px;}

@media screen and (max-width: 800px) {
    footer #left {
        max-width: 370px;
        margin: 20px 0 0 1%;
    }
    footer #left .fluid {
        margin: 0;
    }
}

/*RIGHT*/
footer #right {
    max-width: 610px;
    width: 100%;
    float: left;
}

@media screen and (max-width: 990px) {footer #right {max-width: 600px;}}

@media screen and (max-width: 800px) {
    footer #right {
        margin-left: 1%;
        width: 99%;
    }
}

footer .titel {
    font-size:30px;
    color: #2A7290;
}

footer .sozial {
    margin: 0 0 0 10px;
}

@media screen and (max-width: 700px) {footer .titel {font-size:25px;}}

footer img {margin: 10px 0 0 0;}

footer nav ul {
    list-style-type: none;
    text-align: justify;
    margin: -13px 0 20px 0;
}

@media screen and (min-width: 650px) {
    footer nav li:last-of-type::after { content: ''; padding-left: 100%; display: inline-block; }
    footer nav li { list-style: none; display: inline; }
}

footer nav li a {
    font-size:20px;
    color: #2A7290;
    text-decoration: none;
}

footer nav li a.fix { color: #43B6E5;}

@media screen and (max-width: 700px) {footer nav li a {font-size:18px;}}

@media screen and (max-width: 650px) {footer nav li {margin: 5px 0 0 0;}}

footer a.site {
    font-size:15px;
    text-decoration: none;
    color: #2A7290;
    margin: 0 20px 0 0;
    display: block;
    float: left;
}

/* FORM CSS*/
input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="date"], input[type="tel"], input[type="url"], textarea, select {
    font-family:'sertigregular',Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size:25px;
    background-color:#fff;
    border: 0px;
    /* Textfarbe inaktiv */
    color: #2A7290;
    /*max-width: 605px;*/
    width: 99%;
    height: 50px;
    margin: 0 0 10px 0;
    padding: 0 0 0 1%;
}

@media screen and (max-width: 990px) {input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="date"], input[type="tel"], input[type="url"], textarea, select {width: 99%;}}

@media screen and (max-width: 700px) {input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="date"], input[type="tel"], input[type="url"], textarea, select {max-width: 700px;}
}

/*select arrow*/
section#search select, .unterseiten select, .unterseiten select:hover {
    background: transparent;
    /* -webkit-appearance: none;
    -moz-appearance: none; */
    max-width: 710px;
    width: 105%;
    margin: 0;
}

section#search .styled-select, .unterseiten .styled-select {
    overflow: hidden;
    background: url(../image/select-arrow.png) no-repeat right #fff;
    margin: 0 0 10px 0;
}

section#search .select-three {
    max-width: 610px;
    width: 100%;
    height: 60px;
}

section#search select.small {width: 216px;}

section#search div.small {
    width: 32.1%;
    float: left;
    margin: 0 1.8% 10px 0;
}

section#search div.right {margin: 0px;}
/*select arrow end*/

input[type="text"]:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="date"]:hover, input[type="tel"]:hover, input[type="url"]:hover, textarea:hover, select:hover {
    background-color:#fff;
    border: 0px;
    color:#A9D0CC;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="date"]:hover, input[type="tel"]:hover, input[type="url"]:hover, textarea:focus, select:focus {
    background-color:#fff;
    border: 0px;
    color:#2A7290;
}

/* ::-webkit-input-placeholder { color:#F3EDC3; }
::-moz-placeholder { color:#F3EDC3; }
:-ms-input-placeholder { color:#F3EDC3; }
input:-moz-placeholder { color:#F3EDC3; } */

/* 
neue farbe bfdcd9 (hellblau)

*/

::-webkit-input-placeholder { color:#a7bdbc; }
::-moz-placeholder { color:#a7bdbc; } /* firefox 19+ */
:-ms-input-placeholder { color:#a7bdbc; } /* ie */
input:-moz-placeholder { color:#a7bdbc; }

input[type="submit"] {
    border: 0px;
    background-color: #fff;
    /*width: 170px;*/
    height: 40px;
    margin-bottom: 25px;
    font-family:'sertigregular',Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size:25px;
    text-transform: uppercase;
    color: #2C728D;
    background: url(../image/submit-search.png) no-repeat right #fff;
    line-height: none;
    padding: 3px 50px 0 10px;
}

input[type="submit"].enter {background: url(../image/submit-enter.png) no-repeat right #fff;}

@media screen and (max-width: 700px) {input[type="submit"] {font-size: 20px;}}

input[type="submit"]:active {
    position:relative;
    top:1px;
}

/*NAVER MASTER*/
/*FE*/
.naver .naver-handle {
    width: 70px;
    height: 35px;
    display: block;
    background-color: #2A7290;
    padding: 5px 0 0 0;
    text-align: center;
    text-transform: uppercase;
    clear: both;

    margin: 0 0 10px 38%;
}
@media screen and (max-width: 620px) {.naver .naver-handle {margin-left: 36%;}}
@media screen and (max-width: 520px) {.naver .naver-handle {margin-left: 34%;}}
@media screen and (max-width: 440px) {.naver .naver-handle {margin-left: 32%;}}
@media screen and (max-width: 395px) {.naver .naver-handle {margin-left: 30%;}}
@media screen and (max-width: 370px) {.naver .naver-handle {margin-left: 27%;}}
@media screen and (max-width: 315px) {.naver .naver-handle {margin-left: 24%;}}
/*FE END*/

.naver .naver-handle {
    color: #333;
    cursor: pointer;
    display: none;
    font-size: 14px;
    height: 35px;
    line-height: 28px;
    text-transform: uppercase;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.naver .naver-handle:before { background: url(../image/fs-naver-icon.png) no-repeat center; content: ''; display: block; float: left; height: 35px; /*margin: 7px 10px 0 0;*/ width: 70px; }
.naver .naver-wrapper { height: auto; }
.naver .naver-container:after { clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden; }

@media screen and (min-width: 700px) {.naver .naver-wrapper { height: auto !important; }}

@media screen and (max-width: 700px) {
    /* Mobile Only */
    .naver.active .naver-handle { display: block; }
    .naver.active .naver-wrapper { height: 0px; overflow: hidden; }

    /* Animated - Experimental! Performs poorly on mobile */
    .naver.animated .naver-wrapper {
        -webkit-transition: height 0.2s ease-out;
        -moz-transition: height 0.2s ease-out;
        -ms-transition: height 0.2s ease-out;
        -o-transition: height 0.2s ease-out;
        transition: height 0.2s ease-out;
    }
    .naver.animated .naver-container {
        opacity: 0;
        -webkit-transition: opacity 0.2s ease-out;
        -moz-transition: opacity 0.2s ease-out;
        -ms-transition: opacity 0.2s ease-out;
        -o-transition: opacity 0.2s ease-out;
        transition: opacity 0.2s ease-out;
    }
    .naver.animated.open .naver-container { opacity: 1; }
}

#vorschlag {
 position: absolute;
 background-color: #fff;
 border: 1px solid #888;
 overflow: hidden;
}
#vorschlag ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
}
#vorschlag ul li {cursor: pointer;}
#vorschlag ul li.selected {background-color: #ffb;}

section#aendern .styledRadio, .styledCheckbox {
	margin: 0 0 -10px 0 ;
}
section#aendern label {
			line-height: 43px;
			font-size: 20px;
			vertical-align: 14px;
			padding-right: 20px;
		}

#remeber {
    position:relative;
    top:-15px;
    left:0px;
}
#remeber .styledRadio, .styledCheckbox {
	margin: 0 0 0 0 ; 
}
#remeber label {
            position:relative;
            top:-40px;
            left:60px;
			line-height: 43px;
			font-size: 20px;
			vertical-align: 0px;
			padding-right: 0px;
		}

section#infoneu input {
    width: 30%;
}

section#infoneu label {
	width: 60%;
}
section#infoneu #txt {
    margin: 15px 0 0 0;
    width: 10%;
    float: left;
}

section#infoneu input[type="reset"] {
    border: 0px;
    background-color: #fff;
    /*width: 170px;*/
    height: 40px;
    margin-bottom: 25px;
    font-family:'sertigregular',Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size:25px;
    text-transform: uppercase;
    color: #2C728D;
    background: url(../image/submit-search.png) no-repeat right #fff;
    line-height: none;
    padding: 3px 50px 0 10px;
}

section#infoneu input[type="reset"].enter {background: url(../image/submit-enter.png) no-repeat right #fff;}

@media screen and (max-width: 700px) {section#infoneu input[type="reset"] {font-size: 20px;}}

section#infoneu input[type="reset"]:active {
    position:relative;
    top:1px;
}

section#verlauf input {
    width: 30%;
}

section#verlauf label {
	width: 60%;
}
section#verlauf #txt {
    margin: 15px 0 0 0;
    width: 10%;
    float: left;
}

section#verlauf input[type="reset"] {
    border: 0px;
    background-color: #fff;
    /*width: 170px;*/
    height: 40px;
    margin-bottom: 25px;
    font-family:'sertigregular',Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size:25px;
    text-transform: uppercase;
    color: #2C728D;
    background: url(../image/submit-search.png) no-repeat right #fff;
    line-height: none;
    padding: 3px 50px 0 10px;
}

section#verlauf input[type="reset"].enter {background: url(../image/submit-enter.png) no-repeat right #fff;}

@media screen and (max-width: 700px) {section#verlauf input[type="reset"] {font-size: 20px;}}

section#verlauf input[type="reset"]:active {
    position:relative;
    top:1px;
}

.nowrap {
    white-space: nowrap;
}

.tooltip {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }