/* ===================================================
   tokens.css
   - Primitives
   - Contextual (Light / Dark) -- applied to :root AND body
   - Component / Elementor token classes
   - Toggle styling (unten rechts)
   =================================================== */

/* ---------------------------------------
   1. GLOBAL & FONTS
--------------------------------------- */
:root {
 /* Schriftarten */
  --font-family-1: 'Lora', serif;
  --font-family-2: 'Open Sans', sans-serif;

    /* Typo Scale (responsive mit clamp) */
  --font-size-md: clamp(1.1rem, 0.9rem + 0.4vw, 1.15rem);  /*16px*/
  --font-size-body: clamp(1rem, 0.8rem + 0.4vw, 1.1rem); /*  16px */
  --font-size-xxs: 0.7rem;   /*14px;*/


      /* Typo Scale (responsive mit clamp) */
  --font-size-h1: clamp(2rem, 1.8rem + 3vw, 3.5rem); /*  55px */
  --font-size-h2: clamp(2rem, 1.3rem + 2vw, 2.3rem); /*  38px */
  --font-size-h3: clamp(1.6rem, 1rem + 1.5vw, 1.9rem); /*  30px */
  --font-size-h4: clamp(1.4rem, 1rem + 1vw, 1.7rem); /*  26px */
  --font-size-body-lg: clamp(1.5rem, 1.1rem + 1vw, 1.2rem); /*  26px */
  --font-size-body-md: clamp(1.05rem, 0.9rem + 0.4vw, 1.15rem);  /*18px*/
  --font-size-body-sm: clamp(0.95rem, 0.8rem + 0.4vw, 1rem); /*  16px */
  --font-size-label: clamp(0.7rem, 0.7rem + 0.4vw, 0.9rem);    /*14px;*/


    /* Schriftgroessen */
  --font-size-xxxl: 75px;
  --font-size-xxl:  60px;
  --font-size-xl:  40px;
  --font-size-lg:  32px;
  --font-size-md:  26px;
  --font-size-sm:  20px;
  --font-size-xs:  18px;
  --font-size-xxs: 16px;
  --font-size-xxxs:14px;

  /* Schriftgewichte */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;


 /* Zeilenabstaende */
  --font-lineheight-xs: clamp(1.5rem, 0.9rem + 0.4vw, 1.75rem);   /*0px;*/
  --font-lineheight-sm: clamp(1.66rem, 1.4rem + 0.4vw, 1.8rem);  /*28px; body md, sm */
  --font-lineheight-md: clamp(1.6rem, 1.5rem + 0.5vw, 2.4rem);   /*36px; h4 */
  --font-lineheight-lg: clamp(2.4rem, 1.7rem + 0.6vw, 2.55rem);    /*45px; h3 */
  --font-lineheight-xl: clamp(2.5rem, 2rem + 1vw, 3.8rem);        /*55px; h2 */
  --font-lineheight-xxl: clamp(2rem, 2rem + 1.6vw, 4.0rem);     /*70px; h1 */
  --font-lineheight-xxxl: clamp(3.2rem, 3rem + 2vw, 4.2rem);      /*95px;*/

   /*   /* Buchstabenabstaende  */
  --font-letterspacing-very-close: -0.16px;
  --font-letterspacing-0: 0px;
  --font-letterspacing-closer: 0.12px;
  --font-letterspacing-wide: 0.16px;
  --font-letterspacing-wider: 0.5px;


 /* Border */
  --border-0: 0px;
  --border-1: 1px;
  --border-1-5: 1.5px;
  --border-2: 2px;

    /* Spacing */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 32px;
  --spacing-8: 40px;
  --spacing-9: 55px;
  --spacing-11: 100px;
  --spacing-10: 70px;
  --spacing-12: 140px;
  --spacing-13: 160px;
  --spacing-14: 200px;
  --spacing-15: 220px;
  --spacing-16: 300px;
  --spacing-17: 400px;
  --spacing-18: 600px;
  

    /* Radius */
  --radius-0: 0px;
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 10px;
  --radius-4: 12px;
  --radius-5: 14px;
  --radius-6: 24px;
  --radius-7: 50px;
  --radius-8: 100px;

  /* Eckenradius */
  --border-radius-lg: 100px;
  --border-radius-md: 80px;
  --border-radius-s: 30px;
  --border-radius-sm: 10px;
  --border-radius-xxs: 0px;
	

  /* ---------------------------------------
     2. PRIMITIVE COLORS
  ---------------------------------------*/


  /* Neutral / Greys */
  --color-grey-0:  #f5f5f5;
  --color-grey-50: #fAF9F6;
  --color-grey-100:#e5e8e8;
  --color-grey-200:#cdd4d4;
  --color-grey-300:#abb5b5;
  --color-grey-400:#818f8f;
  --color-grey-500:#5f6d6d;
  --color-grey-600:#576363;
  --color-grey-700:#4a5354;
  --color-grey-800:#424848;
  --color-grey-900:#3a3f3f;
  --color-grey-950:#121212;

  /* Accent / Blue */
  --color-blue-950:#042d2f;
  --color-blue-900:#204744;
  --color-blue-800:#265552;
  --color-blue-700:#2d726d;
  --color-blue-600:#3b9790;
  --color-blue-500:#4cb9b1;
  --color-blue-400:#71c7c1;
  --color-blue-300:#96d5d1;
  --color-blue-200:#bae4e1;
  --color-blue-100:#dff2f1;
  --color-blue-50:#f1f9f9;

  --color-yellow-950: #271e00;
  --color-yellow-900: #2c2100;
  --color-yellow-800: #5f4800;
  --color-yellow-700: #926f00;
  --color-yellow-600: #c59500;
  --color-yellow-500: #f8bc00;
  --color-yellow-400: #ffcc2c;
  --color-yellow-300: #ffd85f;
  --color-yellow-200: #ffe592;
  --color-yellow-100: #fff1c5;
  --color-yellow-50: #fff7df;

  --color-gradient-900: #00322e;
  --color-gradient-800: #003535;
  --color-gradient-700: #0a5753;
  --color-gradient-600: #066965;
  --color-gradient-500: #009088;
  --color-gradient-400: #71c7c1;
  --color-gradient-300: #b8e8c9;
  --color-gradient-200: #e6eec6;
  --color-gradient-100: #fff1c5;

  --color-green-950: #0e1005;
  --color-green-900: #131606;
  --color-green-800: #343d12;
  --color-green-700: #56641e;
  --color-green-600: #6c8b2a;
  --color-green-500: #76b335;
  --color-green-400: #8dcb50;
  --color-green-300: #a2d782;
  --color-green-200: #ace2af;
  --color-green-100: #e6eec6;
  --color-green-50: #eff4da;


  /* focus fallback */
  --color-focus-default: #ff9800;
}

/* ----------------------
   2) CONTEXTUAL / SEMANTIC
   Note: we include both :root.light-mode and body.light-mode
   so the CSS works irrespective whether JS adds class to <html> or <body>
   ---------------------- */

/* LIGHT MODE */
:root.light-mode,
body.light-mode {
  --color-accent02-50: var(--color-blue-50);
  --color-accent02-100: var(--color-blue-100);
  --color-accent02-200: var(--color-blue-200);
  --color-accent02-300: var(--color-blue-300);
  --color-accent02-400: var(--color-blue-400);
  --color-accent02-500: var(--color-blue-500);
  --color-accent02-600: var(--color-blue-600);
  --color-accent02-700: var(--color-blue-700);
  --color-accent02-800: var(--color-blue-800);
  --color-accent02-900: var(--color-blue-900);
  --color-accent02-950: var(--color-blue-950);

  --color-neutral-0: var(--color-grey-0);
  --color-neutral-50: var(--color-grey-50);
  --color-neutral-100: var(--color-grey-100);
  --color-neutral-200: var(--color-grey-200);
  --color-neutral-300: var(--color-grey-300);
  --color-neutral-400: var(--color-grey-400);
  --color-neutral-500: var(--color-grey-500);
  --color-neutral-600: var(--color-grey-600);
  --color-neutral-700: var(--color-grey-700);
  --color-neutral-800: var(--color-grey-800);
  --color-neutral-900: var(--color-grey-900);
  --color-neutral-950: var(--color-grey-950);


  --color-accent01-50: var(--color-yellow-50);
  --color-accent01-100: var(--color-yellow-100);
  --color-accent01-200: var(--color-yellow-200);
  --color-accent01-300: var(--color-yellow-300);
  --color-accent01-400: var(--color-yellow-400);
  --color-accent01-500: var(--color-yellow-500);
  --color-accent01-600: var(--color-yellow-600);
  --color-accent01-700: var(--color-yellow-700);
  --color-accent01-800: var(--color-yellow-800);
  --color-accent01-900: var(--color-yellow-900);
  --color-accent01-950: var(--color-yellow-950);

  --color-gradient-100: var(--color-yellow-50);
  --color-gradient-200: var(--color-yellow-100);
  --color-gradient-300: var(--color-green-100);
  --color-gradient-400: var(--color-green-200);
  --color-gradient-500: var(--color-blue-300);
  --color-gradient-600: var(--color-blue-500);
  --color-gradient-700: var(--color-blue-600);
  --color-gradient-800: var(--color-blue-700);
  --color-gradient-900: var(--color-blue-700);

  --color-text-primary-default: var(--color-neutral-950);
  --color-text-secondary-default: var(--color-accent02-900);
  --color-text-secondary-hover: var(--color-accent02-600);
	
  --color-surface-screen: var(--color-neutral-0);

  --color-surface-container-default: var(--color-accent02-50);
  --color-surface-container-highlight: var(--color-accent02-100);
  /* --color-surface-container-highlight: var(--color-neutral-0); */
  --color-surface-container-navi: var(--color-accent02-100);

  --color-text-on-primary-default: var(--color-neutral-950);
  --color-text-on-secondary-default: var(--color-neutral-0);
  --color-text-on-secondary-hover: var(--color-accent02-100);

  --color-link-primary-default: var(--color-accent02-800);
  --color-link-primary-hover: var(--color-accent02-600);
  --color-link-primary-press: var(--color-accent02-400);
  --color-link-primary-active: var(--color-accent02-500);

  --color-icon-primary-default: var(--color-neutral-950);
  --color-icon-primary-hover: var(--color-accent02-900);
  --color-icon-secondary-default: var(--color-accent02-900);
  --color-icon-secondary-hover: var(--color-accent02-600);
  --color-icon-tertiary-default: var(--color-neutral-0);
  --color-icon-tertiary-hover: var(--color-accent02-100);

  --color-border-primary-default: var(--color-neutral-950);
  --color-border-primary-hover: var(--color-accent02-700);
  --color-border-secondary-default: var(--color-neutral-300);
  /* --color-border-secondary-default: var(--color-accent02-600); */
  --color-border-secondary-hover: var(--color-accent02-600);
  --color-border-tertiary-default: var(--color-neutral-0);
  --color-border-tertiary-hover: var(--color-neutral-200);

/* Collection name: component token */
/* Mode: Light Mode */
  --color-button-background-primary-default: var(--color-accent02-800);
  --color-button-background-primary-hover: var(--color-accent02-700);
  --color-button-background-primary-press: var(--color-accent02-900);
	
  --color-button-border-primary-default: var(--color-accent02-800);
  --color-button-border-primary-hover: var(--color-accent02-700);
  --color-button-border-primary-press: var(--color-accent02-900);
	
  --color-button-background-secondary-default: var(--color-accent02-50);
  --color-button-background-secondary-hover: var(--color-accent02-100);
  --color-button-background-secondary-press: var(--color-accent02-900);
		
  --color-button-border-secondary-default: var(--color-accent02-800);
  --color-button-border-secondary-hover: var(--color-accent02-400);
  --color-button-border-secondary-press: var(--color-accent02-900);
 
  --color-button-border-secondary-inverse: var(--color-accent02-800);
  --color-button-border-secondary-inverse-hover: var(--color-accent02-400);

  --color-button-foreground-secondary-inverse: var(--color-accent02-800);
  --color-button-foreground-secondary-inverse-hover: var(--color-accent02-800);


  --color-button-foreground-primary-default: var(--color-neutral-0);
  --color-button-foreground-primary-hover: var(--color-accent02-100);
  --color-button-foreground-primary-press: var(--color-accent02-200);
	
  --color-button-foreground-secondary-default: var(--color-accent02-800);
  --color-button-foreground-secondary-hover: var(--color-accent02-800);
  --color-button-foreground-secondary-press: var(--color-accent02-100);

  --color-button-foreground-tertiary-default:var(--color-accent02-800);
  --color-button-foreground-tertiary-hover:var(--color-accent02-600);
}

/* Collection name: contextual_color */
/* Mode: dark */
/* Dark MODE */
:root.dark-mode,
body.dark-mode {
  --color-neutral-0: var(--color-grey-950);
  --color-neutral-50: var(--color-grey-900);
  --color-neutral-100: var(--color-grey-800);
  --color-neutral-200: var(--color-grey-700);
  --color-neutral-300: var(--color-grey-600);
  --color-neutral-400: var(--color-grey-500);
  --color-neutral-500: var(--color-grey-400);
  --color-neutral-600: var(--color-grey-300);
  --color-neutral-700: var(--color-grey-200);
  --color-neutral-800: var(--color-grey-100);
  --color-neutral-900: var(--color-grey-50);
  --color-neutral-950: var(--color-grey-0);

  --color-accent02-50: var(--color-blue-950);
  --color-accent02-100: var(--color-blue-900);
  --color-accent02-200: var(--color-blue-800);
  --color-accent02-300: var(--color-blue-700);
  --color-accent02-400: var(--color-blue-600);
  --color-accent02-500: var(--color-blue-500);
  --color-accent02-600: var(--color-blue-400);
  --color-accent02-700: var(--color-blue-300);
  --color-accent02-800: var(--color-blue-200);
  --color-accent02-900: var(--color-blue-100);
  --color-accent02-950: var(--color-blue-50);
 
  --color-accent01-50: var(--color-yellow-950);
  --color-accent01-100: var(--color-yellow-900);
  --color-accent01-200: var(--color-yellow-800);
  --color-accent01-300: var(--color-yellow-700);
  --color-accent01-400: var(--color-yellow-600);
  --color-accent01-500: var(--color-yellow-500);
  --color-accent01-600: var(--color-yellow-400);
  --color-accent01-700: var(--color-yellow-300);
  --color-accent01-800: var(--color-yellow-200);
  --color-accent01-900: var(--color-yellow-100);
  --color-accent01-950: var(--color-yellow-50);

  --color-gradient-100: var(--color-blue-950);
  --color-gradient-200: var(--color-blue-900);
  --color-gradient-300: var(--color-blue-800);
  --color-gradient-400: var(--color-blue-700);
  --color-gradient-500: var(--color-blue-300);
  --color-gradient-600: var(--color-green-200);
  --color-gradient-700: var(--color-green-100);
  --color-gradient-800: var(--color-yellow-100);
  --color-gradient-900: var(--color-yellow-50);
  
   /*--color-text-primary-default: var(--color-neutral-0);
   --color-text-secondary-default: var(--color-neutral-950);*/
  --color-text-primary-default: var(--color-neutral-900);
  --color-text-secondary-default: var(--color-neutral-950);
  --color-text-secondary-hover: var(--color-accent02-700);
  
  --color-surface-screen: var(--color-neutral-0);

  /*--color-surface-container-default: var(--color-gradient-100);*/
  --color-surface-container-default: var(--color-accent02-100);
  --color-surface-container-highlight: var(--color-accent02-300);
  --color-surface-container-navi: var(--color-accent02-50);

  --color-text-on-primary-default: var(--color-neutral-0);
  --color-text-on-secondary-default: var(--color-accent02-100);
  --color-text-on-secondary-hover: var(--color-accent02-300);
	
  --color-link-primary-default: var(--color-accent02-800);
  --color-link-primary-hover: var(--color-accent02-700);
  --color-link-primary-press: var(--color-accent02-900);
  --color-link-primary-active: var(--color-accent02-800);
	
  --color-icon-primary-default: var(--color-neutral-950);
  --color-icon-primary-hover: var(--color-accent02-900);
  --color-icon-secondary-default: var(--color-accent02-900);
  --color-icon-secondary-hover: var(--color-accent02-600);
  --color-icon-tertiary-default: var(--color-neutral-0);
  --color-icon-tertiary-hover: var(--color-accent02-100);

  --color-border-primary-default: var(--color-neutral-950);
  --color-border-primary-hover: var(--color-accent02-900);
	
  /* --color-border-secondary-default: var(--color-neutral-300); */
   --color-border-secondary-default: var(--color-accent02-800);
  --color-border-secondary-hover: var(--color-accent02-600);
	
  --color-border-tertiary-default: var(--color-accent02-50);
  --color-border-tertiary-hover: var(--color-neutral-200);
	
	
/* Collection name: component token */
/* Mode: Dark mode */
  --color-button-background-primary-default: var(--color-accent02-700);
  --color-button-background-primary-hover: var(--color-accent02-800);
  --color-button-background-primary-press: var(--color-accent02-200);
	
  --color-button-border-primary-default: var(--color-accent02-700);
  --color-button-border-primary-hover: var(--color-accent02-800);
  --color-button-border-primary-press: var(--color-accent02-900);
	
  --color-button-background-secondary-default: var(--color-accent02-100);
  --color-button-background-secondary-hover: var(--color-accent02-50);
  --color-button-background-secondary-press: var(--color-accent02-200);
  --color-button-background-secondary-inverse-hover: var(--color-accent02-700);
 
		
  --color-button-border-secondary-default: var(--color-accent02-800);
  --color-button-border-secondary-hover: var(--color-accent02-300);
  --color-button-border-secondary-press: var(--color-accent02-200);
  --color-button-border-secondary-inverse: var(--color-accent02-100);
  --color-button-border-secondary-inverse-hover: var(--color-accent02-400);

 --color-button-foreground-primary-default: var(--color-accent02-50);
 --color-button-foreground-primary-hover: var(--color-accent02-100);
 --color-button-foreground-primary-press: var(--color-accent02-100);
	
 --color-button-foreground-secondary-default: var(--color-accent02-800);
 --color-button-foreground-secondary-hover: var(--color-accent02-900);
 --color-button-foreground-secondary-press: var(--color-accent02-800);
 --color-button-foreground-secondary-inverse: var(--color-accent02-50);
 --color-button-foreground-secondary-inverse-hover: var(--color-accent02-200);
	
 --color-button-foreground-tertiary-default:var(--color-accent02-800);
 --color-button-foreground-tertiary-hover:var(--color-accent02-600);
}


/* ===== BASIS-STYLES ===== */
body.dark-mode {
  background: var(--color-surface-screen);
  
}

/* ===== BARRIEREFREIHEIT: FOKUS-STIL ===== */
a:focus,
button:focus {
  outline: 2px solid var(--color-accent02-500);
  outline-offset: 2px;
}



/* ---------------------------------------
   GLOBAL ELEMENT DEFAULTS
--------------------------------------- */
/* Headings – barrierefrei abgestufte line-heights */
h1, h2, h3, h4 {
  font-family: var(--font-family-1);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary-default);
  margin-top: 0;
  margin-bottom: var(--spacing-4);
  letter-spacing: var(--font-letterspacing-closer);
  -webkit-font-smoothing: antialiased;
}


h1 {
  font-size: var(--font-size-h1);
  line-height: var(--font-lineheight-xxxl);
}

h2 {
  font-size: var(--font-size-h2);
  line-height: var(--font-lineheight-xl);
}

h3 {
  font-size: var(--font-size-h3);
  line-height: var(--font-lineheight-lg);
}

h4,
h3.projekt__title {
  font-size: var(--font-size-h4);
  line-height: var(--font-lineheight-lg);
  padding-bottom: var(--spacing-1);
  color: var(--color-text-secondary-default);
}

h5,
.title_weitere {
  font-size: var(--font-size-h4);
  font-family: var(--font-family-1);
  line-height: var(--font-lineheight-lg);
  margin-top: 0;
  font-weight: var(--font-weight-regular);
}



a {
  color: var(--color-text-link-default);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--color-text-link-hover);
}

.text-body-sm,
p.text-body-sm,
.icon-list .iconlist-heading,
.icon-list h3.iconlist-heading,
section p, .dg-intro,
 #hero ul
p {
  font-family: var(--font-family-2);
  font-size: var(--font-size-body-sm);
  line-height: var(--font-lineheight-sm);
  color: var(--color-text-primary-default);
  -webkit-font-smoothing: antialiased;
}

/* Optional: Text in Listen */
ul, ol {
  font-family: var(--font-family-2);
  font-size: var(--font-size-body);
  line-height: var(--font-lineheight-sm);
  color: var(--color-text-primary-default);
  margin-bottom: var(--spacing-4);
}

/* Links */
a {
  color: var(--color-link-primary-default);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--color-link-primary-hover);
}
/* ====================================
   TEXT VARIANTS
   Gruppiert nach Funktion
==================================== */

/* ---------- Flagline UPPERCASE ---------- */
/* Kleine, oft GROSSGESCHRIEBENE Texte über Überschriften */
.text-label,
.text-meta-heading,
.app-header .text-meta-heading,
.flagline-uppercase,
.icon-list .iconlist-heading,
.icon-list h3.iconlist-heading,
.projekt__label, .leistung-header h3 {
  font-family: var(--font-family-2);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary-default);
  text-transform: uppercase;
  letter-spacing: var(--font-letterspacing-wider);
  margin-bottom: var(--spacing-2);
  line-height: var(--font-lineheight-sm);
}


.nav-heading-1 {
    width: 100%;
    font-family: var(--font-family-2);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary-default);
      text-transform: none; /* NICHT mehr alles uppercase */
    letter-spacing: var(--font-letterspacing-wider);
    margin-bottom: var(--spacing-1);
    margin-top: -1rem;
  
  }

.nav-heading-1 .upper {
  text-transform: uppercase; /* nur der zweite Teil */
  letter-spacing: var(--font-letterspacing-wider);
}

/* ---------- label ---------- */
.mockup-caption, .text-caption,
.pill
  {
  font-family: var(--font-family-2);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary-default);
  letter-spacing: var(--font-letterspacing-wide);
  /* margin-bottom: var(--spacing-2); */
}

.text-meta {
  font-family: var(--font-family-2);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-lineheight-xs);
  color: var(--color-text-secondary-default);
}

/* ---------- body-md reg ---------- */
/* Für Einleitungen, Hero-Absätze oder Teasertexte */
.text-intro {
  font-size: var(--font-size-body-md);
  line-height: var(--font-lineheight-md);
  color: var(--color-text-primary-default);
  margin-bottom: var(--spacing-7);
}


/* ----------body_md ---------- */
/* ---------- Intros & Lead Text ---------- */
/* Für Einleitungen, Hero-Absätze oder Teasertexte */
.text-body-md,
p.text-body-md
 {

  font-family: var(--font-family-2);
  font-size: var(--font-size-body-md);
  line-height: var(--font-lineheight-md);
  color: var(--color-text-primary-default);
  margin-bottom: var(--spacing-4);
}

/* ----------body_lg ---------- */
.text-body-lg {
  font-family: var(--font-family-2);
  font-size: var(--font-size-body-lg);
  line-height: var(--font-lineheight-lg);
  color: var(--color-text-secondary-default);
  margin-bottom: var(--spacing-4);
}


/* ---------- Captions ---------- */
/* Für kleine Überschriften in Projektinfos oder Tabellen */

.text-caption,
.caption {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary-default);
  line-height: var(--font-lineheight-xs);
  /* text-transform: uppercase; */
  letter-spacing: var(--font-letterspacing-wider);
  /* margin-bottom: var(--spacing-2); */
}


.text-strong {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary-default);
}

.text-medium {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary-default);
}

.text-subtle,
.dg-intro__label, 
#hero .intro, .leistung li  {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary-default);
}
.num-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;             /* Größe des Kreises */
  height: 1.8rem;
  border-radius: 50%;
  background-color: var(--color-button-background-primary-default);
  color: var(--color-button-foreground-primary-default);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body-sm);
  flex-shrink: 0;          /* verhindert, dass der Kreis gestaucht wird */
  /* margin-right: 0.75rem;   Abstand zum Text */
}