@charset "UTF-8";
/* CSS Document zu "www.verein-wog.ch" */
/*##############################################################################################################################

/*******************************************************************************************************/
/* "Global" gültige Einstellungen für Smartphone und teilweise auch für Tablet und Desktop. Beim Wechsel
/* auf eine andere Bildschirmgrösse überschreibe ich die Werte wo sinnvoll oder nötig.
/*******************************************************************************************************/

html
{

/***********************************************************************/
/* Explizit die Berechnungsgrundlage für die Schriftgrösse festlegen,
/* 100% entsprechen den Browser-Font-Einstellungen, meistens 16 Pixel
/***********************************************************************/
	font-size: 100%;

/***********************************************************************/
/* Padding und Rahmen in der Grössenberechnung (Höhe und Breite)
/* mitberücksichtigen, siehe auch https://helpx.adobe.com/de/
/* dreamweaver/how-to/make-website-pt4-css-design.html
/***********************************************************************/
	box-sizing:border-box;	
}

body {
	font-family: 'Roboto', sans-serif;
	background-color: #BDBBBB;
	position: relative;
}

.flexcontainer {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	max-width: 960px;
}



.abstand
{
margin-top: 4rem;
}

      
.dekoration {
	border: 0.1rem solid #000000;
	padding: 1rem;
	text-align: center;
}

/* H1-Titel für Haupt-Ueberschrift "Walter Oscar Grob" */
h1 
{
	font-family: "Roboto", sans-serif;
	color: white;
	font-weight: 100;
	font-style: normal;
	font-size: 3.8rem;
	line-height: 3.8rem;
	margin: 0rem;
}

/*
h1
{
color: white;
}
*/

h2
{
color: red;
}

h4
{
font-size: 15px;
color: white;
}


.titelbalken
{
	flex: 1;
	background-color: #366402;
	font-size: large;
}

.baustein_04
{
	-webkit-box-flex: 1 1 0px;
	flex: 1;
	text-align: left;
	background-color: #F4F4E1;
	margin-top: 4rem;
}

table
{
	/*	font-family: "jaf-bernino-sans-comp",sans-serif;
	font-size: 100%;  */
	border-collapse: collapse;
	border-style: solid;
	border-width: 0rem;
	margin-top: 0rem;
	width: 100%;
}

td,
th
{
	padding-left: 0rem;
	padding-top: 0.5rem;
	color: #72758E;
/*	background-color: #FFFFFF; */
}

/* Die nächsten vier Selektoren sind wichtig für eine schönes Menu  */
.navigation {
	flex: 1;
}

.navigation ul {
	list-style-type: none;
	margin: 0rem;
	padding: 0rem;
}

.navigation ul li {
	list-style-type: none;
	margin: 0rem;
	padding: 0rem;
	text-align: center;
}

.navigation ul li a {
	display: block;
	color: red;
	font-size: 1.1rem;
	font-weight: bold;
	line-height: 2.3rem;
	text-decoration: none;
}


/* Vier sog. Pseudo-Elemente für die verfeinerte Darstellung von Hyperlinks, 
   wirksam bzw.sichtbar vor allem bei nackten, unformatierten Standard-Links */

.navigation ul li a:link {
	color: red;    /* Siehe auchst Selektor ".navigation ul li a" (der hat wahrscheinlich Vorrang) */
	text-decoration: none;
}

.navigation ul li a:visited {
	/* [disabled]color: #E6C1C1; */
	text-decoration: none;
}

.navigation ul li a:hover {
	background-color: #E8F5E4;
	text-decoration: none;
}

.navigation ul li a:active {
	text-decoration: underline;
	color: #74D65A;
}

/*
/*******************************************************************************************************/
/* Fensterbreite ab 930 Pixel aufwärts für TABLET
/*******************************************************************************************************/
@media only screen and (min-width: 930px) 
{

.flexcontainer 
{
	margin-left: 0px;
	min-width: 960px;
}
}
/*
/*******************************************************************************************************/
/* Fensterbreite ab 1490 aufwärts Pixel für DESKTOP Computer
/*******************************************************************************************************/
@media only screen and (min-width: 1490px) 
{

.flexcontainer
{
	margin-left: 450px;
	min-width: 960px;
}

}