:root {
	--ui-container-max-width: 840px;
	--ui-popup-max-width: 900px;
	--ui-login-max-width: 400px;
	--ui-box-width: 400px;
	--ui-switch-on-color: green;
	--ui-switch-off-color: #98989e;
}

* {
	box-sizing: border-box;
}

body {
	background-color: #000;
	font-family: "Gabarito", sans-serif;
	margin: 0;
	color: white;
}

#Container {
	max-width: var(--ui-container-max-width);
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
}

#Header {
	position: relative;
	width: 100%;
	color: #ffd900;
}

#Anlagenamen {
	color: #ffd900;
	text-align: center;
}

#Logo {
	height: 100px;
	background-image: url("img/Logo.png");
	background-repeat: no-repeat;
	background-position: center center;
}

#Login label {
	display: block;
	margin-bottom: 10px;
	color: #ffd100;
}

#Login input {
	border: 1px solid white;
	border-radius: 5px;
	margin-bottom: 20px;
	padding: 5px;
	width: 100%;
}

#Login .button {
	background-color: #ffd100;
	margin: 20px auto 0 auto;
	display: block;
	border: none;
	padding: 10px 50px;
	width: auto;
}

.box {
	position: relative;
	background-color: #1c1c1e;
	border: 1px solid #1c1c1e;
	margin: 10px;
	padding: 20px;
	border-radius: 5px;
	flex: 1 1 var(--ui-box-width);
	color: #fff;
}

#CurrentOverview .boxIcon {
	position: absolute;
	top: 50%;
	right: 0px;
	width: 123px;
	aspect-ratio: 1;
	background-image: url("img/Smiley.png");
	background-position: 100% 86%;
	background-repeat: no-repeat;
	background-size: contain;
}

.title {
	color: #71f2ec;
	margin-bottom: 40px;
}

.unit {
	display: inline-block;
	color: #98989e;
}

.number {
	display: inline-block;
	font-size: 130%;
}

.meaning {
	color: #71f2ec;
}

.dataGrid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	width: 100%;
}

#CurrentOverview .dataGrid {
	width: 82%;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

#Solarstrom {
	grid-column: 1 / -1;
	border-right: none;
}

#Solarstrom .meaning {
	color: #ffcb30;
}

#Verbrauch .meaning {
	color: #0d8224;
}

#Eigenverbrauch .meaning {
	color: #ff0000;
}

#Bezug .meaning {
	color: #b8b8b8;
}

#Ruecklieferung .meaning {
	color: gray;
}

.dataCell {
	margin: 10px 0;
	padding-right: 20px;
	min-width: 24%;
}

.dataCell:has(~ .dataCell) {
	border-right: 1px solid #98989e;
	margin-right: 20px;
}

#Eigenverbrauch {
	border: none;
}

#CurrentGraph {
	display: flex;
	flex-direction: column;
}

#CurrentGraph .topIcon {
	position: absolute;
	right: 10px;
	top: 10px;
	width: 25px;
	height: 25px;
	background-color: #1c1c1e;
}

#CurrentGraph .topIcon::after {
	content: "";
	cursor: pointer;
	position: absolute;
	inset: 0;
	aspect-ratio: 1;
	background-color: #98989e;
	/* 1. Für WebKit/Blink (Chrome, Safari, Edge, Android) */
	-webkit-mask-image: url("img/zoom-out.svg");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	/* 2. Offizieller W3C Standard (Zukunftssicherheit) */
	mask-image: url("img/zoom-out.svg");
	mask-size: contain;
	mask-repeat: no-repeat;
	//z-index: 2147483647;
}

#CurrentGraph .backIcon {
	position: absolute;
	left: 10px;
	top: 5px;
	width: 25px;
	aspect-ratio: 1;
	display: block !important;
	background-color: #ffd100;
	/* 1. Für WebKit/Blink (Chrome, Safari, Edge, Android) */
	-webkit-mask-image: url("img/left.svg");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	/* 2. Offizieller W3C Standard (Zukunftssicherheit) */
	mask-image: url("img/left.svg");
	mask-size: contain;
	mask-repeat: no-repeat;
}

#CurrentGraph #Navigation {
	display: none;
}

#CurrentGraph #Navigation {
	position: absolute;
	bottom: 9px;
	left: 20px;
}

#CurrentGraph #Navigation .navRangeInfo {
	white-space: nowrap;
	max-width: 85px;
	min-width: 20px;
	margin-top: 5px;
	text-align: center;
	color: rgb(204, 204, 220);
	font-size: 12px;
}

#CurrentGraph .prevIcon {
	cursor: pointer;
	position: relative;
	width: 25px;
	aspect-ratio: 1;
	display: inline-block !important;
	background-color: #ffd100;
	/* 1. Für WebKit/Blink (Chrome, Safari, Edge, Android) */
	-webkit-mask-image: url("img/left.svg");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	/* 2. Offizieller W3C Standard (Zukunftssicherheit) */
	mask-image: url("img/left.svg");
	mask-size: contain;
	mask-repeat: no-repeat;
}

#CurrentGraph .nextIcon {
	cursor: pointer;
	position: relative;
	width: 25px;
	aspect-ratio: 1;
	display: inline-block !important;
	background-color: #ffd100;
	//margin-left: 20px;
	/* 1. Für WebKit/Blink (Chrome, Safari, Edge, Android) */
	-webkit-mask-image: url("img/right.svg");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	/* 2. Offizieller W3C Standard (Zukunftssicherheit) */
	mask-image: url("img/right.svg");
	mask-size: contain;
	mask-repeat: no-repeat;
}

#CurrentGraph iframe {
	flex-grow: 1;
}

#CurrentGraph .options {
	display: none;
}

#CurrentGraph:fullscreen .options,
#CurrentGraph .options:-webkit-full-screen {
	display: block;
}

#CurrentGraph .option {
	display: inline-block;
	margin-right: 10px;
	cursor: pointer;
	color: #ffd100;
}

.BatteryBox {
	background-image: url("img/battery.png");
	background-repeat: no-repeat;
	background-position: 94% 77%;
	background-size: 8%;
}

.BatteryBox .dataGrid {
	width: 62%;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.CompareBox .progress-ring {
	--p: var(--data);
}

.CompareBox .dataGrid {
	width: 82%;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.ChargerBox {
	background-image: url("img/cog.png");
	background-repeat: no-repeat;
	background-position: calc(100% - 10px) 10px;
	cursor: pointer;
}

.ChargerBox .boxIcon {
	background-color: #98989e;
	position: absolute;
	top: 50%;
	right: 10px;
	width: 66px;
	height: 66px;
	-webkit-mask-image: url("img/household.svg");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-image: url("img/household.svg");
	mask-size: contain;
	mask-repeat: no-repeat;
}

.ChargerBox:hover {
	border-color: #666;
}

.ChargerBox .dataGrid {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.SwitchBox {
	background-image: url("img/cog.png");
	background-repeat: no-repeat;
	background-position: calc(100% - 10px) 10px;
	cursor: pointer;
	//flex: 1 1 190px;
}

.SwitchBox:hover {
	border-color: #666;
}

.SwitchBox .boxIcon {
	position: absolute;
	top: 47px;
	left: 20px;
	background-color: #98989e;
	width: 25px;
	height: 25px;
	-webkit-mask-image: url("img/led.svg");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-image: url("img/led.svg");
	mask-size: contain;
	mask-repeat: no-repeat;
}

.AnlagenBox {
	display: none;
}

#btnAnlageinfo {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 25px;
	aspect-ratio: 1;
	background-color: #98989e;
	/* 1. Für WebKit/Blink (Chrome, Safari, Edge, Android) */
	-webkit-mask-image: url("img/info.svg");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	/* 2. Offizieller W3C Standard (Zukunftssicherheit) */
	mask-image: url("img/info.svg");
	mask-size: contain;
	mask-repeat: no-repeat;
}

iframe {
	border: none;
	width: 100%;
}

#CurrentOverview {
	background-image: url("img/cog.png");
	background-repeat: no-repeat;
	background-position: calc(100% - 10px) 10px;
	cursor: pointer;
}

#SmartLadenStatus {
	margin-top: 10px;
	font-size: 130%;
}

#Selbstversorgungsanzeige,
#Eigenverbrauchsanzeige {
	position: absolute;
	right: 15px;
	top: 32px;
}

/* Die Anzeige-Einheit */
.progress-ring {
	--p: 0;
	--thickness: 13px;
	--color: #4caf50;
	width: 100px;
	height: 100px;
	aspect-ratio: 1;
	border-radius: 50%;
	position: relative;
	display: grid;
	place-items: center;
	/* Der Ring-Verlauf */
	background: conic-gradient(var(--color) calc(var(--p) * 1%), #333 0deg);
}

/* Das "Loch" in der Mitte */
.progress-ring::before {
	content: "";
	position: absolute;
	inset: var(--thickness);
	background-color: #1c1c1e;
	border-radius: 50%;
}

/* Die Prozentzahl im Ring */
.progress-ring::after {
	counter-reset: percent var(--p);
	content: counter(percent) "%";
	position: relative;
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--color);
}

#ButtonGrid {
	width: 100%;
	display: flex;
}

#ButtonGrid .box {
	background-image: url("img/cog.png");
	background-repeat: no-repeat;
	background-position: calc(100% - 10px) 10px;
	flex-basis: 190px;
	cursor: pointer;
}

.systemName {
	color: #71f2ec;
}

.systemStatus {
	color: #fff;
	font-size: 130%;
	line-height: 200%;
	margin-left: 30px;
}

.systemAction {
	color: #fff;
	font-size: 130%;
	line-height: 200%;
}

.tableData {
	display: table-row;
}

.cellName {
	color: #71f2ec;
	font-size: 90%;
	display: table-cell;
	padding-bottom: 6px;
}

.cellData {
	display: table-cell;
	text-align: right;
	font-size: 100%;
	color: white;
}

.break {
	flex-basis: 100%;
}

#Anlageinformation {
	visibility: hidden;
	position: fixed;
	top: 10%;
	left: 0;
	right: 0;
	max-width: 800px;
	margin: 0 auto;
	z-index: 10;
}

#Anlageinformation.active {
	visibility: visible;
}

.popup {
	position: fixed;
	max-width: var(--ui-popup-max-width);
	margin: 0 auto;
	background-color: #1c1c1e;
	right: 0;
	left: 0;
	top: 100%;
	width: 100%;
	background: #000;
	transition: transform 0.4s ease-out;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

#Overlay {
	position: fixed;
	visibility: hidden;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
}

.popup.active {
	/* Schiebt das Element um seine eigene Höhe nach oben */
	transform: translateY(-100%);
}

.popup .settingName:hover,
#ButtonGrid .box:hover,
#CurrentOverview:hover,
#Smartladen:hover {
	border-color: #666;
}

.popup .settingName {
	color: white;
	background-color: #1c1c1e;
	text-align: center;
	text-transform: uppercase;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid #1c1c1e;
	margin: 5px;
	font-size: 130%;
	cursor: pointer;
}

#SettingsPopup .settingName:last-child {
	margin-bottom: 50px;
}

.rotate-device-warning {
	display: none;
}

#Anlagenswitch {
    background-image: url(img/cog.png);
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) 10px;
    cursor: pointer;
}

#Anlagenswitch select {
    background-color: transparent;
    color: white;
    border-radius: 5px;
    padding: 5px;
    border: none;
    font-size:130%;
    appearance:none;
    width:100%;
}

#Anlagenswitch select option {
    color: white;
    background-color: #1C1C1E;
    font-size: 130%;
}

@media screen and (orientation: portrait) {
	/* 2. Zeige das Warn-Overlay über den ganzen Bildschirm */
	.rotate-device-warning {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: fixed;
		inset: 0; /* Ersetzt top:0, left:0, right:0, bottom:0 */
		background-color: #222; /* Dunkler Hintergrund */
		color: white;
		font-family: sans-serif;
		text-align: center;
		padding: 20px;
		z-index: 9999;
	}

	.phone-icon {
		width: 60px;
		height: 120px;
		border: 4px solid white;
		border-radius: 12px;
		margin-bottom: 30px;
		position: relative;
		animation: rotatePhone 3s ease-in-out infinite;
	}

	/* Ein kleiner Home-Button für das CSS-Smartphone (optional für den Look) */
	.phone-icon::after {
		content: "";
		position: absolute;
		bottom: 8px;
		left: 50%;
		transform: translateX(-50%);
		width: 12px;
		height: 12px;
		border: 2px solid white;
		border-radius: 50%;
	}

	@keyframes rotatePhone {
		0% {
			transform: rotate(0deg);
		}

		40% {
			transform: rotate(-90deg);
		}

		70% {
			transform: rotate(-90deg);
		}

		100% {
			transform: rotate(0deg);
		}
	}
}

@media screen and (orientation: landscape) {
	.fullscreen #CurrentGraph.box {
		height: 100vh;
		margin: 0;
		padding: 0;
	}

	.fullscreen #CurrentGraph .title {
		display: none;
	}

	.fullscreen #CurrentGraph .topIcon {
		//top: 12px;
		//left: 10px;
		top: 5px;
		right: 0px;
		width: 50px;
		height: 50px;
		background-color: #111217;
	}

	.fullscreen #CurrentGraph .topIcon::after {
		aspect-ratio: 2;
		-webkit-mask-image: url("img/zoom-in.svg");
		mask-image: url("img/zoom-in.svg");
		-webkit-mask-position: center;
	}

	.fullscreen #CurrentGraph .options {
		margin-top: 10px;
		margin-bottom: 10px;
		margin-left: 150px;
		display: inline;
		text-align: right;
		font-size: 120%;
	}

	.fullscreen #CurrentGraph #Navigation {
		display: flex;
	}
}