/* Engerser Geschichte(n) – gemeinsames Stylesheet für alle Seiten.
   Farben: Rheinschiefer (Tinte), Schlossputz/Sandstein (Akzent), Rhein (Zweitfarbe).
   Hell/Dunkel folgt der Systemeinstellung. */
:root {
  --papier: #f3f4f1;      /* Schieferweiß, leicht grünstichig wie Rheinlicht */
  --flaeche: #ffffff;
  --tinte: #1d2a33;       /* Rheinschiefer */
  --leise: #5b6a72;
  --linie: #cfd6d6;
  --putz: #b5654a;        /* Schlossputz/Sandstein, Akzent – Band VII */
  --putz-hell: #f1dfd7;
  --strom: #3f6f86;       /* Rhein – Band VIII */
  --strom-hell: #dbe7ec;
  --ocker: #8a6a1c;        /* Druckerschwärze auf altem Papier – Antiquarius 1854 */
  --ocker-hell: #efe5c6;
  --schrift: "Literata", Georgia, "Times New Roman", serif;
  --etikett: "Alegreya Sans SC", "Gill Sans", "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #131a1f; --flaeche: #1b242a; --tinte: #e4e9ea; --leise: #9aa8ae; --linie: #2e3b42;
    --putz: #e08d70; --putz-hell: #3a2620; --strom: #7fb1c8; --strom-hell: #1f3540;
    --ocker: #d4b25c; --ocker-hell: #3a3119; color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 17px/1.6 var(--schrift); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--putz); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--putz); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Seitenbreite und Seitenrand */
.innen, .rahmen { max-width: 980px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.rahmen { padding-block: 32px 64px; }
.schmal { max-width: 720px; }

.etikett { font-family: var(--etikett); letter-spacing: .06em; font-weight: 500; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.1; margin: 0; font-weight: 600; text-wrap: balance; }
h2 { font-size: 1.6rem; line-height: 1.2; font-weight: 600; margin: 0; text-wrap: balance; }
.kopf p { max-width: 62ch; color: var(--leise); margin: 12px 0 0; }
.kopf .etikett { color: var(--putz); font-size: .95rem; }

/* Kopfleiste */
.leiste { border-bottom: 1px solid var(--linie); background: var(--papier); }
.leiste .innen { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: baseline; justify-content: space-between; padding-block: 12px; }
.marke { font-family: var(--etikett); font-weight: 700; font-size: 1.15rem; letter-spacing: .04em; color: var(--tinte); text-decoration: none; }
.leiste nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.leiste nav a { font-family: var(--etikett); letter-spacing: .05em; color: var(--tinte); text-decoration: none; padding-block: 4px; }
.leiste nav a:hover, .leiste nav a[aria-current="page"] { color: var(--putz); }

/* Fußzeile */
.fuss { border-top: 1px solid var(--linie); margin-top: 48px; color: var(--leise); font-size: .9rem; }
.fuss .innen { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-block: 20px 32px; }
.fuss a { color: var(--leise); }

/* Fließtextseiten (Impressum, Datenschutz) */
.text h2 { font-size: 1.2rem; margin-top: 32px; }
.text p, .text li { max-width: 66ch; }
.text address { font-style: normal; }