/*-- 
Name:          Beatrice von Singen, Hessisch Oldendorf
Url:           https://beatrice-von-singen.de
Description:   Beatrice von Singen, Hessisch Oldendorf | Symbolik, Magie und Kreativität Weserbergland
Version:       2.0 (Relaunch Responsive)
______________ Webdesign by elf42 - Hameln Emmerthal */

/*-- 
_________________________ HTML > CSS; [© by elf42] -- */

input#menue { display:none; }
input[name="drop"] { display:none; }

/*-- menue toggle
_________________________ HTML > CSS; [© by elf42] -- */


  @media only screen and (max-width: 1023px) {

label.menue {  margin:0; padding: 14px; width: 50px; height: 50px; display: block; text-align: center;
               background-color: var(--ci02); border: 1px solid var(--m255); border-radius:30px; }

.bar {        width: 21px; height: 3px; background-color: var(--m255); border-radius: 1px; display: block; transition: 0.5s; transform-origin: center; }
.bar + .bar { margin: 5px 0 0 0;}

#menue:checked + .menue .bar:nth-child(1){ transform: translateY(8px) rotate(-45deg); }
#menue:checked + .menue .bar:nth-child(2){ opacity:0; }
#menue:checked + .menue .bar:nth-child(3){ transform: translateY(-8px) rotate(45deg); }

#menue:checked + .menue  {                  background-color: var(--ci02); border: 1px solid var(--m255); }
#menue:checked + .menue .bar:nth-child(1), 
#menue:checked + .menue .bar:nth-child(3) { background-color: var(--m255); }
}

/*-- kopf, header menue
_________________________ HTML > CSS; [© by elf42] -- */



.navsub {                   max-height:0; }      /* max-height - deswegen die navsub nicht sichtbar */
input.auf:checked~.navsub { max-height: 900px; } /* navsub sichtbar .. evt. hoehe anpassen */


.drop span {                         z-index:10; }
.drop label.zu {                     z-index:20; }
.drop label.auf {                    z-index:30; }
.drop input.auf:checked ~ label.zu { z-index:30; }
.drop input.zu:checked ~ label.auf { z-index:30; }


ul.navsub li a:before {                                 content: "\f105"; font-family: 'FontAwesome'; font-weight:bold; padding-right: 13px; } /* content: "- "; */


/*  */
nav#nav {           background: rgba(var(--ci02t),0.8); }

ul.nav li {         color: var(--m212); 
                    background: none; border-bottom: none; }

ul.nav a:link, ul.nav a:visited { 
                    color: var(--m212); 
                    background-color: var(--no); border: var(--no); }
ul.nav a:hover, ul.nav a:focus, ul.nav a:active {
                    color: var(--m255);
                    background-color: var(--ci03); border: var(--no); }
li.drop:hover, li.drop:focus, li.drop:active {
                    color: var(--m255); 
                    background-color: var(--ci03); border-bottom: var(--no); }
li.drop {           border-bottom: 1px solid var(--m160); }


li.drop input.auf:checked ~ span { 
                    color: var(--m255); 
                    background: var(--ci03); border: var(--no); }



ul.navsub {                  }
ul.navsub li {      color: var(--m242); 
                    background: rgba(var(--ci03t),0.87); border-bottom:  var(--no); }
ul.navsub li:nth-last-child(1) { border: none; }

ul.navsub a:link, ul.navsub a:visited {
                    color: var(--m242); 
                    background-color: var(--no); border-bottom:  var(--no); }

ul.navsub a:hover, ul.navsub a:focus, ul.navsub a:active {
                    color: var(--m255); 
                    background-color: var(--ci02); border-bottom:  var(--no); }

ul.navsub li a:before {  color: var(--ci02); } 
ul.navsub li:hover a:before, ul.navsub li:focus a:before, ul.navsub li:active a:before { 
                         color: var(--m255); } 

  @media only screen and (max-width: 1023px) {


nav#nav {          height: auto; max-height:0; overflow: hidden; transition: 2s all; }
                              /* max-height - deswegen die nav nicht sichtbar */
#menue:checked + .menue + #nav { max-height: 1000px; width: 100%; height: auto; } /* nav sichtbar .. evt. hoehe anpassen */


/* --- */

ul.nav {                             padding: 0; } 
ul.nav li {                margin:0; padding: 0; 
                                     list-style-type: none;}
ul.nav li:last-child { }


ul.nav a {                 margin:0; padding: 1rem 1rem; 
                                     display: block; text-decoration: none; border: 0; }
ul.nav a:last-child  { }
ul.nav a:link, ul.nav a:visited { }


li.drop {                            position:relative; }
/* span wie a - zusammen legen? */
li.drop span {             margin:0; padding: 1rem 1rem; 
                                     position:relative; top: 0; left: 0; z-index:0; 
                                     display: block; text-decoration: none; border:0; }
li.drop label {            margin:0; padding: 1rem 2rem; 
                                     width: 100%; height:auto; 
                                     position:absolute; top: 0; left: 0; text-align:right;
                                     display: block; text-decoration: none; border:0; cursor: pointer; }


/* --- */

ul.navsub {                margin: 0; padding: 0; width: 100%; max-height:0; 
                                     position:relative; 
                                     overflow: hidden; transition: 1s all; } 
ul.navsub li {             margin:0; padding: 0; 
                                     list-style-type: none; }
ul.navsub li:last-child {            border: none; }


ul.navsub a {              margin:0; padding: 0.7rem 0; 
                                     display: block; text-decoration: none; text-align:left; 
                                     }
ul.navsub a:last-child  {            border: 0; }
ul.navsub a:link, ul.navsub a:visited { }

ul.navsub a:before {                 padding: 0 0.5rem 0 1.8rem; }


/* --- */

nav#nav {                 background: rgba(var(--ci03t),0.8);  }

ul.nav {                  margin: var(--a100) 0 0 0; padding-bottom: var(--a20); }

ul.nav li {               color: var(--m212); 
                          background-color: rgba(var(--ci03t),1); border-bottom: 1px solid var(--m160); }

ul.nav a:link, ul.nav a:visited { 
                          color: var(--m212); 
                          background-color: rgba(var(--ci03t),0.8); border-bottom:  1px solid var(--tr); }
ul.nav a:hover, ul.nav a:focus, ul.nav a:active {
                          color: var(--m255); 
                          background-color: rgba(var(--ci02t),1); border-bottom:  1px solid var(--m255); }


ul.navsub { }
ul.navsub li {            color: var(--m212); 
                          background-color: rgba(var(--ci03t),1); border-bottom: 1px solid var(--m160); }
ul.navsub li:last-child { border:none; }

ul.navsub a:link, ul.navsub a:visited {
                          color: var(--m212); 
                          background-color: rgba(var(--ci03t),1); border: var(--no); }

ul.navsub a:hover, ul.navsub a:focus, ul.navsub a:active {
                         color: var(--m255); 
                         background-color: rgba(var(--ci02t),1); border: var(--no); }

ul.navsub li a:before {  color: var(--ci02); } 
ul.navsub li:hover a:before, ul.navsub li:focus a:before, ul.navsub li:active a:before { 
                         color: var(--m0); }



} @media only screen and (min-width: 1024px ) {


ul.nav {                  margin:0; padding: 0; height: auto; 
                                     justify-content: space-between; -ms-flex-pack: justify; }

ul.nav li {               margin:0; padding: 0; 
                                    height: auto; 
                                    border: 0; list-style-type:none; }
ul.nav li:last-child {              }

ul.nav a {                margin:0; padding: 1.5rem 1.5rem; 
                                    display: block; text-decoration: none; 
                                    border: 0; }
ul.nav a:last-child { }


li.drop {                            position:relative; }

li.drop span {             margin:0; padding: 1.5rem 1.5rem; 
                                     position:relative; top: 0; left: 0; z-index:0; 
                                     display: block; text-decoration: none; border:0; }
li.drop label {            margin:0; padding: 0; 
                                     width: 100%; min-height: 80px; 
                                     position:absolute; top: 0; left: 0; text-align:right;
                                     display: block; text-decoration: none; border:0; cursor: pointer; }


ul.navsub {                margin: 0 0 50px 0; padding:0; max-height:0; 
                                     position: absolute; left: -1rem;
                                     overflow: hidden; transition: 1s all; } 
ul.navsub.ende {           margin:0; padding: 0; max-height:0; 
                                     position: absolute; right:0; margin-left:-75%;
                                     overflow: hidden; transition: 1s all; } 


ul.navsub li {             margin:0; padding: 0; 
                                     width: 100%; white-space:nowrap;
                                     list-style-type: none; }
ul.navsub li:first-child {           padding: var(--a30) 0 0 0; }
ul.navsub li:last-child {            padding: 0 0 var(--a30) 0; }


ul.navsub a {              margin:0; padding: 0.5rem 3rem 0.5rem 2rem/*20px*/; 
                                     display: block; text-decoration: none; text-align:left; 
                                       }

ul.navsub a:link, ul.navsub a:visited { }

ul.navsub a:before {                 padding: 0 0.5rem 0 0; }

input.auf:checked ~ span {           border: 0; }

} /* / min-width: 1024px*/









/*-- bc
_________________________ HTML > CSS; [© by elf42] -- */


body#angebote-lebensberatung-selbstentfaltung #bc li.angebote-lebensberatung-selbstentfaltung-a a, 
body#angebot-rauhnacht-symbol-beratung-lebensberatung #bc li.angebot-rauhnacht-symbol-beratung-lebensberatung-a a, 
body#angebot-maerchen-symbol-beratung-lebensberatung #bc li.angebot-maerchen-symbol-beratung-lebensberatung-a a, 
body#angebot-medizinrad-wanderungen-selbstentfaltung #bc li.angebot-medizinrad-wanderungen-selbstentfaltung-a a, 
body#angebot-frau-holle-seminar-lebensberatung #bc li.angebot-frau-holle-seminar-lebensberatung-a a, 
body#angebot-musikalisches-buehnenprogramm-selbstentfaltung #bc li.angebot-musikalisches-buehnenprogramm-selbstentfaltung-a a, 
body#angebot-individuelle-ritualbegleitung-lebensberatung #bc li.angebot-individuelle-ritualbegleitung-lebensberatung-a a, 
body#angebot-outdoor-seminare-selbstentfaltung #bc li.angebot-outdoor-seminare-selbstentfaltung-a a, 
body#angebot-maerchen-seminare-selbstentfaltung #bc li.angebot-maerchen-seminare-selbstentfaltung-a a, 
body#angebot-birth-into-being-selbstbestimmtes-leben-lebensberatung #bc li.angebot-birth-into-being-selbstbestimmtes-leben-lebensberatung-a a 
{
color: var(--m0); 
background-color: var(--tr); 
border: var(--no); 
}


/*-- nav-2
_________________________ HTML > CSS; [© by elf42] -- */


body#maerchen-symbole-bedeutung li.maerchen-symbole-bedeutung-a a, 
body#kontakt ol.nav2 li.kontakt-a a, 
body#impressum li.impressum-a a,
body#datenschutz li.datenschutz-a a 
{
color: var(--m255);
background-color: var(--ci03); 
}


/*-- you are here
_________________________ HTML > CSS; [© by elf42] -- */


/* u ... label marked */
:where( 
body#angebote-lebensberatung-selbstentfaltung, 
body#angebot-rauhnacht-symbol-beratung-lebensberatung, 
body#angebot-maerchen-symbol-beratung-lebensberatung, 
body#angebot-medizinrad-wanderungen-selbstentfaltung, 
body#angebot-frau-holle-seminar-lebensberatung, 
body#angebot-musikalisches-buehnenprogramm-selbstentfaltung, 
body#angebot-individuelle-ritualbegleitung-lebensberatung, 
body#angebot-outdoor-seminare-selbstentfaltung, 
body#angebot-maerchen-seminare-selbstentfaltung,
body#angebot-birth-into-being-selbstbestimmtes-leben-lebensberatung ) li.drop input#drop-1 ~ label:nth-child(odd)::after
{
color: var(--m0);
background: var(--no); 
}

/* u ... marked */
body#angebote-lebensberatung-selbstentfaltung li#angebote-lebensberatung-selbstentfaltung-a a, 
body#angebot-rauhnacht-symbol-beratung-lebensberatung li#angebot-rauhnacht-symbol-beratung-lebensberatung-a a, 
body#angebot-maerchen-symbol-beratung-lebensberatung li#angebot-maerchen-symbol-beratung-lebensberatung-a a, 
body#angebot-medizinrad-wanderungen-selbstentfaltung li#angebot-medizinrad-wanderungen-selbstentfaltung-a a, 
body#angebot-frau-holle-seminar-lebensberatung li#angebot-frau-holle-seminar-lebensberatung-a a, 
body#angebot-musikalisches-buehnenprogramm-selbstentfaltung li#angebot-musikalisches-buehnenprogramm-selbstentfaltung-a a, 
body#angebot-individuelle-ritualbegleitung-lebensberatung li#angebot-individuelle-ritualbegleitung-lebensberatung-a a, 
body#angebot-outdoor-seminare-selbstentfaltung li#angebot-outdoor-seminare-selbstentfaltung-a a, 
body#angebot-maerchen-seminare-selbstentfaltung li#angebot-maerchen-seminare-selbstentfaltung-a a, 
body#angebot-birth-into-being-selbstbestimmtes-leben-lebensberatung li#angebot-birth-into-being-selbstbestimmtes-leben-lebensberatung-a a, 
{
color: var(--m255); 
background-color: var(--ci02); 
border-bottom: var(--no); 
}

/* u ... marked before */
body#angebote-lebensberatung-selbstentfaltung ul.navsub li#angebote-lebensberatung-selbstentfaltung-a a:before, 
body#angebot-rauhnacht-symbol-beratung-lebensberatung ul.navsub li#angebot-rauhnacht-symbol-beratung-lebensberatung-a a:before, 
body#angebot-maerchen-symbol-beratung-lebensberatung ul.navsub li#angebot-maerchen-symbol-beratung-lebensberatung-a a:before, 
body#angebot-medizinrad-wanderungen-selbstentfaltung ul.navsub li#angebot-medizinrad-wanderungen-selbstentfaltung-a a:before, 
body#angebot-frau-holle-seminar-lebensberatung ul.navsub li#angebot-frau-holle-seminar-lebensberatung-a a:before, 
body#angebot-musikalisches-buehnenprogramm-selbstentfaltung ul.navsub li#angebot-musikalisches-buehnenprogramm-selbstentfaltung-a a:before, 
body#angebot-individuelle-ritualbegleitung-lebensberatung ul.navsub li#angebot-individuelle-ritualbegleitung-lebensberatung-a a:before, 
body#angebot-outdoor-seminare-selbstentfaltung ul.navsub li#angebot-outdoor-seminare-selbstentfaltung-a  a:before, 
body#angebot-maerchen-seminare-selbstentfaltung ul.navsub li#angebot-maerchen-seminare-selbstentfaltung-a  a:before, 
body#angebot-birth-into-being-selbstbestimmtes-leben-lebensberatung ul.navsub li#angebot-birth-into-being-selbstbestimmtes-leben-lebensberatung-a  a:before 
{
color: var(--m0);
}

/* firstmenue */
body#biografie-beatrice-von-singen li#biografie-beatrice-von-singen-a a, 
body#ahnen-bedeutung-lebensberatung-selbstentfaltung li#ahnen-bedeutung-lebensberatung-selbstentfaltung-a a, 

:where( 
body#angebote-lebensberatung-selbstentfaltung, 
body#angebot-rauhnacht-symbol-beratung-lebensberatung, 
body#angebot-maerchen-symbol-beratung-lebensberatung, 
body#angebot-medizinrad-wanderungen-selbstentfaltung, 
body#angebot-frau-holle-seminar-lebensberatung, 
body#angebot-musikalisches-buehnenprogramm-selbstentfaltung, 
body#angebot-individuelle-ritualbegleitung-lebensberatung, 
body#angebot-outdoor-seminare-selbstentfaltung, 
body#angebot-maerchen-seminare-selbstentfaltung, 
body#angebot-birth-into-being-selbstbestimmtes-leben-lebensberatung ) li.drop input#drop-1 ~ span,

body#referenzen-symbolik-maerchen-rauhnacht-ahnen li#referenzen-symbolik-maerchen-rauhnacht-ahnen-a a, 
body#blog-beatrice-von-singen-lebensberatung-selbstentfaltung li#blog-beatrice-von-singen-lebensberatung-selbstentfaltung-a a, 
body[id*="blog-"] li#blog-beatrice-von-singen-lebensberatung-selbstentfaltung-a a, 

body#home li#home-a a, 
body#kontakt li#kontakt-a a, 
body#sitemap li#sitemap-a a 
{ 
color: var(--m255);
background-color: var(--ci03);
border: var(--no); 
}