@import url('https://fonts.googleapis.com/css2?family=Charmonman:wght@700&display=swap&family=Caveat&display=swap');


/**************************/
/*     Content Styles     */
/**************************/
img {
    border: .2rem solid #fff;
    box-shadow: 6px 6px 12px #777;
    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%;
    width:11rem;
    border:.2rem solid #fff;
    box-shadow: 3px 3px 12px #777;
    margin:0 auto 2rem;
    display:block;
}
img.Links3Grad {
     transform: rotate(-5deg);
}
img.Rechts2Grad {
     transform: rotate(4deg);
}
img.gross {
    margin-left:-125px;
}
img.gross-nicht-Handy{
    margin-left:-125px;
}
@media screen and (max-width: 910px) {
    img.gross {
        margin-left:0px;
    }
    img.gross-nicht-Handy {
        display: none;
        margin:none;
    }
}

span.wichtig {
    border-bottom: 3px solid #c30;;
}
span.groesser {
    font-size:125%;
}
span.kleiner {
    font-size:75%;
}
strong, b {
    font-weight: bold;
    letter-spacing: .06em;
    color: #a30;
}


p.symboltrenner {
    background:url(images/ornament.gif) no-repeat 50%;
    margin:2rem 0;
}
p.symboltrennerLeaves {
    background:url(images/leaves.gif) no-repeat 50%;
    margin:2rem 0;
}
p.symboltrennerOM {
    background:url(images/om.gif) no-repeat 50%;
    margin:2rem 0;
}
p.symboltrennerEYE {
    background:url(images/eye.gif) no-repeat 50%;
    margin:2rem 0;
}
p.symboltrennerLotus {
    background:url(images/lotus.svg) no-repeat 50%;
    line-height: 55px;
    margin:2rem 0;
}
a.linkbutton {
    letter-spacing:.05em;
    line-height:1.1;
    font-size:1.1rem;
    display:inline-block;
    color:black;
    font-weight:bold;
    text-decoration:none;
    padding:.3rem .5rem;
    margin:0;
    background-image: linear-gradient(135deg, #fed, #fff, #fed, #fff, #fed, #fff, #fed);
    border: .3rem outset #b70;
    border-radius:10%;
    box-shadow:2px 2px 7px #777;
}
a.linkbutton:hover {
    background-image: linear-gradient(135deg, #cdf, #fff, #cdf, #fff, #cdf, #fff, #cdf);
    border: .3rem outset #07b;
    }

@media screen and (max-width: 660px) {
    img.Links3Grad, img.Rechts2Grad {
        transform: none;
    }

    img, img.left, img.right{
        margin: 0 auto 1rem;
        float: none;
        display: block;
    }
}

/*******************/
/*      Start      */
/*******************/
html {
    font-size:100%;
}


body {
    font-family: Verdana, sans serif;
    margin:0;
    font-size:1.1rem;
    line-height: 1.6;
}
@media screen and (max-width: 750px) {
    h6, p, td, ul li, ol li {
        font-size:1rem;
    }
}

#body {
    background-image: url(images/Studio.jpg);
    background-size: cover;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed;
}


#flexcontainer {
  display: flex;
  width: 100%;
  justify-content: space-around;
  /* border: 3px solid red; */
}


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

.header {
    text-align:center;
    /* border: 3px solid green; */
    margin:0;
    padding:0 0 1rem;
}

.header h1 {
    font: italic bold 6rem 'Charmonman', cursive;
    color:red;
    margin:.8rem 0 0rem;
    line-height: 1.6;
    text-shadow: 1px 1px 8px #000,
                 1px -1px 8px #000,
                 -1px 1px 8px #000,
                 -1px -1px 8px #000,
                 16px 6px 12px #555;
}
.header h1 a {
    color:red;
    text-decoration: none;
}
.header h1 a:hover {
    text-shadow: 3px 3px 8px #500, 0 0 12px #000;
     color:#fa0;
}

.header h2 {
    font: normal normal 2rem Verdana, sans-serif;
    letter-spacing: .1rem;
    //word-spacing:5rem;
    margin:0 0 .5rem 0;
    color:black;
    text-shadow: 5px 5px 18px #fff,
                 5px -5px 18px #fff,
                 -5px 5px 18px #fff,
                 -5px -5px 18px #fff;
}
.header h2 a {
    color:black;
    text-decoration: none;
}
.header h2 a:hover {
    text-shadow: 3px 3px 8px #000, 0 0 12px #000;
     color:#fc0;
}
.header h3 {
    font: normal bold  3rem Georgia, serif;
    letter-spacing: .2rem;
    color:white;
    text-shadow: 3px 3px 8px #000, 0 0 12px #666;
    margin:.5rem 0 .8rem;
}
.header h3 a {
    color:white;
    text-decoration:none;
}
.header h3 a:hover {
    /* word-spacing:.2em; */
    font-style: italic;
}
@media screen and (max-width: 1200px) {
    .header h1 {
        font-size:4rem;
    }
    .header h2 {
        font-size:1.8rem;
    }
    .header h3 {
        font-size:2.5rem;
    }
}
@media screen and (max-width: 700px) {
    .header h1 {
        font-size:3rem;
    }
    .header h2 {
        font-size:1.4rem;
    }
    .header h3 {
        font-size:2.0rem;
    }
}
.iconmenu {
    display:none;
    text-align:center;
    font-size:1.6rem;
    word-spacing:10rem;
    line-height:2rem;
        text-shadow: 2px 2px 28px #005,
                     -2px -2px 28px #005,
                     -2px 2px 28px #005,
                     2px -2px 28px #005,
                     0 0 20px #005;
}
.bottom {
        text-shadow: none !important;
}
.header .iconmenu {
    margin:3rem 0 0;
}
.iconmenu a {
    color: #fcc;
    text-decoration:none;
    position:absolute;
    margin-left:-.5rem;
}
.iconmenu a:hover {
    font-size:1.4em;
    line-height:2rem;
    text-shadow: 5px 5px 8px #f00,
                -5px 5px 8px #f00,
                 5px -5px 8px #f00,
                -5px -5px 8px #f00;
     color:#fc0;
    
}
@media screen and (max-width: 900px) {
    .iconmenu {
        font-size:2rem;
        word-spacing:7rem;
        margin:0;
        text-shadow: 3px 3px 18px #005,
                     -3px -3px 18px #005,
                     -3px 3px 18px #005,
                     3px -3px 18px #005,
                     0 0 20px #005;
    }
    .iconmenu a {
        margin-left:-.5em;
    }
    .header .iconmenu {
        margin:0rem 0 0;
    }

    .header {
        margin-left:0px;
        /* border:2px solid red; */
        background-image: url(images/Studio.jpg);
        background-size: contain;
        background-attachment: fixed;

    }
}

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

.nav {
    width:100%;
    margin:0;
    padding:0;
    display: flex;
    justify-content:center;
   /*  border:2px solid red; */

    /* background: #8df; */
}
@media screen and (max-width: 900px) {
    .nav {
        display: none;
    }
    .iconmenu {
        display:block;
    }
}
.nav ul {
    list-style-type: none;
    padding:0;
    margin:0 auto;
    max-width:100%;
}

.nav ul li span {
    /* background:#cef; */
    border:2px solid white;
    border-radius: 1em;
    color:white;
    padding:3px 12px 6px;
    margin:-3px -12px -6px -12px;

}
.nav ul li a {
    display:block;
    text-decoration: none;
    border:none;
    margin: 0;
    padding: 0;
        text-shadow: 5px 5px 10px #000,
                 5px -5px 10px #000,
                 -5px 5px 10px #000,
                 -5px -5px 10px #000;
}
.nav ul.menulevel1 li a:hover {
    background:white;
    text-shadow:none;
    border-radius: 1em;
    color:black;
    padding:3px 12px 6px;
    margin:-3px -12px -6px;
}
.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: white;
}
.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;
}




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

.container {
    margin:0 auto 40px;
    max-width: 1240px;
    padding:0 2px;
    overflow: hidden;
    /* border:2px solid brown; */
}
#contents, #contents2 {
   display:none;
   margin:0 auto;
   max-width:22rem;
   background:white;
   border-radius:15px;
   box-shadow:5px 5px 10px #444;
   border:6px inset #37b;
   background-image: linear-gradient(141deg, #eef, #fff 25%, #eef 35%, white 50%, #eef 53%, white 58%, #eef 61%, white 63%, #eef 75%, white 78%, white 80%, #ddd 95%);
}
#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;
}
/********************/
/*     Content      */
/********************/

.content {
    padding:2rem 0 0 0;
    margin-left:250px;
    /* border: 2px solid red; */
}


div#Seite {
    background: url(images/obererpapierrand2.gif) -35px top repeat-x;
    margin: 0 auto 0;
    width:66rem;
    padding-top:4px;
}
div#Seite-b {
    background: url(images/rechterpapierrand.gif) right top repeat-y;
    margin: 0;
    padding:0;
}
div#Seite-c {
    background:url(images/gefaltetespapier.jpg) -35px top;
    margin-right: 5px;
}
div#Seite-d {
    background: url(images/papierschatten.gif) left top repeat-y;
    margin:0;
    padding: 16px 15px  20px 20px;
    /*border:3px solid green;*/
}
.finish {
    height:220px;
    background: url(images/sriyantra.svg)  no-repeat top;
    background-size: 200px;
}
.leerraum {
    min-height:70rem;
    margin:0;
    padding:0;
}
.leerraum img {
    display:none;
}


@media screen and (max-width: 1010px) {
    .content {
        padding:2rem 3px 0;
        max-width:40rem;
        margin:0 auto;
    /*  border: 2px solid red; */
    }
div#Seite-b, div#Seite-d  {
        background-image:none;
        margin:0;
        padding:0;
        width:100%;
    }
    div#Seite-d {rgb(236,230,230)
        padding-bottom:1px;
    }
    div#Seite {
        width:100%;
        background: url(images/obererpapierrand2.gif) -280px top repeat-x;
        //border:5px solid red;
    }
    div#Seite-c {
        background:url(images/gefaltetespapier.jpg) -280px top;
        //background-image:none;
    }
}
@media screen and (max-width: 900px) {
    .container {
        margin:0 auto 0;
    }
    .finish {
        display:none;
    }
    .leerraum {
        min-height:0;
    }
    .leerraum img {
        display:block;
        border: none;
        box-shadow: none;
    }
    div#Seite {
        background-image:none;
        background-color:rgb(236,230,230);
        box-shadow: 0 -5px 10px #fee;
    }
    div#Seite-c {
        background-image:none;
    }

}


h1 {
    font: normal bold 3.5rem Charmonman;
    color: #b30;
    margin: 0rem 0 1rem;
    line-height:1.1;
}

h2 {
    font: normal bold 2rem Charmonman;
    line-height:1.0;
    margin:.8em 0 .2em;
    color: #a30;
}

h3 {
    font: italic bold 1.7rem Georgia, serif;
    letter-spacing:.05em;
    margin:.5em 0 .2em;
    color: #b50;
}
h4 {
    font: normal bold 2.2rem Charmonman;
    color: #090;
    line-height:1.4;
    margin:0;

}
h5 {
    font: normal bold 1.7rem Georgia, serif;
    letter-spacing:.05em;
    color:#669;
    margin:.2em 0;
}

h6 {
    font: normal bold 1.4rem Georgia, serif;
    margin:1em 0 .5em;
    color: #b30;
}

ul, ol, p {
    margin:0 0 1em;
}
td {
    padding:.1em .4em;
}

@media screen and (max-width: 900px) {
    h1 {
        font-size:3rem;
        text-align: center !important;
        /* border: 2px solid red; */
    }
    h2 {
        font-size:2.3rem;
    }
    h4 {
        font-size:1.9rem;
    }
    h3, h5 {
        font-size:1.5rem;
    }
}

.login {
    text-align:right;
    font-size:80%;
    }
.login a {
    text-decoration:none;
    color:#f0e7e0;
    }
.login a:hover {
    color:black;
    }

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


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

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

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

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

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



.responsive_map {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
responsive_map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}