/* = = = = = = = = = = = = = = = = = datei format.css = = = = = = = = = = = = = = = = = = = = = = = = = */

/* ############################################################ */
/* allgemein */
/* ############################################################ */

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

html, body {
font-family: 'open_sanscondensed_light',arial,helvetica,roboto,sans-serif;
font-size: 62.5%;
line-height: 1.5;
}

body {
height: 100%;
font-size: 1.8rem;
margin: 0 auto;
overflow-x: hidden;
color: #175b9f;
}

/* ---- �berschriften ----- */

h1, h2, h3, h4, h5 {
text-align: center;
font-weight: bold;
text-transform: none;
}

h2 {
color: #175b9f;
font-family: serif;
font-size: 2.8rem;
line-height: 3.5rem;
margin-top: 1rem;
margin-bottom: 3.5rem;
letter-spacing: 0rem;
}

h2:after {
display: block;
border-top: 1px solid #BE9F76;
width: 50px;
margin: 0 auto;
margin-top: 2rem;
}

h3 {
color: #175b9f;
font-size: 2.1rem;
line-height: 3rem;
margin-top: 1rem;
margin-bottom:2.5rem;
letter-spacing: -.1rem;
}

/* ----- quelltext-erkl�rungen - wenn vorhanden ----- */

pre {
white-space: pre-wrap;
position: relative;
font-size: 1.5rem;
font-family: 'open_sanscondensed_light',tahoma,georgia,arial,verdana,segoe,'open sans',helvetica,roboto,sans-serif;
padding: 0rem 1rem 2rem 1rem;
margin: 4rem auto;
text-align: center;
border: dotted 0.1rem #686868;
background: transparent;
}

pre .extra {
display: inline-block;
position: absolute;
left: -1.5rem;
top: 1.5rem; 
font-size: 1.8rem;
color: #000;
font-weight: normal;
background: #fff;
padding: 0 .5rem;
transform: rotate(-45deg);
}

/*  ----------------------------------------  */
/* allgemeine links */
/*  ----------------------------------------  */

a {
color: #175b9f;
text-decoration: underline; 
}
label a {
cursor: pointer; 
}
a:hover {
color: #03260e;
text-decoration: none;
}

/* ############################################################ */
/*  speziell*/
/* ############################################################ */

/* bilder -anpassen der gr�sse */
img {
max-width: 100%;
display: block;
margin: 0 auto;
height: auto;
border-radius: 0rem;
}

/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */
/*  GRID-SYSTEM  - f�r Bilder / Spalten */
/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */

/* ---------- boxen - grundsystem ---------- */

.box {
display: inline-block;
text-align: center;
vertical-align: top;
width: 100%;
padding: 1rem 1rem;
margin: 0 -.25rem -.25rem -.25rem; 
/* ausgleich ( minus-margin) f�r INLINE-BLOCK-WHITESPACE-BUG*/
}

.box-1_of_1 ,
.box-1_of_2 ,
.box-1_of_3,
.box-1_of_4,
.box-1_of_5 {width:100%;}


/* ---------- boxen - bilder ---------- */

.bilder {text-align:center;}
.bilder .box {padding:1rem;}
.bilder.single-pic .box {padding:0rem;}

.bilder .box-1_of_1 ,
.bilder .box-1_of_2 ,
.bilder .box-1_of_3,
.bilder .box-1_of_4 {width:100%;}

#gallery .bilder .box img {border-radius:0;}
#gallery .bilder .box {padding:.5rem;}
#gallery .bilder .box-1_of_2 {width:50%;}
#gallery .bilder .box-1_of_3 {width:33.33%;}
#gallery .bilder .box-1_of_4 {width:50%;}

/*  bei Mausber�hrung der Bilder, wenn diese verlinkt sind (z.B Lightbox) */
a:hover img {
opacity:.8;  
filter: blur(2px);
}

/*  ---------- boxen - andere ---------- */

#fuss .box-1_of_3 {width: 100%;}

/* ############################################################ */
/* bereich header */
/* ############################################################ */

header {
background: #ffeece;
padding: 2rem 0rem;
}

/* fotos auf den unterseiten */
header.primus-pic {background-image:url(../images/medium_picture1048.jpg);}
header.secundus-pic {background-image:url(../images/medium_picture301.jpg);}
header.tertius-pic {background-image:url(../images/medium_picture05.jpg);}
header.quartus-pic {background-image:url(../images/medium_picture1079.jpg);}
header.quintus-pic {background-image:url(../images/medium_picture212.jpg);}
header.sextus-pic {background-image:url(../images/medium_picture898.jpg);}

/* ############################################################ */
/* bereich logo */
/* ############################################################ */

#logo {
display: table;
width: 100%;
margin: 0 auto;
height: 10%;
padding: 2rem 1rem;
}

.text-1 {
text-align: center;
color: #175b9f;
padding: 6rem 4rem;
}
.text-2 {
color: #175b9f;
}

/* logo-object  */

#logo .logo-object {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 2rem 0rem;
}

/* ############################################################ */
/* bereich inhalt */
/* ############################################################ */

main#inhalt {
display: block;
background: #ffeece;
color: #175b9f;
padding: 0rem;
text-align: center;
}

main#inhalt .box {
text-align: center;
}

.inhalt-a {
display: inline-block;
width: 100%;
margin: 2rem 0;
padding: 2rem 1.5rem 6rem 1.5rem;
}

/* ----- bildbeschreibung ----- */

article.bildbeschreibung {
margin: 1.5rem 0;
font-size: 1.5rem;
text-align: center;
padding: 0 0rem;
font-style: italic;
}

/* ############################################################ */
/* bereich fuss */
/* ############################################################ */

footer {
margin: 0 auto;
padding: 8rem 0rem 4rem 0rem;
background: #ffeece;
}

#fuss {
display: block;
width: 100%;
margin: 0 auto;
padding: 0;
}

.fuss-a {
display: block;
margin: 0 auto;
padding: 1rem 1.5rem;
}

/* gilt nur f�r jeden zweiten article in der jeweiligen fuss box, also hier f�r FOLLOW US und SERVICE  */
#fuss .box article:nth-child(2) {margin-top:3.5rem;}

#fuss .box h3 {
text-align: center;
font-size: 1.7rem;
color: #175b9f;
letter-spacing: 2px;
font-weight: bold;
text-transform: uppercase;
padding-bottom: .5rem;
margin-top: 2rem;
margin-bottom: .5rem;
}

/*  ----------------------------------------  */
/*  die wesentlichen schriftformate f�r den gesamten footer plus fussmenu */
/*  ----------------------------------------  */

#fuss ,
#fuss a {
color: #175b9f;
text-shadow: none;
font-weight: normal;
font-size: 1.6rem;
line-height: 2.8rem;
text-decoration: none;
}

.fussmenu  ul {
text-align: center;
list-style: none;
padding: 0;
margin: 0; 
}
.fussmenu li { 
display: block;
}
#fuss li a:hover {
color: #03260e;
text-decoration: underline; 
}

/* icons kontakt */

.fussmenu ul.contact li {
display: block; 
}
.fussmenu ul.contact li i {
color: #175b9f;
font-size: 1.5rem;
margin-right: 1.2rem;
transition: all .3s; 
}
.fussmenu ul.contact li a:hover i {
color: #175b9f;
transform: rotate(360deg) 
}


/* ############################################################ */
/* M E D I A   Q U E R I E S */
/* CSS Bildschirmabfragen */
/* ############################################################ */

/* ==================================== ab 320 pixel ================================== */
@media (min-width: 320px) {
/* - hinweis -
f�r die kleinste smartphone-aufl�sung von 320 pixel ben�tigen wir KEINE bildschirmabragen (css-media queries),
denn hierf�r gilt ja automtisch der gesamte vorstehende quelltext-code  -
weil wir das template ja 'MOBILE-FIRST' angelegt haben.
*/
}

/* ==================================== ab 360 pixel ================================== */
@media (min-width: 360px) {
/* keine angabe */
}

/* ==================================== ab 480 pixel ================================== */
@media (min-width: 480px) {
html {
font-size: 70%;
}
main#inhalt .box {
text-align: center;
}
.bilder .box-1_of_4 {width: 50%;}
}

/* ==================================== ab 580 pixel ================================== */
@media (min-width: 580px) {
article.bildbeschreibung {
margin: 1.5rem 0;
font-size: 1.5rem;
text-align: center;
padding: 0 4rem;
font-style: italic;
}

.bilder .box-1_of_2 {width: 50%;}
#gallery .bilder .box-1_of_4 {width:25%;}
.fuss-a {width:94%;}
}

/* ==================================== ab 640 pixel ================================== */
@media (min-width: 640px) {
#fuss .box-1_of_3  {width: 50%;}
}

/* ==================================== ab 760 pixel ================================== */
@media (min-width: 760px) {
#logo {
height: 50vh; 
padding: 0rem 0rem; 
}
#logo .name {
font-size: 5rem;
line-height: 5rem; 
}
.logo-a {
width: 700px;
padding: 4rem .5rem; 
}
.inhalt-a {
width: 700px; 
padding: 4rem 1.5rem; 
}

.bilder .box-1_of_3 {width: 33.33%;}
#fuss , #fuss a {font-size:1.3rem;}
#fuss .box h3 {font-size:1.3rem;}
}

/* ==================================== ab 800 pixel ================================== */
@media (min-width: 800px) {
/* keine angabe */
}

/* ===================================== ab 960 pixel ================================= */
@media (min-width: 960px) {
#logo {height: 70vh;}
#logo .name {
font-size: 6rem;
line-height: 6rem; 
}

.logo-a {width: 90%;}
.inhalt-a {width: 90%;}
.fuss-a {width:90%;}
.bilder .box-1_of_4 {width: 25%;}
#fuss .box-1_of_3 {width: 33.33%;}

/* gilt nur f�r jeden zweiten article in der fuss box, also hier f�r FOLLOW US und SERVICE  */
#fuss .box article:nth-child(2) {margin-top:0;}
}

.text-1 {
text-align: center;
}
.text-2 {
padding: 6rem;
}

/* ===================================== ab 1024 pixel ================================= */
@media (min-width: 1024px) {
pre {width: 70%;}
}

/* ===================================== ab 1280 pixel ================================= */
@media (min-width: 1280px) {
.logo-a {width: 78%;}
#logo {height: 70vh;}
.inhalt-a {width: 78%;}
.fuss-a {width: 78%}
}

/* ===================================== ab 1400 pixel ================================= */
@media (min-width: 1400px) {
html {font-size: 85%;}
}

/* ===================================== ab 1650 pixel ================================= */
@media (min-width: 1650px) {
.logo-a {width: 1250px;}
.inhalt-a {width: 1250px;}
.fuss-a {width: 1250px;}
}
/* ===================================================================================== */