/* Container für Menü und Content */
.container {
  display: flex; /* Flexibles Layout */
  flex-direction: row; /* Elemente nebeneinander */
  width: 100%; /* Gesamtbreite */
  height: calc(100vh-130px); /* Höhe des Viewports */
}

/* Content-Stil */
main#content {
  flex: 1; /* Füllt den verbleibenden Platz */
  padding: 1rem;
  background-color: var(--color-background); /* Hintergrundfarbe für den Content */
  overflow-y: auto; /* Scrollbar bei viel Inhalt */
}

/* Allgemeine Stile für das Rahmen-Layout */
.content-frame {
  position: relative;
  padding: var(--maincontent-frame-space); /* Abstand für den Rahmen */
  background: url("../images/mainpage/frame/fill.png") repeat; /* Füllgrafik */
  border: 0px solid transparent; /* Platz für den Rahmen */
  box-sizing: border-box;
  width: 85%; /* Breite des Inhalts */
  margin: 10px auto; /* Zentrierung */
}

.content-frame__inner {
  margin: 0;
  position: relative;
  z-index: 1; /* Stellt sicher, dass der Inhalt über dem Rahmen liegt */
}

.content-frame__before-top {
  content: "";
  position: absolute;
  top: 0;
  left: var(--maincontent-frame-space);
  right: var(--maincontent-frame-space);
  height: var(--maincontent-frame-space);
  background: url("../images/mainpage/frame/top.png") repeat-x;
}
.content-frame__before-bottom {
  content: "";
  position: absolute;
  bottom: 0;
  left: var(--maincontent-frame-space);
  right: var(--maincontent-frame-space);
  height: var(--maincontent-frame-space);
  background: url("../images/mainpage/frame/bottom.png") repeat-x;
}
.content-frame__before-left {
  content: "";
  position: absolute;
  top: var(--maincontent-frame-space);
  bottom: var(--maincontent-frame-space);
  left: 0;
  right: var(--maincontent-frame-space);
  background: url("../images/mainpage/frame/left.png") repeat-y;
}
.content-frame__before-right {
  content: "";
  position: absolute;
  top: var(--maincontent-frame-space);
  bottom: var(--maincontent-frame-space);
  right: 0;
  width: var(--maincontent-frame-space);
  background: url("../images/mainpage/frame/right.png") repeat-y;
}
.content-frame__before-top-left {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: var(--maincontent-frame-space);
  width: var(--maincontent-frame-space);
  background: url("../images/mainpage/frame/top-left.png") repeat-y;
}
.content-frame__before-top-right {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: var(--maincontent-frame-space);
  width: var(--maincontent-frame-space);
  background: url("../images/mainpage/frame/top-right.png") repeat-y;
}
.content-frame__before-bottom-left {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: var(--maincontent-frame-space);
  width: var(--maincontent-frame-space);
  background: url("../images/mainpage/frame/bottom-left.png") repeat-y;
}
.content-frame__before-bottom-right {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: var(--maincontent-frame-space);
  width: var(--maincontent-frame-space);
  background: url("../images/mainpage/frame/bottom-right.png") repeat-y;
}

.content-frame__before-top,
.content-frame__before-bottom,
.content-frame__before-left,
.content-frame__before-right,
.content-frame__before-top-left,
.content-frame__before-top-right,
.content-frame__before-bottom-left,
.content-frame__before-bottom-right {
  pointer-events: none; /* Deaktiviert Maus-Interaktionen */
  z-index: 0;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column; /* Menü und Content untereinander anordnen */
  }
  .content-frame {
    position: relative;
    padding: 15px; /* Abstand für den Rahmen */
    margin: 15px 5px;; /* Zentrierung */
    width: calc(100% - 80px);
    left: 60px;
  }
  /* Elemente, die auf mobilen Geräten versteckt werden sollen */
  .hide-on-mobile {
      display: none; 
  }
}