html {
  --bgpattern1: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAAXNSR0IArs4c6QAAACRJREFUGFdjDA0NNV69evVZBiTACGKjS4AF0SXggsgSKIIwCQDoIRE4lu9TMgAAAABJRU5ErkJggg==");
  --bgpattern2: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAAXNSR0IArs4c6QAAAChJREFUGFdjZEADoaGhxozIYiCB1atXn4ULwgRAisCCyAJgQXQBkCAA/HoROHME7qAAAAAASUVORK5CYII=");
}
html[data-stylemode="dark"] {
  --color1:  #202020;
  --color1B: #151515;
  --color1C: #050505;
  --color2:  #D0D0D0;

}
html[data-stylemode="light"] {
  --color1:  #D0D0D0;
  --color1B: #E5E5E5;
  --color1C: #F5F5F5;
  --color2:  #202020;
}

body {
  background-color: var(--color1);
  background-image: var(--bgpattern1);
             color: var(--color2);
}

a {
  color: var(--color2);
}
.main-aside,
nav, .tabmenu div, #main-header .actions > * {
  background-color: var(--color1C);
  background-image: var(--bgpattern2);
}

.overview > div {
  background-color: var(--color1B);
  background-image: var(--bgpattern2);
}

/* FONT & TEXT */

body           { font-size:  12px; font-family: "Open Sans"; }
.design        { font-size: 0.8rem; }
nav            { font-size: 0.8rem; }
nav a i        { font-size: 1.2rem; }
nav a span     { font-size: 0.5rem; font-weight: bold; text-transform: uppercase; }
.filter button { font-size: 2.0rem; }
.filter label  { font-size: 0.6rem; text-transform: uppercase; }
.design .id    { font-size: 12px; text-transform: uppercase; }
#main-header .actions { font-size: 1rem; @media(width > 720px){ font-size: 1.5rem; } }

/* LAYOUT */

main {
  flex-direction: column;
  flex-grow: 1;
}

nav {
  container-name: Navigation;
  container-type: inline-size;
  flex-basis: 50px; flex-grow: 0; flex-shrink: 0;
  justify-content: space-between; text-align: center;
  position: sticky; top: 0;
}
nav > a                  { border-left: 1px solid #FFF1; }
nav > a:first-child      { border-left: none; }
nav > a                  { display: flex; flex-direction: column; flex-grow: 1; align-items: center; justify-content: center; }
nav a       > *          { opacity: 0.3; }
nav a:hover > *          { opacity: 1; }
nav a.current-parent > * { opacity: 1; color: #D3AF37; }
nav a span { margin-top: 5px; }

.overview {
  display: grid;
  grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );

  @media(min-width:   0px){ gap: 10px; }
  @media(min-width: 840px){ gap: 20px; }
}

.overview > div          { padding: 10px; }
.overview > div:hover    { outline: 2px solid var(--color2); }
.overview > div .preview { aspect-ratio: 1; }

.overview .design     { display: flex; flex-wrap: wrap; gap: 10px; }
.overview .design .id { flex-basis: 25%; flex-grow: 0; opacity: 0.50; }
.overview .design .actions {
    flex-basis: 65%;
    flex-grow: 1;

    font-size: 12px;

    display: flex;
    gap: 5px;
    justify-content: flex-end;
}
.overview .design .title { flex-basis: 100%; flex-grow: 1; }

.infobox {
  background: #D3AF37; color: #111; padding: 0.5rem;
  &.error   { background: #FF0000; }
  &.success { background: #008800; }
}

#positionierung     { display: grid; grid-template-columns: repeat( auto-fill, minmax( 250px, 1fr ) ); gap: 20px; }
#positionierung > * { aspect-ratio: 1; background: #0005; }

body.contentcentered { display: flex; align-items: center; justify-content: center; }

/*///////// PAGES /////////*/

#main-header                          { display: flex; align-items: center; justify-content: space-between; }
#main-header .filter                  { flex-grow: 1; }
#main-header .actions                 { display: flex; gap: 1px; }
#main-header .actions > *             { flex-basis: 1px; flex-grow: 1; padding: var(--gap-tiny); text-align: center; }
#main-header .actions > *             { --tabmenu-radius: 0.5rem; }
#main-header .actions > *:first-child { border-top-left-radius:  var(--tabmenu-radius); border-bottom-left-radius:  var(--tabmenu-radius); }
#main-header .actions > *:last-child  { border-top-right-radius: var(--tabmenu-radius); border-bottom-right-radius: var(--tabmenu-radius); }

.tabmenu                 { display: flex; gap: 1px; }
.tabmenu div             { flex-basis: 1px; flex-grow: 1; padding: var(--gap-small); text-align: center; }
.tabmenu div             { --tabmenu-radius: 0.5rem; }
.tabmenu div:first-child { border-radius: var(--tabmenu-radius) 0 0 var(--tabmenu-radius); }
.tabmenu div:last-child  { border-radius: 0 var(--tabmenu-radius) var(--tabmenu-radius) 0; }
.tabmenu div.active      { background-color: #D3AF37; color: #000; }
.tabmenu div        span { opacity: 0.5; }
.tabmenu div.active span { opacity: 1; font-weight: bold; }

.tab        { display:  none; }
.tab.active { display: block; }

.main-aside {}

#uploader form { display: flex; flex-direction: column; gap: 10px; }

.filter        { display: flex; gap: 10px; align-items: flex-end; justify-content: flex-end; }
.filter button { background: none; color: var(--color2); }

/* Page: Designs */

/* Page: Products */

/* Page: SignIn */
#signin      { text-align: center; }
#signin form { display: flex; flex-direction: column; gap: 10px; }

/* Page: Shops */

/* Page: Statistics */

/* Page: Profile */

.miniform > div { display: flex; flex-direction: column; gap: 5px; }
.miniform .progress     { background-color: var(--color1C); background-image: var(--bgpattern1); }
.miniform .progress div { background-color: #D3AF37; background-image: var(--bgpattern1); }
.miniform .progress div { display: inline-block; padding: 5px; }

/*///////// FORMS /////////*/

label { display: block; }
input[type="email"],
input[type="password"],
input[type="text"] {
  background: var(--color1B);
  border: 1px solid var(--color1C);
  color: var(--color2);
  padding: 5px;
}
select {
  background: none;
  border: 1px solid var(--color2);
  color: var(--color2);
  padding: 5px;
}
button { border-radius: 5px; padding: 5px; }

/* Mini Form */

/* Big Form */

/*///////// RESPONSIVE /////////*/

body { display: flex; }
nav  { display: flex; }
main { display: flex; }

@media only screen and (min-width: 0px) {
  body     { flex-direction: column; min-height: 100%; }
  nav      { order: 2; flex-direction: row; position: sticky; bottom: 0; z-index: 101; }
  main     { order: 1; flex-grow: 1; gap: 10px; }
  main > * { padding: 10px; }
}

@media only screen and (min-width: 840px) {
  body     { flex-direction: row; flex-wrap: wrap; }
  nav      { order: 1; flex-basis: 50px; flex-grow: 0; flex-shrink: 0; flex-direction: column; }
  main     { order: 2; flex-basis:  50%; flex-grow: 1; flex-shrink: 0; padding: 10px; gap: 10px; }
  main > * { padding: 10px; }

  /* #MainArea, #Sidebar {
    height: calc( 100vh - 40px );
  } */
}

/* ANIMATION */

.animated-box {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 50vw;
  background-image: url("https://studio.teeluxe.ws/lib/bg_transition2.png");
  background-repeat: repeat;
}

#box-left  { background-position: right; border-right: 10px solid #0002; background-color: #3498db; }
#box-right { background-position:  left; border-left:  10px solid #0002; background-color: #e74c3c; }

.boxLeftPos1  {  left: -50vw; }
.boxRightPos1 { right: -50vw; }
.boxLeftPos2  {  left: 0; }
.boxRightPos2 { right: 0; }

.from-left  { animation: slideInLeft    0.1s ease-out forwards; }
.from-right { animation: slideInRight   0.1s ease-out forwards; }
.to-bottom  { animation: slideOutBottom 0.5s ease-out forwards; }
.to-left    { animation: slideOutLeft   0.2s ease-out forwards; }
.to-right   { animation: slideOutRight  0.2s ease-out forwards; }

@keyframes slideInLeft    { to {  left:     0; } }
@keyframes slideInRight   { to { right:     0; } }
@keyframes slideOutLeft   { to {  left: -50vw; } }
@keyframes slideOutRight  { to { right: -50vw; } }
@keyframes slideOutBottom { to {   top: 100vh; } }

/* .animated-box:before {
  animation: mist 8s infinite linear;
  background: var(--bg1);
  background-color: var(--color2)!important;
  background-repeat: round;
  content: "";
  position: absolute; top: 0; left: 0;
  height: 100%; width: 100%;
  z-index: -1;
}
@keyframes mist {
      0% { background-position: 0 0; }
    100% { background-position: -100% 0; }
}*/