/*########################################################################################
 Simple Web Template, (c) 2025 webapps@cjpj, P. Janko
 MIT License: https://www.cjpj.de/contact.htm#terms
 https://github.com/cjpjwa/simple-web-template
########################################################################################*/

/* ########## basic page settings - big screen size ##########  */
body				{padding:0px; margin:0px; background:#ffffff; color:#281e43; font-family:system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-text-size-adjust: none;}

header					{position:fixed; top:0px; left:0px; padding:0px; margin:0px; background:#decce3; height:90px; width:100%; border-top:10px solid #bb97bf; border-bottom:1px solid #decce3; z-index:500}
header div.head			{padding:0px; margin:0px auto; width:1200px;}
header div.logo			{padding:0px; margin:0px 5px 0px 40px; float:left;}
header div.logo a			{padding:0px; margin:0px; text-decoration:none; border:none; float:left;}
header div.logo img			{padding:0px; margin:8px 10px 0px 0px; display:inline-block; width:80px; height:auto; aspect-ratio:80/70;}
header div.logo span.lmain	{padding:0px; margin:22px 0px 0px 0px; display:inline-block; font-size:38px; font-weight:bold; line-height:20px}
header div.logo span.lsub	{margin:-5px 0px 0px 8px;padding:0px;font-size:18px; font-weight:600; white-space:nowrap;}
header div#mobile			{display:none;}

header nav#navi				{padding:0px; margin:0px 40px 0px 0px; color:#281e43; float:right;}
header nav#navi a			{display:inline-block; padding:0px; margin:32px 3px 0px 3px; font-size:18px; font-weight:400; color:#281e43; text-decoration:none}
header nav#navi a.active	{color:#281e43; font-weight:bold}
header nav#navi a:hover		{color:#281e43; text-decoration:underline}

main			{padding:120px 0px 0px 0px; margin:0px auto; width:1200px; border-left:1px solid #decce3; z-index:300}
main h1			{padding:10px 0px 10px 40px; margin:0px; font-size:32px; font-weight:bold;}
main h2			{padding:15px 10px 20px 40px; margin:0px; font-size:30px; font-weight:500;}
main h3			{padding:10px 10px 0px 40px; margin:0px; font-size:24px; font-weight:bold;}
main p			{padding:10px 40px 4px 40px; margin:0px; font-size:18px; font-weight:normal; line-height:26px}
main p.intro	{padding:10px 0px 4px 40px;}
main ul			{padding:10px 40px 5px 40px; margin:0px 0px 0px 0px;}
main li			{padding:0px; margin:8px 0px 0px 30px; font-size:18px; color:#281e43; font-weight:normal}
main hr			{padding:0px; margin:10px 20px 0px 40px; border:none; border-top:1px solid #decce3}
main br.clearfl		{clear:both}
main .hyph			{hyphens:auto;}
main #foto			{float:right; margin:88px 40px 40px 0px; width:480px; height:auto; aspect-ratio:480/400; background:#eeeeee; border:1px solid #666699; box-shadow:0 2px 5px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}

main a			{color:#666699; text-decoration:underline}
main a:hover		{color:#281e43; text-decoration:underline}
main a:active 		{color:#281e43; text-decoration:underline}
main a[target='_blank'] 	{background-position:center right; background-repeat:no-repeat; padding-right:15px; background-image:url(../images/extlink2.png)}

main .col0			{box-sizing:border-box; padding:0px; margin:0px; width:100%; float:left; border:0px solid blue}
main .col1			{box-sizing:border-box; padding:0px; margin:0px; width:56%; float:left; border:0px solid lime}
main .col2			{box-sizing:border-box; padding:0px; margin:0px; width:44%; float:left; border:0px solid red}

footer 				{padding:0px 0px 0px 0px; margin:0px; border-top:1px solid #decce3;}
footer div			{padding:0px 0px 0px 0px; margin:0px auto; width: 1200px;}
footer p			{padding:15px 40px 10px 40px;  margin:0px; font-size:18px}
footer p.version		{float:left; padding-right:10px;}
footer p.legal			{float:right}
footer a				{color:#666699; text-decoration:none; white-space:nowrap;}
footer a:hover			{color:#281e43; text-decoration:underline}
footer a:active 		{color:#281e43; text-decoration:underline}

noscript			{display:none}

/* laptop size */
@media (max-width: 1200px) {
	header div.head		{width: 100%;}
	main				{width: 100%; border:none}
	main #foto			{width: 395px; margin:158px 40px 40px 0px;}
	footer div			{width: 100%;}
}

/* tablet size */
@media (max-width: 1020px) {
	header				{height:80px;}
	header div.logo			{margin:2px 0px 0px 35px;}
	header div.logo img		{margin:8px 5px 0px 0px; width:70px;}
	header div.logo span.lmain		{margin:16px 0px 5px 0px; font-size:30px; font-weight:700;}
	header div.logo span.lsub		{margin: 0px 0px 0px 0px; font-size:15px; font-weight:normal;}
	header nav#navi a			{margin:32px 0px 0px 0px; font-size:15px;}
	main .col0			{width:100%;}
	main .col1			{width:100%;}
	main .col2			{width:100%;}
	main #foto			{float:left; margin:0px 0px 40px 40px; width:480px}
}

/* smart phone size */
@media (max-width: 800px) {
	header				{height:70px;}
	header div.logo			{margin:0px 0px 0px 20px; float:none;}
	header div.logo img		{margin:8px 4px 0px 0px; width:60px;}
	header div.logo span.lmain		{margin:16px 0px 0px 0px; font-size:28px; line-height:20px}
	header div.logo span.lsub		{margin:-3px 0px 0px 3px;font-size:14px; font-weight:normal}
	header div#mobile			{display:inline-block; position:absolute; right:15px; top:22px; padding:0px; margin:0px; font-size:46px; line-height:24px; font-weight:normal; color:#281e43; cursor:pointer;}

	header nav#navi			{margin:-500px 0px 0px 0px; background:#decce3; float:none}
	header nav#navi span	{display:none}
	header nav#navi a		{display:block; padding:10px 10px 10px 20px; margin:0px; font-size:16px; font-weight:normal; color:#281e43; border-bottom: 1px solid #bb97bf; text-decoration:none}

	main			{padding:90px 0px 0px 0px; width: 100%; border: none}
	main h1			{padding:15px 5px 10px 20px; font-size:26px;}
	main h2			{padding:10px 5px 10px 20px; font-size:24px}
	main h3			{padding:10px 5px 0px 20px; font-size:22px}
	main p			{padding:10px 20px 5px 20px; font-size:18px; line-height:26px}
	main p.intro	{padding:10px 20px 5px 20px;}
	main ul			{padding:10px 20px 10px 20px;}
	main li			{margin:2px 0px 0px 20px; font-size:18px; line-height:26px}
	main hr			{margin:10px 20px 0px 20px;}
	main #foto			{margin: 0px 0px 40px 20px; width:315px;}

	footer div			{width: 100%;}
	footer p			{padding:10px 10px 0px 10px; margin:0px; font-size:18px}
	footer p.version		{float:none; text-align:center; display:block}
	footer p.legal			{float:none; text-align:center; display:block; margin-bottom:20px}

	noscript			{position:fixed; top:70px; left:0px; padding:8px; margin:0px; display:inline-block; text-align:center; border:1px solid #666666; background:#eeeeee; z-index: 600}
	noscript a			{display:inline-block; padding:0px; margin:0px; font-size:13px; font-weight:bold; color:#333333; border:none; text-decoration:none}
}

/* small size */
@media (max-width: 350px) {
	header div.logo span.lmain		{font-size:24px;}
	header div.logo span.lsub		{font-size:12px;}
	header div#mobile			{font-size:36px; right:10px}
	main #foto			{margin:0px 0px 40px 20px; width:280px;}
}

/* print view */
@media print {
	header				{position:absolute; background:none;}
	header nav#navi		{display:none;}
	header div#mobile	{display:none;}
	noscript			{display:none}
}