@media (max-width: 400px) {

.headpic-text-fahrplanauskunft {
	font-size: 1.4em !important;
}

	/* Fahrplanauskunft Formular */
	.box-fahrplanauskunft {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
		border: 1px solid #ddd;
		background: #fff;
		padding: 5px 10px 0px 10px;
	}

		.fahrplanauskunft-row {
			margin: 0 0 10px 0;
				display: grid;
				grid-template-columns: calc(40%  - 20px) 20px 60%;
				grid-template-rows: auto;
		}

			.fahrplanauskunft-row-complete {
				grid-column: 1 / 4;
			}

			.fahrplanauskunft-row-left {
				grid-column: 1 / 2;
			}

			.fahrplanauskunft-row-right {
				grid-column: 3 / 4;
			}

				.fahrplanauskunft-label {
					margin: 0;
					font-family: 'Source Sans 3',arial,sans-serif;
					color: #2A4194 !important;
					font-size: 1em;
					line-height: 1.6em;
					display: block;
					font-weight: 600;
				}

					.fahrplanauskunft-ziel-left {
						width: calc(100% - 36px);
						float: left;
					}

					.fahrplanauskunft-ziel-right {
						width: 36px;
						float: left;
						text-align: center;
					}

				.fahrplanauskunft-input {
					width: 100%;
					padding: 8px 17px;
					outline: 0;
					border-radius: 0;
					background: #F0F1F1;
					color: #2A4194 !important;
					font-size: 1em;
					appearance: none;
					-webkit-appearance: none;
					-moz-appearance: none;
					resize: none;
					border: 1px solid #2A4194;
					font-family: 'Source Sans 3',arial,sans-serif;
				}

				.fahrplanauskunft-input:hover, .fahrplanauskunft-input:focus {
					background: #fff;
					color: #2A4194 !important;
					border: 1px solid #2A4194;
					outline: 2px solid #2A4194 !important;
				}

				.fahrplanauskunft-changebutton {
					width: 36px;
					height: 40px;
					background-color: #F0F1F1;
					background-image: url(../images/icon-fpa-ziel.svg);
					background-repeat: no-repeat;
					background-position: 50% 50%;
					background-size: 16px;
					cursor:pointer;
					border-top: 1px solid #2A4194;
					border-right: 1px solid #2A4194;
					border-bottom: 1px solid #2A4194;
					padding: 8px 10px 8px 10px !important;
				}

				.fahrplanauskunft-changebutton:hover, .fahrplanauskunft-changebutton:focus {
					background-color: #fff;
					border: 1px solid #2A4194;
					outline: 2px solid #2A4194 !important;
				}

				.fahrplanauskunft-changebutton:active, .fahrplanauskunft-changebutton:focus {
					border: 1px solid #2A4194;
					outline: 2px solid #2A4194 !important;
				}

					.fahrplanauskunft-row-complete > input[type="submit"] {
						width:100%;
						font-size:1em !important;
					}

}



@media (min-width: 401px) and (max-width: 480px) {

	/* Fahrplanauskunft Formular */
	.box-fahrplanauskunft {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
		border: 1px solid #ddd;
		background: #fff;
		padding: 15px 20px 10px 20px;
	}

		.fahrplanauskunft-row {
			margin: 0 0 10px 0;
				display: grid;
				grid-template-columns: calc(40%  - 20px) 20px 60%;
				grid-template-rows: auto;
		}

			.fahrplanauskunft-row-complete {
				grid-column: 1 / 4;
			}

			.fahrplanauskunft-row-left {
				grid-column: 1 / 2;
			}

			.fahrplanauskunft-row-right {
				grid-column: 3 / 4;
			}

				.fahrplanauskunft-label {
					margin: 0;
					font-family: 'Source Sans 3',arial,sans-serif;
					color: #2A4194 !important;
					font-size: 1em;
					line-height: 1.6em;
					display: block;
					font-weight: 600;
				}

					.fahrplanauskunft-ziel-left {
						width: 90%;
						float: left;
					}

					.fahrplanauskunft-ziel-right {
						width: 10%;
						float: left;
						text-align: center;
					}

				.fahrplanauskunft-input {
					width: 100%;
					padding: 8px 17px;
					outline: 0;
					border-radius: 0;
					background: #F0F1F1;
					color: #2A4194 !important;
					font-size: 1em;
					appearance: none;
					-webkit-appearance: none;
					-moz-appearance: none;
					resize: none;
					border: 1px solid #2A4194;
					font-family: 'Source Sans 3',arial,sans-serif;
				}

				.fahrplanauskunft-input:hover, .fahrplanauskunft-input:focus {
					background: #fff;
					color: #2A4194 !important;
					border: 1px solid #2A4194;
					outline: 2px solid #2A4194 !important;
				}

				.fahrplanauskunft-changebutton {
					width: 36px;
					height: 40px;
					background-color: #F0F1F1;
					background-image: url(../images/icon-fpa-ziel.svg);
					background-repeat: no-repeat;
					background-position: 50% 50%;
					background-size: 16px;
					cursor:pointer;
					border-top: 1px solid #2A4194;
					border-right: 1px solid #2A4194;
					border-bottom: 1px solid #2A4194;
					padding: 8px 10px 8px 10px !important;
				}

				.fahrplanauskunft-changebutton:hover, .fahrplanauskunft-changebutton:focus {
					background-color: #fff;
					border: 1px solid #2A4194;
					outline: 2px solid #2A4194 !important;
				}

				.fahrplanauskunft-changebutton:active, .fahrplanauskunft-changebutton:focus {
					border: 1px solid #2A4194;
					outline: 2px solid #2A4194 !important;
				}

					.fahrplanauskunft-row-complete > input[type="submit"], .button-submit {
						width:100%;
						font-size: 1.3em !important;
					}

}