@font-face {
    font-family: 'Gabriola';
    src: url('font/Gabriola.woff') format('woff'),
         url('font/Gabriola.woff2') format('woff2');
}


/**************************/
/*     Content Styles     */
/**************************/
img {
    height:auto;
    max-width:100%;
}

img.left {
    margin: 0 2rem 1rem 0;
    float: left;
    clear: left;
}

img.right {
    margin: 0 0 1rem 2rem;
    float: right;
    clear: right;
}

img.rund {
    border-radius: 50%;
    border:.2rem solid #fff;
    box-shadow: 3px 3px 12px #777;
    margin:0 auto 0;
    display:block;
}
img.floatright {
    border-radius: 50%;
    border:.2rem solid #fff;
    box-shadow: 3px 3px 12px #777;
    float:right;
}
a img.floatright:hover {
    border-color: red;
}
img.oval {
    border-radius: 10px;
    border:.2rem solid #fff;
    box-shadow: 3px 3px 12px #777;
    margin:0 auto 0;
    display:block;
}
p.volleBreiteZentriert {
    max-width: none;
    text-align: center;
}
strong, b {
    font-weight: bold;
    letter-spacing: .06em;
    color:#20d;
}


a.linkbutton, .linkbutton {
    background:#eef;
    border-radius:10px;
    box-shadow:2px 2px 10px #669;
    border:1px solid #3be;

    letter-spacing:.05em;
    line-height:1.1;
    display:inline-block;
    padding:.1rem .7rem;
    margin:0;
    text-decoration:none;
}
a.linkbutton:before {
    content:"• ";
}
a.linkbutton:hover {
    background-color:#f00 !important;
    color:white;
}
button.linkbutton {
    margin:1em;
    padding:.5em;
    font-size:90%;
}
button.linkbutton:hover {
    box-shadow:4px 4px 14px #000;
}
/*******************/
/*      Start      */
/*******************/
html {
    font-size:100%;
}


body {
    font-family:  sans-serif;
    margin:0;
    font-size:1.2rem;
    line-height: 1.6;
}

/*******************/
/*    Navigation   */
/*******************/

.nav {
    width:100%;
    margin:0;
    padding:0;
    display: flex;
    justify-content:center;
   /*  border:2px solid red; */
    font-size:75%;
    background: #8df;
}
@media screen and (max-width: 900px) {
    .nav {
        display: none;
    }
}
.nav ul {
    list-style-type: none;
    padding:0;
    /* float:right;
    position:relative; */
    /* right:50%; */
    margin:0 auto;
    max-width:100%;
}
.nav ul li span {
    background:#cef;
    padding:9px 15px 3px;
    margin:-9px -15px -3px;
}
.nav ul li a {
    display:block;
    color:black;
    text-decoration: none;
    border:none;
    margin: 0 -3px;
    padding: 0 3px;
}
.nav ul.menulevel1 li a:hover {
    background:white;
    padding:0 15px;
    margin:0 -15px;
}
.nav ul.menulevel1 > li {
    line-height:1.3;
    letter-spacing: .1em;
	color: #000;
    border-left:1px solid #aaa;
    border-right:1px solid #aaa;
    float:left;
    margin:0px 0 0px -1px;
    padding: 0 15px;
    white-space: nowrap;
    float:left;
    position:relative;
    /* left:50%; */
}
.nav ul li > a {
	color: #000;
}
.nav ul.menulevel1 li.sdocs a {
    text-decoration: none;
    padding:0px 15px 0px;
    margin:-0px -15px -0px;

    background:#cef;
}
.nav ul.menulevel1 li ul.menulevel2 li a {
    text-decoration: none;
}
.nav ul.menulevel1 li.sdocs ul.menulevel2 li.sdocs a {
    text-decoration: underline;
}
.nav ul.menulevel1 li.sdocs ul.menulevel2 li.sdocs ul.menulevel3 li a {
    text-decoration: none;
}

.nav ul ul {
    background: rgba(255,255,250, 0.6);
    position:absolute;
    visibility: hidden;
    width:180px;
    padding: 1px 0 0;
    margin-top:-1px;
}
.nav ul.menulevel2 {
    left:0px;
    z-index:15;
}
.nav ul.menulevel1 li ul li {
    line-height: 1.2;
    border:none;
    width:160px;
    white-space: normal;
    margin: 0;
    padding: 8px 5px 8px 15px;
    position:relative;
}
.nav ul.menulevel1 li ul.menulevel2 li a{
    color:black;
    margin: -8px -5px -8px -15px;
    padding: 8px 5px 8px 15px;
}
.nav ul.menulevel2 li span {
    background:#fec;
    margin: -8px -5px -8px -15px;
    padding: 8px 5px 8px 15px;
    display:block;
}
.nav ul ul ul {
    left:178px;
    top:0;
    z-index:20;
}
.nav li:hover > ul {
    visibility: visible;
}




/***********************/
/*  Inhaltsverzeichnis */
/***********************/

#contents, #contents2 {
    text-align:left;
    font-size:1.4rem;
    line-height:1.6;
    display:none;
    margin:0 auto;
    max-width:22rem;
    background:#eef;
    border-radius:10px;
    box-shadow:2px 2px 10px #669;
    border:3px solid #3be;
}
#contents ul ul,#contents2 ul ul {
    margin-bottom:0;
}
#contents li a, #contents2 li a {
    color:#00a;
}
#contents li a:hover, #contents2 li a:hover {
    color:#a00;
    background:#ffb;
}
#contents span, #contents2 span {
    background:#ffb;
    padding:0 .2em;
    border-radius: 5px;
    color:#a00;
    border:1px solid #c00;
}

/***********************/
/*       Head          */
/***********************/

.header {
    text-align:center;
    margin:0 auto;
    background-image:linear-gradient(#8df, #fff 70%);
/*     border: medium dotted red; */
}
.header div.image2 {
    width:100%;
        background-image: url(images/background.svg);
        background-size: cover;
        background-repeat:no-repeat;
        min-height:80px;
/*      border: medium dotted red; */
}
.header img {
    max-width:50%;
    margin:0 auto;
    max-width:10rem;
    display:block;
/*     border: medium dotted blue; */
}
.header h1 {
    font: normal normal 3rem/1 Gabriola, cursive;
    color:#f00;
    margin:0;
    max-width:100%;
}
.header h1 a {
    color:#f00;
    text-decoration: none;
}
.header h1 a:hover {
     color:#fa0;
}
.header h2 {
    font: normal normal 1rem/1.6 Verdana, sans-serif;
    letter-spacing: .3rem;
    margin:0;
    color:black;
    text-shadow: 5px 5px 18px #fff,
                 5px -5px 18px #fff,
                 -5px 5px 18px #fff,
                 -5px -5px 18px #fff;
}
@media screen and (max-width: 1200px) {
    .header h1 {
        font-size:2.8rem;
    }
    .header h2 {
        font-size:.85rem;
    }
    .header img {
    max-width:8rem;
    }
    .header div.image2 {
        min-height:60px;
}
}
@media screen and (max-width: 1000px) {
    .header h1 {
        font-size:2.5rem;
    }
    .header h2 {
        font-size:.7rem;
    }
    .header img {
    max-width:7rem;
    }
    .header div.image2 {
        min-height:auto;
}
}
@media screen and (max-width: 800px) {
    .header h1 {
        font-size:1.9rem;
    }
    .header img {
    max-width:6rem;
    }
}

/****************************/
/* Hamburger + Searchfield  */
/****************************/
.top {
    max-width:60rem;
    margin: 0 auto;
display:flex;
justify-content: space-between;
}

.iconmenu {
    font-size:2rem;
    line-height:.5;
    max-width:60rem;
}
.iconmenu a {
    color: #66F;
    text-decoration:none;
}
.iconmenu a:hover {
    text-shadow: 5px 5px 8px #f00,
                -5px 5px 8px #f00,
                 5px -5px 8px #f00,
                -5px -5px 8px #f00;
     color:#fc0;

}
.instagram {
    width: 1.5rem;
    display: inline-block;
}

/**************************/
/*     Search field       */
/**************************/

#search {
    display: inline-block;
    position:relative;
    margin:0;
}
#search form {
    display: inline-block;
    vertical-align: top;
}
#search input {
    position:relative;
    top:-3px;
    background: URL(images/search.jpg) no-repeat left 1px white;
    border: 1px solid #aaa;
    cursor: text;
    padding:1px 0 1px 17px;
    color:#888;
    border-radius: .5em;
}
#search input:hover {
    border: 1px solid #fa0;
}
#search input:focus {
    border: 1px solid #fa0;
    color:black;
}
#search .button {
    position: absolute;
    top:3px;
    width:13px;
    background:none;
    border:none;
    cursor:pointer;
    z-index:100;
}
#search input.button:hover {
    border:none;
}


/***********************/
/*      Container     */
/***********************/

.container {
    background-image:linear-gradient(#bfb, #efe 200px);
    /* border:2px solid brown; */
}

/********************/
/*     Content      */
/********************/

.content {
    max-width: 100%;
    margin:0 auto;
    padding:2rem 2px;
    /* border: 2px solid red; */
}

.xh_mailform {
    max-width: 45rem;
    margin: 0 auto;
}

h1 {
    font: normal normal 3.5rem Gabriola, cursive;
	color:black;
    margin: 1rem 0 1em;
    line-height:1.1;
    max-width: 55rem;
    margin:0 auto 1rem;
}

h2 {
    font: bold normal 2.8rem Gabriola, cursive;
    color:#f03;
    line-height:1.0;
    margin:0 0 .2em;
    text-align:center;
}

h3 {
    font: normal bold 1.3rem  Verdana, sans-serif;
    margin:1em 0 .4em;
    letter-spacing:.05em;
    color:#e03;
    text-align:center;
}
h4 {
    font: normal normal 2.6rem Gabriola, cursive;
    color:#e03;
    margin:0 0 .5em;
    line-height:1;
    max-width: 55rem;
    margin:0 auto;
}
h5 {
    font: normal bold 2rem serif;
    letter-spacing:.05em;
    color:#559;
    max-width: 35rem;
    margin:1em auto .5em;
}

h6 {
    font: normal bold 1.7rem serif;
    margin:0 0 1em;
    max-width: 35rem;
    margin:1em auto .5em;

}
h6 a:hover {
    color:#b00;
    background:#ffa;
}
ul, ol, p, .submenu {
    margin:0 auto 1rem;
    max-width: 35rem;

}
#xh_adminmenu ul {
    max-width: 100%;
}

/* @media screen and (max-width: 1200px) {
    h6, p, ul li, ol li {
        font-size:1.2rem;
    }
    h1 {
        font-size:3rem;
    }
    h2, h4 {
        font-size:2.3rem;
    }
    h3, h5 {
        font-size:1.8rem;
    }

}
@media screen and (max-width: 1000px) {
    h6, p, ul li, ol li {
        font-size:1.1rem;
    }
    h1 {
        font-size:2.5rem;
    }
    h2, h4 {
        font-size:2rem;
    }
    h3, h5 {
        font-size:1.3rem;
    }

} */


@media screen and (max-width: 1000px) {
    .content {
        padding:2rem 5px;
    }
    h6, p, ul li, ol li {
        font-size:1rem;
    }
    h1 {
        font-size:2.3rem;
    }
    h2 {
        font-size:2.5rem;
    }
    h3 {
        font-size:1.2rem;
    }
    h4 {
        font-size:1.2rem;
    }
    h5 {
        font-size:1.5rem;
    }
    h6 {
        font-size:1.4rem;
    }

}


/**************************/
/*        Peanuts         */
/**************************/
#submenu h4 {
    float:none;
    margin:-7rem 0 0;
}
#submenu ul {
    list-style-type: none;
    padding:0;
    margin-bottom:4rem;
}
.footer .iconmenu {
    text-align:center;
    margin:1em 0 0 1em;
}
@media screen and (max-width: 1000px) {
    .footer .iconmenu {
        margin:1em 0 0;
    }
    #submenu h4 {
        margin:-5.5rem 0 0;
    }
}

.lastupdate {
    text-align:center;
    margin-top:3rem;

}

.loginlink a:hover {
    color:white;
    background:#4176CB;
    margin:0 -1em;
    padding:0 1em;
}
.loginlink {
    text-align:center;
    font-size:10px;
}
.loginlink a {
    color:#888;
    text-decoration:none;
}

audio {
    margin:0 auto;
    text-align:center;
    color:red;
}

#xh_adminmenu li {
    font-size:16px;
    line-height:1.25em;
}
/**************************/
/*         Extras         */
/**************************/

.termin {
    font-size:110%;
    letter-spacing: .1em;
    margin-bottom:0;
}
.termin + .termin {
    margin-top:0;
}
.small {
    font-size:75%;
    line-height:1;
}
.centerd {
    text-align: center;
}

.flexbox {
    display: flex;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
}
.flexbox div {
    max-width:250px;
    margin:.5rem;
    border-radius:.5rem;
    border:3px solid #fff;
    box-shadow: 2px 2px 8px #000;
}
.flexbox p {
    margin: .5em 0;
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
}
.flexbox div img {
    border-radius: 50%;
    border:.2rem solid #fff;
    box-shadow: 3px 3px 12px #777;
    margin:0 auto 0;
    display:block;
    max-width:200px;
}
.flexbox a, a.linkbutton {
    text-decoration: none;
    color:black;
}
.flexbox a:hover div {
    outline: 3px solid #000;
    outline-style:outset;
    box-shadow: 6px 6px 15px #000;
}

hr.lineup {
    margin:2em 0;
}


.lineuptable {
    display: flex;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;

}
hr.lineuptable {
    border:3px dashed green;
    margin:3em 0 1.5em;
}
h3.lineuptable {
    margin-top:.5em;
    letter-spacing:.2em;
}

.lineupcell {
    margin:.1rem;
    width:10rem;
    height:9rem;
    border-radius:.5rem;
    border:3px solid #fff;
    box-shadow: 2px 2px 8px #000;
    overflow:hidden;
    background-color:white;
}
.lineupcell p{
   margin: 0;
   line-height: 1.1;
}
.lineupcell a {
   text-decoration: none;
}
.lineupcell div:hover {
   background-color:white;
}
.lineupcell:hover, .essenangebot:hover {
   box-shadow: 2px 4px 14px #000;
}
.lineupcell h5 {
   margin: 0;
   color: #c00;
   font-size:1.2rem;
}
div.intablecell {
    margin:auto 0;
}
.essenangebot {
    padding: 2px .5em;
    border-radius:1em;
    letter-spacing:.1em;
    border:2px solid #ffff0f;
    box-shadow: 2px 2px 8px #000;
    background-color:#ffff0f;
}
.essenangebot:hover {
    border:2px solid red;
    background-color:white;
}
@media screen and (max-width: 910px) {
    .essenangebot a {
        letter-spacing:0;
        font-size:90%;
    }
}

.Yoga, a.linkbutton.Yoga, .flexbox div.Yoga {
    background:#bfffda;
}
.Heilarbeit, a.linkbutton.Heilarbeit, .flexbox div.Heilarbeit {
    background:#efbfff;
}
.Musik, a.linkbutton.Musik, .flexbox div.Musik {
    background:#ffff8f;
}
.Meditation, a.linkbutton.Meditation, .flexbox div.Meditation {
    background:#ffbfbf;
}
.Tanz, a.linkbutton.Tanz, .flexbox div.Tanz {
    background:#cfcfff;
}
.Kinder, a.linkbutton.Kinder, .flexbox div.Kinderprogramm {
    background:#cfffff;
}
.Essen, a.linkbutton.Essen, .flexbox div.Essen {
    background:#ffff0f;
}
.Rituale, a.linkbutton.Rituale, .flexbox div.Rituale {
    background:#ffee94;
}
.Weiteres, a.linkbutton.Weiteres, .flexbox div.Weiteres {
    background:#ffffff;
}



.xh_mailform textarea {
	max-width: calc(100% - 16px);
}

.xh_mailform .text, .xh_mailform textarea {
    font:normal normal 1.1rem Verdana, sans-serif;
    margin-left: 3px;
}


@media screen and (max-width: 810px) {
    .xh_mailform input.text {
        width:80%;
    }
}

.player {
    border-radius: 20px;
    box-shadow: 5px 5px 10px #555;
    border: 10px solid #aaa;
}

@media screen and (max-width: 810px) {
   .player {
        border-radius:0;
        box-shadow:0;
        border:none;
        width: 100%;
        height:auto;

    }
}
@media screen and (max-width: 600px) {
    .player {
        height: 250px;
    }
}
@media screen and (max-width: 500px) {
    .player {
        height: 200px;
    }
}
@media screen and (max-width: 400px) {
    .player {
        height: 160px;
    }
}