/* --------------------------------------------------

  :::  Utility Styles

-------------------------------------------------- */



/* --------------------------------------------------
  :::  Clearfix
-------------------------------------------------- */
.cf:after {
    content: '';
    display: table;
    clear: both;
}
  

/* --------------------------------------------------
  :::  Floats
-------------------------------------------------- */
.fl {
    float: left;
}
.fr {
    float: right;
}


/* --------------------------------------------------
  :::  Align
-------------------------------------------------- */
.tl {
    text-align: left;
}
.tr {
    text-align: right;
}
.tc {
    text-align: center;
}


/* --------------------------------------------------
  :::  Visually hidden
-------------------------------------------------- */
.hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}


/* --------------------------------------------------
  :::  Truncate
-------------------------------------------------- */
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* --------------------------------------------------
  :::  Scroll Verhalten
-------------------------------------------------- */
[id] {
  scroll-margin-top: 6em;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* NOCH NICHT IM GEBRAUCH!!!!!!!!!!!!!!!!!!!!!!!!! */
.mt-0 { margin-top: 0 !important; }
.mt-g-g { margin-top: var(--grid-gutter); }
.mt-3xs-2xs { margin-top: var(--space-3xs-2xs); }
.mt-2xs-xs { margin-top: var(--space-2xs-xs); }
.mt-xs-s { margin-top: var(--space-xs-s); }
.mt-s-m { margin-top: var(--space-s-m); }
.mt-m-l { margin-top: var(--space-m-l); }
.mt-l-xl { margin-top: var(--space-l-xl); }
.mt-xl-2xl { margin-top: var(--space-xl-2xl); }
.mt-2xl-3xl { margin-top: var(--space-2xl-3xl); }

.mb-0 { margin-bottom: 0 !important; }
.mb-g-g { margin-bottom: var(--grid-gutter); }
.mb-3xs-2xs { margin-bottom: var(--space-3xs-2xs); }
.mb-2xs-xs { margin-bottom: var(--space-2xs-xs); }
.mb-xs-s { margin-bottom: var(--space-xs-s); }
.mb-s-m { margin-bottom: var(--space-s-m); }
.mb-m-l { margin-bottom: var(--space-m-l); }
.mb-l-xl { margin-bottom: var(--space-l-xl); }
.mb-xl-2xl { margin-bottom: var(--space-xl-2xl); }
.mb-2xl-3xl { margin-bottom: var(--space-2xl-3xl); }

.pt-0 { padding-top: 0 !important; }
.bt-g-g { padding-top: var(--grid-gutter); }
.pt-3xs-2xs { padding-top: var(--space-3xs-2xs); }
.pt-2xs-xs { padding-top: var(--space-2xs-xs); }
.pt-xs-s { padding-top: var(--space-xs-s); }
.pt-s-m { padding-top: var(--space-s-m); }
.pt-m-l { padding-top: var(--space-m-l); }
.pt-l-xl { padding-top: var(--space-l-xl); }
.pt-xl-2xl { padding-top: var(--space-xl-2xl); }
.pt-2xl-3xl { padding-top: var(--space-2xl-3xl); }

.pb-0 { padding-bottom: 0 !important; }
.pb-g-g { padding-bottom: var(--grid-gutter); }
.pb-3xs-2xs { padding-bottom: var(--space-3xs-2xs); }
.pb-2xs-xs { padding-bottom: var(--space-2xs-xs); }
.pb-xs-s { padding-bottom: var(--space-xs-s); }
.pb-s-m { padding-bottom: var(--space-s-m); }
.pb-m-l { padding-bottom: var(--space-m-l); }
.pb-l-xl { padding-bottom: var(--space-l-xl); }
.pb-xl-2xl { padding-bottom: var(--space-xl-2xl); }
.pb-2xl-3xl { padding-bottom: var(--space-2xl-3xl); }