From 5f39e3497db0eec65a6670d8c88397e840dbe0c4 Mon Sep 17 00:00:00 2001
From: Bratonien Cosplay <kontakt@bratonien.de>
Date: Mon, 10 Nov 2025 21:01:06 +0100
Subject: [PATCH] footer added

---
 adventskalender/2025/content/day01.html | 107 +++++++++++++++---------
 adventskalender/includes/footer.html    |  16 ++++
 adventskalender/shared/css/style.css    |  63 ++++++++++++++
 3 files changed, 146 insertions(+), 40 deletions(-)
 create mode 100644 adventskalender/includes/footer.html

diff --git a/adventskalender/2025/content/day01.html b/adventskalender/2025/content/day01.html
index ec31617..ee16d78 100644
--- a/adventskalender/2025/content/day01.html
+++ b/adventskalender/2025/content/day01.html
@@ -5,7 +5,7 @@
   <!-- === Basisbild (Platzhalter oder Hauptmotiv) ===
   <div class="image-wrapper">
     <picture>
-      <!-- AVIF 
+      <!-- AVIF -->
       <source
         type="image/avif"
         srcset="
@@ -19,7 +19,7 @@
           /2025/assets/images/3840/avif/Basisbild.avif 3840w"
         sizes="100vw">
 
-      <!-- WebP 
+      <!-- WebP -->
       <source
         type="image/webp"
         srcset="
@@ -33,7 +33,7 @@
           /2025/assets/images/3840/webp/Basisbild.webp 3840w"
         sizes="100vw">
 
-      <!-- JPEG-Fallback 
+      <!-- JPEG-Fallback -->
       <img
         src="/2025/assets/images/1366/jpeg/Basisbild.jpeg"
         srcset="
@@ -49,47 +49,74 @@
         alt="Bratonien Adventskalender – Tag 01"
         decoding="async">
     </picture>
-  </div> -->
- 
+  </div>
+  -->
 
-  <!-- === Daumenkino-Video === -->
-  <div class="video-wrapper thumbkino">
-    <video
-      class="video thumbkino-video"
-      autoplay
-      loop
-      muted
-      playsinline
-      preload="auto"
-      poster="/2025/assets/images/1366/jpeg/Basisbild.jpeg"
-    >
-    <!-- WEBM-Varianten -->
-<source src="/2025/assets/videos/nHD/webm/01.webm"       type="video/webm" media="(max-width: 640px)">
-<source src="/2025/assets/videos/FWVGA/webm/01.webm"     type="video/webm" media="(max-width: 854px)">
-<source src="/2025/assets/videos/qHD/webm/01.webm"       type="video/webm" media="(max-width: 960px)">
-<source src="/2025/assets/videos/HD/webm/01.webm"         type="video/webm" media="(max-width: 1280px)">
-<source src="/2025/assets/videos/HDplus/webm/01.webm"    type="video/webm" media="(max-width: 1600px)">
-<source src="/2025/assets/videos/FullHD/webm/01.webm"    type="video/webm" media="(max-width: 1920px)">
-<source src="/2025/assets/videos/1440p/webm/01.webm"     type="video/webm" media="(max-width: 2560px)">
-<source src="/2025/assets/videos/4K/webm/01.webm"        type="video/webm" media="(min-width: 2561px)">
+  <!-- === Textbereich über Video === -->
+  <div class="text-video-grid">
+    <div class="text-column">
+      <p>Draußen riecht die Luft nach kaltem Holz und ersten Plätzchen.<br>
+      Über den Dächern von Bratonien hängt ein dünner Dunst aus Zucker und Geheimnissen,<br>
+      und im Schloss knistert das Kaminfeuer wie eine Erinnerung daran,<br>
+      dass jeder Anfang ein kleines bisschen Mut braucht.</p>
 
-<!-- MP4-Fallbacks -->
-<source src="/2025/assets/videos/nHD/mp4/01.mp4"         type="video/mp4" media="(max-width: 640px)">
-<source src="/2025/assets/videos/FWVGA/mp4/01.mp4"       type="video/mp4" media="(max-width: 854px)">
-<source src="/2025/assets/videos/qHD/mp4/01.mp4"         type="video/mp4" media="(max-width: 960px)">
-<source src="/2025/assets/videos/HD/mp4/01.mp4"          type="video/mp4" media="(max-width: 1280px)">
-<source src="/2025/assets/videos/HDplus/mp4/01.mp4"      type="video/mp4" media="(max-width: 1600px)">
-<source src="/2025/assets/videos/FullHD/mp4/01.mp4"      type="video/mp4" media="(max-width: 1920px)">
-<source src="/2025/assets/videos/1440p/mp4/01.mp4"       type="video/mp4" media="(max-width: 2560px)">
-<source src="/2025/assets/videos/4K/mp4/01.mp4"           type="video/mp4" media="(min-width: 2561px)">
-      Dein Browser unterstützt dieses Videoformat nicht.
-    </video>
+      <p>Erna steht am Fenster, eine Tasse Kakao in der Hand,<br>
+      und beobachtet, wie Barney im Hof versucht, die Lichterkette zu entwirren.<br>
+      „Das Jahr geht nie leise zu Ende“, murmelt sie –<br>
+      und er antwortet, ohne aufzusehen: „Dann fangen wir besser laut an.“</p>
+
+      <p>Ein Lächeln huscht über beide Gesichter.<br>
+      Denn irgendwo, zwischen goldenen Schleifen und kalten Fingern,<br>
+      beginnt genau jetzt das, worauf ganz Bratonien gewartet hat:<br>
+      <strong>die Adventszeit.</strong></p>
+
+      <p class="note">
+        Und wer genau hinsieht, entdeckt: das kleine Daumenkino unten im Bild verändert sich.<br>
+        Mit jedem neuen Tag kommt ein Stück Geschichte hinzu – bis am Ende alles zusammenfindet.<br>
+        Also lohnt es sich, wiederzukommen … jeden Tag.
+      </p>
+    </div>
+
+    <div class="video-column">
+      <!-- === Daumenkino-Video === -->
+      <div class="video-wrapper thumbkino">
+        <video
+          class="video thumbkino-video"
+          autoplay
+          loop
+          muted
+          playsinline
+          preload="auto"
+          poster="/2025/assets/images/1366/jpeg/Basisbild.jpeg">
+
+          <!-- WEBM-Varianten -->
+          <source src="/2025/assets/videos/nHD/webm/01.webm"    type="video/webm" media="(max-width: 640px)">
+          <source src="/2025/assets/videos/FWVGA/webm/01.webm"  type="video/webm" media="(max-width: 854px)">
+          <source src="/2025/assets/videos/qHD/webm/01.webm"    type="video/webm" media="(max-width: 960px)">
+          <source src="/2025/assets/videos/HD/webm/01.webm"     type="video/webm" media="(max-width: 1280px)">
+          <source src="/2025/assets/videos/HDplus/webm/01.webm" type="video/webm" media="(max-width: 1600px)">
+          <source src="/2025/assets/videos/FullHD/webm/01.webm" type="video/webm" media="(max-width: 1920px)">
+          <source src="/2025/assets/videos/1440p/webm/01.webm"  type="video/webm" media="(max-width: 2560px)">
+          <source src="/2025/assets/videos/4K/webm/01.webm"     type="video/webm" media="(min-width: 2561px)">
+
+          <!-- MP4-Fallbacks -->
+          <source src="/2025/assets/videos/nHD/mp4/01.mp4"      type="video/mp4"  media="(max-width: 640px)">
+          <source src="/2025/assets/videos/FWVGA/mp4/01.mp4"    type="video/mp4"  media="(max-width: 854px)">
+          <source src="/2025/assets/videos/qHD/mp4/01.mp4"      type="video/mp4"  media="(max-width: 960px)">
+          <source src="/2025/assets/videos/HD/mp4/01.mp4"       type="video/mp4"  media="(max-width: 1280px)">
+          <source src="/2025/assets/videos/HDplus/mp4/01.mp4"   type="video/mp4"  media="(max-width: 1600px)">
+          <source src="/2025/assets/videos/FullHD/mp4/01.mp4"   type="video/mp4"  media="(max-width: 1920px)">
+          <source src="/2025/assets/videos/1440p/mp4/01.mp4"    type="video/mp4"  media="(max-width: 2560px)">
+          <source src="/2025/assets/videos/4K/mp4/01.mp4"       type="video/mp4"  media="(min-width: 2561px)">
+          Dein Browser unterstützt dieses Videoformat nicht.
+        </video>
+      </div>
+    </div>
   </div>
 
-
-  <!-- === Hintergrundmusik (optional) === -->
+  <!-- === Hintergrundmusik === -->
   <audio id="bgmusic" loop preload="auto">
-  <source src="/2025/assets/sounds/FallingSnow.mp3" type="audio/mpeg">
-</audio>
+    <source src="/2025/assets/sounds/FallingSnow.mp3" type="audio/mpeg">
+  </audio>
 
 </section>
\ No newline at end of file
diff --git a/adventskalender/includes/footer.html b/adventskalender/includes/footer.html
new file mode 100644
index 0000000..45cc6ce
--- /dev/null
+++ b/adventskalender/includes/footer.html
@@ -0,0 +1,16 @@
+<footer class="main-footer">
+  <div class="footer-inner">
+    <p class="footer-brand">© 2025 Bratonien – Alle Rechte vorbehalten</p>
+    <nav class="footer-links">
+      <a href="https://tr.ee/5W4LYvBQeV" target="_blank" rel="noopener noreferrer">Impressum</a>
+      <span class="divider">|</span>
+      <a href="https://tr.ee/6pbp7diUqe" target="_blank" rel="noopener noreferrer">Datenschutzerklärung</a>
+      <span class="divider">|</span>
+      <a href="https://tr.ee/MmcL8Aj5wq" target="_blank" rel="noopener noreferrer">Kontakt</a>
+    </nav>
+  </div>
+
+  <p class="legal-note">
+    Externe Links öffnen in einem neuen Fenster. Für deren Inhalte sind die jeweiligen Betreiber verantwortlich.
+  </p>
+</footer>
\ No newline at end of file
diff --git a/adventskalender/shared/css/style.css b/adventskalender/shared/css/style.css
index bdc8956..02dbe11 100644
--- a/adventskalender/shared/css/style.css
+++ b/adventskalender/shared/css/style.css
@@ -66,4 +66,67 @@ main > h1 {
   width: auto;
   border: 4px solid var(--ci-gold);
   border-radius: 12px;
+}
+
+/* === FOOTER === */
+.main-footer {
+  background-color: #104f3a; /* CI-Dunkelgrün */
+  color: #f7f3e8;           /* CI-Cremeweiß */
+  text-align: center;
+  padding: 2rem 1rem;
+  font-size: 0.9rem;
+  margin-top: 4rem;
+  border-top: 3px solid #c8aa49; /* Goldene Linie */
+}
+
+.footer-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.footer-brand {
+  font-weight: 600;
+  letter-spacing: 0.03em;
+}
+
+.footer-links {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5rem 1rem;
+}
+
+.footer-links a {
+  color: #c8aa49;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.footer-links a:hover {
+  color: #f7f3e8;
+  text-decoration: underline;
+}
+
+.footer-links .divider {
+  color: rgba(247, 243, 232, 0.4);
+}
+
+.legal-note {
+  margin-top: 1rem;
+  font-size: 0.75rem;
+  color: rgba(247, 243, 232, 0.7);
+}
+
+/* === RESPONSIVE === */
+@media (max-width: 600px) {
+  .footer-links {
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+
+  .footer-links .divider {
+    display: none;
+  }
 }
\ No newline at end of file