:root {
--color-rot: #80352c;
--color-rot-dunkler: #701c05;
--color-braun: #fffefa;
--color-zawe-zeile-hell: #A0B5BC;
--color-zawe-zeile-dunkel: #eeede5;
--color-gruen: #9db36b;
--color-orange: #ed8156;
--color-orange-dezent:#cfbb89;
--color-grau-hell: #fcfcfc;
--color-grau-dunkler: #e0e0e0;
--color-link: #0a95c7;

--zawe-font-small-s: 12px;
--zawe-font-small: 13px;
--zawe-font-normal: 14px;
--zawe-font-large: 16px;

--zawe-font-weight-light: 300;
--zawe-font-weight-normal: 400;
--zawe-font-weight-bold: 700;

/* Form/Grid Tokens */
--field-gap: 1.5rem;
--field-gap-xs: 0.5rem;
--label-fz: clamp(12px, 1vw, 14px);
--input-fz: clamp(14px, 1.2vw, 16px);
--input-padding: 0.4rem 0.6rem;
--grid-width-default: 1024px;
--grid-width-max: 2450px;
--grid-width-buchhaltung: 960px;
--grid-width-rechnungen: 860px;
--grid-width-narrow: 720px;

/* ----------------------------- */
/*   NEUE TYPOGRAFIE-TOKENS      */
/* ----------------------------- */

/* Grundschriften */
--font-sans: "brandon grotesque", sans-serif;
--font-serif: "palast web", serif;

/* vereinheitlichte Weights */
--fw-sans-regular: 400;
--fw-sans-italic: 300;

--fw-regular: 400;
--fw-bold: 700;

/* Letterspacing */
--ls-0: 0;
--ls-002: 0.02em;
--ls-004: 0.04em;
--ls-008: 0.08em;

/* Schriftgrößen-Raster */
--fz-xs: 12px;
--fz-s: 14px;
--fz-m: 16px;
--fz-l: 18px;
--fz-xl: 22px;
--fz-xxl: 28px;
--fz-hero: 36px;
}

/* form_base.css – grid + fields + checkbox groups */
.bold { font-weight: 700; }
.normal { font-weight: 400; }
.light { font-weight: 300; }


.width__buchhaltung { max-width: var(--grid-width-buchhaltung); }
.width__rechnungen  { max-width: var(--grid-width-rechnungen); }
.width__narrow      { max-width: var(--grid-width-narrow); }
.width__full        { max-width: 100%; }

/* .wr_grid_layout-025-075 { display: grid;grid-template-columns: 1fr 3fr;gap: 1.5rem;}.wr_grid_layout-033-066 {display: grid;grid-template-columns: 1fr 2fr;gap: 1.5rem;} */

.wr-grid--2 {display: grid;grid-template-columns: 1fr 1fr;gap: var(--field-gap);justify-items: stretch;}
.wr-grid--3 {display: grid;grid-template-columns: 1fr 1fr 1fr;gap: var(--field-gap);justify-items: stretch;}
.wr-grid--4 {display: grid;grid-template-columns: repeat(4, 1fr);gap: var(--field-gap);justify-items: stretch;}

.wr-grid--lock > * { min-width: 0; }

@media (max-width: 768px) {
.wr-grid--2:not(.wr-grid--lock),.wr-grid--3:not(.wr-grid--lock),.wr-grid--4:not(.wr-grid--lock) {grid-template-columns: 1fr;}
}

:root {

/* =======================
   TYPOGRAFIE
   ======================= */
--form-font-size-heading: clamp(1.1rem, 1.4vw, 1.6rem);   /* Für H2/H3 innerhalb von Forms */
--form-font-size-label:   0.82rem;                       /* Dezentes, ruhiges Label */
--form-font-size-input:   clamp(0.9rem, 1.2vw, 1rem);    /* Einheitlicher Input-Text */


/* =======================
   VERTIKALER RHYTHMUS
   ======================= */
--form-row-gap:      1rem;     /* Abstand zwischen Formzeilen */
--form-label-gap:    0.25rem;  /* Abstand Label → Input (kompakt) */
--form-section-gap:  1.8rem;   /* Abstand zwischen Formblöcken */


/* =======================
   INPUT GEOMETRIE
   ======================= */
--form-input-height-desktop: 44px;   /* angenehm, nicht übergroß */
--form-input-height-mobile:  38px;   /* kompakter für iPhone */
}