:host {
    --gap-width: calc(var(--site--column-width-vw) + var(--site--gutter) * 2);
    --download-width: calc((var(--site--column-width-vw) * 2) + (var(--site--gutter) * 1));
}

* {
    box-sizing: border-box;
}

/* ------------------ */
/* DOWNLOAD STYLES  */
/* ------------------ */

.PEH_XS3pXYfZn8hoHBFl {
    display: flex;
    flex-direction: row;
    justify-content: end;
    flex-wrap: nowrap;
    width: 100%;
    gap: var(--gap-width);
}

.IVHX7K5pvAdrOg6f_tGf {
    display: flex;
    width: var(--download-width);
    flex-direction: column;
    justify-content: normal;
    gap: var(--_spacing---space--4);
}

.fwj5pAWdK00VBmuS103s {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Text links, Pfeil rechts */
    align-items: flex-start;
    /* optional: Pfeil oben ausrichten */
    width: 100%;
    gap: var(--_spacing---space--4);
}

.wFXuIflMcDzzLpalNyv1 {
    display: flex;
    flex: 1;
    /* Text nutzt verfügbaren Platz */
    margin: 0;
    font-family: var(--_typography---font--secondary-family);
    font-size: var(--_typography---font-size--text-small);
    line-height: var(--_typography---line-height--huge);
}

.huwlos7T5StBuyP0BHsL {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    /* verhindert, dass der Pfeil verkleinert wird */
    justify-content: center;
    align-items: center;
    border-radius: var(--radius--round);
    width: calc(var(--_button-style---size--icon-set-size) + 6px);
    aspect-ratio: 1 / 1;
    padding: 3px;
    background-color: transparent;
    transition: background-color 300ms ease;
    border: 1px solid var(--_theme---background);
}

.huwlos7T5StBuyP0BHsL path,
.huwlos7T5StBuyP0BHsL path+rect {
    fill: var(--_theme---text);
    transition: fill 300ms ease;
}

.IVHX7K5pvAdrOg6f_tGf:hover .huwlos7T5StBuyP0BHsL {
    background-color: var(--_theme---text);
    border: 1px solid var(--_theme---text);
}

.IVHX7K5pvAdrOg6f_tGf:hover .huwlos7T5StBuyP0BHsL path,
.IVHX7K5pvAdrOg6f_tGf:hover .huwlos7T5StBuyP0BHsL path+rect {
    fill: var(--_theme---background);
}

.IdbNDuvnUuBiz_S8c5M9 {
    width: calc((var(--site--column-width-vw) * 2) + (var(--site--gutter) * 1));
    min-height: calc((var(--site--column-width-vw) * 1) + (var(--site--gutter) * 1));
    background-color: #F6F6F6;
}

.IdbNDuvnUuBiz_S8c5M9 img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: top top;
    background-color: transparent;
    border: none;
    mix-blend-mode: multiply;
    border: 0px solid currentColor;
    opacity: 0;
    filter: blur(6px);
    animation: ouxr8Y8jGka9xFaD_sSb 0.45s ease-out forwards;
}

.rkHRNbwahLRJE55ui2V2 {
    background: #f6f6f6;
}

/* Thumbnail orientation classes */
.rbxnehgXgjzs3ijYUR81 {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1.41;
}

.g71htGwKQfGmMrqbG3lW {
    position: relative;
    overflow: hidden;
    /* aspect-ratio: 1.41 / 1; */
}

@keyframes ouxr8Y8jGka9xFaD_sSb {
    from {
        opacity: 0;
        transform: scale(0.985);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px);
    }
}

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

/* --- Tablet (≤ 991px) --- */
@media (max-width: 991px) {
    :host {
        --download-width: calc((var(--site--column-width-vw) * 3) + (var(--site--gutter) * 2));
    }
}

/* --- Mobile Landscape (≤ 767px) --- */
@media (max-width: 767px) {
    :host {
        --download-width: calc((var(--site--column-width-vw) * 4) + (var(--site--gutter) * 3));
        --gap-width: calc(var(--site--gutter) * 1);
    }

    .PEH_XS3pXYfZn8hoHBFl {
        justify-content: start;
        margin-left: var(--_typography---font-size--display-char);
    }

    .IdbNDuvnUuBiz_S8c5M9 {
        width: calc((var(--site--column-width-vw) * 3) + (var(--site--gutter) * 2));
        min-height: calc((var(--site--column-width-vw) * 2) + (var(--site--gutter) * 2));
        background-color: #F6F6F6;
    }
}

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

    :host {
        --download-width: calc((var(--site--column-width-vw) * 6) + (var(--site--gutter) * 5));
        --gap-width: calc(var(--site--gutter) * 1);
    }
    
    .IdbNDuvnUuBiz_S8c5M9 {
        width: calc((var(--site--column-width-vw) * 5) + (var(--site--gutter) * 4));
        min-height: calc((var(--site--column-width-vw) * 4) + (var(--site--gutter) * 4));
        background-color: #F6F6F6;
    }
}
/* -----------------------------------------------
   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) {
}