.site-footer {
 background: linear-gradient(90deg, #E81766, #052E4A);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  text-align: center;
  padding: 1em 0;
  font-size: 0.9em;
}
.site-footer .footer-content {
  max-width: 800px;
  margin: 0 auto;
}

/* Buttons zentriert direkt unter dem Bild */
.lb-outerContainer {
  position: relative;           /* Container für absolute Position */
  padding-bottom: 60px;         /* Platz für die Buttons schaffen */
}
.lb-custom-buttons {
  position: absolute;
  bottom: 0;                    /* ganz unten im Container */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1em;
  white-space: nowrap;
}
.lb-custom-buttons a,
.lb-custom-buttons button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #E81766, #052E4A);
 
  color: #fff;
  padding: 0.6em 1.2em;
  border-radius: .7em;
  text-decoration: none;
  border: 2px solid #fff;
  font-weight: bold;
  cursor: pointer;
  font-size: 1em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: background 0.2s ease;
  white-space: nowrap;
}
.lb-custom-buttons a:hover,
.lb-custom-buttons button:hover {
  background: #3378F9;
  color: #fff;
}
.lb-outerContainer {
  position: relative;
  padding-bottom: 0;
  background-color: transparent; /* optional */
}


html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  font-family: system-ui, Arial, sans-serif;
  color: #fff;
}
body {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2vw;
  background: linear-gradient(90deg, #052E4A, #E81766);
  width: 100%;
}
.event-header, .event-details {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    padding: 1.2em 0.8em;
    margin-top: 1.1em;
    margin-bottom: 1.1em;
    width: 100%;
    box-sizing: border-box;
}
.bigbtn {
            display: inline-block;
            width: 40%;
            max-width: 100%;
            background: linear-gradient(90deg, #E81766, #052E4A);
            color: #fff;
            border: 2px solid #fff;
            border-radius: .7em;
            font-size: 1.08em;
			font-weight: bold;
            padding: 0.65em 0;
            margin-bottom: 0.2em;
            cursor: pointer;
            transition: background 0.18s;
            box-shadow: 0 2px 6px rgba(24,169,90,0.08);
            box-sizing: border-box;
            overflow-x: hidden;
            text-overflow: ellipsis;
            margin-bottom: 5px;
            text-decoration: none;
        }
        .bigbtn:hover {
            background: #3378F9;
        }

h1 {
    font-size: 2em;
    margin-bottom: 0.2em;
    word-break: break-word;
	color: #fff;
}
#uploadForm {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5em;
    margin-bottom: 1.5em;
    width: 100%;
    box-sizing: border-box;
}
#uploadForm button {
    width: 100%;
    max-width: 100%;
    background: linear-gradient(90deg, #A9CD2E, #FFFF00);
    color: #000;
    border: none;
    border-radius: 1.2em;
    font-size: 1.08em;
	font-weight: bold;
    padding: 0.95em 0;
    margin-bottom: 0.2em;
    cursor: pointer;
    transition: background 0.18s;
    box-shadow: 0 2px 6px rgba(24,169,90,0.08);
    box-sizing: border-box;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
#uploadForm button:last-child {
    margin-bottom: 0.1em;
}
#uploadForm button:hover {
    background: #3378F9;
}
#progressContainer {
    display: none;
    width: 100%;
    max-width: 100%;
    background: #eee;
    border-radius: 1em;
    margin: 0.5em 0 1em 0;
    overflow: hidden;
    height: 1.6em;
    box-shadow: 0 2px 6px rgba(24,169,90,0.04);
    box-sizing: border-box;
}
#progressBar {
    width: 0;
    height: 100%;
    background: #18a95a;
    text-align: center;
    color: #fff;
    font-size: 1em;
    line-height: 1.6em;
    border-radius: 1em 0 0 1em;
    transition: width 0.2s;
    white-space: nowrap;
    box-sizing: border-box;
}
#uploadMessage {
    min-height: 1.3em;
    font-weight: 500;
    font-size: 1em;
    margin-bottom: 0.4em;
    text-align: center;
    word-break: break-word;
}
form {
    margin-bottom: 1.1em;
    width: 100%;
    box-sizing: border-box;
}
input[type="text"], input[type="email"] {
    width: 100%;
    font-size: 1em;
    padding: 0.7em 1em;
    margin-top: 0.2em;
    border: 1px solid #bbb;
    border-radius: 1em;
    background: #f9f9f9;
    margin-bottom: 0.6em;
    box-sizing: border-box;
}
label {
    display: block;
    margin-bottom: 0.6em;
}
@media (min-width: 640px) {
    #uploadForm {
        flex-direction: row;
        gap: 1.1em;
        align-items: center;
    }
    #uploadForm button {
        width: 48%;
        min-width: 120px;
        max-width: 100%;
        font-size: 1.11em;
        padding: 1em 0;
    }
}
@media (max-width: 600px) {
    body {
        max-width: 100vw;
        width: 100vw;
        padding: 0 2vw;
    }
    .event-header, .event-details {
        padding: 0.8em 0.4em;
    }
    h1 { font-size: 1.13em; }
    #progressContainer { height: 1.2em; }
    #progressBar { font-size: 0.9em; line-height: 1.2em; }
}
/* Fixiertes Menü (bottom-nav) */
.bottom-nav {
  position: fixed; /* stay bottom */
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #3378f9;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  touch-action: none; /* disable swipe */
  overscroll-behavior: none; /* prevent bounce */
  overflow: hidden; /* no scroll */
}
.bottom-nav button {
  background: none;
  border: none;
  color: #000;
  text-align: center;
  cursor: pointer;
  flex-grow: 1;
  padding: 10px 0;
}
.bottom-nav button i {
  display: block;
  font-size: 20px;
}
.bottom-nav button span {
  font-size: 14px;
}
.bottom-nav button.active {
  color: #000;
}
/* Kategorie-Header */
    .category-header {
      max-width: 800px;
      margin: 0 auto;
      background: linear-gradient(90deg, #E81766, #052E4A);
	  border: 2px solid #fff;
      color: #fff;
      text-align: center;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
	  margin-bottom: 20px;
    }
	/* Kategorie-Header */
    .category-header-1 {
      max-width: 400px;
      margin: 0 auto;
      background: linear-gradient(90deg, #E81766, #052E4A);
      color: #fff;
	  border: 2px solid #fff;
      text-align: center;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
	  margin-bottom: 20px;
	  border-radius: 1.2em;
    }
	 /* Kategorie-Header */
    .cat-header {
	  width: 100%;	
      max-width: 800px;
	  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
	  border-radius: 8px;
	  border: 2px solid #fff;
      margin: 0 auto;
       background: linear-gradient(90deg, #A9CD2E, #FFFF00);
      color: #000;
      text-align: center;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
    }
	.app-header {
  background: #002b5b;
  padding: 1.5em 1em;
  display: flex;
  gap: 1em;
  border: 2px solid #fff;
  align-items: center;
  border-radius: 0 0 1.5em 1.5em;
  color: #fff;
}
.app-avatar {
  width: 75px;
  height: 75px;
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
}
.app-header-text h1 {
  margin: 0px 0px -5px 0px;
  font-size: 2.3em;
}
.app-header-text p {
  margin: 0.2em 0 0;
  font-size: 0.9em;
}
.app-actions {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  margin: 1em 0;
}
.btn {
  width: 100%;
  padding: 0.9em;
  font-size: 1em;
  font-weight: bold;
  border: none;
  border-radius: 1.2em;
  cursor: pointer;
}
.btn-pink { width: 75%; background: linear-gradient(90deg, #E81766, #052E4A); color: #fff;border: 2px solid #fff; }
.btn-blue { width: 75%; background: linear-gradient(90deg, #052E4A, #E81766); color: #fff;border: 2px solid #fff; }
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4em;
  margin: 1em 0;
  
}
.gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.5em;
  cursor: pointer;
}
.grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 1.2em;
            margin-bottom: 60px;
			padding: 0 1em;       /* <- hier */
			justify-items: center;/* zentriert die einzelnen Items */
        }
        .image-item {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 6px #0002;
            padding: 10px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .thumb {
            width: 100%;
            max-width: 160px;
            height: 160px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 5px;
            background: #eee;
        }
        @media (max-width: 600px) {
    body {
        padding: 0 2vw 1em 2vw;
        max-width: 100%;
    }
}

            .grid { grid-template-columns: repeat(2, 1fr); gap: 0.6em;}
            .header-sticky { padding: 0.7em 0 0.4em 0; margin-bottom: 0.5em;}
        }
        /* Lightbox-Style */
        .lightbox-bg {
            position: fixed; left:0; top:0; right:0; bottom:0;
            background: rgba(0,0,0,0.85);
            display: none; align-items: center; justify-content: center; z-index: 1001;
        }
        .lightbox-bg.active { display: flex; }
        .lightbox-img { max-width: 96vw; max-height: 86vh; border-radius: 9px; box-shadow: 0 4px 22px #0008; }
        .lightbox-close {
            position: absolute; top: 1.4em; right: 2em; font-size: 2em; color: #fff; cursor: pointer; font-weight: bold; z-index:1010;
        }
    /* Caption‑Area transparent machen */
.lb-dataContainer,
.lb-data {
  background: transparent !important;
}
/* Optional: auch das Padding entfernen */
.lb-data {
  padding: 0 !important;
}