body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
  background: linear-gradient(135deg, #1e3c72, #2a5298, #ffffff);
  color: #333;
}

.header {
  margin-top: 40px;
}

.headline {
  font-size: 3rem;
  color: #fff;
  margin-bottom: 20px;
  animation: fadeInDown 2s ease-out;
}

.photos {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.avatar {
  width: 180px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.fade-in {
  opacity: 0;
  animation: fadeIn 2s forwards;
}

.contact {
  margin: 40px auto;
  max-width: 400px;
  text-align: left;
  background: rgba(255,255,255,0.9);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.slide-up {
  opacity: 0;
  transform: translateY(30px);
  animation: slideUp 1.5s forwards;
  animation-delay: 1s;
}

.form-row {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  color: #555;
}

input, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

button {
  background: #1e3c72;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
}

button:hover {
  background: #2a5298;
}

footer {
  margin-top: 40px;
  color: #fff;
}

/* Animationen */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hintergrund, Überschrift, Fotos, Formulare wie zuvor */

button {
  background: #1e3c72;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

button:hover {
  background: #2a5298;
  transform: scale(1.05);
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(30,60,114,0.7); }
  70% { box-shadow: 0 0 0 10px rgba(30,60,114,0); }
  100% { box-shadow: 0 0 0 0 rgba(30,60,114,0); }
}

/* Strichmännchen läuft quer */
.stickman {
  position: fixed;
  bottom: 60px; /* etwas höher, damit es auf dem Gehweg läuft */
  left: -60px;
  width: 50px;
  height: 100px;
  animation: walkAcross 25s linear infinite; /* langsamer */
}

@keyframes walkAcross {
  from { left: -60px; }
  to { left: 100%; }
}

/* Arme bewegen */
#arm-left {
  transform-origin: 25px 35px;
  animation: waveLeft 1s ease-in-out infinite alternate;
}
#arm-right {
  transform-origin: 25px 35px;
  animation: waveRight 1s ease-in-out infinite alternate;
}
@keyframes waveLeft {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-25deg); }
}
@keyframes waveRight {
  from { transform: rotate(0deg); }
  to   { transform: rotate(25deg); }
}

/* Beine bewegen */
#leg-left {
  transform-origin: 25px 60px;
  animation: stepLeft 1s ease-in-out infinite alternate;
}
#leg-right {
  transform-origin: 25px 60px;
  animation: stepRight 1s ease-in-out infinite alternate;
}
@keyframes stepLeft {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-25deg); }
}
@keyframes stepRight {
  from { transform: rotate(0deg); }
  to   { transform: rotate(25deg); }
}

/* Gehweg */
.sidewalk {
  position: fixed;
  bottom: 20px;
  left: 0;
  width: 100%;
  height: 40px;
  background: repeating-linear-gradient(
    to right,
    #ccc,
    #ccc 40px,
    #bbb 40px,
    #bbb 80px
  );
  border-top: 3px solid #999;
  box-shadow: inset 0 5px 10px rgba(0,0,0,0.3);
}

/* Schatten unter dem Strichmännchen */
.stickman svg {
  filter: drop-shadow(0px 5px 3px rgba(0,0,0,0.5));
}