@media only screen
{


/* -------------------- html body -------------------------------- */

/*overflow-y: scroll erzeugt am rechten Rand des Bildschirms einen*/
/*Scrollbalken. Dieser ist immer sichtbar. Dies verhindert, dass bei*/
/*kleinen Seiten der Scrollbalken nicht da ist und das Bild springt.*/

html {
    background-color:#fff;
    overflow-y: scroll;
}


/*line-height:0; damit es bei Textblöcken mit Hintergrund keinen 1px-Zwischenraumblitzer gibt*/
/*hier wird die Grundschrift festgelegt*/

body {
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 100.01%;
    color: #666666;
    
    line-height:0;
    
    margin: 0;
    padding: 0;
}


/*Alle Elemente werden auf border-box umgestellt, damit padding innerhalb
der angegebenen Breite bleibt und nicht dazuaddiert wird*/

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/* -------------------- Textformatierungen -------------------------------- */

/* für display inline-block müssen die übergeordneten Elemente font-size: 0; erhalten, da es sonst zu Abständen zw. den li kommt */

.Adresse, .Adresse li ul {
    font-size: 0;
}

#NavHaupt a, #FussCopy p, #NavFussRubriken a {
    font-size: 0.8125rem; /*13px*/
    line-height: 0.8125rem; /*13px*/
    color: #0960c1;
    
    margin: 0;
    padding: 0;
}

#FussCopy p {
    font-size: 0.6875rem; /*11px*/
    line-height: 0.6875rem; /*11px*/
    color: #0960c1;
    
    margin: 0;
    padding: 0;
}

h1 {
    font-weight: bold;
    font-size: 0.9375rem; /*15px*/
    line-height: 1.125rem; /*18px*/
    color: #0960c1;
    
    margin: 0;
    padding: 0;
    
    padding-bottom: 5.625rem; /*90px*/
}

h2 {
    font-weight: bold;
    font-size: 0.8125rem; /*13px*/
    line-height: 1.125rem; /*18px*/
    letter-spacing: 0.2em;
    color: #0960c1;
    
    margin: 0;
    padding: 0;
    
    margin-bottom: 1.125rem; /*18px*/
}

#StartContainerLogoKopfbilderSpruch p, #ContainerLogoKopfbilderSpruch p, .SpruchStart {
    font-weight: bold;
    font-size: 1.25rem; /*20px*/
    line-height: 1.25rem; /*20px*/
    text-align: right;
    letter-spacing: 0.2em;
    
    margin: 0;
    padding: 0;
}

.SpalteRechts article.BlauerHintergrund p {
    text-align: center;
}

.Adresse li, p, .SpalteRechts ul li {
    font-size: 0.8125rem; /*13px*/
    line-height: 1.125rem; /*18px*/
    
    margin: 0;
    padding: 0;
}

/* Schriftfarbe vererbt sich für a nicht */

#NavHaupt a, .Adresse li, .Adresse li a, .SpalteRechts article:last-of-type a {
    color: #0960c1;
}

p a {
    color: #666666;
}


span.FetteSchrift {
    font-weight: bold;
}

span.GesperrteSchrift {
    letter-spacing: 0.2em;
}

span.BlaueSchrift {
    color: #0960c1;
}

span.GrueneSchrift {
    color: #88c62b;
}

span.HellblaueSchrift {
    color: #D2E0EF;
}


/* -------------------- Navigation Grundformatierung -------------------------------- */

ul {
    list-style-type: none;
    
    margin: 0;
    padding: 0;
}


/* --------------------Die Hauptnavigation für Mobile Endgeräte-------------------------- */

#NavHaupt a.PfeilNachOben,
#NavHaupt a.PfeilNachUnten {
    display:block;
    padding-top:10px;
    padding-bottom:10px;
    text-align:center;
    background:-moz-linear-gradient(top,#0960c1 60%,#083566);
    background:-webkit-linear-gradient(top,#0960c1 60%,#083566);
    background:-o-linear-gradient(top,#0960c1 60%,#083566);
    background:-ms-linear-gradient(top,#0960c1 60%,#083566);
    background:linear-gradient(to bottom,#0960c1 60%,#083566);
    -pie-background:linear-gradient(top,#0960c1 60%,#083566);
    font-weight:normal;
    font-size: 0.875rem; /*14px*/
    line-height: 0.875rem; /*14px*/
    letter-spacing: 0.1em;
    text-decoration:none;
    color:#fff;
}

/* Der Hintergrund des PfeilNachOben erhält eine andere Verlaufsfarbe */

#NavHaupt a.PfeilNachOben {
    background:-moz-linear-gradient(top,#88c62b 60%,#659124);
    background:-webkit-linear-gradient(top,#88c62b 60%,#659124);
    background:-o-linear-gradient(top,#88c62b 60%,#659124);
    background:-ms-linear-gradient(top,#88c62b 60%,#659124);
    background:linear-gradient(to bottom,#88c62b 60%,#659124);
    -pie-background:linear-gradient(top,#88c62b 60%,#659124);
}

/*f419 ist das Dreistrich-Icon für die Navigation, f431 ist der Pfeil nach unten*/

#NavHaupt a.PfeilNachUnten::after {
    padding-left:10px;
    vertical-align:middle;
    font-size:1rem;
    line-height:1rem;
    color:#fff;
    font-family: "Genericons";
    content: "\f419 \f431";
    -webkit-font-smoothing: antialiased;
}

/*f432 ist der Pfeil nach oben*/

#NavHaupt a.PfeilNachOben::after {
    padding-left:10px;
    vertical-align:middle;
    font-size:1rem;
    line-height:1rem;
    color:#fff;
    font-family: "Genericons";
    content: "\f419 \f432";
    -webkit-font-smoothing: antialiased;
}

/*Zuerst ist Pfeil nach oben und die Navigation unsichtbar*/

#NavHaupt a.PfeilNachOben,
#NavHaupt ul {
    display:none;
}

/*Pfeil nach oben und Navigation erscheinen beim Klick auf Pfeil nach unten*/

#NavHaupt:target a.PfeilNachOben,
#NavHaupt:target ul {
    display:block;
}

/*Pfeil nach unten verschwindet*/

#NavHaupt:target a.PfeilNachUnten {
    display:none;
}

/* Die Navigationspunkte */

#NavHaupt ul {
    -webkit-box-shadow:0 3px 5px rgba(68,68,68,.3);
    box-shadow:0 5px 10px rgba(68,68,68,.3);
    position: relative;
    z-index: 1000;
}

#NavHaupt ul li ul {
    -webkit-box-shadow:none;
    box-shadow:none;
}

#NavHaupt ul li {
    border-bottom:1px solid #88c62b;
    background-color: #D2E0EF;
}

#NavHaupt ul li:nth-of-type(3)  {
    border-bottom:1px solid #ffffff;
    background-color: #88c62b;
}

#NavHaupt ul li:nth-of-type(3) a  {
    color: #ffffff;
}

#NavHaupt ul li:nth-of-type(3), #NavHaupt ul li ul li:last-of-type  {
    border-bottom:none;
}

#NavHaupt ul li ul li, #NavHaupt ul li ul li:nth-of-type(3) {
    border-bottom:1px solid #88c62b;
    background-color: #DCF9B1;
}

#NavHaupt ul li a {
    display:block;
    text-align:center;
    letter-spacing: 0.1em;
    padding: 20px 10px 20px 10px;
}

#NavHaupt ul li:nth-of-type(3) ul li a {
    color: #0960c1;
    letter-spacing: 0;
}


/* -------------------- Link Grundformatierung -------------------------------- */

a {
    text-decoration: none;
}

.Adresse a, p a, #NavFussRubriken a {
    text-decoration: underline;
}

a:hover {
    text-decoration: underline;
}

#NavHaupt a:hover, .Adresse a:hover, p a:hover, #NavFussRubriken a:hover {
    text-decoration: none;
}


/* -------------------- Der Rahmen-Aufbau der Seite Mobil ----------------------------------------------------------- */

#StartContainerLogoKopfbilderSpruch, #ContainerLogoKopfbilderSpruch, #ContainerInhalt, #ContainerCopyFussNav {
    max-width: 960px;
    margin: 0 auto 0 auto;
}

/* ---------Kopfbereich*/

header, footer {
    overflow: hidden;
}

#ContainerHaerteltLogo {
    position: relative;
    margin: 15px 0 50px 0;
}

#ContainerHaerteltLogo img {
    display: block;
    border: none;
    width: 250px;
    height: auto;
    
    margin: 0;
    padding: 0;
    
    margin: 0 auto 0 auto;
}

.HaerteltLogoUnterstrich {    
    display: none;
}

#StartContainerKopfBildleiste, #ContainerKopfBildleiste {
    position: relative;
}

#StartContainerKopfBildleiste ul, #ContainerKopfBildleiste ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;  
}

#StartContainerKopfBildleiste ul li, #ContainerKopfBildleiste ul li {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1; 

    max-width: 85px;
    margin-left: 5px;
}

#StartContainerKopfBildleiste ul li:first-of-type, #ContainerKopfBildleiste ul li:first-of-type {
    margin-left: 0;
}

/* damit das Bild nur so gross wird wie das umfassende li. */
/* Ansonsten werden die Bilder in Originalgröße angezeigt und das ist hier zu groß */
#StartContainerKopfBildleiste ul li img, #ContainerKopfBildleiste ul li img {
    width: 100%;
    height: auto;
}

#StartContainerKopfBildleiste img.TitelGriff {
    display: none;
}

.KopfBildleisteUnterstrich {    
    display: none;
}

/* Damit der Spruch in die nächste Zeile rutscht muss er die ganze Seitenbreite einnehmen */
#StartContainerLogoKopfbilderSpruch p, #ContainerLogoKopfbilderSpruch p {
    width: 100%;
    margin-top: 2px;
}

.StrichSichtbar {
    display: none;
}



/* ---------Inhaltsbereich*/

#ContainerInhalt {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

}

/* Die Inhalts-Spalten */

/* Linke Spalte */

.SpalteLinks {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    
    width: 100%;
    padding: 40px 0 0 0;
}

/* Die Navigation wird in der Spalte oben platziert */
/* width 100% ist wichtig, da sonst beide Spalten nebeneinander und nicht untereinander stehen würden */
.SpalteLinks article:first-of-type {   
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;

    width: 100%;
}

/* Die Zusatzinformationen und die Adresse werden in der Spalte unten platziert */
/* Das macht sich dann bemerkbar, wenn der Textinhalt in der rechten Spalte größer ist, als die Spalte links an Inhalt hat */
/* width 100% ist wichtig, da sonst beide article nebeneinander und nicht untereinander stehen würden */
.SpalteLinks article:last-of-type {   
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
    
    width: 100%;
    padding: 0 15px 0 15px;
}

.SpalteLinks article:last-of-type .Adresse {   
    display: none;
}

/* Die Ersatz-Adressangaben im Fußbereich */
/* In der mobilen Ansicht ist die Adresse sonst gleich unter der Navigation und dann kommt erst der Inhalt-Text */
/* Das würde aber den Ablauf stören. Deshalb wird die Adresse - in dieser Ansicht - in den Fuss verschoben */
/* Die Angaben sind jedoch für beide Adressblöcke gleich und werden deshalb nur einmal deklariert. */
.Adresse {   
   max-width: 280px;
}

.Adresse li ul li {   
   display: inline-block;
   margin: 0;
   padding: 0;
}

.Adresse li ul li:nth-child(2n+1) {   
   width: 20%;
}

.Adresse li ul li:nth-child(2n) {   
   width: 80%;
}


/* Start Rechte Spalte Mobil */

.SpalteRechtsStart {
    width: 100%;
    padding: 2px 0 0 0;
}

.TitelStartMobil {
    display: block;
    width: 100%;
}

.TitelStartGas, .TitelStartHeizung {
    display: none;
}

.SpruchStart {
    display: none;
}


/* Rechte Spalte */

.SpalteRechts {
    width: 100%;
    padding: 36px 15px 18px 15px;
}

.SpalteRechts article:last-of-type {
    margin-top: 54px;
}

.SpalteRechts article.BlauerHintergrund {
    background-color: #D2E0EF;
    border-radius: 5px;
    overflow: hidden;
      
    padding: 18px 15px 18px 15px;
}

.SpalteRechts article:last-of-type img {        
    display: block;
    -webkit-box-shadow:0 3px 5px rgba(68,68,68,.3);
    box-shadow:0 5px 10px rgba(68,68,68,.3);
    border: 0;
    padding: 0;
    margin: 0 auto 18px auto;
}

.SpalteRechts article:last-of-type hr {
    border: 1px solid #0960c1;
    margin-top: 50px;
    margin-bottom: 36px;
}

/* Der Abstand zw den Text-Elementen */

.SpalteRechts p, .SpalteRechts ul {    
    margin-bottom: 1.125rem; /*18px*/
}

ul.Auflistung {    
    list-style-type: circle;
    margin:0 0 18px 15px;
    padding:0;
}

ul.UnterAuflistung {    
    list-style-type: disc;
    margin:0 0 0 15px;
    padding:0;
}

ul.Auflistung li, ul.UnterAuflistung li {    
    padding: 0;
    margin-bottom: 0;
}


/* -------------------------------Fussbereich*/

/* Wird zur Flexbox, um die Reihenfolge der Elemente zu ändern */

#StartContainerCopyFussNav, #ContainerCopyFussNav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    
    padding: 50px 15px 20px 15px;
}


/* Die Fuss-Elemente */

#FussCopy {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    
    width: 100%;
    position: relative;
}

#ContainerFussNav {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    
    position: relative;
}

#NavFussRubriken {
    margin: 50px 0 36px 0;
}

#NavFussRubriken ul li {
    display: inline-block;
    padding: 0 20px 18px 0;
}

.CopyUnterstrich, .FussNavUeberstrich {
    display: none;
}


} /* Ende media Start-Smart */




/* ab min 590px */
@media only screen and (min-width: 36.875em)
{

/* --------------------Die Hauptnavigation für PC-------------------------- */

#NavHaupt a.PfeilNachOben,
#NavHaupt a.PfeilNachUnten {
    display:none;
}

/* overflow:visible ist wichtig, da sonst die Ausklappmenüs abgeschnitten werden */
#NavHaupt {
    width:100%;
    overflow:visible;
    margin:0;
    padding:0;
}

/* Die Navigationspunkte */

/* Die erste Ebene wird sichtbar */
#NavHaupt ul {
    display: block;
    -webkit-box-shadow:none;
    box-shadow:none;
    position: static;
}

/* An den li der ersten Nav-Ebene richten sich die Ausklappmenüs aus */
#NavHaupt ul li {
    position: relative;
    border-bottom:1px solid #88c62b;
    background-color: #ffffff;
}

#NavHaupt ul li a {
    text-align:left;
}

#NavHaupt ul li:nth-of-type(3)  {
    border-bottom:1px solid #88c62b;
    background-color: #ffffff;
}

/*Ausgleich für das margin beim Häkchen, damit wieder 20px Abstand vorhanden sind*/
#NavHaupt ul li:nth-of-type(3) a  {
    color: #0960c1;
    padding-bottom: 16px;
}

/*Ein Häkchen hinter den Ausklapp-Punkt*/
/*Achtung!!!!!!!!!!!*/
/*inline-block ist dringend notwendig, da die Icons möglicherweise zu tief oder zu hoch gestellt sind.*/
/*Um sie mittig zum Text zu setzen muss man mit margin verschieben. Dies geht nur, wenn das Icon ein inline-block ist.*/
#NavHaupt ul li:nth-of-type(3) a::after {
    display: inline-block;
    margin-bottom: 4px;
    padding-left:10px;
    padding-right:10px;
    vertical-align:middle;
    font-size:1rem;
    line-height: 0.8125rem; /*13px*/
    color:#0960c1;
    font-family: "FontAwesome";
    content: "\f105";
    -webkit-font-smoothing: antialiased;
}

#NavHaupt ul li:nth-of-type(3), #NavHaupt ul li ul li:last-of-type  {
    border-bottom:1px solid #88c62b;
}

/* Die zweite Ebene */
/* verschwindet */
#NavHaupt ul li ul {
    -webkit-box-shadow:0 3px 5px rgba(68,68,68,.3);
    box-shadow:0 5px 10px rgba(68,68,68,.3);
    
    top:0;
    left:100%;
    position:absolute;
    display:none;
}

/* und taucht wieder auf */
/* nowrap, damit lange Zeilen nicht umbrechen */
#NavHaupt ul li:hover ul {
    width:auto;
    display:block;
    white-space:nowrap;
    z-index: 1000;
}

/*Kein Häkchen für das Ausklappmenü*/
#NavHaupt ul li:nth-of-type(3) ul li a::after {
    content: none;
}

/*Ausgleich für die fehlenden 4px margin beim nicht vorhandenen Häkchen*/
#NavHaupt ul li:nth-of-type(3) ul li a  {
    padding-bottom: 20px;
}

#NavHaupt ul li ul li, #NavHaupt ul li ul li:nth-of-type(3) {
    border-bottom:1px solid #88c62b;
    background-color: #DCF9B1;
}

#NavHaupt ul li:nth-of-type(3) ul li a {
    color: #0960c1;
    letter-spacing: 0;
}

/* das Überfahren der Menüpunkte */

/* erste und zweite Ebene */
#NavHaupt ul li a:hover {
    background-color:#D2E0EF;
}

/* Damit beim Ausklappen des Menüs der Hauptpunkt aktiv bleibt */
#NavHaupt ul > li:hover > a {
    background-color:#D2E0EF;
}

/* -------------------- Der Rahmen-Aufbau der Seite 590 ----------------------------------------------------------- */

/* ---------Kopfbereich*/
.StrichSichtbar {
    display: block;
    width: 100%;
    height: 8px;
}

/* Der Kopfbereich wird zur flex-box 590 */
#StartContainerLogoKopfbilderSpruch, #ContainerLogoKopfbilderSpruch {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    
}

/* Der Container für das Logo bekommt eine feste Breite */
#ContainerHaerteltLogo {
    width: 320px;
    margin: 15px 0 0 0;
}

#ContainerHaerteltLogo img {
    margin: 0;
    margin-bottom: 8px;
}

.HaerteltLogoUnterstrich {
    display: block;
    width: 10000px;
    position: absolute;
    bottom: -8px;
    right: 0;
    border-bottom: 10px solid #88c62b;
    z-index: 900;
}

/* Der Container für die Bildleiste mit den 7 kleinen Bildern kommt neben den Logo-Container */
/* und füllt den Rest der Seitenbreite aus. */
/* Der Container wird nun selbst zur flex-box. flex-end platziert die Bildleiste an den unteren Rand des Containers. */
/* Somit schließt sie bündig mit dem Logo ab. */
#StartContainerKopfBildleiste, #ContainerKopfBildleiste {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}

/* Nun wird die ul zur flex-box. */
/* Der Inhalt der ul - also die Bilder - werden über die gesamte Breite der ul verteilt (space-between) */
#ContainerKopfBildleiste ul {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

#StartContainerKopfBildleiste ul {
    display: none;
}

#StartContainerKopfBildleiste { 
    position: relative;  
    background-image: url(../haertelt-gas-sanitaer-karlsruhe-bilder-allgemein/Kopf-Titel-PC.png);
    background-repeat: no-repeat;
    background-position: left bottom;
}

#StartContainerKopfBildleiste img.TitelGriff {
    display: block;
    position: absolute;
    top: 64px;
    left: 264px;
    z-index: 900;
}

/* Alle Bilder werden gleich breit (flex: 1) aber höchstens 85px */
#ContainerKopfBildleiste ul li {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;

    max-width: 85px;
    margin-left: 1%;
}

#ContainerKopfBildleiste ul li:first-of-type {
    margin-left: 0;
}

.KopfBildleisteUnterstrich {    
    display: block;
    width: 10000px;
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom: 2px solid #88c62b;
}

/* Damit der Spruch in die nächste Zeile rutscht muss er die ganze Seitenbreite einnehmen */
#ContainerLogoKopfbilderSpruch p {
    margin-top: 10px;
    margin-right: 15px;
}

#StartContainerLogoKopfbilderSpruch p {
    display: none;
}


/* ---------Inhaltsbereich 590*/

#ContainerInhalt {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* Die Inhalts-Spalten */

/* Linke Spalte */

.SpalteLinks {    
    width: 320px;
    padding: 65px 70px 0 40px;
}

.SpalteLinks article:last-of-type {   
    padding: 0;
}

/* jetzt wird der Adress-Block wieder in der linken Spalte angezeigt */
/* Der im Fussbereich wird ausgeblendet */
.SpalteLinks article:last-of-type .Adresse {   
    display: block;
    margin-top: 50px;
}

#ContainerFussNav .Adresse {   
    display: none;
}

/* Der Abstand zw Telefon und Nummer wird etwas korrigiert */
.Adresse li ul li:nth-child(2n+1) {   
   width: 30%;
}

.Adresse li ul li:nth-child(2n) {   
   width: 70%;
}


/* Rechte Spalte */

/* Die rechte Spalte kommt nun neben die linke Spalte und füllt - in der Breite - den restlichen Raum bis zum Seitenrand aus */
/* Außerdem wird die rechte Spalte nun selber zur Flexbox, um die zwei Inhaltsspalten nebeneinander zu bekommen */
.SpalteRechts {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    
    padding: 80px 15px 0 0;
    
}

/* Startseite 590----------------------------------- */

.SpalteRechtsStart {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    
    padding: 0;
    margin-top: -8px;
    
    position: relative;
    
    background-image: url(../haertelt-gas-sanitaer-karlsruhe-bilder-allgemein/Titel-Start-PC.png);
    background-repeat: no-repeat;
    background-position: left top;
    
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.SpalteRechtsStart img.TitelStartMobil {
    display: none;
}

.SpalteRechtsStart img.TitelStartGas, .SpalteRechtsStart img.TitelStartHeizung {
    display: block;
    position: absolute;
    left: -30px;
    
    -webkit-box-shadow:0 3px 5px rgba(68,68,68,.3);
    box-shadow:0 5px 10px rgba(68,68,68,.4);
}

.SpalteRechtsStart img.TitelStartGas {
    top: 250px;
}

.SpalteRechtsStart img.TitelStartHeizung {
    top: 420px;
}

.SpruchStart {
    display: inline-block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    line-height: 1.875rem; /*30px*/
    text-align: right;
    
    margin: 0;
    padding: 0;
    
    margin-right: 10px;
    
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
}


/* -------------------------------Fussbereich*/

/* Wird zur Flexbox, um die Reihenfolge der Elemente zu ändern */

#StartContainerCopyFussNav, #ContainerCopyFussNav {
    padding: 60px 0 20px 0;
}


/* Die Fuss-Elemente */

#FussCopy {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    
    width: 320px;
    padding: 0 0 0 40px;
}

#ContainerFussNav {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

#NavFussRubriken {
    margin: 35px 0 0 0;
}

#NavFussRubriken ul li {
    padding: 0 20px 18px 0;
}
 /* Die Striche im Fussbereich */
.CopyUnterstrich {
    display: block;
    width: 10000px;
    position: absolute;
    top: 17px;
    right: 0;
    border-bottom: 10px solid #0960c1;
}

.FussNavUeberstrich {
    display: block;
    width: 10000px;
    position: absolute;
    top: 25px;
    left: 0;
    border-bottom: 2px solid #0960c1;
}

} /* Ende 590 */



/* ab min 800px */
@media only screen and (min-width: 50em)
{

/* ---------Kopfbereich*/

/* Damit der Spruch in die nächste Zeile rutscht muss er die ganze Seitenbreite einnehmen */
#ContainerLogoKopfbilderSpruch p {
    margin-top: 2px;
}

/* ---------Inhaltsbereich*/

/* Linke Spalte */

.SpalteLinks {    
    padding: 0 70px 0 40px;
}

/* Rechte Spalte */

/* Die rechte Spalte kommt nun neben die linke Spalte und füllt - in der Breite - den restlichen Raum bis zum Seitenrand aus */
/* Außerdem wird die rechte Spalte nun selber zur Flexbox, um die zwei Inhaltsspalten nebeneinander zu bekommen */
.SpalteRechts {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
}

/* Die linke Inhaltsspalte */

h1 {
    width: 100%;
    
}

.SpalteRechts article:first-of-type {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 10%;
}

/* Die rechte Inhaltsspalte */
.SpalteRechts article:last-of-type {
  display: inline-block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    
    min-width: 10%;
    margin-top: 0;
    margin-left: 25px;
}

} /* Ende 800 */




/* ab min 900px */
@media only screen and (min-width: 56.25em)
{

.SpalteRechtsStart img.TitelStartGas {
    top: 300px;
}

.SpalteRechtsStart img.TitelStartHeizung {
    top: 470px;
}

} /* Ende 900 */





/*960*/
@media only screen and (min-width: 60em)
{


/* -------------------- Der Rahmen-Aufbau der Seite ----------------------------------------------------------- */

/* ---------Kopfbereich*/

/* Damit der Spruch in die nächste Zeile rutscht muss er die ganze Seitenbreite einnehmen */
#ContainerLogoKopfbilderSpruch p {
    margin-right: 0;
}




/* ---------Inhaltsbereich*/

/* Rechte Spalte */

/* Die rechte Spalte kommt nun neben die linke Spalte und füllt - in der Breite - den restlichen Raum bis zum Seitenrand aus */
/* Außerdem wird die rechte Spalte nun selber zur Flexbox, um die zwei Inhaltsspalten nebeneinander zu bekommen */
.SpalteRechts { 
    padding: 80px 0 0 0;
}

.SpruchStart {
    margin-right: 0;
}


} /* Ende media 960*/