/* --- Polaroid --- */

.polaroid {
  background: #fff;
  padding: 10px 10px 25px; /* unten mehr Platz für Beschriftung */
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  display: inline-block;
  text-align: center;
  margin: 20px;
  transform: rotate(-2deg); /* leichte Schräglage für Look */
}

.polaroid img {
  max-width: 100%;
  height: auto;
  display: block;
}

.polaroid .caption {
  font-family: "Courier New", monospace;
  font-size: 14px;
  margin-top: 8px;
  color: #333;
}

.polaroidst {
  background: #fff;
  padding: 10px 10px 25px; /* unten mehr Platz für Beschriftung */
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  display: inline-block;
  text-align: center;
  margin: 20px;
}

.polaroidst img {
  max-width: 100%;
  height: auto;
  display: block;
}

.polaroidst .caption {
  font-family: "Courier New", monospace;
  font-size: 14px;
  margin-top: 8px;
  color: #333;
}


/* --- Stück Titelbild --- */

.titelbild img {
  max-width: 100%;
  height: auto;
  display: block;
}

.titelbild .caption {
  font-family: "Courier New", monospace;
  font-size: 14px;
  margin-top: 8px;
  color: #333;
}

/* --- Tilt Effekt --- */
.img-tilt {
  display: inline-block;
  transition: transform 0.3s ease;
}

.img-tilt:hover {
  transform: rotate(-3deg) scale(1.05); /* kleine Drehung + leichte Vergrößerung */
}

/* --- Mitglieder Liste --- */
.mlistitem{
/* ORIGINAL
  border-radius: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);  
*/
/*
  background: linear-gradient(135deg, #20e2d7, #0093e9);
  color: white;
  padding: 2rem;
  border-radius: 10px;
*/
  background: linear-gradient(0deg, #f0f0f0, #fffefe);
  /*background: #f0f0f0;      /* Glasige Transparenz */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);

  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, 0.3);

  /* 3D-Effekt durch Schatten innen + außen */
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.6),   /* oberer Lichtreflex innen */
    inset 0 -2px 4px rgba(0, 0, 0, 0.2),        /* unterer Schatten innen */
    0 4px 8px rgba(0, 0, 0, 0.25),              /* äußerer Schatten */
    0 0 20px rgba(255, 255, 255, 0.05);         /* leichter Glow */

  padding: 2rem;
  color: #fff;  /* Text gut lesbar */
}

/* --- Quote --- */
.quote-box blockquote {
  position: relative;
  font-size: 1.5rem;
  font-style: italic;
  padding-left: 20px;
}

.quote-box blockquote::before {
  content: "“";
  font-size: 4rem;
  position: absolute;
  left: -10px;
  top: -30px;
  color: #aaaaaa;
}

.quote-box figcaption {
  text-align: right;
  font-size: 1rem;
  color: #666;
  margin-top: 10px;
}