@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300..900;1,300..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* ---- fonts ---- */
/* Substitutionshinweis: Die Wortmarke im Logo ist in einer Myriad-/Frutiger-nahen humanistischen Grotesk gesetzt.
   Die Originaldatei lag nicht bei; Source Sans 3 ist der nächstliegende Google-Font-Ersatz. Siehe readme.md. */
:root{--font-sans:"Source Sans 3","Helvetica Neue",Arial,sans-serif;--font-serif:"Source Serif 4",Georgia,"Times New Roman",serif;--font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---- colors ---- */
:root{
/* Marnitz-Rot — direkt aus dem Logo (PDF, Adobe Illustrator, RGB 229/45/28) */
--red-50:#fef3f1;--red-100:#fde0db;--red-200:#f9c1b8;--red-300:#f49685;--red-400:#ee6352;
--red-500:#e52d1c;--red-600:#c8210f;--red-700:#a31b0d;--red-800:#7d170c;--red-900:#571209;
/* Warme Neutraltöne — minimal in Richtung des Rot-Farbtons gekippt */
--neutral-0:#ffffff;--neutral-50:#faf8f7;--neutral-100:#f2efed;--neutral-200:#e4e0dd;--neutral-300:#cfcac6;
--neutral-400:#a8a19c;--neutral-500:#7d7671;--neutral-600:#5c5651;--neutral-700:#423d39;--neutral-800:#2b2725;--neutral-900:#191615;
/* Gedeckte Signalfarben für Statusanzeigen */
--green-50:#eef6f1;--green-500:#2e7d5b;--green-700:#1f5a40;
--amber-50:#fdf5e6;--amber-500:#b57a16;--amber-700:#855810;
--blue-50:#eef3f8;--blue-500:#2c5f8a;--blue-700:#1f4463;

/* ---- Semantische Aliase ---- */
--brand:var(--red-500);--brand-hover:var(--red-600);--brand-active:var(--red-700);
--brand-ink:var(--red-700);            /* rote Schrift ab Fließtextgröße: Kontrast ≥ 4.5:1 */
--brand-subtle:var(--red-50);--brand-border:var(--red-200);

--text-strong:var(--neutral-900);--text-body:var(--neutral-800);--text-muted:var(--neutral-600);
--text-faint:var(--neutral-500);--text-on-brand:var(--neutral-0);--text-link:var(--red-700);--text-link-hover:var(--red-500);

--surface-page:var(--neutral-50);--surface-card:var(--neutral-0);--surface-sunken:var(--neutral-100);
--surface-inverse:var(--neutral-900);--surface-brand:var(--red-500);--surface-brand-subtle:var(--red-50);

--border-subtle:var(--neutral-200);--border-default:var(--neutral-300);--border-strong:var(--neutral-400);
--border-brand:var(--red-500);--focus-ring:var(--red-500);

--status-ok-bg:var(--green-50);--status-ok-fg:var(--green-700);
--status-wait-bg:var(--amber-50);--status-wait-fg:var(--amber-700);
--status-info-bg:var(--blue-50);--status-info-fg:var(--blue-700);
--status-off-bg:var(--neutral-100);--status-off-fg:var(--neutral-600);
}

/* ---- typography ---- */
:root{
--text-2xs:11px;--text-xs:12px;--text-sm:14px;--text-base:16px;--text-md:18px;--text-lg:21px;
--text-xl:25px;--text-2xl:30px;--text-3xl:36px;--text-4xl:44px;--text-5xl:54px;
--leading-tight:1.14;--leading-snug:1.28;--leading-normal:1.5;--leading-relaxed:1.65;
--weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-black:900;
--tracking-tight:-0.015em;--tracking-normal:0;--tracking-wide:0.02em;--tracking-caps:0.07em;

/* Rollen */
--type-display:var(--weight-bold) var(--text-5xl)/var(--leading-tight) var(--font-sans);
--type-h1:var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-sans);
--type-h2:var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-sans);
--type-h3:var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-sans);
--type-lead:var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-sans);
--type-body:var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-sans);
--type-small:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
--type-label:var(--weight-semibold) var(--text-xs)/var(--leading-normal) var(--font-sans);
--type-quote:italic var(--weight-regular) var(--text-lg)/var(--leading-snug) var(--font-serif);
--type-mono:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-mono);
--measure-prose:68ch;--measure-lead:54ch;
}

/* ---- spacing ---- */
: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:96px;--space-14:128px;
--gutter:24px;--section-y:80px;--section-y-lg:112px;
--container-narrow:760px;--container:1080px;--container-wide:1280px;
--control-h-sm:32px;--control-h-md:40px;--control-h-lg:48px;--hit-min:44px;
}

/* ---- radius ---- */
:root{--radius-none:0;--radius-sm:3px;--radius-md:6px;--radius-lg:10px;--radius-xl:16px;--radius-full:999px;
--border-w:1px;--border-w-thick:2px;--rule-w:1px}

/* ---- elevation ---- */
:root{
--shadow-none:none;
--shadow-xs:0 1px 2px rgba(25,22,21,.06);
--shadow-sm:0 1px 3px rgba(25,22,21,.08),0 1px 2px rgba(25,22,21,.04);
--shadow-md:0 4px 12px rgba(25,22,21,.08),0 1px 3px rgba(25,22,21,.05);
--shadow-lg:0 12px 32px rgba(25,22,21,.11),0 2px 6px rgba(25,22,21,.05);
--shadow-inset:inset 0 1px 2px rgba(25,22,21,.07);
--ring-focus:0 0 0 3px rgba(229,45,28,.28);
--scrim:rgba(25,22,21,.55);
--blur-panel:saturate(1.1) blur(10px); /* @kind other */
}

/* ---- motion ---- */
:root{
--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 */
--duration-instant:80ms; /* @kind other */
--duration-fast:140ms; /* @kind other */
--duration-normal:220ms; /* @kind other */
--duration-slow:360ms; /* @kind other */
--transition-control:color var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard); /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{--duration-instant:0ms; /* @kind other */ --duration-fast:0ms; /* @kind other */ --duration-normal:0ms; /* @kind other */ --duration-slow:0ms /* @kind other */}}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:var(--type-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
h1{font:var(--type-h1);color:var(--text-strong);letter-spacing:var(--tracking-tight)}
h2{font:var(--type-h2);color:var(--text-strong)}
h3{font:var(--type-h3);color:var(--text-strong)}
p{text-wrap:pretty}
a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}
img,svg{display:block;max-width:100%}
::selection{background:var(--red-200);color:var(--neutral-900)}