update Gemfile.lock

.gitignore

@@ -1,4 +1,3 @@
 *~
 .jekyll-cache/
 _site/
-Gemfile.lock

.tool-versions

@@ -0,0 +1,2 @@
+ruby 3.2.2
+imagemagick 7.1.1-44

Gemfile

@@ -4,9 +4,12 @@ source "https://rubygems.org"
 
 # gem "rails"
 gem "jekyll"
+gem "sassc", "< 2.2.0"
 
 group :jekyll_plugins do
+  gem "jekyll-sass-converter", "< 3.0.0"
   gem "jekyll-youtube"
+  gem "jekyll-feed"
   gem "mini_magick"
   gem "exifr", :git => "https://codeberg.org/rwv/exifr.git"
   gem "jekyll-exiftag", :git => "https://github.com/jimmyjxiao/jekyll-exiftag.git"

Gemfile.lock

@@ -0,0 +1,164 @@
+GIT
+  remote: https://codeberg.org/rwv/exifr.git
+  revision: 7866ce43760b512d8117531312959914332523fc
+  specs:
+    exifr (1.4.1)
+
+GIT
+  remote: https://github.com/jimmyjxiao/jekyll-exiftag.git
+  revision: 1564390485c05d24a8123c1236def877b51fc694
+  specs:
+    jekyll-exiftag (0.1.0)
+      exifr
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
+    base64 (0.2.0)
+    benchmark (0.4.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.3.5)
+    csv (3.3.2)
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    eventmachine (1.2.7)
+    ffi (1.17.1)
+    ffi (1.17.1-aarch64-linux-gnu)
+    ffi (1.17.1-aarch64-linux-musl)
+    ffi (1.17.1-arm-linux-gnu)
+    ffi (1.17.1-arm-linux-musl)
+    ffi (1.17.1-arm64-darwin)
+    ffi (1.17.1-x86-linux-gnu)
+    ffi (1.17.1-x86-linux-musl)
+    ffi (1.17.1-x86_64-darwin)
+    ffi (1.17.1-x86_64-linux-gnu)
+    ffi (1.17.1-x86_64-linux-musl)
+    forwardable-extended (2.6.0)
+    http_parser.rb (0.8.0)
+    i18n (1.14.7)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.4.1)
+      addressable (~> 2.4)
+      base64 (~> 0.2)
+      colorator (~> 1.0)
+      csv (~> 3.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (>= 2.0, < 4.0)
+      jekyll-watch (~> 2.0)
+      json (~> 2.6)
+      kramdown (~> 2.3, >= 2.3.1)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (~> 0.3, >= 0.3.6)
+      pathutil (~> 0.9)
+      rouge (>= 3.0, < 5.0)
+      safe_yaml (~> 1.0)
+      terminal-table (>= 1.8, < 4.0)
+      webrick (~> 1.7)
+    jekyll-feed (0.17.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-sass-converter (2.2.0)
+      sassc (> 2.0.1, < 3.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    jekyll-youtube (1.0.0)
+      jekyll
+    jquery (0.0.1)
+    json (2.10.1)
+    kramdown (2.5.1)
+      rexml (>= 3.3.9)
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.4)
+    listen (3.9.0)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    logger (1.6.6)
+    mercenary (0.4.0)
+    mini_magick (5.1.2)
+      benchmark
+      logger
+    mini_portile2 (2.8.8)
+    nokogiri (1.18.2)
+      mini_portile2 (~> 2.8.2)
+      racc (~> 1.4)
+    nokogiri (1.18.2-aarch64-linux-gnu)
+      racc (~> 1.4)
+    nokogiri (1.18.2-aarch64-linux-musl)
+      racc (~> 1.4)
+    nokogiri (1.18.2-arm-linux-gnu)
+      racc (~> 1.4)
+    nokogiri (1.18.2-arm-linux-musl)
+      racc (~> 1.4)
+    nokogiri (1.18.2-arm64-darwin)
+      racc (~> 1.4)
+    nokogiri (1.18.2-x86_64-darwin)
+      racc (~> 1.4)
+    nokogiri (1.18.2-x86_64-linux-gnu)
+      racc (~> 1.4)
+    nokogiri (1.18.2-x86_64-linux-musl)
+      racc (~> 1.4)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (6.0.1)
+    racc (1.8.1)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.11.1)
+      ffi (~> 1.0)
+    rexml (3.4.0)
+    rouge (4.5.1)
+    safe_yaml (1.0.5)
+    sassc (2.1.0)
+      ffi (~> 1.9)
+    sassc (2.1.0-x86-linux)
+      ffi (~> 1.9)
+    sassc (2.1.0-x86_64-linux)
+      ffi (~> 1.9)
+    terminal-table (3.0.2)
+      unicode-display_width (>= 1.1.1, < 3)
+    unicode-display_width (2.6.0)
+    webrick (1.9.1)
+
+PLATFORMS
+  aarch64-linux
+  aarch64-linux-android
+  aarch64-linux-gnu
+  aarch64-linux-musl
+  aarch64-mingw-ucrt
+  arm-linux-androideabi
+  arm-linux-gnu
+  arm-linux-gnueabihf
+  arm-linux-musl
+  arm-linux-musleabihf
+  arm64-darwin
+  riscv64-linux-android
+  riscv64-linux-gnu
+  riscv64-linux-musl
+  ruby
+  x86-linux
+  x86-linux-gnu
+  x86-linux-musl
+  x86_64-cygwin
+  x86_64-darwin
+  x86_64-linux-android
+  x86_64-linux-gnu
+  x86_64-linux-musl
+
+DEPENDENCIES
+  exifr!
+  jekyll
+  jekyll-exiftag!
+  jekyll-feed
+  jekyll-sass-converter (< 3.0.0)
+  jekyll-youtube
+  jquery
+  mini_magick
+  nokogiri
+  sassc (< 2.2.0)
+
+BUNDLED WITH
+   2.6.3

_config.yml

@@ -1,9 +1,16 @@
 future: true
-#plugins:
-# - jekyll-youtube
+# "gems" is called "plugins" in jekyll>=3.0
+gems:
+ - jekyll-youtube
+ - jekyll-feed
 exclude:
  - .gitignore
-#safe: false 
+#safe: false
+# needed to make feed link work:
+baseurl: ""
+title: "Scherbengericht jetzt"
+# what do we need this for?
+#url: "https://scherbengericht-jetzt.de"
 mini_magick:
     photoFolders:
         source: assets/img/albums

_data/count1.csv

@@ -1,9 +1,23 @@
 Name,Stimmen
-Bill Gates,11
-Tedros,2
-Merz,4
-Musk,4
-Höcke,2
-Habeck,5
-Baerbock,3
-Franziskus,1
+Annalena Baerbock,6
+Rafał Brzoska,1
+Papst Franziskus,2
+Bill Gates,1
+Robert Habeck,2
+Björn Höcke,6
+Kim Jong-un,1
+Karl Lauterbach,2
+Christian Lindner,1
+Angela Merkel,1
+Friedrich Merz,11
+Elon Musk,7
+Benjamin Netanjahu,1
+Wladimir Selenski,1
+Marie-Agnes Strack-Zimmermann,1
+Peter Thiel,2
+Donald Trump,4
+Boris Pistorius,3
+Wladimir Putin,7
+Alice Weidel,4
+Mark Zuckerberg,1
+

_data/count2.csv

@@ -0,0 +1,9 @@
+Name,Stimmen
+Benjamin Netanjahu,3
+Peter Thiel,2
+Friedrich Merz,9
+Boris Pistorius,1
+Ursula van der Leyen,1
+Elon Musk,1
+Nancy Faeser,1
+Bill Gates,1

_data/navigation.yml

@@ -1,6 +0,0 @@
-- name: Hauptseite
-  link: /
-- name: Über uns
-  link: /about.html
-- name: Meldungen
-  link: /blog.html

_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 -%}

_includes/datatable.html

@@ -36,16 +36,28 @@ function sortTable(n) {
       one from current row and one from the next: */
       x = rows[i].getElementsByTagName("TD")[n];
       y = rows[i + 1].getElementsByTagName("TD")[n];
+      xval = x.innerHTML;
+      yval = y.innerHTML;
+      if (!isNaN(parseInt(xval))) {
+        xval = parseInt(xval);
+      } else {
+        xval = xval.toLowerCase();
+      }
+      if (!isNaN(parseInt(yval))) {
+        yval = parseInt(yval);
+      } else {
+        yval = yval.toLowerCase();
+      }
       /* Check if the two rows should switch place,
       based on the direction, asc or desc: */
       if (dir == "asc") {
-        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
+        if (xval > yval) {
           // If so, mark as a switch and break the loop:
           shouldSwitch = true;
           break;
         }
       } else if (dir == "desc") {
-        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
+        if (xval < yval) {
           // If so, mark as a switch and break the loop:
           shouldSwitch = true;
           break;

_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 reversed %}
+    {% 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>

_layouts/default.html

@@ -2,7 +2,9 @@
 <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="alternate" type="application/atom+xml" href="/feed.xml" title="Feed">
     <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 +17,6 @@
     <script src="{{ '/assets/js/plugins/lg-share.umd.js' | relative_url }}"></script>
   </head>
   <body>
-    {% include navigation.html %}
     {{ content }}
   </body>
 </html>

_posts/2025-02-02-gallery.md

@@ -1,14 +0,0 @@
----
-layout: post
-title: "Eindrücke ..."
----
-So könnte ein Bericht vom Event aussehen:
-
-<h2>Stimmen:</h2>
-{% include datatable.html datafile=site.data.count1 id="count1" %}
-
-<h2>Video:</h2>
-{% youtube "https://www.youtube.com/watch?v=ho8-vK0L1_8" %}
-
-<h2>Fotos:</h2>
-{% include album.html albumname="testgal" %}

_posts/2025-02-22-report.md

@@ -0,0 +1,53 @@
+---
+layout: post
+title: "Ergebnisse und Eindrücke vom 22.2.2025"
+---
+
+Kurz vor den Bundestagswahlen haben wir nun unseren Auftakt
+zum neuzeitlichen _Scherbengericht_ begangen.
+
+Anders als bei ersteren, wo man ja für gewöhnlich das **geringere Übel** wählt,
+konnte man bei letzterem heute das **allergrößte Übel** mitbestimmen.
+
+Dabei war uns das Wetter hold – bei milden 7°C und stetem Sonnenschein
+zog es natürlich reichlich Ausflügler zum historischen Pflaster vor der
+Frauenkirche.
+
+Und es erwies sich dann, daß die **Besucher**, egal ob Dresdner oder Gäste,
+im ganzen erstaunlich **zugewandt** auf unser Angebot reagierten. Daß trotz
+der medialen Dauerbeschallung und Aufmerksamkeitsbuhlerei im Politikbetrieb,
+wie sie sich gerade vor solchen Wahlen heftig auszubreiten pflegen, man doch
+offenbar nicht zu erschöpft ist für politische Betrachtungen
+mit einem anderen Ansatz, mit frischem Wind.
+
+Das Interesse war also recht groß und die Idee wurde vom Publikum gut
+aufgenommen. Einen gewissen Anteil daran mag die von uns gewählte Präsentation
+beigetragen haben (siehe Bilder unten): Wir hatten zur Anregung und als
+Gedächtnisstütze zirka **hundert Photos** bekannter und berüchtigter Politiker
+und Oligarchen zur Schau gestellt – vorrangig aus Deutschland, doch
+selbstverständlich muß in Zeiten der _Globalisierung_ der Blick auf
+mögliche Usurpatoren auch nach außen gehen, wenn deren Einfluß hierzulande
+immer weniger zu leugnen ist.
+
+Über den Tag verteilt hatten wir schätzungsweise 200 Besucher, von denen
+letztlich aber nur 65 eine **gültige Stimme** in der Wahlurne hinterlassen haben.
+Wir konstatieren also (noch) eine gewisse Zurückhaltung in der tätigen Aneignung
+dieser Idee.
+
+Nachfolgend endlich das Ergebnis der **Auszählung**:
+
+{% include datatable.html datafile=site.data.count1 id="count1" %}
+
+Somit gibt es für heute zumindest einen klaren Gewinner!
+
+(Auch mit der Einschränkung, daß von dieser **Stichprobe**
+womöglich noch keine statistisch signifikanten Aussagen hergeleitet
+werden können:
+Wenn ich _Friedrich Merz_ hieße, würde ich mir langsam anfangen Gedanken
+über meine politischen Positionen zu machen.)
+
+_Wiederholung wahrscheinlich! Nachahmung empfohlen!_
+
+{% include album.html albumname="bildstrecke-02-22" %}
+
+(Weitere Bilder und Filme werden folgen…)

_posts/2025-05-26-mahnwache.md

@@ -0,0 +1,12 @@
+---
+layout: post
+title: "Ankündigung: zweiter Termin am 26.5.2025 in Dresden"
+---
+
+Das Scherbengericht besucht heute die Feier zum
+[11. Geburtstag der Friedensmahnwache Dresden](https://t.me/mahnwachedd/3578)
+auf dem [Gomondai-Platz](https://www.openstreetmap.org/node/2411387001)
+
+Abgestimmt werden kann zwischen 15 und 19 Uhr,
+danach werden die Stimmen ausgezählt und
+öffentlich vorgetragen.

_posts/2025-05-27-report.md

@@ -0,0 +1,20 @@
+---
+layout: post
+title: "Ergebnisse vom 26.2.2025"
+---
+
+Es war nur einer von vielen Programmpunkten, und dazu noch ein stiller: So erklärt sich vielleicht, warum die Wahlbeteiligung gestern eher gering ausfiel.
+
+Das **Wahlvolk** bestand hier aus Friedensaktivisten und Laufpublikum, repräsentiert also womöglich nicht ganz den gesellschaftlichen Durchschnitt.
+
+Von 21 abgegebenen Stimmen waren 2 ungültig, die anderen verteilen sich wie folgt:
+
+{% include datatable.html datafile=site.data.count2 id="count2" %}
+
+Wie man sieht, bleibt ein gewisser _Friedrich Merz_ (wer war das gleich noch?) hartnäckig "populär".
+
+Ob das vielleicht etwas mit seiner Politik der **Eskalation** im Kontext des schrecklichen Krieges zu tun hat, der (bislang zumindest!) in der Ukraine geführt wird? Aber zumindest in dieser einen Hinsicht scheint er ja seine Wahlversprechen zu halten...
+
+{% include album.html albumname="bildstrecke-05-26" %}
+
+

_sass/main.scss

@@ -1,10 +1,44 @@
-.current-site {
-    color: green;
-}
 body {
     font-size: 24px;
+    background-color: #afcfff;
+}
+p {
     max-width: 72ch;
 }
+a {
+    color: darkblue;
+}
+nav {
+    //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: white;
+}
+nav ul {
+    list-style-type: disclosure-open;
+}
+.toptitle {
+    background-image: url(/assets/img/ostraka.jpg);
+    background-repeat: no-repeat;
+    height: 200px;
+    color: white;
+    text-shadow: 5px 2px black;
+    @media only screen and (max-width: 767px) {
+        font-size: 10vw;
+    }
+    & {
+        font-size: 2.8em;
+    }
+}
+.gallery {
+    max-width: content;
+}
 .larger {
     font-size: larger;
 }

about.md

@@ -1,7 +1,8 @@
 ---
-title: Über uns
+title: Wer sind wir?
 layout: default
 ---
+
 # Über uns
 
 Wir sind Bürger der Stadt Dresden,
@@ -10,4 +11,17 @@ Vereinen oder Organisationen.
 
 Wir suchen angesichts der gegenwärtigen
 **Krise der Demokratie** (oder des Staates)
-nach Ideen für eine Erneuerung des politischen Systems.
+nach Ideen für die Weiterentwicklung
+des politischen Systems
+in Richtung **Direkte Demokratie**.
+
+Wir glauben, daß nur damit dauerhaft **Frieden**
+in einer Gesellschaft und zwischen Völkern erreicht
+werden kann. _Völker führen keine Kriege,
+Staaten verführen sie dazu!_
+
+Wir streben mit diesem Versuch u.a. an,
+die **Wahrnehmung** solcher Gestaltungs­möglichkeiten
+durch alle Teilhaber zu hinterfragen
+und im öffentlichen Raum den **Diskurs**
+anzufachen.

blog.md

@@ -1,10 +0,0 @@
----
-layout: default
-title: Meldungen
----
-
- {% for post in site.posts %}
- - [**{{ post.title }}**]({{ post.url }})  
-   {{ post.excerpt }}
- {% endfor %}
- 

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 reversed %}
+  {% 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>
-

intro.html

@@ -0,0 +1,78 @@
+---
+title: Worum geht es?
+layout: default
+---
+
+<h1 class="toptitle">&nbsp;Scherbengericht <br/>&nbsp;&nbsp;<i>›jetzt‹</i></h1>
+
+<p>
+  <i>An allem Unfug, der passiert, sind nicht etwa nur die schuld, die ihn tun,<br/>
+    sondern auch jene, die ihn nicht verhindern.</i> (Erich Kästner)
+</p>
+
+<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)
+    <br/>
+    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 ...
+    </p>
+  </div>
+</div>
+