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

body {
  background:black;
  color:white;
  font-family:Arial, sans-serif;
  overflow-x:hidden;
  font-size:16pt;
}

/* ===== BURGER ===== */
.burger {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 32px;
  cursor: pointer;
  z-index: 100;
  touch-action: manipulation;
}
.burger span {
  display: block;
  height: 3px;
  background: white;
  margin: 6px 0;
}

/* ===== MENU ===== */
.menu {
  position: fixed;
  top: 0;
  right: -220px;
  width: 220px;
  height: 100svh;
  background: black;
  padding: 80px 20px;
  transition: right 0.3s ease;
  z-index: 99;
}
.menu.open {
  right: 0;
}
.menu a {
  display: block;
  color: white;
  text-decoration: none;
  margin-bottom: 20px;
}

/* ===== HERO ===== */
.hero {
  position:relative;
  height:100vh;
  height:100svh;
  overflow:hidden;
}

.bg {
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 5s ease;
}
.bg.active { opacity:1; }

/* ===== HERO HEADERS (SCROLLING) ===== */
.hero-headers {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  text-align:center;
  transform-origin:top center;
  will-change:transform, opacity;
}

.hero-headers h1 { font-size:50pt; }
.hero-headers h2 { font-size:25pt; margin-top:8px; }

.linkHeader	{ text-decoration:none;	color:white;}
/* ===== STICKY HEADERS ===== */
.sticky-headers {
  position:fixed;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  opacity:0;
  pointer-events:none;
  z-index:900;
  transition:opacity 0.2s ease;
}

.sticky-headers h1 { font-size:1.4rem; }
.sticky-headers h2 { font-size:0.9rem; }

/* ===== CONTENT ===== */
.content {
  max-width:900px;
  margin:auto;
  padding:160px 20px;
  line-height:1.6;
}

/* ===== SECOND SLIDER ===== */
.gallery {
  position:relative;
  height:100vh;
  height:100svh;
  overflow:hidden;
}

/* ===== Audio Player ===== 

/* ===== AUDIO HERO BUTTON ===== */
.audio-hero {
  position:absolute;
  top:30%;
  left:50%;
  transform:translate(-50%, -50%) scale(1);
  transform-origin:center;
  z-index:98;
  cursor:pointer;
  transition:transform 0.2s ease, opacity 0.2s ease;
}

.audio-hero img {
  width:120px;   /* groß beim Laden */
  height:auto;
  pointer-events:none;
}

/* Sticky Zielposition */
.audio-hero.sticky {
  position:fixed;
  top:-10px;
  left:-10px;
  transform:translate(0,0) scale(0.35);
}


/* ===== Slide Show mit Zoom/Bewegung ===== */
.bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1) translate(0,0);
  transition: opacity 1.2s ease, transform 5s ease;
}

.bg-layer.active {
  opacity: 1;
}

/* Text in Slideshow */
.slide-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #dfdfdf;
  font-size: 3rem;
  text-align: center;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.slide-text.active {
  opacity: 1;
}
.slide-text-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #dfdfdf;
  font-size: 3rem;
  text-align: center;
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
  pointer-events: none;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}

.slide-text-layer.active {
  opacity: 1;
}

.references p {	padding:8pt; font-size:12pt; }
#termine p {	padding:8pt; font-size:12pt; }
#termine a {	text-decoration:none; color:#dfdfdf}
#termine b {	font-size:14pt; }
.footer	{	width:100%; text-align:center; font-size:10pt; padding:10pt;}

.janBorderBox {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items:center;
		justify-content: center;
		border:5pt solid black;
		border-radius:5pt;
		margin-top:-40pt;
		width:250pt;
		height:400pt;
		background-color:white;
		color:black;
}		
.janHeader {
		font-size:1.2em; font-weight:bold; margin-top:10pt;
		}
.janText {
		font-size:0.8em; font-weight:normal; margin-top:10pt;
		}
.janLink {
		 text-decoration:none; color:black;
		}
.janSubheader {
		font-size:1em; font-weight:normal; margin-top:10pt;
		}
.janKerze	{
		height:130pt; left:0pt; bottom:-10pt; border: 0pt solid black;
		}
.janImage	{
		height:130pt;
		}

/* ===== MOBILE ===== */
@media (max-width:768px) {
  .hero-headers h1 { font-size:2.2rem; }
  .hero-headers h2 { font-size:1.3rem; }
  body	{	font-size:12pt;	}
  .slide-text-layer	{ font-size:2.2rem; }
  .references p {	padding:6pt; font-size:10pt; }
}