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



/* Reset ***************************************/
/***********************************************/
/***********************************************/

/*@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,900;1,400&display=swap');*/

/* source-sans-pro-regular - latin-ext_latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/SourceSansPro-Regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/SourceSansPro-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/SourceSansPro-Regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/SourceSansPro-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/SourceSansPro-Regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-italic - latin-ext_latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/SourceSansPro-Italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/SourceSansPro-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/SourceSansPro-Italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/SourceSansPro-Italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/SourceSansPro-Italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/SourceSansPro-Italic.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-600 - latin-ext_latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/SourceSansPro-SemiBold.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/SourceSansPro-SemiBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/SourceSansPro-SemiBold.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/SourceSansPro-SemiBold.woff') format('woff'), /* Modern Browsers */
       url('fonts/SourceSansPro-SemiBold.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/SourceSansPro-SemiBold.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-900 - latin-ext_latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/SourceSansPro-Black.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/SourceSansPro-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/SourceSansPro-Black.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/SourceSansPro-Black.woff') format('woff'), /* Modern Browsers */
       url('fonts/SourceSansPro-Black.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/SourceSansPro-Black.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}




* {
	margin: 0;
	padding: 0;
}

body {
	font-size: var(--basic-root-size);
	color: var(--basic-text-copy);
}



/* Standard-Definitionen ***********************/
/***********************************************/
/***********************************************/

/* Farben */

	:root {
		--basic-text-copy:     rgba(0,0,0,.66);
		--basic-text-color:    #1f7099;
		--basic-text-clr-dark: #154d69;
		--basic-text-contrast: #f5f7f2;
		--basic-text-variant:  #fff;

		--text-box-color:      #e5f6ff;
		--text-box-variant:    #d9d5c3;
		--text-box-dark:       #66665c;

		--dark-text-color:     #1a5d7e;
		
		--header-background:   rgba(255,255,255,.825);
		--page-background:     #f7f8f3;
		--page-background-opa: rgba(247,248,243,.5);
		--footer-background:   #ccc9b8;
	}

/* Abstände & Größen */

	:root {
		--basic-root-size:     20px;
		--basic-font-size:     1rem;
		--basic-line-height:   2rem;
		--lead-font-size:    1.5rem;
		--lead-line-height:  2.5rem;

		--m-xlarge: 4rem;
		--m-large:  2rem;
		--m-medium: 1rem;
		--m-small: .5rem;
	}

/* Media Querys */

	:root {
		--desktop-width:    1200px;
		--tablet-landscape:  900px;
		--tablet-portrait:   700px;
		--mobile-width:      500px;
	}

/* Schriften */

	:root {
		--header-weight:    600;
		--text-copy-weight: 400;
		--strong-weight:    900;
	}

/* Typographie allgemein */

	* {
		font-weight: var(--text-copy-weight);
		font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;}

	h1, h2, h3, h4, h5, h6 { font-weight: var(--header-weight); margin-bottom: var(--m-large); }

	p { line-height: var(--basic-line-height); margin-bottom: var(--basic-font-size); }

	strong { font-weight: var(--strong-weight); }

	.text-small { font-size: 66%; }

	.text-center { text-align: center; }
	.text-right { text-align: right; }

/* Listen */

	ul, ol { list-style: outside; line-height: var(--basic-line-height); margin-bottom: var(--m-large); padding-left: 1rem; }

/* Links */

	a { color: var(--basic-text-color); text-decoration: none; }

	a.anchor { display: block; position: relative; top: -9rem; visibility: hidden; }
	@media (max-width:575px) { a.anchor { top: -5rem; } }

	a.anchor2 { display: block; position: relative; top: -13rem; visibility: hidden; }
	@media (max-width:575px) { a.anchor2 { top: -9rem; } }

	a:visited, a:hover, a:active, a:focus { color: var(--basic-text-color) }
	a:hover { color: var(--dark-text-color); text-decoration: underline; }

/* Bilder */

	.img-responsible { width: 100%; margin-bottom: var(--m-large); }

/* Fußnoten */

	sup { font-size: 50%; }

/* Horizontale Linie */

	hr {
		border: solid 1px rgba(0,0,0,.25);

		margin-top:    var(--m-large);
		margin-bottom: var(--m-large);
	}

/* Responsive Helper */

@media (max-width:767px) {
	.hide-on-mobile { display: none; }
	.show-on-mobile { visibility: visible; }
}

@media (min-width:768px) {
	.hide-on-mobile { visibility: visible; }
	.show-on-mobile { display: none; }
}

/* Tabellen */

table { margin-bottom: var(--basic-font-size); }

td { padding: .25rem; }


/* Header **************************************/
/***********************************************/
/***********************************************/

/* Hintergrund */

	.header {
		background-color: var(--header-background);
		
		-webkit-backdrop-filter: blur(5px);
  		backdrop-filter: blur(5px);
		
		box-shadow: 0 5px 5px rgba(0,0,0,.1) }

/* Display und Position */

	.header {
		position: fixed;
		top: 0;
		width: calc(100% - 2*(var(--m-medium)));
		overflow: hidden;
		
		z-index: 99;
	}

/* Abstände und Größen */

	.header {
		padding-top:    var(--m-large);
		padding-bottom: var(--m-large);
		padding-right:  var(--m-medium);
		padding-left:   var(--m-medium);
	}

/* Typographie */

	.header h1 {
		text-align: center; color: var(--basic-text-color);
		font-size: calc(3 * var(--basic-font-size));
		line-height: calc(3 * var(--basic-font-size));
		margin-bottom: 0;
	}
	@media (max-width:575px) {
		.header { padding: var(--m-medium) }
		
		.header h1 {
			text-align: left;
			font-size: calc(1.5 * var(--basic-font-size));
			line-height: calc(1.5 * var(--basic-font-size));
		}
	}

	.header .logo-wordmark-small { font-size: 75%; }

/* Link im Wordmark */

	.header a:hover { text-decoration: none; color: black; }


/* Sections ************************************/
/***********************************************/
/***********************************************/

/* Hintergrund */

	.hero {
		background-image: url("assets/img/banner-hero-2.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-color: var(--page-background);
		background-position: left top;
	}
	@media (max-width:767px) { .hero { background-image: url("assets/img/banner-hero-mobile.jpg"); } }

	.hero-text { background-color: var(--page-background); }


	.uebermich {
		background-color: var(--page-background);
	}

	.kontakt {
		background-image: url("assets/img/banner-kontakt.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-color: var(--page-background);
		background-position: center center;
	}

	.kontakt .container {
		background-color: rgba(255,255,255,.75);
		-webkit-backdrop-filter: blur(5px);
  		backdrop-filter: blur(5px);
	}

/* Typographie */

	.hero h2 { text-align: right; font-size: 250%; font-weight: 400; }
	.hero p, .hero-text p { font-size: var(--lead-font-size); line-height: var(--lead-line-height); }
	.hero p { text-align: right; }
	.hero-text p { text-align: center; }
	@media (max-width:575px) { .hero h2 { font-size: 200%; margin-top: -2rem; } }
	@media (min-width: 576px) and (max-width: 767px) {
		.hero h2 { font-size: 200%; }
	}


	.page h2, .page h3 { text-align: center; }

	.impressum h2, .impressum h3,
	.angebot-detail h3 { text-align: left; }


	.kontakt h2, .kontakt p { text-align: right; }

	.preise .pricing { text-align: center; font-size: 200%; margin-bottom: 2rem; }

/* Abstände und Größen */

	.hero, .impressum, .angebot-detail { margin-top: 9rem; }
	@media (max-width:575px) { .hero, .impressum, .angebot-detail { margin-top: 5rem; } }

	.hero, .page { padding: var(--m-xlarge); min-height: calc(100vh - 8rem - 4*var(--m-large)); }
	@media (max-width:575px) {
		.hero, .page { padding: var(--m-xlarge) var(--m-medium); min-height: calc(100vh - 8rem - 4*var(--m-medium)); }
	}

	.hero .container {
		width: 50%;
		margin-left: 50%;
	}
	@media (max-width:575px) {
		.hero .container { width: 100%; margin-left: 0; }
	}

	.kontakt .container {
		width: calc(50%-2*var(--m-large));
		margin-left: 50%;
		padding: var(--m-large);
		border-radius: 10px;
	} 		
	@media (max-width:575px) { 
		.kontakt .container { width: calc(100% - 2*var(--m-large)); margin-left: 0; margin-top: 30vh; bottom: 0; }
	}


/* Footer **************************************/
/***********************************************/
/***********************************************/

/* Hintergrund */

	.footer { background-color: var(--footer-background); }

/* Typographie */

	.footer p { text-align: center; }

/* Abstände und Größen */		
		
	.footer { padding: var(--m-large); }



/* Grid/WP *************************************/
/***********************************************/
/***********************************************/

	.container, .container-small { margin-right: auto; margin-left: auto; }

	/*
	@media (min-width:1600px)                         { .container { width: calc(1600px - 2*var(--m-large)); } }
	@media (min-width:1200px) and (max-width: 1599px) { .container { width: calc(1200px - 2*var(--m-large)); } }
	*/

	.block-wrapper {
		display: flex;
		flex-flow: wrap;
		align-items: stretch;
		
		margin-right: -1rem;
		margin-left:  -1rem;
		
		margin-bottom: 2rem;
	}

	/* Auto Block */
	.block-100 {
		flex: 0 0 auto;
				
		width: calc(100% - 4rem);
		
		margin-right: 1rem;
		margin-left:  1rem;
				
		margin-bottom: 2rem;
	}

	/* 50% Block */
	.block-50 {
		/*flex: 0 1 50%;*/
		
		margin-right: 1rem;
		margin-left:  1rem;
				
		margin-bottom: 2rem;
	}

	.block-33 {

		margin-right: 1rem;
		margin-left:  1rem;

		margin-bottom: 2rem;
	}

	/* 25% Block */
	.block-25 {
		/*flex: 0 1 25%;*/
		
		margin-right: 1rem;
		margin-left:  1rem;
				
		margin-bottom: 2rem;
	}

	/* Anpassungen an Bildschirmgrößen */

	/* Mobiltelefon */
	@media (max-width:575px) {
		.container, .container-small { width: 100%; }
		
		.block-50 { flex: 0 0 auto; width: calc(100% - 4rem); }
		.block-33 { flex: 0 0 auto; width: calc(100% - 4rem); }
		.block-25 { flex: 0 0 auto; width: calc(100% - 4rem); }
	}	

	/* Mobiltelefon (quer), Tablet */
	@media (min-width:576px) and (max-width:767px) {
		.container, .container-small { width: 100%; }
		
		.block-50 { flex: 0 0 auto; width: calc(100% - 4rem); }
		.block-33 { flex: 0 0 auto; width: calc(100% - 4rem); }
		.block-25 { flex: 0 0 auto; width: calc(100% - 4rem); }
	}	

	/* Tablet (quer) */
	@media (min-width:768px) and (max-width:991px) {
		.container, .container-small { width: 100%; }
		
		.block-50 { flex: 0 0 auto; width: calc(50% - 4rem); }
		.block-33 { flex: 0 0 auto; width: calc(50% - 4rem); }
		.block-25 { flex: 0 0 auto; width: calc(50% - 4rem); }
	}	
	
	/* Desktop */
	@media (min-width:992px) and (max-width:1199px) {
		.container { width: 100%; }
		.container-small { width: 75%; }

		.block-50 { flex: 0 0 auto; width: calc(50% - 4rem); }
		.block-33 { flex: 0 0 auto; width: calc(50% - 4rem); }
		.block-25 { flex: 0 0 auto; width: calc(50% - 4rem); }
	}	

	/* Desktop (groß) */
	@media (min-width:1200px) and (max-width:1599px) {
		.container { width: calc(1159 - 2*var(--m-large)); }
		.container-small { width: 50%; }

		.block-50 { flex: 0 0 auto; width: calc(50% - 4rem); }
		.block-33 { flex: 0 0 auto; width: calc(33.3333% - 4rem); }
		.block-25 { flex: 0 0 auto; width: calc(25% - 4rem); }
	}
		
	/* Desktop (sehr groß) */
	@media (min-width:1600px) {
		.container { width: calc(1559px - 2*var(--m-large)); }
		.container-small { width: 50%; }

		.block-50 { flex: 0 0 auto; width: calc(50% - 4rem); }
		.block-33 { flex: 0 0 auto; width: calc(33.3333% - 4rem); }
		.block-25 { flex: 0 0 auto; width: calc(25% - 4rem); }
	}	


/* Panels **************************************/
/***********************************************/
/***********************************************/

	.panel { 
		padding: var(--m-medium);
		padding-top: var(--m-large);
		border-radius: 5px;
	}	

	.panel-medium {
		background-color: var(--text-box-variant);
	}

	.panel-light {
		background-color: var(--page-background);
	}

	/* Angebote Panels */

	.panel-img {
		padding: var(--m-medium);
		padding-top: var(--m-small);
		position: relative;
		min-height: 14rem; 
	}

	.panel-img h3 {
		color: white;
		text-shadow: 0px 1px 2px black;
		text-align: left;
		margin-bottom: 4rem;
	}

	.panel-img a.btn-angebote {
		position: absolute;
		bottom: 1rem;
		right: 1rem;
	}

	.panel-img a.btn-angebote {
		background-color: var(--basic-text-color);
		display: block;
		width: 2rem;
		height: 2rem;
		padding: .5rem;
		color: white;
		text-align: center;
		font-size: 2rem;
		line-height: 2rem;
		border-radius: 1.5rem;
	}

	.panel-img a.btn-angebote:hover {
		text-decoration: none;
		background-color: var(--basic-text-clr-dark);
		color: var(--text-box-color);
	}

	.panel-img {
		background-size: cover;
		background-position: center center;
	}
		
	#politik {
		background-image: url("assets/img/angebote-politik.jpg");
	}

	#pfarrer {
		background-image: url("assets/img/angebote-pfarrer.jpg");
	}

	#medien {
		background-image: url("assets/img/angebote-medien.jpg");
	}

	#lehrende {
		background-image: url("assets/img/angebote-lehrende.jpg");
	}

	#juristen {
		background-image: url("assets/img/angebote-juristen.jpg");
	}

	#medizinerinnen {
		background-image: url("assets/img/angebote-medizinerinnen.jpg");
	}

	#vortrag {
		background-image: url("assets/img/angebote-vortrag.jpg");
	}

	#online {
		background-image: url("assets/img/angebote-online.jpg");
	}




/* Main Menu ***********************************/
/***********************************************/
/***********************************************/

.main-menu ul { list-style: none; text-align: center; margin-bottom: 0; padding: 0; }

@media (max-width:575px) {
	.main-menu ul { text-align: right; }
}

.main-menu ul li { display: inline; padding: 0 .5rem; }





/* Buttons *************************************/
/***********************************************/
/***********************************************/

.button, .button:visited, .button:active, .button:focus {
	background-color: var(--basic-text-color);
	
	color: var(--basic-text-contrast);

	padding: var(--m-small) var(--m-medium);
	border-radius: 5px;
}

.button:hover {
	background-color: var(--dark-text-color);
	
	color: var(--basic-text-contrast);

	text-decoration: none;
}



/* Elements ************************************/
/***********************************************/
/***********************************************/



/* Formulare ***********************************/
/***********************************************/
/***********************************************/

label {
	font-family: inherit;
	font-size: 75%;
	color: rgba(0,0,0,.5);
}

.input-text, textarea {
	width: calc(100% - .5rem);
	border: solid 1px rgba(0,0,0,.25);
	background: rgba(255,255,255,.75);
	padding: .25rem;
	font-family: inherit;
	font-size: inherit;
	margin-bottom: var(--basic-font-size);
	border-radius: 0.25rem;
}

textarea {
	resize: none;
	height: 6.5rem;
}

.input-checkbox {
	border-color: rgba(0,0,0,.5);
	border-radius: .25rem;
	background-color: rgba(255,255,255.75);
	width: 1rem;
	height: 1rem;
}

.input-button, .input-button:visited, .input-button:active, .input-button:focus {
	border: 0;
	padding: .25rem;
	background-color: var(--basic-text-color);
	
	color: var(--basic-text-contrast);

	padding: var(--m-small) var(--m-medium);
	border-radius: 5px;
	font-family: inherit;
	font-size: inherit;
	margin-bottom: var(--basic-font-size);
}

.input-button:hover {
	background-color: var(--dark-text-color);
	
	color: var(--basic-text-contrast);

	text-decoration: none;
}



/* Under Construction **************************/
/***********************************************/
/***********************************************/

.construction {
	height: 100vh;
	text-align: center;
	padding-top: 40vh;
}

.construction h1 { 
	color: var(--basic-text-color);
	font-size: calc(3 * var(--basic-font-size));
}

/* Helper */ 

/*

* { outline: solid 1px rgba(255,0,0.5); }

h1, h2, h3, h4, h5, h6, p { outline: solid 1px rgba(0,128,0.5); }

@media (max-width:575px)                         { .container { background-color: rgba(255,0,0,.25); } }
@media (min-width:576px)  and (max-width:767px)  { .container { background-color: rgba(255,128,0,.25); } }
@media (min-width:768px)  and (max-width:991px)  { .container { background-color: rgba(255,255,0,.25); } }
@media (min-width:992px)  and (max-width:1199px) { .container { background-color: rgba(0,255,0,.25); } }
@media (min-width:1200px) and (max-width:1599px) { .container { background-color: rgba(0,255,255,.25); } }
@media (min-width:1600px)                        { .container { background-color: rgba(0,0,255,.25); } }