@import url('https://fonts.googleapis.com/css2?family=Charmonman:wght@400;700&display=swap&family=Caveat&display=swap');
@font-face {
  font-family: "Gaegu";
  src: url('font/fzGaegu-Regular.woff') format('woff'), /* Modern Browsers */
       url('font/fzGaegu-Regular.woff2') format('woff2'); /* Modern Browsers */
  }


/**************************/
/*     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(-3deg);
}
img.Rechts2Grad {
     transform: rotate(2deg);
}

strong {
    font-weight: bold;
    letter-spacing: .06em;
    color:#20d;
}

h1.no-margin {
    margin-bottom:0;
}

p.symboltrenner {
    background:url(images/ornament.gif) no-repeat center;
    margin:1.7em 0;
}
p.symboltrennerLeaves {
    background:url(images/leaves.gif) no-repeat center;
    margin:1.5em 0;
}
p.symboltrennerOM {
    background:url(images/om.gif) no-repeat center;
    margin:2em 0;
}
p.symboltrennerEYE {
    background:url(images/eye.gif) no-repeat center;
    margin:2em 0;
}
p.symboltrennerLotus {
    background:url(images/lotus.svg) no-repeat center;
    line-height: 55px;
    margin:1.6em 0;
}
a.linkbutton {
    text-weight:bold;
    letter-spacing:.05em;
    line-height:1.1;
    display:inline-block;
    color:black;
    text-decoration:none;
    padding:.3rem .5rem;
    margin:0;
    background-image: linear-gradient(135deg, #bbf, #fff, #bbf, #fff, #bbf, #fff, #bbf);
    border: .3rem outset #07b;
    border-radius:10%;
    box-shadow:2px 2px 7px #777;
}
a.linkbutton:hover {
    border: .3rem outset #b70;
    background-image: linear-gradient(135deg, #fbb, #fff, #fbb, #fff, #fbb, #fff, #fbb);
    }
h6.clear {
    clear:left;
}
@media screen and (max-width: 660px) {
    img.Links3Grad, img.Rechts2Grad {
        transform: none;
    }
    img {
        margin-left:-5px;
    }
}

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


body {
    font-family: Gaegu, sans serif;
    margin:0;
    font-size:1.5rem;
    line-height: 1.4;
}
h6, p, ul li, ol li {
    font-size:1.5rem;
    line-height: 1.4;
}
@media screen and (max-width: 500px) {
    h6, p, ul li, ol li {
        font-size:1.4rem;
    }
}

#body {
   background-image: url(images/zauberstab.png), linear-gradient(141deg, #000, #000 25%, #557 35%, white 50%, #eef 53%, white 58%, #eef 61%, white 63%, #eef 65%, white 68%, white 70%, #557 95%);
    background-position:right 20px bottom, center;
    background-repeat: no-repeat, no-repeat;
    background-attachment:fixed, fixed;
}

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


/***********************/
/*   side navigation   */
/***********************/


.sidenav {
    background-image: url(images/KAM-Logo.png);
    background-repeat: no-repeat;
    background-position: 20px top;
    min-width:200px;
    /* border: 3px dotted #960; */
    color:yellow;
    font: normal normal 1.1rem/1.3 "Gaegu", serif;
    margin-top:70px;

}
.sidenav div {
    background-image: url(images/KAM-Logo-invertiert.png);
    background-repeat: no-repeat;
    background-position: 20px top;
    min-height:235px;

}
.sidenav ul {
    margin:250px 0 0 25px;
    padding:0;
    list-style-type: none;

}
.sidenav ul ul {
    margin:.8rem 0 0 1rem;
}
.sidenav ul li {
    margin-bottom:1rem;
}
.sidenav ul li a {
    color:#999;
    text-decoration:none;
}
.sidenav ul li a:hover {
    background:#444;
    color:#bbb;

}

#rightspacer {
    min-width:200px;
    /*border:1px solid green;*/

}

@media screen and (max-width: 1400px) {
    #rightspacer {
        min-width:100px;
    }
    #body {
        background-position: right 20px top, center;

    }
}
@media screen and (max-width: 1300px) {
    #rightspacer {
        display:none;
    }
}
@media screen and (max-width: 1200px) {
    .sidenav {
        display:none
    }
}
@media screen and (max-width: 900px) {
    #body {
        background-image: linear-gradient(141deg, #000, #000 25%, #557 35%, white 50%, #eef 53%, white 58%, #eef 61%, white 63%, #eef 65%, white 68%, white 70%, #557 95%);
        background-position: center;
        background-repeat:  no-repeat;
        background-attachment: fixed;
    }
}


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

.header {
    text-align:center;
}
.header h1 {
    font: italic bold 6rem 'Charmonman', cursive;
    color:red;
    margin:1.5rem 0 0;
    line-height: 1;
    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: .5rem;
    word-spacing:5rem;
    margin: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:5rem;
    }
    .header h2 {
        font-size:1.8rem;
    }
    .header h3 {
        font-size:2.5rem;
    }
}
.iconmenu {
    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;
    margin:0 0 2.5rem;
}
.iconmenu a {
    color: #fcc;
    text-decoration:none;
    position:absolute;
    margin-left:-1em;
}
.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: 810px) {
    .iconmenu {
        font-size:2rem;
        word-spacing:7rem;
        margin:0 0 1.5rem;
        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 {
        margin-left:3px;
    }
}



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

.container {
    margin:0 auto 40px;
    max-width: 1240px;
    padding:0 2px;
    /* 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: 25px auto 10px;
    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:9rem;
    background: url(images/finished.svg)  no-repeat top;
}
@media screen and (max-width: 1040px) {
    div#Seite-b, div#Seite-d  {
        backgound:none;
        margin:0;
        padding:0;
        width:100%;
    }
    div#Seite-d {
        padding-bottom:1px;
    }
    div#Seite {
        width:100%;
        background: url(images/obererpapierrand2.gif) -50px top repeat-x;
    }
    div#Seite-c {
        background:url(images/gefaltetespapier.jpg) -50px top;
    }
}
@media screen and (max-width: 810px) {
    .content {
        margin:0;
        padding-left:5px;
    }
    div#Seite-c {
        background:url(images/gefaltetespapier.jpg) left 50px top;
    }
    div#Seite {
        background: url(images/obererpapierrand2.gif) left 50px top repeat-x;
    }

}

h1 {
    font: normal normal 3.5rem Charmonman;
	color:black;
    margin: 1rem 0 1em;
    line-height:1.1;
}

h2, h3, h4 {
    margin:0;
}
h2 {
    font: normal normal 2.6rem 'Caveat', swap;
    color:#4176CB;
    line-height:1.0;
    margin:0 0 .2em;
}

h3 {
    font: normal bold 1.7rem Georgia, serif;
    letter-spacing:.05em;
    color:#2166bB;
}
h4 {
    font: normal normal 2.6rem 'Caveat', swap;
    color:#4176CB;
    margin:0 0 .5em;
    line-height:1;
}
h5 {
    font: normal bold 1.7rem Georgia, serif;
    letter-spacing:.05em;
    color:#77a;
    margin:0;
}

h6 {
    font-weight:normal;
    margin:0 0 1em;
}
h6 a:hover {
    color:#b00;
    background:#ffa;
}
ul, ol, p {
    margin:0 0 1em;
}

h4, h5, h6 {
    width:240px;
}

@media screen and (max-width: 1200px) {
    h1 {
        font-size:3rem;
    }
    h2, h4 {
        font-size:2.3rem;
    }
    h3, h5 {
        font-size:1.5rem;
    }
}



/**************************/
/*        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 0 1em;
}
@media screen and (max-width: 810px) {
    .footer .iconmenu {
        margin:1em 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;
    padding: 0 0 100em;
}
.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         */
/**************************/

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

.player {
    border-radius: 20px;
    box-shadow: 5px 5px 10px #555;
    border: 10px solid #aaa;
}
.iframe {
    margin-left: -240px;
    width: calc(100% + 220px);
    height: 800px;
    border-radius: 20px;
    box-shadow: 5px 5px 10px #555;
    border: 10px solid #aaa;
}
@media screen and (max-width: 810px) {
    .iframe {
        margin-left: 3px;
        width: calc(100% - 10px);
        height: 400px;
        border-radius:0;
        box-shadow:0;
        border:none;
    }
    .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;
    }
}