Add client descriptions

www/clients.php

@@ -113,7 +113,7 @@ if ($path == '') {
   <main>
     <section>
       <h3>Mandanten</h3>
-      <p style="text-align: center;"><a href="/">Startseite</a></p>
+      <p class="center"><a href="/">Startseite</a></p>
       <table>
         <thead><tr><th>Name</th></tr></thead>
         <tbody>
@@ -122,7 +122,7 @@ if ($path == '') {
 } ?>
         </tbody>
       </table>
-      <p style="text-align: center;"><a href="?format=json">JSON-Format</a></p>
+      <p class="center"><a href="?format=json">JSON-Format</a></p>
     </section>
   </main>
 </body>

www/files/index.php

@@ -129,16 +129,16 @@ if ($format === 'json') {
   <main>
     <section>
       <h3>Downloads</h3>
-      <p style="text-align: center;"><a href="/">Startseite</a></p>
+      <p class="center"><a href="/">Startseite</a></p>
       <table>
         <thead><tr><th>Name</th><th>Größe</th><th>Änderungsdatum</th></tr></thead>
         <tbody>
 <?php foreach (array_reverse($entities) as $name => [$prod, $vers, $url, $size, $mtime, $ctime, $mod, $cre]) {
-    echo "          <tr><td><a href='/files/$name'>$name</a></td><td>" . number_format($size / 1024 / 1024, 1) . " MB</td><td>" . date('d.m.Y, H:i', $mtime) . "</td></tr>\n";
+    echo "          <tr><td><a href=\"/files/$name\">$name</a></td><td>" . number_format($size / 1024 / 1024, 1) . " MB</td><td>" . date('d.m.Y, H:i', $mtime) . "</td></tr>\n";
 } ?>
         </tbody>
       </table>
-      <p style="text-align: center;"><a href="?format=json">JSON-Format</a></p>
+      <p class="center"><a href="?format=json">JSON-Format</a></p>
     </section>
   </main>
 </body>

www/index.xhtml

@@ -59,9 +59,41 @@
     <section class="clients">
       <span id="genossenschaften"/>
       <h3>Die Genossenschaften</h3>
-      <p>
+      <div class="container">
-        <a href="/clients">Mandanten</a>
+        <div>
-      </p>
+          <h4>WG Matzen</h4>
+          <h5><span>Winzergenossenschaft</span> <span>für Matzen und Umgebung</span><br/><span>reg. Gen.m.b.H.</span></h5>
+          <h6>Zweigstellen:</h6>
+          <div class="branches">Matzen</div>
+          <p class="link">
+            <a href="https://winzermatzen.at/">winzermatzen.at</a>
+          </p>
+        </div>
+        <div>
+          <h4>Winzerkeller im Weinviertel</h4>
+          <h5><span>Winzerkeller im Weinviertel</span><br/><span>reg. Gen.m.b.H.</span></h5>
+          <h6>Zweigstellen:</h6>
+          <div class="branches">Wolkersdorf, Haugsdorf, Sitzendorf</div>
+          <p class="link">
+            <a href="http://www.winzerkeller.eu/">winzerkeller.eu</a>
+          </p>
+        </div>
+        <div>
+          <h4>WG Weinland</h4>
+          <h5><span>Winzergenossenschaft Weinland,</span> <span>mit dem Sitz in Großinzersdorf</span><br/><span>reg. Gen.m.b.H.</span></h5>
+          <h6>Zweigstellen:</h6>
+          <div class="branches">Großinzersdorf</div>
+        </div>
+        <div>
+          <h4>WG Baden</h4>
+          <h5><span>Winzergenossenschaft</span> <span>Baden - Bad Vöslau</span><br/><span>reg. Gen.m.b.H.</span></h5>
+          <h6>Zweigstellen:</h6>
+          <div class="branches">Baden</div>
+          <p class="link">
+            <a href="http://www.wg-baden.at/">wg-baden.at</a>
+          </p>
+        </div>
+      </div>
     </section>
 
     <section class="picture-2 background"/>

www/res/style.css

@@ -7,6 +7,7 @@
     font-family: 'Arial', sans-serif;
     scroll-behavior: smooth;
     --main-color: #A040C0;
+    --light-color: #C0F080;
 }
 
 body {
@@ -161,19 +162,81 @@ main section p {
     text-align: justify;
 }
 
+.center {
+    text-align: center;
+}
+
 main section h3 {
     text-align: center;
     font-size: 2em;
 }
 
 main .about {
-    border-top: 1em solid #C0F080;
+    border-top: 1em solid var(--light-color);
-    border-bottom: 1em solid #C0F080;
+    border-bottom: 1em solid var(--light-color);
 }
 
 main .clients {
-    border-top: 1em solid #C0F080;
+    border-top: 1em solid var(--light-color);
-    border-bottom: 1em solid #C0F080;
+    border-bottom: 1em solid var(--light-color);
+}
+
+main .clients .container {
+    display: flex;
+    max-width: 1200px;
+    margin: auto;
+    gap: 1em;
+    justify-content: center;
+    padding: 0 1em;
+}
+
+main .clients .container > * {
+    flex: 100px 1 1;
+    border-radius: 1em;
+    padding: 1.5em 1em;
+    background-color: var(--light-color);
+}
+
+@media screen and (max-width: 1000px) {
+    main .clients .container {
+        flex-direction: column;
+    }
+}
+
+main .clients .container h4,
+main .clients .container h5,
+main .clients .container h6 {
+    margin: 0;
+    text-align: center;
+}
+
+main .clients .container h4 {
+
+}
+
+main .clients .container h5 {
+    line-height: 1em;
+    font-weight: normal;
+}
+
+main .clients .container h5 span {
+    white-space: pre;
+}
+
+main .clients .container h6 {
+    font-size: 0.875em;
+    margin-top: 0.5em;
+}
+
+main .clients .container .branches {
+    font-size: 0.875em;
+    text-align: center;
+    display: block;
+}
+
+main .clients .link {
+    text-align: center;
+    margin-bottom: 0;
 }
 
 table td {