/* CSS mit abgestuften Abständen, Größen und Positionierungen */

/* error */
.error{
  color: red;
  font-family: 'Roboto';
  padding-top: 4px;
}

/* Margins */
.margin-4 { margin: 4px; }
.margin-8 { margin: 8px; }
.margin-12 { margin: 12px; }
.margin-16 { margin: 16px; }
.margin-32 { margin: 32px; }
.margin-64 { margin: 64px; }
.margin-128 { margin: 128px; }

/* Margin Top */
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-32 { margin-top: 32px; }
.mt-64 { margin-top: 64px; }
.mt-72 { margin-top: 72px; }
.mt-80 { margin-top: 80px; }
.mt-128 { margin-top: 128px; }

/* Margin Bottom */
.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-32 { margin-bottom: 32px; }
.mb-64 { margin-bottom: 64px; }
.mb-72 { margin-bottom: 72px; }
.mb-80 { margin-bottom: 80px; }
.mb-128 { margin-bottom: 128px; }

/* Margin Left */
.ml-4 { margin-left: 4px; }
.ml-8 { margin-left: 8px; }
.ml-16 { margin-left: 16px; }
.ml-32 { margin-left: 32px; }
.ml-64 { margin-left: 64px; }
.ml-72 { margin-left: 72px; }
.ml-80 { margin-left: 80px; }
.ml-128 { margin-left: 128px; }

/* Margin Right */
.mr-4 { margin-right: 4px; }
.mr-8 { margin-right: 8px; }
.mr-16 { margin-right: 16px; }
.mr-32 { margin-right: 32px; }
.mr-64 { margin-right: 64px; }
.mr-72 { margin-right: 72px; }
.mr-80 { margin-right: 80px; }
.mr-128 { margin-right: 128px; }

/* Paddings */
.padding-4 { padding: 4px; }
.padding-8 { padding: 8px; }
.padding-12 { padding: 12px; }
.padding-16 { padding: 16px; }
.padding-32 { padding: 32px; }
.padding-64 { padding: 64px; }
.padding-128 { padding: 128px; }

/* Padding Top */
.pt-4 { padding-top: 4px; }
.pt-8 { padding-top: 8px; }
.pt-16 { padding-top: 16px; }
.pt-24 { padding-top: 24px; }
.pt-32 { padding-top: 32px; }
.pt-64 { padding-top: 64px; }
.pt-72 { padding-top: 72px; }
.pt-80 { padding-top: 80px; }
.pt-128 { padding-top: 128px; }

/* Padding Bottom */
.pb-4 { padding-bottom: 4px; }
.pb-8 { padding-bottom: 8px; }
.pb-16 { padding-bottom: 16px; }
.pb-24 { padding-bottom: 24px; }
.pb-32 { padding-bottom: 32px; }
.pb-64 { padding-bottom: 64px; }
.pb-72 { padding-bottom: 72px; }
.pb-80 { padding-bottom: 80px; }
.pb-128 { padding-bottom: 128px; }

/* Padding Left */
.pl-4 { padding-left: 4px; }
.pl-8 { padding-left: 8px; }
.pl-16 { padding-left: 16px; }
.pl-32 { padding-left: 32px; }
.pl-64 { padding-left: 64px; }
.pl-72 { padding-left: 72px; }
.pl-80 { padding-left: 80px; }
.pl-128 { padding-left: 128px; }

/* Padding Right */
.pr-4 { padding-right: 4px; }
.pr-8 { padding-right: 8px; }
.pr-16 { padding-right: 16px; }
.pr-32 { padding-right: 32px; }
.pr-64 { padding-right: 64px; }
.pr-72 { padding-right: 72px; }
.pr-80 { padding-right: 80px; }
.pr-128 { padding-right: 128px; }

/* Display */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }

/* Flex Direction*/
.flex-row{ flex-direction: row; }
.flex-col{ flex-direction: column; }
.flex-row-col {flex-direction: row;}



/* Positioning */
.static { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* Größen */
.width-4 { width: 4px; }
.width-8 { width: 8px; }
.width-12 { width: 12px; }
.width-16 { width: 16px; }
.width-32 { width: 32px; }
.width-64 { width: 64px; }
.width-72 { width: 72px; }
.width-80 { width: 80px; }
.width-128 { width: 128px; }

/* Breiten-Klassen */
.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-30 { width: 30%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-70 { width: 70%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }
.w-100 { width: 100%; }

.height-4 { height: 4px; }
.height-8 { height: 8px; }
.height-12 { height: 12px; }
.height-16 { height: 16px; }
.height-32 { height: 32px; }
.height-64 { height: 64px; }
.height-72 { height: 72px; }
.height-80 { height: 80px; }
.height-128 { height: 128px; }

/* Abstände (kombiniert) */
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }
.gap-64 { gap: 64px; }
.gap-128 { gap: 128px; }

/* Button Styles (wie Tailwind CSS) */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

a{
    text-decoration: none;
    color: black;
}

/* Text Styles */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }
.text-underline { text-decoration: underline; }

.font-normal { font-weight: normal; }
.font-bold { font-weight: bold; }
.font-light { font-weight: 300; }   
@media only screen and (max-width: 768px) {
  .flex-row-col {flex-direction: column;}
  .w-50{
    width: 100%;
  }
}