/* =========================================================
 * Ninagrafie Content-Zentrale – Hilfe & Legende
 * Datei: content-zentrale-help.css
 * Generische View / Step 6A.1
 * ========================================================= */

.ninagrafie-content-help {
    --ng-help-text: #1f2328;
    --ng-help-muted: #6f665f;
    --ng-help-border: #c8a06a;
    --ng-help-border-soft: #e4d6c4;
    --ng-help-surface: #ffffff;
    --ng-help-soft: #f6f3f1;
    --ng-help-soft-green: #f1f4ed;
    --ng-help-soft-yellow: #fbf6e8;
    --ng-help-soft-red: #fbefef;
    --ng-help-soft-bordeaux: #faf3f5;
    --ng-help-olive: #596b3f;
    --ng-help-bordeaux: #7f2435;
    --ng-help-warning: #a37832;
    --ng-help-error: #9a3f43;
    --ng-help-neutral: #7a6a5b;

    color: var(--ng-help-text);
}

.ninagrafie-content-help *,
.ninagrafie-content-help *::before,
.ninagrafie-content-help *::after {
    box-sizing: border-box;
}

.ninagrafie-content-help [hidden],
.ninagrafie-shortcode-help[hidden] {
    display: none !important;
}


/* =========================================================
 * Intro
 * ========================================================= */

/* dev.40: page intro typography/rhythm is owned by the shared Presentation Contract. */

/* =========================================================
 * Themen-Navigation
 * ========================================================= */

.ninagrafie-content-help__topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 26px;
}

.ninagrafie-content-help__topic {
    appearance: none;
    -webkit-appearance: none;
    min-height: 36px;
    margin: 0;
    padding: 7px 13px;
    border: 1px solid var(--ng-help-border);
    border-radius: 7px;
    background: var(--ng-help-surface);
    color: var(--ng-help-bordeaux);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

.ninagrafie-content-help__topic:hover,
.ninagrafie-content-help__topic:focus-visible {
    background: var(--ng-help-soft);
    color: var(--ng-help-bordeaux);
    border-color: var(--ng-help-border);
}

.ninagrafie-content-help__topic:focus-visible {
    outline: 2px solid rgba(127, 36, 53, 0.18);
    outline-offset: 2px;
}

.ninagrafie-content-help__topic.is-active {
    background: var(--ng-help-soft);
    color: var(--ng-help-bordeaux);
    border-color: var(--ng-help-border-soft);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(127, 36, 53, 0.03);
}


/* =========================================================
 * Generische Blockstruktur
 * ========================================================= */

.ninagrafie-content-help__blocks {
    display: grid;
    gap: 20px;
}

.ninagrafie-content-help__block {
    min-width: 0;
}

.ninagrafie-content-help__block-header {
    margin-bottom: 14px;
}

.ninagrafie-content-help__block-header h3 {
    margin: 0 0 6px;
}

.ninagrafie-content-help__block-header p {
    max-width: 850px;
    margin: 0;
    color: var(--ng-help-muted);
}


/* =========================================================
 * Status Grid
 * ========================================================= */

.ninagrafie-content-help__status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.ninagrafie-content-help__status {
    position: relative;
    min-width: 0;
    padding: 16px 16px 16px 18px;
    border: 1px solid var(--ng-help-border-soft);
    border-radius: 12px;
    background: var(--ng-help-surface);
    box-shadow: 0 5px 18px rgba(73, 55, 37, 0.04);
}

.ninagrafie-content-help__status::before {
    content: "";
    position: absolute;
    top: 13px;
    bottom: 13px;
    left: 0;
    width: 4px;
    border-radius: 0 4px 4px 0;
}

.ninagrafie-content-help__status--success {
    background: var(--ng-help-soft-green);
}
.ninagrafie-content-help__status--success::before {
    background: var(--ng-help-olive);
}

.ninagrafie-content-help__status--warning {
    background: var(--ng-help-soft-yellow);
}
.ninagrafie-content-help__status--warning::before {
    background: var(--ng-help-warning);
}

.ninagrafie-content-help__status--error {
    background: var(--ng-help-soft-red);
}
.ninagrafie-content-help__status--error::before {
    background: var(--ng-help-error);
}

.ninagrafie-content-help__status--neutral {
    background: var(--ng-help-soft);
}
.ninagrafie-content-help__status--neutral::before {
    background: var(--ng-help-neutral);
}

.ninagrafie-content-help__status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: currentColor;
}

.ninagrafie-content-help__status--success .ninagrafie-content-help__status-dot {
    color: var(--ng-help-olive);
}
.ninagrafie-content-help__status--warning .ninagrafie-content-help__status-dot {
    color: var(--ng-help-warning);
}
.ninagrafie-content-help__status--error .ninagrafie-content-help__status-dot {
    color: var(--ng-help-error);
}
.ninagrafie-content-help__status--neutral .ninagrafie-content-help__status-dot {
    color: var(--ng-help-neutral);
}

.ninagrafie-content-help__status h4 {
    margin: 0 0 6px;
    font-size: 1rem;
}

.ninagrafie-content-help__status p {
    margin: 0;
    color: var(--ng-help-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}


/* =========================================================
 * Groups
 * ========================================================= */

.ninagrafie-content-help__groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.ninagrafie-content-help__group {
    padding: 18px;
    border: 1px solid var(--ng-help-border-soft);
    border-radius: 14px;
    background: var(--ng-help-surface);
}

.ninagrafie-content-help__group > h4 {
    margin: 0 0 13px;
}


/* =========================================================
 * Definitions
 * ========================================================= */

.ninagrafie-content-help__block--definitions {
    padding: 19px;
    border: 1px solid var(--ng-help-border-soft);
    border-radius: 14px;
    background: var(--ng-help-surface);
}

.ninagrafie-content-help__definitions {
    margin: 0;
}

.ninagrafie-content-help__definition {
    display: grid;
    grid-template-columns: minmax(130px, 0.32fr) minmax(0, 1fr);
    gap: 18px;
    padding: 11px 0;
    border-top: 1px solid #eee5da;
}

.ninagrafie-content-help__definition:first-child {
    border-top: 0;
    padding-top: 0;
}

.ninagrafie-content-help__definition:last-child {
    padding-bottom: 0;
}

.ninagrafie-content-help__definition dt {
    margin: 0;
    color: var(--ng-help-bordeaux);
    font-weight: 700;
}

.ninagrafie-content-help__definition dd,
.ninagrafie-content-help__definition dd p {
    margin: 0;
}

.ninagrafie-content-help__definition dd {
    color: var(--ng-help-muted);
    line-height: 1.5;
}

.ninagrafie-content-help__note {
    margin-top: 5px !important;
    font-size: 0.9rem;
    font-style: italic;
}


/* =========================================================
 * Checklist
 * ========================================================= */

.ninagrafie-content-help__block--checklist {
    padding: 20px;
    border: 1px solid var(--ng-help-olive);
    border-radius: 14px;
    background: var(--ng-help-soft-green);
}

.ninagrafie-content-help__ready-heading {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 15px;
}

.ninagrafie-content-help__ready-heading h3 {
    margin: 0 0 5px;
}

.ninagrafie-content-help__ready-heading p {
    margin: 0;
    color: var(--ng-help-muted);
}

.ninagrafie-content-help__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ng-help-olive);
    color: #fff;
    font-weight: 700;
    line-height: 1;
}

.ninagrafie-content-help__checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ninagrafie-content-help__checklist li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0;
}

.ninagrafie-content-help__checklist li > span {
    color: var(--ng-help-olive);
    font-weight: 700;
}


/* =========================================================
 * Callout
 * ========================================================= */

.ninagrafie-content-help__block--callout {
    margin: 0;
}

.ninagrafie-content-help__principle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    padding: 17px 19px;
    border: 1px solid var(--ng-help-border-soft);
    border-radius: 12px;
    background: var(--ng-help-soft-bordeaux);
}

.ninagrafie-content-help__info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: var(--ng-help-bordeaux);
    color: #fff;
    font-family: Georgia, serif;
    font-weight: 700;
    line-height: 1;
}

.ninagrafie-content-help__principle h3 {
    margin: 0 0 4px;
}

.ninagrafie-content-help__principle p {
    margin: 0;
    color: var(--ng-help-muted);
    line-height: 1.5;
}


/* =========================================================
 * Tablet
 * ========================================================= */

@media (max-width: 1100px) {
    .ninagrafie-content-help__status-grid,
    .ninagrafie-content-help__groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
 * Smartphone
 * ========================================================= */

@media (max-width: 700px) {
    .ninagrafie-content-help__topics {
        gap: 6px;
    }

    .ninagrafie-content-help__topic {
        min-height: 34px;
        padding: 6px 10px;
        font-size: 0.86rem;
    }

    .ninagrafie-content-help__status-grid,
    .ninagrafie-content-help__groups,
    .ninagrafie-content-help__checklist {
        grid-template-columns: 1fr;
    }

    .ninagrafie-content-help__definition {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .ninagrafie-content-help__block--definitions,
    .ninagrafie-content-help__block--checklist,
    .ninagrafie-content-help__group {
        padding: 15px;
    }

    .ninagrafie-content-help__principle {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
 * Kapitelüberschriften
 * Dashboard / To-dos / ...
 * ========================================================= */

.ninagrafie-content-help__chapter {
    grid-column: 1 / -1;
    margin: 30px 0 2px;
    padding: 0;
    border: 0;
}

.ninagrafie-content-help__chapter:not(:first-child) {
    margin-top: 34px;
    padding-top: 26px;

    border-top: 1px solid #e4d6c4;
}

.ninagrafie-content-help__chapter-label {
    display: inline-block;

    margin-bottom: 6px;

    color: #7f2435;

    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.ninagrafie-content-help__chapter h2 {
    margin: 0 0 6px;

    font-size: 1.55rem;
    line-height: 1.2;
}

.ninagrafie-content-help__chapter p {
    max-width: 820px;

    margin: 0;

    color: #6f665f;

    line-height: 1.5;
}
/* =========================================================
 * Step 6A.2 – finales Help-Layout
 * Einheitliches Kapitel-System + 3/2/1 Raster
 * ========================================================= */

/*
 * Das Help-Raster arbeitet auf Desktop mit 6 Basisspalten:
 * full  = 6/6
 * half  = 3/6
 * third = 2/6
 * So lassen sich 1/1, 1/2 und 1/3 bewusst kombinieren.
 */
.ninagrafie-content-help__blocks {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px 18px;
}

.ninagrafie-content-help__chapter {
    grid-column: 1 / -1;
    margin: 30px 0 2px;
    padding: 0;
    border: 0 !important;
}

.ninagrafie-content-help__chapter:not(:first-child) {
    margin-top: 30px;
    padding-top: 0;
    border-top: 0 !important;
}

.ninagrafie-content-help__chapter-label {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--ng-help-bordeaux);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.ninagrafie-content-help__chapter h2 {
    margin: 0 0 6px;
    font-size: 1.55rem;
    line-height: 1.2;
}

.ninagrafie-content-help__chapter p {
    max-width: 820px;
    margin: 0;
    color: var(--ng-help-muted);
    line-height: 1.5;
}

.ninagrafie-content-help__block--layout-full {
    grid-column: span 6;
}

.ninagrafie-content-help__block--layout-half {
    grid-column: span 3;
}

.ninagrafie-content-help__block--layout-third {
    grid-column: span 2;
}

/* Kompakte Drittelkarten bekommen eine konsistente Kartenfläche. */
.ninagrafie-content-help__block--layout-third.ninagrafie-content-help__block--definitions,
.ninagrafie-content-help__block--layout-half.ninagrafie-content-help__block--definitions {
    height: 100%;
}

@media (max-width: 1100px) {
    .ninagrafie-content-help__block--layout-third,
    .ninagrafie-content-help__block--layout-half {
        grid-column: span 3;
    }
}

@media (max-width: 700px) {
    .ninagrafie-content-help__blocks {
        grid-template-columns: 1fr;
    }

    .ninagrafie-content-help__chapter,
    .ninagrafie-content-help__block--layout-full,
    .ninagrafie-content-help__block--layout-half,
    .ninagrafie-content-help__block--layout-third {
        grid-column: 1;
    }
}


/* =========================================================
 * Step 6A.3 – identischer Kapitelstart bei Themenfiltern
 * ========================================================= */

/*
 * In einer gefilterten Einzelansicht startet jedes interne Help-Kapitel
 * exakt gleich weit unter der Themen-Navigation. Die Alle-Ansicht behält
 * ihre eigene Kapitelstaffelung.
 */
.ninagrafie-content-help[data-active-help-topic]:not([data-active-help-topic="all"])
.ninagrafie-content-help__chapter {
    margin-top: 30px;
    padding-top: 0;
    border: 0 !important;
}


/* V1.3 dev.15.1 – Help 2.0 Inline-Shortcodes müssen ein vollständiger Kapitelblock sein */
.ninagrafie-content-help__shortcodes {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
}

/* V1.3.0-dev.17 · zentraler Shortcode-Writer innerhalb Help 2.0 */
.ninagrafie-content-help__shortcode-catalog {
    width:100%;
    min-width:0;
    margin-top:1.25rem;
}
.ninagrafie-content-help__shortcode-catalog[hidden] {
    display:none !important;
}

/* V1.7 dev.24 – Competition help: lightweight, responsive two-column definitions.
   Shared Help 2.0 layout tokens; no accordion nesting. */
.ninagrafie-content-help__competition-definitions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:26px;row-gap:0;margin:0;padding:0}
.ninagrafie-content-help__competition-definition{min-width:0;padding:13px 0 15px;border-bottom:1px solid var(--ng-help-border-soft,#e4d3bc)}
.ninagrafie-content-help__competition-definition.is-wide{grid-column:1/-1}
.ninagrafie-content-help__competition-definition dt{font-weight:650;color:var(--ng-help-bordeaux,#72243a);margin:0 0 7px}
.ninagrafie-content-help__competition-definition dd{margin:0;line-height:1.6;color:var(--ng-help-muted,#554b46);overflow-wrap:anywhere}
.ninagrafie-content-help__competition-definition dd p{margin:0 0 7px!important}
.ninagrafie-content-help__competition-definition dd p:last-child{margin-bottom:0!important}
@media(max-width:760px){.ninagrafie-content-help__competition-definitions{grid-template-columns:minmax(0,1fr)}.ninagrafie-content-help__competition-definition.is-wide{grid-column:1}}