/* Freie Google Fonts */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}


html, body { background:white; 
	width: 100%;
	height: 100%;
	color: black;
	font-family: Montserrat, 'DejaVu Sans', sans-serif, Arial, Verdana;
	margin: 0px;
	padding: 0px;
}

* { box-sizing: border-box; }



a:link {color: black; text-decoration: none; }
a:visited {color: black; text-decoration: none; }
a:active {color: black; text-decoration: none; }


/**************************************************************/
/*        GRID-CONTAINER für die Seitenaufteilung             */
/**************************************************************/
.grid-container {
  display: grid;
  grid-template-areas: 
    'head'
    'main' 
    'footer';
  /* grid-column-gap: 10px; - Wenn man eine Lücke zwischen den einzelnen grid-bereichen haben möchte */
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr auto;

  /* Möchte man das der Footer stehen bleibt, muß man height: 100vh angeben. */
  /* Soll der Footer sich nach unten verschieben bei längerem Text, gibt man min-height: 100vh an. */
  min-height: 100vh;
} 


/* Macht das der Footer bei der mobilen Ansicht immer am Ende der Page ist */
@media (max-width: 700px) {
	.grid-container {
		height: auto;         /* Höhe richtet sich nach Inhalt */
		min-height: 0;   /*  Mindestens so hoch wie der Viewport */
		width: 100%;
		grid-template-rows: auto auto auto;
	}
}
/******************************************/
/*        GRID-CONTAINER ENDE            */
/****************************************/


/***********************/
/* HEAD-Bereich START */
/*********************/
.head { grid-area: head;
	display: flex;
	background: #fbebde;
}

.head_left, .head_right { flex: 1; 
	display: flex;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
	padding: 0px 40px 0px 40px;
}

.head_left {
	justify-content: flex-start;
	gap: 30px;
	font-size: 20px;
}

.head_right {
	justify-content: flex-end;
	gap: 30px;
	font-size: 18px;
}

.menulink_selected { font-weight: bold; }

/* Responsive layout - setzt die Menü-Buttons untereinander */
@media (max-width: 700px) {
	.head, .head_left, .head_right  {
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		gap: 4px;
	}
	.head_left { border-bottom: 1px solid gray; padding: 10px 0px 10px 0px; flex: none; }
	.head_right { padding: 10px 0px 10px 0px; flex: none; }
}
/*********************/
/* HEAD-Bereich ENDE */
/*********************/



/***********************/
/* Main-Bereich START */
/*********************/
.main { grid-area: main;
	overflow: auto;
	padding: 20px;
	background-image: url('../pics/Shiatsu_Hintergrund2.webp');
}

@media (max-width: 700px) {
	.main { padding: 20px 0px 0px 0px; }
}


/* Standard Zentrierung für Inhalte des Main-Bereichs */
.center_container { display: flex;
	justify-content: center;
	width: 100%;
}
/**********************/
/* Main-Bereich ENDE */
/********************/

/*************************/
/*   Startseite START   */
/***********************/

.startseite_abschluss, .startseite_container {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
}

.startseite_container { display:flex;
	justify-content: center;
}

.startseite_content, .logopic, .startseite_text  { width: 880px; }

.logopic { text-align:center; padding: 20px 0px 20px 0px; }

.startseite_text img {
	float: right;
	width: 280px;
	height: auto;
	margin: 0 0 1rem 1rem;
}

.center { text-align:center; }

.gsd_link { padding-bottom: 50px; }

.startseite_text3 { font-size: 14px; padding: 20px 0px 30px 0px; }

.startseite_abschluss { display:flex;
	justify-content: center;
	background: #b23000;
	color:white;
	padding: 20px 0px 20px 0px;
}

.startseite_center_block { width: 880px; }

.startseite_adresse { display:flex; gap: 20px; }

a.startseite_mail { color: white; }

@media (max-width: 700px) {
	.logopic { padding: 0px 0px 0px 0px; }
	.logopic img { width: 300px; }
	.startseite_content { align-items:center; }
	.startseite_center_block, .startseite_content, .startseite_text, .gsd_link, .startseite_text2, .startseite_text3, .logopic { width: 300px; }
	.startseite_text img {
		float: none;
		display: block;
		margin: 0 auto 1rem auto;
	}
	.startseite_adresse { flex-direction: column; gap: 5px; }
}

/************************/
/*   Startseite ENDE   */
/**********************/

/*************************/
/* Footer-Bereich START */
/***********************/
.footer { grid-area: footer;
	display: flex;
	justify-content: center;
	padding: 20px 0px 20px 0px;
	background: #fbebde;
}

.footer_content { display:flex;
	justify-content: space-around;
	align-items: center;
	width: 880px;
}

a.foot_link:link, a.foot_link:visited { color: #a47f74;
	text-decoration: underline;
}
a.foot_link:active { font-weight: bold; text-decoration: underline; }

a.foot_selected { color: #cc4331;
	text-decoration: underline;
}

.tags { display: flex; font-size: 10px; color: #CCCCCC; }

/* Responsive layout - setzt die Footer-Elemente untereinander */
@media (max-width: 700px) {
	.tags, .footer_content  {
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		gap: 10px;
	}
}
/************************/
/* Footer-Bereich ENDE */
/**********************/


/************************/
/*   Impressum START   */
/**********************/

.impressum_center { display:flex;
	justify-content: center;
	padding: 30px 0px 30px 0px;
}

.impressum_container { width: 880px; }

.impressum_title { font-size: 22px; font-weight: bold; }

.impressum_links { font-size: 18px; font-weight:bold; margin-top: 60px; }

.telefonnummer { display: inline-block; vertical-align: -5px; }

@media (max-width: 700px) {
	.impressum_container  { width: 300px;
	}
	.impressum_center { padding: 0px 0px 0px 0px;
	}
}

/************************/
/*   Impressum ENDE    */
/**********************/

/***************************/
/*   Datenschutz START    */
/*************************/

.datenschutz { width: 880px; }


/**************************/
/*   Datenschutz ENDE    */
/************************/