RWD_7

/*  
   Definiere globale CSS-Variablen im :root-Selektor, um die Basis-Schriftgröße und Größen des 8-Punkt-Rasters festzulegen.  
   Diese Variablen können dann in verschiedenen Teilen des Stylesheets wiederverwendet werden. 
*/ 
:root { 
  /* Definiere die Basis-Schriftgröße */ 
  --base-font-size: 1em; 
   
  /* Definiere die Größen des 8-Punkt-Rasters in em */ 
  --spacing-0: 0rem; 
  --spacing-1: 0.25em; 
  --spacing-2: 0.5em; 
  --spacing-3: 0.75em; 
  --spacing-4: 1em; 
  --spacing-5: 1.25em; 
  --spacing-6: 1.5em; 
  --spacing-7: 1.75em; 
  --spacing-8: 2em; 
} 
 
/* Setze die Schriftgröße des body-Tags zwischen 1em und 1.5em, skaliert basierend auf der Vierport Inline Size (vi) */ 
body { 
  font-size: clamp(1em, 2vi, 1.5em); 
} 
 
/* Beispielstil für einen Button */ 
.button { 
  display: inline-block; 
  padding: var(--spacing-4) var(--spacing-6); /* Verwende das 8-Punkt-Raster für den Innenabstand */ 
  font-size: var(--base-font-size); /* Verwende die Basis-Schriftgröße */ 
  background-color: #007bff; /* Standard-Hintergrundfarbe */ 
  color: #ffffff; /* Standard-Schriftfarbe */ 
  border: none; 
  border-radius: 4px; 
} 
 
/* Beispielstil für einen größeren Absatz mit mehr Abstand */ 
.large-paragraph { 
  margin-block-end: var(--spacing-8); /* Verwende das 8-Punkt-Raster für den Abstand zum nächsten Element */ 
}