/*!
 * Inverta — bundled stylesheet.
 * Generated by tools/build-css.php from faq.css.
 * Do not edit: change the module under assets/css/ and rebuild.
 * Modules inlined: 1
 */
/* =============================================================
   Inverta — Section: FAQ

   Editorial two-column accordion inside the same glass capsule the
   brands, about and bento sections use, so the page keeps one
   material language throughout.

   The open/close animation is pure CSS: a grid row that grows from
   0fr to 1fr. No height is measured in JavaScript, so nothing snaps
   when the content reflows, and the easing is the site's own.
   ============================================================= */

.vf-section-faq {
  /* The gap to the capsule above, from "Abstand zur vorherigen Sektion". */
  margin-block-start: var(--vf-faq-mt, 0px);
  /* Both of these used to be plain numbers, and there was a second, different
     number for the same variable in base/section-vars.css. The section now
     follows "Design-Grundlagen" like every other capsule. */
  --vf-faq-radius: var(--inv-radius, 16px);
  --vf-faq-q-size: 17px;
  --vf-faq-accent: var(--vf-faq-accent-color, var(--inv-accent, #24a9b3));
  --vf-faq-ink: var(--vf-faq-fg, var(--inv-fg, #0f172a));
  --vf-faq-line: color-mix(in srgb, var(--vf-faq-ink) 12%, transparent);
  /* Deliberately shorter than the site's general motion. An accordion is a
     direct answer to a click: at the full 400ms, with the body's own delay on
     top, the row reads as hesitating rather than opening. */
  --vf-faq-dur: calc(var(--inv-motion, 400ms) * 0.62);
  --vf-faq-ease: var(--inv-ease, cubic-bezier(.22, .61, .36, 1));

  position: relative;
  color: var(--vf-faq-ink);
  padding-block: var(--vf-faq-pt, var(--inv-section-rhythm, 80px)) var(--vf-faq-pb, var(--inv-section-rhythm, 80px));
  /* The section had no horizontal padding at all, so its own "Seitenabstand"
     and the global one had nothing to act on: below the container width the
     capsule simply touched both screen edges. */
  padding-inline: var(--inv-section-px, var(--inv-edge, 10px));
}

/* -------------------------------------------------------------
   Capsule
   ------------------------------------------------------------- */
.vf-faq-capsule {
  position: relative;
  /* Full width, like the bento, services and about capsules — the section's
     own "Maximale Breite" option narrows it, and 0 means full. Capping at
     --inv-container here made that option read as broken: the slider sat at 0
     and the section was still 1280px wide, a good deal narrower than every
     capsule above it. */
  max-width: min(var(--vf-faq-max-w, 100%), var(--inv-shell-max, 100%));
  margin-inline: auto;
  padding: clamp(28px, 4vw, 64px) var(--inv-gutter, clamp(20px, 3.4vw, 56px));
  border-radius: var(--vf-faq-capsule-radius, var(--inv-radius-capsule, 20px));
  isolation: isolate;
  /* No overflow:hidden here. It would clip the glow, but it also cancels
     position:sticky on every descendant — and the left column is sticky by
     design: the heading and the picture are meant to hold still while the
     questions scroll past them. The glow clips itself instead. */
}

/* Content above the glow. */
.vf-faq-grid { position: relative; z-index: 1; }

.vf-faq-capsule-mode .vf-faq-capsule {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-top-color: color-mix(in srgb, var(--inv-surface, #fff) 90%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--inv-surface, #fff) 72%, transparent) 0%, color-mix(in srgb, var(--inv-surface, #fff) 42%, transparent) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  /* The accent ring is FAQ's own; the depth behind it is the shared capsule
     shadow, so "Schattentiefe" reaches this section like the others. */
  box-shadow:
    0 0 0 1px rgba(var(--inv-accent-rgb, 36, 169, 179), 0.05),
    var(--inv-shadow-capsule);
}

.vf-faq-fullwidth-mode .vf-faq-capsule {
  padding-inline: 0;
  max-width: min(var(--vf-faq-max-w, 100%), var(--inv-shell-max, 100%));
}

/* A soft accent bloom behind the capsule, so the section reads as lit
   rather than flat. It never intercepts a click. */
/* The glow lives inside the capsule and is clipped by it.
 *
 * It used to sit at inset:-12% -6% with z-index:-1 — outside the capsule and
 * behind it — so a blurred wash of accent colour spread onto the page itself.
 * Against the page background that read as a second, larger backdrop behind
 * the section. The page keeps its own colour; the gradient is the capsule's. */
.vf-faq-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.55;
  /* Kein filter: blur() — Safari rechnet ihn auf dieser Fläche beim Scrollen
     jedes Bild neu (1.7.23). Der Verlauf läuft ohnehin weich aus. */
  /* clip-path cuts the rendered result, blur included, and unlike overflow on
     the parent it costs no scrolling behaviour. */
  clip-path: inset(0 round var(--vf-faq-capsule-radius, var(--inv-radius-capsule, 20px)));
  background:
    radial-gradient(ellipse 40% 46% at 12% 18%, color-mix(in srgb, var(--vf-faq-accent) 38%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 44% 40% at 88% 82%, color-mix(in srgb, var(--vf-faq-accent) 24%, transparent) 0%, transparent 72%);
}

.vf-faq-capsule-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

/* -------------------------------------------------------------
   Grid
   ------------------------------------------------------------- */
.vf-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

.vf-faq-layout-stacked .vf-faq-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
}

.vf-faq-layout-stacked .vf-faq-aside {
  position: static;
  max-width: 720px;
}

/* -------------------------------------------------------------
   Layouts with a picture

   The aside is already sticky, so putting the picture inside it gives
   exactly the behaviour the heading has today: it stays in view while
   the questions scroll past, and lets go at the end of the section.
   Nothing is measured in JavaScript for this.

   media        picture on the left, questions on the right
   media-right  the same, mirrored
   ------------------------------------------------------------- */
.vf-faq-layout-media .vf-faq-grid,
.vf-faq-layout-media-right .vf-faq-grid {
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
}

/* Mirrored by grid order, not by direction, so the reading order in the
   markup stays heading-then-questions for a screen reader. */
.vf-faq-layout-media-right .vf-faq-aside { order: 2; }

.vf-faq-layout-media-right .vf-faq-main  { order: 1; }

/* -------------------------------------------------------------
   Layout: cards — heading on top, questions in two columns
   ------------------------------------------------------------- */
.vf-faq-layout-cards .vf-faq-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 3.2vw, 44px);
}

/* Named areas rather than automatic placement: the aside holds five children
   of its own — eyebrow, heading, intro, picture, support card — and letting
   them flow into a two-column grid would deal them out like cards. */
.vf-faq-layout-cards .vf-faq-aside {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-areas:
    "eyebrow media"
    "title   media"
    "desc    media"
    "support media";
  column-gap: clamp(24px, 3vw, 48px);
  align-items: start;
  max-width: none;
}

.vf-faq-layout-cards .vf-faq-eyebrow { grid-area: eyebrow; }

.vf-faq-layout-cards .vf-faq-title   { grid-area: title; }

.vf-faq-layout-cards .vf-faq-desc    { grid-area: desc; }

.vf-faq-layout-cards .vf-faq-support { grid-area: support; }

.vf-faq-layout-cards .vf-faq-media {
  grid-area: media;
  align-self: stretch;
  /* Stretched to the height of the text beside it, so a fixed ratio would
     fight the row it has been given. */
  aspect-ratio: auto;
  min-height: 280px;
}

.vf-faq-layout-cards .vf-faq-list {
  display: grid;
  grid-template-columns: repeat(var(--vf-faq-cols, 2), minmax(0, 1fr));
  gap: var(--vf-faq-item-gap, 14px);
  align-content: start;
}

/* Each question becomes its own card rather than a row in a stack, so the
   hairline that separates rows would read as a stray line here. */
.vf-faq-layout-cards .vf-faq-item {
  border: 1px solid var(--vf-faq-line);
  border-radius: var(--vf-faq-radius);
  padding-inline: 4px;
  background: var(--vf-faq-item-bg, color-mix(in srgb, var(--inv-surface, #fff) var(--vf-faq-glass, 55%), transparent));
}

.vf-faq-layout-cards .vf-faq-item::after { display: none; }

/* -------------------------------------------------------------
   The picture
   ------------------------------------------------------------- */
.vf-faq-media {
  display: none;
  position: relative;
  /* A narrowed picture stays where it is told, not wherever the column's
     text alignment happens to leave it. The keyword maps to an auto margin,
     which is what actually moves a block inside its own column. */
  margin-block: clamp(22px, 2.6vw, 34px) 0;
  margin-inline: var(--vf-faq-media-ml, auto) var(--vf-faq-media-mr, auto);
  width: var(--vf-faq-media-w, 100%);
  border-radius: calc(var(--vf-faq-radius) * 1.15);
  overflow: hidden;
  aspect-ratio: var(--vf-faq-media-ratio, 4 / 5);
  /* No plate behind the picture by default. A grey rectangle under a photo
     that already covers it is invisible; under a photo that does not, it is
     a mistake showing through. It is a setting for the one case that wants
     it: a cut-out PNG that needs something to stand on. */
  background: transparent;
}

/* Where a narrowed picture sits, as the pair of margins each case needs.
   Centred is the default, because a picture pinned to one edge of a column
   only looks deliberate when somebody chose it. */
.vf-faq-media-align-left   .vf-faq-media { --vf-faq-media-ml: 0;    --vf-faq-media-mr: auto; }
.vf-faq-media-align-center .vf-faq-media { --vf-faq-media-ml: auto; --vf-faq-media-mr: auto; }
.vf-faq-media-align-right  .vf-faq-media { --vf-faq-media-ml: auto; --vf-faq-media-mr: 0; }

.vf-faq-media--plate {
  background: color-mix(in srgb, var(--vf-faq-ink) 6%, transparent);
}

.vf-faq-layout-media .vf-faq-media,
.vf-faq-layout-media-right .vf-faq-media,
.vf-faq-layout-cards .vf-faq-media { display: block; }

/* In the cards layout the picture sits beside the heading, not under it. */
.vf-faq-layout-cards .vf-faq-media { margin: 0; }

/* The drift lives on the image; the entrance animation lives on the figure.
   Keeping them on separate elements is what stops one transform from
   cancelling the other. */
.vf-faq-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--vf-faq-media-pos, center center);
  display: block;
  transform: scale(1.04);
  transition: transform 1.6s var(--vf-faq-ease);
}

.vf-section-faq.is-revealed .vf-faq-media img { transform: scale(1); }

/* An accent hairline inside the frame, the same device the capsule uses. */
.vf-faq-media--framed::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid color-mix(in srgb, #fff 42%, transparent);
  border-radius: calc(var(--vf-faq-radius) * 0.8);
  pointer-events: none;
}

/* The frame draws only when the badge has something to say. */
.vf-faq-media--framed:has(.vf-faq-media__badge[hidden])::after { display: none; }

.vf-faq-media__badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 14px;
  border-radius: calc(var(--vf-faq-radius) * 0.7);
  background: color-mix(in srgb, var(--inv-surface, #fff) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--vf-faq-ink) 10%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  text-align: start;
}

.vf-faq-media__value {
  font-family: var(--inv-font-display, system-ui, sans-serif);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--vf-faq-accent);
  font-variant-numeric: tabular-nums;
}

.vf-faq-media__label {
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--vf-faq-ink) 62%, transparent);
}

/* The mask that opens over the picture as the section arrives. It runs
   from a visible resting state, so a picture is never hidden by it. */
@keyframes vf-faq-media-open {
from { clip-path: inset(0 0 100% 0); }

to   { clip-path: inset(0 0 0 0); }
}

.inv-anim-cinematic .vf-section-faq.is-revealed .vf-faq-media,
.vf-anim-cinematic.vf-section-faq.is-revealed .vf-faq-media {
  animation: vf-faq-media-open calc(var(--inv-motion, 400ms) * 2.4) var(--vf-faq-ease) both;
}

/* -------------------------------------------------------------
   Aside
   ------------------------------------------------------------- */
.vf-faq-aside {
  position: sticky;
  top: calc(var(--inv-header-h, 60px) + var(--inv-header-bar-pt, 10px) + 24px);
}

.vf-faq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vf-faq-accent);
}

/* No rule beside the eyebrow: letter-spacing and the accent colour already
   separate a short label from the headline under it. */

.vf-faq-title {
  margin: 0 0 16px;
  font-family: var(--inv-font-display, inherit);
  font-size: var(--vf-faq-title-size, clamp(30px, 3.6vw, 52px));
  font-weight: var(--vf-faq-title-weight, 700);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.vf-faq-desc {
  margin: 0;
  max-width: 42ch;
  font-size: var(--vf-faq-desc-size, 15.5px);
  font-weight: var(--vf-faq-desc-weight, 400);
  line-height: 1.65;
  color: color-mix(in srgb, var(--vf-faq-ink) 68%, transparent);
}

.vf-faq-desc p { margin: 0 0 0.8em; }

.vf-faq-desc p:last-child { margin-bottom: 0; }

/* Support card */
.vf-faq-support {
  position: relative;
  margin-top: clamp(24px, 3vw, 40px);
  padding: 22px 24px;
  border-radius: var(--vf-faq-support-radius, var(--vf-faq-radius));
  border: 1px solid var(--vf-faq-line);
  background: var(--vf-faq-support-bg, color-mix(in srgb, var(--vf-faq-accent) 7%, transparent));
  color: var(--vf-faq-support-fg, inherit);
  overflow: hidden;
}

.vf-faq-support-spark {
  position: absolute;
  top: -40px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--vf-faq-accent) 45%, transparent) 0%, transparent 68%);
  /* Kein filter: blur() — Safari rechnet ihn auf dieser Fläche beim Scrollen
     jedes Bild neu (1.7.23). Der Verlauf läuft ohnehin weich aus. */
  pointer-events: none;
}

.vf-faq-support-title {
  margin: 0 0 6px;
  font-size: var(--vf-faq-support-title-size, 15px);
  font-weight: var(--vf-faq-support-title-weight, 700);
  letter-spacing: -0.01em;
}

.vf-faq-support-text {
  margin: 0 0 16px;
  font-size: var(--vf-faq-support-text-size, 13px);
  font-weight: var(--vf-faq-support-text-weight, 400);
  line-height: 1.55;
  color: var(--vf-faq-support-fg, color-mix(in srgb, var(--vf-faq-ink) 64%, transparent));
}

/* The site button, in the accent colour. Rounding, lift, sheen and the arrow
   all come from components/buttons.css — this only says which colour it is. */
.vf-faq-support-btn {
  color: var(--vf-faq-btn-ink, var(--vf-faq-ink));
  border-color: color-mix(in srgb, var(--vf-faq-accent) 45%, transparent);
  background: color-mix(in srgb, var(--vf-faq-accent) 14%, transparent);
  font-size: var(--vf-faq-btn-size, 13.5px);
  font-weight: var(--vf-faq-btn-weight, 600);
  border-radius: var(--vf-faq-btn-radius, var(--inv-radius-sm, 10px));
  padding: .7rem 1.2rem;
}

.vf-faq-support-btn:hover {
  border-color: color-mix(in srgb, var(--vf-faq-accent) 70%, transparent);
  background: color-mix(in srgb, var(--vf-faq-accent) 22%, transparent);
}

/* The lift, the sheen and the arrow's nudge are the shared button's. */
.vf-faq-support-btn svg {
  width: 15px;
  height: 15px;
}

/* -------------------------------------------------------------
   Tools: search + category chips
   ------------------------------------------------------------- */
.vf-faq-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: clamp(18px, 2vw, 28px);
}

.vf-faq-search-wrap {
  position: relative;
  flex: 1 1 240px;
  display: flex;
  align-items: center;
}

.vf-faq-search-icon {
  position: absolute;
  left: 16px;
  width: 16px;
  height: 16px;
  opacity: 0.45;
  pointer-events: none;
}

.vf-faq-search {
  width: 100%;
  padding: 12px 42px 12px 42px;
  border-radius: var(--vf-faq-control-radius, 12px);
  border: 1px solid color-mix(in srgb, var(--vf-faq-ink) 9%, transparent);
  background: color-mix(in srgb, var(--inv-surface, #fff) var(--vf-faq-glass, 55%), transparent);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 0 color-mix(in srgb, #fff 65%, transparent);
  color: inherit;
  font: inherit;
  font-size: 14px;
  outline: none;
  transition:
    border-color var(--vf-faq-dur) var(--vf-faq-ease),
    box-shadow var(--vf-faq-dur) var(--vf-faq-ease),
    background-color var(--vf-faq-dur) var(--vf-faq-ease);
}

.vf-faq-search::-webkit-search-cancel-button { display: none; }

.vf-faq-search:focus-visible {
  border-color: var(--vf-faq-accent);
  box-shadow: 0 0 0 4px rgba(var(--inv-accent-rgb, 36, 169, 179), 0.18);
}

.vf-faq-search-clear {
  position: absolute;
  right: 12px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--vf-faq-ink) 8%, transparent);
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--vf-faq-dur) var(--vf-faq-ease);
}

.vf-faq-search-clear svg { width: 13px; height: 13px; }

.vf-faq-search-clear:hover { opacity: 1; }

.vf-faq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Glass, and rounded rather than round. A full pill reads as a tag — something
   describing the content — where these are controls that act on it. */
.vf-faq-chip {
  padding: 8px 15px;
  border-radius: var(--vf-faq-control-radius, 12px);
  border: 1px solid color-mix(in srgb, var(--vf-faq-ink) 9%, transparent);
  background: color-mix(in srgb, var(--inv-surface, #fff) var(--vf-faq-glass, 55%), transparent);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 0 color-mix(in srgb, #fff 65%, transparent);
  color: color-mix(in srgb, var(--vf-faq-ink) 72%, transparent);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    color var(--vf-faq-dur) var(--vf-faq-ease),
    border-color var(--vf-faq-dur) var(--vf-faq-ease),
    background-color var(--vf-faq-dur) var(--vf-faq-ease);
}

.vf-faq-chip:hover { border-color: color-mix(in srgb, var(--vf-faq-accent) 55%, transparent); }

.vf-faq-chip.is-active {
  color: var(--vf-faq-ink);
  border-color: color-mix(in srgb, var(--vf-faq-accent) 65%, transparent);
  background: color-mix(in srgb, var(--vf-faq-accent) 15%, transparent);
}

/* -------------------------------------------------------------
   Accordion
   ------------------------------------------------------------- */
.vf-faq-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--vf-faq-line);
}

.vf-faq-item {
  position: relative;
  border-bottom: 1px solid var(--vf-faq-line);
  transition: background-color var(--vf-faq-dur) var(--vf-faq-ease);
}

/* No rail down the open row. The row already says it is open — it is the one
   with an answer under it — and a coloured bar on the left edge was a second
   announcement of the same thing. */

/* An open row is a card: glass, rounded, lifted off the list. The rule that
   used to mark it was a 5% accent wash, which on a glass capsule is close
   enough to nothing that the row read as still closed.
   Unless "Fragen als Karten" is off — see the plain-list block below. */
.vf-faq-item.is-open {
  border-radius: var(--vf-faq-radius);
  border-bottom-color: transparent;
  background: var(--vf-faq-item-open-bg, color-mix(in srgb, var(--inv-surface, #fff) var(--vf-faq-glass, 55%), transparent));
  -webkit-backdrop-filter: blur(20px) saturate(175%);
  backdrop-filter: blur(20px) saturate(175%);
  box-shadow:
    inset 0 1px 0 0 color-mix(in srgb, #fff 70%, transparent),
    0 10px 30px -14px color-mix(in srgb, var(--vf-faq-ink) 40%, transparent);
}

.vf-faq-heading { margin: 0; font-size: inherit; font-weight: inherit; }

.vf-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  padding: var(--vf-faq-item-pad, clamp(18px, 2vw, 26px)) clamp(14px, 1.6vw, 22px);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: padding-left var(--vf-faq-dur) var(--vf-faq-ease);
}

.vf-faq-q:focus-visible {
  outline: 2px solid var(--vf-faq-accent);
  outline-offset: -4px;
  border-radius: 8px;
}

.vf-faq-num {
  flex: none;
  min-width: 2.2ch;
  font-family: var(--inv-font-display, inherit);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--vf-faq-accent);
  opacity: 0.75;
  transition: opacity var(--vf-faq-dur) var(--vf-faq-ease);
}

.vf-section-faq:not(.vf-faq-has-numbers) .vf-faq-num { display: none; }

.vf-faq-item.is-open .vf-faq-num { opacity: 1; }

.vf-faq-q-text {
  flex: 1 1 auto;
  font-size: var(--vf-faq-q-size);
  font-weight: var(--vf-faq-q-weight, 600);
  line-height: 1.4;
  letter-spacing: -0.012em;
  transition: color var(--vf-faq-dur) var(--vf-faq-ease);
}

.vf-faq-q:hover .vf-faq-q-text { color: var(--vf-faq-accent); }

/* Plus that rotates into a minus — two bars, one of them collapsing. */
/* The plus, without a ring around it. A circle on every row turned a list of
   questions into a list of buttons. */
.vf-faq-icon {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  transition:
    border-color var(--vf-faq-dur) var(--vf-faq-ease),
    background-color var(--vf-faq-dur) var(--vf-faq-ease),
    transform var(--vf-faq-dur) var(--vf-faq-ease);
}

.vf-faq-icon i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--vf-faq-dur) var(--vf-faq-ease), opacity var(--vf-faq-dur) var(--vf-faq-ease);
}

.vf-faq-icon i:last-child { transform: translate(-50%, -50%) rotate(90deg); }

/* No plate behind the minus. The ring was removed a while ago because a
   circle on every row was noise; the tinted square that was left when a row
   opened was the same noise with the outline taken off. The turn and the
   colour say the row is open. */
.vf-faq-item.is-open .vf-faq-icon {
  color: var(--vf-faq-accent);
  transform: rotate(180deg);
}

.vf-faq-item.is-open .vf-faq-icon i:last-child {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

/* The answer. grid-template-rows animates cleanly from nothing to the
   content's own height, which is what keeps this from snapping. */
.vf-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--vf-faq-dur) var(--vf-faq-ease);
}

.vf-faq-item.is-open .vf-faq-a { grid-template-rows: 1fr; }

.vf-faq-a-inner {
  overflow: hidden;
  min-height: 0;
}

.vf-faq-a-body {
  padding: 0 clamp(14px, 1.6vw, 22px) clamp(20px, 2.2vw, 28px);
  padding-left: calc(clamp(14px, 1.6vw, 22px) + var(--vf-faq-body-indent, 0px));
  max-width: 62ch;
  font-size: var(--vf-faq-a-size, 15px);
  font-weight: var(--vf-faq-a-weight, 400);
  line-height: 1.68;
  color: color-mix(in srgb, var(--vf-faq-ink) 72%, transparent);
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity var(--vf-faq-dur) var(--vf-faq-ease),
    transform var(--vf-faq-dur) var(--vf-faq-ease);
}

.vf-section-faq.vf-faq-has-numbers { --vf-faq-body-indent: calc(2.2ch + clamp(12px, 1.6vw, 22px)); }

.vf-faq-item.is-open .vf-faq-a-body {
  opacity: 1;
  transform: none;
  /* Fade in once the row has begun to open, so text never appears
     before there is room for it. */
  transition-delay: calc(var(--vf-faq-dur) * 0.12);
}

.vf-faq-a-body p { margin: 0 0 0.9em; }

.vf-faq-a-body p:last-child { margin-bottom: 0; }

.vf-faq-a-body a { color: var(--vf-faq-accent); }

/* -------------------------------------------------------------
   The plain list

   "Fragen als Karten" switched off: no card, no glass, no lift — just a
   hairline between one question and the next, which is what a long FAQ
   often wants. Everything else about the row is unchanged, so the two
   modes share their spacing, their type and their animation.
   ------------------------------------------------------------- */
.vf-section-faq.vf-faq-plain .vf-faq-item,
.vf-section-faq.vf-faq-plain.vf-faq-layout-cards .vf-faq-item {
  border: 0;
  border-bottom: 1px solid var(--vf-faq-line);
  border-radius: 0;
  background: none;
  padding-inline: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.vf-section-faq.vf-faq-plain .vf-faq-item:last-child {
  border-bottom: 0;
}

.vf-section-faq.vf-faq-plain .vf-faq-item.is-open {
  border-bottom-color: var(--vf-faq-line);
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* Without cards the grid is a list again, however the layout option is set. */
.vf-section-faq.vf-faq-plain.vf-faq-layout-cards .vf-faq-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* Filtering: rows leave and arrive instead of blinking out.
 *
 * display is part of the transition, with allow-discrete, so the row fades
 * and only then leaves the flow. Fading alone was not enough — the row kept
 * its full height, and a filtered list was a column of gaps with the matching
 * questions scattered down it. Browsers without allow-discrete simply drop the
 * row at once, which is still the right result. */
.vf-faq-item {
  transition:
    background-color var(--vf-faq-dur) var(--vf-faq-ease),
    opacity 260ms var(--vf-faq-ease),
    transform 260ms var(--vf-faq-ease),
    display 260ms var(--vf-faq-ease) allow-discrete;
}

.vf-faq-item.is-filtered {
  display: none;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

.vf-faq-empty {
  margin: 28px 0 0;
  text-align: center;
  font-size: 14px;
  color: color-mix(in srgb, var(--vf-faq-ink) 55%, transparent);
}

/* Rows rise in sequence once the section comes into view.

   Written as an animation rather than as a hidden starting state on purpose:
   without JavaScript the class is never added, the animation never runs, and
   the questions are simply there. A section that hides itself in CSS and waits
   for a script to reveal it is one failed request away from being invisible. */
@keyframes vf-faq-rise {
from { opacity: 0; transform: translateY(14px); }

to   { opacity: 1; transform: none; }
}

.vf-section-faq.is-revealed .vf-faq-item {
  animation: vf-faq-rise 620ms var(--vf-faq-ease) both;
  animation-delay: calc(var(--vf-faq-i, 1) * 55ms);
}

/* A filtered row must not be re-run by the entrance animation. */
.vf-section-faq.is-revealed .vf-faq-item.is-filtered {
  animation: none;
}

/* -------------------------------------------------------------
   Dark surface
   ------------------------------------------------------------- */
.vf-section-faq.vf-faq-theme-dark {
  --vf-faq-line: rgba(255, 255, 255, 0.12);
}

.vf-faq-theme-dark.vf-faq-capsule-mode .vf-faq-capsule {
  border-color: rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.24);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
}

/* -------------------------------------------------------------
   Responsive
   ------------------------------------------------------------- */
/* One set of breakpoints for the whole page.
 *
 * The bento, and the sections built around it, change at 991px and 767px. This
 * section used to change at its own width, so on a tablet you could be looking
 * at one section already stacked and the next still in two columns. */
@media (max-width: 991px) {
/*
 * Jede Variante wird hier einzeln genannt, und das ist kein Versehen.
 *
 * Eine Medienabfrage gibt einer Regel kein Gewicht. '.vf-faq-grid' wiegt
 * eine Klasse, '.vf-faq-layout-media .vf-faq-grid' wiegt zwei — also gewann
 * der Entwurf der Variante gegen das Zusammenklappen, in jeder Breite.
 * Gemessen am 06.10.2026 auf 390px: zwei Spalten von 139 und 177 Pixeln,
 * jede Frage auf drei Zeilen. Das betraf die Varianten „Medium“ und
 * „Medium rechts“; die uebrigen standen hier schon auf einer Spalte und
 * sahen deshalb richtig aus.
 */
.vf-faq-grid,
.vf-faq-layout-media .vf-faq-grid,
.vf-faq-layout-media-right .vf-faq-grid { grid-template-columns: minmax(0, 1fr); }

.vf-faq-aside { position: static; max-width: 720px; }

/* Order is reset so the mirrored layout does not put the questions above
     their own heading once the columns collapse. */
  .vf-faq-layout-media-right .vf-faq-aside,
.vf-faq-layout-media-right .vf-faq-main { order: 0; }

.vf-faq-layout-cards .vf-faq-aside { grid-template-columns: minmax(0, 1fr); }

/*
 * „Karten pro Zeile“ gilt jetzt auch hier.
 *
 * Die eine Spalte stand als Zahl da, und damit hätte der Tablett-Reiter des
 * Reglers nichts bewirkt. Die 1 dahinter ist, was vorher dastand.
 */
.vf-faq-layout-cards .vf-faq-list {
    grid-template-columns: repeat(var(--vf-faq-cols-tab, 1), minmax(0, 1fr));
  }

.vf-faq-layout-cards .vf-faq-aside { grid-template-areas: none; }

.vf-faq-layout-cards .vf-faq-eyebrow,
.vf-faq-layout-cards .vf-faq-title,
.vf-faq-layout-cards .vf-faq-desc,
.vf-faq-layout-cards .vf-faq-support,
.vf-faq-layout-cards .vf-faq-media { grid-area: auto; }

.vf-faq-layout-cards .vf-faq-media { min-height: 0; }

.vf-faq-media { aspect-ratio: var(--vf-faq-media-ratio, 16 / 10); }

.vf-faq-support { margin-top: 20px; }
}

@media (max-width: 767px) {
.vf-faq-capsule { padding: 22px 16px; border-radius: var(--vf-faq-capsule-radius, var(--inv-radius-capsule, 20px)); }

  /*
   * Der Innenabstand war hier eine Zahl, und damit war der Regler daneben
   * unter 768px ohne Wirkung — gemessen am 06.10.2026: 16px blieb 16px.
   * Jetzt liest die Regel den Telefon-Wert, dann den Tablett-Wert, dann die
   * 16px von vorher. Ungesetzt sieht nichts anders aus.
   */
  .vf-faq-q { padding: var(--vf-faq-item-pad-mob, var(--vf-faq-item-pad-tab, 16px)) 10px; gap: 10px; }

  /*
   * Und die Überschrift bekommt auf dem Telefon ihre eigene Größe.
   *
   * Vorher stand hier nichts: .vf-faq-title liest var(--vf-faq-title-size)
   * ohne Haltepunkt, also galt der Desktop-Wert auch auf 360px Breite. Auf
   * diesem Telefon waren das 44px für eine Zeile von 36 Zeichen — der Titel
   * nahm vier Zeilen ein. Der Entwurf hatte für diese Breite nie eine eigene
   * Größe, weil er ohne Regler mit clamp() mitwuchs.
   */
  .vf-faq-title {
    font-size: var(--vf-faq-title-size-mob, var(--vf-faq-title-size-tab, clamp(26px, 6.4vw, 34px)));
  }

.vf-faq-a-body { padding-inline: 10px; }

.vf-section-faq.vf-faq-has-numbers { --vf-faq-body-indent: 0px; }

.vf-faq-tools { gap: 10px; }
}

/* Der Haltepunkt, an dem auch der Telefon-Reiter des Reglers umschaltet. */
@media (max-width: 640px) {
  .vf-faq-layout-cards .vf-faq-list {
    grid-template-columns: repeat(var(--vf-faq-cols-mob, var(--vf-faq-cols-tab, 1)), minmax(0, 1fr));
  }
}

/* Small phones: the capsule keeps a frame rather than becoming the page. */
@media (max-width: 420px) {
  .vf-faq-capsule { padding: 18px 12px; }

  .vf-faq-tools { flex-direction: column; align-items: stretch; }

  .vf-faq-chips { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }

  .vf-faq-chips::-webkit-scrollbar { display: none; }
}

/* -------------------------------------------------------------
   Reduced motion: state still changes, nothing travels
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.vf-section-faq *,
.vf-section-faq *::before {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

.vf-section-faq .vf-faq-item {
    animation: none !important;
  }
}

/* The section's own button ink, handed to the shared button styles. Unset it
   resolves to nothing and the chosen style keeps its own colour. */
.vf-section-faq {
  --inv-btn-ink: var(--vf-faq-btn-ink);
}