/* ------------------------------------------------------------------------------ */
/* ****************************************************************************** */
/* --------- (C) Copyright 2022/2023 by machtWeb | Reinhard Lange --------------- */
/* ---------------------- machtWeb.de | imail@machtWeb.de ----------------------- */
/* ------------------------------------------------------------------------------ */
/* update	->													  6.00/00 - 14-09-22
/* layout	-> startpage														  */
/* file 	-> design/design.css												  */
/* colors	-> http://www.color-hex.com											  */
/* ------------------------------------------------------------------------------ */
/* -------------------------------------------------------------- 6.00/00 - 14-09-22
/* ROOT																			  */
/* ------------------------------------------------------------------------------ */
@charset 'UTF-8';
/* link		-> https://fonts.google.com/ */
/*			-> https://google-webfonts-helper.herokuapp.com/fonts */
/* files	-> design/fonts/... */
/* DEFAUL FONT */
@font-face {
	font-family:'Montserrat';
	src:url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype'),
		url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype'),
		url('fonts/Montserrat-Light.ttf') format('truetype');
	font-display:swap;
	}
/* FALL BACK FONT */
@font-face {
	font-family:'OpenSans';
	src:url('fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype'),
		url('fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf') format('truetype'),
		url('fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
	font-display:swap;
	}
/* ------------------------------------------------------------------------------ */
/* COLORS - CUSTOMER */
/* main -> orange #ee741d - rgba(238,116,29,1) */
:root {
	/* FONTS */
	--font-4all:	'Montserrat';
	--font-4fallb: 	'OpenSans';
	--font-weight:	400;

	--color-logo:#ee741d;
	/* background body */
	--bgr-body: #fff;

/* grid-area */
	--grid-area-gap: 1rem;          /* gap - between all articles - def 1rem | check used shadow */
	--grid-area-mar: 1% 2%;          /* margin - check card-border-radius - def 1% 2% */
	--grid-area-pad: 1rem;          /* padding - check card-border-radius - def 1rem | min .3rem */

/* box-shadow */
/* link	-> https://getcssscan.com/css-box-shadow-examples */
	--box-shw-b2top:rgb(0,0,0,0.19) 0 10px 20px,rgb(0,0,0,0.23) 0 6px 6px;

/* progress-bar */
	--prog-bar-bgr: rgb(2, 136, 209,.9);
	--prog-bar-hgt: .4rem;				/* height def .4rem */
	--scroll-progress:0%;				/* for progress-bar -> LIGHT 1 -> see JS also */

/* back2top */
	--b2top-col:  rgb(255,255,255,1);
	--b2top-bgr:  rgb(2, 136, 209,.9);
	--b2top-bdrc: rgb(2, 136, 209,1);	/* dark border */
	--b2top-bgrh: rgb(1,87,155,.9);   /* dark when hover */
	--b2top-show: 8rem;					/* def 8rem 	-> control when the button appear */
	--b2top-pos: 2.2rem;				/* def 2.2rem 	-> right AND bottom */
	--b2top-size: 3.2rem;				/* def 3.2rem */
	--b2top-bdr: 50%;					/* def 50% OR 4px if sqare ;

/* viewport only */
	--view-col: #fff;
	--view-bgr: rgba(255,255,255,.8);	/* white */
	--view-320: rgba(44,62,80,.8); 	/* darkgray */
	--view-480:	rgba(231,76,60,.8); 	/* red */
	--view-768: rgba(245,171,53,.8); 	/* orange */
	--view-1280:rgba(0,177,106,.8); 	/* green */	
	--view-1920:rgba(52,152,219,.8); 	/* blue */
	}
/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 01-07-22 */
::selection				{color:white;background:var(--color-logo,#ee741d);} 
::-moz-selection		{color:white;background:var(--color-logo,#ee741d);}
/* ------------------------------------------------------------------------------ */
/* RESETS */
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after	{content:'';display:table;}
.clearfix:after						{clear:both;}
*, *:before, *:after 				{box-sizing:inherit;}
/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 01-07-22 */
/* HTML / BODY */
html {
	/*box-sizing:border-box;*/
	/*font-size: 100%;*/
	block-size:100%;
	overflow-y:scroll;
	-webkit-overflow-scrolling:touch;
	text-rendering:optimizeSpeed;
	-webkit-text-size-adjust:100%;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	scroll-behavior:smooth;
	}

/* link		-> https://codepen.io/jenning/pen/mdRNjZq */
/* info		-> responsive typography */
/* update	-> 06-05-2021 */
body {
	display:grid;grid-template-columns:1fr 0; /* important for back2top */
	margin:0;
	line-height:1.4;	
	font-family:var(--font-4all),var(--font-4fallb),'Segoe UI',Roboto,Helvetica,Arial,-apple-system,BlinkMacSystemFont,sans-serif;
	font-weight:var(--font-weight);
	/*font-size: 1.2rem;*/
	/*background:var(--bgr-body,#fff);*/
	}

/* ------------------------------------------------------------------------------ */
/* CONTENT-WRAPPER */
/*
.content-wrapper {
	position:absolute;
	top:0;
	left:0;
	height:100vh;
	width:95vw;
	margin:1rem;
	padding:1rem;
	border: 0px dashed red;
	z-index:0;
    counter-reset:Element;
	}
*/

a 				{text-decoration:none;border:none;color:#fff;}
hr 				{margin:.4rem 0;border:solid #fff;border-width: 0 0 1px 0;}
	
p.txt-center	{text-align:center;}
p.txt-right		{text-align:right;}
p.txt-left		{text-align:left;}

.no-wrap 		{white-space:nowrap;}

.centered  		{display:flex;justify-content:center;align-items:center;}

picture			{margin:0;padding:0;border:0;}
address			{font-style:normal;} /* instead of italic */

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 14-09-22 */
/* PROGRESS-BAR LIGHT 1 */
/* link		-> https://codepen.io/maddesigns/pen/VMQWGy */
/* update	-> 13-05-2020 */
/* info		-> jQuery must NOT be activated BUT standard.js */
:root {--scroll-progress:0%;}
.progress-bar {
	position:fixed;
	top:0;
	right:0;
	left:0;
	height:var(--prog-bar-hgt);
	background-image:linear-gradient(to right, var(--prog-bar-bgr) var(--scroll-progress), rgb(255,255,255,0) 0);
	z-index:9999;
	}
  .scroll-section {height: 300px;}

/* --- OR --- */

/* PROGRESS-BAR TOP - LIGHT */
/* link		-> https://codepen.io/abusedmedia/pen/NXZdgq */
/* update	-> 25-01-2018 */
/* info		-> jQuery must be activated AND standard.js */
/*
.progress-bar {
	position:fixed;
	top:0;
	left:0;
	height:var(--prog-bar-hgt);
	background:var(--prog-bar-bgr);
	z-index: 9999;
	}
*/

/* --- OR --- */

/* PROGRESS-BAR TOP - STANDARD */
/* link		-> https://codepen.io/simoberny/pen/yboQmo */
/* update	-> 05-05-2017 */
/* info		-> jQuery must be activated AND standard.js */
/*
.progress-bar {
	position:fixed;
	top:0;
	width:100%;
	height:var(--prog-bar-hgt);
	}
.progress-bar .swing-bar {
	width:0;
	height:100%;
	background:var(--prog-bar-bgr);
	transition:width 1s;
	}
*/

/* --- OR --- */

/* PROGRESS-BAR TOP AND CIRCLE BOTTOM - EXTRA */
/* link		-> https://codepen.io/ayoungh/pen/XWPrYX */
/* update	-> 04-09-2014 */
/* info		-> jQuery must be activated AND standard.js */
/*
.progress-bar {
	position:fixed;
	top:0;
	left:0;
	height:var(--prog-bar-hgt);
	background:var(--prog-bar-bgr);
	}
.progress-circle {
	position: fixed;
	right:calc(var(--b2top-pos) - 1rem);
	bottom:calc(var(--b2top-pos) - 1rem);
	width:100px;
	height:100px;
	border-radius:var(--b2top-bdr);
	z-index:9999;
	}
.progress-count {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	text-align:center;
	font-weight:lighter;
	line-height:100px;
	color:var(--prog-bar-bgr);
	}
svg 	{position:absolute;}
circle 	{fill: rgba(255,255,255,0.9);}
svg .animated-circle {
	fill:transparent;
	stroke-width:40px;
	stroke:var(--prog-bar-bgr);
	stroke-dasharray:126;
	stroke-dashoffset:126;box-shadow:var(--box-shw-b2top);
	}
*/	


/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 13-09-22 */
/* back2top - button without javascript - unse in index.php */
/* link	-> https://codepen.io/maddesigns/pen/dymVqar */
/* 28-07-2022 */
.back2top {
	position:sticky;
	right:var(--b2top-pos);
	bottom:var(--b2top-pos);      
	place-self:end;
	width:var(--b2top-size);
	margin-top:calc(100vh + var(--b2top-show));
	aspect-ratio:1;
	border:1px solid var(--b2top-bdrc);
	border-radius:var(--b2top-bdr);
	box-shadow:var(--box-shw-b2top);
	font-size:0;
	background:var(--b2top-bgr);
  	}
/* arrow to top */
.back2top:before {
	content:'';
	position:absolute;
	border-top:4px solid var(--b2top-col);
	border-right:4px solid var(--b2top-col);
	inset:30%;
	transform:translateY(20%) rotate(-45deg);
  	}
.back2top:hover {
	background:var(--b2top-bgrh);
	}



/* ------------------------------------------------------------------------------ */
/* FOOTER */
	
/* ------------------------------------------------------------------------------ */
/* END */	
/* ------------------------------------------------------------------------------ */