/* 
 * CSS-Gestaltung der Webseite der PHG
 * Version: V04102021_1437 Live seit 25.08.2023 Fred Tillmanns, 
 *          ohne: Kleine Breite, höchstens 600px (Tablet hoch) 
 * ----------------------------------------------------------------
 * Farbkonzept Frau Stöckel 2021 (Beuth):
 * rgba(255, 153, 85, 1)  = orange, z.B. Hintergrund Header;
 * rgba(255, 153, 85, 0)  = orange undurchsichtig
 * rgba(255, 127, 42, 1)  = dunkles orange
 * rgba(255, 102, 0, 1)   = sehr dunkles orange
 * rgba(255, 204, 170, 1) = dunkles rosa 
 * rgba(255, 230, 213, 1) = helles rosa
 * rgba(255, 246, 225, 1) = sehr helles rosa
 * rgba(255, 246, 213, 1) = beige,  z.B. Hintergrund Konzertinfo
 * rgba(212, 0, 0, 1)     = dunkelrot 
 * rgba(240, 0, 0, 1)     = leuchtendes rot
 * rgba(255, 238, 170, 1) = helles gelbbraun, z.B. Hintergrund der Artikeltexte
 * rgba(255, 221, 42, 1)  = sattes gelb
 * rgba(255, 221, 85, 1)  = mattes gelb
 *
 */
 
/* Block-Darstellung für HTML5-Elemente ab IE8 */
header,
nav, 
main,
footer {
	display: block;
}
/* ************************************************************* */

/* Allgemeines */
* {											/* alle Elemente werden ausgewählt */
	box-sizing: border-box;					/* Innenabstand, Inhalt, Rahmen werden den Abmessungen angepasst */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

body {
	max-width: 100%;
	background-image: url("gfx/hintergrund.jpg");	
	background-attachment: fixed;  /* Hintergrundbild bleibt beim Scrollen stehen */
	overflow-y: scroll;
	font-family: 'Arial', Calibri, sans-serif;
}

/* Außencontainer */
#wrapper {
	max-width: 1500px;
	margin: 0px auto;
	margin-top: 1.2em;
	margin-bottom: 1.2em;
	/*background-color: #FFFFFF;*/
}

.fehlermeldung {
	color: red;
}

.msg {
	padding: 15px;
	background-color: rgba(255, 246, 213, 1); /* beige */
}

/* ------------------------------------------------------------- */
/* Kopfbereich I: Logo, Titel, Schriftgröße, Sprache             */
/* ------------------------------------------------------------- */
header {
	width: 100%;
	height: 70px;
	background-color: rgba(255, 153, 85, 1); /* orange */ 
	margin-bottom: 0;
	padding: 0 1.25em 1.25em 1.25em;
}

/* Flex-Container erstellen und Kindelemente an beiden Rändern ausrichten */
#headercontent {
	display: flex;								/* Flex-Container erstellen */
	justify-content: space-between;				/* Kindelemente an Rändern ausrichten */
	align-items: center; 						/* Kindelemente ab Längstachse ausrichten */
	white-space: nowrap;						/* kein automatischer Zeilenumbruch */ 
}

/* ----- Vereinslogo und -name als Hauptüberschrift: ----- */
#header_logo_title {
	margin: 0;
	color: rgba(255, 238, 170, 1); /* helles gelbbraun */
}
#headerlogo {
	margin-top: 0.6em;
}
#headertitle {
	font-size: 2em;
	color: rgba(212, 0, 0, 1); /* dunkelrot */
	text-shadow: -5px -5px 5px rgba(255, 221, 42, 1); /* sattes gelb */
}

/* ----- Umschalter zwischen zwei Schriftgrößen im Header: ----- */
#schriftgr_switch {
	color: rgba(255, 238, 170, 1); /* helles gelbbraun */
}
#schriftgr_1 {
	padding-left: .6em;
	padding-right: .4em;
	font-size: 1.1em;
}
#schriftgr_2 {
	padding-left: .4em;
	padding-right: .6em;
	font-size: 1.4em;
}

/* ----- Umschalter zwischen zwei Sprachen im Header: ----- */
#sprache_switch {
	color: rgba(255, 238, 170, 1); /* helles gelbbraun */
}
#sprache_1 {
	padding-left: .6em;
	padding-right: .4em;
	font-size: 1.1em;
}
#sprache_2 {
	padding-left: .4em;
	padding-right: .6em;
	font-size: 1.1em;
}

/* ------------------------------------------------------------- */
/* Gestaltung der Links im header */
header a {
	text-decoration: none;
	color: rgba(255, 238, 170, 1); /* helles gelbbraun */
}


/* ------------------------------------------------------------- */
/* Kopfbereich II: Navigation über Menü-Buttons  che             */
/* ------------------------------------------------------------- */

nav {
	width: 100%;
	height: 50px;
	background-color: rgba(255, 153, 85, 1); /* orange */
	margin-bottom: 0;
}

/* nur die ul-Elemente aller nav-Elemente werden ausgewählt, die direkte Nachfahren eines <nav> sind */
#header_menue_items {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;				/* Flex-Container */
	flex-direction: column;		/* nachfolgende Elemente werden in kleineren Viewports untereinander angeordnet */
}

/* Gestaltung der Liste */
#header_menue_items li {
	margin: .5em;
	font-size: 1.5em;		/* größere Schriftgröße, sodass Schaltflächen auch auf kleinen Viewports groß genug sind */
	flex: 1 1 0%;			/* Festlegung der Breite des Kindelements */
	white-space: nowrap;	/* kein automatischer Zeilenumbruch */
}

/* Gestaltung der Links bzw. Buttons */
nav a {
	display: block;
	padding: .4em;
	text-decoration: none; 
	font-weight: bold;
	text-align: center;
	border: 2px solid rgba(255, 230, 213, 1); /* helles rosa */
	border-radius: 10px;
	box-shadow: 0 5px 10px white inset;
	color: rgba(212, 0, 0, 1); /* dunkelrot */
	/* background: rgba(255, 204, 170, 1) linear-gradient(rgba(255, 230, 213, 1), rgba(255, 204, 170, 1)); */
	/* dunkles rosa, helles rosa, dunkles rosa */
	transition: all .25s ease-in;  /* Farbänderung bei :hover oder :focus um 0.25 Sekunden verzögert */
}

/* Änderung der Schriftfarbe und des Hintergrunds der Buttons bei hover, focus */
nav a:focus,
nav a:hover,
nav a:active {
	color: rgba(255, 127, 42, 1); /* dunkel orange */			
	background: rgba(255, 204, 170, 1) linear-gradient(rgba(255, 204, 170, 1), rgba(255, 230, 213, 1));
	/* dunkles rosa, dunkeles rosa, helles rosa */
	box-shadow: 4px 4px 4px rgba(255, 204, 170, 1); /* dunkles rosa */
}

/* Ausblenden des "Hamburger"-Menü-Icons: */
input#hamburger {
	display: none;
}

/* ************************************************************* */
/* ------------------------------------------------------------- */
/* Footer: Weitere Menü-Punkte (Kontakt, Datenschutz, Impressum  */
/* ------------------------------------------------------------- */
footer {
	width: 100%;
	height: 40px;
	background-color: rgba(255, 153, 85, 1);  /* orange */
	padding: 0.625em 1.25em .5em 1.25em;
}

/* Flex-Container erstellen und Kindelemente an beiden Rändern ausrichten */
#footercontent {
	display: flex;
	justify-content: space-between;
}

#footer_menue_items {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;	
	flex-direction: row; /* Default: nebeneinander, column = untereinander */
}

/* Außenabstand der Kindelemente entfernen und Farbe ändern */ 
#footer_menue {
	margin: 0;
	color: rgba(255, 238, 170, 1); /* helles gelbbraun */
}

/* Gestaltung der Liste */
#footer_menue_items li {
	white-space: nowrap;	/* kein automatischer Zeilenumbruch */
	margin-right: 20px;
	padding: 0;
	font-weight: bold;
}

#copyright {
	margin-top: auto;
	color: rgba(255, 238, 170, 1); /* helles gelbbraun */
}

/* Gestaltung der Links */
footer a {
	text-decoration: none;
	color: rgba(212, 0, 0, 1); /* dunkelrot */
}
footer a:focus,
footer a:hover,
footer a:active {
	color: rgba(255, 238, 170, 1);  /* helles gelbbraun */
}


/* ************************************************************* */
/* ------------------------------------------------------------- */
/* Main: Anzeigebereich für die einzelnen Menü-Punkte            */
/* ------------------------------------------------------------- */

main {
	width: 100%;
	height: auto;
	background-color: rgba(255, 238, 170, 1);  /* helles gelbbraun */
	margin-top: 0.625em;
	margin-bottom: 0.625em;
	padding: 1.25em;
	font-size: 1.1em;
}

/* Überschriften */
main h1 {
	font-size: 1.5em;
	color: black;
	margin: 0;
	padding-bottom: .3em;
}

main h2 {
	font-size: 1.4em;
	margin: 0;
	padding-bottom: .3em;
}

main h3 {
	font-size: 1.2em;
	padding: 0;
	margin-top: 15px;
}

main a {
	text-decoration: underline;
	color: rgba(255, 127, 42, 1); /* dunkel orange */ 
}

/* Änderung der Links bei hover, focus */
main a:focus,
main a:hover,
main a:active {
	text-decoration: none;
	color: rgba(255, 102, 0, 1); /* sehr dunkles orange */
}

main > section > article {
	display: flex;
	flex-direction: row;
	position: relative; /* needed for absolute pos of #whenpricewhere*/
} 

main > section > article > div:first-of-type {
	flex: 1;
}

main > section > article > div:last-of-type {
	flex: 6;
}

main section {
	height: 100%;
	margin-bottom: 1.5em;
}

main div#mittig {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

/* Container mit Bild */
main div.bildlinks,
main div.bildoben {
	width: 100%;
	height: auto;
	position: relative;
	margin: 0;
}

main div.bildoben {
	display: flex;
	justify-content: center;
}

/* Gestaltung der Bilder */
main div.bildlinks img {
	display: block;
	width: auto;
	height: 350px;
	padding-right: 1em;
	margin-bottom: 1em;
}

main div.bildoben img {
	display: block;
	width: 50%;
	padding-bottom: 1em;
}

main div.bildlinks figure,
main div.bildlinks figcaption,
main div.bildoben figure,
main div.bildoben figcaption {
	padding: 0;
	margin: 0;
}

main div.bildlinks figcaption {
	padding-right: 1em;
}

main div.bildoben figcaption {
	padding-bottom: 1em;
}

/* Gestaltung der Texte */
main p,
main ul {
	line-height: 1.7em;
	margin: 0;
	padding-bottom: 1em;
}

/* ------------------------------------------------------------- */
/* Main: Anzeige des Konzert-Kalenders                           */
/* ------------------------------------------------------------- */

.eventcalendar {
	margin-bottom: 10px;  /* 40px? */
	clear: both;
	padding-top: 0;
}

.event-block {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	height: 100%;
}

.event-block span {
	background-color: rgba(255, 153, 85, 0); /* orange undurchsichtig */
	padding: 5px;   /* 15px? */
}

.event-item{
	background-color: rgba(255, 246, 213, 1); /* beige */
	margin-bottom: 5px;   /* 10px? */
	width: 49%;
}

.event-item aside{
	/* display: inline-block; */ /* AM&FT 07.08.2025 */
	display: block;
	width: 100%;	
		
	vertical-align: top;
	background-color: rgba(255, 153, 85, 1); /* orange */
	color: rgba(255, 238, 170, 1); /* helles gelbbraun */
	text-align: center;
}

.event-item .datum {
	display: block;
	padding-top: .3em;     /* .6em? */
	padding-bottom: .3em;  /* .5em? */
	font-size: 1.2em;
	font-weight: bold;
}

.event-item article{
	display: inline-block;
	padding: 2% 2% 2% 2%;
	width: 100%;
	background-color: rgba(255, 246, 213, 1); /* beige */
}

.event-item article h2 {
	font-size: 1.0em;  /* 1.2px? */
	color: rgba(255, 127, 42, 1); /* dunkel orange */
	margin-bottom: 5px;  /* 15px? */
	padding: 0px;
}

.event-item h3 {
	font-size: 0.9em;
	color: rgba(255, 238, 170, 1); /* helles gelbbraun */
	/* color: rgba(255, 127, 42, 1); */ /* dunkel orange */
	margin-top: 0px;  /* 15px? */
	margin-bottom: 0px;  /* 15px? */
	padding: 0px;
}
.event-item article h2 a,
.event-item article a {
	font-size: 0.9em;
	color: rgba(255, 127, 42, 1); /* dunkel orange */
	text-decoration: underline;
	margin-top: 5px;
	margin-bottom: 5px;
}

.event-item article a {
	color: rgba(212, 0, 0, 1); /* dunkelrot */
}

.event-item article h2 a:focus,
.event-item article a:focus,
.event-item article h2 a:hover,
.event-item article a:hover,
.event-item article h2 a:active,
.event-item article a:active {
	color: rgba(255, 102, 0, 1); /* sehr dunkles orange */
	text-decoration: none;
}

.event-item article > a > span {
	padding: 0;
	white-space: nowrap;
}


/* ------------------------------------------------------------- */
/* Main: Anzeige Info/Reservierungs-Blockes zu einem Konzert     */
/* Main: Anzeige des Kontakt-Formulars zum Menü-Punkt Kontakt    */
/* ------------------------------------------------------------- */

.event-aside{
	height: 280px;
}

#whenpricewhere thead{
	color: rgba(255, 127, 42, 1); /* dunkel orange */
}

#whenpricewhere{
	margin-top:50px;
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width:97%;
	position:relative;
	bottom:0;
}

.eventcalendar .signup{
	width: 100%;
	background-color: rgba(255, 246, 213, 1); /* beige */
}

.eventcalendar .signup ul{
	padding: 5px 5px 5px 7px ;
	margin: 10px;
	list-style: none;
}

.eventcalendar .signup ul li{
	margin-bottom: 5px;
}

.eventcalendar .signup section {
	display: flex;
	flex-direction: row;
}

.eventcalendar .signup section > article {
	padding: 0 1em 0 1em;
}

.eventcalendar .signup section > aside {
	flex: 1;
	padding-right: 1em;
}

.eventcalendar .signup section > article {
	flex: 7;
}

/* Gestaltung der Formulare Registrierung und Kontakt */
.eventcalendar .signup #anmeldeForm {
	width: 100%;
	padding: 5px;
	margin-bottom: 20px;
}

.eventcalendar .signup input[type="text"],
.eventcalendar .signup input[type="email"],
.contact input[type="email"] {
	width: 25%;
}

.eventcalendar .signup input[type="text"],
.eventcalendar .signup input[type="email"],
.eventcalendar .signup select,
.contact input[type="email"],
.contact select {
	height: 30px;
	margin: .5em 1em .5em 0;
}

.eventcalendar .signup input[placeholder],
.eventcalendar .signup select,
.contact input[type="email"],
.contact select {
	font-size: 1em;
}

.eventcalendar .signup input[type="text"],
.eventcalendar .signup input[type="email"],
.contact input[type="email"] {
	background-color: rgba(255, 246, 213, 1);  /* beige */
	border-bottom: 2px dotted rgba(255, 153, 85, 1); /* orange */
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
}

.eventcalendar .signup select,
.contact select {
	background-color: rgba(255, 230, 128, 1);
}

.contact textarea {
	background-color: rgba(255, 246, 213, 1); /* beige */
}

.eventcalendar .signup select,
.contact select,
.contact textarea {
	border: 2px solid rgba(255, 153, 85, 1); /* orange */
}

.contact input[type="email"],
.contact select,
.contact textarea {
	display: block;
}

.eventcalendar .signup label {
	margin: .3em;
}

.eventcalendar .signup label span {
	margin-left: .3em;
}

.eventcalendar .signup select {
	margin-left: .5em;
}

.contact div {
	margin-bottom: 1em;
}

.contact div p {
	padding: 0;
	margin: 0;
}

.contact textarea {
	width: 30rem;
	height: 10rem;
	font-family: Arial, Calibri, sans-serif;
	font-size: 1.1em;
}

.eventcalendar .signup input[type="submit"],
.contact input[type="submit"] {
	padding: .4em .8em;
	margin-top: .5em;
	margin-right: .5em;
	background: rgba(255, 153, 85, 1) linear-gradient(rgba(255, 230, 213, 1), rgba(255, 153, 85, 1)); 
	/* orange,  helles rosa, ???? */
	border: 2px solid rgba(255, 153, 85, 1); 
	border-radius: 10px;
	box-shadow: 0 5px 10px white inset;
	color: rgba(212, 0, 0, 1); /* dunkelrot */
	font-size: 1em;
	font-weight: bold;
	transition: all .25s ease-in;				/* Farbänderung bei :hover oder :focus um 0.25 Sekunden verzögert */
	cursor: pointer;
}

/* Änderung der Schriftfarbe und des Hintergrunds der Buttons bei hover, focus */
.eventcalendar .signup input[type="submit"]:focus, 
.eventcalendar .signup input[type="submit"]:hover,
.eventcalendar .signup input[type="submit"]:active,
.contact input[type="submit"]:focus,
.contact input[type="submit"]:hover,
.contact input[type="submit"]:active {
	background: rgba(255, 153, 85, 1) linear-gradient(rgba(255, 153, 85, 1), rgba(255, 230, 213, 1)); 
	/* orange, helles rosa, ???? */
	border: 2px solid rgba(255, 230, 213, 1);  /* helles rosa */
	box-shadow: 5px 5px 5px rgba(255, 153, 85, 1);  /* orange */
	color: rgba(240, 0, 0, 1); /* leuchtendes rot */
}

/* Image next the text for the articles with one single image on the left added 16.07.2025 Agathe */
/* for some reason this is not found */
.flex_article{
		display: flex;
		flex-direction: row;
    	align-items: flex-start;
    	text-align: left;
		gap: 1rem;
		color: blue; /*just to test - the color of the text should change but it does not */
	}

/* ******************************************************************************* */
/* ------------------------------------------------------------------------------- */
/* RESPONSIVE DESIGN - Darstellung auf verschiedenen Viewports (Bildschirmbreiten) */
/* ------------------------------------------------------------------------------- */

/* ---------- Große Breite, mindestens 1025px (Laptop) ---------- */

@media screen and (min-width: 1025px) {
	#header_menue_items {
		flex-direction: row;	/* Änderung auf horizontale Darstellung innerhalb einer Reihe */
	}
	
	#header_menue_items li {	/* bekommt wieder "normale" Schriftgröße */
		flex: 1;
		font-size: 1em;
	}
}

/* ---------- Mittlere Breite, mindestens 813px (Tablet quer) ---------- */

@media screen and (min-width: 813px) {
	#header_menue_items li {
		flex: 1;
		font-size: 1em;
	}
}

/* ---------- Mittlere Breite, mindestens 569px (Tablet hoch) ---------- */

@media screen and (min-width: 569px) {
	#header_menue_items li {	
		flex: 1;
		font-size: 1em;
	}
}


/* ------------------------------------------------------------------------------- */
/* Darstellung auf kleinen Bildschirmen (komplett) */
/* ------------------------------------------------------------------------------- */

@media screen and (max-width: 1200px) {

	body {
		background-image: none; 
		background-color: rgba(255, 246, 225, 1); /* sehr helles rosa */
	}
	
	header {
		height: 100%;
	}
	
	/* sprache_switch ?
	#headercontent p:nth-of-type(4) { 
		display: none;
	}
	*/
		
	#headerlogo { 
		width: 80%;
	}
	
	/* *************************************************************** */
	
	/* Navigation */
	nav {
		width: auto;
		display: block !important;
	}

	#header_menue_items li {
		width: auto;
		padding: 0;
	}
	
	#header_menue_items {
		display: flex;
		width: auto;
		border-radius: 4px;
		position: relative;
		padding-top: 0;
		padding-bottom: 0;
	}
	
	#header_menue_items {
		flex-direction: row;
	}
			
	/* Inhalt */
	main h1,
	main h2,
	main h3,
	main ul,
	main p {
		font-size: 110%;
		z-index: 1;
	}
	
	.eventcalendar .signup input[type="text"],
	.eventcalendar .signup input[type="email"],
	.eventcalendar .signup section aside,
	.contact input[type="email"],
	.contact textarea {
		width: 40%;
	}
	
	/* Fußbereich */	
	footer {
		height: 100%;
	}
	
	#footer_menue_items li:nth-of-type(1),
	#footer_menue_items li:nth-of-type(2),
	#footer_menue_items li:last-of-type {
		margin-right: 2em;
	}
}

/* ********************************************************************* */
/* --------------------------------------------------------------------- */
/* Große Breite, höchstens 1200px (Laptop)                               */
/* --------------------------------------------------------------------- */

@media screen and (max-width: 1200px) {
	#headertitle {
		font-size: 180%;
		padding: 0 20px 0 20px;
		white-space: pre-wrap;
	}
	
	/* Bilder stehen links neben Text*/
	main > section > article > div:first-of-type {
		width: 120%;
	}

	main div.bildlinks,
	main div.bildoben {
		width: auto;
		z-index: 1;
	}
	
	main div.bildlinks figcaption,
	main div.bildoben figcaption { 
		font-size: 110%;
	}
		
	/* Größe der Artikelbilder */ 
	main div.bildlinks img {
		height: 300px;
	}	
	
	main div.bildoben img {
		width: 80%;
		z-index: 1;
	}
}

/* --------------------------------------------------------------------- */
/* Mittlere Breite, höchstens 992px (Tablet quer)                        */
/* --------------------------------------------------------------------- */

@media screen and (max-width: 992px) {
	#headertitle {
		font-size: 140%;
		padding: 0 18px 0 18px;
	}
	
	label.hamburgerer { 
	   display: none;
	}
	
	#header_menue_items {
		background-color: none;
	}
		
	#header_menue_items li {	
		margin: .3em;
	}
	
	main div.bildoben,
	main div.bildoben img {
		width: 100%;
		z-index: 1;
	}
	
	.event-block {
		flex-direction: column;
		height: 100%;
	}
	
	.event-item {
		width: 100%;
	}
	
	.event-item article h2,
	.event-item article h3,
	.event-item article a {
		font-size: 100%;
	}
	
	.event-item aside {
		padding: auto;
	}
	
	.event-item article {
		height: 100%;
	}
	
	/* Größe des input-Feldes und der textarea anpassen */
	.eventcalendar .signup input[type="text"],
	.eventcalendar .signup input[type="email"],
	.contact input[type="email"],
	.contact textarea {
		width: 50%;
	}
	
	.eventcalendar .signup section > article {
		padding-right: 1em;
	}
	
	.eventcalendar .signup section aside img {
		height: 100%;	
	}	
}

/* --------------------------------------------------------------------- */
/* Mittlere Breite, höchstens 768px (Tablet hoch)                        */
/* --------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
	#headertitle {
		font-size: 132%;
	}
	
	#header_menue_items {
		display: block;
		width: auto;
		max-height: 0;  
		overflow: hidden;
		border-radius: 4px;
		position: relative;
		float: right;
		padding-top: .4em;
		padding-bottom: .4em;
	}
		
	nav a {
		border: 0;
		background: none;
	}
	
	/* Änderung des Hintergrunds der Buttons bei hover, focus */
	nav a:focus,
	nav a:hover,
	nav a:active {
		background: none;
		box-shadow: 0 5px 10px white inset;
	}
	
	/* Hamburger */
	label.hamburger { 
	   display: block;
	   width: 75px; 
	   height: 50px; 
	   background: rgba(255, 221, 85, 1); /* mattes gelb */
	   position: relative; 
	   margin-left: auto; 
	   border-radius: 4px; 
	}
		
	.line { 
	   position: absolute; 
	   left:10px;
	   width: 55px; 
	   height: 4px; 
	   background: rgba(255, 246, 213, 1); /* beige */
	   border-radius: 2px;
	   display: block; 
	   transition: 0.5s; 
	   transform-origin: center; 
	}

	.line:nth-child(1) { top: 12px; }
	.line:nth-child(2) { top: 24px; }
	.line:nth-child(3) { top: 36px; }

	#hamburger:checked + .hamburger .line:nth-child(1){
	   transform: translateY(12px) rotate(-45deg);
	}

	#hamburger:checked + .hamburger .line:nth-child(2){
	   opacity:0;
	}

	#hamburger:checked + .hamburger .line:nth-child(3){
	   transform: translateY(-12px) rotate(45deg);
	}

	#hamburger:checked ~ ul {
		max-height: 900px;
		overflow: visible;
		background-color: rgba(255, 221, 85, 1); /* mattes gelb */
		z-index: 3;	
	}
	
	main div.bildoben,
	main div.bildoben img {
		width: 100%;
		z-index: 1;
	}
	
	.eventcalendar .signup section aside img {
		height: 100%;	
	}
	
	.eventcalendar .signup section > article {
		font-size: 96%;
	}

	#footer_menue_items {
		display: block;
		width: auto;
		border-radius: 4px;
		position: relative;
		padding-top: .4em;
		padding-bottom: .4em;
		flex-direction: column;
	}
	
	footer li:nth-of-type(1),
	footer li:nth-of-type(2) {
		margin-bottom: 8px;
	}
	
	/* Gestaltung der Links bzw. Buttons */
	footer a {
		display: block;
		padding: .5em 1em .5em 1em;
		border: 0;
		background: none;
		border-radius: 10px;
		box-shadow: 0 5px 10px white inset;
		color: rgba(212, 0, 0, 1); /* dunkelrot */
	}
	/* Image on top of the text for the articles with one single image on the left added 16.07.2025 Agathe */
	.flex_article{
		display: flex;
		flex-direction: column;
    	align-items: left;
    	text-align: left;
	}
	
}
	
/* --------------------------------------------------------------------- */
/* kleine Breite, höchstens 600px (Smart phones)          Agathe 16.07.2025               */
/* Image on top of the text for the articles with one single image on the left added 16.07.2025 Agathe */
/* --------------------------------------------------------------------- */

@media screen and (max-width: 600px) {
	.flex-article{
		display: flex;
		flex-direction: column;
    	align-items: left;
    	text-align: left;
	}
	 /* Artikelbilder eventuell aendern, da si so schmall erscheinen selector: main div.bildlinks img */ 
	

}