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



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

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


video { 
  object-fit: cover; 
  width: 100%; 
  height: 50vh; 

}

<!video { 
  object-fit: cover; 
  width: 40vw; 
  height: 50vh; 
  position: fixed; 
  top: 0; 
  left: 0; 
}-->

.viewport-header { 
  position: relative; 
height: 100%; 
  text-align: center; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 

html, body {
font-family:'open_sanscondensed_light', tahoma,georgia,  arial, Verdana, Segoe, 'Open Sans',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:#7f7f7f;
}


/* ---- überschriften ----- */

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


h2 {
font-size:2.7rem;
line-height: 3.5rem;
margin-top: 1rem;
margin-bottom: 3.5rem;
letter-spacing: -.1rem;
}


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

/* ----- h2 und h3 extra ----- */

h2.gold {
font-size:2.8rem;
text-align: center;
color:darkgoldenrod;
margin-top: 0rem;
margin-bottom: 2.5rem;
letter-spacing:1px;
}

h2.extra {
margin-top: 0rem;
margin-bottom: 2.5rem;
letter-spacing:1px;
}

h3.extra {color:darkgoldenrod;
font-size:1.8rem;
line-height: 2.6rem;
margin-top: -1rem;
margin-bottom:1rem;
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 #000;
background:transparent;
}

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


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

a , label a {color:#7f7f7f;
text-decoration: underline;
cursor:pointer;
}

a:hover {color:#7f7f7f;
text-decoration: none  ;
}


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

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



/*  ----------------------------------------  */
/*   MEHR LESEN-BUTTON  */
/*  ----------------------------------------  */

/* ----- style ----- */

.button  {display:block;
margin:3rem 0 1rem 0;
text-align:left;
}

.button .mehr_lesen a {display:inline-block;
text-transform:uppercase;
font-size:1.5rem;
letter-spacing:2px;
color:#fff;
background:#1f1f1f;
border-radius:.5rem;
text-decoration:none;
padding:.5rem 3rem ;
cursor:pointer;
}

.button .mehr_lesen a:hover {color:#fff;
background:darkgoldenrod;
}

/* button 2 */

.button.btn-2 .mehr_lesen a {
color:#fff;
background:darkgoldenrod;
}

.button.btn-2 .mehr_lesen a:hover {background:goldenrod;
color:#fff;
}



/*  ----------------------------------------  */
/* LISTE-SPEZIAL  */
/*  ----------------------------------------  */

/* ----- style 1 ----- */

.liste-spez   {display:block;padding:0;}

.liste-spez ul  {text-align:left;
margin:0rem 0 0 0;
padding:0rem 0 0 2rem;
}

.liste-spez li {list-style:square;
padding:1rem 1rem 1rem 1rem;
border-bottom:1px solid #E1E0E1;}


/* ----- style 2 -  bei vorangestelltem icon (fontawesome) ----- */

.liste-spez-2 ul  {text-align:left;
margin:0rem 0 0 -1rem;
padding:0rem 0 0 2rem;
}

.liste-spez-2 li {list-style:none;
list-style-position: none; /* rückt gfls zweite zeile ein*/
text-indent:-1.5rem; /* rückt gfls zweite zeile ein */
padding:1rem 1rem 1rem 1.5rem; /* rückt gfls zweite zeile ein */
/*border-bottom:1px solid #E1E0E1; */
}

.liste-spez-2  i {transform:scale(.9);padding-right:1.5rem;color:#1f1f1f; }
.liste-spez-2 li a:hover i {color:#3f3f3f } 



/*  ----------------------------------------  */
/* attention-object mit gfls. icon, name, text und button  */
/*  ----------------------------------------  */

.attention-object {
text-align:justify;
color:#fff;
padding:1.5rem;
}

.attention {display:block;color:#fff;}

.attention.intro {
font-size:2.7rem;
letter-spacing:1px;
}

.attention.intro b {color:gold;font-weight:bold;text-transform:uppercase; }

.attention.name {
font-size:4rem;
line-height: 5rem;
letter-spacing:2px;
margin:1rem 0;
}

.attention.name b {color:goldenrod; }

.attention.text {color:#CFCFCF;font-size:1.5rem;margin:0 0 1rem 0;letter-spacing:1px; }
.attention.text2 {color:#00BF00;padding:1rem 0;letter-spacing:8px; }


/*  ----------------------------------------  */
/* mini-formular - newsletter */
/*  ----------------------------------------  */

form#form-by-onmouseover-nl-sub {width:100%; }

#form-by-onmouseover-nl-sub .box {padding:.4rem 0; }
#form-by-onmouseover-nl-sub .box:nth-child(2) {padding-top:3.2rem; }

#form-by-onmouseover-nl-sub input[type="email"] {width:100%;
height: 3rem;
padding: .2rem .5rem;
background:#fff;
border:solid 1px #cfcfcf;
border-radius: 0;
}


/* absende-button (submit) */

#form-by-onmouseover-nl-sub .btn-submit {width:100%;
height: 3rem;
font-size:1.8rem;
letter-spacing:0px;
text-transform:uppercase;
margin: 0;
padding: 0;
background:goldenrod;
color: #1f1f1f;
border-radius: 0;
border:0;
cursor:pointer;
}

/* absende-button (submit) hover */

#form-by-onmouseover-nl-sub .btn-submit:hover {
background:limegreen;color:white;
}


/* focus */

#form-by-onmouseover-nl-sub input[type="email"]:focus {
border: 2px solid goldenrod;
outline: 0;
}


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

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

.box {display:inline-block;
text-align:left;
vertical-align:top;
width:100%;
padding: 1rem 1.5rem;
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:.5rem; }

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

#gallery .bilder .box img {border-radius:0;}
#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 ---------- */

#logo .box-1_of_2 {width: 100%; }
#about .box-1_of_2 {width: 100%; }
#project .box-1_of_2 {width: 100%; }
#kontakt .box-1_of_2 {width: 100%;  }
#pics-compilation .box-1_of_2 {width: 100%; }
#fuss .box-1_of_3 {width: 100%; }

/*  ---------- formular - subscribe/newsletter ---------- */

form#form-by-onmouseover-nl-sub .box:nth-child(1) {width: 75%; }
form#form-by-onmouseover-nl-sub .box:nth-child(2) {width: 25%; }




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

header {
background:url(../videos/Auge_ol.gif);

background-repeat:no-repeat;
background-position:50% 50%;
background-size:contain;
}


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

#logo {
display:table;
width:100%;
margin:0 auto;
height:100vh;
padding:0rem 1.5rem;
background:linear-gradient(to right top,rgba(0,0,0,.8),rgba(0,0,0,.4),rgba(0,0,0,.8));
}

.logo-a  {display:table-cell;vertical-align:middle;text-align:center; }
.logo-a-inhalt  {display:block;margin:0 auto;}

#logo .box {vertical-align:middle;padding:0 }
#logo  .box-1_of_2:nth-child(2) {display:none; } /*  zweite box zunächst abgeschaltet */


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

main#inhalt {display:block;background:white;position:relative;
padding:0rem 0rem 0rem 0rem;
margin:0 auto;
}

.inhalt-a {display:block;
width:100%;
margin:0 auto;
padding:8rem 1.5rem 8rem 1.5rem;
}

/* telefonnummer  */
.telnumber  {display:inline-block;position:absolute;top:3rem;right:0;
width:auto;
background:slategray;
color:white;
letter-spacing:1px;
border-top-left-radius:2rem;
border-bottom-left-radius:2rem;
padding:.2rem 1rem .2rem 1rem;
text-align:right;
}

/*  ----------------------------------------  */
/*  about box */
/*  ----------------------------------------  */

#about .box {vertical-align:middle; }

#about .box-1_of_2:nth-child(2) {margin-top:3rem; }


/*  ----------------------------------------  */
/*  project box */
/*  ----------------------------------------  */

#project  { background:#BEBEBE;
background-image:url(../images/picture23.jpg);
background-repeat:repeat;
background-position:25% 25%;
background-size:cover;
}

#project .filter  {background:rgba(0,0,0,.5); }

#project .box {vertical-align:middle; }

#project  .box-1_of_2:nth-child(1) {display:none; } /*  erste box zunächst unsichtbar */



/*  ----------------------------------------  */
/*  pics-compilation box */
/*  ----------------------------------------  */

#pics-compilation { background:#1f1f1f;}

#pics-compilation .box {vertical-align:middle; }

#pics-compilation .box-1_of_2:nth-child(2) {display:none; } /*  zweite box zunächst unsichtbar */


/*  liste-spez-2 */

#pics-compilation .liste-spez-2 li {color:silver;border-bottom:1px solid lightblue; }

#pics-compilation .liste-spez-2 li a {color:silver;text-decoration:none; }

#pics-compilation .liste-spez-2 li a:hover {color:lightblue; }


/*  liste-spez-2 - icons */

#pics-compilation .liste-spez-2 li i {color:goldenrod; }

#pics-compilation .liste-spez-2 li span i {margin-left:2rem;color:white; }
#pics-compilation .liste-spez-2 li a:hover span i {color:limegreen; }


/*  ----------------------------------------  */
/*  kontakt box */
/*  ----------------------------------------  */

#kontakt  { background:#F5F5F5; }

#kontakt .box {vertical-align:middle; }

#kontakt  .box-1_of_2:nth-child(1) {margin-bottom:4rem; }


/*  ----------------------------------------  */
/*  box logobox */
/*  ----------------------------------------  */

#logobox  {background:#ffffff50; }

#logobox h3.extra ,
#logobox h2 {text-align:center;
}

#logobox-group {display:block;margin:0 auto;padding:1rem 0 1rem 0; }

#logobox-group .box {POSITION:relative;
background:#ffffff50;
margin:.5rem 0 5rem 0;
box-shadow:0 0 40px rgba(0,0,0,.050);
border-radius:0rem;
padding:.5rem .5rem 4.5rem .5rem  ;
text-align:center;
}

#logobox-group .box h3 {color:darkgoldenrod;
margin: .5rem .5rem 1rem .5rem;
letter-spacing:0;
text-align:center;
}

/* nur die zweite box */
#logobox-group .box:nth-child(2) h3 {color:white; }


#logobox-group img  {border-radius:0;
padding:0 0 1rem 0 ;
}


/* nur die zweite box */
#logobox-group .box:nth-child(2) {background:#1a1a1a;
color:#BEBDBE;
}


/* icons - weiter-icons */

#logobox-group span {display:block;
POSITION:absolute;z-index:0; bottom:0%;right:0%;
margin-bottom:0rem;margin-right:0rem;
}

#logobox-group span i  {text-align:center;
display:inline-block;
font-size:1.5rem;
width:3rem;height:3rem;
line-height:3rem;
color:white;
background:goldenrod;
border-radius:0rem;
font-style:normal;
cursor:pointer;
transition:all .4s ease-out;
}

#logobox-group span i:hover  {background:#1f1f1f;
color:white;
}



/*  ----------------------------------------  */
/*  box information */
/*  ----------------------------------------  */

#information  {background:#fff; }

#information h3.extra ,
#information h2 {text-align:center;
}

#information-group {display:block;margin:0 auto;padding:1rem 0 1rem 0; }

#information-group .box {POSITION:relative;
background:#ffffff50;
margin:.5rem 0 5rem 0;
box-shadow:0 0 40px rgba(0,0,0,.050);
border-radius:0rem;
padding:.5rem .5rem 4.5rem .5rem  ;
text-align:center;
}

#information-group .box h3 {color:darkgoldenrod;
margin: .5rem .5rem 1rem .5rem;
letter-spacing:0;
text-align:center;
}

/* nur die zweite box */
#information-group .box:nth-child(2) h3 {color:white; }


#information-group img  {border-radius:0;
padding:0 0 1rem 0 ;
}


/* nur die zweite box */
#information-group .box:nth-child(2) {background:#ffffff00;
color:#BEBDBE;
}

/* nur die dritte box */
#information-group .box:nth-child(3) {background:#ffffff00;
color:#BEBDBE;
}

/* icons - weiter-icons */

#information-group span {display:block;
POSITION:absolute;z-index:0; bottom:0%;right:0%;
margin-bottom:0rem;margin-right:0rem;
}

#information-group span i  {text-align:center;
display:inline-block;
font-size:1.5rem;
width:3rem;height:3rem;
line-height:3rem;
color:white;
background:goldenrod;
border-radius:0rem;
font-style:normal;
cursor:pointer;
transition:all .4s ease-out;
}

#information-group span i:hover  {background:#1f1f1f;
color:white;
}



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

footer {
margin:0 auto;
padding:0rem ;
background:#1A1A1A;
}

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

.fuss-a {display:block;
margin: 0 auto;
padding:2rem 1.5rem;
border-top-left-radius:2rem;
border-top-right-radius:2rem;
}

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


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

#fuss .box h3:after {display:block;
border-top: 1px solid orange;
width: 30px;
content: "";
margin-top: 1rem;
}



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

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

.fussmenu  ul {text-align:left;list-style: none;padding: 0;margin: 0; }
.fussmenu li { display:block;padding:0 .1rem; }
#fuss li a:hover {color:#fff;text-decoration:underline }


/* icons social media */
.fussmenu ul.social li  {display:inline-block; margin-right:1.5rem; }
.fussmenu ul.social li  i {color:goldenrod;  transition:all .3s }
.fussmenu ul.social li a:hover i {color:#fff;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%; }

.bilder .box-1_of_4  {width: 50%; }

#information-group .box {padding:2rem 2rem 3rem 2rem ; }

}


/* ==================================== ab 580 pixel ================================== */
@media (min-width: 580px) {

.logo-a-inhalt {width: 94%; }
.inhalt-a  {width: 94%; }
.fuss-a  {width:94%; }

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


/* ==================================== ab 640 pixel ================================== */
@media (min-width: 640px) {


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

}


/* ==================================== ab 760 pixel ================================== */
@media (min-width: 760px) {

html {font-size:80%; }

#logo {height:50vh; }

.logo-a-inhalt  {width: 730px; }
.inhalt-a  {width: 760px;}

.bilder .box-1_of_3  {width: 33.33%;  }

#about .box-1_of_2:nth-child(1) {width:70%; }
#about  .box-1_of_2:nth-child(2) {width:30%; margin-top:0rem; }

#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:46rem; }

.logo-a-inhalt {width: 90%; }
.inhalt-a  {width: 90%; }
.fuss-a  {width:90%; }

#logo .box-1_of_2:nth-child(2) {display:inline-block; }
#logo .box-1_of_2 {width: 50%; }

#about .box-1_of_2:nth-child(1) {padding-right:4rem; }

#project .box-1_of_2:nth-child(1) {display:inline-block; }
#project .box-1_of_2 {width: 50%; }

#kontakt .box-1_of_2 {width: 50%;  }
#kontakt .box-1_of_2:nth-child(2) {padding-left:4rem; }

#information-group {display:table;width:100%; border-spacing:1rem 1rem; table-layout:fixed;  }
#information-group .box {display:table-cell;font-size:1.4rem;     }
#information-group h3 {font-size:1.6rem; }
#information-group .box {padding:1rem 1rem 4rem 1rem ; }

#pics-compilation  .box-1_of_2 {width: 50%; }
#pics-compilation  .box-1_of_2:nth-child(2) {display:inline-block;padding-left:4rem; }


.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 JOIN COMMUNITY */
#fuss .box article:nth-child(2) {margin-top:0; }

}


/* ===================================== ab 1024 pixel ================================= */
@media (min-width: 1024px) {

pre {width:70%; }

}


/* ===================================== ab 1280 pixel ================================= */
@media (min-width: 1280px) {

.logo-a-inhalt {width: 80%;}
.inhalt-a  {width: 80%; }
.fuss-a  {width:80%; }

}


/* ===================================== ab 1400 pixel ================================= */
@media (min-width: 1400px) {

html {font-size:85%; }

}


/* ===================================== ab 1650 pixel ================================= */
@media (min-width: 1650px) {

.logo-a-inhalt {width: 1600px; }
.inhalt-a  {width: 1600px; }
.fuss-a  {width:1600px; }

}