/* ==========================================================================
   NGO ONLINE – LEXIKON DESIGN SYSTEM
   Golden Master: Harz
   Stand: 2026-08-18

   Ziel:
   - ruhig
   - hochwertig
   - redaktionell
   - informationsorientiert
   - keine Dashboard-/Card-Optik

   Legacy-kompatibel: Django 1.4 / Python 2.7 / RST
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */

:root {
    --ngo-lex-text: #26312a;
    --ngo-lex-text-soft: #566158;
    --ngo-lex-muted: #737d75;

    --ngo-lex-green: #365f42;
    --ngo-lex-green-dark: #294b34;
    --ngo-lex-green-soft: #edf3ed;

    --ngo-lex-surface: #f8f9f6;
    --ngo-lex-surface-strong: #f1f4ef;
    --ngo-lex-border: #dfe5de;

    --ngo-lex-radius: 16px;
    --ngo-lex-content-width: 75ch;
}


/* --------------------------------------------------------------------------
   2. GRUNDLEGENDER REDAKTIONELLER RHYTHMUS
   -------------------------------------------------------------------------- */

.ngo-post-body {
    color: var(--ngo-lex-text);
}

.ngo-post-body,
.ngo-post-body * {
    box-sizing: border-box;
}

.ngo-post-body p {
    line-height: 1.72;
}

.ngo-post-body .section > p,
.ngo-post-body .section > ul,
.ngo-post-body .section > ol,
.ngo-post-body .section > dl {
    max-width: var(--ngo-lex-content-width);
}

.ngo-post-body .section > h2 {
    margin-top: 3.5rem;
    margin-bottom: 1.25rem;

    font-size: clamp(1.65rem, 1.4rem + .7vw, 2.15rem);
    line-height: 1.2;
    letter-spacing: -.025em;

    color: var(--ngo-lex-text);
}

.ngo-post-body .section > h3 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;

    font-size: clamp(1.25rem, 1.1rem + .4vw, 1.55rem);
    line-height: 1.3;

    color: var(--ngo-lex-text);
}


/* --------------------------------------------------------------------------
   3. LEXIKON INTRO
   -------------------------------------------------------------------------- */

.ngo-lexicon-intro {
    max-width: 52rem;

    margin: 1.15rem 0 2rem;
}

.ngo-lexicon-eyebrow {
    margin: 0 0 .75rem;

    font-size: .76rem;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: .115em;
    text-transform: uppercase;

    color: var(--ngo-lex-green);
}

.ngo-lexicon-lead {
    max-width: 48rem !important;

    margin: 0;

    font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem);
    line-height: 1.65 !important;
    font-weight: 400;

    letter-spacing: -.01em;

    color: var(--ngo-lex-text-soft);
}


/* --------------------------------------------------------------------------
   4. FACT STRIP
   -------------------------------------------------------------------------- */

.ngo-fact-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    width: 100%;
    margin: 2rem 0 2.5rem;

    overflow: hidden;

    background: var(--ngo-lex-surface);
    border: 1px solid var(--ngo-lex-border);
    border-radius: var(--ngo-lex-radius);
}

.ngo-fact {
    min-width: 0;

    padding: 1.4rem 1.25rem 1.35rem;
}

.ngo-fact + .ngo-fact {
    border-left: 1px solid var(--ngo-lex-border);
}

.ngo-fact-value,
.ngo-fact-label {
    display: block;
}

.ngo-fact-value {
    margin: 0 0 .28rem;

    font-size: clamp(1.35rem, 1.15rem + .55vw, 1.8rem);
    line-height: 1.15;
    font-weight: 700;

    letter-spacing: -.035em;

    color: var(--ngo-lex-green-dark);
}

.ngo-fact-label {
    font-size: .82rem;
    line-height: 1.35;
    font-weight: 500;

    color: var(--ngo-lex-muted);
}


/* --------------------------------------------------------------------------
   5. INHALTSNAVIGATION
   Das RST bleibt verantwortlich für Links und Anchors.
   Wir verändern ausschließlich die Darstellung.
   -------------------------------------------------------------------------- */

.ngo-post-body #auf-dieser-seite {
    margin: 0 0 3.5rem;
    padding: 1.45rem 1.65rem 1.35rem;

    background: var(--ngo-lex-surface);
    border: 1px solid var(--ngo-lex-border);
    border-radius: var(--ngo-lex-radius);
}

.ngo-post-body #auf-dieser-seite > .topic-title {
    margin: 0 0 .85rem;
    padding: 0;

    font-size: .76rem;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: .105em;
    text-transform: uppercase;

    color: var(--ngo-lex-green);
}

.ngo-post-body #auf-dieser-seite > ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0 2rem;

    max-width: none;

    margin: 0;
    padding: 0;

    list-style: none;
}

.ngo-post-body #auf-dieser-seite > ul > li {
    position: relative;

    margin: 0;
    padding: 0;

    border-bottom: 1px solid #e9ede8;
}

.ngo-post-body #auf-dieser-seite > ul > li:nth-last-child(-n+2) {
    border-bottom-color: transparent;
}

.ngo-post-body #auf-dieser-seite a.reference.internal {
    display: block;

    padding: .68rem 1.5rem .68rem 0;

    font-size: .96rem;
    line-height: 1.4;
    font-weight: 500;

    color: var(--ngo-lex-text);
    text-decoration: none;

    transition:
        color .15s ease,
        transform .15s ease;
}

.ngo-post-body #auf-dieser-seite > ul > li::after {
    content: "›";

    position: absolute;
    right: .15rem;
    top: .61rem;

    font-size: 1.1rem;
    line-height: 1;

    color: #9aa49c;
}

.ngo-post-body #auf-dieser-seite a.reference.internal:hover,
.ngo-post-body #auf-dieser-seite a.reference.internal:focus {
    color: var(--ngo-lex-green-dark);

    transform: translateX(3px);
}

.ngo-post-body #auf-dieser-seite a.reference.internal:focus-visible {
    outline: 2px solid var(--ngo-lex-green);
    outline-offset: 3px;
    border-radius: 3px;
}


/* --------------------------------------------------------------------------
   6. VERSCHACHTELTE TOC-EINTRÄGE
   Für zukünftige :depth: 2 Artikel.
   Bei Harz aktuell noch nicht benötigt.
   -------------------------------------------------------------------------- */

.ngo-post-body #auf-dieser-seite ul ul {
    display: block;

    margin: -.15rem 0 .5rem;
    padding: 0 0 0 .8rem;

    list-style: none;

    border-left: 1px solid var(--ngo-lex-border);
}

.ngo-post-body #auf-dieser-seite ul ul li {
    margin: 0;
    padding: 0;
}

.ngo-post-body #auf-dieser-seite ul ul a.reference.internal {
    padding: .38rem .5rem;

    font-size: .88rem;
    font-weight: 400;

    color: var(--ngo-lex-text-soft);
}


/* --------------------------------------------------------------------------
   7. LINKS IM ARTIKEL
   Nur innerhalb des Lexikon-Bodys.
   -------------------------------------------------------------------------- */

.ngo-post-body .section p a,
.ngo-post-body .section li a,
.ngo-post-body .section dd a {
    color: var(--ngo-lex-green-dark);

    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .16em;
}

.ngo-post-body .section p a:hover,
.ngo-post-body .section li a:hover,
.ngo-post-body .section dd a:hover {
    color: var(--ngo-lex-green);
}


/* --------------------------------------------------------------------------
   8. MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {

    .ngo-lexicon-intro {
        margin-top: .85rem;
        margin-bottom: 1.6rem;
    }

    .ngo-lexicon-lead {
        font-size: 1.12rem;
        line-height: 1.62 !important;
    }


    /* Facts: 2 × 2 */

    .ngo-fact-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        margin: 1.6rem 0 2rem;
    }

    .ngo-fact {
        padding: 1.15rem 1rem;
    }

    .ngo-fact + .ngo-fact {
        border-left: 0;
    }

    .ngo-fact:nth-child(even) {
        border-left: 1px solid var(--ngo-lex-border);
    }

    .ngo-fact:nth-child(n+3) {
        border-top: 1px solid var(--ngo-lex-border);
    }


    /* TOC: eine Spalte */

    .ngo-post-body #auf-dieser-seite {
        padding: 1.25rem 1.2rem;

        margin-bottom: 2.75rem;
    }

    .ngo-post-body #auf-dieser-seite > ul {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .ngo-post-body #auf-dieser-seite > ul > li {
        border-bottom: 1px solid #e9ede8;
    }

    .ngo-post-body #auf-dieser-seite > ul > li:last-child {
        border-bottom: 0;
    }

    .ngo-post-body .section > h2 {
        margin-top: 2.75rem;
    }

}


/* --------------------------------------------------------------------------
   9. REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .ngo-post-body #auf-dieser-seite a.reference.internal {
        transition: none;
    }

    .ngo-post-body #auf-dieser-seite a.reference.internal:hover,
    .ngo-post-body #auf-dieser-seite a.reference.internal:focus {
        transform: none;
    }
}

/* ==========================================================================
   GM02 – TOC LEGACY RESET + TYPOGRAPHY TUNING
   ========================================================================== */


/* --------------------------------------------------------------------------
   TOC: altes App-/Pill-Styling vollständig neutralisieren
   -------------------------------------------------------------------------- */

.ngo-post-body #auf-dieser-seite {
    display: block !important;

    margin: 2.25rem 0 3.75rem !important;
    padding: 1.5rem 1.75rem !important;

    background: rgba(255,255,255,.44) !important;
    border: 1px solid var(--ngo-lex-border) !important;
    border-radius: var(--ngo-lex-radius) !important;

    box-shadow: none !important;
}


/* Überschrift */

.ngo-post-body #auf-dieser-seite > .topic-title {
    display: block !important;

    margin: 0 0 1rem !important;
    padding: 0 0 .9rem !important;

    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ngo-lex-border) !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    font-size: .78rem !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;

    letter-spacing: .11em !important;
    text-transform: uppercase !important;

    color: var(--ngo-lex-green) !important;
}


/* eventuelle Legacy-Badges wie "INHALT" entfernen */

.ngo-post-body #auf-dieser-seite > .topic-title::before,
.ngo-post-body #auf-dieser-seite > .topic-title::after {
    content: none !important;
    display: none !important;
}


/* Hauptliste */

.ngo-post-body #auf-dieser-seite > ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 0 2rem !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;

    background: transparent !important;
}


/* einzelne Einträge: keine Cards/Pills */

.ngo-post-body #auf-dieser-seite > ul > li {
    display: block !important;
    position: relative !important;

    margin: 0 !important;
    padding: 0 !important;

    min-height: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #e5e9e4 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}


/* Links */

.ngo-post-body #auf-dieser-seite > ul > li > a.reference.internal {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: .78rem 1.6rem .78rem 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    font-size: .98rem !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;

    color: var(--ngo-lex-text) !important;

    text-decoration: none !important;
}


/* dezenter Pfeil */

.ngo-post-body #auf-dieser-seite > ul > li::after {
    content: "→" !important;

    position: absolute !important;
    right: .15rem !important;
    top: .75rem !important;

    color: #89938b !important;

    font-size: .95rem !important;
    line-height: 1 !important;
}


/* Hover nur sehr zurückhaltend */

.ngo-post-body #auf-dieser-seite > ul > li > a.reference.internal:hover {
    color: var(--ngo-lex-green-dark) !important;
    transform: none !important;
}


/* --------------------------------------------------------------------------
   H2 etwas stärker magazinartig, aber nicht riesig
   -------------------------------------------------------------------------- */

.ngo-post-body .section > h2 {
    position: relative;

    margin-top: 3.75rem !important;
    margin-bottom: 1.35rem !important;
    padding-top: .85rem;

    font-size: clamp(1.75rem, 1.5rem + .75vw, 2.35rem) !important;
    line-height: 1.15 !important;
}


/* kleine NGO-Akzentlinie vor großen Abschnitten */

.ngo-post-body .section > h2::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 3.2rem;
    height: 3px;

    background: var(--ngo-lex-green);
    border-radius: 999px;
}


/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {

    .ngo-post-body #auf-dieser-seite {
        padding: 1.25rem !important;
    }

    .ngo-post-body #auf-dieser-seite > ul {
        grid-template-columns: 1fr !important;
    }

    .ngo-post-body .section > h2 {
        font-size: 1.75rem !important;
    }

}

/* ==========================================================
   GM03 – LEXIKON TOC FINAL RESET
   ========================================================== */

.ngo-post-body .contents.topic,
.ngo-content-site .contents.topic {
    display: block !important;
    margin: 2.4rem 0 3.75rem !important;
    padding: 1.5rem 1.75rem !important;

    background: rgba(255,255,255,.42) !important;
    border: 1px solid var(--ngo-lex-border) !important;
    border-radius: var(--ngo-lex-radius) !important;
    box-shadow: none !important;
}


/* Überschrift */

.ngo-post-body .contents.topic .topic-title,
.ngo-content-site .contents.topic .topic-title {
    display: block !important;

    margin: 0 0 .8rem !important;
    padding: 0 0 .9rem !important;

    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ngo-lex-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    font-size: .78rem !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    letter-spacing: .11em !important;
    text-transform: uppercase !important;

    color: var(--ngo-lex-green) !important;
}


/* alten "INHALT"-Badge beseitigen */

.ngo-post-body .contents.topic .topic-title::before,
.ngo-post-body .contents.topic .topic-title::after,
.ngo-content-site .contents.topic .topic-title::before,
.ngo-content-site .contents.topic .topic-title::after {
    content: none !important;
    display: none !important;
}


/* Liste */

.ngo-post-body .contents.topic ul,
.ngo-content-site .contents.topic ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    column-gap: 2.5rem !important;
    row-gap: 0 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
    background: transparent !important;
}


/* Einträge */

.ngo-post-body .contents.topic li,
.ngo-content-site .contents.topic li {
    display: block !important;
    position: relative !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #e3e8e2 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}


/* sämtliche alten Pfeile / Icons beseitigen */

.ngo-post-body .contents.topic li::before,
.ngo-post-body .contents.topic li::after,
.ngo-content-site .contents.topic li::before,
.ngo-content-site .contents.topic li::after {
    content: none !important;
    display: none !important;
}


/* Links */

.ngo-post-body .contents.topic li > a,
.ngo-content-site .contents.topic li > a {
    display: block !important;
    position: relative !important;

    margin: 0 !important;
    padding: .85rem 1.6rem .85rem 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    color: var(--ngo-lex-text) !important;
    font-size: .98rem !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;

    text-decoration: none !important;
}


/* unser eigener, ruhiger Pfeil */

.ngo-post-body .contents.topic li > a::after,
.ngo-content-site .contents.topic li > a::after {
    content: "→" !important;
    display: block !important;

    position: absolute !important;
    right: .15rem !important;
    top: .86rem !important;

    color: #8a958c !important;
    font-size: .9rem !important;
    line-height: 1 !important;
}


.ngo-post-body .contents.topic li > a:hover,
.ngo-content-site .contents.topic li > a:hover {
    color: var(--ngo-lex-green-dark) !important;
    background: transparent !important;
    transform: none !important;
}


/* Mobile */

@media (max-width: 700px) {

    .ngo-post-body .contents.topic,
    .ngo-content-site .contents.topic {
        padding: 1.25rem !important;
    }

    .ngo-post-body .contents.topic ul,
    .ngo-content-site .contents.topic ul {
        grid-template-columns: 1fr !important;
    }
}