AMI_general_logo

AMI
Global
Library

Global Styles

AMI specific Color Space

primary-500

ami-light-100

ami-light-200

ami-light-300

ami-light-400

ami-light-500

secondary-100

secondary-200

secondary-300

secondary-400

secondary-500

ami-dark-100

ami-dark-200

ami-dark-300

ami-dark-400

ami-dark-500

success-50

success-700

danger-50

danger-700

Colors

Primary Color

Secondary Color

Tertiary Color

Very Dark

Dark

Medium Dark

Medium Light

Light

Very Light

Typography

Heading Font & Sizes

ami-headline-xlarge

ami-headline-large

ami-headline-medium

ami-headline-small

ami-body-standard

ami-body-small

ami-button-large

ami-button-standard

Be Vietnam Pro
Body Font & Default Size

abcdefghijklmnopqrstuvwxyz1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ

100 – Thin

200 – Extra Light

300 – Light

400 – Regular

500 – Medium

600 – Semi-Bold

700 – Bold

800 – Extra Bold

900 – Black

Instrument Serif
Body Font & Default Size

abcdefghijklmnopqrstuvwxyz1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ

400 – italic

Buttons & Links

Secondary Button
Tertiary Button
Small Button

Standard Link

Content & Wide Width

Content width

Wide width

Full width

Spacing Sizes

Huge

Large

Medium

Small

Tiny

Global CSS Helper classes

/* CSS Basics V.2.5 */

/* Rounded Elements*/

.is-rounded{ border-radius: 12px; overflow: hidden;}

/* Z-Index */
.zpush-2 { z-index: 2; }
.zpush-3 { z-index: 3; }
.zpush-4 { z-index: 4; }
.zpush-101 { z-index: 101; }
.zpush-999 { z-index: 999; }

/*Stretching*/
.stretch
{
  align-items: stretch;
}
/*Stretching Dynamic Templates - Insert Classname Dyn.Template Block*/
.dynamic-stretch{
  height: 100%;
}

/* Change Padding Settings if Main Group got a global Padding and you need to disable it in cases where the last Content Element got a background */

div.has-global-padding:has(.entry-content > :last-child.has-background) {
  padding-bottom: 0 !important;
}

/* Breakpoint Specific Block Enhancements */

/* Row */
@media (max-width: 599px) {
  .break-sm { flex-wrap: wrap !important; }
  .reverse-sm { flex-direction: column-reverse; }
}

@media (max-width: 992px) {
  .break-md { flex-wrap: wrap !important; }
  .reverse-md { flex-direction: column-reverse; }
}

@media (max-width: 1199px) {
  .break-lg { flex-wrap: wrap !important; }
  .reverse-lg { flex-direction: column-reverse; }
}

/* Grid Block Variation */

/* Grid-max-Columns */
@media (min-width: 1199px) {
  .grid-max-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }
  .grid-max-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  .grid-max-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .grid-max-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .grid-max-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .grid-max-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .grid-reverse-lg{ 
    direction: rtl;
  }
}

@media (min-width: 992px) {
  .grid-max-8-md {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }
  .grid-max-6-md {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  .grid-max-5-md {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .grid-max-4-md {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .grid-max-3-md {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .grid-max-2-md {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .grid-reverse-md{ 
    direction: rtl;
  }
}


/* Text Alignments */
@media (max-width: 599px) {
  .left-sm { text-align: left; }
  .right-sm { text-align: right; }
  .center-sm { text-align: center; }
}

@media (max-width: 992px) {
  .left-md { text-align: left; }
  .right-md { text-align: right; }
  .center-md { text-align: center; }
}

@media (max-width: 1199px) {
  .left-lg { text-align: left; }
  .right-lg { text-align: right; }
  .center-lg { text-align: center; }
}

/* Seperator Alignements*/
@media (max-width: 599px) {
  .float-left-sm { float: left; }
  .float-right-sm { float: right; }
}

@media (max-width: 992px) {
  .float-left-md { float: left; }
  .float-right-md { float: right; }
}

@media (max-width: 1199px) {
  .float-left-lg { float: left; }
  .float-right-lg { float: right; }
}

/* Off-Grid */

/* Wide width Sections */
.respect-grid-left {
  padding-left: max(var(--wp--style--root--padding-left), calc(50vw - calc(var(--wp--style--global--wide-size) / 2))) !important;
}
.respect-grid-right {
  padding-right: max(var(--wp--style--root--padding-left), calc(50vw - calc(var(--wp--style--global--wide-size) / 2))) !important;
}

/* Content width Sections */
.respect-contentgrid-left {
  padding-left: max(var(--wp--style--root--padding-left), calc(50vw - calc(var(--wp--style--global--content-size) / 2))) !important;
}
.respect-contentgrid-right {
  padding-right: max(var(--wp--style--root--padding-left), calc(50vw - calc(var(--wp--style--global--content-size) / 2))) !important;
}

/* AMI Customs */
/* AMI header base – no blur here */
.ami-header {
  position: sticky;            /* oder dein aktuelles Positioning */
  top: 0;
  z-index: 100;                /* header stays on top of page content */
  background: transparent;     /* background via ::before */
}

/* Header blur background */
/* Put blur on pseudo-element so it doesn't clip popover overlays */
.ami-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;        /* do not block clicks */
  z-index: -1;                 /* sit behind header content */
}

/* AMI Navigation */

.ami-nav-first .button, .ami-nav-first.wp-block-greyd-popover-button{
background: transparent;
border: none;
color: var(--wp--color--preset-foreground);
font-weight: 400;
padding: 0;
}

.ami-nav-first .button:hover, .ami-nav-first.wp-block-greyd-popover-button:hover{
background: transparent;
border: none;
color: var(--wp--preset--color--custom-ami-primary-500);
padding: 0;
}

.wp-block-navigation a:hover{
text-decoration: none;
color: var(--wp--preset--color--custom-ami-primary-500) !important; }

.wp-block-greyd-popover [role=dialog].is-variation-dropdown.is-position-bottom{
left: 0;}



.has-trigger:hover {
transform: translateY(-0.2rem);
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 2rem 2rem rgba(0, 0, 0, 0.1);
}

/* Emphasizing Font */

em {
font-family: var(--wp--preset--font-family--instrument-serif);
font-style: italic;
letter-spacing: 0.05rem;
font-weight: 400;
}

/* AMI Infinite Scroll Slider */

/* Viewport */
.ql-carousel--viewport {
  position: relative;
  overflow: hidden;
  width: 100vw;
}

/* Track */
.ql-carousel--track {
  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
  width: max-content;
  animation: ql-scroll 60s linear infinite;
}

/* Query Loop Segments */
.ql-carousel--segment {
  display: flex;
}

.ql-carousel--segment .wp-block-post-template {
  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cards */
.ql-carousel--segment .wp-block-post-template > li {
  flex: 0 0 auto;
  width: clamp(240px, 28vw, 360px);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.00);
}

/* Image sizing */
.ql-carousel--segment .wp-block-post-featured-image img {
  width: 100%;
  height: clamp(140px, 18vw, 220px);
  object-fit: cover;
}

/* Animation */
@keyframes ql-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Hover pause */
.ql-carousel--viewport:hover .ql-carousel--track {
  animation-play-state: paused;
}

/* Fade edges */
.ql-carousel--viewport::before,
.ql-carousel--viewport::after {
  content: "";
  position: absolute;
  top: 0;
  width: 10%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.ql-carousel--viewport::before {
  left: 0;
  background: linear-gradient(to right, var(--wp--preset--color--background, #fff) 70%, transparent);
}

.ql-carousel--viewport::after {
  right: 0;
  background: linear-gradient(to left, var(--wp--preset--color--background, #fff) 70%, transparent);
}

/* Responsive */
@media (max-width: 768px) {
  .ql-carousel--segment .wp-block-post-template > li {
    width: 75vw;
  }
}

/* AMI Accordions */

.wp-block-greyd-accordion__title{
font-family: var(--wp--preset--font-family--be-vietnam-pro);
font-size: var(--wp--preset--font-size--custom-4);
padding: 0;
background-color: transparent;
color: inherit;
}

.wp-block-greyd-accordion__content{
padding: 0;
background: transparent;}

/* AMI List Settings */

.ami-list > li > .list_icon{
height: 24px !important;
width: 24px !important;}

.ami-list > li > .list_content{
margin-top: calc((20px - (1em * var(--lineHeight, var(--wp--custom--line-height--normal)))) / 2) !important;}

Prestyled Blocks with helper Classes

  • List Item

  • List Item

  • List Item

  • List Item

/* CSS Basics V.2.5 */

/* Rounded Elements*/

.is-rounded{ border-radius: 12px; overflow: hidden;}

/* Z-Index */
.zpush-2 { z-index: 2; }
.zpush-3 { z-index: 3; }
.zpush-4 { z-index: 4; }
.zpush-101 { z-index: 101; }
.zpush-999 { z-index: 999; }

/*Stretching*/
.stretch
{
  align-items: stretch;
}
/*Stretching Dynamic Templates - Insert Classname Dyn.Template Block*/
.dynamic-stretch{
  height: 100%;
}

/* Change Padding Settings if Main Group got a global Padding and you need to disable it in cases where the last Content Element got a background */

div.has-global-padding:has(.entry-content > :last-child.has-background) {
  padding-bottom: 0 !important;
}

/* Breakpoint Specific Block Enhancements */

/* Row */
@media (max-width: 599px) {
  .break-sm { flex-wrap: wrap !important; }
  .reverse-sm { flex-direction: column-reverse; }
}

@media (max-width: 992px) {
  .break-md { flex-wrap: wrap !important; }
  .reverse-md { flex-direction: column-reverse; }
}

@media (max-width: 1199px) {
  .break-lg { flex-wrap: wrap !important; }
  .reverse-lg { flex-direction: column-reverse; }
}

/* Grid Block Variation */

/* Grid-max-Columns */
@media (min-width: 1199px) {
  .grid-max-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }
  .grid-max-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  .grid-max-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .grid-max-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .grid-max-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .grid-max-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .grid-reverse-lg{ 
    direction: rtl;
  }
}

@media (min-width: 992px) {
  .grid-max-8-md {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }
  .grid-max-6-md {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  .grid-max-5-md {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .grid-max-4-md {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .grid-max-3-md {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .grid-max-2-md {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .grid-reverse-md{ 
    direction: rtl;
  }
}


/* Text Alignments */
@media (max-width: 599px) {
  .left-sm { text-align: left; }
  .right-sm { text-align: right; }
  .center-sm { text-align: center; }
}

@media (max-width: 992px) {
  .left-md { text-align: left; }
  .right-md { text-align: right; }
  .center-md { text-align: center; }
}

@media (max-width: 1199px) {
  .left-lg { text-align: left; }
  .right-lg { text-align: right; }
  .center-lg { text-align: center; }
}

/* Seperator Alignements*/
@media (max-width: 599px) {
  .float-left-sm { float: left; }
  .float-right-sm { float: right; }
}

@media (max-width: 992px) {
  .float-left-md { float: left; }
  .float-right-md { float: right; }
}

@media (max-width: 1199px) {
  .float-left-lg { float: left; }
  .float-right-lg { float: right; }
}

/* Off-Grid */

/* Wide width Sections */
.respect-grid-left {
  padding-left: max(var(--wp--style--root--padding-left), calc(50vw - calc(var(--wp--style--global--wide-size) / 2))) !important;
}
.respect-grid-right {
  padding-right: max(var(--wp--style--root--padding-left), calc(50vw - calc(var(--wp--style--global--wide-size) / 2))) !important;
}

/* Content width Sections */
.respect-contentgrid-left {
  padding-left: max(var(--wp--style--root--padding-left), calc(50vw - calc(var(--wp--style--global--content-size) / 2))) !important;
}
.respect-contentgrid-right {
  padding-right: max(var(--wp--style--root--padding-left), calc(50vw - calc(var(--wp--style--global--content-size) / 2))) !important;
}

/* AMI Customs */
/* AMI header base – no blur here */
.ami-header {
  position: sticky;            /* oder dein aktuelles Positioning */
  top: 0;
  z-index: 100;                /* header stays on top of page content */
  background: transparent;     /* background via ::before */
}

/* Header blur background */
/* Put blur on pseudo-element so it doesn't clip popover overlays */
.ami-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;        /* do not block clicks */
  z-index: -1;                 /* sit behind header content */
}

/* AMI Navigation */

.ami-nav-first .button, .ami-nav-first.wp-block-greyd-popover-button{
background: transparent;
border: none;
color: var(--wp--color--preset-foreground);
font-weight: 400;
padding: 0;
}

.ami-nav-first .button:hover, .ami-nav-first.wp-block-greyd-popover-button:hover{
background: transparent;
border: none;
color: var(--wp--preset--color--custom-ami-primary-500);
padding: 0;
}

.wp-block-navigation a:hover{
text-decoration: none;
color: var(--wp--preset--color--custom-ami-primary-500) !important; }

.wp-block-greyd-popover [role=dialog].is-variation-dropdown.is-position-bottom{
left: 0;}



.has-trigger:hover {
transform: translateY(-0.2rem);
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 2rem 2rem rgba(0, 0, 0, 0.1);
}

/* Emphasizing Font */

em {
font-family: var(--wp--preset--font-family--instrument-serif);
font-style: italic;
letter-spacing: 0.05rem;
font-weight: 400;
}

/* AMI Infinite Scroll Slider */

/* Viewport */
.ql-carousel--viewport {
  position: relative;
  overflow: hidden;
  width: 100vw;
}

/* Track */
.ql-carousel--track {
  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
  width: max-content;
  animation: ql-scroll 60s linear infinite;
}

/* Query Loop Segments */
.ql-carousel--segment {
  display: flex;
}

.ql-carousel--segment .wp-block-post-template {
  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cards */
.ql-carousel--segment .wp-block-post-template > li {
  flex: 0 0 auto;
  width: clamp(240px, 28vw, 360px);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.00);
}

/* Image sizing */
.ql-carousel--segment .wp-block-post-featured-image img {
  width: 100%;
  height: clamp(140px, 18vw, 220px);
  object-fit: cover;
}

/* Animation */
@keyframes ql-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Hover pause */
.ql-carousel--viewport:hover .ql-carousel--track {
  animation-play-state: paused;
}

/* Fade edges */
.ql-carousel--viewport::before,
.ql-carousel--viewport::after {
  content: "";
  position: absolute;
  top: 0;
  width: 10%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* Left fade */
.ql-carousel--viewport::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--wp--preset--color--custom-ami-secondary-100) 50%,
    transparent
  );
}

/* Right fade */
.ql-carousel--viewport::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--wp--preset--color--custom-ami-secondary-100) 50%,
    transparent
  );
}

/* Responsive */
@media (max-width: 768px) {
  .ql-carousel--segment .wp-block-post-template > li {
    width: 75vw;
  }
}

/* AMI Accordions */

.wp-block-greyd-accordion__title{
font-family: var(--wp--preset--font-family--be-vietnam-pro);
font-size: var(--wp--preset--font-size--custom-4);
padding: 0;
background-color: transparent;
color: inherit;
}

.wp-block-greyd-accordion__content{
padding: 0;
background: transparent;}

/* AMI List Settings */

.ami-list > li > .list_icon{
height: 24px !important;
width: 24px !important;
font-size: 1.8rem !important;
color: var(--wp--preset--color--custom-ami-primary-500);
}

.ami-list > li > .list_content{
margin-top: calc((28px - (1em * var(--lineHeight, var(--wp--custom--line-height--normal)))) / 2) !important;
margin-left: 8px !important;}

/* AMI Footer Links SEO */

.ami-footer-link a{ font-size: 1rem;
text-decoration: none;}

.ami-footer-link a:hover{
color: var(--wp--preset--color--custom-ami-primary-500);}