@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');

:root{
  --accent:#ffa200;
  --card-bg:rgba(255,255,255,0.08);
  --blur:25px;
  --radius:33px;
  --text:#e9efff;
  --muted:#b7c0d9;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  color:var(--text);
  background: radial-gradient(1200px circle at 50% -10%, #141a2a 0%, #0e1220 60%, #0a0f1a 100%);
}

.wrap{
  width:min(700px, 100%);
  margin:0 auto;
  padding:calc(16px + var(--safe-top)) 14px calc(20px + var(--safe-bottom));
  display:flex;
  flex-direction:column;
  gap:18px;
}

.hero{
  backdrop-filter: blur(var(--blur));
  background: rgba(0,0,0,0.45);
  border-radius: 28px;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,0.16);
  text-align:center;
}
.title{
  margin:0 0 6px;
  font-size: clamp(22px, 5.8vw, 34px);
  line-height:1.15;
}
.name{ color:#fff; text-shadow:0 0 22px rgba(255,162,0,.9) }
.subtitle{
  margin:0;
  color:var(--muted);
  font-size: clamp(13px, 3.8vw, 18px);
}

/* Hauptbild, mobile zentriert und kürzer */
.card.featured{
  position:relative;
  width:100%;
  height: clamp(260px, 58vw, 420px);
  border-radius: 24px;
  overflow:hidden;
  background: rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.12);
}
.card.featured img{display:block;max-width:100%}
.card.featured .bg-image{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; border-radius:0;
  animation: bgZoom 6s ease-in-out infinite;
}
@keyframes bgZoom{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.card.featured .sara-image{
  position:absolute; bottom:0; left:20%;
  width:36%; height:auto; border-radius:0; box-shadow:none;
  animation: floatSara 6s ease-in-out infinite;
}
.card.featured .yannik-image{
  position:absolute; bottom:0; right:16%;
  width:38%; height:auto; border-radius:0; box-shadow:none;
  animation: floatYannik 6s ease-in-out infinite;
}
@keyframes floatSara{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes floatYannik{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.heart-emoji{
  position:absolute; left:50%; top:42%;
  transform:translate(-50%,-50%); font-size:min(22vw, 110px);
  text-shadow:0 0 14px rgba(0,0,0,.7);
}

/* Message */
.message-container{
  text-align:center;
  margin:4px auto 8px;
  padding:10px 14px;
  background:rgba(255,255,255,.08);
  border-radius: 28px;
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  font-size: clamp(14px, 4.4vw, 18px);
}

/* Audio Personenliste */
.people{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}
.person{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  background: rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
}
.person img{
  width:100%; height:auto; display:block;
  aspect-ratio: 16/10; object-fit: cover;
}
.audio-btn{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  background: rgba(0,0,0,.75);
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  padding:10px 18px;
  font-size:16px; font-weight:600;
  min-width: 52%;
  box-shadow: 0 0 18px rgba(255, 162, 0, .9);
}
.audio-btn.playing{ background: rgba(255,162,0,.95) }

/* Uhrzeit Badge */
.time-info-container{
  display:flex; justify-content:center;
}
.time-info{
  font-size: clamp(13px, 3.8vw, 16px);
  color:white; margin:0; padding:10px 16px;
  background: var(--card-bg);
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(var(--blur));
}
#current-time{ color:var(--accent); font-weight:700; text-shadow:0 0 12px rgba(255,162,0,.8) }

/* Galerie, einspaltig, große Tap-Ziele */
.gallery{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  margin: 14px 0 60px;
}
.card{
  position: relative;
  overflow:hidden;
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  transition: transform .25s ease, box-shadow .6s ease;
  border:1px solid rgba(255,255,255,.08);
}
.card img{
  width:100%; height:auto; display:block;
  object-fit:cover; object-position:center;
  opacity:0; transform: scale(1.01);
  border-radius: calc(var(--radius) + 2px);
  transition: opacity .35s ease, transform .35s ease;
}
.card img.loaded{ opacity:1; transform:none }
.skel{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.14), rgba(255,255,255,0.05));
  background-size:200% 100%;
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Lightbox */
.lightbox{
  position:fixed; inset:0;
  background: rgba(10,12,18,.92);
  display:grid; place-items:center;
  padding: 10px;
  z-index: 9999;
}
.lightbox[hidden]{display:none}
.lightbox img{ max-height: 84vh; width:auto; border-radius: 18px }
.lb-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius: 999px;
  border:0; display:grid; place-items:center;
  font-size:28px; color:#fff; background: rgba(255,255,255,.12);
}
.lb-prev{ left: 10px }
.lb-next{ right: 10px }
.lb-close{
  top: max(10px, var(--safe-top)); right: 10px; transform:none;
  font-size:26px; width:40px; height:40px;
}

/* Brand */
.brand-badge{
  position:fixed; right:12px; bottom: calc(12px + var(--safe-bottom));
  z-index: 10000;
  backdrop-filter: blur(20px);
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);
  border-radius: 28px; padding:8px 12px;
}
.brand-badge a{ color:#eaf2ff; text-decoration:none; font-weight:600; font-size:12px }

/* Desktop-Blocker (damit wirklich Mobile-only) */
.desktop-block{
  position:fixed; inset:0; display:none;
  background: radial-gradient(circle at 50% 30%, rgba(0,0,0,.92), rgba(0,0,0,.96));
  z-index: 100000;
}
.desktop-block-inner{
  position:absolute; inset:0; display:grid; place-items:center;
  color:white; font-size:18px; text-align:center;
}

/* Ab Breite 800px: Blockieren und UI ausblenden */
@media (min-width: 800px){
  .desktop-block{ display:block }
  main, .brand-badge{ filter:blur(6px); pointer-events:none; user-select:none }
}