/* ninetyone Grid-Tool — Frontend */

.n91grid {
    --n91grid-card-bg: #fff;
    --n91grid-title: #111;
    --n91grid-text: #444;
    --n91grid-meta: #767676;
    --n91grid-accent: #1a1a1a;
    --n91grid-border: #e5e5e5;
    --n91grid-radius: 14px;
    --n91grid-bw: 1px;
    --n91grid-gap: 24px;
    --n91grid-cols-d: 3;
    --n91grid-cols-t: 2;
    color: var(--n91grid-text);
}
.n91grid.n91cs-fonts { font-family: var(--n91cs-font-body, inherit); }
.n91grid.n91cs-fonts .n91grid__title { font-family: var(--n91cs-font-heading, inherit) !important; }

.n91cs-icon { display: inline-block; vertical-align: middle; }

/* ── Filter ── */
.n91grid__filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}
/* Filter-Buttons: Optik kommt jetzt zentral über die geteilte .n91cs-chip-Klasse
   (Globale Einstellungen → Filter-Chips). Hier nur noch Layout im Container .n91grid__filter. */

/* ── Grid ── */
.n91grid__grid {
    display: grid;
    grid-template-columns: repeat(var(--n91grid-cols-d), minmax(0, 1fr));
    gap: var(--n91grid-gap);
}
.n91grid__card {
    background: var(--n91grid-card-bg);
    border: var(--n91grid-bw) solid var(--n91grid-border);
    border-radius: var(--n91grid-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.n91grid__card.is-hidden { display: none; }

.n91grid__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #f0f0f1; }
.n91grid__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.n91grid--hover-zoom .n91grid__card:hover .n91grid__img { transform: scale(1.05); }
.n91grid--hover-zoom .n91grid__card:hover .n91grid__btn svg { transform: translateX(3px); }
.n91grid__btn svg { transition: transform .2s ease; }
.n91grid__badge {
    position: absolute; top: 12px; left: 12px;
    background: var(--n91grid-accent); color: #fff;
    font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
}
.n91grid__play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.n91grid__play .n91cs-icon { background: rgba(0,0,0,.45); border-radius: 50%; padding: 12px; width: 22px; height: 22px; }

.n91grid__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.n91grid__meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--n91grid-meta); }
.n91grid__title { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 700; }
.n91grid__title a { color: var(--n91grid-title); text-decoration: none; }
.n91grid__title a:hover { color: var(--n91grid-accent); }
.n91grid__excerpt { margin: 0; font-size: 14px; line-height: 1.6; color: var(--n91grid-text); }
.n91grid__btn {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600; font-size: 14px;
    color: var(--n91grid-accent); text-decoration: none;
    padding-top: 6px;
}
.n91grid__btn:hover { gap: 10px; }

.n91grid__empty { text-align: center; color: var(--n91grid-meta); padding: 24px 0; }

/* ── Preset: overlay (Text auf dem Bild) ── */
.n91grid--preset-overlay .n91grid__card { border: 0; }
.n91grid--preset-overlay .n91grid__media { aspect-ratio: 3 / 4; }
.n91grid--preset-overlay .n91grid__card { position: relative; }
.n91grid--preset-overlay .n91grid__body {
    position: absolute; inset: 0;
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
    color: #fff;
}
.n91grid--preset-overlay .n91grid__title a,
.n91grid--preset-overlay .n91grid__excerpt,
.n91grid--preset-overlay .n91grid__meta,
.n91grid--preset-overlay .n91grid__btn { color: #fff; }
.n91grid--preset-overlay .n91grid__media { aspect-ratio: auto; position: absolute; inset: 0; }
.n91grid--preset-overlay .n91grid__card { aspect-ratio: 3 / 4; }

/* ── Preset: overlay-split (Kategorie oben, Titel unten) ── */
.n91grid--preset-overlay-split .n91grid__card { border: 0; position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.n91grid--preset-overlay-split .n91grid__media { aspect-ratio: auto; position: absolute; inset: 0; }
.n91grid--preset-overlay-split .n91grid__body {
    position: absolute; inset: 0; z-index: 1;
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
    color: #fff;
}
.n91grid--preset-overlay-split .n91grid__title a { color: #fff; }
.n91grid--preset-overlay-split .n91grid__meta,
.n91grid--preset-overlay-split .n91grid__excerpt,
.n91grid--preset-overlay-split .n91grid__btn { display: none; }
.n91grid__overlay-top {
    position: absolute; top: 16px; left: 16px; right: 16px; z-index: 2;
    font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}

/* ── Preset: list (Bild links, Text rechts) ── */
.n91grid--preset-list .n91grid__grid { grid-template-columns: 1fr; }
.n91grid--preset-list .n91grid__card { flex-direction: row; }
.n91grid--preset-list .n91grid__media { flex: 0 0 38%; aspect-ratio: 4 / 3; }
.n91grid--preset-list .n91grid__body { justify-content: center; }

/* Editorial-Preset: Kategorie + Titel (mit ↗) ÜBER hohem Hochformat-Bild (Card-Slider-konsistent) */
.n91grid--preset-editorial .n91grid__card { background: transparent; border: 0; overflow: visible; }
.n91grid--preset-editorial .n91grid__media { aspect-ratio: 3 / 4; border-radius: var(--n91grid-radius); overflow: hidden; order: 2; }
.n91grid--preset-editorial .n91grid__head { order: 1; display: flex; flex-direction: column; gap: 6px; padding: 0 2px 14px; }
.n91grid__eyebrow { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--n91grid-meta, #888); }
.n91grid--preset-editorial .n91grid__title { display: flex; align-items: flex-start; gap: 8px; font-size: 21px; line-height: 1.22; font-weight: 600; }
.n91grid--preset-editorial .n91grid__title a { color: var(--n91grid-title, #111); text-decoration: none; }
.n91grid--preset-editorial .n91grid__head-arrow { flex: 0 0 auto; color: var(--n91grid-accent, #1a1a1a); margin-top: 2px; transition: transform .2s ease; }
.n91grid--preset-editorial .n91grid__card:hover .n91grid__head-arrow { transform: translate(2px, -2px); }

@media (max-width: 960px) {
    .n91grid__grid { grid-template-columns: repeat(var(--n91grid-cols-t), minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .n91grid__grid { grid-template-columns: 1fr; }
    .n91grid--preset-list .n91grid__card { flex-direction: column; }
    .n91grid--preset-list .n91grid__media { flex: none; width: 100%; }
}


/* ═══════════════════════════════════════════════════════
   Verschmolzene Eck-Form (Floating/Steg) – ersetzt den Button.
   Portiert aus dem FAQ-Modul, an die Card-Struktur angepasst.
   ═══════════════════════════════════════════════════════ */
.n91grid--fab {
    --n91grid-fb-size: 52px;
    --n91grid-fb-gap: 8px;
    --n91grid-fb-r: calc(var(--n91grid-fb-size) / 2);
    --n91grid-fb-R: calc(var(--n91grid-fb-size) / 2 + var(--n91grid-fb-gap));
    --n91grid-fb-out: 0%;
    --n91grid-fb-out-len: 0px;
    --n91grid-cut-off: calc(-1 * var(--n91grid-fb-gap) - var(--n91grid-fb-out-len));
    --n91grid-cut-size: calc(2 * var(--n91grid-fb-R));
}
.n91grid--fit-inset    { --n91grid-fb-out: 0%;  --n91grid-fb-out-len: 0px; }
.n91grid--fit-protrude { --n91grid-fb-out: 50%; --n91grid-fb-out-len: var(--n91grid-fb-r); }
.n91grid--fab .n91grid__card { position: relative; overflow: visible; }
.n91grid--fab .n91grid__media { border-radius: var(--n91grid-radius) var(--n91grid-radius) 0 0; }
.n91grid--fab.n91grid--float-br .n91grid__body,
.n91grid--fab.n91grid--float-bl .n91grid__body,
.n91grid--fab.n91grid--float-b  .n91grid__body { padding-bottom: calc(var(--n91grid-fb-size) + 14px); }
.n91grid--badge-steg.n91grid--float-br .n91grid__body,
.n91grid--badge-steg.n91grid--float-bl .n91grid__body,
.n91grid--badge-steg.n91grid--float-b  .n91grid__body { padding-bottom: calc(var(--n91grid-fb-size) * 1.7 + 8px); }
.n91grid--fab.n91grid--look-notch .n91grid__card { background: transparent; border: 0; }
.n91grid--fab.n91grid--look-notch .n91grid__card > :not(.n91grid__fab) { position: relative; z-index: 1; }
.n91grid--fab.n91grid--look-notch .n91grid__card::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: var(--n91grid-card-bg);
    border: var(--n91grid-bw) solid var(--n91grid-border);
    border-radius: var(--n91grid-radius);
    -webkit-mask-image: linear-gradient(#000 0 0), var(--n91grid-cut-svg);
            mask-image: linear-gradient(#000 0 0), var(--n91grid-cut-svg);
    -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
    -webkit-mask-size: 100% 100%, var(--n91grid-cut-size) var(--n91grid-cut-size);
            mask-size: 100% 100%, var(--n91grid-cut-size) var(--n91grid-cut-size);
    -webkit-mask-position: 0 0, var(--n91grid-cut-pos);
            mask-position: 0 0, var(--n91grid-cut-pos);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
.n91grid--fab .n91grid__fab {
    position: absolute; z-index: 3;
    width: var(--n91grid-fb-size); height: var(--n91grid-fb-size);
    display: flex; align-items: center; justify-content: center;
    background: var(--n91grid-badge-bg, #1a1a1a);
    color: var(--n91grid-badge-fg, #fff);
    text-decoration: none;
    transform: var(--n91grid-fb-tf);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.n91grid--fab .n91grid__fab .n91cs-icon { width: calc(var(--n91grid-fb-size) * .44); height: calc(var(--n91grid-fb-size) * .44); }
.n91grid--badge-round  .n91grid__fab { border-radius: 50%; }
.n91grid--badge-round  { --n91grid-cut-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23000'/%3E%3C/svg%3E"); }
.n91grid--badge-soft   .n91grid__fab { border-radius: calc(var(--n91grid-fb-size) * .26); }
.n91grid--badge-soft   { --n91grid-cut-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Crect width='100' height='100' rx='24' ry='24' fill='%23000'/%3E%3C/svg%3E"); }
.n91grid--badge-square .n91grid__fab { border-radius: 0; }
.n91grid--badge-square { --n91grid-cut-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Crect width='100' height='100' fill='%23000'/%3E%3C/svg%3E"); }
.n91grid--badge-bevel-soft .n91grid__fab,
.n91grid--badge-bevel-sharp .n91grid__fab { border-radius: 0;
    -webkit-mask: var(--n91grid-cut-svg) center / 100% 100% no-repeat;
            mask: var(--n91grid-cut-svg) center / 100% 100% no-repeat; }
.n91grid--badge-bevel-soft  { --n91grid-cut-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Crect width='100' height='100' rx='24' ry='24' fill='%23000'/%3E%3C/svg%3E"); }
.n91grid--badge-bevel-sharp { --n91grid-cut-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Crect width='100' height='100' fill='%23000'/%3E%3C/svg%3E"); }
.n91grid--badge-bevel-soft.n91grid--float-br  { --n91grid-cut-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M56 0 L84 0 Q100 0 100 16 L100 84 Q100 100 84 100 L16 100 Q0 100 0 84 L0 56 Q0 40 11.3 28.7 L28.7 11.3 Q40 0 56 0 Z' fill='%23000'/%3E%3C/svg%3E"); }
.n91grid--badge-bevel-soft.n91grid--float-bl  { --n91grid-cut-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg transform='rotate(90 50 50)'%3E%3Cpath d='M56 0 L84 0 Q100 0 100 16 L100 84 Q100 100 84 100 L16 100 Q0 100 0 84 L0 56 Q0 40 11.3 28.7 L28.7 11.3 Q40 0 56 0 Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"); }
.n91grid--badge-bevel-soft.n91grid--float-tl  { --n91grid-cut-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg transform='rotate(180 50 50)'%3E%3Cpath d='M56 0 L84 0 Q100 0 100 16 L100 84 Q100 100 84 100 L16 100 Q0 100 0 84 L0 56 Q0 40 11.3 28.7 L28.7 11.3 Q40 0 56 0 Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"); }
.n91grid--badge-bevel-soft.n91grid--float-tr  { --n91grid-cut-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg transform='rotate(270 50 50)'%3E%3Cpath d='M56 0 L84 0 Q100 0 100 16 L100 84 Q100 100 84 100 L16 100 Q0 100 0 84 L0 56 Q0 40 11.3 28.7 L28.7 11.3 Q40 0 56 0 Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"); }
.n91grid--badge-bevel-sharp.n91grid--float-br { --n91grid-cut-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M40 0 L100 0 L100 100 L0 100 L0 40 Z' fill='%23000'/%3E%3C/svg%3E"); }
.n91grid--badge-bevel-sharp.n91grid--float-bl { --n91grid-cut-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg transform='rotate(90 50 50)'%3E%3Cpath d='M40 0 L100 0 L100 100 L0 100 L0 40 Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"); }
.n91grid--badge-bevel-sharp.n91grid--float-tl { --n91grid-cut-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg transform='rotate(180 50 50)'%3E%3Cpath d='M40 0 L100 0 L100 100 L0 100 L0 40 Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"); }
.n91grid--badge-bevel-sharp.n91grid--float-tr { --n91grid-cut-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg transform='rotate(270 50 50)'%3E%3Cpath d='M40 0 L100 0 L100 100 L0 100 L0 40 Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"); }
/* Verankerung je Position */
.n91grid--float-tl .n91grid__fab { top: 0; left: 0; --n91grid-fb-tf: translate(calc(-1 * var(--n91grid-fb-out)), calc(-1 * var(--n91grid-fb-out))); }
.n91grid--float-t .n91grid__fab { top: 0; left: 50%; --n91grid-fb-tf: translate(-50%, calc(-1 * var(--n91grid-fb-out))); }
.n91grid--float-tr .n91grid__fab { top: 0; right: 0; --n91grid-fb-tf: translate(var(--n91grid-fb-out), calc(-1 * var(--n91grid-fb-out))); }
.n91grid--float-l .n91grid__fab { top: 50%; left: 0; --n91grid-fb-tf: translate(calc(-1 * var(--n91grid-fb-out)), -50%); }
.n91grid--float-r .n91grid__fab { top: 50%; right: 0; --n91grid-fb-tf: translate(var(--n91grid-fb-out), -50%); }
.n91grid--float-bl .n91grid__fab { bottom: 0; left: 0; --n91grid-fb-tf: translate(calc(-1 * var(--n91grid-fb-out)), var(--n91grid-fb-out)); }
.n91grid--float-b .n91grid__fab { bottom: 0; left: 50%; --n91grid-fb-tf: translate(-50%, var(--n91grid-fb-out)); }
.n91grid--float-br .n91grid__fab { bottom: 0; right: 0; --n91grid-fb-tf: translate(var(--n91grid-fb-out), var(--n91grid-fb-out)); }
.n91grid--fit-protrude.n91grid--float-tl .n91grid__card, .n91grid--fit-protrude.n91grid--float-t .n91grid__card, .n91grid--fit-protrude.n91grid--float-tr .n91grid__card { margin-top: calc(var(--n91grid-fb-r) + 4px); }
.n91grid--fit-protrude.n91grid--float-bl .n91grid__card, .n91grid--fit-protrude.n91grid--float-b .n91grid__card, .n91grid--fit-protrude.n91grid--float-br .n91grid__card { margin-bottom: calc(var(--n91grid-fb-r) + 4px); }
.n91grid--look-badge .n91grid__fab { box-shadow: 0 0 0 var(--n91grid-fb-gap, 8px) var(--n91grid-card-bg, #fff); }
/* Aussparungs-Position je Stelle */
.n91grid--look-notch.n91grid--float-tl .n91grid__card { --n91grid-cut-pos: left var(--n91grid-cut-off) top var(--n91grid-cut-off); }
.n91grid--look-notch.n91grid--float-t .n91grid__card { --n91grid-cut-pos: left calc(50% - var(--n91grid-fb-R)) top var(--n91grid-cut-off); }
.n91grid--look-notch.n91grid--float-tr .n91grid__card { --n91grid-cut-pos: right var(--n91grid-cut-off) top var(--n91grid-cut-off); }
.n91grid--look-notch.n91grid--float-l .n91grid__card { --n91grid-cut-pos: left var(--n91grid-cut-off) top calc(50% - var(--n91grid-fb-R)); }
.n91grid--look-notch.n91grid--float-r .n91grid__card { --n91grid-cut-pos: right var(--n91grid-cut-off) top calc(50% - var(--n91grid-fb-R)); }
.n91grid--look-notch.n91grid--float-bl .n91grid__card { --n91grid-cut-pos: left var(--n91grid-cut-off) bottom var(--n91grid-cut-off); }
.n91grid--look-notch.n91grid--float-b .n91grid__card { --n91grid-cut-pos: left calc(50% - var(--n91grid-fb-R)) bottom var(--n91grid-cut-off); }
.n91grid--look-notch.n91grid--float-br .n91grid__card { --n91grid-cut-pos: right var(--n91grid-cut-off) bottom var(--n91grid-cut-off); }

/* ── Steg (verschmolzen, exakte Kunden-Form) ── */
.n91grid--badge-steg {
    --steg-cw: calc(var(--n91grid-fb-size) * 1.778);
    --steg-ch: calc(var(--n91grid-fb-size) * 1.625);
}
.n91grid--badge-steg .n91grid__fab {
    width: var(--steg-cw); height: var(--steg-ch); border-radius: 0;
    -webkit-mask: var(--steg-btn) center / 100% 100% no-repeat;
            mask: var(--steg-btn) center / 100% 100% no-repeat;
}
.n91grid--badge-steg .n91grid__fab .n91cs-icon {
    position: absolute; left: var(--steg-ix); top: var(--steg-iy);
    transform: translate(-50%, -50%);
}
.n91grid--badge-steg.n91grid--look-notch .n91grid__card::before {
    -webkit-mask-size: 100% 100%, var(--steg-cw) var(--steg-ch);
            mask-size: 100% 100%, var(--steg-cw) var(--steg-ch);
    -webkit-mask-position: 0 0, var(--steg-cutpos);
            mask-position: 0 0, var(--steg-cutpos);
}
.n91grid--badge-steg.n91grid--float-br {
    --n91grid-cut-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 151.3 138.3' preserveAspectRatio='none'%3E%3Cpath d='M0 138.2 c11.3 0 20.5 -6.5 23.9 -16.9 l24 -74.2 c4.4 -13.7 17 -22.3 31.4 -22.4 h40.6 c15.1 0 27.5 -10 31.5 -24.7 L151.3 138.3 L0 138.3 Z' fill='%23000'/%3E%3C/svg%3E");
    --steg-btn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 151.3 138.3' preserveAspectRatio='none'%3E%3Cpath d='M128.8 137.4 h-47.3 c-13.7 0 -23.9 -12.7 -20.6 -25.9 l10.6 -42.9 c2.3 -9.4 10.3 -16.2 20.1 -16.3 h36.6 c12.2 -0.1 21.9 9.1 21.9 21.3 v42.3 c0 11.7 -9 21.3 -21.3 21.4 Z' fill='%23000'/%3E%3C/svg%3E");
    --steg-ix: 69.7%; --steg-iy: 68.6%; --steg-cutpos: right -1.5px bottom -1.5px;
}
.n91grid--badge-steg.n91grid--float-bl {
    --n91grid-cut-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 151.3 138.3' preserveAspectRatio='none'%3E%3Cg transform='translate(151.3 0) scale(-1 1)'%3E%3Cpath d='M0 138.2 c11.3 0 20.5 -6.5 23.9 -16.9 l24 -74.2 c4.4 -13.7 17 -22.3 31.4 -22.4 h40.6 c15.1 0 27.5 -10 31.5 -24.7 L151.3 138.3 L0 138.3 Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
    --steg-btn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 151.3 138.3' preserveAspectRatio='none'%3E%3Cg transform='translate(151.3 0) scale(-1 1)'%3E%3Cpath d='M128.8 137.4 h-47.3 c-13.7 0 -23.9 -12.7 -20.6 -25.9 l10.6 -42.9 c2.3 -9.4 10.3 -16.2 20.1 -16.3 h36.6 c12.2 -0.1 21.9 9.1 21.9 21.3 v42.3 c0 11.7 -9 21.3 -21.3 21.4 Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
    --steg-ix: 30.3%; --steg-iy: 68.6%; --steg-cutpos: left -1.5px bottom -1.5px;
}
.n91grid--badge-steg.n91grid--float-tr {
    --n91grid-cut-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 151.3 138.3' preserveAspectRatio='none'%3E%3Cg transform='translate(0 138.3) scale(1 -1)'%3E%3Cpath d='M0 138.2 c11.3 0 20.5 -6.5 23.9 -16.9 l24 -74.2 c4.4 -13.7 17 -22.3 31.4 -22.4 h40.6 c15.1 0 27.5 -10 31.5 -24.7 L151.3 138.3 L0 138.3 Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
    --steg-btn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 151.3 138.3' preserveAspectRatio='none'%3E%3Cg transform='translate(0 138.3) scale(1 -1)'%3E%3Cpath d='M128.8 137.4 h-47.3 c-13.7 0 -23.9 -12.7 -20.6 -25.9 l10.6 -42.9 c2.3 -9.4 10.3 -16.2 20.1 -16.3 h36.6 c12.2 -0.1 21.9 9.1 21.9 21.3 v42.3 c0 11.7 -9 21.3 -21.3 21.4 Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
    --steg-ix: 69.7%; --steg-iy: 31.4%; --steg-cutpos: right -1.5px top -1.5px;
}
.n91grid--badge-steg.n91grid--float-tl {
    --n91grid-cut-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 151.3 138.3' preserveAspectRatio='none'%3E%3Cg transform='translate(151.3 138.3) scale(-1 -1)'%3E%3Cpath d='M0 138.2 c11.3 0 20.5 -6.5 23.9 -16.9 l24 -74.2 c4.4 -13.7 17 -22.3 31.4 -22.4 h40.6 c15.1 0 27.5 -10 31.5 -24.7 L151.3 138.3 L0 138.3 Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
    --steg-btn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 151.3 138.3' preserveAspectRatio='none'%3E%3Cg transform='translate(151.3 138.3) scale(-1 -1)'%3E%3Cpath d='M128.8 137.4 h-47.3 c-13.7 0 -23.9 -12.7 -20.6 -25.9 l10.6 -42.9 c2.3 -9.4 10.3 -16.2 20.1 -16.3 h36.6 c12.2 -0.1 21.9 9.1 21.9 21.3 v42.3 c0 11.7 -9 21.3 -21.3 21.4 Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
    --steg-ix: 30.3%; --steg-iy: 31.4%; --steg-cutpos: left -1.5px top -1.5px;
}
.n91grid--badge-steg.n91grid--float-br .n91grid__fab { right: -1.5px; bottom: -1.5px; }
.n91grid--badge-steg.n91grid--float-bl .n91grid__fab { left: -1.5px; bottom: -1.5px; }
.n91grid--badge-steg.n91grid--float-tr .n91grid__fab { right: -1.5px; top: -1.5px; }
.n91grid--badge-steg.n91grid--float-tl .n91grid__fab { left: -1.5px; top: -1.5px; }

/* Hover: Form-Gerüst anheben */
.n91grid--fab .n91grid__fab:hover { transform: var(--n91grid-fb-tf) translateY(-4px); box-shadow: 0 8px 18px rgba(0,0,0,.22); }
.n91grid--fab .n91grid__card:hover .n91grid__fab { background: var(--n91grid-accent); }
@media (prefers-reduced-motion: reduce) { .n91grid--fab .n91grid__fab:hover { transform: var(--n91grid-fb-tf); } }

/* ─────────────────────────────────────────────
   Slider-Darstellung (Carousel) — Markup wie Projektslider
   ───────────────────────────────────────────── */
.n91grid--slider .n91grid__stage {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}
.n91grid--slider .n91grid__viewport {
    flex: 1 1 auto;
    overflow: hidden;
    min-width: 0;
}
.n91grid--slider .n91grid__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--n91grid-gap, 24px);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.n91grid--slider .n91grid__slide {
    list-style: none;
    flex: 0 0 calc((100% - (var(--n91grid-cols-d) - 1) * var(--n91grid-gap)) / var(--n91grid-cols-d));
    max-width: calc((100% - (var(--n91grid-cols-d) - 1) * var(--n91grid-gap)) / var(--n91grid-cols-d));
    display: flex;
}
.n91grid--slider .n91grid__slide > .n91grid__card { width: 100%; }
.n91grid--slider .n91grid__slide.is-hidden { display: none; }

/* Zentrierter Slider-Modus — eine Karte mittig, Nachbarn beidseitig angeschnitten (JS zentriert die .is-center-Karte) */
.n91grid--slider.n91grid--center .n91grid__slide {
    flex: 0 0 var(--n91grid-center-w, 70%);
    max-width: var(--n91grid-center-w, 70%);
    transition: opacity .45s ease;
}
/* Nachbar-Karten abdunkeln (optional, Schalter „slider_center_dim") */
.n91grid--slider.n91grid--cdim .n91grid__slide { opacity: .42; }
.n91grid--slider.n91grid--cdim .n91grid__slide.is-center { opacity: 1; }

/* Pfeile (Outline-Kreise in Akzentfarbe) */
.n91grid--slider .n91grid__nav {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1.5px solid var(--n91grid-accent, #1a1a1a);
    border-radius: 50%;
    background: transparent;
    color: var(--n91grid-accent, #1a1a1a);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.n91grid--slider .n91grid__nav:hover,
.n91grid--slider .n91grid__nav:focus-visible {
    background: var(--n91grid-accent, #1a1a1a);
    color: #fff;
    outline: none;
}
.n91grid--slider .n91grid__nav svg { width: 16px; height: 16px; display: block; }

.n91grid--slider.n91grid--arrows-inside .n91grid__stage { gap: 0; }
.n91grid--slider.n91grid--arrows-inside .n91grid__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
}
.n91grid--slider.n91grid--arrows-inside .n91grid__nav--prev { left: 10px; }
.n91grid--slider.n91grid--arrows-inside .n91grid__nav--next { right: 10px; }

/* Dots */
.n91grid--slider .n91grid__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}
.n91grid--slider .n91grid__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--n91grid-accent, #1a1a1a) 30%, transparent);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.n91grid--slider .n91grid__dot.is-active {
    background: var(--n91grid-accent, #1a1a1a);
    transform: scale(1.25);
}
/* Dot-Stil „Striche" (wie Card-Slider) */
.n91grid--dots-lines .n91grid__dot { width: 22px; height: 4px; border-radius: 2px; transform: none; }
.n91grid--dots-lines .n91grid__dot.is-active { width: 34px; transform: none; }

@media (max-width: 960px) {
    .n91grid--slider .n91grid__slide {
        flex-basis: calc((100% - (var(--n91grid-cols-t) - 1) * var(--n91grid-gap)) / var(--n91grid-cols-t));
        max-width: calc((100% - (var(--n91grid-cols-t) - 1) * var(--n91grid-gap)) / var(--n91grid-cols-t));
    }
}
@media (max-width: 600px) {
    .n91grid--slider .n91grid__slide { flex-basis: 100%; max-width: 100%; }
}

/* ─────────────────────────────────────────────
   Masonry (variable Höhen via CSS-Spalten)
   ───────────────────────────────────────────── */
.n91grid--masonry .n91grid__masonry {
    column-count: var(--n91grid-cols-d, 3);
    column-gap: var(--n91grid-gap, 24px);
}
.n91grid--masonry .n91grid__card {
    display: block;
    width: 100%;
    break-inside: avoid;
    margin-bottom: var(--n91grid-gap, 24px);
}
.n91grid--masonry .n91grid__media { aspect-ratio: auto; }
.n91grid--masonry .n91grid__img { height: auto; }
.n91grid--masonry .n91grid__card.is-hidden { display: none; }
@media (max-width: 960px) { .n91grid--masonry .n91grid__masonry { column-count: var(--n91grid-cols-t, 2); } }
@media (max-width: 600px) { .n91grid--masonry .n91grid__masonry { column-count: 1; } }

/* ─────────────────────────────────────────────
   Versetzt / „Wild" – respektiert Spaltenzahl, feste Bildhöhe,
   Spalten gestaffelt via transform (kein Raster-Lücken-Effekt).
   ───────────────────────────────────────────── */
.n91grid--staggered .n91grid__grid {
    grid-template-columns: repeat(var(--n91grid-cols-d, 2), minmax(0, 1fr));
    align-items: start;
    gap: var(--n91grid-gap, 24px);
    padding-bottom: 116px; /* gleicht den Versatz der unteren Karten aus */
}
/* Bilder behalten ihr Karten-Seitenverhältnis (kein „kleines Bild + Fläche") */
/* Spalten-Versatz je nach Spaltenzahl */
.n91grid--staggered.n91grid--cols-2 .n91grid__card:nth-child(2n)   { transform: translateY(60px); }
.n91grid--staggered.n91grid--cols-3 .n91grid__card:nth-child(3n-1) { transform: translateY(48px); }
.n91grid--staggered.n91grid--cols-3 .n91grid__card:nth-child(3n)   { transform: translateY(94px); }
.n91grid--staggered.n91grid--cols-4 .n91grid__card:nth-child(4n-2) { transform: translateY(40px); }
.n91grid--staggered.n91grid--cols-4 .n91grid__card:nth-child(4n-1) { transform: translateY(78px); }
.n91grid--staggered.n91grid--cols-4 .n91grid__card:nth-child(4n)   { transform: translateY(116px); }
/* Tablet: Spalten = cols-t, Versatz aus (sauberes Raster) */
@media (max-width: 960px) {
    .n91grid--staggered .n91grid__grid { grid-template-columns: repeat(var(--n91grid-cols-t, 2), minmax(0, 1fr)); padding-bottom: 0; }
    .n91grid--staggered .n91grid__card { transform: none; }
}
@media (max-width: 600px) {
    .n91grid--staggered .n91grid__grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────
   Masonry + Overlay-Preset: natürliche Bildhöhe, Text als Overlay
   ───────────────────────────────────────────── */
.n91grid--masonry.n91grid--preset-overlay .n91grid__card { aspect-ratio: auto; }
.n91grid--masonry.n91grid--preset-overlay .n91grid__media { position: relative; inset: auto; aspect-ratio: auto; }
.n91grid--masonry.n91grid--preset-overlay .n91grid__img { height: auto; }

/* ─────────────────────────────────────────────
   Editoriale Nummerierung (Titel + Nummer, Trennlinie)
   ───────────────────────────────────────────── */
.n91grid__titlerow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 2px solid var(--n91grid-border, #e5e5e5);
    padding-bottom: 8px;
}
.n91grid__titlerow .n91grid__title { margin: 0; flex: 1; }
.n91grid__num {
    font-weight: 700;
    font-size: 18px;
    color: var(--n91grid-meta, #767676);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}