From 17f39a60462f280c9f3919386b6c25333bd9e9d3 Mon Sep 17 00:00:00 2001
From: Arne Schauf <git@asw.io>
Date: Wed, 30 Apr 2025 14:30:25 +0200
Subject: [PATCH] Add custom Bootstrap theme CSS for core components

This commit introduces custom stylesheets for various UI components, enhancing typography, navigation, breadcrumbs, buttons, cards, event sections, footers, and more. These styles bring a cohesive design, improved responsiveness, and modern visual animations tailored to FEO GmbH's branding.
---
 core/models.py                        |    6 +-
 core/static/css/theme.css             | 1132 +------------------------
 core/static/css/theme/base.css        |   91 ++
 core/static/css/theme/breadcrumbs.css |   90 ++
 core/static/css/theme/buttons.css     |   52 ++
 core/static/css/theme/cards.css       |  143 ++++
 core/static/css/theme/events.css      |  304 +++++++
 core/static/css/theme/footer.css      |  148 ++++
 core/static/css/theme/navigation.css  |  206 +++++
 core/static/css/theme/newsletter.css  |   79 ++
 core/static/css/theme/utilities.css   |  108 +++
 core/static/css/theme/variables.css   |   51 ++
 core/templates/bootstrap5_base.html   |    4 +-
 13 files changed, 1288 insertions(+), 1126 deletions(-)
 create mode 100644 core/static/css/theme/base.css
 create mode 100644 core/static/css/theme/breadcrumbs.css
 create mode 100644 core/static/css/theme/buttons.css
 create mode 100644 core/static/css/theme/cards.css
 create mode 100644 core/static/css/theme/events.css
 create mode 100644 core/static/css/theme/footer.css
 create mode 100644 core/static/css/theme/navigation.css
 create mode 100644 core/static/css/theme/newsletter.css
 create mode 100644 core/static/css/theme/utilities.css
 create mode 100644 core/static/css/theme/variables.css

diff --git a/core/models.py b/core/models.py
index c6b1a4b..a437d02 100644
--- a/core/models.py
+++ b/core/models.py
@@ -442,13 +442,13 @@ EventPage.content_panels = [
     FieldPanel('downloads'),
     MultiFieldPanel([
         FieldPanel('show_in_event_calendar'),
-        FieldPanel('is_free'),
         FieldPanel('is_external'),
-        FieldPanel('pretix_slug'),
-        FieldPanel('registration_url'),
         FieldPanel('vimeo_id'),
     ], heading="Settings", classname="collapsible collapsed"),
     MultiFieldPanel([
+        FieldPanel('is_free'),
+        FieldPanel('pretix_slug'),
+        FieldPanel('registration_url'),
         FieldPanel('registration_start_date'),
         FieldPanel('registration_end_date'),
     ], heading="Registration Settings", classname="collapsible collapsed"),
diff --git a/core/static/css/theme.css b/core/static/css/theme.css
index d2ff4c2..5e51772 100644
--- a/core/static/css/theme.css
+++ b/core/static/css/theme.css
@@ -2,1124 +2,14 @@
  * An elegant, lightweight, and modern design
  */
 
-:root {
-  --bs-primary: #82bb27;
-  --bs-primary-rgb: 114, 192, 44;
-  --box-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.03);
-  --box-shadow-medium: 0 3px 10px rgba(0, 0, 0, 0.05);
-  --font-weight-thin: 200;
-  --font-weight-light: 300;
-  --font-weight-regular: 400;
-  --font-weight-medium: 500;
-}
-
-/* Override Bootstrap primary color */
-.btn-primary {
-  background-color: var(--bs-primary);
-  border-color: var(--bs-primary);
-}
-
-.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
-  background-color: #65ab27;
-  border-color: #65ab27;
-}
-
-.btn-outline-primary {
-  color: var(--bs-primary);
-  border-color: var(--bs-primary);
-}
-
-.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
-  background-color: var(--bs-primary);
-  border-color: var(--bs-primary);
-}
-
-.text-primary {
-  color: var(--bs-primary) !important;
-}
-
-.bg-primary {
-  background-color: var(--bs-primary) !important;
-}
-
-.border-primary {
-  border-color: var(--bs-primary) !important;
-}
-
-/* Navigation styling */
-.modern-navbar {
-  box-shadow: var(--box-shadow-light);
-  transition: all 0.3s ease;
-  padding: 0.8rem 0;
-}
-
-.modern-navbar.sticky-top {
-  backdrop-filter: blur(8px);
-  background-color: rgba(255, 255, 255, 0.92) !important;
-}
-
-.modern-navbar.scrolled {
-  padding: 0.5rem 0;
-  box-shadow: var(--box-shadow-medium);
-}
-
-.modern-navbar .navbar-brand {
-  padding: 0.5rem 0;
-}
-
-.modern-navbar .logo-img {
-  transition: transform 0.3s ease;
-}
-
-.modern-navbar .logo-img:hover {
-  transform: scale(1.05);
-}
-
-/* Main navigation styling */
-.navbar-light .navbar-nav .nav-link {
-  color: #333;
-  font-weight: var(--font-weight-light);
-  padding: 0.7rem 1rem;
-  transition: all 0.3s ease;
-  position: relative;
-  border-radius: 4px;
-  letter-spacing: 0.01em;
-}
-
-.navbar-light .navbar-nav .nav-link:hover,
-.navbar-light .navbar-nav .nav-link:focus {
-  color: var(--bs-primary);
-  background-color: rgba(var(--bs-primary-rgb), 0.03);
-  text-decoration: none;
-}
-
-.navbar-light .navbar-nav .active-link {
-  color: var(--bs-primary);
-  font-weight: var(--font-weight-regular);
-}
-
-.navbar-light .navbar-nav .active-link:after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 20px;
-  height: 2px;
-  background-color: var(--bs-primary);
-  border-radius: 2px;
-}
-
-/* Dropdown toggle enhancement */
-.navbar-light .navbar-nav .dropdown-toggle::after {
-  transition: all 0.3s ease;
-  vertical-align: middle;
-  margin-left: 0.4rem;
-}
-
-.navbar-light .navbar-nav .dropdown-toggle:hover::after {
-  transform: translateY(2px);
-}
-
-.navbar-light .navbar-nav .show > .dropdown-toggle::after {
-  transform: rotate(180deg);
-}
-
-.nav-btn {
-  padding: 0.5rem 1.2rem;
-  box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.15);
-  transition: all 0.3s ease;
-  font-weight: var(--font-weight-light);
-  letter-spacing: 0.02em;
-}
-
-.nav-btn:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 3px 8px rgba(var(--bs-primary-rgb), 0.2);
-}
-
-/* Dropdown menu styling */
-.modern-dropdown {
-  margin-top: 0.3rem;
-  border-radius: 8px;
-  padding: 0.2rem;
-  min-width: 220px;
-  animation: fadeIn 0.2s ease-out;
-  box-shadow: var(--box-shadow-medium) !important;
-  border: 1px solid rgba(0, 0, 0, 0.03) !important;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(-10px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.modern-dropdown .dropdown-item {
-  padding: 0.4rem 0.8rem;
-  border-radius: 4px;
-  margin-bottom: 0;
-  transition: all 0.2s ease;
-  font-weight: var(--font-weight-light);
-  letter-spacing: 0.01em;
-}
-
-.modern-dropdown .dropdown-item:hover {
-  background-color: rgba(var(--bs-primary-rgb), 0.03);
-  color: var(--bs-primary);
-  transform: translateX(2px);
-}
-
-.modern-dropdown .dropdown-item.active {
-  background-color: rgba(var(--bs-primary-rgb), 0.05);
-  color: var(--bs-primary);
-  font-weight: var(--font-weight-regular);
-}
-
-.modern-dropdown .parent-item {
-  font-weight: var(--font-weight-regular);
-  color: var(--bs-primary);
-  letter-spacing: 0.01em;
-}
-
-.modern-dropdown .dropdown-divider {
-  margin: 0.1rem 0;
-  opacity: 0.1;
-}
-
-/* Mobile navbar improvements */
-@media (max-width: 991.98px) {
-  .modern-navbar {
-    padding: 0.5rem 0;
-  }
-
-  .navbar-collapse {
-    background-color: white;
-    border-radius: 8px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-    padding: 1rem;
-    margin-top: 1rem;
-  }
-
-  .navbar-nav .nav-item {
-    margin: 0.3rem 0;
-  }
-
-  .navbar-light .navbar-nav .nav-link {
-    padding: 0.8rem 1.2rem;
-  }
-
-  .navbar-light .navbar-nav .active-link:after {
-    left: 1.2rem;
-    transform: none;
-    width: 30px;
-  }
-
-  .nav-btn {
-    margin-top: 0.5rem;
-    display: block;
-    text-align: center;
-  }
-
-  .modern-dropdown {
-    border: none !important;
-    box-shadow: none !important;
-    padding-left: 1rem;
-    animation: none;
-  }
-
-  .modern-dropdown .dropdown-item {
-    padding: 0.4rem 0.8rem;
-  }
-
-  .modern-dropdown .dropdown-item:hover {
-    transform: none;
-  }
-}
-
-/* Card styling */
-.card {
-  border: none;
-  border-radius: 8px;
-  box-shadow: var(--box-shadow-light);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-  border: 1px solid rgba(0, 0, 0, 0.02);
-}
-
-.card:hover {
-  transform: translateY(-3px);
-  box-shadow: var(--box-shadow-medium);
-}
-
-/* Button styling */
-.btn {
-  border-radius: 4px;
-  padding: 0.5rem 1.5rem;
-  font-weight: var(--font-weight-light);
-  transition: all 0.3s ease;
-  letter-spacing: 0.01em;
-}
-
-/* Footer styling */
-.footer {
-  background-color: #2c3e50;
-  padding: 4rem 0;
-  color: #f8f9fa;
-  position: relative;
-  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
-}
-
-.footer::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: linear-gradient(to right, var(--bs-primary), #2ecc71);
-}
-
-.footer h2.h4 {
-  font-weight: var(--font-weight-regular);
-  letter-spacing: 0.01em;
-  color: white;
-  margin-bottom: 1.5rem;
-  position: relative;
-  display: inline-block;
-}
-
-.footer h2.h4::after {
-  content: '';
-  position: absolute;
-  bottom: -8px;
-  left: 0;
-  width: 40px;
-  height: 2px;
-  background-color: var(--bs-primary);
-}
-
-.footer p, .footer address {
-  color: rgba(255, 255, 255, 0.8);
-  font-weight: var(--font-weight-light);
-}
-
-.footer .row > div {
-  position: relative;
-}
-
-.footer .row > div:not(:last-child)::after {
-  content: '';
-  position: absolute;
-  top: 10%;
-  right: 0;
-  height: 80%;
-  width: 1px;
-  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent);
-  display: none;
-}
-
-@media (min-width: 768px) {
-  .footer .row > div:not(:last-child)::after {
-    display: block;
-  }
-}
-
-/* Event calendar styling */
-.event-calendar {
-  position: relative;
-}
-
-.event-calendar-header {
-  border-bottom: 2px solid var(--bs-primary);
-  position: relative;
-}
-
-.event-calendar-title {
-  font-weight: var(--font-weight-light);
-  color: #333;
-  margin-bottom: 0.5rem;
-  position: relative;
-  display: inline-block;
-}
-
-.event-calendar-title::after {
-  content: '';
-  position: absolute;
-  bottom: -8px;
-  left: 0;
-  width: 40px;
-  height: 2px;
-  background-color: var(--bs-primary);
-}
-
-.event-item {
-  padding-bottom: 1rem;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-  transition: all 0.3s ease;
-}
-
-.event-item:hover {
-  transform: translateX(3px);
-}
-
-.event-date-badge {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-width: 60px;
-  height: 60px;
-  background: linear-gradient(135deg, var(--bs-primary), #2ecc71);
-  color: white;
-  border-radius: 8px;
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
-  padding: 0.5rem;
-  text-align: center;
-}
-
-.event-day {
-  font-size: 1.25rem;
-  font-weight: bold;
-  line-height: 1;
-}
-
-.event-month {
-  font-size: 0.7rem;
-  text-transform: uppercase;
-  line-height: 1;
-}
-
-.event-year {
-  font-size: 0.7rem;
-  opacity: 0.8;
-  line-height: 1;
-}
-
-.event-content {
-  flex: 1;
-  overflow: hidden;
-}
-
-.event-title {
-  font-size: 1rem;
-  margin-bottom: 0.5rem;
-  font-weight: var(--font-weight-regular);
-}
-
-.event-link {
-  color: #333;
-  text-decoration: none;
-  transition: color 0.3s ease;
-}
-
-.event-link:hover {
-  color: var(--bs-primary);
-  text-decoration: none;
-}
-
-.event-details {
-  font-size: 0.85rem;
-  color: #666;
-}
-
-.event-date, .event-location {
-  margin-bottom: 0.25rem;
-}
-
-.event-date i, .event-location i {
-  margin-right: 0.5rem;
-  color: var(--bs-primary);
-  font-size: 0.8rem;
-}
-
-.event-calendar-footer {
-  margin-top: 1rem;
-}
-
-/* Event CTA styling */
-.event-cta {
-  background: transparent;
-  border-radius: 12px;
-  box-shadow: 0 10px 30px rgba(var(--bs-primary-rgb), 0.3);
-  position: relative;
-  overflow: hidden;
-  transition: all 0.3s ease;
-}
-
-.event-cta::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  background: linear-gradient(135deg, var(--bs-primary), #2ecc71);
-  z-index: -1;
-}
-
-.event-cta::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 30%;
-  background: rgba(255, 255, 255, 0.1);
-  transform: skewX(-15deg) translateX(10%);
-  z-index: -1;
-}
-
-.event-cta:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 15px 35px rgba(var(--bs-primary-rgb), 0.4);
-}
-
-.event-cta .btn-light {
-  background: rgba(255, 255, 255, 0.9);
-  border: none;
-  color: var(--bs-primary);
-  font-weight: var(--font-weight-medium);
-  padding: 0.8rem 1.8rem;
-  border-radius: 50px;
-  transition: all 0.3s ease;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-}
-
-.event-cta .btn-light:hover {
-  background: white;
-  transform: translateY(-3px);
-  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
-}
-
-/* Responsive adjustments for event CTA */
-@media (max-width: 767.98px) {
-  .event-cta {
-    padding: 2rem 1.5rem;
-  }
-}
-
-/* Event date card */
-.event-date-card {
-  background: linear-gradient(135deg, var(--bs-primary), #2ecc71);
-  border: none;
-  border-radius: 12px;
-  padding: 1.5rem;
-  color: white;
-  margin-bottom: 2rem;
-  box-shadow: 0 8px 20px rgba(var(--bs-primary-rgb), 0.3);
-  transition: all 0.3s ease;
-}
-
-.event-date-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 12px 25px rgba(var(--bs-primary-rgb), 0.4);
-}
-
-.event-date-card .card-title {
-  font-weight: var(--font-weight-medium);
-  font-size: 1.5rem;
-  margin-bottom: 1rem;
-}
-
-.event-date-card .btn-light {
-  background: rgba(255, 255, 255, 0.9);
-  border: none;
-  color: var(--bs-primary);
-  font-weight: var(--font-weight-medium);
-  padding: 0.7rem 1.5rem;
-  border-radius: 50px;
-  transition: all 0.3s ease;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-}
-
-.event-date-card .btn-light:hover {
-  background: white;
-  transform: translateY(-2px);
-  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
-}
-
-/* Responsive adjustments for event date card */
-@media (max-width: 767.98px) {
-  .event-date-card {
-    padding: 1.25rem;
-  }
-}
-
-/* Tabs styling */
-.event-tabs .nav-pills {
-  gap: 0.5rem;
-}
-
-.event-tabs .nav-pills .nav-link {
-  border-radius: 50px;
-  padding: 0.7rem 1.5rem;
-  color: #555;
-  font-weight: var(--font-weight-regular);
-  transition: all 0.3s ease;
-}
-
-.event-tabs .nav-pills .nav-link:hover {
-  background-color: rgba(var(--bs-primary-rgb), 0.05);
-  color: var(--bs-primary);
-}
-
-.event-tabs .nav-pills .nav-link.active {
-  background-color: var(--bs-primary);
-  color: white;
-  box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.3);
-}
-
-/* Image Tab styling */
-.image-tab-container {
-  margin: 1rem 0 2rem;
-}
-
-.image-tab-wrapper {
-  display: inline-block;
-  position: relative;
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
-  transition: all 0.3s ease;
-}
-
-.image-tab-wrapper:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
-}
-
-.image-tab-wrapper img {
-  border-radius: 8px;
-  transition: all 0.5s ease;
-}
-
-.image-tab-caption {
-  font-size: 0.9rem;
-  color: #666;
-  padding: 0.5rem 0;
-  font-style: italic;
-}
-
-/* Image size options */
-.image-size-small {
-  width: 25%;
-  min-width: 200px;
-}
-
-.image-size-medium {
-  width: 50%;
-  min-width: 300px;
-}
-
-.image-size-large {
-  width: 75%;
-  min-width: 400px;
-}
-
-.image-size-full {
-  width: 100%;
-}
-
-/* Responsive adjustments for image tabs */
-@media (max-width: 767.98px) {
-  .image-size-small,
-  .image-size-medium,
-  .image-size-large {
-    width: 100%;
-    min-width: auto;
-  }
-}
-
-/* Sponsor styling */
-.sponsor-heading {
-  padding-bottom: 0.75rem;
-  border-bottom: 2px solid rgba(var(--bs-primary-rgb), 0.1);
-}
-
-.sponsor-heading::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 50px;
-  height: 2px;
-  background-color: var(--bs-primary);
-}
-
-.sponsor-card {
-  border-radius: 10px;
-  transition: all 0.3s ease;
-}
-
-.sponsor-card:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
-}
-
-.sponsor-logo {
-  transition: all 0.3s ease;
-  max-height: 100px;
-  width: auto;
-}
-
-.sponsor-card:hover .sponsor-logo {
-  transform: scale(1.05);
-}
-
-/* Hero sections */
-.event-hero {
-  position: relative;
-  border-radius: 12px;
-  overflow: hidden;
-  margin-bottom: 3rem;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-}
-
-.event-hero-carousel {
-  border-radius: 12px;
-}
-
-.event-hero-carousel .carousel-item {
-  height: 500px;
-}
-
-.event-hero-carousel .carousel-item img {
-  object-fit: cover;
-  height: 100%;
-  width: 100%;
-}
-
-.event-hero-carousel .carousel-caption {
-  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
-  border-radius: 0 0 12px 12px;
-  padding: 3rem 2rem 2rem;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  text-align: left;
-}
-
-.event-hero-carousel .carousel-indicators {
-  margin-bottom: 1.5rem;
-}
-
-.event-hero-carousel .carousel-indicators button {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  margin: 0 5px;
-}
-
-/* Responsive adjustments for hero sections */
-@media (max-width: 767.98px) {
-  .event-hero-carousel .carousel-item {
-    height: 300px;
-  }
-
-  .event-hero-carousel .carousel-caption {
-    padding: 2rem 1.5rem 1.5rem;
-  }
-}
-
-.event-title-container {
-  position: relative;
-  margin-bottom: 2.5rem;
-}
-
-.event-title {
-  font-weight: var(--font-weight-light);
-  margin-bottom: 0.5rem;
-  position: relative;
-  display: inline-block;
-}
-
-.event-title::after {
-  content: '';
-  position: absolute;
-  bottom: -6px;
-  left: 0;
-  width: 60px;
-  height: 3px;
-  background: linear-gradient(to right, var(--bs-primary), #2ecc71);
-  border-radius: 3px;
-}
-
-.event-subtitle {
-  color: #666;
-  font-weight: var(--font-weight-light);
-  margin-top: 1rem;
-}
-
-/* Responsive adjustments for titles */
-@media (max-width: 767.98px) {
-  .event-title {
-    font-size: 2rem;
-  }
-}
-
-/* Content sections */
-.event-description {
-  background-color: white;
-  border-radius: 12px;
-  padding: 2rem;
-  margin-bottom: 2rem;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
-  border: 1px solid rgba(0, 0, 0, 0.03);
-}
-
-/* Image gallery and cards */
-.event-image-gallery {
-  margin-bottom: 2rem;
-}
-
-.event-image-card {
-  border: none;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
-  transition: all 0.3s ease;
-  height: 100%;
-  max-width: 200px;
-  margin: 0 auto;
-}
-
-.event-image-card:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
-}
-
-.event-image-card img {
-  transition: all 0.5s ease;
-  max-height: 600px;
-  object-fit: contain;
-}
-
-.event-image-card:hover img {
-  transform: scale(1.05);
-}
-
-.event-image-card .card-body {
-  padding: 1.25rem;
-}
-
-/* Event detail cards */
-.event-detail-card {
-  border-radius: 10px;
-  transition: all 0.3s ease;
-}
-
-.event-detail-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
-}
-
-.event-detail-card .card-title {
-  position: relative;
-  padding-bottom: 0.75rem;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.event-detail-card .card-title::after {
-  content: '';
-  position: absolute;
-  bottom: -1px;
-  left: 0;
-  width: 40px;
-  height: 2px;
-  background-color: var(--bs-primary);
-}
-
-/* Footer-specific event calendar styling */
-.footer .event-calendar-title {
-  color: white;
-}
-
-.footer .event-item {
-  border-bottom-color: rgba(255, 255, 255, 0.1);
-}
-
-.footer .event-link {
-  color: rgba(255, 255, 255, 0.9);
-}
-
-.footer .event-link:hover {
-  color: var(--bs-primary);
-}
-
-.footer .event-details {
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.footer a {
-  color: rgba(255, 255, 255, 0.8);
-  text-decoration: none;
-  transition: all 0.3s ease;
-}
-
-.footer a:hover {
-  color: var(--bs-primary);
-}
-
-.footer .btn-outline-primary {
-  border-color: rgba(255, 255, 255, 0.3);
-  color: white;
-  transition: all 0.3s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.footer .btn-outline-primary:hover {
-  background-color: var(--bs-primary);
-  border-color: var(--bs-primary);
-  color: white;
-  transform: translateY(-3px);
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-}
-
-.copyright {
-  background-color: #1a252f;
-  color: rgba(255, 255, 255, 0.7);
-  padding: 1.5rem 0;
-  font-weight: var(--font-weight-light);
-}
-
-.copyright a {
-  color: rgba(255, 255, 255, 0.7);
-  text-decoration: none;
-  transition: color 0.3s ease;
-}
-
-.copyright a:hover {
-  color: var(--bs-primary);
-}
-
-/* Typography improvements */
-body {
-  font-family: 'Roboto', 'Segoe UI', sans-serif;
-  color: #333;
-  line-height: 1.6;
-  font-weight: var(--font-weight-light);
-  letter-spacing: 0.01em;
-}
-
-/* Text color utilities */
-.text-white-75 {
-  color: rgba(255, 255, 255, 0.75);
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-weight: var(--font-weight-light);
-  margin-bottom: 1rem;
-  letter-spacing: 0.01em;
-  line-height: 1.4;
-}
-
-h1 {
-  font-weight: var(--font-weight-thin);
-  letter-spacing: 0.02em;
-}
-
-h2 {
-  font-weight: var(--font-weight-thin);
-  letter-spacing: 0.02em;
-}
-
-.text-bold {
-  font-weight: var(--font-weight-regular);
-}
-
-/* Link styling */
-a {
-  color: var(--bs-primary);
-  text-decoration: none;
-  transition: color 0.3s ease;
-}
-
-a:hover {
-  color: #65ab27;
-  text-decoration: underline;
-}
-
-/* Form controls */
-.form-control:focus {
-  border-color: var(--bs-primary);
-  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
-}
-
-/* Custom Scrollbar Styling */
-:root {
-  --scrollbar-thumb: rgba(var(--bs-primary-rgb), 0.6);
-  --scrollbar-thumb-hover: var(--bs-primary);
-  --scrollbar-track: rgba(0, 0, 0, 0.05);
-  --scrollbar-width: 8px;
-}
-
-/* WebKit browsers (Chrome, Safari, Edge) */
-::-webkit-scrollbar {
-  width: var(--scrollbar-width);
-  height: var(--scrollbar-width);
-}
-
-::-webkit-scrollbar-track {
-  background: var(--scrollbar-track);
-  border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--scrollbar-thumb);
-  border-radius: 10px;
-  transition: background 0.3s ease;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--scrollbar-thumb-hover);
-}
-
-/* Firefox */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-}
-
-/* Dark background scrollbar styles */
-.footer, .copyright {
-  --scrollbar-thumb-dark: rgba(255, 255, 255, 0.4);
-  --scrollbar-thumb-hover-dark: rgba(255, 255, 255, 0.6);
-  --scrollbar-track-dark: rgba(0, 0, 0, 0.2);
-}
-
-.footer ::-webkit-scrollbar-track,
-.copyright ::-webkit-scrollbar-track {
-  background: var(--scrollbar-track-dark);
-}
-
-.footer ::-webkit-scrollbar-thumb,
-.copyright ::-webkit-scrollbar-thumb {
-  background: var(--scrollbar-thumb-dark);
-}
-
-.footer ::-webkit-scrollbar-thumb:hover,
-.copyright ::-webkit-scrollbar-thumb:hover {
-  background: var(--scrollbar-thumb-hover-dark);
-}
-
-/* Firefox - dark background */
-.footer *, .copyright * {
-  scrollbar-color: var(--scrollbar-thumb-dark) var(--scrollbar-track-dark);
-}
-
-/* Newsletter CTA styling */
-.newsletter-cta {
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-  backdrop-filter: blur(5px);
-  transition: all 0.3s ease;
-  position: relative;
-  overflow: hidden;
-}
-
-.newsletter-cta::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 3px;
-  background: linear-gradient(to right, var(--bs-primary), #2ecc71);
-}
-
-.newsletter-cta:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
-}
-
-.newsletter-heading {
-  color: white;
-  font-size: 1.2rem;
-  font-weight: var(--font-weight-medium);
-  letter-spacing: 0.02em;
-  margin-bottom: 0.5rem;
-}
-
-.newsletter-text {
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 0.9rem;
-  line-height: 1.4;
-}
-
-.newsletter-cta .btn-primary {
-  padding: 0.6rem 1rem;
-  font-weight: var(--font-weight-regular);
-  letter-spacing: 0.02em;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
-  transition: all 0.3s ease;
-}
-
-.newsletter-cta .btn-primary:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
-}
-
-/* Newsletter heading styling */
-.newsletter-heading-main {
-  color: var(--bs-primary) !important;
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  padding: 0.3rem 0.5rem;
-  margin-left: -0.5rem;
-  border-radius: 4px;
-  background: rgba(255, 255, 255, 0.05);
-  animation: pulse 2s infinite;
-}
-
-.newsletter-heading-main::after {
-  background-color: var(--bs-primary) !important;
-  width: 60px !important;
-}
-
-.newsletter-heading-main i {
-  color: var(--bs-primary);
-  font-size: 1rem;
-}
-
-/* Social media buttons styling */
-.social-btn {
-  display: flex;
-  align-items: center;
-  padding: 0.5rem 1.2rem;
-  transition: all 0.3s ease;
-  width: 100%;
-  text-align: left;
-  font-weight: var(--font-weight-regular);
-  letter-spacing: 0.01em;
-  border-width: 2px;
-  white-space: normal;
-  min-height: 3.5rem;
-}
-
-.social-btn i {
-  font-size: 1.2rem;
-  flex-shrink: 0;
-  align-self: flex-start;
-  margin-top: 0.2rem;
-}
-
-.social-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-}
-
-@keyframes pulse {
-  0% {
-    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.4);
-  }
-  70% {
-    box-shadow: 0 0 0 6px rgba(var(--bs-primary-rgb), 0);
-  }
-  100% {
-    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0);
-  }
-}
+/* Import all theme components */
+@import url('theme/variables.css');
+@import url('theme/base.css');
+@import url('theme/buttons.css');
+@import url('theme/navigation.css');
+@import url('theme/cards.css');
+@import url('theme/footer.css');
+@import url('theme/breadcrumbs.css');
+@import url('theme/events.css');
+@import url('theme/utilities.css');
+@import url('theme/newsletter.css');
diff --git a/core/static/css/theme/base.css b/core/static/css/theme/base.css
new file mode 100644
index 0000000..bd1b8d1
--- /dev/null
+++ b/core/static/css/theme/base.css
@@ -0,0 +1,91 @@
+/* FEO GmbH Custom Bootstrap Theme - Base
+ * Typography, body, headings, links, etc.
+ */
+
+/* Typography improvements */
+body {
+  font-family: 'Roboto', 'Segoe UI', sans-serif;
+  color: #333;
+  line-height: 1.6;
+  font-weight: var(--font-weight-light);
+  letter-spacing: 0.01em;
+}
+
+/* Text color utilities */
+.text-white-75 {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: var(--font-weight-light);
+  margin-bottom: 1rem;
+  letter-spacing: 0.01em;
+  line-height: 1.4;
+}
+
+h1 {
+  font-weight: var(--font-weight-thin);
+  letter-spacing: 0.02em;
+}
+
+h2 {
+  font-weight: var(--font-weight-thin);
+  letter-spacing: 0.02em;
+}
+
+.text-bold {
+  font-weight: var(--font-weight-regular);
+}
+
+/* Link styling */
+a {
+  color: var(--bs-primary);
+  text-decoration: none;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+a:hover {
+  color: var(--bs-primary);
+  text-decoration: none;
+  background-color: rgba(var(--bs-primary-rgb), 0.05);
+}
+
+a::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 1px;
+  background: linear-gradient(to right, var(--bs-primary), #2ecc71);
+  transition: width 0.3s ease;
+}
+
+a:hover::after {
+  width: 100%;
+}
+
+/* Form controls */
+.form-control:focus {
+  border-color: var(--bs-primary);
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
+}
+
+/* Animations */
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 6px rgba(var(--bs-primary-rgb), 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0);
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
diff --git a/core/static/css/theme/breadcrumbs.css b/core/static/css/theme/breadcrumbs.css
new file mode 100644
index 0000000..2f05de7
--- /dev/null
+++ b/core/static/css/theme/breadcrumbs.css
@@ -0,0 +1,90 @@
+/* FEO GmbH Custom Bootstrap Theme - Breadcrumbs
+ * Breadcrumb styling
+ */
+
+/* Breadcrumb styling */
+.breadcrumb-section {
+  background-color: #f8f9fa;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
+  position: relative;
+}
+
+.breadcrumb-section::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: linear-gradient(to right, var(--bs-primary), #2ecc71, transparent);
+  opacity: 0.5;
+}
+
+.breadcrumb-section h1 {
+  margin-bottom: 0.5rem;
+  font-weight: var(--font-weight-light);
+  color: #333;
+  position: relative;
+  display: inline-block;
+}
+
+.breadcrumb-section h1::after {
+  content: '';
+  position: absolute;
+  bottom: -6px;
+  left: 0;
+  width: 60px;
+  height: 3px;
+  background: linear-gradient(to right, var(--bs-primary), #2ecc71);
+  border-radius: 3px;
+}
+
+.breadcrumb {
+  background: transparent;
+  margin-bottom: 0;
+  padding: 0.5rem 0;
+  font-weight: var(--font-weight-light);
+  letter-spacing: 0.01em;
+}
+
+.breadcrumb-item + .breadcrumb-item::before {
+  content: "›";
+  color: #999;
+  font-size: 1.1rem;
+  line-height: 1;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+  vertical-align: middle;
+}
+
+.breadcrumb-item a {
+  color: #666;
+  padding: 0.2rem 0.4rem;
+  border-radius: 4px;
+}
+
+.breadcrumb-item.active {
+  color: var(--bs-primary);
+  font-weight: var(--font-weight-regular);
+}
+
+/* Responsive adjustments for breadcrumbs */
+@media (max-width: 767.98px) {
+  .breadcrumb-section {
+    padding: 1.5rem 0 !important;
+  }
+
+  .breadcrumb-section h1 {
+    font-size: 1.5rem;
+  }
+
+  .breadcrumb {
+    font-size: 0.9rem;
+  }
+
+  .breadcrumb-item + .breadcrumb-item::before {
+    padding-right: 0.3rem;
+    padding-left: 0.3rem;
+  }
+}
diff --git a/core/static/css/theme/buttons.css b/core/static/css/theme/buttons.css
new file mode 100644
index 0000000..41a5fc6
--- /dev/null
+++ b/core/static/css/theme/buttons.css
@@ -0,0 +1,52 @@
+/* FEO GmbH Custom Bootstrap Theme - Buttons
+ * Button styling
+ */
+
+/* Button styling */
+.btn {
+  border-radius: 4px;
+  padding: 0.5rem 1.5rem;
+  font-weight: var(--font-weight-light);
+  transition: all 0.3s ease;
+  letter-spacing: 0.01em;
+}
+
+.nav-btn {
+  padding: 0.5rem 1.2rem;
+  box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.15);
+  transition: all 0.3s ease;
+  font-weight: var(--font-weight-light);
+  letter-spacing: 0.02em;
+}
+
+.nav-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 3px 8px rgba(var(--bs-primary-rgb), 0.2);
+}
+
+/* Social media buttons styling */
+.social-btn {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 1.2rem;
+  transition: all 0.3s ease;
+  width: 100%;
+  text-align: left;
+  font-weight: var(--font-weight-regular);
+  letter-spacing: 0.01em;
+  border-width: 2px;
+  white-space: normal;
+  min-height: 3.5rem;
+}
+
+.social-btn i {
+  font-size: 1.2rem;
+  flex-shrink: 0;
+  align-self: flex-start;
+  margin-top: 0.2rem;
+}
+
+.social-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+}
diff --git a/core/static/css/theme/cards.css b/core/static/css/theme/cards.css
new file mode 100644
index 0000000..f7adf72
--- /dev/null
+++ b/core/static/css/theme/cards.css
@@ -0,0 +1,143 @@
+/* FEO GmbH Custom Bootstrap Theme - Cards
+ * Card styling
+ */
+
+/* Card styling */
+.card {
+  border: none;
+  border-radius: 8px;
+  box-shadow: var(--box-shadow-light);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  border: 1px solid rgba(0, 0, 0, 0.02);
+}
+
+.card:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--box-shadow-medium);
+}
+
+/* Event detail cards */
+.event-detail-card {
+  border-radius: 10px;
+  transition: all 0.3s ease;
+}
+
+.event-detail-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
+}
+
+.event-detail-card .card-title {
+  position: relative;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.event-detail-card .card-title::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 40px;
+  height: 2px;
+  background-color: var(--bs-primary);
+}
+
+/* Event date card */
+.event-date-card {
+  background: linear-gradient(135deg, var(--bs-primary), #2ecc71);
+  border: none;
+  border-radius: 12px;
+  padding: 1.5rem;
+  color: white;
+  margin-bottom: 2rem;
+  box-shadow: 0 8px 20px rgba(var(--bs-primary-rgb), 0.3);
+  transition: all 0.3s ease;
+}
+
+.event-date-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 25px rgba(var(--bs-primary-rgb), 0.4);
+}
+
+.event-date-card .card-title {
+  font-weight: var(--font-weight-medium);
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.event-date-card .btn-light {
+  background: rgba(255, 255, 255, 0.9);
+  border: none;
+  color: var(--bs-primary);
+  font-weight: var(--font-weight-medium);
+  padding: 0.7rem 1.5rem;
+  border-radius: 50px;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.event-date-card .btn-light:hover {
+  background: white;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
+}
+
+/* Responsive adjustments for event date card */
+@media (max-width: 767.98px) {
+  .event-date-card {
+    padding: 1.25rem;
+  }
+}
+
+/* Sponsor card */
+.sponsor-card {
+  border-radius: 10px;
+  transition: all 0.3s ease;
+}
+
+.sponsor-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
+}
+
+.sponsor-logo {
+  transition: all 0.3s ease;
+  max-height: 100px;
+  width: auto;
+}
+
+.sponsor-card:hover .sponsor-logo {
+  transform: scale(1.05);
+}
+
+/* Image gallery and cards */
+.event-image-card {
+  border: none;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  height: 100%;
+  max-width: 200px;
+  margin: 0 auto;
+}
+
+.event-image-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
+}
+
+.event-image-card img {
+  transition: all 0.5s ease;
+  max-height: 600px;
+  object-fit: contain;
+}
+
+.event-image-card:hover img {
+  transform: scale(1.05);
+}
+
+.event-image-card .card-body {
+  padding: 1.25rem;
+}
diff --git a/core/static/css/theme/events.css b/core/static/css/theme/events.css
new file mode 100644
index 0000000..f6abdec
--- /dev/null
+++ b/core/static/css/theme/events.css
@@ -0,0 +1,304 @@
+/* FEO GmbH Custom Bootstrap Theme - Events
+ * Event calendar, event CTA, event date card, etc.
+ */
+
+/* Event calendar styling */
+.event-calendar {
+  position: relative;
+}
+
+.event-calendar-header {
+  border-bottom: 2px solid var(--bs-primary);
+  position: relative;
+}
+
+.event-calendar-title {
+  font-weight: var(--font-weight-light);
+  color: #333;
+  margin-bottom: 0.5rem;
+  position: relative;
+  display: inline-block;
+}
+
+.event-calendar-title::after {
+  content: '';
+  position: absolute;
+  bottom: -8px;
+  left: 0;
+  width: 40px;
+  height: 2px;
+  background-color: var(--bs-primary);
+}
+
+.event-item {
+  padding-bottom: 1rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+}
+
+.event-item:hover {
+  transform: translateX(3px);
+}
+
+.event-date-badge {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 60px;
+  height: 60px;
+  background: linear-gradient(135deg, var(--bs-primary), #2ecc71);
+  color: white;
+  border-radius: 8px;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
+  padding: 0.5rem;
+  text-align: center;
+}
+
+.event-day {
+  font-size: 1.25rem;
+  font-weight: bold;
+  line-height: 1;
+}
+
+.event-month {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  line-height: 1;
+}
+
+.event-year {
+  font-size: 0.7rem;
+  opacity: 0.8;
+  line-height: 1;
+}
+
+.event-content {
+  flex: 1;
+  overflow: hidden;
+}
+
+.event-title {
+  font-size: 1rem;
+  margin-bottom: 0.5rem;
+  font-weight: var(--font-weight-regular);
+}
+
+.event-link {
+  color: #333;
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+
+.event-details {
+  font-size: 0.85rem;
+  color: #666;
+}
+
+.event-date, .event-location {
+  margin-bottom: 0.25rem;
+}
+
+.event-date i, .event-location i {
+  margin-right: 0.5rem;
+  color: var(--bs-primary);
+  font-size: 0.8rem;
+}
+
+.event-calendar-footer {
+  margin-top: 1rem;
+}
+
+/* Event CTA styling */
+.event-cta {
+  background: transparent;
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(var(--bs-primary-rgb), 0.3);
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.event-cta::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  background: linear-gradient(135deg, var(--bs-primary), #2ecc71);
+  z-index: -1;
+}
+
+.event-cta::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 30%;
+  background: rgba(255, 255, 255, 0.1);
+  transform: skewX(-15deg) translateX(10%);
+  z-index: -1;
+}
+
+.event-cta:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 15px 35px rgba(var(--bs-primary-rgb), 0.4);
+}
+
+.event-cta .btn-light {
+  background: rgba(255, 255, 255, 0.9);
+  border: none;
+  color: var(--bs-primary);
+  font-weight: var(--font-weight-medium);
+  padding: 0.8rem 1.8rem;
+  border-radius: 50px;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.event-cta .btn-light:hover {
+  background: white;
+  transform: translateY(-3px);
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
+}
+
+/* Responsive adjustments for event CTA */
+@media (max-width: 767.98px) {
+  .event-cta {
+    padding: 2rem 1.5rem;
+  }
+}
+
+/* Event title container */
+.event-title-container {
+  position: relative;
+  margin-bottom: 2.5rem;
+}
+
+.event-title {
+  font-weight: var(--font-weight-light);
+  margin-bottom: 0.5rem;
+  position: relative;
+  display: inline-block;
+}
+
+.event-title::after {
+  content: '';
+  position: absolute;
+  bottom: -6px;
+  left: 0;
+  width: 60px;
+  height: 3px;
+  background: linear-gradient(to right, var(--bs-primary), #2ecc71);
+  border-radius: 3px;
+}
+
+.event-subtitle {
+  color: #666;
+  font-weight: var(--font-weight-light);
+  margin-top: 1rem;
+}
+
+/* Responsive adjustments for titles */
+@media (max-width: 767.98px) {
+  .event-title {
+    font-size: 2rem;
+  }
+}
+
+/* Content sections */
+.event-description {
+  background-color: white;
+  border-radius: 12px;
+  padding: 2rem;
+  margin-bottom: 2rem;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.03);
+}
+
+/* Image gallery */
+.event-image-gallery {
+  margin-bottom: 2rem;
+}
+
+/* Tabs styling */
+.event-tabs .nav-pills {
+  gap: 0.5rem;
+}
+
+.event-tabs .nav-pills .nav-link {
+  border-radius: 50px;
+  padding: 0.7rem 1.5rem;
+  color: #555;
+  font-weight: var(--font-weight-regular);
+  transition: all 0.3s ease;
+}
+
+.event-tabs .nav-pills .nav-link:hover {
+  background-color: rgba(var(--bs-primary-rgb), 0.05);
+  color: var(--bs-primary);
+}
+
+.event-tabs .nav-pills .nav-link.active {
+  background-color: var(--bs-primary);
+  color: white;
+  box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.3);
+}
+
+/* Hero sections */
+.event-hero {
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+  margin-bottom: 3rem;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+.event-hero-carousel {
+  border-radius: 12px;
+}
+
+.event-hero-carousel .carousel-item {
+  height: 500px;
+}
+
+.event-hero-carousel .carousel-item img {
+  object-fit: cover;
+  height: 100%;
+  width: 100%;
+}
+
+.event-hero-carousel .carousel-caption {
+  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
+  border-radius: 0 0 12px 12px;
+  padding: 3rem 2rem 2rem;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  text-align: left;
+}
+
+.event-hero-carousel .carousel-indicators {
+  margin-bottom: 1.5rem;
+}
+
+.event-hero-carousel .carousel-indicators button {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin: 0 5px;
+}
+
+/* Responsive adjustments for hero sections */
+@media (max-width: 767.98px) {
+  .event-hero-carousel .carousel-item {
+    height: 300px;
+  }
+
+  .event-hero-carousel .carousel-caption {
+    padding: 2rem 1.5rem 1.5rem;
+  }
+}
diff --git a/core/static/css/theme/footer.css b/core/static/css/theme/footer.css
new file mode 100644
index 0000000..3ee5f5a
--- /dev/null
+++ b/core/static/css/theme/footer.css
@@ -0,0 +1,148 @@
+/* FEO GmbH Custom Bootstrap Theme - Footer
+ * Footer and copyright styling
+ */
+
+/* Footer styling */
+.footer {
+  background-color: #2c3e50;
+  padding: 4rem 0;
+  color: #f8f9fa;
+  position: relative;
+  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
+}
+
+.footer::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(to right, var(--bs-primary), #2ecc71);
+}
+
+.footer h2.h4 {
+  font-weight: var(--font-weight-regular);
+  letter-spacing: 0.01em;
+  color: white;
+  margin-bottom: 1.5rem;
+  position: relative;
+  display: inline-block;
+}
+
+.footer h2.h4::after {
+  content: '';
+  position: absolute;
+  bottom: -8px;
+  left: 0;
+  width: 40px;
+  height: 2px;
+  background-color: var(--bs-primary);
+}
+
+.footer p, .footer address {
+  color: rgba(255, 255, 255, 0.8);
+  font-weight: var(--font-weight-light);
+}
+
+.footer .row > div {
+  position: relative;
+}
+
+.footer .row > div:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: 10%;
+  right: 0;
+  height: 80%;
+  width: 1px;
+  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent);
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .footer .row > div:not(:last-child)::after {
+    display: block;
+  }
+}
+
+/* Footer-specific event calendar styling */
+.footer .event-calendar-title {
+  color: white;
+}
+
+.footer .event-item {
+  border-bottom-color: rgba(255, 255, 255, 0.1);
+}
+
+.footer .event-link {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.footer .event-details {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.footer a {
+  color: rgba(255, 255, 255, 0.8);
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+
+.footer .btn-outline-primary {
+  border-color: rgba(255, 255, 255, 0.3);
+  color: white;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.footer .btn-outline-primary:hover {
+  background-color: var(--bs-primary);
+  border-color: var(--bs-primary);
+  color: white;
+  transform: translateY(-3px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+/* Copyright section */
+.copyright {
+  background-color: #1a252f;
+  color: rgba(255, 255, 255, 0.7);
+  padding: 1.5rem 0;
+  font-weight: var(--font-weight-light);
+}
+
+.copyright a {
+  color: rgba(255, 255, 255, 0.7);
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+
+/* Dark background scrollbar styles */
+.footer, .copyright {
+  --scrollbar-thumb-dark: rgba(255, 255, 255, 0.4);
+  --scrollbar-thumb-hover-dark: rgba(255, 255, 255, 0.6);
+  --scrollbar-track-dark: rgba(0, 0, 0, 0.2);
+}
+
+.footer ::-webkit-scrollbar-track,
+.copyright ::-webkit-scrollbar-track {
+  background: var(--scrollbar-track-dark);
+}
+
+.footer ::-webkit-scrollbar-thumb,
+.copyright ::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb-dark);
+}
+
+.footer ::-webkit-scrollbar-thumb:hover,
+.copyright ::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover-dark);
+}
+
+/* Firefox - dark background */
+.footer *, .copyright * {
+  scrollbar-color: var(--scrollbar-thumb-dark) var(--scrollbar-track-dark);
+}
diff --git a/core/static/css/theme/navigation.css b/core/static/css/theme/navigation.css
new file mode 100644
index 0000000..8868145
--- /dev/null
+++ b/core/static/css/theme/navigation.css
@@ -0,0 +1,206 @@
+/* FEO GmbH Custom Bootstrap Theme - Navigation
+ * Navigation, dropdown, mobile navbar
+ */
+
+/* Navigation styling */
+.modern-navbar {
+  box-shadow: var(--box-shadow-light);
+  transition: all 0.3s ease;
+  padding: 0.8rem 0;
+}
+
+.modern-navbar.sticky-top {
+  backdrop-filter: blur(8px);
+  background-color: rgba(255, 255, 255, 0.92) !important;
+}
+
+.modern-navbar.scrolled {
+  padding: 0.5rem 0;
+  box-shadow: var(--box-shadow-medium);
+}
+
+.modern-navbar .navbar-brand {
+  padding: 0.5rem 0;
+}
+
+.modern-navbar .logo-img {
+  transition: transform 0.3s ease;
+}
+
+.modern-navbar .logo-img:hover {
+  transform: scale(1.05);
+}
+
+/* Main navigation styling */
+.navbar-light .navbar-nav .nav-link {
+  color: #333;
+  font-weight: var(--font-weight-light);
+  padding: 0.7rem 1rem;
+  transition: all 0.3s ease;
+  position: relative;
+  border-radius: 4px;
+  letter-spacing: 0.01em;
+}
+
+.navbar-light .navbar-nav .nav-link:hover,
+.navbar-light .navbar-nav .nav-link:focus {
+  color: var(--bs-primary);
+  background-color: rgba(var(--bs-primary-rgb), 0.03);
+  text-decoration: none;
+}
+
+.navbar-light .navbar-nav .active-link {
+  color: var(--bs-primary);
+  font-weight: var(--font-weight-regular);
+}
+
+.navbar-light .navbar-nav .active-link:after {
+  content: '';
+  position: relative;
+  transform: translateX(-50%);
+  width: 20px;
+  height: 2px;
+  background-color: var(--bs-primary);
+  border-radius: 2px;
+}
+
+/* Dropdown toggle enhancement */
+.navbar-light .navbar-nav .dropdown-toggle::after {
+  transition: transform 0.3s ease;
+  vertical-align: middle;
+  position: relative;
+  transform: translateY(-50%);
+  z-index: -1;
+}
+
+.navbar-light .navbar-nav .dropdown-toggle:hover::after {
+  transform: translateY(-40%);
+  z-index: -1;
+}
+
+.navbar-light .navbar-nav .show > .dropdown-toggle::after {
+  transform: translateY(-50%) rotate(180deg);
+  left: 0.5rem;
+  top: 55%;
+  z-index: -1;
+}
+
+/* Exclude dropdown toggle arrow from link styling */
+.navbar-light .navbar-nav .dropdown-toggle::after {
+  width: auto;
+  height: auto;
+  background: none;
+}
+
+.navbar-light .navbar-nav .dropdown-toggle:hover::after {
+  background: none;
+}
+
+/* Ensure dropdown toggle doesn't get background color from general link hover */
+.navbar-light .navbar-nav .nav-link.dropdown-toggle:hover {
+  background-color: rgba(var(--bs-primary-rgb), 0.03);
+}
+
+/* Dropdown menu styling */
+.modern-dropdown {
+  margin-top: 0.3rem;
+  border-radius: 8px;
+  padding: 0.2rem;
+  min-width: 220px;
+  animation: fadeIn 0.2s ease-out;
+  box-shadow: var(--box-shadow-medium) !important;
+  border: 1px solid rgba(0, 0, 0, 0.03) !important;
+}
+
+.modern-dropdown .dropdown-item {
+  padding: 0.4rem 0.8rem;
+  border-radius: 4px;
+  margin-bottom: 0;
+  transition: all 0.2s ease;
+  font-weight: var(--font-weight-light);
+  letter-spacing: 0.01em;
+}
+
+.modern-dropdown .dropdown-item:hover {
+  background-color: rgba(var(--bs-primary-rgb), 0.03);
+  color: var(--bs-primary);
+  transform: translateX(2px);
+}
+
+.modern-dropdown .dropdown-item.active {
+  background-color: rgba(var(--bs-primary-rgb), 0.05);
+  color: var(--bs-primary);
+  font-weight: var(--font-weight-regular);
+}
+
+.modern-dropdown .parent-item {
+  font-weight: var(--font-weight-regular);
+  color: var(--bs-primary);
+  letter-spacing: 0.01em;
+}
+
+.modern-dropdown .dropdown-divider {
+  margin: 0.1rem 0;
+  opacity: 0.1;
+}
+
+/* Mobile navbar improvements */
+@media (max-width: 991.98px) {
+  .modern-navbar {
+    padding: 0.5rem 0;
+  }
+
+  .navbar-collapse {
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    padding: 1rem;
+    margin-top: 1rem;
+  }
+
+  .navbar-nav .nav-item {
+    margin: 0.3rem 0;
+  }
+
+  .navbar-light .navbar-nav .nav-link {
+    padding: 0.8rem 1.2rem;
+  }
+
+  .navbar-light .navbar-nav .nav-link.dropdown-toggle {
+    padding-left: 2.2rem;
+  }
+
+  .navbar-light .navbar-nav .dropdown-toggle::after {
+    left: 0.8rem;
+    top: 55%;
+    transform: translateY(-50%);
+    z-index: -1;
+  }
+
+  .navbar-light .navbar-nav .active-link:after {
+    left: 1.2rem;
+    transform: none;
+    width: 30px;
+  }
+
+  .nav-btn {
+    margin-top: 0.5rem;
+    display: block;
+    text-align: center;
+  }
+
+  .modern-dropdown {
+    border: none !important;
+    box-shadow: none !important;
+    padding-left: 1rem;
+    animation: none;
+  }
+
+  .modern-dropdown .dropdown-item {
+    padding: 0.4rem 0.8rem;
+  }
+
+  .modern-dropdown .dropdown-item:hover {
+    transform: none;
+  }
+}
diff --git a/core/static/css/theme/newsletter.css b/core/static/css/theme/newsletter.css
new file mode 100644
index 0000000..7d1c28d
--- /dev/null
+++ b/core/static/css/theme/newsletter.css
@@ -0,0 +1,79 @@
+/* FEO GmbH Custom Bootstrap Theme - Newsletter
+ * Newsletter CTA and heading styling
+ */
+
+/* Newsletter CTA styling */
+.newsletter-cta {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(5px);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.newsletter-cta::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: linear-gradient(to right, var(--bs-primary), #2ecc71);
+}
+
+.newsletter-cta:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
+}
+
+.newsletter-heading {
+  color: white;
+  font-size: 1.2rem;
+  font-weight: var(--font-weight-medium);
+  letter-spacing: 0.02em;
+  margin-bottom: 0.5rem;
+}
+
+.newsletter-text {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.9rem;
+  line-height: 1.4;
+}
+
+.newsletter-cta .btn-primary {
+  padding: 0.6rem 1rem;
+  font-weight: var(--font-weight-regular);
+  letter-spacing: 0.02em;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+}
+
+.newsletter-cta .btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
+}
+
+/* Newsletter heading styling */
+.newsletter-heading-main {
+  color: var(--bs-primary) !important;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.3rem 0.5rem;
+  margin-left: -0.5rem;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.05);
+  animation: pulse 2s infinite;
+}
+
+.newsletter-heading-main::after {
+  background-color: var(--bs-primary) !important;
+  width: 60px !important;
+}
+
+.newsletter-heading-main i {
+  color: var(--bs-primary);
+  font-size: 1rem;
+}
diff --git a/core/static/css/theme/utilities.css b/core/static/css/theme/utilities.css
new file mode 100644
index 0000000..ab8dd83
--- /dev/null
+++ b/core/static/css/theme/utilities.css
@@ -0,0 +1,108 @@
+/* FEO GmbH Custom Bootstrap Theme - Utilities
+ * Scrollbar styling and other utilities
+ */
+
+/* Custom Scrollbar Styling */
+/* WebKit browsers (Chrome, Safari, Edge) */
+::-webkit-scrollbar {
+  width: var(--scrollbar-width);
+  height: var(--scrollbar-width);
+}
+
+::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 10px;
+  transition: background 0.3s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+}
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
+/* Image Tab styling */
+.image-tab-container {
+  margin: 1rem 0 2rem;
+}
+
+.image-tab-wrapper {
+  display: inline-block;
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+}
+
+.image-tab-wrapper:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
+}
+
+.image-tab-wrapper img {
+  border-radius: 8px;
+  transition: all 0.5s ease;
+}
+
+.image-tab-caption {
+  font-size: 0.9rem;
+  color: #666;
+  padding: 0.5rem 0;
+  font-style: italic;
+}
+
+/* Image size options */
+.image-size-small {
+  width: 25%;
+  min-width: 200px;
+}
+
+.image-size-medium {
+  width: 50%;
+  min-width: 300px;
+}
+
+.image-size-large {
+  width: 75%;
+  min-width: 400px;
+}
+
+.image-size-full {
+  width: 100%;
+}
+
+/* Responsive adjustments for image tabs */
+@media (max-width: 767.98px) {
+  .image-size-small,
+  .image-size-medium,
+  .image-size-large {
+    width: 100%;
+    min-width: auto;
+  }
+}
+
+/* Sponsor heading */
+.sponsor-heading {
+  padding-bottom: 0.75rem;
+  border-bottom: 2px solid rgba(var(--bs-primary-rgb), 0.1);
+}
+
+.sponsor-heading::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 50px;
+  height: 2px;
+  background-color: var(--bs-primary);
+}
diff --git a/core/static/css/theme/variables.css b/core/static/css/theme/variables.css
new file mode 100644
index 0000000..4424ea7
--- /dev/null
+++ b/core/static/css/theme/variables.css
@@ -0,0 +1,51 @@
+/* FEO GmbH Custom Bootstrap Theme - Variables
+ * Root variables and color definitions
+ */
+
+:root {
+  --bs-primary: #82bb27;
+  --bs-primary-rgb: 114, 192, 44;
+  --box-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.03);
+  --box-shadow-medium: 0 3px 10px rgba(0, 0, 0, 0.05);
+  --font-weight-thin: 200;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --scrollbar-thumb: rgba(var(--bs-primary-rgb), 0.6);
+  --scrollbar-thumb-hover: var(--bs-primary);
+  --scrollbar-track: rgba(0, 0, 0, 0.05);
+  --scrollbar-width: 8px;
+}
+
+/* Override Bootstrap primary color */
+.btn-primary {
+  background-color: var(--bs-primary);
+  border-color: var(--bs-primary);
+}
+
+.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
+  background-color: #65ab27;
+  border-color: #65ab27;
+}
+
+.btn-outline-primary {
+  color: var(--bs-primary);
+  border-color: var(--bs-primary);
+}
+
+.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
+  background-color: var(--bs-primary);
+  border-color: var(--bs-primary);
+}
+
+.text-primary {
+  color: var(--bs-primary) !important;
+}
+
+.bg-primary {
+  background-color: var(--bs-primary) !important;
+}
+
+.border-primary {
+  border-color: var(--bs-primary) !important;
+}
diff --git a/core/templates/bootstrap5_base.html b/core/templates/bootstrap5_base.html
index 87eeae1..3e679ac 100644
--- a/core/templates/bootstrap5_base.html
+++ b/core/templates/bootstrap5_base.html
@@ -38,9 +38,9 @@
 
         <!-- Breadcrumbs -->
         {% if not self.url == site_root.url %}
-            <div class="bg-light py-4">
+            <div class="breadcrumb-section py-4">
                 <div class="container">
-                    <h1 class="h2 mb-3">{{ self.title }}</h1>
+                    <h1 class="h2">{{ self.title }}</h1>
                     <nav aria-label="breadcrumb">
                         {% bootstrap5_breadcrumbs %}
                     </nav>