/* applayout-global.css v0.1.0 */

/***********************************************
 * APP-LAYOUT (Wrapper)
 ***********************************************/
.app-layout {
  display: flex;
  flex-direction: column;

  height: 100vh;
  min-height: 100vh;

  position: relative;
  overflow: hidden;

  /* Page-BG ist schwarz → eigener BG für das Layout */
  background-color: #111;

  -webkit-overflow-scrolling: touch;
}

/* Variante: Abgerundete obere Ecken */
.app-layout--rounded {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

/* Variante: Seite mit zusätzlicher 50px-Navigation außerhalb der Section */
.app-layout--offset-50 {
  height: calc(100vh - 50px);
  min-height: calc(100vh - 50px);
}


/***********************************************
 * HEADER (Block 1.1)
 ***********************************************/
.app-layout__header {
  flex: 0 0 75px;
  min-height: 75px;

  position: relative;
  z-index: 10;

  display: flex;
  align-items: center;        /* Achse ausrichten: zentrieren */
  justify-content: center;    /* Hauptachse ausrichten: zentrieren */

  padding-left: 50px;
  padding-right: 50px;

  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}


/***********************************************
 * BODY WRAPPER (Block 1.2)
 ***********************************************/
.app-layout__body {
  flex: 1 1 auto;       /* füllt Rest zwischen Header & Footer */
  min-height: 0;        /* damit Body-Content korrekt schrumpfen darf */

  position: relative;
  overflow: hidden;     /* clippt den scrollbaren Bereich */

  display: flex;
  justify-content: center; 
  align-items: stretch; 
}

/***********************************************
 * BODY WRAPPER (Modifier: Inhalt nicht zentrieren)
 ***********************************************/
.app-layout__body--top {
  justify-content: flex-start; /* Inhalt startet oben */
}

/***********************************************
 * BODY CONTENT (Block 1.2.1)
 ***********************************************/
.app-layout__body-content {
  position: relative;
  height: 100%;

  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  display: flex;
  flex-direction: column;
  justify-content: center;  /* vertikal zentriert */
  align-items: center;      /* horizontal zentriert */

  padding: 25px;            /* Innenabstand */
  background-color: #f3f3f1;
}

/***********************************************
 * BODY CONTENT WRAPPER (Modifier: Inhalt nicht zentrieren)
 ***********************************************/
.app-layout__body-content--top {
  justify-content: flex-start; /* Inhalt startet oben */
}

/***********************************************
 * BODY PANEL / CONTAINER (Block 1.2.1.1)
 ***********************************************/
.app-layout__body-panel {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 20px;
  row-gap: 20px;

  padding: 25px;

  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 20px;

  box-sizing: border-box;

  /* Desktop – feste Breite */
  width: 450px;
  max-width: 450px;
}

/* Mobile – 100% Breite */
@media (max-width: 767px) {
  .app-layout__body-panel {
    width: 100%;
    max-width: 100%;
  }
}

/***********************************************
 * BODY PANEL – Modifier: volle Breite (Desktop)
 ***********************************************/
.app-layout__body-panel--full {
  width: 100%;
  max-width: 100%;
}

/***********************************************
 * FOOTER (Block 1.3)
 ***********************************************/
.app-layout__footer {
  flex: 0 0 75px;
  min-height: 75px;

  position: relative;
  z-index: 10;

  display: flex;
  align-items: center;      /* Achse ausrichten */
  justify-content: center;  /* Hauptachse ausrichten */

  padding-left: 50px;
  padding-right: 50px;

  background-color: #ffffff;
  border-top: 1px solid #e0e0e0;
}


/***********************************************
 * MOBILE OPTIMIZATION (Optional)
 ***********************************************/
@media (max-width: 767px) {
  .app-layout__header,
  .app-layout__footer {
    flex-basis: 60px;
    min-height: 60px;
  }
}