/* HausgeldKlar — "Tiefblau auf Kontoauszug" (Design-Plan 2026-08-08) */
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/shared/fonts/IBMPlexSans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/shared/fonts/IBMPlexSans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/shared/fonts/IBMPlexSans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/shared/fonts/IBMPlexMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/shared/fonts/IBMPlexMono-500.woff2') format('woff2');
}

:root {
  --accent: #173F6B;
  --accent-dark: #0F2C4D;
  --ink-strong: #0F2135;
  --ink: #2A3644;
  --ink-soft: #5A6B7E;
  --paper: #F7F9FB;
  --surface: #E3EAF2;
  --line: #C9D6E3;
  --rot: #B3261E;
  --ocker: #8A6D1D;
  --gruen: #2E7D4F;
  --font-display: 'IBM Plex Sans', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

body { font-size: 16.5px; }
.hero-visual { background: #fff; border: 1px solid var(--line); }

/* Frist-Chip mit Mono-Zahlen (Signature-Begleiter) */
.frist-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font: 500 .85rem var(--font-mono); color: #7C1D16;
  background: #FBECEA; border: 1px solid #EAC7C3; border-radius: 8px; padding: 8px 12px;
}
.frist-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rot); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .frist-chip .dot { animation: none; } }