:root{
/* Brand palette — verbatim from the PowerPoint theme "digitalespende" (theme1.xml) */
--brand-teal:#03867B;--brand-green:#57B469;--brand-purple:#554193;--brand-crimson:#AE364E;--brand-blue:#06446C;--brand-yellow:#D7C548;
/* Logo values (sampled from the master logo artwork) */
--brand-ink:#353535;--logo-teal:#03877C;--logo-yellow:#D7C549;--logo-crimson:#AE364F;--logo-purple:#544193;
/* Tints — teal */
--teal-900:#012F2C;--teal-700:#026C63;--teal-600:#03867B;--teal-300:#7FC0BA;--teal-100:#D9ECEA;--teal-050:#EFF7F6;
/* Tints — purple (kollekte.app + Bedienerportal) */
--purple-900:#2C215C;--purple-700:#463579;--purple-600:#554193;--purple-400:#8577B7;--purple-200:#C9C1E1;--purple-050:#F1EFF8;
/* Tints — crimson / green / yellow / blue */
--crimson-700:#8C2B3E;--crimson-600:#AE364E;--crimson-100:#F2DDE1;
--green-700:#3F8E4F;--green-600:#57B469;--green-100:#E1F1E4;
--yellow-600:#D7C548;--yellow-100:#F8F3D9;
--blue-700:#04324F;--blue-600:#06446C;--blue-100:#D6E0E7;
/* Neutrals */
--neutral-000:#FFFFFF;--neutral-050:#FAFAFA;--neutral-100:#F4F4F4;--neutral-200:#E4E4E4;--neutral-300:#D2D2D2;--neutral-400:#B4B4B4;--neutral-500:#8C8C8C;--neutral-600:#6B6B6B;--neutral-700:#4F4F4F;--neutral-800:#3F3F3F;--neutral-900:#353535;--neutral-950:#1F1F1F;

/* ---- Semantic aliases ---- */
--text-strong:var(--neutral-900);--text-body:var(--neutral-800);--text-muted:var(--neutral-600);--text-faint:var(--neutral-500);
--text-on-brand:#FFFFFF;--text-accent:var(--brand-teal);--text-link:var(--brand-teal);--text-link-hover:var(--teal-700);--text-link-visited:var(--brand-crimson);
--surface-page:var(--neutral-000);--surface-muted:var(--neutral-100);--surface-sunken:var(--neutral-200);
--surface-card:var(--neutral-000);--surface-card-veil:rgba(255,255,255,.88);--surface-card-veil-soft:rgba(255,255,255,.72);
--surface-inverse:var(--neutral-900);--surface-brand:var(--brand-teal);--surface-brand-soft:var(--teal-050);
--surface-photo-wash:rgba(255,255,255,.55);
--border-hairline:var(--neutral-200);--border-default:var(--neutral-300);--border-strong:var(--neutral-500);--border-accent:var(--brand-teal);
--action-primary-bg:var(--brand-teal);--action-primary-bg-hover:var(--teal-700);--action-primary-bg-active:var(--teal-900);--action-primary-fg:#FFFFFF;
--action-secondary-bg:transparent;--action-secondary-fg:var(--brand-teal);--action-secondary-border:var(--brand-teal);--action-secondary-bg-hover:var(--teal-050);
--action-quiet-fg:var(--neutral-700);--action-quiet-bg-hover:var(--neutral-100);
--action-disabled-bg:var(--neutral-200);--action-disabled-fg:var(--neutral-500);
--focus-ring:var(--brand-blue);
--status-success:var(--brand-green);--status-success-surface:var(--green-100);
--status-danger:var(--brand-crimson);--status-danger-surface:var(--crimson-100);
--status-warning:var(--brand-yellow);--status-warning-surface:var(--yellow-100);
--status-info:var(--brand-blue);--status-info-surface:var(--blue-100);
--status-offline:var(--neutral-400);
/* Product accents — which hue leads on which surface */
--product-spende-app:var(--brand-teal);--product-spendensaeule:var(--brand-teal);--product-kollekte-app:var(--brand-purple);--product-portal:var(--brand-purple);
/* Chart series — order used in the Bedienerportal donuts */
--chart-1:var(--brand-purple);--chart-2:var(--brand-teal);--chart-3:var(--brand-yellow);--chart-4:var(--purple-400);--chart-5:var(--brand-crimson);--chart-6:var(--brand-blue);
}

:root{
--font-display:"Canela Text",Georgia,"Times New Roman",serif;
--font-sans:"Albert Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
--font-ui:var(--font-sans);
--font-legacy-office:"Open Sans",Arial,sans-serif;
--font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

--text-2xs:11px;--text-xs:12px;--text-sm:14px;--text-base:16px;--text-md:18px;--text-lg:20px;--text-xl:24px;--text-2xl:28px;--text-3xl:34px;--text-4xl:44px;--text-5xl:56px;--text-6xl:72px;
--leading-tight:1.1;--leading-snug:1.25;--leading-normal:1.45;--leading-relaxed:1.6;
--weight-regular:400;--weight-bold:700;
--tracking-tight:-0.01em;--tracking-normal:0;--tracking-wide:0.04em;--tracking-caps:0.18em;--tracking-caps-loose:0.26em;

/* Semantic roles */
--type-display-font:var(--font-display);--type-display-size:var(--text-5xl);--type-display-leading:var(--leading-tight);
--type-title-font:var(--font-display);--type-title-size:var(--text-3xl);--type-title-leading:var(--leading-snug);
--type-heading-font:var(--font-sans);--type-heading-size:var(--text-lg);--type-heading-weight:var(--weight-bold);
--type-body-font:var(--font-sans);--type-body-size:var(--text-base);--type-body-leading:var(--leading-relaxed);
--type-small-size:var(--text-sm);--type-caption-size:var(--text-xs);
--type-eyebrow-font:var(--font-sans);--type-eyebrow-size:var(--text-xs);--type-eyebrow-tracking:var(--tracking-caps);--type-eyebrow-transform:uppercase;
--type-button-font:var(--font-sans);--type-button-size:var(--text-sm);--type-button-weight:var(--weight-bold);--type-button-tracking:var(--tracking-wide);--type-button-transform:uppercase;
--type-amount-font:var(--font-sans);--type-amount-size:var(--text-4xl);--type-amount-weight:var(--weight-regular);
}

:root{
--space-0:0;--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;--space-6:20px;--space-7:24px;--space-8:32px;--space-9:40px;--space-10:48px;--space-11:64px;--space-12:80px;--space-13:120px;
--gap-inline:var(--space-3);--gap-stack:var(--space-5);--gap-section:var(--space-10);
--pad-control-y:12px;--pad-control-x:20px;--pad-control-y-sm:8px;--pad-control-x-sm:14px;
--pad-card:var(--space-6);--pad-card-tight:var(--space-4);--pad-screen:var(--space-6);--pad-screen-wide:var(--space-9);
--size-control:44px;--size-control-sm:36px;--size-touch-min:44px;--size-icon-sm:16px;--size-icon:20px;--size-icon-lg:24px;--size-icon-xl:40px;
--measure-prose:62ch;--measure-narrow:44ch;
--layout-app-max:1440px;--layout-topbar-h:48px;--layout-sidenav-w:200px;--layout-phone-w:390px;--layout-kiosk-w:1080px;
}

:root{
/* The products are square-cornered: donation cards, kiosk panels and the primary
   SPENDEN! button all sit at 0. Small radii appear only on legacy Material-era
   controls in kollekte.app; pills only on the slider amount bubble and badges. */
--radius-none:0;--radius-xs:2px;--radius-sm:4px;--radius-md:6px;--radius-pill:999px;--radius-circle:50%;
--radius-card:var(--radius-none);--radius-control:var(--radius-none);--radius-control-legacy:var(--radius-sm);--radius-dialog:var(--radius-none);--radius-badge:var(--radius-pill);--radius-bubble:var(--radius-sm);
--border-width-hairline:1px;--border-width-accent:2px;--border-width-focus:2px;
}

:root{
/* Elevation is used sparingly: hairline borders do most of the separation work.
   Shadows appear on floating layers only (dialogs, dropdowns, kiosk overlays). */
--shadow-none:none;
--shadow-hairline:inset 0 0 0 1px var(--border-hairline);
--shadow-raised:0 1px 2px rgba(53,53,53,.10);
--shadow-card:0 1px 3px rgba(53,53,53,.12);
--shadow-overlay:0 8px 28px rgba(31,31,31,.22);
--shadow-dialog:0 12px 40px rgba(31,31,31,.28);
--focus-shadow:0 0 0 2px #FFFFFF,0 0 0 4px var(--focus-ring);
--veil-scrim:rgba(31,31,31,.45);
--veil-photo:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62)); /* @kind other */
--blur-veil:blur(2px); /* @kind other */
}

:root{
/* Restrained motion: short fades and 1-step slides. No bounce, no spring, no parallax. */
--duration-instant:80ms; /* @kind other */--duration-fast:140ms; /* @kind other */--duration-base:200ms; /* @kind other */--duration-slow:320ms; /* @kind other */--duration-screen:420ms; /* @kind other */
--ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */--ease-out:cubic-bezier(0,0,.2,1); /* @kind other */--ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
--transition-control:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard); /* @kind other */
--transition-surface:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out); /* @kind other */
--press-scale:0.99; /* @kind other */
}