.Content { background-color: var(--color-content-bg); display: flex; flex-direction: row; flex-wrap: nowrap; }
.Inhalt { flex: 80%; order: 2; min-height: 500px; margin: 1px; padding: 4px 1%; background-color: var(--bg-inhalt);  }
.Suche { padding: 0; border: 0; background-color: var(--color-suche-bg); color: var(--color-suche); }
.SucheDesktop { display: block;}
.SucheMobile { display: none;}

.Navi { flex: 20%; order: 1; padding: 4px; margin: 1px; border: 0; background-color: var(--navi-bg); }
.Navi ul { flex-direction: column; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.Navi li { margin: 1px; padding: 0; font-size: var(--size-p); width: 100%;  }
.Navi .Mobile { display: none; }
.Navi a { display: block; padding: 0.4em; text-decoration: none; font-weight: bold; text-align: center; border: 1px solid var(--navi-a-border); color: var(--navi-a); background-color: var(--navi-a-bg); }
.Navi li[aria-current] a { background-color: var(--navi-a-current-bg); color: var(--navi-a-current); border: 1px solid var(--navi-a-current-border); }
.Navi a:focus, .Navi a:hover, .Navi li[aria-current] a:focus, .Navi li[aria-current] a:hover { color: var(--navi-a-focus); background-color: var(--navi-a-focus-bg); border: 1px solid var(--navi-a-focus-border); }
.Navi .submenu { visibility: hidden; height: 0; z-index: 1000; }
.Navi .submenu li { display: block; }
.Navi li:hover .submenu, .Navi li:active .submenu, .Navi li:focus .submenu, .Navi li:focus-within .submenu { visibility: visible; height: auto; }
.Navi p a { padding: 0; text-decoration: none; font-weight: normal; text-align: center; border: 0; box-shadow: 0; color: #000000; background-color: red; }

@media(max-width: 850px){

.SucheDesktop { display: none;}
.SucheMobile { display: block;}

.Navi div { display: none; }
.Navi div:target { display: block; }
.Navi ul { flex-direction: row; }
.Navi .Mobile { display: block; }

.Content { display: block; }
}