HTML-Head

%STARTINCLUDE%

<!-- Einbinden der speziellen Schriftart, welche die PHSZ verwendet -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">

<style>

         .box, .widebox {
            margin:0.5em;
            padding: 1em;
            box-sizing:border-box;
            background: #D8D5D2;
            -moz-border-radius: 0.5em;
            -webkit-border-radius: 0.5em;
            border-radius: 0.5em;
         }
         .box {width:300px;}
         .widebox {width:600px;}

   .natWebMenuContents>ul>li>a ,
   .natWebMenuContents>ul>li>a.foswikiCurrentTopicLink  {
   background-color:white !important;
   color:black !important ;
   text-transform:lowercase;
   font-size: 125% !important;
   font-family: 'Roboto Slab';
   padding-left:0 !important }

   /* Sonderbehandlung des ersten Menueintrags */
   .natWebMenuContents>ul>li>.foswikiCurrentWebHomeLink {color:black !important ;}

   .natBodyLeft .natSideBar {
   margin-left:-17em;
   width:17em;
   }

  .natTopLeftContents {
    padding: 1.5em 0 0 0;
    margin-top: 1.0em;
  }

   .natBodyLeft .natMiddleContents {margin-left:17em}

   /* Spezielle Schriftart für die Titel in der linken Spalte */
   .natSideBar h2, .natSideBar h2 {font-family: 'Roboto Slab', serif;}

   /* Verkleinern des Suchfelds */
   .natWebMenu .natSearchBox {width: 120px !important}

  .natWebMenuContents>ul>li>ul>li>a {padding:12px 20px !important; font-family: 'Roboto Slab', serif;}

   /* Die vier Akzentfarben der PHSZ definieren für die linke Spalte und die Menus */

    div.farbe1 ul li a, 
   .natWebMenuContents>ul>li:nth-child(4n+0)>a:hover, 
   .natWebMenuContents>ul>li:nth-child(4n+0).sfHover>a {color:#FF9933 !important}
   .natWebMenuContents>ul>li:nth-child(4n+0)>ul>li>a {background-color:#FFF0DF !important}
   .natWebMenuContents>ul>li:nth-child(4n+0)>ul>li>a:hover {background-color:#ffb45f !important}

    /* grün */
   div.farbe2 ul li a, 
   .natWebMenuContents>ul>li:nth-child(4n+1)>a:hover, 
   .natWebMenuContents>ul>li:nth-child(4n+1).sfHover>a {color:#6EB92D !important}
   .natWebMenuContents>ul>li:nth-child(4n+1)>ul>li {background-color:#EBF5E4 !important}
   .natWebMenuContents>ul>li:nth-child(4n+1)>ul>li>a:hover {background-color:#9bcd78 !important}

   /* rot */
   div.farbe3 ul li a, 
   .natWebMenuContents>ul>li:nth-child(4n+2)>a:hover, 
   .natWebMenuContents>ul>li:nth-child(4n+2).sfHover>a {color:#F04B5A !important}
   .natWebMenuContents>ul>li:nth-child(4n+2)>ul>li {background-color:#fcdbde !important}
   .natWebMenuContents>ul>li:nth-child(4n+2)>ul>li>a:hover {background-color:#F04B5A !important}

   /* blau */ 
   div.farbe4 ul li a, 
   .natWebMenuContents>ul>li:nth-child(4n+3)>a:hover, 
   .natWebMenuContents>ul>li:nth-child(4n+3).sfHover>a {color:#6ebee6 !important}
   .natWebMenuContents>ul>li:nth-child(4n+3)>ul>li {background-color:#e2f2fa !important}
   .natWebMenuContents>ul>li:nth-child(4n+3)>ul>li>a:hover {background-color:#6ebee6 !important}

   /* Das ursprüngliche Hintergrundbild des natskins abschalten */
  .natBody {background: none !important}

.natBodyLeft .natSideBarContents {
    border-right: 1px solid #d5d6dd;
    padding: 1em 2em 0 1px;
}

  .natPanelToggle, .natPanelToggle a {
      background-color: grey;
      padding: .3em .7em .3em .7em} 

  a.inlinemenu { display: inline !important;}
  h2, h3 {color: black !important;} 
  div.natTopShadow {border-top: 5px solid grey;}   
  .natWebLogoImage {width:585px !important; height: auto !important;max-width:100%}

    ul.polaroids li { display: inline; }
   ul.polaroids a { background: #fff; display: inline; float: left; margin: 0 0 27px 30px; width: auto; padding: 10px 10px 15px; text-align: center; font-family: "Marker Felt", sans-serif; text-decoration: none; color: #333; font-size: 11px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); }
    ul.polaroids li {
      padding-left: 0;
    }
    @media screen and (max-width: 768px) {
      ul.polaroids li a {
        margin-left: 0;
      } 
    }
 ul.polaroids img { display: block; width: 100px; margin-bottom: 12px; }
 ul.polaroids a:after { content: attr(title); }

 ul.polaroids li:nth-child(even) a { -webkit-transform: rotate(2deg);  -moz-transform: rotate(2deg); }
 ul.polaroids li:nth-child(3n) a { -webkit-transform: none; position: relative; top: -5px;  -moz-transform: none; }
 ul.polaroids li:nth-child(5n) a { -webkit-transform: rotate(5deg); position: relative; right: 5px;  -moz-transform: rotate(5deg); }
 ul.polaroids li:nth-child(8n) a { position: relative; right: 5px; top: 8px; }
 ul.polaroids li:nth-child(11n) a { position: relative; left: -5px; top: 3px; }

 ul.polaroids li.messy a {
      margin-top: -400px;
      position: relative;
      left: 160px;
    }

 ul.polaroids li a:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; }

/* 
      Alle Einstellungen zum Footer
     -------------------------------------------------------------------------------------------------------------------------------------------------------
*/

@font-face {
    font-family: 'MuseoSans-Light';
    src: url('%PUBURL%/Main/SiteHtmlHead/museosans_300.woff2') format("woff2");
    font-display: swap
}
@font-face{
    font-family:'Museo-Bold';
    src:url('%PUBURL%/Main/SiteHtmlHead/museo_700.woff2') format("woff2");
    font-display:swap
}

.natBottomBarContents {
   margin-left:0px !important;
}

.natBottomBar {
   background-color:#F04B5A;
   overflow: hidden;
}
.natBottomBarContents {
   font-family: MuseoSans-Light;
   font-size:18px;
   color: white;
   max-width:90% !important;
   display:box;
}
.natBottomBarContents a,
.natBottomBarContents a:visited,
.natPageCacheBanner
 {color: white; text-decoration: none;}

.natBottomBarContents a:hover {color: white; text-decoration: underline;}

.footer-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 40px;
    margin-bottom:40px;
    width:100%
}
.footer-logos img {margin-bottom: 20px;}

/* 
      Alle Einstellungen zu Kontakten etc.
     -------------------------------------------------------------------------------------------------------------------------------------------------------
*/

*, *::before, *::after {
    box-sizing: border-box;
}

.kontakt-footer{
    background-color: #EBE6E1;
    padding: 60px 0;
    margin-top: -37px;
    margin-left: -36px;
    margin-right: -14px;
    margin-bottom: 60px;
}
.kontakt-footer,
.kontakt-footer a,
.kontakt-footer a:hover,
.kontakt-footer a:visited {
   color:#000
}

.content__contact h3 {
    text-align: left;
    box-sizing: border-box;
    margin-top: 0;
    font-family: Museo-Bold;
    font-style: normal;
    font-stretch: normal;
    font-weight: 400;
    hyphens: none;
    word-wrap: normal;
    font-size: 1.4625rem;
    line-height: 1.25;
    margin-bottom: 30px;
    letter-spacing: 0;
    color: #000;
}

.container,.container-fluid,.container-sm,.container-md,.container-lg,.container-xl,.container-xxl{
    width:100%;
    padding-right:15px;
    padding-left:15px;
    margin-right:auto;
    margin-left:auto;
    display: block;
}

.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col,.col-auto,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm,.col-sm-auto,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-md,.col-md-auto,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg,.col-lg-auto,.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl,.col-xl-auto,.col-xxl-1,.col-xxl-2,.col-xxl-3,.col-xxl-4,.col-xxl-5,.col-xxl-6,.col-xxl-7,.col-xxl-8,.col-xxl-9,.col-xxl-10,.col-xxl-11,.col-xxl-12,.col-xxl,.col-xxl-auto{
    position:relative;
    width:100%;
    padding-right:15px;
    padding-left:15px
}

@media (min-width:576px){
    .container,.container-sm{
        max-width:540px
    }
}
@media (min-width:768px){
    .container,.container-sm,.container-md{
        max-width:680px
    }
}
@media (min-width:992px){
    .container,.container-sm,.container-md,.container-lg{
        max-width:860px
    }
}
@media (min-width:1150px){
    .container,.container-sm,.container-md,.container-lg,.container-xl{
        max-width:1120px
    }
}
@media (min-width:1404px){
    .container,.container-sm,.container-md,.container-lg,.container-xl,.container-xxl{
        max-width:1344px
    }
}
.content__contact{
    margin-top:0;
    margin-bottom:0
}

.row{
    display:flex;
    flex-wrap:wrap;
    margin-right:-15px;
    margin-left:-15px
}

.col{
    flex-basis:0;
    flex-grow:1;
    max-width:100%
}
.row-cols-1>*{
    flex:0 0 100%;
    max-width:100%
}
.row-cols-2>*{
    flex:0 0 50%;
    max-width:50%
}
.row-cols-3>*{
    flex:0 0 33.33333%;
    max-width:33.33333%
}
.row-cols-4>*{
    flex:0 0 25%;
    max-width:25%
}
.row-cols-5>*{
    flex:0 0 20%;
    max-width:20%
}
.row-cols-6>*{
    flex:0 0 16.66667%;
    max-width:16.66667%
}
.col-auto{
    flex:0 0 auto;
    width:auto;
    max-width:100%
}
.col-1{
    flex:0 0 8.33333%;
    max-width:8.33333%
}
.col-2{
    flex:0 0 16.66667%;
    max-width:16.66667%
}
.col-3{
    flex:0 0 25%;
    max-width:25%
}
.col-4{
    flex:0 0 33.33333%;
    max-width:33.33333%
}
.col-5{
    flex:0 0 41.66667%;
    max-width:41.66667%
}
.col-6{
    flex:0 0 50%;
    max-width:50%
}
.col-7{
    flex:0 0 58.33333%;
    max-width:58.33333%
}
.col-8{
    flex:0 0 66.66667%;
    max-width:66.66667%
}
.col-9{
    flex:0 0 75%;
    max-width:75%
}
.col-10{
    flex:0 0 83.33333%;
    max-width:83.33333%
}
.col-11{
    flex:0 0 91.66667%;
    max-width:91.66667%
}
.col-12{
    flex:0 0 100%;
    max-width:100%
}

@media (min-width:992px){

    .col-lg-6{
        flex:0 0 50%;
        max-width:50%
    }
}

.page__default--bottom{
    background-color:#EBE6E1;
    padding:60px 0;
    margin-top:60px;
    margin-left: -60px;
    margin-right: -30px;
    margin-bottom: -99px;
}

.contact__item{
    margin-bottom: 30px;
    font-size: 1.125rem;
    line-height: 1.55556;
    font-family: MuseoSans-Light;
    font-style: normal;
    font-stretch: normal;
    font-weight: 400;
}

.contact__item--inner{
    background-color:#fff;
    padding:30px;
    display:flex
}
@media (min-width:992px){
    .contact__item--inner{
        height:100%
    }
}
@media (max-width:991.98px){
    .contact__item--inner{
        flex-wrap:wrap;
        justify-content:center
    }
}
.contact__item--image{
    flex:0 0 126px
}
@media (max-width:767.98px){
    .contact__item--image{
        margin-bottom:24px
    }
}
@media (min-width:768px){
    .contact__item--image{
        margin-right:30px
    }
}
.contact__item--image .contact__item--image-inner{
    border-radius:100%;
    overflow:hidden;
    position:relative;
    width:126px;
    height:126px
}
.contact__item--image img{
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
    height:auto;
    max-width:100%
}
.contact__item--infos,
.contact__item--infos h3{
    text-align:center;
    width:100%
}
@media (min-width:768px){
    .contact__item--infos,
    .contact__item--infos h3{
        text-align:left;
        flex:1
    }
}
@media (min-width:992px){
    .contact__item--infos{
        display:flex;
        flex-direction:column
    }
}
.contact__item--infos h3{
    color:#000
}
.contact__item--infos p{
    margin-bottom:0;
    margin-top:0;
}
.contact__item--detail-link{
    margin-top:30px;
    font-family: Museo-Bold;
    font-style: normal;
    font-stretch: normal;
    font-weight: 400;
}
@media (min-width:992px){
    .contact__item--detail-link{
        margin-top:auto;
        padding-top:30px
    }
}
.contact__item--detail-link a{
    letter-spacing:.09px;
    color:#000;
    padding:0 57px 0 0;
    text-decoration:none;
    position:relative
}

.contact__item--infos{
    text-align:center;
    width:100%
}
@media (min-width:768px){
    .contact__item--infos{
        text-align:left;
        flex:1
    }
}
@media (min-width:992px){
    .contact__item--infos{
        display:flex;
        flex-direction:column
    }
}
.contact__item--infos h3{
    color:#000
}
.contact__item--infos p{
    margin-bottom:0
}
.contact__item--detail-link{
    margin-top:30px
}
@media (min-width:992px){
    .contact__item--detail-link{
        margin-top:auto;
        padding-top:30px
    }
}
.contact__item--detail-link a{
    letter-spacing:.09px;
    color:#000;
    padding:0 57px 0 0;
    text-decoration:none;
    position:relative
}
.contact__item--detail-link a:hover,.contact__item--detail-link a:focus{
    text-decoration:none;
}

.contact__item--detail-link a::before{
    content:'';
background-image: url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26.568 19.439'%3E%3Cg transform='translate(0.65 0.919)'%3E%3Cline x2='8.8' y2='8.8' transform='translate(16.199)' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.3'/%3E%3Cline y1='8.8' x2='8.8' transform='translate(16.199 8.801)' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.3'/%3E%3Cline x2='25' transform='translate(0 8.883)' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.3'/%3E%3C/g%3E%3C/svg%3E);
    height:18px;
    width:25px;
    position:absolute;
    right:20px;
    top:2px;
    z-index:10;
    transition:all 0.2s ease-in-out;
background-color: transparent;
    background-position: 50%;
    background-repeat: no-repeat;
    display: inline-block;
}

.contact__item--detail-link a:hover::before,.contact__item--detail-link a:focus::before{
    background-image:url("data:image/svg+xml; charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26.568 19.439'%3E%3Cg transform='translate(0.65 0.919)'%3E%3Cline x2='8.8' y2='8.8' transform='translate(16.199)' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.3'/%3E%3Cline y1='8.8' x2='8.8' transform='translate(16.199 8.801)' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.3'/%3E%3Cline x2='25' transform='translate(0 8.883)' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.3'/%3E%3C/g%3E%3C/svg%3E");
    height:18px;
    width:25px;
    right:14px
}

/* Michaels Ergänzungen: */

.natBottomBarContents {
    margin-left: auto !important;
    display: block;
}

.kontakt-footer .content__contact {
     position:relative;
     margin-left: 1em;
}
.kontakt-footer .content__contact:before {
    content: "";
    display: block;
    position: absolute;
    background: #ebe6e2;
    left: -5000px;
    width: 10000px;
    top: -60px;
    height: calc(100% + 120px);
}
.kontakt-footer .content__contact > * {
    z-index:2;
    position: relative;
}

.natWebMenu {
    border-bottom: 0px;
    margin-bottom: 2em;
}
.natBodyLeft .natSideBarContents {
    border-right: 0;
}
h2 {
    border-bottom: 0px;
}
.natSideBar li {
    padding: 0.6285em 0;
    border-bottom: 0px;
}

</style>

<link href='https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.css' rel='stylesheet'  />
<link href='https://beat.doebe.li/bibliothek/css/buch.css' rel='stylesheet' type='text/css'/>

%ADDTOZONE{ 
  "script" 
  requires="JQUERYPLUGIN"
  text=" 
<script src='https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.js'></script>
<script src='https://beat.doebe.li/bibliothek/js/buch.js'></script>
<script src='https://beat.doebe.li/bibliothek/js/jquery.matchHeight-min.js'></script>
  "}% 

%STOPINCLUDE%