/* ------------------ */
/* AUDIO STYLES  */
/* ------------------ */

._atmvXxAE75op5IRgpNf {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    width: calc((var(--site--column-width-vw) * 7) + (var(--site--gutter) * 6));
    min-height: 30cqi;
    background-color: var(--_theme---background-2);
    padding: 1.25rem 1.5rem 1.25rem 1.5rem;
    margin-left: calc((var(--site--column-width-vw) * 2) + (var(--site--gutter) * 2));
    box-sizing: border-box;
}

._YcYg_7F4zcbdswWJSMv {
    display: block;
}

.BXOFdZNXtJ2Hoc0u9FHf {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.pXBviNtkvcUqJWW2a6LQ {
    display: block;
    font-size: var(--_typography---font-size--h3);
    line-height: var(--_typography---line-height--small);
    padding-right: calc((var(--site--column-width-vw) / 2));
}

.T50hWsvkbFX0qYUCR8ng {
    display: block;
    position: relative;
    width: 18cqi;
    height: 18cqi;
    flex-grow: 0;
    flex-shrink: 0;
    margin-top: 0.25rem;
    border-radius: var(--radius--round);
    background-color: color-mix(in srgb, var(--_theme---text) 8%, transparent);
}

.A_ecuIAoLZtaqjnTGiql {
    display: block;
    border: 1px var(--_theme---text) solid;
    border-radius: var(--radius--round);
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transition: 0.1s ease all;
}

.OvCOAbU0N4QA1PyO14ES {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.qzbJi5UMq89eK3d2hAeU {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--_spacing---space--2);
}

.VMvs2FyzY4K6a9MO42hu,
.X5b6hzuWQlhRjl2l40TY,
.Pg8lOS3KOeYJoB6KDRLv,
.GBw0hWU4YojF3yVgaC5o {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius--round);
    background-color: var(--_theme---background);
}

/* Stop, Backward, Forward: Kreis-Grösse als Faktor der Icon-Grösse */
.X5b6hzuWQlhRjl2l40TY,
.Pg8lOS3KOeYJoB6KDRLv,
.GBw0hWU4YojF3yVgaC5o {
    width: calc(var(--_button-style---size--icon-set-size) * 1.334);
    height: calc(var(--_button-style---size--icon-set-size) * 1.334);
}

/* Play: 1.5× grösser als die anderen Buttons, SVG auf 75% skaliert */
.VMvs2FyzY4K6a9MO42hu {
    width: calc(var(--_button-style---size--icon-set-size) * 2);
    height: calc(var(--_button-style---size--icon-set-size) * 2);
}

.VMvs2FyzY4K6a9MO42hu svg {
    display: block;
    width: 75%;
    height: 75%;
}

.k_u4isXUHQJz1xR29pwK {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    font-family: var(--_typography---font--secondary-family);
    font-size: var(--_typography---font-size--text-small);
    line-height: var(--_typography---line-height--huge);
}

.QwyYlR25jB6LlbCzzO69 {
    display: block;
}

.zib3K5U9v6O5XeSWABWz {
    display: block;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.k2dyr3heM472V7JOz_ot {
    display: block;
}

/* -----------------------------------------------
   Responsive Breakpoints (Desktop-first)
------------------------------------------------ */

/* --- Tablet (≤ 991px) --- */
@media (max-width: 991px) {
    ._atmvXxAE75op5IRgpNf {
        width: calc((var(--site--column-width-vw) * 8) + (var(--site--gutter) * 7));
        margin-left: calc((var(--site--column-width-vw) * 2) + (var(--site--gutter) * 2));
        padding: 1.25rem;
        min-height: 40cqi;
    }
}

/* --- Mobile Landscape (≤ 767px) --- */
@media (max-width: 767px) {
    ._atmvXxAE75op5IRgpNf {
        width: calc((var(--site--column-width-vw) * 9) + (var(--site--gutter) * 8));
        padding: 1rem;
        min-height: 45cqi;
    }

    .T50hWsvkbFX0qYUCR8ng {
        width: 22cqi;
        height: 22cqi;
    }
}

/* --- Mobile Portrait (≤ 478px) --- */
@media (max-width: 478px) {
    ._atmvXxAE75op5IRgpNf {
        width: calc(100% - var(--_typography---font-size--display-char) );
        min-height: 140cqi;
        margin-left: var(--_typography---font-size--display-char);
    }

    .BXOFdZNXtJ2Hoc0u9FHf {
        flex-direction: column;
        justify-content: start;
    }

    .T50hWsvkbFX0qYUCR8ng {
        width: 66cqi;
        height: 66cqi;
        margin-left: auto;
        margin-right: auto;
    }

    .pXBviNtkvcUqJWW2a6LQ {
        padding-bottom: var(--_spacing---space--6);
    }

    .OvCOAbU0N4QA1PyO14ES {
        flex-direction: column;
        gap: var(--_spacing---space--4);
    }

    .qzbJi5UMq89eK3d2hAeU {
        justify-content: start;
    }

    .k_u4isXUHQJz1xR29pwK {
        justify-content: start;
    }
}
/* -----------------------------------------------
   SectionWrapper – Gemeinsame Layout-Styles

   Diese Styles werden von allen Sam-Komponenten
   über den SectionWrapper verwendet.
------------------------------------------------ */

/* ------------------ */
/* Section Variables   */
/* ------------------ */

:host {
  --space-section: var(--space-800);
}

/* ------------------ */
/* Section            */
/* ------------------ */

.Nv1DcW1oQwUDoJIqUjNy {
  padding-block: var(--space-section);
  color: var(--_theme---text);
  background-color: var(--_theme---background);
  width: 100%;      /* Wichtig wegen Homepage */
}

/* ------------------ */
/* Container          */
/* ------------------ */

.YbPq4Lt8jgrgLW4JFcwW {
  display: block;
  position: relative;
  width: 100%;
  width: calc(100% - var(--site--margin) * 2);
  max-width: var(--max-width--main, 90rem);
  margin-inline: auto;
  container-type: inline-size;
}

/* ------------------ */
/* Width Variants     */
/* ------------------ */

.dgtDUAgHHVMbOJOtyy1i {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

.So6eYefr1y1ODknjlxun {
  width: 100%;
  width: calc(100% - var(--site--margin) * 2);
  max-width: var(--max-width--main, 90rem);
  margin-inline: auto;
}

.t5zMGS0dcMDkpE6OdZen {
  max-width: inherit;
}

/* ------------------ */
/* Empty State        */
/* ------------------ */

.e3MecLgZI0x6TbiNGvic {
  display: none;
}

/* -----------------------------------------------
   Responsive Breakpoints (Desktop-first)
------------------------------------------------ */

/* --- Tablet (≤ 991px) --- */
@media (max-width: 991px) {
}

/* --- Mobile Landscape (≤ 767px) --- */
@media (max-width: 767px) {
  :host {
    --space-section: var(--space-600);
  }
}

/* --- Mobile Portrait (≤ 478px) --- */
@media (max-width: 478px) {
}
.dbXl2l0n8WmqLDMHZwnQ {
  width: 100%;
  display: block;
}

/* -----------------------------------------------
   Responsive Breakpoints (Desktop-first)
------------------------------------------------ */

/* --- Tablet (≤ 991px) --- */
@media (max-width: 991px) {
}

/* --- Mobile Landscape (≤ 767px) --- */
@media (max-width: 767px) {
}

/* --- Mobile Portrait (≤ 478px) --- */
@media (max-width: 478px) {
}
/* -----------------------------------------------
   Icons – Gemeinsame Grössen-Styles

   var(--_button-style---size--icon-set-size) 
   ist in Webflow hinterlegt
   Alle Icons erben ihre Grösse über .isIconSet.
   Einzelne Komponenten können --icon-set-size lokal
   überschreiben (z.B. Audio-Buttons via Container).
------------------------------------------------ */

.sIkObn96BHKu251A33jn {
  width: var(--_button-style---size--icon-set-size);
  height: var(--_button-style---size--icon-set-size);
  display: block;
  flex-shrink: 0;
}

/* -----------------------------------------------
   Responsive Breakpoints (Desktop-first)
------------------------------------------------ */

/* --- Tablet (≤ 991px) --- */
@media (max-width: 991px) {
}

/* --- Mobile Landscape (≤ 767px) --- */
@media (max-width: 767px) {
}

/* --- Mobile Portrait (≤ 478px) --- */
@media (max-width: 478px) {
}