add language toggle

src/lib/components/prayers/AveMaria.svelte

@@ -1,9 +1,12 @@
 <script>
+	import Prayer from './Prayer.svelte';
+
 	export let mystery = ""; // For rosary mysteries (German)
 	export let mysteryLatin = ""; // For rosary mysteries (Latin)
 </script>
 
-<p>
+<Prayer>
+	<p>
 		<v lang="la">Ave María, grátia plena. Dóminus tecum,</v>
 		<v lang="de">Gegrüsset seist du Maria, voll der Gnade; der Herr ist mit dir;</v>
 		<v lang="la">benedícta tu in muliéribus,</v>
@@ -16,10 +19,11 @@
 		{#if mystery}
 			<v lang="de" class="mystery-text">{mystery}</v>
 		{/if}
-</p>
+	</p>
-<p>
+	<p>
 		<v lang="la">Sancta María, mater Dei, ora pro nobis peccatóribus,</v>
 		<v lang="de">Heilige Maria, Mutter Gottes, bitte für uns Sünder</v>
 		<v lang="la">nunc, et in hora mortis nostræ. Amen.</v>
 		<v lang="de">jetzt und in der Stunde unseres Todes! Amen.</v>
-</p>
+	</p>
+</Prayer>

src/lib/components/prayers/Credo.svelte

@@ -1,4 +1,9 @@
-<p>
+<script>
+	import Prayer from './Prayer.svelte';
+</script>
+
+<Prayer>
+	<p>
 		<v lang="la">Credo in unum <i><sup>⚬</sup></i> Deum, Patrem omnipoténtem,</v>
 	<v lang="de">Ich glaub an den einen <i><sup>⚬</sup></i> Gott. Den allmächtigen Vater,</v>
 	<v lang="la">factórem cæli et terræ,</v>
@@ -82,4 +87,5 @@
 	<v lang="de">Ich erwarte die Auferstehung der Toten.</v>
 		<v lang="la"><i>♱</i> Et vitam ventúri sǽculi. Amen.</v>
 		<v lang="de"><i>♱</i> Und das Leben der zukünftigen Welt. Amen.</v>
-</p>
+	</p>
+</Prayer>

src/lib/components/prayers/FatimaGebet.svelte

@@ -1,4 +1,9 @@
-<p>
+<script>
+	import Prayer from './Prayer.svelte';
+</script>
+
+<Prayer>
+	<p>
 		<v lang="la">Ó mí Jésú, dímitte nóbís débita nostra,</v>
 		<v lang="de">O mein Jesus, verzeih' uns unsere Sünden,</v>
 		<v lang="la">líberá nós ab igne ínferní,</v>
@@ -9,4 +14,5 @@
 		<v lang="de">besonders jene,</v>
 		<v lang="la">quæ maximé indigent misericordiá tuá. Amen.</v>
 		<v lang="de">die Deiner Barmherzigkeit am meisten bedürfen. Amen.</v>
-</p>
+	</p>
+</Prayer>

src/lib/components/prayers/Gloria.svelte

@@ -1,4 +1,9 @@
-<p>
+<script>
+	import Prayer from './Prayer.svelte';
+</script>
+
+<Prayer>
+	<p>
 		<v lang="la">Glória in excélsis <i><sup>⚬</sup></i> Deo.</v>
 		<v lang="de">Ehre sei <i><sup>⚬</sup></i> Gott in der Höhe.</v>
 		<v lang="la">Et in terra pax homínibus</v>
@@ -49,4 +54,5 @@
 		<v lang="de">Mit dem Hl. Geiste,</v>
 		<v lang="la"><i>♱</i> in glória Dei Patris. Amen.</v>
 		<v lang="de"><i>♱</i> in der Herrlichkeit Gottes des Vaters. Amen.</v>
-</p>
+	</p>
+</Prayer>

src/lib/components/prayers/GloriaPatri.svelte

@@ -1,8 +1,14 @@
-<p>
+<script>
+	import Prayer from './Prayer.svelte';
+</script>
+
+<Prayer>
+	<p>
 		<v lang="la">Glória Patri, et Fílio, et Spirítui Sancto.</v>
 		<v lang="de">Ehre sei dem Vater und dem Sohne und dem Hl. Geiste.</v>
 		<v lang="la">Sicut erat in princípio, et nunc, et semper:</v>
 		<v lang="de">Wie es war am Anfang, so auch jetzt und allezeit</v>
 		<v lang="la">et in sǽcula sæculórum. Amen.</v>
 		<v lang="de">und in Ewigkeit. Amen.</v>
-</p>
+	</p>
+</Prayer>

src/lib/components/prayers/Kreuzzeichen.svelte

@@ -1,4 +1,10 @@
-<p>
+<script>
+	import Prayer from './Prayer.svelte';
+</script>
+
+<Prayer>
+	<p>
 		<v lang="la">In nómine <i>♱</i> Patris, et Fílii, et Spíritus Sancti. Amen.</v>
 		<v lang="de">Im Namen des <i>♱</i> Vaters und des Sohnes und des Heiligen Geistes. Amen.</v>
-</p>
+	</p>
+</Prayer>

src/lib/components/prayers/Paternoster.svelte

@@ -1,4 +1,9 @@
-<p>
+<script>
+	import Prayer from './Prayer.svelte';
+</script>
+
+<Prayer>
+	<p>
 		<v lang="la">Pater noster, qui es in cælis</v>
 		<v lang="de">Vater unser, der Du bist im Himmel,</v>
 		<v lang="la">Sanctificétur nomen tuum</v>
@@ -17,4 +22,5 @@
 		<v lang="de">und führe uns nicht in Versuchung.</v>
 		<v lang="la">Sed líbera nos a malo. Amen.</v>
 		<v lang="de">Sondern erlöse uns von dem Übel. Amen.</v>
-</p>
+	</p>
+</Prayer>

src/lib/components/prayers/Prayer.svelte

@@ -0,0 +1,126 @@
+<script>
+	import { getLanguageContext } from '$lib/contexts/languageContext.js';
+
+	export let latinPrimary = true; // Controls which language is shown prominently
+
+	// Get context if available (graceful fallback for standalone usage)
+	let showLatinStore;
+	try {
+		const context = getLanguageContext();
+		showLatinStore = context.showLatin;
+	} catch {
+		showLatinStore = null;
+	}
+
+	$: showLatin = showLatinStore ? $showLatinStore : true;
+</script>
+
+<style>
+.prayer-wrapper :global(p) {
+	display: flex;
+	flex-direction: column;
+}
+
+/* Reverse order when German is primary */
+.prayer-wrapper.german-primary :global(p) {
+	flex-direction: column-reverse;
+}
+
+.prayer-wrapper :global(v) {
+	margin: 0;
+	display: block;
+}
+
+/* Latin primary (default) */
+.prayer-wrapper :global(v:lang(la)) {
+	color: var(--nord6);
+}
+
+.prayer-wrapper :global(v:lang(de)) {
+	color: grey;
+}
+
+.prayer-wrapper :global(i) {
+	font-style: normal;
+	color: var(--nord11);
+	font-weight: 900;
+}
+
+@media(prefers-color-scheme: light) {
+	.prayer-wrapper :global(v:lang(la)) {
+		color: black;
+	}
+}
+
+/* German primary mode */
+.prayer-wrapper.german-primary :global(v:lang(de)) {
+	color: var(--nord6);
+}
+
+.prayer-wrapper.german-primary :global(v:lang(la)) {
+	color: grey;
+}
+
+@media(prefers-color-scheme: light) {
+	.prayer-wrapper.german-primary :global(v:lang(de)) {
+		color: black;
+	}
+}
+
+/* Mystery text styling */
+.prayer-wrapper :global(v.mystery-text:lang(la)) {
+	color: var(--nord11) !important;
+	font-weight: 700;
+	font-size: 1.1em;
+}
+
+.prayer-wrapper :global(v.mystery-text:lang(de)) {
+	color: var(--nord12) !important;
+	font-weight: 700;
+	font-size: 0.95em;
+}
+
+.prayer-wrapper.german-primary :global(v.mystery-text:lang(de)) {
+	color: var(--nord11) !important;
+	font-weight: 700;
+	font-size: 1.1em;
+}
+
+.prayer-wrapper.german-primary :global(v.mystery-text:lang(la)) {
+	color: var(--nord12) !important;
+	font-weight: 700;
+	font-size: 0.95em;
+}
+
+/* Hide Latin in monolingual mode */
+.prayer-wrapper.monolingual :global(v:lang(la)) {
+	display: none;
+}
+
+/* German gets primary styling in monolingual mode */
+.prayer-wrapper.monolingual :global(v:lang(de)) {
+	color: var(--nord6);
+}
+
+@media(prefers-color-scheme: light) {
+	.prayer-wrapper.monolingual :global(v:lang(de)) {
+		color: black;
+	}
+}
+
+/* Hide Latin mystery text in monolingual mode */
+.prayer-wrapper.monolingual :global(v.mystery-text:lang(la)) {
+	display: none;
+}
+
+/* German mystery text gets prominent styling in monolingual mode */
+.prayer-wrapper.monolingual :global(v.mystery-text:lang(de)) {
+	color: var(--nord11) !important;
+	font-weight: 700;
+	font-size: 1.1em;
+}
+</style>
+
+<div class="prayer-wrapper" class:german-primary={!latinPrimary} class:monolingual={!showLatin}>
+	<slot></slot>
+</div>

src/lib/components/prayers/RosaryFinalPrayer.svelte

@@ -1,8 +1,13 @@
-<p>
+<script>
+	import Prayer from './Prayer.svelte';
+</script>
+
+<Prayer>
+	<p>
 		<v lang="la">Orémus:</v>
 		<v lang="de">Lasset uns beten:</v>
-</p>
+	</p>
-<p>
+	<p>
 		<v lang="la">Déus, cújus Unigénitus,</v>
 		<v lang="de">O Gott, dessen eingeborner Sohn</v>
 		<v lang="la">pér vítam, mórtem ét resurrectiónem súam</v>
@@ -21,4 +26,5 @@
 		<v lang="de">Durch unsern Herrn Jesus Christus.</v>
 		<v lang="la">Ámen.</v>
 		<v lang="de">Amen.</v>
-</p>
+	</p>
+</Prayer>

src/lib/components/prayers/SalveRegina.svelte

@@ -1,4 +1,9 @@
-<p>
+<script>
+	import Prayer from './Prayer.svelte';
+</script>
+
+<Prayer>
+	<p>
 		<v lang="la">Salve, Regína,</v>
 		<v lang="de">Sei gegrüsst, o Königin,</v>
 		<v lang="la">máter misericórdiae;</v>
@@ -6,8 +11,8 @@
 		<v lang="la">Víta, dulcédo et spes nóstra, sálve.</v>
 		<v lang="de">unser Leben, unsre Wonne</v>
 		<v lang="de">und unsere Hoffnung, sei gegrüsst!</v>
-</p>
+	</p>
-<p>
+	<p>
 		<v lang="la">Ad te clamámus, éxsules fílii Hévae.</v>
 		<v lang="de">Zu dir rufen wir verbannte Kinder Evas;</v>
 		<v lang="la">Ad te suspirámus,</v>
@@ -24,4 +29,5 @@
 		<v lang="de">die gebenedeite Frucht deines Leibes.</v>
 		<v lang="la">O clémens, o pía, o dúlcis Vírgo María.</v>
 		<v lang="de">O gütige, o milde, o süsse Jungfrau Maria.</v>
-</p>
+	</p>
+</Prayer>

src/lib/contexts/languageContext.js

@@ -0,0 +1,18 @@
+import { setContext, getContext } from 'svelte';
+import { writable } from 'svelte/store';
+
+const LANGUAGE_CONTEXT_KEY = Symbol('language');
+
+export function createLanguageContext() {
+	const showLatin = writable(true); // true = bilingual, false = monolingual
+
+	setContext(LANGUAGE_CONTEXT_KEY, {
+		showLatin
+	});
+
+	return { showLatin };
+}
+
+export function getLanguageContext() {
+	return getContext(LANGUAGE_CONTEXT_KEY);
+}

src/routes/glaube/rosenkranz/+page.svelte

@@ -1,5 +1,6 @@
 <script>
 import { onMount } from "svelte";
+import { createLanguageContext } from "$lib/contexts/languageContext.js";
 import "$lib/css/christ.css";
 import "$lib/css/rosenkranz.css";
 import Kreuzzeichen from "$lib/components/prayers/Kreuzzeichen.svelte";
@@ -114,6 +115,25 @@ const mysteryTitles = {
 // Toggle for including Luminous mysteries
 let includeLuminous = true;
 
+// Create language context for prayer components
+const { showLatin } = createLanguageContext();
+let showBilingual = true;
+
+// Flag to prevent saving before we've loaded from localStorage
+let hasLoadedFromStorage = false;
+
+// Sync checkbox with context
+$: $showLatin = showBilingual;
+
+// Save toggle states to localStorage whenever they change (but only after initial load)
+$: if (typeof localStorage !== 'undefined' && hasLoadedFromStorage) {
+	localStorage.setItem('rosary_includeLuminous', includeLuminous.toString());
+}
+
+$: if (typeof localStorage !== 'undefined' && hasLoadedFromStorage) {
+	localStorage.setItem('rosary_showBilingual', showBilingual.toString());
+}
+
 // Function to get the appropriate mystery for a given weekday
 function getMysteryForWeekday(date, includeLuminous) {
 	const dayOfWeek = date.getDay(); // 0 = Sunday, 1 = Monday, etc.
@@ -254,6 +274,25 @@ const sectionPositions = {
 };
 
 onMount(() => {
+	// Load toggle states from localStorage
+	const savedIncludeLuminous = localStorage.getItem('rosary_includeLuminous');
+	const savedShowBilingual = localStorage.getItem('rosary_showBilingual');
+
+	if (savedIncludeLuminous !== null) {
+		includeLuminous = savedIncludeLuminous === 'true';
+	}
+
+	if (savedShowBilingual !== null) {
+		showBilingual = savedShowBilingual === 'true';
+	}
+
+	// Recalculate mystery based on loaded includeLuminous value
+	todaysMystery = getMysteryForWeekday(new Date(), includeLuminous);
+	selectMystery(todaysMystery);
+
+	// Now allow saving to localStorage
+	hasLoadedFromStorage = true;
+
 	let scrollLock = null; // Track which side initiated the scroll: 'prayer', 'svg', or 'click'
 	let scrollLockTimeout = null;
 
@@ -736,10 +775,18 @@ onMount(() => {
 	padding-bottom: 2rem;
 }
 
+/* Reduce min-height in monolingual mode since content is shorter */
+.prayer-section.decade:has(:global(.prayer-wrapper.monolingual)) {
+	min-height: 30vh;
+}
+
 @media (max-width: 1023px) {
 	.prayer-section.decade {
 		padding-bottom: 1.5rem;
 	}
+	.prayer-section.decade:has(:global(.prayer-wrapper.monolingual)) {
+		min-height: 20vh;
+	}
 	.prayer-section {
 		padding: 0.5rem;
 	}
@@ -1270,6 +1317,14 @@ l536 389l-209 -629zM1671 934l-370 267l150 436l-378 -271l-371 271q8 -34 15 -68q10
 		</label>
 	</div>
 
+	<!-- Language Toggle -->
+	<div class="luminous-toggle">
+		<label>
+			<input type="checkbox" bind:checked={showBilingual} />
+			<span>Lateinisch und Deutsch anzeigen</span>
+		</label>
+	</div>
+
 	<div class="rosary-layout">
 		<!-- Sidebar: Rosary Visualization -->
 		<div class="rosary-sidebar">