/* Vita Harmonia Design System-2 — Tokens (unverändert aus dem Claude-Design-Projekt übernommen) */
/* Ersatzschriften von Google Fonts — es wurden keine Markenschriften geliefert. */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300..800&family=Hanken+Grotesk:wght@300..700&display=swap");

:root{
/* Holunder — natürliches Beerenviolett; das Grün kommt aus den Naturaufnahmen, nicht aus der Oberfläche */
--elder-950:#26161F;--elder-900:#321D29;--elder-800:#422636;--elder-700:#553146;--elder-600:#6C405A;--elder-500:#875672;--elder-400:#A27590;--elder-300:#C09DB2;--elder-200:#DCC7D3;--elder-100:#F1E7ED;
--linen-50:#FAF8F3;--linen-100:#F4F0E7;--linen-200:#ECE6D9;--stone-300:#DDD5C4;--stone-400:#C4BAA6;--stone-500:#9C927E;--bark-600:#6E6352;--bark-700:#4E463A;--ink:#1A1D18;
/* Pollen — sparsam eingesetzt */
--ochre-200:#EFDDB8;--ochre-300:#E2C48F;--ochre-500:#B98A45;--ochre-700:#8A6430;
/* Ton — nur für Fehler */
--clay-500:#9E4B33;--clay-100:#F1DDD3;

--bg-page:#F5F1F3;--bg-raised:#FBF9FA;--bg-sunken:#ECE4E9;--bg-deep:var(--elder-800);--bg-deepest:var(--elder-900);
--fg-1:#1F1720;--fg-2:#4A3A44;--fg-3:#6E5D68;--fg-emphasis:var(--elder-500);
--fg-on-deep-1:#F3F1E6;--fg-on-deep-2:#E0CAD6;--fg-on-deep-emphasis:var(--ochre-300);
--line:rgba(38,22,31,.13);--shade-rgb:38,22,31;--line-strong:rgba(38,22,31,.28);--line-on-deep:rgba(238,234,223,.16);--line-on-deep-strong:rgba(238,234,223,.34);
--action-bg:var(--elder-800);--action-bg-hover:var(--elder-700);--action-fg:var(--linen-50);
--action-on-deep-bg:var(--linen-100);--action-on-deep-bg-hover:#FFFFFF;--action-on-deep-fg:var(--elder-800);
--focus-ring:rgba(185,138,69,.45);--error:var(--clay-500);--success:var(--elder-600);
--bg-deep-fade:radial-gradient(90% 55% at 50% 100%,color-mix(in oklab,var(--ochre-300) 26%,transparent) 0%,transparent 70%) fixed,linear-gradient(180deg,var(--elder-900) 0%,var(--elder-700) 48%,var(--elder-500) 100%) fixed;
--bg-deepest-fade:radial-gradient(90% 60% at 50% 100%,color-mix(in oklab,var(--ochre-300) 18%,transparent) 0%,transparent 70%),linear-gradient(180deg,var(--elder-950) 0%,var(--elder-800) 55%,var(--elder-600) 100%);
--bg-page-fade:radial-gradient(90% 55% at 50% 100%,color-mix(in oklab,var(--ochre-200) 45%,transparent) 0%,transparent 70%) fixed,linear-gradient(180deg,#E9DEE5 0%,#F5F1F3 50%,#FFFFFF 100%) fixed;
--field-line:rgba(85,49,70,.11);--field-line-deep:rgba(240,222,232,.09);--field-mote:var(--ochre-500);--field-mote-deep:var(--ochre-300);

--font-geometric:"Outfit","Hanken Grotesk","Helvetica Neue",sans-serif;
--font-grotesk:"Hanken Grotesk","Helvetica Neue",Helvetica,sans-serif;
--font-display:var(--font-geometric);--font-heading:var(--font-geometric);--font-label:var(--font-geometric);--font-body:var(--font-grotesk);
--text-display:clamp(52px,8.4vw,140px);--text-h1:clamp(44px,6.2vw,100px);--text-h2:clamp(34px,4.2vw,62px);--text-h3:clamp(22px,2vw,28px);--text-h4:19px;
--text-lead:clamp(18px,1.45vw,21px);--text-body:17px;--text-small:15px;--text-label:12px;--text-quote:clamp(26px,2.8vw,40px);
--leading-display:.92;--leading-heading:1.06;--leading-body:1.65;--leading-lead:1.55;
--tracking-display:-0.012em;--tracking-heading:-0.02em;--tracking-label:0.2em;
--weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-black:800;

--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:192px;
--section-pad-s:clamp(64px,8vw,96px);--section-pad-m:clamp(96px,12vw,160px);--section-pad-l:clamp(128px,16vw,224px);
--container:1240px;--container-text:680px;--gutter:clamp(20px,4vw,56px);
--radius-xs:3px;--radius-s:8px;--radius-m:14px;--radius-l:28px;--radius-pill:999px;
--border-hair:1px solid var(--line);--border-strong:1px solid var(--line-strong);
--shadow-none:none;--shadow-float:0 32px 64px -32px rgba(23,48,29,.28),0 2px 6px rgba(23,48,29,.05);--shadow-focus:0 0 0 3px var(--focus-ring);
--blur-header:saturate(1.2) blur(14px);

--ease-breath:cubic-bezier(.22,.61,.24,1);
--ease-grow:cubic-bezier(.65,.05,.25,1);
--ease-drift:cubic-bezier(.45,0,.55,1);
--ease-scene:cubic-bezier(.76,0,.24,1);
--dur-quick:220ms;--dur-calm:480ms;--dur-reveal:1100ms;--dur-unfold:1500ms;--dur-scene:1400ms;--stagger:90ms;
}
@media (prefers-reduced-motion:reduce){:root{--dur-quick:1ms;--dur-calm:1ms;--dur-reveal:1ms;--dur-unfold:1ms;--dur-scene:1ms;--stagger:0ms}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg-page);color:var(--fg-1);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,blockquote,figure{margin:0}
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}
img{display:block;max-width:100%}
a{color:var(--elder-600);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--elder-800)}
::selection{background:var(--ochre-200);color:var(--ink)}
:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-xs)}