diff --git a/_config.yml b/_config.yml
index 5fa68c6..80fdde2 100644
--- a/_config.yml
+++ b/_config.yml
@@ -3,7 +3,7 @@ future: true
 # - jekyll-youtube
 exclude:
  - .gitignore
-#safe: false 
+#safe: false
 mini_magick:
     photoFolders:
         source: assets/img/albums
diff --git a/_data/navigation.yml b/_data/navigation.yml
deleted file mode 100644
index 78d7320..0000000
--- a/_data/navigation.yml
+++ /dev/null
@@ -1,6 +0,0 @@
-- name: Hauptseite
-  link: /
-- name: Über uns
-  link: /about.html
-- name: Meldungen
-  link: /blog.html
diff --git a/_includes/album.html b/_includes/album.html
index 1691ed6..cb0dc62 100644
--- a/_includes/album.html
+++ b/_includes/album.html
@@ -1,4 +1,4 @@
-<div id="{{include.albumname}}">
+<div class="gallery" id="{{include.albumname}}">
 
     {%- for image in site.static_files -%}
         {%- if image.path contains 'img/albums' and image.path contains include.albumname -%}
diff --git a/_includes/navigation.html b/_includes/navigation.html
index 34ae27b..8b911c0 100644
--- a/_includes/navigation.html
+++ b/_includes/navigation.html
@@ -1,15 +1,11 @@
 <nav>
-  <!--
-  <a href="/"
-     {% if page.url == "/" %}style="color: red;"{% endif %}
-     >Hauptseite</a>
-  <a href="/about.html"
-     {% if page.url == "/about.html" %}style="color: red;"{% endif %}
-     >Über uns</a>
-  -->
-  {% for item in site.data.navigation %}
-  <a href="{{ item.link }}"
-     {% if page.url == item.link %}class="current-site"{% endif %}
-     >{{ item.name }}</a>
-  {% endfor %}
+  <!-- Gösta Hellner, Ostraka aus dem Kerameikos, Deutsches Archäologisches Institut Athen, 1963 -->
+  <ul>
+    <li class="p-intro"><a href="#intro">{{intro-page.title}}</a></li>
+    {% for node in site.posts %}
+    {% capture id %}{{ node.id | remove:'/' | downcase }}{% endcapture %}
+    <li class="p-{{id}}"><a href="#{{id}}">{{node.title}}</a></li>
+    {% endfor %}
+    <li class="p-about"><a href="#about">{{about-page.title}}</a></li>
+  </ul>
 </nav>
diff --git a/_layouts/default.html b/_layouts/default.html
index 5e7fef1..6c9a05a 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -2,7 +2,8 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>{{ page.title }} | Scherbengericht</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{{ page.title }}</title>
     <link rel="stylesheet" href="{{ '/assets/css/styles.css' | relative_url }}"/>
     <!-- lightgallery styles -->
     <link rel="stylesheet" href="{{ '/assets/css/lightgallery-bundle.css' | relative_url }}"/>
@@ -15,7 +16,6 @@
     <script src="{{ '/assets/js/plugins/lg-share.umd.js' | relative_url }}"></script>
   </head>
   <body>
-    {% include navigation.html %}
     {{ content }}
   </body>
 </html>
diff --git a/_posts/2025-02-02-gallery.md b/_posts/2025-02-02-gallery.md
index ae409d3..59ebb87 100644
--- a/_posts/2025-02-02-gallery.md
+++ b/_posts/2025-02-02-gallery.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: "Eindrücke ..."
+title: "Ergebnisse und Eindrücke vom 22.2.2025"
 ---
 So könnte ein Bericht vom Event aussehen:
 
diff --git a/_sass/main.scss b/_sass/main.scss
index 0a3d570..22c1e73 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -1,11 +1,36 @@
-.current-site {
-    color: green;
-}
 body {
     font-size: 24px;
-    max-width: 72ch;
     background-color: #afcfff;
 }
+p {
+    max-width: 72ch;
+}
+a {
+    color: darkblue;
+}
+nav {
+    //background-color: #fef67b;
+    //background-color: #f4e3d7;
+    //background-color: bisque;
+    //background-color: aliceblue;
+    background-color: #afcfff;
+    background-image: url("/assets/img/ostraka.jpg");
+    background-repeat: no-repeat;
+    // only b/w for legibility:
+    background-blend-mode: luminosity;
+    background-size: cover;
+    opacity: 0.6;
+}
+nav a, nav ul {
+    color: black;
+    opacity: 1.0;
+}
+nav ul {
+    list-style-type: disclosure-open;
+}
+.gallery {
+    max-width: content;
+}
 .larger {
     font-size: larger;
 }
diff --git a/about.md b/about.md
index 0dc095f..566462f 100644
--- a/about.md
+++ b/about.md
@@ -1,7 +1,8 @@
 ---
-title: Über uns
+title: Wer sind wir?
 layout: default
 ---
+
 # Über uns
 
 Wir sind Bürger der Stadt Dresden,
diff --git a/blog.md b/blog.md
deleted file mode 100644
index f93f2ee..0000000
--- a/blog.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: default
-title: Meldungen
----
-
- {% for post in site.posts %}
- - [**{{ post.title }}**]({{ post.url }})  
-   {{ post.excerpt }}
- {% endfor %}
- 
\ No newline at end of file
diff --git a/index.html b/index.html
index 7cccd1c..cc2ce72 100644
--- a/index.html
+++ b/index.html
@@ -1,68 +1,50 @@
 ---
-title: Worum geht es?
+title: Scherbengericht jetzt
 layout: default
 ---
-<h1>Scherbengericht <i>jetzt</i></h1>
+{% assign intro-page = site.pages | where: "name", "intro.html" | first %}
+{% assign about-page = site.pages | where: "name", "about.md" | first %}
+{% include navigation.html %}
 
-<p class="larger">
-  Braucht die real existierende <b>Demokratie</b> eine <b>Machtbegrenzung</b>?
-</p>
+<div id="main">
 
-<div class="wrap">
-  <div class="wrap1">
-    <img src="assets/img/scherbe_perikles.svg" style="width: 200px;"/>
+  <div id="intro" class="section p-intro">
+    {{ intro-page.content }}
   </div>
-  <div class="wrap2">
-    <p>
-      Im antiken griechischen Vorbild – der Demokratie von <b>Athen</b>
-      in der Zeit des <b>Perikles</b> – gab es dafür u.a. die Institution des
-      <b>Scherbengerichts</b> (οστρακισμος), bei der die Bürger jährlich
-      einen Politiker, wenn er der Errichtung der <b>Tyrannei</b> verdächtig
-      war, in die <b>Verbannung</b> wählen konnten. Verbannten wurde für
-      <b>10 Jahre</b> das Eigentum konfisziert, jegliche geschäftliche oder
-      politische Betätigung verboten und unter Androhung von Strafe
-      der Aufenthalt im Land untersagt. Zur Stimmabgabe nutzte man
-      die <b>Scherben</b> zerbrochener Tongefäße.
-    </p>
+  <hr/>
+
+  {% for post in site.posts %}
+  {% capture id %}{{ post.id | remove:'/' | downcase }}{% endcapture %}
+  <div id="{{id}}" class="section p-{{id}}">
+    {% if post.icon %}
+    <div class="subtlecircle sectiondivider imaged">
+      <img src="{{post.icon}}" alt="section icon" />
+      <h5 class="icon-title">{{ post.title }}</h5>
+    </div>
+    {% elsif post.fa-icon %}
+    <div class="subtlecircle sectiondivider faicon">
+      <span class="fa-stack">
+        <i class="fa fa-circle fa-stack-2x"></i>
+        <i class="fa fa-{{ post.fa-icon }} fa-stack-1x"></i>
+      </span>
+      <h5 class="icon-title">{{ post.title }}</h5>
+    </div>
+    {% else %}
+    <div class="subtlecircle sectiondivider">
+      <h1 class="icon-title">{{ post.title }}</h1>
+    </div>
+    {% endif %}
+    <div class="container {{ post.style }}">
+      {{ post.content }}
+    </div>
+    <!-- ⁂ -->
+    <div style="text-align: center;">⸪</div>
+    <hr/>
   </div>
+  {% endfor %}
+
+  <div id="about" class="section p-about">
+  {{ about-page.content }}
+  </div>
+  
 </div>
-
-
-<p class="larger">
-  Lassen Sie es uns <b>wiederbeleben</b>, machen Sie mit!
-</p>
-
-<div class="wrap">
-  <div class="wrap1">
-    <img src="assets/img/scales-of-justice.jpg" style="width: 200px;"/>
-  </div>
-  <div class="wrap2">
-    Von welchem <b>Politiker</b> oder <b>Oligarchen</b>
-    geht derzeit die größte <b>Gefahr</b> für unser Land aus?
-    (etwa durch anhaltenden Machtmißbrauch
-    oder zu erwartende Machtergreifung –
-    oder wegen Kriegstreiberei)
-    Wen würden Sie deshalb (geheim)
-    in die <b>Verbannung</b> wählen?
-  </div>
-</div>
-
-<p class="larger">
-  <b>Schreiben</b> Sie den <b>Namen</b> ihrer Wahl
-  auf einen <b>Stimmzettel</b> (als moderne Scherbe)
-  und werfen ihn in die Urne!
-</p>
-
-<div class="wrap">
-  <div class="wrap1">
-    <img src="assets/img/wahlurne.jpg" style="width: 200px;"/>
-  </div>
-  <div class="wrap2">
-    Jeder Bürger hat nur <b>eine Stimme</b>!
-    Die Auszählung erfolgt abends vor Ort öffentlich.
-    
-    Die Ergebnisse werden dann <b><a href="/vote.html">hier</a></b>
-    bekanntgegeben.
-  </div>
-</div>
-
diff --git a/intro.html b/intro.html
new file mode 100644
index 0000000..b432247
--- /dev/null
+++ b/intro.html
@@ -0,0 +1,72 @@
+---
+title: Worum geht es?
+layout: default
+---
+
+<h1>Scherbengericht <i>jetzt</i></h1>
+
+<p class="larger">
+  Braucht die <i>real existierende</i> <b>Demokratie</b> ein Mittel zur <b>Machtbegrenzung</b>?
+</p>
+
+<div class="wrap">
+  <div class="wrap1">
+    <img src="assets/img/scherbe_perikles_trans.svg" style="width: 200px;"/>
+  </div>
+  <div class="wrap2">
+    <p>
+      Im antiken griechischen Vorbild – der Demokratie von <b>Athen</b>
+      in der Zeit des <b>Perikles</b> – gab es dafür u.a. die Institution des
+      <b>Scherbengerichts</b> (οστρακισμος), bei der die Bürger jährlich
+      einen Politiker, wenn er der Errichtung der <b>Tyrannei</b> verdächtig
+      war, in die <b>Verbannung</b> wählen konnten. Verbannten wurde für
+      <b>10 Jahre</b> das Eigentum konfisziert, jegliche geschäftliche oder
+      politische Betätigung verboten und unter Androhung von Strafe
+      der Aufenthalt im Land untersagt. Zur Stimmabgabe nutzte man
+      die <b>Scherben</b> zerbrochener Tongefäße.
+    </p>
+  </div>
+</div>
+
+
+<p class="larger">
+  Lassen Sie es uns <b>wiederbeleben</b>, machen Sie mit!
+</p>
+
+<div class="wrap">
+  <div class="wrap1">
+    <img src="assets/img/scales-of-justice_trans.png" style="width: 200px;"/>
+  </div>
+  <div class="wrap2">
+    <p>
+    Von welchem <b>Politiker</b> oder <b>Oligarchen</b>
+    geht derzeit die größte <b>Gefahr</b> für unser Land aus?
+    (etwa durch anhaltenden Machtmißbrauch
+    oder zu erwartende Machtergreifung –
+    oder wegen Kriegstreiberei)
+    Wen würden Sie deshalb (geheim)
+    in die <b>Verbannung</b> wählen?
+    </p>
+  </div>
+</div>
+
+<p class="larger">
+  <b>Schreiben</b> Sie den <b>Namen</b> ihrer Wahl
+  auf einen <b>Stimmzettel</b> (als moderne Scherbe)
+  und werfen ihn in die Urne!
+</p>
+
+<div class="wrap">
+  <div class="wrap1">
+    <img src="assets/img/wahlurne_trans.png" style="width: 200px;"/>
+  </div>
+  <div class="wrap2">
+    <p>
+    Jeder Bürger hat nur <b>eine Stimme</b>!
+    Die Auszählung erfolgt abends vor Ort öffentlich.
+    
+    Die Ergebnisse werden dann hier bekanntgegeben (s.u.)...
+    </p>
+  </div>
+</div>
+
