/* Created on : 16.09.2015, 12:14:36 Author : Oliver Stradins */ @import url(https://fonts.googleapis.com/css?family=Dosis:400,500,600); html, body { height: 100%; } body { margin: 0; padding: 0; font-size: 100%; background-color: #fff; -webkit-text-size-adjust: none; } img { border: none; width: 100%; max-width: 100%; height: auto; } a { text-decoration: none; color: #e40083; transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; } a:hover { text-decoration: underline; } div, img, a { display: block; } p { margin: 0 0 1.35em; font-size: 1.125em; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } p:last-child { margin-bottom: 0; } p a { display: inline-block; } p strong { font-weight: 600; } p em { font-style: normal; white-space: nowrap; } input.powermail_input, input.powermail_date, input.powermail_submit, select, textarea, .content-box .csc-uploads ul, .tx-tw-tourguide .input-wrapper input, .tx-tw-tourguide .input-wrapper select, .tour-submit, .filter-submit { appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ -webkit-border-radius: 0; border-radius: 0; font-family: Dosis, serif; font-weight: 400; line-height: 1.5; font-size: .75em; border: none; background-color: transparent; } .clear { clear: both; } .viewport { width: 100%; max-width: 1100px; margin: 0 auto; } #navigation ul, #footer ul, #banner ul { list-style: none; margin: 0; padding: 0; } /* CSS Sprite */ .touchnav-trigger, #Cat_right_Header span, .info_icon, #id-12 .content-left .inner p, #cart a, .cal_table_tourbook a, .Cal_right_table th span { background-image: url('/tm/nfbg/fileadmin/templates/images/stattreisen-sprite.svg'); background-color: transparent; background-repeat: no-repeat; } /* H-Tags */ h1, h2, h3, h4 { margin: 0 0 1em; font-size: 1em; font-weight: 600; text-transform: uppercase; line-height: 1.25; letter-spacing: 0.05em; } .content-box h2 { margin-top: 2em; } #id-76 h2 { margin-bottom: 0.25em; } /* Main Wrapper */ #outer-wrapper { min-height: 100%; position: relative; font-family: Dosis, serif; font-weight: 400; line-height: 1.35; overflow: hidden; letter-spacing: 0.025em; color: #000; padding: 3em 0; } #inner-wrapper { overflow: hidden; padding-bottom: 20em; position: relative; } /* Logo */ #logo { margin: 0 auto; width: 5.25em; z-index: 3; background-color: #fff; } /* Newsbox */ .newsbox { background-color: #e5e5e5; cursor: default; margin: 0 0.4em 0.25em; padding: 0.5em 0.5em 0.5em 0.75em; position: relative; } .newsbox.open { background-color: #e5e5e5; border-color: #fff; } .newsbox .info { float: left; margin-left: 1em; } .newsbox ul { list-style: none; margin: 0.85em 0 0; padding: 0; font-size: 0.875em; } .newsbox li { margin: 0.25em 1em 0.5em 0; font-weight: 500; color: #e40083; } .newsbox-trigger { background-color: #cbd400; color: #fff; float: left; font-size: 2.25em; font-weight: 600; height: 1.15em; line-height: 1.15; text-align: center; width: 1.15em; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } /* Warenkorb Link */ #cart { display: inline-block; vertical-align: middle; } #cart a { width: 40px; height: 35px; background-position: -205px 6px; text-indent: 9999px; overflow: hidden; } #navigation .cart-link { display: none; } /* Navigation */ #navigation { text-align: center; margin: 0.75em 0 1.75em; } #navigation li { display: inline-block; } #navigation a { color: #000; text-transform: uppercase; font-size: 1.125em; font-weight: 500; padding: .25em; line-height: 2; margin: 0 0.75em; letter-spacing: 0.1em; } #navigation a:hover, #navigation .act a { color: #e40083; text-decoration: none; } #subnav-block { display: none; } /* Content */ #content-wrapper { margin: 0 auto; max-width: 1000px; } .content-left { float: left; width: 33%; } .content-right { float: right; width: 65%; } .content-left .header, .content-right .header { background-color: #e40083; height: 3.5em; margin-bottom: 1.75em; position: relative; } .content-left .inner, .content-right .inner, #Cat_left .inner { padding: 0 1.25em; } #id-12 .content-right .inner, #id-10 .content-right .inner, #id-69 .content-right .inner, #id-73 .content-right .inner { padding: 0; } .content-left .header h3 { bottom: 0.6em; color: #fff; font-size: 1.125em; font-weight: 400; left: 1em; margin: 0; position: absolute; text-transform: uppercase; } .content-right .header h1 { bottom: 0.3em; color: #fff; font-size: 1.75em; font-weight: 400; left: 0.65em; margin: 0; position: absolute; text-transform: uppercase; } .content-right .cols2 { column-count: 2; column-gap: 1em; -moz-column-count: 2; -moz-column-gap: 1em; -webkit-column-count: 2; -webkit-column-gap : 1em; column-rule-width: 0; -moz-column-rule-width: 0; -webkit-column-rule-width: 0; -moz-column-fill: balance; column-fill: balance; overflow: hidden; } .content-right .cols2 p, .content-right .cols2 .csc-textpic { /*-webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; break-inside: avoid; display: inline-block;*/ width: 100%; } .content-right .cols2 .csc-textpic { margin-bottom: 1.35em; } #id-11 .content-right .cols2 .csc-textpic { border: 1px solid #000; } .content-left .inner ul { padding-left: 1.25em; margin: -1em 0 0; font-size: 1.125em; } /* Banner */ #banner { background-color: #e5e5e5; margin-bottom: 3em; position: relative; } #id-15 #banner { display: none; } #banner h2 { background-color: rgba(229,0,131,0.8); bottom: 18%; color: #fff; cursor: default; font-size: 2.25em; font-weight: 500; left: 3%; letter-spacing: 0.12em; line-height: 1; margin: 0; padding: 0.5em; position: absolute; text-transform: uppercase; z-index: 2; } #banner .mobile { display: none; } /* Start Kacheln */ .start-tiles { margin-right: -1%; } .start-tiles .item, .grid-sizer { float: left; width: 33%; } .start-tiles .item.double { width: 66%; } .start-tiles .item.full, .start-tiles .item.big { width: 99%; } .start-tiles .item.special h2 { background-color: transparent; top: 27% !important; left: 0 !important; right: 0 !important; bottom: inherit !important; text-align: center; font-size: 1.75em !important; } .start-tiles .item.special .image { display: none; } .start-tiles .item.special.color-1 .inner { background-color: #cbd400; } .start-tiles .item.special .inner a:hover { text-decoration: none; } .start-tiles .item .bumper { padding: .4em; } .start-tiles .item .inner { padding-bottom: 100%; position: relative; overflow: hidden; } .start-tiles .item.double .inner { padding-bottom: 49%; } .start-tiles .item.full .inner { padding-bottom: 32.4%; } .start-tiles .item.big .inner { padding-bottom: 53.5%; } .start-tiles .item h2 { position: absolute; background-color: rgba(229,0,131,0.6); padding: 0.5em 0.75em; color: #fff; text-transform: uppercase; z-index: 2; font-size: 0.9375em; font-weight: 500; letter-spacing: 0.12em; margin: 0; } .start-tiles .item .image { position: absolute; z-index: 1; } .start-tiles .item .image .mobile { display: none; } /* Tour Extension */ #jump-menu { text-align: center; margin-bottom: 4em; } #jump-menu select { background-color: #f6d0e2; color: #000; font-size: 0.85em; width: 16em; margin-right: 1em; padding: 0.35em 0.75em; display: inline-block; } #jump-menu option { background-color: #fff; } /* Tipps */ .tipp-item { padding-bottom: 3em; } .tipp-item .image { margin-bottom: 1em; } .tipp-item h2 { color: #e40083; font-size: 1.75em; font-weight: 400; letter-spacing: 0.01em; line-height: 1; margin-bottom: 0.25em; } .tipp-item h4 { color: #e40083; font-size: 1.125em; font-weight: 400; margin-bottom: 0; } /* Kundenmeinungen */ .tx-os-opinions .content-right .inner { padding: 1em 1.25em; background-color: #edeeef; } .tx-os-opinions .content-right .inner p { font-size: 1.5em; margin-bottom: 0.25em; } .tx-os-opinions .content-right .inner h2 { font-size: 1.5em; text-transform: uppercase; margin: 0; color: #e40083; } .opinion-item { padding-bottom: 3em; } /* Linke Spalte Link */ #Cat_left p a strong { background-color: #cbd400; color: #fff; font-weight: 400; padding: 0.25em 1em; text-transform: uppercase; transition: background 0.2s linear; -moz-transition: background 0.2s linear; -webkit-transition: background 0.2s linear; border: none; } #Cat_left p a strong:hover { background: #b7bf00; } #Cat_left p a:hover { text-decoration: none; } .Cat_left_infobox select { background-color: #d9d9d9; margin-bottom: 1em; padding: 0.75em 1em; width: 100%; font-size: 1em; } .filter-submit, .filter-reset { background-color: #cbd400; color: #fff; font-size: 1em; height: 1.5em; text-transform: uppercase; } .filter-submit { padding: 0.25em 1em 1.9em; cursor: pointer; } .filter-reset { display: inline-block; line-height: 1.5; margin-left: 1em; padding: 0.3em 1em; } /* Kontakt */ .tx-powermail h3, .tx-powermail legend { display: none; } .tx-powermail fieldset { border: none; padding: 0; margin: 0; clear: both; } .tx-powermail label, .tx-powermail .powermail_fieldwrap_input input, .tx-powermail .powermail_fieldwrap_check legend, .tx-powermail .powermail_fieldwrap_textarea textarea, .powermail_fieldwrap_submit input, .tx-powermail .powermail_fieldwrap_typoscript select, .tx-powermail .powermail_fieldwrap_select select, .tx-powermail .powermail_fieldwrap_date input, .tx-tw-tourguide .label-wrapper label, .tx-tw-tourguide .input-wrapper input, .tx-tw-tourguide .input-wrapper select, .tx-tw-tourguide .input-wrapper .input-bumper, .tour-submit { font-size: 1.125em; margin: 0.25em auto; width: 90%; line-height: 1.5; display: block; border: none; padding: 0; } .tx-powermail .powermail_fieldwrap_date input { height: 1.5em; } .tx-powermail label { width: 80%; } .powermail_fieldwrap_submit input, .tour-submit { width: auto; background-color: #cbd400; color: #fff; padding: 0.25em 1em; margin: 0.25em 0 0.25em 20%; cursor: pointer; transition: background 0.2s linear; -moz-transition: background 0.2s linear; -webkit-transition: background 0.2s linear; } .powermail_fieldwrap_submit input:hover, .tour-submit:hover { background: #b7bf00; } #id-69 .powermail_fieldwrap_submit input, #id-73 .powermail_fieldwrap_submit input { margin-left: 35%; } .tour-submit { padding: 0.75em 2em; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; margin-left: 35%; } .tx-powermail .label-wrapper, .tx-tw-tourguide .label-wrapper { background-color: #e40083; width: 20%; float: left; clear: both; color: #fff; font-weight: 400; text-transform: uppercase; margin-bottom: 0.5em; } .tx-tw-tourguide .label-wrapper, #id-69 .tx-powermail .label-wrapper, #id-73 .tx-powermail .label-wrapper { width: 35%; } .tx-tw-tourguide .label-wrapper { margin-bottom: 1.25em; } .tx-tw-tourguide .label-wrapper.special-label { background-color: #e5e5e5; color: #000; } .tx-powermail .input-wrapper, .tx-tw-tourguide .input-wrapper { background-color: #e5e5e5; width: 80%; float: left; margin-bottom: 0.5em; } .tx-tw-tourguide .input-wrapper, #id-69 .tx-powermail .input-wrapper, #id-73 .tx-powermail .input-wrapper { width: 65%; } .tx-tw-tourguide .input-wrapper { margin-bottom: 1.25em; } .tx-tw-tourguide .input-wrapper.no-text, .tx-tw-tourguide .input-wrapper.no-text input { cursor: default; } .tx-powermail .powermail_fieldwrap_input input, .powermail_check_outer, .tx-powermail .powermail_fieldwrap_textarea textarea, .tx-powermail .powermail_fieldwrap_typoscript select, .tx-powermail .powermail_fieldwrap_select select, .tx-tw-tourguide .input-wrapper input, .tx-tw-tourguide .input-wrapper select { background-color: transparent; } .powermail_fieldwrap.powermail_fieldwrap_typoscript.powermail_fieldwrap_16 { clear: both; } .tx-powermail .powermail_fieldwrap_textarea textarea { margin-top: 0; max-height: 24em; min-height: 12em; resize: vertical; } .tx-powermail .powermail_fieldwrap_check legend { display: inherit; } .powermail_check_outer { background-color: transparent; width: 70%; margin-bottom: 0.5em; } .tx-powermail .powermail_fieldwrap_check label { float: none; background-color: transparent; color: inherit; font-weight: 400; padding-left: 0; display: inline-block; width: auto; } .powermail_checkbox { display: inline-block; margin-left: 2em; } #id-12 .content-left .inner { background-color: #e5e5e5; padding-top: 1em; padding-bottom: 1em; text-transform: uppercase; } #id-12 .content-left .inner strong { color: #e40083; display: inline-block; padding-bottom: 0.25em; } #id-12 .content-left .inner p { line-height: 1.15; padding-left: 2.5em; padding-top: 0.25em; font-size: 0.875em; background-position: -770px -350px; min-height: 27px; } #id-12 .content-left .inner p:nth-child(2) { background-position: -770px -430px; } #id-12 .content-left .inner p:nth-child(3) { background-position: -770px -510px; } #id-12 .content-left .inner p:nth-child(4) { background-position: -770px -590px; } /* Footer */ #footer-wrapper { background-color: #e5e5e5; position: absolute; bottom: 0; left: 0; right: 0; padding: 1em 0; z-index: 0; font-weight: 500; text-transform: uppercase; cursor: default; } #footer { max-width: 1000px; } #footer a { color: #000; text-transform: uppercase; font-size: .75em; } #footer h4 { color: #e40083; font-size: .75em; } #footer .footer-info { font-size: .75em; } .footer-col { float: left; vertical-align: top; } .legal-nav{ margin-top: 1em !important; margin-bottom: 0.75em !important; } .sigel { margin-top: 1em; width: 132px; } .fb-icon img { width: 34px; height: 34px; } @media screen and (max-width: 1180px) { body { font-size: 90%; } .viewport { max-width: none; } /* Navigation */ #navigation a { margin: 0 0.25em; } /* Content */ #content-wrapper { max-width: 96%; } /* Tour Detail */ #Cat_right_info { padding: 1em 1.25em !important; } /* Footer */ #footer { width: 94%; } } @media screen and (max-width: 980px) { #Cat_right_info { font-size: 1em !important; } } @media screen and (max-width: 900px) { #outer-wrapper { padding-bottom: 0; } #inner-wrapper { padding-bottom: 8em; } /* Footer */ #footer-wrapper { position: static; } .footer-col { width: 50%; } .mobile-col { float: left; width: 66.66666666666666666666666666666666666666667% } #footer-col-3, #footer-col-4 { padding-top: 2em; } #footer-col-5 { float: right; width: 33.33333333333333333333333333333333333333333%; } } @media screen and (max-width: 750px) { #outer-wrapper { padding: 0 0 0; } /* Logo */ #logo { left: 0; position: fixed; top: 0; } /* Jump Menu */ #jump-menu { display: none; } /* Navigation */ #navigation { position: fixed; width: 60%; top: 0; right: 0; display: none; margin: 0; overflow-x: hidden; overflow-y: scroll; text-align: left; background-color: #e40083; z-index: 3; } #navigation li { display: block; } #navigation a { color: #fff; border-top: 1px solid #fff; margin: 0; padding: 0.25em 0.5em; font-size: 1.5em; } #navigation a:hover { color: #fff; } #navigation .act a { color: #000; } #navigation ul#nav-block { padding-top: 4em; } #subnav-block { display: block; } .touchnav-trigger { width: 5em; height: 5em; position: fixed; top: 0; right: 0; background-color: transparent; background-position: 16px 20px; z-index: 3; } .touchnav-trigger.close { z-index: 4; background-position: -88px 17px; background-color: transparent; width: 3.55em; height: 4.05em; } #navigation .cart-link { display: inherit; } /* Banner */ #banner h2 { bottom: 8%; left: 0; } /* Newsbox */ .newsbox { margin: 0 0 1em; padding-top: 6em; } /* Content */ #content-wrapper { max-width: 100%; } } @media screen and (max-width: 680px) { .tx-powermail .label-wrapper { width: 30%; } .tx-powermail .input-wrapper { width: 70%; } /* Banner */ #banner .desktop { display: none; } #banner .mobile { display: inherit; } } @media screen and (max-width: 640px) { /* Footer */ .footer-col { width: 100%; } .mobile-col, #footer-col-5 { width: 50% } #footer-col-2 { padding-top: 2em; } } @media screen and (max-width: 540px) { /* Content */ .content-left, .content-right, #Cat_left, #Cat_right { float: none !important; width: auto !important; margin-bottom: 2em; } .content-left .header, .content-right .header { height: auto; } .content-right .header h1 { padding: 0.25em 0.5em; position: static; } .content-left .header h3 { padding: 0.75em; position: static; } /* Banner */ #banner h2 { font-size: 1.75em; } /* Startkacheln */ .start-tiles .item .image .mobile { display: inherit; } .start-tiles .item .image .desktop { display: none; } .start-tiles .item, .grid-sizer, .start-tiles .item.double, .start-tiles .item.full, .start-tiles .item.big { float: none; width: 100%; margin-bottom: 1em; } .grid-sizer { display: none; margin-bottom: 0; } .start-tiles .item .bumper { padding: 0; } .start-tiles .item .inner, .start-tiles .item.double .inner, .start-tiles .item.big .inner { padding-bottom: 0; } .start-tiles .item .image { position: static; } .start-tiles .item h2 { bottom: 12% !important; left: 0 !important; right: inherit !important; top: inherit !important; } .start-tiles { margin-right: 0; } .start-tiles .item.special h2 { padding: 3em 0; position: static; } } @media screen and (max-width: 480px) { /* Navigation */ #navigation { left: 0; top: 0; right: 0; width: auto; } .touchnav-trigger.close { right: inherit; left: 0; } /* Banner */ #banner h2 { font-size: 1.5em; } /* Content */ .content-right .cols2 { column-count: 1; -moz-column-count: 1; -webkit-column-count: 1; } } @media screen and (max-width: 340px) { /* Banner */ #banner h2 { font-size: 1.25em; } }