/*
 * Funktionale Variablen für Größenangaben
 */
:root {
   /* SCHRIFTGRÖSSEN */
   --cx-font-size-xxl: var(--cx-22px-to-rem);
   --cx-font-size-xl: var(--cx-20px-to-rem);
   --cx-font-size-l: var(--cx-18px-to-rem);
   --cx-font-size-m: var(--cx-16px-to-rem);
   --cx-font-size-s: var(--cx-14px-to-rem);
   --cx-font-size-xs: var(--cx-12px-to-rem);
   /* LINE HEIGHT */
   /* Je größer die Schrift, desto weniger Abstand ist nötig, damit es lesbar bleibt. */
   /* Bei kleineren Schriftgrößen ist es also wichtig, die Line-Height zu erhöhen, damit es leserlich ist. */
   --cx-line-height-tight: 1; /* z. B. Buttons, Controls */
   --cx-line-height-compact: 1.3; /* z. B. Listen & Details */
   --cx-line-height-normal: 1.43; /* z. B. Standard Text */
   --cx-line-height-comfortable: 1.5; /* z. B. Mobile */
   --cx-line-height-loose: 2; /* z. B. Accessibility */
   /* BORDERS */
   --cx-border-radius-xs: var(--cx-4px-to-rem); /* Standard für Mat2 */
   --cx-border-radius-s: var(--cx-8px-to-rem);
   --cx-border-radius-m: var(--cx-12px-to-rem);
   --cx-border-radius-l: var(--cx-16px-to-rem);
   --cx-border-radius-xl: var(--cx-20px-to-rem); /* Standard für neue Dashboard Kacheln, z. B. EasyStart Container oder Selfservice Dashboard */
   --cx-border-radius-xxl: var(--cx-28px-to-rem);

   --cx-focus-outline-width: 2px;
   /* PADDING */
   --cx-padding-xs: var(--cx-4px-to-rem);
   --cx-padding-s: var(--cx-8px-to-rem);
   --cx-padding-m: var(--cx-12px-to-rem);
   --cx-padding-l: var(--cx-16px-to-rem); /* Innerhalb von Containern und Sheets der Standard, Standard-Padding für den Main-Content-Bereich auf Desktop-Ansichten */
   --cx-padding-xl: var(--cx-24px-to-rem);
   /* GAP */
   --cx-gap-xxs: var(--cx-2px-to-rem);
   --cx-gap-xs: var(--cx-4px-to-rem); /* Oft innerhalb von Containern, um Elemente voneinander abzugrenzen */
   --cx-gap-s: var(--cx-8px-to-rem);
   --cx-gap-m: var(--cx-12px-to-rem); /* Gap für Detailseiten-Abschnitte (Horiz. Abstand zwischen Tags in Vivendi Aktuelles) */
   --cx-gap-l: var(--cx-16px-to-rem);
   --cx-gap-xl: var(--cx-20px-to-rem);
   --cx-gap-xxl: var(--cx-24px-to-rem);
   --cx-gap-xxxl: var(--cx-32px-to-rem);
   /* INPUT FELDER */
   --cx-input-text-fontsize: var(--cx-14px-to-rem);
   --cx-input-floated-label-fontsize: var(--cx-10px-to-rem);
   --cx-input-height: 3.25rem; /* 52px / 16 */
   /* DIALOG BREITEN */
   --cx-dialog-breite-xs: 400px;
   --cx-dialog-breite-s: 600px;
   --cx-dialog-breite-l: 800px;
   --cx-dialog-breite-xl: 1200px;
   /*ICONS*/
   --cx-icon-font-size-xs: var(--cx-18px-to-rem); /*häufig nur kleine Indikatoren, wie Aktuelles - Termin Info Icons*/
   --cx-icon-font-size-s: var(--cx-20px-to-rem); /*Wird genutzt für Indikatoren, einige dekorative Icons*/
   --cx-icon-font-size-m: var(--cx-24px-to-rem); /*DEFAULT - für Buttons und IconButtons*/
   --cx-icon-font-size-l: var(--cx-32px-to-rem);
   --cx-icon-font-size-xl: var(--cx-40px-to-rem);
   --cx-icon-font-size-xxl: var(--cx-48px-to-rem); /*wird beispielsweise häufig genutzt für die Icons in der CxNoDataInfo Komponente*/
}