From 6c64da08846b1696fb8e0cc5cbc0898966eb08bb Mon Sep 17 00:00:00 2001
From: Markus <markus.wimmer@amperion.at>
Date: Tue, 2 Sep 2025 14:04:22 +0200
Subject: [PATCH] Update020920251404

---
 layouts/_default/contact.html |  94 ++++++++++-------
 layouts/partials/script.html  | 184 +++++++++++++++++++++++-----------
 2 files changed, 181 insertions(+), 97 deletions(-)

diff --git a/layouts/_default/contact.html b/layouts/_default/contact.html
index 86f1018..96a15e5 100644
--- a/layouts/_default/contact.html
+++ b/layouts/_default/contact.html
@@ -30,8 +30,9 @@
     .stack{display:grid;gap:16px}
     .stack-lg{display:grid;gap:24px}
     .info-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
-    .info-item{display:flex;gap:.75rem;align-items:flex-start}
-    .info-item .ico{flex:0 0 auto;line-height:0;color:#F5A623}
+    .info-item{display:flex;gap:.75rem;align-items:flex-start; justify-content:center; text-align:center}
+    .info-item .ico{flex:0 0 auto;line-height:0}
+    .info-item .txt a{ text-decoration:none;color:inherit; }
 
     /* CTA-Buttons & Socials: nutzt eure bestehenden Klassen – nur Layout-Hooks */
     .cta__actions{display:flex;gap:.75rem;flex-wrap:wrap}
@@ -50,8 +51,8 @@
     }
     textarea.form-control{min-height:160px;resize:vertical}
     .form-control:focus{border-color:#F5A623;box-shadow:0 0 0 3px rgba(245,166,35,.18)}
-    .form-legal{margin:0;opacity:.9} /* p-Standardgröße bleibt erhalten */
-    .card h3{margin:0 0 .5rem} /* nur Abstand, Typo kommt global von h3 */
+    .form-legal{margin:0;opacity:.9}
+    .card h3{margin:0 0 .5rem}
   </style>
 
   <section class="contact-wrap">
@@ -63,34 +64,41 @@
           <div class="card card-pad stack-lg">
             <div class="stack">
               <h3>Kontakt</h3>
-              <ul class="info-list" style="display:grid;gap:12px;justify-items:center;text-align:center">
-                  📍{{ with $addr }}
-                  <li class="info-item">
-                    <div class="txt">{{ . | markdownify }}</div>
-                  </li>
-                  {{ end }}
-                  📧{{ with $email }}
-                  <li class="info-item">
-                    <div class="txt">
-                       <a href="mailto:{{ . | safeURL }}" style="text-decoration:none;color:inherit;">{{ . }}</a>
-                    </div>
-                  </li>
-                  {{ end }}
-                  📞{{ with $phone1 }}
-                  <li class="info-item">
-                    <div class="txt">
-                       <a href="tel:{{ . | safeURL }}" style="text-decoration:none;color:inherit;">{{ . }}</a>
-                    </div>
-                  </li>
-                  {{ end }}
-                  {{ with $phone2 }}
-                  <li class="info-item">
-                    <div class="txt">
-                       <a href="tel:{{ . | safeURL }}" style="text-decoration:none;color:inherit;">{{ . }}</a>
-                    </div>
-                  </li>
-                  {{ end }}
-                </ul>
+              <ul class="info-list">
+                {{ with $addr }}
+                <li class="info-item">
+                  <span class="ico" aria-hidden="true">📍</span>
+                  <div class="txt">{{ . | markdownify }}</div>
+                </li>
+                {{ end }}
+
+                {{ with $email }}
+                <li class="info-item">
+                  <span class="ico" aria-hidden="true">📧</span>
+                  <div class="txt">
+                    <a href="mailto:{{ . | safeURL }}">{{ . }}</a>
+                  </div>
+                </li>
+                {{ end }}
+
+                {{ with $phone1 }}
+                <li class="info-item">
+                  <span class="ico" aria-hidden="true">📞</span>
+                  <div class="txt">
+                    <a href="tel:{{ . | safeURL }}">{{ . }}</a>
+                  </div>
+                </li>
+                {{ end }}
+
+                {{ with $phone2 }}
+                <li class="info-item">
+                  <span class="ico" aria-hidden="true">📱</span>
+                  <div class="txt">
+                    <a href="tel:{{ . | safeURL }}">{{ . }}</a>
+                  </div>
+                </li>
+                {{ end }}
+              </ul>
             </div>
 
             <div class="stack">
@@ -112,7 +120,7 @@
 
         <!-- ===== Formular ===== -->
         <div class="col-lg-7" data-reveal>
-          <form method="POST" action="/send.php" class="card card-pad stack">
+          <form method="POST" action="/send.php" class="card card-pad stack" novalidate>
             <div class="form-grid">
               <div class="form-group">
                 <label for="name" class="visually-hidden">Name</label>
@@ -138,17 +146,25 @@
                 <label for="message" class="visually-hidden">Ihre Nachricht</label>
                 <textarea id="message" name="message" class="form-control" rows="6" placeholder="Ihre Nachricht …" required></textarea>
               </div>
-              <!-- hCaptcha -->
+
+              <!-- hCaptcha – wird nach Consent via Tarteaucitron gerendert -->
               <div class="form-group full">
                 <div class="h-captcha" data-sitekey="15a25108-bbc0-4d02-913c-4ada005ebd20" data-theme="dark"></div>
+                <noscript>
+                  <div style="color:#b00020;font-size:13px;margin-top:6px;">
+                    Hinweis: Bitte aktivieren Sie JavaScript, um das Captcha zu laden.
+                  </div>
+                </noscript>
               </div>
             </div>
+
             <p class="form-legal">
               <label for="legal-consent">
                 <input id="legal-consent" name="legal_consented" type="checkbox" required>
                 Ich bin mit der Verarbeitung meiner Daten zum Zweck der Kontaktaufnahme einverstanden. (Datenschutzhinweise beachten)
               </label>
             </p>
+
             <div>
               <button class="cta__btn" type="submit" style="--btn-fs:1.5rem; --btn-py:14px; --btn-px:26px;">
                 <span aria-hidden="true">➜</span><span>Nachricht senden</span>
@@ -156,15 +172,17 @@
             </div>
           </form>
         </div>
+
       </div>
     </div>
   </section>
+
   {{/* Reveal Init (falls global nicht vorhanden) */}}
   <script>
     (function(){
       if (window.__contactRevealInit) return; window.__contactRevealInit = true;
       var els = document.querySelectorAll("[data-reveal]");
-      if (!('IntersectionObserver' in window)){ els.forEach(e=>e.classList.add('is-visible')); return; }
+      if (!('IntersectionObserver' in window)){ els.forEach(function(e){e.classList.add('is-visible')}); return; }
       var io = new IntersectionObserver(function(entries){
         entries.forEach(function(entry){
           if(entry.isIntersecting){
@@ -173,9 +191,7 @@
           }
         });
       }, {threshold:.12});
-      els.forEach(e=>io.observe(e));
+      els.forEach(function(e){io.observe(e)});
     })();
   </script>
-  <!-- hCaptcha-Skript -->
-  <script src="https://js.hcaptcha.com/1/api.js?hl=de"></script>
-{{ end }}
\ No newline at end of file
+{{ end }}
diff --git a/layouts/partials/script.html b/layouts/partials/script.html
index 3784497..6121dd5 100644
--- a/layouts/partials/script.html
+++ b/layouts/partials/script.html
@@ -1,73 +1,141 @@
-
-
 <!-- JS Plugins + Main script -->
 {{ $scripts := slice }}
 {{ range site.Params.plugins.js}}
-{{ if findRE "^http" .link }}
-<script src="{{ .link | relURL }}" type="application/javascript" {{.attributes | safeHTMLAttr}}></script>
-{{ else }}
-{{ $scripts = $scripts | append (resources.Get .link) }}
-{{ end }}
+  {{ if findRE "^http" .link }}
+    <script src="{{ .link | relURL }}" type="application/javascript" {{.attributes | safeHTMLAttr}}></script>
+  {{ else }}
+    {{ $scripts = $scripts | append (resources.Get .link) }}
+  {{ end }}
 {{ end }}
 {{ $scripts := $scripts | append (resources.Get "js/script.js" | minify) }}
 {{ $scripts := $scripts | resources.Concat "js/script.js" | minify | fingerprint "sha512" }}
 <script crossorigin="anonymous" defer="defer" integrity="{{ $scripts.Data.Integrity }}" type="application/javascript">{{$scripts.Content | safeJS}}</script>
 
-
-
+<!-- Cookie-Manager -->
 <script src="/tarteaucitron/tarteaucitron.js"></script>
 
-<script type="text/javascript">
-        tarteaucitron.init({
-    	    "privacyUrl": "/datenschutz",
-          "bodyPosition": "top",
-          "hashtag": "#tarteaucitron",
-          "cookieName": "tarteaucitron",
-          "orientation": "middle",
-
-          "groupServices": true,
-          "showDetailsOnClick": false,
-          "serviceDefaultState": "wait",     // ← wichtig: wartet auf Nutzeraktion
-          "showAlertSmall": false,
-          "cookieslist": false,
-
-          "closePopup": false,
-          "showIcon": true,
-          "iconPosition": "BottomRight",
-
-          "adblocker": false,
-          "DenyAllCta": false,
-          "AcceptAllCta": true,
-          "highPrivacy": true,               // ← wichtig: kein Auto-Consent
-          "alwaysNeedConsent": false,
-
-          "handleBrowserDNTRequest": false,
-          "removeCredit": false,
-          "moreInfoLink": true,
-          "useExternalCss": false,
-          "useExternalJs": false,
-
-          "mandatory": false,               // ← notwendig, wenn man keine Pflicht-Cookies nutzt
-          "mandatoryCta": false,
-
-          "googleConsentMode": true,
-          "bingConsentMode": true,
-          "softConsentMode": false,
-
-          "dataLayer": false,
-          "serverSide": false,
-          "partnersList": true
-        });
-</script>
-
+<!-- hCaptcha Custom-Service (MUSS VOR init DEFINIERT SEIN) -->
 <script>
-        tarteaucitron.user.matomoId = 2;
-        (tarteaucitron.job = tarteaucitron.job || []).push('matomocloud');
+(function() {
+  function renderAllHC() {
+    try {
+      var nodes = document.querySelectorAll('.h-captcha');
+      if (!nodes.length) return;
+
+      if (!window.hcaptcha || !window.hcaptcha.render) {
+        setTimeout(renderAllHC, 200);
+        return;
+      }
+
+      nodes.forEach(function(el) {
+        if (el.getAttribute('data-hc-rendered') === '1') return;
+
+        var sitekey = el.getAttribute('data-sitekey');
+        if (!sitekey) {
+          el.innerHTML = '<div style="color:#b00020;font-size:13px;padding:8px 0;">hCaptcha: data-sitekey fehlt.</div>';
+          return;
+        }
+
+        try {
+          window.hcaptcha.render(el, {
+            sitekey: sitekey,
+            theme: el.getAttribute('data-theme') || 'light',
+            size:  el.getAttribute('data-size')  || 'normal'
+          });
+          el.setAttribute('data-hc-rendered', '1');
+        } catch (e) {
+          el.innerHTML = '<div style="color:#b00020;font-size:13px;padding:8px 0;">hCaptcha Render-Fehler: ' + (e && e.message ? e.message : e) + '</div>';
+        }
+      });
+    } catch(e) {}
+  }
+
+  // globaler Callback für die API
+  window.__hcRenderAll = renderAllHC;
+
+  // hCaptcha als Tarteaucitron-Service
+  tarteaucitron.services.hcaptcha = {
+    key: 'hcaptcha',
+    type: 'other',
+    name: 'hCaptcha',
+    needConsent: true,
+    cookies: [],
+    uri: 'https://www.hcaptcha.com/privacy',
+    js: function () {
+      if (!document.getElementById('hcaptcha-api')) {
+        var s = document.createElement('script');
+        s.id = 'hcaptcha-api';
+        s.src = 'https://hcaptcha.com/1/api.js?render=explicit&onload=__hcRenderAll';
+        s.async = true;
+        s.defer = true;
+        s.onerror = function() {
+          document.querySelectorAll('.h-captcha').forEach(function(el){
+            el.innerHTML = '<div style="color:#b00020;font-size:13px;padding:8px 0;">hCaptcha API geblockt (CSP/Blocker?).</div>';
+          });
+        };
+        document.head.appendChild(s);
+      } else {
+        __hcRenderAll();
+      }
+    },
+    fallback: function () {
+      tarteaucitron.fallback(['h-captcha'], tarteaucitron.engage('hcaptcha'));
+    }
+  };
+})();
 </script>
 
-<script>tarteaucitron.user.matomoHost = 'https://matomo.amperion.at/';
-        tarteaucitron.user.matomoDontTrackPageView = dontTrackPageView (false | true);
-        tarteaucitron.user.matomoFullTracking = fullTracking (true | false);
+<!-- Tarteaucitron initialisieren -->
+<script type="text/javascript">
+tarteaucitron.init({
+  "privacyUrl": "/datenschutz",
+  "bodyPosition": "top",
+  "hashtag": "#tarteaucitron",
+  "cookieName": "tarteaucitron",
+  "orientation": "middle",
+
+  "groupServices": true,
+  "showDetailsOnClick": false,
+  "serviceDefaultState": "wait",
+  "showAlertSmall": false,
+  "cookieslist": false,
+
+  "closePopup": false,
+  "showIcon": true,
+  "iconPosition": "BottomRight",
+
+  "adblocker": false,
+  "DenyAllCta": false,
+  "AcceptAllCta": true,
+  "highPrivacy": true,
+  "alwaysNeedConsent": false,
+
+  "handleBrowserDNTRequest": false,
+  "removeCredit": false,
+  "moreInfoLink": true,
+  "useExternalCss": false,
+  "useExternalJs": false,
+
+  "mandatory": false,
+  "mandatoryCta": false,
+
+  "googleConsentMode": true,
+  "bingConsentMode": true,
+  "softConsentMode": false,
+
+  "dataLayer": false,
+  "serverSide": false,
+  "partnersList": true
+});
 </script>
 
-<script type="text/javascript" src="/js/tarteaucitron.js"></script>
\ No newline at end of file
+<!-- Matomo + hCaptcha in die Queue (NACH init) -->
+<script>
+  tarteaucitron.user.matomoId = 2;
+  tarteaucitron.user.matomoHost = 'https://matomo.amperion.at/';
+  tarteaucitron.user.matomoDontTrackPageView = false;  // bei Bedarf true
+  tarteaucitron.user.matomoFullTracking     = true;    // bei Bedarf false
+
+  (tarteaucitron.job = tarteaucitron.job || []).push('matomocloud');
+  (tarteaucitron.job = tarteaucitron.job || []).push('hcaptcha');
+</script>