/* omnist.world
   Papier und Tinte, ein Akzent. Keine Farbe je Religion, damit keine
   Tradition durch Gestaltung hervorgehoben wird. Struktur entsteht durch
   Linien und Abstand, nicht durch Kästen. */

/* Die Leseschrift liegt bei uns, nicht bei Google: keine fremde
   Verbindung beim Aufruf, kein Warten auf einen anderen Server, und
   niemand erfaehrt nebenbei, wer die Seite liest. */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/literata-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/literata-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --paper: #faf8f5;
    --paper-tief: #f2eee8;
    --ink: #1a1a1a;
    --muted: #6b6b6b;
    --leise: #9a9590;
    --accent: #c45a3c;
    --line: #ddd8d1;
    --breite: 1100px;
    --lesebreite: 62ch;
    /* Zwei Schriften mit klaren Aufgaben: die Serife traegt den Text,
       den man liest; die serifenlose alles, was die Seite ueber sich
       selbst sagt (Navigation, Beschriftungen, Zahlen, Tabellen). Der
       Systemstapel kostet keine Ladezeit und sieht auf jedem Geraet
       nach diesem Geraet aus. */
    --serif: Literata, Georgia, "Times New Roman", serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #17151300;
        --paper: #171513;
        --paper-tief: #201d1a;
        --ink: #f0ece8;
        --muted: #a8a29b;
        --leise: #6f6a64;
        --accent: #e07b5a;
        --line: #322e2a;
    }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--serif);
    font-size: 17.5px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

.seite { max-width: var(--breite); margin: 0 auto; padding: 2rem 1.5rem 5rem; }

/* ─── Kopf ─────────────────────────────────────────────────────────────── */

.kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 1.5rem;
    font-size: 0.85rem;
}

.kopf a { color: var(--muted); text-decoration: none; margin-left: 1.2rem; }
.kopf a:hover, .kopf a[aria-current] { color: var(--ink); }
.marke { font-size: 1rem; letter-spacing: 0.02em; color: var(--ink); margin: 0; }
.marke a { color: var(--ink); margin: 0; }

.sprachwahl button {
    font: inherit; font-size: 0.85rem; background: none; border: 0;
    color: var(--leise); cursor: pointer; padding: 0 0.3rem;
}
.sprachwahl button[aria-pressed="true"] { color: var(--ink); }

/* ─── Slogan ───────────────────────────────────────────────────────────── */

.slogan {
    font-size: clamp(1.35rem, 2.6vw, 1.9rem);
    font-weight: 300;
    line-height: 1.35;
    max-width: 32ch;
    margin: 1rem 0 3.5rem;
    text-wrap: balance;
}
.slogan .zweite { color: var(--muted); display: block; margin-top: 0.4rem; }

/* ─── Abschnitte ───────────────────────────────────────────────────────── */

section { margin: 0 0 4rem; }

.abschnitt-kopf {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; flex-wrap: wrap;
    border-top: 1px solid var(--line);
    margin: 3.2rem 0 1.1rem; padding-top: 1.1rem;
}
/* Die Ueberschrift war kleiner als der Fliesstext und in Versalien: ein
   Register fuer Kleingedrucktes, obwohl sie die Seite gliedert. */
.abschnitt-kopf h2 {
    font-family: var(--sans);
    font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em;
    color: var(--ink); margin: 0; text-transform: none;
}
.abschnitt-kopf .hinweis {
    font-family: var(--sans);
    font-size: 0.82rem; color: var(--leise);
}
.erklaerung { max-width: var(--lesebreite); color: var(--muted); font-size: 0.92rem; }

/* Eine Einschraenkung, die man nicht ueberlesen soll: keine Signalfarbe,
   sondern ein Strich am Rand. Die Seite warnt nicht, sie legt offen. */
.erklaerung.warnung {
    border-left: 2px solid var(--accent);
    padding: 0.55rem 0 0.55rem 0.9rem;
    margin: 1.4rem 0 0;
}
.erklaerung.warnung strong { color: var(--ink); font-weight: 600; }
.einschraenkung {
    font-size: 0.82rem; color: var(--leise); margin: 0.35rem 0 0;
}

/* ─── Gemeinsamer Wert ─────────────────────────────────────────────────── */

.gemeinsam { text-align: center; padding: 1rem 0 0; }
.gemeinsam .wort {
    font-size: clamp(2.4rem, 7vw, 4rem); font-weight: 300;
    color: var(--accent); line-height: 1.1; display: block;
}
.gemeinsam .unterzeile {
    font-size: 0.9rem; color: var(--muted); max-width: 46ch;
    margin: 0.8rem auto 0;
}

/* ─── Diagramme ────────────────────────────────────────────────────────── */

.diagramm { width: 100%; overflow: visible; }

/* Der Kompass bleibt rund und bekommt Luft fuer die Beschriftung. */
#kompass { max-width: 560px; margin: 0 auto; }
#kompass svg { display: block; }
#kompass-legende { justify-content: center; }
.diagramm text { font-family: var(--sans); fill: var(--muted); font-size: 12px; }
.diagramm .achse line, .diagramm .achse path { stroke: var(--line); }
.diagramm .gitter { stroke: var(--line); stroke-width: 0.5; fill: none; }
.diagramm .wertname { fill: var(--muted); font-size: 11px; }
.diagramm .wertname.betont { fill: var(--accent); font-weight: 600; }

.legende {
    display: flex; flex-wrap: wrap; gap: 1.2rem;
    font-size: 0.82rem; color: var(--muted); margin-top: 1rem;
}
.legende span { display: inline-flex; align-items: center; gap: 0.45rem; }
.legende svg { overflow: visible; }

.leer { color: var(--leise); font-size: 0.9rem; padding: 2rem 0; }

/* ─── Traditionszeilen ─────────────────────────────────────────────────── */

.traditionen { display: grid; gap: 0; }
.tradition {
    display: grid; grid-template-columns: 12rem 1fr auto; gap: 1.5rem;
    align-items: baseline; border-top: 1px solid var(--line); padding: 1.1rem 0;
}
.tradition h3 { font-size: 0.95rem; font-weight: 600; }
.tradition .zahl { font-size: 0.8rem; color: var(--leise); white-space: nowrap; }
.tradition p { color: var(--muted); font-size: 0.9rem; max-width: 52ch; }

/* ─── Listen ───────────────────────────────────────────────────────────── */

.eintrag {
    display: block; border-top: 1px solid var(--line);
    padding: 1rem 0; text-decoration: none; color: inherit;
}
.eintrag:hover h3 { color: var(--accent); }
.eintrag h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.2rem; }
.meta { font-size: 0.82rem; color: var(--leise); }
.werte { margin-top: 0.4rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wertmarke {
    font-size: 0.74rem; color: var(--muted);
    border: 1px solid var(--line); border-radius: 2px; padding: 0.1rem 0.45rem;
}
.wertmarke.stark { color: var(--ink); border-color: var(--muted); }

/* ─── Fuß ──────────────────────────────────────────────────────────────── */

.fuss {
    border-top: 1px solid var(--line); margin-top: 4rem; padding-top: 1.5rem;
    font-size: 0.82rem; color: var(--leise);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.fuss a { color: var(--muted); }

/* ─── Schmale Bildschirme ──────────────────────────────────────────────── */

@media (max-width: 720px) {
    body { font-size: 16px; }
    .seite { padding: 1.2rem 1.1rem 3rem; }
    .slogan { margin-bottom: 2.5rem; }
    .tradition { grid-template-columns: 1fr auto; gap: 0.3rem 1rem; }
    .tradition p { grid-column: 1 / -1; }
    .kopf { flex-wrap: wrap; }
    .kopf a { margin-left: 0; margin-right: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ─── Ein einzelner Wert ───────────────────────────────────────────────── */

.wertbalken { display: grid; gap: 0.55rem; margin-top: 0.4rem; }
.wertbalken-zeile {
    display: grid; align-items: center; gap: 0.7rem;
    grid-template-columns: 9rem 1fr 2.6rem 8rem;
}
.wertbalken-zeile .name { font-size: 0.9rem; }
.wertbalken-zeile .balken {
    height: 6px; background: var(--line); border-radius: 3px; overflow: hidden;
}
.wertbalken-zeile .fuellung {
    display: block; height: 100%; background: var(--accent); opacity: 0.75;
}
.wertbalken-zeile .zahl { font-size: 0.8rem; color: var(--muted); text-align: right; }
.wertbalken-zeile .grundlage { font-size: 0.76rem; color: var(--leise); }
/* Wenige Inhalte, also noch keine Aussage ueber die Tradition. Die Zeile
   bleibt lesbar, tritt aber zurueck. */
.wertbalken-zeile.duenn { opacity: 0.55; }
.wertbalken-zeile.duenn .fuellung {
    background: none;
    background-image: repeating-linear-gradient(90deg,
        var(--accent) 0 3px, transparent 3px 6px);
}

/* Die Stimmen stehen in zwei Spalten, damit zwei Traditionen tatsaechlich
   nebeneinander liegen und nicht nur untereinander. */
.stimmen {
    display: grid; gap: 1.4rem; margin-top: 1.6rem;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.stimme { margin: 0; }
.stimme blockquote {
    margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--line);
    font-size: 1.02rem; line-height: 1.55; color: var(--ink);
}
.stimme figcaption {
    margin-top: 0.5rem; padding-left: 1rem;
    font-size: 0.78rem; color: var(--leise);
    display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.stimme figcaption .tradition { color: var(--accent); }
.stimme figcaption a { color: var(--muted); }
.werteliste { font-size: 0.9rem; color: var(--muted); line-height: 2; }

@media (max-width: 620px) {
    .wertbalken-zeile {
        grid-template-columns: 1fr 2.6rem; row-gap: 0.2rem;
    }
    .wertbalken-zeile .balken { grid-column: 1 / -1; }
    .wertbalken-zeile .grundlage { grid-column: 1 / -1; }
}

/* ─── Quellenkatalog ───────────────────────────────────────────────────── */

.eintrag.quelle h3 {
    display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
}
.eintrag.quelle .zustand {
    font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--leise); border: 1px solid var(--line);
    border-radius: 2px; padding: 0.05rem 0.35rem; font-weight: 400;
}
.eintrag.quelle .zustand.liefert { color: var(--accent); border-color: var(--accent); }
.eintrag.quelle.still { opacity: 0.62; }
.meta.still { color: var(--leise); font-style: italic; }
.eintrag.quelle .meta a { color: var(--accent); }

/* ─── Bestandsverzeichnis ──────────────────────────────────────────────── */

.filterleiste {
    display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem;
    margin: 1.4rem 0 2rem;
}
.filterleiste a {
    font-size: 0.82rem; color: var(--muted); text-decoration: none;
    border: 1px solid var(--line); border-radius: 2px;
    padding: 0.2rem 0.55rem; white-space: nowrap;
}
.filterleiste a:hover { color: var(--ink); border-color: var(--muted); }
.filterleiste a.aktiv {
    color: var(--accent); border-color: var(--accent);
}
.filterleiste .zahl { color: var(--leise); font-size: 0.74rem; }

.eintrag.inhalt { display: block; text-decoration: none; }
.eintrag.inhalt .anriss {
    color: var(--muted); font-size: 0.92rem; margin: 0.4rem 0 0;
    max-width: var(--lesebreite);
}

.blaettern {
    display: flex; align-items: center; gap: 1.2rem;
    margin: 2.5rem 0 1rem; font-size: 0.88rem; color: var(--leise);
}
.blaettern a { color: var(--accent); }

/* ─── Wo die Wege auseinandergehen ─────────────────────────────────────── */

.spannungszeile {
    display: grid; align-items: center; gap: 0.7rem;
    grid-template-columns: 11rem 1fr 14rem 2.2rem;
    padding: 0.45rem 0; border-bottom: 1px solid var(--line);
}
.spannungszeile:last-child { border-bottom: 0; }
.spannungszeile .bereich { font-size: 0.9rem; }
.spannungszeile .balken {
    height: 6px; background: var(--line); border-radius: 3px; overflow: hidden;
}
.spannungszeile .fuellung {
    display: block; height: 100%; background: var(--accent); opacity: 0.7;
}
.spannungszeile .pole { font-size: 0.78rem; color: var(--leise); }
.spannungszeile .pole .gefahr,
.spannungszeile .pole .gabe { color: var(--muted); }
.spannungszeile .pole .pfeil { padding: 0 0.3rem; }
.spannungszeile .zahl { font-size: 0.8rem; color: var(--muted); text-align: right; }

@media (max-width: 680px) {
    .spannungszeile {
        grid-template-columns: 1fr 2.2rem; row-gap: 0.25rem;
    }
    .spannungszeile .balken { grid-column: 1 / -1; }
    .spannungszeile .pole { grid-column: 1 / -1; }
}
.geschaetzt { color: var(--leise); border-bottom: 1px dotted var(--leise); cursor: help; }

/* ─── Weltbild ─────────────────────────────────────────────────────────── */

.weltbildzeile {
    display: grid; align-items: center; gap: 0.8rem;
    grid-template-columns: 9rem 1fr 5.5rem;
    padding: 0.4rem 0;
}
.weltbildzeile .name { font-size: 0.9rem; }
.weltbildzeile .grundlage { font-size: 0.76rem; color: var(--leise); }
.weltbildzeile .verlauf {
    display: flex; height: 26px; border-radius: 2px; overflow: hidden;
    background: var(--paper-tief);
}
.weltbildzeile .teil {
    display: flex; align-items: center; justify-content: center;
    min-width: 0; overflow: hidden; padding: 0 0.3rem;
    background: var(--accent); color: var(--paper);
    border-right: 1px solid var(--paper);
    font-size: 0.72rem; white-space: nowrap; cursor: help;
}
.weltbildzeile .teil:nth-child(2) { opacity: 0.72; }
.weltbildzeile .teil:nth-child(3) { opacity: 0.52; }
.weltbildzeile .teil:nth-child(4) { opacity: 0.36; }
.weltbildzeile .teil:nth-child(n+5) { opacity: 0.24; }
.weltbildzeile .teil:last-child { border-right: 0; }
.weltbildzeile .wortlaut { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 620px) {
    .weltbildzeile { grid-template-columns: 1fr 5rem; row-gap: 0.2rem; }
    .weltbildzeile .verlauf { grid-column: 1 / -1; }
}
.these {
    font-size: 1.06rem; line-height: 1.6; color: var(--ink);
    border-left: 2px solid var(--accent); padding-left: 1.2rem;
    margin: 1.5rem 0; max-width: var(--lesebreite);
}
.weltbild-einzeln { margin: 0.6rem 0 0; }
.weltbild-einzeln dt {
    font-size: 0.78rem; color: var(--leise); margin-top: 0.7rem;
}
.weltbild-einzeln dd {
    margin: 0.1rem 0 0; font-size: 0.94rem; color: var(--muted);
}
.weltbild-einzeln .erschlossen { color: var(--leise); font-size: 0.82rem; }
.erklaerung.still { color: var(--leise); font-size: 0.85rem; margin: 0.6rem 0 0.2rem; }

/* Der Vergleich als Tabelle, bevor das Skript ihn durch Grafiken ersetzt.
   Sie ist die Fassung fuer Leser ohne JavaScript und fuer Suchmaschinen. */
.vergleichstabelle {
    width: 100%; border-collapse: collapse; font-size: 0.88rem;
    margin-top: 0.6rem;
}
.vergleichstabelle caption {
    text-align: left; color: var(--leise); font-size: 0.8rem;
    padding-bottom: 0.5rem;
}
.vergleichstabelle th {
    text-align: left; font-weight: 400; color: var(--leise);
    font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em;
    padding: 0.3rem 0.6rem 0.3rem 0; border-bottom: 1px solid var(--line);
}
.vergleichstabelle td {
    padding: 0.34rem 0.6rem 0.34rem 0; border-bottom: 1px solid var(--line);
    color: var(--muted);
}
.vergleichstabelle tr.duenn td { opacity: 0.58; }

/* Die Kurzdefinition steht ueber allem anderen: sie beantwortet die Frage,
   mit der jemand auf diese Seite kommt. */
.definition {
    font-size: 1.14rem; line-height: 1.65; color: var(--ink);
    margin: 0.6rem 0 0;
}

/* Der Hinweis auf die Unterstuetzung bleibt ein Knopf, keine Werbeflaeche:
   die Seite bittet nicht, sie nennt ihre Kosten. */
.knopf {
    display: inline-block; margin-left: 0.4rem;
    border: 1px solid var(--accent); color: var(--accent);
    border-radius: 3px; padding: 0.3rem 0.75rem;
    font-size: 0.88rem; text-decoration: none;
}
.knopf:hover { background: var(--accent); color: var(--paper); }
.filterleiste .leistenname {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--leise); align-self: center; margin-right: 0.2rem;
    min-width: 4.5rem;
}
.meta.still .wartet { color: var(--accent); opacity: 0.75; font-style: normal; }
.vergleichstabelle .spanne { color: var(--leise); font-size: 0.82rem; }
.vergleichstabelle .rahmung { color: var(--leise); font-size: 0.82rem; }

/* Verweise in Vergleichstabellen sollen wie Text aussehen, nicht wie
   Fussnoten: die Tabelle ist zum Lesen da, nicht zum Klicken. */
.vergleichstabelle a {
    color: var(--ink); text-decoration: none;
    border-bottom: 1px solid var(--line);
}
.vergleichstabelle a:hover { border-bottom-color: var(--accent); color: var(--accent); }

/* Die Kernaussage der Weltbildseite: wo alle gleich antworten. */
.befunde { list-style: none; margin: 0.6rem 0 1.6rem; padding: 0; }
.befunde li { padding: 0.45rem 0; border-bottom: 1px solid var(--line);
              font-size: 0.95rem; color: var(--muted); }
.befunde li strong { color: var(--ink); font-weight: 400; margin-right: 0.4rem; }
.befunde .antwort { display: block; color: var(--accent); font-size: 0.9rem; }

.quintessenz { font-size: 1.04rem; line-height: 1.7; max-width: var(--lesebreite);
               margin: 0.4rem 0 0.6rem; }

/* Der Sprachwechsel steht fuer sich, oben rechts, nicht als Reiter. */
.kopf { position: relative; }
.kopf .sprachwechsel {
    position: absolute; top: 0; right: 0;
    font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--muted); text-decoration: none;
    border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem 0.7rem;
}
.kopf .sprachwechsel:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 620px) {
    .kopf .sprachwechsel { position: static; display: inline-block; margin-top: 0.4rem; }
}

/* Eine Farbe je Religion, dieselbe auf jeder Seite. Hell und dunkel
   getrennt, damit die Flaechen auf beiden Gruenden lesbar bleiben. */
:root {
    --f-christentum: #b5542a; --f-islam: #2f7d5b; --f-judentum: #3b6fb6;
    --f-buddhismus: #c48a1a; --f-hinduismus: #b03a6a; --f-saekular: #6b6b6b;
    --f-sikhismus: #7a4fb0; --f-bahai: #2a8f9c; --f-progressiv: #d13c8a;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --f-christentum: #e07a4a; --f-islam: #4fb384; --f-judentum: #6a9de0;
        --f-buddhismus: #e6b04a; --f-hinduismus: #e06a98; --f-saekular: #9a9a9a;
        --f-sikhismus: #a985e0; --f-bahai: #55c0cc; --f-progressiv: #f06aae;
    }
}
:root[data-theme="dark"] {
    --f-christentum: #e07a4a; --f-islam: #4fb384; --f-judentum: #6a9de0;
    --f-buddhismus: #e6b04a; --f-hinduismus: #e06a98; --f-saekular: #9a9a9a;
    --f-sikhismus: #a985e0; --f-bahai: #55c0cc; --f-progressiv: #f06aae;
}
.kompass .schnitt { fill: var(--ink); fill-opacity: 0.07; stroke: none; }
.kompass .gitter { stroke: var(--line); fill: none; }
#kompass-legende { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.schalter {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font: inherit; font-size: 0.86rem; cursor: pointer;
    background: transparent; color: var(--muted);
    border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.8rem 0.3rem 0.6rem;
}
.schalter .punkt { width: 10px; height: 10px; border-radius: 50%;
                   background: var(--f); opacity: 0.35; }
.schalter .zahl { color: var(--leise); font-size: 0.78rem; }
.schalter.an { color: var(--ink); border-color: var(--f); }
.schalter.an .punkt { opacity: 1; }
.schalter:hover { border-color: var(--f); }

.kompass .ringwert { font-size: 9px; fill: var(--leise); }

/* Aufklappbare Details: ohne JavaScript, mit <details>/<summary>. */
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details.bereich > summary, details.land > summary { display:flex; justify-content:space-between; align-items:baseline; padding: 0.6rem 0; border-top: 1px solid var(--line); }
details > summary::after { content: "+"; color: var(--leise); margin-left: 0.6rem; }
details[open] > summary::after { content: "–"; }