/* ============================================================
   ohne-makler-verkaufen.ch — Design System
   Direction: Swiss Luxury Editorial × Apple product page.
   One dominant paper field, decisive Swiss-red accent, deep navy ink,
   generous whitespace, confident type, hairline structure.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --- Palette (locked to logo) --- */
  --paper: #F6F4F0;        /* warm canvas */
  --paper-2: #FBFAF8;      /* lighter section */
  --surface: #FFFFFF;
  --ink: #141B26;          /* near-black navy — primary text + buttons */
  --ink-2: #3B4656;        /* secondary text */
  --ink-3: #737E8C;        /* muted */
  --red: #CC2924;          /* Swiss red — the single decisive accent */
  --red-deep: #A81E1A;
  --red-wash: #FBEDEC;
  --line: #E7E2DA;         /* hairline */
  --line-2: #EFEBE4;
  --ok: #1F8A4C;
  --gold: #B08948;         /* rare, for trust marks only */

  /* --- Type --- */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --tracking-tight: -0.022em;
  --tracking-tighter: -0.03em;
  --tracking-label: 0.14em;

  /* --- Space rhythm (8pt) --- */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px;
  --s6: 64px; --s7: 96px; --s8: 128px; --s9: 160px;

  /* --- Radius & elevation --- */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20,27,38,.04), 0 2px 8px rgba(20,27,38,.05);
  --shadow-md: 0 4px 12px rgba(20,27,38,.06), 0 18px 48px rgba(20,27,38,.09);
  --shadow-lg: 0 8px 24px rgba(20,27,38,.08), 0 40px 90px rgba(20,27,38,.14);
  --shadow-red: 0 10px 30px rgba(204,41,36,.28);

  --maxw: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv05' 1, 'ss03' 1, 'cv11' 1;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* color: inherit — else iOS Safari renders <button> text in system link-blue.
   .btn/.choice.sel set their own colors, so this only fixes the unstyled ones. */
button { font: inherit; cursor: pointer; color: inherit; }

/* --- Headline scale (Apple-like: big, tight, confident) --- */
h1, h2, h3, h4 { font-weight: 640; letter-spacing: var(--tracking-tight); line-height: 1.06; color: var(--ink); }
.display {
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  font-weight: 680;
  letter-spacing: var(--tracking-tighter);
  line-height: 1.04;
  text-wrap: balance;
}
.h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 660; letter-spacing: var(--tracking-tighter); line-height: 1.05; }
.h2 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); font-weight: 640; line-height: 1.08; }
.h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 620; }
/* Lange deutsche Komposita ("Grundstueckgewinnsteuer") sind auf dem Handy breiter als
   die Textspalte und schieben die ganze Seite horizontal raus (gemessen 24.08.2026:
   h1 scrollWidth 377 in 342px Spalte → bodyScrollW 401 bei 390px Viewport). */
.h1, .h2, .h3 { overflow-wrap: break-word; }
.lead { font-size: clamp(1.12rem, 1.7vw, 1.4rem); line-height: 1.5; color: var(--ink-2); font-weight: 420; letter-spacing: -0.01em; }

.eyebrow {
  font-size: 0.8rem; font-weight: 600; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--red);
}
.muted { color: var(--ink-3); }
strong, b { font-weight: 640; color: var(--ink); }
em { font-style: italic; }

::selection { background: var(--red); color: #fff; }