header, main {
    background:#fff;
    margin: 0 auto;
    padding: 0 var(--padding);
    border:0;
    max-width:calc(var(--grid-width) - 2*var(--padding));
}

#site-title{
    font-family: Template;
    display:flex;
    flex-flow:row wrap;
    justify-content: space-between;
      align-items: center;
      width: 100%;
      position: relative;
}

#deutsch, #francais
{
    display:flex;
    flex-flow:row wrap;
    margin-top:20px;
}

#deutsch img, #francais img
{
    max-height:80px;
}

#francais
{
    justify-content: flex-end;
}

.logo
{
    font-size:72pt;
    letter-spacing: -7pt;
    line-height: 1;
}

.name
{
    display:block;
    text-transform: uppercase;
    font-size:10pt;
    text-align:left;
    max-width:120px;
    line-height:1.1;
    margin-left:10pt;
    margin-top:12pt;
}

#kugel {
  display:none;
  width: 120px;
  height: 70px;
  margin: 20px 0;
  border-left:2px solid black;
  border-right:2px solid black;
  background:
    radial-gradient(circle at center, var(--primary) 0%, var(--primary) 30%, transparent 31%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 160px 160px, 100% 100%;
}

nav{
    background:transparent;
    padding:0 ;
    margin:0 auto;
    border-top:2px solid black;
    border-bottom:2px solid black;
    z-index: 3;
}

nav > ul > li a {
    padding: calc((var(--nav-height) - 38px)/2) 15px;
}

nav > ul:first-of-type > li:first-of-type > a {
  background-image: url("/images/menu_dark.png");
}

nav #workspace > li > a {
  background-image: url("/images/login_dark.png");
}

nav #workspace > li#logged_in a{
  background-image: url("/images/tools_dark.png");
}

nav > ul > li:first-of-type a {
  color:var(--primary);
}

nav > ul > ul li a {
    min-width:100px;
}

@media (min-width:768px){
   
    #kugel {
        display:block;
    }
    
    #deutsch, #francais {
        flex-basis:40%;
    }
    
}