From f5f967a64b4187a07314628b3c9dd533cbd2b645 Mon Sep 17 00:00:00 2001
From: DrMaxNix <git@drmaxnix.de>
Date: Fri, 26 Jul 2024 14:00:12 +0200
Subject: [PATCH] :lipstick: fix copylinks starting under nav (fix #112)

---
 page/start/index.php    | 364 +++++++++++-----------
 page/style.css          |  63 ++--
 page/timeline/index.php | 648 +++++++++++++++++++++-------------------
 3 files changed, 559 insertions(+), 516 deletions(-)

diff --git a/page/start/index.php b/page/start/index.php
index 3d61bfa..401c069 100644
--- a/page/start/index.php
+++ b/page/start/index.php
@@ -62,198 +62,212 @@
 			<h2><?= $dict->get("page_title_h2") ?></h2>
 		</div>
 		
-		<div class="section">
-			<div id="why" class="content">
-				<div class="box">
-					<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("why_title") ?></span>
-					
-					<?php
-						$why_text = $dict->get("why_text");
-						foreach($why_text as $one_why_text_line){
-							echo("<span>" . $one_why_text_line . "</span>");
-						}
-					?>
-				</div>
-			</div>
-		</div>
-		
-		<div id="timeline" class="section">
-			<div class="header">
-				<span class="icon ti ti-clock"></span>
-				<span class="text"><?= $dict->get("timeline_moved_title") ?></span>
-				<button class="copylink ti ti-link"></button>
-			</div>
-			<div class="content">
-				<div class="box">
-					<?php
-						$timeline_moved_text = $dict->get("timeline_moved_text");
-						foreach($timeline_moved_text as $one_timeline_moved_text_line){
-							echo("<span>" . $one_timeline_moved_text_line . "</span>");
-						}
-					?>
-					
-					<div class="button-list">
-						<a href="<?= $dict->get("timeline_moved_link") ?>" class="button primary">
-							<span class="text"><?= $dict->get("timeline_moved_button") ?></span>
-							<span class="icon ti ti-chevron-right"></span>
-						</a>
+		<div id="why" class="wrapper copylink-id">
+			<div class="section">
+				<div class="content">
+					<div class="box">
+						<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("why_title") ?></span>
+						
+						<?php
+							$why_text = $dict->get("why_text");
+							foreach($why_text as $one_why_text_line){
+								echo("<span>" . $one_why_text_line . "</span>");
+							}
+						?>
 					</div>
 				</div>
 			</div>
 		</div>
 		
-		<div id="news" class="section">
-			<div class="header">
-				<span class="icon ti ti-bell"></span>
-				<span class="text"><?= $dict->get("news_title") ?></span>
-				<button class="copylink ti ti-link"></button>
-			</div>
-			<div class="content rows">
-				<div id="newsletter" class="box">
-					<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("news_newsletter_title") ?></span>
-					
-					<div id="newsletter-signup-form-container" class="form-container">
-						<div id="newsletter-signup-form" class="form">
-							<div class="key-value-pair">
-								<div class="key">
-									<span class="ti ti-at"></span>
-								</div>
-								<div class="value-list">
-									<div class="inputwrapper">
-										<input id="newsletter-signup-form-mail-address" class="value" type="text" placeholder="<?= $dict->get("news_newsletter_mail_address") ?>" autocomplete="off" />
-									</div>
-								</div>
-							</div>
-							
-							<div class="key-value-pair">
-								<div class="key">
-									<span class="ti ti-world"></span>
-								</div>
-								<div class="value-list">
-									<div id="newsletter-signup-form-language" class="value switch" data-selected="<?= $lang->get() ?>">
-										<?php foreach(["de", "en"] as $one_lang){ ?>
-											<button class="option" data-value="<?= $one_lang ?>">
-												<span class="text"><?= strtoupper($one_lang) ?></span>
-											</button>
-										<?php } ?>
-									</div>
-								</div>
-							</div>
-							
-							<button id="newsletter-signup-form-submit" class="button primary">
-								<span class="text"><?= $dict->get("news_newsletter_subscribe") ?></span>
+		<div id="timeline" class="wrapper copylink-id">
+			<div class="section">
+				<div class="header">
+					<span class="icon ti ti-clock"></span>
+					<span class="text"><?= $dict->get("timeline_moved_title") ?></span>
+					<button class="copylink ti ti-link"></button>
+				</div>
+				<div class="content">
+					<div class="box">
+						<?php
+							$timeline_moved_text = $dict->get("timeline_moved_text");
+							foreach($timeline_moved_text as $one_timeline_moved_text_line){
+								echo("<span>" . $one_timeline_moved_text_line . "</span>");
+							}
+						?>
+						
+						<div class="button-list">
+							<a href="<?= $dict->get("timeline_moved_link") ?>" class="button primary">
+								<span class="text"><?= $dict->get("timeline_moved_button") ?></span>
 								<span class="icon ti ti-chevron-right"></span>
-							</button>
+							</a>
 						</div>
-						
-						<div id="newsletter-signup-form-feedback" class="form-feedback gone">
-							<div id="newsletter-signup-form-feedback-wait" class="form-feedback-wait centertext gone">
-								<span class="icon spinning ti ti-loader-2"></span>
-								<span class="text"><?= $dict->get("news_newsletter_feedback_wait") ?></span>
-							</div>
-							<div id="newsletter-signup-form-feedback-success" class="form-feedback-success centertext gone">
-								<span class="icon ti ti-check"></span>
-								<span class="text"><?= $dict->get("news_newsletter_feedback_success") ?></span>
-							</div>
-							<div id="newsletter-signup-form-feedback-failure" class="form-feedback-failure centertext gone">
-								<span class="icon ti ti-x"></span>
-								<span class="text"><?= $dict->get("news_newsletter_feedback_failure") ?></span>
-							</div>
-						</div>
-					</div>
-					
-					<span class="inline"><?= $dict->get("news_newsletter_process_description") ?></span>
-					
-					<span class="inline gray"><?= $dict->get("news_newsletter_note") ?></span>
-				</div>
-				
-				<div id="social-media" class="box">
-					<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("news_social_media_title") ?></span>
-					
-					<div class="button-list">
-						<a href="https://www.instagram.com/sbgg.jetzt" target="_blank" class="button">
-							<span class="icon big ti ti-brand-instagram"></span>
-							<div class="text">
-								<span>Instagram</span>
-								<span class="gray">@sbgg.jetzt</span>
-							</div>
-							<span class="icon ti ti-external-link"></span>
-						</a>
-						
-						<a href="https://lsbt.me/@sbggjetzt" target="_blank" class="button">
-							<span class="icon big ti ti-brand-mastodon"></span>
-							<div class="text">
-								<span>Mastodon</span>
-								<span class="gray">@sbggjetzt@lsbt.me</span>
-							</div>
-							<span class="icon ti ti-external-link"></span>
-						</a>
 					</div>
 				</div>
 			</div>
 		</div>
 		
-		<div id="recommendations" class="section">
-			<div class="header">
-				<span class="icon ti ti-comet"></span>
-				<span class="text"><?= $dict->get("recommendations_title") ?></span>
-				<button class="copylink ti ti-link"></button>
-			</div>
-			<div class="content">
-				<div class="card-list">
-					<a href="https://pstg45b.de" class="card">
-						<img src="<?= File::file("../sbgg.jetzt-proprietary-assets/asset/pstg45bde.png") ?>" />
-						<div class="text">
-							<span class="title"><?= $dict->get("recommendations_pstg45bde_title") ?></span>
-							<span class="description"><?= $dict->get("recommendations_pstg45bde_description") ?></span>
-						</div>
-					</a>
-					
-					<a href="https://blahaj.academy" class="card">
-						<img src="<?= File::file("../sbgg.jetzt-proprietary-assets/asset/blahajacademy.png") ?>" />
-						<div class="text">
-							<span class="title"><?= $dict->get("recommendations_blahajacademy_title") ?></span>
-							<span class="description"><?= $dict->get("recommendations_blahajacademy_description") ?></span>
-						</div>
-					</a>
-					
-					<a href="https://sbgg.info/" class="card">
-						<img src="<?= File::file("../sbgg.jetzt-proprietary-assets/asset/sbgginfo.jpg") ?>" class="rounded" />
-						<div class="text">
-							<span class="title"><?= $dict->get("recommendations_sbgginfo_title") ?></span>
-							<span class="description"><?= $dict->get("recommendations_sbgginfo_description") ?></span>
-						</div>
-					</a>
+		<div id="news" class="wrapper copylink-id">
+			<div class="section">
+				<div class="header">
+					<span class="icon ti ti-bell"></span>
+					<span class="text"><?= $dict->get("news_title") ?></span>
+					<button class="copylink ti ti-link"></button>
+				</div>
+				<div class="content rows">
+					<div id="newsletter" class="wrapper copylink-id">
+						<div class="box">
+							<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("news_newsletter_title") ?></span>
+							
+							<div id="newsletter-signup-form-container" class="form-container">
+								<div id="newsletter-signup-form" class="form">
+									<div class="key-value-pair">
+										<div class="key">
+											<span class="ti ti-at"></span>
+										</div>
+										<div class="value-list">
+											<div class="inputwrapper">
+												<input id="newsletter-signup-form-mail-address" class="value" type="text" placeholder="<?= $dict->get("news_newsletter_mail_address") ?>" autocomplete="off" />
+											</div>
+										</div>
+									</div>
+									
+									<div class="key-value-pair">
+										<div class="key">
+											<span class="ti ti-world"></span>
+										</div>
+										<div class="value-list">
+											<div id="newsletter-signup-form-language" class="value switch" data-selected="<?= $lang->get() ?>">
+												<?php foreach(["de", "en"] as $one_lang){ ?>
+													<button class="option" data-value="<?= $one_lang ?>">
+														<span class="text"><?= strtoupper($one_lang) ?></span>
+													</button>
+												<?php } ?>
+											</div>
+										</div>
+									</div>
+									
+									<button id="newsletter-signup-form-submit" class="button primary">
+										<span class="text"><?= $dict->get("news_newsletter_subscribe") ?></span>
+										<span class="icon ti ti-chevron-right"></span>
+									</button>
+								</div>
+								
+								<div id="newsletter-signup-form-feedback" class="form-feedback gone">
+									<div id="newsletter-signup-form-feedback-wait" class="form-feedback-wait centertext gone">
+										<span class="icon spinning ti ti-loader-2"></span>
+										<span class="text"><?= $dict->get("news_newsletter_feedback_wait") ?></span>
+									</div>
+									<div id="newsletter-signup-form-feedback-success" class="form-feedback-success centertext gone">
+										<span class="icon ti ti-check"></span>
+										<span class="text"><?= $dict->get("news_newsletter_feedback_success") ?></span>
+									</div>
+									<div id="newsletter-signup-form-feedback-failure" class="form-feedback-failure centertext gone">
+										<span class="icon ti ti-x"></span>
+										<span class="text"><?= $dict->get("news_newsletter_feedback_failure") ?></span>
+									</div>
+								</div>
+							</div>
+							
+							<span class="inline"><?= $dict->get("news_newsletter_process_description") ?></span>
+							
+							<span class="inline gray"><?= $dict->get("news_newsletter_note") ?></span>
+						</div>
+					</div>
+					
+					<div id="social-media" class="wrapper copylink-id">
+						<div class="box">
+							<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("news_social_media_title") ?></span>
+							
+							<div class="button-list">
+								<a href="https://www.instagram.com/sbgg.jetzt" target="_blank" class="button">
+									<span class="icon big ti ti-brand-instagram"></span>
+									<div class="text">
+										<span>Instagram</span>
+										<span class="gray">@sbgg.jetzt</span>
+									</div>
+									<span class="icon ti ti-external-link"></span>
+								</a>
+								
+								<a href="https://lsbt.me/@sbggjetzt" target="_blank" class="button">
+									<span class="icon big ti ti-brand-mastodon"></span>
+									<div class="text">
+										<span>Mastodon</span>
+										<span class="gray">@sbggjetzt@lsbt.me</span>
+									</div>
+									<span class="icon ti ti-external-link"></span>
+								</a>
+							</div>
+						</div>
+					</div>
 				</div>
-				
-				<span class="note inline gray"><?= $dict->get("recommendations_note") ?></span>
 			</div>
 		</div>
 		
-		<div id="about" class="section">
-			<div class="header">
-				<span class="icon ti ti-heart"></span>
-				<span class="text"><?= $dict->get("about_title") ?></span>
-				<button class="copylink ti ti-link"></button>
-			</div>
-			<div class="content">
-				<div class="box">
-					<?php
-						$about_text = $dict->get("about_text");
-						foreach($about_text as $one_about_text_line){
-							echo("<span>" . $one_about_text_line . "</span>");
-						}
-					?>
+		<div id="recommendations" class="wrapper copylink-id">
+			<div class="section">
+				<div class="header">
+					<span class="icon ti ti-comet"></span>
+					<span class="text"><?= $dict->get("recommendations_title") ?></span>
+					<button class="copylink ti ti-link"></button>
+				</div>
+				<div class="content">
+					<div class="card-list">
+						<a href="https://pstg45b.de" class="card">
+							<img src="<?= File::file("../sbgg.jetzt-proprietary-assets/asset/pstg45bde.png") ?>" />
+							<div class="text">
+								<span class="title"><?= $dict->get("recommendations_pstg45bde_title") ?></span>
+								<span class="description"><?= $dict->get("recommendations_pstg45bde_description") ?></span>
+							</div>
+						</a>
+						
+						<a href="https://blahaj.academy" class="card">
+							<img src="<?= File::file("../sbgg.jetzt-proprietary-assets/asset/blahajacademy.png") ?>" />
+							<div class="text">
+								<span class="title"><?= $dict->get("recommendations_blahajacademy_title") ?></span>
+								<span class="description"><?= $dict->get("recommendations_blahajacademy_description") ?></span>
+							</div>
+						</a>
+						
+						<a href="https://sbgg.info/" class="card">
+							<img src="<?= File::file("../sbgg.jetzt-proprietary-assets/asset/sbgginfo.jpg") ?>" class="rounded" />
+							<div class="text">
+								<span class="title"><?= $dict->get("recommendations_sbgginfo_title") ?></span>
+								<span class="description"><?= $dict->get("recommendations_sbgginfo_description") ?></span>
+							</div>
+						</a>
+					</div>
 					
-					<div class="button-list">
-						<a <?= Hidden::href("mailto:mail@sb"."gg.jetzt") ?> class="button primary">
-							<span class="icon ti ti-mail"></span>
-							<span class="text"><?= $dict->get("about_button_mail") ?></span>
-						</a>
-						<a href="https://kimendisch.de" class="button">
-							<span class="icon ti ti-home"></span>
-							<span class="text"><?= $dict->get("about_button_website") ?></span>
-						</a>
+					<span class="note inline gray"><?= $dict->get("recommendations_note") ?></span>
+				</div>
+			</div>
+		</div>
+		
+		<div id="about" class="wrapper copylink-id">
+			<div class="section">
+				<div class="header">
+					<span class="icon ti ti-heart"></span>
+					<span class="text"><?= $dict->get("about_title") ?></span>
+					<button class="copylink ti ti-link"></button>
+				</div>
+				<div class="content">
+					<div class="box">
+						<?php
+							$about_text = $dict->get("about_text");
+							foreach($about_text as $one_about_text_line){
+								echo("<span>" . $one_about_text_line . "</span>");
+							}
+						?>
+						
+						<div class="button-list">
+							<a <?= Hidden::href("mailto:mail@sb"."gg.jetzt") ?> class="button primary">
+								<span class="icon ti ti-mail"></span>
+								<span class="text"><?= $dict->get("about_button_mail") ?></span>
+							</a>
+							<a href="https://kimendisch.de" class="button">
+								<span class="icon ti ti-home"></span>
+								<span class="text"><?= $dict->get("about_button_website") ?></span>
+							</a>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/page/style.css b/page/style.css
index ebb2e74..cae8b3c 100644
--- a/page/style.css
+++ b/page/style.css
@@ -454,14 +454,14 @@ a.box:hover {
 	flex-direction: column;
 }
 
-.timeline > .item {
+.timeline > .item, .timeline > .wrapper > .item {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	gap: 1rem;
 }
 
-.timeline > .item > .connector {
+.timeline > .item > .connector, .timeline > .wrapper > .item > .connector {
 	align-self: stretch;
 	
 	position: relative;
@@ -470,7 +470,7 @@ a.box:hover {
 	flex-direction: column;
 	justify-content: center;
 }
-.timeline > .item:not(:first-child) > .connector::before, .timeline > .item:not(:last-child) > .connector::after {
+.timeline > .item:not(:first-child) > .connector::before, .timeline > .wrapper:not(:first-child) > .item > .connector::before, .timeline > .item:not(:last-child) > .connector::after, .timeline > .wrapper:not(:last-child) > .item > .connector::after {
 	content: "";
 	position: absolute;
 	left: calc(50% - 0.25rem);
@@ -481,24 +481,24 @@ a.box:hover {
 	background-color: var(--color-bg-light);
 	z-index: 0;
 }
-.timeline > .item > .connector::before {
+.timeline > .item > .connector::before, .timeline > .wrapper > .item > .connector::before {
 	top: 0;
 }
-.timeline > .item.done > .connector::before {
+.timeline > .item.done > .connector::before, .timeline > .wrapper > .item.done > .connector::before {
 	background-color: var(--theme);
 }
-.timeline > .item.next > .connector::before {
+.timeline > .item.next > .connector::before, .timeline > .wrapper > .item.next > .connector::before {
 	background-color: var(--theme);
 }
-.timeline > .item > .connector::after {
+.timeline > .item > .connector::after, .timeline > .wrapper > .item > .connector::after {
 	top: 50%;
 	z-index: 1 !important;
 }
-.timeline > .item.done > .connector::after {
+.timeline > .item.done > .connector::after, .timeline > .wrapper > .item.done > .connector::after {
 	background-color: var(--theme);
 }
 
-.timeline > .item > .connector > .waypoint {
+.timeline > .item > .connector > .waypoint, .timeline > .wrapper > .item > .connector > .waypoint {
 	padding: 1rem;
 	
 	font-size: 1.5rem;
@@ -506,15 +506,15 @@ a.box:hover {
 	background-color: var(--color-bg-light);
 	z-index: 2;
 }
-.timeline > .item.done > .connector > .waypoint {
+.timeline > .item.done > .connector > .waypoint, .timeline > .wrapper > .item.done > .connector > .waypoint {
 	color: var(--color-bg);
 	background-color: var(--theme);
 }
-.timeline > .item.next > .connector > .waypoint {
+.timeline > .item.next > .connector > .waypoint, .timeline > .wrapper > .item.next > .connector > .waypoint {
 	background-color: var(--color-gray-dark);
 }
 
-.timeline > .item > .box {
+.timeline > .item > .box, .timeline > .wrapper > .item > .box {
 	flex-grow: 1;
 	align-items: flex-start;
 	
@@ -523,24 +523,24 @@ a.box:hover {
 	
 	text-align: left;
 }
-.timeline > .item:first-child > .box {
+.timeline > .item:first-child > .box, .timeline > .wrapper:first-child > .item > .box {
 	margin: 0 0 1rem 0;
 }
-.timeline > .item:last-child > .box {
+.timeline > .item:last-child > .box, .timeline > .wrapper:last-child > .item > .box {
 	margin: 1rem 0 0 0;
 }
 
 @media only screen and (max-width: 1000px) {
-	.timeline > .item {
+	.timeline > .item, .timeline > .wrapper > .item {
 		position: relative;
 		flex-direction: column;
 		gap: 0;
 	}
-	.timeline > .item > .connector {
+	.timeline > .item > .connector, .timeline > .wrapper > .item > .connector {
 		align-self: center;
 	}
 	
-	.timeline > .item:not(:last-child)::after {
+	.timeline > .item:not(:last-child)::after, .timeline > .wrapper:not(:last-child) > .item::after {
 		content: "";
 		position: absolute;
 		left: calc(50% - 0.25rem);
@@ -551,35 +551,35 @@ a.box:hover {
 		background-color: var(--color-bg-light);
 		z-index: 0;
 	}
-	.timeline > .item.done::after {
+	.timeline > .item.done::after, .timeline > .wrapper > .item.done::after {
 		background-color: var(--theme);
 	}
-	.timeline > .item.done-stop::after {
+	.timeline > .item.done-stop::after, .timeline > .wrapper > .item.done-stop::after {
 		background-color: var(--theme);
 	}
 	
-	.timeline > .item:not(:last-child) > .box {
+	.timeline > .item:not(:last-child) > .box, .timeline > .wrapper:not(:last-child) > .item > .box {
 		margin: 0 0 4rem 0;
 	}
-	.timeline > .item:last-child > .box {
+	.timeline > .item:last-child > .box, .timeline > .wrapper:last-child > .item > .box {
 		margin: 0;
 	}
 	
-	.timeline > .item > .connector > .waypoint {
+	.timeline > .item > .connector > .waypoint, .timeline > .wrapper > .item > .connector > .waypoint {
 		border-radius: 50% 50% 0 0;
 	}
 	
-	.timeline > .item > .box {
+	.timeline > .item > .box, .timeline > .wrapper > .item > .box {
 		align-items: center;
 		text-align: center;
 	}
-	.timeline > .item > .box {
+	.timeline > .item > .box, .timeline > .wrapper > .item > .box {
 		outline: 0.125rem solid var(--color-bg-light);
 	}
-	.timeline > .item.done > .box {
+	.timeline > .item.done > .box, .timeline > .wrapper > .item.done > .box {
 		outline: 0.125rem solid var(--theme);
 	}
-	.timeline > .item.next > .box {
+	.timeline > .item.next > .box, .timeline > .wrapper > .item.next > .box {
 		outline: 0.125rem solid var(--color-gray-dark);
 	}
 }
@@ -667,14 +667,14 @@ a.box:hover {
 
 
 /* SECTION: NEWS */
-.section > .content.rows > #newsletter, .section > .content.rows > #social-media {
+#newsletter .box, #social-media .box {
 	align-items: flex-start;
 }
-.section > .content.rows > #newsletter {
+#newsletter {
 	flex-basis: 22rem;
 	flex-grow: 64;
 }
-.section > .content.rows > #social-media {
+#social-media {
 	flex-basis: 16rem;
 	flex-grow: 1;
 	flex-shrink: 1;
@@ -795,6 +795,11 @@ a.box:hover {
 
 
 /* COPYLINKS */
+.wrapper.copylink-id {
+	padding-top: 5.3rem; /* NOTE: This is tied to `nav .nav-container` */
+	margin-top: -5.3rem; /* NOTE: This is tied to `nav .nav-container` */
+}
+
 .copylink {
 	position: absolute;
 	padding: 0.5rem;
diff --git a/page/timeline/index.php b/page/timeline/index.php
index 52c52b9..6c3ee71 100644
--- a/page/timeline/index.php
+++ b/page/timeline/index.php
@@ -49,363 +49,387 @@
 			<h2><?= $dict->get("timeline_title") ?></h2>
 		</div>
 		
-		<div id="timeline" class="section">
+		<div class="section">
 			<div class="content">
 				<div class="timeline">
-					<div id="koalitionsvertrag" class="item done">
-						<div class="connector">
-							<span class="waypoint ti ti-heart-handshake"></span>
-						</div>
-						<div class="box">
-							<?php
-								$timeline_date = $dict->get("timeline_koalitionsvertrag_date");
-								if($timeline_date !== null){
-							?>
-									<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
-							<?php } ?>
-							
-							<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_koalitionsvertrag_title") ?></span>
-							
-							<?php
-								$timeline_koalitionsvertrag_text = $dict->get("timeline_koalitionsvertrag_text");
-								foreach($timeline_koalitionsvertrag_text as $one_timeline_koalitionsvertrag_text_line){
-									echo("<span>" . $one_timeline_koalitionsvertrag_text_line . "</span>");
-								}
-							?>
-							
-							<div class="button-list">
-								<a href="https://web.archive.org/web/20230630200056/https://www.spd.de/fileadmin/Dokumente/Koalitionsvertrag/Koalitionsvertrag_2021-2025.pdf" target="_blank" class="button">
-									<span class="text"><?= $dict->get("timeline_koalitionsvertrag_button") ?></span>
-									<span class="icon ti ti-external-link"></span>
-								</a>
+					<div id="koalitionsvertrag" class="wrapper copylink-id">
+						<div class="item done">
+							<div class="connector">
+								<span class="waypoint ti ti-heart-handshake"></span>
+							</div>
+							<div class="box">
+								<?php
+									$timeline_date = $dict->get("timeline_koalitionsvertrag_date");
+									if($timeline_date !== null){
+								?>
+										<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
+								<?php } ?>
+								
+								<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_koalitionsvertrag_title") ?></span>
+								
+								<?php
+									$timeline_koalitionsvertrag_text = $dict->get("timeline_koalitionsvertrag_text");
+									foreach($timeline_koalitionsvertrag_text as $one_timeline_koalitionsvertrag_text_line){
+										echo("<span>" . $one_timeline_koalitionsvertrag_text_line . "</span>");
+									}
+								?>
+								
+								<div class="button-list">
+									<a href="https://web.archive.org/web/20230630200056/https://www.spd.de/fileadmin/Dokumente/Koalitionsvertrag/Koalitionsvertrag_2021-2025.pdf" target="_blank" class="button">
+										<span class="text"><?= $dict->get("timeline_koalitionsvertrag_button") ?></span>
+										<span class="icon ti ti-external-link"></span>
+									</a>
+								</div>
 							</div>
 						</div>
 					</div>
 					
-					<div id="eckpunktepapier" class="item done">
-						<div class="connector">
-							<span class="waypoint ti ti-border-corners"></span>
-						</div>
-						<div class="box">
-							<?php
-								$timeline_date = $dict->get("timeline_eckpunktepapier_date");
-								if($timeline_date !== null){
-							?>
-									<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
-							<?php } ?>
-							
-							<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_eckpunktepapier_title") ?></span>
-							
-							<?php
-								$timeline_eckpunktepapier_text = $dict->get("timeline_eckpunktepapier_text");
-								foreach($timeline_eckpunktepapier_text as $one_timeline_eckpunktepapier_text_line){
-									echo("<span>" . $one_timeline_eckpunktepapier_text_line . "</span>");
-								}
-							?>
-							
-							<div class="button-list">
-								<a href="https://web.archive.org/web/20230418072943/https://www.bmfsfj.de/resource/blob/199382/1e751a6b7f366eec396d146b3813eed2/20220630-selbstbestimmungsgesetz-eckpunkte-data.pdf" target="_blank" class="button">
-									<span class="text"><?= $dict->get("timeline_eckpunktepapier_button") ?></span>
-									<span class="icon ti ti-external-link"></span>
-								</a>
+					<div id="eckpunktepapier" class="wrapper copylink-id">
+						<div class="item done">
+							<div class="connector">
+								<span class="waypoint ti ti-border-corners"></span>
+							</div>
+							<div class="box">
+								<?php
+									$timeline_date = $dict->get("timeline_eckpunktepapier_date");
+									if($timeline_date !== null){
+								?>
+										<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
+								<?php } ?>
+								
+								<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_eckpunktepapier_title") ?></span>
+								
+								<?php
+									$timeline_eckpunktepapier_text = $dict->get("timeline_eckpunktepapier_text");
+									foreach($timeline_eckpunktepapier_text as $one_timeline_eckpunktepapier_text_line){
+										echo("<span>" . $one_timeline_eckpunktepapier_text_line . "</span>");
+									}
+								?>
+								
+								<div class="button-list">
+									<a href="https://web.archive.org/web/20230418072943/https://www.bmfsfj.de/resource/blob/199382/1e751a6b7f366eec396d146b3813eed2/20220630-selbstbestimmungsgesetz-eckpunkte-data.pdf" target="_blank" class="button">
+										<span class="text"><?= $dict->get("timeline_eckpunktepapier_button") ?></span>
+										<span class="icon ti ti-external-link"></span>
+									</a>
+								</div>
 							</div>
 						</div>
 					</div>
 					
-					<div id="referentenentwurf" class="item done">
-						<div class="connector">
-							<span class="waypoint ti ti-pencil"></span>
-						</div>
-						<div class="box">
-							<?php
-								$timeline_date = $dict->get("timeline_referentenentwurf_date");
-								if($timeline_date !== null){
-							?>
-									<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
-							<?php } ?>
-							
-							<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_referentenentwurf_title") ?></span>
-							
-							<?php
-								$timeline_referentenentwurf_text = $dict->get("timeline_referentenentwurf_text");
-								foreach($timeline_referentenentwurf_text as $one_timeline_referentenentwurf_text_line){
-									echo("<span>" . $one_timeline_referentenentwurf_text_line . "</span>");
-								}
-							?>
-							
-							<div class="button-list">
-								<a href="https://web.archive.org/web/20230610171918/https://www.bmfsfj.de/resource/blob/224548/4d24ff0698216058eb758ada5c84bd90/entwurf-selbstbestimmungsgesetz-data.pdf" target="_blank" class="button">
-									<span class="text"><?= $dict->get("timeline_referentenentwurf_button") ?></span>
-									<span class="icon ti ti-external-link"></span>
-								</a>
-								<a href="https://web.archive.org/web/20230714124925/https://www.bmj.de/SharedDocs/Downloads/DE/Themen/FamilieUndPartnerschaft/Fragen_und_Antworten_SBGG.pdf?__blob=publicationFile" target="_blank" class="button">
-									<span class="text"><?= $dict->get("timeline_referentenentwurf_button2") ?></span>
-									<span class="icon ti ti-external-link"></span>
-								</a>
+					<div id="referentenentwurf" class="wrapper copylink-id">
+						<div class="item done">
+							<div class="connector">
+								<span class="waypoint ti ti-pencil"></span>
+							</div>
+							<div class="box">
+								<?php
+									$timeline_date = $dict->get("timeline_referentenentwurf_date");
+									if($timeline_date !== null){
+								?>
+										<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
+								<?php } ?>
+								
+								<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_referentenentwurf_title") ?></span>
+								
+								<?php
+									$timeline_referentenentwurf_text = $dict->get("timeline_referentenentwurf_text");
+									foreach($timeline_referentenentwurf_text as $one_timeline_referentenentwurf_text_line){
+										echo("<span>" . $one_timeline_referentenentwurf_text_line . "</span>");
+									}
+								?>
+								
+								<div class="button-list">
+									<a href="https://web.archive.org/web/20230610171918/https://www.bmfsfj.de/resource/blob/224548/4d24ff0698216058eb758ada5c84bd90/entwurf-selbstbestimmungsgesetz-data.pdf" target="_blank" class="button">
+										<span class="text"><?= $dict->get("timeline_referentenentwurf_button") ?></span>
+										<span class="icon ti ti-external-link"></span>
+									</a>
+									<a href="https://web.archive.org/web/20230714124925/https://www.bmj.de/SharedDocs/Downloads/DE/Themen/FamilieUndPartnerschaft/Fragen_und_Antworten_SBGG.pdf?__blob=publicationFile" target="_blank" class="button">
+										<span class="text"><?= $dict->get("timeline_referentenentwurf_button2") ?></span>
+										<span class="icon ti ti-external-link"></span>
+									</a>
+								</div>
 							</div>
 						</div>
 					</div>
 					
-					<div id="regierungsentwurf" class="item done">
-						<div class="connector">
-							<span class="waypoint ti ti-notes"></span>
-						</div>
-						<div class="box">
-							<?php
-								$timeline_date = $dict->get("timeline_regierungsentwurf_date");
-								if($timeline_date !== null){
-							?>
-									<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
-							<?php } ?>
-							
-							<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_regierungsentwurf_title") ?></span>
-							
-							<?php
-								$timeline_regierungsentwurf_text = $dict->get("timeline_regierungsentwurf_text");
-								foreach($timeline_regierungsentwurf_text as $one_timeline_regierungsentwurf_text_line){
-									echo("<span>" . $one_timeline_regierungsentwurf_text_line . "</span>");
-								}
-							?>
-							
-							<div class="button-list">
-								<a href="https://web.archive.org/web/20230823122446/https://www.bmj.de/SharedDocs/Downloads/DE/Gesetzgebung/RegE/RegE_Selbstbestimmung.pdf?__blob=publicationFile&v=2" target="_blank" class="button">
-									<span class="text"><?= $dict->get("timeline_regierungsentwurf_button") ?></span>
-									<span class="icon ti ti-external-link"></span>
-								</a>
+					<div id="regierungsentwurf" class="wrapper copylink-id">
+						<div class="item done">
+							<div class="connector">
+								<span class="waypoint ti ti-notes"></span>
+							</div>
+							<div class="box">
+								<?php
+									$timeline_date = $dict->get("timeline_regierungsentwurf_date");
+									if($timeline_date !== null){
+								?>
+										<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
+								<?php } ?>
+								
+								<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_regierungsentwurf_title") ?></span>
+								
+								<?php
+									$timeline_regierungsentwurf_text = $dict->get("timeline_regierungsentwurf_text");
+									foreach($timeline_regierungsentwurf_text as $one_timeline_regierungsentwurf_text_line){
+										echo("<span>" . $one_timeline_regierungsentwurf_text_line . "</span>");
+									}
+								?>
+								
+								<div class="button-list">
+									<a href="https://web.archive.org/web/20230823122446/https://www.bmj.de/SharedDocs/Downloads/DE/Gesetzgebung/RegE/RegE_Selbstbestimmung.pdf?__blob=publicationFile&v=2" target="_blank" class="button">
+										<span class="text"><?= $dict->get("timeline_regierungsentwurf_button") ?></span>
+										<span class="icon ti ti-external-link"></span>
+									</a>
+								</div>
 							</div>
 						</div>
 					</div>
 					
-					<div id="bundesrat" class="item"></div>
-					<div id="bundesrat-1" class="item done">
-						<div class="connector">
-							<span class="waypoint ti ti-zoom-check"></span>
-						</div>
-						<div class="box">
-							<?php
-								$timeline_date = $dict->get("timeline_bundesrat_date");
-								if($timeline_date !== null){
-							?>
-									<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
-							<?php } ?>
-							
-							<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_bundesrat_title") ?></span>
-							
-							<?php
-								$timeline_bundesrat_text = $dict->get("timeline_bundesrat_text");
-								foreach($timeline_bundesrat_text as $one_timeline_bundesrat_text_line){
-									echo("<span>" . $one_timeline_bundesrat_text_line . "</span>");
-								}
-							?>
-							
-							<div class="button-list">
-								<a href="https://yt.artemislena.eu/watch?v=n0chw7-cAsQ" target="_blank" class="button">
-									<span class="text"><?= $dict->get("timeline_bundesrat_button") ?></span>
-									<span class="icon ti ti-external-link"></span>
-								</a>
-								<a href="https://web.archive.org/web/20231020142352/https://www.bundesrat.de/SharedDocs/drucksachen/2023/0401-0500/432-1-23.pdf?__blob=publicationFile&v=1" target="_blank" class="button">
-									<span class="text"><?= $dict->get("timeline_bundesrat_button2") ?></span>
-									<span class="icon ti ti-external-link"></span>
-								</a>
+					<div id="bundesrat" class="wrapper copylink-id"></div>
+					<div id="bundesrat-1" class="wrapper copylink-id">
+						<div class="item done">
+							<div class="connector">
+								<span class="waypoint ti ti-zoom-check"></span>
+							</div>
+							<div class="box">
+								<?php
+									$timeline_date = $dict->get("timeline_bundesrat_date");
+									if($timeline_date !== null){
+								?>
+										<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
+								<?php } ?>
+								
+								<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_bundesrat_title") ?></span>
+								
+								<?php
+									$timeline_bundesrat_text = $dict->get("timeline_bundesrat_text");
+									foreach($timeline_bundesrat_text as $one_timeline_bundesrat_text_line){
+										echo("<span>" . $one_timeline_bundesrat_text_line . "</span>");
+									}
+								?>
+								
+								<div class="button-list">
+									<a href="https://yt.artemislena.eu/watch?v=n0chw7-cAsQ" target="_blank" class="button">
+										<span class="text"><?= $dict->get("timeline_bundesrat_button") ?></span>
+										<span class="icon ti ti-external-link"></span>
+									</a>
+									<a href="https://web.archive.org/web/20231020142352/https://www.bundesrat.de/SharedDocs/drucksachen/2023/0401-0500/432-1-23.pdf?__blob=publicationFile&v=1" target="_blank" class="button">
+										<span class="text"><?= $dict->get("timeline_bundesrat_button2") ?></span>
+										<span class="icon ti ti-external-link"></span>
+									</a>
+								</div>
 							</div>
 						</div>
 					</div>
 					
-					<div id="lesung-1" class="item done">
-						<div class="connector">
-							<span class="waypoint ti ti-podium"></span>
-						</div>
-						<div class="box">
-							<?php
-								$timeline_date = $dict->get("timeline_lesung_1_date");
-								if($timeline_date !== null){
-							?>
-									<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
-							<?php } ?>
-							
-							<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_lesung_1_title") ?></span>
-							
-							<?php
-								$timeline_lesung_1_text = $dict->get("timeline_lesung_1_text");
-								foreach($timeline_lesung_1_text as $one_timeline_lesung_1_text_line){
-									echo("<span>" . $one_timeline_lesung_1_text_line . "</span>");
-								}
-							?>
-							
-							<div class="button-list">
-								<a href="https://www.bundestag.de/dokumente/textarchiv/2023/kw46-de-geschlechtseintrag-976420" target="_blank" class="button">
-									<span class="text"><?= $dict->get("timeline_lesung_1_button") ?></span>
-									<span class="icon ti ti-external-link"></span>
-								</a>
+					<div id="lesung-1" class="wrapper copylink-id">
+						<div class="item done">
+							<div class="connector">
+								<span class="waypoint ti ti-podium"></span>
+							</div>
+							<div class="box">
+								<?php
+									$timeline_date = $dict->get("timeline_lesung_1_date");
+									if($timeline_date !== null){
+								?>
+										<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
+								<?php } ?>
+								
+								<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_lesung_1_title") ?></span>
+								
+								<?php
+									$timeline_lesung_1_text = $dict->get("timeline_lesung_1_text");
+									foreach($timeline_lesung_1_text as $one_timeline_lesung_1_text_line){
+										echo("<span>" . $one_timeline_lesung_1_text_line . "</span>");
+									}
+								?>
+								
+								<div class="button-list">
+									<a href="https://www.bundestag.de/dokumente/textarchiv/2023/kw46-de-geschlechtseintrag-976420" target="_blank" class="button">
+										<span class="text"><?= $dict->get("timeline_lesung_1_button") ?></span>
+										<span class="icon ti ti-external-link"></span>
+									</a>
+								</div>
 							</div>
 						</div>
 					</div>
 					
-					<div id="ausschuss-anhoerung" class="item done">
-						<div class="connector">
-							<span class="waypoint ti ti-messages"></span>
-						</div>
-						<div class="box">
-							<?php
-								$timeline_date = $dict->get("timeline_ausschuss_anhoerung_date");
-								if($timeline_date !== null){
-							?>
-									<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
-							<?php } ?>
-							
-							<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_ausschuss_anhoerung_title") ?></span>
-							
-							<?php
-								$timeline_ausschuss_anhoerung_text = $dict->get("timeline_ausschuss_anhoerung_text");
-								foreach($timeline_ausschuss_anhoerung_text as $one_timeline_ausschuss_anhoerung_text_line){
-									echo("<span>" . $one_timeline_ausschuss_anhoerung_text_line . "</span>");
-								}
-							?>
-							
-							<div class="button-list">
-								<a href="https://www.bundestag.de/dokumente/textarchiv/2023/kw48-pa-familie-selbstbestimmungsgesetz-978748" target="_blank" class="button">
-									<span class="text"><?= $dict->get("timeline_ausschuss_anhoerung_button") ?></span>
-									<span class="icon ti ti-external-link"></span>
-								</a>
+					<div id="ausschuss-anhoerung" class="wrapper copylink-id">
+						<div class="item done">
+							<div class="connector">
+								<span class="waypoint ti ti-messages"></span>
+							</div>
+							<div class="box">
+								<?php
+									$timeline_date = $dict->get("timeline_ausschuss_anhoerung_date");
+									if($timeline_date !== null){
+								?>
+										<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
+								<?php } ?>
+								
+								<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_ausschuss_anhoerung_title") ?></span>
+								
+								<?php
+									$timeline_ausschuss_anhoerung_text = $dict->get("timeline_ausschuss_anhoerung_text");
+									foreach($timeline_ausschuss_anhoerung_text as $one_timeline_ausschuss_anhoerung_text_line){
+										echo("<span>" . $one_timeline_ausschuss_anhoerung_text_line . "</span>");
+									}
+								?>
+								
+								<div class="button-list">
+									<a href="https://www.bundestag.de/dokumente/textarchiv/2023/kw48-pa-familie-selbstbestimmungsgesetz-978748" target="_blank" class="button">
+										<span class="text"><?= $dict->get("timeline_ausschuss_anhoerung_button") ?></span>
+										<span class="icon ti ti-external-link"></span>
+									</a>
+								</div>
 							</div>
 						</div>
 					</div>
 					
-					<div id="lesung-2" class="item"></div>
-					<div id="lesung-3" class="item"></div>
-					<div id="lesung-2-3" class="item done">
-						<div class="connector">
-							<span class="waypoint ti ti-hand-stop"></span>
-						</div>
-						<div class="box">
-							<?php
-								$timeline_date = $dict->get("timeline_lesung_2_3_date");
-								if($timeline_date !== null){
-							?>
-									<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
-							<?php } ?>
-							
-							<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_lesung_2_3_title") ?></span>
-							
-							<?php
-								$timeline_lesung_3_text = $dict->get("timeline_lesung_2_3_text");
-								foreach($timeline_lesung_3_text as $one_timeline_lesung_3_text_line){
-									echo("<span>" . $one_timeline_lesung_3_text_line . "</span>");
-								}
-							?>
-							
-							<div class="button-list">
-								<a href="https://www.bundestag.de/dokumente/textarchiv/2024/kw15-de-geschlechtseintrag-997406" target="_blank" class="button">
-									<span class="text"><?= $dict->get("timeline_lesung_2_3_button") ?></span>
-									<span class="icon ti ti-external-link"></span>
-								</a>
+					<div id="lesung-2" class="wrapper copylink-id"></div>
+					<div id="lesung-3" class="wrapper copylink-id"></div>
+					<div id="lesung-2-3" class="wrapper copylink-id">
+						<div class="item done">
+							<div class="connector">
+								<span class="waypoint ti ti-hand-stop"></span>
+							</div>
+							<div class="box">
+								<?php
+									$timeline_date = $dict->get("timeline_lesung_2_3_date");
+									if($timeline_date !== null){
+								?>
+										<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
+								<?php } ?>
+								
+								<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_lesung_2_3_title") ?></span>
+								
+								<?php
+									$timeline_lesung_3_text = $dict->get("timeline_lesung_2_3_text");
+									foreach($timeline_lesung_3_text as $one_timeline_lesung_3_text_line){
+										echo("<span>" . $one_timeline_lesung_3_text_line . "</span>");
+									}
+								?>
+								
+								<div class="button-list">
+									<a href="https://www.bundestag.de/dokumente/textarchiv/2024/kw15-de-geschlechtseintrag-997406" target="_blank" class="button">
+										<span class="text"><?= $dict->get("timeline_lesung_2_3_button") ?></span>
+										<span class="icon ti ti-external-link"></span>
+									</a>
+								</div>
 							</div>
 						</div>
 					</div>
 					
-					<div id="bundesrat-2" class="item done">
-						<div class="connector">
-							<span class="waypoint ti ti-zoom-check"></span>
-						</div>
-						<div class="box">
-							<?php
-								$timeline_date = $dict->get("timeline_bundesrat_2_date");
-								if($timeline_date !== null){
-							?>
-									<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
-							<?php } ?>
-							
-							<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_bundesrat_2_title") ?></span>
-							
-							<?php
-								$timeline_bundesrat_2_text = $dict->get("timeline_bundesrat_2_text");
-								foreach($timeline_bundesrat_2_text as $one_timeline_bundesrat_2_text_line){
-									echo("<span>" . $one_timeline_bundesrat_2_text_line . "</span>");
-								}
-							?>
-							
-							<div class="button-list">
-								<a href="https://www.bundesrat.de/DE/service/mediathek/mediathek-node.html?cms_id=0_tb5fzq89" target="_blank" class="button">
-									<span class="text"><?= $dict->get("timeline_bundesrat_2_button") ?></span>
-									<span class="icon ti ti-external-link"></span>
-								</a>
+					<div id="bundesrat-2" class="wrapper copylink-id">
+						<div class="item done">
+							<div class="connector">
+								<span class="waypoint ti ti-zoom-check"></span>
+							</div>
+							<div class="box">
+								<?php
+									$timeline_date = $dict->get("timeline_bundesrat_2_date");
+									if($timeline_date !== null){
+								?>
+										<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
+								<?php } ?>
+								
+								<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_bundesrat_2_title") ?></span>
+								
+								<?php
+									$timeline_bundesrat_2_text = $dict->get("timeline_bundesrat_2_text");
+									foreach($timeline_bundesrat_2_text as $one_timeline_bundesrat_2_text_line){
+										echo("<span>" . $one_timeline_bundesrat_2_text_line . "</span>");
+									}
+								?>
+								
+								<div class="button-list">
+									<a href="https://www.bundesrat.de/DE/service/mediathek/mediathek-node.html?cms_id=0_tb5fzq89" target="_blank" class="button">
+										<span class="text"><?= $dict->get("timeline_bundesrat_2_button") ?></span>
+										<span class="icon ti ti-external-link"></span>
+									</a>
+								</div>
 							</div>
 						</div>
 					</div>
 					
-					<div id="bundesgesetzblatt" class="item done done-stop">
-						<div class="connector">
-							<span class="waypoint ti ti-news"></span>
-						</div>
-						<div class="box">
-							<?php
-								$timeline_date = $dict->get("timeline_bundesgesetzblatt_date");
-								if($timeline_date !== null){
-							?>
-									<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
-							<?php } ?>
-							
-							<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_bundesgesetzblatt_title") ?></span>
-							
-							<?php
-								$timeline_bundesgesetzblatt_text = $dict->get("timeline_bundesgesetzblatt_text");
-								foreach($timeline_bundesgesetzblatt_text as $one_timeline_bundesgesetzblatt_text_line){
-									echo("<span>" . $one_timeline_bundesgesetzblatt_text_line . "</span>");
-								}
-							?>
-							
-							<div class="button-list">
-								<a href="https://web.archive.org/web/20240621093602/https://www.recht.bund.de/bgbl/1/2024/206/regelungstext.pdf?__blob=publicationFile&v=3" target="_blank" class="button">
-									<span class="text"><?= $dict->get("timeline_bundesgesetzblatt_button") ?></span>
-									<span class="icon ti ti-external-link"></span>
-								</a>
+					<div id="bundesgesetzblatt" class="wrapper copylink-id">
+						<div class="item done done-stop">
+							<div class="connector">
+								<span class="waypoint ti ti-news"></span>
+							</div>
+							<div class="box">
+								<?php
+									$timeline_date = $dict->get("timeline_bundesgesetzblatt_date");
+									if($timeline_date !== null){
+								?>
+										<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
+								<?php } ?>
+								
+								<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_bundesgesetzblatt_title") ?></span>
+								
+								<?php
+									$timeline_bundesgesetzblatt_text = $dict->get("timeline_bundesgesetzblatt_text");
+									foreach($timeline_bundesgesetzblatt_text as $one_timeline_bundesgesetzblatt_text_line){
+										echo("<span>" . $one_timeline_bundesgesetzblatt_text_line . "</span>");
+									}
+								?>
+								
+								<div class="button-list">
+									<a href="https://web.archive.org/web/20240621093602/https://www.recht.bund.de/bgbl/1/2024/206/regelungstext.pdf?__blob=publicationFile&v=3" target="_blank" class="button">
+										<span class="text"><?= $dict->get("timeline_bundesgesetzblatt_button") ?></span>
+										<span class="icon ti ti-external-link"></span>
+									</a>
+								</div>
 							</div>
 						</div>
 					</div>
 					
-					<div id="anmeldung" class="item next">
-						<div class="connector">
-							<span class="waypoint ti ti-ticket"></span>
-						</div>
-						<div class="box">
-							<?php
-								$timeline_date = $dict->get("timeline_anmeldung_date");
-								if($timeline_date !== null){
-							?>
-									<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
-							<?php } ?>
-							
-							<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_anmeldung_title") ?></span>
-							
-							<?php
-								$timeline_anmeldung_text = $dict->get("timeline_anmeldung_text");
-								foreach($timeline_anmeldung_text as $one_timeline_anmeldung_text_line){
-									echo("<span>" . $one_timeline_anmeldung_text_line . "</span>");
-								}
-							?>
+					<div id="anmeldung" class="wrapper copylink-id">
+						<div class="item next">
+							<div class="connector">
+								<span class="waypoint ti ti-ticket"></span>
+							</div>
+							<div class="box">
+								<?php
+									$timeline_date = $dict->get("timeline_anmeldung_date");
+									if($timeline_date !== null){
+								?>
+										<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
+								<?php } ?>
+								
+								<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_anmeldung_title") ?></span>
+								
+								<?php
+									$timeline_anmeldung_text = $dict->get("timeline_anmeldung_text");
+									foreach($timeline_anmeldung_text as $one_timeline_anmeldung_text_line){
+										echo("<span>" . $one_timeline_anmeldung_text_line . "</span>");
+									}
+								?>
+							</div>
 						</div>
 					</div>
 					
-					<div id="inkrafttreten" class="item">
-						<div class="connector">
-							<span class="waypoint ti ti-gavel"></span>
-						</div>
-						<div class="box">
-							<?php
-								$timeline_date = $dict->get("timeline_inkrafttreten_date");
-								if($timeline_date !== null){
-							?>
-									<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
-							<?php } ?>
-							
-							<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_inkrafttreten_title") ?></span>
-							
-							<?php
-								$timeline_inkrafttreten_text = $dict->get("timeline_inkrafttreten_text");
-								foreach($timeline_inkrafttreten_text as $one_timeline_inkrafttreten_text_line){
-									echo("<span>" . $one_timeline_inkrafttreten_text_line . "</span>");
-								}
-							?>
+					<div id="inkrafttreten" class="wrapper copylink-id">
+						<div class="item">
+							<div class="connector">
+								<span class="waypoint ti ti-gavel"></span>
+							</div>
+							<div class="box">
+								<?php
+									$timeline_date = $dict->get("timeline_inkrafttreten_date");
+									if($timeline_date !== null){
+								?>
+										<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
+								<?php } ?>
+								
+								<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("timeline_inkrafttreten_title") ?></span>
+								
+								<?php
+									$timeline_inkrafttreten_text = $dict->get("timeline_inkrafttreten_text");
+									foreach($timeline_inkrafttreten_text as $one_timeline_inkrafttreten_text_line){
+										echo("<span>" . $one_timeline_inkrafttreten_text_line . "</span>");
+									}
+								?>
+							</div>
 						</div>
 					</div>
 				</div>