/* ############################################################ */
/* ###########      user.css      für  cassiepeia_daniela      daniela-aland.de  joomla 4    ####### */
/* 18.02.2023*/



@charset "utf-8";

*    { margin: 0px; padding: 0px; border: none; }
html  { min-height:100%;}


@font-face {                      
    font-family: 'quicksand';
    src: url('../fonts/Quicksand-Regular.otf') format('OpenType');  /* für allg. Text */
}
@font-face {                      
    font-family: 'quicksandB';
    src: url('../fonts/Quicksand-Bold.otf') format('OpenType'); 
}
@font-face {                      
    font-family: 'ralewayregular';
    src: url('../fonts/Raleway-Regular.ttf') format('TrueType');      /* für menu */
}
@font-face {                      
    font-family: 'ralewaylight';
    src: url('../fonts/Raleway-Light.ttf') format('TrueType');      /* für menu */
}
@font-face {                      
    font-family: 'ralewaymedium';
    src: url('../fonts/Raleway-Medium.ttf') format('TrueType');      /* für menu */
}
@font-face {                      
    font-family: 'ralewaythin';
    src: url('../fonts/Raleway-Thin.ttf') format('TrueType');      /* für menu */
}

@font-face {                      
    font-family: 'gabriola';
    src: url('../fonts/gabriola_font.ttf') format('TrueType');      /* für menu */
}

@font-face {                      
    font-family: 'phyllis';
    src: url('../fonts/phyllis_font.ttf') format('TrueType');      /* für menu */
}

/* #####################   Überschriften  Abstände  Links  ########################## */
                       
/* allgemein */

h1 {
    margin-bottom: 30px;
    font-size: 1.5em;
    display:none;
}


h2 {
    font-size: 1.3em;
    margin-bottom: 1.2em;
    margin-top: 1.4em;
}


h3 {
    font-size: 1.2em; 
    font-weight: bold; 
    margin-bottom: 1.2em;
    margin-top: 1.4em;
}


h4 {
    font-size: 1.1em; 
    font-weight: bold; 
    text-decoration: underline; 
    margin-bottom: 1.2em;
    margin-top: 1.4em;
}


h5 {
    font-size: 1.0em; 
    font-weight: bold; 
    margin-bottom: 1.2em;
    margin-top: 1.4em;
}

.gabriola {font-family: gabriola;}


.blue {color: #117180;}

.bold {font-weight: bold;}
.fettplus {font-weight: bold; text-decoration: underline;}
.bold-under {font-weight: bold;text-decoration: underline;}

.center {text-align: center;}
.center-dani {
    text-align: center;
    margin-left: 30px;
    font-style: italic;
    font-size: 1.1em;
}

.abstand {
    color: transparent;     /*  #ededed;  */
    margin-top: 1em;
}

.ab-oben    {margin-top: 1.4em;}
.ab-oben-2  {margin-top: 2.2em;}
.ab-links   {margin-left: 10%;}

.greyline {
    height: 15px;
    border-radius: 25%;
    margin: auto;
    color: lightgrey;
}

a.mybutton {
	text-decoration: none !important;
	border: solid 1px lightgray;
	border-radius: 15px;
	padding: 5px 10px;
	font-size: 0.9em;
}





li      {list-style-type: none;}
li a    {background-color: transparent !important; text-decoration: none;}
a       {color: black !important;}



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

html, body {
    padding: 0;
    font-family: ralewaymedium;
    /*font-weight: bold;    /* line 207 beachten !!  */
    font-size: 17px;
    line-height: 1.25em !important;
}


body.site {                 /*  BG  fast-weiß  */
    color: black;
    border-top: none !important;
    padding: 0 !important;
}


site-grid {
    margin: auto;
}


.grid-child.container-component {
    margin-top: 4,5em;   /* macht Platz für die Navi */
}




/* #####################   header  +  logo     ############## */
                       
/* allgemein */

.container-header {
    /*border: solid 1px green;*/
    max-width: 100%;
    height:400px;
    background: #ededed;
    background-image: url(/images/dani/header-water-1.png);
    border-bottom: solid 2px #bababa;
    box-shadow: 2px 3px 7px  #6f6f6f;
}


.brand-logo {  
    margin-left: 20px;
}


        /*bis 464 */
        @media (max-width: 464px){
            .container-header {
                height: 250px;
            }
        }

        /*bis 360 */
        @media (max-width: 360px){
            .container-header {
                height: 200px;
            }
        }


/* #####################   navigation  ########################## */
           
/* Menü-Links  */

ul.metismenu {color: black !important;}

a {background-color: transparent !important;}
a:hover,
a:focus {color: black !important;  text-decoration: underline !important;}

#mainmenu a:hover {text-decoration: underline;  color:  black;}

li.current.active {text-decoration: underline;}


/* grundsätzlich vorhandene weiße Linie im Menü (unter der Unterstreichung) entfernen */
.container-header .metismenu > li.active > a::after,
.container-header .metismenu > li.active > button::before,
.container-header .metismenu > li > a:hover::after,
.container-header .metismenu > li > button:hover::before {
  background: none;   /*#fff;*/
  left: 0;
  right: 0;
}



/* allgemein */


#mymenu {
    margin: auto;    
    border-bottom: solid 1px lightgrey;
}

nav.navbar.navbar-expand-md {
   /*border: solid 1px red;*/
   margin: auto;
}

#mainmenu {   
  /*border: solid 1px blue;*/
   margin-top: 5px;
   display: flex;
   flex-direction: row;
}


.navbar-toggler {
    color: black;
    background: #d5e5e6;
    margin: auto;
    padding: 15px 18px;
    border: 2px solid black;
    border-radius: 50%;
        box-shadow: 2px 2px 5px  #6f6f6f;
}

.navbar-toggler:hover {       /* bis 767px */
    border-radius: 30%;
}

.navbar-toggler:focus {       /* bis 767px */
    border-radius: 30%;
}


        /*bis 1414 */
        @media (max-width: 1415px){  
            li.metismenu-item {font-size: 0.8em !important;}
        }



        /*bis 1016 */
        @media (max-width: 1016px){  
            .metismenu.mod-menu .metismenu-item > a {
                white-space: pre-line;
                text-align: center;
            }

            .metismenu-item {
                border: 1px solid #ede6e6;
                box-shadow: 2px 2px 4px  #d4cfcf;
                padding: 0px;
                border-radius: 10px;
                margin: 0 5px;
            }

            #mymenu {border-bottom: none;}

            li.metismenu-item {
                font-size: 0.8em !important;
            }
        }


        /*bis 767 */
        @media (max-width: 767px){  
            #mainmenu {
                flex-direction: column;
                margin-left: 3em;
            }
            
            ul#mainmenu {
              width: fit-content;
              border: 1px solid #b0bebf;
              box-shadow: 2px 2px 4px #948f8f;
              border-radius: 10px;
              background: #d5e5e6;
            }
            
            .metismenu-item {
                border: none;
                box-shadow: none;
                line-height: 1em !important;
            }
         }






/* #####################   content + spalten  ########################## */
                       
/* allgemein */

main {
    max-width: 1100px;  /*900px;*/
    margin: auto;
    padding-bottom: 20px;
}


main#content {
    /*background-image: url(../images/spiral10pz.png);
    background-repeat: no-repeat;
    background-position: center;  */  
    font-size:1.0em;
    overflow:hidden;
}


.page-header {
    border: none;
    margin: 0;
    padding: 0;
}


/* big screen ab 980 */
        @media (min-width: 980px) {
            main#content {
                margin-top: 70px;
            }


            .spalten {
                /*border: solid 2px white;*/
                display: flex;
                flex-direction: row;
                justify-content: center;
            }


        /* für home seite*/     
            #sp-homeleft {       /* = slider */
                /*border: solid 3px blue;*/
                margin-top: 50px;
                max-width: 358px;
                max-height: 476px;
                text-align: center;
            }

        .n2-section-smartslider {
                border: solid 3px #67695d;
                border-radius: 5px;
                        -webkit-box-shadow: 2px 3px 7px  #6f6f6f;
                        -moz-box-shadow: 2px 3px 7px  #6f6f6f;
                        box-shadow: 2px 3px 7px  #6f6f6f;
            }
              

            #sp-homeright {        /*  nur die home seite !!  */
                /*border: solid 3px blue;*/
                max-width: 600px;   /* 450px;*/
                text-align: center;
                padding: 20px 20px 20px 40px;
                background-image: url(../images/spiral10pz.png);
                background-repeat: no-repeat;
                background-position: center; 
            }
                

                        /* für Terminliste *
                            .terminliste {
                                /*border: solid 1px blue;*
                                max-width: 550px;   /* 450px;*
                                /*min-height: 370px;*
                                text-align: left;
                                padding: 20px 10px 20px 20px;
                            }
                                                  

                            .sp-right-termin {
                                /*border: solid 1px blue;*
                                max-width: 550px;   /* 450px;*
                                min-height: 370px;
                                text-align: left;
                                padding: 20px 10px 20px 20px;
                                background-image: url(../images/spiral10pz.png);
                                background-repeat: no-repeat;
                                background-position: center;   
                            }
                            */


        /* spalten linksbündig*/
            .sp-left-flushleft {
                /*border: solid 1px blue;*/
                max-width: 500px;   /* 450px;*/
                /*min-height: 370px;*/
                text-align: left;
                padding: 20px;
                margin-right: 8px;
            }
                                  

            .sp-right-flushleft {
                /*border: solid 1px blue;*/
                max-width: 500px;   /* 450px;*/
                /*min-height: 370px;*/
                text-align: left;
                padding: 20px;
                margin-left: 8px;
                background-image: url(../images/spiral10pz.png);
                background-repeat: no-repeat;
                background-position: center;
            }

            .no-bg {
                background-image: none !important;
            }

        }



/*768-979 */
        @media (max-width: 979px){  
                    main#content {
                        padding-left: 30px;
                        padding-right: 30px;
                        margin-top: 20px;
                    }
                    #sp-homeleft {
                        margin: auto;
                        max-width: 350px;
                        border: solid 3px #67695d;
                        border-radius: 5px;
                            -webkit-box-shadow: 2px 3px 7px  #6f6f6f;
                            -moz-box-shadow: 2px 3px 7px  #6f6f6f;
                            box-shadow: 2px 3px 7px  #6f6f6f;
                    }


                    #sp-homeright,
                    .sp-left-flushleft,
                    .sp-right-flushleft,
                    .sp-left-center,
                    .sp-right-center {
                        margin: auto;
                        max-width: 550px;
                    }

                    .sp-left-center,
                    .sp-right-center {
                        text-align: center;
                    }

        }



/* 451-767 */
        @media (max-width: 767px) { 
                    main#content {
                        padding-left: 20px;
                        padding-right: 20px;
                        padding-bottom: 15px;
                    }

                    #sp-homeleft {
                        margin: auto;
                        max-width: 300px;
                    }
        }



/* 0-450*/
        @media (max-width: 450px) { 

                    #sp-homeleft {
                        margin: auto;
                        max-width: 250px;
                    }

                    body.wrapper-fluid .site-grid {grid-gap: 0 .5em;}
                    .site-grid {padding: 0 !important;}
                    main {margin: 0;}
        }




/* #####################   blog-layout - Beiträge abgrenzen  ########################## */

.blog-items[class*=" masonry-"] .blog-item, .blog-items[class^="masonry-"] .blog-item {
    border: solid 1px lightgray;
    border-radius: 10px;
    padding: 1em !important;
    /*background: #f9f9f9;   /*ganz ganz helles grau*/
       box-shadow: 2px 2px 4px  #8c8b8b;
}




/* #####################   Preisblatt - Preisliste  ########################## */
                       
         /* .tab1 { margin-left: 2em;}
            .tab2 { margin-left: 4em;}*/

#preisblatt {
    padding: 0 1.5em 1.5em 1.5em;
    border: solid 1px #f1f1f1;
    border-radius: 15px;
    background: #f5f5f5;   /*ganz ganz helles grau*/
    box-shadow: 2px 2px 4px  #8c8b8b;
}


td { height: 1em;}
.td-inhalt { font-weight: bold; }
.td-text { max-width: 30em;}
.td-leer { width: 0.5em;}
.td-preis { text-align: right;   width: 6em;}
.td-ab { height: 1.2em;}





/* #####################   Terminübersicht   ########################## */

.terminblatt {
    margin: auto;
    margin-top: 20px;
    margin-bottom: 10px;
    max-width: 550px;
    text-align: left;
    padding: 20px 10px 20px 20px;
    background: #f5f9fa;
    border: solid 1px lightgrey;
    border-radius: 5px;
          box-shadow: 2px 2px 4px  #8c8b8b;
}


.terminblatt-header {
    margin-top: 1em;
    font-weight: bold;
    text-decoration: underline;
}


td.td-termin {
    height: 3.3em;
    line-height: 1.2em;
    font-size: 0.9em;
    width:  10em;
}



                /*0-979 */
                @media (max-width: 979px){  
                    .terminblatt-header {text-align: center;}
                }


                /* 451-767 */
                @media (max-width: 767px) { 
                    td.td-termin{padding-bottom: 1em;}
                }


                /* bis 597*/
                @media (max-width: 597px) { 
                    td.td-termin{line-height: 5em;}
                }




/* #####################  Weiterlesen - Button   ############################ */
/* Button anzeigen lassen:  Optionen/Beiträge -> Weiterlesen-Titel: verbergen */

a.btn.btn-secondary {
    border-radius: 15px;
    padding: 5px 10px;
    margin-bottom: 20px;
      /*box-shadow: 2px 2px 4px #6f6f6f;*/
}

p.readmore {
    text-align: center;
}


/*zurück-button - nach Weiterlesen*/

.zurueck {
  padding: 15px 40px;
  border: solid 1px gray;
  border-radius: 80%;
  background: #f0eded;
  width: fit-content;
  margin: 30px auto;
}


/* Text im Weiterlesen-Bereich   als <div class="orga"> */
.orga {
    margin: auto;
    width: 60%;
}




/* #####################   images  im Beitrag  ########################## */
/*  <img class="...-img" src="images/beitragsimg/Bild-2.png" alt="" />  */ 

/*
.quer-img-left      gelberose.jpg       en.erkenntnis-txt   
                    baum-schief1.jpg    erdstrahlen
                    bellis.jpg          matrix--text
.quer-img-right     fels-brandung.jpg   herzen-energie
.hoch-img           baum2.jpg           göttl. Ordnung
                    wasserfall          matrix--text
.hoch-img-right     sonnenblume.png     en.erkenntnis-txt
.dani-img-right     bild-2a.png         über mich
                    bild-4a.png         über mich
.urlaub-img         xxx                 urlaub machen
                    xxx                 urlaub machen
                    xxx                 urlaub machen
*/


.myblog-img {
    margin: auto;
    max-width: 350px;
    border: solid 3px darkgrey;
    border-radius: 3px;
      box-shadow: 2px 3px 7px  #6f6f6f;
}

.myblog-img-2 {
    border: solid 3px darkgrey;
    border-radius: 3px;
      box-shadow: 2px 3px 7px  #6f6f6f;
}

.img-transformation {
    width: 250px;
    margin: auto;
    border: solid 3px darkgrey;
    border-radius: 3px;
      box-shadow: 2px 3px 7px  #6f6f6f;
}


.img-herzenenergie {
    width: 300px;
    margin: auto;
    border: solid 3px darkgrey;
    border-radius: 3px;
      box-shadow: 2px 3px 7px  #6f6f6f;
}


.quer-img-left,
.quer-img-right,
.hoch-img-left,
.hoch-img-right,
.dani-img-left,
.dani-img-right {
    border: solid 3px darkgrey;
    border-radius: 3px;
                    -webkit-box-shadow: 2px 3px 7px  #6f6f6f;
                    -moz-box-shadow: 2px 3px 7px  #6f6f6f;
                    box-shadow: 2px 3px 7px  #6f6f6f;
}


.urlaub-img-hoch,
.urlaub-img-quer {
    border: solid 2px white;
    border-radius: 2px;
                    -webkit-box-shadow: 2px 3px 7px  #6f6f6f;
                    -moz-box-shadow: 2px 3px 7px  #6f6f6f;
                    box-shadow: 2px 3px 7px  #6f6f6f;
}


/*.urlaub-img-hoch:hover,    da wären größere Bilder nötig, sonst unscharf
.urlaub-img-quer:hover {
    width: 130%;
}*/




                /* big screen ab 980 */
                @media (min-width: 980px) {
                /*604*/
                    .quer-img-left {
                        float: left;
                        margin: 10px 20px 20px 0px; 
                        width: 255px;
                    }


                    .quer-img-right {
                        float: right;
                        margin: 10px 20px 20px 20px; 
                        width: 255px;
                    }


                    .hoch-img-left {
                        float: left; 
                        margin: 10px 20px 20px 0px; 
                        width: 175px;
                    }

                    .hoch-img-right {
                        float: right; 
                        margin: 10px 20px 20px 10px; 
                        width: 175px;
                    }


                    .dani-img-left {
                        float: left;
                        margin: 10px 20px 10px 0px;
                        width: 190px;
                    }


                    .dani-img-right {
                        float: right;
                        margin: 35px 15% 10px 20px;
                        width: 190px;
                    }



                    .voegel:hover {
                        width: 500px;
                    }

                    .trafo:hover {
                        width: 435px;
                    }

                    .hoverquer:hover {
                        width: 500px;
                    }


                    .hoverhoch:hover {
                        width: 300px;
                    }


                    .dani-img-left:hover,
                    .dani-img-right:hover {
                        width: 400px;
                    }



                    .urlaub-img-quer {
                        width: 128px;
                    }

                    .urlaub-img-hoch {
                        margin: 0 10px;
                        width: 87px;
                    }


                    .small-img {
                        width: 80px;
                        text-align: center;
                    }

                    .fewo-logo {
                        width: 95px;
                    }


                    .mini-25,
                    .mini-40 { 
                        display: none;   /*(mini Logo im Text)*/
                    }

                }



                /*768-979 */
                @media (max-width: 979px){  
                /*778*/
                            .quer-img-left,
                            .quer-img-right{
                                margin: auto;
                                width: 400px;
                                margin-bottom: 20px; 
                                margin-top: 20px;
                            }


                            .hoch-img-left,
                            .hoch-img-right {
                                margin: auto;
                                width: 300px;               
                                margin-bottom: 20px; 
                                margin-top: 20px;
                            }

                            .dani-img-left,
                            .dani-img-right {
                                margin: auto;
                                width: 140px;
                                margin-bottom: 20px; 
                                margin-top: 20px;
                            }


                    .voegel:hover {
                        width: 300px;
                    }

                    .trafo:hover {
                        width: 261px;
                    }

                    .dani-img-left:hover,
                    .dani-img-right:hover {
                        width: 240px;
                    }

                            .mini-25 {
                                width: 25px;
                                margin-right: 10px;
                            }

                            .mini-40 {
                                width: 40px;
                            }


                }



                /* 451-767 */
                @media (max-width: 767px) { 

                    .small-img {
                        width: 60px;
                        text-align: center;
                    }

                    .fewo-logo {
                        width: 90px;
                    }


                }



                /* 0-450*/
                @media (max-width: 450px) { 
                /*1064*/
                                    .quer-img-left,
                                    .quer-img-right {
                                        margin: auto;
                                        width: 280px;
                                        margin-bottom: 20px; 
                                        margin-top: 20px;
                                    }


                                    .hoch-img-left,
                                    .hoch-img-right {
                                        margin: auto;
                                        width: 180px;
                                        margin-bottom: 20px; 
                                        margin-top: 20px;
                                    }

                                   .voegel:hover {
                                        width: 250px;
                                    }

                                    .trafo:hover {
                                        width: 210px;
                                    }




                }



/* #########################   back-top   #################*/

#mybacktop {
    position: relative;
    right: 30%;
}

        /*bis 1414 */
        @media (max-width: 1415px){  
             #mybacktop {
                position: relative;
                right: 10%;
            }
        }

a#back-top {
    list-style-type: none; 
    padding: 13px;
    border:  1px solid black;
    border-radius: 1rem;
    pointer-events: all;
    transition: opacity .2s ease-in;
    z-index: 10000;       /*  aus der templat.min.css (.back-to-top-link) übernommen und angepasst */
    background: transparent;
        /*background: linear-gradient(to bottom,  #d9ecc8 0%,#629f5b 100%); /* W3C */*/
        box-shadow: 2px 2px 5px #191919;          /*shadow: x achse, y achse, blurr, farbe*/
}                           
                       






/* #########################   footer   ##############################*/

#myfooter {
    margin: auto;
}

.footer {
    margin-top: 0;
    color:  black;
    background: none;
    margin: auto;
}



#footermenu {
        border-top: 1px solid lightgrey;
    padding-top: 20px;
    padding-bottom: 10px;
    font-size: 0.9em;
    width:  50rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}


.footer .grid-child {
    padding: ;
}


            /* +++  bis 979 +++*/
            @media (max-width: 979px) {
               #footermenu {
                    width: 45em ;
                }
            }

            /* +++  bis 767 +++*/
            @media (max-width: 767px) {
                 .mod-menu.mod-list.nav.menu-horizontal  {
                     flex-direction:  column !important;
                     text-align: center;
                     margin: auto;
                     width: 15em !important;;
                 }
            }








/* #####################   contact  form  ########################## */
                       
/* allgemein */

.com-contact__info {
    margin-top: -50px;
}

dl.contact-address.dl-horizontal dd {
    margin-left: 0;
    margin-top: 30px;
}
label#jform_spacer-lbl {
  margin-top: 30px;
    font-size: 0.9em;
}

button.btn.btn-primary.validate {
    margin-top: 20px;
    color: black; 
    border: 1px solid #849aa1;
    background: #a7c1c9;
       box-shadow: 2px 3px 7px  #6f6f6f;   
}


    /* contact form */
    .com-contact__container .com-contact__thumbnail{
            width: 220px;
     }

    .com-contact__container .com-contact__thumbnail img {
        border: solid 3px darkgrey;
        border-radius: 3px;
            box-shadow: 2px 3px 7px  #6f6f6f;
    }
/* big screen ab 980 */
@media (min-width: 980px) {


}




/*768-979 */
@media (max-width: 979px){  



}



/* 451-767 */
@media (max-width: 767px) { 



}



/* 0-450*/
@media (max-width: 450px) { 



}