/* evtl. in eigene layout datei */
.l-grid-stack {
    display: grid;
    width: 100%;
    /*! gap: var(---l-stack-row-gap); */
    --l-stack-min-content-width: 20rem;
    --card-img-height: 20rem;
    /* default value*/
    grid-template-columns: repeat(auto-fit, minmax(var(--l-stack-min-content-width), 1fr));
    /* max-width: 140rem; */
    row-gap: var(--l-stack-row-gap);
    column-gap: var(--l-stack-col-gap);
}

/*  über diese Klasse wird gesteuert, wie viele Elemente in eine Spalte passen */
.l-grid-stack--w30 {
    --l-stack-min-content-width: 32rem;
    /* --fs-card-heading: var(); */
  --l-stack-row-gap: 30px;
  --l-stack-col-gap: 30px;
}

@media (max-width: 500px){
    .l-grid-stack--w30 {
    --l-stack-min-content-width: 28rem;
    --l-stack-row-gap: var(--mg-lr-main);
    }
}

.l-card {
    height: 100%;
}

.card {
    --card-bd-radius: 3rem;
    --card-img-ratio: 366 / 200;
    --card-mg-lr: 1.1rem;
    --card-fs: 1.8rem;
    --prog-h: 2rem;
    --bak-color-prog-bar: var(--grey-400);
    --sum-arrow-w: 1.3em;
    --sum-arrow-ratio: 23 / 11;;
}


.card {
    background: white;
    border-radius: var(--card-bd-radius);
    color: black;
    display: flex;
    flex-direction: column;
    box-shadow: var(--box-shadow-z2);
    cursor: pointer;
}

.card__pd-lr{
    padding-left: var(--card-mg-lr);
    padding-right: var(--card-mg-lr);
}

.card__mg-lr{
    margin-left: var(--card-mg-lr);
    margin-right: var(--card-mg-lr);
}

.card > *:last-child{
    margin-bottom: 1em;
    margin-top: 1em;
}

.card__img {
    aspect-ratio: var(--card-img-ratio);
    width: 100%;
    height: auto;
    background-color: lightskyblue;
    border-top-left-radius: var(--card-bd-radius);
    border-top-right-radius: var(--card-bd-radius);
}

.card__btn{
    align-self: end;
    width: max-content;
}

.passung {  
    margin-top: 1em;
    margin-bottom: 2em;  
}

.passung__bar {
    height: var(--prog-h);
    background: var(--bak-color-prog-bar);
    width: 100%;
    border-radius: calc(var(--prog-h) / 2);
    box-shadow: var(--box-shadow-z2);
}

.passung__fill {
    height: var(--prog-h);
    width: var(--passung-value);
    min-width: var(--prog-h);
    background: var(--main-color);
    border-radius: calc(var(--prog-h) / 2);
}

.passung {
    --prog-triangle-size: 1rem;
    --prog-label-width: 5rem;
    --prog-label-pd: 0.5rem;
}

.passung__value-container {
    margin-bottom: calc(var(--prog-triangle-size) / -2);
    display: flex;
}

.passung__value-label-outer {
    position: relative;
    width: max-content;
    left: clamp(calc(0% + var(--prog-label-width) / 2), var(--passung-value), calc(100% - var(--prog-label-width) / 2));
    left: clamp(calc(0% + var(--prog-label-width) / 2), var(--passung-value), calc(100% - var(--prog-label-width) / 2) + 1rem);

}

.passung__value-label {
    position: relative;
    background: var(--main-color);
    color: white;
    left: -50%;
    padding: var(--prog-label-pd);
    width: var(--prog-label-width);
    border-radius: 5px;
}

.passung__triangle-container {
    margin-bottom: 2rem;
    position: relative;
}

.passung__value-triangle {
    position: absolute;
    border-style: solid;
    border-width: var(--prog-triangle-size) var(--prog-triangle-size) 0 var(--prog-triangle-size);
    border-color: var(--main-color) transparent transparent transparent;
    transform: rotate(0deg);
    top: calc(var(--prog-triangle-size) / 2 -2px);
    left: clamp(calc(var(--prog-h) / 2), calc(var(--passung-value) - var(--prog-triangle-size)), 100%);
}

.berufsfelder_page {
    max-width: 140rem;
    width: 95vw;
    margin: 0 14rem;
}