diff --git a/public/scss/hint.scss b/public/scss/hint.scss
new file mode 100644
index 0000000..470cd17
--- /dev/null
+++ b/public/scss/hint.scss
@@ -0,0 +1,69 @@
+@charset "utf-8";
+@import "util";
+
+$border-size: 2px;
+
+ul.menu.hint {
+  text-align:left;
+//  margin-left: -1 * $border-size;
+  max-width: 23em !important;
+  min-width: 7em;
+
+  > li:first-of-type {
+    border-top: {
+      width: 1px;
+      left-radius: 0;
+      right-radius: 0;
+    }
+  }
+  span.desc {
+    display: block;
+    font-size: 75%;
+  }
+}
+
+#searchMirror {
+  position: absolute;
+  left: 0;
+  top: 0;
+  white-space: pre-wrap;
+  overflow: show;
+  height: 0;
+  > span {
+    display: block;
+    opacity: 0;
+    white-space: pre-wrap;
+    overflow: hidden;
+  }
+  // Todo: Besser nur, wenn im Focus
+  > div {
+    cursor: pointer;
+    transition: left 0.3s ease 0s;
+    position: absolute;
+    top: 0;
+    left: 0;
+    text-align: center;
+    padding: 0;
+    border-top: 5px solid $dark-orange;
+
+    height: 10px;
+    width: 1.2em;
+
+    &:hover {
+/*
+      border: {
+	width: $border-size;
+	style: solid;
+	radius: $standard-border-radius;
+	top: {
+	  left-radius: 0;
+	  right-radius: 0;
+	  width: 0px;
+	}
+      }
+      @include choose-hover;
+*/
+      border-top: 10px solid $dark-orange;
+    }
+  }
+}
\ No newline at end of file
diff --git a/public/scss/kalamar.scss b/public/scss/kalamar.scss
index be2cf6f..1ffb671 100644
--- a/public/scss/kalamar.scss
+++ b/public/scss/kalamar.scss
@@ -8,7 +8,9 @@
 @import "header";     // Top
 @import "searchbar";  // The search bar
 @import "menu";       // Menu list
+@import "hint";       // Hint specific menu list
 @import "pagination"; // Pagination
 @import "resultinfo"; // Information on results
 @import "matchinfo";  // Match table and tree
 @import "kwic";       // Kwic view information
+@import "vc";       // Kwic view information
diff --git a/public/scss/kwic.scss b/public/scss/kwic.scss
index 88a7da3..e768e5a 100644
--- a/public/scss/kwic.scss
+++ b/public/scss/kwic.scss
@@ -40,13 +40,17 @@
 	&:nth-of-type(even) {
           background-color: $kwic-line-even;
 	}
-      }
-      > div {
-	> div.snippet {
+	.matchinfo {
+	  display: none;
+	}
+	> div > div.snippet {
 	  text-overflow: ellipsis;
 	  text-indent: 0;
 	  text-shadow: $light-shadow;
-
+	}
+      }
+      > div {
+	> div.snippet {
           > span,
           > mark {
             white-space: no-wrap !important;
diff --git a/public/scss/searchbar.scss b/public/scss/searchbar.scss
index 5ac8c0c..2b54e01 100644
--- a/public/scss/searchbar.scss
+++ b/public/scss/searchbar.scss
@@ -4,6 +4,9 @@
 $border-size: 2px;
 $right-distance: 30px;
 
+/**
+ * Input field
+ */
 #q-field {
   @include box-sizing-box();
   outline: none;
@@ -12,9 +15,14 @@
   padding: 2px;
   width: 100%;
   margin: 0;
+  margin-bottom: 3px;
   display: block;
 }
 
+header > form {
+  min-height: 2.7em;
+}
+
 #searchbar {
   position: relative;
   @include box-sizing-box();
diff --git a/public/scss/vc.scss b/public/scss/vc.scss
new file mode 100644
index 0000000..4d759ef
--- /dev/null
+++ b/public/scss/vc.scss
@@ -0,0 +1,253 @@
+@charset "utf-8";
+@import "util";
+
+$left-padding: 28pt; // 2.8em;
+$border-size: 4px;
+
+.vc {
+  background-color: $light-green;
+
+  .docGroup {
+    position: relative;
+    display: inline-block;
+    color: $nearly-white;
+
+    margin-left: $left-padding; // 2.8em
+
+    // .6em .5em
+    border-width: 0 $border-size;
+
+    padding: {
+      top: 10pt;
+      bottom: 2pt;
+      left: 0pt;
+      right: 6pt;
+    }
+/*
+
+    background-color: yellow;
+*/
+    border: {
+      radius: $standard-border-radius * 2;
+      style: solid;
+    }
+
+    .docGroup {
+      display: block;
+    }
+
+    > .operators {
+      position: absolute;
+      display: block;
+      top: 10px;
+      vertical-align: middle;
+      left: 3px;
+      border-width: 2px 2px 2px 0;
+      border-top-right-radius: 7px;
+      border-bottom-right-radius: 7px;
+      margin-left: 100%;
+      padding: 0;
+    }
+
+    &:hover {
+      background-color: rgba(255,255,255,.05);
+    }
+
+    &[data-operation=or] {
+      border-color: $dark-orange;
+      > .doc::before,
+      > .docGroup::before {
+	content: "oder";
+      }
+      > .operators {
+	border-color: $dark-orange;
+	background-color: $dark-orange;
+	color: $nearly-white;
+      }
+    }
+
+    &[data-operation=and] {
+      > .doc::before,
+      > .docGroup::before {
+	content: "und";
+      }
+    }
+
+    &[data-operation] {
+      > .doc:first-child::before,
+      > .docGroup:first-child::before {
+	content: '';
+      }
+      > .doc::before,
+      > .docGroup::before {
+	display: inline-block;
+	text-align: right;
+//	width: 2.2em;
+	width: $left-padding;
+	color: $dark-green;
+      }
+      > .doc::before {
+	padding-right: 1.2em;
+	margin-right: .1em;
+      }
+      > .docGroup::before {
+	position: absolute;
+      }
+    }
+  }
+
+  .doc {
+    > span + span {
+      margin-left: 5pt;
+    }
+    > span.key,
+    > span.value {
+      font-weight: bold;
+    }
+    > .operators {
+      display: inline-block;
+      border-color: $dark-orange;
+      border-width: 2px 2px 2px 2px;
+      border-radius: 7px;
+
+      margin-left: 10px;
+      > span {
+	&.and {
+	  border: {
+	    radius: inherit;
+	    top-right-radius: 0;
+	    bottom-right-radius: 0;
+	  }
+	  &.delete {
+	    border: {
+	      top-left-radius: 0;
+	      bottom-left-radius: 0;
+	    }
+	  }
+	}
+      }
+    }
+    > span.key {
+      position: relative;
+      > ul {
+	margin: 0;
+	margin-left: 3.3em;
+      }
+    }
+  }
+
+  .rewritten {
+    .rewrite {
+      margin-left: 4pt;
+      display: inline-block;
+      color: $dark-orange;
+      &::after {
+	font-family: FontAwesome;
+	font-style: normal;
+	font-weight: normal;
+	content: "\f040"; // "\f14b";
+	text-decoration: underline;
+      }
+      span {
+	display: none;
+      }
+    }
+  }
+
+  .operators {
+    opacity: 0;
+    white-space: nowrap;
+    padding: 0;
+    font-size: 0;
+    line-height: 0;
+    color: $light-green;
+    border-color: $nearly-white;
+    text-align: center;
+    font-weight: bold;
+    border-style: solid;
+
+    > span {
+      cursor: pointer;
+      font-size: 9pt;
+      line-height: 1.3em;
+      padding: 0 4px;
+      display: inline-block;
+      &.and {
+	background-color: $nearly-white;
+	color: $light-green;
+      }
+      &.or {
+	background-color: $dark-orange;
+	color: $nearly-white;
+      }
+      &.delete {
+	background-color: red;
+	border-radius: inherit;
+	color: $nearly-white;
+      }
+    }
+  }
+
+  > .docGroup {
+    margin-left: 0;
+  }
+
+
+  .docGroup > .docGroup::before {
+    background-color: red;
+    margin-left: -1 * $left-padding; // -3.4em;
+  }
+
+  .doc, .docGroup {
+    &:hover > .operators {
+      opacity: 1;
+    }
+  }
+
+}
+
+
+/*
+.vc .docGroup[data-operation=and]::before,
+.vc .docGroup[data-operation=and] .operators {
+  background-color: white;
+}
+*/
+
+$dg-index : 30;
+
+.docGroup {
+  > .operators {
+    z-index: $dg-index;
+  }
+  .docGroup {
+    > .operators {
+      z-index: $dg-index + 1;
+    }
+    .docGroup {
+      > .operators {
+	z-index: $dg-index + 2;
+      }
+      .docGroup {
+	> .operators {
+	  z-index: $dg-index + 3;
+	}
+	.docGroup {
+	  > .operators {
+	    z-index: $dg-index + 4;
+	  }
+	  .docGroup {
+	    > .operators {
+	      z-index: $dg-index + 5;
+	    }
+	    .docGroup {
+	      > .operators {
+		z-index: $dg-index + 6;
+	      }
+	    }
+	  }
+	}
+      }
+    }
+  }
+}