:root {

  --bg-color: #f5f5f5;

  --card-bg: #ffffff;

  --text-color: #222222;

  --accent-color: #0077cc;

  --accent-color-dark: #005999;

  --border-color: #dddddd;

  --font-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",

               sans-serif;

}

\*,

\*::before,

\*::after {

  box-sizing: border-box;

}

html {

  font-size: 16px;

}

body {

  margin: 0;

  font-family: var(--font-base);

  color: var(--text-color);

  background-color: var(--bg-color);

  line-height: 1.5;

}

/\* Layout \*/

.container {

  width: 100%;

  max-width: 960px;

  margin: 0 auto;

  padding: 0 1rem;

}

/\* Header / Navigation \*/

.site-header {

  background-color: #ffffff;

  border-bottom: 1px solid var(--border-color);

}

.site-header .container {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  padding: 0.75rem 1rem;

}

.site-title {

  font-size: 1.25rem;

  margin: 0;

}

.site-nav {

  display: flex;

  gap: 0.75rem;

}

.site-nav a {

  text-decoration: none;

  color: var(--text-color);

  padding: 0.25rem 0.5rem;

  border-radius: 4px;

  font-size: 0.95rem;

}

.site-nav a:hover {

  background-color: var(--border-color);

}

.site-nav a.active {

  color: #ffffff;

  background-color: var(--accent-color);

}

/\* Karten / Inhalte \*/

main {

  padding: 1.5rem 0 2.5rem;

}

.card {

  background-color: var(--card-bg);

  border-radius: 6px;

  border: 1px solid var(--border-color);

  padding: 1.5rem;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);

}

/\* Formular \*/

.contact-form {

  display: flex;

  flex-direction: column;

  gap: 1rem;

}

.form-row {

  display: flex;

  flex-direction: column;

}

.form-row label {

  font-size: 0.9rem;

  margin-bottom: 0.25rem;

}

.form-row input {

  padding: 0.5rem 0.6rem;

  border-radius: 4px;

  border: 1px solid var(--border-color);

  font-size: 1rem;

}

.form-row input:focus {

  outline: none;

  border-color: var(--accent-color);

  box-shadow: 0 0 0 2px rgba(0, 119, 204, 0.15);

}

/\* Buttons \*/

.btn-primary {

  align-self: flex-start;

  padding: 0.6rem 1.2rem;

  border-radius: 4px;

  border: none;

  background-color: var(--accent-color);

  color: #ffffff;

  font-size: 0.95rem;

  cursor: pointer;

  transition: background-color 0.15s ease-in-out;

}

.btn-primary:hover {

  background-color: var(--accent-color-dark);

}

/\* Footer \*/

.site-footer {

  border-top: 1px solid var(--border-color);

  background-color: #ffffff;

}

.site-footer .container {

  padding: 0.75rem 1rem;

  text-align: center;

  font-size: 0.85rem;

  color: #666666;

}

/\* Responsive Anpassungen \*/

@media (max-width: 600px) {

  .site-header .container {

    flex-direction: column;

    align-items: flex-start;

    gap: 0.5rem;

  }

  .site-nav {

    width: 100%;

    justify-content: flex-start;

    flex-wrap: wrap;

  }

  .site-nav a {

    margin-right: 0.25rem;

    margin-bottom: 0.25rem;

  }

  .card {

    padding: 1.25rem;

  }

}

@media (min-width: 768px) {

  main {

    padding-top: 2rem;

  }

  .card {

    padding: 2rem;

  }

}