:root {
  --font-sans: "Segoe UI", Arial, sans-serif;
  --primary: #4aa1ff;
  --text: #303030;
  --bg: #ffffff;
}

* {
  /* Changes the Font to Segoe UI */
  font-family: var(--font-sans);
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--text);
  background-color: var(--bg);
}

a {
  /* Removes the Underline from Links */
  text-decoration: none;
  color: var(--text);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--primary);
}

li span {
  /* No Idea what this does. Just don't remove it. */
  position: relative;
  left: 10px;
}

li::marker {
  /* Changes the Pointer in a List to lightblue */
  color: var(--primary);
}

.NotificationBar {
  /* Div Properties */
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: #4aa1ff;
  margin-bottom: 15px;
  border-radius: 0 0 12px 12px;
  /* Display Settings: Navbar sticks to the Top */
  position: sticky;
  top: 0;
  z-index: 2;
}

.NotificationBar.hidden {
  /* Hides the Notification Bar */
  display: none;
}

.NotificationBar p {
  background-color: var(--primary);
  color: var(--bg);
  margin-left: 15px;
  margin-right: auto;
}

#NotificationButton {
  height: 50%;
  margin-right: 15px;
  margin-left: auto;
  border-width: 1px;
  border-radius: 8px;
  transition: 0.5s;
}

#NotificationButton:hover {
  cursor: pointer;
  background-color: #dbdada;
}

.Logo {
  /* Image Properties */
  width: 66px;
  height: 66px;
  padding-left: 20px;
}

.NavigationBar {
  /* Div Properties */
  height: auto;
  display: flex;
  flex-direction: row;
  margin-top: 15px;
}

.Links {
  /* Alignment Properties */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.LR-Margin {
  /* Margin Properties for Items */
  margin-left: 10px;
  margin-right: 10px;
}

/* ? Unused Component(s) */
#DropdownButton {
  /* Box & Text Properties */
  border: none;
  background-color: white;
  font-size: 16px;
}

.DropdownContent {
  /* Background Color Properties */
  border: solid black;
  background-color: #efefef;
}

#LeftSideContent {
  /* Background Color Properties */
  background-color: #efefef;
}

#RightSideContent {
  /* Background Color Properties */
  background-color: #efefef;
}

#DropdownHeader {
  /* Background Color Properties */
  background-color: #efefef;
  margin-left: 30px;
  margin-right: 30px;
}

#BulletSymbol {
  /* Background Color Properties */
  background-color: #efefef;
  margin-left: 30px;
  padding: 20px 10px 20px 10px;
}

.DropdownTitle {
  /* Background Color Properties */
  background-color: #efefef;
  font-size: 20px;
  font-weight: bold;
}

.DropdownDescription {
  /* Background Color Properties */
  background-color: #efefef;
}

#Reinigungstipps {
  /* Background Color Properties */
  background-color: #efefef;
  /* Alignment Properties */
  display: flex;
  flex-direction: row;
}

#Arrow {
  /* Image & Margin Properties */
  margin-left: 5px;
  margin-right: 5px;
  width: 10px;
  height: 10px;
}

#CompanyName {
  /* Text & Margin Properties */
  font-size: 24px;
  font-weight: bold;
  margin-left: 20px;
  margin-right: 10px;
  color: var(--primary);
}

.TitleBlock {
  /* Div Properties */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.SideTitle {
  /* Text Size & Margin Properties */
  font-size: 30px;
  color: var(--primary);
  margin: 50px;
  width: 50%;
}

#CompanyInfo {
  margin-left: 20px;
  margin-right: 20px;
  width: 40%;
}

#CompanyInfo #CompanyDescription {
  /* Makes the Description look and fit better */
  width: 70%;
  margin-left: 20px;
  margin-right: 20px;
}

#BuchenButton {
  /* Div Properties */
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  padding: 10px;
  /* Text Properties */
  font-size: 20px;
  color: white;
  /* Border Properties */
  border: none;
  border-radius: 12px;
  background-color: #4aa1ff;
  /* Hover Properties */
  transition: 0.5s;
}

#ErfahrenButton {
  /* Div Properties */
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  padding: 10px;
  /* Text Properties */
  font-size: 20px;
  color: #303030;
  /* Border Properties */
  border: none;
  border-radius: 12px;
  background-color: white;
  /* Hover Properties */
  transition: 0.5s;
}

#ErfahrenButton:hover {
  cursor: pointer;
  background-color: #dbdada;
}

#BuchenButton:hover {
  cursor: pointer;
  background-color: #034bf1;
}

#HeroImage {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 85%;
}

#CenteredTitle {
  /* Header 1 Properties */
  font-size: 40px;
  margin-top: 112px;
  margin-bottom: 20px;
  color: var(--primary);
  display: flex;
  justify-content: center;
  align-items: center;
}

#ShowcaseDescription {
  /* Paragraph Properties */
  margin-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
  width: 50%;

  /* Text Properties */
  font-size: 22px;
  text-align: center;
  color: #303030;
}

#Images {
  display: flex;
  flex-direction: row;
  padding: 20px;
}

/* Fixes Image Overlay Bug */
.SpecialImageTag {
  margin-left: 10px;
  margin-right: 10px;
}

.ImageShowcase {
  width: 100%;
  height: 70%;
  padding: 10px;
}

.HeaderShowcase {
  text-align: center;
}

.AdvantageSection {
  display: flex;
  flex-direction: row;
  padding: 30px;
  margin: 50px;
}

#AdvantageInfo {
  width: 60%;
  font-size: 17px;
}

.SideImage {
  margin-left: 100px;

  width: 70%;
}

.SideHeader {
  font-size: 35px;
  color: #4aa1ff;
}

.UnsortedList {
  list-style: none;
  line-height: 35px;
  font-size: 18px;
  padding: 20px;
}

.UnsortedList li::before {
  content: "★";
  color: var(--primary);
  margin-right: 8px;
}

.ContactSection {
  display: flex;
  flex-direction: row;
  padding: 30px;
  margin: 50px;
}

#ContactSub {
  font-size: 17px;
}

.Icons {
  width: 35px;
  /* Spacing */
  margin-right: 5px;
}

#EMailSection {
  padding: 30px 0px 0px 0px;
  margin: 30px 0px 0px 0px;
}

#TelSection {
  padding: 30px 0px 0px 0px;
  margin: 30px 0px 0px 0px;
}

#ContactInfo {
  width: 50%;
}

#ContactImage {
  width: 90%;
}

footer {
  /* Div Properties  */
  padding: 10px;
  margin: 10px;
  /* Alignment Properties  */
  display: flex;
  justify-content: center;
  flex-direction: row;
}

#FooterLogoSection {
  /* Alignment Properties  */
  float: left;
}

#FooterLogo {
  /* Image Properties  */
  width: 66px;
  height: 66px;
  /* Alignment Properties  */
  float: left;
}

#FooterLinks {
  /* Text Propterties */
  font-weight: bold;
}

#FooterIcons {
  /* Alignment Properties  */
  display: flex;
  justify-content: center;
  align-items: center;
}

.Divider {
  width: 90%;
  height: 2px;
  border-top: 2px solid black;
}

.Disclaimer * {
  color: dimgray;
}