html {overflow-x: hidden; padding: 0; margin: 0; height: 100%; scroll-behavior: smooth;} /* The in-page "springe zu" links used to be animated by jQuery on six pages. Native smooth scrolling replaces all of it - including for the back/forward buttons, which the script never handled. */ @media (prefers-reduced-motion: reduce) { html {scroll-behavior: auto;} } /* Was `hidden`, unlocked by the preloader's JavaScript 350ms after load. That made a static, pre-rendered page unscrollable whenever the script did not run. The preloader is gone entirely now - it was an opaque white layer over the whole viewport, so the browser could not paint any content until it had faded, which is exactly what Largest Contentful Paint measures. */ body {overflow: visible; padding: 0; padding-bottom: 0px; margin: 0; height: auto; min-height: 100%; background-color: #fff;} .clear {clear: both;} * { transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; } @font-face { font-family: 'MetaPlusBold'; src: url('../fonts/MetaPlusBoldRoman.woff2') format('woff2'), url('../fonts/MetaPlusBoldRoman.woff') format('woff'); font-weight: bold; font-style: normal; } /********** FONTS ************/ /* Every family named in this stylesheet now has an @font-face rule - here or in one of the per-family stylesheets under fonts/ - or is a generic keyword. It did not use to: 'Roboto', 'Montserrat', 'Lato' and 'Raleway' were set on body text, the footer and the Impressum link with no font file and no Google Fonts link anywhere in the project, so each of them fell through to the system sans-serif. They say sans-serif now, which is what they have been rendering as all along. Self-hosting Roboto for the body text is a design decision rather than a bug fix; if it is ever made, it belongs in a @font-face here and a fonts/roboto/ directory beside the others - not in a Google Fonts , which sends every visitor's IP address to Google. */ @font-face { font-family: 'metaplusbookroman'; src: url('../fonts/meta-webfont.woff2') format('woff2'), url('../fonts/meta-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /************** ANIMATIONS ***************/ @keyframes introani1 { 0% {opacity: 0;} 25% {opacity: 1;} 50% {opacity: 1;} 75% {opacity: 1;} 100% {opacity: 0;} } @-webkit-keyframes introani1 { 0% {opacity: 0;} 15% {opacity: 0;} 40% {opacity: 1;} 75% {opacity: 1;} 100% {opacity: 0;} } /**************** TYPO *********************/ p {font-family: sans-serif; line-height: 24px; color: #555; position: relative; margin: 0 auto; font-size: 14px; letter-spacing: 1px; font-weight: 300; word-wrap: break-word; } p.eingezogen {padding-left: 60px;} p.eingezogen::before {position: absolute; top: 15px; left: 0px; width: 40px; height: 2px; background-color: #333; content:"";} a {font-family: sans-serif;} a:hover {text-decoration: none;} a:visited {text-decoration: none;} a:active {text-decoration: none;} a:focus {text-decoration: none;} li {} h1 {font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 3.5vmax; color: #d30146; letter-spacing: 2px; font-weight: 500; line-height: 3.5vmax; margin-bottom: 40px;} h2 {font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 2.0vmax; color: #d30146; letter-spacing: 2px; font-weight: 400; line-height: 2.5vmax; margin-bottom: 40px;} h3 {font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 2.1vmax; color: #333; letter-spacing: 2px; font-weight: 400; line-height: 2.1vmax; margin-bottom: 20px;} h4 {font-family: 'Just Another Hand', cursive; text-transform: uppercase; font-size: 5.5vmax; color: #d30146; letter-spacing: 2px; font-weight: 600; line-height: 5.5vmax; margin-bottom: 30px;} h5 {font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 2.2em; color: #d30146; letter-spacing: 2px; font-weight: 500; line-height: 1em; margin-bottom: 6px;} h6 {font-family: 'Oswald', sans-serif; font-size: 1.5em; color: #d30146; text-transform: uppercase; letter-spacing: 2px; line-height: 32px; font-weight: 500;} h5 span {font-weight: 300;} h2.notify {font-size: 18px; letter-spacing: 1px; text-align: center; max-width: 80%; margin: 0 auto; text-transform: none;} .left {text-align: left;} .right {text-align: right;} .center {text-align: center;} .center img {position: relative; margin: 0 auto;} .justify {text-align: justify;} .padded {padding-top: 60px; padding-bottom: 60px;} .padded20 {padding-top: 20px; padding-bottom: 20px;} .padded0 {padding: 0; margin: 0;} .padded2 {padding-top: 20px; padding-bottom: 60px;} .sidepadded {} .padded10 {padding-top: 10px; padding-bottom: 10px;} .padded20 {padding-top: 20px; padding-bottom: 20px;} .padded30 {padding-top: 30px; padding-bottom: 30px;} .padded40 {padding-top: 40px; padding-bottom: 40px;} .padded50 {padding-top: 50px; padding-bottom: 50px;} .padded60 {padding-top: 60px; padding-bottom: 60px;} .padded70 {padding-top: 70px; padding-bottom: 70px;} .padded80 {padding-top: 80px; padding-bottom: 80px;} .padded90 {padding-top: 90px; padding-bottom: 90px;} .padded100 {padding-top: 100px; padding-bottom: 100px;} .hidden {opacity: 0;} .visible {opacity: 1;} .bar {position: relative; margin: 40px auto; width: 100px; height: 2px; background-color: #333;} .barthin {position: relative; margin: 30px auto; width: 50px; height: 1px;} .barthin2 {position: relative; margin: 50px auto; width: 50px; height: 1px;} .red {background-color: #ce2831;} .bar.green {background-color: #6b9725;} .green {color: #6b9725;} .white {background-color: #fff;} .black {background-color: #000;} .wow {visibility: hidden;} .rowwrap1 {position: relative; margin: 0 auto; max-width: 1200px; } .borderleft {border-left: 1px solid #333;} .borderbottom {border-bottom: 1px solid #333;} .borderright {border-right: 1px solid #333;} .bordertop {border-top: 1px solid #333;} a.hintergrundlink {position: relative; display: block; border: 1px solid #d30146; padding: 10px 30px; background-color: none; font-family: 'Oswald', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: #d30146; margin: 0 auto; margin-top: 0px; width: 80%;} a.hintergrundlink:hover {background-color: #d30146; color: #fff;} a.hintergrundlink2 {position: relative; display: inline-block; border: 1px solid #d30146; padding: 10px 30px; background-color: none; font-family: 'Oswald', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: #d30146; margin-top: 20px; margin-bottom: 20px;} a.hintergrundlink2:hover {background-color: #d30146; color: #fff;} a.infolink {position: relative; display: inline-block; border: 1px solid #d30146; padding: 10px 30px; background-color: none; font-family: 'Oswald', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: #d30146; margin-top: 20px; margin-bottom: 20px;} a.infolink:hover {background-color: #d30146; color: #fff;} /******************************************************************************************* ******************************************************************************************** CONTENT ******************************************************************************************** *******************************************************************************************/ #topbar { position: fixed; width: 100%; height: 100px; top: 0; left: 0; z-index: 5; background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(248,248,248,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(248,248,248,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(248,248,248,1) 0%,rgba(248,248,248,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#00f8f8f8',GradientType=0 ); /* IE6-9 */ } #topnav-container {position: relative; margin: 0 auto; width: 100%; height: auto;} #topnav {position: relative; width: 90%; left: 6%; height: auto; } #topnav ul {list-style-type: none; margin-top: 16px; padding: 0; } #topnav ul li {display: inline-block; font-family: 'MetaPlusBold', sans-serif; text-transform: uppercase; font-size: 16px; font-weight: 600; color: #333; letter-spacing: 1px; width: 33%; text-align: center;} #topnav ul li:last-of-type {} #topnav ul li:hover {color: #e95a0c;} #bottombar { position: fixed; width: 100%; height: 50px; background-color: #fff; bottom: 0; left: 0; z-index: 5; } #bottomcopyright {position: absolute; width: auto; height: 40px; top: 5px; left: 50px; padding-top: 7px;} #bottomcopyright p {font-family: sans-serif; font-size: 11px; font-weight: 600; color: #333; letter-spacing: 1px; text-transform: uppercase;} #bottomcontact {position: relative; margin: 0 auto; width: 50%; height: 40px; top: 5px; padding-top: 7px; text-align: center;} #bottomcontact p {font-family: sans-serif; font-size: 11px; font-weight: 600; color: #333; letter-spacing: 1px; text-transform: uppercase;} #bottomlinks {position: absolute; width: auto; height: auto; top: 5px; right: 5px; } #bottomlinks ul {list-style-type: none; margin-top: 9px;} #bottomlinks ul li {display: inline-block; font-family: sans-serif; font-size: 11px; font-weight: 600; color: #333; margin-left: 45px; margin-right: 45px; letter-spacing: 1px; text-transform: uppercase;} #cookiebar {position: fixed; width: 100%; height: auto; bottom: 0; left: 0; background-color: rgba(215,0,71,1); padding: 9px; text-align: center; z-index: 20; transition-duration: 1s} #cookiebar.open {transform: translateY(40px); opacity: 0; pointer-events: none;} #cookiebar p {position: relative; margin: 0 auto; max-width: 90%; font-size: 10px; line-height: 12px; text-align: center; color: #fff;} #cookiebar p a {color: #fff; text-decoration: underline; cursor: pointer;} #topbutton {position: absolute; top: 120px; right: 0; width: 335px; height: 320px; z-index: 5; background: url(../img/topbutton.svg) no-repeat center left /cover;} @media screen and (max-width: 1130px) { #topbutton {display: none;} } /************************* UNTERSEITEN ******************************/ .sheet0 {position: relative; width: 100%; height: auto; padding-bottom: 20px; padding-top: 240px; background: url(../img/bg01.jpg) center bottom no-repeat; background-size: cover; -moz-background-size: cover; -o-background-size: cover -webkit-background-size: cover;} .sheet0info {position: relative; width: 100%; height: auto; padding-bottom: 20px; padding-top: 240px; background: url(../img/teaser3.jpg) center bottom no-repeat; background-size: cover; -moz-background-size: cover; -o-background-size: cover -webkit-background-size: cover;} .hurtigruteninfo {position: relative; width: 100%; height: auto; padding-bottom: 20px; padding-top: 240px; background: url(../img/teaser4.jpg) center top no-repeat; background-size: cover; -moz-background-size: cover; -o-background-size: cover -webkit-background-size: cover;} .sheet1 {position: relative; width: 100%; height: auto; padding-top: 100px; padding-bottom: 180px;} .sheet2 {position: relative; width: 100%; height: auto; padding-top: 40px; padding-bottom: 120px; margin-bottom: 80px;} .sheet3 {position: relative; width: 100%; height: auto; padding-top: 40px; padding-bottom: 120px; margin-bottom: 80px;} .sheet4 {position: relative; width: 100%; height: auto; padding-top: 40px; padding-bottom: 20px;} .sheet5 {position: relative; width: 100%; height: auto; padding-top: 40px; padding-bottom: 40px; background-color: #fff;} .startsheet {padding-top: 140px;} .mapsheet {position: relative; width: 100%; height: auto; background-color: #fff; padding-top: 5px; padding-bottom: 80px;} #dotline {position: absolute; width: 100%; height: 0px; z-index: 1; border-top: 1px dashed #004b62; top: 131px;} .impressumsheet {position: relative; width: 100%; height: auto; background-color: #e95a0c; padding-top: 220px; padding-bottom: 80px;} .impressumsheet p, .impressumsheet h2, .impressumsheet h1 {color: #fff;} .teasersheet {padding-bottom: 60px;} .whiteoverlay {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #fff; opacity: 0.6;} .starsheet {position: relative; width: 100%; height: auto; padding: 0; margin: 0;} #diarysheet {position: relative; width: 100%; height: auto; margin-top: 0; margin-bottom: 140px;} #myCarousel1 {position: relative; width: 100%; margin: 0 auto; height: auto; background-color: #fff;} @media (max-width: 1199px) { #diarysheet {display: none;} } .newslettersheet {padding-bottom: 20px;} .newsletterbox { position: relative; width: 85%; margin: 0 auto; height: auto; padding: 20px 20px 40px 20px; background-color: rgba(215,0,71,0.9); text-align: center; z-index: 5; border-radius: 10px; } p.newsletterp {color: #fff !important; margin-bottom: 20px; position: relative; } .newsletterbox a {font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 16px; color: #fff; border: 1px solid #fff; margin-left: 5px; margin-right: 5px; letter-spacing: 2px; font-weight: 300; line-height: 24px; padding: 15px 30px; display: inline-block; margin-bottom: 5px;} .newsletterbox a:hover {background-color: #fff; color: #d30146;} #mc_embed_signup { width: 80%; margin: 0 auto; border-radius: 10px; } #mc_embed_signup .mc-field-group label { text-align: center; } #icon01 {background: url(../img/icon02.svg) center center no-repeat; background-color: #004b62; background-size: 80% 80%;} #icon02 {background: url(../img/icon02.svg) center center no-repeat; background-color: #004b62; background-size: 80% 80%;} #icon03 {background: url(../img/icon03.svg) center center no-repeat; background-color: #004b62; background-size: 80% 80%;} #icon01:hover, #icon02:hover, #icon03:hover {background-color: #d30146;} .icon {position: relative; margin: 0 auto; width: 200px; height: 200px; border-radius: 50%; background-color: #004b62; margin-bottom: 40px; margin-top: 20px; z-index: 3;} p.footerp {position: relative; font-size: 12px; line-height: 14px; color: #d30146; margin-top: 60px; margin-bottom: 20px;} #bottomadress {position: relative; width: 100%; height: auto; margin-top: 40px; margin-bottom: 40px;} #bottomadress #bottomlogo {position: relative; float: left; width: 30%; height: auto; } #bottomadress #bottomtext {position: relative; float: left; width: 69%; height: auto; text-align: left; padding-top: 10px;} #bottomadress #bottomtext h5 {margin-top: 30px; font-size: 1.4vmax; line-height: 1.8vmax;} #teasertext {position: relative; width: 100%; margin: 0 auto; height: auto; margin-top: 30vh; left: 0;} #teasertext h1 {position: relative; color: #fff; background-color: #e95a0c; padding: 10px 20px; text-align: left; display: inline-block; margin-bottom: 0px; font-size: 6vmax; line-height: 6vmax; margin: 0 auto;} #teasertext h3 {position: relative; color: #e95a0c; background-color: #fff; padding: 10px 20px; text-align: left; display: inline-block; margin: 0 auto; margin-top: 5px;} a.teaserlink {position: relative; width: auto; font-family: 'Barlow Condensed', sans-serif; text-transform: none; font-size: 26px; color: #fff; padding: 10px 40px 10px 20px; margin: 0 auto; margin-top: 20px; letter-spacing: 0px; font-weight: 500; line-height: 20px; height: auto; display: inline-block; background-color: #e95a0c;} a.teaserlink:hover {background-color: #dd4a00;} a.bottomlink {font-family: 'MetaPlusBold', sans-serif; text-transform: uppercase; font-size: 26px; color: #fff; letter-spacing: 1px; font-weight: 700; line-height: 26px; position: relative; margin: 0 auto; border: 2px solid #fff; border-radius: 10px; padding: 10px 40px; background-color: none; display: inline-block;} a.bottomlink:hover {background-color: #fff; color: #e95a0c;} /************************* FLEXKARTEN ********************************/ #sheetinfo1 {position: relative; width: 100%; height: auto;} #sheetinfo2 {position: relative; width: 100%; height: auto;} #sheetinfo3 {position: relative; width: 100%; height: auto;} #sheetinfo4 {position: relative; width: 100%; height: auto;} #sheetinfo5 {position: relative; width: 100%; height: auto;} #sheetinfo6 {position: relative; width: 100%; height: auto;} /*************** Buchungsanfrage *****************/ .anfragebox {position: relative; width: 80%; margin: 0 auto; padding: 30px; background-color: #004b67; border-radius: 30px; transform: scale(0.9);} .anfragebox .anfragelogo {position: absolute; width: 300px; height: 300px; background-color: #fff; border: 10px solid #004b67; border-radius: 50%; top: -34px; left: -37px; background: url(../img/anfragelogo.jpg) center center no-repeat; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; -ms-background-size: cover; -o-background-size: cover;} .anfragebox .anfragetext {position: relative; float: right; width: 65%; height: auto; margin-right: 5%; text-align: center;} .anfragebox .anfragetext h3 {color: #fff; margin-top: 10px; margin-bottom: 10px; font-size: 33px;} .anfragebox .anfragetext p {color: #fff;} .anfragebox .anfragetext a {position: relative; display: inline-block; border: 1px solid #fff; padding: 10px 30px; background-color: none; font-family: 'Oswald', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: #fff; margin-top: 20px;} .anfragebox .anfragetext a:hover {position: relative; display: inline-block; border: 1px solid #fff; padding: 10px 30px; background-color: #fff; font-family: 'Oswald', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: #004b67; margin-top: 20px;} .hinterlegt {position: relative; width: 100%; height: auto; background-color: #f8f8f8; padding: 30px 50px; border-radius: 30px;} .reisepaketbox {position: relative; border: 3px solid #d30146; padding: 30px; text-align: center; min-height: 284px;} .reisepaketbox h4 {font-size: 34px; line-height: 34px;} .reisepaketbox p {} .polaroid {position: relative; float: right; margin-left: 20px; margin-bottom: 20px; max-width: 440px; height: auto; display: block; /*transform: rotate(10deg);*/ } /*************** INFOTABELLE *****************/ .infotabelle {position: relative; width: 100%; height: auto; margin-top: 40px; font-family: sans-serif; font-size: 16px;} .infotabelle .inforeihe {position: relative; width: 100%; height: auto; padding-top: 14px; padding-bottom: 4px; border-bottom: 1px solid #eee;} .infotabelle .inforeihe.legende {font-family: 'Oswald', sans-serif; text-transform: uppercase; color: #d30146; font-style: italic; letter-spacing: 1px; padding-bottom: 10px;} .infotabelle .inforeihe:last-of-type {border-bottom: none;} .infotabelle .inforeihe .info1 {position: relative; float: left; width: 32%; margin-right: 1%;} .infotabelle .inforeihe .info2 {position: relative; float: left; width: 20%; margin-right: 1%;} .infotabelle .inforeihe .info3 {position: relative; float: left; width: 19%; margin-right: 1%;} .infotabelle .inforeihe .info4 {position: relative; float: left; width: 10%; margin-right: 1%;} .infotabelle .inforeihe .info5 {position: relative; float: left; width: 15%;} a.tabellenlink {position: relative; display: block; width: 100%; text-align: center; border: 1px solid #d30146; padding: 5px 15px; background-color: none; font-family: 'Oswald', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: #d30146; top: -6px; font-size: 14px; } a.tabellenlink:hover {position: relative; display: block; width: 100%; text-align: center; border: 1px solid #d30146; padding: 5px 15px; background-color: #d30146; font-family: 'Oswald', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: #fff;} /**************** ANFRAGEFORMULARE **************/ .anfragecontainer {position: relative; width: 100%; height: auto; min-height: 500px; padding: 80px; background-color: #f8f8f8;} #anfrageform {position: relative; width: 100%; height: auto;} #anfrageform .anfragerow {position: relative; width: 100%; height: auto; padding-bottom: 14px; padding-top: 20px; border-bottom: 1px solid #ddd; display: block;} #anfrageform .anfragerow .anfragecol1 {position: relative; float: left; width: 45%; height: auto; margin-right: 10px; text-align: left;} #anfrageform .anfragerow .anfragecol2 {position: relative; float: left; width: 48%; height: auto; margin-right: 10px; text-align: left;} /* The radio groups and the pair of "Anzahl Reisende" inputs are
s with a in place of the row's