:root {
    --main-color: hsl(327, 100%, 45%);
    --main-border-color: #797979;
    --main-color-lighter:hsla(327, 100%, 45%, 0.161);
    --main-color-light: hsla(327, 100%, 45%, 0.09);
    --link-color: hsl(327, 99%, 30%);
    --meta-background-color: hsla(0, 0%, 2%, 0.379);
}

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

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

h1, h2, h3, .btn {
    font-family: Tahoma, sans-serif;
    font-weight: normal;
}
h1 {
    text-align: center;
    font-size: 3rem;
    line-height: 2.4rem;
}
h1 span {
    font-family: sans-serif;
    font-style: normal;
    color: var(--main-color-lighter);
}
a {
    color: var(--link-color);
    text-decoration: none;
}
a:hover {
    text-decoration:underline;
}
header figure {
    text-align: center;
    line-height: 15px;
}
footer  {
    margin-top: 12px;
    background-color: #aaaaaa48;
}

.meta {
    display: flex;
    justify-content: space-between;
    margin: 3px 0 0 0;
    padding: 3px 0;
    background-color: var(--meta-background-color);
}

.meta li a {
    display: block;
    line-height: 2.6rem;
    text-align: center;
    color: #fff;
    font-family: verdana, sans-serif;
    text-decoration: none;
    font-size: 1.2rem;
}

ul.navlist,
nav .nr {
    padding:4px;
    margin: 12px 0 0 0;
    display: flex;
    justify-content: center;         
}
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;
    transition: background-color 0.8s ease;
}
nav .nr li:not(:last-child) {
    border-right: 1px solid var(--main-border-color);
}
ul.navlist li.active,
nav .nr li.active,
nav .nr li:hover {
    background-color: var(--main-color);
    border-right: 1px solid var(--main-color);
}
ul.navlist li a,
nav .nr li a {
    width: 100%;
    display: block;
    color: #000;
    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: rgb(255, 255, 255);
}

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

.content p {
    padding: 0 8px;
    margin: 6px 0 4px 0;
}
.content h2 {
    padding: 12px 8px 0 8px;
}
.nrnr {
   display: none;
}
.nahreisen,
.editorial,
.kalender,
.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;
}

footer .meta a:hover {
    color: var(--link-color);
}

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;
    font-size: 1.4rem;
}
.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: var(--main-color);
}
.nrbgcolor-bg {
  background-color: var(--main-color);
}
.btn.nrbgcolor-bg {
    color: #fff;
}
.nrbgcolor-lighten {
    border-top: 2px solid var(--main-color-lighter);
  background-color:transparent; /* hsla(206, 64.4%, 57.1%, 0.2); */
}
.nrbgcolor-nav {
  background-color:var(--main-color-light);
}

.error {
    color: hsl(0, 64.4%, 57.1%);
}

.splide__pagination__page.is-active {
    background-color: var(--main-color-lighter);
}
.termin img {
    width:24px;
    display:inline-block;
}
.segment-fill {
    fill: var(--main-color);
}
/* main aside .termin {
    padding: 12px 24px 12px 4px;
    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;
    font-family: Tahoma, sans-serif;
    font-size: 1.1rem;
    font-weight:300;
}
.medium p, .medium li {
    margin: 0;
    font-size: 0.96423rem;
}
.partner {
    padding-top: 1px;
}
footer .col a {
    color: var(--link-color);
}
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;
}

.splide p {
    font-size: 1rem;
}
/*** 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/background.igel.gif);
        background-position: bottom;
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        height: 100vh;
        padding: 0;
        margin: 0;
    }
    .wrapper {
        width: 780px;
        border: 1px solid var(--main-border-color);
        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: 48px;
        height: 42px;
    }
    nav .nr li a {
        font-size: 1.6rem;
        color: var(--link-color);
    }        

    li {
        margin: 0;
        padding: 4px 8px;
    }
    
    .main {
        display: flex;
        justify-content: space-between;
        width: 100%;     
    }
    .nrnr {
         padding-right:21px;      
    }
    .reiseinfos {
        /*! flex: 0 1 300px; */
        order: 2;
        padding: 0 12px;
        width: 320px;
    }

    .dates p {
        justify-content: flex-start;
    }

    .dates time {
        margin-right: 12px;
    }

    .content {
        border-right: 1px solid var(--main-border-color);
        /*! flex: 1 0 700px; */
        width: 460px;
    }

    .links ul {
        margin: 4px 0;
    }
    .links li {
        padding: 6px 0;
    }

    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 .showall {
        margin: 0;
        position: relative;
        width: auto;
        padding-right: 1.6rem;
        display: inline-block;
        cursor: pointer;
    }
    .accordion .showall:after {
        content: '\25b6';
        display: block;
        font-size: 1.2rem;
        font-weight: bold;
        font-style: normal;
        position: absolute;
        top: -1px;
        right: 4px;
        color: var(--link-color);
    }

    .accordion .older {
        display: none;
        margin: 4px 0 0 0;
    }
    .accordion .newer {
        margin: 0;
    }
    .showall.open:after {
        top:1px;
        transform: rotate(90deg); 
    }
    .accordion .showall.open ~ .older {
        display: block;
    }   
}