feat: improve catechesis page with expanded content, TOC, and i18n
- Add missing PDF content: Dt 4:12f, Mt 19:17, Sir 1:26 quotes in Ursprung/Warum sections - Add äussere Seite section (Röm 12:1, 1 Kor 6:18-20, KKK 2702) and Gemeinschaftsgebet (Mt 18:20) - Add pars potentialis concept to inner side section - Add sticky section TOC nav for wide screens (1200px+) - Align commandment highlight colors with tablet categories (God=orange, neighbor=blue) - Use straight left borders instead of rounded on commandments - Add German-only notice for English users on all catechesis pages - Add disclaimer attributing errors to site author, not P. Ramm/FSSP - Replace Inkscape katechese SVG with cleaner book icon on faith landing page - Fix 10 commandments tablet SVG to show 5+5 lines Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -30,6 +30,23 @@
|
||||
margin: 0 auto;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.katechese-link {
|
||||
position: relative;
|
||||
}
|
||||
.lang-badge {
|
||||
position: absolute;
|
||||
top: 0.4em;
|
||||
right: 0.4em;
|
||||
background: var(--nord10);
|
||||
color: white;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 700;
|
||||
padding: 0.15em 0.4em;
|
||||
border-radius: 3px;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.05em;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -75,25 +92,9 @@
|
||||
<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>
|
||||
<a href="/{data.faithLang}/katechese" class="katechese-link">
|
||||
{#if isEnglish}<span class="lang-badge">DE</span>{/if}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -226 532 506"><path d="M256-107v310l1-1c54-22 113-34 172-34h19v-320h-19c-42 0-84 8-123 25-17 7-34 14-50 20zm-25-79 25 10 25-10c47-20 97-30 148-30h35c27 0 48 22 48 48v352c0 27-21 48-48 48h-35c-51 0-101 10-148 30l-13 5c-8 3-16 3-24 0l-13-5c-47-20-97-30-148-30H48c-26 0-48-21-48-48v-352c0-26 22-48 48-48h35c51 0 101 10 148 30z" fill="currentColor"/></svg>
|
||||
<h3>Katechese</h3>
|
||||
</a>
|
||||
</LinksGrid>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script>
|
||||
import LinksGrid from '$lib/components/LinksGrid.svelte';
|
||||
let { data } = $props();
|
||||
const isEnglish = $derived(data.lang === 'en');
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -24,26 +25,47 @@
|
||||
font-size: var(--text-sm);
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
.disclaimer {
|
||||
text-align: center;
|
||||
color: var(--color-text-tertiary);
|
||||
font-size: var(--text-xs);
|
||||
font-style: italic;
|
||||
max-width: 500px;
|
||||
}
|
||||
.lang-notice {
|
||||
text-align: center;
|
||||
color: var(--nord10);
|
||||
font-style: italic;
|
||||
font-size: var(--text-sm);
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Katechese</h1>
|
||||
{#if isEnglish}
|
||||
<p class="lang-notice">This catechesis is only available in German.</p>
|
||||
{/if}
|
||||
<p>
|
||||
Aufgearbeitete Lehrinhalte aus dem Glaubenskurs von P. Martin Ramm FSSP.
|
||||
</p>
|
||||
<p class="source">Quelle: Glaubenskurs, 3. Hauptteil</p>
|
||||
<p class="disclaimer">Diese Seiten stellen eine freie Aufbereitung der erhaltenen Unterlagen dar und sind kein offizielles Angebot von P. Martin Ramm oder der FSSP. Etwaige Fehler oder Missverständnisse sind dem Verfasser dieser Seiten anzulasten.</p>
|
||||
|
||||
<LinksGrid>
|
||||
<a href="/{data.faithLang}/katechese/zehn-gebote">
|
||||
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="2 14 96 68" 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"/>
|
||||
<line x1="18" y1="31" x2="36" y2="31" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="18" y1="39" x2="36" y2="39" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="18" y1="47" x2="36" y2="47" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="18" y1="55" x2="36" y2="55" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="18" y1="63" x2="36" y2="63" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="64" y1="31" x2="82" y2="31" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="64" y1="39" x2="82" y2="39" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="64" y1="47" x2="82" y2="47" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="64" y1="55" x2="82" y2="55" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="64" y1="63" x2="82" y2="63" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<h3>Die 10 Gebote</h3>
|
||||
</a>
|
||||
|
||||
@@ -1,22 +1,24 @@
|
||||
<script>
|
||||
import { ArrowDown, ArrowLeft, EyeOff, LightbulbIcon, Bird } from 'lucide-svelte';
|
||||
import { ArrowDown, ArrowLeft } from 'lucide-svelte';
|
||||
import { page } from '$app/stores';
|
||||
let expanded = $state(null);
|
||||
const isEnglish = $derived($page.url.pathname.startsWith('/faith'));
|
||||
|
||||
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 },
|
||||
{ nr: 1, text: 'Du sollst keine anderen Götter neben mir haben.', active: true, tablet: 'god' },
|
||||
{ nr: 2, text: 'Du sollst den Namen Gottes nicht verunehren.', active: false, tablet: 'god' },
|
||||
{ nr: 3, text: 'Du sollst den Sonntag heiligen.', active: false, tablet: 'god' },
|
||||
{ nr: 4, text: 'Du sollst Vater und Mutter ehren, auf dass es dir wohl ergehe und du lange lebst auf Erden.', active: false, tablet: 'neighbor' },
|
||||
{ nr: 5, text: 'Du sollst nicht töten.', active: false, tablet: 'neighbor' },
|
||||
{ nr: 6, text: 'Du sollst nicht Unkeuschheit treiben.', active: false, tablet: 'neighbor' },
|
||||
{ nr: 7, text: 'Du sollst nicht stehlen.', active: false, tablet: 'neighbor' },
|
||||
{ nr: 8, text: 'Du sollst kein falsches Zeugnis geben wider deinen Nächsten.', active: false, tablet: 'neighbor' },
|
||||
{ nr: 9, text: 'Du sollst nicht Unkeusches begehren.', active: false, tablet: 'neighbor' },
|
||||
{ nr: 10, text: 'Du sollst nicht begehren deines Nächsten Hab und Gut.', active: false, tablet: 'neighbor' },
|
||||
];
|
||||
|
||||
const akteReligio = [
|
||||
@@ -32,102 +34,85 @@
|
||||
<meta name="description" content="Die Zehn Gebote Gottes - Katechese nach P. Martin Ramm FSSP" />
|
||||
</svelte:head>
|
||||
|
||||
<div class="page-wrapper">
|
||||
<nav class="toc">
|
||||
<ul>
|
||||
<li><a href="#ursprung">Ursprung</a></li>
|
||||
<li><a href="#warum">Warum die 10 Gebote?</a></li>
|
||||
<li><a href="#biblischer-text">Biblischer Text</a></li>
|
||||
<li><a href="#ueberlieferung">Katechetische Überlieferung</a></li>
|
||||
<li>
|
||||
<a href="#erstes-gebot">Das Erste Gebot</a>
|
||||
<ul>
|
||||
<li><a href="#drei-pflichten">Drei Pflichten</a></li>
|
||||
<li><a href="#tugend-der-religion">Tugend der Religion</a></li>
|
||||
<li><a href="#vier-akte">Vier Akte der <i>religio</i></a></li>
|
||||
<li><a href="#warnung">Warnung</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<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">
|
||||
{#if isEnglish}
|
||||
<p class="lang-notice">This catechesis is only available in German.</p>
|
||||
{/if}
|
||||
|
||||
<section id="ursprung">
|
||||
<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>
|
||||
<p>Die Zehn Gebote (Dekalog, von <em>deca-logos</em> = zehn Worte) haben Gott selbst zum Urheber. Er hat sie dem Moses am Sinai gegeben (Ex 19–20) und auf zwei steinerne Tafeln geschrieben:</p>
|
||||
<blockquote class="quote-scripture">
|
||||
<p>Der Herr redete zu euch mitten aus dem Feuer heraus. … Er verkündete euch seinen Bund, welchen er euch zu halten gebot, die zehn Worte; und er schrieb sie auf zwei steinerne Tafeln.</p>
|
||||
<cite>Dt 4, 12f.</cite>
|
||||
</blockquote>
|
||||
<p>Jesus Christus hat die Gebote bestätigt:</p>
|
||||
<blockquote class="quote-scripture">
|
||||
<p>Denkt nicht, ich sei gekommen, das Gesetz oder die Propheten aufzuheben. Ich bin nicht gekommen aufzuheben, sondern zu erfüllen.</p>
|
||||
<cite>Mt 5, 17</cite>
|
||||
</blockquote>
|
||||
<blockquote class="quote-scripture">
|
||||
<p>Willst du aber zum Leben eingehen, so halte die Gebote!</p>
|
||||
<cite>Mt 19, 17</cite>
|
||||
</blockquote>
|
||||
</section>
|
||||
|
||||
<!-- Warum section -->
|
||||
<section class="why">
|
||||
<section id="warum">
|
||||
<h2>Warum hat Gott die 10 Gebote gegeben?</h2>
|
||||
<blockquote>
|
||||
<blockquote class="quote-saint">
|
||||
<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>Eigentlich sollte das Gewissen genügen, um die göttliche Ordnung zu erkennen. Aber seit dem Sündenfall ist die Erkenntniskraft des Menschen getrübt. Was durch den Sündenfall verdunkelt war, wird durch die Gesetzgebung auf dem Sinai erhellt. Die 10 Gebote nehmen uns nicht die Freiheit, sondern garantieren sie — sie sind Wegweiser zum zeitlichen und ewigen Glück.</p>
|
||||
<blockquote class="quote-church">
|
||||
<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>
|
||||
<blockquote class="quote-scripture">
|
||||
<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>Am Sinai erinnert Gott an die Befreiung aus der Knechtschaft: Die Knechtschaft des Pharao ist ein Bild für die Knechtschaft der Sünde. Entweder wir beherrschen unsere Leidenschaften oder die Leidenschaften beherrschen uns. Durch die 10 Gebote führt Gott den Menschen heraus aus dieser Knechtschaft.</p>
|
||||
<blockquote class="quote-scripture">
|
||||
<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>Die Gebote sind nicht nur für den Einzelnen, sondern auch das Fundament jeglicher ziviler Gemeinschaft.</p>
|
||||
<blockquote class="quote-saint">
|
||||
<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">
|
||||
<section id="biblischer-text">
|
||||
<h2>Biblischer Text</h2>
|
||||
<div class="scripture-block">
|
||||
<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>
|
||||
@@ -141,23 +126,24 @@
|
||||
<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>
|
||||
<p class="exodus-cite">Ex 20, 1–17</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Gebote overview -->
|
||||
<section class="commandments-overview">
|
||||
<section id="ueberlieferung">
|
||||
<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">
|
||||
<a href="#erstes-gebot" class="commandment-item active" class:tablet-god={gebot.tablet === 'god'} class:tablet-neighbor={gebot.tablet === 'neighbor'}>
|
||||
<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">
|
||||
<div class="commandment-item inactive" class:tablet-god={gebot.tablet === 'god'} class:tablet-neighbor={gebot.tablet === 'neighbor'}>
|
||||
<span class="commandment-nr">{gebot.nr}</span>
|
||||
<span class="commandment-text">{gebot.text}</span>
|
||||
</div>
|
||||
@@ -176,52 +162,40 @@
|
||||
</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>
|
||||
<p>Das erste Gebot ist grundlegend. In ihm sind alle weiteren Gebote enthalten und begründet. Es geht um die Anerkennung Gottes und um das rechte Verhältnis des Menschen zu Gott. Sache des <em>Verstandes</em> ist es, Gott zu erkennen. Der <em>Wille</em> muss hinzukommen, um Gott tatsächlich anzuerkennen und sich ihm gänzlich zu unterwerfen.</p>
|
||||
|
||||
<!-- Drei Pflichten -->
|
||||
<div class="three-duties">
|
||||
<div class="three-duties" id="drei-pflichten">
|
||||
<h3>Das erste Gebot befiehlt</h3>
|
||||
<div class="duties-visual">
|
||||
<div class="duty">
|
||||
<div class="duty-circle">
|
||||
<div class="duty-circle" style="background: var(--nord14)">
|
||||
<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>
|
||||
<span class="duty-label" style="color: var(--nord14)">glauben</span>
|
||||
<p>An den einen wahren Gott fest glauben</p>
|
||||
</div>
|
||||
<div class="duty-connector"></div>
|
||||
<div class="duty">
|
||||
<div class="duty-circle">
|
||||
<div class="duty-circle" style="background: var(--nord13)">
|
||||
<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>
|
||||
<span class="duty-label" style="color: var(--nord13)">hoffen</span>
|
||||
<p>Fest auf ihn hoffen</p>
|
||||
</div>
|
||||
<div class="duty-connector"></div>
|
||||
<div class="duty">
|
||||
<div class="duty-circle">
|
||||
<div class="duty-circle" style="background: var(--nord11)">
|
||||
<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>
|
||||
<span class="duty-label" style="color: var(--nord11)">lieben</span>
|
||||
<p>Ihn über alles lieben</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tugend der Religion -->
|
||||
<div class="religion-virtue">
|
||||
<div class="religion-virtue" id="tugend-der-religion">
|
||||
<h3>Die Tugend der Religion</h3>
|
||||
<div class="etymologie">
|
||||
<span class="latin">religio</span>
|
||||
@@ -230,34 +204,48 @@
|
||||
<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>
|
||||
<p>Was man liebt, daran bindet man sich. Die Religion gibt Orientierung und festen „Halt nach oben". Entsprechend der leib-seelischen Natur des Menschen hat die Tugend der Religion eine <strong>innere</strong> und eine <strong>äussere</strong> Seite.</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>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). Die <em>religio</em> ist Teil der Kardinaltugend der Gerechtigkeit (<em>suum cuique</em>): Gott zu geben, was ihm gebührt.</p>
|
||||
<blockquote class="quote-scripture">
|
||||
<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">
|
||||
<p>Da aber ein wirklicher Ausgleich zwischen der unendlich erhabenen göttlichen Majestät und der menschlichen Begrenztheit nicht möglich ist, können wir Gott nicht wirklich so ehren, wie er es verdient. Deshalb nennt man die Religion eine <em>pars potentialis</em> der Tugend der Gerechtigkeit.</p>
|
||||
|
||||
<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>Der ganze Mensch soll Gott loben und ihm die Ehre geben. Wir schulden Gott nicht nur die Huldigung unserer Seele, sondern auch die unseres Leibes.</p>
|
||||
<blockquote class="quote-scripture">
|
||||
<p>Bringt eure Leiber dar als ein lebendiges, heiliges, Gott wohlgefälliges Opfer, als euren sinnvoll entsprechenden Gottesdienst.</p>
|
||||
<cite>Röm 12, 1</cite>
|
||||
</blockquote>
|
||||
<blockquote class="quote-scripture">
|
||||
<p>Wisst ihr nicht, dass euer Leib ein Tempel des Heiligen Geistes ist, der in euch wohnt? Ihn habt ihr von Gott, und nicht euch selber gehört ihr. Denn ihr wurdet erkauft um einen Preis. So verherrlicht denn Gott in eurem Leib!</p>
|
||||
<cite>1 Kor 6, 18–20</cite>
|
||||
</blockquote>
|
||||
<p>Innere Haltung und äussere Übung bedingen einander wie Seele und Leib. Es besteht eine geheimnisvolle Wechselwirkung: Die innere Haltung findet Ausdruck und Stütze in der äusseren Form; zugleich vertieft die äussere Gebärde das innere Gefühl. Aus diesem Grund gebraucht die Liturgie so viele Riten.</p>
|
||||
<blockquote class="quote-scripture">
|
||||
<p>Wovon das Herz voll ist, davon redet der Mund.</p>
|
||||
<cite>Mt 12, 34</cite>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<blockquote class="quote-church">
|
||||
<p>Das Bedürfnis, die äusseren Sinne am inneren Beten zu beteiligen, entspricht einer Forderung unserer menschlichen Natur. Wir sind Leib und Geist und empfinden das Bedürfnis, unsere Gefühle nach aussen kundzutun.</p>
|
||||
<cite>KKK 2702</cite>
|
||||
</blockquote>
|
||||
|
||||
<h4>Das Gebet der Gemeinschaft</h4>
|
||||
<p>Das äussere Gebet ist in besonderer Weise auch das Gebet der Gemeinschaft. In den Sakramenten verbindet Gott selbst äussere Zeichen mit seiner Gnade und heiligt so den ganzen Menschen.</p>
|
||||
<blockquote class="quote-scripture">
|
||||
<p>Denn wo zwei oder drei in meinem Namen versammelt sind, da bin ich mitten unter ihnen.</p>
|
||||
<cite>Mt 18, 20</cite>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<!-- Vier Akte der religio -->
|
||||
<div class="four-acts">
|
||||
<div class="four-acts" id="vier-akte">
|
||||
<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>
|
||||
<p>Aus vier elementaren Regeln des Anstandes lassen sich die vier Akte der Tugend der <em>religio</em> ableiten. Tatsächlich ist Religion — im besten Sinn — guter Anstand Gott gegenüber:</p>
|
||||
<div class="acts-grid">
|
||||
{#each akteReligio as akt (akt.name)}
|
||||
<button class="act-card" onclick={() => toggle(akt.name)} class:open={expanded === akt.name}>
|
||||
@@ -280,258 +268,255 @@
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<blockquote class="acts-quote">
|
||||
<blockquote class="quote-scripture 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">
|
||||
<div class="warning-section" id="warnung">
|
||||
<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>Die äusseren Akte der Gottesverehrung haben ihren vollen Wert nur dann, wenn sie von der rechten inneren Gesinnung getragen sind. Wer äusserlich fromm erscheint, ohne es wirklich zu sein, gleicht einem faulen Apfel mit schöner Schale.</p>
|
||||
<blockquote class="quote-scripture">
|
||||
<p>Dieses Volk ehrt mich mit den Lippen, ihr Herz aber ist fern von mir.</p>
|
||||
<cite>Mt 15, 8</cite>
|
||||
</blockquote>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p class="disclaimer">Diese Seite stellt eine freie Aufbereitung der erhaltenen Unterlagen dar und ist kein offizielles Angebot von P. Martin Ramm oder der FSSP. Etwaige Fehler oder Missverständnisse sind dem Verfasser dieser Seite anzulasten.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.page {
|
||||
max-width: 1000px;
|
||||
.page-wrapper {
|
||||
position: relative;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-md);
|
||||
}
|
||||
.lang-notice {
|
||||
text-align: center;
|
||||
color: var(--nord10);
|
||||
font-style: italic;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.disclaimer {
|
||||
text-align: center;
|
||||
color: var(--color-text-tertiary);
|
||||
font-size: 0.75rem;
|
||||
font-style: italic;
|
||||
margin-top: 3rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
.toc {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.toc {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 4rem;
|
||||
left: max(1rem, calc((100vw - 700px) / 2 - 220px));
|
||||
width: 190px;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.toc ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.toc ul ul {
|
||||
padding-left: 0.75em;
|
||||
border-left: 1px solid var(--color-border);
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
.toc li {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
.toc a {
|
||||
color: var(--color-text-tertiary);
|
||||
text-decoration: none;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.toc a:hover {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
}
|
||||
.page {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
text-align: center;
|
||||
padding: var(--space-xl) 0 var(--space-md);
|
||||
}
|
||||
.tablets-svg {
|
||||
width: 120px;
|
||||
color: var(--color-primary);
|
||||
padding: 2rem 0 1rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--text-2xl);
|
||||
margin: var(--space-sm) 0 var(--space-xs);
|
||||
font-size: 2.5rem;
|
||||
margin: 0 0 0.25em;
|
||||
}
|
||||
.subtitle {
|
||||
color: var(--color-text-tertiary);
|
||||
font-size: var(--text-sm);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
section {
|
||||
margin: var(--space-2xl) 0;
|
||||
margin: 3rem 0;
|
||||
scroll-margin-top: 4rem;
|
||||
}
|
||||
section div[id] {
|
||||
scroll-margin-top: 4rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--text-xl);
|
||||
margin-bottom: var(--space-md);
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.3em;
|
||||
margin: var(--space-lg) 0 var(--space-sm);
|
||||
color: var(--color-primary);
|
||||
font-size: 1.25em;
|
||||
margin: 2rem 0 0.75rem;
|
||||
}
|
||||
h4 {
|
||||
font-size: var(--text-lg);
|
||||
margin: 0 0 var(--space-sm);
|
||||
font-size: 1.1em;
|
||||
margin: 1.5rem 0 0.5rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
p {
|
||||
line-height: 1.6;
|
||||
margin: 0.75em 0;
|
||||
}
|
||||
ul {
|
||||
padding-left: 1.5em;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
li {
|
||||
line-height: 1.6;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
/* Blockquotes — base + source colors */
|
||||
blockquote {
|
||||
border-left: 3px solid var(--color-primary);
|
||||
margin: var(--space-md) 0;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-left: 3px solid var(--nord10);
|
||||
margin: 1.25em 0;
|
||||
padding: 0.75em 1em;
|
||||
background: var(--color-surface);
|
||||
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
||||
border-radius: 0 6px 6px 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);
|
||||
margin-top: 0.25em;
|
||||
font-size: 0.85rem;
|
||||
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);
|
||||
blockquote.quote-church {
|
||||
border-left-color: var(--nord14);
|
||||
}
|
||||
.why-card {
|
||||
padding: var(--space-md);
|
||||
blockquote.quote-saint {
|
||||
border-left-color: var(--nord15);
|
||||
}
|
||||
|
||||
/* Scripture block */
|
||||
.scripture-block {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-md);
|
||||
text-align: center;
|
||||
padding: 1.5em;
|
||||
border-radius: 8px;
|
||||
}
|
||||
: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);
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
.exodus-list li {
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--space-sm);
|
||||
margin-bottom: 0.5em;
|
||||
font-style: italic;
|
||||
}
|
||||
.exodus-cite {
|
||||
color: var(--color-text-tertiary);
|
||||
font-size: var(--text-sm);
|
||||
margin-top: var(--space-sm);
|
||||
font-size: 0.85rem;
|
||||
text-align: right;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
/* Commandments overview */
|
||||
.intro-text {
|
||||
font-size: var(--text-lg);
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
margin-bottom: var(--space-sm);
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.commandments-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
gap: 0.25em;
|
||||
}
|
||||
.commandment-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--radius-sm);
|
||||
gap: 0.75em;
|
||||
padding: 0.5em 0.75em;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: var(--transition-normal) ease;
|
||||
transition: all 0.2s 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);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
.commandment-item.inactive {
|
||||
background: var(--color-surface);
|
||||
opacity: 0.55;
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
.commandment-item.tablet-god {
|
||||
border-left: 3px solid var(--nord12);
|
||||
}
|
||||
.commandment-item.tablet-neighbor {
|
||||
border-left: 3px solid var(--nord10);
|
||||
}
|
||||
.commandment-nr {
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
min-width: var(--space-lg);
|
||||
font-size: 1.1em;
|
||||
min-width: 1.5em;
|
||||
text-align: center;
|
||||
}
|
||||
.commandment-text {
|
||||
flex: 1;
|
||||
}
|
||||
.commandment-arrow {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* First commandment detail */
|
||||
.first-commandment {
|
||||
scroll-margin-top: var(--space-xl);
|
||||
}
|
||||
/* First commandment */
|
||||
.gebot-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-lg);
|
||||
margin-bottom: var(--space-lg);
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.gebot-nr {
|
||||
font-size: 3.5em;
|
||||
font-weight: bold;
|
||||
color: var(--color-primary);
|
||||
color: var(--color-text-tertiary);
|
||||
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;
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
/* Three duties */
|
||||
@@ -541,153 +526,127 @@
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
flex-wrap: wrap;
|
||||
margin-top: var(--space-md);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.duty {
|
||||
text-align: center;
|
||||
flex: 0 1 160px;
|
||||
padding: var(--space-sm);
|
||||
padding: 0.5em;
|
||||
}
|
||||
.duty-circle {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-on-primary);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto var(--space-sm);
|
||||
margin: 0 auto 0.5em;
|
||||
}
|
||||
.duty-circle svg {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.duty-label {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
font-size: 1.15em;
|
||||
font-size: 1.1em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.duty p {
|
||||
margin: var(--space-xs) 0 0;
|
||||
font-size: var(--text-sm);
|
||||
margin: 0.25em 0 0;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
.duty-connector {
|
||||
width: 40px;
|
||||
width: 32px;
|
||||
height: 2px;
|
||||
background: var(--color-primary);
|
||||
margin-top: 35px;
|
||||
background: var(--color-border);
|
||||
margin-top: 32px;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* Religion virtue */
|
||||
/* Etymology */
|
||||
.etymologie {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-sm);
|
||||
font-size: 1.2em;
|
||||
margin: var(--space-md) 0;
|
||||
gap: 0.5em;
|
||||
font-size: 1.15em;
|
||||
margin: 1em 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.latin {
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.arrow, .equals {
|
||||
:global(.arrow) {
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
.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);
|
||||
gap: 0.5em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
.act-card {
|
||||
background: var(--color-surface);
|
||||
border: 2px solid transparent;
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-md);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
padding: 1em;
|
||||
cursor: pointer;
|
||||
transition: var(--transition-normal) ease;
|
||||
transition: all 0.2s ease;
|
||||
text-align: left;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
.act-card:hover, .act-card.open {
|
||||
border-color: var(--color-primary);
|
||||
border-color: var(--blue);
|
||||
}
|
||||
.act-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
gap: 0.5em;
|
||||
}
|
||||
.act-number {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-on-primary);
|
||||
background: var(--color-text-tertiary);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: var(--text-sm);
|
||||
font-size: 0.85rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.act-card.open .act-number,
|
||||
.act-card:hover .act-number {
|
||||
background: var(--blue);
|
||||
}
|
||||
.act-header h4 {
|
||||
margin: 0;
|
||||
font-size: var(--text-base);
|
||||
font-size: 1rem;
|
||||
}
|
||||
.act-desc {
|
||||
margin: var(--space-sm) 0 0;
|
||||
font-size: var(--text-sm);
|
||||
margin: 0.5em 0 0;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.act-rule {
|
||||
margin: var(--space-sm) 0 0;
|
||||
font-size: var(--text-sm);
|
||||
margin: 0.5em 0 0;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-tertiary);
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
@@ -696,36 +655,25 @@
|
||||
.act-card.open .act-rule {
|
||||
max-height: 6em;
|
||||
}
|
||||
|
||||
.acts-quote {
|
||||
margin-top: var(--space-lg);
|
||||
margin-top: 1.5em;
|
||||
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;
|
||||
border-left: 3px solid var(--nord12);
|
||||
padding-left: 1em;
|
||||
margin: 2.5em 0;
|
||||
}
|
||||
.warning-section h3 {
|
||||
color: var(--color-accent);
|
||||
color: var(--nord12);
|
||||
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,
|
||||
h1 { font-size: 1.75rem; }
|
||||
.acts-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -733,7 +681,7 @@
|
||||
display: none;
|
||||
}
|
||||
.duties-visual {
|
||||
gap: var(--space-sm);
|
||||
gap: 0.5em;
|
||||
}
|
||||
.gebot-header {
|
||||
flex-direction: column;
|
||||
@@ -741,7 +689,7 @@
|
||||
text-align: center;
|
||||
}
|
||||
.etymologie {
|
||||
font-size: var(--text-base);
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user