// Einfache Variablen ohne Module
$brand-primary: #4a5d4e;
$bg-cream: #fdfcf8;

// Mixins ohne 'map-get' (manuelle Abfrage)
@mixin respond-to-medium {
  @media (min-width: 768px) { @content; }
}

@mixin landscape-mobile {
  @media screen and (max-width: 932px) and (orientation: landscape) { @content; }
}

// Basis
body {
  background-color: $bg-cream;
  color: #1a1a1a;
  margin: 0;
}

// Blog Grid
.blog-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr; // 1 Spalte Standard

  @include landscape-mobile {
    grid-template-columns: 1fr 1fr; // 2 Spalten Querformat
  }

  @include respond-to-medium {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}