/*
Theme Name: zrc-Theme
Theme URI: http://kp-z.de/wordpressthemes/zrc/
Author: Jan Pferdmenges, KP&Z Werbeagentur GmbH
Author URI: http://www.kp-z.de/team.php
Description: Template für Zughansa Reise Concierge
Version: 0.1
License: commercial
*/

/* FARBEN

türkis      #C0B898
Hell-Blau   #ECF5F7
Blau        #203C74
Grau        #707070
Dunkelgrau  #555555
Hell-beige  #FCFBE6
*/


/*
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,400i,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Titillium+Web:200,300,400,600,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Arsenal:400,400i,700&display=swap');
*/

/* titillium-web-regular - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/titillium-web-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/titillium-web-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/titillium-web-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/titillium-web-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/titillium-web-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/titillium-web-v15-latin-regular.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}
/* titillium-web-700 - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/titillium-web-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/titillium-web-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/titillium-web-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/titillium-web-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/titillium-web-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/titillium-web-v15-latin-700.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}

/* arsenal-regular - latin */
@font-face {
  font-family: 'Arsenal';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/arsenal-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/arsenal-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/arsenal-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/arsenal-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/arsenal-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/arsenal-v12-latin-regular.svg#Arsenal') format('svg'); /* Legacy iOS */
}
/* arsenal-italic - latin */
@font-face {
  font-family: 'Arsenal';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/arsenal-v12-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/arsenal-v12-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/arsenal-v12-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/arsenal-v12-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/arsenal-v12-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/arsenal-v12-latin-italic.svg#Arsenal') format('svg'); /* Legacy iOS */
}
/* arsenal-700 - latin */
@font-face {
  font-family: 'Arsenal';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/arsenal-v12-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/arsenal-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/arsenal-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/arsenal-v12-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/arsenal-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/arsenal-v12-latin-700.svg#Arsenal') format('svg'); /* Legacy iOS */
}
/* aladin-regular - latin 
@font-face {
  font-family: 'Arca Majora';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/ArcaMajora3-Bold.eot'); 
  src: local('Arca Majora Bold'), local('Arca Majora Bold'),
       url('fonts/ArcaMajora3-Bold.eot?#iefix') format('embedded-opentype'), 
       url('fonts/ArcaMajora3-Bold.woff2') format('woff2'), 
       url('fonts/ArcaMajora3-Bold.woff') format('woff'); 
}
*/

html {padding: 0; margin:0; font-size: 16px; background: white;  height: 100%;}
body {padding: 0; margin:0;font-family: 'Titillium Web', sans-serif; font-weight: 400; font-size: 18px; line-height: 1.6em; overflow-x: hidden; color: #666;}
h1,h2,h3,h4,h5 { font-family: 'Arsenal', sans-serif; font-weight: 700; color: #75136b;}
h1,h2 {font-size: 48px; font-weight: 300; line-height: 1.05;}
h3 {font-size: 24px; font-weight: 300; line-height: 1.05;}
#headerBild h3 {text-shadow: 0 0 5px rgba(0,0,0,0.9); }
a {text-decoration-style: dotted;}
figure {margin:0;}


footer {
    background-color: #53054b; padding-top: 50px; color: white; position: relative;
    &::before { /* top right bottom left */ 
        content: ''; position: absolute; top: calc(-10vh + 1px); left: 0; width: 0; height: 0;  border-style: solid; border-width: 0 0 10vh 100vw; border-color: transparent transparent #53054b transparent;
    }
}

footer a {color: white;}
footer div.bottomLine {margin-top: 50px; padding: 3px 0; background-color: black; font-size: 0.7rem; color: #888;}
footer div.bottomLine a {color: #888;}
footer > div:first-child div.col-md-4 {margin-bottom: 30px;}


/*
 *    Header
 */

.topbar {position: absolute; top:0; width: 100%; height: 20vw;}
#Topbar  {z-index: 3;}
#Topbar::before {content: " ";position: absolute; width: 100%; height: 100%; border-color: transparent transparent transparent #75136b; border-width: 0 0 8.7vw 100vw; border-style: solid;}
.topbar > div:first-child > a > img {position: absolute; transform: rotate(-5deg); top: 0.7vw; left: 1vw; width: 17vw; height: auto;}
.topbar > div:first-child > div {position: absolute; transform: rotate(-5deg); bottom: 5.2vw; left: 20vw; font-family: 'Arsenal', sans-serif; font-weight: 400; color: #c0b898; text-transform: uppercase; font-size: 4.2vw;}
.topbar > div:first-child > div > a {color: white; text-decoration: none;}
.topbar > div:first-child > p {position: absolute; transform: rotate(-5deg); top: 8vw; top: calc(13vw - 23px); right: 2vw; font-family: 'Arsenal', sans-serif; font-weight: 400; color: white;; font-size: 1.5rem; padding: 0; display: inline-block;}
.topbar > div:first-child > p > img {vertical-align: text-top; width: 100px; height: auto;}
.topbar > div:first-child > nav {
    position: fixed;top: 0; left: 0; background-color: rgba(0,0,0,0.7); font-family: 'Arsenal', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 1rem; padding-top: 25vw; z-index: -1; height: 100vh; width: 100%; box-sizing: border-box; transition-duration: 1s; transform: translateY(-100%);
    
    > ul {
        display: flex; list-style: none; flex-direction: column; padding: 0;
        
        > li {
            margin-top: 5px; padding: 5px 10px; display: block; border-radius: 3px; transition-duration: 300ms;
            &:hover > a {color: 75136b;}
            > a {color: white; text-decoration: none;}
        }
    }
}
.noMarginTop {margin-top: 0;}
.pb-5 {padding-bottom: 50px;}

label.menuIcon {
    position:fixed; transform: rotate(-5deg); top: 2.7vw; right: 1vw; z-index: 3;
    > div {display:none;}
    > img{width: 6vw; height:auto; }
    > img:first-of-type {display: inline-block;}
    > img:last-of-type {display: none;}
}

#MenuCheckBox:checked ~ label.menuIcon > img:first-of-type {display: none; }
#MenuCheckBox:checked ~ label.menuIcon > img:last-of-type {display: inline-block;}
#MenuCheckBox:checked ~ nav {transform: translateY(0);}


#headerBild { width: 100%; height: 95vh; height: calc(100vh - 4vw); position: relative;margin-top: 11.3vw;}
#headerBild > img {width: 100%; height: 100%; object-fit: cover;}
#headerBild > div.headline { color: white; position: absolute; bottom: 9.5vw; left: -60px;background: rgba(0,95,123,0.3); padding: 15px 30px 15px 100px; transform: rotate(-5deg); font-size: 24px;}
#headerBild > div.headline h1 {font-size: 48px; text-shadow: 0 0 5px rgba(0,0,0,0.9);}

#HeaderPlaceHolder {height: 9vw; background-color: #ECF5F7;} 

#ZughansaLogo {position: absolute; bottom: 5px; right: 5px; z-index: 5;}
#ZughansaLogo img {width: 100px; height: auto;}


/*
 * Footer Navigation * 
*/


footer nav>div>ul {padding:0; margin:0; list-style: none; font-weight: 700;}
footer nav>div>ul>li {margin-top: 20px;}
footer nav>div>ul>li>ul {margin-top: 15px; list-style: none; font-weight: 400;}

/*
 * Slider mit Slides * 
*/

div.slider {width: 100%; height: 100%; overflow: hidden; position: relative; }
div.slider > ul {margin:0; padding:0; display: flex; width: 1000%; height: 100%;}
div.slider > ul.transition {transition: 1000ms;}
div.slider > ul > li {list-style: none; flex: 0 1 10%; height: 100%; background-repeat:no-repeat; background-size: cover; background-position: center center; position: relative; overflow: hidden;}
div.slider > ul > li > div {color: white; position: absolute; bottom: 10vh; left: -60px; background: rgba(160,128,72,0.5); padding: 15px 30px 15px 100px; transform: rotate(-5deg);}
div.slider h3 {margin:0; color: white;}



/*
 *     SECTIONS
 */


section {padding: 50px 0; position: relative; z-index:1;}

section.firstSection, section.bgHellBlau {
    background-color: #ECF5F7; padding-bottom: 7vh; padding-bottom: calc(50px+ 10vh);
    &::before { /* top right bottom left */ 
        content: ''; position: absolute; top: calc(-10vh + 1px); left: 0; width: 0; height: 0;  border-style: solid; border-width: 0 0 10vh 100vw; border-color: transparent transparent #ECF5F7 transparent;
    }
}

section.bgWhite {
    background-color: #ffffff; padding-bottom: 7vh; padding-bottom: calc(50px+ 10vh);
    &::before { /* top right bottom left */ 
        content: ''; position: absolute; top: calc(-10vh + 1px); left: 0; width: 0; height: 0;  border-style: solid; border-width: 0 0 10vh 100vw; border-color: transparent transparent #ffffff transparent;
    }
}

section.bgHellBeige {
    background-color: #fcf8f4; padding-bottom: 7vh; padding-bottom: calc(50px+ 10vh);
    &::before { /* top right bottom left */ 
        content: ''; position: absolute; top: calc(-10vh + 1px); left: 0; width: 0; height: 0;  border-style: solid; border-width: 0 0 10vh 100vw; border-color: transparent transparent #fcf8f4 transparent;
    }
}
section.bgBeige {
    background-color: #C0B898; padding-bottom: 7vh; padding-bottom: calc(50px+ 10vh);
    &::before { /* top right bottom left */ 
        content: ''; position: absolute; top: calc(-10vh + 1px); left: 0; width: 0; height: 0;  border-style: solid; border-width: 0 0 10vh 100vw; border-color: transparent transparent #C0B898 transparent;
    }
}

section.bgDunkelBeige {
    background-color: #A08048; color: white; padding-bottom: 7vh; padding-bottom: calc(50px+ 10vh);
    &::before { /* top right bottom left */ 
        content: ''; position: absolute; top: calc(-10vh + 1px); left: 0; width: 0; height: 0;  border-style: solid; border-width: 0 0 10vh 100vw; border-color: transparent transparent #A08048 transparent;
    }
}

section:nth-of-type(odd)::before {
  transform: scaleX(-1);
}

section:last-of-type::after {
    content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 0;  border-style: solid; border-width: 0 0 5vh 100vw; border-color: transparent transparent #53054b transparent;
}
section:last-of-type:nth-of-type(even)::after {
    transform: scaleX(-1);
}


.sbHellBeigeL2R {padding-top: 10vw;}
.sbHellBeigeL2R.noPadding {padding-top: 8.7vw;}
.sbHellBeigeL2R::before {content: " ";position: absolute; width: 100%; height: 8.7vw; border-color: transparent transparent transparent #fcf8f4; border-width: 0 0 8.7vw 100vw; border-style: solid; top:0;}

.sbHellBeigeR2L {padding-top: 10vw;}
.sbHellBeigeR2L.noPadding {padding-top: 8.7vw;}
.sbHellBeigeR2L::before {content: " ";position: absolute; width: 100%; height: 8.7vw; border-color: transparent #fcf8f4 transparent transparent; border-width: 0 100vw 8.7vw 0; border-style: solid; top:0;}

.bgDunkelBeige { background-color: #A08048; color: white;}

.sbDunkelBeigeL2R {padding-top: 10vw;}
.sbDunkelBeigeL2R.noPadding {padding-top: 8.7vw;}
.sbDunkelBeigeL2R::before {content: " ";position: absolute; width: 100%; height: 8.7vw; border-color: transparent transparent transparent #A08048; border-width: 0 0 8.7vw 100vw; border-style: solid; top:0;}

.sbDunkelBeigeR2L {padding-top: 10vw;}
.sbDunkelBeigeR2L.noPadding {padding-top: 8.7vw;}
.sbDunkelBeigeR2L::before {content: " ";position: absolute; width: 100%; height: 8.7vw; border-color: transparent #A08048 transparent transparent; border-width: 0 100vw 8.7vw 0; border-style: solid; top:0;}

.bgBeige { background-color: #C0B898;}

.sbBeigeL2R {padding-top: 10vw;}
.sbBeigeL2R.noPadding {padding-top: 8.7vw;}
.sbBeigeL2R::before {content: " ";position: absolute; width: 100%; height: 8.7vw; border-color: transparent transparent transparent #C0B898; border-width: 0 0 8.7vw 100vw; border-style: solid; top:0;}

.sbBeigeR2L {padding-top: 10vw;}
.sbBeigeR2L.noPadding {padding-top: 8.7vw;}
.sbBeigeR2L::before {content: " ";position: absolute; width: 100%; height: 8.7vw; border-color: transparent #C0B898 transparent transparent; border-width: 0 100vw 8.7vw 0; border-style: solid; top:0;}

.sbHellBlauL2R {padding-top: 10vw;}
.sbHellBlauL2R.noPadding {padding-top: 8.7vw;}
.sbHellBlauL2R::before {content: " ";position: absolute; width: 100%; height: 8.7vw; border-color: transparent transparent transparent #ECF5F7; border-width: 0 0 8.7vw 100vw; border-style: solid; top:0;}

.sbHellBlauR2L {padding-top: 10vw;}
.sbHellBlauR2L.noPadding {padding-top: 8.7vw;}
.sbHellBlauR2L::before {content: " ";position: absolute; width: 100%; height: 8.7vw; border-color: transparent #ECF5F7 transparent transparent; border-width: 0 100vw 8.7vw 0; border-style: solid; top:0;}

.sbWhiteL2R {padding-top: 10vw;}
.sbWhiteL2R.noPadding {padding-top: 8.7vw;}
.sbWhiteL2R::before {content: " ";position: absolute; width: 100%; height: 8.7vw; border-color: transparent transparent transparent white; border-width: 0 0 8.7vw 100vw; border-style: solid; top:0;}

.sbWhiteR2L {padding-top: 10vw;}
.sbWhiteR2L.noPadding {padding-top: 8.7vw;}
.sbWhiteR2L::before {content: " ";position: absolute; width: 100%; height: 8.7vw; border-color: transparent white transparent transparent; border-width: 0 100vw 8.7vw 0; border-style: solid; top:0;}

.sbDunkelblauL2R {padding-top: 10vw;}
.sbDunkelblauL2R.noPadding {padding-top: 8.7vw;}
.sbDunkelblauL2R::before {content: " ";position: absolute; width: 100%; height: 8.7vw; border-color: transparent transparent transparent #203C74; border-width: 0 0 8.7vw 100vw; border-style: solid; top:0;}

.sbDunkelBlauR2L {padding-top: 10vw;}
.sbDunkelBlauR2L.noPadding {padding-top: 8.7vw;}
.sbDunkelBlauR2L::before {content: " ";position: absolute; width: 100%; height: 8.7vw; border-color: transparent #203C74 transparent transparent; border-width: 0 100vw 8.7vw 0; border-style: solid; top:0;}


/*
 *     Call to Action
 */

.ctaHeadline {font-size: 3.2rem; line-height: 1.1em;margin-bottom: 50px; font-family: 'Merriweather', serif; font-weight: 300;}
.ctaButton {display: block; max-width: 250px; padding: 10px 20px; background-color: gold; color: #C0B898; text-align: center; border-radius: 5px; text-decoration: none; font-size: 1.3rem;}
.ctaText {font-size: 40px; line-height: 1.1em; color: #C0B898;}


/*
 *     KPZ Gallery
 */

.kpzGallery > div > div {width: 100%; position: relative; overflow: hidden; margin-top: 15px; margin-bottom: 15px; transition-duration: 300ms; cursor: pointer; border: 1px solid #486068;}
.kpzGallery > div > div:hover {transform: scale(1.05);}
.kpzGallery > div > div > div {width: 100%; margin-top: 100%;}
.kpzGallery > div > div > img {min-width: 100%; min-height: 100%; width: auto; height: auto; position: absolute;transform: translate(-50%, -50%);left: 50%; top: 50%; width: auto; height: auto;}
.kpzGallery > div > div > p {position: absolute; left: 10px; bottom: 10px; color: white; z-index: 2; margin:0;text-shadow: 0px 0px 3px #000000;}
.kpzGallery > div > div::after {content: url(img/lightboxLupe.png); position: absolute; right:0; bottom: -8px;}


/*
 *     Lightbox
 */

#Lightbox {background-color: rgba(0,0,0,0.85); position: fixed; left: 0; top:0; bottom: 0; right: 0; z-index: 10;}
#Lightbox > img {width: 20px; height: auto; position: absolute; top: 10px; right: 15px; cursor: pointer;}
#Lightbox > div {padding: 40px; display: flex; height: 100%; width: 100%; align-items: center;}
#Lightbox > div > div {width: 100%;}
#Lightbox > div > div > img {border: 3px solid white; display: block; width: auto; height: auto; max-width: 90vw; max-width: calc(100vw - 80px); max-height: 90vh; max-height: calc(100vh - 80px); margin: 0 auto;}


/*
 *     KPZ Map
 */

.kpzMap {width: 100%; position: relative; overflow: hidden; margin-top: 15px; margin-bottom: 15px; transition-duration: 300ms; cursor: pointer;}
.kpzMap:hover {transform: scale(1.05);}
.kpzMap > img {width: 100%; height: AUTO; border: 1px solid #486068;}
.kpzMap::after {content: url(img/lightboxLupe.png); position: absolute; right:1px; bottom: 1px;}

#Map {background-color: rgba(0,0,0,0.85); position: fixed; left: 0; top:0; bottom: 0; right: 0; z-index: 10;}
#Map > img {width: 20px; height: auto; position: absolute; top: 10px; right: 15px; cursor: pointer;}
#Map > div {padding: 40px; display: flex; height: 100%; width: 100%; align-items: center;}
#Map > div > div {width: 100%;}
#Map > div > div > img {border: 3px solid white; display: block; width: auto; height: auto; max-width: 90vw; max-width: calc(100vw - 80px); max-height: 90vh; max-height: calc(100vh - 80px); margin: 0 auto;}
#Map.detailedMap > div {overflow-y: scroll; align-items: flex-start;}
#Map.detailedMap > div > div > img {width: 100%; height: auto; max-width: 90vw; max-width: calc(100vw - 80px); max-height: unset;}

/*.kpzMap {width: 100%; position: relative; overflow: hidden; margin-top: 15px; margin-bottom: 15px; transition-duration: 300ms; cursor: pointer;}
.kpzMap:hover {transform: scale(1.05);}
.kpzMap > img {width: 100%; height: AUTO;}

#Map {background-color: rgba(0,0,0,0.85); position: fixed; left: 0; top:0; bottom: 0; right: 0; z-index: 10;}
#Map > img {width: 20px; height: auto; position: absolute; top: 10px; right: 15px; cursor: pointer;}
#Map > div {padding: 40px 0 0 0; display: flex; height: 100%; width: 100%; align-items: center;}
#Map > div > div {width: 100%; height: 100%;position: relative; overflow:scroll;}
#Map > div > div > img {border: 3px solid white; display: block; width: auto; height: auto; margin: 0 auto; position: absolute; left: 0; top: 0;}
*/

/*
 *     SC reiseziele
 */

.reiseZiele img {width: 100%; height: auto; display: block; transition-duration: 300ms;}
.reiseZiele img:hover {transform: scale(1.08);}
.reiseZiele div {margin-top: 10px;}
.reiseZiele div a {color: #333; text-decoration: none; transition-duration: 300ms;}
.reiseZiele div a:hover {text-decoration: underline; text-decoration-style: dotted}



/*
 *     SC sbhiff
 */

.schiff {background-color: #203C74; color: white; overflow: hidden;}
.schiff {margin-top: 50px;margin-bottom: 50px;}

.schiff > div:first-child {padding:0;}
.schiff > div:first-child > img {width: 100%; height: auto; display: block;}
div.schiffContent > a {display: inline-block; color: white; text-decoration: none; padding: 10px 30px; border: 1px solid white; border-radius: 5px; margin-top: 40px; transition-duration: 300ms;}
.schiff div.schiffContent {padding-left: 30px; padding-right: 30px; }
.schiff div.schiffContent.right { }
div.schiffContent > a:hover { background-color: #C0B898; border-color: #C0B898;}
div.schiffContent > h4 {font-size: 1.2rem;  margin-top: 1rem; margin-bottom: 1rem;}
div.schiffContent > h4 > a {color: white; text-decoration: none; transition-duration: 300ms;display: inline-block; }
div.schiffContent > h4 > a:hover {transform: scale(1.05);}
div.schiffContent > h4  div {font-size: 1rem; padding-top: 5px;}
div.schiffContent > p {font-size: 1rem;}
div.schiffContent div.reisezielPreview {margin-top: 20px;}
div.schiffContent div.reisezielPreview img {width: 100%; height: auto; transition-duration: 300ms;}
div.schiffContent div.reisezielPreview img:hover {transform: scale(1.1);}
div.schiffContent div.reisezielPreview a {color: white; text-decoration: none; transition-duration: 300ms;}
div.schiffContent div.reisezielPreview a:hover {text-decoration: underline; text-decoration-style: dotted;}


/*
 *     teilstrecken
 */


.teilstrecken table, .preistabelle {margin-top: 30px; width: 100%;}
.teilstrecken table tr:first-child {font-weight: 700; text-transform: uppercase;}
.teilstrecken table tr>td {padding: 5px 0;}
.teilstrecken table tr>td:last-child, .preistabelle tr>td:last-child {text-align: right;}
.teilstrecken table tr:not(:last-child)>td, .preistabelle tr:not(:last-child)>td {border-bottom: 1px solid #666;}

.teilstrecken ul {padding:0 0 0 15px; margin: 0;}
.teilstrecken .orderHeadline {padding-bottom:0; font-weight: 700; text-transform: uppercase;}

.teilstrecken h3 {font-size: 1.6rem; margin-bottom: 5px;}
.teilstrecken h4 {font-size: 1.1rem; font-weight: 400; text-transform: uppercase;margin-top: 0;}



/*
 *     Schiffsdaten
 */


.schiffsdaten {margin-top: 0; width: 100%;}
.schiffsdaten > tbody > tr > td:nth-child(2), .schiffsdaten > tbody > tr > td:nth-child(5) {text-align: right;}
.schiffsdaten > tbody > tr > td:nth-child(3) {width: 70px;}
.teilstrecken table tr:first-child>td {font-weight: 700; text-transform: uppercase;}
.teilstrecken table tr>td {padding: 5px 2px;}
.teilstrecken table tr>td:last-child {text-align: right;}
.teilstrecken table tr:not(:last-child)>td {border-bottom: 1px solid #666;}



/*
 *     Kontaktformular
 */

.inputFeld {width:100%; padding: 1px; border-radius: 5px; border: 1px solid #77186d; margin-bottom: 15px; position: relative; background-color: white;}
.inputFeld label {position: absolute; top: 10px; left: 5px; font-size: 16px; line-height: 16px; color: #999; transition: 300ms;}
.inputFeld.pflichtangabe label::after {content:'*';}
.inputFeld.filled label {top: 2px; font-size: 11px; line-height: 11px; }
.inputFeld input {font-size: 16px; line-height: 16px;font-family: 'Titillium Web', sans-serif; padding: 15px 5px 1px 5px; border: none; outline: hidden; margin:0; width: 100%;}
.inputFeld textarea {width: 100%; font-display: 16px; font-family: 'Titillium Web', sans-serif; height: 150px; padding: 15px 5px 1px 5px; border: none; outline: hidden; margin:0;}
.checkbox {margin-bottom: 15px;}
.checkbox input {display: none;}
.checkbox label {position: relative; padding-left: 25px; }
.checkbox label::before {content: url("img/checkboxOff.png"); position: absolute;left:0; top: 3px;}
.checkbox input:checked ~ label::before {content: url("img/checkboxOn.png"); position: absolute;left:0; top: 3px;}
input[type=submit] {display: inline-block; max-width: 300px;  border: 1px solid #77186d; text-align: center; padding: 10px 20px; border-radius: 5px; color: #77186d; text-decoration: none; font-weight: 700; font-size:1.3rem; transition-duration: 300ms; font-family: 'Titillium Web',sans-serif;}
input[type=submit]:hover {transform: scale(1.05);} 

.error {color:red;}
.errorBox {background-color: red; color: white; padding: 15px; border-radius: 10px; font-weight: 700;}
.infoBox {background-color: darkgreen; color: white; padding: 15px; border-radius: 10px; font-weight: 700;}
.contactBar img {margin: 0 auto; display: block;}
.contactBar h5 {margin: 10px 0 5px 0; font-size: 1rem; color: #77186d; text-align: center;}
.contactBar h5~div {margin: 0 0 50px 0;  text-align: center;}
.contactBar h5~div > a {color: #555555;}



/*
**            Ansprechpartner
*/

.ansprechpartner a {color: #666;}
.ansprechpartner strong {color: #75136b;}
.ansprechpartner img {margin-top: 30px;}



a.button {display: inline-block; background-color: #75136b; color: #fcf8f4; padding: 12px 25px; border-radius: 28px; text-decoration: none; font-size: 1.2rem; transition-duration: 300ms; margin: 30px 0 70px 0;}
a.button:hover { background-color: #a08048; color: white;}
.boxOnTop a.button {margin-bottom: 0; margin-top: 0;}

.boxOnTop img {max-width: 300px; height: auto;}


.noWbr {white-space: nowrap;}
.bgHellBlau { background-color: #ECF5F7;}
.bgWhite { background-color: white;}
.bgDunkelBlau {background-color: #203C74; }
.noPadding {padding-top:0; padding-bottom: 0;}
.posRelative {position: relative;}
.bildBottom {position: absolute; bottom: -98px;}
.alignBottom {align-self: flex-end;}
div.wp-block-button {margin-top: 30px; margin-bottom: 75px;}
div.inklusivleistungen { background-color: #75136b; color: #FCFBE6; font-size: 1.15rem; line-height: 1.6rem; padding: 30px; border: 8px solid #c0b898;}
div.inklusivleistungen h3 { color: white; padding-top: 0; margin-top:0; font-size: 1.7rem; margin-bottom: 0;}
div.inklusivleistungen h3 ~ span { display: block; margin-top: 5px;margin-bottom: 30px;}
div.inklusivleistungen a { color: #c0b898;}
h4.headAufzaehlung {font-size: 1.3rem; margin-top: 2.5rem; margin-bottom: 0;}
h1.subline {margin-bottom: 0;}
p.subline {margin-top: 5px; margin-bottom: 1.5rem;}
p.button {}
p.button a {margin: 50px auto 30px auto; display: inline-block; max-width: 300px;  border: 2px solid #C0B898; text-align: center; padding: 10px 20px; border-radius: 5px; background-color: #ECF5F7; color: #C0B898; text-decoration: none; font-weight: 700; font-size:1.3rem; transition-duration: 300ms;}
p.button a:hover {transform: scale(1.05);}
.karte {padding: 50px 0;}
.karte img {width: 100%; height: auto; border: 1px solid #555; display: block;}
.bildUnterschrift {font-family: 'Merriweather', serif; font-size: 0.75rem; font-weight: 300; font-style: italic; opacity: 0.5;}
.listMitAbstand li:not(:first-child) {margin-top: 15px;}
.nachhaltigkeit {margin-top: 50px;}
.ownLink {display: inline-block; }
.ownLink a {display: block; text-align: center; line-height: 0.9em; margin-top: 30px; }
.ownLink img {width: 50px; height: auto;}
.ownLink:first-child img {width: auto; height: 40px;margin-bottom: 8px;}
.hinweisText {display: flex; flex-direction: column; align-items: center;}

.hoverEffekt {
    transition-duration: 300ms;
    &:hover {transform: scale(1.02); box-shadow: 0px 7px 10px -3px rgba(0,0,0,0.2); }
}

.contentBox > div {
    background-color: #fcf8f4; border-radius: 15px; box-shadow: 0px 7px 10px -3px rgba(0,0,0,0.2);
    h3 {font-size: 1.5rem; line-height: 1.15em;}
}


/* Small devices (landscape phones , 576px and up) */
@media (min-width: 576px) {  
    p.button a {max-width: 400px;}

    .topbar > div:first-child > div {bottom: 6.5vw; left: 20vw;}
    #MainMenu ul#menu-primary > li { max-width: 100vw; }
    label.menuIcon > img{width: 4.5vw; }
    label.menuIcon { top: 0.7vw;}
    
    .schiffsdaten > tbody > tr > td:nth-child(3) {width: 150px;}

}


/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    h3 {font-size: 30px;}
    #MainMenu ul#menu-primary > li {font-size: 1.4rem; max-width: 770px;}
    #MainMenu ul#menu-primary > li > div > ul > li.hasImage > div > a {display:block;}    
    #MainMenu ul#menu-primary > li > div > ul > li.hasImage > div > a > img {width:180px; height: 120px; object-fit: cover;}    
    #MainMenu ul#menu-primary > li > div > ul > li.hasImage > div > span  {display: block; position: absolute; bottom: 10px;left: 10px;}
    #MainMenu ul#menu-primary > li > div > ul > li.hasImage > div > span > a {color:white;}
    .schiff {margin-top: 0;margin-bottom: 0;}
    
    div.inklusivleistungen { font-size: 1.35rem; line-height: 2rem; border-width: 8px;}
    div.inklusivleistungen h3 { font-size: 2.7rem; }
    .schiffsdaten > tbody > tr > td:nth-child(3) {width: 300px;}

    footer > div:first-child div.col-md-4 {margin-bottom: 0;}
    footer nav>div>ul>li {margin-top: 0px; text-align: right;}
    footer nav>div>ul>li:not(:first-child) {margin-top: 5px;}

    .topbar > div:first-child > p > img {width: 130px;}
    .topbar > div:first-child > p { top: 0vw;}
    
    .boxOnTop img {max-width: 500px; height: auto;}

	.nachhaltigkeit {margin-top: 57px; text-align: right;}
	
	.ownLink {display: block; text-align: center;}

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    h3 {font-size: 36px;}
    .topbar {height: 8.7vw;}
    #headerBild { height: 105vh; height: calc(100vh + 4.1vw); margin-top: 0;}
    .topbar > div:first-child > a > img { width: 7vw;}
    .topbar > div:first-child > div {bottom: 4.2vw; left: 9.5vw; font-size: 3.25vw;}
    label.menuIcon > img{width: 3vw; }

    #MainMenu ul#menu-primary {margin-top: 10vw;}
    #MainMenu ul#menu-primary > li {font-size: 1.6rem; max-width: 960px;}
    #MainMenu ul#menu-primary > li > div > ul > li.hasImage > div > a {display:block;}    
    #MainMenu ul#menu-primary > li > div > ul > li.hasImage > div > span  {display: block; position: absolute; bottom: 10px;left: 10px;}
    #MainMenu ul#menu-primary > li > div > ul > li.hasImage > div > span > a {color:white;}
    #MainMenu ul#menu-meta {position:fixed; right: 0px; bottom: 0px; }
    /*#MainMenu ul#menu-primary > li > div > ul > li.hasImage:nth-child(4n) {margin-right: 0;}*/
    .schiffsdaten > tbody > tr > td:nth-child(3) {width: 70px;}

    .firstSection a.button {padding: 18px 40px; border-radius: 35px; font-size: 1.5rem;}

    #ZughansaLogo img {width: 150px; height: auto;}
    #ZughansaLogo { bottom: 20px; right: 30px; z-index: 5;}

    section:is(.bgDunkelBeige, .bgWhite, .bgHellBeige, .bgBeige, .bgHellBlau, .firstSection) { padding-bottom: 10vw; padding-bottom: calc(50px + 8vh)}
    section:is(.bgDunkelBeige, .bgWhite, .bgHellBeige, .bgBeige, .bgHellBlau, .firstSection)::before { border-width: 0 0 8vh 100vw; top: calc(-8vh + 1px);}
    section:last-of-type::after { border-width: 0 0 8vh 100vw;}
    div.slider > ul > li > div { bottom: 10vh; }

    .topbar > div:first-child > nav {
        position: absolute; top: unset; background-color: transparent; transform: rotate(-5deg); bottom: calc(-20px + 0.17vw); left: calc(-10px + 9.8vw); width: unset; height: unset; padding-top:0; z-index: 3;

        > ul {
            display: flex; list-style: none; flex-direction: row;

            > li {
                margin-right: 10px; padding: 2px 10px; background-color: rgba(0,0,0,0.3); transition-duration: 500ms; display: block; border-radius: 3px;
                &:hover {background-color: rgba(0,0,0,0.7);}
                a {color: white; text-decoration: none;}
            }
        }
    }
    label.menuIcon { display: none; }
    #MenuCheckBox:checked ~ nav {transform: rotate(-5deg);}



}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
    #MainMenu ul#menu-primary > li {font-size: 1.6rem; max-width: 1200px;  margin-left: -100px; }
    #MainMenu ul#menu-primary > li > div > ul > li.hasImage > div > a > img {width:240px; height: 160px;}    

    div.schiffContent > h4 {font-size: 2.5vw;  margin-top: 2.5vw; margin-bottom: 2vw;}
    div.schiffContent > p {font-size: 1.3vw;}
    div.schiffContent > h4  div {font-size: 1.3vw;}
    div.schiffContent div.reisezielPreview {margin-top: 50px;}

    .topbar > div:first-child > p > img {width: 150px;}

}

@media (min-width: 1420px) { 
    #ZughansaLogo {position: fixed; right: 10px;}

    section:is(.bgDunkelBeige, .bgWhite, .bgHellBeige, .bgBeige, .bgHellBlau, .firstSection) { padding-bottom: 10vw; padding-bottom: calc(50px + 8vw;)}
    section:is(.bgDunkelBeige, .bgWhite, .bgHellBeige, .bgBeige, .bgHellBlau, .firstSection)::before { border-width: 0 0 8vw 100vw;  top: calc(-8vw + 1px);}
    section:last-of-type::after { border-width: 0 0 8vw 100vw;}
    div.slider > ul > li > div { bottom: 9vw; }

    .topbar > div:first-child > nav {
         bottom: calc(-25px + 0.17vw); left: calc(-10px + 9.8vw); font-weight: 700; font-size: 1.2rem;

        > ul {
            display: flex; 

            > li {
                margin-right: 10px; padding: 5px 15px; border-radius: 5px;
            }
        }
    }


}

@media (min-width: 1500px) { 
    #ZughansaLogo {right: 30px;}
}

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