/*******************************************/
/* user.css cassiopeia_marketing_webdesign */
/*******************************************/

/* === LOCAL-FONTS =========================================== */
@font-face {
            font-family: Kaffeesatz-regular;
            font-style: normal;
            font-weight: 400;
            src: url('../fonts/YanoneKaffesatz/YanoneKaffeesatz-Regular.ttf'); }  
@font-face {
            font-family: Lerotica-bold;        
            font-style: normal;
            font-weight: 400;
            src: url('../fonts/lerotica/lerotica-bold-webfont.woff2'); 
            src: url('../fonts/lerotica/lerotica-bold-webfont.woff'); }  
@font-face {
            font-family: Lerotica;        
            font-style: normal;
            font-weight: 400;
            src: url('../fonts/lerotica/lerotica-regular-webfont.woff2'); 
            src: url('../fonts/lerotica/lerotica-regular-webfont.woff'); }  
@font-face {
            font-family: Lerotica-light;        
            font-style: normal;
            font-weight: 400;
            src: url('../fonts/lerotica/lerotica-light-webfont.woff2'); 
            src: url('../fonts/lerotica/lerotica-light-webfont.woff'); }  
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* === COLOR-SCHEMA Dark =============================================================== */
:root, [data-bs-theme="dark"] {
    
    --amber:#9c705e;
    --background-dark:#101313;
    --background-header:#22272a;
    --background-header:linear-gradient(0deg, rgb(0, 0, 0) 0%,
                         rgb(22, 24, 24) 25%, rgb(20, 23, 24) 35%,
                         rgb(0, 0, 0) 97%);
    --background-footer:#22272a;
    --background-footer:linear-gradient(0deg, rgb(0, 0, 0) 0%,
                         rgb(22, 24, 24) 25%, rgb(20, 23, 24) 35%,
                         rgb(0, 0, 0) 97%);
     /* background cssgradient.io */
    --background: linear-gradient(0deg, rgba(15,18,19) 0%,
                       rgb(19, 21, 21) 35%, rgba(34,39,42,1) 45%,
                       rgba(15,18,19) 97%);
    --background:linear-gradient(90deg, rgba(15,18,19,1) 4%, rgb(24, 27, 28) 23%,
    rgb(36, 41, 44) 57%, rgba(15,18,19,1) 97%);
    --card-color:white;

    --cassiopeia-color-primary:var(--background);
    --cassiopeia-color-hover:var(--background);

    --body-font-family: var(--cassiopeia-font-family-body,
    --apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, 
     "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", 
     "Noto Color Emoji");
    --body-font-size: 1rem;
    --body-font-weight: 400;
    --body-line-height: 1.5;
    --body-bg:var(--banner-background-dark);
    
    --link-color: var(--amber);
    --hover-color:aqua;}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* === SIDE-LAYOUT (LEFT + MAIN + SIDE) ================ */
.grid-child {
  width: 100vw;
  margin-left: 0;
  margin-right: 0; }
.blog-item { row-gap: 1em; column-gap: 0;}

@supports (display: grid) {
  .site-grid {
    grid-gap: 0 1em;
    grid-template-columns: [full-start] minmax(0, 1fr)[main-start] repeat(4, minmax(0, 19.875rem))[main-end] minmax(0, 1fr)[full-end];
    grid-template-areas: ". top-a top-a top-a top-a ."
                         ". banner banner banner banner ."
                         ". top-b top-b top-b top-b ."
                         ". comp comp comp comp ."
                         ". side-r side-r side-r side-r ."
                         ". side-l side-l side-l side-l ."
                         ". bot-a bot-a bot-a bot-a ."
                         ". bot-b bot-b bot-b bot-b .";
    display: grid;  }
  .site-grid > [class^="container-"], .site-grid > [class*=" container-"] {
    column-gap: 1em;
    width: 100%;
    max-width: none;}
  .site-grid > .full-width {
    grid-column: full-start / full-end;}
@media (width >= 992px) {
.site-grid {
      grid-template-areas:  ". top-b top-b top-b top-b ."
                           ". banner banner banner banner ."
                           ". top-a top-a top-a top-a ."
                           ". side-l comp comp side-r ."
                           ". bot-a bot-a bot-a bot-a ."
                           ". bot-b bot-b bot-b bot-b .";}} }
.container-banner {  grid-area: banner;}
.container-top-a {  grid-area: top-a;}
.container-top-b {  grid-area: top-b;}
.container-component {  grid-area: comp;}
.container-sidebar-left {  grid-area: side-l;}
.container-sidebar-right {  grid-area: side-r;}
.container-main-top {  grid-area: main-t;}
.container-main-bottom {  grid-area: main-b;}
.container-breadcrumbs {  grid-area: bread;}
.container-bottom-a {  grid-area: bot-a;}
.container-bottom-b {  grid-area: bot-b;}

.mod-finder__search.input-group {  flex-wrap: nowrap;}
.mod-finder__search.input-group .awesomplete input {
  border-top-left-radius: 0;  border-bottom-left-radius: 0;}
.mod-finder__search.input-group button { 
   align-items: center;  display: flex;}
.mod-finder__search.input-group button .icon-search {
  margin-inline-end: .2em;}

.awesomplete > input {  max-width: 200px;}
/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ===  HEADER ================================= */
.header {
    font-family: Lerotica-bold;
    text-align: center;
    background:var(--background-header);
    border-radius: 5px 5px 0 0;
    margin: 0;
    padding: 0;
    position: relative; }
.container-header .container-nav { padding-bottom: 0;}
.container-header nav {margin-top: 0.2;margin-bottom: 0.3; padding: 0;}
@media (width <= 767.98px){ .container-header .container-nav nav {margin-top: 0.2;margin-bottom: 0.3;}}
.container-header .grid-child { padding: 0;justify-content: right !important; }
.container-header .metismenu>li>a:hover:after, .container-header .metismenu>li>button:hover:before, 
.container-header .metismenu>li.active>a:after, .container-header .metismenu>li.active>button:before { background: #1cfbdd;}
.container-header .metismenu>li>a:after, .container-header .metismenu>li>button:before {
    content: "";
    color: #00ffff;
    opacity: 1;} 
.container-banner{margin: 0;}
.metismenu.mod-menu .metismenu-item {
  padding: 0 1em;
  font-size: calc(1.2rem + 0.3vw);
  color:var(--amber);
  text-decoration: none; 
  line-height: 1.3;}
@media (width >= 992px) {
.mod-menu { flex-direction: row; background :var(--background-header);}
.mod-list li a {padding:0.5em } }
.container-header .navbar-toggler {
  color: #fff;
  cursor: pointer;
  border: 1px solid #fff;
  margin: 0 5px 1em 0;}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* === BODY ============================================================================= */
body{
    color:var(--amber);
    font-family: var(--body-font-family);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight); 

    background: var(--background); } 
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.breadcrumb-item.active{ color: #93989e; }

/* === CARDS & LOGIN  ================================================================ */
.card-header{
  display:none;
  background-color: var(--background-dark);
  color:var(--amber);
  border-bottom-color: var(--amber); }
.card{
  background-color: var(--background-dark);
  color: var(--amber);
  border-color:var(--amber);
  border-style:solid;
  border-radius: 8px;
  border-width: 1px;
  box-shadow: 8px 8px 12px rgb(7, 7, 7); }
.login {
  padding: 40px 20px 20px;
  background: linear-gradient(90deg, rgba(15,18,19,1) 4%, rgba(37,41,42,1) 23%,
                                     rgba(34,39,42,1) 57%, rgba(15,18,19,1) 97%); }
/* ------------------------------------------------------------------------------------ */

.list-group-item{ color:#00ffff;}

/* === Footer ================================================================ */
.mod-custom122 {
  background-color: chocolate;
  height: 500px;}
footer {
  background:var(--background-footer);
  display: flex;
  justify-content:space-between;
  padding: 20px;}
footer a:not(.btn){
  color:var(--amber); 
  font-size: 120%;
  text-decoration: none;}
.container-bottom-b .card { border-style:none; }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* === Headlines <hx> =========================================== */
h1, .h1 {
  color:aqua;
  font-size: calc(1.375rem + 1.5vw);
  /*font-family: Lerotica-light;*/       
  text-align: center;
  color:var(--amber);
  padding: 10px; }
@media (width >= 1200px) { h1, .h1 {font-size: 2.5rem;} }
h2, .h2 {
  margin-top: var(--h2-top);
  text-align: center;
  font-size: calc(1.325rem + .9vw);  }
@media (width >= 1200px) { h2, .h2 {margin-top: var(--h2-top);
    text-align: center; font-size: 2rem; } }
h3, .h3 {font-size: calc(1rem + .4vw); }
@media (width >= 1200px) { h3, .h3 { font-size: 1.3rem; } }
h4, .h4 { font-size: calc(1.275rem + .3vw); }
@media (width >= 1200px) { h4, .h4 { font-size: 1.5rem; } }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1rem; }
h1,h2 {
  color:aqua;
  padding-top:2%;
  /*font-family: Lerotica-light;*/  }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* === Animation ============================== */
.animation-welcome {
  text-align: center;
  animation: textwelle 5s;
  font-size: 2em;
  color:aqua;}
  @keyframes textwelle {
      0% { transform: scale(0.1); opacity: 0;}
     70% { transform: scale(1.2);opacity: 1;}
    100% { transform: scale(1); 	opacity: 1;}}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ *

/* === Item ================================== */
.item-content{
  padding:0px 10px 0px 10px;
  margin: 0;
  background-color: var(--background-dark);
  border-color:var(--amber);
  border-style: solid;
  border-radius: 8px;
  border-width: 1px;
  box-shadow: 5px 5px 4px rgb(0,0, 0);}
.item-page{
  padding:0px 10px 0px 10px;
  margin-top: 0px;
  background-color: var(--background-dark);
  border-radius: 18px;}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* === Link ================================== */
a:not([class]){ text-decoration: none;}
a:not([class]):hover{ color: aqua;}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


/* === Collaps-Menue ==========================*/
.metismenu.mod-menu .mm-collapse {
  background-color: rgb(36, 41, 44);
  border-radius: 8px;
  box-shadow: 15px 15px 14px rgb(0,0, 0);
  }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


/* === Images =============================== */
.img-welcome{
  width:100%;
  height: auto;
  box-shadow: 8px 8px 12px rgb(7, 7, 7); }
.img-icon{
  display: block;
  margin-left: auto; 
  margin-right: auto;
  width:50px;
  height: auto;
  border-radius: 50%;}
.img-icon:hover{
  box-shadow: 5px 5px 20px aqua, -5px -5px 20px;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* === Text-Format ========================== */
 .txt-center-large{
        text-align: center;
        font-size: calc(1rem + .5vw);
        text-shadow: 4px 4px 3px black;}
.txt-aqua-center-larger{       
          color:aqua;
          text-align: center;
          text-shadow: 0px 0px 20px rgb(255, 255, 255);
          font-size: calc(1rem + .9vw);} 
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* === Form =============================== */
.text-muted { color: #ffffffbf!important; }
.form-control {
    background: rgb(225, 225, 225);
    color:var(--background-dark);
    max-width: 100%; }
.form-control:focus {
    color: black;
    background-color: white;
    border-color: #8894aa;
    outline: 0;
    box-shadow: 0 0 0 0.25rem #01015640;}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* === Button bnt ========================================================= */
.btn-back{
  font-family: Roboto, sans-serif;
  font-weight: 700;
  color:gray;
  background: linear-gradient(180deg, rgba(84,135,135,1) 0%,
  rgba(36,41,42,1) 39%, rgba(36,41,42,1) 85%, rgba(84,135,135,1) 100%);
  padding: 0px 15px 0px 15px ;
  box-shadow: rgb(0, 0, 0) 4px 1px 12px -1px;
  border-radius:4px;
  transition : 1000ms;
  transform: translateY(0);
  cursor: pointer;}
.btn-back:hover{
  transition : 400ms;
  padding: 2px 15px 2px 35px ;
  transform : translateY(-0px);
  background: linear-gradient(140deg, rgba(84,135,135,1) 0%,
  rgba(36,41,42,1) 39%, rgba(36,41,42,1) 85%, rgba(84,135,135,1) 100%);
  color:aqua;}
.btn-primary{
  color:var(--amber);
  border-color:var(--amber);
  background: var(--background);}
.btn-primary:hover {
    color:aqua;
    background: black;
    border-color: aqua;}
.btn-youtube{
  width: 120px;
  height:60px;
  border-radius: 15%;
  box-shadow: 0px 5px 6px black;
  transition: width 0.3s; }
.btn-youtube:hover{
  width: 135px;
  height:60px;
  border-radius: 15%;
  box-shadow: 0px 2px 14px #00ffff;}
.btn-content{
    font-weight:normal;
    font-size: 1.5em;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    color:whitesmoke;
    border-color: whitesmoke;
    background-color:rgba(24, 24, 24, 0) ;
    width: 100px;
    height:50px;
    border: solid;
    border-radius:2%;
    border-width: thin;
    padding: 10px 5px 5px 10px;}
.btn-content:hover{
    color:aqua;
    border-color: aqua; }
.btn-logout{
  font-weight:normal;
  font-size: 1.5em;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  color:rgb(255, 255, 255);
  border-color: rgb(255, 255, 255);
  background-color:rgb(255, 0, 0) ;
  width: 100px;
  height:50px;
  border: solid;
  border-radius:2%;
  border-width: thin;
  padding: 10px 5px 5px 10px;}
.btn-logout:hover{
  color:rgb(0, 0, 0);
  border-color: rgb(0, 0, 0);
  background-color: rgb(250, 94, 94); }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */