css: replace hardcoded values with design tokens

Replace 30 border-radius: 1000px → var(--radius-pill), 6 border-radius: 20px → var(--radius-card), 21 transition: 100ms → var(--transition-fast), and 32 transition: 200ms → var(--transition-normal) across the codebase.
2026-02-16 09:39:30 +01:00
parent 4191012cf1
commit 0e9daf296d
33 changed files with 282 additions and 92 deletions
--- a/scripts/generate-mystery-verses.ts
+++ b/scripts/generate-mystery-verses.ts
@@ -5,7 +5,7 @@
 import { writeFileSync } from 'fs';
 import { resolve } from 'path';
 import { lookupReference } from '../src/lib/server/bible';
-import { mysteryReferences, mysteryReferencesEnglish } from '../src/lib/data/mysteryDescriptions';
+import { mysteryReferences, mysteryReferencesEnglish, theologicalVirtueReference, theologicalVirtueReferenceEnglish } from '../src/lib/data/mysteryDescriptions';
 import type { MysteryDescription, VerseData } from '../src/lib/data/mysteryDescriptions';

 function generateVerseData(
@@ -54,12 +54,33 @@ const enPath = resolve('static/drb.tsv');
 const mysteryVerseDataDe = generateVerseData(mysteryReferences, dePath);
 const mysteryVerseDataEn = generateVerseData(mysteryReferencesEnglish, enPath);

+// Generate theological virtue (1 Cor 13) verse data
+function generateSingleRef(ref: { title: string; reference: string }, tsvPath: string): MysteryDescription {
+	const lookup = lookupReference(ref.reference, tsvPath);
+	let text = '';
+	let verseData: VerseData | null = null;
+	if (lookup && lookup.verses.length > 0) {
+		text = `«${lookup.verses.map((v) => v.text).join(' ')}»`;
+		verseData = { book: lookup.book, chapter: lookup.chapter, verses: lookup.verses };
+	} else {
+		console.warn(`No verses found for: ${ref.reference} in ${tsvPath}`);
+	}
+	return { title: ref.title, reference: ref.reference, text, verseData };
+}
+
+const theologicalVirtueDataDe = generateSingleRef(theologicalVirtueReference, dePath);
+const theologicalVirtueDataEn = generateSingleRef(theologicalVirtueReferenceEnglish, enPath);
+
 const output = `// Auto-generated by scripts/generate-mystery-verses.ts — do not edit manually
 import type { MysteryDescription } from './mysteryDescriptions';

 export const mysteryVerseDataDe: Record<string, MysteryDescription[]> = ${JSON.stringify(mysteryVerseDataDe, null, '\t')};

 export const mysteryVerseDataEn: Record<string, MysteryDescription[]> = ${JSON.stringify(mysteryVerseDataEn, null, '\t')};
+
+export const theologicalVirtueVerseDataDe: MysteryDescription = ${JSON.stringify(theologicalVirtueDataDe, null, '\t')};
+
+export const theologicalVirtueVerseDataEn: MysteryDescription = ${JSON.stringify(theologicalVirtueDataEn, null, '\t')};
 `;

 const outPath = resolve('src/lib/data/mysteryVerseData.ts');
--- a/src/lib/components/ActionButton.svelte
+++ b/src/lib/components/ActionButton.svelte
@@ -13,9 +13,9 @@ right:0;
 width: 1rem;
 height: 1rem;
 padding: 2rem;
-border-radius: 1000px;
+border-radius: var(--radius-pill);
 margin: 2rem;
-transition: 200ms;
+transition: var(--transition-normal);
 background-color: var(--red);
 display: grid;
 justify-content: center;
--- a/src/lib/components/FavoriteButton.svelte
+++ b/src/lib/components/FavoriteButton.svelte
@@ -43,7 +43,7 @@
    all: unset;
    font-size: 1.5rem;
    cursor: pointer;
-    transition: 100ms;
+    transition: var(--transition-fast);
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
    position: absolute;
    bottom: 0.5em;
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -119,7 +119,7 @@ nav[hidden]{
 	font-family: sans-serif;
 	font-size: 1.2rem;
 	color: inherit;
-	border-radius: 1000px;
+	border-radius: var(--radius-pill);
 	padding: 0.5rem 0.75rem;
 }
 :global(a.entry),
@@ -130,7 +130,7 @@ nav[hidden]{
 	font-family: sans-serif;
 	font-size: 1.2rem;
 	color: white !important;
-	border-radius: 1000px;
+	border-radius: var(--radius-pill);
 	padding: 0.5rem 0.75rem;
 }

@@ -235,7 +235,7 @@ footer{
 	.nav_button svg{
 		width: 100%;
 		height: 100%;
-		transition: 100ms;
+		transition: var(--transition-fast);
 	}
 	.nav_button:focus{
 		fill: var(--red);
--- a/src/lib/components/LinksGrid.svelte
+++ b/src/lib/components/LinksGrid.svelte
@@ -20,7 +20,7 @@
 :global(a){
 	text-decoration: unset;
 	color: var(--nord0);
-	transition: 200ms;
+	transition: var(--transition-normal);
 }
 :global(.links_grid a:hover){
 	box-shadow: 1em 1em 2em 1em rgba(0,0,0, 0.3);
@@ -43,7 +43,7 @@
 	justify-content: center;
 	text-decoration: unset;
 	color: var(--nord0);
-	transition: 200ms;
+	transition: var(--transition-normal);
 	width: 100%;
 	padding: 1rem;
 	position: relative;
--- a/src/lib/components/SearchInput.svelte
+++ b/src/lib/components/SearchInput.svelte
@@ -20,7 +20,7 @@ input {
 	background: var(--nord0);
 	color: #fff;
 	padding: 0.7rem 2rem;
-	border-radius: 1000px;
+	border-radius: var(--radius-pill);
 	width: 100%;
 }
 input::placeholder {
@@ -35,7 +35,7 @@ input::placeholder {
 	font-size: 1.6rem;
 	display: flex;
 	align-items: center;
-	transition: 100ms;
+	transition: var(--transition-fast);
 	filter: drop-shadow(0.4em 0.5em 0.4em rgba(0,0,0,0.4));
 }

--- a/src/lib/components/Symbol.svelte
+++ b/src/lib/components/Symbol.svelte
@@ -5,7 +5,7 @@
 		--icon_fill: var(--nord4);
 	}
 	svg{
-		transition: 100ms;
+		transition: var(--transition-fast);
 		height: 3em;
 	}
 	svg:hover,
--- a/src/lib/components/TagBall.svelte
+++ b/src/lib/components/TagBall.svelte
@@ -7,7 +7,7 @@ a{
 	text-decoration: none;
 	padding: 2rem;
 	border-radius: 1000000px;
-	transition: 100ms;
+	transition: var(--transition-fast);
 	font-size: 2rem;
 	color: white;
 }
--- a/src/lib/components/UserHeader.svelte
+++ b/src/lib/components/UserHeader.svelte
@@ -97,7 +97,7 @@
 		text-decoration: none;
 		color: white;
 		text-align: left;
-		transition: 100ms;
+		transition: var(--transition-fast);
 	}
 	#options li:hover a{
 		color: var(--red);
--- a/src/lib/components/faith/BibleModal.svelte
+++ b/src/lib/components/faith/BibleModal.svelte
@@ -188,9 +188,9 @@
    border: none;
    cursor: pointer;
    padding: 1rem;
-    border-radius: 1000px;
+    border-radius: var(--radius-pill);
    color: white;
-    transition: 200ms;
+    transition: var(--transition-normal);
    box-shadow: 0 0 1em 0.2em rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
@@ -248,6 +248,7 @@
    gap: 0.75rem;
    line-height: 1.6;
    color: var(--nord4);
+    margin: 0;
  }

  @media(prefers-color-scheme: light) {
--- a/src/lib/components/recipes/BaseRecipeSelector.svelte
+++ b/src/lib/components/recipes/BaseRecipeSelector.svelte
@@ -123,7 +123,7 @@ dialog h2 {
 	margin-top: 2rem;
 	max-width: 600px;
 	padding: 2rem;
-	border-radius: 20px;
+	border-radius: var(--radius-card);
 	background-color: var(--blue);
 	color: white;
 	box-shadow: 0 0 1em 0.2em rgba(0,0,0,0.3);
@@ -141,12 +141,12 @@ dialog h2 {
 	width: 100%;
 	padding: 0.5em 1em;
 	margin-top: 0.5em;
-	border-radius: 1000px;
+	border-radius: var(--radius-pill);
 	border: 2px solid var(--nord4);
 	background-color: white;
 	color: var(--nord0);
 	font-size: 1rem;
-	transition: 100ms;
+	transition: var(--transition-fast);
 }

 .selector-content select:hover,
@@ -176,10 +176,10 @@ dialog h2 {
 .button-group button {
 	padding: 0.75em 2em;
 	font-size: 1.1rem;
-	border-radius: 1000px;
+	border-radius: var(--radius-pill);
 	border: none;
 	cursor: pointer;
-	transition: 200ms;
+	transition: var(--transition-normal);
 	font-weight: bold;
 }

--- a/src/lib/components/recipes/CardAdd.svelte
+++ b/src/lib/components/recipes/CardAdd.svelte
@@ -133,12 +133,12 @@ function remove_on_enter(event: KeyboardEvent, tag: string) {
 	font-family: sans-serif;
 	width: var(--card-width);
 	aspect-ratio: 4/7;
-	border-radius: 20px;
+	border-radius: var(--radius-card);
 	background-size: contain;
 	display: flex;
 	flex-direction: column;
 	justify-content: end;
-	transition: 200ms;
+	transition: var(--transition-normal);
 	background-color:  var(--blue);
 	box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.3);
 	z-index: 0;
@@ -155,7 +155,7 @@ function remove_on_enter(event: KeyboardEvent, tag: string) {
 	justify-content: center;
 	align-items: center;
 	border-radius: 20px 20px 0 0 ;
-	transition: 200ms;
+	transition: var(--transition-normal);
 }
 .img_label_wrapper:hover{
 	background-color: var(--red);
@@ -169,7 +169,7 @@ function remove_on_enter(event: KeyboardEvent, tag: string) {
 	top:0;
 	left: 0;
 	border-radius: 20px 20px 0 0;
-	transition: 200ms;
+	transition: var(--transition-normal);
 }
 .img_label_wrapper:hover .delete{
 	opacity: 100%;
@@ -178,7 +178,7 @@ function remove_on_enter(event: KeyboardEvent, tag: string) {
 	width: 100px;
 	height: 100px;
 	fill: white;
-	transition: 200ms;
+	transition: var(--transition-normal);
 }
 .delete{
 	cursor: pointer;
@@ -188,7 +188,7 @@ function remove_on_enter(event: KeyboardEvent, tag: string) {
 	left: 2rem;
 	opacity: 0%;
 	z-index: 4;
-	transition:200ms;
+	transition: var(--transition-normal);
 }
 .delete:hover{
 	transform: scale(1.2, 1.2);
@@ -220,14 +220,14 @@ input::placeholder{
 	text-align:center;
 	width: 2.6rem;
 	aspect-ratio: 1/1;
-	transition: 100ms;
+	transition: var(--transition-fast);
 	position: absolute;
 	font-size: 1.5rem;
 	top:-0.5em;
 	right:-0.5em;
 	padding: 0.25em;
 	background-color: var(--nord6);
-	border-radius:1000px;
+	border-radius: var(--radius-pill);
 	box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.6);
 }
 .card .icon:hover,
@@ -259,7 +259,7 @@ input::placeholder{
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
-	transition: 100ms;
+	transition: var(--transition-fast);
 }
 .card .name{
 	all: unset;
@@ -306,7 +306,7 @@ input::placeholder{
 	padding-inline: 1em;
 	line-height: 1.5em;
 	margin-bottom: 0.5em;
-	transition: 100ms;
+	transition: var(--transition-fast);
 	box-shadow: 0.2em 0.2em 0.2em 0.05em rgba(0, 0, 0, 0.3);
 }
 .card .tag:hover,
@@ -330,8 +330,8 @@ input::placeholder{
 	width: 10rem;
 	background-color: var(--nord0);
 	padding-inline: 1em;
-	border-radius: 1000px;
-	transition: 100ms;
+	border-radius: var(--radius-pill);
+	transition: var(--transition-fast);

 }
 .card .title .category:hover,
--- a/src/lib/components/recipes/CreateIngredientList.svelte
+++ b/src/lib/components/recipes/CreateIngredientList.svelte
@@ -398,11 +398,11 @@ input.heading{
 	padding-inline: 2rem;
 	font-size: 1.5rem;
 	width: 100%;
-	border-radius: 1000px;
+	border-radius: var(--radius-pill);
 	color: white;
 	justify-content: center;
 	align-items: center;
-	transition: 200ms;
+	transition: var(--transition-normal);
 }
 input.heading:hover{
 	background-color: var(--nord1);
@@ -412,7 +412,7 @@ input.heading:hover{
 	position: relative;
 	width: 300px;
 	margin-inline: auto;
-	transition: 200ms;
+	transition: var(--transition-normal);
 }
 .heading_wrapper:hover
 {
@@ -430,8 +430,8 @@ input.heading:hover{
 	position: relative;
 	margin-block: 3rem;
 	width: 90%;
-	border-radius: 20px;
-	transition: 200ms;
+	border-radius: var(--radius-card);
+	transition: var(--transition-normal);
 }
 .shadow{
 	box-shadow: 0 0 1em 0.2em rgba(0,0,0,0.3);
@@ -457,7 +457,7 @@ input.heading:hover{
 	border-radius: 1000000px;
 	width: 23ch;
 	padding: 0.5em 1em;
-	transition: 100ms;
+	transition: var(--transition-fast);
 	box-shadow: 0.5em 0.5em 1em 0.4em rgba(0,0,0,0.3);
 }
 .category:hover{
@@ -481,18 +481,18 @@ input.heading:hover{
 	font-size: 1.2rem;
 	padding: 2rem;
 	padding-top: 2.5rem;
-	border-radius: 20px;
+	border-radius: var(--radius-card);
 	background-color: var(--blue);
 	color: #bbb;
-	transition: 200ms;
+	transition: var(--transition-normal);
 	gap: 0.5rem;
 }
 .add_ingredient input{
 	border: 2px solid var(--nord4);
 	color: var(--nord4);
-	border-radius: 1000px;
+	border-radius: var(--radius-pill);
 	padding: 0.5em 1em;
-	transition: 100ms;
+	transition: var(--transition-fast);
 }
 .add_ingredient input:hover,
 .add_ingredient input:focus-visible
@@ -569,7 +569,7 @@ dialog h2{
 	border: none;
 	padding: 0;
 	margin: 0;
-	transition: 200ms;
+	transition: var(--transition-normal);
 }
 .move_buttons_container button:hover{
 	scale: 1.4;
@@ -611,10 +611,10 @@ h3{
 }
 .list_wrapper p[contenteditable]{
 	border: 2px solid grey;
-	border-radius: 1000px;
+	border-radius: var(--radius-pill);
 	padding: 0.25em 1em;
 	background-color: white;
-	transition: 200ms;
+	transition: var(--transition-normal);
 }
 .list_wrapper p[contenteditable]:hover,
 .list_wrapper p[contenteditable]:focus-within{
@@ -703,12 +703,12 @@ h3{
 	margin-block: 1rem;
 	padding: 1em 2em;
 	font-size: 1.1rem;
-	border-radius: 1000px;
+	border-radius: var(--radius-pill);
 	background-color: var(--nord9);
 	color: white;
 	border: none;
 	cursor: pointer;
-	transition: 200ms;
+	transition: var(--transition-normal);
 	box-shadow: 0 0 0.5em 0.1em rgba(0,0,0,0.2);
 }

--- a/src/lib/components/recipes/CreateStepList.svelte
+++ b/src/lib/components/recipes/CreateStepList.svelte
@@ -401,7 +401,7 @@ export function update_step_position(list_index, step_index, direction){
 	border: none;
 	padding: 0;
 	margin: 0;
-	transition: 200ms;
+	transition: var(--transition-normal);
 }
 .move_buttons_container button:hover{
 	scale: 1.4;
@@ -440,11 +440,11 @@ input.heading{
 	padding-inline: 2rem;
 	font-size: 1.5rem;
 	width: 100%;
-	border-radius: 1000px;
+	border-radius: var(--radius-pill);
 	color: white;
 	justify-content: center;
 	align-items: center;
-	transition: 200ms;
+	transition: var(--transition-normal);
 }
 input.heading:hover,
 input.heading:focus-visible
@@ -456,7 +456,7 @@ input.heading:focus-visible
 	position: relative;
 	width: min(300px, 95dvw);
 	margin-inline: auto;
-	transition: 200ms;
+	transition: var(--transition-normal);
 }
 .heading_wrapper:hover,
 .heading_wrapper:focus-visible
@@ -474,8 +474,8 @@ input.heading:focus-visible
 	position: relative;
 	margin-block: 3rem;
 	width: 90%;
-	border-radius: 20px;
-	transition: 200ms;
+	border-radius: var(--radius-card);
+	transition: var(--transition-normal);
 	background-color: var(--blue);
 	padding: 1.5rem 2rem;
 }
@@ -503,7 +503,7 @@ dialog .adder{
 	border-radius: 1000000px;
 	width: 23ch;
 	padding: 0.5em 1em;
-	transition: 100ms;
+	transition: var(--transition-fast);
 	box-shadow: 0.5em 0.5em 1em 0.4em rgba(0,0,0,0.3);
 }
 .category:hover,
@@ -522,12 +522,12 @@ dialog .adder{
 	font-family: sans-serif;
 	width: 100%;
 	font-size: 1.2rem;
-	border-radius: 20px;
+	border-radius: var(--radius-card);
 	border: 2px solid var(--nord4);
 	border-radius: 30px;
 	padding: 0.5em 1em;
 	color: var(--nord4);
-	transition: 100ms;
+	transition: var(--transition-fast);
 }
 .add_step p:hover,
 .add_step p:focus-visible
@@ -543,7 +543,7 @@ dialog{
 	background-color: rgba(255,255,255, 0.001);
 	border: unset;
 	margin: 0;
-	transition: 200ms;
+	transition: var(--transition-normal);
 }
 dialog .adder{
 	margin-top: 5rem;
@@ -647,10 +647,10 @@ h3{
 	display: inline;
 	padding: 0.25em 1em;
 	border: 2px solid grey;
-	border-radius: 1000px;
+	border-radius: var(--radius-pill);
 }
 .additional_info div:has(p[contenteditable]){
-	transition: 200ms;
+	transition: var(--transition-normal);
 	display: inline;
 }
 .additional_info div:has(p[contenteditable]):hover,
@@ -730,12 +730,12 @@ h3{
 	margin-block: 1rem;
 	padding: 1em 2em;
 	font-size: 1.1rem;
-	border-radius: 1000px;
+	border-radius: var(--radius-pill);
 	background-color: var(--nord9);
 	color: white;
 	border: none;
 	cursor: pointer;
-	transition: 200ms;
+	transition: var(--transition-normal);
 	box-shadow: 0 0 0.5em 0.1em rgba(0,0,0,0.2);
 }

--- a/src/lib/components/recipes/Icon.svelte
+++ b/src/lib/components/recipes/Icon.svelte
@@ -9,7 +9,7 @@
 		text-decoration: none;
 		padding: 0.5em;
 		background-color: var(--nord4);
-		border-radius: 1000px;
+		border-radius: var(--radius-pill);
    		box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2);
 	}
 	@media (prefers-color-scheme: dark) {
--- a/src/lib/components/recipes/IconLayout.svelte
+++ b/src/lib/components/recipes/IconLayout.svelte
@@ -31,7 +31,7 @@
 		text-decoration: none;
 		padding: 0.5em;
 		background-color: var(--nord4);
-		border-radius: 1000px;
+		border-radius: var(--radius-pill);
    		box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2);
 	}
 	a:hover,
--- a/src/lib/components/recipes/RecipeEditor.svelte
+++ b/src/lib/components/recipes/RecipeEditor.svelte
@@ -59,7 +59,7 @@ input.temp{
 	display: block;
 	margin: 1rem auto;
 	padding: 0.2em 1em;
-	border-radius: 1000px;
+	border-radius: var(--radius-pill);
 	background-color: var(--nord4);

 }
--- a/src/lib/components/recipes/Search.svelte
+++ b/src/lib/components/recipes/Search.svelte
@@ -311,7 +311,7 @@ input#search {
  background: var(--nord0);
  color: #fff;
  padding: 0.7rem 2rem;
-  border-radius: 1000px;
+  border-radius: var(--radius-pill);
  width: 100%;
 }
 input::placeholder{
@@ -326,7 +326,7 @@ input::placeholder{
  font-size: 1.6rem;
  display: flex;
  align-items: center;
-  transition: 100ms;
+  transition: var(--transition-fast);
  filter: drop-shadow(0.4em  0.5em 0.4em rgba(0,0,0,0.4))
 }

--- a/src/lib/components/recipes/SeasonLayout.svelte
+++ b/src/lib/components/recipes/SeasonLayout.svelte
@@ -29,11 +29,11 @@
 a.month{
 	text-decoration: unset;
 	font-family: sans-serif;
-	border-radius: 1000px;
+	border-radius: var(--radius-pill);
 	background-color: var(--blue);
 	color: var(--nord5);
 	padding: 0.5em;
-	transition: 100ms;
+	transition: var(--transition-fast);
 	min-width: 4em;
 	text-align: center;
 }
--- a/src/lib/components/recipes/SeasonSelect.svelte
+++ b/src/lib/components/recipes/SeasonSelect.svelte
@@ -45,15 +45,15 @@ label{
 	padding: 0.25em 1em;
 	margin-inline: 0.1em;
 	line-height: 2em;
-	border-radius: 1000px;
+	border-radius: var(--radius-pill);
 	cursor: pointer;
 	position: relative;
-	transition: 100ms;
+	transition: var(--transition-fast);
 	user-select: none;
 }

 .checkbox_container{
-	transition: 100ms;
+	transition: var(--transition-fast);
 }
 .checkbox_container:hover,
 .checkbox_container:focus-within
--- a/src/lib/components/recipes/TagChip.svelte
+++ b/src/lib/components/recipes/TagChip.svelte
@@ -16,7 +16,7 @@
 	.tag-chip {
 		all: unset;
 		padding: 0.4rem 0.8rem;
-		border-radius: 1000px;
+		border-radius: var(--radius-pill);
 		font-size: 0.9rem;
 		cursor: pointer;
 		transition: all 100ms ease;
--- a/src/lib/components/recipes/TitleImgParallax.svelte
+++ b/src/lib/components/recipes/TitleImgParallax.svelte
@@ -87,7 +87,7 @@
  width: min(1000px, 100dvw);
  z-index: -1;
  opacity: 0;
-  transition: 200ms;
+  transition: var(--transition-normal);
  height: max(60dvh,600px);
  object-fit: cover;
  object-position: 50% 20%;
--- a/src/lib/css/action_button.css
+++ b/src/lib/css/action_button.css
@@ -7,10 +7,10 @@
 	border: none;
 	cursor: pointer;
 	background-color: var(--red);
-	transition: 200ms;
+	transition: var(--transition-normal);
 	box-shadow: 0 0 1em 0.2em rgba(0,0,0,0.3);
 	padding: 1rem;
-	border-radius: 1000px;
+	border-radius: var(--radius-pill);
 	display: flex;
 	justify-content: center;
 	align-items: center;
--- a/src/lib/data/mysteryDescriptions.ts
+++ b/src/lib/data/mysteryDescriptions.ts
@@ -106,6 +106,17 @@ export const mysteryReferences = {
  ]
 } as const;

+// Reference for the three opening Ave Marias (Faith, Hope, Love)
+export const theologicalVirtueReference = {
+  title: "Das Hohelied der Liebe",
+  reference: "1 Kor 13, 1-13"
+} as const;
+
+export const theologicalVirtueReferenceEnglish = {
+  title: "The Hymn to Love",
+  reference: "1 Cor 13:1-13"
+} as const;
+
 export const mysteryReferencesEnglish = {
  lichtreichen: [
    {
--- a/src/lib/data/mysteryVerseData.ts
+++ b/src/lib/data/mysteryVerseData.ts
@@ -1046,3 +1046,131 @@ export const mysteryVerseDataEn: Record<string, MysteryDescription[]> = {
 		}
 	]
 };
+
+export const theologicalVirtueVerseDataDe: MysteryDescription = {
+	"title": "Das Hohelied der Liebe",
+	"reference": "1 Kor 13, 1-13",
+	"text": "«Wenn ich mit den Zungen der Menschen und Engel rede, aber die Liebe nicht habe, so bin ich wie ein tönendes Erz oder eine klingende Schelle geworden. Und wenn ich die Gabe der Weissagung habe, und kenne alle Geheimnisse und alle Wissenschaft, und wenn ich allen Glauben habe, so dass ich Berge versetzen könnte, die Liebe aber nicht habe, so bin ich nichts. Und wenn ich alle meine Habe zur Speisung der Armen austeile, und wenn ich meinen Leib dahingebe, dass ich verbrannt werde, die Liebe aber nicht habe, so nützt es mir nichts. Die Liebe ist langmütig, ist gütig; die Liebe eifert nicht, sie handelt nicht unbescheiden, sie bläht sich nicht auf; sie ist nicht ehrsüchtig, sucht nicht das ihre, sie lässt sich nicht erbittern, sie rechnet das Böse nicht an; sie freut sich nicht der Ungerechtigkeit, sie freut sich aber mit der Wahrheit; alles erträgt sie, alles glaubt sie, alles hofft sie, alles übersteht sie. Die Liebe hört nie auf, wenn auch die Weissagungen abgetan werden oder die Sprachen ein Ende nehmen, und die Erkenntnis vergehen wird. Denn unser Erkennen ist Stückwerk, und unser Weissagen ist Stückwerk. Wenn aber das Vollkommene kommt, dann wird das, was Stückwerk ist, abgetan werden. Als ich ein Kind war, redete ich wie ein Kind, dachte wie ein Kind, urteilte wie ein Kind; als ich aber Mann ward, legte ich ab, was des Kindes war. Jetzt sehen wir durch einen Spiegel im Rätsel, alsdann aber von Angesicht zu Angesicht. Jetzt ist mein Erkennen Stückwerk, dann aber werde ich erkennen, so wie auch ich erkannt bin. Nun aber bleiben Glaube, Hoffnung Liebe, diese drei; das größte aber unter diesen ist die Liebe.»",
+	"verseData": {
+		"book": "1 Korinther",
+		"chapter": 13,
+		"verses": [
+			{
+				"verse": 1,
+				"text": "Wenn ich mit den Zungen der Menschen und Engel rede, aber die Liebe nicht habe, so bin ich wie ein tönendes Erz oder eine klingende Schelle geworden."
+			},
+			{
+				"verse": 2,
+				"text": "Und wenn ich die Gabe der Weissagung habe, und kenne alle Geheimnisse und alle Wissenschaft, und wenn ich allen Glauben habe, so dass ich Berge versetzen könnte, die Liebe aber nicht habe, so bin ich nichts."
+			},
+			{
+				"verse": 3,
+				"text": "Und wenn ich alle meine Habe zur Speisung der Armen austeile, und wenn ich meinen Leib dahingebe, dass ich verbrannt werde, die Liebe aber nicht habe, so nützt es mir nichts."
+			},
+			{
+				"verse": 4,
+				"text": "Die Liebe ist langmütig, ist gütig; die Liebe eifert nicht, sie handelt nicht unbescheiden, sie bläht sich nicht auf;"
+			},
+			{
+				"verse": 5,
+				"text": "sie ist nicht ehrsüchtig, sucht nicht das ihre, sie lässt sich nicht erbittern, sie rechnet das Böse nicht an;"
+			},
+			{
+				"verse": 6,
+				"text": "sie freut sich nicht der Ungerechtigkeit, sie freut sich aber mit der Wahrheit;"
+			},
+			{
+				"verse": 7,
+				"text": "alles erträgt sie, alles glaubt sie, alles hofft sie, alles übersteht sie."
+			},
+			{
+				"verse": 8,
+				"text": "Die Liebe hört nie auf, wenn auch die Weissagungen abgetan werden oder die Sprachen ein Ende nehmen, und die Erkenntnis vergehen wird."
+			},
+			{
+				"verse": 9,
+				"text": "Denn unser Erkennen ist Stückwerk, und unser Weissagen ist Stückwerk."
+			},
+			{
+				"verse": 10,
+				"text": "Wenn aber das Vollkommene kommt, dann wird das, was Stückwerk ist, abgetan werden."
+			},
+			{
+				"verse": 11,
+				"text": "Als ich ein Kind war, redete ich wie ein Kind, dachte wie ein Kind, urteilte wie ein Kind; als ich aber Mann ward, legte ich ab, was des Kindes war."
+			},
+			{
+				"verse": 12,
+				"text": "Jetzt sehen wir durch einen Spiegel im Rätsel, alsdann aber von Angesicht zu Angesicht. Jetzt ist mein Erkennen Stückwerk, dann aber werde ich erkennen, so wie auch ich erkannt bin."
+			},
+			{
+				"verse": 13,
+				"text": "Nun aber bleiben Glaube, Hoffnung Liebe, diese drei; das größte aber unter diesen ist die Liebe."
+			}
+		]
+	}
+};
+
+export const theologicalVirtueVerseDataEn: MysteryDescription = {
+	"title": "The Hymn to Love",
+	"reference": "1 Cor 13:1-13",
+	"text": "«If I speak with the tongues of men and of angels, and have not charity, I am become as sounding brass, or a tinkling cymbal. And if I should have prophecy and should know all mysteries and all knowledge, and if I should have all faith, so that I could remove mountains, and have not charity, I am nothing. And if I should distribute all my goods to feed the poor, and if I should deliver my body to be burned, and have not charity, it profiteth me nothing. Charity is patient, is kind: charity envieth not, dealeth not perversely, is not puffed up, Is not ambitious, seeketh not her own, is not provoked to anger, thinketh no evil: Rejoiceth not in iniquity, but rejoiceth with the truth: Beareth all things, believeth all things, hopeth all things, endureth all things. Charity never falleth away: whether prophecies shall be made void or tongues shall cease or knowledge shall be destroyed. For we know in part: and we prophesy in part. But when that which is perfect is come, that which is in part shall be done away. When I was a child, I spoke as a child, I understood as a child, I thought as a child. But, when I became a man, I put away the things of a child. We see now through a glass in a dark manner: but then face to face. Now I know in part: but then I shall know even as I am known. And now there remain faith, hope, and charity, these three: but the greatest of these is charity.»",
+	"verseData": {
+		"book": "1 Corinthians",
+		"chapter": 13,
+		"verses": [
+			{
+				"verse": 1,
+				"text": "If I speak with the tongues of men and of angels, and have not charity, I am become as sounding brass, or a tinkling cymbal."
+			},
+			{
+				"verse": 2,
+				"text": "And if I should have prophecy and should know all mysteries and all knowledge, and if I should have all faith, so that I could remove mountains, and have not charity, I am nothing."
+			},
+			{
+				"verse": 3,
+				"text": "And if I should distribute all my goods to feed the poor, and if I should deliver my body to be burned, and have not charity, it profiteth me nothing."
+			},
+			{
+				"verse": 4,
+				"text": "Charity is patient, is kind: charity envieth not, dealeth not perversely, is not puffed up,"
+			},
+			{
+				"verse": 5,
+				"text": "Is not ambitious, seeketh not her own, is not provoked to anger, thinketh no evil:"
+			},
+			{
+				"verse": 6,
+				"text": "Rejoiceth not in iniquity, but rejoiceth with the truth:"
+			},
+			{
+				"verse": 7,
+				"text": "Beareth all things, believeth all things, hopeth all things, endureth all things."
+			},
+			{
+				"verse": 8,
+				"text": "Charity never falleth away: whether prophecies shall be made void or tongues shall cease or knowledge shall be destroyed."
+			},
+			{
+				"verse": 9,
+				"text": "For we know in part: and we prophesy in part."
+			},
+			{
+				"verse": 10,
+				"text": "But when that which is perfect is come, that which is in part shall be done away."
+			},
+			{
+				"verse": 11,
+				"text": "When I was a child, I spoke as a child, I understood as a child, I thought as a child. But, when I became a man, I put away the things of a child."
+			},
+			{
+				"verse": 12,
+				"text": "We see now through a glass in a dark manner: but then face to face. Now I know in part: but then I shall know even as I am known."
+			},
+			{
+				"verse": 13,
+				"text": "And now there remain faith, hope, and charity, these three: but the greatest of these is charity."
+			}
+		]
+	}
+};
--- a/src/lib/server/bible.ts
+++ b/src/lib/server/bible.ts
@@ -38,11 +38,12 @@ export function loadVersesFromFile(tsvPath?: string): BibleVerse[] {

 function parseReference(reference: string) {
 	const match = reference.match(
-		/^([A-Za-zäöüÄÖÜß]+)\s*(\d+)[\s,:]+(\d+)(?:[-:](\d+))?$/
+		/^(\d?\s?[A-Za-zäöüÄÖÜß]+)\s*(\d+)[\s,:]+(\d+)(?:[-:](\d+))?$/
 	);
 	if (!match) return null;

-	const [, bookRef, chapterStr, startVerseStr, endVerseStr] = match;
+	const [, rawBookRef, chapterStr, startVerseStr, endVerseStr] = match;
+	const bookRef = rawBookRef.replace(/\s/g, '');

 	return {
 		bookRef,
--- a/src/routes/(main)/+page.svelte
+++ b/src/routes/(main)/+page.svelte
@@ -67,7 +67,7 @@
 	gap: 2rem;
 }
 .hero img{
-	border-radius: 1000px;
+	border-radius: var(--radius-pill);
 	margin: 1rem;
 	width: clamp(100px, 300px, 50vw);
 	object-fit: cover;
--- a/src/routes/(main)/register/+page.svelte
+++ b/src/routes/(main)/register/+page.svelte
@@ -19,9 +19,9 @@ form button {
 	border: none;
 	padding: 0.5em 1em;
 	font-size: 1.3em;
-	border-radius: 1000px;
+	border-radius: var(--radius-pill);
 	margin-top: 1em;
-	transition: 100ms;
+	transition: var(--transition-fast);
 	cursor: pointer;
 }
 form button:hover, form button:focus-visible {
--- a/src/routes/(main)/settings/+page.svelte
+++ b/src/routes/(main)/settings/+page.svelte
@@ -26,9 +26,9 @@ form button {
 	border: none;
 	padding: 0.5em 1em;
 	font-size: 1.3em;
-	border-radius: 1000px;
+	border-radius: var(--radius-pill);
 	margin-top: 1em;
-	transition: 100ms;
+	transition: var(--transition-fast);
 	cursor: pointer;
 }
 form button:hover, form button:focus-visible {
--- a/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
+++ b/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
@@ -16,6 +16,7 @@ import RosaryFinalPrayer from "$lib/components/faith/prayers/RosaryFinalPrayer.s
 import MichaelGebet from "$lib/components/faith/prayers/MichaelGebet.svelte";
 import CounterButton from "$lib/components/CounterButton.svelte";
 import BibleModal from "$lib/components/faith/BibleModal.svelte";
+import { theologicalVirtueVerseDataDe, theologicalVirtueVerseDataEn } from "$lib/data/mysteryVerseData";
 import Toggle from "$lib/components/Toggle.svelte";
 import LanguageToggle from "$lib/components/faith/LanguageToggle.svelte";
 import StreakCounter from "$lib/components/faith/StreakCounter.svelte";
@@ -264,6 +265,9 @@ function handleCitationClick(reference, title = '', verseData = null) {
 	showModal = true;
 }

+// 1 Cor 13 reference for the three theological virtue Ave Marias
+const theologicalVirtueData = $derived(isEnglish ? theologicalVirtueVerseDataEn : theologicalVirtueVerseDataDe);
+
 const pos = sectionPositions;

 onMount(() => {
@@ -799,6 +803,14 @@ h1 {
 					mystery="Jesus, der in uns den Glauben vermehre"
 					mysteryEnglish="Jesus, who may increase our faith"
 				/>
+				<div class="decade-buttons">
+					<span class="bible-reference-text">{theologicalVirtueData.reference}</span>
+					<button
+						class="bible-reference-button"
+						onclick={() => handleCitationClick(theologicalVirtueData.reference, theologicalVirtueData.title, theologicalVirtueData.verseData)}
+						aria-label={labels.showBibleVerse}
+					>📖</button>
+				</div>
 			</div>

 			<!-- Second Ave Maria (Hope) -->
@@ -814,6 +826,14 @@ h1 {
 					mystery="Jesus, der in uns die Hoffnung stärke"
 					mysteryEnglish="Jesus, who may strengthen our hope"
 				/>
+				<div class="decade-buttons">
+					<span class="bible-reference-text">{theologicalVirtueData.reference}</span>
+					<button
+						class="bible-reference-button"
+						onclick={() => handleCitationClick(theologicalVirtueData.reference, theologicalVirtueData.title, theologicalVirtueData.verseData)}
+						aria-label={labels.showBibleVerse}
+					>📖</button>
+				</div>
 			</div>

 			<!-- Third Ave Maria (Love) -->
@@ -829,6 +849,14 @@ h1 {
 					mystery="Jesus, der in uns die Liebe entzünde"
 					mysteryEnglish="Jesus, who may kindle our love"
 				/>
+				<div class="decade-buttons">
+					<span class="bible-reference-text">{theologicalVirtueData.reference}</span>
+					<button
+						class="bible-reference-button"
+						onclick={() => handleCitationClick(theologicalVirtueData.reference, theologicalVirtueData.title, theologicalVirtueData.verseData)}
+						aria-label={labels.showBibleVerse}
+					>📖</button>
+				</div>
 			</div>

 			<!-- Gloria Patri before decades -->
--- a/src/routes/[recipeLang=recipeLang]/add/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/add/+page.svelte
@@ -168,10 +168,10 @@ input {
 	border: unset;
 	margin: 1rem auto;
 	padding: 0.5em 1em;
-	border-radius: 1000px;
+	border-radius: var(--radius-pill);
 	background-color: var(--nord4);
 	font-size: 1.1rem;
-	transition: 100ms;
+	transition: var(--transition-fast);
 }
 input:hover,
 input:focus-visible {
@@ -213,7 +213,7 @@ h1 {
 	border-radius: 10000px;
 	padding: 0.5em 1em;
 	font-size: 1.1rem;
-	transition: 200ms;
+	transition: var(--transition-normal);
 }
 .title p:hover,
 .title p:focus-within {
@@ -226,7 +226,7 @@ h1 {
 	border: 2px solid var(--nord1);
 	border-radius: 45px;
 	padding: 1em 1em;
-	transition: 100ms;
+	transition: var(--transition-fast);
 }
 .addendum:hover,
 .addendum:focus-within {
--- a/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte
@@ -248,10 +248,10 @@
 		border: unset;
 		margin: 1rem auto;
 		padding: 0.5em 1em;
-		border-radius: 1000px;
+		border-radius: var(--radius-pill);
 		background-color: var(--nord4);
 		font-size: 1.1rem;
-		transition: 100ms;
+		transition: var(--transition-fast);
 	}
 	input:hover,
 	input:focus-visible {
@@ -293,7 +293,7 @@
 		border-radius: 10000px;
 		padding: 0.5em 1em;
 		font-size: 1.1rem;
-		transition: 200ms;
+		transition: var(--transition-normal);
 	}
 	.title p:hover,
 	.title p:focus-within {
@@ -306,7 +306,7 @@
 		border: 2px solid var(--nord1);
 		border-radius: 45px;
 		padding: 1em 1em;
-		transition: 100ms;
+		transition: var(--transition-fast);
 	}
 	.addendum:hover,
 	.addendum:focus-within {
--- a/src/routes/[recipeLang=recipeLang]/icon/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/icon/+page.svelte
@@ -25,7 +25,7 @@
 		text-decoration: none;
 		padding: var(--padding);
 		background-color: var(--nord4);
-		border-radius: 1000px;
+		border-radius: var(--radius-pill);
    		box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2);
 		text-align: center;
 		--width: calc(1.2em + var(--padding) * 2);