body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
  
}

video.bg-video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1; /* Damit es hinter dem Inhalt bleibt */
  object-fit: cover; /* Schneidet passend zu */
  background-color:grey;
  
  
  
  
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #fff;
}

.caption span.border {
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

h1{
      margin:0 0 18px 0;
      font-family:Cinzel, serif;
      font-size:clamp(35px, 8vw, 120px);
      letter-spacing:0.02em;
      color:transparent;
      -webkit-text-stroke:1px rgba(255,255,255,0.06);
      background:black;
      -webkit-background-clip:text;
      background-clip:text;
      text-shadow:
        0 6px 30px rgba(0,0,0,0.7),
        0 0 18px rgba(139,124,255,0.06);
      transform:translateY(0);
      animation:float 6s ease-in-out infinite;
    }
	
#title {
	margin-top:1em;
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
}	


.bildcontainer1 {
  margin-bottom: 5em;
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  gap: 10px;
  padding: 10px;
}



.bildcontainer {
  width: 80vmin;    /* Breite */
  height: 80vmin;   /* Höhe (gleich wie Breite, damit Quadrat) */
  display: grid;
  grid-template-columns: repeat(8, 1fr);  /* 8 Spalten */
  grid-auto-rows: calc((80vmin - 90px) / 8);  /* Höhe pro Reihe, passend zur Breite */
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;  /* Falls was übersteht */
}





.bildcontainer .box {
  position: relative;
  overflow: hidden;
  background: #ccc;
  box-shadow: 10px 10px 20px rgba(0,0,0,0.6);
}
.bildcontainer .box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
    
}
.wide { grid-column: span 2; }
.tall { grid-row: span 2; }
.big  { grid-column: span 2; grid-row: span 2; }

.colorbox {
	margin:1em;
  display: flex;
  gap: 2px;
  padding: 5px;
  box-sizing: border-box;
  grid-column: span 1 !important;
  grid-row: span 1 !important;
}

.colorbox > div {
  flex: 1;
  height: 100%;
  border-radius: 3px;
}

#space {
	height:100vh;
}

#bildwrap {
	display:flex;
	justify-content:center;
}

#mehr {
	position:absolute;
	top:0%;
	width:100%;
	height:100%;
	color:black;
	font-size:2em;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
}

#musik {
	display:flex;
	justify-content:center;
}

.bandcamp-placeholder {
	 filter: 
  sepia(0.6)       /* Grundton Gold */
  saturate(1.5)    /* Farben verstärken */
  brightness(0.8)  /* etwas dunkler */
  contrast(0.9)    /* etwas weicher */
  hue-rotate(-20deg) /* leichte Gold-Tönung */
  grayscale(0.7);  /* blass machen (weniger bunt) */
}

.minispace{
	margin-top:2em;
}

 /* Grund-Styles */
  .privacy-details {
    max-width: 900px;
    margin: 1rem auto;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: #1a1a1a;
  }

  summary.privacy-summary {
    cursor: pointer;
    list-style: none;
    padding: 0.75rem 1rem;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    display: inline-block;
    user-select: none;
  }

  /* Entferne Standard-Pfeil in WebKit, behalte in anderen Browsern keine Marker */
  summary.privacy-summary::-webkit-details-marker { display: none; }

  /* Pfeil als dekoratives Icon (dreht sich beim Öffnen) */
  summary.privacy-summary::after {
    content: "▾";
    display: inline-block;
    margin-left: 0.6rem;
    transition: transform 0.25s ease;
  }
  details[open] > summary.privacy-summary::after {
    transform: rotate(-180deg);
  }

  /* der Inhalt */
  .privacy-content {
    margin-top: 0.75rem;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    line-height: 1.45;
  }

  .privacy-content h2 { margin-top: 1rem; font-size: 1.05rem; }
  .privacy-content h3 { margin-top: 0.75rem; font-size: 1rem; }
  .privacy-content p { margin: 0.5rem 0; }

  /* einfache "slide" Animation: begrenze max-height */
  .privacy-content-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s ease;
  }
  details[open] .privacy-content-wrapper {
    max-height: 4000px; /* großzügig, damit langer Text aufgeht */
  }

  /* Responsive */
  @media (max-width: 640px) {
    .privacy-content { font-size: 0.95rem; padding: 0.9rem; }
  }
  
  /* Gleiche Styles wie beim Datenschutz-Akkordeon */
  .impressum-details {
    max-width: 900px;
    margin: 1rem auto;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: #1a1a1a;
  }

  summary.impressum-summary {
    cursor: pointer;
    list-style: none;
    padding: 0.75rem 1rem;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    display: inline-block;
    user-select: none;
  }

  summary.impressum-summary::-webkit-details-marker { display: none; }

  summary.impressum-summary::after {
    content: "▾";
    display: inline-block;
    margin-left: 0.6rem;
    transition: transform 0.25s ease;
  }
  details[open] > summary.impressum-summary::after {
    transform: rotate(-180deg);
  }

  .impressum-content {
    margin-top: 0.75rem;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    line-height: 1.45;
  }

  .impressum-content h1 { margin-top: 0; font-size: 1.2rem; }
  .impressum-content h2 { margin-top: 1rem; font-size: 1.05rem; }
  .impressum-content p { margin: 0.5rem 0; }

  .impressum-content-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s ease;
  }
  details[open] .impressum-content-wrapper {
    max-height: 4000px;
  }

  @media (max-width: 640px) {
    .impressum-content { font-size: 0.95rem; padding: 0.9rem; }
  }
  
#rechtliches {
	margin-top:2em;
	padding:1em;
	background-color:rgba(0,0,0,0.3);
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	
}  

.color-filter-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* Klicks passieren durch */
  z-index: 0; /* Über dem Video (z-index -1), unter dem Content */
  
  /* halbtransparente goldige Farbe mit leichter Tönung */
  background-color: rgba(88, 49, 4, 0.25);  /* dunkles blasses Gold */
  
  /* Optional: für besseren Farb- & Helligkeitseffekt */
  mix-blend-mode: multiply;
}

#picker-container {
    position: fixed;
    top: 1em; right: 1em;
    background: rgba(255 255 255 / 0.9);
    padding: 1em;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    z-index: 10;
    max-width: 300px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
  label, input {
    display: block;
    margin-bottom: 0.5em;
  }