/* ==============================================
   CORE: layout.css
   ============================================== */
/* ==============================================*/
/* === Сolumn + flexible ArtMuz-Struktur === */
/* ==============================================*/

.am-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between; /* Gleichmäßig verteilen */
  gap: 1%; /* Kleiner Abstand */
  margin: 10px 0 15px 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* === Spalten === */
[class^="am-col-"] {
  padding: 2px 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  text-align: left;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
}

/* === Gleichmäßige Verteilung von drei Spalten === */
.am-col-1-3 { flex: 0 0 31.5%; } /* Vorher 32 %, jetzt genauer */
.am-col-1-2 { flex: 0 0 49%; }
.am-col-1-4 { flex: 0 0 23.8%; }

/* Die übrigen Werte bleiben unverändert */
.am-col-1-1 { flex: 0 0 100%; }
.am-col-2-3 { flex: 0 0 65%; }
.am-col-2-4 { flex: 0 0 48.5%; }
.am-col-3-4 { flex: 0 0 73%; }
.am-col-1-5 { flex: 0 0 18%; }
.am-col-2-5 { flex: 0 0 38%; }
.am-col-3-5 { flex: 0 0 58%; }
.am-col-4-5 { flex: 0 0 78%; }
.am-col-1-6 { flex: 0 0 15%; }
.am-col-2-6 { flex: 0 0 31.5%; }
.am-col-3-6 { flex: 0 0 48%; }
.am-col-4-6 { flex: 0 0 64.5%; }
.am-col-5-6 { flex: 0 0 81%; }

/* === Innerer Container === */
.am-col-inner {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 2px 4px;
  transition: all 0.25s ease-in-out;
  overflow: hidden;
  text-align: left;
}

.am-row.vermid {
  align-items: center;
}

/* === Medien === */
.am-col-inner img,
.am-col-inner iframe,
.am-col-inner object,
.am-col-inner embed {
  max-width: 100%;
  height: auto;
  width: 100%;
  display: block;
  margin: 0 auto;
  border-radius: 4px;
  transition: transform 0.25s ease-in-out;
}

.am-col-inner img:hover {
  transform: scale(1.01);
}

/* === Korrektur gegen Layout-Sprünge === */
.am-col-inner img[width][height] {
  aspect-ratio: attr(width number) / attr(height number);
  object-fit: cover;
}

/* === Vertikale Ausrichtung === */

/* Standardmäßig oben ausrichten */
.align-top .am-col-inner {
  justify-content: flex-start;
}

/* Wenn die Zeile .vermid hat, werden alle Spalten zentriert */
.am-row.vermid > [class^="am-col-"] > .am-col-inner {
  justify-content: center;
}

/* Manuelle Überschreibung für einzelne Spalten */
.am-row.vermid > .align-top > .am-col-inner,
.align-top .am-col-inner {
  justify-content: flex-start;
}

.am-row.vermid > .align-middle > .am-col-inner,
.align-middle .am-col-inner {
  justify-content: center;
}

.am-row.vermid > .align-bottom > .am-col-inner,
.align-bottom .am-col-inner {
  justify-content: flex-end;
}
/* Statt <br> */
.am-row.vermid > [class*="am-col-"]:not(:has(img, picture, iframe, video, object, embed)) > .am-col-inner {
  padding-top: 22px;
}

@media (max-width: 767px) {
  .am-row.vermid > [class*="am-col-"]:not(:has(img, picture, iframe, video, object, embed)) > .am-col-inner {
    padding-top: 0;
  }
}

/* === Horizontale Ausrichtung === */

.align-left .am-col-inner {
  align-items: flex-start;
  text-align: left;
}

.align-center .am-col-inner {
  align-items: center;
  text-align: center;
}

.align-right .am-col-inner {
  align-items: flex-end;
  text-align: right;
}

/* === Responsives Verhalten === */
@media (max-width: 1024px) {
  [class^="am-col-"] { flex: 1 1 48%; }
}

@media (max-width: 767px) {
  [class^="am-col-"] {
    flex: 1 1 100%;
  }
  .am-col-inner {
    padding: 3px;
  }
}

/* === Sicherer Inhaltsbereich === */
.am-row * {
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
}

/* === Designbeispiel (vor dem Produktiveinsatz entfernen) === */
.box {
  background: #fafafa;
  border: 1px solid #ddd;
  text-align: center;
  padding: 8px;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ==============================================*/
/* === ArtMuz Universal Flex Row === */
/* ==============================================*/
/* === ArtMuz Universal Flex Grid === Universeller Container für Videos, Buttons, Bilder, Text usw. Funktioniert mit [embed], <iframe>, <img>, <a> usw. Erstellt automatisch zwei Spalten und passt sich an verschiedene Bildschirmgrößen an. */
.am-flex-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48%, 1fr)); /* Zwei Spalten (responsiv) */
  gap: 2%;                     /* Abstand zwischen den Elementen */
  align-items: center;          /* Vertikale Ausrichtung */
  justify-content: center;      /* Horizontale Ausrichtung */
  margin-top: 10px;
  margin-bottom: 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* === Universelle innere Elemente === Alle Elemente innerhalb von (.am-flex-row > *) erhalten flexibles Verhalten. */
.am-flex-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
  align-items: center;       /* Vertikal ausgerichtet */
  justify-content: center;
  gap: 2%;
  margin: 10px 0 20px 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.am-flex-row > * {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;      /* Damit beide Buttons die gleiche Höhe haben */
  text-align: center;
  transition: all 0.25s ease-in-out;
  overflow: hidden;
  margin-bottom: 0;          /* Zusätzlichen Abstand entfernen, damit nichts springt */
}

/* === Responsives Verhalten für Videos, Bilder und Objekte === */
.am-flex-row img,
.am-flex-row iframe,
.am-flex-row object,
.am-flex-row embed {
  max-width: 100%;
  height: auto;
  width: 100%;
  display: block;
  border-radius: 6px;
  transition: transform 0.3s ease-in-out;
  aspect-ratio: 16 / 9; /* Unterstützung des korrekten Video-Seitenverhältnisses */
}

/* === Leichter Hover-Effekt für Bilder und Videos === */
.am-flex-row img:hover,
.am-flex-row iframe:hover {
  transform: scale(1.01);
}

/* === Mobile Anpassung === Bei weniger als 768 px wird alles in einer Spalte dargestellt. */
@media (max-width: 767px) {
  .am-flex-row {
    grid-template-columns: 1fr; /* Eine Spalte */
    gap: 10px;                  /* Größerer Abstand zwischen den Elementen */
  }
}

/* === Zusätzlich: optionale Klassen === .am-flex-3 → drei Spalten .am-flex-4 → vier Spalten. Direkt im HTML hinzufügen. */
.am-flex-3 {
  grid-template-columns: repeat(auto-fill, minmax(31%, 1fr));
}

.am-flex-4 {
  grid-template-columns: repeat(auto-fill, minmax(23%, 1fr));
}

/* === Sicherer Inhaltsbereich === */
.am-flex-row * {
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
}


/* ==============================================
   ArtMuz Button Row Fix
   Fix for .am-flex-row with direct buttons/links.
   Use:
   <div class="am-flex-row">
     <a class="artmuz-btn btn-orange btn-m fullwidth" href="#form-anfrage">Kostenlose Anfrage</a>
     <a class="artmuz-btn btn-green btn-m fullwidth" href="#form-frage-stellen">Kontaktiere uns</a>
   </div>
============================================== */
.am-flex-row,
.am-btn-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 10px 0 20px !important;
}

.am-flex-row > *,
.am-btn-row > * {
  flex: 1 1 calc(50% - 7px) !important;
  min-width: 240px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.am-flex-row > a.artmuz-btn,
.am-btn-row > a.artmuz-btn,
.am-flex-row > a.ast-button,
.am-btn-row > a.ast-button,
.am-flex-row > a.button,
.am-btn-row > a.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-height: 46px !important;
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.25 !important;
}

/* Inside .am-flex-row, fullwidth means: fill its column, not the whole row. */
.am-flex-row > .fullwidth,
.am-btn-row > .fullwidth {
  width: auto !important;
}

.am-flex-row img,
.am-flex-row iframe,
.am-flex-row object,
.am-flex-row embed,
.am-btn-row img,
.am-btn-row iframe,
.am-btn-row object,
.am-btn-row embed {
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  display: block;
  box-sizing: border-box;
}

.am-flex-row iframe,
.am-flex-row object,
.am-flex-row embed,
.am-btn-row iframe,
.am-btn-row object,
.am-btn-row embed {
  aspect-ratio: 16 / 9;
}

.am-flex-3 > * {
  flex-basis: calc(33.333% - 10px) !important;
  min-width: 220px !important;
}

.am-flex-4 > * {
  flex-basis: calc(25% - 11px) !important;
  min-width: 180px !important;
}

@media (max-width: 600px) {
  .am-flex-row,
  .am-btn-row {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .am-flex-row > *,
  .am-btn-row > * {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}


/* ==============================================
   ArtMuz FINAL Row Module Fix 3.2.9
   Problem fixed:
   - WordPress can wrap links/buttons in <p> and <br>
   - .fullwidth made every button take the whole row
   - .am-flex-row inside grid areas could stay in one column
   Use for buttons, videos, images, iframe, image + text:
   <div class="am-flex-row">
     <a class="artmuz-btn btn-orange btn-m fullwidth" href="#form-anfrage">Kostenlose Anfrage</a>
     <a class="artmuz-btn btn-green btn-m fullwidth" href="#form-frage-stellen">Kontaktiere uns</a>
   </div>
============================================== */
.am-flex-row,
.am-btn-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 14px !important;
  row-gap: 14px !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 10px 0 20px !important;
  grid-column: 1 / -1 !important;
}

/* If WordPress inserts <p> or <br>, they must not destroy the row. */
.am-flex-row > p,
.am-btn-row > p {
  display: contents !important;
}

.am-flex-row > br,
.am-btn-row > br {
  display: none !important;
}

.am-flex-row > *,
.am-btn-row > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Buttons and links: fill only their own column, not the whole row. */
.am-flex-row > a,
.am-flex-row > p > a,
.am-btn-row > a,
.am-btn-row > p > a,
.am-flex-row > button,
.am-btn-row > button {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.am-flex-row > a.artmuz-btn,
.am-flex-row > p > a.artmuz-btn,
.am-btn-row > a.artmuz-btn,
.am-btn-row > p > a.artmuz-btn,
.am-flex-row > a.ast-button,
.am-flex-row > p > a.ast-button,
.am-btn-row > a.ast-button,
.am-btn-row > p > a.ast-button,
.am-flex-row > a.button,
.am-flex-row > p > a.button,
.am-btn-row > a.button,
.am-btn-row > p > a.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.25 !important;
}

.am-flex-row > .fullwidth,
.am-flex-row > p > .fullwidth,
.am-btn-row > .fullwidth,
.am-btn-row > p > .fullwidth {
  width: 100% !important;
}

/* Media elements: two columns on desktop, one column on mobile. */
.am-flex-row img,
.am-flex-row iframe,
.am-flex-row object,
.am-flex-row embed,
.am-flex-row video,
.am-flex-row figure,
.am-flex-row .wp-block-image,
.am-btn-row img,
.am-btn-row iframe,
.am-btn-row object,
.am-btn-row embed,
.am-btn-row video,
.am-btn-row figure,
.am-btn-row .wp-block-image {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.am-flex-row iframe,
.am-flex-row object,
.am-flex-row embed,
.am-flex-row video,
.am-btn-row iframe,
.am-btn-row object,
.am-btn-row embed,
.am-btn-row video {
  display: block !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
}

.am-flex-row img,
.am-btn-row img {
  display: block !important;
  height: auto !important;
}

/* Optional column variants. */
.am-flex-row.am-flex-3,
.am-btn-row.am-flex-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.am-flex-row.am-flex-4,
.am-btn-row.am-flex-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 767px) {
  .am-flex-row,
  .am-btn-row,
  .am-flex-row.am-flex-3,
  .am-btn-row.am-flex-3,
  .am-flex-row.am-flex-4,
  .am-btn-row.am-flex-4 {
    grid-template-columns: 1fr !important;
    row-gap: 10px !important;
  }
}




/* ==============================================
   CORE: buttons.css
   ============================================== */
/* ==============================================*/
/* ===== ArtMuz Universal Buttons + Animationen ===== */
/* ==============================================*/

.artmuz-btn {
  display: inline-block;
  width: auto;
  padding: 12px 14px;
  /*border: 1px solid var(--btn-border, transparent);*/
  border: var(--btn-border-width, 1px) solid var(--btn-border, transparent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  text-align: center;
  cursor: pointer;
  border-radius: var(--btn-radius, 8px);
  background: var(--btn-bg, #ff6c00);
  color: var(--btn-color, #fff) !important;
  transition: all var(--btn-duration, 0.35s) var(--btn-ease, ease-in-out);
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
}

/* === Hover-Effekt mit leichtem Anheben === */
.artmuz-btn:hover {
  background: var(--btn-bg-hover, #ff7f24);
  color: var(--btn-color-hover, #fff) !important;
  border-color: var(--btn-border-hover, var(--btn-bg-hover, #ff7f24));
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* === Klickanimation (Puls) === */
.artmuz-btn:active {
  transform: scale(0.97);
}

/* === Glanz-Effekt beim Hover === */
.artmuz-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  /*background: rgba(255, 255, 255, 0.25);*/
  background: var(--btn-gloss, rgba(255, 255, 255, 0.25));
  transform: skewX(-25deg);
  transition: all 0.7s ease-in-out;
}
.artmuz-btn:hover::after {
  left: 125%;
}

/* === Größenvarianten === */
.btn-s { padding: 6px 20px; font-size: 12px; }
.btn-m { padding: 10px 28px; font-size: 14px; }
.btn-l { padding: 14px 36px; font-size: 16px; }
.btn-x { padding: 18px 42px; font-size: 18px; }

/* === Icons === */
.artmuz-btn i {
    margin: 1px 6px;
	padding-top: 3px;
    font-size: 14px;
}

/* === Abrundungsradius === */
[data-radius="none"]  { --btn-radius: 0px; }
[data-radius="soft"]  { --btn-radius: 6px; }
[data-radius="round"] { --btn-radius: 30px; }
[data-radius="pill"]  { --btn-radius: 50px; }

/* === Farbvorgaben === */
.btn-orange {
  --btn-bg: #ff6c00;
  --btn-bg-hover: #ff7f24;
  --btn-color: #fff;
  --btn-color-hover: #fff;
  --btn-border: transparent;
  --btn-border-hover: transparent;
}

.btn-green {
  --btn-bg: #53ad00;
  --btn-bg-hover: #00d166;
  --btn-color: #fff;
  --btn-color-hover: #fff;
  --btn-border: transparent;
  --btn-border-hover: transparent;
}

.btn-gold {
  --btn-bg: #C79A3B;
  --btn-bg-hover: #DAA83E;
  --btn-color: #fff;
  --btn-color-hover: #fff;
  --btn-border: transparent;
  --btn-border-hover: transparent;
}

.btn-olive {
  --btn-bg: #9BA11C;
  --btn-bg-hover: #ADB51B;
  --btn-color: #fff;
  --btn-color-hover: #fff;
  --btn-border: transparent;
  --btn-border-hover: transparent;
}

.btn-blue {
  --btn-bg: #007bff;
  --btn-bg-hover: #2196f3;
  --btn-color: #fff;
  --btn-color-hover: #fff;
  --btn-border: transparent;
  --btn-border-hover: transparent;
}

.btn-darkblue {
  --btn-bg: #1E4B87;
  --btn-bg-hover: #2760A8;
  --btn-color: #fff;
  --btn-color-hover: #fff;
  --btn-border: transparent;
  --btn-border-hover: transparent;
}

.btn-dark {
  --btn-bg: #333;
  --btn-bg-hover: #444;
  --btn-color: #fff;
  --btn-color-hover: #fff;
  --btn-border: transparent;
  --btn-border-hover: transparent;
}

/* === Outline-Farbvorgaben === */
.btn-orange-outline {
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  --btn-color: #ff6c00;
  --btn-color-hover: #ff6c00;
  --btn-border: #ff6c00;
  --btn-border-hover: #ff6c00;
  --btn-border-width: 1px;
  --btn-gloss: rgba(255, 108, 0, 0.14);
}

.btn-green-outline {
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  --btn-color: #53ad00;
  --btn-color-hover: #53ad00;
  --btn-border: #53ad00;
  --btn-border-hover: #53ad00;
  --btn-border-width: 1px;
  --btn-gloss: rgba(83, 173, 0, 0.14);
}

.btn-gold-outline {
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  --btn-color: #C79A3B;
  --btn-color-hover: #C79A3B;
  --btn-border: #C79A3B;
  --btn-border-hover: #C79A3B;
  --btn-border-width: 1px;
  --btn-gloss: rgba(199, 154, 59, 0.16);
}

.btn-olive-outline {
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  --btn-color: #9BA11C;
  --btn-color-hover: #9BA11C;
  --btn-border: #9BA11C;
  --btn-border-hover: #9BA11C;
  --btn-border-width: 1px;
  --btn-gloss: rgba(155, 161, 28, 0.16);
}

.btn-blue-outline {
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  --btn-color: #007bff;
  --btn-color-hover: #007bff;
  --btn-border: #007bff;
  --btn-border-hover: #007bff;
  --btn-border-width: 1px;
  --btn-gloss: rgba(0, 123, 255, 0.14);
}

.btn-darkblue-outline {
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  --btn-color: #1E4B87;
  --btn-color-hover: #1E4B87;
  --btn-border: #1E4B87;
  --btn-border-hover: #1E4B87;
  --btn-border-width: 1px;
  --btn-gloss: rgba(30, 75, 135, 0.16);
}

.btn-dark-outline {
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  --btn-color: #333;
  --btn-color-hover: #333;
  --btn-border: #333;
  --btn-border-hover: #333;
  --btn-border-width: 1px;
  --btn-gloss: rgba(0, 0, 0, 0.10);
}

/* === Breite === */
.fullwidth { width: 100%; display: block; }
.halfwidth { width: 50%; display: block; }
.auto      { width: auto !important; display: inline-block !important;}

/* === Ausrichtung === */
.btn-left   { display: flex; justify-content: flex-start; }
.btn-center { display: flex; justify-content: center; }
.btn-right  { display: flex; justify-content: flex-end; }

/* === Button-Wrapper === */
.artmuz-btn-wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0;
}

/* === Einblendeffekte (Entry-Animationen) === */
/* === Sanfte Einblendanimationen für ArtMuz-Buttons === */
.fade-in,
.slide-up,
.slide-down,
.zoom-in,
.bounce-in {
  opacity: 0;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); /* Sanftere Bewegungskurve */
}

/* Animationen werden aktiviert, wenn das Element in den sichtbaren Bereich kommt */
.fade-in.visible,
.slide-up.visible,
.slide-down.visible,
.zoom-in.visible,
.bounce-in.visible {
  opacity: 1;
}

/* === Universelle Parameter über CSS-Variablen === */
.fade-in.visible {
  animation: fadeIn var(--btn-duration, 1.5s) ease-out var(--btn-delay, 0s);
}

.slide-up.visible {
  animation: slideUp var(--btn-duration, 1.5s) ease-out var(--btn-delay, 0s);
}

.slide-down.visible {
  animation: slideDown var(--btn-duration, 1.5s) ease-out var(--btn-delay, 0s);
}

.zoom-in.visible {
  animation: zoomIn var(--btn-duration, 1.5s) ease-out var(--btn-delay, 0s);
}

.bounce-in.visible {
  animation: bounceIn var(--btn-duration, 1.5s) cubic-bezier(0.68,-0.55,0.27,1.55) var(--btn-delay, 0s);
}

/* === Keyframes === */
@keyframes fadeIn {
  0%   { opacity: 0; transform: translateY(15px) scale(0.98); }
  60%  { opacity: 1; transform: translateY(0) scale(1.02); }
  100% { transform: scale(1); }
}

@keyframes slideUp {
  0%   { opacity: 0; transform: translateY(40px); }
  80%  { opacity: 1; transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

@keyframes slideDown {
  0%   { opacity: 0; transform: translateY(-40px); }
  80%  { opacity: 1; transform: translateY(3px); }
  100% { transform: translateY(0); }
}

@keyframes zoomIn {
  0%   { opacity: 0; transform: scale(0.85); }
  70%  { opacity: 1; transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.3) translateY(40px); }
  50%  { opacity: 1; transform: scale(1.1) translateY(-10px); }
  70%  { transform: scale(0.95) translateY(3px); }
  100% { transform: scale(1) translateY(0); }
}


/* ==============================================*/
/* =========== Sticky-Mobile-Buttons =========== */
/* ==============================================*/

@media (max-width: 1024px) {
  .sticky-bottom-buttons {
    position: fixed !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    z-index: 9999 !important;
  }

  .sticky-bottom-buttons.single-button {
    grid-template-columns: 1fr !important;
  }

  .sticky-bottom-buttons .sticky-btn {
    width: 100% !important;
    height: 47px;
    line-height: 25px !important;
    font-size: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  body {padding-bottom: 28px !important;}
  .scroll-top {bottom: 50px !important;}
}

@media (min-width: 1025px) {
  .sticky-bottom-buttons { display: none !important; }
}

@media screen and (max-width: 768px) {
  .sticky-bottom-buttons .sticky-btn span {
    line-height: 1.6 !important;
  }
}

.desk-block {
  margin: 20px 0 !important;
  padding: 15px !important;
}



/* ==============================================
   CORE: cards.css
   ============================================== */
/* ==============================================*/
/* ========== Container für alle Blöcke ========= */
/* ==============================================*/

.am-col-2-item,
.am-col-3-item {
    display: grid !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    padding: 0 !important;
    margin-top: 0;
    margin-bottom: 20px;

    text-align: left;
    align-items: stretch;
    justify-content: normal;

    flex: 0 0 100% !important;
}

.am-col-2-item {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.am-col-3-item {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.am-back-item {
    background: #fafafa;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    margin-bottom: 20px;
}

.am-back-item h3,
.am-back-item h4 {
    margin-bottom: 8px;
}

.am-back-item small {
    display: block;
    margin-bottom: 12px;
    color: #777;
}

.am-back-item ul {
    margin: 0;
    padding-left: 20px;
}

.am-back-item li {
    margin-bottom: 6px;
    list-style: none;
}

.am-back-item li i {
    margin-right: 6px;
}

@media (max-width: 768px) {
    .am-col-2-item {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .am-col-3-item {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .am-col-3-item {
        grid-template-columns: 1fr;
    }
}

/* SVG-Icon */

.am-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    font-weight: 600;
    color: inherit;
    font-family: "Expletus Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.am-label svg {
    color: inherit;
    stroke: currentColor;
    width: 14px;
    height: 14px;
}

/* ==============================================*/
/* Acts: UL in zwei Spalten */
/* ==============================================*/

.content-in-2-col ul {
    columns: 2;
    column-gap: 30px;
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.content-in-2-col li {
    break-inside: avoid;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
}

.content-in-2-col .am-label {
    margin-right: 6px;
    flex: 0 0 auto;
    line-height: 1;
    margin-top: 6px;
}

.content-in-2-col .ast-icon svg {
    display: block;
}

@media (max-width: 768px) {
    .content-in-2-col ul {
        columns: 1;
    }
}



/* ==============================================
   CORE: lists.css
   ============================================== */
/* ============================================== */
/* === ArtMuz SVG-Liste / Listen mit SVG-Icons === */
/* ============================================== */

ul.am-list {
  --am-list-color: #08be07;
  --am-list-size: 18px;
  --am-list-gap: 2em;
  --am-list-line-height: 1.7em;
  --am-list-icon-top: 0.20em;

  /* Standard-Icon — Häkchen */
  --am-list-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17 4 12'/%3E%3C/svg%3E");

  list-style: none !important;
  margin: 0 0 16px 0 !important;
  padding-left: 0 !important;
}

ul.am-list > li {
  position: relative;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 0 0 var(--am-list-gap) !important;
  line-height: var(--am-list-line-height);
}

ul.am-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--am-list-icon-top);

  width: var(--am-list-size);
  height: var(--am-list-size);

  background-color: var(--am-list-color);

  -webkit-mask-image: var(--am-list-svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: var(--am-list-svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}


/* === Farben === */

ul.am-list-green {
  --am-list-color: #08be07;
}

ul.am-list-white {
  --am-list-color: #ffffff;
}

ul.am-list-gray {
  --am-list-color: #aaaaaa;
}

ul.am-list-darkgray {
  --am-list-color: #777777;
}

ul.am-list-orange {
  --am-list-color: #f59e0b;
}

ul.am-list-blue {
  --am-list-color: #2563eb;
}

ul.am-list-darkblue {
  --am-list-color: #3d6e97;
}

ul.am-list-red {
  --am-list-color: #d93025;
}


/* === SVG-Icons === */

/* Häkchen */
ul.am-list-check {
  --am-list-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17 4 12'/%3E%3C/svg%3E");
  --am-list-icon-top: 0.15em;
}

/* Kleines Dreieck */
ul.am-list-caret {
  --am-list-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5l10 7-10 7z' fill='black'/%3E%3C/svg%3E");
}

/* Pfeil nach rechts */
ul.am-list-arrow {
  --am-list-size: 18px;
  --am-list-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M15 5l7 7-7 7'/%3E%3C/svg%3E");
}

/* Langer Pfeil */
ul.am-list-langarrow {
  --am-list-size: 18px;
  --am-list-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M3 12h15'/%3E%3Cpath d='M14 8l4 4-4 4'/%3E%3C/svg%3E");
}

/* Dünner Pfeil */
ul.am-list-linearrow {
  --am-list-size: 18px;
  --am-list-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M3 12h15'/%3E%3Cpath d='M14 8l4 4-4 4'/%3E%3C/svg%3E");
}

/* Gebogener Pfeil */
ul.am-list-turn {
  --am-list-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19v-4a6 6 0 0 1 6-6h8'/%3E%3Cpath d='M15 5l5 4-5 4'/%3E%3C/svg%3E");
}

/* Gebogener Pfeil 2 */
ul.am-list-turn2 {
  --am-list-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17c0-5 4-8 9-8h7'/%3E%3Cpath d='M16 5l4 4-4 4'/%3E%3C/svg%3E");
}

/* Einfacher Chevron */
ul.am-list-chevron {
  --am-list-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

/* Doppelter Chevron */
ul.am-list-double {
  --am-list-size: 14px;
  --am-list-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5l7 7-7 7'/%3E%3Cpath d='M12 5l7 7-7 7'/%3E%3C/svg%3E");
}

/* Hand / Like */
ul.am-list-hand {
  --am-list-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10v11'/%3E%3Cpath d='M7 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3'/%3E%3Cpath d='M7 10l4-8a3 3 0 0 1 4 3l-1 5h5a2 2 0 0 1 2 2.4l-1.5 7A2 2 0 0 1 17.5 21H7'/%3E%3C/svg%3E");
}

/* Stern */
ul.am-list-star {
  --am-list-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14l-5-4.87 6.91-1.01L12 2z' fill='black'/%3E%3C/svg%3E");
}

/* Musiknote */
ul.am-list-note {
  --am-list-size: 18px;
  --am-list-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M16 3v12.5A3.5 3.5 0 1 1 14 12.35V6h-6v10.5A3.5 3.5 0 1 1 6 13.35V3z'/%3E%3C/svg%3E");
}

/* Punkt */
ul.am-list-dot {
  --am-list-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.5' fill='black'/%3E%3C/svg%3E");
}

/* === Größen === */

ul.am-list-small {
  --am-list-size: 14px;
  --am-list-gap: 1.4em;
}

ul.am-list-big {
  --am-list-size: 20px;
  --am-list-gap: 20em;
}

ul.am-list-large {
  --am-list-size: 24px;
  --am-list-gap: 2.4em;
}

/* ============================================== */
/* Kompakte SVG-Listen nur in der Sidebar */
/* ============================================== */

.sidebar-main ul.am-list,
#secondary ul.am-list,
.widget-area ul.am-list {
  margin: 0 0 12px 0 !important;
  padding-left: 0 !important;
}

.sidebar-main ul.am-list > li,
#secondary ul.am-list > li,
.widget-area ul.am-list > li {
  position: relative !important;

  padding-left: 26px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  margin: 0 0 4px 0 !important;

  line-height: 1.32 !important;
}

.sidebar-main ul.am-list > li::before,
#secondary ul.am-list > li::before,
.widget-area ul.am-list > li::before {
  position: absolute !important;

  left: 0 !important;
  top: 0.14em !important;

  width: 16px !important;
  height: 16px !important;

  margin: 0 !important;
}



/* ==============================================
   CORE: blocks.css
   ============================================== */
/*========================================== */ 
/* ============ AM-Block + Verlauf ======== */
/* ========================================= */

/* ---------- Basis ---------- */

.am-block-box {
  --am-block-bg-top: #ffffff;
  --am-block-bg-bottom: #f3f3f3;
  --am-block-border: #d7d7d7;
  --am-block-icon: #777;

  display: block;

  background: linear-gradient(
    180deg,
    var(--am-block-bg-top) 0%,
    var(--am-block-bg-bottom) 100%
  );

  color: #333;

  border: 1px solid var(--am-block-border);
  border-radius: 10px;

  padding: 22px 26px;
  margin: 28px 0;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 10px 22px rgba(0, 0, 0, 0.08);
}


/* ========== Farben ========== */

.am-block-gray {
  --am-block-bg-top: #ffffff;
  --am-block-bg-bottom: #f3f3f3;
  --am-block-border: #d7d7d7;
  --am-block-icon: #777;
}

.am-block-light-gray {
  --am-block-bg-top: #ffffff;
  --am-block-bg-bottom: #f8f8f8;
  --am-block-border: #dddddd;
  --am-block-icon: #888;
}

.am-block-blue {
  --am-block-bg-top: #ffffff;
  --am-block-bg-bottom: #eef8ff;
  --am-block-border: #c8e6f8;
  --am-block-icon: #258ec4;
}

.am-block-green {
  --am-block-bg-top: #ffffff;
  --am-block-bg-bottom: #eef9ef;
  --am-block-border: #cce8cf;
  --am-block-icon: #4f8a10;
}

.am-block-light-green {
  --am-block-bg-top: #ffffff;
  --am-block-bg-bottom: #f4fbec;
  --am-block-border: #d8edbd;
  --am-block-icon: #76a82a;
}

.am-block-orange {
  --am-block-bg-top: #ffffff;
  --am-block-bg-bottom: #fff4ec;
  --am-block-border: #ffd7bd;
  --am-block-icon: #fe5e08;
}

.am-block-olive {
  --am-block-bg-top: #ffffff;
  --am-block-bg-bottom: #f6f7e8;
  --am-block-border: #dfe3b5;
  --am-block-icon: #8a9a2a;
}

.am-block-red {
  --am-block-bg-top: #ffffff;
  --am-block-bg-bottom: #fff1f1;
  --am-block-border: #f2c7c7;
  --am-block-icon: #d9534f;
}

.am-block-purple {
  --am-block-bg-top: #ffffff;
  --am-block-bg-bottom: #f5efff;
  --am-block-border: #d8c4f2;
  --am-block-icon: #7b3fc7;
}

.am-block-deep-purple {
  --am-block-bg-top: #ffffff;
  --am-block-bg-bottom: #f1e8ff;
  --am-block-border: #c9a8ef;
  --am-block-icon: #6f2dbd;
}

.am-block-violet {
  --am-block-bg-top: #ffffff;
  --am-block-bg-bottom: #f3f0ff;
  --am-block-border: #cfc8f6;
  --am-block-icon: #5b4bc4;
}

/* ========== Unicode-Icons ========== */

.am-block-box.am-with-icon {
  position: relative;
  padding-left: 82px;
}

.am-block-box.am-with-icon::before {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);

  width: 38px;
  text-align: center;

  font-size: 34px;
  line-height: 1;
  color: var(--am-block-icon, #777);
}

.am-block-box.am-icon-check::before {
  content: "✓";
}

.am-block-box.am-icon-info::before {
  content: "🛈";
}

.am-block-box.am-icon-warning::before {
  content: "⚠";
}

.am-block-box.am-icon-star::before {
  content: "★";
}

.am-block-box.am-icon-gift::before {
  content: "🎁";
}

/* ========== Mobil ========== */

@media (max-width: 600px) {
  .am-block-box {
    padding: 18px 20px;
    border-radius: 8px;
  }

  .am-block-box.am-with-icon {
    padding-left: 64px;
  }

  .am-block-box.am-with-icon::before {
    left: 20px;
    width: 32px;
    font-size: 28px;
  }
}

/* ============================================== */
/* ------------- ArtMuz-Farbblock ------------- */
/* ============================================== */

.am-color-block {
  padding: 15px 10000px 40px;
  margin: 50px -10000px 50px;
  font-size: 14px !important;
  font-style: normal;
  box-sizing: border-box;
}

.am-color-block h2 {
  margin: 20px 0;
  padding: 20px 0;
  color: inherit !important;
}

.am-color-block h3,
.am-color-block h4 {
  margin: 16px 0;
  padding: 16px 0;
  color: inherit !important;
}

.am-color-block p,
.am-color-block ul,
.am-color-block li,
.am-color-block strong {
  color: inherit !important;
}

/* 1. Dunkelblau */
.am-bg-blue {
  background-color: #0c151e;
  color: #d0d0d0;
}

/* 2. Graphit */
.am-bg-graphite {
  background-color: #1f252b;
  color: #d6d6d6;
}

/* 3. Dunkelgrün */
.am-bg-green {
  background-color: #102015;
  color: #d8d8d8;
}

/* 4. Bordeauxrot */
.am-bg-burgundy {
  background-color: #3a1111;
  color: #eadada;
}

/* 5. Kirschrot / Weinrot — eigene Variante */
.am-bg-wine {
  background-color: #391129;
  color: #eadada;
}

/* 6. Dunkelviolett */
.am-bg-purple {
  background-color: #160b24;
  color: #ddd3e8;
}

/* 7. Dunkelgold / Braun */
.am-bg-gold {
  background-color: #211608;
  color: #e3d7c4;
}

/* 8. Hellgrau */
.am-bg-light {
  background-color: #f3f3f3;
  color: #333333;
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10); 
}

  /* 9. Dunkles Graublau */
.am-bg-slate {
  background-color: #293037;
  color: #d7dadd;
}

/* 10. Dunkler Graphit */
.am-bg-dark-graphite {
  background-color: #25282c;
  color: #d8dadd;
}

/* Laptop & Mobil */
@media (max-width: 1024px) {
  .am-color-block {
    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;

    padding: 25px 20px 25px !important;

    box-sizing: border-box;
    overflow: hidden;
  }

  .am-color-block h2,
  .am-color-block h3,
  .am-color-block h4 {
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
  }
}

/* ---------- Unten gleich tiefer ----------- */

@media (min-width: 1025px) {
  .am-color-block.am-color-block-bottom-gap {
    margin-bottom: -50px !important;
  }
}

@media (max-width: 1024px) {
  .am-color-block.am-color-block-bottom-gap {
    margin-bottom: -20px !important;
  }
}

/* ============================================== 
ArtMuz-Bild: Full-Width-Hintergrund mit Parallax 
============================================== */

.am-img-full-bg {
  width: 100vw;
  max-width: 100vw;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 50px; 
  margin-bottom: 50px;

  overflow: hidden;
  box-sizing: border-box;

  background-image: var(--am-bg-desktop);
  background-repeat: no-repeat;
  background-position: var(--am-bg-position, center center);
  background-size: cover;
  background-attachment: fixed;

  color: #ebebeb;
}

.am-img-full-bg-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 18px;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .am-img-full-bg {
    background-image: var(--am-bg-mobile, var(--am-bg-desktop));
    background-position: var(--am-bg-position-mobile, center bottom);
    background-size: cover;
    background-attachment: fixed;
  }

  .am-img-full-bg-inner {
    padding: 30px 18px 32px;
  }

  .am-img-full-bg h2 {
    font-size: 30px !important;
    line-height: 1.25 !important;
    margin-bottom: 20px !important;
  }

  .am-img-full-bg h3 {
    font-size: 24px !important;
    line-height: 1.25 !important;
    margin-bottom: 18px !important;
  }

  .am-img-full-bg .su-spacer {
    height: 24px !important;
  }
}

/* ============================================ 
========== ArtMuz-Bildblock Full Width ======= 
============================================== */

.am-img-block-full {
  position: relative;

  width: 100vw !important;
  max-width: 100vw !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  margin-top: 0;
  margin-bottom: 50px;

  padding: 0 !important;
  overflow: hidden;
  box-sizing: border-box;
}

.am-img-block-full picture {
  display: block;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.am-img-block-full img {
  display: block;

  width: 100vw !important;
  max-width: none !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  box-shadow: none !important;
}

@media (min-width: 1025px) {
  .am-img-block-full.am-img-no-top-gap {
    margin-top: -60px !important;
	margin-bottom: 20px;
  }
}

/* Auf Tablet und Smartphone den Abstand nicht entfernen */
@media (max-width: 1024px) {
  .am-img-block-full.am-img-no-top-gap {
    margin-top: 0 !important;
  }
}



/* ==============================================
   CORE: headings.css
   ============================================== */
/* ============================================ 
===== ArtMuz inline heading anywhere ==========
========== class="am-inline-h" ===============
============================================== */

.am-inline-h {
	display: block !important;
	width: 100% !important;
	margin: -22px 0 28px 0 !important;
	padding: 0 !important;
	font-size: 19px !important;
	line-height: 1.5em !important;
	font-weight: 700 !important;
	text-align: left !important;
	white-space: normal !important;
	overflow-wrap: break-word !important;
	word-wrap: break-word !important;
}
/*
@media (max-width: 921px) {
    .am-inline-h {
       line-height: 1.5em !important;
    }
}*/
/* ================================== 
=========== Titel-Linien ============ 
================================== */

.am-title-lines {
  display: block;
  text-align: center;
  margin: 22px 0 14px;
  padding: 16px .5em;
  color: #222;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
  background:
    linear-gradient(#eee, #eee) left 2px / 100% 4px no-repeat,
    linear-gradient(#eee, #eee) left calc(100% - 3px) / 100% 4px no-repeat;
}

.am-title-lines span,
.am-title-lines p,
span.am-title-lines,
p.am-title-lines {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
}



/* ==============================================
   CORE: letter.css
   ============================================== */
/* ==============================================
   ArtMuz Letter Marker
============================================== */

.am-letter {
  --am-letter-size: 58px;
  --am-letter-accent: #000000;
  --am-letter-text: #ffffff;
  --am-letter-border: var(--am-letter-accent);

  --am-letter-soft-bg: #f2f2f2;
  --am-letter-soft-border: #cccccc;
  --am-letter-soft-text: #333333;

  --am-letter-radius: 50%;

  width: var(--am-letter-size);
  height: var(--am-letter-size);

  margin: 0 12px 12px 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;

  background: var(--am-letter-accent);
  color: var(--am-letter-text);

  border: 2px solid var(--am-letter-border);
  border-radius: var(--am-letter-radius);

  font-size: calc(var(--am-letter-size) * 0.42);
  font-weight: 700;
  line-height: 1;

  box-shadow: 0 3px 8px rgba(0,0,0,0.16);
}

/* Größen */
.am-letter-s { --am-letter-size: 46px; }
.am-letter-m { --am-letter-size: 58px; }
.am-letter-l { --am-letter-size: 72px; }
.am-letter-xl { --am-letter-size: 90px; }

/* Formen */
.am-letter-circle  { --am-letter-radius: 50%; }
.am-letter-square  { --am-letter-radius: 0; }
.am-letter-rounded { --am-letter-radius: 12px; }
.am-letter-soft    { --am-letter-radius: 18px; }

/* Farben */
.am-letter-black {
  --am-letter-accent: #000000;
  --am-letter-text: #ffffff;
  --am-letter-border: #000000;
}

.am-letter-white {
  --am-letter-accent: #ffffff;
  --am-letter-text: #333333;
  --am-letter-border: #dddddd;

  --am-letter-soft-bg: #ffffff;
  --am-letter-soft-border: #dddddd;
  --am-letter-soft-text: #333333;
}

.am-letter-olive {
  --am-letter-accent: #9BA11C;
  --am-letter-text: #ffffff;
  --am-letter-border: #9BA11C;

  --am-letter-soft-bg: #f4f5e8;
  --am-letter-soft-border: #dfe3b5;
  --am-letter-soft-text: #7f8618;
}

.am-letter-green {
  --am-letter-accent: #53ad00;
  --am-letter-text: #ffffff;
  --am-letter-border: #53ad00;

  --am-letter-soft-bg: #eef9ef;
  --am-letter-soft-border: #cce8cf;
  --am-letter-soft-text: #4f8a10;
}

.am-letter-orange {
  --am-letter-accent: #ff6c00;
  --am-letter-text: #ffffff;
  --am-letter-border: #ff6c00;

  --am-letter-soft-bg: #fff4ec;
  --am-letter-soft-border: #ffd7bd;
  --am-letter-soft-text: #fe5e08;
}

.am-letter-gray {
  --am-letter-accent: #777777;
  --am-letter-text: #ffffff;
  --am-letter-border: #777777;

  --am-letter-soft-bg: #f2f2f2;
  --am-letter-soft-border: #cccccc;
  --am-letter-soft-text: #555555;
}

.am-letter-lightgray {
  --am-letter-accent: #f2f2f2;
  --am-letter-text: #555555;
  --am-letter-border: #cccccc;

  --am-letter-soft-bg: #f8f8f8;
  --am-letter-soft-border: #dddddd;
  --am-letter-soft-text: #555555;
}

.am-letter-dark {
  --am-letter-accent: #333333;
  --am-letter-text: #ffffff;
  --am-letter-border: #333333;

  --am-letter-soft-bg: #eeeeee;
  --am-letter-soft-border: #cccccc;
  --am-letter-soft-text: #333333;
}

.am-letter-blue {
  --am-letter-accent: #2563eb;
  --am-letter-text: #ffffff;
  --am-letter-border: #2563eb;

  --am-letter-soft-bg: #eef3ff;
  --am-letter-soft-border: #c8d7f8;
  --am-letter-soft-text: #2563eb;
}

.am-letter-purple {
  --am-letter-accent: #6f2dbd;
  --am-letter-text: #ffffff;
  --am-letter-border: #6f2dbd;

  --am-letter-soft-bg: #f5efff;
  --am-letter-soft-border: #d8c4f2;
  --am-letter-soft-text: #6f2dbd;
}

/* Varianten */
.am-letter-outline {
  background: transparent;
  color: var(--am-letter-border);
  border-color: var(--am-letter-border);
  box-shadow: none;
}

.am-letter-soft-bg {
  background: var(--am-letter-soft-bg);
  color: var(--am-letter-soft-text);
  border-color: var(--am-letter-soft-border);
}

.am-letter-flat {
  box-shadow: none;
}

/* Positionen */
.am-letter-left {
  float: left;
  margin: 0 16px 10px 0;
}

.am-letter-right {
  float: right;
  margin: 0 0 10px 16px;
}

.am-letter-center {
  display: flex;
  margin: 0 auto 16px auto;
  float: none;
}

.am-letter-inline {
  display: inline-flex;
  margin: 0 8px 0 0;
  float: none;
  vertical-align: middle;
}

.am-letter-clear {
  clear: both;
}

/* White outline */
.am-letter.am-letter-white.am-letter-outline,
.am-letter.am-letter-white.am-letter-border {
  --am-letter-accent: #ffffff;
  --am-letter-border: #ffffff;
  --am-letter-text: #ffffff;

  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
}



/* ==============================================
   CORE: accordion.css
   ============================================== */
/* ============================================== */
/* ArtMuz-Spoiler / Accordion  */
/* ============================================== */

.am-accordion {
  margin: 22px 0;
}

.am-spoiler {
  margin: 16px 0;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 2px 4px rgba(0,0,0,0.06),
    0 10px 22px rgba(0,0,0,0.08);
  overflow: hidden;
}

.am-spoiler summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 18px 24px 18px 54px;
  font-weight: 700;
  line-height: 1.35;
  color: #333;
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
  user-select: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.am-spoiler summary::-webkit-details-marker {
  display: none;
}

.am-spoiler summary::before {
  content: "▾";
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: #777777;
  font-size: 22px;
  line-height: 1;
  transition: transform 0.25s ease;
}

.am-spoiler[open] summary::before {
  transform: translateY(-50%) rotate(180deg);
}

.am-spoiler summary:hover {
  background: linear-gradient(180deg, #ffffff 0%, #eeeeee 100%);
}

.am-spoiler-content {
  padding: 22px 26px 24px;
  border-top: 1px solid #e3e3e3;
  background: #ffffff;
  color: #444;
  line-height: 1.65;
  animation: amSpoiler3dFade 0.28s ease;
}

@keyframes amSpoiler3dFade {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 600px) {
  .am-spoiler summary {
    padding: 17px 18px 17px 48px;
  }

  .am-spoiler summary::before {
    left: 18px;
  }

  .am-spoiler-content {
    padding: 20px 18px 22px;
  }
}

/* ============================================== */
/* ArtMuz Footer Accordion */
/* ============================================== */

.am-footer-accordion {
  margin: 0 0 9px;
  padding: 0;
}

.am-footer-spoiler,
.am-footer-spoiler-2 {
  margin: 0;
  border: 0;
  border-top: 1px solid #d8d8d8;
  border-radius: 0;
  background: #f5f5f5;
  box-shadow: none;
}

.am-footer-spoiler:last-child,
.am-footer-spoiler-2:last-child {
  border-bottom: 1px solid #d8d8d8;
}

.am-footer-spoiler summary {
  padding: 18px 24px 18px 62px;
  border-radius: 0;
  background: #f5f5f5;
  color: #353535;
  box-shadow: none;
}
.am-footer-spoiler-2 summary {
  padding: 18px 24px 18px 62px;
  border-radius: 0;
  background: #f5f5f5;
  color: #fe5e08 !important;
  box-shadow: none;
}

.am-footer-spoiler summary::before,
.am-footer-spoiler-2 summary::before,
 {
  left: 31px;
  color: #777777;
  font-size: 18px;
}

.am-footer-spoiler summary:hover,
.am-footer-spoiler-2 summary:hover {
  background: #eeeeee;
}

.am-footer-spoiler .am-spoiler-content {
  padding: 0 24px 18px 62px;
  border-top: 0;
  background: #f5f5f5;
  box-shadow: none;
  animation: none;
}


@media (max-width: 600px) {
  .am-footer-spoiler summary,
  .am-footer-spoiler-2 summary  {
    padding: 18px 20px 18px 62px;
  }

  .am-footer-spoiler summary::before,
  .am-footer-spoiler-2 summary::before  {
    left: 31px;
  }

  .am-footer-spoiler-content {
    padding: 0 20px 18px 62px;
  }
}



/* ==============================================
   CORE: collapse.css
   ============================================== */
/* ==============================================
=============  ArtMuz Text Collapse =============
============================================== */
.am-collapse {
  width: 100%;
  margin: 10px 0 18px;
}

.am-collapse-content {
  max-height: 300px;
  overflow: hidden;
  transition: max-height 0.35s ease;

   -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);  
  /*-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3.4em), transparent 100%);
mask-image: linear-gradient(to bottom, #000 calc(100% - 3.4em), transparent 100%);*/
}

.am-collapse.is-open .am-collapse-content {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.am-collapse-toggle,
button.am-collapse-toggle {
  appearance: none !important;
  -webkit-appearance: none !important;

  display: block !important;
  width: max-content !important;
  margin: 10px auto 0 auto !important;
  padding: 0 !important;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: inherit !important;
  font: inherit !important;
  font-weight: 700 !important;
  text-transform: none !important;
  line-height: inherit !important;
  text-align: center !important;

  cursor: pointer;
  user-select: none;
}

.am-collapse-toggle:hover,
button.am-collapse-toggle:hover {
  color: #666666 !important;
}

.am-collapse-toggle::before,
.am-collapse-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  margin-right: auto;

  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

.am-collapse-toggle::before {
  display: none;
  margin-bottom: 6px;
  transform: rotate(225deg);
}

.am-collapse-toggle::after {
  display: block;
  margin-top: 6px;
  transform: rotate(45deg);
}

.am-collapse.is-open .am-collapse-toggle::before {
  display: block;
}

.am-collapse.is-open .am-collapse-toggle::after {
  display: none;
}

/* ============= Collapse in Tab ============== */

.am-collapse-no-toggle .am-collapse-content {
  max-height: none;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

.am-collapse-no-toggle .am-collapse-toggle {
  display: none !important;
}

/* Collapse card toggle: text and arrow side by side */
.am-collapse-card > button.am-collapse-toggle,
.am-collapse-card button.am-collapse-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;

  width: auto !important;
  margin: 12px 0 0 0 !important;
  padding: 8px 0 0 0 !important;

  color: #555555 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: left !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.am-collapse-card > button.am-collapse-toggle:hover,
.am-collapse-card button.am-collapse-toggle:hover {
  color: #333333 !important;
}

.am-collapse-card button.am-collapse-toggle::before {
  display: none !important;
}

.am-collapse-card button.am-collapse-toggle::after {
  content: "" !important;
  display: inline-block !important;

  width: 7px !important;
  height: 7px !important;

  margin: 1px 0 0 2px !important;

  border-right: 1.5px solid currentColor !important;
  border-bottom: 1.5px solid currentColor !important;

  transform: rotate(45deg) !important;
}

.am-collapse-card.is-open button.am-collapse-toggle::after {
  transform: rotate(225deg) !important;
  margin-top: 5px !important;
}

/* Collapse-Höhe: 100 Pixel */
.am-collapse.am-collapse-100 .am-collapse-content {
  max-height: 100px;
}

/* Collapse-Höhe: 200 Pixel */
.am-collapse.am-collapse-200 .am-collapse-content {
  max-height: 200px;
}



/* ==============================================
   CORE: category-links.css
   ============================================== */
/* ==============================================================
 * Kategorie-Links: [am_category_links parent="6"] 
 + title="..." layout="grid" count="yes" taxonomy="blog-category"
 * ============================================================ */

.am-category-links {
  margin: 0;
  padding: 0;
}

/* Kompakte Darstellung bei vorhandenem Titel */
.am-category-links--has-title {
  margin-top: -25px;
}

/* Fortlaufende Inline-Darstellung */
.am-category-links--inline .am-category-links__title {
  display: inline;
  margin: 0 0.25em 0 0;
  padding: 0;
  font-size: 19px;
}

.am-category-links--inline .am-category-links__list,
.am-category-links--inline .am-category-links__link {
  display: inline;
}

.am-category-links__separator {
  white-space: nowrap;
}

/* Raster: Desktop 3, Tablet 2, Mobil 1 Spalte */
.am-category-links--grid .am-category-links__title {
  display: block;
  margin: 0 0 0.6em;
  padding: 0;
  font-size: 14px;
}

.am-category-links--grid .am-category-links__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5em 1.5em;

  margin: 0;
  padding: 0;
  list-style: none;
}

.am-category-links--grid .am-category-links__item {
  min-width: 0;
  margin: 0;
  padding: 0;
}

.am-category-links--grid .am-category-links__link {
  display: inline-flex;
  align-items: baseline;
  max-width: 100%;
  min-width: 0;
}

.am-category-links--grid .am-category-links__name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.am-category-links__count {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .am-category-links--grid .am-category-links__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .am-category-links--grid .am-category-links__list {
    grid-template-columns: 1fr;
  }
}