diff --git a/com.woltlab.wcf/defaultStyle.tar b/com.woltlab.wcf/defaultStyle.tar
index 268e6e1bc06..401f31bb388 100644
Binary files a/com.woltlab.wcf/defaultStyle.tar and b/com.woltlab.wcf/defaultStyle.tar differ
diff --git a/com.woltlab.wcf/templates/__devtoolsLanguageChooser.tpl b/com.woltlab.wcf/templates/__devtoolsLanguageChooser.tpl
index baa2c105c09..ccd9c1c6112 100644
--- a/com.woltlab.wcf/templates/__devtoolsLanguageChooser.tpl
+++ b/com.woltlab.wcf/templates/__devtoolsLanguageChooser.tpl
@@ -1,5 +1,5 @@
-{* The `system_pageHeader` renders this chooser on the server. *}
-{if ENABLE_DEBUG_MODE && ENABLE_DEVELOPER_TOOLS && !$__wcf->user->isGuest() && $__wcf->getStyleHandler()->getStyle()->usesClassicPageHeader()}
+{* The `system_pageHeader` renders this chooser on the server, the new page footers host it instead. *}
+{if ENABLE_DEBUG_MODE && ENABLE_DEVELOPER_TOOLS && !$__wcf->user->isGuest() && $__wcf->getStyleHandler()->getStyle()->usesClassicPageHeader() && $__wcf->getStyleHandler()->getStyle()->usesClassicPageFooter()}
 	<script data-relocate="true">
 		require(['WoltLabSuite/Core/Api/Devtools/SetLanguage', 'WoltLabSuite/Core/Language/Chooser'], function(SetLanguage, LanguageChooser) {
 			var item = elCreate('li');
diff --git a/com.woltlab.wcf/templates/headIncludeJavaScript.tpl b/com.woltlab.wcf/templates/headIncludeJavaScript.tpl
index 0b53a036949..235ae0bbdc3 100644
--- a/com.woltlab.wcf/templates/headIncludeJavaScript.tpl
+++ b/com.woltlab.wcf/templates/headIncludeJavaScript.tpl
@@ -26,7 +26,16 @@
 
 	{if $__wcf->getStyleHandler()->getColorScheme() === 'system'}
 	{
-		const colorScheme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+		let colorScheme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+		{if $__wcf->user->isGuest()}
+			{* Guests pick the color scheme in the page footer, see `WoltLabSuite/Core/Controller/Style/ColorScheme`. *}
+			try {
+				const value = localStorage.getItem("wsc_colorScheme");
+				if (value === "dark" || value === "light") {
+					colorScheme = value;
+				}
+			} catch {}
+		{/if}
 		document.documentElement.dataset.colorScheme = colorScheme;
 	}
 	{/if}
diff --git a/com.woltlab.wcf/templates/pageHeaderUser.tpl b/com.woltlab.wcf/templates/pageHeaderUser.tpl
index 9f016fda602..0fe382e4bd4 100644
--- a/com.woltlab.wcf/templates/pageHeaderUser.tpl
+++ b/com.woltlab.wcf/templates/pageHeaderUser.tpl
@@ -128,7 +128,8 @@
 				</li>
 			{/if}
 		{else}
-			{if $__wcf->getLanguage()->getLanguages()|count > 1}
+			{* The new page footers host the language switch instead. *}
+			{if $__wcf->getLanguage()->getLanguages()|count > 1 && $__wcf->getStyleHandler()->getStyle()->usesClassicPageFooter()}
 				<li id="pageLanguageContainer">
 					<script data-relocate="true">
 						require(['WoltLabSuite/Core/Language/Chooser'], function(LanguageChooser) {
diff --git a/com.woltlab.wcf/templates/system_pageFooter.tpl b/com.woltlab.wcf/templates/system_pageFooter.tpl
new file mode 100644
index 00000000000..1f93104ea6a
--- /dev/null
+++ b/com.woltlab.wcf/templates/system_pageFooter.tpl
@@ -0,0 +1,154 @@
+{if !$errorField|empty || !$errorType|empty}
+	<!--
+		DEBUG: FORM_VALIDATION_FAILED
+		
+		errorField: {if $errorField|empty}(empty){else}{$errorField|print_r:true}{/if}
+		
+		errorType: {if $errorType|empty}(empty){else}{$errorType|print_r:true}{/if}
+	
+	-->
+	{if ENABLE_DEBUG_MODE}
+		<script>
+			console.debug('FORM_VALIDATION_FAILED');
+			console.debug('errorField:', '{if $errorField|empty}(empty){else}{$errorField|json}{/if}');
+			console.debug('errorType:', '{if $errorType|empty}(empty){else}{$errorType|json}{/if}');
+		</script>
+	{/if}
+{/if}
+
+{capture assign='__pageFooterBoxes'}
+	{if !$boxesFooter|empty}
+		{unsafe:$boxesFooter}
+	{/if}
+
+	{foreach from=$__wcf->getBoxHandler()->getBoxes('footer') item=box}
+		{unsafe:$box->render()}
+	{/foreach}
+{/capture}
+{assign var='__pageFooterBoxes' value=$__pageFooterBoxes|trim}
+
+{capture assign='__pageFooterCopyright'}
+	{event name='footerContents'}
+
+	{if ENABLE_BENCHMARK}
+		{include file='shared_benchmark'}
+	{/if}
+
+	{include file='pageFooterCopyright'}
+{/capture}
+{assign var='__pageFooterCopyright' value=$__pageFooterCopyright|trim}
+
+{capture assign='__pageFooterPreferences'}
+	{if $__wcf->getStyleHandler()->showColorSchemeSelector()}
+		{* The browser keeps the choice of a guest, `ColorSchemeSwitch` checks it. *}
+		{if $__wcf->user->isGuest()}
+			{assign var='__pageFooterColorScheme' value=''}
+		{else}
+			{assign var='__pageFooterColorScheme' value=$__wcf->getStyleHandler()->getColorScheme()}
+		{/if}
+		<fieldset class="pageFooterScheme jsOnly">
+			<legend class="visuallyHidden">{lang}wcf.style.setColorScheme{/lang}</legend>
+			<label class="pageFooterScheme__option" title="{lang}wcf.style.setColorScheme.system{/lang}">
+				<input type="radio" class="pageFooterScheme__input" name="pageFooterColorScheme" value="system"{if $__pageFooterColorScheme === 'system'} checked{/if}>
+				{icon name='circle-half-stroke'}
+				<span class="visuallyHidden">{lang}wcf.style.setColorScheme.system{/lang}</span>
+			</label>
+			<label class="pageFooterScheme__option" title="{lang}wcf.style.setColorScheme.light{/lang}">
+				<input type="radio" class="pageFooterScheme__input" name="pageFooterColorScheme" value="light"{if $__pageFooterColorScheme === 'light'} checked{/if}>
+				{icon name='sun'}
+				<span class="visuallyHidden">{lang}wcf.style.setColorScheme.light{/lang}</span>
+			</label>
+			<label class="pageFooterScheme__option" title="{lang}wcf.style.setColorScheme.dark{/lang}">
+				<input type="radio" class="pageFooterScheme__input" name="pageFooterColorScheme" value="dark"{if $__pageFooterColorScheme === 'dark'} checked{/if}>
+				{icon name='moon'}
+				<span class="visuallyHidden">{lang}wcf.style.setColorScheme.dark{/lang}</span>
+			</label>
+		</fieldset>
+	{/if}
+
+	{if $__wcf->getStyleHandler()->showStyleChanger()}
+		<button type="button" class="pageFooterPreferences__button jsButtonStyleChanger jsOnly">
+			{icon name='palette'}
+			<span>{lang}wcf.style.changeStyle{/lang}</span>
+		</button>
+	{/if}
+
+	{* Members only switch the language through the developer tools. *}
+	{if $__wcf->getLanguage()->getLanguages()|count > 1 && ($__wcf->user->isGuest() || (ENABLE_DEBUG_MODE && ENABLE_DEVELOPER_TOOLS))}
+		<div class="pageFooterLanguage dropdown jsOnly">
+			<button type="button" class="pageFooterPreferences__button dropdownToggle">
+				<img src="{$__wcf->getLanguage()->getIconPath()}" alt="" class="iconFlag">
+				<span><span class="visuallyHidden">{lang}wcf.user.language{/lang} </span>{$__wcf->getLanguage()}</span>
+				{icon name='chevron-up'}
+			</button>
+			<div class="dropdownMenu pageFooterLanguageMenu" data-dropdown-alignment-vertical="top" data-dropdown-alignment-horizontal="right">
+				<ul class="scrollableDropdownMenu">
+					{foreach from=$__wcf->getLanguage()->getLanguages() item=_language}
+						<li{if $_language->languageID === $__wcf->getLanguage()->languageID} class="active"{/if}>
+							<button
+								type="button"
+								data-switch-language="{$_language->languageID}"
+								data-language-code="{$_language->languageCode}"
+								lang="{$_language->languageCode}"
+								{if $_language->languageID === $__wcf->getLanguage()->languageID} aria-current="true"{/if}
+							>
+								<img src="{$_language->getIconPath()}" alt="" class="iconFlag">
+								<span>{$_language}</span>
+							</button>
+						</li>
+					{/foreach}
+				</ul>
+			</div>
+		</div>
+	{/if}
+{/capture}
+{assign var='__pageFooterPreferences' value=$__pageFooterPreferences|trim}
+
+{capture assign='__pageFooterAd'}
+	{if MODULE_WCF_AD && $__disableAds|empty}
+		{unsafe:$__wcf->getAdHandler()->getAds('com.woltlab.wcf.footer.bottom')}
+	{/if}
+{/capture}
+{assign var='__pageFooterAd' value=$__pageFooterAd|trim}
+
+{if $__pageFooterBoxes || $__pageFooterCopyright || $__pageFooterPreferences || $__pageFooterAd}
+	<footer id="pageFooter" class="pageFooter pageFooter--compact">
+		{if $__pageFooterBoxes}
+			<div class="pageFooter__part pageFooter__part--main">
+				<div class="layoutBoundary">
+					<div class="boxContainer">
+						{unsafe:$__pageFooterBoxes}
+					</div>
+				</div>
+			</div>
+		{/if}
+
+		{if $__pageFooterCopyright || $__pageFooterPreferences || $__pageFooterAd}
+			<div class="pageFooter__part pageFooter__part--bottom{if !$__pageFooterCopyright && !$__pageFooterAd} jsOnly{/if}">
+				<div class="layoutBoundary">
+					{if $__pageFooterCopyright || $__pageFooterPreferences}
+						<div class="pageFooter__bottom">
+							{if $__pageFooterCopyright}
+								<div id="pageFooterCopyright" class="pageFooter__copyright">
+									{unsafe:$__pageFooterCopyright}
+								</div>
+							{/if}
+
+							{if $__pageFooterPreferences}
+								<div class="pageFooterPreferences jsOnly">
+									{unsafe:$__pageFooterPreferences}
+								</div>
+							{/if}
+						</div>
+					{/if}
+
+					{if $__pageFooterAd}
+						<div class="pageFooter__ad">
+							{unsafe:$__pageFooterAd}
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/if}
+	</footer>
+{/if}
diff --git a/com.woltlab.wcf/templates/system_pageHeaderUser.tpl b/com.woltlab.wcf/templates/system_pageHeaderUser.tpl
index 932679e6ac9..9da0c6369eb 100644
--- a/com.woltlab.wcf/templates/system_pageHeaderUser.tpl
+++ b/com.woltlab.wcf/templates/system_pageHeaderUser.tpl
@@ -13,8 +13,8 @@
 			>{icon size=32 name='magnifying-glass'} <span>{lang}wcf.global.search{/lang}</span></a>
 		</li>
 		
-		{* Members only switch the language through the developer tools. *}
-		{if $__wcf->getLanguage()->getLanguages()|count > 1 && ($__wcf->user->isGuest() || (ENABLE_DEBUG_MODE && ENABLE_DEVELOPER_TOOLS))}
+		{* Members only switch the language through the developer tools. The new page footers host the switch instead. *}
+		{if $__wcf->getLanguage()->getLanguages()|count > 1 && ($__wcf->user->isGuest() || (ENABLE_DEBUG_MODE && ENABLE_DEVELOPER_TOOLS)) && $__wcf->getStyleHandler()->getStyle()->usesClassicPageFooter()}
 			<li id="pageLanguageContainer" class="dropdown">
 				<button
 					type="button"
diff --git a/defaultStyle/variables.xml b/defaultStyle/variables.xml
index 1b04934cf4e..b5ef577f567 100644
--- a/defaultStyle/variables.xml
+++ b/defaultStyle/variables.xml
@@ -1,4 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <variables xmlns="http://www.woltlab.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.woltlab.com http://www.woltlab.com/XSD/6.0/styleVariables.xsd">
+	<variable name="pageFooterLayout"><![CDATA[compact]]></variable>
 	<variable name="pageHeaderLayout"><![CDATA[logoTop]]></variable>
 </variables>
diff --git a/ts/WoltLabSuite/Core/Acp/Ui/Style/Editor.ts b/ts/WoltLabSuite/Core/Acp/Ui/Style/Editor.ts
index 80e2e64aa89..b54c78cc168 100644
--- a/ts/WoltLabSuite/Core/Acp/Ui/Style/Editor.ts
+++ b/ts/WoltLabSuite/Core/Acp/Ui/Style/Editor.ts
@@ -104,12 +104,12 @@ function handleProtection(styleId: number): void {
 }
 
 /**
- * Mirrors the selected page header layout in the preview.
+ * Mirrors the selected style options in the preview, e.g. `data-page-header-layout`.
  */
-function handlePageHeaderLayout(): void {
-  document.querySelectorAll<HTMLInputElement>('input[name="pageHeaderLayout"]').forEach((input) => {
+function handleStyleOptions(): void {
+  document.querySelectorAll<HTMLInputElement>('.styleOptionList input[type="radio"]').forEach((input) => {
     input.addEventListener("change", () => {
-      _stylePreviewWindow.dataset.pageHeaderLayout = input.value;
+      _stylePreviewWindow.dataset[input.name] = input.value;
     });
   });
 }
@@ -286,7 +286,7 @@ export function setup(options: StyleEditorOptions): void {
   }
 
   initVisualEditor();
-  handlePageHeaderLayout();
+  handleStyleOptions();
 
   UiScreen.on("screen-sm-down", {
     match() {
diff --git a/ts/WoltLabSuite/Core/Api/Users/SetColorScheme.ts b/ts/WoltLabSuite/Core/Api/Users/SetColorScheme.ts
new file mode 100644
index 00000000000..f2c8baacef7
--- /dev/null
+++ b/ts/WoltLabSuite/Core/Api/Users/SetColorScheme.ts
@@ -0,0 +1,21 @@
+/**
+ * Sets the preferred color scheme of the active user.
+ *
+ * @author Alexander Ebert
+ * @copyright 2001-2026 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.3
+ */
+
+import { prepareRequest } from "WoltLabSuite/Core/Ajax/Backend";
+import { fromInfallibleApiRequest } from "../Result";
+import type { ColorSchemePreference } from "../../Controller/Style/ColorScheme";
+
+export function setColorScheme(colorScheme: ColorSchemePreference): Promise<[]> {
+  return fromInfallibleApiRequest(() => {
+    return prepareRequest(`${window.WSC_RPC_API_URL}core/users/color-scheme`)
+      .post({ colorScheme })
+      .disableLoadingIndicator()
+      .fetchAsJson();
+  });
+}
diff --git a/ts/WoltLabSuite/Core/BootstrapFrontend.ts b/ts/WoltLabSuite/Core/BootstrapFrontend.ts
index 23150028229..2a7db907ac0 100644
--- a/ts/WoltLabSuite/Core/BootstrapFrontend.ts
+++ b/ts/WoltLabSuite/Core/BootstrapFrontend.ts
@@ -27,6 +27,8 @@ import { setup as setupLanguageSwitcher } from "./Component/LanguageSwitcher";
 import { setup as setupUserMenuDrawer } from "./Component/UserMenuDrawer";
 import { setup as setupPageHeaderSearch } from "./Component/PageHeaderSearch";
 import { setup as setupPageHeaderShadow } from "./Component/PageHeaderShadow";
+import { setup as setupColorSchemeSwitch } from "./Component/PageFooter/ColorSchemeSwitch";
+import { getStoredColorScheme } from "./Controller/Style/ColorScheme";
 
 interface BootstrapOptions {
   backgroundQueue: {
@@ -89,7 +91,8 @@ export function setup(options: BootstrapOptions): void {
   const hasSystemPageHeader = options.templateVariants.includes("pageHeader");
 
   Bootstrap.setup({
-    dynamicColorScheme: options.dynamicColorScheme,
+    // A color scheme picked by a guest is applied by the inline script in the page head already.
+    dynamicColorScheme: options.dynamicColorScheme && (User.userId !== 0 || getStoredColorScheme() === undefined),
     enableMobileMenu: !hasSystemPageHeader,
     enableSearch: !hasSystemPageHeader,
     pageMenuMainProvider: new UiPageMenuMainFrontend(),
@@ -111,7 +114,6 @@ export function setup(options: BootstrapOptions): void {
   if (hasSystemPageHeader) {
     setupDrawers();
     setupMainMenu();
-    setupLanguageSwitcher();
     setupUserMenuDrawer();
     setupPageHeaderSearch();
     setupPageHeaderShadow();
@@ -119,6 +121,15 @@ export function setup(options: BootstrapOptions): void {
     UiPageHeaderMenu.init();
   }
 
+  const hasSystemPageFooter = options.templateVariants.includes("pageFooter");
+  if (hasSystemPageFooter) {
+    setupColorSchemeSwitch();
+  }
+
+  if (hasSystemPageHeader || hasSystemPageFooter) {
+    setupLanguageSwitcher();
+  }
+
   if (options.styleChanger) {
     void import("./Controller/Style/Changer").then((ControllerStyleChanger) => {
       ControllerStyleChanger.setup();
diff --git a/ts/WoltLabSuite/Core/Component/PageFooter/ColorSchemeSwitch.ts b/ts/WoltLabSuite/Core/Component/PageFooter/ColorSchemeSwitch.ts
new file mode 100644
index 00000000000..89eb1046b87
--- /dev/null
+++ b/ts/WoltLabSuite/Core/Component/PageFooter/ColorSchemeSwitch.ts
@@ -0,0 +1,65 @@
+/**
+ * Switches the color scheme from the page footer. Members store the choice in
+ * their account, guests in the browser.
+ *
+ * @author Alexander Ebert
+ * @copyright 2001-2026 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.3
+ */
+
+import User from "../../User";
+import {
+  ColorSchemePreference,
+  getStoredColorScheme,
+  setColorScheme,
+  storeColorScheme,
+} from "../../Controller/Style/ColorScheme";
+import { setColorScheme as saveColorScheme } from "../../Api/Users/SetColorScheme";
+
+let isSaving = false;
+let pendingColorScheme: ColorSchemePreference | undefined;
+
+// Saves one request at a time and skips intermediate values, so a late response
+// cannot overwrite a newer choice, e.g. while stepping through the radios.
+async function save(colorScheme: ColorSchemePreference): Promise<void> {
+  pendingColorScheme = colorScheme;
+  if (isSaving) {
+    return;
+  }
+
+  isSaving = true;
+  try {
+    while (pendingColorScheme !== undefined) {
+      const next = pendingColorScheme;
+      pendingColorScheme = undefined;
+      await saveColorScheme(next);
+    }
+  } finally {
+    isSaving = false;
+  }
+}
+
+export function setup(): void {
+  const fieldset = document.querySelector<HTMLFieldSetElement>(".pageFooterScheme");
+  if (fieldset === null) {
+    return;
+  }
+
+  // The server does not know the choice of a guest.
+  if (User.userId === 0) {
+    const colorScheme = getStoredColorScheme() ?? "system";
+    fieldset.querySelector<HTMLInputElement>(`input[value="${colorScheme}"]`)!.checked = true;
+  }
+
+  fieldset.addEventListener("change", (event) => {
+    const colorScheme = (event.target as HTMLInputElement).value as ColorSchemePreference;
+    setColorScheme(colorScheme);
+
+    if (User.userId === 0) {
+      storeColorScheme(colorScheme);
+    } else {
+      void save(colorScheme);
+    }
+  });
+}
diff --git a/ts/WoltLabSuite/Core/Controller/Style/ColorScheme.ts b/ts/WoltLabSuite/Core/Controller/Style/ColorScheme.ts
index dd3e37cefa0..910cb435e85 100644
--- a/ts/WoltLabSuite/Core/Controller/Style/ColorScheme.ts
+++ b/ts/WoltLabSuite/Core/Controller/Style/ColorScheme.ts
@@ -1,18 +1,77 @@
 /**
- * Dynamically updates the color scheme to match the system preference.
+ * Applies the preferred color scheme and keeps `system` in sync with the device.
  *
  * @author Alexander Ebert
- * @copyright 2001-2023 WoltLab GmbH
+ * @copyright 2001-2026 WoltLab GmbH
  * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @since 6.0
  */
 
-export function setup(): void {
+export type ColorSchemePreference = "dark" | "light" | "system";
+
+// Must match the inline script in `headIncludeJavaScript.tpl`.
+const STORAGE_KEY = "wsc_colorScheme";
+
+const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+function applyColorScheme(colorScheme: "dark" | "light"): void {
+  document.documentElement.dataset.colorScheme = colorScheme;
+
   const themeColor = document.querySelector<HTMLMetaElement>('meta[name="theme-color"]')!;
   themeColor.content = window.getComputedStyle(document.body).getPropertyValue("--wcfPageThemeColor");
+}
+
+function followDevice(event: MediaQueryListEvent): void {
+  applyColorScheme(event.matches ? "dark" : "light");
+}
+
+/**
+ * Returns the color scheme a guest has picked, members store it in their account instead.
+ *
+ * @since 6.3
+ */
+export function getStoredColorScheme(): ColorSchemePreference | undefined {
+  try {
+    const value = window.localStorage.getItem(STORAGE_KEY);
+    if (value === "dark" || value === "light") {
+      return value;
+    }
+  } catch {
+    // The storage is unavailable, e.g. in private mode.
+  }
 
-  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
-    document.documentElement.dataset.colorScheme = event.matches ? "dark" : "light";
-    themeColor.content = window.getComputedStyle(document.body).getPropertyValue("--wcfPageThemeColor");
-  });
+  return undefined;
+}
+
+/**
+ * @since 6.3
+ */
+export function storeColorScheme(colorScheme: ColorSchemePreference): void {
+  try {
+    if (colorScheme === "system") {
+      window.localStorage.removeItem(STORAGE_KEY);
+    } else {
+      window.localStorage.setItem(STORAGE_KEY, colorScheme);
+    }
+  } catch {
+    // The storage is unavailable, e.g. in private mode.
+  }
+}
+
+/**
+ * @since 6.3
+ */
+export function setColorScheme(colorScheme: ColorSchemePreference): void {
+  mediaQuery.removeEventListener("change", followDevice);
+
+  if (colorScheme === "system") {
+    mediaQuery.addEventListener("change", followDevice);
+    applyColorScheme(mediaQuery.matches ? "dark" : "light");
+  } else {
+    applyColorScheme(colorScheme);
+  }
+}
+
+export function setup(): void {
+  setColorScheme("system");
 }
diff --git a/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts b/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts
index 3a38e7b181b..18baebe1588 100644
--- a/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts
+++ b/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts
@@ -152,20 +152,40 @@ export class PageMenuMain implements PageMenuProvider {
     }
   }
 
-  private buildLanguageMenu(): HTMLElement | null {
+  /**
+   * Returns the elements that switch to a language by their language code, the
+   * new page footers host them instead of the page header.
+   */
+  private getLanguageSwitches(): Map<string, HTMLElement> {
     const dropDownMenu = DropDownSimple.getDropdownMenu("pageLanguageContainer");
-    if (dropDownMenu === undefined) {
+    if (dropDownMenu !== undefined) {
+      return new Map(
+        Array.from(dropDownMenu.children, (listItem: HTMLElement) => [
+          listItem.dataset.languageCode!,
+          listItem.querySelector("a")!,
+        ]),
+      );
+    }
+
+    return new Map(
+      Array.from(document.querySelectorAll<HTMLElement>(".pageFooterLanguageMenu [data-switch-language]"), (button) => [
+        button.dataset.languageCode!,
+        button,
+      ]),
+    );
+  }
+
+  private buildLanguageMenu(): HTMLElement | null {
+    const languageMapping = this.getLanguageSwitches();
+    if (languageMapping.size === 0) {
       return null;
     }
 
     const children: MenuItem[] = [];
-    const languageMapping = new Map<string, HTMLAnchorElement>();
-    Array.from(dropDownMenu.children).forEach((listItem: HTMLElement) => {
-      const identifier = listItem.dataset.languageCode!;
-      const title = listItem.querySelector("span")!.textContent.trim();
-      const icon = listItem.querySelector<HTMLImageElement>("img.iconFlag") || undefined;
-
-      languageMapping.set(identifier, listItem.querySelector("a")!);
+    languageMapping.forEach((element, identifier) => {
+      const title = element.querySelector("span")!.textContent.trim();
+      // The label takes the icon, the original must stay in place.
+      const icon = element.querySelector<HTMLImageElement>("img.iconFlag")?.cloneNode() as HTMLImageElement | undefined;
 
       children.push({
         active: false,
diff --git a/ts/WoltLabSuite/Core/Ui/Screen.ts b/ts/WoltLabSuite/Core/Ui/Screen.ts
index f9ab6d67997..c9f4a7e11a3 100644
--- a/ts/WoltLabSuite/Core/Ui/Screen.ts
+++ b/ts/WoltLabSuite/Core/Ui/Screen.ts
@@ -13,6 +13,7 @@ const _mql = new Map<string, MediaQueryData>();
 let _scrollDisableCounter = 0;
 let _scrollOffsetFrom: "body" | "documentElement";
 let _scrollTop = 0;
+let _hasPageContainerOffset = false;
 let _pageOverlayCounter = 0;
 
 const _mqMap = new Map<string, string>(
@@ -102,7 +103,8 @@ export function scrollDisable(): void {
 
     const pageContainer = document.getElementById("pageContainer")!;
 
-    if (is("screen-md-down")) {
+    _hasPageContainerOffset = is("screen-md-down");
+    if (_hasPageContainerOffset) {
       pageContainer.style.setProperty("position", "relative", "");
       pageContainer.style.setProperty("top", `-${_scrollTop}px`, "");
     }
@@ -123,10 +125,12 @@ export function scrollEnable(): void {
     if (_scrollDisableCounter === 0) {
       document.documentElement.classList.remove("disableScrolling");
 
-      const pageContainer = document.getElementById("pageContainer")!;
-      if (is("screen-md-down")) {
+      // The screen size may have changed since, e.g. when closing an overlay on a media query change.
+      if (_hasPageContainerOffset) {
+        const pageContainer = document.getElementById("pageContainer")!;
         pageContainer.style.removeProperty("position");
         pageContainer.style.removeProperty("top");
+        _hasPageContainerOffset = false;
       }
 
       if (_scrollTop) {
diff --git a/wcfsetup/install/files/acp/style/acpStyleEditor.css b/wcfsetup/install/files/acp/style/acpStyleEditor.css
index 802579c95ac..5f571b070ef 100644
--- a/wcfsetup/install/files/acp/style/acpStyleEditor.css
+++ b/wcfsetup/install/files/acp/style/acpStyleEditor.css
@@ -773,6 +773,92 @@ html[dir="rtl"] #spTable th {
 	text-align: center;
 }
 
+/* ### compact footer ### */
+#spWindow[data-page-footer-layout="compact"] :is(#spFooterBox, #spFooter, #spFooterCopyright),
+#spWindow:not([data-page-footer-layout="compact"]) #spFooterCompact {
+	display: none;
+}
+#spFooterCompact {
+	background-color: var(--wcfContentBackground);
+	color: var(--wcfContentText);
+}
+#spFooterCompact .spFooterCompactBoxes a {
+	color: var(--wcfContentLink);
+}
+#spFooterCompact .spFooterCompactBoxes a:hover {
+	color: var(--wcfContentLinkActive);
+}
+.spFooterCompactBoxes {
+	padding-bottom: 15px;
+}
+.spFooterCompactBoxes > .spBoundary {
+	background-color: var(--wcfContentContainerBackground);
+	border: 1px solid var(--wcfContentBorderInner);
+	border-radius: var(--wcfBorderRadiusContainer);
+	display: flex;
+}
+.spFooterCompactBoxItem {
+	flex: 1 1 0;
+	padding: 15px;
+}
+.spFooterCompactBoxItem + .spFooterCompactBoxItem {
+	border-inline-start: 1px solid var(--wcfContentBorderInner);
+}
+.spFooterCompactBoxHeadline {
+	color: var(--wcfContentHeadlineText);
+	font-size: 1.2rem;
+	font-weight: 300;
+	margin-bottom: 10px;
+}
+.spFooterCompactBand {
+	background-color: var(--wcfFooterBackground);
+	color: var(--wcfFooterText);
+}
+.spFooterCompactBand a {
+	color: var(--wcfFooterText);
+}
+.spFooterCompactBand a:hover,
+.spFooterCompactBottom a:hover {
+	text-decoration: underline;
+}
+.spFooterCompactHeadline {
+	color: var(--wcfFooterHeadlineText);
+	font-weight: 600;
+}
+.spFooterCompactBand .spFooterCompactHeadline a {
+	color: var(--wcfFooterHeadlineText);
+}
+.spFooterCompactBand > .spBoundary {
+	display: flex;
+	gap: 20px;
+	padding: 15px 0;
+}
+.spFooterCompactBottom {
+	background-color: var(--wcfFooterCopyrightBackground);
+	color: var(--wcfFooterCopyrightText);
+	font-size: 12px;
+}
+.spFooterCompactBottom a {
+	color: var(--wcfFooterCopyrightText);
+}
+.spFooterCompactBottom > .spBoundary {
+	align-items: center;
+	display: flex;
+	justify-content: space-between;
+	padding: 10px 0;
+}
+.spFooterCompactControls {
+	display: flex;
+	gap: 6px;
+}
+/* The preview receives no `-rgb` variants, the border is mixed from the color instead. */
+.spFooterCompactControls > span {
+	border: 1px solid color-mix(in srgb, var(--wcfFooterCopyrightText) 22%, transparent);
+	border-radius: 6px;
+	height: 20px;
+	width: 32px;
+}
+
 /* ### content sidebar ### */
 #spContent > .spBoundary {
 	display: flex;
@@ -969,7 +1055,8 @@ html:not(.touch) .spColorBox {
 	display: flex;
 	flex: 0 0 auto;
 }
-#spWindow[data-page-header-layout="classic"] + #spSidebar .spColorScope {
+#spWindow[data-page-header-layout="classic"] + #spSidebar .spColorScope[data-style-option="pageHeaderLayout"],
+#spWindow[data-page-footer-layout="classic"] + #spSidebar .spColorScope[data-style-option="pageFooterLayout"] {
 	display: none;
 }
 .spDescription {
diff --git a/wcfsetup/install/files/acp/templates/__styleOptionPreview_pageFooterLayout.tpl b/wcfsetup/install/files/acp/templates/__styleOptionPreview_pageFooterLayout.tpl
new file mode 100644
index 00000000000..2766a1c0c96
--- /dev/null
+++ b/wcfsetup/install/files/acp/templates/__styleOptionPreview_pageFooterLayout.tpl
@@ -0,0 +1,28 @@
+<svg class="styleOptionPreview" viewBox="0 0 160 64" aria-hidden="true">
+	<rect class="styleOptionPreview__page" x="0" y="0" width="160" height="64"/>
+	<rect class="styleOptionPreview__line" x="12" y="4" width="136" height="4"/>
+	<rect class="styleOptionPreview__line" x="12" y="12" width="120" height="4"/>
+	{if $styleOptionValue === 'classic'}
+		<rect class="styleOptionPreview__facade" x="1" y="22" width="158" height="14"/>
+		<rect class="styleOptionPreview__line" x="12" y="27" width="60" height="4"/>
+		<rect class="styleOptionPreview__line" x="88" y="27" width="60" height="4"/>
+		<rect class="styleOptionPreview__bar" x="1" y="36" width="158" height="27"/>
+		<rect class="styleOptionPreview__item" x="12" y="42" width="14" height="4"/>
+		<rect class="styleOptionPreview__item" x="30" y="42" width="14" height="4"/>
+		<rect class="styleOptionPreview__item" x="48" y="42" width="14" height="4"/>
+		<rect class="styleOptionPreview__bar" x="1" y="51" width="158" height="12"/>
+		<rect class="styleOptionPreview__item" x="66" y="55" width="28" height="4"/>
+	{elseif $styleOptionValue === 'compact'}
+		<rect class="styleOptionPreview__facade" x="12" y="20" width="67" height="11"/>
+		<rect class="styleOptionPreview__facade" x="81" y="20" width="67" height="11"/>
+		<rect class="styleOptionPreview__facade" x="1" y="36" width="158" height="27"/>
+		<rect class="styleOptionPreview__line" x="12" y="42" width="14" height="4"/>
+		<rect class="styleOptionPreview__line" x="30" y="42" width="14" height="4"/>
+		<rect class="styleOptionPreview__line" x="48" y="42" width="14" height="4"/>
+		<rect class="styleOptionPreview__facade" x="1" y="51" width="158" height="12"/>
+		<rect class="styleOptionPreview__line" x="12" y="55" width="28" height="4"/>
+		<rect class="styleOptionPreview__line" x="124" y="55" width="10" height="4"/>
+		<rect class="styleOptionPreview__line" x="138" y="55" width="10" height="4"/>
+	{/if}
+	<rect class="styleOptionPreview__frame" x="0.5" y="0.5" width="159" height="63"/>
+</svg>
diff --git a/wcfsetup/install/files/acp/templates/styleAdd.tpl b/wcfsetup/install/files/acp/templates/styleAdd.tpl
index 8c1da2698cc..dc768ba5b42 100644
--- a/wcfsetup/install/files/acp/templates/styleAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/styleAdd.tpl
@@ -615,7 +615,7 @@
 		<div id="colors" class="tabMenuContent">
 			<div class="section">
 				<div id="spWrapper">
-					<div id="spWindow" data-page-header-layout="{if $styleOptions[pageHeaderLayout][selected] !== null}{$styleOptions[pageHeaderLayout][selected]->toString()}{else}classic{/if}">
+					<div id="spWindow" data-page-header-layout="{if $styleOptions[pageHeaderLayout][selected] !== null}{$styleOptions[pageHeaderLayout][selected]->toString()}{else}classic{/if}" data-page-footer-layout="{if $styleOptions[pageFooterLayout][selected] !== null}{$styleOptions[pageFooterLayout][selected]->toString()}{else}classic{/if}">
 						<div id="spPageHeader">
 							<div id="spHeaderPanel" data-region="wcfHeaderMenu">
 								<div class="spBoundary">
@@ -927,6 +927,37 @@
 								Copyright &copy; 1970-2038 <a>Example Company</a>
 							</div>
 						</div>
+						
+						<div id="spFooterCompact">
+							<div class="spFooterCompactBoxes" data-region="wcfContentContainer">
+								<div class="spBoundary">
+									<div class="spFooterCompactBoxItem">
+										<div class="spFooterCompactBoxHeadline" data-region="wcfContentHeadline">Lorem Ipsum</div>
+										
+										<p>Lorem ipsum dolor sit amet, consetetur <a>sadipscing elitr</a>, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
+									</div>
+									
+									<div class="spFooterCompactBoxItem">
+										<div class="spFooterCompactBoxHeadline">Dolor Sit Amet</div>
+										
+										<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet, <a>sed diam voluptua</a>.</p>
+									</div>
+								</div>
+							</div>
+							
+							<div class="spFooterCompactBand" data-region="wcfFooter">
+								<div class="spBoundary">
+									<span class="spFooterCompactHeadline" data-region="wcfFooterHeadline">Lorem <a>Ipsum</a></span> <a>Dolor Sit Amet</a> <a>Consetetur</a> <a>Sadipscing</a>
+								</div>
+							</div>
+							
+							<div class="spFooterCompactBottom" data-region="wcfFooterCopyright">
+								<div class="spBoundary">
+									<span>Copyright &copy; 1970-2038 <a>Example Company</a></span>
+									<span class="spFooterCompactControls"><span></span><span></span><span></span></span>
+								</div>
+							</div>
+						</div>
 					</div>
 					<div id="spSidebar">
 						<div id="spVariablesWrapper">
@@ -978,8 +1009,8 @@
 															*}{$spColor}{*
 															*}<span class="spVariableInvisible">)</span>{*
 														*}</span>
-														{if $pageHeaderColorScopes[$spColor]|isset}
-															<span class="spColorScope jsTooltip" title="{lang}wcf.acp.style.colors.pageHeaderScope.{$pageHeaderColorScopes[$spColor]}{/lang}">{icon name='circle-info'}</span>
+														{if $colorScopes[$spColor]|isset}
+															<span class="spColorScope jsTooltip" data-style-option="{$colorScopes[$spColor][option]}" title="{$colorScopes[$spColor][phrase]|language}">{icon name='circle-info'}</span>
 														{/if}
 													</div>
 													<span class="spDescription">{$spType}</span>
diff --git a/wcfsetup/install/files/acp/update_com.woltlab.wcf_6.3_styleVariables.php b/wcfsetup/install/files/acp/update_com.woltlab.wcf_6.3_styleVariables.php
index 033edd30479..26aa6fd5756 100644
--- a/wcfsetup/install/files/acp/update_com.woltlab.wcf_6.3_styleVariables.php
+++ b/wcfsetup/install/files/acp/update_com.woltlab.wcf_6.3_styleVariables.php
@@ -1,16 +1,57 @@
 <?php
 
+use wcf\system\database\util\PreparedStatementConditionBuilder;
 use wcf\system\WCF;
 
 $styleVariables = [
+    ['pageFooterLayout', 'compact', null],
     ['pageHeaderLayout', 'logoTop', null],
     ['wcfHeaderMenuLinkBackgroundActive', 'rgba(36, 66, 95, 1)', 'rgba(54, 72, 96, 1)'],
     ['wcfHeaderMenuDropdownBackgroundActive', 'rgba(65, 121, 173, 1)', 'rgba(63, 82, 112, 1)'],
     ['wcfHeaderSearchBoxPlaceholder', 'rgba(218, 218, 218, 1)', 'rgba(207, 207, 207, 1)'],
     ['wcfHeaderSearchBoxPlaceholderActive', 'rgba(218, 218, 218, 1)', 'rgba(207, 207, 207, 1)'],
     ['wcfContentDimmedText', 'rgba(106, 110, 115, 1)', 'rgba(139, 141, 144, 1)'],
+    ['wcfFooterBackground', 'rgba(242, 242, 242, 1)', 'rgba(33, 36, 40, 1)'],
+    ['wcfFooterCopyrightBackground', 'rgba(233, 233, 233, 1)', 'rgba(42, 45, 49, 1)'],
+    ['wcfFooterCopyrightLink', 'rgba(58, 58, 61, 1)', 'rgba(209, 210, 211, 1)'],
+    ['wcfFooterCopyrightLinkActive', 'rgba(22, 81, 124, 1)', 'rgba(64, 179, 228, 1)'],
+    ['wcfFooterCopyrightText', 'rgba(58, 58, 61, 1)', 'rgba(209, 210, 211, 1)'],
+    ['wcfFooterHeadlineLink', 'rgba(58, 58, 61, 1)', 'rgba(209, 210, 211, 1)'],
+    ['wcfFooterHeadlineLinkActive', 'rgba(22, 81, 124, 1)', 'rgba(64, 179, 228, 1)'],
+    ['wcfFooterHeadlineText', 'rgba(58, 58, 61, 1)', 'rgba(209, 210, 211, 1)'],
+    ['wcfFooterLink', 'rgba(38, 113, 166, 1)', 'rgba(29, 155, 209, 1)'],
+    ['wcfFooterLinkActive', 'rgba(22, 81, 124, 1)', 'rgba(64, 179, 228, 1)'],
+    ['wcfFooterText', 'rgba(58, 58, 61, 1)', 'rgba(209, 210, 211, 1)'],
 ];
 
+// Existing styles keep the footer colors of earlier versions, the new defaults
+// only apply to new styles. This must run before the defaults are updated.
+$footerColors = [
+    'wcfFooterBackground',
+    'wcfFooterCopyrightBackground',
+    'wcfFooterCopyrightLink',
+    'wcfFooterCopyrightLinkActive',
+    'wcfFooterCopyrightText',
+    'wcfFooterHeadlineLink',
+    'wcfFooterHeadlineLinkActive',
+    'wcfFooterHeadlineText',
+    'wcfFooterLink',
+    'wcfFooterLinkActive',
+    'wcfFooterText',
+];
+$conditions = new PreparedStatementConditionBuilder();
+$conditions->add('variable.variableName IN (?)', [$footerColors]);
+$sql = "INSERT INTO             wcf1_style_variable_value
+                                (styleID, variableID, variableValue, variableValueDarkMode)
+        SELECT                  style.styleID, variable.variableID, variable.defaultValue, variable.defaultValueDarkMode
+        FROM                    wcf1_style style
+        CROSS JOIN              wcf1_style_variable variable
+        {$conditions}
+        ON DUPLICATE KEY UPDATE variableValue = IFNULL(variableValue, VALUES(variableValue)),
+                                variableValueDarkMode = IFNULL(variableValueDarkMode, VALUES(variableValueDarkMode))";
+$statement = WCF::getDB()->prepare($sql);
+$statement->execute($conditions->getParameters());
+
 $sql = "INSERT INTO             wcf1_style_variable
                                 (variableName, defaultValue, defaultValueDarkMode)
         VALUES                  (?, ?, ?)
@@ -28,8 +69,8 @@
     ]);
 }
 
-// Existing styles keep the classic page header, only an explicit value switches
-// them to the new one. `IFNULL()` preserves values that are already set.
+// Existing styles keep the classic page header and footer, only an explicit value
+// switches them to the new one. `IFNULL()` preserves values that are already set.
 $sql = "INSERT INTO             wcf1_style_variable_value
                                 (styleID, variableID, variableValue)
         SELECT                  style.styleID, variable.variableID, ?
@@ -38,7 +79,9 @@
         WHERE                   variable.variableName = ?
         ON DUPLICATE KEY UPDATE variableValue = IFNULL(variableValue, VALUES(variableValue))";
 $statement = WCF::getDB()->prepare($sql);
-$statement->execute([
-    'classic',
-    'pageHeaderLayout',
-]);
+foreach (['pageFooterLayout', 'pageHeaderLayout'] as $variableName) {
+    $statement->execute([
+        'classic',
+        $variableName,
+    ]);
+}
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Style/Editor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Style/Editor.js
index a32924d0270..ef89d12ef64 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Style/Editor.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Style/Editor.js
@@ -94,12 +94,12 @@ define(["require", "exports", "tslib", "../../../Ajax", "../../../Core", "../../
         });
     }
     /**
-     * Mirrors the selected page header layout in the preview.
+     * Mirrors the selected style options in the preview, e.g. `data-page-header-layout`.
      */
-    function handlePageHeaderLayout() {
-        document.querySelectorAll('input[name="pageHeaderLayout"]').forEach((input) => {
+    function handleStyleOptions() {
+        document.querySelectorAll('.styleOptionList input[type="radio"]').forEach((input) => {
             input.addEventListener("change", () => {
-                _stylePreviewWindow.dataset.pageHeaderLayout = input.value;
+                _stylePreviewWindow.dataset[input.name] = input.value;
             });
         });
     }
@@ -246,7 +246,7 @@ define(["require", "exports", "tslib", "../../../Ajax", "../../../Core", "../../
             handleProtection(options.styleId);
         }
         initVisualEditor();
-        handlePageHeaderLayout();
+        handleStyleOptions();
         UiScreen.on("screen-sm-down", {
             match() {
                 hideVisualEditor();
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Api/Users/SetColorScheme.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Api/Users/SetColorScheme.js
new file mode 100644
index 00000000000..c2288cf2ae5
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Api/Users/SetColorScheme.js
@@ -0,0 +1,21 @@
+/**
+ * Sets the preferred color scheme of the active user.
+ *
+ * @author Alexander Ebert
+ * @copyright 2001-2026 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.3
+ */
+define(["require", "exports", "WoltLabSuite/Core/Ajax/Backend", "../Result"], function (require, exports, Backend_1, Result_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.setColorScheme = setColorScheme;
+    function setColorScheme(colorScheme) {
+        return (0, Result_1.fromInfallibleApiRequest)(() => {
+            return (0, Backend_1.prepareRequest)(`${window.WSC_RPC_API_URL}core/users/color-scheme`)
+                .post({ colorScheme })
+                .disableLoadingIndicator()
+                .fetchAsJson();
+        });
+    }
+});
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js b/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js
index bef1e559184..bd54325b1c0 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/BootstrapFrontend.js
@@ -5,7 +5,7 @@
  * @copyright  2001-2019 WoltLab GmbH
  * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  */
-define(["require", "exports", "tslib", "./BackgroundQueue", "./Bootstrap", "./Ui/User/Ignore", "./Ui/Page/Header/Menu", "./Ui/Message/UserConsent", "./Ui/Message/Share/Dialog", "./Ui/Message/Share/Providers", "./Ui/Feed/Dialog", "./User", "./Ui/Page/Menu/Main/Frontend", "./LazyLoader", "./Ajax/Backend", "./Notification/ServiceWorker", "./Api/Articles/GetArticlePopover", "./Api/Users/GetUserPopover", "./Component/Drawer", "./Component/MainMenu", "./Component/LanguageSwitcher", "./Component/UserMenuDrawer", "./Component/PageHeaderSearch", "./Component/PageHeaderShadow"], function (require, exports, tslib_1, BackgroundQueue, Bootstrap, UiUserIgnore, UiPageHeaderMenu, UiMessageUserConsent, UiMessageShareDialog, Providers_1, UiFeedDialog, User_1, Frontend_1, LazyLoader_1, Backend_1, ServiceWorker_1, GetArticlePopover_1, GetUserPopover_1, Drawer_1, MainMenu_1, LanguageSwitcher_1, UserMenuDrawer_1, PageHeaderSearch_1, PageHeaderShadow_1) {
+define(["require", "exports", "tslib", "./BackgroundQueue", "./Bootstrap", "./Ui/User/Ignore", "./Ui/Page/Header/Menu", "./Ui/Message/UserConsent", "./Ui/Message/Share/Dialog", "./Ui/Message/Share/Providers", "./Ui/Feed/Dialog", "./User", "./Ui/Page/Menu/Main/Frontend", "./LazyLoader", "./Ajax/Backend", "./Notification/ServiceWorker", "./Api/Articles/GetArticlePopover", "./Api/Users/GetUserPopover", "./Component/Drawer", "./Component/MainMenu", "./Component/LanguageSwitcher", "./Component/UserMenuDrawer", "./Component/PageHeaderSearch", "./Component/PageHeaderShadow", "./Component/PageFooter/ColorSchemeSwitch", "./Controller/Style/ColorScheme"], function (require, exports, tslib_1, BackgroundQueue, Bootstrap, UiUserIgnore, UiPageHeaderMenu, UiMessageUserConsent, UiMessageShareDialog, Providers_1, UiFeedDialog, User_1, Frontend_1, LazyLoader_1, Backend_1, ServiceWorker_1, GetArticlePopover_1, GetUserPopover_1, Drawer_1, MainMenu_1, LanguageSwitcher_1, UserMenuDrawer_1, PageHeaderSearch_1, PageHeaderShadow_1, ColorSchemeSwitch_1, ColorScheme_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.setup = setup;
@@ -52,7 +52,8 @@ define(["require", "exports", "tslib", "./BackgroundQueue", "./Bootstrap", "./Ui
         // The `system_pageHeader` renders the mobile menus on the server.
         const hasSystemPageHeader = options.templateVariants.includes("pageHeader");
         Bootstrap.setup({
-            dynamicColorScheme: options.dynamicColorScheme,
+            // A color scheme picked by a guest is applied by the inline script in the page head already.
+            dynamicColorScheme: options.dynamicColorScheme && (User_1.default.userId !== 0 || (0, ColorScheme_1.getStoredColorScheme)() === undefined),
             enableMobileMenu: !hasSystemPageHeader,
             enableSearch: !hasSystemPageHeader,
             pageMenuMainProvider: new Frontend_1.default(),
@@ -72,7 +73,6 @@ define(["require", "exports", "tslib", "./BackgroundQueue", "./Bootstrap", "./Ui
         if (hasSystemPageHeader) {
             (0, Drawer_1.setup)();
             (0, MainMenu_1.setup)();
-            (0, LanguageSwitcher_1.setup)();
             (0, UserMenuDrawer_1.setup)();
             (0, PageHeaderSearch_1.setup)();
             (0, PageHeaderShadow_1.setup)();
@@ -80,6 +80,13 @@ define(["require", "exports", "tslib", "./BackgroundQueue", "./Bootstrap", "./Ui
         else {
             UiPageHeaderMenu.init();
         }
+        const hasSystemPageFooter = options.templateVariants.includes("pageFooter");
+        if (hasSystemPageFooter) {
+            (0, ColorSchemeSwitch_1.setup)();
+        }
+        if (hasSystemPageHeader || hasSystemPageFooter) {
+            (0, LanguageSwitcher_1.setup)();
+        }
         if (options.styleChanger) {
             void new Promise((resolve_5, reject_5) => { require(["./Controller/Style/Changer"], resolve_5, reject_5); }).then(tslib_1.__importStar).then((ControllerStyleChanger) => {
                 ControllerStyleChanger.setup();
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/PageFooter/ColorSchemeSwitch.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/PageFooter/ColorSchemeSwitch.js
new file mode 100644
index 00000000000..ddf4f5fff8b
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/PageFooter/ColorSchemeSwitch.js
@@ -0,0 +1,57 @@
+/**
+ * Switches the color scheme from the page footer. Members store the choice in
+ * their account, guests in the browser.
+ *
+ * @author Alexander Ebert
+ * @copyright 2001-2026 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.3
+ */
+define(["require", "exports", "tslib", "../../User", "../../Controller/Style/ColorScheme", "../../Api/Users/SetColorScheme"], function (require, exports, tslib_1, User_1, ColorScheme_1, SetColorScheme_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.setup = setup;
+    User_1 = tslib_1.__importDefault(User_1);
+    let isSaving = false;
+    let pendingColorScheme;
+    // Saves one request at a time and skips intermediate values, so a late response
+    // cannot overwrite a newer choice, e.g. while stepping through the radios.
+    async function save(colorScheme) {
+        pendingColorScheme = colorScheme;
+        if (isSaving) {
+            return;
+        }
+        isSaving = true;
+        try {
+            while (pendingColorScheme !== undefined) {
+                const next = pendingColorScheme;
+                pendingColorScheme = undefined;
+                await (0, SetColorScheme_1.setColorScheme)(next);
+            }
+        }
+        finally {
+            isSaving = false;
+        }
+    }
+    function setup() {
+        const fieldset = document.querySelector(".pageFooterScheme");
+        if (fieldset === null) {
+            return;
+        }
+        // The server does not know the choice of a guest.
+        if (User_1.default.userId === 0) {
+            const colorScheme = (0, ColorScheme_1.getStoredColorScheme)() ?? "system";
+            fieldset.querySelector(`input[value="${colorScheme}"]`).checked = true;
+        }
+        fieldset.addEventListener("change", (event) => {
+            const colorScheme = event.target.value;
+            (0, ColorScheme_1.setColorScheme)(colorScheme);
+            if (User_1.default.userId === 0) {
+                (0, ColorScheme_1.storeColorScheme)(colorScheme);
+            }
+            else {
+                void save(colorScheme);
+            }
+        });
+    }
+});
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Style/ColorScheme.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Style/ColorScheme.js
index 60acc80781c..57ef87df528 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Style/ColorScheme.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Style/ColorScheme.js
@@ -1,21 +1,76 @@
 /**
- * Dynamically updates the color scheme to match the system preference.
+ * Applies the preferred color scheme and keeps `system` in sync with the device.
  *
  * @author Alexander Ebert
- * @copyright 2001-2023 WoltLab GmbH
+ * @copyright 2001-2026 WoltLab GmbH
  * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @since 6.0
  */
 define(["require", "exports"], function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getStoredColorScheme = getStoredColorScheme;
+    exports.storeColorScheme = storeColorScheme;
+    exports.setColorScheme = setColorScheme;
     exports.setup = setup;
-    function setup() {
+    // Must match the inline script in `headIncludeJavaScript.tpl`.
+    const STORAGE_KEY = "wsc_colorScheme";
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    function applyColorScheme(colorScheme) {
+        document.documentElement.dataset.colorScheme = colorScheme;
         const themeColor = document.querySelector('meta[name="theme-color"]');
         themeColor.content = window.getComputedStyle(document.body).getPropertyValue("--wcfPageThemeColor");
-        window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
-            document.documentElement.dataset.colorScheme = event.matches ? "dark" : "light";
-            themeColor.content = window.getComputedStyle(document.body).getPropertyValue("--wcfPageThemeColor");
-        });
+    }
+    function followDevice(event) {
+        applyColorScheme(event.matches ? "dark" : "light");
+    }
+    /**
+     * Returns the color scheme a guest has picked, members store it in their account instead.
+     *
+     * @since 6.3
+     */
+    function getStoredColorScheme() {
+        try {
+            const value = window.localStorage.getItem(STORAGE_KEY);
+            if (value === "dark" || value === "light") {
+                return value;
+            }
+        }
+        catch {
+            // The storage is unavailable, e.g. in private mode.
+        }
+        return undefined;
+    }
+    /**
+     * @since 6.3
+     */
+    function storeColorScheme(colorScheme) {
+        try {
+            if (colorScheme === "system") {
+                window.localStorage.removeItem(STORAGE_KEY);
+            }
+            else {
+                window.localStorage.setItem(STORAGE_KEY, colorScheme);
+            }
+        }
+        catch {
+            // The storage is unavailable, e.g. in private mode.
+        }
+    }
+    /**
+     * @since 6.3
+     */
+    function setColorScheme(colorScheme) {
+        mediaQuery.removeEventListener("change", followDevice);
+        if (colorScheme === "system") {
+            mediaQuery.addEventListener("change", followDevice);
+            applyColorScheme(mediaQuery.matches ? "dark" : "light");
+        }
+        else {
+            applyColorScheme(colorScheme);
+        }
+    }
+    function setup() {
+        setColorScheme("system");
     }
 });
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js
index 58170a831fa..ee9d6ed8d80 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js
@@ -118,18 +118,33 @@ define(["require", "exports", "tslib", "./Container", "WoltLabSuite/Core/Languag
                 }
             }
         }
-        buildLanguageMenu() {
+        /**
+         * Returns the elements that switch to a language by their language code, the
+         * new page footers host them instead of the page header.
+         */
+        getLanguageSwitches() {
             const dropDownMenu = DropDownSimple.getDropdownMenu("pageLanguageContainer");
-            if (dropDownMenu === undefined) {
+            if (dropDownMenu !== undefined) {
+                return new Map(Array.from(dropDownMenu.children, (listItem) => [
+                    listItem.dataset.languageCode,
+                    listItem.querySelector("a"),
+                ]));
+            }
+            return new Map(Array.from(document.querySelectorAll(".pageFooterLanguageMenu [data-switch-language]"), (button) => [
+                button.dataset.languageCode,
+                button,
+            ]));
+        }
+        buildLanguageMenu() {
+            const languageMapping = this.getLanguageSwitches();
+            if (languageMapping.size === 0) {
                 return null;
             }
             const children = [];
-            const languageMapping = new Map();
-            Array.from(dropDownMenu.children).forEach((listItem) => {
-                const identifier = listItem.dataset.languageCode;
-                const title = listItem.querySelector("span").textContent.trim();
-                const icon = listItem.querySelector("img.iconFlag") || undefined;
-                languageMapping.set(identifier, listItem.querySelector("a"));
+            languageMapping.forEach((element, identifier) => {
+                const title = element.querySelector("span").textContent.trim();
+                // The label takes the icon, the original must stay in place.
+                const icon = element.querySelector("img.iconFlag")?.cloneNode();
                 children.push({
                     active: false,
                     children: [],
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Screen.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Screen.js
index 91288105823..36e3e9b5f7a 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Screen.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Screen.js
@@ -22,6 +22,7 @@ define(["require", "exports", "tslib", "../Core"], function (require, exports, t
     let _scrollDisableCounter = 0;
     let _scrollOffsetFrom;
     let _scrollTop = 0;
+    let _hasPageContainerOffset = false;
     let _pageOverlayCounter = 0;
     const _mqMap = new Map(Object.entries({
         "screen-xs": "(max-width: 544px)" /* smartphone */,
@@ -96,7 +97,8 @@ define(["require", "exports", "tslib", "../Core"], function (require, exports, t
                 _scrollOffsetFrom = "documentElement";
             }
             const pageContainer = document.getElementById("pageContainer");
-            if (is("screen-md-down")) {
+            _hasPageContainerOffset = is("screen-md-down");
+            if (_hasPageContainerOffset) {
                 pageContainer.style.setProperty("position", "relative", "");
                 pageContainer.style.setProperty("top", `-${_scrollTop}px`, "");
             }
@@ -112,10 +114,12 @@ define(["require", "exports", "tslib", "../Core"], function (require, exports, t
             _scrollDisableCounter--;
             if (_scrollDisableCounter === 0) {
                 document.documentElement.classList.remove("disableScrolling");
-                const pageContainer = document.getElementById("pageContainer");
-                if (is("screen-md-down")) {
+                // The screen size may have changed since, e.g. when closing an overlay on a media query change.
+                if (_hasPageContainerOffset) {
+                    const pageContainer = document.getElementById("pageContainer");
                     pageContainer.style.removeProperty("position");
                     pageContainer.style.removeProperty("top");
+                    _hasPageContainerOffset = false;
                 }
                 if (_scrollTop) {
                     document[_scrollOffsetFrom].scrollTop = ~~_scrollTop;
diff --git a/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php b/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php
index a9b34c72396..4937423e280 100644
--- a/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php
+++ b/wcfsetup/install/files/lib/acp/form/StyleAddForm.class.php
@@ -100,12 +100,13 @@ class StyleAddForm extends AbstractForm
     public $colors = [];
 
     /**
-     * Color variables that the new page header layouts use only partially: `classic` for colors
-     * used by the classic page header alone, `smallScreens` for colors limited to small screens.
-     * @var array<string, 'classic'|'smallScreens'>
+     * Color variables that the new layouts of a style option use only partially, with the
+     * option they depend on and the phrase that describes their remaining use. The note is
+     * hidden while the option uses its classic layout.
+     * @var array<string, array{option: string, phrase: string}>
      * @since 6.3
      */
-    public array $pageHeaderColorScopes = [];
+    public array $colorScopes = [];
 
     /**
      * copyright message
@@ -818,18 +819,31 @@ protected function setVariables()
             'wcfFooterCopyright' => ['background', 'text', 'link', 'linkActive'],
         ];
 
-        $this->pageHeaderColorScopes = [
-            'wcfHeaderMenuLinkBackground' => 'classic',
-            'wcfHeaderMenuDropdownBackground' => 'classic',
-            'wcfHeaderMenuDropdownBorder' => 'classic',
-            'wcfHeaderMenuDropdownLink' => 'classic',
-            'wcfHeaderSearchBoxBackground' => 'classic',
-            'wcfHeaderSearchBoxText' => 'classic',
-            'wcfHeaderSearchBoxPlaceholder' => 'classic',
-            'wcfNavigationBackground' => 'classic',
-            'wcfNavigationText' => 'smallScreens',
-            'wcfNavigationLink' => 'smallScreens',
-            'wcfNavigationLinkActive' => 'smallScreens',
+        $this->colorScopes = [
+            'wcfHeaderMenuLinkBackground' => ['option' => 'pageHeaderLayout', 'phrase' => 'wcf.acp.style.colors.pageHeaderScope.classic'],
+            'wcfHeaderMenuDropdownBackground' => ['option' => 'pageHeaderLayout', 'phrase' => 'wcf.acp.style.colors.pageHeaderScope.classic'],
+            'wcfHeaderMenuDropdownBorder' => ['option' => 'pageHeaderLayout', 'phrase' => 'wcf.acp.style.colors.pageHeaderScope.classic'],
+            'wcfHeaderMenuDropdownLink' => ['option' => 'pageHeaderLayout', 'phrase' => 'wcf.acp.style.colors.pageHeaderScope.classic'],
+            'wcfHeaderSearchBoxBackground' => ['option' => 'pageHeaderLayout', 'phrase' => 'wcf.acp.style.colors.pageHeaderScope.classic'],
+            'wcfHeaderSearchBoxText' => ['option' => 'pageHeaderLayout', 'phrase' => 'wcf.acp.style.colors.pageHeaderScope.classic'],
+            'wcfHeaderSearchBoxPlaceholder' => ['option' => 'pageHeaderLayout', 'phrase' => 'wcf.acp.style.colors.pageHeaderScope.classic'],
+            'wcfNavigationBackground' => ['option' => 'pageHeaderLayout', 'phrase' => 'wcf.acp.style.colors.pageHeaderScope.classic'],
+            'wcfNavigationText' => ['option' => 'pageHeaderLayout', 'phrase' => 'wcf.acp.style.colors.pageHeaderScope.smallScreens'],
+            'wcfNavigationLink' => ['option' => 'pageHeaderLayout', 'phrase' => 'wcf.acp.style.colors.pageHeaderScope.smallScreens'],
+            'wcfNavigationLinkActive' => ['option' => 'pageHeaderLayout', 'phrase' => 'wcf.acp.style.colors.pageHeaderScope.smallScreens'],
+            'wcfFooterBoxBackground' => ['option' => 'pageFooterLayout', 'phrase' => 'wcf.acp.style.colors.pageFooterScope.headerBoxes'],
+            'wcfFooterBoxText' => ['option' => 'pageFooterLayout', 'phrase' => 'wcf.acp.style.colors.pageFooterScope.headerBoxes'],
+            'wcfFooterBoxLink' => ['option' => 'pageFooterLayout', 'phrase' => 'wcf.acp.style.colors.pageFooterScope.headerBoxes'],
+            'wcfFooterBoxLinkActive' => ['option' => 'pageFooterLayout', 'phrase' => 'wcf.acp.style.colors.pageFooterScope.headerBoxes'],
+            'wcfFooterBoxHeadlineText' => ['option' => 'pageFooterLayout', 'phrase' => 'wcf.acp.style.colors.pageFooterScope.classic'],
+            'wcfFooterBoxHeadlineLink' => ['option' => 'pageFooterLayout', 'phrase' => 'wcf.acp.style.colors.pageFooterScope.classic'],
+            'wcfFooterBoxHeadlineLinkActive' => ['option' => 'pageFooterLayout', 'phrase' => 'wcf.acp.style.colors.pageFooterScope.classic'],
+            'wcfFooterLink' => ['option' => 'pageFooterLayout', 'phrase' => 'wcf.acp.style.colors.pageFooterScope.emails'],
+            'wcfFooterLinkActive' => ['option' => 'pageFooterLayout', 'phrase' => 'wcf.acp.style.colors.pageFooterScope.classic'],
+            'wcfFooterHeadlineLink' => ['option' => 'pageFooterLayout', 'phrase' => 'wcf.acp.style.colors.pageFooterScope.classic'],
+            'wcfFooterHeadlineLinkActive' => ['option' => 'pageFooterLayout', 'phrase' => 'wcf.acp.style.colors.pageFooterScope.classic'],
+            'wcfFooterCopyrightLink' => ['option' => 'pageFooterLayout', 'phrase' => 'wcf.acp.style.colors.pageFooterScope.classic'],
+            'wcfFooterCopyrightLinkActive' => ['option' => 'pageFooterLayout', 'phrase' => 'wcf.acp.style.colors.pageFooterScope.classic'],
         ];
 
         // set global variables
@@ -991,7 +1005,7 @@ public function assignVariables()
             'isTainted' => $this->isTainted,
             'license' => $this->license,
             'packageName' => $this->packageName,
-            'pageHeaderColorScopes' => $this->pageHeaderColorScopes,
+            'colorScopes' => $this->colorScopes,
             'styleDate' => $this->styleDate,
             'styleDescription' => $this->styleDescription,
             'styleName' => $this->styleName,
diff --git a/wcfsetup/install/files/lib/data/style/Style.class.php b/wcfsetup/install/files/lib/data/style/Style.class.php
index cf8c56ebcf9..bca3526e7f1 100644
--- a/wcfsetup/install/files/lib/data/style/Style.class.php
+++ b/wcfsetup/install/files/lib/data/style/Style.class.php
@@ -5,6 +5,7 @@
 use wcf\data\DatabaseObject;
 use wcf\data\ITitledObject;
 use wcf\system\style\option\IStyleOption;
+use wcf\system\style\option\PageFooterLayout;
 use wcf\system\style\option\PageHeaderLayout;
 use wcf\system\style\StyleCompiler;
 use wcf\system\WCF;
@@ -94,6 +95,7 @@ class Style extends DatabaseObject implements ITitledObject, \Stringable
      */
     private const OPTIONS = [
         PageHeaderLayout::class,
+        PageFooterLayout::class,
     ];
 
     /**
@@ -226,6 +228,20 @@ public function usesClassicPageHeader(): bool
         return PageHeaderLayout::fromString($variables[PageHeaderLayout::getVariableName()]) === PageHeaderLayout::Classic;
     }
 
+    /**
+     * Returns true if this style renders the classic page footer. Templates outside
+     * the footer, such as the language controls of both headers, use this to adapt
+     * their markup without relying on the template variants.
+     *
+     * @since 6.3
+     */
+    public function usesClassicPageFooter(): bool
+    {
+        $variables = $this->getVariables();
+
+        return PageFooterLayout::fromString($variables[PageFooterLayout::getVariableName()]) === PageFooterLayout::Classic;
+    }
+
     /**
      * Returns the per-style options.
      *
diff --git a/wcfsetup/install/files/lib/system/endpoint/controller/core/users/SetColorScheme.class.php b/wcfsetup/install/files/lib/system/endpoint/controller/core/users/SetColorScheme.class.php
new file mode 100644
index 00000000000..020569a1d91
--- /dev/null
+++ b/wcfsetup/install/files/lib/system/endpoint/controller/core/users/SetColorScheme.class.php
@@ -0,0 +1,48 @@
+<?php
+
+namespace wcf\system\endpoint\controller\core\users;
+
+use Laminas\Diactoros\Response\JsonResponse;
+use Psr\Http\Message\ResponseInterface;
+use Psr\Http\Message\ServerRequestInterface;
+use wcf\http\Helper;
+use wcf\system\endpoint\IController;
+use wcf\system\endpoint\PostRequest;
+use wcf\system\exception\PermissionDeniedException;
+use wcf\system\WCF;
+
+/**
+ * Sets the preferred color scheme of the active user.
+ *
+ * @author      Alexander Ebert
+ * @copyright   2001-2026 WoltLab GmbH
+ * @license     GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since       6.3
+ */
+#[PostRequest('/core/users/color-scheme')]
+final class SetColorScheme implements IController
+{
+    #[\Override]
+    public function __invoke(ServerRequestInterface $request, array $variables): ResponseInterface
+    {
+        // Guests keep their choice in the browser.
+        if (WCF::getUser()->isGuest()) {
+            throw new PermissionDeniedException();
+        }
+
+        $parameters = Helper::mapApiParameters($request, SetColorSchemeParameters::class);
+
+        new \wcf\command\user\SetColorScheme(WCF::getUser(), $parameters->colorScheme)();
+
+        return new JsonResponse([]);
+    }
+}
+
+/** @internal */
+final class SetColorSchemeParameters
+{
+    public function __construct(
+        /** @var 'dark'|'light'|'system' */
+        public readonly string $colorScheme,
+    ) {}
+}
diff --git a/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php b/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php
index bcace2b3b0c..ed7ad93083c 100644
--- a/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php
+++ b/wcfsetup/install/files/lib/system/style/StyleCompiler.class.php
@@ -15,6 +15,7 @@
 use wcf\system\exception\SystemException;
 use wcf\system\SingletonFactory;
 use wcf\system\style\option\IStyleOption;
+use wcf\system\style\option\PageFooterLayout;
 use wcf\system\style\option\PageHeaderLayout;
 use wcf\command\style\CreateManifest;
 use wcf\system\WCF;
@@ -427,7 +428,10 @@ private function extractPreloadRequests(string $css): iterable
      */
     public function compileACP(): void
     {
-        $files = $this->getCoreFiles([PageHeaderLayout::Classic->getStylesheet()]);
+        $files = $this->getCoreFiles([
+            PageHeaderLayout::Classic->getStylesheet(),
+            PageFooterLayout::Classic->getStylesheet(),
+        ]);
 
         // ACP uses a slightly different layout
         $files[] = \WCF_DIR . 'acp/style/layout.scss';
diff --git a/wcfsetup/install/files/lib/system/style/option/PageFooterLayout.class.php b/wcfsetup/install/files/lib/system/style/option/PageFooterLayout.class.php
new file mode 100644
index 00000000000..796139c9d6e
--- /dev/null
+++ b/wcfsetup/install/files/lib/system/style/option/PageFooterLayout.class.php
@@ -0,0 +1,88 @@
+<?php
+
+namespace wcf\system\style\option;
+
+/**
+ * Layout of the page footer.
+ *
+ * @author Alexander Ebert
+ * @copyright 2001-2026 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.3
+ */
+enum PageFooterLayout implements IStyleOption
+{
+    case Compact;
+    case Classic;
+
+    #[\Override]
+    public static function getVariableName(): string
+    {
+        return 'pageFooterLayout';
+    }
+
+    #[\Override]
+    public static function getFallback(): static
+    {
+        return self::Classic;
+    }
+
+    #[\Override]
+    public static function fromString(string $value): static
+    {
+        $variant = self::tryFromString($value);
+        if ($variant === null) {
+            throw new \ValueError("Unknown value '{$value}' for '" . self::getVariableName() . "'.");
+        }
+
+        return $variant;
+    }
+
+    #[\Override]
+    public static function tryFromString(string $value): ?static
+    {
+        foreach (self::cases() as $case) {
+            if ($case->toString() === $value) {
+                return $case;
+            }
+        }
+
+        return null;
+    }
+
+    #[\Override]
+    public function toString(): string
+    {
+        return match ($this) {
+            self::Classic => 'classic',
+            self::Compact => 'compact',
+        };
+    }
+
+    #[\Override]
+    public function isDeprecated(): bool
+    {
+        return match ($this) {
+            self::Classic => true,
+            self::Compact => false,
+        };
+    }
+
+    #[\Override]
+    public function getTemplateVariant(): ?string
+    {
+        return match ($this) {
+            self::Classic => null,
+            self::Compact => 'pageFooter',
+        };
+    }
+
+    #[\Override]
+    public function getStylesheet(): string
+    {
+        return match ($this) {
+            self::Classic => 'layout/pageFooter/classic.scss',
+            self::Compact => 'layout/pageFooter/compact.scss',
+        };
+    }
+}
diff --git a/wcfsetup/install/files/lib/util/StyleUtil.class.php b/wcfsetup/install/files/lib/util/StyleUtil.class.php
index f876bc65e63..4aed4b0711f 100644
--- a/wcfsetup/install/files/lib/util/StyleUtil.class.php
+++ b/wcfsetup/install/files/lib/util/StyleUtil.class.php
@@ -11,6 +11,20 @@
  */
 final class StyleUtil
 {
+    /**
+     * Matches one value of a shorthand. Whitespace inside a function belongs to the value,
+     * splitting `calc(1px * -1)` at it would break the declaration. Functions can be nested
+     * once, e.g. `max(12px, env(foo))`. The quantifiers are possessive, repeating per
+     * character exhausts the PCRE JIT stack on long values.
+     */
+    private const RTL_VALUE = '((?:[^\s;\}()]++|\((?:[^;\}()]++|\([^;\}()]*+\))*+\))++)';
+
+    /**
+     * Matches four values that make up the complete declaration.
+     */
+    private const RTL_FOUR_VALUES = self::RTL_VALUE . '\s+' . self::RTL_VALUE . '\s+' . self::RTL_VALUE . '\s+'
+        . self::RTL_VALUE . '(?=\s*(?:!important\s*)?[;\}])';
+
     /**
      * Converts css code from LTR to RTL.
      */
@@ -36,7 +50,7 @@ public static function convertCSSToRTL(string $contents): string
 
         // border-width
         $contents = \preg_replace(
-            '/border-width:\s*([^\s;\}]+)\s+([^\s;\}]+)\s+([^\s;\}]+)\s+([^\s;\}]+)/',
+            '/border-width:\s*' . self::RTL_FOUR_VALUES . '/',
             'border-width:\\1 \\4 \\3 \\2',
             $contents
         );
@@ -48,7 +62,7 @@ public static function convertCSSToRTL(string $contents): string
 
         // border-style
         $contents = \preg_replace(
-            '/border-style:\s*([^\s;\}]+)\s+([^\s;\}]+)\s+([^\s;\}]+)\s+([^\s;\}]+)/',
+            '/border-style:\s*' . self::RTL_FOUR_VALUES . '/',
             'border-style:\\1 \\4 \\3 \\2',
             $contents
         );
@@ -84,14 +98,14 @@ static function ($matches) {
 
         // margin
         $contents = \preg_replace(
-            '/margin:\s*([^\s;\}]+)\s+([^\s;\}]+)\s+([^\s;\}]+)\s+([^\s;\}]+)/',
+            '/margin:\s*' . self::RTL_FOUR_VALUES . '/',
             'margin:\\1 \\4 \\3 \\2',
             $contents
         );
 
         // padding
         $contents = \preg_replace(
-            '/padding:\s*([^\s;\}]+)\s+([^\s;\}]+)\s+([^\s;\}]+)\s+([^\s;\}]+)/',
+            '/padding:\s*' . self::RTL_FOUR_VALUES . '/',
             'padding:\\1 \\4 \\3 \\2',
             $contents
         );
@@ -106,7 +120,7 @@ static function ($matches) {
 
         // border-radius
         $contents = \preg_replace(
-            '/border-radius:\s*([^\s;\}]+)\s+([^\s;\}]+)\s+([^\s;\}]+)\s+([^\s;\}]+)/',
+            '/border-radius:\s*' . self::RTL_FOUR_VALUES . '/',
             'border-radius:\\2 \\1 \\4 \\3',
             $contents
         );
diff --git a/wcfsetup/install/files/style/layout/box.scss b/wcfsetup/install/files/style/layout/box.scss
index ebaf633eef7..9e05008006e 100644
--- a/wcfsetup/install/files/style/layout/box.scss
+++ b/wcfsetup/install/files/style/layout/box.scss
@@ -777,180 +777,8 @@
 	margin-top: 40px;
 }
 
-/* styling for boxes in <footerBoxes> position */
-.boxesFooterBoxes {
-	background-color: var(--wcfFooterBoxBackground);
-	color: var(--wcfFooterBoxText);
-
-	a {
-		color: var(--wcfFooterBoxLink);
-
-		&:hover {
-			color: var(--wcfFooterBoxLinkActive);
-		}
-	}
-
-	.boxContainer {
-		@include screen-sm-down {
-			display: flex;
-			flex-direction: column;
-			padding: 40px 0;
-			row-gap: 40px;
-		}
-
-		@include screen-md-up {
-			column-gap: 30px;
-			display: grid;
-			grid-template-columns: 1fr 1fr;
-			padding: 60px 0;
-			row-gap: 60px;
-		}
-	}
-
-	@include screen-md-up {
-		.box.boxFullWidth {
-			grid-column: span 2;
-		}
-	}
-
-	.boxTitle {
-		color: var(--wcfFooterBoxHeadlineText);
-
-		a {
-			color: var(--wcfFooterBoxHeadlineLink);
-
-			&:hover {
-				color: var(--wcfFooterBoxHeadlineLinkActive);
-			}
-		}
-	}
-
-	.boxImage {
-		align-items: center;
-		display: flex;
-		justify-content: center;
-		margin-bottom: 20px;
-		max-height: 100px;
-		overflow: hidden;
-	}
-}
-
-/* styling for boxes in <footer> position */
-.boxesFooter {
-	background-color: var(--wcfFooterBackground);
-	color: var(--wcfFooterText);
-	padding: 20px 0;
-
-	.layoutBoundary {
-		position: relative;
-	}
-
-	a {
-		color: var(--wcfFooterLink);
-
-		&:hover {
-			color: var(--wcfFooterLinkActive);
-			text-decoration: underline;
-		}
-	}
-
-	.box {
-		&:not(:first-child) {
-			margin-top: 20px;
-		}
-	}
-
-	.boxTitle {
-		color: var(--wcfFooterHeadlineText);
-
-		a {
-			color: var(--wcfFooterHeadlineLink);
-
-			&:hover {
-				color: var(--wcfFooterHeadlineLinkActive);
-			}
-		}
-	}
-
-	@include screen-xs {
-		.boxImage {
-			align-items: center;
-			display: flex;
-			justify-content: center;
-			margin-bottom: 20px;
-			max-height: 100px;
-			overflow: hidden;
-		}
-	}
-
-	@include screen-sm-up {
-		.boxWithImage {
-			@include clearfix;
-		}
-
-		.boxImage {
-			float: left;
-			width: 30%;
-		}
-	}
-
-	@include screen-sm-md {
-		.boxImage {
-			margin: 0 10px 10px 0;
-		}
-	}
-
-	@include screen-lg {
-		.boxImage {
-			margin: 0 20px 20px 0;
-		}
-	}
-
-	.boxMenuLinkGroup {
-		.boxMenu {
-			> li {
-				> ol {
-					a {
-						// use text color instead
-						color: var(--wcfFooterText);
-					}
-				}
-			}
-		}
-	}
-}
-
-.styleChanger {
-	position: absolute;
-	right: 20px;
-	z-index: 1;
-
-	button {
-		color: var(--wcfFooterLink);
-	}
-
-	@include screen-md-down {
-		right: 10px;
-	}
-}
-
-@media (hover: hover) {
-	.styleChanger button:hover {
-		color: var(--wcfFooterLinkActive);
-		text-decoration: underline;
-	}
-}
-
-html[data-color-scheme="dark"] .page__colorScheme--light {
-	display: none !important;
-}
-html:not([data-color-scheme="dark"]) .page__colorScheme--dark {
-	display: none !important;
-}
-
 .boxesTop,
-.boxesBottom,
-.boxesFooter {
+.boxesBottom {
 	.boxMenu {
 		display: inline-flex;
 		flex-wrap: wrap;
diff --git a/wcfsetup/install/files/style/layout/pageFooter.scss b/wcfsetup/install/files/style/layout/pageFooter.scss
deleted file mode 100644
index de2c77a9003..00000000000
--- a/wcfsetup/install/files/style/layout/pageFooter.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.pageFooterCopyright {
-	background-color: var(--wcfFooterCopyrightBackground);
-	color: var(--wcfFooterCopyrightText);
-	text-align: center;
-
-	@include screen-md-up {
-		padding: 20px 0;
-	}
-
-	@include screen-sm-down {
-		padding: 20px 0;
-
-		@include wcfFontSmall;
-	}
-
-	> .layoutBoundary > div:not(:first-child) {
-		margin-top: 10px;
-	}
-
-	a {
-		color: var(--wcfFooterCopyrightLink);
-
-		&:hover {
-			color: var(--wcfFooterCopyrightLinkActive);
-			text-decoration: underline;
-		}
-	}
-}
diff --git a/wcfsetup/install/files/style/layout/pageFooter/classic.scss b/wcfsetup/install/files/style/layout/pageFooter/classic.scss
new file mode 100644
index 00000000000..385002107c5
--- /dev/null
+++ b/wcfsetup/install/files/style/layout/pageFooter/classic.scss
@@ -0,0 +1,247 @@
+/* styling for boxes in <footerBoxes> position */
+.boxesFooterBoxes {
+	background-color: var(--wcfFooterBoxBackground);
+	color: var(--wcfFooterBoxText);
+
+	a {
+		color: var(--wcfFooterBoxLink);
+
+		&:hover {
+			color: var(--wcfFooterBoxLinkActive);
+		}
+	}
+
+	.boxContainer {
+		@include screen-sm-down {
+			display: flex;
+			flex-direction: column;
+			padding: 40px 0;
+			row-gap: 40px;
+		}
+
+		@include screen-md-up {
+			column-gap: 30px;
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			padding: 60px 0;
+			row-gap: 60px;
+		}
+	}
+
+	@include screen-md-up {
+		.box.boxFullWidth {
+			grid-column: span 2;
+		}
+	}
+
+	.boxTitle {
+		color: var(--wcfFooterBoxHeadlineText);
+
+		a {
+			color: var(--wcfFooterBoxHeadlineLink);
+
+			&:hover {
+				color: var(--wcfFooterBoxHeadlineLinkActive);
+			}
+		}
+	}
+
+	.boxImage {
+		align-items: center;
+		display: flex;
+		justify-content: center;
+		margin-bottom: 20px;
+		max-height: 100px;
+		overflow: hidden;
+	}
+}
+
+/* styling for boxes in <footer> position */
+.boxesFooter {
+	background-color: var(--wcfFooterBackground);
+	color: var(--wcfFooterText);
+	padding: 20px 0;
+
+	.layoutBoundary {
+		position: relative;
+	}
+
+	a {
+		color: var(--wcfFooterLink);
+
+		&:hover {
+			color: var(--wcfFooterLinkActive);
+			text-decoration: underline;
+		}
+	}
+
+	.box {
+		&:not(:first-child) {
+			margin-top: 20px;
+		}
+	}
+
+	.boxTitle {
+		color: var(--wcfFooterHeadlineText);
+
+		a {
+			color: var(--wcfFooterHeadlineLink);
+
+			&:hover {
+				color: var(--wcfFooterHeadlineLinkActive);
+			}
+		}
+	}
+
+	@include screen-xs {
+		.boxImage {
+			align-items: center;
+			display: flex;
+			justify-content: center;
+			margin-bottom: 20px;
+			max-height: 100px;
+			overflow: hidden;
+		}
+	}
+
+	@include screen-sm-up {
+		.boxWithImage {
+			@include clearfix;
+		}
+
+		.boxImage {
+			float: left;
+			width: 30%;
+		}
+	}
+
+	@include screen-sm-md {
+		.boxImage {
+			margin: 0 10px 10px 0;
+		}
+	}
+
+	@include screen-lg {
+		.boxImage {
+			margin: 0 20px 20px 0;
+		}
+	}
+
+	.boxMenuLinkGroup {
+		.boxMenu {
+			> li {
+				> ol {
+					a {
+						// use text color instead
+						color: var(--wcfFooterText);
+					}
+				}
+			}
+		}
+	}
+}
+
+.styleChanger {
+	position: absolute;
+	right: 20px;
+	z-index: 1;
+
+	button {
+		color: var(--wcfFooterLink);
+	}
+
+	@include screen-md-down {
+		right: 10px;
+	}
+}
+
+@media (hover: hover) {
+	.styleChanger button:hover {
+		color: var(--wcfFooterLinkActive);
+		text-decoration: underline;
+	}
+}
+
+.boxesFooter {
+	.boxMenu {
+		display: inline-flex;
+		flex-wrap: wrap;
+		margin-left: -10px;
+		margin-right: -10px;
+
+		> li {
+			flex: 0 0 auto;
+			padding-left: 10px;
+			padding-right: 10px;
+
+			@include screen-md-down {
+				margin-bottom: 10px;
+				margin-top: 10px;
+			}
+		}
+	}
+
+	.boxMenuLinkGroup {
+		&:not(:first-child) {
+			margin-top: 40px;
+		}
+
+		.boxMenu {
+			display: flex;
+			flex-wrap: wrap;
+			margin-bottom: -20px;
+
+			.boxMenuLink {
+				display: inline-block;
+			}
+
+			> li {
+				margin-bottom: 20px;
+
+				@include screen-md-up {
+					flex: 0 0 25%;
+					max-width: 25%;
+				}
+
+				@include screen-sm-down {
+					flex: 1 1 100%;
+				}
+
+				> .boxMenuLink {
+					margin-bottom: 10px;
+
+					@include wcfFontHeadline;
+				}
+			}
+		}
+	}
+}
+
+.pageFooterCopyright {
+	background-color: var(--wcfFooterCopyrightBackground);
+	color: var(--wcfFooterCopyrightText);
+	text-align: center;
+
+	@include screen-md-up {
+		padding: 20px 0;
+	}
+
+	@include screen-sm-down {
+		padding: 20px 0;
+
+		@include wcfFontSmall;
+	}
+
+	> .layoutBoundary > div:not(:first-child) {
+		margin-top: 10px;
+	}
+
+	a {
+		color: var(--wcfFooterCopyrightLink);
+
+		&:hover {
+			color: var(--wcfFooterCopyrightLinkActive);
+			text-decoration: underline;
+		}
+	}
+}
diff --git a/wcfsetup/install/files/style/layout/pageFooter/compact.scss b/wcfsetup/install/files/style/layout/pageFooter/compact.scss
new file mode 100644
index 00000000000..e62527a6af0
--- /dev/null
+++ b/wcfsetup/install/files/style/layout/pageFooter/compact.scss
@@ -0,0 +1,462 @@
+/* The boxes of the `footerBoxes` position continue the content column as one joined card. Separators
+   are each box's outline, so an empty grid cell keeps the card color instead of showing a hole. */
+.boxesFooterBoxes {
+	color: var(--wcfContentText);
+	padding-bottom: 30px;
+
+	@include screen-sm-md {
+		padding-bottom: 40px;
+	}
+
+	@include screen-xs {
+		padding-bottom: 20px;
+	}
+}
+
+.boxesFooterBoxes > .layoutBoundary > .boxContainer {
+	background-color: var(--wcfContentContainerBackground);
+	border: 1px solid var(--wcfContentBorderInner);
+	border-radius: var(--wcfBorderRadiusContainer);
+	display: grid;
+	gap: 1px;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	overflow: hidden;
+
+	@include screen-sm-down {
+		grid-template-columns: minmax(0, 1fr);
+	}
+}
+
+.boxesFooterBoxes .boxContainer > .box {
+	box-shadow: 0 0 0 1px var(--wcfContentBorderInner);
+	min-width: 0;
+	padding: 24px;
+
+	@include screen-xs {
+		padding: 20px;
+	}
+}
+
+.boxesFooterBoxes .boxContainer > .box:is(.boxFullWidth, :last-child:nth-child(odd)) {
+	grid-column: 1 / -1;
+}
+
+.boxesFooterBoxes .boxTitle {
+	color: var(--wcfContentHeadlineText);
+}
+
+.boxesFooterBoxes .boxTitle a {
+	color: inherit;
+}
+
+.boxesFooterBoxes .boxTitle + .boxContent {
+	margin-top: 12px;
+}
+
+.boxesFooterBoxes a {
+	color: var(--wcfContentLink);
+}
+
+.boxesFooterBoxes a:focus-visible {
+	outline: 2px solid var(--wcfContentLink);
+	outline-offset: 2px;
+}
+
+@media (hover: hover) {
+	.boxesFooterBoxes a:hover {
+		color: var(--wcfContentLinkActive);
+	}
+}
+
+/* The image bleeds to the edges of the cell. */
+.boxesFooterBoxes .boxImage {
+	margin: -24px -24px 16px;
+
+	@include screen-xs {
+		margin: -20px -20px 16px;
+	}
+}
+
+.boxesFooterBoxes .boxImage img {
+	display: block;
+	max-height: 140px;
+	object-fit: cover;
+	width: 100%;
+}
+
+.pageFooter--compact {
+	background-color: var(--wcfFooterBackground);
+	color: var(--wcfFooterText);
+}
+
+/* Links outside the content area use the text color, the underline on hover marks them. */
+.pageFooter--compact a {
+	color: var(--wcfFooterText);
+	text-underline-offset: 3px;
+}
+
+.pageFooter--compact a:focus-visible {
+	border-radius: 2px;
+	outline: 2px solid var(--wcfFooterText);
+	outline-offset: 2px;
+}
+
+@media (hover: hover) {
+	.pageFooter--compact a:hover {
+		text-decoration: underline;
+	}
+}
+
+.pageFooter__part--main {
+	padding-block: 44px;
+
+	@include screen-sm-down {
+		padding-block: 32px;
+	}
+}
+
+/* A lone flat menu is a single line of links. The links carry 7px of touch padding on small screens. */
+.pageFooter__part--main:has(.boxContainer > .box:only-child:not(.boxMenuLinkGroup) nav) {
+	padding-block: 24px;
+
+	@include screen-sm-down {
+		padding-block: 17px;
+	}
+}
+
+.pageFooter__part--main .boxContainer {
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+}
+
+.pageFooter__part--main .boxTitle {
+	@include wcfFontDefault;
+	@include wcfFontBold;
+
+	color: var(--wcfFooterHeadlineText);
+}
+
+/* The current page keeps the color of the other current links, see `[aria-current]` below. */
+.pageFooter__part--main .boxTitle a,
+.pageFooter__part--main .boxMenuLinkGroup .boxMenu > li > .boxMenuLink:not([aria-current="page"]) {
+	color: var(--wcfFooterHeadlineText);
+}
+
+.pageFooter__part--main .boxTitle + .boxContent {
+	margin-top: 8px;
+}
+
+.pageFooter__part--main .boxMenu {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.pageFooter__part--main .boxMenuLink {
+	display: inline;
+	padding: 0;
+}
+
+.pageFooter__part--main .boxMenu [aria-current="page"] {
+	color: var(--wcfFooterText);
+	text-decoration: underline;
+	text-decoration-thickness: 2px;
+}
+
+/* FooterMenu or any other untitled menu that is not grouped */
+.pageFooter__part--main .box:not(.boxMenuLinkGroup) > .boxContent > nav > .boxMenu {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px 24px;
+
+	@include screen-md-down {
+		gap: 0 20px;
+	}
+}
+
+@include screen-md-down {
+	.pageFooter__part--main .box:not(.boxMenuLinkGroup) .boxMenuLink,
+	.pageFooter__part--main .boxMenuDepth1 .boxMenuLink {
+		display: inline-block;
+		padding-block: 7px;
+	}
+}
+
+/* FooterLinks: columns sized to their content, the top level items are the headings */
+.pageFooter__part--main .boxMenuLinkGroup .boxMenu {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 28px 72px;
+
+	@include screen-sm-down {
+		display: grid;
+		gap: 24px 20px;
+		grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
+	}
+}
+
+.pageFooter__part--main .boxMenuLinkGroup .boxMenu > li {
+	flex: 0 1 auto;
+	min-width: 140px;
+
+	@include screen-sm-down {
+		min-width: 0;
+	}
+}
+
+.pageFooter__part--main .boxMenuLinkGroup .boxMenu > li > .boxMenuLink {
+	@include wcfFontBold;
+}
+
+.pageFooter__part--main .boxMenuDepth1 {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	list-style: none;
+	margin: 10px 0 0;
+	padding: 0;
+
+	@include screen-md-down {
+		gap: 0;
+		margin-top: 4px;
+	}
+}
+
+.pageFooter__part--bottom {
+	background-color: var(--wcfFooterCopyrightBackground);
+	color: var(--wcfFooterCopyrightText);
+	padding-block: 14px;
+
+	@include screen-sm-down {
+		padding-block: 16px 20px;
+	}
+}
+
+.pageFooter__part--bottom:has(.pageFooter__ad) {
+	padding-block: 20px;
+}
+
+.pageFooter__part--bottom a {
+	color: var(--wcfFooterCopyrightText);
+}
+
+.pageFooter__part--bottom a:focus-visible {
+	outline-color: var(--wcfFooterCopyrightText);
+}
+
+.pageFooter__bottom {
+	align-items: center;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 16px 40px;
+	justify-content: space-between;
+
+	@include screen-sm-down {
+		align-items: flex-start;
+		flex-direction: column;
+		gap: 16px;
+	}
+}
+
+.pageFooter__copyright {
+	@include wcfFontSmall;
+
+	display: flex;
+	flex: 1 1 320px;
+	flex-direction: column;
+	gap: 4px;
+	min-width: 0;
+
+	@include screen-sm-down {
+		flex: 0 0 auto;
+		width: 100%;
+	}
+}
+
+.pageFooter__copyright .benchmark {
+	overflow-wrap: anywhere;
+}
+
+/* The ad gets its own row, so the copyright and the preferences stay on one row. */
+.pageFooter__ad {
+	display: flex;
+	justify-content: center;
+	max-width: 100%;
+	overflow-x: auto;
+}
+
+.pageFooter__bottom + .pageFooter__ad {
+	margin-top: 20px;
+}
+
+.pageFooter__ad > .wcfAdLocation {
+	max-width: 100%;
+}
+
+/* Every member is `.jsOnly` and the row spaces them with `gap`, so a missing one leaves no hole. */
+.pageFooterPreferences {
+	align-items: center;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+
+	@include screen-sm-down {
+		order: -1;
+	}
+}
+
+.pageFooterPreferences__button {
+	align-items: center;
+	background-color: transparent;
+	border: 1px solid rgba(var(--wcfFooterCopyrightText-rgb) / 0.22);
+	border-radius: 9px;
+	box-sizing: border-box;
+	color: var(--wcfFooterCopyrightText);
+	cursor: pointer;
+	display: inline-flex;
+	font: inherit;
+	gap: 8px;
+	height: 36px;
+	padding: 0 12px;
+	transition:
+		background-color 0.12s ease,
+		border-color 0.12s ease;
+	white-space: nowrap;
+
+	@include screen-md-down {
+		height: 44px;
+	}
+}
+
+.pageFooterPreferences__button > fa-icon {
+	flex: 0 0 auto;
+}
+
+.pageFooterPreferences__button:focus-visible {
+	outline: 2px solid var(--wcfFooterCopyrightText);
+	outline-offset: 2px;
+}
+
+.pageFooterPreferences__button[aria-expanded="true"] {
+	background-color: rgba(var(--wcfFooterCopyrightText-rgb) / 0.08);
+}
+
+@media (hover: hover) {
+	.pageFooterPreferences__button:hover {
+		background-color: rgba(var(--wcfFooterCopyrightText-rgb) / 0.08);
+		border-color: rgba(var(--wcfFooterCopyrightText-rgb) / 0.34);
+	}
+}
+
+/* Native radios, the labels are visually hidden and repeated as the title. */
+.pageFooterScheme {
+	border: 1px solid rgba(var(--wcfFooterCopyrightText-rgb) / 0.22);
+	border-radius: 9px;
+	box-sizing: border-box;
+	display: inline-flex;
+	height: 36px;
+	margin: 0;
+	min-inline-size: 0;
+	padding: 0;
+
+	@include screen-md-down {
+		height: 44px;
+	}
+}
+
+.pageFooterScheme__option {
+	align-items: center;
+	color: var(--wcfFooterCopyrightText);
+	cursor: pointer;
+	display: inline-flex;
+	justify-content: center;
+	position: relative;
+	width: 36px;
+
+	@include screen-md-down {
+		width: 44px;
+	}
+}
+
+.pageFooterScheme__option::before {
+	border-radius: 6px;
+	content: "";
+	inset: 3px;
+	position: absolute;
+	transition: background-color 0.12s ease;
+}
+
+.pageFooterScheme__option > fa-icon {
+	position: relative;
+}
+
+.pageFooterScheme__input {
+	appearance: none;
+	cursor: pointer;
+	inset: 0;
+	margin: 0;
+	opacity: 0;
+	position: absolute;
+	z-index: 1;
+}
+
+/* Inverted text and background, so it passes whenever the footer text does. */
+.pageFooterScheme__option:has(:checked) {
+	color: var(--wcfFooterCopyrightBackground);
+}
+
+.pageFooterScheme__option:has(:checked)::before {
+	background-color: var(--wcfFooterCopyrightText);
+}
+
+/* Forced colors drop the background, a border survives. */
+@media (forced-colors: active) {
+	.pageFooterScheme__option:has(:checked)::before {
+		border: 2px solid CanvasText;
+	}
+}
+
+.pageFooterScheme__option:has(:focus-visible) {
+	border-radius: 7px;
+	outline: 2px solid var(--wcfFooterCopyrightText);
+	outline-offset: -1px;
+}
+
+@media (hover: hover) {
+	.pageFooterScheme__option:not(:has(:checked)):hover::before {
+		background-color: rgba(var(--wcfFooterCopyrightText-rgb) / 0.1);
+	}
+}
+
+.pageFooterLanguage .iconFlag,
+.pageFooterLanguageMenu .iconFlag {
+	border-radius: 2px;
+	display: block;
+	flex: 0 0 auto;
+	height: 15px;
+	object-fit: cover;
+	width: 20px;
+}
+
+/* The menu is moved into `.dropdownMenuContainer`, it is styled through its own class. */
+.dropdownMenu.pageFooterLanguageMenu li > button {
+	align-items: center;
+	display: flex;
+	gap: 10px;
+	width: 100%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.pageFooterPreferences__button,
+	.pageFooterScheme__option::before {
+		transition: none;
+	}
+}
+
+@media print {
+	.pageFooter__part--main,
+	.pageFooterPreferences {
+		display: none;
+	}
+}
diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index 60eddb60128..02eac33ac70 100644
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -2879,6 +2879,9 @@ Abschnitte dürfen nicht leer sein und nur folgende Zeichen enthalten: <kbd>[a-z
 		<item name="wcf.acp.style.colors.linkColor"><![CDATA[Linkfarbe]]></item>
 		<item name="wcf.acp.style.colors.linkHoverColor"><![CDATA[Linkfarbe (Hover)]]></item>
 		<item name="wcf.acp.style.colors.page"><![CDATA[Seite]]></item>
+		<item name="wcf.acp.style.colors.pageFooterScope.classic"><![CDATA[Wird nur vom klassischen Seitenfuß verwendet.]]></item>
+		<item name="wcf.acp.style.colors.pageFooterScope.emails"><![CDATA[Wird mit dem gewählten Layout des Seitenfußes nur in E-Mails verwendet.]]></item>
+		<item name="wcf.acp.style.colors.pageFooterScope.headerBoxes"><![CDATA[Wird mit dem gewählten Layout des Seitenfußes nur von den Boxen der Position „Kopfzeile“ verwendet.]]></item>
 		<item name="wcf.acp.style.colors.pageHeaderScope.classic"><![CDATA[Wird nur vom klassischen Seitenkopf verwendet.]]></item>
 		<item name="wcf.acp.style.colors.pageHeaderScope.smallScreens"><![CDATA[Wird mit dem gewählten Layout des Seitenkopfs nur auf kleinen Bildschirmen verwendet.]]></item>
 		<item name="wcf.acp.style.colors.primaryBackgroundColor"><![CDATA[Hintergrundfarbe (primär)]]></item>
@@ -2959,6 +2962,11 @@ Abschnitte dürfen nicht leer sein und nur folgende Zeichen enthalten: <kbd>[a-z
 		<item name="wcf.acp.style.styleDate.error.invalid"><![CDATA[{if LANGUAGE_USE_INFORMAL_VARIANT}Du hast{else}Sie haben{/if} ein ungültiges Datum eingegeben.]]></item>
 		<item name="wcf.acp.style.option"><![CDATA[Stiloptionen]]></item>
 		<item name="wcf.acp.style.option.deprecated"><![CDATA[Veraltet]]></item>
+		<item name="wcf.acp.style.option.pageFooterLayout"><![CDATA[Layout des Seitenfußes]]></item>
+		<item name="wcf.acp.style.option.pageFooterLayout.classic"><![CDATA[Klassisch]]></item>
+		<item name="wcf.acp.style.option.pageFooterLayout.classic.description"><![CDATA[Der Seitenfuß früherer Versionen mit eigens eingefärbten Bändern für die Fußzeile, das Seitenende und das Copyright.<br><br>Dieser Seitenfuß wird in einer zukünftigen Version entfernt. Bis dahin steht diese Option für Stile zur Verfügung, deren Templates, CSS oder JavaScript darauf angewiesen sind und die noch nicht angepasst wurden.]]></item>
+		<item name="wcf.acp.style.option.pageFooterLayout.compact"><![CDATA[Kompakt]]></item>
+		<item name="wcf.acp.style.option.pageFooterLayout.compact.description"><![CDATA[Ein ruhiges Band in den Farben des Seitenfußes, die unterste Zeile zeigt das Copyright neben der Auswahl von Farbschema, Stil und Sprache. Die Boxen der Fußzeile setzen den Inhalt als zusammenhängende Karte fort.]]></item>
 		<item name="wcf.acp.style.option.pageHeaderLayout"><![CDATA[Layout des Seitenkopfs]]></item>
 		<item name="wcf.acp.style.option.pageHeaderLayout.classic"><![CDATA[Klassisch]]></item>
 		<item name="wcf.acp.style.option.pageHeaderLayout.classic.description"><![CDATA[Der Seitenkopf früherer Versionen. Die Menüleiste steht ganz oben und bleibt beim Scrollen am oberen Bildschirmrand, das Logo folgt darunter.<br><br>Dieser Seitenkopf wird in einer zukünftigen Version entfernt. Bis dahin steht diese Option für Stile zur Verfügung, deren Templates, CSS oder JavaScript darauf angewiesen sind und die noch nicht angepasst wurden.]]></item>
diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index d8f417b4eea..f3c300399f8 100644
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -2808,6 +2808,9 @@ If you have <strong>already bought the licenses for the listed apps</strong>, th
 		<item name="wcf.acp.style.colors.linkColor"><![CDATA[Link Color]]></item>
 		<item name="wcf.acp.style.colors.linkHoverColor"><![CDATA[Link Color (hover)]]></item>
 		<item name="wcf.acp.style.colors.page"><![CDATA[Page]]></item>
+		<item name="wcf.acp.style.colors.pageFooterScope.classic"><![CDATA[Only used by the classic page footer.]]></item>
+		<item name="wcf.acp.style.colors.pageFooterScope.emails"><![CDATA[With the selected page footer layout, only used in emails.]]></item>
+		<item name="wcf.acp.style.colors.pageFooterScope.headerBoxes"><![CDATA[With the selected page footer layout, only used by the boxes in the “Header boxes” position.]]></item>
 		<item name="wcf.acp.style.colors.pageHeaderScope.classic"><![CDATA[Only used by the classic page header.]]></item>
 		<item name="wcf.acp.style.colors.pageHeaderScope.smallScreens"><![CDATA[With the selected page header layout, only used on small screens.]]></item>
 		<item name="wcf.acp.style.colors.primaryBackgroundColor"><![CDATA[Background Color (primary)]]></item>
@@ -2889,6 +2892,11 @@ If you have <strong>already bought the licenses for the listed apps</strong>, th
 		<item name="wcf.acp.style.styleDate.error.invalid"><![CDATA[You have provided an invalid date.]]></item>
 		<item name="wcf.acp.style.option"><![CDATA[Style Options]]></item>
 		<item name="wcf.acp.style.option.deprecated"><![CDATA[Deprecated]]></item>
+		<item name="wcf.acp.style.option.pageFooterLayout"><![CDATA[Page Footer Layout]]></item>
+		<item name="wcf.acp.style.option.pageFooterLayout.classic"><![CDATA[Classic]]></item>
+		<item name="wcf.acp.style.option.pageFooterLayout.classic.description"><![CDATA[The page footer of earlier versions, with separately colored bands for the footer boxes, the footer and the copyright.<br><br>This page footer will be removed in a future version. Until then, it remains an option for styles whose templates, CSS or JavaScript depend on it and have not been updated yet.]]></item>
+		<item name="wcf.acp.style.option.pageFooterLayout.compact"><![CDATA[Compact]]></item>
+		<item name="wcf.acp.style.option.pageFooterLayout.compact.description"><![CDATA[A calm band in the footer colors, the bottom row places the copyright next to the controls for color scheme, style and language. The footer boxes continue the content as a joined card.]]></item>
 		<item name="wcf.acp.style.option.pageHeaderLayout"><![CDATA[Page Header Layout]]></item>
 		<item name="wcf.acp.style.option.pageHeaderLayout.classic"><![CDATA[Classic]]></item>
 		<item name="wcf.acp.style.option.pageHeaderLayout.classic.description"><![CDATA[The page header of earlier versions. The menu bar sits at the very top and stays there while scrolling, the logo follows below.<br><br>This page header will be removed in a future version. Until then, it remains an option for styles whose templates, CSS or JavaScript depend on it and have not been updated yet.]]></item>
diff --git a/wcfsetup/setup/db/install.sql b/wcfsetup/setup/db/install.sql
index abb3bf7ce35..37ccb63ed7d 100644
--- a/wcfsetup/setup/db/install.sql
+++ b/wcfsetup/setup/db/install.sql
@@ -28,6 +28,7 @@ INSERT INTO wcf1_package_update_server (serverURL, status, isDisabled, errorMess
 INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('individualScss', '', NULL);
 INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('messageSidebarOrientation', 'left', NULL);
 INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('overrideScss', '', NULL);
+INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('pageFooterLayout', 'compact', NULL);
 INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('pageHeaderLayout', 'logoTop', NULL);
 INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('pageLogo', '', NULL);
 INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('pageLogoWidth', '281', NULL);
@@ -79,7 +80,7 @@ INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMod
 INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFontSizeSection', '23px', NULL);
 INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFontSizeSmall', '12px', NULL);
 INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFontSizeTitle', '28px', NULL);
-INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterBackground', 'rgba(58, 109, 156, 1)', 'rgba(30, 39, 52, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterBackground', 'rgba(242, 242, 242, 1)', 'rgba(33, 36, 40, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterBoxBackground', 'rgba(236, 239, 241, 1)', 'rgba(26, 34, 45, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterBoxHeadlineLink', 'rgba(58, 58, 61, 1)', 'rgba(209, 210, 211, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterBoxHeadlineLinkActive', 'rgba(58, 58, 61, 1)', 'rgba(255, 255, 255, 1)');
@@ -87,16 +88,16 @@ INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMod
 INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterBoxLink', 'rgba(38, 113, 166, 1)', 'rgba(29, 155, 209, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterBoxLinkActive', 'rgba(22, 81, 124, 1)', 'rgba(64, 179, 228, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterBoxText', 'rgba(58, 58, 61, 1)', 'rgba(158, 158, 158, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterCopyrightBackground', 'rgba(50, 92, 132, 1)', 'rgba(36, 46, 61, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterCopyrightLink', 'rgba(217, 220, 222, 1)', 'rgba(182, 184, 185, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterCopyrightLinkActive', 'rgba(255, 255, 255, 1)', 'rgba(217, 220, 222, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterCopyrightText', 'rgba(217, 220, 222, 1)', 'rgba(182, 184, 185, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterHeadlineLink', 'rgba(255, 255, 255, 1)', 'rgba(209, 210, 211, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterHeadlineLinkActive', 'rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterHeadlineText', 'rgba(233, 235, 236, 1)', 'rgba(209, 210, 211, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterLink', 'rgba(255, 255, 255, 1)', 'rgba(30, 163, 220, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterLinkActive', 'rgba(255, 255, 255, 1)', 'rgba(75, 184, 231, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterText', 'rgba(217, 220, 222, 1)', 'rgba(158, 158, 158, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterCopyrightBackground', 'rgba(233, 233, 233, 1)', 'rgba(42, 45, 49, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterCopyrightLink', 'rgba(58, 58, 61, 1)', 'rgba(209, 210, 211, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterCopyrightLinkActive', 'rgba(22, 81, 124, 1)', 'rgba(64, 179, 228, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterCopyrightText', 'rgba(58, 58, 61, 1)', 'rgba(209, 210, 211, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterHeadlineLink', 'rgba(58, 58, 61, 1)', 'rgba(209, 210, 211, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterHeadlineLinkActive', 'rgba(22, 81, 124, 1)', 'rgba(64, 179, 228, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterHeadlineText', 'rgba(58, 58, 61, 1)', 'rgba(209, 210, 211, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterLink', 'rgba(38, 113, 166, 1)', 'rgba(29, 155, 209, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterLinkActive', 'rgba(22, 81, 124, 1)', 'rgba(64, 179, 228, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfFooterText', 'rgba(58, 58, 61, 1)', 'rgba(209, 210, 211, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfHeaderBackground', 'rgba(58, 109, 156, 1)', 'rgba(30, 39, 52, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfHeaderText', 'rgba(255, 255, 255, 1)', 'rgba(209, 210, 211, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue, defaultValueDarkMode) VALUES('wcfHeaderLink', 'rgba(255, 255, 255, 1)', 'rgba(209, 210, 211, 1)');