/* Design: 768px */ @media screen and (max-width: 979px) { /* header */ #content div.hfsProgressbarCon {padding: 0 16px;} #content ul.process-bar {margin:16px 0 18px;} #content ul.process-bar li.active {flex-grow: 1;} #header div#headerclose {right: 16px;} /* footer */ #content #hafasImgBar h2 {font-size: 16px;} #footer {padding: 0 16px;} #footer #footer-nav ul {padding: 24px 0 16px;} body div#doc {width: 100%;} /* availability page */ #content div.availabilityRow div.availabilityOffer {width: 23%; max-width: 25%;} #content div.availabilityRow div.availabilityOffer.availabilityOfferUpsellAufpreis {max-width:none; margin-right:0;} #content div.availabilityOfferUpsellBenefits {padding: 0 !important;} #content div.availabilityOfferUpsellBenefits .availabilityShortText {padding-left: 36px !important;} #content div.availabilityOfferUpsellBenefits .availabilityShortText img {left: 2px;} #content #UpsellAufpreisContent div.availabilityOfferUpsellBenefits {padding-left: 32px !important;} #content div.availabilityRow {display: flex;} #content div.availabilityRow div.availabilityOffer {flex: 1 0;} /* query page */ #content .queryWrapper {padding: 0 16px;} #content .viaLocationHolderInner .viaContainer .input-wrapper {width:215px;} #content div.returnPage .viaLocationHolderInner .viaContainer .input-wrapper {width:348px;} /* result page */ #content #querySummaryInfo {padding:12px 16px;} #content #querySummaryInfo a.closeIcon {right:10px;} /* Reisende */ #content #travellerDetail .travellerRow {flex-direction:column;} #content #travellerDetail .travellerRow .travellerAgeDiv.input-wrapper {margin-left:0; margin-top:8px; width:323px;} /* Zuglauf */ #content .queryWrapper.tqResults h1 {padding-bottom:16px;} #content div#trainroute .tqRow, #content div#trainroute .tqRow .combinedPlatformRis {align-items:flex-start;} #content div#trainroute .tqRow .departure.tqRealtimeAvailable, #content div#trainroute .tqRow .arrival.tqRealtimeAvailable {flex-direction:column;} #content div.tqRemarks {padding-top:24px;} /* UMC */ #content div.ecologyOverview div.ecoCloud > div:first-child {width:224px; height:180px; padding:24px 16px 16px;} #content div.ecologyOverview div.train, #content div.ecologyOverview div.car, #content div.ecologyOverview div.flight {background-position:left top; background-repeat:no-repeat; background-size:224px 180px;} #content div.ecologyOverview div.train {background-image:url(../img_responsive/umc_graphic-768_train_DB-coolgrey300.png);} #content div.ecologyOverview div.train.ecoCloud_gruen {background-image:url(../img_responsive/umc_graphic-768_train_DB-lightgreen500.png);} #content div.ecologyOverview div.car {background-image:url(../img_responsive/umc_graphic-768_car_DB-coolgrey300.png);} #content div.ecologyOverview div.car.ecoCloud_gruen {background-image:url(../img_responsive/umc_graphic-768_car_DB-lightgreen500.png);} #content div.ecologyOverview div.flight {background-image:url(../img_responsive/umc_graphic-768_airplane_DB-coolgrey300.png);} #content div.ecologyOverview div.flight.ecoCloud_gruen {background-image:url(../img_responsive/umc_graphic-768_airplane_DB-lightgreen500.png);} #content .ecoTableHeader, #content .ecoTableValues {padding-left:16px; padding-right:16px;} } /* Design: 600px */ @media screen and (max-width: 767px) { /* footer */ #content #hafasImgBar {flex-wrap: wrap; flex-direction: column; justify-content:space-around; padding-top:24px;} #content #hafasImgBar_1, #content #hafasImgBar_2 {text-align: center; height: auto;} #content #hafasImgBar_2 {margin-top:24px;} #content #hafasImgBar_1_Img, #content #hafasImgBar_2_Img {flex-wrap: wrap; justify-content:center;} #footer #footer-nav ul {padding: 16px 0;} body div#doc {width: 100%;} /* query page */ #content .queryWrapper {padding: 0 16px;} #content .input-wrapper, #content .date-wrapper {width:240px;} #content .date-wrapper input {width:170px;} #content .dep-arr-wrapper {margin-left:12px;} #content .timeContainer {width:220px;} #content .time-wrapper {width:120px;} #content .time-wrapper input {width:44px;} #content .locationFlex div.errormsg {width:240px;} #content .viaSelection {flex-direction: column;} #content div.viaLocationHolder {margin-left:0;} #content div.viaLocationHolderInner {margin-top: 16px !important} #content div.returnPage .viaLocationHolderInner .viaContainer .input-wrapper, #content div.viaLocationHolderInner .viaContainer .input-wrapper {margin-left:0; width:265px;} #content .informationBox {width:100%;} /* Gruppenreisende In- und Ausland (.abroad) */ #content #travellerDetail .travellerGroupJny {flex-direction:column;} #content #travellerDetail .travellerGroupJny .input-wrapper {width:265px; margin-right:0px; margin-bottom:16px;} #content #travellerDetail .travellerGroupJny.abroad .travellerAbroadAdults .input-wrapper {margin-bottom:0;} #content #travellerDetail .travellerGroupJny.abroad .childRow .input-wrapper:first-child {margin-right:8px; margin-bottom:0;} #content #travellerDetail .travellerGroupJny .input-wrapper.littleChildAmount {margin-bottom:0;} #content #travellerDetail .travellerRow .travellerAgeDiv.input-wrapper {width:265px;} /* Rückfahrt hinzufügen Overlay */ #returnJourneyLayer {width: 584px !important;} #content div.returnPage div.queryBox.locationContainer, #returnJourneyLayer div.queryBox.locationContainer {flex-direction:column; position:relative;} #content div.returnPage div.queryBox.locationContainer > div, #returnJourneyLayer div.queryBox.locationContainer > div {display:block; margin-bottom:8px; width:100%;} #content div.returnPage div.queryBox.locationContainer::before, #returnJourneyLayer div.locationContainer::before {content: ""; position: absolute; width:2px; border-left: 2px solid #282D37; left: 9px; top:15px; height:35%;} #content div.returnPage .date-wrapper, #returnJourneyLayer .date-wrapper {width:216px;} #content div.returnPage .date-wrapper input, #returnJourneyLayer .date-wrapper input {width:146px;} #content div.returnPage .timeContainer, #returnJourneyLayer .timeContainer {width:auto;} #content div.returnPage .time-wrapper, #returnJourneyLayer .time-wrapper {width:140px;} #content div.returnPage .time-wrapper input, #returnJourneyLayer .time-wrapper input {width:78px;} #content div.returnPage .dep-arr-wrapper, #returnJourneyLayer .dep-arr-wrapper {margin-left:16px;} #content div.returnPage div.viaContainer {width:265px;} #content div.returnPage .viaContainer, #content div.returnPage .input-wrapper, #returnJourneyLayer .input-wrapper {width:264px;} #content .returnPage .stopoverContainer .input-wrapper > div input, #returnJourneyLayer .stopoverContainer .input-wrapper > div input {width:204px;} /* Calendar */ table.calendar tbody#callink0_tbody_1, table.calendar tbody#callink1_tbody_1 {display:none;} div.calendardiv {width:320px !important; left:-145px !important;} div.calendardivarrow {left:153px !important;} #callink0_heading_months_gt {display:inline-block !important;} /* Auswahllisten */ #content .custom-select {width:265px;} #content .custom-select.special-layout select {width:249px;} /* query/journey summary */ #content #querySummaryTextual .showDetailsLink, #content #querySummaryTextual .button-inside a {margin:12px 0 24px;} #content #querySummaryTextual .summaryContent .connection {display: block; padding:12px 24px 12px 0px;} #content #querySummaryForm .summaryContent .connection {display: block; margin:12px 24px 12px 0px;} #content #querySummaryTextual .summaryContent .conSummaryTravellers {padding-top:0; margin-top:12px;} #content #querySummaryForm .summaryContent .connection, #content #querySummaryTextual .summaryContent .connection {margin:0;} #content #querySummaryTextual .summaryContent .connection.conBorderTop {border-top: 1px solid #F0F3F5;} #content #querySummaryTextual .summaryContent .connection div, #content #querySummaryForm .summaryContent .connection div {padding: 4px 24px 0px 4px;} #content #querySummaryTextual .summaryContent .connection div:first-child #content #querySummaryForm .summaryContent .connection div:first-child {padding-top:0;} #content #querySummaryTextual #conTime_out, #content #querySummaryTextual #conTime_ret, #content #querySummaryTextual #conTravellers_out, #content #querySummaryTextual #conTravellers_ret, #content #querySummaryTextual #showDetails_out, #content #querySummaryTextual #showDetails_ret, #content #querySummaryTextual #changeRequest_out, #content #querySummaryTextual #changeRequest_ret {display:none;} #content #querySummaryTextual #conTime_out.show, #content #querySummaryTextual #conTime_ret.show, #content #querySummaryTextual #conTravellers_out.show, #content #querySummaryTextual #conTravellers_ret.show, #content #querySummaryTextual #showDetails_out.show, #content #querySummaryTextual #showDetails_ret.show, #content #querySummaryTextual #changeRequest_out.show, #content #querySummaryTextual #changeRequest_ret.show {display:block;} #content #querySummaryTextual .summaryContent #conTravellers, #content #querySummaryTextual #showDetails, #content #querySummaryTextual #changeRequest {display:none;} #content #querySummaryForm .summaryContent .connection .conFlap, #content #querySummaryTextual .summaryContent .connection .conFlap {display: block; cursor: pointer;} #content #querySummaryInfo #querySummaryForm {padding:12px 0;} #content #querySummaryInfo #querySummaryForm h2 {margin-top:0;} #content #querySummaryForm div.flexBtnLine {padding-bottom:0;} /* availability page */ #content div.resultContentHolder {padding: 32px 16px;} #content div.availabilityRow div.availabilityOffer {float: none; width: auto; margin-right:0; max-width: none;} #content div.availabilityRow div.availabilityOfferUpsellBenefits {padding-left: 0;} #content div.availabilityOfferUpsellBenefits div.availabilityOfferUpsellBenefits .availabilityShortText {padding-left: 30px;} #content div.availabilityOfferUpsellBenefits div.availabilityShortText img {left: 4px;} #content div.availabilityOfferUpsellAufpreisCheckbox label#upsellTicketLabel {white-space: normal; text-align: left; background-position: left top; width:auto;} #content div.availabilityOffer.availabilityOffer_1 {margin-top:32px !important;} #content div.availabilityOffer.availabilityOffer_2 {margin-top:16px;} #content div.availabilityRow {display: block;} #content .button-inside.overviewButtons {margin: 0 -16px; padding:50px 16px;} /* detail overlay */ .HafasInfoLayer {min-width: 584px; width:75%;} #infoLayerJourney ul.connectionDetails li.first::before, #infoLayerJourney ul.connectionDetails li.last::before {left:59px;} #infoLayerJourney div.conDetailsRow_dep div.time, #infoLayerJourney div.conDetailsRow_arr div.time, #infoLayerJourney div.detailsintermediate div.time {flex:0 0 80px;} #infoLayerJourney div.conDetailsRow_dep div.station, #infoLayerJourney div.conDetailsRow_arr div.station {flex:1;} #infoLayerJourney div.conDetailsRow_product {flex-direction:column; width:221px; align-items:flex-start;} #infoLayerJourney div.conDetailsRow_product .products {flex:unset;} #infoLayerJourney div.conDetailsRow_product .capacity {margin-top:8px;} #infoLayerJourney ul.connectionDetails li.sectionDeparture div.conDetailsRow_dep::before, #infoLayerJourney ul.connectionDetails li.sectionArrival div.conDetailsRow_arr::before {left:59px;} /* BC overlay */ .HafasInfoLayer div.infoLayerCon {flex-wrap:wrap;} .HafasInfoLayer div.infoLayerName {flex-basis: 50%;} .HafasInfoLayer div.infoLayerPriceSmall {order:3; flex-basis: 50%;} .HafasInfoLayer div.infoLayerValue {order:4; flex:none !important; width:100%; padding:0px 80px 0 56px;} /* Teilpreis Overlay */ #content .popupContent div.connectionPart, #returnJourneyLayer div.connectionPart {flex-direction: column; margin-top: 16px;} #content .popupContent div.connectionPart.connectionFare, #returnJourneyLayer div.connectionPart.connectionFare {margin-top: 8px;} #content .popupContent div.connectionPart:last-child, #returnJourneyLayer div.connectionPart:last-child {margin-bottom: 8px;} #content .popupContent div.connectionPart div.icon-journey-start, #returnJourneyLayer div.connectionPart div.icon-journey-start {margin-right: 0; margin-bottom: 8px;} #content .popupContent div.connectionPart div.icon-journey-start::before, #returnJourneyLayer div.connectionPart div.icon-journey-start::before {content: ""; position: absolute; width:2px; border-left: 2px solid #282D37; left: 9px; top:15px; height:95%;} /* Teilsuche */ div.partSearchOptions {flex-direction:column;} div.partSearchOptions .custom-select {width:260px !important;} /* bc page */ #BCRCon div.bcradio {margin-left: 16px; padding: 24px 16px 0 0;} #BCRCon div.bcradio label {height: 20px; padding: 0} #BCRCon div.bcradio label img {display: none;} #content .radio-wrapper.bcradio input[type="radio"] + label {padding-left: 21px !important; margin-right: 0 !important;} #content .noBC .radio-wrapper.bcradio input[type="radio"] + label {padding: 0 0 0 36px !important;} #BCRCon div.bcSavingCon {position: static; background-color: transparent;} #BCRCon div.bcPriceCon {font-size: 16px; align-self: flex-end; padding: 8px 16px 15px;} #BCRCon div.bcInfo {padding-bottom: 0; padding-right: 24px;} #BCRCon div.bcInfo h2 {font-size: 16px;} #BCRCon div.bcInfo a.arrowlink {display: none;} #BCRCon div.bcSavingCon {width:auto; padding-bottom:0;} #BCRCon div.bcSavingCon p {font-size:12px; line-height:20px;white-space: nowrap;} #BCRCon div.bcSaving {font-size: 14px; line-height:17px;} #BCRCon div.bcMainContainer {flex-wrap: wrap; justify-content: flex-end;} #BCRCon div.bcMainContainer.noBC {justify-content: flex-start;} #content .radio-wrapper.bcradio input[type="radio"] + label h2 {font-size: 16px !important;} /* TP Overview */ /*#content div.connectionRoute {flex-direction: column;}*/ #content div.connectionRoute .products {margin-bottom: 8px;} #content div.connectionRoute .prodSep {display: none;} #content div.connectionTime .connectionTimeSoll .time, #content div.connectionTime .connectionTimeIst .time {font-size:16px; width:110px; min-width:110px;} /* TP Details */ #content ul.connectionDetails li {padding: 20px;} #content div.conDetailsRow_dep div.time, #content div.conDetailsRow_arr div.time, #content div.detailsintermediate div.time, #content li.intermediateStationRow div.time {flex:0 0 80px;} #content li.intermediateStationRow div.platform {flex:0 0 70px;} #content ul.connectionDetails li.intermediate {padding:20px 21px;} #content ul.connectionDetails li.remarks {padding-left:102px;} #content ul.connectionDetails li.intermediateStationRow {padding-right:20px;} #content ul.connectionDetails li .moreDetailsLink {padding-left:82px;} #content .detailsintermediate span.iconWalk, #content .detailsintermediate span.iconBike, #content .detailsintermediate span.iconCar, #content .detailsintermediate span.iconTaxi {left: 70px;} #content div.detailContainer li.dateDivider {padding: 8px 20px !important;} #content div.detailContainer li.dateDivider div.dateChange {left:20px; flex:0 0 80px; text-align:left; padding:0; margin:0;} #content div.detailContainer li.dateDivider div.dateChange span {padding: 0 8px 0 0;} #content div.detailContainer li.dateDivider .dateDividerLine {left:20px; right:20px;} #content div.detailContainer .detailCancelled.jnyCancelled {width:60px;} /* Perlschnur */ #content ul.connectionDetails li.sectionDeparture:first-child div.conDetailsRow_dep::before, #content ul.connectionDetails li.sectionDeparture div.conDetailsRow_dep::before, #content ul.connectionDetails li.sectionArrival div.conDetailsRow_arr::before, #content ul.connectionDetails li.remarks::before, #content ul.connectionDetails li.intermediateStationRow::before {left:59px;} #content ul.connectionDetails li.sectionDeparture.contentIsAddress div.conDetailsRow_dep::before {left:58px; bottom:-28px;} #content ul.connectionDetails li.intermediate div.detailsintermediate::before {left:57px;} #content ul.connectionDetails li.intermediate div.detailsintermediate::before {top:9px;} #content ul.connectionDetails li.remarks::before, #content ul.connectionDetails li.intermediateStationRow::before, #content ul.connectionDetails li.dateDivider::before, #content ul.connectionDetails li.intermediateStationRow + li.dateDivider::before {left:79px;} #content li.intermediateStationRow div.stationIcon {right:11px;} /* TBP */ #content .tbpCheckboxContentRight {position:unset; display:flex; justify-content:flex-end; margin-bottom:29px;} #content div.tbpSlotContainer {max-height:unset; margin-bottom:32px; padding:0;} #content div.tbpSlot {background-color:#F0F3F5; margin:0 !important; padding:18px 34px 18px 8px !important; height:56px !important; width:100%; flex:none; border-bottom:1px solid #D7DCE1; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between;} #content div.tbpSlot * {cursor:pointer !important;} #content div.tbpSlotTimes {display:flex; flex-direction:row; align-items:center;} #content div.tbpSlotTimes::before {content:''; display:block; margin-right:40px; background-image:url("../img_responsive/Radiobutton_off_active.svg"); background-size:24px 24px; background-repeat:no-repeat; background-position:center center; width:24px; height:24px;} #content div.tbpSelect div.tbpSlotTimes::before {background-image:url("../img_responsive/Radiobutton_on_active.svg");} #content div.tbpSlot .tbpSlotTimeStart {position: unset; font-size:16px; line-height:24px; font-weight:normal;} #content div.tbpSlot .tbpSlotTimeDivider.hide {display:block !important; position:unset; margin:0 4px; font-size:16px; line-height:24px; font-weight:normal;} #content div.tbpSlot .tbpSlotTimeStart.hide {display:block !important;} /* in schmaler Ansicht sollen ausgeblendete Startzeiten angezeigt werden */ #content div.tbpSlot .tbpSlotTimeEnd {position: unset; font-size:16px; line-height:24px; font-weight:normal;} #content div.tbpSlot .tbpSlotLine {display: none;} #content div.tbpSlot .tbpSlotPrice {padding:0px 8px !important; font-size:16px; line-height:20px; font-weight:normal; font-family: DBSansRegular;} #content div.tbpSlot.tbpCheap {border-left: none;} #content div.tbpSlot.tbpCheap .tbpSlotPrice::before {display:none;} #content div.tbpSlot.tbpCheap .tbpSlotPrice {background-color:#78BE14; color:#FFFFFF; border-radius:4px; font-family: DBSansBold;} #content div.tbpSelect::after {display: none;} /* Zuglauf */ #content .queryWrapper.tqResults {margin-bottom:40px;} #content h3.trainroute {margin:0 0 16px; flex-direction:column; align-items:flex-start;} #content h3.trainroute a.trainCompositionIcon {margin-top:16px;} #content div#trainroute .tqRow .ris {flex:1;} #content div#trainroute .tqRow .combinedPlatformRis {flex-direction:column; align-items:flex-start; flex:2;} #content div#trainroute .tqRow.tqHeadline .combinedPlatformRis .ris {display:none;} #content div#trainroute .tqRow .combinedPlatformRis .ris .risHL {display:block; margin-top:8px;} #content div#trainroute .tqRow .combinedPlatformRis .ris.risNoMarginTop .risHL {margin-top:0;} /* UMC */ #returnJourneyLayer .queryBox.ecoQuery .flexContent, #content .queryBox.ecoQuery .flexContent {flex-direction:column;} #returnJourneyLayer .queryBox.ecoQuery .flexContent .motorClass, #content .queryBox.ecoQuery .flexContent .motorClass {margin-top:16px;} #content div.ecologyOverview {flex-direction:column;} #content div.ecologyOverview > div {margin-bottom:24px;} #content div.ecologyOverview > div:last-child {margin-bottom:0;} #content div.ecologyOverview div.ecoCloud > div:first-child {width:536px; height:180px;} #content div.ecologyOverview div.train, #content div.ecologyOverview div.car, #content div.ecologyOverview div.flight {background-position:left top; background-repeat:no-repeat; background-size:536px 180px;} #content div.ecologyOverview div.train {background-image:url(../img_responsive/umc_graphic-600_train_DB-coolgrey300.png);} #content div.ecologyOverview div.train.ecoCloud_gruen {background-image:url(../img_responsive/umc_graphic-600_train_DB-lightgreen500.png);} #content div.ecologyOverview div.car {background-image:url(../img_responsive/umc_graphic-600_car_DB-coolgrey300.png);} #content div.ecologyOverview div.car.ecoCloud_gruen {background-image:url(../img_responsive/umc_graphic-600_car_DB-lightgreen500.png);} #content div.ecologyOverview div.flight {background-image:url(../img_responsive/umc_graphic-600_airplane_DB-coolgrey300.png);} #content div.ecologyOverview div.flight.ecoCloud_gruen {background-image:url(../img_responsive/umc_graphic-600_airplane_DB-lightgreen500.png);} #content .ecologyDisplayMode {margin:0;} #content .ecologyDisplayMode .custom-select {width:100%;} #content .ecoTableHeader {display:none;} #content .ecoTableContent .ecoContentRow:first-child {border-top:none;} #content .ecoTableValues {flex-wrap:wrap; padding:16px;} #content .ecoTableValues .singleEmissionHeadline, #content .ecoTableValues .subHeader {display:block;} #content .ecoTableValues .emissionHeadlines {flex: none !important; display:flex; align-items: flex-end; width:100%; gap:8px; padding-bottom:0; margin-bottom:16px;} #content .ecoTableValues .emissionType {width:100%; flex:none !important; display:flex; flex-direction:column !important; margin-bottom:16px;} #content .emissionOEV, #content .emissionCar, #content .emissionFlight {padding:0 !important; flex-wrap:wrap; min-width:unset; gap:8px;} #content .emissionOEV .emissionGroupHeadline, #content .emissionCar .emissionGroupHeadline, #content .emissionFlight .emissionGroupHeadline {display:block; width:100%; flex: none !important;} #content .ecologyDiagramDisplayMode {display:block; margin:8px 0 24px;} #content .ecologyDiagramDisplayMode .custom-select select, #content .ecologyDiagramDisplayMode .custom-select {width:100% !important;} #content .diagramContainer {width:100%;} #content .diagramContainer.hideInSmallViewport {display:none;} #content .diagramTableWrapper {display:flex; justify-content:center;} /* Design: 650px - !!! Nur für Fortschrittsanzeige zu nutzen !!! */ @media screen and (max-width: 650px) { /* header */ #content div.hfsProgressbarCon {padding: 12px 16px 0;} #content #hfs_progressbar {margin-top:0;} #content #hfs_progressbar li {height:0; overflow: visible;} #content #hfs_progressbar li.active {flex-grow: 1;} #content #hfs_progressbar li span {display: none;} #content #hfs_progressbar li::after {bottom: 0;} #content div.hfsProgressbarCon .custom-select {display:inline-block;} } /* Design: 320px */ @media screen and (max-width: 599px) { #hafasHelpBox > h3 {justify-content: space-between;} #hafasHelpBox #hafasHelpBoxContentToggle h3 {display: none;} body div#doc {width: 100%; min-width:320px;} .queryWrapper #hafasHelpBox, #content div.errorMessageContainer, #content div.ecologyBox, #content div.queryBox {border-radius:0;} /* query page */ #content .queryWrapper {padding:0;} #content .queryWrapper h1, #content h2.queryHeadline {padding-left:16px; padding-right:16px;} #content .locationFlex {display:flex; flex-direction:column; position:relative;} #content .locationFlex > div:last-child {margin-top:16px;} #content .locationFlex div.errormsg {margin-top:0; width:265px;} #content .locationSwitchContainer {height:64px; position:absolute; right:-16px; transform: translateY(50%);} #content .locationSwitch {transform: rotate(90deg); } #content .locationContainer {width: calc(100% - 40px);} #content .locationContainer .input-wrapper {width: auto;} #content .input-wrapper {width:248px;} #content .date-wrapper {width:100%;} #content .date-wrapper input {width:170px;} #content .dateContainer {width:100%;} #content div.calendar {margin-right: 0;} #content .dep-arr-wrapper {margin-left:12px;} #content .timeContainer {width:100%; margin-top:16px;} #content .timeContainerInner .time-wrapper input {flex-grow: 2;} #content .time-wrapper {width:100%;} #content .time-wrapper input {width:100px;} #content .checkbox-wrapper.products input[type="checkbox"] + label {word-break:break-word;} #content div.viaLocationHolderInner {flex-direction: column; margin-top: 8px !important;} #content .viaLocationHolderInner div {float:none;} #content div.returnPage .viaLocationHolderInner, #content .viaLocationHolderInner .input-wrapper {margin:0 !important; width:288px !important;} #content .viaLocationHolderInner .input-wrapper {width: 100% !important;} #content .viaLocationHolderInner .viaContainer .input-wrapper {border-radius: 4px 4px 0px 0px;} #content .viaLocationHolderInner .stopoverContainer .input-wrapper {border-radius: 0px 0px 4px 4px;} #content .viaLocationHolderInner .stopoverContainer .input-wrapper > div input {width:100%; flex-grow: 2;} #content div.globalProducts {flex-direction: column;} #content div.globalProducts > div {margin-bottom: 12px; margin-right:0;} #content div.globalProducts > div:last-child {margin-bottom: 0;} #content input.toggleBtn {padding-left:0; padding-right:32px; background-position:right center;} #content input.toggleBtnClosed {background-image:url(../img_responsive/24dp_icon_navigation_expand-more.svg);} #content input.toggleBtnOpened {background-image:url(../img_responsive/24dp_icon_navigation_expand-less.svg);} /* Suggest */ #suggestion {width:calc(100% - 70px) !important;} #suggestion #suggestionCon {width:100% !important;} /* Gruppenreisende In- und Ausland (.abroad) */ #content #travellerDetail .travellerGroupJny .input-wrapper {width:288px;} #content #travellerDetail .travellerGroupJny.abroad .childRow .custom-select {width:288px;} #content #travellerDetail .travellerGroupJny.abroad .childRow .custom-select .dropdown {width:280px;} #content #travellerDetail .travellerGroupJny.abroad .childRow {flex-direction:column;} #content #travellerDetail .travellerGroupJny.abroad .childRow .input-wrapper {margin:0;} #content #travellerDetail .travellerRow .travellerAgeDiv.input-wrapper {width:288px;} /* Rückfahrt hinzufügen Overlay */ #returnJourneyLayer {padding:16px; width:304px !important;} #content div.returnPage .input-wrapper {width:100%;} #content div.returnPage div.queryBox.locationContainer, #returnJourneyLayer div.queryBox.locationContainer {margin-bottom:32px;} #content div.returnPage div.queryBox.timeDateContainer, #returnJourneyLayer div.queryBox.timeDateContainer {margin-bottom:56px;} #content div.returnPage .date-wrapper, #returnJourneyLayer .date-wrapper {width:224px;} #content div.returnPage .date-wrapper input, #returnJourneyLayer .date-wrapper input {width:154px;} #content div.returnPage .dateContainer div.calendar, #returnJourneyLayer .dateContainer div.calendar {margin-right:0; margin-left:16px;} #content div.returnPage .timeContainer, #returnJourneyLayer .timeContainer {margin-top:20px;} #content div.returnPage .time-wrapper, #returnJourneyLayer .time-wrapper {width:148px;} #content div.returnPage div.viaLocationHolderInner, #returnJourneyLayer div.viaLocationHolderInner {flex-direction:column; margin-bottom:40px !important;} #content div.returnPage div.viaLocationHolderInner .stopoverContainer .input-wrapper, #returnJourneyLayer div.viaLocationHolderInner .stopoverContainer .input-wrapper {margin-left:0;} #content div.returnPage div.viaLocationHolderInner .viaContainer, #returnJourneyLayer div.viaLocationHolderInner .viaContainer {margin-bottom:24px;} #content div.returnPage input.submit-btn.submit-btn-second, #returnJourneyLayer input.submit-btn.submit-btn-second {margin-top:16px !important; width:100%;} #returnJourneyLayer .radio-wrapper input[type="radio"] + label {margin-right:12px;} #content div.returnPage p.querybutton {flex-direction: column-reverse;} /* Calendar */ table.calendar tbody#callink0_tbody_1, table.calendar tbody#callink1_tbody_1 {display:none;} div.calendardiv {width:317px !important; border-radius:0 !important; left:-276px !important;} div.calendardivarrow {left:283px !important;} #callink0_heading_months_gt {display:inline-block !important;} #returnJourneyLayer div.calendardiv {width:304px !important; left:-256px !important;} #returnJourneyLayer div.calendardivarrow {left:263px !important;} /* Calendar Overlay */ #returnJourneyLayer div.popupContent .downloadFlex, #content div.popupContent .downloadFlex {flex-direction:column; align-items:center;} #returnJourneyLayer div.popupContent .downloadFlex .downloadText, #content div.popupContent .downloadFlex .downloadText {margin-right:0 !important;} #returnJourneyLayer div.popupContent .downloadButton, #content div.popupContent .downloadButton {width:100%;} #returnJourneyLayer div.popupContent .downloadButton a, #content div.popupContent .downloadButton a {display: block; margin:24px 0 8px; text-align:center;} #content .popupContent button.submit-btn, #returnJourneyLayer .popupContent button.submit-btn {width:100%; margin: 0 0 8px;} #returnJourneyLayer div.popupContent .popupQueryBox .input-wrapper, #content div.popupContent .popupQueryBox .input-wrapper, #returnJourneyLayer div.popupContent .popupQueryBox textarea, #content div.popupContent .popupQueryBox textarea {width:100% !important;} /* Auswahllisten */ #trainCompositionLayer .custom-select, #content .custom-select {width:288px;} #content .custom-select.special-layout select {width:272px;} #content .customerSelection .custom-select {width: 100%;} #content .query.traveller .custom-select.special-layout select {width: 100%;} #content #travellerDetail .travellerRow .travellerLeftSide {flex-direction: column;} #content #travellerDetail .travellerRow .travellerTypeDiv {margin-right: 0;} #content #travellerDetail .travellerRow .travellerTypeDiv .custom-select.special-layout {border-radius: 4px 4px 0 0;} #content #travellerDetail .travellerRow .travellerReductionDiv .custom-select.special-layout {border-radius: 0 0 4px 4px;} #trainCompositionLayer .custom-select {max-width:100%;} #content div.flexBtnLine {flex-direction: column !important; align-items: flex-start;} #content div.flexBtnLine div.mainFormSubmit {width:100%; margin-bottom:14px;} #content div.flexBtnLine div.mainFormSubmit input.submit-btn {margin:0; width:100%;} #content div.flexBtnLine div.queryAdditionalBtnContainer {display: flex; flex-direction: column-reverse;} #content div.flexBtnLine div.queryAdditionalBtnContainer a, #content div.flexBtnLine div.queryAdditionalBtnContainer input {float:none; margin:0;} #content div.flexBtnLine div.queryAdditionalBtnContainer a {margin-top:32px;} #content div.flexBtnLine .button-inside.querybutton {width:100%; margin-top:24px !important;} #content div.flexBtnLine .button-inside.querybutton input {width:100%; float:none;} /* Infobox Gruppenreisen */ #content .queryBox div.informationContainer {width: 100%;} /* Button Angebotsdetails und BC */ .bcRadioCon {flex-basis: 10%; flex-grow: 1; flex-shrink: 0;} .bcInfo {flex-basis: 80%; flex-grow: 2; flex-shrink: 0;} .bcPriceCon {flex-basis: 100%; flex-grow: 1; flex-shrink: 0;} #content #availabilityUpsellTotal.invisible {display:none;} #content div.resultContentHolder .overviewButtons .button-inside, #content div.resultContentHolder .overviewButtons .button-inside .button-border, #content div.resultContentHolder .overviewButtons .button-inside .button-border .submit-btn {width:100%; margin:0; float:none;} #content div.resultContentHolder .overviewButtons .button-inside .button-border .submit-btn.availButton {margin-bottom:16px !important;} #BCRCon .overviewButtons .cookieCheckbox {margin: 0 0 20px; float:none;} #content div.availabilityOffer div.availabilityPrice {padding: 20px 24px 16px 16px;} #content .button-inside.overviewButtons {margin:0;} #content .availabilityHolder .button-inside.overviewButtons {margin:0 -16px;} /* query/journey summary */ #content #querySummaryTextual .button-inside a {width:100%;} #content #querySummaryInfo .connection .conSummaryDep, #content #querySummaryInfo .connection .conSummaryArr {background-position-y: 6px;} #content div.resultContentHolder h1, #content div.resultContentHolder h2 {font-family: DBHeadLightRegular;} /* Teilsuche */ div.partSearchData, div.partSearchBottom {flex-direction:column; align-items:flex-start; margin-top:36px;} div.partSearchBottom .partSearchInfo {margin:0 0 20px 0 !important;} div.partSearchBottom .button-inside, div.partSearchBottom .button-inside input {width:100%; white-space:normal;} div.partSearchOptions .custom-select {width:272px !important;} /* Druck und E-Mail */ #returnJourneyLayer .popupContent .configWrapper, #content .popupContent .configWrapper {flex-direction:column;} #returnJourneyLayer .popupContent .configWrapper .custom-select, #content .popupContent .configWrapper .custom-select {width:100%;} #returnJourneyLayer .popupContent .configWrapper .custom-select:first-child, #content .popupContent .configWrapper .custom-select:first-child {margin:0 0 16px;} /* details overlay */ .HafasInfoLayer {min-width: 304px; width: 75%;} #infoLayerJourney div.conDetailsRow_dep::before {bottom:-86px;} #infoLayerJourney div.conDetailsRow_dep div.station, #infoLayerJourney div.conDetailsRow_arr div.station {flex-direction:column;} #infoLayerJourney div.conDetailsRow_product {margin-top:16px;} #infoLayerJourney ul.connectionDetails li {flex-direction:column;} #infoLayerJourney div.conDetailsRow_product .capacity {width:200px;} /* BC overlay */ .HafasInfoLayer div.infoLayerPriceSmall {order:4; padding-top:16px;} .HafasInfoLayer div.infoLayerValue {order:3; flex:none !important; width:100%; padding:16px 0 0px;} /* footer */ #hafasLegend div.symbols, #hafasLegend div.liablility {float: none !important; width: 100%;} #content #hafasImgBar h2 {text-align:center;} /* TP Overview */ #content div.tbpSlotContainer:empty {display: none;} #content .tbpNoSlots {padding: 0 16px;} #content div.timeButton {border-radius: 0; padding-left: 16px;} #content div.overviewConnection {flex-direction:column; border-radius: 0;} #content div.connectionData {border-bottom: 1px solid #d7dce1; order:1; max-width:100%;} #content div.connectionAction {flex-basis:131px; border-left:none; order:3; max-width:100%;} #content div.connectionAction .connectionPrice a.buttonbold {border-radius:0;} #content div.details {order:2; max-width:100%;} #content .detailContainer {border-bottom: 1px solid #d7dce1; border-top:none;} #content div.resultContentHolder {padding: 24px 0;} #content div.resultContentHolder.availabilityHolder {padding:32px 16px;} #content #tp_overview_headline {padding: 0 16px; margin: 0;} #content #tbpCheckboxWrapper {padding-right: 16px;} #content div.conDetailsRow_dep, #content div.conDetailsRow_arr {font-size: 14px;} #content ul.connectionDetails li {padding-left: 16px;} #content div.conDetailsRow_dep div.station, #content div.conDetailsRow_arr div.station {overflow: hidden; text-overflow: ellipsis;} #content div.connectionPrice div.tablebutton a[target="ext"] {display: block; font-family: DBSansRegular; font-size: 14px; color: #646973;} #content form.stationInfo div {display: block; width:100%;} #content form.stationInfo .custom-select {margin-bottom: 16px; display: block; width:100%;} #content form.stationInfo .button-inside span.button-border button {width:100%; display:block;} #content div.connectionTime .connectionTimeSoll .time, #content div.connectionTime .connectionTimeIst .time {width:100px; min-width:100px;} #content div.connectionTime .connectionTimeSoll .time .timeDiv, #content div.connectionTime .connectionTimeIst .time .timeDiv {width:10px;} /* TP Details */ #content ul.connectionDetails li.remarks {padding-right:20px; padding-left: 96px;} #content div.detailsintermediate div:last-child {display: flex; /*flex-direction:column;*/} #content div.detailsintermediate span.rtInfo {margin: 8px 0 0;} #content ul.connectionDetails li.intermediate {border: 1px solid #fff; border-top: none; border-bottom: none;} #content div.detailsintermediate div.time, #content li.intermediateStationRow div.time {flex:0 0 75px; white-space: nowrap;} #content li.intermediateStationRow div.stationIcon {right: 13px;} #content li.intermediateStationRow div.capacity {display:none;} #content li.intermediateStationRow div.intermediateStation > div.capacity {display:block; margin-top:8px;} #content ul.connectionDetails li.sectionDeparture, #content ul.connectionDetails li.sectionArrival {border: 1px solid #fff; border-top: none; border-bottom: none;} #content div.connectionTime .time.dateChange {font-size: 12px; color: #646973; padding-top: 0; padding-right: 0;} #content div.connectionTime {align-items: baseline;} #content div.conDetailsRow_product .capacity {position: relative; padding-left: 28px;} #content div.conDetailsRow_product .capacity img {position: absolute; left: 0;} #content ul.connectionDetails li.dateDivider {background-color: #fff;} #content div.detailContainer li.dateDivider div.dateChange {flex: 0 0 78px;} #content .detailsintermediate span.iconWalk, #content .detailsintermediate span.iconBike, #content .detailsintermediate span.iconCar, #content .detailsintermediate span.iconTaxi {left: 66px;} /* Perlschnur */ #content ul.connectionDetails li.intermediate div.detailsintermediate::before {left:54px;} #content ul.connectionDetails li.remarks::before, #content ul.connectionDetails li.dateDivider::before, #content ul.connectionDetails li.intermediateStationRow::before, #content ul.connectionDetails li.intermediateStationRow + li.dateDivider::before {left:76px;} #content ul.connectionDetails div.stationIcon {right:10px;} #content li.intermediateStationRow div.stationIcon {right:9px;} #content ul.connectionDetails li.sectionDeparture.contentIsAddress div.conDetailsRow_dep::before {left:59px;} /* TBP */ #content div.resultContentHolder h2.tp_overview_headline_small span.tbpAvailable {display: flex; justify-content: space-between; margin-top: 8px; margin-left:0; padding: 8px 0;} #hafasLegend h3 {font-size: 14px;} #hafasLegend .legendtext {font-size: 12px;} /* Zuglauf */ #content h3.trainroute {margin:0 16px 16px;} #content div.tqHIMMsg {margin:16px;} #content div#trainroute .tqRow.tqHeadline {display:none;} #content div#trainroute .tqRow {flex-direction:column; padding:12px 16px;} #content div#trainroute .tqRow div {padding:4px 0;} #content div#trainroute .tqRow .departure, #content div#trainroute .tqRow .arrival {flex-direction:column; align-items:flex-start;} #content div#trainroute .tqRow .departure span, #content div#trainroute .tqRow .arrival span {padding-left:0;} #content div#trainroute .tqRow .departure span .rtPrefix, #content div#trainroute .tqRow .arrival span .rtPrefix {display:inline;} #content div#trainroute .tqRow .risHL, #content div#trainroute .tqRow .tqContentHL {display:block; padding:0; font-family:DBSansBold;} #content div#trainroute .tqRow .departure.hideDepartureTime, #content div#trainroute .tqRow .arrival.hideArrivalTime {display:none;} #content div.tqRemarks {padding:40px 16px 16px;} /* UMC */ #content div.hafasEcology {padding:16px;} #content .ecologySummary div.ecoConnection {flex-direction:column;} #content .ecologySummary div.ecoConnection > div {margin-bottom:8px;} #content .ecologySummary #ecoConSwitch, #content .ecologySummary #ecoChangeSettings {width:100%;} #content div.ecologyBox {padding: 24px 16px;} #content div.ecologyOverview div.ecoCloud > div:first-child {width:288px; height:180px;} #content div.ecologyOverview div.train, #content div.ecologyOverview div.car, #content div.ecologyOverview div.flight {background-position:left top; background-repeat:no-repeat; background-size:288px 180px;} #content div.ecologyOverview div.train {background-image:url(../img_responsive/umc_graphic-320_train_DB-coolgrey300.png);} #content div.ecologyOverview div.train.ecoCloud_gruen {background-image:url(../img_responsive/umc_graphic-320_train_DB-lightgreen500.png);} #content div.ecologyOverview div.car {background-image:url(../img_responsive/umc_graphic-320_car_DB-coolgrey300.png);} #content div.ecologyOverview div.car.ecoCloud_gruen {background-image:url(../img_responsive/umc_graphic-320_car_DB-lightgreen500.png);} #content div.ecologyOverview div.flight {background-image:url(../img_responsive/umc_graphic-320_airplane_DB-coolgrey300.png);} #content div.ecologyOverview div.flight.ecoCloud_gruen {background-image:url(../img_responsive/umc_graphic-320_airplane_DB-lightgreen500.png);} #content .ecoTableValues {padding:24px 0;} #content .ecoTableValues .flexWide {flex:1;} #content .ecoTableValues .emissionOEV, #content .ecoTableValues .emissionCar, #content .ecoTableValues .emissionFlight {flex-direction:column; min-width:unset; gap:16px;} #content .ecoTableValues .emissionCar .emissionGroupHeadline {visibility:visible;} #content .ecoTableValues .singleEmissionHeadline {margin-bottom:4px;} #content .ecoTableValues .emissionHeadlines {padding-bottom:16px; border-bottom:1px solid #282d3733;} #returnJourneyLayer .queryBox.ecoQuery .custom-select, #content .queryBox.ecoQuery .custom-select {width:100%;} #returnJourneyLayer .queryBox.ecoQuery .querybutton {justify-content:center; width:100%;} #returnJourneyLayer .queryBox.ecoQuery .querybutton button {width:100%;} }