@charset "UTF-8";

/**
 * Theme Name: Dampfschnellzug
 * Theme URI: https://schnellzuglok.de
 * Description: Corporate Theme
 * Version: 1
 * Author: Thomas Schürmann
 * Author URI: https://schuermann.design
 * Tags: UEF
 * last edited: 2024.10.11
 */
 
 /* SECTION 1 : FONTS */

 /* Inconsolata Regular - latin */
@font-face {
	font-display: swap; 
	src: url('font/inconsolata-v32-latin-400.eot'); 
	src: url('font(/inconsolata-v32-latin-400.eot?#iefix') format('embedded-opentype'),
	     url('font/inconsolata-v32-latin-400.woff2') format('woff2'), 
	     url('font/inconsolata-v32-latin-400.woff') format('woff'), 
	     url('font/inconsolata-v32-latin-400.ttf') format('truetype'), 
	     url('font/inconsolata-v32-latin-400.svg#inconsolata') format('svg'); 
	font-family: 				'inconsolata';
	font-style: 				normal;
	font-weight: 				400;
}

/* I N C O N S O L A T A */

/* Inconsolata 500 Medium - latin */
@font-face {
	font-display: swap; 
	src: url('font-zero/inconsolata-medium-2-latin-500.eot'); 
	src: url('font-zero/inconsolata-medium-2-latin-500?#iefix') format('embedded-opentype'),
	     url('font-zero/inconsolata-medium-2-latin-500.woff2') format('woff2'), 
	     url('font-zero/inconsolata-medium-2-latin-500.woff') format('woff'), 
	     url('font-zero/inconsolata-medium-2-latin-500.ttf') format('truetype'), 
	     url('font-zero/inconsolata-medium-2-latin-500.svg#inconsolata') format('svg'); 
	font-family: 				'inconsolata';
	font-style: 				normal;
	font-weight: 				500;
}

/* Inconsolata 700 Bold - latin */
@font-face {
	font-display: swap; 
	src: url('font-zero/inconsolata-2-latin-700.eot'); 
	src: url('font-zero/inconsolata-2-latin-700?#iefix') format('embedded-opentype'), 
		 url('font-zero/inconsolata-2-latin-700.woff2') format('woff2'),
	   	 url('font-zero/inconsolata-2-latin-700.woff') format('woff'), 
	     url('font-zero/inconsolata-2-latin-700.ttf') format('truetype'),
	     url('font-zero/inconsolata-2-latin-700.svg#inconsolata') format('svg');
	font-family: 				'inconsolata';
	font-style: 				normal;
	font-weight: 				700;
}

/*  S A N S I T A */


/* Sansita 700 Bold - latin */
@font-face {
	font-display: swap; 
	src: url('font/sansita-swashed-v18-latin-500.eot'); 
	src: url('font/sansita-swashed-v18-latin-500.eot?#iefix') format('embedded-opentype'), 
	   url('font/sansita-swashed-v18-latin-500.woff2') format('woff2'),
	   url('font/sansita-swashed-v18-latin-500.woff') format('woff'), 
	   url('font/sansita-swashed-v18-latin-500.ttf') format('truetype'),
	   url('font/sansita-swashed-v18-latin-500.svg#sansita') format('svg');
	font-family: 				'sansita';
	font-style: 				normal;
	font-weight: 				500;
}







/* 02 SECTION : VARIABLES */

:root {
    scroll-behavior: smooth;
	--dark: 						#010101;
	--light: 						#fcfde8;
	--darklight: 					#d4c79c;
	--extradarklight: 				#d9d5c0;
	
	--blue: 						#1e2b50;  /* ral 5013 */                
	--green: 						#354a33; /* ral 6020 */
	--purplered:					#841923;
	--red: 						    #ba1c18; /* hell ral 3000 */
    --red3002:                      #b31917; /* dunkel ral 3002 */
	--darkred: 						#912329; /* donation */
	
	--xlgrey: 						#eeeeee;
	--lgrey: 						#dddddd;
	--framegrey: 					#cccccc;
	--mgrey: 						#999999; /* form border */
	--grey: 						#666666;
	--footergrey: 					#555555; 
	--dgrey: 						#333333;
	

	
	
	--inconsolata: 					'inconsolata','courier new', 'MS Courier New', 'courier', monospace;
	--sansita: 						'sansita', 'georgia', 'baskerville', 'times', 'times new roman', serif;
	

	--f-size-xxs: 					13px; /* buttons, flag, langnav */
	--f-size-xs: 					16px;
    --f-size-txt: 					17px;
    --f-size-caption: 				12px;
	--f-size-sm: 					18px;
	--f-size-md: 					24px;
	--f-size-lg: 					36px;
	--f-size-xlg: 					42px;
	--f-size-xxlg: 					64px;

	--f-size-men: 					16px;
}


/* || container width - formally flexbox */

.container { margin: 0 auto; padding: 0;}
.container-fluid { width: 100%; margin: 0; padding: 0;}
.container-fluid .row { margin: 0; padding: 0;}

/* || pagination */











@media only screen and (min-width:768px)  {.container{width:740px;}}





/* 02 SECTION - HELPERS */

.groot {
	background-color: 				#ff9900;
}

.list--unstyled,
.li--unstyled {
	list-style: 					none;
	margin:   						0;
	padding:  						0;
}

.list--small {
    font-size:  					var(--f-size-xs);
}

.text--hide {
    font: 							0/0 a;
    color: 							transparent;
    text-shadow: 					none;
    border: 						0;
}

.hide--xs,
.hide--xs--inline,
.hide--searchhelper {
    display:                        none;
}

.img--resp {
	width: 							100%;
	height: 						auto;
}

.no--pad {
	padding: 						0;
}

.lgrey {
	color: 							var(--lgrey);
}

.mgrey {
	color: 							var(--mgrey);
}

.dgrey {
	color: 							var(--dgrey);
}




/* 03 SECTION -  html & body */

body {
    padding:                		0;
    margin:                		 	0;
    color:                  		var(--dark);
    font-family:            		var(--inconsolata);
	font-weight: 					500;
	font-size:              		var(--f-size-txt);
	line-height: 					1.7;
    background-color:       		var(--light);
	font-synthesis: 				none;
}

a {
    text-decoration: 				underline 1px rgba(39, 48, 85, 1);
    color: 							var(--blue);
    text-underline-offset: 			3px;
    transition: 					color 300ms,
									text-decoration-color 500ms,
									text-underline-offset 500ms;
}

.p--meta a {
	    color: 						var(--blue);
}

.p--meta a:hover {
	    color: 						var(--red3002);
		text-decoration: 			underline 1px var(--red3002);
}



/*  a:hover { */
/*     color: 							var(--dark);*/
/*     text-decoration: 				underline 1px rgba(39, 48, 85, 0);*/
/*  }*/


/* 04 SECTION -  typo */


h1,
h1 a {
	/* text-transform:  				uppercase;*/
	letter-spacing: 				0.1rem;
	line-height: 					1.4;
	color: 							var(--blue);
	font-weight: 					700;
	text-decoration: 				none;
}

.h1--sansita {
	position: 						relative;
	font-family: 					var(--sansita);
	text-transform: 				none;
	line-height: 					1.5;
	margin: 					    2rem 0 2.5rem 0;
	letter-spacing: 				0;
	color: 							var(--dark);
}

.body--mieten .h1--sansita {
    margin: 8rem 0 2.5rem 0;
    letter-spacing: 0;
    color: var(--dark);
}


.h1--nostalgic {
	
}

.h1--sansita::after {
	content: 						"";
	position: 						absolute;
	bottom: 						-1.25rem;
	left: 							0;
	height: 						3px;
	width: 							80px;
	background-color: 				var(--dark);
}

.h1--blue,
.h1--blue a {
	color: 							var(--blue);
}

/* RAL 3002  */
.h1--3002 {color: rgba(162,35,29,1);}
.h1--3002::after { background-color: rgba(162,35,29,1);}

/* RAL 3000 #a02725 */
.h1--3000 {color:  rgba(160,39,37,1);}
.h1--3000::after { background-color: rgba(160,39,37,1);}

/* RAL 3004 #6c1b2a Purpurrot */
.h1--3004 {color:   rgba(108,27,42,1);}
.h1--3004::after { background-color: rgba(108,27,42,1);}

/* RAL 5013 #1e2b50 Kobaldblau */ 
.h1--5013 {color:   rgba(30,43,80,1);}
.h1--5013::after { background-color:  rgba(30,43,80,1);}

/* RAL 5004 #1a1d2a Stahlblau */ 
.h1--5004 {color:   rgba(26,29,49,1);}
.h1--5004::after { background-color: rgba(26,29,49,1);}

/* RAL 6007 #2b3626 Flaschengrün */
.h1--6007 {color:   rgba(43,54,38,1);}
.h1--6007::after { background-color: rgba(43,54,38,1);}

/* RAL 6020 #354a33 Chromoxid */
.h1--6020 {color:   rgba(57,74,51,1);}
.h1--6020::after { background-color: rgba(57,74,51,1);}

/* RAL 8012 #64312a für Güterwagen */
.h1--8012 {color:   rgba(100,49,42,1);}
.h1--8012::after { background-color: rgba(100,49,42,1);}
	

.h1--center {
	text-align: 					center;
	position: 						relative;
	margin-bottom: 					2rem;
}

.h1--center::after {
	content: 						"";
	position: 						absolute;
	bottom: 						-0.75rem;
	left: 							calc(50% - 40px);
	right: 							calc(50% - 40px);
	height: 						3px;
	width: 							80px;
	background-color: 				var(--blue);
	transition: 					width 300ms,
									color 300ms,
									background-color 300ms;
}

.h1--center:has(a) a:hover {
	color: 							var(--darkred);
}

.h1--center:has(a):hover::after {
	background-color: 				var(--darkred);
}

.h1--big {
	padding: 						0 1rem;
	font-size: 						30px;
	line-height: 					1.2;
	margin-bottom: 					3rem;
}

.h1--capitalize {
	text-transform: 				uppercase;
}



.header--singeVehicleOuter .h1--singeVehicle,
.h1--singeVehicle {
	padding: 						0 1rem 0 1rem;
	font-size: 						44px;
	line-height: 					1.2;
	margin-bottom: 					2rem;
	position: 						relative;
}

.header--singeVehicleOuter .h1--singeVehicle span,
.h1--singeVehicle span {
	margin-top: 					0.5rem;
	display: 						block;
	font-size: 						18px;
}

.header--singeVehicleOuter .p--singleVehicle,
.p--singleVehicle {
	padding: 						0 1rem 0 1rem;
	font-size: 						90%;
}

.h1--singeVehicle::after {
	content: 						"";
	position: 						absolute;
	bottom: 						-0.75rem;
	left: 							1rem;
	height: 						3px;
	width: 							80px;
}







.h1--narrow {
	padding:  						0 30% 0 0;
}

.h1--big + h2 {
	margin-top:  					-2rem;
}

.h1--sectiontitle {
	display: 						inline-block;
	padding: 						0.3rem 1rem 0.3rem 3rem;
	margin-left: 					-1rem;
	margin-bottom: 					2rem;
	color: 							var(--dark);
	line-height: 					1.4;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 200 43' style='enable-background:new 0 0 200 43;' xml:space='preserve'%3e%3cg%3e%3cpath d='M200,21.5c0,11.9-9.6,21.5-21.5,21.5H0v-1.9h178.5c10.8,0,19.6-8.8,19.6-19.6s-8.8-19.6-19.6-19.6H0V0l178.5,0 C190.3,0,200,9.6,200,21.5z'/%3e%3c/g%3e%3c/svg%3e "); 
	background-repeat: no-repeat;
	background-position: top right;
	background-size: 170%;
}

.h1--BlogHeader {
	font-size: 						var(--f-size-xxlg);
	color: 							var(--dark);
	line-height: 					1;
	margin: 						0;
}

.h1--BlogEntry {
	font-size: 						var(--f-size-xlg);
	color: 							var(--dark);
	line-height: 					1;
	margin: 						3rem 0 0 0;
}

.h1--BlogEntry.h1--center::after {
	content: 						"";
	position: 						absolute;
	bottom: 						-1rem;
	left: 							calc(50% - 40px);
	right: 							calc(50% - 40px);
	height: 						3px;
	width: 							80px;
	background-color: 				var(--dark);
	transition: 					width 300ms,
									color 300ms,
									background-color 300ms;
}



.light {
	color: 							var(--light);
}


h2,
h2 a {
	margin-top: 					0.25rem;
	text-transform:  				uppercase;
	color: 							var(--blue);
	font-size: 						var(--f-size-sm);
	line-height: 					1.4;
	position: 						relative;
	text-decoration: 				none;
	transition: 					text-decoration-color 500ms,
									text-underline-offset 500ms;
}

h2 a:hover {
	color: 							var(--dark);
}

h2::after {
	content: 						"";
	position: 						absolute;
	bottom: 						-0.8rem;
	left: 							0;
	height: 						3px;
	width: 							80px;
	background-color: 				var(--blue);
	transition: 					width 300ms,
									color 300ms,
									background-color 300ms;
}


h2:has(a):hover::after {
	background-color: 				var(--dark);
	width: 							100px;
}

h2.light::after {
	background-color: 				var(--light);
}

.h1--light,
.h1--light a,
.p--white a,
.p--white,
.p--light a,
.p--light {
	color: 							var(--light);
}

h3 {
	font-size: 						var(--f-size-md);
}

aside h4 {
	font-weight: 					400;
	text-align: 					center;
	text-transform: 				uppercase;
}

aside p {
	font-size: 						85%;
	line-height: 					1.4;
}

aside p:first-of-type {
	text-align: 					center;
}


footer h3 {
	text-transform:  				uppercase;
	color: 							var(--blue);
}

.plaincontent {
	padding: 						0 0.5rem;
}

.plaincontent h3:first-of-type {
	margin-bottom: 					0;
}

.p--center {
	text-align: 					center;	
}

.p--right {
	text-align: 					right;	
}

.p--button {
	padding-top: 					0;
	margin: 						-2rem 0 0 0;
	line-height: 					0;
}

.p--meta {
	font-size: 						var(--f-size-xxs);
	margin: 						0;
}

.p--meta span {
	display: 						inline-block;
}


.header--BlogEntry .p--meta {
	margin-top: 					2rem;
}

.p--meta span::after {
	content: 						" |\00A0";
}


.p--meta span:last-of-type::after {
	content: 						"";
}

.p--blogteaser {
	margin-top: 					0;
	font-size: 						15px;
	line-height: 					1.4;
}

figure {
	padding:  						0;
	margin: 						0;
	line-height: 					0;
}


.figure--rounded,
.figure--caption-left {
	position: 						relative;
}

.figure--rounded img {
	border-radius: 					20px;
}

figure.fig--gallery {
	margin-bottom:    				2rem;
}

figcaption {
	font-size: 						11px;
	text-align: 					right;
	line-height: 					1.4;
	padding-right: 					0.5rem;
}

figcaption h3 {
	margin: 						5px 0 0 0;
	padding: 						0;
	line-height: 					1.4;
	font-weight: 					700;
	font-size: 						14px;
}

.figure--caption-left figcaption {
	position: 						absolute;
	left: 							-35%;
	bottom:  						110px;
	font-size: 						10px;
	transform: 						rotate(-90deg);
	text-align: 					left;
}

.fig--gallery figcaption {
	padding-top: 					0.5rem;
}

.fig--gallery figcaption p {
	display: 						inline;
}


.button,
a.button,
button {
	border: 						1px solid var(--dark);
	color: 							var(--dark);
	cursor: 						pointer;
	display: 						inline-block;
	font-size: 						13px;
	font-weight: 					700;
	letter-spacing: 				.05rem;
	line-height: 					1;
	padding: 						0.5rem 1rem;
	text-align: 					center;
	text-decoration: 				none;
	text-transform: 				uppercase;
	white-space: 					nowrap;
	-webkit-transition: 	 		color 0.6s ease-out,
									border 0.6s ease-out,
									background-color 0.6s ease-out;
	-moz-transition: 		 		color 0.6s ease-out,
									border 0.6s ease-out,
									background-color 0.6s ease-out;
	-o-transition: 			 		color 0.6s ease-out,
									border 0.6s ease-out,
									background-color 0.6s ease-out;
	-ms-transition: 			 	color 0.6s ease-out,
									border 0.6s ease-out,
									background-color 0.6s ease-out;
	transition: 					color 0.6s ease-out,
									border 0.6s ease-out,
									background-color 0.6s ease-out;
    margin-top: 					1rem;
	-webkit-border-radius: 			8px;
	-moz-border-radius: 			8px;
	border-radius: 					8px;
	transition: 					border-color 500ms,
									color 500ms,
									background-color 500ms;
}

.button:hover,
a.button:hover,
button:hover {
	background-color: 				var(--dark);
	color: 							var(--light);
}
	
	
.button.button--light,
button.button--light {
	background-color: 				transparent;
	border: 						1px solid var(--light);
	color: 							var(--light);
}

.button.button--light:hover,
button.button--light:hover {
	background-color: 				var(--light);
	border: 						1px solid var(--light);
	color: 							var(--blue);
}

.button.button--red:hover,
button.button--red:hover {
	background-color: 				var(--darkred);
	border: 						1px solid var(--darkred);
	color: 							var(--light);
}


#search {
    margin-top: 1rem;
}

input, button.search__submit {
    border-radius: 					8px;
    border: 						1px solid var(--dgrey);
    padding:                        0.4rem;
	font-size: 						13px;
	font-family:  					var(--inconsolata);
}

button.search__submit {
    background-color:               var(--blue);
    border: 						1px solid var(--blue);
    color:                          var(--light);
	border-radius: 					8px;
	font-size: 						13px;
	font-weight: 					700;
}


strong {
	font-weight: 					700;
}

em {
	text-transform: 				uppercase;
	letter-spacing: 				0.05em;
}

dt { 
  font-weight: 700; 
  border-bottom: 1px dashed var(--grey);
	padding: 0 0 0.6rem 0;
	margin: 0;
}

dd { 
  	margin-left: 0; 
  	border-bottom: 1px dashed var(--grey);
	padding: 0 0 0.6rem 0;
	margin: 0;
	line-height: 1.2;
}

dl {
	display: grid; 
	grid-template-columns: 1fr 1fr; 
	grid-gap: 1rem; 

	padding: 0 0 0 0;      
 	line-height: 1;
}































/* 05 SECTION -  header */
/* -------------------------------------------------------------- */

.list--contact {
    font-size: var(--f-size-xs);
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style: none;
    justify-content: flex-end;
    margin-top: 0;
}

.list--contact li {
    display: block;
    padding: 0.1rem 0.5rem;
    line-height: 1.1;
}

.list--contact li:first-of-type {
    border-right: 1px solid var(--dark);
}











/* 05 SECTION -  mainnav */


/* nav */
/* @see https://codepen.io/dannievinther/pen/NvZjvz */




header.header--site {
    height: 						80px;
    /* background-color: #fff; */
	position: 						sticky;
	top: 							0;
	background-color:  				var(--light);
	-webkit-transition:  			border 1s ease;
	 -moz-transition:  				border 1s ease;
	 -o-transition:  				border 1s ease;
	 -ms-transition: 				border 1s ease;
	 transition: 					border 0.5s ease,
		 							height 0.5s ease-in-out,
		 							box-shadow 0.5s ease-in-out;
	border-bottom:    				2px solid rgba(48,56,95,0);
	z-index: 						2000;
	padding-top: 					0.5rem;
}

.h1--logo {
    width: 							270px;
	height: 						51px;
    display: 						block;
    margin: 						1rem 0 0 1rem;
    padding: 						0 0 0 0;
	position: 						relative;
}

.logo__icon,
.logo__typo {
	display: 						block;
	position: 						absolute;
	-webkit-transition: 			all 0.5s ease-out;
	-moz-transition: 				all 0.5s ease-out;
	-o-transition: 					all 0.5s ease-out;
	transition: 					all 0.5s ease-out;
}

.logo__icon {
    width: 							190px;
	height: 						51px;
	top: 							-0.75rem;
    margin-left:                    -0.5rem;
}

.logo__typo {
    width: 							190px;
	height: 						33px;
	top: 							-100px;
    margin-left:                    -0.5rem;
}

/* SCROLL events and changes */

header.header--site.scroll {
	height: 						45px;
	border-bottom:    				2px solid rgba(48,56,95,1);
	-webkit-box-shadow: 			0px 9px 15px 1px rgba(0,0,0,0.3); 
	box-shadow: 					0px 9px 15px 1px rgba(0,0,0,0.3);	
}

header.header--site.scroll .logo__icon {
	top: 							-100px;
}

header.header--site.scroll .logo__typo {
	top: 							-0.75rem;
}

header.header--site.scroll .nav--button {
	    top: 						-2.1rem;
}

header.header--site.scroll #nav--content {
      top: 						    2rem;
}

#nav--1 {
    position: 					    absolute;
    left: 						    0;
    top: 							3rem;
    height:  						100px;
    width:  						100%;
    pointer-events: 				none;
  }
      
  #nav--1 * {
    visibility: 					visible;
  }
  
  .nav--button {
    position: 					    absolute;
    right: 						    1rem;
    top: 							-1.75rem;
    display: 						block;
    flex-direction: 				column;
    justify-content: 				center;
    z-index: 						1000;
    -webkit-appearance: 			unset;
    border: 						0;
    background: 					transparent;
    border-radius: 				    0;
    height: 						40px;
    width: 						    35px;
    cursor: 						pointer;
    pointer-events: 				auto;
    margin-left: 					25px;
    touch-action: 				    manipulation;
    -webkit-tap-highlight-color:    rgba(0,0,0,0);
	-webkit-transition: 			all 0.5s ease-out;
	-moz-transition: 				all 0.5s ease-out;
	-o-transition: 					all 0.5s ease-out;
	transition: 					all 0.5s ease-out;
  }
      
  .icon-bar {
    display: 						block;
    width: 						    33px;
    height: 						3px;
    background: 					var(--blue);
    transition: 					.3s;
  }
      
  .icon-bar + .icon-bar {
    margin-top: 					7px;
  }
  
  #nav--1:focus-within .nav--button {
    pointer-events: 				none;
  }
      
  #nav--1:focus-within .icon-bar:nth-of-type(1) {
    transform: 					    translate3d(0,10px,0) rotate(45deg);
  }
      
  #nav--1:focus-within .icon-bar:nth-of-type(2) {
    opacity: 						0;
  }
      
  #nav--1:focus-within .icon-bar:nth-of-type(3) {
    transform: 					    translate3d(0,-10px,0) rotate(-45deg);
  }
  
  #nav--content {
      margin: 					    0;
      padding: 					    20px;
      width: 						100%;
      max-width: 					100%;
      position: 					absolute;
      top: 						    2rem;
      left: 						0;
      height: 					    500px;
      background-color: 			var(--light);
      opacity: 						1;
      pointer-events: 				auto;
      -webkit-tap-highlight-color:	rgba(0,0,0,0);
      transform: 					translateX(-500px);
      transition: 					transform .3s;
      will-change: 					transform;
      z-index: 						1000;
  }
  
  #nav--1:focus-within #nav--content {
    transform: 						none;
  }
  
  .nav--main ul li {
      font-size: 					var(--f-size-txt);
      line-height: 				    1.8;
      padding: 					    0;
      margin-bottom: 				0;
      text-transform:  			    uppercase;
  }
  
  .nav--main a {
      display: 					    inline-block;
      width:                        90%;
      padding: 					    0.5rem 0 0.5rem 0;
      color: 						var(--blue);
      text-decoration: 			    none;
      border-bottom: 				1px solid var(--blue);
      transition:  				    color 0.3s ease,
                                    border 0.3s ease;
      position: relative;
  }

.nav--main a:after {
      content:                      ">";
      position: 					absolute;
      right: 						0;
      font-weight: 					700;
}
  

  



  
  .nav--main .active a:hover {
      font-weight: 					700;
      color: 						var(--blue);
  }
  
  .mainnav > li.mainnav__search {
      padding: 					2em 1em;
  }
  
  /* animated header */


 

/* 05 SECTION -  experience */
/* -------------------------------------------------------------- */
	
.section--experience_outer {
	position: 						relative;
	background-color:  				var(--blue);
	margin-top: 					1rem;
	background: 					var(--blue) url("img/experience-bg-xs-bottom.png") bottom center no-repeat;	
}

.section--experience_outer *  {
	padding: 						0;
}

.section--experience {
	position: 						relative;
	padding: 						0 0 1.5rem 0;

}

.col--experience_picture {
	padding: 						0;
}

.col--experience_text {
	padding: 						1rem;
}

.expBlock--red {
	background-color:  				var(--darkred);
	border-bottom: 					10px solid var(--red);
	position: 						relative;
}

.expBlock--red::after {
		content: 						"";
		position: 						absolute;
		height: 						10px;
		width: 							100%;
		transform: 						rotate(-0.5deg);
		background-color: 				rgba(108,27,42,0.8);
}
	
	
.expBlock--blue {
	background-color:  				var(--blue);
	border-bottom: 					10px solid rgba(21, 32, 62, 1);
	position: 						relative;
}

.expBlock--blue::after {
		content: 						"";
		position: 						absolute;
		height: 						10px;
		width: 							100%;
		transform: 						rotate(-0.5deg);
		background-color: 				rgba(21, 32, 62, 0.8);
}




.experience--block .h1--big {
	padding-left: 					0;
	margin-top: 					3rem;
	margin-bottom: 					2rem;
}

.experience--block .h1--center::after {
    background-color: var(--light);
}

.experience--block p:last-of-type {
	margin-bottom: 					3rem;	
}

.experience--block-01 {
	margin-top: 					2rem;	
}



/* 05 SECTION -  blog */
/* -------------------------------------------------------------- */
	
.section--blog {
	margin-top:  				1rem;
	padding:  					0 0 2rem 0;
}

.section--blog .col-xs {
	padding: 					0;
}

.col--blog_img {
	margin-left:  				-0.5rem;
}

.col--blog_txt {
	padding:  					1rem;
}

.new--blog {
	clear: 						left;
	margin-bottom: 				2rem;
}

.new-blog h2 {
	margin-top: 				0.5rem;
}

.img--blog {
	width: 						40%;
	float: 						left;
	margin-right: 				1rem;
}

.article--blog {
	clear: 						left;
}

.h2--blog {
	margin-bottom: 				2.5rem;
	position: 					relative;
}

.h2--blog::after {
	bottom: 					-0.8rem;
	left: 						calc(40% + 1rem);
}

.p--blogteaser {
	margin-top: 				1rem;
	padding: 					0 1rem;
}

.col-xs.section--button {
	padding-right: 				0.5rem;
}

.section--BlogTeaser.container {
	margin-top: 				3rem;
}

	

/* 05 SECTION -  nostalgic */
/* -------------------------------------------------------------- */
	
.section--nostalgic_outer {
	margin-top: 					1rem;
	padding-top: 					80px;
	padding-bottom: 				30px;
	position: 						relative;
	overflow-x: 					hidden;
	overflow-y:      				visible;
	background: 					url(img/nostalgic-bg-xs-bottom.png) bottom center no-repeat;
}

.section--nostalgic {
	background: 					var(--darklight) url(img/nostalgic-bg-xs-top.png) top center no-repeat;
	margin-top: 					0;
	padding: 	 					1rem 0 1rem 0;
}

.col--nostalgicText {
	padding: 						8rem 1rem 1rem 2rem;
}

.col--nostalgicImage {
	position: 						absolute;
	top: 							0;
	z-index: 						100;
}




/* 05 SECTION -  vehicles */
/* -------------------------------------------------------------- */

.section--vehicles {
	margin-top: 					-0.5rem;
}

.section--vehicles footer {
	margin: 	  					2rem 0 2rem 0;
}

.section--vehicles, 
.row--vehic,
.col--vehicImage {
	padding: 0;
}

.col--vehicImage p {
	font-size: 						15px;
	padding: 						0 1rem;
}

.section--vehicles .h1--med,
.section--vehicles .h1--med a {
	line-height: 1.2; 
	font-size: 28px;  
	text-transform: none;
}

.section--vehicles .h1--med span {
	font-size: 70%;
}


	/* 05.1 PAGE OVERVIEW SECTION */

	.header--vehicles_outer  *  {
		padding: 						0;
	}

	.header--singeVehicleOuter  *  {
		padding: 						0;
	}
	
	.vehiclesListImg,
	.header--vehicles_outer img {
		border-bottom: 					3px solid transparent;
		transition: 					border-color 300ms;
	}
	
	.header--vehicles_outer img:hover {
		border-bottom: 					3px solid rgba(145, 35, 41,1);
	}

	
	/* RAL 3002 #c13524 */
	.vehiclesListImg.vehLiImg-3002:hover {border-bottom:3px solid rgba(162,35,29,1);}

	/* RAL 3000 #a02725 */
	.vehiclesListImg.vehLiImg-3000:hover {border-bottom:3px solid rgba(160,39,37,1);}
	
	/* RAL 3004 #6c1b2a Purpurrot */
	.vehiclesListImg.vehLiImg-3004:hover {border-bottom:3px solid rgba(108,27,42,1);}

	/* RAL 5013 #1e2b50 Kobaldblau */ 
	.vehiclesListImg.vehLiImg-5013:hover {border-bottom:3px solid rgba(30,43,80,1);}

	/* RAL 5004 #1a1d2a Stahlblau */ 
	.vehiclesListImg.vehLiImg-5004:hover {border-bottom:3px solid rgba(26,29,49,1);}

	/* RAL 6007 #2b3626 Flaschengrün */
	.vehiclesListImg.vehLiImg-6007:hover {border-bottom:3px solid rgba(43,54,38,1);}

	/* RAL 6020 #354a33 Chromoxid */
	.vehiclesListImg.vehLiImg-6020:hover {border-bottom:3px solid rgba(57,74,51,1);}

	/* RAL 8012 #64312a für Güterwagen */
	.vehiclesListImg.vehLiImg-8012:hover {border-bottom:3px solid rgba(100,49,42,1);}
	


	.body--fahrzeuge  .col--vehicImage {
		margin-bottom:  				3rem;
	}

	.body--fahrzeuge  .col--vehicImage:last-of-type {
		margin-bottom:  				0;
	}

	.row--vehicles--list img {
		transition: 					transform 300ms;
	}

	.row--vehicles--list img:hover {
		transform:  					scale(102%);
	}

	.header--singeVehicleOuter figcaption,
	.header--vehicles_outer figcaption {
		padding-right: 					0.5rem;
		padding-top: 					0.5rem;
	}

	.section--vehicles .h1--big {
		margin: 						3rem 0;
	}

	.row--vehiclesTeaser p {
		text-align: center;
	}


	/* 05.2 SINGLE PAGE SECTION */

	.header--singeVehicleOuter {
		border-top: 					10px solid var(--darklight);
		position: 						relative;
	}

	.header--singeVehicleOuter.vehLiImg-3002 {border-bottom: 10px solid rgba(162,35,29,1);}
	.header--singeVehicleOuter.vehLiImg-3000 {border-bottom: 10px solid rgba(160,39,37,1);}
	.header--singeVehicleOuter.vehLiImg-3004 {border-bottom: 10px solid rgba(108,27,42,1);}
	.header--singeVehicleOuter.vehLiImg-5013 {border-bottom: 10px solid rgba(30,43,80,1);}
	.header--singeVehicleOuter.vehLiImg-5004 {border-bottom: 10px solid rgba(26,29,49,1);}
	.header--singeVehicleOuter.vehLiImg-6007 {border-bottom: 10px solid rgba(43,54,38,1);}
	.header--singeVehicleOuter.vehLiImg-6020 {border-bottom: 10px solid rgba(57,74,51,1);}
	.header--singeVehicleOuter.vehLiImg-8012 {border-bottom: 10px solid rgba(100,49,42,1);}

	.header--singeVehicleOuter::after {
		content: 						"";
		position: 						absolute;
		height: 						10px;
		width: 							100%;
		transform: 						rotate(-0.5deg);
	}

	.header--singeVehicleOuter.vehLiImg-3002::after {background-color: rgba(162,35,29,0.8);}
	.header--singeVehicleOuter.vehLiImg-3000::after {background-color: rgba(160,39,37,0.8);}
	.header--singeVehicleOuter.vehLiImg-3004::after {background-color: rgba(108,27,42,0.8);}
	.header--singeVehicleOuter.vehLiImg-5013::after {background-color: rgba(30,43,80,0.8);}
	.header--singeVehicleOuter.vehLiImg-5004::after {background-color: rgba(26,29,49,0.8);}
	.header--singeVehicleOuter.vehLiImg-6007::after {background-color: rgba(43,54,38,0.8);}
	.header--singeVehicleOuter.vehLiImg-6020::after {background-color: rgba(57,74,51,0.8);}
	.header--singeVehicleOuter.vehLiImg-8012::after {background-color: rgba(100,49,42,0.8);}


	.section--singleVehicleTecSpecs {
		border-bottom: 					8px solid var(--blue);
		padding-bottom: 				2rem;
	}





















/* 05 SECTION -  donation */
/* -------------------------------------------------------------- */

.section--donation {
	margin-top: 					0;
	padding: 	 					1rem 0 3rem 0;
}

.section--donation_outer {
	background-color: 				var(--darkred);
	margin: 						1rem 0 3rem 0;
	padding: 						0 0 50px 0;
	position: 						relative;
	overflow-x: 					hidden;
	overflow-y:      				visible;
	background: 					var(--darkred) url(img/red-bg-sm-bottom.png) bottom center no-repeat;
	background-size: 				100% 20px;
}

.section--donation {
	padding: 						1rem;
	background: 					var(--darkred) url(img/red-bg-sm-top.png) top center no-repeat;
	margin-top: 					0;
	padding: 	 					3rem 0 1rem 0;
	background-size: 				100% 20px;
}

.row.donation--body {
	padding: 						1rem;
}

.h3--donation {
	text-align:  					right;
	text-transform: 				uppercase;
	background-color: 				var(--red);
	font-size: 						48px;
	margin-right: 					-1.5rem;
	margin-left: 					20%;
	border-top-left-radius: 		40px;
	border-bottom-left-radius: 		40px;
	padding-right: 					2rem;
	width: 							80%;
}


/* 06 SECTION  - blog */
/* -------------------------------------------------------------- */


.section--BlogEntryContent {
	margin-top: 					1rem;
}

.figure--plaincontent {
	margin: 						0.5rem 0 2rem 0;
}

.figure--plaincontent figcaption {
	margin: 						0.5rem 0;
}

.main--BlogEntry,
.main--SimplePage {
	margin-bottom: 					8rem;
}












/* 08 SECTION -  footer */
/* -------------------------------------------------------------- */

footer.footer--body {
	margin-top: 					8rem;
}



footer.footer--body {
	padding-bottom: 				4rem;
}

footer.footer--body .col-xs {
	padding-left:  					1rem;
}


.footer--logo {
	padding-bottom: 				2.5rem;
	position: 						relative;
}

.footer--logo  .h1--logo {
    margin: 						1rem 0 0 0.5rem;
}

.footer--logo::after {
	content: 						"";
	position: 						absolute;
	width: 							90%;
	height: 						20px;
	bottom: 						0;
	background: 					url("img/footer-bg.png") no-repeat 0 0;
	background-size: 				80%;
}

.list--footer a {
	text-decoration: 				none;
    transition: 					color 300ms,
									text-decoration 500ms,
									text-decoration-color 500ms;
}

.list--footer a:hover {
    text-decoration: 				underline;
}

.list--footer + .list--footer {
	margin-top: 					1rem;
}

.row--copy {
	margin-top: 					4rem;
	position: 						relative;
	font-size: 						90%;
}


.row--copy::before {
	content: 						"";
	position: 						absolute;
	width: 							90%;
	height: 						20px;
	top: 							0;
	background: 					url("img/footer-bg.png") no-repeat 0 0;
	background-size: 				80%;
}




.pagination.list--unstyled {margin-top: 3rem; display: flex;flex-direction: row; font-size: var(--f-size-men);}
.pagination li {margin-right: 4px; padding: 5px 8px;}
.pagination li.active {background-color:var(--dark);}
.pagination li a {color: var(--dark);}
.pagination li a::before {content: '';}
.pagination li.active a {color:var(--light); border: none;}
	












/* MEDIA -  768 */
/* -------------------------------------------------------------- */
/* -------------------------------------------------------------- */
/* -------------------------------------------------------------- */
/* -------------------------------------------------------------- */
/* -------------------------------------------------------------- */



@media (min-width: 768px) { 
	
	:root {

	}
	
	.d-xs-block {
		display: 						none;
	}
	
	.d-sm-block {
		display: 						block;
	}
	
    .hide--xs {
        display: 						block;
    }
	
    .hide--xs--inline {
        display: 						inline;
    }

	
	.hide--sm,
	.hide--sm--inline {
		display: 						none;
	}
	
	figcaption {
		padding-left: 					40%;
	}
	
	.fig--gallery 	figcaption {
		padding-left: 					0;
		font-size: 						70%;
		line-height: 					1.5;
	}
	
	/* navigation */
	
	header.header--site {
    	height: 						100px;
	}

	header.header--site.scroll {
		height: 						50px;
	}
	
	header.header--site.scroll #nav--content {
		 top: 						    0.75rem;
	}
		
	.container.header--site {
        width: 							100%;
    }
	
	.h1--logo {
		width: 							210px;
		height: 						63px;
		margin: 						0 0 0 1.5rem;
	}
	
	.logo__icon {
		width: 							210px;
		height: 						57px;
		margin-left: 					-0.5rem;
		top: 							0.25rem;
	}
	
	.logo__typo {
		width: 							210px;
		height: 						36px;
		margin-left: -0.5rem;
	}
	
	header.header--site.scroll .logo__typo {
		top: 							0.25rem;
	}

	.nav--button {
    	top: 							-1.5rem;
	}
	
	#nav--content {
      transform: 						translateX(-900px);
      transition: 						transform .3s;
      will-change: 						transform;
	}
	
	.list--contact {
		font-size: 13px;
	}
	
	
	/* SECTION experience */
	
	.section--experience_outer {
		position: 						relative;
		background-color:  				var(--blue);
		margin-top: 					2.5rem;
		padding-bottom: 				1rem;
		background: 					 url("img/experience-bg-sm-bottom.png") bottom center no-repeat;
		background-size: 				100% 30px;
		position: 						relative;
	}
	
	.section--experience_outer_row  {
		background: 					var(--blue) url("img/experience-bg-sm-top.png") top center no-repeat;
		background-size: 				100% 30px;
	}

	.section--experience {
		position: 						relative;
		padding: 						0 0 2rem 0;
		background: 					transparent none;
		background-size: 				100% 30px;
		overflow: 						visible;
	}
	
	.col--experience_picture {
		position: 						absolute;
		right: 							1rem;
	}

	.col--experience_picture img {
		border-radius: 					32px;
		margin-top: 					-35px;
	}
	
	.img--rounded {
		border-radius: 					32px;		
	}
	
	
	/* SECTION BLOG */
	
	.section--blog {
		margin-top: 					1rem;
	}
	
	.row.article--blog {
		display: grid;
		grid-template-columns: 			repeat(40%,60%);
		grid-template-rows: 			repeat(2, 1fr);
		grid-column-gap: 				0px;
		grid-row-gap: 					1rem;
		margin-bottom: 					2rem;
	}


	.col--blog_img { 
		grid-area: 						1 / 1 / 2 / 2; 
		flex-basis: 					100%;
		width: 							100%;
		max-width: 						100%;
	}
	.col--blog_head { 
		grid-area: 						1 / 2 / 2 / 3; 
		flex-basis: 					100%;
		width: 							100%;
		max-width: 						100%;
	}
	.col--blog_txt { 
		grid-area: 						1 / 2 / 2 / 3; 
		flex-basis: 					100%;
		width: 							100%;
		max-width: 						100%;
	}
	
	.h2--blog {
		margin-bottom: 				2rem;
	}

	
	/* SECTION Nostalgic */
	
	.col--nostalgicText {
		padding: 						2rem 1rem 1rem 2rem;
	}

	.col--nostalgicImage {
		top: 							40px;
	}
	
	.col--nostalgicText .h1--sansita {
		width: 							50%;
	}
	
	.col--nostalgicText p {
		margin-top: 					4rem;
	}
						
	.section--nostalgic_outer {
		margin-top: 					0;
		padding-top: 					80px;
		background: 					transparent url('img/nostalgic-bg-sm-bottom.png') bottom center no-repeat;
		padding: 						80px 0 20px 0; /* show back */
	}
	
	.section--nostalgic_outer > .row {
		background: 					var(--darklight) url('img/nostalgic-bg-sm-top.png') top center no-repeat;
		padding: 						0;
	}

	.section--nostalgic {
		background: 					transparent none;
		margin-top: 					0;
		padding: 	 					0;
	}
	
	
	/* SECTION Vehicles */
	
	.container.section--vehicles {
		width: 							100%;	
	}
	
	.section--vehicles {
		margin-top: 					-1rem;
	}

	/* SECTION Donation */
	
	.container.section--donation {
		width: 							100%;
	}
	
	
	
	
	

}

/* end 768 */




@media (min-width: 992px) {
	
	:root {
	--f-size-xxs: 					14px; /* buttons, flag, langnav */
	--f-size-xs: 					16px;
    --f-size-txt: 					17px;
    --f-size-caption: 				12px;
	--f-size-sm: 					24px;
	--f-size-md: 					28px;
	--f-size-lg: 					36px;
	--f-size-xlg: 					42px;
	--f-size-xxlg: 					64px;

	--f-size-men: 					16px;
	}

	.container {
		width: 						990px;
	}
	
	/* helpers & display */
	
	.hide--sm {
		display: 					block;
	}
	
	.hide--sm--inline {
		display: 					inline;
	}
	
	.hide--md,
	.d-xs-block {
		display: 					none;
	}
	
	.button, a.button, button {
		font-size: 					15px;
		font-weight: 				700;
		letter-spacing: 			.05rem;
		line-height: 				1;
		padding: 					0.6rem 1.2rem;
		margin-top: 				1rem;
		-webkit-border-radius: 		8px;
		-moz-border-radius: 		8px;
		border-radius: 				8px;
	}
	
	/* fonts etcetera */
	
	figcaption {
		font-size: 12px;
		text-align: right;
		line-height: 1.4;
		padding-right: 0.64rem;
	}
	
	.h3--blogCategories {
		margin-top: 				4.6rem;
		margin-bottom: 				1rem;
	}
	
	.p--meta.p--metaBig {
		font-size: 					16px;
	}
	

	

	/* header and navigation */
	
	header.header--site {
		height: 					100px;
    }
	
	header.header--site.scroll {
		height: 					50px;
    }
	
	.h1--logo {
    	width: 						242px;
		height: 					65px;
		margin:  					0 0 0 1.5rem;
	}
	
	.logo__icon {
		width: 						242px;
		height: 					65px;
		margin-left:                 -0.5rem;
	}
	
	#nav--1 {
		position: 					relative;
		top: 						-0.5rem;
		height: 					auto;
		min-height: 				40px;
	}
	
	#nav--content {
		transform: 					translateX(0);
      	transition: 				all .5s ease;
		will-change: 				transform;
		background-color: 			transparent;
		padding:  					0;
		width: 						100%;
		height: 					auto;
		top: 						2rem;
	}
	
	header.header--site.scroll #nav--content {
		top: 						1rem;
    }

	#nav--content ul {
		display: 					flex;
		justify-content: 			end;
		align-items: 				center;
	}
	
	.nav--button {
		display: 					none;
	}
	
	.nav--main a,
    .nav--main .active a {
		border-bottom: 				none;
	}
	
	.nav--main a {
    	width:                      auto;
		padding: 					0 1.5rem;
		text-decoration: 			underline 2px rgba(39, 48, 85, 0);
		text-underline-offset: 		5px;
    	transition: 				text-decoration-color 500ms,
									text-underline-offset 500ms;
	}
	
	.nav--main li.active a {
		text-decoration: 			underline 2px rgba(39, 48, 85, 1);
	}
	

	.nav--main a:hover {
  			color: 						var(--dark);
			text-decoration: 			underline 2px rgba(39, 48, 85, 1);
}

	
	
	
	.nav--main a:after,
  	.nav--main li.active a::after {
    	content:                    "";
	}
	
	/* @see  https://stackoverflow.com/questions/59100312/single-button-to-show-hide-element-with-pure-css */
	
	/* SEARCH */
	
	.mainnav__search  {
	  position: relative;
	  width: 20px;
	  height: 20px;
	  margin-right: 1rem;
	}
	
	.mainnav__search .search {
		opacity: 0; 
		transition:opacity 1s;
		position: absolute;
		top: .1rem;
		left: -240px;
		width: 225px;
		padding-left: 1rem;
	}
	
	.mainnav__search input[type="checkbox"] {
	  position: absolute;
	  top: .1rem;
	  left: 0;
	  width: 0;
	  height: 0;
	}
	
	.mainnav__search .toggle-btn {
	  cursor: pointer;
	  width: 20px;
	  height: 20px;
	  display: inline-block;
		background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 25 25' style='enable-background:new 0 0 25 25;' xml:space='preserve'%3e%3cpath d='M24.8,22.7l-5.5-6c1.1-1.7,1.8-3.7,1.8-5.8c0-5.7-4.6-10.3-10.3-10.3S0.5,5.2,0.5,10.9s4.6,10.3,10.3,10.3 c2.4,0,4.6-0.8,6.4-2.3l5.4,5.8L24.8,22.7z M10.8,18.2c-4,0-7.3-3.3-7.3-7.3s3.3-7.3,7.3-7.3s7.3,3.3,7.3,7.3S14.8,18.2,10.8,18.2z' /%3e%3c/svg%3e ");
		background-size: 100%;
		position: relative;
		top: -20px;
	}
	
	.mainnav__search  input[type="checkbox"]:checked ~ .search {
	  opacity: 1;
	}


	
	
	
	
	
	
	
	
	
	
	
	
	
	/* SECTION experience */
	
	
	.section--experience_outer {
		margin: 						2.5rem 0 4rem 0;
		padding-bottom: 				1rem;
		background: 					url("img/experience-bg-md-bottom-1024x30.png") bottom center no-repeat;
		background-size: 				100% 30px;
		position: 						relative;
	}
	
	.section--experience_outer_row {
		background: 					var(--blue) url("img/experience-bg-md-top-1024x20.png") top center no-repeat;
		background-size: 				100% 20px;
	}
	
	/* SECTION blog */
	
	.row--blog--teaser {
		width: 							90%;
		margin: 						1rem auto 0 auto;
	}
	
	.row--blog--teaser .col-xs,
	.row--BlogTeaser .col-xs {
        margin-bottom: 					2rem;
    }
	
	.article--blog .img--blog {
		margin-right:  					3rem;
	}
	
	.h2--blog::after {
		bottom: 					-0.8rem;
		left: 						calc(35% + 6rem);
	}
	
	.section--BlogTeaser {
		margin-top: 					2rem;
	}
	
	/* SECTION nostalgic */
	
	.section--nostalgic_outer {
		margin-top: 					0;
		padding-top: 					80px;
		background: 					transparent url('img/nostalgic-bg-md-bottom-1024x20.png') bottom center no-repeat;
		background-size: 				100% 20px;
	}
	

	.section--nostalgic_outer > .row {
		background: 				var(--darklight) url('img/nostalgic-bg-md-top-1024x20.png') top center no-repeat;
		background-size: 				100% 20px;
	}
	
	.col--nostalgicText .h1--sansita {
		width: 							100%;
	}
	
	.section--nostalgic_outer .p--button {
		margin-top: 					0;
		margin-bottom: 					1rem;
	}
	
	
	.footer--logo::after,
	.row--copy::before {
		background-size: 50%;
	}
	
	footer.footer--body .col-xs {
		padding-left: 					0.75rem;
	}


	
}
/* end 992 */



@media only screen and (min-width:1150px) {
	
	.container {
		width: 							1140px;
	}
	
	.container.section--vehicles {
		width: 							100%;
	}
	
	.section--vehicles .h1--sectiontitle {
		margin-left: 					-2rem;
	}
	
	/* .col--vehicImage {
		margin-left: 					-1rem;
		margin-right: 					-1rem;
	}
	*/
	
	.figure--SinglePageHeader {
		position: 						relative;
	}
	
	.figure--SinglePageHeader figcaption {
		position: 						absolute;
		bottom: 						-76px;
	}
	
	.header--singeVehicleOuter {
		margin-bottom: 					2rem;
	}
	
/* || pagination */


.pagination.list--unstyled { font-size: 21px;}
	.pagination li {
    margin-right: 4px;
    padding: 7px 18px;
}
	
} 






@media only screen and (min-width:1360px) {
	
	.container {
		width:1340px;
	}
	
	/* SECTION typo and text */
	
	:root {
	--f-size-xxs: 					14px; /* buttons, flag, langnav */
	--f-size-xs: 					16px;
    --f-size-txt: 					17px;
    --f-size-caption: 				12px;
	--f-size-sm: 					28px;
	--f-size-md: 					36px;
	--f-size-lg: 					42px;
	--f-size-xlg: 					48px;
	--f-size-xxlg: 					72px;

	--f-size-men: 					16px;
	}
	
	.button, a.button, button {
        font-size: 					var(--f-size-txt);
        font-weight: 				700;
        letter-spacing: 			.05rem;
        line-height: 				1;
        padding: 					0.6rem 1.4rem;
        margin-top: 				1rem;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
    }
	
	input {
		padding: 					0.6rem 1.4rem;
	}
	
	
	button.search__submit {
		background-color:           var(--blue);
		border: 					1px solid var(--light);
		color:                      var(--light);
		border-radius: 				8px;
		font-size: 					var(--f-size-txt);
		font-weight: 				700;
		padding: 					0.55rem 1.4rem;
	}
	
	.search {
		margin-top: 				1rem;
		background-color: 			var(--light);
		padding-bottom:  			1rem;
		border-radius: 				16px;
	}


	.p--meta {
		font-size: 						16px;
		margin: 0;
	}
	
	.p--blogteaser {
		margin-top: 0;
		font-size: 					var(--f-size-txt);
		line-height: 1.4;
	}
	
	.h1--big {
		padding: 					0 1rem;
		font-size: 					var(--f-size-md);
		line-height: 				1.2;
		margin-bottom: 				3rem;
	}
	
	
	
	h2, h2 a {
		margin-top: 				0.25rem;
		font-size: 					var(--f-size-sm);
		line-height: 				1.4;
	}
	


	/* SECTION HEADER */
	
	header.header--site.scroll {
		height: 					60px;
	}
	
	header.header--site.scroll #nav--content {
        top: 						-0.5rem;
    }
	
	
   	.logo__icon {
        width: 						260px;
        height: 					70px;
        margin-left: -0.5rem;
    }
	
	.logo__typo {
        width: 260px;
        height: 45px;
        margin-left: -0.5rem;
    }
		
	#nav--content {
        top: 							1rem;
    }
	
	.nav--main ul {
		margin-right: 					2rem;
	}
	
	.nav--main ul li {
		font-size: 						21px;
	}
	
	/* SEARCH */
	
	.mainnav__search  {
	  position: relative;
	  width: 24px;
	  height: 24px;
	  margin-right: 1rem;
	}
	
	.mainnav__search .toggle-btn {
	  cursor: pointer;
	  width: 24px;
	  height: 24px;
	  display: inline-block;
		background-size: 100%;
		position: relative;
		top: -24px;
	        left: 25px;

	}
	
	.mainnav__search .search {
		opacity: 0; 
		transition:opacity 1s;
		position: absolute;
		top: .5rem;
		left: -285px;
		width: 315px;
	}
	
	.mainnav__search input[type="checkbox"]:checked ~ .search {
	  	opacity: 1;
	}

	
	
	
	
	
	
		
	
	/* SECTION blog */
	
	.h2--blog::after {
        bottom: 						-0.8rem;
        left: 							calc(35% + 6.5rem);
    }
	
	.h1--BlogEntry {
		margin: 						6rem 0 0 0;
	}

	
	/* SECTION experience */
	
	.section--experience_outer {
		margin-top: 					4rem;
		background: 					var(--blue) url('img/experience-bg-lg-bottom.png') bottom center no-repeat;
		background-size: 				100% 45px;
	}
	
	.section--experience_outer_row {
		background: 					transparent  url("img/experience-bg-lg-top.png") top center no-repeat;
		background-size: 				100% 30px;
	}
	
	
	/* SECTION nostalgic */

	.figure--caption-left figcaption {
		position: absolute;
		left: -39%;
		bottom: 0;
		font-size: 11px;
	}
	
	
	.section--nostalgic_outer {
		margin-top: 					4rem;
		padding: 						0;
		overflow: 						visible;
		background: 					var(--darklight) url('img/nostalgic-bg-lg-bottom.png') bottom center no-repeat;
		background-size: 				100% 20px;
			padding-bottom: 			1rem;
	}
	

	.section--nostalgic_outer > .row {
		background: 					transparent url('img/nostalgic-bg-lg-top.png') top center no-repeat;
		background-size: 				100% 30px;

	}
	
	.col--nostalgicImage {
		position: 						relative;
		top: 							0;
		z-index: 						100;
	}
	
	
	.section--nostalgic_outer .p--button {
        margin-top: 					0;
        margin-bottom: 					3rem;
    }
	
	.col--nostalgicImage img {
		margin-top: 					-2rem;
	}
	
	/* SECTION vehicles */
	
	.container.section--vehicles {
		width: 							100%;
	}

	.section--vehicles .h1--big {
		margin-top: 					5rem;

	}
	
	.section--vehicles .h1--med {
		font-size: 						var(--f-size-sm);
	}
	
	.col--vehicImage p {
		font-size: 						var(--f-size-txt);
		padding: 0 1rem;
	}
	
		/* SECTION Vehicles Page */
	
	.header--singeVehicleOuter {
		margin-bottom:  				6rem;
	}
	
	.figure--SinglePageHeader figcaption {
		padding-right: 					0;
		padding-left: 					15%;
	}
	
	.figure--SinglePageHeader figcaption {
        padding-right: 0;
        padding-left: 0;
		line-height: 1.4;
    }
	
	
	.header--singeVehicleOuter .h1--singeVehicle {
		margin: 						12rem 0 0 2rem;
	}

	.header--singeVehicleOuter .p--singleVehicle {
		margin: 						2rem 4rem 0 2rem;
	}
	
	.section--vehicles {
		margin-top: 2rem;
	}
	
	.row--vehiclesTeaser {
		margin-bottom: 2rem;
	}
	
	/* SECTION donation */
	
	.section--donation .h1--big {
		padding-left: 					0;
	}
	
	.h3--donation {
		margin-top: 					-3rem;
	}
	
	/* SECTION plaincontent */
	
	.maincontent {
		padding: 						0 4rem 0 0.5rem;
	}
	
	/* SECTION Blogentry */
	
	.h1--BlogEntry {
		margin: 						8rem 0 0 0;
	}
	
	.p--meta {
		font-size: 						16px;
		margin: 						0;
	}
	
	
	/* SECTION rent */
	
	.body--mieten .h1--sansita {
		margin: 2rem 0 2.5rem 0;
	}
	
	/* SECTION footer */
	
	footer.footer--body .col-xs {
        padding-left: 					0.75rem;
    }
	
	
	
} /* end 1360 */


@media only screen and (min-width:1440px) {
	
	:root {
		--f-size-txt: 					18px;
		--f-size-lg: 					48px;
	}
	
	.container{
		width: 							1408px;
		margin: 						0 auto;
	}
	
	/* SECTION header */
	
	.header--site .row.between-lg {
		width: 							1408px;
		margin:  						0 auto;
	}
	
    .h1--logo {
        margin: 0 0 0 1rem;
    }
	

	
	/* SECTION experience */
	
	.col--experience_text {
		padding-top: 					3rem;
	}
	
	
	/* SECTION Blog */
	
	.section--blog {

	}
	
	.h1--sectiontitle {
		display: inline-block;
		padding: 0.1rem 1rem 0.1rem 2rem;
		margin-left: -1rem;
		margin-bottom: 2rem;
		margin-top: 				8rem;
		color: var(--dark);
		line-height: 1.4;
		transform: 					rotate(-90deg);
		background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 200 43' style='enable-background:new 0 0 200 43;' xml:space='preserve'%3e%3cg%3e%3cpath d='M0,21.5C0,9.6,9.7,0,21.5,0L200,0v1.9H21.5c-10.8,0-19.6,8.8-19.6,19.6s8.8,19.6,19.6,19.6H200V43H21.5 C9.7,43,0,33.4,0,21.5z'/%3e%3c/g%3e%3c/svg%3e "); 
		background-repeat: no-repeat;
		background-position: top left;
		background-size: 170%;
	}
	
	.section--vehicles .h1--sectiontitle {
		background-size: 100%;
	}
	
	.row--blog--teaser {
		margin-top: 				-7rem;
	}
	
	
	/* SECTION nostalgic */

	.figure--caption-left figcaption {
		position: absolute;
		left: -33%;
		bottom: -50;
		font-size: 11px;
	}
	
	
	/* SECTION vehicles */
	
	.container.section--vehicles {
		width: 							1408px;
		margin: 0 auto;
	}
	
	.section--vehicles .h1--sectiontitle {
        margin-left: 					-8rem;
		padding: 0.1rem 1rem 0.1rem 2rem;
    }
	
	 .section--vehicles .h1--big {
        margin-top: 					-8rem;
    }
	
	.body--fahrzeuge  .section--vehicles .h1--big {
        margin-top: 					3rem;
    }
	
	.body--fahrzeuge  .h1--big {
        font-size: var(--f-size-lg);
	}
	
	.row--vehicles--list {
		margin-top: 					3rem;
	}

	
	.header--vehicles_outer figcaption {
		padding-left: 					55%;
		padding-top: 					0.5rem; 					
	}
	
	.section--singleVehicleGallery .plaincontent h3 {
		margin-bottom: 1rem;
	}
	
	.fig--gallery a {
		display: block;
		min-height: 228px;
	}
	
	
	/* SECTION donation */
	
	.div--xlg-helper {
		width: 							1408px;
		margin: 						0 auto;
	}
	
	/* SECTION blog */
	
	/* area figure grey filter */
	.figure--plaincontent img {
		filter: 						grayscale(100%);
		-webkit-transition: 	 		filter 0.6s ease-out;
		-moz-transition: 		 		filter 0.6s ease-out;
		-o-transition: 			 		filter 0.6s ease-out,
										border 0.6s ease-out;
		-ms-transition: 				filter 0.6s ease-out,
										border 0.6s ease-out;
		transition: 					filter 0.6s ease-out,
										border 0.6s ease-out;
	}

	.figure--plaincontent:hover img {
		filter: 						grayscale(0%);
	}

	




} /* end 1440px */


@media only screen and (min-width:1900px) {

    .header--vehicles_outer {
		margin: 						0 auto;
        max-width:                      1840px;
}
    
} /* end 1900px */