Neuigkeiten: News-Pinnwand auf der Startseite

Sektion 'Neues aus dem Laden' nach dem Hero. Die Beitraege schreibt Opa Martin
im WEBklar-Kundenportal (Funktion News); news.js von project.webklar.com zeigt
sie als Korkwand. Ohne Beitraege bleibt der statische Leerzustand stehen.
Menuepunkt 'Neuigkeiten' (am Handy ausgeblendet, 4 Punkte passen),
Datenschutz Abschnitt 4c, Stand 30.09.2026.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

assets/site.css

@@ -230,6 +230,8 @@ a:hover{color:var(--sky-600)}
   .hdr__brand{font-size:0; gap:0; min-width:44px; justify-content:center}
   .hdr__brand img{width:32px; height:32px}
   .nav{flex-wrap:nowrap; gap:0}
+  /* Die Kopfzeile traegt am Handy vier Punkte; "Neuigkeiten" steht dort direkt unter dem Hero */
+  .nav a.nav__news{display:none}
   .nav a{
     position:relative; min-height:44px; padding:6px clamp(5px,2.2vw,10px);
     font-size:clamp(13px,3.8vw,15px); white-space:nowrap; border-radius:var(--radius-s);
@@ -776,3 +778,39 @@ a:hover{color:var(--sky-600)}
 @media (max-width:639.98px){
   .ftr__col a, .ftr__col span{min-height:44px; padding-block:2px}
 }
+
+/* ============================================================ NEUIGKEITEN (News-Pinnwand)
+   Die Zettel rendert news.js (WEBklar-Portal, Funktion "News") in Kork mit Holzrahmen #A8733F,
+   Schriften der Seite ueber die --wkn-Variablen. .news-board ist nur der statische Leerzustand im
+   selben Look; news.js ersetzt ihn, sobald ein Beitrag haengt. */
+.news-lead{max-width:52ch; margin:calc(var(--space-2) * -1) 0 var(--space-6) 58px; color:var(--ink-500)}
+.news-pinnwand{
+  --wkn-font-display:'Fredoka', 'Trebuchet MS', sans-serif;
+  --wkn-font-body:'Nunito', 'Segoe UI', sans-serif;
+}
+.news-board{
+  position:relative; border-radius:var(--radius-xl); border:12px solid #A8733F;
+  padding:var(--space-12) var(--space-6); display:grid; place-items:center;
+  background-color:#C08A52;
+  background-image:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .16 0 0 0 0 .06 0 0 0 -2.4 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"),
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .8 0 0 0 0 .58 0 0 0 2.6 -1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
+  box-shadow:inset 0 6px 14px rgba(60,32,10,.35), var(--shadow-band);
+}
+.news-empty{
+  position:relative; max-width:34ch; text-align:center; background:#fff; border-radius:8px;
+  padding:var(--space-8) var(--space-6) var(--space-6); transform:rotate(-1.5deg);
+  box-shadow:0 10px 22px rgba(35,52,74,.18);
+}
+.news-empty::before{
+  content:""; position:absolute; top:-12px; left:50%; width:84px; height:24px;
+  transform:translateX(-50%) rotate(3deg); background:rgba(255,255,255,.7);
+  box-shadow:0 1px 2px rgba(35,52,74,.12);
+}
+.news-empty__pin svg{width:34px; height:34px; color:var(--sun-700)}
+.news-empty h3{font:var(--t-h2); color:var(--ink-700); margin:var(--space-2) 0}
+.news-empty p{color:var(--ink-500); margin:0}
+@media (max-width:700px){
+  .news-lead{margin-left:0}
+  .news-board{border-width:8px; padding:var(--space-10) var(--space-4); border-radius:var(--radius-l)}
+}

datenschutz.html

@@ -24,6 +24,7 @@
     </a>
     <nav class="nav" aria-label="Hauptnavigation">
       <a href="index.html">Start</a>
+      <a class="nav__news" href="index.html#neuigkeiten">Neuigkeiten</a>
       <a href="shop.html">Shop</a>
       <a href="hilfe-verein.html">Hilfe Verein</a>
       <a href="hilfe-verein.html#kontakt">Kontakt</a>
@@ -41,6 +42,8 @@
         Es gibt kein Kontaktformular. Schriften werden vom eigenen Server geladen, nicht von
         Google. Auf der Startseite ist eine Karte von Google Maps eingebunden. Beim Aufruf
         der Startseite wird dafür eine Verbindung zu Google hergestellt (siehe Abschnitt 4a).
+        Die Neuigkeiten auf der Startseite lädt Ihr Browser vom Server meines Webdienstleisters
+        WEBklar (siehe Abschnitt 4c).
       </div>
 
       <div class="prose__warn">
@@ -111,6 +114,19 @@
       die Datenschutzbestimmungen des jeweiligen Anbieters, auf dessen Verarbeitung wir
       keinen Einfluss haben.</p>
 
+      <h2 id="neuigkeiten">4c. Neuigkeiten auf dieser Website</h2>
+      <p>Auf der Startseite zeige ich unter „Neues aus dem Laden“ kurze Beiträge mit Text und
+      Fotos. Beim Aufruf der Seite lädt Ihr Browser diese Beiträge und Bilder von dem Server,
+      den die WEBklar GbR, Am Schwimmbad 10, 67722 Winnweiler, in meinem Auftrag betreibt und
+      der bei der Hetzner Online GmbH in Falkenstein (Deutschland) steht. Dabei werden Ihre
+      IP-Adresse, Datum und Uhrzeit des Aufrufs sowie Angaben zu Ihrem Browser und
+      Betriebssystem übertragen und kurzzeitig in Server-Protokollen gespeichert. Die
+      Pinnwand setzt <strong>keine Cookies</strong> und speichert nichts in Ihrem Browser.</p>
+      <p>Ich brauche diese Daten, um die Beiträge auszuliefern und den Betrieb sicher zu
+      halten. Rechtsgrundlage ist Art. 6 Abs. 1 lit. f DSGVO. Mein berechtigtes Interesse
+      liegt in der Darstellung aktueller Informationen und im sicheren, funktionsfähigen
+      Betrieb der Website. Die Protokolle werden nach 14 Tagen gelöscht.</p>
+
       <h2>5. Schriftarten</h2>
       <p>Die Schriften Fredoka und Nunito werden <strong>lokal vom eigenen Server</strong>
       ausgeliefert. Beim Aufruf dieser Seite wird keine Verbindung zu Google Fonts oder zu
@@ -132,7 +148,8 @@
       und dem Server ist damit verschlüsselt.</p>
 
       <h2>8. Empfänger und Drittlandübermittlung</h2>
-      <p>Über den Hoster hinaus gebe ich keine personenbezogenen Daten weiter. Eine
+      <p>Über den Hoster und meinen Webdienstleister WEBklar (Abschnitt 4c) hinaus gebe ich
+      keine personenbezogenen Daten weiter. Eine
       Übermittlung in Länder außerhalb der EU beziehungsweise des EWR findet durch mich nicht
       statt. Ausnahme ist die Karte von Google Maps auf der Startseite (Abschnitt 4a).</p>
 
@@ -154,7 +171,7 @@
       Bayerische Landesamt für Datenschutzaufsicht (BayLDA), Promenade 18, 91522 Ansbach.</p>
 
       <h2>11. Stand</h2>
-      <p>Diese Erklärung beschreibt den Stand vom 25. September 2026.</p>
+      <p>Diese Erklärung beschreibt den Stand vom 30. September 2026.</p>
     </div>
   </section>
 </main>

hilfe-verein.html

@@ -23,6 +23,7 @@
     </a>
     <nav class="nav" aria-label="Hauptnavigation">
       <a href="index.html">Start</a>
+      <a class="nav__news" href="index.html#neuigkeiten">Neuigkeiten</a>
       <a href="shop.html">Shop</a>
       <a href="hilfe-verein.html" aria-current="page">Hilfe Verein</a>
       <a href="#kontakt">Kontakt</a>

impressum.html

@@ -24,6 +24,7 @@
     </a>
     <nav class="nav" aria-label="Hauptnavigation">
       <a href="index.html">Start</a>
+      <a class="nav__news" href="index.html#neuigkeiten">Neuigkeiten</a>
       <a href="shop.html">Shop</a>
       <a href="hilfe-verein.html">Hilfe Verein</a>
       <a href="hilfe-verein.html#kontakt">Kontakt</a>

index.html

@@ -23,6 +23,7 @@
     </a>
     <nav class="nav" aria-label="Hauptnavigation">
       <a href="index.html" aria-current="page">Start</a>
+      <a class="nav__news" href="index.html#neuigkeiten">Neuigkeiten</a>
       <a href="shop.html">Shop</a>
       <a href="hilfe-verein.html">Hilfe Verein</a>
       <a href="hilfe-verein.html#kontakt">Kontakt</a>
@@ -64,6 +65,25 @@
     </div>
   </section>
 
+  <!-- News-Pinnwand (WEBklar Kundenportal, Funktion "News"). Beitraege schreibt Opa Martin im Portal;
+       news.js ersetzt den Leerzustand, sobald mindestens ein Beitrag haengt. -->
+  <section class="wrap section" id="neuigkeiten">
+    <div class="sh">
+      <span class="sh__chip" style="--chip-bg:var(--coral-600)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg></span>
+      <h2>Neues aus dem Laden</h2>
+    </div>
+    <p class="news-lead">Was gerade reingekommen ist, wann ich zu habe und was sonst so los ist. Frisch von mir an die Pinnwand gehängt.</p>
+    <div class="news-pinnwand" data-webklar-news="q74ehq7hvnpiymqy" data-api="https://project.webklar.com" data-signature="Opa Martin">
+      <div class="news-board">
+        <div class="news-empty">
+          <span class="news-empty__pin"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg></span>
+          <h3>Hier hängt bald was Neues.</h3>
+          <p>Neue Ware, Aktionen und Öffnungszeiten findest du ab jetzt an dieser Pinnwand. Schau bald wieder vorbei.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
   <section class="wrap section" id="ueber-mich">
     <div class="sh">
       <span class="sh__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg></span>
@@ -213,5 +233,6 @@
 </footer>
 
 <script src="assets/player.js" defer></script>
+<script src="https://project.webklar.com/embed/news.js" defer></script>
 </body>
 </html>

shop.html

@@ -24,6 +24,7 @@
     </a>
     <nav class="nav" aria-label="Hauptnavigation">
       <a href="index.html">Start</a>
+      <a class="nav__news" href="index.html#neuigkeiten">Neuigkeiten</a>
       <a href="shop.html" aria-current="page">Shop</a>
       <a href="hilfe-verein.html">Hilfe Verein</a>
       <a href="hilfe-verein.html#kontakt">Kontakt</a>