/* ====== Basics ====== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial;
  color: #111827;
}
.page { 
    min-height: 100%; 
    display: flex; 
    flex-direction: column; 
}
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
/* Topbar: volle Breite + Flex */
.topbar {
  background: #1f2937;
  color: #e5e7eb;
}

/* Container in der Topbar NICHT zentrieren, sondern vollbreit */
.topbar .container {
  max-width: none;      /* wichtig: nicht auf 1100px begrenzen */
  width: 100%;
  margin: 0;
  padding: 12px 20px;
  display: flex;
  align-items: center;
}

/* Brand nach links, Menü wird nach rechts „geschoben“ */
.topbar .brand { margin-right: auto; }

/* Menü rechts ausrichten + Abstände über gap (nicht Padding 60px) */
.topbar .menu {
  margin-left: auto;    /* alternativ zur brand-Regel */
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.topbar .menu a {
  color: #e5e7eb;
  text-decoration: none;
  font-size: 14px;
  padding: 6px 10px;    /* kleines Klickziel statt 60px */
}

.topbar .menu a:hover { text-decoration: underline; }

.card {
  background: #ffffff;
  margin: 24px auto 0;
 
}
.hero {
  display: grid;
  grid-template-columns: 500px 1fr;  /* Bild links, Text rechts */
  gap: 48px;
  align-items: center;
  padding: 36px 0 60px;
}
.avatar img {
  width: 250px; height: 250px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #cfcfcf;
  display: block;
}
.intro {
  line-height: 1.6;
  color: #374151;
  margin: 0;
  font-size: larger;
}

/* ====== Footer / Kontakt ====== */
.footer {
  margin-top: auto;
  background: #1f2937;
  color: #e5e7eb;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;    /* links Formular, rechts Infos */
  gap: 200px;
  padding: 42px 0 48px;
}

/* Formular */
.contact-form h2 {
  font-size: 30px;
  letter-spacing: .06em;
  margin: 0 0 12px;
}
form { display: grid; gap: 12px; max-width: 420px; }
input, textarea, button {
  border: none;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
}
textarea { min-height: 180px; resize: vertical; }
button {
  width: 110px;
  background: #0b0b0b;
  color: #fff;
  cursor: pointer;
  transition: transform .06s ease, filter .2s ease;
}
button:hover { filter: brightness(1.1); }
button:active { transform: translateY(1px); }

/* Kontaktinfos rechts */
.contact-info h3 {
  font-size: 30px;
  margin: 0 0 8px;
  letter-spacing: .06em;
}
.contact-info p { margin: 0 0 18px; color: #d1d5db; font-size: 20px; }

/* Social Icons (ohne externe Libraries) */
.social { display: flex; gap: 14px; align-items: center; }
.icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #334155;
  color: #e5e7eb;
  text-decoration: none;
  font-weight: 700;
  user-select: none;
  transition: transform .06s ease, filter .2s ease;
}
.icon:hover { filter: brightness(1.15); }
.icon:active { transform: translateY(1px); }
.icon.in { font-size: 13px; }   /* „in“ etwas kleiner aussehen lassen */
.icon.ig { font-size: 16px; }
.icon.gh { font-size: 18px; }

/* ====== Responsive ====== */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; text-align: left; }
  .avatar { order: 0; }
  .contact { grid-template-columns: 1fr; gap: 36px; }
  form { max-width: 100%; }
}