@charset "UTF-8";
/* CSS Document */

img {			display: block;}
video {			display: block;}
html, 
html * {		padding: 0px;
				padding-top: 0px;
				margin: 0px;
				margin-top: 0px;
				box-sizing: border-box; }

body {			font-size: 100%;
				background-color: var(--background_color);
				font-family: 'Raleway'; 
    			font-weight: 300;
				letter-spacing: 0.05em;
				margin: 0px;
				padding: 0px;

				font-size: 1em;
				line-height: 150%;
	
				-webkit-text-size-adjust: none;}

a {				-webkit-tap-highlight-color:transparent; 
				text-decoration: underline; color: var(--first_color); font-weight: 400;}


.clearing {clear: both; }


:root 	{

--background_color: #FEFEFE;
--background_gray: #F5F5F5;

--first_color: #301600;
--first_color_hover: #542705;
--second_color: #978669;
--f_color: #FFFFFF;
	
/*font-color*/

--first_font_color: #301700;
--second_font_color: #FFFFFF;

/*Verlauf*/	
--rgb_00: rgba(48,23,0,0);	
--rgb_01: rgba(48,23,0,0.35);
--rgb_02: rgba(48,23,0,0.50);
--rgb_03: rgba(48,23,0,0.65);
--rgb_04: rgba(48,23,0,0.90);
--rgb_05: rgba(48,23,0,0.1);	
}



h1 {font-size: 2.6em; line-height: 110%; margin-bottom: 3px; margin-top: 20px;/*font-style: italic;*/ text-transform: uppercase;}
.artikel_header_h1_small h1 {font-size: 2.4em; line-height: 110%; margin-bottom: 3px; margin-top: 20px;/*font-style: italic;*/ text-transform: uppercase;}
/*h2 {font-size: 1.6em; line-height: 120%; margin-bottom: 20px; margin-top: 20px; /*font-style: italic; text-transform: uppercase; }*/
h2 {font-size: 2.8em; line-height: 100%; margin-bottom: 30px; margin-top: 60px; font-family: 'Dancing Script'; text-transform: none; transform: rotate(-2deg);}
h3 {font-size: 1.3em; line-height: 120%;  /*font-style: italic;*/ letter-spacing: 0.05em; font-weight: 500;}
h4 {font-size: 1.3em; line-height: 140%; margin-bottom: 20px; text-transform: uppercase;/*font-style: italic;*/}
.swap_h h4 {text-transform: none;}
.h_second {font-weight: 500; font-size: 1.3em; text-transform: uppercase; line-height: 130%; margin-top: 0px;}
.artikel_h2_zweispaltig h2 {	margin-top: 0px; }	

p {padding-bottom: 20px;}
.bold {font-weight: 600;}

/*Buttons*/

.button_barriere { padding: 10px 24px 10px 24px; color: var(--f_color); text-decoration: none; background-color: var(--first_color); border-radius: 100px; border: 2px solid var(--first_color); font-size: 1em; transition-duration: 0.5s;  }
.button_barriere_second { padding: 10px 24px 10px 24px; color: var(--first_color); text-decoration: none; border-radius: 100px; border: 2px solid var(--first_color); font-weight: 400; font-size: 1em; transition-duration: 0.5s; }
.button_barriere_text { padding: 10px 20px 10px 24px; color: var(--first_color); text-decoration: underline; font-weight: 500; }

.button_barriere:hover {background-color: var(--first_color_hover); border-color: var(--first_color_hover);}
.button_barriere_second:hover { color: var(--second_font_color); background-color: var(--first_color); }
.button_shadow {box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);} 

/* Mobil Format */



.main_wrapper {				width: 100%; background-color: var(--background_color); margin-top: 0px; margin-left: auto; margin-right: auto; padding: 0px; position: relative;}

.header_frame {				background-color: var(--background_color); 
							color: var(--first_font_color); font-family: 'Poppins'; }

#nav_frame	{				overflow: hidden; transition-duration: 0.5s; width: 100%;}


.first_menue_frame {		background-color: var(--background_color); 
							color: var(--first_font_color);}

.second_menue_frame {		background-color: var(--background_color); 
							color: var(--first_font_color);}

.tworows_frame {			background-color: var(--background_gray); 
							color: var(--first_font_color);}

.background_frame {			background-color: var(--background_color); 
							color: var(--first_font_color);
							background-size: cover; background-position: center;}

.expertise_frame {			background-image: url("pictures/background/meincafe_tasse.jpg"); }

.kaffee_frame {				background-image: url("pictures/background/meincafe_kaffee.jpg"); }


.artikel_frame {			background-color: var(--background_color); 
							color: var(--first_font_color);}

.swap_frame {				background-color: var(--background_color); 
							color: var(--first_font_color);
							}

.highlight_artikel_frame {	background-color: var(--first_color); 
							color: var(--second_font_color);}

.footer_frame {				background-color: var(--first_font_color); 
							color: var(--second_font_color);
							border-top: 30px solid var(--f_color)}


.min_high {					min-height: 100px;}

.main_width {				width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto;}
.main_padding {				padding-left: 40px; padding-right: 40px;}
.main_padding_header {		padding-left: 20px; padding-right: 20px;}

#newsFrame {
	max-width: 260px;
	right: 20px;
	top: 100px; 
	position: absolute; 
	border-radius: 10px; 
	box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.4); 
	color: #FFF; 
	max-height: 600px; 
	backdrop-filter: blur(8px); 
	overflow: hidden; 
	visibility: visible;}

#newsFrameClose {
	width: 100%; 
	text-align: right; 
	padding: 30px 36px 0px 36px;}

#newsFrameText {
	padding: 20px 30px 20px 30px; 
	width: 100%; 
	font-weight: 400;}

#newsBackgroundPicture { width: 100%; padding-bottom: 40px;}

@media (min-width: 750px)

{
h1 {							font-size: 5em; line-height: 100%; margin-bottom: 3px; margin-top: 50px; /*font-style: italic;*/}
/*h2 {							font-size: 1.8em; line-height: 120%; margin-bottom: 30px; margin-top: 50px; /*font-style: italic; }*/
h3 {							font-size: 1.2em; line-height: 120%;  /*font-style: italic;*/}
h4 {							font-size: 1.2em; line-height: 140%;  /*font-style: italic;*/}
	
.h_second {						font-weight: 500; font-size: 1.3em; text-transform: uppercase; line-height: 130%; margin-top: 0px;}
.artikel_h2_zweispaltig h2 {	margin-top: 0px;}	


	
}

@media (min-width: 950px)
	
{.main_padding {			padding-left: 80px; padding-right: 80px;}
.main_padding_header {		padding-left: 80px; padding-right: 80px;}
h2 {							font-size: 3.2em; line-height: 120%; margin-bottom: 30px; margin-top: 60px; }
h3 {						font-size: 1.5em; line-height: 120%;  /*font-style: italic;*/}

}