2024-07-29 19:21:56 +02:00
45 changed files with 3944 additions and 2401 deletions
--- a/api/newsletter/subscribe.php
+++ b/api/newsletter/subscribe.php
@ -6,7 +6,7 @@
 	
 	// CHECK CSRF PROTECTION //
 	$x_cookieless_csrf_protection = getallheaders()["x-cookieless-csrf-protection"] ?? null;
-	if($x_cookieless_csrf_protection !== "42"){
+	if(\Flake\Env::IS_PRODUCTION and $x_cookieless_csrf_protection !== "42"){
 		// show an excuse page
 		Excuse::show("invalid_csrf_token");
 	}
--- a/api/newsletter/unsubscribe.php
+++ b/api/newsletter/unsubscribe.php
@ -6,7 +6,7 @@
 	
 	// CHECK CSRF PROTECTION //
 	$x_cookieless_csrf_protection = getallheaders()["x-cookieless-csrf-protection"] ?? null;
-	if($x_cookieless_csrf_protection !== "42"){
+	if(\Flake\Env::IS_PRODUCTION and $x_cookieless_csrf_protection !== "42"){
 		// show an excuse page
 		Excuse::show("invalid_csrf_token");
 	}
--- a/api/newsletter/verify.php
+++ b/api/newsletter/verify.php
@ -5,7 +5,7 @@
 	
 	// CHECK CSRF PROTECTION //
 	$x_cookieless_csrf_protection = getallheaders()["x-cookieless-csrf-protection"] ?? null;
-	if($x_cookieless_csrf_protection !== "42"){
+	if(\Flake\Env::IS_PRODUCTION and $x_cookieless_csrf_protection !== "42"){
 		// show an excuse page
 		Excuse::show("invalid_csrf_token");
 	}
--- a/init.php
+++ b/init.php
@ -4,4 +4,22 @@
 	
 	// LOAD ENV CONFIG //
 	require_once("./.env.php");
+	
+	
+	// PREPARE CLASSES FOR STATE STORAGE //
+	// lang reference
+	class Lang_Ref {
+		public static object $dict;
+	}
+	
+	// nav
+	class Nav {
+		public static ?string $active = null;
+	}
+	
+	// footer
+	class Footer {
+		public static array $lang_href;
+		public static bool $cookieaccept_but_no_lang = false;
+	}
 ?>
--- a/meta.php
+++ b/meta.php
@ -1,6 +1,6 @@
 <?php
 	// VERSION //
-	static::$version = "1.2.21";
+	static::$version = "1.3.0";
 	
 	
 	// DEPENDENCIES //
@ -33,6 +33,10 @@
 	static::$route["sbgg.jetzt"] = [
 		["path" => "",									"target" => "page/start"],
 		["path" => ":lang",								"target" => "page/start"],
+		
+		["path" => "timeline",							"target" => "page/timeline"],
+		["path" => ":lang/timeline",					"target" => "page/timeline"],
+		
 		["path" => "impressum",							"target" => "page/imprint"],
 		["path" => "imprint",							"target" => "page/imprint"],
 		["path" => "datenschutz",						"target" => "page/privacy"],
--- a/newsletter/content/2024-07-29-sbggjetzt-1-3.data.php
+++ b/newsletter/content/2024-07-29-sbggjetzt-1-3.data.php
@ -0,0 +1,37 @@
+<?php
+	return [
+		"subject" => [
+			"de" => "SBGG.jetzt: Großes SBGG.jetzt Update!",
+			"en" => "SBGG.jetzt: Big SBGG.jetzt Update!"
+		],
+		
+		"main" => [
+			"de" => <<<HTML
+				<h2>Großes SBGG.jetzt Update!</h2>
+				
+				<p>Bald ist es so weit: In drei Tagen können Anmeldungen für die Personenstandsänderung beim Standesamt abgegeben werden! Pünktlich dazu jetzt auf der Webseite:</p>
+				
+				<ul>
+					<li><b>In 5 Schritten zur Personenstandsänderung</b>, eine Schritt-für-Schritt Anleitung zur Verwendung des Selbstbestimmungsgesetzes.</li>
+					<li><b>Häufig gestellte Fragen (FAQ)</b>, eine Sammlung von häufig gestellten Fragen rund um das SBGG und ihre entsprechenden Antworten.</li>
+					<li>Die altbekannte Timeline findet sich nun hier: <a href="https://sbgg.jetzt/timeline">sbgg.jetzt/timeline</a></li>
+				</ul>
+				
+				<p>Alles hier ansehen: <a href="https://sbgg.jetzt?ref=newsletter">www.SBGG.jetzt</a></p>
+			HTML,
+			"en" => <<<HTML
+				<h2>Big SBGG.jetzt Update!</h2>
+				
+				<p>It will soon be time: In three days, registrations for the change in civil status can be submitted to the registry office! Just on time on the website:</p>
+				
+				<ul>
+					<li><b>Changing Civil Status in 5 Steps</b>, A step-by-step guide for the use of the Self-Determination Law.</li>
+					<li><b>Frequently Asked Questions</b>, a collection of frequently asked questions about the SBGG and their corresponding answers.</li>
+					<li>The well-known timeline can now be found here: <a href="https://sbgg.jetzt/en/timeline">sbgg.jetzt/en/timeline</a></li>
+				</ul>
+				
+				<p>View it here: <a href="https://sbgg.jetzt/en?ref=newsletter">www.SBGG.jetzt</a></p>
+			HTML
+		]
+	];
+?>
--- a/newsletter/template/base.html
+++ b/newsletter/template/base.html
@ -33,6 +33,9 @@
 			br.gone {
 				display: none;
 			}
+			li {
+				margin-bottom: 8px;
+			}
 			
 			.gray {
 				color: #828997;
--- a/page/accordion.css
+++ b/page/accordion.css
@ -0,0 +1,91 @@
+.accordion {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: nowrap;
+	gap: 2rem;
+}
+@media only screen and (max-width: 1000px) {
+	.accordion {
+		gap: 1rem;
+	}
+}
+
+.accordion > .item.box,
+.accordion > .wrapper > .item.box {
+	justify-content: flex-start;
+	align-items: stretch;
+	gap: 0;
+	
+	padding: 0;
+	
+	overflow: hidden;
+	text-align: left;
+}
+
+
+
+.accordion > .item.box > .head,
+.accordion > .wrapper > .item.box > .head {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	flex-wrap: nowrap;
+	gap: 1.5rem;
+	
+	padding: 1rem 2rem;
+	
+	/* HACK: This is equal to an `outline-bottom` */
+	border-bottom: 0.125rem solid var(--color-gray-dark-dark);
+	margin-bottom: -0.125rem;
+}
+.accordion > .item.box > .head:hover,
+.accordion > .wrapper > .item.box > .head:hover {
+	cursor: pointer;
+}
+
+.accordion > .item.box > .head > .icon,
+.accordion > .wrapper > .item.box > .head > .icon {
+	color: var(--theme);
+}
+.accordion > .item.box > .head > .title,
+.accordion > .wrapper > .item.box > .head > .title {
+	flex-grow: 1;
+	
+	justify-content: flex-start;
+}
+
+@media only screen and (max-width: 1000px) {
+	.accordion > .item.box > .head > .icon,
+	.accordion > .wrapper > .item.box > .head > .icon,
+	.accordion > .item.box > .head > .title,
+	.accordion > .wrapper > .item.box > .head > .title {
+		font-size: 1rem;
+	}
+	
+	.accordion .head > .title .copylink {
+		/* HACK: Fix copylink positioning */
+		top: -0.35rem;
+	}
+}
+
+
+
+.accordion > .item.box > .body-container,
+.accordion > .wrapper > .item.box > .body-container {
+	transition: max-height 0.5s ease-out;
+}
+
+.accordion > .item.box:not(.open) > .body-container,
+.accordion > .wrapper > .item.box:not(.open) > .body-container {
+	max-height: 0;
+}
+
+.accordion > .item.box > .body-container > .body,
+.accordion > .wrapper > .item.box > .body-container > .body {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: nowrap;
+	gap: 1rem;
+	
+	padding: 2rem;
+}
--- a/page/accordion.js
+++ b/page/accordion.js
@ -0,0 +1,208 @@
+"use strict";
+
+let accordion_view_list = [];
+const accordion_resize_observer = new ResizeObserver((changed_item_list) => {
+	for(let one_changed_item of changed_item_list){
+		accordion_body_resize(one_changed_item.target);
+	}
+});
+
+
+
+window.addEventListener("load", function(event){
+	// COLLECT ACCORDION VIEWS //
+	let accordion_root_list = document.getElementsByClassName("accordion");
+	for(let one_accordion_root of accordion_root_list){
+		// collect this view
+		let accordion_view = accordion_collect_view(one_accordion_root);
+		accordion_view_list.push(accordion_view);
+		
+		// initialized this view
+		accordion_init(accordion_view);
+	}
+});
+
+
+
+/**
+* HELPER: Collect data for one accordion view.
+* 
+* @param root		Root element.
+* 
+* @return			Accordion view object.
+*/
+function accordion_collect_view(root){
+	// COLLECT ITEMS //
+	let item_list = [];
+	for(let one_child of root.children){
+		// maybe unwrap
+		if(one_child.classList.contains("wrapper")) one_child = one_child.children[0] ?? null;
+		
+		// validate child as item
+		if(!one_child.classList.contains("item")) continue;
+		
+		// find head element
+		let head;
+		for(let one_item_child of one_child.children){
+			if(one_item_child.classList.contains("head")){
+				head = one_item_child;
+				break;
+			}
+		}
+		if(head === undefined) throw "Unable to find accordion item head";
+		
+		// find icon
+		let icon;
+		for(let one_head_child of head.children){
+			if(one_head_child.classList.contains("icon")){
+				icon = one_head_child;
+				break;
+			}
+		}
+		if(icon === undefined) throw "Unable to find accordion item icon";
+		
+		// find title
+		let title;
+		for(let one_head_child of head.children){
+			if(one_head_child.classList.contains("title")){
+				title = one_head_child;
+				break;
+			}
+		}
+		if(title === undefined) throw "Unable to find accordion item title";
+		
+		// find body container
+		let bodyContainer;
+		for(let one_item_child of one_child.children){
+			if(one_item_child.classList.contains("body-container")){
+				bodyContainer = one_item_child;
+				break;
+			}
+		}
+		if(bodyContainer === undefined) throw "Unable to find accordion body container";
+		
+		// add to item list
+		item_list.push({
+			element: one_child,
+			head: head,
+			icon: icon,
+			title: title,
+			bodyContainer: bodyContainer,
+		});
+	}
+	
+	
+	// BUILD OBJECT //
+	return {
+		root: root,
+		item_list: item_list,
+	};
+}
+
+
+
+/**
+* HELPER: Initialize accordion view.
+* 
+* @param accordion		Accordion view object.
+*/
+function accordion_init(accordion){
+	// REGISTER ONCLICK HANDLERS //
+	for(let one_item of accordion.item_list){
+		// head
+		one_item.head.onclick = function(event){
+			event.stopPropagation();
+			accordion_click(one_item, accordion);
+		};
+		
+		// title
+		one_item.title.tabIndex = 0;
+		one_item.title.onclick = function(event){
+			event.stopPropagation();
+			accordion_click(one_item, accordion);
+		};
+		one_item.title.onkeypress = function(event){
+			if(event.key === "Enter"){
+				event.preventDefault();
+				event.stopPropagation();
+				accordion_click(one_item, accordion);
+			}
+		};
+	}
+	
+	
+	// RESET OPENED STATE //
+	for(let one_item of accordion.item_list){
+		accordion_state_set(one_item, accordion_state_get(one_item));
+	}
+}
+
+
+
+/**
+* CALLBACK: Item head was clicked.
+* 
+* @param item			Accordion item.
+* @param accordion		This item's accordion view object.
+*/
+function accordion_click(item, accordion){
+	// get our old state
+	let old_state = accordion_state_get(item);
+	
+	// close all other items //
+	for(let one_item of accordion.item_list){
+		accordion_state_set(one_item, false);
+	}
+	
+	// set our new state
+	accordion_state_set(item, !old_state);
+}
+
+
+
+/**
+* GETTER: Get state of one accordion item.
+* 
+* @param item		Accordion item.
+*/
+function accordion_state_get(item){
+	return item.element.classList.contains("open");
+}
+
+
+
+/**
+* SETTER: Set state of one accordion item.
+* 
+* @param item		Accordion item.
+* @param state		New state.
+*/
+function accordion_state_set(item, state){
+	// set observe state
+	if(state) accordion_resize_observer.observe(item.bodyContainer);
+	else accordion_resize_observer.unobserve(item.bodyContainer);
+	
+	// update class
+	item.element.classList.remove("open");
+	if(state) item.element.classList.add("open");
+	
+	// update icon direction
+	item.icon.classList.remove("ti-chevron-up", "ti-chevron-right", "ti-chevron-down", "ti-chevron-left");
+	if(state) item.icon.classList.add("ti-chevron-down");
+	else item.icon.classList.add("ti-chevron-right");
+	
+	// set body height
+	if(state) accordion_body_resize(item.bodyContainer);
+	else item.bodyContainer.style.maxHeight = 0;
+}
+
+
+
+/**
+* HELPER: Resize body height.
+* 
+* @param bodyContainer		Accordion body container.
+*/
+function accordion_body_resize(bodyContainer){
+	bodyContainer.style.maxHeight = bodyContainer.scrollHeight + "px";
+}
--- a/page/admin/footer.php
+++ b/page/admin/footer.php
@ -1,34 +0,0 @@
-<?php
-	declare(strict_types = 1);
-	namespace Kimendisch\Sbgg_Jetzt;
-	use Flake\Project;
-	use Flake\File;
-	use Flake\Cookieaccept;
-?>
-
-
-
-
-
-<div class="footer">
-	<div class="brand">
-		<img src="<?= File::file("./asset/logo-256.png") ?>" alt="logo" />
-		<span>SBGG.jetzt</span>
-		<a href="https://git.tjdev.de/kimendisch/sbgg.jetzt" target="_blank"><?= $dict->get("text_sourcecode") ?> <i class="ti ti-external-link"></i></a>
-		<span class="version">v<?= Project::version() ?></span>
-	</div>
-	
-	<?php if(Cookieaccept::is_accepted()){ ?>
-		<div class="cookierevoke">
-			<a href="?cookieaccept=0">Revoke Cookie Permission</a>
-		</div>
-	<?php } ?>
-	
-	<div class="legal">
-		<span>&copy; 2024 Kim Endisch</span>
-		<span class="delimiter">|</span>
-		<a href="<?= $dict->get("link_imprint") ?>" target="_blank"><?= $dict->get("text_imprint") ?> <i class="ti ti-external-link"></i></a>
-		<span class="delimiter">|</span>
-		<a href="<?= $dict->get("link_privacy_policy") ?>" target="_blank"><?= $dict->get("text_privacy_policy") ?> <i class="ti ti-external-link"></i></a>
-	</div>
-</div>
--- a/page/admin/login/index.php
+++ b/page/admin/login/index.php
@ -3,8 +3,6 @@
 	namespace Kimendisch\Sbgg_Jetzt;
 	use Flake\Url_Redirect;
 	use Flake\Request;
-	use Flake\Lang;
-	use Flake\Lang_Dict;
 	use Flake\Page;
 	use Flake\Cookieaccept;
 	use Flake\Csrf;
@ -25,42 +23,30 @@
 	// LANGUAGE MANAGER //
 	// hack: fake get param from constant
 	$_GET["lang"] = "en";
-	
-	// initialize
-	$lang = new Lang(list: ["de", "en"], default: "en");
-	
-	// load dict
-	$dict = new Lang_Dict($lang);
-	require("./page/strings.php");
+	require("./page/lang_base.php");
 	
 	
 	// PAGE INIT //
 	Page::start();
 	
 	Page::title("SBGG.jetzt - Admin Area");
-	Page::icon("./asset/logo-256.png");
-	
-	Page::lang($lang->get());
-	Page::viewport(scale: 1, zoom: true);
-	
 	Page::robots(index: false, follow: false);
-	Page::author("Kim Endisch");
+	Page::$head["og_title"] = '<meta property="og:title" content="SBGG.jetzt - Admin Area" />';
 	
-	Page::$head["analytics"] = '<script defer data-domain="sbgg.jetzt" src="https://analytics.tjdev.de/js/script.js"></script>';
-	Page::css("./page/start/style.css");
-	Page::css("./page/start/style.css.php", eval: true);
+	require("./page/page_base.php");
 	Page::css(__DIR__ . "/style.css");
-	
-	Page::font("ubuntu");
-	Page::font("tabler");
 ?>





+<?php require("./page/nav.php"); ?>
+
+
+
 <?php if(!Cookieaccept::is_accepted()){ ?>
-	<div class="cookie-notice-required">
+	<div id="cookie-notice-required" class="cookie-notice-required">
 		<div class="box important">
 			<span class="title"><i class="ti ti-cookie"></i>Cookies</span>
 			
@ -82,8 +68,8 @@



-<div class="page-container">
-	<div class="page">
+<div class="page-container has-nav">
+	<div id="page" class="page">
 		<div class="section">
 			<div class="content rows">
 				<div id="login" class="box">
@ -118,4 +104,7 @@



-<?php require(dirname(__DIR__) . "/footer.php"); ?>
+<?php
+	Footer::$cookieaccept_but_no_lang = true;
+	require("./page/footer.php");
+?>
--- a/page/admin/newsletter/content.php
+++ b/page/admin/newsletter/content.php
@ -1,8 +1,6 @@
 <?php
 	declare(strict_types = 1);
 	namespace Kimendisch\Sbgg_Jetzt;
-	use Flake\Lang;
-	use Flake\Lang_Dict;
 	use Flake\Page;
 	use Flake\Project;
 	use Flake\Excuse;
@ -47,44 +45,32 @@
 	// LANGUAGE MANAGER //
 	// hack: fake get param from constant
 	$_GET["lang"] = "en";
-	
-	// initialize
-	$lang = new Lang(list: ["de", "en"], default: "en");
-	
-	// load dict
-	$dict = new Lang_Dict($lang);
-	require("./page/strings.php");
+	require("./page/lang_base.php");
 	
 	
 	// PAGE INIT //
 	Page::start();
 	
 	Page::title("SBGG.jetzt - Admin Area");
-	Page::icon("./asset/logo-256.png");
-	
-	Page::lang($lang->get());
-	Page::viewport(scale: 1, zoom: true);
-	
 	Page::robots(index: false, follow: false);
-	Page::author("Kim Endisch");
+	Page::$head["og_title"] = '<meta property="og:title" content="SBGG.jetzt - Admin Area" />';
 	
-	Page::$head["analytics"] = '<script defer data-domain="sbgg.jetzt" src="https://analytics.tjdev.de/js/script.js"></script>';
-	Page::css("./page/start/style.css");
-	Page::css("./page/start/style.css.php", eval: true);
+	require("./page/page_base.php");
 	Page::js(__DIR__ . "/iframe_magic.js");
 	Page::js(__DIR__ . "/send_one.js");
 	Page::js(__DIR__ . "/send_all.js");
-	
-	Page::font("ubuntu");
-	Page::font("tabler");
 ?>





-<div class="page-container full-page">
-	<div class="page">
+<?php require("./page/nav.php"); ?>
+
+
+
+<div class="page-container has-nav full-page">
+	<div id="page" class="page">
 		<div class="section">
 			<div class="content">
 				<div class="button-list align-left">
@ -223,4 +209,7 @@



-<?php require(dirname(__DIR__) . "/footer.php"); ?>
+<?php
+	Footer::$cookieaccept_but_no_lang = true;
+	require("./page/footer.php");
+?>
--- a/page/admin/newsletter/overview.php
+++ b/page/admin/newsletter/overview.php
@ -2,8 +2,6 @@
 	declare(strict_types = 1);
 	namespace Kimendisch\Sbgg_Jetzt;
 	use DateTimeImmutable;
-	use Flake\Lang;
-	use Flake\Lang_Dict;
 	use Flake\Page;
 	
 	// HANDLE AUTHENTICATION //
@ -13,41 +11,29 @@
 	// LANGUAGE MANAGER //
 	// hack: fake get param from constant
 	$_GET["lang"] = "en";
-	
-	// initialize
-	$lang = new Lang(list: ["de", "en"], default: "en");
-	
-	// load dict
-	$dict = new Lang_Dict($lang);
-	require("./page/strings.php");
+	require("./page/lang_base.php");
 	
 	
 	// PAGE INIT //
 	Page::start();
 	
 	Page::title("SBGG.jetzt - Admin Area");
-	Page::icon("./asset/logo-256.png");
-	
-	Page::lang($lang->get());
-	Page::viewport(scale: 1, zoom: true);
-	
 	Page::robots(index: false, follow: false);
-	Page::author("Kim Endisch");
+	Page::$head["og_title"] = '<meta property="og:title" content="SBGG.jetzt - Admin Area" />';
 	
-	Page::$head["analytics"] = '<script defer data-domain="sbgg.jetzt" src="https://analytics.tjdev.de/js/script.js"></script>';
-	Page::css("./page/start/style.css");
-	Page::css("./page/start/style.css.php", eval: true);
-	
-	Page::font("ubuntu");
-	Page::font("tabler");
+	require("./page/page_base.php");
 ?>





-<div class="page-container">
-	<div class="page">
+<?php require("./page/nav.php"); ?>
+
+
+
+<div class="page-container has-nav">
+	<div id="page" class="page">
 		<div class="section">
 			<div class="content">
 				<div class="button-list align-left">
@ -93,4 +79,7 @@



-<?php require(dirname(__DIR__) . "/footer.php"); ?>
+<?php
+	Footer::$cookieaccept_but_no_lang = true;
+	require("./page/footer.php");
+?>
--- a/page/admin/start/index.php
+++ b/page/admin/start/index.php
@ -1,8 +1,6 @@
 <?php
 	declare(strict_types = 1);
 	namespace Kimendisch\Sbgg_Jetzt;
-	use Flake\Lang;
-	use Flake\Lang_Dict;
 	use Flake\Page;
 	
 	// HANDLE AUTHENTICATION //
@ -12,43 +10,31 @@
 	// LANGUAGE MANAGER //
 	// hack: fake get param from constant
 	$_GET["lang"] = "en";
-	
-	// initialize
-	$lang = new Lang(list: ["de", "en"], default: "en");
-	
-	// load dict
-	$dict = new Lang_Dict($lang);
-	require("./page/strings.php");
+	require("./page/lang_base.php");
 	
 	
 	// PAGE INIT //
 	Page::start();
 	
 	Page::title("SBGG.jetzt - Admin Area");
-	Page::icon("./asset/logo-256.png");
-	
-	Page::lang($lang->get());
-	Page::viewport(scale: 1, zoom: true);
-	
 	Page::robots(index: false, follow: false);
-	Page::author("Kim Endisch");
+	Page::$head["og_title"] = '<meta property="og:title" content="SBGG.jetzt - Admin Area" />';
 	
-	Page::$head["analytics"] = '<script defer data-domain="sbgg.jetzt" src="https://analytics.tjdev.de/js/script.js"></script>';
-	Page::css("./page/start/style.css");
-	Page::css("./page/start/style.css.php", eval: true);
-	
-	Page::font("ubuntu");
-	Page::font("tabler");
+	require("./page/page_base.php");
 ?>





-<div class="page-container">
-	<div class="page">
+<?php require("./page/nav.php"); ?>
+
+
+
+<div class="page-container has-nav">
+	<div id="page" class="page">
 		<div class="title">
-			<h1><?= $dict->get("page_title_h1") ?></h1>
+			<h1><?= $dict->get("name") ?></h1>
 			<h2>Admin Area</h2>
 		</div>
 		
@ -86,4 +72,7 @@



-<?php require(dirname(__DIR__) . "/footer.php"); ?>
+<?php
+	Footer::$cookieaccept_but_no_lang = true;
+	require("./page/footer.php");
+?>
--- a/page/copylink.css
+++ b/page/copylink.css
@ -0,0 +1,45 @@
+.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` */
+	
+	pointer-events: none;
+}
+.wrapper.copylink-id > * {
+	pointer-events: initial;
+}
+
+.copylink {
+	position: absolute;
+	padding: 0.5rem;
+	
+	font-size: 1rem;
+	color: #0000;
+}
+.title .copylink {
+	left: -1.3rem;
+	padding-right: 0.2rem;
+}
+.header .copylink {
+	right: -1.3rem;
+	padding-left: 0.2rem;
+}
+*:hover > .copylink {
+	color: var(--color-gray);
+}
+.copylink:hover,
+.copylink:focus-visible {
+	color: var(--color-white);
+	cursor: pointer;
+}
+
+.copylink.feedback-negative,
+.copylink.feedback-positive {
+	opacity: 0;
+	transition: opacity 1s 1.5s linear;
+}
+.copylink.feedback-negative {
+	color: var(--color-red);
+}
+.copylink.feedback-positive {
+	color: var(--color-green);
+}
--- a/page/start/copylink.js
+++ b/page/start/copylink.js
@ -6,7 +6,19 @@ window.addEventListener("load", function(event){
 	let copylink_button_list = document.getElementsByClassName("copylink");
 	for(let one_copylink_button of copylink_button_list){
 		// register onclick function
-		one_copylink_button.onclick = function(){ copylink_click(this) };
+		one_copylink_button.onclick = function(event){
+			event.stopPropagation();
+			copylink_click(this);
+		};
+		
+		// also allow enter press
+		one_copylink_button.onkeypress = function(event){
+			if(event.key === "Enter"){
+				event.preventDefault();
+				event.stopPropagation();
+				copylink_click(event.target);
+			}
+		};
 		
 		// add descriptive title
 		one_copylink_button.title = copylink_hint_text;
@ -90,5 +102,9 @@ function copylink_section_id(self){
 	
 	
 	// CONTINUE SEARCHING //
+	// continue with previous sibling
+	if(self.previousElementSibling !== null) return copylink_section_id(self.previousElementSibling);
+	
+	// continue with parent
 	return copylink_section_id(self.parentElement);
 }
--- a/page/copylink_dict.js.php
+++ b/page/copylink_dict.js.php
@ -0,0 +1,7 @@
+<?php
+	declare(strict_types = 1);
+	namespace Kimendisch\Sbgg_Jetzt;
+	
+	// `copylink_hint_text`
+	echo("let copylink_hint_text = " . json_encode(Lang_Ref::$dict->get("copylink_hint_text")) . ";");
+?>
--- a/page/copylink_strings.php
+++ b/page/copylink_strings.php
@ -0,0 +1,11 @@
+<?php
+	declare(strict_types = 1);
+	namespace Kimendisch\Sbgg_Jetzt;
+	
+	$dict->define([
+		"copylink_hint_text" => [
+			"de" => "Bereichs-Link kopieren",
+			"en" => "Copy section link",
+		],
+	]);
+?>
--- a/page/footer.css
+++ b/page/footer.css
@ -0,0 +1,70 @@
+.footer {
+	width: 100%;
+	
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	flex-wrap: wrap;
+	gap: 2rem;
+	
+	padding: 1rem;
+	
+	background-color: var(--color-bg-light);
+	
+	/* NOTE: This fixes the partial edges when blur is active */
+	-webkit-box-shadow: 0 2rem 0 2rem var(--color-bg-light);
+	-moz-box-shadow: 0 2rem 0 2rem var(--color-bg-light);
+	box-shadow: 0 2rem 0 2rem var(--color-bg-light);
+}
+.footer > div {
+	flex-grow: 1;
+	flex-shrink: 1;
+	flex-basis: 0px;
+	
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	
+	text-align: center;
+}
+.footer > .el-middle {
+	flex-grow: 0;
+}
+@media only screen and (max-width: 1000px) {
+	.footer > div {
+		flex-basis: 100%;
+		justify-content: center !important;
+	}
+}
+
+.footer > div a {
+	font-size: 1rem;
+	color: var(--theme);
+}
+.footer > div a:hover {
+	text-decoration: underline;
+}
+
+.footer .delimiter {
+	color: var(--color-gray);
+}
+.footer .brand {
+	justify-content: flex-start;
+}
+.footer .legal {
+	justify-content: flex-end;
+}
+
+.footer .brand img {
+	height: 2rem;
+}
+.footer .brand .version {
+	color: var(--color-gray);
+}
+
+.footer .lang .selected {
+	font-weight: bold;
+	color: inherit;
+}
--- a/page/footer.php
+++ b/page/footer.php
@ -0,0 +1,48 @@
+<?php
+	declare(strict_types = 1);
+	namespace Kimendisch\Sbgg_Jetzt;
+	use Flake\Page;
+	use Flake\File;
+	use Flake\Project;
+	use Flake\Cookieaccept;
+	
+	Page::css("./page/footer.css");
+	require("./page/footer_strings.php");
+?>
+
+
+
+
+
+<div id="footer" class="footer">
+	<div class="brand">
+		<img src="<?= File::file("./asset/logo-256.png") ?>" alt="logo" />
+		<span>SBGG.jetzt</span>
+		<a href="https://git.tjdev.de/kimendisch/sbgg.jetzt" target="_blank"><?= $dict->get("text_sourcecode") ?> <i class="ti ti-external-link"></i></a>
+		<span class="version">v<?= Project::version() ?></span>
+	</div>
+	
+	<?php if(Footer::$cookieaccept_but_no_lang){ ?>
+		<?php if(Cookieaccept::is_accepted()){ ?>
+			<div class="cookierevoke">
+				<a href="?cookieaccept=0">Revoke Cookie Permission</a>
+			</div>
+		<?php } ?>
+		
+	<?php } else { ?>
+		<div class="lang el-middle">
+			<span><i class="ti ti-world"></i></span>
+			<a <?= ($lang->get() === "de" ? "class=\"selected\"" : "") ?> href="<?= Footer::$lang_href["de"] ?>">DE</a>
+			<span class="delimiter">|</span>
+			<a <?= ($lang->get() === "en" ? "class=\"selected\"" : "") ?> href="<?= Footer::$lang_href["en"] ?>">EN</a>
+		</div>
+	<?php } ?>
+	
+	<div class="legal">
+		<span>&copy; 2024 Kim Endisch</span>
+		<span class="delimiter">|</span>
+		<a href="<?= $dict->get("link_imprint") ?>"><?= $dict->get("text_imprint") ?></a>
+		<span class="delimiter">|</span>
+		<a href="<?= $dict->get("link_privacy_policy") ?>"><?= $dict->get("text_privacy_policy") ?></a>
+	</div>
+</div>
--- a/page/footer_strings.php
+++ b/page/footer_strings.php
@ -0,0 +1,29 @@
+<?php
+	declare(strict_types = 1);
+	namespace Kimendisch\Sbgg_Jetzt;
+	
+	$dict->define([
+		"text_sourcecode" => [
+			"de" => "Quellcode",
+			"en" => "Source Code",
+		],
+
+		"text_imprint" => [
+			"de" => "Impressum",
+			"en" => "Imprint",
+		],
+		"link_imprint" => [
+			"de" => "/impressum",
+			"en" => "/imprint",
+		],
+
+		"text_privacy_policy" => [
+			"de" => "Datenschutz&shy;erklärung",
+			"en" => "Privacy Policy",
+		],
+		"link_privacy_policy" => [
+			"de" => "/datenschutz",
+			"en" => "/privacy",
+		],
+	]);
+?>
--- a/page/imprint/index.php
+++ b/page/imprint/index.php
@ -1,12 +1,8 @@
 <?php
 	declare(strict_types = 1);
 	namespace Kimendisch\Sbgg_Jetzt;
-	use Flake\Lang;
-	use Flake\Lang_Dict;
 	use Flake\Page;
-	use Flake\Project;
 	use Flake\Request;
-	use Flake\File;
 	
 	// LANGUAGE MANAGER //
 	// hack: fake get param from url path
@ -14,46 +10,37 @@
 		"impressum" => "de",
 		"imprint" => "en",
 	])[Request::path()[0] ?? null] ?? "de";
-	
-	// initialize
-	$lang = new Lang(list: ["de", "en"], default: "de");
-	
-	// load dict
-	$dict = new Lang_Dict($lang);
-	require("./page/strings.php");
+	require("./page/lang_base.php");
+	require(__DIR__ . "/strings.php");
 	
 	
 	// PAGE INIT //
 	Page::start();
 	
 	Page::title($dict->get("legal_imprint_page_title"));
-	Page::icon("./asset/logo-256.png");
-	
-	Page::lang($lang->get());
-	Page::viewport(scale: 1, zoom: true);
-	
+	Page::$head["alternate_de"] = '<link rel="alternate" hreflang="de" href="/impressum" />';
+	Page::$head["alternate_en"] = '<link rel="alternate" hreflang="en" href="/imprint" />';
 	Page::robots(index: false, follow: false);
-	Page::author("Kim Endisch");
 	
-	Page::$head["analytics"] = '<script defer data-domain="sbgg.jetzt" src="https://analytics.tjdev.de/js/script.js"></script>';
+	Page::$head["og_title"] = '<meta property="og:title" content="' . $dict->get("legal_imprint_page_title") . '" />';
 	Page::$head["mastodon_verify"] = '<link rel="me" href="https://lsbt.me/@sbggjetzt" />';
 	
-	Page::css("./page/start/style.css");
-	Page::css("./page/start/style.css.php", eval: true);
+	require("./page/page_base.php");
 	Page::css(__DIR__ . "/style.css");
-	
-	Page::font("ubuntu");
-	Page::font("tabler");
 ?>





-<div class="page-container">
-	<div class="page">
+<?php require("./page/nav.php"); ?>
+
+
+
+<div class="page-container has-nav">
+	<div id="page" class="page">
 		<div class="title">
-			<h1><?= $dict->get("page_title_h1") ?></h1>
+			<h1><?= $dict->get("name") ?></h1>
 			<h2><?= $dict->get("legal_imprint_title") ?></h2>
 		</div>
 		
@ -68,26 +55,10 @@



-<div class="footer">
-	<div class="brand">
-		<img src="<?= File::file("./asset/logo-256.png") ?>" alt="logo" />
-		<span>SBGG.jetzt</span>
-		<a href="https://git.tjdev.de/kimendisch/sbgg.jetzt" target="_blank"><?= $dict->get("text_sourcecode") ?> <i class="ti ti-external-link"></i></a>
-		<span class="version">v<?= Project::version() ?></span>
-	</div>
-	
-	<div class="lang">
-		<span><i class="ti ti-world"></i></span>
-		<a <?= ($lang->get() === "de" ? "class=\"selected\"" : "") ?> href="/impressum">DE</a>
-		<span class="delimiter">|</span>
-		<a <?= ($lang->get() === "en" ? "class=\"selected\"" : "") ?> href="/imprint">EN</a>
-	</div>
-	
-	<div class="legal">
-		<span>&copy; 2024 Kim Endisch</span>
-		<span class="delimiter">|</span>
-		<a href="<?= $dict->get("link_imprint") ?>"><?= $dict->get("text_imprint") ?></a>
-		<span class="delimiter">|</span>
-		<a href="<?= $dict->get("link_privacy_policy") ?>"><?= $dict->get("text_privacy_policy") ?></a>
-	</div>
-</div>
+<?php
+	Footer::$lang_href = [
+		"de" => "/impressum",
+		"en" => "/imprint",
+	];
+	require("./page/footer.php");
+?>
--- a/page/imprint/strings.php
+++ b/page/imprint/strings.php
@ -0,0 +1,15 @@
+<?php
+	declare(strict_types = 1);
+	namespace Kimendisch\Sbgg_Jetzt;
+	
+	$dict->define([
+		"legal_imprint_page_title" => [
+			"de" => "SBGG.jetzt - Impressum",
+			"en" => "SBGG.jetzt - Imprint",
+		],
+		"legal_imprint_title" => [
+			"de" => "Impressum",
+			"en" => "Imprint",
+		],
+	]);
+?>
--- a/page/lang_base.php
+++ b/page/lang_base.php
@ -0,0 +1,16 @@
+<?php
+	declare(strict_types = 1);
+	namespace Kimendisch\Sbgg_Jetzt;
+	use Flake\Project;
+	use Flake\Lang;
+	use Flake\Lang_Dict;
+	
+	// LANGUAGE MANAGER //
+	// initialize
+	$lang = new Lang(list: ["de", "en"], default: "de");
+
+	// load global dict
+	$dict = new Lang_Dict($lang);
+	Lang_Ref::$dict = $dict;
+	require("./page/strings.php");
+?>
--- a/page/nav.css
+++ b/page/nav.css
@ -0,0 +1,127 @@
+nav {
+	position: fixed;
+	top: 0;
+	width: 100%;
+	
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	flex-wrap: nowrap;
+	
+	z-index: 1024;
+	
+	box-shadow: #0004 0px 2px 4px;
+	background-color: var(--color-bg-light);
+}
+nav .nav-container {
+	height: 4.3rem; /* NOTE: This is tied to `.page-container` and `nav .menu-mobile` */
+	
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	flex-wrap: nowrap;
+	
+	background-color: inherit;
+	z-index: 1025;
+}
+
+nav .width-governor {
+	width: 50vw; /* NOTE: This is tied to `.page` */
+	padding: 0 4rem; /* NOTE: This is tied to `.page` and many more */
+	
+	display: flex;
+	flex-direction: row;
+	align-items: stretch;
+	justify-content: space-between;
+	flex-wrap: nowrap;
+	gap: 1rem;
+}
+@media only screen and (max-width: 1600px) {
+	nav .width-governor {
+		width: 70vw; /* NOTE: This is tied to `.page` */
+	}
+}
+@media only screen and (max-width: 1300px) {
+	nav .width-governor {
+		width: 80vw; /* NOTE: This is tied to `.page` */
+	}
+}
+@media only screen and (max-width: 1000px) {
+	nav .width-governor {
+		width: 100vw; /* NOTE: This is tied to `.page` */
+		padding: 0 1rem; /* NOTE: This is tied to `.page` */
+	}
+}
+
+nav .width-governor > * {
+	position: relative;
+	
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	
+	text-align: center;
+}
+nav .button-list {
+	height: 100%;
+}
+
+nav .branding {
+	justify-content: flex-start !important;
+}
+nav .branding img {
+	height: 2rem;
+}
+nav .branding span {
+	font-weight: bold;
+}
+
+nav .menu-container {
+	justify-content: flex-end !important;
+}
+nav .menu {
+	gap: 2rem;
+}
+
+nav .menu-mobile {
+	display: none;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: center;
+	flex-wrap: wrap;
+	
+	max-height: calc(100vh - 4.3rem); /* NOTE: This is tied to `.nav-container` and `.page-container` */
+	max-height: calc(100dvh - 4.3rem); /* NOTE: This is tied to `.nav-container` and `.page-container` */
+	padding: 2rem;
+	
+	overflow-y: auto;
+}
+nav .menu-mobile-button {
+	display: none;
+}
+nav .menu-mobile-page-overlay {
+	position: absolute;
+	top: 100%;
+	width: 100vw;
+	height: 100vh;
+	
+	display: none;
+	
+	background-color: #0004;
+}
+@media only screen and (max-width: 600px) {
+	nav .menu {
+		display: none;
+	}
+	nav .menu-mobile {
+		display: flex;
+	}
+	nav .menu-mobile-button {
+		display: inline-flex;
+	}
+	nav .menu-mobile-page-overlay {
+		display: block;
+	}
+}
--- a/page/nav.js
+++ b/page/nav.js
@ -0,0 +1,85 @@
+"use strict";
+
+/**
+* Global element references.
+*/
+let nav_menu_mobile_button;
+let nav_menu_mobile_button_icon;
+let nav_menu;
+let nav_menu_mobile;
+let nav_menu_mobile_page_overlay;
+let nav_ref_page;
+let nav_ref_cookie_notice;
+let nav_ref_footer;
+
+
+
+/**
+* Global states.
+*/
+let nav_menu_mobile_opened = false;
+
+
+
+/**
+* CALLBACK: Initialize.
+*/
+window.addEventListener("load", function(event){
+	// COLLECT ELEMENTS //
+	nav_menu_mobile_button = document.getElementById("nav-menu-mobile-button");
+	nav_menu_mobile_button_icon = nav_menu_mobile_button.getElementsByClassName("icon")[0];
+	nav_menu = document.getElementById("nav-menu");
+	nav_menu_mobile = document.getElementById("nav-menu-mobile");
+	nav_menu_mobile_page_overlay = document.getElementById("nav-menu-mobile-page-overlay");
+	nav_ref_page = document.getElementById("page");
+	nav_ref_cookie_notice = document.getElementById("cookie-notice-required");
+	nav_ref_footer = document.getElementById("footer");
+	
+	
+	// REGISTER ONCLICK HANDLERS //
+	nav_menu_mobile_button.onclick = nav_menu_mobile_toggle;
+	nav_menu_mobile_page_overlay.onclick = nav_menu_mobile_toggle;
+	
+	
+	// COPY MENU CONTENT TO MOBILE MENU //
+	nav_menu_mobile.innerHTML = nav_menu.innerHTML;
+});
+
+
+
+/**
+* CALLBACK: Mobile nav menu button or page overlay was clicked, toggle mobile menu.
+*/
+async function nav_menu_mobile_toggle(){
+	// SET NEW STATE //
+	nav_menu_mobile_opened = !nav_menu_mobile_opened;
+	
+	
+	// CHANGE BUTTON ICON //
+	nav_menu_mobile_button_icon.classList.remove("ti-menu-2", "ti-x");
+	if(nav_menu_mobile_opened) nav_menu_mobile_button_icon.classList.add("ti-x");
+	else nav_menu_mobile_button_icon.classList.add("ti-menu-2");
+	
+	
+	// MAYBE DISPLAY MOBILE MENU //
+	nav_menu_mobile.classList.add("gone");
+	if(nav_menu_mobile_opened) nav_menu_mobile.classList.remove("gone");
+	
+	
+	// SET PAGE, COOKIE NOTICE AND FOOTER FOCUS //
+	nav_ref_page.classList.remove("focus-remove-on-mobile");
+	if(nav_menu_mobile_opened) nav_ref_page.classList.add("focus-remove-on-mobile");
+	
+	if(nav_ref_cookie_notice !== null){
+		nav_ref_cookie_notice.classList.remove("focus-remove-on-mobile");
+		if(nav_menu_mobile_opened) nav_ref_cookie_notice.classList.add("focus-remove-on-mobile");
+	}
+	
+	nav_ref_footer.classList.remove("focus-remove-on-mobile");
+	if(nav_menu_mobile_opened) nav_ref_footer.classList.add("focus-remove-on-mobile");
+	
+	
+	// MAYBE DISPLAY PAGE OVERLAY //
+	nav_menu_mobile_page_overlay.classList.add("gone");
+	if(nav_menu_mobile_opened) nav_menu_mobile_page_overlay.classList.remove("gone");
+}
--- a/page/nav.php
+++ b/page/nav.php
@ -0,0 +1,53 @@
+<?php
+	declare(strict_types = 1);
+	namespace Kimendisch\Sbgg_Jetzt;
+	use Flake\Page;
+	use Flake\File;
+	
+	Page::js("./page/nav.js");
+	Page::css("./page/nav.css");
+	require("./page/nav_strings.php");
+?>
+
+
+
+
+
+<nav>
+	<div class="nav-container">
+		<div class="width-governor">
+			<div class="branding">
+				<div class="button-list">
+					<a href="<?= $dict->get("nav_start_link") ?>" class="button tertiary">
+						<img src="<?= File::file("./asset/logo-256.png") ?>" alt="Logo" />
+						<span><?= $dict->get("nav_branding_name") ?></span>
+					</a>
+				</div>
+			</div>
+			
+			<div class="menu-container">
+				<div class="button-list">
+					<button id="nav-menu-mobile-button" class="menu-mobile-button button secondary">
+						<span class="icon ti ti-menu-2"></span>
+						<span class="text"><?= $dict->get("nav_menu") ?></span>
+					</button>
+				</div>
+				
+				<div id="nav-menu" class="menu button-list">
+					<a href="<?= $dict->get("nav_start_link") ?>" class="button tertiary <?= (Nav::$active === "start" ? "active" : "") ?>">
+						<span class="icon ti ti-home"></span>
+						<span class="text"><?= $dict->get("nav_start_button") ?></span>
+					</a>
+					
+					<a href="<?= $dict->get("nav_timeline_link") ?>" class="button tertiary <?= (Nav::$active === "timeline" ? "active" : "") ?>">
+						<span class="icon ti ti-clock"></span>
+						<span class="text"><?= $dict->get("nav_timeline_button") ?></span>
+					</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	
+	<div id="nav-menu-mobile" class="menu-mobile button-list gone"></div>
+	<div id="nav-menu-mobile-page-overlay" class="menu-mobile-page-overlay gone"></div>
+</nav>
--- a/page/nav_strings.php
+++ b/page/nav_strings.php
@ -0,0 +1,33 @@
+<?php
+	declare(strict_types = 1);
+	namespace Kimendisch\Sbgg_Jetzt;
+	
+	$dict->define([
+		"nav_branding_name" => [
+			"de" => "SBGG.jetzt",
+			"en" => "SBGG.jetzt",
+		],
+		"nav_menu" => [
+			"de" => "Menü",
+			"en" => "Menu",
+		],
+
+		"nav_start_link" => [
+			"de" => "/",
+			"en" => "/en",
+		],
+		"nav_start_button" => [
+			"de" => "Startseite",
+			"en" => "Home",
+		],
+
+		"nav_timeline_link" => [
+			"de" => "/timeline",
+			"en" => "/en/timeline",
+		],
+		"nav_timeline_button" => [
+			"de" => "Timeline",
+			"en" => "Timeline",
+		],
+	]);
+?>
--- a/page/newsletter/style.css
+++ b/page/newsletter/style.css
@ -0,0 +1,7 @@
+.page-form .section .box {
+	align-items: flex-start;
+}
+.page-form .section .box.box-main-form {
+	flex-basis: 22rem;
+	flex-grow: 64;
+}
--- a/page/newsletter/subscribe/index.php
+++ b/page/newsletter/subscribe/index.php
@ -1,14 +1,10 @@
 <?php
 	declare(strict_types = 1);
 	namespace Kimendisch\Sbgg_Jetzt;
-	use Flake\Lang;
-	use Flake\Lang_Dict;
 	use Flake\Page;
-	use Flake\Project;
 	use Flake\Url;
 	use Flake\Url_Redirect;
 	use Flake\Request;
-	use Flake\File;
 	
 	// COLLECT REQUEST DATA //
 	// mail address
@ -22,35 +18,21 @@
 	// hack: fake get param from url path
 	$param_lang = $_GET["slang"] ?? "de";
 	$_GET["lang"] = $param_lang;
-	
-	// initialize
-	$lang = new Lang(list: ["de", "en"], default: "de");
-	
-	// load dict
-	$dict = new Lang_Dict($lang);
-	require("./page/strings.php");
+	require("./page/lang_base.php");
+	require("./page/start/strings.php");
 	
 	
 	// PAGE INIT //
 	Page::start();
 	
 	Page::title($dict->get("newsletter_subscribe_page_title"));
-	Page::icon("./asset/logo-256.png");
-	
-	Page::lang($lang->get());
-	Page::viewport(scale: 1, zoom: true);
-	
 	Page::robots(index: false, follow: false);
-	Page::author("Kim Endisch");
+	Page::$head["og_title"] = '<meta property="og:title" content="' . $dict->get("newsletter_subscribe_page_title") . '" />';
 	
-	Page::$head["analytics"] = '<script defer data-domain="sbgg.jetzt" src="https://analytics.tjdev.de/js/script.js"></script>';
-	
-	Page::css("./page/start/style.css");
-	Page::css("./page/start/style.css.php", eval: true);
+	require("./page/page_base.php");
 	Page::js(__DIR__ . "/main.js");
-	
-	Page::font("ubuntu");
-	Page::font("tabler");
+	Page::css("./page/start/style.css");
+	Page::css(dirname(__DIR__) . "/style.css");
 ?>


@ -58,10 +40,10 @@


 <div class="page-container">
-	<div class="page">
-		<div id="news" class="section">
+	<div class="page page-form">
+		<div class="section">
 			<div class="content rows">
-				<div id="newsletter" class="box">
+				<div class="box box-main-form">
 					<span class="title"><?= $dict->get("newsletter_subscribe_title") ?></span>
 					
 					<div id="newsletter-signup-form-container" class="form-container">
@ -115,26 +97,10 @@



-<div class="footer">
-	<div class="brand">
-		<img src="<?= File::file("./asset/logo-256.png") ?>" alt="logo" />
-		<span>SBGG.jetzt</span>
-		<a href="https://git.tjdev.de/kimendisch/sbgg.jetzt" target="_blank"><?= $dict->get("text_sourcecode") ?> <i class="ti ti-external-link"></i></a>
-		<span class="version">v<?= Project::version() ?></span>
-	</div>
-	
-	<div class="lang">
-		<span><i class="ti ti-world"></i></span>
-		<a <?= ($lang->get() === "de" ? "class=\"selected\"" : "") ?> href="<?= Url::query_modify(remove: ["slang"], add: ["slang=de"]) ?>">DE</a>
-		<span class="delimiter">|</span>
-		<a <?= ($lang->get() === "en" ? "class=\"selected\"" : "") ?> href="<?= Url::query_modify(remove: ["slang"], add: ["slang=en"]) ?>">EN</a>
-	</div>
-	
-	<div class="legal">
-		<span>&copy; 2024 Kim Endisch</span>
-		<span class="delimiter">|</span>
-		<a href="<?= $dict->get("link_imprint") ?>" target="_blank"><?= $dict->get("text_imprint") ?> <i class="ti ti-external-link"></i></a>
-		<span class="delimiter">|</span>
-		<a href="<?= $dict->get("link_privacy_policy") ?>" target="_blank"><?= $dict->get("text_privacy_policy") ?> <i class="ti ti-external-link"></i></a>
-	</div>
-</div>
+<?php
+	Footer::$lang_href = [
+		"de" => Url::query_modify(remove: ["slang"], add: ["slang=de"]),
+		"en" => Url::query_modify(remove: ["slang"], add: ["slang=en"]),
+	];
+	require("./page/footer.php");
+?>
--- a/page/newsletter/unsubscribe/index.php
+++ b/page/newsletter/unsubscribe/index.php
@ -1,11 +1,7 @@
 <?php
 	declare(strict_types = 1);
 	namespace Kimendisch\Sbgg_Jetzt;
-	use Flake\Lang;
-	use Flake\Lang_Dict;
 	use Flake\Page;
-	use Flake\File;
-	use Flake\Project;
 	use Flake\Url;
 	use Flake\Url_Redirect;
 	use Flake\Request;
@ -22,35 +18,21 @@
 	// hack: fake get param from url path
 	$param_lang = $_GET["slang"] ?? "de";
 	$_GET["lang"] = $param_lang;
-	
-	// initialize
-	$lang = new Lang(list: ["de", "en"], default: "de");
-	
-	// load dict
-	$dict = new Lang_Dict($lang);
-	require("./page/strings.php");
+	require("./page/lang_base.php");
+	require("./page/start/strings.php");
 	
 	
 	// PAGE INIT //
 	Page::start();
 	
 	Page::title($dict->get("newsletter_unsubscribe_page_title"));
-	Page::icon("./asset/logo-256.png");
-	
-	Page::lang($lang->get());
-	Page::viewport(scale: 1, zoom: true);
-	
 	Page::robots(index: false, follow: false);
-	Page::author("Kim Endisch");
+	Page::$head["og_title"] = '<meta property="og:title" content="' . $dict->get("newsletter_unsubscribe_page_title") . '" />';
 	
-	Page::$head["analytics"] = '<script defer data-domain="sbgg.jetzt" src="https://analytics.tjdev.de/js/script.js"></script>';
-	
-	Page::css("./page/start/style.css");
-	Page::css("./page/start/style.css.php", eval: true);
+	require("./page/page_base.php");
 	Page::js(__DIR__ . "/main.js");
-	
-	Page::font("ubuntu");
-	Page::font("tabler");
+	Page::css("./page/start/style.css");
+	Page::css(dirname(__DIR__) . "/style.css");
 ?>


@ -58,10 +40,10 @@


 <div class="page-container">
-	<div class="page">
-		<div id="news" class="section">
+	<div class="page page-form">
+		<div class="section">
 			<div class="content rows">
-				<div id="newsletter" class="box">
+				<div class="box box-main-form">
 					<span class="title"><?= $dict->get("newsletter_unsubscribe_title") ?></span>
 					
 					<div id="newsletter-signup-form-container" class="form-container">
@ -106,26 +88,10 @@



-<div class="footer">
-	<div class="brand">
-		<img src="<?= File::file("./asset/logo-256.png") ?>" alt="logo" />
-		<span>SBGG.jetzt</span>
-		<a href="https://git.tjdev.de/kimendisch/sbgg.jetzt" target="_blank"><?= $dict->get("text_sourcecode") ?> <i class="ti ti-external-link"></i></a>
-		<span class="version">v<?= Project::version() ?></span>
-	</div>
-	
-	<div class="lang">
-		<span><i class="ti ti-world"></i></span>
-		<a <?= ($lang->get() === "de" ? "class=\"selected\"" : "") ?> href="<?= Url::query_modify(remove: ["slang"], add: ["slang=de"]) ?>">DE</a>
-		<span class="delimiter">|</span>
-		<a <?= ($lang->get() === "en" ? "class=\"selected\"" : "") ?> href="<?= Url::query_modify(remove: ["slang"], add: ["slang=en"]) ?>">EN</a>
-	</div>
-	
-	<div class="legal">
-		<span>&copy; 2024 Kim Endisch</span>
-		<span class="delimiter">|</span>
-		<a href="<?= $dict->get("link_imprint") ?>" target="_blank"><?= $dict->get("text_imprint") ?> <i class="ti ti-external-link"></i></a>
-		<span class="delimiter">|</span>
-		<a href="<?= $dict->get("link_privacy_policy") ?>" target="_blank"><?= $dict->get("text_privacy_policy") ?> <i class="ti ti-external-link"></i></a>
-	</div>
-</div>
+<?php
+	Footer::$lang_href = [
+		"de" => Url::query_modify(remove: ["slang"], add: ["slang=de"]),
+		"en" => Url::query_modify(remove: ["slang"], add: ["slang=en"]),
+	];
+	require("./page/footer.php");
+?>
--- a/page/page_base.php
+++ b/page/page_base.php
@ -0,0 +1,41 @@
+<?php
+	declare(strict_types = 1);
+	namespace Kimendisch\Sbgg_Jetzt;
+	use Flake\Page;
+	use Flake\File;
+	use Flake\Url;
+	
+	// PAGE INIT //
+	Page::icon("./asset/logo-256.png");
+	Page::description($dict->get("description"));
+	Page::lang($lang->get());
+	Page::viewport(scale: 1, zoom: true);
+	
+	Page::author("Kim Endisch");
+	Page::keywords("selbstbestimmungsgesetz-jetzt", "sbgg-jetzt", "selbstbestimmungsgesetz", "selbstbestimmung", "sbgg", "SBGG", "tsg", "transsexuellengesetz", "trans", "nicht-binär", "non-binary", "deutschland", "gender", "geschlecht", "identität", "roadmap", "timeline", "stand", "aktuell", "aktueller stand", "wann", "wann kommt", "inkrafttreten", "referentenentwurf");
+	
+	Page::$head["og_description"] = '<meta property="og:description" content="' . $dict->get("description") . '" />';
+	Page::$head["og_type"] = '<meta property="og:type" content="website" />';
+	$banner_file_path = ([
+		"de" => "./asset/banner-de-bg-1920.png",
+		"en" => "./asset/banner-en-bg-1920.png",
+	])[$lang->get()] ?? "./asset/banner-de-bg-1920.png";
+	Page::$head["og_image"] = '<meta property="og:image" content="' . File::file($banner_file_path) . '" />';
+	Page::$head["og_url"] = '<meta property="og:url" content="' . Url::full() . '" />';
+	
+	Page::$head["analytics"] = '<script defer data-domain="sbgg.jetzt" src="https://analytics.tjdev.de/js/script.js"></script>';
+	
+	Page::css("./page/style.css");
+	Page::css("./page/style.css.php", eval: true);
+	
+	require("./page/copylink_strings.php");
+	Page::js("./page/copylink_dict.js.php", eval: true);
+	Page::js("./page/copylink.js");
+	Page::css("./page/copylink.css");
+	
+	Page::js("./page/accordion.js");
+	Page::css("./page/accordion.css");
+	
+	Page::font("ubuntu");
+	Page::font("tabler");
+?>
--- a/page/privacy/index.php
+++ b/page/privacy/index.php
@ -1,12 +1,8 @@
 <?php
 	declare(strict_types = 1);
 	namespace Kimendisch\Sbgg_Jetzt;
-	use Flake\Lang;
-	use Flake\Lang_Dict;
 	use Flake\Page;
-	use Flake\Project;
 	use Flake\Request;
-	use Flake\File;
 	
 	// LANGUAGE MANAGER //
 	// hack: fake get param from url path
@ -14,46 +10,37 @@
 		"datenschutz" => "de",
 		"privacy" => "en",
 	])[Request::path()[0] ?? null] ?? "de";
-	
-	// initialize
-	$lang = new Lang(list: ["de", "en"], default: "de");
-	
-	// load dict
-	$dict = new Lang_Dict($lang);
-	require("./page/strings.php");
+	require("./page/lang_base.php");
+	require(__DIR__ . "/strings.php");
 	
 	
 	// PAGE INIT //
 	Page::start();
 	
 	Page::title($dict->get("legal_privacy_page_title"));
-	Page::icon("./asset/logo-256.png");
-	
-	Page::lang($lang->get());
-	Page::viewport(scale: 1, zoom: true);
-	
+	Page::$head["alternate_de"] = '<link rel="alternate" hreflang="de" href="/datenschutz" />';
+	Page::$head["alternate_en"] = '<link rel="alternate" hreflang="en" href="/privacy" />';
 	Page::robots(index: false, follow: false);
-	Page::author("Kim Endisch");
 	
-	Page::$head["analytics"] = '<script defer data-domain="sbgg.jetzt" src="https://analytics.tjdev.de/js/script.js"></script>';
+	Page::$head["og_title"] = '<meta property="og:title" content="' . $dict->get("legal_privacy_page_title") . '" />';
 	Page::$head["mastodon_verify"] = '<link rel="me" href="https://lsbt.me/@sbggjetzt" />';
 	
-	Page::css("./page/start/style.css");
-	Page::css("./page/start/style.css.php", eval: true);
+	require("./page/page_base.php");
 	Page::css("./page/imprint/style.css");
-	
-	Page::font("ubuntu");
-	Page::font("tabler");
 ?>





-<div class="page-container">
-	<div class="page">
+<?php require("./page/nav.php"); ?>
+
+
+
+<div class="page-container has-nav">
+	<div id="page" class="page">
 		<div class="title">
-			<h1><?= $dict->get("page_title_h1") ?></h1>
+			<h1><?= $dict->get("name") ?></h1>
 			<h2><?= $dict->get("legal_privacy_title") ?></h2>
 		</div>
 		
@ -68,26 +55,10 @@



-<div class="footer">
-	<div class="brand">
-		<img src="<?= File::file("./asset/logo-256.png") ?>" alt="logo" />
-		<span>SBGG.jetzt</span>
-		<a href="https://git.tjdev.de/kimendisch/sbgg.jetzt" target="_blank"><?= $dict->get("text_sourcecode") ?> <i class="ti ti-external-link"></i></a>
-		<span class="version">v<?= Project::version() ?></span>
-	</div>
-	
-	<div class="lang">
-		<span><i class="ti ti-world"></i></span>
-		<a <?= ($lang->get() === "de" ? "class=\"selected\"" : "") ?> href="/datenschutz">DE</a>
-		<span class="delimiter">|</span>
-		<a <?= ($lang->get() === "en" ? "class=\"selected\"" : "") ?> href="/privacy">EN</a>
-	</div>
-	
-	<div class="legal">
-		<span>&copy; 2024 Kim Endisch</span>
-		<span class="delimiter">|</span>
-		<a href="<?= $dict->get("link_imprint") ?>"><?= $dict->get("text_imprint") ?></a>
-		<span class="delimiter">|</span>
-		<a href="<?= $dict->get("link_privacy_policy") ?>"><?= $dict->get("text_privacy_policy") ?></a>
-	</div>
-</div>
+<?php
+	Footer::$lang_href = [
+		"de" => "/datenschutz",
+		"en" => "/privacy",
+	];
+	require("./page/footer.php");
+?>
--- a/page/privacy/strings.php
+++ b/page/privacy/strings.php
@ -0,0 +1,15 @@
+<?php
+	declare(strict_types = 1);
+	namespace Kimendisch\Sbgg_Jetzt;
+	
+	$dict->define([
+		"legal_privacy_page_title" => [
+			"de" => "SBGG.jetzt - Datenschutzerklärung",
+			"en" => "SBGG.jetzt - Privacy Policy",
+		],
+		"legal_privacy_title" => [
+			"de" => "Datenschutz&shy;erklärung",
+			"en" => "Privacy Policy",
+		],
+	]);
+?>
--- a/page/start/copylink_dict.js.php
+++ b/page/start/copylink_dict.js.php
@ -1,10 +0,0 @@
-<?php
-	declare(strict_types = 1);
-	namespace Kimendisch\Sbgg_Jetzt;
-	
-	// MAKE TRANSLATION DICT AVAILABLE VIA JAVASCRIPT //
-	global $kimendisch_sbgg_jetzt_dict;
-	
-	// `copylink_hint_text`
-	echo("let copylink_hint_text = " . json_encode($kimendisch_sbgg_jetzt_dict->get("copylink_hint_text")) . ";");
-?>
--- a/page/start/countdown.js
+++ b/page/start/countdown.js
@ -0,0 +1,51 @@
+"use strict";
+
+let countdown_h1;
+
+window.addEventListener("load", function(){
+	// STORE ELEMENTS //
+	countdown_h1 = document.getElementById("countdown-h1");
+	
+	
+	// PERIODIC REDRAW //
+	countdown_redraw();
+	setInterval(countdown_redraw, 3000);
+});
+
+
+
+/**
+* SCHEDULED: Update countdown text.
+*/
+async function countdown_redraw(){
+	// CALCULATE TIME DIFF //
+	let now = new Date();
+	let goal = new Date(2024, (8 -1), 1, 8, 0);
+	let difference = Math.max(0, goal.getTime() - now.getTime());
+	
+	// days
+	let days_raw = Math.floor(difference / (24 * 60 * 60 * 1000));
+	let days = days_raw;
+	
+	// hours
+	let hours_raw = Math.floor((difference - (days_raw * 86400000)) / (3600000));
+	let hours = (hours_raw < 10 ? ("0" + hours_raw) : hours_raw);
+	
+	// minutes
+	let minutes_raw = Math.floor((difference - (days_raw * 86400000) - (hours_raw * 3600000)) / (60000));
+	let minutes = (minutes_raw < 10 ? ("0" + minutes_raw) : minutes_raw);
+	
+	
+	// FORMAT TEXT //
+	// start with days
+	let formatted = days + "d";
+	
+	// add hours
+	formatted += " " + hours + "h";
+	
+	// add minutes
+	formatted += " " + minutes + "m";
+	
+	// set text
+	countdown_h1.textContent = formatted;
+}
--- a/page/start/index.php
+++ b/page/start/index.php
--- a/page/start/strings.php
+++ b/page/start/strings.php
@ -0,0 +1,669 @@
+<?php
+	declare(strict_types = 1);
+	namespace Kimendisch\Sbgg_Jetzt;
+	
+	$dict->define([
+		"title" => [
+			"de" => "SBGG.jetzt - Alle Infos zum Selbstbestimmungsgesetz",
+			"en" => "SBGG.jetzt - Everything about the German Self-Determination Law",
+		],
+		
+		"page_title_h2" => [
+			"de" => "Alle Infos zum Selbstbestimmungsgesetz",
+			"en" => "Everything about the German Self-Determination Law",
+		],
+		"page_countdown_h2" => [
+			"de" => "01&nbsp;Aug&nbsp;2024&ensp;&bull;&ensp;Anmeldung beim Standesamt wird möglich",
+			"en" => "01&nbsp;Aug&nbsp;2024&ensp;&bull;&ensp;Registration at the registry office becomes possible",
+		],
+		
+		
+		
+		
+		
+		"sect_steps_title" => [
+			"de" => "In 5 Schritten zur Personenstandsänderung",
+			"en" => "Changing Civil Status in 5 Steps",
+		],
+		
+		"steps_note" => [
+			"de" => "Folgende Anleitung umreißt die für die Personenstandsänderung einer volljährigen geschäftsfähigen Person mit deutscher Staatsangehörigkeit nach SBGG notwendigen Schritte und Überlegungen. Zusatzinformationen für minderjährige bzw. nicht geschäftsfähige Personen und Menschen ohne deutsche Staatsangehörigkeit finden sich weiter unten im <a href=\"#faq\">FAQ</a>.",
+			"en" => "Following instructions outline the steps and considerations necessary for changing the civil status of an adult with legal competence and German citizenship in accordance with the SBGG. Additional information for minors or persons without legal competence and people without German citizenship can be found in the <a href=\"#faq\">FAQ</a> below.",
+		],
+		
+		
+		
+		
+		
+		"step_1_title" => [
+			"de" => "Informieren",
+			"en" => "Inform Yourself",
+		],
+		"step_1_text" => [
+			"de" => [
+				"Da es bei der genauen Interpretation des Gesetzes große Unterschiede zwischen den Standesämtern gibt, ist es zu empfehlen, sich im Vorfeld zu informieren. Ausschlaggebend hierbei ist das für dich zuständige Standesamt. Das ist in der Regel das Standesamt, das dich in das Geburtenregister eingetragen hat (<i>Geburtsstandesamt</i>, <span class=\"inline gray\">weitere Infos zur Zuständigkeit im <a href=\"#faq\">FAQ</a></span>). Wenn Du deine Erklärung bei einem anderen Standesamt abgeben möchtest ist es ratsam, sich zusätzlich auch über dessen Vorgaben zu informieren.",
+				"Viele Standesämter, vor allem in großen Städten, haben hierzu bereits Informationen auf ihrer Webseite. Ist dies nicht der Fall, kannst Du dem Standesamt einfach eine kurze E-Mail schreiben oder dort anrufen. Wichtige Fragen, die Du klären solltest, sind unter Anderem:",
+			],
+			"en" => [
+				"Since there are large differences between registry offices in the exact interpretation of the law, it is advisable to find out more in advance. The decisive factor here is the registry office responsible for you. This is usually the registry office that entered you into the birth register (<i>birth registry office</i>, <span class=\"inline gray\">further information on responsibility in the <a href=\"#faq\">FAQ</a></span>). If you would like to make your declaration at another registry office, it is advisable to also find out about its requirements.",
+				"Many registry offices, especially in large cities, already have information about this on their websites. If this is not the case, you can simply write a short email to the registry office or call them. Important questions that you should clarify include:",
+			],
+		],
+		"step_1_list" => [
+			"de" => [
+				"Wie findet die Anmeldung statt? Geht die Anmeldung auch Telefonisch? Gibt es ein Formular für eine schriftliche Anmeldung?",
+				"Welche Dokumente sind für die Anmeldung und/oder die Erklärung notwendig? <span class=\"inline gray\">(Viele Standesämter verlangen eine Geburtsurkunde, diese muss ggf. bereits im Voraus beantragt werden)</span>",
+				"Muss die Anzahl der gewählten neuen Vornamen gleich der alten Anzahl an Vornamen sein? <span class=\"inline gray\">(Mehr dazu im <a href=\"#faq\">FAQ</a>)</span>",
+			],
+			"en" => [
+				"How does the registration take place? Can I register by phone? Is there a printable form for the registration?",
+				"Which documents are necessary for registration and/or declaration? <span class=\"inline gray\">(Many registry offices require a birth certificate, which may have to be applied for in advance)</span>",
+				"Does the number of new first names chosen have to be equal to the old number of first names? <span class=\"inline gray\">(More on this in the <a href=\"#faq\">FAQ</a>)</span>",
+			],
+		],
+		
+		
+		
+		
+		
+		"step_2_date" => [
+			"de" => "ab 01 Aug 2024",
+			"en" => "from 01 Aug 2024",
+		],
+		"step_2_title" => [
+			"de" => "Anmelden",
+			"en" => "Registration",
+		],
+		"step_2_text" => [
+			"de" => [
+				"Damit Du deinen Geschlechtseintrag und deine Vornamen ändern kannst, musst Du dich mindestens drei Monate vorher anmelden. Diese Anmeldung muss bei dem selben Standesamt geschehen, bei dem Du danach auch deine Personenstandsänderung vornehmen lassen möchtest (<i>Erklärung</i>).",
+				"Diese Anmeldung kannst Du entweder persönlich vor Ort erklären, oder in Schriftform per Post an das Standesamt senden. Viele Standesämter haben hierfür bereits Formulare auf ihrer Webseite. Gibt es kein Formular, kannst Du die Anmeldung auch formlos vornehmen, z.B. mit dem Satz \"<i>Hiermit Melde ich die Abgabe einer Erklärung zur Änderung meines Geschlechtseintrags und meiner Vornamen nach § 4 SBGG an.</i>\". Wichtig hierbei ist, dass deine Anmeldung deinen derzeit rechtskräftigen Namen, dein Geburtsdatum und deinen Geburtsort, deine Meldeadresse und deine Unterschrift enthält!",
+				"Abhängig vom Standesamt ist die Anmeldung auch telefonisch oder per Fax möglich.",
+			],
+			"en" => [
+				"In order to change your gender entry and your first names, you must register at least three months in advance. This registration must be done at the same registry office where you would like to have your civil status change made (<i>Declaration</i>).",
+				"You can either declare this registration in person on site or send it in written form by post to the registry office. Many registry offices already have printable forms for this on their websites. If there is no form, you can also register informally. Here it is important that your registration contains your current legal name, your date and place of birth, your home address and your signature!",
+				"Depending on the registry office, registration is also possible by telephone or fax.",
+			],
+		],
+		
+		
+		
+		
+		
+		"step_3_date" => [
+			"de" => "ab 01 Nov 2024, 3-6 Monate nach Anmeldung",
+			"en" => "from 01 Nov 2024, 3-6 months after registration",
+		],
+		"step_3_title" => [
+			"de" => "Erklärung Vornehmen",
+			"en" => "Declaration",
+		],
+		"step_3_text" => [
+			"de" => [
+				"Drei Monate nach der Anmeldung hast Du weitere drei Monate Zeit, die tatsächliche Erklärung zur Änderung deines Personenstands vor Ort abzugeben. Nimmst Du die Erklärung nicht innerhalb von sechs Monaten nach der Anmeldung wahr, musst Du dich erneut anmelden und drei Monate warten. Hast Du dich beispielsweise am 1. August angemeldet, kannst Du die Erklärung im November, Dezember oder Januar vornehmen.",
+				"Zur Erklärung solltest Du einen Ausweis (z.B. Personalausweis oder Reisepass) mitbringen. Viele Standesämter verlangen zusätzlich eine Geburtsurkunde und ggf. eine Ehe- oder Lebenspartnerschaftsurkunde. Je nach Standesamt kann es ratsam sein, für die Abgabe der Erklärung einen Termin zu vereinbaren.",
+				"Nun musst Du dich für einen neuen Geschlechtseintrag und neue Vornamen entscheiden. Mögliche Geschlechtsangaben sind <i>\"weiblich\"</i>, <i>\"männlich\"</i>, <i>\"divers\"</i> oder die Streichung des Eintrags. Dein neuer Vorname bzw. deine neuen Vornamen müssen zu deinem gewählten Geschlechtseintrag passen. <span class=\"inline gray\">(Mehr dazu im <a href=\"#faq\">FAQ</a>)</span>",
+				"Zuletzt musst Du versichern, dass dein gewählter Geschlechtseintrag deiner Geschlechtsidentität am besten entspricht und, dass dir die Tragweite der durch die Erklärung bewirkten Folgen bewusst ist.",
+			],
+			"en" => [
+				"Three months after registration, you have another three months to make the actual declaration of change in your civil status on site. If you do not make the declaration within six months of registration, you must register again and wait three months. For example, if you registered on August 1st, you can submit the declaration in November, December or January.",
+				"You should bring an ID (e.g. <i>Personalausweis</i> (identity card) or passport) with you for the declaration. Many registry offices also require a birth certificate and, if applicable, a marriage or civil partnership certificate. Depending on the registry office, it may be advisable to make an appointment to submit the declaration.",
+				"Now you have to decide on a new gender entry and new first names. Possible gender specifications are <i>\"weiblich\"</i> (female), <i>\"männlich\"</i> (male), <i>\"divers\"</i> (diverse) or deletion of the entry. Your new first name(s) must match your chosen gender entry. <span class=\"inline gray\">(More on this in the <a href=\"#faq\">FAQ</a>)</span>",
+				"Finally, you must confirm that your chosen gender entry best corresponds to your gender identity and that you are aware of the consequences of the declaration.",
+			],
+		],
+		
+		
+		
+		
+		
+		"step_4_title" => [
+			"de" => "Beantragen neuer Ausweisdokumente und Zeugnisse",
+			"en" => "Applying for new Identification Documents and Certificates",
+		],
+		"step_4_text" => [
+			"de" => [
+				"Nachdem Du nun einen anderen rechtskräftigen Namen führst, musst Du auch Ausweise und andere Zeugnisse neu ausstellen lassen. <span class=\"inline gray\">(Mehr zu den Kosten im <a href=\"#faq\">FAQ</a>)</span>",
+				"Dokumente, die Du mit deinem neuen Namen beantragen solltest, sind unter Anderem:",
+			],
+			"en" => [
+				"Now that you have a different legal name, you will also need to have your ID cards and other documents reissued. <span class=\"inline gray\">(More about the costs in the <a href=\"#faq\">FAQ</a>)</span>",
+				"Documents you should apply for with your new name include:",
+			],
+		],
+		"step_4_list" => [
+			"de" => [
+				"Personalausweis und Reisepass",
+				"Führerschein",
+				"Zeugnisse (z.B. Schulabschluss)",
+			],
+			"en" => [
+				"<i>Personalausweis</i> (identity card) and passport",
+				"Driver's license",
+				"Certificates (e.g. graduation)",
+			],
+		],
+		
+		
+		
+		
+		
+		"step_5_title" => [
+			"de" => "Ändern des Personenstands in nichtamtlichen Registern",
+			"en" => "Changing Civil Status in nonofficial Registers",
+		],
+		"step_5_text" => [
+			"de" => [
+				"Deine persönlichen Angaben finden sich auch in den Akten vieler nichtamtlicher Organisationen wieder. Diese werden im Normalfall nicht automatisch über deine Personenstandsänderung in Kenntnis gesetzt, sondern sind darauf angewiesen, dass Du sie über die Änderung deines Geschlechtseintrags und deiner Vornamen informierst. Hier einige Beispiele:",
+			],
+			"en" => [
+				"Your personal information can also be found in the files of many nonofficial organizations. Normally, they will not be informed automatically about your change in civil status, but will rely on you to inform them about the change in your gender entry and your first names. Here are some examples:",
+			],
+		],
+		"step_5_list" => [
+			"de" => [
+				"Deine Schule, deine Uni und/oder dein Arbeitgeber",
+				"Deine Bank und/oder Zahlungsdienstleister",
+				"Versicherungen",
+				"Vereine, bei denen Du Mitglied bist",
+			],
+			"en" => [
+				"Your school, your university and/or your employer",
+				"Your bank and/or payment service providers",
+				"Your Insurance",
+				"Clubs you are a member of",
+			],
+		],
+		
+		
+		
+		
+		
+		"sect_faq_title" => [
+			"de" => "Häufig gestellte Fragen (FAQ)",
+			"en" => "Frequently Asked Questions",
+		],
+		
+		
+		
+		
+		
+		"faq_wo_title" => [
+			"de" => "Bei welchem Standesamt kann die Erklärung abgegeben werden?",
+			"en" => "At which registry office can the declaration be submitted?",
+		],
+		"faq_wo_text" => [
+			"de" => [
+				"Die Erklärung kann grundsätzlich bei jedem deutschen Standesamt, sowie jeder deutschen Auslandsvertretung (z.B. einer Botschaft) abgegeben werden. Findet die Erklärung nicht bei dem Standesamt statt, das für dich zuständig ist, wird die Erklärung an dieses weitergeleitet.",
+				"Die Erklärung muss jedoch bei dem selben Standesamt (bzw. der selben Auslandsvertretung) stattfinden, bei dem Du bereits deine Anmeldung abgegeben hast!",
+			],
+			"en" => [
+				"In principle, the declaration can be submitted at any German registry office or at any German agency abroad (e.g. an embassy). If the declaration is not made at the registry office that is responsible for you, the declaration will be forwarded to that office.",
+				"However, the declaration must be made at the same registry office (or the same agency abroad) where you have already submitted your registration!",
+			],
+		],
+		
+		
+		
+		
+		
+		"faq_zustaendigkeit_title" => [
+			"de" => "Welches Standesamt ist für mich zuständig?",
+			"en" => "Which registry office is responsible for me?",
+		],
+		"faq_zustaendigkeit_text" => [
+			"de" => [
+				"Erfolgt die Erklärung nicht bei dem für dich zuständigen Standesamt, wird die Erklärung an dieses weitergeleitet. Das zuständige Standesamt ist das Standesamt, das deinen Eintrag im Personenstandsregister verwaltet. Im Normalfall ist das das Standesamt, das deine Geburtsurkunde ausgestellt hat (<i>Geburtsstandesamt</i>).",
+				"Entsteht dadurch keine Zuständigkeit, ist das Standesamt der Eheschließung zuständig; andernfalls das Standesamt am Wohnort. Ergibt sich auch dadurch keine Zuständigkeit, ist das Standesamt I in Berlin zuständig.",
+			],
+			"en" => [
+				"If the declaration is not made to the registry office responsible for you, the declaration will be forwarded to that office. The responsible registry office is the registry office that manages your entry in the civil status register. Normally this is the registry office that issued your birth certificate (<i>birth registry office</i>).",
+				"If this does not result in jurisdiction, the registry office where the marriage took place is responsible; otherwise, the registry office at the place of residence. If this does not result in jurisdiction either, the registry office I in Berlin is responsible.",
+			],
+		],
+		
+		
+		
+		
+		
+		"faq_nur_vornamen_title" => [
+			"de" => "Ist es möglich, auch nur die Vornamen zu ändern?",
+			"en" => "Is it possible to only change the first names on their own?",
+		],
+		"faq_nur_vornamen_text" => [
+			"de" => [
+				"Nein, nach dem SBGG muss auch der Geschlechtseintrag geändert werden. Die Änderung des Geschlechtseintrags führt dann zur Bestimmung neuer Vornamen. Um nur die Vornamen zu ändern, gibt es andere Gesetzte, wie z.B. das <i>Namensänderungsgesetz</i>.",
+			],
+			"en" => [
+				"No, according to the SBGG, the gender entry must also be changed. The change of the gender entry then leads to the determination of new first names. To change only the first names, there are other laws, such as the <i>Namensänderungsgesetz</i> (Name Change Act).",
+			],
+		],
+		
+		
+		
+		
+		
+		"faq_anzahl_vornamen_title" => [
+			"de" => "Muss die Anzahl der Vornamen gleich bleiben?",
+			"en" => "Does the number of first names have to remain the same?",
+		],
+		"faq_anzahl_vornamen_text" => [
+			"de" => [
+				"Aus dem Gesetzestext des SBGG geht keine direkte Einschränkung hervor, die besagt, dass sich die Anzahl der Vornamen nicht ändern darf. Das Bundesministerium des Innern und für Heimat (<i>BMI</i>) <a href=\"https://fragdenstaat.de/anfrage/vornamenswahl-sbgg/#nachricht-923109\" target=\"_blank\">stellt auf Anfrage klar <i class=\"ti ti-external-link\"></i></a>, dass die Anzahl der Vornamen nicht verändert werden darf.",
+				"Als Resultat der derzeit unklaren Rechtslage zu diesem Thema, erlauben manche Standesämter, die Anzahl der Vornamen zu ändern, andere hingegen bestehen darauf, dass die Anzahl gleich bleiben muss.",
+				"Um zu erfahren, ob Du die Anzahl deiner Vornamen frei wählen darfst, ist es am besten, Du fragst direkt bei dem für dich zuständigen Standesamt nach!",
+			],
+			"en" => [
+				"The text of the SBGG does not contain any direct restriction stating that the number of first names may not change. <a href=\"https://fragdenstaat.de/anfrage/vornamenswahl-sbgg/#nachricht-923109\" target=\"_blank\">When asked <i class=\"ti ti-external-link\"></i></a>, the Federal Ministry of the Interior and Home Affairs (BMI) clarified that the number of first names may not be changed.",
+				"As a result of the current unclear legal situation on this issue, some registry offices allow the number of first names to be changed, while others insist that the number must remain the same.",
+				"To find out whether you are free to choose the number of first names, it is best to ask the registry office responsible for you directly!",
+			],
+		],
+		
+		
+		
+		
+		
+		"faq_nur_geschlechtseintrag_title" => [
+			"de" => "Kann auch nur der Geschlechtseintrag geändert werden? Kann ich meine bisherigen Vornamen behalten?",
+			"en" => "Is it possible to only change the gender entry? Can I keep my current first names?",
+		],
+		"faq_nur_geschlechtseintrag_text" => [
+			"de" => [
+				"Laut SBGG sind nach der Änderung des Geschlechtseintrags neue Vornamen zu bestimmen, die zur jeweiligen Geschlechtsangabe passen. Passen deine bisherigen Vornamen also zu deinem neuen Geschlechtseintrag, kannst Du diese behalten, andernfalls musst Du diese wechseln.",
+			],
+			"en" => [
+				"According to the SBGG, after changing the gender entry, new first names must be determined that match the respective gender. If your previous first names match your new gender entry, you can keep them, otherwise you must change them.",
+			],
+		],
+		
+		
+		
+		
+		
+		"faq_name_passend_title" => [
+			"de" => "Wie wird entschieden ob die gewählten Vornamen zum Geschlechtseintrag passen?",
+			"en" => "How is it decided whether the chosen first names match the gender entry?",
+		],
+		"faq_name_passend_text" => [
+			"de" => [
+				"Das SBGG bestimmt nur wage, dass die Vornamen \"dem gewählten Geschlechtseintrag entsprechen\" müssen. Es ist also davon auszugehen, dass hier die selben Voraussetzungen gelten, wie bei der Vornamenswahl durch die Eltern bei Geburt. Vor allem bei der Geschlechtsangabe <i>\"divers\"</i> und bei der Streichung des Geschlechtseintrags wird diese Regelung wohl nachsichtig ausgelegt werden.",
+				"Ist sich ein Standesamt nicht sicher, ob die gewünschten Vornamen passend sind, ist ein externes Namensgutachten notwendig, in schwierigen Fällen muss evtl. sogar ein Gericht entscheiden.",
+				"Wenn Du wissen möchtest, ob ein bestimmter Vorname mit deinem gewünschten Geschlechtseintrag verwendet werden kann, solltest Du am besten direkt bei dem für dich zuständigen Standesamt nachfragen!",
+			],
+			"en" => [
+				"The SBGG only vaguely specifies that first names must \"correspond to the chosen gender entry\". It can therefore be assumed that the same conditions apply here as when the parents choose the first names at birth. This regulation will probably be interpreted leniently, especially when it comes to the gender specification <i>\"divers\"</i> (diverse) and the deletion of the gender entry.",
+				"If a registry office is not sure whether the desired first names are suitable, an external name assessment is necessary; in difficult cases, a court may have to decide.",
+				"If you would like to know whether a particular first name can be used with your desired gender entry, it is best to ask the registry office responsible for you directly!",
+			],
+		],
+		
+		
+		
+		
+		
+		"faq_begruendung_title" => [
+			"de" => "Muss ich die Änderung begründen? Brauche ich ein Gutachten oder Attest?",
+			"en" => "Do I have to justify the change? Do I need an expert opinion or certificate?",
+		],
+		"faq_begruendung_text" => [
+			"de" => [
+				"Da es sich beim Selbstbestimmungsgesetz um eine Selbstauskunft handelt, musst Du deine Entscheidung nicht begründen. Du musst gegenüber dem Standesamt lediglich versichern, dass dein gewählter Geschlechtseintrag deiner Geschlechtsidentität am besten entspricht. Dazu benötigst Du weder ein Gutachten, noch ein Attest.",
+			],
+			"en" => [
+				"Since the Self-Determination Act is a self-declaration, you do not have to justify your decision. You only have to assure the registry office that your chosen gender entry best corresponds to your gender identity. You do not need an expert opinion or a certificate for this.",
+			],
+		],
+		
+		
+		
+		
+		
+		"faq_sperrfrist_title" => [
+			"de" => "Wann kann ich meinen Personenstand erneut ändern? Wie funktioniert die Sperrfrist?",
+			"en" => "When can I change my civil status again? How does the blocking period work?",
+		],
+		"faq_sperrfrist_text" => [
+			"de" => [
+				"Das SBGG enthält eine Sperrfrist, die besagt, dass zwischen zwei Erklärungen zur Personenstandsänderung mindestens ein Jahr liegen muss. Die erneute Anmeldung kann jedoch schon vor Ablauf dieses einen Jahres vorgenommen werden.",
+				"Fand deine letzte Personenstandsänderung nach SBGG beispielsweise am 1. November 2024 statt, kannst Du erst am 1. November 2025 wieder eine Erklärung abgeben.",
+				"Die Sperrfrist gilt nicht für minderjährige und/oder geschäftsunfähige Personen.",
+			],
+			"en" => [
+				"The SBGG contains a blocking period which states that there must be at least one year between two declarations of change of civil status. However, the new registration can be made before the end of this one year.",
+				"For example, if your last change in civil status using the SBGG took place on November 1st, 2024, you will not be able to make a declaration again until November 1, 2025.",
+				"The blocking period does not apply to minors and legally incapacitated persons.",
+			],
+		],
+		
+		
+		
+		
+		
+		"faq_minderjaehrige_title" => [
+			"de" => "Was gilt für minderjährige Personen?",
+			"en" => "What applies to minors?",
+		],
+		"faq_minderjaehrige_text" => [
+			"de" => [
+				"Bei minderjährigen Personen unterscheidet sich das Vorgehen je nach Alter:",
+			],
+			"en" => [
+				"For minors, the procedure differs depending on their age:",
+			],
+		],
+		"faq_minderjaehrige_list" => [
+			"de" => [
+				"<b>jünger als 5 Jahre:</b> Die Erklärung muss durch die Eltern (bzw. die gesetzlichen Vertreter) erfolgen. Diese müssen zudem erklären, dass sie beraten sind. Die Zustimmung des Kindes ist nicht notwendig. Wird die Erklärung durch einen Vormund abgegeben, ist zusätzlich die Zustimmung des Familiengerichts notwendig.",
+				"<b>5-13 Jahre:</b> Die Erklärung muss durch die Eltern (bzw. die gesetzlichen Vertreter) erfolgen. Diese müssen zudem erklären, dass sie beraten sind. Das Kind muss der Personenstandsänderung zustimmen. Wird die Erklärung durch einen Vormund abgegeben, ist zusätzlich die Zustimmung des Familiengerichts notwendig.",
+				"<b>14-17 Jahre:</b> Der*die Jugendliche muss die Erklärung selbst abgeben und muss versichern, dass er*sie beraten wurde. Zusätzlich ist hierzu die Zustimmung der Eltern (bzw. der gesetzlichen Vertreter) nötig. Im Konfliktfall (z.B. wenn die Eltern nicht zustimmen) kann ein Familiengericht die Zustimmung ersetzen.",
+			],
+			"en" => [
+				"<b>younger than 5 years:</b> The declaration must be made by the parents (or legal representatives). They must also declare that they have been advised. The child's consent is not necessary. If the declaration is made by a guardian, the consent of the family court is also necessary.",
+				"<b>5-13 years:</b> The declaration must be made by the parents (or legal representatives). They must also declare that they have been advised. The child must consent to the change in civil status. If the declaration is made by a guardian, the consent of the family court is also necessary.",
+				"<b>14-17 years:</b> The adolescent must make the declaration themselves and must confirm that they have been advised. In addition, the consent of the parents (or legal guardians) is required. In the event of a conflict (e.g. if the parents do not consent), a family court can replace the consent.",
+			],
+		],
+		"faq_minderjaehrige_text_end" => [
+			"de" => [
+				"Für minderjährige Personen gilt generell keine Sperrfrist.",
+			],
+			"en" => [
+				"There is no blocking period for minors.",
+			],
+		],
+		
+		
+		
+		
+		
+		"faq_geschaeftsunfaehige_title" => [
+			"de" => "Was gilt für volljährige geschäftsunfähige Menschen?",
+			"en" => "What applies to adults who are legally incapable?",
+		],
+		"faq_geschaeftsunfaehige_text" => [
+			"de" => [
+				"Für volljährige geschäftsunfähige Menschen kann nur der*die jeweilige Betreuer*in die Erklärung zur Änderung des Geschlechtseintrags und der Vornamen abgeben. Hierzu ist die Zustimmung des Betreuungsgerichts notwendig.",
+				"Für volljährige geschäftsunfähige Menschen gilt keine Sperrfrist.",
+			],
+			"en" => [
+				"For adults who are legally incapable, only the respective guardian can make the declaration to change the gender entry and first names. The consent of the guardianship court is required for this.",
+				"There is no blocking period for adults who are legally incapable.",
+			],
+		],
+		
+		
+		
+		
+		
+		"faq_ohne_staatsangehoerigkeit_title" => [
+			"de" => "Was gilt für Menschen ohne deutsche Staatsangehörigkeit?",
+			"en" => "What applies to people without German citizenship?",
+		],
+		"faq_ohne_staatsangehoerigkeit_text" => [
+			"de" => [
+				"Menschen ohne deutsche Staatsangehörigkeit können das SBGG nur nutzen, wenn sie nach Art. 7a Abs. 2 EGBGB deutsches Recht gewählt haben und entweder ein unbefristetes Aufenthaltsrecht, eine verlängerbare Aufenthaltserlaubnis oder eine Blaue Karte EU besitzen.",
+			],
+			"en" => [
+				"People without German citizenship can only use the SBGG if they have chosen German law according to Art. 7a Para. 2 EGBGB and have either a permanent right of residence, a renewable residence permit or an EU Blue Card.",
+			],
+		],
+		
+		
+		
+		
+		
+		"faq_kosten_title" => [
+			"de" => "Wie viel kostet eine Personenstandsänderung nach SBGG?",
+			"en" => "How much does a change of civil status cost using the SBGG?",
+		],
+		"faq_kosten_text" => [
+			"de" => [
+				"Die Personenstandsänderung an sich, die durch die Erklärung vor einem Standesamt erfolgt, ist nur ein Teil der Kosten, die insgesamt anfallen, da zusätzlich auch neue Ausweisdokumente und Zeugnisse beantragt werden müssen. Die Höhe aller dieser Kosten ist stark vom jeweiligen Standesamt bzw. der jeweiligen Ausweisbehörde abhängig. Zur Orientierung hier die wichtigsten Kosten:",
+			],
+			"en" => [
+				"The change in civil status itself, which is made by making a declaration at a registry office, is only part of the total costs that are incurred, as new identification documents and certificates must also be applied for. The amount of all of these costs depends heavily on the respective registry office or the respective ID authority. For your orientation, here are the most important costs:",
+			],
+		],
+		"faq_kosten_list" => [
+			"de" => [
+				"Erklärung zur Personenstandsänderung beim Standesamt: <b>~35€</b>",
+				"Neuer Personalausweis: <b>22,80€ oder 37€</b>",
+				"Neuer Reisepass: <b>37,50€ oder 70€</b>",
+				"Neuer Führerschein: <b>~25€</b>",
+			],
+			"en" => [
+				"Declaration of change of civil status at the registry office: <b>~35€</b>",
+				"New <i>Personalausweis</i> (identity card): <b>22,80€ or 37€</b>",
+				"New passport: <b>37,50€ or 70€</b>",
+				"New driver's license: <b>~25€</b>",
+			],
+		],
+		
+		
+		
+		
+		
+		"faq_note" => [
+			"de" => "Weitere Informationen finden sich auf <a href=\"https://sbgg.info\" target=\"_blank\">sbgg.info <i class=\"ti ti-external-link\"></i></a>",
+			"en" => "Further information can be found on <a href=\"https://sbgg.info\" target=\"_blank\">sbgg.info <i class=\"ti ti-external-link\"></i></a> (German)",
+		],
+		
+		
+		
+		
+		
+		"timeline_moved_title" => [
+			"de" => "Timeline",
+			"en" => "Timeline",
+		],
+		"timeline_moved_text" => [
+			"de" => [
+				"Das Selbstbestimmungsgesetz hat eine lange Reise hinter sich. Angefangen beim Koalitionsvertrag, über zahlreiche Entwürfe, Lesungen und Anhörungen, bis hin zur finalen Verkündung im Bundesgesetzblatt ist viel passiert. Die vollständige Entstehungsgeschichte findest Du übersichtlich zusammengefasst in unserer Timeline.",
+			],
+			"en" => [
+				"The Self-Determination Act has had a long journey. Starting with the coalition agreement, numerous drafts, readings and hearings, up to the final announcement in the Federal Law Gazette, a lot has happened. You can find the complete history clearly summarized in our timeline.",
+			],
+		],
+		"timeline_moved_link" => [
+			"de" => "/timeline",
+			"en" => "/en/timeline",
+		],
+		"timeline_moved_button" => [
+			"de" => "Zur Timeline",
+			"en" => "Go to Timeline",
+		],
+		
+		
+		
+		
+		
+		"news_title" => [
+			"de" => "Bleib auf dem Laufenden",
+			"en" => "Stay up to Date",
+		],
+		
+		"news_newsletter_title" => [
+			"de" => "Newsletter",
+			"en" => "Newsletter",
+		],
+		"news_newsletter_mail_address" => [
+			"de" => "Deine Lieblings-Mail-Adresse",
+			"en" => "Your favorite mail address",
+		],
+		"news_newsletter_subscribe" => [
+			"de" => "Verifizierungs-Mail senden",
+			"en" => "Send verification mail",
+		],
+		"news_newsletter_process_description" => [
+			"de" => "Du bekommst eine Verifizierungs-Mail mit einem Link zugesendet. Erst nachdem Du auf diesen Link geklickt hast wirst Du für den Newsletter angemeldet!",
+			"en" => "You will receive a verification mail with a link. You must click on this link to be subscribed to the newsletter!",
+		],
+		"news_newsletter_note" => [
+			"de" => "Hinweis: Der Newsletter kann je nach Mail-Anbieter unter Umständen im Spam-Ordner landen oder verzögert eintreffen.",
+			"en" => "Note: Depending on your mail provider, the newsletter might get delivered with a delay or end up in your spam folder.",
+		],
+		"news_newsletter_feedback_wait" => [
+			"de" => "Verifizierungs-Mail wird gesendet",
+			"en" => "Sending verification mail",
+		],
+		"news_newsletter_feedback_success" => [
+			"de" => "Verifizierungs-Mail versendet",
+			"en" => "Verification mail sent",
+		],
+		"news_newsletter_feedback_failure" => [
+			"de" => "Fehler bei der Versendung der Verifizierungs-Mail",
+			"en" => "Failed to send verification mail",
+		],
+		
+		"news_social_media_title" => [
+			"de" => "Soziale Medien",
+			"en" => "Social Media",
+		],
+		
+		
+		
+		
+		
+		"recommendations_title" => [
+			"de" => "Das Könnte Dich auch Interessieren",
+			"en" => "You Might also Like This",
+		],
+		"recommendations_note" => [
+			"de" => "Bei obigen Empfehlungen handelt es sich um Projekte mit Bezug auf das Thema Trans*, bei denen ich entweder selbst mitwirke oder mit deren Betreiber*innen ich in engem Austausch stehe.",
+			"en" => "The recommendations above are projects related to the topic of trans*, in which I either participate myself or whose operators I am in close contact with.",
+		],
+		
+		"recommendations_pstg45bde_title" => [
+			"de" => "pstg45b.de",
+			"en" => "pstg45b.de",
+		],
+		"recommendations_pstg45bde_description" => [
+			"de" => "Informationsseite zum Personenstandsgesetz &sect; 45b",
+			"en" => "Information page on the <i>Personenstandsgesetz</i> (civil status law) &sect; 45b",
+		],
+		
+		"recommendations_blahajacademy_title" => [
+			"de" => "Blåhaj Academy",
+			"en" => "Blåhaj Academy",
+		],
+		"recommendations_blahajacademy_description" => [
+			"de" => "Discord Community für Trans* Menschen (16+)",
+			"en" => "Discord Community for trans* people (German, 16+)",
+		],
+		
+		"recommendations_sbgginfo_title" => [
+			"de" => "sbgg.info",
+			"en" => "sbgg.info",
+		],
+		"recommendations_sbgginfo_description" => [
+			"de" => "Ausführliche Informationen zum SBGG und dessen rechtlichen Aspekte",
+			"en" => "In-depth information about the SBGG and its legal aspects (German)",
+		],
+		
+		
+		
+		
+		
+		"about_title" => [
+			"de" => "Über diese Webseite",
+			"en" => "About this Website",
+		],
+		"about_text" => [
+			"de" => [
+				"Hi, ich bin Kim (sie/er/they)! Als nicht-binäre Person interessiere ich mich schon seit langem für das Selbstbestimmungsgesetz.",
+				"Während des Gesetzgebungsverfahrens drang über den Fortschritt des Vorhabens nur wenig nach außen. Und auch nach der Verabschiedung des Gesetzes sind noch viele Fragen zu Anwendung ungeklärt.",
+				"Auf dieser Seite möchte ich die Entstehungsgeschichte des Selbstbestimmungsgesetzes dokumentieren und über dessen Verwendung aufklären.",
+				"Für Fragen oder Anregungen stehe ich gerne zur Verfügung.",
+			],
+			"en" => [
+				"Hi, I'm Kim (they/them)! As a non-binary person, I have been interested in the Self-Determination Act for a long time.",
+				"During the legislative procedure, only few things were revealed about the progress of the project. And now, after the law has been passed, there are still a lot of unanswered questions.",
+				"On this page I want to document the history of the Self-Determination Act and explain how to use it.",
+				"If you have any questions or suggestions, feel free to contact me.",
+			],
+		],
+		
+		"about_button_mail" => [
+			"de" => "Kontakt",
+			"en" => "Contact",
+		],
+		"about_button_website" => [
+			"de" => "Mehr Über Mich",
+			"en" => "More About Me",
+		],
+		
+		
+		
+		
+		
+		"newsletter_subscribe_page_title" => [
+			"de" => "SBGG.jetzt - Newsletter Abonnieren",
+			"en" => "SBGG.jetzt - Subscribe to Newsletter",
+		],
+		
+		"newsletter_subscribe_title" => [
+			"de" => "Newsletter Abonnieren",
+			"en" => "Subscribe to Newsletter",
+		],
+		"newsletter_subscribe_submit" => [
+			"de" => "Abonnieren",
+			"en" => "Subscribe",
+		],
+		"newsletter_subscribe_feedback_wait" => [
+			"de" => "Wird angemeldet",
+			"en" => "Subscribing",
+		],
+		"newsletter_subscribe_feedback_success" => [
+			"de" => "Erfolgreich angemeldet",
+			"en" => "Successfully subscribed",
+		],
+		"newsletter_subscribe_feedback_failure" => [
+			"de" => "Fehler bei der Anmeldung",
+			"en" => "Failed to subscribe",
+		],
+		"newsletter_subscribe_privacy_note" => [
+			"de" => [
+				"Deine Mail-Adresse wird ausschließlich zum Versenden des Newsletters verwendet und zu keinem Zeitpunkt an Dritte weitergegeben.",
+				"Du kannst Dich jederzeit über einen Link in den E-Mails wieder abmelden.",
+				"Mehr zum Thema Datenschutz erfährst Du in unserer <a href=\"/datenschutz\" target=\"_blank\">Datenschutzerklärung <i class=\"ti ti-external-link\"></i></a>.",
+			],
+			"en" => [
+				"Your mail address is exclusively being used for the delivery of the newsletter and never being forwarded to third parties.",
+				"You can unsubscribe at any time via a link in the newsletter mails.",
+				"More about data privacy can be found in our <a href=\"/privacy\" target=\"_blank\">Privacy Policy <i class=\"ti ti-external-link\"></i></a>.",
+			],
+		],
+		
+		
+		
+		
+		
+		"newsletter_unsubscribe_page_title" => [
+			"de" => "SBGG.jetzt - Newsletter Abbestellen",
+			"en" => "SBGG.jetzt - Unsubscribe from Newsletter",
+		],
+		
+		"newsletter_unsubscribe_title" => [
+			"de" => "Newsletter Abbestellen",
+			"en" => "Unsubscribe from Newsletter",
+		],
+		"newsletter_unsubscribe_submit" => [
+			"de" => "Abbestellen",
+			"en" => "Unsubscribe",
+		],
+		"newsletter_unsubscribe_feedback_wait" => [
+			"de" => "Wird abgemeldet",
+			"en" => "Unsubscribing",
+		],
+		"newsletter_unsubscribe_feedback_success" => [
+			"de" => "Erfolgreich abgemeldet",
+			"en" => "Successfully unsubscribed",
+		],
+		"newsletter_unsubscribe_feedback_failure" => [
+			"de" => "Fehler bei der Abmeldung",
+			"en" => "Failed to unsubscribe",
+		],
+	]);
+?>
--- a/page/start/style.css
+++ b/page/start/style.css
@ -1,567 +1,18 @@
-:root {
-	--color-bg: #21252b;
-	--color-bg-light: #2c313a;
-	
-	--color-white: #c5cad3;
-	
-	--color-gray-light: #acb0b9;
-	--color-gray: #828997;
-	--color-gray-dark: #5c6370;
-	--color-gray-dark-dark: #454b54;
-	
-	--color-red: #e06c75;
-	--color-red-light: #e9969d;
-	--color-red-dark: #cb4d58;
-	
-	--color-orange: #d19a66;
-	--color-orange-light: #ddb48d;
-	--color-orange-dark: #b9804b;
-	
-	--color-yellow: #dace71;
-	--color-yellow-light: #e5dc9a;
-	--color-yellow-dark: #c4b754;
-	
-	--color-green: #98c379;
-	--color-green-light: #b3d39c;
-	--color-green-dark: #7fa762;
-	
-	--color-cyan: #71d6bc;
-	--color-cyan-light: #98e1cf;
-	--color-cyan-dark: #55bea4;
-	
-	--color-blue: #61afef;
-	--color-blue-light: #90c7f4;
-	--color-blue-dark: #3e97e0;
-	
-	--color-purple: #c678dd;
-	--color-purple-light: #d7a1e8;
-	--color-purple-dark: #af5bc8;
-}
-* {
-	box-sizing: border-box;
-}
-
-
-
-html, body {
-	margin: 0;
-	padding: 0;
-	overflow-x: hidden;
-	
-	color: var(--color-white);
-	background-color: var(--color-bg);
-}
-html {
-	font-size: 16px;
-}
-@media only screen and (max-width: 1000px) {
-	html {
-		font-size: 14px;
-	}
-}
-body {
-	min-height: 100vh;
-	min-height: 100dvh;
-	
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	
-	font-size: 0;
-	font-family: "Ubuntu", sans-serif;
-}
-span {
-	display: block;
-	font-size: 1rem;
-}
-a {
-	text-decoration: none;
-}
-span a {
-	color: var(--theme);
-}
-span a:hover {
-	text-decoration: underline;
-	cursor: pointer;
-}
-span.gray a {
-	color: var(--color-gray);
-	text-decoration: underline;
-	text-decoration-style: dotted;
-}
-span.gray a:hover {
-	text-decoration-style: solid;
-}
-button {
-	all: unset;
-}
-button:focus {
-	outline: revert;
-}
-.link {
-	color: var(--theme);
-}
-.link:hover {
-	cursor: pointer;
-	text-decoration: underline;
-}
-
-span.inline {
-	display: inline;
-}
-span.align-left {
-	text-align: left;
-}
-.colored {
-	color: var(--theme);
-}
-.gray {
-	color: var(--color-gray);
-}
-.white {
-	color: var(--color-white);
-}
-
-.hidden {
-	visibility: hidden !important;
-}
-.gone {
-	display: none !important;
-}
-
-.select-none {
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-.rounded {
-	border-radius: 50%;
-}
-
-
-
-
-
-/* PAGE LAYOUT */
-.page-container {
-	flex-grow: 1;
-	
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: flex-start;
-}
-.page-container.full-page {
-	width: 100%;
-}
-.page {
-	max-width: 50vw;
-	
-	padding: 6rem 2rem;
-	
-	display: flex;
-	flex-direction: column;
-	gap: 6rem;
-	
-	text-align: center;
-}
-.page-container.full-page .page {
-	width: 100%;
-}
-@media only screen and (max-width: 1600px) {
-	.page {
-		max-width: 70vw;
-	}
-}
-@media only screen and (max-width: 1300px) {
-	.page {
-		max-width: 80vw;
-	}
-}
-@media only screen and (max-width: 1000px) {
-	.page {
-		max-width: 100vw;
-		padding: 6rem 1rem;
-	}
-}
-
-
-
-
-
-/* PAGE TITLE */
-.page > .title {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-	
-	margin: 2rem 0;
-}
-@media only screen and (max-width: 1000px) {
-	.page > .title {
-		margin: 0 0;
-	}
-}
-.page > .title h1, .page > .title h2 {
-	align-self: center;
-	margin: 0;
-}
-
-.page > .title h1 {
-	font-size: 3rem;
-	
-	background-image: linear-gradient(to right, var(--color-red), var(--color-orange), var(--color-yellow), var(--color-green), var(--color-blue), var(--color-purple));
-	-webkit-background-clip: text;
-	color: transparent;
-}
-.page > .title h2 {
-	font-size: 1.5rem;
-}
-
-
-
-
-
-/* SECTIONS */
-.section {
-	display: flex;
-	flex-direction: column;
-	
-	width: 100%;
-}
-
-.section > .header {
-	align-self: flex-start;
-	
-	position: relative;
-	padding-right: 0.5rem;
-	
-	display: inline-flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: flex-start;
-	gap: 0.5rem;
-	
-	color: var(--theme);
-}
-.section > .header .extra {
-	color: var(--color-gray);
-}
-
-.section > .content, .legal-text {
-	display: flex;
-	flex-direction: column;
-	gap: 2rem;
-	
-	padding: 1rem 2rem;
-}
-.section > .content.rows {
-	flex-direction: row;
-	flex-wrap: wrap;
-	align-items: flex-start;
-	justify-content: center;
-}
-.section > .content.full-page {
-	width: 100vw;
-	position: relative;
-	left: 50%;
-	right: 50%;
-	margin-left: -50vw;
-	margin-right: -50vw;
-}
-
-
-
-
-
-/* BOX */
-.box, .legal-text .section {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 1rem;
-	
-	padding: 2rem;
-	
-	border-radius: 2rem;
-	background-color: var(--color-bg-light);
-}
-.box.align-left {
-	align-items: flex-start;
-}
-.box.shrink {
-	display: inline-flex;
-}
-.box.important {
-	border: 0.5rem solid var(--theme);
-}
-.box.danger {
-	border: 0.5rem solid var(--color-red);
-}
-.box.danger * {
-	--theme: var(--color-red);
-	--theme-light: var(--color-red-light);
-	--theme-dark: var(--color-red-dark);
-}
-a.box:hover {
-	background-color: var(--color-gray-dark-dark);
-}
-
-.box .title, .box .extra, .legal-text .title {
-	display: inline-flex;
-	flex-direction: row;
-	justify-content: center;
-	align-items: baseline;
-	gap: 0.5rem;
-}
-.box .title, .legal-text .title {
-	position: relative;
-	left: -0.5rem;
-	padding-left: 0.5rem;
-	
-	color: var(--theme);
-	font-size: 1.5rem;
-}
-.box .extra {
-	color: var(--color-gray);
-}
-
-
-
-
-
-/* TIMELINE */
-.timeline {
-	display: flex;
-	flex-direction: column;
-}
-
-.timeline > .item {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: 1rem;
-}
-
-.timeline > .item > .connector {
-	align-self: stretch;
-	
-	position: relative;
-	
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-}
-.timeline > .item:not(:first-child) > .connector::before, .timeline > .item:not(:last-child) > .connector::after {
-	content: "";
-	position: absolute;
-	left: calc(50% - 0.25rem);
-	width: 0.5rem;
-	height: calc(50% + 0.5rem);
-	
-	border-radius: 0.5rem;
-	background-color: var(--color-bg-light);
-	z-index: 0;
-}
-.timeline > .item > .connector::before {
-	top: 0;
-}
-.timeline > .item.done > .connector::before {
-	background-color: var(--theme);
-}
-.timeline > .item.next > .connector::before {
-	background-color: var(--theme);
-}
-.timeline > .item > .connector::after {
-	top: 50%;
-	z-index: 1 !important;
-}
-.timeline > .item.done > .connector::after {
-	background-color: var(--theme);
-}
-
-.timeline > .item > .connector > .waypoint {
-	padding: 1rem;
-	
-	font-size: 1.5rem;
-	border-radius: 50%;
-	background-color: var(--color-bg-light);
-	z-index: 2;
-}
-.timeline > .item.done > .connector > .waypoint {
-	color: var(--color-bg);
-	background-color: var(--theme);
-}
-.timeline > .item.next > .connector > .waypoint {
-	background-color: var(--color-gray-dark);
-}
-
-.timeline > .item > .box {
-	flex-grow: 1;
-	align-items: flex-start;
-	
-	margin: 1rem 0;
-	z-index: 2;
-	
-	text-align: left;
-}
-.timeline > .item:first-child > .box {
-	margin: 0 0 1rem 0;
-}
-.timeline > .item:last-child > .box {
-	margin: 1rem 0 0 0;
-}
-
-@media only screen and (max-width: 1000px) {
-	.timeline > .item {
-		position: relative;
-		flex-direction: column;
-		gap: 0;
-	}
-	.timeline > .item > .connector {
-		align-self: center;
-	}
-	
-	.timeline > .item:not(:last-child)::after {
-		content: "";
-		position: absolute;
-		left: calc(50% - 0.25rem);
-		top: 1rem;
-		width: 0.5rem;
-		height: 100%;
-		
-		background-color: var(--color-bg-light);
-		z-index: 0;
-	}
-	.timeline > .item.done::after {
-		background-color: var(--theme);
-	}
-	.timeline > .item.done-stop::after {
-		background-color: var(--theme);
-	}
-	
-	.timeline > .item:not(:last-child) > .box {
-		margin: 0 0 4rem 0;
-	}
-	.timeline > .item:last-child > .box {
-		margin: 0;
-	}
-	
-	.timeline > .item > .connector > .waypoint {
-		border-radius: 50% 50% 0 0;
-	}
-	
-	.timeline > .item > .box {
-		align-items: center;
-		text-align: center;
-	}
-	.timeline > .item > .box {
-		outline: 0.125rem solid var(--color-bg-light);
-	}
-	.timeline > .item.done > .box {
-		outline: 0.125rem solid var(--theme);
-	}
-	.timeline > .item.next > .box {
-		outline: 0.125rem solid var(--color-gray-dark);
-	}
-}
-
-
-
-
-
-/* BUTTONS */
-.button-list {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	gap: 1rem;
-}
-.button-list.align-left {
-	justify-content: flex-start;
-}
-
-.button, .button.disabled:hover {
-	align-items: center;
-	
-	display: inline-flex;
-	gap: 0.5rem;
-	width: fit-content;
-	padding: 1rem 1.5rem;
-	
-	color: var(--color-white);
-	border-radius: 1rem;
-	background-color: var(--color-gray-dark-dark);
-	
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-.button.on-bg {
-	background-color: var(--color-bg-light);
-}
-.button:hover {
-	cursor: pointer;
-	background-color: var(--color-gray-dark);
-}
-.button.on-bg:hover {
-	background-color: var(--color-gray-dark-dark);
-}
-.button.disabled {
-	opacity: 0.3;
-}
-.button.disabled:hover {
-	cursor: not-allowed;
-}
-
-.button.primary, .button.primary.disabled:hover {
-	color: var(--color-bg);
-	background-color: var(--theme);
-}
-.button.primary:hover {
-	background-color: var(--theme-dark);
-}
-
-.button .icon.big {
-	font-size: 2rem;
-}
-.button .text {
-	display: inline-flex;
-	flex-flow: column;
-	align-items: flex-start;
-}
-
-
-
-
-
 /* 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;
 }

-.form-container {
-	position: relative;
-	width: 100%;
-}
-
-.form {
-	display: flex;
-	flex-direction: column;
-	flex-wrap: nowrap;
-	gap: 1rem;
-}
-
 #newsletter-signup-form-mail-address {
 	min-width: 18rem;
 }
@ -571,37 +22,6 @@ a.box:hover {
 	}
 }

-.form-feedback {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	
-	display: flex;
-	flex-direction: column;
-	flex-wrap: nowrap;
-	justify-content: center;
-}
-
-.form-feedback .centertext {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-	justify-content: center;
-	align-items: center;
-	gap: 0.5rem;
-}
-.form-feedback-wait {
-	color: var(--color-blue);
-}
-.form-feedback-success {
-	color: var(--color-green);
-}
-.form-feedback-failure {
-	color: var(--color-red);
-}
-



@ -659,251 +79,3 @@ a.box:hover {
 .card-list .card .text .description {
 	color: var(--color-gray);
 }
-
-
-
-
-
-/* COPYLINKS */
-.copylink {
-	position: absolute;
-	padding: 0.5rem;
-	
-	font-size: 1rem;
-	color: #0000;
-}
-.title .copylink {
-	left: -1.3rem;
-	padding-right: 0.2rem;
-}
-.header .copylink {
-	right: -1.3rem;
-	padding-left: 0.2rem;
-}
-*:hover > .copylink {
-	color: var(--color-gray);
-}
-.copylink:hover, .copylink:focus-visible {
-	color: var(--color-white);
-	cursor: pointer;
-}
-
-.copylink.feedback-negative, .copylink.feedback-positive {
-	opacity: 0;
-	transition: opacity 1s 1.5s linear;
-}
-.copylink.feedback-negative {
-	color: var(--color-red);
-}
-.copylink.feedback-positive {
-	color: var(--color-green);
-}
-
-
-
-
-
-/* FORM ELEMENTS */
-.key-value-pair {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-	align-items: stretch;
-}
-.key-value-pair .key {
-	display: flex;
-	align-items: center;
-	
-	padding: 1rem;
-	border-top-left-radius: 1rem;
-	border-bottom-left-radius: 1rem;
-	
-	background-color: var(--theme);
-	color: var(--color-bg);
-}
-.key-value-pair .value-list {
-	flex-grow: 1;
-	
-	display: flex;
-	flex-direction: column;
-	flex-wrap: nowrap;
-	align-items: flex-start;
-	gap: 0.5rem;
-}
-.key-value-pair .value {
-	flex-grow: 1;
-	
-	display: flex;
-	flex-direction: column;
-	flex-wrap: nowrap;
-	align-items: flex-start;
-	gap: 0.5rem;
-	
-	padding: 1rem;
-	border-top-right-radius: 1rem;
-	border-bottom-right-radius: 1rem;
-	
-	background-color: var(--color-gray-dark-dark);
-}
-
-.inputwrapper {
-	position: relative;
-	width: 100%;
-}
-.inputwrapper.valid input, .inputwrapper.invalid input {
-	padding-right: 2.5rem;
-}
-.inputwrapper.valid::after, .inputwrapper.invalid::after {
-	position: absolute;
-	right: 1rem;
-	top: 50%;
-	transform: translateY(-50%);
-	display: block;
-	font-size: 1rem;
-	
-	font-family: "tabler-icons" !important;
-	speak: none;
-	font-style: normal;
-	font-weight: normal;
-	font-variant: normal;
-	text-transform: none;
-	line-height: 1;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
-.inputwrapper.valid::after {
-	content: "\ea5e";
-	color: var(--color-green);
-}
-.inputwrapper.invalid::after {
-	content: "\eb55";
-	color: var(--color-red);
-}
-
-input {
-	width: 100%;
-	
-	outline: none;
-	border: none;
-	margin: 0;
-	
-	font-family: inherit;
-	font-size: 1rem;
-	color: var(--color-white);
-	background: none;
-}
-input::placeholder {
-	color: var(--color-gray-light);
-}
-
-.value.switch {
-	flex-direction: row;
-	gap: 0;
-	padding: 0;
-	
-	background: none;
-	
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-.switch .option {
-	padding: 1rem;
-	background-color: var(--color-gray-dark-dark);
-}
-.switch .option:last-child {
-	border-top-right-radius: 1rem;
-	border-bottom-right-radius: 1rem;
-}
-.switch .option:hover {
-	background-color: var(--color-gray-dark);
-	cursor: pointer;
-}
-.switch .option.selected {
-	background-color: var(--theme-dark);
-	color: var(--color-bg);
-}
-
-
-
-
-
-/* FOOTER */
-.footer {
-	width: 100%;
-	
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	flex-wrap: wrap;
-	gap: 1rem;
-	
-	padding: 1rem;
-	
-	background-color: var(--color-bg-light);
-}
-.footer > div {
-	flex-grow: 1;
-	flex-shrink: 1;
-	flex-basis: 0px;
-	
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-	gap: 0.5rem;
-	
-	text-align: center;
-}
-@media only screen and (max-width: 1000px) {
-	.footer > div {
-		flex-basis: 100%;
-		justify-content: center !important;
-	}
-}
-
-.footer > div a {
-	font-size: 1rem;
-	color: var(--theme);
-}
-.footer > div a:hover {
-	text-decoration: underline;
-}
-
-.footer .delimiter {
-	color: var(--color-gray);
-}
-.footer .brand {
-	justify-content: flex-start;
-}
-.footer .legal {
-	justify-content: flex-end;
-}
-
-.footer .brand img {
-	height: 2rem;
-}
-.footer .brand .version {
-	color: var(--color-gray);
-}
-
-.footer .lang .selected {
-	font-weight: bold;
-	color: inherit;
-}
-
-
-
-
-
-/* ANIMATION KIT */
-.form-feedback .spinning {
-	animation-name: spinning;
-	animation-duration: 0.5s;
-	animation-iteration-count: infinite;
-	animation-timing-function: linear;
-}
-@keyframes spinning {
-	from { transform:rotate(0deg); }
-	to { transform:rotate(360deg); }
-}
--- a/page/strings.php
+++ b/page/strings.php
@ -3,661 +3,13 @@
 	namespace Kimendisch\Sbgg_Jetzt;
 	
 	$dict->define([
-		"title" => [
-			"de" => "SBGG.jetzt - Alle Infos zum Selbstbestimmungsgesetz",
-			"en" => "SBGG.jetzt - Everything about the German Self-Determination Law"
+		"name" => [
+			"de" => "SBGG.jetzt",
+			"en" => "SBGG.jetzt",
 		],
-		
 		"description" => [
 			"de" => "Alle Infos zum Selbstbestimmungsgesetz an einem Ort",
-			"en" => "Everything about the German Self-Determination Law in one place"
-		],
-		
-		
-		
-		
-		
-		"page_title_h1" => [
-			"de" => "SBGG.jetzt",
-			"en" => "SBGG.jetzt"
-		],
-		"page_title_h2" => [
-			"de" => "Alle Infos zum Selbstbestimmungsgesetz",
-			"en" => "Everything about the German Self-Determination Law"
-		],
-		
-		
-		
-		
-		
-		"why_title" => [
-			"de" => "Warum ein neues Gesetz?",
-			"en" => "Why a new Law?"
-		],
-		
-		"why_text" => [
-			"de" => [
-				"Das 1980 eingeführte Transsexuellengesetz regelt in Deutschland bis heute, wie Trans* Menschen ihren Namen und Geschlechtseintrag rechtlich ändern können.",
-				"Dieses Gesetz wird seinen Ansprüchen aber keinesfalls gerecht. Stattdessen werden Trans* Menschen Steine in den Weg gelegt:",
-				"Der Prozess zur Änderung von Namen und Geschlechtseintrag erfordert zwei unabhängige Sachverständigengutachten und ein Gerichtsverfahren. Das ist diskriminierend, dauert eine Ewigkeit und ist sehr teuer.",
-				"Das Selbstbestimmungsgesetz soll das TSG ablösen und eine Änderung des Namens und des Geschlechtseintrags ganz einfach per Selbstauskunft beim Standesamt ermöglichen."
-			],
-			"en" => [
-				"The<i>Transsexuellengesetz</i> (Transsexual Law), introduced in 1980, regulates how trans* people can legally change their name and gender entry in Germany.",
-				"However, this law does not live up to its claims. Instead, obstacles are put in the way of trans* people:",
-				"The process of changing name and gender entry requires two independent psychological assessments and a court hearing. This is discriminatory, takes forever and is very expensive.",
-				"The Self-Determination Act is intended to replace the TSG and make it easy to change the name and gender entry by self-disclosure at the <i>Standesamt</i> (registry office)."
-			]
-		],
-		
-		
-		
-		
-		
-		"timeline_title" => [
-			"de" => "Timeline",
-			"en" => "Timeline"
-		],
-		
-		
-		
-		
-		
-		"timeline_koalitionsvertrag_date" => [
-			"de" => "24 Nov 2021",
-			"en" => "24 Nov 2021"
-		],
-		"timeline_koalitionsvertrag_title" => [
-			"de" => "Koalitionsvertrag",
-			"en" => "Coalition Agreement"
-		],
-		"timeline_koalitionsvertrag_text" => [
-			"de" => [
-				"Bereits im Koalitionsvertrag \"Mehr Fortschritt wagen\" einigen sich die Parteien SPD, FDP und die Grünen unter der Überschrift \"Queeres Leben\" darauf, das TSG abzuschaffen und durch ein Selbstbestimmungsgesetz zu ersetzen (vgl. Link S. 95)."
-			],
-			"en" => [
-				"Already in the coalition agreement, the parties SPD, FDP and the Greens agree on abolishing the TSG and replacing it with a Self-Determination Law (see Link p. 95)."
-			]
-		],
-		"timeline_koalitionsvertrag_button" => [
-			"de" => "Koalitionsvertrag",
-			"en" => "Coalition Agreement (German)"
-		],
-		
-		
-		
-		
-		
-		"timeline_eckpunktepapier_date" => [
-			"de" => "30 Jun 2022",
-			"en" => "30 Jun 2022"
-		],
-		"timeline_eckpunktepapier_title" => [
-			"de" => "Eckpunktepapier",
-			"en" => "Key Issues Paper"
-		],
-		"timeline_eckpunktepapier_text" => [
-			"de" => [
-				"Das Eckpunktepapier des des Bundesministeriums für Familie, Senioren, Frauen und Jugend und des Bundesministeriums der Justiz legt die grundlegenden Eckpunkte des Selbstbestimmungsgesetzes fest.",
-				"Hierin wird festgelegt, dass die Änderung des Vornamens und Geschlechtseintrags per Erklärung beim Standesamt möglich sein soll. Auch eine Regelung für Minderjährige wird erwähnt. Zudem wird eine Sperrfrist von einem Jahr festgelegt, um Missbrauch zu verhindern."
-			],
-			"en" => [
-				"The key issues paper by the Federal Ministry for Family Affairs, Senior Citizens, Women and Youth and the Federal Ministry of Justice lays down the fundamental key points of the Self-Determination Act.",
-				"This stipulates that it should be possible to change the first name and gender entry by self-disclosure at the <i>Standesamt</i> (registry office). A regulation for minors is also mentioned. In addition, a blocking period of one year is set to prevent abuse."
-			]
-		],
-		"timeline_eckpunktepapier_button" => [
-			"de" => "Eckpunktepapier",
-			"en" => "Key Issues Paper (German)"
-		],
-		
-		
-		
-		
-		
-		"timeline_referentenentwurf_date" => [
-			"de" => "09 Mai 2023",
-			"en" => "09 May 2023"
-		],
-		"timeline_referentenentwurf_title" => [
-			"de" => "Referentenentwurf",
-			"en" => "Draft Bill"
-		],
-		"timeline_referentenentwurf_text" => [
-			"de" => [
-				"Das Bundesministerium für Familie, Senioren, Frauen und Jugend und das Bundesministerium der Justiz erarbeiten gemeinsam einen ersten Entwurf des Selbstbestimmungsgesetzes, welcher im Anschluss mit Verbänden und Organisationen diskutiert wird.",
-				"Der Referentenentwurf hält sich im Allgemeinen an die zuvor im Eckpunktepapier festgelegten Ziele. Neu sind Ausnahmen für Haftanstalten und im Hausrecht (z.B. für Frauensaunen). Zudem wird die Möglichkeit für cis Männer, ihren Geschlechtseintrag im Kriegsfall zu ändern eingeschränkt, um zu verhindern, dass diese sich dadurch einer Einberufung entziehen."
-			],
-			"en" => [
-				"The Federal Ministry for Family Affairs, Senior Citizens, Women and Youth and the Federal Ministry of Justice are jointly developing a first draft of the Self-Determination Act, which will then be discussed with associations and organizations.",
-				"The draft bill generally adheres to the goals previously set in the key issues paper. There are new exceptions for detention centers and in house law (e.g. for women's saunas). In addition, the ability for cis men to change their gender entry is restricted in the event of war to prevent them from avoiding a convening."
-			]
-		],
-		"timeline_referentenentwurf_button" => [
-			"de" => "Referentenentwurf",
-			"en" => "Draft Bill (German)"
-		],
-		"timeline_referentenentwurf_button2" => [
-			"de" => "Hintergrundpapier / FAQ",
-			"en" => "FAQ (German)"
-		],
-		
-		
-		
-		
-		
-		"timeline_regierungsentwurf_date" => [
-			"de" => "23 Aug 2023",
-			"en" => "23 Aug 2023"
-		],
-		"timeline_regierungsentwurf_title" => [
-			"de" => "Regierungsentwurf",
-			"en" => "Government Draft"
-		],
-		"timeline_regierungsentwurf_text" => [
-			"de" => [
-				"Aus den Beratungen mit den Verbänden und Organisationen beschließt die Bundesregierung den Regierungsentwurf, die vorläufige Version des Gesetzestextes, welche später im Bundestag beraten wird.",
-				"Der von der Bundesregierung vorgelegte Regierungsentwurf ähnelt in den meisten Punkten dem Referentenentwurf. So bleiben die bereits zuvor kritisierten Ausnahmeregelungen für Haftanstalten, im Hausrecht und im Kriegsfall bestehen.",
-				"Im Gegensatz zur dreimonatigen Wartezeit bis zum Inkrafttreten der Änderung des Geschlechtseintrags und Vornamens, muss eine gewünschte Änderung jetzt drei bis sechs Monate vorher beim Standesamt angemeldet werden. Nach diesen drei bis sechs Monaten kann dann die Erklärung zur Änderung des Geschlechtseintrags und Vornamens beim Standesamt abgegeben werden und tritt sofort in Kraft.",
-				"Zudem wird weiterhin darauf bestanden, dass im Falle eines Wechsels zu einem früheren Geschlechtseintrag auch der zuvor gültige Vorname angenommen werden muss.",
-				"Verwunderlich ist der letzte Artikel \"Inkrafttreten, Außerkrafttreten\", laut welchem das Gesetz erst am \"1. November 2024\" in Kraft treten soll."
-			],
-			"en" => [
-				"From the consultations with the associations and organizations, the federal government creates the government draft, the preliminary version of the legal text, which will later be discussed in the <i>Bundestag</i> (Parliament of the Federal Republic of Germany).",
-				"The government draft published by the federal government is similar to the draft bill in most points. Thus the criticized exceptions for detention centers, in house law and in the event of war persist.",
-				"In contrast to the waiting time of three months until the change of the first name and gender entry become valid, a desired change must now be registered with the <i>Standesamt</i> (registry office) three to six months in advance. After these three to six months, the declaration to change the gender entry and first name can be submitted to the <i>Standesamt</i> (registry office) and comes into force immediately.",
-				"In addition, it is also insisted that in the event of a change to an earlier gender entry, the previously valid first name must be adopted.",
-				"The last article <i>\"Inkrafttreten, Außerkrafttreten\"</i> (entry into force, going out of force) is surprising, according to which the law comes into effect as late as 01 Nov 2024."
-			]
-		],
-		"timeline_regierungsentwurf_button" => [
-			"de" => "Regierungsentwurf",
-			"en" => "Government Draft (German)"
-		],
-		
-		
-		
-		
-		
-		"timeline_bundesrat_date" => [
-			"de" => "20 Okt 2023",
-			"en" => "20 Oct 2023"
-		],
-		"timeline_bundesrat_title" => [
-			"de" => "Stellungnahme des Bundesrates",
-			"en" => "Review by the Federal Council"
-		],
-		"timeline_bundesrat_text" => [
-			"de" => [
-				"Bevor der Regierungsentwurf im Bundestag beraten werden kann, muss er dem Bundesrat zur Stellungnahme vorgelegt werden.",
-				"Während der Sitzung wurden dem SBGG 16 Minuten gewidmet.",
-				"Zuerst sprachen sich die Grünenpolitikerinnen Ursula Nonnemacher (Stellvertreterin des Ministerpräsidenten des Landes Brandenburg) und Katja Meier (Sächsische Staatsministerin der Justiz und für Demokratie, Europa und Gleichstellung) in einem Redebeitrag für das Selbstbestimmungsgesetz aus. Sie wiesen darauf hin, dass die Selbstbestimmung des Geschlechtseintrags und des Namens ein Grundrecht sei und, dass viele Angehörige der LSBTIQ+ Community Opfer von Gewalt und Benachteiligung wären.",
-				"Aus der darauf folgenden Abstimmung im Plenum gehen nur die Empfehlungen 7, 8, 11, 13, 15, 16 und 17 mit einer Mehrheit hervor. In diesen Empfehlungen werden vor allem kleine Veränderungen vorgeschlagen, welche einzelne Passagen des Gesetzes deutlicher formulieren sollen."
-			],
-			"en" => [
-				"Before the government draft can be discussed in the <i>Bundestag</i> (Parliament), it must be submitted to the <i>Bundesrat</i> (Federal Council) for comment.",
-				"During the session, the SBGG was devoted to 16 minutes.",
-				"First, the politicians Ursula Nonnemacher (Deputy of the Prime Minister of the State of Brandenburg) and Katja Meier (Saxon Minister of State of Justice and for democracy, Europe and equality), both from the party of the Greens, gave a speech in favor of the Self-Determination Law. They pointed out that self-determination of the gender entry and name were fundamental rights and that many members of the  LSBTIQ+ community were victims of violence and discrimination.",
-				"The subsequent poll in the plenum resulted in only the recommendations 7, 8, 11, 13, 15, 16 and 17 being supported by a majority. These recommendations mainly propose small changes, which aim to express certain parts of the law more clearly."
-			]
-		],
-		"timeline_bundesrat_button" => [
-			"de" => "Aufzeichnung TOP 14",
-			"en" => "Recording TOP 14 (German)"
-		],
-		"timeline_bundesrat_button2" => [
-			"de" => "Empfehlungen der Ausschüsse",
-			"en" => "Recommendations of the committees (German)"
-		],
-		
-		
-		
-		
-		
-		"timeline_lesung_1_date" => [
-			"de" => "15 Nov 2023",
-			"en" => "15 Nov 2023"
-		],
-		"timeline_lesung_1_title" => [
-			"de" => "1. Lesung",
-			"en" => "1st Reading"
-		],
-		"timeline_lesung_1_text" => [
-			"de" => [
-				"In der ersten Lesung im Bundestag wird der Regierungsentwurf zum ersten mal gemeinsam mit den anderen Parteien debattiert. Danach wird der Gesetzentwurf an die zuständigen Ausschüsse übergeben, wo er weiter beraten wird.",
-				"Die Redner*innen der Ampel-Parteien (FDP, SPD, Bündnis 90/Die Grünen) sprachen sich für das Gesetz aus und stellten klar, dass das TSG verfassungswidrig sei und die Diskriminierung von Trans- und Inter-Personen unterbunden werden müsse. Die Einführung des SBGG sei eine Frage von Respekt.",
-				"Von der AfD und dem fraktionslosen <i>Matthias Helferich</i> kamen unter anderem Aussagen, wie \"Pflicht zur Lüge\", \"Verstümmelnde Geschlechtsangleichungen\" und ein Vergleich von Deutschland mit Nord-Korea. Zudem dürfe man das Selbstbestimmungsgesetz nicht einführen, da sonst der Schutz von Kindern und Jugendlichen in Gefahr sei.",
-				"Auch von Seiten der CDU/CSU Fraktion gab es Zitate, wie \"Geschlecht [ist] Schicksal\", \"Geschlecht ist immer biologisch fundiert und gerade nicht frei wählbar\", das SBGG sei eine \"Überreaktion\" und Transgeschlechtlichkeit wäre ein Trend.",
-				"Die Abgeordnete <i>Kathrin Vogler</i> (Linke) mahnte den Gesetzentwurf als enttäuschend an und bezeichnete diesen als \"Misstrauensgesetz\"."
-			],
-			"en" => [
-				"In the first reading in the <i>Bundestag</i> (Parliament), the government draft is debated for the first time together with the other parties. After that, the bill will be passed to the relevant committees, where it will be discussed further.",
-				"The government speakers (FDP, SPD, Alliance 90/The Greens) spoke out in favor of the law and made clear that the TSG was unconstitutional and that discrimination against trans and intersex people must be stopped. The introduction of the SBGG was a question of respect.",
-				"The AfD and the non-attached <i>Matthias Helferich</i> made statements such as: \"obligation to lie\", \"mutilating gender reassignments\" and a comparison of Germany with North Korea. In addition, the Self-Determination Act should not be introduced, otherwise the protection of children and teenagers would be at risk.",
-				"There were also quotes from the CDU/CSU faction, such as: \"Gender [is] fate\", \"Gender is always biologically based and cannot be freely chosen\", the SBGG was an \"overreaction\" and being trans was a trend.",
-				"MP <i>Kathrin Vogler</i> (The left) described the draft bill as disappointing and as a \"law of missing confidence\".",
-				"<span class=\"inline gray\">Note: Quotes have been translated from German analogously.</span>"
-			]
-		],
-		"timeline_lesung_1_button" => [
-			"de" => "Aufzeichnung der Debatte",
-			"en" => "Dabate recording (German)"
-		],
-		
-		
-		
-		
-		
-		"timeline_ausschuss_anhoerung_date" => [
-			"de" => "28 Nov 2023",
-			"en" => "28 Nov 2023"
-		],
-		"timeline_ausschuss_anhoerung_title" => [
-			"de" => "Öffentliche Anhörung im Familienausschuss",
-			"en" => "Public hearing in the family committee"
-		],
-		"timeline_ausschuss_anhoerung_text" => [
-			"de" => [
-				"Zusätzlich zu den Sitzungen im Bundestag hält der Ausschuss für Familie, Senioren, Frauen und Jugend eine öffentliche Anhörung, zu der die Parteien des Bundestages Sachverständige einladen, welche ihre Einschätzung zum SBGG geben und zum Thema informieren.",
-				"Die Aussagen der Sachverständigen lassen sich in zwei Lager teilen. Auf der einen Seite stehen Expert*innen, welche darauf hinweisen, dass das Recht auf Selbstbestimmung ein Menschenrecht sei und der Missbrauch des SBGG unrealistisch wäre. Die Angst in der Bevölkerung basiere auf Angst-Mache und Desinformation. Außerdem seien am aktuellen Entwurf des Gesetzes noch vielzählige Verbesserungen notwendig; So sollen die Vorschriften zur Sperr-/Anmeldefrist, zum Hausrecht, zur Wehrpflicht, sowie zur Weiterleitung von sensiblen Daten an Sicherheitsbehörden ersatzlos gestrichen werden.",
-				"Auf der anderen Seite stehen Sachverständige, welche Transidentität als Phase oder Trend sehen, oder diese mit einer \"versteckten Homosexualität\" begründen. Zudem wäre Missbrauch, vor allem von Frauenschutzräumen, ein Problem. Das Risiko für die Gesellschaft sei \"größer als der Gewinn\"."
-			],
-			"en" => [
-				"In addition to the meetings in the Bundestag, the Committee on Family, Seniors, Women and Youth holds a public hearing to which the parties of the Bundestag invite experts who give their assessment of the SBGG and inform about the topic.",
-				"The experts' statements can be divided into two camps. On the one hand, there are experts who point out that the right to self-determination was a human right and that the abuse of the SBGG would be unrealistic. Fear in the population was based on anxiety and disinformation. In addition, a lot of improvements were still necessary in the current draft of the law; For example, the regulations for the blocking/registration period, for house rights, for military service, as well as for the forwarding of sensitive data to security authorities should be deleted without replacement.",
-				"On the other hand, there are experts who see trans identity as a phase or trend, or justify them with \"hidden homosexuality\". In addition, abuse, especially of women's protection rooms, was a problem. The risk for society is \"greater than the profit\".",
-				"<span class=\"inline gray\">Note: Quotes have been translated from German analogously.</span>"
-			]
-		],
-		"timeline_ausschuss_anhoerung_button" => [
-			"de" => "Aufzeichnung der Anhörung",
-			"en" => "Hearing recording (German)"
-		],
-		
-		
-		
-		
-		
-		"timeline_lesung_2_3_date" => [
-			"de" => "12 Apr 2024",
-			"en" => "12 Apr 2024"
-		],
-		"timeline_lesung_2_3_title" => [
-			"de" => "2. und 3. Lesung mit Schlussabstimmung",
-			"en" => "2nd and 3rd Reading with Final Vote"
-		],
-		"timeline_lesung_2_3_text" => [
-			"de" => [
-				"Wie auch hier, werden die Lesungen 2 und 3 oft zusammengelegt. Die zweite Lesung im Bundestag diskutiert die Ergebnisse der Ausschüsse. Einzelne Abgeordnete können Änderungen beantragen. Am Ende der dritten Lesung wird abschließend über das Gesetz abgestimmt.",
-				"Verglichen mit dem Regierungsentwurf enthält die <a href=\"https://web.archive.org/web/20240412195016/https://dserver.bundestag.de/btd/20/110/2011004.pdf\" class=\"link\">Beschlussempfehlung des Familienausschusses</a> nur kleine Änderungen; So müssen Kinder ab einem Alter von 5 Jahren im Fall einer Personenstandsänderung zustimmen und die Eltern von Minderjährigen müssen bestätigen, dass sie sich beraten haben lassen. Zudem wurde die Weitergabe von persönlichen Daten an Sicherheitsbehörden gestrichen.",
-				"Die Redner*innen der Regierungsparteien (FDP, SPD, Bündnis 90/Die Grünen) betonten die Wichtigkeit dieses Gesetzesvorhabens für die Grundrechte und Menschenwürde. Dem Leid, das das TSG verursacht hat werde jetzt ein Ende gesetzt. Dies treffe auf breite Unterstützung durch frauenpolitische Organisationen und Kirchen.",
-				"Aus den Lagern der Parteien CDU/CSU, AfD und der Gruppe BSW wurden Befürchtungen laut, das Gesetz gefährde Kinder- und Jugendschutz und wäre anfällig für Missbrauch. Einige dieser Redner*innen sind der Ansicht, Trans* wäre Einbildung und ein 'Hype', welcher durch eine Lobby gestärkt würde. Trans*-Personen seien lediglich Menschen in Verkleidung und Perücke.",
-				"Die Gruppe Die Linke begrüßt das Gesetz, mahnt aber auch an, dass dies nur der Anfang sein könne; Beratungsmöglichkeiten müssen verbessert und Regelungen zur Finanzierung gesundheitlicher Maßnahmen geschaffen werden.",
-				"Die Beschlussempfehlung des Familienausschusses wurde mit 372 zu 251 Stimmen angenommen. Der <a href=\"https://web.archive.org/web/20240412195124/https://dserver.bundestag.de/btd/20/082/2008203.pdf\" class=\"link\">Antrag der AfD</a>, das TSG zu erhalten und sogar noch zu verschärfen, wurde vom Parlament zurückgewiesen."
-			],
-			"en" => [
-				"As seen here, reading 2 and 3 are often combined. The second reading in the <i>Bundestag</i> (Parliament) discusses the results of the committees. Individual members of the Bundestag can request changes. At the end of the third reading, a final vote is taken on the law.",
-				"Compared to the government draft, the <a href=\"https://web.archive.org/web/20240412195016/https://dserver.bundestag.de/btd/20/110/2011004.pdf\" class=\"link\">recommendation of the family committee</a> contains only small changes; In the event of a change in civil status, children starting at the age of 5 must agree and the parents of minors must confirm that they have been advised. In addition, the transfer of personal information to security authorities has been removed.",
-				"The government parties' speakers (FDP, SPD, Bündnis 90/Die Grünen) emphasized the importance of this law for fundamental rights and human dignity. The suffering that the TSG has caused is now being put to an end. This meets broad support from women's policy organizations and churches.",
-				"From the camps of the parties CDU/CSU, AfD and the group BSW, fears were loud, the law would be a risk for child and youth protection and could be susceptible to abuse. Some of these speakers believe that trans* would be imagination and a 'hype' that would be strengthened by a lobby and trans* people were only people in disguise and wigs.",
-				"The group Die Linke welcomes the law, but also warns that this can only be the beginning; Advice options must be improved and regulations for financing health measures should be created.",
-				"The decision recommendation of the family committee was accepted with 372 to 251 votes. The <a href=\"https://web.archive.org/web/20240412195124/https://dserver.bundestag.de/btd/20/082/2008203.pdf\" class=\"link\">AfD's request</a> to maintain the TSG and even tighten its regulations was rejected by the parliament."
-			]
-		],
-		"timeline_lesung_2_3_button" => [
-			"de" => "Aufzeichnung der Debatte",
-			"en" => "Dabate recording (German)"
-		],
-		
-		
-		
-		
-		
-		"timeline_bundesrat_2_date" => [
-			"de" => "17 Mai 2024",
-			"en" => "17 May 2024"
-		],
-		"timeline_bundesrat_2_title" => [
-			"de" => "Beratung im Bundesrat",
-			"en" => "Consultation in the Federal Council"
-		],
-		"timeline_bundesrat_2_text" => [
-			"de" => [
-				"Da es sich beim Selbstbestimmungsgesetz um ein Einspruchsgesetz handelt, bedarf es keiner Zustimmung im Bundesrat. Durch einen Einspruch lässt sich der Gesetzgebungsprozess jedoch verzögern.",
-				"Die Grünenpolitiker*innen Katharina Fegebank, Dr. Benjamin Limbach und Doreen Denstädt sprachen sich für das Gesetz aus und betonten dessen Wichtigkeit für Trans*-Menschen. Die Forderung, den Vermittlungsausschuss anzurufen, fand keine Mehrheit."
-			],
-			"en" => [
-				"As the Self-Determination Act is a <i>Einspruchsgesetz</i> (\"veto law\"), an approval by the <i>Bundesrat</i> (Federal Council) is not required. A veto however would delay the legislative process.",
-				"The green politicians Katharina Fegebank, Dr. Benjamin Limbach and Doreen Denstädt spoke out for the law and emphasized its importance for trans* people. The request to call the mediation committee did not obtain a majority."
-			]
-		],
-		"timeline_bundesrat_2_button" => [
-			"de" => "Aufzeichnung TOP 2",
-			"en" => "Recording TOP 2 (German)"
-		],
-		
-		
-		
-		
-		
-		"timeline_bundesgesetzblatt_date" => [
-			"de" => "21 Jun 2024",
-			"en" => "21 Jun 2024"
-		],
-		"timeline_bundesgesetzblatt_title" => [
-			"de" => "Veröffentlichung im Bundesgesetzblatt",
-			"en" => "Publication in the Federal Law Gazette"
-		],
-		"timeline_bundesgesetzblatt_text" => [
-			"de" => [
-				"Nachdem der Gesetzestext vom Bundespräsident unterzeichnet wurde, was als Formsache gilt, wird das Gesetz in seiner finalen Form im Bundesgesetzblatt veröffentlicht."
-			],
-			"en" => [
-				"After the text of the law has been signed by the <i>Bundespräsident</i> (Federal President), which is considered a formality, the law is published in its final form in the <i>Bundesgesetzblatt</i> (Federal Law Gazette)."
-			]
-		],
-		"timeline_bundesgesetzblatt_button" => [
-			"de" => "Finaler Gesetzestext",
-			"en" => "Final Legal Text (German)"
-		],
-		
-		
-		
-		
-		
-		"timeline_anmeldung_date" => [
-			"de" => "01 Aug 2024",
-			"en" => "01 Aug 2024"
-		],
-		"timeline_anmeldung_title" => [
-			"de" => "Möglichkeit zur Anmeldung beim Standesamt",
-			"en" => "Possibility to register at the registry office"
-		],
-		"timeline_anmeldung_text" => [
-			"de" => [
-				"Da Artikel 1 &sect; 4 bereits Anfang August in Kraft tritt, ist eine Anmeldung für einen Termin beim Standesamt schon 3 Monate vor Inkrafttreten des übrigen Gesetzes möglich. Bei Anmeldung im August kann der Termin für die Personenstandsänderung also direkt im November stattfinden."
-			],
-			"en" => [
-				"Since Article 1 &sect; 4 comes into force at the beginning of August, you can register for an appointment at the registry office three months before the rest of the law comes into force. If you register in August, the appointment for changing your civil status can take place directly in November."
-			]
-		],
-		"timeline_anmeldung_button" => [
-			"de" => "",
-			"en" => ""
-		],
-		
-		
-		
-		
-		
-		"timeline_inkrafttreten_date" => [
-			"de" => "01 Nov 2024",
-			"en" => "01 Nov 2024"
-		],
-		"timeline_inkrafttreten_title" => [
-			"de" => "Inkrafttreten des Gesetzes",
-			"en" => "Entry into Force"
-		],
-		"timeline_inkrafttreten_text" => [
-			"de" => [
-				"Nachdem auch der Rest des Gesetzes in Kraft tritt, ist die tatsächliche Änderung des Personenstandes beim Standesamt möglich."
-			],
-			"en" => [
-				"After the rest of the law comes into force, the actual change of civil status is possible at the registry office."
-			]
-		],
-		"timeline_inkrafttreten_button" => [
-			"de" => "",
-			"en" => ""
-		],
-		
-		
-		
-		
-		
-		"news_title" => [
-			"de" => "Bleib auf dem Laufenden",
-			"en" => "Stay up to Date"
-		],
-		
-		"news_newsletter_title" => [
-			"de" => "Newsletter",
-			"en" => "Newsletter"
-		],
-		"news_newsletter_mail_address" => [
-			"de" => "Deine Lieblings-Mail-Adresse",
-			"en" => "Your favorite mail address"
-		],
-		"news_newsletter_subscribe" => [
-			"de" => "Verifizierungs-Mail senden",
-			"en" => "Send verification mail"
-		],
-		"news_newsletter_process_description" => [
-			"de" => "Du bekommst eine Verifizierungs-Mail mit einem Link zugesendet. Erst nachdem Du auf diesen Link geklickt hast wirst Du für den Newsletter angemeldet!",
-			"en" => "You will receive a verification mail with a link. You must click on this link to be subscribed to the newsletter!"
-		],
-		"news_newsletter_note" => [
-			"de" => "Hinweis: Der Newsletter kann je nach Mail-Anbieter unter Umständen im Spam-Ordner landen oder verzögert eintreffen.",
-			"en" => "Note: Depending on your mail provider, the newsletter might get delivered with a delay or end up in your spam folder."
-		],
-		"news_newsletter_feedback_wait" => [
-			"de" => "Verifizierungs-Mail wird gesendet",
-			"en" => "Sending verification mail"
-		],
-		"news_newsletter_feedback_success" => [
-			"de" => "Verifizierungs-Mail versendet",
-			"en" => "Verification mail sent"
-		],
-		"news_newsletter_feedback_failure" => [
-			"de" => "Fehler bei der Versendung der Verifizierungs-Mail",
-			"en" => "Failed to send verification mail"
-		],
-		
-		"news_social_media_title" => [
-			"de" => "Soziale Medien",
-			"en" => "Social Media"
-		],
-		
-		
-		
-		
-		
-		"recommendations_title" => [
-			"de" => "Das Könnte Dich auch Interessieren",
-			"en" => "You Might also Like This"
-		],
-		"recommendations_note" => [
-			"de" => "Bei obigen Empfehlungen handelt es sich um Projekte mit Bezug auf das Thema Trans*, bei denen ich entweder selbst mitwirke oder mit deren Betreiber*innen ich in engem Austausch stehe.",
-			"en" => "The recommendations above are projects related to the topic of trans*, in which I either participate myself or whose operators I am in close contact with."
-		],
-		
-		"recommendations_pstg45bde_title" => [
-			"de" => "pstg45b.de",
-			"en" => "pstg45b.de"
-		],
-		"recommendations_pstg45bde_description" => [
-			"de" => "Informationsseite zum Personenstandsgesetz &sect; 45b",
-			"en" => "Information page on the <i>Personenstandsgesetz</i> (civil status law) &sect; 45b"
-		],
-		
-		"recommendations_blahajacademy_title" => [
-			"de" => "Blåhaj Academy",
-			"en" => "Blåhaj Academy"
-		],
-		"recommendations_blahajacademy_description" => [
-			"de" => "Discord Community für Trans* Menschen (16+)",
-			"en" => "Discord Community for trans* people (German, 16+)"
-		],
-		
-		"recommendations_sbgginfo_title" => [
-			"de" => "sbgg.info",
-			"en" => "sbgg.info"
-		],
-		"recommendations_sbgginfo_description" => [
-			"de" => "Ausführliche Informationen zum SBGG und dessen rechtlichen Aspekte",
-			"en" => "In-depth information about the SBGG and its legal aspects (German)"
-		],
-		
-		
-		
-		
-		
-		"about_title" => [
-			"de" => "Über diese Webseite",
-			"en" => "About this Website"
-		],
-		"about_text" => [
-			"de" => [
-				"Hi, ich bin Kim (sie/er/they)! Als nicht-binäre Person warte ich schon seit einer Ewigkeit auf das Selbstbestimmungsgesetz.",
-				"Die von der Bundesregierung selbst gesetzten Fristen für das Gesetz werden ständig verschoben und über den Fortschritt des Vorhabens dringt nur wenig nach außen.",
-				"Auf dieser Seite möchte ich dem Selbstbestimmungsgesetz die nötige Transparenz geben und den derzeitigen Stand der Gesetzgebung dokumentieren.",
-				"Für Fragen oder Anregungen stehe ich gerne zur Verfügung."
-			],
-			"en" => [
-				"Hi, I'm Kim (they/them)! As a non-binary person, I've been waiting for the Self-Determination Act for ages.",
-				"The deadlines for the law set by the federal government are constantly being pushed back and little is revealed about the progress of the project.",
-				"On this page I want to give the Self-Determination Law the necessary transparency and document the current status of the legislation.",
-				"If you have any questions or suggestions, feel free to contact me."
-			]
-		],
-		
-		"about_button_mail" => [
-			"de" => "Kontakt",
-			"en" => "Contact"
-		],
-		"about_button_website" => [
-			"de" => "Mehr Über Mich",
-			"en" => "More About Me"
-		],
-		
-		
-		
-		
-		
-		"text_sourcecode" => [
-			"de" => "Quellcode",
-			"en" => "Source Code"
-		],
-		
-		"text_imprint" => [
-			"de" => "Impressum",
-			"en" => "Imprint"
-		],
-		"link_imprint" => [
-			"de" => "/impressum",
-			"en" => "/imprint"
-		],
-
-		"text_privacy_policy" => [
-			"de" => "Datenschutz&shy;erklärung",
-			"en" => "Privacy Policy"
-		],
-		"link_privacy_policy" => [
-			"de" => "/datenschutz",
-			"en" => "/privacy"
-		],
-		
-		
-		
-		
-		
-		"copylink_hint_text" => [
-			"de" => "Bereichs-Link kopieren",
-			"en" => "Copy section link"
-		],
-		
-		
-		
-		
-		
-		"legal_imprint_page_title" => [
-			"de" => "SBGG.jetzt - Impressum",
-			"en" => "SBGG.jetzt - Imprint"
-		],
-		"legal_imprint_title" => [
-			"de" => "Impressum",
-			"en" => "Imprint"
-		],
-		
-		"legal_privacy_page_title" => [
-			"de" => "SBGG.jetzt - Datenschutzerklärung",
-			"en" => "SBGG.jetzt - Privacy Policy"
-		],
-		"legal_privacy_title" => [
-			"de" => "Datenschutz&shy;erklärung",
-			"en" => "Privacy Policy"
-		],
-		
-		
-		
-		
-		
-		"newsletter_subscribe_page_title" => [
-			"de" => "SBGG.jetzt - Newsletter Abonnieren",
-			"en" => "SBGG.jetzt - Subscribe to Newsletter"
-		],
-		
-		"newsletter_subscribe_title" => [
-			"de" => "Newsletter Abonnieren",
-			"en" => "Subscribe to Newsletter"
-		],
-		"newsletter_subscribe_submit" => [
-			"de" => "Abonnieren",
-			"en" => "Subscribe"
-		],
-		"newsletter_subscribe_feedback_wait" => [
-			"de" => "Wird angemeldet",
-			"en" => "Subscribing"
-		],
-		"newsletter_subscribe_feedback_success" => [
-			"de" => "Erfolgreich angemeldet",
-			"en" => "Successfully subscribed"
-		],
-		"newsletter_subscribe_feedback_failure" => [
-			"de" => "Fehler bei der Anmeldung",
-			"en" => "Failed to subscribe"
-		],
-		"newsletter_subscribe_privacy_note" => [
-			"de" => [
-				"Deine Mail-Adresse wird ausschließlich zum Versenden des Newsletters verwendet und zu keinem Zeitpunkt an Dritte weitergegeben.",
-				"Du kannst Dich jederzeit über einen Link in den E-Mails wieder abmelden.",
-				"Mehr zum Thema Datenschutz erfährst Du in unserer <a href=\"/datenschutz\" target=\"_blank\">Datenschutzerklärung <i class=\"ti ti-external-link\"></i></a>."
-			],
-			"en" => [
-				"Your mail address is exclusively being used for the delivery of the newsletter and never being forwarded to third parties.",
-				"You can unsubscribe at any time via a link in the newsletter mails.",
-				"More about data privacy can be found in our <a href=\"/privacy\" target=\"_blank\">Privacy Policy <i class=\"ti ti-external-link\"></i></a>."
-			]
-		],
-		
-		
-		
-		
-		
-		"newsletter_unsubscribe_page_title" => [
-			"de" => "SBGG.jetzt - Newsletter Abbestellen",
-			"en" => "SBGG.jetzt - Unsubscribe from Newsletter"
-		],
-		
-		"newsletter_unsubscribe_title" => [
-			"de" => "Newsletter Abbestellen",
-			"en" => "Unsubscribe from Newsletter"
-		],
-		"newsletter_unsubscribe_submit" => [
-			"de" => "Abbestellen",
-			"en" => "Unsubscribe"
-		],
-		"newsletter_unsubscribe_feedback_wait" => [
-			"de" => "Wird abgemeldet",
-			"en" => "Unsubscribing"
-		],
-		"newsletter_unsubscribe_feedback_success" => [
-			"de" => "Erfolgreich abgemeldet",
-			"en" => "Successfully unsubscribed"
-		],
-		"newsletter_unsubscribe_feedback_failure" => [
-			"de" => "Fehler bei der Abmeldung",
-			"en" => "Failed to unsubscribe"
+			"en" => "Everything about the German Self-Determination Law in one place",
 		],
 	]);
 ?>
--- a/page/style.css
+++ b/page/style.css
@ -0,0 +1,822 @@
+:root {
+	--color-bg: #21252b;
+	--color-bg-light: #2c313a;
+	
+	--color-white: #c5cad3;
+	
+	--color-gray-light: #acb0b9;
+	--color-gray: #828997;
+	--color-gray-dark: #5c6370;
+	--color-gray-dark-dark: #454b54;
+	
+	--color-red: #e06c75;
+	--color-red-light: #e9969d;
+	--color-red-dark: #cb4d58;
+	
+	--color-orange: #d19a66;
+	--color-orange-light: #ddb48d;
+	--color-orange-dark: #b9804b;
+	
+	--color-yellow: #dace71;
+	--color-yellow-light: #e5dc9a;
+	--color-yellow-dark: #c4b754;
+	
+	--color-green: #98c379;
+	--color-green-light: #b3d39c;
+	--color-green-dark: #7fa762;
+	
+	--color-cyan: #71d6bc;
+	--color-cyan-light: #98e1cf;
+	--color-cyan-dark: #55bea4;
+	
+	--color-blue: #61afef;
+	--color-blue-light: #90c7f4;
+	--color-blue-dark: #3e97e0;
+	
+	--color-purple: #c678dd;
+	--color-purple-light: #d7a1e8;
+	--color-purple-dark: #af5bc8;
+}
+* {
+	box-sizing: border-box;
+}
+
+html,
+body {
+	margin: 0;
+	padding: 0;
+	overflow-x: hidden;
+	
+	color: var(--color-white);
+	background-color: var(--color-bg);
+}
+html {
+	font-size: 16px;
+}
+@media only screen and (max-width: 1000px) {
+	html {
+		font-size: 14px;
+	}
+}
+body {
+	min-height: 100vh;
+	min-height: 100dvh;
+	
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	
+	font-size: 0;
+	font-family: "Ubuntu", sans-serif;
+}
+span, li::marker {
+	display: block;
+	font-size: 1rem;
+}
+ul, ol {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: nowrap;
+	gap: 1rem;
+}
+ul > li, ol > li {
+	text-align: start;
+}
+a {
+	text-decoration: none;
+}
+span a {
+	color: var(--theme);
+}
+span a:hover {
+	text-decoration: underline;
+	cursor: pointer;
+}
+span.gray a {
+	color: var(--color-gray);
+	text-decoration: underline;
+	text-decoration-style: dotted;
+}
+span.gray a:hover {
+	text-decoration-style: solid;
+}
+button {
+	all: unset;
+}
+button:focus {
+	outline: revert;
+}
+.link {
+	color: var(--theme);
+}
+.link:hover {
+	cursor: pointer;
+	text-decoration: underline;
+}
+
+span.inline {
+	display: inline;
+}
+span.align-left {
+	text-align: left;
+}
+.colored {
+	color: var(--theme);
+}
+.gray {
+	color: var(--color-gray);
+}
+.white {
+	color: var(--color-white);
+}
+
+.hidden {
+	visibility: hidden !important;
+}
+.gone {
+	display: none !important;
+}
+
+.select-none {
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+.rounded {
+	border-radius: 50%;
+}
+@media only screen and (max-width: 600px) {
+	.focus-remove-on-mobile {
+		filter: blur(4px)
+	}
+}
+
+
+
+
+
+/* PAGE LAYOUT */
+.page-container {
+	flex-grow: 1;
+	
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: flex-start;
+}
+.page-container.has-nav {
+	padding-top: 4.3rem; /* NOTE: This is tied to `.nav-container` and `nav .menu-mobile` */
+}
+.page-container.full-page {
+	width: 100%;
+}
+.page {
+	max-width: 50vw; /* NOTE: This is tied to `nav .width-governor` */
+	
+	padding: 6rem 2rem;
+	
+	display: flex;
+	flex-direction: column;
+	gap: 6rem;
+	
+	text-align: center;
+}
+.page-container.full-page .page {
+	width: 100%;
+}
+.page > .empty {
+	margin-bottom: -6rem; /* NOTE: This is tied to `.page` */
+}
+@media only screen and (max-width: 1600px) {
+	.page {
+		max-width: 70vw; /* NOTE: This is tied to `nav .width-governor` */
+	}
+}
+@media only screen and (max-width: 1300px) {
+	.page {
+		max-width: 80vw; /* NOTE: This is tied to `nav .width-governor` */
+	}
+}
+@media only screen and (max-width: 1000px) {
+	.page {
+		max-width: 100vw; /* NOTE: This is tied to `nav .width-governor` */
+		padding: 6rem 1rem;
+	}
+}
+
+
+
+
+
+/* PAGE TITLE */
+.page > .title {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	
+	margin: 2rem 0;
+}
+@media only screen and (max-width: 1000px) {
+	.page > .title {
+		margin: 0 0;
+	}
+}
+.page > .title h1,
+.page > .title h2 {
+	align-self: center;
+	margin: 0;
+}
+
+.page > .title h1 {
+	font-size: 3rem;
+	
+	background-image: linear-gradient(to right, var(--color-red), var(--color-orange), var(--color-yellow), var(--color-green), var(--color-blue), var(--color-purple));
+	-webkit-background-clip: text;
+	color: transparent;
+}
+.page > .title h2 {
+	font-size: 1.5rem;
+}
+
+
+
+
+
+/* SECTIONS */
+.section {
+	display: flex;
+	flex-direction: column;
+	
+	width: 100%;
+}
+
+.section > .header {
+	align-self: flex-start;
+	
+	position: relative;
+	padding-right: 0.5rem;
+	
+	display: inline-flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	gap: 0.5rem;
+	
+	color: var(--theme);
+}
+.section > .header .extra {
+	color: var(--color-gray);
+}
+
+.section > .content,
+.legal-text {
+	display: flex;
+	flex-direction: column;
+	gap: 2rem;
+	
+	padding: 1rem 2rem;
+}
+.section > .content.rows {
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	justify-content: center;
+}
+.section > .content.full-page {
+	width: 100vw;
+	position: relative;
+	left: 50%;
+	right: 50%;
+	margin-left: -50vw;
+	margin-right: -50vw;
+}
+
+
+
+
+
+/* BOX */
+.box,
+.legal-text .section {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 1rem;
+	
+	padding: 2rem;
+	
+	border-radius: 2rem;
+	background-color: var(--color-bg-light);
+}
+.box.align-left {
+	align-items: flex-start;
+}
+.box.shrink {
+	display: inline-flex;
+}
+.box.important {
+	border: 0.5rem solid var(--theme);
+}
+.box.danger {
+	border: 0.5rem solid var(--color-red);
+}
+.box.danger * {
+	--theme: var(--color-red);
+	--theme-light: var(--color-red-light);
+	--theme-dark: var(--color-red-dark);
+}
+a.box:hover {
+	background-color: var(--color-gray-dark-dark);
+}
+
+.box .title,
+.box .extra,
+.legal-text .title {
+	display: inline-flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: baseline;
+	gap: 0.5rem;
+}
+.box .title,
+.legal-text .title {
+	position: relative;
+	left: -0.5rem;
+	padding-left: 0.5rem;
+	
+	color: var(--theme);
+	font-size: 1.5rem;
+}
+.box .extra {
+	color: var(--color-gray);
+}
+
+
+
+
+
+/* TIMELINE */
+.timeline {
+	display: flex;
+	flex-direction: column;
+	
+	margin: -1rem 0;
+}
+
+.timeline > .item,
+.timeline > .wrapper > .item {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 1rem;
+}
+.timeline.no-line > .item,
+.timeline.no-line > .wrapper > .item {
+	gap: 0;
+}
+
+.timeline > .item > .connector,
+.timeline > .wrapper > .item > .connector {
+	align-self: stretch;
+	
+	position: relative;
+	
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+.timeline.no-line > .item > .connector,
+.timeline.no-line > .wrapper > .item > .connector {
+	justify-content: flex-start;
+	padding-top: 1rem;
+}
+.timeline:not(.no-line) > .item:not(:first-child) > .connector::before,
+.timeline:not(.no-line) > .wrapper:not(:first-child) > .item > .connector::before,
+.timeline:not(.no-line) > .item:not(:last-child) > .connector::after,
+.timeline:not(.no-line) > .wrapper:not(:last-child) > .item > .connector::after {
+	content: "";
+	position: absolute;
+	left: calc(50% - 0.25rem);
+	width: 0.5rem;
+	height: calc(50% + 0.5rem);
+	
+	border-radius: 0.5rem;
+	background-color: var(--color-bg-light);
+	z-index: 0;
+}
+.timeline:not(.no-line) > .item > .connector::before,
+.timeline:not(.no-line) > .wrapper > .item > .connector::before {
+	top: 0;
+}
+.timeline:not(.no-line) > .item.done > .connector::before,
+.timeline:not(.no-line) > .wrapper > .item.done > .connector::before {
+	background-color: var(--theme);
+}
+.timeline:not(.no-line) > .item.next > .connector::before,
+.timeline:not(.no-line) > .wrapper > .item.next > .connector::before {
+	background-color: var(--theme);
+}
+.timeline:not(.no-line) > .item > .connector::after,
+.timeline:not(.no-line) > .wrapper > .item > .connector::after {
+	top: 50%;
+	z-index: 1 !important;
+}
+.timeline:not(.no-line) > .item.done > .connector::after,
+.timeline:not(.no-line) > .wrapper > .item.done > .connector::after {
+	background-color: var(--theme);
+}
+
+.timeline > .item > .connector > .waypoint,
+.timeline > .wrapper > .item > .connector > .waypoint {
+	padding: 1rem;
+	
+	font-size: 1.5rem;
+	border-radius: 50%;
+	background-color: var(--color-bg-light);
+	z-index: 2;
+}
+.timeline.no-line > .item > .connector > .waypoint,
+.timeline.no-line > .wrapper > .item > .connector > .waypoint {
+	border-radius: 50% 0 0 50%;
+}
+.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 > .wrapper > .item.next > .connector > .waypoint {
+	background-color: var(--color-gray-dark);
+}
+
+.timeline > .item > .box,
+.timeline > .wrapper > .item > .box {
+	flex-grow: 1;
+	align-items: flex-start;
+	
+	margin: 1rem 0;
+	z-index: 2;
+	
+	text-align: left;
+}
+.timeline.no-line > .item > .box,
+.timeline.no-line > .wrapper > .item > .box {
+	border-radius: 0 2rem 2rem 2rem;
+}
+
+@media only screen and (max-width: 1000px) {
+	.timeline > .item,
+	.timeline > .wrapper > .item {
+		position: relative;
+		flex-direction: column;
+		gap: 0;
+	}
+	.timeline:not(.no-line) > .item > .connector,
+	.timeline:not(.no-line) > .wrapper > .item > .connector,
+	.timeline.no-line > .item > .connector,
+	.timeline.no-line > .wrapper > .item > .connector {
+		align-self: center;
+	}
+	
+	.timeline:not(.no-line) > .item:not(:last-child)::after,
+	.timeline:not(.no-line) > .wrapper:not(:last-child) > .item::after {
+		content: "";
+		position: absolute;
+		left: calc(50% - 0.25rem);
+		top: 1rem;
+		width: 0.5rem;
+		height: 100%;
+		
+		background-color: var(--color-bg-light);
+		z-index: 0;
+	}
+	.timeline:not(.no-line) > .item.done::after,
+	.timeline:not(.no-line) > .wrapper > .item.done::after,
+	.timeline.no-line > .item.done::after,
+	.timeline.no-line > .wrapper > .item.done::after {
+		background-color: var(--theme);
+	}
+	.timeline:not(.no-line) > .item.done-stop::after,
+	.timeline:not(.no-line) > .wrapper > .item.done-stop::after,
+	.timeline.no-line > .item.done-stop::after,
+	.timeline.no-line > .wrapper > .item.done-stop::after {
+		background-color: var(--theme);
+	}
+	
+	.timeline > .item:not(:last-child) > .box,
+	.timeline > .wrapper:not(:last-child) > .item > .box {
+		margin: 0 0 4rem 0;
+	}
+	.timeline.no-line > .item:not(:last-child) > .box,
+	.timeline.no-line > .wrapper:not(:last-child) > .item > .box {
+		margin: 0 0 1rem 0;
+	}
+	.timeline:not(.no-line) > .item:last-child > .box,
+	.timeline:not(.no-line) > .wrapper:last-child > .item > .box,
+	.timeline.no-line > .item:last-child > .box,
+	.timeline.no-line > .wrapper:last-child > .item > .box {
+		margin: 0;
+	}
+	
+	.timeline:not(.no-line) > .item > .connector > .waypoint,
+	.timeline:not(.no-line) > .wrapper > .item > .connector > .waypoint,
+	.timeline.no-line > .item > .connector > .waypoint,
+	.timeline.no-line > .wrapper > .item > .connector > .waypoint {
+		border-radius: 50% 50% 0 0;
+	}
+	
+	.timeline:not(.no-line) > .item > .box,
+	.timeline:not(.no-line) > .wrapper > .item > .box,
+	.timeline.no-line > .item > .box,
+	.timeline.no-line > .wrapper > .item > .box {
+		align-items: center;
+		text-align: center;
+		
+		border-radius: 2rem;
+	}
+	.timeline:not(.no-line) > .item > .box,
+	.timeline:not(.no-line) > .wrapper > .item > .box {
+		outline: 0.125rem solid var(--color-bg-light);
+	}
+	.timeline:not(.no-line) > .item.done > .box,
+	.timeline:not(.no-line) > .wrapper > .item.done > .box {
+		outline: 0.125rem solid var(--theme);
+	}
+	.timeline:not(.no-line) > .item.next > .box,
+	.timeline:not(.no-line) > .wrapper > .item.next > .box {
+		outline: 0.125rem solid var(--color-gray-dark);
+	}
+}
+
+
+
+
+
+/* BUTTONS */
+.button-list {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 1rem;
+}
+.button-list.align-left {
+	justify-content: flex-start;
+}
+
+.button,
+.button.disabled:hover {
+	align-items: center;
+	
+	display: inline-flex;
+	flex-direction: row;
+	gap: 0.5rem;
+	width: fit-content;
+	padding: 1rem 1.5rem;
+	
+	color: var(--color-white);
+	border-radius: 1rem;
+	background-color: var(--color-gray-dark-dark);
+	
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+.button.on-bg {
+	background-color: var(--color-bg-light);
+}
+.button:hover {
+	cursor: pointer;
+	background-color: var(--color-gray-dark);
+}
+.button.on-bg:hover {
+	background-color: var(--color-gray-dark-dark);
+}
+.button.disabled {
+	opacity: 0.3;
+}
+.button.disabled:hover {
+	cursor: not-allowed;
+}
+
+.button.primary,
+.button.primary.disabled:hover {
+	color: var(--color-bg);
+	background-color: var(--theme);
+}
+.button.primary:hover {
+	background-color: var(--theme-dark);
+}
+
+.button.tertiary,
+.button.tertiary.disabled:hover {
+	padding: 0.5rem 1rem;
+	margin: 0 -1rem; /* NOTE: Fix to increase hitbox without messing up the button-list gap */
+	
+	color: var(--color-white);
+	background: none;
+}
+.button.tertiary:hover,
+.button.tertiary.active {
+	color: var(--theme);
+	background: none;
+}
+
+.button .icon.big {
+	font-size: 2rem;
+}
+.button .text {
+	display: inline-flex;
+	flex-flow: column;
+	align-items: flex-start;
+}
+
+
+
+
+
+/* FORM ELEMENTS */
+.form-container {
+	position: relative;
+	width: 100%;
+}
+
+.form {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: nowrap;
+	gap: 1rem;
+}
+
+.key-value-pair {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	align-items: stretch;
+}
+.key-value-pair .key {
+	display: flex;
+	align-items: center;
+	
+	padding: 1rem;
+	border-top-left-radius: 1rem;
+	border-bottom-left-radius: 1rem;
+	
+	background-color: var(--theme);
+	color: var(--color-bg);
+}
+.key-value-pair .value-list {
+	flex-grow: 1;
+	
+	display: flex;
+	flex-direction: column;
+	flex-wrap: nowrap;
+	align-items: flex-start;
+	gap: 0.5rem;
+}
+.key-value-pair .value {
+	flex-grow: 1;
+	
+	display: flex;
+	flex-direction: column;
+	flex-wrap: nowrap;
+	align-items: flex-start;
+	gap: 0.5rem;
+	
+	padding: 1rem;
+	border-top-right-radius: 1rem;
+	border-bottom-right-radius: 1rem;
+	
+	background-color: var(--color-gray-dark-dark);
+}
+
+.inputwrapper {
+	position: relative;
+	width: 100%;
+}
+.inputwrapper.valid input,
+.inputwrapper.invalid input {
+	padding-right: 2.5rem;
+}
+.inputwrapper.valid::after,
+.inputwrapper.invalid::after {
+	position: absolute;
+	right: 1rem;
+	top: 50%;
+	transform: translateY(-50%);
+	display: block;
+	font-size: 1rem;
+	
+	font-family: "tabler-icons" !important;
+	speak: none;
+	font-style: normal;
+	font-weight: normal;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+.inputwrapper.valid::after {
+	content: "\ea5e";
+	color: var(--color-green);
+}
+.inputwrapper.invalid::after {
+	content: "\eb55";
+	color: var(--color-red);
+}
+
+input {
+	width: 100%;
+	
+	outline: none;
+	border: none;
+	margin: 0;
+	
+	font-family: inherit;
+	font-size: 1rem;
+	color: var(--color-white);
+	background: none;
+}
+input::placeholder {
+	color: var(--color-gray-light);
+}
+
+.value.switch {
+	flex-direction: row;
+	gap: 0;
+	padding: 0;
+	
+	background: none;
+	
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+.switch .option {
+	padding: 1rem;
+	background-color: var(--color-gray-dark-dark);
+}
+.switch .option:last-child {
+	border-top-right-radius: 1rem;
+	border-bottom-right-radius: 1rem;
+}
+.switch .option:hover {
+	background-color: var(--color-gray-dark);
+	cursor: pointer;
+}
+.switch .option.selected {
+	background-color: var(--theme-dark);
+	color: var(--color-bg);
+}
+
+.form-feedback {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	
+	display: flex;
+	flex-direction: column;
+	flex-wrap: nowrap;
+	justify-content: center;
+}
+
+.form-feedback .centertext {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	justify-content: center;
+	align-items: center;
+	gap: 0.5rem;
+}
+.form-feedback-wait {
+	color: var(--color-blue);
+}
+.form-feedback-success {
+	color: var(--color-green);
+}
+.form-feedback-failure {
+	color: var(--color-red);
+}
+
+
+
+
+
+/* ANIMATION KIT */
+.spinning {
+	animation-name: spinning;
+	animation-duration: 0.5s;
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
+}
+@keyframes spinning {
+	from {
+		transform:rotate(0deg);
+	}
+	to {
+		transform:rotate(360deg);
+	}
+}
--- a/page/start/style.css.php
+++ b/page/start/style.css.php
--- a/page/timeline/index.php
+++ b/page/timeline/index.php
@ -0,0 +1,479 @@
+<?php
+	declare(strict_types = 1);
+	namespace Kimendisch\Sbgg_Jetzt;
+	use Flake\Page;
+	use Flake\Project;
+	
+	// HACK: REMOVE `DE` PATH PARAM //
+	if(!in_array(Project::param("lang"), [null, "en"])){
+		header("HTTP/1.1 303 See Other");
+		header("Location: /timeline");
+	}
+	
+	
+	// LANGUAGE MANAGER //
+	// hack: fake get param from url path
+	$param_lang = Project::param("lang") ?? "de";
+	$_GET["lang"] = $param_lang;
+	require("./page/lang_base.php");
+	require(__DIR__ . "/strings.php");
+	
+	
+	// PAGE INIT //
+	Page::start();
+	
+	Page::title($dict->get("timeline_page_title"));
+	Page::$head["alternate_de"] = '<link rel="alternate" hreflang="de" href="/timeline" />';
+	Page::$head["alternate_en"] = '<link rel="alternate" hreflang="en" href="/en/timeline" />';
+	Page::robots(index: true, follow: true);
+	
+	Page::$head["og_title"] = '<meta property="og:title" content="' . $dict->get("timeline_page_title") . '" />';
+	
+	require("./page/page_base.php");
+?>
+
+
+
+
+
+<?php
+	Nav::$active = "timeline";
+	require("./page/nav.php");
+?>
+
+
+
+<div class="page-container has-nav">
+	<div id="page" class="page">
+		<div class="title">
+			<h1><?= $dict->get("name") ?></h1>
+			<h2><?= $dict->get("page_title_h2") ?></h2>
+		</div>
+		
+		
+		
+		<div id="why" class="empty wrapper copylink-id"></div>
+		<div id="warum" 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="timeline" class="wrapper copylink-id">
+			<div class="section">
+				<div class="header">
+					<span class="icon ti ti-clock"></span>
+					<span class="text"><?= $dict->get("timeline_title") ?></span>
+					<button class="copylink ti ti-link"></button>
+				</div>
+				<div class="content">
+					<div class="timeline">
+						<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="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="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="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="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="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="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="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="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="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="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="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>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+
+
+<?php
+	Footer::$lang_href = [
+		"de" => "/timeline",
+		"en" => "/en/timeline",
+	];
+	require("./page/footer.php");
+?>
--- a/page/timeline/strings.php
+++ b/page/timeline/strings.php
@ -0,0 +1,402 @@
+<?php
+	declare(strict_types = 1);
+	namespace Kimendisch\Sbgg_Jetzt;
+	
+	$dict->define([
+		"timeline_page_title" => [
+			"de" => "SBGG.jetzt - Timeline",
+			"en" => "SBGG.jetzt - Timeline",
+		],
+		
+		"page_title_h2" => [
+			"de" => "Timeline",
+			"en" => "Timeline",
+		],
+		
+		
+		
+		
+		
+		"why_title" => [
+			"de" => "Warum ein neues Gesetz?",
+			"en" => "Why a new Law?",
+		],
+		
+		"why_text" => [
+			"de" => [
+				"Das 1980 eingeführte Transsexuellengesetz regelte in Deutschland für 44 Jahre, wie Trans* Menschen ihren Namen und Geschlechtseintrag rechtlich ändern können.",
+				"Dieses Gesetz wurde seinen Ansprüchen aber keinesfalls gerecht. Stattdessen wurden Trans* Menschen Steine in den Weg gelegt:",
+				"Der Prozess zur Änderung von Namen und Geschlechtseintrag erforderte zwei unabhängige Sachverständigengutachten und ein Gerichtsverfahren. Das war diskriminierend, dauerte eine Ewigkeit und war sehr teuer.",
+				"Das Selbstbestimmungsgesetz löste das TSG ab und ermöglicht nun eine Änderung des Namens und des Geschlechtseintrags ganz einfach per Selbstauskunft beim Standesamt.",
+			],
+			"en" => [
+				"The<i>Transsexuellengesetz</i> (Transsexual Law), introduced in 1980, regulated how trans* people can legally change their name and gender entry in Germany for 44 years.",
+				"However, this law did not live up to its claims. Instead, obstacles were put in the way of trans* people:",
+				"The process of changing name and gender entry required two independent psychological assessments and a court hearing. This was discriminatory, took forever and was very expensive.",
+				"The Self-Determination Law replaced the TSG and made it easy to change name and gender entry by self-disclosure at the <i>Standesamt</i> (registry office).",
+			],
+		],
+		
+		
+		
+		
+		
+		
+		"timeline_title" => [
+			"de" => "Timeline",
+			"en" => "Timeline",
+		],
+		
+		
+		
+		
+		
+		"timeline_koalitionsvertrag_date" => [
+			"de" => "24 Nov 2021",
+			"en" => "24 Nov 2021",
+		],
+		"timeline_koalitionsvertrag_title" => [
+			"de" => "Koalitionsvertrag",
+			"en" => "Coalition Agreement",
+		],
+		"timeline_koalitionsvertrag_text" => [
+			"de" => [
+				"Bereits im Koalitionsvertrag \"Mehr Fortschritt wagen\" einigen sich die Parteien SPD, FDP und die Grünen unter der Überschrift \"Queeres Leben\" darauf, das TSG abzuschaffen und durch ein Selbstbestimmungsgesetz zu ersetzen (vgl. Link S. 95).",
+			],
+			"en" => [
+				"Already in the coalition agreement, the parties SPD, FDP and the Greens agree on abolishing the TSG and replacing it with a Self-Determination Law (see Link p. 95).",
+			],
+		],
+		"timeline_koalitionsvertrag_button" => [
+			"de" => "Koalitionsvertrag",
+			"en" => "Coalition Agreement (German)",
+		],
+		
+		
+		
+		
+		
+		"timeline_eckpunktepapier_date" => [
+			"de" => "30 Jun 2022",
+			"en" => "30 Jun 2022",
+		],
+		"timeline_eckpunktepapier_title" => [
+			"de" => "Eckpunktepapier",
+			"en" => "Key Issues Paper",
+		],
+		"timeline_eckpunktepapier_text" => [
+			"de" => [
+				"Das Eckpunktepapier des des Bundesministeriums für Familie, Senioren, Frauen und Jugend und des Bundesministeriums der Justiz legt die grundlegenden Eckpunkte des Selbstbestimmungsgesetzes fest.",
+				"Hierin wird festgelegt, dass die Änderung des Vornamens und Geschlechtseintrags per Erklärung beim Standesamt möglich sein soll. Auch eine Regelung für Minderjährige wird erwähnt. Zudem wird eine Sperrfrist von einem Jahr festgelegt, um Missbrauch zu verhindern.",
+			],
+			"en" => [
+				"The key issues paper by the Federal Ministry for Family Affairs, Senior Citizens, Women and Youth and the Federal Ministry of Justice lays down the fundamental key points of the Self-Determination Act.",
+				"This stipulates that it should be possible to change the first name and gender entry by self-disclosure at the <i>Standesamt</i> (registry office). A regulation for minors is also mentioned. In addition, a blocking period of one year is set to prevent abuse.",
+			],
+		],
+		"timeline_eckpunktepapier_button" => [
+			"de" => "Eckpunktepapier",
+			"en" => "Key Issues Paper (German)",
+		],
+		
+		
+		
+		
+		
+		"timeline_referentenentwurf_date" => [
+			"de" => "09 Mai 2023",
+			"en" => "09 May 2023",
+		],
+		"timeline_referentenentwurf_title" => [
+			"de" => "Referentenentwurf",
+			"en" => "Draft Bill",
+		],
+		"timeline_referentenentwurf_text" => [
+			"de" => [
+				"Das Bundesministerium für Familie, Senioren, Frauen und Jugend und das Bundesministerium der Justiz erarbeiten gemeinsam einen ersten Entwurf des Selbstbestimmungsgesetzes, welcher im Anschluss mit Verbänden und Organisationen diskutiert wird.",
+				"Der Referentenentwurf hält sich im Allgemeinen an die zuvor im Eckpunktepapier festgelegten Ziele. Neu sind Ausnahmen für Haftanstalten und im Hausrecht (z.B. für Frauensaunen). Zudem wird die Möglichkeit für cis Männer, ihren Geschlechtseintrag im Kriegsfall zu ändern eingeschränkt, um zu verhindern, dass diese sich dadurch einer Einberufung entziehen.",
+			],
+			"en" => [
+				"The Federal Ministry for Family Affairs, Senior Citizens, Women and Youth and the Federal Ministry of Justice are jointly developing a first draft of the Self-Determination Act, which will then be discussed with associations and organizations.",
+				"The draft bill generally adheres to the goals previously set in the key issues paper. There are new exceptions for detention centers and in house law (e.g. for women's saunas). In addition, the ability for cis men to change their gender entry is restricted in the event of war to prevent them from avoiding a convening.",
+			],
+		],
+		"timeline_referentenentwurf_button" => [
+			"de" => "Referentenentwurf",
+			"en" => "Draft Bill (German)",
+		],
+		"timeline_referentenentwurf_button2" => [
+			"de" => "Hintergrundpapier / FAQ",
+			"en" => "FAQ (German)",
+		],
+		
+		
+		
+		
+		
+		"timeline_regierungsentwurf_date" => [
+			"de" => "23 Aug 2023",
+			"en" => "23 Aug 2023",
+		],
+		"timeline_regierungsentwurf_title" => [
+			"de" => "Regierungsentwurf",
+			"en" => "Government Draft",
+		],
+		"timeline_regierungsentwurf_text" => [
+			"de" => [
+				"Aus den Beratungen mit den Verbänden und Organisationen beschließt die Bundesregierung den Regierungsentwurf, die vorläufige Version des Gesetzestextes, welche später im Bundestag beraten wird.",
+				"Der von der Bundesregierung vorgelegte Regierungsentwurf ähnelt in den meisten Punkten dem Referentenentwurf. So bleiben die bereits zuvor kritisierten Ausnahmeregelungen für Haftanstalten, im Hausrecht und im Kriegsfall bestehen.",
+				"Im Gegensatz zur dreimonatigen Wartezeit bis zum Inkrafttreten der Änderung des Geschlechtseintrags und Vornamens, muss eine gewünschte Änderung jetzt drei bis sechs Monate vorher beim Standesamt angemeldet werden. Nach diesen drei bis sechs Monaten kann dann die Erklärung zur Änderung des Geschlechtseintrags und Vornamens beim Standesamt abgegeben werden und tritt sofort in Kraft.",
+				"Zudem wird weiterhin darauf bestanden, dass im Falle eines Wechsels zu einem früheren Geschlechtseintrag auch der zuvor gültige Vorname angenommen werden muss.",
+				"Verwunderlich ist der letzte Artikel \"Inkrafttreten, Außerkrafttreten\", laut welchem das Gesetz erst am \"1. November 2024\" in Kraft treten soll.",
+			],
+			"en" => [
+				"From the consultations with the associations and organizations, the federal government creates the government draft, the preliminary version of the legal text, which will later be discussed in the <i>Bundestag</i> (Parliament of the Federal Republic of Germany).",
+				"The government draft published by the federal government is similar to the draft bill in most points. Thus the criticized exceptions for detention centers, in house law and in the event of war persist.",
+				"In contrast to the waiting time of three months until the change of the first name and gender entry become valid, a desired change must now be registered with the <i>Standesamt</i> (registry office) three to six months in advance. After these three to six months, the declaration to change the gender entry and first name can be submitted to the <i>Standesamt</i> (registry office) and comes into force immediately.",
+				"In addition, it is also insisted that in the event of a change to an earlier gender entry, the previously valid first name must be adopted.",
+				"The last article <i>\"Inkrafttreten, Außerkrafttreten\"</i> (entry into force, going out of force) is surprising, according to which the law comes into effect as late as 01 Nov 2024.",
+			],
+		],
+		"timeline_regierungsentwurf_button" => [
+			"de" => "Regierungsentwurf",
+			"en" => "Government Draft (German)",
+		],
+		
+		
+		
+		
+		
+		"timeline_bundesrat_date" => [
+			"de" => "20 Okt 2023",
+			"en" => "20 Oct 2023",
+		],
+		"timeline_bundesrat_title" => [
+			"de" => "Stellungnahme des Bundesrates",
+			"en" => "Review by the Federal Council",
+		],
+		"timeline_bundesrat_text" => [
+			"de" => [
+				"Bevor der Regierungsentwurf im Bundestag beraten werden kann, muss er dem Bundesrat zur Stellungnahme vorgelegt werden.",
+				"Während der Sitzung wurden dem SBGG 16 Minuten gewidmet.",
+				"Zuerst sprachen sich die Grünenpolitikerinnen Ursula Nonnemacher (Stellvertreterin des Ministerpräsidenten des Landes Brandenburg) und Katja Meier (Sächsische Staatsministerin der Justiz und für Demokratie, Europa und Gleichstellung) in einem Redebeitrag für das Selbstbestimmungsgesetz aus. Sie wiesen darauf hin, dass die Selbstbestimmung des Geschlechtseintrags und des Namens ein Grundrecht sei und, dass viele Angehörige der LSBTIQ+ Community Opfer von Gewalt und Benachteiligung wären.",
+				"Aus der darauf folgenden Abstimmung im Plenum gehen nur die Empfehlungen 7, 8, 11, 13, 15, 16 und 17 mit einer Mehrheit hervor. In diesen Empfehlungen werden vor allem kleine Veränderungen vorgeschlagen, welche einzelne Passagen des Gesetzes deutlicher formulieren sollen.",
+			],
+			"en" => [
+				"Before the government draft can be discussed in the <i>Bundestag</i> (Parliament), it must be submitted to the <i>Bundesrat</i> (Federal Council) for comment.",
+				"During the session, the SBGG was devoted to 16 minutes.",
+				"First, the politicians Ursula Nonnemacher (Deputy of the Prime Minister of the State of Brandenburg) and Katja Meier (Saxon Minister of State of Justice and for democracy, Europe and equality), both from the party of the Greens, gave a speech in favor of the Self-Determination Law. They pointed out that self-determination of the gender entry and name were fundamental rights and that many members of the  LSBTIQ+ community were victims of violence and discrimination.",
+				"The subsequent poll in the plenum resulted in only the recommendations 7, 8, 11, 13, 15, 16 and 17 being supported by a majority. These recommendations mainly propose small changes, which aim to express certain parts of the law more clearly.",
+			],
+		],
+		"timeline_bundesrat_button" => [
+			"de" => "Aufzeichnung TOP 14",
+			"en" => "Recording TOP 14 (German)",
+		],
+		"timeline_bundesrat_button2" => [
+			"de" => "Empfehlungen der Ausschüsse",
+			"en" => "Recommendations of the committees (German)",
+		],
+		
+		
+		
+		
+		
+		"timeline_lesung_1_date" => [
+			"de" => "15 Nov 2023",
+			"en" => "15 Nov 2023",
+		],
+		"timeline_lesung_1_title" => [
+			"de" => "1. Lesung",
+			"en" => "1st Reading",
+		],
+		"timeline_lesung_1_text" => [
+			"de" => [
+				"In der ersten Lesung im Bundestag wird der Regierungsentwurf zum ersten mal gemeinsam mit den anderen Parteien debattiert. Danach wird der Gesetzentwurf an die zuständigen Ausschüsse übergeben, wo er weiter beraten wird.",
+				"Die Redner*innen der Ampel-Parteien (FDP, SPD, Bündnis 90/Die Grünen) sprachen sich für das Gesetz aus und stellten klar, dass das TSG verfassungswidrig sei und die Diskriminierung von Trans- und Inter-Personen unterbunden werden müsse. Die Einführung des SBGG sei eine Frage von Respekt.",
+				"Von der AfD und dem fraktionslosen <i>Matthias Helferich</i> kamen unter anderem Aussagen, wie \"Pflicht zur Lüge\", \"Verstümmelnde Geschlechtsangleichungen\" und ein Vergleich von Deutschland mit Nord-Korea. Zudem dürfe man das Selbstbestimmungsgesetz nicht einführen, da sonst der Schutz von Kindern und Jugendlichen in Gefahr sei.",
+				"Auch von Seiten der CDU/CSU Fraktion gab es Zitate, wie \"Geschlecht [ist] Schicksal\", \"Geschlecht ist immer biologisch fundiert und gerade nicht frei wählbar\", das SBGG sei eine \"Überreaktion\" und Transgeschlechtlichkeit wäre ein Trend.",
+				"Die Abgeordnete <i>Kathrin Vogler</i> (Linke) mahnte den Gesetzentwurf als enttäuschend an und bezeichnete diesen als \"Misstrauensgesetz\".",
+			],
+			"en" => [
+				"In the first reading in the <i>Bundestag</i> (Parliament), the government draft is debated for the first time together with the other parties. After that, the bill will be passed to the relevant committees, where it will be discussed further.",
+				"The government speakers (FDP, SPD, Alliance 90/The Greens) spoke out in favor of the law and made clear that the TSG was unconstitutional and that discrimination against trans and intersex people must be stopped. The introduction of the SBGG was a question of respect.",
+				"The AfD and the non-attached <i>Matthias Helferich</i> made statements such as: \"obligation to lie\", \"mutilating gender reassignments\" and a comparison of Germany with North Korea. In addition, the Self-Determination Act should not be introduced, otherwise the protection of children and teenagers would be at risk.",
+				"There were also quotes from the CDU/CSU faction, such as: \"Gender [is] fate\", \"Gender is always biologically based and cannot be freely chosen\", the SBGG was an \"overreaction\" and being trans was a trend.",
+				"MP <i>Kathrin Vogler</i> (The left) described the draft bill as disappointing and as a \"law of missing confidence\".",
+				"<span class=\"inline gray\">Note: Quotes have been translated from German analogously.</span>",
+			],
+		],
+		"timeline_lesung_1_button" => [
+			"de" => "Aufzeichnung der Debatte",
+			"en" => "Dabate recording (German)",
+		],
+		
+		
+		
+		
+		
+		"timeline_ausschuss_anhoerung_date" => [
+			"de" => "28 Nov 2023",
+			"en" => "28 Nov 2023",
+		],
+		"timeline_ausschuss_anhoerung_title" => [
+			"de" => "Öffentliche Anhörung im Familienausschuss",
+			"en" => "Public hearing in the family committee",
+		],
+		"timeline_ausschuss_anhoerung_text" => [
+			"de" => [
+				"Zusätzlich zu den Sitzungen im Bundestag hält der Ausschuss für Familie, Senioren, Frauen und Jugend eine öffentliche Anhörung, zu der die Parteien des Bundestages Sachverständige einladen, welche ihre Einschätzung zum SBGG geben und zum Thema informieren.",
+				"Die Aussagen der Sachverständigen lassen sich in zwei Lager teilen. Auf der einen Seite stehen Expert*innen, welche darauf hinweisen, dass das Recht auf Selbstbestimmung ein Menschenrecht sei und der Missbrauch des SBGG unrealistisch wäre. Die Angst in der Bevölkerung basiere auf Angst-Mache und Desinformation. Außerdem seien am aktuellen Entwurf des Gesetzes noch vielzählige Verbesserungen notwendig; So sollen die Vorschriften zur Sperr-/Anmeldefrist, zum Hausrecht, zur Wehrpflicht, sowie zur Weiterleitung von sensiblen Daten an Sicherheitsbehörden ersatzlos gestrichen werden.",
+				"Auf der anderen Seite stehen Sachverständige, welche Transidentität als Phase oder Trend sehen, oder diese mit einer \"versteckten Homosexualität\" begründen. Zudem wäre Missbrauch, vor allem von Frauenschutzräumen, ein Problem. Das Risiko für die Gesellschaft sei \"größer als der Gewinn\".",
+			],
+			"en" => [
+				"In addition to the meetings in the Bundestag, the Committee on Family, Seniors, Women and Youth holds a public hearing to which the parties of the Bundestag invite experts who give their assessment of the SBGG and inform about the topic.",
+				"The experts' statements can be divided into two camps. On the one hand, there are experts who point out that the right to self-determination was a human right and that the abuse of the SBGG would be unrealistic. Fear in the population was based on anxiety and disinformation. In addition, a lot of improvements were still necessary in the current draft of the law; For example, the regulations for the blocking/registration period, for house rights, for military service, as well as for the forwarding of sensitive data to security authorities should be deleted without replacement.",
+				"On the other hand, there are experts who see trans identity as a phase or trend, or justify them with \"hidden homosexuality\". In addition, abuse, especially of women's protection rooms, was a problem. The risk for society is \"greater than the profit\".",
+				"<span class=\"inline gray\">Note: Quotes have been translated from German analogously.</span>",
+			],
+		],
+		"timeline_ausschuss_anhoerung_button" => [
+			"de" => "Aufzeichnung der Anhörung",
+			"en" => "Hearing recording (German)",
+		],
+		
+		
+		
+		
+		
+		"timeline_lesung_2_3_date" => [
+			"de" => "12 Apr 2024",
+			"en" => "12 Apr 2024",
+		],
+		"timeline_lesung_2_3_title" => [
+			"de" => "2. und 3. Lesung mit Schlussabstimmung",
+			"en" => "2nd and 3rd Reading with Final Vote",
+		],
+		"timeline_lesung_2_3_text" => [
+			"de" => [
+				"Wie auch hier, werden die Lesungen 2 und 3 oft zusammengelegt. Die zweite Lesung im Bundestag diskutiert die Ergebnisse der Ausschüsse. Einzelne Abgeordnete können Änderungen beantragen. Am Ende der dritten Lesung wird abschließend über das Gesetz abgestimmt.",
+				"Verglichen mit dem Regierungsentwurf enthält die <a href=\"https://web.archive.org/web/20240412195016/https://dserver.bundestag.de/btd/20/110/2011004.pdf\" class=\"link\">Beschlussempfehlung des Familienausschusses</a> nur kleine Änderungen; So müssen Kinder ab einem Alter von 5 Jahren im Fall einer Personenstandsänderung zustimmen und die Eltern von Minderjährigen müssen bestätigen, dass sie sich beraten haben lassen. Zudem wurde die Weitergabe von persönlichen Daten an Sicherheitsbehörden gestrichen.",
+				"Die Redner*innen der Regierungsparteien (FDP, SPD, Bündnis 90/Die Grünen) betonten die Wichtigkeit dieses Gesetzesvorhabens für die Grundrechte und Menschenwürde. Dem Leid, das das TSG verursacht hat werde jetzt ein Ende gesetzt. Dies treffe auf breite Unterstützung durch frauenpolitische Organisationen und Kirchen.",
+				"Aus den Lagern der Parteien CDU/CSU, AfD und der Gruppe BSW wurden Befürchtungen laut, das Gesetz gefährde Kinder- und Jugendschutz und wäre anfällig für Missbrauch. Einige dieser Redner*innen sind der Ansicht, Trans* wäre Einbildung und ein 'Hype', welcher durch eine Lobby gestärkt würde. Trans*-Personen seien lediglich Menschen in Verkleidung und Perücke.",
+				"Die Gruppe Die Linke begrüßt das Gesetz, mahnt aber auch an, dass dies nur der Anfang sein könne; Beratungsmöglichkeiten müssen verbessert und Regelungen zur Finanzierung gesundheitlicher Maßnahmen geschaffen werden.",
+				"Die Beschlussempfehlung des Familienausschusses wurde mit 372 zu 251 Stimmen angenommen. Der <a href=\"https://web.archive.org/web/20240412195124/https://dserver.bundestag.de/btd/20/082/2008203.pdf\" class=\"link\">Antrag der AfD</a>, das TSG zu erhalten und sogar noch zu verschärfen, wurde vom Parlament zurückgewiesen.",
+			],
+			"en" => [
+				"As seen here, reading 2 and 3 are often combined. The second reading in the <i>Bundestag</i> (Parliament) discusses the results of the committees. Individual members of the Bundestag can request changes. At the end of the third reading, a final vote is taken on the law.",
+				"Compared to the government draft, the <a href=\"https://web.archive.org/web/20240412195016/https://dserver.bundestag.de/btd/20/110/2011004.pdf\" class=\"link\">recommendation of the family committee</a> contains only small changes; In the event of a change in civil status, children starting at the age of 5 must agree and the parents of minors must confirm that they have been advised. In addition, the transfer of personal information to security authorities has been removed.",
+				"The government parties' speakers (FDP, SPD, Bündnis 90/Die Grünen) emphasized the importance of this law for fundamental rights and human dignity. The suffering that the TSG has caused is now being put to an end. This meets broad support from women's policy organizations and churches.",
+				"From the camps of the parties CDU/CSU, AfD and the group BSW, fears were loud, the law would be a risk for child and youth protection and could be susceptible to abuse. Some of these speakers believe that trans* would be imagination and a 'hype' that would be strengthened by a lobby and trans* people were only people in disguise and wigs.",
+				"The group Die Linke welcomes the law, but also warns that this can only be the beginning; Advice options must be improved and regulations for financing health measures should be created.",
+				"The decision recommendation of the family committee was accepted with 372 to 251 votes. The <a href=\"https://web.archive.org/web/20240412195124/https://dserver.bundestag.de/btd/20/082/2008203.pdf\" class=\"link\">AfD's request</a> to maintain the TSG and even tighten its regulations was rejected by the parliament.",
+			],
+		],
+		"timeline_lesung_2_3_button" => [
+			"de" => "Aufzeichnung der Debatte",
+			"en" => "Dabate recording (German)",
+		],
+		
+		
+		
+		
+		
+		"timeline_bundesrat_2_date" => [
+			"de" => "17 Mai 2024",
+			"en" => "17 May 2024",
+		],
+		"timeline_bundesrat_2_title" => [
+			"de" => "Beratung im Bundesrat",
+			"en" => "Consultation in the Federal Council",
+		],
+		"timeline_bundesrat_2_text" => [
+			"de" => [
+				"Da es sich beim Selbstbestimmungsgesetz um ein Einspruchsgesetz handelt, bedarf es keiner Zustimmung im Bundesrat. Durch einen Einspruch lässt sich der Gesetzgebungsprozess jedoch verzögern.",
+				"Die Grünenpolitiker*innen Katharina Fegebank, Dr. Benjamin Limbach und Doreen Denstädt sprachen sich für das Gesetz aus und betonten dessen Wichtigkeit für Trans*-Menschen. Die Forderung, den Vermittlungsausschuss anzurufen, fand keine Mehrheit.",
+			],
+			"en" => [
+				"As the Self-Determination Act is a <i>Einspruchsgesetz</i> (\"veto law\"), an approval by the <i>Bundesrat</i> (Federal Council) is not required. A veto however would delay the legislative process.",
+				"The green politicians Katharina Fegebank, Dr. Benjamin Limbach and Doreen Denstädt spoke out for the law and emphasized its importance for trans* people. The request to call the mediation committee did not obtain a majority.",
+			],
+		],
+		"timeline_bundesrat_2_button" => [
+			"de" => "Aufzeichnung TOP 2",
+			"en" => "Recording TOP 2 (German)",
+		],
+		
+		
+		
+		
+		
+		"timeline_bundesgesetzblatt_date" => [
+			"de" => "21 Jun 2024",
+			"en" => "21 Jun 2024",
+		],
+		"timeline_bundesgesetzblatt_title" => [
+			"de" => "Veröffentlichung im Bundesgesetzblatt",
+			"en" => "Publication in the Federal Law Gazette",
+		],
+		"timeline_bundesgesetzblatt_text" => [
+			"de" => [
+				"Nachdem der Gesetzestext vom Bundespräsident unterzeichnet wurde, was als Formsache gilt, wird das Gesetz in seiner finalen Form im Bundesgesetzblatt veröffentlicht.",
+			],
+			"en" => [
+				"After the text of the law has been signed by the <i>Bundespräsident</i> (Federal President), which is considered a formality, the law is published in its final form in the <i>Bundesgesetzblatt</i> (Federal Law Gazette).",
+			],
+		],
+		"timeline_bundesgesetzblatt_button" => [
+			"de" => "Finaler Gesetzestext",
+			"en" => "Final Legal Text (German)",
+		],
+		
+		
+		
+		
+		
+		"timeline_anmeldung_date" => [
+			"de" => "01 Aug 2024",
+			"en" => "01 Aug 2024",
+		],
+		"timeline_anmeldung_title" => [
+			"de" => "Möglichkeit zur Anmeldung beim Standesamt",
+			"en" => "Possibility to register at the registry office",
+		],
+		"timeline_anmeldung_text" => [
+			"de" => [
+				"Da Artikel 1 &sect; 4 bereits Anfang August in Kraft tritt, ist eine Anmeldung für einen Termin beim Standesamt schon 3 Monate vor Inkrafttreten des übrigen Gesetzes möglich. Bei Anmeldung im August kann der Termin für die Personenstandsänderung also direkt im November stattfinden.",
+			],
+			"en" => [
+				"Since Article 1 &sect; 4 comes into force at the beginning of August, you can register for an appointment at the registry office three months before the rest of the law comes into force. If you register in August, the appointment for changing your civil status can take place directly in November.",
+			],
+		],
+		"timeline_anmeldung_button" => [
+			"de" => "",
+			"en" => "",
+		],
+		
+		
+		
+		
+		
+		"timeline_inkrafttreten_date" => [
+			"de" => "01 Nov 2024",
+			"en" => "01 Nov 2024",
+		],
+		"timeline_inkrafttreten_title" => [
+			"de" => "Inkrafttreten des Gesetzes",
+			"en" => "Entry into Force",
+		],
+		"timeline_inkrafttreten_text" => [
+			"de" => [
+				"Nachdem auch der Rest des Gesetzes in Kraft tritt, ist die tatsächliche Änderung des Personenstandes beim Standesamt möglich.",
+			],
+			"en" => [
+				"After the rest of the law comes into force, the actual change of civil status is possible at the registry office.",
+			],
+		],
+		"timeline_inkrafttreten_button" => [
+			"de" => "",
+			"en" => "",
+		],
+	]);
+?>
--- a/post/2024-07-29-sbggjetzt-1-3.png
+++ b/post/2024-07-29-sbggjetzt-1-3.png