.vibe-costs { scroll-margin-top: 100px; overflow-x: clip; }
.vibe-costs-heading { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.vibe-costs-heading h2 { text-wrap: balance; }
.vibe-costs-heading .lead { margin-bottom: 0; }
.vibe-receipts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding: 48px; }
.vibe-receipt { --receipt-ink: #292c30; --receipt-muted: #62666b; --receipt-line: #c9c8c2; --receipt-angle: -1.2deg; position: relative; min-width: 0; padding: 32px 30px 24px; color: var(--receipt-ink); background: #fffef9; border-top: 4px solid #292c30; filter: drop-shadow(0 6px 7px rgb(0 0 0 / 7%)); transform: rotate(var(--receipt-angle)); font-family: var(--sans); font-variant-numeric: tabular-nums; }
.vibe-receipt::after { content: ""; position: absolute; inset: auto 0 -10px; height: 10px; background: linear-gradient(135deg, #fffef9 25%, transparent 25%) -10px 0 / 20px 20px, linear-gradient(225deg, #fffef9 25%, transparent 25%) -10px 0 / 20px 20px; }
/* Das Papier bleibt auch im Dunkelmodus hell: regulaeres NowMetrix-Blau verwenden. */
.vibe-receipt-nm { --receipt-accent: #076ed1; --receipt-angle: 1deg; border-top-color: var(--receipt-accent); }
.vibe-receipt.is-arriving { animation: vibe-receipt-arrive 850ms cubic-bezier(.16, 1, .3, 1) both; }
.vibe-receipt:focus-within { animation: none; }
@keyframes vibe-receipt-arrive {
  from { opacity: 0; transform: translateX(-100px) rotate(-4deg); }
  to { opacity: 1; transform: translateX(0) rotate(var(--receipt-angle)); }
}
.vibe-receipt-nm.is-arriving { animation-name: vibe-receipt-arrive-right; }
@keyframes vibe-receipt-arrive-right {
  from { opacity: 0; transform: translateX(100px) rotate(4deg); }
  to { opacity: 1; transform: translateX(0) rotate(var(--receipt-angle)); }
}
@media (prefers-reduced-motion: reduce) {
  .vibe-receipt.is-arriving { animation: none; }
}
.vibe-receipt-head { min-height: 123px; text-align: center; border-bottom: 1px dashed var(--receipt-line); }
.vibe-receipt-eyebrow { display: block; font-size: 10px; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; }
.vibe-receipt h3 { margin: 12px 0 7px; color: var(--receipt-ink); font-family: inherit; font-size: clamp(21px, 2.5vw, 27px); letter-spacing: -.04em; }
.vibe-receipt h3 span { font-size: 13px; font-weight: 400; letter-spacing: 0; }
.vibe-receipt-head p { margin: 0 0 22px; color: var(--receipt-muted); font-size: 11px; }
.vibe-receipt-items { margin: 14px 0; font-size: 13px; line-height: 1.5; }
.vibe-receipt-items > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; }
.vibe-receipt-items dt { min-width: 0; }
.vibe-receipt-items dd { flex-shrink: 0; margin: 0; font-weight: 600; text-align: right; }
.vibe-receipt-items small { display: block; margin-top: 2px; color: var(--receipt-muted); font-size: 10px; }
.vibe-receipt-nm .vibe-receipt-items dd { color: var(--receipt-accent); }
.vibe-receipt-total { padding: 23px 0; border-top: 2px solid var(--receipt-ink); border-bottom: 1px dashed var(--receipt-line); }
.vibe-receipt-total > span { font-size: 12px; }
.vibe-receipt-total > strong { display: block; margin: 5px 0 8px; color: var(--receipt-ink); font-size: clamp(36px, 4vw, 48px); line-height: 1.2; letter-spacing: -.06em; }
.vibe-receipt-nm .vibe-receipt-total > strong { color: var(--receipt-accent); }
.vibe-receipt-total > small { display: block; color: var(--receipt-muted); font-size: 10px; line-height: 1.6; }
.vibe-receipt-setup { min-height: 148px; padding-top: 22px; }
.vibe-receipt-setup > strong { display: block; margin-top: 9px; color: var(--receipt-ink); font-size: 21px; line-height: 1.4; letter-spacing: -.05em; }
.vibe-receipt-nm .vibe-receipt-setup > strong { font-size: 19px; }
.vibe-receipt-setup p { margin: 8px 0 0; color: var(--receipt-muted); font-size: 11px; line-height: 1.7; }
.vibe-receipt-end { margin-top: 20px; padding-top: 17px; border-top: 1px dashed var(--receipt-line); text-align: center; font-size: 10px; line-height: 1.6; }
.vibe-receipt-end a { display: inline-block; padding: 6px 0; color: var(--receipt-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; font-size: 12px; }
.vibe-costs-notes { max-width: 880px; margin: 26px auto 0; color: var(--ink-mute); font-size: 13px; line-height: 1.7; }
.vibe-costs-notes > p { margin: 0 0 12px; }
.vibe-costs-notes summary { width: fit-content; padding: 8px 0; cursor: pointer; color: var(--ink-2); font-weight: 550; }
.vibe-costs-notes details p { margin: 12px 0 0; }
.vibe-costs-notes a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.vibe-costs a:focus-visible, .vibe-costs summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 1000px) {
  .vibe-receipts { gap: 22px; padding: 30px 24px 40px; }
  .vibe-receipt { padding: 26px 22px 22px; }
}
@media (max-width: 760px) {
  .vibe-costs-heading { margin-bottom: 28px; }
  .vibe-receipts { grid-template-columns: 1fr; gap: 38px; padding: 24px 14px 34px; }
  .vibe-receipt { --receipt-angle: -.6deg; padding: 25px 20px 22px; }
  .vibe-receipt-nm { --receipt-angle: .6deg; }
  .vibe-receipt-head { min-height: 0; }
  .vibe-receipt-items { font-size: 12px; }
  .vibe-receipt-items > div { gap: 8px; }
  .vibe-receipt-total > strong { font-size: 40px; }
  .vibe-receipt-setup { min-height: 0; }
}