/*** ==========================================================================
Stylesheet für die Homepage "Prayer4Biker
Stand: Aufbau der Seiten index, next, termineA, termineB, pray4me, downloads, kontakt
Datei: style_p4b.css
Datum: 30.03.2023
Autor: Urs Pfister
*** ===========================================================================*/
/*  ===========================================================================
	Gut zu wissen:
	Reihenfolge der Deklarationen
	- Positionierung
	- von innen nach aussen: 	Inhalt - padding - border - margin
	Reihenfolge der Box Seiten:	top	- right - bottom - left
    ===========================================================================*/
/*  ===========================================================================
	Import Links für Entwicklungphase
    ===========================================================================*/
/* Modul mit den grundlegenden Einstellungen */
/*@import url("basis.css");

/* Modul für klassisches Layout  */
/*@import url("layout.css");

/* Modernes Layout. Auskommentieren = klassisches Layout */
/*@import url("layout-modern.css");

/* Modul für einfache Inline-Navigation */
/*@import url("navi-inline.css");

/* Modul für responsive Navigation */
/*@import url("navi-responsiv.css");

/* Modul zur Gestaltung der Inhalte in <main> */
/*@import url("content.css");

/* Modul für Kontaktformular und andere Interaktionen */
/*@import url("forms.css");

/* Modul für die Gestaltung der Links der Seite Downloads */
@import url("downloads-responsiv.css");

/* Modul für die Gestaltung der Links der Seite Downloads */
/*@import url("downloads-button.css");
/*  ===========================================================================
	xxxxxxxxx produktiver code xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/** ===========================================================================
	Basis: Modul mit den grundlegenden Einstellungen
**	===========================================================================*/
/**	---------------------------------------------------------------------------
	--- 1. Globale Einstellungen für die gesamte Webseite ---------------------
**/
/* border-box aktivieren */
*,
*::before,
*::after {box-sizing: 			border-box;}
/* sanftes Scrollen*/
html {scroll-behavior: 			smooth; }
/*die Bildgrösse an die Grösse des Bildschirms anpassen -
	dies kann auch in der HTML-Datei mit den Tags <style> und </style> und dem untenstehenden CSS dazwischen erreicht werden.
	Das gilt dann nur für diese HTML-Datei*/
img{
	max-width: 					100%;
	height: 					auto;
}
/* Korrektur von figure und blockquote*/
figure, blockquote{
	margin-right: 				0;
	margin-left: 				0;
}
/*Collapsing Margins vermeiden */
h1, h2, h3, h4, h5, h6,
p, ul, ol, blockquote {
	margin-top: 				0;
}
/* damit der obere Abstand bei weiteren H2-Überschriften trotzdem wieder stimmt.*/
.weitere_h2{margin-top:			1rem;
}
/**	---------------------------------------------------------------------------
	--- 2. Grundlegende Gestaltung von Schrift und Text -----------------------
**/
/* gestaltet das HTML-Element mit dem Namen body */
body{
/*	color: 						black; 		/* Schriftfarbe, eher nicht nötig */
	font-family: 				"URWBookman L", Verdana, system-ui, -apple-system, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
	font-size: 					0.8rem; /*small; /* Schriftgrösse*/
}
.wrapper{
	background-color: 			white;
	color: 						#000080; /*dunkelblau*/
	padding: 					1rem;
	/*border-radius: 				0px 0px 12px 12px;*/
}
/* Schriftgrösse der Überschriften*/
h1{
	font-size: 					1.20rem;
	font-weight: 				700;
}
h2{
	font-size: 					1.00rem;
	font-weight: 				700;
	color: 						#000080; /*dunkelblau*/
}
h3{
	font-size: 					0.90rem;
	font-weight: 				500;
}
h4{
	font-size: 					0.80rem;
	font-weight: 				500;
}
h5{
	font-size: 					0.70rem;
}
h6{font-size: 0.60rem; }

a {
  text-decoration-thickness: 	1px;
  text-underline-offset: 		0.1875em;
}
adress { font-style: 			normal;}


/**	---------------------------------------------------------------------------
	--- 3. Nützliche, allgemeine Klassen --------------------------------------
**/
/* Boxen am Bildschirm ausblenden, aber für Screenreader sichtbar bleiben,
den Elementen im HTML die Klasse zuweisen.*/
.visually-hidden {
  position: 					absolute !important;
  clip: 						rect(0, 0, 0, 0) !important;
  overflow: 					hidden !important;
  white-space: 					nowrap !important;

  width: 						1px !important;
  height: 						1px !important;
  padding: 						0 !important;
  border: 						0 !important;
  margin: 						-1px !important;
}
/**	---------------------------------------------------------------------------
	ENDE basis.css
**	xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/** ===========================================================================
	Layout: Modul für klassisches Layout
**	===========================================================================*/
/**	---------------------------------------------------------------------------
	--- 1. Klassisches Seitenlayout (begrenzte Breite, zentriert) -------------
**/
/* Hintergrundfarbe, Hintergrundbild (falls es den klappt) */
html {
	background-color: 			#d2d2d2; /*#9B9B9B;*/ 		/*Hintergrundfarbe dunkelgrau */
	/*background-image: 		url(bilder/hg_giantcauseway_01.png); */
	/*background-image: 		linear-gradient(steelblue, lightsteelblue);
	/*background-position: 		left top;
	/*background-repeat: 		repeat;				/* klappt nicht */
	/*background-attachment: 	scroll; 			/*fixed;*/
	/*background-size: 			auto; 				/*cover;*/
}
/*
@media screen and (min-width: 600px){
	html{
			background-color: 	steelblue;
			color: 				red;
	}
}
/* --- oder
@media screen and (max-width: 599px){
	html{
			background-color: 	steelblue;
			color: 				red;
	}
}
/* --- oder
@media screen and (min-width: 320px) and max-width:767px){
	html{
			background-color: 	steelblue;
			color: 				red;
	}
}
/* --- oder
@media screen and (min-width: 600px){
	html{
			background-color: 	steelblue;
			color: 				red;
	}
} /* und
@media screen and (min-width: 1200px){
	html{
			background-color: 	darkblue;
			color: 				red;
	}
}
*/
/* gestaltet das HTML-Element mit dem Namen body */
body{
	/*background-color:			red; 		/* zum testen */
	/*color:					green; /*black; 		/* Schriftfarbe*/
	min-width: 					320px;
	max-width: 					720px; 		/*600px;
	/*margin-top: 				0.25rem;*/
	/*margin-bottom:			0.25rem;*/
	/*margin-left: 				auto;*/
	/*margin-right: 			auto; /* oder in der Kurzform */
	margin: 					0.25rem auto;
}
/**	---------------------------------------------------------------------------
	--- 2. Kopfbereich (inklusive Inhalte) ------------------------------------
**/
/* Überschrift H1 formatieren  */
.site-header {}
.site-header h1{
	background-color:			white;
	padding-top: 				1rem;
	padding-left: 				1rem;
	margin-bottom: 				0.0rem;
}
/* Textelemente p formatieren */
.site-header p{
	margin-top: 				0.0rem;
}
/* abgerundete Ecken oben */
.h1-top {
	border-radius: 				12px 12px 0px 0px;
}
/**	---------------------------------------------------------------------------
	--- 3. Inhaltsbereich -----------------------------------------------------
**/
/* Innen- und Außenabstände */
.site-content {
    /*line-height: 				1.2; */
    padding-top: 				0.0rem;
	padding-right: 				0.5rem;
	padding-bottom: 			0.0rem;
	padding-left: 				0.5rem;
    margin-bottom: 				2.0rem;
}
/**	---------------------------------------------------------------------------
	--- 4. Fussbereich (inklusive Inhalte) ------------------------------------
**/
/*für Footer*/
.site-footer{
	/*background-color: black;*/
	color: 						white;
	text-align: 				right;
	/*padding: 0.5rem;*/
	/*border-radius: 8px 8px 8px 8px;*/
}
.site-footer a {
	color: 						white;
	text-decoration: 			none;
}
.adress li{display:				inline; }
/**	---------------------------------------------------------------------------
	ENDE layout.css
**	xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/** ===========================================================================
	Responsiv-Navi: Modul für eine responsive Navigation
**	===========================================================================*/
/**	---------------------------------------------------------------------------
	--- 1. Navigation oben ----------------------------------------------------
**/
/*für eine Viewport / Ausgabegeräte < 600px */
.site-nav{
	background-color: 			#9B9B9B; /*#d2d2d2; /*white; /*#333;*/
	color: 						#000080; /*white;*/
	/*box-shadow:					0 2px 6px rgb(51,51,51,0.3);*/
	/*margin-bottom:				0rem;	*/
}
.site-nav.inside{
	padding:					0;
}
.site-nav ul {
	display:					flex;
	flex-flow:					column;
	list-style:					none;
	padding: 					0;
	margin:						0;
}
.site-nav li {
	background-color: 			#d2d2d2; /*white; /*#333;*/
}
.site-nav a {
	display:					block;
	text-decoration: 			none;
	background:					#d2d2d2; /*#333;*/
	color:						#000080; /*white;*/
	padding:					0.5rem 1rem;
	border:						0.1rem solid #9B9B9B;
	border-radius: 				12px 12px 12px 12px;
}
.site-nav a:hover,
.site-nav a:focus {
	background-color: 			#9B9B9B; /*#07b; /*white;*/
	color:						#000080; /*white;*/
}
.site-nav a :active{
	border-bottom-color: 		white;
}
.current a{
	background-color: 			white; /*#9B9B9B; */
	color:						#000080; /*white;*/
	/*text-decoration: 			underline;*/
}
.no-js .menubutton{
	display:					none;
}
.js .menubutton{
	display:					flex;
	align-items:				center;

	cursor:						pointer;
	background:					inherit;
	color:						white;
	font:						inherit;
	text-align:					center;

	padding:					0.5rem 1rem;
	border:						0;
	margin:						0;
}
.js .menubutton::before{
	content:					url(../bilder/menuburger.svg);
	width:						1rem;
	height:						1rem;
	margin-right:				0.25rem;
}
.js .site-nav ul{
	max-height:					0;
	overflow:					hidden;
	padding:					0;
}
.js .showmenu + ul {
	max-height:					100rem;
	transition:					max-height 0.5s ease;
	overflow:					auto;
}
.js .showmenu.menubutton::before {
	content:					url(../bilder/menuclose.svg);
}
/*für Viewport / Ausgabegeräte >= 600px */
@media screen and (min-width: 600px) {
	.menubutton {
		display:				none !important;
	}
	.site-nav {
	position:					sticky;
	top:						0;
	}
	.site-nav .inside {
		padding:				0 1rem;
	}
	.site-nav ul {
		max-height:				none !important;
		flex-flow:				row;
		padding:				0;
	}
	.site-nav li {
		background-color: 		#9B9B9B; /*#d2d2d2; /*white; /*#333;*/
		flex:					1;
		max-width:				10rem;

		text-align:				center;
		/*border-left:			1px solid #eee;*/
	}
	.site-nav li:last-child {
		/*border-right:			1px solid #eee;*/
	}
	.site-nav a {
		border:					0.1rem solid #9B9B9B;
		border-bottom:			0;
		border-radius: 			12px 12px 0px 0px;
		min-height:				3.2rem;
	}

} /* ENDE @media */
/**	---------------------------------------------------------------------------
	--- 2. Navigation unten ---------------------------------------------------
**/
.footer-nav ul {
	display:					flex;
	background-color: 			#9B9B9B; /*#d2d2d2;*/
	padding:					0rem 1rem;
	list-style:					none;
	border-radius: 				0px 0px 12px 12px;
	margin:						0rem;
}
.footer-nav li {
	margin:						0.5rem;
}
.footer-nav li:last-child {
	margin-right:				1;
	margin-left:				auto;
}
//**	---------------------------------------------------------------------------
	ENDE navi-responsiv.css
**	xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/** ===========================================================================
	Content: Modul zur Gestaltung der Inhalte in <main>
**	===========================================================================*/
</**	---------------------------------------------------------------------------
	--- 1. Hyperlinks im Inhaltsbereich gestalten ---------------------------------
**/
.site-content a	{
	text-decoration: 			none; 		/*Unterstreichung entfernen*/
	/* outline: 				none; */ 	/*nur wenn es echt stört*/
	}
.site-content a:link { 						/*noch nicht verwendeter Link */
	color: 						#000080; 	/*#d90000; /* dunkelrot */
	}
.site-content a:visited { 					/*verwendeter Link */
	color: 						#9B9B9B; 	/*#cc6666; /* mattes dunkelrot */
	}
.site-content a:hover,
.site-content a:focus { 					/*mit Maus oder Tabulator gewählter Link */
	border-bottom: 				0px solid white; /* TEST #d90000;*/ /* Unterstreichung als Rahmen statt als text-decoration */
	}
.site-content a:active { 					/* beim klicken */
	color: 						white;
	background-color: 			#FF7F00; 	/*dunkelorange*/ /*#d90000; /*dunkelrot*/
	}
.site-content a[target="_blank"]::after {
	content: 					" \2197";
}
.content-intro span{
	color: 						#FF7F00; /*dunkelorange*/
	font-weight: 				bold;
}
.content-links{
	padding-top: 1.5rem;
}
/**	---------------------------------------------------------------------------
	--- 2. Gestaltung der Infoboxen -------------------------------------------
**/
/*Grundlegende Gestaltung für den Abschnitt mit den Infoboxen */
.infoboxen { /*nicht verwendet*/
	background-color: 			whitesmoke;
	padding: 					1rem;
	margin-bottom: 				1rem;
}
.infobox { /*nicht verwendet*/
	text-align: 				center;
	background-color: 			white;
	padding: 					1rem;
	margin: 					1rem;
}


/**	---------------------------------------------------------------------------
	--- 3. Gestaltung der Kundenstimmen ---------------------------------------
**/ /*nicht verwendet*/

/**	---------------------------------------------------------------------------
	--- 4. Gestaltung der Inhalte auf der Seite News --------------------------
**/ /*nicht verwendet*/

/**	---------------------------------------------------------------------------
	ENDE content.css
**	xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/** ===========================================================================
	Forms: Modul für die Gestaltung der Links der Seite Downloads
**	===========================================================================*/
/**	---------------------------------------------------------------------------
	--- 1. Gestaltung Downloads und Link responsiv ----------------------------
**/
.downlinks {
	display:					grid;
	grid-template-columns:		repeat(auto-fit, minmax(250px, 1fr));
	grid-gap:					1rem;
	list-style:					none;
	padding:					0;
	margin:						0;
}
.doli {
	text-align:					center;
	padding:					0.5rem;
	border:						1px solid #999;
	border-radius: 				12px 12px 12px 12px;
}

/**	---------------------------------------------------------------------------
	ENDE downloads-responsiv.css
**	xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/** ===========================================================================
	Forms: Modul für Kontaktformular und andere Interaktionen
**	===========================================================================*/
/**	---------------------------------------------------------------------------
	--- 1. Gestaltung Gestaltung des Kontaktformulars -------------------------
**/
/* --- pray4me --- */
form{
/*	max-width: 					500px; /* optische Variante*/
	background-color: 			whitesmoke;
	padding: 					1rem;
	border-radius: 				12px 12px 12px 12px;
}
.eingabe label{
	cursor: 					pointer;
	display: 					block;
}
.eingabe textarea{
	width:						14rem;
	border-radius: 				6px 6px 6px 6px; /*8px 8px 8px 8px;*/
}
.eingabe input{
	width:						14rem;
	border-radius: 				6px 6px 6px 6px;
}
.checkbox label{
	cursor: 					pointer;
	display: 					inline;
}
.checkbox select{
	border-radius: 				6px 6px 6px 6px;
}
.kontakt p{
	margin-top: 				0rem;
	margin-bottom: 				0rem;
	border-radius: 				6px 6px 6px 6px;
}
button{
	background-color: 			#9B9B9B; /*dunkelgrau*/
	color: 						white;
	font-size: 					inherit;
	cursor: 					pointer;
	padding: 					0.2rem 2rem;
	border: 					none;
	border-radius: 				6px 6px 6px 6px;
	margin-top:					0.5rem;
}
/**	---------------------------------------------------------------------------
	ENDE forms.css
**	xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/*	xxxxxxxxx ENDE produktiver code xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    ===========================================================================*/

/*nicht verwendet*/
/*div{
	margin-bottom: 				1rem;
}*/