/* Ninagrafie Editorial Elements – palette + checklist */

.ninagrafie-editorial {
    --nina-editorial-olive: var(--ninagrafie-event-olive, #4f6840);
    --nina-editorial-bordeaux: var(--ninagrafie-event-bordeaux, #6b2039);
    --nina-editorial-beige: var(--ninagrafie-event-beige, #e8ded1);
    --nina-editorial-ivory: var(--ninagrafie-event-ivory, #fbf7ee);
    --nina-editorial-text: var(--ninagrafie-event-text, #222);

    box-sizing: border-box;
    margin: 1.75rem 0;
    color: var(--nina-editorial-text);
}

.ninagrafie-editorial__title {
    margin: 0 0 1rem;
    font-size: 1.15em;
    line-height: 1.3;
    color: inherit;
}

/* Color palette */
.ninagrafie-farben__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    column-gap: 0.75rem;
    row-gap: 0.85rem;
}

.ninagrafie-farbe {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
}

.ninagrafie-farben--kreis .ninagrafie-farbe,
.ninagrafie-farben--quadrat .ninagrafie-farbe {
    flex: 0 0 64px;
    width: 64px;
    max-width: 64px;
}

.ninagrafie-farbe__swatch {
    display: block;
    width: 40px;
    height: 40px;
    max-width: 100%;
    background: var(--ninagrafie-farbe);
    border: 1px solid rgba(34, 34, 34, 0.12);
    box-shadow: 0 3px 12px rgba(34, 34, 34, 0.06);
}

.ninagrafie-farben--kreis .ninagrafie-farbe__swatch {
    border-radius: 50%;
}

.ninagrafie-farben--quadrat .ninagrafie-farbe__swatch {
    border-radius: 10px;
}

.ninagrafie-farben--streifen .ninagrafie-farbe {
    flex: 1 1 150px;
    min-width: 120px;
    max-width: none;
}

.ninagrafie-farben--streifen .ninagrafie-farbe__swatch {
    width: 100%;
    height: 34px;
    border-radius: 999px;
}

.ninagrafie-farbe__meta {
    display: grid;
    gap: 0.12rem;
    line-height: 1.25;
}

.ninagrafie-farbe__name {
    font-weight: 400;
}

.ninagrafie-farbe__wert {
    font-size: 0.78em;
    opacity: 0.65;
    letter-spacing: 0.03em;
}

.ninagrafie-farben[data-anzeige="name"] .ninagrafie-farbe__wert,
.ninagrafie-farben[data-anzeige="wert"] .ninagrafie-farbe__name,
.ninagrafie-farben[data-anzeige="keine"] .ninagrafie-farbe__meta {
    display: none;
}

/* Checklist */
.ninagrafie-checkliste {
    --nina-check-bg: var(--nina-editorial-ivory);
    --nina-check-border: var(--nina-editorial-beige);
    --nina-check-accent: var(--nina-editorial-olive);
    --nina-check-contrast: #fff;
    width: 100%;
    max-width: 100%;
    padding: clamp(0.95rem, 2.2vw, 1.35rem);
    border: 1px solid var(--nina-check-border);
    border-radius: var(--ninagrafie-card-radius, 16px);
    background: var(--nina-check-bg);
}

.ninagrafie-checkliste--breite-schmal { width: min(100%, 320px); }
.ninagrafie-checkliste--breite-mittel { width: min(100%, 480px); }
.ninagrafie-checkliste--breite-breit { width: min(100%, 720px); }

.ninagrafie-checkliste--float-none { margin-left: auto; margin-right: auto; }
.ninagrafie-checkliste--float-links { float: left; margin: 0.25rem clamp(1rem, 3vw, 2rem) 1.25rem 0; }
.ninagrafie-checkliste--float-rechts { float: right; margin: 0.25rem 0 1.25rem clamp(1rem, 3vw, 2rem); }

.ninagrafie-checkliste--farbe-natur {
    --nina-check-bg: var(--nina-editorial-ivory);
    --nina-check-border: var(--nina-editorial-beige);
    --nina-check-accent: var(--nina-editorial-olive);
}
.ninagrafie-checkliste--farbe-gruen {
    --nina-check-bg: #eef2e9;
    --nina-check-border: #cbd6c1;
    --nina-check-accent: var(--nina-editorial-olive);
}
.ninagrafie-checkliste--farbe-bordeaux {
    --nina-check-bg: #f6ecef;
    --nina-check-border: #dfc3cb;
    --nina-check-accent: var(--nina-editorial-bordeaux);
}
.ninagrafie-checkliste--farbe-neutral {
    --nina-check-bg: #f5f3ef;
    --nina-check-border: #ddd8d0;
    --nina-check-accent: #6c6861;
}

/* Borderless/plain is deliberately independent of farbe: farbe still controls markers. */
.ninagrafie-checkliste--hintergrund-nein {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.ninagrafie-checkliste__items {
    display: grid;
    gap: 0.52rem;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.ninagrafie-checkliste__item {
    display: grid;
    grid-template-columns: 1.2rem minmax(0, 1fr);
    gap: 0.55rem;
    align-items: start;
    margin: 0 !important;
    padding: 0 !important;
}
.ninagrafie-checkliste__item--keins { grid-template-columns: minmax(0, 1fr); }

.ninagrafie-checkliste__icon {
    display: grid;
    place-items: center;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.08rem;
    border-radius: 50%;
    background: var(--nina-check-accent);
    color: var(--nina-check-contrast);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}
.ninagrafie-checkliste__icon--kreuz { font-size: 0.86rem; }

@media (max-width: 760px) {
    .ninagrafie-checkliste--float-links,
    .ninagrafie-checkliste--float-rechts {
        float: none;
        width: 100%;
        max-width: none;
        margin: 1.5rem 0;
    }
}

@media (max-width: 600px) {
    .ninagrafie-farben__items {
        column-gap: 0.5rem;
        row-gap: 0.75rem;
    }

    .ninagrafie-farben--kreis .ninagrafie-farbe,
    .ninagrafie-farben--quadrat .ninagrafie-farbe {
        flex-basis: 60px;
        width: 60px;
        max-width: 60px;
    }

    .ninagrafie-farben--streifen .ninagrafie-farbe {
        flex-basis: 100%;
        min-width: 100%;
    }
}

@media (max-width: 220px) {
    .ninagrafie-farben--kreis .ninagrafie-farbe,
    .ninagrafie-farben--quadrat .ninagrafie-farbe {
        flex-basis: calc((100% - 0.5rem) / 2);
        width: auto;
        max-width: calc((100% - 0.5rem) / 2);
    }
}

/* FAQ / Accordion */
.ninagrafie-faq {
    --nina-faq-bg: var(--nina-editorial-ivory);
    --nina-faq-border: var(--nina-editorial-beige);
    --nina-faq-accent: var(--nina-editorial-olive);
    --nina-faq-hover: rgba(79, 104, 64, 0.05);
    margin: 1.75rem 0;
    width: 100%;
    max-width: 100%;
    container-type: inline-size;
    container-name: ninagrafie-faq;
}
.ninagrafie-faq--farbe-natur {
    --nina-faq-bg: var(--nina-editorial-ivory);
    --nina-faq-border: var(--nina-editorial-beige);
    --nina-faq-accent: var(--nina-editorial-olive);
}
.ninagrafie-faq--farbe-gruen {
    --nina-faq-bg: #eef2e9;
    --nina-faq-border: #cbd6c1;
    --nina-faq-accent: var(--nina-editorial-olive);
}
.ninagrafie-faq--farbe-bordeaux {
    --nina-faq-bg: #f6ecef;
    --nina-faq-border: #dfc3cb;
    --nina-faq-accent: var(--nina-editorial-bordeaux);
    --nina-faq-hover: rgba(107, 32, 57, 0.05);
}
.ninagrafie-faq--farbe-neutral {
    --nina-faq-bg: #f5f3ef;
    --nina-faq-border: #ddd8d0;
    --nina-faq-accent: #6c6861;
    --nina-faq-hover: rgba(108, 104, 97, 0.05);
}
.ninagrafie-faq__title { margin: 0 0 1.25rem; }
.ninagrafie-faq__title--klein { font-size: 1.1rem; }
.ninagrafie-faq__title--mittel { font-size: 1.45rem; }
.ninagrafie-faq__title--gross { font-size: 1.85rem; }
/* FAQ grid. Since 4.40 the parent shortcode renders only FAQ items as direct
 * children, so no Enfold/wpautop spacer nodes can occupy grid cells. The
 * requested column count lives on the grid as a CSS variable. */
.ninagrafie-faq__grid {
    display: grid;
    width: 100%;
    gap: 1rem;
    align-items: start;
    grid-template-columns: repeat(var(--ninagrafie-faq-columns, 1), minmax(0, 1fr));
}

.ninagrafie-faq__item {
    min-width: 0;
    width: 100%;
    border: 1px solid var(--nina-faq-border);
    border-radius: 12px;
    background: var(--nina-faq-bg);
    overflow: hidden;
}
.ninagrafie-faq__question {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 1rem 1.1rem;
    border: 0;
    background: transparent;
    color: var(--nina-editorial-text);
    font: inherit;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}
.ninagrafie-faq__question:hover { background: var(--nina-faq-hover); }
.ninagrafie-faq__question:focus-visible { outline: 2px solid var(--nina-faq-accent); outline-offset: -3px; }
.ninagrafie-faq__question-text { min-width: 0; }
.ninagrafie-faq__icon {
    flex: 0 0 auto;
    min-width: 1.35em;
    color: var(--nina-faq-accent);
    font-size: 1.25em;
    line-height: 1;
    text-align: center;
}
.ninagrafie-faq__answer { border-top: 1px solid var(--nina-faq-border); }
.ninagrafie-faq__answer[hidden] { display: none !important; }
.ninagrafie-faq__answer-inner { padding: 1rem 1.1rem 1.15rem; }
.ninagrafie-faq__answer-inner > :first-child { margin-top: 0; }
.ninagrafie-faq__answer-inner > :last-child { margin-bottom: 0; }

/* Responsive FAQ layout follows the component width, not the browser viewport. */
@container ninagrafie-faq (max-width: 899px) {
    .ninagrafie-faq__grid--spalten-3,
    .ninagrafie-faq__grid--spalten-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@container ninagrafie-faq (max-width: 639px) {
    .ninagrafie-faq__grid,
    .ninagrafie-faq__grid[class*="ninagrafie-faq__grid--spalten-"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}



/* FAQ 2.0 Hub */
.ninagrafie-faq-hub{margin:2rem 0}.ninagrafie-faq-hub__title{margin:0 0 1.25rem}.ninagrafie-faq-hub__search{display:block;margin-bottom:1rem}.ninagrafie-faq-hub__search input{width:100%;min-height:48px;padding:.75rem 1rem;border:1px solid #d8c2a4;border-radius:10px;background:#fff}.ninagrafie-faq-hub__filters{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 1.75rem}.ninagrafie-faq-hub__filters button{border:1px solid #d8c2a4;border-radius:999px;background:#fbf7ee;padding:.55rem .9rem;cursor:pointer}.ninagrafie-faq-hub__filters button.is-active{background:#44563b;color:#fff;border-color:#44563b}.ninagrafie-faq-hub__group{margin:0 0 2rem}.ninagrafie-faq-hub__group>h3{margin:0 0 1rem}.ninagrafie-faq-hub__entry+.ninagrafie-faq-hub__entry{margin-top:.65rem}.ninagrafie-faq-hub__entry .ninagrafie-faq{margin:0}.ninagrafie-faq-hub__empty{padding:1rem;border:1px dashed #d8c2a4;background:#fbf7ee;text-align:center}

/* Generic editorial cards – dev.4.70 */
.ninagrafie-card-editorial {
    --nina-card-editorial-bg: transparent;
    --nina-card-editorial-border: var(--nina-editorial-beige);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--nina-card-editorial-bg);
    color: inherit;
}
.ninagrafie-card-editorial--minimal { padding: .65rem .75rem; }
.ninagrafie-card-editorial--standard { padding: clamp(.95rem, 2vw, 1.35rem); }
.ninagrafie-card-editorial--rahmen-ja { border: 1px solid var(--nina-card-editorial-border); border-radius: var(--ninagrafie-card-radius, 16px); }
.ninagrafie-card-editorial--rahmen-nein { border: 0; border-radius: 0; }
.ninagrafie-card-editorial__title { margin: 0 0 .55rem; font-size: 1.08em; line-height: 1.3; color: inherit; }
.ninagrafie-card-editorial__content { min-width: 0; }
.ninagrafie-card-editorial__content > :first-child { margin-top: 0 !important; }
.ninagrafie-card-editorial__content > :last-child { margin-bottom: 0 !important; }
/* Nested editorial components must not re-introduce the large outer spacing. */
.ninagrafie-card-editorial .ninagrafie-editorial { margin-top: .35rem; margin-bottom: .35rem; }
.ninagrafie-card-editorial__media { min-width: 0; }
.ninagrafie-card-editorial__image { display: block; width: 100%; height: auto; margin: 0; }
.ninagrafie-card-editorial--mit-bild.ninagrafie-card-editorial--bild-oben { padding-top: 0; }
.ninagrafie-card-editorial--mit-bild.ninagrafie-card-editorial--bild-oben .ninagrafie-card-editorial__media { margin: 0 -.75rem .75rem; }
.ninagrafie-card-editorial--standard.ninagrafie-card-editorial--mit-bild.ninagrafie-card-editorial--bild-oben .ninagrafie-card-editorial__media { margin-left: clamp(-1.35rem, -2vw, -.95rem); margin-right: clamp(-1.35rem, -2vw, -.95rem); }
.ninagrafie-card-editorial--mit-bild:is(.ninagrafie-card-editorial--bild-links,.ninagrafie-card-editorial--bild-rechts) { display: grid; grid-template-columns: minmax(120px, 38%) minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.ninagrafie-card-editorial--mit-bild.ninagrafie-card-editorial--bild-rechts { grid-template-columns: minmax(0, 1fr) minmax(120px, 38%); }
.ninagrafie-card-editorial--mit-bild:is(.ninagrafie-card-editorial--bild-links,.ninagrafie-card-editorial--bild-rechts) .ninagrafie-card-editorial__image { height: 100%; object-fit: cover; }
.ninagrafie-card-editorial--align-links { text-align: left; }
.ninagrafie-card-editorial--align-zentriert { text-align: center; }
.ninagrafie-card-editorial--align-rechts { text-align: right; }
.ninagrafie-card-editorial--float-links { float: left; margin: .25rem clamp(1rem,3vw,2rem) 1.25rem 0; }
.ninagrafie-card-editorial--float-rechts { float: right; margin: .25rem 0 1.25rem clamp(1rem,3vw,2rem); }
.ninagrafie-card-editorial--float-none { float: none; }
.ninagrafie-card-editorial--breite-schmal { width: min(100%, 320px); }
.ninagrafie-card-editorial--breite-mittel { width: min(100%, 480px); }
.ninagrafie-card-editorial--breite-breit { width: min(100%, 720px); }
.ninagrafie-card-editorial--breite-voll { width: 100%; }
/* Nested components belong to the card layout; they must not float independently. */
.ninagrafie-card-editorial .ninagrafie-checkliste { float: none !important; width: 100% !important; max-width: none; margin-left: 0 !important; margin-right: 0 !important; clear: both; }
.ninagrafie-card-editorial .ninagrafie-checkliste + .ninagrafie-checkliste { margin-top: .85rem; }
.ninagrafie-card-editorial--spalten-1 { width: 100%; }
.ninagrafie-card-editorial--spalten-2 { width: 50%; }
.ninagrafie-card-editorial--spalten-3 { width: 33.3333%; }
.ninagrafie-card-editorial--spalten-4 { width: 25%; }
.ninagrafie-card-editorial--spalten-5 { width: 20%; }

.ninagrafie-cards {
    display: grid !important;
    width: 100%;
    max-width: 100%;
    grid-auto-flow: row;
    gap: clamp(.7rem, 1.6vw, 1.25rem);
    margin: .75rem 0 1.5rem;
}
/* Explicit desktop tracks: spalten=5 really means five cards in one row.
   Do not rely on inherited/custom-property column values here; Enfold wrappers
   and section styles must not be able to collapse the editorial grid. */
.ninagrafie-cards--spalten-1 { grid-template-columns: minmax(0, 1fr) !important; }
.ninagrafie-cards--spalten-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.ninagrafie-cards--spalten-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.ninagrafie-cards--spalten-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.ninagrafie-cards--spalten-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.ninagrafie-cards--align-start { align-items: start; }
.ninagrafie-cards--align-center { align-items: center; }
.ninagrafie-cards--align-stretch { align-items: stretch; }
.ninagrafie-cards > .ninagrafie-card-editorial { width: 100% !important; max-width: none; min-width: 0; margin: 0 !important; float: none !important; }
/* Enfold/wpautop can leave separator nodes between nested shortcodes.
   They must never consume a grid cell. */
.ninagrafie-cards > br,
.ninagrafie-cards > p:empty { display: none !important; }

.ninagrafie-spacer { display:block; width:auto; clear:none; padding:0; margin:0 !important; overflow:hidden; flex:0 0 auto; line-height:0; font-size:0; }
.ninagrafie-spacer--minimal { height: 8px; min-height: 8px; }
.ninagrafie-spacer--kompakt { height: 16px; min-height: 16px; }
.ninagrafie-spacer--klein { height: 24px; min-height: 24px; }
.ninagrafie-spacer--mittel { height: 40px; min-height: 40px; }
.ninagrafie-spacer--gross { height: 64px; min-height: 64px; }

@media (max-width: 989px) {
    .ninagrafie-cards--spalten-4, .ninagrafie-cards--spalten-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .ninagrafie-cards--spalten-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .ninagrafie-card-editorial--float-links, .ninagrafie-card-editorial--float-rechts { float: none; width: 100%; max-width: none; margin: 1rem 0; }
}
@media (max-width: 767px) {
    .ninagrafie-spacer--minimal { height: 6px; min-height: 6px; }
    .ninagrafie-spacer--kompakt { height: 12px; min-height: 12px; }
    .ninagrafie-spacer--klein { height: 18px; min-height: 18px; }
    .ninagrafie-spacer--mittel { height: 30px; min-height: 30px; }
    .ninagrafie-spacer--gross { height: 48px; min-height: 48px; }
    .ninagrafie-cards { grid-template-columns: minmax(0, 1fr) !important; }
    .ninagrafie-card-editorial[class*="ninagrafie-card-editorial--spalten-"] { width: 100%; }
    .ninagrafie-card-editorial--mit-bild:is(.ninagrafie-card-editorial--bild-links,.ninagrafie-card-editorial--bild-rechts) { grid-template-columns: 1fr; }
}

/* dev.4.74 – compact checklist marker/density + float-safe spacer */
.ninagrafie-checkliste--marker-stil-pur .ninagrafie-checkliste__icon {
    width: 1rem;
    height: 1rem;
    background: transparent;
    color: var(--nina-check-accent);
    border-radius: 0;
    font-size: .95rem;
    place-items: start center;
}
.ninagrafie-checkliste--marker-stil-pur .ninagrafie-checkliste__icon--kreuz { font-size: 1.05rem; }
.ninagrafie-checkliste--abstand-kompakt .ninagrafie-checkliste__items { gap: .22rem; }
.ninagrafie-checkliste--abstand-kompakt .ninagrafie-checkliste__item { gap: .42rem; line-height: 1.35; }
.ninagrafie-spacer { clear: none; width: auto; }
.ninagrafie-spacer--clear-ja { clear: both; width: 100%; }
.ninagrafie-spacer--clear-nein { clear: none; }

/* Ninagrafie Button (dev.4.78) */
.ninagrafie-button-wrap { display:flex; width:100%; margin:1rem 0; box-sizing:border-box; }
.ninagrafie-button-wrap--links { justify-content:flex-start; }
.ninagrafie-button-wrap--zentriert { justify-content:center; }
.ninagrafie-button-wrap--rechts { justify-content:flex-end; }
.ninagrafie-button { display:inline-flex; align-items:center; justify-content:center; gap:.55em; box-sizing:border-box; border:1px solid var(--nina-button-border); background:var(--nina-button-bg); color:var(--nina-button-text) !important; text-decoration:none !important; font:inherit; font-weight:600; line-height:1.2; border-radius:3px; cursor:pointer; transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease; }
.ninagrafie-button:hover,.ninagrafie-button:focus-visible { background:var(--nina-button-hover-bg); color:var(--nina-button-hover-text) !important; text-decoration:none !important; }
.ninagrafie-button:focus-visible { outline:2px solid var(--nina-button-border); outline-offset:3px; }
.ninagrafie-button--klein { padding:.7em 1em; font-size:.95em; }
.ninagrafie-button--mittel { padding:.85em 1.2em; font-size:1em; }
.ninagrafie-button--gross { padding:1em 1.4em; font-size:1.08em; }
.ninagrafie-button-wrap--voll .ninagrafie-button { width:100%; }
.ninagrafie-button--text { border-color:transparent; padding-left:0; padding-right:0; }
.ninagrafie-button__icon { display:inline-block; line-height:1; transition:transform .2s ease; }
.ninagrafie-button:hover .ninagrafie-button__icon { transform:translateX(2px); }
.ninagrafie-button--icon-links:hover .ninagrafie-button__icon { transform:translateX(-2px); }