/* ==============================================*/
/* WP User in der Künstler-Registrierungsform */
/* ==============================================
.super-duper-content-open,
.sd-lable-shortcode-inserter {
  display: none !important;
}*/

/* ==============================================*/
/* ================ Tabs ================ */
/* ==============================================*/
.am-tabs {
  background: #fff;
  padding: 3px 4px;
}

/* Obere Tab-Leiste */
.am-tabs-nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  overflow-x: auto; /* Scrollen auf mobilen Geräten */
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
  text-align: center;
  -webkit-overflow-scrolling: touch;
}

.am-tabs-nav::-webkit-scrollbar {
  height: 6px;
}
.am-tabs-nav::-webkit-scrollbar-thumb {
  background-color: #bbb;
  border-radius: 10px;
}

/* Tab-Buttons */
.am-tabs-nav span {
  flex-shrink: 0;
  background: #85a6a826;
  /*font-family: 'Expletus Sants', Helvetica, Arial, Verdana, sans-serif !important;*/
  font-size: 0.9em;
  font-weight: 700;
  padding: 7px 12px 7px 9px;
  margin: 5px 4px;
  border: 1px solid #ccc;
  border-radius: 7px;
  box-shadow: -1px -1px 1px rgb(0 0 0 / 18%);
  cursor: pointer;
  user-select: none;
  transition: 0.25s ease;
  white-space: nowrap;
}

.am-tabs-nav span:focus {
  outline: none;
}

.am-tabs-nav span:hover {
  background: #f5f5f5;
  color: #e33a0c !important;
}

.am-tabs-nav span.active {
  border: 1px solid #ccc;
  color: #ff3610 !important;
  background: #fff;
}

/* Variante 1: etwas größer und ruhiger */
.am-tabs-nav.am-tabs-1 span {
  font-size: 1em;
  font-weight: 500;
  padding: 8px 12px 7px 12px;
}


/* Variante 2: eckige Buttons */
.am-tabs-nav.am-tabs-2 span {
  border-radius: 0;
  background: #f2f2f2;
  border: 1px solid #cfcfcf;
  box-shadow: none;
  padding: 8px 14px;
  margin: 5px 0;
}

.am-tabs-nav.am-tabs-2 span:hover {
  background: #ffffff;
  color: #e33a0c !important;
}

.am-tabs-nav.am-tabs-2 span.active {
  background: #ffffff;
  color: #ff3610 !important;
  border-color: #aaa;
}

/* Variante 3: Unterstrich-Stil */
.am-tabs-nav.am-tabs-3 span {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 8px 10px;
  margin: 5px 6px;
}

.am-tabs-nav.am-tabs-3 span:hover {
  background: transparent;
  color: #e33a0c !important;
  border-bottom-color: #d0d0d0;
}

.am-tabs-nav.am-tabs-3 span.active {
  background: transparent;
  color: #ff3610 !important;
  border-bottom-color: #ff3610;
}


/* Variante 4: graue Karten-Buttons */
.am-tabs-nav.am-tabs-4 span {
  background: #eeeeee;
  border: 1px solid #dddddd;
  font-weight: 600;
  border-radius: 9px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
  padding: 9px 12px 7px 12px;
}

.am-tabs-nav.am-tabs-4 span:hover {
  background: #f9f9f9;
  color: #e33a0c !important;
}

.am-tabs-nav.am-tabs-4 span.active {
  background: #ffffff;
  color: #ff3610 !important;
  border-color: #c2c2c2;
  box-shadow: 0 2px 5px rgb(0 0 0 / 12%);
}

/* ============ Inhaltscontainer ============== */
.am-tabs-panes {
  width: 100%;
}

.am-tabs-pane {
  display: none;
 /* border-top: 1px solid #ccc;
  padding-top: 25px;*/
  font-size: inherit;
  animation: fadeIn 0.3s ease-in-out;
}

.am-tabs-pane.active {
  display: block;
}

/* Einblendanimation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === Tablet-Anpassung === */
@media (max-width: 1024px) {
  .am-tabs-nav span {font-size: 0.9em;}
}

/* === Mobiles Scrollen und automatische Zentrierung des aktiven Tabs === */
@media (max-width: 768px) {
  .am-tabs-nav {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-behavior: smooth;
  }
  .am-tabs-nav span.active {
    background: #fff;
    color: #ff3610;
  }
}

/* ========================================= 
==== Sticky-Tab-Navigation (Haupttabs) ===== 
========================================= */
.am-tabs.am-tabs-sticky .am-tabs-nav {
    position: sticky;
    top: 81px;
    z-index: 9;
    background: #fff;
    padding: 5px 0;
    margin-bottom: 6.5px;
}

/* Höhenkompensation bei Sticky-Position */
.am-tabs.am-tabs-sticky.tabs-is-sticky .am-tabs-panes {
    padding-top: 81px;
}

/* ========================================= 
=========== Sub-Tab-Navigation =========== 
========================================= */

.am-sub-navi-line {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-bottom: 15px;
}
/*
.am-sub-navi-line > span,
.am-sub-navi-line > a {
    margin: 0 3px;
}*/

.am-sub-nav a,
.am-sub-navi-title {
    all: unset; 
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none; 
    color: #555;
    padding: 6px 14px;
    cursor: pointer;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    font-size: 15px;
    line-height: 1;
}

.am-sub-navi-title {
    cursor: default;
}

.am-sub-nav a svg {
    stroke: #555;
    transition: 0.2s ease;
	border-bottom: 2px solid transparent;
}

.am-sub-nav a:hover {
    color: #ff3610;
}

.am-sub-nav a:hover svg {
    stroke: #ff3610;
}

.am-sub-navi-title {
    font-weight: 600; 
    color: #ff3610 !important;
    border-bottom: 2px solid #ff3610;
    margin: 0;
}

.am-sub-navi-title svg {
    stroke: #ff3610;
}

.am-sub-navi-line > span,
.am-sub-navi-line > a,
.am-sub-navi-line > h3,
.am-sub-navi-line > h2 {
    margin: 0;
}

.am-sub-nav a:focus,
.am-sub-nav a:active {
    outline: none;
    box-shadow: none;
}

/* ========================================= 
=== Responsive-Korrektur (mobil sicher) ==== 
========================================= */

.am-sub-navi-line {
    flex-wrap: wrap;              /* Umbruch erlauben */
    max-width: 100%;
    box-sizing: border-box;
}

/* Jeder Eintrag darf schrumpfen */
.am-sub-navi-line > * {
    min-width: 0;                 /* Erforderlich für Flexbox */
    white-space: nowrap;          /* Text nicht umbrechen */
}


/* Abschnittsabstand unten */
.am-section {
  margin-bottom: 20px;
}

/* ==============================================*/
/* === С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: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 2px 4px;
  transition: all 0.25s ease-in-out;
  overflow: hidden;
  justify-content: flex-start;
  align-items: stretch;
  text-align: left;
}

/* === 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;
}


/* === 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-Lightbox-Stil ========== */
/* ==============================================*/

.mfp-bg {
  background: rgba(0, 0, 0, 0.75);
  opacity: 0;
  transition: opacity 0.45s ease;
}

.mfp-ready .mfp-bg { opacity: 1; }

.lightbox-content {
  background: #fff;
  color: #222;
  padding: 40px 35px;
  border-radius: 12px;
  max-width: 650px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  transform: scale(0.95) translateY(40px);
  opacity: 0;
  transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.mfp-ready .lightbox-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.mfp-removing .lightbox-content {
  transform: scale(0.97) translateY(30px);
  opacity: 0;
}

.lightbox-content h3, .lightbox-content h2 {
  font-family: 'Expletus Sants', sans-serif !important;
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 15px;
  text-align: center;
}

.lightbox-content p {
  font-size: 16px;
  line-height: 1.6;
  color: #444;
}

.lightbox-content .dt-btn:hover,
.lightbox-content button:hover {
  background: #99999923;
}

@media (max-width: 600px) {
  .lightbox-content {
    max-width: 90%;
    padding: 25px 20px;
	margin-bottom: 5px;
  }
  .lightbox-content h3 { font-size: 18px; }
}

/* --------- Konto-Iframe-Lightbox ---------- */

.am-account-iframe-lightbox .mfp-container {
    padding: 24px 12px;
}

.am-account-iframe-lightbox .mfp-content {
    width: min(620px, 94vw);
    max-width: 620px;
    height: min(760px, calc(100dvh - 48px));
    max-height: calc(100dvh - 48px);
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.am-account-iframe-lightbox .mfp-iframe-scaler {
    width: 100%;
    height: 100%;
    padding-top: 0 !important;
    overflow: hidden;
}

.am-account-iframe-lightbox .mfp-iframe {
    width: 100%;
    height: 100%;
    background: #fff;
}

@media (max-width: 768px) {
    .am-account-iframe-lightbox .mfp-container {
        padding: 14px 24px;
    }

    .am-account-iframe-lightbox .mfp-content {
        width: 94vw;
        height: calc(100dvh - 28px);
        max-height: calc(100dvh - 28px);
        border-radius: 10px;
    }
}

@media (max-width: 480px) {
    .am-account-iframe-lightbox .mfp-content {
        width: 96vw;
        height: calc(100dvh - 24px);
        max-height: calc(100dvh - 24px);
    }
}
  
/* ==============================================*/
/* Zurück + Weiter - ArtMuz-Lightbox */
/* ==============================================*/

.mfp-arrow {
  opacity: 1 !important;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  backdrop-filter: blur(4px);
  transition: 0.3s ease;
}

.mfp-arrow:hover {
  background: rgba(255,255,255,0.55);
}

.mfp-arrow:before,
.mfp-arrow:after {
  color: #fff;
  font-size: 28px;
}

.mfp-arrow-left:before {
  content: '←';
  margin-right: 4px;
}

.mfp-arrow-right:before {
  content: '→';
  margin-left: 4px;
}

/* Bildtext */
.mfp-alt, .mfp-title, .mfp-caption, .mfp-description {
  text-align: center;
  color: #fff;
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.45;
}

.mfp-title {
  font-size: 18px;
  font-weight: 600;
}

.mfp-caption {
  opacity: 0.9;
}

.mfp-description {
  opacity: 0.8;
  font-size: 15px;
}

/* ==============================================*/
/* ===== ArtMuz Universal Buttons + Animationen ===== */
/* ==============================================*/

.artmuz-btn {
  display: inline-block;
  width: auto;
  padding: 12px 14px;
  border: none;
  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);
  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);
  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-green  { --btn-bg:#53ad00; --btn-bg-hover:#00d166; }
.btn-olive  { --btn-bg:#9BA11C; --btn-bg-hover:#ADB51B; }
.btn-blue   { --btn-bg:#007bff; --btn-bg-hover:#2196f3; }
.btn-dark   { --btn-bg:#333; --btn-bg-hover:#444; }

/* === 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;
}

/* ============================================ 
===== ArtMuz inline heading anywhere ==========
========== class="am-inline-h" ===============
============================================== */

.am-inline-h {
	display: block !important;
	width: 100% !important;
	margin: -16px 0 28px 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 0.9 !important;
	font-weight: 700 !important;
	text-align: left !important;
	white-space: normal !important;
	overflow-wrap: break-word !important;
	word-wrap: break-word !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;
}

/*========================================== */ 
/* ============ 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;
  }
}

/* ============================================== */
/* 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 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-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;
}

/* ==============================================
   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;
}

/* ==============================================
=============  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::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;
}

@media (max-width: 1024px) {
  .am-collapse-content {
    max-height: 420px;
  }
}

@media (max-width: 767px) {
  .am-collapse-content {
    max-height: 520px;
  }
}
/* ==============================================
   ArtMuz Shortcode-Ergänzungen: Audio / Video / Anchors
============================================== */
.am-scroll-anchor {
  scroll-margin-top: 150px;
}

.am-audio-block,
.am-video-block {
  margin: 18px 0;
}

.am-audio-main,
.am-video-main {
  width: 100%;
  margin-bottom: 12px;
}

.am-audio-list,
.am-video-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 18px;
}

.am-audio-item,
.am-video-item {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #d0d0d0;
  background: #f4f4f4;
  color: #333;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font: inherit;
  line-height: 1.25;
  transition: 0.25s ease;
}

.am-audio-item:hover,
.am-video-item:hover,
.am-audio-item.is-active,
.am-video-item.is-active {
  background: #fff;
  color: #ff3610;
  border-color: #c2c2c2;
  box-shadow: 0 2px 5px rgb(0 0 0 / 12%);
}

@media (max-width: 767px) {
  .am-audio-list,
  .am-video-list {
    flex-direction: column;
  }

  .am-audio-item,
  .am-video-item {
    width: 100%;
    text-align: left;
  }
}