/* -------------------------------------------------------------------------- *
   Beta, color und Background Neu

   statt -bgr-back-05

   Farbabstufung dann per style=" stufenlos möglich
   <div class="b-infobox | -dashed | -bgr-back-neu" style="--shine: 5%">
 * -------------------------------------------------------------------------- */
@each $name, $color in $styleMapSite {
  .-col#{$name}-neu { 
    --shine: 0%;
    --gloom: 0%;
    color: color-mix(in oklch, White var(--shine), color-mix(in oklch, Black var(--gloom), #{$color}));; 
  }

  .-bgr#{$name}-neu {
    --shine: 0%;
    --gloom: 0%;
		           color: fct_scss-colorfit($color, $contrast: $colorfit_contrast, $scale: 100%);
    background-color: color-mix(in oklch, White var(--shine), color-mix(in oklch, Black var(--gloom), #{$color})); 
  } /* -bgr# */
} /* each(key) */



/* Hier gehts noch nicht korrekt */
body.theme-dark {
  @each $name, $color in $styleMapSiteDark {
    .-bgr#{$name}-neu {
      --shine: 0%;
      --gloom: 0%;
  		           color: fct_scss-colorfit($color, $contrast: $colorfit_contrast, $scale: 100%);
      background-color: color-mix(in oklch, White var(--shine), color-mix(in oklch, $color var(--gloom), #{$color})); 
    //border: 1px solid red;
    } /* -bgr# */
  } /* each(key) */
} /* body.theme-dark */



/*
// Testausgabe
<dfn>-bgr-xxxx-neu</dfn>
<? 
$styleMapSite = array(
  '-text',
  '-back',
  '-link',
  '-done',
  '-warn',
  '-gray',
  '-shin',
); 
?>
<li style="display: grid; gap: 1em; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));">
  <? foreach($styleMapSite as $color) { ?>
  <center>
    <p><a class="button | -expand | -col<?= $color; ?>-neu"><b>-col<?= $color; ?></b></a></p>
    <p><a class="button | -expand | -col<?= $color; ?>-neu" style="--gloom: 15%"><b>-col<?= $color; ?> 51%</b></a></p>
    <p><a class="button | -expand | -bgr<?= $color; ?>-neu"><b>-bgr<?= $color; ?></b></a></p>
    <p><a class="button | -expand | -bgr<?= $color; ?>-neu" style="--shine: 15%"><b>-bgr<?= $color; ?>" 15%</b></a></p>
  </center>
  <? } ?>
</li>
*/