/* RESET */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

/* HEADER (dunkel oben) */

.header{
  color: rgb(0, 0, 0);
}

.uebermich-header {
 text-align: center;
 padding: 120px 20px 80px;
 padding-top: 145px;
 padding-bottom: 122px;
 background-image: url("images/img_yellow.jpg");
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 background-attachment: fixed;
}
.uebermich-header h1 {
 font-size: 48px;
 letter-spacing: 2px;
}
/* STECKBRIEF CONTAINER */

.steckbrief-container {
  max-width: 800px;
  margin: 120px auto 60px;
  padding: 20px;
  position: relative;

}

/* Bilder rechts positionieren */
.floating-bilder {
  position: absolute;
  top: -90px;
  right: -70px; /* 👈 rechts statt links */
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 2;

}

/* größere Bilder */

.floating-bilder img {
  width: 150px;   /* 👈 größer */
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  animation: float 10s ease-in-out infinite;
}

/* leicht versetzt */

.floating-bilder img:nth-child(2) {
 margin-left: -90px;   /* weiter nach links */
 z-index: 3;
}


.floating-bilder img:nth-child(3) {
  margin-right: 10px;
  animation-delay: 3s;
}

/* Schwebe-Animation */

@keyframes float {
 0%   { transform: translate(0px, 0px); }
 20%  { transform: translate(-3px, -4px); }
 40%  { transform: translate(2px, 3px); }
 60%  { transform: translate(-2px, 4px); }
 80%  { transform: translate(3px, -2px); }
 100% { transform: translate(0px, 0px); }
}
 
 

/* TABELLE */
.steckbrief {
 width: 100%;
 border-collapse: collapse;
 background-color: white;
 box-shadow: 0 0 15px rgba(0,0,0,0.05);
}
/* BILD */
.steckbrief .bild {
 text-align: center;
 padding: 30px;
}
.steckbrief img {
 width: 180px;
 height: 180px;
 border-radius: 50%;
 object-fit: cover;
 border: 4px solid #eee;
}
/* ZELLEN */
.steckbrief th,
.steckbrief td {
 padding: 15px;
 border-bottom: 1px solid #ddd;
}
.steckbrief th {
 width: 35%;
 background-color: #f4f4f4;
 text-align: left;
 color: #333;
 font-family: 'Playfair Display', serif;
 font-weight: 600;
 font-size: 20px;


}
.steckbrief td {
 color: #444;
}
/* HOVER */
.steckbrief tr:hover {
 background-color: #f9f9f9;
}

/* RESPONSIVE */
@media (max-width: 600px) {
 .steckbrief-container {
   padding: 10px;
 }
 .steckbrief th,
 .steckbrief td {
   font-size: 14px;
 }
}