refactor: improve rosary prayer styling and add closing prayers

- Add SalveRegina component with full bilingual Latin/German text
- Wrap FatimaGebet in paragraph tags for consistent styling with other prayers
- Combine final prayers (Gloria Patri, Fatima, Salve Regina) into single Abschluss section
- Change Ave Maria titles from German to Latin ('Ave Maria' instead of 'Gegrüßet seist du Maria')
- Add h3 titles to all Gloria Patri prayers for consistency
- Extend SVG viewBox to show more curve area at top and bottom
- Add CSS mask with gradients for smooth fade-out of circular connection curve
- Adjust viewBox dimensions for better bead visibility

src/lib/components/prayers/FatimaGebet.svelte

@@ -1,10 +1,12 @@
-<v lang="la">Ó mí Jésú, dímitte nóbís débita nostra,</v>
+<p>
-<v lang="de">O mein Jesus, verzeih' uns unsere Sünden,</v>
+	<v lang="la">Ó mí Jésú, dímitte nóbís débita nostra,</v>
-<v lang="la">líberá nós ab igne ínferní,</v>
+	<v lang="de">O mein Jesus, verzeih' uns unsere Sünden,</v>
-<v lang="de">bewahre uns vor den Feuern der Hölle</v>
+	<v lang="la">líberá nós ab igne ínferní,</v>
-<v lang="la">condúc in cælum omnés animás, </v>
+	<v lang="de">bewahre uns vor den Feuern der Hölle</v>
-<v lang="de">und führe alle Seelen in den Himmel,</v>
+	<v lang="la">condúc in cælum omnés animás, </v>
-<v lang="la">præsertim illás,</v>
+	<v lang="de">und führe alle Seelen in den Himmel,</v>
-<v lang="de">besonders jene,</v>
+	<v lang="la">præsertim illás,</v>
-<v lang="la">quæ maximé indigent misericordiá tuá. Amen.</v>
+	<v lang="de">besonders jene,</v>
-<v lang="de">die Deiner Barmherzigkeit am meisten bedürfen. Amen.</v>
+	<v lang="la">quæ maximé indigent misericordiá tuá. Amen.</v>
+	<v lang="de">die Deiner Barmherzigkeit am meisten bedürfen. Amen.</v>
+</p>

src/lib/components/prayers/SalveRegina.svelte

@@ -0,0 +1,27 @@
+<p>
+	<v lang="la">Salve, Regína,</v>
+	<v lang="de">Sei gegrüßt, o Königin,</v>
+	<v lang="la">máter misericórdiae;</v>
+	<v lang="de">Mutter der Barmherzigkeit,</v>
+	<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üßt!</v>
+</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>
+	<v lang="de">zu dir seufzen wir</v>
+	<v lang="la">geméntes et fléntes in hac lacrimárum válle.</v>
+	<v lang="de">trauernd und weinend in diesem Tal der Tränen.</v>
+	<v lang="la">Eia ergo, Advocáta nóstra,</v>
+	<v lang="de">Wohlan denn, unsre Fürsprecherin,</v>
+	<v lang="la">íllos túos misericórdes óculos ad nos convérte.</v>
+	<v lang="de">deine barmherzigen Augen wende zu uns</v>
+	<v lang="la">Et Jésum, benedíctum frúctum véntris túi,</v>
+	<v lang="de">und nach diesem Elend zeige uns Jesus,</v>
+	<v lang="la">nóbis post hoc exsílíum osténde.</v>
+	<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üße Jungfrau Maria.</v>
+</p>

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

@@ -8,6 +8,7 @@ import Paternoster from "$lib/components/prayers/Paternoster.svelte";
 import AveMaria from "$lib/components/prayers/AveMaria.svelte";
 import GloriaPatri from "$lib/components/prayers/GloriaPatri.svelte";
 import FatimaGebet from "$lib/components/prayers/FatimaGebet.svelte";
+import SalveRegina from "$lib/components/prayers/SalveRegina.svelte";
 
 // Mystery variations for each type of rosary
 const mysteries = {
@@ -183,6 +184,18 @@ onMount(() => {
 	scroll-behavior: smooth;
 	scrollbar-width: none; /* Firefox */
 	-ms-overflow-style: none; /* IE and Edge */
+	/* Mask to hide portions where curve goes off-screen (left side) */
+	/* Using radial gradient to create smooth fade at both connection points */
+	-webkit-mask-image:
+		linear-gradient(to right, transparent 0%, black 20%, black 100%),
+		radial-gradient(ellipse 200px 150px at 50% 0%, transparent 0%, black 40%),
+		radial-gradient(ellipse 200px 150px at 50% 100%, transparent 0%, black 40%);
+	-webkit-mask-composite: source-in;
+	mask-image:
+		linear-gradient(to right, transparent 0%, black 20%, black 100%),
+		radial-gradient(ellipse 200px 150px at 50% 0%, transparent 0%, black 40%),
+		radial-gradient(ellipse 200px 150px at 50% 100%, transparent 0%, black 40%);
+	mask-composite: intersect;
 }
 
 /* Hide scrollbar completely */
@@ -353,15 +366,14 @@ h1 {
 		<!-- Sidebar: Rosary Visualization -->
 		<div class="rosary-sidebar">
 			<div class="rosary-visualization" bind:this={svgContainer}>
-				<svg class="linear-rosary" viewBox="0 0 100 1700" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin meet" style="overflow:visible" >					<!-- Vertical chain -->
+				<svg class="linear-rosary" viewBox="-100 -100 250 2200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin meet">
-					<line x1="50" y1="34" x2="50" y2="1640" class="chain" />
+					<!-- Vertical chain -->
+					<line x1="50" y1="50" x2="50" y2="1655" class="chain" />
 
 					<!-- Circular connection: from last bead to medal (bezier curve) -->
-					<path d="M 50 1640 Q -3000 4000, -100 940 Q -1500 600, 50 235"
+					<path d="M 50 1640 Q -3000 4000, -3000 140 Q -1550 580, 50 235"
 						class="chain"
-						fill="none"
+						fill="none" />
-						stroke="5,5"
-						opacity="0.4" />
 
 					<!-- Cross (at top) -->
 					<g id="cross-section">
@@ -464,7 +476,7 @@ h1 {
 				bind:this={sectionElements.start1}
 				data-section="start1"
 			>
-				<h2>Gegrüßet seist du Maria</h2>
+				<h2>Ave Maria</h2>
 				<AveMaria
 					mysteryLatin="Jesus, qui fidem in nobis augeat"
 					mystery="Jesus, der in uns den Glauben vermehre"
@@ -477,7 +489,7 @@ h1 {
 				bind:this={sectionElements.start2}
 				data-section="start2"
 			>
-				<h2>Gegrüßet seist du Maria</h2>
+				<h2>Ave Maria</h2>
 				<AveMaria
 					mysteryLatin="Jesus, qui spem in nobis firmet"
 					mystery="Jesus, der in uns die Hoffnung stärke"
@@ -490,7 +502,7 @@ h1 {
 				bind:this={sectionElements.start3}
 				data-section="start3"
 			>
-				<h2>Gegrüßet seist du Maria</h2>
+				<h2>Ave Maria</h2>
 				<AveMaria
 					mysteryLatin="Jesus, qui caritatem in nobis accendat"
 					mystery="Jesus, der in uns die Liebe entzünde"
@@ -503,7 +515,7 @@ h1 {
 				bind:this={sectionElements.lbead2}
 				data-section="lbead2"
 			>
-				<h2>Gloria Patri</h2>
+				<h3>Gloria Patri</h3>
 				<GloriaPatri />
 				<h3>Vater unser</h3>
 				<Paternoster />
@@ -518,7 +530,7 @@ h1 {
 					data-section="secret{decadeNum}"
 				>
 					<h2>{decadeNum}. Gesätz</h2>
-					<h3>Gegrüßet seist du Maria <span class="repeat-count">(10×)</span></h3>
+					<h3>Ave Maria <span class="repeat-count">(10×)</span></h3>
 					<AveMaria
 						mysteryLatin={currentMysteriesLatin[decadeNum - 1]}
 						mystery={currentMysteries[decadeNum - 1]}
@@ -532,7 +544,7 @@ h1 {
 						bind:this={sectionElements[`secret${decadeNum}_transition`]}
 						data-section="secret{decadeNum}_transition"
 					>
-						<h2>Gloria Patri</h2>
+						<h3>Gloria Patri</h3>
 						<GloriaPatri />
 
 						<h3>Das Fatima Gebet <span class="repeat-count">(optional)</span></h3>
@@ -544,26 +556,22 @@ h1 {
 				{/if}
 			{/each}
 
-			<!-- Final transition after 5th decade -->
+			<!-- Final prayers after 5th decade -->
 			<div
 				class="prayer-section"
 				bind:this={sectionElements.final_transition}
 				data-section="final_transition"
 			>
-				<h2>Gloria Patri</h2>
+				<h2>Abschluss</h2>
+
+				<h3>Gloria Patri</h3>
 				<GloriaPatri />
 
 				<h3>Das Fatima Gebet <span class="repeat-count">(optional)</span></h3>
 				<FatimaGebet />
-			</div>
 
-			<!-- Closing Prayer -->
-			<div class="prayer-section">
-				<h2>Abschluss</h2>
 				<h3>Salve Regina</h3>
-				<p class="prayer-text">
+				<SalveRegina />
-					Sei gegrüßt, o Königin, Mutter der Barmherzigkeit, unser Leben, unsre Wonne und unsere Hoffnung, sei gegrüßt...
-				</p>
 			</div>
 		</div>
 	</div>