/**!
 * vars
 * 
 * @version 0.1.0  21.12.2018
 * @author R. Serradeil, WebMechanic.biz
 */
/**
 * FF31/FFa63, CHR43/CHRa70, SF9.1, OP36, ED16, SI5
 * Not: MSIE, OPmini (2.02%),BB
 * ED15(0.05%) Nested calculations are not computed and are ignored; animations
 *       with vars crash the page; vars not applicable to generated content
 * @link https://caniuse.com/#feat=css-variables
 */
:root {
    font-size:16px;
    --fs:1rem;
    --fss: calc(var(--fs) * .875);
    --gr:1.618; --gr2:.62; --gr3:.81;
    
    /* font-size scale */
    --h1:calc(var(--fs) * 2.618); /* 0.327 */
    --h2:calc(var(--fs) * 2.291); /* 0.673 */
    --h3:calc(var(--fs) * 1.618); /* 0.202 */
    --h4:calc(var(--fs) * 1.416); /* 0.416 */
    --h5:var(--fs) ;
   
    /* [WIP] line-height scale */
    line-height:initial;
    --l1:var(--gr);
    --l2:1.55;
    --l3:1.42;
    --l4:1.0;
    --l5:1.0;

    /* [WIP] vertical margin scale in EM */
    --mv1:0.618em;
    --mv2:0.875em;
    --mv3:1.416em;
    --mv4:1.618em;
    --mv5:2.291em;
}

body {--fs:inherit; --lh:1; --gr:inherit;}

/* http://paletton.com/#uid=23v0u0k++nzZCI4+Wtg+Yi7+PbE */
:root {
    --hue:0;--sat:0%;--lum:50%;
    --txtcolor :#004A78;    /* enzianblau RAL 5010 */
    --txtcolor-inv:#fafafa; /* calcit - text invers - btn-secondary-text-color */
    --txtcompl :#BC6900;    /* complementary */

    --lines:hsla(202,100%,24%,.85); /* panel outline et all */
    --hdbg: hsla(202,100%,24%,.85); /* header+headline background + white text */
    --bdbg: hsla(202,100%,24%,.85); /* textpanel dunkl wenn es über einem bild liegt */
    --bdbginv:hsla(0,0%,98%,.75);   /* textpanel hell  wenn es über einem bild liegt */
    --bodybg:linear-gradient(135deg, hsl(210,100%,14%) 40%, hsl(202,100%,24%));
    --imgbg: linear-gradient(135deg, hsl(202,100%,24%) 40%, hsl(210,100%,14%));

    /* ..brand-col .brand-1 .brand-4 */
    --marineart:     #004A78; /* ~ hsl(202,100%,24%) enzianblau RAL 5010 */
	--marineart-dark:#00243B; /* ~ 4 dark   */
	--marineart-med :#005A95; /* ~ 3 medium */
	--marineart-lite:#017AC9; /* ~ 1 light - buttons */
    --complementary :#BC6900;

    --calcmix  :#ef4023; /* orangebraun */
    --marinphos:#8c301d; /* kastanie    */
    --flakes   :#b56112; /* ocker       */
    --algenexit:#eda221; /* dunkelgold  */
    --halogene :#fff200; /* gelb        */
    --magnesium:#00a76d; /* grün        */
    --floras   :#008177; /* petrolgrün  */
    --carbonat :#00aeef; /* hellblau    */
    --strontium:#005AAA; /* blau        */
    --aquaclean:#942972; /* violett     */
    --elements :#ed1651; /* rot         */
    --calcium  :#e9e9e9; /* hellgrau    */
    --calcit   :#fafafa; /* weißgrau - btn-secondary-text-color - `txtcolor-inv` */
    --carbon   :#000000; /* schwarz     */
    --oceandry :#000080; /* navy        */
}

/* Farben der Pflegeprodukte -- RGB, HSL, INT parseInt(hexval, 16), HSB */
.brand-col,
.marineart      {--hue:202; --sat: 79%; --lum:24%;} /* rgb(  0, 79,124)  hsl( 203,100%,24% ) INT:    102500 HSB: 202,100,47 */
.brand-4,
.marineart.dark {--lum:10.9%;}
.brand-1,
.marineart.lite {--lum:37.1%;}

.brand-scnd-1 { color:rgb(255,188,0) }
.brand-scnd-2 { color:rgb(233,172,0) }
.brand-scnd-0 { color:rgb(188,139,0) }	/* #BC8B00 Secondary color (mustardy) */
.brand-scnd-3 { color:rgb(144,107,0) }
.brand-scnd-4 { color:rgb( 93, 69,0) }

.brand-comp-1 { color:rgb(255,142,0) }
.brand-comp-2 { color:rgb(233,130,0) }
.brand-comp-0 { color:rgb(188,105,0) }	/* #BC6900 Complement color (orange) ~ flakes */
.brand-comp-3 { color:rgb(144, 81,0) }
.brand-comp-4 { color:rgb( 93, 52,0) }

.calcmix   { --hue:  9; --sat: 86%; --lum:54%;} /* rgb(239, 64, 35)  hsl(   9, 86%,54% ) INT: 359109923 HSB:   9, 86,93 */
.marinphos { --hue: 11; --sat: 66%; --lum:33%;} /* rgb(140, 48, 29)  hsl(  11, 66%,33% ) INT: 152597335 */
.flakes    { --hue: 29; --sat: 82%; --lum:39%;} /* rgb(181, 97, 18)  hsl(  29, 82%,39% ) INT: 294152294 */
.algenexit { --hue: 38; --sat: 85%; --lum:53%;} /* rgb(237,162, 33)  hsl(  38, 85%,53% ) INT: 358036791 */
.halogene  { --hue: 57; --sat:100%; --lum:50%;} /* rgb(255,242,  0)  hsl(  57,100%,50% ) INT: 376911410 */
.magnesium { --hue:159; --sat:100%; --lum:33%;} /* rgb(  0,167,109)  hsl( 159,100%,33% ) INT:    272481 */
.floras    { --hue:175; --sat:100%; --lum:25%;} /* rgb(  0,129,119)  hsl( 175,100%,25% ) INT:    209219 */
.carbonat  { --hue:196; --sat:100%; --lum:47%;} /* rgb(  0,174,239)  hsl( 196,100%,47% ) INT:    280451 */
.strontium { --hue:208; --sat:100%; --lum:33%;} /* rgb(  0, 90,170)  hsl( 208,100%,33% ) INT:    143888 */
.aquaclean { --hue:319; --sat: 56%; --lum:37%;} /* rgb(148, 41,114)  hsl( 319, 56%,37% ) INT: 158374200 */
.elements  { --hue:344; --sat: 86%; --lum:51%;} /* rgb(237, 22, 81)  hsl( 344, 86%,51% ) INT: 357791557 */
.calcium   { --hue:  0; --sat:  0%; --lum:91%;} /* rgb(233,233,233)  hsl(   0,  0%,91% ) INT: 355637097 */
.calcit    { --hue:  0; --sat:  0%; --lum:98%;} /* rgb(250,250,250)  hsl(   0,  0%,98% ) INT: 373588560 */
.carbon    { --hue:  0; --sat:  0%; --lum: 0%;} /* rgb(  0,  0,  0)  hsl(   0,  0%, 0% ) INT:         0 */
.oceandry  { --hue:  0; --sat:  0%; --lum: 0%;} /* rgb(  0,  0,128)  hsl( 240,100%,25% ) INT:       128 */


/* screen size breakpoints */
@media screen {
    :root{--max-content:78.75em; --max-screen:90em;}
    @media (max-width:20em)    { :root{--screen-em:20em; --scale:'xs';} }
    @media (max-width:30em)    { :root{--screen-em:30em; --scale:'s';} }
    @media (max-width:48em)    { :root{--screen-em:48em; --scale:'m';} }
    @media (max-width:64em)    { :root{--screen-em:64em; --scale:'ml';} }
    @media (max-width:78.75em) { :root{--screen-em:78.75em; --scale:'xl';} }
    @media (max-width:90em)    { :root{--screen-em:90em; --scale:'xxl';} }
}

/* 1-spaltig - 100vw  */
.emotion--container {--gridcol:100vw; --gta:"l" "c" "r" "BL" "BR";}
@media (min-width:320px) {
    :root{--screen-px:320px;}
}
/* 2-spaltig - 50vw  */
@media (min-width:30em) {
    .emotion--container {--gridcol:50vw; --gta: "c c" "l r" "BL BR";}
}
@media (min-width:480px) {
    :root{--screen-px:480px;}
}

/* 4-spaltig - 25vw */
@media (min-width:48em) {
    .emotion--container {--gridcol:25vw; --gta:"l c c r" "BL c c BR";}
}
@media (min-width:768px) {
    :root{--screen-px:768px;}
}

/* 5-spaltig - 20vw */
@media (min-width:64em) {
    .emotion--container {--gridcol:20vw; --gta:"BL l c r BR";}
}
@media (min-width:1024px) {
    :root{--screen-px:1024px;}
}

/* 8-spaltig - 12.5vw */
@media (min-width:78.75em) {
    .emotion--container {--gridcol:12.5vw; --gta:"BL l c c c c r BR";}
}
@media (min-width:1260px) {
    :root{--screen-px:1260px;}
}

@media (min-width:1344px) {/* 84em */
    :root{--screen-px:1344px;}
}

@media (min-width:90em) {}
@media (min-width:1440px) {
    :root{--screen-px:1440px;}
}

/* .eof */