/* Regen-Balkendiagramm (Tagesniederschlag, Monatsauswertung daten/d_monat.php) */

.regen-chart {
	margin: 24px 0 8px 0;
	padding: 0;
	font-size: 8pt;
	color: #3c5a4e;
}

.regen-chart figcaption {
	font-weight: bold;
	margin-bottom: 10px;
}

.regen-chart-panel {
	display: flex;
	align-items: stretch;
	margin-bottom: 20px;
}

/* Skalenbeschriftung (y-Achse), außerhalb des scrollbaren Balkenbereichs,
   damit sie beim horizontalen Scrollen sichtbar bleibt */
.regen-chart-axis {
	flex: 0 0 40px;
	width: 40px;
	list-style: none;
	margin: 0;
	padding: 10px 6px 0 0;
	position: relative;
	height: 220px;
	box-sizing: content-box;
	font-size: 7pt;
	color: #777777;
}

.regen-chart-axis li {
	position: absolute;
	left: 0;
	right: 6px;
	margin: 0;
	padding: 0;
	text-align: right;
	transform: translateY(50%);
}

.regen-chart-area {
	flex: 1 1 auto;
	min-width: 0;
	position: relative;
	height: 220px;
	padding-top: 10px;
	overflow: visible;
	border-left: 1px solid #a1b6af;
	border-bottom: 1px solid #a1b6af;
}

.regen-chart-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	left: 0;
	right: 0;
	top: 10px;
	bottom: 0;
}

.regen-chart-grid li {
	position: absolute;
	left: 0;
	right: 0;
	border-top: 1px solid #e1e8e5;
	margin: 0;
	padding: 0;
}

.regen-chart-bars {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	left: 0;
	right: 0;
	top: 10px;
	bottom: 0;
	display: flex;
	align-items: flex-end;
}

.regen-chart-bars li {
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
	position: relative;
	margin: 0 1px;
	text-align: center;
}

.regen-chart-bars .bar {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #297c3f;
	border-radius: 4px 4px 0 0;
}

.regen-chart-bars .bar--ueber100 {
	background-color: #a12d2d;
}

.regen-chart-tag {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1.6em;
	font-size: 7pt;
	color: #777777;
}

/* Bei schmalen Ansichten würden 31 Tageszahlen nebeneinander kollidieren;
   ohne Scrollbereich bleibt jede 5. Beschriftung sichtbar, Datum/Wert je
   Balken bleiben trotzdem über title-Attribut und sr-only-Text erreichbar */
@media (max-width: 560px) {
	.regen-chart-bars li:not(:nth-child(5n+1)) .regen-chart-tag {
		display: none;
	}
}

.regen-chart-legende {
	margin: 6px 0 0 0;
	font-size: 7pt;
	color: #777777;
}

/* Temperatur-Liniendiagramm (Minimum/Mittel/Maximum, Monatsauswertung daten/d_monat.php) */

.temp-chart {
	margin: 24px 0 8px 0;
	padding: 0;
	font-size: 8pt;
	color: #3c5a4e;
}

.temp-chart figcaption {
	font-weight: bold;
	margin-bottom: 10px;
}

.temp-chart-legende {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0 0 8px 0;
	padding: 0;
	font-size: 7pt;
	color: #3c5a4e;
}

.temp-chart-legende li {
	display: flex;
	align-items: center;
	gap: 4px;
}

.temp-swatch {
	display: inline-block;
	width: 14px;
	height: 3px;
	border-radius: 1px;
}

.temp-legende-max .temp-swatch {
	background-color: #eb6834;
}

.temp-legende-mittel .temp-swatch {
	background-color: #1baf7a;
}

.temp-legende-min .temp-swatch {
	background-color: #2a78d6;
}

.temp-chart-svg {
	display: block;
	width: 100%;
	height: auto;
}

.temp-chart-grid {
	stroke: #e1e8e5;
	stroke-width: 1;
}

.temp-chart-grid--null {
	stroke: #a1b6af;
}

.temp-chart-achse,
.temp-chart-daylabels text {
	font-size: 9px;
	fill: #777777;
}

.temp-chart-linie {
	fill: none;
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.temp-linie-max {
	stroke: #eb6834;
}

.temp-linie-mittel {
	stroke: #1baf7a;
}

.temp-linie-min {
	stroke: #2a78d6;
}

/* Bei schmalen Ansichten würden 31 Tageszahlen nebeneinander kollidieren */
@media (max-width: 560px) {
	.temp-chart-daylabels text:not(:nth-child(5n+1)) {
		display: none;
	}
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Tabellen-Layout daten/d_monat.php (ersetzt veraltete width/border/cellspacing/
   cellpadding/align/valign/height-Attribute aus der Tages- und Monatstabelle) */

.monat-tabelle {
	width: 100%;
	border-collapse: collapse;
}

.monat-tabelle td,
.monat-tabelle th {
	border: 1px solid #000000;
	padding: 2px;
}

.monat-tabelle-innen {
	width: 100%;
	border-collapse: collapse;
}

.monat-tabelle-innen td,
.monat-tabelle-innen th {
	padding: 5px;
}

.monat-tabelle-innen col:nth-of-type(1) {
	width: 150px;
}

.monat-tabelle-innen col:nth-of-type(2) {
	width: 300px;
}

.monat-tabelle-innen col:nth-of-type(3) {
	width: 200px;
}

.va-top {
	vertical-align: top;
}

.ta-right {
	text-align: right;
}