.PinInterfaceContainer {
  position: absolute;
  width: 300px;
  height: 556px;
  left: calc(50% - 170px);
  top: 60px;
  overflow: hidden;
  background: black;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px;
  justify-content: flex-end;
  padding: 10px; }
  .PinInterfaceContainer img.Close {
    height: 40px;
    aspect-ratio: 1;
    width: min-content; }
  .PinInterfaceContainer .Text {
    height: 30px;
    color: white;
    font-weight: bold;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center; }
  .PinInterfaceContainer input.Display {
    height: 50px;
    width: 70%;
    align-self: center;
    font-size: 3rem;
    -webkit-text-security: disc;
    margin: 0 auto;
    text-align: center;
    border-radius: 10px; }
  .PinInterfaceContainer .Digit {
    width: calc(100% / 3 - 27px);
    aspect-ratio: 1;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    background: #222222;
    border-radius: 10px; }

.ContentContainer > .DashboardContainer > .MessagesContainer {
  width: calc(100% - 20px);
  background: #222222;
  height: min-content;
  padding: 10px;
  display: flex;
  justify-content: center;
  gap: 5px;
  border-radius: 10px;
  align-content: flex-start;
  flex-direction: column; }

.MessagesTitle {
  width: 100%;
  color: white;
  font-size: 1.2rem;
  font-weight: bold; }

.MessageContainer {
  width: 100%;
  height: min-content;
  display: flex;
  flex-direction: column;
  height: 70px;
  background: #333333;
  border-radius: 5px;
  flex-wrap: wrap;
  color: white; }

img.MessageImage {
  max-height: 100%;
  aspect-ratio: 1; }

.MessageContent {
  height: calc(75% - 10px);
  width: calc(100% - 90px);
  margin: 5px 10px;
  overflow: scroll; }

.MessageDate {
  height: 25%;
  font-size: 0.8rem;
  text-indent: 10px;
  display: flex;
  align-items: center;
  color: #aaaaaa; }

.CalendarWeekday {
  width: calc(100% / 7);
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1; }

.CalendarDaysContainer {
  display: flex;
  flex-wrap: wrap; }

.CalendarEmpty {
  width: calc(100% / 7);
  display: flex;
  justify-content: center;
  align-items: center; }

.CalendarNotEmpty {
  width: calc(100% / 7);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1; }

.CalendarContainer {
  font-family: 'PoppinsLight';
  display: flex;
  flex-direction: column;
  width: 90%;
  color: #ffffff; }

.CalendarHeader {
  width: 100%;
  display: flex;
  justify-content: space-evenly; }

.CalendarWeekdayHeader {
  width: 100%;
  display: flex;
  justify-content: space-evenly; }

.HomeButton {
  height: 70%;
  aspect-ratio: 1;
  background-color: #333333;
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(https://assets-global.website-files.com/60ade6a757ca36321a84087a/633a87f0c6e89f15d5afd9d0_sp_haus_icon.svg);
  border-radius: 100%;
  margin: 0px 5px 0px 5px; }

.InfoboardButton {
  height: 70%;
  aspect-ratio: 1;
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(/graphics/info2.png);
  border-radius: 100%;
  margin: 0px 5px 0px 5px; }

.ProfileButton {
  height: 70%;
  aspect-ratio: 1;
  background-color: #808080;
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(/graphics/settings_neu.png);
  border-radius: 100%;
  margin: 0px 5px 0px 5px; }

.floorplanSteeringContContainer {
  display: none;
  height: 90%;
  width: max-content;
  opacity: 0.3;
  margin: 0px 5px 0px 5px;
  align-items: center;
  border-radius: 10px;
  flex-shrink: 0; }

.FloorplanSteeringCentralContainer {
  margin: 0px 5px 0px 5px;
  max-width: 0px;
  overflow: hidden;
  display: flex;
  height: 100%;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  transition-duration: 0.5s; }

.FloorplanSteeringAllImage {
  aspect-ratio: 1;
  height: calc(70% - 3px);
  background-repeat: no-repeat;
  background-size: contain;
  margin: 3px 5px 0px 5px;
  background-color: #000000;
  border-radius: 10px; }

.FloorplanSteeringAllImage:active {
  box-shadow: inset 0px 0px 5px #ffffff; }

.FloorplanSteeringAllUpImage, .FloorplanSteeringAllDownImage {
  aspect-ratio: 1;
  height: calc(70% - 3px);
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: center center;
  margin: 3px 5px 0px 5px;
  border-radius: 10px;
  transition-duration: 0.5s; }

.FloorplanSteeringAllUpImage:active, .FloorplanSteeringAllDownImage:active {
  box-shadow: inset 0px 0px 5px #ffffff;
  transition-duration: 0.5s; }

.FloorplanSteeringAllDownImage {
  aspect-ratio: 1;
  height: 70%;
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: center center;
  margin: 0px 5px 0px 5px;
  rotate: 180deg; }

.FloorplanSteeringAll, .FloorplanSteeringAllUp, .FloorplanSteeringAllDown {
  display: flex;
  height: 30%;
  font-family: 'PoppinsLight';
  color: #ffffff;
  font-size: 0.9rem;
  align-items: flex-end;
  margin: 0px 5px 0px 5px;
  text-wrap: nowrap; }

.FloorplanSteeringWidget {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  margin: 0px 5px 0px 5px; }

@media (hover: hover) and (pointer: fine) {
  .FloorplanSteeringWidget:hover {
    opacity: 1; } }

.FloorplanSteeringFloorplanImage {
  max-height: calc(70% - 10px);
  max-width: 100%;
  padding: 5px; }

.Intercom {
  display: none;
  opacity: 0;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: scroll;
  transition-duration: 1s;
  align-content: flex-start;
  align-items: center; }

.Calendar {
  display: none;
  opacity: 0;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: scroll;
  transition-duration: 1s;
  align-content: flex-start;
  align-items: center; }

.GsaCam {
  width: 45%;
  margin: 5px 5px 5px 5px; }

.GsaCam:nth-child(2).GsaCam:last-child {
  width: 508px; }

.GsaCam:nth-last-child(2).GsaCam:first-child {
  width: 508px; }

.GsaCam:only-child {
  flex-grow: 0.6; }

.DashboardContainer {
  display: none;
  opacity: 0;
  transition-duration: 1s;
  flex-direction: column;
  align-items: center;
  overflow: scroll;
  width: 100%; }

.Favourites {
  width: 100%; }

.Favourites .menubarItemTextbox {
  margin: 10px 0px 20px 0px;
  background: var(--spGold);
  width: calc(100% - 10px);
  border-radius: 5px;
  height: 65px;
  line-height: 65px; }

.Favourites .menubarItemTextbox[id*="Leuchten"] {
  background: var(--lightBlue); }

.Favourites .menubarItemTextbox[id*="Jalousien"] {
  background: var(--blindGreen); }

.Favourites .menubarItemTextbox[id*="Klima"] {
  background: var(--climateYellow); }

.Favourites .menubarItemTextbox[id*="Lautsprecher"] {
  background: var(--speakerRed); }

.Favourites .menubarItemTextbox[id*="Alarme"] {
  background: var(--alarmOrange); }

.SteeringContainer {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  overflow-x: scroll; }

.Steering {
  display: none;
  opacity: 0;
  overflow: scroll;
  width: 100%; }

.All, .AllUp, .AllDown, .Floor {
  min-width: 100px;
  width: max-content;
  height: 45px;
  background: #111111;
  color: #ffffff;
  border-radius: 10px;
  font-family: 'PoppinsLight';
  font-size: 1.2rem;
  transition-duration: 1s;
  line-height: 50px;
  text-align: center;
  margin: 0px 10px 0px 10px;
  display: inline-table;
  padding: 0px 5px 0px 5px; }

.MitteilungContainer {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: auto 1fr;
  height: min-content;
  border-bottom: 1px solid #505050;
  text-indent: 0;
  position: relative;
  transform: translateX(0%);
  transition-duration: 0.6s;
  transition-timing-function: ease-in-out;
  font-family: 'UbunutLight';
  color: #ffffff;
  width: calc(100% - 30px); }

.MitteilungDate {
  display: flex;
  min-width: 80px;
  text-align: center;
  font-size: 0.8rem;
  align-items: flex-start;
  padding: 0px 5px 5px 5px;
  color: #c1cad6;
  font-family: 'PoppinsLight'; }

.MitteilungImage {
  display: flex;
  align-self: center;
  height: 50px;
  align-items: center;
  justify-content: center;
  padding: 5px;
  flex-direction: row;
  flex-wrap: wrap;
  grid-row: span 2; }

.MitteilungMessage {
  display: flex;
  line-height: 1.2rem;
  height: fit-content;
  justify-content: flex-start;
  align-self: self-end;
  padding: 10px 5px 0px 5px;
  font-size: 1rem;
  font-family: 'PoppinsLight'; }

.HomeTile {
  flex-grow: 1;
  flex-shrink: 0;
  height: fit-content;
  min-width: calc(60% - 20px);
  width: fit-content;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  gap: 10px;
  border-top: 1px solid #666666;
  padding-top: 10px; }

.HomeTileHeader {
  border-radius: 10px;
  width: 100%;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  text-indent: 10px;
  direction: rtl;
  background: #629dd2;
  font-family: 'PoppinsBold';
  color: #ffffff; }

.HomeTileImage {
  height: 80%; }

.MenuBarContainer {
  width: max-content;
  height: 60px;
  background: #111111;
  bottom: 10px;
  position: absolute;
  border-radius: 20px;
  box-shadow: 0px 0px 10px black;
  display: flex;
  align-items: center;
  justify-content: space-around;
  overflow: hidden;
  z-index: 1;
  left: 0px;
  right: 0px;
  margin: auto;
  padding: 0px 5px 0px 5px;
  gap: 15px; }

.MenuBarImage {
  height: 100%;
  min-width: 100px;
  width: calc(40vw / 3); }

@media only screen and (min-height: 100vw) {
  .Logo {
    display: none; }
  .Header > .Date {
    display: none; }
  .Header {
    grid-template-columns: 20% 40% 25% 15% !important; }
  .Titlebar {
    margin-left: calc((100vw * 0.05) / 2) !important;
    width: calc(60vw - (100vw * 0.05) / 2) !important;
    grid-column: span 2; }
  .Notificationbar {
    width: 25vw !important; }
  .BorderLeft {
    display: none; }
  .BorderMid {
    display: none; }
  .BorderRight {
    display: none; }
  .Menubar {
    display: none !important; }
  .ContentContainer {
    grid-column: span 3 !important; }
  .Sidebar {
    display: none !important; }
  .MenuBar2 {
    display: unset !important; }
  .Burger {
    display: unset !important; }
  .Messages {
    width: calc(100% - 0px) !important; }
  .Favourites {
    width: calc(100% - 0px) !important; }
  .GsaCam {
    width: calc(100% - 0px) !important; }
  .PlayerFavouriteTile, .PlayerGenreTile, .PlayerCountryTile, .PlayerSearchResultTile {
    width: calc((100vw - 35px) / 3);
    height: calc((100vw - 35px) / 3); }
  .PlayerFavouritesContainer, .PlayerGenreContainer, .PlayerCountryContainer, .PlayerSearchResultContainer {
    justify-content: space-around;
    height: calc((100vw - 30px) / 3 + 20px); }
  .PlayerGenreContainer {
    height: 90px; } }

.PlayerLoaderCircleOne, .PlayerLoaderCircleTwo {
  width: 0px;
  aspect-ratio: 1;
  position: absolute;
  left: calc(50% - 0px);
  top: calc(50% - 0px);
  border-radius: 100%;
  transition-duration: 1s;
  border: 5px solid var(--spGold);
  transition-timing-function: ease-out; }

body > .Container {
  display: grid;
  grid-template-columns: 20% 60% 20%;
  grid-template-rows: 4rem 1fr 4rem;
  height: 100%;
  width: 100%;
  background: #111111;
  position: absolute;
  top: 0;
  left: 0; }

.Header {
  grid-column: span 3;
  background: #111111;
  display: grid;
  grid-template-columns: 20% 40% 20% 20%;
  grid-template-rows: calc(100% - 1px) 1px;
  position: relative;
  align-items: center;
  justify-items: center; }

.Logo {
  width: 80%; }

.Titlebar {
  font-family: 'PoppinsLight';
  font-size: 1.5rem;
  color: #ffffff;
  justify-self: left;
  margin-left: calc((60vw * 0.05) / 2);
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(40vw - (60vw * 0.05) / 2); }

.Titlebar::first-letter {
  border-bottom: 1px solid var(--spGold); }

.Notificationbar {
  font-family: 'PoppinsLight';
  font-size: 2rem;
  color: #ffffff;
  justify-self: left;
  text-indent: 10%;
  text-overflow: ellipsis;
  width: calc(20vw - (60vw * 0.05) / 2);
  height: 90%;
  overflow: scroll;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 5px; }

.Notification {
  width: 50px;
  max-height: 100%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0; }
  .Notification .Image {
    filter: invert(1);
    max-width: 100%;
    max-height: 100%; }

@keyframes loader {
  from {
    fill: green; }
  to {
    fill: orange; } }

/*.Searchbar {
	position: absolute;
	background: black;
	border-radius: 10px;
	border: 1px solid var(--spGold);
	box-shadow: 0px 0px 10px var(--spGold);
	font-family: 'PoppinsLight';
	color: #ffffff;
	font-size: 1.2rem;
	width: 300px;
	visibility: hidden;	
	left: calc(50% - 150px);
	height: 5%;
	transition-duration: 0.5s;
	transition-timing-function: ease-in-out;
	opacity: 0;
	bottom: 0px;
	transform: translateY(0%);
}*/
.Searchbar::placeholder {
  color: #ffffff; }

.Header > .Date {
  font-family: 'PoppinsLight';
  color: #ffffff;
  font-size: 1.05rem;
  text-align: center; }

.Burger {
  display: none;
  height: 60%;
  filter: invert(1); }

.BorderLeft, .BorderMid, .BorderRight {
  background: var(--spGold);
  width: 95%;
  height: 100%;
  border-radius: 1px; }

.BorderMid {
  grid-column: span 2; }

.MenuBar {
  background: #111111;
  display: flex;
  flex-direction: row;
  padding-top: 20px;
  width: 95%;
  justify-self: center;
  overflow-Y: scroll; }

.MenuBarSliderContainer {
  width: 5px;
  height: 100%; }

.MenuBarSlider {
  width: 100%;
  height: 45px;
  background: var(--spGold);
  transition-duration: 0.5s;
  border-radius: 1.5px;
  transition-timing-function: ease-in-out;
  margin-top: calc(0px - 0.65rem); }

.MenubarItemsContainer {
  width: calc(100% - 5px);
  height: 100%; }

.MenubarItem {
  display: flex;
  height: 60px;
  width: 100%;
  align-items: center; }

.MenubarItemImage {
  height: calc(50%);
  padding-left: 5px; }

.MenubarItemTextbox {
  color: #ffffff;
  font-family: 'PoppinsLight';
  font-size: 1.2rem;
  padding-left: 10px;
  height: 1.6rem;
  margin: 0 0 calc((50px - 1.6rem) / 1) 10px;
  overflow: hidden;
  text-overflow: ellipsis; }

.MenubarItemTextbox::first-letter {
  border-bottom: 1px solid var(--spGold); }

.Container > .ContentContainer {
  background: #111111;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
  position: relative;
  width: 95%;
  justify-self: center;
  overflow: scroll; }

.Messages {
  flex-shrink: 0.8;
  width: 100%;
  overflow: scroll;
  min-height: max-content;
  max-height: 246px;
  border-radius: 15px;
  background: #222222;
  flex-direction: column;
  align-items: center;
  display: flex; }

.Messages:empty {
  min-height: 0px; }

.Sidebar {
  background: #111111;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  align-items: center;
  width: 95%;
  justify-self: center;
  gap: 10px;
  overflow: scroll; }

.Footer {
  grid-column: span 3;
  background: black;
  display: flex;
  width: 100%;
  align-items: center; }

.MenubarMobile {
  position: absolute;
  bottom: 0px;
  width: 100%;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  height: 0%;
  background: black;
  overflow: scroll; }

.HomeScreen {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition-duration: 1s;
  margin-bottom: 70px; }

.HomeScreenBody {
  margin: 0px 15px 0px 15px;
  width: calc(100% - 30px);
  height: calc(100%);
  overflow-x: hidden;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  padding-bottom: 70px; }

.HomeScreenHeader {
  margin: 0px 15px 0px 15px;
  height: 60px;
  width: calc(100% - 30px);
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  font-family: 'PoppinsBold';
  font-size: 2rem;
  color: #00000000;
  align-items: center; }

.HomeScreenSearch {
  align-self: center;
  height: 30px;
  width: 200px;
  background-color: #33333399;
  border-radius: 10px;
  border: unset;
  color: var(--spGold);
  padding: 0px 0px 0px 10px;
  outline: none; }

.HomeScreenSearch::placeholder {
  color: var(--spGold); }

.HomeScreenTime {
  color: #dddddd;
  font-family: 'PoppinsBold';
  font-size: 20px;
  height: 100%;
  display: flex;
  align-items: center; }

.HomeScreenProfile {
  align-self: center;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: var(--spGold) url(https://uploads-ssl.webflow.com/60ade6a757ca36321a84087a/63d8b90fa1b031f725706058_login.svg);
  background-size: 25px;
  background-repeat: no-repeat;
  background-position: center; }

.HomeScreenWelcome {
  height: auto;
  width: 100%;
  margin: 15px 0px 15px 0px;
  flex-shrink: 0; }

.WelcomeHeader {
  font-family: 'PoppinsBold';
  font-size: 30px;
  color: #dddddd;
  margin: 0px 0px 10px 0px; }

.WelcomeTitle:first-letter {
  text-decoration: underline;
  text-decoration-color: var(--spGold);
  text-decoration-thickness: 3px; }

.WelcomeBody {
  font-family: 'PoppinsBold';
  font-size: 15px;
  color: #dddddd;
  word-break: break-word;
  display: grid;
  grid-template-columns: 1fr min-content;
  grid-template-rows: min-content 1fr;
  flex-direction: column;
  max-height: 150px;
  background: #91a7c9;
  border-radius: 20px 20px 0px 0px;
  font-size: 1.2rem;
  padding-top: 10px;
  text-indent: 10px; }

.RemoveMitteilungen {
  height: 35px;
  padding-right: 10px;
  padding-bottom: 5px;
  margin-top: -5px;
  filter: invert(0.9); }

.MitteilungSpan {
  height: 100%;
  width: 0%;
  background: red;
  z-index: 1;
  position: absolute;
  transition-duration: 0.6s;
  transition-timing-function: ease-in-out;
  right: 0;
  transform: translateX(0%);
  border-bottom: 5px solid #2e2e2e;
  content-visibility: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  white-space: nowrap; }

.WelcomeContent {
  overflow: scroll;
  border-top: 1px solid #2e2e2e;
  grid-column: span 2; }

/*.WelcomeBody:has(div:empty) {
    display: none;
}*/
.HomeScreenCategory {
  max-height: fit-content;
  width: 100%;
  margin: 5px 0px 5px 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-around; }

.HomeScreenCategoryHeader {
  height: 20px;
  width: 100%;
  margin-bottom: 5px; }

.HomeScreenCategoryTitle {
  font-family: 'PoppinsBold';
  font-size: 20px;
  color: #dddddd; }

.HomeScreenCategoryTitle:first-letter {
  text-decoration: underline;
  text-decoration-color: var(--spGold);
  text-decoration-thickness: 3px; }

.HomeScreenCategoryBody {
  gap: 15px 10px;
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  overflow-y: hidden;
  flex-wrap: wrap;
  height: 100%;
  padding: 5px 0px 5px 0px; }

#functions-container-tile-container .TileHeaderImage {
  display: none; }

#functions-container-tile-container .TileHeaderTitle {
  max-width: 100%; }

#functions-container-tile-container .TileBodyContentContainer {
  border-top: 3px solid black; }

#functions-container-tile-container .TileContainer:nth-child(even) .TileHeaderTitle {
  color: var(--spGold); }

.Tile {
  flex-shrink: 0;
  height: fit-content;
  width: calc(50% - 20px);
  background-color: #33333399;
  margin: 5px 10px 5px 0px;
  position: relative;
  border-radius: 10px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out; }

.Tile:has(.TileHeader:active) {
  box-shadow: 0px 0px 10px var(--spGold);
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out; }

@media only screen and (orientation: landscape) {
  .HomeScreenTile {
    min-width: calc(25% - 8px) !important;
    flex-grow: 0 !important; }
  .HomeTile {
    min-width: calc(25% - 8px) !important;
    flex-grow: 0 !important; } }

.TileHeader {
  height: 40px;
  width: 100%;
  display: flex;
  justify-content: space-between; }

.TileHeader {
  height: 40px;
  width: 100%;
  display: flex;
  justify-content: space-between; }

.TileTitle {
  font-family: 'PoppinsBold';
  font-size: 18px;
  color: #dddddd;
  display: flex;
  height: 40px;
  word-break: break-word; }

.TileHeaderTitle {
  font-family: 'PoppinsBold';
  font-size: 18px;
  color: #dddddd;
  display: flex;
  height: 40px;
  word-break: break-word;
  max-width: 75%; }

.TileIcon {
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  margin: -8px -8px 0px 0px;
  flex-shrink: 0; }

.TileImage {
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  margin: -8px -8px 0px 0px;
  flex-shrink: 0; }

.TileImage[id*="lights"] {
  background-image: url("https://uploads-ssl.webflow.com/60ade6a757ca36321a84087a/6303496dff860421cb118105_Leuchte_b%26w.svg"); }

.TileImage[id*="blinds"] {
  background-image: url("https://uploads-ssl.webflow.com/60ade6a757ca36321a84087a/6303496d6ebbbe4e7d0ebda3_Jalousie_b%26w.svg"); }

.TileImage[id*="climatics"] {
  background-image: url("https://uploads-ssl.webflow.com/60ade6a757ca36321a84087a/63034d0fe8dad04b1fc014de_klima_b%26w.svg"); }

.TileImage[id*="speakers"] {
  background-image: url("https://uploads-ssl.webflow.com/60ade6a757ca36321a84087a/63034970e66a551e74ac138f_Multimedia_b%26w.svg"); }

.TileImage[id*="alarm"] {
  background-image: url("https://uploads-ssl.webflow.com/60ade6a757ca36321a84087a/6303496de07a9070fdf52668_Alarm_b%26w.svg"); }

.TileImage[id*="szenen"] {
  background-image: url("https://uploads-ssl.webflow.com/60ade6a757ca36321a84087a/6303496f5393281e6daf73fc_szenen_b%26w.svg"); }

.TileBody {
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  align-items: center; }

.TileBody {
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  align-items: center; }

.TileContentContainer {
  width: 90%;
  display: flex;
  position: relative;
  margin: 13px 0px 5px 0px;
  align-items: center;
  justify-content: space-between;
  height: 40px; }

.TileBodyContentContainer {
  width: 90%;
  display: flex;
  position: relative;
  margin: 5px 0px 5px 0px;
  align-items: center;
  justify-content: space-between;
  height: 40px; }

.TileBodyContentInteractifContainer {
  width: 100%;
  display: flex;
  align-items: center; }

.TileBodyContentInteractifContainer.WidthToggle {
  width: 50px; }

.TileBodyContentInteractifButton {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'PoppinsBold';
  font-size: 13px;
  color: #dddddd;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 35px;
  border-radius: 25px;
  box-shadow: 0px 0px 6px #000000;
  border: solid 1px var(--spGold) ff;
  background-color: var(--spGold);
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out; }

.TileBodyContentInteractifButton:active {
  box-shadow: 0px 0px 10px #dddddd;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out; }

.TileContentTitle {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'PoppinsBold';
  font-size: 13px;
  color: #dddddd;
  width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 35px;
  border-radius: 25px;
  box-shadow: 0px 0px 6px #000000;
  border: solid 1px var(--spGold) ff;
  background-color: var(--spGold); }

.TileContentTitle.WidthToggle {
  box-shadow: unset;
  border: unset;
  justify-content: flex-start;
  background-color: unset; }

.ToggleSwitchContainer {
  width: 30%;
  height: 20px;
  position: relative;
  display: flex;
  align-items: center; }

.ToggleSwitchCheckbox {
  flex-shrink: 0;
  -webkit-appearance: none;
  width: 50px;
  background: #000000;
  transition: 1s;
  height: 25px;
  border-radius: 12.5px;
  margin: unset; }

.ToggleSwitchCheckbox:checked {
  background: var(--spGold);
  transition: 1s; }

.TileBodyContentInteractifContainer.WidthToggle:has(.ToggleSwitchCheckbox:checked) .ToggleSwitchSlider {
  transform: translate(25px, 0px);
  transition: 0.5s;
  transition-timing-function: ease-in-out; }

.ToggleSwitchSlider {
  width: 20px;
  height: 20px;
  background-color: #dddddd;
  position: absolute;
  border-radius: 100%;
  transition: 0.5s;
  transition-timing-function: ease-in-out;
  margin-left: 2.5px; }

/*input[type="range"]{
	-webkit-appearance: none;
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'PoppinsBold';
        font-size: 13px;
        color: #dddddd;
        width: 100%;
        text-overflow: ellipsis;
        height: 35px;
        border-radius: 25px;
        box-shadow: inset 0px 0px 10px 1px #111111;
        background-color: var(--spGold);
		padding: 2%;
		pointer-events: auto;
}

input[type="range"]::-webkit-slider-thumb{
                -webkit-appearance: none;
                background: #ffffff;
                height: 25px;
                border-radius: 100%;
                aspect-ratio: 1/1;
}*/
.MenuBarButton {
  max-height: calc(60px - 10px); }

.MenuBarButtonImage {
  height: calc(100% - 10px); }

/*Experimental*/
.HomeScreenTile {
  flex-grow: 1;
  flex-shrink: 0;
  height: fit-content;
  min-width: calc(60% - 20px);
  width: fit-content;
  position: relative;
  padding: 10px 0px 5px 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  border-top: 1px solid #5b5b5b; }

.HomeScreenTile li:has([type="button"]):only-of-type {
  display: none !important; }

.HomeScreenTile ul:has(li:only-of-type) {
  display: none !important; }

.HomeScreenTile:not(:has(ul)) {
  margin: 0px 10px 0px 10px !important;
  box-shadow: 0px 0px 5px black !important;
  border-radius: 10px !important;
  padding: 15px 10px 0px 10px !important;
  border-top: unset !important; }

.HomeScreenTile:has(li:only-of-type) {
  box-shadow: 0px 0px 5px black !important;
  border-radius: 10px !important;
  border-top: unset !important; }

.HomeScreenTile div {
  height: 40px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center; }

.HomeScreenTile img {
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  margin: -8px -8px 0px 0px;
  flex-shrink: 0;
  border-radius: 5px;
  transition-timing-function: ease-in-out; }

.clickable {
  box-shadow: 2.5px 2.5px 10px black; }

img.clickable {
  margin-left: 5px !important;
  width: 35px;
  height: 35px; }

.clickable:active {
  box-shadow: 0px 0px 10px #dddddd;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out; }

.HomeScreenTile h3 {
  font-family: 'PoppinsBold';
  font-size: 18px;
  color: #dddddd;
  display: flex;
  height: 40px;
  word-break: break-word;
  margin: 0px 0px 0px 10px; }

.HomeScreenTile ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: unset;
  margin: unset; }

.HomeScreenTile li {
  border-radius: 5px;
  width: 95%;
  display: flex;
  position: relative;
  margin: 5px 15px 5px 15px;
  align-items: center;
  justify-content: space-between;
  height: 60px; }

.HomeScreenTile li > div:has([type="button"]) {
  width: min-content; }

.HomeScreenTile li > div:has([type="button"]) input {
  margin: 0px 5px 0px 5px;
  text-align: center;
  border-radius: 100%;
  box-shadow: 0px 2.5px 10px black;
  width: unset;
  aspect-ratio: 1;
  flex-grow: unset;
  font-size: 23px;
  font-weight: bold;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  background: black; }

.HomeScreenTile li > div:has([type="button"]) input:active {
  box-shadow: 0px 0px 10px #dddddd;
  transition-duration: 0.2s;
  background: #dddddd;
  color: black;
  transition-timing-function: ease-in-out; }

.HomeScreenTile li:has([type="checkbox"]:checked) span {
  transform: translate(25px, 0px);
  transition: 0.5s;
  transition-timing-function: ease-in-out;
  background: black; }

.HomeScreenTile li:has([type="button"]) {
  box-shadow: 0px 5px 10px black;
  transition-duration: 0.2s; }

.HomeScreenTile li:has([type="button"]):has([type="checkbox"]) label {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  width: min-content;
  margin-right: 15px; }

.HomeScreenTile li:has([type="range"]) div {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: space-around; }

.HomeScreenTile li:has([type="range"]) div > div {
  height: 50%;
  flex-direction: row;
  padding: 0px 12.5px 0px 12.5px;
  width: calc(100% - 25px);
  justify-content: space-between; }

.HomeScreenTile li:has([type="range"]) input {
  margin: 0px;
  height: 50%; }

.HomeScreenTile li:has([type="range"]) label {
  margin: 0px;
  height: 50%;
  justify-content: center;
  width: 0%;
  white-space: nowrap; }

.HomeScreenTile li:has(> [type="button"]:active) {
  box-shadow: 0px 0px 10px #dddddd;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out; }

.HomeScreenTile label {
  width: 100%;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  font-family: 'PoppinsBold';
  font-size: 13px;
  color: #dddddd; }

.HomeScreenTile span {
  width: 20px;
  height: 20px;
  background-color: #dddddd;
  position: absolute;
  border-radius: 100%;
  transition: 0.5s;
  transition-timing-function: ease-in-out;
  left: calc(100% - 47.5px); }

.HomeScreenTile [type="button"] {
  background: none;
  height: 100%;
  border: none;
  text-align: left;
  box-shadow: none;
  width: 100%;
  white-space: break-spaces;
  display: block;
  flex-grow: 1;
  font-family: 'PoppinsBold';
  font-size: 13px;
  color: #dddddd;
  overflow: hidden;
  text-overflow: ellipsis;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out; }

.HomeScreenTile [type="checkbox"] {
  flex-shrink: 0;
  -webkit-appearance: none;
  width: 50px;
  background: #000000;
  transition: 1s;
  height: 25px;
  border-radius: 12.5px;
  margin: unset; }

.HomeScreenTile [type="checkbox"]:checked {
  background: var(--spGold);
  transition: 1s; }

.HomeScreenTile pair {
  display: flex;
  justify-content: space-between;
  width: 100%; }

.HomeScreenTile key {
  font-family: 'PoppinsBold';
  font-size: 13px;
  color: #dddddd;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  padding-right: 10px;
  hyphens: auto; }

.HomeScreenTile value {
  font-family: 'PoppinsBold';
  font-size: 13px;
  color: #dddddd;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 50px; }

.HomeScreenTile li:has(pair) {
  height: 30px;
  width: 100%; }

.FloorplanScroll {
  width: 100vw;
  height: 30px;
  background: #dddddd;
  display: flex;
  justify-content: center; }

.ScreenWindow {
  width: calc(calc(100% - 30px) / 5);
  height: 100%;
  background: #6f665c; }

.ScreenSlider {
  position: absolute;
  width: fit-content;
  height: 15px;
  margin-top: 5px;
  display: flex; }

.ScreenSliderThumb {
  height: 100%;
  aspect-ratio: 1;
  background: black;
  border-radius: 100%;
  margin: 0px 5px 0px 5px; }