
.ninagrafie-cz-references { margin:0 auto; }
.ninagrafie-cz-references__head {
    display:flex; justify-content:space-between; gap:1.5rem; align-items:flex-start;
    margin-bottom:1.2rem;
}
.ninagrafie-cz-references__eyebrow {
    color:#87502f; font-size:.68rem; font-weight:700; letter-spacing:.12em;
}
.ninagrafie-cz-references__head h1 { margin:.2rem 0; }
.ninagrafie-cz-references__head p { margin:.2rem 0 0; }
.ninagrafie-cz-references__stats { display:flex; gap:.5rem; flex-wrap:wrap; }
.ninagrafie-cz-references__stats span,
.ninagrafie-cz-reference-card__badges span {
    padding:.38rem .6rem; border-radius:999px; background:#f5f0ea; font-size:.68rem;
}
.ninagrafie-cz-references__notice {
    margin:.8rem 0; padding:.75rem 1rem; border-radius:8px; background:#f4f1eb;
}
.ninagrafie-cz-references__notice.is-error { background:#f8e9e9; }
.ninagrafie-cz-references__editor {
    border:1px solid #c9a27b; border-radius:12px; overflow:hidden; margin-bottom:1.2rem;
}
.ninagrafie-cz-references__editor > summary {
    display:flex; justify-content:space-between; align-items:center; padding:.9rem 1rem; cursor:pointer;
}
.ninagrafie-cz-references__editor > summary span { display:flex; flex-direction:column; }
.ninagrafie-cz-references__editor-body { padding:1rem; border-top:1px solid #eadfd4; }
.ninagrafie-cz-references-form {
    display:grid; grid-template-columns:2fr 1fr 1fr; gap:.9rem;
}
.ninagrafie-cz-references-form label { display:flex; flex-direction:column; gap:.3rem; }
.ninagrafie-cz-references-form label > span,
.ninagrafie-cz-references-form legend { font-weight:700; font-size:.78rem; }
.ninagrafie-cz-references-form input,
.ninagrafie-cz-references-form select,
.ninagrafie-cz-references-form textarea {
    width:100%; box-sizing:border-box;
}
.ninagrafie-cz-references-form .is-title,
.ninagrafie-cz-references-form .is-wide,
.ninagrafie-cz-references-form__group,
.ninagrafie-cz-references-form__approval,
.ninagrafie-cz-references-form__note,
.ninagrafie-cz-references-form__actions {
    grid-column:1 / -1;
}
.ninagrafie-cz-references-form__group {
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem;
    border:1px solid #e5d9cd; border-radius:10px; padding:.9rem;
}
.ninagrafie-cz-references-form__group .is-wide { grid-column:1 / -1; }
.ninagrafie-cz-references-form__group.is-b2b { background:#fbf8f4; }
.ninagrafie-cz-references-form__approval {
    display:flex; flex-direction:row !important; align-items:center; gap:.55rem !important;
}
.ninagrafie-cz-references-form__approval input { width:auto; }
.ninagrafie-cz-references-form__note { margin:0; font-size:.75rem; color:#6f6862; }
.ninagrafie-cz-references-form__actions { display:flex; justify-content:flex-end; gap:.7rem; align-items:center; }
.ninagrafie-cz-references__list { display:grid; gap:.75rem; }
.ninagrafie-cz-reference-card {
    display:flex; justify-content:space-between; gap:1rem;
    border:1px solid #d9c3ad; border-radius:10px; padding:1rem;
}
.ninagrafie-cz-reference-card h2 { margin:.35rem 0 .2rem; font-size:1rem; }
.ninagrafie-cz-reference-card p { margin:.2rem 0; }
.ninagrafie-cz-reference-card blockquote {
    margin:.65rem 0 0; padding-left:.75rem; border-left:3px solid #8f5c61; color:#5f5752;
}
.ninagrafie-cz-reference-card__badges { display:flex; flex-wrap:wrap; gap:.35rem; }
.ninagrafie-cz-reference-card__badges .is-approved { background:#eef3e9; color:#4f6840; }
.ninagrafie-cz-reference-card__actions { display:flex; gap:.7rem; align-items:flex-start; }
.ninagrafie-cz-reference-card__actions form { margin:0; }
.ninagrafie-cz-reference-card__actions button {
    border:0; background:none; padding:0; color:#7d2435; cursor:pointer;
}
.ninagrafie-cz-references__empty {
    padding:1rem; border:1px dashed #c9a27b; border-radius:10px;
}
@media(max-width:800px){
    .ninagrafie-cz-references__head,
    .ninagrafie-cz-reference-card { flex-direction:column; }
    .ninagrafie-cz-references-form { grid-template-columns:1fr; }
    .ninagrafie-cz-references-form__group { grid-template-columns:1fr; }
}


/* V1.3 dev.15.1 – Buttons konsistent mit der Content-Zentrale */
.ninagrafie-cz-references-form__actions button[type="submit"] {
    min-height:38px;
    padding:0 .9rem !important;
    border:1px solid #7f2435 !important;
    border-radius:7px !important;
    background:#7f2435 !important;
    color:#fff !important;
    font:inherit;
    font-weight:700 !important;
    line-height:1 !important;
    cursor:pointer;
    box-shadow:none !important;
}
.ninagrafie-cz-references-form__actions button[type="submit"]:hover,
.ninagrafie-cz-references-form__actions button[type="submit"]:focus-visible {
    background:#681d2c !important;
    border-color:#681d2c !important;
    color:#fff !important;
}
.ninagrafie-cz-references-form__actions > a {
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:0 .85rem;
    border:1px solid rgba(127,36,53,.3);
    border-radius:7px;
    background:#fff;
    color:#7f2435;
    font-weight:700;
    text-decoration:none;
}
/* V1.3 dev.16 – Referenzbild, Relationen & Ausgabehilfe */
.ninagrafie-cz-references-form__group.is-relations {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(220px,.9fr);
    align-items:start;
}
.ninagrafie-cz-reference-image-picker {
    display:block;
}
.ninagrafie-cz-reference-image-picker > span {
    display:block;
    margin-bottom:.35rem;
    font-weight:700;
    font-size:.78rem;
}
.ninagrafie-cz-reference-image-picker__preview {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:110px;
    padding:.5rem;
    border:1px dashed #c9b39f;
    border-radius:8px;
    background:#fff;
    color:#7a7069;
    text-align:center;
}
.ninagrafie-cz-reference-image-picker__preview img {
    display:block;
    width:100%;
    max-height:180px;
    object-fit:cover;
    border-radius:6px;
}
.ninagrafie-cz-reference-image-picker__actions {
    display:flex;
    flex-wrap:wrap;
    gap:.45rem;
    margin-top:.45rem;
}
.ninagrafie-cz-reference-image-picker__actions button {
    min-height:34px;
    padding:0 .7rem !important;
    border:1px solid #7f2435 !important;
    border-radius:6px !important;
    background:#7f2435 !important;
    color:#fff !important;
    font-weight:700 !important;
    cursor:pointer;
}
.ninagrafie-cz-reference-image-picker__actions button.is-secondary {
    background:#fff !important;
    color:#7f2435 !important;
}
.ninagrafie-cz-reference-image-picker__actions button[hidden] {
    display:none !important;
}

.ninagrafie-cz-reference-card__image {
    flex:0 0 86px;
    width:86px;
    height:86px;
    overflow:hidden;
    border-radius:8px;
    background:#f2ece5;
}
.ninagrafie-cz-reference-card__image img {
    width:100%;
    height:100%;
    object-fit:cover;
}
.ninagrafie-cz-reference-card__main {
    flex:1 1 auto;
    min-width:0;
}
.ninagrafie-cz-reference-card__relations {
    display:block;
    margin-top:.35rem;
    color:#756d66;
    font-size:.68rem;
}

.ninagrafie-cz-reference-card__outputs {
    margin-top:.75rem;
    border-top:1px solid #eadfd4;
}
.ninagrafie-cz-reference-card__outputs > summary {
    padding:.55rem 0 0;
    color:#7f2435;
    font-size:.7rem;
    font-weight:700;
    cursor:pointer;
}
.ninagrafie-cz-reference-card__outputs-body {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.5rem;
    margin-top:.55rem;
}
.ninagrafie-cz-reference-output {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:.3rem .5rem;
    align-items:center;
    padding:.55rem .65rem;
    border:1px solid #e4d9ce;
    border-radius:8px;
    background:#fff;
}
.ninagrafie-cz-reference-output > span {
    grid-column:1 / -1;
    color:#6f665f;
    font-size:.62rem;
    font-weight:700;
}
.ninagrafie-cz-reference-output code {
    min-width:0;
    overflow-wrap:anywhere;
    font-size:.64rem;
}
.ninagrafie-cz-reference-output button {
    padding:.33rem .48rem !important;
    border:1px solid rgba(127,36,53,.28) !important;
    border-radius:6px !important;
    background:#fff !important;
    color:#7f2435 !important;
    font-size:.62rem !important;
    font-weight:700 !important;
    cursor:pointer;
}
.ninagrafie-cz-reference-output button.is-copied {
    background:#7f2435 !important;
    color:#fff !important;
}

.ninagrafie-cz-references [data-reference-media-modal] .ninagrafie-event-media-modal__dialog {
    width:min(1080px,96vw);
}

@media(max-width:900px){
    .ninagrafie-cz-references-form__group.is-relations {
        grid-template-columns:1fr;
    }
    .ninagrafie-cz-reference-card__outputs-body {
        grid-template-columns:1fr;
    }
}

/* V1.3.0-dev.18 · target-aware editor */
.ninagrafie-cz-references [data-reference-audience-group][hidden] {
    display:none !important;
}

/* dev.4.14 */
.ninagrafie-cz-reference-usage__options{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:10px}.ninagrafie-cz-reference-usage__options label{display:inline-flex;align-items:center;gap:7px}.ninagrafie-cz-reference-usage__options input{width:auto!important}


/* dev.4.15 · Referenzeditor: Einsatzbereiche statt Zielgruppe */
.ninagrafie-cz-references-form .is-title-main{grid-column:span 2}.ninagrafie-cz-references-form .is-status{grid-column:span 1}
@media(max-width:800px){.ninagrafie-cz-references-form .is-title-main,.ninagrafie-cz-references-form .is-status{grid-column:1}}

/* dev.27.5: Shared card action alignment, including Enfold form/button resets. */
.ninagrafie-cz-reference-card__actions { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; }
.ninagrafie-cz-reference-card__actions form { display:inline-flex; align-items:center; margin:0; padding:0; line-height:inherit; }
.ninagrafie-cz-reference-card__actions a, .ninagrafie-cz-reference-card__actions button { display:inline-flex; align-items:center; min-height:28px; padding:0; margin:0; line-height:1.35; font-size:inherit; font-weight:inherit; vertical-align:middle; }
.ninagrafie-cz-reference-card__actions button { border:0; background:transparent; cursor:pointer; }
.ninagrafie-cz-reference-card__actions :is(a,button):focus-visible { outline:2px solid currentColor; outline-offset:3px; border-radius:2px; }

/* dev.27.5.1: Align both actions on one baseline, overriding Enfold's form/button layout. */
.ninagrafie-cz-reference-card__actions { display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; flex-wrap:wrap; gap:12px; line-height:1.4; }
.ninagrafie-cz-reference-card__actions > a, .ninagrafie-cz-reference-card__actions > form { display:inline-flex !important; align-items:center !important; align-self:center !important; float:none !important; position:static !important; width:auto !important; height:auto !important; margin:0 !important; padding:0 !important; line-height:1.4 !important; }
.ninagrafie-cz-reference-card__actions > a, .ninagrafie-cz-reference-card__actions > form > button { box-sizing:border-box; display:inline-flex !important; align-items:center !important; justify-content:center !important; height:32px !important; min-height:32px !important; width:auto !important; padding:0 !important; margin:0 !important; border:0 !important; border-radius:0; background:transparent !important; box-shadow:none !important; color:var(--series-bordeaux, #70263f); font-size:12px !important; font-weight:400 !important; line-height:1.4 !important; text-decoration:none; vertical-align:middle !important; cursor:pointer; }

/* dev.27.5.2: Enfold resets form/button vertical offsets. Keep both actions
   in the same grid row; display:contents removes form box margins. */
.ninagrafie-cz-reference-card__actions { display:grid !important; grid-template-columns:max-content max-content; align-items:center !important; justify-content:start !important; column-gap:14px !important; row-gap:0 !important; }
.ninagrafie-cz-reference-card__actions > form { display:contents !important; }
.ninagrafie-cz-reference-card__actions > a,
.ninagrafie-cz-reference-card__actions > form > button { position:static !important; float:none !important; transform:none !important; inset:auto !important; align-self:center !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; box-sizing:border-box !important; min-height:32px !important; height:32px !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; line-height:1 !important; font-size:12px !important; font-weight:400 !important; vertical-align:middle !important; }
