diff --git a/assets/js/script.js b/assets/js/script.js
index a901b4a..24e8f1f 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -42,7 +42,7 @@
   });
 
   //Hero Slider
-  $('.hero-slider-items').slick({
+  $('.hero-slider').slick({
     autoplay: true,
     autoplaySpeed: 5000,
     pauseOnFocus: false,
diff --git a/assets/scss/_common.scss b/assets/scss/_common.scss
index e74009a..3797255 100644
--- a/assets/scss/_common.scss
+++ b/assets/scss/_common.scss
@@ -122,14 +122,6 @@ a h4 {
   }
 }
 
-.outline-0 {
-  outline: 0 !important;
-}
-
-.d-unset {
-  display: unset !important;
-}
-
 .bg-primary {
   background: $primary-color !important;
 }
@@ -170,60 +162,6 @@ a h4 {
   font-family: $secondary-font;
 }
 
-.mb-10 {
-  margin-bottom: 10px !important;
-}
-
-.mb-20 {
-  margin-bottom: 20px !important;
-}
-
-.mb-30 {
-  margin-bottom: 30px !important;
-}
-
-.mb-40 {
-  margin-bottom: 40px !important;
-}
-
-.mb-50 {
-  margin-bottom: 50px !important;
-}
-
-.mb-60 {
-  margin-bottom: 60px !important;
-}
-
-.mb-70 {
-  margin-bottom: 70px !important;
-}
-
-.mb-80 {
-  margin-bottom: 80px !important;
-}
-
-.mb-90 {
-  margin-bottom: 90px !important;
-}
-
-.mb-100 {
-  margin-bottom: 100px !important;
-}
-
-.pl-150 {
-  padding-left: 150px;
-}
-
-.zindex-1 {
-  z-index: 1;
-}
-
-.overflow-md-hidden {
-  @include desktop {
-    overflow: hidden;
-  }
-}
-
 .vertical-align-middle {
   vertical-align: middle;
 }
@@ -464,101 +402,4 @@ details[open] summary {
 
 .fb-tile-icon {
   font-size: 96px;
-}
-
-.img-slider{
-  position: relative;
-  margin: 10px;
-  width: 95%;
-  height: 500px;
-  background: #1D212B;
-}
-
-.img-slider .is-slide{
-  z-index: 1;
-  position: absolute;
-  width: 100%;
-  clip-path: circle(0% at 0 50%);
-}
-
-.img-slider .is-slide.active{
-  clip-path: circle(150% at 0 50%);
-  transition: 2s;
-  transition-property: clip-path;
-}
-
-.img-slider .is-slide img{
-  z-index: 1;
-  width: 100%;
-  border-radius: 5px;
-}
-
-.img-slider .is-navigation{
-  z-index: 2;
-  position: absolute;
-  display: flex;
-  bottom: 20px;
-  left: 50%;
-  border-radius: 10px;
-  transform: translateX(-50%);
-  background-color: #1a1a37;
-}
-
-.img-slider .is-navigation .is-btn{
-  background: rgba(255, 255, 255, 0.5);
-  width: 12px;
-  height: 12px;
-  margin: 10px;
-  border-radius: 50%;
-  cursor: pointer;
-}
-
-.img-slider .is-navigation .is-btn.active{
-  background: #2696E9;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-}
-
-@media (max-width: 820px){
-  .img-slider{
-    width: 600px;
-    height: 375px;
-  }
-
-  .img-slider .is-navigation{
-    bottom: 25px;
-  }
-
-  .img-slider .is-navigation .is-btn{
-    width: 10px;
-    height: 10px;
-    margin: 8px;
-  }
-}
-
-@media (max-width: 620px){
-  .img-slider{
-    width: 400px;
-    height: 250px;
-  }
-
-  .img-slider .is-navigation{
-    bottom: 15px;
-  }
-
-  .img-slider .is-navigation .is-btn{
-    width: 8px;
-    height: 8px;
-    margin: 6px;
-  }
-}
-
-@media (max-width: 420px){
-  .img-slider{
-    width: 320px;
-    height: 200px;
-  }
-
-  .img-slider .is-navigation{
-    bottom: 10px;
-  }
-}
+}
\ No newline at end of file
diff --git a/assets/scss/templates/_homepage.scss b/assets/scss/templates/_homepage.scss
index c34aa70..a8f2079 100644
--- a/assets/scss/templates/_homepage.scss
+++ b/assets/scss/templates/_homepage.scss
@@ -1,4 +1,3 @@
-/* banner feature */
 .feature-icon {
   font-size: 60px;
   color: $secondary-color;
@@ -41,18 +40,6 @@
   }
 }
 
-/* /banner feature */
-
-/* course */
-.card-btn {
-  font-size: 12px;
-  padding: 5px 10px;
-}
-
-.flex-basis-33 {
-  flex-basis: 33.3333%;
-}
-
 .hover-shadow {
   transition: .3s ease;
 
@@ -61,9 +48,6 @@
   }
 }
 
-/* /course */
-
-/* success story */
 .success-video {
   min-height: 300px;
 
@@ -138,57 +122,6 @@
   }
 }
 
-/* /success story */
-
-/* events */
-.card-date {
-  position: absolute;
-  background: $primary-color;
-  font-family: $secondary-font;
-  text-align: center;
-  padding: 10px;
-  color: $white;
-  top: 0;
-  left: 0;
-  text-transform: uppercase;
-
-  span {
-    font-size: 40px;
-  }
-}
-
-/* /events */
-
-/* footer */
-.input-wrapper {
-  position: relative;
-
-  button {
-    position: absolute;
-    right: 25px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-}
-
-.form-control {
-  height: 60px;
-  background: $white;
-  border-radius: 0;
-  padding-left: 25px;
-
-  &:focus {
-    border-color: $primary-color;
-    box-shadow: none;
-  }
-}
-
-.newsletter-block {
-  .form-control {
-    height: 90px;
-  }
-}
-
 .bg-footer {
   background-color: #182b45;
 }
@@ -202,5 +135,3 @@
   border-color: #494a43 !important;
   padding-top: 75px;
 }
-
-/* /footer */
diff --git a/config.yml b/config.yml
index ce7ccb4..94c0607 100644
--- a/config.yml
+++ b/config.yml
@@ -29,14 +29,14 @@ params:
     - media/zeichnung.webp
   plugins:
     css:
-      - https://assets.cantorgymnasium.de/bootstrap/v4/bootstrap.min.css
+      - https://assets.cantorgymnasium.de/bootstrap/v5/css/bootstrap.min.css
       - https://assets.cantorgymnasium.de/slick/v1.8/slick.css
       - https://assets.cantorgymnasium.de/venobox/v2/dist/venobox.min.css
       - https://assets.cantorgymnasium.de/fonts/mdi/v7/css/materialdesignicons.min.css
       - https://assets.cantorgymnasium.de/fonts/fira/fira.css
       - https://assets.cantorgymnasium.de/fonts/tilt-warp/tilt-warp.css
     js:
-      - https://assets.cantorgymnasium.de/bootstrap/v4/bootstrap.min.js
+      - https://assets.cantorgymnasium.de/bootstrap/v5/js/bootstrap.min.js
       - https://assets.cantorgymnasium.de/slick/v1.8/slick.min.js
       - https://assets.cantorgymnasium.de/lazyload/v17/dist/lazyload.min.js
     head_js:
diff --git a/content/german/projektwoche/2023.md b/content/german/projektwoche/2023.md
index 774b8ee..b4b7a28 100644
--- a/content/german/projektwoche/2023.md
+++ b/content/german/projektwoche/2023.md
@@ -252,9 +252,7 @@ tiles:
     icon: mdi mdi-bank-outline
     font_color: white
     content: >
-      <iframe id="pdf-js-viewer"
-      src="/plugins/pdfjs/web/viewer.html?file=%2Fmedia%2Fprojektwoche%2F2023%2Fp14%2FMedizin_Cantor.pdf"
-      title="webviewer" frameborder="0" width="100%" height="400vh"></iframe>
+      <iframe src="/media/projektwoche/2023/p14/Medizin_Cantor.pdf" width="100%" height="600vh"></iframe>
   - title: Wir fotografieren die Unendlichkeit
     bg_color: "#ccff66"
     icon: mdi mdi-camera-outline
diff --git a/content/german/schulchronik/_index.md b/content/german/schulchronik/_index.md
index bfcec28..fb05803 100644
--- a/content/german/schulchronik/_index.md
+++ b/content/german/schulchronik/_index.md
@@ -15,11 +15,11 @@ jedem Interessierten die wechselvolle Geschichte des GCG präsentiert.
 
 ---
 <div class="row">
-<div class="col-3">
+<div class="col-md-3 col-12">
 <img src="/media/schulchronik/cantor1.webp">
 </div>
-<div class="col-9">
-<h1>"Aus dem Paradies, das Cantor uns geschaffen, soll uns niemand vertreiben können."</h1>
+<div class="col-md-9 col-12">
+<p class="fs-1 fw-bold">"Aus dem Paradies, das Cantor uns geschaffen, soll uns niemand vertreiben können."</p>
 aus 'David Hilbert, Über das Unendliche', Math. Ann. 95
 </div>
 </div>
diff --git a/i18n/de.yaml b/i18n/de.yaml
index 1e6d120..8ce22af 100644
--- a/i18n/de.yaml
+++ b/i18n/de.yaml
@@ -10,9 +10,6 @@
 - id: contact_info
   translation: Kontaktdaten
 
-- id: subscribe_newsletter
-  translation: Newsletter abbonieren
-
 - id: subscribe
   translation: Abbonieren
 
diff --git a/layouts/_default/card-btn-ni.html b/layouts/_default/card-btn-ni.html
index 415c802..4eb96dd 100644
--- a/layouts/_default/card-btn-ni.html
+++ b/layouts/_default/card-btn-ni.html
@@ -1,6 +1,6 @@
 <div class="card border-primary rounded-0 hover-shadow mb-4">
   <div class="card-body">
-    <h4 class="card-title"><a href="{{ .Permalink }}">{{ .Title | truncate 20 }}</a></h4>
+    <h4 class="card-title"><a href="{{ .Permalink }}">{{ .Title | truncate 30 }}</a></h4>
     <a href="{{ .Permalink }}" class="btn btn-primary btn-sm" data-pagefind-ignore>{{ i18n "show_more"}}</a>
   </div>
 </div>
diff --git a/layouts/_default/card-ct.html b/layouts/_default/card-ct.html
index 1891efd..bbf30b2 100644
--- a/layouts/_default/card-ct.html
+++ b/layouts/_default/card-ct.html
@@ -1,8 +1,8 @@
 <div class="card border-primary rounded-0 hover-shadow mb-4">
   <a href="{{ .Permalink }}"><img class="card-img-top rounded-0" src="{{ .Params.Image | relURL }}" alt="{{ .Title }}"></a>
   <div class="card-body">
-    <div class="row col-12 mb-3"><i class="mdi mdi-bookmark-outline mr-2"></i>{{ .Params.category }}</div>
-    <h4 class="card-title"><a href="{{ .Permalink }}">{{ .Title | truncate 20 }}</a></h4>
+    <div class="row col-12 mb-3"><div class="col-1"><i class="mdi mdi-bookmark-outline me-2"></i></div><div class="col-11">{{ .Params.category }}</div></div>
+    <h4 class="card-title"><a href="{{ .Permalink }}">{{ .Title | truncate 30 }}</a></h4>
     <a href="{{ .Permalink }}" class="btn btn-primary btn-sm text-uppercase" data-pagefind-ignore>{{ i18n "read_more"}}</a>
   </div>
 </div>
diff --git a/layouts/_default/card.html b/layouts/_default/card.html
index 6ea460d..aa0dc25 100644
--- a/layouts/_default/card.html
+++ b/layouts/_default/card.html
@@ -2,13 +2,13 @@
   <a href="{{ .Permalink }}"><img class="card-img-top rounded-0" src="{{ .Params.image | relURL }}" alt="{{ .Title }}"></a>
   <div class="card-body">
     <div class="row mb-2">
-      <div class="col-6"><i class="mdi mdi-calendar-today mr-2"></i>{{ time.Format "02. Jan 2006" .PublishDate }}</div>
+      <div class="col-6"><i class="mdi mdi-calendar-today me-2"></i>{{ time.Format "02. Jan 2006" .PublishDate }}</div>
       <div class="col-6">
-        <i class="mdi mdi-fountain-pen-tip mr-2"></i>
+        <i class="mdi mdi-fountain-pen-tip me-2"></i>
         <a href="{{ `author` | relLangURL }}/{{ .Params.author | urlize }}">{{ .Params.author | title }}</a>
       </div>
     </div>
-    <h4 class="card-title"><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
+    <h4 class="card-title"><a href="{{ .Permalink }}">{{ .Title | truncate 30 }}</a></h4>
     <p class="card-text">{{ .Summary | truncate 100 }}</p>
     <a href="{{ .Permalink }}" class="btn btn-primary btn-sm" data-pagefind-ignore>{{ i18n "read_more" }}</a>
   </div>
diff --git a/layouts/_default/ganztag.html b/layouts/_default/ganztag.html
index b619005..52d7cd2 100644
--- a/layouts/_default/ganztag.html
+++ b/layouts/_default/ganztag.html
@@ -2,8 +2,8 @@
   <a href="{{ .Permalink }}"><img class="card-img-top rounded-0" src="{{ .Params.image | relURL }}" alt="{{ .Title }}"></a>
   <div class="card-body">
     <div class="container">
-      <div class="row mb-2"><i class="mdi mdi-calendar-today mr-2"></i>{{ .Params.schedule }}</div>
-      <div class="row mb-2"><i class="mdi mdi-crowd mr-2"></i>{{ .Params.class }}</div>
+      <div class="row mb-2"><div class="col-1"><i class="mdi mdi-calendar-today"></i></div><div class="col-11">{{ .Params.schedule }}</div></div>
+      <div class="row mb-2"><div class="col-1"><i class="mdi mdi-crowd"></i></div><div class="col-11">{{ .Params.class }}</div></div>
     </div>
     <h4 class="card-title"><a href="{{ .Permalink }}">{{ .Title | truncate 20 }}</a></h4>
     <a href="{{ .Permalink }}" class="btn btn-primary btn-sm" data-pagefind-ignore>{{ i18n "show_more"}}</a>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 88ac1b2..4958f46 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -11,17 +11,17 @@
           <div class="col-12">
             <div class="row mb-3">
               <div class="col-6 mb-md-0 text-light">
-                <span class="font-weight-bold mr-1">{{ i18n "posted_by" }}:</span>
+                <span class="fw-bold me-1">{{ i18n "posted_by" }}:</span>
                 <a href="{{ `author/` | relLangURL }}{{ .Params.Author | urlize }}">{{ .Params.author | title }}</a>
               </div>
               <div class="col-6 mb-3 mb-md-0 text-light">
-                <span class="font-weight-bold mr-1">{{ i18n "date" }}:</span>
+                <span class="fw-bold me-1">{{ i18n "date" }}:</span>
                 {{ time.Format "02. Jan 2006" .PublishDate }}
               </div>
           </div>
           <div class="row">
             <div class="col-12 mb-md-0 text-light">
-              <span class="font-weight-bold mr-1">{{ i18n "category" }}:</span>
+              <span class="fw-bold me-1">{{ i18n "category" }}:</span>
               {{ range $index, $elements:= .Params.categories }}
                 {{ if ne $index 0 }}, {{ end }}
                 <a href="{{ `categories/` | relLangURL }}{{ . | urlize | lower }}">{{ . | title }}</a>
diff --git a/layouts/anmeldeformular/list.html b/layouts/anmeldeformular/list.html
index 181bc92..2a1db74 100644
--- a/layouts/anmeldeformular/list.html
+++ b/layouts/anmeldeformular/list.html
@@ -6,37 +6,54 @@
       <div class="col-lg-8 mb-4 mb-lg-0">
         <form action="https://php.cantorgymnasium.de/formtools/process.php" method="post" enctype="multipart/form-data">
           <input type="hidden" name="form_tools_form_id" value="5" />
-          <div style="display:none">
+          <div hidden>
             <input type="text" name="bad_email" value="" />
           </div>
-          <input type="text" class="form-control mb-3" id="surname" name="visitor_surname" placeholder="Name (Schüler/in)" required>
-          <input type="text" class="form-control mb-3" id="name" name="visitor_name" placeholder="Vorname" required>
-          <label for="birthday">Geburtsdatum</label>
-          <input type="date" class="form-control mb-3" id="birthday" name="visitor_birthday" min="2005-01-01" required>
-          <div class="row">
-            <input type="text" class="form-control mb-3 col-lg-8 ml-3 mr-4" id="street" name="street" placeholder="Straße" required><input type="text" class="form-control mb-3 col-lg-3" id="house" name="house" placeholder="Hausnummer" required>
+          <div class="input-group">
+            <input type="text" class="form-control mb-3" id="surname" name="visitor_surname" placeholder="Name (Schüler/in)" required>
+            <input type="text" class="form-control mb-3" id="name" name="visitor_name" placeholder="Vorname" required>
           </div>
-          <input type="text" class="form-control mb-3" id="adresszusatz" name="adresszusatz" placeholder="Adresszusatz">
-          <div class="row">
-            <input type="text" inputmode="numeric" class="form-control mb-3 col-lg-5 ml-3 mr-4" id="zipcode" name="zipcode" placeholder="PLZ" pattern="[0-9]{5}" title="Postleitzahlen bestehen aus exakt 5 Ziffern" required><input type="text" class="form-control mb-3 col-lg-6" id="city" name="city" placeholder="Stadt" required> 
+          <div class="input-group mb-3">
+            <span class="input-group-text">Geburtsdatum</span>
+            <input type="date" class="form-control" id="birthday" name="visitor_birthday" min="2005-01-01" required>
+          </div>
+          <input type="text" class="form-control mb-3" id="street" name="street" placeholder="Straße" required>
+          <div class="input-group">
+            <input type="text" class="form-control mb-3" id="house" name="house" placeholder="Hausnummer" required>
+            <input type="text" class="form-control mb-3" id="adresszusatz" name="adresszusatz" placeholder="Adresszusatz">
+          </div>
+          <div class="input-group">
+            <input type="text" inputmode="numeric" class="form-control mb-3" id="zipcode" name="zipcode" placeholder="PLZ" pattern="[0-9]{5}" title="Postleitzahlen bestehen aus exakt 5 Ziffern" required>
+            <input type="text" class="form-control mb-3" id="city" name="city" placeholder="Stadt" required> 
           </div>
           <input type="text" class="form-control mb-3" id="landkreis" name="landkreis" placeholder="Landkreis">
-          <div class="row">
-            <input type="tel" class="form-control mb-3 col-lg-5 ml-3 mr-4" id="tpriv" name="tpriv" placeholder="Telefon privat"><input type="tel" class="form-control mb-3 col-lg-6" id="tdienstl" name="tdienstl" placeholder="Telefon dienstl.">
+          <div class="input-group">
+            <input type="tel" class="form-control mb-3" id="tpriv" name="tpriv" placeholder="Telefon privat">
+            <input type="tel" class="form-control mb-3" id="tdienstl" name="tdienstl" placeholder="Telefon dienstl.">
           </div>
           <input type="text" class="form-control mb-3" id="dpname" name="dpname" placeholder="Abweichender Elternname">
           <input type="text" class="form-control mb-3" id="grundschule" name="grundschule" placeholder="Grundschule" required>
           <input type="email" class="form-control mb-3" id="mail" name="visitor_email" placeholder="Ihre E-Mail Adresse" required>
           <textarea name="visitor_message" id="message" class="form-control mb-3" placeholder="Bemerkungen"></textarea>
-          <label for="zeugnis_1">Zeugnis (Vorderseite)</label>
-          <input type="file" class="form-control mb-3" id="zeugnis_1" name="zeugnis_1" accept="image/*,.pdf">
-          <label for="zeugnis_2">Zeugnis (Rückseite)</label>
-          <input type="file" class="form-control mb-3" id="zeugnis_2" name="zeugnis_2" accept="image/*,.pdf">
-          <label for="slbe">Schullaufbahnempfehlung</label>
-          <input type="file" class="form-control mb-3" id="slbe" name="slbe" accept="image/*,.pdf">
-          <input type="checkbox" id="accept" name="accept" required>
-          <label for="accept" class="mr-2">Hiermit melden wir unser Kind verbindlich zur Aufnahmeprüfung an.</label>
-          <button type="submit" value="send" class="btn btn-primary">{{ i18n "send" }}</button>
+          <div class="input-group mb-3">
+            <input type="file" class="form-control" id="zeugnis_1" name="zeugnis_1" accept="image/*,.pdf">
+            <span class="input-group-text">Zeugnis (Vorderseite)</span>
+          </div>
+          <div class="input-group mb-3">
+            <input type="file" class="form-control" id="zeugnis_2" name="zeugnis_2" accept="image/*,.pdf">
+            <span class="input-group-text">Zeugnis (Rückseite)</span>
+          </div>
+          <div class="input-group mb-3">
+            <input type="file" class="form-control" id="slbe" name="slbe" accept="image/*,.pdf">
+            <span class="input-group-text">Schullaufbahnempfehlung</span>
+          </div>
+          <div class="input-group">
+            <div class="input-group-text">
+              <input type="checkbox" class="form-check-input" id="accept" name="accept" required>
+            </div>
+            <span class="input-group-text">Hiermit melden wir unser Kind verbindlich zur Aufnahmeprüfung an.</span>
+            <button type="submit" value="send" class="btn btn-primary">{{ i18n "send" }}</button>
+          </div>
         </form>
       </div>
       <div class="col-lg-4">
diff --git a/layouts/author/list.html b/layouts/author/list.html
index e365ad8..0126fb0 100644
--- a/layouts/author/list.html
+++ b/layouts/author/list.html
@@ -18,7 +18,7 @@
                 <a href="{{ .Permalink }}" class="h4 mb-3 d-block">{{ .Title }}</a>
                 <p class="mb-0">{{ .Summary | truncate 100 }}</p>
               </div>
-              <div class="d-md-table-cell text-right pr-0 pr-md-4" data-pagefind-ignore>
+              <div class="d-md-table-cell text-end pe-0 pe-md-4" data-pagefind-ignore>
                 <a href="{{ .Permalink }}" class="btn btn-primary">{{ i18n "read_more"}}</a>
               </div>
             </div>
diff --git a/layouts/author/single.html b/layouts/author/single.html
index 450d66e..fff3de0 100644
--- a/layouts/author/single.html
+++ b/layouts/author/single.html
@@ -12,7 +12,7 @@
 			  <img class="rounded-circle img-fluid mb-4" src="https://www.gravatar.com/avatar/{{ md5 .Params.email }}?s=128&pg&d=identicon">
 			{{ end }}
 			<figcaption>
-			  <h4 class="font-weight-bold">{{ .Title }}</h4>
+			  <h4 class="fw-bold">{{ .Title }}</h4>
 			</figcaption>
 		  </figure>
 		  <hr>
diff --git a/layouts/forms/list.html b/layouts/forms/list.html
index 6e16aea..76a99f5 100644
--- a/layouts/forms/list.html
+++ b/layouts/forms/list.html
@@ -11,7 +11,7 @@
                 <a href="{{ .Permalink }}" class="h4 mb-3 d-block">{{ .Title }}</a>
                 <p class="mb-0">{{ .Summary | truncate 100 }}</p>
               </div>
-              <div class="d-md-table-cell text-right pr-0 pr-md-4" data-pagefind-ignore><a href="{{ .Permalink }}" class="btn btn-primary">{{ i18n "read_more"}}</a></div>
+              <div class="d-md-table-cell text-end pe-0 pe-md-4" data-pagefind-ignore><a href="{{ .Permalink }}" class="btn btn-primary">{{ i18n "read_more"}}</a></div>
             </div>
           {{ end }}
         </div>
diff --git a/layouts/forms/single.html b/layouts/forms/single.html
index f01a673..7ca6004 100644
--- a/layouts/forms/single.html
+++ b/layouts/forms/single.html
@@ -8,7 +8,7 @@
       </div>
     </div>
     <div class="row">
-      <div class="col-12 mb-50 content">
+      <div class="col-12 content">
         {{ range .Params.files }}
           <div class="container mb-0">
             <div class="card border-primary rounded-0 hover-shadow mb-4">
diff --git a/layouts/ganztagsangebote/single.html b/layouts/ganztagsangebote/single.html
index e65b0b5..16b190d 100644
--- a/layouts/ganztagsangebote/single.html
+++ b/layouts/ganztagsangebote/single.html
@@ -4,7 +4,7 @@
   <div class="container">
     <div class="row">
       <div class="col-12 mb-4">
-        <img style="height: 500px;width: 100%;object-fit: cover;" src="{{ .Params.image | relURL }}"
+        <img class="w-100" style="height: 600px;object-fit: cover;" src="{{ .Params.image | relURL }}"
           class="img-fluid w-100">
       </div>
     </div>
@@ -16,8 +16,8 @@
         <div class="row">
           <div class="col-lg-3 col-sm-6 mb-3 mb-sm-0">
             <div class="d-flex align-items-center">
-              <i class="mdi mdi-calendar-today-outline text-primary icon-md mr-2"></i>
-              <div class="text-left">
+              <i class="mdi mdi-calendar-today-outline text-primary icon-md me-2"></i>
+              <div class="text-start">
                 <h6 class="mb-0">{{ i18n "schedule" | upper }}</h6>
                 <p class="mb-0">{{ .Params.schedule }}</p>
               </div>
@@ -25,8 +25,8 @@
           </div>
           <div class="col-lg-3 col-sm-6 mb-3 mb-sm-0">
             <div class="d-flex align-items-center">
-              <i class="mdi mdi-timer-sand text-primary icon-md mr-2"></i>
-              <div class="text-left">
+              <i class="mdi mdi-timer-sand text-primary icon-md me-2"></i>
+              <div class="text-start">
                 <h6 class="mb-0">{{ i18n "duration" | upper }}</h6>
                 <p class="mb-0">{{ .Params.duration }}</p>
               </div>
@@ -34,8 +34,8 @@
           </div>
           <div class="col-lg-3 col-sm-6 mb-3 mb-sm-0">
             <div class="d-flex align-items-center">
-              <i class="mdi mdi-crowd text-primary icon-md mr-2"></i>
-              <div class="text-left">
+              <i class="mdi mdi-crowd text-primary icon-md me-2"></i>
+              <div class="text-start">
                 <h6 class="mb-0">{{ i18n "class" | upper }}</h6>
                 <p class="mb-0">{{ .Params.class }}</p>
               </div>
@@ -43,8 +43,8 @@
           </div>
           <div class="col-lg-3 col-sm-6 mb-3 mb-sm-0">
             <div class="d-flex align-items-center">
-              <i class="mdi mdi-map-marker-radius-outline text-primary icon-md mr-2"></i>
-              <div class="text-left">
+              <i class="mdi mdi-map-marker-radius-outline text-primary icon-md me-2"></i>
+              <div class="text-start">
                 <h6 class="mb-0">{{ i18n "room" | upper }}</h6>
                 <p class="mb-0">{{ .Params.room }}</p>
               </div>
diff --git a/layouts/index.html b/layouts/index.html
index 11aec55..a156b10 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -6,11 +6,10 @@
 {{ with $data.homepage.slider }}
 <section class="hero-section overlay bg-cover hero-default" data-background="{{ .bg_image | absURL }}">
   <div class="container">
-    <div class="hero-slider">
         <div class="row">
           <div class="col-md-12">
-            <h2 class="text-white">{{ $data.homepage.slider.title | markdownify }}</h2>
-            <div class="hero-slider-items">
+            <h2 class="text-white position-relative">{{ $data.homepage.slider.title | markdownify }}</h2>
+            <div class="hero-slider">
             {{ range .slider_item }}
               <div class="hero-slider-item">
                 <p class="text-muted mb-4" >{{ .content | markdownify }}</p>
@@ -21,7 +20,6 @@
             {{ end }}
             </div>
           </div>
-        </div>
     </div>
   </div>
 </section>
@@ -102,7 +100,7 @@
 {{ end }}
 
 {{ if $data.homepage.blog.enable }}
-<section class="mb-4">
+<section class="section-sm mb-4">
   <div class="container">
     <div class="row">
       <div class="col-12">
@@ -115,7 +113,7 @@
           <img class="card-img-top rounded-0" src="{{ $data.ausblick.image | relURL }}" alt="{{ $data.ausblick.title }}">
           <div class="card-body">
             <ul class="list-inline mb-3">
-              <li class="list-inline-item mr-3 ml-0"><i class="mdi mdi-fountain-pen-tip"></i> <a
+              <li class="list-inline-item me-3 ms-0"><i class="mdi mdi-fountain-pen-tip"></i> <a
                 href="{{ `author` | relLangURL }}/{{ $data.ausblick.author | urlize }}">{{ $data.ausblick.author | title }}</a></li>
             </ul>
               <h4 class="card-title">{{ $data.ausblick.title }}</h4>
@@ -143,7 +141,7 @@
       <div class="col-12">
         <div class="row feature-blocks bg-white justify-content-between">
           {{ range .feature_item }}
-          <div class="col-xl-5 mb-xl-5 mb-4 text-sm-left">
+          <div class="col-xl-5 mb-xl-5 mb-4">
             {{ with .image }}
               <img src="{{ . }}" class="mb-xl-4 mb-lg-3 mb-4 feature-icon"></img>
             {{ end }}
@@ -170,10 +168,10 @@
     <div class="row">
       <div class="col-12">
         <div class="d-flex align-items-center section-title justify-content-between">
-          <h2 class="mb-0 text-nowrap mr-3">{{ $data.homepage.ganztagsangebote.title }}</h2>
+          <h2 class="mb-0 text-nowrap me-3">{{ $data.homepage.ganztagsangebote.title }}</h2>
           <div class="border-top w-100 border-primary d-none d-sm-block"></div>
           <div>
-            <a href="{{ `ganztagsangebote` | relLangURL }}" class="btn btn-sm btn-primary-outline ml-sm-3 d-none d-sm-block">{{ i18n "see_all" }}</a>
+            <a href="{{ `ganztagsangebote` | relLangURL }}" class="btn btn-sm btn-primary-outline ms-sm-3 d-none d-sm-block">{{ i18n "see_all" }}</a>
           </div>
         </div>
       </div>
@@ -224,10 +222,10 @@
     <div class="row">
       <div class="col-12">
         <div class="d-flex align-items-center section-title justify-content-between">
-          <h2 class="mb-0 text-nowrap mr-3">{{ $data.homepage.termine.title }}</h2>
+          <h2 class="mb-0 text-nowrap me-3">{{ $data.homepage.termine.title }}</h2>
           <div class="border-top w-100 border-primary d-none d-sm-block"></div>
           <div>
-            <a href="{{`termine` | relLangURL }}" class="btn btn-sm btn-primary-outline ml-sm-3 d-none d-sm-block text-nowrap">{{ i18n "all_events" }}</a>
+            <a href="{{`termine` | relLangURL }}" class="btn btn-sm btn-primary-outline ms-sm-3 d-none d-sm-block text-nowrap">{{ i18n "all_events" }}</a>
           </div>
         </div>
       </div>
@@ -244,7 +242,7 @@
       {{ end }}
 
       {{ range first 3 $events }}
-      <li class="d-md-table mb-4 w-100 border-bottom hover-shadow">
+      <li class="d-md-table mb-4 w-100 border-bottom hover-shadow ps-0">
         <div class="d-md-table-cell text-center p-4 bg-primary text-white mb-4 mb-md-0 termin-tc">
           <span class="h2 d-block">{{ time.Format "2" .date}}</span>
           <span class="d-block">{{ time.Format "Jan 2006" .date}}</span>
@@ -257,9 +255,9 @@
           <p class="h4 mb-0 d-block">{{ .title }}</p>
         </div>
         {{ with .location }}
-        <div class="d-md-table-cell text-right pr-0 pr-md-4 p-2 vertical-align-middle">
+        <div class="d-md-table-cell text-end pe-0 pe-md-4 p-2 vertical-align-middle">
           <p>
-            <i class="mdi mdi-map-marker-radius-outline icon-s text-primary mr-2"></i>
+            <i class="mdi mdi-map-marker-radius-outline icon-s text-primary me-2"></i>
             {{ . | markdownify }}
           </p>
         </div>
diff --git a/layouts/kontakt/list.html b/layouts/kontakt/list.html
index 52f7b7b..f7e9487 100644
--- a/layouts/kontakt/list.html
+++ b/layouts/kontakt/list.html
@@ -22,7 +22,7 @@ crossorigin=""/>
       <div class="col-lg-6 mb-4 mb-lg-0">
         <form action="https://php.cantorgymnasium.de/formtools/process.php" method="post">
           <input type="hidden" name="form_tools_form_id" value="2" />
-          <div style="display:none">
+          <div hidden>
             <input type="text" name="bad_email" value="" />
           </div>
           <input type="text" class="form-control mb-3" id="name" name="visitor_name" placeholder="Ihr Name">
diff --git a/layouts/partials/blog-sidebar.html b/layouts/partials/blog-sidebar.html
index 989e107..b8c2307 100644
--- a/layouts/partials/blog-sidebar.html
+++ b/layouts/partials/blog-sidebar.html
@@ -28,9 +28,9 @@
   <div class="bg-white">
     <h4 class="mb-4">{{ i18n "latest_article" }}</h4>
     {{ range first 5 ( where .Site.Pages "Type" "post" )}}
-    <div class="media border-bottom border-color pb-3 mb-3">
-      <a href="{{ .Permalink }}"><img class="mr-3 post-thumb-sm" src="{{ .Params.Image | absURL }}"></a>
-      <div class="media-body">
+    <div class="d-flex border-bottom border-color pb-3 mb-3">
+      <a href="{{ .Permalink }}"><img class="me-3 post-thumb-sm" src="{{ .Params.Image | absURL }}"></a>
+      <div class="flex-grow-1">
         <a href="{{ .Permalink }}">
           <h5 class="mt-0">{{ .Title }}</h5>
         </a>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 1c0629f..4315ac4 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -48,10 +48,10 @@
   <div class="copyright py-4 bg-footer">
     <div class="container">
       <div class="row">
-        <div class="col-sm-7 text-sm-left text-center">
+        <div class="col-sm-7 text-sm-start text-center">
           <p class="mb-0">{{ .Site.Params.copyright | markdownify | emojify }}</p>
         </div>
-        <div class="col-sm-5 text-sm-right text-center">
+        <div class="col-sm-5 text-smend text-center">
           <ul class="list-inline">
             {{ range .Site.Params.social }}
             <li class="list-inline-item"><a class="d-inline-block p-2" href="{{ .link | safeURL }}"><i class="{{ .icon }} text-primary"></i></a></li>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index d5f30f7..fae7f3c 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -61,14 +61,12 @@
 
 </head>
 
-<div id="pagefind-search" class="modal" data-pagefind-ignore>
+<div id="pagefind-search" class="modal fade" data-pagefind-ignore>
   <div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">Suche</h3>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-pagefind-ignore>
-          <span aria-hidden="true">&times;</span>
-        </button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" data-pagefind-ignore></button>
       </div>
       <div class="modal-body">
         <div class="content">
diff --git a/layouts/partials/header-cl-url.html b/layouts/partials/header-cl-url.html
index a1d19b6..2fcfdfa 100644
--- a/layouts/partials/header-cl-url.html
+++ b/layouts/partials/header-cl-url.html
@@ -10,15 +10,15 @@
     <div class="row mb-4">
       <div class="col-7">
         <div class="d-flex align-items-center">
-          <i class="mdi mdi-crowd text-primary icon-md mr-2"></i>
-          <div class="text-left">
+          <i class="mdi mdi-crowd text-primary icon-md me-2"></i>
+          <div class="text-start">
             <h6 class="mb-0">{{ i18n "class" | upper }}</h6>
             <p class="mb-0">{{ .Params.class }}</p>
           </div>
         </div>
       </div>
       {{ if .Params.web_url }}
-      <div class="col-5 text-right mb-4 mb-xl-0">
+      <div class="col-5 text-end mb-4 mb-xl-0">
         <a href="{{ .Params.web_url | safeURL }}" class="btn btn-primary">{{ i18n "website" }}</a>
       </div>
       {{ end }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index f841e96..1585acc 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -3,7 +3,7 @@
   <div class="top-header py-2 bg-white">
     <div class="container">
       <div class="row no-gutters align-items-center">
-        <div class="col-lg-4 text-center text-lg-left">
+        <div class="col-lg-4 text-center text-lg-start">
           <ul class="list-inline">
             {{ range .Site.Params.social }}
             <li class="list-inline-item mx-0"><a class="d-inline-block p-2 text-color" href="{{ .link | safeURL }}"><i
@@ -11,10 +11,10 @@
             {{ end }}
           </ul>
         </div>
-        <div class="col-lg-8 text-center text-lg-right">
+        <div class="col-lg-8 text-center text-lg-end">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <a class="text-color mr-3" href="tel:{{ .Site.Params.mobile }}"><strong>{{ i18n "call" | upper }} :
+              <a class="text-color me-3" href="tel:{{ .Site.Params.mobile }}"><strong>{{ i18n "call" | upper }} :
                 </strong> {{ .Site.Params.mobile }}</a>
             </li>
             <li class="list-inline-item">
@@ -39,7 +39,7 @@
         </button>
 
         <div class="collapse navbar-collapse text-center" id="navigation">
-          <ul class="navbar-nav ml-auto">
+          <ul class="navbar-nav ms-auto">
             <li class="nav-item">
               <a class="nav-link" href="{{ .Site.BaseURL | absLangURL }}">{{ .Site.Params.Home }}</a>
             </li>
diff --git a/layouts/partials/modal.html b/layouts/partials/modal.html
index 7008772..2ef8b07 100644
--- a/layouts/partials/modal.html
+++ b/layouts/partials/modal.html
@@ -1,16 +1,26 @@
-<div id="{{ md5 .title }}" class="modal">
+<div id="{{ md5 .title }}" class="modal fade">
   <div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <h3 class="modal-title">{{ .title }}</h3>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-pagefind-ignore>
-          <span aria-hidden="true">&times;</span>
-        </button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" data-pagefind-ignore></button>
       </div>
       <div class="modal-body">
-        <div class="content">
+        <div class="content mb-4">
         {{ .content | markdownify }}
         </div>
+        {{ range .unterhaufen }}
+          <div class="container mb-0">
+                  <div class="card border-primary rounded-0 hover-shadow mb-2">
+                    <div class="card-body mb-0">
+                      <details class="mb-0">
+                      <summary class="mb-0">{{ .title }}</summary>
+                      <div class="content"><p class="content">{{ .content | markdownify }}</p></div>
+                      </details>
+                    </div>
+                  </div>
+                </div>
+          {{ end }}
       </div>
     </div>
   </div>
diff --git a/layouts/partials/page-header.html b/layouts/partials/page-header.html
index 5e74602..26ca972 100644
--- a/layouts/partials/page-header.html
+++ b/layouts/partials/page-header.html
@@ -1,7 +1,7 @@
 <section class="page-title-section overlay" style="background-image: url('{{ .Params.Bg_image | relURL}}'),url('{{`media/backgrounds/page-title.webp`| relURL}}');" >
   <div class="container">
     <div class="row">
-      <div class="col-md-8">
+      <div class="col-md-8 position-relative">
         <ul class="list-inline">
           <li class="list-inline-item h2" data-pagefind-ignore><a class="text-primary font-secondary" href="{{ if .Params.Previous.enable }}{{ .Params.Previous.link }}{{ else if .Parent.Page }}{{ .Parent.Page.Permalink }}{{ else }}{{ .Site.baseURL | absLangURL }}{{ end }}">{{ if .Params.previous.enable }}{{ .Params.previous.title }}{{ else }}{{ with .Parent.Params.title }}{{.}}{{ else }}{{ .Site.Params.home }}{{ end }}{{ end }}</a></li>
           <li class="list-inline-item h2"><i class="mdi mdi-chevron-double-right text-white"></i></li>
diff --git a/layouts/schulchronik/single.html b/layouts/schulchronik/single.html
index 53b3bbb..21c17ba 100644
--- a/layouts/schulchronik/single.html
+++ b/layouts/schulchronik/single.html
@@ -9,9 +9,9 @@
         <h2 class="mb-3">{{ i18n "cantorpreisträger" }}</h2>
         {{ range where (where .Site.RegularPages "Title" .Params.Title ) "Type" "=" "cantorpreis" }}
         <div class="d-flex justify-content-between align-items-center flex-wrap">
-          <div class="media mb-2 mb-sm-0 align-items-center">
-            <img class="mr-4 img-fluid person-thumb-sm" src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
-            <div class="media-body">
+          <div class="d-flex mb-2 mb-sm-0 align-items-center">
+            <img class="me-4 img-fluid person-thumb-sm" src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
+            <div class="flex-grow-1">
               <h4 class="mt-0"><a href="{{ .Permalink }}">{{ .Params.Name }}</a></h4>
               {{ .Description }}
             </div>
@@ -58,12 +58,9 @@
               color: function (word, weight) {
                 return (weight === 200) ? '#ffbc3b' : '#1a1a37';
               },
-              hover: function(item, dimension, event) {
-                console.log("item:", item);
-                console.log("dimension:", dimension);
-                console.log("event:", event);
+              /* hover: function(item, dimension, event) {
                 item && item[2] ? event.target.style.textDecorationLine = "underline" : null
-              },
+              },*/
               fontFamily: 'Tilt Warp, serif',
               fontWeight: 700,
               list: JSON.parse("{{ $topics }}"),
diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html
index c5fe1cb..d49093e 100644
--- a/layouts/shortcodes/gallery.html
+++ b/layouts/shortcodes/gallery.html
@@ -7,7 +7,7 @@
 	  {{ if $isimg }}
 	    {{ $linkURL := print (trim $.Site.BaseURL "/") "/" $dir "/" .Name | absURL }}
 	    <div class="col-lg-3 col-md-4 col-sm-6">
-		  <a class="vb-gallery" data-gall="{{ md5 $dir }}" href="{{ $linkURL }}"><img class="lazy img-thumbnail" style="width: 100%;height:100%;object-fit: cover;" data-src="{{ $linkURL }}"></a>
+		  <a class="vb-gallery" data-gall="{{ md5 $dir }}" href="{{ $linkURL }}"><img class="lazy img-thumbnail w-100 h-100" style="object-fit: cover;" data-src="{{ $linkURL }}"></a>
 	    </div>
 	  {{ end }}
     {{ end }}
diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html
index 2864da0..9f7ddbc 100644
--- a/layouts/shortcodes/image.html
+++ b/layouts/shortcodes/image.html
@@ -1,3 +1,3 @@
 <div class="col-lg-3 col-md-4 col-sm-6">
-  <a class="vb-gallery" data-gall='{{ md5 (.Get "src") }}' href='{{ .Get "src" }}'><img class="lazy img-thumbnail" style="width: 100%;height:100%;object-fit: cover;" data-src='{{ .Get "src" }}'></a>
+  <a class="vb-gallery" data-gall='{{ md5 (.Get "src") }}' href='{{ .Get "src" }}'><img class="lazy img-thumbnail w-100 h-100" style="object-fit: cover;" data-src='{{ .Get "src" }}'></a>
 </div>
\ No newline at end of file
diff --git a/layouts/shortcodes/slider.html b/layouts/shortcodes/slider.html
index c22a2e8..bf1c517 100644
--- a/layouts/shortcodes/slider.html
+++ b/layouts/shortcodes/slider.html
@@ -1,75 +1,44 @@
-<div class="img-slider">
-	{{- with (.Get "dir") -}}
-		{{- $files := readDir (print "/static/" .) }}
-		{{- range $index, $file := $files -}}
-			{{- $isimg := lower $file.Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)" }}
-			{{- if $isimg }}
-				{{- $linkURL := print $.Site.BaseURL "/" ($.Get "dir") "/" $file.Name | absURL }}
-                <div class="is-slide {{if eq $index 0 }}active{{end}}">
-                    <img src="{{ $linkURL }}" alt="">
-                </div>            
-			{{- end }}
-		{{- end }}
-	{{- end }}
-    <div class="is-navigation">
-        <div class="is-btn active"></div>
-        <div class="is-btn"></div>
-        <div class="is-btn"></div>
-        <div class="is-btn"></div>
+<div class="carousel carousel-dark slide" data-bs-ride="true" id='slider-{{ md5 (.Get "dir") }}'>
+  {{ $dir := (.Get "dir") }}
+  {{ with $dir }}
+		{{ $files := readDir (print "/static/" .) }}
+    <div class="carousel-indicators">
+    {{ range $index, $file := $files }}
+      {{ $isimg := lower $file.Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)" }}
+      {{ if $isimg }}
+        {{ $linkURL := print $.Site.BaseURL "/" ($.Get "dir") "/" $file.Name | absURL }}
+        {{ if eq $index 0 }}
+        <button type="button" data-bs-target="#slider-{{ md5 $dir }}" data-bs-slide-to="{{ $index }}" class="active"></button>
+        {{ else }}
+        <button type="button" data-bs-target="#slider-{{ md5 $dir }}" data-bs-slide-to="{{ $index }}"></button>
+        {{ end }}
+      {{ end }}
+    {{ end }}
     </div>
-</div>
-<script type="text/javascript">
-    var slides = document.querySelectorAll('.is-slide');
-    var btns = document.querySelectorAll('.is-btn');
-    let currentSlide = 1;
-
-    // Javascript for image slider manual navigation
-    var manualNav = function(manual){
-      slides.forEach((slide) => {
-        slide.classList.remove('active');
-
-        btns.forEach((btn) => {
-          btn.classList.remove('active');
-        });
-      });
-
-      slides[manual].classList.add('active');
-      btns[manual].classList.add('active');
-    }
-
-    btns.forEach((btn, i) => {
-      btn.addEventListener("click", () => {
-        manualNav(i);
-        currentSlide = i;
-      });
-    });
-
-    // Javascript for image slider autoplay navigation
-    var repeat = function(activeClass){
-      let active = document.getElementsByClassName('active');
-      let i = 1;
-
-      var repeater = () => {
-        setTimeout(function(){
-          [...active].forEach((activeSlide) => {
-            activeSlide.classList.remove('active');
-          });
-
-        slides[i].classList.add('active');
-        btns[i].classList.add('active');
-        i++;
-
-        if(slides.length == i){
-          i = 0;
-        }
-        if(i >= slides.length){
-          return;
-        }
-        repeater();
-    /// Time in ms
-      }, 5000);
-      }
-      repeater();
-    }
-    repeat();
-    </script>
+    <div class="carousel-inner">
+      {{ range $index, $file := $files }}
+			{{ $isimg := lower $file.Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)" }}
+			{{ if $isimg }}
+				{{ $linkURL := print $.Site.BaseURL "/" ($.Get "dir") "/" $file.Name | absURL }}
+        {{ if eq $index 0 }}
+        <div class="carousel-item active">
+          <img src="{{ $linkURL }}" class="d-block w-100">
+        </div>
+        {{ else }}
+        <div class="carousel-item">
+          <img src="{{ $linkURL }}" class="d-block w-100">
+        </div>
+        {{ end }}
+			{{ end }}
+		{{ end }}
+    </div>
+	{{ end }}
+  <button class="carousel-control-prev" type="button" data-bs-target="#slider-{{ md5 $dir }}" data-bs-slide="prev">
+    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Zurück</span>
+  </button>
+  <button class="carousel-control-next" type="button" data-bs-target="#slider-{{ md5 $dir }}" data-bs-slide="next">
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Vor</span>
+  </button>
+</div>
\ No newline at end of file
diff --git a/layouts/shortcodes/youtube.html b/layouts/shortcodes/youtube.html
index 81168e0..a63ac42 100644
--- a/layouts/shortcodes/youtube.html
+++ b/layouts/shortcodes/youtube.html
@@ -4,7 +4,7 @@
 {{- $id := .Get "id" | default (.Get 0) -}}
 {{- $class := .Get "class" | default (.Get 1) -}}
 {{- $title := .Get "title" | default "YouTube Video" }}
-<div {{ with $class }}class="{{ . }}"{{ else }}style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"{{ end }}>
+<div {{ with $class }}class="{{ . }}" {{ else }} style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"{{ end }}>
   <iframe src="https://{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}" {{ if not $class }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" {{ end }}allowfullscreen title="{{ $title }}"></iframe>
 </div>
 {{ end -}}
\ No newline at end of file
diff --git a/layouts/termine/list.html b/layouts/termine/list.html
index 1e04d78..3f1a0db 100644
--- a/layouts/termine/list.html
+++ b/layouts/termine/list.html
@@ -32,8 +32,8 @@
               <p class="h4 mb-0 d-block">{{ .title }}</p>
             </div>
             {{ with .location }}
-            <div class="d-md-table-cell text-right pr-0 pr-md-4 p-2 vertical-align-middle border-bottom">
-              <p><i class="mdi mdi-map-marker-radius-outline icon-s text-primary mr-2"></i>{{ . | markdownify }}</p>
+            <div class="d-md-table-cell text-end pe-0 pe-md-4 p-2 vertical-align-middle border-bottom">
+              <p><i class="mdi mdi-map-marker-radius-outline icon-s text-primary me-2"></i>{{ . | markdownify }}</p>
             </div>
             {{ end }}
           </li>
diff --git a/static/admin/index.html b/static/admin/index.html
index 8662725..9d04e5a 100644
--- a/static/admin/index.html
+++ b/static/admin/index.html
@@ -323,7 +323,7 @@
       });
     </script>
     <script id="preview-styles">
-      CMS.registerPreviewStyle("https://assets.cantorgymnasium.de/bootstrap/v4/bootstrap.min.css");
+      CMS.registerPreviewStyle("https://assets.cantorgymnasium.de/bootstrap/v5/css/bootstrap.min.css");
       CMS.registerPreviewStyle("https://assets.cantorgymnasium.de/fonts/fira/fira.css");
       CMS.registerPreviewStyle("https://assets.cantorgymnasium.de/fonts/mdi/v7/css/materialdesignicons.min.css");
       CMS.registerPreviewStyle("https://cantorgymnasium.de/scss/style.css");
@@ -474,7 +474,7 @@
                       h('div', {className: "row"},
                         widgetsFor('elements').map(function(element, index) {
                           return h('div', {className: "col-lg-4 col-sm-6 mb-4"},
-                            h('div', {className: "card rounded-0 hover-shadow border-top-0 border-left-0 border-right-0"},
+                            h('div', {className: "card rounded-0 hover-shadow border-top-0 border-start-0 border-end-0"},
                               h('div', {className: "card-body"},
                                 h('h4', {className: "card-title mb-3"}, element.data.title),
                                 h('div', {className: "content"}, element.widgets.content))));
@@ -513,9 +513,9 @@
                                 h('div', {className: "d-md-table-cell px-4 vertical-align-middle mb-4 mb-md-0 p-2"},
                                   h('p', {className: "h4 mb-0 d-block"}, event.data.title)),
                                 event.data.location != null && event.data.location != "" ?
-                                h('div', {className: "d-md-table-cell text-right pr-0 pr-md-4 p-2 vertical-align-middle"},
+                                h('div', {className: "d-md-table-cell text-end pe-0 pe-md-4 p-2 vertical-align-middle"},
                                   h('p', {},
-                                    h('i', {className: "mdi mdi-map-marker-radius-outline icon-s text-primary mr-2"}), event.data.location)) : null);
+                                    h('i', {className: "mdi mdi-map-marker-radius-outline icon-s text-primary me-2"}), event.data.location)) : null);
                             })))))));
       };
     CMS.registerPreviewTemplate("event-index", EventPreview);
@@ -596,16 +596,16 @@
                         ),
                         h('div', {className: "col-12"},
                           h('ul', {className: "list-inline"},
-                            h('li', {className: "list-inline-item mr-4 mb-3 mb-md-0 text-light"},
-                              h('span', {className: "font-weight-bold mr-2"}, "Geschrieben von:"),
+                            h('li', {className: "list-inline-item me-4 mb-3 mb-md-0 text-light"},
+                              h('span', {className: "fw-bold me-2"}, "Geschrieben von:"),
                               entry.data.author
                             ),
-                            h('li', { className: "list-inline-item mr-4 mb-3 mb-md-0 text-light" },
-                              h('span', { className: "font-weight-bold mr-2"}, "Datum:"), entry.data.date ?
+                            h('li', { className: "list-inline-item me-4 mb-3 mb-md-0 text-light" },
+                              h('span', { className: "fw-bold me-2"}, "Datum:"), entry.data.date ?
                               Intl.DateTimeFormat('de-De', { day: 'numeric', month: 'short', year: 'numeric'}).format(new Date(entry.data.date)) : ""
                             ),
-                            h('li', { className: "list-inline-item mr-4 mb-3 mb-md-0 text-light" },
-                              h('span', { className: "font-weight-bold mr-2"}, "Kategorie:"),
+                            h('li', { className: "list-inline-item me-4 mb-3 mb-md-0 text-light" },
+                              h('span', { className: "fw-bold me-2"}, "Kategorie:"),
                               entry.data.categories != null ? entry.data.categories.map((category, index) => {
                                 var text = (index != 0 ? ", " : "") + category;
                                 return text;
@@ -683,37 +683,37 @@
                     h('div', {className: "row align-items-center mb-5"},
                       h('div', {className: "col-xl-8 order-sm-3 order-xl-2 col-12 order-2"},
                         h('ul', {className: "list-inline"},
-                          h('li', {className: "list-inline-item mr-4 mb-3 mb-sm-0"},
+                          h('li', {className: "list-inline-item me-4 mb-3 mb-sm-0"},
                             h('div', {className: "d-flex align-items-center"},
-                              h('i', {className: "mdi mdi-calendar-today-outline text-primary icon-md mr-2"}),
-                              h('div', {className: "text-left"},
+                              h('i', {className: "mdi mdi-calendar-today-outline text-primary icon-md me-2"}),
+                              h('div', {className: "text-start"},
                                 h('h6', {className: "mb-0"}, "Zeit"),
                                 h('p', {className: "mb-0"}, entry.data.schedule)
                               )
                             )
                           ),
-                          h('li', { className: "list-inline-item mr-4 mb-3 mb-sm-0" },
+                          h('li', { className: "list-inline-item me-4 mb-3 mb-sm-0" },
                             h('div', {className: "d-flex align-items-center"},
-                              h('i', {className: "mdi mdi-timer-sand text-primary icon-md mr-2"}),
-                              h('div', {className: "text-left"},
+                              h('i', {className: "mdi mdi-timer-sand text-primary icon-md me-2"}),
+                              h('div', {className: "text-start"},
                                 h('h6', {className: "mb-0"}, "Dauer"),
                                 h('p', {className: "mb-0"}, entry.data.duration)
                               )
                             )
                           ),
-                          h('li', { className: "list-inline-item mr-4 mb-3 mb-sm-0" },
+                          h('li', { className: "list-inline-item me-4 mb-3 mb-sm-0" },
                             h('div', {className: "d-flex align-items-center"},
-                              h('i', {className: "mdi mdi-crowd text-primary icon-md mr-2"}),
-                              h('div', {className: "text-left"},
+                              h('i', {className: "mdi mdi-crowd text-primary icon-md me-2"}),
+                              h('div', {className: "text-start"},
                                 h('h6', {className: "mb-0"}, "Klassen(n)"),
                                 h('p', {className: "mb-0"}, entry.data.class)
                               )
                             )
                           ),
-                          h('li', { className: "list-inline-item mr-4 mb-3 mb-sm-0" },
+                          h('li', { className: "list-inline-item me-4 mb-3 mb-sm-0" },
                             h('div', {className: "d-flex align-items-center"},
-                              h('i', {className: "mdi mdi-map-marker-radius-outline text-primary icon-md mr-2"}),
-                              h('div', {className: "text-left"},
+                              h('i', {className: "mdi mdi-map-marker-radius-outline text-primary icon-md me-2"}),
+                              h('div', {className: "text-start"},
                                 h('h6', {className: "mb-0"}, "Raum"),
                                 h('p', {className: "mb-0"}, entry.data.room)
                               )
@@ -791,10 +791,10 @@
                     h('div', {className: "row align-items-center mb-5"},
                       h('div', {className: "col-xl-8 order-sm-2 order-xl-2 col-12 order-2 col-sm-6"},
                         h('ul', {className: "list-inline"},
-                          h('li', {className: "list-inline-item mr-4 mb-3 mb-sm-0"},
+                          h('li', {className: "list-inline-item me-4 mb-3 mb-sm-0"},
                             h('div', {className: "d-flex align-items-center"},
-                              h('i', {className: "mdi mdi-calendar-today-outline text-primary icon-md mr-2"}),
-                              h('div', {className: "text-left"},
+                              h('i', {className: "mdi mdi-calendar-today-outline text-primary icon-md me-2"}),
+                              h('div', {className: "text-start"},
                                 h('h6', {className: "mb-0"}, "Klasse(n)"),
                                 h('p', {className: "mb-0"}, entry.data.class)
                               )
@@ -802,7 +802,7 @@
                           ),
                         )
                       ),
-                      h('div', {className: "col-xl-2 text-left text-xl-right order-sm-3 order-3 order-xl-3 col-sm-6 col-12 mb-4 mb-xl-0"},
+                      h('div', {className: "col-xl-2 text-start text-xl-end order-sm-3 order-3 order-xl-3 col-sm-6 col-12 mb-4 mb-xl-0"},
                         h('a', {href: entry.data.web_url, className: "btn btn-primary"}, "Website")
                       ),
                       h('div', { className: "col-12 mt-4 order-4"},
diff --git a/static/schulchronik/admin/index.html b/static/schulchronik/admin/index.html
index ac95d87..929ffa8 100644
--- a/static/schulchronik/admin/index.html
+++ b/static/schulchronik/admin/index.html
@@ -310,7 +310,7 @@
       });
     </script>
     <script id="preview-styles">
-      CMS.registerPreviewStyle("https://assets.cantorgymnasium.de/bootstrap/v4/bootstrap.min.css");
+      CMS.registerPreviewStyle("https://assets.cantorgymnasium.de/bootstrap/v5/css/bootstrap.min.css");
       CMS.registerPreviewStyle("https://assets.cantorgymnasium.de/fonts/fira/fira.css");
       CMS.registerPreviewStyle("https://assets.cantorgymnasium.de/fonts/mdi/v7/css/materialdesignicons.min.css");
       CMS.registerPreviewStyle("https://cantorgymnasium.de/scss/style.css");