:root{
  --gold:#f5ff00;
  --heart:#fc1723;

  --bg:#000;
  --glassA: rgba(18,18,22,0.58);
  --glassB: rgba(42,42,52,0.36);

  --stroke: rgba(255,255,255,0.14);
  --stroke2: rgba(255,255,255,0.08);

  --shadow: 0 14px 34px rgba(0,0,0,0.52);
  --inner: inset 0 1px 0 rgba(255,255,255,0.10);

  --radius: 22px;
  --gap: 10px;

  --muted: rgba(245,255,0,0.72);
}

*{ box-sizing:border-box; }
html, body{
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:manipulation;
}
body{
  margin:0;
  background: var(--bg);
  color: var(--gold);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* =========================
   Animated background (nebula drift)
========================= */
@media (prefers-reduced-motion: no-preference){
  body::before{ animation: nebulaDrift 18s ease-in-out infinite alternate; }
  @keyframes nebulaDrift{
    0%   { transform: translate3d(-1.5%, -1%, 0) scale(1.02) rotate(-0.8deg); }
    50%  { transform: translate3d( 1.2%,  0.8%, 0) scale(1.05) rotate( 0.6deg); }
    100% { transform: translate3d( 2.2%, -1.2%, 0) scale(1.03) rotate( 1.0deg); }
  }
}

/* =========================
   Background layers
========================= */
#starLayer{
  position:fixed; inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.star{
  position:absolute;
  border-radius:50%;
  background: rgba(255,255,255,0.9);
  opacity:0.72;
  filter: drop-shadow(0 0 6px rgba(140,220,255,0.30));
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference){
  .star{ animation: starDrift 14s ease-in-out infinite alternate; }
  @keyframes starDrift{
    0%{ transform: translate3d(0,0,0); }
    100%{ transform: translate3d(10px, -14px, 0); }
  }
}

#cometLayer{
  position:fixed; inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:9996;
}
.comet{
  position:absolute;
  left:-40vw;
  width: 280px;
  height: 2px;
  border-radius: 999px;
  opacity: 0;
  transform: translate3d(0,0,0) rotate(var(--rot));
  background: linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,0.95),
    rgba(255,220,60,0.78),
    rgba(255,0,160,0.00)
  );
  animation: cometFly var(--dur) linear forwards;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.32))
          drop-shadow(0 0 18px rgba(255,0,160,0.20));
  will-change: transform, opacity;
}
.comet::after{
  content:"";
  position:absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 12px rgba(255,255,255,0.65),
              0 0 22px rgba(255,0,160,0.28);
}
@keyframes cometFly{
  0%   { transform: translate3d(0,0,0) rotate(var(--rot)); opacity:0; }
  10%  { opacity:0.95; }
  100% { transform: translate3d(170vw, 0, 0) rotate(var(--rot)); opacity:0; }
}

/* FX Layer */
#fxLayer{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9997;
  overflow:hidden;
}
.tapHeart{
  position:absolute;
  font-size: 22px;
  transform: translate(-50%,-50%) scale(1);
  opacity: 0.95;
  animation: tapFloat 1.15s ease-out forwards;
  filter: drop-shadow(0 0 10px rgba(255,0,160,0.32));
}
@keyframes tapFloat{
  0%   { transform: translate(-50%,-50%) scale(1); opacity:0.95; }
  40%  { transform: translate(-50%,-95%) scale(1.25); opacity:0.95; }
  100% { transform: translate(-50%,-170%) scale(0.9); opacity:0; }
}
.confetti{
  position:absolute;
  top:-12vh;
  width:10px;
  height:18px;
  border-radius: 3px;
  opacity:0.95;
  animation: confettiFall 2.9s linear forwards;
}
@keyframes confettiFall{
  0%{ transform: translate3d(0,0,0) rotate(0deg); opacity:1; }
  100%{ transform: translate3d(var(--dx), 110vh, 0) rotate(720deg); opacity:0.95; }
}

/* =========================
   Layout
========================= */
main{
  position:relative;
  z-index:3;
  height:100vh;
  padding: calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: var(--gap);
}

/* Banner */
.banner{
  width:min(94vw, 900px);
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,220,60,0.22), rgba(255,0,160,0.10));
  border:1px solid rgba(255,220,60,0.24);
  box-shadow: var(--shadow), var(--inner);
  font-weight:900;
  letter-spacing:0.4px;
}
.banner .dot{
  width:10px;height:10px;border-radius:50%;
  background: rgba(255,220,60,0.95);
  box-shadow: 0 0 18px rgba(255,220,60,0.70);
}
body.anniversary .banner{ display:flex; }

/* =========================
   Card base + neon outline
========================= */
.box, .memoryCard, #installToast .toast{
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, var(--glassA), var(--glassB));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow), var(--inner);
  position:relative;
  overflow:hidden;
}
.box::before, .memoryCard::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(135deg,
    rgba(255,0,160,.55),
    rgba(255,220,60,.35),
    rgba(61,214,208,.30),
    rgba(255,0,160,.55)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity:.45;
  pointer-events:none;
}
.box::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(140% 120% at 18% 10%, rgba(255,255,255,.12), transparent 55%);
  opacity:.7;
}

/* =========================
   Counter headings + shooting stars
========================= */
.counter-head{
  position: relative;
  width: min(94vw, 900px);
  height: 46px;
  margin: 6px 0 2px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.counter-title{
  position:relative;
  z-index:2;
  font-weight:900;
  letter-spacing:1.2px;
  font-size:13px;
  text-transform:uppercase;
  color: rgba(215,215,215,0.825); /* deine Änderung */
  text-shadow:
    0 0 10px rgba(255,220,60,.35),
    0 0 22px rgba(255,0,160,.18);
}
.counter-head::before,
.counter-head::after{
  content:"";
  position:absolute;
  top:50%;
  width:30%;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,220,60,.45), transparent);
}
.counter-head::before{ left:0; }
.counter-head::after{ right:0; }

.shooting-stars{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
}
.shooting-stars::before,
.shooting-stars::after{
  content:"";
  position:absolute;
  left:-40%;
  width: 180px;
  height: 2px;
  border-radius:999px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.95),
    rgba(255,220,60,.8),
    rgba(255,0,160,0)
  );
  opacity:0;
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.5))
    drop-shadow(0 0 18px rgba(255,0,160,.35));
  transform: rotate(-12deg);
  animation: shootingStar 6s linear infinite;
}
.shooting-stars::before{ top: 30%; }
.shooting-stars::after{
  top: 65%;
  animation-delay: 3s;
}
@keyframes shootingStar{
  0%   { transform: translateX(0) rotate(-12deg); opacity:0; }
  10%  { opacity:1; }
  100% { transform: translateX(160vw) rotate(-12deg); opacity:0; }
}
.counter-head.bottom .shooting-stars::before{ animation-duration: 4.5s; }
.counter-head.bottom .shooting-stars::after{  animation-duration: 5.5s; }

/* =========================
   Counters: since + to
========================= */
.sinceWrapRows, .grid{
  width:min(70vw, 900px);
  display:grid;
  gap: 10px;
}

/* ✅ since: 2 Zeilen, 3 Spalten
   Zeile 1: Jahr, Monate, Tage
   Zeile 2: Stunden, Minuten, Sekunden
*/
.sinceWrapRows{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  grid-template-areas:
    "year mo d"
    "h mi s";
}
.tileYearSpan{ grid-area: year; }
.tileMo{ grid-area: mo; }
.tileD { grid-area: d;  }
.tileH { grid-area: h;  }
.tileMi{ grid-area: mi; }
.tileS { grid-area: s;  }

/* To grid */
.grid.to{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 740px){
  .grid.to{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* tiles */
.sinceWrapRows .tile,
.grid.to .tile{
  border-radius: 999px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 3px;
  min-height: 70px;
}

/* type */
.num{
  font-family: "Orbitron", system-ui, sans-serif !important; /* deine Änderung */
  font-weight: 800;
  letter-spacing: 0.8px;
  font-variant-numeric: tabular-nums;
  font-size: clamp(18px, 5.2vw, 30px);
  line-height:1;
  display:block;
  text-shadow:
    0 0 10px rgba(245,255,0,.20),
    0 0 26px rgba(255,0,160,.12);
}
.tileYearSpan .num{
  font-weight: 900;
  letter-spacing: 1.1px;
  font-size: clamp(22px, 7vw, 40px);
}

.lbl{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space: nowrap;
  max-width: 100%;
  overflow:hidden;
  text-overflow: ellipsis;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  font-family: "Arial Black", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.92;
  color: rgba(215,215,215,0.825); /* deine Änderung */
}

/* Sekunden etwas leiser */
#since_s, #to_s{ opacity:.6; }

@media (max-width: 380px){
  .lbl{ font-size: 10px; padding: 4px 8px; letter-spacing: .8px; }
}

/* =========================
   Hero (A♡R) – transparent (wie gewünscht)
========================= */
.herzRow{
  width:min(94vw, 900px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  padding: 8px 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.letter{
  font-size: clamp(54px, 14vw, 140px);
  line-height:1;
  color: var(--heart);
  text-shadow:
    0 0 10px rgba(255,255,255,0.45),
    0 0 28px rgba(255,0,160,0.35);
}
.heartWrap{
  position:relative;
  width: clamp(62px, 15vw, 150px);
  height: clamp(62px, 15vw, 150px);
  display:grid;
  place-items:center;
}
.herzicon{
  width: 75%;
  height: 75%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform-origin: 50% 65%;
  will-change: transform;
}
.ringSvg{
  position:absolute;
  inset:-15%;
  width:130%;
  height:130%;
  pointer-events:none;
  filter: drop-shadow(0 0 18px rgba(255,0,160,0.22));
}
.ringTrack{ fill:none; stroke: rgba(255,255,255,0.18); stroke-width: 10; }
.ringProg{
  fill:none;
  stroke: rgba(255,220,60,0.85);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 24px rgba(255,0,160,0.20));
}
.ringDot{
  fill: rgba(255,220,60,0.95);
  filter: drop-shadow(0 0 10px rgba(255,220,60,0.70));
}

/* Heart SVG */
.heartSvg{ width:100%; height:100%; display:block; }
.heartBase{ fill: rgba(252,23,35,0.18); }
.heartFillRect{
  fill: var(--heart);
  filter: drop-shadow(0 0 9px rgba(255,255,255,0.70))
          drop-shadow(0 0 18px rgba(255,0,160,0.55));
}
.heartFillLine{
  fill:none;
  stroke: rgba(255,255,255,0.85);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(255,255,255,0.90))
          drop-shadow(0 0 18px rgba(255,0,160,0.60));
  opacity:0.95;
}

/* Heart animations */
@keyframes wobbleHeart{
  0%{transform: rotate(0) scale(1);}
  12%{transform: rotate(-2deg) scale(1.02,0.98);}
  25%{transform: rotate( 2deg) scale(0.99,1.01);}
  38%{transform: rotate(-1.5deg) scale(1.015,0.985);}
  52%{transform: rotate( 1deg) scale(0.995,1.005);}
  68%{transform: rotate(-0.6deg) scale(1.008,0.992);}
  84%{transform: rotate(0.4deg) scale(0.998,1.002);}
  100%{transform: rotate(0) scale(1);}
}
.herzicon.wobble{ animation: wobbleHeart 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%{transform:scale(1)} 40%{transform:scale(1.08)} 100%{transform:scale(1)} }
.herzicon.pulse{ animation: pulse 0.35s ease-out 1; }
@keyframes burst{
  0%{transform:rotate(0) scale(1)}
  20%{transform:rotate(-10deg) scale(1.14,0.92)}
  40%{transform:rotate(10deg) scale(0.92,1.14)}
  65%{transform:rotate(-6deg) scale(1.08,0.95)}
  100%{transform:rotate(0) scale(1)}
}
.herzicon.burst{ animation: burst 0.8s ease-out 1; }

/* =========================
   Quote box
========================= */
.box{
  width:min(94vw, 900px);
  padding: 10px 12px;
  margin-top: 8px;
  border: 0!important;
  background: transparent!important; 
}
.quoteRow{ display:flex; align-items:center; gap:10px; 
}
.quoteText{
  text-align: center;
  flex:1;
  font-size: 15px;
  line-height:1.35;
  transition: opacity .28s ease;
  color:#fff; /* deine Änderung */
  
}
.quoteText.fade{ opacity:0; }
.badge{
  margin-top: 6px;
  font-size: 12px;
  opacity:0.78;
  color: var(--muted);
}

/* =========================
   Memory Modal
========================= */
#memoryModal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 14px 12px;
}
#memoryModal.open{
  display:flex;
  align-items:center;
  justify-content:center;
}
.memoryCard{
  width:min(92vw, 520px);
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(10,10,14,0.86), rgba(40,40,50,0.55));
  box-shadow: var(--shadow), 0 0 30px rgba(255,0,160,0.14);
}
.memoryTitle{
  font-weight: 900;
  letter-spacing:0.3px;
  margin-bottom:10px;
  font-size: 22px;
}
.memoryGrid{
  display:grid;
  gap:10px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 420px){
  .memoryGrid{ grid-template-columns: 1fr; }
}
.memItem{
  display:grid;
  gap:5px;
  grid-template-columns: 1fr 1.2fr;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  align-items: center;
  overflow: hidden;
}
.memK{ 
  font-size: 12px;
  opacity: 0.75;
  background: #333;
  height: 100%;
  display: flex;
  align-items: center;
  
  padding: 2px 15px;
}

.memV{
  font-weight:900; font-size: 22px; 
}
.memProgItem .memV{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.memBar{
  margin-top: 10px;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
}
.memBarFill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,0,160,0.82), rgba(255,220,60,0.95));
  box-shadow: 0 0 18px rgba(255,220,60,0.18);
  transition: width 420ms ease;
}
.memPhotoWrap{
  margin-top: 12px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22);
  max-height: 220px;
}
@media (max-width: 420px){ .memPhotoWrap{ max-height: 190px; } }
.memPhotoWrap img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: contain;
  background: rgba(0,0,0,0.22);
}
.memoryActions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:12px;
}

/* =========================
   Install Toast
========================= */
#installToast{
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(92vw, 520px);
  z-index: 999999;
  display: none;
}
#installToast.show{ display:block; }
#installToast .toast{
  border-radius: 999px;
  padding: 10px 12px;
  border:1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(10,10,14,0.80), rgba(40,40,50,0.55));
  box-shadow: var(--shadow), 0 0 26px rgba(255,0,160,0.14);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.toastTitle{ font-weight:900; }

/* =========================
   Share FAB (oben rechts)
========================= */
.share-fab{
  position: fixed;
  top: calc(env(safe-area-inset-top) + 10px);
  right: calc(env(safe-area-inset-right) + 10px);
  z-index: 999999;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.35);
  color: var(--gold);
  display: grid;
  place-items: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.10);
}
.share-fab svg{ width: 22px; height: 22px; display:block; }
.share-fab:active{ transform: scale(.96); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .herzicon.wobble, .herzicon.pulse, .herzicon.burst,
  .confetti, .tapHeart, .comet { animation:none !important; }
  .quoteText{ transition:none; }
}
#sinceModal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9998;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 14px 12px;
}
#sinceModal.open{
  display:flex;
  align-items:center;
  justify-content:center;
}
iframe{
  border:0;
}
/* =========================
   Overlay Buttons (Memory + Since) – fehlend
========================= */

/* Button-Zeile in Modals */
#memoryModal .memoryActions,
#sinceModal .memoryActions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* Buttons in Modals: etwas „wichtiger“ als normale Buttons */
#memoryModal .btn,
#sinceModal .btn{
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.3px;
  touch-action: manipulation;
}

/* Optional: Primär (Kopieren) etwas mehr Glow */
#memoryModal #memCopy,
#sinceModal #sinceCopy{
  border-color: rgba(255,220,60,0.22);
  box-shadow:
    0 0 0 1px rgba(255,220,60,0.08),
    0 10px 26px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

/* Schließen: etwas „ruhiger“ */
#memoryModal #memClose,
#sinceModal #sinceClose{
  opacity: 0.92;
}

/* Hover/Active (Mobile friendly) */
#memoryModal .btn:hover,
#sinceModal .btn:hover{
  border-color: rgba(255,220,60,0.28);
}
#memoryModal .btn:active,
#sinceModal .btn:active{
  transform: scale(0.98);
}

/* Modal backdrop klickbar + Card sitzt sauber */
#sinceModal,
#memoryModal{
  padding: calc(14px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom));
}

/* Wenn du den Since-Modal wie Memory als "open" togglest */
#sinceModal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#sinceModal.open{
  display:flex;
  align-items:center;
  justify-content:center;
}