/* USP-Leiste – OPC-Portlet (snafu_uspbar) */
.snafu-usp {
    --usp-cols-lg: 4;
    --usp-cols-md: 2;
    --usp-cols-xs: 1;
    --usp-gap: 32px;
    --usp-row-gap: 24px;
    --usp-item-pad: 0px;
    --usp-bar-pad: 28px;
    --usp-bar-border: #e4ded1;
    --usp-icon-size: 22px;
    --usp-title-size: 15px;
    --usp-text-size: 13px;
    --usp-title-ls: 0px;
    --usp-title-weight: 700;
    --usp-title-tt: none;
    --usp-bg: #faf7f0;
    --usp-item-bg: transparent;
    --usp-icon: currentColor;
    --usp-icon-bg: rgba(0, 0, 0, .06);
    --usp-title: inherit;
    --usp-text: inherit;
    --usp-divider: rgba(0, 0, 0, .12);
    --usp-hover: var(--usp-title);
    background: var(--usp-bg);
    color: var(--usp-text);
    padding-top: var(--usp-bar-pad);
    padding-bottom: var(--usp-bar-pad);
}
.snafu-usp--border-top,
.snafu-usp--border-both { border-top: 1px solid var(--usp-bar-border); }
.snafu-usp--border-bottom,
.snafu-usp--border-both { border-bottom: 1px solid var(--usp-bar-border); }

.snafu-usp__grid {
    display: grid;
    grid-template-columns: repeat(var(--usp-cols-xs), minmax(0, 1fr));
    column-gap: var(--usp-gap);
    row-gap: var(--usp-row-gap);
}
@media (min-width: 768px) {
    .snafu-usp__grid { grid-template-columns: repeat(var(--usp-cols-md), minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .snafu-usp__grid { grid-template-columns: repeat(var(--usp-cols-lg), minmax(0, 1fr)); }
}

/* Eintrag */
.snafu-usp__item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: var(--usp-item-pad);
    background: var(--usp-item-bg);
    color: var(--usp-text);
    text-decoration: none;
}
.snafu-usp__item--link:hover,
.snafu-usp__item--link:focus { text-decoration: none; color: var(--usp-text); }
.snafu-usp__item--link:hover .snafu-usp__title,
.snafu-usp__item--link:focus .snafu-usp__title { color: var(--usp-hover); }
.snafu-usp__item--link:focus-visible { outline: 2px solid var(--usp-icon); outline-offset: 2px; }

.snafu-usp--align-start  .snafu-usp__item { justify-content: flex-start; text-align: left; }
.snafu-usp--align-center .snafu-usp__item { justify-content: center; }
.snafu-usp--align-end    .snafu-usp__item { justify-content: flex-end; text-align: right; }

.snafu-usp--icon-top .snafu-usp__item { flex-direction: column; gap: .5em; }
.snafu-usp--icon-top.snafu-usp--align-start  .snafu-usp__item { align-items: flex-start; }
.snafu-usp--icon-top.snafu-usp--align-center .snafu-usp__item { align-items: center; text-align: center; }
.snafu-usp--icon-top.snafu-usp--align-end    .snafu-usp__item { align-items: flex-end; }

/* Icon links: oben bündig mit der ersten Zeile der Überschrift */
.snafu-usp--icon-left.snafu-usp--valign-start .snafu-usp__item { align-items: flex-start; }
.snafu-usp--icon-left.snafu-usp--valign-start.snafu-usp--shape-none .snafu-usp__icon {
    margin-top: calc((var(--usp-title-size) * 1.3 - var(--usp-icon-size)) / 2);
}

/* Icon */
.snafu-usp__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--usp-icon-size);
    line-height: 1;
    color: var(--usp-icon);
}
.snafu-usp__icon img,
.snafu-usp__icon svg {
    display: block;
    width: var(--usp-icon-size);
    height: var(--usp-icon-size);
    object-fit: contain;
}
.snafu-usp--svg-colorize .snafu-usp__icon--svg svg:not([fill="none"]),
.snafu-usp--svg-colorize .snafu-usp__icon--svg svg [fill]:not([fill="none"]) { fill: currentColor; }
.snafu-usp--svg-colorize .snafu-usp__icon--svg svg [stroke]:not([stroke="none"]) { stroke: currentColor; }

.snafu-usp--shape-circle .snafu-usp__icon,
.snafu-usp--shape-rounded .snafu-usp__icon {
    width: calc(var(--usp-icon-size) * 1.9);
    height: calc(var(--usp-icon-size) * 1.9);
    font-size: var(--usp-icon-size);
    background: var(--usp-icon-bg);
}
.snafu-usp--shape-circle  .snafu-usp__icon { border-radius: 50%; }
.snafu-usp--shape-rounded .snafu-usp__icon { border-radius: 22%; }

/* Text */
.snafu-usp__body { min-width: 0; }
.snafu-usp .snafu-usp__title {
    display: block;
    margin: 0;
    font-size: var(--usp-title-size);
    font-weight: var(--usp-title-weight);
    text-transform: var(--usp-title-tt);
    letter-spacing: var(--usp-title-ls);
    line-height: 1.3;
    color: var(--usp-title);
}
.snafu-usp--title-italic .snafu-usp__title { font-style: italic; }
.snafu-usp__text {
    margin-top: 4px;
    font-size: var(--usp-text-size);
    line-height: 1.6;
    color: var(--usp-text);
}

/* Trennlinien: jede Reihe beginnt ohne Linie links */
.snafu-usp--dividers .snafu-usp__item { border-left: 1px solid var(--usp-divider); }

@media (max-width: 767.98px) {
    .snafu-usp--dividers.snafu-usp--xs-1 .snafu-usp__item:nth-child(1n+1) { border-left: 0; }
    .snafu-usp--dividers.snafu-usp--xs-2 .snafu-usp__item:nth-child(2n+1) { border-left: 0; }
    .snafu-usp--dividers.snafu-usp--xs-3 .snafu-usp__item:nth-child(3n+1) { border-left: 0; }
    .snafu-usp--dividers.snafu-usp--xs-4 .snafu-usp__item:nth-child(4n+1) { border-left: 0; }
    .snafu-usp--dividers.snafu-usp--xs-5 .snafu-usp__item:nth-child(5n+1) { border-left: 0; }
    .snafu-usp--dividers.snafu-usp--xs-6 .snafu-usp__item:nth-child(6n+1) { border-left: 0; }
    .snafu-usp--dividers.snafu-usp--xs-1 .snafu-usp__item + .snafu-usp__item { border-top: 1px solid var(--usp-divider); }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .snafu-usp--dividers.snafu-usp--md-1 .snafu-usp__item:nth-child(1n+1) { border-left: 0; }
    .snafu-usp--dividers.snafu-usp--md-2 .snafu-usp__item:nth-child(2n+1) { border-left: 0; }
    .snafu-usp--dividers.snafu-usp--md-3 .snafu-usp__item:nth-child(3n+1) { border-left: 0; }
    .snafu-usp--dividers.snafu-usp--md-4 .snafu-usp__item:nth-child(4n+1) { border-left: 0; }
    .snafu-usp--dividers.snafu-usp--md-5 .snafu-usp__item:nth-child(5n+1) { border-left: 0; }
    .snafu-usp--dividers.snafu-usp--md-6 .snafu-usp__item:nth-child(6n+1) { border-left: 0; }
    .snafu-usp--dividers.snafu-usp--md-1 .snafu-usp__item + .snafu-usp__item { border-top: 1px solid var(--usp-divider); }
}

@media (min-width: 992px) {
    .snafu-usp--dividers.snafu-usp--lg-1 .snafu-usp__item:nth-child(1n+1) { border-left: 0; }
    .snafu-usp--dividers.snafu-usp--lg-2 .snafu-usp__item:nth-child(2n+1) { border-left: 0; }
    .snafu-usp--dividers.snafu-usp--lg-3 .snafu-usp__item:nth-child(3n+1) { border-left: 0; }
    .snafu-usp--dividers.snafu-usp--lg-4 .snafu-usp__item:nth-child(4n+1) { border-left: 0; }
    .snafu-usp--dividers.snafu-usp--lg-5 .snafu-usp__item:nth-child(5n+1) { border-left: 0; }
    .snafu-usp--dividers.snafu-usp--lg-6 .snafu-usp__item:nth-child(6n+1) { border-left: 0; }
    .snafu-usp--dividers.snafu-usp--lg-1 .snafu-usp__item + .snafu-usp__item { border-top: 1px solid var(--usp-divider); }
}

/* Smartphone: horizontal wischbar */
@media (max-width: 767.98px) {
    .snafu-usp--scroll .snafu-usp__grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .snafu-usp--scroll .snafu-usp__grid::-webkit-scrollbar { display: none; }
    .snafu-usp--scroll .snafu-usp__item { scroll-snap-align: start; }
    .snafu-usp.snafu-usp--dividers.snafu-usp--scroll .snafu-usp__item { border-left: 1px solid var(--usp-divider); border-top: 0; }
    .snafu-usp.snafu-usp--dividers.snafu-usp--scroll .snafu-usp__item:first-child { border-left: 0; }
}