/* Design-Tokens nach CI Design Guide „Weihnachtsmarkt Halberstadt" (Version 01)
   Farben: Gold #BB924D · Himbeere #D60D47 · Deep Purple #332358 — Schrift: Nunito Sans */

@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400 900;font-stretch:100%;font-display:swap;src:url("../assets/fonts/nunito-sans-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}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400 900;font-stretch:100%;font-display:swap;src:url("../assets/fonts/nunito-sans-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}

:root{
/* Markenfarben */
--gold:#BB924D;
--himbeere:#D60D47;
--purple:#332358;

/* Abstufungen (für Flächen, Hover und lesbare Kleintexte) */
--purple-900:#231842;
--purple-800:#2a1d4b;
--purple-600:#4a3a78;
--purple-100:#ebe7f2;
--gold-text:#8a6a2f;       /* Gold für kleine Schrift auf Hell (Kontrast ≥ 4.5:1) */
--gold-light:#e2c796;      /* Gold für Schrift auf Purple */
--himbeere-dark:#b00a3a;
--cream:#f6f0e7;           /* ruhiger, heller Grund (vgl. Kartenflächen im CI-Guide) */
--cream-dark:#ede3d4;
--white:#ffffff;

/* Semantik */
--surface-page:var(--white);
--surface-soft:var(--cream);
--surface-inverse:var(--purple);
--text-primary:var(--purple);
--text-secondary:#4b4263;
--text-on-dark:#ffffff;
--text-on-dark-muted:#ddd6ea;
--link-color:var(--himbeere);
--link-hover:var(--himbeere-dark);
--focus-ring:var(--himbeere);

--font:"Nunito Sans","Nunito",system-ui,-apple-system,sans-serif;
--fw-regular:400;--fw-semibold:600;--fw-bold:700;--fw-extrabold:800;--fw-black:900;
--ls-meta:0.08em;

--radius-md:12px;--radius-lg:20px;--radius-pill:999px;
--shadow-card:0 2px 6px rgba(51,35,88,0.08),0 12px 28px rgba(51,35,88,0.10);
--ease:cubic-bezier(.22,.9,.32,1);
}

@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}