/*-- 
Name:          Pferdewelt Waldgut Höhnscheid, Bad Arolsen
Url:           http://www.http://www.pferd-aquatrainer.de
Description:   Pferdewelt Waldgut Höhnscheid, Bad Arolsen | Aquatrainer Pferd
Version:       2.0 (Relaunch Responsive)
______________ Webdesign by elf42 - Hameln Emmerthal */

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: 10px; max-width: 46px; height: auto; display: block; 
               background-color: var(--bm01); border: 1px solid var(--bm03); border-radius: 4px; }

.bar {        width: 24px; height: 2px; background-color: var(--bm02); 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(7px) rotate(-45deg); }
#menue:checked + .menue .bar:nth-child(2){ opacity:0; }
#menue:checked + .menue .bar:nth-child(3){ transform: translateY(-7px) rotate(45deg); }

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

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



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


#kopf {       display: flex; display: -ms-flexbox; justify-content : center; -ms-flex-pack : center; flex-wrap: wrap; -ms-flex-wrap : wrap; 
              align-items : flex-start; -ms-flex-align : start; }
nav#nav {     position: relative; z-index:10;}



.navsub {                   max-height:0; }      /* max-height */
input.auf:checked~.navsub { max-height: 800px; } 

.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; }

.drop label:nth-child(odd)::after {                     content: "\f107"; font-family: 'FontAwesome'; font-weight:bold; } /* content: "+ "; */

/* geöffnet, dann verschwindet das zeichen */
.drop input.auf:checked ~ label:nth-child(odd)::after { content: ""; }

/* statt dessen erscheint das andere zeichen */
.drop input.auf:checked ~ label.zu::after {             content:  "\f106"; font-family: 'FontAwesome'; font-weight:bold; } /* content: "- "; */


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





/*  */
nav#nav {                    background: var(--nav01); }

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

ul.nav a:link, ul.nav a:visited { 
                            color: var(--nav03); 
                            background-color: none; border: none; }
ul.nav a:hover, ul.nav a:focus, ul.nav a:active {
                            color: var(--nav04);
                            background-color: var(--nav05); border: none; }
li.drop:hover, li.drop:focus, li.drop:active {
                            color: var(--nav06);
                            background-color: var(--nav07); border: none; }


li.drop label:nth-child(odd)::after {
                             color: var(--nav08); 
                             background: none; border: none; }

li.drop input.auf:checked ~ label.zu::after {
                             color: var(--nav09); 
                             background: none; border: none; }

li.drop:hover label:nth-child(odd)::after, li.drop:focus label:nth-child(odd)::after, li.drop:active label:nth-child(odd)::after, 
li.drop:hover input.auf:checked ~ label.zu::after, li.drop:focus input.auf:checked ~ label.zu::after, li.drop:active input.auf:checked ~ label.zu::after {
                             color: var(--nav10); 
                             background: none; border: none; }

li.drop input.auf:checked ~ span { color: var(--nav11); background-color: var(--nav12); border: none; }



ul.navsub {                  }
ul.navsub li {               color: var(--nsub01); 
                             background: none; border-bottom: 1px solid var(--nsub02); }
ul.navsub a:link, ul.navsub a:visited {
                             color: var(--nsub03); 
                             background-color: var(--nsub04); border-bottom: 1px solid var(--nsub02); }

ul.navsub a:hover, ul.navsub a:focus, ul.navsub a:active {
                            color: var(--nsub05); 
                            background-color: var(--nsub06); border-bottom: 1px solid var(--nsub02); }

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

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

header {        }

#kopf {       padding: 0; /*  -s.screen.css:90 */}
label.menue { width: 48%; }
nav#nav {     width: 100%; }

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: 800px; 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: 0; }


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 2rem; }


/* --- */

nav#nav {                    background: var(--mob01); }

ul.nav li {                  color: var(--mob02); 
                             background: var(--mob03); border-bottom: 1px solid var(--mob04); }

ul.nav a:link, ul.nav a:visited { 
                            color: var(--mob05); 
                            background-color: var(--mob06); border: none; }
ul.nav a:hover, ul.nav a:focus, ul.nav a:active {
                            color: var(--mob07); 
                            background-color: var(--mob08); border: none; }


li.drop label:nth-child(odd)::after, 
li.drop input.auf:checked ~ label.zu::after {
                             color: var(--mob09); 
                             background: none; border: none; }

li.drop:hover label:nth-child(odd)::after, li.drop:focus label:nth-child(odd)::after, li.drop:active label:nth-child(odd)::after, 
li.drop:hover input.auf:checked ~ label.zu::after, li.drop:focus input.auf:checked ~ label.zu::after, li.drop:active input.auf:checked ~ label.zu::after {
                             color: var(--mob10); 
                             background: none; border: none; }


ul.navsub {                  }
ul.navsub li {               color: var(--mob11); 
                             background: none; border-bottom: 1px solid var(--mob12); }
ul.navsub li:last-child {    border-bottom: 1px solid var(--mob13); }

ul.navsub a:link, ul.navsub a:visited {
                             color: var(--mob14); 
                             background-color: var(--mob15); border: none; }

ul.navsub a:hover, ul.navsub a:focus, ul.navsub a:active {
                            color: var(--mob16); 
                            background-color: var(--mob17); border: none; }

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



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

header {                                       width: auto; }

#kopf {       margin:0 auto 0 auto; padding:0; width: auto; /*  -s.screen.css:90 */}
nav#nav {     width: 100%;  }


/* --- */

ul.nav {                   margin:0; padding: 0; 
                                     height: auto; 
                                     display: flex; display: -ms-flexbox; 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: 2rem 1.5rem; 
                                   display: block; text-decoration: none; 
                                   border: 0; }
ul.nav a:last-child { }


li.drop {                            position:relative; }

li.drop span {             margin:0; padding: 2rem 1.6rem 2rem 1rem; 
                                     position:relative; top: 0; left: 0; z-index:0; 
                                     display: block; text-decoration: none; border:0; }
li.drop label {            margin:0; padding: 2rem 0.6rem; 
                                     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; max-height:0; 
                                     position: absolute; left: 0;
                                     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:last-child {            border: 0; }


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

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

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

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

nav#nav {     width: 80%;  }

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


body#waldgut-hoehnscheid-pferde-pension-kassel-marburg #bc li#waldgut-hoehnscheid-pferde-pension-kassel-marburg-a a, 
body#waldgut-hoehnscheid-konzept-pferde-pension-paderborn #bc li#waldgut-hoehnscheid-konzept-pferde-pension-paderborn-a a, 
body#waldgut-hoehnscheid-region-pferde-pension-eisenach #bc li#waldgut-hoehnscheid-region-pferde-pension-eisenach-a a, 
body#aquatrainer-pferd-kassel-paderborn-eisenach-marburg #bc li#aquatrainer-pferd-kassel-paderborn-eisenach-marburg-a a, 
body#aquatrainer-pferd-kassel-therapiekonzept #bc li#aquatrainer-pferd-kassel-therapiekonzept-a a, 
body#pferde-reha-kassel-paderborn-eisenach-marburg #bc li#pferde-reha-kassel-paderborn-eisenach-marburg-a a, 
body#pferde-reha-magnetfeldtherapie-kassel-paderborn-eisenach-marburg #bc li#pferde-reha-magnetfeldtherapie-kassel-paderborn-eisenach-marburg-a a, 
body[id*="hof"] #bc li[id*="hof"] a, 
body[id*="weiden"] #bc li[id*="weiden"] a, 
body[id*="reitplatz"] #bc li[id*="reitplatz"] a, 
body[id*="bewegungshalle"] #bc li[id*="bewegungshalle"] a, 
body[id*="boxen"] #bc li[id*="boxen"] a, 
body[id*="sandpaddock"] #bc li[id*="sandpaddock"] a 
{ color: var(--yah09); background-color: var(--yah10); cursor: text; }


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


body#kontakt ol.nav2 li#kontakt-a a, 
body#impressum li#impressum-a a,
body#datenschutz li#datenschutz-a a { 
color: var(--yah07);
background-color: var(--yah08); 
}


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


/* u ... label marked */
:where( 
body#waldgut-hoehnscheid-pferde-pension-kassel-marburg, 
body#waldgut-hoehnscheid-konzept-pferde-pension-paderborn, 
body#waldgut-hoehnscheid-region-pferde-pension-eisenach ) li.drop input#drop-1 ~ label:nth-child(odd)::after,
:where( 
body#aquatrainer-pferd-kassel-paderborn-eisenach-marburg, 
body#aquatrainer-pferd-kassel-therapiekonzept ) li.drop input#drop-2 ~ label:nth-child(odd)::after,
:where( 
body#pferde-reha-kassel-paderborn-eisenach-marburg, 
body#pferde-reha-magnetfeldtherapie-kassel-paderborn-eisenach-marburg ) li.drop input#drop-3 ~ label:nth-child(odd)::after,
:where( 
body[id*="bildergalerie"], body[id*="hof"], body[id*="weiden"], body[id*="reitplatz"], 
body[id*="bewegungshalle"], body[id*="boxen"], body[id*="sandpaddock"] ) li.drop input#drop-4 ~ label:nth-child(odd)::after
{
color: var(--yah01);
background: none; 
}

/* u ... marked */
body#waldgut-hoehnscheid-pferde-pension-kassel-marburg li#waldgut-hoehnscheid-pferde-pension-kassel-marburg-a a, 
body#waldgut-hoehnscheid-konzept-pferde-pension-paderborn li#waldgut-hoehnscheid-konzept-pferde-pension-paderborn-a a, 
body#waldgut-hoehnscheid-region-pferde-pension-eisenach li#waldgut-hoehnscheid-region-pferde-pension-eisenach-a a, 
body#aquatrainer-pferd-kassel-paderborn-eisenach-marburg li#aquatrainer-pferd-kassel-paderborn-eisenach-marburg-a a, 
body#aquatrainer-pferd-kassel-therapiekonzept li#aquatrainer-pferd-kassel-therapiekonzept-a a, 
body#pferde-reha-kassel-paderborn-eisenach-marburg li#pferde-reha-kassel-paderborn-eisenach-marburg-a a, 
body#pferde-reha-magnetfeldtherapie-kassel-paderborn-eisenach-marburg li#pferde-reha-magnetfeldtherapie-kassel-paderborn-eisenach-marburg-a a,
body[id*="bildergalerie"] li[id*="bildergalerie"] a, 
body[id*="hof"] li[id*="hof"] a, 
body[id*="weiden"] li[id*="weiden"] a, 
body[id*="reitplatz"] li[id*="reitplatz"] a, 
body[id*="bewegungshalle"] li[id*="bewegungshalle"] a, 
body[id*="boxen"] li[id*="boxen"] a, 
body[id*="sandpaddock"] li[id*="sandpaddock"] a 
{
color: var(--yah02);
background-color: var(--yah03); border: none;
}

/* u ... marked before */
body#waldgut-hoehnscheid-pferde-pension-kassel-marburg ul.navsub li#waldgut-hoehnscheid-pferde-pension-kassel-marburg-a a:before, 
body#waldgut-hoehnscheid-konzept-pferde-pension-paderborn ul.navsub li#waldgut-hoehnscheid-konzept-pferde-pension-paderborn-a a:before, 
body#waldgut-hoehnscheid-region-pferde-pension-eisenach ul.navsub li#waldgut-hoehnscheid-region-pferde-pension-eisenach-a a:before, 
body#aquatrainer-pferd-kassel-paderborn-eisenach-marburg ul.navsub li#aquatrainer-pferd-kassel-paderborn-eisenach-marburg-a a:before, 
body#aquatrainer-pferd-kassel-therapiekonzept ul.navsub li#aquatrainer-pferd-kassel-therapiekonzept-a a:before, 
body#pferde-reha-kassel-paderborn-eisenach-marburg ul.navsub li#pferde-reha-kassel-paderborn-eisenach-marburg-a a:before, 
body#pferde-reha-magnetfeldtherapie-kassel-paderborn-eisenach-marburg ul.navsub li#pferde-reha-magnetfeldtherapie-kassel-paderborn-eisenach-marburg-a a:before, 
body[id*="bildergalerie"] ul.navsub li[id*="bildergalerie"] a:before, 
body[id*="hof"] ul.navsub li[id*="hof"] a:before, 
body[id*="weiden"] ul.navsub li[id*="weiden"] a:before, 
body[id*="reitplatz"] ul.navsub li[id*="reitplatz"] a:before, 
body[id*="bewegungshalle"] ul.navsub li[id*="bewegungshalle"] a:before, 
body[id*="boxen"] ul.navsub li[id*="boxen"] a:before, 
body[id*="sandpaddock"] ul.navsub li[id*="sandpaddock"] a:before 
{
color: var(--yah04);
}

/* firstmenue */
body#home li#home-a a, 
body#wir-fliesenarbeiten-hildesheim li#wir-fliesenarbeiten-hildesheim-a a, 

:where( 
body#waldgut-hoehnscheid-pferde-pension-kassel-marburg, 
body#waldgut-hoehnscheid-konzept-pferde-pension-paderborn, 
body#waldgut-hoehnscheid-region-pferde-pension-eisenach ) li.drop input#drop-1 ~ span,
:where( 
body#aquatrainer-pferd-kassel-paderborn-eisenach-marburg, 
body#aquatrainer-pferd-kassel-therapiekonzept ) li.drop input#drop-2 ~ span,
:where( 
body#pferde-reha-kassel-paderborn-eisenach-marburg, 
body#pferde-reha-magnetfeldtherapie-kassel-paderborn-eisenach-marburg ) li.drop input#drop-3 ~ span,
:where( 
body[id*="bildergalerie"], body[id*="hof"], body[id*="weiden"], body[id*="reitplatz"], 
body[id*="bewegungshalle"], body[id*="boxen"], body[id*="sandpaddock"] ) li.drop input#drop-4 ~ span,

body#pferde-pension-kassel-paderborn-eisenach-marburg li#pferde-pension-kassel-paderborn-eisenach-marburg-a a, 
body#service-pferde-pension-eisenach li#service-pferde-pension-eisenach-a a, 
body#preisliste-aquatrainer-pferd-marburg li#preisliste-aquatrainer-pferd-marburg-a a, 
body#kontakt li#kontakt-a a, 
body#sitemap li#sitemap-a a 
{ 
color: var(--yah05);
background-color: var(--yah06); 
}