feat: add catechesis section with 10 commandments page
Add Katechese section to the faith area with teachings from P. Martin Ramm FSSP's Glaubenskurs. Includes landing page, full 10 Commandments overview with biblical text (Ex 20), and detailed first commandment page covering the virtue of religion, its four acts, and inner/outer dimensions.
This commit is contained in:
@@ -12,7 +12,8 @@ const rosaryPath = $derived(isEnglish ? 'rosary' : 'rosenkranz');
|
||||
|
||||
const labels = $derived({
|
||||
prayers: isEnglish ? 'Prayers' : 'Gebete',
|
||||
rosary: isEnglish ? 'Rosary' : 'Rosenkranz'
|
||||
rosary: isEnglish ? 'Rosary' : 'Rosenkranz',
|
||||
catechesis: isEnglish ? 'Catechesis' : 'Katechese'
|
||||
});
|
||||
|
||||
/** @type {'de' | 'en'} */
|
||||
@@ -33,6 +34,7 @@ function isActive(path) {
|
||||
<ul class=site_header>
|
||||
<li style="--active-fill: var(--nord12)"><a href="/{data.faithLang}/{prayersPath}" class:active={isActive(`/${data.faithLang}/${prayersPath}`)} title={labels.prayers}><svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 640 512" fill="currentColor"><path d="M351.2 4.8c3.2-2 6.6-3.3 10-4.1c4.7-1 9.6-.9 14.1 .1c7.7 1.8 14.8 6.5 19.4 13.6L514.6 194.2c8.8 13.1 13.4 28.6 13.4 44.4v73.5c0 6.9 4.4 13 10.9 15.2l79.2 26.4C631.2 358 640 370.2 640 384v96c0 9.9-4.6 19.3-12.5 25.4s-18.1 8.1-27.7 5.5L431 465.9c-56-14.9-95-65.7-95-123.7V224c0-17.7 14.3-32 32-32s32 14.3 32 32v80c0 8.8 7.2 16 16 16s16-7.2 16-16V219.1c0-7-1.8-13.8-5.3-19.8L340.3 48.1c-1.7-3-2.9-6.1-3.6-9.3c-1-4.7-1-9.6 .1-14.1c1.9-8 6.8-15.2 14.3-19.9zm-62.4 0c7.5 4.6 12.4 11.9 14.3 19.9c1.1 4.6 1.2 9.4 .1 14.1c-.7 3.2-1.9 6.3-3.6 9.3L213.3 199.3c-3.5 6-5.3 12.9-5.3 19.8V304c0 8.8 7.2 16 16 16s16-7.2 16-16V224c0-17.7 14.3-32 32-32s32 14.3 32 32V342.3c0 58-39 108.7-95 123.7l-168.7 45c-9.6 2.6-19.9 .5-27.7-5.5S0 490 0 480V384c0-13.8 8.8-26 21.9-30.4l79.2-26.4c6.5-2.2 10.9-8.3 10.9-15.2V238.5c0-15.8 4.7-31.2 13.4-44.4L245.2 14.5c4.6-7.1 11.7-11.8 19.4-13.6c4.6-1.1 9.4-1.2 14.1-.1c3.5 .8 6.9 2.1 10 4.1z"/></svg><span class="nav-label">{labels.prayers}</span></a></li>
|
||||
<li style="--active-fill: var(--nord11)"><a href="/{data.faithLang}/{rosaryPath}" class:active={isActive(`/${data.faithLang}/${rosaryPath}`)} title={labels.rosary}><svg class="nav-icon" width="16" height="16" viewBox="0 0 512 512" fill="currentColor"><path d="M241.251,145.056c-39.203-17.423-91.472,17.423-104.54,60.982c-13.068,43.558,8.712,117.608,65.337,143.742 c56.626,26.135,108.896-8.712,87.117-39.202c-74.049-8.712-121.963-87.117-100.184-126.319S280.453,162.479,241.251,145.056z"/><path d="M337.079,271.375c47.914-39.202,21.779-126.319-17.423-135.031c-39.202-8.712-56.626,13.068-26.135,39.202 c39.203,30.491-8.712,91.472-39.202,87.117C254.318,262.663,289.165,310.577,337.079,271.375z"/><path d="M254.318,119.788c43.558-17.423,74.049-9.579,100.184,16.556c13.068-39.202-30.491-104.54-108.896-113.252 S93.153,118.921,127.999,171.191C136.711,153.767,188.981,106.721,254.318,119.788z"/><path d="M110.576,245.24C36.527,262.663,28.87,335.248,45.239,380.27c17.423,47.914,4.356,82.761,26.135,91.472 c20.622,8.253,91.472,13.068,152.454,17.423c60.982,4.356,108.896-47.914,91.472-108.896 C141.067,410.761,110.576,284.442,110.576,245.24z"/><path d="M93.883,235.796c0,0,2.178-28.313,10.89-43.558c-4.356-4.356-8.712-21.779-8.712-21.779 s-4.356-19.601-4.356-34.846c-32.669-6.534-89.295,34.846-91.472,41.38c-2.178,6.534,10.889,80.583,39.202,82.761 C69.927,235.796,93.883,235.796,93.883,235.796z"/><path d="M489.533,175.546c-39.202-82.761-113.252-65.337-113.252-65.337s4.356,21.779-4.356,34.846 c43.558,47.914,13.067,146.643-24.681,158.265c130.675,56.626,159.712-58.081,164.068-75.504 C515.668,210.393,498.245,197.326,489.533,175.546z"/><path d="M454.108,332.076c-22.359,15.841-85.663,11.613-121.964-7.265c1.446,14.514-13.067,37.756-20.325,39.202 c27.59,11.621,53.725,62.436,7.265,116.161c18.878,18.87,95.828,4.356,140.842-24.689c7.325-4.722,18.869-52.27,21.779-79.851 C485.56,339.103,488.963,307.387,454.108,332.076z"/><path d="M257.227,213.294c-18.928,5.164-30.439-6.27-23.234-18.869c5.811-10.167,5.266-20.69-8.712-13.068 c-29.044,17.423-11.612,66.784,24.689,62.428c49.36-17.423,27.581-62.428,14.514-60.982 C251.417,184.249,273.196,208.938,257.227,213.294z"/></svg><span class="nav-label">{labels.rosary}</span></a></li>
|
||||
<li style="--active-fill: var(--nord13)"><a href="/{data.faithLang}/katechese" class:active={isActive(`/${data.faithLang}/katechese`)} title={labels.catechesis}><svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7v14"/><path d="M16 12h2"/><path d="M16 8h2"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/><path d="M6 12h2"/><path d="M6 8h2"/></svg><span class="nav-label">{labels.catechesis}</span></a></li>
|
||||
</ul>
|
||||
{/snippet}
|
||||
|
||||
|
||||
@@ -75,4 +75,25 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg"viewBox="6 -274 564 548"><path d="M392-162c-4-10-9-18-15-26 5-4 7-8 7-12 0-18-43-32-96-32s-96 14-96 32c0 4 3 8 7 12-6 8-11 16-15 26-15-11-24-24-24-38 0-35 57-64 128-64s128 29 128 64c0 14-9 27-24 38zm-104-22c35 0 64 29 64 64s-29 64-64 64-64-29-64-64 29-64 64-64zM82 159c3-22-3-48-20-64C34 68 16 30 16-12v-64c0-42 34-76 76-76 23 0 44 10 59 27l65 78c-21 16-37 40-43 67l-43 195c-4 17-2 34 5 49h-21c-26 0-46-24-42-50l10-55zm364 56L403 20c-6-27-21-51-42-67l64-77c15-18 36-28 59-28 42 0 76 34 76 76v64c0 42-18 80-46 107-17 16-23 42-20 64l10 56c4 26-16 49-42 49h-20c6-15 8-32 4-49zM220 31c7-32 35-55 68-55s61 23 68 55l43 194c5 20-11 39-31 39H208c-21 0-36-19-31-39l43-194z"/></svg>
|
||||
<h3>Angelus</h3>
|
||||
</a>
|
||||
<a href="/{data.faithLang}/katechese">
|
||||
<svg viewBox="0 0 56.664422 57.373692">
|
||||
<g transform="translate(-346.55989,-393.80378)">
|
||||
<g>
|
||||
<path style="color:#000000;stroke-linecap:round;-inkscape-stroke:none" d="m 456.23047,509.13672 a 1.5,1.5 0 0 0 -1.5,1.5 1.5,1.5 0 0 0 1.5,1.5 h 53.66406 a 1.5,1.5 0 0 0 1.5,-1.5 1.5,1.5 0 0 0 -1.5,-1.5 z" transform="translate(-108.17112,-60.95933)" />
|
||||
<g transform="translate(-108.17112,-60.959331)">
|
||||
<path style="color:#000000;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="m 459.49805,499.79492 a 1.50015,1.50015 0 0 0 -1.5,1.5 v 9.24219 a 1.5,1.5 0 0 0 1.5,1.5 1.5,1.5 0 0 0 1.5,-1.5 v -7.74219 H 504.875 v 7.16602 a 1.5,1.5 0 0 0 1.5,1.5 1.5,1.5 0 0 0 1.5,-1.5 v -8.66602 a 1.50015,1.50015 0 0 0 -1.5,-1.5 z"/>
|
||||
<path style="color:#000000;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="m 464.54883,468.27344 a 1.5,1.5 0 0 0 -1.5,1.5 v 31.46289 a 1.5,1.5 0 0 0 1.5,1.5 1.5,1.5 0 0 0 1.5,-1.5 v -31.46289 a 1.5,1.5 0 0 0 -1.5,-1.5 z"/>
|
||||
<path style="color:#000000;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="m 501.99023,467.93359 a 1.5,1.5 0 0 0 -1.49804,1.5 l 0.01,31.32813 a 1.5,1.5 0 0 0 1.50196,1.5 1.5,1.5 0 0 0 1.49804,-1.50195 l -0.01,-31.32618 a 1.5,1.5 0 0 0 -1.50196,-1.5 z"/>
|
||||
<path style="color:#000000;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="m 460.71289,461.20898 a 1.50015,1.50015 0 0 0 -1.5,1.5 v 6.88672 a 1.50015,1.50015 0 0 0 1.5,1.5 h 10.29688 a 1.5,1.5 0 0 0 1.5,-1.5 1.5,1.5 0 0 0 -1.5,-1.5 h -8.79688 v -3.88672 h 41.50391 v 3.69141 h -8.31641 a 1.5,1.5 0 0 0 -1.5,1.5 1.5,1.5 0 0 0 1.5,1.5 h 9.81641 a 1.50015,1.50015 0 0 0 1.5,-1.5 v -6.69141 a 1.50015,1.50015 0 0 0 -1.5,-1.5 z"/>
|
||||
<path style="color:#000000;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="m 471.07227,461.29883 a 1.5,1.5 0 0 0 -1.5,1.5 v 28.28711 a 1.50015,1.50015 0 0 0 1.88867,1.44922 l 11.50781,-3.08399 11.95508,3.20313 a 1.50015,1.50015 0 0 0 1.88867,-1.44727 v -28.27344 a 1.5,1.5 0 0 0 -1.5,-1.5 1.5,1.5 0 0 0 -1.5,1.5 v 26.31836 l -10.45508,-2.80273 a 1.50015,1.50015 0 0 0 -0.77734,0 l -10.00781,2.68359 v -26.33398 a 1.5,1.5 0 0 0 -1.5,-1.5 z"/>
|
||||
<path style="color:#000000;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="m 480.62109,454.93555 -9.63672,0.043 a 1.50015,1.50015 0 0 0 -1.49414,1.5 v 6.28125 a 1.5,1.5 0 0 0 1.5,1.5 1.5,1.5 0 0 0 1.5,-1.5 v -4.78711 l 8.13672,-0.0371 c 0.77001,0 1.02148,0.56256 1.10157,0.77148 l 0.0449,3.13867 a 1.5,1.5 0 0 0 1.52148,1.47852 1.5,1.5 0 0 0 1.47852,-1.52149 l -0.0508,-3.46875 a 1.50015,1.50015 0 0 0 -0.084,-0.47851 c 0,0 -1.09277,-2.91992 -4.01172,-2.91992 a 1.50015,1.50015 0 0 0 -0.006,0 z"/>
|
||||
<path style="color:#000000;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="m 495.15625,454.76367 -8.86523,0.008 c -2.5527,0.001 -4.04883,2.05469 -4.04883,2.05469 a 1.5,1.5 0 0 0 0.14648,2.11719 1.5,1.5 0 0 0 2.11719,-0.14649 c 0,0 1.18681,-1.02539 1.78711,-1.02539 a 1.50015,1.50015 0 0 0 0.002,0 l 7.35156,-0.006 -0.0215,3.83594 a 1.5,1.5 0 0 0 1.49023,1.50977 1.5,1.5 0 0 0 1.50977,-1.49219 l 0.0312,-5.34766 a 1.50015,1.50015 0 0 0 -1.5,-1.50781 z"/>
|
||||
<path style="color:#000000;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="m 483.12891,468.0293 a 1.5,1.5 0 0 0 -1.5,1.5 v 12.26953 a 1.5,1.5 0 0 0 1.5,1.5 1.5,1.5 0 0 0 1.5,-1.5 V 469.5293 a 1.5,1.5 0 0 0 -1.5,-1.5 z"/>
|
||||
<path style="color:#000000;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="m 479.31641,471.66797 a 1.5,1.5 0 0 0 -1.5,1.5 1.5,1.5 0 0 0 1.5,1.5 h 7.97265 a 1.5,1.5 0 0 0 1.5,-1.5 1.5,1.5 0 0 0 -1.5,-1.5 z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<h3>Katechese</h3>
|
||||
</a>
|
||||
</LinksGrid>
|
||||
|
||||
50
src/routes/[faithLang=faithLang]/katechese/+page.svelte
Normal file
50
src/routes/[faithLang=faithLang]/katechese/+page.svelte
Normal file
@@ -0,0 +1,50 @@
|
||||
<script>
|
||||
import LinksGrid from '$lib/components/LinksGrid.svelte';
|
||||
let { data } = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Katechese - Bocken</title>
|
||||
<meta name="description" content="Katechesen nach P. Martin Ramm FSSP" />
|
||||
</svelte:head>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: var(--text-3xl);
|
||||
}
|
||||
p {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
.source {
|
||||
text-align: center;
|
||||
color: var(--color-text-tertiary);
|
||||
font-size: var(--text-sm);
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Katechese</h1>
|
||||
<p>
|
||||
Aufgearbeitete Lehrinhalte aus dem Glaubenskurs von P. Martin Ramm FSSP.
|
||||
</p>
|
||||
<p class="source">Quelle: Glaubenskurs, 3. Hauptteil</p>
|
||||
|
||||
<LinksGrid>
|
||||
<a href="/{data.faithLang}/katechese/zehn-gebote">
|
||||
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="8" y="20" width="38" height="55" rx="12" ry="12" stroke="currentColor" stroke-width="3" fill="none"/>
|
||||
<rect x="54" y="20" width="38" height="55" rx="12" ry="12" stroke="currentColor" stroke-width="3" fill="none"/>
|
||||
<line x1="18" y1="35" x2="36" y2="35" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="18" y1="43" x2="36" y2="43" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="18" y1="51" x2="36" y2="51" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="64" y1="35" x2="82" y2="35" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="64" y1="43" x2="82" y2="43" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="64" y1="51" x2="82" y2="51" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="64" y1="59" x2="82" y2="59" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<h3>Die 10 Gebote</h3>
|
||||
</a>
|
||||
</LinksGrid>
|
||||
@@ -0,0 +1,747 @@
|
||||
<script>
|
||||
import { ArrowDown, ArrowLeft, EyeOff, LightbulbIcon, Bird } from 'lucide-svelte';
|
||||
let expanded = $state(null);
|
||||
|
||||
function toggle(id) {
|
||||
expanded = expanded === id ? null : id;
|
||||
}
|
||||
|
||||
const gebote = [
|
||||
{ nr: 1, text: 'Du sollst keine anderen Götter neben mir haben.', active: true },
|
||||
{ nr: 2, text: 'Du sollst den Namen Gottes nicht verunehren.', active: false },
|
||||
{ nr: 3, text: 'Du sollst den Sonntag heiligen.', active: false },
|
||||
{ nr: 4, text: 'Du sollst Vater und Mutter ehren, auf dass es dir wohl ergehe und du lange lebst auf Erden.', active: false },
|
||||
{ nr: 5, text: 'Du sollst nicht töten.', active: false },
|
||||
{ nr: 6, text: 'Du sollst nicht Unkeuschheit treiben.', active: false },
|
||||
{ nr: 7, text: 'Du sollst nicht stehlen.', active: false },
|
||||
{ nr: 8, text: 'Du sollst kein falsches Zeugnis geben wider deinen Nächsten.', active: false },
|
||||
{ nr: 9, text: 'Du sollst nicht Unkeusches begehren.', active: false },
|
||||
{ nr: 10, text: 'Du sollst nicht begehren deines Nächsten Hab und Gut.', active: false },
|
||||
];
|
||||
|
||||
const akteReligio = [
|
||||
{ name: 'Anbetung', desc: 'Ich anerkenne Gottes als meinen höchsten Herrn.', icon: '1' },
|
||||
{ name: 'Dank', desc: 'Ich anerkenne Gott als meinen Schöpfer, dem ich alles verdanke.', icon: '2' },
|
||||
{ name: 'Bitte', desc: 'Ich anerkenne Gott als meinen Vater, von dem ich alles erwarte.', icon: '3' },
|
||||
{ name: 'Sühne', desc: 'Ich anerkenne Gott als meinen gütigen Erlöser.', icon: '4' },
|
||||
];
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Die 10 Gebote Gottes - Bocken</title>
|
||||
<meta name="description" content="Die Zehn Gebote Gottes - Katechese nach P. Martin Ramm FSSP" />
|
||||
</svelte:head>
|
||||
|
||||
<div class="page">
|
||||
<header class="hero">
|
||||
<div class="tablets">
|
||||
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" class="tablets-svg">
|
||||
<rect x="8" y="20" width="38" height="55" rx="12" ry="12" fill="none" stroke="currentColor" stroke-width="3"/>
|
||||
<rect x="54" y="20" width="38" height="55" rx="12" ry="12" fill="none" stroke="currentColor" stroke-width="3"/>
|
||||
<line x1="18" y1="35" x2="36" y2="35" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="18" y1="43" x2="36" y2="43" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="18" y1="51" x2="36" y2="51" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="64" y1="35" x2="82" y2="35" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="64" y1="43" x2="82" y2="43" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="64" y1="51" x2="82" y2="51" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="64" y1="59" x2="82" y2="59" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h1>Die Zehn Gebote Gottes</h1>
|
||||
<p class="subtitle">Glaubenskurs, 3. Hauptteil — P. Martin Ramm FSSP</p>
|
||||
</header>
|
||||
|
||||
<!-- Ursprung section -->
|
||||
<section class="origin">
|
||||
<h2>Ursprung</h2>
|
||||
<div class="origin-points">
|
||||
<div class="origin-card">
|
||||
<p>Die Zehn Gebote (Dekalog, von <em>deca-logos</em> = zehn Worte) haben <strong>Gott selbst</strong> zum Urheber.</p>
|
||||
</div>
|
||||
<div class="origin-card">
|
||||
<p>Gott hat sie dem <strong>Moses am Sinai</strong> gegeben (Ex 19-20) und auf zwei steinerne Tafeln geschrieben.</p>
|
||||
</div>
|
||||
<div class="origin-card">
|
||||
<p><strong>Jesus Christus</strong> hat sie bestätigt: <q>Ich bin nicht gekommen, das Gesetz aufzuheben, sondern zu erfüllen.</q> <cite>(Mt 5, 17)</cite></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Warum section -->
|
||||
<section class="why">
|
||||
<h2>Warum hat Gott die 10 Gebote gegeben?</h2>
|
||||
<blockquote>
|
||||
<p>Gott schuf den Menschen auf das Gute hin, und der Mensch wird unglücklich, wenn er die Gesetze, die um seines Glückes willen aufgestellt sind, nicht hält.</p>
|
||||
<cite>Fulton Sheen, Zur Liebe gehören Drei</cite>
|
||||
</blockquote>
|
||||
<div class="why-grid">
|
||||
<div class="why-card">
|
||||
<EyeOff class="why-icon" size={40} />
|
||||
<p>Seit dem Sündenfall ist die <strong>Erkenntniskraft</strong> des Menschen getrübt.</p>
|
||||
</div>
|
||||
<div class="why-card">
|
||||
<LightbulbIcon class="why-icon" size={40} />
|
||||
<p>Was durch den Sündenfall <strong>verdunkelt</strong> war, wird durch die Gesetzgebung auf dem Sinai <strong>erhellt</strong>.</p>
|
||||
</div>
|
||||
<div class="why-card">
|
||||
<Bird class="why-icon" size={40} />
|
||||
<p>Die 10 Gebote nehmen uns nicht die <strong>Freiheit</strong>, sondern <strong>garantieren</strong> sie.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Eigentlich sollte das Gewissen genügen, um sicher die göttliche Ordnung zu erkennen. Aber seit dem Sündenfall ist die Erkenntniskraft des Menschen getrübt.</p>
|
||||
<ul>
|
||||
<li>Damit alle sicher, leicht und ohne Irrtum die göttliche Ordnung erkennen, hat Gott sein Gesetz geoffenbart.</li>
|
||||
<li>Was durch den Sündenfall verdunkelt war, wird durch die Gesetzgebung auf dem Sinai erhellt.</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p>Obwohl die Gebote des Dekalogs schon der Vernunft einsichtig sind, wurden sie geoffenbart. Um zu einer vollständigen und sicheren Erkenntnis der Forderungen des natürlichen Gesetzes zu gelangen, bedurfte die sündige Menschheit dieser Offenbarung.</p>
|
||||
<cite>KKK 2071</cite>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>Wenn du nach Weisheit verlangst, halte die Gebote.</p>
|
||||
<cite>Sir 1, 26</cite>
|
||||
</blockquote>
|
||||
|
||||
<h3>Befreiung aus der Knechtschaft</h3>
|
||||
<p>Am Sinai erinnert Gott an die Befreiung aus der Knechtschaft:</p>
|
||||
<blockquote>
|
||||
<p>Ich bin der Herr, dein Gott, der dich aus dem Lande Ägypten, dem Hause der Knechtschaft, geführt hat.</p>
|
||||
<cite>Ex 20, 2</cite>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li>Die Knechtschaft des Pharao ist ein Bild für die <strong>Knechtschaft der Sünde</strong>. Entweder wir beherrschen unsere Leidenschaften oder die Leidenschaften beherrschen uns.</li>
|
||||
<li>Durch die 10 Gebote führt Gott den Menschen heraus aus der Knechtschaft der Sünde.</li>
|
||||
</ul>
|
||||
<p>Die 10 Gebote nehmen uns nicht die <strong>Freiheit</strong>, sondern garantieren sie. Sie sind Wegweiser sowohl zum zeitlichen als auch zum ewigen Glück.</p>
|
||||
<blockquote>
|
||||
<p>O hättest du doch meine Gebote beachtet, so wäre dein Glück wie ein Strom und dein Heil wie die Wogen des Meeres.</p>
|
||||
<cite>Is 48, 18</cite>
|
||||
</blockquote>
|
||||
<p>Sie sind nicht nur für den Einzelnen, sondern sind auch das Fundament jeglicher ziviler Gemeinschaft.</p>
|
||||
<blockquote>
|
||||
<p>Wo die Zehn Gebote Gottes nicht mehr gehalten werden, da werden hunderttausend Staatsgesetze keine Rechtsordnung aufrichten.</p>
|
||||
<cite>Kardinal Faulhaber</cite>
|
||||
</blockquote>
|
||||
</section>
|
||||
|
||||
<!-- Biblischer Text -->
|
||||
<section class="biblical-text">
|
||||
<h2>Biblischer Text</h2>
|
||||
<p class="biblical-intro">„Ich bin der Herr, dein Gott, der dich aus dem Lande Ägypten, dem Hause der Knechtschaft, geführt hat.</p>
|
||||
<ol class="exodus-list">
|
||||
<li>Du sollst keine anderen Götter neben mir haben! Du sollst dir kein Schnitzbild machen, noch irgendein Abbild von dem, was droben im Himmel oder auf der Erde unten oder im Wasser unter der Erde ist! Du sollst dich vor ihnen nicht niederwerfen und sollst sie nicht verehren; denn ich, der Herr, dein Gott, bin ein eifersüchtiger Gott, der die Schuld der Väter an den Kindern, am dritten und vierten Geschlecht, nachprüft bei denen, die mich hassen. Ich erweise aber meine Gnade bis ins tausendste Geschlecht denen, die mich lieben und meine Gebote halten.</li>
|
||||
<li>Du sollst den Namen des Herrn, deines Gottes, nicht unnütz aussprechen; denn der Herr lässt denjenigen nicht ungestraft, der seinen Namen unnütz ausspricht!</li>
|
||||
<li>Gedenke des Sabbattages, um ihn heilig zu halten. Sechs Tage lang sollst du arbeiten und all deine Geschäfte verrichten. Doch der siebte Tag ist ein Ruhetag für den Herrn, deinen Gott. Du sollst an ihm keinerlei Arbeit tun, weder du selbst noch dein Sohn, noch deine Tochter, noch dein Knecht, noch deine Magd, noch dein Vieh, noch dein Fremdling, der sich in deinen Toren befindet. Denn in sechs Tagen hat der Herr den Himmel, die Erde, das Meer und alles, was in ihnen ist, erschaffen; doch am siebten Tage ruhte er. Darum segnete der Herr den Sabbat und erklärte ihn für heilig.</li>
|
||||
<li>Ehre deinen Vater und deine Mutter, damit du lange lebst in dem Lande, das der Herr, dein Gott, dir gibt!</li>
|
||||
<li>Du sollst nicht töten!</li>
|
||||
<li>Du sollst nicht ehebrechen!</li>
|
||||
<li>Du sollst nicht stehlen!</li>
|
||||
<li>Du sollst gegen deinen Nächsten kein falsches Zeugnis abgeben!</li>
|
||||
<li>Du sollst nicht das Haus deines Nächsten begehren!</li>
|
||||
<li>Du sollst nicht begehren die Frau deines Nächsten und auch nicht seinen Knecht, seine Magd, sein Rind, seinen Esel und nichts von dem, was deinem Nächsten gehört!"</li>
|
||||
</ol>
|
||||
<p class="exodus-cite">Ex 20, 1-17</p>
|
||||
</section>
|
||||
|
||||
<!-- Gebote overview -->
|
||||
<section class="commandments-overview">
|
||||
<h2>Katechetische Überlieferung</h2>
|
||||
<p class="intro-text">Ich bin der Herr, dein Gott:</p>
|
||||
<div class="commandments-list">
|
||||
{#each gebote as gebot (gebot.nr)}
|
||||
{#if gebot.active}
|
||||
<a href="#erstes-gebot" class="commandment-item active">
|
||||
<span class="commandment-nr">{gebot.nr}</span>
|
||||
<span class="commandment-text">{gebot.text}</span>
|
||||
<ArrowDown class="commandment-arrow" size={18} />
|
||||
</a>
|
||||
{:else}
|
||||
<div class="commandment-item inactive">
|
||||
<span class="commandment-nr">{gebot.nr}</span>
|
||||
<span class="commandment-text">{gebot.text}</span>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 1. Gebot detail -->
|
||||
<section class="first-commandment" id="erstes-gebot">
|
||||
<div class="gebot-header">
|
||||
<span class="gebot-nr">I</span>
|
||||
<div>
|
||||
<h2>Das Erste Gebot</h2>
|
||||
<p class="gebot-text-full">Ich bin der Herr, dein Gott. Du sollst keine fremden Götter neben mir haben.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="essence">
|
||||
<p class="essence-lead">Das erste Gebot ist <strong>grundlegend</strong>. In ihm sind alle weiteren Gebote enthalten und begründet.</p>
|
||||
<div class="essence-two">
|
||||
<div class="essence-card">
|
||||
<h3>Anerkennung Gottes</h3>
|
||||
<p>Es geht um die Anerkennung Gottes und um das rechte Verhältnis des Menschen zu Gott.</p>
|
||||
</div>
|
||||
<div class="essence-card">
|
||||
<h3>Verstand & Wille</h3>
|
||||
<p>Sache des <em>Verstandes</em> ist es, Gott zu <strong>erkennen</strong>. Der <em>Wille</em> muss hinzukommen, um Gott tatsächlich <strong>anzuerkennen</strong>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Drei Pflichten -->
|
||||
<div class="three-duties">
|
||||
<h3>Das erste Gebot befiehlt</h3>
|
||||
<div class="duties-visual">
|
||||
<div class="duty">
|
||||
<div class="duty-circle">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2z"/><path d="M12 6v6l4 2"/></svg>
|
||||
</div>
|
||||
<span class="duty-label">glauben</span>
|
||||
<p>An den einen wahren Gott fest glauben</p>
|
||||
</div>
|
||||
<div class="duty-connector"></div>
|
||||
<div class="duty">
|
||||
<div class="duty-circle">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
|
||||
</div>
|
||||
<span class="duty-label">hoffen</span>
|
||||
<p>Fest auf ihn hoffen</p>
|
||||
</div>
|
||||
<div class="duty-connector"></div>
|
||||
<div class="duty">
|
||||
<div class="duty-circle">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
|
||||
</div>
|
||||
<span class="duty-label">lieben</span>
|
||||
<p>Ihn über alles lieben</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tugend der Religion -->
|
||||
<div class="religion-virtue">
|
||||
<h3>Die Tugend der Religion</h3>
|
||||
<div class="etymologie">
|
||||
<span class="latin">religio</span>
|
||||
<ArrowLeft class="arrow" size={20} />
|
||||
<span class="latin">religare</span>
|
||||
<span class="equals">=</span>
|
||||
<span class="meaning">anbinden</span>
|
||||
</div>
|
||||
<p class="religion-desc">Was man liebt, daran bindet man sich. Die Religion gibt Orientierung und festen „Halt nach oben.</p>
|
||||
|
||||
<div class="inner-outer">
|
||||
<div class="side-card inner">
|
||||
<h4>Die innere Seite</h4>
|
||||
<p>Die Tugend der Religion macht das Herz geneigt, Gott anzuerkennen, sich ihm anzuvertrauen, ihn über alles zu lieben und ihm zu geben, <em>„was wir ihm als Geschöpfe rechtmässig schulden</em> (KKK 2095).</p>
|
||||
<p>Die <em>religio</em> ist Teil der Kardinaltugend der <strong>Gerechtigkeit</strong>: Gott zu geben, was ihm gebührt.</p>
|
||||
<blockquote>
|
||||
<p>Gebt also dem Kaiser, was des Kaisers ist, und Gott, was Gottes ist!</p>
|
||||
<cite>Mt 22, 21</cite>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="side-card outer">
|
||||
<h4>Die äussere Seite</h4>
|
||||
<p>Innere Haltung und äussere Übung der Religion bedingen einander — wie Seele und Leib.</p>
|
||||
<p>Wir schulden Gott nicht nur die Huldigung unserer <strong>Seele</strong>, sondern auch die unseres <strong>Leibes</strong>.</p>
|
||||
<blockquote>
|
||||
<p>Wovon das Herz voll ist, davon redet der Mund.</p>
|
||||
<cite>Mt 12, 34</cite>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vier Akte der religio -->
|
||||
<div class="four-acts">
|
||||
<h3>Die vier Akte der <em>religio</em></h3>
|
||||
<p class="acts-intro">Aus vier elementaren Regeln des Anstandes lassen sich die vier Akte der Tugend der <em>religio</em> ableiten:</p>
|
||||
<div class="acts-grid">
|
||||
{#each akteReligio as akt (akt.name)}
|
||||
<button class="act-card" onclick={() => toggle(akt.name)} class:open={expanded === akt.name}>
|
||||
<div class="act-header">
|
||||
<span class="act-number">{akt.icon}</span>
|
||||
<h4>{akt.name}</h4>
|
||||
</div>
|
||||
<p class="act-desc">{akt.desc}</p>
|
||||
<p class="act-rule">
|
||||
{#if akt.name === 'Anbetung'}
|
||||
Jeden so ehren, wie es verdient ist. — <em>Je würdiger jemand ist, desto mehr gebührt ihm Ehre.</em>
|
||||
{:else if akt.name === 'Dank'}
|
||||
Danken, wenn man etwas bekommt. — <em>Je mehr man empfängt, desto grösser ist die Dankesschuld.</em>
|
||||
{:else if akt.name === 'Bitte'}
|
||||
Bitten, wenn man etwas braucht. — <em>Je mehr man von jemandem erwartet, desto inständiger muss man bitten.</em>
|
||||
{:else}
|
||||
Wieder gut machen, wenn man etwas verschuldet hat. — <em>Je mehr man verschuldet hat, desto grösser die Pflicht zur Genugtuung.</em>
|
||||
{/if}
|
||||
</p>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<blockquote class="acts-quote">
|
||||
<p>Den Herrn, deinen Gott, sollst du anbeten und ihm allein dienen.</p>
|
||||
<cite>Mt 4, 10</cite>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<!-- Warnung -->
|
||||
<div class="warning-section">
|
||||
<h3>Warnung vor Veräusserlichung</h3>
|
||||
<p>Die äusseren Akte der Gottesverehrung haben ihren vollen Wert nur dann, wenn sie von der rechten inneren Gesinnung getragen sind.</p>
|
||||
<blockquote>
|
||||
<p>Dieses Volk ehrt mich mit den Lippen, ihr Herz aber ist fern von mir.</p>
|
||||
<cite>Mt 15, 8</cite>
|
||||
</blockquote>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.page {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
text-align: center;
|
||||
padding: var(--space-xl) 0 var(--space-md);
|
||||
}
|
||||
.tablets-svg {
|
||||
width: 120px;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--text-2xl);
|
||||
margin: var(--space-sm) 0 var(--space-xs);
|
||||
}
|
||||
.subtitle {
|
||||
color: var(--color-text-tertiary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
section {
|
||||
margin: var(--space-2xl) 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--text-xl);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.3em;
|
||||
margin: var(--space-lg) 0 var(--space-sm);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
h4 {
|
||||
font-size: var(--text-lg);
|
||||
margin: 0 0 var(--space-sm);
|
||||
}
|
||||
|
||||
/* Origin */
|
||||
.origin-points {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: var(--space-md);
|
||||
}
|
||||
.origin-card {
|
||||
background: var(--color-surface);
|
||||
padding: var(--space-lg);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.origin-card p {
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Blockquotes */
|
||||
blockquote {
|
||||
border-left: 3px solid var(--color-primary);
|
||||
margin: var(--space-md) 0;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
background: var(--color-surface);
|
||||
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
||||
}
|
||||
blockquote p {
|
||||
margin: 0;
|
||||
font-style: italic;
|
||||
line-height: 1.5;
|
||||
}
|
||||
blockquote cite {
|
||||
display: block;
|
||||
margin-top: var(--space-xs);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Why */
|
||||
.why-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: var(--space-md);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
.why-card {
|
||||
padding: var(--space-md);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-md);
|
||||
text-align: center;
|
||||
}
|
||||
:global(.why-icon) {
|
||||
color: var(--color-primary);
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
.why-card p {
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.why ul {
|
||||
margin: var(--space-sm) 0;
|
||||
padding-left: var(--space-lg);
|
||||
}
|
||||
.why li {
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
.why p {
|
||||
line-height: 1.6;
|
||||
margin: var(--space-sm) 0;
|
||||
}
|
||||
|
||||
/* Biblical text */
|
||||
.biblical-intro {
|
||||
font-style: italic;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.exodus-list {
|
||||
padding-left: var(--space-lg);
|
||||
}
|
||||
.exodus-list li {
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--space-sm);
|
||||
font-style: italic;
|
||||
}
|
||||
.exodus-cite {
|
||||
color: var(--color-text-tertiary);
|
||||
font-size: var(--text-sm);
|
||||
margin-top: var(--space-sm);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Commandments overview */
|
||||
.intro-text {
|
||||
font-size: var(--text-lg);
|
||||
font-weight: bold;
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
.commandments-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
.commandment-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--radius-sm);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: var(--transition-normal) ease;
|
||||
}
|
||||
.commandment-item.active {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-on-primary);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.commandment-item.active:hover {
|
||||
background: var(--color-primary-hover);
|
||||
}
|
||||
.commandment-item.inactive {
|
||||
background: var(--color-surface);
|
||||
opacity: 0.55;
|
||||
cursor: default;
|
||||
}
|
||||
.commandment-nr {
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
min-width: var(--space-lg);
|
||||
text-align: center;
|
||||
}
|
||||
.commandment-text {
|
||||
flex: 1;
|
||||
}
|
||||
.commandment-arrow {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* First commandment detail */
|
||||
.first-commandment {
|
||||
scroll-margin-top: var(--space-xl);
|
||||
}
|
||||
.gebot-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-lg);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
.gebot-nr {
|
||||
font-size: 3.5em;
|
||||
font-weight: bold;
|
||||
color: var(--color-primary);
|
||||
line-height: 1;
|
||||
font-family: serif;
|
||||
}
|
||||
.gebot-header h2 {
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.gebot-text-full {
|
||||
font-size: var(--text-lg);
|
||||
font-style: italic;
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
/* Essence */
|
||||
.essence-lead {
|
||||
font-size: var(--text-lg);
|
||||
text-align: center;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
.essence-two {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
.essence-card {
|
||||
padding: var(--space-lg);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.essence-card h3 {
|
||||
margin: 0 0 var(--space-sm);
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
.essence-card p {
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Three duties */
|
||||
.duties-visual {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
flex-wrap: wrap;
|
||||
margin-top: var(--space-md);
|
||||
}
|
||||
.duty {
|
||||
text-align: center;
|
||||
flex: 0 1 160px;
|
||||
padding: var(--space-sm);
|
||||
}
|
||||
.duty-circle {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-on-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto var(--space-sm);
|
||||
}
|
||||
.duty-circle svg {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
.duty-label {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
font-size: 1.15em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.duty p {
|
||||
margin: var(--space-xs) 0 0;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
.duty-connector {
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
background: var(--color-primary);
|
||||
margin-top: 35px;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* Religion virtue */
|
||||
.etymologie {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-sm);
|
||||
font-size: 1.2em;
|
||||
margin: var(--space-md) 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.latin {
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.arrow, .equals {
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
.meaning {
|
||||
font-weight: 600;
|
||||
}
|
||||
.religion-desc {
|
||||
text-align: center;
|
||||
font-size: var(--text-base);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.inner-outer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-md);
|
||||
margin-top: var(--space-md);
|
||||
}
|
||||
.side-card {
|
||||
padding: var(--space-lg);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
.side-card h4 {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.side-card p {
|
||||
line-height: 1.5;
|
||||
margin: var(--space-sm) 0;
|
||||
}
|
||||
.side-card blockquote {
|
||||
margin: var(--space-sm) 0 0;
|
||||
}
|
||||
|
||||
/* Four acts */
|
||||
.acts-intro {
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
.acts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
.act-card {
|
||||
background: var(--color-surface);
|
||||
border: 2px solid transparent;
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-md);
|
||||
cursor: pointer;
|
||||
transition: var(--transition-normal) ease;
|
||||
text-align: left;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
.act-card:hover, .act-card.open {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.act-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
.act-number {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-on-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: var(--text-sm);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.act-header h4 {
|
||||
margin: 0;
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
.act-desc {
|
||||
margin: var(--space-sm) 0 0;
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1.4;
|
||||
}
|
||||
.act-rule {
|
||||
margin: var(--space-sm) 0 0;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-text-tertiary);
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease;
|
||||
}
|
||||
.act-card.open .act-rule {
|
||||
max-height: 6em;
|
||||
}
|
||||
|
||||
.acts-quote {
|
||||
margin-top: var(--space-lg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Warning */
|
||||
.warning-section {
|
||||
background: var(--color-surface);
|
||||
border-left: 4px solid var(--color-accent);
|
||||
padding: var(--space-lg);
|
||||
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
||||
margin: var(--space-xl) 0;
|
||||
}
|
||||
.warning-section h3 {
|
||||
color: var(--color-accent);
|
||||
margin-top: 0;
|
||||
}
|
||||
.warning-section p {
|
||||
line-height: 1.5;
|
||||
}
|
||||
.warning-section blockquote {
|
||||
border-left-color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 600px) {
|
||||
h1 { font-size: var(--text-xl); }
|
||||
.essence-two,
|
||||
.inner-outer,
|
||||
.acts-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.duty-connector {
|
||||
display: none;
|
||||
}
|
||||
.duties-visual {
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
.gebot-header {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.etymologie {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user