/* =========================================================
 * Ninagrafie Content-Zentrale – Shortcode-Hilfe
 * ========================================================= */

.ninagrafie-shortcode-help {
    --ng-shortcode-bordeaux: #7b2638;
    --ng-shortcode-olive: #596b3f;
    --ng-shortcode-gold: #c59a67;
    --ng-shortcode-border: #d9c4aa;
    --ng-shortcode-bg: #ffffff;
    --ng-shortcode-soft: #f7f4ef;
    --ng-shortcode-code: #faf5f6;
    --ng-shortcode-text: #1f2328;
    --ng-shortcode-muted: #786f68;

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

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


/* =========================================================
 * INTRO
 * ========================================================= */

.ninagrafie-shortcode-help__intro {
    position: relative;
    margin-bottom: 24px;
    padding-right: 125px;
}

.ninagrafie-shortcode-help__eyebrow {
    display: block;
    margin-bottom: 8px;

    color: #74624f;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.ninagrafie-shortcode-help__intro h2 {
    margin: 0 0 8px;

    color: var(--ng-shortcode-text);

    font-size: clamp(32px, 4vw, 46px);
    font-weight: 700;
    line-height: 1.05;
}

.ninagrafie-shortcode-help__intro > p {
    max-width: 850px;
    margin: 0;

    color: #715e50;

    line-height: 1.55;
}


/* =========================================================
 * COUNTER
 * ========================================================= */

.ninagrafie-shortcode-help__count {
    position: absolute;
    top: 36px;
    right: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 100px;
    min-height: 64px;

    margin: 0;
    padding-left: 24px;

    border-left: 1px solid var(--ng-shortcode-gold);

    color: #6c5140;

    font-size: 12px;
    line-height: 1.3;
    text-align: center;
}

.ninagrafie-shortcode-help__count strong {
    display: block;

    margin-bottom: 3px;

    color: var(--ng-shortcode-bordeaux);

    font-size: 24px;
    line-height: 1;
}


/* =========================================================
 * TOOLBAR
 * Suche + Kategoriebuttons auf einer Linie
 * ========================================================= */

.ninagrafie-shortcode-help__tools {
    display: grid;

    grid-template-columns:
        minmax(340px, 1fr)
        auto;

    gap: 18px;
    align-items: center;

    margin-bottom: 28px;
}


/* =========================================================
 * SUCHE
 * ========================================================= */

.ninagrafie-shortcode-help__search {
    position: relative;

    display: block;

    width: 100%;
    height: 44px;

    margin: 0;
}

.ninagrafie-shortcode-help__search input {
    display: block;

    width: 100%;
    height: 44px;

    margin: 0;
    padding: 0 42px 0 42px;

    border: 1px solid var(--ng-shortcode-gold);
    border-radius: 0;

    background: #faf8f4;

    color: var(--ng-shortcode-text);

    font: inherit;
    font-size: 14px;
    line-height: 42px;
}

.ninagrafie-shortcode-help__search input::placeholder {
    color: #9a9188;
}

.ninagrafie-shortcode-help__search input:focus {
    outline: 2px solid rgba(123, 38, 56, 0.12);
    outline-offset: 1px;
}

.ninagrafie-shortcode-help__search-icon {
    position: absolute;

    top: 50%;
    left: 14px;

    transform: translateY(-50%);

    color: #61594f;

    line-height: 1;

    pointer-events: none;
}

.ninagrafie-shortcode-help__clear {
    position: absolute;

    top: 50%;
    right: 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    margin: 0;
    padding: 0;

    transform: translateY(-50%);

    border: 0;
    border-radius: 50%;

    background: transparent;

    color: #786f68;

    font: inherit;

    cursor: pointer;
}

.ninagrafie-shortcode-help__clear:hover,
.ninagrafie-shortcode-help__clear:focus-visible {
    background: #f0ece6;
    color: var(--ng-shortcode-bordeaux);
}


/* =========================================================
 * KATEGORIEFILTER
 * ========================================================= */

.ninagrafie-shortcode-help__filters {
    display: flex;
    flex-wrap: wrap;

    align-items: center;
    justify-content: flex-end;

    gap: 8px;

    margin: 0;
}

.ninagrafie-shortcode-help__filter {
    appearance: none;
    -webkit-appearance: none;

    min-height: 36px;
    margin: 0;
    padding: 7px 13px;

    border: 1px solid #c8a06a;
    border-radius: 7px;

    background: #ffffff;
    color: #7f2435;

    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-shortcode-help__filter:hover,
.ninagrafie-shortcode-help__filter:focus-visible {
    background: #f6f3f1;
    color: #7f2435;
    border-color: #c8a06a;
}

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

.ninagrafie-shortcode-help__filter.is-active {
    background: #f6f3f1;
    color: #7f2435;
    border-color: #e4d6c4;
    font-weight: 700;

    box-shadow:
        inset 0 0 0 1px rgba(127, 36, 53, 0.03);
}


/* =========================================================
 * GRID
 * ========================================================= */

.ninagrafie-shortcode-help__grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;

    align-items: stretch;
}


/* =========================================================
 * KARTE
 * ========================================================= */

.ninagrafie-shortcode-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 20px;

    border: 1px solid var(--ng-shortcode-gold);
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 5px 18px rgba(75, 53, 34, 0.04);
}

.ninagrafie-shortcode-card[hidden] {
    display: none !important;
}


/* =========================================================
 * KARTENKOPF
 * ========================================================= */

.ninagrafie-shortcode-card__topline {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 13px;
}

.ninagrafie-shortcode-card__category {
    color: #43522e;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ninagrafie-shortcode-card__number {
    color: #92867b;

    font-size: 12px;
}


/* =========================================================
 * SHORTCODE
 * ========================================================= */

.ninagrafie-shortcode-card__code {
    display: inline-block;

    align-self: flex-start;

    margin: 0 0 12px;
    padding: 7px 10px;

    border-radius: 4px;

    background: var(--ng-shortcode-code);

    color: var(--ng-shortcode-bordeaux);

    font-family:
        Consolas,
        Monaco,
        "Courier New",
        monospace;

    font-size: 13px;
    line-height: 1.35;
}

.ninagrafie-shortcode-card h3 {
    margin: 0 0 6px;

    font-size: 21px;
    line-height: 1.25;
}

.ninagrafie-shortcode-card__description {
    margin: 0;

    color: #4d4138;

    font-size: 14px;
    line-height: 1.55;
}


/* =========================================================
 * INTERNER HINWEIS
 * ========================================================= */

.ninagrafie-shortcode-card__notice {
    margin: 14px 0 0;
    padding: 9px 11px;

    border-left: 3px solid var(--ng-shortcode-bordeaux);

    background: #faf5f6;

    color: #66554a;

    font-size: 13px;
    line-height: 1.45;
}


/* =========================================================
 * ABSCHNITTE
 * ========================================================= */

.ninagrafie-shortcode-card__section {
    margin-top: 18px;
    padding-top: 14px;

    border-top: 1px solid var(--ng-shortcode-gold);
}

.ninagrafie-shortcode-card__section > h4,
.ninagrafie-shortcode-card__section > h5 {
    margin: 0 0 9px;

    font-size: 14px;
    font-weight: 700;
}


/* =========================================================
 * PARAMETER-TABELLE
 * ========================================================= */

.ninagrafie-shortcode-card__table-wrap {
    width: 100%;

    overflow-x: auto;
}

.ninagrafie-shortcode-card__table {
    width: 100%;

    table-layout: fixed;

    border-collapse: collapse;

    background: #fbf8f3;

    font-size: 13px;
}

.ninagrafie-shortcode-card__table th,
.ninagrafie-shortcode-card__table td {
    padding: 8px 8px;

    vertical-align: top;

    border: 1px solid var(--ng-shortcode-gold);

    overflow-wrap: anywhere;
    word-break: normal;

    text-align: left;
}

.ninagrafie-shortcode-card__table th {
    background: #f4efe8;

    color: #171717;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ninagrafie-shortcode-card__table td {
    color: #2c251f;

    line-height: 1.4;
}

.ninagrafie-shortcode-card__table td:first-child {
    color: var(--ng-shortcode-bordeaux);

    font-family:
        Consolas,
        Monaco,
        "Courier New",
        monospace;
}


/* Spaltenbreiten */

.ninagrafie-shortcode-card__table th:nth-child(1),
.ninagrafie-shortcode-card__table td:nth-child(1) {
    width: 17%;
}

.ninagrafie-shortcode-card__table th:nth-child(2),
.ninagrafie-shortcode-card__table td:nth-child(2) {
    width: 27%;
}

.ninagrafie-shortcode-card__table th:nth-child(3),
.ninagrafie-shortcode-card__table td:nth-child(3) {
    width: 16%;
}

.ninagrafie-shortcode-card__table th:nth-child(4),
.ninagrafie-shortcode-card__table td:nth-child(4) {
    width: 40%;
}


/* =========================================================
 * BEISPIELE
 * ========================================================= */

.ninagrafie-shortcode-card__examples {
    display: grid;

    gap: 7px;
}

.ninagrafie-shortcode-card__example {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 8px;

    align-items: center;

    padding: 7px 8px;

    border-radius: 6px;

    background: #f5f2ed;
}

.ninagrafie-shortcode-card__example code {
    min-width: 0;

    padding: 0;

    background: transparent;

    color: #352a24;

    font-family:
        Consolas,
        Monaco,
        "Courier New",
        monospace;

    font-size: 12px;
    line-height: 1.4;

    overflow-wrap: anywhere;
}

.ninagrafie-shortcode-card__copy {
    appearance: none;
    -webkit-appearance: none;

    min-height: 28px;

    margin: 0;
    padding: 5px 9px;

    border: 1px solid #d8cec3;
    border-radius: 5px;

    background: #ffffff;

    color: #55483e;

    font: inherit;
    font-size: 10px;

    cursor: pointer;
}

.ninagrafie-shortcode-card__copy:hover,
.ninagrafie-shortcode-card__copy:focus-visible {
    border-color: var(--ng-shortcode-gold);

    color: var(--ng-shortcode-bordeaux);
}


/* =========================================================
 * TYPISCHER EINSATZ
 * ========================================================= */

.ninagrafie-shortcode-card__usage {
    margin: 0;

    color: #4e4138;

    font-size: 13px;
    line-height: 1.5;
}

.ninagrafie-shortcode-card__usage strong {
    color: var(--ng-shortcode-bordeaux);
}


/* =========================================================
 * EMPTY STATE
 * ========================================================= */

.ninagrafie-shortcode-help__empty {
    margin-top: 18px;
    padding: 18px;

    border: 1px dashed var(--ng-shortcode-gold);
    border-radius: 10px;

    background: #faf8f4;

    color: #66594e;
}


/* =========================================================
 * TABLET
 * ========================================================= */

@media (max-width: 1099px) {

    .ninagrafie-shortcode-help__tools {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ninagrafie-shortcode-help__filters {
        justify-content: flex-start;
    }

    .ninagrafie-shortcode-help__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
 * MOBILE
 * ========================================================= */

@media (max-width: 699px) {

    .ninagrafie-shortcode-help__intro {
        padding-right: 0;
    }

    .ninagrafie-shortcode-help__count {
        position: static;

        align-items: flex-start;

        min-width: 0;
        min-height: 0;

        margin-top: 14px;
        padding: 0;

        border-left: 0;

        text-align: left;
    }

    .ninagrafie-shortcode-help__grid {
        grid-template-columns: 1fr;
    }

    .ninagrafie-shortcode-help__filter {
        min-height: 36px;

        padding: 7px 11px;

        font-size: 13px;
    }

    .ninagrafie-shortcode-card {
        padding: 16px;
    }

    .ninagrafie-shortcode-card__example {
        grid-template-columns: 1fr;
    }

    .ninagrafie-shortcode-card__copy {
        justify-self: start;
    }

}

/* =========================================================
 * FINAL OVERRIDE – Shortcode-Hilfe Filterbuttons
 * Optisch identisch zur allgemeinen Hilfe-Navigation
 * ========================================================= */

.ninagrafie-shortcode-help
.ninagrafie-shortcode-help__filters
button.ninagrafie-shortcode-help__filter {

    appearance: none !important;
    -webkit-appearance: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;
    min-height: 36px !important;

    margin: 0 !important;
    padding: 7px 13px !important;

    border: 1px solid #c8a06a !important;
    border-radius: 7px !important;

    background: #ffffff !important;
    background-image: none !important;

    color: #7f2435 !important;

    font: inherit !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;

    text-decoration: none !important;
    text-shadow: none !important;

    box-shadow: none !important;

    white-space: nowrap !important;

    cursor: pointer !important;
}


/* Hover */

.ninagrafie-shortcode-help
.ninagrafie-shortcode-help__filters
button.ninagrafie-shortcode-help__filter:hover,

.ninagrafie-shortcode-help
.ninagrafie-shortcode-help__filters
button.ninagrafie-shortcode-help__filter:focus-visible {

    border-color: #c8a06a !important;

    background: #f6f3f1 !important;
    background-image: none !important;

    color: #7f2435 !important;

    box-shadow: none !important;
}


/* Aktiver Filter */

.ninagrafie-shortcode-help
.ninagrafie-shortcode-help__filters
button.ninagrafie-shortcode-help__filter.is-active {

    border-color: #e4d6c4 !important;

    background: #f6f3f1 !important;
    background-image: none !important;

    color: #7f2435 !important;

    font-weight: 700 !important;

    box-shadow:
        inset 0 0 0 1px rgba(127, 36, 53, 0.03) !important;
}


/* Fokus */

.ninagrafie-shortcode-help
.ninagrafie-shortcode-help__filters
button.ninagrafie-shortcode-help__filter:focus-visible {

    outline: 2px solid rgba(127, 36, 53, 0.18) !important;
    outline-offset: 2px !important;
}

/* =========================================================
 * Embedded Shortcode-Hilfe
 * ========================================================= */

.ninagrafie-shortcode-help--embedded {
    margin-top: 34px;
    padding-top: 0px;
    border-top: 0;
}

.ninagrafie-shortcode-help__chapter {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 24px;
    align-items: center;

    margin-bottom: 22px;
}

.ninagrafie-shortcode-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-shortcode-help__chapter h2 {
    margin: 0 0 6px;

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

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

    margin: 0;

    color: #6f665f;
}

.ninagrafie-shortcode-help__chapter-count {
    min-width: 100px;

    padding-left: 22px;

    border-left: 1px solid #c8a06a;

    text-align: center;
}

.ninagrafie-shortcode-help__chapter-count strong {
    display: block;

    margin-bottom: 3px;

    color: #7f2435;

    font-size: 1.5rem;
    line-height: 1;
}

.ninagrafie-shortcode-help__chapter-count span {
    color: #6f665f;

    font-size: 0.78rem;
}

@media (max-width: 699px) {

    .ninagrafie-shortcode-help__chapter {
        grid-template-columns: 1fr;
    }

    .ninagrafie-shortcode-help__chapter-count {
        min-width: 0;

        padding: 0;

        border-left: 0;

        text-align: left;
    }

}
/* =========================================================
 * Step 6A.2 – Embedded Shortcodes als echtes Help-Kapitel
 * ========================================================= */

.ninagrafie-shortcode-help--embedded {
    margin-top: 30px;
}

.ninagrafie-shortcode-help--embedded .ninagrafie-shortcode-help__chapter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: end;
    margin: 0 0 24px;
    padding: 0;
    border: 0;
}

.ninagrafie-shortcode-help--embedded .ninagrafie-shortcode-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-shortcode-help--embedded .ninagrafie-shortcode-help__chapter h2 {
    margin: 0 0 6px;
    font-size: 1.55rem;
    line-height: 1.2;
}

.ninagrafie-shortcode-help--embedded .ninagrafie-shortcode-help__chapter p {
    max-width: 820px;
    margin: 0;
    color: #6f665f;
    line-height: 1.5;
}

.ninagrafie-shortcode-help--embedded .ninagrafie-shortcode-help__chapter-count {
    min-width: 96px;
    margin: 0;
    padding-left: 22px;
    border-left: 1px solid var(--ng-shortcode-gold);
    text-align: center;
}

.ninagrafie-shortcode-help--embedded .ninagrafie-shortcode-help__chapter-count strong {
    display: block;
    margin-bottom: 3px;
    color: var(--ng-shortcode-bordeaux);
    font-size: 24px;
    line-height: 1;
}

.ninagrafie-shortcode-help--embedded .ninagrafie-shortcode-help__chapter-count span {
    color: #6c5140;
    font-size: 12px;
    line-height: 1.3;
}

@media (max-width: 700px) {
    .ninagrafie-shortcode-help--embedded .ninagrafie-shortcode-help__chapter {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .ninagrafie-shortcode-help--embedded .ninagrafie-shortcode-help__chapter-count {
        justify-self: start;
        padding-left: 0;
        border-left: 0;
        text-align: left;
    }
}


/* =========================================================
 * Kachelbreiten
 * ========================================================= */

.ninagrafie-shortcode-card--wide {
    grid-column: span 2;
}

.ninagrafie-shortcode-card--full {
    grid-column: 1 / -1;
}

/*
 * Der typische Einsatz ist ein eigener Abschlussbereich und
 * braucht bewusst Luft zu Tabellen oder Beispielblöcken.
 */
.ninagrafie-shortcode-card__usage {
    margin-top: 24px;
}

/* Auf kleineren Ansichten sollen breite Karten wieder voll laufen. */
@media (max-width: 980px) {
    .ninagrafie-shortcode-card--wide,
    .ninagrafie-shortcode-card--full {
        grid-column: 1 / -1;
    }
}


/* dev.26 – Help-Reparatur / Enfold-Härtung */
.ninagrafie-shortcode-help *,
.ninagrafie-shortcode-help *::before,
.ninagrafie-shortcode-help *::after {
    box-sizing: border-box;
}

.ninagrafie-shortcode-help__tools {
    grid-template-columns: minmax(260px, 1fr) minmax(0, 1.35fr);
    align-items: start;
}

.ninagrafie-shortcode-help__search {
    position: relative !important;
    min-width: 0;
}

.ninagrafie-shortcode-help__search-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    top: 50% !important;
    left: 14px !important;
    transform: translateY(-50%) !important;
    z-index: 2;
    font-family: Arial, sans-serif;
    font-size: 15px;
}

.ninagrafie-shortcode-help__search input[type="search"] {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    padding: 0 42px !important;
    line-height: 44px !important;
}

.ninagrafie-shortcode-help__filters {
    justify-content: flex-start !important;
    align-content: flex-start;
}

.ninagrafie-shortcode-help__filter {
    flex: 0 0 auto;
}

@media (max-width: 980px) {
    .ninagrafie-shortcode-help__tools {
        grid-template-columns: 1fr;
    }

    .ninagrafie-shortcode-help__filters {
        justify-content: flex-start !important;
    }
}


/* HELP 2.0 – Shortcodes direkt im fachlichen Hilfekapitel */
.ninagrafie-shortcode-help--chapter {
    margin:1.25rem 0 2.4rem;
    padding:1rem;
    border:1px solid rgba(135,80,47,.28);
    border-radius:12px;
    background:#fffdf9;
}
.ninagrafie-shortcode-help--chapter .ninagrafie-shortcode-help__chapter {
    margin-bottom:.9rem;
}
.ninagrafie-shortcode-help--chapter .ninagrafie-shortcode-help__chapter h2 {
    font-size:1.08rem;
    margin:.15rem 0;
}
.ninagrafie-shortcode-help--chapter .ninagrafie-shortcode-help__chapter p {
    margin:.2rem 0 0;
    font-size:.78rem;
}
.ninagrafie-shortcode-help--chapter .ninagrafie-shortcode-help__grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.75rem;
}
.ninagrafie-shortcode-help--chapter .ninagrafie-shortcode-card {
    padding:.85rem;
}
.ninagrafie-shortcode-help--chapter .ninagrafie-shortcode-card__description {
    font-size:.78rem;
}
@media(max-width:760px){
    .ninagrafie-shortcode-help--chapter .ninagrafie-shortcode-help__grid {
        grid-template-columns:1fr;
    }
}


/* V1.3 dev.15.1 – kompakte, stabile Inline-Dokumentation innerhalb eines Hilfekapitels */
.ninagrafie-shortcode-help--chapter {
    width:100%;
    min-width:0;
}
.ninagrafie-shortcode-help--chapter .ninagrafie-shortcode-help__chapter {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    width:100%;
    gap:18px;
    align-items:center;
}
.ninagrafie-shortcode-help--chapter .ninagrafie-shortcode-help__grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    min-width:0;
    gap:.85rem;
}
.ninagrafie-shortcode-help--chapter .ninagrafie-shortcode-card,
.ninagrafie-shortcode-help--chapter .ninagrafie-shortcode-card--wide,
.ninagrafie-shortcode-help--chapter .ninagrafie-shortcode-card--full {
    grid-column:auto;
    width:100%;
    min-width:0;
    max-width:none;
}
.ninagrafie-shortcode-help--chapter .ninagrafie-shortcode-card__code,
.ninagrafie-shortcode-help--chapter .ninagrafie-shortcode-card__example code {
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
}
@media(max-width:900px){
    .ninagrafie-shortcode-help--chapter .ninagrafie-shortcode-help__grid {
        grid-template-columns:1fr;
    }
}
@media(max-width:600px){
    .ninagrafie-shortcode-help--chapter .ninagrafie-shortcode-help__chapter {
        grid-template-columns:1fr;
    }
    .ninagrafie-shortcode-help--chapter .ninagrafie-shortcode-help__chapter-count {
        justify-self:start;
        padding-left:0;
        border-left:0;
        text-align:left;
    }
}

/* V1.7.1-dev.2.7: eigenständige, lesbare Shortcode-Referenz. */
.ninagrafie-shortcode-help--standalone .ninagrafie-shortcode-help__grid {grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;}
.ninagrafie-shortcode-help--standalone .ninagrafie-shortcode-card {height:auto;min-width:0;}
.ninagrafie-shortcode-card__details {margin-top:16px;border-top:1px solid var(--ninagrafie-cz-border,#d5b89c);padding-top:12px;min-width:0;}
.ninagrafie-shortcode-card__details > summary {cursor:pointer;font-weight:600;list-style:revert;padding:4px 0;}
.ninagrafie-shortcode-card__details[open] > summary {margin-bottom:12px;}
.ninagrafie-shortcode-card__table-wrap {max-width:100%;overflow-x:auto;}
.ninagrafie-shortcode-card__table {table-layout:auto;}
.ninagrafie-shortcode-card__table th,.ninagrafie-shortcode-card__table td {overflow-wrap:anywhere;word-break:normal;}
@media(max-width:800px){.ninagrafie-shortcode-help--standalone .ninagrafie-shortcode-help__grid {grid-template-columns:minmax(0,1fr);}}

/* V1.7.1-dev.2.12: shared, lightweight documentation navigation. */
.ninagrafie-cz-doclinks {display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin:1rem 0 1.5rem;font-size:.875rem;}
.ninagrafie-cz-doclinks a {text-decoration:underline;text-underline-offset:3px;}
.ninagrafie-cz-doclinks a:focus-visible {outline:2px solid currentColor;outline-offset:3px;}

/* dev.2.13: anchored component references */
.ninagrafie-cz-component-links{font-size:.82rem;margin:.65rem 0;line-height:1.6;}
.ninagrafie-cz-component-links a{text-decoration:underline;text-underline-offset:3px;}
.ninagrafie-cz-component-links a:focus-visible{outline:2px solid currentColor;outline-offset:2px;}
.ninagrafie-shortcode-card[id]{scroll-margin-top:2rem;}