/* ==========================================================================
 * Social Intranet - Theme nicht in der Standardauswahl enthalten
 * Theme-Farbe:        hsl(208, 100%, 24%)
 * Theme-Farbe cta:    hsl(208, 100%, 29%)
 * Abweichende Call-to-Action Farbe wegen Kontrast
 * color-highlight entspricht color
 * und wird für flächige Elemtente verwendet.
  ========================================================================== */

:root {
    --color: 208, 100%; /* base color */
    --l: 24%; /* initial lightness */
    --color-cta: var(--color); /* call to action color */
    --l-cta: 29%; /* initial lightness call to action color */
    --color-highlight: var(--color); /* color highlight */
    --l-highlight: var(--l); /* initial lightness color highlight */
    --l-modifier: 7%; /* added to lightness */
    --l-modifier-pastel: 70%; /* added to lightness to create a pastel version of the theme highlight color)*/

    --nbg-theme-bg-highlight-hex: #00417a; /* amChart hack */
    --nbg-theme-bg-highlight-hex-dark: #5793c7; /* amChart hack fuer darkmode*/
    --constant-theme-bg: hsl(208, 100%, 29%); /* bleibt unverändert auch im darkmode */
    --constant-theme-bg-highlight: hsl(208, 100%, 29%); /* bleibt unverändert auch im darkmode */
}

.dark {
    --color: 208, 50%; /* base color */
    --l: 56%; /* initial lightness */
    --color-cta: 208, 70%; /* call to action color */
    --l-cta: 79% /* initial lightness call to action color */
}

.box--nori {
    background-size: cover;
    box-shadow: 0 0 .5rem hsla(0, 0%, 0%, 0.5);
    border: .065rem solid hsl(208, 100%, 70%);
    width: 100%;
    position: relative;
    height: 0;
}

.dark .box--nori {
    box-shadow: 0 0 .5rem hsla(0, 0%, 100%, 0.5);
    border: .065rem solid hsl(208, 50%, 70%);
}

.box--nori:has(.box--nori__link:hover) /* Container um Box hover*/ {
    filter: brightness(.9);
    transition: all .5s;
}

.box--nori-main {
    background-image: url(/images/social_intranet/button_feedback_570x150.svg);
    padding-bottom: 27%;
}

.box--nori-aside {
    background-image: url(/images/social_intranet/button_feedback_195x120.svg);
    padding-bottom: 61%;
}

.box--nori__link {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    left: 0;
    right: 0;
    top: 0;
    padding-right: 1.5rem
}

.box--nori__icon {
    fill: var(--constant-theme-bg-highlight);
    width: 4rem;
}

.box--nori:hover .box--nori__icon {
    fill: color-mix(in hsl,var(--constant-theme-bg-highlight),black 14%);
}