/* ninetyone FAQ — Frontend (v2). Reines Accordion, kein „Drumherum". */

.n91faq {
    --n91faq-title: #111;
    --n91faq-text: #444;
    --n91faq-accent: #1a1a1a;
    --n91faq-bg: #fff;
    --n91faq-bg-open: #fff;
    --n91faq-border: #e5e5e5;
    --n91faq-border-open: #1a1a1a;
    --n91faq-radius: 0px;
    --n91faq-gap: 12px;
    --n91faq-cols: 2;
    --n91faq-bt: 1px; --n91faq-br: 0px; --n91faq-bb: 1px; --n91faq-bl: 0px;
    width: 100%;
}
.n91faq.n91cs-fonts { font-family: var(--n91cs-font-body, inherit); }
.n91faq.n91cs-fonts .n91faq__q { font-family: var(--n91cs-font-heading, inherit) !important; }

/* ── Anordnung ── */
.n91faq__list { display: flex; flex-direction: column; gap: var(--n91faq-gap); }
/* Grid = echtes ausgerichtetes Raster: Fragen stehen in Reihen (kein Spalten-Versatz),
   gleichmäßige Abstände. align-items:start → beim Öffnen bläht sich der Nachbar nicht auf.
   Spalten bekommen etwas mehr Luft als Reihen, damit nichts „zusammenstößt". */
.n91faq--grid .n91faq__list {
    display: grid;
    grid-template-columns: repeat(var(--n91faq-cols), minmax(0, 1fr));
    align-items: start;
    gap: var(--n91faq-gap) calc(var(--n91faq-gap) + 14px);
}

/* ── Item ── */
.n91faq__item {
    border-style: solid;
    border-top-width: var(--n91faq-bt);
    border-right-width: var(--n91faq-br);
    border-bottom-width: var(--n91faq-bb);
    border-left-width: var(--n91faq-bl);
    border-color: var(--n91faq-border);
    border-radius: var(--n91faq-radius);
    background: var(--n91faq-bg);
    transition: border-color .2s ease, background .2s ease;
}
.n91faq__item.is-open { border-color: var(--n91faq-border-open); background: var(--n91faq-bg-open); }

.n91faq__q-wrap { margin: 0; }
.n91faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--n91faq-title);
    font-family: inherit;
}
.n91faq__q-text { flex: 1 1 auto; }
.n91faq__q:hover { color: var(--n91faq-accent); }
.n91faq__q:focus-visible { outline: 2px solid var(--n91faq-accent); outline-offset: -2px; }

/* Icon-Position */
.n91faq--icon-left .n91faq__q { flex-direction: row-reverse; }
.n91faq--icon-left .n91faq__q-text { text-align: left; }

/* Icon-Farbe: manuell pro Zustand (--n91faq-icon-closed/-open) ODER automatisch
   (Fallback: inline = Akzent, floating = Kontrast-Farbe der Form). */
.n91faq__icon { flex: 0 0 auto; display: inline-flex; color: var(--n91faq-icon-closed, var(--n91faq-accent)); }
.n91faq__item.is-open .n91faq__icon { color: var(--n91faq-icon-open, var(--n91faq-accent)); }
.n91faq__icon .n91cs-icon { transition: transform .25s ease, opacity .2s ease; }
/* Immer nur EIN Symbol sichtbar (geschlossen ODER offen). */
.n91faq__icon-closed, .n91faq__icon-open { display: inline-flex; }
.n91faq__icon-open { display: none; }
.n91faq__item.is-open .n91faq__icon-closed { display: none; }
.n91faq__item.is-open .n91faq__icon-open { display: inline-flex; }

/* ── Panel ── */
.n91faq__panel { overflow: hidden; }
.n91faq__panel[hidden] { display: none; }
.n91faq__panel-inner { padding: 0 20px 18px; }
.n91faq--icon-left .n91faq__panel-inner { padding-left: 20px; }
.n91faq__answer { color: var(--n91faq-text); font-size: 16px; line-height: 1.65; }
.n91faq__answer > :first-child { margin-top: 0; }
.n91faq__answer > :last-child { margin-bottom: 0; }
.n91faq__answer a { color: var(--n91faq-accent); }

/* Medien (Bild/Video) */
.n91faq__media { margin: 0 0 14px; }
.n91faq__media-img { display: block; max-width: 100%; height: auto; border-radius: var(--n91faq-radius); }
.n91faq__media--video { position: relative; }
.n91faq__media--video video,
.n91faq__media--video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; border-radius: var(--n91faq-radius); }

/* ── Animationen (JS animiert height/opacity; hier die Easings) ── */
.n91faq--anim-slide      .n91faq__panel { transition: height .28s ease; }
.n91faq--anim-fade       .n91faq__panel { transition: opacity .28s ease; }
.n91faq--anim-slide-fade .n91faq__panel { transition: height .3s ease, opacity .3s ease; }
.n91faq--anim-spring     .n91faq__panel { transition: height .5s cubic-bezier(.22, 1.2, .36, 1); }
.n91faq__panel.is-animating { will-change: height, opacity; }

/* ── Statisch (kein Klappen) ── */
.n91faq--static .n91faq__q { cursor: default; }
.n91faq--static .n91faq__icon { display: none; }

@media (max-width: 782px) {
    .n91faq--grid .n91faq__list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .n91faq__q { font-size: 16px; padding: 16px; }
    .n91faq__panel-inner { padding: 0 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .n91faq__panel { transition: none !important; }
    .n91faq__icon .n91cs-icon { transition: none; }
}

/* ─────────────────────────────────────────────
   Moderne Variante: Floating-Icon-Form  (PORTIERBAR – gleiche Technik später
   für Blog-Grid & Slider). Geometrie ist rein über CSS-Vars gesteuert:
     --n91faq-fb-size  Durchmesser der Form (S/M/L → px)
     --n91faq-fb-gap   Spalt zwischen Form und Kachel
   Look „badge" = aufgesetzt (Ring in Umgebungsfarbe).
   Look „notch" = Kachelfläche (::before) wird per mask konkav ausgeschnitten,
                  die Form liegt UNMASKIERT darüber → Kachel + Form = eine Einheit.
   ───────────────────────────────────────────── */
.n91faq--iconstyle-floating {
    --n91faq-fb-size: 52px;
    --n91faq-fb-gap: 8px;
    --n91faq-fb-r: calc(var(--n91faq-fb-size) / 2);
    --n91faq-fb-R: calc(var(--n91faq-fb-size) / 2 + var(--n91faq-fb-gap));
    --n91faq-fb-y: 34px; /* vertikale Verankerung an der Fragenzeile (für l/r) */
    /* Fit: wie weit Form & Aussparung über die Kachelkante hinausragen.
       integriert = 0 (bündig, Kachel bleibt rechteckig) · überstehend = halbe Form. */
    --n91faq-fb-out: 0%;
    --n91faq-fb-out-len: 0px;
    --n91faq-cut-off: calc(-1 * var(--n91faq-fb-gap) - var(--n91faq-fb-out-len));
}
.n91faq--fit-inset    { --n91faq-fb-out: 0%;  --n91faq-fb-out-len: 0px; }
.n91faq--fit-protrude { --n91faq-fb-out: 50%; --n91faq-fb-out-len: var(--n91faq-fb-r); }
.n91faq--iconstyle-floating .n91faq__item { position: relative; border-radius: var(--n91faq-radius); }

/* Die Form selbst */
.n91faq--iconstyle-floating .n91faq__icon {
    position: absolute;
    z-index: 3;
    width: var(--n91faq-fb-size);
    height: var(--n91faq-fb-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--n91faq-badge-bg, #1a1a1a);
    color: var(--n91faq-icon-closed, var(--n91faq-badge-fg, #fff));
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    transform: var(--n91faq-fb-tf);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.n91faq--iconstyle-floating .n91faq__icon .n91cs-icon { width: calc(var(--n91faq-fb-size) * .44); height: calc(var(--n91faq-fb-size) * .44); transition: transform .2s ease; }
/* Offener Zustand (höhere Spezifität als die Geschlossen-Regel oben) */
.n91faq--iconstyle-floating .n91faq__item.is-open .n91faq__icon { color: var(--n91faq-icon-open, var(--n91faq-badge-fg, #fff)); }
/* Formen der Form + dazu passende Aussparungs-SVG (für den verschmolzenen Notch).
   preserveAspectRatio='none' → die Form skaliert exakt in die (größere) Aussparungs-Box. */
.n91faq--iconstyle-floating { --n91faq-cut-size: calc(2 * var(--n91faq-fb-R)); }
.n91faq--badge-round  .n91faq__icon { border-radius: 50%; }
.n91faq--badge-round  { --n91faq-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"); }
.n91faq--badge-soft   .n91faq__icon { border-radius: calc(var(--n91faq-fb-size) * .26); }
.n91faq--badge-soft   { --n91faq-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"); }
.n91faq--badge-square .n91faq__icon { border-radius: 0; }
.n91faq--badge-square { --n91faq-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"); }

/* Angeschrägt (abgerundet/eckig): eine 45°-Fase an der Ecke zur Kachel. Form via
   mask-image desselben SVG → Form-Silhouette und Aussparung sind IMMER identisch.
   Fallback (Kanten) = ohne Fase. */
.n91faq--badge-bevel-soft .n91faq__icon,
.n91faq--badge-bevel-sharp .n91faq__icon {
    border-radius: 0;
    -webkit-mask: var(--n91faq-cut-svg) center / 100% 100% no-repeat;
            mask: var(--n91faq-cut-svg) center / 100% 100% no-repeat;
}
.n91faq--badge-bevel-soft  { --n91faq-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"); }
.n91faq--badge-bevel-sharp { --n91faq-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"); }
/* Fase je Ecke (zeigt zur Kachelmitte). Pfad = Rundrechteck/Rechteck mit gekappter Ecke, rotiert. */
.n91faq--badge-bevel-soft.n91faq--float-br { --n91faq-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"); }
.n91faq--badge-bevel-soft.n91faq--float-bl { --n91faq-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"); }
.n91faq--badge-bevel-soft.n91faq--float-tl { --n91faq-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"); }
.n91faq--badge-bevel-soft.n91faq--float-tr { --n91faq-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"); }
.n91faq--badge-bevel-sharp.n91faq--float-br { --n91faq-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"); }
.n91faq--badge-bevel-sharp.n91faq--float-bl { --n91faq-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"); }
.n91faq--badge-bevel-sharp.n91faq--float-tl { --n91faq-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"); }
.n91faq--badge-bevel-sharp.n91faq--float-tr { --n91faq-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"); }

/* ── „Steg“ – verschmolzene Form nach Kunden-Vorlage (Test_FAQ.svg) ──
   Karte mit schräg eingebuchtetem Fuß + separate Button-Kachel mit paralleler
   Schrägkante, gleichmäßiger Spalt. Eck-Box im festen Verhältnis 151.3:138.3 (exakte
   Pfade aus der SVG). Eckspezifisch – Kantenpositionen fallen auf „unten rechts“ zurück. */
.n91faq--badge-steg {
    --steg-cw: calc(var(--n91faq-fb-size) * 1.778);
    --steg-ch: calc(var(--n91faq-fb-size) * 1.625);
    --n91faq-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;
}
/* Fab = Eck-Box, sichtbare Silhouette via Button-SVG-Maske */
.n91faq--badge-steg .n91faq__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;
}
/* Icon an die Button-Mitte (nicht Box-Mitte) */
.n91faq--badge-steg .n91faq__icon-closed,
.n91faq--badge-steg .n91faq__icon-open {
    position: absolute; left: var(--steg-ix); top: var(--steg-iy);
    transform: translate(-50%, -50%);
}
/* Karten-Aussparung = Karten-Cut-Polygon in Eck-Box-Größe an der Ecke */
.n91faq--badge-steg.n91faq--look-notch .n91faq__item::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);
}
/* Button-Spalte für Frage UND Antwort freihalten (kein Text unter der Kachel) */
.n91faq--badge-steg.n91faq--float-br .n91faq__q,
.n91faq--badge-steg.n91faq--float-tr .n91faq__q,
.n91faq--badge-steg.n91faq--float-br .n91faq__panel-inner,
.n91faq--badge-steg.n91faq--float-tr .n91faq__panel-inner { padding-right: calc(var(--steg-cw) + 6px); }
.n91faq--badge-steg.n91faq--float-bl .n91faq__q,
.n91faq--badge-steg.n91faq--float-tl .n91faq__q,
.n91faq--badge-steg.n91faq--float-bl .n91faq__panel-inner,
.n91faq--badge-steg.n91faq--float-tl .n91faq__panel-inner { padding-left: calc(var(--steg-cw) + 6px); }
.n91faq--badge-steg.n91faq--float-bl {
    --n91faq-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;
}
.n91faq--badge-steg.n91faq--float-tr {
    --n91faq-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;
}
.n91faq--badge-steg.n91faq--float-tl {
    --n91faq-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;
}
/* Button-Kachel ebenfalls 1.5px nach außen → deckt den Kachelrand sicher ab
   (kein 1px-Schlitz bei rechts-/oben-verankerten Positionen), Kanal bleibt gleich. */
.n91faq--badge-steg.n91faq--float-br .n91faq__fab { right: -1.5px; bottom: -1.5px; }
.n91faq--badge-steg.n91faq--float-bl .n91faq__fab { left: -1.5px; bottom: -1.5px; }
.n91faq--badge-steg.n91faq--float-tr .n91faq__fab { right: -1.5px; top: -1.5px; }
.n91faq--badge-steg.n91faq--float-tl .n91faq__fab { left: -1.5px; top: -1.5px; }


/* Verankerung der Form je Position (Mitte sitzt auf dem Bezugspunkt). Transform als
   Variable → der Hover-Lift kann sie sauber ergänzen. */
.n91faq--float-tl .n91faq__icon { top: 0;                 left: 0;   --n91faq-fb-tf: translate(calc(-1 * var(--n91faq-fb-out)), calc(-1 * var(--n91faq-fb-out))); }
.n91faq--float-t  .n91faq__icon { top: 0;                 left: 50%; --n91faq-fb-tf: translate(-50%, calc(-1 * var(--n91faq-fb-out))); }
.n91faq--float-tr .n91faq__icon { top: 0;                 right: 0;  --n91faq-fb-tf: translate(var(--n91faq-fb-out), calc(-1 * var(--n91faq-fb-out))); }
.n91faq--float-l  .n91faq__icon { top: var(--n91faq-fb-y); left: 0;   --n91faq-fb-tf: translate(calc(-1 * var(--n91faq-fb-out)), -50%); }
.n91faq--float-r  .n91faq__icon { top: var(--n91faq-fb-y); right: 0;  --n91faq-fb-tf: translate(var(--n91faq-fb-out), -50%); }
.n91faq--float-bl .n91faq__icon { bottom: 0;              left: 0;   --n91faq-fb-tf: translate(calc(-1 * var(--n91faq-fb-out)), var(--n91faq-fb-out)); }
.n91faq--float-b  .n91faq__icon { bottom: 0;              left: 50%; --n91faq-fb-tf: translate(-50%, var(--n91faq-fb-out)); }
.n91faq--float-br .n91faq__icon { bottom: 0;              right: 0;  --n91faq-fb-tf: translate(var(--n91faq-fb-out), var(--n91faq-fb-out)); }

/* Text horizontal frei halten (Form sitzt an der Seite) – in beiden Modi */
.n91faq--iconstyle-floating .n91faq__q { padding: 22px 24px; }
.n91faq--float-tl .n91faq__q, .n91faq--float-l .n91faq__q, .n91faq--float-bl .n91faq__q { padding-left: calc(var(--n91faq-fb-size) + 8px); }
.n91faq--float-tr .n91faq__q, .n91faq--float-r .n91faq__q, .n91faq--float-br .n91faq__q { padding-right: calc(var(--n91faq-fb-size) + 8px); }

/* Nur „Überstehend": Platz AUSSERHALB der Kachel reservieren (Form ragt hinaus).
   „Integriert" braucht das nicht – die Form sitzt bündig in der Kachel. */
.n91faq--fit-protrude.n91faq--float-tl .n91faq__item, .n91faq--fit-protrude.n91faq--float-t .n91faq__item, .n91faq--fit-protrude.n91faq--float-tr .n91faq__item { margin-top: calc(var(--n91faq-fb-r) + 4px); }
.n91faq--fit-protrude.n91faq--float-bl .n91faq__item, .n91faq--fit-protrude.n91faq--float-b .n91faq__item, .n91faq--fit-protrude.n91faq--float-br .n91faq__item { margin-bottom: calc(var(--n91faq-fb-r) + 4px); }

/* „badge"-Look: Abstandsring in Umgebungsfarbe (Form sitzt sichtbar außerhalb) */
.n91faq--look-badge .n91faq__icon { box-shadow: 0 0 0 var(--n91faq-fb-gap, 8px) var(--n91faq-cut, #fff); }

/* „notch"-Look: Fläche auf ::before, konkave Aussparung via mask, Inhalt darüber */
.n91faq--look-notch .n91faq__item { background: transparent; border: 0; }
.n91faq--look-notch .n91faq__item > :not(.n91faq__fab) { position: relative; z-index: 1; }
.n91faq--look-notch .n91faq__item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--n91faq-bg);
    border-style: solid;
    border-top-width: var(--n91faq-bt);
    border-right-width: var(--n91faq-br);
    border-bottom-width: var(--n91faq-bb);
    border-left-width: var(--n91faq-bl);
    border-color: var(--n91faq-border);
    border-radius: var(--n91faq-radius);
    transition: border-color .2s ease, background .2s ease;
    /* Volle Fläche MINUS Form-SVG (an der Position) → konkave, formgenaue Aussparung */
    -webkit-mask-image: linear-gradient(#000 0 0), var(--n91faq-cut-svg);
            mask-image: linear-gradient(#000 0 0), var(--n91faq-cut-svg);
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat;
    -webkit-mask-size: 100% 100%, var(--n91faq-cut-size) var(--n91faq-cut-size);
            mask-size: 100% 100%, var(--n91faq-cut-size) var(--n91faq-cut-size);
    -webkit-mask-position: 0 0, var(--n91faq-cut-pos);
            mask-position: 0 0, var(--n91faq-cut-pos);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
}
.n91faq--look-notch .n91faq__item.is-open::before { background: var(--n91faq-bg-open); border-color: var(--n91faq-border-open); }

/* Position der Aussparung je Stelle. Der zur Kante zeigende Versatz nutzt --cut-off
   (= Spalt + Auswärts-Versatz), damit „Integriert" und „Überstehend" automatisch passen.
   Die freie Achse bleibt zentriert. */
.n91faq--look-notch.n91faq--float-tl .n91faq__item { --n91faq-cut-pos: left var(--n91faq-cut-off) top var(--n91faq-cut-off); }
.n91faq--look-notch.n91faq--float-t  .n91faq__item { --n91faq-cut-pos: left calc(50% - var(--n91faq-fb-R)) top var(--n91faq-cut-off); }
.n91faq--look-notch.n91faq--float-tr .n91faq__item { --n91faq-cut-pos: right var(--n91faq-cut-off) top var(--n91faq-cut-off); }
.n91faq--look-notch.n91faq--float-l  .n91faq__item { --n91faq-cut-pos: left var(--n91faq-cut-off) top calc(var(--n91faq-fb-y) - var(--n91faq-fb-R)); }
.n91faq--look-notch.n91faq--float-r  .n91faq__item { --n91faq-cut-pos: right var(--n91faq-cut-off) top calc(var(--n91faq-fb-y) - var(--n91faq-fb-R)); }
.n91faq--look-notch.n91faq--float-bl .n91faq__item { --n91faq-cut-pos: left var(--n91faq-cut-off) bottom var(--n91faq-cut-off); }
.n91faq--look-notch.n91faq--float-b  .n91faq__item { --n91faq-cut-pos: left calc(50% - var(--n91faq-fb-R)) bottom var(--n91faq-cut-off); }
.n91faq--look-notch.n91faq--float-br .n91faq__item { --n91faq-cut-pos: right var(--n91faq-cut-off) bottom var(--n91faq-cut-off); }

/* ── Hover der Floating-Form ──
   Immer: Hintergrund wechselt. Optional „Anheben": das GANZE Form-Gerüst (Icon +
   Hintergrund) hebt sich leicht an (nicht nur das Icon). Basis-Transform bleibt
   über die Variable erhalten. */
.n91faq--iconstyle-floating .n91faq__fab:hover { background: var(--n91faq-border-open, #000); }
.n91faq--hover-lift .n91faq__fab:hover { transform: var(--n91faq-fb-tf) translateY(-5px); box-shadow: 0 8px 18px rgba(0, 0, 0, .22); }

@media (prefers-reduced-motion: reduce) {
    .n91faq--hover-lift .n91faq__fab:hover { transform: var(--n91faq-fb-tf); }
}

/* ── Sammel-Modus: Kategorie-Filterleiste + mehrere Gruppen ──
   Neutrale Tokens, da die Leiste außerhalb der Gruppen-Styles sitzt; über
   --n91faq-coll-accent/-border pro Einbettung übersteuerbar. */
.n91faq-collection { --n91faq-coll-accent: #1a1a1a; --n91faq-coll-border: #e5e5e5; }
.n91faq__filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
/* Filter-Buttons: zentrale Optik über .n91cs-chip (Globale Einstellungen → Filter-Chips). */
/* Collection = EIN Accordion; Filter blendet einzelne Fragen aus. */
.n91faq__item.is-hidden { display: none; }
.n91faq__empty { color: #767676; margin: 8px 0 0; }