:root {
    --bg: #faf7f2;
    --text: #000;
    --accent: #800000
    --heading: #800000
    --link: blue;
    --link-visited: purple;
    --link-active: #c00;          /* dunkleres Rot: besserer Kontrast auf --bg */
    --tint: rgba(0, 128, 128, 0.1);
    --rule: rgba(0, 128, 128, 0.35);
    color-scheme: light dark;
}

/* Dunkelmodus: nur aktiv, wenn das Gerät ihn anfordert */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #15191a;
        --text: #e9e9df;
        --accent: #4fd1c5;
        --heading: #a9bcff;
        --link: #8ab4ff;
        --link-visited: #c9a6ff;
        --link-active: #ff8f86;
        --tint: rgba(79, 209, 197, 0.12);
        --rule: rgba(79, 209, 197, 0.4);
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 1em;      /* Sprungziele (Fußnoten, Inhalt) kleben nicht am Rand */
}
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1em;
    line-height: 1.5;
    text-align: left;
    -webkit-hyphens: auto;
    hyphens: auto;                /* benötigt lang-Attribut: <html lang="de"> */
    overflow-wrap: break-word;    /* lange URLs sprengen das Layout nicht */
    max-width: 45em;              /* angenehme Zeilenlänge */
    margin: 0 auto;
    padding: 1em;
}

/* Fließtext: auf schmalen Displays linksbündig (Blocksatz erzeugt dort Löcher),
   ab Tablet-Breite im Blocksatz */
p {
    text-align: left;
    text-wrap: pretty;
    margin: 0 0 0.75em;
}
@media (min-width: 40em) {
    p {
        text-align: justify;
    }
    td p,
    th p {
        text-align: left;     /* in Tabellenzellen kein Blocksatz */
    }
}

/* Reihenfolge LVHA (link, visited, hover, active) */
a:link {
    color: var(--link);
}
a:visited {
    color: var(--link-visited);
}
a:hover,
a:active {
    color: var(--link-active);
}
a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Überschriften */
h1,
h2,
h3 {
    text-wrap: balance;
}
h1,
h2 {
    text-align: center;
}
h1 {
    color: var(--accent);
    font-family: Garamond, "EB Garamond", Georgia, serif;
    font-size: 2em;
    line-height: 1.3;
    margin: 0.3em 0 0;
}
h2 {
    color: var(--heading);
    font-size: 1.5em;
    line-height: 1.3;
}
h3 {
    color: var(--accent);
}
h3 small {
    font-size: 0.75em;
    font-weight: normal;
}

.lead {
    text-align: center;
    color: var(--heading);
    margin-bottom: 1.5em;
}

/* Linkliste */
.linkliste {
    list-style: none;
    margin: 0;
    padding: 0;
}
.linkliste li {
    margin-bottom: 0.5em;
}
.linkliste a {
    display: inline-block;
    padding: 0.2em 0;       /* größere Tippfläche auf Mobilgeräten */
}
.linkliste.zentriert {
    text-align: center;
    font-size: 1.1em;
    font-weight: bold;
    margin: 1em 0 1.5em;
}
.linkliste.inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5em;
}

/* Fußbereich */
footer {
    margin-top: 2em;
    padding-top: 0.5em;
    border-top: 1px solid var(--accent);
    font-size: 0.9em;
}
footer p {
    margin-bottom: 0.25em;
    text-align: left;
}
footer .linkliste li {
    margin-bottom: 0;
}

/* Bilder */
img {
    max-width: 100%;
    height: auto;
}

/* Tabellen */
table {
    border-collapse: collapse;
    margin: 0 auto;
    max-width: 100%;
}
caption {
    font-weight: bold;
    color: var(--heading);
    padding-bottom: 0.4em;
}
th,
td {
    padding: 10px;
    text-align: left;
    vertical-align: top;
}
th {
    color: var(--heading);
}

/* Messwert-Tabelle (z. B. pegel.htm) */
.messwerte {
    margin: 1em auto 1.5em;
}
.messwerte th,
.messwerte td {
    padding: 0.4em 1em;
    border-bottom: 1px solid var(--rule);
}
.messwerte .zahl {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.messwerte .aktuell {
    background: var(--tint);
    font-weight: bold;
}

/* Hinweis- und Bildunterschrift-Blöcke */
.hinweis {
    background: var(--tint);
    border-left: 3px solid var(--accent);
    padding: 0.5em 1em;
    margin: 1em 0;
}
figure {
    margin: 1em 0;
}
figcaption {
    font-size: 0.9em;
    margin-top: 0.4em;
}

/* Foto-Galerie mit Bildunterschriften (z. B. rhein.htm, 2026) */
.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
    gap: 1.5em 1em;
    margin: 0 0 1.5em;
}
.galerie figure {
    margin: 0;
}
.galerie a {
    display: block;
}
.galerie img {
    display: block;
    width: 100%;
    height: auto;
}
.galerie figcaption {
    text-align: left;
}

/* Thumbnail-Reihen (z. B. rhein.htm, 2003) */
.thumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5em;
    margin: 0 0 1.5em;
}
.thumbs a {
    display: inline-block;
    font-size: 0.85em;
    text-align: center;
    line-height: 1.3;
}
.thumbs a.gruppe {
    display: flex;
    gap: 0.5em;
}
.thumbs img {
    display: block;
    margin: 0 auto 0.2em;
}

/* ------------------------------------------------------------
   Wissenschaftlicher Artikel (<main class="artikel">)
   ------------------------------------------------------------ */
.artikel h1,
.chronik h1 {
    margin-bottom: 0.6em;
}
.artikel h2,
.chronik h2 {
    text-align: left;
    font-size: 1.3em;
    margin: 1.8em 0 0.5em;
}

/* Inhaltsverzeichnis */
.toc {
    background: var(--tint);
    border-left: 3px solid var(--accent);
    padding: 0.6em 1em;
    margin: 1em 0 1.5em;
}
.toc h2,
.chronik .toc h2 {
    font-size: 1.1em;
    margin: 0 0 0.3em;
}
.toc ul,
.toc ol {
    margin: 0;
    padding-left: 1.4em;
}
.toc a {
    display: inline-block;
    padding: 0.15em 0;      /* Tippfläche */
}

/* Listen im Text */
.artikel ul,
.artikel ol {
    margin: 0 0 0.75em;
    padding-left: 1.6em;
}
.artikel li {
    margin-bottom: 0.4em;
}

/* Zitate */
blockquote {
    margin: 1em 0 1em 1em;
    padding-left: 1em;
    border-left: 3px solid var(--accent);
}
blockquote p:last-child {
    margin-bottom: 0;
}

/* Predigttext (lateinisch): Serifenschrift, Seitenwechsel dezent */
.predigttext p,
.latein p {
    font-family: Georgia, "Times New Roman", serif;
}
.latein .quelle {
    font-family: inherit;
}
.seite {
    color: var(--accent);
    font-size: 0.8em;
    white-space: nowrap;
}

/* Fußnoten / Anmerkungen */
sup {
    line-height: 0;
}
.fn a {
    padding: 0.2em 0.15em;  /* größere Tippfläche */
    text-decoration: none;
}
.endnoten {
    font-size: 0.9em;
}
.endnoten li {
    text-align: left;
}
.endnoten li:target,
.fn a:target {
    background: var(--tint);
}
.rueck {
    text-decoration: none;
    margin-left: 0.3em;
}

/* Literaturverzeichnis: hängender Einzug */
.artikel .literatur {
    list-style: none;
    padding: 0;
}
.literatur li {
    padding-left: 2em;
    text-indent: -2em;
    text-align: left;
}

/* ------------------------------------------------------------
   Gedichtlisten, Lebensdaten, antike Zitate (z. B. lesbia.htm)
   ------------------------------------------------------------ */
hr {
    border: 0;
    border-top: 1px solid var(--accent);
    margin: 1.5em 0;
}

.gedichte {
    list-style: none;
    margin: 0 0 1em;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5em, 1fr));
    gap: 0 1em;
}
.gedichte li {
    margin: 0;
}
.gedichte a {
    display: inline-block;
    padding: 0.2em 0.1em;   /* Tippfläche */
}
.stern {
    color: var(--accent);
    font-weight: bold;
}

.daten {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4em 1em;
    margin: 0 0 0.75em;
}
.daten dt {
    color: var(--heading);
    font-weight: bold;
}
.daten dd {
    margin: 0;
}
@media (max-width: 30em) {
    .daten {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .daten dd {
        margin-bottom: 0.5em;
    }
}

/* Zitate mit Zeilenumbruch (Verse) und Quellenangabe */
.verse p {
    text-align: left;
}
.quelle {
    color: var(--accent);
    font-size: 0.85em;
    text-align: left;
}

/* ------------------------------------------------------------
   Chronik-Seiten (<main class="chronik">) mit Dokumentenlisten
   (<table class="dokumente">: Jahr/Titel, Kurzbeschreibung, Bild)
   ------------------------------------------------------------ */
body:has(> main.chronik) {
    max-width: 60em;              /* mehr Platz für drei Spalten */
}
.chronik h2[id] {
    scroll-margin-top: 1em;
}
.chronik h2:target {
    background: var(--tint);
}

.dokumente {
    width: 100%;
    margin: 0 0 1.5em;
}
.dokumente th,
.dokumente td {
    padding: 0.5em 0.75em;
    border-bottom: 1px solid var(--rule);
}
.dokumente thead th {
    border-bottom: 2px solid var(--accent);
    white-space: nowrap;
}
.dokumente tbody th {
    color: var(--accent);         /* Zeilenüberschrift (Gruppe/Jahr) */
}
.dokumente tbody + tbody > tr:first-child > * {
    border-top: 2px solid var(--rule);   /* Gruppen voneinander absetzen */
}
.dokumente tbody tr:hover {
    background: var(--tint);
}
.dokumente td p {
    margin: 0 0 0.4em;
}
.dokumente td p:last-child {
    margin-bottom: 0;
}

/* Schmale Displays: Zeilen als Karten, Spaltenköpfe als Beschriftung */
@media (max-width: 40em) {
    .dokumente,
    .dokumente tbody,
    .dokumente tr,
    .dokumente th,
    .dokumente td {
        display: block;
    }
    .dokumente thead {            /* nur visuell ausgeblendet, bleibt für Screenreader */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
    .dokumente tr {
        padding: 0.4em 0;
        border-bottom: 1px solid var(--rule);
    }
    .dokumente th,
    .dokumente td {
        border: 0;
        padding: 0.15em 0.25em;
    }
    .dokumente tbody th {
        background: var(--tint);
        padding: 0.3em 0.6em;
    }
    .dokumente tbody + tbody > tr:first-child > * {
        border-top: 0;
    }
    .dokumente td:empty {
        display: none;
    }
    .dokumente td[data-label]::before {
        content: attr(data-label) ": ";
        color: var(--heading);
        font-size: 0.85em;
    }
    .dokumente tbody tr:hover {
        background: none;
    }
}

/* ------------------------------------------------------------
   Rätselseiten (<main class="raetsel">, z. B. fisch.htm)
   ------------------------------------------------------------ */
.raetsel h2 {
    text-align: left;
    font-size: 1.3em;
    margin: 1.5em 0 0.5em;
}
.raetsel ol {
    margin: 0 0 1em;
    padding-left: 2em;
}
.raetsel li {
    margin-bottom: 0.3em;
}
.raetsel ol li::marker {
    color: var(--accent);
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}

/* Rechnung (SEND + MORE = MONEY): Ziffern exakt untereinander */
.raetsel pre {
    width: fit-content;
    margin: 1em auto;
    padding: 0.5em 1.5em;
    background: var(--tint);
    border-left: 3px solid var(--accent);
    font-size: 1.3em;
    line-height: 1.4;
    overflow-x: auto;
    max-width: 100%;
}

/* Aufklappbare Lösung */
.raetsel details {
    margin: 2em 0 1em;
    border: 1px solid var(--rule);
    border-radius: 4px;
}
.raetsel summary {
    cursor: pointer;
    padding: 0.6em 1em;
    color: var(--heading);
    font-weight: bold;
}
.raetsel summary:hover {
    background: var(--tint);
}
.raetsel summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.raetsel details[open] summary {
    border-bottom: 1px solid var(--rule);
}
.raetsel details > :not(summary) {
    margin-left: 1em;
    margin-right: 1em;
}
.raetsel details > p:first-of-type {
    margin-top: 0.75em;
}
.raetsel details > pre {
    margin: 1em auto;             /* Rechnung auch in der Lösung mittig */
}
.raetsel .frage {
    text-align: left;             /* kurze Fragezeile nicht im Blocksatz zerreißen */
    margin-top: 1em;
}

/* Breite Tabellen auf dem Handy seitlich scrollen statt Layout sprengen */
.scroll {
    overflow-x: auto;
    margin-bottom: 1em;
}
.loesung {
    margin: 0.5em auto 0.5em 0;
}
.loesung thead th {
    border-bottom: 2px solid var(--accent);
    text-align: center;
}
.loesung tbody th {
    color: var(--accent);
    white-space: nowrap;
}
.loesung th,
.loesung td {
    padding: 0.35em 0.7em;
}

/* Druck: immer hell und schwarz auf weiß, auch bei Dunkelmodus */
@media print {
    body {
        background: #fff;
        color: #000;
        max-width: none;
        font-size: 11pt;
        padding: 0;
    }
    footer nav,
    .toc,
    .rueck,
    .raetsel details {            /* Rätselblatt ohne Lösung drucken */
        display: none;
    }
    a:link,
    a:visited {
        color: inherit;           /* a:link hat höhere Spezifität als a */
    }
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        word-break: break-all;
    }
    h1,
    h2,
    h3 {
        break-after: avoid;
    }
    p {
        orphans: 3;
        widows: 3;
    }
    blockquote,
    figure,
    .dokumente tr,
    .endnoten li,
    .literatur li {
        break-inside: avoid;
    }
    .dokumente thead {
        display: table-header-group;   /* Kopfzeile auf jeder Druckseite */
    }
    .dokumente tbody tr:hover {
        background: none;
    }
}