/* **************************************************************************

   Style Sheet für die Webseite www.ggfu.de

   Projektstart: 25.11.2024 - Georg Furler
   Version vom:  21.03.2025 / ggfu

   ************************************************************************** */
 
/* ==========================================================================
   Globale Definition im „body“ Element der Webseite
   ========================================================================== */
body {
	/*margin: 0;*/
	display: grid;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	margin: 0 auto;   /* Kein Rand oben und unten, recht und links wird zentriert */
	min-width: 13em;  /* Minimalbreite der Seite: 13em [208px]. Weniger macht keinen Sinn! */
	max-width: 200em; /* Maximalbreite der Seite: 200em [3200px]. Ab dann entsteht ein rechter und linker Rand */
}

/* ==========================================================================
   Definitionen für die zentrale obere graue Menüleiste
   ========================================================================== */
/* --------------------------------------------------------------------------
	Diese Definitionen gelten für alle (größeren) Auflösungen, bei denen die
   Hauptmenü Items permanent angezeigt werden können.
   -------------------------------------------------------------------------- */
header {
	grid-column: 1 / -1;
	background-color: gray;        /* Grauer Headerbalken */
	width: 100%;
	float: left;
	border-bottom: 1px solid black;
}
#bereichlogo {
	color: white;
	background-color: limegreen;   /* Grüner Startseite Button */
	display: block;
	padding: 0.5em 0.2em 0.5em 0.2em;
	text-decoration: none;
	float: left;
	width: auto;
}
.menue-button {
	/* Wird in Mediaquery für Hamburgermenue geändert */
	display: none;
}
#steuerung {
	/* Wird in Mediaquery für Hamburgermenue geändert */
	float: right;
}
#steuerung ul {
	/* Wird in Mediaquery für Hamburgermenue geändert */
	margin-top: 0;
	padding: 0;
}
#steuerung li {
	/* Wird in Mediaquery für Hamburgermenue geändert */
	margin-top: 0;
	list-style: none;
	float: left;
}
#steuerung li li {
	float: none;
}
#steuerung li a, #steuerung li summary {
	display: block;
	height: 100%;
	padding-top: 0.5em;
	padding-right: 0.4em;
	padding-bottom: 0.5em;
	text-decoration: none;
	color: white;
	background-color: gray;
}
#steuerung li li a {
	border-top: 2px solid silver;
	padding-right: 0em;
	float: left;
	width: 100%;
}
#steuerung a:hover, #steuerung summary:hover {
	color: black;
	background: orange;
}	

/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
#nav-menue:target #steuerung {
	display: block;
}
/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */
#nav-menue:target .menue-button-beschr-open {
	display: none ; 
}

/* -------------------------------------------------------------------------- 
   Mediaquery für die Umschaltung des permanet anzeigten Hauptmenu auf das
   Hamburgermenü, weil es nicht mehr in die zentrale obere graue Menüleiste
   passt. Dieser Breakpoint ist direkt abhängig von der Anzahl und damit der
   Breite des Hauptmunüs. Dieser Breakpoint ist nur für die obere Menüleise
   gedacht und muss nicht zwingend mit einem der anderen Breakpoints für
	diese Webseite übereinstimmen!
   Derzeit wird bei der Auflösung zwischen 0em und 27em [432px] auf das
	Hamburgermenü umgeschaltet.
   Es werden die Menüteste ausgeblendet, und dafür die Buttons oben rechts
   zum Öffnen und Schließen des Hamburgermenüs eingeblendet.
   -------------------------------------------------------------------------- */
@media only screen and (width <= 24em) {

	/* --------------------------------------------------------------------------
		Diese Definitionen der Menüleiste werden hier für das Hamburgermenü
	   in diese Auflösung geändert
		-------------------------------------------------------------------------- */
	.menue-button {
		display: block;
		position: absolute;
		right: 0;
		/*top: 0;*/
		padding: 0.5em;
		cursor: pointer;
		text-decoration: none;
		color: white;
		background-color: darkblue;
	}	
	#steuerung {
		float: left;
		width: 100%;
		display: none;
	}	
	#steuerung li {
		width: 100%;
		border-bottom: 2px solid silver;
	}
	#steuerung ul {
		border-top: 2px solid silver;
	}

	/* --------------------------------------------------------------------------
		Diese Definitionen der Menüleiste gelten nur für das Hamburgermenü
		-------------------------------------------------------------------------- */

	#steuerung ul ul {
		padding-left: 1em;
		border-top: 0;
	}
	.menue-button:hover {
		color: black;
		background: orange;
		text-decoration: none;
	}
}


/* ==========================================================================
   Allgemein Seitendefinitionen: Artikel, Absatz, Überschriften, ...
   ========================================================================== */

article {
	padding: 0.1em;
	float: left;
	overflow: auto;
	/* width: 100%; */
}
p {
	margin-top: 0.3em;
	margin-bottom: 0.3em;
}
h1 {
	font-size: larger;
	font-weight: bold;
	margin-top: 0.5em;
	margin-bottom: 0.3em;
	/*word-spacing: -0.2em;*/
}
h2 {
	font-size: large;
	font-weight: bold;
	margin-top: 0.5em;
	margin-bottom: 0.3em;
}
h3 {
	font-size: medium;
	font-weight: normal;
	margin-top: 0.5em;
	margin-bottom: 0.3em;
	text-decoration: underline;
}
/* Definitionen für Hover-Effekte der klassinschen Links */
a:hover, a:focus {
	text-decoration: underline double skyblue;
}
/* footer {
	grid-column: 1 / -1;
} */


 
/* ==========================================================================
   Definition für das Linkmenu (<article class="menue">)
   ========================================================================== */

.menue {
	background-color: lightgray;
	overflow: hidden;
	/*white-space: nowrap;*/
	/*text-overflow: ellipsis;*/
}
.menue ul {
	margin: 0;
	padding: 0;
	display: block;
	/*height: 100%;*/
	/*padding-top: 0.3em;*/
	/*padding-right: 0.4em;*/
	/*padding-bottom: 0.3em;*/
	text-decoration: none;
	/*color: white;*/
	/*background-color: gray;*/
	/*white-space: nowrap;*/
	/*overflow: hidden;*/
	/*text-overflow: ellipsis;*/
}
.menue details details {
	padding-left: 1em;
}
.menue details details li {
	padding-left: 1em;
}
.menue details details details li {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.menue li, .menue summary {
	list-style-type: none;
}
.menue li:first-child {
	margin-top: 0.4em;
}
.menue li li:first-child {
	margin-top: 0;
}
.menue li a, .menue li summary {
	/*white-space: nowrap;*/
	/*overflow: hidden;*/
	/*text-overflow: ellipsis;*/
}
/* ##########
.menue ul li {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}
.menue ul li li {
	list-style-type: square;
}
.menue details details {
	background-color: #eee;
	margin-left: 1em;
}
########## */


 
/* ==========================================================================
   Definitionen für die Kinoseiten
   ========================================================================== */

/* --------------------------------------------------------------------------
   Definition für die Kino Seite mit der Filmbeschreibung
   (<article class="kino_artikel">)
   -------------------------------------------------------------------------- */

/* class="vorschau" bestimmt das Aussehen und Format des Vorschaubildes eines Filmplakates */
.kino_artikel {
}
.kino_artikel img {
	/* Gilt für große Auflösungen. Wird in Mediaquery für kleinere Auflösungen geändert */
	margin-bottom: 0.5em;
	margin-right: 0.5em;
	margin-top: 0;
	width: 33.333333%;
	height: auto;
	float: left;
}
.kino_artikel dl.margin_top {
	margin-top: 0.5em
}
.kino_artikel dl {
	display: grid;
	grid-template-columns: 1fr 2fr;
	margin-top: 0;
	margin-bottom: 0;
}
.kino_artikel dt {
	font-weight: bold;
	margin-left: 0;
	grid-column-start: 1;
}
.kino_artikel dd {
	align-self: end;
	margin-left: 0.5em;
	grid-column-start: 2;
}
.kino_artikel ul {
	margin-top: 0;
	margin-bottom: 0;
}
.kino_artikel h2 {
	clear: left;
}
.kino_artikel video {
	/*margin-top: 0.5em;*/
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   Definition für die Kinoposter Seite (Großansicht)
  (<article class="kino_poster">)
   -------------------------------------------------------------------------- */
.kino_poster {
}




/* ==========================================================================
   Definitionen für die Wetterseiten
   ========================================================================== */


/* --------------------------------------------------------------------------
   SVG Stuff
   -------------------------------------------------------------------------- */

.container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	/*max-width: 654px;*/
	/*max-height: 464px;*/
}

.diagramm {
	/*border: 1px dotted red;*/
	border: none;
	text-align: center;
	margin: 3em 0.3em 0 0;
	padding: 0em;
	width:100%;
	max-width: 656px;

	/* font-weight: bold; */
	/*flex-basis: 656px;*/
	/*flex: auto;*/
}

.thermometer {
	height: auto;
	flex: auto;
	text-align: center;
	margin: 2em 0.1em 0 0;
}

/* --------------------------------------------------------------------------
   Thermometer
   -------------------------------------------------------------------------- */

.svg_thermometer {
	width: 96px;
}
.celsius{
	font-size: 50px;
	text-anchor: middle;
	fill: black;
	font-family: serif;
}
.temperaturen {
	font-size: 40px;
   /*font-family: sans-serif;*/
	text-anchor: middle;
}
.plus {
   /*stroke: black;*/
   fill: black;
}
.minus {
	/*stroke: red;*/
	fill: red;
}
.gradmarken {
	stroke:black;
	stroke-width: 1;
}
.zehner {
	stroke-width: 2;
}
.thermo {
	stroke: black;
	stroke-width: 2;
	stroke-miterlimit: 4;
	stroke-opacity: 1;
	stroke-dasharray: none;
}
.umrandung {
	fill: none;
}
.fuellung {
	fill: red;
	fill-opacity: 1;
}

.ort {
	font-weight: bold;
	font-size: medium;
}
.beschreibung {
	margin-top: 0em;
	margin-bottom: 0em;
	font-size: small;
}
.wert {
	margin-top: 0em;
	margin-bottom: 0.4em;
	font-size: medium;
	font-weight: bold;
}

/* --------------------------------------------------------------------------
   Liniendiagramme
   -------------------------------------------------------------------------- */

.graph .labels.x-labels {
	text-anchor: middle;
}

.graph .labels.y-labels {
	text-anchor: middle;  /* start | middle | end | inherit */
}

.graph {
	/*max-width: 100vw;*/
	/*max-height: 100vh;*/
	max-width: 654px;
	max-height: 464px;
	/*height: 100%;*/
	/*width: auto;*/
}

.graph .grid {
	stroke: black;
	stroke-opacity: 1;  /* Damit Texte unter den Daten sichtbarbleiben */
	stroke-dasharray: 0;
	stroke-width: 1;
}

.labels {
	font-size: medium;
}

.label-title {
	font-weight: bold;
	font-weight: normal;
	font-size: medium;
	fill: black;
}

.data {
	fill: yellow;
	/*stroke-width: 0.5;*/
	/*stroke-opacity: 0*/
}




 
/* ==========================================================================
   Mediaqueries bestimmen das Seitenlayout der Webseite für unterschiedliche
   Auflösungen, die sogenannten Breakpoints
   ========================================================================== */

/* Die Starseite hat kein Untermenü und ist somit immer einspaltig */
.start_seite {
	grid-template-columns: 1fr;    /* einspaltiges Layout */
}

/* --------------------------------------------------------------------------
   Mediaquery für Aüflösungen von 0em bis 30em [480px]
   -------------------------------------------------------------------------- */

@media only screen and (width <= 30em) {

	#bereichlogo::after { content: "1" } /* Aktuelle Mediaquery/Breakpoint anzeigen */
	/* ❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾ ❿ — * ➀ ➁ ➂ ➃ ➄ ➅ ➆ ➇ ➈ ➉ — ➊ ➋ ➌ ➍ ➎ ➏ ➐ ➑ ➒ ➓ */
	/* Altenativ: \10102; bis \10111; — \10112; bis\10121; — \10122; bis \10131; */
	
	.kino_artikel img {
		width: 100%;
		margin-right: 0;
		/*height: auto;*/
		float: none;
	}

	.wetter_seiten, .kino_seiten, .rezepte_seiten, .impressum_seiten {
		grid-template-columns: 1fr;    /* einspaltiges Layout */
	}

}

/* -------------------------------------------------------------------------- 
   Mediaquery für Aüflösungen von größer 30em bis 48em [768px]
   -------------------------------------------------------------------------- */
@media only screen and (30em < width <= 48em) {

	#bereichlogo::after { content: "2"; } /* Aktuelle Mediaquery/Breakpoint anzeigen */

	.wetter_seiten, .kino_seiten, .rezepte_seiten, .impressum_seiten {
		grid-template-columns: 1fr;    /* einspaltiges Layout */
	}

}

/* -------------------------------------------------------------------------- 
   Mediaquery für Aüflösungen von größer als 48em bis 69em [1104px]
   -------------------------------------------------------------------------- */
@media only screen and (48em < width <= 69em) {

	#bereichlogo::after { content: "3"; } /* Aktuelle Mediaquery/Breakpoint anzeigen */

	/* zweispaltiges Layout: zwei zu eins */
	.wetter_seiten, .kino_seiten, .rezepte_seiten, .impressum_seiten {
		grid-template-columns: 2fr 1fr;
	}

}

/* -------------------------------------------------------------------------- 
   Mediaquery für Aüflösungen von größer als 69em bis 92em [1472]
   -------------------------------------------------------------------------- */
@media only screen and (69em < width <= 92em) {

	#bereichlogo::after { content: "4"; } /* Aktuelle Mediaquery/Breakpoint anzeigen */

	/* zweispaltiges Layout für Kinoseite: 1 spalte bleibt fix, 2 Spalte wir noch größer */
	.kino_seiten {
		grid-template-columns: 46em auto;
	}
	/* zweispaltiges Layout für Wetter und Rezept Seite: 2 spalte bleibt fix, 1 Spalte wir noch größer */
	.wetter_seiten, .rezepte_seiten, .impressum_seiten {
		grid-template-columns: auto 23em;
	}

}

/* -------------------------------------------------------------------------- 
   Mediaquery für Aüflösungen von größer als 92em [1472]
   -------------------------------------------------------------------------- */
@media only screen and (width > 92em) {

	#bereichlogo::after { content: "5"; } /* Aktuelle Mediaquery/Breakpoint anzeigen */

	/* zweispaltiges Layout für Kinoseite: Beide Spalten werden größer */
	.kino_seiten {
		/* zweispaltiges Layout: eins zu eins */
		grid-template-columns: 1fr 1fr;
	}
	/* zweispaltiges Layout für Wetter und Rezept Seite: 2 spalte bleibt fix, 1 Spalte wir noch größer */
	.wetter_seiten, .rezepte_seiten, .impressum_seiten {
		/* zweispaltiges Layout: eins zu eins */
		grid-template-columns: auto 23em;
	}

}