/*---- Startbedingungen in der kleinen Ansicht ----*/

@media only screen
{

/* die Grundschrift wird fuer diese Seite formatiert */
html
{
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 100%;
/* Verhindert das Huepfen einer seite, wenn ein scrollbalken dazu kommt */
overflow-y: scroll;
}

/* Alle Elemente der Seite sollen diese Schriftfarbe haben*/
*
{
color: #636363;
} 

*, *:before, *:after
{
/* die Seite wird auf border-box umgestellt (inkl. bugfixes fuer aeltere Browser) */
/* Alle Elemente der Seite werden auf border-box umgestellt */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

div#Container
{
/* der container - und somit die Seite - werden mittig zum Browserfenster ausgerichtet */
margin: 0 auto 0 auto;
/* oben zum Browserfenster etwas Abstand, damit das Logo nicht am Browserfenster haengt*/
padding-top: 0.625rem; /* 10px */
background-image: url(hess-sanitaer-heizung-blechnerei-bretten-img-allgemein/pinselstrich.jpg);
background-repeat: no-repeat;
/* der Pinselstich am Fussende wird rechts unten gestartet */
background-position: right bottom;
/* auto: das Bild passt sich - in seiner Originalgroesse - der breite des Containers an */
/* die bereiche links werden abgeschnitten, die nicht mehr hineinpassen */
-webkit-background-size: auto;
-moz-background-size: auto;
-o-background-size: auto;  
background-size: auto;
/*der Container hoert bei 950px Breite auf zu wachsen, egal wie gross ich das Browserfenster noch ziehe */
/* unter dieser groesse passt sich der Container dem Browserfenster an */
max-width: 950px;
/* die Hoehe des Containers entspricht der Browserfensterhoehe (damit Endet der Fuss immer exakt unten am Browserrand) */
height: 100%;
}

/*---- Das Logo im Kopf der Seite ----*/

div.Logo
{
text-align: center;
margin-bottom: 2rem; /* 32px */
}

div.Logo img
{
/* die breite ist hier ausnahmsweise in px, da dies auch auf einem 320px-Display noch ok ist */
width: 200px;
/* die Hoehe des Logobildes ist proportional zur Breite */
height: auto;
}


/*---- Die Impressum-Navigation im Kopf der Seite ----*/

div.ImpressumNav
{
text-align: center;
margin-bottom: 1rem; /* 16px */
}

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

div.ImpressumNav li
{
/* die listen-Elemente werden nebeneinandergestellt. li sind block-elemente, 
die normalerweise untereinander angeordnet werden. Mit inline-block werden sie zu inline-Elementen,
die nebeneinander angeordnet werden. durch -block behalten sie jedoch die block-Eigenschaften
(zuweisung von hoehen, breiten, usw.). Will man inline-block wieder rueckgaengig machen */
/* (also alles wieder untereinander) macht man das mit display:block */
display: inline-block;
padding: 0;
margin: 0;
}

.ImpressumNav li a
{
font-size: 1rem; /* 16px */
text-decoration: none;
}

.ImpressumNav li a:hover
{
padding-bottom: 0.25rem; /* 4px */
border-bottom: 0.3125rem solid #d3d2d2; /* 5px */
}

/* das li in der Mitte (2.li) der Nav bekommt links und recht einen Abstand */
.ImpressumNav li:nth-child(2)
{
padding-left: 0.375rem; /* 6px */
padding-right: 0.1875rem; /* 3px */
}

.ImpressumNav li:nth-child(3)
{
padding-left: 0.1875rem; /* 3px */
padding-right: 0.375rem; /* 6px */
}

/*  */
.ImpressumNav li a.Aktiv
{
font-weight: bold;
padding-bottom: 0.25rem; /* 4px */
border-bottom: 0.3125rem solid #d3d2d2; /* 5px */
}


/*---- Die Hauptnavigation fuer kleine Bildschirme ----*/

#nav
{
/* der Container nav bestimmt die Ausrichtung */
text-align: center;
/* Am Ausklapp-Button wird die erste Navigationsebene ausgerichtet */
/* und mit z-index ueber dem seiteninhalt platziert */
position: relative;
margin-bottom: 1rem; /* 16px */
}

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

#nav > a
{
/* Alle a-Elemente unmittelbar in #nav (Auf-, Zu-Knopf) werden unsichtbar und aus dem Objektfluss herausgenommen */
/* die darunterstehenden, sichtbaren Objekte auf der Seite rutschen in die Luecke nach */
display: none;
}

/* Der Auf- und Zu-Knopf (a:first-of-type = auf, a:last-of-type = zu)*/
/* solange man nicht auf den Knopf drueckt (:not:target) sieht man den auf-Knopf, der da ist a:first-of-type */
/* der erste von a innerhalb von Container #nav */
/* wenn man auf den Knopf drueckt (nav:target) sieht man den zu-Knopf */
/* der letzte von a innerhalb von Container #nav */
#nav:not(:target) > a:first-of-type, #nav:target > a:last-of-type
{
/* a wird zum block-Element und somit treibt es ueber die gesamte breite des browser-Fensters aus. */
/* Ausserdem kann man a nun mit Angaben versehen (paddings, Hintergrund, usw.) */
display:block;
/* ein Verlaufhintergrund */
background: #999999; /* Old browsers */
background: -moz-linear-gradient(top, #999999 0%, #666666 48%, #666666 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(48%,#666666), color-stop(100%,#666666)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #999999 0%,#666666 48%,#666666 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #999999 0%,#666666 48%,#666666 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #999999 0%,#666666 48%,#666666 100%); /* IE10+ */
background: linear-gradient(to bottom, #999999 0%,#666666 48%,#666666 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#666666',GradientType=0 ); /* IE6-9 */

color: #ffffff;
font-weight: bold;
font-size: 1rem; /* 16px */
text-decoration: none;
padding-top: 0.625rem; /* 10px */
padding-bottom: 0.625rem;
}

/* Pfeil hinter Schrift Auf- und Zu-Knopf */
a.Auf:after
{
/* Pfeil unten 25bc, Pfeil oben 25b2, Pfeil links 25c0, Pfeil rechts 25b6 */
content: " \25bc";
font-size: 0.875rem;
}

a.Zu:after
{
/* Pfeil unten 25bc, Pfeil oben 25b2, Pfeil links 25c0, Pfeil rechts 25b6 */
content: " \25b2";
font-size: 0.875rem;
}

/* Erste Navigationsebene (alle ul, die unmittelbar in nav enthalten sind) */
/* wenn ul in einem div-tag, der in nav ist, enthalten ist, wird der Befehl nicht angewandt */
#nav > ul
{
height: auto;
/* Alle ul-Elemente unmittelbar in #nav (Navigation) werden unsichtbar und aus dem Objektfluss herausgenommen */
/* die darunterstehenden, sichtbaren Objekte auf der Seite rutschen in die Luecke nach */
display: none;
position: absolute;
left: 0;
right: 0;
background: #ffffff;
}

/* wenn der auf-Knopf (ist mit #nav gekennzeichnet) gedrueckt wird */
/* sollen alle umittelbar in nav enthaltenen ul erscheinen als block (untereinander) */
/* und auf die hoechste Sichtebene gestellt werden (z-index 999) */
#nav:target > ul
{
/* normalerweise ist ul von sich aus schon ein block-Element und muss nicht noch extra so deklariert werden */
/* Aber da es vorher unsichtbar war (display:none) muss es als block-Element wieder sichtbar gemacht werden */
display: block;
z-index: 999;
}

/* alle li, die unmittelbar in ul sind, das unmittelbar in #nav ist bekommen eine breite */
#nav > ul > li
{
width: 100%;
}

#nav ul li a
{
/* hier gibt es die allgemeinen Angaben zu a. Diese werden spaeter individuell ueberschrieben oder ergaenzt */
/* display: block laesst das inline-Element a ueber die ganze groesse von li austreiben */
display: block;
color: #ffffff;
text-decoration: none;
font-weight: bold;
padding-top: 0.625rem; /* 10px */
padding-bottom: 0.625rem;
}

/* die Hauptnavigationspunkte werden - zusaetzlich zu den allgemeinen a-Anweisungen - noch einmal individuell eingefaerbt */
/* Achtung!!!! */
/* Das Ausfaerben - spaeter bei der grossen Ansicht - muss auch in den Klassen erfolgen */
/* Umfaerben nur in li hat keine Auswirkung, da die Klasse hoeher steht, als das allgemeine li */
/* Fazit: gibt man einen Befehl innerhalb einer Klasse, laesst sich dieser Befehl auch nur innerhalb einer Klasse rueckgaengig machen */
#nav li.Sanitaer a {background: #8298b1;}
#nav li.Blechnerei a {background: #e2701a;}
#nav li.Heizung a {background: #e0aa0f;}
#nav li.Systemtechnik a {background: #b4d800;}
#nav li.Uns a {background: #d3d2d2;}
#nav li.Kontakt a {background: #d3d2d2;}

/* die Unternavigationspunkte werden - zusaetzlich zu den allgemeinen a-Anweisungen - noch einmal individuell eingefaerbt  */
#nav li.Sanitaer ul li a {display: block; background: #ffffff; color: #8298b1; border-bottom: 0.07rem solid #8298b1;} /* 1px */
#nav li.Blechnerei ul li a {display: block; background: #ffffff; color: #e2701a; border-bottom: 0.07rem solid #e2701a;}
#nav li.Heizung ul li a {display: block; background: #ffffff; color: #e0aa0f; border-bottom: 0.07rem solid #e0aa0f;}
#nav li.Systemtechnik ul li a {display: block; background: #ffffff; color: #b4d800; border-bottom: 0.07rem solid #b4d800;}
#nav li.Uns a {border-bottom: 1px solid #ffffff;}


/*---- Die Seitennavigation ----*/

ul.SeitennavigationSanitaer, ul.SeitennavigationBlechnerei, ul.SeitennavigationHeizung, ul.SeitennavigationSystemtechnik
{
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
margin-bottom: 1.3125rem;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
overflow: hidden;
}

ul.SeitennavigationSanitaer
{
background: #8298b1;
}

ul.SeitennavigationBlechnerei
{
background: #e2701a;
}

ul.SeitennavigationHeizung
{
background: #e0aa0f;
}

ul.SeitennavigationSystemtechnik
{
background: #b4d800;
}

ul.SeitennavigationSanitaer li, ul.SeitennavigationBlechnerei li, ul.SeitennavigationHeizung li, ul.SeitennavigationSystemtechnik li
{
display: inline-block;
}

ul.SeitennavigationSanitaer li a, ul.SeitennavigationBlechnerei li a, ul.SeitennavigationHeizung li a, ul.SeitennavigationSystemtechnik li a
{
display: block;
font-size: 1rem; /* 16px */
color: #ffffff;
text-align: center;
text-decoration: none;
font-weight: bold;
padding: 0.625rem; 0.625rem; 0.625rem; 0.625rem; /* 10px */
}

ul.SeitennavigationSanitaer li a:hover, ul.SeitennavigationBlechnerei li a:hover, ul.SeitennavigationHeizung li a:hover, ul.SeitennavigationSystemtechnik li a:hover
{
color: #004186;
}

ul.SeitennavigationSanitaer li a::before, ul.SeitennavigationBlechnerei li a::before, ul.SeitennavigationHeizung li a::before, ul.SeitennavigationSystemtechnik li a::before
{
content: " \25b6";
font-size: 0.625rem; /* 10px */
padding-right: 0.625rem; /* 10px */
/* zum Positionieren des Pfeils, falls er zu tief oder zu hoch sitzt */
position: relative;
top: -0.125rem; /* 2px */
}


/*---- Das Titelbild ----*/

div.Titelbild
{
background-repeat: no-repeat;
background-position: right bottom;
/* cover heisst: das Bild wird so gross wie moeglich dargestellt */
/*(beginnend rechts unten). Das Bild vergroessert sich und verkleinert sich proportional. */
/* der Rest wird abgeschnitten. */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;  
background-size: cover;
/* Das Titelbild ist so Breit wie der Container. Dieser ist - bis 950px - so breit wie das Browserfenster */
width: 100%; 
/* height:0 ist wichtig, da sonst padding-bottom nicht vollstaendig fuer die Hoehe zustaendig ist. */ 
height: 0;
/* dadurch wird der div halb so gross wie seine Breite, 
obwohl kein Inhalt darin ist. */
padding-bottom: 50%;
}


div.Titelbild h1
{
float: right;
width: 90%;
text-align: right;
font-size: 1rem; /* 16px */
line-height: 1.25rem; /* 20px */
font-weight: bold; 
color: #ffffff;
padding: 0;
padding-right: 0.625rem; /* 10px */
padding-top: 7%;
margin: 0;
}


/*---- Der Inhalt ----*/

#Inhalt
{
padding-left: 0.625rem; /* 10px */
padding-right: 0.625rem;
}

#Inhalt h2
{ 
font-family: "Times New Roman", Times, serif; 
font-size: 1.625rem; /* 26px */ 
font-style: normal; 
line-height: 1.875rem; /* 30px */
font-weight: normal;  
}

#Inhalt h3
{ 
font-size: 1.0625rem; /* 17px */
line-height: 1.25rem; /* 20px */ 
font-weight: bold;  
}

#Inhalt h2.UeberschriftUeberUns, #Inhalt h3.UeberschriftUeberUns,
#Inhalt h2.UeberschriftAktuelles, #Inhalt h3.UeberschriftAktuelles
{

}

#Inhalt h2.UeberschriftSanitaer, #Inhalt h3.UeberschriftSanitaer, 
#Badplanung, #Kueche, #MedizinLabore, #Regenwassernutzung
{
color: #8298b1;
}

#Inhalt h2.UeberschriftBlechnerei, #Inhalt h3.UeberschriftBlechnerei, 
#Dachrinnen, #Kamine, #Daecher, #Fassaden
{
color: #e2701a;
}

#Inhalt h2.UeberschriftHeizung, #Inhalt h3.UeberschriftHeizung, 
#Gasheizung, #HolzPellets, #Solar, #Oelheizung, #Waermepumpe
{
color: #e0aa0f;
}

#Inhalt h2.UeberschriftSystemtechnik, #Inhalt h3.UeberschriftSystemtechnik, 
#Sanitaerinstallation, #Zuwasserinstallation, #Wasseraufbereitung, #Abwasserinstallation,
#Gasleitungsanlagen, #Heizungsinstallation
{
color: #b4d800;
}

/* Die allgemeinen Angaben zu Fliesstext p */
#Inhalt p
{ 
/* fuer die Lesbarkeit (auch auf kleinen Bildschirmen) ist im Fliesstext 14px mit 1.5x line-height am besten */
font-size: 0.875rem; /* 14px */ 
line-height: 1.3125rem; /* 21px = 1.5x */
font-weight: normal; 
}

div.InhaltLinks p
{
padding: 0;
margin: 0;
}

div.InhaltRechts p
{
margin-top: 1.625rem; /* 26px */
border-top: 1px solid #8298b1;
padding-top: 1.0625rem; /* 17px */
padding-left: 2.5rem; /* 40px */ 
background-image: url(hess-sanitaer-heizung-blechnerei-bretten-img-allgemein/lupe.jpg);
background-repeat: no-repeat;
background-position: left top; 
}

div.InhaltRechts p.Text, div.InhaltRechts p.TextUnterGalerie, div.InhaltRechts p.TextUnterHinterlegung
{
/* Hier muessen wir manche Dinge wieder rueckgaengig machen, die wir in InhaltRechts p gemacht haben */
margin-top: 1.625rem; /* 26px */
border-top: none;
padding-top: 0;
padding-left: 0; 
background-image: none;
}

div.InhaltRechts p.TextUnterGalerie, div.InhaltLinks p.ZumSeitenanfang
{
padding: 10px 10px 10px 10px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

div.InhaltLinks p.ZumSeitenanfangSanitaer, div.InhaltRechts p.TextUnterGalerieSanitaer
{
background: #ecf0f3;
}

div.InhaltLinks p.ZumSeitenanfangBlechnerei, div.InhaltRechts p.TextUnterGalerieBlechnerei
{
background: #fbeadd;
}

div.InhaltLinks p.ZumSeitenanfangHeizung, div.InhaltRechts p.TextUnterGalerieHeizung
{
background: #faf2db;
}

div.InhaltLinks p.ZumSeitenanfangSystemtechnik, div.InhaltRechts p.TextUnterGalerieSystemtechnik
{
background: #f4f9d9;
}

div.InhaltLinks p.ZumSeitenanfangUeberUns, div.InhaltRechts p.TextUnterGalerieUeberUns,
div.InhaltLinks p.ZumSeitenanfangAktuelles, div.InhaltRechts p.ZumSeitenanfangAktuelles
{
background: #ececec;
}

div.InhaltRechts p.TextUnterGalerie
{
margin-top: 3.125rem; /* 50px */
}

div.InhaltLinks ul {
margin: 0;
margin-top: 1.3125rem; /* 21px */
margin-bottom: 1.3125rem; /* 21px */
margin-left: 0.9375rem; /* 15px */
padding: 0;
}

div.InhaltLinks ul li {
text-align: left;
font-size: 0.875rem; /* 14px */ 
line-height: 1.3125rem; /* 21px = 1.5x */
font-weight: normal; 
padding: 0;
margin: 0;
}

div.InhaltLinks a, 
p.Zweispaltig a,
p.Text a
{
font-size: 0.875rem; /* 14px */ 
line-height: 1.3125rem; /* 21px = 1.5x */
font-weight: normal; 
}

div.InhaltLinks a:hover,
p.Zweispaltig a:hover,
p.Text a:hover 
{
text-decoration: none;
}
 
p.Zweispaltig img
{
display: block;
width: 100%;
}

div.popup-gallery
{
/* Mittig gesetzt fuer den inline-block */
text-align: center;
margin-top: 1.1875rem; /* 19px */
}

div.popup-gallery a
{
display: inline-block;
/* die breite von a muss min 130px sein. Da die Bilder sowieso nur 120px breit, */
/* bleibt genug Platz für den Abstand links und rechts (5px) */
/* Es gehen nun soviele Bilder nebeneinander wie bei 130px pro Container nebeneinanderpassen */
/* Der Rest umbricht in die naechste Zeile */
min-width: 130px;
padding: 0;
margin: 0;
/* Abstand zu naechsten Bildreihe genauso, wie die Breite zwischen den Bildern */
/* Muss fuer die verschiedenen Viewports hin und wieder angepasst werden (siehe weiter unten) */
margin-bottom: 3%;
}

div.popup-gallery a img
{
display: block;
padding: 0;
margin: 0 auto 0 auto;
}


/*---- Der Fuss ----*/

#Fuss
{
margin-top: 6rem;
padding-right: 0.625rem; 
padding-bottom: 0.7rem; 
}

#Fuss ul
{
list-style-type: none;
/* Die li werden in der Mitte des Fuss platziert */
text-align: center;
padding: 0;
margin: 0;
}

#Fuss li
{
/* die listen-Elemente werden nebeneinandergestellt. li sind block-elemente, 
die normalerweise untereinander angeordnet werden. Mit inline-block werden sie zu inline-Elementen,
die nebeneinander angeordnet werden. durch -block behalten sie jedoch die block-Eigenschaften
(zuweisung von hoehen, breiten, usw.) */
display: inline-block;
}

#Fuss li:nth-child(1)
{
/* Da das erste li (Axel Hess) 100% Breite bekommt, bleibt kein Platz fuer den Rest */
/* Sie umbrechen auf die naechste Zeile */
width: 100%;
}

/* Die restlichen Elemente brauchen keine Breite. Da sie auch inline sind, sind sie (ohne breitenangaben) */
/* so breit wie ihr Inhalt */
#Fuss li:nth-child(2)
{
padding-left: 0.375rem;  /* 6px */
padding-right: 0.375rem;  /* 6px */
}

#Fuss li:nth-child(3)
{
padding-left: 0.375rem;  /* 6px */
padding-right: 0.375rem;  /* 6px */
}

#Fuss li:nth-child(4)
{
padding-left: 0.375rem;  /* 6px */
padding-right: 0.375rem;  /* 6px */
}

#Fuss li:nth-child(5)
{
padding-left: 0.375rem;  /* 6px */
padding-right: 0.375rem;  /* 6px */
}

#Fuss li, #Fuss li a 
{
text-align: center;
font-size: 0.625rem; /* 10px */ 
font-weight: bold; 
color: #004186;
padding: 0;
margin: 0;
}

#Fuss li a:hover
{
text-decoration: none;
}


} /* Ende media Startbedingungen kleine Fenster */


/*----------------------------------------------------------*/




/* Die Breakpointbreite wird in em angegeben. Dadurch ist es auch aelteren Browsern moeglich */
/* bei verkleinertem Browserfenster die naechst niedrigeren Breakpoints auszufuehren */
/* sonst wuerden hier nach wie vor die Anweisungen fuer grosse Bildschirme greifen */




/*---- Breakpoint Schrift----*/

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

div.Titelbild h1
{
padding-top: 18%;
}

} /* Ende media */




/*---- Breakpoint Schrift, KopfNav----*/

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

/* das li in der Mitte (2.li) der Nav bekommt links und recht einen Abstand */
.ImpressumNav li:nth-child(2)
{
padding-left: 1.25rem; /* 20px */
padding-right: 0.625rem; /* 10px */
}

.ImpressumNav li:nth-child(3)
{
padding-left: 0.625rem; /* 10px */
padding-right: 1.25rem; /* 20px */
}

div.Titelbild h1
{
font-size: 1.125rem; /* 18px */
line-height: 1.5625rem; /* 25px */ 
padding-top: 15%;
}

} /* Ende media */




/*---- Breakpoint Schrift----*/

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

/*---- Der Inhalt ----*/

#Inhalt p.Zweispaltig
{
/* zweispaltiger Satz. Wird von IE9 nicht unterstuetzt. */
/* Wichtig fuer die Lesbarkeit: Zeilenbreite sollte 75 bis 80 Zeichen nicht ueberschreiten */
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
/* Spaltenzwischenraum */
-webkit-column-gap: 30px;
-moz-column-gap: 30px;
column-gap: 30px;
}

div.InhaltLinks p
{
/* zweispaltiger Satz. Wird von IE9 nicht unterstuetzt. */
/* Wichtig fuer die Lesbarkeit: Zeilenbreite sollte 75 bis 80 Zeichen nicht ueberschreiten */
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
/* Spaltenzwischenraum */
-webkit-column-gap: 30px;
-moz-column-gap: 30px;
column-gap: 30px;
}

} /* Ende media */




/*---- Breakpoint Schrift----*/

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

div.Titelbild h1
{
font-size: 1.25rem; /* 20px */
line-height: 2rem; /* 32px */ 
padding-top: 15%;
}

} /* Ende media */




/*---- Breakpoint Schrift Bild----*/

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

div.Titelbild
{
padding-bottom: 33.684211%;
}

div.Titelbild h1
{
font-size: 1rem; /* 16px */
line-height: 1.25rem; /* 20px */ 
padding-top: 7%;
}


/*---- Der Inhalt ----*/

div.popup-gallery a
{
margin-bottom: 2.3%;
}

} /* Ende media */





/*---- Breakpoint Schrift und Fuss ----*/

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

div.Titelbild h1
{
font-size: 1.125rem; /* 18px */
line-height: 1.5625rem; /* 25px */ 
padding-top: 6%;
}


/*---- Der Inhalt ----*/

div.popup-gallery a
{
margin-bottom: 1.8%;
}


/*---- Der Fuss ----*/

#Fuss ul
{
list-style-type: none;
/* Jetzt wird das Copyright links platziert */
text-align: left;
padding: 0;
margin: 0;
}

#Fuss li:nth-child(1)
{
/* Die Breite vom ersten li (Axel Hess) wird wieder auf Normal gesetzt */
/* Dadurch wird dieser li wieder so breit wie sein Inhalt. Da nun wieder Platz ist, rutschen die anderen li zurueck in die erste Zeile */
width: auto;
padding-left: 0.625rem; /* 10px */ 
padding-right: 0.375rem;  /* 6px */
}

} /* Ende media */




/*----------------------------------------------------------*/


/*---- media fuer grosse Bildschirme ab 750px ----*/

@media only screen and (min-width: 46.875em)
{

/*---- Das Logo im Kopf der Seite ----*/

div.Logo
{
float: left;
}

div.Logo img
{
display: block;
width: 200px;
/* die Hoehe des Logobildes ist proportional zur Breite */
height: auto;
margin-left: 2.0625rem; /* 33px */
}


/*---- Die Impressum-Navigation im Kopf der Seite ----*/

div.ImpressumNav
{
float: right;
}

div.ImpressumNav ul
{
margin-top: 2.5rem; /* 40px */
margin-right: 1.25rem; /* 20px */
}

.ImpressumNav li a
{
font-size: 0.875rem; /* 14px */
}


/*---- Die Hauptnavigation fuer grosse Bildschirme ----*/

/* Der Auf- und Zu-Knopf wird versteckt */

#nav
{
/* die Navigation wird rechts positioniert */
text-align: right;
padding-right: 1.25rem; /* 20px */
}

#nav:not(:target) > a:first-of-type, #nav:target > a:last-of-type
{
/* die beiden Smartphone-Navigations-Button verschwinden */
display:none;
}

#nav li
{
/* die Positionierung der spaetere Ausklappmenue wird an diesen li ausgerichtet */
position: relative;
/* das ist wichtig, damit zu langer nav-Text nicht umbricht. */
/* dadurch bleibt alles in einer Zeile */
white-space: nowrap;
}

/* Erste Navigationsebene */
#nav > ul
{
/* mittels static binde ich das ul wieder in den normalen Objektfluss ein */
/* dadurch wird die Navigation nicht von den nachfolgenden Seiten-Elementen ueberdeckt */
position: static;
display: block;
}

#nav > ul > li
{
/* durch inline-block wird li nebeneinander positioniert und - im gegensatz zu float left - */
/* greift hier die Anweisung in #nav text-align right. */
display: inline-block;
/* Die Eintraege erhalten alle die selbe Breite. Sie orientiert sich nach dem kleinsten Viewport */
/* fuer die breite Navigation (750px) */
width: 14%;
border: none;
}

#nav ul li a
{
display: block;
text-align: left;
color: #004186;
font-size: 0.875rem; /* 14px */ 
line-height: 0.875rem; /* 14px */ 
font-weight: bold;
padding-top: 0.3125rem; /* 5px */
padding-bottom: 0.5rem; /* 8px */
text-decoration: none;
}

/* Zweite Navigationsebene */
#nav li ul
{
display: none;
position: absolute;
/* das Ausklappmenue positioniert sich direkt unter der oberen Ebene */
top: 100%;
}

#nav li:hover ul
{
display: block;
/* Die Positionierung des Ausklappmenues erfolgt ueber allen anderen Seitenelementen */
z-index: 999;
/* hier passt sich li der Laenge des Textes an */
width: auto;
margin-left: -0.3125rem;
}

#nav ul li ul li a
{
display: block;
width: 100%;
border-left: 0.3125rem solid #ffffff;
border-right: 0.3125rem solid #ffffff;
padding-top: 0.625rem; /* 10px */
padding-bottom: 0.625rem;
padding-left: 0.3125rem; /* 5px */ 
}

/* die Hauptnavigationspunkte werden eingefaerbt */
#nav li.Sanitaer a {background: #ffffff; border-bottom: 0.3125rem solid #8298b1;margin-left:0.3125rem;} /* 5px */
#nav li.Blechnerei a {background: #ffffff;border-bottom: 0.3125rem solid #e2701a;margin-left:0.3125rem;}
#nav li.Heizung a {background: #ffffff; border-bottom: 0.3125rem solid #e0aa0f;margin-left:0.3125rem;}
#nav li.Systemtechnik a {background: #ffffff; border-bottom: 0.3125rem solid #b4d800;margin-left:0.3125rem;}
#nav li.Uns a {background: #ffffff; border-bottom: 0.3125rem solid #d3d2d2;margin-left:0.3125rem;}
#nav li.Kontakt a {background: #ffffff; border-bottom: 0.3125rem solid #d3d2d2;margin-left:0.3125rem;}

/* Wenn man ueber die erste ebene faehrt */
#nav li.Sanitaer a:hover {color: #8298b1;}
#nav li.Blechnerei a:hover {color: #e2701a;}
#nav li.Heizung a:hover {color: #e0aa0f;}
#nav li.Systemtechnik a:hover {color: #b4d800;}
#nav li.Uns a:hover {color: #d3d2d2;}
#nav li.Kontakt a:hover {color: #d3d2d2;}


/* die Unternavigationspunkte werden eingefaerbt */
#nav li.Sanitaer ul li a {color: #ffffff; background: #8298b1;border-bottom:none;}
#nav li.Blechnerei ul li a {color: #ffffff; background: #e2701a;border-bottom:none;}
#nav li.Heizung ul li a {color: #ffffff; background: #e0aa0f;border-bottom:none;}
#nav li.Systemtechnik ul li a {color: #ffffff; background: #b4d800;border-bottom:none;}

/* dicke, weisse Striche oben und unten in der Sub-Nav */
#nav li.Sanitaer ul li a.Oben {border-top: 0.3125rem solid #ffffff;}
#nav li.Blechnerei ul li a.Oben {border-top: 0.3125rem solid #ffffff;}
#nav li.Heizung ul li a.Oben {border-top: 0.3125rem solid #ffffff;}
#nav li.Systemtechnik ul li a.Oben {border-top: 0.3125rem solid #ffffff;}
#nav li.Sanitaer ul li a.Unten {border-bottom: 0.3125rem solid #ffffff;}
#nav li.Blechnerei ul li a.Unten {border-bottom: 0.3125rem solid #ffffff;}
#nav li.Heizung ul li a.Unten {border-bottom: 0.3125rem solid #ffffff;}
#nav li.Systemtechnik ul li a.Unten {border-bottom: 0.3125rem solid #ffffff;}

/* Wenn man ueber die zweite ebene faehrt */
#nav li.Sanitaer ul li a:hover {background: #ffffff;}
#nav li.Blechnerei ul li a:hover {background: #ffffff;}
#nav li.Heizung ul li a:hover {background: #ffffff;}
#nav li.Systemtechnik ul li a:hover {background: #ffffff;}

/* Die Schrift von ebene eins soll markiert bleiben wenn mann in die Unterebene skrollt. */
/* Das erleichtert die Orientierung. */

#nav ul > li.Sanitaer:hover > a {
color: #8298b1;
}

#nav ul > li.Blechnerei:hover > a {
color: #e2701a;
}

#nav ul > li.Heizung:hover > a {
color: #e0aa0f;
}

#nav ul > li.Systemtechnik:hover > a {
color: #b4d800;
}


/*---- Das Titelbild ----*/

div.Titelbild h1
{
font-size: 1.4375rem; /* 23px */
line-height: 2.1875rem; /* 35px */ 
padding-right: 1.25rem; /* 20px */
}


/*---- Der Inhalt ----*/

#Inhalt
{
padding-left: 3.3125rem; /* 53px */
padding-right: 1.25rem; /* 20px */
}

#Inhalt h3
{ 
margin-bottom: 3rem; /* 48px */
}

/* Die allgemeinen Angaben zu Fliesstext p */
#Inhalt p
{ 
/* fuer die Lesbarkeit (auch auf kleinen Bildschirmen) ist im Fliesstext 14px mit 1.5x line-height am besten */
font-size: 0.875rem; /* 14px */ 
line-height: 1.3125rem; /* 21px*/
font-weight: normal; 
}

#Inhalt p.Zweispaltig
{
/* zweispaltiger Satz. Wird von IE9 nicht unterstuetzt. */
/* Wichtig fuer die Lesbarkeit: Zeilenbreite sollte 75 bis 80 Zeichen nicht ueberschreiten */
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
/* Spaltenzwischenraum */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}

div.InhaltLinks ul li {
font-size: 0.875rem; /* 14px */ 
line-height: 1.3125rem; /* 21px*/
font-weight: normal; 
}

div.InhaltLinks a,
p.Zweispaltig a,
p.Text a 
{
font-size: 0.875rem; /* 14px */ 
line-height: 1.3125rem; /* 21px*/
font-weight: normal; 
}

div.InhaltLinks
{
float: left;
width: 47.7272727272%
}

div.InhaltLinks p
{
/* Die zweispaltigkeit in den kleineren Ansichten muss wieder rueckgaengig gemacht werden */
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
/* Spaltenzwischenraum */
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
}

div.InhaltRechts
{
float: right;
width: 47.7272727272%
}

div.InhaltRechts p
{
margin-top: 0.5rem; /* 8px */
}

div.InhaltRechts p.Text
{
margin-top: 0;
}


/*---- Der Fuss ----*/

#Fuss li:nth-child(1)
{
padding-left: 3.3125rem; /* 53px */
}


} /* Ende media */


/*----------------------------------------------------------*/




/*---- Breakpoint Schrift----*/

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

div.Titelbild h1
{
padding-top: 13%;
}

/*---- Der Inhalt ----*/

div.popup-gallery a
{
margin-bottom: 3%;
}

} /* Ende media */