@charset "UTF-8";

.flex-container { 
	display: flex;
	width: 100%;
	margin: 0 auto;
	padding: 20px 18px;
	justify-content: center;
	flex-wrap: wrap;
}
	.flex-container > div { 
		width: auto;
		margin: 0 5%;
		padding: 10px 0;
		text-align: center;
	}

@media screen and (max-width: 500px) {	/* 1-spaltig */
	.flex-container > div h1 { 
		-moz-hyphens: manual;
		-o-hyphens: manual;
		-webkit-hyphens: manual;
		-ms-hyphens: manual;
		hyphens: manual;
		}
	.flex-container > div h1 .nobreak { 
		white-space:normal; 
		}
	}

@media screen and (max-width: 450px) {	/* linksbuendig */
	.flex-container { 
	padding: 10px 18px 0 18px;
}

	.flex-container > div { 
		text-align: left; margin: 0;
		}
	}


/*********************************/
/* 2 SPALTEN Zeit und Location */
/*********************************/

.location-container {
  display: flex;
  flex-wrap: wrap;
	margin-bottom: 50px;
}

.location-item-left { 
  display: flex;
  background-color: #f5f5f5;
  padding: 20px 18px;
  flex: 50%;  
  justify-content: flex-end; /* Inhalt nach links */
}

.location-item-right { 
  display: flex;
  background-color: #f5f5f5;
  padding: 20px 18px;
  flex: 50%;
  justify-content: flex-start; /* Inhalt nach rechts */
}

.location-container h3 {
  text-align: left;
  padding: 0 5px;
  margin-bottom: 10px;
}

.wrapper1, .wrapper2 { /* Positionierhilfe */ 
		padding: 20px 65px;
        }

    .time-container { 
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        padding: 5px;
        align-items: start;
        width: 350px;
      }

      .time-container > div {
        text-align: left;
        font-size: 23px; font-size: 2.3rem;
        line-height: 1.4;
      	}
        .time-container div:nth-child(1) {
			width: 95px;
			}
        .time-container div:nth-child(3) {
        	text-align: right; width: 262px;
			}

  	.route-container {
        display: grid;
        gap: 10px;
        padding: 5px;
        width: 350px;
        align-items: start;
      }

      .route-container > div {
        text-align: left;
        font-size: 23px; font-size: 2.3rem;
        line-height: 1.4;
      }
      .route-container div:nth-child(2) {
      	margin-top: 30px;
      }


@media (max-width: 1440px) {
	.wrapper1, .wrapper2 { /* Positionierhilfe */
		padding: 20px 18px;
        }
}
	
@media (max-width: 1024px) {
	.wrapper1, .wrapper2 { /* Positionierhilfe */  
		padding: 10px 0;
        }
	.time-container > div, .route-container > div { 
        font-size: 22px; font-size: 2.2rem;
      	}
	.time-container div:nth-child(3) { 
        text-align: right; width: 255px;
		}
	.time-container, .route-container {
		width: 325px;
		}
	}
	
@media (max-width: 768px) {
	.location-container {
		margin-bottom: 20px;
		}
	.location-item-right, .location-item-left { 
		flex: 100%;
	    justify-content: center; 
		padding: 18px;
		}
	.location-item-right {
		margin-top: 10px;
		}
	.time-container > div, .route-container > div { 
        font-size: 23px; font-size: 2.3rem;
      	}
    .time-container div:nth-child(3) {
 		text-align: right; width: 262px;
		}
	.time-container, .route-container { 
		width: 340px; 
		}
	}

@media (max-width: 450px) {
	.location-item-right, .location-item-left {
		flex: 100%;
	    justify-content: flex-start; 
		padding: 18px 0;
		}
    .location-container h3 {
    	padding: 0;
		}
	.wrapper1, .wrapper2 { /* Positionierhilfe */ 
		padding: 0 18px; 
        }
		.time-container, .route-container { 
			 padding: 5px 0; width: auto;
		}
		.time-container > div, .route-container > div { 
        font-size: 22px; font-size: 2.2rem;
      	}
		.time-container div:nth-child(3) {  
        	text-align: right; width: 255px;
		}
	}

@media (max-width: 300px) {
	.time-container > div, .route-container > div {
        font-size: 20px; font-size: 2.0rem;
      	}
	.time-container div:nth-child(1) {
		width: 75px;
		}
	.route-container div:nth-child(2) {
		margin-top: 20px; margin-bottom: 10px;
		}
	.time-container div:nth-child(3) {
		text-align: right; width: 219px;
		}
	}



/*********************************/
/* 4 Bilder */
/*********************************/

.row-image {  
	padding: 0 13px; 
	margin: 0 auto 50px auto;
}
.column-image {
  float: left;
  width: 25%;
  padding: 5px;
}

.row-image::after { /* Clearfix (clear floats) */
  content: "";
  clear: both;
  display: table;
}

@media screen and (max-width: 1024px) {
	.column-image {
		width: 50%;
		}
}

@media screen and (max-width: 768px) { /* 1-spaltig */
	.row-image {  
		margin: 0 auto 10px auto;
		}
	.column-image {
		width: 100%; margin-bottom: 10px;
		}
}

/*********************************/
/* Marken */
/*********************************/

.container-marken { 
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* zentriert */
  max-width: 1270px; 
  margin: 0 auto; 
  padding: 0; 
  gap: 10px 30px;
}
.container-marken > div { 
  flex: 0 0 auto;
}
.container-marken > div img {
  max-width: 100%; max-height: 75px; 
	filter: grayscale(100%);
}
.container-marken > div img:hover {
	filter: none;
}

@media (max-width: 450px) { 
	.container-marken {
      gap: 10px 20px; 
      justify-content: flex-start;
      }
	.container-marken > div {
      width: 45%; height: auto; 
      display: grid; 
      place-items: center;
      }
	.container-marken img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      }
	} 

@media (max-width: 285px) { 	
	.container-marken {
  		gap: 15px; 
		justify-content: flex-start;
		}
	.container-marken > div {
  		width: 100%; height: auto;
      display: block; 
      place-items: left;
		}
	} 


  .newspaper-container {
      max-width: 1285px;
      margin: 10px auto 50px auto;
      padding: 15px 18px;
      column-count: 2;
      column-gap: 50px;
	 }

	.newspaper-container .cta {
		padding-top: 8px;
		padding-bottom: 0;

		font-weight: 500;
		font-size: 23px; font-size: 2.3rem;
		color: #313e99;
		}

	.newspaper-container p {
		  orphans: 3;
		  widows: 3;
		 }

	 .arrival-block { 
	  display: flex;
	  align-items: flex-start;
	  gap: 10px;
	  margin: 10px 0;
	  break-inside: avoid; /* verhindert Umbruch über Spalten */
	}

	#bhf, 
	#parken {
		font-size: 30px; font-size: 3.0rem;
		width: 40px;
		height: auto;
		flex-shrink: 0;
		color: #313e99;
	}

	.arrival-description {
	  flex: 1;
	  font-size: 0.85em;
	  line-height: 1.4;
	  max-width: 95%;
		
      -moz-hyphens: manual;
      -o-hyphens: manual;
      -webkit-hyphens: manual;
      -ms-hyphens: manual;
      hyphens: manual;
	}

@media screen and (max-width: 1140px) {
	.newspaper-container {
      margin: 10px auto 50px auto;
      column-gap: 36px;
	 }
	.newspaper-container .cta {
		font-size: 22px; font-size: 2.2rem;
		padding-top: 5px;
		margin-bottom: 5px;
		max-width: 280px;
		}
	.arrival-description {
	  flex: 1;
	  font-size: 0.85em;
	  line-height: 1.4;
	  max-width: 80%;
	}
    }

@media screen and (max-width: 1024px) {
	.newspaper-container {
      margin: 10px auto 50px auto;
      column-gap: 36px;
	 }
	
	.newspaper-container .cta {
		padding-top: 0;
		margin-bottom: 5px;
		}
    }

@media screen and (max-width: 768px) { /* 1-spaltig */
	.newspaper-container {
        column-count: 1;
        margin: 0 auto 50px auto;
        column-gap: 10px;
        }
	.newspaper-container .cta {
		font-size: 20px; font-size: 2.0rem;
		max-width: none;		
		padding-top: 15px;
		padding-bottom: 10px;
		}
	.arrival-description {
	  max-width: 100%;
	}
    }

@media screen and (max-width: 300px) {
	.newspaper-container .cta {
		font-size: 18px; font-size: 1.8rem;
		padding-top: 10px;
		
		-moz-hyphens: auto;
		-o-hyphens: auto;
		-webkit-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
		}
    .arrival-block { 
	  display: flex;
	  align-items: flex-start;
	  gap: 8px;
	  margin: 10px 0 10px -8px;
	  break-inside: avoid; /* verhindert Umbruch über Spalten */
	}

	.arrival-description { 	
		-moz-hyphens: auto;
		-o-hyphens: auto;
		-webkit-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
		}
	}


/*********************************/
/* SHOPPING TAKE AWAY */
/*********************************/

.container-buy { 
	display: flex; 
	width: 100%;
	margin: 0 auto;
	justify-content: space-between; 
	}

	.container-buy > div { 
		width: 50%;
		}	
	.container-buy div:nth-child(1) {
		background-image:url('images/frech_einkauftuete_big.jpg');
		background-repeat: no-repeat; 
		background-size: cover; 
		background-position: bottom;
		height: 600px;
		}
	.container-buy div:nth-child(2) {
		padding: 4% 0 0 5%; margin: 0 18px 0 0;
		}

		.container-buy .header{ 
			font-size: 37px; font-size: 3.7rem; 
			font-weight: 600; 
			max-width: 450px;
			}
		.container-buy p {
			font-size: 25px; 
			font-size: 2.5rem; 
			max-width: 550px;
			letter-spacing: 0.02rem;
			
			-moz-hyphens: manual;
			-o-hyphens: manual;
			-webkit-hyphens: manual;
			-ms-hyphens: manual;
			hyphens: manual;
			}


  @media screen and (max-width: 1600px) {  
	.container-buy div:nth-child(1) {
	height: 500px;
		}
	.container-buy div:nth-child(2) { 
		padding: 3% 0 0 5%;
		}	
	.container-buy .header{ 
		font-size: 35px; font-size: 3.5rem; 
		max-width: 400px;
		}
	.container-buy p {
		font-size: 23px; 
		font-size: 2.3rem; 
		max-width: 520px;
		}
	}

  @media screen and (max-width: 1440px) {
	.container-buy div:nth-child(1) {
		height: 460px;
		}
	.container-buy div:nth-child(2) {  
		padding: 3.5% 0 0 5%; 
		}
	.container-buy .header{ 
		font-size: 33px; font-size: 3.3rem; 
		max-width: 400px;
		}
	.container-buy p {
		font-size: 21px; 
		font-size: 2.1rem; 
		max-width: 490px;
		}
	}

  @media screen and (max-width: 1300px) {
	.container-buy div:nth-child(1) {
		background-image:url('images/frech_einkauftuete_small.jpg');
		height: 440px; 
		}
	.container-buy div:nth-child(2) { 
		padding: 0 auto 0 5%;
		}
	.container-buy .header{ 
		font-size: 32px; font-size: 3.2rem; 
		max-width: 400px;
		}
	.container-buy p {
		font-size: 21px; 
		font-size: 2.1rem; 
		max-width: 460px;
			
		-moz-hyphens: auto;
		-o-hyphens: auto;
		-webkit-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
		}
	}

  @media screen and (max-width: 1024px) {
	.container-buy div:nth-child(1) {
		background-image:url('images/frech_einkauftuete_mini.jpg');
		height: 500px; background-position: bottom;
		}
	.container-buy div:nth-child(2) {	
		padding: 20px 0 0 20px; margin: 0 18px 0 0;
		}
	.container-buy .header{ 
		font-size: 30px; font-size: 3.0rem; 
		max-width: none;
		}
	.container-buy p {
		font-size: 21px; font-size: 2.1rem; 
		max-width: none;	
		
		-moz-hyphens: auto;
		-o-hyphens: auto;
		-webkit-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
		}
  }

  @media screen and (max-width: 768px) { /* einspaltig */
	.container-buy {
		display: flex; 
		width: 100%;
		margin: 0 auto;
		flex-direction: column;
		justify-content: flex-start; 
	}
	.container-buy > div {  
		width: 100%;
	}
	  	.container-buy div:nth-child(2) { 
		  padding: 25px 18px;
	}
   }


  @media screen and (max-width: 300px) { /* einspaltig */
	  .container-buy .header{ 
			font-size: 24px; font-size: 2.4rem;
			}	
	  .container-buy p {
		font-size: 18px; font-size: 1.8rem; 
		}

  }