oliverlindberg

@media (prefers-color-scheme: dark) { 
  body { 
	background-color: #333; /* Dunkler Hintergrund im Dark Mode */ 
	color: #fff; /* Helle Schriftfarbe im Dark Mode */ 
  } 
} 

oliverlindberg

@media (prefers-reduced-motion: no-preference) { 
  /* Keine spezifische Präferenz für Bewegungen, standardmäßig Animation ausführen */ 
  .element { 
	animation: slide-in 1s ease-in-out forwards; /* Führe die Animation aus */ 
  } 
} 

oliverlindberg

@media (prefers-reduced-transparency: no-preference) { 
  /* Keine Präferenz für Transparenzen, daher wenden wir die Transparenz an */ 
  .element { 
	opacity: .5; /* Transparenz anwenden */ 
  } 
} 

oliverlindberg

.teaser:has(img) { 
  /* Wenn ein Bild im Teaser vorhanden ist, ändere das Layout auf zweispaltig */ 
  grid-template-columns: 1fr 1fr; 
} 

oliverlindberg

.element { 
  width: min-content; /* Das Element wird nicht schmaler als sein Inhalt */ 
} 

oliverlindberg

.grid-container { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Automatische Anpassung der Spaltenanzahl */ 
  gap: 1.5rem; /* Abstand zwischen den Grid-Elementen */ 
} 

oliverlindberg

/*  
   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; 

oliverlindberg

<button class="button">Klick mich</button> 
 
  <p class="large-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet libero nisi.</p> 

oliverlindberg

body { 
	font-size: clamp(1rem, 2vi, 1.5rem); /* Schriftgröße skaliert zwischen 1rem und 1.5rem basierend auf der Viewport-Breite */ 

oliverlindberg

/* Definiere den Container-Typ für die Klasse .container */ 
.container { 
   container-type: inline-size;  
} 
 
/* Definiere Standard-Stile für die Klasse .card */ 
.card { 
  background: blue;  
}