/* Fonts */
		@font-face {
    font-family: 'personal_servicesregular';
    src: url('personal_services-webfont.woff2') format('woff2'),
         url('personal_services-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* Allgemeines */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color:#000000; 
            color:#ffffff;
			background-image:url('../bilder/theme/head_person3.png'), url('../bilder/theme/head_city_bg2.jpg');
			background-position: right top, left top;
			background-repeat: no-repeat, repeat;
			background-attachment: scroll, fixed;
			background-size:initial, cover;
        }
		
		a {color:#ff0000; text-decoration: none;}
		
        .container {
            background-image:url('../bilder/theme/border_top_bak1200.png');
			background-repeat: no-repeat;
			background-position: center top;
			background-size: 110%;
			width: 90%;
            max-width: 1200px; overflow:hidden;
            margin: 0 auto;
            padding: 0px;
            background-color:transparent;
            */box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
            border-radius: 3px;margin-bottom:60px;
        }
        header {
            background-color:transparent;
            padding: 20px;
            text-align: center;
            border-radius: 3px 3px 0 0;
            margin-bottom: 20px;
			height: 200px;
        }
        header h1 {
            margin: 0;
            color:#ffffff;
        }
  
		.main-content {
			display: flex;
			flex-wrap: wrap; vertical-align: text-top;.
		}

/* Panels */
		.panel {
			display: none;
			flex: 2;
			gap: 20px;
			min-width: 300px; 
		}

		.panel.active {
			display: flex; top:0px; vertical-align: text-top;.
			gap: 20px;border-radius: 8px;
			flex-direction: align; 
		}

/* Blog-Posts */

        .blog-posts {
			flex: 1; vertical-align: text-top;.
			display: flex;
			justify-content: center;
			align-items: center;border-radius:8px;flex-direction: column;
        }
        .blog-post {
            background-color:#0a0c16;
            margin-bottom: 20px; padding-bottom: 15px;
            border-radius: 8px;
			box-shadow: 4px 3px 0px -1px rgba(136,6,5,0.6);
			-webkit-box-shadow: 4px 3px 0px -1px rgba(136,6,5,0.6);
			-moz-box-shadow: 4px 3px 0px -1px rgba(136,6,5,0.6);border: 2px solid #880605;
        }
		
		.blog-post p,.blog-post-greeting p {
            margin-left: 10px;margin-right: 10px;
        }
		
		 .blog-post-greeting {
            background-color:#880605;
            margin-bottom: 20px;
            border-radius: 8px;
			box-shadow: 4px 3px 0px -1px rgba(136,6,5,0.6);
			-webkit-box-shadow: 4px 3px 0px -1px rgba(136,6,5,0.6);
			-moz-box-shadow: 4px 3px 0px -1px rgba(136,6,5,0.6);border: 2px solid #880605;
        }
		
        .blog-post h2 {
			background-color: #880605;
            margin: 0; padding: 0;
            color:#ffffff; height: 45px;
			font-size: 2em;
			font-family: 'personal_servicesregular';
			text-shadow: rgba(136,6,5,0.6) 0px 0px 16px;
        }

		.blog-post-greeting h2 {
			background-color: #880605;
            margin: 0; padding: 0;
            color:#ffffff; height: 45px;
			font-size: 2em;
			font-family: 'personal_servicesregular';
			text-shadow: rgba(136,6,5,0.6) 0px 0px 16px;
        }
		
		.blog-title {}
		
        .blog-post img {
            float: left; height: auto;
            border-radius: 4px;
            margin-right: 5px; padding:5px; 
        }
		
		.blog-post-date {
			float: right;width: 150px; height: 45px; background-color: #0a0c16;
			color: #fff;font-family: 'personal_servicesregular'; align-items: center;display: flex;justify-content: center;
			transform: rotate(10deg);
			transform-origin: center;
			box-shadow: 4px 4px 0px 0px rgba(255, 255, 255, 1);
			border-radius: 4px; border:#fff 3px solid; 
		}
		
		/* Sidebar */

        .sidebar {flex-direction: column;
            display: flex; float: right;
			max-width:300px; margin-left:20px;
            background-color:#0a0c16;
            padding: 15px; margin-right:15px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); margin-bottom:60px;
        }
        .sidebar h3 {
            color:#fff;font-family: 'personal_servicesregular'; font-size: 1.5em;
            margin: 0; text-align: center;
        }
        .sidebar ul {
            list-style: none;
            padding: 0;bottom:10px;
        }
        .sidebar li {
            margin-bottom: 1px;
        }
        .sidebar a {
            text-decoration: none;
            color:#fff;
            transition: color 0.3s ease;
        }
        .sidebar a:hover {
            color:#ff0000;
        }

		
		
        footer {
            text-align: center;
            margin-top: 30px; left: 0px; bottom: 0px;right: 0px;
            padding: 5px;
            background-color:#000000;
            border-radius: 0 0 2px 2px;
            color:#c0c0c0; position:fixed;
        }
		
/*Navigation*/		
     		
	.topnav {
		overflow: hidden;
		background-color: transparent;
		margin-bottom:15px; align: center;
		}

	.topnav a {
		float: left;
		display: block;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
		font-size: 17px; font-weight: bold; color: white;
		}

	.active {
		background-color: transparent;
		color: white;
		}

	.topnav .icon {
		display: none;
		}

	.dropdown {
		float: left;
		overflow: hidden;
		}

	.dropdown .dropbtn {
		font-size: 17px;    
		border: none;
		outline: none;
		color: white;
		padding: 14px 16px;
		background-color: inherit;
		font-family: inherit;
		margin: 0;
		}

	.dropdown-content {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 160px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
		}

	.dropdown-content a {
		float: none;
		color: black;
		padding: 12px 16px;
		text-decoration: none;
		display: block;
		text-align: left;
		}

	.topnav a:hover, .dropdown:hover .dropbtn {
		color: white; border-bottom: 2px solid;
		}

	.dropdown-content a:hover {
		background-color: #ddd;
		color: black;
		}

	.dropdown:hover .dropdown-content {
		display: block;
		}
		
		/* Kalender */
	.main {
		width:100%; height: 250px;
		border-radius: 5px;
		}

	.month {
		font-weight:bold;
		color:white;border-radius: 8px;
		}

	.daysofweek {
		background-color: #880605;
		font-weight:bold;
		color:white;border-radius: 8px;
		}

	.days {
		color:#fff;
		background-color: transparent;
		padding: 2px;border-radius: 8px;
	    }

	.days #today{
		font-weight: bold;
		color: red;border-radius: 8px;        
		}


/* Responsive Design */
	@media screen and (max-width: 600px) {
		.topnav a:not(:first-child), .dropdown .dropbtn {
		display: none;
		}
		
		.topnav a.icon {
		float: right;
		display: block;
		}
	}

	@media (max-width: 600px) { 
	body 
			{
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color:#000000; 
            color:#ffffff;
			background-image:url('../bilder/theme/border_top_mobile.png'), url('../bilder/theme/head_city_bg2.jpg');
			background-position: right top, left top;
			background-repeat: no-repeat, repeat;
			background-attachment: scroll, fixed;
background-size: 100%, Auto;
        }
		
		.container {
			background-image: none;
			width: auto;
            max-width: 1200px;
            margin: 20px;
            padding: 0px;
            background-color:transparent;
            */box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
            border-radius: 3px; 
        }
	
	.main-content {
        flex-direction: column; align-items: stretch;
        }
    .sidebar {
        min-width:90%;width: 90%;flex-direction: column; margin-bottom:100px;
         }
	.panel.active {
		display: flex; gap: 20px; flex-direction: column;
		}
	
	.blog-post {
            background-color:#0a0c16; max-width: 330px;
            margin-bottom: 20px;
            border-radius: 8px;
			box-shadow: 4px 3px 0px -1px rgba(136,6,5,0.6);
			-webkit-box-shadow: 4px 3px 0px -1px rgba(136,6,5,0.6);
			-moz-box-shadow: 4px 3px 0px -1px rgba(136,6,5,0.6);border: 2px solid #880605;
        }
	
	.blog-post h2 {
			background-color: #880605;
            margin: 0; padding: 0;
            color:#ffffff; height: 45px; min-width:310px; white-space: nowrap;
			font-size:1.5em; line-height: -25px;
			font-family: 'personal_servicesregular';
			text-shadow: rgba(136,6,5,0.6) 0px 0px 16px; display: block;
        }
		
	.blog-post-greeting {
            background-color:#880605;max-width: 330px;
            margin-bottom: 20px;
            border-radius: 8px;
			box-shadow: 4px 3px 0px -1px rgba(136,6,5,0.6);
			-webkit-box-shadow: 4px 3px 0px -1px rgba(136,6,5,0.6);
			-moz-box-shadow: 4px 3px 0px -1px rgba(136,6,5,0.6);border: 2px solid #880605;
        }
	
	 .blog-post img {
            float: left; height: auto; width: 98%;
            border-radius: 4px; margin-left:0px;
            margin-right: 5px; padding:5px;
        }
	
	.blog-title {max-width:340px; overflow: hidden;}
	
	.topnav.responsive {position: relative;}
	
	.topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
		}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
		}
	.topnav.responsive .dropdown {float: none;}
	.topnav.responsive .dropdown-content {position: relative;}
	.topnav.responsive .dropdown .dropbtn {
		display: block;
		width: 100%;
		text-align: left;
		}
		

        }