/* ===========================================================================
   AWAQN — /paket/ page stylesheet.  HAND-AUTHORED.

   Every value here was read off the LIVE page's *computed* styles on
   2026-08-08 (snapshot: ../live-snapshot-2026-08-08/), not re-derived from
   the export's markup and not invented.  The design is 1:1 with what shipped;
   only the engine underneath changed.  Owner ruling 2026-08-08: "if I make a
   screenshot of both pages, I cannot see a difference."

   Layer order:  tokens/*.css  ->  this file.  Nothing else.
   =========================================================================== */

/* ---------------------------------------------------------------- base --- */

html, body { margin: 0; padding: 0; background: #000; overflow-x: hidden; }

body {
  color: var(--color-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

* { box-sizing: border-box; }
img { max-width: 100%; display: block; }
button, a { touch-action: manipulation; }

a { color: var(--color-accent); font-weight: var(--weight-bold); text-decoration: none; }
a:hover { color: #7df6ff; }

/* -------------------------------------------------------------- ambient ---
   BRAND-CRITICAL (owner, 2026-08-08): identical visually AND in behaviour on
   desktop and phone. The same ruling allowed the IMPLEMENTATION to change, and
   it had to.

   🔴 NEVER PUT A blur() FILTER BACK ON THESE TWO LAYERS.
   They used to carry `filter: blur(130px)` and `blur(180px)`. On the owner's
   iPhone that made the page take ~15 SECONDS: Safari painted one frame at
   ~1.0s and then presented no frame at all for the next 22 seconds, on a page
   whose network was idle at 1.0s and whose JavaScript was doing nothing.

   Proven by elimination on the device itself, not argued:
     blur kept, all 9 backdrop-filter cards removed  -> still ~15s
     blur removed, the layers and the cards kept     -> under 1 second
   So it is the blur shader on these two layers specifically. The glass cards
   are innocent and keep their backdrop-filter (see .glass below).

   What replaced it: the same field with no filter at all. A radial gradient is
   already a smooth falloff, so the blur was mostly (1) softening the outer
   stop — now a further-out stop plus a mid stop for a gaussian-ish ramp,
   (2) bleeding the two lobes together — both widened, and (3) shifting colour
   via saturate()/brightness() — folded into the rgba values.

   🔴 THESE NUMBERS ARE FITTED. `node funnel/tools/ambient-match.mjs` renders
   this against the original blurred field, decodes both screenshots and reports
   the per-channel delta: mean 5.4 / worst 10 at 1280x900, mean 4.9 / worst 11
   at 390x844, out of 255. RE-RUN IT AFTER ANY EDIT HERE. Owner confirmed the
   look and the speed on his own iPhone, 2026-08-08.

   ⚠ Not matchable in principle, so do not chase it: blur() is an absolute pixel
   radius while this geometry is a percentage. At 390px the old blur spanned a
   third of the screen and at 1280px a tenth — the original was already not the
   same shape on phone and desktop. This is fitted to both at once.            */

.void { position: relative; background: #000; min-height: 100vh; overflow-x: hidden; }

.void__glow-near,
.void__glow-far {
  position: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}
.void__glow-near {
  inset: -25%;
  background-size: 150% 150%;
  background-image:
    radial-gradient(56% 70% at 28% 34%,
      rgba(0, 182, 182, 0.192) 0%, rgba(0, 144, 144, 0.095) 42%, rgba(0, 0, 0, 0) 74%),
    radial-gradient(56% 70% at 76% 64%,
      rgba(172, 48, 134, 0.175) 0%, rgba(136, 38, 108, 0.086) 44%, rgba(0, 0, 0, 0) 76%);
}
.void__glow-far {
  inset: -40%;
  background-size: 180% 180%;
  opacity: 0.62;
  background-image:
    radial-gradient(60% 76% at 28% 34%,
      rgba(0, 144, 144, 0.163) 0%, rgba(0, 112, 112, 0.077) 45%, rgba(0, 0, 0, 0) 78%),
    radial-gradient(60% 76% at 76% 64%,
      rgba(136, 38, 108, 0.143) 0%, rgba(108, 28, 84, 0.072) 46%, rgba(0, 0, 0, 0) 80%);
}

.page { position: relative; z-index: 1; }

/* -------------------------------------------------------------- sections -- */

.section {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 6rem) clamp(1.35rem, 4vw, 2.5rem);
}
.section--hero      { padding: clamp(2rem, 5vw, 3.5rem) clamp(1.35rem, 4vw, 2.5rem) clamp(2.5rem, 5vw, 2.5rem); }
.section--offer     { max-width: none; padding: clamp(2rem, 4vw, 2rem) clamp(1.35rem, 4vw, 2.5rem); }
.section--preview   { padding: clamp(4rem, 8vw, 5.5rem) clamp(1.35rem, 4vw, 2.5rem) clamp(1rem, 2.5vw, 1.75rem); }
.section--books     { padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1.35rem, 4vw, 2.5rem) clamp(4rem, 8vw, 6rem); }
.section--price     { max-width: none; padding: clamp(2.5rem, 6vw, 4rem) clamp(1.35rem, 4vw, 2.5rem); }
.section--faq       { padding: clamp(4rem, 8vw, 5rem) clamp(1.35rem, 4vw, 2.5rem); }
.section--close     { padding: clamp(2.5rem, 6vw, 4rem) clamp(1.35rem, 4vw, 2.5rem) clamp(4rem, 10vw, 7rem); text-align: center; }

/* ------------------------------------------------------------------ hero -- */

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 9vw, 5.25rem);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-tightest);
  line-height: 1.06;
  margin: 0;
  max-width: 20ch;
  text-wrap: pretty;
}
.hero__sub {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
  max-width: 54ch;
  margin: 1.75rem 0 0;
}

/* The locked brand accent word: Georgia italic in the tonal-cyan gradient.
   background-clip:text clips the italic overhang, so the inline box is padded
   and the margin pulled back by the same amount — layout flow unchanged. */
.accent-word {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--weight-medium);
  background: var(--color-gradient-word);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display: inline-block;
  padding: 0.08em 0.24em 0.18em 0.04em;
  margin: -0.08em -0.24em -0.18em -0.04em;
  line-height: var(--leading-snug);
}
/* the plain cyan italic used inside the smaller headings */
.accent-italic {
  font-family: var(--font-accent);
  color: var(--color-accent);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: 1.08em;
}

/* --------------------------------------------------------------- eyebrow -- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-ink-muted);
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-gradient-accent);
}
.eyebrow--wide { gap: 0.55rem; letter-spacing: 0.2em; margin-bottom: 0; }
/* the preview section's eyebrow is block-level with no bottom margin — the
   stack's own margin-top does the spacing there (measured on the live page) */
.eyebrow--flow { display: flex; margin-bottom: 0; }

.section__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-tightest);
  line-height: 1.14;
  margin: 0;
  text-align: left;   /* explicit, matching the live wrapper — `start` computes the same */
  text-wrap: pretty;
}

/* ----------------------------------------------------------------- glass --
   One card material, used by the offer card, the player card and the six
   book cards.  Measured off the live page: a 160deg white wash at 4.7/1.6/2.7%,
   an 11% hairline, a deep drop plus two inset hairlines, and a 26px blur.     */

.glass {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.047) 0%,
    rgba(255, 255, 255, 0.016) 46%,
    rgba(255, 255, 255, 0.027) 100%);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--card-radius);
  box-shadow:
    0 30px 74px -22px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(26px) saturate(1.45);
  -webkit-backdrop-filter: blur(26px) saturate(1.45);
}

/* ------------------------------------------------------------ offer card -- */

.offer {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 3rem);
}
.offer__cols {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2.5rem, 4vw, 3rem);
  align-items: flex-start;
}
.offer__col { flex: 1 1 320px; min-width: min(100%, 260px); }
.offer__col--list {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2.5rem, 5vw, 3.25rem);
}
/* The PRICE card's list column is deliberately tighter than the top offer
   card's — a flat 1.6rem, and it neither stretches nor centres, because it
   carries three blocks (eyebrow, checklist, totals) instead of two.
   Measured on the live page; do not unify the two. */
.offer__col--priced {
  align-self: auto;
  justify-content: flex-start;
  gap: 1.6rem;
}
.offer__heading {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 clamp(2rem, 3.5vw, 2.25rem);
  text-align: center;
}
.offer__pack { width: 100%; filter: drop-shadow(0 26px 54px rgba(0, 0, 0, 0.55)); }
.offer__caption {
  font-family: var(--font-accent);
  font-style: italic;
  text-align: center;
  color: var(--color-ink);
  font-size: var(--text-lg);
  line-height: 1.55;
  margin: clamp(2rem, 3.2vw, 2rem) auto 0;
  max-width: 34rem;
}
/* the price card's caption sits marginally lower than the top card's — a
   different clamp, worth 8px at desktop. Measured, not guessed. */
.offer__caption--priced { margin-top: clamp(2.25rem, 3.6vw, 2.5rem); }

.checklist { display: flex; flex-direction: column; gap: 1.15rem; margin: 0; padding: 0; list-style: none; }
.checklist__item { display: flex; gap: 0.85rem; align-items: flex-start; }
.checklist__tick {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  margin-top: 2px;
}
.checklist__body { flex: 1 1 auto; min-width: 0; }
.checklist__title {
  display: block;
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  font-size: var(--text-base);
}
.checklist__note {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}
/* the struck single-item value, price card only */
.checklist__value {
  margin-left: auto;
  align-self: flex-start;
  white-space: nowrap;
  padding-left: 0.75rem;
  font-weight: var(--weight-semibold);
  color: var(--color-ink-muted);
  font-size: var(--text-base);
  text-decoration: line-through rgba(173, 169, 160, 0.55);
}

/* ---------------------------------------------------------------- buttons --
   GOLD IS CORRECT HERE.  The design system carries the gold family explicitly
   scoped "SALES ONLY" (tokens/colors.css --awaqn-gold-cta, tokens/materials.css
   --glow-gold-btn), and the live page ships gold buy buttons.  The teal-never-
   gold brand rule governs the rest of the funnel, not the paid-conversion CTA.
   Do not "correct" these to teal.                                            */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  line-height: 1;
  border-radius: var(--radius-pill);
  cursor: pointer;
  width: 100%;
  white-space: nowrap;
  transition:
    filter var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-spring),
    background var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}
.btn--gold {
  background: var(--color-gold-fill);
  color: var(--color-on-gold);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  padding: 1rem 2.5rem;
  border: 1px solid transparent;
  box-shadow: var(--glow-gold-btn);
}
.btn--gold-outline {
  background: transparent;
  color: var(--color-gold-text);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  padding: 0.85rem 2rem;
  border: 1px solid var(--color-gold-border);
  box-shadow: none;
}
.btn--gold-outline:hover { border-color: var(--color-gold-border-strong); }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }

.btn-row { display: flex; }
.btn-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: clamp(1.6rem, 3.5vw, 2.25rem);
}

/* --------------------------------------------------------------- preview -- */

.preview-stack { display: flex; flex-direction: column; gap: clamp(2.5rem, 6vw, 4.5rem); margin-top: 1rem; }
.split { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 3.5rem); align-items: center; }
.split--reverse { flex-flow: row-reverse wrap; }
.split__text { flex: 1 1 260px; min-width: min(100%, 240px); }
.split__media { flex: 1 1 340px; min-width: min(100%, 260px); }
.split__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: var(--weight-display);
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0;
  max-width: 22ch;
}
.split__note {
  margin: 1.1rem 0 0;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
  max-width: 42ch;
}
.book-page {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  border-radius: 8px;
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.6));
}

/* ------------------------------------------------------------ book cards -- */

.books {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.book {
  display: flex;
  flex-direction: column;
  padding: clamp(1.35rem, 2.5vw, 1.5rem);
}
.book__area {
  margin: 0 0 clamp(1rem, 2.4vw, 1.15rem);
  padding: 0 0.4rem;
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-ink-faint);
}
.book__frame {
  width: 100%;
  aspect-ratio: 3 / 4;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 8px;
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.55));
}
.book__frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.book__body { padding: clamp(1.6rem, 3.4vw, 1.75rem) 0.4rem clamp(0.6rem, 1.6vw, 0.25rem); }
.book__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  font-weight: var(--weight-display);
  letter-spacing: -0.02em;
  line-height: 1.16;
  margin: 0;
}
.book__line {
  margin: clamp(0.9rem, 2.2vw, 1rem) 0 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-ink);
  font-weight: var(--weight-medium);
}

/* ----------------------------------------------------------------- steps -- */

/* <ol> — the numbers are drawn as the ringed badges, so the list marker and the
   UA's 40px padding-inline-start are both removed. Leaving that padding in place
   silently narrowed each step column by 20px against the live page. */
.steps {
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(2rem, 4.5vw, 3.25rem) clamp(2rem, 5vw, 4rem);
}
.step {
  display: flex;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  align-items: flex-start;
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--color-border-faint);
}
.step__ring {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-gradient-step);
  box-shadow: 0 0 26px 0 rgba(42, 184, 197, 0.4);
  flex-shrink: 0;
}
.step__ring-inner {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
}
.step__n {
  font-family: var(--font-display);
  font-size: 1.417rem;          /* 22.68px at the page's 16px root */
  font-weight: var(--weight-display);
  line-height: 1;
  color: var(--color-ink);
  transform: translateY(-2px);
}
.step__body { flex: 1 1 auto; min-width: 0; }
.step__label {
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin-top: 0.35rem;
}
.step__text {
  margin: 0.7rem 0 0;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
  max-width: 46ch;
}

/* ------------------------------------------------------------ price card -- */

.price-total {
  border-top: 1px solid var(--color-border-faint);
  padding-top: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.price-total__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.price-total__label { color: var(--color-ink-muted); font-size: var(--text-base); }
.price-total__struck {
  color: #ada9a0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  text-decoration: line-through rgba(173, 169, 160, 0.55);
}
.price-now {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 0.75rem 1rem;
}
.price-now__label { color: var(--color-ink); font-weight: var(--weight-bold); font-size: var(--text-lg); }
.price-now__amount {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(2rem, 7vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1;
}
.price-now__vat { color: var(--color-ink-muted); font-size: var(--text-sm); line-height: 1.5; margin-top: 0.4rem; }

.smallprint {
  margin: 1.4rem 0 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-ink-faint);
}

.trust-row {
  max-width: 72rem;
  margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 0.75rem 1.25rem;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}
.trust-row__item { display: inline-flex; align-items: center; gap: 0.5rem; }
.trust-row__item svg { color: var(--color-accent); flex: 0 0 auto; }

@media (max-width: 720px) {
  .trust-row { justify-content: flex-start; }
}

/* ------------------------------------------------------------------- FAQ --
   Native <details>/<summary>.  Zero JavaScript — the accordion is the one part
   of the old page that needed a runtime to show a paragraph, and it shipped
   eight literal "[Antwort folgt]" placeholders because of it.
   First item open by owner ruling 2026-08-08 (the live page has all closed).  */

.faq { display: flex; flex-direction: column; gap: 0.75rem; margin: clamp(2rem, 5vw, 3rem) 0 0; }
.faq__item {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-inner);
  overflow: hidden;
}
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  /* the row it replaces was a <button>, which gets line-height:normal from the
     UA sheet; a <summary> would otherwise inherit the body's relaxed leading
     and make every one of the seven rows 6px taller */
  line-height: normal;
  color: var(--color-ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__chevron {
  display: inline-flex;
  flex-shrink: 0;
  transition: transform 0.25s var(--ease-spring);
}
.faq__item[open] .faq__chevron { transform: rotate(180deg); }
.faq__a {
  margin: 0;
  padding: 0 1.4rem 1.35rem;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
  max-width: 68ch;
}

/* ----------------------------------------------------------------- close -- */

.close__line {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: var(--weight-display);
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0 auto;
  max-width: 30ch;
  text-wrap: pretty;
}
.close__cta {
  margin: clamp(2.5rem, 6vw, 3.5rem) auto 0;
  max-width: 72rem;
  padding: 0 clamp(1.75rem, 4vw, 3rem);
}

/* ---------------------------------------------------------------- footer -- */

.footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--color-border-faint);
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3rem);
  text-align: center;
}
.footer__lockup { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.footer__lockup img { height: clamp(92px, 22vw, 132px); width: auto; }
.footer__nav {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 0.5rem 1.4rem;
  font-size: var(--text-sm);
  margin-bottom: 1.1rem;
}
.footer__nav a {
  color: var(--color-ink-muted);
  font-weight: var(--weight-regular);
  text-decoration: none;
  padding: 0.75rem 0.35rem;
  margin: -0.35rem 0;
}
.footer__copy { color: var(--color-ink-faint); font-size: var(--text-micro); }

/* ---------------------------------------------------------------- voices --
 * PORTED 2026-09-17 from funnel/dorothee/band-heimkehr/page.css (plan Phase 6).
 * 🔴 THE PLAN DID NOT NAME THIS AND IT IS REQUIRED. Phase 6 says to copy the
 * seven voices' MARKUP from the entry page; the rules that lay them out live
 * only in that page's own page.css, and this file had ZERO `.voice` rules.
 * Markup without them is seven unstyled blockquotes with full-size base64
 * avatars and no grid — and R2's review artifact is a SCREENSHOT, so an
 * unstyled section is the wrong thing to put in front of the owner.
 * 🟢 Every custom property this block uses resolves in the CSS /paket already
 * loads — checked across all six token files the page links, not a subset:
 * --color-accent-fill --color-border --color-ink --color-surface --font-accent
 * --font-display --glass-fill --radius-inner --text-base --text-lg
 * --weight-display. Nothing new is defined and no existing rule is touched.
 */
.section--voices    { padding: clamp(3rem, 7vw, 4.5rem) clamp(1.35rem, 4vw, 2.5rem) clamp(4rem, 8vw, 5rem); }
/* ---------------------------------------------------------------- voices --
   RECREATED from the owner's own testimonials design — the Claude Design
   bundle `funnel/assets/testimonials/AWAQN Stimmen.html` (read by RENDERING it;
   a raw grep of that file returns false zeros).  Measured off that render:
   a glass card grid at auto-fit/minmax(300px), 18px radius, a Georgia-italic
   quote at 1.5, and a round portrait at clamp(56px,5vw,74px) inside a 45%
   teal ring over the near-black surface.  The seven portraits ship as webp
   data URIs because the hard bound for this change is these two files only.
   The teal rule beside the heading is that design's signature and is scoped
   here so the shared .section__title is untouched.                            */

.section--voices .section__title {
  border-left: 3px solid var(--color-accent-fill);
  padding-left: clamp(1rem, 1.8vw, 1.625rem);
  max-width: 22ch;
}

.voices {
  margin-top: clamp(2.25rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.125rem, 2vw, 1.875rem);
}

/* Seven is prime, so every multi-column wall orphans the last card — the
   original specimen page leaves two empty tracks beside Heike.  Here that hole
   would land directly above the 442 EUR card, so the last quote spans the row
   instead and the wall ends flush.  The measure is capped so the widened card
   keeps a readable line.  Columns are explicit, not auto-fit, because the span
   has to know how many tracks there are. */
@media (min-width: 46rem) {
  .voices { grid-template-columns: repeat(2, 1fr); }
  .voice:last-child { grid-column: 1 / -1; }
  .voice:last-child .voice__quote { max-width: 62ch; }
}
@media (min-width: 64rem) {
  .voices { grid-template-columns: repeat(3, 1fr); }
}

/* justify-content puts every caption on the card's baseline, so the portraits
   line up across a row even though the seven quotes differ wildly in length. */
.voice {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.375rem, 2.2vw, 1.875rem);
  margin: 0;
  padding: clamp(1.625rem, 2.6vw, 2.375rem) clamp(1.375rem, 2.3vw, 2.125rem);
  background: var(--glass-fill);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-inner);
}

.voice__quote {
  margin: 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(var(--text-base), 1.25vw, var(--text-lg));
  line-height: 1.5;
  color: var(--color-ink);
  text-wrap: pretty;
}

.voice__by {
  display: flex;
  align-items: center;
  gap: clamp(0.875rem, 1.5vw, 1.375rem);
  min-width: 0;
}

/* --color-accent-fill (#2AB8C5) at 45% — the ring, not a new colour. */
.voice__avatar {
  flex: 0 0 auto;
  width: clamp(3.5rem, 5vw, 4.625rem);
  height: clamp(3.5rem, 5vw, 4.625rem);
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid rgba(42, 184, 197, 0.45);
}
.voice__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.voice__name {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(1.1875rem, 1.5vw, 1.625rem);
  line-height: 1.1;
  color: var(--color-ink);
  min-width: 0;
  overflow-wrap: anywhere;
}