/* ============================================================
   Gour-Med Design Tokens — synchronized with Claude Design 2026-05-13
   Re-skinnable via CSS Custom Properties.
   ============================================================ */

/* Round-11.6 2026-05-16 · Quality-of-Life: smooth scroll für anchor-links
   wie .btn-pill[href="#brief"]. Respektiert prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
:target {
  scroll-margin-top: 100px;
}

/* Round-11.7 · User: Tagline ist zu klein, roter Punkt weg.
   Größere Schrift, kein Dot mehr (markup auch entfernt). */
.gm-header__tagline {
  font-size: clamp(15px, 1.15vw, 17px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}
.gm-header__tagline-dot { display: none !important; }

/* Round-11.7 · Active-Nav-State stronger underline.
   Bestehende .gm-nav a.is-active sollte sichtbar sein, mit doppeltem
   Hairline + slight color-shift Richtung Burgund. */
.gm-nav a.is-active,
.gm-mobile-menu__nav a.is-active,
.gm-nav a[aria-current="page"],
.gm-mobile-menu__nav a[aria-current="page"] {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}
.gm-nav a.is-active::after,
.gm-nav a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--color-primary);
}
.gm-nav a {
  position: relative;
}

:root {
  /* — Brand colors ————————————————— */
  /* Weinrot per Papa 2026-05-15: bright #B8242D wirkte zu fluo, kämpfte
   * gegen die Editorial-Ruhe. Cartier-Logik: Marke-Farbe nur als Akzent
   * (Bars, Punkte, Hairlines, Borders), NIE als Text/Schrift. */
  --color-primary:   #7A1F26;
  --color-primary-ink: #FFFFFF;
  --color-gold:      #F2B632;
  --color-gold-soft: #F5C65A;
  --color-accent:    #F4EFE8;
  --color-ink:       #1A1A1A;
  --color-ink-soft:  #3D3A36;
  --color-muted:     #8A8A8A;
  --color-line:      #E6E1D8;
  /* Surface: white-dominant (revised 2026-05-15 per ramp.space adaptation).
   * Cream survives as --color-surface-warm for occasional accent panels
   * (sidebar promos, in-issue blocks). Hierarchy comes from hairlines, not
   * tone-on-tone surfaces. */
  --color-bg:           #FFFFFF;
  --color-surface:      #FFFFFF;
  --color-surface-warm: #FBF9F4;

  /* — Rubrik-Farben (erdig, editorial · Color-Punctuation) — */
  --rub-dine:        #7A1F26;   /* Burgund */
  --rub-medical:     #2E5247;   /* Tiefe Salbei */
  --rub-travel:      #1E3A5F;   /* Ocean Deep */
  --rub-lifestyle:   #B88B3A;   /* Warmes Ocker */
  --rub-event:       #1A1A1A;   /* Anthrazit */
  --rub-magazine:    #6E4A28;   /* Espresso */

  /* Dark surfaces (footer etc.) */
  --color-dark:       #121212;
  --color-dark-soft:  #1E1E1E;
  --color-dark-line:  rgba(255,255,255,0.10);
  --color-dark-fg:    #F4EFE8;
  --color-dark-muted: rgba(244,239,232,0.55);

  /* — Typography — classical pair per Papa 2026-05-15.
   * Times + Helvetica statt EB Garamond + Inter. Begründung: ältere
   * Zielgruppe (Ärzte 45+) findet bekannte Schriften kognitiv weniger
   * anstrengend (Healy WebDesign, NN/g Senior Usability). Klassiker
   * altern nicht aus der Mode. System-Fonts = kein Google-Fonts-Ladeweg
   * mehr nötig → schnellerer First Paint. Mac liefert Times + Helvetica
   * Neue (auch klassisch), Windows liefert Times New Roman + Arial
   * (Helvetica-Klon) — beide erfüllen Papas "klassisch+bekannt"-
   * Kriterium. — */
  --font-display: "Times New Roman", Times, Georgia, serif;
  --font-serif:   "Times New Roman", Times, Georgia, serif;
  --font-body:    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-meta:    "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Type scale — ratio 1.250, base 18 */
  --fs-xs:   12.8px;
  --fs-sm:   14.4px;
  --fs-base: 18px;
  --fs-md:   22.5px;
  --fs-lg:   28.13px;
  --fs-xl:   35.16px;
  --fs-2xl:  43.95px;
  --fs-3xl:  54.93px;
  --fs-4xl:  68.66px;
  --fs-5xl:  85.83px;

  /* Weights */
  --fw-display-light: 400;
  --fw-display:       500;
  --fw-display-bold:  600;
  --fw-body:          400;
  --fw-body-med:      500;
  --fw-body-bold:     600;

  /* Leading */
  --lh-display: 1.02;
  --lh-title:   1.12;
  --lh-body:    1.58;
  --lh-ui:      1.3;

  /* Tracking */
  --tr-display: -0.022em;
  --tr-eyebrow: 0.14em;
  --tr-body:    -0.005em;

  /* — Spacing — 8px base ————————————————— */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* — Radii ————————————————— */
  --r-none: 0;
  --r-sm:   2px;
  --r-md:   4px;
  --r-pill: 999px;

  /* — Layout ————————————————— */
  /* Width-System Rework 2026-05-15.
   * Single --container-max von 1320px war zu starr — auf 1920+ Displays
   * wirkten alle Sektionen wie zentrierte Insel-Boxen mit toten Rändern.
   * Stripe-Press / ramp.space variieren die Breiten-Regel pro Sektion:
   * cinematic-bleed für Hero/Map/Closer, asymmetric-wide für Editorial
   * Spreads (Latest, Archiv), contained für Body-Text/Article-Pages.
   *
   * --container-max:   contained body sections (article-like)
   * --container-wide:  editorial spreads (Latest, Archiv, Stats)
   * --page-bleed:      asymmetric padding-inline, breathes on big displays
   *                    aber bleibt lesbar auf Laptop / Tablet
   * --bleed-pad-tight: minimaler full-bleed-Rand (Cinema-Sektionen) */
  --container-max:   1320px;
  --container-wide:  1760px;
  --page-bleed:      clamp(24px, 6vw, 120px);
  --bleed-pad-tight: clamp(16px, 3vw, 48px);
  --article-max:     680px;
  --grid-gutter:     32px;

  /* — Motion ————————————————— */
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --dur-fast: 160ms;
  --dur-base: 300ms;

  /* — Elevation ————————————————— */
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-md: 0 6px 24px rgba(26, 26, 26, 0.08);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
button { font: inherit; }