:root{
  /* Himmelblau-Palette */
  --bg-top: #e9f4ff;     /* sehr helles Himmelblau */
  --bg-btm: #f7fbff;     /* fast weiß */
  --card: rgba(255,255,255,0.78);
  --text: #21364d;       /* leichtes Marineblau */
  --accent: #6fb3ff;     /* Himmelblau */
  --accent-2: #2e86ff;   /* kräftigeres Blau */
  --success: #2a8a4b;
  --shadow: 0 14px 40px rgba(23,78,166,0.12);
  --radius: 20px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  background:
    url("../assets/sky-clouds.svg") center/cover no-repeat fixed,
    linear-gradient(180deg,var(--bg-top),var(--bg-btm));
  color:var(--text);
}

.bg-decor{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: url("../assets/baby-constellation.svg") center/contain no-repeat;
  opacity:.18;
}

main{max-width:980px;margin:0 auto;padding:56px 20px 64px}

.hero{text-align:center;margin-bottom:28px}
.hero h1{
  font-size: clamp(32px, 4.8vw, 60px);
  margin:0 0 12px; letter-spacing:.2px; color:#0f3a7a;
  text-shadow: 0 2px 10px rgba(46,134,255,.15);
}
.subtitle{max-width:740px;margin:0 auto;line-height:1.6;opacity:.95}

.card{
  backdrop-filter: blur(10px);
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 24px; margin: 30px auto; max-width: 660px;
}

.card h2{margin:0 0 6px}
.helper{margin:0;opacity:.9}

form{display:grid;grid-template-columns:1fr auto;gap:12px;margin-top:14px}
#email{
  padding:14px 16px;border-radius:14px;border:1px solid #d4e6ff;outline:none;font-size:16px;background:#fff
}
#email:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(47,134,255,.15)}
#fullname{position:absolute;left:-9999px;top:-9999px} /* Honeypot */

button{
  padding:14px 18px;border-radius:14px;border:none;cursor:pointer;color:#fff;font-weight:650;letter-spacing:.2px;
  background: linear-gradient(135deg,var(--accent),var(--accent-2));
  transition: transform .05s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 8px 22px rgba(46,134,255,.28);
}
button:hover{box-shadow:0 12px 28px rgba(46,134,255,.36)}
button:active{transform:translateY(1px)}
button[disabled]{opacity:.75;filter:grayscale(.15);cursor:not-allowed}

.status{min-height:24px;margin-top:6px;font-size:14px}
.status.ok{color:var(--success)}
.status.err{color:#b00020}

/* Polaroids mit Blautönen */
.photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.polaroid{
  background:#fff;border-radius:14px;padding:10px 10px 16px;box-shadow:var(--shadow);text-align:center
}
.polaroid.tilt{transform:rotate(-2deg)}
.polaroid .img{
  height:170px;border-radius:10px;margin-bottom:10px;background-size:cover;background-position:center
}
.soft-gradient{background:radial-gradient(circle at 30% 30%, #bfe0ff 0, #e6f2ff 45%, #ffffff 100%)}
.soft-gradient-2{background:radial-gradient(circle at 70% 40%, #d0e8ff 0, #f0f7ff 50%, #ffffff 100%)}
.soft-gradient-3{background:radial-gradient(circle at 40% 60%, #9fd0ff 0, #dff0ff 50%, #ffffff 100%)}

.footer{margin-top:46px;text-align:center;opacity:.9}
.footer a{color:inherit;text-decoration:underline dotted}

dialog{border:none;border-radius:14px;padding:0;max-width:640px;width:94%;box-shadow:var(--shadow)}
.privacy-content{padding:22px;background:#fff;border-radius:14px}
.privacy-content h3{margin-top:0}

.visually-hidden{
  position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
  white-space:nowrap;border:0;padding:0;margin:-1px
}

@media (max-width:700px){
  form{grid-template-columns:1fr}
  .photos{grid-template-columns:1fr}
}

#fireworks{
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 9999;
  opacity: 0; transition: opacity .4s ease;
}
#fireworks.show{ opacity: 1; }

@media (prefers-reduced-motion: reduce){
  #fireworks{ display: none !important; }
}


/* Süße Bulldoggen-Note */
.sibling-banner{
  margin: 44px auto 10px;
  max-width: 720px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(46,134,255,0.20);
  box-shadow: 0 10px 26px rgba(46,134,255,0.14);
  backdrop-filter: blur(6px);
}

.dog-emoji{
  font-size: 34px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.08));
  transform: rotate(-6deg);
}

.dog-text{
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0f3a7a; /* passt zur Himmelblau-Palette */
  letter-spacing: .2px;
}

.paws{ margin-left: 6px; }
@media (max-width: 640px){
  .sibling-banner{ grid-template-columns: 1fr; text-align: center; }
  .dog-emoji{ justify-self: center; transform: rotate(0deg); }
}

/* === Feuerwerk (CSS-only, ~20s, himmelblau) === */
@media (prefers-reduced-motion: reduce){ .fw-layer{ display:none !important; } }

.fw-layer{
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:1; animation: fwFadeOut 20s ease forwards;
}
@keyframes fwFadeOut { 0%{opacity:1} 96%{opacity:1} 100%{opacity:0} }

.fw{
  position:absolute; width:0; height:0; --h:200; /* Grund-Hue Himmelblau */
}
.fw i{
  position:absolute; left:0; top:0; display:block;
  width:4px; height:4px; border-radius:50%;
  background:hsl(var(--h),100%,75%);
  box-shadow: 0 0 6px hsla(var(--h),100%,70%,.8), 0 0 14px hsla(var(--h),100%,70%,.5);
  opacity:0; transform: rotate(var(--a,0deg)) translateX(0) scale(.8);
  animation: particle 2.6s ease-out forwards;
}
.fw i:nth-child(3n){ background:hsl(calc(var(--h) - 8),100%,70%) }
.fw i:nth-child(5n){ background:hsl(calc(var(--h) + 10),100%,78%) }
.fw i:nth-child(7n){ background:hsl(calc(var(--h) + 20),100%,82%) }

@keyframes particle{
  0%   { opacity:0; transform: rotate(var(--a)) translateX(0)    scale(.8); }
  10%  { opacity:1; transform: rotate(var(--a)) translateX(30px) scale(.92); }
  85%  { opacity:.95; }
  100% { opacity:0; transform: rotate(var(--a)) translateX(var(--r)) scale(.96); }
}

/* Bursts-Positionen */
.fw1{ left:50%; top:22%; transform:translate(-50%,-50%); }
.fw2{ left:20%; top:30%; transform:translate(-50%,-50%); }
.fw3{ right:18%; top:28%; transform:translate(50%,-50%); }
.fw4{ left:30%; top:18%; transform:translate(-50%,-50%); }
.fw5{ left:72%; top:20%; transform:translate(-50%,-50%); }
.fw6{ left:50%; top:35%; transform:translate(-50%,-50%); }

/* Startzeiten je Burst, über ~20s verteilt */
.fw1 i { animation-delay: .3s;  }
.fw2 i { animation-delay: 3.9s; }
.fw3 i { animation-delay: 7.4s; }
.fw4 i { animation-delay: 10.9s;}
.fw5 i { animation-delay: 14.4s;}
.fw6 i { animation-delay: 17.9s;}

/* 32 Partikel je Burst: setze Winkel (--a) & Radius (--r) per nth-child  */
:root { --step: 11.25deg; } /* 360 / 32 */
.fw1 i:nth-child(1){ --a: calc(0*var(--step));  --r:140px;}
.fw1 i:nth-child(2){ --a: calc(1*var(--step));  --r:160px;}
.fw1 i:nth-child(3){ --a: calc(2*var(--step));  --r:180px;}
.fw1 i:nth-child(4){ --a: calc(3*var(--step));  --r:200px;}
.fw1 i:nth-child(5){ --a: calc(4*var(--step));  --r:150px;}
.fw1 i:nth-child(6){ --a: calc(5*var(--step));  --r:170px;}
.fw1 i:nth-child(7){ --a: calc(6*var(--step));  --r:190px;}
.fw1 i:nth-child(8){ --a: calc(7*var(--step));  --r:210px;}
.fw1 i:nth-child(9){ --a: calc(8*var(--step));  --r:145px;}
.fw1 i:nth-child(10){--a: calc(9*var(--step));  --r:165px;}
.fw1 i:nth-child(11){--a: calc(10*var(--step)); --r:185px;}
.fw1 i:nth-child(12){--a: calc(11*var(--step)); --r:205px;}
.fw1 i:nth-child(13){--a: calc(12*var(--step)); --r:155px;}
.fw1 i:nth-child(14){--a: calc(13*var(--step)); --r:175px;}
.fw1 i:nth-child(15){--a: calc(14*var(--step)); --r:195px;}
.fw1 i:nth-child(16){--a: calc(15*var(--step)); --r:215px;}
.fw1 i:nth-child(17){--a: calc(16*var(--step)); --r:150px;}
.fw1 i:nth-child(18){--a: calc(17*var(--step)); --r:170px;}
.fw1 i:nth-child(19){--a: calc(18*var(--step)); --r:190px;}
.fw1 i:nth-child(20){--a: calc(19*var(--step)); --r:210px;}
.fw1 i:nth-child(21){--a: calc(20*var(--step)); --r:145px;}
.fw1 i:nth-child(22){--a: calc(21*var(--step)); --r:165px;}
.fw1 i:nth-child(23){--a: calc(22*var(--step)); --r:185px;}
.fw1 i:nth-child(24){--a: calc(23*var(--step)); --r:205px;}
.fw1 i:nth-child(25){--a: calc(24*var(--step)); --r:155px;}
.fw1 i:nth-child(26){--a: calc(25*var(--step)); --r:175px;}
.fw1 i:nth-child(27){--a: calc(26*var(--step)); --r:195px;}
.fw1 i:nth-child(28){--a: calc(27*var(--step)); --r:215px;}
.fw1 i:nth-child(29){--a: calc(28*var(--step)); --r:150px;}
.fw1 i:nth-child(30){--a: calc(29*var(--step)); --r:170px;}
.fw1 i:nth-child(31){--a: calc(30*var(--step)); --r:190px;}
.fw1 i:nth-child(32){--a: calc(31*var(--step)); --r:210px;}

.fw2 i:nth-child(1){ --a: calc(0*var(--step));  --r:140px;}
.fw2 i:nth-child(2){ --a: calc(1*var(--step));  --r:160px;}
.fw2 i:nth-child(3){ --a: calc(2*var(--step));  --r:180px;}
.fw2 i:nth-child(4){ --a: calc(3*var(--step));  --r:200px;}
.fw2 i:nth-child(5){ --a: calc(4*var(--step));  --r:150px;}
.fw2 i:nth-child(6){ --a: calc(5*var(--step));  --r:170px;}
.fw2 i:nth-child(7){ --a: calc(6*var(--step));  --r:190px;}
.fw2 i:nth-child(8){ --a: calc(7*var(--step));  --r:210px;}
.fw2 i:nth-child(9){ --a: calc(8*var(--step));  --r:145px;}
.fw2 i:nth-child(10){--a: calc(9*var(--step));  --r:165px;}
.fw2 i:nth-child(11){--a: calc(10*var(--step)); --r:185px;}
.fw2 i:nth-child(12){--a: calc(11*var(--step)); --r:205px;}
.fw2 i:nth-child(13){--a: calc(12*var(--step)); --r:155px;}
.fw2 i:nth-child(14){--a: calc(13*var(--step)); --r:175px;}
.fw2 i:nth-child(15){--a: calc(14*var(--step)); --r:195px;}
.fw2 i:nth-child(16){--a: calc(15*var(--step)); --r:215px;}
.fw2 i:nth-child(17){--a: calc(16*var(--step)); --r:150px;}
.fw2 i:nth-child(18){--a: calc(17*var(--step)); --r:170px;}
.fw2 i:nth-child(19){--a: calc(18*var(--step)); --r:190px;}
.fw2 i:nth-child(20){--a: calc(19*var(--step)); --r:210px;}
.fw2 i:nth-child(21){--a: calc(20*var(--step)); --r:145px;}
.fw2 i:nth-child(22){--a: calc(21*var(--step)); --r:165px;}
.fw2 i:nth-child(23){--a: calc(22*var(--step)); --r:185px;}
.fw2 i:nth-child(24){--a: calc(23*var(--step)); --r:205px;}
.fw2 i:nth-child(25){--a: calc(24*var(--step)); --r:155px;}
.fw2 i:nth-child(26){--a: calc(25*var(--step)); --r:175px;}
.fw2 i:nth-child(27){--a: calc(26*var(--step)); --r:195px;}
.fw2 i:nth-child(28){--a: calc(27*var(--step)); --r:215px;}
.fw2 i:nth-child(29){--a: calc(28*var(--step)); --r:150px;}
.fw2 i:nth-child(30){--a: calc(29*var(--step)); --r:170px;}
.fw2 i:nth-child(31){--a: calc(30*var(--step)); --r:190px;}
.fw2 i:nth-child(32){--a: calc(31*var(--step)); --r:210px;}

.fw3 i:nth-child(n){ --h: 205; } /* leichte Farbverschiebung */

.fw3 i:nth-child(1){ --a: calc(0*var(--step));  --r:140px;}
.fw3 i:nth-child(2){ --a: calc(1*var(--step));  --r:160px;}
.fw3 i:nth-child(3){ --a: calc(2*var(--step));  --r:180px;}
.fw3 i:nth-child(4){ --a: calc(3*var(--step));  --r:200px;}
.fw3 i:nth-child(5){ --a: calc(4*var(--step));  --r:150px;}
.fw3 i:nth-child(6){ --a: calc(5*var(--step));  --r:170px;}
.fw3 i:nth-child(7){ --a: calc(6*var(--step));  --r:190px;}
.fw3 i:nth-child(8){ --a: calc(7*var(--step));  --r:210px;}
.fw3 i:nth-child(9){ --a: calc(8*var(--step));  --r:145px;}
.fw3 i:nth-child(10){--a: calc(9*var(--step));  --r:165px;}
.fw3 i:nth-child(11){--a: calc(10*var(--step)); --r:185px;}
.fw3 i:nth-child(12){--a: calc(11*var(--step)); --r:205px;}
.fw3 i:nth-child(13){--a: calc(12*var(--step)); --r:155px;}
.fw3 i:nth-child(14){--a: calc(13*var(--step)); --r:175px;}
.fw3 i:nth-child(15){--a: calc(14*var(--step)); --r:195px;}
.fw3 i:nth-child(16){--a: calc(15*var(--step)); --r:215px;}
.fw3 i:nth-child(17){--a: calc(16*var(--step)); --r:150px;}
.fw3 i:nth-child(18){--a: calc(17*var(--step)); --r:170px;}
.fw3 i:nth-child(19){--a: calc(18*var(--step)); --r:190px;}
.fw3 i:nth-child(20){--a: calc(19*var(--step)); --r:210px;}
.fw3 i:nth-child(21){--a: calc(20*var(--step)); --r:145px;}
.fw3 i:nth-child(22){--a: calc(21*var(--step)); --r:165px;}
.fw3 i:nth-child(23){--a: calc(22*var(--step)); --r:185px;}
.fw3 i:nth-child(24){--a: calc(23*var(--step)); --r:205px;}
.fw3 i:nth-child(25){--a: calc(24*var(--step)); --r:155px;}
.fw3 i:nth-child(26){--a: calc(25*var(--step)); --r:175px;}
.fw3 i:nth-child(27){--a: calc(26*var(--step)); --r:195px;}
.fw3 i:nth-child(28){--a: calc(27*var(--step)); --r:215px;}
.fw3 i:nth-child(29){--a: calc(28*var(--step)); --r:150px;}
.fw3 i:nth-child(30){--a: calc(29*var(--step)); --r:170px;}
.fw3 i:nth-child(31){--a: calc(30*var(--step)); --r:190px;}
.fw3 i:nth-child(32){--a: calc(31*var(--step)); --r:210px;}

.fw4 i:nth-child(n){ --h: 195; }
.fw5 i:nth-child(n){ --h: 210; }
.fw6 i:nth-child(n){ --h: 200; }

/* Für fw4–fw6 dieselben Winkel/Radien wie oben wiederverwenden */
.fw4 i:nth-child(n){ --a: unset; --r: unset; }
.fw5 i:nth-child(n){ --a: unset; --r: unset; }
.fw6 i:nth-child(n){ --a: unset; --r: unset; }
/* Wir „kopieren“ das Muster, indem wir die gleichen Regeln erneut anwenden */
.fw4 i:nth-child(1), .fw5 i:nth-child(1), .fw6 i:nth-child(1){ --a: calc(0*var(--step));  --r:140px;}
.fw4 i:nth-child(2), .fw5 i:nth-child(2), .fw6 i:nth-child(2){ --a: calc(1*var(--step));  --r:160px;}
.fw4 i:nth-child(3), .fw5 i:nth-child(3), .fw6 i:nth-child(3){ --a: calc(2*var(--step));  --r:180px;}
.fw4 i:nth-child(4), .fw5 i:nth-child(4), .fw6 i:nth-child(4){ --a: calc(3*var(--step));  --r:200px;}
.fw4 i:nth-child(5), .fw5 i:nth-child(5), .fw6 i:nth-child(5){ --a: calc(4*var(--step));  --r:150px;}
.fw4 i:nth-child(6), .fw5 i:nth-child(6), .fw6 i:nth-child(6){ --a: calc(5*var(--step));  --r:170px;}
.fw4 i:nth-child(7), .fw5 i:nth-child(7), .fw6 i:nth-child(7){ --a: calc(6*var(--step));  --r:190px;}
.fw4 i:nth-child(8), .fw5 i:nth-child(8), .fw6 i:nth-child(8){ --a: calc(7*var(--step));  --r:210px;}
.fw4 i:nth-child(9), .fw5 i:nth-child(9), .fw6 i:nth-child(9){ --a: calc(8*var(--step));  --r:145px;}
.fw4 i:nth-child(10),.fw5 i:nth-child(10),.fw6 i:nth-child(10){--a: calc(9*var(--step));  --r:165px;}
.fw4 i:nth-child(11),.fw5 i:nth-child(11),.fw6 i:nth-child(11){--a: calc(10*var(--step)); --r:185px;}
.fw4 i:nth-child(12),.fw5 i:nth-child(12),.fw6 i:nth-child(12){--a: calc(11*var(--step)); --r:205px;}
.fw4 i:nth-child(13),.fw5 i:nth-child(13),.fw6 i:nth-child(13){--a: calc(12*var(--step)); --r:155px;}
.fw4 i:nth-child(14),.fw5 i:nth-child(14),.fw6 i:nth-child(14){--a: calc(13*var(--step)); --r:175px;}
.fw4 i:nth-child(15),.fw5 i:nth-child(15),.fw6 i:nth-child(15){--a: calc(14*var(--step)); --r:195px;}
.fw4 i:nth-child(16),.fw5 i:nth-child(16),.fw6 i:nth-child(16){--a: calc(15*var(--step)); --r:215px;}
.fw4 i:nth-child(17),.fw5 i:nth-child(17),.fw6 i:nth-child(17){--a: calc(16*var(--step)); --r:150px;}
.fw4 i:nth-child(18),.fw5 i:nth-child(18),.fw6 i:nth-child(18){--a: calc(17*var(--step)); --r:170px;}
.fw4 i:nth-child(19),.fw5 i:nth-child(19),.fw6 i:nth-child(19){--a: calc(18*var(--step)); --r:190px;}
.fw4 i:nth-child(20),.fw5 i:nth-child(20),.fw6 i:nth-child(20){--a: calc(19*var(--step)); --r:210px;}
.fw4 i:nth-child(21),.fw5 i:nth-child(21),.fw6 i:nth-child(21){--a: calc(20*var(--step)); --r:145px;}
.fw4 i:nth-child(22),.fw5 i:nth-child(22),.fw6 i:nth-child(22){--a: calc(21*var(--step)); --r:165px;}
.fw4 i:nth-child(23),.fw5 i:nth-child(23),.fw6 i:nth-child(23){--a: calc(22*var(--step)); --r:185px;}
.fw4 i:nth-child(24),.fw5 i:nth-child(24),.fw6 i:nth-child(24){--a: calc(23*var(--step)); --r:205px;}
.fw4 i:nth-child(25),.fw5 i:nth-child(25),.fw6 i:nth-child(25){--a: calc(24*var(--step)); --r:155px;}
.fw4 i:nth-child(26),.fw5 i:nth-child(26),.fw6 i:nth-child(26){--a: calc(25*var(--step)); --r:175px;}
.fw4 i:nth-child(27),.fw5 i:nth-child(27),.fw6 i:nth-child(27){--a: calc(26*var(--step)); --r:195px;}
.fw4 i:nth-child(28),.fw5 i:nth-child(28),.fw6 i:nth-child(28){--a: calc(27*var(--step)); --r:215px;}
.fw4 i:nth-child(29),.fw5 i:nth-child(29),.fw6 i:nth-child(29){--a: calc(28*var(--step)); --r:150px;}
.fw4 i:nth-child(30),.fw5 i:nth-child(30),.fw6 i:nth-child(30){--a: calc(29*var(--step)); --r:170px;}
.fw4 i:nth-child(31),.fw5 i:nth-child(31),.fw6 i:nth-child(31){--a: calc(30*var(--step)); --r:190px;}
.fw4 i:nth-child(32),.fw5 i:nth-child(32),.fw6 i:nth-child(32){--a: calc(31*var(--step)); --r:210px;}



.contact-banner{
  background:#f0f8ff;       /* zartes Himmelblau */
  padding:1rem;
  margin-top:1rem;
  border-radius:8px;
  text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
}
.contact-text{
  font-size:1rem;
  color:#333;
}
.contact-link{
  color:#0077cc;
  text-decoration:none;
  font-weight:bold;
}
.contact-link:hover{
  text-decoration:underline;
}