/* Farben */
$primary-color: #0073b7;
$secondary-color: #ffffff;

/* Typografie */
body {
  font-family: sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

h1, h2, h3 {
  font-weight: bold;
}

/* Header */
header {
  background-color: $primary-color;
  color: $secondary-color;
  padding: 20px;
  text-align: center;
}

h1 {
  margin-top: 0;
}

p {
  margin-bottom: 10px;
}

/* Main */
main {
  padding: 20px;
}

/* Kontakt */
.kontakt {
  border: 1px solid #ddd;
  padding: 20px;
}

.kontakt ul {
  list-style: none;
  padding: 0;
}

.kontakt li {
  margin-bottom: 10px;
}

/* Über mich */
.ueber-mich {
  margin-top: 20px;
}

/* Leistungen */
.leistungen {
  margin-top: 20px;
}

.leistungen ul {
  list-style: none;
  padding: 0;
}

.leistungen li {
  margin-bottom: 10px;
}

/* Footer */
footer {
  background-color: $primary-color;
  color: $secondary-color;
  padding: 20px;
  text-align: center;
}

/* Moderne CSS Techniken */

/* Flexbox */
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* CSS Grid */
.wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 20px;
}

/* Animationen */
button {
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #FFD700;
}

/* Media Queries */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

/* Responsive Bilder */
img {
  max-width: 100%;
}

/* Weitere Anpassungen */

/* Hier fügst du deine eigenen Anpassungen und Styles hinzu */