
.ninagrafie-reference {
    --ref-accent:#8f5c61;
    --ref-border:var(--ninagrafie-card-border-soft,#e3d7cd);
    --ref-surface:var(--ninagrafie-card-surface-soft,#fffdf9);
    --ref-text:var(--ninagrafie-card-text,#231f1d);
    --ref-muted:var(--ninagrafie-card-muted,#706861);
    display:grid;
    margin:2rem 0;
    border:1px solid var(--ref-border);
    border-top:4px solid var(--ref-accent);
    border-radius:var(--ninagrafie-card-radius,16px);
    overflow:hidden;
    background:var(--ref-surface);
    color:var(--ref-text);
}

.ninagrafie-reference-audience-b2b {
    --ref-accent:#4f6840;
}

.ninagrafie-reference-width-schmal { width:min(100%,560px); }
.ninagrafie-reference-width-mittel { width:min(100%,780px); }
.ninagrafie-reference-width-weit   { width:min(100%,1040px); }
.ninagrafie-reference-width-voll   { width:100%; }

.ninagrafie-reference-align-links  { margin-left:0; margin-right:auto; }
.ninagrafie-reference-align-mitte  { margin-left:auto; margin-right:auto; }
.ninagrafie-reference-align-rechts { margin-left:auto; margin-right:0; }

.ninagrafie-reference--card.has-image,
.ninagrafie-reference--story.has-image {
    grid-template-columns:minmax(190px,34%) minmax(0,1fr);
}

.ninagrafie-reference__media {
    min-height:100%;
    overflow:hidden;
    background:var(--ninagrafie-card-media-bg,#f1ece6);
}
.ninagrafie-reference__media img {
    display:block;
    width:100%;
    height:100%;
    min-height:250px;
    object-fit:cover;
}

.ninagrafie-reference__content {
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    padding:1.35rem 1.45rem;
}
.ninagrafie-reference__eyebrow {
    color:var(--ref-accent);
    font-size:.66rem;
    font-weight:700;
    letter-spacing:.11em;
    line-height:1.4;
    text-transform:uppercase;
}
.ninagrafie-reference__eyebrow span {
    color:var(--ref-muted);
}
.ninagrafie-reference__preview {
    align-self:flex-start;
    margin:.45rem 0 0;
    padding:.28rem .52rem;
    border-radius:var(--ninagrafie-card-pill-radius,999px);
    background:#f0f3eb;
    color:#4f6840;
    font-size:.64rem;
    font-weight:700;
}
.ninagrafie-reference h3 {
    margin:.45rem 0 .2rem;
    font-size:1.35rem;
    line-height:1.2;
}
.ninagrafie-reference__meta,
.ninagrafie-reference__author,
.ninagrafie-reference__excerpt {
    margin:.25rem 0 0;
}
.ninagrafie-reference__meta {
    color:var(--ref-muted);
    font-size:.72rem;
}
.ninagrafie-reference__author {
    color:var(--ref-text);
    font-weight:700;
}
.ninagrafie-reference__excerpt,
.ninagrafie-reference__story {
    color:var(--ref-muted);
    font-size:.86rem;
    line-height:1.6;
}
.ninagrafie-reference__story > :first-child { margin-top:0; }
.ninagrafie-reference__story > :last-child { margin-bottom:0; }

.ninagrafie-reference blockquote {
    margin:.85rem 0 .1rem;
    padding:0 0 0 .9rem;
    border-left:3px solid var(--ref-accent);
    color:var(--ref-text);
    font-size:1rem;
    line-height:1.6;
    font-style:italic;
}

.ninagrafie-reference__links {
    display:flex;
    flex-wrap:wrap;
    gap:.55rem 1rem;
    margin-top:.9rem;
}
.ninagrafie-reference__links a {
    color:var(--ref-accent);
    font-size:.76rem;
    font-weight:700;
    text-decoration:none;
}
.ninagrafie-reference__links a:hover {
    text-decoration:underline;
    text-underline-offset:3px;
}

/* Testimonial: bewusst leicht und textzentriert. */
.ninagrafie-reference--testimonial {
    display:block;
    border-top-width:3px;
}
.ninagrafie-reference--testimonial .ninagrafie-reference__content {
    padding:1.25rem 1.4rem;
}
.ninagrafie-reference--testimonial blockquote {
    margin:.65rem 0 .4rem;
    padding-left:1rem;
    font-size:1.05rem;
}

/* Story darf mehr Raum für Kontext einnehmen. */
.ninagrafie-reference--story .ninagrafie-reference__content {
    justify-content:flex-start;
    padding-top:1.5rem;
    padding-bottom:1.5rem;
}

@media(max-width:700px){
    .ninagrafie-reference--card.has-image,
    .ninagrafie-reference--story.has-image {
        grid-template-columns:1fr;
    }
    .ninagrafie-reference__media img {
        min-height:210px;
        max-height:330px;
    }
    .ninagrafie-reference__content {
        padding:1.1rem 1rem;
    }
}

/* =========================================================
 * V1.3.0-dev.18 · Floating + multi-reference discovery
 * ========================================================= */
.ninagrafie-reference.ninagrafie-reference-float-links,
.ninagrafie-reference.ninagrafie-reference-float-rechts {
    clear:both;
}

.ninagrafie-reference.ninagrafie-reference-float-links {
    float:left;
    margin-top:.35rem;
    margin-right:1.5rem;
    margin-bottom:1rem;
    margin-left:0;
}

.ninagrafie-reference.ninagrafie-reference-float-rechts {
    float:right;
    margin-top:.35rem;
    margin-right:0;
    margin-bottom:1rem;
    margin-left:1.5rem;
}

/* Floats deliberately stay editorially compact. */
.ninagrafie-reference.ninagrafie-reference-float-links.ninagrafie-reference-width-schmal,
.ninagrafie-reference.ninagrafie-reference-float-rechts.ninagrafie-reference-width-schmal {
    width:min(36vw,330px);
}
.ninagrafie-reference.ninagrafie-reference-float-links.ninagrafie-reference-width-mittel,
.ninagrafie-reference.ninagrafie-reference-float-rechts.ninagrafie-reference-width-mittel {
    width:min(44vw,420px);
}
.ninagrafie-reference.ninagrafie-reference-float-links.ninagrafie-reference-width-weit,
.ninagrafie-reference.ninagrafie-reference-float-rechts.ninagrafie-reference-width-weit {
    width:min(50vw,500px);
}
.ninagrafie-reference.ninagrafie-reference-float-links.ninagrafie-reference-width-voll,
.ninagrafie-reference.ninagrafie-reference-float-rechts.ninagrafie-reference-width-voll {
    width:min(50vw,500px);
}

/* A right floating testimonial behaves like a pull quote. */
.ninagrafie-reference--testimonial.ninagrafie-reference-float-rechts .ninagrafie-reference__content {
    text-align:right;
}
.ninagrafie-reference--testimonial.ninagrafie-reference-float-rechts blockquote {
    padding-right:1rem;
    padding-left:0;
    border-right:3px solid var(--ref-accent);
    border-left:0;
}
.ninagrafie-reference--testimonial.ninagrafie-reference-float-rechts .ninagrafie-reference__preview {
    align-self:flex-end;
}
.ninagrafie-reference--testimonial.ninagrafie-reference-float-rechts .ninagrafie-reference__links {
    justify-content:flex-end;
}

/* Multiple references: same data, calm grid presentation. */
.ninagrafie-references {
    display:grid;
    gap:1.15rem;
    margin:2rem 0;
}
.ninagrafie-references-width-schmal { width:min(100%,560px); }
.ninagrafie-references-width-mittel { width:min(100%,780px); }
.ninagrafie-references-width-weit   { width:min(100%,1040px); }
.ninagrafie-references-width-voll   { width:100%; }
.ninagrafie-references-align-links  { margin-left:0; margin-right:auto; }
.ninagrafie-references-align-mitte  { margin-left:auto; margin-right:auto; }
.ninagrafie-references-align-rechts { margin-left:auto; margin-right:0; }
.ninagrafie-references-columns-1 { grid-template-columns:1fr; }
.ninagrafie-references-columns-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ninagrafie-references-columns-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ninagrafie-references__item { min-width:0; }
.ninagrafie-references__item > .ninagrafie-reference {
    height:100%;
    margin:0;
}
.ninagrafie-references-columns-2 .ninagrafie-reference--card.has-image,
.ninagrafie-references-columns-3 .ninagrafie-reference--card.has-image,
.ninagrafie-references-columns-2 .ninagrafie-reference--story.has-image,
.ninagrafie-references-columns-3 .ninagrafie-reference--story.has-image {
    grid-template-columns:1fr;
}
.ninagrafie-references-columns-2 .ninagrafie-reference__media img,
.ninagrafie-references-columns-3 .ninagrafie-reference__media img {
    min-height:190px;
    max-height:270px;
}

@media(max-width:900px){
    .ninagrafie-references-columns-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:700px){
    .ninagrafie-reference.ninagrafie-reference-float-links,
    .ninagrafie-reference.ninagrafie-reference-float-rechts {
        float:none;
        clear:both;
        width:100%;
        margin:1.25rem 0;
    }

    .ninagrafie-reference--testimonial.ninagrafie-reference-float-rechts .ninagrafie-reference__content {
        text-align:left;
    }
    .ninagrafie-reference--testimonial.ninagrafie-reference-float-rechts blockquote {
        padding-right:0;
        padding-left:1rem;
        border-right:0;
        border-left:3px solid var(--ref-accent);
    }
    .ninagrafie-reference--testimonial.ninagrafie-reference-float-rechts .ninagrafie-reference__preview {
        align-self:flex-start;
    }
    .ninagrafie-reference--testimonial.ninagrafie-reference-float-rechts .ninagrafie-reference__links {
        justify-content:flex-start;
    }

    .ninagrafie-references,
    .ninagrafie-references-columns-1,
    .ninagrafie-references-columns-2,
    .ninagrafie-references-columns-3 {
        grid-template-columns:1fr;
        width:100%;
    }
}

/* =========================================================
 * V1.3.0-dev.19 · Reference width rework + true float flow
 * ========================================================= */
.ninagrafie-reference-width-mini   { width:min(100%,360px); }
.ninagrafie-reference-width-schmal { width:min(100%,480px); }
.ninagrafie-reference-width-mittel { width:min(100%,700px); }
.ninagrafie-reference-width-weit   { width:min(100%,980px); }

.ninagrafie-reference.ninagrafie-reference-float-links,
.ninagrafie-reference.ninagrafie-reference-float-rechts {
    clear:none !important;
    display:block;
    max-width:100%;
}

.ninagrafie-reference.ninagrafie-reference-float-links.ninagrafie-reference-width-mini,
.ninagrafie-reference.ninagrafie-reference-float-rechts.ninagrafie-reference-width-mini {
    width:min(32vw,320px);
}
.ninagrafie-reference.ninagrafie-reference-float-links.ninagrafie-reference-width-schmal,
.ninagrafie-reference.ninagrafie-reference-float-rechts.ninagrafie-reference-width-schmal {
    width:min(38vw,390px);
}
.ninagrafie-reference.ninagrafie-reference-float-links.ninagrafie-reference-width-mittel,
.ninagrafie-reference.ninagrafie-reference-float-rechts.ninagrafie-reference-width-mittel {
    width:min(44vw,460px);
}
.ninagrafie-reference.ninagrafie-reference-float-links.ninagrafie-reference-width-weit,
.ninagrafie-reference.ninagrafie-reference-float-rechts.ninagrafie-reference-width-weit,
.ninagrafie-reference.ninagrafie-reference-float-links.ninagrafie-reference-width-voll,
.ninagrafie-reference.ninagrafie-reference-float-rechts.ninagrafie-reference-width-voll {
    width:min(50vw,520px);
}

.ninagrafie-reference.ninagrafie-reference-float-links + p,
.ninagrafie-reference.ninagrafie-reference-float-rechts + p {
    clear:none !important;
}

.ninagrafie-references-width-mini   { width:min(100%,360px); }
.ninagrafie-references-width-schmal { width:min(100%,480px); }
.ninagrafie-references-width-mittel { width:min(100%,700px); }
.ninagrafie-references-width-weit   { width:min(100%,980px); }

/* =========================================================
 * V1.3.0-dev.19 · Reference carousel / discovery
 * ========================================================= */
.ninagrafie-references-carousel {
    --carousel-accent:#8f5c61;
    position:relative;
    margin-top:2rem;
    margin-bottom:2rem;
}
.ninagrafie-references-carousel__viewport {
    overflow:hidden;
    border-radius:var(--ninagrafie-card-radius,16px);
    touch-action:pan-y;
}
.ninagrafie-references-carousel__track {
    display:flex;
    align-items:stretch;
    width:100%;
    transition:transform .45s ease;
    will-change:transform;
}
.ninagrafie-references-carousel__slide {
    flex:0 0 100%;
    min-width:0;
}
.ninagrafie-references-carousel__slide > .ninagrafie-reference {
    height:100%;
    margin:0;
}
.ninagrafie-references-carousel__controls {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.75rem;
    margin-top:.8rem;
}
.ninagrafie-references-carousel__arrow {
    appearance:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.35rem;
    height:2.35rem;
    padding:0;
    border:1px solid #d8c9bd;
    border-radius:var(--ninagrafie-card-pill-radius,999px);
    background:var(--ninagrafie-card-surface-soft,#fffdf9);
    color:#5f4a42;
    font:inherit;
    font-size:1rem;
    line-height:1;
    cursor:pointer;
}
.ninagrafie-references-carousel__arrow:hover,
.ninagrafie-references-carousel__arrow:focus-visible {
    border-color:var(--carousel-accent);
    color:var(--carousel-accent);
    outline:none;
}
.ninagrafie-references-carousel__dots {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.45rem;
}
.ninagrafie-references-carousel__dots button {
    appearance:none;
    width:.55rem;
    height:.55rem;
    padding:0;
    border:1px solid var(--carousel-accent);
    border-radius:var(--ninagrafie-card-pill-radius,999px);
    background:transparent;
    cursor:pointer;
}
.ninagrafie-references-carousel__dots button.is-active {
    background:var(--carousel-accent);
}

@media (prefers-reduced-motion: reduce) {
    .ninagrafie-references-carousel__track { transition:none; }
}

@media(max-width:700px){
    .ninagrafie-reference.ninagrafie-reference-float-links,
    .ninagrafie-reference.ninagrafie-reference-float-rechts {
        float:none !important;
        clear:both !important;
        width:100% !important;
        max-width:100%;
        margin:1.25rem 0;
    }

    .ninagrafie-references-width-mini,
    .ninagrafie-references-width-schmal,
    .ninagrafie-references-width-mittel,
    .ninagrafie-references-width-weit,
    .ninagrafie-references-width-voll {
        width:100%;
    }
}

/* Enfold text blocks may clear following paragraphs. Keep paragraphs after
 * a floated reference in the same formatting context so they can wrap. */
.avia_textblock > .ninagrafie-reference.ninagrafie-reference-float-links ~ p,
.avia_textblock > .ninagrafie-reference.ninagrafie-reference-float-rechts ~ p,
.entry-content-wrapper > .ninagrafie-reference.ninagrafie-reference-float-links ~ p,
.entry-content-wrapper > .ninagrafie-reference.ninagrafie-reference-float-rechts ~ p {
    clear:none !important;
}

/* =========================================================
 * V1.3.0-dev.20 · Width + responsive float consolidation
 * Width, alignment and float are independent concerns.
 * ========================================================= */
.ninagrafie-reference {
    box-sizing:border-box;
}
.ninagrafie-reference-width-mini {
    width:100%;
    max-width:340px;
}
.ninagrafie-reference-width-schmal {
    width:100%;
    max-width:480px;
}
.ninagrafie-reference-width-mittel {
    width:100%;
    max-width:700px;
}
.ninagrafie-reference-width-weit {
    width:100%;
    max-width:980px;
}
.ninagrafie-reference-width-voll {
    width:100%;
    max-width:none;
}

/* Desktop/tablet: true editorial text flow. */
.ninagrafie-reference.ninagrafie-reference-float-links {
    float:left !important;
    clear:none !important;
    margin:.35rem 1.5rem 1rem 0 !important;
}
.ninagrafie-reference.ninagrafie-reference-float-rechts {
    float:right !important;
    clear:none !important;
    margin:.35rem 0 1rem 1.5rem !important;
}
.ninagrafie-reference.ninagrafie-reference-float-links.ninagrafie-reference-width-mini,
.ninagrafie-reference.ninagrafie-reference-float-rechts.ninagrafie-reference-width-mini {
    width:min(34vw,340px) !important;
    max-width:340px;
}
.ninagrafie-reference.ninagrafie-reference-float-links.ninagrafie-reference-width-schmal,
.ninagrafie-reference.ninagrafie-reference-float-rechts.ninagrafie-reference-width-schmal {
    width:min(42vw,480px) !important;
    max-width:480px;
}
.ninagrafie-reference.ninagrafie-reference-float-links.ninagrafie-reference-width-mittel,
.ninagrafie-reference.ninagrafie-reference-float-rechts.ninagrafie-reference-width-mittel {
    width:min(46vw,540px) !important;
    max-width:540px;
}
.ninagrafie-reference.ninagrafie-reference-float-links.ninagrafie-reference-width-weit,
.ninagrafie-reference.ninagrafie-reference-float-rechts.ninagrafie-reference-width-weit,
.ninagrafie-reference.ninagrafie-reference-float-links.ninagrafie-reference-width-voll,
.ninagrafie-reference.ninagrafie-reference-float-rechts.ninagrafie-reference-width-voll {
    width:min(50vw,600px) !important;
    max-width:600px;
}

/* Phones: stop text wrapping, but preserve the requested side and width preset.
 * This makes float="rechts" visibly right positioned instead of turning into
 * an indistinguishable full-width block. */
@media(max-width:700px){
    .ninagrafie-reference.ninagrafie-reference-float-links,
    .ninagrafie-reference.ninagrafie-reference-float-rechts {
        float:none !important;
        clear:both !important;
        width:100% !important;
        margin-top:1.25rem !important;
        margin-bottom:1.25rem !important;
    }
    .ninagrafie-reference.ninagrafie-reference-float-links.ninagrafie-reference-width-mini,
    .ninagrafie-reference.ninagrafie-reference-float-rechts.ninagrafie-reference-width-mini {
        max-width:min(100%,340px) !important;
    }
    .ninagrafie-reference.ninagrafie-reference-float-links.ninagrafie-reference-width-schmal,
    .ninagrafie-reference.ninagrafie-reference-float-rechts.ninagrafie-reference-width-schmal {
        max-width:min(100%,480px) !important;
    }
    .ninagrafie-reference.ninagrafie-reference-float-links.ninagrafie-reference-width-mittel,
    .ninagrafie-reference.ninagrafie-reference-float-rechts.ninagrafie-reference-width-mittel {
        max-width:min(100%,700px) !important;
    }
    .ninagrafie-reference.ninagrafie-reference-float-links {
        margin-left:0 !important;
        margin-right:auto !important;
    }
    .ninagrafie-reference.ninagrafie-reference-float-rechts {
        margin-left:auto !important;
        margin-right:0 !important;
    }
    .ninagrafie-reference--testimonial.ninagrafie-reference-float-rechts .ninagrafie-reference__content {
        text-align:right !important;
    }
    .ninagrafie-reference--testimonial.ninagrafie-reference-float-rechts blockquote {
        padding-right:1rem !important;
        padding-left:0 !important;
        border-right:3px solid var(--ref-accent) !important;
        border-left:0 !important;
    }
    .ninagrafie-reference--testimonial.ninagrafie-reference-float-rechts .ninagrafie-reference__preview {
        align-self:flex-end !important;
    }
    .ninagrafie-reference--testimonial.ninagrafie-reference-float-rechts .ninagrafie-reference__links {
        justify-content:flex-end !important;
    }
}
.ninagrafie-reference__profiles{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}.ninagrafie-reference__profiles a{font-weight:600;text-decoration:none}

/* dev.28.4: accessible optional expansion */
.ninagrafie-reference__read-more{display:inline-block;margin-top:8px;padding:4px 0;background:transparent;border:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:inherit;font:inherit;}
.ninagrafie-reference__read-more:focus-visible{outline:2px solid currentColor;outline-offset:4px;}
.ninagrafie-reference__text [hidden]{display:none!important;}

/* dev.28.5: expanded testimonials must not be visually clipped. */
.ninagrafie-reference--card .ninagrafie-reference__text,
.ninagrafie-reference--story .ninagrafie-reference__text {display:block;max-height:none;line-clamp:unset;-webkit-line-clamp:unset;overflow:visible;white-space:normal;}
.ninagrafie-reference--card .ninagrafie-reference__content,
.ninagrafie-reference--story .ninagrafie-reference__content {min-height:0;}
.ninagrafie-reference__read-more {position:relative;z-index:1;}
