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

martin-stricker-paarcoaching.de
------------------------------------------------

colors
------------------------------------------------*/
:root {
	--color-1: #023f86; /* Logo-Blau / Dark cornflower blue */
	
	
	--color-2: #007e97; /* Logo-Teal / Metallic seewead*/
	--color-2-shade1: #EBFCFF; /* shade1 */
	
	--color-3: #fff; /* weiß */
	
	--color-4: #E3655B; /* Lachs / Fire Opal */ 
	
	
	--color-5: #FF8600; /* Dunkelorange */
	
	--color-6: #fbfbfb; /* hellgrau */
	
	--color-7: #f54c10; /* Orange 2    #F34213*/ 
}
h1{color: var(--color-1);}
h2{color: var(--color-7);}
.bg-1{ background-color: var(--color-6);}

/* fonts
--------------------------------------------------- */
@font-face {font-family: 'latoregular';
    src: url('lato-regular-webfont.woff2') format('woff2'),
         url('lato-regular-webfont.woff') format('woff');
    font-weight: normal; font-style: normal;}
@font-face {font-family: 'latobold';
    src: url('lato-bold-webfont.woff2') format('woff2'),
         url('lato-bold-webfont.woff') format('woff');
    font-weight: normal; font-style: normal;}
@font-face {font-family: 'latoitalic';
    src: url('lato-italic-webfont.woff2') format('woff2'),
         url('lato-italic-webfont.woff') format('woff');
    font-weight: normal; font-style: normal;}
@font-face {font-family: 'latoblack';
    src: url('lato-black-webfont.woff2') format('woff2'),
         url('lato-black-webfont.woff') format('woff');
    font-weight: normal; font-style: normal;}

body{font-family:'latoregular';}
strong{font-family:'latobold';}
em{font-family:'latoitalic';}
h1 {font-family:'latoblack';}
h2 {font-family:'latoregular';}

/* font-size
--------------------------------------------------- */
body {font-size: 19px; line-height: 160%;}
h1{font-size: 45px; line-height: 130%;}
h2{font-size: 40px; line-height: 130%;}
.h1big{font-size: 36px;}
.text30{font-size: 30px;}
.text24{font-size: 24px; line-height: 200%;}

@media screen and (max-width: 500px) {
	body {font-size: 16px;}
	h1{font-size: 24px;}
	h2{font-size: 21px;}
	.h1big{font-size: 28px;}
}
footer{ font-size: 16px;}
/* width
--------------------------------------------------- */
.centerwidth1{ margin: 0 auto; max-width: 1050px;}
.centerwidth2{ margin: 0 auto;	max-width: 1200px;	padding: 0 50px; }
.fullwidth{ width: 100%;}

.centertext{ text-align: center;}
.aligncenter{align-content: center;
align-items: center;}
.padding-1{ padding: 70px 0 0 0;}
.padding-2{ padding: 70px 0;}

@media screen and (max-width: 800px) {
	.centerwidth1{ margin: 0; padding: 0 0px; max-width: 800px; }
	.centerwidth2{ margin: 0 40px; max-width: 1200px; padding: 0 50px; }

}

/* basics
------------------------------------------------------------------------- */
 *{ margin:0; padding:0; box-sizing: border-box; }
/* scroll-behavior */ html {scroll-behavior: smooth;} 
/* Firefox-Bug */ a {outline:none;} a img {border:none;}

header{ text-align: center; padding: 10px 0; line-height: 0; }

/* headings
------------------------------------------------------------------------- */
h1{ margin-bottom: 10px;}
h1, h2 {text-align: center;}

/* img
------------------------------------------------------------------------- */
/* img responsive */  img {max-width: 100%; height: auto;}
.img-1{ border-radius: 10px; box-shadow: 4px 7px 10px 0px rgba(0, 0, 0, 0.22);}

/* links
------------------------------------------------------------------------- */
.link-1{ text-decoration: none; color: #767676;}

/* divider
------------------------------------------------------------------------- */
.divider-1{
border-style: solid;
border-width: 1px 0px 1px 0px;
border-color: #DDDDDD;
margin: 20px 30%;
}
.divider-2{
border-style: solid;
border-width: 1px 0px 1px 0px;
border-color: #DDDDDD;
}
/* buttons
------------------------------------------------------------------------- */
.button-1 {
	background-color:var(--color-7);
	border-radius:14px;
	display:inline-block;
	cursor:pointer;
	color:var(--color-3);
	font-size:23px;
	padding:15px 24px;
	margin: 20px 0 0 0;
	text-decoration:none;
	letter-spacing: 0.1em;
	transition-duration: .3s;
    transition-property: transform, background-color;
/*	text-transform: uppercase;*/
}
.button-1:hover { background-color:var(--color-2); transform: scale(0.9);}
.button-1:active {position:relative; top:1px;}

@media screen and (max-width: 800px) {
.button-1 { font-size:19px;}
}


/* hero
------------------------------------------------------------------------- */
.hero {
  /* display: flex; */
  min-height: 300px;
  /*height: 800px;*/
  background-image: url(../img/martin-stricker-4.jpg);
    background-size: cover;
    min-height: 90vh;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-box-shadow: inset 0px 0px 300px 0px rgba(255, 255, 255, 0.2);
  -moz-box-shadow: inset 0px 0px 3000px 2000px rgba(255, 255, 255, 0.2);
  box-shadow: inset 0px 0px 300px 2000px rgba(255, 255, 255, 0.9);
}
@media (max-width: 1200px) {.hero { background-image: url(../img/martin-stricker-m1.jpg);}}
@media (max-width: 500px) {.hero { background-image: url(../img/martin-stricker-m3b.jpg);}}

ul.checkmark li{

	margin-bottom: 1em;
	list-style-type: none;
	padding: .25em 0 0 2.5em;
	position: relative;
}
/*  Kreis als Hintergrund des Checkmark 
https://codepen.io/ukristen/pen/KpPNZV
ul.checkmark li::before{
		content: " ";
		display: block;
		border: solid .8em var(--color-2);
		border-radius: .8em;
		height: 0;
		width: 0;
		position: absolute;
		left: .5em;
		top: 40%;
		margin-top: -.5em;
}*/
ul.checkmark li::after{
		content: " ";
		display: block;
		width: .3em;
		height: .6em;
		border: solid var(--color-7);
		border-width: 0 .2em .2em 0;
		position: absolute;
		left: 1em;
		top: 40%;
		margin-top: -.2em;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
}
.container {
  width: 60%;
  margin: 0 auto;
}


.about {

  padding: 50px 25px;
}
.about .text-one {
  display: flex;

  gap: 20px;
  min-height: 400px;
  width: 50%;
}

@media screen and (max-width: 950px) {
.about .text-one {
  width: 100%;
}
}


.flex-container {
  display: flex;
  flex-wrap: wrap;
	  padding: 50px 25px;
	  width: 60%;
  margin: 0 auto;
}

.flex-item {
  flex: 45%;
	padding-right: 5%;
}

/* Responsive layout - makes a one column layout (100%) instead of a two-column layout (50%) */
@media (max-width: 1300px) {
  .flex-item {
    flex: 100%;
	  padding-bottom: 30px;
  }
	.left-1{ padding-bottom: 60px;}
	.left-2{ padding-bottom: 20px;}
}

@media screen and (max-width: 800px) {
.container, .flex-container {
  width: 80%;
}
.flex-container { padding: 50px 0px;}
}

footer{
	margin-bottom: 15px;
}