.procedure {
    background: none;
    border: unset;
    padding: 0;
    margin: 2rem 0;
    box-shadow: unset;
}

.procedure__title {
    position: relative;
    color: var(--text-colors-general-text-white, #ffffff) !important;
    text-align: left;
    font-family: var( --uberschriften-h5-fm-portal-font-family, "Noto Sans", sans-serif );
    font-size: var(--uberschriften-h5-fm-portal-font-size, 1.3125rem);
    line-height: var(--uberschriften-h5-fm-portal-line-height, 120%);
    letter-spacing: var(--uberschriften-h5-fm-portal-letter-spacing, 0.01em);
    background: var(--specific-article-color, #183746);
    border-radius: var(--spacing-generell-responsiv-spacing-2xs, 0.25rem);
    padding: var(--spacing-generell-responsiv-spacing-lg, 1.25rem) var(--spacing-generell-responsiv-spacing-xs, 0.5rem) var(--spacing-generell-responsiv-spacing-lg, 1.25rem) 3rem !important;
    font-weight: var(--uberschriften-h5-fm-portal-font-weight, 800);
    margin: 0 0 1rem 0;
    border: none !important;
}

.procedure__title::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%200C9.62663%200%207.30655%200.703788%205.33316%202.02236C3.35977%203.34094%201.8217%205.21509%200.913451%207.4078C0.00519943%209.60051%20-0.232441%2012.0133%200.230582%2014.3411C0.693605%2016.6689%201.83649%2018.8071%203.51472%2020.4853C5.19295%2022.1635%207.33115%2023.3064%209.65892%2023.7694C11.9867%2024.2324%2014.3995%2023.9948%2016.5922%2023.0866C18.7849%2022.1783%2020.6591%2020.6402%2021.9776%2018.6668C23.2962%2016.6935%2024%2014.3734%2024%2012C24%208.8174%2022.7357%205.76515%2020.4853%203.51472C18.2348%201.26428%2015.1826%200%2012%200ZM13.07%2015.46L7.20001%2017.77C7.06017%2017.8439%206.90035%2017.871%206.74396%2017.8475C6.58757%2017.8239%206.44285%2017.7508%206.33102%2017.639C6.21919%2017.5272%206.14612%2017.3824%206.12255%2017.226C6.09897%2017.0697%206.12612%2016.9098%206.20001%2016.77L8.51001%2010.91C8.54094%2010.8344%208.58993%2010.7675%208.65268%2010.7152C8.71544%2010.6629%208.79006%2010.6268%208.87001%2010.61C8.95074%2010.5954%209.03381%2010.6005%209.11215%2010.6249C9.19049%2010.6493%209.26179%2010.6922%209.32001%2010.75L13.2%2014.63C13.2578%2014.6882%2013.3007%2014.7595%2013.3251%2014.8379C13.3495%2014.9162%2013.3546%2014.9993%2013.34%2015.08C13.3293%2015.1605%2013.299%2015.2372%2013.252%2015.3034C13.205%2015.3696%2013.1425%2015.4234%2013.07%2015.46ZM17.77%207.21L15.46%2013.07C15.4291%2013.1456%2015.3801%2013.2125%2015.3173%2013.2648C15.2546%2013.3171%2015.18%2013.3532%2015.1%2013.37C15.0193%2013.3864%2014.9357%2013.3821%2014.8571%2013.3577C14.7784%2013.3332%2014.7072%2013.2893%2014.65%2013.23L10.77%209.35C10.7122%209.29178%2010.6693%209.22048%2010.6449%209.14214C10.6205%209.0638%2010.6154%208.98074%2010.63%208.9C10.6468%208.82005%2010.6829%208.74544%2010.7352%208.68268C10.7875%208.61992%2010.8544%208.57093%2010.93%208.54L16.8%206.23C16.9351%206.17037%2017.0853%206.15374%2017.2302%206.18236C17.3751%206.21098%2017.5077%206.28347%2017.61%206.39C17.7174%206.49388%2017.7903%206.62821%2017.8189%206.77485C17.8475%206.92149%2017.8305%207.07337%2017.77%207.21Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}

.procedure-step {
    background: var(--surface-color-general-surface-subtle-contrast, #f5f6f9);
    border-radius: var(--spacing-generell-responsiv-spacing-md, 1rem);
    padding: var(--spacing-generell-responsiv-spacing-lg, 1.25rem) var(--spacing-generell-responsiv-spacing-lg, 1.25rem) var(--spacing-generell-responsiv-spacing-lg, 1.25rem) 1.25rem;
    margin: 0 0 1rem 0;
}

.procedure-step:hover {
    background: var(--surface-color-general-surface-subtle-contrast, #f5f6f9);
    box-shadow: unset;
    transform: unset;
}

.procedure-step__number {
    background: var(--specific-article-color, #183746);
    color: white;
    width: 3.125rem;
    height: 3.125rem;
    min-width: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Noto Sans", sans-serif;
    font-size: 1.8125rem;
    line-height: 1rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: unset;
    position: relative;
    z-index: 1;
}

.procedure-step__number::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: unset;
    background: unset;
    opacity: 0;
    transition: unset;
    z-index: -1;
}

.procedure-step__hint {
    border-radius: 0.5rem;
    border-style: solid;    
    border-width: 0.0625rem;
    padding: 0.9375rem 0.9375rem 0.9375rem 3rem;
    position: relative;
    background: var(--alerts-and-info-alert-background-info, #d6e9ff);
    border-color: var(--alerts-and-info-alert-stroke-info, #8cc1ff);
    color: var(--alerts-and-info-alert-text-info, #004ea9);
}

.procedure-step__hint::before {
    content: '';
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Im1lZ2FwaG9uZSI+CjxnIGlkPSJWZWN0b3IiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEwLjQ3NjcgMTguOTU4M0wxMC44MDM0IDE5Ljc0QzEwLjk3ODQgMjAuMTYgMTEuMzE2NyAyMC40OTgzIDExLjczNjcgMjAuNjYxN0MxMi4xODAxIDIwLjg0ODMgMTIuNjQ2NyAyMC44NDgzIDEzLjA0MzQgMjAuNjYxN0MxMy40NzUxIDIwLjQ4NjcgMTMuODEzNCAyMC4xNDgzIDEzLjk4ODQgMTkuNzI4M0MxNC4xMjg0IDE5LjM3ODMgMTQuMTUxNyAxOC45ODE3IDE0LjA0NjcgMTguNjJMMTAuNDg4NCAxOC45NTgzSDEwLjQ3NjdaIiBmaWxsPSIjNjJBQUZGIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTQuMDAwMSAxLjE2NjY2QzYuOTA2NzUgMS4xNjY2NiAxLjE2Njc1IDYuOTA2NjYgMS4xNjY3NSAxNEMxLjE2Njc1IDIxLjA5MzMgNi45MDY3NSAyNi44MzMzIDE0LjAwMDEgMjYuODMzM0MyMS4wOTM0IDI2LjgzMzMgMjYuODMzNCAyMS4wOTMzIDI2LjgzMzQgMTRDMjYuODMzNCA2LjkwNjY2IDIxLjA5MzQgMS4xNjY2NiAxNC4wMDAxIDEuMTY2NjZaTTIzLjA3NjcgMTcuOTY2N0wyMi40MzUxIDE4LjIyMzNDMjIuMjYwMSAxOC4yOTMzIDIyLjA2MTcgMTguMjExNyAyMS45OTE4IDE4LjAzNjdMMjEuOTIxOCAxNy44NzMzTDE1LjQxMTcgMTguNDhDMTUuNTI4NCAxOS4wNjMzIDE1LjQ3MDEgMTkuNjkzMyAxNS4yMzY3IDIwLjI0MTdDMTQuOTIxNyAyMS4wMTE3IDE0LjMyNjcgMjEuNjA2NyAxMy41NTY3IDIxLjkyMTdIMTMuNTQ1MUMxMi43OTg0IDIyLjIyNSAxMS45MzUxIDIyLjIyNSAxMS4xODg0IDIxLjkyMTdDMTAuNDMwMSAyMS42MDY3IDkuODIzNDIgMjEgOS41MDg0MiAyMC4yNTMzTDkuMDMwMDggMTkuMDc1TDYuODAxNzUgMTkuMjg1QzYuNzY2NzUgMTkuMzc4MyA2LjcwODQyIDE5LjQ2IDYuNjAzNDIgMTkuNTA2N0w1Ljk2MTc1IDE5Ljc2MzNDNS43ODY3NSAxOS44MzMzIDUuNTg4NDIgMTkuNzUxNyA1LjUxODQxIDE5LjU3NjdMNC4yMTE3NSAxNi4zOTE3QzQuMTQxNzUgMTYuMjE2NyA0LjIyMzQxIDE2LjAxODMgNC4zOTg0MSAxNS45NDgzTDUuMDQwMDggMTUuNjkxN0M1LjEzMzQxIDE1LjY1NjcgNS4yMzg0MSAxNS42NjgzIDUuMzMxNzUgMTUuNzE1TDE3LjEwMzQgNi4xMTMzM0wxNy4wMzM0IDUuOTVDMTYuOTYzNCA1Ljc3NSAxNy4wNDUxIDUuNTc2NjYgMTcuMjIwMSA1LjUwNjY2TDE3Ljg2MTcgNS4yNUMxOC4wMzY3IDUuMTggMTguMjM1MSA1LjI2MTY2IDE4LjMwNTEgNS40MzY2NkwyMy4yNjM0IDE3LjUzNUMyMy4zMzM0IDE3LjcxIDIzLjI1MTcgMTcuOTA4MyAyMy4wNzY3IDE3Ljk3ODNWMTcuOTY2N1oiIGZpbGw9IiM2MkFBRkYiLz4KPC9nPgo8L2c+Cjwvc3ZnPgo=');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}