/**** 1. choose the fonts the fonts 
$body-font-family: 'Montserrat';
$small-font-family: 'Lato';
$head-font-family: 'Lato';
$deco-font-family: 'Trajan';

$body-font-family: Lato;//'Gotham Rounded Book';//'Raleway', 'Roboto', 'Noto Sans', 'Montserrat', 
$head-font-family: 'Gotham Rounded Medium';
$deko-font-family: 'Trajan';
*/
/**** 1. choose the fonts the fonts ***/
/* fonts */
/* standards  //#84202a; #333300; #4d3300;


$mid:                     mix($bar, #ffffff, 18%);//#ddeeff;

$callout:                 mix($bar, $mid, 50%);
$callout-contrast:        contrast-color($callout);
$callout-dark:            mix($bar, $mid, 20%);
$callout-dark-contrast:   contrast-color($callout-dark);
$callout-light:           mix($bar, $mid, 70%);
$callout-light-contrast:  contrast-color($callout-light);
$callout-lighter:         mix($bar, $mid, 85%);
$callout-lighter-contrast:    contrast-color($callout-light);

$callout-rgb:        hex-to-rgb($callout);


$form:                mix($bar, #ffffff, 14%);//#ddeeff;
$form-hover:          mix($bar, #ffffff, 22%);//#ddeeff;
$form-focus:          mix($bar, #ffffff, 25%);//#ddeeff;
$form-error:          mix($bar, #ff0000, 25%);//#ddeeff;
$form-contrast:       contrast-color($form);

$input:               contrast-gradient($bar);

$text:                contrast-color($bar);
$text-rgb:            hex-to-rgb($text);

$mid-rgb:             hex-to-rgb($mid);
$mid-contrast:        contrast-color($mid);
$mid-contrast-rgb:    hex-to-rgb($mid-contrast);

//$bar-rgb:             hex-to-rgb($bar);
//$bar-contrast:        contrast-color($bar);
//$bar-contrast-rgb:    hex-to-rgb($bar-contrast);

//$deepbar:             version($bar, 2%);//darken($bar, 2%);
//$deeperbar:           version($bar, 5%);
//$deepestbar:          version($bar, 10%);

//$main-rgb:            hex-to-rgb($main);
//$main-contrast:       contrast-color($main);
//$main-contrast-rgb:   hex-to-rgb($main-contrast);


/* login 
$bar-login:           #20232a;//#19334d;//  #293d3d;//#19334d;//#20232a;

$bar-login-rgb:       hex-to-rgb($bar-login);
$text-login:          contrast-color($bar-login);
$text-login-rgb:      hex-to-rgb($text-login);

$bar-login-rgb:       hex-to-rgb($bar-login);
$logindeepbar:        darken($bar-login, 2%);
$logindeeperbar:      darken($bar-login, 5%);
$logindeepestbar:     darken($bar-login, 10%);

//$login-input:         contrast-gradient($bar-login);

//$logfield:            rgba(var(--bt),var(--opal-2);
/*$logfield-2:          version($bar-login, 20%);
$logfield-3:          version($bar-login, 30%);
$logfield-4:          version($bar-login, 40%);
$logfield-5:          version($bar-login, 50%);
$logfield-9:          version($bar-login, 90%);*/
/* mid */
/* BOOTSTRAP SELECT */
/* END BOOTSTRAP SELECT */
/* main */
/* preloader */
/* mid */
/* bar colors */
/*form */
/*$field-4:             rgba(var(--t),var(--opacity-4));
$field-5:             version($mid, 50%);
$field-9:             version($mid, 90%);*/
/*:root {
  --bar-base:           $bar;
  --bar-deepest:        $deepestbar;
  --bar-login-deepest:  $logindeepestbar;
  --bar-contrast:       contrast-color($bar);
}*/
/*.is_login {
  --bar-login:                $bar-login;
  --bar-login-contrast:       contrast-color($bar-login);
}*/
/*.login_site {
  --body-back:      $logindeepestbar;
  --body-color:     yellow;
  --pre-back:       rgba(32, 32, 42, 1);
  --pre-color:      rgba(250, 250, 252, 1);
  --pre-color2:     rgba(140, 140, 140, 1);
  --pre-path1:      rgba(25, 25, 35, 1);
  --pre-path2:      $main;
}*/
/*.member_site {
  --body-back:      var(--c1);
  --body-color:     contrast-color($mid);
  --text:           hex-to-rgb(contrast-color($mid));
  --middy:          $mid;
  --middy-contrast: contrast-color($mid);
  --pre-back:       $deepbar;
  --pre-color:      contrast-color($deepbar);
  --pre-color2:     contrast-color($bar);
  --pre-path1:      lighten($bar,10%);
  --pre-path2:      $main;
}*/
/*$color-main: red;
$color-deko: red;
$color-main: red;
$ease: cubic-bezier(0.77, 0, 0.18, 1) !default;
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,  
  xl: 1200px,
  xxl: 1400px
) !default;

// Mixins
*/
/*
$main-color: #FFC107
$main-color: #f44336;
$main-color: #4CAF50;
$main-color: #64B5F6;
*/
/*
$shadow-1: 0 3px 8px 0 rgba(15,15,20,.2);
$shadow-2: 0 1px 4px 0 rgba(15,15,20,.1);

$tr-lg: 0.55s ease-in-out;
$tr-md: 0.4s ease-in-out;
$tr-sm: 0.2s ease-in-out;

$text-neon: 0 0 3px rgba(250,0,252,.4);

$card-color: linear-gradient(159deg, rgba(45,45,58,1) 0%, rgba(43,43,53,1) 100%);
$card-color-light: linear-gradient(159deg, rgba(45,45,58,.98) 0%, rgba(43,43,53,.98) 100%);
$card-color-s-light: linear-gradient(159deg, rgba(45,45,58,.88) 0%, rgba(43,43,53,.88) 100%);

$info-bar-1-color: rgba(32,32,42,1);
$info-bar-1-color-light: rgba(32,32,42,.98);
$info-bar-1-color-s-light: rgba(32,32,42,.88);

$info-bar-2-color: linear-gradient(159deg, rgba(37,37,50,1) 0%, rgba(35,35,45,1) 100%);
$info-bar-2-color-light: linear-gradient(159deg, rgba(37,37,50,.98) 0%, rgba(35,35,45,.98) 100%);
$info-bar-2-color-s-light: linear-gradient(159deg, rgba(37,37,50,.88) 0%, rgba(35,35,45,.88) 100%);

$content-color: rgba(30,30,40,1);
$content-color-light: rgba(30,30,40,.98);
$content-color-s-light: rgba(30,30,40,.88);

$deep-color: rgba(25,25,35,1);
$deep-color-light: rgba(25,25,35,.98);
$deep-color-s-light: rgba(25,25,35,.88);

$text-color-1: rgba(250,250,252,1);
$text-color-2: rgba(140,140,142,1);
$text-color-3: rgba(100,100,102,1);

$top-bg-gradient: linear-gradient(180deg, rgba(30,30,40,.93) 0%, rgba(30,30,40,.96) 70%, rgba(30,30,40,.99) 80%, rgba(30,30,40,1) 100%);

*/
/* add font in _variables/_wolfi_variables ... change the first lines */
@font-face {
  font-family: "summernote";
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("/_assets/fonts/summernote.eot?#iefix") format("embedded-opentype"), url("/_assets/fonts/summernote.woff2") format("woff2"), url("/_assets/fonts/summernote.woff") format("woff"), url("/_assets/fonts/summernote.ttf") format("truetype");
}
@font-face {
  font-family: "Flaticon";
  src: url("/_assets/fonts/Flaticon/Flaticon.woff2") format("woff2"), url("/_assets/fonts/Flaticon/Flaticon.woff") format("woff"), url("/_assets/fonts/Flaticon/Flaticon.ttf") format("truetype"), url("/_assets/fonts/Flaticon/Flaticon.eot") format("embedded-opentype"), url("/_assets/fonts/Flaticon/Flaticon.eot?#iefix") format("embedded-opentype"), url("/_assets/fonts/Flaticon/Flaticon.svg#Flaticon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: "Flaticon";
    src: url("/_assets/fonts/Flaticon/Flaticon.svg#Flaticon") format("svg");
  }
}
@font-face {
  font-family: "Gotham Rounded Book";
  src: url(/_assets/fonts/gotham/GothamRounded-Book.eot);
  src: url(/_assets/fonts/gotham/GothamRounded-Book.eot?#iefix) format("embedded-opentype"), url(/_assets/fonts/gotham/GothamRounded-Book.woff2) format("woff2"), url(/_assets/fonts/gotham/GothamRounded-Book.woff) format("woff"), url(/_assets/fonts/gotham/GothamRounded-Book.ttf) format("truetype"), url(/_assets/fonts/gotham/GothamRounded-Book.svg#GothamRounded-Book) format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham Rounded Bold";
  src: url(/_assets/fonts/gotham/GothamRounded-Bold.eot);
  src: url(/_assets/fonts/gotham/GothamRounded-Bold.eot?#iefix) format("embedded-opentype"), url(/_assets/fonts/gotham/GothamRounded-Bold.woff2) format("woff2"), url(/_assets/fonts/gotham/GothamRounded-Bold.woff) format("woff"), url(/_assets/fonts/gotham/GothamRounded-Bold.ttf) format("truetype"), url(/_assets/fonts/gotham/GothamRounded-Bold.svg#GothamRounded-Bold) format("svg");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Chomsky";
  src: url(/_assets/fonts/chomsky/Chomsky.eot);
  src: url(/_assets/fonts/chomsky/Chomsky.eot?#iefix) format("embedded-opentype"), url(/_assets/fonts/chomsky/Chomsky.otf) format("otf"), url(/_assets/fonts/chomsky/Chomsky.svg#Chomsky) format("svg"), url(/_assets/fonts/chomsky/Chomsky.ttf) format("truetype"), url(/_assets/fonts/chomsky/Chomsky.woff) format("woff"), url(/_assets/fonts/chomsky/Chomsky.woff2) format("woff2");
}
@font-face {
  font-family: "Trajan";
  src: url(/_assets/fonts/Trajan/trajan.ttf) format("truetype");
}
@font-face {
  font-family: "Barlow";
  src: url(/_assets/fonts/Barlow/Barlow-Medium.ttf) format("truetype");
}
@font-face {
  font-family: "Poppins";
  src: url(/_assets/fonts/Poppins/Poppins-Medium.ttf) format("truetype");
}
@font-face {
  font-family: "Slowriver";
  src: url(/_assets/fonts/Slowriver/SASlowRiver.ttf) format("truetype");
}
.flexCell h1, .flexCell h2, .flexCell h3, .flexCell h4, .flexCell h5, .flexCell h6, .flexCell p, .flexCell small {
  color: var(--body-color);
  padding: 2px 0 2px 0;
  line-height: 1.05em !important;
  margin: 0;
}
/*** FONTS Classes ***/
.f-md {
  font-size: 1rem;
}
.f-xs {
  font-size: 0.9rem;
}
.f-sm {
  font-size: 0.95rem;
}
.f-lg {
  font-size: 1.05rem;
}
.f-xl {
  font-size: 1.1rem;
}
.f-xxl {
  font-size: 1.2rem;
}
.f-100 {
  font-weight: 100;
}
.f-200 {
  font-weight: 200;
}
.f-300 {
  font-weight: 300;
}
.f-400 {
  font-weight: 400;
}
.f-500 {
  font-weight: 500;
}
.f-600 {
  font-weight: 600;
}
.f-700, b, strong, dt, h1, .h1 {
  font-weight: 700;
}
.f-800 {
  font-weight: 800;
}
.f-900 {
  font-weight: 900;
}
.f-i {
  font-style: italic;
}
.f-b {
  font-weight: bold;
}
.f-uc {
  text-transform: uppercase;
}
.f-lc {
  text-transform: lowercase;
}
.cp {
  cursor: pointer !important;
}
.tc {
  text-align: center;
}
sup {
  top: -0.3em;
  font-style: italic;
  color: var(--bs-body-color);
}
b, strong, dt {
  font-size: inherit;
}
.helpButton li, nav li {
  padding-left: 0 !important;
  font-size: 14px;
}
.helpButton li a, .helpButton li div, nav li a, nav li div {
  font-size: 15px !important;
  line-height: 1.2em;
}
h1, .h1 {
  text-transform: uppercase;
  font-size: var(--h1-size);
  line-height: var(--h-lineheight);
  text-align: center;
  color: var(--h1-color);
}
h2, .h2 {
  font-size: var(--h2-size);
  text-transform: uppercase;
  line-height: var(--lineheight);
  text-align: center;
  color: var(--h2-color);
}
h3, .h3 {
  font-size: var(--h3-size);
  line-height: var(--lineheight);
  text-align: left;
  color: var(--h3-color);
}
h4, .h4 {
  font-size: var(--h4-size);
  line-height: var(--lineheight);
  color: var(--h4-color);
}
h5, .h5 {
  font-size: var(--h5-size);
  line-height: var(--lineheight);
  color: var(--h5-color);
}
h6, .h6 {
  font-size: var(--h6-size);
  line-height: var(--lineheight);
  color: var(--h6-color);
}
a {
  color: var(--link);
}
a:hover {
  color: var(--link-hover);
}
p, li {
  line-height: var(--lineheight);
  /* decos */
}
p.cite, li.cite {
  color: #777 !important;
  font-style: italic;
  font-size: 0.95em !important;
  line-height: 1.1em !important;
}
p.deco, li.deco {
  font-family: var(--family-deco) !important;
  font-size: 22px !important;
  letter-spacing: 0.25em;
  text-align: center;
}
p.deco2, li.deco2 {
  font-family: var(--family-deco2) !important;
  font-size: 22px !important;
  letter-spacing: 0.25em;
  text-align: center;
}
/*

  Toggle Button

*/
.group-icon > span, .group-icon > i {
  font-style: normal;
}
/* by javascript */
.group-icon > span:last-child, .group-icon > i:last-child {
  display: none;
}
.group-icon > span:first-child, .group-icon > i:first-child {
  display: inline-block;
}
/* active */
.active > a > .group-icon > span:last-child, .active > a > .group-icon > i:last-child, .active > .group-icon > span:last-child, .active > .group-icon > i:last-child {
  display: inline-block;
}
.active > a > .group-icon > span:first-child, .active > a > .group-icon > i:first-child, .active > .group-icon > span:first-child, .active > .group-icon > i:first-child {
  display: none;
}
/* by bootstrap (dropdowns, collapse, etc) */
[aria-expanded="true"] .group-icon > span:first-child, [aria-expanded="true"] .group-icon > i:first-child {
  display: none;
}
[aria-expanded="true"] .group-icon > span:last-child, [aria-expanded="true"] .group-icon > i:last-child {
  display: inline-block;
}
/* Zahl Button */
.circZahl {
  cursor: pointer;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  color: var(--main);
  background-color: var(--main-contrast) !important;
  transition: var(--transition);
  justify-content: center;
  align-items: center;
  border: 1px solid var(--main);
  border-radius: 200px;
  font-size: 1rem;
  line-height: 1em;
  font-weight: 600;
  text-decoration: none !important;
}
.circZahl:hover {
  color: var(--main-contrast);
  background-color: var(--main-hover-contrast) !important;
  transition: var(--transition);
}
/*header icons */
header .admin .bi {
  font-size: 1.25rem !important;
  line-height: 1 !important;
}
header .admin .bi:hover {
  transform: scale(1.05);
  color: var(--bs-success-text-emphasis) !important;
}
/*.modalClose {
    border: none !important; 
    font-size: 1rem !important;
    margin-left:auto;
    &::before {
         content: "\f659";
         display: inline-block;
         font-family: bootstrap-icons !important;
         font-style: normal;
         font-weight: normal !important;
         font-variant: normal;
         text-transform: none;
         line-height: 1;
         vertical-align: -0.125em;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
    }
}*/
/* power-button 
.icon-top { 
  color:var(--primary);
  font-size: 24px;
}



/* scrollup */
/* Codes labels 
.LCode, 
.MCode, 
.ACode {
  padding:0.25rem;
  margin:auto;
  border-radius:0.5rem;
}
.LCode {background:var(--primary);color:var(--primary-contrast);}
.MCode {background:var(--danger);color:var(--danger-contrast);}
.ACode {background:var(--success);color:var(--success-contrast);}

*/
:root {
  --family:         Gotham Rounded Book, sans-serif;
  --family-code:    "Courier Prime", monospace;
  --family-small:   Gotham Rounded Book, sans serif;
  --family-head:    Gotham Rounded Bold, sans serif;
  --family-deco:    Slowriver, sans serif;
  --family-deco2:   Woodland, sans serif;
  --family-a1:    Chomsky, sans serif;
  --family-a2:    Trajan, sans serif;
  --family-a3:    Barlow, sans serif;
}