figure { margin:0; }
header figure {
    margin: 1px;
}
figcaption { display:none; }

ul {
    padding: 0;
    list-style: none;
}

h1, h2, h3 {
    font-style: italic;
}
h1 {
    text-align: center;
    font-size: 3rem;
    line-height: 2.4rem;
}
h1 span {
    font-family: sans-serif;
    font-style: normal;
    color: hsla(206, 64.4%, 57.1%, 1);
}

header figure {
    text-align: center;
    line-height: 15px;
}
footer  {
    margin-top: 12px;
    background-color:  hsla(206, 64.4%, 57.1%, 0.5);
}

.meta {
    display: flex;
    justify-content: space-between;
    margin:  0;
    background-color: hsla(206, 64.4%, 57.1%, 1);
}
.meta li {
    background-color:  hsla(206, 64.4%, 57.1%, 1);
}
.meta li a {
    display: block;
    line-height: 2.6rem;
    text-align: center;
    color: #fff;
    font-family: sans-serif;
    text-decoration: none;
    font-size: 1.4rem;
}

ul.navlist,
nav .nr {
    padding:4px;
    margin: 0;
    display: flex;
    justify-content: space-between;         
}
ul.navlist li,
nav .nr li {
    border-radius: 50%;
    background-color:  hsla(206, 64.4%, 57.1%, 1);
    display: flex;
    align-items: center;
    justify-content: center;      
}
ul.navlist li.active,
nav .nr li.active,
nav .nr li:hover {
    background-color: #fff;
    border: 1px solid hsla(206, 64.4%, 57.1%, 1);
}
ul.navlist li a,
nav .nr li a {
    width: 100%;
    display: block;
    color: white;
    font-family: sans-serif;
    text-align: center;
    text-decoration: none;
    font-size: 1.4rem;
}
ul.navlist li.active a,
nav .nr li.active a,
nav .nr li:hover a{
    color: hsla(206, 64.4%, 57.1%, 1);
}

ul.navlist {
    flex-wrap: wrap;
    width: 352px; /* muss auf jede bildschirmbreite angepasst werden*/
}
ul.navlist li {
    flex: 0 0 18%;
    margin: 8px;  
}
ul.navlist li a { 
    line-height: 3.6rem;
}

.wrapper {
    position: relative;
}

.modal {
    /*! width: 360px; */
}
.content p {
    padding: 0 8px;
    margin: 6px 0 4px 0;
}
.content h2 {
    padding: 12px 8px 0 8px;
}
.nrnr {
   display: none;
}
.nahreisen,
.editorial,
.kalender,
.kontakt,
.reservations {
    color:transparent;
    display: inline-block;
    width:2.4rem;
    background: url(./imgs/click.svg) no-repeat center center;
    background-size: 2rem 2rem;
    line-height:2rem;
}
.kontakt {
    background-image: url(./imgs/kontakt.svg);
}
.editorial {
    background-image: url(./imgs/editorial.svg);
}
.kalender {
    background-image: url(./imgs/kalender.svg);
}
.reservations {
    background-image: url(./imgs/reservations.svg);
}

p {
    font-size: 1.2rem;
    line-height: 1.8rem;
}
p.edito {
    font-size: 1.8rem;
}

.reiseinfos>div {
/*    background-color:  hsla(206, 64.4%, 57.1%, 0.2);*/
    padding: 4px;
    margin-bottom: 8px;
}
.reiseinfos h2 {
    margin: 6px 0 0 0;
}
.reiseinfos p {
    margin: 4px 0;

}
.dates p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.dates p:not(:last-child) {
    margin-bottom: 12px;
}

.accordion h3 {
    display: none;
}

#editorial {
    margin: 0 12px;
}
.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 1.2rem;
  line-height: 1.4rem;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn:hover,
.btn:focus,
.btn.focus {
  color: #333333;
  text-decoration: none;
}
.btn:active,
.btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
  -webkit-box-shadow: none;
  box-shadow: none;
}
a.btn.disabled,
fieldset[disabled] a.btn {
  pointer-events: none;
}

.nrcolor {
  color: hsla(206, 64.4%, 57.1%, 1);
}
.nrbgcolor-bg {
  background-color: hsla(206, 64.4%, 57.1%, 1);
}
.btn.nrbgcolor-bg {
    color: #fff;
}
.nrbgcolor-lighten {
  background-color:hsla(206, 64.4%, 57.1%, 0.2);
}
.nrbgcolor-nav {
  background-color:hsla(206, 64.4%, 57.1%, 0.4);
}
main aside .termin {
    padding: 12px 24px 12px 4px;
/*    margin-left: 24px;*/
    line-height: 2rem;
    background: url(imgs/calendar.nr.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 80%;
}
.medium h2 {
    margin:  24px 0 6px 0;
}
.medium p {
    margin: 0;
}
.partner {
    padding-top: 1px;
}
footer .partner li {
    margin-bottom: 24px;
}
footer .partner img {
    display: block;
    width: 90%;
    margin:  0 auto;
}
.impressum,
.supplement,
.overview {
    margin: 0;
}

.medium li {
    line-height: 2rem;
}
/*** ausblenden < 811px ***/
header .partner {
    display: none;
}

nav .nr {
    top: 8vh;
    display: none
}

footer ul {
    margin: 0;
}
footer .meta {
    display: none;
}
footer .col {
    flex: 0 32%;
    padding: 0 8px;
} 
/*** /ausblenden ***/

@media only screen and (min-width: 811px) {
    body {
        background-image: url(./imgs/wave.white.svg);
        background-size: 48px;
        background-repeat: repeat-x;
        background-position: center -360px;
        padding: 0;
        margin: 0;
        background-color: hsla(206, 64.4%, 57.1%, 0.2);
    }
    .wrapper {
        width: 780px;
        border: 1px solid black;
        border-top:  none;
        border-bottom:  none;
        background-color: #fff;
        padding: 12px 0 0 0;
        margin: 0 auto;
    }
    header {
        display: flex;
        flex-direction: row-reverse;
        padding:  0 8px;
        margin-bottom: 8x;
    }
    header .partner {
        display: flex;
        width:  182px;
        margin-left: 8px;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    header .partner>a {
        flex: 1 0 100%;
        margin-bottom: 4px;
    }
    header .partner img {
        display: inline-block;
        width: 100%;
    }
    footer .partner {
        display: none;
    }
    nav .meta {
        display: none;
    }
    nav .nr {
        display: flex;
    }
    nav .nr li {
        width: 42px;
        height: 42px;
    }
    nav .nr li a {
        font-size: 1.2rem;
    }        

    li {
        margin: 0;
        padding: 4px 8px;
    }
    
    .main {
        display: flex;
        justify-content: space-between;     
    }
    .nrnr {
         padding-right:21px;      
    }
    .reiseinfos {
        /*! flex: 0 1 300px; */
        order: 2;
        padding: 0 12px;
        width: 320px;
    }
    .reiseinfos>div {
        border-radius: 8px;
    }
    .reiseinfos>div>* {
        padding: 0 8px;
    }
    .dates p {
        justify-content: flex-start;
    }
    .dates time {
        margin-right: 12px;
    }

    .content {
        border-right: 1px solid black;
        /*! flex: 1 0 700px; */
        width: 470px;
    }

    footer .meta,
    footer .medium {
        display: flex;
        justify-content: space-between;
    }
    footer .medium {
        padding-top: 8px;
    }
    .medium h2 {
        margin: 8px 0;
    }
    .medium li {
        line-height: 1.6rem;
    }
    .medium li,
    .medium p {
        margin: 0;
        padding: 0 0 8px 0;
    }
    footer .col {
        flex: 0 32%;
        padding: 0 8px;
    }  

    .accordion h3 {
        margin: 0;
        position: relative;
        width: auto;
        padding-right: 1.6rem;
        display: inline-block;
        cursor: pointer;
    }
    .accordion>h3:after {
        content: '>';
        display: block;
        font-size: 1.6rem;
        font-weight: bold;
        font-style: normal;
        position: absolute;
        top: -0.2rem;
        right: 0;
    }
    .accordion .older {
        display: none;
        margin: 0;
    }
    .accordion .newer {
        margin: 0;
    }
    h3.open:after {
        transform: rotate(90deg); 
    }
    .accordion h3.open ~ .older {
        display: block;
    }   
}