/* ============================================================================
   Herzhöhe — Token-Layer
   Portiert aus .claude/skills/herzhoehe-design/Herzhöhe Design System/tokens/*.css
   Werte sind verbatim übernommen. Keine Farbe wird hier neu hergeleitet.
   Einzige Abweichung: Fonts werden lokal ausgeliefert statt vom Google-CDN
   (siehe HANDOVER-VPS.md, Abschnitt 3).
   ========================================================================== */

/* ---- Fonts: lokal, kein CDN ------------------------------------------------
   Prata  = statisch, 400  (Google Fonts, SIL OFL)
   Outfit = variabel, wght 100–900 (Google Fonts, SIL OFL)
   Beide sind laut Design-System Substitute. Liefert Kira lizenzierte
   Markenschriften, ändert sich nur dieser Block. */
@font-face{
  font-family:"Prata";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/prata-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Outfit";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/outfit-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Outfit";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --font-display:"Prata",-apple-system,"Iowan Old Style",Georgia,serif;
  --font-sans:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;
  --font-body:var(--font-sans);

  /* ---- Farben: verbatim aus uploads/Farben.jpeg + abgeleitete Stufen ---- */
  --ink-900:#022200;
  --ink-800:#0C2E09;
  --ink-700:#1B3E17;
  --ink-500:#3D5A38;
  --ink-400:#5E7358;
  --ink-300:#8B9B86;
  --ink-200:#BCC5B8;
  --ink-100:#DDE1D9;

  --cream-050:#FCF9F1;
  --cream-100:#F7F2E4;
  --cream-200:#F2EBD7;
  --cream-300:#E8DFC5;
  --cream-400:#D9CDAC;

  --lilac-050:#F4F2FB;
  --lilac-100:#E7E3F5;
  --lilac-200:#D6CFEE;
  --lilac-300:#C0B6E4;
  --lilac-400:#A79BD6;

  --acid-200:#F4F58C;
  --acid-300:#EFF14D;
  --acid-500:#E7E900;
  --acid-600:#CBCD00;
  --acid-700:#A5A700;

  --white:#FFFFFF;

  --success-500:#3F6B3A; --success-100:#E4EEDF;
  --danger-500:#A33A2A;  --danger-100:#F7E4E0;
  --info-500:#6A5EA8;    --info-100:#EAE6F7;

  /* ---- Semantische Aliase ---- */
  --surface-page:var(--cream-200);
  --surface-raised:var(--cream-050);
  --surface-card:var(--white);
  --surface-alt:var(--lilac-100);
  --surface-alt-strong:var(--lilac-200);
  --surface-invert:var(--ink-900);
  --surface-accent:var(--acid-500);
  --surface-field:var(--white);

  --text-body:var(--ink-900);
  --text-muted:var(--ink-400);
  --text-subtle:var(--ink-300);
  --text-invert:var(--cream-100);
  --text-on-accent:var(--ink-900);
  --text-link:var(--ink-900);
  --text-link-hover:var(--acid-700);

  --border-hairline:rgba(2,34,0,.14);
  --border-strong:rgba(2,34,0,.34);
  --border-invert:rgba(242,235,215,.28);
  --border-field:rgba(2,34,0,.24);

  --accent:var(--acid-500);
  --accent-hover:var(--acid-600);
  --focus-ring:var(--ink-900);
  --overlay-ink:rgba(2,34,0,.52);

  /* ---- Typografie ---- */
  --fs-display-xl:76px;
  --fs-display-l:56px;
  --fs-display-m:40px;
  --fs-h1:40px;
  --fs-h2:30px;
  --fs-h3:22px;
  --fs-body-l:19px;
  --fs-body:17px;
  --fs-body-s:15px;
  --fs-caption:13px;
  --fs-eyebrow:12px;

  --lh-display:1.08;
  --lh-heading:1.2;
  --lh-body:1.65;
  --lh-tight:1.3;

  --ls-display:-0.01em;
  --ls-heading:0em;
  --ls-body:0.005em;
  --ls-eyebrow:0.20em;
  --ls-wide:0.10em;

  --fw-light:300;
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;

  --type-display:var(--fw-regular) var(--fs-display-l)/var(--lh-display) var(--font-display);
  --type-h1:var(--fw-regular) var(--fs-h1)/var(--lh-heading) var(--font-display);
  --type-h2:var(--fw-regular) var(--fs-h2)/var(--lh-heading) var(--font-display);
  --type-h3:var(--fw-medium) var(--fs-h3)/var(--lh-tight) var(--font-sans);
  --type-body:var(--fw-light) var(--fs-body)/var(--lh-body) var(--font-sans);
  --type-body-l:var(--fw-light) var(--fs-body-l)/var(--lh-body) var(--font-sans);
  --type-eyebrow:var(--fw-medium) var(--fs-eyebrow)/1.4 var(--font-sans);
  --type-button:var(--fw-medium) var(--fs-caption)/1 var(--font-sans);

  /* ---- Abstände / Layout ---- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:96px; --space-10:128px; --space-11:160px;

  --page-max:1240px;
  --measure:62ch;
  --gutter:24px;
  --gutter-lg:56px;
  --section-y:var(--space-9);
  --section-y-tight:var(--space-8);
  --band-y:var(--space-5);

  /* ---- Form ---- */
  --radius-none:0px;
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-pill:999px;
  --radius-circle:50%;
  --border-width:1px;
  --border-width-strong:2px;
  --shadow-none:none;
  --shadow-soft:0 2px 20px rgba(2,34,0,.07);
  --shadow-overlay:0 18px 48px rgba(2,34,0,.16);
  --shadow-focus:0 0 0 2px var(--surface-page),0 0 0 4px var(--focus-ring);

  /* ---- Bildlook ---- */
  --photo-grade-none:none;
  --photo-grade-warm:saturate(.95) contrast(1.04) brightness(1.02) sepia(.05);
  --photo-grade-soft:saturate(.88) contrast(.97) brightness(1.05) sepia(.04);
  --photo-grade-quiet:saturate(.50) contrast(1.02) brightness(1.04) sepia(.10);
  --photo-grade-mono:grayscale(1) contrast(1.06) brightness(1.02);
  --photo-wash-cream:rgba(242,235,215,.14);
  --photo-wash-lilac:rgba(214,207,238,.16);

  /* ---- Motion ---- */
  --dur-fast:140ms;
  --dur-base:240ms;
  --dur-slow:420ms;
  --ease-out:cubic-bezier(.2,.7,.3,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --transition-base:all var(--dur-base) var(--ease-out);
  --hover-lift:-2px;
}

/* ---- Base (aus tokens/base.css) ---- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);letter-spacing:var(--ls-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-weight:var(--fw-regular);letter-spacing:var(--ls-heading)}
h1{font:var(--type-h1)}h2{font:var(--type-h2)}h3{font:var(--type-h3)}
p{margin:0}
a{color:var(--text-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
img{display:block;max-width:100%}
::selection{background:var(--acid-500);color:var(--ink-900)}