body { font-family: 'Georgia', serif; margin:0; padding:0; line-height:1.6; background:#fafafa; color:#222;}
header { background:#f5f5f5; color:#333; padding:3rem; text-align:center; border-bottom:3px solid #ddd;}
nav { background:#fff; border-bottom:1px solid #ddd; display:flex; justify-content:center; flex-wrap:wrap; gap:2rem; padding:1rem;}
nav a { color:#333; text-decoration:none; font-weight:bold;}
nav a:hover { color:#000; text-decoration:underline;}
.section { padding:3rem 2rem; max-width:1000px; margin:auto;}
h1,h2 { margin-bottom:1rem; font-family:'Georgia', serif;}
footer { background:#f5f5f5; color:#666; padding:2rem; text-align:center; border-top:3px solid #ddd;}
.gallery {display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:15px;}
.gallery img {width:100%; border-radius:5px; cursor:pointer; transition:transform 0.3s;}
.gallery img:hover {transform:scale(1.05);}
.lightbox {display:none; position:fixed; z-index:9999; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); justify-content:center; align-items:center;}
.lightbox:target {display:flex;}
.lightbox img {max-width:90%; max-height:80%; border-radius:5px;}
.lightbox .close {position:absolute; top:20px; right:30px; font-size:2rem; color:white; text-decoration:none;}

.lightbox:target {display:flex;}
.lightbox img {max-width:90%; max-height:80%; border-radius:10px; border:3px solid #ff4081;}
.lightbox .close {position:absolute; top:20px; right:30px; font-size:2rem; color:#ff4081; text-decoration:none;}


/* Lightbox */
.lightbox {display:none; position:fixed; z-index:9999; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); justify-content:center; align-items:center;}
.lightbox:target {display:flex;}
.lightbox img {max-width:90%; max-height:80%; border-radius:5px;}
.lightbox .close {position:absolute; top:20px; right:30px; font-size:2rem; color:white; text-decoration:none;}

.responsive-img {
  width: 100%;       /* nimmt immer die volle Breite des Containers */
  max-width: 800px;  /* wird nie größer als 800px */
  height: auto;      /* behält das Seitenverhältnis */
  display: block;    /* kein kleiner Leerraum unten */
  margin: 0 auto;    /* zentriert im Container */
}

.responsive-img {
  width: 100%;
  max-width: 800px;
  height: auto;
  display: block;
  margin: 0 auto 1rem auto;
}

.responsive-img + ul {
  margin: 0 auto 2rem auto;
  padding-left: 2rem;   /* Einrückung */
  max-width: 800px;    /* gleiche Breite wie das Bild */
  list-style-type: disc;
}

.video-container {
  position: relative;
  width: 100%;
  max-width: 800px;    /* optional: maximale Breite */
  margin: 0 auto 2rem; /* zentriert + Abstand unten */
  padding-bottom: 56.25%; /* 16:9 Verhältnis (315/560 = 0.5625) */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}