:root{
  --magenta:#e20074;
  --magenta2:#b5005c;
  --ink:#17121a;
  --white:#fff;
  --green:#12a150;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  font-family:Inter,Arial,sans-serif;
}

body{
  background:#e20074;
  color:#fff;
}

/* WALL */

.wall-page{
  overflow:hidden;
}

.wall-page:before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 8% 28%,rgba(255,255,255,.16) 0 2px,transparent 3px) 0 0/18px 18px,
    radial-gradient(circle at 92% 38%,rgba(255,255,255,.12) 0 2px,transparent 3px) 0 0/18px 18px,
    linear-gradient(145deg,#920046 0%,#e20074 50%,#f50083 100%);
  z-index:-3;
}

.wall-page:after{
  content:"";
  position:fixed;
  right:-12vw;
  top:8vh;
  width:55vw;
  height:55vw;
  border-radius:50%;
  background:rgba(255,255,255,.10);
  z-index:-2;
}

.wall{
  width:100vw;
  height:100vh;
  padding:22px 34px 36px;
  overflow:hidden;
  position:relative;
}

.wall-header{
  height:178px;
  display:grid;
  grid-template-columns:210px 1fr 190px;
  align-items:center;
  gap:20px;
}

.logo-slot{
  width:190px;
  height:150px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.main-logo{
  max-width:170px;
  max-height:145px;
  object-fit:contain;
  display:block;
  border:0;
  box-shadow:none;
}

.hero{
  text-align:center;
  min-width:0;
}

.hero h1{
  font-size:clamp(34px,3.9vw,72px);
  line-height:.96;
  letter-spacing:-.055em;
  margin:0;
  font-weight:900;
  text-shadow:0 14px 38px rgba(0,0,0,.18);
}

.divider{
  width:72px;
  height:5px;
  background:#fff;
  border-radius:99px;
  margin:19px auto 13px;
}

.subtitle{
  font-size:clamp(17px,1.35vw,26px);
  font-weight:800;
  margin:0;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.qr-card{
  justify-self:end;
  width:178px;
  background:rgba(255,255,255,.96);
  color:var(--ink);
  border-radius:20px;
  padding:12px;
  text-align:center;
  box-shadow:0 24px 60px rgba(50,0,25,.35);
}

.qr-card strong{
  display:block;
  color:var(--magenta);
  font-size:23px;
  margin-bottom:8px;
  line-height:1;
  font-weight:900;
  white-space:nowrap;
}

.qr-card img{
  display:block;
  width:132px;
  height:132px;
  margin:0 auto;
  border-radius:10px;
}

.qr-card span{
  display:block;
  font-weight:900;
  margin-top:8px;
  font-size:13px;
}

/* EXACT 15 POLAROIDS */

.polaroid-grid{
  height:calc(100vh - 218px);
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr));
  gap:15px;
  overflow:hidden;
  max-width:calc(100vw - 68px);
  margin:0 auto;
}

.post-card{
  min-width:0;
  min-height:0;
  background:#fff;
  color:var(--ink);
  border-radius:12px;
  padding:9px 9px 12px;
  box-shadow:0 22px 48px rgba(50,0,25,.27);
  display:grid;
  grid-template-rows:1fr 67px;
  overflow:hidden;
  transform-origin:center;
}

.post-card:nth-child(odd){
  transform:rotate(-.7deg);
}

.post-card:nth-child(even){
  transform:rotate(.65deg);
}

.post-card:nth-child(5n){
  transform:rotate(0deg);
}

.post-card.is-new{
  animation:newPost .58s cubic-bezier(.2,.9,.2,1) both;
}

@keyframes newPost{
  from{opacity:0;transform:translateY(18px) scale(.94)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.photo-frame{
  min-height:0;
  width:100%;
  height:100%;
  background:#f4f0f3;
  border-radius:9px;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.post-image{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.post-content{
  min-height:0;
  padding:8px 4px 0;
  text-align:center;
}

.name-badge{
  display:inline-block;
  max-width:100%;
  background:var(--magenta);
  color:#fff;
  border-radius:999px;
  padding:4px 9px;
  font-size:11px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:.04em;
  box-shadow:0 8px 20px rgba(226,0,116,.26);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.post-message{
  margin:6px 2px 0;
  color:#403941;
  font-size:12px;
  line-height:1.18;
  font-weight:800;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.empty-slot{
  opacity:.42;
  background:rgba(255,255,255,.76);
  box-shadow:0 14px 32px rgba(50,0,25,.18);
}

.placeholder-frame{
  background:rgba(226,0,116,.06);
  border:2px dashed rgba(226,0,116,.35);
}

.placeholder-plus{
  width:50px;
  height:50px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--magenta);
  color:#fff;
  font-size:36px;
  line-height:1;
  font-weight:900;
}

.placeholder-badge{
  background:#c9b9c2;
}

/* UPLOAD */

.upload-page{
  min-height:100vh;
  display:grid;
  place-items:start center;
  padding:22px;
  background:linear-gradient(145deg,#920046,#e20074 58%,#f50083);
  color:#fff;
}

.upload-card{
  width:min(100%,520px);
  background:#fff;
  color:var(--ink);
  border-radius:28px;
  padding:28px;
  box-shadow:0 30px 80px rgba(40,0,25,.35);
}

.upload-logo{
  display:block;
  max-width:135px;
  max-height:110px;
  object-fit:contain;
  margin:0 auto 18px;
}

.upload-card h1{
  font-size:clamp(30px,8vw,44px);
  line-height:1;
  margin:0 0 10px;
  letter-spacing:-.05em;
  text-align:center;
  color:var(--magenta);
}

.lead{
  color:#5e5960;
  font-weight:700;
  line-height:1.45;
  text-align:center;
}

.upload-card label{
  display:block;
  font-weight:900;
  margin-top:18px;
}

.upload-card input,
.upload-card textarea{
  width:100%;
  margin-top:8px;
  border:2px solid #eee;
  border-radius:16px;
  padding:15px 16px;
  font:inherit;
  font-weight:700;
  outline:none;
}

.upload-card input:focus,
.upload-card textarea:focus{
  border-color:var(--magenta);
}

.upload-card textarea{
  min-height:96px;
  resize:vertical;
}

.file-box{
  border:2px dashed #e6dce2;
  border-radius:20px;
  padding:22px;
  text-align:center;
  cursor:pointer;
  background:#fff6fb;
}

.file-box span{
  display:inline-block;
  background:var(--magenta);
  color:#fff;
  border-radius:999px;
  padding:14px 22px;
  font-size:18px;
  font-weight:900;
}

.file-box input{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
}

.file-name{
  color:var(--magenta);
  font-weight:900;
  margin-top:8px;
  word-break:break-word;
  text-align:center;
}

.preview-box{
  margin-top:12px;
  border-radius:18px;
  background:#f4f0f3;
  padding:10px;
  display:grid;
  place-items:center;
  max-height:32vh;
}

.preview-box img{
  max-width:100%;
  max-height:28vh;
  object-fit:contain;
  border-radius:12px;
}

.counter{
  text-align:right;
  font-weight:900;
  color:#777;
  margin-top:8px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  border:0;
  border-radius:999px;
  background:var(--magenta);
  color:#fff;
  padding:16px 20px;
  font:inherit;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
  margin-top:18px;
  box-shadow:0 12px 28px rgba(226,0,116,.28);
}

.btn:disabled{
  opacity:.55;
  cursor:wait;
}

.success{
  text-align:center;
  padding:12px 0;
}

.check{
  width:96px;
  height:96px;
  margin:4px auto 18px;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:62px;
  font-weight:900;
  box-shadow:0 16px 36px rgba(18,161,80,.28);
}

.success h2{
  font-size:31px;
  margin:0 0 8px;
}

.success p{
  font-weight:800;
  color:#5d575f;
}

.error-box{
  background:#ffe8ef;
  color:#9a003f;
  border:1px solid #ffc4d8;
  border-radius:16px;
  padding:14px 16px;
  margin-top:16px;
  font-weight:800;
}

.success-box{
  background:#eafff1;
  color:#086b35;
  border:1px solid #baf0cd;
  border-radius:16px;
  padding:14px 16px;
  margin-top:16px;
  font-weight:800;
}

code{
  background:#f5eef2;
  padding:2px 5px;
  border-radius:6px;
}

@media (min-width:2200px){
  .wall-header{
    height:210px;
  }

  .polaroid-grid{
    height:calc(100vh - 252px);
    gap:22px;
  }

  .post-card{
    padding:13px 13px 18px;
    grid-template-rows:1fr 82px;
  }

  .name-badge{
    font-size:14px;
  }

  .post-message{
    font-size:15px;
  }
}

@media (max-width:1200px){
  .wall-header{
    grid-template-columns:150px 1fr 156px;
  }

  .logo-slot{
    width:150px;
  }

  .main-logo{
    max-width:140px;
  }

  .qr-card{
    width:150px;
  }

  .qr-card img{
    width:108px;
    height:108px;
  }

  .qr-card strong{
    font-size:19px;
  }

  .polaroid-grid{
    gap:10px;
  }
}

@media (max-width:900px){
  .wall-page{
    overflow:auto;
  }

  .wall{
    height:auto;
    min-height:100vh;
    padding:20px;
  }

  .wall-header{
    height:auto;
    grid-template-columns:1fr;
    gap:18px;
  }

  .logo-slot{
    width:130px;
    height:110px;
    justify-content:center;
    margin:0 auto;
  }

  .qr-card{
    justify-self:center;
  }

  .polaroid-grid{
    height:auto;
    grid-template-columns:1fr;
    grid-template-rows:none;
    max-width:420px;
  }

  .post-card{
    min-height:420px;
  }
}


/* Automatic portrait / landscape polaroids */
.post-card.portrait{
  grid-template-rows: 1fr 72px;
}
.post-card.portrait .photo-frame{
  aspect-ratio: 4 / 5;
}

.post-card.landscape{
  grid-template-rows: 1fr 72px;
}
.post-card.landscape .photo-frame{
  aspect-ratio: 5 / 4;
}

.post-card.square .photo-frame{
  aspect-ratio: 1 / 1;
}

.post-card.portrait .post-image,
.post-card.landscape .post-image,
.post-card.square .post-image{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Give portrait photos more visible height */
.post-card.portrait{
  transform:scale(1.02);
}


/* HYBRID MOSAIC EVENT WALL */
.polaroid-grid{
  display:grid !important;
  grid-template-columns:repeat(10,1fr) !important;
  grid-auto-rows:minmax(90px,1fr) !important;
  gap:14px !important;
  height:calc(100vh - 220px) !important;
  overflow:hidden !important;
}

.post-card{
  transform:none !important;
}

.post-card.landscape{
  grid-column:span 2;
  grid-row:span 1;
}

.post-card.portrait{
  grid-column:span 1;
  grid-row:span 2;
}

.post-card.square{
  grid-column:span 1;
  grid-row:span 1;
}

.photo-frame{
  height:100% !important;
}

.post-image{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}

.empty-slot{
 opacity:.25;
}


/* FIX: images must never be cropped */
.photo-frame{
    overflow: visible !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.post-card{
    overflow: visible !important;
}

.post-image{
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    display:block !important;
}

/* Larger image area inside polaroids */
.post-content{
    height:auto !important;
    min-height:56px !important;
}

.post-card.portrait .photo-frame{
    aspect-ratio:4/5 !important;
}

.post-card.landscape .photo-frame{
    aspect-ratio:5/4 !important;
}

.post-card.square .photo-frame{
    aspect-ratio:1/1 !important;
}


/* FINAL portrait scaling fix */
.polaroid-grid{
  grid-auto-flow:dense !important;
}

.post-card.portrait{
  grid-row: span 2 !important;
  min-height: 520px !important;
}

.post-card.portrait .photo-frame{
  height: calc(100% - 70px) !important;
  min-height: 430px !important;
}

.post-card.landscape{
  grid-column: span 2 !important;
  min-height: 250px !important;
}

.post-card.square{
  min-height: 250px !important;
}

.post-card.portrait .post-image,
.post-card.landscape .post-image,
.post-card.square .post-image{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
}


/* FINAL EVENT SCREEN LAYOUT: 12 POLAROIDS */
.polaroid-grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  grid-template-rows:repeat(3,1fr) !important;
  gap:18px !important;
  height:calc(100vh - 220px) !important;
  overflow:hidden !important;
}

.post-card,
.post-card.portrait,
.post-card.landscape,
.post-card.square{
  grid-column:auto !important;
  grid-row:auto !important;
  transform:none !important;
}

.photo-frame{
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.post-image{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}


/* Fix für Hochformatbilder */
.polaroid-grid img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.polaroid-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 Polaroids pro Reihe */
    gap: 10px;
}

.polaroid-grid img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

P% - 8px; /* sorgt dafür, dass 5 Polaroids in eine Reihe passen */
    box-sizing: border-box;
}