Add visibility hint for conversations

features/conversations/templates/conversations/_visibility.html

+<span class="btn has-state has-square-icon has-hover-title is-unresponsive" data-state="active">
+    <i class="sg sg-xl sg-privacy-private"></i>
+        <span class="btn-htitle" data-position="right"
+            {% if user.gestalt in association.container.get_authors %}
+              title="Du kannst dieses Gespräch sehen, weil Du Dich daran beteiligt hast."
+            {% elif association.entity.is_group %}
+              title="Du kannst dieses Gespräch sehen, weil Du Mitglied der Gruppe „{{ association.entity }}“ bist."
+            {% else %}
+              title="Du kannst dieses Gespräch sehen, weil Du die Empfängerin bist."
+            {% endif %}
+              ></span>
+</span>

features/conversations/templates/conversations/detail.html

@@ -22,11 +22,16 @@
                 </a>
             </div>
         {% endif %}
-
+        
         <header class="conversation-header">
-            <h1 class="content-title">
+            <h1 class="conversation-title">
                 {{ association.container.subject }}
             </h1>
+            <span class="content-type">
+                <i class="sg sg-conversations"></i>
+                <span>Gespräch</span>
+            </span>
+            {% include 'conversations/_visibility.html' %}
         </header>
 
         <div class="conversation-body">

res/css/app.less

@@ -74,3 +74,4 @@
 @import "components/chart";
 @import "components/claim";
 @import "components/keystroke";
+@import "components/conversation";

res/css/components/conversation.less

+.conversation-header {
+    &:extend(.flex-row all);
+    margin-bottom: 1rem;
+}
+
+.conversation-title {
+    color: @color-primary;
+    font-size: 2rem;
+    font-weight: normal;
+    margin: 0;
+    line-height: 1.3;
+    flex: 1;
+}