/* ====================================================   GLOBALE DEFINITION   ==================================================== */

/* Ausgelagerte style-sheets importieren */

/* Style-Sheet für Header */
@import 'style_header.css';

/* Style-Sheet für Header */
@import 'style_footer.css';

/* Style-Sheet für Navigation */
@import 'style_navi.css';

/* Style-Sheet für Bildergalerie */
@import 'style_galery.css';

/* Style-Sheet für Formulare */
@import 'style_form.css';

/* Style-Sheet für Kalender */
@import 'style_calendar.css';

/*Style-Sheet für Geschichte */
@import 'style_geschichte.css';

/* Variablen definieren */
:root {
	--farbe_hintergrund_seite: white;
	--farbe_kontrast_stark: #DF0101;
	--farbe_kontrast_focus_hover: white;
	--farbe_kontrast_schwach: #FA5858;
	--farbe_verein: rgb(60, 134, 60);
	--farbe_ea: rgb(255, 72, 72);
	--farbe_jf: rgb(100, 100, 255);
}


/* ================ FLEXBOX   -----  LAYOUT  ============================ */
/* Mobile first ! alle Blöcke haben 100%, Navigation vertikal*/

/* Quelle: https://wiki.selfhtml.org/wiki/CSS/fertige_Layouts/Design01 */
/* Quelle: https://wiki.selfhtml.org/wiki/CSS/fertige_Layouts/Design03  */


/** Alle undefinierten Abstände auf 0 setzen **/
/* * {
	margin: 0;
	padding: 0;
  } */
/* * {
	padding-inline-start: 0;
	padding-inline-end: 0;
	padding-block-start: 0;
	padding-block-end: 0;
	margin-inline-start: 0;
	margin-inline-end: 0;
	margin-block-start: 0;
	margin-block-end: 0;
} */

/** ALLGEMEIN **/

 html {
	box-sizing: border-box;
	background: #d5d5d5;         /* Hintergrundfarbe des Rahmens um die Seite */
}

 *, ::before, ::after {
	box-sizing: border-box;
}

body {
	max-width: 75em;                           /*Maximale Breite der gesamten Seite, der Rest wird mit hellgrauem Rahmen gefüllt*/
	margin: 0 auto;                           /* Rand um Body oben, rechts*/
	padding: 0;                               /* Abstand des Inhalts eines Elements zum Rand des Elements */
	background: var(--farbe_hintergrund_seite);                           /* Hintergrundfarbe */
	color: #333;                                 /* Schriftfarbe allgemein*/
	font: normal 1em Arial, sans-serif;     /* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */
}

/** INHALT **/
main  {
	display: flex;
	flex-direction: column;
	padding: 0 0 1em;
	margin: 2em 1em;
	background: var(--farbe_hintergrund_seite);
}

/* Überschriften */
h1,
h2 {
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	padding-left: 1em;
	color: #2E2E2E;
	text-transform: uppercase;
	border-left:5px solid var(--farbe_kontrast_stark);
}

h2 span {
	font-size: 0.70em;
	color: #818181;
	text-transform: none;
}

h3        {
	font-size: 1.25em;
	font-weight: normal;
	padding: 0px;
	margin: 0px;
	color: #666;
}

/* Textabschnitte (Paragraph) */
p {
	text-align: left;
	line-height: 1.6em;
	padding: 20px 0px;
}


/* Verweise */
a         {
	color: var(--farbe_kontrast_stark);
	outline: none;
	text-decoration: none;
}

/* Durch Maus oder Tastatur angewählte Verweise werden hervorgehoben */
a:hover,
a:focus {
	color: var(--farbe_kontrast_focus_hover);
	text-decoration: none;
	background-color: var(--farbe_kontrast_schwach);
}

/* Link "weiter lesen --> " (Klasse "more")*/
a.more        {
	float: right;
	font-weight: bold;
	padding: 0.2em;
}
a.more:hover,
a.more:focus {
	border: 0 solid var(--farbe_kontrast_schwach);
	border-radius: 8px;
}
		
a.more:after{
	content:" \2192 ";      /* Pfeil nach rechts */
	font-size:1.2em;
	font-weight:bold;
	padding: 0.2em;
}

/* Section */

section {
	flex: 1 100%;  /* Diese Elemente erhalten die ganze Breite */
	margin: 1%;
}

section#intro {
	flex: 1 100%;  /* Diese Elemente erhalten die ganze Breite */
	margin: 1%;
}

section img {
	width: 100%;
	float: left;
}

/* ========================================================================================= */
/* ================== 2-Spaltenlayout mit breiterem aside (größer 55em) ==================== */
@media screen and (min-width: 55em) {

/* Main wird zum Flex-Container */
main {
	flex-flow: row wrap;         /* Zeilenumbruch */
}

/* main > * {
	flex: 1 100%;  /* Alle Kindelemente werden über die volle Breite dargestellt */
/*} */

/* Section */
section {
	flex: 1 48%;  /* Diese Elemente erhalten eine halbe Breite (zwei Sections passen nebeneinander) */
	margin: 1%;
}

section img {
	width: 33%;
	float: left;
	margin-right: 0.5em;
}
}