/* =========================================================
   Layout-Styles - layout.css
   SIEBERT Consulting
   ---------------------------------------------------------   
   Autor: Dennis Saadat
   Stand: 24.10.2016
	Aktualisiert: 05.09.2025, Sven Siebert
   ========================================================= */

@media screen {
    
	html {
		font-family: 'Roboto', Helvetica, sans-serif; /* Google */
		font-size: 100%; /* Browserdefault, 16px, Basiswert für rem */
		overflow-y: scroll; /* Verhindert "Hüpfen" bei kurzen Seiten ohne Rollbalken */
		box-sizing: border-box; /* Umstellung von content-box auf border-box */
	}

	*,
	*:before,
	*:after { box-sizing: inherit; } /* von html vererbt */

	body {
		background: #f1f1f1 url("../img/background.png") no-repeat fixed left top / cover ;
		color: #333;
		font-size: 16px;
		font-size: 1rem;
		margin: 0 auto;
	}

	main { line-height: 1.7; }

	/* Pagebanner nur auf der Startseite anzeigen */
	.e404 .pagebanner,
	.template .pagebanner {
		display: none;
	}

	h1, h2, h3, h4, h5, h6 {
		color: #046db2;
		font-weight: 300;
		margin: 1.5em 0 0.5em 0;
		hyphens: auto;
	}

	h5, h6 { font-weight: 400; }

	h1   { font-size: 38px; font-size: 2.375rem; }
	h2   { font-size: 32px; font-size: 2rem; }
	h3   { font-size: 24px; font-size: 1.5rem; }
	h4   { font-size: 18px; font-size: 1.125rem; border-bottom: 1px solid #046db2; }
	h5   { font-size: 16px; font-size: 1rem; }
	h6   { font-size: 14px; font-size: 0.875rem; }

	main h1:first-child { margin-top: 0; }
	main h2:first-child { margin-top: 0; }

	/* Micro-Clearfix-Hack von nicolasgallagher.com/micro-clearfix-hack */ 
	.cf:before, .cf:after { content: " "; display: table; } 
	.cf:after, .clear { clear: both; }

	/* In visuellen Layouts verstecken, Screenreader lesen es vor */
	.hideme {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		border: 0;
		padding: 0;
		margin: -1px;
	}

	.branding {
		display: flex;
		align-items: center;
		text-align: left;
	}

	.logo {
		margin: 2em 0;
	}

	/* Pageheader */
	.pageheader,
	.pagebanner {
		background: #fff;
	}

	.pageheader .hgroup {
		margin: 2em 0;
	}

	.pageheader .hgroup h1 {
		color: #046db2;
		font-weight: 400;
		font-size: 24px;
		font-size: 1.625rem;
		letter-spacing: 0.5px;
		letter-spacing: 0.03125rem;
		margin: 0;
	}

	.pageheader .hgroup p.slogan {
		color: #046db2;
		font-weight: 300;
		font-size: 24px;
		font-size: 1.625rem;
		letter-spacing: 0.5px;
		letter-spacing: 0.03125rem;
		margin: 0;
	}

	.pagebanner {
		margin: 0 auto;
		overflow: hidden;
	}

	.services-banner {
		margin: 3em 0;
	}

	.site-section {
		padding: 3em 0;
	}

	.site-section2 {
		background: #fff;
		background: rgba(255,255,255,0.75);
	}

	.pagefooter {
		background: #046db2;
		color: #fff;
	}

	.pagefooter,
	.pagefooter	small {
		font-size: 14px;
		font-size: 0.875rem;
		line-height: 1.4;
		text-align: center;
	}

	.pagefooter	small {
		display: block;
	}

	.pagefooter .section {
		padding: 2em 0;
	}

	.pagefooter address {
		font-style: normal;
	}

	.pagefooter-top .genericon { 
		color: #fff; 
		font-size: 64px;
		font-size: 4rem;
		border-radius: 100px;
		border: 1px solid #fff;
		padding: 0.25em;
		margin: 0;
	}

	.pagefooter-separator {
		border-right: 1px solid #fff;
	}

	.pagefooter-separator:last-child {
		border-right: none;
	}

	.pagefooter-bottom {
		background: #2881bc;
		border-top: 1px solid #fff;
	}

  	/* Social-Media-Genericons im Footer */
	.pagefooter ul.socialmedia {
		display: none;
	}
	/* Ausgeblendet bis es eingesetzt werden soll!
	.pagefooter ul.socialmedia { 
		padding: 0; 
		margin: 2em 0 0 0;
	}

	.pagefooter ul.socialmedia li { 
		display: inline-block; 
		border-radius: 0.25em;
		border: 1px solid #fff;
		padding: 0.25em;
		margin-right: 32px;
		margin-right: 2rem;
	}

	.pagefooter ul.socialmedia li:hover { 
		background: #046db2;
	}

	.pagefooter ul.socialmedia a.genericon { 
		color: #fff; 
		font-size: 32px;
		font-size: 2rem; 
	}
	*/

} /* Ende @media */

	/* Breakpoint für Mobiles-Layout */
	@media screen and (max-width: 767px) {
		
		h1, h2 {
			text-align: center
		}

		header .branding {
			display: block;
			text-align: center;
		}

		header .logo {
			margin-bottom: 0
		}

		.impressum #site-section-impressum header {
			text-align: center;
		}

		.pagefooter-separator {
			border-right: none;
			margin-bottom: 1em;
		}

		.pagefooter-separator:last-child {
			margin-bottom: 0;
		}

	} /* Ende @media */

	/* Breakpoint für Tablet- und Desktop-Layout */
	@media screen and (min-width: 768px) {

		body {
			width: auto;
			max-width: none;
			margin: 0; 
		}

		.pageheader > .inside,
		.pagebanner > .inside,
		.mainnav > .inside,
		.site-section > .inside,
		.pagefooter > .inside {
			max-width: 960px;
			margin: 0 auto;
		}

		.pagebanner > .inside {
			max-width: 1200px;
			margin: 0 auto;
		}

		/* Ab hier das floaten beenden */
		.pagefooter {
			clear: both;
		}


	} /* Ende @media */

} /* Ende @media */

/* ==================================================
   Ende des Stylsheets
   ================================================== */