:root{
  --bg: #f2f4f7; /* Kühleres, helles Grau */
  --card: #ffffff;
  --accent: #1f70c7; /* Professionelles, tiefes Blau */
  --muted: #6b7280;
  --maxw: 1200px;
  --text-dark: #1a202c; /* Dunklere Haupttextfarbe */
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  background:var(--bg);
  color:var(--text-dark); /* Neue dunkle Textfarbe */
  line-height:1.6;
}
.container{max-width:var(--maxw);margin:0 auto;padding:28px}
.header{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  font-size: 1.5em; /* Logo etwas größer */
  color: var(--accent); /* Logo-Text in Akzentfarbe */
}
nav a{
  margin-left:18px; /* Abstand leicht erhöhen */
  color:var(--muted);
  text-decoration:none;
  transition: color 0.3s ease; /* Übergang für Hover-Effekt */
}
nav a:hover {
  color: var(--accent); /* Akzentfarbe beim Hover */
}
.hero{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center;padding-top:18px}
.btn{
  padding:12px 20px; /* Padding erhöhen für soliden Look */
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  transition: background 0.3s ease;
  border: 2px solid var(--accent); /* Für ein solides Gefühl */
}
.btn:hover {
  background: #145aa8; /* Dunkler beim Hover */
}
.card{
  background:var(--card);
  padding:24px; /* Innenabstand erhöhen */
  border-radius:12px;
  box-shadow: 0 8px 25px rgba(25, 25, 25, 0.08); /* Professionellerer Schatten */
  border-top: 4px solid var(--accent); /* Akzentlinie oben für Seriosität */
}
.section{margin-top:40px} /* Abstand zwischen Sektionen erhöhen */
.contact-form input,
.contact-form textarea{
  width:100%;
  padding:12px; /* Padding erhöhen */
  border:1px solid #d1d5db; /* Seriöserer Grauton für Border */
  border-radius:8px;
  margin-top:8px;
  transition: border-color 0.3s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent); /* Rahmen wird zur Akzentfarbe beim Fokus */
  box-shadow: 0 0 0 1px var(--accent);
}
footer{margin-top:60px;color:var(--muted);font-size:14px;padding-bottom:28px;text-align: center;border-top: 1px solid #e5e7eb;}
@media(max-width:880px){.hero{grid-template-columns:1fr}nav{margin-top:12px}}