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



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

*, *:before, *:after {

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

html, body {
font-family: tahoma,  Verdana, Segoe, "Open Sans",helvetica, arial,roboto ,sans-serif;
font-size:62.5%;
line-height:1.5;
height: 100%;
}

body {
font-size:1.8rem;
margin: 0 auto;
background-color:#DFDFDF;
color:#2F2F2F;
margin:0rem;
}

/* überschriften */
h1, h2, h3, h4, h5 {
font-weight:normal;
color:#000;
}


h1 {
font-size:3.5rem;
line-height: 3.7rem;
margin-top: 0rem;
margin-bottom: 5.2rem;
}

h2 {text-align:center;text-transform:uppercase;
font-size:2.4rem;
line-height: 3rem;
margin-top: 0rem;
margin-bottom: 3.5rem;
}


h3 {
font-size:2rem;
line-height: 2.3rem;
margin-top: 1rem;
margin-bottom:2.5rem;
letter-spacing:0rem;
}

/* allgemeine links  */

a {color:#2d2d2d;text-decoration: underline;
padding:0.6rem;
}

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


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

/* bilder  anpassen der grösse  */
/* wenn sie eigene einzelne bilder einbauen, unabhängig von unserem bilderstystem,
 dann werden diese bilder maximal (max-width) so gross wie die original-abmessungen des bildes
 bwz. des umschliessenden containers wenn vorhanden */

img {max-width: 100%;
height: auto;
margin:0 auto;
}


/* name  */
.hpname {display:block;
font-weight:normal;
font-size: 2.3rem;
text-transform:uppercase;
color:#2d2d2d;
letter-spacing:0.1rem;
}

.hpname span {margin-bottom:0.4rem;display:inline-block;
font-size:1.7rem;
}

.seitentitel {font-size:3.5rem;
line-height: 3.7rem;
margin-top: 1rem;margin-bottom:2rem;
text-align:center;
}

/* runde objekte  */
.rund {border-radius:36rem; }




/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */
/* BILDER-SYSTEM (wenn sie die bilder in diesen container packen) */
/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */

.wrapper-bild {text-align:center;display:inline-block;
width:100%;
}

.wrapper-bild img {max-width: 80%;
display:inline;
height: auto;
margin-left:0.5rem;
margin-right:0.5rem;
margin-bottom:1rem;
margin-top:0rem;
border:solid 1rem white;
}


/* ############################################################ */
/* content bereich */
/* ############################################################ */

.section-content {display:table;
height: 100%;
width: 100%;
}

.content {display: table-cell;
text-align:center;
vertical-align:middle;
padding:1rem;
}


/* - - - - - - - - */
/* startseite */
/* - - - - - - - - */

.logo {display: inline-block;min-width:30rem;min-height:20rem;
background-color:rgba(255, 255, 255, 0.7);
border-radius:2rem;padding:2rem;
}

#start  {
background:#DFDFDF;color:#2d2d2d;
background-attachment:fixed;
position:fixed;background-image:url(../images/logo-ani-startseite-3.gif);
background-repeat:no-repeat;
background-position:50% 50%;
height:100%;
width:100%;
overflow:auto;
top:0rem;
left:0rem;
}

#start .icons .fas,
#start .icons .fab,
#start .far {display:inline-block;
color:#2d2d2d;
background:rgba(255,255,255,0.6);
font-size:2.5rem;
border-radius:36rem;
border:solid 0.1rem silver;
height:5rem;
line-height:5rem;
width:5rem;
margin:0 -.4rem;
}


/* - - - - - - - - */
/*  unterseiten */
/* - - - - - - - - */

#unterseiten {
background-color:white;
background-attachment:fixed;
position:fixed;
height:100%;width:100%;
overflow:auto;
top:0rem;
left:0rem;
padding:4rem 1rem;
background-image:url(../images/logo-ani-startseite-2.gif);
background-repeat:no-repeat;
background-position:50% 50%;
background-size: cover;
}

#unterseiten .content {display: block;
margin:0rem auto;
width:90vw;
padding:1rem;
background-color:rgba(255, 255, 255, 0.8);
text-align:center;
vertical-align: middle;
border-radius:2rem;
}

.icons .fas,
.icons .fab,
.icons .far  {display:inline-block;
color:#2d2d2d;
background:rgba(255,255,255,0.6);
font-size:4rem;
border-radius:36rem;
border:solid 0.1rem silver;
height:6rem;
line-height:6rem;
width:6rem;text-align:center;
margin:0 -.6rem;padding:0;
}

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


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

/* fussmenu  */

.fussmenu  {width:100%;text-align:center;
margin:0;
}

.fussmenu ul {
padding: 0rem;
margin:0;
}

.fussmenu li { display: inline;}

.fussmenu a {
display:inline-block;
font-size:1.5rem;
background:transparent;
color:#000;
text-shadow:0rem 0rem  0.1rem white;
margin:0.5rem 0.2rem 0.5rem 0.2rem;
text-decoration:underline;
}

.fussmenu a:hover{ text-decoration:none;
text-shadow:0rem 0rem 0.1rem #000;
color:#FFF;
}




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

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

#unterseiten .content {padding:2rem 3rem 4rem 3rem; }

}


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

.logo {display: inline-block;width:40rem;
background-color:rgba(255, 255, 255, 0.7);
border-radius:2rem;padding:2rem;
}

}



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

html {font-size:66.5%; }

}


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


#unterseiten .content {width:80vw; }

.wrapper-bild img {max-width: 45%; }

}


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

html {font-size:72%; }

#unterseiten .content {width:70vw; }

.text {text-align:justify; }

}


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

html {font-size:82%; }

}





/* +  +  +  +  + +  +  +  +  +  C O D E ENDE  +  +  +  +  +  +  +  +  +  + */