/* ═══════════════════════════════════════════════════════════════════════════
   treffix — Web-Token (V1.0 „Vorfreude", gelockt 2026-07-13)
   Quelle: lib/theme.ts (colorsTx + typeTx) — nicht hier editieren.
   Drift-Wache: __tests__/tokensCssParity.test.ts wird rot, wenn ein Farbwert
   hier vom App-Kanon abweicht.
   Von allen drei Seiten eingebunden (/, /c/, /h/) — Pfade absolut.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-latin-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-latin-700-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/inter-latin-800-normal.woff2) format('woff2');
}

:root {
  /* ── Farben: 1:1-Spiegel von colorsTx (Namen = Keys) ── */
  --brand: #FF4D2E;
  --brandDeep: #E03E20;
  --brandInk: #C22F12;
  --blush: #FFEDE7;
  --blush100: #FFDCD2;
  --accent: #FFA928;
  --accentInk: #9A6200;
  --paper: #FAF6F1;
  --iosBg: #F5F1EC;
  --iosSep: #E9E2D9;
  --ink: #221A15;
  --ink2: #6E6259;
  --ink3: #A99E93;
  --white: #FFFFFF;
  --black: #000000;
  --green: #34C759;
  --red: #FF3B30;
  --disc: #CFC7BE;
  --segTrack: rgba(118, 118, 128, 0.12);
  --mosaicGap: #F0E3D8;

  /* V1.0: CTA-Fläche ist flat Espresso — kein Gradient (Plan §4.1). */
  --grad-cta: var(--ink);

  /* ── Typo-Skala (Web-Übersetzung von typeTx, Beschluss 4A) ── */
  --t-display: clamp(40px, 9vw, 56px);  /* 800 / -.045em / 1.05 */
  --t-h2: 26px;                          /* 800 / -.03em (Desktop 28px) */
  --t-h3: 19px;                          /* 800 / -.02em */
  --t-body: 16px;                        /* /1.5 — Hero-Sub */
  --t-body-s: 15px;                      /* /1.55 — Sektions-Fließtext (nie darunter) */
  --t-meta: 12.5px;
  --t-eyebrow: 11px;                     /* 700 / .09em / uppercase */
  --t-num: clamp(44px, 7vw, 50px);       /* 800 / tabular-nums — Termin-steht-Moment */
  --t-h1: 34px;                          /* 800 / -.03em — Foto-Beat-/Sektions-Headline (V1.1, Desktop 40px) */
  --t-display-hero: clamp(30px, 7.6vw, 56px); /* Root-Hero-Hook — längere Zeile als der Claim, eine Stufe unter --t-display am Handy */
  --t-stamp: clamp(52px, 8.4vw, 112px);       /* Hybrid-Beat „Termin stempelt sich" (Entscheid C 2026-07-25) */
  --t-stamp-count: clamp(16px, 1.9vw, 20px);  /* Zusagen-Zähler des Beats */

  /* ── Radius & Raum ── */
  --radius-btn: 12px;
  --radius-card: 13px;
  --radius-sheet: 22px; /* Haupt-Cards auf /c und /h */
  --gutter: 24px;

  /* ── Elevation (Web-Spiegel von shadowsTx.soft/.card — Espresso-getönt, nie Schwarz) ── */
  --shadow-soft: 0 1px 3px rgba(34, 26, 21, 0.05);
  --shadow-card: 0 10px 18px rgba(34, 26, 21, 0.10);
}
@media (min-width: 880px) {
  :root { --t-h2: 28px; --t-h1: 40px; }
}

/* ── Basis (alle drei Seiten) ── */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
:focus-visible {
  outline: 2px solid var(--brandInk);
  outline-offset: 2px;
}

/* ── Basis-Primitives (Beschluss 2A) — Layout bleibt seitenspezifisch ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px; /* Touch-Target ≥ 44px */
  padding: 13px 24px;
  border: none;
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: var(--t-body);
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.14s ease, opacity 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-ink { background: var(--ink); color: var(--white); }       /* Primär-CTA: Ink-Fill */
.btn-paper { background: var(--paper); color: var(--ink); }     /* heller Hero-CTA auf Espresso */
/* Hover nur als Zusatz-Affordance (Primär-Viewport ist Touch, Beschluss 5A) —
   Paper-Overlay statt neuem Farbwert, damit die Palette geschlossen bleibt. */
@media (hover: hover) {
  .btn:hover:not(:active):not(:disabled) { transform: translateY(-1px); }
  .btn-ink:hover { box-shadow: inset 0 0 0 999px rgba(250, 246, 241, 0.08); }
  .btn-paper:hover { background: var(--white); }
}

.card {
  background: var(--white);
  border: 1px solid var(--iosSep);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-soft);
}

.eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brandInk); /* Brand-Text < 18pt auf hell = brandInk (Kontrast-Präzedenz) */
}

/* Warme Initialen-Avatare: dunkle Initialen auf hellen Tints — nie Weiß auf Blush. */
.av-row { display: flex; }
.av {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  background: var(--blush);
  color: var(--brandInk);
  border: 2.5px solid var(--white);
}
.av-row .av + .av { margin-left: -10px; }
/* 4er-Rotation wie B3: blush → accent-Tint → neutral → blush100 */
.av-row .av:nth-child(4n+2) { background: rgba(255, 169, 40, 0.18); color: var(--accentInk); }
.av-row .av:nth-child(4n+3) { background: var(--iosBg); color: var(--ink2); }
.av-row .av:nth-child(4n) { background: var(--blush100); color: var(--brandInk); }
.av-more { background: var(--ink); color: var(--white); border-color: var(--white); }

/* Warme Fehler-/Statuszeilen: System-Rot nur für die Meldungs-Zeile unterm Formular. */
.err { font-size: 13px; color: var(--red); min-height: 16px; }
.status { font-size: var(--t-body-s); line-height: 1.55; color: var(--ink2); }

/* ── Motion-Kanon: Pflicht-Block (Beschluss 5A) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}